/* =========================================================================
   三沢小 宿泊料金シミュレーター — アプリスタイル
   公式HP(misawa-tokokoto.com)のデザインシステム準拠（tokens.css の :root を使用）
   世界観: ウォームグレー下地 / 白カード+2px墨枠 / 角ばり / フラット /
           りいクッキー手書き見出し / ＼ ／斜線 / 2px点線罫線 / イチョウ色アクセント
   ========================================================================= */

*, *::before, *::after { box-sizing: border-box; }
/* 日本語以外: りいクッキー(日本語サブセットのみ)では字形が崩れるため、見出しはZen Maru Gothic系に統一 */
html.lang-nonja { --font-display: "Zen Maru Gothic", "Noto Sans JP", system-ui, sans-serif; }
/* 三沢小テイスト アイコン（line・currentColor） */
.ic { width: 1.15em; height: 1.15em; display: inline-block; vertical-align: -0.18em; stroke: currentColor; fill: none; flex-shrink: 0; }
.ic--lg { width: 1.5em; height: 1.5em; }
.bico { display: inline-flex; align-items: center; }
.cmp-cta .arw[data-ic] { display: inline-flex; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--color-bg); color: var(--color-ink);
  font-family: var(--font-body); font-size: var(--body-size); font-weight: var(--body-weight);
  line-height: var(--body-line); letter-spacing: var(--body-tracking);
  -webkit-font-smoothing: antialiased;
  padding-bottom: 168px; /* sticky summary 用 */
}
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }
.lnk { color: var(--color-link); text-decoration: underline; }

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 var(--pad-x); }
.muted { color: var(--color-sub); }
.nowrap { white-space: nowrap; }
.center { text-align: center; }

/* ---------- ヘッダー ---------- */
.app-header {
  background: var(--color-white); border-bottom: 2px solid var(--color-ink);
}
.app-header__in { display: flex; align-items: center; gap: 16px; padding: 18px var(--pad-x); flex-wrap: wrap; }
.brand { display: flex; align-items: baseline; gap: 12px; }
.brand__mark {
  font-family: var(--font-display); font-size: 30px; line-height: 1; color: var(--color-ink);
  letter-spacing: 0.04em;
}
.brand__sub { font-size: 12px; letter-spacing: 0.14em; color: var(--color-sub); }
.app-title {
  font-family: var(--font-display); font-size: clamp(22px, 3vw, 32px); font-weight: 400;
  letter-spacing: 0.06em; margin: 0;
}
.app-header__right { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.lang-select { height: 38px; border: 2px solid var(--color-ink); border-radius: 2px; background: #fff; font-family: var(--font-body); font-size: 13px; font-weight: 700; padding: 0 8px; color: var(--color-ink); }
.en-banner { background: #faf3e0; border-bottom: 2px solid var(--color-accent); color: #4a3c1e; font-size: 12.5px; line-height: 1.7; padding: 9px var(--pad-x); text-align: center; letter-spacing: .02em; }
@media (max-width: 760px) {
  .lang-select { height: 34px; }
}

/* ---------- 使い方ツアー ---------- */
.tour-back { position: fixed; inset: 0; z-index: 100; display: none; }
.tour-back.show { display: block; }
.tour-spot { position: absolute; border: 3px solid var(--color-accent); border-radius: 6px; box-shadow: 0 0 0 9999px rgba(0,0,0,.62); transition: opacity .2s ease; pointer-events: none; }
.tour-card {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 24px; width: 440px; max-width: calc(100vw - 32px);
  background: #fff; border: 2px solid var(--color-ink); border-radius: 4px; box-shadow: 0 10px 40px rgba(0,0,0,.3); padding: 18px 20px 16px; z-index: 101;
}
.tour-card--center { top: 50%; bottom: auto; transform: translate(-50%, -50%); }
.tour-card--top { top: 16px; bottom: auto; transform: translateX(-50%); }
.tour-card__step { font-family: var(--font-display); font-size: 14px; color: var(--color-accent); letter-spacing: .04em; }
.tour-card__title { font-family: var(--font-display); font-size: 21px; margin: 2px 0 8px; line-height: 1.3; }
.tour-card__body { font-size: 13px; line-height: 1.85; color: var(--color-ink); }
.tour-card__nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; }
.tour-card__dots { display: flex; gap: 6px; }
.tour-card__dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--color-rule); display: block; }
.tour-card__dots i.on { background: var(--color-accent-fill); }
.tour-card__btns { display: flex; align-items: center; gap: 8px; }
.tour-prev { width: 40px; height: 40px; flex-shrink: 0; border: 2px solid var(--color-rule); background: #fff; border-radius: 2px; display: inline-flex; align-items: center; justify-content: center; color: var(--color-ink); cursor: pointer; }
.tour-prev:hover { background: var(--color-accent-soft); }
.tour-prev .ic { width: 18px; height: 18px; }
.tour-skip { background: none; border: 0; color: var(--color-sub); font-size: 13px; text-decoration: underline; cursor: pointer; padding: 0 4px; }
.tour-next { height: 40px; padding: 0 18px; background: var(--color-ink); color: #fff; border: 0; border-radius: 2px; font-family: var(--font-button); font-weight: 700; font-size: 14px; letter-spacing: .04em; cursor: pointer; }

/* ---------- 見出し ---------- */
.h-slash {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  font-family: var(--font-display); font-size: var(--fs-slash); font-weight: 400; letter-spacing: 0.05em; line-height: 1.2;
}
.h-slash::before { content: "＼"; } .h-slash::after { content: "／"; }
.h-slash::before, .h-slash::after { color: var(--color-ink); transform: none; align-self: center; }
.section { padding: 36px 0 8px; }
.section__head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 5px; margin-bottom: 18px; }
.section__lead { font-size: 14px; color: var(--color-sub); letter-spacing: 0.08em; }
.step-no { font-family: var(--font-display); font-size: 26px; color: var(--color-accent); margin-right: 8px; }

/* ---------- 条件バー（日程・人数・会員） ---------- */
.condbar {
  position: sticky; top: 0; z-index: 40; background: rgba(238,238,238,.96);
  backdrop-filter: blur(6px); border-bottom: 2px dotted var(--color-rule);
}
.condbar__in {
  display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap;
  max-width: 1180px; margin: 0 auto; padding: 14px var(--pad-x);
}
.field { display: flex; flex-direction: column; gap: 6px; }
.field > label { font-family: var(--font-display); font-size: 15px; letter-spacing: 0.04em; color: var(--color-ink); }
.field input[type="date"], .field select {
  height: 46px; padding: 0 12px; border: 2px solid var(--color-ink); border-radius: 2px;
  background: #fff; font-family: var(--font-body); font-size: 15px; color: var(--color-ink); letter-spacing: 0.04em;
}
.stepper { display: inline-flex; align-items: center; border: 2px solid var(--color-ink); border-radius: 2px; background:#fff; height: 46px; touch-action: manipulation; }
/* 連打時にその箇所が拡大/選択されないように（ダブルタップズーム・選択を抑止） */
.stepper button { width: 42px; height: 100%; border: 0; background: transparent; font-size: 22px; line-height: 1; color: var(--color-ink); touch-action: manipulation; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
.stepper button:hover { background: var(--color-accent-soft); }
.stepper button:disabled { opacity: .3; cursor: not-allowed; background: transparent; }
.stepper .val { min-width: 56px; text-align: center; font-weight: 700; font-size: 16px; }
.stepper .val small { font-weight: 500; font-size: 12px; color: var(--color-sub); }

/* 人数ポップオーバー（大人男/女・子ども） */
.people-field { position: relative; }
.people-trigger {
  height: 46px; min-width: 150px; padding: 0 14px; border: 2px solid var(--color-ink); border-radius: 2px; background: #fff;
  display: inline-flex; align-items: center; justify-content: space-between; gap: 10px;
  font-family: var(--font-body); font-size: 15px; font-weight: 700; letter-spacing: .03em; color: var(--color-ink);
}
.people-trigger .caret { color: var(--color-sub); font-size: 12px; }
.people-pop {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 60; width: 300px; max-width: 92vw;
  background: #fff; border: 2px solid var(--color-ink); border-radius: 2px; box-shadow: 0 10px 30px rgba(0,0,0,.18); padding: 14px;
}
.people-pop[hidden] { display: none; }
.people-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 2px dotted var(--color-rule); }
.people-row:last-of-type { border-bottom: 0; }
.people-row .pk { font-size: 14px; font-weight: 700; display: flex; flex-direction: column; }
.people-row .pk small { font-size: 10px; color: var(--color-sub); font-weight: 500; }
.people-row .pk .g { font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 2px; margin-left: 6px; display: inline-block; }
.people-row .pk .g-m { background: #e3edf6; color: #3a6ea5; } .people-row .pk .g-f { background: #f6e6ea; color: #b4503f; }
.people-note { font-size: 11px; color: var(--color-sub); line-height: 1.7; margin: 10px 0 12px; }
.people-done { width: 100%; height: 44px; background: var(--color-ink); color: #fff; border: 0; border-radius: 2px; font-family: var(--font-button); font-weight: 700; font-size: 14px; letter-spacing: .04em; }

/* 会員/非会員トグル */
.memtoggle { display: inline-flex; align-self: flex-start; border: 2px solid var(--color-ink); border-radius: 2px; overflow: hidden; height: 46px; }
.memtoggle button { border: 0; background: #fff; padding: 0 16px; font-size: 13px; font-weight: 700; letter-spacing: 0.06em; color: var(--color-sub); }
.memtoggle button.on { background: var(--color-ink); color: #fff; }
.memtoggle button:first-child { border-right: 2px solid var(--color-ink); }
.cond-hint { font-size: 12px; color: var(--color-sub); width: 100%; margin-top: 2px; letter-spacing: 0.06em; }

/* ---------- プラン一覧 ---------- */
.plan-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 22px; }
.plan {
  position: relative;
  background: #fff; border: 2px solid var(--color-ink); border-radius: 0; overflow: hidden;
  display: flex; flex-direction: column; transition: box-shadow var(--t-fast);
}
.plan.is-selected { box-shadow: 0 0 0 3px var(--color-accent); }
/* カード選択（プラン・部屋 共通：とこことテイストのチェック丸＋カード全体クリック） */
.selectable { cursor: pointer; }
.selectable:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 2px; }
.card-check {
  position: absolute; top: 10px; right: 10px; z-index: 3; width: 28px; height: 28px; border-radius: 50%;
  border: 2px solid var(--color-ink); background: rgba(255,255,255,.94); color: transparent;
  display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 1px 3px rgba(0,0,0,.18);
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.card-check .ic { width: 16px; height: 16px; }
.selectable:hover .card-check { border-color: var(--color-accent); }
.is-selected .card-check { background: var(--color-accent-fill); border-color: var(--color-accent-fill); color: #2a2113; }
.plan__media { position: relative; aspect-ratio: 16/10; overflow: hidden; background: #ddd; }
.plan__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.plan:hover .plan__media img { transform: scale(1.04); }
/* 写真カルーセル（3秒ごとにクロスフェード／縦割り表示の置き換え） */
.plan__media.has-carousel .carousel__img { position: absolute; inset: 0; opacity: 0; transition: opacity .8s ease; }
.plan__media.has-carousel .carousel__img.is-active { opacity: 1; }
.carousel__dots { position: absolute; bottom: 7px; left: 0; right: 0; display: flex; justify-content: center; gap: 5px; z-index: 3; pointer-events: none; }
.carousel__dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.5); box-shadow: 0 0 2px rgba(0,0,0,.45); transition: background .3s; }
.carousel__dot.is-active { background: #fff; }
@media (prefers-reduced-motion: reduce) { .plan__media.has-carousel .carousel__img { transition: none; } }
.plan__badges { position: absolute; top: 10px; left: 10px; display: flex; gap: 6px; flex-wrap: wrap; }
.badge {
  font-size: 11px; letter-spacing: 0.06em; font-weight: 700; padding: 4px 9px; border-radius: 2px;
  background: rgba(51,51,51,.86); color: #fff;
}
.badge--meal { background: var(--color-accent-fill); color: #2a2113; }
.badge--charge { background: rgba(255,255,255,.92); color: var(--color-ink); border: 1px solid var(--color-ink); }
.plan__body { padding: 12px 14px 13px; display: flex; flex-direction: column; gap: 7px; flex: 1; }
.plan__name { font-family: var(--font-display); font-size: 14.5px; line-height: 1.3; letter-spacing: 0.02em; font-weight: 400; }
.plan__meta { font-size: 11.5px; color: var(--color-sub); letter-spacing: 0.04em; }
.plan__from { margin-top: auto; display: flex; align-items: baseline; gap: 8px; padding-top: 2px; }
.plan__from .lbl { font-size: 11.5px; color: var(--color-sub); }
.plan__from .amt { font-size: 20px; font-weight: 700; color: var(--color-ink); }
.plan__from .amt.is-member { color: var(--color-accent); }
.plan__avail { font-size: 11.5px; letter-spacing: 0.04em; }
.av-ok { color: var(--color-success); font-weight: 700; }
.av-no { color: var(--color-error); font-weight: 700; }

/* 詳細・カレンダーの小ボタン（押したくなる作法） */
.card-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.mini-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; padding: 0 12px;
  border: 2px solid var(--color-ink); background: #fff; color: var(--color-ink); border-radius: 2px;
  font-family: var(--font-body); font-size: 12px; font-weight: 700; letter-spacing: 0.04em;
  white-space: nowrap; flex: 1 1 auto; min-width: 0;
  transition: background var(--t-fast), transform var(--t-fast);
}
.mini-btn:hover { background: var(--color-accent-soft); transform: translateY(-1px); }
.mini-btn .ic { font-size: 15px; line-height: 1; }
.mini-btn--detail { border-color: var(--color-accent); }
.mini-btn--detail:hover { background: var(--color-accent-fill); color: #2a2113; }
.mini-btn--cal { }
/* 旧リンク互換 */
.detail-link { font-size: 12px; color: var(--color-link); text-decoration: underline; background: none; border: 0; padding: 0; align-self: flex-start; }

/* 日程カレンダー（他日程の料金・在庫） */
.cal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.cal-head .nav { display: inline-flex; gap: 6px; }
.cal-head .nav button { width: 36px; height: 34px; border: 2px solid var(--color-ink); background: #fff; border-radius: 2px; font-size: 15px; }
.cal-head .mon { font-family: var(--font-display); font-size: 20px; }
.cal-legend { font-size: 11px; color: var(--color-sub); display: flex; gap: 14px; margin: 4px 0 12px; flex-wrap: wrap; }
.cal-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 4px; vertical-align: middle; }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cal-dow { text-align: center; font-size: 11px; color: var(--color-sub); font-weight: 700; padding: 2px 0; min-width: 0; }
.cal-cell { min-width: 0; border: 1px solid var(--color-rule); border-radius: 2px; min-height: 58px; padding: 4px 4px 5px; text-align: right; display: flex; flex-direction: column; gap: 1px; background: #fff; overflow: hidden; }
.cal-cell .p, .cal-cell .iv { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.cal-cell.empty { border: 0; background: transparent; }
.cal-cell.av { cursor: pointer; border-color: var(--color-ink); }
.cal-cell.av:hover { background: var(--color-accent-soft); }
.cal-cell.full { background: repeating-linear-gradient(45deg,#f4f4f4,#f4f4f4 5px,#ececec 5px,#ececec 10px); }
.cal-cell.na { opacity: .4; }
.cal-cell .d { font-size: 12px; font-weight: 700; }
.cal-cell.sat .d { color: #3a6ea5; } .cal-cell.sun .d { color: var(--color-error); }
.cal-cell .p { font-size: 11px; font-weight: 700; line-height: 1.2; }
.cal-cell .iv { font-size: 9px; color: var(--color-sub); }
.cal-cell .iv.ok { color: var(--color-success); } .cal-cell .iv.low { color: var(--color-accent); } .cal-cell .iv.no { color: var(--color-error); }
.cal-note { font-size: 11px; color: var(--color-sub); margin-top: 12px; }

/* オプション 説明・詳細（モーダル本文と汎用HTML整形） */
.opt__desc { font-size: 11px; color: var(--color-sub); line-height: 1.6; max-height: 3.2em; overflow: hidden; }
.opt__more { display: inline-flex; align-items: center; gap: 1px; font-size: 11px; font-weight: 700; color: var(--color-ink); background: #fff; border: 1.5px solid var(--color-accent); border-radius: 999px; padding: 3px 7px 3px 11px; align-self: flex-start; cursor: pointer; letter-spacing: .02em; transition: background var(--t-fast), color var(--t-fast); }
.opt__more:hover { background: var(--color-accent-fill); color: #2a2113; }
.opt__more .ic { width: 14px; height: 14px; }

/* サマリ 二段CTA＋注記 */
.summary__ctas { display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch; }
.summary__cta { flex: 2 1 0; min-width: 0; }
.summary__inquire {
  flex: 1 1 0; min-width: 0; height: auto; padding: 0 14px; background: transparent; color: #fff; border: 2px solid rgba(255,255,255,.6);
  border-radius: 2px; font-family: var(--font-button); font-weight: 700; font-size: 13px; letter-spacing: .04em;
  display: flex; align-items: center; justify-content: center; gap: 6px; transition: background var(--t-fast); white-space: nowrap;
}
.summary__inquire:hover { background: rgba(255,255,255,.12); }
.summary__optnote { flex-basis: 100%; font-size: 11px; color: #d8d3c4; margin-top: 2px; line-height: 1.55; }
/* 注記が無いときは行ごと消す。空のまま残すと flex の gap ぶんだけボタン下の余白が太り、
   上下の余白が非対称に見える（上5px/下14px になっていた） */
.summary__optnote:empty { display: none; }

/* ---------- 部屋（選択プラン配下） ---------- */
.rooms-panel { background: #fff; border: 2px solid var(--color-ink); margin-top: 22px; }
.rooms-panel__head {
  display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 2px dotted var(--color-rule);
  flex-wrap: wrap;
}
.rooms-panel__title { font-family: var(--font-display); font-size: 20px; letter-spacing: 0.03em; }
.rooms-panel__plan { font-size: 13px; color: var(--color-sub); }
.room-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px,1fr)); gap: 16px; padding: 18px 20px 22px; }
.room {
  position: relative;
  border: 2px solid var(--color-ink); border-radius: 0; background: #fff; overflow: hidden;
  display: flex; flex-direction: column; cursor: pointer; transition: box-shadow var(--t-fast);
}
.room.is-selected { box-shadow: 0 0 0 3px var(--color-accent); }
.room.is-soldout { opacity: .96; }
/* 定員超過＝表示はするが選べない（理由は赤字価格欄で明示） */
.room.is-disabled { cursor: default; border-color: var(--color-rule); }
.room.is-disabled:hover { box-shadow: none; }
.room.is-disabled .card-check { display: none; }
.room.is-disabled .room__media img { filter: grayscale(.4); opacity: .8; }
.room__media { aspect-ratio: 4/3; background:#ddd; overflow: hidden; position: relative; }
.room__media img { width:100%; height:100%; object-fit: cover; }
.room__inv { z-index: 2; }
.room__inv {
  position: absolute; top: 8px; left: 8px; font-size: 11px; font-weight: 700; letter-spacing: .04em;
  padding: 4px 8px; border-radius: 2px; background: rgba(90,122,74,.92); color:#fff;
}
.room__inv.is-low { background: rgba(199,154,59,.95); color:#2a2113; }
.room__inv.is-none { background: rgba(180,80,63,.95); color:#fff; }
.room__body { padding: 10px 12px 11px; display:flex; flex-direction: column; gap: 5px; flex:1; }
.room__name { font-family: var(--font-display); font-size: 13.5px; line-height: 1.25; letter-spacing: .02em; }
.room__cap { font-size: 11.5px; color: var(--color-sub); }
.room__price { margin-top: auto; padding-top: 2px; }
/* 料金行：桁数が多くてもラベルが1文字ずつ潰れず、数字も枠外に出ない */
.room__price .row { display:flex; align-items: baseline; justify-content: space-between; gap: 4px 8px; flex-wrap: wrap; }
.room__price .row .k { font-size: 11.5px; color: var(--color-sub); white-space: nowrap; flex-shrink: 0; }
.room__price .reg, .room__price .mem { font-size: 17px; font-weight: 700; white-space: nowrap; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.room__price .mem { color: var(--color-accent); }
.room__price .strike { text-decoration: line-through; color: var(--color-sub); font-weight:500; font-size: 13px; }
.room__pp { font-size: 11px; color: var(--color-sub); }
.room__charge { font-size: 11px; color: var(--color-sub); letter-spacing: .04em; }
/* 料金の数字は等幅＆字間を詰めてはみ出しを防止（最大6桁想定・長期/貸切の桁増にも耐える） */
.plan__from .amt, .summary__price .amt-main, .modal__price-table td, .selpop__price, .sum-save { font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }

/* ---------- オプション ---------- */
.opt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px,1fr)); gap: 16px; }
.opt {
  display: flex; flex-direction: column; border: 2px solid var(--color-ink); background:#fff; overflow: hidden;
}
.opt.is-on { box-shadow: 0 0 0 3px var(--color-accent); }
.opt__media { background:#e6e2d6; aspect-ratio: 16/10; overflow: hidden; display:flex; align-items:center; justify-content:center; position: relative; }
.opt__media img { width:100%; height:100%; object-fit: cover; }
.opt__icon { font-size: 38px; }
.opt__body { padding: 10px 12px 11px; display:flex; flex-direction: column; gap: 5px; flex: 1; }
.opt__name { font-size: 13.5px; font-weight: 700; line-height: 1.35; letter-spacing: .03em; }
.opt__meta { font-size: 12px; color: var(--color-ink); font-weight: 700; }
.opt__meta .unit { color: var(--color-sub); font-weight: 500; }
.opt__meta .inv { color: var(--color-success); font-weight: 700; margin-left: 8px; }
.opt__price { font-size: 14px; font-weight: 700; }
.opt__row { display:flex; align-items:center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 4px; }
.opt__inv { font-size: 11px; }
.included-pill { display:inline-block; font-size: 11px; font-weight: 700; color: var(--color-success); border: 1px solid var(--color-success); border-radius: 2px; padding: 2px 7px; }
.opt-note { font-size: 12px; color: var(--color-sub); margin-top: 10px; }

/* ---------- 比較表 ---------- */
.cmp-cta {
  display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%;
  min-height: 64px; padding: 12px 20px; margin-top: 4px;
  background: var(--color-ink); color: #fff; border: 3px solid var(--color-ink); border-radius: 2px;
  font-family: var(--font-button); font-size: clamp(15px, 2vw, 18px); font-weight: 700; letter-spacing: .04em;
  transition: opacity var(--t-fast);
}
.cmp-cta:hover { opacity: .88; }
.cmp-cta.is-open { background: #fff; color: var(--color-ink); }
.cmp-cta .ic { font-size: 22px; }
.cmp-cta .arw { font-weight: 400; transition: transform var(--t-fast); }
.cmp-cta.is-open .arw { transform: rotate(180deg); }
.cmp-toggle { font-size: 13px; color: var(--color-link); text-decoration: underline; background:none; border:0; }
.cmp-wrap { overflow-x: auto; border: 2px solid var(--color-ink); background:#fff; margin-top: 6px; }
table.cmp { border-collapse: collapse; width: 100%; min-width: 640px; font-size: 13px; }
table.cmp th, table.cmp td { padding: 9px 12px; border-bottom: 2px dotted var(--color-rule); text-align: right; letter-spacing: .02em; }
table.cmp th:first-child, table.cmp td:first-child { text-align: left; }
table.cmp thead th { font-family: var(--font-display); font-weight: 400; font-size: 14px; background: #faf8f2; position: sticky; top: 0; }
table.cmp td.amt { font-weight: 700; }
table.cmp tr.is-sel { background: rgba(199,154,59,.10); }
table.cmp .mini-inv { font-size: 11px; }

/* ---------- サマリ（下部固定） ---------- */
.summary {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; background: var(--color-ink); color: #fff;
}
.summary__in { max-width: 1180px; margin: 0 auto; padding: 10px var(--pad-x); display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.summary__sel { font-size: 12px; letter-spacing: .04em; line-height: 1.7; flex: 1 1 280px; min-width: 0; }
.summary__sel b { font-weight: 700; }
.summary__sel .chip { display:inline-block; background: rgba(255,255,255,.12); padding: 2px 8px; border-radius: 2px; margin-right: 6px; }
.summary__price { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: flex-end; gap: 2px 8px; text-align: right; }
.summary__price .amt-main { font-size: 28px; font-weight: 700; line-height: 1; }
.summary__price .amt-main .yen { font-size: 16px; }
.summary__price .amt-sub { flex-basis: 100%; font-size: 12px; color: #d8d3c4; margin-top: 4px; }
.summary__price .amt-sub .alt { color:#fff; }
.summary__pp { font-size: 12px; color:#d8d3c4; }
.summary__cta {
  height: 46px; padding: 0 22px; background: var(--color-accent-fill); color: #2a2113; border: 0; border-radius: 2px;
  font-family: var(--font-button); font-weight: 700; font-size: 17px; letter-spacing: .04em; display:flex; align-items:center; gap:10px;
  transition: opacity var(--t-fast);
}
.summary__cta:hover { opacity: .9; }
.summary__cta:disabled { background: #6c6862; color: #cfcabf; cursor: not-allowed; }
.summary__cta .arw { font-weight: 400; }
.summary__handle { display: none; }

/* ---------- 免責・フッター ---------- */
.disclaimer { font-size: 10.5px; color: var(--color-sub); line-height: 1.7; letter-spacing: .02em; margin: 24px 0 8px; }
.app-footer { background: var(--color-ink); color: var(--color-footer-text); margin-top: 30px; padding: 24px var(--pad-x); font-size: 12px; letter-spacing: .06em; }
.app-footer__link { font-family: var(--font-display); font-size: 16px; color: #fff; text-decoration: none; letter-spacing: .05em; }
.app-footer__link:hover { text-decoration: underline; }
.app-footer__note { margin-top: 7px; font-size: 11px; color: var(--color-footer-text); letter-spacing: .03em; }

/* ---------- モーダル（詳細・写真） ---------- */
/* 背面スクロール防止：bodyをロック中は固定（topはJSで-scrollY） */
body.scroll-locked { position: fixed; left: 0; right: 0; width: 100%; overflow: hidden; }
.modal-back { position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 80; display:none; align-items: center; justify-content: center; padding: 20px; overscroll-behavior: contain; }
.modal-back.show { display: flex; }
.modal { background:#fff; border: 2px solid var(--color-ink); max-width: 720px; width: 100%; max-height: 88vh; overflow: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.modal__head { display:flex; align-items:center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 2px dotted var(--color-rule); position: sticky; top:0; background:#fff; }
.modal__title { font-family: var(--font-display); font-size: 16px; letter-spacing: .02em; line-height: 1.35; }
.modal__close { border: 2px solid var(--color-ink); background:#fff; width: 38px; height: 38px; border-radius: 2px; font-size: 18px; }
.modal__body { padding: 18px 20px 24px; }
.modal__gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px,1fr)); gap: 8px; margin-bottom: 14px; }
.modal__gallery figure { margin:0; }
.modal__gallery img { aspect-ratio: 4/3; object-fit: cover; border: 1px solid var(--color-rule); border-radius: 2px; }
.modal__gallery figcaption { font-size: 11px; color: var(--color-sub); margin-top: 3px; line-height: 1.4; }
/* 折り返しの改行は詰めて(line-height)、意図的な改行(<br>)は段落間として広めに空ける＝ブロックが読みやすい */
.modal__desc { font-size: 13.5px; line-height: 1.6; overflow-wrap: anywhere; }
.modal__desc br { content: ""; display: block; margin-top: 0.55em; }
.modal__desc img { border-radius: 2px; margin: 8px 0; max-width: 100%; height: auto; }
.modal__desc p { margin: 0 0 10px; }
/* figure/div等のブラウザ既定マージン(figureは左右40px)を消して謎の余白を防ぐ */
.modal__desc figure, .modal__desc div, .modal__desc dl, .modal__desc dd { margin: 0; }
.modal__desc > *:first-child { margin-top: 0; }
.modal__desc > *:last-child { margin-bottom: 0; }
.modal__desc ul, .modal__desc ol { margin: 8px 0; padding-left: 1.3em; }
.modal__desc blockquote { margin: 8px 0; padding: 0 0 0 12px; border-left: 3px solid var(--color-rule); }
.modal__price-table { width: 100%; border-collapse: collapse; font-size: 13px; margin: 12px 0; }
.modal__price-table th, .modal__price-table td { border-bottom: 2px dotted var(--color-rule); padding: 7px 10px; text-align: right; }
.modal__price-table th:first-child, .modal__price-table td:first-child { text-align: left; font-family: var(--font-display); }
.modal__price-table .occ-more td { color: var(--color-accent); font-weight: 700; text-align: left; font-family: var(--font-body); font-size: 12px; }

/* ---------- トースト（コピーしました等） ---------- */
.toast-wrap { position: fixed; left: 50%; bottom: 180px; transform: translateX(-50%); z-index: 120; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.toast {
  background: var(--color-ink); color: #fff; padding: 11px 20px; border-radius: 4px; font-size: 13px; font-weight: 700;
  letter-spacing: .04em; box-shadow: 0 6px 20px rgba(0,0,0,.25); display: flex; align-items: center; gap: 8px;
  opacity: 0; transform: translateY(8px); transition: opacity .2s, transform .2s;
}
.toast.show { opacity: 1; transform: translateY(0); }
.toast .ic { color: var(--color-accent); font-size: 15px; }

/* ---------- 問い合わせモーダル ---------- */
.inq-lead { font-size: 14px; line-height: 1.9; margin: 0 0 14px; }
.inq-box { position: relative; border: 2px solid var(--color-ink); background: #faf8f2; border-radius: 2px; padding: 14px; margin-bottom: 12px; }
.inq-box textarea { width: 100%; border: 0; background: transparent; resize: vertical; min-height: 200px; font-family: var(--font-body); font-size: 13px; line-height: 1.8; color: var(--color-ink); }
.inq-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.inq-actions .btn { flex: 1 1 200px; height: 52px; border-radius: 2px; font-family: var(--font-button); font-weight: 700; font-size: 15px; letter-spacing: .04em; display: flex; align-items: center; justify-content: center; gap: 8px; border: 3px solid var(--color-ink); }
.inq-actions .btn--copy { background: #fff; color: var(--color-ink); }
.inq-actions .btn--copy:hover { background: var(--color-accent-soft); }
.inq-actions .btn--form { background: var(--color-accent-fill); border-color: var(--color-accent-fill); color: #2a2113; }
.inq-actions .btn--form:hover { opacity: .9; }
.inq-alt { font-size: 12px; color: var(--color-sub); margin-top: 12px; line-height: 1.7; }
.inq-alt a { color: var(--color-link); text-decoration: underline; }

/* ---------- 予約ワンクッション確認 ---------- */
.bc-lead { font-size: 13px; line-height: 1.7; margin: 0 0 12px; color: var(--color-sub); }
.bc-list { list-style: none; margin: 0 0 12px; padding: 0; }
.bc-item { display: flex; gap: 11px; align-items: center; padding: 9px 2px; border-bottom: 1px dotted var(--color-rule); }
.bc-item:first-child { border-top: 1px dotted var(--color-rule); }
.bc-tx { font-size: 13.5px; line-height: 1.5; font-weight: 600; color: var(--color-ink); }
.bc-ic { flex-shrink: 0; width: 30px; height: 30px; border: 2px solid var(--color-accent); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--color-accent); background: #fff; }
.bc-ic .ic { width: 16px; height: 16px; }
.bc-note { background: #faf3e0; border-left: 3px solid var(--color-accent); padding: 9px 12px; font-size: 12px; line-height: 1.6; color: #4a3c1e; margin: 0 0 12px; border-radius: 0 4px 4px 0; }
/* 男女別ドミ（2部屋）の操作図解 */
.dr-flow { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 8px 0 14px; }
.dr-step { width: 100%; display: flex; align-items: center; gap: 10px; border: 2px solid var(--color-ink); border-radius: 6px; padding: 10px 12px; background: #fff; }
.dr-no { flex-shrink: 0; font-family: var(--font-display); font-size: 13px; color: #2a2113; background: var(--color-accent-fill); border-radius: 999px; padding: 2px 11px; letter-spacing: .04em; }
.dr-room { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; font-size: 15px; white-space: nowrap; flex-shrink: 0; }
.dr-room .dr-ic { display: inline-flex; } .dr-room .ic { width: 18px; height: 18px; }
.dr-room--m { color: #3a6ea5; } .dr-room--f { color: #b4503f; }
.dr-do { margin-left: auto; font-size: 11.5px; color: var(--color-sub); font-weight: 700; text-align: right; line-height: 1.4; }
.dr-arrow { color: var(--color-accent); display: inline-flex; } .dr-arrow .ic { width: 22px; height: 22px; }
.dr-tip { display: flex; gap: 7px; align-items: flex-start; background: #eef3fb; border-left-color: #3a6ea5; }
.dr-tip__ic { flex-shrink: 0; color: #3a6ea5; display: inline-flex; } .dr-tip__ic .ic { width: 16px; height: 16px; }
.bc-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.bc-actions .btn { flex: 1 1 200px; height: 54px; border-radius: 2px; font-family: var(--font-button); font-weight: 700; font-size: 15px; letter-spacing: .04em; display: flex; align-items: center; justify-content: center; gap: 8px; border: 3px solid var(--color-ink); }
.bc-actions .btn--form { background: var(--color-accent-fill); border-color: var(--color-accent-fill); color: #2a2113; }
.bc-actions .btn--copy { background: #fff; color: var(--color-ink); }
.bc-actions .btn:hover { opacity: .9; }

/* ---------- ローディング ---------- */
.loading { padding: 80px 0; text-align: center; color: var(--color-sub); font-family: var(--font-display); font-size: 20px; }

/* ---------- レスポンシブ ---------- */
@media (max-width: 760px) {
  body { padding-bottom: 168px; } /* JSで実測調整。これは初期フォールバック */
  .app-header__in { gap: 6px 10px; padding: 11px var(--pad-x); flex-wrap: nowrap; align-items: center; }
  .app-title { font-size: 16px; letter-spacing: 0.01em; line-height: 1.25; flex: 1; min-width: 0; overflow-wrap: anywhere; }
  /* 条件バー：チェックイン・泊数・人数を1行に、料金区分は次行。見出し/入力を小さく＆上下を詰める */
  .condbar__in { gap: 3px 7px; padding: 6px var(--pad-x); align-items: flex-end; }
  .field { flex: 1 1 auto; min-width: 0; gap: 2px; }
  .field > label { font-size: 10.5px; letter-spacing: 0.02em; }
  .field input[type="date"], .field select, .people-trigger { height: 34px; font-size: 12.5px; padding: 0 6px; width: 100%; min-width: 0; max-width: 100%; }
  .field input[type="date"] { -webkit-appearance: none; appearance: none; }
  .condbar__in > .field:nth-child(1) { flex: 1.7 1 0; }   /* チェックイン（日付入力は広め） */
  .condbar__in > .field:nth-child(2) { flex: 0.75 1 0; }  /* 泊数 */
  .people-field { flex: 1.2 1 0; }                         /* ご利用人数 */
  .people-trigger .caret { font-size: 10px; }
  /* 人数ポップは画面右にはみ出さないよう右端アンカー＆ビューポート内に収める */
  .people-pop { width: min(300px, calc(100vw - 24px)); left: auto; right: 0; }
  /* グリッド類：モバイルは全カード2列。写真・文字・ボタンを2列幅に最適化して縦の長さを抑える */
  .plan-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .room-list { grid-template-columns: 1fr 1fr; gap: 10px; padding: 14px; }
  .opt-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  /* バッジ・在庫タグを小さく。選択チェック丸に重ならないよう幅を制限して折り返す */
  .badge { font-size: 9px; padding: 2px 6px; letter-spacing: .03em; }
  .plan__badges { top: 6px; left: 6px; gap: 4px; max-width: calc(100% - 44px); }
  .room__inv { font-size: 9px; padding: 2px 6px; top: 6px; left: 6px; max-width: calc(100% - 44px); }
  .plan__from .lbl { white-space: nowrap; }
  /* プランカード */
  .plan__body { padding: 8px 9px 9px; gap: 4px; }
  .plan__name { font-size: 12px; line-height: 1.25; }
  .plan__meta { font-size: 10px; letter-spacing: .02em; }
  .plan__from { gap: 5px; }
  .plan__from .lbl { font-size: 10px; }
  .plan__from .amt { font-size: 16px; }
  .plan__avail { font-size: 10px; }
  /* 部屋カード */
  .room__body { padding: 8px 9px 9px; gap: 3px; }
  .room__name { font-size: 11.5px; }
  .room__cap { font-size: 10px; }
  .room__price .row .k { font-size: 10px; }
  .room__price .reg, .room__price .mem { font-size: 14px; }
  .room__pp, .room__charge { font-size: 9.5px; }
  .cap-over { font-size: 11px; }
  /* オプションカード */
  .opt__body { padding: 8px 9px 9px; gap: 3px; }
  .opt__name { font-size: 12px; line-height: 1.3; }
  .opt__meta { font-size: 10px; }
  .opt__desc { font-size: 10px; max-height: 3em; }
  .opt__more { font-size: 10px; padding: 2px 6px 2px 9px; }
  .opt__price { font-size: 12.5px; }
  .opt__row { gap: 6px; flex-wrap: wrap; }
  .opt__quick { font-size: 10.5px; padding: 3px 8px; }
  /* カード内の詳細・別の日ボタンは2列幅でも横並び（縦積みをやめて縦の長さを削る） */
  .card-actions { flex-direction: row; gap: 4px; flex-wrap: nowrap; }
  .mini-btn { flex: 1 1 0; width: auto; height: 28px; font-size: 10px; padding: 0 4px; gap: 3px; letter-spacing: 0; overflow: hidden; }
  .mini-btn .ic { font-size: 12px; width: 1em; height: 1em; }
  .section__head { gap: 6px; }
  .section__lead { font-size: 12px; }
  /* カレンダー：セルを小さく＋7列が必ず収まるように */
  .cal-grid { gap: 3px; }
  .cal-cell { min-height: 48px; padding: 3px 2px; }
  .cal-cell .d { font-size: 11px; } .cal-cell .p { font-size: 8px; letter-spacing: -0.3px; } .cal-cell .iv { font-size: 8px; }
  .cal-head .mon { font-size: 17px; }
  /* モーダル */
  .modal { max-height: 92vh; }
  .modal__body { padding: 16px 13px 22px; }   /* 横余白を詰めてカレンダー7列分の幅を確保 */
  .modal__gallery { grid-template-columns: 1fr 1fr; }
  /* サマリ：モバイルは版面を確保するため最小限に圧縮（上下パディングも詰める） */
  .summary__in { gap: 4px 12px; padding: 6px var(--pad-x); }
  .summary__sel { display: none; }              /* 選択中タグ列は上で選択済み＝冗長なので隠す */
  .summary__price { text-align: left; flex: 1 1 auto; display: flex; align-items: baseline; justify-content: flex-start; gap: 2px 10px; flex-wrap: wrap; }
  .summary__price .amt-main { font-size: 20px; line-height: 1.1; }
  .summary__price .amt-main .yen { font-size: 12px; }
  .summary__price .amt-sub { display: none; }   /* 「1泊・オプション込」は省略 */
  .summary__pp { font-size: 11.5px; }
  .summary__ctas { flex: 1 1 100%; gap: 7px; }
  .summary__cta { justify-content: center; height: 38px; font-size: 14.5px; padding: 0 12px; }
  .summary__inquire { height: 38px; font-size: 12.5px; padding: 0 10px; }
  .summary__optnote { font-size: 10.5px; margin-top: 1px; }
}
@media (max-width: 380px) {
  /* 極小画面でも2列を維持しつつ間隔だけ詰める */
  .plan-grid, .room-list, .opt-grid { gap: 8px; }
  .room-list { padding: 12px; }
  .mini-btn .ic { display: none; }
  .mini-btn { padding: 0 2px; }
}

/* ===== 行程タイムライン（えらんだ内容の1日の流れ） ===== */
#timeline-host { display: flex; flex-direction: column; gap: 18px; }
.tl-note { font-size: 11px; color: var(--color-sub); letter-spacing: .02em; margin: 0; }
.tl-lead-hint { color: var(--color-accent); font-weight: 700; font-size: .92em; }
/* タップで時間変更できるオプションカード */
.tl-ev--editable .tl-card { cursor: pointer; position: relative; transition: box-shadow var(--t-fast), border-color var(--t-fast); }
.tl-ev--editable .tl-card:hover { border-color: var(--color-accent); box-shadow: 0 0 0 2px var(--color-accent-soft); }
.tl-edit { position: absolute; top: 8px; right: 8px; color: var(--color-accent); display: inline-flex; }
.tl-edit .ic { width: 15px; height: 15px; }
.tl-ev--editable .tl-body { padding-right: 18px; }
/* 時間・日にち選択ピッカー */
.sched-label { font-size: 12px; font-weight: 700; color: var(--color-sub); margin: 14px 0 6px; }
.sched-label:first-child { margin-top: 0; }
.sched-days { display: flex; flex-wrap: wrap; gap: 6px; }
.sched-day { border: 1.5px solid var(--color-rule); background: #fff; color: var(--color-ink); border-radius: 999px; padding: 7px 14px; font-size: 13px; font-weight: 700; cursor: pointer; transition: .15s; }
.sched-day:hover { border-color: var(--color-accent); }
.sched-day.is-on { background: var(--color-accent-fill); border-color: var(--color-accent-fill); color: #2a2113; }
.sched-time { width: 100%; height: 46px; border: 2px solid var(--color-ink); border-radius: 2px; background: #fff; font-size: 16px; padding: 0 10px; }
.sched-hint { font-size: 11.5px; color: var(--color-sub); margin: 8px 0 0; }
.sched-apply { width: 100%; margin-top: 16px; justify-content: center; }
.tl-day { background: #fff; border: 2px solid var(--color-ink); border-radius: 4px; padding: 16px 16px 8px; }
.tl-day__head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 2px dotted var(--color-rule); flex-wrap: wrap; }
.tl-day__badge { font-family: var(--font-display); font-size: 20px; color: #2a2113; background: var(--color-accent-fill); padding: 1px 13px; border-radius: 2px; letter-spacing: .05em; line-height: 1.55; }
.tl-day__date { font-family: var(--font-display); font-size: 16px; color: var(--color-sub); letter-spacing: .03em; }

.tl-list { position: relative; }
.tl-ev { display: grid; grid-template-columns: 68px 22px 1fr; gap: 0 10px; align-items: start; }
.tl-time { text-align: right; padding-right: 2px; font-family: var(--font-display); font-size: 13px; color: var(--color-ink); padding-top: 12px; letter-spacing: 0; white-space: nowrap; }
.tl-mark { position: relative; display: flex; justify-content: center; }
.tl-mark::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; transform: translateX(-50%); background: repeating-linear-gradient(var(--color-rule) 0 4px, transparent 4px 8px); }
.tl-ev:first-child .tl-mark::before { top: 18px; }
.tl-ev:last-child .tl-mark::before { bottom: calc(100% - 18px); }
.tl-dot { position: relative; z-index: 1; margin-top: 12px; width: 13px; height: 13px; border-radius: 50%; background: #fff; border: 2px solid var(--color-accent); box-shadow: 0 0 0 3px #fff; }
.tl-ev--in .tl-dot, .tl-ev--out .tl-dot { background: var(--color-accent-fill); }
.tl-ev--rest .tl-dot { border-color: var(--color-ink); }

.tl-card { display: flex; align-items: flex-start; gap: 9px; background: #fff; border: 2px solid var(--color-ink); border-radius: 4px; padding: 9px 12px; margin-bottom: 12px; box-shadow: 2px 2px 0 rgba(199,154,59,.18); }
.tl-ev--in .tl-card, .tl-ev--out .tl-card { border-color: var(--color-accent); box-shadow: 2px 2px 0 rgba(199,154,59,.32); }
.tl-ev--free .tl-card { background: #faf7ee; }
.tl-ic { flex-shrink: 0; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--color-accent-soft); color: #5a4718; margin-top: 1px; }
.tl-ic .ic { width: 17px; height: 17px; }
.tl-body { min-width: 0; flex: 1; }
.tl-label { font-family: var(--font-display); font-size: 16px; line-height: 1.35; color: var(--color-ink); letter-spacing: .02em; }
.tl-sub { font-size: 12.5px; line-height: 1.55; color: var(--color-sub); margin-top: 2px; word-break: break-word; }
.tl-incl { display: inline-block; font-family: var(--font-body); font-size: 10.5px; font-weight: 700; color: #5a4718; background: var(--color-accent-soft); border-radius: 2px; padding: 1px 6px; margin-left: 4px; vertical-align: 1px; }

/* 小野川温泉セクション */
.tl-onsen { background: #f3f6f6; border: 2px solid var(--color-ink); border-radius: 4px; padding: 16px; }
.tl-onsen__head { width: 100%; display: flex; align-items: center; gap: 11px; background: transparent; border: 0; padding: 0; margin: 0; text-align: left; color: inherit; font: inherit; cursor: pointer; }
.tl-onsen__chev { margin-left: auto; flex-shrink: 0; color: var(--color-accent); display: inline-flex; transition: transform .2s ease; }
.tl-onsen__chev .ic { width: 20px; height: 20px; }
.tl-onsen:not(.is-collapsed) .tl-onsen__chev { transform: rotate(180deg); }
.tl-onsen__count { display: inline-block; font-weight: 700; color: #5a4718; background: var(--color-accent-soft); border-radius: 999px; padding: 0 8px; font-size: 11px; }
.tl-onsen__panel { margin-top: 14px; }
.tl-onsen.is-collapsed .tl-onsen__panel { display: none; }
.tl-onsen__ic { flex-shrink: 0; width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: #fff; border: 2px solid var(--color-ink); color: var(--color-ink); }
.tl-onsen__ic .ic { width: 21px; height: 21px; }
.tl-onsen__htxt { min-width: 0; }
.tl-onsen__title { font-family: var(--font-display); font-size: 18px; line-height: 1.3; color: var(--color-ink); letter-spacing: .02em; }
.tl-onsen__lead { font-size: 12.5px; color: var(--color-sub); margin-top: 3px; line-height: 1.5; }
.tl-onsen__list { border: 2px solid var(--color-rule); border-radius: 4px; overflow: hidden; background: #fff; }
.tl-onsen__row { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "name fee" "hours fee"; gap: 1px 10px; padding: 8px 12px; border-bottom: 1px dotted var(--color-rule); align-items: center; }
.tl-onsen__row:last-child { border-bottom: 0; }
.tl-onsen__row.is-pub { background: #fbf6e9; }
.tl-onsen__name { grid-area: name; font-weight: 700; font-size: 13px; color: var(--color-ink); }
.tl-onsen__row.is-pub .tl-onsen__name::after { content: "外湯"; font-family: var(--font-body); font-size: 10px; font-weight: 700; color: #5a4718; background: var(--color-accent-soft); border-radius: 2px; padding: 0 5px; margin-left: 6px; vertical-align: 1px; }
.tl-onsen__hours { grid-area: hours; font-size: 11.5px; color: var(--color-sub); display: inline-flex; align-items: center; gap: 4px; }
.tl-onsen__clk { display: inline-flex; color: var(--color-accent); } .tl-onsen__clk .ic { width: 13px; height: 13px; }
.tl-onsen__fee { grid-area: fee; font-size: 12px; font-weight: 700; color: var(--color-ink); text-align: right; white-space: nowrap; }
.tl-onsen__foot { font-size: 11px; color: var(--color-sub); line-height: 1.6; margin-top: 10px; }
.tl-onsen__src { color: var(--color-link); text-decoration: underline; white-space: nowrap; }

@media (max-width: 760px) {
  .tl-day { padding: 13px 12px 6px; }
  .tl-day__badge { font-size: 17px; }
  .tl-day__date { font-size: 14px; }
  .tl-ev { grid-template-columns: 62px 18px 1fr; gap: 0 6px; }
  .tl-time { font-size: 11px; padding-top: 11px; }
  .tl-card { padding: 8px 10px; gap: 8px; }
  .tl-label { font-size: 14.5px; }
  .tl-sub { font-size: 12px; }
  .tl-ic { width: 27px; height: 27px; } .tl-ic .ic { width: 15px; height: 15px; }
  .tl-onsen__row { grid-template-columns: 1fr; grid-template-areas: "name" "hours" "fee"; gap: 2px; }
  .tl-onsen__fee { text-align: left; }
}

/* ===== 最優先改善（2026-06-28 監査対応） ===== */
/* #2 料金区分の無料登録補足 */
.rate-free { display: inline; font-size: 10.5px; font-weight: 400; color: var(--color-sub); margin-left: 4px; white-space: nowrap; }
/* #2 サマリの会員割安提示 */
.sum-save { color: var(--color-accent); font-weight: 700; font-size: 12px; }
/* #6 人数プリセット */
.people-presets { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 4px; }
.people-presets button { flex: 1 1 auto; min-width: 64px; border: 1.5px solid var(--color-line, #d8d2c4); background: #fff; color: var(--color-ink); border-radius: 999px; padding: 6px 10px; font-size: 12px; font-weight: 700; cursor: pointer; transition: .15s; }
.people-presets button:hover { border-color: var(--color-accent); background: var(--color-accent-soft); }
/* #6 サマリ「内訳」小ボタン（合計の右・おひとりの左／CTA領域を広げない） */
.summary__price .sum-detail-btn { display: inline-flex; align-items: center; gap: 3px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.32); color: #fff; border-radius: 999px; padding: 2px 9px; font-size: 11px; font-weight: 700; cursor: pointer; line-height: 1.4; vertical-align: middle; }
.summary__price .sum-detail-btn:hover { background: rgba(255,255,255,.22); }
.summary__price .sum-detail-btn .ic { width: 12px; height: 12px; }
/* #5 選択内容ポップアップ（タグは整列＆クリックで該当箇所へジャンプ） */
.selpop { display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch; }
.selpop__chip { display: inline-flex; align-items: center; gap: 4px; background: var(--color-accent-soft); border: 1px solid var(--color-accent); border-radius: 999px; padding: 5px 12px; font-size: 13px; font-weight: 700; color: var(--color-ink); cursor: pointer; line-height: 1.4; text-align: left; transition: background var(--t-fast), color var(--t-fast); }
.selpop__chip::after { content: '›'; font-weight: 700; opacity: .55; margin-left: 1px; }
.selpop__chip:hover { background: var(--color-accent-fill); color: #2a2113; }
.selpop__hint { font-size: 11.5px; color: var(--color-sub); margin: 12px 0 0; }
.selpop__price { margin-top: 12px; padding-top: 10px; border-top: 1px dotted var(--color-line, #ddd); font-size: 18px; font-weight: 800; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.selpop__pp { font-size: 12px; font-weight: 700; color: var(--color-sub); }
/* 内訳タグから飛んだ先の一時ハイライト */
.sel-flash { animation: selFlash 1.6s ease; }
@keyframes selFlash { 0%,100% { box-shadow: 0 0 0 0 rgba(199,154,59,0); } 15% { box-shadow: 0 0 0 3px var(--color-accent); } 60% { box-shadow: 0 0 0 3px var(--color-accent); } }
/* #3 オプション「人数分」ワンタップ */
.opt__quick { display: inline-flex; align-items: center; align-self: flex-start; gap: 4px; border: 1.5px solid var(--color-accent); background: var(--color-accent-soft); color: var(--color-ink); border-radius: 999px; padding: 5px 12px; font-size: 12px; font-weight: 700; cursor: pointer; white-space: nowrap; touch-action: manipulation; }
.opt__quick:hover { background: var(--color-accent-fill); color: #2a2113; }
/* #4 予約確認：予約画面で選び忘れないオプションのリマインダー（表＋アイコン・コピー無し） */
.bc-opts { border: 1px solid var(--color-accent); border-radius: 6px; padding: 11px 12px; margin: 0 0 12px; background: #fffdf6; }
.bc-opts__h { display: flex; align-items: flex-start; gap: 6px; font-size: 12.5px; font-weight: 700; color: #4a3c1e; line-height: 1.55; margin-bottom: 8px; }
.bc-opts__h .ic { width: 17px; height: 17px; color: var(--color-accent); flex-shrink: 0; margin-top: 1px; }
.bc-opts__tbl { width: 100%; border-collapse: collapse; }
.bc-opts__tbl td { padding: 5px 4px; border-top: 1px dotted #e6dcc0; vertical-align: middle; font-size: 13px; }
.bc-opts__tbl tr:first-child td { border-top: 0; }
.bc-opts__ic { width: 22px; }
.bc-opts__ic .ic { width: 16px; height: 16px; color: var(--color-accent); display: block; }
.bc-opts__nm { font-weight: 700; }
.bc-opts__q { text-align: right; white-space: nowrap; font-weight: 700; color: var(--color-sub); }
/* #7 プランの貸切可タグ */
.badge--charter { background: var(--color-accent-fill); color: #2a2113; border-color: var(--color-accent-fill); }
/* 定員超過の理由表示（部屋カード価格欄） */
.cap-over { color: var(--color-error); font-weight: 700; font-size: 13px; line-height: 1.4; }

/* ===== tripla チャットボタンを下部固定サマリバーの上へ逃がす（予約ボタンと重ならないように） ===== */
/* --sim-summary-h は app.js の adjustBottomPad が実測して更新（バー高さに追従） */
#tripla-chat-circle-icon {
  bottom: calc(var(--sim-summary-h, 88px) + 14px) !important;
}
/* 内側の .triplabot-icon-container は position:relative。ここにも bottom を効かせると
   親（fixed）の持ち上げと二重にかかり、円ボタンだけがさらに上へずれる。必ず auto に戻す。 */
#tripla-chat-circle-icon .triplabot-icon-container {
  bottom: auto !important;
}

/* ===== tripla BRR（最安値保証）ウィジェット「とここと公式HPでお得に予約」を本ページでは隠す =====
   このシミュレーター自体が料金比較の画面なので、左下に別の日程・人数の会員/通常価格が
   常時出ると二重表示になり誤解を招く（例: シミュレーターは4名、BRRは1名の価格）。
   tripla管理画面のURLフィルターは全ドメイン共通で切り分けられないため、
   ここ（simulator.misawa-tokokoto.com）だけCSSで非表示にする。
   公式HP・guide.*（トリプラ予約/検索結果画面）は別オリジンで本CSSを読まないので、
   そちらでは従来どおり自動表示される。チャットボタンは残す（上のルール）。 */
#triplabot-brr-widget-app,
.triplabot-brr-widget-container {
  display: none !important;
}

/* ===== 本ページだけ triplaチャットUIを2/3サイズに（画面の主役は料金表なので存在感を下げる） =====
   円ボタン 80→53px / 吹き出し（#tripla-icon-message）216×119→144×79px。
   ・width/height ではなく transform なのは、吹き出しが iframe で中身ごと縮める必要があるため。
   ・transform-origin: bottom right で、右下の位置（上の bottom オフセット＝固定バー回避）を保ったまま縮む。
   ・吹き出しは tripla 側が inline で transition:0.3s を付けているので、縮小もアニメーションで馴染む。 */
#tripla-chat-circle-icon,
#tripla-icon-message {
  transform: scale(var(--sim-tripla-scale, .667)) !important;
  transform-origin: bottom right !important;
}

/* ===== 吹き出し（#tripla-icon-message）を円ボタンの「上」に積み直す =====
   tripla は吹き出しに bottom:100px をインラインで付ける（既定の円ボタン bottom:20px + 80px を想定した値）。
   本ページは円ボタンを固定バーの上まで持ち上げているので、その既定値のままだと吹き出しが円ボタンに
   覆いかぶさり、自動メッセージが2枚出たときに重なって見える。
   円ボタンの位置 + 縮小後の円ボタン高さ(80px×scale) + 余白8px を bottom に与えて積み直す。
   ※ transform-origin: bottom right なので、吹き出しは bottom を保ったまま上へ伸びる（2枚出ても重ならない）。 */
#tripla-icon-message {
  bottom: calc(var(--sim-summary-h, 88px) + 14px + 80px * var(--sim-tripla-scale, .667) + 8px) !important;
}

/* ===== 600ペルソナ検証 反映（2026-07-02） ===== */
/* #21 韓国語: 専用フォント＋字間の間延び解消 */
html[lang="ko"] { --font-body: "Noto Sans KR","Apple SD Gothic Neo","Noto Sans JP",system-ui,sans-serif; --font-display: "Noto Sans KR","Apple SD Gothic Neo",sans-serif; }
html[lang="ko"] body, html[lang="ko"] .app-title, html[lang="ko"] .h-slash { letter-spacing: normal; }
/* #28 在庫バッジ: 長いラベルが写真を覆わないよう2行clamp */
.room__inv { max-width: calc(100% - 16px); line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* #16 オプション在庫上限の注記 */
.opt__caps { font-size: 10.5px; color: var(--color-error); line-height: 1.4; }
/* #31 カルーセル: ドットで操作可能に */
.carousel__dots { pointer-events: auto; }
.carousel__dot { pointer-events: auto; cursor: pointer; }
/* #11 ドミ同室希望への案内 */
.dorm-hint { font-size: 10px; color: var(--color-sub); line-height: 1.4; margin-top: 2px; }

/* =========================================================================
   ステップタブ（2026-08-22）
   プラン/お部屋/オプションを縦に積むとモバイルでページが極端に長くなるので、
   1ステップ＝1タブにした。切り替えは「タブの中身だけ」が横にスライドする
   （ページ全体が入れ替わると、どこを見ていたか分からなくなるため）。
   ========================================================================= */
/* 条件バーの直下に貼り付けて、いまどのステップにいるかを常に見せる。
   --condbar-h は app.js の syncStickyOffsets が実測して入れる（言語や折返しで高さが変わるため）。*/
.steptabs__wrap {
  position: sticky; top: var(--condbar-h, 74px); z-index: 39;
  display: flex; align-items: center; gap: 6px;
  padding: 12px var(--pad-x); margin: 0 calc(var(--pad-x) * -1);
  background: var(--color-bg);
}
.steptabs__wrap > .steptabs { flex: 1 1 auto; min-width: 0; }
.steptabs {
  position: relative; background: #fff;
  border: 2px solid var(--color-ink); border-radius: 2px; overflow: hidden;
}
.steptabs__scroll {
  position: relative; display: flex; gap: 0;
  overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}
.steptabs__scroll::-webkit-scrollbar { display: none; }
/* 端のぼかし＝「まだ先がある」。切れているだけに見えないようにする */
.steptabs::before, .steptabs::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 42px; pointer-events: none; z-index: 2;
  opacity: 0; transition: opacity .18s ease;
}
.steptabs::before { left: 0; background: linear-gradient(90deg, #fff 30%, rgba(255,255,255,0)); }
.steptabs::after { right: 0; background: linear-gradient(270deg, #fff 30%, rgba(255,255,255,0)); }
.steptabs.can-left::before, .steptabs.can-right::after { opacity: 1; }
/* 送りボタンは帯の外に置く。中に重ねるとタブの文字に被って、かえって「切れている」ように見えるため。
   スクロール余地が無い側は幅0にたたんで、desktop では帯が端まで使える。 */
.steptabs__arw {
  flex: 0 0 auto; width: 0; overflow: hidden; opacity: 0; padding: 0; border: 0;
  height: 30px; border-radius: 50%; background: #fff; color: var(--color-ink);
  display: inline-flex; align-items: center; justify-content: center;
  /* width はアニメーションさせない。0→30 のトランジションは、クラスが付くタイミング次第で
     0 のまま止まることがあり、送りボタンが出ない事故になる（実機で発生）。出し入れは即時に。 */
  transition: opacity .18s ease;
}
.steptabs__arw .ic { width: 15px; height: 15px; }
.steptabs__wrap.can-left .steptabs__arw--l,
.steptabs__wrap.can-right .steptabs__arw--r {
  width: 30px; opacity: 1; border: 2px solid var(--color-ink);
}
.steptabs__arw:hover { background: var(--color-accent-fill); }
.steptab {
  flex: 1 0 auto; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  border: 0; border-right: 2px dotted var(--color-rule); background: transparent; color: var(--color-sub);
  padding: 11px 14px 12px; font-family: var(--font-body); font-size: 13.5px; font-weight: 700; letter-spacing: .03em;
  white-space: nowrap; transition: color var(--t-fast), background var(--t-fast);
}
.steptab:last-of-type { border-right: 0; }
.steptab__no {
  flex-shrink: 0; width: 21px; height: 21px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--color-rule); color: #fff; font-family: var(--font-display); font-size: 12px; line-height: 1;
  transition: background var(--t-fast), color var(--t-fast);
}
.steptab__no .ic { width: 13px; height: 13px; }
.steptab:hover { background: var(--color-accent-soft); color: var(--color-ink); }
.steptab.is-done .steptab__no { background: var(--color-success); color: #fff; }
.steptab.is-on { color: var(--color-ink); }
.steptab.is-on .steptab__no { background: var(--color-accent-fill); color: #2a2113; }
.steptab.is-locked { opacity: .45; }
.steptab.is-locked:hover { background: transparent; color: var(--color-sub); }
/* 選択中タブの下線。位置は JS が実測して translateX するので、横スライドして見える */
.steptabs__ink {
  position: absolute; left: 0; bottom: 0; height: 4px; background: var(--color-accent-fill);
  transition: transform .3s cubic-bezier(.22,.7,.3,1), width .3s cubic-bezier(.22,.7,.3,1); pointer-events: none;
}

/* パネル：入れ替わりを横スライドで見せる（枠の中だけが動く） */
.steppanes { position: relative; overflow: hidden; }
.steppane { display: none; }
.steppane.is-on { display: block; }
.steppane.is-leaving { display: block; position: absolute; top: 0; left: 0; width: 100%; pointer-events: none; }
@keyframes panelInR { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes panelInL { from { transform: translateX(-100%); } to { transform: translateX(0); } }
@keyframes panelOutL { from { transform: translateX(0); } to { transform: translateX(-100%); } }
@keyframes panelOutR { from { transform: translateX(0); } to { transform: translateX(100%); } }
.steppanes.dir-next .steppane.is-on { animation: panelInR .32s cubic-bezier(.22,.7,.3,1) both; }
.steppanes.dir-next .steppane.is-leaving { animation: panelOutL .32s cubic-bezier(.22,.7,.3,1) both; }
.steppanes.dir-prev .steppane.is-on { animation: panelInL .32s cubic-bezier(.22,.7,.3,1) both; }
.steppanes.dir-prev .steppane.is-leaving { animation: panelOutR .32s cubic-bezier(.22,.7,.3,1) both; }
@media (prefers-reduced-motion: reduce) {
  .steppanes .steppane { animation: none !important; }
  .steptabs__ink { transition: none; }
}
.pane-empty { padding: 44px 8px; text-align: center; color: var(--color-sub); font-size: 14px; }

/* ステップ末尾の 戻る／次へ */
.stepnav { display: flex; gap: 10px; align-items: stretch; margin: 22px 0 6px; }
.stepnav__back, .stepnav__next {
  height: 50px; border-radius: 2px; font-family: var(--font-button); font-weight: 700; font-size: 14.5px; letter-spacing: .04em;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 2px solid var(--color-ink);
}
.stepnav__back { flex: 0 0 auto; padding: 0 18px; background: #fff; color: var(--color-ink); }
.stepnav__back:hover { background: var(--color-accent-soft); }
.stepnav__back .ic { width: 17px; height: 17px; }
.stepnav__next { flex: 1 1 auto; background: var(--color-ink); color: #fff; }
.stepnav__next:hover { opacity: .9; }

/* ---------- はじめに（ミニ校長の全体案内） ---------- */
.guide { background: #fff; border: 2px solid var(--color-ink); border-radius: 2px; padding: 22px 22px 20px; margin-top: 18px; }
.guide__hero { display: flex; align-items: center; gap: 20px; }
.guide__char { width: 104px; height: auto; flex-shrink: 0; }
.guide__title { font-family: var(--font-display); font-size: clamp(21px, 3.2vw, 28px); line-height: 1.25; letter-spacing: .04em; }
.guide__lead { font-size: 13.5px; line-height: 1.9; color: var(--color-sub); margin: 8px 0 0; letter-spacing: .03em; }
.guide__steps { list-style: none; margin: 20px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.guide__step { display: flex; align-items: flex-start; gap: 10px; border: 2px solid var(--color-rule); border-radius: 2px; padding: 12px 13px; background: #fdfcf8; }
.guide__no {
  flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; background: var(--color-accent-fill); color: #2a2113;
  font-family: var(--font-display); font-size: 15px; display: inline-flex; align-items: center; justify-content: center; line-height: 1;
}
.guide__stx { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.guide__stx b { font-family: var(--font-display); font-size: 15.5px; font-weight: 400; letter-spacing: .03em; line-height: 1.3; }
.guide__stx small { font-size: 11.5px; line-height: 1.65; color: var(--color-sub); }
.guide__fin { display: flex; align-items: flex-start; gap: 10px; background: #faf3e0; border-left: 3px solid var(--color-accent); padding: 11px 14px; margin-top: 16px; }
.guide__fin-ic { flex-shrink: 0; color: var(--color-accent); display: inline-flex; margin-top: 2px; }
.guide__fin-ic .ic { width: 17px; height: 17px; }
.guide__fin-tx { margin: 0; font-size: 12.5px; line-height: 1.8; color: #4a3c1e; }
.guide__cta { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.guide__start {
  flex: 1 1 240px; min-height: 56px; background: var(--color-accent-fill); color: #2a2113; border: 3px solid var(--color-accent-fill);
  border-radius: 2px; font-family: var(--font-button); font-weight: 700; font-size: 17px; letter-spacing: .04em;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
}
.guide__start:hover { opacity: .9; }
.guide__tour {
  flex: 0 1 auto; min-height: 56px; padding: 0 20px; background: #fff; color: var(--color-ink); border: 3px solid var(--color-ink);
  border-radius: 2px; font-family: var(--font-button); font-weight: 700; font-size: 14px; letter-spacing: .03em;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.guide__tour:hover { background: var(--color-accent-soft); }
.guide__tour .ic { width: 1em; height: 1em; }

/* ---------- 空き状況カレンダー（各タブ上部・既定は畳む） ---------- */
.availcal { margin-top: 18px; border: 2px solid var(--color-ink); border-radius: 2px; background: #fff; }
.availcal__toggle {
  width: 100%; display: flex; align-items: center; gap: 10px; background: transparent; border: 0;
  padding: 12px 16px; font-family: var(--font-body); font-size: 14px; font-weight: 700; letter-spacing: .04em; color: var(--color-ink);
}
.availcal__toggle:hover { background: var(--color-accent-soft); }
.availcal__toggle .bico { color: var(--color-accent); }
.availcal__chev { margin-left: auto; color: var(--color-accent); display: inline-flex; transition: transform .2s ease; }
.availcal.is-open .availcal__chev { transform: rotate(180deg); }
.availcal__panel { padding: 4px 16px 16px; border-top: 2px dotted var(--color-rule); }
.availcal__head { display: flex; align-items: center; gap: 12px; margin: 12px 0 6px; flex-wrap: wrap; }
.availcal__head .nav { display: inline-flex; gap: 6px; }
.availcal__head .nav button { width: 36px; height: 34px; border: 2px solid var(--color-ink); background: #fff; border-radius: 2px; font-size: 15px; }
.availcal__head .nav button:disabled { opacity: .3; cursor: not-allowed; }
.availcal__cond { font-size: 12px; color: var(--color-sub); }
.availcal__months { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.availcal__mon { font-family: var(--font-display); font-size: 17px; margin-bottom: 6px; }
@media (max-width: 760px) {
  .availcal__months { grid-template-columns: 1fr; gap: 16px; }
  .availcal__panel { padding: 4px 10px 14px; }
  .availcal__toggle { padding: 10px 12px; font-size: 13px; }
}

/* ---------- 注意書きの軽量化（文章→アイコン付きリスト／ⓘタグ） ---------- */
.notelist { list-style: none; margin: 10px 0 12px; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.notelist__it { display: flex; gap: 8px; align-items: flex-start; }
.notelist__ic { flex-shrink: 0; color: var(--color-accent); display: inline-flex; margin-top: 1px; }
.notelist__ic .ic { width: 15px; height: 15px; }
.notelist__tx { font-size: 11.5px; line-height: 1.65; color: var(--color-sub); }
.notelist__tx b { color: var(--color-ink); font-weight: 700; }
.notelist--lg { margin: 0; gap: 12px; }
.notelist--lg .notelist__tx { font-size: 13.5px; line-height: 1.8; }
.notelist--lg .notelist__ic .ic { width: 19px; height: 19px; }
/* ドミトリーの男女内訳ピル＋ⓘタグ（長い注意書きの置き換え） */
.dorm-split { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin-top: 1px; }
.dorm-split__m, .dorm-split__f { font-size: 10.5px; font-weight: 700; border-radius: 999px; padding: 1px 8px; letter-spacing: .02em; }
.dorm-split__m { background: #e3edf6; color: #3a6ea5; }
.dorm-split__f { background: #f6e6ea; color: #b4503f; }
.note-chip {
  display: inline-flex; align-items: center; gap: 3px; background: #fff; border: 1px solid var(--color-accent);
  color: var(--color-sub); border-radius: 999px; padding: 1px 8px 1px 6px; font-size: 10.5px; font-weight: 700;
  letter-spacing: .02em; line-height: 1.5; cursor: pointer;
}
.note-chip:hover { background: var(--color-accent-fill); color: #2a2113; }
.note-chip .ic { width: 12px; height: 12px; }

@media (max-width: 760px) {
  .steptabs__wrap { top: var(--condbar-h, 46px); padding-top: 8px; padding-bottom: 8px; }
  .steptab { flex: 0 0 auto; padding: 9px 12px 10px; font-size: 12px; gap: 5px; }
  .steptab__no { width: 18px; height: 18px; font-size: 11px; }
  .steptabs__ink { height: 3px; }
  .guide { padding: 16px 14px 16px; margin-top: 12px; }
  .guide__hero { gap: 12px; }
  .guide__char { width: 74px; }
  .guide__lead { font-size: 12.5px; line-height: 1.8; }
  .guide__steps { grid-template-columns: 1fr; gap: 8px; }
  .guide__step { padding: 10px 11px; gap: 9px; }
  .guide__stx b { font-size: 14.5px; }
  .guide__stx small { font-size: 11px; }
  .guide__fin-tx { font-size: 12px; }
  .guide__cta { gap: 8px; }
  .guide__start { min-height: 50px; font-size: 15.5px; flex-basis: 100%; }
  .guide__tour { min-height: 44px; flex-basis: 100%; font-size: 13px; }
  .stepnav { margin: 16px 0 4px; gap: 8px; }
  .stepnav__back, .stepnav__next { height: 44px; font-size: 13.5px; }
  .stepnav__back { padding: 0 14px; }
  .dorm-split__m, .dorm-split__f, .note-chip { font-size: 9.5px; }
}
/* 2ヶ月並べると1セルが狭いので、料金は一段小さく詰めて省略記号を出さない */
.availcal .cal-cell { min-height: 52px; }
.availcal .cal-cell .p { font-size: 10px; letter-spacing: -0.4px; }
.availcal .cal-cell .iv { font-size: 8.5px; }
@media (max-width: 1000px) { .availcal__months { grid-template-columns: 1fr; gap: 16px; } }

/* =========================================================================
   子ども区分・キャラクター・クッキー同意バー（2026-08-22）
   ========================================================================= */

/* ---------- 人数ポップの子ども区分 ---------- */
.people-kids { border-top: 2px dotted var(--color-rule); margin-top: 4px; padding-top: 8px; }
.people-kids__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-family: var(--font-display); font-size: 14px; letter-spacing: .04em; margin-bottom: 2px; }
.people-kids .people-row { padding: 6px 0; border-bottom: 0; }
.people-kids .pk-l { font-size: 13px; }
.people-kids .pk-s { display: block; font-size: 10px; color: var(--color-sub); font-weight: 500; line-height: 1.5; margin-top: 1px; }
.people-kids .stepper { height: 38px; }
.people-kids .stepper button { width: 34px; font-size: 19px; }
.people-kids .stepper .val { min-width: 38px; font-size: 15px; }
.people-pop { max-height: min(78vh, 620px); overflow-y: auto; overscroll-behavior: contain; }

/* ---------- ミニ校長を散りばめる ---------- */
.section__head { position: relative; }
.section__mate { width: 62px; height: auto; margin-bottom: -2px; opacity: .96; }
.pane-empty { padding: 40px 8px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.pane-empty__mate { width: 78px; height: auto; }
.pane-empty__tx { margin: 0; color: var(--color-sub); font-size: 14px; }
.app-footer { position: relative; padding-left: calc(var(--pad-x) + 92px); }
.app-footer__mate { position: absolute; right: var(--pad-x); bottom: 0; width: 74px; height: auto; opacity: .5; filter: invert(1); pointer-events: none; }
@media (max-width: 760px) {
  .section__mate { width: 46px; }
  .pane-empty__mate { width: 64px; }
  .app-footer__mate { width: 56px; opacity: .42; }
}

/* ---------- tripla のクッキー同意バーを、とこことの見た目に寄せる ----------
   バーは tripla SDK が #tripla-cookie-consent に描く。文面とボタンは向こうの持ち物なので
   書き換えない。代わりに、
     ① 原文は「小さな注意書き」の位置まで下げる（9.5px・薄い色）
     ② 何を聞かれているのかは、ミニ校長のふきだし（.ck-bubble、app.js が差し込む）で伝える
     ③ OKはイチョウ色のピルにして、さらっと押せる導線にする
   既定は画面下を覆う全幅の黒帯で圧が強いので、小さなカードに寄せている。
   クラス名はハッシュ付きでリリースごとに変わりうるため、id と要素の並びで当てる。 */
#tripla-cookie-consent > div {
  position: fixed !important; z-index: 70 !important;
  left: 16px !important; right: auto !important;
  /* triplaのチャット丸ボタン（summary-h+14 に置いている・縮小後 約53px）の上に逃がす */
  bottom: calc(var(--sim-summary-h, 88px) + 78px) !important;
  top: auto !important;
  width: min(376px, calc(100vw - 32px)) !important;
  display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 6px 10px !important;
  background: #fff !important; color: var(--color-ink) !important;
  border: 2px solid var(--color-ink) !important; border-radius: 6px !important;
  box-shadow: 0 6px 22px rgba(0,0,0,.18) !important;
  padding: 12px 12px 10px 74px !important; margin: 0 !important;
  font-family: var(--font-body) !important; text-align: left !important;
}
/* ミニ校長（「おねがい」のポーズ）。ふきだしの主から見て左に立たせる */
#tripla-cookie-consent > div::before {
  content: ""; position: absolute; left: 6px; bottom: 6px; width: 62px; height: 86px;
  background: url("../img/character/a-20.svg") no-repeat center bottom / contain;
}
/* ふきだし本体。左向きのしっぽをキャラのほうへ出す */
#tripla-cookie-consent .ck-bubble {
  position: relative; flex: 1 1 100%; margin: 0 0 10px !important;
  background: var(--color-accent-soft); border: 2px solid var(--color-accent); border-radius: 12px;
  padding: 8px 11px; font-size: 12.5px; line-height: 1.65; font-weight: 700; letter-spacing: .01em;
  color: #4a3c1e;
}
/* しっぽは左下へ（ミニ校長のほう）。border三角の2枚重ねは角の線幅が不揃いに見えるので、
   45度回転した正方形1枚（背景色＋右下だけ本体と同じ2px枠）で作る */
#tripla-cookie-consent .ck-bubble::after {
  content: ""; position: absolute; left: 16px; bottom: -8px; width: 13px; height: 13px;
  background: var(--color-accent-soft);
  border-right: 2px solid var(--color-accent); border-bottom: 2px solid var(--color-accent);
  transform: rotate(45deg);
}
/* tripla の原文は小さな注意書きとして残す */
#tripla-cookie-consent span {
  flex: 1 1 100% !important; min-width: 0 !important;
  font-size: 9.5px !important; line-height: 1.5 !important; color: var(--color-sub) !important;
  letter-spacing: 0 !important; margin: 0 !important; opacity: .9 !important;
}
#tripla-cookie-consent a { color: var(--color-link) !important; text-decoration: underline !important; }
#tripla-cookie-consent br { display: none !important; }
#tripla-cookie-consent button {
  flex: 1 1 100% !important; margin: 4px 0 0 !important; width: 100% !important; max-width: none !important;
  height: 38px !important; padding: 0 20px !important;
  background: var(--color-accent-fill) !important; color: #2a2113 !important;
  border: 2px solid var(--color-accent) !important; border-radius: 999px !important;
  font-family: var(--font-button) !important; font-weight: 700 !important; font-size: 14px !important;
  letter-spacing: .04em !important; box-shadow: none !important;
}
#tripla-cookie-consent button:hover { opacity: .9 !important; }
@media (max-width: 760px) {
  #tripla-cookie-consent > div {
    left: 10px !important; width: calc(100vw - 20px) !important;
    padding: 10px 10px 9px 64px !important;
  }
  #tripla-cookie-consent > div::before { width: 54px; height: 76px; left: 4px; }
  #tripla-cookie-consent .ck-bubble { font-size: 12px; padding: 7px 10px; }
  #tripla-cookie-consent span { font-size: 9px !important; }
  #tripla-cookie-consent button { height: 36px !important; font-size: 13.5px !important; }
}

/* 条件バーの人数ボタンは折り返さない（折り返すと固定バーの高さが変わり、タブの貼り付き位置がずれる） */
.people-trigger #people-summary { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.people-trigger { white-space: nowrap; }
/* フッターのミニ校長は左側に（右下は tripla のチャットボタンの定位置） */
.app-footer__mate { right: auto; left: var(--pad-x); filter: none; opacity: .85; }
@media (max-width: 760px) {
  .app-footer { padding-bottom: 34px; }
  .app-footer__mate { opacity: .8; }
}

/* ---------- 宿泊／日帰りの入口（はじめにタブ） ---------- */
.guide__pick { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }
.guide__mode {
  display: flex; align-items: center; gap: 12px; text-align: left;
  background: #fff; border: 3px solid var(--color-ink); border-radius: 4px;
  padding: 14px 14px; color: var(--color-ink); transition: background var(--t-fast), box-shadow var(--t-fast);
}
.guide__mode:hover { background: var(--color-accent-soft); }
.guide__mode.is-on { background: var(--color-accent-fill); border-color: var(--color-accent-fill); color: #2a2113; }
.guide__mode-ic { flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%; background: var(--color-accent-soft);
  display: inline-flex; align-items: center; justify-content: center; color: #5a4718; }
.guide__mode.is-on .guide__mode-ic { background: #fff; }
.guide__mode-ic .ic { width: 20px; height: 20px; }
.guide__mode-tx { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.guide__mode-tx b { font-family: var(--font-display); font-size: 17px; font-weight: 400; letter-spacing: .03em; line-height: 1.25; }
.guide__mode-tx small { font-size: 11px; line-height: 1.6; color: var(--color-sub); }
.guide__mode.is-on .guide__mode-tx small { color: #5a4718; }
.guide__mode .arw { margin-left: auto; font-size: 18px; flex-shrink: 0; }
.badge--day { background: #3a6ea5; color: #fff; }
/* 日帰りでは宿泊専用の見出し番号・比較表を出さない（ステップ数が違うので番号が嘘になる） */
body.mode-day .step-no { display: none; }
body.mode-day #sec-compare { display: none; }
@media (max-width: 760px) {
  .guide__pick { grid-template-columns: 1fr; gap: 8px; margin-top: 14px; }
  .guide__mode { padding: 11px 12px; gap: 10px; border-width: 2px; }
  .guide__mode-ic { width: 32px; height: 32px; }
  .guide__mode-ic .ic { width: 17px; height: 17px; }
  .guide__mode-tx b { font-size: 15.5px; }
  .guide__mode-tx small { font-size: 10.5px; }
}
/* hidden 属性は UA の display:none だが、.steptab は display:inline-flex を明示しているので
   作者スタイルが勝って消えない（日帰りでお部屋タブが残っていた）。明示的に打ち消す。 */
.steptab[hidden] { display: none; }
/* .field も display:flex を明示しているので hidden 属性が効かない（日帰りで泊数が残っていた） */
.field[hidden] { display: none; }