/* =========================================================
   contact-form.css
   製品ページ(geniehr / genie-call-center / speaker-match)共通の
   「お問い合わせ」セクション＋フォームのデザイン。
   各HTMLの <head> 内 <link href="contact-form.css"> から読み込まれる。
   ========================================================= */

/* ---------- セクション全体 ---------- */
.contact{background:#F0FDF4;padding:96px 60px 88px;border-top:1px solid #DCFCE7}
.contact-wrap{max-width:700px;margin:0 auto;text-align:center}
.contact-headline{font-size:40px;font-weight:700;color:#166534;line-height:1.4;margin-bottom:18px}
.contact-sub{font-size:14px;color:#4B5563;line-height:1.85;margin-bottom:40px;font-weight:400;word-break:keep-all;overflow-wrap:anywhere}

/* ---------- フォームのカード ---------- */
.cform{background:#fff;border:1px solid #BBF7D0;border-radius:16px;padding:40px;text-align:left;box-shadow:0 4px 24px rgba(22,101,52,0.08)}

/* ラベル＋「必須」バッジ */
.field-label{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.field-name{font-size:14px;color:#166534;font-weight:700}
.req-badge{background:#E11D48;color:#fff;font-size:10px;padding:2px 8px;border-radius:10px;font-weight:700}

/* テキスト入力・テキストエリア */
.cform-input,
.cform-textarea{width:100%;background:#F9FAFB;border:1.5px solid #D1FAE5;border-radius:8px;padding:13px 16px;font-size:14px;color:#1C1C1C;margin-bottom:26px;outline:none;transition:border-color 0.2s,background 0.2s;font-family:inherit}
.cform-input::placeholder,
.cform-textarea::placeholder{color:#9CA3AF}
.cform-input:focus,
.cform-textarea:focus{border-color:#22C55E;background:#fff}
.cform-input.is-error,
.cform-textarea.is-error{border-color:#E11D48}
.cform-textarea{height:140px;resize:vertical}

/* 2カラム(部署名/役職、メール/電話) */
.cform-2col{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 16px}

/* ご希望内容(ラジオ) */
.cform-choice{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:26px}
.cform-choice label{flex:1 1 160px;display:flex;align-items:center;gap:10px;background:#F9FAFB;border:1.5px solid #D1FAE5;border-radius:8px;padding:13px 16px;font-size:14px;color:#1C1C1C;cursor:pointer;transition:border-color 0.2s,background 0.2s}
.cform-choice label:has(input:checked){border-color:#22C55E;background:#F0FDF4;font-weight:700;color:#166534}
.cform-choice input{width:17px;height:17px;accent-color:#22C55E;flex-shrink:0}

/* 個人情報の取扱い同意 */
.checkbox-row{background:#F0FDF4;border:1.5px solid #BBF7D0;border-radius:8px;padding:12px 16px;display:flex;align-items:center;gap:12px;margin-bottom:6px}
.checkbox-row input{width:17px;height:17px;flex-shrink:0;accent-color:#22C55E}
.checkbox-row label{font-size:14px;color:#374151;font-weight:400;cursor:pointer}
.checkbox-row label a{color:#16A34A;font-weight:700;text-decoration:underline}
.checkbox-row label a:hover{color:#22C55E}
.privacy-note{font-size:12px;color:#6B7280;margin-bottom:28px}

/* 送信ボタン・結果メッセージ */
.submit-btn{width:100%;background:#22C55E;color:#fff;font-size:15px;font-weight:700;padding:15px;border-radius:8px;border:none;cursor:pointer;transition:background 0.2s;font-family:inherit}
.submit-btn:hover{background:#16A34A}
.submit-btn:disabled{opacity:0.6;cursor:wait}
.cform-msg{margin-top:14px;font-size:13px;font-weight:500;color:#E11D48;min-height:18px;text-align:center}
.cform-msg.success{color:#166534}
.cform-msg.is-fail{background:#FFF1F2;border:1px solid #FECDD3;border-radius:8px;padding:14px 16px;font-size:14px;line-height:1.7;color:#BE123C}
.cform-msg.is-fail strong{font-weight:700}

/* ---------- 送信完了の表示 ---------- */
.cform-done{margin-top:22px;background:#fff;border:1px solid #BBF7D0;border-radius:16px;padding:56px 40px;text-align:center;box-shadow:0 4px 24px rgba(22,101,52,0.08);animation:cf-done-in 0.4s ease-out}
.cform-done:focus{outline:none}
.cform-done-icon{width:72px;height:72px;margin:0 auto 22px;border-radius:50%;background:#22C55E;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 18px rgba(34,197,94,0.35)}
.cform-done-icon svg{width:38px;height:38px}
.cform-done-title{font-size:24px;font-weight:700;color:#166534;line-height:1.4;margin-bottom:12px}
.cform-done-text{font-size:14px;color:#4B5563;line-height:1.85;margin-bottom:30px}
.cform-done-back{background:#fff;color:#16A34A;border:1.5px solid #22C55E;border-radius:8px;padding:11px 28px;font-size:14px;font-weight:700;cursor:pointer;font-family:inherit;transition:background 0.2s,color 0.2s}
.cform-done-back:hover{background:#22C55E;color:#fff}
@keyframes cf-done-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.cform-done{animation:none}}

/* ---------- レスポンシブ ---------- */
@media (max-width:1024px){
  .contact{padding:64px 40px}
}
@media (max-width:600px){
  .contact{padding:48px 22px}
  .contact-headline{font-size:30px}
  .contact-sub br{display:none}
  .cform{padding:26px 20px}
  .cform-done{padding:40px 20px}
  .cform-done-title{font-size:20px}
  .cform-2col{grid-template-columns:1fr}
}