/* 社労士デモ v1 — LPの骨格で足した部品（2026-10-03）
   出所: SYSTEM/CONVERSION_PAGE_PLAYBOOK.md（成果を出すHP・LPの作り方）を v1 に当てはめたもの。
   base.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)}

/* ファーストビュー: 見出し → 補足 → ボタン → 一言 の4つまで */
.hero-action{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px}
.hero-action .cta-note{background:#ffffffd9;padding:4px 10px}
/* 登場の動き。base.css は .hero-copy>.button にだけ当てているので、ボタンを囲みに入れた分をここで同じ値で当て直す
   （動きを減らす設定では base.css の reduced-motion 指定で止まる） */
.hero-copy>.hero-action{animation:intro .8s .4s both}

/* 安心の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:#fff;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){
  /* 見出しは1行9字まで。38px のままだと 390px 幅で9字目（句点）だけが落ちるため、9字が入る大きさまで縮める
     （割る数に余裕を持たせ、PCの狭い窓でスクロールバーが出ても9字が入るようにする） */
  .hero h1{font-size:min(38px,calc((100vw - 48px) / 10))}
  .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}
}