/* ==========================================================================
   足立姫フェス2026｜PC レイアウト（1024px 以上）
   --------------------------------------------------------------------------
   Figma は幅 750 のスマホカンプのみ。PC 版はカンプの配色・書体・部品をそのまま使い、
   1024px 以上でレイアウトだけを組み替える。
   - 基準単位 --u を 0.7px に固定（スマホの 1u = 0.7px。本文 28u → 19.6px、ボタン高 70u → 49px）
   - 各セクションの内容は幅 1120px（--pc-w）の中央コンテナに収め、背景は全幅
   - EVENT ページの絶対配置（Figma 座標）はフロー配置に切り替える
   - 750〜1023px（タブレット）は従来どおり、カンプ原寸 750px を中央配置
   ========================================================================== */
@media (min-width: 1024px) {

:root {
	--u: 0.7px;
	--pc-w: 1120px;
	--pc-gutter: max(40px, calc((100vw - var(--pc-w)) / 2));
	/* --pu = Figma「PCデザイン」の 1px。幅基準（1680px で原寸、上限 1920px 相当）と、
	   FV の上端（ヘッダー＋お知らせ欄の下。js/main.js が --fv-top に実測値を入れる）から
	   コミックス告知カードの下端＋余白（1056pu）までが 100vh に収まる高さ基準の、小さい方 */
	--pu: min(min(100vw, 1920px) / 1680, (100vh - var(--fv-top, 150px)) / 1056);
}

.lp { width: 100%; }

/* ---------- ヘッダー: ロゴ｜ナビ｜言語・ショップ を 1 段に ---------- */
.header {
	display: flex;
	align-items: center;
	height: 90px;
	padding: 0 var(--pc-gutter);
	border-bottom: 1px solid var(--c-border);
}

.header__bar { display: contents; }

.header__logo { order: 1; }
.header__logo img { width: 187px; height: 44px; }

.header__nav { order: 2; margin-left: 56px; align-self: stretch; }
.header__nav-list { display: flex; height: 100%; }
.header__nav-item + .header__nav-item { border-left: 0; }

.header__nav-link {
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 100%;
	padding: 4px 22px 0;
	border-bottom: 0;
}

.header__nav-item.is-active .header__nav-link { box-shadow: inset 0 -4px 0 var(--c-accent); border-bottom: 0; }
.header__nav-en { font-size: 16px; line-height: 24px; }
.header__nav-ja { font-size: 12px; line-height: 16px; }

.header__buttons {
	order: 3;
	margin-left: auto;
	margin-top: 0;
	align-self: center;
	height: 44px;
}

.header__lang { width: 112px; height: 44px; font-size: 14px; }
.header__lang-item.is-current { width: 52px; }
.header__shop { width: 150px; height: 44px; font-size: 13px; padding: 0 16px 0 18px; }
.header__shop-arrow { margin-left: auto; }

.header__menu-btn { display: none; }
.header__drawer { display: none !important; }

/* ---------- お知らせ ---------- */
.news__inner {
	align-items: center;
	max-width: var(--pc-w);
	margin: 0 auto;
	padding: 16px 40px;
	gap: 20px;
}

/* ---------- 右下の花びら ---------- */
.float-petal { right: 32px; bottom: 32px; width: 200px; height: 150px; }
.float-petal__label { font-size: 22px; line-height: 30px; }

/* ---------- 共通: 筆記体 + 見出し（EVENT ページ）をフローに ---------- */
.section-script,
.schedule__script, .craft__script, .topics__script {
	position: relative;
	left: auto;
	top: auto;
	display: block;
	margin: 0 auto; /* PC では見出しと同じく中央に */
}

.section-title,
.schedule__title, .craft__title, .topics__title {
	position: relative;
	top: auto;
	margin-top: calc(8 * var(--u)); /* 筆記体の画像の下に（重ならない） */
	font-size: 30px;
	line-height: 48px;
	letter-spacing: 0.3em;
	padding-left: 0.3em;
}

/* ==========================================================================
   EVENT ページ
   ========================================================================== */

/* FV（Figma「PCデザイン」92:14071 を再現。デザイン幅 1680px）
   --pu = Figma の 1px。画面幅に比例（1680px で原寸、上限 1920px 相当）。座標は Figma の y からヘッダー＋ナビ（133px）を引いた値。
   ・背景: 支給の pc-fbbg（花びら、1680×871。下端は生成りへのフェード込み）を FV 上端から 871pu 敷く
   ・イラスト: 支給の pc-fvimg（波形に切り抜き済み、1047×1089）を x 633 / y −14 に。下端は次のステートメントの下へ潜る
   ・::after: Figma「Rectangle 18」（y 858〜、生成りのグラデーション）でイラストの足元をぼかす
   ・FV の高さは 871pu（pc-fbbg の下端）。そこから下はステートメントの pc-bg01
   FV には z-index を付けない（イラストはステートメントの下、コミックス告知カードはステートメントの上に重ねるため） */
.fv {
	--u: var(--pu); /* SP 用の calc(N * var(--u)) をそのまま Figma の px として使う（日付まわりなど SP と同じ数値の箇所） */
	--fx: max(0px, (100% - 1680 * var(--pu)) / 2); /* 1920px 超の画面ではデザイン幅を中央に */
	position: relative;
	z-index: auto;
	height: calc(871 * var(--pu));
	overflow-x: clip;
}

.fv::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	z-index: 0;
	width: 100%;
	height: calc(871 * var(--pu));
	background: #c4f9fd url("../assets/img/pc-fbbg.png") center top / cover no-repeat;
	pointer-events: none;
}

.fv::after {
	content: "";
	position: absolute;
	left: 0;
	top: calc(725 * var(--pu)); /* Figma y 858 */
	z-index: 1;
	width: 100%;
	height: calc(1573 * var(--pu));
	background: linear-gradient(180deg, rgba(253, 250, 244, 0) 0%, rgba(253, 250, 244, 0.871) 13.942%, #fdfaf4 70.673%, rgba(253, 250, 244, 0) 97.793%);
	pointer-events: none;
}

.fv__base, .fv__sakura { display: none; }

.fv__art {
	left: calc(var(--fx) + 633 * var(--pu));
	top: calc(-14 * var(--pu));
	z-index: 1;
	width: calc(1047 * var(--pu));
	height: calc(1089 * var(--pu));
}

.fv__eyebrow, .fv__place, .fv__title, .fv__band, .fv__lead, .fv__date, .fv__cta, .fv__credit { z-index: 2; }

.fv__eyebrow {
	left: calc(var(--fx) + 146 * var(--pu));
	right: auto;
	top: calc(74 * var(--pu)); /* Figma 中心 y 216.5 */
	text-align: left;
	font-size: max(14 * var(--pu), 11px);
	line-height: max(19 * var(--pu), 15px);
	letter-spacing: calc(2 * var(--pu));
	padding-left: 0;
}

.fv__place {
	left: calc(var(--fx) + 146 * var(--pu));
	right: auto;
	top: calc(103 * var(--pu)); /* Figma 中心 y 249 */
	text-align: left;
	font-size: max(18 * var(--pu), 13px);
	line-height: max(26 * var(--pu), 19px);
	padding-left: 0;
}

.fv__title {
	z-index: 5; /* イラスト（z-index 3）より前 */
	left: calc(var(--fx) + 138 * var(--pu));
	top: calc(136 * var(--pu)); /* Figma y 269 */
	width: calc(635 * var(--pu));
	height: calc(186 * var(--pu));
}

.fv__band {
	left: calc(var(--fx) + 145 * var(--pu));
	top: calc(311 * var(--pu)); /* Figma y 444 */
	width: calc(472 * var(--pu));
	height: calc(61 * var(--pu));
	font-size: calc(32 * var(--pu));
	padding-left: calc(2.8 * var(--pu));
}

.fv__lead {
	left: calc(var(--fx) + 145 * var(--pu));
	right: auto;
	top: calc(382 * var(--pu)); /* Figma y 515 */
	text-align: left;
	font-weight: 600;
	font-size: max(18 * var(--pu), 13px);
	line-height: max(40 * var(--pu), 26px);
	padding-left: 0;
	font-feature-settings: "halt" 1;
}

/* 日付: Figma の罫線は x 138 / 幅 572、y 629 と 750。数値は SP と同じ（--u = --pu）なので位置だけ合わせる */
.fv__date {
	left: calc(var(--fx) + 138 * var(--pu));
	top: calc(481 * var(--pu)); /* Figma y 614 */
	width: calc(572 * var(--pu));
}

.fv__date-main { left: calc(9 * var(--pu)); }     /* 文字の中心 x 336 */
.fv__date-dow { left: calc(395 * var(--pu)); }    /* Figma x 533 */
.fv__date-from { left: calc(445 * var(--pu)); }   /* Figma x 583 */

/* イラストの足元: Figma では「Rectangle 18」（y 858〜1077 で透明→不透明度 0.871、1970 で 1）がイラストの上に重なって
   生成りへ溶け、その下のステートメント部分まで薄く見えている。pc-bg01 は不透明な書き出しなので、
   イラスト自体を同じ割合でグラデーションマスクし、ステートメント背景の上に重ねる
   （イラストの箱 y 119〜1208 に換算: 67.86% で 1 → 87.97% で 0.129 → 100% で 0.11）。
   グラデーションのマスクは画像の読み込みに依存しない。マスク非対応のブラウザは ::after の重ね＋ステートメントの下（従来どおり）。 */
@supports ((mask-image: linear-gradient(#000, #000)) or (-webkit-mask-image: linear-gradient(#000, #000))) {
	.fv__art {
		z-index: 3;
		-webkit-mask-image: linear-gradient(180deg, #000 67.86%, rgba(0, 0, 0, 0.129) 87.97%, rgba(0, 0, 0, 0.11) 100%);
		mask-image: linear-gradient(180deg, #000 67.86%, rgba(0, 0, 0, 0.129) 87.97%, rgba(0, 0, 0, 0.11) 100%);
	}

	.fv::after { display: none; }
}

/* 文字サイズは Figma 比で縮むが、1024〜1280px 幅で読めなくならないよう小さい文字だけ下限を設けている（max(…, Npx)） */

/* ボタン: Figma 390×70、文言 16px、矢印 20×10（x 340 / y 30） */
.fv__cta {
	position: absolute;
	left: calc(var(--fx) + 143 * var(--pu));
	top: calc(652 * var(--pu)); /* Figma y 785 */
	width: calc(390 * var(--pu));
	height: calc(70 * var(--pu));
}

.fv__cta .btn__label { --shift: 0px; font-size: max(16 * var(--pu), 13px); letter-spacing: calc(2 * var(--pu)); }
.fv__cta .btn__arrow { left: calc(340 * var(--pu)); top: calc(30 * var(--pu)); width: calc(20 * var(--pu)); height: calc(10 * var(--pu)); }

/* コミックス告知カード: Figma 470×208（x 143 / y 961）。FV の下端を越えてステートメントの上に重なる。
   右に表紙 2 点を追加したため（2026-11-12 クライアント指示）幅を 640 に広げ、高さは中身なり（約 200）。
   1024〜1440px では文字の下限（13px）でコピーが広がるので、文字の列は 384 確保 */
.fv__comic {
	left: calc(var(--fx) + 143 * var(--pu));
	top: calc(828 * var(--pu));
	z-index: 3;
	width: calc(640 * var(--pu));
	column-gap: calc(20 * var(--pu));
	row-gap: calc(8 * var(--pu));
	padding: calc(20 * var(--pu)) calc(30 * var(--pu)) calc(16 * var(--pu)) calc(22 * var(--pu));
}

.fv__comic-text { gap: calc(4 * var(--pu)); }
.fv__comic-logo { width: calc(335 * var(--pu)); height: calc(94 * var(--pu)); }
.fv__comic-copy { font-size: max(18 * var(--pu), 13px); line-height: max(30 * var(--pu), 22px); }
.fv__comic-copy br { display: none; }
.fv__comic-covers { gap: calc(8 * var(--pu)); }
.fv__comic-cover { width: calc(88 * var(--pu)); height: calc(126 * var(--pu)); }

/* コピーライト: PC はイラストの右下に置くと絵に掛かるため、FV の分（.fv__credit）は出さず、
   カードの下・左寄せ（イラストの無い左の列）に 1 行だけ置く。イラスト（足立姫と 2 人の少女）は ©Hinase Momoyama/SQUARE ENIX（2026-11-13） */
.fv .fv__credit { display: none; }
.fv__comic-credit-sp { display: none; }
.fv__comic-credit-pc { display: inline; }

.fv__comic-credit {
	text-align: left;
	right: auto;
	left: calc(var(--fx) + 143 * var(--pu));
	top: calc(1002 * var(--pu) + 6px); /* カード（828〜約 1002）の下 */
	z-index: 3;
	width: calc(640 * var(--pu));
	font-size: 12px;
	line-height: 18px;
}

/* イラストのコピーライト（Figma には無い追加要素）: イラストの右下、生成りへ溶ける手前 */
.fv__credit {
	position: absolute;
	left: auto;
	right: calc(var(--fx) + 40 * var(--pu));
	top: calc(820 * var(--pu));
	z-index: 4;
	font-size: 12px;
	line-height: 18px;
	text-shadow: 0 0 6px #fff, 0 0 3px #fff;
}

/* ステートメント: 背景は支給の pc-bg01（1680×1066、生成りに桜と水紋）。FV（pc-fbbg）の下端にそのまま続く。
   上端にはコミックス告知カード（〜165pu）とイラストの足元（〜204pu）が重なるので、その下から文言を始め、上下の余白は詰める。
   背景画像は幅いっぱい・上揃えで、セクションの高さぶん表示する */
.statement {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	z-index: 2;
	width: 100%;
	height: auto;
	min-height: 0;
	margin-top: 0;
	padding: calc(165 * var(--pu) + 56px) var(--pc-gutter) 88px;
	text-align: center;
	background: #fdfaf4;
}

.statement__art {
	width: 100%;
	height: 100%;
	z-index: 0;
	object-fit: cover;
	object-position: center top;
}

/* 上端（FV との境目）: FV の pc-fbbg と ステートメントの pc-bg01 の継ぎ目に、生成りの帯を上下へ広くぼかして重ね、
   境目が分からないようにする（イラスト z-index 3・コミックス告知カードは z-index 3 で、この帯より前） */
.statement::before {
	content: "";
	position: absolute;
	left: 0;
	top: calc(-260 * var(--pu));
	z-index: 1;
	width: 100%;
	height: calc(560 * var(--pu));
	background: linear-gradient(180deg,
		rgba(251, 249, 243, 0) 0%,
		rgba(251, 249, 243, 0.55) 30%,
		rgba(251, 249, 243, 0.85) 46.4%, /* 継ぎ目（260 / 560） */
		rgba(251, 249, 243, 0.55) 64%,
		rgba(251, 249, 243, 0) 100%);
	pointer-events: none;
}

/* 下端: 背景画像（高さぶんで切れる）を生成りへぼかし、そのまま開催スケジュールの pc-bg02 の上端へなじませる。
   セクションの内側 180px ＋外側 120px を 1 枚のグラデーションで。直線の境目を作らない */
.statement::after {
	content: "";
	position: absolute;
	left: 0;
	top: calc(100% - 180px);
	z-index: 1;
	width: 100%;
	height: 300px;
	background: linear-gradient(180deg, rgba(251, 250, 244, 0) 0%, #fbfaf4 60%, rgba(251, 250, 244, 0) 100%);
	pointer-events: none;
}

.statement__eyebrow, .statement__title, .statement__text, .statement__cta {
	position: relative;
	z-index: 2;
	left: auto;
	top: auto;
	right: auto;
}

.statement__eyebrow { font-size: 18px; line-height: 28px; }
.statement__title { margin-top: 14px; font-size: 36px; line-height: 56px; }
.statement__text { margin-top: 20px; font-size: 19px; line-height: 36px; }
.statement__cta { margin: 32px auto 0; }

/* 開催スケジュール: 背景は支給の pc-bg02（1680×4294、水色。上端は生成りからのフェード）。下端は手仕事の白い波が重なる */
.schedule {
	padding: 88px var(--pc-gutter) 240px; /* 下端に手仕事の白い波（約 80px）が重なるぶんも含めて広めに */
}

.schedule__bg { top: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; }

.schedule__card { width: 100%; max-width: 1000px; margin: 36px auto 0; padding: 40px 48px; } /* .card の幅 670u を解除 */
.schedule__card--related { margin-top: 24px; }

/* 各イベント: 左に写真・ピクトグラム（220×275）、右に 開催日・名称・見どころ・情報・ボタン */
.event {
	grid-template-columns: 220px minmax(0, 1fr);
	grid-template-areas:
		"media head"
		"media catch"
		"media info"
		"media actions";
	grid-template-rows: auto auto auto 1fr;
	column-gap: 40px;
}

.event + .event { margin-top: 40px; padding-top: 44px; }
/* 列車: チラシ 2 点は左列に縦 2 枚 */
.event--flyers {
	grid-template-areas:
		"media head"
		"media catch"
		"media info"
		"media actions";
}

.event__flyers { grid-template-columns: minmax(0, 1fr); gap: 16px; margin-bottom: 0; }
.event__flyers > .event__credit { margin-top: -10px; }
.event__flyer { border-radius: 6px; }
.event__flyer-zoom { right: 8px; bottom: 8px; width: 18px; height: 18px; padding: 7px; }
.event__head { margin-bottom: 14px; }
.event__name { font-size: 20px; line-height: 34px; }
.event__media > svg { padding: 54px 30px; }
.event__media > .placeholder-note { font-size: 13px; line-height: 20px; }
.event__credit { font-size: 12px; line-height: 18px; }
.event__catch { font-size: 16px; line-height: 30px; letter-spacing: 0.06em; }
.event__lead { margin-bottom: 2px; font-size: 16px; letter-spacing: 0.06em; }
.event__cast { margin-top: 6px; font-size: 15px; line-height: 26px; }
.event__info { margin-top: 20px; }
.event__info > div { grid-template-columns: 104px minmax(0, 1fr); column-gap: 18px; padding: 10px 0; }
.event__info dt { padding: 2px 0; font-size: 13px; line-height: 22px; letter-spacing: 0.08em; }
.event__info dd { font-size: 16px; line-height: 26px; letter-spacing: 0.06em; }
.event__small { font-size: 13px; line-height: 22px; }
.event__actions { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 22px; }
.event__apply { width: 300px; }
.event__apply .btn__arrow { left: 252px; }
.event__note { font-size: 14px; line-height: 22px; }

/* 手仕事: 横スクロール → 4 列グリッド。上端は支給の白い波（pc-wave.png、幅 2000 の帯）を上の水色へ食い込ませる */
.craft { height: auto; padding: 88px var(--pc-gutter) 96px; }

.craft__wave {
	display: block;
	position: absolute;
	left: 0;
	bottom: 100%;
	width: 100%;
	height: auto;
	margin-bottom: -1px; /* 境目の線を出さない */
	pointer-events: none;
}

.craft__scroller { position: static; width: auto; overflow: visible; }

.craft__list {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 24px;
	width: auto;
	margin-top: 40px;
	padding: 0;
}

.work { width: auto; }
.work__img { width: 100%; height: auto; aspect-ratio: 1 / 1; }
.work__name, .work__desc { width: auto; white-space: normal; }
.work__name { font-size: 18px; line-height: 30px; word-break: keep-all; overflow-wrap: anywhere; } /* 作品名は <wbr> の位置（語の切れ目）で折り返す */
.work__desc { font-size: 15px; line-height: 26px; }

.craft__progress { display: none; }

.craft__info {
	position: relative;
	left: auto;
	top: auto;
	display: flex;
	align-items: baseline;
	gap: 24px;
	width: auto;
	max-width: 1000px;
	height: auto;
	margin: 40px auto 0;
	padding: 20px 28px;
}

.craft__info-venue, .craft__info-note, .craft__info-date { position: static; }
.craft__cta { margin: 32px auto 0; }

/* 最新情報 */
.topics { height: auto; padding: 88px var(--pc-gutter) 96px; }
.topics__bg { top: 0; height: 100%; }

.topics__text {
	position: relative;
	left: auto;
	top: auto;
	width: auto;
	margin-top: 20px;
	font-size: 19px;
	line-height: 36px;
}

.topics__grid {
	position: relative;
	left: auto;
	top: auto;
	width: auto;
	max-width: 1000px;
	margin: 36px auto 0;
	gap: 28px;
}

.topics__widget { display: block; }
.topics__cta { margin: 36px auto 0; }

/* EVENT ページ共通: フロー化したボタン */
.statement__cta, .craft__cta, .topics__cta, .footer__totop {
	position: relative;
	left: auto;
	top: auto;
	display: block;
}

/* フッター上端: 直線にならないよう、紺の波（Figma の水色の波と同じ曲線）を直前のセクションへ食い込ませる。
   インライン SVG なので画像の読み込みに依存しない（mask-image は使わない） */
.footer::before {
	content: "";
	position: absolute;
	left: 0;
	bottom: calc(100% - 1px); /* 境目の線を出さない */
	width: 100%;
	height: 84px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 750 160' preserveAspectRatio='none'%3E%3Cpath d='M0 160V53.5C0 53.5 164.5 150.5 376 75.6C587.5 0.75 750 75.6 750 75.6V160Z' fill='%2336569d'/%3E%3C/svg%3E") center bottom / 100% 100% no-repeat;
	pointer-events: none;
}

/* フッター: 左にロゴとナビ、右にクレジットと問い合わせ */
.footer {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	grid-template-areas:
		"eyebrow eyebrow"
		"logo    credits"
		"nav     credits"
		"nav     contact"
		"rule    rule"
		"copy    totop";
	column-gap: 72px;
	height: auto;
	padding: 72px var(--pc-gutter) 64px;
}

.footer__waves { left: auto; right: 0; top: 0; width: 520px; height: auto; }

.footer__eyebrow, .footer__logo, .footer__nav, .footer__credits, .footer__contact, .footer__rule, .footer__copyright, .footer__totop {
	position: relative;
	left: auto;
	top: auto;
	width: auto;
}

.footer__eyebrow { grid-area: eyebrow; }
.footer__logo { grid-area: logo; width: 320px; height: auto; margin-top: 20px; }
.footer__nav { grid-area: nav; margin-top: 36px; }
.footer__nav-list { display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; }
.footer__nav-list li { padding: 14px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.6); }
.footer__nav-list li + li { padding-top: 14px; }
.footer__nav a { font-size: 16px; line-height: 28px; }

.footer__credits { grid-area: credits; align-self: start; margin-top: 20px; font-size: 15px; line-height: 34px; white-space: normal; }
.footer__contact { grid-area: contact; margin-top: 24px; font-size: 15px; }
.footer__contact-label { line-height: 34px; }
.footer__contact-body { line-height: 28px; }

.footer__rule { grid-area: rule; margin-top: 48px; }
.footer__copyright { grid-area: copy; margin-top: 24px; font-size: 14px; line-height: 28px; }
.footer__totop { grid-area: totop; justify-self: end; margin-top: 20px; width: 260px; height: 52px; }


/* ==========================================================================
   STORY / CRAFT ページ（フロー配置の共通部品）
   ========================================================================== */
.s-inner {
	max-width: var(--pc-w);
	margin-left: auto;
	margin-right: auto;
	padding: 0 40px;
}

.s-script { margin-left: auto; margin-right: auto; } /* PC では見出しと同じく中央に */
.intro .s-script { margin-left: auto; }
.s-title { font-size: 30px; line-height: 48px; letter-spacing: 0.2em; padding-left: 0.2em; }
.s-sub { font-size: 22px; line-height: 40px; }

.s-body, .s-closing {
	max-width: 800px;
	margin-left: auto;
	margin-right: auto;
}

.s-body { font-size: 18px; line-height: 36px; }
.s-body--loose { line-height: 38px; }

.ph--wide, .movie__frame, .route__card, .exhibit, .works__more, .nazotoki__kv {
	max-width: 900px;
	margin-left: auto;
	margin-right: auto;
}

.ph--wide { height: 420px; }

/* 生成り背景のうち、次が白いセクションのもの（五色桜 / PROJECT / LOCAL）は下端を白へぼかして直線の境目を作らない。
   上端のフェードは story.css の .bg-cream と同じ */
.bg-cream--fade {
	background: linear-gradient(180deg, rgba(255, 255, 255, 0) 2.82%, #fdf9f4 36%, #fdf9f4 68%, rgba(253, 249, 244, 0) 100%);
}

/* 背景の装飾画像は全幅に */
.about__art { width: 100%; height: 100%; object-fit: cover; }
.about__branch { width: 320px; height: auto; }
.intro__waves { left: auto; right: 0; }

/* STORY: FV */
/* STORY: FV（トップの PC FV に合わせる）: 背景は花びらの pc-fbbg（FV と同じ 871pu）、下端は白へ。
   支給の under-fv.png（水色の地を含む一枚絵、下端は透明へフェード）を中央に置き、左右の端だけグラデーションマスクで背景へなじませる */
.sfv {
	position: relative;
	height: calc(871 * var(--pu));
	min-height: 560px;
	padding: 0;
	overflow-x: clip;
	background: #c4f9fd url("../assets/img/pc-fbbg.png") center top / cover no-repeat;
}

.sfv::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: 1;
	width: 100%;
	height: 34%;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #fff 100%);
	pointer-events: none;
}

.sfv__art {
	position: absolute;
	left: 50%;
	top: 0;
	z-index: 0;
	display: block;
	width: auto;
	height: 100%;
	margin: 0;
	transform: translateX(-50%);
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
}

.sfv__credit { position: absolute; right: var(--pc-gutter); top: auto; bottom: 24px; z-index: 2; text-shadow: 0 0 6px #fff, 0 0 3px #fff; }

/* STORY: 導入・目次 */
.intro { padding-top: 48px; padding-bottom: 80px; }

.contents { max-width: 900px; margin: 44px auto 0; }
.contents__list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } /* 目次 4 項目（動画・物語の舞台は 2026-11-12 削除） */
.contents__link { height: 56px; font-size: 17px; }
.contents__arrow { left: auto; right: 24px; top: 50%; transform: translateY(-50%); }

/* STORY: COMICS / HISTORY（Figma の固定高さをやめる） */
.comic { height: auto; padding: 96px 0 90px; }
.comic__logo-card { width: 420px; height: auto; }
.comic__covers { width: 560px; height: 390px; }
.comic .s-inner { margin-top: 56px; }

.about { height: auto; margin-top: 0; padding: 96px 0 100px; }

.pilgrimage { padding-top: 96px; padding-bottom: 100px; }
.sakura, .journey, .movie, .spot, .route, .project, .makers, .exhibition, .shop, .local, .works { padding-top: 96px; padding-bottom: 100px; }
/* CRAFT 冒頭（トップの PC FV に合わせる）: 上部に花びらの pc-fbbg（871pu）を敷き、下へ白に溶かす */
.chero {
	padding-top: 72px;
	padding-bottom: 100px;
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0) calc(560 * var(--pu)), #fff calc(871 * var(--pu))),
		#fff url("../assets/img/pc-fbbg.png") center top / 100% auto no-repeat;
}

.chero__ripple { display: none; } /* 背景の花びらと重なるため PC では出さない（トップ PC FV と同じく水紋・桜の切り抜きは使わない） */

/* STORY: JOURNEY の写真 2 点 */
.ph--square { width: 380px; height: 380px; }

/* スポット / 店舗カード: 3 列 */
.spot__list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 28px;
	margin-top: 44px;
}

.spot-card { padding: 24px; }
.spot-card__img { height: 220px; }

/* ROUTE */
.route__list { column-count: 2; column-gap: 40px; }
.route__list li { padding: 14px 0; border-bottom: 1px solid var(--c-line); }
.route__list li:last-child { border-bottom: 1px solid var(--c-line); padding-bottom: 14px; }
.route__num { width: 60px; height: 30px; font-size: 14px; }
.route__name { font-size: 18px; line-height: 28px; }
.route__kana { font-size: 13px; }
.route__addr { font-size: 15px; line-height: 24px; }
.route__notes { padding: 16px 22px; font-size: 14px; line-height: 24px; }
.route__list li { break-inside: avoid; }

/* NAZOTOKI */
.nazotoki { padding-top: 96px; }
.nazotoki__kv { max-width: 620px; padding: 0; }

/* NEXT（下にフッターの紺の波が 84px 食い込むので、ボタンとの間を空ける） */
.next { padding-bottom: 130px; }
.next__btn { max-width: 560px; margin: 16px auto 0; height: 96px; }

/* CRAFT: 冒頭ギャラリー 3 列（大 1 ＋ 小 2） */
.chero__gallery {
	grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(0, 0.9fr);
	grid-template-rows: 1fr 1fr;
	gap: 24px;
	max-width: 1000px;
	margin: 44px auto 0;
}

.chero__main { position: relative; grid-column: 1 / 3; grid-row: 1 / 3; min-height: 440px; }
.chero__main-img { flex: 1 1 auto; height: auto; min-height: 0; }
.chero__credit { position: absolute; top: 100%; right: 0; margin-top: 6px; } /* 右の小さい写真と下端をそろえるため、枠の外（下の余白）に置く */
.chero__sub { height: auto; aspect-ratio: 1 / 1; }

/* CRAFT: 購入・鑑賞の方法 3 列 */
.ways { max-width: 1000px; margin: 48px auto 0; }
.ways__list { flex-direction: row; justify-content: center; gap: 20px; }
.ways__list > li { flex: 0 1 calc((100% - 40px) / 3); min-width: 0; } /* 3 等分（ショップ・まちのお店を非表示の間は 1 つを中央に） */
.ways__link { height: 88px; padding: 0 56px 0 32px; }
.ways__arrow { right: 24px; }

/* CRAFT: WORKS 2 列 */
.works__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 28px;
	max-width: 1000px;
	margin: 44px auto 0;
}

.work-card { padding: 28px; }
.work-card__img { height: 360px; }
.works__more { margin-top: 28px; }

/* CRAFT: MAKERS 2 列 */
.makers__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 48px;
	max-width: 1000px;
	margin: 44px auto 0;
	padding: 8px 40px;
}

/* CRAFT: ONLINE SHOP */
.shop__goods { max-width: 820px; margin: 44px auto 0; gap: 24px; }
.shop__item { height: auto; aspect-ratio: 1 / 1; }

}