/* =========================================================
 * ローン審査通過率チェッカー — style.css
 * 付録A（tokens）+ 付録B（共通）+ 付録C（固有）の三層構成
 * ========================================================= */

/* ---------- 付録A. DESIGN TOKENS — OWNERIS 案A ---------- */
:root,
[data-style="minimal"] {
  /* Color — surfaces */
  --bg:            #F3F6FA;
  --surface:       #FFFFFF;
  --surface-dim:   #E9EEF5;
  --ink:           #17233A;
  --ink-2:         #4A5A72;
  --ink-3:         #5A6673;
  --hairline:      #E1E7F0;
  --accent:        #2563A8;
  --accent-ink:    #FFFFFF;
  --accent-soft:   #E9EFF6;
  --cta:           #F58A2E;
  --cta-ink:       #17233A;
  --inverse-bg:    #17233A;
  --inverse-ink:   #F3F6FA;

  /* Typography — 外部フォントは読み込まない */
  --font-display: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic Medium", "Yu Gothic", "Noto Sans JP", sans-serif;
  --font-body:    "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "YuGothic", "Noto Sans JP", sans-serif;
  --font-latin:   "Helvetica Neue", "Inter", "Segoe UI", Arial, sans-serif;
  --fs-hero:      clamp(2rem, 4.2vw, 3rem);
  --fs-h1:        clamp(1.7rem, 3.2vw, 2.25rem);
  --fs-h2:        clamp(1.4rem, 2.2vw, 1.7rem);
  --fs-h3:        1.15rem;
  --fs-body:      1rem;
  --fs-small:     .875rem;
  --fs-caption:   .75rem;
  --lh-tight:     1.25;
  --lh-body:      1.8;
  --ls-wide:      .18em;
  --ls-body:      .02em;

  /* Shape & depth */
  --radius-s:     12px;
  --radius-m:     16px;
  --radius-l:     22px;
  --radius-pill:  999px;
  --shadow-1:     0 8px 24px -14px rgba(23,35,58,.22);
  --shadow-2:     0 18px 40px -22px rgba(23,35,58,.32);
  --border:       1px solid var(--hairline);

  /* Spacing (8pxグリッド) */
  --sp-1: 8px;  --sp-2: 16px; --sp-3: 24px; --sp-4: 32px;
  --sp-5: 48px; --sp-6: 64px; --sp-7: 96px; --sp-8: 128px;
  --container:    1240px;
  --section-pad:  var(--sp-7);

  /* Motion */
  --ease:         cubic-bezier(.22,.61,.36,1);
  --ease-expo:    cubic-bezier(.26,1,.48,1);
  --dur:          .3s;
  --dur-slow:     .9s;
}

/* Chart series */
:root, [data-style] {
  --series-1: #2a78d6;
  --series-2: #eb6834;
  --series-3: #1baf7a;
  --grid-hairline: #e1e0d9;
  --chart-muted:   #8C949B;
}

/* Status */
:root, [data-style] {
  --status-good:     #0ca30c;
  --status-warning:  #b97a00;
  --status-serious:  #c05a2e;
  --status-critical: #d03b3b;
  --status-good-soft:     #E2F4E2;
  --status-warning-soft:  #FCF0D8;
  --status-serious-soft:  #FAE6DC;
  --status-critical-soft: #FADEDE;
}

/* ---------- 付録B. 共通CSS ---------- */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%;}
body{
  font-family:var(--font-body); background:var(--bg); color:var(--ink);
  font-size:var(--fs-body); line-height:var(--lh-body); letter-spacing:var(--ls-body);
  -webkit-font-smoothing:antialiased; overflow-x:hidden; min-height:100vh;
}
img{max-width:100%;display:block}
a{color:inherit}
button{font:inherit}
[hidden]{display:none !important;}
input[type=number]{ -moz-appearance:textfield; }
input[type=number]::-webkit-outer-spin-button, input[type=number]::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }

:root{
  --tool-container: var(--container);
  --company-accent: var(--accent);
}
:root{
  --accent-soft: color-mix(in srgb, var(--company-accent) 10%, #fff);
  --ico-bg: color-mix(in srgb, var(--company-accent) 12%, #fff);
  --accent-deep: color-mix(in srgb, var(--company-accent) 78%, #0B1020);
  --accent-light: color-mix(in srgb, var(--company-accent) 80%, #fff);
  --band: linear-gradient(135deg, var(--accent-light) 0%, var(--company-accent) 55%, var(--accent-deep) 100%);
}
.container-tool{max-width:var(--tool-container); margin-inline:auto; padding-inline:var(--sp-4);}
@media(max-width:600px){ .container-tool{ padding-inline:var(--sp-2); } }
.num{ font-family:var(--font-latin); font-variant-numeric:tabular-nums; letter-spacing:-.02em; }

/* ---------- スキップリンク ---------- */
.skip-link{ position:absolute; left:-9999px; top:8px; z-index:100; padding:8px 14px; background:var(--surface); color:var(--ink); border-radius:var(--radius-pill); box-shadow:var(--shadow-2); }
.skip-link:focus{ left:8px; }

/* ---------- 動き ---------- */
@keyframes drift{ 0%{ transform:translate3d(0,0,0) scale(1); } 50%{ transform:translate3d(-3%,4%,0) scale(1.05); } 100%{ transform:translate3d(2%,-3%,0) scale(1.02); } }
@keyframes fade-up{ to{ opacity:1; transform:none; } }
@keyframes line-in{ to{ opacity:1; transform:none; clip-path:inset(-6px); } }
@keyframes grow-x{ from{ transform:scaleX(0); } }
.ambient{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.ambient::before, .ambient::after{ content:""; position:absolute; border-radius:50%; background:rgba(255,255,255,.12); animation:drift 22s var(--ease) infinite alternate; }
.ambient::before{ width:520px; height:520px; right:-140px; top:-260px; }
.ambient::after{ width:320px; height:320px; right:34%; bottom:-220px; background:rgba(255,255,255,.08); animation-duration:30s; animation-direction:alternate-reverse; }
.ambient--result::before{ width:280px; height:280px; right:-70px; top:-90px; }
.ambient--result::after{ display:none; }
.reveal-up{ opacity:0; transform:translateY(18px); animation:fade-up var(--dur-slow) var(--ease-expo) both; animation-delay:calc(min(var(--i, 0), 10) * 70ms); }
.reveal-line{
  display:block; opacity:0; transform:translateY(.5em); transform-origin:left bottom;
  clip-path:inset(0 0 100% 0); animation:line-in .9s var(--ease-expo) both; animation-delay:calc(var(--i, 0) * 110ms);
}
.figure-bar{ transform-box:fill-box; transform-origin:0 50%; animation:grow-x var(--dur-slow) var(--ease-expo) both; }
@media (prefers-reduced-motion: reduce){
  .ambient::before, .ambient::after, .figure-bar, .eval-row__fill{ animation:none; }
  .reveal-up, .reveal-line, .result-section{ animation:none; opacity:1; transform:none; clip-path:none; }
}

/* ---------- 英字の小見出し ---------- */
.eyebrow{
  font-family:var(--font-latin); font-weight:500; font-size:.72rem; letter-spacing:var(--ls-wide); text-transform:uppercase;
  color:var(--company-accent); display:flex; align-items:center; gap:12px;
}
.band .eyebrow{ color:#fff; opacity:.85; }

/* ---------- 帯 ---------- */
.band{ position:relative; overflow:hidden; background:var(--band); color:#fff; }
.band > :not(.ambient){ position:relative; z-index:1; }

/* ---------- ブランドヘッダー ---------- */
.company-header{ background:var(--surface); border-bottom:1px solid var(--hairline); position:relative; z-index:2; }
.company-header__inner{display:flex; align-items:center; justify-content:space-between; gap:var(--sp-2); min-height:72px; padding-block:12px; flex-wrap:wrap;}
.company-header__brand{display:flex; align-items:center; gap:12px; text-decoration:none; min-width:0;}
.company-header__mark{ width:36px; height:36px; border-radius:10px; background:var(--company-accent); color:#fff; display:grid; place-items:center; font-family:var(--font-display); font-weight:700; font-size:1rem; flex:none; }
.company-header__logo-text{ font-family:var(--font-display); font-weight:700; font-size:1.1rem; letter-spacing:.02em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.company-header__sub{font-size:var(--fs-caption); color:var(--ink-3); letter-spacing:.04em; margin-left:2px;}
.company-header__phone{ text-align:right; }
.company-header__phone-number{ font-weight:800; font-size:1.2rem; line-height:1.2; }
.company-header__phone-hours{ font-size:var(--fs-caption); color:var(--ink-3); }
@media(max-width:600px){ .company-header__sub, .company-header__phone{ display:none; } }

/* ---------- ツールの見出し（帯） ---------- */
.tool-header .container-tool{ padding-block:var(--sp-4) calc(var(--sp-4) + 64px); }
.tool-name{font-family:var(--font-display); font-size:var(--fs-h1); font-weight:800; letter-spacing:.01em; line-height:1.25; margin-top:8px;}
.tool-tagline{ margin-top:10px; font-size:var(--fs-small); max-width:40em; opacity:.92; }

/* ---------- 本文: 入力｜結果 の2カラム ---------- */
.tool-main{ position:relative; z-index:1; margin-top:-64px; padding-bottom:var(--sp-7); }
.tool-main.container-tool{ display:grid; grid-template-columns:400px minmax(0,1fr); column-gap:24px; row-gap:0; align-items:start; }
.tool-main > *{ grid-column:2; }
.tool-main > .input-panel{ grid-column:1; grid-row:1 / span 40; position:sticky; top:16px; }
.tool-main > .disclaimer{ grid-column:1 / -1; }
.tool-main > * + *{ margin-top:20px; }
.tool-main > .input-panel + *{ margin-top:0; }
@media(max-width:960px){
  .tool-main.container-tool{ grid-template-columns:1fr; }
  .tool-main > *, .tool-main > .input-panel{ grid-column:1; grid-row:auto; position:static; }
  .tool-main > .input-panel + *{ margin-top:20px; }
}
.panel{background:var(--surface); border-radius:var(--radius-m); box-shadow:var(--shadow-1); padding:28px;}
@media(max-width:600px){ .panel{ padding:20px; } }
.panel-title{font-family:var(--font-display); font-size:var(--fs-h3); font-weight:800; margin-bottom:4px;}
.panel-lead{color:var(--ink-3); font-size:var(--fs-small); margin-bottom:var(--sp-2);}

/* ---------- 入力欄 ---------- */
.field-grid{display:grid; grid-template-columns:1fr; gap:var(--sp-2); margin-top:var(--sp-2);}
.field{display:flex; flex-direction:column; gap:6px;}
.field__label{font-size:var(--fs-small); font-weight:700; letter-spacing:.02em;}
.field__label .required{color:var(--company-accent); margin-left:4px; font-weight:400; font-size:var(--fs-caption);}
.field__input-wrap{
  display:flex; align-items:center; border:1.5px solid var(--hairline); border-radius:var(--radius-s);
  background:var(--surface); padding-inline:14px; transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.field__input-wrap:focus-within{border-color:var(--company-accent); box-shadow:0 0 0 4px var(--accent-soft);}
.field__input{flex:1; min-width:0; border:0; background:transparent; padding-block:12px; font-size:1.1rem; font-family:var(--font-latin); color:var(--ink); font-variant-numeric:tabular-nums;}
.field__input::placeholder{ color:var(--ink-3); opacity:.7; }
.field__input:focus, .field__input:focus-visible{outline:none;}
.field__unit{color:var(--ink-3); font-size:var(--fs-small); white-space:nowrap; margin-left:8px;}
.field__help{font-size:var(--fs-caption); color:var(--ink-3);}
.field__error{font-size:var(--fs-caption); color:var(--status-warning); display:flex; align-items:flex-start; gap:4px;}
.field--error .field__input-wrap{border-color:var(--status-warning);}
.field__toggle{display:inline-flex; flex-wrap:wrap; border:1.5px solid var(--hairline); border-radius:var(--radius-pill); padding:2px; gap:2px; width:fit-content; max-width:100%;}
.field__toggle button{border:0; background:transparent; padding:6px 12px; font-size:var(--fs-caption); border-radius:var(--radius-pill); cursor:pointer; color:var(--ink-2); font-family:var(--font-body); white-space:nowrap; transition:background var(--dur) var(--ease), color var(--dur) var(--ease);}
.field__toggle button[aria-pressed="true"]{background:var(--company-accent); color:#fff;}

/* ---------- 結果 ---------- */
.result-section{opacity:0; transform:translateY(14px); animation:fade-up .8s var(--ease-expo) both; display:grid; gap:16px;}
.state-empty{ background:var(--surface); border:1.5px dashed var(--hairline); border-radius:var(--radius-m); padding:var(--sp-5) var(--sp-3); text-align:center; color:var(--ink-3); }
.state-empty__title{font-family:var(--font-display); font-size:var(--fs-h3); color:var(--ink-2); margin-bottom:8px; font-weight:700;}
.state-empty__body{font-size:var(--fs-small); max-width:30em; margin-inline:auto;}
.hero-number{ position:relative; overflow:hidden; display:flex; flex-direction:column; gap:4px; padding:30px 34px; border-radius:var(--radius-l); background:var(--band); color:#fff; box-shadow:var(--shadow-2); }
.hero-number > :not(.ambient){ position:relative; z-index:1; }
.hero-number__label{font-size:var(--fs-caption); letter-spacing:.06em; opacity:.9; font-weight:700;}
.hero-number__value{font-family:var(--font-latin); font-size:clamp(2.6rem,6vw,4.4rem); font-weight:300; letter-spacing:-.02em; line-height:1.05; font-variant-numeric:tabular-nums;}
.hero-number__unit{font-size:1.2rem; margin-left:8px; font-family:var(--font-body); letter-spacing:0; opacity:.9;}
.hero-number__note{font-size:var(--fs-small); opacity:.9; margin-top:4px;}
.sub-metrics{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
@media(max-width:600px){ .sub-metrics{grid-template-columns:1fr 1fr; gap:10px;} }
.sub-metric{ background:var(--surface); border-radius:var(--radius-m); box-shadow:var(--shadow-1); padding:18px 20px; }
.sub-metric__label{font-size:var(--fs-caption); color:var(--ink-3);}
.sub-metric__value{font-family:var(--font-latin); font-size:1.5rem; font-weight:700; margin-top:4px; font-variant-numeric:tabular-nums; letter-spacing:-.01em;}
.sub-metric__value .unit{ font-family:var(--font-body); font-size:var(--fs-small); font-weight:400; color:var(--ink-3); margin-left:4px; }
.sub-metric__help{font-size:var(--fs-caption); color:var(--ink-3); margin-top:2px;}
.figure{ background:var(--surface); border-radius:var(--radius-m); box-shadow:var(--shadow-1); padding:20px 22px; }
.figure svg{width:100%; height:auto; display:block;}
.figure__title{ font-weight:700; font-size:var(--fs-small); }
.figure__desc{ font-size:var(--fs-caption); color:var(--ink-3); margin-bottom:12px; }
.points{ padding:20px 24px; border-radius:var(--radius-m); background:var(--accent-soft); }
.points__title{font-weight:800; font-size:var(--fs-small); margin-bottom:6px;}
.points p{font-size:var(--fs-small); color:var(--ink);}
.points p + p{margin-top:4px;}

/* ---------- ボタン（丸） ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; border-radius:var(--radius-pill); padding:13px 24px; font-weight:700; text-decoration:none; cursor:pointer; border:1.5px solid var(--ink); background:var(--ink); color:#fff; font-size:var(--fs-small); transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease-expo), box-shadow var(--dur) var(--ease);}
.btn:hover:not(:disabled){transform:translateY(-1px);}
.btn:disabled{opacity:.45; cursor:not-allowed; transform:none;}
.btn--accent{background:var(--cta); border-color:var(--cta); color:var(--cta-ink);}
.btn--accent:hover:not(:disabled){box-shadow:0 12px 24px -12px color-mix(in srgb, var(--cta) 80%, transparent);}
.btn--brand{background:var(--company-accent); border-color:var(--company-accent); color:#fff;}
.btn--ghost{background:var(--surface); color:var(--ink); border-color:var(--hairline);}
.btn--ghost:hover:not(:disabled){border-color:var(--ink);}
.btn--small{padding:9px 16px; font-size:var(--fs-caption);}
.btn--block{ width:100%; }

/* ---------- 次の一手 ---------- */
.next-steps__title{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
.next-steps__grid{display:grid; grid-template-columns:1fr; gap:16px;}
@media(min-width:700px){ .next-steps__grid{grid-template-columns:1.2fr 1fr 1fr;} }
.next-card{ background:var(--surface); border-radius:var(--radius-m); box-shadow:var(--shadow-1); padding:22px; display:flex; flex-direction:column; gap:8px; }
.next-card--primary{ background:var(--company-accent); color:#fff; }
.next-card__eyebrow{font-family:var(--font-latin); font-size:var(--fs-caption); color:var(--ink-2); letter-spacing:.1em;}
.next-card--primary .next-card__eyebrow, .next-card--primary .next-card__body{ color:#fff; opacity:.9; }
.next-card__title{font-weight:800; font-size:1rem;}
.next-card__body{font-size:var(--fs-caption); color:var(--ink-2); line-height:1.7;}
.next-card .btn{ margin-top:6px; width:fit-content; }
.next-card--primary .btn--accent{ background:#fff; border-color:#fff; color:var(--company-accent); }
.next-card__actions{ display:flex; gap:8px; flex-wrap:wrap; }
.next-card a.link{font-size:var(--fs-small); font-weight:700; color:var(--company-accent); text-decoration:none; width:fit-content;
  background-image:linear-gradient(currentColor, currentColor); background-size:0 1px; background-repeat:no-repeat; background-position:0 100%; transition:background-size .5s var(--ease-expo);}
.next-card a.link:hover{background-size:100% 1px;}

/* ---------- 注記・免責 ---------- */
.disclaimer{margin-top:var(--sp-4); border-top:1px solid var(--hairline); padding-top:var(--sp-2); font-size:var(--fs-caption); color:var(--ink-3);}
.disclaimer ul{list-style:none; display:flex; flex-direction:column; gap:4px;}
.disclaimer li{padding-left:1em; text-indent:-1em;}
.disclaimer li::before{content:"・";}

/* ---------- フッター ---------- */
.site-footer{border-top:1px solid var(--hairline); padding-block:var(--sp-3) var(--sp-4); color:var(--ink-3); font-size:var(--fs-caption); background:var(--surface);}
.site-footer__inner{display:flex; flex-wrap:wrap; gap:8px 18px; align-items:center; justify-content:space-between;}
.site-footer a{text-decoration:none;}
.site-footer a:hover{text-decoration:underline;}
.site-footer__powered{font-family:var(--font-latin); letter-spacing:.04em; display:inline-flex; align-items:center; gap:6px; flex-wrap:wrap;}
.site-footer__logo{height:22px; width:auto; display:inline-block; vertical-align:middle;}

/* ---------- フォーカス ---------- */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible{
  outline:2px solid var(--company-accent); outline-offset:2px; border-radius:2px;
}
.band a:focus-visible, .band button:focus-visible{ outline-color:#fff; }
::selection{ background:var(--company-accent); color:#fff; }

/* ---------- 印刷（A4縦1枚・「概算」透かし） ---------- */
@page{ size:A4; margin:14mm; }
@media print{
  *{ line-height:1.35 !important; }
  body{ background:#fff; color:#000; font-size:9.5px; }
  .no-print, .next-steps, .tool-tagline, .company-header__sub, .input-panel, .state-empty, .ambient, .faq, .bank-table-wrap, .skip-link{ display:none !important; }
  .reveal-up, .reveal-line, .result-section, .figure-bar, .eval-row__fill{ animation:none !important; opacity:1 !important; transform:none !important; clip-path:none !important; }
  .container-tool{ max-width:100%; padding-inline:0; }
  .band{ background:none; color:#000; }
  .band .eyebrow{ color:#000; }
  .company-header{ border-bottom:1px solid #999; }
  .company-header__inner{ min-height:0; padding-block:0 6px; }
  .company-header__mark{ display:none; }
  .company-header__logo-text{ font-size:13px; }
  .company-header__phone-number{ font-size:12px; color:#000; }
  .tool-header .container-tool{ padding-block:6px 4px; }
  .tool-name{ font-size:14px; margin-top:2px; }
  .tool-main{ margin-top:0; padding-bottom:0; }
  .tool-main.container-tool{ display:block; }
  .tool-main > * + *{ margin-top:8px; }
  .panel, .sub-metric, .figure, .hero-number{ box-shadow:none; }
  .hero-number{ padding:8px 10px; background:none; color:#000; border:1px solid #ccc; border-left:3px solid #000; border-radius:4px; break-inside:avoid; overflow:visible; }
  .hero-number__value{ font-size:22px; }
  .rank-badge{ border:1px solid #000; color:#000 !important; background:none; }
  .sub-metrics{ grid-template-columns:repeat(3,1fr) !important; gap:6px; margin-top:6px; }
  .sub-metric{ padding:5px 8px; border:1px solid #ddd; border-radius:4px; }
  .sub-metric__value{ font-size:12px; }
  .figure{ margin-top:6px; padding:6px; border:1px solid #ddd; border-radius:4px; break-inside:avoid; }
  .points{ margin-top:6px; padding:6px 8px; background:#f4f4f4; }
  .eval-row__fill{ background:#000 !important; }
  .print-inputs{ display:block !important; margin-top:6px; font-size:8px; }
  .print-inputs table{ width:100%; border-collapse:collapse; }
  .print-inputs td{ padding:1px 6px 1px 0; }
  .disclaimer{ margin-top:8px; padding-top:6px; font-size:6.8px; color:#444; }
  .site-footer{ padding-block:6px 0; font-size:7px; background:none; }
  .print-meta{ display:flex !important; justify-content:space-between; font-size:7.5px; color:#444; margin-top:4px; }
  .print-watermark{ display:block !important; }
  a[href]::after{ content:""; }
}
.print-inputs, .print-meta{ display:none; }
.print-watermark{
  display:none; position:fixed; inset:0; z-index:999; pointer-events:none;
  font-family:var(--font-display); font-size:120px; color:rgba(0,0,0,.06); text-align:center;
  padding-top:40%; letter-spacing:.3em;
}

/* =========================================================
 * 付録C. 本ツール固有の CSS
 * ========================================================= */

/* ---------- 入力区分・くわしく ---------- */
.input-section + .input-section{ margin-top:var(--sp-3); padding-top:var(--sp-2); border-top:1px solid var(--hairline); }
.section-title{ font-size:var(--fs-small); font-weight:700; color:var(--ink-2); margin-bottom:12px; display:flex; align-items:center; gap:10px; }
.detail-inputs{ margin-top:var(--sp-3); border-top:1px solid var(--hairline); padding-top:var(--sp-2); }
.detail-inputs summary{ cursor:pointer; font-size:var(--fs-small); font-weight:700; color:var(--company-accent); list-style:none; display:flex; align-items:center; gap:8px; }
.detail-inputs summary::-webkit-details-marker{ display:none; }
.detail-inputs summary::before{ content:""; width:8px; height:8px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(-45deg); transition:transform var(--dur) var(--ease); }
.detail-inputs[open] summary::before{ transform:rotate(45deg); }
.detail-inputs__lead{ font-size:var(--fs-caption); color:var(--ink-3); margin-top:4px; }
.action-buttons{ display:flex; gap:10px; margin-top:var(--sp-3); flex-wrap:wrap; }
@media(max-width:480px){ .action-buttons .btn{ width:100%; } }

/* ---------- 線画アイコン ---------- */
.ico{ width:36px; height:36px; border-radius:10px; display:grid; place-items:center; background:var(--ico-bg); color:var(--company-accent); flex:none; }
.ico svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }

/* ---------- 大きな数字: ランクバッジ・メッセージ ---------- */
.hero-number__head{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.rank-badge{ display:inline-flex; align-items:center; gap:8px; padding:4px 12px 4px 4px; border-radius:var(--radius-pill); background:var(--surface); font-size:var(--fs-caption); font-weight:700; }
.rank-badge__letter{ width:26px; height:26px; border-radius:50%; display:grid; place-items:center; font-family:var(--font-latin); font-weight:800; font-size:1rem; color:#fff; }
.rank-badge[data-rank="A"]{ color:var(--status-good); }     .rank-badge[data-rank="A"] .rank-badge__letter{ background:var(--status-good); }
.rank-badge[data-rank="B"]{ color:var(--company-accent); }  .rank-badge[data-rank="B"] .rank-badge__letter{ background:var(--company-accent); }
.rank-badge[data-rank="C"]{ color:var(--status-warning); }  .rank-badge[data-rank="C"] .rank-badge__letter{ background:var(--status-warning); }
.rank-badge[data-rank="D"]{ color:var(--status-critical); } .rank-badge[data-rank="D"] .rank-badge__letter{ background:var(--status-critical); }
.rank-message{ background:var(--surface); border-radius:var(--radius-m); box-shadow:var(--shadow-1); padding:16px 20px; font-size:var(--fs-small); }

/* ---------- 警告 ---------- */
.notice{ background:var(--status-warning-soft); color:var(--ink); border-radius:var(--radius-s); padding:12px 16px; font-size:var(--fs-small); }

/* ---------- 6項目の評価 ---------- */
.eval-list{ list-style:none; display:grid; gap:10px; }
.eval-row{ display:grid; grid-template-columns:28px 120px 36px 1fr 80px; align-items:center; gap:10px; }
.eval-row__mark{ width:28px; height:28px; border-radius:50%; display:grid; place-items:center; font-weight:800; font-size:.9rem; color:#fff; }
.eval-row[data-level="high"] .eval-row__mark{ background:var(--status-good); }
.eval-row[data-level="mid"]  .eval-row__mark{ background:var(--status-warning); }
.eval-row[data-level="low"]  .eval-row__mark{ background:var(--status-critical); }
.eval-row__name{ font-size:var(--fs-small); font-weight:700; }
.eval-row__hint{ display:block; font-size:var(--fs-caption); font-weight:400; color:var(--ink-3); }
.eval-row__level{ font-size:var(--fs-caption); font-weight:700; text-align:center; }
.eval-row[data-level="high"] .eval-row__level{ color:var(--status-good); }
.eval-row[data-level="mid"]  .eval-row__level{ color:var(--status-warning); }
.eval-row[data-level="low"]  .eval-row__level{ color:var(--status-critical); }
.eval-row__bar{ height:12px; background:var(--surface-dim); border-radius:var(--radius-pill); overflow:hidden; }
.eval-row__fill{ display:block; height:100%; width:var(--w, 0%); border-radius:var(--radius-pill); transform-origin:0 50%; animation:grow-x var(--dur-slow) var(--ease-expo) both; }
.eval-row[data-level="high"] .eval-row__fill{ background:var(--status-good); }
.eval-row[data-level="mid"]  .eval-row__fill{ background:var(--status-warning); }
.eval-row[data-level="low"]  .eval-row__fill{ background:var(--status-critical); }
.eval-row__pts{ font-size:var(--fs-small); font-weight:700; text-align:right; }
@media(max-width:600px){
  .eval-row{ grid-template-columns:24px 1fr 30px 60px; }
  .eval-row__hint, .eval-row__bar{ display:none; }
}

/* ---------- 改善ポイントの記号 ---------- */
.points__mark{ display:inline-block; width:1.4em; font-weight:800; }
.points p[data-level="mid"] .points__mark{ color:var(--status-warning); }
.points p[data-level="low"] .points__mark{ color:var(--status-critical); }

/* ---------- 前提 ---------- */
.detail-list{ display:flex; flex-direction:column; }
.detail-row{ display:flex; justify-content:space-between; align-items:baseline; gap:16px; padding:10px 0; border-bottom:1px solid var(--hairline); }
.detail-row:last-child{ border-bottom:none; }
.detail-row dt{ font-size:var(--fs-small); color:var(--ink-3); flex:none; }
.detail-row dd{ font-size:var(--fs-small); text-align:right; }

/* ---------- 相談先の目安 ---------- */
.bank-table{ width:100%; border-collapse:collapse; font-size:var(--fs-small); }
.bank-table th, .bank-table td{ padding:10px 8px; border-bottom:1px solid var(--hairline); text-align:center; }
.bank-table th:first-child, .bank-table td:first-child{ text-align:left; }
.bank-table thead th{ font-size:var(--fs-caption); color:var(--ink-3); font-weight:700; }
.bank-table .is-current{ background:var(--accent-soft); font-weight:800; color:var(--company-accent); }
.bank-table__legend{ font-size:var(--fs-caption); color:var(--ink-3); margin-top:8px; }

/* ---------- FAQ ---------- */
.faq details{ border-top:1px solid var(--hairline); padding:12px 0; }
.faq details:last-child{ border-bottom:1px solid var(--hairline); }
.faq summary{ cursor:pointer; font-weight:700; font-size:var(--fs-small); list-style:none; display:flex; justify-content:space-between; gap:12px; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"＋"; color:var(--company-accent); flex:none; }
.faq details[open] summary::after{ content:"−"; }
.faq p{ font-size:var(--fs-small); color:var(--ink-2); margin-top:8px; }

/* ---------- トースト ---------- */
.toast{ position:fixed; left:50%; bottom:24px; transform:translateX(-50%); background:var(--inverse-bg); color:var(--inverse-ink); padding:10px 18px; border-radius:var(--radius-pill); font-size:var(--fs-small); box-shadow:var(--shadow-2); z-index:50; }