/* ===================================================
   contact.css
   テーマ: gala
   お問い合わせページ専用スタイル
=================================================== */

/* ============================================
   CONTACT リード文
============================================ */
.contact-page__lead {
  text-align: center;
  line-height: 1.8;
  margin-bottom: clamp(3.2rem, calc(48 / 1440 * 100vw), 4.8rem);
}

/* ============================================
   CONTACT フォームラッパー
============================================ */
.contact-page__form {
  background: #F7F9FC;
  border-radius: 1.6rem;
  padding: clamp(3.2rem, calc(48 / 1440 * 100vw), 4.8rem) clamp(2.4rem, calc(64 / 1440 * 100vw), 6.4rem);
}

/* ============================================
   dl/dt/dd レイアウト（PC: 横並び）
============================================ */
.form_wrapper {
  display: grid;
  grid-template-columns: 28% 72%;
  align-items: start;
  gap: 2.4rem 0;
}
.form_wrapper dt {
  padding-top: 1.2rem;
  font-weight: 600;
  font-size: 1.5rem;
  line-height: 1.5;
}
.form_wrapper dd {
  /* grid 2列目に自動配置 */
}
.form_wrapper-btn {
  text-align: center;
  margin-top: 4rem;
}
.form_wrapper-btn .btn {
  min-width: 24rem;
}

/* ============================================
   CF7 入力フィールド
============================================ */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form textarea,
.wpcf7-form select {
  width: 100%;
  padding: 1.2rem 1.6rem;
  border: 1px solid var(--color_gray);
  border-radius: 0.8rem;
  background: #fff;
  font-size: 1.6rem;
  font-family: var(--font_jp);
  transition: border-color 0.2s ease;
}
.wpcf7-form input[type="text"]:focus,
.wpcf7-form input[type="email"]:focus,
.wpcf7-form input[type="tel"]:focus,
.wpcf7-form textarea:focus,
.wpcf7-form select:focus {
  outline: none;
  border-color: var(--color_main);
}
.wpcf7-form textarea {
  min-height: 20rem;
  resize: vertical;
}
.wpcf7-form .btn {
  max-width: min(100%, 30rem);
  margin: 0 auto;
}

/* バリデーション */
.wpcf7-not-valid-tip {
  color: #e84c4c;
  font-size: 1.2rem;
  margin-top: 0.4rem;
}
.wpcf7-response-output {
  padding: 1.2rem 1.6rem;
  border-radius: 0.8rem;
  font-size: 1.4rem;
  margin-top: 2.4rem;
}

/* ============================================
   SP レスポンシブ（〜768px）
============================================ */
@media (max-width: 768px) {
  .contact-page__form {
    border-radius: 1.2rem;
  }
  /* dl/dt/dd を縦積みに変更 */
  .form_wrapper {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .form_wrapper dt {
    padding-top: 0;
    margin-top: 2rem;
  }
  .form_wrapper dt:first-child {
    margin-top: 0;
  }
  .form_wrapper dd {
    margin-top: 0.6rem;
  }
  /* 送信ボタン：横幅いっぱい */
  .form_wrapper-btn .btn {
    width: 100%;
    padding: 1.6rem;
  }
}