/* ============================================================
     /contact/ ページ固有CSS ─ お問い合わせフォーム
     ・新規クラスは cf- 接頭辞＋.cform（既存344クラスとの衝突チェック済み）
     ・フォームは確認用（送信しない）。公開時はWordPress側で
       Contact Form 7 等に差し替える前提（action未定のため空）。
     ============================================================ */

  /* 入り口の分岐カード（相談か、診断か） */
  .cf-fork{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,2.6vw,24px);margin-top:28px}
  .cf-fork article{background:var(--white);border:1px solid var(--n300);
                   padding:clamp(20px,3vw,30px);display:flex;flex-direction:column;gap:10px}
  .cf-fork .cf-k{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.16em;color:var(--b600)}
  .cf-fork h3{font-family:var(--serif);font-size:clamp(17px,2.2vw,21px);font-weight:700;
              margin:0;letter-spacing:.04em;line-height:1.6}
  .cf-fork p{margin:0 0 6px;font-size:13px;font-weight:500;color:var(--n700);line-height:1.9}
  .cf-fork .btns{margin-top:auto}
  .cf-fork .btn.ghost{color:var(--b700);border-color:var(--b300)}   /* 白帯の上ではghostの白文字が消えるため */
  .cf-fork .btn.ghost:hover{border-color:var(--b600)}

  /* フォーム本体 */
  .cform{background:var(--white);border:1px solid var(--n300);
         padding:clamp(22px,3.6vw,42px);margin-top:28px;display:flex;flex-direction:column;gap:24px}
  .cform .cf-field{border:0;margin:0;padding:0;min-width:0}
  .cform legend,.cform .cf-label{display:block;font-size:13px;font-weight:700;color:var(--n900);
                                 letter-spacing:.03em;margin:0 0 9px;padding:0}
  .cf-req,.cf-opt{display:inline-block;font-family:var(--mono);font-size:9px;font-weight:700;
                  letter-spacing:.1em;padding:2px 7px;margin-left:8px;vertical-align:2px}
  .cf-req{background:var(--b600);color:#fff}
  .cf-opt{background:var(--n100);color:var(--n500);border:1px solid var(--n300)}
  .cf-radios{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .cf-radio{display:flex;align-items:flex-start;gap:10px;border:1px solid var(--n300);
            background:var(--white);padding:12px 14px;cursor:pointer;font-size:13px;font-weight:500;
            color:var(--n900);line-height:1.65;transition:border-color .2s,background .2s}
  .cf-radio:hover{border-color:var(--b400)}
  .cf-radio input{margin:4px 0 0;accent-color:var(--b600);flex:none;width:15px;height:15px}
  .cf-radio:has(input:checked){border-color:var(--b600);background:var(--b50)}
  .cf-radio small{display:block;font-size:11px;font-weight:500;color:var(--n500)}
  .cform input[type=text],.cform input[type=email],.cform input[type=tel],.cform textarea{
    width:100%;border:1px solid var(--n300);background:var(--white);padding:12px 13px;
    font-family:var(--sans);font-size:14px;font-weight:500;color:var(--n900);
    border-radius:0;-webkit-appearance:none;appearance:none}
  .cform input[type=text]:focus-visible,.cform input[type=email]:focus-visible,
  .cform input[type=tel]:focus-visible,.cform textarea:focus-visible,
  .cf-radio input:focus-visible,.cf-agree input:focus-visible{outline:2px solid var(--b400);outline-offset:1px}
  .cform textarea{min-height:170px;resize:vertical;line-height:1.9}
  .cform ::placeholder{color:var(--n500);opacity:.75}
  .cf-half{display:grid;grid-template-columns:1fr 1fr;gap:18px}
  .cf-hint{margin:7px 0 0;font-size:11.5px;font-weight:500;color:var(--n500);line-height:1.8}
  .cf-agree{display:flex;align-items:flex-start;gap:10px;font-size:13px;font-weight:500;
            color:var(--n900);cursor:pointer;line-height:1.7}
  .cf-agree input{margin:4px 0 0;accent-color:var(--b600);flex:none;width:15px;height:15px}
  .cf-agree a{color:var(--b600)}
  .cf-submit{border:0;cursor:pointer;font-family:var(--sans);justify-content:center;
             width:100%;max-width:420px;margin:0 auto;font-size:14.5px;padding:15px 22px}
  .cf-msg{display:none;margin:0;border:1px solid var(--b300);background:var(--b50);color:var(--b800);
          font-size:13px;font-weight:700;padding:13px 15px;text-align:center;line-height:1.8}
  .cf-msg.cf-show{display:block}
  .cf-note{margin:0;font-size:11px;font-weight:500;color:var(--n500);text-align:center;line-height:1.8}

  /* ご相談の流れ：このページだけ4ステップ横並び */
  #s-flow .steps{grid-template-columns:repeat(4,1fr)}
  @media (max-width:1080px){#s-flow .steps{grid-template-columns:1fr 1fr}}
  @media (max-width:880px){#s-flow .steps{grid-template-columns:1fr}}

  /* 会社情報の枠（privacyページの問い合わせ窓口枠と同じ見た目） */
  .cf-win{border:1px solid var(--n300);background:var(--n100);padding:20px 24px;margin-top:28px;max-width:640px}
  .cf-win dl{display:grid;grid-template-columns:auto 1fr;gap:7px 20px;margin:0;font-size:13.5px}
  .cf-win dt{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.14em;
             color:var(--b600);padding-top:5px}
  .cf-win dd{margin:0;color:var(--n900);font-weight:500;line-height:1.7}

  @media (max-width:760px){
    .cf-fork{grid-template-columns:1fr}
    .cf-radios{grid-template-columns:1fr}
    .cf-half{grid-template-columns:1fr}
    .cform{padding:22px 16px}
    .cf-win dl{grid-template-columns:1fr;gap:3px 0}
    .cf-win dt{padding-top:10px}
  }