/* ============================================================
   お問い合わせ（contact/index.html）・お問い合わせ完了（contact/thanks/index.html）専用
   Figma デザインなし → 会社情報ページ（page-hero 縮小版・白カード）に合わせて作成
   フォーム部品は css/form.css
   ============================================================ */

/* ---------- page hero（会社情報と同じ縮小版：高さ461） ---------- */

/* ---------- 本文エリア ---------- */
.contact { padding: 40px var(--gutter) 150px; }
.contact__inner { max-width: 880px; margin: 0 auto; display: flex; flex-direction: column; gap: 40px; }
.contact__intro { font-size: var(--fs-body); color: var(--darktext); }

/* 白カード（フォーム・完了メッセージの器） */
.contact-card {
  background: #fff;
  border-radius: var(--radius-card);
  padding: 64px 80px;
}

/* ---------- 完了ページ ---------- */
.thanks-card { display: flex; flex-direction: column; align-items: center; gap: 32px; text-align: center; }
.thanks-card__title { font-size: var(--fs-h3); font-weight: 700; line-height: var(--lh); color: var(--darktext); }
.thanks-card__body { display: flex; flex-direction: column; gap: 20px; max-width: 640px; text-align: left; font-size: var(--fs-body); color: var(--darktext); }
.thanks-card__body p:first-child { text-align: center; }

@media (max-width: 1100px) {
  .contact-card { padding: 56px 48px; }
}
@media (max-width: 767px) {
  .contact { padding: 24px var(--gutter) 80px; }
  .contact__inner { gap: 24px; }
  .contact__intro { font-size: 14px; line-height: var(--lh-tight); }
  .contact-card { padding: 32px 16px; }
  .thanks-card { gap: 24px; }
  .thanks-card__title { font-size: 18px; }
  .thanks-card__body { gap: 16px; font-size: 14px; line-height: var(--lh-tight); }
  .thanks-card__body p:first-child { text-align: left; }
}