:root{
  --ground:#F4F5F3; --surface:#FFFFFF; --surface-2:#EBEEEA;
  --ink:#191C1A; --ink-2:#454E48; --muted:#6E766F;
  --rule:#D6DAD5; --rule-strong:#B6BDB7;
  --accent:#1E4A42;
  --serif:"Noto Serif JP",'Hiragino Mincho ProN','Yu Mincho',serif;
  --sans:"Noto Sans JP",'Hiragino Sans','Yu Gothic',system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,'SFMono-Regular',Menlo,monospace;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ground:#131614; --surface:#1B1F1C; --surface-2:#232823;
    --ink:#E7EAE5; --ink-2:#B3BBB4; --muted:#848C85;
    --rule:#2C322D; --rule-strong:#3E463F; --accent:#7FB6A8;
  }
}
:root[data-theme="dark"]{
  --ground:#131614; --surface:#1B1F1C; --surface-2:#232823;
  --ink:#E7EAE5; --ink-2:#B3BBB4; --muted:#848C85;
  --rule:#2C322D; --rule-strong:#3E463F; --accent:#7FB6A8;
}
*{box-sizing:border-box}
body{margin:0; background:var(--ground); color:var(--ink); font-family:var(--sans); font-size:15px; line-height:1.85; -webkit-font-smoothing:antialiased}
.wrap{max-width:760px; margin:0 auto; padding:0 22px}
h1,h2,h3{font-family:var(--serif); font-weight:700; margin:0; text-wrap:balance}
a{color:var(--accent); text-decoration:none; border-bottom:1px solid transparent}
a:hover{border-bottom-color:currentColor}
a:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

.masthead{border-bottom:2px solid var(--ink); background:var(--surface)}
.masthead .wrap{display:flex; align-items:baseline; justify-content:space-between; gap:16px; flex-wrap:wrap; padding:18px 22px 12px}
.brand{font-family:var(--serif); font-size:22px; font-weight:700; letter-spacing:.04em; color:var(--ink)}
.brand a{color:inherit; border:0}
.brand small{display:block; font-family:var(--sans); font-size:10.5px; font-weight:500; letter-spacing:.22em; color:var(--muted); margin-top:3px}
.mm{font-family:var(--mono); font-size:11px; color:var(--muted)}

article{padding:40px 0 10px}
article h1{font-size:clamp(24px,5vw,34px); line-height:1.3; padding-bottom:14px; border-bottom:1px solid var(--rule)}
article .lead{font-family:var(--serif); font-size:15.5px; color:var(--ink-2); margin-top:18px}
article h2{font-size:17px; letter-spacing:.03em; margin:34px 0 4px; padding-bottom:6px; border-bottom:1px solid var(--rule-strong)}
article h3{font-size:14.5px; letter-spacing:.03em; margin:22px 0 2px; color:var(--ink-2)}
article p{margin:10px 0; color:var(--ink-2)}
article ul{margin:10px 0; padding-left:1.2em; color:var(--ink-2)}
article li{margin:5px 0}
article li b{color:var(--ink); font-weight:500}
.note{background:var(--surface-2); border-left:3px solid var(--rule-strong); padding:12px 16px; margin:16px 0; font-size:13.5px; color:var(--ink-2)}
.kv{width:100%; border-collapse:collapse; margin:12px 0; font-size:14px}
.kv th,.kv td{text-align:left; vertical-align:top; padding:9px 0; border-bottom:1px solid var(--rule)}
.kv th{font-family:var(--sans); font-weight:500; color:var(--muted); width:9em; white-space:nowrap; padding-right:14px}
.kv td{color:var(--ink-2)}
.rev{font-family:var(--mono); font-size:11px; color:var(--muted); margin-top:30px; text-align:right}

footer{padding:28px 0 48px; margin-top:26px; border-top:1px solid var(--rule); font-size:12px; color:var(--muted); line-height:1.9}
footer .nav{display:flex; flex-wrap:wrap; gap:4px 16px; margin-bottom:8px}
footer .nav a{font-size:12.5px; color:var(--ink-2); border-bottom:1px solid var(--rule-strong)}
@media (max-width:600px){ .kv th{width:auto; display:block; border:0; padding-bottom:0} .kv td{display:block; padding-top:2px} }

/* 主要ナビゲーション */
.mainnav{background:var(--surface); border-bottom:1px solid var(--rule)}
.mainnav .wrap{display:flex; flex-wrap:wrap; gap:0 6px; padding:0 16px}
.mainnav a{
  display:inline-flex; align-items:center; min-height:48px; padding:0 12px;
  font-size:15px; font-weight:500; color:var(--ink-2);
  border-bottom:3px solid transparent; letter-spacing:.02em;
}
.mainnav a:hover{color:var(--accent); background:var(--surface-2); border-bottom-color:var(--rule-strong)}
.mainnav a[aria-current="page"]{color:var(--ink); font-weight:700; border-bottom-color:var(--accent)}
@media (max-width:480px){ .mainnav a{font-size:14px; padding:0 9px} }

/* フッターのリンクを押しやすく */
footer .nav{gap:2px 14px}
footer .nav a{display:inline-block; padding:6px 0; font-size:13.5px}