/*
 * ひとりバックオフィス — 業務の書類のように静かなページ
 * 色に意味を持たせるのは「申込ボタン（--action）」と「広告の表示（--ad-*）」の2つだけ。
 * 分野の色分けはしない。Webフォント・JavaScript は使わない。
 * コントラスト（計算値）：--action #b3541e × 白 5.0:1／ダークの --action #e8956a × #16191b 7.5:1
 */
:root{
  --bg:#f7f4ee; --paper:#ffffff; --ink:#1d2327; --muted:#5d666d; --line:#e4ded3; --line-strong:#cbc2b4;
  --primary:#1f4e5f;
  --action:#b3541e; --action-hover:#9c4818; --action-ink:#ffffff;
  --ad-bg:#fbf4ec; --ad-line:#d9b9a3; --ad-ink:#6b4a2e;
  --mark:#fff1a8;
  --text:720px; --wide:960px;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#141719; --paper:#1b1f22; --ink:#e8e6e1; --muted:#9aa3a9; --line:#2c3236; --line-strong:#434b50;
  --primary:#7cb9cc;
  --action:#e8956a; --action-hover:#f0a57e; --action-ink:#16191b;
  --ad-bg:#2a211b; --ad-line:#6b4a2e; --ad-ink:#e8d2bf;
  --mark:#5a4d00;
}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.9 "Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic",sans-serif;letter-spacing:.01em;font-weight:400}
h1,h2,h3,h4,strong,b,th{font-weight:700}
a{color:var(--primary);text-underline-offset:.2em}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--primary);outline-offset:2px}
img{max-width:100%;height:auto}
.skip{position:absolute;left:-9999px;top:0}
.skip:focus{left:8px;top:8px;background:var(--paper);padding:8px 12px;z-index:10}
.wrap{max-width:1100px;margin:0 auto;padding:0 20px}
.page{padding-bottom:56px}
section{margin:40px 0}
.nowrap{white-space:nowrap}

/* ---------- ヘッダー ---------- */
.site-header{background:var(--paper);border-bottom:1px solid var(--line)}
.head-row{display:flex;align-items:center;padding-top:14px;padding-bottom:10px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink);min-height:44px}
.brand-mark{flex:0 0 34px;width:34px;height:34px;border-radius:8px;background:url(/favicon.svg) center/cover}
.brand-text{display:flex;flex-direction:column;line-height:1.35}
.brand-name{font-weight:700;font-size:19px;letter-spacing:.02em}
.brand-sub{font-size:13px;color:var(--muted)}
.cat-nav{border-top:1px solid var(--line)}
.nav-row{display:flex;flex-wrap:wrap;gap:0 4px;list-style:none;margin:0 auto;padding-top:4px;padding-bottom:4px}
.nav-row li{margin:0}
.nav-row a{display:flex;align-items:center;min-height:40px;white-space:nowrap;text-decoration:none;color:var(--ink);font-size:15px;padding:0 12px;border-bottom:2px solid transparent}
.nav-row a:hover{border-bottom-color:var(--line-strong)}
.nav-row a[aria-current=page]{border-bottom-color:var(--primary);color:var(--primary);font-weight:700}

/* ---------- パンくず ---------- */
.crumbs{font-size:13px;color:var(--muted);padding:16px 0 8px}
.crumbs ol{display:flex;flex-wrap:wrap;gap:4px 0;list-style:none;margin:0;padding:0}
.crumbs li{display:flex;align-items:center}
.crumbs li+li::before{content:"›";margin:0 8px;color:var(--line-strong)}
.crumbs a{color:var(--muted)}
.crumbs [aria-current]{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}

/* ---------- 記事（本文は約720px。比較表だけ最大960px） ---------- */
.post{background:var(--paper);border:1px solid var(--line);border-radius:4px;padding:40px 50px 48px}
.post-head,.post-body>*,.offers-end,.after,.post .toc{max-width:var(--text);margin-left:auto;margin-right:auto}
.after{margin-top:32px}
.post-cat{display:inline-block;font-size:14px;color:var(--muted);text-decoration:none;border:1px solid var(--line-strong);border-radius:3px;padding:0 8px;line-height:1.8}
.post-cat:hover{color:var(--ink)}
.post-head h1{font-size:clamp(22px,3.2vw,28px);line-height:1.5;margin:12px 0 12px;letter-spacing:.02em}
.post-meta{color:var(--muted);font-size:14px;margin:8px 0 0}
.post-meta .sep{margin:0 .4em;color:var(--line-strong)}

/* PR表記：本文と同じ大きさ・枠と淡い背景・題名のすぐ下 */
.pr{font-size:16px;line-height:1.7;color:var(--ad-ink);background:var(--ad-bg);border:1px solid var(--ad-line);border-radius:4px;padding:8px 14px;margin:12px 0}

.usedline{margin:16px 0 0;padding:10px 14px;border:1px solid var(--line);border-radius:4px;font-size:14px;line-height:1.7;background:var(--bg)}
.usedline div{display:flex;flex-wrap:wrap;gap:0 .8em}
.usedline div+div{margin-top:4px}
.usedline dt{font-weight:700;color:var(--muted)}
.usedline dd{margin:0}

.toc{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:14px 0;margin:28px auto}
.toc-h{margin:0 0 4px;font-weight:700;font-size:14px;color:var(--muted)}
.toc ol{margin:0;padding-left:1.6em;font-size:15px;line-height:1.9}
.toc a{text-decoration:none}
.toc a:hover{text-decoration:underline}

.post-body{margin-top:24px}
.post-body h2{font-size:22px;line-height:1.5;margin:2.4em auto .8em;padding-bottom:.35em;border-bottom:2px solid var(--primary);scroll-margin-top:16px}
.post-body h3{font-size:18px;line-height:1.55;margin:2em auto .6em;padding-left:10px;border-left:3px solid var(--line-strong)}
.post-body h4{font-size:16px;margin:1.6em auto .4em}
.post-body p{margin:0 auto 1em}
.post-body p,.post-body li{overflow-wrap:anywhere}
.post-body ul,.post-body ol{padding-left:1.5em;margin-top:0;margin-bottom:1.1em}
.post-body li{margin:.25em 0}
.post-body hr{border:0;border-top:1px solid var(--line);margin:2em auto}
.post-body blockquote{margin:1.2em auto;padding:4px 16px;border-left:3px solid var(--line-strong);color:var(--muted)}
.post-body blockquote p{margin:.5em 0}
.post-body figure{margin:1.6em auto;text-align:center}
.post-body figure img{border:1px solid var(--line);border-radius:4px;background:#fff}
.post-body figcaption{font-size:14px;color:var(--muted);margin-top:6px}

/* 結論ボックス：本文より一段強い枠 */
.box{border-radius:4px;padding:16px 20px 6px;margin:1.6em auto}
.box .box-h{font-weight:700;margin:0 0 6px;font-size:15px}
.box>*:last-child{margin-bottom:10px}
.conclusion{border:2px solid var(--primary);background:var(--paper)}
.conclusion .box-h{color:var(--primary)}
.note{border:1px solid var(--line-strong);border-left:4px solid var(--muted);background:var(--bg)}
.note .box-h{color:var(--muted)}
.box ul,.box ol{margin-bottom:.8em}

/* 表 */
.table{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:1.4em auto;border:1px solid var(--line);border-radius:4px;background:var(--paper)}
.post-body>.table.wide{max-width:var(--wide)}
.table.wide table{min-width:600px}
table{border-collapse:separate;border-spacing:0;width:100%;font-size:15px;line-height:1.7;font-variant-numeric:tabular-nums}
th,td{border-bottom:1px solid var(--line);padding:9px 12px;text-align:left;vertical-align:top}
thead th{background:var(--bg)}
.table.wide th,.table.wide td{min-width:7em}
tbody th{background:var(--bg);white-space:nowrap;width:1%}
tr:last-child td,tr:last-child th{border-bottom:none}
td.judge,th.center,td.center{text-align:center}
td.judge{white-space:nowrap}
td.num,th.num{text-align:right}
/* 横にスクロールする表は1列目を固定 */
.table th:first-child,.table td:first-child{position:sticky;left:0;z-index:1;border-right:1px solid var(--line)}
.table td:first-child{background:var(--paper)}
.table thead th:first-child{background:var(--bg)}

pre{overflow-x:auto;background:var(--bg);border:1px solid var(--line);padding:14px;border-radius:4px;font-size:14px;line-height:1.6}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.92em}
mark.review{background:var(--mark);color:inherit;padding:0 2px}

/* 申込ボタン：行動色はここだけ */
.offer{margin:1.4em auto;padding:14px 16px;border:1px solid var(--line);border-radius:4px;background:var(--paper)}
.offer-meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;margin:0 0 10px;font-size:14px;color:var(--muted)}
.ad-label{display:inline-block;font-size:14px;line-height:1.6;color:var(--ad-ink);background:var(--ad-bg);border:1px solid var(--ad-line);border-radius:3px;padding:0 8px}
.offer-btn{display:flex;align-items:center;justify-content:center;min-height:48px;max-width:440px;padding:10px 20px;border-radius:6px;background:var(--action);color:var(--action-ink);font-weight:700;text-decoration:none;text-align:center;line-height:1.5}
.offer-btn:hover{background:var(--action-hover);text-decoration:none}
.offer-code{overflow-wrap:anywhere}
.offers-end{margin-top:40px}
.offers-h{font-weight:700;margin:0 0 4px}
a.aff{font-weight:700}

/* ---------- 著者欄 ---------- */
.author{display:flex;gap:16px;align-items:flex-start;background:var(--paper);border:1px solid var(--line);border-radius:4px;padding:18px 20px;margin:32px 0}
.avatar{flex:0 0 48px;width:48px;height:48px;border:1px solid var(--line-strong);border-radius:50%;color:var(--primary);display:flex;align-items:center;justify-content:center}
.avatar svg{width:30px;height:30px}
.author-name{margin:0 0 4px;font-weight:700}
.author-desc{margin:0;color:var(--muted);font-size:14px;line-height:1.8}

/* ---------- カード ---------- */
.sec-h{font-size:19px;margin:0 0 14px;line-height:1.5}
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.cards.one{grid-template-columns:1fr}
.card{display:flex;flex-direction:column;gap:4px;background:var(--paper);border:1px solid var(--line);border-radius:4px;padding:14px 16px;text-decoration:none;color:var(--ink);min-height:44px}
.card:hover{border-color:var(--primary)}
.card:hover .card-title{text-decoration:underline}
.card-cat{font-size:13px;color:var(--muted)}
.card-title{font-weight:700;line-height:1.6;color:var(--primary)}
.card-desc{color:var(--muted);font-size:14px;line-height:1.7;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card.pillar{border-color:var(--line-strong);border-width:1px 1px 1px 4px;border-left-color:var(--primary)}
.more{margin:12px 0 0;font-size:15px}
.related{margin-top:32px}

/* ---------- 分野ページ ---------- */
.hub{max-width:1000px}
.cat-head{padding:8px 0 0}
.cat-head h1{margin:4px 0 6px;font-size:28px;line-height:1.4}
.cat-desc{margin:0;color:var(--muted)}
.empty{color:var(--muted)}
.cat-note{margin:12px 0 0;padding:8px 14px;border:1px solid var(--line-strong);border-radius:4px;font-size:15px;background:var(--paper)}
.entry-list{list-style:none;margin:0;padding:0;border:1px solid var(--line);border-radius:4px;background:var(--paper)}
.entry-list li+li{border-top:1px solid var(--line)}
.entry-list a{display:flex;flex-wrap:wrap;gap:2px 14px;padding:12px 16px;text-decoration:none;min-height:44px}
.entry-k{font-weight:700;color:var(--ink);min-width:12em}
.entry-v{text-decoration:underline}

/* ---------- トップ ---------- */
.intro{margin:32px 0 8px}
.intro h1{font-size:clamp(22px,3.4vw,30px);line-height:1.5;margin:0 0 10px;letter-spacing:.02em}
.intro p{margin:0 0 12px;color:var(--muted);max-width:var(--text)}
.troubles{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.trouble{margin:0;background:var(--paper);border:1px solid var(--line);border-radius:4px;padding:16px 18px}
.trouble h3{margin:0 0 4px;font-size:17px}
.trouble>p{margin:0 0 8px;font-size:14px;color:var(--muted);line-height:1.7}
.trouble ul{margin:0 0 8px;padding-left:1.2em;font-size:15px;line-height:1.7}
.trouble li{margin:.35em 0}
.more-link{font-size:14px}
.cat-list{list-style:none;margin:0;padding:0;border:1px solid var(--line);border-radius:4px;background:var(--paper)}
.cat-list li+li{border-top:1px solid var(--line)}
.cat-list a{display:grid;grid-template-columns:10em 1fr auto;gap:4px 16px;align-items:baseline;padding:12px 16px;text-decoration:none;color:var(--ink);min-height:44px}
.cat-list a:hover .cat-name{text-decoration:underline}
.cat-name{font-weight:700;color:var(--primary)}
.cat-desc{color:var(--muted);font-size:14px}
.cat-list .cat-desc{margin:0}
.cat-count{font-size:14px;color:var(--muted);font-variant-numeric:tabular-nums}

/* ---------- フッター ---------- */
.site-footer{background:var(--paper);border-top:1px solid var(--line);padding:32px 0 20px;font-size:14px;color:var(--muted)}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:24px}
.foot-brand{font-weight:700;color:var(--ink);margin:0 0 6px}
.foot-note{margin:0 0 6px;line-height:1.7}
.foot-h{font-weight:700;color:var(--ink);margin:0 0 6px}
.foot-list{list-style:none;margin:0;padding:0}
.foot-list li{margin:0}
.foot-list a{display:inline-flex;align-items:center;min-height:36px;color:var(--muted);overflow-wrap:anywhere}
.foot-list a:hover{color:var(--ink)}
.foot-copy{margin-top:20px;font-size:12px}

/* ---------- スマホ ---------- */
@media (max-width:760px){
  .wrap{padding:0 16px}
  .head-row{padding-top:10px;padding-bottom:6px}
  .brand-sub{font-size:12px}
  .nav-row{padding-left:8px;padding-right:8px}
  .nav-row a{font-size:14px;padding:0 8px;min-height:44px}
  .post{border-radius:0;border-left:0;border-right:0;margin:0 -16px;padding:20px 16px 28px}
  .post-body h2{font-size:20px}
  .cards,.troubles{grid-template-columns:1fr}
  .cat-list a{grid-template-columns:1fr auto}
  .cat-list .cat-desc{grid-column:1 / -1;grid-row:2}
  .foot-grid{grid-template-columns:1fr;gap:16px}
  .offer-btn{max-width:none}
  .table{margin-left:0;margin-right:0}
  th,td{padding:8px 10px}
}
@media print{
  .site-header,.site-footer,.toc,.offer,.offers-end,.related{display:none}
  .post{border:0;padding:0}
}