/* 読み物ページ共通（/guide /safety /faq /about /column） */
:root{
  --bg:#12141a; --card:#1b1f27; --line:#2c323d; --fg:#eef1f6; --fg-2:#aab3c2; --fg-3:#6a7484;
  --accent:#ffb648;
}
@media (prefers-color-scheme: light){
  :root{ --bg:#f6f4f0; --card:#ffffff; --line:#e3ded6; --fg:#1b1a17; --fg-2:#4f5460; --fg-3:#8d939e; }
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--fg); line-height:1.95; font-size:16px;
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Noto Sans JP","Yu Gothic UI",Meiryo,system-ui,sans-serif;
  -webkit-text-size-adjust:100%;
}
.wrap{max-width:720px; margin:0 auto; padding:18px 20px 64px}
header.site{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  padding-bottom:14px; border-bottom:1px solid var(--line); margin-bottom:22px}
.logo{font-size:20px; font-weight:800; letter-spacing:.03em; color:var(--fg); text-decoration:none}
.logo span{color:var(--accent)}
nav.gnav{display:flex; gap:14px; flex-wrap:wrap; font-size:13px}
nav.gnav a{color:var(--fg-2); text-decoration:none}
nav.gnav a:hover, nav.gnav a[aria-current]{color:var(--accent)}
.crumb{font-size:12px; color:var(--fg-3); margin-bottom:6px}
.crumb a{color:var(--fg-3)}
h1{font-size:24px; margin:6px 0 6px; line-height:1.5}
.lead{color:var(--fg-2); margin:0 0 8px}
.meta{color:var(--fg-3); font-size:12px; margin-bottom:26px}
h2{font-size:19px; margin:40px 0 10px; padding-top:18px; border-top:1px solid var(--line); line-height:1.5}
h3{font-size:16px; margin:24px 0 6px}
p, li{color:var(--fg-2)}
ol, ul{padding-left:1.4em}
li{margin-bottom:8px}
strong{color:var(--fg)}
a{color:var(--accent)}
.note{background:var(--card); border:1px solid var(--line); border-left:3px solid var(--accent);
  border-radius:10px; padding:13px 16px; margin:20px 0; font-size:14.5px}
.note p{margin:.3em 0}
.toc{background:var(--card); border:1px solid var(--line); border-radius:12px; padding:14px 18px; margin:18px 0 8px; font-size:14px}
.toc b{display:block; margin-bottom:4px; color:var(--fg)}
.toc ol{margin:0}
.toc li{margin-bottom:2px}
dl.faq dt{font-weight:700; color:var(--fg); margin-top:22px}
dl.faq dt::before{content:"Q. "; color:var(--accent)}
dl.faq dd{margin:6px 0 0; color:var(--fg-2)}
dl.faq dd::before{content:"A. "; font-weight:700; color:var(--fg-3)}
table{width:100%; border-collapse:collapse; margin:14px 0; font-size:14px}
th, td{border:1px solid var(--line); padding:9px 11px; text-align:left; vertical-align:top}
th{background:var(--card); color:var(--fg); font-weight:650; white-space:nowrap}
td{color:var(--fg-2)}
.cards{list-style:none; padding:0; margin:18px 0; display:grid; gap:12px}
.cards li{margin:0}
.cards a{display:block; background:var(--card); border:1px solid var(--line); border-radius:12px;
  padding:14px 16px; text-decoration:none; color:var(--fg)}
.cards a:hover{border-color:var(--accent)}
.cards .t{font-weight:700; line-height:1.55; display:block}
.cards .d{color:var(--fg-2); font-size:13.5px; line-height:1.7; display:block; margin-top:4px}
.cta{margin:40px 0 0; padding:20px; background:var(--card); border:1px solid var(--line); border-radius:14px; text-align:center}
.cta p{margin:0 0 12px; font-size:14px}
.btn{display:inline-block; background:var(--accent); color:#1b1a17; font-weight:800; text-decoration:none;
  padding:11px 26px; border-radius:999px}
.related{margin-top:36px}
.related h2{font-size:16px}
footer.site{margin-top:48px; padding-top:18px; border-top:1px solid var(--line); font-size:12.5px; color:var(--fg-3)}
footer.site nav{display:flex; flex-wrap:wrap; gap:6px 16px; margin-bottom:10px}
footer.site a{color:var(--fg-3)}