/* くらべどき v3 上書き層（2026-08-31）
   旧サイトの style.css の後ろに読み込む。骨格・レイアウトは旧のまま残し、
   見た目のトークンと、v3で足した部品（ヒーロー・質問票・依頼メモ・ガイドカード）だけを載せる。
   正典: biz/_redesign-v2/50_統合仕様v3.md */

/* ── 書体（自ドメインのサブセット。生成は _tools/font_subset_v3.py） ── */
@font-face{font-family:'Noto Sans JP';font-style:normal;font-weight:400;font-display:swap;src:url(assets/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(assets/fonts/sub/noto-700.woff2) format('woff2')}
@font-face{font-family:'Kaisei Opti';font-style:normal;font-weight:700;font-display:swap;src:url(assets/fonts/sub/kaisei-700.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(assets/fonts/sub/plex-500.woff2) format('woff2')}

/* ── トークンの上書き ── */
:root{
  --paper:#FFFFFF;
  --paper-2:#F3F8F7;
  --surface:var(--paper-2);
  --canvas:#0B2226;
  --canvas-2:#103136;
  --ink:#16292D;
  --body-ink:#3C4B4F;
  --mute:#5C6D72;
  --on-canvas:#F2F7F6;
  --on-canvas-mute:#9FB4B2;
  --rule:#E3E8E7;
  --border:#7A8A8E;
  --action:#0C837B;
  --action-deep:#075E58;
  --action-text:#0A736C;
  --action-soft:#E4F1EF;
  --marker:#FFE486;
  --shadow-1:0 2px 8px rgba(12,60,56,.08);
  --shadow-2:0 8px 24px rgba(12,60,56,.12);
  --paper-sheet:#FBFCF9;
  --shadow-sheet:0 1px 0 rgba(11,34,38,.06), 0 14px 36px rgba(11,34,38,.09);
  --gothic:"Noto Sans JP","Hiragino Sans","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
  --display:"Kaisei Opti","Hiragino Mincho ProN","Yu Mincho",serif;
  --data:"IBM Plex Mono","SFMono-Regular",Menlo,monospace;
  --num:var(--gothic);
  --r:8px;
  --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;
}

body{font-family:var(--gothic); color:var(--body-ink)}
h1,h2,h3{font-family:var(--display); font-weight:700; color:var(--ink); letter-spacing:.02em; line-break:strict}
h1{line-height:1.45}
h2{letter-spacing:.04em}
.byline,.rail,.note,figcaption,small{color:var(--mute)}
a{color:var(--action-text)}

/* 角丸・影を v3 に寄せる（旧の 4px・影なしから） */
.card,.op,.box,.panel,.toc,.side-toc,.asklist,.listbar,table{border-radius:var(--r)}
.op,.card{box-shadow:var(--shadow-1); border-color:transparent;
  transition:transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease)}
.op:hover,.card:hover{transform:translateY(-2px); box-shadow:var(--shadow-2); transition-timing-function:var(--ease-return)}
.btn{border-radius:999px; transition:background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease)}
.btn-primary{box-shadow:0 4px 0 var(--action-deep)}
.btn-primary:active{transform:translateY(2px); box-shadow:0 2px 0 var(--action-deep)}
.chips li,.chip{border-radius:999px}

/* ── ヒーロー（index のみ。canvas面） ── */
.v3hero{background:var(--canvas); color:var(--on-canvas); position:relative; overflow:hidden}
.v3hero .wrap{padding-block:56px 64px}
.v3hero .crumb-inline{font-size:12px; color:var(--on-canvas-mute); margin:0 0 20px}
.v3hero .crumb-inline a{color:var(--on-canvas-mute)}
.v3hero h1{color:#FFFFFF; font-size:clamp(28px,4.5vw,42px); margin:0}
.v3hero .answer{margin-top:20px; max-width:40em; font-size:17px; line-height:2.0; color:var(--on-canvas)}
.v3hero .answer b,.v3hero .answer strong{color:#FFFFFF}
.v3hero .acts{display:flex; gap:16px; align-items:center; flex-wrap:wrap; margin-top:28px}
.v3hero .btn{min-height:52px; padding:0 30px; display:inline-flex; align-items:center; font-weight:700}
.v3hero .btn-ghost{background:transparent; color:var(--on-canvas); border:1.5px solid var(--on-canvas-mute)}
.v3hero .chip{background:var(--canvas-2); color:var(--on-canvas-mute); font-size:12px; padding:4px 12px}
.v3hero .marker{color:#FFFFFF; background:linear-gradient(transparent 62%, rgba(255,228,134,.38) 62%, rgba(255,228,134,.38) 88%, transparent 88%)}

/* ── 質問票（answer直後に畳んで置く部品） ── */
.ask-kit{border:1px solid var(--rule); border-radius:var(--r); background:var(--paper); margin:0 0 32px; overflow:hidden}
.ask-kit>summary{cursor:pointer; list-style:none; padding:18px 22px; display:flex; gap:6px 16px; flex-wrap:wrap; align-items:baseline}
.ask-kit>summary::-webkit-details-marker{display:none}
.ask-kit>summary::after{content:""; width:9px; height:9px; border-right:2px solid var(--mute); border-bottom:2px solid var(--mute);
  transform:rotate(45deg); margin-left:auto; align-self:center; transition:transform var(--t-quick) var(--ease)}
.ask-kit[open]>summary::after{transform:rotate(-135deg)}
.ask-kit>summary:hover{background:var(--paper-2)}
.ask-kit .kit-title{font-family:var(--display); font-size:17px; font-weight:700; color:var(--ink)}
.ask-kit .kit-sub{font-size:13px; color:var(--mute)}
.ask-body{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,17em); gap:24px; padding:4px 22px 24px}
.wiz-count{font-size:12px; color:var(--mute); margin:0 0 10px}
.wiz-danger{background:var(--warn-soft); color:var(--warn); border-radius:6px; padding:10px 14px; font-size:13px; margin:0 0 16px}
.wiz-q{font-family:var(--display); font-size:20px; font-weight:700; line-height:1.6; color:var(--ink); margin:0}
.wiz-help{margin-top:10px; font-size:13px; color:var(--mute)}
.wiz-fig{margin:16px 0 0; max-width:24em}
.wiz-fig svg{display:block; width:100%; height:auto}
.wiz-opts{display:flex; flex-wrap:wrap; gap:10px; margin-top:18px}
.wiz-opts button{cursor:pointer; min-height:48px; padding:10px 20px; border-radius:var(--r); border:1.5px solid var(--border);
  background:var(--paper); color:var(--ink); font-size:15px; font-family:inherit;
  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-select{min-height:48px; border-radius:var(--r); border:1.5px solid var(--border); font-size:15px; padding:0 14px; background:var(--paper); color:var(--ink); max-width:18em}
.wiz-back{margin-top:20px; font-size:13px}
.sheet{background:var(--paper-sheet); border-radius:3px; box-shadow:var(--shadow-sheet); padding:20px 22px; align-self:start}
.sheet h3{font-family:var(--gothic); font-size:14px; font-weight:700; color:var(--ink); margin:0 0 4px; letter-spacing:.02em}
.sheet .sheet-sub{font-size:12px; color:var(--mute); margin-bottom:14px}
.sheet dl{margin:0; display:grid; gap:8px}
.sheet .row{display:grid; grid-template-columns:6.5em 1fr; gap:8px; align-items:baseline; border-bottom:1px dashed var(--rule); padding-bottom:6px}
.sheet dt{font-size:12px; color:var(--mute)}
.sheet dd{margin:0; font-size:13px; color:var(--ink); font-variant-numeric:tabular-nums; min-height:1.4em}
.sheet dd.ask{color:var(--warn); font-size:12px}
.sheet dd:empty::before{content:"　"}
.sheet .flash{animation:sheetflash 480ms var(--ease)}
@keyframes sheetflash{0%{background:var(--action-soft)}100%{background:transparent}}
.sheet-empty{font-size:13px; color:var(--mute); line-height:1.9}
.sheet-note{margin-top:12px; font-size:11px; color:var(--mute)}
.fly{position:fixed; z-index:50; pointer-events:none; font-size:15px; font-weight:700; color:var(--action-text);
  transition:transform 560ms var(--ease), opacity 560ms var(--ease); will-change:transform}
.wiz-result{border-top:3px solid var(--action); background:var(--paper); border-radius:0 0 var(--r) var(--r); box-shadow:var(--shadow-1); padding:22px; margin-top:20px}
.wiz-result h3{font-family:var(--display); font-size:19px; margin:0}
.wiz-result .why{font-size:13px; color:var(--mute); margin-top:8px}
.memo{background:var(--paper-sheet); border-radius:3px; box-shadow:var(--shadow-sheet); padding:20px 22px; margin-top:18px}
.memo h4{font-size:14px; font-weight:700; margin:0 0 10px}
.memo pre{margin:0; font-family:var(--gothic); font-variant-numeric:tabular-nums; font-size:13px; line-height:2.0; white-space:pre-wrap; color:var(--ink)}
.btn-copy{margin-top:14px; min-height:44px; padding:0 20px; border-radius:999px; border:1.5px solid var(--action);
  background:var(--paper); color:var(--action-text); font-size:14px; font-weight:700; font-family:inherit; cursor:pointer}
.btn-copy:hover{background:var(--action-soft)}
.btn-copy.done{background:var(--action); color:#fff; border-color:var(--action)}
/* 会社カードの「条件に合う」印。隠さず印だけ付ける（掲載の公平性・憲法12） */
.op .fit-mark{display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700; color:var(--action-text);
  background:var(--action-soft); border-radius:999px; padding:3px 12px; margin-left:8px}
.fit-note{font-size:13px; color:var(--action-text); margin:12px 0 0}
/* JS無効時: 質問票は畳んだまま「使えない」とは書かず、全問を一覧で見せる */
html.js .ask-nojs{display:none}
html:not(.js) .ask-body{display:block}
html:not(.js) .sheet{display:none}
.ask-nojs fieldset{border:1px solid var(--rule); border-radius:var(--r); padding:14px 18px; margin:0 0 14px}
.ask-nojs legend{font-weight:700; font-size:14px; padding:0 6px}
.ask-nojs label{display:inline-flex; gap:6px; align-items:center; margin:4px 14px 4px 0; font-size:14px}

/* ── ガイドカード ── */
.guides{display:grid; gap:16px; margin-top:20px}
.guide-card{background:var(--paper); border-radius:var(--r); box-shadow:var(--shadow-1); padding:20px 22px}
.guide-card h3{font-family:var(--display); font-size:18px; margin:0 0 8px}
.guide-card p{font-size:14px; margin:0}

@media(max-width:860px){
  .ask-body{grid-template-columns:1fr}
  .sheet{order:-1}
  .v3hero .wrap{padding-block:40px 48px}
}
@media(prefers-reduced-motion:reduce){
  *{transition-duration:0ms !important; animation:none !important}
  .fly{display:none}
}

/* 落下など、金額より先に読ませる一行 */
.alert-first{background:var(--warn-soft); color:var(--warn); border-radius:var(--r); padding:14px 18px; margin:0 0 24px; font-size:15px; line-height:1.9; max-width:min(46rem,42em)}
.alert-first b{color:var(--warn)}