/* ============================================================================
   rikei.css ── 中学受験専門オンライン学習塾 RIKEI（見本06）v2
   ============================================================================
   ★2026-09-02 全面書き直し。前の版は捨てた。

   内田の指摘：「あまりにもDYNAMOカラーが強すぎるかな／ロゴも、各イメージも
   違うものにして」。

   機械で突き合わせたら、原因は色ではなかった。
     ・rikei.css(v1) と dynamo.css を「接頭辞を揃え・色を伏せて」行単位で比べると、
       **89.6% が同一構造**（完全一致2186行＋接頭辞違い504行＋色だけ違い113行 / 全3129行）
     ・taiken.html の <style> も、05 の shop.html と正規化後450行一致（うち426行は完全一致）
   ＝**色を薄めても DYNAMO に見える。** 骨格が DYNAMO のままだったから。

   だから v2 は、色ではなく**意匠の体系そのもの**を入れ替える。

   | | DYNAMO / v1 | **v2（この版）** |
   |---|---|---|
   | 縁   | 3px の太いインクの縁          | **縁なし**（必要な所だけ 1px のヘアライン） |
   | 影   | ぼかさないオフセット（5px 5px 0）| **やわらかい影**（2段：接地の短い影＋広い拡散） |
   | 角   | 大きな角丸 18〜26px            | **控えめな角丸 10〜16px** |
   | 地   | クリームの紙＋市松／方眼の透かし | **無地のオフホワイト**（質感で見せない） |
   | 帯   | 上端の三色帯 13px             | **無し**。見出しの左に 2px の縦線 |
   | 印   | 黄色いふせん＋札              | **深緑のベタ丸＋白い数字**、下に白い札 |
   | 差し色| 黄・水色・コーラルの3色        | **マンダリン1色だけ**（押すところ専用） |
   | 三段 | ①水色 ②黄 ③コーラル          | **緑の濃淡**（進むほど濃くなる＝意味と一致） |
   | 書体 | Baloo 2 ＋ Zen Maru Gothic（丸）| **Outfit（数字・英字）＋ Zen Kaku Gothic New（和文）** |

   ★もうひとつの作り直し：**最初の画面をロビー（俯瞰）にした。**
     内田「理科強化部屋、算数強化部屋、面談部屋の扉を用意して、そのボタンを押すと移動できる」。
     ロビーは3Dではなく**1枚の俯瞰イラスト＋DOMのボタン**にしてある。
     俯瞰は equirect では作れない（球の中からは俯瞰できない）というだけでなく、
     **当たり判定がDOMのままになるので、印の重なり事故が構造的に起きない**（罠#253・#254）。

   ── 色のコントラスト（相対輝度から自分で計算した値・小数第2位）──────────
     paper #FCFBF9 L=0.9695 ／ ink #14322A L=0.02490 ／ green #1E4D3E L=0.05936
     muted #5F635E L=0.12190 ／ accent #E8622A L=0.25936 ／ accent-d #BE4A1C L=0.15931
       ink    on paper …… 13.61 : 1
       green  on paper ……  9.32 : 1
       muted  on paper ……  5.93 : 1（小さい文字でも通る）
       white  on green ……  9.60 : 1   ← 印の数字
       white  on accent-d …  5.02 : 1   ← 押したとき／CTA
       accent-d on paper ……  4.87 : 1（小見出しに使える）
       accent on paper ……  3.30 : 1  ← **面と図形にだけ使う。小さい文字に使わない**
     ★地（bg #EFEBE4 L=0.83367）の上は別の値になる。紙の上の数字で判断しない
       （2026-09-02 実測で小見出しが 4.22:1 ＝AA不足だったのを、ここに書き足して直した）
       ink      on bg ……… 11.70 : 1
       green    on bg ………  8.01 : 1  ← 地の上の小見出しはこれを使う
       muted    on bg ………  5.10 : 1
       accent-d on bg ………  4.22 : 1  ← **AAに届かない。地の上では使わない**
   ============================================================================ */

:root {
  --rk-ink:      #14322A;   /* 文字・主線 */
  --rk-green:    #1E4D3E;   /* 主色。③きめる */
  --rk-green-2:  #3E8E7E;   /* ②つなぐ */
  --rk-green-1:  #8FB8A8;   /* ①みつける */
  --rk-accent:   #E8622A;   /* マンダリン。**面と図形専用** */
  --rk-accent-d: #BE4A1C;   /* 同・濃いほう。**白文字を載せる地／小さい文字の色** */
  --rk-paper:    #FCFBF9;   /* カード・紙 */
  --rk-bg:       #EFEBE4;   /* 地 */
  --rk-muted:    #5F635E;   /* 補足の文字 */
  --rk-line:     rgba(20, 50, 42, .13);   /* ヘアライン */

  /* 影は2段。接地の短い影＋広い拡散。**色は黒ではなく緑がかった暗色**
     （黒い影は紙の上で灰色に濁る） */
  --rk-sh-1: 0 1px 2px rgba(20, 50, 42, .10);
  --rk-sh-2: 0 2px 6px rgba(20, 50, 42, .09), 0 12px 28px rgba(20, 50, 42, .10);
  --rk-sh-3: 0 4px 10px rgba(20, 50, 42, .10), 0 22px 50px rgba(20, 50, 42, .14);

  --rk-ja: "Zen Kaku Gothic New", system-ui, sans-serif;
  --rk-en: "Outfit", "Zen Kaku Gothic New", system-ui, sans-serif;

  --rk-r:  14px;   /* 角丸の標準 */
  --rk-r-s: 10px;
}

body {
  background: var(--rk-bg);
  color: var(--rk-ink);
  font-family: var(--rk-ja);
}

/* gx.css は暗い地の前提（--gx-bg #07090E）。3Dが立たない経路でも明るいままにする */
.no-3d body, .no-3d .gx-shell { background: var(--rk-bg); }

/* ============================================================================
   1. ロビー（.gx-gate）── 最初の画面。俯瞰イラスト＋3つの扉
   ============================================================================
   ★ここが今回いちばん大きな変更。
     入口の幕を「看板」ではなく**校舎の俯瞰図**にして、その上に3つの扉を置く。
     押すと幕が上がり、その部屋の3Dへ移る（rik-extras.js が __gx.goto を呼ぶ）。
     左上のロゴでいつでもここへ戻れる。

   ★構造の約束（触るときは必ず守ること）
     ・h1 は .gx-gate__title の1つだけ。h2/h3/li は置かない
       （qa_play の文字重なり検査に固定要素を持ち込まない）
     ・扉には .gx-gate__enter を必ず含める（gx-core.js が click を配線する）。
       **disabled にしない**（qa_play が押すので、押せない時間を作らない）
     ・扉の位置は俯瞰イラストの部屋に合わせた % 座標。器を aspect-ratio で固定して
       object-fit: contain にしてあるので、画面幅が変わっても部屋からずれない */
.gx-gate {
  gap: 0;
  padding: 0;
  background: var(--rk-bg);
  overflow-y: auto;
}
/* gx.css の暗い放射（::before / ::after）を打ち消す */
.gx-gate::before,
.gx-gate::after { background: none; content: none; }

.rik-lobby {
  /* ★全画面（2026-09-02 内田指示）。紙色の地に小さく絵を置く「カード」をやめた。 */
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(4px, 1vh, 12px);
  width: auto; margin: 0;
  padding: clamp(14px, 3vh, 30px) clamp(14px, 3vw, 30px) clamp(12px, 2.4vh, 24px);
  text-align: center;
  overflow: hidden;
}
/* 文字を読ませるための薄い覆い（上と下）。絵は明るいので、白を薄くかけるだけでよい */
.rik-lobby::before,
.rik-lobby::after {
  content: ''; position: absolute; left: 0; right: 0;
  pointer-events: none; z-index: 1;
}
.rik-lobby::before {
  top: 0; height: 46%;
  background: linear-gradient(180deg,
    rgba(252, 251, 249, .96) 0%, rgba(252, 251, 249, .78) 44%, rgba(252, 251, 249, 0) 100%);
}
.rik-lobby::after {
  bottom: 0; height: 26%;
  background: linear-gradient(0deg,
    rgba(252, 251, 249, .94) 0%, rgba(252, 251, 249, 0) 100%);
}
.rik-lobby__eyebrow,
.rik-lobby__logo,
.rik-lobby__title,
.rik-lobby__lede { position: relative; z-index: 2; }
.rik-lobby__foot { position: relative; z-index: 2; margin-top: auto; }

.rik-lobby__eyebrow {
  margin: 0;
  font-family: var(--rk-en); font-weight: 600;
  font-size: clamp(10px, 2.2vw, 12px); letter-spacing: .18em;
  color: var(--rk-green);               /* ★地(#EFEBE4)の上なので緑。8.01:1 */
}

/* ロゴ（しるし＋文字）。三段を3本の横線で表す */
.rik-lobby__logo { display: flex; align-items: center; gap: 12px; }
.rik-lobby__logo svg { width: clamp(34px, 6vw, 44px); height: auto; flex: none; }
.rik-lobby__word {
  font-family: var(--rk-en); font-weight: 700;
  font-size: clamp(30px, 7vw, 46px); letter-spacing: .10em; line-height: 1;
  color: var(--rk-ink);
}

.gx-gate__title.rik-lobby__title {
  margin: 0;
  font-size: clamp(17px, 3.6vw, 26px); font-weight: 700; line-height: 1.5;
  color: var(--rk-ink);
}
.rik-lobby__lede {
  max-width: 34em; margin: 0;
  font-size: clamp(12px, 2.5vw, 14px); line-height: 1.85;
  color: var(--rk-muted);               /* 5.93:1 */
}

/* ── 俯瞰の絵と、その上の扉 ─────────────────────────────── */
.rik-lobby__map {
  /* ★16:9 の器を「画面を覆う大きさ」まで広げる。
     器の比率を絵の比率に保つので、扉の %座標が部屋からずれない。
     ★中央寄せに transform を使わない。transform を持つ親の下では
       position:fixed が働かず、狭い画面の「下の帯」が作れなくなる。 */
  --mw: max(100vw, calc(100svh * 16 / 9));
  --mh: max(100svh, calc(100vw * 9 / 16));
  position: absolute;
  width: var(--mw); height: var(--mh);
  left: calc((100vw - var(--mw)) / 2);
  top:  calc((100svh - var(--mh)) / 2);
  margin: 0;
  aspect-ratio: auto;
}
.rik-lobby__map img {
  display: block; width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 0;
}
.rik-lobby__doors { position: absolute; inset: 0; z-index: 3; }

/* 扉のピン。絵の中の部屋の上に立つ */
.rik-lobby .gx-gate__enter {
  position: absolute;
  left: var(--x); top: var(--y);
  transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  min-width: 0; min-height: 44px;
  margin: 0; padding: 0;
  border: 0; border-radius: 0;
  background: none;
  font: inherit; letter-spacing: normal;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .18s cubic-bezier(.2, .8, .3, 1);
}
.rik-lobby .gx-gate__enter:hover,
.rik-lobby .gx-gate__enter:focus-visible {
  background: none;
  transform: translate(-50%, -50%) translateY(-4px);
}
/* 丸（番号） */
.rik-door__no {
  display: grid; place-items: center;
  width: clamp(38px, 6.4vw, 50px); aspect-ratio: 1;
  border-radius: 50%;
  background: var(--rk-green);
  color: #FFFFFF;                        /* 深緑の上で 9.60:1 */
  box-shadow: var(--rk-sh-2), 0 0 0 4px rgba(252, 251, 249, .92);
  font-family: var(--rk-en); font-weight: 700;
  font-size: clamp(16px, 2.8vw, 20px); line-height: 1;
  transition: background-color .18s linear;
}
.rik-lobby .gx-gate__enter:hover .rik-door__no,
.rik-lobby .gx-gate__enter { color: var(--rk-ink); }
.rik-lobby .gx-gate__enter:focus-visible .rik-door__no { background: var(--rk-accent-d); }
/* 札（部屋の名前） */
.rik-door__name {
  padding: 5px 12px 6px;
  border-radius: 999px;
  background: var(--rk-paper);
  color: var(--rk-ink);                  /* 13.61:1 */
  box-shadow: var(--rk-sh-2);
  font-size: clamp(11px, 2.2vw, 13px); font-weight: 700; letter-spacing: .02em;
  white-space: nowrap;
}
/* 済んだ部屋は、丸を薄い緑にして「行った」と示す（文字は使わない） */
.rik-lobby .gx-gate__enter[data-done="1"] .rik-door__no {
  background: var(--rk-green-1);
  color: var(--rk-ink);                  /* #8FB8A8 の上で 6.36:1 */
}

/* ── 狭い画面・縦長の画面 ───────────────────────────────
   絵は全画面のまま。ただし縦長では絵を切って出すので、部屋の位置を指せない。
   だから扉は「部屋を指すピン」をやめ、**画面の下の帯に3枚のカード**として置く。
   ★区切りを幅だけで見ない。768x1024 のような縦長のタブレットも同じ扱いにする
     （幅だけで見ると、絵が画面よりずっと横に広がって、左右の部屋が画面の外に出る）。 */
@media (max-width: 720px), (max-aspect-ratio: 5 / 4) {
  .rik-lobby {
    justify-content: flex-start;
    /* ★下の帯（扉3枚）のぶんを空ける。96px では足りず、案内の行と
       302px² 重なっていた（2026-09-02 probe_overlap 実測）。
       帯＝上下の余白22＋カード約76＋覆いのぼかし＝実測124px。ここに間を12px足す。 */
    padding-bottom: calc(136px + env(safe-area-inset-bottom, 0px));
  }
  /* MENU のボタンは画面の右上に固定で出ている。先頭行がその下に潜らないよう、
     幅の狭い画面ではロゴを先に出す（2026-09-02 実測で 48px 重なっていた） */
  .rik-lobby__eyebrow { order: 2; }
  .rik-lobby__logo    { order: 1; }
  .rik-lobby__title   { order: 3; }
  .rik-lobby__lede    { order: 4; }
  .rik-lobby__foot    { order: 5; margin-top: auto; }

  .rik-lobby__doors {
    position: fixed; inset: auto 0 0 0;
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    padding: 10px 12px calc(12px + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(0deg,
      rgba(252, 251, 249, .96) 0%, rgba(252, 251, 249, .86) 62%, rgba(252, 251, 249, 0) 100%);
    z-index: 4;
  }
  .rik-lobby .gx-gate__enter {
    position: static; transform: none;
    flex-direction: column; gap: 6px;
    padding: 10px 4px 12px;
    border-radius: var(--rk-r-s);
    background: var(--rk-paper);
    box-shadow: var(--rk-sh-2);
  }
  .rik-lobby .gx-gate__enter:hover,
  .rik-lobby .gx-gate__enter:focus-visible { transform: translateY(-2px); }
  .rik-door__name { box-shadow: none; padding: 0; background: none; white-space: normal; }
}

.rik-lobby__foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 6px 18px;
  /* ★全画面のロビーでは**画面の下**に置く（2026-09-02）。
     ここで margin-top を数値にしていたので、上の margin-top:auto を打ち消して
     案内の行が説明文のすぐ下＝画面のまん中に浮いていた。 */
  margin-top: auto;
  font-size: clamp(11px, 2.2vw, 12.5px);
  color: var(--rk-muted);
}
/* ★地(#EFEBE4)の上なので緑。accent-d は 4.22:1 で AA に届かない（2026-09-02 実測）。
   下線は残すので、色を落としてもリンクだと分かる。 */
.rik-lobby__foot a { color: var(--rk-green); text-underline-offset: 4px; }
.rik-lobby__foot a:hover { color: var(--rk-ink); }
.rik-lobby__meter { display: flex; align-items: center; gap: 8px; }
.rik-lobby__bar {
  width: 92px; height: 4px; border-radius: 999px;
  background: rgba(20, 50, 42, .12); overflow: hidden;
}
.rik-lobby__bar i {
  display: block; height: 100%; width: calc(var(--sign-p, var(--rk-load, 0)) * 100%);
  background: var(--rk-green);
  transition: width .3s ease;
}

/* ============================================================================
   2. ロゴ（左上・常設）── 押すとロビーへもどる
   ============================================================================
   ★data-gx-avoid が要る（罠#232）。付いていないと3Dの上の印がロゴの下へ潜って押せない。
     しるしは「三段（さんだん）」＝長さの違う3本の横線。DYNAMO の稲妻とは別物。 */
.gx-logo {
  top: 12px; left: 12px;
  gap: 10px;
  padding: 8px 14px 8px 10px;
  border-radius: var(--rk-r-s);
  background: rgba(252, 251, 249, .92);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  color: var(--rk-ink);
  box-shadow: var(--rk-sh-2);
  filter: none;
  transition: transform .18s cubic-bezier(.2, .8, .3, 1), box-shadow .18s ease;
}
.gx-logo:hover, .gx-logo:focus-visible { transform: translateY(-2px); box-shadow: var(--rk-sh-3); }
.gx-logo:active { transform: translateY(0); box-shadow: var(--rk-sh-1); }
.gx-logo__mark { width: 30px; height: 30px; }
.gx-logo__bars rect { fill: var(--rk-green); }
.gx-logo__dot { fill: var(--rk-accent); }
.gx-logo__text { line-height: 1.2; }
.gx-logo__name {
  font-family: var(--rk-en); font-weight: 700;
  font-size: 17px; letter-spacing: .10em;
  color: var(--rk-ink);
}
.gx-logo__sub {
  margin-top: 1px;
  font-family: var(--rk-ja); font-weight: 500;
  font-size: 9.5px; letter-spacing: .06em;
  color: var(--rk-muted);
}
/* gx.css の「もう一度押すと戻ります」は、この案件では全体像モードを使わないので出さない */
html.is-overview .gx-logo::after { content: none; }
@media (max-width: 700px) {
  .gx-logo { top: 8px; left: 8px; padding: 6px 11px 6px 8px; gap: 8px; }
  .gx-logo__mark { width: 25px; height: 25px; }
  .gx-logo__name { font-size: 15px; }
  .gx-logo__sub { font-size: 8.5px; }
}

/* ============================================================================
   3. 右上のメニュー
   ============================================================================
   ★data-gx-avoid（罠#232）。文字は a / span / div だけで組む
     （h2・p・li を置かない＝qa_play の文字重なり検査に固定要素を持ち込まない） */
.rik-menu__btn {
  position: fixed; top: 12px; right: 12px; z-index: 92;
  display: flex; align-items: center; gap: 8px;
  min-height: 44px; margin: 0; padding: 8px 14px;
  border: 0; border-radius: var(--rk-r-s);
  background: rgba(252, 251, 249, .92);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  color: var(--rk-ink);
  box-shadow: var(--rk-sh-2);
  font: inherit; font-size: 12px; font-weight: 700; letter-spacing: .10em;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .18s cubic-bezier(.2, .8, .3, 1), box-shadow .18s ease;
}
.rik-menu__btn:hover, .rik-menu__btn:focus-visible { transform: translateY(-2px); box-shadow: var(--rk-sh-3); }
.rik-menu__bars { display: grid; gap: 3.5px; width: 15px; }
.rik-menu__bars i { display: block; height: 2px; border-radius: 2px; background: var(--rk-green); }
.rik-menu__bars i:nth-child(1) { width: 9px; }
.rik-menu__bars i:nth-child(2) { width: 12px; }
.rik-menu__bars i:nth-child(3) { width: 15px; }
.rik-menu__btn[aria-expanded="true"] { background: var(--rk-green); color: #FFFFFF; }
.rik-menu__btn[aria-expanded="true"] .rik-menu__bars i { background: #FFFFFF; }
.rik-menu__word { font-family: var(--rk-en); font-weight: 600; }

.rik-menu__scrim {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(20, 50, 42, .28);
  opacity: 0; pointer-events: none;
  transition: opacity .24s ease;
}
html.rik-menu-open .rik-menu__scrim { opacity: 1; pointer-events: auto; }

.rik-menu {
  position: fixed; top: 62px; right: 12px; z-index: 91;
  width: min(280px, calc(100vw - 24px));
  max-height: calc(100svh - 84px); overflow-y: auto;
  padding: 12px;
  border-radius: var(--rk-r);
  background: var(--rk-paper);
  box-shadow: var(--rk-sh-3);
  opacity: 0; transform: translateY(-8px) scale(.98);
  pointer-events: none;
  transition: opacity .2s ease, transform .2s cubic-bezier(.2, .8, .3, 1);
}
html.rik-menu-open .rik-menu { opacity: 1; transform: none; pointer-events: auto; }
.rik-menu__cap {
  margin: 10px 6px 5px;
  font-family: var(--rk-en); font-weight: 600;
  font-size: 10px; letter-spacing: .16em;
  color: var(--rk-muted);
}
.rik-menu__cap:first-child { margin-top: 2px; }
.rik-menu__nav { display: grid; gap: 2px; }
.rik-menu__item {
  display: flex; align-items: center; gap: 10px;
  min-height: 44px; padding: 8px 10px;
  border-radius: var(--rk-r-s);
  color: var(--rk-ink); text-decoration: none;
  font-size: 13.5px; font-weight: 700;
  transition: background-color .14s linear;
}
.rik-menu__item:hover, .rik-menu__item:focus-visible { background: rgba(30, 77, 62, .09); }
.rik-menu__no {
  display: grid; place-items: center;
  width: 22px; height: 22px; flex: none;
  border-radius: 50%;
  background: var(--rk-green-1);
  color: var(--rk-ink);
  font-family: var(--rk-en); font-weight: 700; font-size: 11px;
}
.rik-menu__item--shop { background: var(--rk-green); color: #FFFFFF; margin-top: 2px; }
.rik-menu__item--shop:hover, .rik-menu__item--shop:focus-visible { background: var(--rk-accent-d); }
.rik-menu__item--shop .rik-menu__no { background: rgba(255, 255, 255, .22); color: #FFFFFF; }
.rik-menu__lock { margin-left: auto; font-size: 10.5px; font-weight: 500; color: var(--rk-muted); }
.rik-menu__item--shop .rik-menu__lock { color: rgba(255, 255, 255, .82); }
.rik-menu__item--sub { font-weight: 500; }
.rik-menu__foot {
  margin: 12px 6px 4px;
  font-size: 10.5px; line-height: 1.7; color: var(--rk-muted);
}

/* ============================================================================
   4. HUD（下の進行ドットとスキップ）
   ============================================================================ */
.gx-hud { color: var(--rk-muted); padding: 12px 16px; }
.gx-hud__dot { width: 8px; height: 8px; background: rgba(20, 50, 42, .22); }
.gx-hud__dot.is-cleared { background: var(--rk-green); }
.gx-hud__dot.is-active { outline: 2px solid var(--rk-accent); outline-offset: 3px; }
.gx-hud__objective { display: none; }   /* 遊ぶ画面に地の文を置かない */
.gx-hud__skip {
  min-height: 44px; padding: 9px 18px;
  border: 0; border-radius: 999px;
  background: var(--rk-paper); color: var(--rk-ink);
  box-shadow: var(--rk-sh-2);
  font: inherit; font-size: 12.5px; font-weight: 700;
  cursor: pointer;
}
.gx-hud__skip:hover, .gx-hud__skip:focus-visible { background: var(--rk-green); color: #FFFFFF; }

/* ============================================================================
   5. 駅（ステーション）── 遊ぶ画面に地の文を置かない
   ============================================================================
   R5-B の型。見出しも説明文も版面から外し、DOMには残す
   （見るだけモード・no-3d・生HTMLでは全文が読める＝縮退の約束）。

   ★.gx-station__inner に data-gx-avoid を**付けない**（罠#253）。
     伏せた地の文の箱が 1142×211 の帯として画面の真ん中を塞ぎ、印が弾かれる。
     守るべきは見えているものだけ＝.gx-more と .rik-docslot に個別に付ける。 */
/* ★伏せた器は、クリックを飲まない（2026-09-02 実測で追加）。
   印を押すと世界がその印の方を向く＝**印は画面のまん中に戻ってくる**。
   まん中には .gx-station__inner（中身は visibility:hidden だが場所は取る）が
   かぶさっていて、2回目以降のクリックを器が全部吸っていた。
   probe_seals が「押し直しで開かない／出戻りで開かない」で6件落として見つけた。
   直し方は data-gx-avoid ではない（それは罠#253 で印を画面の端に飛ばす）。
   **器は通し、見えている中身だけが受ける。** */
.has-3d:not(.is-tour) .gx-station:not([data-reading]),
.has-3d:not(.is-tour) .gx-station:not([data-reading]) .gx-station__inner { pointer-events: none; }
.has-3d:not(.is-tour) .gx-station:not([data-reading]) .gx-more,
.has-3d:not(.is-tour) .gx-station:not([data-reading]) .rik-docslot { pointer-events: auto; }

.has-3d:not(.is-tour) .gx-station:not([data-reading]) .gx-station__inner > .gx-meta,
.has-3d:not(.is-tour) .gx-station:not([data-reading]) .gx-station__inner > h2,
.has-3d:not(.is-tour) .gx-station:not([data-reading]) .gx-station__inner > .gx-sub {
  /* visibility で伏せる。opacity:0 は qa_play の文字重なり検査に残る（罠#199） */
  visibility: hidden;
}
/* 本文に残る素のボタンは出さない。押す手がかりは印だけ。
   キーボードのときだけ札で現れる（gx.css の .gx-stealth と同じ手法） */
.has-3d:not(.is-tour) .gx-station:not([data-reading]) .gx-hotspot:not(.is-pinned) {
  position: absolute; width: 1px; height: 1px;
  min-width: 0; min-height: 0;          /* ★これが無いと gx.css の 44px に負けて残る（罠#199） */
  padding: 0; border: 0; opacity: 0;
  clip-path: inset(50%); pointer-events: none;
}
.has-3d:not(.is-tour) .gx-station:not([data-reading]) .gx-hotspot:not(.is-pinned):focus-visible {
  position: fixed; left: 50%; bottom: 84px; transform: translateX(-50%);
  width: auto; height: auto; min-width: 44px; min-height: 44px;
  padding: 10px 20px; opacity: 1; clip-path: none; pointer-events: auto;
  border-radius: 999px; background: var(--rk-paper); color: var(--rk-ink);
  box-shadow: var(--rk-sh-3);
}
/* gx.css の暗い楕円のベールは要らない（明るい部屋なので、敷くと汚れて見える） */
.has-3d .gx-station__inner::before { content: none; }

/* 読み物への札（1駅に1枚だけ）。文言は開く中身の題名にする */
.gx-more {
  position: fixed; left: 16px; bottom: 54px; z-index: 22;
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 9px 16px;
  border: 0; border-radius: 999px;
  background: var(--rk-paper); color: var(--rk-ink);
  box-shadow: var(--rk-sh-2);
  font: inherit; font-size: 12.5px; font-weight: 700; letter-spacing: .02em;
  text-decoration: none; cursor: pointer;
  transition: transform .18s cubic-bezier(.2, .8, .3, 1), box-shadow .18s ease;
}
.gx-more::before {
  content: ""; width: 8px; height: 8px; border-radius: 2px;
  background: var(--rk-accent); flex: none;
}
.gx-more:hover, .gx-more:focus-visible { color: var(--rk-ink); transform: translateY(-2px); box-shadow: var(--rk-sh-3); }
@media (max-width: 700px) { .gx-more { left: 10px; bottom: 48px; font-size: 11.5px; padding: 8px 13px; } }

/* ★札は「いま出ている部屋の1枚」だけ出す（2026-09-05・実測で判明）。
   .gx-more は3枚（RIKEI のこと／三段のこと／授業のこと）あり、上の指定で
   position: fixed の**同じ場所**に置いてある。出し分ける規則がどこにも無かったので
   3枚が完全に重なり、DOM順で最後の「授業のことを読む」だけが押せていた。
   実測＝理科の部屋にいるのに、3枚とも位置 [16,702,150,44]・不透明度1・z=22 で、
   elementFromPoint が拾うのは talk の1枚のみ。「RIKEI のこと」「三段のこと」には
   どうやってもたどり着けなかった。上のコメント「1駅に1枚だけ」が元の意図。
   ※ is-live ではなく「出ている絵」で決める。全駅クリア後は activeStation() が null で
     is-live がどこにも付かず、is-live 基準だと札が1枚も出なくなるため（gx-state.js:105）。
     クラスは rik-extras.js が gx:enter で付ける。ロビー表示中（html.is-locked）は全部隠す。 */
.has-3d:not(.is-tour) .gx-more { display: none; }
.has-3d:not(.is-tour):not(.is-locked) .gx-station.rik-shown .gx-more { display: inline-flex; }

/* 窓（語り）が出る場所を、あらかじめ空けておく見えない枠。
   印はここを避け続けるので、窓が開いた瞬間に覆われることが構造的に起きない（罠#207）。
   ★display:none にすると checkVisibility() が false になってよけ先から外れる。opacity で消す */
.rik-docslot {
  position: fixed; right: 3vw; bottom: 12vh; z-index: 1;
  width: min(400px, 88vw); height: 62svh;
  opacity: 0; pointer-events: none;
}
@media (max-width: 640px) { .rik-docslot { inset: auto 0 0 0; width: auto; height: 46svh; } }

/* 見回し方の教え（最初の1回だけ・文字ではなく図で） */
.rik-teach {
  position: fixed; left: 50%; bottom: 78px; z-index: 21;
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px;
  padding: 7px 14px; border-radius: 999px;
  background: rgba(252, 251, 249, .92);
  box-shadow: var(--rk-sh-2);
  opacity: 0; pointer-events: none;
  transition: opacity .5s ease;
}
.rik-teach.is-on { opacity: 1; }
html.has-looked .rik-teach { opacity: 0; }
.rik-teach__small { display: none; }     /* 文字は出さない。矢印だけで伝える */
.rik-teach__big {
  font-size: 0;                          /* 読み上げには残す。目には出さない */
  display: flex; align-items: center; gap: 9px;
}
.rik-teach__big::before, .rik-teach__big::after {
  content: ""; width: 9px; height: 9px; flex: none;
  border-top: 2px solid var(--rk-green); border-right: 2px solid var(--rk-green);
}
.rik-teach__big::before { transform: rotate(-135deg); }
.rik-teach__big::after  { transform: rotate(45deg); }
.rik-teach::after {
  content: ""; width: 10px; height: 10px; border-radius: 50%;
  background: var(--rk-accent);
  animation: rk-swing 1.9s ease-in-out infinite;
}
@keyframes rk-swing { 0%, 100% { transform: translateX(-13px); } 50% { transform: translateX(13px); } }

/* ============================================================================
   6. 印（ホットスポット）── 深緑のベタ丸＋白い数字
   ============================================================================
   DYNAMO は「黄色いギザギザのシール」、v1 は「黄色い角丸のふせん」。
   v2 は**深緑の丸**。明るいオフホワイトの部屋でいちばん見つけやすく、
   かつ差し色のマンダリンを「押した／触れた」の合図に取っておける。

   ★押しは**見えているところだけ**で受ける（罠：透明なすきまが本文のボタンを飲む）。
     親は pointer-events:none、疑似要素だけ auto。 */
.gx-hotspot.is-pinned {
  gap: 6px;
  color: var(--rk-ink);
  filter: drop-shadow(0 3px 8px rgba(20, 50, 42, .28));
  animation: none; box-shadow: none;
  /* ★箱そのものが押せる（2026-09-02 実測で直した）。
     以前は箱を pointer-events:none にして、丸(::before)と札(::after)だけ受けていた。
     この印は「丸／6pxの隙間／札」の縦並びなので、**箱の中心＝隙間**になる。
     つまり印のまん中を狙うと、クリックが隙間をすり抜けて背後の 3D に落ちる。
     probe_seals が「出戻りで開かない」で掴んだ。箱＝丸と札の外周そのものなので、
     見えていない場所を余分に奪うことはない。 */
  pointer-events: auto;
}

.gx-hotspot.is-pinned:not([data-marker="drag"])::before {
  content: attr(data-rik-no);
  display: grid; place-items: center;
  box-sizing: border-box;
  width: 44px; height: 44px;
  border: 0; border-radius: 50%;
  background: var(--rk-green);
  color: #FFFFFF;                        /* 深緑の上で 9.60:1 */
  box-shadow: 0 0 0 3px rgba(252, 251, 249, .95);
  font-family: var(--rk-en); font-weight: 700;
  font-size: 17px; line-height: 1;
  animation: rk-ping 2.4s cubic-bezier(.2, .7, .3, 1) infinite;
  transition: background-color .16s linear, transform .16s cubic-bezier(.2, .7, .3, 1);
}
@keyframes rk-ping {
  0%   { box-shadow: 0 0 0 3px rgba(252,251,249,.95), 0 0 0 0 rgba(30, 77, 62, .40); }
  70%  { box-shadow: 0 0 0 3px rgba(252,251,249,.95), 0 0 0 16px rgba(30, 77, 62, 0); }
  100% { box-shadow: 0 0 0 3px rgba(252,251,249,.95), 0 0 0 0 rgba(30, 77, 62, 0); }
}
.gx-hotspot.is-pinned:not([data-marker="drag"])::after {
  content: attr(data-label);
  display: grid; place-items: center;
  box-sizing: border-box;
  height: 26px; max-width: none;
  padding: 0 11px;
  border: 0; border-radius: 999px;
  background: var(--rk-paper);
  color: var(--rk-ink);                  /* 13.61:1 */
  box-shadow: var(--rk-sh-2);
  font-family: var(--rk-ja); font-weight: 700;
  font-size: 12.5px; line-height: 1; letter-spacing: .02em;
  white-space: nowrap;
}
.gx-hotspot.is-pinned:not([data-marker="drag"]):hover::before,
.gx-hotspot.is-pinned:not([data-marker="drag"]):focus-visible::before {
  background: var(--rk-accent-d);        /* 白文字で 5.02:1 */
  transform: scale(1.09);
  animation: none;
}
/* 見つけ済み：番号はそのまま、色を抜いて小さくする（文字を使わない） */
.gx-hotspot.is-pinned.is-found { opacity: 1; }
html:not(.is-overview) .gx-hotspot.is-pinned.is-found { opacity: 1; }
.gx-hotspot.is-pinned.is-found:not([data-marker="drag"])::before {
  width: 36px; height: 36px; font-size: 14px;
  background: var(--rk-green-1);
  color: var(--rk-ink);                  /* #8FB8A8 の上で 6.36:1 */
  animation: none;
}
.gx-hotspot.is-pinned.is-found:not([data-marker="drag"])::after {
  background: rgba(252, 251, 249, .88);
  box-shadow: var(--rk-sh-1);
  font-weight: 500;
}
/* 画角の外の印は消さず、画面の端へ寄せる（罠#206）。外向きの矢羽根を添える */
.gx-hotspot.is-pinned.is-edge::after { position: relative; }
.gx-hotspot.is-pinned.is-edge[data-edge="right"]::after { padding-right: 20px; }
.gx-hotspot.is-pinned.is-edge[data-edge="left"]::after  { padding-left: 20px; }

@media (max-width: 900px), (max-height: 820px) {
  .gx-hotspot.is-pinned:not([data-marker="drag"])::before { width: 36px; height: 36px; font-size: 14px; }
  .gx-hotspot.is-pinned:not([data-marker="drag"])::after  { height: 23px; font-size: 11.5px; padding: 0 9px; }
  .gx-hotspot.is-pinned.is-found:not([data-marker="drag"])::before { width: 30px; height: 30px; font-size: 12px; }
}

/* ── なぞる課題（線を引く）は横長の帯 ────────────────────────
   丸では「横に引く」が伝わらないので形を変える。
   ★帯の文言と CONFIG.quest.axis を必ず揃える（罠#203） */
.gx-hotspot.is-pinned[data-marker="drag"] {
  filter: drop-shadow(0 3px 10px rgba(20, 50, 42, .26));
}
.gx-hotspot.is-pinned[data-marker="drag"]::before {
  content: "";
  width: 208px; height: 44px;
  border: 0; border-radius: 999px;
  background-color: rgba(252, 251, 249, .96);
  /* ①流れる矢羽根（横になぞる合図）②引けたぶん ③空の樋 の3層 */
  background-image:
    repeating-linear-gradient(115deg,
      rgba(20, 50, 42, .10) 0 9px, rgba(20, 50, 42, 0) 9px 24px),
    linear-gradient(90deg,
      var(--rk-green) calc(var(--q, 0) * 100%),
      rgba(0, 0, 0, 0) calc(var(--q, 0) * 100%));
  background-size: 200% 100%, 100% 100%;
  background-position: 0 0, 0 0;
  box-shadow: 0 0 0 3px rgba(252, 251, 249, .95), var(--rk-sh-2);
  animation: rk-flow 1.6s linear infinite;
}
@keyframes rk-flow { to { background-position: -200% 0, 0 0; } }
.gx-hotspot.is-pinned.is-found[data-marker="drag"]::before,
.gx-hotspot.is-pinned[data-marker="drag"][style*="--q: 1"]::before { animation: none; }
.gx-hotspot.is-pinned[data-marker="drag"]::after {
  content: attr(data-label);
  display: grid; place-items: center;
  height: 26px; max-width: none; padding: 0 12px;
  border: 0; border-radius: 999px;
  background: var(--rk-green); color: #FFFFFF;
  box-shadow: var(--rk-sh-2);
  font-family: var(--rk-ja); font-weight: 700;
  font-size: 12.5px; letter-spacing: .04em; line-height: 1;
  white-space: nowrap;
}
@media (max-width: 700px) {
  .gx-hotspot.is-pinned[data-marker="drag"]::before { width: 172px; height: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .gx-hotspot.is-pinned[data-marker="drag"]::before,
  .gx-hotspot.is-pinned:not([data-marker="drag"])::before { animation: none; }
}

/* ============================================================================
   7. 窓（ポップアップ）── 白い紙のカード
   ============================================================================
   DYNAMO / v1 は「上端に三色帯・太いインクの縁・硬い影」。v2 は帯も縁も無い。
   区切りは**見出しの左の 2px の縦線**だけにして、余白で読ませる。 */
.gx-modal {
  --rk-doc-r: var(--rk-r);
  padding: 22px 24px 16px;
  border: 0; border-radius: var(--rk-doc-r);
  background: var(--rk-paper);
  color: var(--rk-ink);
  box-shadow: var(--rk-sh-3);
}
.gx-modal::before { content: none; }     /* v1 の三色帯を出さない */
/* ★必ず折り返す（2026-09-02 実測で直した）。
   見出しは「札・×」の1行目と「題」の2行目に分かれる作りだが、
   flex-wrap を書いていなかった。題は flex:1 0 100%（＝縮まない）ので、
   1行に札と×を足した分（実測119px）だけ横にはみ出し、
   ブラウザが窓ごと横へスクロールして**本文の左端が全部切れて**いた。 */
.gx-modal__head { align-items: center; gap: 10px; flex-wrap: wrap; }
.gx-modal__head::before {
  content: "みつけた";
  order: -1;
  display: inline-grid; place-items: center;
  height: 22px; padding: 0 10px;
  border-radius: 999px;
  background: var(--rk-green-1);
  color: var(--rk-ink);                  /* 6.36:1 */
  font-family: var(--rk-ja); font-weight: 700;
  font-size: 11px; letter-spacing: .04em; line-height: 1;
  white-space: nowrap;
}
html.gx-doc-big .gx-modal__head::before { content: "RIKEI のこと"; }
html.gx-doc-big.doc-rika  .gx-modal__head::before { content: "理科強化部屋"; }
html.gx-doc-big.doc-sansu .gx-modal__head::before { content: "算数強化部屋"; }
html.gx-doc-big.doc-talk  .gx-modal__head::before { content: "面談部屋"; }
.gx-modal__title {
  flex: 1 0 100%;                        /* 札の下へ回り込ませる */
  margin: .5em 0 0;
  font-family: var(--rk-ja); font-weight: 700;
  font-size: clamp(1.02rem, 2.4vw, 1.22rem); letter-spacing: 0; line-height: 1.5;
  color: var(--rk-ink);
}
.gx-modal__close {
  /* ★1行目の右端。折り返しを入れたら order:2 だと題（flex:1 0 100%）に
     押し出されて3行目へ落ち、見出しの下に取り残されていた（2026-09-02 試写）。
     札と同じ order にして、margin-left:auto で右端へ寄せる。 */
  order: -1; margin: 0 0 0 auto;
  width: 34px; height: 34px; flex: none;
  border: 0; border-radius: 50%;
  background: rgba(20, 50, 42, .07); color: var(--rk-ink);
  font: inherit; font-size: 1.1rem; line-height: 1; cursor: pointer;
  transition: background-color .14s linear;
}
.gx-modal__close:hover, .gx-modal__close:focus-visible { background: var(--rk-green); color: #FFFFFF; }
.gx-modal__body { margin-top: 4px; }
.gx-modal__body p {
  margin: .7em 0 0;
  font-size: .93rem; line-height: 1.85; color: var(--rk-ink);
}
.gx-modal__body p b, .gx-modal__body p strong { font-weight: 700; color: var(--rk-green); }

/* 窓の中の写真。**部屋・風景は帯に切ってよい**（罠#234 の但し書き）。
   実測：3:2 のまま置くと本文が 168px はみ出す。帯にすると器に収まる。
   目で見て入っているように見える、で通さない＝probe_windows.py で測る */
.gx-modal__body .rik-revimg {
  display: block; width: 100%;
  height: clamp(112px, 17.5vh, 152px);
  object-fit: cover; object-position: 50% 46%;
  margin: .2em 0 .2em;
  border: 0; border-radius: var(--rk-r-s);
  box-shadow: var(--rk-sh-1);
}
@media (max-width: 700px) { .gx-modal__body .rik-revimg { height: 96px; } }

.rik-goshop { margin-top: 1em; }
.rik-shoplink {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; padding: 10px 18px;
  border-radius: 999px;
  background: var(--rk-green); color: #FFFFFF;   /* 9.60:1 */
  font-weight: 700; font-size: .93rem; text-decoration: none;
  box-shadow: var(--rk-sh-2);
  transition: background-color .16s linear, transform .16s cubic-bezier(.2,.8,.3,1);
}
.rik-shoplink::after { content: "→"; font-family: var(--rk-en); }
.rik-shoplink:hover, .rik-shoplink:focus-visible { background: var(--rk-accent-d); transform: translateY(-2px); }

/* 戻るボタン（rik-extras.js が窓に足す） */
/* ★窓は「頭・本文・足」の3段に組む（2026-09-02 probe_windows の実測で直した）。
   共有の gx.css は窓ごと overflow-y:auto なので、あとから足した「戻る」が
   窓の下からこぼれ、3D の面にかぶられて**どの画面でも押せなかった**。
   本文だけが伸び縮みして、足は必ず見える形にする。 */
/* ★必ず [open] を付ける（2026-09-02 実測で直した）。
   <dialog> は閉じているとき display:none になるが、それはブラウザ既定の指定。
   **作者が書いた display は既定に勝つ**ので、`.gx-modal { display:flex }` と書くと
   閉じた窓が画面に残り、透明なままクリックだけ食べる。
   実測：ロビーの「面談部屋」の扉が押せなくなっていた（窓は右下に出るため、そこだけ）。 */
.gx-modal[open] { display: flex; flex-direction: column; overflow: hidden; }
.gx-modal__head, .rik-docback { flex: none; }
.gx-modal__body { min-height: 0; overflow-y: auto; }   /* min-height:0 が無いと縮まない */

/* ★見た目は**ボタン側**に付ける。以前は入れ物（.rik-docback）に付けていたので、
   中の button が素のままで、丸い帯の中に既定のボタンが入る形になっていた。 */
.rik-docback { display: flex; justify-content: flex-start; margin-top: 12px; }
.rik-docback__btn {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 44px; padding: 9px 16px;
  border: 0; border-radius: 999px;
  background: rgba(20, 50, 42, .07); color: var(--rk-ink);
  font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer;
}
.rik-docback__btn:hover, .rik-docback__btn:focus-visible { background: var(--rk-green); color: #FFFFFF; }
.rik-docback__arrow { font-family: var(--rk-en); }

/* 窓の下端を溶かして「続きがある」を伝える。収まっているときは溶かさない */
.gx-modal__body {
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 22px), rgba(0,0,0,.18) 100%);
          mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 22px), rgba(0,0,0,.18) 100%);
}
.gx-modal__body.is-fit { -webkit-mask-image: none; mask-image: none; }
/* 写真つきの語りだけ、窓の背を高くする。
   ★上端は必ずヘッダーの下で止める（罠#228：×がメニューの下敷きになる） */
html.gx-doc-tall .gx-modal {
  max-height: min(760px, calc(100svh - 176px));
  width: min(420px, 92vw);
}

/* ★携帯の帯は 46svh では足りない（2026-09-02 実測）。
   360x640 で見出し2行＋足の「戻る」を引くと、本文の器が 88px しか残らなかった。
   窓が開いているあいだ HUD は伏せてあるので、画面の高さの7割まで使ってよい。 */
@media (max-width: 640px) {
  .gx-modal,
  html.gx-doc-tall .gx-modal { max-height: min(72svh, calc(100svh - 88px)); }
}

/* ── 指の割り当て（2026-09-02）────────────────────────────
   横になぞる＝部屋を見回す／縦になぞる＝ページを巻く。
   touch-action を既定（auto）のままにすると、端末によっては横なぞりも
   ブラウザがスクロールと解釈して、見回しが効かない。ここで割り当てを言い切る。 */
.gx-shell, .gx-stage, .gx-stage canvas { touch-action: pan-y; }

/* ── 読み物を読んでいる間は、上に乗るものを下げる ────────────────
   ★内田指摘（2026-09-02）「コンテンツの上にボタンがきたり」。
   判定（html.rik-reading）は rik-extras.js が持っていたのに、
   **それを受けるCSSをこちらが書き忘れていた**。だから文章の上に
   部屋の印と矢印がそのまま乗っていた。判定だけあっても何も起きない。 */
html.rik-reading .gx-hotspot.is-pinned,
html.rik-reading .rik-teach,
html.rik-reading .rik-docslot,
html.rik-reading .gx-more,
html.rik-reading .gx-hud {
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity .28s ease;
}

/* ============================================================================
   8. 読み物（#about）── 白い紙の上に、余白で読ませる
   ============================================================================ */
.gx-station[data-reading] { padding-top: 8svh; padding-bottom: 8svh; }
.gx-station[data-reading] .rik-read {
  max-width: 40rem;
  padding: clamp(26px, 4.2vw, 48px) clamp(22px, 3.8vw, 44px) clamp(30px, 4.6vw, 52px);
  border-radius: var(--rk-r);
  background: var(--rk-paper);
  box-shadow: var(--rk-sh-3);
  color: var(--rk-ink);
}
.gx-station[data-reading] .rik-read p.gx-meta.gx-meta {
  display: inline-block; margin: 0 0 1em;
  padding: 5px 12px 6px;
  border-radius: 999px;
  background: var(--rk-green-1);
  color: var(--rk-ink);                  /* 6.36:1 */
  font-family: var(--rk-ja); font-weight: 700;
  font-size: .78rem; letter-spacing: .04em;
}
.rik-read h1 {
  margin: 0 0 .8em;
  font-size: clamp(1.5rem, 4vw, 2.1rem); font-weight: 700; line-height: 1.5;
  color: var(--rk-ink);                  /* 13.61:1 */
}
.rik-read h3 {
  margin: 2.2em 0 .5em; padding-left: .8em;
  border-left: 2px solid var(--rk-green);
  font-size: 1.16rem; font-weight: 700; line-height: 1.6;
  color: var(--rk-green);                /* 9.32:1 */
}
.rik-read h3[data-en]::before {
  content: attr(data-en);
  display: block; margin-bottom: .3em;
  font-family: var(--rk-en); font-weight: 600;
  font-size: .62rem; letter-spacing: .16em;
  color: var(--rk-green);                /* ★地(#EFEBE4)の上なので緑。8.01:1 */
}
.rik-read p { margin: 0 0 1.1em; font-size: .98rem; line-height: 2; max-width: none; }
.rik-read p b, .rik-read p strong { font-weight: 700; color: var(--rk-green); }
.rik-read a { color: var(--rk-accent-d); text-underline-offset: 4px; }

.rik-read .rik-fig { margin: 1.8em 0 2em; }
.rik-read .rik-fig img {
  display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover;
  border-radius: var(--rk-r-s);
  box-shadow: var(--rk-sh-2);
}
.rik-read .rik-fig figcaption {
  margin-top: .8em; font-size: .85rem; line-height: 1.8; color: var(--rk-muted);
}
.rik-read .rik-scenes {
  display: grid; gap: clamp(14px, 2.2vw, 22px); margin: 1.5em 0 2em; padding: 0; list-style: none;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.rik-read .rik-scenes li { margin: 0; }
.rik-read .rik-scenes img {
  display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover;
  border-radius: var(--rk-r-s); box-shadow: var(--rk-sh-2);
}
.rik-read .rik-scenes b { display: block; margin: .8em 0 .2em; font-size: .96rem; color: var(--rk-green); }
.rik-read .rik-scenes span { display: block; font-size: .86rem; line-height: 1.85; color: var(--rk-ink); }
.rik-read .rik-scenes--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rik-read .rik-scenes--two img { aspect-ratio: 4 / 3; object-position: 50% 32%; }
@media (max-width: 640px) { .rik-read .rik-scenes--two { grid-template-columns: 1fr; } }
/* 絵の無い箇条（やらないこと）は、左の細い線だけで区切る */
.rik-read .rik-scenes--plain { grid-template-columns: 1fr; gap: 0; }
.rik-read .rik-scenes--plain li {
  padding: .9em 0 .9em 1em;
  border-left: 2px solid var(--rk-line);
}
.rik-read .rik-scenes--plain li + li { border-top: 1px solid var(--rk-line); }
.rik-read .rik-scenes--plain b { margin-top: 0; }

/* ============================================================================
   9. 全部の部屋を見たあとの「締めの1手」
   ============================================================================
   遊び終わると印が全部降りて、画面に押せるものが無くなる。
   このサイトの締めは「体験授業の申し込み」1つだけなので、そこへの入口を出す。 */
.rik-finale {
  position: fixed; left: 50%; bottom: 24px; z-index: 60;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  min-height: 56px; padding: 9px 26px 11px;
  border: 0; border-radius: var(--rk-r);
  background: var(--rk-green); color: #FFFFFF;    /* 9.60:1 */
  box-shadow: var(--rk-sh-3);
  text-decoration: none;
  animation: rk-pop .5s cubic-bezier(.2, 1.5, .4, 1);
  transition: transform .18s cubic-bezier(.2,.8,.3,1), box-shadow .18s ease, background-color .18s linear;
}
.rik-finale[hidden] { display: none; }
.rik-finale__lead { font-size: 10.5px; letter-spacing: .04em; opacity: .8; }
.rik-finale__cta { font-size: 1rem; font-weight: 700; letter-spacing: .02em; }
.rik-finale__cta::after { content: " →"; font-family: var(--rk-en); }
.rik-finale:hover, .rik-finale:focus-visible {
  background: var(--rk-accent-d);
  transform: translateX(-50%) translateY(-3px);
}
@keyframes rk-pop { from { transform: translateX(-50%) scale(.88) translateY(10px); } to { transform: translateX(-50%); } }
@media (max-width: 700px) { .rik-finale { bottom: 72px; padding: 8px 20px 10px; } }
@media (prefers-reduced-motion: reduce) { .rik-finale { animation: none; } }

/* ============================================================================
   10. フッター
   ============================================================================ */
.gx-footer {
  background: var(--rk-green);
  border-top: 0;
  padding: 7svh 6vw;
}
.rik-footcard { max-width: 40rem; margin: 0 auto; color: #FFFFFF; }
.rik-foot { margin: 0; font-size: 1.02rem; font-weight: 700; }
.rik-footline { margin: .5em 0 0; font-size: .86rem; line-height: 1.9; color: rgba(255, 255, 255, .88); }
.gx-footer .gx-meta { margin: 1.4em 0 0; font-size: .74rem; line-height: 1.9; color: rgba(255, 255, 255, .72); }

/* ============================================================================
   11. カーソル（3Dの上だけ）
   ============================================================================
   DYNAMO は「クリームの縁＋濃い塗りの太い矢印」。v2 は**細い線の矢印**にする。 */
@media (hover: hover) and (pointer: fine) {
  html.has-3d:not(.is-tour) .gx-stage,
  html.has-3d:not(.is-tour) body { cursor: grab; }
  html.has-3d.is-grabbing body,
  html.has-3d.is-grabbing .gx-stage { cursor: grabbing; }
  html.has-3d:not(.is-tour) .gx-hotspot,
  html.has-3d:not(.is-tour) .gx-more,
  html.has-3d:not(.is-tour) .gx-logo,
  html.has-3d:not(.is-tour) .rik-menu__btn,
  html.has-3d:not(.is-tour) a,
  html.has-3d:not(.is-tour) button { cursor: pointer; }
}

/* ============================================================================
   12. 縮退（見るだけモード・WebGL不可）
   ============================================================================
   3Dが立たない経路では、ただの読み物として素直に見せる。全文が読める＝縮退の約束。 */
html.no-3d, html.is-tour { background: var(--rk-bg); }
.no-3d .gx-station, .is-tour .gx-station {
  min-height: auto; padding: 6svh 6vw; align-items: flex-start;
}
.no-3d .gx-station__inner, .is-tour .gx-station__inner {
  max-width: 40rem; margin: 0 auto;
  padding: clamp(24px, 4vw, 40px);
  border-radius: var(--rk-r);
  background: var(--rk-paper);
  box-shadow: var(--rk-sh-2);
}
.no-3d .gx-station h2, .is-tour .gx-station h2 {
  font-size: clamp(1.3rem, 3.4vw, 1.9rem); color: var(--rk-ink);
}
.no-3d .gx-sub, .is-tour .gx-sub { color: var(--rk-muted); }
.no-3d .gx-meta, .is-tour .gx-meta { color: var(--rk-accent-d); }
.no-3d .gx-hotspot, .is-tour .gx-hotspot {
  border: 0; border-radius: 999px;
  background: var(--rk-green); color: #FFFFFF;
  padding: 10px 18px; margin: 4px 6px 4px 0;
}
.no-3d .gx-hotspot:hover, .is-tour .gx-hotspot:hover { background: var(--rk-accent-d); }
.no-3d .gx-secret, .is-tour .gx-secret {
  margin: 1em 0 0; padding: 16px 18px;
  border-radius: var(--rk-r-s);
  background: rgba(30, 77, 62, .06);
}
.no-3d .rik-teach, .is-tour .rik-teach,
.no-3d .rik-docslot, .is-tour .rik-docslot,
.no-3d .rik-finale, .is-tour .rik-finale { display: none !important; }
.no-3d .gx-more, .is-tour .gx-more { display: none; }
.is-tour .gx-docs, .no-3d .gx-docs { color: var(--rk-ink); }
.is-tour .gx-docs h3, .no-3d .gx-docs h3 { color: var(--rk-green); }

/* 動きを減らす設定：幕（ロビー）は gx.css が display:none にする。
   そのままだと入口が消えるので、**ロビーを本文の先頭に置き直す** */
@media (prefers-reduced-motion: reduce) {
  .gx-gate { display: block !important; position: static; height: auto; }
  .gx-gate.is-gone { display: none !important; }
}

/* 模型入口の補助文も紙面から十分に分離する。 */
.rik-lobby__lede,.rik-lobby__foot{color:#344c40;opacity:1}