/* ==========================================================================
   足立姫フェス2026｜PAGE 01 EVENT・TOP
   --------------------------------------------------------------------------
   Figma カンプ（幅 750）を基準にした実装。
   単位: 1u = カンプ上の 1px = var(--u)
     --u = min(100vw, 750px) / 750
     → 750px 未満の画面では幅に比例して全体が縮小、750px 以上では原寸（750px）で中央配置。
   座標・サイズ・配色・書体はすべて Figma の実測値。
   ========================================================================== */

/* 英字見出し用フォント（Figma 指定: Yonaga Old Mincho Bold）。woff2 を assets/fonts/ に置くと有効になる。
   未配置の間は Zen Old Mincho（Google Fonts）にフォールバックする。 */
@font-face {
	font-family: "Yonaga Old Mincho";
	src: url("../assets/fonts/YonagaOldMincho-Bold.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

:root {
	--u: calc(min(100vw, 750px) / 750);

	--c-navy: #36569d;      /* 見出し英字・ボタン・フッター背景 */
	--c-accent: #00a0e9;    /* アクセント（言語切替・日付・アクティブ下線） */
	--c-deep: #0071a5;      /* FV 日付 */
	--c-text: #4b4f4e;      /* 本文 */
	--c-gray: #8c8c8c;      /* 補足 */
	--c-mint: #8cd6cd;      /* 帯・会場バー */
	--c-pink: #c4187f;      /* 関連企画タグ */
	--c-border: #e8e8e8;
	--c-line: #ebedf0;

	--f-en: "Yonaga Old Mincho", "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
	--f-ja: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
	--f-gothic: "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", sans-serif; /* Figma: YuGothic Bold */
	--f-shippori: "Shippori Antique B1", var(--f-ja);
	--f-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
}

/* ---------- base ---------- */
html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}

html, body {
	margin: 0;
	padding: 0;
	background: #fff;
}

body {
	color: var(--c-text);
	font-family: var(--f-ja);
	line-height: 1;
	-webkit-font-smoothing: antialiased;
}

*, *::before, *::after { box-sizing: border-box; }

img { display: block; max-width: none; }
picture { display: contents; } /* <picture> を挟んでも img 自身がレイアウト対象になるように（PC の FV グリッドなど） */
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, p, dl, dd, address { margin: 0; }
button { font: inherit; color: inherit; }

:focus-visible {
	outline: 2px solid var(--c-accent);
	outline-offset: 2px;
}

/* ページ枠: カンプ幅 750u を中央に配置 */
.lp {
	position: relative;
	width: calc(750 * var(--u));
	margin: 0 auto;
	overflow: hidden;
	background: #fff;
}

/* 日本語本文の共通設定（Figma: Noto Sans JP, halt） */
.ja-text,
.fv__lead, .statement__text, .topics__text,
.event__name, .event__catch, .event__info, .event__note, .work__name, .work__desc,
.craft__info-venue, .craft__info-note, .footer__nav a, .footer__credits, .footer__contact {
	font-feature-settings: "halt" 1;
}

/* ==========================================================================
   共通ボタン（Figma: Button）
   ========================================================================== */
.btn {
	position: absolute;
	display: block;
	border-radius: 999px;
	white-space: nowrap;
}

.btn__label {
	position: absolute;
	left: calc(50% + var(--shift, 0px));
	top: 50%;
	transform: translate(-50%, -50%);
	font-family: var(--f-gothic);
	font-weight: 700;
	letter-spacing: calc(2 * var(--u));
	padding-left: calc(2 * var(--u)); /* 末尾字間分の中央補正 */
	line-height: 1;
}

.btn__arrow {
	position: absolute;
	display: block;
	width: calc(17 * var(--u));
	height: calc(8 * var(--u));
	top: calc(30 * var(--u));
}

.btn__arrow--lg {
	width: calc(29 * var(--u));
	height: calc(14 * var(--u));
	top: calc(48 * var(--u));
}

.btn--primary {
	background: var(--c-navy);
	color: #fff;
	box-shadow: 0 calc(6 * var(--u)) calc(9 * var(--u)) rgba(54, 86, 157, 0.22);
}

.btn--primary .btn__label { font-size: calc(28 * var(--u)); }

.btn--outline,
.btn--white {
	background: #fff;
	border: calc(1 * var(--u)) solid var(--c-navy);
	color: var(--c-navy);
}

.btn--outline .btn__label,
.btn--white .btn__label { font-size: calc(26 * var(--u)); }

/* グッズ画像（支給の切り抜き PNG、assets/img/goods/）を枠に収める共通部品。枠の大きさは置き場所側のクラスで決める */
.goods {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: calc(24 * var(--u));
	box-sizing: border-box;
	overflow: hidden;
	border-radius: calc(14 * var(--u));
	background: linear-gradient(160deg, #eaf8f9 0%, #fbeef5 100%);
}

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

/* セクション共通: 筆記体画像（assets/img/script/）と見出し
   支給素材を文字の外接で切り出し、全語の x ハイトを 27u、ベースラインを画像上端から 101u に揃えたもの（Figma の EVENT 枠と同じ基準）。
   各 img の style="--w:N" が表示幅（u）。画像の左右に 4u の余白があるため left は「文字左端 − 4u」。top は Figma の画像枠と同じ値で、ベースラインも Figma と一致する */
.section-script {
	position: absolute;
	width: calc(var(--w) * var(--u));
	height: auto;
}

.section-title {
	position: absolute;
	left: 0;
	right: 0;
	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(12.8 * var(--u));
	padding-left: calc(12.8 * var(--u));
	color: var(--c-navy);
	white-space: nowrap;
	font-feature-settings: "halt" 1;
}

.placeholder-note {
	display: block;
	text-align: center;
	font-family: var(--f-mono);
	font-weight: 400;
	font-size: calc(11 * var(--u));
	line-height: calc(17.6 * var(--u));
	color: #4f7f86;
}

/* ==========================================================================
   ヘッダー（上段 90u ＋ ナビ 90u）
   ========================================================================== */
.header {
	position: relative;
	z-index: 10;
	background: #fff;
	color: var(--c-navy);
}

.header__bar {
	display: flex;
	align-items: center;
	height: calc(90 * var(--u));
	padding: 0 calc(40 * var(--u)) 0 calc(37 * var(--u));
	border-bottom: calc(1 * var(--u)) solid var(--c-border);
}

.header__logo { display: block; flex: none; }

.header__logo img {
	width: calc(187 * var(--u));
	height: calc(44 * var(--u));
}

.header__buttons {
	display: flex;
	align-items: stretch;
	flex: none;
	height: calc(60 * var(--u));
	margin-left: auto;
	align-self: flex-start;
	margin-top: calc(20 * var(--u));
}

.header__lang {
	display: flex;
	width: calc(152 * var(--u));
	height: calc(60 * var(--u));
	padding: calc(3 * var(--u)) calc(4 * var(--u));
	border: calc(1 * var(--u)) solid var(--c-accent);
	border-radius: calc(35 * var(--u));
	background: #fff;
	font-family: var(--f-en);
	font-weight: 700;
	font-size: calc(18 * var(--u));
	letter-spacing: calc(2 * var(--u));
	white-space: nowrap;
}

.header__lang-item {
	display: flex;
	flex: 1 1 auto;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 0 0 0 calc(2 * var(--u));
	border: 0;
	border-radius: calc(30 * var(--u));
	background: none;
	font: inherit;
	letter-spacing: inherit;
	color: var(--c-navy);
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
}

.header__lang-item.is-current { cursor: default; }

.header__lang-item.is-current {
	flex: none;
	width: calc(71 * var(--u));
	background: var(--c-accent);
	color: #fff;
}

.header__shop {
	display: flex;
	align-items: center;
	flex: none;
	width: calc(190 * var(--u));
	height: calc(60 * var(--u));
	margin-left: calc(5 * var(--u));
	padding: 0 calc(20 * var(--u)) 0 calc(25 * var(--u));
	border-radius: calc(35 * var(--u));
	background: var(--c-navy);
	color: #fff;
	font-weight: 700;
	font-size: calc(16 * var(--u));
	letter-spacing: calc(2.8 * var(--u));
	white-space: nowrap;
}

.header__shop-icon { flex: none; width: calc(22 * var(--u)); height: calc(20 * var(--u)); }
.header__shop-label { margin-left: calc(10 * var(--u)); margin-right: calc(-2.8 * var(--u)); }
.header__shop-arrow { flex: none; width: calc(13 * var(--u)); height: calc(7 * var(--u)); margin-left: calc(27 * var(--u)); }

.header__menu-btn {
	--tap-x: 12px;
	--tap-y: calc((44px - 12 * var(--u)) / 2);
	position: relative;
	display: block;
	flex: none;
	width: calc(40 * var(--u));
	height: calc(12 * var(--u));
	padding: var(--tap-y) var(--tap-x);
	margin: calc(-1 * var(--tap-y)) calc(-1 * var(--tap-x)) calc(-1 * var(--tap-y)) calc(20 * var(--u) - var(--tap-x));
	border: 0;
	background: transparent;
	box-sizing: content-box;
	color: var(--c-navy);
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	-webkit-tap-highlight-color: transparent;
}

.header__menu-line {
	position: absolute;
	left: var(--tap-x);
	width: calc(40 * var(--u));
	height: calc(2 * var(--u));
	background: currentColor;
}

.header__menu-line:nth-child(1) { top: var(--tap-y); }
.header__menu-line:nth-child(2) { bottom: var(--tap-y); }

.header__menu-btn[aria-expanded="true"] .header__menu-line:nth-child(1) { top: 50%; transform: translateY(-50%) rotate(45deg); }
.header__menu-btn[aria-expanded="true"] .header__menu-line:nth-child(2) { top: 50%; bottom: auto; transform: translateY(-50%) rotate(-45deg); }

.header__nav-list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.header__nav-item + .header__nav-item { border-left: calc(1 * var(--u)) solid var(--c-border); }

.header__nav-link {
	display: block;
	height: calc(90 * var(--u));
	padding-top: calc(17 * var(--u));
	border-bottom: calc(1 * var(--u)) solid var(--c-border);
	text-align: center;
	white-space: nowrap;
}

.header__nav-item.is-active .header__nav-link { border-bottom: calc(5 * var(--u)) solid var(--c-accent); }

.header__nav-en {
	display: block;
	padding-left: calc(2 * var(--u));
	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));
	color: var(--c-navy);
}

.header__nav-ja {
	display: block;
	margin-top: calc(3 * var(--u));
	padding-left: calc(2.8 * var(--u));
	font-size: calc(14 * var(--u));
	line-height: calc(20 * var(--u));
	letter-spacing: calc(2.8 * var(--u));
	color: var(--c-text);
	font-feature-settings: "halt" 1;
}

.header__drawer {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	background: #fff;
	border-bottom: calc(1 * var(--u)) solid var(--c-border);
	box-shadow: 0 calc(10 * var(--u)) calc(26 * var(--u)) rgba(54, 86, 157, 0.12);
}

.header__drawer[hidden] { display: none; }

.header__drawer-list li + li { border-top: calc(1 * var(--u)) solid var(--c-border); }

.header__drawer-link {
	display: block;
	min-height: 44px;
	padding: calc(22 * var(--u)) calc(40 * var(--u)) calc(22 * var(--u)) calc(37 * var(--u));
	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;
}

/* ==========================================================================
   緊急・重要なお知らせ（ヘッダー直下・全ページ共通。内容は js/news.js、描画は js/main.js initNews）
   ========================================================================== */
.news {
	position: relative;
	z-index: 9;
	background: #fdeedd;
}

.news__inner {
	display: flex;
	align-items: flex-start;
	gap: calc(20 * var(--u));
	padding: calc(28 * var(--u)) calc(40 * var(--u));
	color: inherit;
}

a.news__inner:hover .news__text,
a.news__inner:focus-visible .news__text { text-decoration: underline; text-underline-offset: calc(5 * var(--u)); }

.news__label {
	flex: none;
	padding: calc(6 * var(--u)) calc(16 * var(--u)) calc(8 * var(--u));
	border-radius: calc(6 * var(--u));
	background: var(--c-navy);
	color: #fff;
	font-weight: 700;
	font-size: calc(22 * var(--u));
	line-height: calc(30 * var(--u));
	letter-spacing: calc(2 * var(--u));
	white-space: nowrap;
}

.news__text {
	flex: 1 1 auto;
	min-width: 0;
	font-weight: 500;
	font-size: calc(26 * var(--u));
	line-height: calc(44 * var(--u));
	letter-spacing: calc(1 * var(--u));
	color: var(--c-navy);
	font-feature-settings: "halt" 1;
}

/* ==========================================================================
   右下に浮かぶ「足立姫とは」（桜の花びら assets/img/floating.png・全ページ共通）
   ========================================================================== */
.float-petal {
	position: fixed;
	right: calc(14 * var(--u));
	bottom: calc(24 * var(--u));
	z-index: 50;
	display: flex;
	align-items: center;
	justify-content: center;
	width: calc(210 * var(--u));
	height: calc(158 * var(--u));
	filter: drop-shadow(0 calc(6 * var(--u)) calc(12 * var(--u)) rgba(196, 24, 127, 0.22));
	animation: petal-float 4.8s ease-in-out infinite;
	will-change: transform;
}

.float-petal__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.float-petal__label {
	position: relative;
	transform: translate(-6%, 2%); /* 花びらの面の中心（画像の左寄り）に合わせる */
	text-align: center;
	font-family: var(--f-gothic);
	font-weight: 700;
	font-size: calc(28 * var(--u));
	line-height: calc(36 * var(--u));
	letter-spacing: calc(2 * var(--u));
	padding-left: calc(2 * var(--u));
	color: var(--c-navy);
	text-shadow: 0 0 calc(8 * var(--u)) #fff, 0 0 calc(4 * var(--u)) #fff, 0 0 calc(2 * var(--u)) #fff; /* 花びらの上でも読めるように白くふち取る */
	white-space: nowrap;
	font-feature-settings: "halt" 1;
}

/* SP の EVENT ページ: FV の「開催スケジュールを見る」が画面にある間は隠す（js/main.js initFloatPetal） */
.float-petal { transition: opacity 0.4s ease, visibility 0.4s; }
.float-petal.is-away { opacity: 0; visibility: hidden; pointer-events: none; }

@keyframes petal-float {
	0%, 100% { transform: translate(0, 0) rotate(-5deg); }
	50% { transform: translate(calc(-8 * var(--u)), calc(-14 * var(--u))) rotate(5deg); }
}

@media (prefers-reduced-motion: reduce) {
	.float-petal { animation: none; }
}

/* イラストのコピーライト（表記は未支給のためプレースホルダー。支給後に全箇所を置き換える） */
.credit {
	font-family: var(--f-ja);
	font-size: calc(18 * var(--u));
	line-height: calc(26 * var(--u));
	letter-spacing: calc(1 * var(--u));
	color: var(--c-gray);
	text-align: right;
	white-space: nowrap;
}

/* ==========================================================================
   FV（高さ 1861u・下端は曲線マスク）
   ========================================================================== */
.fv {
	position: relative;
	z-index: 3;
	height: calc(1861 * var(--u));
}

.fv__base {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: calc(735 * var(--u));
	background: #c4fafc;
}

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

.fv__eyebrow {
	position: absolute;
	left: 0;
	right: 0;
	top: calc(40 * var(--u));
	text-align: center;
	font-family: var(--f-en);
	font-weight: 700;
	font-size: calc(24 * var(--u));
	line-height: calc(36 * var(--u));
	letter-spacing: calc(2 * var(--u));
	padding-left: calc(2 * var(--u));
	color: var(--c-navy);
	white-space: nowrap;
}

.fv__place {
	position: absolute;
	left: 0;
	right: 0;
	top: calc(86 * var(--u));
	text-align: center;
	font-family: var(--f-shippori);
	font-weight: 400;
	font-size: calc(32 * var(--u));
	line-height: calc(46 * var(--u));
	letter-spacing: calc(2.8 * var(--u));
	padding-left: calc(2.8 * var(--u));
	color: var(--c-navy);
	white-space: nowrap;
}

.fv__title {
	position: absolute;
	left: calc(54 * var(--u));
	top: calc(155 * var(--u));
	width: calc(642 * var(--u));
	height: calc(187 * var(--u));
}

.fv__title img { width: 100%; height: 100%; }

.fv__band {
	position: absolute;
	left: calc(84 * var(--u));
	top: calc(331 * var(--u));
	width: calc(582 * var(--u));
	height: calc(61 * var(--u));
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--c-mint);
	font-family: var(--f-gothic);
	font-weight: 700;
	font-size: calc(40 * var(--u));
	letter-spacing: calc(2.8 * var(--u));
	padding-left: calc(2.8 * var(--u));
	color: #fff;
	white-space: nowrap;
}

.fv__lead {
	position: absolute;
	left: 0;
	right: 0;
	top: calc(407 * var(--u));
	text-align: center;
	font-size: calc(28 * var(--u));
	line-height: calc(50 * var(--u));
	letter-spacing: calc(2.8 * var(--u));
	padding-left: calc(2.8 * var(--u));
	color: var(--c-text);
	white-space: nowrap;
}

/* 開催日 */
.fv__date {
	position: absolute;
	left: calc(132 * var(--u));
	top: calc(522 * var(--u));
	width: calc(486 * var(--u));
	height: calc(144 * var(--u));
}

.fv__date-line {
	position: absolute;
	left: 0;
	width: 100%;
	height: calc(1 * var(--u));
	background: linear-gradient(90deg, rgba(0, 113, 165, 0) 0%, #0071a5 51.44%, rgba(0, 113, 165, 0) 100%);
}

.fv__date-line--top { top: calc(15 * var(--u)); }
.fv__date-line--bottom { top: calc(136 * var(--u)); }

.fv__date-main {
	position: absolute;
	left: 0;
	top: 0;
	width: calc(378 * var(--u));
	height: calc(144 * var(--u));
	text-align: center;
	font-family: var(--f-en);
	font-weight: 700;
	font-size: calc(96 * var(--u));
	line-height: calc(144 * var(--u));
	letter-spacing: calc(2 * var(--u));
	padding-left: calc(2 * var(--u));
	color: var(--c-deep);
	white-space: nowrap;
}

.fv__date-year,
.fv__date-day { vertical-align: baseline; }

.fv__date-year { font-size: calc(64 * var(--u)); }
.fv__date-day { font-size: calc(96 * var(--u)); }

.fv__date-dow {
	position: absolute;
	left: calc(386 * var(--u));
	top: calc(75 * var(--u));
	width: calc(40 * var(--u));
	height: calc(40 * var(--u));
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--c-deep);
	color: #fff;
	font-weight: 700;
	font-size: calc(20 * var(--u));
	letter-spacing: calc(2 * var(--u));
	padding-left: calc(2 * var(--u));
}

.fv__date-from {
	position: absolute;
	left: calc(436 * var(--u));
	top: calc(82 * var(--u));
	font-weight: 700;
	font-size: calc(24 * var(--u));
	line-height: calc(29 * var(--u));
	letter-spacing: calc(2 * var(--u));
	color: var(--c-deep);
	white-space: nowrap;
}

.fv__sakura { position: absolute; overflow: hidden; pointer-events: none; }
.fv__sakura img { position: absolute; max-width: none; }
.fv__sakura--left { left: calc(15 * var(--u)); top: calc(641 * var(--u)); width: calc(189 * var(--u)); height: calc(249 * var(--u)); }
.fv__sakura--left img { left: -241.02%; top: -179.99%; width: 705.46%; height: 401.6%; }
.fv__sakura--right { left: calc(537 * var(--u)); top: calc(683 * var(--u)); width: calc(125 * var(--u)); height: calc(165 * var(--u)); }
.fv__sakura--right img { left: -491.01%; top: -251.51%; width: 771.43%; height: 439.16%; }

.fv__credit {
	position: absolute;
	right: calc(30 * var(--u));
	top: calc(1352 * var(--u)); /* イラストの足元・コミックス告知カードの直上 */
	text-shadow: 0 0 calc(6 * var(--u)) #fff, 0 0 calc(3 * var(--u)) #fff;
}

/* コミックス告知カード（吹き出し）: 左にロゴ・コピー、右に表紙 2 点（上巻・下巻）、下に書名（2026-11-12 クライアント指示で表紙を追加） */
.fv__comic {
	position: absolute;
	left: calc(40 * var(--u));
	top: calc(1381 * var(--u));
	width: calc(670 * var(--u));
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas: "text covers";
	align-items: center;
	column-gap: calc(16 * var(--u));
	row-gap: calc(14 * var(--u));
	padding: calc(30 * var(--u)) calc(40 * var(--u)) calc(24 * var(--u)) calc(28 * var(--u));
	background: rgba(255, 255, 255, 0.96);
	border: calc(1 * var(--u)) solid #f7d4e5;
	border-radius: calc(100 * var(--u)) calc(100 * var(--u)) calc(100 * var(--u)) calc(10 * var(--u));
	box-shadow: 0 calc(10 * var(--u)) calc(26 * var(--u)) rgba(240, 51, 163, 0.14);
}

.fv__comic-text {
	grid-area: text;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: calc(8 * var(--u));
	min-width: 0;
}

.fv__comic-logo {
	position: relative;
	width: calc(340 * var(--u));  /* ロゴの比率 335:94 は維持 */
	height: calc(95.5 * var(--u));
	overflow: hidden;
	flex: none;
}

.fv__comic-logo img {
	position: absolute;
	left: 0;
	top: -13.78%;
	width: 100%;
	height: 130.63%;
}

.fv__comic-copy {
	text-align: center;
	font-weight: 700;
	font-size: calc(24 * var(--u));
	line-height: calc(40 * var(--u));
	color: var(--c-navy);
	white-space: nowrap;
	font-feature-settings: "halt" 1;
}

.fv__comic-covers {
	grid-area: covers;
	display: flex;
	gap: calc(10 * var(--u));
}

.fv__comic-cover {
	display: block;
	width: calc(116 * var(--u));
	height: calc(166 * var(--u));
	object-fit: cover;
	border-radius: calc(4 * var(--u));
	box-shadow: 0 calc(8 * var(--u)) calc(18 * var(--u)) rgba(35, 40, 80, 0.28); /* STORY の表紙と同じ角丸・影 */
}

/* 表紙のコピーライト（プレースホルダー）: カードの右下の外 */
.fv__comic-credit {
	position: absolute;
	right: calc(205 * var(--u));
	top: calc(1680 * var(--u));
}

.fv__comic-credit-pc { display: none; } /* PC 用の表記（FV のイラスト分を兼ねる。css/pc.css で切り替え） */

.fv__petals { display: none; } /* SP のみ（下の SP の FV） */

/* オンラインショップへのボタン・リンク（ヘッダーの「ショップ」、CRAFT の「オンラインで買う」「この作品をショップで見る」「オンラインショップへ」）は
   2026-11-12 クライアント指示で一旦すべて非表示。復活するときはこのルールを消す（HTML 側は data-shop のまま） */
[data-shop] { display: none !important; }

.fv__cta {
	left: calc(99 * var(--u));
	top: calc(1718 * var(--u));
	width: calc(550 * var(--u));
	height: calc(110 * var(--u));
}

.fv__cta .btn__arrow { left: calc(481 * var(--u)); }

/* ==========================================================================
   ステートメント（1923〜2577u、FV の曲線と 118u 重なる）
   ========================================================================== */
.statement {
	position: relative;
	z-index: 1;
	height: calc(654 * var(--u));
	margin-top: calc(-118 * var(--u));
}


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

.statement__eyebrow,
.statement__title,
.statement__text {
	position: absolute;
	left: 0;
	right: 0;
	text-align: center;
	white-space: nowrap;
}

.statement__eyebrow {
	top: calc(185 * var(--u));
	font-family: var(--f-gothic);
	font-weight: 700;
	font-size: calc(24 * var(--u));
	line-height: calc(36 * var(--u));
	letter-spacing: calc(2.8 * var(--u));
	padding-left: calc(2.8 * var(--u));
	color: var(--c-accent);
}

.statement__title {
	top: calc(241 * var(--u));
	font-family: var(--f-gothic);
	font-weight: 700;
	font-size: calc(40 * var(--u));
	line-height: calc(60 * var(--u));
	letter-spacing: calc(16 * var(--u));
	padding-left: calc(16 * var(--u));
	color: var(--c-navy);
}

.statement__text {
	top: calc(321 * var(--u));
	font-size: calc(28 * var(--u));
	line-height: calc(50 * var(--u));
	letter-spacing: calc(2.8 * var(--u));
	padding-left: calc(2.8 * var(--u));
	color: var(--c-text);
}

.statement__cta {
	left: calc(205 * var(--u));
	top: calc(462 * var(--u));
	width: calc(341 * var(--u));
	height: calc(70 * var(--u));
}

.statement__cta .btn__arrow { left: calc(303 * var(--u)); }

/* ==========================================================================
   開催スケジュール（Figma 2577〜4560u・高さ 1983u）
   カードは当初 Figma 座標の絶対配置（249u / 1589u）だったが、申し込みボタンの追加で
   高さが変わるため、フロー配置に変更（padding で Figma と同じ位置に合わせている）
   ========================================================================== */
.schedule {
	position: relative;
	z-index: 0;
	padding-top: calc(249 * var(--u));
	padding-bottom: calc(46 * var(--u)); /* Figma: 関連企画カード下端 1937u → セクション下端 1983u */
}

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

.schedule__script { left: calc(37 * var(--u)); top: calc(38 * var(--u)); } /* 文字左端 41u（Figma 5u + 余白 36u）。top は Figma の画像枠と同じ（ベースライン 139u） */
.schedule__title { top: calc(179 * var(--u)); } /* 筆記体の画像の下端（175u）より下に（2026-11-12 重なり解消） */

.card {
	position: absolute;
	left: calc(40 * var(--u));
	width: calc(670 * var(--u));
	padding: calc(40 * var(--u));
	background: #fff;
	border-radius: calc(30 * var(--u));
}

.schedule__card { position: relative; left: auto; margin-left: calc(40 * var(--u)); }
.schedule__card--related { margin-top: calc(30 * var(--u)); } /* Figma: 関連企画カード上端 1589u（申し込みボタン追加前のメインカード下端 1559u + 30u） */

/* 各イベント（2026-11-12 クライアント指示で項目を統一）:
   ① 開催日 ② イベント名 ③ 見どころ（左に写真・ピクトグラム）④〜⑦ 開催時間・会場・料金・申込方法（dl）⑧ ボタン */
.event {
	position: relative;
	display: grid;
	grid-template-columns: calc(200 * var(--u)) minmax(0, 1fr);
	grid-template-areas:
		"head head"
		"media catch"
		"info info"
		"actions actions";
	column-gap: calc(26 * var(--u));
	align-items: start;
	padding-top: calc(13 * var(--u));
}

.event + .event {
	margin-top: calc(48 * var(--u));
	padding-top: calc(60 * var(--u)); /* 48u + 13u − 罫線 1u */
	border-top: calc(1 * var(--u)) solid var(--c-line);
}

.event__head {
	grid-area: head;
	position: relative;
	margin-bottom: calc(24 * var(--u));
}

.event__date {
	font-family: var(--f-en);
	font-weight: 700;
	font-size: calc(22 * var(--u));
	line-height: calc(33 * var(--u));
	letter-spacing: calc(2 * var(--u));
	color: var(--c-accent);
	white-space: nowrap;
}

.event__name {
	margin-top: calc(10 * 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);
}

/* 写真・ピクトグラム（4:5 の枠。写真は枠いっぱい、ピクトグラムは中央） */
.event__media {
	grid-area: media;
	position: relative;
	margin: 0;
}

.event__media > img,
.event__media > svg,
.event__media > .placeholder-note {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	border-radius: calc(10 * var(--u));
}

.event__media > img {
	height: auto;
	object-fit: cover;
	object-position: center top;
	box-shadow: 0 calc(6 * var(--u)) calc(16 * var(--u)) rgba(54, 86, 157, 0.16);
}

.event__media > svg,
.event__media > .placeholder-note {
	background: linear-gradient(160deg, #eaf8f9 0%, #fbeef5 100%); /* グッズ枠（.goods）と同じ */
}

.event__media > svg { padding: calc(40 * var(--u)) calc(20 * var(--u)); }

.event__media > .placeholder-note {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: calc(18 * var(--u));
	line-height: calc(28 * var(--u));
}

.event__credit { margin-top: calc(6 * var(--u)); font-size: calc(16 * var(--u)); white-space: normal; } /* 「©Hinase Momoyama/SQUARE ENIX」は写真の列に収まらないとき「/」の後で折り返す（<wbr>） */

/* 見どころ */
.event__catch {
	grid-area: catch;
	font-size: calc(24 * var(--u));
	line-height: calc(42 * var(--u));
	letter-spacing: calc(1.6 * var(--u));
	color: var(--c-text);
}

.event__lead {
	margin-bottom: calc(6 * var(--u));
	font-size: calc(22 * var(--u));
	letter-spacing: calc(0.6 * var(--u));
	font-family: var(--f-gothic);
	font-weight: 700;
	color: var(--c-accent);
}

.event__cast {
	margin-top: calc(12 * var(--u));
	font-size: calc(22 * var(--u));
	line-height: calc(36 * var(--u));
	color: var(--c-navy);
}

/* 開催時間・会場・料金・申込方法: 見出しはミントの帯（Figma の会場の帯と同じ色） */
.event__info {
	grid-area: info;
	margin-top: calc(28 * var(--u));
	border-top: calc(1 * var(--u)) solid var(--c-line);
}

.event__info > div {
	display: grid;
	grid-template-columns: calc(150 * var(--u)) minmax(0, 1fr);
	column-gap: calc(20 * var(--u));
	align-items: start;
	padding: calc(14 * var(--u)) 0;
	border-bottom: calc(1 * var(--u)) solid var(--c-line);
}

.event__info dt {
	padding: calc(3 * var(--u)) 0;
	border-radius: calc(4 * var(--u));
	background: var(--c-mint);
	text-align: center;
	font-weight: 500;
	font-size: calc(20 * var(--u));
	line-height: calc(32 * var(--u));
	letter-spacing: calc(1.6 * var(--u));
	color: #fff;
	white-space: nowrap;
}

.event__info dd {
	font-size: calc(24 * var(--u));
	line-height: calc(38 * var(--u));
	letter-spacing: calc(1.6 * var(--u));
	color: var(--c-text);
}

.event__nowrap { white-space: nowrap; }

.event__small {
	font-size: calc(20 * var(--u));
	line-height: calc(32 * var(--u));
	color: var(--c-gray);
}

/* ボタン */
.event__actions {
	grid-area: actions;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: calc(16 * var(--u));
	margin-top: calc(28 * var(--u));
}

.event__apply {
	position: relative;
	display: block;
	width: calc(400 * var(--u));
	height: calc(70 * var(--u));
}

.event__apply .btn__label {
	--shift: calc(-12 * var(--u));
	font-size: calc(26 * var(--u));
}

.event__apply .btn__arrow {
	left: calc(342 * var(--u));
	top: calc(31 * var(--u));
	width: calc(17 * var(--u));
	height: calc(8 * var(--u));
}

.event__apply .btn__arrow--ext {
	top: calc(27 * var(--u));
	width: calc(16 * var(--u));
	height: calc(16 * var(--u));
}

/* 写真が横長のグッズ（扇子）は枠に収める（グッズ枠と同じ背景） */
.event__media--goods > img {
	object-fit: contain;
	object-position: center; /* 枠の上下中央に */
	padding: calc(14 * var(--u));
	background: linear-gradient(160deg, #eaf8f9 0%, #fbeef5 100%);
	box-shadow: none;
}

/* 列車: チラシ 2 点（タップで拡大。SP は名称の下に横 2 枚・その下に見どころ、PC は左列に縦 2 枚 → css/pc.css） */
.event--flyers {
	grid-template-areas:
		"head head"
		"media media"
		"catch catch"
		"info info"
		"actions actions";
}

.event__flyers {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: calc(20 * var(--u));
	margin-bottom: calc(24 * var(--u));
}

.event__flyers > .event__credit { grid-column: 1 / -1; margin-top: calc(-14 * var(--u)); } /* 行間 20u − 6u */

.event__flyer {
	position: relative;
	display: block;
	border-radius: calc(6 * var(--u));
	overflow: hidden;
	box-shadow: 0 calc(6 * var(--u)) calc(16 * var(--u)) rgba(54, 86, 157, 0.16);
	cursor: zoom-in;
}

.event__flyer img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 600 / 848;
}

/* 拡大できることを示す虫めがね（右下） */
.event__flyer-zoom {
	position: absolute;
	right: calc(10 * var(--u));
	bottom: calc(10 * var(--u));
	box-sizing: content-box;
	width: calc(24 * var(--u));
	height: calc(24 * var(--u));
	padding: calc(10 * var(--u));
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.92);
	color: var(--c-navy);
	box-shadow: 0 calc(2 * var(--u)) calc(6 * var(--u)) rgba(54, 86, 157, 0.2);
}

/* 押せないボタン（グレーアウト）: 予約開始前の申し込み（js/main.js initReserve が予約開始時刻に有効化）・STORY の謎解き（発売前）など */
.btn.is-disabled {
	background: #dfe2e7;
	box-shadow: none;
	color: #5f6672; /* グレーアウトでも文言（「12月5日〜販売」など）が読めるコントラスト */
	cursor: not-allowed;
}

.event__note {
	font-weight: 700;
	font-size: calc(22 * var(--u));
	line-height: calc(32 * var(--u));
	letter-spacing: calc(1.6 * var(--u));
	color: var(--c-pink);
}

.event__note[hidden] { display: none; }

/* 関連企画カード */
.event--related { padding-top: 0; }

.event__tag {
	width: calc(150 * var(--u));
	height: calc(50 * var(--u));
	margin-bottom: calc(24 * var(--u));
	border-radius: calc(25 * var(--u));
	background: var(--c-pink);
	text-align: center;
	font-family: var(--f-en);
	font-weight: 700;
	font-size: calc(22 * var(--u));
	line-height: calc(50 * var(--u));
	letter-spacing: calc(2 * var(--u));
	padding-left: calc(2 * var(--u));
	color: #fff;
}

.event--related .event__name { margin-top: calc(11 * var(--u)); }

/* ==========================================================================
   手仕事（4560〜5958u）
   ========================================================================== */
.craft {
	position: relative;
	z-index: 1;
	height: calc((1398 + 50 - 60 + 40) * var(--u)); /* 「営業時間内常設」の 1 行（+50u）、作品の一言紹介を削除（−60u）、作品名 2 行分（+40u。2026-11-12） */
}

.craft__wave { display: none; } /* PC のみ表示（css/pc.css） */

.craft__script { left: calc(32 * var(--u)); top: calc(60 * var(--u)); } /* 文字左端 36u。Figma の top 91u から 31u 上げ、見出しを画像の下端（206u）より下に（2026-11-12 重なり解消） */
.craft__title { top: calc(210 * var(--u)); }

.craft__scroller {
	position: absolute;
	left: 0;
	top: calc(346 * var(--u));
	width: 100%;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-padding-left: calc(40 * var(--u));
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.craft__scroller::-webkit-scrollbar { display: none; }

.craft__list {
	display: flex;
	gap: calc(20 * var(--u));
	width: max-content;
	padding: 0 calc(40 * var(--u));
}

.work {
	flex: none;
	width: calc(440 * var(--u));
	scroll-snap-align: start;
}

.work__img {
	width: calc(440 * var(--u));
	height: calc(440 * var(--u));
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: calc(14 * var(--u));
	background: linear-gradient(160deg, #eaf8f9 0%, #fbeef5 100%);
}

.work__name {
	margin-top: calc(20 * var(--u));
	width: auto;
	word-break: keep-all; /* 作品名は「名称　作り手」の区切り（<wbr>）でだけ折り返す（2026-11-12 名称変更で 2 行になるものがあるため） */
	overflow-wrap: anywhere;
	font-weight: 500;
	font-size: calc(28 * var(--u));
	line-height: calc(40 * var(--u));
	letter-spacing: calc(2.8 * var(--u));
	color: var(--c-navy);
}

.work__desc {
	margin-top: calc(10 * var(--u));
	width: calc(336 * var(--u));
	font-size: calc(26 * var(--u));
	line-height: calc(50 * var(--u));
	letter-spacing: calc(2.8 * var(--u));
	color: var(--c-gray);
}

.craft__progress {
	position: absolute;
	left: calc(40 * var(--u));
	top: calc((946 - 60 + 40) * var(--u)); /* 作品名（2 行）の下 40u（一言紹介の削除で −60u、作品名 2 行で +40u） */
	width: calc(670 * var(--u));
	height: calc(5 * var(--u));
	background: #f3f3f3;
	overflow: hidden;
}

.craft__progress-bar {
	position: absolute;
	left: 0;
	top: 0;
	width: calc(170 * var(--u));
	height: 100%;
	background: var(--c-accent);
	transform: translateX(0);
}

.craft__info {
	position: absolute;
	left: calc(40 * var(--u));
	top: calc((1031 - 60 + 40) * var(--u));
	width: calc(670 * var(--u));
	height: calc((157 + 50) * var(--u));
	background: #fff8fc;
	border: calc(1 * var(--u)) solid #f8cad4;
	border-radius: calc(10 * var(--u));
}

.craft__info-venue {
	position: absolute;
	left: calc(29 * var(--u));
	top: calc(29 * var(--u));
	font-size: calc(26 * var(--u));
	line-height: calc(50 * var(--u));
	letter-spacing: calc(2.8 * var(--u));
	color: var(--c-text);
	white-space: nowrap;
}

.craft__info-note {
	position: absolute;
	left: calc(29 * var(--u));
	top: calc(79 * var(--u));
	font-size: calc(26 * var(--u));
	line-height: calc(50 * var(--u));
	letter-spacing: calc(2.8 * var(--u));
	color: var(--c-text);
	white-space: nowrap;
}

.craft__info-date {
	position: absolute;
	left: calc(29 * var(--u));
	top: calc((85 + 50) * var(--u));
	font-family: var(--f-en);
	font-weight: 700;
	font-size: calc(28 * var(--u));
	line-height: calc(42 * var(--u));
	letter-spacing: calc(2 * var(--u));
	color: var(--c-accent);
	white-space: nowrap;
}

.craft__cta {
	--shift: calc(-15 * var(--u));
	left: calc(191 * var(--u));
	top: calc((1228 + 50 - 60 + 40) * var(--u));
	width: calc(370 * var(--u));
	height: calc(70 * var(--u));
}

.craft__cta .btn__arrow { left: calc(328 * var(--u)); }

/* ==========================================================================
   最新情報（5958〜6658u）
   ========================================================================== */
.topics {
	position: relative;
	z-index: 1;
	height: calc((700 + 128) * var(--u)); /* 見出しを筆記体の下に下げたぶん +108u、Instagram（SnapWidget 約 230u）の下の余白 +20u（2026-11-12） */
}

.topics__bg {
	position: absolute;
	left: 0;
	top: calc(8 * var(--u));
	width: 100%;
	height: calc((692 + 128) * var(--u));
	background: linear-gradient(180deg, rgba(255, 255, 255, 0) 2.82%, #bce8ea 100%);
}

.topics__script { left: calc(35 * var(--u)); top: calc(8 * var(--u)); } /* 文字左端 39u。top は Figma と同じ */
.topics__title { top: calc(180 * var(--u)); } /* 筆記体の画像の下端（176u）より下に。以下の要素も +108u（2026-11-12 重なり解消） */

.topics__text {
	position: absolute;
	left: calc(40 * var(--u));
	top: calc((140 + 108) * var(--u));
	width: calc(670 * var(--u));
	text-align: center;
	font-size: calc(28 * var(--u));
	line-height: calc(50 * var(--u));
	letter-spacing: calc(2.8 * var(--u));
	padding-left: calc(2.8 * var(--u));
	color: var(--c-text);
	white-space: nowrap;
}

.topics__grid {
	position: absolute;
	left: calc(40 * var(--u));
	top: calc((280 + 108) * var(--u));
	width: calc(670 * var(--u));
	display: flex;
	justify-content: center;
	gap: calc(15 * var(--u));
}

/* SnapWidget（公式 Instagram の最新投稿 3 件。iframe は 780:260） */
.topics__widget { display: block; }
.topics__widget iframe { display: block; }

.topics__cta {
	left: calc(95 * var(--u));
	top: calc((530 + 128) * var(--u));
	width: calc(558 * var(--u));
	height: calc(70 * var(--u));
}

.topics__cta .btn__arrow { left: calc(510 * var(--u)); }

/* ==========================================================================
   フッター（6658〜8494u）
   ========================================================================== */
.footer {
	position: relative;
	z-index: 1;
	height: calc(1836 * var(--u));
	background: var(--c-navy);
	color: #fff;
}

.footer__waves {
	position: absolute;
	left: calc(317 * var(--u));
	top: calc(40 * var(--u));
	width: calc(650.26 * var(--u)); /* 右側はページ枠（.lp の overflow:hidden）で切れる＝Figma と同じ */
	height: calc(463 * var(--u));
	pointer-events: none;
}

.footer__eyebrow {
	position: absolute;
	left: calc(40 * var(--u));
	top: calc(102 * var(--u));
	font-family: var(--f-en);
	font-weight: 700;
	font-size: calc(22 * var(--u));
	line-height: calc(33 * var(--u));
	letter-spacing: calc(2 * var(--u));
	white-space: nowrap;
}

.footer__logo {
	position: absolute;
	left: calc(27 * var(--u));
	top: calc(175 * var(--u));
	width: calc(415 * var(--u));
	height: calc(121 * var(--u));
}

.footer__logo img { width: 100%; height: 100%; }

.footer__nav {
	position: absolute;
	left: calc(40 * var(--u));
	top: calc(356 * var(--u));
	width: calc(670 * var(--u));
}

.footer__nav-list li {
	padding-bottom: calc(30 * var(--u));
	border-bottom: calc(1 * var(--u)) solid #fff;
}

.footer__nav-list li + li { padding-top: calc(29 * var(--u)); }

.footer__nav a {
	display: block;
	font-size: calc(28 * var(--u));
	line-height: calc(50 * var(--u));
	letter-spacing: calc(2.8 * var(--u));
	color: #fff;
	white-space: nowrap;
}

.footer__credits {
	position: absolute;
	left: calc(40 * var(--u));
	top: calc(1046 * var(--u));
	width: calc(515 * var(--u));
	font-size: calc(22 * var(--u));
	line-height: calc(50 * var(--u));
	letter-spacing: calc(2.8 * var(--u));
	white-space: nowrap;
}

.footer__credits div { display: flex; }
.footer__credits dt { color: rgba(255, 255, 255, 0.7); }
.footer__credits dd { color: #fff; }

.footer__contact {
	position: absolute;
	left: calc(40 * var(--u));
	top: calc(1286 * var(--u));
	width: calc(515 * var(--u));
	font-size: calc(22 * var(--u));
	letter-spacing: calc(2.8 * var(--u));
	white-space: nowrap;
}

.footer__contact-label {
	line-height: calc(50 * var(--u));
	color: rgba(255, 255, 255, 0.7);
}

.footer__contact-body {
	font-style: normal;
	line-height: calc(40 * var(--u));
	color: #fff;
}

.footer__rule {
	position: absolute;
	left: calc(40 * var(--u));
	top: calc(1536 * var(--u));
	width: calc(670 * var(--u));
	height: calc(1 * var(--u));
	margin: 0;
	border: 0;
	background: rgba(255, 255, 255, 0.4);
}

.footer__copyright {
	position: absolute;
	left: calc(38 * var(--u));
	top: calc(1576 * var(--u));
	font-size: calc(22 * var(--u));
	line-height: calc(50 * var(--u));
	letter-spacing: calc(2.8 * var(--u));
	color: rgba(255, 255, 255, 0.7);
	white-space: nowrap;
}

.footer__totop {
	left: calc(38 * var(--u));
	top: calc(1646 * var(--u));
	width: calc(330 * var(--u));
	height: calc(70 * var(--u));
}


/* ==========================================================================
   英語表示（Google 翻訳ウィジェット。js/main.js initLang）
   Google が差し込むバナー・ツールチップ・ハイライトを消し、ページのレイアウトを動かさない
   ========================================================================== */
#google_translate_element,
.goog-te-banner-frame,
iframe.skiptranslate,
body > .skiptranslate,
#goog-gt-tt,
.goog-te-balloon-frame,
.VIpgJd-ZVi9od-ORHb-OEVmcd,
.VIpgJd-yAWNEb-L7lbkb { display: none !important; }

body { top: 0 !important; }

.goog-text-highlight,
.VIpgJd-yAWNEb-VIpgJd-fmcmS-sn54Q {
	background: none !important;
	box-shadow: none !important;
}

/* --------------------------------------------------------------------------
   SP の FV（〜1023px。2026-11-12 クライアント指示で組み替え）
   上から 英字・東京・北千住・ロゴ → KV（足立姫のイラスト hime.jpg）→ 帯・リード・日付 →「開催スケジュールを見る」。
   最初の画面（100svh）にボタンまで収まるよう、KV の高さ --kv-h を画面の高さから逆算して伸び縮みさせる
   （ヘッダー＋お知らせ欄の高さ --fv-top は js/main.js が実測）。ボタンの下にコミックス告知カード。
   KV 以降の要素はすべて KV の下端 --kv-b からの位置。文言・ロゴは Figma より小さい（クライアント指示 2026-11-11）
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
	.fv {
		--kv-top: calc(228 * var(--u));
		/* 633u = KV の上（228u）＋ KV の下からボタン下端＋余白まで（405u。KV 直下にコピーライトの 1 行 30u を含む） */
		--kv-h: clamp(calc(320 * var(--u)), calc(100vh - var(--fv-top, calc(280 * var(--u))) - 633 * var(--u)), calc(760 * var(--u)));
		--kv-b: calc(var(--kv-top) + var(--kv-h));
		height: calc(var(--kv-b) + 764 * var(--u));
	}

	@supports (height: 100svh) {
		.fv { --kv-h: clamp(calc(320 * var(--u)), calc(100svh - var(--fv-top, calc(280 * var(--u))) - 633 * var(--u)), calc(760 * var(--u))); }
	}

	/* 背景: 水色 → ボタンの下で生成り（ステートメントの背景色）→ 下端（ステートメントと重なる 118u）は透明へぼかして背景画像になじませる */
	.fv__base {
		height: 100%;
		background: linear-gradient(180deg, #c4fafc 0, #c4fafc calc(var(--kv-b) + 330 * var(--u)), #fdfaf4 calc(var(--kv-b) + 630 * var(--u)), rgba(253, 250, 244, 0) 100%);
	}

	.fv__petals {
		display: block;
		position: absolute;
		left: 0;
		z-index: 1;
		width: calc(750 * var(--u));
		height: calc(628 * var(--u));
		pointer-events: none;
	}

	.fv__petals--top { top: 0; }

	.fv__petals--low {
		top: calc(var(--kv-b) - 120 * var(--u));
		transform: scaleX(-1);
		-webkit-mask-image: linear-gradient(180deg, transparent 0, #000 20%, #000 80%, transparent 100%);
		mask-image: linear-gradient(180deg, transparent 0, #000 20%, #000 80%, transparent 100%);
	}

	/* KV: 幅いっぱい・上寄せでトリミングし、上下の端を背景の水色へぼかす */
	.fv__art {
		top: var(--kv-top);
		z-index: 2;
		height: var(--kv-h);
		object-fit: cover;
		object-position: 50% 0;
		-webkit-mask-image: linear-gradient(180deg, transparent 0, #000 calc(28 * var(--u)), #000 calc(100% - 96 * var(--u)), transparent 100%);
		mask-image: linear-gradient(180deg, transparent 0, #000 calc(28 * var(--u)), #000 calc(100% - 96 * var(--u)), transparent 100%);
	}

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

	.fv__eyebrow { top: calc(24 * var(--u)); font-size: calc(20 * var(--u)); line-height: calc(28 * var(--u)); }
	.fv__place { top: calc(56 * var(--u)); font-size: calc(24 * var(--u)); line-height: calc(34 * var(--u)); }
	.fv__title { left: calc(145 * var(--u)); top: calc(98 * var(--u)); width: calc(460 * var(--u)); height: calc(134 * var(--u)); }
	.fv__band { left: calc(155 * var(--u)); top: calc(var(--kv-b) + 40 * var(--u)); width: calc(440 * var(--u)); height: calc(48 * var(--u)); font-size: calc(30 * var(--u)); }
	.fv__lead { top: calc(var(--kv-b) + 100 * var(--u)); font-size: calc(22 * var(--u)); line-height: calc(34 * var(--u)); }
	.fv__date { top: calc(var(--kv-b) + 174 * var(--u)); transform: scale(0.66); transform-origin: 50% 0; } /* 486×144u → 321×95u（中心は 375u のまま） */
	.fv__cta { top: calc(var(--kv-b) + 281 * var(--u)); }

	.fv__credit { right: calc(205 * var(--u)); top: calc(var(--kv-b) + 6 * var(--u)); } /* イラストに掛からないよう KV の下（2026-11-12） */

	/* 桜の写真（ぼけた花びら）: 帯・リード・日付の左右に */
	.fv .fv__sakura { z-index: 1; }
	.fv .fv__sakura--left { left: calc(-70 * var(--u)); top: calc(var(--kv-b) + 60 * var(--u)); }
	.fv .fv__sakura--right { left: calc(640 * var(--u)); top: calc(var(--kv-b) + 170 * var(--u)); }

	.fv__comic { top: calc(var(--kv-b) + 447 * var(--u)); }
	.fv__comic-credit { top: calc(var(--kv-b) + 694 * var(--u)); } /* カード（高さ約 240u）の下 +7u */
}

/* セクション見出し: 手書き英字（画像）に掛かる部分は見出しの文字が上に来るように */
.section-title, .s-title { z-index: 2; }
.s-title { position: relative; }
.section-script, .s-script { z-index: 1; }
.s-script { position: relative; }

/* --------------------------------------------------------------------------
   英語表示時のレイアウト調整（Google 翻訳は訳し終えると <html> に .translated-ltr を付ける）
   日本語用の広い字間・1 行固定（nowrap）・固定幅のままだと英文がはみ出すため、英語のときだけ緩める
   -------------------------------------------------------------------------- */
html.translated-ltr :is(
	.fv__band, .fv__lead, .fv__place, .fv__eyebrow,
	.statement__eyebrow, .statement__title, .statement__text,
	.section-title, .s-title, .s-sub, .s-body,
	.event__name, .event__date, .event__catch, .event__info dt, .event__info dd, .event__note,
	.work__name, .work__desc, .craft__info-venue, .craft__info-note, .craft__info-date,
	.fv__comic-copy,
	.topics__text, .footer__credits, .footer__contact, .footer__nav a,
	.float-petal__label, .news__text, .news__label, .header__nav-ja
) {
	letter-spacing: 0.01em;
	white-space: normal;
	overflow-wrap: anywhere;
}

/* ボタン: 文言が長いときはボタンの中で 2 行に折り返す（矢印の分を空ける） */
html.translated-ltr .btn { white-space: normal; }

html.translated-ltr .btn__label {
	width: calc(100% - 110 * var(--u));
	text-align: center;
	line-height: 1.15;
	letter-spacing: 0.01em;
	padding-left: 0;
}

/* FV の曜日バッジ: 機械翻訳させず（「土」が soil になる）、英語のときは data-en の表記にする */
html.translated-ltr .fv__date-dow-text { display: none; }
html.translated-ltr .fv__date-dow::after {
	content: attr(data-en);
	font-size: calc(14 * var(--u));
	letter-spacing: 0;
	margin-left: calc(-2 * var(--u));
}

/* ステートメントのボタン: 英文が長いので幅を広げる（矢印は右端から 38u） */
html.translated-ltr .statement__cta { width: calc(470 * var(--u)); }
html.translated-ltr .statement__cta .btn__arrow { left: calc(432 * var(--u)); }

/* 右下の花びら */
html.translated-ltr .float-petal__label {
	max-width: calc(150 * var(--u));
	font-size: calc(22 * var(--u));
	line-height: calc(26 * var(--u));
	padding-left: 0;
}

/* 作品展示の情報ボックス: 会場名が折り返すと日付と重なるので、中身をフローに */
html.translated-ltr .craft__info { height: auto; padding: calc(20 * var(--u)) calc(29 * var(--u)); }
html.translated-ltr .craft__info-venue,
html.translated-ltr .craft__info-note,
html.translated-ltr .craft__info-date { position: static; }
html.translated-ltr .craft__info-date { display: block; margin-top: calc(6 * var(--u)); }

/* スマホ〜タブレット（EVENT は Figma 座標の絶対配置）: 決まった枠に収まるよう、英文だけ小さめに組む */
@media (max-width: 1023px) {
	html.translated-ltr .fv__band {
		padding: 0 calc(16 * var(--u));
		font-size: calc(24 * var(--u));
		white-space: nowrap; /* 2 行になると下の文言に重なるので 1 行のまま小さく */
	}

	html.translated-ltr .statement__cta { left: calc(140 * var(--u)); }

	html.translated-ltr .fv__lead,
	html.translated-ltr .statement__eyebrow,
	html.translated-ltr .statement__title,
	html.translated-ltr .statement__text,
	html.translated-ltr .section-title {
		left: calc(40 * var(--u));
		right: calc(40 * var(--u));
		padding-left: 0;
	}

	html.translated-ltr .fv__lead { font-size: calc(22 * var(--u)); line-height: calc(34 * var(--u)); }
	html.translated-ltr .statement__title { letter-spacing: 0.06em; }
	html.translated-ltr .statement__text { font-size: calc(24 * var(--u)); line-height: calc(36 * var(--u)); }
	html.translated-ltr .section-title { font-size: calc(28 * var(--u)); line-height: calc(40 * var(--u)); letter-spacing: 0.02em; }
	html.translated-ltr .topics__text { font-size: calc(22 * var(--u)); line-height: calc(34 * var(--u)); }
	html.translated-ltr .footer__credits,
	html.translated-ltr .footer__contact { font-size: calc(20 * var(--u)); line-height: calc(32 * var(--u)); }
	html.translated-ltr .footer__credits dt { flex: none; }
}

/* ==========================================================================
   フェードイン（js/main.js initFade）
   <head> のインラインスクリプトが html に .fade-ready を付け（動きを減らす設定の人には付けない）、
   main.js が対象に .fade-item を付けて、画面に入ったら .is-inview でふわっと表示する。
   位置は transform ではなく translate プロパティで動かす（既存の transform と干渉しない）
   ========================================================================== */
.fade-ready:not(.fade-init) main,
.fade-ready:not(.fade-init) .footer { visibility: hidden; } /* 準備が終わるまでの一瞬のちらつき防止（3 秒で必ず解除） */

.fade-ready .fade-item {
	opacity: 0;
	translate: 0 28px;
	transition: opacity 0.9s ease, translate 0.9s cubic-bezier(0.22, 0.7, 0.24, 1);
	transition-delay: var(--fade-delay, 0s);
}

.fade-ready .fade-item.is-inview {
	opacity: 1;
	translate: none;
}

@media (prefers-reduced-motion: reduce) {
	.fade-ready .fade-item { opacity: 1; translate: none; transition: none; }
}

/* ==========================================================================
   画像の拡大表示（js/main.js initLightbox。[data-lightbox] のリンク＝列車のチラシ）
   画面に収めて表示し、画像のクリック・タップで拡大（スクロールで全体を見る）⇔ 全体表示を切り替える
   ========================================================================== */
html.is-lightbox { overflow: hidden; }

.lightbox {
	position: fixed;
	inset: 0;
	width: 100%;
	max-width: none;
	height: 100%;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: rgba(23, 33, 58, 0.88);
	color: #fff;
	overscroll-behavior: contain;
}

.lightbox::backdrop { background: transparent; }

.lightbox__scroller {
	width: 100%;
	height: 100%;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
}

.lightbox__stage {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-width: 100%;
	min-height: 100%;
	padding: 64px 16px 24px;
}

.lightbox__img {
	display: block;
	max-width: 100%;
	max-height: calc(100vh - 88px);
	max-height: calc(100dvh - 88px);
	width: auto;
	height: auto;
	background: #fff;
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
	cursor: zoom-in;
}

.lightbox.is-zoomed .lightbox__stage { align-items: flex-start; width: max-content; }
.lightbox.is-zoomed .lightbox__img { width: max(100vw - 32px, 1000px); max-width: none; max-height: none; cursor: zoom-out; }
.lightbox.is-zoomed .lightbox__hint { display: none; } /* 拡大中は画像に重なるので出さない */

.lightbox__close {
	position: fixed;
	top: 12px;
	right: 12px;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #fff;
	color: var(--c-navy);
	cursor: pointer;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.lightbox__hint {
	position: fixed;
	left: 16px;
	top: 22px;
	right: 72px;
	font-size: 13px;
	line-height: 1.5;
	letter-spacing: 0.06em;
	color: rgba(255, 255, 255, 0.85);
	pointer-events: none;
}