/* ===== おかねの地図 main.css ===== */
/* mockup-onc.html の本番 CSS（.mk-* / .m-row / .m-frame のモック専用部分は除外）*/

/* ===== 五維度 token ===== */
:root{
  --c-primary:#2B5D52;      /* 主色 teal-green：導覽帶・リンク・見出しバー・タグ枠 */
  --c-primary-dark:#1F453D; /* 導覽帶の区切り線・ハンバーガー枠・hover */
  --c-tint:#EEF4F2;         /* ページタイトル帯・H3帯・表ヘッダー */
  --c-highlight:#F4DFC3;    /* 表・グラフの最大値ハイライト（1色のみ）*/
  --c-bg:#FFFFFF;           /* 背景 */
  --c-text:#1E2422;         /* 本文 */
  --c-text-2:#5B6663;       /* 日付・出典・補足 */
  --c-line:#D5DEDB;         /* 罫線・枠 */
  --f-ja:'Zen Kaku Gothic New', sans-serif;
  --f-num:'Public Sans', 'Zen Kaku Gothic New', sans-serif;
  --measure:38em;           /* 本文の行長（約38字）*/
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--f-ja);font-weight:500;color:var(--c-text);background:var(--c-bg);font-size:16px;line-height:1.8}
a{color:var(--c-primary);text-decoration:none;transition:color .2s ease}
a:hover{color:var(--c-primary-dark);text-decoration:underline}
ul{list-style:none}
h1,h2,h3,.q-list a,.recent a,.lead,.title-band p,.bars-title,.source{word-break:auto-phrase} /* 日本語見出しを文節で改行（Chrome 119+、非対応ブラウザは通常改行）*/

/* ===== ヘッダー：teal 導覽帶 ===== */
.site-header{background:var(--c-primary);color:#fff}
.site-header .inner{max-width:1120px;margin:0 auto;padding:0 24px;display:flex;align-items:center;justify-content:space-between;min-height:64px;position:relative}
.brand{display:flex;align-items:center;gap:10px;color:#fff}
.brand:hover{color:#fff;text-decoration:none}
.brand-mark{width:36px;height:36px;border:2px solid #fff;display:flex;align-items:center;justify-content:center;font:700 22px/1 var(--f-ja);color:#fff}
.brand-name{font:700 19px/1.2 var(--f-ja);letter-spacing:.04em}
.nav-toggle{position:absolute;opacity:0;pointer-events:none}
.burger{display:none}
.nav-list{display:flex}
.nav-list li{border-left:1px solid var(--c-primary-dark)}
.nav-list li:last-child{border-right:1px solid var(--c-primary-dark)}
.nav-list a{display:block;color:#fff;font-weight:700;font-size:15px;padding:20px 18px;line-height:24px}
.nav-list a:hover{background:var(--c-primary-dark);color:#fff;text-decoration:none}

/* ===== ページタイトル帯 + パンくず ===== */
.title-band{background:var(--c-tint);padding:40px 24px;text-align:center}
.title-band h1{font:700 30px/1.5 var(--f-ja);letter-spacing:.02em}
.title-band p{margin-top:8px;color:var(--c-text-2);font-size:15px}
.crumb{border-bottom:1px solid var(--c-line)}
.crumb ol{max-width:1120px;margin:0 auto;padding:10px 24px;list-style:none;display:flex;flex-wrap:wrap;font-size:14px}
.crumb li+li::before{content:"›";margin:0 10px;color:var(--c-text-2)}
.crumb li:last-child{color:var(--c-text)}

.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
.lead{max-width:var(--measure);margin:32px 0 0;font-size:16px}

/* ===== 見出し：左の teal バー ===== */
.h-bar,.article > h2{font:700 24px/1.5 var(--f-ja);padding-left:16px;border-left:6px solid var(--c-primary);margin:56px 0 20px} /* 本文 Markdown の ## も mockup の .h-bar と同じ見た目に */

/* ===== 問句リンク一覧 ===== */
.q-list li{margin:0 0 14px;padding-left:20px;position:relative;font-size:16px}
.q-list li::before{content:"›";position:absolute;left:2px;top:-1px;font-weight:700;color:var(--c-text)}

/* ===== タグ：外枠・角あり ===== */
.tags{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px}
.tag{display:inline-block;border:1px solid var(--c-primary);color:var(--c-primary);font-size:14px;line-height:1.5;padding:3px 10px;background:#fff}

/* ===== テーマ別：細枠の2列（画像なし・ボタンなし）===== */
.theme-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px}
.theme-box{border:1px solid var(--c-line);padding:24px 24px 10px}
.theme-box h3{font:700 20px/1.5 var(--f-ja);margin-bottom:14px}
.theme-box .pr{font-size:13px;color:var(--c-text-2);margin-left:4px;white-space:nowrap} /* 「（PRを／含みます）」の泣き別れ防止 */

/* ===== 新着：日付＋分類＋問句タイトルの行 ===== */
.recent li{display:grid;grid-template-columns:7.5em 9em 1fr;gap:12px;padding:14px 0;border-bottom:1px solid var(--c-line);align-items:baseline}
.recent li:first-child{border-top:1px solid var(--c-line)}
.date{font:400 14px/1.5 var(--f-num);color:var(--c-text-2);font-variant-numeric:tabular-nums}
.cat{font-size:13px;color:var(--c-text-2)}

/* ===== フッター ===== */
.site-footer{margin-top:72px;border-top:4px solid var(--c-primary);background:var(--c-tint)}
.site-footer .inner{max-width:1120px;margin:0 auto;padding:32px 24px;font-size:14px}
.f-links{display:flex;flex-wrap:wrap;gap:8px 24px;margin-bottom:16px}
.f-disc{color:var(--c-text-2);font-size:13px;max-width:52em}

/* ===== 分類頁 ===== */
.sub-h{font:700 20px/1.5 var(--f-ja);margin:40px 0 16px}
.q-list .upd{font:400 13px/1 var(--f-num);color:var(--c-text-2);margin-left:10px;font-variant-numeric:tabular-nums}

/* ===== 単篇 ===== */
.article{max-width:672px;margin:0 auto}
.crumb.narrow ol{max-width:720px}
.article-wrap{max-width:1120px;margin:0 auto;padding:0 24px}
.article .tag{margin-top:32px}
.article h1{font:700 30px/1.5 var(--f-ja);margin:14px 0 10px}
.a-meta{font-size:14px;color:var(--c-text-2)}
.a-meta .date{font-size:14px}
.nw{display:inline-block;max-width:100%} /* 「更新日」「出典」を一塊で折り返す。長い出典名は塊の中で改行（nowrap だと手機で横はみ出し）*/
.pr-label{margin-top:14px;border:1px solid var(--c-text);padding:8px 12px;font-size:16px;line-height:1.6}
.pr-label b{display:inline-block;background:var(--c-text);color:#fff;font:700 14px/1 var(--f-num);padding:4px 8px;margin-right:10px;vertical-align:1px}
.article .h-bar,.article > h2{font-size:26px;margin-top:44px}
.article{overflow-wrap:break-word} /* 本文中の長い URL が手機で横はみ出ししないように */
.article h3{font:700 20px/1.5 var(--f-ja);background:var(--c-tint);padding:12px 16px;margin:36px 0 16px}
.article p{font-size:17px;line-height:1.9;margin:0 0 1.2em}
/* 本文の Markdown 箇条書き：全体の ul{list-style:none} リセットで点・番号が消え、ol の番号が余白の外に出るのを戻す */
.article > ul:not(.q-list),.article > ol{font-size:17px;line-height:1.9;margin:0 0 1.2em;padding-left:1.6em}
.article > ul:not(.q-list){list-style:disc}
.article > ol{list-style:decimal}
.article > ul:not(.q-list) li,.article > ol li{margin-bottom:.3em}
.page-body{padding-top:36px} /* 運営者情報など固定ページ：パンくず直下に本文が貼り付かないように */
.num{font-family:var(--f-num);font-variant-numeric:tabular-nums}

/* 表：単位ラベル・最大値ハイライト・出典。スマホは横スクロール（画像化しない）*/
.tbl-unit{text-align:right;font-size:13px;color:var(--c-text-2);margin-top:8px}
.tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--c-line)}
.tbl-hint{display:none;font-size:13px;color:var(--c-text-2);margin:4px 0 6px}
/* 横スクロール案内：表が本文幅に収まらない画面幅でだけ表示（クラスは render-table.html が表の推定幅から付与）*/
.tbl-hint.wide{display:block}
@media (max-width:399px){.tbl-hint.u400{display:block}}
@media (max-width:439px){.tbl-hint.u440{display:block}}
@media (max-width:479px){.tbl-hint.u480{display:block}}
@media (max-width:519px){.tbl-hint.u520{display:block}}
@media (max-width:559px){.tbl-hint.u560{display:block}}
@media (max-width:599px){.tbl-hint.u600{display:block}}
@media (max-width:639px){.tbl-hint.u640{display:block}}
@media (max-width:679px){.tbl-hint.u680{display:block}}
@media (max-width:719px){.tbl-hint.u720{display:block}}
@media (max-width:759px){.tbl-hint.u760{display:block}}
@media (max-width:799px){.tbl-hint.u800{display:block}}
/* budget-table 内は枠＋左右 padding（約 34px）の分、1 段広い画面幅から案内を出す */
@media (max-width:439px){.budget-table-inner .tbl-hint.u400{display:block}}
@media (max-width:479px){.budget-table-inner .tbl-hint.u440{display:block}}
@media (max-width:519px){.budget-table-inner .tbl-hint.u480{display:block}}
@media (max-width:559px){.budget-table-inner .tbl-hint.u520{display:block}}
@media (max-width:599px){.budget-table-inner .tbl-hint.u560{display:block}}
@media (max-width:639px){.budget-table-inner .tbl-hint.u600{display:block}}
@media (max-width:679px){.budget-table-inner .tbl-hint.u640{display:block}}
@media (max-width:719px){.budget-table-inner .tbl-hint.u680{display:block}}
@media (max-width:759px){.budget-table-inner .tbl-hint.u720{display:block}}
@media (max-width:799px){.budget-table-inner .tbl-hint.u760{display:block}}
@media (max-width:839px){.budget-table-inner .tbl-hint.u800{display:block}}
table.data{border-collapse:collapse;width:100%;font-size:15px} /* min-width は持たない：列が多い表だけが自然に幅を超えて横スクロールになる */
table.data th,table.data td{border:1px solid var(--c-line);padding:8px 10px;white-space:nowrap}
table.data thead th{background:var(--c-tint);font-weight:700;text-align:center}
table.data tbody th{text-align:left;font-weight:700;background:#fff;position:sticky;left:0}
table.data td{text-align:right;font-family:var(--f-num);font-variant-numeric:tabular-nums}
table.data td.max{background:var(--c-highlight);font-weight:700}
table.data td.txt{text-align:left;font-family:var(--f-ja);white-space:normal;min-width:9em;word-break:auto-phrase} /* 文章の入るセルは折り返す（数字セルは nowrap のまま）*/
table.data tr.total th,table.data tr.total td{font-weight:700}
.legend{font-size:14px;margin-top:8px}
.legend i{display:inline-block;width:12px;height:12px;background:var(--c-highlight);vertical-align:-1px;margin-right:6px}
.source{font-size:14px;color:var(--c-text-2);margin:6px 0 28px}

/* inline data chart：CSS の横棒（静的、アニメーションなし）*/
.bars{border:1px solid var(--c-line);padding:18px 20px 12px;margin:8px 0 6px}
.bars-title{font-weight:700;font-size:15px;margin-bottom:12px}
.bar{display:grid;grid-template-columns:6.5em 1fr 4.5em;gap:10px;align-items:center;margin-bottom:10px;font-size:14px}
.bar .track{background:var(--c-tint);height:14px}
.bar .fill{background:var(--c-primary);height:14px}
.bar .v{font-family:var(--f-num);font-variant-numeric:tabular-nums;text-align:right}
.bar.max .v{font-weight:700;background:var(--c-highlight);padding:0 4px}

.related{margin-top:48px}
.policy{border:1px solid var(--c-line);border-top:4px solid var(--c-primary);padding:20px 22px;margin:44px 0 0;font-size:15px}
.policy h2{font:700 17px/1.5 var(--f-ja);margin-bottom:8px}
.policy ul{margin-top:6px}
.policy li{padding-left:1em;text-indent:-1em;margin-bottom:4px}
.policy li::before{content:"・"}
.article .policy p{margin:8px 0 0;font-size:15px}

/* ===== PR 記事以外にも通用：汎用コンポーネント（hugo-template §十二、将来の記事用）===== */
.num-highlight{display:flex;gap:16px;border:1px solid var(--c-line);padding:16px 20px;margin:20px 0}
.num-cell{text-align:center}
.num-label{font-size:13px;color:var(--c-text-2);margin-bottom:4px}
.num-value{font:700 32px/1 var(--f-num);color:var(--c-primary)}
.num-unit{font-size:13px;color:var(--c-text-2);margin-top:2px}
.num-note{font-size:12px;color:var(--c-text-2);margin-top:4px}

.skip-box{border:1px solid var(--c-line);border-left:4px solid var(--c-primary-dark);padding:14px 18px;margin:20px 0}
.skip-box-header{display:flex;align-items:center;gap:8px;font-weight:700;margin-bottom:8px}
.skip-box-icon{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border:1px solid var(--c-text);border-radius:50%;font-size:13px}
.skip-box-body{font-size:15px}

.budget-table-wrap{border:1px solid var(--c-line);margin:20px 0}
.budget-table-head{background:var(--c-tint);padding:10px 16px;display:flex;flex-wrap:wrap;gap:8px;align-items:baseline}
.budget-table-head-title{font-weight:700}
.budget-table-head-sub{font-size:13px;color:var(--c-text-2)}
.budget-table-inner{padding:12px 16px}
.budget-table-inner table{width:100%;border-collapse:collapse;font-size:15px}
.budget-table-inner th,.budget-table-inner td{border:1px solid var(--c-line);padding:8px 10px;text-align:left}

/* ===== RWD：≤768px でハンバーガー（CSS only checkbox）===== */
@media (max-width:768px){
  .site-header .inner{padding:0 0 0 16px;min-height:56px}
  .brand-mark{width:32px;height:32px;font-size:19px}
  .brand-name{font-size:17px}
  .burger{display:flex;align-items:center;justify-content:center;width:56px;height:56px;background:var(--c-primary-dark);cursor:pointer}
  .burger span,.burger span::before,.burger span::after{display:block;width:24px;height:2px;background:#fff;position:relative}
  .burger span::before,.burger span::after{content:"";position:absolute;left:0}
  .burger span::before{top:-8px}.burger span::after{top:8px}
  .nav-list{display:none;position:absolute;top:56px;left:0;right:0;flex-direction:column;background:#fff;border-bottom:4px solid var(--c-primary);z-index:10}
  .nav-toggle:checked ~ .nav-list{display:flex}
  .nav-toggle:checked ~ .burger span{background:transparent}
  .nav-toggle:checked ~ .burger span::before{top:0;transform:rotate(45deg)}
  .nav-toggle:checked ~ .burger span::after{top:0;transform:rotate(-45deg)}
  .nav-list li,.nav-list li:last-child{border:0;border-bottom:1px solid var(--c-line)}
  .nav-list a{color:var(--c-text);padding:14px 20px;font-size:16px}
  .nav-list a::after{content:"›";float:right;color:var(--c-primary)}
  .nav-list a:hover{background:var(--c-tint);color:var(--c-text)}
  .title-band{padding:28px 16px}
  .title-band h1{font-size:23px}
  .crumb ol{padding:8px 16px;font-size:13px}
  .wrap,.article-wrap{padding:0 16px}
  .h-bar{font-size:21px;margin-top:44px}
  .theme-grid{grid-template-columns:1fr;gap:20px}
  .recent li{grid-template-columns:1fr;gap:2px}
  .article h1{font-size:24px}
  .article .h-bar,.article > h2{font-size:21px}
  .article h3{font-size:18px}
  .article p,.article > ul:not(.q-list),.article > ol{font-size:16px}
  .page-body{padding-top:28px}
  .bar{grid-template-columns:5.5em 1fr 4em}
}