@charset "UTF-8";

/* ============================================
   基本レイアウト
   ============================================ */

body {
	background-color: #fff;
	color: #333;
}

/* トップセクション（固定ナビ＋safe-area の高さ分あけて表示・画像の縦幅に合わせる） */
.top-section {
	height: auto;
	overflow: hidden;
	position: relative;
	margin-top: calc(35px + env(safe-area-inset-top, 0));
	margin-bottom: 0;
}

/* 画像を切らず全体表示。幅に合わせて高さは自動＝カルーセルはトップの縦幅の直下から開始 */
.top-image {
	width: 100%;
	height: auto;
	display: block;
	vertical-align: bottom;
	object-fit: contain;
	object-position: top center;
	transform: translateZ(0);
}

/* 固定ナビゲーションヘッダー（画面上段に常駐） */
.fixed-nav-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 101;
	background: #f5f5f5; /* 薄いグレーの背景色 */
	padding: 0;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	display: flex;
	justify-content: center;
	align-items: stretch;
	height: 35px; /* 固定の高さ */
}

.fixed-nav-button {
	background: transparent;
	border: none;
	border-right: 1px solid #ddd; /* 右側に縦線 */
	padding: 0;
	font-size: 13px;
	color: #333;
	cursor: pointer;
	transition: background-color 0.3s ease, color 0.3s ease;
	transform: translateZ(0);
	flex: 1; /* 均等に分割 */
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}

.fixed-nav-button:last-child {
	border-right: none; /* 最後の要素は縦線なし */
}

.fixed-nav-button:hover {
	background-color: #e8e8e8;
}

.fixed-nav-button.active {
	background-color: #4a90e2; /* アクティブ時の背景色 */
	color: #fff;
}

/* カルーセルナビゲーション */
.carousel-nav-section {
	position: sticky;
	top: 0;
	z-index: 100;
	background: #fff;
	padding: 8px 0;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	transition: all 0.3s ease;
}

/* カルーセルが画面から消えたら固定 */
.carousel-nav-section.fixed {
	position: fixed;
	top: 35px; /* 固定ナビゲーションヘッダーの高さ分下に配置 */
	left: 0;
	right: 0;
	width: 100%;
	z-index: 100;
}

.carousel-container {
	width: 100%;
	max-width: 360px;
	margin: 0 auto;
	overflow: hidden;
	position: relative;
}

.carousel-track {
	display: flex;
	transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
	will-change: transform;
}

.carousel-item {
	flex: 0 0 160px;
	width: 160px;
	height: 90px;
	margin-right: 0;
	cursor: pointer;
	transform: translateZ(0);
	transition: transform 0.2s ease;
}

.carousel-item:active {
	transform: scale(0.95) translateZ(0);
}

.carousel-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 4px;
}

.carousel-item.active {
	opacity: 1;
}

/* カルーセル停止状態 */
.carousel-track.paused {
	animation-play-state: paused;
}

/* 背景パララックス */
.parallax-bg {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 200%;
	/* 花粉のシルエット画像が用意されたら、以下のコメントを外してください */
	/* background-image: url('../image/pollen-silhouette.png'); */
	/* 暫定的にグラデーションで背景を表現 */
	background: linear-gradient(135deg, rgba(255, 215, 0, 0.05) 0%, rgba(255, 200, 0, 0.05) 100%);
	background-size: 150% auto;
	background-repeat: repeat-y;
	background-position: center top;
	opacity: 0.1;
	z-index: -1;
	pointer-events: none;
	transform: translateZ(0);
	will-change: transform;
}

/* 神様落下演出 */
.kami-fall {
	position: fixed;
	top: -200px;
	left: 50%;
	transform: translateX(-50%) translateZ(0);
	z-index: 50;
	opacity: 0;
	pointer-events: none;
	will-change: transform, opacity;
}

.kami-fall.active {
	opacity: 1;
	animation: kamiFall 2s ease-out forwards;
}

.kami-fall img {
	width: 150px;
	height: auto;
	transform: translateZ(0);
}

@keyframes kamiFall {
	0% {
		transform: translateX(-50%) translateY(-200px) rotate(0deg) translateZ(0);
		opacity: 0;
	}
	20% {
		opacity: 1;
	}
	100% {
		transform: translateX(-50%) translateY(calc(100vh + 200px)) rotate(360deg) translateZ(0);
		opacity: 0;
	}
}

/* 神様横切りアニメーション */
.kami-cross {
	position: fixed;
	top: 50%;
	transform: translateY(-50%) translateZ(0);
	z-index: 102; /* カルーセル（z-index: 100）よりも上 */
	opacity: 0;
	pointer-events: none;
	will-change: transform, opacity;
	display: none;
}

.kami-cross img {
	width: 80px; /* 200px * 0.5 * 0.8 = 80px（0.8倍） */
	height: auto;
	transform: translateZ(0);
}

/* pa_引っ張られる神だけ1.2倍の0.8倍 */
.kami-cross img[src*="pa_引っ張られる神"] {
	width: 192px; /* 200px * 1.2 * 0.8 = 192px */
}

/* 左から右へ横切る（左右反転） */
.kami-cross-left-to-right {
	animation: kamiCrossLeftToRight 3s ease-in-out forwards;
}

.kami-cross-left-to-right img {
	transform: scaleX(-1) translateZ(0); /* 左右反転 */
}

/* 右から左へ横切る */
.kami-cross-right-to-left {
	animation: kamiCrossRightToLeft 3s ease-in-out forwards;
}

@keyframes kamiCrossLeftToRight {
	0% {
		transform: translateY(-50%) translateX(-200px) translateZ(0);
		opacity: 0;
	}
	10% {
		opacity: 1;
	}
	90% {
		opacity: 1;
	}
	100% {
		transform: translateY(-50%) translateX(calc(100vw + 200px)) translateZ(0);
		opacity: 0;
	}
}

@keyframes kamiCrossRightToLeft {
	0% {
		transform: translateY(-50%) translateX(calc(100vw + 200px)) translateZ(0);
		opacity: 0;
	}
	10% {
		opacity: 1;
	}
	90% {
		opacity: 1;
	}
	100% {
		transform: translateY(-50%) translateX(-200px) translateZ(0);
		opacity: 0;
	}
}

/* コンテンツセクション */
.content-section {
	padding: 0;
	position: relative;
	z-index: 1; /* スタッキングコンテキストを作成 */
}

.section-header {
	position: relative;
	margin-bottom: 0;
	margin-top: 0;
}

.header-image {
	width: 100%;
	height: auto;
	transform: translateZ(0);
	display: block;
}

/* 背景画像（JPG、吹き出しなし、アニメーションなし） */
.header-bg {
	position: relative;
	z-index: 1;
	width: 100%;
	height: auto;
	object-fit: contain; /* 全体を表示するためcontainに変更 */
}

/* 吹き出し画像（PNG、アニメーションあり） */
.header-balloon {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: auto;
	z-index: 110; /* カルーセル（z-index: 100）よりも前面に表示 */
	transform: translateZ(0);
	will-change: transform;
	/* 背景画像と同じサイズになるように調整 */
	object-fit: contain; /* 全体を表示 */
}

/* 神様画像（PNG、アニメーションなし、Eセクションのみ） */
.header-kami {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: auto;
	z-index: 120; /* 吹き出し（z-index: 110）よりも前面に表示 */
	transform: translateZ(0);
	/* 背景画像と同じサイズになるように調整 */
	object-fit: contain;
}

/* 吹き出しのWobbleアニメーション（画面内に入った時のみ） */
.header-balloon.balloon-animation.in-view {
	animation: wobble 1s ease-in-out infinite;
}

@keyframes wobble {
	0%, 100% {
		transform: translateX(0) rotate(0deg) translateZ(0);
	}
	15% {
		transform: translateX(-3px) rotate(-2deg) translateZ(0);
	}
	30% {
		transform: translateX(3px) rotate(2deg) translateZ(0);
	}
	45% {
		transform: translateX(-2px) rotate(-1deg) translateZ(0);
	}
	60% {
		transform: translateX(2px) rotate(1deg) translateZ(0);
	}
	75% {
		transform: translateX(-1px) rotate(-0.5deg) translateZ(0);
	}
	90% {
		transform: translateX(1px) rotate(0.5deg) translateZ(0);
	}
}

/* 商品ブロック */
.product-block {
	position: relative;
	margin-bottom: 0;
	overflow: visible; /* hiddenからvisibleに変更して、顔画像がはみ出せるようにする */
	transform: translateZ(0);
	z-index: 100; /* スタッキングコンテキストを作成、ヘッダーより上 */
}

.product-image {
	width: 100%;
	height: auto;
	display: block;
	transform: translateZ(0);
}

/* Aプラン（静止画） - 通常の表示 */
.plan-a .product-image {
	transform: scale(1) translateZ(0);
	transition: transform 0.3s ease;
}

/* Sプラン（高単価枠）の差別化演出 */
.plan-s {
	position: relative;
	overflow: hidden;
}

/* Sプラン商品のレイヤー構造 */
.plan-s .product-image {
	width: 100%;
	height: auto;
	transform: translateZ(0);
	display: block;
	position: relative; /* デフォルトはrelative */
}


/* 商品B-1_くらしリズムのz-indexを上げる */
.product-block[data-product="B01"] {
	z-index: 200 !important;
	position: relative;
}

/* パッケージレイヤーがある場合のレイヤー構造 */
.plan-s .product-bg {
	position: relative;
	z-index: 1;
}

/* パッケージレイヤーがある場合はoverflow: visible */
.plan-s .product-package {
	overflow: visible;
}

/* パッケージレイヤーがない通常のSプラン商品にシマー効果を適用 */
.plan-s::before {
	content: '';
	position: absolute;
	top: -50%;
	left: -50%;
	width: 200%;
	height: 200%;

	/* 光の帯（細め～中くらい） */
	background: linear-gradient(
		45deg,
		transparent 0%,
		transparent 45%,
		rgba(255, 255, 255, 0.55) 50%,
		transparent 55%,
		transparent 100%
	);

	pointer-events: none;
	z-index: 2;

	/* 初期位置：左下側に寄せる（オフ） */
	transform: translate(-40%, 40%) translateZ(0);
	will-change: transform, opacity; /* GPU処理を最適化 */
	animation: shimmer 4.8s linear infinite; /* アニメーション1.3s + 待機3.5s */
}

/* パッケージレイヤーがある場合は、.plan-s::beforeを非表示にして、.product-package::beforeを使用 */
.plan-s:has(.product-package-wrapper)::before {
	display: none; /* パッケージレイヤーがある場合は.plan-s::beforeを非表示 */
}

.plan-s:has(.product-package-wrapper) {
	overflow: visible; /* パッケージレイヤーがある場合はoverflow: visible */
}

/* パッケージレイヤーラッパー（PNG、アニメーションなし） */
.plan-s .product-package-wrapper {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: auto;
	z-index: 2;
}

.plan-s .product-package {
	width: 100%;
	height: auto;
	display: block;
}

/* パッケージレイヤーがある場合は、.plan-s::beforeを非表示にして、.product-package::beforeを使用 */
.plan-s:has(.product-package-wrapper)::before {
	display: none; /* パッケージレイヤーがある場合は.plan-s::beforeを非表示 */
}

.plan-s:has(.product-package-wrapper) {
	overflow: visible; /* パッケージレイヤーがある場合はoverflow: visible */
}

/* 文字レイヤー（PNG、拡大縮小アニメーションあり） */
.plan-s .product-text {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 5;
	transform-origin: center center;
	will-change: transform; /* GPU処理を最適化 */
	animation: textPulse 2s ease-in-out infinite; /* 拡大縮小アニメーション */
}

/* 喜んでいるアニメーションが適用されている文字レイヤー */
.plan-s .product-text.product-face-image {
	animation: happyFaceWithPause 5s ease-in-out infinite; /* 喜んでいるアニメーション */
}

/* 文字レイヤーの拡大縮小アニメーション */
@keyframes textPulse {
	0% {
		transform: scale(1) translateZ(0);
	}
	50% {
		transform: scale(1.05) translateZ(0); /* 5%拡大 */
	}
	100% {
		transform: scale(1) translateZ(0);
	}
}

/* 女性の顔の喜んでいるアニメーション（上下に揺れながら拡大縮小、目立つように大きく） */
@keyframes happyFace {
	0% {
		transform: translateY(0) scale(1) translateZ(0);
	}
	25% {
		transform: translateY(-3px) scale(1.03) translateZ(0); /* 上に少し移動しながら拡大（動きを抑える） */
	}
	50% {
		transform: translateY(0) scale(1) translateZ(0); /* 元の位置に戻る */
	}
	75% {
		transform: translateY(-2px) scale(1.02) translateZ(0); /* 軽く上に移動しながら少し拡大（動きを抑える） */
	}
	100% {
		transform: translateY(0) scale(1) translateZ(0); /* 元の位置に戻る */
	}
}

/* 喜びのアニメーション（実行後、待機時間を設ける） */
/* 合計5秒: 2秒アニメーション + 3秒待機 */
@keyframes happyFaceWithPause {
	0% {
		transform: translateY(0) scale(1) translateZ(0);
	}
	10% {
		transform: translateY(-3px) scale(1.03) translateZ(0); /* 0.5秒: 上に少し移動しながら拡大 */
	}
	20% {
		transform: translateY(0) scale(1) translateZ(0); /* 1秒: 元の位置に戻る */
	}
	30% {
		transform: translateY(-2px) scale(1.02) translateZ(0); /* 1.5秒: 軽く上に移動しながら少し拡大 */
	}
	40% {
		transform: translateY(0) scale(1) translateZ(0); /* 2秒: 元の位置に戻る（アニメーション終了） */
	}
	100% {
		transform: translateY(0) scale(1) translateZ(0); /* 2秒〜5秒: 待機時間 */
	}
}

/* Sランク商品の背景とヘッダー（共通スタイル） */
.plan-s .product-bg {
	position: relative; /* 通常のフローで表示（高さを確保） */
	width: 100%;
	height: auto;
	z-index: 1;
	object-fit: contain;
	display: block;
}

.plan-s .product-header-happy {
	position: absolute !important;
	top: 2px;
	left: 0;
	width: 100%;
	height: auto;
	z-index: 2 !important; /* 背景より前面 */
	animation: happyFaceWithPause 5s ease-in-out infinite;
	transform-origin: center center;
	will-change: transform;
	object-fit: contain;
	display: block !important;
}

/* 女性の顔画像にアニメーションを適用 */
.product-face-image {
	position: absolute;
	z-index: 2000 !important; /* 各ヘッダーよりも前面に表示（固定ナビ: 101、カルーセル: 100より上） */
	width: auto;
	height: auto;
	max-width: 12.5%; /* 4分割したときの1区画の左上に配置するサイズ（半分） */
	animation: happyFaceWithPause 5s ease-in-out infinite;
	transform-origin: center center;
	will-change: transform; /* GPU処理を最適化 */
	/* 親要素のスタッキングコンテキストから独立させる */
	isolation: isolate;
}

/* 顔1：左上の領域（全体の左上1/4）の左上、1.65倍サイズの0.9倍、右に少しずらす（さらに左に5px調整） */
.product-face-image.product-face-1 {
	top: 5px;
	left: 10px; /* 右に少しずらす（15px - 5px = 10px） */
	max-width: 18.5625%; /* 20.625% × 0.9 = 18.5625% */
}

/* 顔2：右上の領域（全体の右上1/4）の左上、右に少しずらす */
.product-face-image.product-face-2 {
	top: 0;
	left: calc(50% + 15px); /* 全体の右半分の左端 + 右に少しずらす */
}

/* 顔3：左下の領域（全体の左下1/4）の左上、1.2倍サイズの0.9倍、右に少しずらす（さらに1px右、4px下に調整） */
.product-face-image.product-face-3 {
	top: calc(50% + 10px); /* 全体の下半分の上端 + 4px下にずらす */
	left: 20px; /* 右に少しずらす（15px + 1px = 16px） */
	max-width: 13.5%; /* 15% × 0.9 = 13.5% */
}

/* 男性顔の場合のみ、さらに5px下、2px右にずらす */
.product-face-image[src*="_男性顔"] {
	top: calc(50% + 15px) !important; /* 通常の顔3より5px下にずらす（10px + 5px = 15px） */
	left: calc(20px + 2px) !important; /* 通常の顔3より2px右にずらす（20px + 2px = 22px） */
}

/* 小さな顔（顔1、2用） */
.product-face-image.product-face-small {
	max-width: 12.5%; /* 12.5% × 0.9 = 11.25% */
}

/* 大きな顔（顔3用、アルガードなど） */
.product-face-image.product-face-large {
	max-width: 18.5625%; /* 20.625% × 0.9 = 18.5625% */
}

/* アルガードの顔の上下位置調整用（後で調整可能） */
.product-block[data-product="D01"] .product-face-image.product-face-1 {
	top: 15px !important; /* 男性顔用CSSより優先 */
	left: 20px !important; /* 右に少しずらす（15px + 1px = 16px） */
	max-width: 13.5% !important; /* 15% × 0.9 = 13.5% */
}

.product-block[data-product="D01"] .product-face-image.product-face-2 {
	top: 15px !important; /* 後で調整可能：値を変更してください */
	left: calc(50% + 5px) !important; /* 全体の右半分の左端 + 右に少しずらす（2px + 1px = 3px） */
	max-width: 13.5% !important; /* 15% × 0.9 = 13.5% */
}

.product-block[data-product="D01"] .product-face-image.product-face-3 {
	top: calc(50% + 10px) !important; /* 後で調整可能：値を変更してください（男性顔用CSSより優先） */
	left: 10px !important; /* 右に少しずらす（15px - 5px = 10px） */
	max-width: 18.5625% !important; /* 20.625% × 0.9 = 18.5625% */
}

/* 顔4：右下の領域（全体の右下1/4）の左上、1.2倍サイズの0.9倍、右に少しずらす（さらに1px右、4px下に調整） */
.product-face-image.product-face-4 {
	top: calc(50% + 10px); /* 全体の下半分の上端 + 4px下にずらす */
	left: calc(50% + 5px); /* 全体の右半分の左端 + 右に少しずらす（2px + 1px = 3px） */
	max-width: 13.5%; /* 15% × 0.9 = 13.5% */
}

/* レイヤー共通のスタイルは上で定義済み */

/* Sプラン：動画自動再生 */
.plan-s .product-video {
	width: 100%;
	height: auto;
	display: block;
	transform: translateZ(0);
}

.video-block {
	position: relative;
	margin-bottom: 0;
	overflow: hidden;
}

/* 動画エリアを画像の下半分に重ねる */
.video-overlay-bottom {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: auto;
	max-height: 47%; /* 画像の下半分まで */
	z-index: 4; /* 文字レイヤー（z-index: 3）の上に表示 */
	overflow: hidden;
	padding: 0 14%; /* 左右に少し余白 */
	padding-bottom: 7.5%; /* 下に少し余白 */
	box-sizing: border-box;
	display: flex;
	align-items: flex-end;
}

/* YouTube動画埋め込み用 */
.video-wrapper {
	position: relative;
	width: 100%;
	padding-bottom: 54%; /* 16:9のアスペクト比（9/16 = 0.5625 = 56.25%） */
	height: 0;
	overflow: hidden;
	max-height: 100%;
	/* フチとシャドウで目立たせる */
	border: 4px solid #ffffff;
	border-radius: 8px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(0, 0, 0, 0.1);
	background: #000000; /* 動画読み込み前の背景色 */
}

.youtube-video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: none;
}

.video-overlay {
	position: absolute;
	bottom: 10px;
	left: 50%;
	transform: translateX(-50%) translateZ(0);
	background: rgba(0, 0, 0, 0.6);
	color: #fff;
	padding: 5px 10px;
	border-radius: 4px;
	font-size: 12px;
	pointer-events: none;
	z-index: 3;
}

/* フッター */
.footer-section {
	height: auto;
	overflow: visible;
	position: relative;
}

.footer-image {
	width: 100%;
	height: auto;
	display: block;
	object-fit: contain;
	transform: translateZ(0);
}

/* オープニング演出：花粉の飛散キャンバス */
.pollen-canvas {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1000;
	pointer-events: none;
	opacity: 1;
	transition: opacity 1s ease-out;
}

.pollen-canvas.fade-out {
	opacity: 0;
}

/* Intersection Observer用：画面外のアニメーション停止 */
.animation-paused {
	animation-play-state: paused !important;
}

/* レスポンシブ対応 */
@media (min-width: 361px) {
	.carousel-container {
		max-width: 100%;
	}
}

@media (min-width: 768px) {
	.top-section {
		height: auto;
	}
	
	.footer-section {
		height: auto;
	}
}

/* パフォーマンス最適化：画像の遅延読み込み */
img[loading="lazy"] {
	opacity: 0;
	transition: opacity 0.3s;
}

img[loading="lazy"].loaded {
	opacity: 1;
}