/* =========================================================
   AMK アドベンチャー周遊 ティザー／ヒントサイト 共通スタイル
   ホット沖縄総合研究所 2026-08-23  v2（エンタメ・アドベンチャー版）
                       2026-09-26  v3（文字組みと動きのエンタメ化）

   - ビルド不要。テーマは <body class="theme-night"> / "theme-day" で切替
   - カラーはあしびからの確定ロゴ／テーマカラー受領後に :root を差し替える

   v3 で足したもの（2026-09-26 白石指示「もっとエンタメっぽく。フォントや文字サイズを工夫。
   アニメーションを入れて」）
     見出し ：英字の大きなゴースト／1文字ずつの登場／数字だけ大きく（ジャンプ率）／飾り罫
     本文   ：字を一段大きく・明るく／強調語に金のマーカーを引く
     章     ：筆の大字（音・言・海・森／起・承・転・結）／順路レール（灯り・蜂が進む）／落款
     そのほか：マーキー帯／開幕カウントダウン／台詞のタイプ表示／ヒーローの幕開け（点灯・朝の光）
              ／題字ロゴを筆で書くように出す／光芒／カードの傾き（PCのみ）／読了バー／和紙の粒
   ★色は生成り・墨藍・首里朱・王国金（＋発光金）の中だけで出す。
     ネオン・蛍光・ポップな原色・コミック表現は AMK の世界観を壊す
     （2026-09-17 パネルの派手4案で「下品」と却下済み。「派手」は金・朱・光輪・文様で出す）

   ★触るときの地雷（実測で踏んだもの。消さないこと）
     1. body に overflow を書かない → bodyがスクロールコンテナ化し、
        ページスクロールとアンカー移動が丸ごと壊れる。html の overflow-x: clip を使う
     2. アンカー着地の余白は html の scroll-padding-top だけで管理する
        （要素側に scroll-margin-top を足すと二重にオフセットされる）
     3. スマホのヘッダー高は scroll-padding-top(88px) を超えさせない
     4. span.icon-wrap はブロック化しないと幅指定が効かない
     5. 演出の初期状態（opacity:0 等）は必ず .js-anim の中に書く（JSが落ちても本文が消えない）
     6. 登場の動きは translate / scale / rotate（個別プロパティ）で付ける。
        transform はホバーの傾き専用。同じ transform を取り合うと片方が効かなくなる
        （v2 では登場後の transform:none がカードのホバー浮きを打ち消していた）
     7. 和文を含む要素に font-style: italic を掛けない（和文が機械的に斜めに崩れる）。
        斜体は欧文・数字だけの要素（.ghost / .digit / .mq-en / .feature-no 等）に限る
     8. 1文字ずつの登場は span を inline のまま使う（inline-block にしない）。
        inline なら改行位置と禁則（「、」「。」を行頭に置かない等）をブラウザが守る
   ========================================================= */

:root {
  /* ブランド共通アクセント（夜昼で固定） */
  --shuri-red: #C73E2E;    /* 首里の朱＝Year1テーマカラー */
  --kingdom-gold: #D9A441; /* 王国の金 */
  --gold-lit: #F3D896;     /* 発光した金 */
  --gold-deep: #B8891F;    /* 生成りの地に載せる金（#D9A441 のままだと明るい地で沈む） */

  /* 夜 */
  --n-bg: #060F1E;
  --n-bg-2: #0E2039;
  --n-text: #F1F6FC;
  --n-muted: #A8BDD6;
  --n-line: rgba(159, 196, 232, .20);
  --n-glow: #9FC4E8;

  /* 昼 */
  --d-bg: #FBF7EF;
  --d-bg-2: #FFFFFF;
  --d-text: #1B2A38;
  --d-muted: #5C7288;
  --d-line: rgba(27, 42, 56, .14);
  --d-glass: #4FA3C7;

  --radius: 16px;
  --maxw: 1120px;

  --font: "Zen Kaku Gothic New", "BIZ UDPGothic", "Hiragino Kaku Gothic ProN",
          "Yu Gothic", -apple-system, BlinkMacSystemFont, sans-serif;
  /* ★書体は確定ロゴ（AMKロゴ_朱）に合わせて選定している。
     ロゴの欧文＝コントラストの強い重い明朝体（ディドネ系）
     ロゴの和文「琉球王国の夜明け」＝明朝
     したがって、欧文＝Playfair Display、和文見出し＝Zen Old Mincho で揃える。
     ここを変えるとロゴだけ浮くので、変更時はロゴと並べて確認すること
     ★v3 の斜体（ゴースト・数字）も同じ Playfair Display の italic。別の欧文書体は足していない */
  --font-display: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --font-en: "Playfair Display", "Times New Roman", serif;
  /* 筆の大字（章の一文字・落款・夜／昼の表見出し）だけに使う。本文・見出しには使わない。
     題字ロゴ（マブイの探し物／ニライカナイ）が筆なので、そこと呼応させる。
     ★Google Fonts の text= で「使う字だけ」を読み込んでいる（各HTMLの <link> を参照）。
       ここに無い字を筆で出したいときは、HTML 3枚の text= に字を足すこと。
       足さないと明朝で代わりに表示される（崩れはしない） */
  --font-brush: "Yuji Syuku", "Zen Old Mincho", "Hiragino Mincho ProN", serif;

  --ease-out: cubic-bezier(.16, .84, .34, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);

  /* 登場（opacity・translate）とホバー（transform・影・枠）の transition を1本にまとめたもの。
     ★部品側で transition を別に書くと、登場の遅延かホバーのどちらかが上書きで消える。
       登場する部品はこれを使い、遅延は transition-delay の「列ごと」に指定する（下の登場の節） */
  --tr-reveal: opacity .85s var(--ease-out), translate .85s var(--ease-out),
               transform .35s var(--ease-out), box-shadow .45s ease,
               border-color .45s ease, background-color .45s ease;
}

.theme-night {
  --bg: var(--n-bg); --bg-2: var(--n-bg-2); --text: var(--n-text);
  --muted: var(--n-muted); --line: var(--n-line);
  --accent: var(--kingdom-gold); --accent-lit: var(--gold-lit);
  --spot: var(--n-glow);
  /* v3：本文は muted より一段明るくする。字を大きくしたぶん、灰色で沈めると弱く見える */
  --body: #D3DFEC;
  --marker: color-mix(in srgb, var(--kingdom-gold) 42%, transparent);
  --ghost: color-mix(in srgb, var(--kingdom-gold) 28%, transparent);
  --digit: var(--gold-lit);
  --kanji: var(--kingdom-gold);
}
.theme-day {
  --bg: var(--d-bg); --bg-2: var(--d-bg-2); --text: var(--d-text);
  --muted: var(--d-muted); --line: var(--d-line);
  --accent: var(--shuri-red); --accent-lit: #E2705F;
  --spot: var(--d-glass);
  --body: #34485C;
  --marker: color-mix(in srgb, var(--kingdom-gold) 46%, transparent);
  /* ★昼の透かし（ゴースト・章の大字）は朱ではなく金にする。朱を薄めると桃色に転び、
     和紙の世界観から外れる。朱は落款とアクセントだけに使う */
  --ghost: color-mix(in srgb, var(--gold-deep) 38%, transparent);
  --digit: var(--shuri-red);
  --kanji: var(--gold-deep);
}

* { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
  overflow-x: clip;
}
body {
  position: relative; /* .ambient の基準 */
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  line-height: 1.9;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }

/* 読み上げ専用（1文字ずつ分割した見出しは、元の文をここで1回だけ読ませる） */
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.wrap { width: min(100% - 2.4rem, var(--maxw)); margin-inline: auto; }
/* ★overflow-x: clip は「横だけ切る」。見出しの英字ゴースト（画面幅より広い）や
   スポットライトがページの横幅を押し広げないようにする（v3 初版で横幅が 2088px に膨らんだ）。
   hidden ではなく clip にすること（hidden はスクロールコンテナになり、縦方向の表示も変わる） */
.section { padding: clamp(4.4rem, 11vw, 8.5rem) 0; position: relative; overflow-x: clip; }

/* 全ページ共通の地の質感：うっすらした光だまり */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(120% 80% at 50% -10%, color-mix(in srgb, var(--spot) 12%, transparent), transparent 60%),
    radial-gradient(90% 60% at 100% 100%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 60%);
  animation: bgDrift 40s ease-in-out infinite alternate;
}
@keyframes bgDrift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(-3%, 2%, 0) scale(1.12); }
}
/* v3：和紙の粒。ベタ塗りのデジタル感を消して、紙に刷った質感にする。
   ★本文より下（z-index:0）に敷く。上に被せると文字がざらつく。
   ★mix-blend-mode は使わない（全面固定の層で合成すると、スクロールのたびに再合成して重い） */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-size: 240px 240px;
}
.theme-night::after {
  opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .94 0 0 0 0 .8 .6 0 0 0 -.26'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.theme-day::after {
  opacity: .55;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .35 0 0 0 0 .2 .62 0 0 0 -.27'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
body > * { position: relative; z-index: 1; }
body > .ambient { z-index: 0; } /* 浮遊層だけは本文の背面に置く */

/* ---------- ヘッダー ---------- */
.site-header {
  position: sticky; top: 0; z-index: 60;
  backdrop-filter: blur(14px);
  background: color-mix(in srgb, var(--bg) 60%, transparent);
  border-bottom: 1px solid transparent;
  transition: background .45s, border-color .45s, box-shadow .45s;
}
/* 少しでもスクロールしたら地を締める（JSが .is-stuck を付ける） */
.site-header.is-stuck {
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  border-bottom-color: var(--line);
  box-shadow: 0 10px 40px -30px #000;
}
/* v3：読了バー。どこまで読んだかを金（昼は朱）の線で示す。JSが --sp（0〜1）を入れる */
.site-header::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 25%, transparent), var(--accent) 55%, var(--accent-lit));
  box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 55%, transparent);
  transform-origin: 0 50%; transform: scaleX(var(--sp, 0));
  pointer-events: none;
}
.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; min-height: 62px;
}
.brand {
  display: flex; align-items: center; gap: .7rem;
  font-family: var(--font-en); font-weight: 700;
  letter-spacing: .14em; font-size: .92rem; text-decoration: none;
}
.brand-logo {
  flex: 0 0 auto; width: auto; height: 34px;
  transition: transform .4s var(--ease-out), filter .4s;
}
.theme-day .brand-logo { filter: drop-shadow(0 1px 3px rgba(0,0,0,.5)); }
.brand:hover .brand-logo { transform: scale(1.05); }
.brand-text { display: block; }
.brand b {
  display: block; font-family: var(--font); font-size: .64rem;
  letter-spacing: .22em; color: var(--accent); font-weight: 500;
}
.navlinks { display: flex; gap: .35rem; flex-wrap: wrap; }
.navlinks a {
  position: relative; text-decoration: none; font-size: .8rem; letter-spacing: .08em;
  padding: .45rem .9rem; border: 1px solid var(--line); border-radius: 999px;
  white-space: nowrap; transition: color .25s, border-color .25s, box-shadow .25s, background .25s;
}
.navlinks a:hover, .navlinks a[aria-current="page"] {
  border-color: var(--accent); color: var(--accent-lit);
  box-shadow: 0 0 18px -6px var(--accent);
}
.navlinks a[aria-current="page"] { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.theme-day .navlinks a:hover, .theme-day .navlinks a[aria-current="page"] { color: var(--shuri-red); }
@media (max-width: 640px) {
  .site-header .wrap { min-height: 52px; gap: .5rem; }
  /* ★ロゴに同じ文言が入っている。9.6pxまで縮んだ文字を並べるより、
     スマホはロゴだけにしたほうが読める。ヘッダー高も詰まる */
  .brand-text { display: none; }
  .brand-logo { height: 27px; }
  /* ★2026-10-23：ロゴには「KANUCHA」が入っていない。施設名は「アドベンチャーミュージアム カヌチャ」なので、
     スマホでもロゴの下に小さく KANUCHA を添える（白石さん指示：すべての成果物で「カヌチャ」まで書く） */
  .brand { flex-direction: column; align-items: center; gap: 0; }
  .brand::after { content: "KANUCHA"; font-family: var(--font-en); font-weight: 700; font-size: .5rem; letter-spacing: .32em; line-height: 1.2; color: var(--accent); padding-left: .32em; }
  .navlinks { flex-wrap: nowrap; gap: .25rem; }
  .navlinks a { font-size: .75rem; letter-spacing: .02em; padding: .45rem .7rem; }
}
/* ★狭幅の実測（横並び3つ＝TOP／夜の冒険／昼の冒険）
     640px用の寸法のままだと nav が 278px あり、ロゴ52px＋間隔と足して
     .wrap（幅−2.4rem）を 374px 以下で越える＝右のボタンが見切れる。
     ここで詰めて 360px まで収める */
@media (max-width: 400px) {
  .navlinks { gap: .2rem; }
  .navlinks a { font-size: .72rem; letter-spacing: 0; padding: .42rem .52rem; }
}
/* 320px級はロゴも一段落とさないと入らない */
@media (max-width: 340px) {
  .brand-logo { height: 22px; }
}

/* =========================================================
   HERO ★ここが主役
   構造：hero-media（画像・ケンバーンズ）→ hero-scrim（読ませる覆い）
        → hero-vignette → hero-rays（光芒・v3）→ hero-particles（光の粒）
        → wrap（本文）→ scroll-cue
   ========================================================= */
.hero {
  position: relative;
  min-height: min(100svh, 880px);
  display: flex; align-items: center;
  padding: clamp(5rem, 12vw, 7rem) 0 clamp(5rem, 10vw, 6rem);
  overflow: hidden;
  isolation: isolate;
}
.hero-media, .hero-scrim, .hero-particles, .hero-vignette {
  position: absolute; inset: 0; pointer-events: none;
}
.hero-media {
  z-index: -3;
  background-color: var(--bg);
  background-size: cover; background-position: center;
  transform: scale(1.08);
  opacity: 0;
  transition: opacity 1.2s var(--ease-out);
}
.hero.has-image .hero-media {
  opacity: 1;
  animation: kenburns 26s ease-in-out infinite alternate;
}
@keyframes kenburns {
  from { transform: scale(1.06) translate3d(0, 0, 0); }
  to   { transform: scale(1.16) translate3d(-1.6%, -1.8%, 0); }
}

/* 画像がまだ無いときの下地 */
.hero-scrim { z-index: -2; }
.hero-scrim::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(70% 55% at 18% 12%, color-mix(in srgb, var(--spot) 26%, transparent), transparent 70%),
    radial-gradient(60% 50% at 88% 80%, color-mix(in srgb, var(--shuri-red) 22%, transparent), transparent 70%),
    var(--bg);
  transition: opacity .8s;
}
.hero.has-image .hero-scrim::before { opacity: 0; }
/* 画像が入ったときの、文字を読ませる覆い */
.hero-scrim::after {
  content: ""; position: absolute; inset: 0; opacity: 0;
  transition: opacity 1.2s var(--ease-out);
  background: linear-gradient(
    100deg,
    color-mix(in srgb, var(--bg) 92%, transparent) 0%,
    color-mix(in srgb, var(--bg) 76%, transparent) 40%,
    color-mix(in srgb, var(--bg) 22%, transparent) 72%,
    transparent 100%);
}
.hero.has-image .hero-scrim::after { opacity: 1; }
@media (max-width: 820px) {
  .hero-scrim::after {
    background: linear-gradient(
      180deg,
      color-mix(in srgb, var(--bg) 62%, transparent) 0%,
      color-mix(in srgb, var(--bg) 84%, transparent) 42%,
      color-mix(in srgb, var(--bg) 96%, transparent) 100%);
  }
}
/* 周辺光量を落として画面を締める */
.hero-vignette {
  z-index: -1;
  box-shadow: inset 0 0 clamp(80px, 14vw, 220px) clamp(20px, 5vw, 80px)
              color-mix(in srgb, var(--bg) 80%, transparent);
}

/* --- v3：光芒（後光）。「琉球王国の夜明け」の夜明けの光として、題字の背後でゆっくり回る。
   ★中央寄せは margin で行う（rotate のアニメーションと transform を取り合わせない）。
   ★回転は合成（GPU）だけで済むので重くない。
   ★くっきりした放射線にしない。丸い月と組むと旭日旗の意匠に見える（国外客・地域への配慮）。
     帯の縁をぼかし（三角波のグラデ＋blur）、薄く保って「光のにじみ」に留める --- */
.hero-rays {
  position: absolute; z-index: -1; pointer-events: none;
  left: 50%; top: 46%;
  width: 150vmax; height: 150vmax; margin: -75vmax 0 0 -75vmax;
  background: repeating-conic-gradient(from 0deg,
              color-mix(in srgb, var(--accent-lit) 16%, transparent) 0deg,
              transparent 3.5deg,
              transparent 7deg,
              color-mix(in srgb, var(--accent-lit) 16%, transparent) 10.5deg);
  -webkit-mask-image: radial-gradient(closest-side, rgba(0,0,0,.8) 4%, rgba(0,0,0,.4) 26%, transparent 58%);
          mask-image: radial-gradient(closest-side, rgba(0,0,0,.8) 4%, rgba(0,0,0,.4) 26%, transparent 58%);
  filter: blur(5px);
  opacity: .32;
  animation: raysSpin 140s linear infinite;
}
.theme-day .hero-rays {
  background: repeating-conic-gradient(from 0deg,
              rgba(255, 253, 244, .7) 0deg, transparent 3.5deg,
              transparent 7deg, rgba(255, 253, 244, .7) 10.5deg);
  opacity: .42;
}
@keyframes raysSpin { to { rotate: 360deg; } }
.js-anim .hero-rays { opacity: 0; transition: opacity 2.4s ease .6s; }
.js-anim .hero.is-ready .hero-rays { opacity: .32; }
.js-anim .theme-day .hero.is-ready .hero-rays { opacity: .42; }

/* --- 光の粒（JSで生成） --- */
.hero-particles { z-index: -1; overflow: hidden; }
.hero-particles i {
  position: absolute; display: block; border-radius: 50%;
  background: var(--accent-lit);
  opacity: 0; will-change: transform, opacity;
  animation: drift linear infinite;
  box-shadow: 0 0 10px 2px color-mix(in srgb, var(--accent-lit) 55%, transparent);
}
@keyframes drift {
  0%   { opacity: 0; transform: translate3d(0, 30px, 0) scale(.6); }
  12%  { opacity: .95; }
  70%  { opacity: .7; }
  100% { opacity: 0; transform: translate3d(var(--dx, 20px), -160px, 0) scale(1.15); }
}
/* 昼のヒーロー：蜂を飛ばす（画像を使う粒） */
.hero-particles i.bee {
  border-radius: 0; background: none;
  background-image: url("icons/bee.png");
  background-size: contain; background-repeat: no-repeat; background-position: center;
  box-shadow: none;
  animation-name: beeFly;
  animation-timing-function: ease-in-out;
  filter: drop-shadow(0 1px 3px rgba(60, 50, 20, .35));
}
@keyframes beeFly {
  0%   { opacity: 0; transform: translate3d(0, 0, 0) rotate(-8deg); }
  7%   { opacity: .95; }
  22%  { transform: translate3d(16vw, -5vh, 0) rotate(7deg); }
  44%  { transform: translate3d(34vw, 4vh, 0) rotate(-9deg); }
  66%  { transform: translate3d(54vw, -7vh, 0) rotate(6deg); }
  88%  { opacity: .9; transform: translate3d(76vw, 3vh, 0) rotate(-5deg); }
  100% { opacity: 0; transform: translate3d(92vw, -1vh, 0) rotate(4deg); }
}

/* 昼は光の粒ではなく、花びらを落とす */
.theme-day .hero-particles i:not(.bee) {
  border-radius: 60% 40% 55% 45% / 55% 45% 60% 40%;
  background: #fff;
  box-shadow: 0 1px 6px rgba(80, 60, 30, .2);
  animation-name: petalfall;
}
/* 蜂には花びらの形状指定を効かせない */
.theme-day .hero-particles i.bee { border-radius: 0; }
@keyframes petalfall {
  0%   { opacity: 0; transform: translate3d(0, -50px, 0) rotate(0deg); }
  12%  { opacity: .95; }
  100% { opacity: 0; transform: translate3d(var(--dx, 40px), 150px, 0) rotate(320deg); }
}

/* --- ヒーロー右上のロゴ ---
   夜の絵は右上が暗いので白ロゴ、昼と全体版は右上が明るいので朱ロゴを使う
   （各HTMLで src を出し分けている） */
.hero-logo {
  position: absolute; z-index: 3;
  top: clamp(1.1rem, 3vw, 2.4rem);
  right: clamp(1.1rem, 3vw, 2.4rem);
  width: clamp(148px, 20vw, 258px);
  height: auto;
  /* ★ロゴは全ページ白で統一する。昼の絵は右上が明るい（実測132/255）ため、
     白のままでは沈む。濃い影を二重に敷いて輪郭を立たせる */
  filter: drop-shadow(0 3px 14px rgba(0, 0, 0, .5));
  opacity: 0;
}
/* ★白ロゴの視認性は「テーマ」ではなく「その絵の右上が明るいか」で決まる。
   明るい絵のページだけ、hero に data-logo-shade を付けて下敷きを出す。
   （実測：hero-top 145/255・hero-day 132/255 は必要／hero-night 43/255 は不要） */
.hero-logo-shade { display: none; }
.hero[data-logo-shade] .hero-logo-shade {
  display: block;
  position: absolute; z-index: 2; pointer-events: none;
  top: 0; right: 0; width: min(62%, 640px); height: min(48%, 400px);
  background: radial-gradient(70% 70% at 78% 26%,
              rgba(16, 26, 36, .55), rgba(16, 26, 36, .24) 45%, transparent 72%);
}
.hero[data-logo-shade] .hero-logo {
  filter: drop-shadow(0 2px 10px rgba(16, 26, 36, .8))
          drop-shadow(0 0 26px rgba(16, 26, 36, .55));
}
.js-anim .hero-logo { opacity: 0; }
.hero.is-ready .hero-logo { animation: logoIn 1.1s var(--ease-out) .2s forwards; }
.hero.is-shown .hero-logo { opacity: 1 !important; transform: none !important; }
html:not(.js-anim) .hero-logo { opacity: 1; }
@keyframes logoIn {
  from { opacity: 0; transform: translateY(-14px) scale(.96); }
  to   { opacity: 1; transform: none; }
}
@media (max-width: 640px) {
  /* スマホは見出しと重ならないよう、ヒーローの上に余白を足して逃がす */
  .hero-logo { width: clamp(130px, 44vw, 190px); }
  .hero { padding-top: clamp(7.5rem, 26vw, 10rem); }
}

/* --- ヒーロー本文 --- */
.hero .wrap { position: relative; z-index: 2; }
.eyebrow {
  display: inline-block; font-family: var(--font-en); font-weight: 700;
  font-size: .72rem; letter-spacing: .3em;
  padding: .4rem 1.1rem; border: 1px solid var(--accent); color: var(--accent-lit);
  border-radius: 999px; margin-bottom: 1.6rem;
  background: color-mix(in srgb, var(--bg) 55%, transparent);
  box-shadow: 0 0 30px -10px var(--accent);
}
.hero-title-en {
  font-family: var(--font-en); font-weight: 700;
  font-size: clamp(.95rem, 2.4vw, 1.35rem);
  letter-spacing: .34em; color: var(--accent-lit); margin: 0 0 1rem;
  text-shadow: 0 0 26px color-mix(in srgb, var(--accent) 60%, transparent);
}
.hero h1 {
  font-family: var(--font-display); font-weight: 900;
  /* ★最長行「イルミネーションを自在に操って」（15字）が必ず1行に収まる寸法。
     5.9vw を超えると 375px 幅で折り返す。上限は .wrap(1120px) ÷ 15字 が効く
     ★下限は 1.1rem。1.3rem だと 372px 未満で下限が効いてしまい、
       せっかく vw で詰めているのに 15字が .wrap（＝幅−2.4rem）を越えて溢れる。
       実測：320px 幅で 1.3rem 固定＝315px／収まる上限は 281px */
  font-size: clamp(1.1rem, 5.6vw, 4.5rem);
  line-height: 1.3; margin: 0 0 1.4rem; letter-spacing: .01em;
  word-break: keep-all;
}
.hero h1 .nowrap, .hero h1 .hl { white-space: nowrap; }
.theme-night .hero h1 { text-shadow: 0 6px 40px rgba(0, 0, 0, .7); }
.theme-day .hero h1 { text-shadow: 0 2px 24px rgba(255, 255, 255, .75); }
/* ★タイトルは常に見えていること。
   以前は background-clip:text ＋ 背景位置アニメーションで金の光を走らせていたが、
   背景が文字の外へ抜ける位相で文字色が透明になり「タイトルが消える」事故になった。
   文字そのものは必ず不透明な色で塗り、光は影（glow）だけで表現する。 */
.hero h1 .hl {
  display: inline-block;
  color: var(--accent-lit);
  animation: titleGlow 5s ease-in-out infinite;
}
@keyframes titleGlow {
  0%, 100% { text-shadow: 0 0 18px color-mix(in srgb, var(--accent) 45%, transparent),
                          0 6px 40px rgba(0, 0, 0, .7); }
  50%      { text-shadow: 0 0 34px color-mix(in srgb, var(--accent) 85%, transparent),
                          0 6px 40px rgba(0, 0, 0, .7); }
}
.theme-day .hero h1 .hl { color: var(--shuri-red); }
.theme-day .hero h1 .hl {
  animation: titleGlowDay 5s ease-in-out infinite;
}
@keyframes titleGlowDay {
  0%, 100% { text-shadow: 0 2px 20px rgba(255, 255, 255, .9); }
  50%      { text-shadow: 0 2px 34px rgba(255, 255, 255, 1),
                          0 0 22px color-mix(in srgb, var(--shuri-red) 35%, transparent); }
}
.hero .lead {
  font-size: clamp(.95rem, 2.4vw, 1.12rem); color: var(--text);
  max-width: 44ch; opacity: .9;
}
.theme-night .hero .lead { text-shadow: 0 2px 18px rgba(0, 0, 0, .65); }

/* --- ヒーロー入場アニメーション（行ごとにずらす） ---
   ★初期状態で隠すのは .js-anim が付いているときだけ。
     JSが落ちても・rAFが動かない環境でも、本文が消えないようにする（フェイルオープン） */
.js-anim .hero .reveal-line { opacity: 0; transform: translateY(28px); }
/* 遅延は各要素に style="--rd:.26s" で指定する。
   nth-of-type は要素種別ごとに数えるため、span/p/h1 が混ざるヒーローでは使えない */
.hero.is-ready .reveal-line {
  animation: riseIn .9s var(--ease-out) var(--rd, 0s) forwards;
}
@keyframes riseIn { to { opacity: 1; transform: translateY(0); } }
/* 最終保険：演出が進まない環境（非表示タブ等ではCSSアニメーションが停止する）でも
   一定時間後には必ず読める状態にする。JSが .is-shown を付ける */
.hero.is-shown .reveal-line,
.hero.is-shown .scroll-cue { opacity: 1 !important; transform: none !important; }

/* --- v3：ヒーローの幕開け ---
   ページごとに「光の入り方」を変えて、開いた瞬間から物語に入れる。
     TOP ＝中央から光の輪が広がる（アイリス）
     夜  ＝灯りがともる（一度またたいてから点く）＝イルミネーションの点灯
     昼  ＝朝の光（白く飛んだところから色が戻る）
   ★has-image（＝画像が読めた）ときだけ走る。
   ★fill は backwards。終わったら clip-path / filter が外れる（残すと常時合成で重い） */
.hero--gates.has-image .hero-media {
  animation: kenburns 26s ease-in-out infinite alternate,
             irisIn 1.9s var(--ease-out) backwards;
}
@keyframes irisIn {
  from { clip-path: circle(0% at 50% 42%); }
  to   { clip-path: circle(90% at 50% 42%); }
}
body[data-page="night"] .hero.has-image .hero-media {
  animation: kenburns 26s ease-in-out infinite alternate,
             lightUp 2.4s ease-out backwards;
}
@keyframes lightUp {
  0%   { filter: brightness(.06) saturate(.4); }
  26%  { filter: brightness(.6)  saturate(.8); }
  32%  { filter: brightness(.18) saturate(.6); }
  44%  { filter: brightness(1.16) saturate(1.1); }
  100% { filter: brightness(1) saturate(1); }
}
body[data-page="day"] .hero.has-image .hero-media {
  animation: kenburns 26s ease-in-out infinite alternate,
             sunrise 2.6s var(--ease-out) backwards;
}
@keyframes sunrise {
  from { filter: brightness(1.8) saturate(.2) blur(4px); }
  to   { filter: brightness(1) saturate(1) blur(0); }
}

/* --- スクロール誘導 --- */
/* ★中央寄せに transform を使わないこと。
   入場アニメ riseIn の `to { transform: translateY(0) }` と、
   保険の `.hero.is-shown .scroll-cue { transform: none !important }` が
   translateX(-50%) を打ち消し、自分の幅の半分（実測27.7px）だけ右へズレる。
   left/right を張って margin:auto で寄せれば transform に依存しない
   （2026-08-26 修正。トップでは夜と昼の板の間＝画面センターに来る必要がある） */
.scroll-cue {
  position: absolute; left: 0; right: 0; bottom: clamp(1.2rem, 3vw, 2.2rem);
  width: max-content; margin-inline: auto; z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: .55rem;
  font-family: var(--font-en); font-weight: 700;
  font-size: .62rem; letter-spacing: .34em;
  color: var(--muted); text-decoration: none;
}
.js-anim .scroll-cue { opacity: 0; }
.hero.is-ready .scroll-cue { animation: riseIn 1s var(--ease-out) 1.1s forwards; }
.scroll-cue span {
  display: block; width: 1px; height: 46px;
  background: linear-gradient(var(--accent), transparent);
  animation: cue 2.2s ease-in-out infinite;
}
@keyframes cue {
  0%, 100% { transform: scaleY(.35); transform-origin: top; opacity: .35; }
  50%      { transform: scaleY(1);   transform-origin: top; opacity: 1; }
}

/* --- ヒーローの題字ロゴ（night.html / day.html） ---
   ★文字組みではなく画像。夜の原本は 素材/夜_ロゴ_1.png（和紙に墨）。
     地を透過させ、墨を生成り〜金に反転して線を起こしてある。
     → 明るい面に置くと消える。夜の写真の上でだけ使うこと。
   ★PC・タブレットは横位置の一式（1600x636）、スマホは縦組み（900x884）。
     どちらも月とガジュマルは入っている。切替は night.html の <picture> 側にある。
   ★作り直しは `python make_title_logo.py`（手順は README） */
.hero-title-img {
  display: block;
  /* 一式は横に長い。ヒーロー幅いっぱいに近く使わないと題字が小さくなる。
     ★上限1120pxは .wrap の最大幅と同値＝本文カラムいっぱい。これ以上は広げられない
       （広げても min(..., 100%) で .wrap に切られる） */
  width: min(clamp(400px, 92vw, 1120px), 100%);
  height: auto;
  filter: drop-shadow(0 8px 40px rgba(0, 0, 0, .85));
  animation: titleLogoGlow 5s ease-in-out infinite;
}
@media (max-width: 700px) {
  /* 縦組み版はほぼ正方形（900:884）。寸法を別に持つ */
  .hero-title-img { width: min(clamp(260px, 92vw, 420px), 100%); margin-inline: auto; }
}
@keyframes titleLogoGlow {
  0%, 100% { filter: drop-shadow(0 8px 40px rgba(0, 0, 0, .85))
                     drop-shadow(0 0 18px rgba(217, 164, 65, .26)); }
  50%      { filter: drop-shadow(0 8px 40px rgba(0, 0, 0, .85))
                     drop-shadow(0 0 34px rgba(217, 164, 65, .48)); }
}
.hero h1:has(.hero-title-img) { margin: 0 0 1.5rem; line-height: 0; }

/* v3：題字ロゴを「筆で書いていく」ように左から出す（マスクを右から左へ引く）。
   ★マスクは描き終わったら外す（JSが .is-brushed、4秒後の保険で .is-shown）。
     残すとロゴの外側に出る光（drop-shadow）が箱の縁で切れる */
.js-anim .hero .hero-title-img {
  -webkit-mask-image: linear-gradient(90deg, #000 42%, transparent 58%);
          mask-image: linear-gradient(90deg, #000 42%, transparent 58%);
  -webkit-mask-size: 260% 100%; mask-size: 260% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: 100% 0; mask-position: 100% 0;
}
.js-anim .hero.is-ready .hero-title-img {
  animation: brushIn 1.7s cubic-bezier(.55, .08, .28, 1) .3s forwards,
             titleLogoGlow 5s ease-in-out 2s infinite;
}
@keyframes brushIn { to { -webkit-mask-position: 0 0; mask-position: 0 0; } }
.js-anim .hero .hero-title-img.is-brushed,
.js-anim .hero.is-shown .hero-title-img {
  -webkit-mask-image: none; mask-image: none;
}

/* ★夜だけ、ヒーローの覆いを一段濃くする。
   題字ロゴにもガジュマルが入っているため、背景写真のガジュマルがはっきり出ていると
   「樹が2本」に見えて主役が決まらない。背景は気配まで薄めて、ロゴを主役にする。
   ★覆いは必ず「均一なベタ」にすること。
     以前は左を濃く・右を薄くする斜めのグラデにしていたが、
     濃い側と薄い側の境目が帯になって浮いて見えた（実機で確認）。
     グラデにしない＝境目が生まれない */
body[data-page="night"] .hero.has-image .hero-scrim::after {
  background: color-mix(in srgb, var(--bg) 89%, transparent);
}
@media (max-width: 820px) {
  body[data-page="night"] .hero.has-image .hero-scrim::after {
    background: color-mix(in srgb, var(--bg) 90%, transparent);
  }
}
/* 背景写真そのものも一段落とす。覆いだけで沈めるとロゴの金がくすむ */
body[data-page="night"] .hero.has-image .hero-media { opacity: .78; }

/* ★夜／昼のヒーローは中央寄せ。題字ロゴ一本で見せるため、
   左寄せだと右側が間延びする。TOP（左寄せ）には影響させない */
body[data-page="night"] .hero .wrap,
body[data-page="day"]   .hero .wrap { text-align: center; }
body[data-page="night"] .hero .hero-title-img,
body[data-page="day"]   .hero .hero-title-img { margin-inline: auto; }
body[data-page="night"] .hero .lead,
body[data-page="day"]   .hero .lead {
  /* ★max-width に ch は使わない。ch は半角「0」の幅＝和文だと約半分になり、
     1行に収まるはずのコピーが折り返す。和文は em で測ること */
  /* ★上限は最長行が1行に収まる幅。現行の最長は昼の3行目36字＝約741px。
     36em(680px)だと折れる（実際に折れた）。コピーを長くしたら要見直し */
  margin-inline: auto; max-width: 42em;
  /* ★題字ロゴが筆＋明朝なので、コピーもゴシックではなく明朝で受ける。
     ゴシックのままだと題字だけ浮いて、ヒーローが二つの世界に割れる。
     字間を広げて行間を伸ばし、映画の惹句の呼吸にする */
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: .09em;
  line-height: 2.15;
  font-size: clamp(.95rem, 1.5vw, 1.18rem);
  color: color-mix(in srgb, var(--text) 92%, var(--accent-lit));
  text-shadow: 0 2px 20px rgba(0, 0, 0, .85);
}
/* 語の途中で折り返させたくない塊に付ける。
   ★1つの塊を長くしすぎないこと。320px幅では和文14字前後が上限で、
     それを超えると塊ごと画面外へはみ出す（実測で溢れた）。
     文を「読点で切れる短い塊」に割ってから囲むこと */
.nw { white-space: nowrap; }

/* --- 昼のヒーロー ---
   ★夜と同じ構成だが、覆いの濃さは同じ数値にしない。
     夜が92%→89%まで濃いのは、題字ロゴのガジュマルと背景写真のガジュマルが
     衝突するのを防ぐためである。昼の題字は海岸で、背景写真と競合しない。
     昼まで89%にすると絵が真っ白に飛んで、水彩の良さが消える（実測で確認）。 */
body[data-page="day"] .hero.has-image .hero-scrim::after {
  background: color-mix(in srgb, var(--bg) 72%, transparent);
}
@media (max-width: 820px) {
  body[data-page="day"] .hero.has-image .hero-scrim::after {
    background: color-mix(in srgb, var(--bg) 76%, transparent);
  }
}
body[data-page="day"] .hero.has-image .hero-media { opacity: .78; }
/* 昼は地が明るい。墨のコピーに白い影を敷いて絵から浮かせる */
body[data-page="day"] .hero .lead {
  color: #26384A;
  text-shadow: 0 2px 18px rgba(255, 255, 255, .95);
}

/* =========================================================
   トップの左右ゲート（2026-08-26）
   ヒーローの絵は左半分が夜・右半分が昼に割れている。
   その割れ目に合わせて、左＝夜の題字・右＝昼の題字を板として置く。
   板（plate-*.jpg）は和紙地ごと使うため透過しない。板そのものが
   コントラストを作るので、絵の明暗に依存せず必ず読める。
   ========================================================= */
.hero--gates .wrap { text-align: center; }
/* ロゴは中央上部（2026-09-16 右上から移設）。絶対配置をやめて本文の流れの先頭に置く。
   縦中央寄せの本文と、画面幅によらず重ならない。
   中央上部の絵は暗い（実測46/255）ため、下敷き（data-logo-shade）は外している */
.hero--gates .hero-logo {
  position: static;
  display: block;
  margin: 0 auto clamp(1rem, 2.4vw, 1.6rem);
}
.hero--gates .eyebrow { margin-bottom: 1rem; }
/* ガジュマルの葉の上に乗るため、金文字だけでは沈む。濃い影を二重に敷く */
.hero--gates .hero-title-en {
  margin-bottom: clamp(1.4rem, 4vw, 2.4rem);
  text-shadow: 0 2px 10px rgba(0, 0, 0, .95), 0 0 30px rgba(0, 0, 0, .85);
}

/* 左右の絵柄を両方見せたいので、ヒーローの覆いは左右対称の弱いものに差し替える */
.hero--gates.has-image .hero-scrim::after {
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--bg) 62%, transparent) 0%,
      color-mix(in srgb, var(--bg) 18%, transparent) 34%,
      color-mix(in srgb, var(--bg) 30%, transparent) 70%,
      color-mix(in srgb, var(--bg) 72%, transparent) 100%);
}

.hero-gates {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1rem, 3.2vw, 2.6rem);
  align-items: start;
  margin: 0 auto;
  max-width: 1060px;
  perspective: 1400px;
}
/* ★transform はホバーの傾き専用（JSが --rx/--ry を入れる）。登場は rotate/translate で行う */
.hero-gate {
  display: block; text-decoration: none; color: inherit;
  transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--lift, 0px));
  transition: transform .4s var(--ease-out), filter .5s var(--ease-out);
}
/* 板の枠。光の筋（::after）をこの中だけで走らせるため、影も板ではなく枠に付ける */
.plate-frame {
  position: relative; display: block; overflow: hidden;
  border-radius: 10px;
  /* 和紙地の板が絵から浮くよう、縁を締めて影を落とす */
  box-shadow:
    0 18px 46px -14px rgba(0, 0, 0, .78),
    0 0 0 1px color-mix(in srgb, var(--accent) 38%, transparent);
  transition: box-shadow .5s var(--ease-out);
}
.hero-gate-plate {
  display: block; width: 100%; height: auto;
  border-radius: 10px;
}
/* v3：金箔に光が当たるように、ときどき光の筋が板を横切る */
.plate-frame::after {
  content: ""; position: absolute; inset: -30% -70%; pointer-events: none;
  background: linear-gradient(105deg, transparent 42%, rgba(255, 244, 214, .5) 50%, transparent 58%);
  translate: -62% 0;
  animation: plateShine 8s ease-in-out 2.6s infinite;
}
.hero-gate--day .plate-frame::after { animation-delay: 3.4s; }
@keyframes plateShine {
  0%        { translate: -62% 0; }
  20%, 100% { translate: 62% 0; }
}
.hero-gate-go {
  display: block;
  margin-top: clamp(.6rem, 1.6vw, .95rem);
  font-family: var(--font-en); font-weight: 700;
  font-size: clamp(.68rem, 1.7vw, .82rem); letter-spacing: .12em;
  color: var(--accent-lit);
  text-shadow: 0 2px 14px rgba(0, 0, 0, .8);
}
.hero-gate--day .hero-gate-go { color: #ffe6b8; }
@media (hover: hover) {
  .hero-gate:hover { --lift: -6px; }
  .hero-gate:hover .plate-frame {
    box-shadow:
      0 26px 60px -14px rgba(0, 0, 0, .85),
      0 0 0 1px color-mix(in srgb, var(--accent) 80%, transparent),
      0 0 34px -6px color-mix(in srgb, var(--accent) 55%, transparent);
  }
}
.hero-gate:focus-visible { outline: 2px solid var(--accent-lit); outline-offset: 6px; border-radius: 12px; }

/* v3：板は少し奥から回り込んで立ち上がる（夜は左から、昼は右から） */
.js-anim .hero-gate { opacity: 0; translate: 0 30px; rotate: y 24deg; }
.js-anim .hero-gate--day { rotate: y -24deg; }
.hero.is-ready .hero-gate { animation: plateIn 1.4s var(--ease-out) .6s forwards; }
.hero.is-ready .hero-gate--day { animation-delay: .82s; }
@keyframes plateIn { to { opacity: 1; translate: 0 0; rotate: y 0deg; } }
.hero.is-shown .hero-gate { opacity: 1 !important; translate: none !important; rotate: none !important; }

/* スマホは縦積み。ヒーローの絵は上（夜）→下（昼）の順で見えるので順番も合う */
@media (max-width: 720px) {
  .hero-gates { grid-template-columns: 1fr; gap: 1.4rem; max-width: 460px; }
  /* 縦積みにすると最後の「昼の冒険を見る →」が SCROLL と重なる。下に逃がす */
  .hero--gates { min-height: auto; padding-bottom: clamp(6.5rem, 20vw, 8rem); }
  /* 右上ロゴを逃がすためのスマホ用の上余白は、ロゴが流れに入ったので不要 */
  .hero--gates { padding-top: clamp(5rem, 12vw, 7rem); }
}

/* =========================================================
   煽りコピー節（旧ヒーロー本文）— ヒーローの直下に置く
   ★.hero h1 の指定はヒーロー配下限定なので、ここで同じ見え方を作り直している
   ========================================================= */
.pitch { text-align: center; }
.pitch .wrap { max-width: 1080px; }
/* v3：舞台のスポットライト。見出しの背後だけ金の光だまりをゆっくり呼吸させる */
.pitch::before {
  content: ""; position: absolute; left: 50%; top: 4%; z-index: 0; pointer-events: none;
  width: min(1100px, 130vw); height: 72%; margin-left: max(-550px, -65vw);
  background: radial-gradient(50% 50% at 50% 50%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%);
  animation: spotBreath 7s ease-in-out infinite;
}
@keyframes spotBreath { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
.pitch-en {
  font-family: var(--font-en); font-weight: 700;
  font-size: clamp(.9rem, 2.2vw, 1.25rem);
  letter-spacing: .34em; color: var(--accent-lit); margin: 0 0 1.1rem;
  text-shadow: 0 0 26px color-mix(in srgb, var(--accent) 60%, transparent);
}
.pitch h1 {
  font-family: var(--font-display); font-weight: 900;
  /* ★最長行「謎を解くとイルミネーションが」（14字）が1行に収まる寸法。
     375px 幅の .wrap（336px）÷14字＝24px＝6.4vw が上限。6.2vw で少し余らせる。
     上限 4.3rem × 14字＝963px が .pitch .wrap（1080px）に収まる */
  font-size: clamp(1.1rem, 6.2vw, 4.3rem);
  line-height: 1.32; margin: 0 0 1.6rem; letter-spacing: .01em;
  word-break: keep-all;
  text-shadow: 0 6px 40px rgba(0, 0, 0, .7);
}
.pitch h1 .nowrap, .pitch h1 .hl { white-space: nowrap; }
/* ★文字そのものは必ず不透明な色で塗る。光は影だけで表現する（ヒーローと同じ方針） */
.pitch h1 .hl {
  display: inline-block;
  color: var(--accent-lit);
  animation: titleGlow 5s ease-in-out infinite;
}
/* ★2文を <br> で分けている。PCでは1文1行に収まる幅（40em）にする。
   auto-phrase＝文節で折る（Chrome系のみ。Safari は通常の折り返しになるだけで崩れない） */
.pitch .lead {
  font-size: clamp(1rem, 2.4vw, 1.22rem); color: var(--text);
  max-width: 40em; margin: 0 auto; opacity: .95; line-height: 2.05;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .65);
  word-break: auto-phrase; text-wrap: balance;
}
/* v3：本文中の数字だけを大きく（「約80万坪」）。JSが 0 から数え上げる */
.num-pop { white-space: nowrap; }
.num-pop b {
  font-family: var(--font-en); font-style: italic; font-weight: 900;
  font-size: 2.15em; line-height: 0; color: var(--digit);
  padding: 0 .08em 0 .04em; vertical-align: -.06em;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 26px color-mix(in srgb, var(--accent) 55%, transparent);
}

/* --- 開幕の帯（日付＋カウントダウン） ---
   ★カウントダウンの数字はJSが入れる（hidden を外す）。JSが無い環境では日付だけ出る */
.opening {
  position: relative; display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: .5rem 1.8rem;
  width: fit-content; max-width: 100%;
  margin: clamp(2.4rem, 5vw, 3.4rem) auto 0;
  padding: 1.15rem clamp(1.4rem, 4vw, 2.6rem);
  border: 1px solid color-mix(in srgb, var(--accent) 50%, transparent);
  border-radius: 6px;
  background: color-mix(in srgb, var(--bg-2) 60%, transparent);
  box-shadow: 0 0 46px -20px var(--accent);
}
.opening-label {
  font-family: var(--font-en); font-weight: 700; font-size: .74rem;
  letter-spacing: .38em; color: var(--accent);
}
.opening-date {
  display: inline-flex; align-items: baseline; gap: .04em;
  font-family: var(--font-en); font-style: italic; font-weight: 900;
  font-size: clamp(2rem, 5vw, 3rem); line-height: 1; color: var(--accent-lit);
  text-shadow: 0 0 24px color-mix(in srgb, var(--accent) 55%, transparent);
}
.opening-date .od-sep { color: var(--accent); padding: 0 .02em; }
.opening-date .od-w {
  font-style: normal; font-weight: 700; font-size: .3em; letter-spacing: .2em;
  margin-left: .7em; color: var(--accent); align-self: center;
}
.opening-count {
  font-family: var(--font-display); font-weight: 700; font-size: 1.02rem;
  letter-spacing: .08em; color: var(--text);
  padding-left: 1.8rem; border-left: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
}
.opening-count .cd-num {
  font-family: var(--font-en); font-style: italic; font-weight: 900;
  font-size: 2.3em; line-height: 0; color: var(--accent-lit);
  padding: 0 .14em; vertical-align: -.1em; font-variant-numeric: tabular-nums;
  text-shadow: 0 0 22px color-mix(in srgb, var(--accent) 60%, transparent);
}

/* =========================================================
   v3：マーキー帯（ヒーローの直下）。劇場の電飾看板のように文字が流れ続ける。
   ★同じ並びを2組置き、-50% 動かして継ぎ目なく回す。1組は画面幅以上に広げる
   ★aria-hidden。読み上げさせない（中身はページ内の題名の繰り返し）
   ========================================================= */
.marquee {
  position: relative; overflow: hidden; z-index: 2;
  border-block: 1px solid color-mix(in srgb, var(--accent) 38%, transparent);
  background: color-mix(in srgb, var(--bg-2) 55%, var(--bg));
  padding: .95rem 0;
}
.marquee::before, .marquee::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 12%; z-index: 1; pointer-events: none;
}
.marquee::before { left: 0; background: linear-gradient(90deg, var(--bg), transparent); }
.marquee::after  { right: 0; background: linear-gradient(-90deg, var(--bg), transparent); }
.marquee-track {
  display: flex; width: max-content;
  animation: marquee 56s linear infinite;
}
.mq-group {
  display: flex; align-items: center; justify-content: space-around;
  flex: 0 0 auto; min-width: 100vw;
}
.mq-en {
  font-family: var(--font-en); font-style: italic; font-weight: 500;
  font-size: clamp(1.25rem, 2.6vw, 2rem); line-height: 1.2;
  color: var(--accent-lit); white-space: nowrap; padding: 0 .1em;
}
.mq-ja {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(1.05rem, 2.2vw, 1.7rem); line-height: 1.2;
  color: var(--text); white-space: nowrap; letter-spacing: .1em;
}
.theme-day .mq-en { color: var(--shuri-red); }
.mq-sep {
  flex: 0 0 auto; width: .5rem; height: .5rem; margin: 0 clamp(1.1rem, 2.4vw, 1.9rem);
  rotate: 45deg; border: 1px solid var(--accent);
  box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 60%, transparent);
}
@keyframes marquee { to { translate: -50% 0; } }

/* =========================================================
   セクション見出し（v3）
   ラベル（英字）→ 見出し（1文字ずつ）→ 説明 → 飾り罫 の順に起きる。
   背後に英字の大きなゴースト（輪郭だけの斜体）を敷く。ゴーストはJSが data-ghost から作る
   ========================================================= */
.sec-head {
  position: relative; isolation: isolate;
  text-align: center; max-width: 60rem;
  margin: 0 auto clamp(2.6rem, 5.4vw, 4.2rem);
  padding-top: clamp(.6rem, 2vw, 1.4rem);
}
.sec-head .ghost {
  /* ★中央寄せは left/right を画面幅ぶん広げて text-align で行う（transform を使わない）。
     はみ出したぶんは html の overflow-x:clip で切れる＝横スクロールは出ない */
  position: absolute; left: -50vw; right: -50vw; top: 50%; z-index: -1;
  margin-top: -.56em;
  text-align: center; white-space: nowrap; pointer-events: none; user-select: none;
  font-family: var(--font-en); font-style: italic; font-weight: 500;
  font-size: min(11rem, calc(150vw / (var(--gl, 8) + 1.5)));
  line-height: 1; letter-spacing: -.005em;
  color: transparent;
  -webkit-text-stroke: 1px var(--ghost);
  transition: opacity 1.6s var(--ease-out) .05s, translate 2.2s var(--ease-out) .05s;
}
.sec-head .num {
  display: inline-flex; align-items: center; gap: .9em;
  font-family: var(--font-en); font-weight: 700; color: var(--accent);
  letter-spacing: .34em; font-size: .8rem;
}
.sec-head .num::before, .sec-head .num::after {
  content: ""; display: block; width: 2.6em; height: 1px;
  background: linear-gradient(90deg, transparent, currentColor);
}
.sec-head .num::after { background: linear-gradient(90deg, currentColor, transparent); }
.sec-head h2 {
  font-family: var(--font-display); font-weight: 900;
  /* ★最長行「このイルミネーションの」（11字）が 375px 幅で1行に収まる寸法。
     .wrap 336px ÷ 11字 ＝ 30.6px ＝ 8.1vw が上限。7.8vw で少し余らせる */
  font-size: clamp(1.5rem, 7.8vw, 4rem);
  line-height: 1.38; letter-spacing: .03em;
  margin: .7rem 0 1rem;
  word-break: auto-phrase; overflow-wrap: anywhere;
}
.theme-night .sec-head h2 { text-shadow: 0 4px 36px rgba(0, 0, 0, .55); }
.sec-head p {
  color: var(--body); margin: 0 auto; max-width: 38em;
  font-size: clamp(.98rem, 1.6vw, 1.08rem); line-height: 1.95;
  word-break: auto-phrase; text-wrap: balance;
  transition: opacity .9s var(--ease-out) .5s, translate .9s var(--ease-out) .5s;
}
/* 飾り罫：線・菱形・線。色はマスクで抜いて背景色で塗る（テーマ色に追従させるため） */
.sec-head::after {
  content: ""; display: block; width: 220px; height: 12px; margin: 1.5rem auto 0;
  background: var(--accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='12'%3E%3Cpath d='M0 6h96M124 6h96' stroke='%23000' stroke-width='1'/%3E%3Cpath d='M110 1l5 5-5 5-5-5z' fill='%23000'/%3E%3Ccircle cx='99' cy='6' r='1.6'/%3E%3Ccircle cx='121' cy='6' r='1.6'/%3E%3C/svg%3E") center / 220px 12px no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='12'%3E%3Cpath d='M0 6h96M124 6h96' stroke='%23000' stroke-width='1'/%3E%3Cpath d='M110 1l5 5-5 5-5-5z' fill='%23000'/%3E%3Ccircle cx='99' cy='6' r='1.6'/%3E%3Ccircle cx='121' cy='6' r='1.6'/%3E%3C/svg%3E") center / 220px 12px no-repeat;
  transition: scale 1.3s var(--ease-out) .55s, opacity 1s ease .55s;
}
/* 見出しの中の数字（「3ステップ」「4つ」）だけを大きな斜体の数字にする。JSが span.digit で包む */
.digit {
  font-family: var(--font-en); font-style: italic; font-weight: 900;
  font-size: 1.42em; line-height: 0; color: var(--digit);
  padding: 0 .05em 0 .02em; vertical-align: -.03em;
}
.theme-night .digit { text-shadow: 0 0 28px color-mix(in srgb, var(--accent) 55%, transparent); }

/* ---------- 特徴3カラム（トップ） ---------- */
.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2.2vw, 1.6rem); }
@media (max-width: 860px) { .features { grid-template-columns: 1fr; } }
.feature {
  position: relative; isolation: isolate; text-align: center;
  padding: clamp(2.4rem, 4.2vw, 3rem) clamp(1.4rem, 3vw, 2.1rem) clamp(1.9rem, 3.4vw, 2.5rem);
  border: 1px solid var(--line); border-radius: var(--radius);
  background: linear-gradient(180deg,
              color-mix(in srgb, var(--bg-2) 85%, transparent),
              color-mix(in srgb, var(--bg-2) 45%, transparent));
  overflow: hidden;
  transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--lift, 0px));
  transition: var(--tr-reveal);
}
.feature:hover {
  --lift: -6px;
  border-color: color-mix(in srgb, var(--accent) 60%, var(--line));
  box-shadow: 0 26px 60px -34px var(--accent);
}
.feature-no {
  position: absolute; top: .35rem; left: 1rem; z-index: 0;
  font-family: var(--font-en); font-style: italic; font-weight: 900;
  font-size: clamp(3.6rem, 6vw, 4.8rem); line-height: 1;
  color: transparent; -webkit-text-stroke: 1px color-mix(in srgb, var(--accent) 65%, transparent);
}
.feature .icon-wrap { width: 104px; height: 104px; margin: 0 auto 1.3rem; }
.feature h3 {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(1.4rem, 2.5vw, 1.75rem); line-height: 1.45; margin: 0 0 .8rem;
}
.feature .desc {
  margin: 0; text-align: left; color: var(--body);
  font-size: clamp(.96rem, 1.3vw, 1.02rem); line-height: 1.95; text-wrap: pretty;
}

/* ---------- 遊び方3ステップ（トップ） ----------
   番号は円いメダル。メダル同士を点線の順路でつなぐ（登場時に左から伸びる） */
.steps {
  position: relative; display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.2rem, 2.6vw, 2rem); counter-reset: step;
  padding-top: 2.6rem;
}
@media (max-width: 860px) { .steps { grid-template-columns: 1fr; gap: 2.9rem; } }
.steps::before {
  content: ""; position: absolute; top: 2.6rem; left: 16%; right: 16%;
  border-top: 2px dashed color-mix(in srgb, var(--accent) 45%, transparent);
  transform-origin: 0 50%;
  transition: scale 1.6s var(--ease-out) .25s;
}
.step {
  position: relative; counter-increment: step; text-align: center;
  padding: 3.3rem clamp(1.3rem, 3vw, 1.9rem) 1.9rem;
  border: 1px solid var(--line); border-radius: var(--radius);
  /* 順路の点線が透けないよう、地はほぼ不透明にする */
  background: color-mix(in srgb, var(--bg-2) 90%, var(--bg));
}
.step::before {
  content: counter(step, decimal-leading-zero);
  position: absolute; left: 50%; top: 0; translate: -50% -50%;
  width: 4.5rem; height: 4.5rem; display: grid; place-items: center;
  border-radius: 50%; background: var(--bg);
  border: 1px solid var(--accent);
  outline: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); outline-offset: 4px;
  font-family: var(--font-en); font-style: italic; font-weight: 900;
  font-size: 1.75rem; line-height: 1; color: var(--accent-lit);
  box-shadow: 0 0 32px -8px var(--accent);
  transition: scale .8s var(--ease-spring);
  transition-delay: calc(var(--si, 0) * 170ms + 350ms);
}
.step h3 {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(1.25rem, 2.3vw, 1.5rem); line-height: 1.45; margin: 0 0 .7rem;
}
.step p { margin: 0; font-size: clamp(.96rem, 1.3vw, 1.02rem); color: var(--body); text-align: left; text-wrap: pretty; }

/* ---------- 2つの入口 ---------- */
.gates { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 2.6vw, 1.8rem); }
@media (max-width: 720px) { .gates { grid-template-columns: 1fr; } }
.gates--single { grid-template-columns: 1fr; }
.gate {
  --gi: 92px; /* 右上のアイコンの大きさ。見出しはこの分だけ右を空ける */
  position: relative; isolation: isolate; display: block; text-decoration: none;
  border: 1px solid color-mix(in srgb, var(--corner) 45%, transparent);
  border-radius: var(--radius);
  padding: clamp(2rem, 4.4vw, 3rem) clamp(1.6rem, 4vw, 2.8rem);
  overflow: hidden;
  transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--lift, 0px));
  transition: var(--tr-reveal);
}
.gate:hover { --lift: -6px; border-color: var(--corner); }
.gate--night {
  --corner: var(--kingdom-gold);
  color: #EAF1FA;
  background:
    radial-gradient(1.2px 1.2px at 14% 18%, rgba(243, 216, 150, .9), transparent 70%),
    radial-gradient(1px 1px at 32% 70%, rgba(243, 216, 150, .7), transparent 70%),
    radial-gradient(1.4px 1.4px at 58% 12%, rgba(243, 216, 150, .85), transparent 70%),
    radial-gradient(1px 1px at 76% 44%, rgba(243, 216, 150, .6), transparent 70%),
    radial-gradient(1.2px 1.2px at 88% 82%, rgba(243, 216, 150, .75), transparent 70%),
    radial-gradient(1px 1px at 44% 38%, rgba(243, 216, 150, .5), transparent 70%),
    radial-gradient(120% 90% at 88% 0%, rgba(217, 164, 65, .18), transparent 55%),
    linear-gradient(160deg, #071429, #16304f 70%, #1d3f66);
  box-shadow: 0 18px 60px -30px #000;
}
.gate--night:hover { box-shadow: 0 24px 70px -26px var(--kingdom-gold); }
.gate--day {
  --corner: var(--shuri-red);
  color: #1B2A38;
  background:
    radial-gradient(120% 90% at 88% 0%, rgba(199, 62, 46, .09), transparent 55%),
    linear-gradient(160deg, #FFFDF8, #EAF2F7 70%, #DDEBF3);
  box-shadow: 0 18px 60px -34px #6d7f8f;
}
.gate--day:hover { box-shadow: 0 24px 70px -30px var(--shuri-red); }
/* 額縁の四隅（美術館の額のような金具）。::before を使う */
.gate::before, .sealed::before, .opening::before, .feature::before {
  --cc: color-mix(in srgb, var(--corner, var(--accent)) 78%, transparent);
  content: ""; position: absolute; inset: 9px; z-index: 1; pointer-events: none;
  background:
    linear-gradient(var(--cc), var(--cc)) top left / 22px 1px,
    linear-gradient(var(--cc), var(--cc)) top left / 1px 22px,
    linear-gradient(var(--cc), var(--cc)) top right / 22px 1px,
    linear-gradient(var(--cc), var(--cc)) top right / 1px 22px,
    linear-gradient(var(--cc), var(--cc)) bottom left / 22px 1px,
    linear-gradient(var(--cc), var(--cc)) bottom left / 1px 22px,
    linear-gradient(var(--cc), var(--cc)) bottom right / 22px 1px,
    linear-gradient(var(--cc), var(--cc)) bottom right / 1px 22px;
  background-repeat: no-repeat;
}
.opening::before { inset: 5px; }
/* ホバー中の照り返し（マウスの位置に光が来る）。JSが --gx/--gy を入れる */
.gate::after, .feature::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(460px circle at var(--gx, 50%) var(--gy, 0%),
              rgba(255, 244, 214, .15), transparent 45%);
  opacity: 0; transition: opacity .4s;
}
.gate.is-tilting::after, .feature.is-tilting::after { opacity: 1; }
.gate small {
  display: block; font-family: var(--font-en); font-weight: 700;
  letter-spacing: .34em; font-size: .72rem; opacity: .8;
  padding-right: calc(var(--gi) + .4rem);
}
.gate h3 {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(1.65rem, 3.3vw, 2.45rem); line-height: 1.32;
  margin: .6rem 0 .9rem; padding-right: calc(var(--gi) + .4rem);
}
.gate p { font-size: 1rem; opacity: .9; margin: 0 0 1.5rem; line-height: 1.9; }
.gate .gate-logline {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.05rem, 2.2vw, 1.22rem); line-height: 1.85;
  margin: 0 0 1.2rem; opacity: 1;
}
.gate-facts { list-style: none; margin: 0 0 1.7rem; padding: 0; }
.gate-facts li {
  position: relative; padding-left: 1.5rem; font-size: .96rem;
  line-height: 1.85; opacity: .92; margin-bottom: .15rem;
}
.gate-facts li::before {
  content: ""; position: absolute; left: .3rem; top: .78em;
  width: 7px; height: 7px; rotate: 45deg;
  background: currentColor; opacity: .55;
}
.gate--night .gate-facts li::before { background: var(--gold-lit); opacity: 1; }
.gate--day   .gate-facts li::before { background: var(--shuri-red); opacity: 1; }
/* 入口ボタン。矢印だけ小刻みに前へ出て「押せる」ことを知らせる */
.gate .go {
  position: relative; z-index: 3;
  display: inline-flex; align-items: center; gap: .55em;
  font-family: var(--font-display); font-weight: 700; font-size: .98rem; letter-spacing: .08em;
  padding: .72em 1.5em; border-radius: 999px;
  border: 1px solid currentColor;
  transition: background .35s, color .35s, box-shadow .35s;
}
.gate--night .go { color: var(--gold-lit); }
.gate--day   .go { color: var(--shuri-red); }
.gate:hover .go { box-shadow: 0 0 24px -6px currentColor; }
.gate--night:hover .go { background: color-mix(in srgb, var(--kingdom-gold) 16%, transparent); }
.gate--day:hover   .go { background: color-mix(in srgb, var(--shuri-red) 10%, transparent); }
.arr { display: inline-block; transition: translate .35s var(--ease-out); animation: nudge 2.6s ease-in-out infinite; }
a:hover .arr { translate: 5px 0; }
@keyframes nudge { 0%, 70%, 100% { transform: translateX(0); } 80% { transform: translateX(5px); } 90% { transform: translateX(0); } }

/* ---------- アイコン ---------- */
.icon { display: block; width: 100%; height: 100%; object-fit: contain; }
/* span は既定でインラインのため、幅指定を効かせるにはブロック化が要る */
.icon-wrap { display: block; }
.chapter-head .icon-wrap { flex: 0 0 auto; width: 58px; height: 58px; }
.gate-icon {
  position: absolute; right: clamp(1rem, 3vw, 2rem); top: clamp(1rem, 3vw, 2rem); z-index: 1;
  width: var(--gi); height: var(--gi); opacity: .92; pointer-events: none;
  transition: rotate .5s var(--ease-out), scale .5s var(--ease-out);
  animation: iconFloat 6s ease-in-out infinite;
}
.gate:hover .gate-icon { rotate: -5deg; scale: 1.08; }
@keyframes iconFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }
@media (max-width: 480px) { .gate { --gi: 60px; } }
.sealed .icon-wrap { width: 88px; height: 88px; margin: 0 auto 1.3rem; }
/* 夜は紙モノが沈むので発光させる。ゆっくり明滅させて「灯り」に見せる */
.theme-night .icon { filter: drop-shadow(0 0 12px rgba(243, 216, 150, .35)); }
.theme-night .chapter-head .icon-wrap .icon,
.theme-night .feature .icon { animation: emberPulse 4.5s ease-in-out infinite; }
@keyframes emberPulse {
  0%, 100% { filter: drop-shadow(0 0 10px rgba(243, 216, 150, .28)); }
  50%      { filter: drop-shadow(0 0 22px rgba(243, 216, 150, .62)); }
}

/* v3：光輪。アイコンの背後で点線の輪がゆっくり回り、内側の光が呼吸する */
.halo, .chapter-head .icon-wrap, .sealed .icon-wrap {
  position: relative; isolation: isolate;
}
.halo::before, .chapter-head .icon-wrap::before, .sealed .icon-wrap::before {
  content: ""; position: absolute; inset: -16%; border-radius: 50%; pointer-events: none;
  border: 1px dashed color-mix(in srgb, var(--accent) 55%, transparent);
  animation: haloSpin 36s linear infinite;
}
.halo::after, .chapter-head .icon-wrap::after, .sealed .icon-wrap::after {
  content: ""; position: absolute; inset: -4%; border-radius: 50%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--accent-lit) 34%, transparent), transparent);
  animation: haloBreath 4.8s ease-in-out infinite;
}
.theme-day .halo::after, .theme-day .chapter-head .icon-wrap::after, .theme-day .sealed .icon-wrap::after {
  background: radial-gradient(closest-side, rgba(217, 164, 65, .28), transparent);
}
@keyframes haloSpin { to { rotate: 360deg; } }
@keyframes haloBreath { 0%, 100% { opacity: .5; scale: .9; } 50% { opacity: 1; scale: 1.06; } }

/* ---------- 対構造テーブル ---------- */
.pair-table-wrap {
  overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius);
  background: color-mix(in srgb, var(--bg-2) 60%, transparent);
}
table.pair { border-collapse: collapse; width: 100%; min-width: 560px; font-size: 1rem; }
table.pair th, table.pair td { padding: 1.1rem 1.3rem; text-align: left; border-bottom: 1px solid var(--line); }
table.pair thead th {
  font-family: var(--font-display); font-size: .98rem; letter-spacing: .04em;
  color: var(--text); font-weight: 700; vertical-align: bottom; padding-top: 1.5rem;
}
/* 夜・昼の見出しの上に、筆の大字を置く（題字ロゴの筆と呼応させる） */
table.pair thead th:nth-child(2)::before,
table.pair thead th:nth-child(3)::before {
  display: block; font-family: var(--font-brush); font-weight: 400;
  font-size: clamp(2.4rem, 5vw, 3.6rem); line-height: 1.1; margin-bottom: .35rem;
}
table.pair thead th:nth-child(2)::before {
  content: "夜"; color: var(--gold-lit);
  text-shadow: 0 0 26px rgba(217, 164, 65, .5);
}
table.pair thead th:nth-child(3)::before { content: "昼"; color: #E98070; }
.theme-day table.pair thead th:nth-child(2)::before { color: #3f6f9e; text-shadow: none; }
.theme-day table.pair thead th:nth-child(3)::before { color: var(--shuri-red); }
table.pair tbody th { font-weight: 700; color: var(--muted); width: 22%; font-size: .9rem; letter-spacing: .06em; }
table.pair td.n { color: var(--n-glow); }
.theme-day table.pair td.n { color: #3f6f9e; }
table.pair td.d { color: var(--shuri-red); }
.theme-night table.pair td.d { color: #E98070; }
table.pair tr:last-child th, table.pair tr:last-child td { border-bottom: 0; }

/* ---------- 章カード（夜の展示室・昼の地点） ---------- */
.chapter {
  position: relative; isolation: isolate;
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(1.6rem, 4vw, 2.6rem); margin-bottom: 1.4rem;
  background: color-mix(in srgb, var(--bg-2) 72%, transparent);
  backdrop-filter: blur(6px);
  overflow: hidden;
  transition: var(--tr-reveal);
}
.chapter::before {
  /* 左端に灯りの筋 */
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; z-index: 2;
  background: linear-gradient(180deg, transparent, var(--accent), transparent);
  opacity: .35; transition: opacity .45s;
}
.chapter:hover {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
  box-shadow: 0 20px 60px -40px var(--accent);
}
.chapter:hover::before { opacity: 1; }
/* 筆の大字（音・言・海・森／起・承・転・結）。カードの右上に大きく透かして置く。
   ★字は各 article の data-kanji で指定する。筆の書体は text= で読み込んだ字しか出ない */
.chapter[data-kanji]::after {
  content: attr(data-kanji);
  position: absolute; right: .04em; top: -.1em; z-index: 0; pointer-events: none;
  font-family: var(--font-brush); font-weight: 400;
  font-size: clamp(7rem, 17vw, 12.5rem); line-height: 1;
  color: var(--kanji, var(--accent)); opacity: .16;
  transition: opacity 1.6s var(--ease-out) .2s, scale 1.8s var(--ease-out) .2s, translate 1.8s var(--ease-out) .2s;
}
.theme-night .chapter[data-kanji]::after { opacity: .12; text-shadow: 0 0 40px rgba(217, 164, 65, .5); }
.chapter > * { position: relative; z-index: 1; }
.chapter-head { display: flex; align-items: center; gap: .8rem 1.1rem; flex-wrap: wrap; }
.chapter-head .ch-no {
  font-family: var(--font-en); font-style: italic; font-weight: 700;
  font-size: .9rem; letter-spacing: .12em;
  color: var(--accent-lit); border: 1px solid var(--accent);
  border-radius: 999px; padding: .2rem .9rem;
  box-shadow: 0 0 22px -10px var(--accent);
}
/* 昼の「起・承・転・結」は一字なので、朱の落款にする */
.theme-day .chapter-head .ch-no {
  font-family: var(--font-brush); font-style: normal; font-weight: 400;
  display: grid; place-items: center;
  width: 2.5rem; height: 2.5rem; padding: 0; letter-spacing: 0;
  font-size: 1.55rem; line-height: 1;
  color: #FBF3E4; background: var(--shuri-red);
  border: 0; border-radius: 6px; rotate: -6deg;
  box-shadow: inset 0 0 0 2px rgba(251, 243, 228, .35), 0 6px 16px -8px rgba(120, 30, 20, .8);
}
.chapter-head h3 {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(1.55rem, 3.6vw, 2.3rem); line-height: 1.35; margin: 0;
  word-break: auto-phrase;
}
.chapter-head .place {
  display: inline-flex; align-items: center; gap: .35em;
  font-size: .86rem; color: var(--muted); letter-spacing: .08em; font-weight: 500;
}
.chapter-head .place::before {
  content: ""; width: .8em; height: 1.05em; flex: 0 0 auto; background: var(--accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 16'%3E%3Cpath d='M6 0a6 6 0 0 0-6 6c0 4.5 6 10 6 10s6-5.5 6-10a6 6 0 0 0-6-6zm0 8.4A2.4 2.4 0 1 1 6 3.6a2.4 2.4 0 0 1 0 4.8z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 16'%3E%3Cpath d='M6 0a6 6 0 0 0-6 6c0 4.5 6 10 6 10s6-5.5 6-10a6 6 0 0 0-6-6zm0 8.4A2.4 2.4 0 1 1 6 3.6a2.4 2.4 0 0 1 0 4.8z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.chapter .desc {
  color: var(--body); font-size: clamp(.98rem, 1.4vw, 1.06rem); line-height: 1.95;
  margin: 1.1rem 0 0; max-width: 46em; text-wrap: pretty;
}
.chapter .theme-note {
  margin-top: 1.2rem; padding: .85rem 1.2rem; font-size: .9rem;
  border-left: 2px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  letter-spacing: .04em; max-width: 46em;
}

/* =========================================================
   v3：順路レール（夜＝灯りが、昼＝蜂が、章から章へ進む）
   章カードを .route で包む。左に点線の道を敷き、スクロールに合わせて金（朱）の線が伸びる。
   通り過ぎた章の丸が灯る。JSが --route（0〜1）と丸・目印を入れる
   ★丸と目印は .route の子として置く。章カードの中に置くと overflow:hidden で切れる
   ========================================================= */
.route {
  --rail-pad: clamp(52px, 7vw, 78px);
  --rail-x: calc(var(--rail-pad) * .36);
  position: relative; padding-left: var(--rail-pad);
}
.route::before {
  content: ""; position: absolute; left: var(--rail-x); top: 14px; bottom: 14px;
  border-left: 2px dashed color-mix(in srgb, var(--accent) 40%, transparent);
  translate: -1px 0;
}
.route-fill {
  position: absolute; left: var(--rail-x); top: 14px; width: 2px; translate: -1px 0;
  height: calc((100% - 28px) * var(--route, 0));
  border-radius: 2px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 25%, transparent), var(--accent) 35%, var(--accent-lit));
  box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 70%, transparent);
}
.route-marker {
  position: absolute; z-index: 3; pointer-events: none;
  left: var(--rail-x); top: calc(14px + (100% - 28px) * var(--route, 0));
  width: 46px; height: 46px; margin: -23px 0 0 -23px;
}
.route-marker img {
  width: 100%; height: 100%; object-fit: contain;
  animation: markerBob 2.4s ease-in-out infinite;
  filter: drop-shadow(0 0 12px color-mix(in srgb, var(--accent-lit) 75%, transparent));
}
.theme-day .route-marker img {
  animation: beeHover .9s ease-in-out infinite;
  filter: drop-shadow(0 3px 6px rgba(60, 50, 20, .35));
}
@keyframes markerBob { 0%, 100% { translate: 0 -3px; rotate: -4deg; } 50% { translate: 0 3px; rotate: 4deg; } }
@keyframes beeHover  { 0%, 100% { translate: -2px -2px; rotate: -8deg; } 50% { translate: 2px 2px; rotate: 6deg; } }
.route-node {
  position: absolute; z-index: 2; left: var(--rail-x);
  width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%;
  background: var(--bg); border: 2px solid color-mix(in srgb, var(--accent) 50%, transparent);
  transition: background .45s, border-color .45s, box-shadow .45s, scale .5s var(--ease-spring);
}
.route-node.is-passed {
  background: var(--accent); border-color: var(--accent-lit); scale: 1.15;
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 20%, transparent), 0 0 20px var(--accent);
}

/* ---------- ヒント ---------- */
.hint-block { margin-top: 1.6rem; border-top: 1px dashed var(--line); padding-top: 1.35rem; }
.hint-block > .hint-label {
  display: flex; align-items: center; gap: .55rem;
  font-family: var(--font-display); font-weight: 700;
  font-size: .98rem; letter-spacing: .12em; color: var(--accent); margin-bottom: .9rem;
}
/* おばぁの「ささやき」＝吹き出しの印 */
.hint-block > .hint-label::before {
  content: ""; width: 1.25rem; height: 1.05rem; flex: 0 0 auto; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 17'%3E%3Cpath d='M10 0C4.5 0 0 3.3 0 7.4c0 2.4 1.5 4.5 3.8 5.8L3 17l4.3-2.4c.9.2 1.8.3 2.7.3 5.5 0 10-3.3 10-7.4S15.5 0 10 0z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 17'%3E%3Cpath d='M10 0C4.5 0 0 3.3 0 7.4c0 2.4 1.5 4.5 3.8 5.8L3 17l4.3-2.4c.9.2 1.8.3 2.7.3 5.5 0 10-3.3 10-7.4S15.5 0 10 0z'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* まだヒントが無い謎は、名札だけを横に並べる（縦に「準備中」を並べて間延びさせない） */
.puzzle-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .7rem; }
.chip {
  font-size: .84rem; font-weight: 700; letter-spacing: .06em;
  padding: .28rem .95rem; border-radius: 999px;
  border: 1px dashed color-mix(in srgb, var(--accent) 50%, var(--line));
  color: var(--muted); background: color-mix(in srgb, var(--bg) 40%, transparent);
}
.puzzle { margin-bottom: 1rem; }
.puzzle > .p-name { font-size: .95rem; font-weight: 700; margin-bottom: .5rem; letter-spacing: .06em; }
details.hint {
  border: 1px solid var(--line); border-radius: 10px;
  margin-bottom: .5rem; overflow: hidden;
  background: color-mix(in srgb, var(--bg) 55%, transparent);
  transition: border-color .3s;
}
details.hint:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
details.hint > summary {
  cursor: pointer; list-style: none; padding: .85rem 1.1rem;
  font-size: .94rem; display: flex; align-items: center; gap: .7rem;
  min-height: 44px; /* 現地・スマホ前提のタップ領域 */
  transition: background .25s;
}
details.hint > summary::-webkit-details-marker { display: none; }
details.hint > summary::before {
  content: "＋"; color: var(--accent); font-size: .95rem; flex: 0 0 auto;
  transition: transform .3s var(--ease-out);
}
details.hint[open] > summary::before { content: "－"; transform: rotate(180deg); }
details.hint > summary:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }
details.hint .body {
  padding: 0 1.1rem 1.1rem 2.5rem; font-size: 1rem; color: var(--body);
  animation: unfold .4s var(--ease-out);
}
@keyframes unfold { from { opacity: 0; transform: translateY(-6px); } }
details.hint.answer { border-color: color-mix(in srgb, var(--shuri-red) 55%, var(--line)); }
details.hint.answer > summary { color: var(--shuri-red); font-weight: 700; }
.theme-night details.hint.answer > summary { color: #E98070; }
details.hint.answer > summary::before { content: "！"; }
.answer-guard {
  font-size: .86rem; color: var(--muted);
  border: 1px dashed var(--line); border-radius: 8px;
  padding: .75rem .95rem; margin-bottom: .75rem;
}
/* ★斜体にしない（和文が機械的に斜めになって崩れる） */
.pending { font-size: .92rem; color: var(--muted); margin: 0; }

/* ---------- 封印セクション ---------- */
.sealed {
  position: relative; isolation: isolate;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line));
  border-radius: var(--radius);
  padding: clamp(2.4rem, 5vw, 3.4rem) clamp(1.4rem, 4vw, 2.8rem); text-align: center;
  background:
    radial-gradient(70% 90% at 50% 0%, color-mix(in srgb, var(--accent) 15%, transparent), transparent 70%),
    color-mix(in srgb, var(--bg-2) 60%, transparent);
  overflow: hidden;
}
.sealed h3 {
  font-family: var(--font-display); font-weight: 900;
  margin: 0 0 .8rem; font-size: clamp(1.45rem, 3.4vw, 2.05rem); line-height: 1.4;
}
.sealed p { color: var(--body); font-size: clamp(.98rem, 1.4vw, 1.05rem); margin: 0; line-height: 1.95; }
.sealed .icon-wrap .icon { animation: emberPulse 3.6s ease-in-out infinite; }
/* 落款。封（夜）・秘（昼）を朱の印で押す。登場時に上から押し付けるように落ちてくる */
.seal {
  position: absolute; top: clamp(1rem, 3vw, 1.6rem); right: clamp(1rem, 3vw, 1.6rem); z-index: 3;
  display: grid; place-items: center;
  width: clamp(3rem, 7vw, 3.8rem); height: clamp(3rem, 7vw, 3.8rem);
  font-family: var(--font-brush); font-size: clamp(1.8rem, 4.2vw, 2.35rem); line-height: 1;
  color: #FBF3E4; background: var(--shuri-red);
  border-radius: 7px; rotate: -9deg;
  box-shadow: inset 0 0 0 2px rgba(251, 243, 228, .38), 0 8px 20px -10px rgba(90, 20, 10, .9);
  /* 朱肉のかすれ（印面のところどころを抜く） */
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='2' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.6 2.05'/%3E%3C/filter%3E%3Crect width='80' height='80' filter='url(%23k)'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='2' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.6 2.05'/%3E%3C/filter%3E%3Crect width='80' height='80' filter='url(%23k)'/%3E%3C/svg%3E");
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
}

/* ---------- 情報リスト（遊び方・開催概要） ---------- */
dl.info { display: grid; grid-template-columns: 10rem 1fr; gap: 0 1.4rem; margin: 0; font-size: clamp(.98rem, 1.4vw, 1.05rem); }
@media (max-width: 560px) { dl.info { grid-template-columns: 1fr; gap: 0; } }
dl.info dt {
  display: flex; align-items: center; gap: .45em;
  color: var(--accent); font-size: .86rem; letter-spacing: .1em; font-weight: 700;
  padding: 1rem 0; border-bottom: 1px solid var(--line);
}
dl.info dd { margin: 0; padding: 1rem 0; border-bottom: 1px solid var(--line); color: var(--body); line-height: 1.9; }
dl.info dd strong { color: var(--text); }
/* 「STEP 1」の数字だけを大きな斜体にする（JSが span.dt-num で包む） */
dl.info dt .dt-num {
  font-family: var(--font-en); font-style: italic; font-weight: 900;
  font-size: 2em; line-height: .8; letter-spacing: 0; color: var(--digit);
}
@media (max-width: 560px) { dl.info dt { border-bottom: 0; padding-bottom: 0; } }

/* ---------- 注意帯 ---------- */
.notice {
  border: 1px solid color-mix(in srgb, var(--kingdom-gold) 45%, var(--line));
  background: color-mix(in srgb, var(--kingdom-gold) 8%, transparent);
  border-radius: var(--radius); padding: 1.15rem 1.4rem; font-size: .92rem; color: var(--body);
  line-height: 1.9;
}

/* ---------- クイックナビ ---------- */
.quicknav {
  position: sticky; bottom: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
  padding: .55rem 0;
}
.quicknav .wrap { display: flex; gap: .4rem; overflow-x: auto; scrollbar-width: none; }
.quicknav .wrap::-webkit-scrollbar { display: none; }
.quicknav a {
  flex: 0 0 auto; text-decoration: none; font-size: .84rem;
  padding: .6rem 1rem; border: 1px solid var(--line); border-radius: 999px;
  white-space: nowrap;
  display: flex; align-items: center; min-height: 44px; /* 暗所でのタップ領域 */
  transition: color .25s, border-color .25s, box-shadow .25s, background .25s;
}
.quicknav a:hover { border-color: var(--accent); color: var(--accent-lit); }
.quicknav a.is-current {
  border-color: var(--accent); color: var(--accent-lit);
  box-shadow: 0 0 20px -8px var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.theme-day .quicknav a:hover, .theme-day .quicknav a.is-current { color: var(--shuri-red); }

/* ---------- フッター ---------- */
.site-footer {
  position: relative; overflow: hidden;
  border-top: 1px solid var(--line); padding: 3.2rem 0 4.2rem; font-size: .86rem; color: var(--muted);
}
/* 館名を大きな輪郭文字で敷く（ページの締め） */
.footer-mark {
  display: block; margin: 0 0 1.8rem;
  font-family: var(--font-en); font-style: italic; font-weight: 500;
  /* ★本文の段（.wrap）の幅に収める。24字の斜体で 1em≒0.46em×24 ≒ 11em 幅 */
  font-size: min(7.4vw, 5.6rem); line-height: 1.1; letter-spacing: -.01em; white-space: nowrap;
  color: transparent; -webkit-text-stroke: 1px var(--ghost);
}
.site-footer .fnav { display: flex; gap: 1.3rem; flex-wrap: wrap; margin-bottom: 1.2rem; }
.site-footer a { text-decoration: none; }
.site-footer a:hover { color: var(--accent); }

/* =========================================================
   背景の演出（全ページ共通）
   ========================================================= */
/* =========================================================
   浮遊オブジェクト層（全ページ共通・JSで生成）
   スクロール量に応じて層ごとに違う速さで動かす。
   奥行きが出て、ページ全体が「歩いている」感じになる。
   ========================================================= */
/* ★fixed にすると、長いページではスクロールするほどオブジェクトが画面外へ抜け、
   下の方が空になる。ドキュメント全体に敷いて自然に流し、視差は差分だけ与える */
.ambient {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  z-index: 0; pointer-events: none; overflow: hidden;
}
.amb {
  position: absolute; display: block;
  will-change: transform;
}
.amb img {
  display: block; width: 100%; height: auto;
  opacity: var(--o, .14);
  animation: ambFloat var(--dur, 18s) ease-in-out infinite alternate;
  animation-delay: var(--delay, 0s);
}
.theme-night .amb img {
  filter: drop-shadow(0 0 14px rgba(243, 216, 150, .28));
}
.theme-day .amb img {
  filter: drop-shadow(0 2px 8px rgba(60, 80, 100, .18));
}
@keyframes ambFloat {
  from { transform: translate3d(0, 0, 0) rotate(var(--r0, -4deg)); }
  to   { transform: translate3d(var(--ax, 18px), var(--ay, -26px), 0) rotate(var(--r1, 5deg)); }
}

/* ※横切るオブジェクト（.amb--cross）は 2026-08-23 に全ページで不採用。
   背景は「その場で漂うもの」だけで構成する */

/* セクションごとの薄い地紋（アイコンを透かしとして敷く） */
.deco {
  position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0;
}
.deco img {
  position: absolute; width: clamp(56px, 9vw, 148px); height: auto;
  opacity: .10; filter: grayscale(.15);
  animation: floaty 16s ease-in-out infinite alternate;
}
/* ★.deco は overflow:hidden。枠外に置くと見切れるので、
   配置は必ず正の inset（left/right/top/bottom いずれも 1% 以上）にすること。
   浮遊アニメの振れ幅（最大22px）も見込んで余白を取る */
.theme-night .deco img { opacity: .14; }
.deco img:nth-child(2) { animation-duration: 21s; animation-delay: -6s; }
.deco img:nth-child(3) { animation-duration: 26s; animation-delay: -12s; }
.deco img:nth-child(4) { animation-duration: 19s; animation-delay: -3s; }
.deco img:nth-child(5) { animation-duration: 30s; animation-delay: -16s; }
.deco img:nth-child(6) { animation-duration: 24s; animation-delay: -9s; }
@keyframes floaty {
  from { transform: translate3d(0, 0, 0) rotate(-3deg); }
  to   { transform: translate3d(9px, -13px, 0) rotate(4deg); }
}
.section > .wrap { position: relative; z-index: 1; }

/* セクションの境目：中央に菱形、その上を細い光が走る */
/* ★横だけ切る（overflow-x: clip）。走る光は left:-25%〜103% を往復するため、
   切らないと右端を越えた瞬間にページの横幅が広がる（320px 幅で実測 7〜20px はみ出した） */
.rule {
  position: relative; height: 1px; border: 0; margin: 0;
  background: linear-gradient(90deg, transparent, var(--line) 18%, var(--line) 82%, transparent);
  overflow-x: clip; overflow-y: visible;
}
.rule::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 9px; height: 9px;
  margin: -5px 0 0 -5px; rotate: 45deg;
  border: 1px solid var(--accent); background: var(--bg);
  box-shadow: 0 0 14px color-mix(in srgb, var(--accent) 60%, transparent);
}
.rule::after {
  content: ""; position: absolute; top: -1px; left: 0; width: 22%; height: 3px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  filter: blur(1px);
  animation: runLight 7s ease-in-out infinite;
}
@keyframes runLight {
  0%   { left: -25%; opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { left: 103%; opacity: 0; }
}

/* =========================================================
   ストーリー紹介（初見の人向け）
   ========================================================= */
/* v3：本文の段は中央に置き、中の文字は左揃えにする（見出しが中央になったため）。
   ★幅は rem で決める（em だと中の大きな字に引っぱられず、1行の字数が読めない）。
     46rem＝736px。リード（1.45rem）で1行約31字＝「舞台は、〜特別展です。」（27字）が1行に入る */
.story-body { max-width: 46rem; margin-inline: auto; }
.story-body--center { text-align: center; }
.story-lead {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.1rem, 2.4vw, 1.45rem); line-height: 1.9;
  margin: 0 0 1.3rem; text-wrap: pretty;
}
.story-text { color: var(--body); font-size: clamp(1rem, 1.5vw, 1.08rem); line-height: 2; margin: 0 0 1.1rem; text-wrap: pretty; }
.story-text strong { color: var(--text); }

/* 台詞の引用 */
.quote {
  position: relative;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.25rem, 3vw, 1.95rem); line-height: 1.8;
  margin: 2.2rem 0; padding: .3rem 0 .3rem 1.6rem;
  border-left: 3px solid var(--accent);
  color: var(--text);
}
.quote small {
  display: block; margin-top: .8rem; font-family: var(--font);
  font-weight: 400; font-size: .86rem; letter-spacing: .08em; color: var(--muted);
}
/* 夜：声だけのおばぁ。左に声の波形（音の棒）を立てる */
.quote--voice { border-left: 0; padding-left: 3.6rem; }
.theme-night .quote--voice { text-shadow: 0 0 30px rgba(217, 164, 65, .25); }
.voice {
  position: absolute; left: .3rem; top: .45em;
  display: flex; align-items: center; gap: 4px; height: 1.3em;
}
.voice i {
  display: block; width: 3px; height: 30%; border-radius: 2px;
  background: var(--accent-lit);
  box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 80%, transparent);
  animation: voiceBar 1.15s ease-in-out infinite;
}
.voice i:nth-child(2) { animation-delay: -.35s; }
.voice i:nth-child(3) { animation-delay: -.7s; }
.voice i:nth-child(4) { animation-delay: -.2s; }
.voice i:nth-child(5) { animation-delay: -.55s; }
@keyframes voiceBar { 0%, 100% { height: 22%; } 50% { height: 100%; } }
/* 昼：朝に届いたLINE。紙の吹き出しにして、入力中の「…」のあとで文字が打たれていく */
.quote--line {
  border-left: 0; max-width: 34em;
  margin: 2.2rem 0 2.4rem; padding: 1.5rem 1.7rem 1.3rem;
  font-size: clamp(1.1rem, 2.4vw, 1.4rem); line-height: 1.9;
  background: #FFFFFF;
  border-radius: 26px 26px 26px 6px;
  box-shadow: 0 22px 46px -30px rgba(27, 42, 56, .55), 0 0 0 1px rgba(27, 42, 56, .07);
}
.quote--line::after {
  content: ""; position: absolute; left: -10px; bottom: 0; width: 22px; height: 18px;
  background: #FFFFFF; clip-path: polygon(100% 0, 0 100%, 100% 100%);
}
.quote--line small { color: var(--muted); }
.typing { display: none; }
.js-anim .typing {
  position: absolute; left: 1.7rem; top: 1.55rem;
  display: flex; gap: 6px; align-items: center; height: 1.4rem;
}
.typing i {
  width: 8px; height: 8px; border-radius: 50%; background: var(--d-muted); opacity: .4;
  animation: typingDot 1.1s ease-in-out infinite;
}
.typing i:nth-child(2) { animation-delay: .18s; }
.typing i:nth-child(3) { animation-delay: .36s; }
@keyframes typingDot { 0%, 60%, 100% { opacity: .3; translate: 0 0; } 30% { opacity: 1; translate: 0 -4px; } }

/* =========================================================
   v3：文字の登場（JSが1文字ずつ span.ch に分ける）
   ★span は inline のまま。改行位置と禁則はブラウザの組版に任せる（冒頭の地雷8）
   ★読み上げ用の元の文は .sr-only に1回だけ入れ、分割した側は aria-hidden にしている
   ========================================================= */
.ch { position: relative; }
/* 見出し：下から、ぼかしが晴れるように1文字ずつ起きる */
.js-anim .is-split .ch { opacity: 0; top: .42em; filter: blur(8px); }
.in-view .is-split .ch,
.is-split.in-view .ch,
.hero.is-ready .is-split .ch {
  animation: chIn .9s var(--ease-out) forwards;
  animation-delay: calc(var(--i, 0) * var(--ch-step, 36ms) + var(--ch-delay, 120ms));
}
@keyframes chIn { to { opacity: 1; top: 0; filter: blur(0); } }
.hero.is-shown .ch { opacity: 1 !important; top: 0 !important; filter: none !important; }
/* 台詞：打たれた瞬間だけ字がふっと灯る */
.js-anim .is-typed .ch { opacity: 0; }
.in-view .is-typed .ch,
.is-typed.in-view .ch {
  animation: typeIn .7s ease-out forwards;
  animation-delay: calc(var(--i, 0) * var(--type-step, 60ms) + var(--type-delay, 450ms));
}
@keyframes typeIn {
  0%   { opacity: 1; text-shadow: 0 0 16px var(--accent-lit); }
  100% { opacity: 1; text-shadow: none; }
}
/* 昼のLINEは長い（約80字）。1字26msで打ち、入力中の「…」は0.9秒だけ見せる（全体で約3秒） */
.theme-day .is-typed { --type-step: 26ms; --type-delay: 900ms; }
.theme-day .in-view .is-typed .ch,
.theme-day .is-typed.in-view .ch { animation-name: typeInDay; }
@keyframes typeInDay { from { opacity: 0; } to { opacity: 1; } }
/* 打ち終わってから添え書き（small）を出す。--n（文字数）はJSが入れる */
.js-anim .is-typed small { opacity: 0; transition: opacity .9s ease; }
.in-view .is-typed small,
.is-typed.in-view small {
  opacity: 1;
  transition-delay: calc(var(--n, 20) * var(--type-step, 60ms) + var(--type-delay, 450ms) + 300ms);
}
/* 入力中の「…」は、打ち始める直前に消す */
.is-typed.in-view .typing { animation: fadeAway .3s ease forwards; animation-delay: calc(var(--type-delay, 1300ms) - 200ms); }
@keyframes fadeAway { to { opacity: 0; visibility: hidden; } }

/* 強調語に金のマーカーを引く（登場と同時に左から伸びる）。
   ★行をまたいでも、1本の帯として左から右へ順に伸びる（box-decoration-break: slice） */
.section strong {
  background-image: linear-gradient(transparent 68%, var(--marker) 68%, var(--marker) 92%, transparent 92%);
  background-repeat: no-repeat; background-size: 100% 100%;
  -webkit-box-decoration-break: slice; box-decoration-break: slice;
}
.js-anim .section strong { background-size: 0% 100%; transition: background-size 1.3s var(--ease-out) .55s; }
.js-anim .in-view strong { background-size: 100% 100%; }

/* =========================================================
   スクロール連動の登場（JS が .in-view を付ける）
   ★動かすのは opacity と translate。transform はホバーの傾きに残す（冒頭の地雷6）
   ========================================================= */
[data-reveal],
[data-reveal-stagger] > *,
[data-reveal-rows] tbody tr { transition: var(--tr-reveal); }
.js-anim [data-reveal] { opacity: 0; translate: 0 34px; }
[data-reveal].in-view { opacity: 1; translate: none; }
[data-reveal][data-reveal-delay="1"] { transition-delay: .1s; }
[data-reveal][data-reveal-delay="2"] { transition-delay: .2s; }
[data-reveal][data-reveal-delay="3"] { transition-delay: .3s; }

/* 見出しは中身が1文字ずつ起きるので、箱そのものは動かさずに順番だけ作る */
.js-anim .sec-head[data-reveal] { translate: none; }
.js-anim .sec-head:not(.in-view) .ghost { opacity: 0; translate: 7% 0; }
.js-anim .sec-head:not(.in-view) > p { opacity: 0; translate: 0 14px; }
.js-anim .sec-head:not(.in-view)::after { scale: 0 1; opacity: 0; }

/* 章の大字は少し大きく、ずれた位置から所定の位置へ収まる */
.js-anim .chapter[data-kanji]:not(.in-view)::after { opacity: 0; scale: 1.35; translate: 8% -6%; }

/* 3ステップ：順路の点線とメダル */
.js-anim .steps:not(.in-view)::before { scale: 0 1; }
.js-anim .steps:not(.in-view) .step::before { scale: 0; }

/* 落款は、枠が見えてから少し遅れて押される */
.js-anim .seal { opacity: 0; }
.in-view .seal, .seal.in-view { animation: stampIn .62s cubic-bezier(.2, .9, .3, 1.25) .75s forwards; }
@keyframes stampIn {
  0%   { opacity: 0; scale: 2.5; rotate: -26deg; }
  55%  { opacity: 1; scale: .88; rotate: -6deg; }
  75%  { scale: 1.06; }
  100% { opacity: 1; scale: 1; rotate: -9deg; }
}

/* まとまり（.features / .gates / .steps / dl）は、子を順番に起こす。
   ★遅延は列ごとに書く（opacity・translate だけ遅らせ、ホバーの transform・影は遅らせない）。
     --si（何番目か）はJSが入れる。dl は dt と dd を同じ番号にして行ごとに起こす */
.js-anim [data-reveal-stagger] > * { opacity: 0; translate: 0 30px; }
[data-reveal-stagger].in-view > * { opacity: 1; translate: none; }
[data-reveal-stagger].in-view > *,
[data-reveal-rows].in-view tbody tr {
  transition-delay: calc(var(--si, 0) * var(--stagger, 130ms) + 40ms),
                    calc(var(--si, 0) * var(--stagger, 130ms) + 40ms),
                    0s, 0s, 0s, 0s;
}
dl[data-reveal-stagger] { --stagger: 90ms; }
.js-anim dl[data-reveal-stagger] > * { translate: -16px 0; }

/* 表は行ごとに */
.js-anim [data-reveal-rows] tbody tr { opacity: 0; translate: -16px 0; }
[data-reveal-rows].in-view tbody tr { opacity: 1; translate: none; }

/* LINEから章へ直接飛んできたときは、待たせずに最初から出しておく（JSが付ける） */
.is-instant, .is-instant > *, .is-instant .ch, .is-instant strong,
.is-instant::after, .is-instant .seal {
  transition: none !important; animation-delay: 0s !important;
}
.is-instant .ch { animation: none !important; opacity: 1 !important; top: 0 !important; filter: none !important; }

/* ---------- エリアパース（和紙イラスト）・体験イメージ（2026-10-16） ----------
   原本は Output/10_参考資料/エリアパース_v3.2_和紙イラスト_20261016/ 。
   書き出しは 生成過程資料/build_perse_assets.py（assets/perse/*-1600.webp・*-800.webp）。
   ★施工前のイメージ図なので、必ず「※画像はイメージです」を添える */
.photo { margin: 0; }
.photo img {
  display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: calc(var(--radius) - 4px);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line));
  box-shadow: 0 18px 50px -32px #000;
  background: var(--bg-2);
}
.photo figcaption {
  margin-top: .45rem; font-size: .72rem; letter-spacing: .06em; color: var(--muted); text-align: right;
}
/* 物語・遊び方の見出しの下に置く大きい1枚 */
.photo--wide { max-width: 860px; margin: 0 auto 2.4rem; }
/* 章カードの中（見出しの下・説明の上） */
.chapter .photo { margin: 1.2rem 0 1.1rem; max-width: 720px; }
/* 入口カード（トップの夜・昼）。右上のアイコンと重ならないよう、題名の下に置く */
.gate .photo { margin: 0 0 1.4rem; }
.gate .photo img { box-shadow: none; }
.gate--day .photo figcaption { color: #5C7288; }
.gate--night .photo figcaption { color: #A8BDD6; }

/* =========================================================
   ▼ここから下はスマホ調整。
   ★必ずベース定義より後に置くこと。前に置くと後勝ちで打ち消される
   ========================================================= */
/* =========================================================
   スマホの小さな文字
   ★0.3em の字間を10〜12pxの欧文にかけると1文字ずつバラけて読めない。
     字間を詰め、下限12px程度まで上げる
   ========================================================= */
@media (max-width: 640px) {
  .eyebrow { font-size: .76rem; letter-spacing: .12em; padding: .35rem .9rem; }
  .hero-title-en { letter-spacing: .16em; }
  .sec-head .num { font-size: .8rem; letter-spacing: .14em; gap: .6em; }
  .sec-head .num::before, .sec-head .num::after { width: 1.6em; }
  .chapter-head .ch-no { font-size: .84rem; letter-spacing: .06em; }
  .gate small { font-size: .76rem; letter-spacing: .14em; }
  .gate .go { font-size: .92rem; letter-spacing: .04em; }
  .scroll-cue { font-size: .7rem; letter-spacing: .16em; }
  .hint-block > .hint-label { letter-spacing: .06em; }
  .chapter-head .place { font-size: .84rem; letter-spacing: .02em; }
  dl.info dt { font-size: .86rem; letter-spacing: .04em; }
  .site-footer { font-size: .86rem; }
  .opening-label { letter-spacing: .24em; }
  .pitch-en { letter-spacing: .2em; }

  /* 縦を詰める。1画面あたりの情報量を上げて、スクロール量を減らす */
  .section { padding: 3.6rem 0; }
  .sec-head { margin-bottom: 2.1rem; }
  .sec-head::after { margin-top: 1.1rem; width: 180px; }
  .features, .gates { gap: .9rem; }
  .chapter { margin-bottom: 1rem; }
  .site-footer { padding: 2.4rem 0 3rem; }

  /* 開幕の帯は縦に積む。区切り線は横線に替える */
  .opening { flex-direction: column; gap: .35rem; padding: 1.1rem 1.6rem 1.2rem; }
  .opening-count { padding-left: 0; border-left: 0; padding-top: .45rem; border-top: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); }

  /* 順路レールは細く。カードの横幅を削りすぎない */
  .route { --rail-pad: 34px; --rail-x: 11px; }
  .route-marker { width: 32px; height: 32px; margin: -16px 0 0 -16px; }
  .route-node { width: 14px; height: 14px; margin: -7px 0 0 -7px; }
  .chapter { padding: 1.4rem 1.2rem 1.5rem; }
  .chapter-head { gap: .6rem .8rem; }
  .chapter-head .icon-wrap { width: 48px; height: 48px; }
  .chapter[data-kanji]::after { font-size: 7.2rem; }

  /* リード：nw の塊（最長16字）が 320px 幅の .wrap（281px）に収まる大きさ＝16.8px */
  .story-lead { font-size: 1.05rem; }

  /* 台詞 */
  .quote--voice { padding-left: 2.8rem; }
  .voice { left: 0; }
  .quote--line { padding: 1.2rem 1.3rem 1.1rem; }
  .js-anim .typing { left: 1.3rem; top: 1.25rem; }

  .marquee { padding: .75rem 0; }
  .mq-sep { margin: 0 1rem; }
}

/* TOPの年号入りの札（29字）は、340px 以下だと札の中で2行に割れる。字と字間を一段詰めて1行に収める */
@media (max-width: 400px) {
  .eyebrow { font-size: .68rem; letter-spacing: .06em; padding: .32rem .8rem; white-space: nowrap; }
}

/* 3ステップの順路は、縦積みになったら縦の点線に替える */
@media (max-width: 860px) {
  .steps::before {
    top: 2.6rem; bottom: 2rem; left: 50%; right: auto;
    border-top: 0; border-left: 2px dashed color-mix(in srgb, var(--accent) 45%, transparent);
    transform-origin: 50% 0;
  }
  .js-anim .steps:not(.in-view)::before { scale: 1 0; }
}

/* =========================================================
   スマホの対構造表：横スクロールをやめ、行ごとに縦へ積む
   3列を337pxに詰めると読めない
   ========================================================= */
@media (max-width: 640px) {
  .pair-table-wrap { overflow: visible; }
  table.pair { min-width: 0; display: block; }
  table.pair thead { display: none; }
  table.pair tbody, table.pair tr { display: block; }
  table.pair tr { padding: 1rem 1.1rem; border-bottom: 1px solid var(--line); }
  table.pair tr:last-child { border-bottom: 0; }
  table.pair th, table.pair td { display: block; border: 0; padding: 0; width: auto; }
  table.pair tbody th {
    font-size: .8rem; letter-spacing: .06em; color: var(--muted); margin-bottom: .45rem;
  }
  table.pair td { position: relative; padding-left: 2.3em; font-size: .98rem; line-height: 1.8; margin-bottom: .2rem; }
  table.pair td::before {
    position: absolute; left: 0; top: -.08em;
    font-family: var(--font-brush); font-size: 1.3rem; line-height: 1.3;
  }
  table.pair td.n::before { content: "夜"; color: var(--gold-lit); }
  table.pair td.d::before { content: "昼"; color: #E98070; }
  .theme-day table.pair td.n::before { color: #3f6f9e; }
  .theme-day table.pair td.d::before { color: var(--shuri-red); }
}

/* =========================================================
   動きを減らす設定の尊重
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .hero .reveal-line, .scroll-cue, [data-reveal] { opacity: 1 !important; transform: none !important; translate: none !important; }
  .hero-particles, .deco, .ambient, .route-marker, .typing { display: none; }
  .js-anim [data-reveal-stagger] > *,
  .js-anim [data-reveal-rows] tbody tr { opacity: 1 !important; translate: none !important; }
  .hero.has-image .hero-media { transform: scale(1.02); }
  .hero-title-img { -webkit-mask-image: none !important; mask-image: none !important; }
  .hero-gate { opacity: 1 !important; translate: none !important; rotate: none !important; }
  .seal { opacity: 1 !important; }
  .marquee-track { translate: none; }
}

/* ================================================================ v26（2026-10-12）
   難易度の星／YAMAHAとの取り組み／制作・協力／紹介ページ／使用楽曲 */
.stars { color: var(--accent, #B8891F); letter-spacing: .08em; white-space: nowrap; }
.stars i { font-style: normal; opacity: .25; }
.info dd small, .pair td small { display: inline-block; margin-top: .25rem; font-size: .82em; color: var(--muted, #6B7280); line-height: 1.7; }
.collab, .credits { margin: 3rem auto 0; max-width: 46rem; padding: clamp(1.4rem, 3vw, 2rem); border: 1px solid rgba(184, 137, 31, .45); border-radius: 14px; background: rgba(255, 255, 255, .06); }
.theme-day .collab, .theme-day .credits, .subpage .credits { background: rgba(255, 255, 255, .6); }
.collab-kicker { display: block; font-family: "Playfair Display", serif; font-weight: 700; letter-spacing: .24em; font-size: .78rem; color: var(--accent, #B8891F); }
.collab h3, .credits h3 { font-family: "Zen Old Mincho", serif; font-size: clamp(1.3rem, 3.4vw, 1.6rem); margin: .3rem 0 1rem; }
.collab p { line-height: 2; margin: 0 0 .9rem; }
.collab-link { margin: .6rem 0 0; }
.collab-link a { color: var(--accent, #B8891F); font-weight: 700; text-decoration: none; border-bottom: 1px solid currentColor; }
.credits dl { display: grid; grid-template-columns: minmax(8em, 11em) 1fr; gap: .7rem 1.2rem; margin: 0; }
.credits dt { font-size: .86rem; color: var(--muted, #6B7280); font-weight: 700; padding-top: .15rem; }
.credits dd { margin: 0; line-height: 1.8; }
.credits .names { letter-spacing: .04em; }
.credits a { color: inherit; text-decoration: underline; text-decoration-color: rgba(184, 137, 31, .7); text-underline-offset: .25em; }
@media (max-width: 560px) { .credits dl { grid-template-columns: 1fr; gap: .15rem; } .credits dd { margin-bottom: .7rem; } }
.subpage { min-height: 70vh; padding-top: clamp(5.5rem, 12vw, 7rem); }
.sub-back a { color: var(--accent, #B8891F); text-decoration: none; font-size: .9rem; }
.sub-h1 { font-family: "Zen Old Mincho", serif; font-size: clamp(1.8rem, 5vw, 2.4rem); margin: .3rem 0 .8rem; }
.artist { display: grid; grid-template-columns: minmax(0, 15rem) 1fr; gap: clamp(1.2rem, 4vw, 2.6rem); align-items: start; margin-top: 1.2rem; }
.artist-photo { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 12px; border: 1px solid rgba(184, 137, 31, .45); }
.artist-photo.is-empty { display: grid; place-items: center; background: repeating-linear-gradient(135deg, rgba(184, 137, 31, .08) 0 10px, transparent 10px 20px); color: rgba(184, 137, 31, .7); font-family: "Playfair Display", serif; letter-spacing: .3em; }
.artist h1 { font-family: "Zen Old Mincho", serif; font-size: clamp(1.8rem, 5vw, 2.4rem); margin: .3rem 0 1.2rem; }
.artist h1 small { display: block; font-family: "Playfair Display", serif; font-style: italic; font-size: .9rem; color: var(--muted, #6B7280); margin-top: .3rem; letter-spacing: .06em; }
.artist-text p { line-height: 2; margin: 0 0 1rem; }
@media (max-width: 640px) { .artist { grid-template-columns: 1fr; } .artist-photo { max-width: 15rem; } }
.tracks { display: grid; gap: 1rem; margin-top: 2rem; }
.track { display: flex; gap: 1.2rem; align-items: flex-start; padding: 1.2rem 1.4rem; border: 1px dashed rgba(184, 137, 31, .5); border-radius: 12px; background: rgba(255, 255, 255, .5); }
.track-no { font-family: "Playfair Display", serif; font-style: italic; font-size: 1.6rem; color: var(--accent, #B8891F); line-height: 1; }
.track h3 { margin: 0 0 .3rem; font-size: 1.1rem; }
.track p { margin: 0; line-height: 1.8; color: var(--muted, #6B7280); }

/* ===== ヘルプ（help.html・10/13）：スタッフへの救済の代わり。昼・夜・共通の困りごとを折りたたみで ===== */
.help .help-jump { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1.4rem 0 2rem; }
.help .help-tab { padding: .55rem 1rem; border-radius: 999px; border: 1px solid rgba(184, 137, 31, .55); background: rgba(255, 255, 255, .7); color: var(--ink, #1B2A38); text-decoration: none; font-weight: 700; font-size: .92rem; }
.help .help-tab.is-day { border-color: #C73E2E; color: #C73E2E; }
.help .help-tab.is-night { background: #0B1830; color: #F3D896; border-color: #0B1830; }
.help .help-menu { margin-bottom: 2.4rem; }
.help h2 { font-family: "Zen Old Mincho", serif; font-size: clamp(1.25rem, 3.6vw, 1.55rem); margin: 0 0 1rem; display: flex; align-items: center; gap: .6rem; }
.help .help-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .8rem; }
.help .help-card { padding: 1rem 1.1rem; border-radius: 12px; background: rgba(255, 255, 255, .75); border: 1px solid rgba(184, 137, 31, .35); display: grid; gap: .35rem; line-height: 1.7; }
.help .help-card b { color: #C73E2E; }
.help .help-sec { margin: 0 0 2.6rem; scroll-margin-top: 6rem; }
.help .help-badge { display: inline-grid; place-items: center; min-width: 2.2em; height: 2.2em; padding: 0 .5em; border-radius: 999px; background: #B8891F; color: #fff; font-size: .8em; }
.help .help-badge.is-day { background: #C73E2E; }
.help .help-badge.is-night { background: #0B1830; color: #F3D896; }
.help details { border-radius: 12px; background: rgba(255, 255, 255, .7); border: 1px solid rgba(184, 137, 31, .3); margin: 0 0 .6rem; }
.help summary { cursor: pointer; padding: .95rem 2.6rem .95rem 1.1rem; font-weight: 700; list-style: none; position: relative; line-height: 1.6; }
.help summary::-webkit-details-marker { display: none; }
.help summary::after { content: "＋"; position: absolute; right: 1.1rem; top: 50%; transform: translateY(-50%); color: #B8891F; font-weight: 700; }
.help details[open] summary::after { content: "－"; }
.help details p { margin: 0; padding: 0 1.1rem 1.1rem; line-height: 1.9; color: #34485C; }
.help .help-note { margin-top: 1.2rem; padding: 1rem 1.1rem; border-left: 4px solid #C73E2E; background: rgba(199, 62, 46, .06); line-height: 1.8; }