/* ----------------------------
   ステップカード
---------------------------- */
.reservation-step {
  background-color: #fff;
  border: 1px solid #dce8f2;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  margin-bottom: 24px;
  padding: 24px;
}

.reservation-step h3 {
  position: relative;
  font-size: 1.2rem;
  margin: 0 0 16px;
  padding-left: 12px;
  line-height: 1.4;
  border-left: 4px solid #51a4e6;
}

/* ----------------------------
   フォーム要素
---------------------------- */
.form-group,
.date-group {
  margin-bottom: 20px;
}

.form-group label,
.date-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
}

/* スタンダードなテキスト／セレクト */
select,
input[type="text"],
input[type="tel"],
input[type="email"],
textarea {
  width: 100%;
  padding: 12px 14px;
  font-size: 0.95rem;
  border: 1px solid #cbdcfc;
  border-radius: 6px;
  background: #fff;
  box-sizing: border-box;
  transition: border-color .2s, box-shadow .2s;
}

select:hover,
input:hover,
textarea:hover {
  border-color: #51a4e6;
}

textarea {
  resize: vertical;
  min-height: 100px;
}

/* ----------------------------
   エリア選択
---------------------------- */
/* 全体の縦並び */
.area-button-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* 各アイテムを縦レイアウト */
.area-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* ボタン行 */
.area-row {
  display: flex;
  align-items: center;
  border: 1px solid #cbdcfc;
  border-radius: 6px;
  background: #f5f9ff;
  transition: background .2s, border-color .2s, color .2s;
}

/* 選択時 */
.area-item.selected .area-row {
  background: #51a4e6;
  border-color: #51a4e6;
  color: #fff;
}

/* エリア選択用メインボタン */
.area-button {
  flex: 1;
  padding: 14px;
  border: none;
  background: transparent;
  text-align: left;
  font-size: 1rem;
  cursor: pointer;
  color: inherit;
}

/* 詳細ボタン */
.area-details-button {
  margin-right: 12px;
  padding: 8px 12px;
  background: transparent;
  border: 1px solid currentColor;
  border-radius: 4px;
  cursor: pointer;
  color: inherit;
}

/* ホバー時だけ色変化 */
.area-row:hover {
  background: #e3f0fe;
}

/* 展開される市区町村リスト */
.area-details-list {
  display: none;
  padding: 12px;
  background: #eef7fc;
  border-radius: 6px;
}

/* タグ状の市区町村 */
.area-details-list .area-tag {
  display: inline-block;
  margin: 4px 6px 0 0;
  padding: 6px 10px;
  background: #fff;
  border: 1px solid #cbdcfc;
  border-radius: 4px;
  font-size: 0.9rem;
}



/* ----------------------------
   カレンダー＆時間帯選択
---------------------------- */
.calendar-box {
  margin-top: 12px;
  padding: 16px;
  background: #fafcff;
  border: 1px solid #cbdcfc;
  border-radius: 6px;
}

.time-slot-group {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 16px;
}

.time-slot-group label {
  flex: 1 1 120px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid #cbdcfc;
  border-radius: 6px;
  cursor: pointer;
  transition: background .2s, border-color .2s;
}

.time-slot-group label:hover {
  background: #eef6ff;
  border-color: #51a4e6;
}

.time-slot-group input[type="radio"] {
  margin: 0;
}

/* 選択中 */
.time-slot-group input[type="radio"]:checked + span,
.time-slot-group input[type="radio"]:checked + * {
  font-weight: 600;
  color: #51a4e6;
}

/* disabled */
.disabled-label {
  opacity: 0.5;
  pointer-events: none;
}

/* カレンダーセルのドット・バツ */
.fc-day-dot {
  position: absolute;
  bottom: 4px;
  right: 4px;
  font-size: 0.8rem;
  color: #51a4e6;
}
.fc-day-x {
  position: absolute;
  bottom: 4px;
  right: 4px;
  font-size: 0.8rem;
  color: #d9534f;
}
/* 無効化セル */
.fc-day-disabled {
  color: #ccc !important;
  pointer-events: none;
}


/* ----------------------------
   画像プレビュー
---------------------------- */
.image-preview {
  margin-top: 12px;
}

.image-preview img {
  max-width: 100%;
  border-radius: 6px;
  border: 1px solid #ddd;
}

/* ----------------------------
   確認ボタン
---------------------------- */
.confirm-button {
  display: block;
  width: 100%;
  padding: 14px 0;
  margin-top: 32px;
  font-size: 1.05rem;
  text-align: center;
  color: #fff;
  background: #0073aa;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background .2s;
}

.confirm-button:hover {
  background: #005177;
}

/* 必須マークを赤くする */
.required {
  color: #d00;           /* 赤色 */
  margin-left: 0.2em;     /* ラベルとの間隔 */
  font-weight: normal;    /* アスタリスクだけ強調しすぎない */
}

/* ----------------------------
   モバイル対応
---------------------------- */
@media (max-width: 600px) {
  .reservation-container {
    padding: 0 12px;
  }
  .time-slot-group {
    flex-direction: column;
  }
  .time-slot-group {
    display: flex;
    flex-direction: column;
    gap: 8px;               /* ラベル間の隙間を少し狭く */
  }

  .time-slot-group label {
    flex: none;             /* 横幅いっぱいに広がりすぎないように */
    padding: 6px 10px;      /* 縦パディングを小さく */
    font-size: 0.9rem;      /* 少し文字も小さく */
  }

  /* 必要であれば、文字とラジオの間隔も調整 */
  .time-slot-group label > input[type="radio"] + * {
    margin-left: 6px;
  }
}

.menu-group { margin-bottom: 1rem; }
.menu-group-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:.5rem; }
.menu-row { display:flex; gap:.5rem; align-items:center; margin:.4rem 0; }
.menu-row .menu-remove-btn { border:none; background:#eee; width:2rem; height:2rem; border-radius:.5rem; cursor:pointer; }
.menu-row .menu-remove-btn:hover { background:#e5e7eb; }
.menu-add-btn { border:none; background:#f3f4f6; padding:.35rem .6rem; border-radius:.5rem; cursor:pointer; }
.menu-add-btn:hover { background:#e5e7eb; }




/* メニュー */
.discount-note { color:#b42318; font-size:.9rem; margin:.5rem 0 1rem; }
.over-six-callout {
  border:1px solid #fecaca; background:#fff1f2; color:#7f1d1d;
  border-radius:8px; padding:.75rem .9rem; margin:.5rem 0 1rem;
}
.over-six-callout .tel a { font-weight:700; color:#7f1d1d; text-decoration: underline; }
.total-note { color:#7f1d1d; display:block; margin-top:.25rem; }

.discount-note .tel-link {
  color: inherit;
  text-decoration: underline;
}
.discount-note .tel-link:hover {
  text-decoration: none;
}

/* ==== 読み物系（規約・ポリシー）を薄グレー枠で ==== */
.policy-textarea {
  background: #f8fafc;
  color: #4b5563;            /* 落ち着いたグレー */
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  line-height: 1.7;
  font-size: .92rem;
  padding: 12px 14px;
}
textarea[readonly].policy-textarea { cursor: default; }

/* ==== セレクトのデフォルト値（プレースホルダ）を薄グレーで ==== */
/* value="" で required な select の初期表示を薄グレー */
select { color: #111; }
select:required:invalid { color: #9ca3af; }     /* 初期（未選択） */
option[value=""] { color: #9ca3af; }            /* ドロップ時の表示も薄グレー */
/* iOS などの見た目差分を少しでも吸収 */
select::-ms-value { color: #111; }

/* 入力系の placeholder を薄グレーで統一（テキスト/メール等） */
input::placeholder,
textarea::placeholder { color: #9ca3af; }

/* 駐車場注意（メニューの注意と同じトーン） */
.parking-note { margin-top: .35rem; }

/* ---- optional セレクトのプレースホルダを薄グレーで表示 ---- */
select.placeholder-gray.is-empty { color:#9ca3af; }               /* 初期/未選択 */
select.placeholder-gray option { color:#111; }                     /* 開いた時は通常色 */
select.placeholder-gray option[value=""] { color:#9ca3af; }        /* 一覧の先頭も薄グレー */

/* ---- 合計金額 0 のとき薄グレー ---- */
#total_price.muted { color:#9ca3af; }

/* select のプレースホルダを薄グレーに */
select.placeholder-gray { color: #111; }
/* :has 対応ブラウザ: value="" が選択中の時に薄グレー */
select.placeholder-gray:has(option:checked[value=""]) { color: #9ca3af; }

/* 合計金額 0 の時は薄グレー（JSで .muted を付け外し） */
#total_price { color: #333; }   /* 通常色 */
#total_price.muted { color: #9ca3af; }  /* 0 の時だけ薄グレー */






/* ステップ1にスクロールした際の上部余白（ヘッダー分） */
#step1-area { scroll-margin-top: 80px; }

/* スクロール誘導時の軽いハイライト */
.area-jump-highlight {
  outline: 2px solid #60a5fa;
  outline-offset: 4px;
  animation: rmPulse 1.2s ease 1;
}
@keyframes rmPulse {
  0% { outline-color: rgba(96,165,250,1); }
  100% { outline-color: rgba(96,165,250,0); }
}



/* エアコン写真 */
.photo-group .photo-row{display:flex;gap:.75rem;align-items:flex-start;margin:.4rem 0;}
.photo-col{flex:1;min-width:0;}
.photo-label{display:block;margin-bottom:.35rem;font-weight:600;}
.photo-remove{border:none;background:#eee;width:2rem;height:2rem;border-radius:.5rem;cursor:pointer;align-self:flex-start;}
.photo-remove:hover{background:#e5e7eb;}




/* 対応詳細エリア */
/* 横並びで自動折り返し */
.rm-city-list{
  display:flex;
  flex-wrap:wrap;
  gap:10px 12px;
  padding:0;
  margin:.5rem 0 0;
  list-style:none;
}
/* ピル型 */
.rm-city-pill{
  display:inline-block;
  padding:8px 14px;
  border:1px solid #d7dde5;
  background:#fff;
  border-radius:9999px;
  font-size:14px;
  line-height:1;
  white-space:nowrap;
  user-select:none;
}
/* 詳細ボタンのON状態（任意） */
.area-details-button.active{
  border-color:#3b82f6;
  color:#fff;
  background:#3b82f6;
}


/* ============================
   Step1 地域・エリア（整理版）
   ============================ */

/* 地方(親)の見出しボタン */
.region-button{
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid #cbdcfc;
  border-radius: 10px;
  background: #eaf2ff;
  color: #0f2b66;
  font-weight: 700;
  cursor: pointer;
  outline: none;
}
.region-button:hover{ background:#e1ecff; }
.region-button:focus{ outline:none; box-shadow:none; }

/* ＋/− の幅を固定して"小さくなる"ブレを防止 */
.region-caret{
  display:inline-block;
  width: 1.4em;
  text-align:center;
  font-weight:700;
}

/* 地方の中身(エリアリスト) */
.region-areas{ display:none; padding: 10px 0 0; }

/* --- エリア行（1本の枠だけに統一） --- */
.region-areas .area-item{ margin-top: 0px; }  /* 余白のみ */
.region-areas .area-item .area-row{
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: nowrap;

  border: 1px solid #cbdcfc;
  border-radius: 10px;
  background: #f5f9ff;
}

/* 選択中の見た目は行(=.area-row)だけに適用 */
.region-areas .area-item.selected .area-row{
  border-color: #0e8ae6;
  background: #0e8ae6;
  color: #fff;
}

/* エリア名ボタン（右端に「選択／選択中」を出す） */
.region-areas .area-item .area-button{
  flex: 1 1 auto;
  min-width: 0;
  padding: 14px 76px 14px 14px;  /* 右の表示分の余白を確保 */
  border: none;
  background: transparent;
  text-align: left;
  font-size: 1rem;
  color: inherit;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  position: relative;
  z-index: 1;                   /* 詳細ボタンより低くてもOKだが安全に */
}

/* 擬似要素はクリックを邪魔しない */
.region-areas .area-item .area-button::after{
  content: '選択';
  position: absolute;
  right: 12px; top: 50%;
  transform: translateY(-50%);
  font-size: .9rem;
  opacity: .6;
  color: #1f4bb3;
  pointer-events: none;
}
.region-areas .area-item.selected .area-button::after{
  content: '選択中';
  color: #fff;
  opacity: 1;
}

/* 対応エリア詳細ボタン：常に押せる＆白背景固定・1行固定 */
.region-areas .area-item .area-details-button{
  position: relative;
  z-index: 2;                   /* ← 前面 */
  flex: 0 0 auto;
  white-space: nowrap;

  padding: 8px 12px;
  background: #fff;
  border: 1px solid #cbdcfc;
  border-radius: 8px;
  color: #1f2a44;
  cursor: pointer;
}
.region-areas .area-item .area-details-button:hover{
  background:#f7faff;
}
.region-areas .area-item.selected .area-details-button{
  background:#fff;
  color: #0e8ae6;               /* 行が青でも読みやすく */
  border-color:#fff;            /* 行背景と馴染ませる */
}

/* 市区町村リスト */
.area-details-list{
  display:none;
  padding:12px;
  margin-top:8px;
  background:#eef7fc;
  border-radius:8px;
}

/* ピル型タグ */
.area-details-list .area-tag{
  display:inline-block;
  margin:4px 6px 0 0;
  padding:6px 10px;
  background:#fff;
  border:1px solid #cbdcfc;
  border-radius:9999px;
  font-size:.9rem;
}

/* スマホ微調整 */
@media (max-width: 480px){
  .region-areas .area-item .area-button{ padding-right: 72px; }
  .region-areas .area-item .area-details-button{ padding:7px 10px; font-size:.9rem; }
}

/* --- 予約ページのタイトルとリード文をそろえる --- */

/* 見出し：上下を詰め、左をステップと揃える */
.reservation-container > h2 {
  margin: 6px 0 6px;     /* 上下の隙間を控えめに */
  padding-left: 24px;     /* ステップ見出し(青バー)と同じ開始位置 */
  line-height: 1.35;
}

/* 直下のリード文：左位置を揃え、タイポを少し整える */
.reservation-container > p:first-of-type {
  margin: 0 0 12px;       /* 上は0でh2との間をキュッと */
  padding-left: 24px;     /* ステップと同じラインに */
  color: #4b5563;         /* 少し落ち着いた色 */
  font-size: .95rem;      /* 少しだけ控えめ */
  line-height: 1.7;       /* 読みやすい行間 */
}

/* 予約ページ：コンテナの上余白を詰める（style.css の 40px を上書き） */
.reservation-container {
  margin: 24px auto 32px;  /* 上16px・左右auto・下32px。お好みで数値調整OK */
}

/* モバイルはさらに少し詰める */
@media (max-width: 600px) {
  .reservation-container {
    margin-top: 18px;
    margin-bottom: 24px;
  }
}

/* 対応市区町村ピルをコンパクト化 */
.area-details-list{
  padding: 10px;                  /* ボックス自体も少しタイトに */
}

.rm-city-list{
  gap: 8px 8px;                   /* 余白を狭く */
}

.rm-city-pill{
  padding: 6px 10px;              /* パディング縮小（縦も横も） */
  font-size: 13px;                /* 文字を少し小さく */
  line-height: 1.2;               /* 行間を詰める */
  border-radius: 9999px;          /* 角丸はそのまま */
  font-feature-settings: "palt";  /* 和文のプロポーショナル詰め（横幅が少し締まる） */
}

/* さらに狭い端末ではもう一段階だけ詰める（任意） */
@media (max-width: 480px){
  .rm-city-list{ gap: 6px 6px; }
  .rm-city-pill{
    padding: 5px 8px;
    font-size: 12px;
  }
}