/* 自動生成ファイル。直接編集しない。編集は src/ 以下 → scripts/build-css.sh を実行 */

/* ===== 00-tokens.css ===== */
/* ============================================================
   00-tokens.css — デザイントークン
   出典: docs/06_DESIGN_SYSTEM.md §5.1〜5.4
   値を変更するときは docs/06 §6.1 の手続きに従う
   (コントラスト比を再計算し §5.1.2 の表を更新する)。
   ============================================================ */

:root {
	/* 背景 */
	--ff5-bg:          #0B0410;  /* ベース:深い紫黒 */
	--ff5-bg-elev:     #1A0B26;  /* 一段持ち上げた面(カード) */
	--ff5-bg-sunk:     #050208;  /* 沈んだ面(フッター) */

	/* テキスト */
	--ff5-text:        #F4F1EA;  /* 本文:クリーム */
	--ff5-text-muted:  #B5AFA3;  /* 補助テキスト */
	--ff5-text-invert: #0B0410;  /* 明るい面に乗せる文字 */

	/* ブランドカラー(purple / red は本文色に使わない。docs/06 §5.1.2) */
	--ff5-purple:      #A855F7;
	--ff5-pink:        #FF2D95;
	--ff5-cyan:        #22D3EE;
	--ff5-gold:        #E8B84B;
	--ff5-chrome:      #C9CED6;
	--ff5-red:         #E11D48;

	/* 機能色 */
	--ff5-line:        #2E1B3F;
	--ff5-focus:       #22D3EE;

	/* フォント(Webフォントはサブセット作成後に導入。それまではシステムフォント) */
	--ff5-font-base:    "Noto Sans JP", system-ui, sans-serif;
	--ff5-font-display: "Noto Sans JP", system-ui, sans-serif;
	--ff5-font-logo:    "Anton", "Noto Sans JP", sans-serif;
	--ff5-font-mono:    ui-monospace, SFMono-Regular, Menlo, monospace;

	/* タイプスケール(14px 未満は存在させない) */
	--ff5-fs-xs:   0.875rem;
	--ff5-fs-sm:   1rem;
	--ff5-fs-md:   1.125rem;
	--ff5-fs-lg:   1.5rem;
	--ff5-fs-xl:   2rem;
	--ff5-fs-2xl:  3rem;
	--ff5-fs-3xl:  clamp(3rem, 12vw, 7rem);

	--ff5-lh-tight: 1.2;
	--ff5-lh-base:  1.8;

	/* スペーシング・レイアウト */
	--ff5-space-1:  0.25rem;
	--ff5-space-2:  0.5rem;
	--ff5-space-3:  1rem;
	--ff5-space-4:  1.5rem;
	--ff5-space-5:  2rem;
	--ff5-space-6:  3rem;
	--ff5-space-7:  5rem;

	--ff5-container:      1200px;
	--ff5-container-text: 720px;
	--ff5-gutter:         var(--ff5-space-3);

	--ff5-radius-sm: 4px;
	--ff5-radius-md: 8px;
	--ff5-radius-lg: 16px;

	/* エフェクト(グローは装飾レイヤー専用。text-shadow は最大2重まで) */
	--ff5-glow-pink:   0 0 12px rgba(255, 45, 149, .7);
	--ff5-glow-cyan:   0 0 12px rgba(34, 211, 238, .7);
	--ff5-glow-purple: 0 0 12px rgba(168, 85, 247, .7);

	--ff5-shadow-card: 0 4px 16px rgba(0, 0, 0, .5);

	--ff5-border: 1px solid var(--ff5-line);

	/* モーション(docs/07 §4.2)。--ff5-ease-back は「勢い」の表現に積極的に使う */
	--ff5-dur-fast:  150ms;
	--ff5-dur-base:  300ms;
	--ff5-dur-slow:  600ms;
	--ff5-dur-scene: 900ms;

	--ff5-ease-out:  cubic-bezier(.16, 1, .3, 1);
	--ff5-ease-in:   cubic-bezier(.7, 0, .84, 0);
	--ff5-ease-back: cubic-bezier(.34, 1.56, .64, 1);
}

/* ブレークポイント(docs/06 §5.3)
   メディアクエリではカスタムプロパティを使えないため生値で書く。
   sm: 480px / md: 768px / lg: 1024px / xl: 1280px
   モバイルファースト。min-width のみ使う(max-width 混在禁止)。 */

/* ===== 01-reset.css ===== */
/* ============================================================
   01-reset.css — リセット
   ============================================================ */

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

* {
	margin: 0;
}

html {
	-webkit-text-size-adjust: 100%;
}

body {
	min-height: 100dvh;
}

img,
picture,
video,
canvas,
svg {
	display: block;
	max-width: 100%;
	height: auto;
}

input,
button,
textarea,
select {
	font: inherit;
}

button {
	background: none;
	border: none;
	padding: 0;
	color: inherit;
	cursor: pointer;
}

ul[class],
ol[class] {
	list-style: none;
	padding: 0;
}

h1,
h2,
h3,
h4,
p {
	overflow-wrap: break-word;
}

/* 全アニメーション停止(非交渉領域。docs/06 §7.4)
   !important の理由: OS設定によるモーション停止は
   個別コンポーネントのどんな指定よりも優先されなければならないため。 */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ===== 02-base.css ===== */
/* ============================================================
   02-base.css — html / body / 見出し / リンクの基本
   タイポグラフィ規定: docs/06 §5.2.3
   ============================================================ */

body {
	background: var(--ff5-bg);
	color: var(--ff5-text);
	font-family: var(--ff5-font-base);
	font-size: var(--ff5-fs-sm);
	line-height: var(--ff5-lh-base);
}

h1,
h2,
h3 {
	font-family: var(--ff5-font-display);
	line-height: var(--ff5-lh-tight);
	margin-block: var(--ff5-space-5) var(--ff5-space-3);
}

h1 {
	font-size: var(--ff5-fs-2xl);
	font-weight: 900;
}

h2 {
	font-size: var(--ff5-fs-xl);
	font-weight: 900;
}

h3 {
	font-size: var(--ff5-fs-lg);
	font-weight: 700;
}

p,
ul,
ol,
blockquote,
figure {
	margin-block: 0 var(--ff5-space-3);
}

small {
	/* 14px 未満を存在させない(非交渉) */
	font-size: var(--ff5-fs-xs);
}

a {
	color: var(--ff5-cyan);
}

a:hover {
	color: var(--ff5-pink);
}

/* フォーカスは常に可視(非交渉。docs/06 §7.4) */
:focus-visible {
	outline: 3px solid var(--ff5-focus);
	outline-offset: 2px;
}

::selection {
	background: var(--ff5-pink);
	color: var(--ff5-text-invert);
}

/* ===== 03-layout.css ===== */
/* ============================================================
   03-layout.css — コンテナ・グリッド
   ============================================================ */

.ff5-container {
	width: 100%;
	max-width: var(--ff5-container);
	margin-inline: auto;
	padding-inline: var(--ff5-gutter);
}

/* 本文(読み物)の最大幅 */
.ff5-container--text {
	max-width: var(--ff5-container-text);
}

.ff5-main {
	padding-block: var(--ff5-space-6);
}

/* 一覧グリッド(COMIC / LEGEND / GALLERY 共通の器) */
.ff5-grid {
	display: grid;
	gap: var(--ff5-space-4);
}

@media (min-width: 480px) {
	.ff5-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 768px) {
	.ff5-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* ===== 04-components.css ===== */
/* ============================================================
   04-components.css — コンポーネント
   定義: docs/06 §5.5(ここにないコンポーネントを勝手に増やさない)
   ============================================================ */

/* ---- ボタン(.ff5-btn)docs/06 §5.5.1 ---- */

.ff5-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--ff5-space-2);
	min-height: 44px;  /* タップ領域(非交渉) */
	min-width: 44px;
	padding: var(--ff5-space-3) var(--ff5-space-5);
	font-weight: 700;
	font-size: var(--ff5-fs-sm);
	border-radius: var(--ff5-radius-md);
	cursor: pointer;
	text-decoration: none;
}

.ff5-btn:focus-visible {
	outline: 3px solid var(--ff5-focus);
	outline-offset: 2px;
}

/* pink 背景 × invert 文字は 16px bold 以上で使用(docs/06 §5.1.3) */
.ff5-btn--primary {
	background: var(--ff5-pink);
	color: var(--ff5-text-invert);
}

.ff5-btn--primary:hover {
	color: var(--ff5-text-invert);
	box-shadow: var(--ff5-glow-pink);
}

.ff5-btn--ghost {
	background: transparent;
	border: 1px solid var(--ff5-text-muted);
	color: var(--ff5-text);
}

.ff5-btn--ghost:hover {
	color: var(--ff5-cyan);
	border-color: var(--ff5-cyan);
}

.ff5-btn--gold {
	background: var(--ff5-gold);
	color: var(--ff5-text-invert);
}

.ff5-btn--gold:hover {
	color: var(--ff5-text-invert);
}

/* 小さめボタン(カード内)。min-height 44px は維持(非交渉) */
.ff5-btn--sm {
	padding: var(--ff5-space-2) var(--ff5-space-4);
	font-size: var(--ff5-fs-xs);
}

/* ---- ネオン見出し(.ff5-neon)docs/06 §5.5.2
        本体は高コントラスト単色、発光は疑似要素(装飾レイヤー分離) ---- */

.ff5-neon {
	position: relative;
	color: var(--ff5-text);
	font-family: var(--ff5-font-display);
	font-weight: 900;
}

.ff5-neon::after {
	content: attr(data-text);
	position: absolute;
	inset: 0;
	color: var(--ff5-pink);
	filter: blur(10px);
	opacity: .65;
	pointer-events: none;
	z-index: -1;
}

@media (prefers-reduced-motion: reduce) {
	.ff5-neon::after {
		animation: none;
	}
}

/* 蛍光管の不安定な点灯(装飾レイヤーのみ。docs/07 §5.3)。
   docs/07 のサンプルから暗転タイミングを間引いている:
   1秒間に3回を超える点滅は健康上の要件で禁止のため(非交渉が演出仕様に優先)。
   周期6s・暗転は 20% / 24% / 55% の3回 → どの1秒窓でも最大2回。
   画面内の同時適用は5個まで。 */
@keyframes ff5-flicker {
	0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% { opacity: .65; }
	20%, 24%, 55%                            { opacity: .15; }
}

.ff5-neon--flicker::after {
	animation: ff5-flicker 6s infinite steps(1, end);
}

/* ---- カード(.ff5-card)docs/06 §5.5.3 ---- */

.ff5-card {
	position: relative;
	background: var(--ff5-bg-elev);
	border-radius: var(--ff5-radius-md);
	box-shadow: var(--ff5-shadow-card);
	overflow: hidden;
}

/* ホバー浮上はポインタ環境のみ(タッチには適用しない。docs/07 §5.6) */
@media (hover: hover) {
	.ff5-card {
		transition: transform var(--ff5-dur-fast) var(--ff5-ease-out);
	}

	.ff5-card:hover {
		transform: translateY(-2px);
	}
}

.ff5-card__img {
	width: 100%;
	object-fit: cover;
}

.ff5-card--comic .ff5-card__img {
	/* 4コマは2×2グリッドの横長(3:2)に移行(2026-07-31) */
	aspect-ratio: 3 / 2;
}

.ff5-card--legend .ff5-card__img {
	aspect-ratio: 16 / 9;
}

.ff5-card__body {
	padding: var(--ff5-space-3);
}

.ff5-card__title {
	font-size: var(--ff5-fs-md);
	font-weight: 700;
	margin: 0;
}

/* リンク領域はカード全体(疑似要素で全面を覆う) */
.ff5-card__link {
	color: var(--ff5-text);
	text-decoration: none;
}

.ff5-card__link::after {
	content: "";
	position: absolute;
	inset: 0;
}

.ff5-card__link:focus-visible {
	outline: none;  /* 代替: カード全体に可視アウトラインを出す(下記) */
}

.ff5-card__link:focus-visible::after {
	outline: 3px solid var(--ff5-focus);
	outline-offset: -3px;
	border-radius: var(--ff5-radius-md);
}

/* ---- ヘッダー・グローバルナビ(.ff5-nav)docs/03 §5.4 / docs/06 §5.5.6 ---- */

.ff5-header {
	position: sticky;
	top: 0;
	z-index: 300;  /* モバイルメニュー(200)より上。🍍ボタンで閉じられるようにする */
	background: color-mix(in srgb, var(--ff5-bg) 90%, transparent);
	backdrop-filter: blur(8px);
	/* 下部のネオンパープル罫線(改修指示 §4) */
	border-bottom: 1px solid color-mix(in srgb, var(--ff5-purple) 45%, var(--ff5-line));
}

/* backdrop-filter 非対応環境では不透明背景にフォールバック */
@supports not (backdrop-filter: blur(8px)) {
	.ff5-header {
		background: var(--ff5-bg);
	}
}

.ff5-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ff5-space-3);
	min-height: 64px;
	transition: min-height var(--ff5-dur-base) var(--ff5-ease-out);
}

/* スクロール後は少し縮小(nav.js がクラスを付与) */
.ff5-header.is-scrolled .ff5-header__inner {
	min-height: 52px;
}

/* 並び順: ロゴ / ナビ / ON AIR / 🍍(モバイルはナビが fixed overlay のため抜ける) */
.ff5-logo            { order: 1; }
.ff5-nav             { order: 2; }
.ff5-header__onair   { order: 3; }
.ff5-nav-toggle      { order: 4; }

/* ON AIR ランプ(色だけに頼らずテキストを併記) */
.ff5-header__onair {
	display: inline-flex;
	align-items: center;
	gap: var(--ff5-space-1);
	font-size: var(--ff5-fs-xs);
	font-weight: 700;
	letter-spacing: .15em;
	color: var(--ff5-text-muted);
	white-space: nowrap;
}

.ff5-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--ff5-red);
	box-shadow: 0 0 8px color-mix(in srgb, var(--ff5-red) 80%, transparent);
	animation: ff5-dot-blink 2s steps(1, end) infinite;  /* 点滅は1秒3回以下(非交渉) */
}

@keyframes ff5-dot-blink {
	0%, 55%, 100% { opacity: 1; }
	60%, 90%      { opacity: .25; }
}

.ff5-logo {
	font-family: var(--ff5-font-logo);
	font-weight: 900;
	font-size: var(--ff5-fs-lg);
	letter-spacing: .04em;
	color: var(--ff5-text);
	text-decoration: none;
}

.ff5-logo:hover {
	color: var(--ff5-text);
	text-shadow: var(--ff5-glow-pink);
}

/* モバイル用開閉ボタン(🍍)。768px 以上では出さない */
.ff5-nav-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	font-size: var(--ff5-fs-lg);
}

/* モバイル: フルスクリーンメニュー(初期状態は非表示 = タブ順からも除外される) */
.ff5-nav {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: none;
	background: var(--ff5-bg);
	padding: var(--ff5-space-7) var(--ff5-space-4) var(--ff5-space-6);
	overflow-y: auto;
}

.ff5-nav.is-open {
	display: block;
}

/* メニュー展開中は背後のスクロールを止める(非交渉。docs/06 §5.5.6) */
body.ff5-menu-open {
	overflow: hidden;
}

.ff5-nav__list {
	display: flex;
	flex-direction: column;
	gap: var(--ff5-space-3);
	margin: 0;
}

.ff5-nav__link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding-inline: var(--ff5-space-2);
	font-family: var(--ff5-font-display);
	font-weight: 700;
	font-size: var(--ff5-fs-lg);
	letter-spacing: .06em;
	color: var(--ff5-text);
	text-decoration: none;
}

.ff5-nav__link:hover {
	color: var(--ff5-cyan);
}

/* 現在地は発光(text-shadow は最大2重まで。docs/06 §5.4) */
.ff5-nav__link[aria-current="page"] {
	color: var(--ff5-pink);
	text-shadow: var(--ff5-glow-pink);
}

@media (min-width: 768px) {
	.ff5-nav-toggle {
		display: none;
	}

	/* デスクトップ: ネオン看板として常時表示 */
	.ff5-nav {
		position: static;
		display: block;
		background: transparent;
		padding: 0;
		overflow: visible;
	}

	.ff5-nav__list {
		flex-direction: row;
		flex-wrap: wrap;
		gap: var(--ff5-space-2);
	}

	.ff5-nav__link {
		font-size: var(--ff5-fs-xs);
	}
}

/* ---- 末尾CTAブロック(.ff5-cta)docs/06 §5.5.4
        中身は template-parts/content-footer-cta.php(3-3)で実装 ---- */

.ff5-cta {
	margin-block-start: var(--ff5-space-7);
	padding-block-start: var(--ff5-space-5);
	border-top: var(--ff5-border);
	display: grid;
	gap: var(--ff5-space-5);
	justify-items: center;
	text-align: center;
}

/* ---- ページネーション(.ff5-pager)docs/06 §5.5.5
        WP の paginate_links() 出力(.page-numbers)に当てる ---- */

.ff5-pager {
	margin-block-start: var(--ff5-space-6);
}

.ff5-pager .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--ff5-space-2);
}

.ff5-pager .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding-inline: var(--ff5-space-2);
	border-radius: var(--ff5-radius-sm);
	background: var(--ff5-bg-elev);
	color: var(--ff5-text);
	text-decoration: none;
}

.ff5-pager a.page-numbers:hover {
	background: var(--ff5-line);
	color: var(--ff5-text);
}

.ff5-pager .page-numbers.current {
	background: var(--ff5-pink);
	color: var(--ff5-text-invert);
}

/* ---- パンくず(.ff5-breadcrumb)docs/03 §7.4 ---- */

.ff5-breadcrumb {
	font-size: var(--ff5-fs-xs);
	color: var(--ff5-text-muted);
	margin-block-end: var(--ff5-space-4);
}

.ff5-breadcrumb ol {
	display: flex;
	flex-wrap: wrap;
	margin: 0;
}

.ff5-breadcrumb li + li::before {
	content: ">";
	margin-inline: var(--ff5-space-2);
}

.ff5-breadcrumb a {
	color: var(--ff5-text-muted);
}

.ff5-breadcrumb a:hover {
	color: var(--ff5-cyan);
}

/* ---- シェア(.ff5-share)docs/03 §5.5.1 ---- */

.ff5-share {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--ff5-space-2);
}

.ff5-share .ff5-btn {
	font-size: var(--ff5-fs-xs);
	padding: var(--ff5-space-2) var(--ff5-space-4);
}

/* ---- 埋め込み(.ff5-embed)---- */

.ff5-embed {
	width: 100%;
	border: 0;
	border-radius: var(--ff5-radius-md);
}

/* ---- カード補助 ---- */

.ff5-card__excerpt {
	margin: var(--ff5-space-2) 0 0;
	font-size: var(--ff5-fs-xs);
	color: var(--ff5-text-muted);
}

/* CTA内のカード3枚は全幅で並べる */
.ff5-cta__cards {
	width: 100%;
}

/* ---- フッター(.ff5-footer)docs/06 §5.5.7 ---- */

.ff5-footer {
	margin-block-start: var(--ff5-space-7);
	padding-block: var(--ff5-space-6);
	background: var(--ff5-bg-sunk);
	border-top: var(--ff5-border);
}

.home .ff5-footer {
	margin-block-start: 0;  /* HOMEはセクションが連続するため */
}

/* ラジオ周波数の目盛り(装飾。改修指示 §17) */
.ff5-footer__freq {
	display: flex;
	justify-content: space-between;
	padding-block-end: var(--ff5-space-3);
	margin-block-end: var(--ff5-space-4);
	font-family: var(--ff5-font-mono);
	font-size: var(--ff5-fs-xs);
	color: var(--ff5-text-muted);
	background-image: repeating-linear-gradient(90deg, var(--ff5-line) 0 1px, transparent 1px 12px);
	background-repeat: repeat-x;
	background-size: auto 8px;
	background-position: left bottom;
}

.ff5-footer__logo {
	margin: 0 0 var(--ff5-space-3);
	font-family: var(--ff5-font-logo);
	font-weight: 900;
	font-size: var(--ff5-fs-lg);
	letter-spacing: .04em;
}

.ff5-footer__nav ul {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ff5-space-1) var(--ff5-space-4);
	margin: 0;
}

.ff5-footer__nav a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font-size: var(--ff5-fs-xs);
	color: var(--ff5-text-muted);
	text-decoration: none;
}

.ff5-footer__nav a:hover {
	color: var(--ff5-cyan);
}

/* フッター固定文言もネオン看板として扱う(参考ビジュアル準拠) */
.ff5-footer__words {
	margin-block-start: var(--ff5-space-5);
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--ff5-space-2) var(--ff5-space-5);
}

.ff5-footer__words p {
	margin: 0;
}

.ff5-footer__words p:nth-child(1) {
	color: var(--ff5-gold);
	font-weight: 700;
}

.ff5-footer__words p:nth-child(2) {
	color: var(--ff5-cyan);
	font-style: italic;
}

.ff5-footer__wey {
	font-family: var(--ff5-font-display);
	font-weight: 900;
	font-size: var(--ff5-fs-xl);
	color: var(--ff5-pink);
	text-shadow: var(--ff5-glow-pink);
}

/* ===== 05-pages.css ===== */
/* ============================================================
   05-pages.css — ページ固有スタイル
   TOP(HOME)は改修指示(2026-07-30)+ docs/03 §5.1 / docs/07。
   ============================================================ */

/* ============================================================
   スプラッシュ(オーバーレイ)
   初期状態は非表示。splash.js がスキップ判定を通過した場合のみ
   body.ff5-splash-active で表示する(JS死亡時は出ない = 原則1)。
   ============================================================ */

.ff5-splash {
	position: fixed;
	inset: 0;
	z-index: 500;
	display: none;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--ff5-space-5);
	padding: var(--ff5-gutter);
	background: var(--ff5-bg);
	text-align: center;
	overflow: hidden;
}

body.ff5-splash-active .ff5-splash {
	display: flex;
}

/* フィルムノイズ(走査線+粒子の近似。CSSのみ) */
.ff5-splash::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		repeating-linear-gradient(0deg, rgba(0, 0, 0, .5) 0 1px, transparent 1px 3px),
		repeating-linear-gradient(90deg, rgba(0, 0, 0, .25) 0 1px, transparent 1px 5px);
	opacity: .25;
	pointer-events: none;
}

/* 奥でゆっくり動くネオンの光 */
.ff5-splash::after {
	content: "";
	position: absolute;
	inset: -30%;
	background:
		radial-gradient(340px 260px at 30% 40%, color-mix(in srgb, var(--ff5-purple) 30%, transparent), transparent 70%),
		radial-gradient(300px 240px at 70% 60%, color-mix(in srgb, var(--ff5-pink) 22%, transparent), transparent 70%);
	animation: ff5-splash-drift 9s ease-in-out infinite alternate;
	pointer-events: none;
}

@keyframes ff5-splash-drift {
	from { transform: translate3d(-3%, -2%, 0); }
	to   { transform: translate3d(3%, 2%, 0); }
}

.ff5-splash > * {
	position: relative;
	z-index: 1;
}

.ff5-splash__presents {
	margin: 0;
	font-size: var(--ff5-fs-xs);
	letter-spacing: .35em;
	color: var(--ff5-text-muted);
}

/* 0ms: scale(0.6)→(1.0) で出現 → 600ms〜 わずかに揺れる(±1deg) */
.ff5-splash__wey {
	margin: 0;
	font-family: var(--ff5-font-display);
	font-weight: 900;
	font-size: var(--ff5-fs-3xl);
	line-height: 1;
	color: var(--ff5-text);
	/* グローは text-shadow 2重まで(docs/06 §5.4) */
	text-shadow: var(--ff5-glow-pink), var(--ff5-glow-purple);
	animation:
		ff5-wey-in var(--ff5-dur-slow) var(--ff5-ease-back) both,
		ff5-wey-wobble 2.4s var(--ff5-dur-slow) ease-in-out infinite;
}

@keyframes ff5-wey-in {
	from { transform: scale(.6); opacity: 0; }
	to   { transform: scale(1);  opacity: 1; }
}

@keyframes ff5-wey-wobble {
	0%, 100% { transform: rotate(-1deg); }
	50%      { transform: rotate(1deg); }
}

/* 1200ms: ENTER フェードイン */
.ff5-splash__enter {
	font-size: var(--ff5-fs-lg);
	padding-inline: var(--ff5-space-7);
	opacity: 0;
	animation: ff5-fade-in var(--ff5-dur-base) var(--ff5-ease-out) 1200ms both;
}

@keyframes ff5-fade-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

/* 2000ms 無操作: 強調(scale パルス。transform のみ) */
.ff5-splash__enter.is-urge {
	animation:
		ff5-fade-in var(--ff5-dur-base) var(--ff5-ease-out) both,
		ff5-enter-pulse 1.2s ease-in-out infinite;
}

@keyframes ff5-enter-pulse {
	0%, 100% { transform: scale(1); }
	50%      { transform: scale(1.08); }
}

.ff5-splash__hint {
	margin: 0;
	font-size: var(--ff5-fs-xs);
	color: var(--ff5-text-muted);
}

/* ENTER押下: rotate(8deg) scale(1.4) opacity(0) で退場(900ms) */
.ff5-splash.is-leaving {
	animation: ff5-splash-out var(--ff5-dur-scene) var(--ff5-ease-in) forwards;
	pointer-events: none;
}

@keyframes ff5-splash-out {
	to { transform: rotate(8deg) scale(1.4); opacity: 0; }
}

/* ============================================================
   HOME 共通スキャフォールド
   ============================================================ */

/* セクションが自前で余白を持つため main の余白は外す */
.home .ff5-main {
	padding-block: 0;
}

.ff5-section {
	position: relative;
	padding-block: var(--ff5-space-7);
}

.ff5-section__title {
	margin: 0 0 var(--ff5-space-2);
	font-family: var(--ff5-font-display);
	font-weight: 900;
	font-size: var(--ff5-fs-xl);
	letter-spacing: .08em;
	line-height: var(--ff5-lh-tight);
}

.ff5-section__title--pink   { color: var(--ff5-pink);   text-shadow: var(--ff5-glow-pink); }
.ff5-section__title--cyan   { color: var(--ff5-cyan);   text-shadow: var(--ff5-glow-cyan); }
.ff5-section__title--gold   { color: var(--ff5-gold); }
.ff5-section__title--purple { color: var(--ff5-purple); text-shadow: var(--ff5-glow-purple); }

.ff5-section__lead {
	margin: 0 0 var(--ff5-space-5);
	color: var(--ff5-text-muted);
}

.ff5-section__more {
	margin: var(--ff5-space-5) 0 0;
}

/* スクロール段階表示(reveal.js)。
   .ff5-js はJSが付与する — JSが死んでいれば最初から見える(docs/07 原則1) */
.ff5-js [data-ff5-reveal] {
	opacity: 0;
	transform: translateY(14px);
	transition:
		opacity var(--ff5-dur-slow) var(--ff5-ease-out),
		transform var(--ff5-dur-slow) var(--ff5-ease-out);
}

.ff5-js [data-ff5-reveal].is-in {
	opacity: 1;
	transform: none;
}

/* ---- セクション装飾パーツ(透過画像。デスクトップのみ)----
   本文を邪魔しない: pointer-events なし・コンテンツ(.ff5-container)より背面。
   1024px 未満では表示しない(密度・パフォーマンスのため)。 */

.ff5-section > .ff5-container,
.ff5-pinenight__inner {
	position: relative;
	z-index: 1;
}

/* アーカイブ等、セクション外のコンテナでも装飾の基準にする */
.ff5-main > .ff5-container {
	position: relative;
}

.ff5-deco {
	position: absolute;
	z-index: 0;
	display: none;
	pointer-events: none;
}

.ff5-deco img {
	width: 100%;
	height: auto;
	display: block;
}

/* 未登録時のプレースホルダーは装飾としては出さない */
.ff5-deco .ff5-ph {
	display: none;
}

@media (min-width: 1024px) {
	.ff5-deco {
		display: block;
	}
}

.ff5-deco--mic      { top: var(--ff5-space-5); right: 2%; width: 130px; transform: rotate(6deg); }
.ff5-deco--deck     { bottom: var(--ff5-space-3); left: 1%; width: 230px; opacity: .55; }
.ff5-deco--onair    { top: var(--ff5-space-5); right: 3%; width: 150px; transform: rotate(-4deg); }
.ff5-deco--reel     { bottom: var(--ff5-space-3); left: 2%; width: 150px; opacity: .5; }
.ff5-deco--splatter { top: -30px; left: -50px; width: 280px; opacity: .3; }
.ff5-deco--wey      { top: var(--ff5-space-6); right: 4%; width: 190px; transform: rotate(8deg); }
.ff5-deco--cassette { top: var(--ff5-space-5); right: 2%; width: 160px; transform: rotate(-8deg); opacity: .85; }
.ff5-deco--palm     { top: 12%; left: 2%; width: 140px; }
.ff5-deco--palm2    { top: 12%; right: 2%; width: 140px; transform: scaleX(-1); }
.ff5-deco--chaos    { top: var(--ff5-space-5); right: 3%; width: 170px; }
.ff5-deco--fm0721   { top: var(--ff5-space-4); right: 3%; width: 150px; transform: rotate(5deg); }

.ff5-deco--skyline {
	inset-inline: 0;
	bottom: 0;
	width: 100%;
	opacity: .45;
}

/* 追加パーツの配置(ごちゃごちゃ強化。2026-07-31) */
.ff5-deco--hero-palm      { right: 1%; bottom: 8%; width: 150px; }
.ff5-deco--hero-splat     { left: -60px; bottom: -40px; width: 300px; opacity: .25; }
.ff5-deco--cassette-radio { top: 55%; right: 1%; width: 120px; transform: rotate(10deg); opacity: .85; }
.ff5-deco--vu             { bottom: var(--ff5-space-4); right: 22%; width: 150px; opacity: .85; }
.ff5-deco--clock          { top: var(--ff5-space-4); left: 4%; width: 110px; opacity: .8; }
.ff5-deco--splat2-chars   { top: -30px; right: -50px; width: 260px; opacity: .28; }
.ff5-deco--smiley         { bottom: var(--ff5-space-5); left: 3%; width: 130px; transform: rotate(-6deg); }
.ff5-deco--clock-legend   { bottom: var(--ff5-space-4); left: 3%; width: 100px; opacity: .7; }
.ff5-deco--splat2-legend  { top: -40px; left: 30%; width: 240px; opacity: .22; }
.ff5-deco--boombox-pine   { bottom: 4%; left: 3%; width: 190px; }
.ff5-deco--splat-gallery  { top: -30px; right: -40px; width: 240px; opacity: .3; }
.ff5-deco--boombox        { bottom: var(--ff5-space-4); left: 2%; width: 180px; }
.ff5-deco--smiley-goods   { top: 32%; left: 5%; width: 110px; transform: rotate(5deg); }
.ff5-deco--wey-contact    { bottom: 12%; right: 30%; width: 130px; transform: rotate(-7deg); }
.ff5-deco--vu-contact     { bottom: var(--ff5-space-4); left: 3%; width: 130px; opacity: .7; }
.ff5-deco--foot-cassette  { top: var(--ff5-space-4); right: 3%; width: 110px; transform: rotate(-8deg); opacity: .6; }
.ff5-deco--foot-palm      { top: var(--ff5-space-4); left: 3%; width: 90px; opacity: .6; }

.ff5-footer {
	position: relative;
	overflow: hidden;
}

.ff5-footer .ff5-container {
	position: relative;
	z-index: 1;
}

/* ---- 小物の動き(transform / opacity のみ。docs/07 §3 原則2)----
   浮遊・ゆらぎは span ではなく img に付ける(配置用 transform と衝突させない)。
   明滅(ff5-flicker)の同時適用は5個以内を厳守。reduced-motion では全停止(01-reset)。 */

@keyframes ff5-deco-float {
	from { transform: translateY(-16px) translateX(-6px) rotate(-2deg); }
	to   { transform: translateY(20px) translateX(8px) rotate(3deg); }
}

@keyframes ff5-deco-sway {
	from { transform: rotate(-8deg) translateY(-4px); }
	to   { transform: rotate(9deg) translateY(6px); }
}

.ff5-anim-float img  { animation: ff5-deco-float 4s ease-in-out infinite alternate; }
.ff5-anim-float2 img { animation: ff5-deco-float 5.5s ease-in-out 1.4s infinite alternate; }
.ff5-anim-sway img   { animation: ff5-deco-sway 5s ease-in-out infinite alternate; transform-origin: 50% 0; }
.ff5-anim-sway2 img  { animation: ff5-deco-sway 6.5s ease-in-out 2s infinite alternate; transform-origin: 50% 100%; }
.ff5-anim-flicker img { animation: ff5-flicker 6s steps(1, end) infinite; }

/* モバイルにも「ごちゃごちゃ」を少しだけ(各セクション1個・小さめ) */
@media (max-width: 1023px) {
	.ff5-deco--mob {
		display: block;
		max-width: 84px;
	}

	.ff5-deco--mob.ff5-deco--skyline {
		max-width: 100%;
	}
}

/* 画像未登録時のプレースホルダー(空白を出さない。管理用ラベル入り) */
.ff5-ph {
	display: grid;
	place-items: center;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: repeating-linear-gradient(45deg, var(--ff5-bg-elev) 0 14px, var(--ff5-bg-sunk) 14px 28px);
	border: 1px dashed var(--ff5-line);
	border-radius: var(--ff5-radius-md);
	color: var(--ff5-text-muted);
	font-family: var(--ff5-font-mono);
	font-size: var(--ff5-fs-xs);
	letter-spacing: .1em;
}

/* ============================================================
   HERO(2カラム)
   ============================================================ */

.ff5-hero {
	position: relative;
	overflow: hidden;
}

/* ネオンの面光源(疑似要素。1枚画像に依存しない背景) */
.ff5-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(640px 420px at 85% 8%, color-mix(in srgb, var(--ff5-purple) 22%, transparent), transparent 70%),
		radial-gradient(520px 420px at 8% 92%, color-mix(in srgb, var(--ff5-pink) 15%, transparent), transparent 70%);
	pointer-events: none;
}

/* VHS走査線(ごく薄く。可読性を落とさない) */
.ff5-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .28) 0 1px, transparent 1px 4px);
	opacity: .18;
	pointer-events: none;
}

.ff5-hero__inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--ff5-space-5);
	padding-block: var(--ff5-space-5) var(--ff5-space-6);
}

/* 公式バナーは枠なしの全幅(フルブリード)で見せる */
.ff5-hero__visual {
	position: relative;
	z-index: 1;
	width: 100%;
}

.ff5-hero__visual .ff5-hero__img,
.ff5-hero__visual .ff5-ph {
	display: block;
	width: 100%;
	height: auto;
}

/* ロゴユニット: ネオンフレームの中にイコライザー+ロゴ+コピー+CTA */
.ff5-hero__body {
	text-align: center;
	position: relative;
	width: 100%;
	max-width: 780px;
	margin-inline: auto;
	padding: var(--ff5-space-6) var(--ff5-space-4);
	border: 1px solid color-mix(in srgb, var(--ff5-purple) 45%, transparent);
	border-radius: var(--ff5-radius-lg);
	background: radial-gradient(420px 260px at 50% 0%, color-mix(in srgb, var(--ff5-purple) 14%, transparent), transparent 70%);
	box-shadow:
		inset 0 0 48px color-mix(in srgb, var(--ff5-purple) 10%, transparent),
		0 0 24px color-mix(in srgb, var(--ff5-purple) 18%, transparent);
}

/* フレームの角のネオンアクセント */
.ff5-hero__body::before,
.ff5-hero__body::after {
	content: "";
	position: absolute;
	width: 26px;
	height: 26px;
	border-style: solid;
	border-color: var(--ff5-pink);
	pointer-events: none;
}

.ff5-hero__body::before {
	top: -1px;
	left: -1px;
	border-width: 2px 0 0 2px;
	border-top-left-radius: var(--ff5-radius-lg);
}

.ff5-hero__body::after {
	bottom: -1px;
	right: -1px;
	border-width: 0 2px 2px 0;
	border-bottom-right-radius: var(--ff5-radius-lg);
}

/* イコライザー(transform のみ。reduced-motion では静止) */
.ff5-hero-eq {
	display: flex;
	justify-content: center;
	align-items: flex-end;
	gap: 5px;
	height: 30px;
	margin-block-end: var(--ff5-space-3);
}

.ff5-hero-eq span {
	width: 6px;
	height: 100%;
	border-radius: 3px;
	background: linear-gradient(to top, var(--ff5-pink), var(--ff5-cyan));
	transform-origin: bottom;
	animation: ff5-eq 1s ease-in-out infinite alternate;
}

.ff5-hero-eq span:nth-child(1) { animation-delay: 0s;    transform: scaleY(.4); }
.ff5-hero-eq span:nth-child(2) { animation-delay: .12s;  transform: scaleY(.7); }
.ff5-hero-eq span:nth-child(3) { animation-delay: .24s;  transform: scaleY(.5); }
.ff5-hero-eq span:nth-child(4) { animation-delay: .06s;  transform: scaleY(.9); }
.ff5-hero-eq span:nth-child(5) { animation-delay: .3s;   transform: scaleY(.6); }
.ff5-hero-eq span:nth-child(6) { animation-delay: .18s;  transform: scaleY(1); }
.ff5-hero-eq span:nth-child(7) { animation-delay: .36s;  transform: scaleY(.5); }
.ff5-hero-eq span:nth-child(8) { animation-delay: .09s;  transform: scaleY(.8); }
.ff5-hero-eq span:nth-child(9) { animation-delay: .27s;  transform: scaleY(.45); }

@keyframes ff5-eq {
	from { transform: scaleY(.25); }
	to   { transform: scaleY(1); }
}

.ff5-hero-logo {
	margin: 0;
	font-family: var(--ff5-font-logo);
	font-size: var(--ff5-fs-3xl);
	font-style: italic;
	line-height: 1;
	letter-spacing: .06em;
	/* グローは2重まで(docs/06 §5.4) */
	text-shadow: var(--ff5-glow-pink), var(--ff5-glow-purple);
}

.ff5-hero-tagline {
	margin: var(--ff5-space-4) 0 0;
	font-family: var(--ff5-font-display);
	font-weight: 900;
	font-size: clamp(1.5rem, 4.5vw, 2.4rem);
	line-height: var(--ff5-lh-tight);
}

.ff5-hero-tagline em {
	font-style: normal;
	color: var(--ff5-pink);
	text-shadow: var(--ff5-glow-pink);
}

.ff5-hero-sub {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--ff5-space-3);
	margin: var(--ff5-space-3) 0 0;
	font-style: italic;
	letter-spacing: .18em;
	color: var(--ff5-text-muted);
}

.ff5-hero-sub em {
	font-style: italic;
	color: var(--ff5-cyan);
	text-shadow: var(--ff5-glow-cyan);
}

.ff5-hero-sub__line {
	width: 56px;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--ff5-cyan));
}

.ff5-hero-sub__line--r {
	background: linear-gradient(270deg, transparent, var(--ff5-cyan));
}

.ff5-hero-desc {
	margin: var(--ff5-space-4) auto 0;
	color: var(--ff5-text-muted);
	max-width: 46ch;
}

.ff5-hero__cta {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--ff5-space-3);
	margin-block-start: var(--ff5-space-5);
}

.ff5-hero__cta-main {
	font-size: var(--ff5-fs-md);
	padding-inline: var(--ff5-space-6);
	box-shadow: var(--ff5-glow-pink);
}

/* ============================================================
   LATEST RADIO(メイン1+サブ2)
   放送回ゼロの間はコンパクトな準備中バナー(2026-07-31)
   ============================================================ */

.ff5-front-radio--compact {
	padding-block: var(--ff5-space-5);
	border-block: var(--ff5-border);
}

.ff5-radio-compact {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--ff5-space-3) var(--ff5-space-5);
	text-align: center;
}

.ff5-radio-compact__title {
	margin: 0;
	font-size: var(--ff5-fs-lg);
}

.ff5-radio-compact__note {
	margin: 0;
	color: var(--ff5-text-muted);
	font-size: var(--ff5-fs-xs);
}

.ff5-deco--mic-sm {
	top: 50%;
	right: 3%;
	width: 72px;
	transform: translateY(-50%) rotate(8deg);
	opacity: .7;
}

.ff5-radiogrid {
	display: grid;
	gap: var(--ff5-space-4);
}

@media (min-width: 768px) {
	.ff5-radiogrid {
		grid-template-columns: 1.5fr 1fr;
		grid-template-areas:
			"main sub1"
			"main sub2";
	}

	.ff5-epcard--main          { grid-area: main; }
	.ff5-epcard:nth-child(2)   { grid-area: sub1; }
	.ff5-epcard:nth-child(3)   { grid-area: sub2; }
}

.ff5-epcard__meta {
	display: flex;
	gap: var(--ff5-space-3);
	margin: 0 0 var(--ff5-space-1);
	font-family: var(--ff5-font-mono);
	font-size: var(--ff5-fs-xs);
	color: var(--ff5-text-muted);
}

.ff5-epcard__no {
	color: var(--ff5-pink);
	font-weight: 700;
}

.ff5-epcard--main .ff5-card__title {
	font-size: var(--ff5-fs-lg);
}

.ff5-epcard__actions {
	margin: var(--ff5-space-3) 0 0;
}

/* ============================================================
   CHARACTERS(出演者紹介パネル)
   ============================================================ */

.ff5-chars {
	display: grid;
	gap: var(--ff5-space-5);
}

@media (min-width: 768px) {
	.ff5-chars {
		grid-template-columns: repeat(2, 1fr);
	}
}

.ff5-charpanel {
	position: relative;
	background: var(--ff5-bg-elev);
	border: var(--ff5-border);
	border-radius: var(--ff5-radius-lg);
	overflow: hidden;
	box-shadow: var(--ff5-shadow-card);
}

.ff5-charpanel__photo {
	position: relative;
}

.ff5-charpanel__img,
.ff5-charpanel__photo .ff5-ph {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 0;
	border-inline: 0;
	border-top: 0;
}

.ff5-charpanel__onair {
	position: absolute;
	top: var(--ff5-space-3);
	left: var(--ff5-space-3);
	display: inline-flex;
	align-items: center;
	gap: var(--ff5-space-1);
	padding: var(--ff5-space-1) var(--ff5-space-2);
	background: color-mix(in srgb, var(--ff5-bg) 82%, transparent);
	border-radius: var(--ff5-radius-sm);
	font-size: var(--ff5-fs-xs);
	font-weight: 700;
	letter-spacing: .12em;
}

.ff5-charpanel__body {
	padding: var(--ff5-space-4);
}

.ff5-charpanel__name {
	margin: 0 0 var(--ff5-space-1);
	font-size: var(--ff5-fs-xl);
}

.ff5-charpanel__catch {
	margin: 0 0 var(--ff5-space-2);
	font-weight: 700;
}

.ff5-charpanel__desc {
	margin: 0;
	color: var(--ff5-text-muted);
}

.ff5-charpanel__quote {
	margin: var(--ff5-space-3) 0;
	color: var(--ff5-gold);
	font-weight: 700;
}

/* レベルメーター(装飾) */
.ff5-charpanel__meter {
	display: flex;
	gap: 4px;
	align-items: flex-end;
	height: 24px;
}

.ff5-charpanel__meter span {
	width: 8px;
	border-radius: 2px;
	background: linear-gradient(to top, var(--ff5-cyan), var(--ff5-pink));
}

.ff5-charpanel__meter span:nth-child(1) { height: 40%; }
.ff5-charpanel__meter span:nth-child(2) { height: 70%; }
.ff5-charpanel__meter span:nth-child(3) { height: 100%; }
.ff5-charpanel__meter span:nth-child(4) { height: 55%; }
.ff5-charpanel__meter span:nth-child(5) { height: 80%; }
.ff5-charpanel__meter span:nth-child(6) { height: 35%; }
.ff5-charpanel__meter span:nth-child(7) { height: 90%; }
.ff5-charpanel__meter span:nth-child(8) { height: 60%; }

/* ============================================================
   COMIC(縦長カード+ホバーで「読む」)
   ============================================================ */

.ff5-comicgrid {
	display: grid;
	gap: var(--ff5-space-4);
}

@media (min-width: 480px) {
	.ff5-comicgrid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 768px) {
	.ff5-comicgrid { grid-template-columns: repeat(3, 1fr); }
}

.ff5-comiccard__read {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-family: var(--ff5-font-display);
	font-weight: 900;
	font-size: var(--ff5-fs-lg);
	color: var(--ff5-text);
	text-shadow: var(--ff5-glow-pink);
	opacity: 0;
	transition: opacity var(--ff5-dur-fast) var(--ff5-ease-out);
	pointer-events: none;
}

.ff5-comiccard:focus-within .ff5-comiccard__read {
	opacity: 1;
}

@media (hover: hover) {
	.ff5-comiccard:hover {
		box-shadow: var(--ff5-shadow-card), var(--ff5-glow-pink);
	}

	.ff5-comiccard:hover .ff5-comiccard__read {
		opacity: 1;
	}
}

/* ============================================================
   LEGEND(VHS走査線)
   ============================================================ */

.ff5-legendgrid {
	display: grid;
	gap: var(--ff5-space-4);
}

@media (min-width: 768px) {
	.ff5-legendgrid { grid-template-columns: repeat(3, 1fr); }
}

.ff5-legendcard::after {
	content: "";
	position: absolute;
	inset: 0;
	background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .3) 0 1px, transparent 1px 4px);
	opacity: .18;
	pointer-events: none;
}

.ff5-legendcard__no {
	margin: 0 0 var(--ff5-space-1);
	font-family: var(--ff5-font-mono);
	font-size: var(--ff5-fs-xs);
	letter-spacing: .2em;
	color: var(--ff5-gold);
}

/* ============================================================
   PINE NIGHT(見せ場)
   ============================================================ */

.ff5-pinenight {
	overflow: hidden;
	text-align: center;
	border-block: var(--ff5-border);
}

.ff5-pinenight__bg {
	position: absolute;
	inset: 0;
}

.ff5-pinenight__img,
.ff5-pinenight__bg .ff5-ph {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: .35;
	border: 0;
	border-radius: 0;
}

.ff5-pinenight__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, var(--ff5-bg), transparent 35%, transparent 65%, var(--ff5-bg));
}

.ff5-pinenight__inner {
	position: relative;
	z-index: 1;
}

.ff5-pinenight__since {
	margin: 0;
	font-family: var(--ff5-font-mono);
	font-size: var(--ff5-fs-xs);
	letter-spacing: .3em;
	color: var(--ff5-gold);
}

.ff5-pinenight__title {
	font-size: var(--ff5-fs-2xl);
}

.ff5-pinenight__copy {
	margin: var(--ff5-space-2) 0;
	font-family: var(--ff5-font-display);
	font-weight: 900;
	font-size: var(--ff5-fs-lg);
}

.ff5-pinenight__desc {
	max-width: 46ch;
	margin: 0 auto var(--ff5-space-4);
	color: var(--ff5-text-muted);
}

/* 落下パイナップル(最大3個。transform のみ。押すと音)
   docs/07 §5.5.3: reduced-motion 時は静止配置で世界観を保つ */
.ff5-pine {
	position: absolute;
	top: -80px;
	z-index: 1;
	font-size: var(--ff5-fs-xl);
	line-height: 1;
	animation: ff5-pine-fall linear infinite;
}

.ff5-pine--1 { left: 12%; animation-duration: 11s; }
.ff5-pine--2 { left: 50%; animation-duration: 14s; animation-delay: 3s; }
.ff5-pine--3 { left: 84%; animation-duration: 9s;  animation-delay: 6s; }

@keyframes ff5-pine-fall {
	to { transform: translate3d(0, 720px, 0) rotate(200deg); }
}

@media (prefers-reduced-motion: reduce) {
	.ff5-pine    { animation: none; }
	.ff5-pine--1 { top: 18%; }
	.ff5-pine--2 { top: 58%; }
	.ff5-pine--3 { top: 32%; }
}

/* ============================================================
   GALLERY(雑誌風グリッド)
   ============================================================ */

.ff5-gallerygrid {
	display: grid;
	gap: var(--ff5-space-2);
	grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 768px) {
	.ff5-gallerygrid { grid-template-columns: repeat(4, 1fr); }
}

.ff5-gallerytile--wide {
	grid-column: span 2;
	grid-row: span 2;
}

.ff5-gallerytile__img,
.ff5-gallerytile .ff5-ph {
	width: 100%;
	height: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: var(--ff5-radius-sm);
	display: block;
}

/* ============================================================
   GALLERY 写真の壁(/gallery/ と HOME 共通)
   タイルごとに --ff5-g-rot / --ff5-g-dur / --ff5-g-delay を
   インラインで受け取り、全部バラバラの周期で浮遊する。
   transform のみ(docs/07 原則・CLS ゼロ)。
   ============================================================ */

.ff5-photowall {
	display: grid;
	gap: var(--ff5-space-5) var(--ff5-space-4);
	grid-template-columns: repeat(2, 1fr);
	padding: var(--ff5-space-4) 0;
}

@media (min-width: 768px) {
	.ff5-photowall { grid-template-columns: repeat(3, 1fr); }
}

.ff5-photo {
	margin: 0;
	background: var(--ff5-text);              /* ポラロイドの白フチ */
	padding: var(--ff5-space-2) var(--ff5-space-2) var(--ff5-space-5);
	border-radius: var(--ff5-radius-sm);
	box-shadow: var(--ff5-shadow-card);
	transform: rotate(var(--ff5-g-rot, 0deg));
	will-change: transform;
	animation: ff5-photo-drift var(--ff5-g-dur, 10s) ease-in-out var(--ff5-g-delay, 0s) infinite alternate;
}

.ff5-photo[hidden] { display: none; }

.ff5-photo__img {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 2px;
	display: block;
}

@keyframes ff5-photo-drift {
	from {
		transform: rotate(var(--ff5-g-rot, 0deg)) translate3d(0, 0, 0);
	}
	to {
		transform: rotate(calc(var(--ff5-g-rot, 0deg) * -0.7)) translate3d(0, -0.5rem, 0);
	}
}

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

/* ============================================================
   GOODS(COMING SOON プレースホルダー)
   ============================================================ */

.ff5-goodsgrid {
	display: grid;
	gap: var(--ff5-space-4);
	grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 768px) {
	.ff5-goodsgrid { grid-template-columns: repeat(4, 1fr); }
}

.ff5-goodcard {
	background: var(--ff5-bg-elev);
	border: var(--ff5-border);
	border-radius: var(--ff5-radius-md);
	box-shadow: var(--ff5-shadow-card);
	padding: var(--ff5-space-5) var(--ff5-space-3);
	text-align: center;
}

.ff5-goodcard__icon {
	display: block;
	margin-bottom: var(--ff5-space-3);
	font-size: var(--ff5-fs-2xl);
	line-height: 1;
	filter: drop-shadow(0 0 8px color-mix(in srgb, var(--ff5-gold) 55%, transparent));
}

.ff5-goodcard__name {
	margin: 0 0 var(--ff5-space-2);
	font-weight: 700;
}

.ff5-goodcard__badge {
	display: inline-block;
	padding: var(--ff5-space-1) var(--ff5-space-2);
	border: 1px solid var(--ff5-gold);
	border-radius: var(--ff5-radius-sm);
	color: var(--ff5-gold);
	font-size: var(--ff5-fs-xs);
	letter-spacing: .1em;
}

/* ---- 商品カード(実ラインナップ。ff5_goods_items)---- */

.ff5-goodcard--item {
	padding: 0 0 var(--ff5-space-3);
	overflow: hidden;
	transition: transform var(--ff5-dur-base) var(--ff5-ease-out);
}

.ff5-goodcard--item:hover {
	transform: translateY(-4px);
}

@media (prefers-reduced-motion: reduce) {
	.ff5-goodcard--item,
	.ff5-goodcard--item:hover {
		transition: none;
		transform: none;
	}
}

.ff5-goodcard__imgwrap {
	position: relative;
	display: block;
	margin-bottom: var(--ff5-space-3);
}

.ff5-goodcard__img {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	display: block;
}

.ff5-goodcard__soldout {
	position: absolute;
	top: var(--ff5-space-3);
	right: calc(-1 * var(--ff5-space-5));
	padding: var(--ff5-space-1) var(--ff5-space-6);
	background: var(--ff5-red);
	color: var(--ff5-text);
	font-size: var(--ff5-fs-xs);
	font-weight: 700;
	letter-spacing: .18em;
	transform: rotate(35deg);
	box-shadow: var(--ff5-shadow-card);
	pointer-events: none;
}

.ff5-goodcard--item .ff5-goodcard__name {
	padding-inline: var(--ff5-space-3);
	font-size: var(--ff5-fs-sm);
}

.ff5-goodcard__price {
	margin: 0;
	padding-inline: var(--ff5-space-3);
	color: var(--ff5-gold);
	font-weight: 700;
}

.ff5-goodcard__tax {
	color: var(--ff5-text-muted);
	font-size: var(--ff5-fs-xs);
	font-weight: 400;
}

/* /goods/ の本文(高田実の煽り+ピストン新妻)はグリッドの後に */
.ff5-goods-note {
	max-width: var(--ff5-container-text);
	margin-top: var(--ff5-space-6);
}

/* ============================================================
   CONTACT CTA
   ============================================================ */

.ff5-contactcta__inner {
	display: grid;
	gap: var(--ff5-space-5);
	align-items: center;
}

@media (min-width: 768px) {
	.ff5-contactcta__inner {
		grid-template-columns: 1fr 1.2fr;
	}
}

.ff5-contactcta__img,
.ff5-contactcta__visual .ff5-ph {
	width: 100%;
	border-radius: var(--ff5-radius-lg);
	border: var(--ff5-border);
	box-shadow: var(--ff5-shadow-card), var(--ff5-glow-cyan);
}

.ff5-contactcta__copy {
	margin: 0 0 var(--ff5-space-4);
	font-family: var(--ff5-font-display);
	font-weight: 900;
	font-size: var(--ff5-fs-xl);
	line-height: var(--ff5-lh-tight);
}

/* ============================================================
   ミュート切替(右下固定・全ページ。docs/07 §5.2.1)
   スプラッシュ(500)より上に置き、スプラッシュ表示中も操作できる
   ============================================================ */

.ff5-mute {
	position: fixed;
	right: var(--ff5-space-3);
	bottom: var(--ff5-space-3);
	z-index: 600;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	border-radius: 50%;
	background: var(--ff5-bg-elev);
	border: var(--ff5-border);
	font-size: var(--ff5-fs-md);
	box-shadow: var(--ff5-shadow-card);
}

/* ---- アーカイブ共通 ---- */

.ff5-archive-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--ff5-space-3);
	margin-block-end: var(--ff5-space-5);
}

.ff5-archive-head h1 {
	margin: 0;
}

/* ---- COMIC 個別(2カラム+モーダルビューア+ランキング)---- */

.ff5-comic-layout {
	display: grid;
	gap: var(--ff5-space-6);
}

@media (min-width: 1024px) {
	.ff5-comic-layout {
		grid-template-columns: minmax(0, 1fr) 300px;
		align-items: start;
	}
}

.ff5-comic-main {
	min-width: 0;
}

.ff5-comic__figure {
	margin: 0 auto var(--ff5-space-4);
	/* 2×2グリッドの横長4コマ(2026-07-31〜)。本文カラム幅いっぱいに出す */
	max-width: 100%;
}

.ff5-comic__zoom {
	display: block;
	width: 100%;
	padding: 0;
	cursor: zoom-in;
	border-radius: var(--ff5-radius-md);
}

.ff5-comic__img {
	width: 100%;
	border-radius: var(--ff5-radius-md);
}

.ff5-comic__hint {
	margin-block-start: var(--ff5-space-2);
	font-size: var(--ff5-fs-xs);
	color: var(--ff5-text-muted);
	text-align: center;
}

/* 関連マンガ */
.ff5-related {
	margin-block-start: var(--ff5-space-7);
}

.ff5-related__title {
	margin: 0 0 var(--ff5-space-4);
	font-family: var(--ff5-font-display);
	font-weight: 900;
	font-size: var(--ff5-fs-lg);
	color: var(--ff5-cyan);
	text-shadow: var(--ff5-glow-cyan);
}

/* サイドバー: 人気ランキング */
.ff5-rankbox {
	position: sticky;
	top: 84px;
	background: var(--ff5-bg-elev);
	border: var(--ff5-border);
	border-radius: var(--ff5-radius-lg);
	box-shadow: var(--ff5-shadow-card);
	padding: var(--ff5-space-4);
}

.ff5-rankbox__title {
	margin: 0 0 var(--ff5-space-3);
	font-family: var(--ff5-font-display);
	font-weight: 900;
	font-size: var(--ff5-fs-md);
	color: var(--ff5-gold);
}

.ff5-rank {
	margin: 0;
	counter-reset: ff5rank;
}

.ff5-rank__item {
	counter-increment: ff5rank;
	margin-block-end: var(--ff5-space-3);
}

.ff5-rank__link {
	display: grid;
	grid-template-columns: auto 88px 1fr;
	gap: var(--ff5-space-2);
	align-items: center;
	color: var(--ff5-text);
	text-decoration: none;
}

.ff5-rank__link::before {
	content: counter(ff5rank);
	width: 1.2em;
	text-align: center;
	font-family: var(--ff5-font-logo);
	font-size: var(--ff5-fs-lg);
	color: var(--ff5-gold);
}

/* 1位はピンクで発光 */
.ff5-rank__item:nth-child(1) .ff5-rank__link::before {
	color: var(--ff5-pink);
	text-shadow: var(--ff5-glow-pink);
}

.ff5-rank__img {
	width: 88px;
	height: auto;
	border-radius: var(--ff5-radius-sm);
}

.ff5-rank__name {
	font-size: var(--ff5-fs-xs);
	font-weight: 700;
}

.ff5-rank__link:hover .ff5-rank__name {
	color: var(--ff5-cyan);
}

/* モーダルビューア */
.ff5-comic-modal {
	position: fixed;
	inset: 0;
	z-index: 550;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--ff5-space-3);
	padding: var(--ff5-space-4);
	background: color-mix(in srgb, var(--ff5-bg) 94%, transparent);
}

.ff5-comic-modal[hidden] {
	display: none;
}

body.ff5-modal-open {
	overflow: hidden;
}

.ff5-comic-modal__stage {
	margin: 0;
	max-width: min(1100px, 92vw);
	text-align: center;
}

.ff5-comic-modal__img {
	max-width: 100%;
	max-height: 72vh;
	width: auto;
	height: auto;
	border-radius: var(--ff5-radius-md);
	box-shadow: var(--ff5-shadow-card);
}

.ff5-comic-modal__title {
	margin-block-start: var(--ff5-space-2);
	font-weight: 700;
}

.ff5-comic-modal__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 52px;
	min-height: 52px;
	border-radius: 50%;
	background: var(--ff5-bg-elev);
	border: var(--ff5-border);
	font-size: var(--ff5-fs-lg);
	color: var(--ff5-text);
}

.ff5-comic-modal__nav--prev { left: var(--ff5-space-3); }
.ff5-comic-modal__nav--next { right: var(--ff5-space-3); }

.ff5-comic-modal__nav:hover {
	color: var(--ff5-pink);
	box-shadow: var(--ff5-glow-pink);
}

.ff5-comic-modal__close {
	position: absolute;
	top: var(--ff5-space-3);
	right: var(--ff5-space-3);
}

/* ---- RADIO ---- */

.ff5-radio__links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ff5-space-2);
	margin-block: var(--ff5-space-4);
}

.ff5-radio__note {
	margin-block-start: var(--ff5-space-4);
	font-size: var(--ff5-fs-xs);
	color: var(--ff5-text-muted);
}

.ff5-radio-latest {
	margin-block-end: var(--ff5-space-6);
	padding: var(--ff5-space-4);
	background: var(--ff5-bg-elev);
	border-radius: var(--ff5-radius-lg);
	box-shadow: var(--ff5-shadow-card);
}

.ff5-radio-latest__label {
	margin: 0 0 var(--ff5-space-2);
	font-weight: 700;
	color: var(--ff5-red);  /* 大見出し・煽り用途のみ可(docs/06 §5.1.2) */
	font-size: var(--ff5-fs-lg);
	font-family: var(--ff5-font-display);
}

.ff5-radio-latest__title {
	margin: 0 0 var(--ff5-space-3);
}

.ff5-radio-latest__title a {
	color: var(--ff5-text);
	text-decoration: none;
}

.ff5-radio-latest__title a:hover {
	color: var(--ff5-cyan);
}

/* ---- ABOUT(専用テンプレート page-about.php)---- */

.ff5-about .ff5-main,
.about .ff5-main {
	padding-block: 0;
}

.ff5-about-hero__inner {
	display: grid;
	gap: var(--ff5-space-5);
	align-items: center;
}

@media (min-width: 768px) {
	.ff5-about-hero__inner {
		grid-template-columns: 1.2fr 1fr;
	}
}

.ff5-about-hero__lead {
	font-family: var(--ff5-font-display);
	font-weight: 900;
	font-size: var(--ff5-fs-md);
}

.ff5-about-hero__img {
	width: 100%;
	max-width: 420px;
	border-radius: var(--ff5-radius-lg);
	border: var(--ff5-border);
	box-shadow: var(--ff5-shadow-card), var(--ff5-glow-pink);
	transform: rotate(1.5deg);
	justify-self: center;
}

/* ツッコミ(ピストン新妻の一言)共通 */
.ff5-about-tsukkomi {
	margin-block-start: var(--ff5-space-4);
	padding: var(--ff5-space-2) var(--ff5-space-3);
	border-left: 3px solid var(--ff5-cyan);
	background: var(--ff5-bg-elev);
	border-radius: var(--ff5-radius-sm);
	color: var(--ff5-text-muted);
	max-width: 48ch;
}

/* 肩書+手書き名刺 */
.ff5-about-titles__inner {
	display: grid;
	gap: var(--ff5-space-5);
	align-items: center;
}

@media (min-width: 768px) {
	.ff5-about-titles__inner {
		grid-template-columns: 1fr 320px;
	}
}

.ff5-about-titles__list {
	margin: 0;
}

.ff5-about-titles__list li {
	padding: var(--ff5-space-3);
	margin-block-end: var(--ff5-space-2);
	background: var(--ff5-bg-elev);
	border: var(--ff5-border);
	border-radius: var(--ff5-radius-md);
	font-weight: 700;
}

.ff5-about-titles__list li:nth-child(odd) {
	transform: rotate(-.6deg);
}

.ff5-about-titles__list li:nth-child(even) {
	transform: rotate(.6deg);
}

.ff5-about-meishi {
	margin: 0;
}

.ff5-about-meishi__img {
	width: 100%;
	transform: rotate(-4deg);
	filter: drop-shadow(0 8px 16px rgba(0, 0, 0, .5));
}

/* 年表 */
.ff5-about-1994 {
	margin: 0 0 var(--ff5-space-5);
	max-width: 560px;
}

.ff5-about-1994__img {
	width: 100%;
	border-radius: var(--ff5-radius-md);
	border: var(--ff5-border);
	transform: rotate(-1deg);
	box-shadow: var(--ff5-shadow-card);
}

.ff5-about-1994 figcaption {
	margin-block-start: var(--ff5-space-2);
	font-size: var(--ff5-fs-xs);
	color: var(--ff5-text-muted);
}

.ff5-timeline {
	margin: 0;
	border-left: 2px solid var(--ff5-line);
	padding-left: var(--ff5-space-5);
	max-width: 640px;
}

.ff5-timeline li {
	position: relative;
	margin-block-end: var(--ff5-space-4);
}

.ff5-timeline li::before {
	content: "";
	position: absolute;
	left: calc(-1 * var(--ff5-space-5) - 7px);
	top: .5em;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--ff5-gold);
	box-shadow: 0 0 8px color-mix(in srgb, var(--ff5-gold) 70%, transparent);
}

.ff5-timeline__year {
	display: block;
	font-family: var(--ff5-font-logo);
	font-size: var(--ff5-fs-lg);
	color: var(--ff5-pink);
	line-height: var(--ff5-lh-tight);
}

/* ピストン新妻 セクション */
.ff5-about-piston-niizuma__inner {
	display: grid;
	gap: var(--ff5-space-5);
	align-items: center;
}

@media (min-width: 768px) {
	.ff5-about-piston-niizuma__inner {
		grid-template-columns: 1fr 1.4fr;
	}
}

.ff5-about-piston-niizuma__img {
	width: 100%;
	max-width: 380px;
	border-radius: var(--ff5-radius-lg);
	border: var(--ff5-border);
	box-shadow: var(--ff5-shadow-card), var(--ff5-glow-cyan);
	transform: rotate(-1.5deg);
	justify-self: center;
}

/* ---- LEGEND 個別(週刊誌×VHS)---- */

.ff5-legend-entry__label {
	margin: 0;
	font-family: var(--ff5-font-mono);
	font-size: var(--ff5-fs-xs);
	letter-spacing: .3em;
	color: var(--ff5-gold);
}

.ff5-legend-entry__title {
	margin: var(--ff5-space-2) 0 var(--ff5-space-4);
	font-size: var(--ff5-fs-2xl);
	color: var(--ff5-text);
	text-shadow: var(--ff5-glow-purple);
}

.ff5-legend-entry__figure {
	position: relative;
	margin: 0 0 var(--ff5-space-5);
	max-width: 640px;
}

.ff5-legend-entry__img {
	width: 100%;
	border-radius: var(--ff5-radius-md);
	border: var(--ff5-border);
	filter: saturate(.85) contrast(1.05);
	transform: rotate(-.8deg);
	box-shadow: var(--ff5-shadow-card);
}

/* VHS走査線を写真の上に */
.ff5-legend-entry__figure::after {
	content: "";
	position: absolute;
	inset: 0 0 1.8em 0;
	background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .3) 0 1px, transparent 1px 4px);
	opacity: .25;
	pointer-events: none;
	border-radius: var(--ff5-radius-md);
}

.ff5-legend-entry__figure figcaption {
	margin-block-start: var(--ff5-space-2);
	font-size: var(--ff5-fs-xs);
	color: var(--ff5-text-muted);
}

.ff5-legend-entry__body {
	max-width: 40em;
	font-size: var(--ff5-fs-md);
}

.ff5-legend-entry__note {
	margin-block-start: var(--ff5-space-5);
	padding: var(--ff5-space-2) var(--ff5-space-3);
	border-left: 3px solid var(--ff5-gold);
	background: var(--ff5-bg-elev);
	border-radius: var(--ff5-radius-sm);
	font-size: var(--ff5-fs-xs);
	color: var(--ff5-text-muted);
	max-width: 48ch;
}

/* ---- PINE NIGHT ページ(page-pine-night.php)---- */

.ff5-pinepage .ff5-main,
.page-pine-night .ff5-main {
	padding-block: 0;
}

.ff5-pinepage-hero {
	overflow: hidden;
	text-align: center;
}

.ff5-pinepage-hero__bg {
	position: absolute;
	inset: 0;
}

.ff5-pinepage-hero__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: .4;
}

.ff5-pinepage-hero__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, var(--ff5-bg), transparent 30%, transparent 60%, var(--ff5-bg));
}

.ff5-pinepage-hero__inner {
	padding-block: var(--ff5-space-7);
}

.ff5-pinepage-hero__title {
	font-size: var(--ff5-fs-3xl);
	line-height: 1;
}

.ff5-pinepage-hero__copy {
	font-family: var(--ff5-font-display);
	font-weight: 900;
	font-size: var(--ff5-fs-xl);
	margin: var(--ff5-space-3) 0;
}

.ff5-pinepage-hero__desc {
	max-width: 52ch;
	margin: 0 auto;
	color: var(--ff5-text-muted);
}

/* フライヤー */
.ff5-pinepage-flyer__inner {
	display: grid;
	gap: var(--ff5-space-6);
	align-items: center;
}

@media (min-width: 768px) {
	.ff5-pinepage-flyer__inner {
		grid-template-columns: 380px 1fr;
	}
}

.ff5-pinepage-flyer__figure {
	margin: 0;
	justify-self: center;
}

.ff5-pinepage-flyer__img {
	width: 100%;
	max-width: 380px;
	transform: rotate(-2.5deg);
	border: var(--ff5-border);
	border-radius: var(--ff5-radius-sm);
	box-shadow: var(--ff5-shadow-card), var(--ff5-glow-pink);
}

.ff5-pinepage-flyer__figure figcaption {
	margin-block-start: var(--ff5-space-2);
	font-size: var(--ff5-fs-xs);
	color: var(--ff5-text-muted);
	text-align: center;
}

/* ドレスコード */
.ff5-dresscode {
	display: grid;
	gap: var(--ff5-space-4);
}

@media (min-width: 768px) {
	.ff5-dresscode {
		grid-template-columns: repeat(3, 1fr);
	}
}

.ff5-dresscode__card {
	position: relative;
	background: var(--ff5-bg-elev);
	border: var(--ff5-border);
	border-radius: var(--ff5-radius-lg);
	box-shadow: var(--ff5-shadow-card);
	padding: 0 var(--ff5-space-4) var(--ff5-space-5);
	text-align: center;
	overflow: hidden;
}

.ff5-dresscode__card:nth-child(odd) { transform: rotate(-.8deg); }
.ff5-dresscode__card:nth-child(even) { transform: rotate(.8deg); }

@media (hover: hover) {
	.ff5-dresscode__card {
		transition: transform var(--ff5-dur-fast) var(--ff5-ease-out), box-shadow var(--ff5-dur-fast) var(--ff5-ease-out);
	}

	.ff5-dresscode__card--gold:hover { transform: translateY(-4px); box-shadow: var(--ff5-shadow-card), 0 0 16px color-mix(in srgb, var(--ff5-gold) 55%, transparent); }
	.ff5-dresscode__card--cyan:hover { transform: translateY(-4px); box-shadow: var(--ff5-shadow-card), var(--ff5-glow-cyan); }
	.ff5-dresscode__card--pink:hover { transform: translateY(-4px); box-shadow: var(--ff5-shadow-card), var(--ff5-glow-pink); }
}

/* 検問ナンバー */
.ff5-dresscode__badge {
	position: absolute;
	top: var(--ff5-space-2);
	left: var(--ff5-space-3);
	z-index: 1;
	font-family: var(--ff5-font-logo);
	font-size: var(--ff5-fs-xl);
	font-style: italic;
	color: var(--ff5-text);
	text-shadow: var(--ff5-glow-purple);
	opacity: .9;
}

/* 写真(上部いっぱい・下端をフェード) */
.ff5-dresscode__photo {
	position: relative;
	margin: 0 calc(-1 * var(--ff5-space-4)) 0;
}

.ff5-dresscode__img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	display: block;
}

.ff5-dresscode__photo::after {
	content: "";
	position: absolute;
	inset: 60% 0 0;
	background: linear-gradient(to bottom, transparent, var(--ff5-bg-elev));
	pointer-events: none;
}

/* アイコンは写真に半分乗せる */
.ff5-dresscode__icon {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	margin-top: -28px;
	border-radius: 50%;
	background: var(--ff5-bg);
	border: var(--ff5-border);
	font-size: var(--ff5-fs-lg);
	line-height: 1;
	box-shadow: var(--ff5-shadow-card);
}

.ff5-dresscode__name {
	margin: var(--ff5-space-2) 0;
	font-family: var(--ff5-font-display);
	font-weight: 900;
	font-size: var(--ff5-fs-lg);
}

.ff5-dresscode__card--gold .ff5-dresscode__name { color: var(--ff5-gold); }
.ff5-dresscode__card--cyan .ff5-dresscode__name { color: var(--ff5-cyan); text-shadow: var(--ff5-glow-cyan); }
.ff5-dresscode__card--pink .ff5-dresscode__name { color: var(--ff5-pink); text-shadow: var(--ff5-glow-pink); }

.ff5-dresscode__note {
	margin: 0;
	font-size: var(--ff5-fs-xs);
	color: var(--ff5-text-muted);
}

/* タイムテーブル */
.ff5-timetable {
	margin: 0 0 var(--ff5-space-4);
	max-width: 560px;
}

.ff5-timetable li {
	display: grid;
	grid-template-columns: 88px 1fr;
	gap: var(--ff5-space-3);
	align-items: baseline;
	padding: var(--ff5-space-3);
	border-bottom: var(--ff5-border);
}

.ff5-timetable__time {
	font-family: var(--ff5-font-logo);
	font-size: var(--ff5-fs-lg);
	color: var(--ff5-cyan);
}

.ff5-timetable__main {
	background: var(--ff5-bg-elev);
	border-radius: var(--ff5-radius-md);
}

.ff5-timetable__main .ff5-timetable__time {
	color: var(--ff5-gold);
	text-shadow: 0 0 12px color-mix(in srgb, var(--ff5-gold) 60%, transparent);
}

/* INFO(未定!未定!ない!) */
.ff5-pineinfo {
	display: grid;
	gap: var(--ff5-space-4);
	margin-block-end: var(--ff5-space-4);
}

@media (min-width: 768px) {
	.ff5-pineinfo {
		grid-template-columns: repeat(3, 1fr);
	}
}

.ff5-pineinfo__item {
	text-align: center;
	background: var(--ff5-bg-elev);
	border: var(--ff5-border);
	border-radius: var(--ff5-radius-md);
	padding: var(--ff5-space-4);
}

.ff5-pineinfo__label {
	display: block;
	font-size: var(--ff5-fs-xs);
	color: var(--ff5-text-muted);
	letter-spacing: .2em;
}

.ff5-pineinfo__value {
	display: block;
	font-family: var(--ff5-font-display);
	font-weight: 900;
	font-size: var(--ff5-fs-xl);
	color: var(--ff5-pink);
	text-shadow: var(--ff5-glow-pink);
}

/* 降ってくるパイナップル(JSが生成。fixed + pointer-events:none = docs/07 §7.4) */
.ff5-pine-drop {
	position: fixed;
	top: -60px;
	z-index: 400;
	pointer-events: none;
	line-height: 1;
	animation: ff5-pine-rainfall linear forwards;
}

@keyframes ff5-pine-rainfall {
	to { transform: translate3d(0, 115vh, 0) rotate(240deg); }
}

/* reduced-motion 時: 降らせず静止パイナップルを配置(docs/07 §5.5.3) */
.ff5-pine-static {
	display: none;
	position: fixed;
	z-index: 400;
	font-size: var(--ff5-fs-xl);
	pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
	.ff5-pine-static { display: block; }
	.ff5-pine-static--1 { top: 18%; left: 6%; }
	.ff5-pine-static--2 { top: 42%; right: 8%; }
	.ff5-pine-static--3 { top: 74%; left: 12%; }
}

/* ---- 検索結果 ---- */

.ff5-search-results li {
	margin-block-end: var(--ff5-space-3);
}

/* ---- 404 ---- */

.ff5-404__takada {
	font-size: var(--ff5-fs-md);
	font-weight: 700;
}

.ff5-404__piston-niizuma {
	color: var(--ff5-text-muted);
}

.ff5-404__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ff5-space-3);
	margin-block-start: var(--ff5-space-5);
}

/* ===== 06-utilities.css ===== */
/* ============================================================
   06-utilities.css — 最小限のユーティリティ
   ============================================================ */

/* 視覚的に隠すが支援技術には読ませる */
.ff5-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* スキップリンク: 最初のフォーカス対象(docs/06 §7.4)。
   フォーカス時のみ画面内に現れる */
.ff5-skip-link {
	position: absolute;
	left: var(--ff5-space-3);
	top: var(--ff5-space-3);
	z-index: 400;
	padding: var(--ff5-space-2) var(--ff5-space-3);
	background: var(--ff5-bg-elev);
	color: var(--ff5-text);
	border-radius: var(--ff5-radius-sm);
	transform: translateY(-200%);
}

.ff5-skip-link:focus {
	transform: none;
}