:root{--ink:#171018;--body:#3A323E;--muted:#6C6276;--ground:#F7F5FA;--surface:#fff;
  --line:#E4DFEB;--accent:#C13584;--violet:#6D28D9;
  --f:"Hiragino Sans","Yu Gothic UI","Noto Sans JP",system-ui,sans-serif;}
*{box-sizing:border-box}
body{margin:0;background:var(--ground);color:var(--body);font-family:var(--f);
  font-size:16px;line-height:1.85;-webkit-text-size-adjust:100%}
a{color:var(--accent)}
.bar{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;justify-content:space-between;
  padding:14px 20px;background:linear-gradient(90deg,var(--violet),var(--accent));position:sticky;top:0;z-index:9}
.bar__brand{color:#fff;font-weight:900;font-size:18px;text-decoration:none;letter-spacing:.04em}
.bar__nav{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center}
.bar__nav a{color:#fff;text-decoration:none;font-size:14px;opacity:.92}
.bar__nav a:hover{opacity:1;text-decoration:underline}
.bar__cta{border:1px solid rgba(255,255,255,.6);border-radius:999px;padding:5px 16px}
main{max-width:860px;margin:0 auto;padding-inline:20px;padding-block:40px 72px}
.hero{text-align:center;padding-block:28px 40px}
.eyebrow{font-size:12px;letter-spacing:.14em;color:var(--accent);font-weight:700;margin:0 0 10px}
h1{font-size:clamp(28px,5.4vw,42px);line-height:1.3;color:var(--ink);margin:0 0 16px;text-wrap:balance}
h2{font-size:clamp(20px,3.4vw,26px);color:var(--ink);margin:44px 0 12px;text-wrap:balance}
h3{font-size:17px;color:var(--ink);margin:28px 0 8px}
p{margin:0 0 14px}
.lede,.lead{font-size:17px;color:var(--body)}
.note{font-size:14px;color:var(--muted)}
.cta{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin:22px 0}
.btn{display:inline-block;padding:11px 26px;border-radius:999px;border:1px solid var(--line);
  background:var(--surface);color:var(--ink);text-decoration:none;font-weight:700}
.btn--go{background:linear-gradient(90deg,var(--violet),var(--accent));color:#fff;border:0}
.sec{padding-block:14px}
.cards{list-style:none;padding:0;margin:18px 0;display:grid;gap:12px;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.cards--steps{counter-reset:s}
.card{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:16px 18px}
.card h3{margin:0;font-size:15px;line-height:1.7}
.doc h1{text-align:left}
.steps{padding-left:1.3em}
.steps li{margin-bottom:12px}
blockquote{margin:14px 0;padding:12px 18px;background:var(--surface);
  border-left:3px solid var(--accent);border-radius:0 6px 6px 0}
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:8px;background:var(--surface);margin:16px 0}
table{border-collapse:collapse;width:100%;min-width:480px}
th,td{text-align:left;padding:10px 14px;border-bottom:1px solid var(--line);font-size:14.5px;vertical-align:top}
th{font-size:12.5px;color:var(--muted);letter-spacing:.06em;font-weight:700}
tr:last-child td{border-bottom:0}
.foot{border-top:1px solid var(--line);margin-top:40px;padding:28px 20px 48px;text-align:center;
  font-size:14px;color:var(--muted)}
.foot nav{display:flex;gap:8px 18px;flex-wrap:wrap;justify-content:center;margin-top:10px}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]){
  --ink:#F2EEF7;--body:#CEC7D8;--muted:#9A90A7;--ground:#141019;--surface:#1D1926;--line:#332C3E;
  --accent:#F07EBE;--violet:#A78BFA}}

/* 見出しの中で立てる1語（文言側の [[…]]）。アプリの S0 と同じ見た目。
   帯は文字の後ろへ敷く（2026-11-04） */
h1{isolation:isolate}
.mark{position:relative;white-space:nowrap}
.mark::after{content:'';position:absolute;left:-.06em;right:-.06em;bottom:.04em;
  height:.22em;border-radius:2px;background:linear-gradient(90deg,var(--violet),var(--accent));z-index:-1}
@media(max-width:600px){.mark::after{height:.2em}}