/* 🔴 2026-09-02 A（統括）：★★書体は【六本木VC の記事本文】に合わせた。★サイズは 15px のまま
   ★記事の実物 .blog-single .content{font-family:var(--sans);font-size:16px;line-height:1.9;font-weight:400}
     ★★見出し h2・h3 も var(--sans) の 600（★明朝ではない）／ h1 だけ var(--serif)
   ★★★書体は元から記事と同一（--sans:'Inter',system-ui ／ --serif:'Source Serif 4','Noto Serif JP'）。
     ★違っていたのは【割り当て】だけだった → h2 を明朝300 から sans600 に変えた
   ★★★戻さないこと
     ✗ h2 を明朝（--serif）に戻さない（★却下）
     ✗ .lead / .chap / .fg / .nst / .cap を 15px 未満にしない（★「小さい」で3回 却下）
   🔴🔴 2026-09-06：★★★「16px に上げない」（★2026-09-02 13:4x の却下）は【山田様が解除しました】。
     ★山田様「ゲームの吹き出しが、Agora記事と比べて小さいし灰色っぽくて薄い。記事より見づらい」
     ★「これは気にするな、記事に合わせろ」→ ★記事の 16.6px に合わせました。★却下は無効です
   🔴🔴🔴 2026-09-06 21:0x：★★★行間を記事に合わせました（★1.9 は【誤り】でした）
     ★山田様「記事の行間これじゃないよな。なんか今見た目が間延びしてて間抜けなんだよ。記事と合わせろよ」
     ★★なぜ間延びしたか ── ★1.9 は文字が 15px だった頃の倍率です。
       変更前 15px × 1.9  ＝ 28.5px   ★偶然、記事とほぼ同じだった
       記事   16.6px × 1.70 ＝ 28.22px
       誤り   16.6px × 1.9  ＝ 31.54px ★文字を上げたのに倍率を据え置いたので 3.3px 伸びた
     ✅ 吹き出し（.cl .bb）  16.6px × 1.70  ＝ 28.22px（★記事の吹き出しと同じ）
     ✅ 本文相当             16.6px × 1.831 ＝ 30.39px（★記事の本文と同じ）
        ★.chap ／ .lead ／ .cap ／ .fg .ft ／ .fg .fn ／ .nst .lb ／ .nst .sb
     ★★「15px 未満にしない」の却下は【まだ有効】です（★今回は上げる方向なので衝突しません）
   ★表（.dtab）だけ 12.5 → 14px（★山田様が「チープ」と指摘した箇所） */
/* ══════════════════════════════════════════════════════════════════════════
   AIの詰将棋 ── common.css（23ページで共有）
   🔴 2026-09-02 1問1ページ担当が新設
   ──────────────────────────────────────────────────────────────────────────
   ★★中身は tsume-03-train-dialog.html の <style> 12〜119行の【写し】です。
     ★ゲームの見た目を1pxも動かさないため、値は1文字も変えていません。
   ★★★ただし【5本で値が違う5規則】だけは 00/01 の値（＝系列の基準）に戻しました ──
     .cap ／ .ctl label ／ input[type=range] ／ .sc-label ／ .sc-pct
     → ★03 の値は各ページの <style> で上書きします（★03 の枠を1pxも動かさないため）
   ★★03 だけの3規則（.ctl label span:first-child ／ .qrow ／ .qrow .qt）も各ページへ出しました
   ★★.fg / .nst の15規則は 02 から持ち上げ（★「いま どこの話か」の入れ子図。→ A の判断4）
   ★@media (max-width:430px) の【SVG の id 一覧】は本ごとに違うので各ページに残します（→ A が承認）
   ══════════════════════════════════════════════════════════════════════════ */

/* 🔴 2026-09-06：★灰色を記事に合わせて2段階 濃くした（--gray-500 #6e6e6e→#444 ／ --gray-600 #3f3f3f→#2a2a2a）
   ★★★同じ :root が【18ページの <style> にも】あります（q01〜q14・q18〜q21）。★後勝ちなので両方 直すこと */
:root{
 --bg:#fff; --white:#fff; --black:#000;
 --gray-100:#f9f9f9; --gray-200:#d9d9d9; --gray-500:#444; --gray-600:#2a2a2a;
 --accent:#019949;
 --sans:'Inter',system-ui,sans-serif;
 --serif:'Source Serif 4','Noto Serif JP',Georgia,serif;
 --content-w:52.625rem;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--black);font-family:var(--sans);
 -webkit-font-smoothing:antialiased}
.wrap{max-width:var(--content-w);margin:0 auto;padding:0 1.5rem 5rem}
.top{border-bottom:1px solid var(--gray-200);margin-bottom:2.4rem;background:var(--white)}
.top .in{max-width:var(--content-w);margin:0 auto;padding:1.5rem 1.5rem;
  display:flex;align-items:center;gap:1rem}
/* 🔴 2026-09-09 A：★エンブレムも .cta .em2 と同じ大きさにした（PC 64px / スマホ 54px）
   ★実測（直す前）PC 52px / スマホ 42px だった */
.top .em{width:64px;height:64px;flex-shrink:0;display:block}
/* ══════════════════════════════════════════════════════════════════════════
   🔴 2026-09-04 A：★★上のバー一帯を【はじめのページへのリンク】にした（★山田様の指定）。
     ★エンブレム・タイトル・説明文をまとめて <a class="home"> で包んでいる（→ common.js drawTop）。
   ★★包むと flex の子が <a> 1つになるので、★並べる指定を <a> にも持たせる
     （★こうしないと エンブレムとタイトルが縦に積まれます）
   ★見た目は包む前と同じにする ── ★色を継ぐ・下線を出さない。
     ★押せることは【指カーソル】と【重ねたときだけ出る下線】で示す
   ★★はじめのページ自身では包みません（★自分に飛ぶリンクを置かない。→ common.js）
   ══════════════════════════════════════════════════════════════════════════ */
.top .in>.home{display:flex;align-items:center;gap:1rem;min-width:0;flex:1 1 auto;
  color:inherit;text-decoration:none;cursor:pointer}
.top .in>.home:hover .nm{text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:3px}
.top .in>.home:focus-visible{outline:2px solid var(--black);outline-offset:3px;
  border-radius:4px}
.top .ti{min-width:0}
/* 🔴🔴 2026-09-09 A：★★製品名のフォントを【サンセリフ】に揃えた（★山田様の指定 2026-09-09）
   ★★★「1番上のこれがトップページと他のページでフォントが多分違う」
   ★実測（直す前）── ★上のバー 20.8px【明朝】／★はじめる枠 24.8px【サンセリフ】
     → ★★index の中で同じ製品名が2種類のフォントで出ていた
   ★★★サンセリフに揃えた理由 ── ★はじめる枠は記事の .a-cta と同じにする必要があり、
     ★記事の本番を測ったら【Inter（サンセリフ）】だった。★だから逆には揃えられない
   ★★§5-40 ⒝ の「タイトル1.75rem明朝」からは変わっている（★山田様の指定による変更） */
/* 🔴🔴🔴 2026-09-09 A：★★★上のバーを【はじめる枠（.cta）と1つも違わない値】にした
   ★★★山田様「トップと他でフォント違うし全部大文字かどうかも違うし。
     トップページの形に全部合わせろ」（2026-09-09）
   ★実測（直す前）── ★違っていたのは4つ
     大きさ    20.8px  対  24.8px
     太さ      600     対  700
     字間      0.416px 対  normal   ← ★★これが「全部大文字っぽく見える」原因だった
     行の高さ  24.96px 対  33.48px
   ★★★これからは【.cta .nm3 と同じ値】。★片方を変えたら もう片方も変える */
.top .ti .nm{display:block;font-family:var(--sans);font-size:1.55rem;font-weight:700;
  line-height:1.35;letter-spacing:normal;color:var(--black)}
/* 🔴 2026-09-09 A：★タグラインも .cta .sb2 と同じ値にした（15.5px / #555 / 行間1.75）
   ★実測（直す前）12.5px / #444 / 20px だった */
.top .in .tag{display:block;margin-top:.28rem;font-size:15.5px;letter-spacing:normal;
  color:#555;line-height:1.75;font-weight:400}
@media (max-width:430px){
  .pv{gap:.35rem}
  .pv .lb{font-size:10px}
  .pv .lb .tt{display:none}
  .pv .sg.on .lb .tt{display:inline}

  .top .in{padding:1.1rem 1.1rem;gap:.7rem}
  .top .in>.home{gap:.7rem}
  /* 🔴 2026-09-09 A：★スマホでも【はじめる枠と同じ】── ★縮めるのはエンブレムだけ（54px）。
     ★★製品名とタグラインは【縮めない】（★.cta は縮めていないので揃えた） */
  .top .em{width:54px;height:54px}
}
.eyebrow{font-size:13px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
 color:var(--gray-500);margin-bottom:.9rem}
h1{font-family:var(--serif);font-size:2.1rem;font-weight:300;line-height:1.35;margin:0 0 .8rem}
h2{font-family:var(--sans);font-size:1.375rem;font-weight:600;line-height:1.4;margin:0 0 1rem}
h3{font-family:var(--sans);font-size:1.125rem;font-weight:600;margin:1.4rem 0 .6rem}
.lead{font-size:16.6px;line-height:1.831;color:var(--gray-600);margin:0 0 1.1rem}
.lead b{color:var(--black)}
.meta{font-size:13px;letter-spacing:.1em;color:var(--gray-500);padding-bottom:1.2rem;
 border-bottom:1px solid var(--gray-200);margin-bottom:1.2rem}
.steps{display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:2.4rem}
.steps div{flex:1 1 5rem;padding:.55rem .3rem;text-align:center;font-size:12px;
 border:1px solid var(--gray-200);color:var(--gray-500);background:var(--white)}
.steps div.open{border-color:var(--black);color:var(--black)}
.steps div.done{background:var(--black);border-color:var(--black);color:var(--white)}
.card{border:1px solid var(--gray-200);padding:2rem;margin-bottom:2rem;background:var(--white)}
.tagline{font-size:13px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
 color:var(--gray-500);margin-bottom:.9rem}
.figbox{background:var(--gray-100);border:1px solid var(--gray-200);padding:1rem;margin:1.3rem 0}
/* ★★図・つまみ・判定を1つの枠にまとめる（→00 の §2-2） */
.panel{background:var(--gray-100);border:1px solid var(--gray-200);padding:1rem;margin:1.3rem 0}
.panel .ctl{margin:.9rem 0 .2rem}
.panel .togs{margin-top:.7rem}
.panel .gauge{margin-top:.9rem}
.panel .verdict{margin-top:.8rem;background:var(--white)}
.two{display:flex;gap:1rem;flex-wrap:wrap}
.two>div{flex:1 1 15rem;min-width:0}
.cap{font-size:16.6px;color:var(--gray-500);margin-bottom:.5rem;line-height:1.831}
svg{display:block;width:100%;height:auto}
.ctl{margin:1.1rem 0 .2rem}
.ctl label{display:flex;justify-content:space-between;align-items:baseline;font-size:14px;
 margin-bottom:.35rem;gap:1rem}
.ctl label span.n{font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
/* 🔴 2026-09-09 A：★ここにあった input[type=range]{width:100%;accent-color:#000;height:1.4rem} は
   ★★下の「スマホの操作性」の塊にまとめました（★当たり判定 22px → 44px）。
   ★min-width:0 は q15〜17 の <style> から移したものです（★A122_touch.py が外しました） */
input[type=range]{min-width:0}
/* ══════════════════════════════════════════════════════════════════════════
   🔴🔴🔴🔴 2026-09-09 A：★★★★スマホの操作性（★山田様の指示 2026-09-09）
   ★★★山田様の訴え（★全部 実測で裏が取れました）
     ⑴「最初のつまみが左端になっていて、押しにくい、なかなか反応しなくて、
        動かないんじゃないかと思っちゃう。そこで離脱するぞ」
     ⑵「これ動かせるって気づかない人もいる」
     ⑶「長押しでコピーとかそういう選択肢がでたり、紛らわしい」
     ⑷「連打してると画面拡大とかになって押しにくい」
   ★★★直す前の実測（390px・スマホ）
     つまみの当たり判定の高さ 22px（★Apple の推奨は44px）
       ★★さらに9ページは @media で【20px に縮めていた】（→ A122_touch.py が外した）
     つまみの初期位置 ── 初期値＝最小値なので【枠のいちばん左端】と同じ x
     touch-action auto ── ★ダブルタップ拡大が生きていて、連打と区別されない
     user-select 未指定 ── ★長押しで選択・コピーが出る
   ★★★D（長押しで連続実行）は【入れていません】── ★山田様「拡大とかならなかったら連打でいい」
   ══════════════════════════════════════════════════════════════════════════ */

/* ★A-3 つまみの当たり判定を 22px → 44px にする（★見た目のレールは細いまま）
   ★★-webkit-appearance:none にして、レールとつまみを自分で描く。
     ★★★理由：accent-color のままだと つまみの大きさを変えられず、
       ★iOS と Android で見え方も揃わない（★山田様にお伝えした懸念）
   ★B案1 レールを左右20px内側に寄せる ── ★つまみが最小値でも画面端から20px内側に来る。
     ★★★値の範囲（min/max/step）は【1つも変えていません】 */
input[type=range]{
  -webkit-appearance:none;appearance:none;
  display:block;width:calc(100% - 40px);margin:0 20px;
  height:44px;background:transparent;cursor:pointer;
  /* ★A-1 ダブルタップ拡大を止める（★ピンチ拡大は残す） */
  touch-action:manipulation;
  /* ★A-2 長押しの選択・コピーを止める（★操作する部品だけ。★本文には掛けません） */
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;
  -webkit-tap-highlight-color:transparent;
}
/* ★レール（★太さは見た目のまま 4px）
   🔴🔴 2026-09-09 A：★★★左側の【黒い塗り分け】を自分で描く（★自己申告）
     ★-webkit-appearance:none にしたら accent-color が効かなくなり、
       ★★1度目の版では【左が黒く塗られる表示が消えていました】── ★値の大きさが目で分からない退化。
     ★★撮った画像を自分で見て気づきました（→§5-47 ⑸⑴「描かれた中身を数える」の型）
     ★--p は common.js の paintRange() が値から計算して入れます（★0〜100%） */
input[type=range]::-webkit-slider-runnable-track{
  height:4px;border-radius:2px;
  background:linear-gradient(to right,
    var(--black) 0 var(--p,0%), var(--gray-200) var(--p,0%) 100%);
}
input[type=range]::-moz-range-track{
  height:4px;border-radius:2px;
  background:linear-gradient(to right,
    var(--black) 0 var(--p,0%), var(--gray-200) var(--p,0%) 100%);
}
/* ★つまみ（★28px 相当 → 36px。★上下の余白は当たり判定として残る） */
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:36px;height:36px;border-radius:50%;
  background:var(--black);border:2px solid var(--white);
  box-shadow:0 1px 3px rgba(0,0,0,.35);
  margin-top:-16px;                     /* ★(4 - 36)/2 = -16 でレールの中心に載せる */
}
input[type=range]::-moz-range-thumb{
  width:32px;height:32px;border-radius:50%;
  background:var(--black);border:2px solid var(--white);
  box-shadow:0 1px 3px rgba(0,0,0,.35);
}
input[type=range]:focus-visible::-webkit-slider-thumb{outline:2px solid #019949;outline-offset:2px}
input[type=range]:disabled{opacity:.35;cursor:default}

/* ★★C案1 「動かせる」と分かるようにする ── ★つまみの右に ◀ ▶ を出し、
     ★★★一度動かしたら消す（→ common.js の markRanges が .rgw / .moved を付けます） */
/* 🔴🔴🔴🔴 2026-09-09 A：★★★★印は【そのページの1本目のつまみだけ】に出す ── ★自己申告3回目
   ★1度目 right:2px・上下中央 → ★つまみが右寄りだと重なった（★q13 の t13 は初期値92%）
   ★2度目 top:1px → ★44px の枠に 36px のつまみが入っているので、縦の余地が4pxしかなく まだ重なる
   ★3度目 .rgw 全部に上の余白16px → ★★★これが【重大な劣化】を起こしました。
     ★★★★実測（検証セッション 2026-09-09 15:03。★390x844）──
       ★q09 はつまみが【10本】あり、1本あたり 22.4px → 60px（44＋印16）にしたので【+376px】。
       ★★会話を読む窓が【454px（15行）→ 78px（2.6行）】になりました。
       ★★★390x664（実機に近い高さ）では【窓が0以下】── ★実機で会話が読めません。
     → ★★★押しやすさを取って【読めなさ】を作ってしまった。★これが3度目の誤りです。
   ★4度目（これ）── ★★印は【1本目だけ】。★2本目以降は場所を取りません（padding 0）。
     ★★1本で「動かせる」と分かれば足りる。★山田様の「文字で目立たせる」も守れます。
     ★効果（実測の見込み）── q09 −144px ／ q10 −112px ／ 2本以上ある問すべてに効く
   ★★★.rgw--hint は common.js の markRanges が【ページの1本目にだけ】付けます */
.rgw{position:relative;display:block}
.rgw--hint{padding-top:16px}
.rgw--hint::after{
  content:'◀ 指で動かす ▶';position:absolute;right:20px;top:0;line-height:16px;
  font-size:12px;font-weight:700;color:#019949;letter-spacing:.04em;
  pointer-events:none;                  /* ★★印が指を邪魔しない */
  animation:rgpulse 1.6s ease-in-out infinite;
}
/* ★★動かしたら印だけ消す。★padding は残すので【高さが変わらず、レイアウトが動きません】 */
.rgw--hint.moved::after{content:none;animation:none}
@keyframes rgpulse{0%,100%{opacity:.45}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){.rgw::after{animation:none;opacity:.8}}

/* ★A-1・A-2 をボタンにも掛ける（★連打で拡大しない・長押しでメニューが出ない） */
button,.btn,label.tg,.togs label{
  touch-action:manipulation;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;
  -webkit-tap-highlight-color:transparent;
}
/* ★つまみのラベル（数値）も長押しで選択されないようにする（★数字は読むもので、写すものではない） */
.ctl label{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}

.togs{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1.1rem;align-items:center}
.btn{background:none;border:1px solid var(--gray-200);padding:.6rem 1.15rem;font-size:14px;
 font-family:var(--sans);color:var(--black);cursor:pointer;transition:all .15s}
.btn:hover{border-color:var(--black);background:var(--gray-100)}
.btn.on{background:var(--black);color:var(--white);border-color:var(--black)}
.btn.go{background:var(--black);color:var(--white);border-color:var(--black)}
.btn.sm{font-size:13px;padding:.45rem .85rem;color:var(--gray-500)}
.btn:disabled{opacity:.35;cursor:default}
.gauge{margin:1.2rem 0 0}
.gauge .row{display:flex;align-items:baseline;gap:.7rem;margin-bottom:.5rem}
.gauge .u{font-size:14px;color:var(--gray-500)}
.gtrack{height:10px;background:#e9e9e9;position:relative;overflow:hidden}
.gfill{display:block;height:100%;background:#c00;transition:width .12s linear}
.gfill.ok{background:var(--accent)}
.gmark{position:absolute;top:-3px;bottom:-3px;width:2px;background:#000}
.gcap{display:flex;justify-content:space-between;font-size:12px;color:var(--gray-500);
 margin-top:.35rem}
.read{font-size:15px;line-height:1.8;margin:.9rem 0 0;font-variant-numeric:tabular-nums}
.big{font-family:var(--serif);font-size:2rem;font-weight:400;font-variant-numeric:tabular-nums;
 line-height:1}
.calc{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13.5px;line-height:2;
 background:var(--white);border:1px solid var(--gray-200);padding:.9rem 1.1rem;margin:.9rem 0;
 overflow-x:auto;white-space:pre}
.verdict{margin-top:1.2rem;padding:.9rem 1.1rem;border:1px solid var(--gray-200);font-size:14px;
 line-height:1.75;background:var(--gray-100)}
.verdict.ok{border-color:var(--accent);background:#f2fbf6}
.verdict.stuck{border-color:#c00;background:#fdf4f4}
.next{margin-top:1rem;font-size:13px;color:var(--gray-500)}
.src{border-left:2px solid var(--black);padding:.9rem 0 .9rem 1.1rem;margin:1.4rem 0;
 font-size:14px;line-height:1.85;color:var(--gray-600)}
.src .h{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
 color:var(--black);margin-bottom:.4rem}
.src .ref{font-size:13px;color:var(--gray-500);margin-top:.4rem;display:block}
.box{border:1px solid var(--gray-200);padding:1.1rem 1.3rem;margin:1.3rem 0;background:var(--gray-100)}
.box .h{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
 margin-bottom:.5rem}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.sc-row{display:flex;align-items:center;gap:.75rem;margin-bottom:.6rem}
/* 🔴 2026-09-02 1問1ページ担当【申告・処置】★.sc-label は 3.4rem でしたが、
   ★★3.4rem は【5本のどこにも存在しない値】でした（★実測 00 3.2rem ／ 01・03 5.4rem）。
   → ★案A を採り、common.css は【00 の値 3.2rem】にしました。★01・03 は各ページで上書きします
   ★03（q15〜q17）は既に .sc-label{width:5.4rem} を各ページの <style> で上書き済み ＝ 実害0 */
.sc-label{width:3.2rem;font-size:14px;text-align:right;flex-shrink:0}
.sc-track{flex:1;background:#e9e9e9;height:9px;position:relative}
.sc-fill{display:block;height:100%;background:var(--black);transition:width .1s linear}
.sc-fill.hit{background:var(--accent)}
.sc-pct{width:3.4rem;font-size:14px;font-variant-numeric:tabular-nums}
details{border-top:1px solid var(--gray-200);padding-top:1rem;margin-top:1.5rem}
summary{font-size:14px;font-weight:500;cursor:pointer}
.lg{font-size:14px;line-height:1.9;color:var(--gray-600);margin-top:.9rem}
.dtab{width:100%;border-collapse:collapse;font-size:14px;margin:.9rem 0;
 font-variant-numeric:tabular-nums}
.dtab th,.dtab td{padding:.35rem .5rem;border:1px solid var(--gray-200);text-align:right}
.dtab th{background:var(--gray-100);font-weight:600;font-size:11.5px}
.dtab tr.sum td{background:#f2fbf6;border-top:2px solid var(--black)}
/* 🔴🔴 2026-09-09 A：★★章の表（drawChapTab）を問題ページに出すために足した
   ★★★これまで .dtab の左寄せ・中央寄せは【index.html の <style> にしか無く】、
     ★問題ページに表を出すと全部 右寄せになってしまう。★だから common.css に置く
   ★★index.html 側の同じ4行は【残してあります】── ★トップの見た目を1pxも変えないため
     （★同じ値なので後勝ちでも結果は同じ。★実測でトップは完全一致を確認済み）
   ★.chtab tr.me ＝ いま読んでいる章の行（★どこを読んでいるかが表でも分かる） */
.dtab td.l,.dtab th.l{text-align:left}
.dtab td.c,.dtab th.c{text-align:center}
.dtab td.l a{color:var(--black)}
.chtab tr.me td{background:#f2fbf6}
.chtab tr.me td.c,.chtab tr.me td.l{font-weight:700}
/* 🔴 2026-09-09 A：★★折りたたみ（#chapdet）と 博士・学の紹介（#cast2）のあいだに間をあける
   ★★★山田様「その折りたたみのすぐ下 全然隙間なく博士の紹介が始まるから少し間あけて」（2026-09-09）
   ★★.ch の margin は .6rem しかなく、★.cast2 側に上の余白が無いので詰まって見えていた
   ★全5章とも同じ（★#chapdet は q01・q06・q12・q15・q18 にだけあります） */
#chapdet{margin-bottom:1.5rem}
.hide{display:none}
.foot{border-top:1px solid var(--gray-200);margin-top:3rem;padding-top:1.5rem;font-size:13px;
 color:var(--gray-500);line-height:1.8}

/* ══════ 会話の見た目（★03 の 150〜177 行の写し。★5本で完全に同一）══════ */
/* 🔴 2026-09-04 A：★★ここに【開き記号と対応しない閉じ行】が1行 余っていました（★退避に記録あり）。
   ★★★実害が出ていました ── ★CSS の解析が「その行＋次の .cast2 の中身」までを
     ★1つの壊れた規則として捨てるため、★common.css の .cast2{…} が【生きていませんでした】
     （★実測：common.css 側の cast2 系は 7件しか無く、★.cast2 そのものが落ちていた）。
   ★見た目に出ていなかったのは、★各ページの <style> が同じ .cast2 を持っていて後勝ちだったから。
   ★★★q15〜17 で本文が消えた事故と【同じ編集事故の裏返し】です
     （★あちらは閉じ行が落ちた。★こちらは閉じ行が余った）→ A105 の検査⑾ */
.cast2{border:1px solid var(--gray-200);background:var(--gray-100);
  padding:1rem 1.1rem;margin:0 0 2.4rem}
.cast2 .row{display:flex;gap:.9rem;align-items:flex-start}
.cast2 .row+.row{margin-top:.9rem;padding-top:.9rem;border-top:1px solid var(--gray-200)}
.cast2 .ic{width:54px;height:54px;border-radius:50%;flex-shrink:0;display:block;
  border:2px solid var(--white);box-shadow:0 0 0 1px var(--gray-200),0 1px 3px rgba(0,0,0,.10)}
/* 🔴🔴 2026-09-07 A：★★登場人物の紹介を【記事に合わせた】
   ★★★山田様「ここらへんも文字小さいのよ。記事と同じサイズって言っただろ」
     「行間も記事に合わせろよ」（2026-09-07）
   ★直す前 ── 名前 15.5px ／ ふりがな 12px ／ 説明文 13.5px×1.85（★スマホは 13px×1.8）
   ★★名前は【本文より小さくしない】── .tx2 を 16.6px にすると 15.5px の名前が
     本文より小さくなる（→ index の .pt .t で踏んだのと同じ型）。★18px に上げた
   ★★各ページの <style> にも同じ4規則があるので、★common.css だけでは効かない
     （★A112_size.py が18ページ＋@media 21ページを機械で直した） */
.cast2 .nm2{display:block;font-size:18px;line-height:1.5;font-weight:700;margin-bottom:.2rem}
.cast2 .rb{font-size:14px;font-weight:400;color:var(--gray-500);margin-left:.45rem}
.cast2 .tx2{font-size:16.6px;line-height:1.831;color:var(--gray-600)}
.cast2 .tx2 b{color:var(--black)}
.cv{margin:1.6rem 0}
.cl{display:flex;gap:.75rem;align-items:flex-start;margin:0 0 .85rem}
.cl .av{width:46px;flex-shrink:0;text-align:center}
/* 🔴🔴 2026-09-06：★★★話者名は【この1つだけ】です（★drawCV が .av の中に1個 出す）。
   ★★下の .cl .nm は【同じ要素に当たる別の規則】で、詳細度 (0,3,0)>(0,2,0) なので
     ★こちらが勝ちます。★11.5px は効いていませんでした（★実測 10.5px）。
   ★★★2か所に名前が出ているわけではありません。★消すと話者名が【全部 消えます】
     （★アイコンの下に名前を置く形は §5-40 ⒞ で山田様が指定して確定したもの）
   → ★記事の下限に合わせて 10.5px → 14px にしました */
.cl .av .nm{display:block;font-size:14px;font-weight:700;letter-spacing:.03em;
  line-height:1.25;margin-top:.24rem}
.cl .ic{width:46px;height:46px;border-radius:50%;flex-shrink:0;display:block;
  border:2px solid var(--white);box-shadow:0 0 0 1px var(--gray-200),0 1px 3px rgba(0,0,0,.10)}
/* 🔴🔴 2026-09-06：★★color:var(--gray-600) を【削除】して本文の黒を継がせた（★山田様「灰色っぽくて薄い」）
   ★台詞は23ページで996件あり、その本文が全部 灰色で、太字だけが黒でした
   ★font-size 15px → 16.6px（★記事の本文と同じ）。★★行間 1.9 は動かしません（→ 冒頭の注記） */
.cl .bb{position:relative;min-width:0;padding:.65rem .95rem;font-size:16.6px;line-height:1.70;
  border:1px solid var(--gray-200);border-radius:.85rem;background:var(--white)}
.cl .bb b{color:var(--black)}
.cl .bb:before{content:'';position:absolute;left:-6px;top:15px;width:10px;height:10px;
  background:inherit;border-left:1px solid;border-bottom:1px solid;border-color:inherit;
  transform:rotate(45deg)}
/* 🔴 2026-09-02 A：★★吹き出しと話者名の色を【アイコンの背景色に合わせて入れ替えた】
   ★山田様「今フォントとか吹き出し、対話のところ、それが博士がオレンジで学が青じゃん。
     色は画像は元のに合わせたかったらフォントの色の方をあわせるようにかえてほしいな」（2026-09-02 17:5x）
   ★★アイコンは 博士＝水色の背景 ／ 学＝オレンジの背景。★文字側が逆だったので合わせた
   ✗✗ 戻さないこと ── 博士＝オレンジ／学＝青 は【逆】です */
.cl.m .bb{background:#fff7ea;border-color:#efd6a6}
.cl.d .bb{background:#eef4fa;border-color:#c3d9ee}
/* 🔴 2026-09-06：★font-size:11.5px を外しました ── ★上の .cl .av .nm と【同じ要素】に当たり、
   ★詳細度で負けていて【効いていなかった】ため（★死んだ値を残すと次の担当が誤読します）。
   ★★この規則は色（.cl.m / .cl.d）と margin-bottom のためだけに残します */
.cl .nm{display:block;font-weight:700;letter-spacing:.07em;margin-bottom:.15rem}
.cl.m .nm{color:#b0700c}   /* 🔴 学 → オレンジ（★アイコンの背景に合わせた）*/
.cl.d .nm{color:#2f6fb5}   /* 🔴 博士 → 青（★同じ）*/
.keyh{font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gray-500);margin:1.6rem 0 .5rem}
/* ══════ 「はじめる」の枠（★記事の CTA と同じ形）══════
   🔴🔴🔴 2026-09-08 A【新設】★★★山田様の指定（2026-09-08）
     ★「トップのここさ、記事の今1番上のほうにある Deep Black Box ／
       AIのブラックボックスを、1問ずつ開けて手で動かす。全21問。／ はじめる に変えて」
     ★★「背景色をさっきの記事の1番上の始めるのやつの背景色のスマホ版と同じ灰色にしてほしい。
       ★★全部しろだと目立たないから」
   ★★★出どころ ── roppongivc.com/static/css/agora-article.css の .a-cta（★実測で写した）
     地色 ★★#e9ecef（★★記事側が #f4f5f6 から濃くした案2。★ゲームも同じ値に揃えた）
       🔴🔴 ★★理由：★#f4f5f6 は【白との差が10しかない】（255段階）ため、
         ★スマホでは灰色に見えるのに ★★PC の大きな白い画面では白に溶ける。
         ★山田様「始めるの枠内の全体が背景色灰色じゃない」「記事のほうもスマホなら灰色だけど
           PCだと白に見える」── ★★同じ現象。★記事側が測って 案2 #e9ecef（白との差20）を推した
       ★★★記事側と【必ず同じ値にする】。★片方だけ変えると不揃いになる
     枠 2px solid #019949 ／ 角 6px
     余白 PC 2rem 2.25rem ／ スマホ 1.5rem 1.25rem
     エンブレム 64px（★スマホ 54px）／ 製品名 1.55rem 700 ／ タグライン 15.5px #555 行間1.75
     ボタン 15.5px 600・padding .85rem 2rem・角4px・地色は緑（★スマホは横いっぱい・中央）
   ★★index の ① と ⑤ の【2か所】で同じものを使う（★drawCta が描く） */
.cta{background:#e9ecef;border:2px solid #019949;border-radius:6px;
  padding:2rem 2.25rem;margin:0 0 2.4rem}
.cta .hd{display:flex;align-items:center;gap:1rem;margin-bottom:1.4rem}
.cta .em2{width:64px;height:64px;flex-shrink:0;display:block}
.cta .ti2{min-width:0}
/* 🔴 2026-09-08：★★製品名は【サンセリフ】── ★記事の .a-cta-name を本番で実測したら
     font-family が Inter, system-ui, sans-serif だった。★私は明朝にしていたので直した。
   ★★★「記事と同じ」を実測で確かめること。★見た目の思い込みで決めない */
.cta .nm3{font-family:var(--sans);font-size:1.55rem;font-weight:700;line-height:1.35;
  margin-bottom:.28rem;color:var(--black)}
.cta .sb2{font-size:15.5px;color:#555;line-height:1.75;margin:0}
.cta .btn{background:#019949;color:#fff;font-size:15.5px;font-weight:600;letter-spacing:.03em;
  padding:.85rem 2rem;border-radius:4px;display:inline-block;text-decoration:none}
.cta .btn:hover{opacity:.85}

.fg{border:1px solid var(--gray-200);border-radius:.6rem;background:var(--white);
  padding:.9rem 1rem;margin:0 0 .85rem}
.fg .ft{font-size:16.6px;line-height:1.831;font-weight:700;letter-spacing:.04em;color:var(--black);
  margin:0 0 .65rem}
.fg .fn{font-size:16.6px;line-height:1.831;color:var(--gray-600);margin:.65rem 0 0}
.fg .fn b{color:var(--black)}
.fg .fn+.fn{margin-top:.4rem}
.nst{border:2px solid var(--gray-200);border-radius:.5rem;padding:.55rem .6rem}
.nst .lb{font-size:16.6px;line-height:1.831;font-weight:700;color:var(--black);margin:0 0 .3rem}
.nst .sb{font-size:16.6px;color:var(--gray-600);margin:0 0 .5rem;line-height:1.831}
.nst.a{border-color:#c3d9ee;background:#f6fafd}
.nst.b{border-color:#bcdfc9;background:#f5fbf7}
.nst.c{border-color:#efd6a6;background:#fffaf0}
.fg table{width:100%;border-collapse:collapse;margin:.5rem 0 0;font-size:14px}
.fg th,.fg td{padding:.4rem .5rem;border:1px solid var(--gray-200);text-align:left}
.fg th{background:var(--gray-100);font-weight:600}
/* 🔴🔴 2026-09-07 A：★★呼び名／やること／章 の表だけを【本文と同じ大きさ】にした
   ★★★山田様「ここらへんも文字小さいのよ。記事と同じサイズって言っただろ」（2026-09-07）
   ★★なぜ別クラス（.ntab）にしたか ── ★.fg table は【会話の中の図の表】と共有されており、
     ★q12・q13・q14 の表は【4〜5列】あって 12.5px でようやく 314px に収まっている（実測）。
     ★共通の .fg table を上げると そちらが横にあふれる。→ 呼び名の表だけ切り出した
   ★詳細度 .fg table.ntab (0,2,1) ＞ 各ページの .fg table (0,1,1) なので、
     ★★q12〜q14 の <style> の 12.5px には【負けない】（★順番に関係なく効く） */
.fg table.ntab{font-size:16.6px;line-height:1.831}
.fg table.ntab th,.fg table.ntab td{padding:.5rem .6rem}
.fg svg.dg{display:block;width:100%;max-width:520px;height:auto;margin:.5rem auto .2rem}
/* 🔴 2026-09-09 A：★★画面の写真（記事の図9・図10 をゲームにも入れた）
   ★width/height を属性で書いてあるので、★読み込む前から場所を取る（★ガタつかない）
   ★loading="lazy" にしてある（★★測るときは先に全部スクロールする → §5-44 ⑻） */
.shot{display:block;width:100%;height:auto;border:1px solid var(--gray-200);border-radius:.3rem;
  margin:0 0 .5rem;background:var(--white)}
/* 🔴 2026-09-09 A：★★トップページの図のキャプションだけ 2px 下げた（★山田様の指定 2026-09-09）
   ★★★「記事側では14px→12pxに下げます。ゲームのトップページ側にも図のキャプションがあれば、
     同じように2px下げてください」
   ★★.cap は【触っていない】── ★.cap は23ページの図で使われており、
     ★§5-43 ⑹ で山田様の指示により 15px → 16.6px に【上げた】ものなので、
     ★★下げると そちらの指示を打ち消してしまう。→ ★トップの図だけ別クラスにした */
.fcap{font-size:14.6px;color:var(--gray-500);margin-bottom:.5rem;line-height:1.831}
.fcap b{color:var(--black)}
/* 🔴🔴 2026-09-09 A：★★章ごとの折りたたみ（▸ 詳しく）── ★トップページの「何が学べるか」
   ★★★山田様の指定（2026-09-09）。★文言は書かれたものを1文字も変えていない
   ★本文と同じ 16.6px / 行間1.831（→§5-44）。★見出しは太字にする（★折りたたみの題なので）
   ★項目の頭の【用語】だけ太字（★§5-46 ⑷ の法則は『上のほう』と『紹介文』の話。★ここは中身） */
.ch{border:1px solid var(--gray-200);border-radius:.4rem;margin:.6rem 0 0;background:var(--white)}
.ch+.ch{margin-top:.45rem}
.ch>summary{cursor:pointer;padding:.75rem .9rem;font-size:16.6px;line-height:1.831;
  font-weight:700;color:var(--black);list-style:none}
.ch>summary::-webkit-details-marker{display:none}
.ch>summary::before{content:'▸ ';color:var(--gray-500)}
.ch[open]>summary::before{content:'▾ '}
.ch>summary:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.ch ul{margin:0;padding:0 .9rem .9rem 2rem;list-style:disc}
.ch li{font-size:16.6px;line-height:1.831;color:var(--gray-600);margin:0 0 .55rem}
.ch li:last-child{margin-bottom:0}
.ch li b{color:var(--black)}

/* ══════════════════════════════════════════════════════════════════════════
   🔴 2026-09-02 1問1ページ担当【新設】進み具合の帯（全21問）／章の表示／戻る・次へ
     ★★#steps を【全21問の1本】にする。★mark(i,cls) は children[QBASE+i] を塗るので、
       ★21個の div を並べれば 03 のページでは 15〜17番目が塗られる（→ A の判断1）
     ★.steps div の見た目（枠・open・done）は既存のまま使う。★クラス名も変えない
     ★★21マスに語は入らない（1280px で1マス 40px・390px で 16px）ので【問番号だけ】にし、
       ★いまの問の題は下の .cnt と .chap が持つ（→ 山田様⑶「わからん言葉を出さない」）
   ══════════════════════════════════════════════════════════════════════════ */
.prog{margin-bottom:1.1rem}
.pv{display:flex;gap:.6rem;align-items:flex-start;margin-bottom:.55rem}
.pv .sg{min-width:0}
.pv .bar{display:flex;gap:2px;align-items:flex-end;height:12px}
.pv .bar a,.pv .bar span{flex:1 1 0;min-width:0;height:5px;border-radius:2.5px;
  background:var(--gray-200);display:block;transition:height .12s,background .12s}
.pv .bar a{cursor:pointer}
.pv .bar a:hover{background:var(--gray-500);height:9px}
.pv .bar .done{background:#1a1a1a}
.pv .bar a.done:hover{background:#555}
.pv .bar .open{background:#c0392b;height:12px;border-radius:2.5px}
.pv .lb{margin-top:.42rem;font-size:10.5px;line-height:1.3;color:var(--gray-500);white-space:normal;overflow-wrap:anywhere} /* 🔴 2026-09-02 A：★2行まで許す（★nowrap だと文字が切れた） */
.pv .lb b{font-weight:600;color:var(--gray-600)}
.pv .lb .tt{margin-left:.3rem}
.pv .sg.on .lb{color:var(--black)}
.pv .sg.on .lb b{color:var(--black);font-weight:700}
.prog .cnt{font-size:12.5px;color:var(--gray-500);
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.prog .cnt b{color:var(--black);font-weight:600;font-size:14px}
.chap{font-size:16.6px;line-height:1.831;color:var(--gray-600);
  padding-bottom:1.2rem;border-bottom:1px solid var(--gray-200);margin-bottom:1.7rem}
.chap b{color:var(--black)}
.nav{display:flex;justify-content:space-between;align-items:center;gap:1rem;
  margin:2.4rem 0 0;padding-top:1.5rem;border-top:1px solid var(--gray-200)}
.nav a{font-size:14px;color:var(--black);text-decoration:none;border:1px solid var(--gray-200);
  padding:.7rem 1.2rem;background:var(--white);transition:all .15s;display:inline-block}
.nav a:hover{border-color:var(--black);background:var(--gray-100)}
.nav a.go{background:var(--black);color:var(--white);border-color:var(--black)}
.nav .sp{color:var(--gray-500);font-size:13px}
/* 🔴 2026-09-02 1問1ページ担当2代目：★感想の導線（q05・q21・end の3か所）
   ★★URL がまだ無いので、いまは灰色の1行だけ出す（→ common.js の SITE） */
.formbox{margin:2.2rem 0 0;padding:1rem 1.1rem;border:1px solid var(--gray-200);
  background:var(--gray-100)}
.formbox .h{font-size:13px;font-weight:700;letter-spacing:.04em;color:var(--black);
  margin:0 0 .6rem}
.formbox .pend{font-size:14px;color:var(--gray-500)}
/* 🔴 2026-09-02 1問1ページ担当2代目：★★【受け皿】── その問の JS が触るのに
   このページには無い要素を置く枠。★★読者には1つも出しません（★空のタグだけ） */
.offpage{display:none}
@media (max-width:430px){
  .steps.s21 div{font-size:9.5px;padding:.3rem 0}
  .nav a{padding:.6rem .8rem;font-size:13.5px}
  .prog .cnt{font-size:11.5px}
  .fg{padding:.7rem .75rem}
  /* ★2026-09-08：★記事の CTA のスマホ版と同じ（★余白を詰め、ボタンを横いっぱいに） */
  .cta{padding:1.5rem 1.25rem}
  .cta .em2{width:54px;height:54px}
  .cta .btn{display:block;text-align:center}
  /* 🔴🔴 2026-09-07 A：★★カードの中の図は【カードの余白まで広げる】
     ★★★実測 ── index.html の入れ子図は .card の余白（32px×2）に食われて
       ★250px しか幅がなく、★同じ単位でも実効フォントが q01 の 348px より 28% 小さくなっていた
       （★index 9.32px → ★★スマホで「全然見えない」の主因のひとつ）
     → ★カードの左右の余白ぶんだけ外へ出す。★描画幅 250px → 318px（★27%増）
     ★★図だけが対象（.fg）。★本文は1pxも動かない */
  .card>.fg{margin-left:-2rem;margin-right:-2rem;border-radius:0;border-left:0;border-right:0}
  /* 🔴🔴🔴 2026-09-07 A：★★入れ子図の文字は【common.js の drawNest が幅で決めます】
     ★★★ここで CSS から font-size を上げては【いけません】──
       ★文字だけ大きくしても座標が付いてこないので、★★「いまここ」が内側の箱に食い込み、
       ★q06 では「ディープラーニング（深層学習）」と 9.00px 重なります（★実際に踏みました）。
     → ★★座標と文字の大きさは【同じ場所（drawNest）で決める】。
        ★変えたら A111_svgfit.js で必ず測り直すこと */
}

/* ══════════════════════════════════════════════════════════════════════════
   🔴🔴🔴🔴 2026-09-09 記録担当：★★★★上下2分割（案A・2代目）の見た目を
     splitA2.css から【そのまま移しました】（★124行）。
   ★★★なぜ移したか ── ★A105 の検査⑼ は、公開ディレクトリに出すものを
     【HTML・common.css・common.js・assets だけ】に限っています（★A105 の197〜205行）。
     ★作られた理由は本物です（★2026-09-02 に作業用スクリプトが公開に混ざりかけた）。
     ★★しかし splitA2.css は【製品の部品】なので、★出せる場所に入れるのが正しい形です。
     ⚠️★★★この1点で【丸一日 分割が0ページのまま止まりました】。★壁ではありませんでした。
   ★★★分割していないページには【1pxも効きません】── ★実測して確かめました：
     ★セレクタ36件のうち32件は .split-on / .splittop / .splittalk / .splitbar 配下で、
     ★残る4件（.figrow2 系）は【JS が作る class】です（★splitA2.js の62・65行）。
     ★★23ページに figrow2 は【0件】。★common.css にも split 系は【0件】でした。
   ★★出所と作者 ── ★見本は展開担当が作り、★山田様が触って承認された形です。
     ★1代目・2代目が踏んだ穴の理由は、下の各所にそのまま残してあります。★消さないこと。
   ══════════════════════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════════════════════
   splitA2.css ── 案A（2代目）上下2分割 ★試作
   ★★高さは JS が px で入れます（★ここには vh を書きません → The Pudding の指摘）
   ══════════════════════════════════════════════════════════════════════════ */

/* ★★★⑵ 押さないときは【完全に素】── ★元から入っている .stickbot を無効にする
   ★山田様「押さない場合はもう図固定とかなんもなしでスムーズに動かせるようにしたほうが割り切れる」 */
.splittop .stickbot{position:static !important;box-shadow:none !important;padding-top:0 !important}
/* 🔴 2026-09-09 展開担当：★★★元から入っている sticky を【全部】無効にする
   ★★q02 は .stickbot だけでしたが、★★★q09・q10 は【.panel 自体】を sticky にしていて
     ★id で指定されている（#q9wrap > .panel）ため、★!important でないと消えません。
   ★山田様「押さない場合はもう図固定とかなんもなしでスムーズに動かせるようにしたほうが割り切れる」 */
[data-split] .splittop .panel,
[data-split] .splittop .stick,
[data-split] .splittop .figbox,
[data-split] .splittop .stickbot{
  position:static !important;top:auto !important;bottom:auto !important;
  box-shadow:none !important;
}

/* ★開くボタン ── ★図の直前に置く */
.splitbtn{
  display:block;width:100%;margin:1rem 0 .6rem;padding:.85rem 1rem;
  font:700 15.5px/1.4 inherit;color:#fff;background:#019949;
  border:none;border-radius:6px;cursor:pointer;
  touch-action:manipulation;-webkit-user-select:none;user-select:none;
  -webkit-tap-highlight-color:transparent;
}
.splitbtn:hover{background:#017a3a}

/* ══════════════════════════════════════════════════════════════════════════
   🔴🔴🔴🔴 2026-09-10 記録担当（3代目）：★★★★分割ボタンは【スマホサイズだけ】に出します。
   ★★★山田様のご判断（2026-09-10 15:3x）──「PC では分割ボタンを出さないのが良い」に
     「はいそうしましょう」。
   ★★★★測って出した理由（★1280×900。★スクロール位置を60px刻みで総当たり）──
     ⑴ ★PC は【貼り付きだけで もう全部 同時に見えています】。
        ★問4 3/3 ／ 問9 4/4 ／ 問13 3/3。★★分割を開いても数字は1つも増えません。
     ⑵ ★★分割を開くと【図の文字が本文より大きくなります】──
        ★問9「なぜ折れるのか」の図は 14.87px（本文16.6px とほぼ同じ）から
          ★★26.19px（★本文の1.6倍）になります。→ §5-45 の方針に反します。
     ⑶ ★★分割を開くと【会話の窓が 900px → 270px に狭まります】。
        ★問9 の下の枠には 5,191字ありますが、★★それを270pxの窓で読むことになります。
        ★★★画面が広い PC で わざわざ狭くするのは損です。
     ⑷ ★おまけに、★スマホ向けに入れた図の上限が PC にも効いて
        ★★問9 のニューラルネットの図が 14.06px → 8.83px に潰れていました。
        ★★★分割が起きなくなるので、これも直ります。
   ★★境目を 700px にした理由 ── ★スマホの縦（〜430px）だけにすると
     ★iPhone の横向き（844×390 の 844側）や 折りたたみの広い状態で ボタンが消えます。
     ★★700px 未満なら それらは残り、★タブレットの縦（768px）以上では出ません。
   ⚠️★★ボタンを出さないだけで、★仕組み自体は残しています（★window.__split で測れます）。
     ★★★もし PC で「図とつまみが離れていて同時に見えない」ページが見つかったら、
       ★分割ではなく【貼り付きの範囲を広げる／並び順を直す】方が筋が通ります
       （★分割は「窓を狭くする」代償を払う手なので、広い画面では損が大きい）。
   ══════════════════════════════════════════════════════════════════════════ */
@media (min-width:701px){
  .splitbtn{display:none}
}

/* ★境目の帯 */
.splitbar{display:none}
.split-on .splitbar{
  display:flex;position:fixed;left:0;right:0;z-index:60;height:34px;
  align-items:center;justify-content:flex-end;padding:0 .7rem;
  background:#fff;border-top:1px solid #d5d8dc;border-bottom:1px solid #d5d8dc;
  box-shadow:0 2px 8px rgba(0,0,0,.12);cursor:ns-resize;
  touch-action:none;-webkit-user-select:none;user-select:none;
}
.splitbar .grip{position:absolute;left:0;right:0;margin:0 auto;
  display:block;width:56px;height:5px;border-radius:3px;background:#c3c8cd}
.splitbar .closebtn{font:600 13px/1 inherit;padding:.4rem .8rem;
  border:1px solid #c3c8cd;background:#f7f8f9;border-radius:5px;cursor:pointer;
  touch-action:manipulation}

/* ══ ここから下は【分割している間だけ】効きます ══ */
.split-on{overflow:hidden}

/* ★★上の枠（図2つ＋つまみ＋ボタン＋ずれ）を画面の上に固定 */
.split-on .splittop{
  position:fixed;top:0;left:0;right:0;z-index:50;
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  background:var(--gray-100);padding:.45rem .6rem 40px;
}
/* ★★下の枠（会話）を独立してスクロールさせる */
/* 🔴🔴 2026-09-09 A：★★下の枠の【上端が境目の帯に隠れていました】（★山田様の指摘）
   ★境目の帯は 34px あり、★下の枠の上に重なっていました。
   → ★上に 42px の余白を取って、★1行目がはっきり見えるようにします */
.split-on .splittalk{
  position:fixed;left:0;right:0;z-index:40;
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  background:var(--white);padding:42px .75rem 1.4rem;
}
/* ★後ろの中身は見せない（★重なって読めなくなるのを防ぐ）
   🔴🔴🔴🔴 2026-09-09 A：★★★★【真っ白になるバグを出しました】── ★自己申告
     ★山田様「緑のボタンおしたら完全に画面が真っ白になって何も見えなくなったぞ」
     ★★原因：★.splitwrap は【.card の中】にあるので、
       ★.wrap > *:not(.splitwrap) が【.card】に当たり、★★中身ごと隠れていました。
       ★1代目には visible に戻す指定がありましたが、★★2代目で【書き落としました】。
     ★★★そして getBoundingClientRect は【隠れていても値を返す】ので、
       ★私の測定（上の枠452px・図119px）では【気づけませんでした】。
       → ★★★教訓：★見た目は数字だけでは分からない。★visibility も測る／画像で見る */
.split-on .wrap > *:not(.splitwrap){visibility:hidden}
.split-on .splitwrap > *:not(.splittop):not(.splittalk):not(.splitbtn){visibility:hidden}
/* ★★★隠した中から【見せるものを戻す】── ★これが抜けていました */
.split-on .splitwrap,
.split-on .splittop, .split-on .splittop *,
.split-on .splittalk, .split-on .splittalk *,
.split-on .splitbar, .split-on .splitbar *{visibility:visible}

/* 🔴🔴🔴🔴 2026-09-10 記録担当：★★★★分割中も【前へ／次へ】を見せます（★山田様のご指摘）
   ★★山田様「この次へ行くとかのボタンが出ない。★閉じればいいだけなんだけど、
     ★★二分割のままでもこれ表示できるようにしたい。★★★全問共通な気がする」（2026-09-10）
   ★★★そのとおり全問共通でした ── ★#nav は全21ページで .wrap の直下にあり、
     ★上の .split-on .wrap > *:not(.splitwrap) に当たって【隠れていました】。
   ★★だから ここ1か所で【全ページ直ります】。★各ページには何も足しません。
   ★★★置き場所 ── ★分割中は【画面のいちばん下に貼り付けます】。
     ★理由：★#nav は下の枠より後ろにあるので、そのまま見せても
       ★★分割の枠の外＝画面の外に出てしまい、★★★見えません。
     ★★下に貼れば、★読んでいる途中でも いつでも次の問へ行けます。
   ⚠️★★上下の枠の高さは splitA2.js が window.innerHeight から px で計算しています。
     ★このナビは【重ねる】だけで高さの計算には入れません（★枠を縮めると計算が崩れます）。
     ★★だから帯の高さぶん、下の枠の最後の行に重なることがあります。
       → ★下の枠の下に余白（padding-bottom）を足して かぶらないようにしています */
.split-on #nav{
  visibility:visible;
  /* 🔴🔴🔴🔴 2026-09-10 記録担当【★自分の誤り】── ★はじめ z-index を 30 にしました。
     ★★しかし下の枠は【z-index 40】、帯は【60】、上の枠は【50】です。
       → ★★★ナビが【下の枠の裏に回って完全に隠れていました】。
     ★実測 ── ★ナビ top605・z30／下の枠 top452〜664・z40。
       ★画面の下端（620〜660px）を調べると、★★どの点も会話の吹き出し（DIV.bb）でした。
       ★★★「次へ」の中心も吹き出しに被られており【押せませんでした】。
     ⚠️★山田様に「治ってねえ」と3回 言われた本当の原因がこれです。
       ★私は「visibility が visible になった」ことだけを測って【見えていると判断】しました。
       ★★★引き継ぎ書の「大きさを測るだけでは見えているかは分からない」を、また踏みました。
       → ★★elementFromPoint で【その点に何があるか】を測るのが正しい確かめ方です。
     ★★★★70 にしたのは、帯（60）より手前に出すためです。★いちばん上に置きます */
  position:fixed; left:0; right:0; bottom:0; z-index:70;
  margin:0; padding:.5rem .75rem;
  background:var(--white); border-top:1px solid var(--gray-200);
  box-shadow:0 -6px 10px -8px rgba(0,0,0,.22);

  /* 🔴🔴🔴🔴 2026-09-10 記録担当：★★★★【最後まで読むまでは出しません】（★山田様のご指摘）
     ★★山田様「分割して最初からずっと画面の下に出ている。★まあこれでもいいけど、
       ★★スペースのためにも、1番下まで言ってから次に進むとか出たほうがいいんだけど」
     ★★★そのとおりです ── ★分割中の下の枠は【212px】しかなく、
       ★★ナビの59pxは【28%】を占めます。★読んでいる間は会話に使うべきです。
     ★★出す条件 ── ★下の枠を【いちばん下まで読んだとき】。★splitA2.js ではなく
       ★common.js の中の処理が .navon を付けます（★下の枠のスクロールを見ています）。
     ★下から すっと出てくる形にしました（★急に現れると驚くため） */
  transform:translateY(105%);
  transition:transform .22s ease;
  pointer-events:none;
}
/* ★★いちばん下まで読んだら出す */
.split-on.navon #nav{transform:translateY(0); pointer-events:auto}
.split-on #nav *{visibility:visible}
/* ★下の枠の最後の行が ナビに隠れないようにする（★実測で決めた値） */
.split-on .splittalk{padding-bottom:52px}

/* ★★★⑷ 図を2つ 横に並べる ── ★p2（関数のグラフ）と p2m（ずれの地図）
   ★山田様「その上にある関数のグラフも一歩ずつ押したら変化するやつで、それも同時に見たい」 */
/* 🔴🔴🔴 2026-09-09 A：★★★横並びは【やめました】── ★自己申告
   ★★実測：★横に2つ並べると 各 幅182px になり、★★viewBox 300x250 の比率で
     ★高さが【90px】に決まってしまいます。★maxHeight ではなく【幅】が効いていました。
   → ★★★上下に積んで【幅いっぱい】にします。★幅371pxなら高さは最大309pxまで取れます。
     ★2つ分の高さは JS が「上の枠の残り ÷ 2」で決めます */
.figrow2{margin:0 0 .3rem}
.figrow2 > svg{display:block;width:100%;height:auto;margin:0 auto}
.figrow2 > svg + svg{margin-top:4px}

/* ★★★⑶ 分割している間だけ 小さくする（★押さないときは今のまま）
   ★山田様「今 5.29 点＝ずれ／11歩、目標1.5↑ このあたりのつまみとか文字がデカくて」
   ★実測の見込み ── つまみ 87→62px ／ ボタン 42→36px ／ ずれ 75→48px（★合計 −58px） */
.split-on .splittop .cap{font-size:12px;line-height:1.45;margin:0 0 .2rem;text-align:left}
.split-on .splittop .ctl{margin:.35rem 0 .1rem}
.split-on .splittop .ctl label{font-size:12.5px;margin-bottom:.15rem}
.split-on .splittop .rgw--hint{padding-top:0}          /* ★「◀ 指で動かす ▶」の場所を詰める */
.split-on .splittop .rgw--hint::after{content:none}
.split-on .splittop input[type=range]{height:36px}     /* ★44→36px（★指はまだ届きます） */
.split-on .splittop input[type=range]::-webkit-slider-thumb{width:28px;height:28px;margin-top:-12px}
.split-on .splittop .togs{margin-top:.4rem;gap:.4rem}
.split-on .splittop .btn{padding:.42rem .8rem;font-size:13px}
.split-on .splittop .gauge{margin-top:.4rem}
.split-on .splittop .gauge .big{font-size:22px}
.split-on .splittop .gauge .u{font-size:11.5px}
.split-on .splittop .gauge .gcap{font-size:10.5px;margin-top:.05rem}
.split-on .splittop .verdict{font-size:12.5px;line-height:1.5;padding:.4rem .6rem;margin:.4rem 0 0}

/* 🔴🔴🔴 2026-09-09 A：★★★分割している間だけ 余白を全部 削る
   ★★★実測の内訳（上の枠412px に対して中身624px）──
     図の行160px ／ 空になった figbox 55px ／ panel 300px（説明34＋つまみ162＋判定52＋余白52）
   → ★★空の figbox と panel の枠・余白は【分割中は要りません】。★図に回します */
.split-on .splittop .figbox{border:none;background:none;padding:0;margin:0}
.split-on .splittop .figbox > .cap{display:none}      /* ★図の行に移したので説明だけ残る */
.split-on .splittop .panel{border:none;background:none;padding:0;margin:0;box-shadow:none}
.split-on .splittop .panel > .cap{display:none}       /* ★★図の説明は figrow2 の上に1つだけ出す */
/* ★★判定文は 下の枠の先頭へ（★DOM ごと JS が移します） */
.split-on .splittalk > .verdict{margin:0 0 .7rem;font-size:12.5px;line-height:1.55}
/* ★図の行に見出しを1つだけ出す（★文言は body の data-figcap から JS が入れる。
   ★★★以前は content: で q02 専用の文言を焼き込んでいたので、★他のページに使えなかった） */
.figrow2cap{
  display:block;font-size:11.5px;line-height:1.4;color:var(--gray-500);margin:0 0 .2rem;
}