/* コラム共通：トップと同じ藍×金茶。本文は読みやすさ優先の1カラム */
:root{
  --ink:#1c2740;--ai:#24396b;--paper:#f7f8f6;--card:#ffffff;--line:#dfe2e4;--muted:#5b6474;--soft:#f1f2ef;
  --kincha:#9c7426;--kincha-ink:#ffffff;
  --c-taisaku:#2f6b5a;--c-shintaku:#7a4a6b;--c-zei:#9c7426;--c-tetsuzuki:#24396b;
  --f-display:"Shippori Mincho","Hiragino Mincho ProN","Yu Mincho",serif;
  --f-body:"Noto Sans JP","Hiragino Sans","Yu Gothic",system-ui,sans-serif;
  padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --ink:#e7eaf0;--ai:#8fa6d8;--paper:#11161f;--card:#18202c;--line:#2a3442;--muted:#9aa4b4;--soft:#151c27;
  --kincha:#d1a856;--kincha-ink:#1a1408;--c-taisaku:#7fc2ad;--c-shintaku:#d39cc2;--c-zei:#d1a856;--c-tetsuzuki:#8fa6d8;color-scheme:dark}}
:root[data-theme="dark"]{
  --ink:#e7eaf0;--ai:#8fa6d8;--paper:#11161f;--card:#18202c;--line:#2a3442;--muted:#9aa4b4;--soft:#151c27;
  --kincha:#d1a856;--kincha-ink:#1a1408;--c-taisaku:#7fc2ad;--c-shintaku:#d39cc2;--c-zei:#d1a856;--c-tetsuzuki:#8fa6d8;color-scheme:dark}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f-body);font-size:16px;line-height:1.9;letter-spacing:.02em}
img{max-width:100%}
a{color:var(--ai)}
:focus-visible{outline:2px solid var(--kincha);outline-offset:3px}
.wrap{max-width:1040px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.wrap.narrow{max-width:760px}
h1,h2,h3{font-family:var(--f-display);font-weight:700;line-height:1.5;text-wrap:balance;word-break:auto-phrase;margin:0}
p{margin:0}
.eyebrow{font-size:12px;letter-spacing:.2em;color:var(--kincha);font-weight:700}
.btn{display:inline-flex;align-items:center;justify-content:center;background:var(--kincha);color:var(--kincha-ink);border-radius:4px;padding:12px 22px;font:700 15px var(--f-body);text-decoration:none}
.btn.sm{padding:8px 14px;font-size:13px}

body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--paper)}
header.site{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:var(--paper);border-bottom:1px solid var(--line)}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:12px}
.logo{font-family:var(--f-display);font-size:22px;font-weight:700;color:var(--ink);text-decoration:none;letter-spacing:.04em}
.logo span{color:var(--kincha)}
nav.g{display:flex;gap:22px;font-size:14px}
nav.g a{color:var(--ink);text-decoration:none}
@media (max-width:760px){nav.g{display:none}}

main.article{padding-block:32px 72px}
.crumb{display:flex;flex-wrap:wrap;gap:8px;font-size:12px;color:var(--muted);margin-bottom:24px}
.crumb a{color:var(--muted)}
.cat{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.08em;color:var(--ai)}
.cat.c-taisaku{color:var(--c-taisaku)}.cat.c-zei{color:var(--c-zei)}.cat.c-tetsuzuki{color:var(--c-tetsuzuki)}
.article h1{font-size:clamp(24px,3.6vw,34px);margin-top:8px}
.meta{font-size:13px;color:var(--muted);margin-top:12px}
.hero-img{display:block;width:100%;height:auto;aspect-ratio:16/7;object-fit:cover;border-radius:6px;margin-block:28px 8px}

.body{display:grid;gap:18px;margin-top:20px}
.body h2{font-size:22px;margin-top:28px;padding-bottom:8px;border-bottom:2px solid var(--ink)}
.body ul,.body ol{margin:0;padding-left:1.4em;display:grid;gap:6px}
.body strong{background:linear-gradient(transparent 65%,color-mix(in srgb,var(--kincha) 28%,transparent) 65%)}
.formula{background:var(--soft);border:1px solid var(--line);border-radius:4px;padding:14px 18px;font-weight:700;text-align:center;font-variant-numeric:tabular-nums}
.tbl{width:100%;border-collapse:collapse;font-size:14px;line-height:1.7;display:block;overflow-x:auto}
.tbl tbody{display:table;width:100%}
.tbl th,.tbl td{border:1px solid var(--line);padding:10px 12px;text-align:left;vertical-align:top;font-variant-numeric:tabular-nums}
.tbl th{background:var(--soft);font-weight:700;white-space:nowrap}
.tbl td{background:var(--card);min-width:6em}
.point{background:var(--card);border:1px solid var(--line);border-top:3px solid var(--kincha);border-radius:4px;padding:18px 22px;margin-top:12px}
.point b{font-family:var(--f-display);font-size:17px;display:block;margin-bottom:8px}
.point ul{margin:0;padding-left:1.3em;display:grid;gap:4px}
.note,.disclaimer{font-size:13px;color:var(--muted)}
.disclaimer{margin-top:36px;padding-top:16px;border-top:1px solid var(--line)}

.cta-box{margin-top:40px;background:var(--ai);color:#eef1f7;border-radius:6px;padding:32px 28px;display:grid;gap:12px;justify-items:start}
.cta-box .eyebrow{color:#e2c58a}
.cta-box h2{font-size:22px;color:#ffffff}
.cta-box p{color:#c9d1e3;font-size:15px}
.cta-box .btn{margin-top:6px}

.related{margin-top:48px;display:grid;gap:18px}
.related h2{font-size:20px}
.cols{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.narrow .cols{grid-template-columns:1fr}
.col{display:grid;gap:6px;align-content:start;padding:18px 20px;background:var(--card);border:1px solid var(--line);border-radius:6px;text-decoration:none;color:var(--ink);min-width:0}
.col:hover{border-color:var(--ai)}
.col h3{font-size:16px}
.col p{font-size:13px;color:var(--muted);line-height:1.7}
@media (max-width:860px){.cols{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.cols{grid-template-columns:1fr}}

.lead{color:var(--muted);margin-top:12px;max-width:40em}
.tabs{display:flex;flex-wrap:wrap;gap:8px;margin-block:24px 8px}
.tabs a{border:1px solid var(--line);background:var(--card);border-radius:999px;padding:6px 16px;font-size:14px;text-decoration:none;color:var(--ink)}
.cat-sec{margin-top:48px;scroll-margin-top:80px}
.cat-head{display:grid;gap:4px;margin-bottom:18px}
.cat-head h2{font-size:26px;display:flex;align-items:baseline;gap:12px}
.cat-head small{font-family:var(--f-body);font-size:13px;color:var(--muted);font-weight:400}
#taisaku .eyebrow{color:var(--c-taisaku)}#tetsuzuki .eyebrow{color:var(--c-tetsuzuki)}

footer{padding-block:36px;font-size:13px;color:var(--muted);border-top:1px solid var(--line)}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px}
footer nav{display:flex;flex-wrap:wrap;gap:16px}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
.cat-sec .cols{grid-template-columns:repeat(2,1fr)}
@media (max-width:560px){.cat-sec .cols{grid-template-columns:1fr}}
.cat-sec .cols.three{grid-template-columns:repeat(3,1fr)}
@media (max-width:860px){.cat-sec .cols.three{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.cat-sec .cols.three{grid-template-columns:1fr}}
#shintaku .eyebrow{color:var(--c-shintaku)}.cat.c-shintaku{color:var(--c-shintaku)}

.logo{display:block;line-height:0}
.logo img{height:56px;width:auto;display:block}
.logo .lw{display:none}
@media (max-width:560px){.logo img{height:42px}}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .logo .lb{display:none}:root:not([data-theme="light"]) .logo .lw{display:block}}
:root[data-theme="dark"] .logo .lb{display:none}:root[data-theme="dark"] .logo .lw{display:block}