@charset "UTF-8";
/*
Theme Name : 桝一客殿 - Masuichi Kyakuden
*/

/* ===================
予約番　埋め込み（489ban）
.reserve-form と同じ見た目（線だけの最小限の入力欄＋金色ボタン）を、
489ban が自動生成するマークアップ（dl/dt/dd、固定クラス名）に適用する。
=================== */

#search_489ban dl,
#search_489ban dt,
#search_489ban dd,
#search_489ban p {
  margin: 0;
  padding: 0;
}

#search_489ban form {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-4) var(--space-2);
}

/* 子供の入力欄（最後の person_489ban）を、子供内訳パネルの位置の基準にする */
#search_489ban .person_489ban:has(> dd > input.guests_input) {
  anchor-name: --child-count-field;
}

#search_489ban dl {
  display: flex;
  flex-direction: column;
  gap: .8em;
}

#search_489ban dt {
  font-size: var(--font-16);
  font-weight: 500;
}
#search_489ban dt label {
  display: block;
}

#search_489ban dd {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

/* シェブロン（下向き）。.reserve-links a::after と同じサイズ感で、罫線2本を回転させるだけの表現。
   select・input は疑似要素を持てないため、必ず dd 側に付ける */
#search_489ban dd::after {
  content: "";
  position: absolute;
  right: 2px;
  bottom: 13px;
  width: 6px;
  height: 6px;
  border-right: 1px solid var(--color-ink);
  border-bottom: 1px solid var(--color-ink);
  rotate: 45deg;
  pointer-events: none;
}
/* 宿泊日の dd だけは「日付未定」チェックボックスも同居しているため、
   右端基準ではなく宿泊日入力欄（幅130px）の右端基準で位置を合わせる */
#search_489ban .date_489ban dd::after {
  right: auto;
  left: 122px;
}

/* 泊数・部屋数・男女・子供の数値入力欄共通。線だけの最小限の見た目にする。
   単位表記（室・名）は元デザインに合わせて非表示にする */
#search_489ban dd span {
  display: none;
}

#search_489ban select.digits,
#search_489ban input[type="date"],
#search_489ban input.guests_input {
  box-sizing: border-box;
  width: 100%;
  min-width: 46px;
  padding: 0 14px 4px 8px;
  border: none;
  border-bottom: 1px solid var(--color-ink);
  border-radius: 0;
  background-color: transparent;
  color: var(--color-line);
  font-size: var(--font-18);
  line-height: 1.4;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition: border-color var(--transition);
}
#search_489ban select.digits:focus-visible,
#search_489ban input[type="date"]:focus-visible,
#search_489ban input.guests_input:focus-visible {
  outline: none;
  border-color: var(--color-ink);
  box-shadow: none;
}

#search_489ban .date_489ban input[type="date"] {
  width: 130px;
}
/* ネイティブのカレンダーアイコンは隠し、上のシェブロンだけにする */
#search_489ban input[type="date"]::-webkit-calendar-picker-indicator {
  position: absolute;
  inset: 0;
  width: 100%;
  opacity: 0;
  cursor: pointer;
}

/* 日付未定チェックボックス（チェックボックス自体は input[type="checkbox"] の共通スタイルを使用） */
#search_489ban .date_489ban dd label {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--color-ink);
  font-size: var(--font-16);
  font-weight: 400;
  cursor: pointer;
}

/* 泊数・部屋数・男女をひとつの行にまとめる */
#search_489ban .inbox_489ban:not(.child_input) {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* 部屋数・男性・女性・子供は欄の横幅を揃える */
#search_489ban .room_489ban,
#search_489ban .person_489ban {
  width: 56px;
}

#search_489ban button[name="searchButton489ban"] {
  flex: 1 0 auto;
  margin-left: 16px;
  padding: .5em var(--space-2);
  border-radius: 2px;
  background: var(--color-gold);
  color: var(--color-white);
  font-size: var(--font-16);
  font-weight: 500;
  letter-spacing: 0.1em;
  transition: background-color var(--transition);
}
@media (hover: hover) {
  #search_489ban button[name="searchButton489ban"]:hover {
    background: var(--color-gold-h);
  }
}

/* .reserve-panel は .fade-up の表示後も transform/filter が残り、
   スタッキングコンテキストと position:fixed の包含ブロックを作ってしまう。
   子供内訳パネルが .reserve-links やフッターの下に隠れてしまうため、表示後は外す */
.reserve-panel.fade-up.is-show {
  transform: none;
  filter: none;
}

/* 子供の人数内訳（クリックで開閉するパネル）。
   子供欄の真下に浮かせて表示し、通常のフローやフォーム全体の高さには影響させない。
   position: fixed にして .sec や .footer のスタッキングコンテキストの外（最前面）に出す */
#search_489ban .inbox_489ban.child_input {
  position: fixed;
  position-anchor: --child-count-field;
  top: calc(anchor(bottom) + 8px);
  left: anchor(left);
  z-index: 50;
  width: max-content;
  min-width: 320px;
  padding: var(--space-2);
  background: var(--color-white);
  border: 1px solid var(--color-line);
  border-radius: 4px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}
#search_489ban .child_489ban {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: var(--space-2);
  padding-bottom: var(--space-2);
-ms-zoom-animation: inherit;
}

#search_489ban .child_489ban dt {
  min-width: 0;
  font-size: var(--font-14);
  font-weight: 400;
}
#search_489ban .child_489ban dt span {
  display: block;
  margin-top: 2px;
  color: var(--color-line);
  font-size: var(--font-12);
}
#search_489ban .child_489ban dd {
  justify-self: end;
}
#search_489ban .child_489ban select.digits {
  width: 56px;
  min-width: 0;
}
#search_489ban .inbox_489ban.child_input > p {
  text-align: center;
}
#search_489ban .close_child_input {
  display: inline-block;
  font-size: var(--font-14);
  text-decoration: underline;
  text-underline-offset: .2em;
}

@media screen and (max-width: 768px) {
  #search_489ban form {
    flex-direction: column;
    align-items: stretch;
  }
  #search_489ban .inbox_489ban:not(.child_input) {
    justify-content: space-between;
  }
  #search_489ban .inbox_489ban:not(.child_input) dl {
    flex: 1 1 40px;
  }
  /* 子供欄は .inbox_489ban の外にあるため、男性・女性（2等分）と同じ幅に揃える */
  #search_489ban .person_489ban:has(> dd > input.guests_input) {
    width: calc((100% - var(--space-2)) / 2);
  }
  #search_489ban .date_489ban dd {
    flex-wrap: wrap;
  }
  #search_489ban button[name="searchButton489ban"] {
    width: 100%;
    margin-left: 0;
  }

  /* SPでは浮かせず、アコーディオンのようにその場（フォームの流れの中）に展開する */
  #search_489ban .inbox_489ban.child_input {
    position: static;
    width: 100%;
    min-width: 0;
    margin-top: var(--space-1);
    box-shadow: none;
  }
}