/* 全ページ共通：色の設定、基本の文字組み、ヘッダー、フッター */
:root{
  color-scheme:light;
  --bg:#FFFFFF; --surface:#FFFFFF; --sunk:#ECE8E1; --line:#DDD6CB;
  --ink:#221D16; --muted:#6A6254; --faint:#9A9080;
  --amber:#B87A0A; --amber-soft:#F6E7C6; --amber-ink:#6B4500; --amber-deep:#6E4506;
  --blue:#2B6A88;
  --c-min:#8A7A55; --c-semi:#2B6A88; --c-syn:#B8431F;
  --good:#2F7A4B;
  --neon:#39FF14; --neon-ink:#14A800; --neon-on:#0A2A04;
  --green-soft:#E2F8D6; --green-ink:#1D6E0F;
  --k-power:#C8553D; --k-eco:#3A8F55; --k-prot:#2B6A88; --k-life:#A67C1E;
  --display:"Dela Gothic One","Hiragino Sans","Yu Gothic",sans-serif;
  --body:"Zen Kaku Gothic New","Hiragino Sans","Yu Gothic",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:15px;line-height:1.65;padding:0 16px}
.wrap{max-width:1180px;margin:0 auto;padding-block:28px 64px}
h1,h2,h3{text-wrap:balance;margin:0}
header.top{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 32px;padding-bottom:20px;background:linear-gradient(90deg, var(--amber), var(--amber-deep) 55%, transparent) bottom / 100% 2px no-repeat}
header.top > div:first-child{flex:1 1 20rem;min-width:0}
.brand{display:flex;align-items:center;gap:14px}
.gauge{width:44px;height:44px;flex:none}
h1{font-family:var(--display);font-weight:400;font-size:clamp(28px,4.6vw,42px);letter-spacing:.02em;line-height:1.1}
.lede{color:var(--muted);margin:0;font-size:14px}
a:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
/* ページ間のリンク */
.site-nav{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:var(--amber-ink);text-decoration:none;border:1px solid var(--line);background:var(--surface);padding:6px 12px;border-radius:999px;white-space:nowrap}
.site-nav:hover{border-color:var(--amber)}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ---------- フッター（最高速度計算機と共通のデザイン） ---------- */
.site-footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:2px 12px;margin-inline:-16px;padding:6px 16px;border-top:1px solid var(--line);background:var(--surface);font-size:11.5px;color:var(--faint)}
.site-footer a{display:inline-flex;align-items:center;gap:5px;color:var(--muted);text-decoration:none;font-weight:600}
.site-footer a:hover{color:var(--amber)}
.site-footer svg{width:13px;height:13px}
.site-footer small{font-size:11px}
@media (max-width:560px){.site-footer{justify-content:center;padding:5px 10px;text-align:center}}