/* 社労士デモ v2 — LPの骨格で足した部品（2026-10-03）
   出所: v1-serif-navy/lp.css（ユーザー承認済みの骨格）を v2 の構図（hero.css）に合わせたもの。
   読み込み順: base.css → hero.css → lp.css → case.css → photos.css。base.css / demo.js は無改変のまま。
   色・書体は base.css のトークン（--ink / --pale / --line / --serif …）だけを使う。案件で変えるのは case.css のトークン。
   新しく足したトークンは --alert（入力不足の色）と --ok（受付の色）。必要なら case.css で上書きする。 */

:root{
  --alert:#a3462c;   /* 入力不足。主色と系統を分ける（赤茶） */
  --ok:#2f6b4f;      /* 受付・成功 */
}

/* ボタンの横の一言（押す直前の不安を消す）。既存サイトに書いてあることだけ */
.cta-note{font-size:13px;line-height:1.8;color:var(--body)}

/* ファーストビュー: 見出し → ボタン → 一言。v2 は中央揃え
   登場の動き: hero.css が .hero-copy>* に当てている。ボタンの遅れ（.62s）を囲みに移す
   （hero.css の .hero-copy .button の遅れは、ボタンが直下の子でなくなったため効かない） */
.hero-action{display:flex;flex-direction:column;align-items:center;gap:14px}
.hero-action .button{margin:0}
.hero-action .cta-note{background:var(--page-90);padding:4px 12px}
.hero-copy>.hero-action{animation-delay:.62s}

/* 安心の3点（.credentials を3つまで並べる） */
.credentials{flex-wrap:wrap;gap:8px 32px}
.credentials span{display:inline-flex;align-items:center;gap:10px}
.credentials span+span:before{content:'';width:1px;height:14px;background:var(--line);margin-right:22px}

/* 本文中のボタン。大きな帯にせず、ボタン1つと短い一言 */
.section-cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;margin-top:40px}
.section-cta .button{font-size:14px}
.problems .section-cta,.profile .section-cta,.fees .section-cta{grid-column:2;margin-top:0}  /* 2欄の節では、ボタンは中身の欄の下に置く */

/* 提案であることの札。既存サイトに根拠の無い推測は、この札を付けて見せる */
.proposal-tag{display:inline-block;font-size:11px;letter-spacing:.08em;padding:2px 10px;border:1px solid var(--ink);color:var(--ink);background:#fff;margin-bottom:12px}
.proposal-note{font-size:12px!important;line-height:1.9;color:var(--muted);margin-top:18px}

/* よくあるご相談（悩み）。3項目まで。煽らない */
.problems{display:grid;grid-template-columns:1fr 1.8fr;gap:72px;border-bottom:1px solid var(--line)}
.problem-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
.problem-list li{display:grid;grid-template-columns:56px 1fr;gap:8px;align-items:baseline;padding:26px 0;border-bottom:1px solid var(--line)}
.problem-list .service-number{margin:0;font-size:19px}
.problem-list p{font:500 19px/1.8 var(--serif);color:var(--ink)}

/* ご相談の流れ。段の数は既存サイトの流れの数 */
.flow{background:var(--pale)}
.flow-list{list-style:none;margin:44px 0 0;padding:0;display:grid;grid-template-columns:repeat(var(--steps,4),minmax(0,1fr));gap:24px;counter-reset:step}
.flow-list li{border-top:1px solid var(--ink);padding-top:20px}
.flow-list .service-number{margin:0 0 8px}
.flow-list h3{font:500 17px/1.8 var(--sans);margin-bottom:8px}
.flow-list p{font-size:13px;line-height:1.9}

/* ご相談の前に（よくある質問）。3問まで。ほかの節で答えたことは載せない */
.faq{display:grid;grid-template-columns:1fr 1.8fr;gap:72px}
.faq-list{border-top:1px solid var(--ink)}
.faq-list details{border-bottom:1px solid var(--line)}
.faq-list summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:20px;padding:24px 0;font:500 17px/1.8 var(--serif);color:var(--ink)}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary span{transition:transform .25s}
.faq-list details[open] summary span{transform:rotate(45deg)}
.faq-list details>p{font-size:14px;padding:0 0 26px}

/* 問い合わせ（行動）。フォームは見た目だけで送信しない（受注前サンプル） */
.contact{align-items:start}
.contact-lead>p{font-size:14px}
.contact-phone{margin-top:32px;padding-top:24px;border-top:1px solid var(--line)}
.contact-phone .phone{margin:6px 0}
.after-send{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:10px;font-size:13px}
.after-send li{display:grid;grid-template-columns:28px 1fr;gap:6px}
.after-send b{font:italic 16px/1.6 var(--numeral);color:var(--numeral-ink)}
.lp-form{background:var(--page);padding:36px;border:1px solid var(--line)}
.lp-form .proposal-tag{margin-bottom:20px}
.field{margin-bottom:22px}
.field>label,.field>legend{display:block;font-size:13px;color:var(--ink);margin-bottom:8px;padding:0}
.field small{color:var(--muted);font-size:11px;margin-left:8px}
.field input,.field select,.field textarea{width:100%;min-height:48px;padding:10px 14px;border:1px solid var(--line);background:#fff;font:inherit;font-size:15px;color:var(--body);border-radius:0}
.field textarea{min-height:120px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--ink);outline-offset:0;border-color:var(--ink)}
.field.is-invalid input,.field.is-invalid select,.field.is-invalid textarea{border-color:var(--alert)}
.lp-form .button{width:100%;max-width:none;margin:6px 0 0}
.form-status{font-size:13px;line-height:1.8;margin-top:14px;padding:10px 14px;border-left:3px solid var(--ink);background:var(--pale)}
.form-status.is-error{border-color:var(--alert);color:var(--alert);background:#fff}
.form-status.is-ok{border-color:var(--ok);color:var(--ok);background:#fff}
.form-note{font-size:11px;color:var(--muted);margin-top:14px}

/* スマホの追従ボタン。最初の画面のボタンが見えなくなったら出し、問い合わせの節が見えたら引っ込める */
.sticky-cta{display:none}

@media(max-width:1100px){
  .problems,.faq{gap:40px}
  .lp-form{padding:28px}
}
@media(max-width:850px){
  .problems,.faq{gap:32px}
  .flow-list{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:32px}
}
@media(max-width:600px){
  /* 見出しの span は折り返さない（hero.css）。いちばん長い行の字数を h1 の style="--h1-chars:N" に書くと、
     その字数が入る大きさまでだけ縮める（6字までなら hero.css の大きさのまま。スクロールバーの分の余裕を含む） */
  .hero h1{font-size:min(clamp(46px,12vw,60px),calc((100vw - 40px) / (var(--h1-chars,9) * 1.08 + .7)))}
  .hero-action{gap:12px}
  .credentials span+span:before{display:none}
  .problems,.faq{grid-template-columns:1fr}
  .problems .section-cta,.profile .section-cta,.fees .section-cta{grid-column:auto}
  .problem-list li{grid-template-columns:40px 1fr;padding:20px 0}
  .problem-list p{font-size:17px}
  .flow-list{grid-template-columns:1fr}
  .faq-list summary{font-size:16px;padding:20px 0}
  .section-cta{margin-top:28px}
  .section-cta .button,.hero-action .button{width:100%}
  .lp-form{padding:22px 18px}
  .contact-phone .phone{font-size:30px}
  /* 追従ボタン。出ている間は下端をふさがないよう、通知（.toast）を上へ逃がす */
  .sticky-cta{display:flex;position:fixed;left:12px;right:12px;bottom:12px;z-index:40;justify-content:center;align-items:center;gap:12px;min-height:52px;background:var(--ink);color:#fff;font-size:15px;box-shadow:0 6px 24px #0003;transform:translateY(140%);transition:transform .3s}
  .sticky-cta.is-shown{transform:none}
  body:has(.sticky-cta.is-shown) .toast{bottom:80px}
  body:has(.sticky-cta.is-shown) .footer{padding-bottom:88px}
}
@media(prefers-reduced-motion:reduce){
  .sticky-cta{transition:none}
}