/**
 * DASULLAR — お問い合わせページ (page-contact.php) 専用スタイル
 * 共通トークンは assets/css/base.css を利用します。
 * フォーム部分は Fluent Forms の標準的なHTML構造（.fluentform 配下の
 * .ff-el-group / .ff-el-form-control 等）を前提にスタイルを当てています。
 * Fluent Forms自体の機能（バリデーション・条件分岐・送信処理等）を
 * 妨げるような !important の多用や構造依存の強いセレクタは避けています。
 */

/* ---------- ページ上部（企業情報／プライバシーポリシーと統一感のある
   左揃え・やや狭めの1カラム構成。中央寄せに寄りすぎないようにする） ---------- */
.contact-hero{
  background:#fff;
  padding: clamp(90px,10vw,140px) var(--pad-x) clamp(32px,4vw,44px);
}
.contact-container{
  max-width:720px;
  margin:0 auto;
  text-align:left;
}
.contact-hero h1{
  margin-top:16px;
  font-size:clamp(2rem,3.6vw,2.8rem);
  line-height:1.5;
  color:var(--ink);
}
.contact-hero p{
  margin-top:24px;
  font-size:16px;
  line-height:2;
  color:#3E4B45;
  max-width:38em;
}
.contact-hero .contact-note{
  margin-top:14px;
  font-size:14px;
  line-height:1.9;
  color:var(--steel);
}

/* ---------- フォームエリア ---------- */
.contact-form-section{
  background:#fff;
  padding: 0 var(--pad-x) clamp(80px,9vw,120px);
}
.contact-form-wrap{
  max-width:720px;
  margin:0 auto;
}

/* Fluent Forms が未設置／ショートコード未貼付のときの案内文
   （管理画面での作業が完了すると自然に表示されなくなる） */
.contact-form-wrap__placeholder{
  padding: 28px;
  border:1px dashed rgba(21,32,27,.2);
  border-radius:8px;
  font-size:14px;
  line-height:1.9;
  color:var(--steel);
}

/* ---------- Fluent Forms 共通 ---------- */
.contact-form-wrap .fluentform{
  font-family:var(--sans);
}

/* 各項目のグループ */
.contact-form-wrap .ff-el-group{
  margin-bottom: 26px;
}

/* ラベル */
.contact-form-wrap .ff-el-input--label,
.contact-form-wrap label{
  display:block;
  margin-bottom:8px;
  font-size:14.5px;
  font-weight:600;
  color:var(--ink);
}

/* 必須マーク：目立ちすぎないよう控えめな緑に */
.contact-form-wrap .ff-required-mark,
.contact-form-wrap .ff-el-is-required{
  color:var(--green-strong);
  font-weight:400;
  margin-left:2px;
}

/* テキスト系入力・セレクト・テキストエリア共通 */
.contact-form-wrap .ff-el-form-control,
.contact-form-wrap input[type="text"],
.contact-form-wrap input[type="email"],
.contact-form-wrap input[type="tel"],
.contact-form-wrap input[type="number"],
.contact-form-wrap select,
.contact-form-wrap textarea{
  width:100%;
  background:#fff;
  border:1px solid rgba(21,32,27,.18);
  border-radius:8px;
  padding:13px 16px;
  font-size:15.5px;
  font-family:var(--sans);
  color:var(--ink);
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.contact-form-wrap textarea,
.contact-form-wrap .ff-el-form-control[rows]{
  min-height:160px;
  resize:vertical;
  line-height:1.8;
}
.contact-form-wrap select{
  cursor:pointer;
}

/* フォーカス時：ダスラーグリーン */
.contact-form-wrap .ff-el-form-control:focus,
.contact-form-wrap input:focus,
.contact-form-wrap select:focus,
.contact-form-wrap textarea:focus{
  outline:none;
  border-color:var(--green-strong);
  box-shadow: 0 0 0 3px rgba(15,143,88,.15);
}

/* プレースホルダー */
.contact-form-wrap ::placeholder{
  color:#9AA9A2;
  opacity:1;
}

/* チェックボックス・ラジオ（プライバシーポリシー同意など） */
.contact-form-wrap .ff-el-form-check{
  display:flex;
  align-items:flex-start;
  gap:10px;
}
.contact-form-wrap .ff-el-form-check input[type="checkbox"],
.contact-form-wrap .ff-el-form-check input[type="radio"]{
  width:18px; height:18px;
  margin-top:3px;
  flex-shrink:0;
  accent-color:var(--green-strong);
}
.contact-form-wrap .ff-el-form-check-label{
  font-size:14.5px;
  line-height:1.8;
  color:#3E4B45;
}

/* プライバシーポリシーへのリンク：緑の下線付き */
.contact-form-wrap .ff-el-form-check-label a,
.contact-form-wrap a{
  color:var(--green-deep);
  text-decoration:underline;
  text-underline-offset:3px;
}
.contact-form-wrap .ff-el-form-check-label a:hover,
.contact-form-wrap a:hover{
  color:var(--green-strong);
}

/* 送信ボタン：既存のお問い合わせボタンと同じ緑 */
.contact-form-wrap .ff-btn,
.contact-form-wrap button[type="submit"],
.contact-form-wrap input[type="submit"]{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--green);
  color:#fff;
  font-size:14px;
  font-weight:600;
  letter-spacing:.02em;
  border:none;
  border-radius:999px;
  padding:14px 34px;
  cursor:pointer;
  box-shadow:0 6px 16px -10px rgba(8,122,75,.4);
  transition: background .3s var(--ease), transform .3s var(--ease);
}
.contact-form-wrap .ff-btn:hover,
.contact-form-wrap button[type="submit"]:hover,
.contact-form-wrap input[type="submit"]:hover{
  background:var(--green-strong);
  transform:translateY(-2px);
}
.contact-form-wrap .ff-btn:focus-visible,
.contact-form-wrap button[type="submit"]:focus-visible,
.contact-form-wrap input[type="submit"]:focus-visible,
.contact-form-wrap .ff-el-form-control:focus-visible,
.contact-form-wrap a:focus-visible{
  outline: 2px solid var(--green-deep);
  outline-offset: 3px;
}

/* エラー表示 */
.contact-form-wrap .error,
.contact-form-wrap .text-danger,
.contact-form-wrap .error-message-wrapper{
  margin-top:6px;
  font-size:13px;
  line-height:1.7;
  color:#C0392B;
}
.contact-form-wrap .ff-el-form-control.error,
.contact-form-wrap .is-invalid,
.contact-form-wrap input.error,
.contact-form-wrap select.error,
.contact-form-wrap textarea.error{
  border-color:#C0392B;
  box-shadow: 0 0 0 3px rgba(192,57,43,.1);
}

/* 送信完了メッセージ */
.contact-form-wrap .ff-message-success,
.contact-form-wrap .ff_success_message{
  margin-top:24px;
  padding:20px 22px;
  border-radius:8px;
  background:var(--mint);
  border:1px solid rgba(15,143,88,.25);
  color:var(--ink);
  font-size:15px;
  line-height:1.8;
}

/* Cloudflare Turnstile：モバイル幅からはみ出さないようにする */
.contact-form-wrap .cf-turnstile,
.contact-form-wrap iframe{
  max-width:100%;
}
.contact-form-wrap .cf-turnstile > div{
  max-width:100%;
}

@media (max-width:600px){
  .contact-form-section{ padding-left:30px; padding-right:30px; }
  .contact-hero{ padding-left:30px; padding-right:30px; }
}

@media (prefers-reduced-motion: reduce){
  .contact-hero *, .contact-form-wrap *{ animation:none !important; transition:none !important; }
}