@charset "UTF-8";
/* =========================================================
   ホテル木暮 予約モーダル「料理と部屋から探す」
   PC : Figma 57:1000 / 57:882
   SP : Figma 57:1109 / 57:1211
   ========================================================= */

/* iframe内の旧コンテナをリセット */
#Wrap, #FormWrap { width:auto; max-width:none; margin:0; padding:0; background:transparent; box-shadow:none; border:0; }
body { background:#fff; margin:0; }

.r-reserve { box-sizing:border-box; max-width:1080px; margin:0 auto; padding:40px 64px 56px;
  background:#fff; color:#000; font-family:"Zen Old Mincho","Yu Mincho",serif; }
.r-reserve *, .r-reserve *::before, .r-reserve *::after { box-sizing:border-box; }
.r-reserve__title { text-align:center; font-size:32px; font-weight:500; margin:0 0 40px; }

/* ---- 検索条件（PC：各行が左から流れるflex／ラベル左） ---- */
.r-fields { display:flex; flex-wrap:wrap; align-items:center; column-gap:0; row-gap:10px; }
.r-field { flex:0 0 auto; display:flex; align-items:center; gap:14px; }
.r-break { flex-basis:100%; height:0; margin:0; padding:0; }   /* 行区切り（PC） */
.r-field--price { flex-basis:100%; }
.r-field__label { font-size:16px; white-space:nowrap; }
.r-field__body { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.r-unit { font-size:16px; }
/* 行頭ラベルを固定幅にしてBOXの頭を揃える（宿泊日/部屋数/宿泊料金） */
.r-field--date  > .r-field__label,
.r-field--rooms > .r-field__label,
.r-field--price > .r-field__label { flex:0 0 72px; width:72px; }
/* 行内・行間の余白（デザイン指定） */
.r-field--nights { margin-left:35px; }            /* 日付未定 → 泊数 */
.r-field--adult  { margin-left:25px; }            /* 室 → 大人 */
.r-field--date .r-field__body  { gap:20px; }      /* 年月 → 日 */
.r-field--price .r-field__body { gap:20px; }      /* 宿泊料金 BOX間 */

.r-select { position:relative; display:inline-block; }
.r-select select { appearance:none; -webkit-appearance:none; -moz-appearance:none;
  background:#fff; border:1px solid #d9d9d9; height:40px; padding:0 38px 0 14px;
  font-family:inherit; font-size:18px; color:#000; border-radius:0; cursor:pointer; line-height:38px; width:100%; }
.r-select::after { content:""; position:absolute; right:14px; top:50%; transform:translateY(-30%);
  width:0; height:0; border-left:6px solid transparent; border-right:6px solid transparent;
  border-top:8px solid #333; pointer-events:none; }
.r-select--ym { min-width:150px; }
.r-select--day { min-width:88px; }
.r-select--sm { width:100px; }
.r-select--price { width:180px; }

/* 宿泊日カレンダー入力欄 */
.r-datefield { width:210px; height:40px; padding:0 40px 0 14px; border:1px solid #d9d9d9; background-color:#fff;
  font-family:inherit; font-size:18px; color:#000; border-radius:0; cursor:pointer; box-sizing:border-box;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2'%3E%3Crect x='3' y='4' width='18' height='17' rx='2'/%3E%3Cline x1='3' y1='9' x2='21' y2='9'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; background-size:18px; }
.r-datefield::placeholder { color:#999; }

/* jQuery UI datepicker 見た目調整 */
.ui-datepicker { font-family:"Zen Old Mincho","Yu Mincho",serif; font-size:14px; z-index:99999 !important; }
.ui-datepicker .ui-datepicker-title { font-weight:500; }
.ui-datepicker td a.ui-state-active,
.ui-datepicker td a.ui-state-default.ui-state-active { background:var(--kodawari-accent,#ecdcb0); border-color:var(--kodawari-accent,#ecdcb0); color:#1a1a1a; }
.ui-datepicker td a.ui-state-highlight { background:#f5efe0; }

.r-check { display:inline-flex; align-items:center; gap:8px; font-size:14px; cursor:pointer; white-space:nowrap; }
.r-check input { width:22px; height:22px; accent-color:#333; }
.r-tilde { font-family:"Yu Mincho","Zen Old Mincho",serif; font-size:25px; line-height:1; }
.r-note { font-size:14px; color:#000; }

/* ---- ボタン①（標準検索） ---- */
.r-submit-main { display:flex; align-items:center; justify-content:center; width:250px; height:51px;
  margin:0; padding:0; background:#000; color:#fff; border:0; font-family:inherit; font-size:18px;
  cursor:pointer; box-shadow:4px 4px 14px rgba(0,0,0,.15); transition:opacity .2s; }
.r-submit-main:hover { opacity:.85; }
/* 上段ボタン行：プランを検索 ＋ 空室カレンダー */
.r-actions-top { display:flex; justify-content:center; align-items:center; gap:24px; margin-top:36px; }
.r-calendar-btn { display:flex; align-items:center; justify-content:center; height:51px; padding:0 28px;
  background:#d9d9d9; color:#000; font-size:18px; text-decoration:none; transition:opacity .2s; }
.r-calendar-btn:hover { opacity:.85; }

/* ---- こだわり条件 ---- */
.r-kodawari { margin-top:44px; }
.r-kodawari__head { background:var(--kodawari-accent,#ecdcb0); color:#1a1a1a; text-align:center; font-size:18px; height:52px; line-height:52px; }
.r-kodawari__body { position:relative; display:flex; justify-content:center; align-items:flex-start; gap:48px;
  background:rgba(229,229,229,.9); padding:27px 33px 33px; }
.r-kodawari__group { flex:0 1 411px; min-width:0; }
.r-kodawari__group h3 { font-size:14px; font-weight:500; margin:0 0 18px; text-align:left; }
.r-kodawari__grid { display:grid; grid-template-columns:repeat(2,minmax(0,200px)); gap:10px 11px; justify-content:start; }
.r-kodawari__plus { font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN",sans-serif; font-weight:700;
  font-size:24px; align-self:center; padding:0 18px; }

/* カード（トグル） */
.r-card { position:relative; display:flex; align-items:center; gap:16px; min-width:0; height:80px;
  margin:0; padding:0 16px 0 0; background:#fff; border:0; font-family:inherit; cursor:pointer; text-align:left;
  overflow:hidden; }
.r-card__img { flex:0 0 80px; width:80px; height:80px; }
.r-card__img img { width:80px; height:80px; object-fit:cover; display:block; }
.r-card__label { font-size:14px; color:#000; line-height:1.4; }
.r-card__label small { display:block; font-size:12px; }
.r-card__check { display:none; }
.r-card__check svg { display:block; width:24px; height:15px; }
.r-card.is-selected::before { content:""; position:absolute; inset:0; z-index:1;
  background:rgba(0,0,0,.65); -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px); }
.r-card.is-selected .r-card__label { position:relative; z-index:2; color:#fff; }
.r-card.is-selected .r-card__check { display:block; position:absolute; left:28px; top:33px; z-index:2; }

/* 選択中の条件 / ボタン②（こだわり検索） */
.r-kodawari__foot { display:flex; flex-direction:column; align-items:center;
  margin-top:18px; gap:10px; }
.r-selected { font-size:14px; color:#000; text-align:center; }
.r-submit-kodawari { display:inline-flex; align-items:center; justify-content:center; gap:14px;
  width:324px; height:51px; margin:0; padding:0; background:#747474; color:#aaa; border:0; font-family:inherit; font-size:18px;
  white-space:nowrap; cursor:not-allowed; box-shadow:4px 4px 14px rgba(0,0,0,.15); transition:background .2s,color .2s; }
.r-submit-kodawari .r-arrow { display:none; font-weight:700; }
.r-submit-kodawari.is-active { background:var(--kodawari-accent,#ecdcb0); color:#1a1a1a; cursor:pointer; }
.r-submit-kodawari.is-active .r-arrow { display:inline; }

/* ---- 下部リンク ---- */
.r-divider { border:0; border-top:1px solid #d2d2d2; margin:26px 0; }
.r-links { display:flex; justify-content:center; gap:69px; }
.r-links a { display:flex; align-items:center; justify-content:center; width:325px; height:50px;
  background:#d9d9d9; color:#000; font-size:18px; text-decoration:none; transition:opacity .2s; }
.r-links a:hover { opacity:.85; }

/* ===== タブレット（中間幅）：こだわりを縦積み ===== */
@media (max-width:820px){
  .r-reserve { padding:32px 24px 48px; }
  .r-kodawari__body { flex-direction:column; align-items:center; gap:24px; }
  .r-kodawari__group { flex:none; width:100%; max-width:422px; }
  .r-kodawari__grid { grid-template-columns:repeat(2,1fr); }
  .r-card { width:100%; }
  .r-kodawari__plus { padding:0; }
}

/* ===== SP（スマホ）: Figma 57:1109 / 57:1211 ===== */
@media (max-width:600px){
  .r-reserve { padding:32px 24px 40px; }
  .r-reserve__title { font-size:26px; text-align:center; margin:0 0 28px; }

  /* フォーム：宿泊日(全幅) / 泊数+部屋数 / 大人 / 料金(全幅) */
  .r-fields { column-gap:12px; row-gap:18px; }
  .r-break { display:none; }
  .r-field { display:block; }
  .r-field--date  { flex-basis:100%; }
  .r-field--nights{ flex-basis:calc(50% - 6px); }
  .r-field--rooms { flex-basis:calc(50% - 6px); }
  .r-field--adult { flex-basis:calc(50% - 6px); }
  .r-field--price { flex-basis:100%; }
  .r-field__label { display:block; font-size:18px; margin-bottom:8px; white-space:normal; text-align:left; }
  .r-note { text-align:left; }
  .r-field__body { gap:10px; }
  /* PC用の余白指定をSPでは解除 */
  .r-field--nights, .r-field--adult { margin-left:0; }
  .r-field--date > .r-field__label,
  .r-field--rooms > .r-field__label,
  .r-field--price > .r-field__label { flex:none; width:auto; }
  .r-field--date .r-field__body, .r-field--price .r-field__body { gap:10px; }

  .r-select select { height:60px; font-size:20px; }
  .r-select--ym, .r-select--day { min-width:0; }
  .r-field--date .r-field__body { flex-wrap:wrap; }
  .r-datefield { flex:1 1 100%; width:100%; height:60px; font-size:20px; }
  .r-field--date .r-select--ym { flex:1 1 56%; }
  .r-field--date .r-select--day { flex:1 1 36%; }
  .r-field--date .r-check { flex:1 1 100%; font-size:18px; margin-top:8px; }
  .r-field--date .r-check input { width:32px; height:32px; }

  .r-field--nights .r-select, .r-field--rooms .r-select,
  .r-field--adult .r-select { flex:1 1 auto; }
  .r-field--nights .r-field__body, .r-field--rooms .r-field__body,
  .r-field--adult .r-field__body { flex-wrap:nowrap; }
  .r-unit { font-size:20px; }

  .r-field--price .r-select--price { flex:1 1 0; width:auto; }
  .r-tilde { font-size:20px; }
  .r-field--price .r-note { flex:1 1 100%; font-size:14px; margin-top:4px; }

  .r-actions-top { flex-direction:column; gap:12px; margin-top:30px; }
  .r-submit-main { width:300px; height:60px; font-size:20px; margin:0; }
  .r-calendar-btn { width:300px; height:60px; font-size:18px; }

  /* こだわり：全幅・縦積み */
  .r-kodawari { margin-top:36px; }
  .r-kodawari__head { font-size:20px; margin:0 -24px; }
  .r-kodawari__body { flex-direction:column; align-items:stretch; gap:24px; margin:0 -24px; padding:30px 14px; }
  .r-kodawari__group { width:100%; max-width:none; }
  .r-kodawari__group h3 { font-size:20px; text-align:center; margin:0 0 11px; }
  .r-kodawari__grid { grid-template-columns:repeat(2,1fr); gap:8px; }
  .r-kodawari__plus { font-size:33px; padding:0; text-align:center; }
  .r-card { width:100%; height:80px; gap:4px; padding:0 2px 0 0; }
  .r-card__label { font-size:12px; line-height:1.3; }
  .r-card__label small { font-size:10px; }

  .r-kodawari__foot { flex-direction:column; align-items:center; gap:14px; margin-top:24px; }
  .r-selected { text-align:center; }
  .r-submit-kodawari { width:300px; height:60px; }

  .r-divider { margin:20px 0; }
  .r-links { flex-direction:column; align-items:center; gap:18px; }
  .r-links a { width:300px; }
}

@media (max-width:360px){
  .r-card__label { font-size:13px; }
  .r-submit-main, .r-submit-kodawari, .r-links a { width:100%; max-width:300px; }
}