/* =============================================
   アニメーション無効化（動き低減設定）
   ============================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* =============================================
   Slide1 Hero Stage
   ============================================= */

.slide1-hero-stage {
	position: relative;
	overflow: hidden;
	background-color: #000;
}

.slide1-hero-media {
	display: block;
}

.slide1-hero-media img {
	display: block;
}

.slide1_hero {
	width: 100%;
	height: auto;
	display: block;
}

/* オーバーレイ：背景画像の上に重なるレイヤー */
.slide1-hero-overlay {
	position: absolute;
	inset: 0;
	z-index: 3;
	pointer-events: none;
}

/* パーツ画像コンテナ */
.slide1-hero-parts {
	position: absolute;
	inset: 0;
}

/* =============================================
   Slide1 各パーツ画像配置
   ※ calc(デザイン値px / 基準幅px * 100%) で配置
   ============================================= */

/* text-01.png */
.slide1-text01 {
	position: absolute;
	top:   calc(140 / 1080 * 100%);
	left:  calc(624 / 1920 * 100%);
	width: calc(661 / 1920 * 100%);
	height: auto;
}

/* logo-main.png */
.slide1-logo-main {
	position: absolute;
	top:   calc(321 / 1080 * 100%);
	left:  calc(468 / 1920 * 100%);
	width: calc(984 / 1920 * 100%);
	height: auto;
}
/* logo-main.png */
.slide1-date {
	position: absolute;
	top:   calc(822 / 1080 * 100%);
	left:  calc(679 / 1920 * 100%);
	width: calc(561 / 1920 * 100%);
	height: auto;
}


/* =============================================
   アニメーション初期状態（opacity:0 / GSAPで表示）
   ============================================= */
.slide1_hero,
.slide1-hero-parts img {
	opacity: 0;
}


/* =============================================
   ペンギン装飾（highlights.html）
   ============================================= */

/* ペンギンを散りばめる基準ラッパー */
.penguin-deco-wrap {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 5;
	overflow: visible;
}

/* 各ペンギン共通 */
.penguin-deco {
	position: absolute;
	height: auto;
	pointer-events: none;
	will-change: transform, opacity;
}

/* ペンギン1：左上エリア
   ※ 実サイズ 552px の半分 = 276px */


.penguin-deco-1 {
	top:  3%;
	right: calc(20 / 1920 * 100vw);
	width: calc(184 / 1920 * 100vw);
	
}

/* ペンギン2：右上エリア
   ※ 実サイズ 399px の半分 = 200px */
.penguin-deco-2 {
	top:  42%;
	right: calc(60 / 1920 * 100vw);
	width: calc(133 / 1920 * 100vw);
}

/* ペンギン3：左中央エリア
   ※ 釣り */
.penguin-deco-3 {
	top:  90%;
	right: calc(40/ 1920 * 100vw);
	
	width: calc(214 / 1920 * 100vw);
	
}

/* ペンギン4：右中下エリア
   ※ 実サイズ 573px の半分 = 287px */
.penguin-deco-4 {
	top:  60%;
	left: calc(40/ 1920 * 100vw);
	width: calc(200
	/ 1920 * 100vw);
}

/* ペンギン5：左下エリア
   ※ ドリル */
.penguin-deco-5 {
	top:  18%;
	left: calc(40 / 1920 * 100vw);
	width: calc(143 / 1920 * 100vw);
	}
	
/* 1860px以下：ペンギン3 位置調整 */
	
@media screen and (max-width: 1860px) {
	.penguin-deco-3 {
		top:  70%;
		right: calc(40 / 1920 * 100vw);
		width: calc(214 / 1920 * 100vw);
		left: auto;
	}

}



/* 1370px以下：ペンギン3 位置調整 */
@media screen and (max-width: 1370px) {
	.penguin-deco-3 {
		top:  85.5%;
		right: calc(200 / 1920 * 100vw);
		width: calc(214 / 1920 * 100vw);
		left: auto;
	}
	
	
	.penguin-deco-4 {
		top:  74%;
		left:  calc(430 / 1920 * 100vw);
		width: calc(214 / 1920 * 100vw);
		
	}
	
		.penguin-deco-5 {
		top:  17%;
		right:  calc(60 / 1920 * 100vw);
		width: calc(143 / 1920 * 100vw);
		 left: auto;
		
	}
}

	
/* 1860px以下：ペンギン3 位置調整 */
	
@media screen and (max-width: 1860px) {
	.penguin-deco-3 {
		top:  70%;
		right: calc(40 / 1920 * 100vw);
		width: calc(214 / 1920 * 100vw);
		left: auto;
	}

}

/* 1024px以下：ペンギン3 位置調整 */
@media screen and (max-width: 1024px) {
	.penguin-deco-2 {
		top:  31%;
		right: calc(120 / 1920 * 100vw);
		width: calc(133 / 1920 * 100vw);
		left: auto;
	}

}

/* 820px以下：ペンギン3 位置調整 */
@media screen and (max-width: 820px) {
		.penguin-deco-5 {
		top:  15%;
		right:  calc(60 / 1920 * 100vw);
		width: calc(143 / 1920 * 100vw);
		 left: auto;
		
	}
	
		.penguin-deco-2 {
		top:  27%;
		right: calc(120 / 1920 * 100vw);
		width: calc(133 / 1920 * 100vw);
		left: auto;
	}
	.penguin-deco-4 {
		top:  67%;
		left:  calc(430 / 1920 * 100vw);
		width: calc(214 / 1920 * 100vw);
		
	}
	.penguin-deco-3 {
		top:  78.5%;
		right: calc(80 / 1920 * 100vw);
		width: calc(214 / 1920 * 100vw);
		left: auto;
	}
	
}

/* スマホ：px固定で見切れ防止 */
@media screen and (max-width: 640px) {
	.penguin-deco-1 { width: 92px;  top: 1.3%;  right: 10px; }
	.penguin-deco-2 { width: 67px;  top: 12.5%; right:40px; }
	.penguin-deco-3 { width: 107px; top: 64.5%;  right: 40px;   left: auto; }
	.penguin-deco-4 { width: 96px;  top: 53.5%; right: 40px;   left: auto; }
	.penguin-deco-5 { width: 72px;  top: 38.5%;  left: 30px;    }
}