/* ==========================================================================
   section-contents.css — #contents 蛇腹式スクロール連動アコーディオン
   position: sticky でセクションを画面に固定しつつ、accordion-scroll.js が
   スクロール量に応じて .panel に .active クラスを付け替える。
   PC は .panel.active の flex-grow、SP は .panel.active の height で
   パネルがひらく動きを再現する（タップ・ホバー操作は不要）。
   ========================================================================== */

.contents-section {
	background: var(--indigo-deep);
	color: var(--text-on-dark);
}
.contents-section .eyebrow {
	color: var(--gold-soft);
}
.contents-section h2 {
	font-size: 28px;
	color: #fff;
	margin-bottom: 16px;
}
.contents-section .lead {
	font-size: 13.5px;
	color: var(--text-sub-dark);
	max-width: 520px;
	margin-bottom: 28px;
}

.contents-scroll-track {
	position: relative;
	height: calc(var(--panel-count, 5) * 100vh);
}
.contents-sticky {
	position: sticky;
	top: 0;
	min-height: 100vh;
	min-height: calc(var(--vh, 1vh) * 100);
	display: flex;
	align-items: center;
	overflow: hidden;
	padding: 60px 0;
}
.contents-sticky .container {
	width: 100%;
}

/* スクロールキュー：この演出がスクロール連動であることに気づいてもらうための
   ヒント表示。本文とお菓子の間に常時表示する（フェードアウトはしない） */
.scroll-cue {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--gold-soft);
	margin-bottom: 40px;
}
.scroll-cue-icon {
	flex: none;
	width: 14px;
	height: 22px;
}
.scroll-cue-dot {
	animation: kinoma-scroll-dot 1.6s ease-in-out infinite;
}
@keyframes kinoma-scroll-dot {
	0% {
		transform: translateY(0);
		opacity: 1;
	}
	70% {
		transform: translateY(7px);
		opacity: 0;
	}
	100% {
		transform: translateY(0);
		opacity: 0;
	}
}
.scroll-cue-label {
	font-family: "Shippori Mincho", serif;
	font-size: 10px;
	letter-spacing: 0.3em;
}

.accordion {
	display: flex;
	gap: 6px;
	height: 560px;
}
.panel {
	position: relative;
	flex: 1;
	overflow: hidden;
	background: linear-gradient(160deg, #324467, #1b2740 70%); /* フォールバック（画像未設定時） */
	background-size: cover;
	background-position: center;
	clip-path: polygon(0 0, 100% 0, calc(100% - 26px) 100%, 0 100%);
	transition: flex 0.55s cubic-bezier(0.6, 0, 0.2, 1);
}
.panel::before {
	/* 背景画像の上に重ねる藍色トーンのオーバーレイ。画像が無いときも
	   フォールバックのグラデーションにこの色調が重なるだけで違和感がない */
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(160deg, rgba(50, 68, 103, 0.82), rgba(27, 39, 64, 0.9) 70%);
	transition: background 0.4s;
}
.panel.active {
	flex: 6.5;
}
.panel.active::before {
	background: linear-gradient(150deg, rgba(61, 82, 121, 0.62), rgba(34, 48, 76, 0.75) 65%);
}
.panel .num {
	position: absolute;
	left: 22px;
	top: 26px;
	z-index: 2;
	font-family: "Shippori Mincho", serif;
	font-size: 15px;
	color: var(--text-sub-dark);
	writing-mode: vertical-rl;
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
	transition: color 0.4s;
}
.panel.active .num {
	color: var(--gold-soft);
}
.panel-info {
	position: absolute;
	right: 0;
	top: 0;
	bottom: 0;
	z-index: 2;
	width: 340px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 0 44px;
	opacity: 0;
	transition: opacity 0.4s 0.15s;
}
.panel.active .panel-info {
	opacity: 1;
}
.panel-info .tag {
	font-size: 11px;
	letter-spacing: 0.25em;
	color: var(--gold);
	margin-bottom: 14px;
	display: block;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}
.panel-info h3 {
	font-size: 22px;
	color: #fff;
	margin-bottom: 16px;
	text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
}
.panel-info p {
	font-size: 12.5px;
	color: var(--text-sub-dark);
	line-height: 2;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

@media (max-width: 767px) {
	.contents-scroll-track {
		height: calc(var(--panel-count, 5) * 68vh);
	}
	.contents-sticky {
		padding: 90px 0;
	}
	.contents-section h2 {
		font-size: 22px;
	}
	.contents-section .lead {
		font-size: 12px;
		margin-bottom: 20px;
	}
	.scroll-cue {
		margin-bottom: 28px;
	}

	.accordion {
		flex-direction: column;
		height: auto;
		gap: 5px;
	}
	.panel {
		flex: none;
		height: 64px;
		clip-path: polygon(0 0, 100% 0, 100% calc(100% - 18px), 0 100%);
		transition: height 0.5s cubic-bezier(0.6, 0, 0.2, 1);
	}
	.panel.active {
		height: 230px;
	}
	.panel.active::before {
		background: linear-gradient(150deg, rgba(61, 82, 121, 0.62), rgba(255, 255, 255, 0.1) 65%);
	}
	.panel .num {
		position: static;
		writing-mode: horizontal-tb;
		display: block;
		padding: 20px 22px 0;
		font-size: 13px;
	}
	.panel-info {
		position: static;
		width: auto;
		display: block;
		padding: 0 22px;
		max-height: 0;
		overflow: hidden;
		/* 写真の明るい部分に文字が重なっても読めるよう、テキスト部分にだけ
		   専用の暗みを敷く（パネル全体はPCと同じ明るさのまま） */
		background: linear-gradient(180deg, rgba(16, 25, 43, 0.4) 0%, rgba(16, 25, 43, 0.82) 35%, rgba(16, 25, 43, 0.86) 100%);
		transition: opacity 0.3s 0.15s, max-height 0.5s, background 0.3s 0.15s;
	}
	.panel.active .panel-info {
		max-height: 200px;
		padding: 14px 22px 22px;
	}
	.panel-info .tag {
		font-size: 10px;
		letter-spacing: 0.2em;
		margin-bottom: 8px;
	}
	.panel-info h3 {
		font-size: 17px;
		margin-bottom: 8px;
	}
	.panel-info p {
		font-size: 11.5px;
		line-height: 1.9;
	}
}