:root{
  --bg:#ffffff; --fg:#1a1d21; --muted:#6b7280; --line:#e5e7eb;
  --accent:#c2410c; --accent-soft:#fff7ed; --th:#f6f7f9; --code:#f3f4f6;
  --max:820px;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#14171a; --fg:#e6e8ea; --muted:#9aa3af; --line:#2a2f35;
    --accent:#ff8c42; --accent-soft:#22201d; --th:#1c2025; --code:#1c2025;
  }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Noto Sans JP","Yu Gothic",sans-serif;
  font-size:16px; line-height:1.85; letter-spacing:.01em;
}
.wrap{max-width:var(--max); margin:0 auto; padding:0 20px}
header{border-bottom:1px solid var(--line); padding:56px 0 36px; margin-bottom:44px}
h1{font-size:1.6rem; line-height:1.5; margin:0 0 18px; letter-spacing:-.01em}
.lead{font-size:1.02rem; color:var(--fg); margin:0 0 14px}
.meta{font-size:.86rem; color:var(--muted); margin:0}
h2{
  font-size:1.18rem; margin:56px 0 6px; padding-top:10px;
  border-top:1px solid var(--line); line-height:1.5;
}
h2 .n{color:var(--accent); font-variant-numeric:tabular-nums; margin-right:.5em; font-size:.9em}
h3{font-size:1rem; margin:32px 0 8px; color:var(--fg)}
p{margin:.7em 0}
.key{
  background:var(--accent-soft); border-left:3px solid var(--accent);
  padding:14px 18px; margin:16px 0; font-size:.97rem;
}
.key b{color:var(--accent)}
.tw{overflow-x:auto; margin:18px 0; -webkit-overflow-scrolling:touch}
table{border-collapse:collapse; width:100%; font-size:.88rem; min-width:520px}
th,td{border-bottom:1px solid var(--line); padding:9px 12px; text-align:left; vertical-align:top}
th{background:var(--th); font-weight:600; white-space:nowrap; font-size:.83rem; color:var(--muted)}
td b{font-weight:600}
.num{font-variant-numeric:tabular-nums; white-space:nowrap}
small{color:var(--muted); font-size:.85rem}
ul,ol{padding-left:1.3em; margin:.7em 0}
li{margin:.35em 0}
a{color:var(--accent); text-decoration:none; border-bottom:1px solid transparent}
a:hover{border-bottom-color:var(--accent)}
.note{font-size:.87rem; color:var(--muted); margin:10px 0}
footer{
  border-top:1px solid var(--line); margin-top:64px; padding:32px 0 72px;
  font-size:.9rem; color:var(--muted);
}
footer b{color:var(--fg)}
.contact{background:var(--th); padding:20px 22px; border-radius:6px; margin:20px 0}
@media (max-width:600px){
  body{font-size:15px}
  h1{font-size:1.35rem}
  header{padding:36px 0 26px}
}

/* ---- 共通ナビ（左→右） ---- */
.sitebar{border-bottom:1px solid var(--line);background:var(--bg);position:sticky;top:0;z-index:10}
.sitebar .wrap{display:flex;align-items:center;gap:18px;padding-top:12px;padding-bottom:12px}
.brand{font-weight:700;font-size:.95rem;color:var(--fg);white-space:nowrap;border:0}
.brand:hover{border:0;color:var(--accent)}
nav.main{overflow-x:auto;-webkit-overflow-scrolling:touch;flex:1}
nav.main ol{display:flex;gap:2px;list-style:none;margin:0;padding:0;white-space:nowrap}
nav.main li{margin:0}
nav.main a{display:block;padding:6px 10px;font-size:.85rem;color:var(--muted);border:0;border-radius:4px}
nav.main a:hover{background:var(--th);color:var(--fg);border:0}
nav.main a[aria-current="page"]{color:var(--accent);font-weight:600;background:var(--accent-soft)}
.axis{font-size:.78rem;color:var(--muted);display:flex;justify-content:space-between;padding:0 0 10px}
/* ---- ひな形の未執筆マーク ---- */
.todo{border:1px dashed var(--line);padding:22px;margin:24px 0;color:var(--muted);font-size:.92rem;border-radius:6px}
.todo b{color:var(--accent)}