/* ====== Contact form compatibility bridge (load LAST) ====== */

/* 祖先 .contact-section と .contact-form-section の両対応（OR指定） */
.contact-form-section .contact-form .field,
.contact-section .contact-form .field { margin-bottom: 1rem; }

/* 2カラム行（優先度を上げて上書き確実に） */
.contact-form-section .contact-form .two-col,
.contact-section .contact-form .two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(12px, 2.4vw, 20px);
}

/* 入力UIの基本（他CSSの汎用指定を打ち消す） */
.contact-form-section .contact-form input[type="text"],
.contact-form-section .contact-form input[type="email"],
.contact-form-section .contact-form input[type="tel"],
.contact-form-section .contact-form select,
.contact-form-section .contact-form textarea,
.contact-section .contact-form input[type="text"],
.contact-section .contact-form input[type="email"],
.contact-section .contact-form input[type="tel"],
.contact-section .contact-form select,
.contact-section .contact-form textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 0.75rem 0.9rem;
  border: 1px solid #dfe4f1;
  border-radius: 8px;
  font-size: 16px;
  line-height: 1.6;
  background-color: #fff;
}

/* ラベル */
.contact-form-section .contact-form .label,
.contact-section .contact-form .label {
  display: inline-block;
  font-weight: 700;
  margin-bottom: 0.4rem;
}

/* 必須バッジ */
.contact-form-section .contact-form .req,
.contact-section .contact-form .req {
  display: inline-block;
  margin-left: 0.4rem;
  font-size: 0.85em;
  color: #fff;
  background: #e53935;
  border-radius: 4px;
  padding: 0.1rem 0.4rem;
}

/* チェックボックス行など */
.contact-form-section .contact-form .checkbox,
.contact-section .contact-form .checkbox { display: inline-flex; align-items: center; gap: .45rem; }

/* 送信ボタンまわり */
.contact-form-section .contact-form .actions,
.contact-section .contact-form .actions { margin-top: 1.25rem; text-align: center; }

.contact-form-section .contact-form .btn-primary,
.contact-section .contact-form .btn-primary {
  display: inline-block;
  padding: 0.9rem 2.2rem;
  font-weight: 800;
  border-radius: 999px;
  border: none;
  background: #0a62c7;
  color: #fff;
  cursor: pointer;
  transition: background .2s ease;
}
.contact-form-section .contact-form .btn-primary:hover,
.contact-section .contact-form .btn-primary:hover { background: #0e6be0; }

/* スマホ時は1カラムに */
@media (max-width: 768px) {
  .contact-form-section .contact-form .two-col,
  .contact-section .contact-form .two-col { grid-template-columns: 1fr; }
}

/* ハニーポット（画面外へ） */
.contact-form-section .contact-form .hp,
.contact-section .contact-form .hp {
  position: absolute !important;
  left: -10000px !important;
  width: 1px; height: 1px; overflow: hidden;
}

/* 送信ボタン下の余白を調整 */
.contact-form-section .contact-form .submit-note,
.contact-section .contact-form .submit-note {
  display: block;
  margin-top: 0.6rem;  /* ← ここで距離を調整（0.6〜1remくらいが自然） */
  font-size: 0.9rem;
  color: #555;
}