@charset "UTF-8";

/* =========================================================
   contact.css
   ---------------------------------------------------------
   【役割】
   お問い合わせページ（contact.php）専用スタイル。
   フォーム入力・エラーメッセージ・完了画面を
   シンプルで分かりやすく表示することを目的とする。
   ---------------------------------------------------------
   【設計方針】
   - container 幅をやや細くして「読む・書く」に集中
   - 見た目は card / field の共通設計に寄せる
   - JS での表示切替（is-hidden）を前提にした構造
   ========================================================= */


/* ===============================
   ページ全体
   =============================== */

/* お問い合わせページ専用の最大幅調整
   → 通常の container（1100px）より狭くして
      フォーム操作に集中できるようにする */
.contact {
  max-width: 760px;
  margin: 24px auto;
}

.contact h1 {
  margin: 12px 0;
}


/* ===============================
   フォーム項目（field）
   =============================== */

/* label + input を縦に並べるため grid を使用 */
.field {
  display: grid;
  gap: 6px;
  margin-bottom: 12px;
}

/* 入力系パーツの共通見た目 */
.field input,
.field select,
.field textarea {
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
}

/* textarea は文章入力前提なので高さを確保 */
.field textarea {
  min-height: 140px;
}


/* ===============================
   規約同意（チェックボックス）
   =============================== */

/* チェックボックスだけ横並びにしたいので inline-flex */
.field.agree label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}


/* ===============================
   エラー・補足表示
   =============================== */

/* 入力エラー表示（JS制御） */
.error {
  color: #b42318;   /* アクセントカラーより強めの警告色 */
  font-size: 12px;
  margin-top: 8px;
}

/* 補足テキスト（デモ注記など） */
.note {
  color: var(--muted);
  font-size: 12px;
  margin-top: 8px;
}


/* ===============================
   完了画面（Thanks）
   =============================== */

/* 送信完了時に表示されるブロック */
.thanks {
  text-align: center;
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
}


/* ===============================
   表示切替用ユーティリティ
   =============================== */

/* JS から付け外しする前提のクラス
   !important を付けて確実に隠す */
.is-hidden {
  display: none !important;
}


/* ===============================
   ボタン配置の微調整
   =============================== */

/* 共通 .cta-row を拡張して中央寄せにする
   → 完了画面のボタン用 */
.cta-row.center {
  justify-content: center;
  margin-top: 8px;
}

/* ==============================
   お問い合わせ前のFAQ案内
   ============================== */

.notice {
  background: #f6f9f5;          /* ランドネ風のやさしい薄緑 */
  border-left: 4px solid #6b8f71;
}

.notice__title {
  font-size: 1rem;
  margin-bottom: 0.4em;
  color: #2f4f3a;
}

.notice__text {
  font-size: 0.95rem;
  line-height: 1.7;
  color: #333;
}

/* FAQリンクを「ボタン風・強調表示」に */
.notice__text a {
  display: inline-block;
  margin: 0 0.2em;
  padding: 0.1em 0.5em;
  border-radius: 999px;
  background: #e3efe6;
  color: #2f4f3a;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid #cfe1d4;
  transition: background 0.2s ease, transform 0.1s ease;
}

.notice__text a:hover {
  background: #d6e7db;
  transform: translateY(-1px);
}