/* ゲーム業界 +9 メモ：共通スタイル（index.html と dev.html で共用）。色の体系・約束は CLAUDE.md */
:root{
  --bg:#e9ebef; --card:#f7f8fa; --ink:#15171c; --sub:#5f656e; --line:#d5d9e0;
  --tonal:#eceef2; --node:#ffffff; --accent:#4f7d12; --accent-soft:#edf5dd;
  --warm:#f1ecdf; --warm-ink:#6a5422; --coin:#9a7413;
  --c-teal:#0e7f8c; --c-blue:#1160c9; --c-violet:#5a6a80; --c-gold:#8f6f10; --c-green:#1a7a56; --c-coral:#c2562a; --c-slate:#5b6472;
  --imp3:#c65312; --imp2:#1160c9; --on-color:#fff; --warn:#a97f00;
  --shadow:0 1px 2px rgba(16,20,28,.05),0 8px 28px rgba(16,20,28,.06);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0a0b0d; --card:#14161a; --ink:#e7e9ee; --sub:#8d949f; --line:#282c33;
    --tonal:#1d2127; --node:#181b20; --accent:#d8efb4; --accent-soft:#242e1a;
    --warm:#26211a; --warm-ink:#dcbc80; --coin:#e0c15f;
    --c-teal:#35b7c9; --c-blue:#5ea8ff; --c-violet:#a9b6c9; --c-gold:#e0c15f; --c-green:#8fd4a8; --c-coral:#ff8a4d; --c-slate:#7f8794;
    --imp3:#ff8a4d; --imp2:#5ea8ff; --on-color:#0a0b0d; --warn:#e8c25c;
    --shadow:0 1px 0 rgba(255,255,255,.03),0 18px 50px rgba(0,0,0,.5);
  }
}
:root[data-theme="dark"]{
    --bg:#0a0b0d; --card:#14161a; --ink:#e7e9ee; --sub:#8d949f; --line:#282c33;
    --tonal:#1d2127; --node:#181b20; --accent:#d8efb4; --accent-soft:#242e1a;
    --warm:#26211a; --warm-ink:#dcbc80; --coin:#e0c15f;
    --c-teal:#35b7c9; --c-blue:#5ea8ff; --c-violet:#a9b6c9; --c-gold:#e0c15f; --c-green:#8fd4a8; --c-coral:#ff8a4d; --c-slate:#7f8794;
    --imp3:#ff8a4d; --imp2:#5ea8ff; --on-color:#0a0b0d; --warn:#e8c25c;
    --shadow:0 1px 0 rgba(255,255,255,.03),0 18px 50px rgba(0,0,0,.5);
}
*{box-sizing:border-box}
:root{--mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace}
/* 色の使い方：章は全部同じ1色（--accent）。色で意味を持たせるのは図の区分だけ（--c-* の寒色の段階＋暖色2つ） */
:root{--ac:var(--accent)}
section.ch,.chapters li{--ac:var(--accent);--ac-soft:color-mix(in srgb,var(--ac) 13%,var(--card))}
#terms,#src{--ac:var(--sub)}
#terms{display:none}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scrollbar-gutter:stable}
body{margin:0;background:var(--bg);color:var(--ink);
  font-family:"Inter","Noto Sans JP",-apple-system,BlinkMacSystemFont,"Helvetica Neue",
    "Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic UI",Meiryo,sans-serif;
  font-size:16px;line-height:1.75;padding:16px;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.wrap{max-width:960px;margin:12px auto 4px}
p{margin:0;text-wrap:pretty}
a{color:inherit}
.nw{white-space:nowrap}

/* アイコン（線画・1.6px）。色は置かれた場所の文字色に従う */
.ic{width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ico{display:flex;flex:none;width:38px;height:38px;border-radius:11px;background:var(--ac-soft);color:var(--ac);align-items:center;justify-content:center}

/* 見出しまわり */
header.top{padding:76px 8px 0}
.eyebrow{display:flex;align-items:center;gap:8px;font-size:18px;letter-spacing:.08em;color:var(--sub);font-weight:600}
.eyebrow .ic{width:19px;height:19px;color:var(--ac)}
h1{font-size:clamp(28px,3.6vw,40px);line-height:1.18;letter-spacing:-.02em;font-weight:600;margin:12px 0 0}
.lead{margin-top:16px;font-size:15px;line-height:1.8;color:var(--sub);max-width:44em;text-wrap:pretty}
.meta{margin-top:12px;font-size:13px;color:var(--sub)}

/* 入口：7章を小さな札で横一列（場所を取らない） */
.chapters{list-style:none;margin:34px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.chapters a{display:flex;align-items:center;gap:8px;background:var(--card);border-radius:12px;padding:6px 12px 6px 7px;text-decoration:none;box-shadow:var(--shadow);transition:transform .15s}
.chapters a:hover{transform:translateY(-2px)}
.chapters .ico{width:26px;height:26px;border-radius:8px}
.chapters .ico .ic{width:14px;height:14px}
.chapters .tt{display:flex;align-items:baseline;gap:6px}
.chapters .n{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--sub);font-weight:600;font-variant-numeric:tabular-nums}
.chapters b{font-size:14px;font-weight:600;line-height:1.3}

/* 目次（入口カードが画面から消えたら上に出る） */
nav.toc{position:fixed;left:0;right:0;top:0;z-index:5;padding:10px 16px;transform:translateY(-100%);transition:transform .2s;
  background:color-mix(in srgb,var(--bg) 82%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
nav.toc.show{transform:none}
nav.toc ul{position:relative;display:flex;gap:8px;max-width:960px;margin:0 auto;padding:0;list-style:none;overflow-x:auto;scrollbar-width:none}
.toc-pages{display:flex;align-items:center;gap:6px;max-width:960px;margin:0 auto 8px;padding-bottom:8px;
  border-bottom:1px solid color-mix(in srgb,var(--line) 70%,transparent);overflow-x:auto;scrollbar-width:none}
.toc-pages::-webkit-scrollbar{display:none}
.toc-pages a{display:flex;align-items:center;flex:none;padding:5px 13px;border-radius:980px;border:1px solid var(--line);
  color:var(--sub);text-decoration:none;font-size:13px;line-height:1.45;white-space:nowrap;
  transition:color .2s,border-color .2s,background-color .2s}
.toc-pages a:hover{color:var(--ink);border-color:var(--sub)}
.toc-pages a[aria-current="page"]{background:var(--tonal);color:var(--ink);font-weight:500;border-color:transparent}
.toc-pages .home{padding:4px 11px;color:var(--ink);border-color:transparent}
.toc-pages .home:hover{border-color:var(--line)}
.toc-pages .home svg{display:block;width:auto;height:18px;fill:currentColor}
nav.toc ul::-webkit-scrollbar{display:none}
nav.toc a{display:block;padding:6px 14px;border-radius:980px;background:var(--card);text-decoration:none;font-size:13px;font-weight:500;white-space:nowrap}
nav.toc a .n{font-family:var(--mono);color:var(--sub);font-variant-numeric:tabular-nums;margin-right:.5em}

/* 章カード */
section.ch{background:var(--card);border:1px solid color-mix(in srgb,var(--line) 55%,transparent);border-radius:24px;box-shadow:var(--shadow);padding:46px 40px 40px;margin-top:24px;scroll-margin-top:112px}
.ch-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ch-head .ico{width:34px;height:34px;border-radius:10px;margin-right:2px}
.ch-head .ic{width:20px;height:20px}
.ch-no{font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--sub);font-weight:600;font-variant-numeric:tabular-nums}
h2{font-size:29px;line-height:1.3;font-weight:600;margin:14px 0 0;letter-spacing:-.015em}
.sub{margin-top:12px;color:var(--sub);font-size:15px;line-height:1.7}
.fig{margin-top:24px}
.fig-title{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;margin:26px 0 12px;font-size:13px;font-weight:600}
.fig-title small{font-weight:400;color:var(--sub);font-size:12px}
.fig-note{margin-top:10px;font-size:12px;color:var(--sub);line-height:1.7}

/* ノードと矢印（PC＝横並び／スマホ＝縦積み） */
.flow{display:flex;align-items:stretch}
.node{flex:1 1 0;min-width:0;background:var(--node);border:1px solid var(--line);border-radius:16px;padding:14px 16px}
.node h3{margin:10px 0 0;font-size:16px;font-weight:600;color:var(--ac)}
.node p{margin-top:4px;font-size:13px;line-height:1.6}
.node .to{margin-top:8px;font-size:11px;color:var(--sub)}
.arr{position:relative;flex:none;width:64px;display:flex;align-items:center;justify-content:center;font-size:11px;color:var(--sub);text-align:center;line-height:1.35}
.arr::before{content:"";position:absolute;left:6px;right:11px;top:50%;height:1.5px;background:var(--ac)}
.arr::after{content:"";position:absolute;right:5px;top:50%;transform:translateY(-50%);
  border-left:7px solid var(--ac);border-top:4px solid transparent;border-bottom:4px solid transparent}
.arr span{position:relative;top:-13px}
/* 01章：上流→下流の流れ図（ゲームは上から下へ、お金は下から上へ）。箱は button＝押すと説明が出る */
.chain{display:grid;grid-template-columns:30px minmax(0,1fr);gap:0 14px}
.rail{position:relative;display:flex;align-items:center;justify-content:center}
.rail::before{content:"";position:absolute;left:50%;top:10px;bottom:6px;width:2px;margin-left:-1px;background:var(--warm-ink);opacity:.5}
.rail::after{content:"";position:absolute;left:50%;top:2px;transform:translateX(-50%);border-bottom:9px solid var(--warm-ink);border-left:5px solid transparent;border-right:5px solid transparent}
.rail span{position:relative;z-index:1;writing-mode:vertical-rl;background:var(--card);padding:10px 0;font-size:11px;font-weight:600;letter-spacing:.14em;color:var(--warm-ink)}
.rail span .ic{width:18px;height:18px;margin-bottom:6px;stroke-width:1.8;color:var(--coin)}
.stage,.down{display:grid;grid-template-columns:72px minmax(0,1.15fr) 36px minmax(0,1fr);align-items:center}
.stage-k{font-size:13px;font-weight:600;line-height:1.4}
.stage .link{height:1.5px;background:var(--line)}
.helpers{display:grid;gap:8px}
.down{min-height:44px}
.arr-v{grid-column:2;position:relative;align-self:stretch;display:flex;align-items:center;padding:12px 0 14px calc(50% + 14px);font-size:11px;line-height:1.5;color:var(--sub)}
.arr-v small{display:block;font-size:10px}
.arr-v::before{content:"";position:absolute;left:50%;top:5px;bottom:10px;width:1.5px;background:var(--ac)}
.arr-v::after{content:"";position:absolute;left:50%;bottom:3px;transform:translateX(-3.25px);border-top:7px solid var(--ac);border-left:4px solid transparent;border-right:4px solid transparent}
button.node{font:inherit;color:inherit;text-align:left;width:100%;cursor:pointer;position:relative;display:grid;grid-template-columns:38px minmax(0,1fr);column-gap:14px;align-items:center;padding:13px 36px 13px 16px;
  transition:opacity .2s,border-color .2s,background .2s}
button.node:hover{border-color:var(--ac)}
button.node:focus-visible{outline:2px solid var(--ac);outline-offset:2px}
button.node .tx{display:block;min-width:0}
button.node .nt{display:block;font-size:16px;font-weight:600;line-height:1.4;color:var(--ac)}
button.node .nt small{font-size:12px;font-weight:500;color:var(--sub);margin-left:1px}
button.node .nd{display:block;margin-top:1px;font-size:13px;line-height:1.55}
button.node .rel{display:block;margin-top:3px;font-size:11px;color:var(--sub)}
button.node .more{position:absolute;top:50%;right:12px;transform:translateY(-50%);width:18px;height:18px;border-radius:50%;border:1px solid var(--sub);color:var(--sub);font-size:12px;line-height:1;display:flex;align-items:center;justify-content:center}
/* 主役の箱は段の高さいっぱいに伸ばす＝縦の矢印が箱から箱へつながって見える */
.stage>button.node{align-self:stretch}
button.node.sub{grid-template-columns:32px minmax(0,1fr);column-gap:12px;padding:10px 34px 10px 12px;background:var(--tonal);border-color:transparent}
button.node.sub:hover{border-color:var(--ac)}
button.node.sub .ico{width:32px;height:32px;border-radius:9px;background:var(--card);color:var(--ink)}
button.node.sub .ic{width:18px;height:18px}
button.node.sub .nt{font-size:14px;color:var(--ink)}
button.node.sub .nd{font-size:12px}

/* 工程 */
.steps .node{padding:12px 13px}
.steps .node h3{font-size:15px;margin-top:8px}
.steps .node h3 .n{display:block;font-size:11px;letter-spacing:.1em;color:var(--sub);font-variant-numeric:tabular-nums}
.steps .arr{width:28px}
.steps .arr::before{left:4px;right:9px}
.steps .node .q{font-weight:500}
.steps .node .out{color:var(--sub)}
/* 05 から 01 へ戻る矢印（下をくぐる） */
.loop{position:relative;height:30px;margin:4px 9% 14px;border:1.5px solid var(--ac);border-top:0;border-radius:0 0 16px 16px}
.loop::before{content:"";position:absolute;left:-4.75px;top:-4px;border-bottom:7px solid var(--ac);border-left:4px solid transparent;border-right:4px solid transparent}
.loop span{position:absolute;left:50%;bottom:-10px;transform:translateX(-50%);background:var(--card);padding:0 12px;font-size:12px;color:var(--sub);white-space:nowrap}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:22px}
.box{display:flex;gap:14px;background:var(--tonal);border-radius:16px;padding:16px 18px}
.box .ico{background:var(--card);color:var(--ink)}
.box h3{margin:0;font-size:15px;font-weight:600}
.box p{margin-top:4px;font-size:13px;line-height:1.7}

/* 要点（各章の一言。ここだけ拾い読みしても通じるように） */
.point{display:flex;gap:14px;align-items:baseline;margin-top:26px;background:var(--ac-soft);border-radius:16px;padding:16px 20px;font-size:15px;font-weight:500}
.point::before{content:"POINT";flex:none;font-size:10px;letter-spacing:.14em;font-weight:700;color:var(--ac)}

/* お金の2つの道 */
/* お金が入る2つの道：見出しを大きく、中の手順は小さく（何の話かが先に目に入るように） */
.ways{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.way{background:var(--node);border:1px solid var(--line);border-radius:20px;padding:18px 20px 16px}
.way-h b{display:block;font-size:18px;font-weight:600;line-height:1.4}
.way-h small{display:block;margin-top:2px;font-size:12px;color:var(--sub)}
.mini{list-style:none;margin:14px 0 0;padding:0}
.mini li{position:relative;display:grid;grid-template-columns:28px minmax(0,1fr);column-gap:10px;align-items:start;font-size:13px;font-weight:500;line-height:1.5}
.mini li+li{margin-top:18px}
.mini li+li::before{content:"";position:absolute;left:13.25px;top:-17px;height:10px;border-left:1.5px solid var(--ac)}
.mini li+li::after{content:"";position:absolute;left:10.5px;top:-7px;border-top:6px solid var(--ac);border-left:3.5px solid transparent;border-right:3.5px solid transparent}
.mini li>span:last-child{padding-top:3px}
.mini small{display:block;font-weight:400;font-size:12px;color:var(--sub);line-height:1.5}
.mini .ico{width:28px;height:28px;border-radius:8px}
.mini .ic{width:16px;height:16px}
.way-p{margin-top:14px;padding-top:12px;border-top:1px solid var(--line);font-size:13px;font-weight:600;line-height:1.6}
/* 章の中の小見出し（この下の図は①の話、と先に言う） */
.grp-h{margin-top:30px;padding-top:22px;border-top:1px solid var(--line);font-size:16px;font-weight:600;line-height:1.5}
.grp-p{margin-top:6px;font-size:13px;color:var(--sub);line-height:1.7}

/* 資金のカーブ（模式図）。線は SVG、文字は HTML を重ねる＝縮んでも文字が小さくならない */
.jc{position:relative;height:230px;border:1px solid var(--line);border-radius:16px;background:var(--node);overflow:hidden}
.jc svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.jc .zero{stroke:var(--sub);stroke-width:1;stroke-dasharray:3 4;vector-effect:non-scaling-stroke}
.jc .launch{stroke:var(--ink);stroke-width:1;stroke-dasharray:2 4;vector-effect:non-scaling-stroke}
.jc .neg{fill:var(--warm)}
.jc .pos{fill:var(--ac-soft)}
.jc .curve{fill:none;stroke:var(--ac);stroke-width:2.5;stroke-linecap:round;vector-effect:non-scaling-stroke}
.jc .lb{position:absolute;font-size:12px;line-height:1.35;white-space:nowrap;color:var(--ink)}
.jc .lb.c{transform:translate(-50%,-50%)}
.jc .lb.s{color:var(--sub);font-size:11px}
.jc .lb b{font-weight:600}
.jc .dot{position:absolute;width:9px;height:9px;border-radius:50%;background:var(--card);border:2.5px solid var(--ac);transform:translate(-50%,-50%)}
.jc .chip{background:var(--ink);color:var(--card);border-radius:980px;padding:1px 9px;font-size:11px;font-weight:600}

/* 架空の計算例 */
.calc{margin-top:22px;background:var(--warm);border-radius:16px;padding:18px 20px}
/* 固定費の概算（畳んである）。左＝出典つきの単価、右＝仮定を置いた計算 */
.cost{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:12px}
.cost>div{background:var(--tonal);border-radius:16px;padding:14px 16px 12px}
.cost h4{margin:0 0 6px;font-size:13px;font-weight:600}
.cost h4 small{display:block;font-weight:400;font-size:11px;color:var(--sub);margin-top:1px}
.cost ul{list-style:none;margin:0;padding:0}
.cost li{padding:7px 0;border-top:1px solid var(--line);font-size:13px;line-height:1.5}
.cost li b{font-weight:600}
.cost li small{display:block;font-size:11px;color:var(--sub);line-height:1.5}
.cost-sum{margin-top:10px;padding-top:10px;border-top:1px solid var(--line);font-size:14px;font-weight:600;line-height:1.6}
.cost-sum span{color:var(--ac)}
.cost-note{margin-top:8px;font-size:12px;color:var(--sub);line-height:1.6}
/* 収支カーブと計算機の横並び。箱は同じ高さに伸びる */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:0 16px;align-items:stretch}
.duo-col{display:flex;flex-direction:column;min-width:0}
.duo .jc,.duo .calc{flex:1 1 auto;margin-top:0}
.duo .jc{height:auto;min-height:230px}
.duo .jc .lb{font-size:11px}
.duo .jc .lb.s{font-size:10px}
.duo .calc-grid{gap:12px 18px}
.calc-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 28px;margin-top:14px}
.calc label{display:block;font-size:12px;color:var(--warm-ink)}
.calc output{display:block;font-size:20px;font-weight:600;font-variant-numeric:tabular-nums;line-height:1.3}
.calc input[type=range]{width:100%;margin:8px 0 0;accent-color:var(--warm-ink)}
.calc .result{margin-top:16px;padding-top:14px;border-top:1px solid color-mix(in srgb,var(--warm-ink) 25%,transparent);
  display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.calc .result .eq{font-size:13px;color:var(--warm-ink);font-variant-numeric:tabular-nums}
.calc .result .ans{font-size:30px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.2}
.meter{margin-top:12px;height:14px;border-radius:7px;background:color-mix(in srgb,var(--warm-ink) 16%,transparent);overflow:hidden}
.meter i{display:block;height:100%;width:25%;border-radius:7px;background:var(--warm-ink);transition:width .15s}
.meter-scale{display:flex;justify-content:space-between;margin-top:4px;font-size:11px;color:var(--warm-ink);font-variant-numeric:tabular-nums}
.calc .note{margin-top:10px;font-size:12px;line-height:1.7;color:var(--warm-ink)}

/* 層で見る年表（帯は「その遊び場が加わった」目印から現在まで） */
.bands{position:relative;padding:26px 0 4px}
.bands .tick{position:absolute;top:0;bottom:0;width:0;border-left:1px solid var(--line)}
.bands .tick i{position:absolute;top:0;left:5px;font-style:normal;font-size:11px;color:var(--sub);font-variant-numeric:tabular-nums;line-height:1.4}
.bands .now{position:absolute;top:0;right:0;font-size:11px;color:var(--sub);line-height:1.4}
.band-row{position:relative;height:36px;margin-top:10px}
.lg{display:inline-block;width:9px;height:9px;border-radius:50%;vertical-align:-1px;margin:0 3px 0 6px;box-shadow:0 0 0 2px var(--card)}
.lg.i3{background:var(--imp3);width:11px;height:11px}.lg.i2{background:var(--imp2)}.lg.i1{background:var(--card);box-shadow:0 0 0 2px var(--ink);width:7px;height:7px}
.lg.warn{width:12px;height:11px;border-radius:0;box-shadow:none;background:var(--warn);clip-path:polygon(50% 0,100% 100%,0 100%)}
.band{position:absolute;top:0;bottom:0;right:0;border-radius:10px 4px 4px 10px;display:flex;align-items:center;gap:8px;padding:0 12px;
  font-size:12px;white-space:nowrap;overflow:visible}
/* 帯の上の印（押すと注釈）。先頭＝その遊び場が加わった節目、途中＝大きな出来事 */
.band .ev{flex:none;position:relative;width:20px;height:20px;margin:0 -4px 0 -6px;padding:0;border:0;background:transparent;cursor:pointer}
/* 印の色＝衝撃の大きさ：i3 大（橙赤・大きめ）／i2 中（青）／i1 小（白抜き・小さめ）。色弱でも見分けられるよう、色相だけでなく明るさと大きさも変える */
.band .ev::before{content:"";position:absolute;left:50%;top:50%;width:9px;height:9px;border-radius:50%;background:var(--ic);box-shadow:0 0 0 2px var(--card);transform:translate(-50%,-50%)}
.band .ev.i3{--ic:var(--imp3)}.band .ev.i3::before{width:13px;height:13px}
.band .ev.i2{--ic:var(--imp2)}
.band .ev.i1{--ic:var(--card)}.band .ev.i1::before{box-shadow:0 0 0 2px var(--ink);width:7px;height:7px}
.band .ev.at{position:absolute;top:50%;margin:0;transform:translate(-50%,-50%)}
/* 帯をまたぐ出来事（Switch＝家庭用と携帯機の両方）は、2本の帯にかかる縦バー */
.band .ev.bar{top:0;height:82px;transform:translateX(-50%);z-index:2}
.band .ev.bar::before{top:0;width:8px;height:82px;border-radius:4px;transform:translateX(-50%);background:var(--ic)}
.band .ev:hover::before,.band .ev:focus-visible::before{background:var(--ink);box-shadow:0 0 0 2px var(--card)}
/* 注意の印：黄色の三角に「！」（伸びの鈍化など）。丸の印とは形で見分ける */
.band .ev.warn{--ic:var(--warn)}
.band .ev.warn::before{width:17px;height:15px;border-radius:0;box-shadow:none;clip-path:polygon(50% 0,100% 100%,0 100%);transform:translate(-50%,-56%)}
.band .ev.warn::after{content:"!";position:absolute;left:50%;top:50%;transform:translate(-50%,-36%);font-size:10px;font-weight:800;line-height:1;color:#1d1d1f;pointer-events:none}
.band .ev:focus-visible{outline:2px solid var(--bc);outline-offset:2px}
.band b{font-weight:600;font-size:13px}
.band span,.pre span{color:var(--sub);font-variant-numeric:tabular-nums}
.band{--bc:var(--ac)}
.band.l0{--bc:var(--ink);background:var(--tonal)}
.band.l1{--bc:var(--c-coral)}
.band.l2{--bc:var(--c-teal)}
.band.l3{--bc:var(--c-green)}
.band.l5{--bc:var(--c-blue)}
.band.l4{--bc:var(--c-violet)}
.band.l1,.band.l2,.band.l3,.band.l4,.band.l5{background:color-mix(in srgb,var(--bc) 16%,var(--card))}
/* 日本の勢い：橙の濃さ＝勢い（印の「大」と同じ橙）。1980〜90年代が濃く、2000年代に薄れ、2010年代後半から戻す（見方） */
.band.heat{--bc:var(--imp3);background:linear-gradient(90deg,color-mix(in srgb,var(--imp3) 4%,var(--card)) 0%,color-mix(in srgb,var(--imp3) 70%,var(--card)) 20%,var(--imp3) 34%,color-mix(in srgb,var(--imp3) 95%,var(--card)) 48%,color-mix(in srgb,var(--imp3) 40%,var(--card)) 56%,color-mix(in srgb,var(--imp3) 8%,var(--card)) 66%,color-mix(in srgb,var(--imp3) 8%,var(--card)) 74%,color-mix(in srgb,var(--imp3) 45%,var(--card)) 82%,color-mix(in srgb,var(--imp3) 90%,var(--card)) 100%)}
.band-row.heat-row{margin-top:14px}
.band.heat .hl{position:absolute;top:50%;transform:translateY(-50%);font-size:11px;font-weight:600;color:var(--ink);white-space:nowrap;text-shadow:0 0 6px var(--card)}
.pre{position:absolute;top:0;bottom:0;display:flex;align-items:center;justify-content:flex-end;gap:8px;padding-right:10px;font-size:12px;white-space:nowrap;left:0}
.pre b{font-weight:600;font-size:13px}

/* 表（文字の年表・開いて読む） */
details.more{margin-top:16px}
details.more>summary{cursor:pointer;list-style:none;font-size:13px;color:var(--sub);display:inline-flex;align-items:center;gap:6px}
details.more>summary::-webkit-details-marker{display:none}
details.more>summary::before{content:"＋"}
details.more[open]>summary::before{content:"－"}
.tbl{margin-top:12px;border-top:1px solid var(--line)}
.row{display:grid;grid-template-columns:96px 1fr 1fr;gap:6px 20px;padding:12px 0;border-bottom:1px solid var(--line);font-size:14px;line-height:1.65}
.row.head{font-size:12px;color:var(--sub);font-weight:600;letter-spacing:.06em;padding:9px 0}
.row .era{font-weight:600;font-variant-numeric:tabular-nums}
.row .view{color:var(--sub)}

/* 数字の絵 */
.bigstat{margin-top:24px;background:var(--node);border:1px solid var(--line);border-radius:20px;padding:20px 22px}
/* 06章：世界の需要／日本の市場を同じ形で横並び。日本側の下に「目安」を2つ */
.duo.mk{margin-top:20px;gap:16px;align-items:start}
.duo.mk .bigstat{margin-top:0}
.extra{margin-top:16px;padding-top:12px;border-top:1px dashed var(--line)}
.extra-h{font-size:12px;font-weight:600;color:var(--sub)}
.extra .row{display:flex;gap:14px;align-items:center;padding:10px 0 2px}
.extra .row>div{min-width:0}
.extra .stat-num{font-size:20px}
.extra .pic{flex:none;color:var(--c-green)}.extra .pic .ic{width:40px;height:40px;stroke-width:1.1}
.extra .growth{flex:none;height:56px}.extra .growth .g1 i{height:22px}.extra .growth .g2 i{height:42px}
.bigstat-top{display:flex;align-items:flex-end;justify-content:space-between;gap:8px 20px;flex-wrap:wrap}
.stat-k{font-size:13px;font-weight:600;color:var(--ac)}
.stat-what{margin-top:6px;font-size:12px;color:var(--sub);line-height:1.5}
.stat-num{font-size:30px;font-weight:700;line-height:1.25;font-variant-numeric:tabular-nums;letter-spacing:.01em}
.stat-src{margin-top:4px;font-size:11px;color:var(--sub);line-height:1.5}
.growth{display:flex;align-items:flex-end;gap:10px;height:84px}
.growth div{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:4px;height:100%;font-size:10px;color:var(--sub);white-space:nowrap}
.growth i{display:block;width:26px;border-radius:6px 6px 2px 2px}
.growth .g1 i{height:32px;background:color-mix(in srgb,var(--ac) 40%,var(--node))}
.growth .g2 i{height:61px;background:var(--ac)}

/* 3つの見方 */

/* 問い（開くと回答例） */
details.ask{margin-top:14px;border:1px solid var(--line);border-radius:14px;padding:0 18px}
details.ask summary{cursor:pointer;list-style:none;padding:13px 0;font-weight:500;display:flex;gap:10px;align-items:flex-start}
details.ask summary::-webkit-details-marker{display:none}
details.ask summary::before{content:"Q";flex:none;width:22px;height:22px;border-radius:50%;background:var(--ink);color:var(--card);
  font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;margin-top:2px}
details.ask summary::after{content:"＋";margin-left:auto;color:var(--sub);flex:none}
details.ask[open] summary::after{content:"－"}
details.ask .a{padding:0 0 15px 32px;font-size:14px;color:var(--sub)}

/* 現場メモ（本人が書く欄） */
.memo{display:flex;gap:12px;align-items:baseline;margin-top:16px;background:var(--tonal);border-left:2px solid var(--line);border-radius:4px 14px 14px 4px;padding:13px 18px}
.memo-k{flex:none;font-size:12px;font-weight:600;color:var(--sub);white-space:nowrap}
.memo p{font-size:13px;color:var(--sub);line-height:1.7}

.srcline{margin-top:16px;font-size:12px;color:var(--sub)}

/* 会社のタイプ切り替え（01章の相関図を塗り分ける） */
.types-row{display:flex;align-items:center;justify-content:space-between;gap:8px 16px;flex-wrap:wrap;margin:0 0 10px}
.types{display:flex;gap:8px;min-width:0;margin:0;padding:0;list-style:none;overflow-x:auto;scrollbar-width:none}
.types::-webkit-scrollbar{display:none}
.types button{font:inherit;font-size:13px;font-weight:500;color:var(--ink);background:var(--tonal);border:0;border-radius:980px;padding:7px 14px;white-space:nowrap;cursor:pointer}
.types button[aria-pressed="true"]{background:var(--ink);color:var(--card)}
.type-cap{min-height:1.7em;margin:0 0 16px;font-size:13px;color:var(--sub);line-height:1.7}
.chain.typed .node:not(.on){opacity:.4}
.chain.typed .arr-v,.chain.typed .link,.chain.typed .rail{opacity:.4}
.chain .node.on{border-color:var(--ac);background:var(--ac-soft)}
.chain .node.on .ico{background:var(--card)}
.chain .node.on::after{content:var(--badge);position:absolute;top:-10px;right:12px;height:20px;padding:0 9px;border-radius:980px;
  background:var(--ac);color:var(--card);font-size:10px;font-weight:700;letter-spacing:.04em;display:flex;align-items:center;white-space:nowrap}

/* 言葉を4つの軸に分ける */
.axes{margin-top:24px;border-top:1px solid var(--line)}
.axis{display:grid;grid-template-columns:150px minmax(0,1fr) minmax(0,1fr);gap:8px 20px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line)}
.axis-k{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:600}
.axis-k .ico{width:32px;height:32px;border-radius:9px}
.axis-k .ic{width:18px;height:18px}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
.chips li{background:var(--tonal);border-radius:8px;padding:4px 10px;font-size:13px;font-weight:500;line-height:1.5}
.chips li small{font-weight:400;color:var(--sub);font-size:11px;margin-left:4px}
.axis-w{font-size:12px;color:var(--sub);line-height:1.6;padding-left:22px;position:relative}
.axis-w::before{content:"!";position:absolute;left:0;top:1px;width:15px;height:15px;border-radius:50%;border:1px solid var(--sub);font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center}

/* 売り方カード（小さな曲線＝いつお金が入るか） */
.models{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.model{background:var(--node);border:1px solid var(--line);border-radius:16px;padding:14px 14px 13px}
.model h3{margin:0;font-size:15px;font-weight:600;word-break:auto-phrase}
.model h3 small{font-size:11px;font-weight:500;color:var(--sub)}
.model svg{display:block;width:100%;height:52px;margin:10px 0 8px}
.model .area{fill:var(--ac-soft)}
.model .ln{fill:none;stroke:var(--ac);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.model .base{stroke:var(--line);stroke-width:1;vector-effect:non-scaling-stroke}
.model .rel{stroke:var(--sub);stroke-width:1;stroke-dasharray:2 3;vector-effect:non-scaling-stroke}
.model .m{font-size:12px;font-weight:600;color:var(--ac);line-height:1.5;word-break:auto-phrase}
.model p{margin-top:2px;font-size:12px;color:var(--sub);line-height:1.6;text-wrap:balance;word-break:auto-phrase}
/* 「図の読み方」の札：章の色を薄く敷いて、売り方の札とは別物だと分かるように */
.model.key{background:var(--ac-soft);border-color:transparent;display:flex;flex-direction:column;justify-content:center;font-size:12px;color:var(--ink);line-height:1.7}
.model.key b{color:var(--ac);font-weight:600;font-size:13px}
/* 「基本無料」の仕組み：①ただではない → ②毎月の支出 → ③続ける工夫（PC は横に3枚、スマホは縦） */
.f2p{display:grid;grid-template-columns:minmax(0,1fr) 28px minmax(0,1fr) 28px minmax(0,1fr);align-items:stretch}
.f2p .step{background:var(--tonal);border-radius:16px;padding:14px 16px 13px;display:flex;flex-direction:column}
.f2p .n{display:inline-flex;width:22px;height:22px;border-radius:50%;background:var(--ink);color:var(--card);font-size:11px;font-weight:700;align-items:center;justify-content:center;margin-bottom:8px}
.f2p .step b{display:block;font-size:14px;font-weight:600;line-height:1.5;margin-bottom:8px}
.f2p .chips li{background:var(--card);font-size:12px;padding:4px 9px}
.f2p .chips li small{display:block;margin:0;font-size:11px;color:var(--sub);line-height:1.4}
.f2p .step p{margin-top:8px;font-size:12px;color:var(--sub);line-height:1.7;text-wrap:balance;word-break:auto-phrase}
.f2p .arr{width:28px}
.f2p .arr::before{left:4px;right:9px}
.free-p{margin-top:14px;font-size:14px;font-weight:600;line-height:1.7}
.ops{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:12px}
.ops div{display:flex;align-items:center;gap:10px;background:var(--tonal);border-radius:14px;padding:10px 12px;font-size:13px;font-weight:500;line-height:1.4}
.ops .ico{width:32px;height:32px;border-radius:9px;background:var(--card);color:var(--ink)}
.ops .ic{width:18px;height:18px}

/* 競争の相手が増えた */
.versus{display:grid;grid-template-columns:44px minmax(0,1fr);gap:12px 14px;align-items:center;border:1px solid var(--line);border-radius:20px;padding:16px 18px;background:var(--node)}
.versus .when{font-size:12px;font-weight:600;color:var(--sub);letter-spacing:.06em}
.versus .line{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.vs-chip{border-radius:8px;padding:5px 11px;font-size:13px;font-weight:500;line-height:1.5;background:var(--tonal)}
.vs-chip.me{background:var(--c-teal);color:var(--card);font-weight:600}
.vs-chip.add{background:transparent;border:1px dashed var(--sub);color:var(--ink)}
.versus .x{font-size:11px;font-weight:700;color:var(--sub);letter-spacing:.08em;margin:0 4px}
.versus hr{grid-column:1 / -1;width:100%;border:0;border-top:1px solid var(--line);margin:0}
/* いま：右側は2段（1段目＝他社の新作、2段目＝「＋」の札）。左の「自分たちの新作 VS」は右側の高さの中央に */
.versus .line.now{align-items:center;flex-wrap:nowrap}
.versus .line.now .me,.versus .line.now .x{flex:none}
.versus .rival{display:flex;flex-direction:column;align-items:flex-start;gap:6px;flex:1 1 0;min-width:0}
.versus .adds{display:flex;flex-wrap:wrap;gap:6px}
/* 様々な課題：1枚の中に3分類。左＝分類名（アイコン＋名前）、右＝項目を2列。--cc＝分類の色 */
.issues{margin-top:14px;background:var(--tonal);border-radius:16px;padding:16px 18px 14px}
.issues h3{margin:0 0 8px;font-size:15px;font-weight:600}
.issues .grp{display:grid;grid-template-columns:164px minmax(0,1fr);gap:0 16px;align-items:center;padding:8px 0;border-top:1px solid var(--line)}
.issues .gl{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;line-height:1.4}
.issues .gl .ico{width:30px;height:30px;border-radius:9px;background:color-mix(in srgb,var(--cc) 16%,var(--card));color:var(--cc)}
.issues .gl .ic{width:16px;height:16px}
.issues ul{margin:0;padding:0;list-style:none;font-size:13px;line-height:1.6}
.issues li{position:relative;padding:4px 0 4px 14px}
.issues li::before{content:"";position:absolute;left:0;top:13px;width:5px;height:5px;border-radius:50%;background:var(--cc)}
.issues .g1{--cc:var(--c-blue)}.issues .g2{--cc:var(--c-violet)}.issues .g3{--cc:var(--c-teal)}
.issues .gnote{grid-column:2;margin:2px 0 4px 14px;font-size:12px;color:var(--sub);line-height:1.6}
/* 札の上段＝アイコンと項目名を横並び（見出しはアイコンの右） */

/* 補足（開いて読む） */
details.more .notes{margin:10px 0 0;padding:0 0 0 1.2em;font-size:13px;color:var(--sub);line-height:1.8}

/* 用語集 */
.terms{display:grid;grid-template-columns:1fr 1fr;gap:0 32px;margin:20px 0 0;border-top:1px solid var(--line)}
.terms div{display:grid;grid-template-columns:132px minmax(0,1fr);gap:12px;padding:11px 0;border-bottom:1px solid var(--line);font-size:13px;line-height:1.65}
.terms dt{font-weight:600;font-size:14px}
.terms dt small{display:block;font-weight:400;font-size:11px;color:var(--sub)}
.terms dd{margin:0;color:var(--sub)}

/* 職種マップ：工程 01〜05 の列（上の工程図と同じ列幅）に、主に動く範囲を札で渡す。各工程は2小列＝半歩刻みで始点・終点を置ける。
   --s/--e＝列線（PC）、--sm/--em＝列線（スマホ）、--r＝行。列線は HTML 側で計算済み */
.gantt{margin-top:18px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr)) 28px repeat(2,minmax(0,1fr)) 28px repeat(2,minmax(0,1fr)) 28px repeat(2,minmax(0,1fr)) 28px repeat(2,minmax(0,1fr));gap:5px 0}
.gantt .bar{grid-column:var(--s) / var(--e);grid-row:var(--r);margin:0 2px;background:color-mix(in srgb,var(--gc,var(--sub)) 16%,var(--card));border-left:3px solid var(--gc,var(--sub));border-radius:8px;padding:4px 9px;font-size:12px;font-weight:500;line-height:1.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gantt-h{display:none}
.gantt .g-plan{--gc:var(--c-blue)}.gantt .g-art{--gc:var(--c-violet)}.gantt .g-tech{--gc:var(--c-teal)}.gantt .g-qa{--gc:var(--c-gold)}.gantt .g-ops{--gc:var(--c-green)}

/* 売上が利益になるまで（段々に減る。幅はイメージ） */
/* 売値の内訳：1本の棒を左から順に分ける。--cols＝各区分の幅（fr）。棒と説明は同じ列割り */
.price{margin-top:6px}
.plabel{font-size:13px;color:var(--sub);line-height:1.7;margin-bottom:12px}
/* 区分ごとの色（--sc）。棒の中に見出し、下に内訳。色弱でも読めるよう、色だけに頼らず文字を中に入れる */
.price .tax{--sc:var(--c-slate)}.price .dist{--sc:var(--c-blue)}.price .promo{--sc:var(--c-violet)}.price .dev{--sc:var(--c-teal)}.price .profit{--sc:var(--ac)}
.pbar{display:grid;grid-template-columns:var(--cols);gap:3px;min-height:44px}
.pbar i{display:flex;align-items:center;justify-content:center;border-radius:8px;background:var(--sc);color:var(--on-color);font-style:normal;font-size:12px;font-weight:600;line-height:1.3;text-align:center;padding:5px 4px;text-wrap:balance;word-break:auto-phrase}
.pbar .profit{color:#14161a}
.pcap{display:grid;grid-template-columns:var(--cols);gap:3px;margin-top:8px}
.pcap div{min-width:0;padding:0 2px;font-size:12px;line-height:1.5}
.pcap b{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.pcap small{display:block;font-size:11px;color:var(--sub);line-height:1.5;word-break:auto-phrase}
.deals{display:grid;grid-template-columns:1fr 1fr;gap:0 28px;margin:10px 0 0;border-top:1px solid var(--line)}
.deals div{padding:9px 0;border-bottom:1px solid var(--line);font-size:12px;line-height:1.6;color:var(--sub)}
.deals b{display:block;font-size:13px;font-weight:600;color:var(--ink)}

/* 年代ごとのキーワード：年表の下に、同じ列割りで */
.kw{position:relative;height:104px;margin-top:14px;padding-top:8px;border-top:1px solid var(--line)}
.kw>div{position:absolute;top:8px;padding:0 6px 0 5px;font-size:11px;line-height:1.55;color:var(--sub)}
.kw b{display:none}
.kw span{display:block;white-space:nowrap}
.shift-p{margin-top:22px;font-size:13px;color:var(--sub);line-height:1.8}
.shift-p b{display:block;font-size:15px;font-weight:600;color:var(--ink);line-height:1.6;margin-bottom:2px}

/* 講師の現場歴（年表に重ねる） */
.band-row.me{margin-top:18px}
.band.lme{background:transparent;border:1.5px dashed var(--sub)}
.band.lme::before{display:none}
.band-row.me .mk{position:absolute;top:50%;width:22px;height:22px;padding:0;border:0;border-radius:50%;background:transparent;transform:translate(-50%,-50%);cursor:pointer}
.band-row.me .mk::before{content:"";position:absolute;left:50%;top:50%;width:11px;height:11px;border-radius:50%;background:var(--ink);transform:translate(-50%,-50%)}
.band-row.me .mk:hover::before,.band-row.me .mk:focus-visible::before{background:var(--ac)}
.band-row.me .mk:focus-visible{outline:2px solid var(--ac);outline-offset:2px}

/* 日本の立ち位置：3つの時期と、強い領域 */
.phases{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}
.phase{background:var(--tonal);padding:12px 22px 13px 26px;clip-path:polygon(0 0,calc(100% - 14px) 0,100% 50%,calc(100% - 14px) 100%,0 100%,14px 50%)}
.phase:first-child{padding-left:16px;border-radius:12px 0 0 12px;clip-path:polygon(0 0,calc(100% - 14px) 0,100% 50%,calc(100% - 14px) 100%,0 100%)}
.phase.now{background:var(--ac-soft)}
.phase b{display:block;font-size:12px;font-weight:600;color:var(--sub);font-variant-numeric:tabular-nums}
.phase span{display:block;font-size:14px;font-weight:600;line-height:1.45}
/* 強いと言われる領域：1枚の比較フィールド（中を縦線で2列に分ける） */
.board{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:14px;background:var(--node);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.side{padding:16px 18px;min-width:0}
.side.other{border-left:1px solid var(--line)}
.side h3{display:flex;align-items:center;gap:8px;margin:0 0 10px;font-size:14px;font-weight:600}
.side h3::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--c-teal)}
.side.other h3::before{background:var(--ink)}
.side p{margin-top:10px;font-size:12px;color:var(--sub);line-height:1.7}

/* 事実の図：働く人の内訳・市場の推移・国内の遊ぶ人 */
.people{margin-top:26px;background:var(--node);border:1px solid var(--line);border-radius:20px;padding:18px 22px 16px}
.people-h{display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 12px;margin-bottom:16px}
.people-h b{font-size:16px;font-weight:600;line-height:1.5}
.people-h .of-pop{font-size:14px;font-weight:600;color:var(--ac)}
.people-h small{flex-basis:100%;font-size:12px;color:var(--sub)}
.crowd{display:flex;gap:22px;align-items:flex-start}
.crowd .grp{min-width:0}
.crowd .grp.a{flex:7}
.crowd .grp.b{flex:13}
.crowd .ppl{display:flex;flex-wrap:wrap;gap:2px;margin-left:-3px}
.crowd .ppl .ic{width:26px;height:26px;fill:currentColor;fill-opacity:.22}
.crowd .grp.a .ppl{color:var(--ac)}
.crowd .grp.b .ppl{color:var(--sub)}
.crowd b{display:block;margin-top:8px;font-size:14px;font-weight:600;line-height:1.5}
.crowd em{display:block;font-style:normal;font-size:13px;font-variant-numeric:tabular-nums}
.crowd small{display:block;margin-top:3px;font-size:11px;color:var(--sub);line-height:1.6}
.hbars{display:grid;gap:8px;margin-top:16px}
.hbars div{display:grid;grid-template-columns:52px minmax(0,1fr) 68px 44px;gap:8px;align-items:center;font-size:12px}
.hbars span{font-weight:600}
.hbars u{display:block;height:14px;border-radius:7px;background:var(--tonal);text-decoration:none;overflow:hidden}
.hbars i{display:block;height:100%;border-radius:7px;background:var(--hc,var(--ac))}
.hbars .hb-mob{--hc:var(--c-violet)}.hbars .hb-con{--hc:var(--c-teal)}.hbars .hb-pc{--hc:var(--c-blue)}
.hbars em{font-style:normal;color:var(--ink);font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.hbars .pct{font-style:normal;font-weight:600;color:var(--sub);font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
/* 国別ランキング：棒は1位＝100%の相対。日本だけ章の色で目立たせる */
.rank-h{margin-top:16px;padding-top:12px;border-top:1px dashed var(--line);font-size:12px;font-weight:600}
.hbars.rank{margin-top:8px}
.hbars.rank div{grid-template-columns:52px minmax(0,1fr) 68px}
.hbars.rank i{background:var(--c-slate)}
.hbars.rank .jp i{background:var(--ac)}.hbars.rank .jp span{color:var(--ac)}

/* 番外：ほかの仕事との人口比くらべ（人数は data-count、割合は JS が人口で割って出す） */
.jobbars{display:grid;gap:9px;margin-top:14px}
.jobbars div{display:grid;grid-template-columns:140px minmax(0,1fr) 168px;gap:12px;align-items:center;font-size:13px}
.jobbars span{font-weight:500}
.jobbars u{display:block;height:12px;border-radius:6px;background:var(--tonal);text-decoration:none;overflow:hidden}
.jobbars i{display:block;height:100%;min-width:3px;border-radius:6px;background:var(--sub)}
.jobbars em{font-style:normal;font-size:12px;color:var(--sub);font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.jobbars .me span{font-weight:700;color:var(--ac)}
.jobbars .me i{background:var(--ac)}
.jobbars .me em{color:var(--ink);font-weight:600}
.people details.more{margin-top:18px;padding-top:14px;border-top:1px solid var(--line)}

/* まとめ */

/* 用語のポップアップ（用語集の dl から自動で作る） */
.term{text-decoration:underline dotted var(--sub);text-underline-offset:3px;cursor:help}
.term:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px}
#pop{position:absolute;z-index:10;max-width:min(400px,calc(100vw - 16px));background:var(--ink);color:var(--card);border-radius:12px;padding:10px 14px 11px;font-size:13px;line-height:1.6;box-shadow:var(--shadow)}
#pop[hidden]{display:none}
#pop b{display:block;font-size:11px;font-weight:600;letter-spacing:.06em;opacity:.7}
/* 1話題＝1段落。折り返しは文節の切れ目（auto-phrase）で、2行になる時は長さを揃える（balance）＝数文字だけの行を作らない */
#pop p{margin:0;text-wrap:balance;word-break:auto-phrase}
#pop p+p{margin-top:5px}
nav.toc a[aria-current="true"]{background:var(--ink);color:var(--card)}
nav.toc a[aria-current="true"] .n{color:inherit;opacity:.7}

/* 出典 */
.srcs{list-style:none;margin:20px 0 0;padding:0;border-top:1px solid var(--line)}
.srcs li{display:grid;grid-template-columns:40px 1fr;gap:4px 8px;padding:12px 0;border-bottom:1px solid var(--line);font-size:14px;line-height:1.6}
.srcs .no{color:var(--sub);font-variant-numeric:tabular-nums}
.srcs .d{grid-column:2;font-size:12px;color:var(--sub)}
.srcs a{text-decoration-color:var(--sub);text-underline-offset:3px;overflow-wrap:anywhere}
.rules{margin:18px 0 0;padding:0 0 0 1.2em;font-size:13px;color:var(--sub);line-height:1.9}


@media (max-width:720px){
  body{padding:0;background:var(--card)}
  .wrap{margin:0 0 40px}
  header.top{padding:48px 20px 32px;border-bottom:1px solid var(--line)}
  .pages{margin:0 0 20px}
  .eyebrow{font-size:16px}
  .lead{font-size:14px;margin-top:14px}
  .chapters{gap:6px;margin-top:26px}
  .chapters a{background:var(--tonal);box-shadow:none;padding:5px 10px 5px 6px}
  nav.toc{padding:8px 20px;background:color-mix(in srgb,var(--card) 85%,transparent);border-bottom:1px solid var(--line)}
  nav.toc a{background:var(--tonal)}
  section.ch{border-radius:0;box-shadow:none;border:0;border-bottom:1px solid var(--line);padding:38px 20px 32px;margin-top:0}
  h2{font-size:23px}
  .flow{flex-direction:column}
  .node{display:grid;grid-template-columns:38px 1fr;column-gap:14px;align-items:start}
  .node>.ico{grid-row:1 / span 4}
  .node>*:not(.ico){grid-column:2}
  .node h3,.steps .node h3{margin-top:0}
  .arr,.steps .arr{flex:none;width:auto;height:40px;justify-content:flex-start;padding-left:calc(50% + 12px);text-align:left}
  .arr::before,.steps .arr::before{left:50%;right:auto;top:5px;bottom:10px;width:1.5px;height:auto}
  .arr::after{right:auto;left:50%;top:auto;bottom:3px;transform:translateX(-3.25px);
    border-top:7px solid var(--accent);border-left:4px solid transparent;border-right:4px solid transparent;border-bottom:0}
  .arr span{top:0}
  .chain{grid-template-columns:22px minmax(0,1fr);gap:0 10px}
  .stage,.down{grid-template-columns:minmax(0,1fr)}
  .stage-k{display:flex;align-items:baseline;gap:8px;margin-bottom:6px}
  .stage .link{display:none}
  .helpers{margin:8px 0 0 16px;padding-left:12px;border-left:1.5px solid var(--line)}
  .arr-v{grid-column:1}
  button.node{display:grid;grid-template-columns:38px minmax(0,1fr)}
  button.node.sub{grid-template-columns:32px minmax(0,1fr)}
  button.node>.more{grid-column:auto}
  .type-cap{min-height:3.4em}
  .loop{height:auto;border:0;margin:12px 0 0;text-align:center}
  .loop::before{display:none}
  .loop span{position:static;transform:none;background:none;padding:0}
  .loop span::before{content:"↑ "}
  .pair,.calc-grid,.ways,.duo,.cost,.f2p{grid-template-columns:1fr}
  .f2p .arr{width:auto;justify-self:stretch}
  .f2p .arr::before{left:50%;right:auto}
  .duo .jc{min-height:200px}
  .duo .calc{margin-top:0}
  .jc{height:200px}
  .fig-title small{flex-basis:100%}
  .jc .lb{font-size:11px}
  .jc .lb.s{font-size:10px}
  .band{padding:0 8px;gap:6px;font-size:11px}
  .band b,.pre b{font-size:12px}
  .band.heat .hl{display:none}
  .pre{font-size:11px;gap:6px;padding-right:8px}
  .row{grid-template-columns:1fr;gap:2px}
  .row.head{display:none}
  .memo{flex-direction:column;gap:6px}
  .point{flex-direction:column;gap:2px}
  .axis{grid-template-columns:1fr;gap:8px}
  .models{grid-template-columns:1fr 1fr;gap:10px}
  .ops{grid-template-columns:1fr 1fr}
  .versus{grid-template-columns:1fr;gap:8px}
  .versus .line.now{flex-wrap:wrap}.versus .rival{flex:1 1 100%}
  .issues .grp{grid-template-columns:1fr;gap:6px 0}
  /* スマホ：左に職種名、右に 01〜05 の5列。1職種＝1行（--rm） */
  /* スマホ：01〜05 の5列だけ（矢印の隙間なし）。札の文字は中で折り返す */
  .gantt-h{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0 3px;margin-bottom:4px;font-size:11px;color:var(--sub);text-align:center;font-variant-numeric:tabular-nums}
  .gantt{grid-template-columns:repeat(10,minmax(0,1fr));gap:5px 0}
  .gantt .bar{grid-column:var(--sm) / var(--em);white-space:normal;overflow:visible;padding:4px 6px;font-size:11px;line-height:1.4;word-break:auto-phrase}
  .pbar{min-height:0;height:26px}
  .pbar i{padding:0}.pbar i b{display:none}
  .pcap{display:block}
  .pcap div{display:grid;grid-template-columns:12px minmax(0,1fr);column-gap:8px;padding:5px 0;border-top:1px solid var(--line)}
  .pcap div::before{content:"";width:12px;height:12px;border-radius:4px;margin-top:3px;background:var(--sc)}
  .pcap b{position:static;width:auto;height:auto;overflow:visible;clip:auto;white-space:normal;display:block;font-weight:600}
  .pcap b,.pcap small{grid-column:2}
  .deals{grid-template-columns:1fr}
  .kw{height:auto;display:grid;grid-template-columns:1fr 1fr;gap:10px 14px}
  .kw>div{position:static;padding:0;width:auto !important}
  .kw b{display:block;font-size:12px;font-weight:600;color:var(--ac);font-variant-numeric:tabular-nums;margin-bottom:2px}
  .kw span{white-space:normal}
  .phases{grid-template-columns:1fr;gap:6px}
  .phase,.phase:first-child{clip-path:none;border-radius:12px;padding:11px 16px 12px}
  .board{grid-template-columns:1fr}
  .side.other{border-left:0;border-top:1px solid var(--line)}
  .terms{grid-template-columns:1fr}
  .terms div{grid-template-columns:108px minmax(0,1fr)}
  .terms dt{font-size:13px}
  .crowd{flex-direction:column;gap:16px}
  .jobbars div{grid-template-columns:minmax(0,1fr) auto;gap:3px 10px}
  .jobbars u{grid-column:1 / -1;grid-row:2}
  .hbars div{grid-template-columns:48px minmax(0,1fr) 62px 40px;gap:6px}
  .hbars.rank div{grid-template-columns:48px minmax(0,1fr) 62px}
  footer{padding:24px 20px 0}
}

/* 印刷（配布用）。配色は常にライト。畳んだ部分は JS が印刷前に開く */
@media print{
  :root,:root:not([data-theme="light"]),:root[data-theme="dark"]{
    --bg:#fff; --card:#fff; --ink:#1d1d1f; --sub:#55555a; --line:#c9c9ce;
    --tonal:#f0f0f3; --node:#fff; --accent:#40650e; --accent-soft:#edf5dd;
    --warm:#f6eedd; --warm-ink:#6b4e16; --coin:#b8860b; --shadow:none;
  }
  body{padding:0;font-size:12px}
  .wrap{max-width:none;margin:0}
  nav.toc,.types,#pop,.calc input[type=range],.meter,.meter-scale{display:none !important}
  .chapters a,section.ch{box-shadow:none}
  section.ch{border:1px solid var(--line);margin-top:14px;padding:22px 22px 18px;border-radius:16px}
  .stage,.flow,.gantt,.price,.way,.duo-col,.jc,.calc,.bands,.kw,.models,.ops,.bigstat,.issues,.phases,.board,.versus,.people,.pair,.point,.memo,details,.terms div,.srcs li{break-inside:avoid}
  h2,.fig-title{break-after:avoid}
  .term{text-decoration:none}
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}
/* 大枠と現場のページを行き来する小さなリンク */
/* 出典の一覧：ページには番号を出さないので1列（2026-09-22） */
.srcs li{grid-template-columns:1fr}.srcs .d{grid-column:1}
/* 入口の頭に敷く写真（飾り）。下へ向かって地色に溶かす。文字は前面 */
.hero-bg{position:absolute;top:0;left:0;right:0;height:520px;overflow:hidden;pointer-events:none;z-index:0}
.hero-bg img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 62%;opacity:.26;
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 38%,transparent 92%);
  mask-image:linear-gradient(to bottom,#000 0%,#000 38%,transparent 92%)}
:root:not([data-theme="dark"]) .hero-bg img{opacity:.10;filter:saturate(.7)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .hero-bg img{opacity:.26;filter:none}}
:root[data-theme="dark"] .hero-bg img{opacity:.26;filter:none}
.wrap{position:relative;z-index:1}
@media (max-width:720px){.hero-bg{height:380px}}

/* 入口ページ（notes のハブ）：テーマごとのカードを並べる */
/* 入口ページ：中央に +9 の印、その下にテーマ2枚 */
.hub-hero{padding:6px 8px 0;text-align:center}
.hub-hero .logo-wrap{position:relative;display:inline-block;padding-bottom:26px}
.hub-hero .mark{display:block;width:auto;height:54px;color:var(--ink)}
.hub-hero .mark-mirror{position:absolute;left:0;top:0;transform:translateY(100%) scaleY(-1);opacity:.27;pointer-events:none;
  -webkit-mask-image:linear-gradient(to top,#000 0%,transparent 60%);mask-image:linear-gradient(to top,#000 0%,transparent 60%)}
.title-row{display:flex;align-items:center;gap:12px;margin-top:12px}
.title-row h1{margin:0}
.title-row .chara{width:34px;height:34px;flex:none;color:var(--ink)}
.hub-hero .title-row{justify-content:center;margin-top:18px}
.hub-hero .chara{width:38px;height:38px}
.hub-hero h1{margin:0;text-wrap:balance}
.hub-hero .lead{margin:14px auto 0;width:fit-content;max-width:37em;font-size:16px;line-height:1.75;text-align:left;text-wrap:pretty}
.hub-hero .lead .tag{display:block;margin-bottom:6px;font-size:19px;font-weight:600;color:var(--ink);letter-spacing:-.01em}
.hub{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:8px}
.hub>a,.hub>.soon{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);
  border-radius:18px;padding:18px 20px 16px;text-decoration:none;color:inherit}
.hub>a{transition:border-color .2s,transform .2s,box-shadow .2s}
.hub>a:hover{border-color:var(--ac);transform:translateY(-3px);box-shadow:var(--shadow)}
.hub>.soon{color:var(--sub)}
.hub .k{display:flex;align-items:center;gap:8px;font-size:18px;font-weight:600;letter-spacing:.06em;color:var(--ink)}
.hub .k .ic{width:19px;height:19px}
.hub>.soon .k{color:var(--sub)}
.hub .k .ic{color:var(--ac)}
.hub b{display:block;margin-top:8px;font-size:15px;font-weight:600;line-height:1.5}
.hub .d{display:block;flex:1;margin-top:10px;font-size:13px;color:var(--sub);line-height:1.8;text-wrap:pretty}
.hub em{margin-top:12px;font-family:var(--mono);font-size:11px;font-style:normal;color:var(--sub)}
.hub>.soon em{align-self:flex-start;background:var(--tonal);border-radius:8px;padding:3px 9px;
  font-family:inherit;letter-spacing:.02em}
/* 上の行：3ページの切り替え（丸いタブ）。左端の印は地図のトップへ */
.pages{display:flex;align-items:center;gap:6px;margin:0 0 24px;overflow-x:auto;scrollbar-width:none}
.pages::-webkit-scrollbar{display:none}
.pages a{display:flex;align-items:center;flex:none;padding:6px 14px;border-radius:980px;border:1px solid var(--line);
  color:var(--sub);text-decoration:none;font-size:13px;line-height:1.45;white-space:nowrap;
  transition:color .2s,border-color .2s,background-color .2s}
.pages a:hover{color:var(--ink);border-color:var(--sub)}
.pages a[aria-current="page"]{background:var(--tonal);color:var(--ink);font-weight:500;border-color:transparent}
.pages .home{padding:5px 12px;color:var(--ink);border-color:transparent}
.pages .home:hover{border-color:var(--line)}
.pages .home svg{display:block;width:auto;height:19px;fill:currentColor}

/* まとめた人（名刺サイトへ） */
.by{margin:6px 8px 0;padding-top:8px;border-top:1px solid color-mix(in srgb,var(--line) 60%,transparent);
  color:var(--sub);text-align:right}
.by p{margin:0}
.by .who{font-size:13px;font-weight:600;letter-spacing:.04em;color:var(--ink)}
.by .bio{margin-top:2px;font-size:12px;line-height:1.6}
.by .site{margin-top:6px;font-family:var(--mono);font-size:12px;letter-spacing:.06em}
.by .bio:first-of-type{margin-top:6px}
.by a{color:inherit;text-decoration:none;border-bottom:1px solid var(--line)}
.by a:hover{color:var(--ink);border-color:var(--sub)}
@media (max-width:720px){
  .hub-hero{padding:56px 20px 0}
  .hub-hero .mark{height:70px}
  .hub-hero .logo-wrap{padding-bottom:30px}
  .title-row .chara{width:28px;height:28px}
  .hub-hero .chara{width:32px;height:32px}
  .hub-hero .lead{font-size:16px;margin-top:16px}
  .hub{grid-template-columns:1fr;gap:12px;margin:34px 20px 0}
  .by{margin:30px 20px 0}
  .hub>a,.hub>.soon{padding:20px 20px 18px}
  .hub b{font-size:20px}
}
@media (min-width:721px) and (max-width:1000px){.hub{grid-template-columns:repeat(2,minmax(0,1fr))}}