/* 数でみる在留外国人：見た目（明るい画面・暗い画面）。どのページもこのファイルを使う
   グラフの色：分類の7色（色覚の見分けを確かめた順）＋その他の灰色、地図はオレンジの濃さ7段（減った所は青）
   操作の色（サイトの色）：オリーブ（--btn。ヘッダーの線・押せるボタン・選んでいるタブ）。選んでいるものはオリーブでぬり、「✓」も付ける（色だけに頼らない）。
   選んだ行などの背景は淡いオリーブ（--btn-soft）、リンクとオリーブの字は濃いオリーブ（--accent）。予算のサイトの緑とは分ける。
   グラフ・地図の色（--c*・--s*・--d*・--up など）は数の意味を表すので、サイトの色には合わせない */
:root {
  --bg: #f6f7f9; --card: #ffffff; --text: #1d2330; --sub: #535c6b; --line: #dfe3ea; --accent: #4f6010; --field: #9aa4b4; --focus: #0b57d0;
  --grid: #e1e0d9; --old: #9aa3b2; --mark: #b7791f;
  --c1: #2a78d6; --c2: #eb6834; --c3: #1baf7a; --c4: #eda100; --c5: #e87ba4; --c6: #008300; --c7: #6250d6; --co: #b9bdc5;
  --s0: #fde9d7; --s1: #fbcfa6; --s2: #f7ae70; --s3: #f08a3e; --s4: #d76a1f; --s5: #ac4f12; --s6: #7c360b; --sz: #eef0f3;
  --d1: #cfe1f6; --d2: #8fb8e8; --d3: #4a86cf;
  --btn: #667a17; --btn-ink: #ffffff; --btn-soft: #f1f4e0; --btn-line: #b9c77a;
  --s-ink-0: #0b0b0b; --s-ink-1: #0b0b0b; --s-ink-2: #0b0b0b; --s-ink-3: #0b0b0b; --s-ink-4: #0b0b0b; --s-ink-5: #ffffff; --s-ink-6: #ffffff;
  --bar: #2a78d6; --edge: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #14171c; --card: #1d2128; --text: #e7eaf0; --sub: #a3acba; --line: #2e343e; --accent: #c2d27e; --field: #4a5361; --focus: #8ab4f8;
    --grid: #2c2c2a; --old: #6b7380; --mark: #d9a441;
    --c1: #3987e5; --c2: #d95926; --c3: #199e70; --c4: #c98500; --c5: #d55181; --c6: #008300; --c7: #9085e9; --co: #5b616b;
    --s0: #3b2414; --s1: #64361a; --s2: #8f4a1d; --s3: #c4621f; --s4: #ef8a3d; --s5: #f7ae70; --s6: #fcd3ad; --sz: #23272e;
    --d1: #1d3554; --d2: #2f5f99; --d3: #5f97dd;
    --btn: #b3c75a; --btn-ink: #151a05; --btn-soft: #262c14; --btn-line: #56622a;
    --s-ink-0: #e7eaf0; --s-ink-1: #ffffff; --s-ink-2: #ffffff; --s-ink-3: #0b0b0b; --s-ink-4: #0b0b0b; --s-ink-5: #0b0b0b; --s-ink-6: #0b0b0b;
    --bar: #3987e5; --edge: #48505d;
  }
}
:root[data-theme="dark"] {
  --bg: #14171c; --card: #1d2128; --text: #e7eaf0; --sub: #a3acba; --line: #2e343e; --accent: #c2d27e; --field: #4a5361; --focus: #8ab4f8;
  --grid: #2c2c2a; --old: #6b7380; --mark: #d9a441;
  --c1: #3987e5; --c2: #d95926; --c3: #199e70; --c4: #c98500; --c5: #d55181; --c6: #008300; --c7: #9085e9; --co: #5b616b;
  --s0: #3b2414; --s1: #64361a; --s2: #8f4a1d; --s3: #c4621f; --s4: #ef8a3d; --s5: #f7ae70; --s6: #fcd3ad; --sz: #23272e;
  --d1: #1d3554; --d2: #2f5f99; --d3: #5f97dd;
  --btn: #b3c75a; --btn-ink: #151a05; --btn-soft: #262c14; --btn-line: #56622a;
  --s-ink-0: #e7eaf0; --s-ink-1: #ffffff; --s-ink-2: #ffffff; --s-ink-3: #0b0b0b; --s-ink-4: #0b0b0b; --s-ink-5: #0b0b0b; --s-ink-6: #0b0b0b;
  --bar: #3987e5; --edge: #48505d;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); line-height: 1.7; font-size: 17px; overflow-wrap: break-word;
       font-family: 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', 'Yu Gothic', Meiryo, system-ui, sans-serif; }
html.xopen { overflow: hidden; }
a { color: var(--accent); }
[id] { scroll-margin-top: calc(var(--hdr, 56px) + 12px); }
a:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--focus); outline-offset: 2px; }
main, footer, nav.crumb { max-width: 960px; margin: 0 auto; padding: 12px max(16px, env(safe-area-inset-right)) 12px max(16px, env(safe-area-inset-left)); }

/* 本文へ移動（キーボードで使う人のため。押すまで見えない） */
.skip { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--btn); color: var(--btn-ink); padding: 10px 16px; border-radius: 0 0 10px 0; font-weight: 700; }
.skip:focus { left: 0; }

/* ヘッダー：どのページも同じ。スクロールしても上に残る（スマホでは低く、メニューは「メニュー」ボタンで開く）。
   いちばん上にオリーブの線、サイト名の前にサイトのしるし（ファビコンと同じ絵）。地は白のまま。
   中の幅は本文（960px）より少し広い 1000px：しるしを足しても、1024px の画面でメニューが1行に入るように（余り 20px ほど） */
header.top { position: sticky; top: 0; z-index: 30; background: var(--card); border-top: 4px solid var(--btn); border-bottom: 1px solid var(--line); box-shadow: 0 1px 6px rgba(0,0,0,.05); }
header.top .in { position: relative; max-width: 1000px; margin: 0 auto; display: flex; align-items: center; gap: 6px 12px; min-height: 56px;
                 padding: 4px max(16px, env(safe-area-inset-right)) 4px max(16px, env(safe-area-inset-left)); }
header.top a.home { display: inline-flex; align-items: center; gap: 7px; color: var(--text); text-decoration: none; font-weight: 700; font-size: 18px; white-space: nowrap; margin-right: auto; padding: 6px 0; }
header.top a.home .logo { width: 24px; height: 24px; flex: 0 0 auto; }
nav.menu { display: flex; flex-wrap: wrap; gap: 1px; }
nav.menu a { display: inline-flex; align-items: center; min-height: 44px; padding: 4px 4px; border-radius: 8px; color: var(--text); text-decoration: none; /* 8つの項目が1行に入るように（ほかの統計・もっと知るを足したとき。字は14px） */
             font-size: 14px; font-weight: 600; white-space: nowrap; }
nav.menu a:hover { background: var(--btn-soft); }
nav.menu a[aria-current="page"] { background: var(--btn); color: var(--btn-ink); }
/* まとめの見出し（ほかの統計）：押すと下に項目が開く。中のページを開いているときは見出しも色で示す */
.msub { position: relative; display: inline-flex; }
.msub-btn { display: inline-flex; align-items: center; gap: 2px; min-height: 44px; padding: 4px 4px; border: 0; border-radius: 8px; background: none; color: var(--text);
            font: inherit; font-size: 14px; font-weight: 600; white-space: nowrap; cursor: pointer; }
.msub-btn::after { content: ""; width: 7px; height: 7px; margin: -4px 1px 0 2px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.msub.open .msub-btn::after { margin-top: 3px; transform: rotate(-135deg); }
.msub-btn:hover { background: var(--btn-soft); }
.msub.cur .msub-btn { background: var(--btn); color: var(--btn-ink); }
.msub-list { display: none; position: absolute; top: 100%; left: 0; z-index: 40; min-width: 10em; flex-direction: column; gap: 2px; padding: 6px;
             background: var(--card); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 24px rgba(0,0,0,.14); }
.msub.open .msub-list, html:not(.js) .msub:hover .msub-list, html:not(.js) .msub:focus-within .msub-list { display: flex; }
/* 開いた中の項目は、字を大きく・押しやすく。「もっと知る」は名前の下に短い説明（右の端からはみ出さないよう、見出しの右にそろえて開く） */
nav.menu .msub-list a { font-size: 16px; min-height: 48px; padding: 6px 12px; }
.msub-more .msub-list { left: auto; right: 0; width: max-content; max-width: min(22em, calc(100vw - 32px)); }
nav.menu a .mi { display: flex; flex-direction: column; gap: 1px; white-space: normal; line-height: 1.35; }
nav.menu a .mi small { font-size: 14px; font-weight: 400; color: var(--sub); }
nav.menu a[aria-current="page"] .mi small { color: inherit; }
.menu-btn { display: none; }
.menu-ic { display: inline-block; position: relative; width: 18px; height: 2px; background: currentColor; margin: 0 2px; }
.menu-ic::before, .menu-ic::after { content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: currentColor; }
.menu-ic::before { top: -6px; } .menu-ic::after { top: 6px; }
header.top.open .menu-ic { background: transparent; }
header.top.open .menu-ic::before { top: 0; transform: rotate(45deg); } header.top.open .menu-ic::after { top: 0; transform: rotate(-45deg); }
@media (max-width: 1023px) { /* メニューが1行に入らない幅では「メニュー」ボタンで開く（960〜1023px はスクロールバーの分だけ入らないことがある） */
  header.top .in { min-height: 52px; }
  header.top a.home { font-size: 17px; }
  .js .menu-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 4px 14px; font: inherit; font-size: 15px; font-weight: 700;
                  border: 1px solid var(--btn-line); border-radius: 10px; background: var(--btn-soft); color: var(--text); cursor: pointer; }
  .js nav.menu { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; flex-wrap: nowrap; gap: 6px; background: var(--card);
                 border-bottom: 1px solid var(--line); box-shadow: 0 10px 24px rgba(0,0,0,.14); padding: 10px max(16px, env(safe-area-inset-right)) 14px max(16px, env(safe-area-inset-left));
                 max-height: calc(100vh - var(--hdr, 57px)); overflow: auto; }
  .js header.top.open nav.menu { display: flex; }
  .js nav.menu a { min-height: 50px; font-size: 17px; padding: 6px 14px; border: 1px solid var(--line); border-radius: 10px; }
  .js nav.menu a[aria-current="page"] { border-color: var(--btn); }
  /* スマホのメニュー：見出しは小さな字の区切りにして、中の項目を字下げして並べる */
  .js nav.menu .msub { display: block; }
  .js nav.menu .msub-btn { width: 100%; min-height: 40px; padding: 4px 14px; font-size: 15px; color: var(--sub); background: none; }
  .js nav.menu .msub.cur .msub-btn { color: var(--sub); background: none; }
  .js nav.menu .msub-list { position: static; min-width: 0; gap: 6px; padding: 0 0 0 18px; border: 0; box-shadow: none; background: none; }
  .js nav.menu .msub-more .msub-list { width: auto; max-width: none; }
  .js nav.menu .msub-list a { font-size: 17px; min-height: 50px; padding: 6px 14px; }
}
@media (max-width: 1023px) { html:not(.js) nav.menu { margin: 0 -10px; } html:not(.js) header.top .in { flex-wrap: wrap; } }

/* いまいる所（パンくず） */
nav.crumb { padding-top: 10px; padding-bottom: 0; }
nav.crumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; font-size: 15px; color: var(--sub); }
nav.crumb li + li::before { content: "›"; margin: 0 8px; color: var(--sub); }
nav.crumb a { display: inline-block; padding: 4px 0; }
nav.crumb [aria-current] { color: var(--text); font-weight: 600; }

h1 { font-size: 27px; margin: 4px 0 4px; line-height: 1.4; }
h2 { font-size: 21px; margin: 0 0 8px; line-height: 1.45; }
h3 { line-height: 1.45; }
.lead { color: var(--sub); margin: 0 0 12px; }
p.meta { display: flex; flex-wrap: wrap; gap: 2px 16px; margin: 0 0 12px; font-size: 15px; color: var(--sub); }
p.meta b { color: var(--text); }
section.card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 16px; margin: 14px 0; }
.cardmeta { font-size: 14px; color: var(--sub); margin: -4px 0 10px; }
.cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; margin: 14px 0; }
.cols > section.card { margin: 0; }
@media (max-width: 760px) { .cols { grid-template-columns: minmax(0, 1fr); } }

/* 主要な数 */
.kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 12px 0; }
.kpi { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 12px 16px; min-width: 0; }
.kpi .big { font-size: 30px; font-weight: 700; line-height: 1.3; font-variant-numeric: tabular-nums; }
.kpi .mid { font-size: 23px; font-weight: 700; line-height: 1.35; font-variant-numeric: tabular-nums; }
.kpi .lab { font-size: 15px; color: var(--sub); }
.kpi .ch { font-size: 15px; }
@media (max-width: 700px) { .kpis { grid-template-columns: 1fr 1fr; } .kpis .kpi:first-child { grid-column: 1 / -1; } .kpi .mid { font-size: 20px; } }

/* トップページ：目的別の入口 */
.ask { margin: 8px 0 6px; }
.ask h2 { font-size: 23px; margin-bottom: 10px; }
.entries { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.entries a { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 16px; min-height: 136px; border-radius: 14px;
             border: 2px solid var(--btn-line); background: var(--card); color: var(--text); text-decoration: none; }
.entries a:hover { border-color: var(--btn); background: var(--btn-soft); }
.entries .ei { width: 46px; height: 46px; border-radius: 12px; background: var(--btn); color: var(--btn-ink); display: grid; place-items: center; flex: 0 0 auto; }
.entries .ei svg { width: 28px; height: 28px; }
.entries b { font-size: 19px; line-height: 1.35; }
.entries .ed { font-size: 15px; color: var(--sub); line-height: 1.5; }
.entries a.wide { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 14px; min-height: 0; } /* 地図で見る移り変わり：4つの下に横長で */
.entries .et { display: flex; flex-direction: column; gap: 2px; }
@media (max-width: 860px) { .entries { grid-template-columns: 1fr 1fr; } }
/* 「何を調べますか？」の下の「もっと知る」：制度の説明のページへの小さな入口（広い画面は3つ横並び、狭い画面は折り返す） */
.morein { margin: 14px 0 0; }
.morein h3 { font-size: 18px; margin: 0 0 8px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.morein h3 span { font-size: 15px; font-weight: 400; color: var(--sub); }
.morein ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(15em, 1fr)); gap: 8px; }
.morein a { display: flex; flex-direction: column; gap: 2px; height: 100%; min-height: 56px; padding: 9px 14px; border: 1px solid var(--line); border-radius: 12px;
            background: var(--card); color: var(--text); text-decoration: none; }
.morein a:hover { border-color: var(--btn); background: var(--btn-soft); }
.morein b { font-size: 17px; color: var(--accent); }
.morein a span { font-size: 15px; color: var(--sub); line-height: 1.45; }
@media (max-width: 400px) { .entries { gap: 10px; } .entries a { padding: 12px; min-height: 128px; } .entries b { font-size: 17px; } .entries .ed { font-size: 14px; } }

/* トップページのいちばん上：グラフの画像を作る（X投稿用。xmaker.js）。パソコンでは左に選ぶもの・右に画像（画像は止めておく）、
   スマホ（860px より狭い）では上に選ぶもの・下に画像。ボタンはオリーブ、選んでいるものはオリーブでぬり「✓」も付ける。
   はじめは閉じた帯（見出し・一言・「ひらく」）だけ。帯のどこを押しても開け閉めできる */
details.xm { background: var(--card); border: 2px solid var(--btn); border-radius: 12px; margin: 14px 0; font-size: inherit; }
details.xm > summary { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 16px;
                       padding: 16px 18px; color: var(--text); font-weight: 400; border-radius: 10px; }
details.xm > summary::-webkit-details-marker { display: none; }
details.xm > summary:hover { background: var(--btn-soft); }
details.xm[open] > summary { border-radius: 10px 10px 0 0; }
.xm h2 { font-size: 23px; margin: 0; grid-column: 1; }
.xm-x { white-space: nowrap; } /* 「（X投稿用）」は分けない */
.xm-sub { grid-column: 1; color: var(--sub); font-size: 15px; line-height: 1.6; }
.xm-tog { grid-column: 2; grid-row: 1 / span 2; padding: 9px 16px; border-radius: 8px; border: 1px solid var(--btn); background: var(--btn); color: var(--btn-ink); font-weight: 700; font-size: 16px; white-space: nowrap; }
.xm-tog::after { content: "ひらく ▼"; }
details.xm[open] .xm-tog { background: var(--card); color: var(--btn); border-color: var(--btn-line); }
details.xm[open] .xm-tog::after { content: "とじる ▲"; }
.xm-in { padding: 4px 18px 18px; }
@media (max-width: 560px) { .xm-tog { grid-column: 1; grid-row: auto; justify-self: start; margin-top: 8px; } }
.xm-lead { color: var(--sub); margin: 0 0 14px; font-size: 15px; }
.xm-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 20px; align-items: start; }
.xm-step { border: 0; margin: 0 0 16px; padding: 0; min-width: 0; }
.xm-step legend { font-weight: 700; font-size: 17px; padding: 0; margin-bottom: 8px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.xm-step legend small { font-weight: 400; font-size: 14px; color: var(--sub); }
.xm-no { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--btn); color: var(--btn-ink); font-size: 15px; flex: 0 0 auto; }
.xm-pick { display: flex; flex-wrap: wrap; gap: 6px; }
.xm-pick button { font: inherit; font-size: 15px; min-height: 44px; padding: 6px 14px; border-radius: 8px; border: 1px solid var(--btn-line); background: var(--card); color: var(--text); cursor: pointer; text-align: left; }
.xm-pick button:hover:not([aria-pressed="true"]) { background: var(--btn-soft); }
.xm-pick button[aria-pressed="true"] { background: var(--btn); color: var(--btn-ink); border-color: var(--btn); }
.xm-pick button[aria-pressed="true"] b::before { content: "✓ "; }
.xm-kinds { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.xm-kinds button { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; min-height: 64px; border-radius: 10px; }
.xm-kinds button b { font-size: 17px; }
.xm-kinds button small { font-size: 13px; line-height: 1.45; opacity: .85; }
.xm-sels { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; }
.xm-sels select { width: 100%; }
.xm-help { font-size: 14px; color: var(--sub); margin: 6px 0 0; line-height: 1.6; }
.xm-out { position: sticky; top: calc(var(--hdr, 56px) + 8px); }
.xm-prev { background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 8px; min-height: 220px; display: grid; place-items: center; color: var(--sub); }
.xm-prev .xcanvas { max-height: 62vh; }
.xm-prev .dnodata { margin: 0; padding: 18px; text-align: center; color: var(--sub); font-size: 16px; }
.xm-note:empty, .xm-msg:empty { display: none; }
.xm-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 10px 0 6px; }
.xm-title { margin: 6px 0 0; }
.xm-title input { width: 100%; }
.xm-acts { margin-top: 8px; padding-top: 8px; }
a.xm-off { pointer-events: none; opacity: .45; }
.xm-more { margin: 12px 0 0; font-size: 15px; }
.xm-sortlab { display: block; margin: 10px 0 4px; } /* 増減の棒の並び順 */
.xm-kinds button:last-child:nth-child(odd) { grid-column: 1 / -1; } /* 5つ目（国籍ごとの主な在留資格）は横いっぱい */
/* 国籍ごとの主な在留資格：入れる国籍・地域（押すと外れる）・足す欄・多い順に戻す */
.xm-xn { margin-top: 10px; }
.xm-xn > .dlab { display: block; margin-bottom: 4px; }
.xm-chips button { background: var(--btn); color: var(--btn-ink); border-color: var(--btn); display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px 6px 14px; }
.xm-chips button span { font-size: 18px; line-height: 1; opacity: .85; }
.xm-pick.xm-chips button:hover { background: var(--btn); filter: brightness(1.1); }
.xm-xn .dctl { margin-top: 8px; }
.xm-reset { margin-top: 8px; }
.xm-spbtn { margin: 0 0 10px; } /* ③のいちばん上：最新の速報で作る（速報のときは、確定した統計に戻す） */
.xm-step .xm-sphelp { margin: -4px 0 10px; }
@media (max-width: 860px) { .xm-grid { grid-template-columns: minmax(0, 1fr); } .xm-out { position: static; } }
@media (max-width: 420px) {
  details.xm > summary { padding: 14px 12px; }
  .xm h2 { font-size: 20px; }
  .xm-in { padding: 4px 12px 14px; }
  .xm-sels select { font-size: 15px; padding: 6px 8px; }
  .xm-kinds button small { display: none; }
  .xm-kinds button { min-height: 52px; }
}

/* このページの内容（ページの中の移動）・関連するページ */
.jump { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 4px 0 8px; font-size: 15px; }
.jump .jl { color: var(--sub); }
.jump a { display: inline-flex; align-items: center; min-height: 40px; padding: 4px 12px; border-radius: 20px; border: 1px solid var(--line); background: var(--card); text-decoration: none; }
.jump a:hover { border-color: var(--accent); }
.related ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 8px; }
.related a { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 52px; padding: 8px 14px; border: 1px solid var(--line);
             border-radius: 10px; background: var(--card); color: var(--text); text-decoration: none; font-weight: 600; line-height: 1.45; }
.related a::after { content: "→"; color: var(--accent); font-weight: 700; }
.related a:hover { border-color: var(--accent); }
.related .rs { display: block; font-weight: 400; font-size: 14px; color: var(--sub); }

/* ボタン・選ぶ欄（どのページも同じ形） */
.dbtn { font: inherit; font-size: 15px; min-height: 44px; padding: 6px 16px; border-radius: 10px; border: 1px solid var(--btn); background: var(--btn); color: var(--btn-ink);
        cursor: pointer; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; gap: 6px; text-decoration: none; line-height: 1.3; }
.dbtn-sub { background: var(--btn-soft); color: var(--text); border-color: var(--btn-line); }
.dbtn:hover:not(:disabled) { filter: brightness(.95); }
button:disabled, .dbtn:disabled, select:disabled { opacity: .45; cursor: not-allowed; }
a.dbtn { text-decoration: none; }
select, input[type="search"], input[type="text"], textarea { font: inherit; font-size: 16px; min-height: 44px; padding: 6px 10px; border-radius: 8px;
  border: 1px solid var(--field); background: var(--card); color: var(--text); max-width: 100%; }
.dctl { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dlab { font-size: 14px; color: var(--sub); font-weight: 600; }
.dhelp { font-size: 15px; color: var(--sub); margin: 6px 0; }
.dcheck { display: flex; align-items: center; gap: 8px; min-height: 44px; font-size: 15px; cursor: pointer; }
.dcheck input { width: 22px; height: 22px; accent-color: var(--btn); }

/* 切り替えボタン（円グラフ・棒グラフ・表 など）：選んでいるものはオリーブと「✓」 */
.modes, .stab { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--btn-line); border-radius: 10px; overflow: hidden; }
.modes button, .stab button { font: inherit; font-size: 15px; padding: 6px 14px; min-height: 42px; border: 0; background: var(--card); color: var(--text); cursor: pointer; white-space: nowrap; } /* 枠の線と合わせて 44px（となりの選ぶ欄・ボタンと同じ高さ） */
.modes button + button, .stab button + button { border-left: 1px solid var(--btn-line); }
.modes button[aria-pressed="true"], .stab button[aria-pressed="true"] { background: var(--btn); color: var(--btn-ink); font-weight: 700; }
.modes button[aria-pressed="true"]::before, .stab button[aria-pressed="true"]::before { content: "✓ "; }
.modes button:hover:not([aria-pressed="true"]), .stab button:hover:not([aria-pressed="true"]) { background: var(--btn-soft); }

/* グラフの上の操作（切り替え・画像を保存）と、表示している条件 */
.vtools { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 12px; margin: 0 0 10px; }
.vtools .modes, .vtools .lines-ctl, .vtools .map-ctl { margin: 0; } /* 並べた欄の下の線をそろえる（余白があると、そのぶん上にずれる） */
.vtools select, .map-ctl select { height: 44px; }
.vtools .savebtn { margin-left: auto; }
.vnow { font-size: 15px; margin: 0 0 8px; }
.vnow b { font-weight: 700; }
.hint { font-size: 14px; color: var(--sub); margin: 8px 0 0; }

/* 移り変わりの折れ線 */
svg.chart { width: 100%; height: auto; display: block; touch-action: pan-y; }
svg .grid { stroke: var(--grid); stroke-width: 1; }
svg .ax { fill: var(--sub); font-size: 12px; }
svg .mark { stroke: var(--mark); stroke-dasharray: 4 3; }
svg .line { fill: none; stroke-width: 2.5; }
svg .line.new { stroke: var(--c1); } svg .line.old { stroke: var(--old); }
svg .dot { stroke: var(--card); stroke-width: 2; }
svg .dot.new { fill: var(--c1); } svg .dot.old { fill: var(--old); }
svg .dot.on { r: 7; stroke: var(--text); }
svg .hit { fill: transparent; }

/* 表 */
table.t { border-collapse: collapse; width: 100%; font-size: 15px; }
table.t th, table.t td { border-bottom: 1px solid var(--line); padding: 7px 8px; text-align: left; vertical-align: middle; }
table.t th { font-size: 14px; color: var(--sub); font-weight: 700; background: var(--card); white-space: nowrap; }
table.t td:not(.n) { min-width: 6em; } /* 狭い画面で、名前の列が1字ずつに折れないように（入らなければ表を横にずらす） */
.tbl table.t td:not(.n) { white-space: nowrap; }
.tbl table.t td .wr { white-space: normal; word-break: keep-all; } /* 長い名前は、入らないときだけ「・」の所で折り返す（make_site.py の wbr と組にする） */
table.t thead th { border-bottom: 2px solid var(--line); }
table.t td.n, table.t th.n { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
table.t tr.hl td { background: var(--btn-soft); }
.sub { color: var(--sub); font-size: 14px; }
.barcol { width: 28%; }
.bar { display: block; height: 10px; background: var(--bar); border-radius: 0 4px 4px 0; }
.scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.scroll-hint { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--sub); margin: 4px 0; }
details { margin-top: 10px; font-size: 15px; }
details > summary { cursor: pointer; padding: 10px 0; color: var(--accent); font-weight: 600; }
.note { font-size: 15px; color: var(--sub); }
.note li { margin: 4px 0; }

/* 地域区分ごとの人数（州の行は太く、その中の地域区分は字下げ） */
table.regtab tr.rst td { font-weight: 700; background: var(--bg); border-top: 2px solid var(--line); }
table.regtab tr.rsub td:first-child { padding-left: 28px; }
table.regtab tr.rsub td:first-child::before { content: "└ "; color: var(--sub); }
/* 色のマス目（ヒートマップ。国籍から探す）：色は地図と同じオレンジの濃さ（.b0〜.b6）。マスの中に短い数・割合を書く（色だけに頼らない）。
   名前の列と州の見出しは、横にずらしても左に残る。2012年の列の左の点線は、数え方が変わった所 */
.heatsw .hsw { margin: 0 0 12px; }
.heatsw .hsw .modes { align-self: flex-start; }
.heatpane .map-shape { max-width: none; } /* 世界地図は横に長いので、枠の幅いっぱいに */
.heatpane h3 { font-size: 17px; margin: 4px 0 8px; }
table.heat { border-collapse: separate; border-spacing: 2px; font-size: 12px; line-height: 1.25; font-variant-numeric: tabular-nums; }
table.heat th { font-weight: 600; color: var(--sub); font-size: 12px; padding: 2px 1px; vertical-align: bottom; white-space: nowrap; text-align: center; }
table.heat thead th.vh span { writing-mode: vertical-rl; display: inline-block; letter-spacing: 1px; line-height: 1.1; }
table.heat th.rl { position: sticky; left: 0; z-index: 1; background: var(--card); text-align: left; vertical-align: middle; font-size: 14px; font-weight: 400;
                   color: var(--text); padding: 2px 8px 2px 0; white-space: normal; word-break: keep-all; min-width: 7.5em; max-width: 10em; }
table.heat thead th.rl { color: var(--sub); font-size: 12px; font-weight: 600; vertical-align: bottom; }
table.heat tr.top th.rl { font-weight: 700; }
table.heat tr.hst th { text-align: left; font-size: 13px; font-weight: 700; color: var(--sub); padding: 10px 0 0; }
table.heat tr.hst th span { position: sticky; left: 0; }
table.heat tr.hgap td { height: 8px; padding: 0; }
table.heat td { min-width: 38px; height: 30px; padding: 0 3px; text-align: center; border-radius: 3px; white-space: nowrap; font-weight: 600; }
table.heat td.ex { font-weight: 400; color: var(--text); text-align: right; font-size: 13px; padding: 0 8px 0 0; min-width: 0; border-radius: 0; }
table.heat td[class^="b"]:hover { outline: 2px solid var(--text); outline-offset: -2px; }
table.heat .brk { border-left: 2px dashed var(--text); }

/* 長い一覧の操作（名前で探す・並べ方・もっと見る） */
.ttools { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 12px; margin: 0 0 10px; }
.ttools .tq { flex: 1 1 220px; }
.ttools .tq input { width: 100%; }
.tmore { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.tcount { font-size: 15px; color: var(--sub); margin-right: auto; }
.tnone { padding: 14px; text-align: center; color: var(--sub); border: 1px dashed var(--line); border-radius: 10px; }

/* 円グラフ */
.pie-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
svg.pie { width: 220px; max-width: 60%; height: auto; flex: 0 0 auto; }
svg.pie .slice { stroke: var(--card); stroke-width: 2; cursor: pointer; }
svg.pie .slice.ring { stroke-width: 42; }
svg.pie .slice.hl { opacity: .75; }
svg.pie .pie-c1 { fill: var(--sub); font-size: 13px; }
svg.pie .pie-c2 { fill: var(--text); font-size: 17px; font-weight: 700; }
.c-1 { fill: var(--c1); } .c-2 { fill: var(--c2); } .c-3 { fill: var(--c3); } .c-4 { fill: var(--c4); }
.c-5 { fill: var(--c5); } .c-6 { fill: var(--c6); } .c-7 { fill: var(--c7); } .c-o { fill: var(--co); }
.ring.c-1 { stroke: var(--c1); fill: none; } .ring.c-o { stroke: var(--co); fill: none; }
ul.legend { list-style: none; margin: 0; padding: 0; flex: 1 1 240px; font-size: 15px; min-width: 0; }
ul.legend li { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto 56px; gap: 8px; align-items: center; padding: 3px 4px; border-radius: 6px; }
ul.legend li.hl { background: var(--bg); }
ul.legend .v, ul.legend .p, .hbars .v, .hbars .p { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
ul.legend .p, .hbars .p { color: var(--sub); font-size: 14px; }
.sw { display: inline-block; width: 14px; height: 14px; border-radius: 3px; flex: 0 0 auto; }
.sw-1 { background: var(--c1); } .sw-2 { background: var(--c2); } .sw-3 { background: var(--c3); } .sw-4 { background: var(--c4); }
.sw-5 { background: var(--c5); } .sw-6 { background: var(--c6); } .sw-7 { background: var(--c7); } .sw-o { background: var(--co); }

/* 棒グラフ */
ul.hbars { list-style: none; margin: 0; padding: 0; font-size: 15px; }
ul.hbars li { display: grid; grid-template-columns: minmax(7em, 32%) 1fr auto 56px; gap: 8px; align-items: center; padding: 4px 0; border-bottom: 1px solid var(--line); }
.hbars .track { height: 14px; }
.hbars .fill { display: block; height: 14px; background: var(--bar); border-radius: 0 4px 4px 0; min-width: 2px; }
.hbars .fill.o { background: var(--co); }
/* 説明つきの一覧（特定活動の在留目的など）：名前と人数の行、その下に説明 */
ul.tkl { list-style: none; margin: 0; padding: 0; }
ul.tkl li { padding: 12px 0; border-bottom: 1px solid var(--line); }
.tkh { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 17px; }
.tkh .v { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
ul.tkl p { margin: 4px 0 0; }

/* 地図（本物の形・四角で並べる） */
.map-ctl { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: flex-end; margin-bottom: 10px; }
.map-now { font-size: 16px; margin: 0 0 6px; }
.tiles { display: grid; grid-template-columns: repeat(13, 1fr); gap: 3px; max-width: 720px; }
.tile { aspect-ratio: 1 / 1; border-radius: 6px; display: flex; flex-direction: column; align-items: center; justify-content: center;
        text-decoration: none; font-size: 12px; line-height: 1.2; overflow: hidden; }
.tile .tn { font-weight: 700; }
.tile .tv { font-size: 10px; font-variant-numeric: tabular-nums; }
.tile:hover, .tile:focus-visible { outline: 2px solid var(--text); outline-offset: 1px; }
.tile.sel { outline: 3px solid var(--text); outline-offset: 1px; position: relative; z-index: 1; }
.b0 { background: var(--s0); color: var(--s-ink-0); } .b1 { background: var(--s1); color: var(--s-ink-1); }
.b2 { background: var(--s2); color: var(--s-ink-2); } .b3 { background: var(--s3); color: var(--s-ink-3); }
.b4 { background: var(--s4); color: var(--s-ink-4); } .b5 { background: var(--s5); color: var(--s-ink-5); }
.b6 { background: var(--s6); color: var(--s-ink-6); } .b-z { background: var(--sz); color: var(--sub); }
.map-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-top: 10px; font-size: 14px; color: var(--sub); }
.map-legend .lgh { font-weight: 700; color: var(--text); }
.map-legend .lg { display: inline-flex; align-items: center; gap: 4px; }
.map-legend .sw { border: 1px solid var(--line); }
.map-info { margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: var(--bg); border: 1px solid var(--line); font-size: 15px;
            display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; min-height: 52px; }
.map-info b { font-size: 17px; }
.map-jump { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: flex-end; margin-top: 10px; }
.map-jump select { min-width: 12em; }
@media (max-width: 600px) { .tile .tv { display: none; } .tile { font-size: 11px; border-radius: 4px; } .tiles { gap: 2px; min-width: 460px; } svg .ax.mk { display: none; } }
.map-shape { max-width: 720px; }
svg.jmap { width: 100%; height: auto; display: block; }
svg.jmap path.area { stroke: var(--edge); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-linejoin: round; cursor: pointer; }
svg.jmap path.area.hl { stroke: var(--text); stroke-width: 2; }
svg.jmap path.area.sel { stroke: var(--text); stroke-width: 3.5; }
svg.jmap a:focus-visible path.area { stroke: var(--focus); stroke-width: 3; }
svg.jmap .b0 { fill: var(--s0); } svg.jmap .b1 { fill: var(--s1); } svg.jmap .b2 { fill: var(--s2); } svg.jmap .b3 { fill: var(--s3); }
svg.jmap .b4 { fill: var(--s4); } svg.jmap .b5 { fill: var(--s5); } svg.jmap .b6 { fill: var(--s6); } svg.jmap .b-z { fill: var(--sz); }
svg.jmap .d1 { fill: var(--d1); } svg.jmap .d2 { fill: var(--d2); } svg.jmap .d3 { fill: var(--d3); }
.d1 { background: var(--d1); } .d2 { background: var(--d2); } .d3 { background: var(--d3); color: #fff; }
svg.jmap .b-n, svg.jmap .b-u { fill: var(--bg); stroke: var(--sub); stroke-dasharray: 3 2; }
svg.jmap .b-n { cursor: default; }
svg.jmap rect.inset { fill: transparent; stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; cursor: pointer; }
.map-legend .sw.b-n { background: var(--bg); border-style: dashed; }
svg.jmap rect.frame { fill: none; stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; pointer-events: none; }
svg.jmap .frame-lb { fill: var(--sub); font-size: 13px; pointer-events: none; }
@media (max-width: 600px) { svg.jmap .frame-lb { font-size: 20px; } }

/* いくつかの線の折れ線（国籍ごとの在留資格の移り変わり） */
.lines-ctl { margin-bottom: 10px; font-size: 15px; }
svg.lines .ln { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
svg.lines .pt { stroke: var(--card); stroke-width: 2; }
svg.lines .ln.s-1 { stroke: var(--c1); } svg.lines .ln.s-2 { stroke: var(--c2); } svg.lines .ln.s-3 { stroke: var(--c3); } svg.lines .ln.s-4 { stroke: var(--c4); }
svg.lines .ln.s-5 { stroke: var(--c5); } svg.lines .ln.s-6 { stroke: var(--c6); } svg.lines .ln.s-7 { stroke: var(--c7); } svg.lines .ln.s-o { stroke: var(--co); }
svg.lines .pt.s-1 { fill: var(--c1); } svg.lines .pt.s-2 { fill: var(--c2); } svg.lines .pt.s-3 { fill: var(--c3); } svg.lines .pt.s-4 { fill: var(--c4); }
svg.lines .pt.s-5 { fill: var(--c5); } svg.lines .pt.s-6 { fill: var(--c6); } svg.lines .pt.s-7 { fill: var(--c7); } svg.lines .pt.s-o { fill: var(--co); }
svg.lines .cross { stroke: var(--sub); stroke-width: 1; stroke-dasharray: 3 3; }
/* ページに書いた折れ線（不法残留・帰化のページ。make_site.py の static_lines）：パソコン用（横長）とスマホ用（縦長）を幅で切り替える */
.sln { display: none; }
@media (max-width: 600px) { .slw { display: none; } .sln { display: block; } }
.lines-legend { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.lines-legend .lgb { font: inherit; font-size: 15px; display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; min-height: 40px;
                     border: 1px solid var(--line); border-radius: 20px; background: var(--card); color: var(--text); cursor: pointer; }
.lines-legend .lgb.off { color: var(--sub); text-decoration: line-through; }
.lines-legend .lgb.off .sw { background: transparent; border: 1px dashed var(--sub); }
.tip .sw { width: 10px; height: 10px; vertical-align: middle; }
@media (max-width: 600px) { svg.lines .pt { display: none; } }

/* 選んで見る表 */
.pick-ctl { margin-bottom: 8px; }
.pick-more { font: inherit; font-size: 15px; margin-top: 8px; padding: 6px 16px; min-height: 44px; border-radius: 10px; border: 1px solid var(--btn-line); background: var(--btn-soft);
             color: var(--text); font-weight: 700; cursor: pointer; }

/* 吹き出し */
.tip { position: fixed; z-index: 60; pointer-events: none; background: var(--card); color: var(--text); border: 1px solid var(--line);
       border-radius: 8px; padding: 6px 10px; font-size: 15px; box-shadow: 0 4px 14px rgba(0,0,0,.15); max-width: 280px; }

/* 下：出典など。右下の「上に戻る」に隠れないよう、下に余白 */
footer { font-size: 14px; color: var(--sub); padding-bottom: 96px; border-top: 1px solid var(--line); margin-top: 20px; }
footer .fname { font-weight: 700; color: var(--text); font-size: 15px; }
footer nav { display: flex; flex-wrap: wrap; gap: 0 14px; margin: 6px 0; }
footer nav a { display: inline-block; padding: 6px 0; }

/* 上に戻る：画面の右下。300px ほど下へ動かすと出る */
.totop { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, calc(env(safe-area-inset-bottom) + 8px)); z-index: 40;
         min-height: 48px; min-width: 48px; padding: 8px 18px; border-radius: 24px; border: 2px solid var(--card); background: var(--btn); color: var(--btn-ink);
         font: inherit; font-size: 16px; font-weight: 700; box-shadow: 0 4px 14px rgba(0,0,0,.22); cursor: pointer; }
.totop[hidden] { display: none; }
.totop:hover { filter: brightness(.95); }

@media (max-width: 600px) {
  main { padding-top: 8px; }
  .barcol { display: none; } h1 { font-size: 23px; } h2 { font-size: 19px; }
  section.card { padding: 14px 12px; }
  svg .ax { font-size: 24px; } svg .dot { r: 5; }
  ul.hbars li { grid-template-columns: minmax(6em, 38%) 1fr auto; } .hbars .p { display: none; }
  .vtools .savebtn { margin-left: 0; }
  .kpi .big { font-size: 27px; }
}

/* トップページのダッシュボードへの入り口 */
.bigmenu { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 10px 0 4px; }
.bigmenu a { display: flex; flex-direction: column; gap: 4px; padding: 14px 14px; border-radius: 12px; background: var(--btn-soft); color: var(--text); text-decoration: none; min-height: 96px;
             border: 1px solid var(--btn-line); }
.bigmenu a b { font-size: 18px; }
.bigmenu a span { font-size: 15px; color: var(--sub); line-height: 1.5; }
.bigmenu a:hover { border-color: var(--btn); }
@media (max-width: 760px) { .bigmenu { grid-template-columns: 1fr 1fr; } }

/* 地域を名前で探す（地域から探すのページ） */
.finder input[type="search"] { width: 100%; font-size: 17px; min-height: 50px; }
.fresults { list-style: none; margin: 8px 0 0; padding: 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.fresults:empty { display: none; }
.fresults li + li { border-top: 1px solid var(--line); }
.fresults a { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; padding: 10px 14px; min-height: 48px; text-decoration: none; color: var(--text); }
.fresults a:hover, .fresults a:focus-visible { background: var(--btn-soft); }
.fresults .fn { font-weight: 700; color: var(--accent); }
/* 地方から選ぶ：地方ごとに1行（左に地方の名前と合計、右に都道府県の四角）。政令市も同じ四角 */
.regions section { display: grid; grid-template-columns: 8em minmax(0, 1fr); gap: 8px 16px; padding: 14px 0; border-top: 1px solid var(--line); }
.regions section:first-child { border-top: 0; padding-top: 2px; }
.regions h3 { font-size: 17px; margin: 0; padding-top: 6px; line-height: 1.4; display: flex; flex-direction: column; gap: 2px; }
.regions h3 .n { font-size: 14px; font-weight: 400; color: var(--sub); font-variant-numeric: tabular-nums; }
.picks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(5.6em, 1fr)); gap: 8px; }
.picks.wide { grid-template-columns: repeat(auto-fill, minmax(9em, 1fr)); }
.picks.wide b { white-space: normal; }
.picks a { display: flex; flex-direction: column; justify-content: center; min-height: 56px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 10px;
           background: var(--card); color: var(--text); text-decoration: none; line-height: 1.45; }
.picks a:hover, .picks a:focus-visible { background: var(--btn-soft); border-color: var(--btn-line); }
.picks b { color: var(--accent); white-space: nowrap; }
.picks small { display: inline-block; font-size: 13px; font-weight: 400; color: var(--sub); margin-left: 6px; white-space: nowrap; }
.picks .n { color: var(--sub); font-size: 14px; font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 600px) {
  .regions section { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .regions h3 { flex-direction: row; justify-content: space-between; align-items: baseline; padding-top: 0; }
}

/* 画像を保存の画面 */
.xov { position: fixed; inset: 0; z-index: 70; background: rgba(10, 14, 20, .55); display: flex; align-items: flex-start; justify-content: center; overflow: auto;
       padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom)); }
.xbox { background: var(--card); color: var(--text); border-radius: 14px; padding: 16px; width: min(960px, 100%); box-shadow: 0 12px 40px rgba(0,0,0,.3); min-width: 0; }
.xhead { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.xhead h2 { margin: 0; }
.xclose { font: inherit; font-size: 15px; font-weight: 700; min-height: 44px; padding: 6px 14px; border-radius: 10px; border: 1px solid var(--btn-line); background: var(--btn-soft); color: var(--text); cursor: pointer; }
.xform { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: flex-end; }
.xform .dctl { max-width: 100%; }
.xtitle { flex: 1 1 100%; }
.xtitle input { width: 100%; }
.xprev { margin: 10px 0; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 8px; text-align: center; color: var(--sub); }
.xcanvas { max-width: 100%; height: auto; max-height: 60vh; box-shadow: 0 2px 10px rgba(0,0,0,.12); vertical-align: middle; }
.xtext { width: 100%; resize: vertical; }
.dtools { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
@media (max-width: 600px) { .xbox { padding: 12px; } .dtools .dbtn { flex: 1 1 auto; } }

/* 10年前からの増減（トップページ）：見た瞬間に「何人増えた・減った」が分かるように、説明の文は入れず、色・目もり・数で示す（保存する画像と同じ決まり）。
   増えた＝緑で0より右、減った＝赤で0より左。棒の長さは増減の人数（どの並べ方でも同じ目もり。いちばん下に人数の目もり、棒の欄に薄い目もりの線）。
   色だけに頼らず、＋−の付いた数を必ず書く。緑と赤は、色の見分けにくい人にも明るさの違いで分かる組み合わせ。増減の人数はいちばん大きく太く。
   カードの幅が広いときは1件2行（名前と人数／棒と増減と増減率）、狭いとき（スマホ）は1件3行（名前と増減／棒／人数と増減率） */
:root { --up: #29a97f; --down: #c23a33; --tgrid: #e6e8ec; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --up: #36a684; --down: #c23a33; --tgrid: #2c323c; } }
:root[data-theme="dark"] { --up: #36a684; --down: #c23a33; --tgrid: #2c323c; }
.ten-cols { align-items: start; } /* 「もっと見る」で片方だけ長くしても、もう片方に空きを作らない */
.ten-card { container-type: inline-size; }
.ten-card .cardmeta span { display: inline-block; margin-right: 1em; } /* 「対象」と「期間」を分けて並べる */
.ten-card .cardmeta span { word-break: keep-all; overflow-wrap: anywhere; } /* 折り返すのは「→」の前後などだけ（日付の途中で切らない） */
.ten-sort { min-width: 0; }
.modes.tsort { display: grid; grid-template-columns: repeat(4, auto); gap: 1px; background: var(--btn-line); }
.modes.tsort button + button { border-left: 0; }
.modes.tsort button { padding: 6px 12px; }
ol.ten-list { list-style: none; margin: 0; padding: 0; }
.ten-row { display: grid; grid-template-columns: 1.6em minmax(0, 1fr) 8em 4.6em; column-gap: 8px; row-gap: 4px; align-items: center; font-size: 15px;
           grid-template-areas: "rk nm ct ct" ". bar dv rt"; padding: 9px 4px; border-bottom: 1px solid var(--line); }
.ten-row:not(.ten-head):not(.ten-axis):hover { background: var(--bg); }
.ten-rk { grid-area: rk; align-self: start; padding-top: 2px; text-align: right; font-size: 13px; color: var(--sub); font-variant-numeric: tabular-nums; }
.ten-nm { grid-area: nm; font-size: 16px; font-weight: 700; line-height: 1.45; word-break: keep-all; overflow-wrap: anywhere; } /* 長い名前は「・」の所で折り返し、途中で切らない */
.ten-mk { color: var(--mark); font-size: 13px; font-weight: 700; margin-left: 3px; }
.ten-ct { grid-area: ct; justify-self: end; font-size: 14px; color: var(--sub); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ten-bar { grid-area: bar; position: relative; height: 18px; }
.ten-gl { position: absolute; top: -9px; bottom: -9px; width: 1px; background: var(--tgrid); }
.ten-zero { position: absolute; top: -5px; bottom: -5px; width: 2px; margin-left: -1px; background: var(--sub); }
.ten-fill { position: absolute; top: 2px; height: 14px; min-width: 2px; }
.ten-fill.up { background: var(--up); }
.ten-fill.down { background: var(--down); }
.ten-dv { grid-area: dv; text-align: right; font-size: 18px; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; line-height: 1.2; }
.ten-row.none .ten-dv { font-weight: 600; font-size: 14px; color: var(--sub); }
.ten-rt { grid-area: rt; text-align: right; font-size: 14px; color: var(--sub); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ten-rl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* 広いときは列の見出しがあるので、読み上げだけ */
.ten-head { grid-template-areas: "rk nm ct ct" ". bar dv rt"; padding-top: 2px; padding-bottom: 4px; border-bottom-width: 2px; font-size: 13px; color: var(--sub); }
.ten-head .ten-nm, .ten-head .ten-dv { font-weight: 700; font-size: 13px; color: var(--sub); }
.ten-head .ten-ct, .ten-head .ten-rt { font-size: 13px; }
.ten-head .ten-bar { height: 0; }
.ten-axis { grid-template-areas: ". bar dv rt"; border-bottom: 0; padding-top: 4px; }
.ten-axis .ten-bar { height: 1.4em; }
.ten-tk { position: absolute; top: 0; font-size: 13px; color: var(--sub); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ten-ex { display: block; font-size: 14px; color: var(--sub); }
.ten-cap { font-size: 13px; color: var(--sub); margin: 8px 0 0; }
.ten-notes { padding-left: 1.2em; margin: 10px 0 4px; }
@container (max-width: 520px) { .modes.tsort { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (max-width: 400px) {
  .ten-sort { flex: 1 1 100%; }
  .ten-row { grid-template-columns: 1.6em minmax(0, 1fr) auto; grid-template-areas: "rk nm dv" ". bar bar" ". ct rt"; row-gap: 5px; padding: 10px 2px; }
  .ten-ct { justify-self: start; font-size: 13px; }
  .ten-rt { font-size: 13px; }
  .ten-rl { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
  .ten-head, .ten-axis { grid-template-areas: ". bar bar"; }
  .ten-head { display: none; }
}

/* 国籍・地域ごとの主な在留資格（積み上げ横棒）：棒の全体＝その国籍・地域の人数（100%）。上位3つの在留資格に色、それ以外は色なしの「上位3つ以外」。
   在留資格の色は決まった色（どのページ・どの国籍・地域でも同じ。make_site.py の VISA_COLOR）。よく隣り合う組み合わせ（技能実習と特定技能など）は、
   色の見分けにくい人にも区別できるよう明るさを変えてある。区分の中の字は、白か黒の読みやすいほう。区分の中に入らない名前・割合は出さず、棒の下の内わけで読む */
.vc-ei { background: #2f6fc4; color: #fff; }   /* 永住者 */
.vc-gj { background: #23407e; color: #fff; }   /* 技術・人文知識・国際業務 */
.vc-ry { background: #2e9e57; color: #1d2330; } /* 留学 */
.vc-jk { background: #f29a3d; color: #1d2330; } /* 技能実習 */
.vc-tg { background: #b8234a; color: #fff; }   /* 特定技能 */
.vc-tb { background: #6c3596; color: #fff; }   /* 特別永住者 */
.vc-kz { background: #5cc2dc; color: #1d2330; } /* 家族滞在 */
.vc-tj { background: #8f741c; color: #fff; }   /* 定住者 */
.vc-nh { background: #ee9cc0; color: #1d2330; } /* 日本人の配偶者等 */
.vc-tk { background: #6b7480; color: #fff; }   /* 特定活動 */
.vc-x { background: repeating-linear-gradient(135deg, #e3e6eb 0 6px, #c4cad3 6px 9px); color: #1d2330; } /* そのほかの在留資格（しま模様） */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .vc-x { background: repeating-linear-gradient(135deg, #3a404a 0 6px, #5a626e 6px 9px); color: #e7eaf0; } }
:root[data-theme="dark"] .vc-x { background: repeating-linear-gradient(135deg, #3a404a 0 6px, #5a626e 6px 9px); color: #e7eaf0; }
.xwrap { container-type: inline-size; }
.xintro { font-size: 15px; margin: 0 0 8px; }
ul.xlegend { list-style: none; margin: 0 0 6px; padding: 8px 10px; display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 14px; background: var(--bg); border-radius: 8px; }
ul.xlegend li { display: inline-flex; align-items: center; gap: 6px; }
ul.xlegend li > span:last-child, .xdet .xv, #cross .cardmeta { word-break: keep-all; overflow-wrap: anywhere; } /* 「・」や空きの所で折り返し、ことばの途中で切らない */
.xsw { display: inline-block; width: 14px; height: 14px; border-radius: 3px; flex: 0 0 auto; }
.xsw.xr { background: var(--sz); border: 1px solid var(--field); }
ol.xlist { list-style: none; margin: 0; padding: 0; }
.xrow { display: grid; grid-template-columns: 9.5em minmax(0, 1fr); grid-template-areas: "hd bar" ". det"; column-gap: 16px; row-gap: 6px;
        padding: 12px 0; border-bottom: 1px solid var(--line); }
.xhd { grid-area: hd; display: flex; flex-direction: column; justify-content: center; min-width: 0; line-height: 1.35; }
.xnm { font-weight: 700; font-size: 16px; word-break: keep-all; overflow-wrap: anywhere; } /* 国籍・地域の名前は途中で折り返さない（入らないときだけ） */
.xnm a { display: inline-block; padding: 2px 0; }
.xtot { font-weight: 700; font-size: 15px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.xbar { grid-area: bar; display: flex; height: 32px; border-radius: 6px; overflow: hidden; background: var(--sz); align-self: center; }
.xs { container-type: inline-size; height: 100%; display: flex; align-items: center; min-width: 0; overflow: hidden; cursor: default; }
.xs + .xs { border-left: 2px solid var(--card); } /* 区分のあいだに細いすき間 */
.xs.xr { background: transparent; color: var(--sub); }
.xs:hover { filter: brightness(1.08); }
.xl { padding: 0 6px; font-size: 13px; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.xs.xr .xl { font-weight: 600; }
/* 区分の幅が足りないときは、名前を省いて割合だけ → それも入らなければ何も書かない（名前の長さごとに、入る幅を決めてある） */
@container (max-width: 68px) { .xs.nl2 .xn { display: none; } }
@container (max-width: 81px) { .xs.nl3 .xn { display: none; } }
@container (max-width: 94px) { .xs.nl4 .xn { display: none; } }
@container (max-width: 107px) { .xs.nl5 .xn { display: none; } }
@container (max-width: 122px) { .xs.nl6 .xn, .xs.xr .xl { display: none; } }
@container (max-width: 133px) { .xs.nl7 .xn { display: none; } }
@container (max-width: 148px) { .xs.nl8 .xn { display: none; } }
@container (max-width: 36px) { .xl { display: none; } }
ul.xdet { grid-area: det; list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 2px 18px; font-size: 14px; }
ul.xdet li { display: inline-flex; align-items: center; gap: 6px; }
.xdet .xv { font-weight: 600; }
.xdet .xc { color: var(--sub); font-variant-numeric: tabular-nums; white-space: nowrap; }
.xrow.xme { background: var(--btn-soft); border-radius: 8px; padding-left: 10px; padding-right: 10px; } /* その国籍・地域のページでは、その行を目立たせる */
/* スマホ（狭いとき）：国籍・地域の名前と人数 → 棒 → 内わけ（1行に1つ）の順に縦に並べる */
@container (max-width: 560px) {
  .xrow { grid-template-columns: minmax(0, 1fr); grid-template-areas: "hd" "bar" "det"; row-gap: 8px; padding: 14px 0; }
  .xhd { flex-direction: row; justify-content: space-between; align-items: baseline; gap: 4px 12px; flex-wrap: wrap; }
  .xnm { font-size: 17px; }
  .xtot { font-size: 16px; }
  .xbar { height: 34px; }
  ul.xdet { flex-direction: column; gap: 4px; font-size: 15px; }
  ul.xdet li { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; gap: 8px; }
}

/* 難民の申請と、手続き中のくらし（nanmin-seido.html）：流れの図・2つの道・早見表（スマホでは立場ごとのカード）・期間の棒 */
ol.nflow { list-style: none; margin: 8px 0 0; padding: 0; counter-reset: nf; }
ol.nflow > li { position: relative; margin: 0 0 24px; padding: 10px 14px 10px 54px; border: 1px solid var(--line); border-radius: 10px; }
ol.nflow > li::before { counter-increment: nf; content: counter(nf); position: absolute; left: 12px; top: 10px; width: 30px; height: 30px; border-radius: 50%;
                        background: var(--accent); color: var(--card); font-weight: 700; font-size: 16px; display: flex; align-items: center; justify-content: center; }
ol.nflow > li:not(:last-child)::after { content: "↓"; position: absolute; left: 50%; bottom: -23px; transform: translateX(-50%); color: var(--sub); font-size: 17px; line-height: 22px; }
ol.nflow b.nt { display: block; font-size: 18px; }
ol.nflow p { margin: 2px 0 0; font-size: 16px; }
.nfork { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; margin-top: 6px; font-size: 16px; }
.nfork > div, .npath > div { border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; background: var(--bg); }
.npath { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; margin: 10px 0 16px; }
.npath .nbig { font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; }
.nsrc { margin-top: 10px; font-size: 14px; }
.nvh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
table.nmx th[scope="row"] { white-space: normal; min-width: 9em; color: var(--text); font-size: 15px; vertical-align: top; }
table.nmx th[scope="row"] small { display: block; font-weight: 400; color: var(--sub); font-size: 13px; line-height: 1.4; }
table.nmx td { vertical-align: top; font-size: 14px; line-height: 1.45; }
table.t.nmx td:not(.n) { min-width: 5em; } /* 広い画面で横にずらさずに入るように（見出しも折り返す） */
table.t.nmx thead th { white-space: normal; vertical-align: bottom; }
table.t.nmx th, table.t.nmx td { padding: 7px 5px; }
table.nmx .mk { display: block; font-size: 20px; font-weight: 700; line-height: 1.3; }
ul.nbar { list-style: none; margin: 6px 0 12px; padding: 0; font-size: 15px; max-width: 640px; }
ul.nbar li { display: grid; grid-template-columns: 4.5em minmax(0, 1fr) 5.5em; gap: 8px; align-items: center; padding: 3px 0; border-bottom: 1px solid var(--line); }
ul.nbar .tr { height: 14px; }
ul.nbar .fill { display: block; height: 14px; background: var(--bar); border-radius: 0 4px 4px 0; }
ul.nbar .v { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 760px) {
  .nfork, .npath { grid-template-columns: minmax(0, 1fr); }
  table.nmx, table.nmx tbody, table.nmx tr, table.nmx th, table.nmx td { display: block; width: 100%; }
  table.nmx thead { display: none; }
  table.nmx tr { border: 1px solid var(--line); border-radius: 10px; margin: 0 0 12px; padding: 2px 12px 6px; }
  table.t.nmx th[scope="row"] { font-size: 17px; padding: 8px 0; border-bottom: 2px solid var(--line); }
  table.t.nmx td:not(.n) { min-width: 0; }
  table.t.nmx td { padding: 6px 0; font-size: 15px; display: grid; grid-template-columns: 8.5em minmax(0, 1fr); gap: 8px; }
  table.nmx td::before { content: attr(data-label); color: var(--sub); font-weight: 700; font-size: 14px; }
  table.nmx td:last-child { border-bottom: 0; }
  table.nmx .mk { display: inline; font-size: 18px; margin-right: 6px; }
}
@media (max-width: 600px) { ol.nflow > li { padding-left: 48px; } ol.nflow > li::before { left: 10px; } }

/* 3分でわかる（特定活動のページ。make_site.py の tokutei_sanpun）：図が主役。色は緑・青・オレンジ（ピンクは使わない）。
   字は小さくしない（説明 17px、注は 15px、数は 24px 以上）。ホバーしなくても数が読めるように、数はいつも書いておく */
:root { --sp-g: #1f7a4f; --sp-gs: #e9f5ee; --sp-b: #1f5fae; --sp-bs: #eaf2fc; --sp-o: #b0500f; --sp-ob: #e8742f; --sp-os: #fdf1e6; --sp-sk: #f1cfae; --sp-hr: #3d3a44; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --sp-g: #5cc492; --sp-gs: #15281e; --sp-b: #8ab8ea; --sp-bs: #172638; --sp-o: #f3a46b; --sp-ob: #d9692c; --sp-os: #33251a; --sp-sk: #e6c09d; --sp-hr: #191820; }
}
:root[data-theme="dark"] { --sp-g: #5cc492; --sp-gs: #15281e; --sp-b: #8ab8ea; --sp-bs: #172638; --sp-o: #f3a46b; --sp-ob: #d9692c; --sp-os: #33251a; --sp-sk: #e6c09d; --sp-hr: #191820; }
.sp-ic { color: var(--sp-g); flex: 0 0 auto; }
.sp-ic.b { color: var(--sp-b); } .sp-ic.o { color: var(--sp-o); }
.sp-ic .f { fill: currentColor; }
.sp-ic .h { fill: none; stroke: currentColor; stroke-width: 4; stroke-linecap: round; }
.sp-ic .hb { stroke-width: 6; }
.sp-ic .w { fill: var(--card); }
.sp-ic .hw { fill: none; stroke: var(--card); stroke-width: 3; }
/* 入口の2つのボタン（同じ形・同じ高さ。色だけ緑と青） */
.gates { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 10px 0 18px; }
.gate { display: flex; align-items: center; gap: 14px; min-height: 104px; padding: 14px 16px; border-radius: 14px; border: 2px solid var(--sp-g); background: var(--sp-gs);
        color: var(--text); text-decoration: none; }
.gate-b { border-color: var(--sp-b); background: var(--sp-bs); }
.gate:hover { box-shadow: 0 4px 14px rgba(0,0,0,.12); }
.gate .sp-ic { width: 56px; height: 56px; }
.gate .gt { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.gate small { font-size: 14px; font-weight: 700; color: var(--sp-g); }
.gate b { font-size: 25px; line-height: 1.3; color: var(--sp-g); }
.gate-b small, .gate-b b { color: var(--sp-b); }
.gate .gd { font-size: 15px; color: var(--sub); line-height: 1.5; }
.gate .ga { font-size: 24px; font-weight: 700; color: var(--sp-g); }
.gate-b .ga { color: var(--sp-b); }
/* 帯の見出し（3分でわかる・詳しく調べる） */
.sp-band { margin: 18px 0 10px; }
.sp-k { display: inline-block; padding: 2px 14px; border-radius: 999px; background: var(--sp-g); color: #fff; font-weight: 700; font-size: 15px; }
.sp-band-b .sp-k { background: var(--sp-b); }
.sp-band h2 { font-size: 26px; margin: 6px 0 2px; }
.sp-band p { margin: 0; font-size: 15px; color: var(--sub); }
.sp-steps { display: flex; flex-wrap: wrap; gap: 6px 8px; margin: 0 0 14px; }
.sp-steps a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 4px 14px 4px 6px; border-radius: 999px; border: 1px solid var(--line);
              background: var(--card); color: var(--text); text-decoration: none; font-size: 15px; font-weight: 600; }
.sp-steps a:hover { border-color: var(--sp-g); }
.sp-steps a b { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--sp-g); color: #fff; }
.sp-steps a.o b { background: var(--sp-ob); }
/* 1つのステップ */
article.sp-s { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 20px; margin: 0 0 16px; }
article.sp-s.o { border: 3px solid var(--sp-ob); }
.sp-hd { display: flex; align-items: center; gap: 12px; }
.sp-no { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; width: 58px; height: 58px; border-radius: 50%; flex: 0 0 auto;
         background: var(--sp-g); color: #fff; font-size: 11px; font-weight: 700; line-height: 1; letter-spacing: .04em; }
.sp-s.o .sp-no { background: var(--sp-ob); }
.sp-no b { font-size: 26px; line-height: 1; }
.sp-hd h3 { margin: 0; font-size: 27px; line-height: 1.35; }
.sp-ans { font-size: 20px; font-weight: 700; line-height: 1.6; margin: 12px 0 14px; }
.sp-ans em, .sp-say em { font-style: normal; color: var(--sp-g); }
.sp-s.o .sp-ans em, .sp-s.o .sp-say em { color: var(--sp-o); }
.sp-say { font-size: 21px; font-weight: 700; text-align: center; line-height: 1.5; margin: 16px 0 6px; }
.sp-s p { margin: 8px 0; }
.sp-cap { font-size: 15px; color: var(--sub); }
.sp-pt { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 18px 0 0; padding: 12px 16px; border-radius: 12px; background: var(--sp-gs); border-left: 6px solid var(--sp-g); }
.sp-s.o .sp-pt { background: var(--sp-os); border-left-color: var(--sp-ob); }
.sp-pt > b { color: var(--sp-g); font-size: 15px; white-space: nowrap; }
.sp-s.o .sp-pt > b { color: var(--sp-o); }
.sp-pt p { margin: 0; flex: 1 1 16em; }
.sp-more { text-align: right; margin: 10px 0 0 !important; }
.sp-more a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; }
h4.sp-sub { font-size: 21px; line-height: 1.45; margin: 24px 0 8px; padding-top: 18px; border-top: 1px solid var(--line); }
/* STEP 1：3人の絵 */
ul.sp-people { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.sp-people li { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px; border-radius: 14px; border: 2px solid var(--sp-g); background: var(--sp-gs); text-align: center; }
.sp-people li.b { border-color: var(--sp-b); background: var(--sp-bs); } .sp-people li.o { border-color: var(--sp-ob); background: var(--sp-os); }
.sp-people b { font-size: 22px; line-height: 1.35; }
.sp-people li.g b { color: var(--sp-g); } .sp-people li.b b { color: var(--sp-b); } .sp-people li.o b { color: var(--sp-o); }
.sp-people .ex { font-size: 15px; line-height: 1.6; }
.sp-tag { font-size: 14px; padding: 1px 10px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); color: var(--sub); white-space: nowrap; }
svg.sp-man { width: 120px; height: 90px; }
.sp-man .sk { fill: var(--sp-sk); } .sp-man .hr { fill: var(--sp-hr); }
.sp-man .sh, .sp-man .bd { fill: var(--sp-g); }
.sp-man.b .sh, .sp-man.b .bd { fill: var(--sp-b); } .sp-man.o .sh, .sp-man.o .bd { fill: var(--sp-ob); }
.sp-man .mk { fill: var(--card); } .sp-man .mk .ln { fill: none; stroke: var(--card); stroke-width: 2.5; stroke-linecap: round; }
/* STEP 2：横棒（数と割合はいつも見える。行を押すと説明へ） */
.sp-tot { font-size: 17px; margin: 0 0 4px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; }
.sp-tot b { font-size: 34px; line-height: 1.2; font-variant-numeric: tabular-nums; }
.sp-tot span { color: var(--sub); font-size: 15px; }
ol.sp-bars { list-style: none; margin: 6px 0; padding: 0; }
.sp-bars li { border-bottom: 1px solid var(--line); }
.sp-bars a { display: block; padding: 10px 6px; color: var(--text); text-decoration: none; border-radius: 8px; }
.sp-bars a:hover { background: var(--bg); }
.sp-bh { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 12px; }
.sp-bn { font-size: 17px; font-weight: 700; line-height: 1.45; }
.sp-bn small { font-weight: 400; font-size: 15px; color: var(--sub); }
.sp-bv { white-space: nowrap; font-size: 15px; margin-left: auto; }
.sp-bv b { font-size: 24px; font-variant-numeric: tabular-nums; }
.sp-bv i { font-style: normal; font-weight: 700; font-size: 18px; margin-left: 10px; color: var(--sp-b); font-variant-numeric: tabular-nums; }
.sp-bt { display: block; height: 18px; margin-top: 6px; border-radius: 4px; background: var(--bg); }
.sp-bt span { display: block; height: 100%; min-width: 3px; border-radius: 4px; background: var(--sp-b); }
.sp-bars li.o { border: 0; margin: 4px 0; border-radius: 10px; background: var(--sp-os); outline: 2px solid var(--sp-ob); }
.sp-bars li.o a:hover { background: transparent; }
.sp-bars li.o .sp-bt { background: var(--card); } .sp-bars li.o .sp-bt span { background: var(--sp-ob); } .sp-bars li.o .sp-bv i { color: var(--sp-o); }
.sp-tg { display: inline-block; margin-left: 8px; padding: 0 10px; border-radius: 999px; background: var(--sp-ob); color: #fff; font-size: 14px; vertical-align: 2px; white-space: nowrap; }
.sp-bars li.rest .sp-bt span { background: repeating-linear-gradient(135deg, var(--co) 0 6px, transparent 6px 10px); border: 1px solid var(--co); }
.sp-bars li.rest .sp-bv i { color: var(--sub); }
/* STEP 3：告示にある・ない の2つのカード／在留カードと指定書の絵／働けるか */
.sp-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.sp-card { padding: 16px; border-radius: 14px; border: 2px solid var(--sp-g); background: var(--sp-gs); }
.sp-card.b { border-color: var(--sp-b); background: var(--sp-bs); }
.sp-card h4 { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; font-size: 22px; color: var(--sp-g); }
.sp-card.b h4 { color: var(--sp-b); }
.sp-card h4 .n { font-size: 28px; line-height: 1; }
.sp-card p { margin: 8px 0 0; }
.sp-card .ex { padding: 8px 10px; border-radius: 8px; background: var(--card); font-size: 16px; }
.sp-card .ex b { display: inline-block; margin-right: 8px; padding: 0 8px; border-radius: 6px; background: var(--sp-g); color: #fff; font-size: 14px; }
.sp-card.b .ex b { background: var(--sp-b); }
.sp-card .sm { font-size: 15px; font-weight: 700; }
.sp-both { margin: 12px 0 0 !important; padding: 10px 14px; border: 2px dashed var(--sub); border-radius: 12px; text-align: center; font-size: 18px; font-weight: 700; }
.sp-docs { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 16px; margin: 12px 0; }
.sp-docs figure { margin: 0; }
.sp-docs figcaption { margin-top: 6px; font-size: 15px; color: var(--sub); text-align: center; }
.sp-rc { width: 330px; max-width: 100%; }
.sp-rc .rc-p { padding: 10px 12px 12px; border: 2px solid var(--sp-b); border-radius: 12px; background: var(--sp-bs); }
.sp-rc .rc-h { font-weight: 700; color: var(--sp-b); font-size: 17px; margin-bottom: 4px; }
.sp-rc .rc-row { display: grid; grid-template-columns: 7.5em minmax(0, 1fr); gap: 8px; padding: 4px 0; font-size: 15px; }
.sp-rc .rc-row span { color: var(--sub); }
.sp-rc .rc-row.hi b { background: var(--sp-os); outline: 2px solid var(--sp-ob); border-radius: 4px; padding: 0 4px; }
.sp-docs small { font-weight: 400; font-size: 13px; color: var(--sub); margin-left: 4px; }
.sp-arw { font-size: 32px; font-weight: 700; color: var(--sub); }
.sp-sd { width: 240px; max-width: 100%; }
.sp-sd .sd-p { padding: 12px 16px 14px; border: 1px solid var(--field); background: var(--card); box-shadow: 4px 4px 0 var(--line); }
.sp-sd .sd-h { text-align: center; font-weight: 700; font-size: 18px; letter-spacing: .2em; }
.sp-sd .sd-l { margin: 6px 0 0; font-size: 15px; font-weight: 700; color: var(--sp-o); }
.sp-sd .sd-lines i { display: block; height: 8px; margin: 8px 0; border-radius: 4px; background: var(--sp-os); outline: 1px solid var(--sp-ob); }
.sp-sd .sd-lines i:last-child { width: 60%; }
ul.sp-work { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.sp-work li { padding: 12px 14px; border-radius: 12px; border: 2px solid var(--sp-g); background: var(--sp-gs); font-size: 15px; line-height: 1.6; }
.sp-work li.mid { border-color: var(--sp-b); background: var(--sp-bs); }
.sp-work li.ng { border-color: var(--field); background: var(--bg); }
.sp-work b { display: block; margin-bottom: 4px; font-size: 18px; line-height: 1.4; }
.sp-work li.ok b { color: var(--sp-g); } .sp-work li.mid b { color: var(--sp-b); }
/* STEP 4：「その他」 */
.sp-kpis { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.sp-kpis > div { padding: 12px 14px; border-radius: 14px; background: var(--sp-os); border: 2px solid var(--sp-ob); }
.sp-kpis span { display: block; font-size: 15px; color: var(--sub); line-height: 1.5; }
.sp-kpis b { display: block; font-size: 34px; line-height: 1.25; color: var(--sp-o); font-variant-numeric: tabular-nums; }
.sp-kpis > div:first-child b { font-size: 44px; }
.sp-kpis b small { font-size: 18px; margin-left: 2px; }
.sp-mx { display: grid; grid-template-columns: 10em minmax(0, 1fr) minmax(0, 1fr); gap: 6px; margin: 8px 0; }
.sp-mx .mx-r { display: contents; }
.sp-mx .mx-r > span { padding: 10px 12px; border-radius: 10px; font-size: 16px; line-height: 1.5; }
.sp-mx .mx-ch { font-weight: 700; text-align: center; background: var(--bg); align-self: end; }
.sp-mx .mx-ch.o { background: var(--sp-ob); color: #fff; }
.sp-mx .mx-rh { display: flex; align-items: center; font-weight: 700; background: var(--sp-gs); color: var(--sp-g); border-left: 6px solid var(--sp-g); }
.sp-mx .mx-rh.b { background: var(--sp-bs); color: var(--sp-b); border-left-color: var(--sp-b); }
.sp-mx .mx-c { border: 1px solid var(--line); background: var(--card); }
.sp-mx .mx-c.o { border: 2px solid var(--sp-ob); background: var(--sp-os); font-weight: 600; }
.sp-grps { display: grid; gap: 16px; }
.sp-grp h4 { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; font-size: 20px; }
.sp-grp h4 .sp-ic { width: 44px; height: 44px; }
.sp-grp .gl { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: var(--sp-g); color: #fff; font-size: 17px; flex: 0 0 auto; }
.sp-grp.b .gl { background: var(--sp-b); } .sp-grp.o .gl { background: var(--sp-ob); }
.sp-grp ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.sp-grp a { display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); border-top: 5px solid var(--sp-g);
            background: var(--card); color: var(--text); text-decoration: none; }
.sp-grp.b a { border-top-color: var(--sp-b); } .sp-grp.o a { border-top-color: var(--sp-ob); }
.sp-grp a:hover { border-color: var(--accent); }
.sp-grp a b { font-size: 17px; line-height: 1.45; }
.sp-grp a span { font-size: 15px; line-height: 1.65; color: var(--sub); }
.sp-grp a .go { margin-top: auto; color: var(--accent); font-weight: 700; }
.sp-warn { margin: 18px 0 0; padding: 14px 16px; border-radius: 12px; border: 2px solid var(--sp-ob); background: var(--card); }
.sp-warn .wl { display: inline-block; padding: 0 12px; border-radius: 999px; background: var(--sp-ob); color: #fff; font-size: 15px; }
.sp-warn ul { margin: 8px 0 0; padding-left: 1.3em; }
.sp-warn li { margin: 6px 0; }
.sp-cta { text-align: center; margin: 18px 0 0 !important; }
.sp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 10px 22px; border-radius: 12px;
          background: var(--btn); color: var(--btn-ink); font-size: 18px; font-weight: 700; text-decoration: none; }
.sp-btn:hover { filter: brightness(.95); }
/* 日本語の見出し・ボタンは、ことばの切れ目で折り返す（対応していないブラウザではふつうに折り返す） */
.sp-hd h3, .sp-ans, .sp-say, h4.sp-sub, .sp-band h2, .sp-btn, .sp-card h4, .sp-grp h4, .sp-grp a b, .sp-people b, .sp-bn, .sp-inc .nm, .gate b { word-break: auto-phrase; text-wrap: balance; }
/* STEP 5：3つの縦棒と、増えた区分 */
.sp-up { text-align: center; font-size: 19px; font-weight: 700; margin: 4px 0 10px !important; }
.sp-up b { font-size: 30px; color: var(--sp-b); font-variant-numeric: tabular-nums; }
.sp-col, .sp-colx { display: flex; justify-content: space-around; gap: 12px; max-width: 560px; margin: 0 auto; padding: 0 8px; }
.sp-col { align-items: flex-end; height: 250px; border-bottom: 2px solid var(--text); }
.sp-col > div { flex: 1 1 0; max-width: 140px; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; }
.sp-col .v { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; margin-bottom: 4px; }
.sp-col .v small { font-size: 15px; margin-left: 1px; }
.sp-col .bar { display: block; width: 100%; background: var(--sp-b); border-radius: 6px 6px 0 0; }
.sp-col .bar.q { background: repeating-linear-gradient(135deg, var(--sp-b) 0 7px, var(--sp-bs) 7px 12px); border: 2px solid var(--sp-b); border-bottom: 0; }
.sp-colx { margin-top: 6px; }
.sp-colx span { flex: 1 1 0; max-width: 140px; text-align: center; font-size: 15px; font-weight: 600; line-height: 1.45; }
.sp-colx small { display: block; width: max-content; margin: 2px auto 0; padding: 0 8px; border-radius: 999px; border: 1px solid var(--sp-b); color: var(--sp-b); font-size: 13px; }
ul.sp-inc { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.sp-inc li { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: 12px; background: var(--sp-bs); border: 1px solid var(--line); }
.sp-inc .nm { font-size: 17px; font-weight: 700; line-height: 1.45; }
.sp-inc b { font-size: 30px; line-height: 1.2; color: var(--sp-b); font-variant-numeric: tabular-nums; }
.sp-inc b small { font-size: 17px; margin-left: 2px; }
.sp-inc .ds { font-size: 15px; line-height: 1.6; }
.sp-inc .ds small { display: block; margin-top: 4px; font-size: 15px; color: var(--sub); }
ul.sp-notes { margin: 14px 0 0; padding-left: 1.3em; font-size: 15px; color: var(--sub); }
ul.sp-notes li { margin: 4px 0; }
/* 3分でわかるのあとの案内（.related の形を使う。行き先はこのページの中なので ↓） */
.sp-next { background: var(--card); border: 2px solid var(--sp-b); border-radius: 14px; padding: 18px 20px; margin: 0 0 8px; }
.sp-next h3 { margin: 0; font-size: 24px; }
.sp-next .sp-cap { margin: 2px 0 10px; }
.sp-next a { min-height: 64px; }
.sp-next a::after { content: "↓"; }
/* 「それぞれの中身」の一覧：名前で探す・告示で絞る・名前と人数だけ（tokutei.js） */
.tk-tools { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; margin: 8px 0 6px; }
.tk-tools .tq { flex: 1 1 220px; }
.tk-tools .tq input { width: 100%; }
@media (max-width: 600px) { /* 1つずつ横いっぱいに（dash.css の .dctl の半分の幅より強く） */
  .tk-tools > *, .tk-tools > .dctl, .tk-tools > .tq { flex: 1 1 100%; } .tk-tools .modes { display: flex; flex-wrap: nowrap; } .tk-tools .modes button { flex: 1 1 auto; padding: 6px 8px; } }
.tkn { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.tk-kb { display: inline-block; padding: 0 8px; border-radius: 999px; font-size: 13px; font-weight: 700; white-space: nowrap; border: 1px solid var(--sp-g); color: var(--sp-g); background: var(--sp-gs); }
.tk-kb.out { border-color: var(--sp-b); color: var(--sp-b); background: var(--sp-bs); }
.tk-kb.mix { border-color: var(--sp-ob); color: var(--sp-o); background: var(--sp-os); }
ul.tkl.brief li { padding: 8px 0; }
ul.tkl.brief li > p { display: none; }
@media (max-width: 760px) {
  .sp-two, ul.sp-work, ul.sp-inc, .sp-grp ul { grid-template-columns: minmax(0, 1fr); }
  ul.sp-people { grid-template-columns: minmax(0, 1fr); }
  .sp-people li { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; gap: 2px 12px; text-align: left; justify-items: start; }
  .sp-people li svg.sp-man { grid-row: 1 / span 3; width: 96px; height: 72px; }
  .sp-kpis { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .sp-kpis > div:first-child { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .gate { flex-direction: column; align-items: flex-start; gap: 4px; min-height: 0; padding: 12px; }
  .gate .sp-ic { width: 40px; height: 40px; }
  .gate b { font-size: 21px; }
  .gate .gd { font-size: 14px; }
  .gate .ga { display: none; }
  .sp-band h2 { font-size: 23px; }
  article.sp-s { padding: 16px 14px; }
  .sp-no { width: 50px; height: 50px; } .sp-no b { font-size: 22px; }
  .sp-hd h3 { font-size: 23px; }
  .sp-ans { font-size: 18px; }
  .sp-say { font-size: 19px; }
  .sp-kpis b { font-size: 28px; } .sp-kpis > div:first-child b { font-size: 38px; }
  .sp-mx { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .sp-mx .mx-c0 { display: none; }
  .sp-mx .mx-rh { grid-column: 1 / -1; margin-top: 6px; }
  .sp-mx .mx-r > span { font-size: 15px; padding: 8px 10px; }
  .sp-docs { flex-direction: column; }
  .sp-arw { transform: rotate(90deg); line-height: 1; }
  .sp-col { height: 210px; gap: 8px; padding: 0 2px; }
  .sp-col .v { font-size: 17px; } .sp-col .v small { font-size: 13px; }
  .sp-colx { gap: 8px; padding: 0 2px; } .sp-colx span { font-size: 14px; }
  .sp-next { padding: 14px; }
}

/* 3分でわかる 定住者（make_site.py の teiju_sanpun）：形は上の .sp-* を使い、定住者だけの図をここに。
   棒の長さは人数・割合に比例させる（面積と数を一致させる）。色の上の字は、暗い画面でも読めるように --card や --tj-*t で決める */
:root { --tj-1: #173f73; --tj-1t: #ffffff; --tj-2: #336fb5; --tj-2t: #ffffff; --tj-3: #a9c8ec; --tj-3t: #10233a; --tj-o: #b0500f; --tj-ot: #ffffff; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --tj-1: #b9d3f1; --tj-1t: #0d1a2a; --tj-2: #6a9fde; --tj-2t: #0d1a2a; --tj-3: #2c5687; --tj-3t: #ffffff; --tj-o: #f3a46b; --tj-ot: #2a1405; }
}
:root[data-theme="dark"] { --tj-1: #b9d3f1; --tj-1t: #0d1a2a; --tj-2: #6a9fde; --tj-2t: #0d1a2a; --tj-3: #2c5687; --tj-3t: #ffffff; --tj-o: #f3a46b; --tj-ot: #2a1405; }
/* ステップの下の「前のSTEP・詳しく見る・次のSTEP」 */
nav.tj-pn { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, 1fr); gap: 8px; margin: 16px 0 0; }
.tj-pn a { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 52px; padding: 8px 12px; border-radius: 12px; border: 2px solid var(--line);
           background: var(--card); color: var(--text); text-decoration: none; font-weight: 700; font-size: 16px; text-align: center; line-height: 1.4; }
.tj-pn a:hover { border-color: var(--sp-g); }
.tj-pn .dt { border-color: var(--sp-b); color: var(--sp-b); background: var(--sp-bs); }
.tj-pn .nx { border-color: var(--sp-g); background: var(--sp-g); color: var(--card); }
.tj-pn .nx:hover { filter: brightness(.95); }
/* STEP 1：定住者と永住者の比べる表（左の列が項目） */
.tj-def { font-size: 17px; margin: 0 0 12px !important; }
.tj-cmp { display: grid; grid-template-columns: 6.5em minmax(0, 1fr) minmax(0, 1fr); gap: 6px; }
.tj-cmp .r { display: contents; }
.tj-cmp .r > span { display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 10px 12px; border-radius: 10px; min-width: 0; }
.tj-cmp .c0 { font-weight: 700; font-size: 17px; background: var(--bg); }
.tj-cmp .h > .c0 { background: transparent; }
.tj-cmp .h > .g, .tj-cmp .h > .b { align-items: center; padding: 8px 6px; border: 2px solid var(--sp-g); background: var(--sp-gs); }
.tj-cmp .h > .b { border-color: var(--sp-b); background: var(--sp-bs); }
.tj-cmp .h b { font-size: 24px; line-height: 1.3; color: var(--sp-g); }
.tj-cmp .h > .b b { color: var(--sp-b); }
.tj-cmp .h svg.sp-man { width: 96px; height: 72px; }
.tj-cmp .d > .g, .tj-cmp .d > .b, .tj-cmp .s > .g, .tj-cmp .s > .b { border: 1px solid var(--line); background: var(--card); }
.tj-cmp .d > .g { border-left: 6px solid var(--sp-g); } .tj-cmp .d > .b { border-left: 6px solid var(--sp-b); }
.tj-cmp .d b, .tj-cmp .s b { font-size: 22px; line-height: 1.35; }
.tj-cmp .d > .g b { color: var(--sp-g); } .tj-cmp .d > .b b { color: var(--sp-b); }
.tj-cmp .s > .g, .tj-cmp .s > .b { background: var(--bg); }
.tj-cmp small { font-size: 15px; color: var(--sub); line-height: 1.55; }
.sp-man .mk .lb { fill: none; stroke: var(--sp-g); stroke-width: 2.5; stroke-linecap: round; }
.sp-man.b .mk .lb { stroke: var(--sp-b); }
/* STEP 2：告示にある人・ない人（人の絵と1文） */
.tj-two .sp-card p.lb { margin: 2px 0 0; font-weight: 700; }
ul.tj-ppl { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.tj-ppl a { display: flex; align-items: center; gap: 8px; height: 100%; padding: 8px 12px 8px 4px; border-radius: 12px; background: var(--card); border: 1px solid var(--line);
            color: var(--text); text-decoration: none; }
.tj-ppl a:hover { border-color: var(--accent); }
.tj-ppl svg.sp-man { flex: 0 0 auto; width: 76px; height: 57px; }
.tj-ppl .tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tj-ppl b { font-size: 18px; line-height: 1.4; }
.tj-ppl .tx span { font-size: 15px; line-height: 1.6; color: var(--sub); }
.sp-card .tj-caution { color: var(--sp-o); }
/* STEP 3：100% の積み上げ棒（幅＝割合）と、押せる凡例 */
.tj-brace { position: relative; height: 30px; margin-top: 10px; }
.tj-brace span { position: absolute; bottom: 0; height: 18px; border: 3px solid var(--sp-ob); border-bottom: 0; border-radius: 8px 8px 0 0; }
.tj-brace b { position: absolute; top: -13px; padding: 0 6px; background: var(--card); color: var(--sp-o); font-size: 15px; line-height: 1.4; white-space: nowrap; }
.tj-brace .rt b { right: 6px; } .tj-brace .lt b { left: 6px; }
.tj-stack { display: flex; height: 64px; border-radius: 8px; overflow: hidden; margin: 0 0 4px; }
.tj-stack a { flex: none; display: flex; flex-direction: column; justify-content: center; align-items: center; min-width: 0; text-decoration: none; line-height: 1.25;
              font-weight: 700; box-shadow: inset -2px 0 0 var(--card); }
.tj-stack a:last-child { box-shadow: none; }
.tj-stack .s1 { background: var(--tj-1); color: var(--tj-1t); } .tj-stack .s2 { background: var(--tj-2); color: var(--tj-2t); }
.tj-stack .s3 { background: var(--tj-3); color: var(--tj-3t); } .tj-stack .so { background: var(--tj-o); color: var(--tj-ot); }
.tj-stack .nm { max-width: 100%; padding: 0 4px; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tj-stack .pc { font-size: 19px; font-variant-numeric: tabular-nums; }
.tj-stack a:hover { filter: brightness(1.08); }
ol.tj-leg { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.tj-leg a { display: flex; align-items: center; gap: 10px; height: 100%; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--card);
            color: var(--text); text-decoration: none; }
.tj-leg a:hover { border-color: var(--accent); }
.tj-leg .sw { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 5px; }
.tj-leg .s1 .sw { background: var(--tj-1); } .tj-leg .s2 .sw { background: var(--tj-2); } .tj-leg .s3 .sw { background: var(--tj-3); } .tj-leg .so .sw { background: var(--tj-o); }
.tj-leg .nm { flex: 1 1 auto; min-width: 0; font-size: 17px; font-weight: 700; line-height: 1.45; }
.tj-leg .nm small { display: block; font-weight: 400; font-size: 14px; color: var(--sub); }
.tj-leg .v { white-space: nowrap; text-align: right; font-size: 15px; }
.tj-leg .v b { font-size: 22px; font-variant-numeric: tabular-nums; }
.tj-leg .v em { display: block; font-style: normal; font-weight: 700; font-size: 18px; color: var(--sp-b); font-variant-numeric: tabular-nums; }
.tj-leg li.so a { border: 2px solid var(--sp-ob); background: var(--sp-os); }
.tj-leg li.so .v em { color: var(--sp-o); }
/* グラフの下の「時点・割合の分母・出典」 */
p.gsrc { font-size: 15px; color: var(--sub); line-height: 1.6; margin: 8px 0 12px; padding-left: 10px; border-left: 3px solid var(--line); }
.tj-sk { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; margin: 10px 0 0; padding: 8px 12px; border-radius: 10px; border: 1px dashed var(--field);
         font-size: 15px; color: var(--sub); }
.tj-sk > b { white-space: nowrap; }
.tj-sk span { flex: 1 1 16em; } .tj-sk span b { color: var(--text); font-size: 17px; font-variant-numeric: tabular-nums; }
/* STEP 4：統計でわかること（数）と、制度上「その他」に入る人の例（箱。箱の大きさは人数ではない） */
.sp-kpis b.tj-w { font-size: 26px; line-height: 1.5; }
p.tj-lab { margin: 16px 0 6px !important; }
.tj-bucket { padding: 12px; border-radius: 14px; border: 3px solid var(--sp-ob); background: var(--sp-os); }
.tj-bucket .bh { margin: 0 0 10px !important; text-align: center; font-size: 19px; font-weight: 700; color: var(--sp-o); }
.tj-bucket .bin { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.tj-bucket .bin > div { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px 14px; border-radius: 12px; border: 2px dashed var(--sp-g); background: var(--card); }
.tj-bucket .bin > .b { border-color: var(--sp-b); }
.tj-bucket .bin b { font-size: 19px; color: var(--sp-g); } .tj-bucket .bin .b b { color: var(--sp-b); }
.tj-bucket .ch { display: flex; flex-wrap: wrap; gap: 6px; }
.tj-bucket .ch a { display: inline-flex; align-items: center; min-height: 40px; padding: 2px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg);
                   color: var(--text); text-decoration: none; font-size: 15px; font-weight: 600; line-height: 1.4; }
.tj-bucket .ch a:hover { border-color: var(--accent); }
.tj-bucket .q { margin-top: auto; padding: 2px 12px; border-radius: 8px; border: 1px dashed var(--sub); background: var(--bg); color: var(--sub); font-size: 15px; font-weight: 700; }
.sp-pt.tj-key p { font-size: 19px; font-weight: 700; line-height: 1.6; }
.tj-tag { display: inline-block; padding: 1px 10px; border-radius: 999px; font-size: 14px; font-weight: 700; line-height: 1.6; white-space: nowrap; vertical-align: 2px;
          border: 1px solid var(--sp-b); background: var(--sp-bs); color: var(--sp-b); }
.tj-tag.s { border-color: var(--sp-g); background: var(--sp-gs); color: var(--sp-g); }
.tj-tag.u { border: 1px dashed var(--sub); background: var(--bg); color: var(--sub); }
h3 .tj-tag { margin-right: 8px; }
p.tj-lg { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: 15px; color: var(--sub); }
p.tj-lg > span { display: inline-flex; align-items: center; gap: 6px; }
/* STEP 5：増減の式と、0の線から左右にのびる棒（棒の長さ＝人数） */
.tj-per { text-align: center; font-size: 17px; font-weight: 700; margin: 0 0 10px !important; }
.tj-eq { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; margin: 0 0 16px; }
.tj-eq > div { display: flex; flex-direction: column; align-items: center; min-width: 9.5em; padding: 10px 14px; border-radius: 12px; text-align: center; }
.tj-eq span { font-size: 15px; color: var(--sub); }
.tj-eq b { font-size: 30px; line-height: 1.25; font-variant-numeric: tabular-nums; } .tj-eq b small { font-size: 16px; margin-left: 2px; }
.tj-eq .o { background: var(--sp-os); border: 2px solid var(--sp-ob); } .tj-eq .o b { color: var(--sp-o); }
.tj-eq .x { background: var(--bg); border: 2px solid var(--field); }
.tj-eq .t { background: var(--sp-bs); border: 2px solid var(--sp-b); } .tj-eq .t b { color: var(--sp-b); }
.tj-eq .op { font-size: 28px; font-weight: 700; color: var(--sub); }
.tj-div { display: grid; grid-template-columns: 10em minmax(0, 1fr) 7.5em; gap: 12px; align-items: center; margin: 4px 0 8px; }
.tj-div .r { display: contents; }
.tj-div .nm { font-size: 17px; font-weight: 700; line-height: 1.4; }
.tj-div .tr { position: relative; height: 36px; border-radius: 4px; background: var(--bg); }
.tj-div .tr::before { content: ""; position: absolute; left: var(--z); top: -6px; bottom: -6px; border-left: 2px solid var(--text); }
.tj-div .bar { position: absolute; top: 5px; bottom: 5px; border-radius: 3px; }
.tj-div .t .bar { background: var(--sp-b); } .tj-div .o .bar { background: var(--sp-ob); } .tj-div .x .bar { background: var(--field); }
.tj-div .v { font-size: 22px; font-weight: 700; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tj-div .v small { font-size: 14px; margin-left: 1px; }
.tj-div .t .v { color: var(--sp-b); } .tj-div .o .v { color: var(--sp-o); }
.tj-div .ax .tr { height: 22px; background: none; } .tj-div .ax .tr::before { top: -12px; bottom: 16px; }
.tj-div .zl { position: absolute; left: var(--z); bottom: 0; transform: translateX(-50%); font-size: 14px; color: var(--sub); }
/* 詳しく調べる側：確定と速報のちがい・新しく入国した人と住んでいる人のちがい・セクションの下の戻るリンク */
.tj-kind { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 12px 0; }
.tj-kind > div { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: 12px; border: 2px solid var(--sp-b); font-size: 15px; line-height: 1.6; }
.tj-kind > div.q { border-style: dashed; }
.tj-kind b { font-size: 17px; color: var(--sp-b); }
.tj-diff { margin: 12px 0; padding: 12px 16px; border-radius: 12px; border: 2px solid var(--sp-ob); background: var(--sp-os); }
.tj-diff > b { font-size: 17px; }
.tj-diff ul { margin: 6px 0 0; padding-left: 1.3em; font-size: 15px; line-height: 1.7; }
.tj-diff li { margin: 4px 0; }
p.kup2 { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 12px; }
/* STEP 5 のあとの「3分でわかるまとめ」（絵つきの3つのカード。③の小さな棒も幅＝割合） */
.tj-sum { margin: 0 0 16px; padding: 20px; border-radius: 14px; border: 2px solid var(--sp-g); background: var(--card); }
.tj-sum h3 { margin: 8px 0 14px; font-size: 25px; line-height: 1.4; }
ol.tj-sum3 { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.tj-sum3 li { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 14px; border-radius: 14px; border: 2px solid var(--sp-g); background: var(--sp-gs); text-align: center; }
.tj-sum3 li.b { border-color: var(--sp-b); background: var(--sp-bs); } .tj-sum3 li.o { border-color: var(--sp-ob); background: var(--sp-os); }
.tj-sum3 .ic { display: grid; place-items: center; height: 78px; }
.tj-sum3 svg.sp-man { width: 104px; height: 78px; } .tj-sum3 .sp-ic { width: 72px; height: 72px; }
.tj-sum3 .tx { display: flex; flex-direction: column; gap: 4px; }
.tj-sum3 b { font-size: 21px; line-height: 1.4; color: var(--sp-g); }
.tj-sum3 li.b b { color: var(--sp-b); } .tj-sum3 li.o b { color: var(--sp-o); }
.tj-sum3 .no { margin-right: 4px; }
.tj-sum3 .tx > span { font-size: 16px; line-height: 1.65; }
svg.tj-mini { width: 150px; height: 54px; }
.tj-mini rect { stroke: var(--sp-os); stroke-width: 2; vector-effect: non-scaling-stroke; }
.tj-mini .s1 { fill: var(--tj-1); } .tj-mini .s2 { fill: var(--tj-2); } .tj-mini .s3 { fill: var(--tj-3); } .tj-mini .so { fill: var(--tj-o); }
.tj-mini .br { fill: none; stroke: var(--sp-ob); stroke-width: 3; vector-effect: non-scaling-stroke; }
.tj-cmp b, .tj-ppl b, .tj-leg .nm, .tj-pn a, .tj-sum3 b, .tj-eq span, .tj-div .nm, .tj-bucket .bh { word-break: auto-phrase; }
.tj-bucket .ch a { display: inline-block; padding: 7px 12px; word-break: auto-phrase; text-wrap: balance; }
.tj-sum h3 { word-break: auto-phrase; text-wrap: balance; }
@media (max-width: 760px) {
  ol.tj-leg, ol.tj-sum3, .tj-bucket .bin { grid-template-columns: minmax(0, 1fr); }
  .tj-stack .nm { display: none; }
  .tj-sum3 li { display: grid; grid-template-columns: 92px minmax(0, 1fr); align-items: center; gap: 4px 12px; text-align: left; }
  .tj-sum3 .ic { height: auto; } .tj-sum3 svg.sp-man { width: 88px; height: 66px; } .tj-sum3 .sp-ic { width: 60px; height: 60px; } .tj-sum3 svg.tj-mini { width: 88px; height: 40px; }
}
@media (max-width: 600px) {
  nav.tj-pn { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .tj-pn .dt { grid-column: 1 / -1; order: -1; }
  .tj-pn a { font-size: 15px; min-height: 48px; padding: 6px 8px; }
  .tj-cmp { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .tj-cmp .c0 { grid-column: 1 / -1; padding: 6px 10px; font-size: 16px; margin-top: 6px; }
  .tj-cmp .h > .c0 { display: none; }
  .tj-cmp .h svg.sp-man { width: 80px; height: 60px; }
  .tj-cmp .h b { font-size: 21px; }
  .tj-cmp .d b, .tj-cmp .s b { font-size: 19px; }
  .tj-cmp .r > span { padding: 8px 10px; }
  .tj-stack { height: 56px; }
  .sp-kpis b.tj-w { font-size: 18px; white-space: nowrap; }
  .tj-stack a.nar .pc { display: none; }
  .tj-stack .pc { font-size: 16px; }
  .tj-kind { grid-template-columns: minmax(0, 1fr); }
  .tj-eq { gap: 4px; }
  .tj-eq > div { width: 100%; min-width: 0; padding: 8px 12px; flex-direction: row; justify-content: space-between; align-items: baseline; gap: 8px; }
  .tj-eq .op { line-height: 1; }
  .tj-eq b { font-size: 26px; }
  .tj-div { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; }
  .tj-div .nm { grid-column: 1 / -1; margin-top: 6px; font-size: 16px; }
  .tj-div .v { font-size: 19px; }
  .tj-div .ax > span:first-child { display: none; }
  .tj-ppl svg.sp-man { width: 56px; height: 42px; }
  .tj-ppl a { gap: 6px; padding: 6px 10px 6px 2px; }
  .tj-ppl b { font-size: 17px; line-height: 1.35; }
  .tj-ppl .tx span { line-height: 1.5; }
  .tj-two .sp-card { padding: 12px; }
  .tj-cmp small { font-size: 15px; }
  .sp-pt.tj-key p { font-size: 18px; }
  .tj-sum { padding: 16px 14px; } .tj-sum h3 { font-size: 22px; }
  .tj-sum3 li { padding: 12px; } .tj-sum3 b { font-size: 19px; } .tj-sum3 .tx > span { font-size: 15px; }
}

/* 3分でわかる 難民の申請（make_site.py の nanmin_sanpun）：形は .sp-*・.tj-pn・.tj-sum を使い、難民のページだけの図をここに。
   色の意味はこのページで1つに：緑（--sp-g）＝認められる・できる、青（--sp-b）＝手続き中・条件による、橙（--sp-ob）＝制限・注意。色だけにせず、言葉や ○×△ も添える */
.nr-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 8px 0 0 !important; font-size: 15px; color: var(--text) !important; }
.nr-legend span { display: inline-flex; align-items: center; gap: 6px; }
.nr-legend i { width: 18px; height: 18px; border-radius: 5px; background: var(--sp-g); }
.nr-legend .b i { background: var(--sp-b); } .nr-legend .o i { background: var(--sp-ob); }
/* STEP 1：申請 → 審査 → 結果、難民と補完的保護のちがい */
.nr-kpi { display: flex; align-items: center; gap: 12px; margin: 0 0 14px !important; padding: 10px 16px; border-radius: 14px; border: 2px solid var(--sp-b); background: var(--sp-bs); }
.nr-kpi .sp-ic { width: 48px; height: 48px; }
.nr-kpi > span { display: flex; flex-direction: column; }
.nr-kpi small { font-size: 15px; color: var(--sub); }
.nr-kpi b { font-size: 38px; line-height: 1.15; color: var(--sp-b); font-variant-numeric: tabular-nums; }
.nr-kpi b small { font-size: 18px; color: var(--sp-b); margin-left: 2px; }
.nr-flow { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.25fr) auto minmax(0, 1.25fr); gap: 8px; align-items: stretch; }
.nr-box { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px; border-radius: 14px; border: 2px solid var(--sp-b); background: var(--sp-bs); text-align: center; }
.nr-box .sp-ic { width: 52px; height: 52px; }
.nr-flow b.t { font-size: 23px; line-height: 1.3; color: var(--sp-b); }
.nr-box p { margin: 0 !important; font-size: 16px; line-height: 1.6; }
.nr-arw { align-self: center; font-size: 34px; font-weight: 700; line-height: 1; color: var(--sub); }
.nr-chk { display: flex; flex-direction: column; gap: 6px; width: 100%; margin-top: 2px; }
.nr-chk span { padding: 5px 8px; border-radius: 8px; background: var(--card); border: 1px solid var(--sp-b); font-size: 16px; font-weight: 700; }
.nr-res { display: flex; flex-direction: column; gap: 8px; }
.nr-res b.t { text-align: center; }
.nr-res > div { flex: 1 1 auto; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; border: 2px solid var(--sp-g); background: var(--sp-gs); font-size: 15px; line-height: 1.55; }
.nr-res > div.o { border-color: var(--sp-ob); background: var(--sp-os); }
.nr-res .sp-ic { width: 40px; height: 40px; }
.nr-res > div b { display: block; font-size: 19px; color: var(--sp-g); } .nr-res > div.o b { color: var(--sp-o); }
dl.nr-def { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 14px 0 0; }
.nr-def > div { padding: 10px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg); }
.nr-def dt { font-size: 18px; font-weight: 700; color: var(--sp-b); }
.nr-def dd { margin: 2px 0 0; font-size: 15px; line-height: 1.65; }
/* STEP 2：在留資格がある・ないで2つに分かれる図 */
.nr-root { position: relative; width: max-content; max-width: 100%; margin: 0 auto 18px; padding: 10px 22px; border-radius: 999px; background: var(--sp-b); color: #fff; font-size: 19px; font-weight: 700; text-align: center; }
.nr-root::after { content: ""; position: absolute; left: 50%; bottom: -18px; height: 18px; border-left: 3px solid var(--sub); }
.nr-br { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; padding-top: 20px; align-items: start; }
.nr-br::before { content: ""; position: absolute; top: 0; left: 25%; right: 25%; height: 20px; border: 3px solid var(--sub); border-bottom: 0; border-radius: 10px 10px 0 0; }
.nr-col { display: flex; flex-direction: column; align-items: stretch; }
.nr-q { margin: 0 !important; padding: 10px 14px; border-radius: 12px; background: var(--bg); border: 1px solid var(--line); font-size: 19px; font-weight: 700; text-align: center; }
.nr-q b { color: var(--sp-b); font-size: 24px; margin: 0 2px; }
.nr-q span { display: block; font-size: 15px; font-weight: 400; color: var(--sub); }
.nr-dn { align-self: center; font-size: 30px; font-weight: 700; line-height: 1.2; color: var(--sub); }
.nr-to { flex: 1 1 auto; display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: 14px; border: 2px solid var(--sp-b); background: var(--sp-bs); }
.nr-to > b { font-size: 20px; line-height: 1.45; color: var(--sp-b); text-align: center; }
.nr-to > span { font-size: 15px; text-align: center; color: var(--sub); }
ul.nr-mini { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.nr-mini li { padding: 6px 10px; border-radius: 10px; background: var(--card); border: 1px solid var(--line); font-size: 15px; line-height: 1.55; }
.nr-mini b { display: block; font-size: 17px; color: var(--sp-b); }
.nr-auto { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 14px 0 0 !important; padding: 12px 16px; border-radius: 12px; border: 3px solid var(--sp-ob); background: var(--sp-os); text-align: center; }
.nr-auto .mk { display: inline-grid; place-items: center; flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; background: var(--sp-ob); color: #fff; font-weight: 700; }
.nr-auto b { font-size: 20px; line-height: 1.45; color: var(--sp-o); }
.nr-note { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px 12px; margin: 12px 0 0; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg); }
.nr-note .wl { display: inline-block; padding: 0 12px; border-radius: 999px; background: var(--sp-ob); color: #fff; font-size: 15px; white-space: nowrap; }
.nr-note dl { margin: 0; flex: 1 1 18em; display: grid; gap: 4px; }
.nr-note dl > div { display: grid; grid-template-columns: 3em minmax(0, 1fr); gap: 8px; font-size: 15px; line-height: 1.6; }
.nr-note dt { font-weight: 700; } .nr-note dd { margin: 0; }
/* STEP 3：結果を先に大きく（○×△と言葉）、右に「どんな申請か」 */
.nr-for { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0 0 12px; padding: 10px 14px; border-radius: 12px; border: 2px dashed var(--sp-b); font-size: 16px; line-height: 1.6; }
.nr-for > b { padding: 0 10px; border-radius: 999px; background: var(--sp-b); color: #fff; font-size: 14px; white-space: nowrap; }
.nr-for > span { flex: 1 1 16em; } .nr-for em { font-style: normal; font-weight: 700; color: var(--sp-b); }
ol.nr-cmp { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.nr-cmp li { display: grid; grid-template-columns: 52px minmax(0, 1.15fr) minmax(0, 1fr); gap: 6px 14px; align-items: center; padding: 10px 12px; border-radius: 12px; border: 2px solid var(--sp-g); background: var(--sp-gs); }
.nr-cmp li.o { border-color: var(--sp-ob); background: var(--sp-os); } .nr-cmp li.b { border-color: var(--sp-b); background: var(--sp-bs); }
.nr-cmp .lt { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 12px; background: var(--sp-g); color: #fff; font-size: 22px; font-weight: 700; }
.nr-cmp li.o .lt { background: var(--sp-ob); } .nr-cmp li.b .lt { background: var(--sp-b); }
.nr-cmp .rs { display: flex; flex-direction: column; gap: 2px; }
.nr-cmp .mk { font-style: normal; margin-right: 6px; } /* ○×△（色だけにしない。言葉は大きな字のほう） */
.nr-cmp .rs b { font-size: 21px; line-height: 1.35; color: var(--sp-g); } .nr-cmp li.o .rs b { color: var(--sp-o); } .nr-cmp li.b .rs b { color: var(--sp-b); }
.nr-cmp .rs small { font-size: 15px; line-height: 1.5; }
.nr-cmp .wh { font-size: 15px; line-height: 1.6; }
.nr-cmp .tg { display: block; width: max-content; margin-bottom: 2px; padding: 0 8px; border-radius: 6px; border: 1px solid var(--field); background: var(--card); font-size: 14px; font-weight: 700; }
.nr-d2 { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.3fr); align-items: stretch; gap: 6px; margin: 10px 0 0; }
.nr-d2 > span:not(.ar) { display: flex; flex-direction: column; padding: 8px 12px; border-radius: 10px; border: 2px solid var(--sp-b); font-size: 17px; font-weight: 700; line-height: 1.45; }
.nr-d2 .a { background: var(--card); color: var(--sp-o); }
.nr-d2 .z { background: var(--sp-bs); color: var(--sp-b); }
.nr-d2 .ar { align-self: center; font-size: 26px; font-weight: 700; color: var(--sub); }
.nr-d2 b { font-size: 14px; color: var(--text); } .nr-d2 small { font-size: 14px; font-weight: 400; color: var(--sub); }
ul.nr-ex { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.nr-ex li { padding: 8px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg); font-size: 15px; line-height: 1.6; }
.nr-ex b { display: block; font-size: 16px; }
/* STEP 4：4つのカード（見出しの文を大きく）と、国の保護費 ≠ 生活保護 の比べる図 */
ul.nr-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.nr-cards li { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: 14px; border: 2px solid var(--sp-g); background: var(--sp-gs); }
.nr-cards li.b { border-color: var(--sp-b); background: var(--sp-bs); } .nr-cards li.o { border-color: var(--sp-ob); background: var(--sp-os); }
.nr-cards .sp-ic { width: 48px; height: 48px; }
.nr-cards .tx { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.nr-cards .nm { font-size: 16px; font-weight: 700; color: var(--sp-g); } .nr-cards li.b .nm { color: var(--sp-b); } .nr-cards li.o .nm { color: var(--sp-o); }
.nr-cards .tx > b { font-size: 21px; line-height: 1.4; }
.nr-cards .ds { font-size: 15px; line-height: 1.6; color: var(--sub); }
.nr-vs { display: grid; grid-template-columns: 6.5em minmax(0, 1fr) 2.6em minmax(0, 1fr); gap: 6px; margin: 14px 0 0; }
.nr-vs > div { display: contents; }
.nr-vs span { padding: 8px 12px; border-radius: 10px; font-size: 15px; line-height: 1.6; }
.nr-vs [role="rowheader"] { font-weight: 700; background: var(--bg); display: flex; align-items: center; }
.nr-vs .hd span { display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 700; text-align: center; padding: 6px; }
.nr-vs .hd .b { background: var(--sp-b); color: #fff; } .nr-vs .hd .o { background: var(--sp-ob); color: #fff; }
.nr-vs [role="cell"].b { border: 2px solid var(--sp-b); background: var(--sp-bs); } .nr-vs [role="cell"].o { border: 2px solid var(--sp-ob); background: var(--sp-os); }
.nr-vs .ne { display: grid; place-items: center; padding: 0; font-size: 30px; font-weight: 700; color: var(--sp-o); }
.nr-vs .hd .ne { font-size: 34px; }
.nr-tax { margin: 12px 0 0 !important; padding: 10px 14px; border-radius: 12px; border: 1px dashed var(--field); font-size: 16px; line-height: 1.65; }
.nr-tax > b { display: inline-block; margin-right: 8px; padding: 0 10px; border-radius: 999px; background: var(--bg); border: 1px solid var(--line); font-size: 15px; }
/* STEP 5：結果の4つの行き先、①〜③の合計、時間と割り算の注意 */
ul.nr-outs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.nr-outs li { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 10px; border-radius: 14px; border: 2px solid var(--sp-g); background: var(--sp-gs); text-align: center; }
.nr-outs li.o { border-color: var(--sp-ob); background: var(--sp-os); }
.nr-outs .sp-ic { width: 48px; height: 48px; }
.nr-outs b.t { font-size: 18px; line-height: 1.4; color: var(--sp-g); } .nr-outs li.o b.t { color: var(--sp-o); }
.nr-outs .v { font-size: 17px; } .nr-outs .v b { font-size: 36px; line-height: 1.15; color: var(--sp-g); font-variant-numeric: tabular-nums; }
.nr-outs .v.nv { font-size: 15px; font-weight: 700; color: var(--sp-o); line-height: 1.5; }
.nr-outs .ds { font-size: 15px; line-height: 1.6; }
.nr-sum3 { display: flex; justify-content: center; align-items: baseline; gap: 4px 14px; flex-wrap: wrap; width: calc(75% - 3px); margin: 8px 0 0 !important; padding: 6px 12px;
           border: 3px solid var(--sp-g); border-top: 0; border-radius: 0 0 14px 14px; }
.nr-sum3 span { font-size: 16px; font-weight: 700; } .nr-sum3 b { font-size: 30px; color: var(--sp-g); font-variant-numeric: tabular-nums; } .nr-sum3 b small { font-size: 17px; }
.nr-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.nr-clock, .nr-div { display: flex; align-items: center; gap: 10px; margin: 0 !important; padding: 12px 14px; border-radius: 12px; font-size: 16px; line-height: 1.65; }
.nr-clock { border: 2px solid var(--sp-b); background: var(--sp-bs); } .nr-clock .sp-ic { width: 44px; height: 44px; } .nr-clock b { font-size: 22px; color: var(--sp-b); }
.nr-div { display: block; border: 2px solid var(--sp-ob); background: var(--card); }
.nr-div > b { display: inline-block; margin-right: 8px; padding: 0 10px; border-radius: 999px; background: var(--sp-ob); color: #fff; font-size: 14px; }
/* まとめ（4つ。定住者の .tj-sum3 を2列に） */
ol.nr-sum4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.nr-sum4 .sp-ic { width: 64px; height: 64px; }
.nr-flow b.t, .nr-q, .nr-to > b, .nr-auto b, .nr-cmp .rs b, .nr-cards .tx > b, .nr-outs b.t, .nr-root, .nr-vs .hd span { word-break: auto-phrase; }
@media (max-width: 760px) {
  .nr-flow { grid-template-columns: minmax(0, 1fr); }
  .nr-arw { justify-self: center; transform: rotate(90deg); }
  dl.nr-def, ul.nr-ex, ul.nr-cards, .nr-two, ol.nr-sum4 { grid-template-columns: minmax(0, 1fr); }
  .nr-br { grid-template-columns: minmax(0, 1fr); padding-top: 0; gap: 18px; }
  .nr-br::before { display: none; }
  .nr-root { margin-bottom: 14px; } .nr-root::after { bottom: -14px; height: 14px; }
  .nr-cmp li { grid-template-columns: 50px minmax(0, 1fr); }
  .nr-cmp .wh { grid-column: 2; }
  .nr-d2 { grid-template-columns: minmax(0, 1fr); } .nr-d2 .ar { justify-self: center; transform: rotate(90deg); }
  .nr-vs { grid-template-columns: 5em minmax(0, 1fr) 1.6em minmax(0, 1fr); gap: 4px; }
  .nr-vs span { padding: 6px 8px; } .nr-vs .hd span { font-size: 16px; }
  ul.nr-outs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nr-sum3 { width: 100%; border-top: 3px solid var(--sp-g); border-radius: 14px; }
  .nr-kpi b { font-size: 32px; }
}
@media (max-width: 480px) {
  .nr-vs { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .nr-vs .hd > span:first-child, .nr-vs span.ne, .nr-vs .hd span.ne { display: none; }
  .nr-vs [role="rowheader"] { grid-column: 1 / -1; padding: 4px 8px 0; background: none; }
}
@media (max-width: 420px) {
  ul.nr-outs { grid-template-columns: minmax(0, 1fr); }
  .nr-outs li { display: grid; grid-template-columns: 48px minmax(0, 1fr); text-align: left; align-items: center; gap: 2px 12px; }
  .nr-outs li .sp-ic { grid-row: 1 / span 3; }
}