/* 統計で見る弘前（非公式）
   色・文字の値はデジタル庁デザインシステム（@digital-go-jp/design-tokens 2.1.0）の原色スケールから取る。
   主色は議会の窓と同じ blue（議会の窓の一区画としてそろえる）。図の系列色は docs/design_basis.md の検証済みの組（主色とは別に、そのまま）。
   check.mjs が :root と :root[data-theme="dark"] のトークンのコントラストを機械的に確かめる。 */
:root {
  color-scheme: light;
  /* 面・文字: solid-gray-50/100/200/536/800 */
  --bg: #ffffff; --surface: #ffffff; --band: #e8f1fe; --soft: #f2f2f2;
  --fg: #333333; --muted: #666666; --line: #cccccc; --rule: #949494; --grid: #e6e6e6;
  /* 主色: blue-900（文字・現在地）blue-1000（hover・リンク）blue-50/100（帯・淡い面）。議会の窓の style.css と同じ値 */
  --key: #0017c1; --key-hover: #00118f; --key-50: #e8f1fe; --key-100: #d9e6ff; --link: #00118f; --visited: #8b008b;
  /* 議会の窓の帯（組み込むとき）: 議会の窓の主色 blue-900 と白 */
  --gm: #0017c1; --gm-fg: #ffffff;
  /* 図の系列: 実績・主系列 green-700 / 第2系列 light-blue-800 / 最新値 orange-700 / 目標の輪郭 solid-gray-600 */
  --s1: #1d8b56; --s2: #0066be; --hi: #e25100; --target: #666666;
  /* 順序のある3区分（年齢）: green-300/600/900 */
  --o1: #71c598; --o2: #259d63; --o3: #115a36;
  /* 淡い塗り（折れ線の下の面など）: green-100 */
  --s1-soft: #c2e5d1; --s2-soft: #c0e4ff;
  /* 挿絵（自作SVG）の色。装飾なのでコントラストの検査対象外 */
  --il-sky1: #eaf6ff; --il-sky2: #ffffff; --il-sun: #ffe08a; --il-far: #9bd4b5; --il-snow: #ffffff; --il-mid: #51b883; --il-near: #259d63;
  --il-leaf: #197a4b; --il-trunk: #8a6a4a; --il-apple: #e25100; --il-wall: #f2f2f2; --il-roof: #4d4d4d; --il-sakura: #f6c9d8; --il-coin: #ffd43d; --il-wood: #d9b98f; --il-door: #8a6a4a; --il-window: #c0e4ff;
  --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;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #1a1a1a; --surface: #1a1a1a; --band: #000060; --soft: #262626;
    --fg: #f2f2f2; --muted: #b3b3b3; --line: #4d4d4d; --rule: #7f7f7f; --grid: #333333;
    --key: #9db7f9; --key-hover: #c5d7fb; --key-50: #000060; --key-100: #000082; --link: #9db7f9; --visited: #d9b8e8;
    --gm: #00118f; --gm-fg: #ffffff;
    --s1: #2cac6e; --s2: #008bf2; --hi: #e25100; --target: #b3b3b3;
    --o1: #c2e5d1; --o2: #51b883; --o3: #1d8b56;
    --s1-soft: #0c472a; --s2-soft: #00316a;
    --il-sky1: #0b1f33; --il-sky2: #1a1a1a; --il-sun: #ffd43d; --il-far: #0c472a; --il-snow: #e6e6e6; --il-mid: #115a36; --il-near: #197a4b;
    --il-leaf: #2cac6e; --il-trunk: #a88665; --il-apple: #ff7a3d; --il-wall: #b3b3b3; --il-roof: #e6e6e6; --il-sakura: #d98aa4; --il-coin: #ffd43d; --il-wood: #8a6a4a; --il-door: #4d4d4d; --il-window: #008bf2;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #1a1a1a; --surface: #1a1a1a; --band: #000060; --soft: #262626;
  --fg: #f2f2f2; --muted: #b3b3b3; --line: #4d4d4d; --rule: #7f7f7f; --grid: #333333;
  --key: #9db7f9; --key-hover: #c5d7fb; --key-50: #000060; --key-100: #000082; --link: #9db7f9; --visited: #d9b8e8;
  --gm: #00118f; --gm-fg: #ffffff;
  --s1: #2cac6e; --s2: #008bf2; --hi: #e25100; --target: #b3b3b3;
  --o1: #c2e5d1; --o2: #51b883; --o3: #1d8b56;
  --s1-soft: #0c472a; --s2-soft: #00316a;
  --il-sky1: #0b1f33; --il-sky2: #1a1a1a; --il-sun: #ffd43d; --il-far: #0c472a; --il-snow: #e6e6e6; --il-mid: #115a36; --il-near: #197a4b;
  --il-leaf: #2cac6e; --il-trunk: #a88665; --il-apple: #ff7a3d; --il-wall: #b3b3b3; --il-roof: #e6e6e6; --il-sakura: #d98aa4; --il-coin: #ffd43d; --il-wood: #8a6a4a; --il-door: #4d4d4d; --il-window: #008bf2;
}

/* ---------- 基本 ---------- */
*, *::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 { margin: 0; font-weight: 700; line-height: 1.5; text-wrap: balance; letter-spacing: .01em; }
h1 { font-size: 28px; }
h2 { font-size: 22px; }
h3 { font-size: 18px; }
@media (min-width: 600px) { h1 { font-size: 32px; } h2 { font-size: 24px; } h3 { font-size: 20px; } }
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: 2px solid var(--focus-outline); outline-offset: 2px; box-shadow: 0 0 0 5px 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 { 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; }

/* ---------- 上の帯 ---------- */
header.site { background: var(--surface); border-bottom: 1px solid var(--line); 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(--fg); font-weight: 700; font-size: 18px; letter-spacing: .02em; min-height: 44px; }
.brand:visited, .brand:hover { color: var(--fg); }
.brand .mark { width: 32px; height: 32px; flex: none; }
.brand > span { white-space: nowrap; }
.brand small { font-size: 12px; font-weight: 500; color: var(--muted); margin-left: 6px; }
.theme-toggle { margin-left: auto; white-space: nowrap; min-height: 44px; min-width: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--r8); background: var(--surface); color: var(--fg); font-size: 14px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.theme-toggle:hover { background: var(--soft); }
.theme-toggle svg { width: 18px; height: 18px; }
nav.top { display: flex; gap: 2px; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin-bottom: -9px; }
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: 44px; display: inline-flex; align-items: center; white-space: nowrap; border-bottom: 3px solid transparent; border-radius: var(--r4) var(--r4) 0 0; }
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; border-bottom-color: var(--key); }
@media (min-width: 720px) {
  header.site .wrap { flex-wrap: nowrap; }
  nav.top { width: auto; margin-left: auto; margin-bottom: 0; align-self: stretch; order: 2; }
  nav.top a { min-height: 48px; border-radius: 0; padding: 0 10px; }
  .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); border: 1px solid var(--rule); border-radius: 999px; padding: 0 10px; min-height: 28px; vertical-align: middle; margin-left: 8px; }
section.sec { padding: 28px 0 8px; }
section.sec > h2 { padding-bottom: 8px; border-bottom: 1px solid var(--line); margin-bottom: 12px; }
section.sec > h2 + .note { margin-top: -4px; margin-bottom: 12px; }
.band { background: var(--band); padding: 20px 0 24px; margin-top: 16px; border-top: 1px solid var(--key-100); border-bottom: 1px solid var(--key-100); }
.band h2 { font-size: 16px; color: var(--key); letter-spacing: .04em; margin-bottom: 12px; }
.band .note { margin-top: 12px; }

/* 注意の帯（デジタル庁 通知バナー: アイコン＋題名＋本文。中立の黒／見本は橙） */
.banner { display: grid; grid-template-columns: 24px 1fr; gap: 4px 10px; border: 1px solid var(--rule); border-left-width: 6px; border-radius: var(--r8); padding: 10px 14px; 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; }
.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)); } .stats.three { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r8); padding: 12px 14px 10px; 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: 700; line-height: 1.2; letter-spacing: 0; color: var(--fg); 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; }
.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; } }

/* ---------- 区画の一覧（トップ）・目次 ---------- */
ul.parts { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 12px; }
@media (min-width: 720px) { ul.parts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.part { display: grid; grid-template-columns: 44px 1fr; gap: 2px 12px; align-content: start; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r12); padding: 16px; text-decoration: none; color: var(--fg); min-height: 44px; }
.part:visited { color: var(--fg); }
.part:hover { background: var(--key-50); border-color: var(--key-100); }
.part .no { grid-row: span 3; width: 44px; height: 44px; border-radius: 50%; background: var(--key-50); color: var(--key); font-weight: 700; display: grid; place-items: center; font-size: 15px; border: 1px solid var(--key-100); }
.part h2, .part h3 { font-size: 18px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.part p { font-size: 14px; color: var(--muted); }
.part .go { font-size: 14px; font-weight: 700; color: var(--key); margin-top: 6px; }
.part.soon { background: var(--soft); border-style: dashed; }
.part.soon .no { background: var(--surface); color: var(--muted); border-color: var(--line); }
.tag { display: inline-block; font-size: 12px; font-weight: 700; padding: 0 8px; line-height: 22px; border-radius: 999px; border: 1px solid var(--rule); color: var(--muted); white-space: nowrap; vertical-align: middle; }
.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: 1px solid var(--line); border-radius: var(--r12); padding: 14px 16px; text-decoration: none; color: var(--fg); min-height: 72px; }
.toc a:visited { color: var(--fg); }
.toc a:hover { background: var(--key-50); border-color: var(--key-100); }
.toc .k { font-weight: 700; font-size: 16px; line-height: 1.4; }
.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; }

/* ---------- 図 ---------- */
figure.chart { margin: 20px 0 0; padding: 0 0 20px; border-bottom: 1px solid var(--line); }
figure.chart:last-child { border-bottom: 0; }
figure.chart figcaption { display: grid; gap: 2px; margin-bottom: 8px; }
figure.chart figcaption .t { font-weight: 700; font-size: 18px; line-height: 1.5; }
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(--fg); 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 calc(-1 * max(16px, env(safe-area-inset-left, 0px))) 0; padding: 0 max(16px, env(safe-area-inset-left, 0px)); }
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; }
th, td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; vertical-align: top; }
thead th { border-bottom: 2px solid var(--rule); font-weight: 700; font-size: 14px; color: var(--fg); background: var(--surface); }
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); }
details { margin: 12px 0 0; border: 1px solid var(--line); border-radius: var(--r8); padding: 0 14px; }
details[open] { padding-bottom: 12px; }
summary { cursor: pointer; font-weight: 700; color: var(--key); min-height: 44px; 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; }
details[open] summary::before { transform: rotate(45deg); }

/* ---------- 第2部の施策カード（見本） ---------- */
.plan { border: 1px solid var(--line); border-radius: var(--r12); padding: 16px; margin-top: 16px; 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-bottom: 12px; }
.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 { border-top: 1px solid var(--line); margin-top: 16px; }
.plan h4 { font-size: 16px; }
.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; border-bottom: 1px solid var(--line); font-size: 14px; }
.quotes li:last-child { border-bottom: 0; }
.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); }
.placeholder { border: 1px dashed var(--rule); border-radius: var(--r12); padding: 16px; margin-top: 16px; }

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

/* ---------- v3: カルーセル（横の動き） ---------- */
.carousel { position: relative; margin-top: 12px; }
.track { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: calc(100% - 44px); gap: 12px; align-items: start; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 0; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding: 2px 0 6px; outline-offset: 4px; }
.track::-webkit-scrollbar { display: none; }
.track > .slide { scroll-snap-align: start; min-width: 0; }
.track > .slide:last-child { scroll-snap-align: end; }
.carousel.ready .track { overflow-y: hidden; transition: height .35s cubic-bezier(.2,0,0,1); }
@media (prefers-reduced-motion: reduce) { .carousel.ready .track { transition: none; } }
.carousel.cards .track { grid-auto-columns: min(86%, 320px); }
.carousel.parts .track { grid-auto-columns: min(86%, 340px); }
@media (min-width: 600px) { .track { grid-auto-columns: calc(100% - 64px); } .carousel.cards .track { grid-auto-columns: 300px; } .carousel.parts .track { grid-auto-columns: 340px; } }
/* 広い画面では3つの区画が1列に収まるので、めくらずに全部並べる */
@media (min-width: 900px) { .carousel.parts .track { grid-auto-columns: calc((100% - 24px) / 3); height: auto !important; align-items: stretch; } .carousel.parts .ctrl { display: none; } }
.ctrl { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.ctrl button { min-width: 44px; min-height: 44px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--fg); cursor: pointer; display: inline-grid; place-items: center; padding: 0; }
.ctrl button svg { width: 20px; height: 20px; }
.ctrl button:hover:not(:disabled) { background: var(--key-50); border-color: var(--key-100); }
.ctrl button:disabled { opacity: .35; cursor: default; }
.ctrl .dots { display: flex; gap: 2px; margin: 0 auto; }
.ctrl .dots button { min-width: 28px; min-height: 28px; width: 28px; height: 28px; border: 0; background: transparent; position: relative; }
.ctrl .dots button::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--rule); transition: transform .2s, background .2s; }
.ctrl .dots button[aria-selected="true"]::after { background: var(--key); transform: scale(1.35); }
.ctrl .pos { font-size: 14px; color: var(--muted); min-width: 3.5em; text-align: center; }
.carousel:not(.ready) .ctrl .prev, .carousel:not(.ready) .ctrl .next, .carousel.single .ctrl { display: none; }
.carousel:not(.ready) .ctrl { justify-content: center; }
.slide figure.chart { margin-top: 0; border-bottom: 0; padding-bottom: 8px; }
.slide figure.chart figcaption .t { font-size: 16px; }
.slide .ch-l { max-width: none; }
.carousel .swipe-hint { font-size: 13px; color: var(--muted); margin-top: 2px; }

/* ---------- v3: 見えたときの動き（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); }
html.js.motion .il-tree { transition: transform .5s cubic-bezier(.05,.7,.1,1) calc(var(--i, 0) * 50ms); }
@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; } }

/* ---------- v3: 挿絵 ---------- */
.hero { position: relative; margin: 12px calc(-1 * max(16px, env(safe-area-inset-left, 0px))) 0; overflow: hidden; border-bottom: 1px solid var(--key-100); }
.hero-art { display: block; width: 100%; height: 200px; }
@media (min-width: 600px) { .hero-art { height: 280px; } .hero { border-radius: var(--r12); margin-inline: 0; border: 1px solid var(--key-100); } }
.il-sky1 { stop-color: var(--il-sky1); } .il-sky2 { stop-color: var(--il-sky2); }
.il-sun { fill: var(--il-sun); } .il-far { fill: var(--il-far); } .il-snow { fill: var(--il-snow); } .il-mid { fill: var(--il-mid); } .il-near { fill: var(--il-near); }
.il-leaf { fill: var(--il-leaf); } .il-trunk { fill: var(--il-trunk); } .il-apple { fill: var(--il-apple); } .il-wall { fill: var(--il-wall); } .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(--s2); } .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; }
.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; } }

/* ---------- v3: 数字カード（カルーセルの中）・絵文字 ---------- */
.ncard { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r12); padding: 14px 16px 12px; display: grid; gap: 2px; min-height: 100%; }
.ncard .k { font-size: 14px; color: var(--muted); font-weight: 500; }
.ncard .v { font-size: 38px; font-weight: 700; line-height: 1.15; letter-spacing: -.01em; margin-top: 2px; }
.ncard .v small { font-size: 14px; font-weight: 500; color: var(--muted); margin-left: 4px; }
.ncard .d { font-size: 14px; color: var(--fg); }
.ncard .d .delta { font-weight: 700; }
.ncard .spark { width: 100%; height: 44px; margin-top: 6px; }
.ncard .s { font-size: 13px; color: var(--muted); margin-top: 2px; }
.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: 1px solid var(--line); border-radius: var(--r12); padding: 16px; margin-top: 12px; background: var(--surface); display: grid; gap: 10px; }
.info .h { font-weight: 700; font-size: 18px; line-height: 1.4; }
.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; }
.info .source { font-size: 13px; color: var(--muted); }
figure.panel { margin: 0; }
figure.panel .source { font-size: 14px; color: var(--muted); margin-top: 8px; line-height: 1.6; }

/* ---------- v3: 折りたたみ・チップ・吹き出し ---------- */
details.more, details.src { border: 0; border-top: 1px solid var(--line); border-radius: 0; padding: 0; margin-top: 8px; }
details.more[open], details.src[open] { padding-bottom: 8px; }
details.more > summary, details.src > summary { min-height: 44px; font-size: 15px; }
details.src > summary { font-size: 14px; font-weight: 500; }
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 { margin-top: 8px; }
figure.chart .source + details.src { margin-top: 4px; }
.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)); border-bottom: 1px solid var(--line); }
@media (min-width: 720px) { .chips { top: 64px; } }
.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: 40px; padding: 0 14px; border: 1px solid var(--line); 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: #fff; border-color: var(--key); }
:root[data-theme="dark"] .chips a[aria-current="true"] { color: #1a1a1a; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .chips a[aria-current="true"] { color: #1a1a1a; } }
.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; }

/* ---------- v3: 第2部の施策カード（横に動かす） ---------- */
.plan .head { margin-bottom: 0; }
.plan .carousel { margin-top: 8px; }
.plan .slide { background: var(--bg); }
.qt { list-style: none; margin: 0; padding: 0; display: grid; }
.qt li { display: grid; grid-template-columns: 5em 1fr; gap: 0 10px; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 13px; position: relative; }
.qt li:last-child { border-bottom: 0; }
.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: 2; grid-row: 1 / span 2; color: var(--fg); line-height: 1.5; }
.qt .q a { font-size: 12px; color: var(--muted); margin-left: 4px; white-space: nowrap; }
.tl-ind { margin-top: 6px; }
.tl-ind + .tl-ind { border-top: 1px dashed var(--line); margin-top: 8px; padding-top: 6px; }
.tl-ind .n { font-size: 14px; font-weight: 700; }
.plan details.more { margin-top: 4px; }
.plan .ind-list { font-size: 14px; color: var(--muted); }
/* 小さな図の並び（small multiples）・区画カードの絵 */
.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; }
.part .motif.no { width: 48px; height: 48px; padding: 6px; border-radius: 50%; background: var(--key-50); border: 1px solid var(--key-100); display: block; }
.part.soon .motif.no { background: var(--surface); border-color: var(--line); }
.carousel.parts .part { height: 100%; }

/* 議会の窓に組み込んだとき（/hirosaki/toukei/）の上の帯。色は議会の窓の青（中身の緑とは分ける） */
.gm-bar { background: var(--gm); color: var(--gm-fg); }
.gm-bar .wrap { display: flex; align-items: center; gap: 8px; min-height: 44px; 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: 44px; }
.gm-brand:visited, .gm-brand:hover { color: var(--gm-fg); }
.gm-brand svg { width: 22px; height: 22px; }
.gm-here { font-size: 14px; }