:root{
  --ink:#1c2a33;
  --muted:#4a5a66;
  --bg:#f7f4ef;
  --card:#fff;
  --line:#d9d1c7;
  --accent:#1f5f4a;
  --accent-2:#c45c26;
  --warn-bg:#fff6e8;
  --warn-line:#e2c48a;
  --ad-bg:#eef5f1;
  --max:760px;
  --radius:12px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic",YuGothic,sans-serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.8;
  font-size:16.5px;
  -webkit-text-size-adjust:100%;
}
a{color:var(--accent); text-underline-offset:3px}
a:hover{color:#164536}
img{max-width:100%; height:auto}
.wrap{max-width:var(--max); margin:0 auto; padding:0 1.1rem}
.site-header{
  background:#17342c;
  color:#fff;
  padding:.7rem 0 .85rem;
}
.site-header a{color:#fff}
.brand{
  display:flex; flex-direction:column; gap:.1rem;
  text-decoration:none;
}
.brand-kicker{font-size:.75rem; letter-spacing:.08em; opacity:.8}
.brand-name{font-weight:700; font-size:1.15rem; letter-spacing:.02em}
.ad-disclosure{
  margin-top:.55rem;
  background:var(--ad-bg);
  color:#17342c;
  border:1px solid #cfe0d6;
  border-radius:8px;
  padding:.35rem .7rem;
  font-size:.85rem;
  font-weight:700;
}
.nav{
  display:flex; flex-wrap:wrap; gap:.35rem .9rem;
  margin-top:.65rem; font-size:.9rem;
}
.nav a{color:#e8f3ee; text-decoration:none; border-bottom:1px solid transparent}
.nav a:hover{border-bottom-color:#e8f3ee}
.hero,.article-head{padding:1.6rem 0 1.1rem}
h1{font-size:1.55rem; line-height:1.45; margin:0 0 .8rem}
h2{font-size:1.28rem; line-height:1.45; margin:2.1rem 0 .7rem; padding-top:.4rem; border-top:1px solid var(--line)}
h3{font-size:1.08rem; margin:1.5rem 0 .45rem}
p{margin:.75rem 0}
.lede{font-size:1.02rem}
.points,.notice,.cta,.partner-slot,.sources,.toc{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:1rem 1.1rem;
  margin:1.1rem 0;
}
.points{background:#fff}
.points h2,.toc h2,.sources h2,.cta h2,.partner-slot h2{border:0; margin-top:0; padding-top:0; font-size:1.05rem}
.points ol{margin:.3rem 0 0; padding-left:1.3rem}
.notice{
  background:var(--warn-bg);
  border-color:var(--warn-line);
  font-size:.95rem;
}
.toc ol{padding-left:1.3rem; margin:.3rem 0 0}
table{
  width:100%;
  border-collapse:collapse;
  background:#fff;
  font-size:.92rem;
  margin:1rem 0 1.3rem;
}
th,td{border:1px solid var(--line); padding:.55rem .5rem; text-align:left; vertical-align:top}
th{background:#ece7e0; font-weight:700}
.table-wrap{overflow-x:auto; margin:1rem 0}
.checklist{list-style:none; padding:0}
.checklist li{
  background:#fff;
  border:1px solid var(--line);
  border-radius:8px;
  padding:.55rem .7rem .55rem 2.1rem;
  margin:.45rem 0;
  position:relative;
}
.checklist li::before{content:"☐"; position:absolute; left:.65rem; top:.5rem}
.article-meta{color:var(--muted); font-size:.88rem; margin-bottom:.6rem}
.cards{display:grid; gap:.8rem; margin:1.1rem 0 1.6rem}
@media(min-width:640px){.cards{grid-template-columns:1fr 1fr}}
.card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:1rem 1.05rem; text-decoration:none; color:inherit; display:block;
}
.card:hover{border-color:var(--accent)}
.card h2{border:0; margin:.1rem 0 .35rem; padding:0; font-size:1.05rem; color:var(--accent)}
.card p{margin:0; color:var(--muted); font-size:.92rem}
.cta{background:#f3faf6; border-color:#c9e0d4}
.partner-slot{background:#f4f6f8}
.site-footer{
  margin-top:3rem;
  background:#17342c;
  color:#e8f3ee;
  padding:1.6rem 0 2.2rem;
  font-size:.9rem;
}
.site-footer a{color:#e8f3ee}
.footer-nav{display:flex; flex-wrap:wrap; gap:.5rem 1rem; margin-bottom:.8rem}
.muted{color:var(--muted)}
.updated{font-size:.85rem; color:var(--muted)}
.source-list{padding-left:1.2rem}
.source-list li{margin:.35rem 0}
blockquote{
  margin:1rem 0;
  padding:.2rem 0 .2rem 1rem;
  border-left:4px solid var(--accent);
  color:#24343c;
}
.breadcrumbs{font-size:.85rem; color:var(--muted); margin:1rem 0 0}
.breadcrumbs a{color:var(--muted)}
.faq details{
  background:#fff; border:1px solid var(--line); border-radius:8px;
  padding:.6rem .8rem; margin:.5rem 0;
}
.faq summary{cursor:pointer; font-weight:700}
.skip{position:absolute; left:-999px}
.skip:focus{left:1rem; top:1rem; background:#fff; padding:.3rem .5rem; z-index:10}
@media print{
  .site-header,.site-footer,.nav,.cta,.partner-slot{break-inside:avoid}
}