@charset "UTF-8";

/* ===========================
   お問合せページ専用CSS（contact.css）
   このファイルはお問合せページにのみ適用されます
=========================== */

/* ===========================
   1. ヒーローセクション（紺背景）
   ページ最上部のタイトルエリア
=========================== */
.hero {
  min-height: 30vh;
  background: var(--navy);
  display: flex;
  align-items: center;
  padding: 100px 80px 50px;
  position: relative;
  overflow: hidden;
}
/* 右上の光るグラデーション装飾 */
.hero::before { content: ''; position: absolute; top: -200px; right: -200px; width: 600px; height: 600px; background: radial-gradient(circle, rgba(130,216,208,0.1) 0%, transparent 70%); }
.hero-content { position: relative; z-index: 1; }
/* 英語ラベル */
.hero-label { display: inline-flex; align-items: center; gap: 10px; font-size: var(--font-label); /* ラベルサイズ：rootで一括変更可 */ letter-spacing: 0.2em; color: var(--teal); margin-bottom: 28px; }
.hero-label::before { content: ''; display: block; width: 28px; height: 2px; background: var(--teal); }
/* ページタイトル */
.hero h1 { font-family: 'Shippori Mincho', serif; font-size: clamp(32px, 5vw, 56px); color: var(--white); line-height: 1.5; font-weight: 700; }
/* サブテキスト */
.hero-sub { color: rgba(255,255,255,0.85); font-size: var(--font-card); /* カード説明文サイズ：rootで一括変更可 */ line-height: 2.2; font-weight: 300; margin-top: 16px; }

/* ===========================
   2. お問合せフォームセクション（白背景）
=========================== */
.contact-section { background: var(--white); padding: 96px 80px; }
.contact-inner { max-width: 640px; margin: 0 auto; }

/* ===========================
   Contact Form 7 フォームスタイル
=========================== */
/* ラベル */
.wpcf7-form label { display: block; font-size: var(--font-label); /* ラベルサイズ：rootで一括変更可 */ font-weight: 700; color: var(--navy); margin-bottom: 6px; margin-top: 24px; }
/* テキスト・メール・電話・テキストエリア入力欄 */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form textarea {
  width: 100%;
  padding: 12px 16px;
  font-size: var(--font-card); /* カード説明文サイズ：rootで一括変更可 */
  border: 1.5px solid var(--border);
  border-radius: 8px;
  font-family: 'Noto Sans JP', sans-serif;
  transition: border-color 0.2s;
}
/* フォーカス時にティール枠線 */
.wpcf7-form input:focus,
.wpcf7-form textarea:focus { outline: none; border-color: var(--teal); }
/* テキストエリアの高さ */
.wpcf7-form textarea { min-height: 160px; resize: vertical; }
/* 送信ボタン */
.wpcf7-form input[type="submit"] {
  margin-top: 32px;
  width: 100%;
  background: var(--teal);
  color: var(--navy);
  padding: 16px;
  font-size: var(--font-card); /* カード説明文サイズ：rootで一括変更可 */
  font-weight: 700;
  border: none;
  border-radius: 100px;
  cursor: pointer;
  transition: background 0.2s;
}
/* 送信ボタン：ホバー */
.wpcf7-form input[type="submit"]:hover { background: var(--teal-dark); color: var(--white); }

/* ===========================
   レスポンシブ：タブレット以下（900px以下）
=========================== */
@media (max-width: 900px) {
  .hero { padding: 120px 28px 64px; }
  .contact-section { padding: 64px 28px; }
}

/* reCAPTCHA利用規約テキスト */
.recaptcha-note {
  font-size: 11px;
  color: #999;
  margin-top: 12px;
}