/* ==================================================================
 *  whoami 年収診断  —  スタイル
 *  wp-content/themes/swell_child/assets/shindan.css
 * ================================================================== */

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&display=swap');

/* ------------------------------------------------------------------
 * このページはテーマのヘッダー・フッターを使わない独立ページです。
 * ブラウザ既定の余白と、テーマが body に付けてくる装飾を打ち消します。
 * ------------------------------------------------------------------ */
html,body.whoami-body{margin:0; padding:0; background:#FBFCFB}
@media (prefers-color-scheme:dark){html,body.whoami-body{background:#0D1214}}
body.whoami-body{min-height:100vh; display:flex; flex-direction:column}
body.whoami-body #wpadminbar{display:none !important}
body.whoami-body .whoami{flex:1 1 auto; display:flex; flex-direction:column}

.whoami .wa-hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.whoami .wa-err{
  font-size:13px; color:#B4740F; background:#FBF2E0; border-radius:8px;
  padding:11px 14px; margin-top:12px; line-height:1.6;
}
.whoami .wa-err[hidden]{display:none}
.whoami .wa-consent a{color:var(--brand); text-decoration:underline; text-underline-offset:2px}

.whoami{
  --paper:#FBFCFB; --surface:#FFFFFF; --sunk:#F2F5F3;
  --ink:#10161A; --body:#2C3833; --slate:#5C6B66; --faint:#8B9A94;
  --line:#DFE6E2; --line-soft:#EDF1EF;
  --brand:#0E8A66; --brand-ink:#0A6D51; --brand-wash:#E7F4EF;
  --amber:#B4740F; --amber-wash:#FBF2E0;
  --shadow:0 1px 2px rgba(16,22,26,.05), 0 8px 24px -12px rgba(16,22,26,.16);
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --jp:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic",YuGothic,"Noto Sans JP","Segoe UI",sans-serif;
  --rib:#10161A;
}
@media (prefers-color-scheme:dark){
  .whoami:not([data-theme="light"]){
    --paper:#0D1214; --surface:#151E21; --sunk:#111A1C;
    --ink:#EAF2EE; --body:#C4D2CC; --slate:#8FA39C; --faint:#647871;
    --line:#243033; --line-soft:#1C2629;
    --brand:#3DD7AA; --brand-ink:#6FE7C4; --brand-wash:#12312A;
    --amber:#E0A947; --amber-wash:#2E2413;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 28px -14px rgba(0,0,0,.7);
    --rib:#243033; --onbrand:#06231B;
  }
}
:root{--onbrand:#FFFFFF}
.whoami[data-theme="dark"]{
  --paper:#0D1214; --surface:#151E21; --sunk:#111A1C;
  --ink:#EAF2EE; --body:#C4D2CC; --slate:#8FA39C; --faint:#647871;
  --line:#243033; --line-soft:#1C2629;
  --brand:#3DD7AA; --brand-ink:#6FE7C4; --brand-wash:#12312A;
  --amber:#E0A947; --amber-wash:#2E2413;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 28px -14px rgba(0,0,0,.7);
  --rib:#243033; --onbrand:#06231B;
}
.whoami *{box-sizing:border-box}
.whoami{
  background:var(--paper); color:var(--body);
  font-family:var(--jp); font-size:15px; line-height:1.75;
  -webkit-font-smoothing:antialiased;
}
.wa-wrap{max-width:600px; margin:0 auto; padding:0 18px; padding-block:0 64px}


/* ── sticky progress ── */
.wa-track{position:sticky; top:0; z-index:20; background:var(--paper); border-bottom:1px solid var(--line-soft)}
.wa-track .wa-rail{height:3px; background:var(--line-soft)}
.wa-track .wa-rail i{display:block; height:100%; width:0; background:var(--brand); transition:width .3s cubic-bezier(.4,0,.2,1)}
.wa-track .wa-meta{
  max-width:600px; margin:0 auto; padding:7px 18px;
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  font-family:var(--mono); font-size:11.5px; color:var(--faint); letter-spacing:.05em;
}
.wa-track .wa-meta b{color:var(--brand); font-weight:700}
.wa-track .wa-meta button{
  font:inherit; font-family:var(--mono); font-size:11.5px; letter-spacing:.05em;
  background:none; border:0; color:var(--brand); cursor:pointer; padding:0;
  text-decoration:underline; text-underline-offset:3px;
}
.whoami[data-stage="result"] .wa-hero,
.whoami[data-stage="result"] .wa-q,
.whoami[data-stage="result"] .wa-finish,
.whoami[data-stage="result"] #wa-metaForm{display:none}
.whoami[data-stage="form"] #wa-metaResult{display:none}
.whoami[data-stage="form"] #wa-result{display:none}
.wa-rtitle{padding-block:26px 0}
.wa-rtitle .wa-kicker{
  font-family:var(--mono); font-size:11px; letter-spacing:.14em;
  color:var(--brand); margin:0 0 8px;
}
.wa-rtitle h1{font-size:22px; margin:0 0 4px}
.whoami[data-stage="form"] .wa-rtitle{display:none}

/* ── hero ── */
.wa-hero{padding-block:30px 0}
.wa-brand{display:flex; align-items:baseline; gap:10px; margin-bottom:22px}
.wa-brand b{font-family:var(--mono); font-weight:700; font-size:19px; color:var(--ink); letter-spacing:-.02em}
.wa-brand span{font-size:11px; color:var(--faint); letter-spacing:.12em; font-family:var(--mono)}
h1{font-size:26px; line-height:1.45; color:var(--ink); margin:0 0 18px; text-wrap:balance; letter-spacing:-.01em}
.wa-lead{margin:0 0 16px; max-width:60ch}
.wa-muted{color:var(--slate); font-size:13.5px; line-height:1.7}

.wa-proof{border:1px solid var(--line); border-radius:12px; background:var(--surface); overflow:hidden; margin:0 0 16px}
.wa-proof .wa-cap{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.11em; color:var(--faint);
  padding:11px 16px 0;
}
.wa-proof ul{list-style:none; margin:0; padding:8px 16px 14px; display:flex; flex-direction:column; gap:2px}
.wa-proof li{display:flex; justify-content:space-between; align-items:baseline; gap:14px; padding:5px 0}
.wa-proof .n{font-size:14px; color:var(--body)}
.wa-proof .v{font-family:var(--mono); font-weight:700; font-size:19px; color:var(--ink); font-variant-numeric:tabular-nums}
.wa-proof .v small{font-family:var(--jp); font-size:11px; font-weight:400; color:var(--slate); margin-left:3px}
.wa-proof .wa-note{border-top:1px solid var(--line-soft); padding:11px 16px; font-size:13px; color:var(--brand-ink); background:var(--brand-wash)}
.whoami[data-theme="dark"] .wa-proof .wa-note{color:var(--brand)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .wa-proof .wa-note{color:var(--brand)}}

.wa-term{
  font-family:var(--mono); font-size:12.5px; background:var(--sunk);
  border:1px solid var(--line-soft); border-radius:6px;
  padding:10px 14px; color:var(--slate); margin:0 0 20px; overflow-x:auto; white-space:nowrap;
}
.wa-term .p{color:var(--brand); user-select:none}
.wa-term .c{color:var(--ink)}

/* ── question block ── */
.wa-q{border-top:1px solid var(--line); padding-block:26px 4px; scroll-margin-top:62px}
.wa-q > header{display:flex; align-items:baseline; gap:11px; margin-bottom:14px}
.wa-q .no{
  font-family:var(--mono); font-size:11px; font-weight:700; color:var(--faint);
  border:1px solid var(--line); border-radius:5px; padding:2px 6px; flex:none;
  transition:color .18s, border-color .18s;
}
.wa-q[data-done="1"] .no{color:var(--brand); border-color:var(--brand)}
.wa-q h2{font-size:17.5px; line-height:1.55; color:var(--ink); margin:0; font-weight:700; text-wrap:balance}
.wa-q h2 em{font-style:normal; font-family:var(--mono); font-size:11px; color:var(--faint); margin-left:8px; letter-spacing:.06em}
.wa-q .wa-hint{font-size:12.5px; color:var(--slate); margin:-8px 0 14px; line-height:1.6}

/* ── options ── */
.wa-opts{display:flex; flex-direction:column; gap:7px}
.wa-opt{
  display:flex; align-items:center; gap:12px; width:100%; text-align:left;
  font:inherit; color:var(--ink); background:var(--surface);
  border:1px solid var(--line); border-radius:10px;
  padding:13px 15px; cursor:pointer; transition:border-color .14s, background .14s;
}
.wa-opt:hover{border-color:var(--brand)}
.wa-opt:focus-visible{outline:2px solid var(--brand); outline-offset:2px}
.wa-opt .k{
  width:16px; height:16px; border-radius:50%; border:1.5px solid var(--line);
  flex:none; position:relative; transition:border-color .14s;
}
.wa-opt[aria-pressed="true"]{background:var(--brand-wash); border-color:var(--brand)}
.wa-opt[aria-pressed="true"] .k{border-color:var(--brand); border-width:5px}
.wa-opt small{display:block; color:var(--slate); font-size:12.5px; line-height:1.55; margin-top:1px}

/* ── dial ── */
.wa-dial{
  display:flex; align-items:baseline; justify-content:center; gap:6px;
  padding:4px 0 2px;
}
.wa-dial output, .wa-dial input[type=number]{
  font-family:var(--mono); font-weight:700; font-size:46px; line-height:1.1;
  color:var(--ink); letter-spacing:-.03em; font-variant-numeric:tabular-nums;
}
.wa-dial input[type=number]{
  width:4.2ch; border:0; border-bottom:2px solid var(--line); background:transparent;
  text-align:center; padding:0 0 2px; -moz-appearance:textfield; appearance:textfield;
}
.wa-dial input[type=number]::-webkit-outer-spin-button,
.wa-dial input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none; margin:0}
.wa-dial input[type=number]:focus{outline:0; border-bottom-color:var(--brand)}
.wa-dial .u{font-size:15px; color:var(--slate)}
input[type=range]{
  -webkit-appearance:none; appearance:none; width:100%; height:30px;
  background:transparent; margin:6px 0 0; cursor:pointer; display:block;
}
input[type=range]::-webkit-slider-runnable-track{height:4px; border-radius:99px; background:var(--line)}
input[type=range]::-moz-range-track{height:4px; border-radius:99px; background:var(--line)}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; width:24px; height:24px; border-radius:50%;
  background:var(--brand); border:3px solid var(--surface); margin-top:-10px;
  box-shadow:0 1px 6px rgba(0,0,0,.22);
}
input[type=range]::-moz-range-thumb{
  width:24px; height:24px; border-radius:50%; background:var(--brand);
  border:3px solid var(--surface); box-shadow:0 1px 6px rgba(0,0,0,.22);
}
input[type=range]:focus-visible{outline:2px solid var(--brand); outline-offset:4px; border-radius:6px}
.wa-ends{display:flex; justify-content:space-between; font-family:var(--mono); font-size:10.5px; color:var(--faint); margin-top:-4px}

/* ── checks ── */
.wa-grp{margin-bottom:16px}
.wa-grp > h3{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.11em;
  color:var(--faint); margin:0 0 7px; font-weight:500;
}
.wa-checks{display:flex; flex-direction:column; gap:5px}
.wa-chk{
  display:flex; gap:10px; align-items:flex-start; padding:9px 12px;
  border:1px solid var(--line); border-radius:8px; background:var(--surface);
  cursor:pointer; font-size:13.5px; line-height:1.5; color:var(--ink);
  transition:border-color .14s, background .14s;
}
.wa-chk:hover{border-color:var(--brand)}
.wa-chk input{
  appearance:none; -webkit-appearance:none; width:16px; height:16px; flex:none;
  margin:3px 0 0; border:1.5px solid var(--line); border-radius:4px;
  background:var(--surface); cursor:pointer; position:relative;
}
.wa-chk input:checked{background:var(--brand); border-color:var(--brand)}
.wa-chk input:checked::after{
  content:""; position:absolute; left:4.5px; top:1px; width:4px; height:9px;
  border:solid var(--onbrand); border-width:0 2px 2px 0; transform:rotate(42deg);
}
.wa-chk input:focus-visible{outline:2px solid var(--brand); outline-offset:2px}
.wa-chk:has(input:checked){background:var(--brand-wash); border-color:var(--brand)}
.wa-chk.none{margin-top:10px; border-style:dashed}
.wa-freetext{
  width:100%; font:inherit; font-size:14px; padding:11px 13px; margin-top:6px;
  border:1px solid var(--brand); border-radius:8px;
  background:var(--paper); color:var(--ink);
}
.wa-freetext::placeholder{color:var(--faint); font-size:13px}
.wa-freetext:focus{outline:2px solid var(--brand); outline-offset:-1px}
.wa-freetext[hidden]{display:none}
.wa-dial input[type=number].unset{color:var(--faint)}
.wa-dial input[type=number]::placeholder{color:var(--faint)}
.wa-q .wa-hint b{color:var(--ink)}
.wa-chk em{font-style:normal; color:var(--slate); font-size:12px; display:block; margin-top:1px}

/* ── finish ── */
.wa-finish{
  border:1px solid var(--line); border-radius:14px; background:var(--surface);
  padding:22px 20px; margin-top:30px; box-shadow:var(--shadow);
}
.wa-finish h2{font-size:18px; color:var(--ink); margin:0 0 8px; font-weight:700}
label.wa-fl{display:block; font-size:12.5px; color:var(--slate); margin:16px 0 5px}
input[type=email]{
  width:100%; font:inherit; font-size:16px; padding:13px 15px;
  border:1px solid var(--line); border-radius:10px;
  background:var(--paper); color:var(--ink);
}
input[type=email]:focus{outline:2px solid var(--brand); outline-offset:-1px; border-color:var(--brand)}
.wa-consent{display:flex; gap:9px; align-items:flex-start; margin-top:13px; font-size:12.5px; color:var(--slate); line-height:1.65; cursor:pointer}
.wa-consent input{margin:3px 0 0; accent-color:var(--brand); width:16px; height:16px; flex:none}
.wa-go{
  display:block; width:100%; font:inherit; font-weight:700; font-size:16px;
  background:var(--brand); color:var(--onbrand); border:0; border-radius:10px;
  padding:15px; cursor:pointer; margin-top:16px; letter-spacing:.02em; transition:filter .14s;
}
.wa-go:hover{filter:brightness(1.07)}
.wa-go:focus-visible{outline:2px solid var(--ink); outline-offset:2px}
.wa-go[disabled]{opacity:.38; cursor:not-allowed}
.wa-todo{
  font-family:var(--mono); font-size:12px; color:var(--amber);
  background:var(--amber-wash); border-radius:8px; padding:10px 13px; margin-top:14px; line-height:1.6;
}

/* ── result ── */
#wa-result[hidden]{display:none}
#wa-result{margin-top:14px; scroll-margin-top:64px}
.wa-rhead{
  background:var(--surface); border:1px solid var(--line); border-radius:14px;
  padding:22px 20px; box-shadow:var(--shadow); margin:0 0 14px;
}
.wa-rhead .lbl{font-family:var(--mono); font-size:10.5px; letter-spacing:.13em; color:var(--faint); margin:0 0 8px}
.wa-big{
  font-family:var(--mono); font-weight:700; letter-spacing:-.035em; line-height:1;
  color:var(--ink); font-variant-numeric:tabular-nums; font-size:clamp(44px,14vw,62px);
}
.wa-big i{font-style:normal; font-size:.4em; font-weight:500; color:var(--slate); margin-left:5px; letter-spacing:0}
.wa-range{font-family:var(--mono); font-size:12.5px; color:var(--slate); margin-top:9px; font-variant-numeric:tabular-nums}
.wa-verdict{
  display:inline-flex; align-items:baseline; gap:8px; margin-top:16px;
  border-radius:8px; padding:9px 13px; font-size:14px; font-weight:700; line-height:1.4;
}
.wa-verdict.low{background:var(--amber-wash); color:var(--amber)}
.wa-verdict.ok{background:var(--brand-wash); color:var(--brand-ink)}
.whoami[data-theme="dark"] .wa-verdict.ok{color:var(--brand)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .wa-verdict.ok{color:var(--brand)}}
.wa-verdict b{font-family:var(--mono); font-size:17px; font-variant-numeric:tabular-nums}

.wa-rows{border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--surface); margin:0 0 6px}
.wa-row{display:flex; justify-content:space-between; align-items:baseline; gap:14px; padding:10px 16px; border-bottom:1px solid var(--line-soft)}
.wa-row:last-child{border-bottom:0}
.wa-row .n{color:var(--slate); font-size:13px}
.wa-row .v{font-family:var(--mono); font-weight:500; color:var(--ink); font-variant-numeric:tabular-nums; font-size:13.5px; text-align:right}

h3.wa-sec{font-size:16px; color:var(--ink); margin:22px 0 3px; font-weight:700}
.wa-sub{font-size:12.5px; color:var(--slate); margin:0 0 12px}
.wa-lever{
  display:flex; justify-content:space-between; align-items:center; gap:14px;
  border-left:3px solid var(--brand); background:var(--sunk);
  border-radius:0 8px 8px 0; padding:11px 15px; margin-bottom:6px;
}
.wa-lever .t{font-size:13.5px; color:var(--ink); line-height:1.5}
.wa-lever .t small{display:block; color:var(--slate); font-size:12px; margin-top:1px}
.wa-lever .g{font-family:var(--mono); font-weight:700; font-size:17px; color:var(--brand); white-space:nowrap; font-variant-numeric:tabular-nums}

details{margin-top:20px; border-top:1px solid var(--line); padding-top:13px}
summary{cursor:pointer; font-family:var(--mono); font-size:11.5px; color:var(--faint); letter-spacing:.06em; list-style:none}
summary::-webkit-details-marker{display:none}
summary::before{content:"▸ "; color:var(--brand)}
details[open] summary::before{content:"▾ "}
.wa-calc{
  font-family:var(--mono); font-size:11.5px; line-height:1.95; background:var(--sunk);
  border-radius:8px; padding:14px 16px; margin-top:10px; color:var(--slate);
  overflow-x:auto; white-space:pre;
}
.wa-calc b{color:var(--ink); font-weight:500}
.wa-calc u{color:var(--brand); text-decoration:none}
.wa-deliver{margin-top:24px; border:1px solid var(--line); border-radius:14px; background:var(--surface); padding:22px 20px}
.wa-deliver h3{font-size:17px; color:var(--ink); margin:0 0 6px; font-weight:700}
.wa-dsub{font-size:12.5px; color:var(--slate); margin:0 0 20px; line-height:1.7}
.wa-dq{margin-bottom:18px}
.wa-dq h4{font-size:14px; color:var(--ink); margin:0 0 9px; font-weight:700}
.wa-dq h4 em{font-style:normal; font-family:var(--mono); font-size:10.5px; color:var(--faint); margin-left:7px; letter-spacing:.05em}
.wa-dhint{font-size:12px; color:var(--slate); margin:-4px 0 9px; line-height:1.6}
.wa-dial.small input[type=number]{font-size:32px; width:4.4ch}
.wa-dial.small .u{font-size:13px}
.wa-opts.mini .wa-opt{padding:10px 13px; font-size:13.5px}
.wa-opts.mini .wa-opt .k{width:14px; height:14px}
.wa-opts.mini .wa-opt[aria-pressed="true"] .k{border-width:4px}
#wa-dArea{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:5px}
#wa-dArea .wa-chk{font-size:13px; padding:8px 11px}
@media (max-width:420px){#wa-dArea{grid-template-columns:1fr}}
.wa-sumbox{border:1px solid var(--line); border-radius:10px; background:var(--sunk); padding:13px 15px; margin-top:22px}
.wa-sumbox .wa-cap{font-family:var(--mono); font-size:10.5px; letter-spacing:.11em; color:var(--faint); margin:0 0 8px}
.wa-sumrow{display:flex; gap:12px; align-items:baseline; padding:3px 0; font-size:13.5px; line-height:1.6}
.wa-sumrow dt{flex:none; width:4.5em; color:var(--slate); font-size:12.5px}
.wa-sumrow dd{margin:0; color:var(--ink)}
.wa-sumrow dd.none{color:var(--faint)}
.wa-sumbox dl{margin:0}
.wa-saved{font-size:13px; color:var(--brand-ink); background:var(--brand-wash); border-radius:8px; padding:11px 14px; margin:12px 0 0; text-align:center}
.whoami[data-theme="dark"] .wa-saved{color:var(--brand)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .wa-saved{color:var(--brand)}}
.wa-foot{margin-top:26px; padding-top:15px; border-top:1px solid var(--line-soft); font-size:11.5px; color:var(--faint); line-height:1.8}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}


/* ==================================================================
 *  独立ページのヘッダー（wa-top）とフッター（wa-bottom）
 * ================================================================== */
.whoami .wa-top{
  display:flex; align-items:baseline; gap:10px;
  max-width:600px; margin:0 auto; width:100%;
  padding:18px 18px 14px;
}
.whoami .wa-logo{
  font-family:var(--mono); font-size:15px; font-weight:700; letter-spacing:-.02em;
  color:var(--ink); text-decoration:none; line-height:1;
}
.whoami .wa-logo::before{content:"$ "; color:var(--brand); font-weight:500}
.whoami .wa-logo:hover{color:var(--brand)}
.whoami .wa-tag{
  font-size:11.5px; color:var(--faint); letter-spacing:.04em; line-height:1;
}
@media (max-width:420px){
  .whoami .wa-top{flex-direction:column; gap:5px; padding:16px 18px 12px}
}

.whoami .wa-bottom{
  margin-top:auto;
  border-top:1px solid var(--line-soft);
  background:var(--paper);
  padding:26px 18px 34px;
  text-align:center;
}
.whoami .wa-bottom nav{
  display:flex; flex-wrap:wrap; justify-content:center; gap:8px 20px;
  margin-bottom:12px;
}
.whoami .wa-bottom a{
  font-size:12.5px; color:var(--slate); text-decoration:none;
}
.whoami .wa-bottom a:hover{color:var(--brand); text-decoration:underline; text-underline-offset:2px}
.whoami .wa-bottom p{
  margin:0; font-family:var(--mono); font-size:11px; color:var(--faint); letter-spacing:.04em;
}

/* 確認リンクから戻ってきたときのお知らせ */
.whoami .wa-flash{
  margin:20px 0 0; padding:13px 16px; border-radius:10px;
  font-size:13.5px; line-height:1.7;
}
.whoami .wa-flash.ok{background:var(--brand-wash); color:var(--brand-ink); border:1px solid var(--brand)}
.whoami .wa-flash.warn{background:var(--amber-wash); color:var(--amber); border:1px solid var(--amber)}


/* ==================================================================
 *  中央寄せの保険
 *  flex コンテナ内での margin:auto の解釈差で左右に寄るのを防ぐ。
 *  子要素をいったん幅100%にしてから max-width で絞る。
 * ================================================================== */
html, body.whoami-body{overflow-x:hidden; max-width:100%}
body.whoami-body .whoami{align-items:center}
.whoami > .wa-top,
.whoami > .wa-track,
.whoami > .wa-wrap,
.whoami > .wa-bottom{
  width:100%;
  margin-left:auto;
  margin-right:auto;
  box-sizing:border-box;
}
.whoami > .wa-track,
.whoami > .wa-bottom{max-width:none}
.whoami > .wa-top,
.whoami > .wa-wrap{max-width:600px}
.whoami > .wa-bottom{margin-top:auto}

/* ==================================================================
 *  解説セクション（常時表示・SEO / AIO 用）
 * ================================================================== */
.whoami .wa-doc{
  margin-top:64px; padding-top:40px;
  border-top:1px solid var(--line);
  color:var(--body);
}
.whoami .wa-doc h2{
  font-size:19px; font-weight:700; color:var(--ink);
  margin:44px 0 14px; letter-spacing:-.01em; line-height:1.5;
}
.whoami .wa-doc h2:first-child{margin-top:0}
.whoami .wa-doc h3{
  font-size:15px; font-weight:700; color:var(--ink);
  margin:32px 0 10px; letter-spacing:-.01em;
}
.whoami .wa-doc p{margin:0 0 14px; font-size:14.5px; line-height:1.85}
.whoami .wa-doc strong{color:var(--ink); font-weight:700}
.whoami .wa-doc a{color:var(--brand); text-decoration:underline; text-underline-offset:2px}

.whoami .wa-src{font-size:12.5px; color:var(--slate); line-height:1.8}

/* 表：狭い画面では表だけ横スクロールさせる */
.whoami .wa-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch; margin:0 0 12px}
.whoami .wa-tbl{
  border-collapse:collapse; width:100%; min-width:420px;
  font-size:13.5px; background:var(--surface);
  border:1px solid var(--line); border-radius:10px; overflow:hidden;
}
.whoami .wa-tbl th,
.whoami .wa-tbl td{
  padding:9px 12px; border-bottom:1px solid var(--line-soft);
  text-align:right; white-space:nowrap;
}
.whoami .wa-tbl thead th{
  background:var(--sunk); color:var(--slate);
  font-size:12px; font-weight:700; letter-spacing:.03em;
}
.whoami .wa-tbl thead th:first-child,
.whoami .wa-tbl tbody th{text-align:left; color:var(--ink); font-weight:700}
.whoami .wa-tbl tbody th{background:var(--sunk); font-size:13px}
.whoami .wa-tbl td{font-family:var(--mono); color:var(--body)}
.whoami .wa-tbl td.p{color:var(--brand); font-weight:700}
.whoami .wa-tbl tr:last-child th,
.whoami .wa-tbl tr:last-child td{border-bottom:0}

/* FAQ */
.whoami .wa-faq{margin:0 0 20px}
.whoami .wa-faq details{
  border-bottom:1px solid var(--line-soft);
}
.whoami .wa-faq summary{
  cursor:pointer; list-style:none; padding:15px 26px 15px 0; position:relative;
  font-size:14.5px; font-weight:700; color:var(--ink); line-height:1.65;
}
.whoami .wa-faq summary::-webkit-details-marker{display:none}
.whoami .wa-faq summary::after{
  content:""; position:absolute; right:6px; top:22px;
  width:8px; height:8px; border-right:2px solid var(--faint); border-bottom:2px solid var(--faint);
  transform:rotate(45deg); transition:transform .2s;
}
.whoami .wa-faq details[open] summary::after{transform:rotate(-135deg); top:25px}
.whoami .wa-faq summary:hover{color:var(--brand)}
.whoami .wa-faq details p{
  margin:0; padding:0 0 18px; font-size:14px; line-height:1.9; color:var(--body);
}

/* ==================================================================
 *  トップページ（front-page.php）
 * ================================================================== */
.whoami .wa-lp{padding-top:24px}
.whoami .wa-lp-h1{
  font-size:34px; line-height:1.4; font-weight:800; color:var(--ink);
  letter-spacing:-.02em; margin:0 0 18px;
}
.whoami .wa-lp-lead{font-size:15px; line-height:1.9; color:var(--body); margin:0 0 28px}
.whoami .wa-lp-cta{margin:0 0 10px}
.whoami .wa-lp-btn{
  display:block; text-align:center; text-decoration:none;
  background:var(--brand); color:var(--onbrand);
  font-size:16px; font-weight:700; padding:17px 20px; border-radius:11px;
  transition:transform .12s, filter .12s;
}
.whoami .wa-lp-btn:hover{filter:brightness(1.06); transform:translateY(-1px)}
.whoami .wa-lp-note{font-size:12.5px; color:var(--faint); margin:0 0 40px; text-align:center}

.whoami .wa-lp-nums{
  background:var(--surface); border:1px solid var(--line);
  border-radius:12px; padding:20px 22px; margin:0 0 44px;
}
.whoami .wa-lp-cap{font-size:12px; color:var(--faint); margin:0; line-height:1.7}
.whoami .wa-lp-nums ul{list-style:none; margin:12px 0; padding:0}
.whoami .wa-lp-nums li{
  display:flex; justify-content:space-between; align-items:baseline;
  padding:10px 0; border-bottom:1px solid var(--line-soft);
}
.whoami .wa-lp-nums li:last-child{border-bottom:0}
.whoami .wa-lp-nums .n{font-size:14px; color:var(--body)}
.whoami .wa-lp-nums .v{font-family:var(--mono); font-size:24px; font-weight:700; color:var(--ink)}
.whoami .wa-lp-nums li:last-child .v{color:var(--brand)}
.whoami .wa-lp-nums .v small{font-size:12px; font-weight:500; color:var(--slate); margin-left:3px}

.whoami .wa-lp h2{
  font-size:18px; font-weight:700; color:var(--ink);
  margin:0 0 14px; letter-spacing:-.01em;
}
.whoami .wa-lp p{font-size:14.5px; line-height:1.85; color:var(--body); margin:0 0 14px}
.whoami .wa-lp a{color:var(--brand); text-decoration:underline; text-underline-offset:2px}
.whoami .wa-lp strong{color:var(--ink); font-weight:700}
.whoami .wa-lp-soon{
  font-size:13.5px; color:var(--amber); background:var(--amber-wash);
  border-radius:9px; padding:12px 15px; margin:0 0 40px !important; line-height:1.75;
}
.whoami .wa-lp-posts{list-style:none; margin:0 0 40px; padding:0}
.whoami .wa-lp-posts li{
  display:flex; justify-content:space-between; align-items:baseline; gap:14px;
  padding:13px 0; border-bottom:1px solid var(--line-soft);
}
.whoami .wa-lp-posts a{color:var(--ink); text-decoration:none; font-size:14.5px; line-height:1.6}
.whoami .wa-lp-posts a:hover{color:var(--brand); text-decoration:underline}
.whoami .wa-lp-posts time{font-family:var(--mono); font-size:12px; color:var(--faint); white-space:nowrap}

@media (max-width:420px){
  .whoami .wa-lp-h1{font-size:27px}
  .whoami .wa-lp-nums .v{font-size:21px}
}

/* ボタンはリンク共通スタイルより優先させる（詳細度をそろえる） */
.whoami .wa-lp a.wa-lp-btn,
.whoami .wa-lp a.wa-lp-btn:hover{
  color:var(--onbrand);
  text-decoration:none;
}