/* 淡いペーパー ── 自治体データビジュアライズ 共通の見た目
   色・字づかい・余白の正本はこの1枚。10画面ともここを読む。
   （同じ指定を各画面に写すと、片方だけ直して食い違うため） */

:root{
  --ground:#e8e6e1;        /* コンテナの外 */
  --paper:#f6f6f4;         /* 紙。すべての面。グラフSVGの背景もこれ */
  --ink:#17181a;           /* 見出し・強い数値・主要罫線 */
  --ink-2:#3e3c38;         /* 本文 */
  --ink-3:#55534e;         /* 補足・キャプション */
  --ink-4:#8b8880;         /* 極小ラベル・単位・注記 */
  --ink-5:#b3afa6;         /* 矢印など、さらに弱いもの */
  --rule-on:#17181a;       /* セクションの上辺、表のヘッダ下 */
  --rule:#dcdad4;          /* パネル境界、区切り */
  --rule-w:#e8e6e1;        /* 表の行罫 */
  --comma:#cfcbc2;         /* ナビの , */
  --nodata:#ded9d1;        /* データなし（北方領土6村・秘匿区画） */

  --grid:#e6e2da;          /* グラフの目盛線 */
  --base:#17181a;          /* グラフのベースライン */
  --tick:#9b978e;          /* 目盛・軸ラベル */
  --val:#2a2723;           /* 値ラベル */

  --jp:'Zen Kaku Gothic New','Hiragino Sans',sans-serif;
  --en:'Instrument Sans',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,Menlo,monospace;

  --pad:48px;              /* コンテナの左右 */
}

*{box-sizing:border-box}

html{background:var(--ground)}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:var(--jp); font-weight:400;
  -webkit-font-smoothing:antialiased;
  font-feature-settings:"palt" 0;
}
a{color:var(--ink); text-decoration:none}
a:hover{color:var(--ink-4)}
img,svg{max-width:100%}

/* 数字は必ず等幅。桁がそろわないと見比べられない */
.num,.mono,table td,table th,.big-num{font-variant-numeric:tabular-nums}
.num,.mono{font-family:var(--mono)}

/* ───────── 版面 ───────── */
.wrap{
  width:100%; max-width:1120px; margin:0 auto;
  background:var(--paper);
  border-left:1px solid var(--rule); border-right:1px solid var(--rule);
}

/* ───────── ヘッダ ───────── */
.topbar{
  display:flex; justify-content:space-between; align-items:flex-start; gap:40px;
  padding:22px var(--pad); border-bottom:1px solid var(--rule);
}
.topbar .brand{font-size:13.5px; font-weight:500; letter-spacing:.14em; color:var(--ink)}
/* 左上の名前を押すとトップページへ（2026-10-12 嶋田さん。メニューの「表紙」はこれで消した） */
.topbar a.brand{flex:none; transition:color .12s ease}
.topbar a.brand:hover{color:var(--ink-4)}
.topbar .brand em{
  display:block; margin-top:4px; font-style:normal;
  font-family:var(--en); font-size:10px; font-weight:500; letter-spacing:.22em; color:var(--ink-4);
}
.topbar .links{display:flex; align-items:baseline; font-size:12.5px; letter-spacing:.1em; color:var(--ink-4);
  /* ★狭い画面では、札を縮めるのではなく、列のほうを折り返す。
     nowrap のままだと1つ1つの札が縮んで「公／共／施／設」と縦に割れる（425pxで実測）。 */
  flex-wrap:wrap; row-gap:6px; justify-content:flex-end;
}
.topbar .links a, .topbar .links .on, .topbar .links s{white-space:nowrap}
.topbar .links a{color:var(--ink-4); transition:color .12s ease}
.topbar .links a:hover{color:var(--ink)}
.topbar .links .on{color:var(--ink); font-weight:500; border-bottom:1px solid var(--ink); padding-bottom:2px}
.topbar .links s{text-decoration:none; color:var(--comma); padding:0 6px}

/* ───────── タイトル帯 ───────── */
.titlebar{
  display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:56px; align-items:start;
  padding:64px var(--pad) 40px; border-bottom:1px solid var(--rule-on);
}
.eyebrow{font-family:var(--en); font-size:10px; font-weight:500; letter-spacing:.22em; color:var(--ink-4)}
.titlebar h1{
  margin:14px 0 0; font-size:36px; font-weight:500; line-height:1.35; letter-spacing:.08em;
  /* 2行になるときは行の長さを揃える。「公共施設マッ／プ」のような切れ方を防ぐ */
  text-wrap:balance; line-break:strict;
}
.titlebar .sub{
  margin:16px 0 0; font-family:var(--mono); font-size:11px; letter-spacing:.02em; color:var(--ink-4);
  font-variant-numeric:tabular-nums;
}

/* タイトル帯の右に置く操作 */
.tbctl{display:flex; flex-direction:column; gap:22px; padding-top:6px}
.fld{border-bottom:1px solid var(--rule)}
.fld:first-child{border-bottom-color:var(--ink)}
.fld>.lab{
  display:flex; justify-content:space-between; align-items:baseline;
  font-family:var(--en); font-size:10px; font-weight:500; letter-spacing:.22em; color:var(--ink-4);
}
.fld>.lab .yr{font-family:var(--mono); font-size:11px; letter-spacing:0; font-variant-numeric:tabular-nums}
.fld select,.fld input{
  width:100%; margin-top:12px; padding:0 0 9px;
  font-family:var(--jp); font-size:15px; letter-spacing:.06em; color:var(--ink);
  background:transparent; border:0; border-radius:0; outline:none; appearance:none;
}
.fld select{
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-4) 50%),linear-gradient(135deg,var(--ink-4) 50%,transparent 50%);
  background-position:calc(100% - 8px) calc(50% - 2px),calc(100% - 4px) calc(50% - 2px);
  background-size:4px 4px,4px 4px; background-repeat:no-repeat;
}
.fld input::placeholder{color:var(--ink-5)}
.fld input:focus-visible,.fld select:focus-visible{border-bottom:1px solid var(--ink)}

/* ───────── リード（2カラム） ───────── */
.lede{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:56px;
  padding:56px var(--pad) 60px;
}
.lede .big{
  margin:0; font-size:23px; font-weight:500; line-height:1.85; letter-spacing:.04em;
  color:var(--ink); text-wrap:pretty;
}
.lede p{margin:0; font-size:13.5px; line-height:2.15; letter-spacing:.04em; color:var(--ink-2); text-wrap:pretty}
.lede .big+p{margin-top:24px}
.lede p+p{margin-top:18px}
.lede .fine{font-size:12.5px; line-height:2.05; color:var(--ink-3)}
.lede b{font-weight:500; color:var(--ink)}

/* ───────── 統計4連 ───────── */
.stats4{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  border-top:1px solid var(--rule-on); border-bottom:1px solid var(--rule);
}
.stats4>div{padding:32px 32px 36px; border-right:1px solid var(--rule)}
.stats4>div:first-child{padding-left:var(--pad)}
.stats4>div:last-child{padding-right:var(--pad); border-right:0}
.stats4 .k{font-family:var(--en); font-size:10px; font-weight:500; letter-spacing:.22em; color:var(--ink-4)}
.stats4 .v{
  margin-top:14px; font-family:var(--mono); font-size:32px; font-weight:300;
  line-height:1; letter-spacing:-.03em; color:var(--ink); font-variant-numeric:tabular-nums;
}
.stats4 .v span{font-size:18px; font-weight:300; color:var(--ink-3); letter-spacing:0}
.stats4 .d{margin:10px 0 0; font-size:12.5px; line-height:2; letter-spacing:.04em; color:var(--ink-3)}
.stats4 .d em{font-style:normal; font-family:var(--mono); color:var(--ink-4); font-variant-numeric:tabular-nums}

/* ═══════════════════════════════════════════════════════════════
   画面の決まり（10ページ共通）　★新しいページもこれに従う
   ───────────────────────────────────────────────────────────────
   1. 枠は2種類だけ。用途で使い分ける。混ぜない。
        .layout > .card   地図とパネルを左右に並べるとき   見出し 20px
        .sec              上から下へ1つずつ読ませる節      見出し 26px
      どちらにも当てはまらない独自の枠を新しく作らない。
   2. 大見出しは .titlebar の中に、この3つをこの順で置く。
        .eyebrow（10px・英字・字間.22em）
        h1（36px・狭い画面では28px）
        .sub（11px・等幅・出どころと年度）
   3. 市区町村の選び方は、都道府県 → 市区町村 の2段プルダウン。
      打ち込み式の欄（input + datalist）は使わない。
      地図をクリックしたときも、2つの欄が追いつくようにする。
      ★例外は路線価だけ。あのページは全国を持たず、読み取りの済んだ
        エリアしか選べない。そこは画面に正直に書く（決まり7）。
   4. ナビ（.topbar .links）は全ページ同じ12件・同じ順。
        表紙 ノート 財政 公共施設 人口 住宅 土地 路線価 水道 図書館 外国人 ふるさと納税
      いまのページだけ <span class="on">。
   5. 左右の余白は var(--pad)（48px）。節や見出しで勝手に変えない。
   6. 市区町村の名前（.who h2）は折り返さない。説明が下へ回る。
   7. 全国そろっていないデータは、選べる範囲を画面に書く。
      「いま読めているのはここだけ」と先に言う。無いものを在るように見せない。
   ★この決まりは 道具/画面の決まりを検査する.js で機械が確かめる。
   ═══════════════════════════════════════════════════════════════ */

/* ───────── 本体（地図 | パネル） ───────── */
.layout{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.04fr);
  border-bottom:1px solid var(--rule);
}
.layout>.card{padding:40px 32px 44px; border-right:1px solid var(--rule)}
.layout>.card:first-child{padding-left:var(--pad)}
.layout>.card:last-child{padding-right:var(--pad); border-right:0}

.card h2{margin:0; font-size:20px; font-weight:500; letter-spacing:.1em; line-height:1.5}
.card .hint,.card .maphint{margin:10px 0 0; font-size:12.5px; line-height:2; letter-spacing:.04em; color:var(--ink-3)}

/* ───────── 操作（枠なし・選択中だけ下線） ───────── */
.tools{display:flex; align-items:baseline; flex-wrap:wrap; gap:0 18px; margin:26px 0 0; padding-bottom:12px; border-bottom:1px solid var(--rule)}
.tools .gl{
  font-family:var(--en); font-size:10px; font-weight:500; letter-spacing:.22em; color:var(--ink-4);
  width:104px; flex:none;
}
.tools button,.seg button{
  margin:0; padding:0 0 3px; border:0; border-bottom:1px solid transparent; border-radius:0;
  background:transparent; cursor:pointer;
  font-family:var(--jp); font-size:13px; font-weight:400; letter-spacing:.06em; color:var(--ink-4);
  transition:color .12s ease,border-color .12s ease;
}
.tools button:hover,.seg button:hover{color:var(--ink)}
.tools button[aria-pressed="true"],.seg button[aria-pressed="true"],
.tools button.on,.seg button.on{color:var(--ink); font-weight:500; border-bottom-color:var(--ink)}
.tools .note{font-size:12px; letter-spacing:.04em; color:var(--ink-4)}

.ctl{display:block; margin:26px 0 0; padding-bottom:12px; border-bottom:1px solid var(--rule)}
.ctl>span:first-child{
  display:block; margin-bottom:12px;
  font-family:var(--en); font-size:10px; font-weight:500; letter-spacing:.22em; color:var(--ink-4);
}
.seg{display:flex; flex-wrap:wrap; gap:0 18px}
.ctl input[type="search"]{
  width:100%; padding:0 0 9px; font-family:var(--jp); font-size:15px; letter-spacing:.06em;
  color:var(--ink); background:transparent; border:0; outline:none; appearance:none;
}

/* ───────── 地図 ───────── */
.mapbox{position:relative; margin-top:24px; background:var(--paper)}
.mapbox svg{display:block; width:100%; height:auto; background:var(--paper)}
.zoombtns{position:absolute; top:0; right:0; display:flex; flex-direction:column}
.zoombtns button{
  width:28px; height:26px; margin:0 0 -1px; padding:0;
  border:1px solid var(--rule); border-radius:0; background:var(--paper); cursor:pointer;
  font-family:var(--en); font-size:11px; font-weight:500; letter-spacing:.06em; color:var(--ink-3);
  transition:color .12s ease,border-color .12s ease;
}
.zoombtns button:hover{color:var(--ink); border-color:var(--ink)}
.zoombtns button:last-child{font-size:8.5px; letter-spacing:.14em}

/* 吹き出し */
/* ★2026-10-03 直した。前は display:none で、class="on" を付けたときだけ出す決まりだった
   （c7bd2bd「淡いペーパー」に載せ替えたときから）。ところが、ふるさと納税の画面のほかは style.opacity で
   出し入れしていて class を付けないので、名前の入った吹き出しが1度も出ていなかった（12画面のうち11）。
   いまは「地図の上に指があるあいだだけ置き、透明度で出し入れする」。style.opacity=1 でも class="on" でも出る。
   ★いつも置いておくと、透明でも右の端で画面が横にはみ出す（スマホで横に動いた）。だから地図の上にいるときだけ。
   ★指で触る画面（hover できない）では出さない。触ると右の欄にその市町村が出るので、吹き出しは要らない。 */
#tip,.tip{
  position:absolute; z-index:5; display:none; opacity:0; pointer-events:none;
  padding:9px 12px; background:var(--paper); border:1px solid var(--ink);
  font-size:12px; line-height:1.9; letter-spacing:.04em; color:var(--ink); white-space:nowrap;
}
.mapbox:hover #tip,.mapbox:hover .tip,#tip.on,.tip.on{display:block}
#tip.on,.tip.on{opacity:1}
@media (hover:none){ #tip,.tip{display:none !important} }

/* ───────── 凡例（連続グラデーション） ───────── */
.legend{display:block; margin-top:22px}
.legend .ramp{display:block; height:7px; background:var(--ramp,linear-gradient(90deg,var(--paper),var(--ink)))}
.legend .ramp i{display:none}
.legend .rampscale{
  display:flex; justify-content:space-between; margin-top:7px;
  font-family:var(--mono); font-size:10px; letter-spacing:.02em; color:var(--ink-4);
  font-variant-numeric:tabular-nums;
}
.legend>span,.legend>p,#legendlabel{
  display:block; margin:12px 0 0; font-size:12.5px; line-height:2; letter-spacing:.04em; color:var(--ink-3);
}
.legend .ndkey{display:inline-flex; align-items:center; gap:7px; font-size:11.5px; color:var(--ink-4)}
.legend .ndkey i{width:10px; height:10px; background:var(--nodata)}

/* ───────── 右パネル ───────── */
/* 市区町村の名前と、その横の小さな説明。
   広いときは1行に並べ、入らなくなったら説明のほうが下へ回る。
   ★名前（豊島区など）は絶対に折り返さない。 */
.who{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline;
     gap:6px 20px; padding-bottom:14px; border-bottom:1px solid var(--rule)}
.who h2{font-size:20px; font-weight:500; letter-spacing:.1em; white-space:nowrap; flex:0 0 auto}
.who .meta{margin:0; font-family:var(--mono); font-size:10.5px; letter-spacing:.02em;
     color:var(--ink-4); font-variant-numeric:tabular-nums; line-height:1.9;
     flex:1 1 auto; min-width:0; text-align:right}
.who .meta b{font-weight:400}

.verdict{margin-top:22px}
.verdict>span{display:flex; align-items:baseline; gap:14px}
.verdict .cap{font-family:var(--en); font-size:10px; font-weight:500; letter-spacing:.22em; color:var(--ink-4)}
.verdict .big{font-family:var(--mono); font-size:32px; font-weight:300; letter-spacing:-.03em; line-height:1; font-variant-numeric:tabular-nums}
.verdict p{margin:14px 0 0; font-size:13.5px; line-height:2.1; letter-spacing:.04em; color:var(--ink-2); text-wrap:pretty}
.verdict b{font-weight:500; color:var(--ink)}

figure{margin:26px 0 0; padding:0}
figure svg{display:block; width:100%; height:auto; background:var(--paper)}
figcaption{margin-top:18px; font-size:12.5px; line-height:2.05; letter-spacing:.04em; color:var(--ink-3); text-wrap:pretty}
figcaption b{font-weight:500; color:var(--ink)}

table{width:100%; margin-top:26px; border-collapse:collapse}
table thead th{
  padding:0 0 9px; border-bottom:1px solid var(--ink); text-align:right;
  font-family:var(--en); font-size:9.5px; font-weight:500; letter-spacing:.18em; color:var(--ink-4);
}
table thead th:first-child{text-align:left}
table tbody th,table tbody td{
  padding:10px 0; border-bottom:1px solid var(--rule-w); text-align:right;
  font-size:12px; font-weight:400; color:var(--ink-2); font-variant-numeric:tabular-nums;
}
table tbody th{text-align:left; font-family:var(--jp); letter-spacing:.04em; font-size:12.5px}
table tbody td{font-family:var(--mono)}
table tbody tr:last-child th,table tbody tr:last-child td{border-bottom:0}
table .sw{display:inline-block; width:10px; height:10px; margin-right:9px; vertical-align:-1px}
table tr.total th,table tr.total td{border-bottom:1px solid var(--rule); color:var(--ink); font-weight:500}

.rank{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:26px 32px; margin-top:30px; padding-top:24px; border-top:1px solid var(--rule)}
.rank>div .k{font-family:var(--en); font-size:10px; font-weight:500; letter-spacing:.22em; color:var(--ink-4)}
.rank>div .v{margin-top:12px; font-family:var(--mono); font-size:19px; letter-spacing:-.01em; color:var(--ink); font-variant-numeric:tabular-nums}
.rank>div .d{margin-top:7px; font-family:var(--mono); font-size:10.5px; letter-spacing:.02em; color:var(--ink-4); font-variant-numeric:tabular-nums}

/* ───────── 時系列のセクション ───────── */
.sec{padding:60px var(--pad) 56px; border-bottom:1px solid var(--rule)}
.sec>.eyebrow{margin-bottom:18px}
.sec h2{margin:0; font-size:26px; font-weight:500; line-height:1.55; letter-spacing:.06em}
.sec .top{display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:56px; align-items:start}
.sec .lede2{margin:20px 0 0; font-size:13.5px; line-height:2.15; letter-spacing:.04em; color:var(--ink-2); text-wrap:pretty}
.sec figure{margin-top:36px}
.sec .sum{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:36px; margin-top:44px; padding-top:28px; border-top:1px solid var(--rule)}
.sec .sum .k{font-family:var(--en); font-size:10px; font-weight:500; letter-spacing:.22em; color:var(--ink-4); margin-bottom:14px}
.sec .sum p{margin:0; font-size:12.5px; line-height:2.05; letter-spacing:.04em; color:var(--ink-3)}
.sec .sum .row{display:flex; justify-content:space-between; gap:16px; font-family:var(--mono); font-size:12px; line-height:2.1; color:var(--ink-2); font-variant-numeric:tabular-nums}
.sec.pair{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:0; padding:0}
.sec.pair>div{padding:60px 32px 56px; border-right:1px solid var(--rule)}
.sec.pair>div:first-child{padding-left:var(--pad)}
.sec.pair>div:last-child{padding-right:var(--pad); border-right:0}
.sec.pair h2{font-size:22px}

/* 線・面の凡例 */
.keys{display:flex; flex-direction:column; gap:11px; margin-top:6px}
.keys span{display:flex; align-items:center; gap:10px; font-size:12px; letter-spacing:.04em; color:var(--ink-3); white-space:nowrap}
.keys i{width:11px; height:11px; flex:none; display:inline-block}
.keys i.line,.keys i.dash,.keys i.dot{width:22px; height:2px}
.keys i.dash{background:repeating-linear-gradient(90deg,var(--ink-4) 0 5px,transparent 5px 9px)}
.top .keys{padding-top:30px}

/* ───────── 出典・注記 ───────── */
.srcfoot{display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:56px; padding:56px var(--pad) 64px}
.srcfoot .k{font-family:var(--en); font-size:10px; font-weight:500; letter-spacing:.22em; color:var(--ink-4); margin-bottom:16px}
.srcfoot p{margin:0; font-size:11.5px; line-height:2.15; letter-spacing:.05em; color:var(--ink-4); text-wrap:pretty}
.srcfoot p+p{margin-top:14px}
.srcfoot a{color:var(--ink-3); border-bottom:1px solid var(--rule)}
/* ───────── フッター ─────────
   ★全画面で同じ見え方にする（嶋田さん 2026-09-23）。
   2026-09-23まで5通りに分かれていた（字16px/11.5px/13px、色3種、余白バラバラ）。
   足す画面は、入れ物に .sitefoot を付けるだけでよい。ここ1か所で変えられる。 */
.sitefoot{
  display:flex; flex-wrap:wrap; align-items:baseline; row-gap:8px; column-gap:0;
  padding:28px var(--pad) 36px; border-top:1px solid var(--rule);
  font-family:var(--jp); font-size:11.5px; letter-spacing:.1em; color:var(--ink-3);
}
/* ★フッターは、どの画面でも同じ位置に置く（嶋田さん 2026-09-23）。
   出典の欄（2段組み）の中ではなく、その外。全幅。表紙・記事・入口とも同じ。
   2026-09-23まで9画面でNOTESの段（340px幅）の中にいて、別物に見えていた。 */
.sitefoot > *{white-space:nowrap}
.sitefoot a{color:var(--ink-3); border:0; text-decoration:none}
.sitefoot a:hover{color:var(--ink)}
.sitefoot s{text-decoration:none; color:var(--comma); padding:0 8px}
.sitefoot .c{font-family:var(--mono); letter-spacing:.02em; color:var(--ink-4)}
/* 制作・運営の一文。札より先に、1行まるごと使う */
.sitefoot .sei{flex-basis:100%; margin:0 0 10px; white-space:normal; letter-spacing:.08em}
.sitefoot .sei a{color:var(--ink); border-bottom:1px solid var(--rule)}
.sitefoot .sei a:hover{border-bottom-color:var(--ink)}

/* ───────── 横スクロールさせる表 ───────── */
.scroll{overflow-x:auto; margin-top:26px}
.scroll table{margin-top:0; min-width:820px}

/* ───────── グラフの中の字 ───────── */
svg text{font-family:var(--jp)}
svg .tick,svg .ax{font-family:var(--mono); font-size:11px; fill:var(--tick); font-variant-numeric:tabular-nums}
svg .val,svg .pct,svg .nm{font-family:var(--mono); fill:var(--val); font-variant-numeric:tabular-nums}
svg .grid{stroke:var(--grid); stroke-width:1}
svg .base{stroke:var(--base); stroke-width:1}

/* ───────── 画面が狭いとき ───────── */
@media (max-width:1120px){
  :root{--pad:24px}
}
@media (max-width:640px){
  .titlebar h1{font-size:28px; letter-spacing:.04em}   /* 狭い画面では見出しを小さく */
  .who{gap:4px 0}
  .who .meta{text-align:left; flex-basis:100%}     /* 名前の下に、左から並べる */
}
@media (max-width:900px){
  .titlebar{grid-template-columns:minmax(0,1fr); gap:34px}
  .lede{grid-template-columns:minmax(0,1fr); gap:28px}
  .stats4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stats4>div:nth-child(2){padding-right:var(--pad); border-right:0}
  .stats4>div:nth-child(3){padding-left:var(--pad)}
  .stats4>div:nth-child(-n+2){border-bottom:1px solid var(--rule)}
  .layout{grid-template-columns:minmax(0,1fr)}
  .layout>.card{padding-left:var(--pad); padding-right:var(--pad); border-right:0; border-bottom:1px solid var(--rule)}
  .layout>.card:last-child{border-bottom:0}
  .sec .top{grid-template-columns:minmax(0,1fr); gap:28px}
  .top .keys{padding-top:0}
  .sec.pair{grid-template-columns:minmax(0,1fr)}
  .sec.pair>div{padding-left:var(--pad); padding-right:var(--pad); border-right:0; border-bottom:1px solid var(--rule)}
  .sec.pair>div:last-child{border-bottom:0}
  .sec .sum{grid-template-columns:minmax(0,1fr); gap:26px}
  .srcfoot{grid-template-columns:minmax(0,1fr); gap:34px}
  .topbar{flex-direction:column; gap:16px}
}

/* ───────── 読む画面（ノート・利用規約・プライバシーポリシー） ─────────
   2026-10-12 に kiji.js の中から移した。字を大きく行を広くとる、読み物のための版面。
   ★ノートの一覧・記事と、利用規約・プライバシーポリシーが同じ指定を読む。片方だけ直さないため、ここ1か所に置く。 */
:root{ --col:40em }          /* 本文1行の幅。全角でおよそ40字。ここ1か所で変えられる */
.kiji-top{ padding:64px var(--pad) 44px; border-bottom:1px solid var(--rule-on) }
.kiji-top h1{ margin:14px 0 0; max-width:var(--col); font-size:32px; font-weight:500;
  line-height:1.6; letter-spacing:.06em; text-wrap:pretty }
.kiji-top .sub{ margin:22px 0 0; max-width:var(--col); font-size:15px; line-height:2.1;
  letter-spacing:.04em; color:var(--ink-3); text-wrap:pretty }
.kiji-top .date{ margin:26px 0 0; font-family:var(--mono); font-size:11px; letter-spacing:.02em;
  color:var(--ink-4); font-variant-numeric:tabular-nums }
.kiji-top .draft{ display:inline-block; margin-left:14px; padding:2px 8px; border:1px solid var(--ink-4);
  font-family:var(--jp); font-size:10.5px; letter-spacing:.1em; color:var(--ink-4) }

/* 本文。読むためのものなので、ほかの画面より字を大きく行を広くとる */
.kiji-body{ padding:52px var(--pad) 72px }
.kiji-body .inner{ max-width:var(--col); font-size:16px; line-height:2.1;
  letter-spacing:.04em; color:var(--ink-2) }
.kiji-body p{ margin:24px 0 0; text-wrap:pretty }
.kiji-body h2{ margin:56px 0 0; padding-top:26px; border-top:1px solid var(--rule);
  font-size:20px; font-weight:500; line-height:1.7; letter-spacing:.08em; color:var(--ink) }
.kiji-body h3{ margin:42px 0 0; font-size:16.5px; font-weight:500; line-height:1.8;
  letter-spacing:.08em; color:var(--ink) }
.kiji-body h2+p,.kiji-body h3+p{ margin-top:18px }
.kiji-body ul,.kiji-body ol{ margin:24px 0 0; padding-left:1.7em }
.kiji-body li{ margin-top:10px; text-wrap:pretty }
.kiji-body blockquote{ margin:32px 0 0; padding:2px 0 2px 24px; border-left:1px solid var(--ink);
  font-size:15px; color:var(--ink-3) }
.kiji-body hr{ margin:48px 0 0; border:0; border-top:1px solid var(--rule) }
.kiji-body strong{ font-weight:500; color:var(--ink) }
.kiji-body a{ color:var(--ink); border-bottom:1px solid var(--rule) }
.kiji-body a:hover{ color:var(--ink); border-bottom-color:var(--ink) }
.kiji-body code{ font-family:var(--mono); font-size:13.5px; background:#efece6; padding:1px 5px }
/* 記号3つで囲んだところ。数字の表を貼るので、等幅・桁そろえ・折り返さない */
.kiji-body pre{ margin:32px 0 0; padding:22px 24px; background:#efece6; overflow-x:auto;
  max-width:none; width:100% }
.kiji-body pre code{ display:block; padding:0; background:none; white-space:pre;
  font-family:var(--mono); font-size:12.5px; line-height:2; color:var(--ink-2);
  font-variant-numeric:tabular-nums }

/* 一覧 */
.kiji-rows{ border-top:1px solid var(--rule-on) }
.kiji-rows a.row{ display:grid; grid-template-columns:minmax(0,1fr) 128px; gap:10px 32px;
  align-items:baseline; padding:34px var(--pad); border-bottom:1px solid var(--rule);
  transition:background .12s ease }
.kiji-rows a.row:hover{ background:#efece6 }
.kiji-rows .ttl{ font-size:19px; font-weight:500; line-height:1.7; letter-spacing:.06em; color:var(--ink) }
.kiji-rows .lead{ grid-column:1; font-size:13px; line-height:2; letter-spacing:.04em; color:var(--ink-3); text-wrap:pretty }
.kiji-rows .d{ grid-row:1; grid-column:2; font-family:var(--mono); font-size:11px;
  letter-spacing:.02em; color:var(--ink-4); text-align:right; font-variant-numeric:tabular-nums }
.kiji-rows .d em{ font-style:normal; display:block; margin-top:6px; font-family:var(--jp); font-size:10.5px; letter-spacing:.1em }
.kiji-none{ padding:56px var(--pad) 64px; font-size:13.5px; line-height:2.15; color:var(--ink-3) }

.kiji-back{ padding:0 var(--pad) 64px; font-size:12.5px; letter-spacing:.06em }
.kiji-back a{ color:var(--ink-3); border-bottom:1px solid var(--rule) }
.kiji-back a:hover{ color:var(--ink); border-bottom-color:var(--ink) }
@media (max-width:900px){ .kiji-top h1{ font-size:26px } .kiji-body .inner{ font-size:15.5px }
  .kiji-rows a.row{ grid-template-columns:minmax(0,1fr) }
  .kiji-rows .d{ grid-row:auto; grid-column:1; text-align:left }
  .kiji-rows .d em{ display:inline; margin-left:14px } }

/* 利用規約・プライバシーポリシーだけの部品（2026-10-12 嶋田さん「デザインそろえて」） */
.kiji-body .box{ margin:0; padding:24px 28px; background:#efece6 }
.kiji-body .box p{ margin:0 }
.kiji-body b{ font-weight:500; color:var(--ink) }
.kiji-body table{ margin:24px 0 0; border-top:1px solid var(--rule-on) }
.kiji-body table th,.kiji-body table td{ padding:14px 24px 14px 0; border-bottom:1px solid var(--rule-w);
  text-align:left; vertical-align:top; font-family:var(--jp); font-size:14px; line-height:1.9;
  letter-spacing:.04em; color:var(--ink-2) }
.kiji-body table th{ width:11em; font-size:13px; font-weight:400; color:var(--ink-3) }
.kiji-body table tr:last-child th,.kiji-body table tr:last-child td{ border-bottom:1px solid var(--rule) }
.kiji-body .chui{ font-size:12.5px; color:var(--ink-3) }
@media (max-width:640px){ .kiji-body table th{ width:7.5em; padding-right:16px } }