/* ====== contact.html 専用スタイル（共通ヘッダー／フッターは common.css に委譲） ====== */

body {
  font-family: 'Noto Sans JP', sans-serif;
  background-color: #f8f9fa;
  color: #333;
  margin: 0;
}

a { color: #0077cc; text-decoration: none; }
a:hover { text-decoration: underline; }

/* コンテナ */
.form-container {
  max-width: 720px;
  margin: 40px auto 60px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(0,0,0,.1);
  padding: 40px 28px;
}
@media (max-width: 600px){ .form-container { padding: 28px 18px; } }

/* 見出し */
.form-container h2 {
  font-size: 1.8em; margin: 0 0 20px; color: #2c3e50;
  border-bottom: 2px solid #ccc; text-align: center; padding-bottom: 10px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
@media (max-width: 600px){ .form-container h2 { font-size: 1.4em; } }

/* ステップインジケーター */
.step-indicator { display:flex; justify-content:center; gap:12px; margin-bottom:24px; flex-wrap:wrap; }
.step-indicator .step {
  padding: 10px 20px; border-radius: 999px; background: #e0e0e0; color: #333;
  font-weight: 700; font-size: .9rem; transition: .3s;
}
.step-indicator .step.current { background: #1a73e8; color: #fff; }

/* フォーム */
.form-group, fieldset { margin-bottom: 18px; }
label, legend { font-weight:700; display:block; margin-bottom:8px; }
input[type="text"], input[type="email"], input[type="tel"], input[type="date"], input[type="number"], select, textarea {
  width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 6px; box-sizing: border-box;
}
textarea { resize: vertical; }
.zip-row { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.form-dates label { display:inline-block; margin-right:10px; }

/* チェックボックス */
input[type="checkbox"] { margin-right: 6px; transform: scale(1.05); }

/* ボタン */
.form-buttons { text-align:center; margin-top:16px; }
button { background:#1a73e8; color:#fff; padding:12px 32px; font-size:1rem; border:none; border-radius:6px; cursor:pointer; }
button:hover { background:#155ec2; }

/* バリデーション */
.error-text { color:#c62828; font-size:.9rem; margin-top:6px; display:none; }
.is-invalid { border-color:#c62828 !important; }

/* アクセシビリティ用 */
.sr-only { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* 「その他の施設名」初期は非表示（JSで制御） */
#hotel-other-group { display: none; }

/* 連絡オプション枠 */
.contact-options {
  background: #eef3f8;
  padding: 1rem;
  border-left: 4px solid #0077cc;
  margin: 1rem 0 2rem;
  font-size: 0.95rem;
}

/* ロゴ（共通ヘッダーの画像自体のサイズ補助。common.cssの.site-logoと同じ値） */
.site-logo { max-width: 260px; height: auto; }

/* --- 郵便番号：ハイフンを挟んで横並びに --- */
.zip-row {
  display: flex;
  align-items: center;
  gap: 6px;             /* 入力枠とハイフンの間隔 */
  flex-wrap: nowrap;    /* できるだけ折り返さない */
}
.zip-row input {
  width: auto;          /* デフォルトの100%を打ち消す */
}
#zip1 { width: 6ch; }   /* 3桁想定（少し余裕） */
#zip2 { width: 8ch; }   /* 4桁想定（少し余裕） */

/* --- ご利用人数：入力枠を小さくして「人」をすぐ右に --- */
#people {
  width: 8ch;           /* 100桁じゃなく“2〜3桁”程度の実用的な幅に */
  display: inline-block;/* テキスト（人）と同じ行に並ぶように */
  vertical-align: baseline;
}
/* ラベルと入力が離れすぎるのを少し詰める（任意） */
label[for="people"] { margin-bottom: 6px; }

/* --- 宿泊施設名セレクトの幅を常識的なサイズに --- */
#hotel {
  width: auto;           /* デフォルトの100%を解除 */
  min-width: 220px;      /* 最低限の幅を確保 */
  max-width: 100%;       /* スマホでは画面に収まるように */
}

/* --- 利用開始日・終了日の入力幅調整 --- */
#start_date,
#end_date {
  width: auto;
  min-width: 160px;      /* カレンダーが見やすい程度の幅 */
  max-width: 100%;
}

/* --- 日付2つを横並びにするレイアウト改善 --- */
.form-dates {
  display: flex;
  flex-wrap: wrap;       /* 狭い画面では折り返す */
  gap: 10px 20px;        /* 縦横の間隔 */
  align-items: center;
}
/* contact-style.css に追加 */
input.error, select.error, textarea.error {
  border: 2px solid red;
  background-color: #fff5f5;
}
.error-text {
  color: red;
  font-size: 0.85em;
  margin-top: 4px;
}
.form-group input[type="checkbox"] {
  margin-right: 6px;
}
.form-group a {
  color: #1a73e8;
  text-decoration: underline;
}