/* ============================================================
   三秒の栞 — Contact Form Styles
   お問い合わせフォーム / 確認 / サンクスページ
   ============================================================ */

/* =========================================================
   アラート
   ========================================================= */
.contact-alert{display:flex;align-items:center;gap:10px;padding:14px 18px;border-radius:var(--radius-md);margin-bottom:20px;font-size:12px;line-height:1.6;}
.contact-alert-error{background:#FFF5F5;border:0.5px solid #E8C8C8;color:#8B3A3A;}

/* =========================================================
   フォーム本体
   ========================================================= */
.contact-form{background:#fff;border:0.5px solid var(--border);border-radius:var(--radius-lg);padding:28px 30px;box-sizing:border-box;overflow:hidden;max-width:100%;}

.form-group{margin-bottom:22px;}
.form-group.has-error .form-input,
.form-group.has-error .form-select,
.form-group.has-error .form-textarea{border-color:#C0392B;}

.form-label{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--dark);margin-bottom:8px;}
.form-required{font-size:10px;font-weight:700;color:#fff;background:#C0392B;padding:1px 6px;border-radius:3px;letter-spacing:0.04em;}
.form-optional{font-size:10px;font-weight:600;color:var(--text-muted);background:var(--bg-main);padding:1px 6px;border-radius:3px;letter-spacing:0.04em;}

.form-input,
.form-select,
.form-textarea{
  display:block;width:100%;padding:11px 14px;font-size:16px;
  color:var(--dark);background:#fff;
  border:0.5px solid var(--border);border-radius:var(--radius-md);
  font-family:var(--font-sans);
  transition:border-color .15s,box-shadow .15s;
  outline:none;
  box-sizing:border-box;
  -webkit-appearance:none;
  max-width:100%;
}
.form-input:focus,
.form-select:focus,
.form-textarea:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(200,150,10,0.1);}

.form-input[readonly]{background:var(--bg-main);color:var(--text-sub);cursor:default;}

.form-select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg width='10' height='6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0L5 6L10 0' fill='%23999'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:36px;}

.form-textarea{resize:vertical;min-height:140px;line-height:1.8;}

.form-char-count{display:block;text-align:right;font-size:11px;color:var(--text-muted);margin-top:4px;}

.form-help{display:block;font-size:11px;color:var(--text-muted);margin-top:4px;}

.form-error-msg{display:block;font-size:11px;color:#C0392B;margin-top:4px;padding-left:2px;}

/* =========================================================
   ハニーポット（非表示）
   ========================================================= */
.hp-field{opacity:0;position:absolute;top:0;left:0;height:0;width:0;z-index:-1;overflow:hidden;pointer-events:none;}

/* =========================================================
   ボタン
   ========================================================= */
.form-actions{margin-top:28px;text-align:center;}
.form-actions-pair{display:flex;justify-content:center;align-items:center;gap:16px;flex-wrap:wrap;}

.form-btn-submit{
  display:inline-flex;align-items:center;gap:8px;
  padding:14px 40px;font-size:14px;font-weight:700;
  color:#fff;background:var(--dark);
  border:none;border-radius:var(--radius-md);
  cursor:pointer;transition:all .15s;
  font-family:var(--font-sans);
  letter-spacing:0.04em;
}
.form-btn-submit:hover{background:var(--gold);color:#fff;}
.form-btn-submit:disabled{opacity:0.5;cursor:not-allowed;}

.form-btn-back{
  display:inline-flex;align-items:center;gap:6px;
  padding:14px 28px;font-size:13px;font-weight:600;
  color:var(--text-sub);background:#fff;
  border:0.5px solid var(--border);border-radius:var(--radius-md);
  text-decoration:none;transition:all .15s;
  font-family:var(--font-sans);
}
.form-btn-back:hover{border-color:var(--gold);color:var(--dark);}

/* =========================================================
   ステッププログレス
   ========================================================= */
.contact-steps{display:flex;justify-content:center;align-items:center;gap:12px;margin-bottom:28px;}
.contact-step{
  padding:6px 18px;font-size:12px;font-weight:600;
  color:var(--text-muted);background:var(--bg-main);
  border:0.5px solid var(--border);border-radius:20px;
}
.contact-step.active{color:var(--gold);background:#fff;border-color:var(--gold);}
.contact-step.done{color:#fff;background:var(--gold);border-color:var(--gold);}
.contact-step-arrow{font-size:12px;color:var(--text-muted);}

/* =========================================================
   確認カード
   ========================================================= */
.confirm-card{background:#fff;border:0.5px solid var(--border);border-radius:var(--radius-lg);padding:28px 30px;margin-bottom:24px;box-sizing:border-box;overflow:hidden;max-width:100%;}
.confirm-list{margin:0;padding:0;}
.confirm-row{display:flex;gap:16px;padding:14px 0;border-bottom:0.5px solid var(--border-light);}
.confirm-row:last-child{border-bottom:none;}
.confirm-row dt{flex-shrink:0;width:120px;font-size:12px;font-weight:700;color:var(--dark);padding-top:2px;}
.confirm-row dd{flex:1;font-size:13px;color:#555;line-height:1.8;margin:0;}
.confirm-message{white-space:pre-wrap;word-break:break-word;}
.confirm-url{word-break:break-all;font-size:12px;color:var(--gold);}
.text-muted{color:var(--text-muted);}

/* =========================================================
   サンクスカード
   ========================================================= */
.thanks-card{text-align:center;background:#fff;border:0.5px solid var(--border);border-radius:var(--radius-lg);padding:48px 30px;margin-top:16px;box-sizing:border-box;max-width:100%;}
.thanks-icon{margin-bottom:24px;}
.thanks-title{font-family:var(--font-serif);font-size:22px;color:var(--dark);margin-bottom:16px;letter-spacing:0.06em;}
.thanks-message{font-size:13px;color:#555;line-height:2.0;margin-bottom:28px;}
.thanks-message small{font-size:11px;color:var(--text-muted);}
.thanks-home-btn{margin:0 auto;}

/* =========================================================
   reCAPTCHA 注意書き
   ========================================================= */
.recaptcha-notice{font-size:10px;color:var(--text-muted);text-align:center;margin-top:16px;line-height:1.7;}
.recaptcha-notice a{color:var(--text-sub);text-decoration:underline;}

/* reCAPTCHA バッジ非表示（注意書きで代替） */
.grecaptcha-badge{visibility:hidden !important;}

/* =========================================================
   RESPONSIVE: <= 768px
   ========================================================= */
@media (max-width:768px){
  .contact-form{padding:18px 16px;}

  .form-actions-pair{flex-direction:column-reverse;gap:10px;}
  .form-btn-submit{width:100%;justify-content:center;}
  .form-btn-back{width:100%;justify-content:center;}

  .confirm-card{padding:18px 16px;}
  .confirm-row{flex-direction:column;gap:4px;}
  .confirm-row dt{width:auto;font-size:11px;}

  .thanks-card{padding:32px 16px;}
  .thanks-title{font-size:18px;}

  .contact-steps{gap:8px;}
  .contact-step{padding:5px 12px;font-size:11px;}
}