/* ===== SCENE（シーン紹介・SCENE 01〜N 統合グループ） =====
 *
 * 構造:
 *   .scene-group            : セクション全体（共有 SCENE ラベル + シーン列 + DETAILS）
 *   .scene-group__label     : 縦書き「SCENE」ラベル（グループ全体で1つ・sticky追従）
 *   .scene                  : 各シーン（EN見出し + 見出し/本文 + スライド + ページャー）
 *
 * スライドが1枚のシーンは .scene__pager 自体が出力されない（テンプレート側で制御）。
 */

.scene-group {
	position: relative;
	background-color: #F5F5F5;
	display: grid;
	grid-template-columns: 1fr;
	/* sticky 要素（ラベル）に margin-top を付けると一部ブラウザで停止位置が
	   ずれるため、上余白は親の padding-top で確保する */
	padding-top: 120px;
	/* sticky ラベルの有効領域 = grid セル。下端の DETAILS ボタン領域ぶん
	   padding-bottom を取り、ボタンは padding 領域へ absolute 配置する */
	padding-bottom: 80px;
}

/* 共有 SCENE ラベル：シーン列と同セルに重ねて sticky */
.scene-group__label {
	grid-column: 1;
	grid-row: 1;
	position: sticky;
	top: 120px;
	align-self: start;
	justify-self: start;
	width: 144px;
	height: fit-content;
	margin-left: 32px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	z-index: var(--z-sticky);
}

.scene-group__label-line {
	display: block;
	width: 72px;
	height: 1px;
	background-color: var(--c-gray-1);
}

.scene-group__label-text {
	font-family: var(--ff-en);
	font-weight: var(--fw-medium);
	font-size: 20px;
	letter-spacing: 1.2px;
	line-height: 1;
	color: var(--c-black);
	writing-mode: vertical-rl;
	text-orientation: mixed;
	margin-top: 9px;
	align-self: flex-start;
}

.scene-group__sections {
	grid-column: 1;
	grid-row: 1;
}

/* ---------- 各シーン（PC） ---------- */

.scene {
	position: relative;
	/* 左 208px = ラベル領域（32 + 144 + 32）
	   上 160px = 前シーン下の余白 40px + シーン上の余白 120px（Figma準拠） */
	padding: 160px 0 0 208px;
	display: flex;
	align-items: stretch;
	gap: 32px;
}

/* scene-group が padding-top: 120px を持つので、先頭シーンの上余白は 0 に */
.scene-group__sections > .scene:first-child {
	padding-top: 0;
}

.scene__text {
	width: 496px;
	flex-shrink: 0;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}

/* サブタイトル（通勤・通学 等）：英字見出しの上に配置
   Figma: サブ上端 y=344 / EN上端 y=376 → EN の 32px 上 */
.scene__sub {
	position: absolute;
	top: 348px;
	left: 0;
	margin: 0;
	width: 340px;
	font-family: var(--ff-jp);
	font-weight: var(--fw-regular);
	font-size: 16px;
	letter-spacing: 0.32px;
	line-height: 1;
	color: var(--c-black);
}

/* 英字見出し（DAILY COMMUTE 等）：テキスト列の中段に固定配置
   width 340px = 複数単語の見出しをデザイン同様に単語で折り返すための幅 */
.scene__en {
	position: absolute;
	top: 380px;
	left: 0;
	margin: 0;
	width: 340px;
	font-family: var(--ff-en);
	font-weight: var(--fw-medium);
	font-size: 40px;
	letter-spacing: 0.8px;
	line-height: 40px;
	color: var(--c-black);
}

/* 手動改行入りの英字見出し：自動折返しに頼らず入力どおりの位置で改行する
   （幅をテキスト列いっぱいに広げ、340px での自動折返しを解除） */
.scene__en--manual {
	width: 496px;
}

.scene__foot {
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.scene__title {
	margin: 0;
	font-family: var(--ff-jp);
	font-weight: var(--fw-regular);
	font-size: 24px;
	letter-spacing: 0.96px;
	line-height: 32px;
	color: var(--c-black);
}

.scene__body {
	font-family: var(--ff-jp);
	font-size: 14px;
	letter-spacing: 0.28px;
	line-height: 28px;
	color: var(--c-gray-text);
	width: 496px;
}

.scene__media {
	position: relative;
	flex: 1;
	max-width: 704px;
}

.scene__slides {
	position: relative;
	width: 100%;
	height: 800px;
}

.scene__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 0.8s ease;
}

/* スライドが1枚（カルーセル無効）のときも先頭を表示 */
.scene__slide.is-active {
	opacity: 1;
}

.scene__slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.scene__caption {
	position: absolute;
	right: 0;
	bottom: 8px;
	padding: 0 20px;
	font-family: var(--ff-en);
	font-size: 12px;
	line-height: 1.6;
	color: var(--c-white);
	text-align: right;
}

.scene__caption p {
	margin: 0;
}

/* ページャー：テキスト列と画像の間（画像左端に少しかかる位置。Figma: x=615, y=385/800）
   上余白（padding-top）の有無に影響されないよう、下端基準で配置する */
.scene__pager {
	position: absolute;
	bottom: 386px;
	left: 615px;
	display: flex;
	align-items: center;
	gap: 12px;
	z-index: 2;
}

.scene__pager-num {
	font-family: var(--ff-num);
	font-size: 16px;
	color: var(--c-black);
	width: 21px;
	text-align: right;
	line-height: 1;
}

.scene__pager-num--total {
	color: var(--c-white);
}

.scene__pager-track {
	position: relative;
	display: inline-block;
	width: 144px;
	height: 2px;
	background-color: var(--c-gray-2);
}

.scene__pager-bar {
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 50%;
	background-color: var(--c-black);
	transition: width 0.5s ease;
}

/* グループ下端中央の DETAILS ボタン（次セクションに半分かかる）
   クリックで FEATURES セクションを開閉する（main.js） */
.scene-group__details {
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 80px;
	height: 80px;
	transform: translate(-50%, 50%);
	z-index: var(--z-overlay);
	display: block;
	transition: transform 0.2s ease;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
}

.scene-group__details img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: contain;
}

.scene-group__details:hover {
	transform: translate(-50%, 50%) scale(1.05);
}

/* ---------- SP ---------- */

@media (max-width: 1023px) {
	.scene-group {
		padding-top: 80px;
		padding-bottom: 72px;
	}

	.scene-group__label {
		top: 80px;
		margin-left: 0;
		margin-top: 80px;
		width: 33px;
		padding-left: 12px;
		box-sizing: border-box;
		gap: 16px;
	}

	.scene-group__label-line {
		width: 21px;
	}

	.scene-group__label-text {
		font-size: 12px;
		letter-spacing: 0.72px;
		margin-top: 0;
	}

	.scene {
		display: grid;
		grid-template-columns: 1fr;
		padding: 80px 0 0 61px; /* 左 61px = SPラベル領域 */
		gap: 0;
	}

	/* カラムを Grid に直接展開（HTMLは触らない） */
	.scene__text,
	.scene__media,
	.scene__foot {
		display: contents;
	}

	/* サブタイトル：SPは英字見出しの直上（SPデザイン未支給のためPCを縮小して踏襲） */
	.scene__sub {
		position: static;
		grid-row: 1;
		font-size: 12px;
		letter-spacing: 0.24px;
		line-height: 1;
		width: 320px;
		margin: 0 0 12px;
	}

	.scene__en {
		position: static;
		grid-row: 2;
		font-size: 32px;
		letter-spacing: 0.64px;
		line-height: 1.1;
		width: 320px;
		margin: 0 0 35px;
	}

	.scene__slides {
		grid-row: 3;
		width: 320px;
		height: 404px;
	}

	.scene__slide {
		display: flex;
		flex-direction: column;
		gap: 10px;
	}

	.scene__slide img {
		width: 320px;
		height: 364px;
		flex-shrink: 0;
		object-fit: cover;
	}

	.scene__caption {
		position: static;
		padding: 0;
		font-size: 10px;
		line-height: 1.6;
		color: var(--c-gray-text);
		text-align: left;
	}

	.scene__pager {
		position: static;
		transform: none;
		grid-row: 4;
		width: 320px;
		gap: 12px;
		padding-top: 19px;
		margin: 0;
	}

	.scene__pager-track {
		width: auto;
		flex: 1;
		background-color: var(--c-white);
	}

	.scene__pager-num--total {
		color: var(--c-black);
	}

	.scene__title {
		grid-row: 5;
		font-size: 20px;
		letter-spacing: 0.8px;
		line-height: 1.6;
		width: 320px;
		margin-top: 48px;
	}

	.scene__body {
		grid-row: 6;
		font-size: 12px;
		line-height: 2;
		letter-spacing: 0.24px;
		width: 320px;
		margin-top: 26px;
	}

	/* SP では PC 用の <br> 改行を全消し */
	.scene__body br {
		display: none;
	}

	.scene-group__details {
		width: 80px;
		height: 80px;
	}
}

/* ===== SCENE キャプション反転モード（シーン別 PC/SP独立） =====
   PC既定: 白（画像の上にオーバーレイ）→ 反転で黒
   SP既定: グレー（画像下に配置）→ 反転で白 */

/* PC 反転 */
@media (min-width: 1024px) {
	.scene--caption-invert-pc .scene__caption {
		color: var(--c-black);
	}
}

/* SP 反転 */
@media (max-width: 1023px) {
	.scene--caption-invert-sp .scene__caption {
		color: var(--c-white);
	}
}