@charset "UTF-8";

/* =============== 基本設定 / 変数 =============== */
:root {
  --field-h: 48px;     /* セレクト & 人数ボタン高さ */
  --label-gap: 10px;   /* ラベルとコントロールの間隔 */
}

html { scrollbar-gutter: stable both-edges; }

body {
  min-height: 100%;
  overflow-y: scroll;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  border-width: 0;
  display: flow-root;
}

/* =============== レイアウト =============== */
.search-container {
  border: 1px solid #ccc;
  max-width: 1107px;
  margin: 20px auto !important;
}
.search-header {
  background: #594533;
  color: #fff;
  font-size: 1.2rem;
  margin: 0;
  padding: 10px 30px;
}
#searchForm { width: 70% !important; }
.search-body {
  display: flex;
  background: #fff;
  padding: 20px 20px 10px;
}
.search-row {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 15px;
}
.search-row label {
  font-size: 16px;
  font-weight: bold;
  white-space: nowrap;
}

/* =============== 日付入力 =============== */
.date-wrapper { position: relative; width: 200px; }
.date-input {
  width: 100%;
  padding: 12px 32px 12px 12px;
  font-size: 1.1rem;
  border: 1px solid #3e3e3e;
  border-radius: 6px;
  background: #f8f8f8;
  cursor: pointer;
  box-sizing: border-box;
}
.fa-calendar {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  color: #e64747;
  pointer-events: none;
}
.range-input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

/* =============== 検索ボタン =============== */
.search-btn {
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
  padding: 16px 36px;
  font-size: 18px;
  border-radius: 4px;
  background: #ff8600;
  width: 250px;
  height: 56px;
  line-height: 1;
  text-align: center;
  cursor: pointer;
  box-sizing: border-box;
  border: 1px solid #ff8600;
}
.search-btn:hover {
  background-color: rgba(252, 217, 164, 1);
  color: #000;
  border-color: rgba(252, 217, 164, 1);
}

/* =============== 任意ビジュアル（既存） =============== */
.fv-img { width: 1108px; height: auto; margin: 20px auto; }
.bestrate-sp { width: 920px; margin: 0 auto 20px; }
.bestrate-sp img, .fv-img img { width: 100%; height: auto; }

/* =============== こだわり/部屋タイプ =============== */
.checkbox-block { margin-top: 20px; width: 100%; }
.checkbox-block > strong {
  display: block; font-size: 1rem; font-weight: bold; margin-bottom: 10px;
}
details { width: 100%; }
details summary { cursor: pointer; font-size: 1rem; font-weight: bold; margin-bottom: 10px; }
input[type="checkbox"]{
  margin: 0 5px 0 0; vertical-align: middle; width: 14px; height: 14px;
  transform: scale(1.3); transform-origin: center;
}
.checkbox-group, .roomtype-group {
  display: flex; flex-wrap: wrap; column-gap: 20px; row-gap: 14px; margin: 0 0 10px 0;
}
.checkbox-group label, .roomtype-group label {
  display: inline-flex; align-items: flex-start; gap: 6px; line-height: 1.4; margin: 0; white-space: normal;
}

/* =============== 「日付を指定しない」行 =============== */
.search-row.no-date { align-items: flex-start; gap: 6px; }
.search-row.no-date input[type="checkbox"] { margin-top: .2em; }
.search-row.no-date label {
  font-size: 1rem; font-weight: normal; white-space: normal; line-height: 1.4;
}

/* =============== 無効見た目 =============== */
.disabled { opacity: .5; }
.disabled-label { color: #888; }
.date-wrapper.disabled { pointer-events: none; }

/* =============== 右メニュー =============== */
.yoyaku-menu { width: 30% !important; text-align: right; padding: 0; margin: 0; }
.d-reserve-link { list-style: none; margin: 0; padding: 0 0 0 30px; }
.d-reserve-link li a {
  display: block; background: #eee; color: #321d09; text-align: center; text-decoration: none;
  border-radius: 3px; margin-bottom: 15px; padding: 10px 0;
}
.d-reserve-link li:last-child { margin-bottom: 0; }
.d-reserve-link li a:hover { background-color: rgba(252,217,164,1); color: #000; }
.divider { height: 1px; background: #e0e0e0; border: none; margin: 24px 0; width: 100%; list-style: none; }

/* =========================================================
   Flatpickr テーマ（レンジ）
   ========================================================= */

/* 基本の選択配色（祝日以外） */
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected {
  background: #ff8600 !important;
  border-color: #ff8600 !important;
  color: #fff !important;
  box-shadow: none !important;
}
.flatpickr-day.inRange {
  background: #ffe5c4 !important;
  color: #321d09 !important;
  border-color: #ffe5c4 !important;
  box-shadow: none !important;
}
.flatpickr-day.startRange:not(.endRange) {
  border-top-left-radius: 999px !important;
  border-bottom-left-radius: 999px !important;
}
.flatpickr-day.endRange:not(.startRange) {
  border-top-right-radius: 999px !important;
  border-bottom-right-radius: 999px !important;
}
.flatpickr-day.startRange:after,
.flatpickr-day.endRange:before,
.flatpickr-day.endRange:after,
.flatpickr-day.startRange:before {
  display: none !important;
  content: none !important;
}

/* ---- 土日祝の色付け（通常表示） ---- */
.flatpickr-day.saturday { color: #1e88e5 !important; } /* 土：青 */
.flatpickr-day.sunday  { color: #e53935 !important; } /* 日：赤 */

/* 祝日（通常表示）：淡ピンク地＋赤字＋丸 */
.flatpickr-day.holiday {
  background: #fde8ef !important;
  color: #d60045 !important;
  font-weight: 700;
  border-radius: 50% !important;
  box-shadow: none !important;
}
/* レンジ内の祝日：背景が乗るため字色だけ補強 */
.flatpickr-day.inRange.holiday { color: #c2185b !important; }

/* 始点（左半円）。selected が併存してもこちらを適用 */
.flatpickr-day.holiday.startRange:not(.endRange),
.flatpickr-day.holiday.startRange.selected:not(.endRange) {
  background: #d60045 !important;
  color: #fff !important;
  border-radius: 999px 0 0 999px !important;
  box-shadow: none !important;
}

/* 終点（右半円）。selected が併存してもこちらを適用 */
.flatpickr-day.holiday.endRange:not(.startRange),
.flatpickr-day.holiday.endRange.selected:not(.startRange) {
  background: #d60045 !important;
  color: #fff !important;
  border-radius: 0 999px 999px 0 !important;
  box-shadow: none !important;
}

/* 同一日の場合だけ全丸（startRange + endRange） */
.flatpickr-day.holiday.startRange.endRange,
.flatpickr-day.holiday.startRange.endRange.selected {
  background: #d60045 !important;
  color: #fff !important;
  border-radius: 999px !important;
}
/* ---- ★土日が始点/終点/単独選択のときは白文字（新規） ----
   ※上の週末基本色を上書きするため、この位置に配置 */
.flatpickr-day.saturday.startRange:not(.endRange),
.flatpickr-day.saturday.endRange:not(.startRange),
.flatpickr-day.saturday.startRange.endRange,
.flatpickr-day.saturday.selected,
.flatpickr-day.sunday.startRange:not(.endRange),
.flatpickr-day.sunday.endRange:not(.startRange),
.flatpickr-day.sunday.startRange.endRange,
.flatpickr-day.sunday.selected {
  color: #fff !important;
}

/* 無効日（前月/次月/予約不可） */
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.notAllowed,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
  background: none !important; color: #ccc !important;
  font-weight: normal !important; opacity: .5 !important; cursor: default !important;
}
/* disabled を常に最優先（週末/祝日の装飾を打ち消す） */
.flatpickr-day.flatpickr-disabled.saturday,
.flatpickr-day.flatpickr-disabled.sunday,
.flatpickr-day.flatpickr-disabled.holiday,
.flatpickr-day.notAllowed.saturday,
.flatpickr-day.notAllowed.sunday,
.flatpickr-day.notAllowed.holiday {
  background: none !important; color: #ccc !important;
  font-weight: normal !important; opacity: .5 !important;
}

/* 曜日見出しの色 */
.flatpickr-weekdays .flatpickr-weekday:nth-child(1) { color: #e53935 !important; } /* 日 */
.flatpickr-weekdays .flatpickr-weekday:nth-child(7) { color: #1e88e5 !important; } /* 土 */

/* カレンダーの吹き出し矢印を消す（1回だけ定義） */
.flatpickr-calendar::before,
.flatpickr-calendar::after { display: none !important; }

/* =============== 誤クリック防止シールド＆スタック順 =============== */
/* シールドは 3600、カレンダーは 3601、人数モーダルは 3640/3641 で一貫 */
#calendarShield{
  position: fixed;
  inset: 0;
  background: transparent;     /* 完全透明 */
  pointer-events: none;        /* 非表示時は無効 */
  z-index: 2147483600;
}
#calendarShield.is-active{ pointer-events: auto; }

.flatpickr-calendar{ z-index: 2147483601 !important; }

/* ロック中は右メニューの hover/クリックも保険で無効化 */
body.ui-overlay-active .yoyaku-menu a{ pointer-events: none; }

/* =============== 人数モーダル（前面固定） =============== */
.people-overlay {
  position: fixed;
  inset: 0;
  display: none;
  background: transparent;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
}
.people-overlay.is-active { display: flex; }

#peopleModalOverlay { z-index: 2147483640; }
#peopleModal        {
  z-index: 2147483641;
  display: inline-block;
  width: auto;
  max-width: none;
  margin: 0 auto;
  text-align: left;
  max-height: 90vh;
  overflow: auto;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .25);
  padding: 10px 28px; /* 上10px */
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  top: 0;
}

.people-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  margin: 0; padding: 10px 0; border-bottom: 1px solid #cfcfcf;
}
#peopleModalTitle { margin: 0; line-height: 1.3; }
.people-close { background: none; border: none; font-size: 1.6rem; line-height: 1; cursor: pointer; }

.people-field {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 6px; margin: 12px 0 18px;
}
.kids-title { font-weight: 700; margin: 4px 0 8px; }
.kids-row { display: flex !important; gap: 16px; align-items: flex-end; flex-wrap: nowrap; }
.kids-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }

.people-modal select {
  width: auto !important; min-width: 70px; height: 38px; box-sizing: border-box;
}

.people-preview {
  position: relative; margin-top: 18px;
  padding: 22px 20px 22px 60px;
  border: 1px dashed #e1e1e1; border-radius: 8px; background: #fafafa; font-weight: 700;
}
.people-preview::before {
  content: ""; position: absolute; left: 18px; top: 50%; transform: translateY(-50%);
  width: 28px; height: 28px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000000'><circle cx='12' cy='7' r='4'/><ellipse cx='12' cy='17' rx='7' ry='5'/></svg>") no-repeat center / contain;
  opacity: .9; pointer-events: none;
}

.people-actions { display: flex; justify-content: space-between; gap: 10px; margin-top: 16px; }
.people-actions .btn { flex: 1; padding: 12px; font-size: 1rem; box-sizing: border-box; }

/* =============== ボタン/セレクト 共通 =============== */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px; cursor: pointer; font-size: 1rem; border: 1px solid #ccc; background: #fff;
}
.btn-outline { background: #fff; }
.btn-primary { background: #ff8600; border-color: #ff8600; color: #fff; }
.btn-primary:hover { filter: brightness(1.02); }

#roomCount, #adultCount, #childElemHi, #childElemLo, #childPre35, #childInfant02 {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  border-radius: 8px !important;
  background: #f8f8f8 url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='16' height='16' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") no-repeat right 12px center / 16px 16px !important;
  padding-right: 2.4em; min-width: 100px; font-size: 1rem; background-clip: padding-box;
  overflow: hidden; border: 1px solid #3e3e3e; box-sizing: border-box;
}
#roomCount { height: var(--field-h) !important; padding-top: 0 !important; padding-bottom: 0 !important; }
.search-body select, .people-modal select { padding-left: calc(1ch + 8px) !important; text-indent: 1ch; }

/* =============== 人数ボタン =============== */
.people-open-btn{
  display: inline-flex; align-items: center; gap: 12px;
  height: var(--field-h); padding: 0 16px 0 52px;
  border: 1px solid #3e3e3e; border-radius: 6px; background: #f8f8f8;
  cursor: pointer; font-size: 1.05rem; box-sizing: border-box; width: auto; min-width: 0; position: relative;
}
.people-open-btn::before{
  content:""; position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
  width: 24px; height: 24px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000000'><circle cx='12' cy='7' r='4'/><ellipse cx='12' cy='17' rx='7' ry='5'/></svg>") no-repeat center / contain;
  opacity: .9; pointer-events: none;
}
.people-open-btn .people-hint{ display: none !important; }

/* =============== 2行×2行（部屋数+人数） =============== */
.search-row.row-2x2{
  display: grid; grid-template-columns: auto 1fr; align-items: start; column-gap: 40px; margin-bottom: 15px;
}
.row-2x2 .rooms-cell, .row-2x2 .people-cell{ display: flex; flex-direction: column; gap: var(--label-gap); }
.row-2x2 .people-cell .section-subtitle{ margin: 0 !important; padding: 0 !important; font-weight: 600; font-size: 1.05rem; }
.row-2x2 .people-cell .people-open-btn{ align-self: flex-start; width: auto; max-width: 100%; }