/* 市の計画と統計（非公式）
   見た目は議会の窓の新しい見た目（案A「やさしい公共」＋案Cの絵、案内役「まどさん」）にそろえる。
   土台: デジタル庁デザインシステム（背景は同じ色合いの明るさの差で階層化・文字 4.5:1・部品 3:1・青は控えめ）。
   決まり: 地は #F8F8FB、面は白いカード、線はほぼ使わない、左ぞろえ、タップは 48px。
   check.mjs が :root と :root[data-theme="dark"] のトークンのコントラストを機械的に確かめる。 */
:root {
  color-scheme: light;
  /* 面・文字: 地 #F8F8FB／白いカード／少し濃い面 #F1F1F4 */
  --bg: #f8f8fb; --surface: #ffffff; --band: #f8f8fb; --soft: #f1f1f4;
  --ink: #1a1a1c; --fg: #333333; --muted: #595959; --line: #e0e0e6; --rule: #8a8a94; --grid: #e6e6ec;
  /* 主色（控えめに使う）: blue-900（現在地・リンク）blue-1000（hover）blue-50/100（選んだ面） */
  --key: #0017c1; --key-hover: #00118f; --key-50: #e8f1fe; --key-100: #d9e6ff; --link: #00118f; --visited: #8b008b;
  /* 議会の窓の帯（組み込むとき）: 議会の窓の主色 blue-900 と白 */
  --gm: #0017c1; --gm-fg: #ffffff;
  /* 図の系列は青の濃淡: 主系列（中くらいの青）／第2系列（濃い紺）／最新値（橙。最新の1点だけ）／目標の輪郭（灰） */
  --s1: #2f6fd6; --s2: #1a2f7a; --hi: #b35c00; --target: #666666;
  /* 順序のある3区分（年齢）: 淡い青 → 中 → 濃い紺 */
  --o1: #a9c4f2; --o2: #4f7bd9; --o3: #1b3a96;
  /* 淡い塗り（折れ線の下の面など） */
  --s1-soft: #d9e6ff; --s2-soft: #c9d2ee;
  /* 淡い色の面（明るさをそろえた8色。ページの絵の下地） */
  --t-yuki: #eaf3fb; --t-kosodate: #fdf3e4; --t-iryo: #fbeaee; --t-okane: #e9f5ec; --t-bousai: #fff1dc; --t-shigoto: #f0efe3; --t-kotsu: #e7f1f3; --t-machi: #f0ebf7;
  /* 挿絵（自作SVG）の色。装飾なのでコントラストの検査対象外 */
  --il-ink: #2f4b7c; --il-hill: #e3e9f4; --il-dot: #ffffff;
  --il-sun: #ffe08a; --il-snow: #ffffff; --il-leaf: #5f8f55; --il-trunk: #8a6a4a; --il-apple: #b3343c;
  --il-wall: #ffffff; --il-roof: #2f4b7c; --il-sakura: #f3c9d3; --il-coin: #f0c35a; --il-wood: #d9b98f; --il-door: #8a6a4a; --il-window: #bcd3f5;
  --focus: #ffd43d; --focus-outline: #000000;
  --font: "Noto Sans JP", "BIZ UDPGothic", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", system-ui, sans-serif;
  --r4: 4px; --r8: 8px; --r12: 12px; --r14: 14px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #131419; --surface: #1d1e25; --band: #131419; --soft: #2a2b33;
    --ink: #ffffff; --fg: #e6e6ea; --muted: #b3b3bb; --line: #33343d; --rule: #8c8c98; --grid: #2e2f38;
    --key: #9db7f9; --key-hover: #c5d7fb; --key-50: #1c2650; --key-100: #25326b; --link: #9db7f9; --visited: #d9b8e8;
    --gm: #00118f; --gm-fg: #ffffff;
    --s1: #6a9bf0; --s2: #c3d3f8; --hi: #f0a04b; --target: #b3b3bb;
    --o1: #3c5aa6; --o2: #6a9bf0; --o3: #bcd0fa;
    --s1-soft: #1c2a52; --s2-soft: #2a3355;
    --t-yuki: #1c2a3a; --t-kosodate: #3a2f1c; --t-iryo: #3a1f27; --t-okane: #1f3325; --t-bousai: #3d2e17; --t-shigoto: #30301f; --t-kotsu: #1b3237; --t-machi: #2c2540;
    --il-ink: #9db7f9; --il-hill: #232a3d; --il-dot: #9db7f9;
    --il-sun: #ffd43d; --il-snow: #e6e6e6; --il-leaf: #7fb274; --il-trunk: #a88665; --il-apple: #e0636b;
    --il-wall: #2f3447; --il-roof: #9db7f9; --il-sakura: #d98aa4; --il-coin: #ffd43d; --il-wood: #8a6a4a; --il-door: #a88665; --il-window: #6a9bf0;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #131419; --surface: #1d1e25; --band: #131419; --soft: #2a2b33;
  --ink: #ffffff; --fg: #e6e6ea; --muted: #b3b3bb; --line: #33343d; --rule: #8c8c98; --grid: #2e2f38;
  --key: #9db7f9; --key-hover: #c5d7fb; --key-50: #1c2650; --key-100: #25326b; --link: #9db7f9; --visited: #d9b8e8;
  --gm: #00118f; --gm-fg: #ffffff;
  --s1: #6a9bf0; --s2: #c3d3f8; --hi: #f0a04b; --target: #b3b3bb;
  --o1: #3c5aa6; --o2: #6a9bf0; --o3: #bcd0fa;
  --s1-soft: #1c2a52; --s2-soft: #2a3355;
  --t-yuki: #1c2a3a; --t-kosodate: #3a2f1c; --t-iryo: #3a1f27; --t-okane: #1f3325; --t-bousai: #3d2e17; --t-shigoto: #30301f; --t-kotsu: #1b3237; --t-machi: #2c2540;
  --il-ink: #9db7f9; --il-hill: #232a3d; --il-dot: #9db7f9;
  --il-sun: #ffd43d; --il-snow: #e6e6e6; --il-leaf: #7fb274; --il-trunk: #a88665; --il-apple: #e0636b;
  --il-wall: #2f3447; --il-roof: #9db7f9; --il-sakura: #d98aa4; --il-coin: #ffd43d; --il-wood: #8a6a4a; --il-door: #a88665; --il-window: #6a9bf0;
}

/* ---------- 基本 ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }
body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--font); font-size: 16px; line-height: 1.7; letter-spacing: .02em; font-feature-settings: "palt" 0; }
h1, h2, h3, h4, .first .headline, .toc .k, .qcards .k { text-wrap: balance; overflow-wrap: anywhere; }
h1, h2, h3, h4 { margin: 0; font-weight: 700; line-height: 1.5; text-wrap: balance; letter-spacing: .01em; color: var(--ink); }
h1 { font-size: 1.6rem; }
h2 { font-size: 1.3rem; }
h3 { font-size: 1.1rem; }
@media (min-width: 600px) { h1 { font-size: 2rem; } h2 { font-size: 1.5rem; } h3 { font-size: 1.2rem; } }
p { margin: 0; }
a { color: var(--link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--key-hover); text-decoration-thickness: 2px; }
a:visited { color: var(--visited); }
:focus-visible { outline: 4px solid var(--focus-outline); outline-offset: 2px; box-shadow: 0 0 0 7px var(--focus); border-radius: 2px; }
button { font: inherit; color: inherit; }
.num, td.n, th.n, .axis text, .lbl, .dl { font-variant-numeric: tabular-nums; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { max-width: 800px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.prose { max-width: 40em; }
.lead { color: var(--muted); font-size: 16px; margin-top: 8px; max-width: 40em; }
.note { font-size: 14px; color: var(--muted); line-height: 1.6; }
.note a, .prose a, .source a, footer a, details a { overflow-wrap: anywhere; }
ul.note, ul.list { padding-left: 1.4em; margin: 8px 0 0; }
ul.list li + li, ul.note li + li { margin-top: 6px; }
small { font-size: 14px; }

/* ---------- 上の帯（議会の窓の帯と同じ: 白・線なし・高さ 64px） ---------- */
header.site { background: var(--surface); position: sticky; top: 0; z-index: 5; }
header.site .wrap { display: flex; align-items: center; gap: 8px 16px; min-height: 64px; flex-wrap: wrap; padding-block: 8px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); font-weight: 900; font-size: 18px; letter-spacing: .02em; min-height: 48px; line-height: 1.2; }
.brand:visited, .brand:hover { color: var(--ink); }
.brand .mark { width: 36px; height: 36px; flex: none; }
.brand > span { white-space: nowrap; }
.brand small { font-size: 12px; font-weight: 400; color: var(--muted); margin-left: 6px; letter-spacing: 0; }
.theme-toggle { margin-left: auto; white-space: nowrap; min-height: 48px; min-width: 48px; padding: 0 14px; border: 0; border-radius: 10px; background: var(--soft); color: var(--ink); font-size: 14px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.theme-toggle:hover { background: var(--key-50); }
.theme-toggle svg { width: 18px; height: 18px; }
nav.top { display: flex; gap: 4px; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
nav.top::-webkit-scrollbar { display: none; }
nav.top a { text-decoration: none; color: var(--fg); font-size: 15px; font-weight: 500; padding: 0 12px; min-height: 48px; display: inline-flex; align-items: center; white-space: nowrap; border-radius: var(--r8); box-shadow: inset 0 -3px 0 transparent; }
nav.top a:visited { color: var(--fg); }
nav.top a:hover { background: var(--soft); }
nav.top a[aria-current="page"] { color: var(--key); font-weight: 700; box-shadow: inset 0 -3px 0 var(--key); border-radius: var(--r8) var(--r8) 0 0; }
@media (min-width: 720px) {
  header.site .wrap { flex-wrap: nowrap; }
  nav.top { width: auto; margin-left: auto; align-self: stretch; order: 2; }
  .theme-toggle { margin-left: 8px; order: 3; }
}

/* ---------- 本文の骨 ---------- */
main { padding: 0 0 48px; }
.crumbs { margin: 0; padding: 12px 0 0; font-size: 14px; color: var(--muted); }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 0; }
.crumbs li + li::before { content: "›"; margin: 0 8px; color: var(--rule); }
.crumbs a { color: var(--muted); }
.crumbs [aria-current] { color: var(--fg); }
.page-head { padding: 20px 0 8px; display: grid; gap: 4px; }
.page-head .eyebrow { font-size: 14px; font-weight: 700; color: var(--key); letter-spacing: .06em; }
.page-head .status { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; color: var(--muted); background: var(--soft); border-radius: 999px; padding: 0 10px; min-height: 28px; vertical-align: middle; margin-left: 8px; }
section.sec { padding: 28px 0 8px; }
section.sec > h2 { margin-bottom: 12px; }
section.sec > h2 + .note { margin-top: -4px; margin-bottom: 12px; }
.band { padding: 24px 0 8px; margin-top: 8px; }
.band h2 { margin-bottom: 12px; }
.band .note { margin-top: 12px; }

/* 注意の帯（白い面。アイコン＋題名＋本文） */
.banner { display: grid; grid-template-columns: 24px 1fr; gap: 4px 10px; border-radius: var(--r14); padding: 12px 16px; margin: 16px 0 0; background: var(--surface); }
.banner svg { width: 24px; height: 24px; grid-row: span 2; color: var(--muted); }
.banner .t { font-weight: 700; color: var(--ink); }
.banner .b { font-size: 14px; color: var(--muted); grid-column: 2; }

/* ---------- 大きな数字（事実だけ。白い面で分ける） ---------- */
.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 600px) { .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } .stats.three { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.stat { background: var(--surface); border-radius: var(--r14); padding: 14px 16px 12px; display: grid; gap: 2px; align-content: start; min-width: 0; }
.stat .k { font-size: 14px; color: var(--muted); font-weight: 500; line-height: 1.4; }
.stat .v { font-size: 28px; font-weight: 900; line-height: 1.2; letter-spacing: 0; color: var(--ink); margin-top: 4px; overflow-wrap: anywhere; }
.stat .v small { font-size: 14px; font-weight: 500; color: var(--muted); margin-left: 3px; }
.stat .d { font-size: 14px; color: var(--fg); line-height: 1.4; margin-top: 2px; display: block; }
.stat .d .delta { font-weight: 700; }
.stat .s { font-size: 13px; color: var(--muted); line-height: 1.4; margin-top: 4px; }
@media (min-width: 600px) { .stat .v { font-size: 32px; } }
.stat.hero { grid-column: 1 / -1; }
@media (min-width: 600px) { .stats.with-hero { grid-template-columns: 1.6fr 1fr 1fr 1fr; } .stat.hero { grid-column: auto; } .stat.hero .v { font-size: 40px; } }

/* ---------- 目次・入口（白いカード。線なし） ---------- */
.toc { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 10px; }
@media (min-width: 600px) { .toc { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.toc a { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: center; background: var(--surface); border-radius: var(--r14); padding: 14px 16px; text-decoration: none; color: var(--fg); min-height: 72px; }
.toc a:visited { color: var(--fg); }
.toc a:hover { box-shadow: 0 0 0 2px var(--key); }
.toc .k { font-weight: 700; font-size: 16px; line-height: 1.4; color: var(--ink); }
.toc .v { font-size: 14px; color: var(--muted); grid-column: 1; }
.toc .spark { grid-row: 1 / span 2; grid-column: 2; width: 84px; height: 32px; }
.spark .ln { stroke-width: 1.5; }
.toc.entry .k { font-size: 17px; }
.tag { display: inline-block; font-size: 12px; font-weight: 700; padding: 0 8px; line-height: 22px; border-radius: 999px; background: var(--soft); color: var(--muted); white-space: nowrap; vertical-align: middle; }

/* ---------- 図（白いカード） ---------- */
figure.chart { margin: 14px 0 0; padding: 18px 18px 14px; background: var(--surface); border-radius: var(--r14); }
figure.chart figcaption { display: grid; gap: 2px; margin-bottom: 8px; }
figure.chart figcaption .t { font-weight: 700; font-size: 18px; line-height: 1.5; color: var(--ink); }
figure.chart figcaption .d { color: var(--muted); font-size: 14px; }
figure.chart figcaption .u { color: var(--muted); font-size: 14px; }
.ch { display: block; width: 100%; }
.ch svg { display: block; width: 100%; height: auto; overflow: visible; }
.ch-l { display: none; }
@media (min-width: 600px) { .ch-s { display: none; } .ch-l { display: block; max-width: 640px; } }
figure.chart .source { font-size: 14px; color: var(--muted); margin-top: 10px; line-height: 1.6; max-width: 40em; }
figure.chart .source .notes { display: block; margin-top: 4px; }
svg text { font-family: var(--font); }
.axis text { font-size: 12px; fill: var(--muted); }
.axis line { stroke: var(--rule); stroke-width: 1; }
.axis .unit { fill: var(--muted); }
.grid line { stroke: var(--grid); stroke-width: 1; }
.lbl { font-size: 12px; fill: var(--fg); }
.lbl.m { fill: var(--muted); }
.dl { font-size: 13px; font-weight: 700; fill: var(--ink); paint-order: stroke; stroke: var(--surface); stroke-width: 3px; stroke-linejoin: round; }
.dl.m { font-weight: 500; fill: var(--muted); }
.ln { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.ln.s1 { stroke: var(--s1); } .ln.s2 { stroke: var(--s2); } .ln.gray { stroke: var(--rule); stroke-width: 1.5; }
.dot.gray { fill: var(--rule); }
.gs.s1 { stop-color: var(--s1); } .gs.s2 { stop-color: var(--s2); }
.area { pointer-events: none; }
.dot { stroke: var(--surface); stroke-width: 2; }
.dot.hi { fill: var(--hi); } .dot.s1 { fill: var(--s1); } .dot.s2 { fill: var(--s2); }
.f-s1 { fill: var(--s1); } .f-s2 { fill: var(--s2); } .f-hi { fill: var(--hi); } .f-gray { fill: var(--rule); }
.f-o1 { fill: var(--o1); } .f-o2 { fill: var(--o2); } .f-o3 { fill: var(--o3); }
.target { fill: none; stroke: var(--target); stroke-width: 1.5; stroke-dasharray: 4 3; stroke-linejoin: round; }
.target.v2 { stroke-dasharray: 1.5 2.5; stroke-width: 2; }
.ref { stroke: var(--rule); stroke-width: 1; stroke-dasharray: 2 3; }
.key { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 14px; color: var(--muted); margin: 6px 0 0; }
.key span { display: inline-flex; align-items: center; gap: 6px; }
.key i { display: inline-block; width: 14px; height: 10px; border-radius: 2px; }
.key i.fill { background: var(--s1); }
.key i.outline { border: 1.5px dashed var(--target); background: transparent; }
.key i.outline.v2 { border-style: dotted; }

/* ---------- 表（罫線は行の区切りだけ・うすく） ---------- */
.tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 12px 0 0; padding: 0; }
table { border-collapse: collapse; width: 100%; font-size: 14px; line-height: 1.5; }
caption { text-align: left; font-weight: 700; padding: 0 0 6px; font-size: 16px; color: var(--ink); }
th, td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; vertical-align: top; }
thead th { border-bottom: 1px solid var(--rule); font-weight: 700; font-size: 14px; color: var(--ink); background: transparent; }
td.n, th.n { text-align: right; }
table.wrap-first td:first-child, table.wrap-first th:first-child { white-space: normal; min-width: 11em; }
tr.hl td { background: var(--key-50); font-weight: 700; }
tr.sub td { color: var(--muted); }

/* ---------- 折りたたみ（白い面・線なし。押す所は 48px） ---------- */
details { margin: 12px 0 0; background: var(--surface); border-radius: var(--r12); padding: 0 16px; }
details[open] { padding-bottom: 12px; }
summary { cursor: pointer; font-weight: 700; color: var(--ink); min-height: 48px; display: flex; align-items: center; list-style: none; }
summary::-webkit-details-marker { display: none; }
summary::before { content: ""; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); margin-right: 10px; transition: transform .15s; flex: none; }
details[open] summary::before { transform: rotate(45deg); }
details.more > summary, details.src > summary { font-size: 15px; }
details.src { background: var(--bg); margin-top: 8px; }
details.src > summary { font-size: 14px; font-weight: 500; color: var(--muted); }
details .body { font-size: 14px; color: var(--muted); display: grid; gap: 8px; }
details .body p, details .body ul { margin: 0; }
details .body .tbl-wrap { margin-top: 0; }
figure.chart .source + details.src { margin-top: 4px; }

/* ---------- ことばの説明（まどさんの吹き出し。「？ ○○とは」の札を押すと開く。JS なし） ---------- */
.kotoba { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 14px 0 0; }
.kotoba details { margin: 0; padding: 0; background: transparent; border-radius: 0; }
.kotoba details[open] { padding: 0; flex: 1 1 100%; }
.kotoba summary { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 16px 0 8px; font-size: 15px; font-weight: 500; color: var(--key); background: var(--surface); border-radius: 999px; }
.kotoba summary::before { display: none; }
.kotoba summary b { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--key-50); font-size: 14px; font-weight: 700; flex: none; }
.kotoba details[open] summary b { background: var(--key); color: #ffffff; }
:root[data-theme="dark"] .kotoba details[open] summary b { color: #131419; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .kotoba details[open] summary b { color: #131419; } }
.guide { display: grid; grid-template-columns: 56px 1fr; gap: 12px; align-items: start; margin-top: 4px; }
.guide .chara { width: 56px; height: 56px; }
.guide.cont { grid-template-columns: 1fr; padding-left: 68px; }
.guide.cont .bub::before { display: none; }
.guide .bub { background: var(--surface); border-radius: 16px; padding: 12px 16px; position: relative; font-size: 15px; line-height: 1.7; color: var(--fg); max-width: 36em; }
.guide .bub::before { content: ""; position: absolute; left: -8px; top: 20px; border: 8px solid transparent; border-right-color: var(--surface); border-left: 0; }
.chara-bg { fill: var(--surface); } .chara-ink { stroke: var(--ink); } .chara-pane { stroke: var(--il-window); } .chara-eye { fill: var(--ink); } .chara-cheek { fill: var(--t-iryo); }

/* ---------- 第2部の施策カード（白いカード） ---------- */
.plan { border-radius: var(--r14); padding: 18px; margin-top: 14px; background: var(--surface); }
.plan .head { display: grid; gap: 2px; margin-bottom: 4px; }
.plan .head .eyebrow { font-size: 13px; color: var(--muted); font-weight: 700; letter-spacing: .04em; }
.plan .head h3 { font-size: 18px; }
.plan .head .d { font-size: 14px; color: var(--muted); }
.plan figure.chart { margin-top: 12px; padding: 12px 0 0; background: transparent; border-radius: 0; }
.plan figure.chart figcaption .t { font-size: 16px; }
.plan .vers { display: grid; gap: 4px; font-size: 14px; color: var(--muted); margin-top: 8px; }
.plan .vers b { color: var(--fg); }
.plan .tbl-wrap { margin-left: 0; margin-right: 0; padding: 0; }
.plan .ind { padding-top: 4px; }
.plan .ind + .ind { margin-top: 24px; }
.plan h4 { font-size: 16px; }
.plan .head { margin-bottom: 0; }
.plan details.more, .plan details.src { background: var(--bg); margin-top: 8px; }
.plan .fixed-note { margin-top: 8px; }
.plan h4.q { font-size: 17px; margin: 24px 0 6px; }
.plan .plan-ind-list { font-size: 14px; color: var(--muted); }
.plan .info { background: var(--bg); }
.quotes { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 0; }
.quotes li { display: grid; grid-template-columns: 5.5em 1fr; gap: 2px 12px; padding: 8px 0; font-size: 14px; }
.quotes .fy { font-weight: 700; color: var(--key); grid-row: span 2; padding-top: 2px; }
.quotes .q { color: var(--fg); line-height: 1.6; }
.quotes .src { color: var(--muted); font-size: 13px; }
.plan .ind > .note b { color: var(--fg); }

/* ---------- 前後・足元 ---------- */
.pager { display: grid; gap: 8px; margin-top: 32px; padding-top: 8px; }
@media (min-width: 600px) { .pager { grid-template-columns: 1fr 1fr; } }
.pager a { display: grid; gap: 2px; text-decoration: none; color: var(--fg); background: var(--surface); border-radius: var(--r12); padding: 10px 16px; min-height: 56px; align-content: center; }
.pager a:visited { color: var(--fg); }
.pager a:hover { box-shadow: 0 0 0 2px var(--key); }
.pager a .k { font-size: 13px; color: var(--muted); }
.pager a .t { font-weight: 700; font-size: 15px; color: var(--ink); }
.pager a.next { text-align: right; }
@media (max-width: 599px) { .pager a.next { text-align: left; } }
footer.site { padding: 24px 0 40px; color: var(--muted); font-size: 14px; }
footer.site .wrap { display: grid; gap: 8px; }
footer.site b { color: var(--fg); }

/* ---------- 見えたときの動き（JS と motion が有るときだけ。無ければ最初から全部見える） ---------- */
html.js.motion [data-reveal] { transition: opacity .55s cubic-bezier(.05,.7,.1,1), transform .55s cubic-bezier(.05,.7,.1,1); }
html.js.motion [data-reveal]:not(.in) { opacity: 0; transform: translateY(14px); }
html.js.motion .grow { transform-box: fill-box; transform-origin: 50% 100%; transition: transform .6s cubic-bezier(.05,.7,.1,1) calc(var(--i, 0) * 22ms); }
html.js.motion .grow.neg { transform-origin: 50% 0; }
html.js.motion .grow-x { transform-box: fill-box; transform-origin: 0 50%; transition: transform .6s cubic-bezier(.05,.7,.1,1) calc(var(--i, 0) * 30ms); }
html.js.motion .grow-x.from-r { transform-origin: 100% 50%; }
html.js.motion [data-reveal]:not(.in) .grow { transform: scaleY(0); }
html.js.motion [data-reveal]:not(.in) .grow-x { transform: scaleX(0); }
html.js.motion .ln { transition: stroke-dashoffset 1.3s cubic-bezier(.05,.7,.1,1) .1s; stroke-dasharray: 1; stroke-dashoffset: 0; }
html.js.motion [data-reveal]:not(.in) .ln { stroke-dashoffset: 1; }
html.js.motion .late, html.js.motion .area { transition: opacity .5s ease .9s; }
html.js.motion [data-reveal]:not(.in) .late, html.js.motion [data-reveal]:not(.in) .area { opacity: 0; }
html.js.motion .pi { transition: opacity .35s ease calc(var(--i, 0) * 14ms), transform .35s cubic-bezier(.05,.7,.1,1) calc(var(--i, 0) * 14ms); }
html.js.motion [data-reveal]:not(.in) .pi { opacity: 0; transform: scale(.5); }
@media (prefers-reduced-motion: reduce) { html.js [data-reveal], html.js .grow, html.js .grow-x, html.js .ln, html.js .late, html.js .area, html.js .pi { opacity: 1 !important; transform: none !important; stroke-dashoffset: 0 !important; transition: none !important; } }

/* ---------- 挿絵（案Cの調子の、1画面目の小さな絵と、ページの小さな絵） ---------- */
.first-pic { margin: 12px 0 0; border-radius: var(--r14); overflow: hidden; background: var(--surface); }
.first-pic svg { display: block; width: 100%; height: 96px; }
@media (min-width: 600px) { .first-pic { max-width: 400px; } .first-pic svg { height: 200px; } }
.pic-hill { fill: var(--il-hill); } .pic-line { fill: none; stroke: var(--il-ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.pic-wall { fill: var(--il-wall); stroke: var(--il-ink); stroke-width: 3; stroke-linejoin: round; }
.pic-apple { fill: var(--il-apple); } .pic-leaf { fill: var(--il-leaf); } .pic-stalk { fill: none; stroke: var(--il-ink); stroke-width: 3; stroke-linecap: round; }
.pic-dot { fill: var(--il-dot); stroke: var(--il-ink); stroke-width: 1.5; }
.il-sun { fill: var(--il-sun); } .il-snow { fill: var(--il-snow); }
.il-leaf { fill: var(--il-leaf); } .il-trunk { fill: var(--il-trunk); } .il-apple { fill: var(--il-apple); } .il-wall { fill: var(--il-wall); stroke: var(--il-ink); stroke-width: 1.5; stroke-linejoin: round; } .il-roof { fill: var(--il-roof); } .il-sakura { fill: var(--il-sakura); }
.il-coin { fill: var(--il-coin); } .il-wood { fill: var(--il-wood); } .il-door { fill: var(--il-door); } .il-window { fill: var(--il-window); }
.il-snowflake { stroke: var(--s1); } .il-person { fill: var(--s1); } .il-person2 { fill: var(--s2); } .il-arrow { stroke: var(--s1); } .il-arrow2 { stroke: var(--s2); }
.il-o1 { fill: var(--o1); } .il-o2 { fill: var(--o2); } .il-o3 { fill: var(--o3); }
.motif { width: 56px; height: 56px; flex: none; border-radius: 16px; padding: 6px; background: var(--t-yuki); }
.m-people { background: var(--t-kosodate); } .m-move { background: var(--t-kotsu); } .m-ages { background: var(--t-machi); } .m-house { background: var(--t-okane); }
.m-crate { background: var(--t-bousai); } .m-apple { background: var(--t-iryo); } .m-castle { background: var(--t-yuki); }
.page-head { grid-template-columns: 1fr auto; align-items: center; }
.page-head .eyebrow, .page-head h1, .page-head .lead { grid-column: 1; }
.page-head .motif { grid-column: 2; grid-row: 1 / span 3; width: 64px; height: 64px; }
@media (min-width: 600px) { .page-head .motif { width: 80px; height: 80px; padding: 8px; } }

/* ---------- 絵文字（ピクトグラム）・100人・白い面の囲み ---------- */
.pi { width: 14px; height: 14px; display: inline-block; vertical-align: middle; }
.pi.s1 { fill: var(--s1); } .pi.s2 { fill: var(--s2); } .pi.gray { fill: var(--rule); } .pi.hi { fill: var(--hi); }
.pi.o1 { fill: var(--o1); } .pi.o2 { fill: var(--o2); } .pi.o3 { fill: var(--o3); }
.pi.frac { clip-path: inset(0 calc(100% - var(--f, 50%)) 0 0); }
.irow { display: inline-flex; flex-wrap: wrap; gap: 2px; max-width: 100%; }
.irow .pi { width: 16px; height: 16px; }
.sprite { display: none; }
.hundred { display: grid; grid-template-columns: repeat(var(--cols, 10), 1fr); gap: 3px; width: min(100%, 260px); }
.hundred .pi { width: 100%; height: auto; aspect-ratio: 1; }
.info { border-radius: var(--r14); padding: 18px; margin-top: 14px; background: var(--surface); display: grid; gap: 10px; }
.info .h { font-weight: 700; font-size: 18px; line-height: 1.4; color: var(--ink); }
.info .sub { font-size: 14px; color: var(--muted); }
.info .legend { display: grid; gap: 6px; font-size: 14px; }
.info .legend li { display: grid; grid-template-columns: 16px 1fr auto; gap: 8px; align-items: center; list-style: none; }
.info .legend ul { margin: 0; padding: 0; }
.info .legend .sw { width: 14px; height: 14px; border-radius: 3px; }
.info .legend .n { font-weight: 700; }
.info .two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.info .two .cap { font-size: 14px; font-weight: 700; margin-bottom: 6px; }
.rows { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.rows li { display: grid; grid-template-columns: 4.5em 1fr; gap: 2px 10px; align-items: start; font-size: 14px; }
.rows .k { font-weight: 700; padding-top: 1px; }
.rows .n { font-weight: 700; font-size: 16px; }
.rows .n small { font-weight: 500; color: var(--muted); font-size: 13px; margin-left: 2px; }
.house { display: grid; gap: 6px; justify-items: center; }
.house .pi { width: 64px; height: 64px; }
.house .ppl .pi { width: 22px; height: 22px; }

/* ---------- あなたなら（年代を選ぶ・生まれた年を入れる・家の人数を選ぶ。JS が無いときは表が開いたまま見える） ---------- */
.anata { display: grid; gap: 12px; }
.anata-pick[hidden] { display: none; }
.anata-pick { border: 0; margin: 0; padding: 0; min-width: 0; }
.anata-pick legend, .anata-form > label { display: block; padding: 0; margin-bottom: 8px; font-weight: 700; color: var(--ink); line-height: 1.5; }
.anata-choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 600px) { .anata-choices { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.anata-choices label { display: block; }
.anata-choices input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.anata-choices span { display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 4px 8px; border-radius: var(--r12); background: var(--soft); color: var(--ink); font-weight: 700; text-align: center; cursor: pointer; }
.anata-choices span:hover { background: var(--key-100); }
.anata-choices input:checked + span { background: var(--key); color: #ffffff; }
.anata-choices input:focus-visible + span { outline: 4px solid var(--focus-outline); outline-offset: 2px; box-shadow: 0 0 0 7px var(--focus); }
:root[data-theme="dark"] .anata-choices input:checked + span, :root[data-theme="dark"] .anata-field button { color: #131419; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .anata-choices input:checked + span, :root:not([data-theme="light"]) .anata-field button { color: #131419; } }
.anata-field { display: flex; gap: 8px; }
.anata-field input { flex: 1 1 auto; min-width: 0; min-height: 48px; padding: 0 14px; border: 2px solid var(--rule); border-radius: var(--r12); background: var(--surface); color: var(--ink); font: inherit; font-size: 18px; }
.anata-field button { flex: none; min-height: 48px; padding: 0 20px; border: 0; border-radius: var(--r12); background: var(--key); color: #ffffff; font-weight: 700; cursor: pointer; }
.anata-field button:hover { background: var(--key-hover); }
.anata-out { display: grid; gap: 10px; }
.anata-out:empty, .anata-mine:empty { display: none; }
.anata-sum { color: var(--ink); line-height: 1.7; }
.anata-sum b { font-size: 1.5rem; font-weight: 900; margin: 0 .15em; }
.anata-msg { padding: 12px 14px; border-radius: var(--r12); background: var(--key-50); color: var(--ink); font-weight: 700; }
.anata .stat { background: var(--soft); }
.anata-table th, .anata-table td { padding: 8px 6px; }
.anata-table th[scope="row"] { font-weight: 500; white-space: nowrap; }
.anata-table table.anata-birth th[scope="row"] { white-space: normal; }
.anata-table caption { text-align: left; font-size: 14px; font-weight: 700; color: var(--ink); padding: 0 0 6px; }
.anata-range { margin: -4px 0 12px; font-size: 17px; color: var(--ink); }
.anata-range b { display: inline-block; padding: 2px 10px; border-radius: var(--r8); background: var(--key-50); color: var(--ink); font-weight: 900; }
.anata-nosend[hidden] { display: none; }
.anata-month { display: grid; gap: 4px; margin-top: 10px; }
.anata-month label { font-weight: 700; color: var(--ink); }
.anata-month select { min-height: 48px; padding: 0 12px; border: 2px solid var(--rule); border-radius: var(--r12); background: var(--surface); color: var(--ink); font: inherit; font-size: 16px; max-width: 14em; }
.anata-basis { color: var(--fg); }
.anata-table td.anata-memo { white-space: normal; min-width: 12em; font-size: 13px; color: var(--muted); }
.anata-house { display: grid; grid-template-columns: 1fr; gap: 12px; }
.anata.picked .anata-house { grid-template-columns: 1fr 1fr; }
.anata-house .house { align-content: start; }
.info .source { font-size: 13px; color: var(--muted); }
figure.panel { margin: 14px 0 0; }
figure.panel .source { font-size: 14px; color: var(--muted); margin-top: 8px; line-height: 1.6; }

/* ---------- チップ（施策の切り替え。選んだものだけ青） ---------- */
.chips { position: sticky; top: 64px; z-index: 4; background: var(--bg); margin: 8px calc(-1 * max(16px, env(safe-area-inset-left, 0px))) 0; padding: 6px max(16px, env(safe-area-inset-left, 0px)); }
.chips ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.chips ul::-webkit-scrollbar { display: none; }
.chips a { display: inline-flex; align-items: center; min-height: 48px; padding: 0 16px; border-radius: 999px; text-decoration: none; color: var(--fg); font-size: 14px; font-weight: 500; white-space: nowrap; background: var(--surface); }
.chips a:visited { color: var(--fg); }
.chips a[aria-current="true"] { background: var(--key); color: #ffffff; }
:root[data-theme="dark"] .chips a[aria-current="true"] { color: #131419; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .chips a[aria-current="true"] { color: #131419; } }
.tip { position: fixed; z-index: 20; background: var(--fg); color: var(--bg); font-size: 14px; line-height: 1.4; padding: 6px 10px; border-radius: var(--r8); pointer-events: none; max-width: 80vw; box-shadow: 0 2px 8px rgba(0,0,0,.2); }
.tip[hidden] { display: none; }

/* 第2部の引用・時系列 */
.qt { list-style: none; margin: 0; padding: 0; display: grid; }
.qt li { display: grid; grid-template-columns: 1fr; gap: 2px; padding: 10px 0; font-size: 15px; position: relative; }
.qt li + li { border-top: 1px solid var(--line); }
.qt .fy { font-weight: 700; color: var(--key); }
.qt .nx { font-size: 12px; color: var(--muted); grid-column: 1; line-height: 1.4; }
.qt .nx b { color: var(--fg); font-weight: 700; display: block; font-size: 14px; }
.qt .q { grid-column: 1; color: var(--fg); line-height: 1.5; }
.qt .q a { font-size: 12px; color: var(--muted); margin-left: 4px; white-space: nowrap; }
.qt blockquote { margin: 2px 0; padding: 0 0 0 12px; border-left: 3px solid var(--key-100); color: var(--fg); line-height: 1.7; }
.qt cite { font-style: normal; font-size: 13px; color: var(--muted); line-height: 1.5; }
.qt cite a { font-size: 13px; color: var(--link); margin-left: 0; white-space: normal; }
.tl-ind { margin-top: 6px; }
.tl-ind + .tl-ind { margin-top: 12px; padding-top: 6px; }
.tl-ind .n { font-size: 14px; font-weight: 700; color: var(--ink); }
.sm { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 8px; }
.sm .lbl-h { font-size: 14px; font-weight: 700; margin: 0 0 -4px 4px; }
.panel.quotes .h { font-weight: 700; margin-bottom: 4px; }

/* 議会の窓に組み込んだとき（/hirosaki/toukei/ など）の上の帯。色は議会の窓の青 */
.gm-bar { background: var(--gm); color: var(--gm-fg); }
.gm-bar .wrap { display: flex; align-items: center; gap: 8px; min-height: 48px; flex-wrap: wrap; }
.gm-brand { display: inline-flex; align-items: center; gap: 8px; color: var(--gm-fg); text-decoration: none; font-weight: 700; min-height: 48px; }
.gm-brand:visited, .gm-brand:hover { color: var(--gm-fg); }
.gm-brand svg { width: 22px; height: 22px; }
.gm-here { font-size: 14px; }

/* ---------- 市民目線（問いの見出し・縦並び・最初の画面） ---------- */
.first { padding: 8px 0 0; display: grid; gap: 6px; }
.first .headline { font-size: 22px; font-weight: 700; line-height: 1.5; color: var(--ink); max-width: 28em; }
@media (min-width: 600px) { .first .headline { font-size: 28px; } }
.fixed-note { display: grid; gap: 2px; margin: 0 0 4px; padding: 12px 16px; background: var(--surface); border-radius: var(--r12); font-size: 14px; line-height: 1.6; color: var(--muted); }
.fixed-note b { color: var(--ink); }
.sec.figs figure.chart:first-of-type { margin-top: 12px; }
.qcards { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
.qcards a { display: grid; gap: 2px; background: var(--surface); border-radius: var(--r14); padding: 12px 16px; text-decoration: none; color: var(--fg); min-height: 56px; align-content: center; }
.qcards a:visited { color: var(--fg); }
.qcards a:hover { box-shadow: 0 0 0 2px var(--key); }
.qcards .k { font-weight: 700; font-size: 16px; line-height: 1.5; color: var(--ink); }
.qcards .v { font-size: 14px; color: var(--link); text-decoration: underline; text-underline-offset: 3px; }
.qlink .note { margin-top: 8px; }
@media (max-width: 480px) { .page-head { grid-template-columns: 1fr; } .page-head .motif { display: none; } }
/* トップの一文の「時点と土台」は畳む（最初の1画面に入口を入れるため） */
.first-note { background: none; padding: 0; margin-top: 4px; }
.first-note summary { font-weight: 500; font-size: 14px; color: var(--muted); }