/* ==========================================================
   成果報酬プラン 診断LPで足した部品（base.css / rv.css は変えない）
   配色・書体はサイヨウ90 LP 修正版のトークンを使う
   ========================================================== */

/* ---------- FV：見出しを2行に収める ---------- */
.fv__h1.sk-h1 { font-size: calc(var(--fv-u) * 6.6); line-height: 1.12; }
.fv__eyebrow.sk-eyebrow { letter-spacing: .24em; font-size: calc(var(--fv-u) * 1.7); }
.fv__eyebrow.sk-eyebrow .fv__eyebrow-chunk + .fv__eyebrow-chunk { margin-left: .8em; padding-left: .8em; border-left: 2px solid rgba(255,255,255,.5); }

/* ---------- 採用費用の実態 ---------- */
.sk-cost { background: var(--surface); padding: 96px 0 88px; }
.sk-cost__box { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; max-width: 1080px; margin: 0 auto; background: #fff; border-radius: 20px; padding: 32px 40px; box-shadow: 10px 10px 20px -10px rgba(0,71,184,.18); }
.sk-cost__fig { margin: 0; }
.sk-svg-num { font: 900 26px var(--font-en); }
.sk-svg-num-s { font: 900 20px var(--font-en); }
.sk-svg-lb { font: 700 16px var(--font-base); fill: var(--ink); }
.sk-svg-sm { font: 500 12px var(--font-base); fill: var(--gray); }
.sk-g { fill: #6F7889; } .sk-b { fill: var(--brand); }
.sk-cost__diff { font-weight: 900; color: var(--navy); }
.sk-cost__big { font-family: var(--font-serif); font-weight: 900; font-size: 1.6rem; color: var(--brand); line-height: 1.2; }
.sk-cost__big strong { font-family: var(--font-en); font-size: 3.6rem; margin: 0 .05em; }
.sk-cost__txt { margin-top: 14px; font-size: .98rem; line-height: 1.85; }
.sk-facts { display: grid; grid-template-columns: 1fr 1.6fr; gap: 20px; max-width: 1080px; margin: 20px auto 0; }
.sk-fact { background: #fff; border-radius: 20px; padding: 26px 28px; box-shadow: 10px 10px 20px -10px rgba(0,71,184,.18); }
.sk-fact--dark { background: var(--brand-gradient); color: #fff; }
.sk-fact__lb { font-weight: 900; font-size: .95rem; color: rgba(255,255,255,.88); line-height: 1.6; }
.sk-fact__lb--ink { color: var(--ink); font-family: var(--font-serif); font-size: 1.1rem; }
.sk-fact__num { margin-top: 10px; font-weight: 900; font-size: 1.3rem; }
.sk-fact__num strong { font-family: var(--font-en); font-size: 3rem; color: #FFE15A; margin: 0 .05em; }
.sk-fact__note { margin-top: 8px; font-size: .85rem; color: rgba(255,255,255,.85); line-height: 1.7; }
.sk-trend { width: 100%; height: auto; margin: 12px 0 0; }
.sk-link { color: var(--brand); text-decoration: underline; word-break: break-all; }

/* ---------- 進め方の前置き・事例 ---------- */
.sk-intro { max-width: 860px; margin: -8px auto 48px; text-align: center; font-weight: 500; line-height: 1.9; }
.sk-cases { max-width: 1080px; margin: 64px auto 0; }
.sk-cases__h { text-align: center; font-family: var(--font-serif); font-weight: 900; font-size: 1.5rem; margin-bottom: 20px; }
.sk-cases__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.sk-case { background: #fff; border-radius: 20px; padding: 26px 28px; border: 1px solid var(--brand-border); }
.sk-case__lb { font-size: .9rem; font-weight: 700; color: var(--gray); }
.sk-case__num { margin-top: 6px; font-weight: 900; font-size: 1.15rem; color: var(--ink); }
.sk-case__num strong { font-family: var(--font-en); font-size: 2.6rem; color: var(--brand); margin: 0 .08em; }
.sk-case__txt { margin-top: 10px; font-size: .95rem; line-height: 1.85; }
.compare__table small.sk-sm { display: block; margin-top: 4px; font-size: .78rem; font-weight: 500; color: var(--gray); }

/* ---------- 条件 ---------- */
.sk-terms { padding: 104px 0 96px; background: #fff; }
.sk-terms__list { max-width: 1040px; margin: 0 auto; border-top: 2px solid var(--brand); }
.sk-terms__list > div { display: grid; grid-template-columns: 220px 1fr; border-bottom: 1px solid var(--line); }
.sk-terms__list dt { background: var(--surface); padding: 18px 22px; font-weight: 900; color: var(--navy); }
.sk-terms__list dd { padding: 18px 22px; line-height: 1.8; }
.sk-terms__list dd strong { color: var(--brand); font-weight: 900; }
.sk-team { max-width: 1040px; margin: 40px auto 0; background: var(--surface); border-radius: 20px; padding: 26px 30px; }
.sk-team__h { font-family: var(--font-serif); font-weight: 900; font-size: 1.25rem; margin-bottom: 8px; }

/* ---------- 診断 ---------- */
.sk-shindan { background: radial-gradient(60% 85% at 70% 30%, #1446B0 0%, rgba(20,70,176,0) 72%), #0A2A7E; padding: 96px 0 96px; color: #fff; }
.sk-q { max-width: 820px; margin: 0 auto; background: #fff; color: var(--ink); border-radius: 20px; padding: 32px 36px; box-shadow: 0 16px 40px rgba(0,10,50,.35); }
.sk-q__prog { display: flex; align-items: center; gap: 14px; font-weight: 700; color: var(--gray); font-size: .9rem; }
.sk-q__prog b { font-family: var(--font-en); color: var(--brand); font-size: 1.2rem; }
.sk-q__bar { flex: 1; height: 6px; border-radius: 3px; background: var(--surface-strong); overflow: hidden; }
.sk-q__bar span { display: block; height: 100%; width: 14%; background: var(--brand); transition: width .25s; }
.sk-q__title { margin: 18px 0; font-family: var(--font-serif); font-weight: 900; font-size: 1.5rem; line-height: 1.5; }
.sk-q__opts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sk-q__opt { text-align: left; padding: 14px 18px; border: 2px solid var(--line); border-radius: 14px; background: #fff; font-weight: 700; font-size: 1rem; line-height: 1.5; transition: border-color .15s, background .15s; }
.sk-q__opt:hover, .sk-q__opt:focus-visible { border-color: var(--brand); background: var(--surface); outline: none; }
.sk-q__back { margin-top: 16px; color: var(--gray); text-decoration: underline; font-size: .9rem; }
.sk-r__lb { display: inline-block; background: var(--brand); color: #fff; font-weight: 900; font-size: .9rem; padding: .2em .9em; border-radius: 999px; }
.sk-r__lb.mid { background: #9A6B00; } .sk-r__lb.low { background: #5f5f5f; }
.sk-r__h { margin-top: 14px; font-family: var(--font-serif); font-weight: 900; font-size: 1.7rem; line-height: 1.5; }
.sk-r__cmp { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 18px 0; }
.sk-r__cmp > div { border-radius: 14px; padding: 16px; text-align: center; background: var(--gray-light); }
.sk-r__cmp > div.b { background: var(--surface-strong); }
.sk-r__cmp p { font-size: .85rem; font-weight: 700; color: var(--gray); }
.sk-r__cmp b { display: block; margin-top: 4px; font-family: var(--font-en); font-weight: 900; font-size: 2rem; color: var(--ink); }
.sk-r__cmp .b b { color: var(--brand); }
.sk-r__txt { line-height: 1.85; margin-bottom: 22px; }
.sk-r__btn { --fv-u: 10px; --fv-yellow: #FFE15A; width: fit-content; max-width: 100%; padding: 0 1.6em; min-height: 64px; font-size: 1.1rem; box-shadow: 0 8px 0 #D9B92E; }

/* ---------- フォーム ---------- */
.sk-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.sk-diag { background: var(--surface); border: 1px dashed var(--brand-border); border-radius: 12px; padding: 12px 16px; font-size: .88rem; color: var(--navy); margin-bottom: 12px; }
.sk-err { margin-top: 10px; color: #B3261E; font-weight: 700; font-size: .92rem; }

@media (max-width: 1024px) {
  .sk-cost__box, .sk-facts { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .fv__h1.sk-h1 { font-size: clamp(38px, 11vw, 52px); }
  .fv__eyebrow.sk-eyebrow { font-size: 14px; letter-spacing: .12em; }
  .sk-cost, .sk-terms, .sk-shindan { padding: 64px 0 56px; }
  .sk-cost__box { padding: 20px; gap: 16px; }
  .sk-cost__big strong { font-size: 3rem; }
  .sk-fact { padding: 22px; }
  .sk-cases__grid, .sk-q__opts, .sk-r__cmp { grid-template-columns: 1fr; }
  .sk-terms__list > div { grid-template-columns: 1fr; }
  .sk-terms__list dt { padding: 10px 16px; }
  .sk-terms__list dd { padding: 12px 16px 16px; }
  .sk-q { padding: 22px 18px; }
  .sk-q__title { font-size: 1.25rem; }
  .sk-r__h { font-size: 1.35rem; }
  .sk-r__btn { width: 100%; font-size: 1rem; }
  .sk-intro { text-align: left; }
}

/* 追従ボタン：ファーストビュー・診断・フォームが見えている間は PC でも隠す */
.consultation-float { transition: opacity .3s, visibility .3s, transform .3s; }
.consultation-float.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }

/* ---------- こんな会社に（紹介を使う会社・リファラルで採ってきた会社） ---------- */
.sk-who { padding: 96px 0 88px; background: #fff; }
.sk-who__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 1040px; margin: 0 auto; }
.sk-who__card { background: var(--surface); border-radius: 20px; padding: 30px 32px; border-top: 6px solid var(--brand); }
.sk-who__card + .sk-who__card { border-top-color: var(--brand-secondary); }
.sk-who__lb { display: inline-block; font-weight: 900; font-size: .9rem; color: #fff; background: var(--brand); border-radius: 999px; padding: .2em 1em; }
.sk-who__card + .sk-who__card .sk-who__lb { background: var(--brand-secondary); }
.sk-who__h { margin-top: 14px; font-family: var(--font-serif); font-weight: 900; font-size: 1.5rem; line-height: 1.5; }
.sk-who__txt { margin-top: 12px; line-height: 1.85; font-weight: 500; }
.sk-who .story__close { margin-top: 40px; }
.sk-who .story__close .nw { display: inline-block; }
.sk-cases__grid { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1024px) { .sk-cases__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 767px) {
  .sk-who { padding: 64px 0 56px; }
  .sk-who__grid, .sk-cases__grid { grid-template-columns: 1fr; }
  .sk-who__card { padding: 22px; }
  .sk-who__h { font-size: 1.25rem; }
}