:root{
  --paper:#fcfcfa; --surface:#f3f2ee; --card:#ffffff;
  --ink:#0d0d0c; --ink-2:#4b4b47; --ink-3:#6f6f6a;
  /* 操作できる要素の枠線。装飾の罫線（--line）と違い、非テキスト 3:1 を満たす必要がある */
  --line-strong:#8c8c86;
  --line:#dbdad3; --line-2:#e9e8e2; --rule:#0d0d0c;
  --accent:#0d0d0c; --accent-soft:#f3f2ee; --accent-line:#0d0d0c;
  --ok:#2f5d4c; --ok-soft:#eef2ef;
  --warn:#7a6320; --warn-soft:#f5f1e6;
  --bad:#8e2f2b; --bad-soft:#f6edec;
  --shadow:none; --shadow-lg:none;
  --radius:0px; --radius-sm:0px;
  --sans:"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic UI","Noto Sans JP",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --mono:ui-monospace,"SFMono-Regular","SF Mono",Menlo,Consolas,"Noto Sans Mono",monospace;
  --maxw:1120px;
  --lbl:.68rem;
}
@media (prefers-color-scheme: dark){
  :root{
    --paper:#0d0d0c; --surface:#151513; --card:#111110;
    --ink:#f2f1ec; --ink-2:#adaca5; --ink-3:#8e8e87;
    --line:#2b2b28; --line-2:#1e1e1c; --rule:#f2f1ec;
    --line-strong:#5a5a55;
    --accent:#f2f1ec; --accent-soft:#1c1c1a; --accent-line:#f2f1ec;
    --ok:#8fc4ad; --ok-soft:#14201b;
    --warn:#d3b874; --warn-soft:#201d13;
    --bad:#e0918c; --bad-soft:#201413;
  }
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:15px; line-height:1.78;
  font-feature-settings:"palt" 1; letter-spacing:.012em;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--ink); text-decoration:underline; text-underline-offset:.22em; text-decoration-thickness:.5px}
a:hover{text-decoration-thickness:1.5px}
h1,h2,h3,h4{line-height:1.4; letter-spacing:-.005em; margin:0; font-weight:600}
p{margin:0}
img{max-width:100%}
hr{border:0;border-top:.5px solid var(--line);margin:2rem 0}
.wrap{max-width:var(--maxw); margin-inline:auto; padding-inline:24px}
.narrow{max-width:768px}
.stack>*+*{margin-top:var(--gap,1rem)}
.muted{color:var(--ink-3); font-size:.82rem; line-height:1.7}
.mono{font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:.86em}
.num{font-variant-numeric:tabular-nums}

/* 欧文ラベル。番号・見出し・分類名はすべてこの組みで統一する */
.lbl{
  font-family:var(--mono); font-size:var(--lbl); letter-spacing:.24em;
  text-transform:uppercase; color:var(--ink-3); display:block;
}

/* 番号つき見出し */
.hh{display:flex; align-items:center; gap:.85rem; font-size:1.02rem; font-weight:600; letter-spacing:-.005em}

/* 四つ綴じの標し。区切りにだけ使う */
.stitch{display:flex; gap:5px; margin:2.4rem 0}
.stitch i{width:9px; height:1.5px; background:var(--ink-3); display:block}

/* 通し番号。丸囲みで、識別子であることを示す */
.no{
  display:inline-grid; place-items:center; width:26px; height:26px; flex:none;
  border:.5px solid var(--rule); border-radius:50%;
  font-family:var(--mono); font-size:.7rem; letter-spacing:0; color:var(--ink);
}
.no.filled{background:var(--ink); color:var(--paper); border-color:var(--ink)}

/* ---------- ヘッダ ---------- */
.site-header{position:sticky; top:0; z-index:30; background:var(--paper); border-bottom:.5px solid var(--rule)}
.site-header .bar{display:flex; align-items:center; gap:1rem; height:58px}
.brand{display:flex; align-items:center; gap:.7rem; text-decoration:none; color:var(--ink); font-size:.9rem; letter-spacing:.02em}
.brand:hover{text-decoration:none}
.brand .mark{
  width:24px;height:24px;display:grid;place-items:center; border:.5px solid var(--rule);
  font-size:11px; font-weight:500; background:transparent; color:var(--ink);
}
.site-header nav{margin-left:auto; display:flex; gap:1.6rem; align-items:center}
.site-header nav a{
  color:var(--ink-2); text-decoration:none; font-family:var(--mono);
  font-size:var(--lbl); letter-spacing:.18em; text-transform:uppercase;
}
.site-header nav a:hover{color:var(--ink); text-decoration:none}

/* ---------- ヒーロー ---------- */
.hero{padding:88px 0 64px; border-bottom:.5px solid var(--rule)}
.hero h1{
  font-size:clamp(1.75rem,3.9vw,2.7rem); font-weight:500; margin:1.6rem 0 0;
  letter-spacing:-.022em; line-height:1.35;
}
.hero .lede{margin-top:1.6rem; font-size:.97rem; color:var(--ink-2); max-width:60ch; line-height:1.95}
.hero .kicker{margin-top:2.4rem; display:flex; flex-wrap:wrap; gap:0; border-top:.5px solid var(--line)}
.chip{
  font-family:var(--mono); font-size:var(--lbl); letter-spacing:.12em; color:var(--ink-2);
  padding:.7rem 1.1rem .7rem 0; border-bottom:.5px solid var(--line); flex:1 1 220px;
}
.eyebrow{
  display:inline-flex; align-items:center; gap:.8rem;
  font-family:var(--mono); font-size:var(--lbl); letter-spacing:.24em;
  text-transform:uppercase; color:var(--ink); padding:0;
}

/* 面の切り替え */
.band{background:var(--surface); border-block:.5px solid var(--rule); padding:72px 0; margin-top:88px}

/* ---------- カード ---------- */
.card{background:var(--card); border:.5px solid var(--line); border-radius:0; padding:28px}
.card.pad-lg{padding:36px}
.card h2{font-size:1.05rem; font-weight:600; letter-spacing:-.005em}
.grid{display:grid; column-gap:36px; row-gap:22px}
@media(min-width:760px){
  .grid.cols-2{grid-template-columns:1fr 1fr}
  .grid.cols-3{grid-template-columns:repeat(3,1fr)}
}
/* flush のときだけ、隣り合う面は余白ではなく罫線で割る */
.grid.flush{column-gap:0; row-gap:0}
.grid.flush.cols-2 > .card, .grid.flush.cols-3 > .card{border-right-width:0}
.grid.flush.cols-2 > .card:last-child, .grid.flush.cols-3 > .card:last-child{border-right-width:.5px}
@media(max-width:759px){
  .grid.flush.cols-2 > .card, .grid.flush.cols-3 > .card{border-right-width:.5px; border-bottom-width:0}
  .grid.flush.cols-2 > .card:last-child, .grid.flush.cols-3 > .card:last-child{border-bottom-width:.5px}
}

/* ---------- フォーム ---------- */
.field{display:block; margin-top:1.5rem}
.field > .label{
  display:block; font-family:var(--mono); font-size:var(--lbl); letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink-3); margin-bottom:.5rem;
}
.field .help{display:block; font-size:.78rem; color:var(--ink-3); margin-top:.45rem; line-height:1.75}
input[type=text],input[type=email],input[type=number],input[type=date],select,textarea{
  width:100%; font:inherit; font-size:.94rem; color:var(--ink); background:transparent;
  border:0; border-bottom:.5px solid var(--rule); border-radius:0; padding:.5rem 0;
  transition:border-color .12s;
}
textarea{border:.5px solid var(--line-strong); padding:.8rem}
select{
  appearance:none; padding-right:1.6rem;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);
  background-position:calc(100% - 9px) 56%, calc(100% - 5px) 56%;
  background-size:4px 4px,4px 4px; background-repeat:no-repeat;
}
input:focus,select:focus,textarea:focus{border-color:var(--ink); border-bottom-width:1.5px}
/* 下線の太さ変化だけではキーボード利用者に現在地が伝わらない（--rule は --ink と同色で色すら変わらない）。
   無彩色のまま、輪郭で示す。 */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,
summary:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--ink); outline-offset:2px; border-radius:0;
}
textarea:focus{border-width:1px}
input::placeholder{color:var(--ink-3)}
.check{
  display:flex; gap:.85rem; align-items:flex-start; margin-top:0; padding:.9rem 0;
  border:0; border-bottom:.5px solid var(--line-2); background:transparent; cursor:pointer;
}
.check:first-of-type{border-top:.5px solid var(--line-2)}
.check input{margin-top:.3rem; accent-color:var(--ink); width:14px; height:14px; flex:none; border-radius:0}
.check .t{font-size:.9rem}
.check .h{display:block; font-size:.76rem; color:var(--ink-3); margin-top:.2rem; line-height:1.7}
fieldset{border:0;padding:0;margin:0}

/* ---------- ボタン ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  font-family:var(--mono); font-weight:400; font-size:.74rem; letter-spacing:.16em;
  text-transform:uppercase; cursor:pointer; border-radius:0;
  padding:.95rem 1.7rem; border:.5px solid var(--rule); background:transparent; color:var(--ink);
  transition:background .12s, color .12s; text-decoration:none;
}
.btn:hover{text-decoration:none}
.btn-primary{background:var(--ink); color:var(--paper); border-color:var(--ink)}
.btn-primary:hover{background:transparent; color:var(--ink)}
.btn-ghost{background:transparent; color:var(--ink)}
.btn-ghost:hover{background:var(--ink); color:var(--paper)}
.btn-lg{padding:1.15rem 2.2rem; font-size:.76rem}
.btn[disabled],.btn[aria-busy=true]{opacity:.35; pointer-events:none}
.btn-row{display:flex; flex-wrap:wrap; gap:1rem; align-items:center; margin-top:2rem}

/* ---------- 判定 ---------- */
.verdict{display:flex; gap:1.1rem; align-items:flex-start}
.verdict .dot{width:9px;height:9px;border-radius:50%; margin-top:.62rem; flex:none; border:.5px solid var(--rule)}
.v-ok .dot{background:var(--ok); border-color:var(--ok)}
.v-conditional .dot{background:transparent; border-color:var(--warn); border-width:2px}
.v-blocked .dot{background:var(--bad); border-color:var(--bad)}
.v-ok .vlabel{color:var(--ok)} .v-conditional .vlabel{color:var(--warn)} .v-blocked .vlabel{color:var(--bad)}
.vlabel{font-size:1.2rem; font-weight:500; letter-spacing:-.01em}

.stats{display:flex; flex-wrap:wrap; gap:0; border-top:.5px solid var(--rule); margin-top:2rem}
.stat{
  background:transparent; padding:1.1rem 1.2rem 1.1rem 0; flex:1 1 150px; min-width:0;
  border-bottom:.5px solid var(--line); border-right:.5px solid var(--line-2);
}
.stat:last-child{border-right:0}
.stat .k{font-family:var(--mono); font-size:var(--lbl); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3)}
.stat .v{font-size:1.3rem; font-weight:500; font-variant-numeric:tabular-nums; letter-spacing:-.02em; margin-top:.3rem; white-space:nowrap}
.stat .u{font-size:.76rem; color:var(--ink-3); font-weight:400; margin-left:.25rem}

/* ---------- 有料部分の伏せ ---------- */
.locked{position:relative; overflow:hidden}
.locked .veil{filter:blur(4px); opacity:.28; user-select:none; pointer-events:none}
.locked .lock{
  position:absolute; inset:0; display:grid; place-items:center; text-align:center; padding:1rem;
  background:linear-gradient(to bottom, transparent, var(--card) 62%);
}
.lock .lk{font-family:var(--mono); font-size:var(--lbl); letter-spacing:.16em; text-transform:uppercase; color:var(--ink-2)}

/* ---------- 価格 ---------- */
.price-card{position:relative; border:.5px solid var(--line); border-radius:0; padding:28px; background:var(--card)}
.price-card.featured{border-color:var(--rule)}
.price-card .tag{
  position:absolute; top:-1px; left:-1px; font-family:var(--mono); font-size:var(--lbl);
  letter-spacing:.18em; text-transform:uppercase; background:var(--ink); color:var(--paper);
  padding:.3rem .7rem; border-radius:0;
}
.price-card h3{margin-top:1.4rem}
.price{font-size:1.9rem; font-weight:500; letter-spacing:-.03em; font-variant-numeric:tabular-nums}
.price .tax{font-family:var(--mono); font-size:.68rem; letter-spacing:.14em; color:var(--ink-3); margin-left:.5rem}
.plist{list-style:none; padding:0; margin:1.6rem 0 0; font-size:.86rem; color:var(--ink-2)}
.plist li{padding:.7rem 0 .7rem 2.2rem; position:relative; margin:0; border-top:.5px solid var(--line-2)}
.plist li::before{
  content:"+"; position:absolute; left:0; top:.7rem; color:var(--ink);
  font-family:var(--mono); font-size:.8rem;
}
.plist.excl li::before{content:"—"; color:var(--ink-3)}
.plist .why{display:block; font-size:.76rem; color:var(--ink-3); margin-top:.25rem; line-height:1.7}

/* ---------- 表 ---------- */
.tw{overflow-x:auto; border-top:.5px solid var(--rule)}
table{border-collapse:collapse; width:100%; font-size:.84rem}
th,td{text-align:left; padding:.85rem 1rem .85rem 0; border-bottom:.5px solid var(--line-2); vertical-align:top}
thead th{
  font-family:var(--mono); font-size:var(--lbl); letter-spacing:.14em; color:var(--ink-3);
  text-transform:uppercase; white-space:nowrap; border-bottom:.5px solid var(--line); font-weight:400;
}
tbody tr:last-child td{border-bottom:.5px solid var(--line)}
td.num,th.num{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; padding-right:1rem}

/* ---------- フェーズと手順 ---------- */
.phase{margin-top:3rem}
.phase > h3{
  font-family:var(--mono); font-size:var(--lbl); letter-spacing:.24em; text-transform:uppercase;
  color:var(--ink); font-weight:400; padding-bottom:.7rem; border-bottom:.5px solid var(--rule);
}
.steps{list-style:none; margin:0; padding:0}
.step{position:relative; padding:1.5rem 0 1.5rem 2.6rem; border-bottom:.5px solid var(--line-2)}
.step::before{
  content:""; position:absolute; left:0; top:1.75rem; width:12px; height:.5px; background:var(--ink);
}
.step h4{font-size:.95rem; font-weight:600}
.step .meta{display:flex; flex-wrap:wrap; gap:.45rem; margin-top:.7rem}
.tagx{
  font-family:var(--mono); font-size:.66rem; letter-spacing:.1em; border:.5px solid var(--line);
  border-radius:0; padding:.16rem .5rem; color:var(--ink-3); background:transparent;
}
.tagx.role{border-color:var(--rule); color:var(--ink); background:transparent}
.step .note{
  font-size:.82rem; color:var(--ink-2); margin-top:.7rem; padding:.7rem 0 .7rem 1rem;
  border-left:.5px solid var(--rule); background:transparent;
}

/* ---------- 根拠 ---------- */
.finding{border:0; border-top:.5px solid var(--line); border-left:0; border-radius:0; padding:1.4rem 0 1.4rem 1.2rem; background:transparent; position:relative}
.finding::before{content:""; position:absolute; left:0; top:1.4rem; bottom:1.4rem; width:1.5px; background:var(--ink-3)}
.finding + .finding{margin-top:0}
.finding.sev-info::before{background:var(--line)}
.finding.sev-warn::before{background:var(--warn)}
.finding.sev-blocker::before{background:var(--bad)}
.finding h4{font-size:.92rem; font-weight:600}
.finding p{font-size:.85rem; color:var(--ink-2); margin-top:.5rem}
.cite{font-family:var(--mono); font-size:.68rem; letter-spacing:.06em; color:var(--ink-3); margin-top:.8rem; display:flex; flex-wrap:wrap; gap:.7rem; align-items:center}
.cite .pill{border:.5px solid var(--line); border-radius:0; padding:.05rem .4rem}

/* ---------- 注記 ---------- */
.callout{border:.5px solid var(--rule); border-radius:0; padding:1.3rem 1.4rem; font-size:.85rem; background:transparent}
.callout.warn{border-color:var(--warn); background:var(--warn-soft)}
.callout.bad{border-color:var(--bad); background:var(--bad-soft)}
.callout.ok{border-color:var(--ok); background:var(--ok-soft)}
.callout strong{font-weight:600}

/* ---------- 仕様表 ---------- */
.spec{border-top:.5px solid var(--rule); background:transparent}
.spec > div{display:grid; grid-template-columns:1fr; gap:0; border-bottom:.5px solid var(--line-2)}
@media(min-width:720px){ .spec > div{grid-template-columns:210px 1fr} }
.spec dt{
  padding:.9rem 1rem .9rem 0; font-family:var(--mono); font-size:var(--lbl); letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-3); background:transparent;
}
.spec dd{padding:.9rem 0; margin:0; font-size:.86rem; color:var(--ink-2)}
.spec dd .mono{font-size:.8rem}

/* ---------- テストモード ---------- */
.testbar{
  background:var(--ink); color:var(--paper); font-family:var(--mono); font-size:.66rem;
  letter-spacing:.14em; text-align:center; padding:.55rem 1rem; text-transform:uppercase;
}
.testbar b{font-weight:400; border-bottom:1px solid var(--paper); padding-bottom:1px}

/* ---------- コンソール ---------- */
.console{display:grid; grid-template-columns:1fr; min-height:100vh}
@media(min-width:900px){ .console{grid-template-columns:232px 1fr} }
.side{border-right:.5px solid var(--rule); background:var(--surface); padding:24px}
.side .who{font-family:var(--mono); font-size:.68rem; letter-spacing:.06em; color:var(--ink-3); margin-top:1.6rem; line-height:1.9}
.side .role{
  display:inline-block; font-family:var(--mono); font-size:.62rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--paper); background:var(--ink); border-radius:0; padding:.1rem .45rem;
}
.side nav{display:flex; flex-direction:column; gap:0; margin-top:1.8rem; border-top:.5px solid var(--line)}
.side nav a{
  display:block; padding:.7rem 0; border-bottom:.5px solid var(--line); text-decoration:none;
  color:var(--ink-2); font-family:var(--mono); font-size:var(--lbl); letter-spacing:.14em; text-transform:uppercase;
}
.side nav a:hover{color:var(--ink); text-decoration:none}
.side nav a[aria-current=page]{background:transparent; color:var(--ink); font-weight:400}
.side nav a[aria-current=page]::before{content:"— "; }
.main{padding:36px 32px 96px; min-width:0}
.main h1{font-size:1.3rem; font-weight:500; letter-spacing:-.015em}
.toolbar{display:flex; flex-wrap:wrap; gap:1rem; align-items:flex-end; margin:1.6rem 0}
.kpi{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:0; margin-top:1.8rem; border-top:.5px solid var(--rule)}
.kpi .card{padding:1.2rem 1.4rem 1.2rem 0; border:0; border-bottom:.5px solid var(--line); border-right:.5px solid var(--line-2)}
.kpi .k{font-family:var(--mono); font-size:var(--lbl); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3)}
.kpi .v{font-size:1.6rem; font-weight:500; letter-spacing:-.025em; font-variant-numeric:tabular-nums; margin-top:.3rem}
.badge{
  display:inline-block; font-family:var(--mono); font-size:.64rem; letter-spacing:.12em;
  text-transform:uppercase; padding:.1rem .45rem; border-radius:0; border:.5px solid var(--line); color:var(--ink-3);
}
.badge.paid{color:var(--ok); border-color:var(--ok)}
.badge.pending{color:var(--warn); border-color:var(--warn)}
.badge.cancelled,.badge.expired{color:var(--ink-3)}
.badge.refunded{color:var(--bad); border-color:var(--bad)}
.empty{padding:4rem 0; text-align:center; color:var(--ink-3); font-family:var(--mono); font-size:var(--lbl); letter-spacing:.16em; text-transform:uppercase}

/* ---------- ログイン ---------- */
.auth{min-height:100vh; display:grid; place-items:center; padding:24px}
.auth .card{width:100%; max-width:400px; text-align:center; border-color:var(--rule)}
.gbtn{
  display:flex; align-items:center; justify-content:center; gap:.8rem; width:100%;
  border:.5px solid var(--rule); background:transparent; color:var(--ink); border-radius:0;
  padding:1rem; font-family:var(--mono); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  text-decoration:none; margin-top:1.8rem;
}
.gbtn:hover{background:var(--ink); color:var(--paper); text-decoration:none}
.gbtn svg{width:16px;height:16px;flex:none}

/* ---------- フッタ ---------- */
.site-footer{border-top:.5px solid var(--rule); margin-top:96px; padding:40px 24px 72px}
.site-footer nav{display:flex; flex-wrap:wrap; gap:1.6rem; justify-content:center; margin-bottom:1.6rem}
.site-footer nav a{
  color:var(--ink-2); text-decoration:none; font-family:var(--mono);
  font-size:var(--lbl); letter-spacing:.16em; text-transform:uppercase;
}
.site-footer nav a:hover{color:var(--ink)}
.site-footer p{max-width:66ch; margin-inline:auto; text-align:center}

/* 0 から始まる通し番号の帯。当該のものだけ丸で囲む */
.numstrip{display:flex; justify-content:center; flex-wrap:wrap; gap:.55rem; margin:2.4rem 0 1.6rem}
.numstrip span{
  font-family:var(--mono); font-size:.64rem; letter-spacing:.06em; color:var(--ink-3);
  width:22px; height:22px; display:grid; place-items:center; border:.5px solid transparent;
}
.numstrip span.on{border-color:var(--rule); border-radius:50%; color:var(--ink)}

/* ---------- 7フェーズの背骨 ----------
   ステップ数が 4 でも 30 でも、この 7 行だけは形が変わらない。
   可変長を固定長に畳むための唯一の装置なので、空フェーズも必ず描く。 */
.spine{list-style:none; margin:0; padding:0; border-top:.5px solid var(--rule)}
.spine > li{border-bottom:.5px solid var(--line)}
.spine details{margin:0}
.spine summary{
  display:grid; grid-template-columns:2.1rem 1fr auto; align-items:baseline; gap:.9rem;
  padding:1.05rem 0; cursor:pointer; list-style:none;
}
.spine summary::-webkit-details-marker{display:none}
.spine summary:hover .ph-title{text-decoration:underline; text-underline-offset:.22em; text-decoration-thickness:.5px}
.ph-no{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.06em; color:var(--ink-3);
  width:1.6rem; height:1.6rem; display:grid; place-items:center; border:.5px solid transparent;
}
.spine details[open] .ph-no, .spine li[data-current=true] .ph-no{
  border-color:var(--rule); border-radius:50%; color:var(--ink);
}
.ph-row{
  display:grid; grid-template-columns:2.1rem 1fr auto; align-items:baseline; gap:.9rem; padding:.95rem 0;
}
@media(max-width:620px){ .ph-row{grid-template-columns:1.8rem 1fr; row-gap:.35rem} .ph-row .ph-sum{grid-column:2; text-align:left} }
.ph-title{font-size:.93rem; font-weight:600; letter-spacing:-.005em}
.ph-sum{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.06em; color:var(--ink-3);
  text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap;
}
.ph-empty{
  padding:0 0 1.2rem 3rem; font-size:.84rem; color:var(--ink-2); line-height:1.85;
}
.ph-empty .why{display:block; color:var(--ink-3); font-size:.79rem; margin-top:.3rem}
.spine .steps{padding:0 0 .6rem 3rem}
@media(max-width:620px){
  .spine summary{grid-template-columns:1.8rem 1fr; row-gap:.35rem}
  .ph-sum{grid-column:2; text-align:left}
  .ph-empty,.spine .steps{padding-left:2.6rem}
}

/* ---------- いま何をするか（常に1件） ---------- */
.next{border:.5px solid var(--rule); padding:28px; margin-top:2.4rem}
.next .kick{
  font-family:var(--mono); font-size:var(--lbl); letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-3); display:flex; gap:.9rem; align-items:center;
}
.next h3{font-size:1.12rem; font-weight:600; letter-spacing:-.01em; margin-top:1rem; line-height:1.5}
.next .why{
  font-size:.86rem; color:var(--ink-2); line-height:1.9; margin-top:1rem;
  padding-left:1rem; border-left:.5px solid var(--rule);
}

/* ---------- 担い手（自分/業者/待つ） ---------- */
.lane{
  font-family:var(--mono); font-size:.64rem; letter-spacing:.12em; padding:.14rem .5rem;
  border:.5px solid var(--line-strong); color:var(--ink-2); white-space:nowrap;
}
.lane-self{border-color:var(--rule); color:var(--ink)}
.lane-wait{border-style:dashed}
.lanebar{display:flex; gap:0; border-top:.5px solid var(--rule); margin-top:1.6rem; flex-wrap:wrap}
.lanebar > div{
  flex:1 1 130px; padding:.9rem 1rem .9rem 0; border-right:.5px solid var(--line-2);
}
.lanebar > div:last-child{border-right:0}
.lanebar .k{font-family:var(--mono); font-size:var(--lbl); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3)}
.lanebar .v{font-size:1.25rem; font-weight:500; font-variant-numeric:tabular-nums; margin-top:.25rem}

/* ---------- 締切（早取りで失効するものを先に） ---------- */
.dl{border-top:.5px solid var(--rule); margin-top:1.2rem}
.dl > div{padding:1rem 0; border-bottom:.5px solid var(--line-2)}
.dl .t{font-size:.9rem; font-weight:600}
.dl .d{font-size:.82rem; color:var(--ink-2); margin-top:.4rem; line-height:1.8}
.dl .after{
  display:block; margin-top:.45rem; font-size:.79rem; color:var(--ink-3);
  padding-left:.9rem; border-left:.5px solid var(--warn);
}

/* ---------- 補助 ---------- */
.skeleton{background:var(--line-2); border-radius:0; height:1em; animation:pl 1.4s ease-in-out infinite}
@keyframes pl{0%,100%{opacity:.5}50%{opacity:1}}
.reveal{animation:rv .4s cubic-bezier(.2,.7,.3,1) both}
@keyframes rv{from{opacity:0} to{opacity:1}}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:.001ms !important; transition-duration:.001ms !important}}
/* Windows ハイコントラスト。select の矢印は背景画像で描いているので、そのままだと消える。 */
@media (forced-colors: active){
  select{background-image:none; padding-right:.9rem}
  select::after{content:"BE"}
  .no,.numstrip span.on,.tagx,.badge{border-color:CanvasText}
  a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid Highlight}
  .step::before,.finding::before{background:CanvasText; forced-color-adjust:none}
}
.err{color:var(--bad); font-size:.84rem; margin-top:1rem}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

@media print{
  .site-header,.site-footer,.btn,.no-print,.testbar,.numstrip{display:none !important}
  body{background:#fff; color:#000; font-size:10.5pt}
  .card{border:.5px solid #999; break-inside:avoid}
  .step,.finding{break-inside:avoid}
  a{color:#000; text-decoration:none}
  .cite a::after{content:" (" attr(href) ")"; font-size:7.5pt; color:#555}
}