/* ═══════════════════════════════════════════════════════════════
   とここと AI先生 — 共通スタイル
   しおマネ「AI活用の全体像」のトークン・部品をそのまま踏襲する。
   グラデーション・一辺だけの色枠は使わない（脱AIルック）
   ═══════════════════════════════════════════════════════════════ */

:root {
  --bg: #fff;
  --bg-soft: oklch(0.975 0.002 95);
  --bg-page: oklch(0.968 0.002 95);
  --text: oklch(0.26 0 0);
  --sub: oklch(0.51 0 0);
  --mute: oklch(0.68 0 0);
  --line: oklch(0.9 0 0);
  --line-soft: oklch(0.945 0 0);
  --line-strong: oklch(0.85 0 0);
  --radius: 10px;

  --c-toko: oklch(0.50 0.13 250);  /* 主色（とここと） */
  --c-case: oklch(0.52 0.13 152);
  --c-shio: oklch(0.55 0.11 80);
  --c-warn: oklch(0.55 0.16 22);
  --c-ok:   oklch(0.52 0.13 152);
  --c-note: oklch(0.52 0.15 305);

  /* 5層マップ。色は識別用のアイコン・見出し・選択状態に限定する */
  --map-input: #557fb6;
  --map-input-soft: #eef4fb;
  --map-tool: #b97b18;
  --map-tool-soft: #fbf4e7;
  --map-core: #8063a7;
  --map-core-soft: #f4f0f9;
  --map-output: #3f8965;
  --map-output-soft: #edf7f1;
  --map-outcome: #b05f4c;
  --map-outcome-soft: #fbf0ed;

  --mac: oklch(0.50 0.13 250);
  --win: oklch(0.52 0.13 152);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 92px; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Hiragino Sans", sans-serif;
  font-size: 13.5px; line-height: 1.85; color: var(--text); background: var(--bg-page);
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
}
a { color: inherit; }
img { max-width: 100%; height: auto; }
.ic { width: 14px; height: 14px; stroke: currentColor; stroke-width: 1.7; fill: none;
      stroke-linecap: round; stroke-linejoin: round; vertical-align: -2.5px; }

/* ───────── ヘッダ ───────── */
header {
  position: sticky; top: 0; z-index: 40; background: rgba(255,255,255,.94);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.hbar { display: flex; align-items: center; gap: 8px; padding: 7px 12px; max-width: 1000px; margin: 0 auto; }
.back { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
        width: 26px; height: 26px; border: 1px solid var(--line); border-radius: 7px;
        background: #fff; color: var(--sub); text-decoration: none; }
.back:hover { background: var(--bg-soft); color: var(--text); }
.brand { font-weight: 800; font-size: 13.5px; letter-spacing: .02em; white-space: nowrap;
         text-decoration: none; }
.brand small { font-weight: 600; color: var(--mute); font-size: 10px; margin-left: 8px; letter-spacing: .04em; }
.h-sp { flex: 1; }
.asof { font-size: 10.5px; color: var(--mute); white-space: nowrap; }
.jump { display: flex; gap: 3px; overflow-x: auto; padding: 0 12px 7px; max-width: 1000px; margin: 0 auto;
        scrollbar-width: none; }
.jump::-webkit-scrollbar { display: none; }
.jump a, .jump span { flex-shrink: 0; text-decoration: none; font-size: 11.5px; font-weight: 700; color: var(--sub);
          border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px; background: #fff; }
.jump a:hover { background: oklch(0.95 0.02 250); color: var(--c-toko); border-color: var(--c-toko); }
.jump a.cur, .jump span.cur { background: var(--c-toko); border-color: var(--c-toko); color: #fff; }
.jump .done { color: oklch(0.42 0.13 152); background: oklch(0.955 0.035 152);
              border-color: oklch(0.82 0.08 152); }

/* ───────── レイアウト ───────── */
main { max-width: 1000px; margin: 0 auto; padding: 30px 14px 120px; }
section { margin-bottom: 62px; scroll-margin-top: 96px; }
/* 節の頭は、番号の色玉＋太い見出し＋下の罫線で「ここから新しい話」を強く出す */
.sec-h { display: flex; align-items: center; gap: 11px; flex-wrap: wrap;
         margin-bottom: 14px; padding-bottom: 10px; border-bottom: 2px solid var(--text); }
.sec-n { font-size: 10.5px; font-weight: 800; letter-spacing: .1em; color: #fff;
         background: var(--c-toko); border-radius: 999px; padding: 3px 10px; line-height: 1.5; }
h2 { font-size: 19px; font-weight: 800; letter-spacing: .01em; line-height: 1.5; }
.sec-lead { color: var(--sub); font-size: 13px; margin-bottom: 22px; max-width: 780px; }
h3 { font-size: 14.5px; font-weight: 800; margin: 38px 0 12px; padding-left: 12px;
     border-left: 4px solid var(--c-toko); line-height: 1.5; }
h4 { font-size: 13px; font-weight: 800; }
p { margin-bottom: 10px; }
p:last-child { margin-bottom: 0; }
.card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px; }
.grid { display: grid; gap: 14px; }
.g2 { grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr)); }
.g3 { grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); }
.g4 { grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr)); }
ul, ol { padding-left: 1.3em; margin-bottom: 10px; }
li { margin: 5px 0; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px;
       background: oklch(0.965 0.014 250); border: 1px solid oklch(0.9 0.03 250); border-radius: 5px;
       padding: 1px 5px; color: oklch(0.42 0.11 250); word-break: break-all; }
b, strong { font-weight: 800; }
hr { border: 0; border-top: 1px solid var(--line); margin: 22px 0; }

/* ───────── ヒーロー ───────── */
.hero { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 30px 28px; }
.hero .kicker { font-size: 10.5px; font-weight: 800; letter-spacing: .14em; color: var(--mute); }
.hero h1 { font-size: 25px; line-height: 1.6; font-weight: 800; letter-spacing: .01em; margin: 10px 0 14px; }
.hero h1 em { font-style: normal; box-shadow: inset 0 -.44em 0 oklch(0.90 0.14 96); }
.hero p { color: var(--sub); font-size: 13.5px; max-width: 820px; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(118px, 100%), 1fr)); gap: 1px;
         background: var(--line); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; margin-top: 26px; }
.stat { background: #fff; padding: 15px 14px; }
.stat b { display: block; font-size: 25px; font-weight: 800; line-height: 1.1; letter-spacing: -.01em;
          font-family: "Helvetica Neue", Arial, sans-serif; }
.stat b { color: var(--c-toko); }
.stat b i { font-style: normal; font-size: 13px; font-weight: 700; margin-left: 2px; color: var(--sub); }
.stat span { display: block; font-size: 10.5px; color: var(--mute); font-weight: 600; margin-top: 2px; }

/* ステップページの見出し */
.steph { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 26px 26px 24px; }
.steph .kicker { display: inline-block; font-size: 10.5px; font-weight: 800; letter-spacing: .12em;
                 color: #fff; background: var(--c-toko); border-radius: 999px; padding: 4px 12px; }
.steph h1 { font-size: 23px; line-height: 1.55; font-weight: 800; margin: 12px 0 12px; }
.steph p { color: var(--sub); font-size: 13px; max-width: 800px; }
.meta { display: flex; gap: 1px; background: var(--line); border: 1px solid var(--line);
        border-radius: 10px; overflow: hidden; margin-top: 24px; flex-wrap: wrap; }
.meta > div { background: #fff; padding: 13px 15px; flex: 1 1 150px; }
.meta b { display: block; font-size: 14.5px; font-weight: 800; color: var(--c-toko); }
.meta span { display: block; font-size: 10px; color: var(--mute); font-weight: 700; letter-spacing: .06em; }

/* ───────── バッジ ───────── */
.bd { display: inline-flex; align-items: center; gap: 3px; font-size: 10.5px; font-weight: 800;
      border: 1px solid var(--line); border-radius: 999px; padding: 2px 9px; color: var(--sub);
      background: var(--bg-soft); white-space: nowrap; }
.bd.ok   { color: oklch(0.40 0.13 152); background: oklch(0.94 0.05 152); border-color: oklch(0.85 0.08 152); }
.bd.warn { color: oklch(0.44 0.17 22);  background: oklch(0.95 0.045 22); border-color: oklch(0.86 0.08 22); }
.bd.note { color: oklch(0.43 0.15 305); background: oklch(0.95 0.04 305); border-color: oklch(0.87 0.07 305); }
.bd.mac  { color: oklch(0.40 0.13 250); background: oklch(0.94 0.045 250); border-color: oklch(0.85 0.07 250); }
.bd.win  { color: oklch(0.40 0.13 152); background: oklch(0.94 0.05 152); border-color: oklch(0.85 0.08 152); }

/* ───────── 表 ───────── */
.tw { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: auto;
      margin: 16px 0; }
table { border-collapse: collapse; width: 100%; min-width: 560px; font-size: 12.5px; }
th, td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line-soft); vertical-align: top;
         line-height: 1.7; }
th { font-size: 11px; font-weight: 800; color: oklch(0.40 0.11 250); letter-spacing: .05em;
     background: oklch(0.955 0.018 250); border-bottom: 1px solid oklch(0.88 0.04 250); }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: oklch(0.978 0.01 250); }
td.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; color: var(--sub); }
td.nw { white-space: nowrap; }

/* ───────── 図解 ───────── */
.viz { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 20px 16px;
       margin: 16px 0; }
.viz-t { font-size: 10px; font-weight: 800; letter-spacing: .1em; color: var(--c-toko); margin-bottom: 8px; }
.fig-cap { font-size: 11.5px; color: var(--mute); margin-top: 14px; padding-top: 12px;
            border-top: 1px solid var(--line-soft); }
.dia { display: block; width: 100%; height: auto; margin: 4px 0 4px; }
.scrollx { overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 760px) {
  .scrollx > .dia { min-width: 620px; }
  .scrollx > .dia.narrow { min-width: 400px; }
}
/* 矢印は marker を使わず線＋三角を直に描く（複数SVGでのid衝突を避ける） */
svg .bx   { fill: #fff; stroke: var(--line); stroke-width: 1; }
svg .ln   { stroke: var(--mute); stroke-width: 1.2; fill: none; }
svg .hd   { fill: var(--mute); stroke: none; }
svg .ln-w { stroke: var(--c-warn); stroke-width: 1.4; fill: none; }
svg .hd-w { fill: var(--c-warn); stroke: none; }
svg .ln-d { stroke: var(--mute); stroke-width: 1.2; fill: none; stroke-dasharray: 4 3; }
svg .t    { font-size: 11px; fill: var(--text); font-weight: 700; }
svg .tb   { font-size: 10.5px; fill: var(--text); font-weight: 800; }
svg .ts   { font-size: 9.5px; fill: var(--sub); font-weight: 500; }
svg .tn   { font-size: 9px; fill: var(--mute); font-weight: 700; letter-spacing: .1em; }
svg .rule { stroke: var(--line); stroke-width: 1; }

/* ───────── コピーできるプロンプト ───────── */
.pr { background: #fff; border: 1px solid var(--text); border-radius: 12px; overflow: hidden;
      margin: 20px 0 26px; box-shadow: 0 2px 12px rgba(0,0,0,.06); }
.pr-h { display: flex; align-items: center; gap: 10px; padding: 12px 15px; background: var(--text);
        color: #fff; flex-wrap: wrap; }
.pr-k { font-size: 10px; font-weight: 800; letter-spacing: .12em; color: oklch(0.28 0 0);
        background: oklch(0.90 0.14 96); border-radius: 999px; padding: 3px 9px; }
.pr-t { font-size: 13.5px; font-weight: 800; color: #fff; }
.pr-sp { flex: 1; }
.pr-copy { appearance: none; font: inherit; font-size: 11.5px; font-weight: 800; cursor: pointer;
           border: 1px solid #fff; background: #fff; color: var(--text);
           border-radius: 8px; padding: 6px 15px; white-space: nowrap; }
.pr-copy:hover { background: oklch(0.92 0 0); }
.pr-copy.done { background: oklch(0.62 0.16 152); border-color: oklch(0.62 0.16 152); color: #fff; }
.pr pre { margin: 0; padding: 18px 18px; background: #252522; color: #ecece7;
          font: 12px/1.9 ui-monospace, SFMono-Regular, Menlo, monospace;
          white-space: pre-wrap; word-break: break-word; max-height: 480px; overflow: auto; }
.pr-note { padding: 13px 16px; font-size: 12px; color: var(--sub); border-top: 1px solid var(--line);
           background: oklch(0.985 0.008 96); line-height: 1.8; }
.pr-note b { color: var(--text); }

/* ターミナルに打つコマンド（プロンプトと見分ける） */
.cmd { background: #fff; border: 1px solid oklch(0.84 0.06 80); border-radius: 8px;
       margin: 16px 0 20px; overflow: hidden; }
.cmd-h { font-size: 10px; font-weight: 800; letter-spacing: .1em; color: oklch(0.42 0.10 80);
         background: oklch(0.965 0.03 85); padding: 8px 14px; border-bottom: 1px solid oklch(0.90 0.04 80); }
.cmd pre { margin: 0; padding: 14px; font: 12px/1.8 ui-monospace, SFMono-Regular, Menlo, monospace;
           white-space: pre-wrap; word-break: break-all; color: var(--text); }

/* ───────── 手順ステップ ───────── */
.steps { counter-reset: st; display: grid; gap: 0; margin: 18px 0; }
.st { display: grid; grid-template-columns: 28px 1fr; gap: 14px; align-items: start; }
.st > .n { counter-increment: st; width: 28px; height: 28px; border-radius: 50%;
           background: var(--c-toko); color: #fff; font-weight: 800; font-size: 12.5px;
           display: grid; place-items: center; font-family: "Helvetica Neue", Arial, sans-serif; }
.st > .n::before { content: counter(st); }
.st > .b { border-left: 2px solid oklch(0.88 0.04 250); margin-left: -27px; padding: 0 0 30px 41px; }
.st:last-child > .b { border-left-color: transparent; padding-bottom: 6px; }
.st .b > h4 { font-size: 14px; font-weight: 800; margin-bottom: 6px; }
.st .b > p { font-size: 13px; color: var(--sub); }
.st .b > p b { color: var(--text); }

/* ───────── OS切り替え ───────── */
.ostabs { display: inline-flex; gap: 4px; background: oklch(0.93 0 0); border: 1px solid var(--line-strong);
          border-radius: 999px; padding: 4px; margin: 6px 0 18px; }
.ostab { appearance: none; font: inherit; font-size: 12.5px; font-weight: 800; cursor: pointer;
         border: 0; background: none; color: var(--sub); border-radius: 999px; padding: 6px 20px; }
.ostab[aria-selected="true"] { background: var(--c-toko); color: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.16); }
[data-os]:not(.on) { display: none; }

/* ───────── 注意・ヒント ───────── */
.cal { display: grid; grid-template-columns: 30px 1fr; gap: 13px; align-items: start;
       border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; background: #fff;
       margin: 18px 0; font-size: 12.5px; line-height: 1.85; }
.cal .m { font-size: 17px; line-height: 1.35; text-align: center; }
.cal.warn { border-color: oklch(0.80 0.11 22);  background: oklch(0.965 0.035 22); }
.cal.ok   { border-color: oklch(0.78 0.10 152); background: oklch(0.965 0.035 152); }
.cal.tip  { border-color: oklch(0.80 0.08 250); background: oklch(0.965 0.028 250); }
.cal b { display: block; margin-bottom: 2px; }

/* 「やってはいけない」カード */
.no-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 12px;
           margin: 16px 0; }
.no { background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
      padding: 16px 18px 17px 48px; position: relative; }
.no .ban { position: absolute; left: 16px; top: 17px; width: 22px; height: 22px; padding: 3px;
           border-radius: 50%; color: oklch(0.45 0.17 22); background: oklch(0.93 0.055 22); }
.no.yes .ban { color: oklch(0.40 0.13 152); background: oklch(0.92 0.06 152); }
.no h4 { font-size: 13px; font-weight: 800; line-height: 1.6; }
.no p { font-size: 12.5px; color: var(--sub); margin-top: 6px; line-height: 1.8; }

/* ───────── 進捗つきステップ一覧（トップ） ───────── */
.route { display: grid; gap: 10px; margin: 18px 0; }
.rt { display: grid; grid-template-columns: 36px 1fr auto; gap: 16px; align-items: center;
      background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
      padding: 17px 20px; text-decoration: none; }
.rt:hover { background: oklch(0.978 0.012 250); border-color: var(--c-toko); }
.rt .no-n { width: 36px; height: 36px; border-radius: 9px; background: oklch(0.94 0.045 250);
            border: 1px solid oklch(0.86 0.07 250); display: grid; place-items: center;
            font-weight: 800; font-size: 13.5px; font-family: "Helvetica Neue", Arial, sans-serif;
            color: oklch(0.40 0.13 250); }
.rt .ti { font-size: 14.5px; font-weight: 800; }
.rt .de { font-size: 12.5px; color: var(--sub); }
.rt .rr { display: flex; align-items: center; gap: 10px; }
.rt .tm { font-size: 11px; color: var(--mute); font-weight: 700; white-space: nowrap; }
.rt.done { border-color: oklch(0.75 0.11 152); background: oklch(0.985 0.02 152); }
.rt.done .no-n { background: oklch(0.55 0.14 152); border-color: oklch(0.55 0.14 152); color: #fff; }
.rt.done .no-n::after { content: '✓'; }
.rt.done .no-n > i { display: none; }
.rt .no-n > i { font-style: normal; }

.chk { display: inline-flex; align-items: center; gap: 9px; font-size: 13px; cursor: pointer;
       border: 1px solid var(--line-strong); background: #fff; border-radius: 999px; padding: 10px 20px;
       font-weight: 800; color: var(--sub); appearance: none; font-family: inherit; }
.chk:hover { border-color: var(--c-toko); color: var(--c-toko); }
.chk[aria-pressed="true"] { background: oklch(0.55 0.14 152); border-color: oklch(0.55 0.14 152); color: #fff; }
.chk .bx2 { width: 15px; height: 15px; border: 1.5px solid currentColor; border-radius: 4px;
            display: grid; place-items: center; font-size: 10px; }
.chk[aria-pressed="true"] .bx2::after { content: '✓'; }

.progwrap { display: flex; align-items: center; gap: 12px; margin: 12px 0 0; font-size: 12px; color: var(--sub); font-weight: 700; }
.progbar { flex: 1; height: 12px; background: oklch(0.93 0 0); border: 1px solid var(--line);
           border-radius: 999px; overflow: hidden; }
.progbar > i { display: block; height: 100%; background: oklch(0.55 0.14 152); width: 0; transition: width .3s; }
.progwrap b { font-family: "Helvetica Neue", Arial, sans-serif; font-weight: 800; color: var(--text); font-size: 14px; }

/* ───────── 次へ ───────── */
.nextnav { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 12px;
           margin-top: 50px; }
.nx { display: block; background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
      padding: 18px 20px; text-decoration: none; }
.nx:hover { background: oklch(0.978 0.012 250); border-color: var(--c-toko); }
.nx .k { font-size: 10px; font-weight: 800; letter-spacing: .12em; color: var(--c-toko); }
.nx .t { font-size: 14.5px; font-weight: 800; margin-top: 4px; }
.nx.prev { text-align: left; }

/* ───────── 用語の吹き出し ─────────
   専門用語に点線を引き、押すと意味が出る。読みたい人だけが開く形にして本文を短く保つ */
.gl { appearance: none; font: inherit; color: inherit; background: none; padding: 0 1px;
      border: 0; border-bottom: 2px dashed oklch(0.66 0.13 221); cursor: pointer;
      text-underline-offset: 2px; border-radius: 3px 3px 0 0; }
.gl:hover { background: oklch(0.965 0.03 221); border-bottom-color: oklch(0.6 0.14 221); }
.gl[aria-expanded="true"] { background: oklch(0.94 0.06 221); border-bottom-style: solid; }
.gl-pop { position: fixed; z-index: 90; width: 330px; background: #fff; border: 1px solid var(--line-strong);
          border-radius: 11px; box-shadow: 0 12px 34px rgba(0,0,0,.16);
          padding: 12px 14px 13px; font-size: 12.5px; line-height: 1.7; }
.gl-pop[hidden] { display: none; }
.gl-pop h5 { font-size: 13.5px; font-weight: 800; margin-bottom: 2px; padding-right: 22px; }
.gl-pop .rd { font-size: 10.5px; color: var(--mute); font-weight: 600; margin-bottom: 6px; }
.gl-pop p { color: var(--text); margin: 0; }
.gl-pop .use { margin-top: 7px; padding-top: 7px; border-top: 1px dashed var(--line);
               font-size: 11.5px; color: var(--sub); }
.gl-pop .use b { color: var(--text); }
.gl-x { position: absolute; top: 7px; right: 8px; width: 22px; height: 22px; border: 0;
        background: none; color: var(--mute); cursor: pointer; font-size: 14px; line-height: 1; border-radius: 5px; }
.gl-x:hover { background: var(--bg-soft); color: var(--text); }
.gl-hint { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--sub);
           background: oklch(0.975 0.02 221); border: 1px solid oklch(0.88 0.05 221);
           border-radius: 999px; padding: 5px 14px; margin: 0 0 14px; width: fit-content; max-width: 100%; }
.gl-hint b { color: var(--text); }
.gl-hint button { border: 0; background: none; color: var(--mute); cursor: pointer; font-size: 13px; padding: 0 2px; }

/* 用語集ページ */
.fsearch { width: 100%; font: inherit; font-size: 12.5px; border: 1px solid var(--line);
           background: #fff; border-radius: 999px; padding: 7px 15px; color: var(--text); }
.fsearch:focus { outline: 2px solid oklch(0.85 0.06 221); outline-offset: -1px; }
.fcount { font-size: 11px; color: var(--mute); font-weight: 700; }

/* ───────── 読む位置の目印 ───────── */
#prog { position: fixed; top: 0; left: 0; height: 2.5px; background: var(--c-toko);
        z-index: 60; width: 0; transition: width .1s linear; }
#totop { position: fixed; right: 16px; bottom: 16px; z-index: 50; width: 38px; height: 38px;
         border-radius: 50%; border: 1px solid var(--line-strong); background: #fff;
         color: var(--sub); box-shadow: 0 2px 8px rgba(0,0,0,.05); cursor: pointer;
         display: none; align-items: center; justify-content: center; font-size: 15px; }
#totop.on { display: flex; }
#totop:hover { color: var(--text); background: var(--bg-soft); }

@media (max-width: 640px) {
  .hbar { flex-wrap: wrap; }
  main { padding: 20px 12px 90px; }
  section { margin-bottom: 44px; }
  .hero, .steph { padding: 22px 18px; }
  .hero h1 { font-size: 20px; }
  .steph h1 { font-size: 19px; }
  .stat b { font-size: 21px; }
  .card { padding: 16px 17px; }
  .pr pre { padding: 14px 13px; font-size: 11.5px; }
  h3 { margin: 30px 0 10px; }
  .st { grid-template-columns: 22px 1fr; gap: 10px; }
  .st > .n { width: 22px; height: 22px; font-size: 11px; }
  .st > .b { margin-left: -22px; padding-left: 32px; }
}
@media print { header { position: static; } .pr pre { max-height: none; } #totop, .gl-hint { display: none !important; } }

/* ═══════════════════════════════════════════════════════════════
   ミニ校長（みさわ小キャラクター）
   正本は **キャラ素材室**（misawa-squad / character-assets.html）。
   ファイル名は素材室の通し番号そのまま（a-03 / c-51 …）。差し替え依頼が来たら番号で引ける。
   **「要修正」の旗が付いている素材は使わない。** 旗は本体KV `charimg:flags` にあり、素材室の
   「要修正」タブで一覧できる。増やすときは必ず最新の旗を確認してから選ぶ。
   モノクロ2色なので、色を足さずに置くだけで馴染む。
   装飾なので、読む順番の邪魔をしない位置にだけ置く。
   ═══════════════════════════════════════════════════════════════ */
.hero, .steph { position: relative; overflow: hidden; }
.hero > *, .steph > * { position: relative; z-index: 1; }

/* 見出しの右に立つ大きめの1体。
   本文の下に潜り込ませると足だけが見える妙な絵になるので、
   広い画面でだけ、右上に場所を空けて立たせる。 */
.mascot { display: none; }
@media (min-width: 900px) {
  .hero, .steph { padding-right: 148px; }
  .mascot { display: block; position: absolute; right: 22px; top: 18px; width: 102px;
            z-index: 1; pointer-events: none; }
  .mascot img { display: block; width: 100%; height: auto; }
}

/* 文中・カードの中に置く小さい1体 */
.mini { display: inline-block; width: 46px; vertical-align: bottom; flex-shrink: 0; }
.mini img { display: block; width: 100%; height: auto; }
.mini.s { width: 34px; }
.mini.l { width: 66px; }

/* 顔だけ（吹き出し・注意書きの目印）。素材によって縦横比が違うので高さは auto にする */
.face { display: block; width: 30px; flex-shrink: 0; }
.face img { display: block; width: 100%; height: auto; }

/* 完了カードなど、横に並べたいとき */
.withchar { display: flex; align-items: flex-end; gap: 14px; }
.withchar > .bd-body { flex: 1; min-width: 0; }

/* 進み具合のとなりで、進むほどポーズが変わる */
.progchar { width: 40px; flex-shrink: 0; }
.progchar img { display: block; width: 100%; height: auto; }

/* ひとこと吹き出し（キャラのセリフ） */
.say { display: grid; grid-template-columns: 66px 1fr; gap: 16px; align-items: center;
       background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
       padding: 18px 20px; margin: 20px 0; }
.say .bub { position: relative; background: oklch(0.965 0.028 96); border: 1px solid oklch(0.87 0.07 96);
            border-radius: 12px; padding: 14px 17px; font-size: 13px; color: var(--text); line-height: 1.85; }
.say .bub::before { content: ''; position: absolute; left: -8px; top: 18px; width: 13px; height: 13px;
                    background: oklch(0.965 0.028 96); border-left: 1px solid oklch(0.87 0.07 96);
                    border-bottom: 1px solid oklch(0.87 0.07 96); transform: rotate(45deg); }
.say .bub b { font-weight: 800; }
.say img { display: block; width: 100%; height: auto; }
@media (max-width: 520px) { .say { grid-template-columns: 48px 1fr; gap: 11px; padding: 14px 15px; } }