/* theme.css — 画面全体の見た目（2026-10-23 西川指示: 洗練・メインを広く・情報を濃く・横スクロールを減らす）
   🔴 vendor（モックの複製）は1バイトも変えない。この1枚を component.css の後に読み、上書きだけで見た目を変える。
      モックとの見た目の一致（パリティ）は、このファイルを外せば戻る。
   方針:
     ・色は朱を残し、彩度を少し落として深くする。面は温かいグレー、境界は影でなく1pxの罫線
     ・数字は等幅の数字書体（IBM Plex Sans）、見出しは Zen Kaku Gothic New
     ・既定の拡大（html zoom 1.1）をやめ、メインの最大幅を外して横に広く使う
     ・表は文字と余白を詰め、見出しは折り返して列幅を抑える。はみ出す表は表の枠の中だけで動かす */
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@500;600&family=Zen+Kaku+Gothic+New:wght@500;700&display=swap");

:root{
  --shu:#B13A2C; --shu-d:#8E2D22; --shu-bg:#F8ECE8; --shu-bd:#E6C6BE;
  --ink:#1F1B18; --paper:#F4F2EE; --paper2:#ECE8E1; --raised:#F9F7F4;
  --border:#E3DED6; --muted:#857D72;
  --good:#1F7A4D; --bad:#B4332A; --warn:#B26A00;
  --line:#E3DED6; --line-2:#D3CCC1; --panel:#FFFFFF; --panel-2:#F9F7F4;
  --fg:#1F1B18; --fg-2:#5C554C; --fg-3:#8A8277;
  --zebra:#FAF9F6; --rowhov:#FBF1EE; --dbar:#EED7D1;
  --side-bg:#1F1B18; --side-fg:#ECE7DF; --side-fg-2:rgba(236,231,223,.52);
  --f-display:"Zen Kaku Gothic New","Noto Sans JP",system-ui,sans-serif;
  --f-num:"IBM Plex Sans","Noto Sans JP",system-ui,sans-serif;
}
html{zoom:1;}
body{background:var(--paper);color:var(--fg);font-size:14px;line-height:1.6;-webkit-font-smoothing:antialiased;}

/* ── サイドバー（濃い墨・選択中は朱で塗る・項目の前に小さな点） ── */
.sb2{width:224px;background:var(--side-bg);padding:14px 10px 40px;border-right:1px solid rgba(0,0,0,.2);}
.sb2 .logo{margin:4px 0 12px;}
.sb2 .logo .n{font-size:19px;}
.sb2 .mode{background:rgba(255,255,255,.06);border-radius:10px;}
.sb2 .mode button{font-size:12px;border-radius:8px;}
.sb2 .mode button.on,.sb2 button.nv.on{background:var(--shu);box-shadow:0 1px 4px rgba(177,58,44,.45);}
.sb2 .glab{font-size:10.5px;font-weight:600;letter-spacing:.12em;color:var(--side-fg-2);margin:16px 8px 4px;}
.sb2 .glab::after{border-top-color:rgba(236,231,223,.12);}
.sb2 button.nv{font-size:13px;font-weight:500;color:var(--side-fg);padding:7px 10px;border-radius:8px;gap:8px;line-height:1.35;}
.sb2 button.nv.on{font-weight:700;}
.sb2 button.nv > span:first-child{width:18px;text-align:center;flex-shrink:0;opacity:.9;}

/* ── メイン（最大幅を外して横いっぱいに。左右の余白は 24px） ── */
.main{max-width:none;padding:18px 24px 64px;}
.qhead{margin:2px 0 12px;padding-left:14px;}
.qhead::before{top:4px;width:4px;height:24px;background:var(--shu);}
.qhead h1{font-family:var(--f-display);font-size:21px;font-weight:700;letter-spacing:.01em;}
.qhead .who{border-color:var(--line-2);color:var(--fg-2);background:var(--panel);font-weight:500;}
.qhead .steps{color:var(--fg-3);font-size:12px;}
h5{font-family:var(--f-display);}
.cap{color:var(--fg-3);font-size:11.5px;}

/* ── セクション（白い面＋1pxの罫線・影なし。見出しは墨の帯に朱の縦線） ── */
.sec{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px 18px;margin:12px 0;box-shadow:none;}
.sec > h2:first-child{font-family:var(--f-display);font-size:15px;font-weight:700;line-height:1.4;color:#fff;
  background:var(--side-bg);border-left:5px solid var(--shu);margin:-14px -18px 12px;padding:9px 16px;border-radius:11px 11px 0 0;}
.sec > h2:first-child .sub,.sec > h2:first-child span{color:rgba(255,255,255,.7);}
.sec h2{font-family:var(--f-display);font-size:15px;}
.sec.plain{background:transparent;border:none;padding:0;}

/* ── KPI カード（値は墨・数字書体。カードは詰めて横に並べる） ── */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin:6px 0 14px;}
.kpi,.kpi2{border:1px solid var(--line);border-radius:12px;padding:13px 16px 12px;box-shadow:none;min-width:0;background:var(--panel);}
.kpi .l{font-size:12px;color:var(--fg-2);font-weight:500;}
.kpi .v{font-family:var(--f-num);font-size:clamp(20px,1.9vw,26px);font-weight:600;letter-spacing:-.01em;color:var(--fg);}
.kpi .d{font-size:11.5px;font-weight:500;}
.kpi .kico{width:30px;height:30px;font-size:14px;border-color:var(--shu-bd);color:var(--shu);top:12px;right:12px;}

/* ── タブ（丸いピル。選択中は朱で塗る） ── */
.tabs{gap:6px;border-bottom:none;margin:10px 0 10px;}
.tabs button,.tabs a{border:1px solid var(--line);background:var(--panel);color:var(--fg-2);font-size:12.5px;font-weight:700;
  padding:6px 14px;border-radius:999px;margin-bottom:0;}
.tabs button:hover,.tabs a:hover{background:var(--shu-bg);border-color:var(--shu-bd);color:var(--shu-d);}
.tabs button.on,.tabs a.on{background:var(--shu);border-color:var(--shu);color:#fff;}

/* ── 表（見出しは淡い面・文字は詰める・数字は数字書体） ── */
.zwrap{border:1px solid var(--line);border-radius:10px;box-shadow:none;background:var(--panel);}
table.zt{font-size:13px;color:var(--fg);}
table.zt th{background:var(--panel-2);color:var(--fg-2);font-weight:600;font-size:11.5px;padding:7px 10px;line-height:1.35;
  border-bottom:1px solid var(--line-2);white-space:normal;vertical-align:bottom;min-width:3.5em;}
table.zt th:hover{background:#F1EDE7;}
table.zt th .sub{color:var(--fg-3);font-weight:400;max-width:none;}
table.zt td{padding:5px 10px;border-bottom:1px solid var(--line);}
table.zt td.num{font-family:var(--f-num);font-weight:500;white-space:nowrap;}
/* 横スクロールを減らす: 書名・著者・店名など文字の列は折り返す（数字の列は1行のまま）。1列が広がりすぎないよう上限を置く */
table.zt td:not(.num){white-space:normal;overflow-wrap:anywhere;max-width:26em;}
table.zt td:not(.num) > a,table.zt td:not(.num) > b{overflow-wrap:anywhere;}
table.zt td.ell{max-width:220px;}
table.zt tr:nth-child(even) td{background:var(--zebra);}
table.zt tr:hover td{background:var(--rowhov);}
table.zt tr.grow td{background:var(--panel-2)!important;border-top:1px solid var(--line-2);}
table.zt.fixcol thead th:first-child{background:var(--panel-2);}
table.zt.fixcol th:first-child,table.zt.fixcol td:first-child{border-right:1px solid var(--line-2);}
table.zt.fixcol tr:nth-child(even) td:first-child{background:var(--zebra);}
table.zt.fixcol tr:hover td:first-child{background:var(--rowhov);}

/* ── 小物（ピル・選択・リンク） ── */
.pills{gap:6px;}
.pill,.ic{border:1px solid var(--line);background:var(--panel);border-radius:999px;font-size:11.5px;}
a.pill:hover{border-color:var(--shu-bd);color:var(--shu-d);}
select,.dd .cur,.lbtn{border:1px solid var(--line-2);border-radius:8px;background:#fff;font-family:var(--font);}
select{font-size:12.5px;padding:5px 8px;color:var(--fg);}
select:focus{outline:none;border-color:var(--shu);box-shadow:0 0 0 3px var(--shu-bg);}
.namelink{border-bottom-color:rgba(31,27,24,.25);}
.lbtn.on{background:var(--shu);border-color:var(--shu);}
.card,.acard,.hl{border:1px solid var(--line);box-shadow:none;border-radius:12px;}
.card:hover,.acard:hover{box-shadow:0 2px 10px rgba(31,27,24,.08);}

/* ── 狭い画面（スマホ）: 余白を詰める。サイドバーは vendor の折りたたみのまま ── */
@media (max-width:760px){
  .sb2{width:100%;}
  .main{padding:12px 10px 56px;}
  .sec{padding:12px 12px;}
  .sec > h2:first-child{margin:-12px -12px 10px;padding:8px 12px;font-size:14px;}
  .kpis{grid-template-columns:1fr 1fr;gap:8px;}
  table.zt{font-size:12.5px;}
}