:root {
  --paper:#FCFCFD; --panel:#F4F5F8; --ink:#171A20; --muted:#5A626F;
  --rule:#E3E6EC; --accent:#2C5A87;
  --font-display:"Hiragino Mincho ProN","Yu Mincho",YuMincho,"Songti SC",Georgia,serif;
  --font-body:"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic","Noto Sans JP",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper:#12151A; --panel:#1A1E25; --ink:#E4E8EE; --muted:#939BA8;
    --rule:#272C35; --accent:#85AFDB;
  }
}
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body {
  background:var(--paper); color:var(--ink); font-family:var(--font-body);
  font-size:16px; line-height:1.9; margin:0; padding:0 20px 96px;
  -webkit-font-smoothing:antialiased;
}
.wrap { max-width:44rem; margin:0 auto; }

nav.site {
  display:flex; flex-wrap:wrap; gap:20px; align-items:baseline;
  padding:22px 0; border-bottom:1px solid var(--rule); font-size:14px;
}
nav.site .brand { font-family:var(--font-display); font-size:18px; font-weight:600; margin-right:auto; }
nav.site a { color:var(--muted); text-decoration:none; }
nav.site a:hover, nav.site a[aria-current="page"] { color:var(--ink); }
nav.site a:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }

header.page { padding:52px 0 8px; display:flex; flex-direction:column; gap:12px; }
h1 { font-family:var(--font-display); font-size:clamp(28px,5vw,38px); font-weight:600; line-height:1.35; margin:0; text-wrap:balance; }
.lede { color:var(--muted); font-size:15px; margin:0; }
.meta { font-family:var(--font-mono); font-size:12px; color:var(--muted); margin:0; }

.langbar { display:flex; border:1px solid var(--rule); border-radius:7px; overflow:hidden; width:max-content; margin-top:4px; }
.langbar button { font:inherit; font-size:13px; padding:6px 16px; border:0; background:transparent; color:var(--muted); cursor:pointer; }
.langbar button[aria-pressed="true"] { background:var(--accent); color:#fff; }
.langbar button:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; }
/* 言語は <html data-lang> で決まる（lang.js）。決まる前は日本語を出す。 */
#root > .en { display:none; }
html[data-lang="en"] #root > .ja { display:none; }
html[data-lang="en"] #root > .en { display:block; }
html[data-lang="en"] .t-ja, html:not([data-lang="en"]) .t-en { display:none; }

h2 { font-family:var(--font-display); font-size:22px; font-weight:600; margin:56px 0 4px; padding-bottom:10px; border-bottom:2px solid var(--ink); }
article { margin-top:30px; }
h3 { font-size:16px; font-weight:600; margin:0 0 8px; display:flex; align-items:baseline; gap:10px; text-wrap:balance; }
h3 .n { font-family:var(--font-mono); font-size:12.5px; color:var(--accent); font-variant-numeric:tabular-nums; flex-shrink:0; }
p { margin:0 0 12px; }
ul, ol { margin:0 0 12px; padding-left:1.5em; }
li { margin-bottom:6px; }
code { font-family:var(--font-mono); font-size:0.88em; }
strong { font-weight:600; }

.panel { background:var(--panel); border:1px solid var(--rule); border-radius:10px; padding:20px 22px; margin:28px 0; }
.panel p:last-child { margin-bottom:0; }

.cards { display:grid; gap:14px; margin:32px 0; }
.card { border:1px solid var(--rule); border-radius:10px; padding:20px 22px; text-decoration:none; color:inherit; display:block; }
.card:hover { border-color:var(--accent); }
.card:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.card h3 { margin-bottom:4px; }
.card p { color:var(--muted); font-size:14px; margin:0; }

.formwrap { margin:32px 0; }
.formwrap iframe { width:100%; max-width:100%; border:0; min-height:900px; }

footer { margin-top:64px; padding-top:22px; border-top:1px solid var(--rule); color:var(--muted); font-size:13px; }
footer a { color:var(--muted); }

@media (max-width:600px) { body { font-size:15.5px; line-height:1.85; } header.page { padding-top:32px; } }
@media (prefers-reduced-motion: reduce) { * { transition:none !important; animation:none !important; } }
@media print {
  nav.site, .langbar { display:none; }
  body { background:#fff; color:#000; font-size:10.5pt; }
  #root > .en, #root > .ja { display:block !important; }
  article { page-break-inside:avoid; }
}