/* ELM高田馬場 スタイル
   色：楡（elm）の樹皮と葉に寄せた深緑と、和紙寄りのグレー。
   短期宿泊＝緑、マンスリー＝藍。予約経路の違いを色で持たせている。 */

:root{
  color-scheme: light;
  --ink:      #1B211D;
  --ink-2:    #45504A;
  --ink-3:    #6F7A74;
  --line:     #D6D8D0;
  --line-2:   #E6E7E1;
  --paper:    #EDEDE6;
  --surface:  #FFFFFF;
  --surface-2:#F6F6F1;
  --accent:   #2E5A4C;
  --btn-a-bg: #2E5A4C;  --btn-a-fg: #FFFFFF;  --btn-a-hi: #24483C;
  --btn-b-bg: #2C3D63;  --btn-b-fg: #FFFFFF;  --btn-b-hi: #22314F;
  --tint-a:   #E7EFEB;
  --tint-b:   #E7EAF1;
  --focus:    #9A6B14;
  --shadow:   0 1px 2px rgba(27,33,29,.06), 0 8px 24px -12px rgba(27,33,29,.16);

  --f-disp: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --f-body: "Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic", system-ui, sans-serif;
  --f-data: "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;

  --measure: 34rem;
  --wide: 74rem;
}


*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--f-body); font-size:16px; line-height:1.85;
  font-feature-settings:"palt" 1;
}
img{ max-width:100%; display:block; }
a{ color:var(--accent); text-underline-offset:3px; text-decoration-thickness:1px; }
a:focus-visible, button:focus-visible{
  outline:2px solid var(--focus); outline-offset:2px; border-radius:2px;
}
h1,h2,h3,h4{ font-family:var(--f-disp); font-weight:600; line-height:1.4; text-wrap:balance; margin:0; }
p{ margin:0; }
ul,ol{ margin:0; padding:0; }

.wrap{ width:100%; max-width:var(--wide); margin-inline:auto; padding-inline:clamp(1.25rem,4vw,3rem); }
.stack{ display:flex; flex-direction:column; }
.measure{ max-width:var(--measure); }
.label{
  font-family:var(--f-data); font-size:.688rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-3);
}
.num{ font-family:var(--f-data); font-variant-numeric:tabular-nums; }

/* ---------- ヘッダー ---------- */
.topbar{
  background:var(--ink); color:var(--paper);
  font-size:.813rem; line-height:1.6;
}
.topbar .wrap{ display:flex; flex-wrap:wrap; gap:.5rem 1.5rem; align-items:center;
  justify-content:space-between; padding-block:.5rem; }
.topbar strong{ font-weight:600; }
.topbar a{ color:inherit; }

.masthead{
  position:sticky; top:0; z-index:30;
  background:color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.masthead .wrap{ display:flex; align-items:center; gap:1.5rem;
  justify-content:space-between; padding-block:.875rem; }
.brand{ display:flex; align-items:center; gap:.625rem; text-decoration:none; color:inherit; }
.brand b{ font-family:var(--f-disp); font-size:1.25rem; letter-spacing:.06em; font-weight:600; }
.brand span{ font-family:var(--f-data); font-size:.688rem; letter-spacing:.1em; color:var(--ink-3); }
.nav{ display:flex; flex-wrap:wrap; gap:.25rem 1.25rem; list-style:none; font-size:.875rem; }
.nav a{ color:var(--ink-2); text-decoration:none; padding-block:.25rem; border-bottom:1px solid transparent; }
.nav a:hover{ color:var(--ink); border-bottom-color:var(--accent); }
.nav a[aria-current="page"]{ color:var(--ink); border-bottom-color:var(--accent); }
.lang{ display:flex; gap:.5rem; font-family:var(--f-data); font-size:.75rem; }
.lang a{ color:var(--ink-3); text-decoration:none; }
.lang a[aria-current="true"]{ color:var(--ink); font-weight:600; }

/* ---------- 予約ボタン ---------- */
.book{ display:flex; flex-wrap:wrap; gap:.75rem; }
.btn{
  display:inline-flex; flex-direction:column; gap:.125rem;
  padding:.75rem 1.25rem; border-radius:3px; text-decoration:none;
  border:1px solid transparent; font-size:.938rem; line-height:1.35;
  transition:background-color .15s ease;
}
.btn em{ font-style:normal; font-weight:600; }
.btn small{ font-family:var(--f-data); font-size:.688rem; letter-spacing:.04em; opacity:.82; }
.btn-a{ background:var(--btn-a-bg); color:var(--btn-a-fg); }
.btn-a:hover{ background:var(--btn-a-hi); }
.btn-b{ background:var(--btn-b-bg); color:var(--btn-b-fg); }
.btn-b:hover{ background:var(--btn-b-hi); }
.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--line); }
.btn-ghost:hover{ border-color:var(--ink-3); }

.booknote{ font-size:.813rem; color:var(--ink-3); margin-top:.75rem; }

/* ---------- ヒーロー ---------- */
.hero{ background:var(--surface); border-bottom:1px solid var(--line); }
.hero .wrap{ display:grid; gap:clamp(2rem,4vw,3.5rem); padding-block:clamp(2.5rem,5vw,4rem);
  grid-template-columns:1fr; }
@media (min-width:60rem){ .hero .wrap{ grid-template-columns:1.05fr .95fr; align-items:center; } }
.hero h1{ font-size:clamp(1.75rem,4.2vw,2.75rem); letter-spacing:.01em; }
.hero .kicker{ margin-bottom:1rem; }
.hero .lede{ margin-top:1.25rem; color:var(--ink-2); }
.hero .book{ margin-top:1.75rem; }

/* ヒーローの部屋モザイク。客室数の多いタイプを大きく見せる。 */
.mosaic{ display:grid; gap:.5rem; grid-template-columns:1.9fr 1fr;
  grid-template-rows:1fr 1fr; aspect-ratio:4/3.4; }
.mosaic .ph{ aspect-ratio:auto; height:100%; border-bottom:0;
  border-radius:2px; overflow:hidden; }
.mosaic .m-a{ grid-row:1 / span 2; }
@media (max-width:34rem){
  .mosaic{ grid-template-columns:1fr 1fr; grid-template-rows:auto auto;
    aspect-ratio:4/3.6; }
  .mosaic .m-a{ grid-column:1 / span 2; grid-row:auto; }
}

.spec-strip{ display:flex; flex-wrap:wrap; gap:0; margin-top:2rem;
  border-top:1px solid var(--line); }
.spec-strip div{ flex:1 1 7rem; padding:.875rem 1rem .875rem 0; }
.spec-strip dt{ font-family:var(--f-data); font-size:.688rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-3); }
.spec-strip dd{ margin:.25rem 0 0; font-family:var(--f-data); font-variant-numeric:tabular-nums;
  font-size:1.125rem; color:var(--ink); }
.spec-strip dd span{ font-family:var(--f-body); font-size:.813rem; color:var(--ink-2); }

/* ---------- セクション ---------- */
.sec{ padding-block:clamp(3rem,6vw,5rem); }
.sec + .sec{ border-top:1px solid var(--line); }
.sec-white{ background:var(--surface); }
.sec-head{ margin-bottom:2.5rem; }
.sec-head h2{ font-size:clamp(1.375rem,2.6vw,1.875rem); margin-top:.5rem; }
.sec-head p{ margin-top:.875rem; color:var(--ink-2); max-width:var(--measure); }

/* ---------- 滞在スタイル（3経路） ---------- */
.paths{ display:grid; gap:1.25rem; grid-template-columns:1fr; }
@media (min-width:48rem){ .paths{ grid-template-columns:repeat(3,1fr); } }
.path{
  background:var(--surface); border:1px solid var(--line); border-radius:3px;
  padding:1.5rem; display:flex; flex-direction:column; gap:.75rem;
}
.path .nights{ font-family:var(--f-data); font-variant-numeric:tabular-nums;
  font-size:1.5rem; color:var(--ink); }
.path h3{ font-size:1.063rem; }
.path p{ font-size:.875rem; color:var(--ink-2); flex:1; }
.path .go{ font-size:.875rem; font-weight:600; text-decoration:none; }
.path-a{ border-top:3px solid var(--btn-a-bg); }
.path-b{ border-top:3px solid var(--btn-b-bg); }

/* ---------- 部屋 ---------- */
.rooms{ display:grid; gap:1.25rem; grid-template-columns:1fr; }
@media (min-width:44rem){ .rooms{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:72rem){ .rooms{ grid-template-columns:repeat(4,1fr); } }
.room{ display:flex; flex-direction:column; text-decoration:none; color:inherit;
  background:var(--surface); border:1px solid var(--line); border-radius:3px; overflow:hidden; }
.room:hover{ box-shadow:var(--shadow); }
.room .body{ padding:1.125rem 1.25rem 1.375rem; display:flex; flex-direction:column; gap:.5rem; flex:1; }
.room h3{ font-size:1rem; }
.room .meta{ font-family:var(--f-data); font-variant-numeric:tabular-nums;
  font-size:.813rem; color:var(--ink-2); }
.room .pick{ display:inline-block; align-self:flex-start; font-size:.75rem;
  padding:.125rem .5rem; border-radius:2px; background:var(--tint-a); color:var(--accent); }
.room .more{ margin-top:auto; font-size:.813rem; color:var(--accent); }

/* 画像プレースホルダ（撮影前） */
.ph{
  position:relative; aspect-ratio:4/3; background:
    repeating-linear-gradient(135deg, var(--surface-2) 0 10px, var(--line-2) 10px 20px);
  display:grid; place-items:center; text-align:center; padding:1rem;
  border-bottom:1px solid var(--line);
}
.ph span{ font-family:var(--f-data); font-size:.688rem; letter-spacing:.08em;
  color:var(--ink-3); background:var(--surface); padding:.25rem .5rem; border-radius:2px; }
/* 実写真はハッチの上に重ねる。読み込めない環境では下のラベルが残る。 */
.ph img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.ph-wide{ aspect-ratio:16/9; }
.ph-tall{ aspect-ratio:3/4; }

/* ---------- 徒歩分数スケール ---------- */
.walk{ list-style:none; display:flex; flex-direction:column; }
.walk li{ display:grid; gap:.25rem .875rem; padding-block:.75rem;
  border-bottom:1px solid var(--line-2); grid-template-columns:1fr auto; align-items:center; }
@media (min-width:40rem){
  .walk li{ grid-template-columns:9rem minmax(6rem,18rem) 3.5rem; justify-content:start; }
}
.walk .st{ font-weight:600; font-size:.938rem; }
.walk .st small{ display:block; font-weight:400; font-size:.75rem; color:var(--ink-3); }
.walk .st .cav{ display:block; font-size:.688rem; color:var(--ink-3); margin-top:.125rem; }
.walk .bar{ height:6px; border-radius:3px; background:var(--line-2); overflow:hidden;
  grid-column:1/-1; }
@media (min-width:40rem){ .walk .bar{ grid-column:auto; } }
.walk .bar i{ display:block; height:100%; background:var(--accent); border-radius:3px; }
.walk .mn{ font-family:var(--f-data); font-variant-numeric:tabular-nums;
  font-size:.938rem; text-align:right; color:var(--ink-2); }

/* ---------- 表 ---------- */
.tblwrap{ overflow-x:auto; }
table{ width:100%; border-collapse:collapse; font-size:.938rem; min-width:28rem; }
caption{ text-align:left; font-size:.813rem; color:var(--ink-3); padding-bottom:.75rem; }
th,td{ text-align:left; padding:.75rem 1rem .75rem 0; border-bottom:1px solid var(--line-2);
  vertical-align:top; }
th{ font-weight:600; color:var(--ink); white-space:nowrap; }
td.n{ font-family:var(--f-data); font-variant-numeric:tabular-nums; }

/* ---------- お客様の声 ---------- */
.voices{ display:grid; gap:1.25rem; grid-template-columns:1fr; }
@media (min-width:46rem){ .voices{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:70rem){ .voices{ grid-template-columns:repeat(3,1fr); } }
.voice{ background:var(--surface); border:1px solid var(--line); border-radius:3px;
  padding:1.375rem 1.5rem; display:flex; flex-direction:column; gap:.875rem; }
.voice .angle{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; }
.voice .angle b{ font-family:var(--f-disp); font-size:1rem; font-weight:600; }
.voice .angle .sc{ font-family:var(--f-data); font-variant-numeric:tabular-nums;
  font-size:.875rem; color:var(--accent); }
.voice blockquote{ margin:0; font-size:.938rem; color:var(--ink); }
.voice .orig{ font-size:.813rem; color:var(--ink-3); font-style:normal; }
.voice cite{ font-family:var(--f-data); font-size:.688rem; letter-spacing:.06em;
  color:var(--ink-3); font-style:normal; margin-top:auto; }

/* ---------- FAQ ---------- */
.faq{ border-top:1px solid var(--line); max-width:52rem; }
.faq details{ border-bottom:1px solid var(--line); }
.faq summary{ cursor:pointer; padding:1.125rem 2.5rem 1.125rem 0; position:relative;
  font-weight:600; font-size:1rem; list-style:none; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; position:absolute; right:.5rem; top:1rem;
  font-family:var(--f-data); font-size:1.125rem; color:var(--ink-3); }
.faq details[open] summary::after{ content:"–"; }
.faq .a{ padding:0 2.5rem 1.375rem 0; color:var(--ink-2); font-size:.938rem; }

/* ---------- 直接契約 ---------- */
.direct{ background:var(--tint-a); border:1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  border-radius:3px; padding:clamp(1.5rem,3vw,2.25rem); }
.direct h2{ font-size:1.25rem; }
.direct p{ margin-top:.75rem; color:var(--ink-2); max-width:var(--measure); }
.direct .book{ margin-top:1.5rem; }

/* ---------- ギャラリー ---------- */
.grid-g{ display:grid; gap:1rem; grid-template-columns:repeat(auto-fill,minmax(15rem,1fr)); }
.grid-g figure{ margin:0; }
.grid-g figcaption{ font-size:.813rem; color:var(--ink-3); padding-top:.5rem; }

/* ---------- 本文ページ ---------- */
.prose{ max-width:var(--measure); display:flex; flex-direction:column; gap:1.25rem; }
.prose h2{ font-size:1.25rem; margin-top:1.25rem; }
.prose h3{ font-size:1.063rem; margin-top:1rem; }
.prose p{ color:var(--ink-2); }
.prose ul{ padding-left:1.25rem; color:var(--ink-2); }
.prose li{ margin-bottom:.375rem; }
.pull{ border-left:2px solid var(--accent); padding-left:1.25rem; font-family:var(--f-disp);
  font-size:1.125rem; color:var(--ink); }

/* ---------- パンくず ---------- */
.crumb{ font-size:.813rem; color:var(--ink-3); padding-block:1.25rem; }
.crumb ol{ list-style:none; display:flex; flex-wrap:wrap; gap:.5rem; }
.crumb li::after{ content:"/"; margin-left:.5rem; color:var(--line); }
.crumb li:last-child::after{ content:""; }
.crumb a{ color:var(--ink-3); text-decoration:none; }
.crumb a:hover{ color:var(--ink); }

/* ---------- ページ見出し ---------- */
.phead{ background:var(--surface); border-bottom:1px solid var(--line); }
.phead .wrap{ padding-block:clamp(1.75rem,4vw,3rem); }
.phead h1{ font-size:clamp(1.5rem,3.4vw,2.25rem); }
.phead p{ margin-top:1rem; color:var(--ink-2); max-width:var(--measure); }

/* ---------- フッター ---------- */
footer{ background:var(--ink); color:#CFD4CE; padding-block:clamp(2.5rem,5vw,4rem);
  font-size:.875rem; }
footer a{ color:#CFD4CE; }
footer .cols{ display:grid; gap:2rem; grid-template-columns:1fr; }
@media (min-width:48rem){ footer .cols{ grid-template-columns:1.4fr 1fr 1fr; } }
footer h3{ font-family:var(--f-data); font-size:.688rem; letter-spacing:.14em;
  text-transform:uppercase; color:#8B948B; font-weight:400; margin-bottom:.875rem; }
footer ul{ list-style:none; display:flex; flex-direction:column; gap:.5rem; }
footer .op b{ font-family:var(--f-disp); color:#F2F3EF; font-size:1rem; font-weight:600;
  display:block; margin-bottom:.5rem; }
footer .op .num{ color:#F2F3EF; }
footer .fine{ margin-top:2.5rem; padding-top:1.5rem; border-top:1px solid #333B35;
  display:flex; flex-wrap:wrap; gap:.5rem 1.5rem; justify-content:space-between;
  font-size:.75rem; color:#8B948B; }

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}
.ph iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

/* ---------- Sumyca 空室・料金 (assets/sumyca.js) ---------- */
[data-sumyca-room], [data-sumyca-search]{ margin-top:clamp(2rem,4vw,3rem); }
.sm-box{ background:var(--surface); border:1px solid var(--line); border-radius:3px; padding:clamp(1.25rem,3vw,2rem); box-shadow:var(--shadow); }
.sm-head h2{ font-size:1.25rem; margin-top:.25rem; }
.sm-head p:not(.label){ margin-top:.5rem; color:var(--ink-2); font-size:.938rem; }
.sm-form{ display:flex; flex-wrap:wrap; gap:.75rem 1rem; align-items:flex-end; margin-top:1.25rem; }
.sm-form label{ display:flex; flex-direction:column; gap:.25rem; font-size:.813rem; color:var(--ink-2); }
.sm-form input, .sm-form select{ font:inherit; font-family:var(--f-data); font-size:.938rem; padding:.5rem .625rem; border:1px solid var(--line);
  border-radius:3px; background:var(--surface); color:var(--ink); min-height:2.75rem; }
.sm-form .sm-submit{ border:0; cursor:pointer; min-height:2.75rem; justify-content:center; }
.sm-cal{ margin-top:1.5rem; }
.sm-cal-nav{ display:flex; align-items:center; justify-content:space-between; gap:.75rem; flex-wrap:wrap; }
.sm-cal-nav .btn{ padding:.375rem .875rem; font-size:.813rem; cursor:pointer; }
.sm-cal-nav .btn:disabled{ opacity:.4; cursor:default; }
.sm-legend{ font-size:.75rem; color:var(--ink-3); }
.sm-legend i{ font-style:normal; font-family:var(--f-data); }
.sm-months{ display:grid; gap:1.5rem; grid-template-columns:1fr; margin-top:1rem; }
@media (min-width:46rem){ .sm-months{ grid-template-columns:1fr 1fr; } }
table.sm-month{ min-width:0; table-layout:fixed; font-size:.875rem; }
.sm-month caption{ font-family:var(--f-disp); font-size:1rem; color:var(--ink); font-weight:600; padding-bottom:.5rem; }
.sm-month th, .sm-month td{ padding:0; border:0; text-align:center; }
.sm-month th{ font-size:.75rem; color:var(--ink-3); font-weight:400; padding-bottom:.25rem; }
.sm-month th.sun{ color:#B4452F; } .sm-month th.sat{ color:#2C5A9A; }
.sm-month td button{ width:100%; aspect-ratio:1/1; max-height:3.25rem; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:0; border:1px solid transparent; background:none; color:inherit; font:inherit; cursor:pointer; border-radius:3px; padding:0; }
.sm-month td button:disabled{ cursor:default; }
.sm-month .dn{ font-family:var(--f-data); font-size:.813rem; line-height:1.2; }
.sm-month .st{ font-family:var(--f-data); font-size:.688rem; line-height:1.2; }
.sm-month td.ok .st, .sm-ok{ color:var(--accent); }
.sm-month td.ng .st, .sm-ng{ color:var(--ink-3); }
.sm-month td.ng .dn, .sm-month td.past .dn{ color:var(--ink-3); }
.sm-month td.ok button:hover{ border-color:var(--accent); }
.sm-month td.in button{ background:var(--tint-a); }
.sm-month td.ci button, .sm-month td.co button{ background:var(--btn-a-bg); color:var(--btn-a-fg); }
.sm-month td.ci button .st, .sm-month td.co button .st{ color:inherit; }
.sm-result{ margin-top:1.5rem; }
.sm-result:empty{ display:none; }
.sm-note{ font-size:.813rem; color:var(--ink-3); margin-top:.75rem; }
.sm-note a{ margin-left:.5rem; }
.sm-soldout{ color:#B4452F; font-size:.938rem; }
.sm-dates{ font-family:var(--f-data); font-size:.875rem; color:var(--ink-2); }
.sm-total{ display:flex; align-items:baseline; gap:.75rem; margin-top:.5rem; }
.sm-total b{ font-size:1.75rem; font-weight:500; color:var(--ink); }
.sm-breakdown{ font-size:.813rem; color:var(--ink-3); }
.sm-pp{ font-size:.875rem; color:var(--ink-2); }
.sm-pp b{ margin-left:.375rem; font-size:1.063rem; color:var(--ink); }
.sm-price .book{ margin-top:1rem; }
.sm-loading{ display:flex; align-items:center; gap:.5rem; font-size:.875rem; color:var(--ink-3); }
.sm-spin{ width:1rem; height:1rem; border:2px solid var(--line); border-top-color:var(--accent); border-radius:50%; animation:sm-spin .8s linear infinite; }
@keyframes sm-spin{ to{ transform:rotate(360deg); } }
.sm-list{ list-style:none; margin-top:1rem; display:flex; flex-direction:column; border-top:1px solid var(--line-2); }
.sm-list li{ display:grid; gap:.5rem 1.5rem; grid-template-columns:1fr; padding:1rem 0; border-bottom:1px solid var(--line-2); }
@media (min-width:46rem){ .sm-list li{ grid-template-columns:14rem 1fr; align-items:center; } }
.sm-list li.ng{ opacity:.7; }
.sm-list h3{ font-size:1.063rem; }
.sm-list .sm-body{ display:flex; flex-wrap:wrap; align-items:center; gap:.5rem 1.5rem; }
.sm-list .sm-total{ margin-top:0; }
.sm-list .sm-total b{ font-size:1.375rem; }

/* 予約モーダル */
html.sm-modal-open{ overflow:hidden; }
.sm-modal{ width:min(56rem, 100vw - 2rem); height:min(52rem, 100dvh - 2rem); max-width:none; max-height:none;
  margin:auto; padding:0; border:1px solid var(--line); border-radius:4px; background:var(--surface); color:var(--ink);
  box-shadow:0 20px 60px rgba(0,0,0,.25); overflow:hidden; }
.sm-modal[open]{ display:flex; flex-direction:column; }
.sm-modal::backdrop{ background:rgba(20,22,20,.55); }
.sm-modal-head{ display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.625rem .75rem .625rem 1.25rem; border-bottom:1px solid var(--line); }
.sm-modal-title{ font-family:var(--f-disp); font-weight:600; }
.sm-modal-close{ width:2.5rem; height:2.5rem; border:0; border-radius:50%; background:transparent; color:var(--ink);
  font-size:1.5rem; line-height:1; cursor:pointer; }
.sm-modal-close:hover{ background:var(--tint-a); }
.sm-modal-body{ position:relative; flex:1; background:#fff; }
.sm-modal-frame{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.sm-modal-loading{ position:absolute; inset:0; justify-content:center; }
@media (max-width:40rem){
  .sm-modal{ width:100vw; height:100dvh; border:0; border-radius:0; }
}
.sm-modal-loading[hidden]{ display:none; }

/* マンスリー問い合わせ (30泊以上) */
.sm-monthly{ display:flex; flex-wrap:wrap; align-items:center; gap:1rem 1.5rem; padding:1.25rem; background:var(--tint-b); border-radius:3px; }
.sm-monthly p{ flex:1 1 20rem; font-size:.938rem; color:var(--ink-2); }
.sm-monthly .btn{ border:0; cursor:pointer; font:inherit; text-align:left; }
.sm-modal.sm-inq{ height:fit-content; max-height:calc(100dvh - 2rem); width:min(44rem, 100vw - 2rem); }
.sm-inq-body{ overflow:auto; padding:clamp(1.25rem,3vw,1.75rem); background:var(--surface); }
.sm-inq-lede{ font-size:.938rem; color:var(--ink-2); }
.sm-inq-form fieldset{ border:0; padding:0; margin:1.5rem 0 0; min-width:0; }
.sm-inq-form legend{ font-family:var(--f-disp); font-weight:600; font-size:1.063rem; padding:0 0 .5rem; border-bottom:1px solid var(--line-2); width:100%; }
.sm-grid{ display:grid; gap:1rem; grid-template-columns:1fr; margin-top:1rem; }
@media (min-width:36rem){ .sm-grid{ grid-template-columns:1fr 1fr; } }
.sm-field{ display:flex; flex-direction:column; gap:.375rem; font-size:.813rem; color:var(--ink-2); min-width:0; }
.sm-field.wide{ grid-column:1 / -1; }
.sm-field[hidden]{ display:none; }
.sm-field > span{ display:flex; align-items:center; gap:.5rem; font-weight:600; }
.sm-field i{ font-style:normal; font-weight:400; font-size:.688rem; padding:.063rem .375rem; border-radius:2px; }
.sm-req{ background:var(--btn-b-bg); color:var(--btn-b-fg); }
.sm-opt{ border:1px solid var(--line); color:var(--ink-3); }
.sm-field input:not([type=radio]), .sm-field select, .sm-field textarea{ font:inherit; font-size:1rem; padding:.625rem .75rem; border:1px solid var(--line);
  border-radius:3px; background:var(--surface); color:var(--ink); min-height:2.875rem; width:100%; box-sizing:border-box; }
.sm-field textarea{ resize:vertical; min-height:6rem; }
.sm-field input:focus, .sm-field select:focus, .sm-field textarea:focus{ outline:2px solid var(--focus); outline-offset:1px; }
.sm-field [aria-invalid="true"]{ border-color:#B4452F; }
.sm-radios{ display:flex; gap:.5rem; }
.sm-radios label{ white-space:nowrap; display:flex; align-items:center; gap:.5rem; padding:.5rem 1rem; border:1px solid var(--line); border-radius:3px;
  font-size:.938rem; color:var(--ink); cursor:pointer; }
.sm-radios label:has(input:checked){ border-color:var(--btn-b-bg); background:var(--tint-b); }
.sm-inq-err{ margin-top:1.25rem; padding:.75rem 1rem; border-left:3px solid #B4452F; background:rgba(180,69,47,.08); color:#B4452F; font-size:.875rem; }
.sm-inq-err[hidden]{ display:none; }
.sm-inq-foot{ margin-top:1.5rem; padding-top:1.25rem; border-top:1px solid var(--line-2); }
.sm-inq-foot .sm-submit{ width:100%; flex-direction:row; align-items:center; justify-content:center; gap:.5rem; border:0; cursor:pointer; font:inherit; min-height:3.25rem; }
.sm-inq-foot .sm-submit:disabled{ opacity:.7; cursor:progress; }
.sm-inq-done{ text-align:center; padding:2rem 0; }
.sm-inq-done h2{ font-size:1.375rem; margin-top:.5rem; }
.sm-inq-done p:not(.label){ margin:1rem auto 1.5rem; max-width:30rem; color:var(--ink-2); font-size:.938rem; }
.sm-inq-done .btn{ cursor:pointer; font:inherit; }
@media (max-width:40rem){ .sm-modal.sm-inq{ height:100dvh; max-height:100dvh; } }
.sm-radios input{ accent-color:var(--btn-b-bg); width:1.125rem; height:1.125rem; margin:0; }

/* ---------- CVR・見やすさの改善 ---------- */
.label{ font-family:var(--f-body); font-size:.813rem; letter-spacing:.06em; text-transform:none; font-weight:500; }
h1,h2{ word-break:auto-phrase; line-break:strict; }
.brand b{ white-space:nowrap; }
.tb-sep{ margin-inline:.25rem; opacity:.6; }

.hero-cta{ margin-top:1.5rem; }
.hero-cta .btn-a{ font-size:1.0625rem; padding:.875rem 1.5rem; }
.hero-points{ list-style:none; margin-top:1.25rem; display:grid; gap:.375rem; font-size:.938rem; color:var(--ink-2); }
.hero-points li{ padding-left:1.25rem; position:relative; }
.hero-points li::before{ content:"✓"; position:absolute; left:0; color:var(--accent); font-weight:700; }
.phead-cta{ margin-top:1.25rem; }

.room .price{ display:block; margin-top:.375rem; font-size:.875rem; color:var(--ink-3); }
.room .price.is-price{ color:var(--accent); font-weight:600; font-variant-numeric:tabular-nums; }

/* 予約の不成立時の代替案 */
.sm-soldout-box{ display:grid; gap:.75rem; }
.sm-alt-list{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.5rem; }
.sm-alt-list .btn small{ font-family:var(--f-body); }

/* 検索モーダル */
.sm-modal.sm-search-modal{ height:fit-content; max-height:calc(100dvh - 2rem); }
.sm-search-body{ overflow:auto; padding:1rem 1.25rem 1.5rem; }
.sm-search-body .sm-box{ border:0; box-shadow:none; padding:0; margin:0; }

/* ナビゲーションの開閉ボタン（スマホのみ表示） */
.navtoggle{ display:none; align-items:center; gap:.5rem; background:transparent; color:var(--ink);
  border:1px solid var(--line); border-radius:3px; padding:.375rem .75rem; font:inherit; font-size:.875rem; cursor:pointer; }
.navtoggle .bars, .navtoggle .bars::before, .navtoggle .bars::after{ display:block; width:1rem; height:2px; background:currentColor; position:relative; }
.navtoggle .bars::before, .navtoggle .bars::after{ content:""; position:absolute; left:0; }
.navtoggle .bars::before{ top:-5px; } .navtoggle .bars::after{ top:5px; }

/* スマホの画面下に固定する予約ボタン */
.sm-sticky{ display:none; }

@media (max-width:40rem){
  .topbar{ font-size:.75rem; }
  .topbar .wrap{ padding-block:.375rem; justify-content:center; }
  .topbar .tb-lead, .topbar .tb-hours{ display:none; }
  .masthead .wrap{ flex-wrap:wrap; gap:.5rem; padding-block:.5rem; }
  .brand span{ display:none; }
  .navtoggle{ display:inline-flex; }
  .masthead nav{ display:none; flex-basis:100%; }
  .masthead.is-open nav{ display:block; }
  .masthead.is-open .nav{ flex-direction:column; gap:0; padding-block:.25rem .5rem; }
  .masthead.is-open .nav a{ display:block; padding-block:.5rem; border-bottom:1px solid var(--line-2); }
  .hero .wrap{ padding-block:1.75rem 2.5rem; }
  .hero h1{ font-size:1.625rem; }
  .hero-cta .btn{ flex:1 1 100%; }
  .sm-sticky{ display:flex; gap:.5rem; position:fixed; left:0; right:0; bottom:0; z-index:40;
    padding:.5rem .75rem calc(.5rem + env(safe-area-inset-bottom)); background:var(--surface);
    border-top:1px solid var(--line); box-shadow:0 -4px 16px -8px rgba(0,0,0,.2); }
  .sm-sticky .btn{ justify-content:center; align-items:center; padding:.75rem 1rem; }
  .sm-sticky .btn-a{ flex:1; }
  html.has-sticky body{ padding-bottom:4.5rem; }
  html.sm-modal-open .sm-sticky{ display:none; }
  .sm-modal.sm-search-modal{ height:100dvh; max-height:100dvh; }
}

.brand-logo{ display:block; height:3.5rem; width:auto; margin:-.5rem 0 -.5rem -1rem; }
@media (max-width:40rem){ .brand-logo{ height:3rem; margin:-.375rem 0 -.375rem -.875rem; } }

/* 部屋ページ下部の事業者表示 */
.sec-license{ padding-block:clamp(1.5rem,3vw,2.25rem); border-top:1px solid var(--line); }
.license-title{ font-size:1rem; margin-bottom:.75rem; }
.license-list{ display:grid; grid-template-columns:max-content 1fr; gap:.25rem 1.25rem; font-size:.875rem; color:var(--ink-2); }
.license-list + .license-list{ margin-top:.75rem; }
.license-list dd{ margin:0; overflow-wrap:anywhere; }
@media (max-width:40rem){
  .license-list{ grid-template-columns:1fr; gap:.125rem; }
  .license-list dd{ margin-bottom:.5rem; }
}

/* 部屋ページのスライドショー (管理画面の /lp で登録) */
.ss{ position:relative; }
.ss-stage{ position:relative; aspect-ratio:16/9; overflow:hidden; background:#1f2421; border-radius:2px; outline:none; }
.ss-stage:focus-visible{ box-shadow:0 0 0 3px var(--line); }
.ss-slide{ position:absolute; inset:0; margin:0; opacity:0; transition:opacity 1s ease; }
.ss-slide.is-on{ opacity:1; z-index:1; }
.ss-slide img{ width:100%; height:100%; object-fit:cover; transform:scale(1.06); transition:transform 7s ease-out; }
.ss-slide.is-on img{ transform:scale(1); }
.ss-cap{ position:absolute; left:0; right:0; bottom:0; padding:clamp(1.25rem,4vw,2.5rem) clamp(1.25rem,4vw,2.75rem) clamp(1.5rem,4vw,2.5rem);
  background:linear-gradient(to top, rgba(10,14,12,.72), rgba(10,14,12,.28) 60%, transparent); color:#fff;
  opacity:0; transform:translateY(.75rem); transition:opacity .8s ease .35s, transform .8s ease .35s; }
.ss-slide.is-on .ss-cap{ opacity:1; transform:none; }
.ss-title{ font-size:clamp(1.125rem,2.6vw,1.75rem); font-weight:600; letter-spacing:.04em; line-height:1.4; margin:0; text-shadow:0 1px 12px rgba(0,0,0,.35); }
.ss-desc{ margin:.5rem 0 0; max-width:40rem; font-size:clamp(.813rem,1.4vw,.938rem); line-height:1.8; color:rgba(255,255,255,.88); }
.ss-bar{ display:block; height:2px; background:var(--line); overflow:hidden; }
.ss-bar::after{ content:""; display:block; height:100%; width:0; background:var(--ink); }
.ss-stage.is-ticking + .ss-bar::after{ animation:ss-progress var(--ss-progress-dur,6s) linear forwards; }
@keyframes ss-progress{ to{ width:100%; } }
.ss-ctrl{ display:flex; align-items:center; gap:1rem; padding-top:.75rem; }
.ss-dots{ display:flex; gap:.5rem; flex:1; }
.ss-dot{ width:1.75rem; height:2px; padding:.5rem 0; border:0; background:var(--line); background-clip:content-box; cursor:pointer; }
.ss-dot.is-on{ background-color:var(--ink); }
.ss-count{ font-size:.75rem; letter-spacing:.08em; color:var(--ink-3); }
.ss-arrow{ width:2.5rem; height:2.5rem; border:1px solid var(--line); border-radius:50%; background:transparent; color:var(--ink); font-size:1.25rem; line-height:1; cursor:pointer; }
.ss-arrow:hover{ border-color:var(--ink); }
@media (max-width:40rem){ .ss-stage{ aspect-ratio:4/3; } .ss-dot{ width:1.125rem; } }
@media (prefers-reduced-motion: reduce){ .ss-slide, .ss-slide img, .ss-cap{ transition:none; } }