/* ========================================
   S10 お問い合わせフォーム（#EAF5FC BG・v1フォーム基盤流用）
   ======================================== */

.contact {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  position: relative;
  padding: 40px 16px; /* Figma 2523:421（旧60/16/40） */
  /* 2026-08-17 Figma 2989:1224 fill＝#1E7FC2（青）。旧：紺ベタ／さらに旧：#EAF5FC地＋タイル壁写真50% */
  background: var(--c-primary, #1E7FC2);
  overflow: hidden;
  text-align: center;
}
.contact > * { position: relative; z-index: 1; }

.contact-heading { display: flex; flex-direction: column; align-items: center; gap: 16px; } /* 統一 2026-07-31 */
.contact-badge {
  /* 2026-08-12ユーザー指定：全セクションのバッジを 16px / 行高16px / pad4px16px に統一 */
  padding: 4px 16px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 16px;
  display: inline-flex;
  align-items: center; /* 他バッジと統一（旧baseline＝24pxの数字で高さがずれていた） */
  justify-content: center;
  background: #fff;
  color: var(--c-navy); /* Figma 2523:424（旧：青） */
}
.contact-badge .num {
  color: var(--c-primary); /* 2026-07-31ユーザー指定：青 */
  font-size: 20px; /* 2026-08-12ユーザー指定（バッジ本体16pxに対し数字のみ20px・旧24px） */
  font-weight: 900;
  letter-spacing: -0.28em; /* 全角数字の字間を詰める（2026-07-31にさらに詰め・旧-0.15em） */
  margin-right: 0.28em; /* 末尾詰め分の相殺 */
}
.contact-title {
  font-size: 32px;
  font-weight: 900;
  line-height: 35px; /* Figma 2523:425 */
  color: #fff; /* 2026-08-11：背景ネイビー化に伴い紺→白 */
}

.contact-form-body {
  display: flex;
  flex-direction: column;
  width: 100%;
  text-align: left;
}
.contact-form-card {
  display: flex;
  flex-direction: column;
  gap: 32px; /* 統一 2026-07-31（旧29） */
  padding: 40px 16px;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
}
.form-required-fields {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.form-field {
  display: flex;
  flex-direction: column;
  gap: 4px; /* 統一 2026-07-31（旧6） */
}
.form-field-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px; /* Figma 2523:430（旧20） */
}
.form-field-label-text {
  font-size: 16px;
  font-weight: 700;
  line-height: 24px; /* Figma 2523:432 */
  color: var(--c-navy);
}
.form-field-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 4px; /* Figma 2523:442（旧2/8） */
  border-radius: 3px;
  font-size: 12px; /* Figma（旧10） */
  font-weight: 700;
  letter-spacing: 0;
  line-height: 16px;
  color: #fff;
}
.form-field-badge--required { background: var(--c-coral); }
.form-field-badge--optional { background: var(--c-primary); } /* 2026-07-31ユーザー指定：グレー→青 */
/* アコーディオン見出し（紺地）の中に置く「任意」＝白地に紺字（Figma 2869:74/75） */
.form-field-badge--on-navy { background: #fff; color: var(--c-navy); }

.form-field-input,
.form-field-textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #EAF5FC; /* Figma 2523:435 */
  border-radius: 4px; /* Figma（旧6） */
  background: #F2F5FB;
  font-family: inherit;
  font-size: 16px;
  line-height: 28px; /* 行高統一 2026-07-31（1行=100%／2行以上=175%） */
  color: var(--c-navy);
}
.form-field-input::placeholder,
.form-field-textarea::placeholder { color: var(--c-placeholder); }
.form-field-textarea { min-height: 96px; resize: vertical; }
.form-field.has-error .form-field-input,
.form-field.has-error .form-field-textarea { border-color: var(--c-coral); }
.form-field-error {
  font-size: 12px;
  line-height: 12px; /* 行高統一 2026-07-31（1行=100%／2行以上=175%） */
  font-weight: 700;
  color: var(--c-coral);
}

/* メーカー・タイプのチップ */
.form-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.form-chip {
  padding: 8px 12px; /* 統一 2026-07-31（旧14） */
  border: 1px solid var(--border-field);
  border-radius: 999px;
  background: var(--c-field);
  font-size: 13px;
  line-height: 13px; /* 行高統一 2026-07-31（1行=100%／2行以上=175%） */
  font-weight: 700;
  color: var(--c-navy);
  cursor: pointer;
}
.form-chip.is-selected {
  background: var(--c-primary);
  border-color: var(--c-primary);
  color: #fff;
}

/* 任意アコーディオン（ボタン=青塗り／開くと1枚の角丸カードとして展開・2026-07-16） */
.form-accordion {
  display: flex;
  flex-direction: column;
}
.form-accordion-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  padding: 12px 16px; /* Figma 2523:474（旧10/15） */
  border-radius: 4px; /* Figma（旧8） */
  background: var(--c-primary, #1E7FC2); /* 2026-08-17 Figma 2989:1276 fill＝#1E7FC2（旧：紺） */
  color: #fff;
}
.form-accordion:has(.form-accordion-content.is-open) .form-accordion-toggle {
  border-radius: 4px 4px 0 0;
}
.form-accordion-toggle-label {
  display: inline-flex;
  align-items: center;
  gap: 12px; /* Figma 2523:476 */
  font-size: 16px;
  font-weight: 700;
  line-height: 16px; /* Figma 2523:477 */
}
.form-accordion-toggle-icon {
  font-size: 20px;
  font-weight: 900;
  line-height: 30px; /* Figma 2523:479 */
}
.form-accordion-content {
  display: none;
  flex-direction: column;
  gap: 16px;
  padding: 16px;
  border-radius: 0 0 4px 4px;
  border: 2px solid var(--c-navy);
  border-top: none;
  background: #fff;
}
.form-accordion-content.is-open { display: flex; }
.form-accordion-content .form-field-label-text { color: var(--c-navy); }

/* プライバシーポリシー枠 */
.form-privacy {
  height: 145px;
  max-height: 145px;
  overflow: auto;
  padding: 16px 16px 12px; /* 2026-07-31ユーザー指定：上16px（他は統一時の12/16のまま） */
  border: 2px solid #E5EAF0; /* Figma 2523:480 */
  border-radius: 4px;
  background: #fff; /* Figma（白地・旧#F2F5FB） */
  font-size: 12px;
  line-height: 21.6px; /* Figma 2523:484 */
  color: var(--c-slate);
}
.form-privacy-title {
  font-size: 13px;
  font-weight: 700;
  line-height: 19.5px; /* Figma 2523:482 */
  color: var(--c-slate);
  text-align: center;
  margin-bottom: 12px; /* 2026-07-31ユーザー指定：間隔12px */
}
.form-privacy-text { margin-bottom: 12px; } /* 2026-07-31ユーザー指定：間隔12px */
.form-privacy-section-title { font-weight: 700; }

/* 同意チェック */
.form-consent {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 500;
  line-height: 18px; /* Figma 2523:504 */
  color: var(--c-slate);
  cursor: pointer;
}
.form-consent-checkbox {
  /* Figma 2523:502：白地・#5B6675 1px枠・r2.5
     ※ブラウザ既定のチェックボックスは border-radius が効かないため appearance:none で自前描画 */
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin: 0;
  border: 1px solid var(--c-slate);
  border-radius: 2.5px;
  background: #fff;
  cursor: pointer;
}
.form-consent-checkbox:checked {
  border-color: var(--c-primary);
  background: var(--c-primary);
}
.form-consent-checkbox:checked::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 6px;
  width: 5px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.form-consent-checkbox:focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: 2px;
}
.form-consent.has-error .form-consent-checkbox {
  outline: 2px solid var(--c-coral);
  outline-offset: 2px;
}
.form-consent .form-field-error {
  width: 100%;
  margin-top: 4px;
  text-align: center;
  white-space: nowrap;
}

/* 送信ボタン */
.form-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 20px 0; /* Figma 2523:505（余白は親のgap29で取る） */
  border-radius: 40px;
  background: var(--c-primary); /* Figma 2026-07-29：青（旧緑） */
  box-shadow: var(--shadow-card); /* 2026-08-12：シャドウ統一（旧2px 4px 4px スレート） */
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  line-height: 16px; /* Figma 2523:506 */
}
.form-submit:disabled { opacity: 0.6; }