/* layout: a name emerging from a column of unnamed ones; seal-red is the only loud color */
:root{
  --paper:#f6f6f3;
  --card:#ffffff;
  --ink:#1b1f2a;
  --muted:#5b6170;
  --rule:#d9dad6;
  --ghost:#c9cbc6;
  --seal:#c8321f;
  --seal-soft:rgba(200,50,31,.08);
  --display:"Hiragino Mincho ProN","Yu Mincho","YuMincho","Noto Serif JP","BIZ UDPMincho",serif;
  --body:"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic UI","Yu Gothic","Meiryo","Noto Sans JP",sans-serif;
  --mono:ui-monospace,"SFMono-Regular","Menlo","Consolas",monospace;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#12141a;--card:#1a1d25;--ink:#e9eaee;--muted:#a3a8b5;--rule:#2c303b;--ghost:#3a3f4b;
    --seal:#ef5a43;--seal-soft:rgba(239,90,67,.12);color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --paper:#12141a;--card:#1a1d25;--ink:#e9eaee;--muted:#a3a8b5;--rule:#2c303b;--ghost:#3a3f4b;
  --seal:#ef5a43;--seal-soft:rgba(239,90,67,.12);color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--paper);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.9;-webkit-font-smoothing:antialiased}
a{color:inherit;text-underline-offset:3px}
a:focus-visible{outline:2px solid var(--seal);outline-offset:3px}
h1,h2,h3{margin:0;text-wrap:balance;font-weight:700}
p{margin:0}
.wrap{max-width:1040px;margin:0 auto;padding:0 20px}
.label{font-family:var(--mono);font-size:12px;letter-spacing:.12em;color:var(--muted)}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* header */
.top{border-bottom:1px solid var(--rule)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:14px;padding-bottom:14px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.seal{display:inline-grid;place-items:center;width:40px;height:40px;border:2px solid var(--seal);color:var(--seal);border-radius:6px;font-family:var(--display);font-weight:700;font-size:12px;line-height:1.05;text-align:center;letter-spacing:.05em}
.brand b{font-family:var(--display);font-size:22px;letter-spacing:.12em}
nav{display:flex;gap:6px 18px;flex-wrap:wrap;font-size:14px;line-height:1.6}
nav a{text-decoration:none;color:var(--muted)}
nav a:hover{color:var(--ink)}

/* hero */
.hero{display:grid;grid-template-columns:1.45fr .75fr;gap:48px;align-items:center;padding-top:72px;padding-bottom:64px}
.hero h1{margin-top:16px;font-family:var(--display);font-size:clamp(32px,5vw,54px);line-height:1.3;letter-spacing:.04em}
.hero h1 span{color:var(--seal)}
.hero .lead{margin-top:24px;font-size:17px;max-width:32em}
.cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}
.btn{display:inline-block;padding:12px 22px;border-radius:4px;text-decoration:none;font-weight:700;font-size:15px;background:var(--ink);color:var(--paper);border:1px solid var(--ink)}
.btn.line{background:transparent;color:var(--ink)}
.btn:hover{opacity:.88}
.names{list-style:none;margin:0;padding:24px;border:1px solid var(--rule);border-radius:6px;background:var(--card);display:grid;gap:10px;font-family:var(--display);font-size:20px;letter-spacing:.08em}
.names li{color:var(--ghost);display:flex;justify-content:space-between;gap:12px;border-bottom:1px dashed var(--rule);padding-bottom:8px}
.names li:last-child{border-bottom:0;padding-bottom:0}
.names li small{font-family:var(--body);font-size:12px;letter-spacing:0}
.names li.lit{color:var(--ink)}
.names li.lit small{color:var(--seal);font-weight:700}
.names-cap{margin-top:12px;font-size:12px;color:var(--muted)}

/* sections */
section{padding:72px 0;border-top:1px solid var(--rule)}
.head{display:grid;gap:12px;max-width:42em;margin-bottom:36px}
.head h2{font-family:var(--display);font-size:clamp(26px,3.6vw,36px);line-height:1.45;letter-spacing:.03em}
.head p{color:var(--muted)}

/* two sides */
.sides{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.side{background:var(--card);border:1px solid var(--rule);border-radius:6px;padding:28px;display:grid;gap:12px;align-content:start}
.side h3{font-size:20px}
.side ul{margin:0;padding-left:1.2em;color:var(--muted);display:grid;gap:4px}
.status{display:inline-block;justify-self:start;font-size:12px;padding:2px 10px;border-radius:20px;border:1px solid var(--rule);color:var(--muted)}
.status.open{border-color:var(--seal);color:var(--seal);background:var(--seal-soft)}
.road{display:grid;grid-template-columns:repeat(4,1fr);margin-top:24px;border:1px solid var(--rule);border-radius:6px;background:var(--card)}
.road div{padding:18px;border-right:1px solid var(--rule);display:grid;gap:6px;align-content:start}
.road div:last-child{border-right:0}
.road div.now{box-shadow:inset 0 3px 0 var(--seal)}
.road p{font-size:14px;color:var(--muted)}

/* first service */
.svc{display:grid;grid-template-columns:1fr 1.25fr;gap:32px;align-items:start}
.stat{background:var(--card);border:1px solid var(--rule);border-radius:6px;padding:24px}
.stat .big{font-size:64px;font-weight:600;line-height:1;margin-top:8px}
.stat .big small{font-size:24px;color:var(--muted);font-weight:400}
.stat p{margin-top:12px;font-size:14px;color:var(--muted)}
.bars{display:grid;gap:10px;margin-top:18px}
.bar{display:grid;grid-template-columns:7em 1fr 3.4em;gap:10px;align-items:center;font-size:14px}
.track{height:10px;border-radius:5px;background:var(--rule);overflow:hidden}
.fill{height:100%;background:var(--ink);border-radius:5px}
.w56{width:55.6%}.w44{width:44.4%}
.bar .num{text-align:right}
.compare{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.q{background:var(--card);border:1px solid var(--rule);border-radius:6px;padding:16px;display:grid;gap:8px;align-content:start}
.q.miss{border-color:var(--seal)}
.q b{font-family:var(--mono);font-size:14px}
.q.miss b{color:var(--seal)}
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:32px}
.pillar{border-top:2px solid var(--ink);padding-top:12px;display:grid;gap:6px}
.pillar p{font-size:14px;color:var(--muted)}
.note{font-size:12px;color:var(--muted);margin-top:14px}
.flow{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:32px}
.flow div{background:var(--card);border:1px solid var(--rule);border-radius:6px;padding:18px;display:grid;gap:6px;align-content:start}
.flow .price{font-family:var(--mono);font-size:13px;font-weight:600;color:var(--seal)}
.flow p{font-size:14px;color:var(--muted)}

/* zero */
.zero{display:grid;grid-template-columns:1fr 1.15fr;gap:32px;align-items:start}
.tablebox{overflow-x:auto}
table{width:100%;border-collapse:collapse;background:var(--card);border:1px solid var(--rule);font-size:14px}
th,td{padding:10px 12px;border-bottom:1px solid var(--rule);text-align:left;vertical-align:top}
th{font-family:var(--mono);font-size:12px;font-weight:400;color:var(--muted)}
td.num{white-space:nowrap}
.pill{white-space:nowrap;font-size:12px;padding:1px 8px;border-radius:20px;border:1px solid var(--rule);color:var(--muted)}

/* promises */
.promises{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.promise{display:grid;gap:8px}
.promise .n{font-family:var(--display);font-size:40px;color:var(--seal);line-height:1}
.promise p{color:var(--muted);font-size:15px}

/* faq */
details{border-bottom:1px solid var(--rule);padding:16px 0}
details:first-of-type{border-top:1px solid var(--rule)}
summary{cursor:pointer;font-weight:700;list-style:none;display:flex;gap:12px}
summary::-webkit-details-marker{display:none}
summary::before{content:"Q";font-family:var(--mono);color:var(--seal)}
summary:focus-visible{outline:2px solid var(--seal);outline-offset:3px}
details p{margin-top:10px;padding-left:24px;color:var(--muted);max-width:44em}

/* contact */
.contact{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:start}
.contact ol{margin:12px 0 0;padding-left:1.4em;display:grid;gap:4px}
.mail{background:var(--card);border:2px solid var(--ink);border-radius:6px;padding:24px;display:grid;gap:10px}
.mail .addr{font-family:var(--mono);font-size:18px;word-break:break-all}
.mail p{font-size:14px;color:var(--muted)}

footer{padding:40px 0 56px;border-top:1px solid var(--rule);font-size:13px;color:var(--muted)}
footer .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:center}

@media (max-width:860px){
  .hero,.svc,.zero,.contact,.sides{grid-template-columns:1fr}
  .road{grid-template-columns:1fr 1fr}
  .road div:nth-child(2){border-right:0}
  .road div:nth-child(-n+2){border-bottom:1px solid var(--rule)}
  .pillars,.flow,.promises{grid-template-columns:1fr}
}
@media (max-width:480px){
  .road{grid-template-columns:1fr}
  .road div{border-right:0;border-bottom:1px solid var(--rule)}
  .road div:last-child{border-bottom:0}
  .compare{grid-template-columns:1fr}
  .bar{grid-template-columns:6em 1fr 3em}
}
@media (prefers-reduced-motion:no-preference){
  .names li.lit{animation:lit 1.2s ease-out .3s both}
  @keyframes lit{from{color:var(--ghost)}to{color:var(--ink)}}
}

/* article pages */
.crumb{font-size:13px;color:var(--muted);padding-top:24px}
.crumb a{color:var(--muted)}
.article{max-width:720px;margin:0 auto;padding:8px 20px 72px}
.article h1{font-family:var(--display);font-size:clamp(28px,4.4vw,40px);line-height:1.4;letter-spacing:.03em;margin-top:12px}
.article .meta{font-size:13px;color:var(--muted);margin-top:12px}
.article .summary{margin-top:28px;padding:20px 24px;border-left:3px solid var(--seal);background:var(--card);border-radius:0 6px 6px 0}
.article .summary p+p{margin-top:8px}
.article h2{font-family:var(--display);font-size:24px;line-height:1.5;margin-top:56px;padding-top:24px;border-top:1px solid var(--rule)}
.article h3{font-size:18px;margin-top:32px}
.article p{margin-top:16px}
.article ul,.article ol{margin:16px 0 0;padding-left:1.4em;display:grid;gap:6px}
.article table{margin-top:20px}
.article .tablebox{margin-top:20px}
.article .tablebox table{margin-top:0}
.article .callout{margin-top:24px;padding:16px 20px;border:1px solid var(--rule);border-radius:6px;background:var(--card);font-size:15px}
.article .callout b{color:var(--seal)}
.article .cta-box{margin-top:56px;padding:28px;border:2px solid var(--ink);border-radius:6px;display:grid;gap:12px}
.article .cta-box h2{margin:0;padding:0;border:0;font-size:22px}
.article .cta-box p{margin:0}
.checklist{list-style:none;padding-left:0 !important}
.checklist li{padding-left:28px;position:relative}
.checklist li::before{content:"";position:absolute;left:0;top:.55em;width:14px;height:14px;border:2px solid var(--seal);border-radius:3px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin-top:20px}
.card{background:var(--card);border:1px solid var(--rule);border-radius:6px;padding:20px;display:grid;gap:6px;align-content:start;text-decoration:none}
.card:hover{border-color:var(--ink)}
.card span{font-size:13px;color:var(--muted)}
.foot-links{display:flex;gap:16px;flex-wrap:wrap}
.foot-links a{color:var(--muted)}
dl.facts{display:grid;grid-template-columns:8em 1fr;gap:0;margin-top:20px;border-top:1px solid var(--rule)}
dl.facts dt,dl.facts dd{margin:0;padding:12px 0;border-bottom:1px solid var(--rule)}
dl.facts dt{color:var(--muted);font-size:14px}
@media (max-width:480px){dl.facts{grid-template-columns:1fr}dl.facts dt{border-bottom:0;padding-bottom:0}}