/* 自ドメインのサブセット配信（2026-08-30。実ページの使用字だけ・fontTools subset・計534KB） */
@font-face{font-family:'Noto Sans JP';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/sub/noto-400.woff2) format('woff2')}
@font-face{font-family:'Noto Sans JP';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/sub/noto-700.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/sub/plex-500.woff2) format('woff2')}

/* くらべどき v2 プロトタイプ — トークンは 01_ビジュアル言語.md が正本 */
:root{
  --paper:#FCFCFA;
  --paper-2:#F0F3F1;
  --canvas:#17201D;
  --canvas-2:#26332F;      /* canvas上の面 */
  --ink:#17201D;
  --body:#37413D;
  --mute:#5D6762;
  --on-canvas:#F2F7F6;
  --on-canvas-mute:#9FB4B2;
  --action:#006B70;
  --action-deep:#004F53;
  --action-text:#006B70;
  --action-soft:#DCEBEC;
  --cv:#006B70; --cv-hover:#004F53;
  --rule:#D7DDDA;
  --border:#7D8984;
  --warn:#B3382A; --warn-soft:#F8E9E6;
  --marker:#FFE486;
  --market:#2C5F72;        /* 札幌の市場色。ページ側で上書き */
  --shadow-1:0 2px 8px rgba(12,60,56,.08);
  --shadow-2:0 8px 24px rgba(12,60,56,.12);
  --font-display:"Helvetica Neue","Hiragino Sans","Yu Gothic",Meiryo,sans-serif;
  --font-body:"Noto Sans JP","Hiragino Sans","Yu Gothic Medium",Meiryo,sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-return:cubic-bezier(.34,1.36,.64,1);
  --t-quick:150ms; --t-fast:250ms; --t-slow:400ms;
  --read:46rem; --wide:76rem;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--body);
  font-family:var(--font-body); font-size:16px; line-height:1.8;
  font-feature-settings:"palt";
}
h1,h2,h3{color:var(--ink); text-wrap:balance; margin:0}
p{margin:0; text-wrap:pretty}
a{color:var(--action-text)}
a:focus-visible,button:focus-visible{outline:3px solid var(--action); outline-offset:2px; border-radius:4px}
img,svg{max-width:100%}
.wrap{max-width:var(--wide); margin-inline:auto; padding-inline:32px}
.read{max-width:var(--read)}
.num{font-variant-numeric:tabular-nums}

/* ── スキップ・ブランド帯 ── */
.skip{position:absolute; left:-999px; top:8px; background:var(--paper); color:var(--action-text); padding:8px 16px; border-radius:999px; z-index:99}
.skip:focus-visible{left:8px}
.brandbar{background:rgba(252,252,250,.96); border-bottom:1px solid var(--rule)}
.brandbar .wrap{display:flex; align-items:center; justify-content:space-between; gap:16px; height:50px}
.brandbar a{display:inline-flex; align-items:center; gap:8px; color:var(--ink); text-decoration:none; font-size:13px; font-weight:700}
.brandbar .list{font-weight:400; text-decoration:underline; text-underline-offset:3px; color:var(--action-text)}

/* ── ヒーロー（canvas面） ── */
/* 2026-09-05: 濃緑の帯をやめて白地に（各市場のハブと同じ骨格。第一画面が丸ごと暗いのは上位の比較メディアに例が無い） */
.hero{background:var(--paper); color:var(--ink); position:relative; overflow:hidden; border-bottom:1px solid var(--rule)}
.hero .wrap{position:relative; z-index:1; padding-block:30px 30px}
.hero .eyebrow{font-size:12px; letter-spacing:.12em; color:var(--mute); font-weight:700}
.hero h1{
  font-family:var(--font-display); font-weight:700; color:var(--ink);
  font-size:clamp(30px,4.6vw,44px); line-height:1.35; letter-spacing:.01em;
  margin-top:14px;
}
.hero .lede{margin-top:20px; max-width:38em; font-size:16px; line-height:1.9; color:var(--body-ink,#3C4B4F)}
.hero .stats{margin-top:22px; font-size:14px; color:var(--mute)}
.hero .stats b{color:var(--ink); font-weight:700; font-size:18px}
/* H1の行リビール（初期非表示は html.js のときだけ＝JS無効でも読める） */
.reveal-line{display:block; overflow:hidden}
.reveal-line>span{display:inline-block;
  transition:transform 500ms var(--ease), opacity 500ms var(--ease), filter 500ms var(--ease)}
/* 2026-09-05: 初期非表示の演出をやめる（JSが止まると見出しと数字が永久に消える。全画面描画でも薄いまま写った） */
html.js .reveal-line>span{transform:none; opacity:1; filter:none}
html.js .is-init .reveal-line>span{transform:none; opacity:1; filter:none}
.reveal-line:nth-child(2)>span{transition-delay:60ms}

/* ── 相場の風景 ── */
.landscape{margin-top:40px; display:grid; gap:14px; max-width:46em}
.ls-row{display:grid; grid-template-columns:11em 1fr; align-items:center; gap:16px; text-decoration:none; color:var(--on-canvas); border-radius:8px}
.ls-row:hover .ls-name{text-decoration:underline; text-underline-offset:3px}
.ls-name{font-size:14px; font-weight:400}
.ls-name small{display:block; color:var(--on-canvas-mute); font-size:12px; font-weight:400}
.ls-track{position:relative; height:34px; background:var(--canvas-2); border-radius:6px; overflow:hidden}
.ls-bar{position:absolute; inset:6px auto 6px 0; border-radius:4px; background:linear-gradient(90deg,#1D4FBF,#35A79B);
  transform-origin:left; transition:transform 400ms var(--ease)}
html.js .ls-bar{transform:scaleX(0)}
html.js .in .ls-bar{transform:scaleX(1)}
.ls-val{position:absolute; right:10px; top:50%; translate:0 -50%; font-size:13px; font-weight:700; color:#FFFFFF; transition:opacity 300ms var(--ease) 300ms}
html.js .ls-val{opacity:0}
html.js .in .ls-val{opacity:1}
.ls-note{font-size:13px; color:var(--on-canvas-mute); align-self:center}
.in .ls-row:nth-child(1) .ls-bar{transition-delay:0ms}
.in .ls-row:nth-child(2) .ls-bar{transition-delay:40ms}
.in .ls-row:nth-child(3) .ls-bar{transition-delay:80ms}
.in .ls-row:nth-child(4) .ls-bar{transition-delay:120ms}
.in .ls-row:nth-child(5) .ls-bar{transition-delay:160ms}

/* ── セクション ── */
.sec{padding-block:72px}
.sec-tint{background:var(--paper-2)}
.sec h2{font-family:var(--font-display); font-size:28px; font-weight:700; letter-spacing:.04em; line-height:1.5}
.sec .sec-lede{margin-top:16px; max-width:var(--read)}
.sec-head{display:flex; align-items:baseline; gap:16px; flex-wrap:wrap}

/* ── ボタン・チップ ── */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:52px; padding:0 32px;
  border-radius:999px; font-size:16px; font-weight:700; text-decoration:none; transition:transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), background var(--t-fast) var(--ease)}
.btn-primary{background:var(--action); color:#FFFFFF}
.btn-primary:hover{background:var(--action-text)}
.btn-primary:active{transform:translateY(1px)}
.btn-sub{background:var(--paper); color:var(--action-text); border:1.5px solid var(--action)}
.btn-sub:hover{background:var(--action-soft)}
.btn .arw{transition:translate var(--t-fast) var(--ease)}
.btn:hover .arw{translate:4px 0}
.chip{display:inline-flex; align-items:center; gap:6px; border-radius:999px; background:var(--paper-2); color:var(--mute); font-size:12px; padding:4px 12px}
.hero .chip{background:var(--surface,#F3F8F7); color:var(--mute)}
.marker{background:linear-gradient(transparent 58%, var(--marker) 58%, var(--marker) 86%, transparent 86%)}
.hero .marker{color:var(--ink); background:linear-gradient(transparent 62%, rgba(255,228,134,.38) 62%, rgba(255,228,134,.38) 88%, transparent 88%)}

/* ── カード共通・出現 ── */
.appear{transition:opacity 600ms var(--ease), transform 600ms var(--ease)}
html.js .appear{opacity:1; transform:none}
html.js .appear.in{opacity:1; transform:none}
.stagger>*{transition:opacity 600ms var(--ease), transform 600ms var(--ease)}
html.js .stagger>*{opacity:0; transform:translateY(16px)}
html.js .stagger.in>*{opacity:1; transform:none}
.stagger.in>*:nth-child(2){transition-delay:60ms}
.stagger.in>*:nth-child(3){transition-delay:120ms}
.stagger.in>*:nth-child(4){transition-delay:180ms}
.stagger.in>*:nth-child(5){transition-delay:240ms}

/* ── サイトカード（ルート） ── */
.sites{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; margin-top:40px; padding:0; list-style:none}
.site-card{background:var(--paper); border-radius:4px; border:1px solid var(--rule); box-shadow:none; padding:28px;
  display:flex; flex-direction:column; gap:12px;
  transition:transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease)}
.site-card:hover{transform:translateY(-2px); box-shadow:var(--shadow-2); transition-timing-function:var(--ease-return)}
.site-card .region{display:flex; align-items:center; gap:10px; font-size:12px; color:var(--mute)}
.site-card .region svg{color:var(--mc,var(--action))}
.site-card h3{font-size:20px; line-height:1.5}
.site-card h3 a{color:var(--ink); text-decoration:none}
.site-card h3 a:hover{color:var(--action-text); text-decoration:underline; text-underline-offset:3px}
.site-card .q{font-family:var(--font-display); font-size:17px; font-weight:700; color:var(--ink); line-height:1.7}
.site-card .fact{font-size:14px; color:var(--body)}
.site-card .fact b{font-size:17px; color:var(--ink)}
.site-card .act{margin-top:auto; display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding-top:8px}

/* ── 状況カード ── */
.situations{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; margin-top:40px}
.sit{background:var(--paper); border-radius:4px; border:1px solid var(--rule); border-top:3px solid var(--market); box-shadow:none; padding:26px 28px; display:flex; flex-direction:column; gap:10px}
.sit svg{color:var(--market)}
.sit h3{font-family:var(--font-display); font-size:18px; font-weight:700; line-height:1.6}
.sit p{font-size:14px; line-height:1.9}
.sit a{font-size:14px; margin-top:auto; padding-top:6px}

/* ── ステッパー ── */
.steps{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px; margin-top:40px; padding:0; list-style:none; counter-reset:step}
.steps li{position:relative; padding-top:8px}
.steps li::before{counter-increment:step; content:counter(step);
  display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:999px;
  background:var(--action); color:#FFFFFF; font-weight:700; font-size:16px; margin-bottom:14px}
.steps li:not(:last-child)::after{content:""; position:absolute; top:25px; left:52px; right:-16px; height:1px; background:var(--rule)}
.steps b{display:block; color:var(--ink); font-size:16px; margin-bottom:6px}
.steps p{font-size:14px}

/* ── 価格バンド（相場の全景） ── */
.band{margin-top:48px}
.band+.band{margin-top:56px}
.band h3{font-family:var(--font-display); font-size:20px; font-weight:700}
.band h3 small{font-family:var(--font-body); font-size:13px; color:var(--mute); font-weight:400; margin-left:12px}
.pp{display:grid; gap:10px; margin-top:18px}
.pp-row{display:grid; grid-template-columns:13em 1fr 11em; align-items:center; gap:14px}
.pp-name{font-size:14px; text-decoration:none; color:var(--action-text)}
.pp-name:hover{text-decoration:underline; text-underline-offset:3px}
.pp-track{position:relative; height:12px; background:#E9F0EF; border-radius:999px; overflow:hidden}
.pp-fill{position:absolute; inset:0 auto 0 0; border-radius:999px; background:var(--market);
  transform-origin:left; transition:transform 400ms var(--ease)}
html.js .pp-fill{transform:scaleX(0)}
html.js .in .pp-fill{transform:scaleX(1)}
.pp-val{font-size:14px; font-weight:700; color:var(--ink); text-align:right; white-space:nowrap}
.pp-val small{font-weight:400; color:var(--mute)}
.pp .pp-row:nth-child(1) .pp-fill{transition-delay:0ms}
.pp .pp-row:nth-child(2) .pp-fill{transition-delay:40ms}
.pp .pp-row:nth-child(3) .pp-fill{transition-delay:80ms}
.pp .pp-row:nth-child(4) .pp-fill{transition-delay:120ms}
.pp .pp-row:nth-child(5) .pp-fill{transition-delay:160ms}
.pp .pp-row:nth-child(6) .pp-fill{transition-delay:200ms}
.pp .pp-row:nth-child(7) .pp-fill{transition-delay:240ms}
.pp .pp-row:nth-child(8) .pp-fill{transition-delay:280ms}

/* ── 証拠バー・会社カード ── */
.evidence{display:flex; align-items:center; gap:16px; flex-wrap:wrap; background:var(--paper-2); border-radius:8px; padding:12px 20px; font-size:14px; color:var(--mute); margin-top:40px}
.evidence b{color:var(--ink); font-weight:400}
.oplist{display:grid; gap:24px; margin-top:24px}
.op{background:var(--paper); border-radius:4px; border:1px solid var(--rule); box-shadow:none; padding:28px;
  transition:transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease)}
.op:hover{transform:translateY(-2px); box-shadow:var(--shadow-2); transition-timing-function:var(--ease-return)}
.op-head{display:flex; align-items:baseline; gap:14px; flex-wrap:wrap}
.op-head h3{font-size:18px}
.op-head h3 a{color:var(--ink); text-decoration:none}
.op-head h3 a:hover{color:var(--action-text); text-decoration:underline; text-underline-offset:3px}
.op-meta{font-size:13px; color:var(--mute)}
.op-price{display:flex; gap:32px; flex-wrap:wrap; background:var(--paper-2); border-radius:8px; padding:18px 22px; margin-top:16px}
.op-price div{display:flex; flex-direction:column; gap:2px}
.op-price dt{font-size:12px; color:var(--mute)}
.op-price dd{margin:0; font-size:15px; color:var(--ink)}
.op-price dd b{font-size:28px; font-weight:700; letter-spacing:.01em}
.op-price dd.none{font-size:14px; color:var(--mute); align-self:center; padding-top:10px}
.op-note{margin-top:12px; font-size:13px; color:var(--warn); background:var(--warn-soft); border-radius:6px; padding:8px 14px}
.op-chips{display:flex; gap:8px; flex-wrap:wrap; margin-top:14px; padding:0; list-style:none}
.op-chips li{border-radius:999px; background:var(--paper-2); font-size:12px; color:var(--body); padding:3px 12px}
.op-chips li.assoc{background:var(--action-soft); color:var(--action-text); font-weight:400}
.op-act{display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:20px}
.op-act .tel{font-size:18px; font-weight:700; color:var(--ink); text-decoration:none}
.op-act .tel small{display:block; font-size:12px; color:var(--mute); font-weight:400}

/* ── 落とし穴と質問 ── */
.twocol{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:48px; margin-top:40px}
.pit{display:grid; gap:24px}
.pit article{border-left:3px solid var(--rule); padding-left:20px}
.pit b{display:block; color:var(--ink); font-size:16px; margin-bottom:6px}
.pit p{font-size:14px}
.asklist{background:var(--paper); border-radius:8px; box-shadow:var(--shadow-1); padding:28px}
.asklist h3{font-family:var(--font-display); font-size:18px; margin-bottom:16px}
.asklist ul{margin:0; padding:0; list-style:none; display:grid; gap:12px}
.asklist li{display:grid; grid-template-columns:22px 1fr; gap:10px; font-size:14px; line-height:1.8}
.asklist li::before{content:""; width:18px; height:18px; margin-top:5px; border:1.5px solid var(--border); border-radius:4px}

/* ── 定義リスト（数字の出どころ） ── */
.sahou{margin:40px 0 0; max-width:var(--read)}
.sahou dt{font-family:var(--font-display); font-size:18px; font-weight:700; color:var(--ink)}
.sahou dd{margin:8px 0 28px; font-size:15px}

/* ── フッタ ── */
.foot{background:var(--canvas); color:var(--on-canvas-mute); margin-top:96px}
.foot .wrap{padding-block:56px}
.foot ul{display:flex; gap:8px 28px; flex-wrap:wrap; margin:0 0 24px; padding:0; list-style:none}
.foot a{color:var(--on-canvas); font-size:14px; text-decoration:none}
.foot a:hover{text-decoration:underline; text-underline-offset:3px}
.foot .pr{font-size:12px; max-width:46em}
.foot .copyright{margin-top:20px; font-size:13px}
.byline{font-size:13px; color:var(--mute); margin-top:64px}

/* ── サイトヘッダ（比較サイト用） ── */
.sitehead{background:var(--canvas)}
.sitehead .wrap{display:flex; align-items:baseline; gap:20px; flex-wrap:wrap; padding-block:18px 0}
.sitehead .brand{font-family:var(--font-display); font-size:20px; font-weight:700; color:#FFFFFF; text-decoration:none}
.sitehead .tagline{font-size:12px; color:var(--on-canvas-mute)}
.sitenav{background:var(--canvas)}
.sitenav ul{display:flex; gap:4px 24px; flex-wrap:wrap; margin:0; padding:12px 0 0; list-style:none}
.sitenav a{color:var(--on-canvas-mute); font-size:13px; text-decoration:none; padding-bottom:10px; border-bottom:2px solid transparent}
.sitenav a[aria-current]{color:#FFFFFF; border-bottom-color:var(--action)}
.sitenav a:hover{color:#FFFFFF}
.hero-sea{display:none}

/* ── レスポンシブ ── */
@media(max-width:860px){
  .wrap{padding-inline:16px}
  .sites,.situations,.twocol{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr; gap:24px}
  .steps li:not(:last-child)::after{display:none}
  .sec{padding-block:48px}
  .hero .wrap{padding-block:32px 36px}
  .pp-row{grid-template-columns:1fr; gap:6px}
  .pp-val{text-align:left}
  .ls-row{grid-template-columns:1fr}
  .op-price{gap:20px}
}
@media(prefers-reduced-motion:reduce){
  *{transition-duration:0ms !important; animation:none !important}
  .appear,.stagger>*,.reveal-line>span{opacity:1 !important; transform:none !important; filter:none !important}
  .ls-bar,.pp-fill{transform:scaleX(1) !important}
  .ls-val{opacity:1 !important}
}

/* ══ v3追加: 条件用紙・ウィザード（Codex「依頼の下書き」移植。色相はうちのトークン） ══ */
:root{
  --font-data:"IBM Plex Mono",var(--font-body);  /* 数値だけ等幅。和文はPlexに無いので本文書体へ落とす */
  --paper-sheet:#FBFCF9;
  --shadow-sheet:0 1px 0 rgba(11,34,38,.06), 0 14px 36px rgba(11,34,38,.09);
  --shadow-sheet-lift:0 24px 70px rgba(11,34,38,.15);
  --t-compose:560ms;
}
.wiz{display:grid; grid-template-columns:minmax(0,62fr) minmax(0,38fr); gap:32px; align-items:start}
.wiz-stage{background:var(--paper); border-radius:8px; box-shadow:var(--shadow-1); padding:36px}
.wiz-q{font-family:var(--font-display); font-size:clamp(22px,3vw,30px); font-weight:700; line-height:1.5; color:var(--ink)}
.wiz-help{margin-top:12px; font-size:14px; color:var(--mute)}
.wiz-danger{background:var(--warn-soft); color:var(--warn); border-radius:8px; padding:12px 16px; font-size:14px; margin-bottom:20px}
.wiz-opts{display:flex; flex-wrap:wrap; gap:12px; margin-top:24px}
.wiz-opts button, .wiz-opts label{cursor:pointer; min-height:52px; padding:12px 24px; border-radius:8px;
  border:1.5px solid var(--border); background:var(--paper); color:var(--ink); font-size:15px; font-weight:400;
  transition:background var(--t-quick) var(--ease), border-color var(--t-quick) var(--ease), transform var(--t-quick) var(--ease)}
.wiz-opts button:hover{background:var(--action-soft); border-color:var(--action)}
.wiz-opts button:active{transform:scale(.97)}
.wiz-opts button[aria-pressed="true"]{background:var(--action-soft); border-color:var(--action); color:var(--action-text); font-weight:700}
.wiz-select{min-height:52px; border-radius:8px; border:1.5px solid var(--border); font-size:15px; padding:0 16px; background:var(--paper); color:var(--ink); max-width:20em}
.wiz-back{margin-top:28px; font-size:13px}
.wiz-fig{margin:24px 0 0; max-width:26em}
.wiz-fig svg{display:block}
.wiz-count{font-size:12px; color:var(--mute); margin-bottom:16px}
/* 条件用紙 */
.sheet{background:var(--paper-sheet); border-radius:3px; box-shadow:var(--shadow-sheet); padding:26px 28px; position:sticky; top:24px}
.sheet h2{font-size:16px; font-weight:700; color:var(--ink); font-family:var(--font-body); letter-spacing:.02em; margin:0 0 4px}
.sheet .sheet-sub{font-size:12px; color:var(--mute); margin-bottom:16px}
.sheet dl{margin:0; display:grid; gap:10px}
.sheet .row{display:grid; grid-template-columns:7.5em 1fr; gap:10px; align-items:baseline; border-bottom:1px dashed var(--rule); padding-bottom:8px}
.sheet dt{font-size:12px; color:var(--mute)}
.sheet dd{margin:0; font-size:14px; color:var(--ink); font-family:var(--font-body); font-variant-numeric:tabular-nums; font-weight:400; min-height:1.4em}
.sheet dd:empty::before{content:"　"}
.sheet dd.ask{color:var(--warn); font-family:var(--font-body); font-size:13px}
.sheet .flash{animation:sheetflash 480ms var(--ease)}
@keyframes sheetflash{0%{background:var(--action-soft)}100%{background:transparent}}
.sheet-empty{font-size:14px; color:var(--mute); line-height:1.9}
.sheet-note{margin-top:16px; font-size:12px; color:var(--mute)}
/* 語の移動（Signature） */
.fly{position:fixed; z-index:50; pointer-events:none; font-size:15px; font-weight:700; color:var(--action-text);
  transition:transform var(--t-compose) var(--ease), opacity var(--t-compose) var(--ease); will-change:transform}
/* 結果・依頼メモ */
.result{margin-top:32px; border-top:3px solid var(--action); background:var(--paper); border-radius:0 0 8px 8px; box-shadow:var(--shadow-1); padding:28px}
.result h3{font-family:var(--font-display); font-size:22px; line-height:1.5}
.result .why{font-size:13px; color:var(--mute); margin-top:8px}
.result .act{margin-top:20px; display:flex; gap:14px; flex-wrap:wrap; align-items:center}
.memo{background:var(--paper-sheet); border-radius:3px; box-shadow:var(--shadow-sheet); padding:24px 26px; margin-top:24px}
.memo h3{font-size:15px; font-family:var(--font-body); font-weight:700; margin-bottom:12px}
.memo pre{margin:0; font-family:var(--font-body); font-variant-numeric:tabular-nums; font-size:13px; line-height:2.0; white-space:pre-wrap; color:var(--ink)}
.memo .act{margin-top:16px; display:flex; gap:12px; flex-wrap:wrap}
.btn-copy{min-height:44px; padding:0 22px; border-radius:999px; border:1.5px solid var(--action); background:var(--paper);
  color:var(--action-text); font-size:14px; font-weight:700; cursor:pointer}
.btn-copy:hover{background:var(--action-soft)}
.btn-copy.done{background:var(--action); color:#fff}
/* JS無効時: フォーム全開・ウィザードUI非表示 */
html.js .nojs-form{display:none}
html:not(.js) .wiz-stage-live{display:none}
.nojs-form fieldset{border:1px solid var(--rule); border-radius:8px; padding:16px 20px; margin:0 0 16px}
.nojs-form legend{font-weight:700; font-size:15px; padding:0 8px}
.nojs-form label{display:inline-flex; gap:6px; align-items:center; margin:4px 16px 4px 0; font-size:14px}
@media(max-width:860px){
  .wiz{grid-template-columns:1fr}
  .sheet{position:static}
  .wiz-stage{padding:24px 20px; border-radius:8px}
}
@media(prefers-reduced-motion:reduce){
  .fly{display:none}
  .sheet .flash{animation:none}
}


/* ui-review 2026-08-29 対応 */
caption{display:block; text-align:left; max-width:calc(100vw - 48px); text-wrap:pretty}
h1,h2,h3{line-break:strict}
html:not(.js) .sheet{display:none}

/* 会社ページの条件適合ボックス（company-fit.js が描画） */
.kdk-fit{background:var(--paper-sheet); border-radius:3px; box-shadow:var(--shadow-sheet); padding:20px 24px; margin:24px 0}
.kdk-fit h2{font-family:var(--font-body); font-size:15px; font-weight:700; margin:0 0 10px; letter-spacing:.02em}
.kdk-fit dl{margin:0; display:grid; gap:8px}
.kdk-fit .row{display:grid; grid-template-columns:8em 1fr; gap:10px; align-items:baseline; border-bottom:1px dashed var(--rule); padding-bottom:6px}
.kdk-fit dt{font-size:12px; color:var(--mute)}
.kdk-fit dd{margin:0; font-size:14px; color:var(--ink); font-variant-numeric:tabular-nums}
.kdk-fit dd.ask, .kdk-fit .fit-line.ask{color:var(--warn)}
.kdk-fit .fit-line{font-size:14px; font-weight:700; margin:0 0 12px}
.kdk-fit .fit-note{margin-top:12px; font-size:12px; color:var(--mute)}
/* 印刷用メモ雛形（JS無効時に表示。JS有効時はウィザードが代替） */
html.js .print-memo{display:none}
.print-memo{background:var(--paper-sheet); border-radius:3px; box-shadow:var(--shadow-sheet); padding:24px 26px; margin-top:24px}
.print-memo h3{font-size:15px; font-weight:700; margin:0 0 12px}
.print-memo pre{margin:0; font-family:var(--font-body); font-size:13px; line-height:2.2; white-space:pre-wrap}
@media print{.print-memo{box-shadow:none; border:1px solid var(--rule)}}

/* 情緒市場のヒーロー写真バンド（30_アセット仕様） */
figure.band{margin:0; position:relative}
figure.band img{display:block; width:100%; height:auto}
figure.band figcaption{position:absolute; right:16px; bottom:12px; font-size:11px; color:#FFFFFF; background:rgba(11,34,38,.55); padding:2px 10px; border-radius:999px}