/* ==========================================================================
   足立姫フェス2026｜PAGE 02 STORY（足立姫の物語・街歩き）
   --------------------------------------------------------------------------
   共通（ヘッダー / フッター / ボタン / 変数）は style.css を使用。
   Figma でデザイン済み: FV・導入+目次・COMICS・HISTORY（足立姫について）・PILGRIMAGE の筆記体と背景まで。
   以降（五色桜〜謎解き）はワイヤーフレームの原稿をもとに、デザイン済みセクションの
   余白・書体・配色ルールを踏襲して構成している。
   ========================================================================== */

/* ---------- 共通パーツ ---------- */
.s-section {
	position: relative; /* z-index は付けない: 乗算（mix-blend-mode）の装飾画像を前後のセクション背景とも合成するため */
}

.s-inner {
	position: relative;
	z-index: 2;
	padding: 0 calc(40 * var(--u));
}

/* 筆記体画像（assets/img/script/）: 支給素材を文字の外接で切り出し、全語の x ハイトを 27u、
   ベースラインを画像上端から 101u に揃えたもの（Figma の EVENT 枠 286×112u と同じ基準）。
   画像の下端は「ベースライン +11u」（＝Figma 枠の下端。見出し margin-top 1u と合わせて見出しまで 12u）か、
   見出しに掛かりうる位置（語の左端から 120u 以降）にディセンダーがある語は「その下端 +3u」の低い方。
   後者の語（Topics / Story / History / Pilgrimage / Journey / Project / Craft & Goods / Online Shop など）だけ、
   見出し以降が Figma よりその分だけ下がる。表示幅は各 img の style="--w:N"（u）。
   画像の左右には 4u の余白があるので margin-left -4u で文字の左端 = 内側余白 40u（Figma の EVENT は文字左端 ≈ 41u。導入のみ x=0 → 36u） */
.s-script {
	display: block;
	width: calc(var(--w) * var(--u));
	height: auto;
	margin-left: calc(-4 * var(--u));
	margin-bottom: 0; /* 2026-11-12: 見出しを筆記体の画像（インクを全部含む）より下に置き、重なりを無くす。以前の --mb による引き上げは廃止（HTML の --mb は未使用） */
}

/* 見出し: YuGothic Bold 32u / 48u / 字間 6.4u / #36569d（Figma は筆記体の直下 +1u で下端が重なっていたが、端末の書体差で文字とぶつかるため画像の下 +8u に） */
.s-title {
	margin-top: calc(8 * var(--u));
	text-align: center;
	font-family: var(--f-gothic);
	font-weight: 700;
	font-size: calc(32 * var(--u));
	line-height: calc(48 * var(--u));
	letter-spacing: calc(6.4 * var(--u));
	padding-left: calc(6.4 * var(--u));
	color: var(--c-navy);
	font-feature-settings: "halt" 1;
}

/* 小見出し: Noto Sans JP 600 30u / 60u / #00a0e9（Figma: 見出し下 +10u） */
.s-sub {
	margin-top: calc(10 * var(--u));
	text-align: center;
	font-weight: 600;
	font-size: calc(30 * var(--u));
	line-height: calc(60 * var(--u));
	color: var(--c-accent);
	font-feature-settings: "halt" 1;
}

/* 本文: Noto Sans JP 400 28u（Figma: 導入 50u、他 60u） */
.s-body {
	margin-top: calc(40 * var(--u));
	font-size: calc(28 * var(--u));
	line-height: calc(50 * var(--u));
	color: var(--c-text);
	font-feature-settings: "halt" 1;
}

.s-body--loose { line-height: calc(60 * var(--u)); }
.s-body p + p { margin-top: 0; }

/* 締めの一文 */
.s-closing {
	margin-top: calc(50 * var(--u));
	text-align: center;
	font-weight: 600;
	font-size: calc(26 * var(--u));
	line-height: calc(52 * var(--u));
	letter-spacing: calc(1 * var(--u)); /* 24 文字が 670u に収まる字間 */
	color: var(--c-navy);
	font-feature-settings: "halt" 1;
}

/* セクション内ボタン（style.css の .btn は absolute 前提のため、フローに戻す） */
.s-btn {
	position: relative;
	display: block;
	height: calc(70 * var(--u));
	margin: calc(40 * var(--u)) auto 0;
}

.s-btn--460 { width: calc(460 * var(--u)); }
.s-btn--460 .btn__arrow { left: calc(412 * var(--u)); }

.s-btn--370 { width: calc(370 * var(--u)); }
.s-btn--370 .btn__label { --shift: calc(-14 * var(--u)); }
.s-btn--370 .btn__arrow--ext {
	left: calc(318 * var(--u));
	top: calc(27 * var(--u));
	width: calc(14 * var(--u));
	height: calc(14 * var(--u));
}

.s-btn--primary {
	width: calc(550 * var(--u));
	height: calc(110 * var(--u));
	margin-top: calc(50 * var(--u));
}

.s-btn--primary .btn__arrow { left: calc(481 * var(--u)); }
.s-btn--primary.is-disabled .btn__label { --shift: 0px; }

/* 写真プレースホルダー（EVENT ページの作品写真と同じ表現） */
.ph {
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: calc(14 * var(--u));
	background: linear-gradient(160deg, #eaf8f9 0%, #fbeef5 100%);
}

.ph--wide {
	width: 100%;
	height: calc(420 * var(--u));
	margin-top: calc(40 * var(--u));
}

.ph--top { margin-top: 0; margin-bottom: calc(60 * var(--u)); }

.ph--square {
	width: calc(325 * var(--u));
	height: calc(325 * var(--u));
}

/* 背景: 水色の波（Figma Rectangle 16/30 を上下反転。上端が波形、下へ向かって透明に） */
.bg-cyan::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background: url("../assets/img/story/wave-cyan.svg") center / 100% 100% no-repeat;
	transform: scaleY(-1);
	pointer-events: none;
}

.bg-cyan--overlap { margin-top: calc(-77 * var(--u)); } /* Figma: 直前セクションと 77u 重なる */

/* 背景: 生成り（Figma Rectangle 29: 上端透明 → #fdf9f4） */
.bg-cream {
	background: linear-gradient(180deg, rgba(255, 255, 255, 0) 2.82%, #fdf9f4 100%);
}

/* 水紋（Figma 書き出しは白背景のため乗算で重ねる） */
.ripple {
	position: absolute;
	z-index: 1;
	mix-blend-mode: multiply;
	pointer-events: none;
}

.ripple--tr {
	right: 0;
	top: calc(107 * var(--u));
	width: calc(380 * var(--u));
	height: calc(568 * var(--u));
}

.ripple--bl {
	left: 0;
	bottom: calc(-7 * var(--u));
	width: calc(269.5 * var(--u)); /* Figma: 左右反転グループの画面内部分 */
	height: calc(568.5 * var(--u));
}

/* ==========================================================================
   FV（180〜1400u）: 支給の under-fv.png（750×1220u、水色の地・人物・下端の白フェードを含む）を原寸で敷く
   ========================================================================== */
.sfv {
	position: relative;
	height: calc(1220 * var(--u));
}

.sfv__art {
	position: absolute;
	left: 0;
	top: 0;
	width: calc(750 * var(--u));
	height: calc(1220 * var(--u));
	pointer-events: none;
}

.sfv__credit {
	position: absolute;
	right: calc(40 * var(--u));
	top: calc(100% + 8 * var(--u)); /* イラストに掛からないよう FV の下（2026-11-12） */
	text-shadow: 0 0 calc(6 * var(--u)) #fff, 0 0 calc(3 * var(--u)) #fff;
}

/* ==========================================================================
   導入 + 目次（1400〜2250u）
   ========================================================================== */
.intro {
	padding-top: calc(30 * var(--u));
	padding-bottom: calc(91 * var(--u));
}

.intro .s-script { margin-left: calc(-8 * var(--u)); } /* Figma x=0 → 文字左端 36u */

.intro__waves {
	position: absolute;
	left: calc(369 * var(--u));
	top: calc(-9 * var(--u));
	width: calc(650.26 * var(--u));
	height: calc(463 * var(--u));
	z-index: 0;
	pointer-events: none;
}

.intro__title {
	margin-top: calc(1 * var(--u)); /* Figma では EVENT 枠に 15u 重ねていたが、「Story」の y のディセンダーが見出しに掛かるため他セクションと同じ +1u に */
	line-height: calc(50 * var(--u));
}

.intro__body { line-height: calc(50 * var(--u)); }

.contents {
	margin-top: calc(59 * var(--u));
}

.contents__list {
	display: grid;
	grid-template-columns: repeat(2, calc(330 * var(--u)));
	gap: calc(10 * var(--u));
}

.contents__link {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	height: calc(71 * var(--u));
	border: calc(1 * var(--u)) solid var(--c-navy);
	border-radius: calc(35.5 * var(--u));
	background: #f5ffff;
	font-family: var(--f-gothic);
	font-weight: 700;
	font-size: calc(26 * var(--u));
	letter-spacing: calc(2 * var(--u));
	padding-left: calc(2 * var(--u));
	color: var(--c-navy);
	white-space: nowrap;
}

.contents__arrow {
	position: absolute;
	left: calc(292 * var(--u));
	top: calc(26.5 * var(--u));
	width: calc(8 * var(--u));
	height: calc(17 * var(--u));
}

/* ==========================================================================
   COMICS（2250〜3844u）
   ========================================================================== */
.comic {
	height: calc(1594 * var(--u));
	padding-top: calc(128 * var(--u));
}

.comic__logo-card {
	position: relative;
	z-index: 2;
	width: calc(480 * var(--u));
	height: calc(198 * var(--u));
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: calc(16 * var(--u)) calc(18 * var(--u)) calc(12 * var(--u));
	background: #fff;
	border-radius: calc(16 * var(--u));
	box-shadow: 0 calc(6 * var(--u)) calc(10 * var(--u)) rgba(54, 86, 157, 0.06);
}

.comic__logo-card img {
	width: 100%;
	height: auto;
}

.comic__covers {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	gap: calc(12 * var(--u));
	width: calc(546 * var(--u));
	height: calc(378 * var(--u));
	margin: calc(50 * var(--u)) auto 0; /* 2378+198=2576 → 2626 */
}

.comic__cover {
	flex: 1 1 0;
	min-width: 0;
	height: 100%;
	object-fit: cover;
}

/* 上巻・下巻とも差し替え済み（2026-11-11）。同じ角丸・影に揃える */
.comic__cover--1,
.comic__cover--2 {
	border-radius: calc(4 * var(--u));
	box-shadow: 0 calc(12 * var(--u)) calc(28 * var(--u)) rgba(35, 40, 80, 0.28);
}

.comic__credit {
	position: absolute;
	right: 0;
	bottom: calc(-32 * var(--u)); /* 表紙と本文の間（59u）に置き、セクション高さ（Figma 固定）を変えない */
}

.comic .s-inner { margin-top: calc(59 * var(--u)); } /* 3004 → 3063 */

/* ==========================================================================
   HISTORY 足立姫について（3518〜4866u、COMICS に 326u 重なる）
   ========================================================================== */
.about {
	height: calc(1348 * var(--u));
	margin-top: calc(-326 * var(--u));
	padding-top: calc(286 * var(--u));
}

.about__art {
	position: absolute;
	left: 0;
	top: 0;
	width: calc(750 * var(--u));
	height: calc(1348 * var(--u));
	z-index: 0;
	mix-blend-mode: multiply;
	pointer-events: none;
}

.about__art--bottom {
	top: auto;
	bottom: 0;
}

.about__branch {
	position: absolute;
	left: 0;
	top: calc(-240 * var(--u)); /* Figma Group 9: y=3278 */
	width: calc(368 * var(--u));
	height: calc(1492 * var(--u));
	z-index: 0;
	mix-blend-mode: multiply;
	pointer-events: none;
}

/* ==========================================================================
   PILGRIMAGE 江戸六阿弥陀詣とは（4789u〜）
   ========================================================================== */
.pilgrimage {
	/* Figma の波背景は 1594u だが中身は未デザインのため内容量で高さを決める。
	   写真枠（このセクションと、次の五色桜の先頭）は 2026-11-12 クライアント指示で削除 → 他のセクションと同じ下余白 */
	padding-top: calc(96 * var(--u));
	padding-bottom: calc(124 * var(--u));
}

/* ==========================================================================
   SAKURA 五色桜について
   ========================================================================== */
.sakura {
	padding-top: calc(96 * var(--u));
	padding-bottom: calc(124 * var(--u));
}

/* ==========================================================================
   JOURNEY 物語の続きを、まちで。
   ========================================================================== */
.journey {
	padding-top: calc(96 * var(--u));
	padding-bottom: calc(124 * var(--u));
	background: #fff;
}

/* ==========================================================================
   MOVIE 足立姫の世界にふれる
   ========================================================================== */
.movie {
	padding-top: calc(96 * var(--u));
	padding-bottom: calc(124 * var(--u));
}

/* 紹介動画: YouTube（youtube-nocookie）を 16:9 で埋め込み */
.movie__frame {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	margin-top: calc(50 * var(--u));
	overflow: hidden;
	border-radius: calc(14 * var(--u));
	background: #fff;
	box-shadow: 0 calc(10 * var(--u)) calc(26 * var(--u)) rgba(54, 86, 157, 0.08);
}

.movie__frame iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* ==========================================================================
   SPOT 物語の舞台へ
   ========================================================================== */
.spot {
	padding-top: calc(96 * var(--u));
	padding-bottom: calc(124 * var(--u));
	background: #fff;
}

.spot__list {
	display: flex;
	flex-direction: column;
	gap: calc(30 * var(--u));
	margin-top: calc(50 * var(--u));
}

.spot-card {
	padding: calc(40 * var(--u));
	background: #fff;
	border: calc(1 * var(--u)) solid var(--c-line);
	border-radius: calc(30 * var(--u));
	box-shadow: 0 calc(10 * var(--u)) calc(26 * var(--u)) rgba(54, 86, 157, 0.06);
}

.spot-card__img {
	width: 100%;
	height: calc(360 * var(--u));
}

.spot-card__name {
	margin-top: calc(30 * var(--u));
	font-weight: 500;
	font-size: calc(26 * var(--u));
	line-height: calc(40 * var(--u));
	letter-spacing: calc(2.8 * var(--u));
	color: var(--c-navy);
	font-feature-settings: "halt" 1;
}

.spot-card__desc {
	margin-top: calc(10 * var(--u));
	font-size: calc(24 * var(--u));
	line-height: calc(40 * var(--u));
	letter-spacing: calc(2.8 * var(--u));
	color: var(--c-text);
	font-feature-settings: "halt" 1;
}

.spot-card__address {
	margin-top: calc(10 * var(--u));
	font-size: calc(22 * var(--u));
	line-height: calc(40 * var(--u));
	letter-spacing: calc(2.8 * var(--u));
	color: var(--c-gray);
	font-feature-settings: "halt" 1;
}

.spot-card__map {
	display: inline-block;
	margin-top: calc(20 * var(--u));
	padding-bottom: calc(4 * var(--u));
	border-bottom: calc(1 * var(--u)) solid var(--c-navy);
	font-family: var(--f-gothic);
	font-weight: 700;
	font-size: calc(24 * var(--u));
	line-height: calc(36 * var(--u));
	letter-spacing: calc(2 * var(--u));
	color: var(--c-navy);
}

/* ==========================================================================
   ROUTE 祈りの物語をたどる 江戸六阿弥陀詣
   ========================================================================== */
.route {
	padding-top: calc(96 * var(--u));
	padding-bottom: calc(124 * var(--u));
}

.route__card {
	margin-top: calc(50 * var(--u));
	padding: calc(40 * var(--u));
	background: #fff;
	border-radius: calc(30 * var(--u));
}

/* 江戸六阿弥陀詣のイラストマップ（支給 il.jpg 1536×1024） */
.route__map { margin: 0; }

.route__map img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: calc(10 * var(--u));
}

.route__list {
	list-style: none;
	margin: calc(30 * var(--u)) 0 0;
	padding: 0;
}

.route__list li {
	display: flex;
	align-items: center;
	gap: calc(20 * var(--u));
	padding: calc(22 * var(--u)) 0;
	border-bottom: calc(1 * var(--u)) solid var(--c-line);
}

.route__list li:last-child { border-bottom: 0; padding-bottom: 0; }

.route__num {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: calc(84 * var(--u));
	height: calc(44 * var(--u));
	border: calc(2 * var(--u)) solid var(--c-navy);
	border-radius: calc(22 * var(--u));
	background: var(--c-navy);
	color: #fff;
	font-family: var(--f-gothic);
	font-weight: 700;
	font-size: calc(20 * var(--u));
	letter-spacing: calc(2 * var(--u));
	padding-left: calc(2 * var(--u));
	line-height: 1;
}

/* 木余・木残（六つの札所以外）は白抜き */
.route__extra .route__num {
	background: #fff;
	color: var(--c-navy);
}

.route__body {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.route__name {
	font-weight: 500;
	font-size: calc(26 * var(--u));
	line-height: calc(40 * var(--u));
	letter-spacing: calc(2 * var(--u));
	color: var(--c-navy);
	font-feature-settings: "halt" 1;
}

.route__kana {
	font-weight: 400;
	font-size: calc(20 * var(--u));
	letter-spacing: calc(1 * var(--u));
	color: var(--c-gray);
}

.route__addr {
	font-size: calc(22 * var(--u));
	line-height: calc(34 * var(--u));
	letter-spacing: calc(1.6 * var(--u));
	color: var(--c-text);
}

.route__notes {
	list-style: none;
	margin: calc(28 * var(--u)) 0 0;
	padding: calc(20 * var(--u)) calc(24 * var(--u));
	border-radius: calc(10 * var(--u));
	background: #fdfaf4;
	font-size: calc(20 * var(--u));
	line-height: calc(34 * var(--u));
	letter-spacing: calc(1 * var(--u));
	color: var(--c-text);
	font-feature-settings: "halt" 1;
}

/* ==========================================================================
   PROJECT
   ========================================================================== */
.project {
	padding-top: calc(100 * var(--u));
	padding-bottom: calc(124 * var(--u));
}

/* ==========================================================================
   NAZOTOKI 謎解き
   ========================================================================== */
.nazotoki {
	padding-top: calc(96 * var(--u));
	padding-bottom: calc(140 * var(--u));
	background: #fff;
}

/* 謎解きの KV: 支給の Catrip × パラノマサイト KV（story/s-mv.jpg）。作品名の下に置く（2026-11-12） */
.nazotoki__kv {
	width: 100%;
	margin: calc(40 * var(--u)) 0 0;
}

.nazotoki__kv img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: calc(14 * var(--u));
	box-shadow: 0 calc(14 * var(--u)) calc(34 * var(--u)) rgba(54, 86, 157, 0.22);
}

.nazotoki__credit { margin-top: calc(12 * var(--u)); }

.nazotoki__series {
	margin-top: calc(30 * var(--u));
	text-align: center;
	font-weight: 600;
	font-size: calc(24 * var(--u));
	line-height: calc(40 * var(--u));
	letter-spacing: calc(2 * var(--u));
	color: var(--c-accent);
	font-feature-settings: "halt" 1;
}

.nazotoki__name {
	margin-top: calc(10 * var(--u));
	text-align: center;
	font-weight: 500;
	font-size: calc(28 * var(--u));
	line-height: calc(44 * var(--u));
	letter-spacing: calc(2.8 * var(--u));
	color: var(--c-navy);
	font-feature-settings: "halt" 1;
}

/* STORY ページの見出し画像の代替テキストは視覚上非表示（画像は筆記体） */

/* ==========================================================================
   NEXT（ワイヤーフレーム共通: 次のページへの導線）
   ========================================================================== */
.next {
	padding-top: calc(80 * var(--u));
	padding-bottom: calc(100 * var(--u));
	background: #fff;
}

.next__label {
	text-align: center;
	font-family: var(--f-en);
	font-weight: 700;
	font-size: calc(22 * var(--u));
	line-height: calc(33 * var(--u));
	letter-spacing: calc(4 * var(--u));
	padding-left: calc(4 * var(--u));
	color: var(--c-accent);
}

.next__btn {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: calc(120 * var(--u));
	margin-top: calc(20 * var(--u));
	padding: 0 calc(80 * var(--u));
	border: calc(1 * var(--u)) solid var(--c-navy);
	border-radius: calc(60 * var(--u));
	background: #f5ffff;
	color: var(--c-navy);
	white-space: nowrap;
}

.next__en {
	font-family: var(--f-en);
	font-weight: 700;
	font-size: calc(20 * var(--u));
	line-height: calc(30 * var(--u));
	letter-spacing: calc(2 * var(--u));
	padding-left: calc(2 * var(--u));
}

.next__ja {
	font-family: var(--f-gothic);
	font-weight: 700;
	font-size: calc(26 * var(--u));
	line-height: calc(38 * var(--u));
	letter-spacing: calc(2 * var(--u));
	padding-left: calc(2 * var(--u));
}

.next__arrow {
	position: absolute;
	right: calc(40 * var(--u));
	top: 50%;
	width: calc(17 * var(--u));
	height: calc(8 * var(--u));
	transform: translateY(-50%);
}