@charset "utf-8";

/* ==========================================================================
   旅館たなべ style.css
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 変数
   -------------------------------------------------------------------------- */
:root {
  /* 色 */
  --main:  #005E82;
  --pale:  #E8F4F8;
  --text:  #000000;
  --white: #FFFFFF;
  --gray:  #D9D9D9;

  /* 書体 */
  --mincho:  "Shippori Mincho", "Hiragino Mincho ProN", serif;
  --hina:    "Hina Mincho", "Shippori Mincho", "Hiragino Mincho ProN", serif;
  --antique: "Shippori Antique", "Shippori Mincho", serif;
  --sedan:   "Sedan", "Shippori Mincho", serif;
  --gothic:  "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;

  /* 版面 */
  --page:   144rem;
  --inner:  128rem;
  --header-h: 21rem;
}

/* --------------------------------------------------------------------------
   2. リセット
   -------------------------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  /* 1rem = 1rem。remで書くとブラウザの文字サイズ設定に追従する */
  font-size: 62.5%;
  scroll-behavior: smooth;
}

body {
  position: relative;
  margin: 0;
  background: var(--white);
  color: var(--text);
  font-family: var(--mincho);
  font-size: 1.6rem;
  line-height: 2;
  -webkit-font-smoothing: antialiased;
}

/* 和紙のテクスチャ。画面全体に敷き、白背景と継ぎ目が出ないようにする */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  background: url("../img/bg_washi.jpg") center / cover no-repeat;
  opacity: .2;
  pointer-events: none;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

ul, ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

h1, h2, h3, h4, p, figure {
  margin: 0;
}

button {
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

/* --------------------------------------------------------------------------
   3. 共通
   -------------------------------------------------------------------------- */

/* 縦書き */
.tate {
  writing-mode: vertical-rl;
  text-orientation: upright;
  line-height: 1;
  letter-spacing: .1em;
}

/* 読み上げ専用 */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* セクション見出し（英字ラベル＋大見出し）。全セクション共通 */
.label {
  font-family: var(--sedan);
  font-size: 1.6rem;
  line-height: 1;
  letter-spacing: .05em;
  color: var(--main);
}

.heading {
  margin-top: 1.2rem;
  font-family: var(--hina);
  font-size: 4rem;
  line-height: 1;
  font-weight: 400;
}

/* デザインの版面（144rem）。中身はここに収める */
.page {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--page);
  margin-inline: auto;
  padding-top: var(--header-h); /* marginにするとマージン相殺が起きる */
  overflow-x: clip;
}

/* --------------------------------------------------------------------------
   4. ヘッダー
   -------------------------------------------------------------------------- */
.header {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
  width: 100%;
  height: var(--header-h);
  pointer-events: none;
}

.header-inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
  max-width: var(--inner);
  height: 9rem;
  margin-inline: auto;
  padding-top: 6rem;
}

/* ロゴ */
.logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  pointer-events: auto;
}

.logo-crest {
  width: 3.9rem;
  height: 3.9rem;
}

.logo-name {
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-family: var(--hina);
  font-size: 2rem;
  line-height: 1;
  letter-spacing: .1em;
}

/* ナビ */
.gnav {
  display: flex;
  gap: 3.2rem;
  pointer-events: auto;
}

.gnav-link {
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-size: 1.4rem;
  line-height: 1;
  letter-spacing: .1em;
  transition: color .3s;
}

@media (hover: hover) {
  .gnav-link:hover {
    color: var(--main);
  }
}

/* 予約ボタン（縦組み・枠線） */
.header-cta {
  display: grid;
  place-items: center;
  width: 2.7rem;
  min-height: 6.5rem;
  padding: 0.3rem 0;
  border: 0.7px solid var(--text);
  background: var(--white);
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-size: 1.6rem;
  line-height: 1;
  letter-spacing: .1em;
  pointer-events: auto;
  transition: background-color .3s, color .3s, border-color .3s;
}

@media (hover: hover) {
  .header-cta:hover {
    background: var(--main);
    border-color: var(--main);
    color: var(--white);
  }
}

/* --------------------------------------------------------------------------
   4-2. 右側に浮かぶ操作パネル（ハンバーガー＋ご宿泊予約）
   -------------------------------------------------------------------------- */
.float-panel {
  position: fixed;
  top: 6rem;
  right: calc(50% - 72rem + 4.4rem); /* 版面144remの右端から4.4rem内側。狭い画面では画面端に寄る */
  z-index: 200;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3.15rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity .4s, visibility .4s;
}

.float-panel.is-shown {
  opacity: 1;
  visibility: visible;
}

@media (max-width: 1527px) {
  .float-panel { right: 4.4rem; }
}

/* ハンバーガー */
.hamburger {
  display: grid;
  gap: 0.85rem;
  width: 2.5rem;
}

.hamburger span {
  display: block;
  height: 1.5px;
  background: var(--main);
  transition: transform .3s, opacity .3s, width .3s;
}

.hamburger span:nth-child(1) { width: 2.5rem; }
.hamburger span:nth-child(2) { width: 1.8rem; margin-left: auto; }
.hamburger span:nth-child(3) { width: 2.5rem; }

.hamburger.is-open span:nth-child(1) { transform: translateY(1rem) rotate(20deg); }
.hamburger.is-open span:nth-child(2) { opacity: 0; }
.hamburger.is-open span:nth-child(3) { transform: translateY(-1rem) rotate(-20deg); }

/* ご宿泊予約ボタン（縦組み・枠線） */
.float-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
  width: 4.7rem;
  padding: 1.5rem 0 1.3rem;
  border: 1px solid var(--main);
  background: var(--white);
  color: var(--main);
  transition: background-color .3s, color .3s;
}

.float-cta img {
  width: 2.7rem;
  height: 2.6rem;
  transition: filter .3s;
}

.float-cta-text {
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-size: 2rem;
  line-height: 1;
  letter-spacing: .05em;
}

@media (hover: hover) {
  .float-cta:hover {
    background: var(--main);
    color: var(--white);
  }

  .float-cta:hover img {
    filter: brightness(0) invert(1);
  }
}

/* --------------------------------------------------------------------------
   5. ファーストビュー
   -------------------------------------------------------------------------- */
/* overflow:hidden は保険。写真がこの高さを超えても次のセクションに被らない */
.fv {
  position: relative;
  height: 77.6rem;
  overflow: hidden;
}

/* 写真：左から25.6remの位置に93.2rem幅で2枚。3秒ごとに2組が入れ替わる */
.fv-media {
  position: absolute;
  top: 0;
  left: 25.6rem;
  width: 93.2rem;
  height: 100%;
}

.fv-slide {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: 37.7rem 37.7rem;
  align-content: space-between;
  opacity: 0;
  transition: opacity 1.2s ease;
}

.fv-slide.is-current {
  opacity: 1;
}

/* グリッドの中で height:100% は使わない（Safariは行ではなく枠全体を基準にする） */
.fv-img {
  width: 100%;
  height: 37.7rem;
  object-fit: cover;
}

@media (prefers-reduced-motion: reduce) {
  .fv-slide { transition: none; }
}

/* キャッチコピー：写真の上に白帯で重ねる */
.fv-catch {
  position: absolute;
  top: 20.1rem;
  left: 104.3rem;
  z-index: 2;
  display: flex;
  flex-direction: row-reverse;
  align-items: flex-start;
  gap: 1rem;
  font-weight: 400;
}

.fv-line {
  width: 3.4rem;
  padding: 0.5rem;
  background: var(--white);
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-family: var(--hina);
  font-size: 2.4rem;
  line-height: 1;
  letter-spacing: .1em;
}

/* --------------------------------------------------------------------------
   6. コンセプト
   -------------------------------------------------------------------------- */
.concept {
  padding: 19.7rem 0 20rem;
  /* hidden にすると中の position:sticky が効かなくなるので clip を使う */
  overflow-x: clip;
}

.concept-head {
  margin-left: 25.4rem;
}

.concept-text {
  /* 1行に全角34文字が入る幅。狭いと改行位置がデザインとずれる */
  width: 54.8rem;
  margin: 8.3rem 0 0 25.4rem;
  line-height: 2;
}

/* 写真の帯。スクロールに合わせて左へ流れ、画面の端から端まで通り抜ける */
/* 横に流すあいだ帯を画面に固定する。移動量は script.js が測って入れる */
/* 見出し・本文・写真帯をまとめて固定する箱。高さ＝中身＋流す距離＋止める距離 */
.marquee-pin {
  height: calc(var(--mq-stick, 48.6rem) + var(--mq-travel, 0px) + var(--mq-hold, 0px));
}

/* 中身の下端が画面の下から6remに来たら止める。svhはアドレスバーぶんを除いた高さ */
.marquee-stick {
  position: sticky;
  top: min(6rem, calc(100vh - var(--mq-stick, 48.6rem) - 6rem));
}

@supports (height: 100svh) {
  .marquee-stick {
    top: min(6rem, calc(100svh - var(--mq-stick, 48.6rem) - 6rem));
  }

  @media (max-width: 1079.98px) {
    .marquee-stick {
      top: calc(50svh + 14.55rem - var(--mq-stick, 70rem));
    }
  }
}

.marquee {
  height: 48.6rem;
  margin-top: 20rem;   /* 本文から写真帯までの間隔（デザイン実測） */
  overflow: hidden;
}

.marquee-track {
  display: flex;
  align-items: flex-start;
  gap: 10rem;
  width: max-content;
  padding-left: 25.4rem; /* 画面中央にきたときデザインの位置に重なる */
  transform: translate3d(var(--shift, 0px), 0, 0);
  will-change: transform;
}

.marquee-img {
  flex: none;
  object-fit: cover;
}

/* 3枚それぞれの縦位置をずらす（デザインどおり） */
.marquee-img.is-a { width: 37.9rem; height: 27.2rem; margin-top: 0; }
.marquee-img.is-b { width: 29.8rem; height: 21.4rem; margin-top: 27.2rem; }
.marquee-img.is-c { width: 17.4rem; height: 25.1rem; margin-top: 8.1rem; }

/* 動きを減らす設定の環境では、固定も横流れもやめて素直に並べる */
@media (prefers-reduced-motion: reduce) {
  .marquee-track { transform: none; }
  .marquee-pin { height: auto; }
  .marquee-stick { position: static; }
  .marquee { overflow-x: auto; }
}

/* --------------------------------------------------------------------------
   7. ３つの魅力
   -------------------------------------------------------------------------- */
.reasons {
  position: relative;
  padding: 9.7rem 0 9.5rem;
}

/* 背景写真は不透明度80%で敷く */
.reasons::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url("../img/Reasons_01.jpg") center / cover no-repeat;
  opacity: .8;
}

.reasons-inner {
  position: relative;
  z-index: 1;
  width: 93.2rem;
  margin-left: 25.4rem;
}

.reason-list {
  display: grid;
  gap: 5.5rem;
  margin-top: 9.6rem;
}

/* カード。白の90%で敷いて、背景写真をうっすら透かす */
.reason-card {
  padding: 2.9rem 5.6rem 6.4rem;
  border-radius: 1rem;
  background: rgb(255 255 255 / .9);
}

.reason-num {
  font-size: 1.4rem;
  line-height: 1;
  letter-spacing: .02em;
}

.reason-body {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-top: 2.7rem;
}

.reason-text {
  width: 40rem;
}

.reason-title {
  font-size: 2.4rem;
  line-height: 1;
  font-weight: 600;
}

.reason-desc {
  margin-top: 5.4rem;
  line-height: 2;
}

.reason-img {
  flex: none;
  width: 36.1rem;
  height: 22.4rem;
  object-fit: cover;
}

/* --------------------------------------------------------------------------
   8. お料理
   -------------------------------------------------------------------------- */
.cuisine {
  width: 93.2rem;
  margin: 4.9rem 0 0 25.4rem; /* Reasonsとの間にデザイン上の隙間がある */
  padding: 19.7rem 0 19rem;
}

.cuisine-hero {
  width: 93.2rem;
  height: 39.9rem;
  margin-top: 8.2rem;
  object-fit: cover;
}

/* 見出し・本文・注釈（お料理セクション内で使い回す） */
.dish-title {
  font-size: 2.4rem;
  line-height: 1;
  font-weight: 600;
}

.dish-desc {
  margin-top: 2.7rem;
  line-height: 2;
}

.note {
  margin-top: 2.4rem;
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.5;
}

.note-main {
  color: var(--main);
}

/* 枠つきの小さなラベル */
.badge {
  display: flex;
  align-items: center;
  width: fit-content;
  height: 2.1rem;
  padding: 0 0.6rem;
  border: 1px solid var(--main);
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1;
  color: var(--main);
}

/* 括弧書きは途中で割らずまとめて次の行へ送る */
.nowrap {
  white-space: nowrap;
}

/* 「※」で始まる注記は、2行目以降の頭を1文字ぶん下げる（ぶら下げインデント） */
.note-hang {
  padding-left: 1em;
  text-indent: -1em;
}

/* 右寄せの単位書きだけは、字下げが効くと右端がずれるので戻す */
.price-unit.note-hang {
  padding-left: 0;
  text-indent: 0;
}

/* 区切り線 */
.rule {
  height: 0;
  margin: 10rem 0 9.9rem;
  border: none;
  border-top: 1px solid #C5D3D3;
}

/* 海鮮会席＋お品書き */
.cuisine-main {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-top: 9.4rem;
}

.cuisine-main-text {
  width: 40rem;
}

/* お品書き（縦組み。右から左へ読む） */
.menu-list {
  display: flex;
  flex-direction: row-reverse;
  align-items: flex-start;
  gap: 4rem;
  margin-top: 18.7rem;
}

.menu-list-title {
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-size: 1.8rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .1em;
}

.menu-list-items {
  display: flex;
  flex-direction: row-reverse;
  align-items: flex-start;
  gap: 2.2rem;
  margin-top: 3rem;
}

.menu-list-items li {
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-size: 1.6rem;
  line-height: 1;
  letter-spacing: .1em;
}

/* 写真とテキストの横並び */
.dish-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-top: 10rem;
}

.dish-row:first-of-type {
  margin-top: 0;
}

.dish-img {
  flex: none;
  width: 39.9rem;
  height: 29.6rem;
  object-fit: cover;
}

.dish-text {
  width: 45.7rem;
}

.dish-text .dish-title {
  margin-top: 4rem;
}

.dish-row.is-reverse {
  margin-top: 9.6rem;
}

.dish-row.is-reverse .dish-text {
  width: 45.6rem;
}

/* 冬季限定 */
.winter {
  width: 61.9rem;
  margin: -0.6rem auto 0;
}

.winter-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.2rem;
}

.winter-title {
  font-size: 2.4rem;
  line-height: 1;
  font-weight: 600;
  color: var(--main);
}

.winter-item {
  margin-top: 6.9rem;
}

.winter-item img {
  width: 61.9rem;
  height: 33.8rem;
  object-fit: cover;
}

.winter-item .dish-title {
  margin-top: 3.5rem;
}

/* デザイン実測：「素泊まりプラン」は太字、「プラン・料金」は --main の下線つきリンク */
.cuisine-foot {
  margin-top: 9rem;
  line-height: 2;
}

.cuisine-foot b {
  font-weight: 700;
}

/* 下線の色は文字色と同じ #005E82（currentColor のまま） */
.cuisine-foot a {
  color: var(--main);
  text-decoration: underline;
  text-decoration-color: currentColor;
  text-decoration-thickness: 1px;
  text-underline-offset: 1px;
  transition: opacity .3s;
}

@media (hover: hover) {
  .cuisine-foot a:hover {
    opacity: .7;
  }
}

/* --------------------------------------------------------------------------
   9. ご宿泊プラン・料金
   -------------------------------------------------------------------------- */
.plans {
  position: relative;
  padding: 9.5rem 0 10rem;
}

/* 淡色の帯。左右いっぱいではなく、x=183から107.5rem幅 */
.plans::before {
  content: "";
  position: absolute;
  top: 0;
  left: 18.3rem;
  z-index: 0;
  width: 107.5rem;
  height: 100%;
  background: var(--pale);
}

.plans::after {
  content: "";
  position: absolute;
  top: 0;
  left: 18.3rem;
  z-index: 0;
  width: 107.5rem;
  height: 100%;
  background: url("../img/Rectangle_37_01.jpg") center / cover no-repeat;
  opacity: .2;
}

.plans-head,
.plan {
  position: relative;
  z-index: 1;
  margin-left: 25.4rem;
}

.plan {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: 93.1rem;
  margin-top: 8.1rem;
}

/* プラン同士の間は見出しからの間よりわずかに広い */
.plan + .plan {
  margin-top: 7.6rem;
}

.plan-img {
  flex: none;
  width: 45.6rem;
  height: 51.2rem;
  object-fit: cover;
}

.is-reverse .plan-img {
  height: 52.2rem;
}

.plan-text {
  width: 38.5rem;
}

.plan-title {
  margin-top: 3.5rem;
  font-size: 2.4rem;
  line-height: 1;
  font-weight: 600;
}

.plan-title.is-wide {
  width: 39.7rem;
  white-space: nowrap;
}

.plan-desc {
  margin-top: 3rem;
  line-height: 2;
}

/* 料金表。1行3.2remの行送りを崩さないよう、罫線は ::after で描く */
.price-table {
  margin: 1.8rem 0 0;
}

.price-row {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.price-row::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background: #D7E4E4;
}

.price-row dt,
.price-row dd {
  margin: 0;
  line-height: 2;
}

.price-row dd {
  font-weight: 700;
}

.price-row dd small,
.option-price small {
  font-size: 1.2rem;
  font-weight: 400;
}

/* 料金表の下にまとめて置く単位書き */
.price-unit {
  margin-top: 1.4rem;
  text-align: right;
  font-size: 1.2rem;
  line-height: 1.5;
  color: var(--main);
}

.plan-note {
  margin-top: 3.5rem;
  font-size: 1.2rem;
  line-height: 1.5;
  color: var(--main);
}

.plan-note + .plan-note {
  margin-top: 1.1rem;
}

/* 朝食オプションの囲み */
.plan-option {
  margin-top: 4rem;
  padding: 0.8rem 0.8rem 1.6rem;
  border: 1px solid var(--main);
}

.option-lead,
.option-row,
.option-note {
  padding-left: 0.6rem;
}

.option-lead {
  margin-top: 1.7rem;
  line-height: 1.1;
}

.option-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 1.4rem;
  line-height: 1.1;
}

.option-price {
  font-weight: 700;
}

.option-note {
  width: 36rem;
  margin-top: 1.3rem;
  font-size: 1.2rem;
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   10. ご予約
   -------------------------------------------------------------------------- */
.booking {
  position: relative;
  margin-top: 20.3rem; /* PLANSとの間にデザイン上の隙間がある */
  padding: 8.6rem 0 6.6rem;
}

/* 背景写真は不透明度80% */
.booking::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url("../img/Group_47_01.jpg") center / cover no-repeat;
  opacity: .8;
}

.booking-card {
  position: relative;
  z-index: 1;
  width: 93.2rem;
  margin-left: 25.4rem;
  padding: 5.4rem 11.1rem;
  background: rgb(255 255 255 / .9);
  text-align: center;
}

.booking-title {
  font-size: 2rem;
  font-weight: 600;
  line-height: 1;
}

/* 見出しの一部に引く黄色のマーカー */
.marker {
  background: linear-gradient(transparent 88%, #E1CC41 88%, #E1CC41 100%);
  color: var(--main);
}

.booking-lead {
  margin-top: 3.4rem;
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1.5;
}

/* 2プランの料金 */
.booking-prices {
  display: flex;
  justify-content: center;
  margin-top: 3.5rem;
}

.booking-price {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.8rem;
  width: 29rem;
  font-weight: 500;
  line-height: 1;
}

.booking-price + .booking-price {
  border-left: 2px solid #D7E4E4;
}

.booking-price .plan-name {
  font-size: 1.4rem;
  font-weight: 600;
}

.booking-price b {
  font-size: 1.6rem;
  font-weight: 700;
}

.booking-price small {
  font-size: 1.2rem;
}

/* ─ 見出し ─ */
.sub-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  margin-top: 3.5rem;
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--main);
}

.sub-head::before,
.sub-head::after {
  content: "";
  width: 1.6rem;
  height: 1px;
  background: currentColor;
}

/* 電話ボタン */
.tel-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
  width: 32.3rem;
  height: 5.1rem;
  margin: 2.6rem auto 0;
  border: 1px solid transparent;   /* ホバーで枠が出ても大きさが変わらないように */
  background: var(--text);
  color: var(--white);
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1;
  transition: background-color .3s, color .3s, border-color .3s;
}

/* 指で触る端末では、押したあとに色が残らないようにホバーを使わない */
@media (hover: hover) {
  /* 黒地の電話ボタン → 白地・黒枠に */
  .tel-btn:hover {
    border-color: var(--text);
    background: var(--white);
    color: var(--text);
  }

  /* 白地・黒枠の電話ボタン → 黒地・白文字に */
  .tel-btn.is-outline:hover {
    background: var(--text);
    color: var(--white);
  }
}

.tel-btn .tel-num {
  font-family: var(--antique);
  font-size: 1.8rem;
  font-weight: 400;
}

.tel-btn.is-outline {
  width: 30.2rem;
  height: 5.3rem;
  margin-top: 2.3rem;
  border: 1px solid var(--text);
  background: transparent;
  color: var(--text);
}

.tel-btn.is-outline .tel-num {
  font-size: 1.6rem;
}

.tel-btn.is-outline small {
  font-size: 1.4rem;
  font-weight: 600;
}

.tel-note {
  margin-top: 4.2rem;
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1;
}

/* 宿泊サイトのボタン */
.tel-btn.is-outline + .sub-head {
  margin-top: 3.3rem;
}

.ota-links {
  display: flex;
  justify-content: center;
  gap: 2.2rem;
  margin-top: 3.6rem;
}

/* このボタンだけ明朝ではなくゴシック */
.ota-link {
  display: flex;
  align-items: center;
  gap: 1rem;
  height: 4.9rem;
  padding: 0 1.5rem;
  background: var(--pale);
  font-family: var(--gothic);
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: .1em;
  transition: background-color .3s, color .3s;
}

@media (hover: hover) {
  .ota-link:hover {
    background: var(--main);
    color: var(--white);
  }

  .ota-link:hover .arrow {
    border-color: var(--white);
  }

  .ota-link:hover .arrow::before {
    border-right-color: var(--white);
    border-bottom-color: var(--white);
  }
}

/* 丸い矢印 */
.arrow {
  display: grid;
  place-items: center;
  width: 2.7rem;
  height: 1.9rem;
  border: 1px solid var(--main);
  border-radius: 3rem;
  transition: border-color .3s;
}

.arrow::before {
  content: "";
  width: 0.8rem;
  height: 0.5rem;
  border-right: 1px solid var(--main);
  border-bottom: 1px solid var(--main);
  transform: skewX(45deg) scaleY(.7);
  transition: border-color .3s;
}

/* --------------------------------------------------------------------------
   11. 館内・客室
   -------------------------------------------------------------------------- */
.rooms {
  margin-top: 21rem; /* ご予約セクションとの間の隙間 */
  text-align: center;
}

.rooms-lead {
  margin-top: 2.6rem;
  font-family: var(--hina);
  font-size: 1.4rem;
  line-height: 2;
}

.rooms-hero {
  width: 93.2rem;
  height: 39.9rem;
  margin: 5.1rem auto 0;
  object-fit: cover;
}

.rooms-detail {
  width: 60.8rem;
  margin: 4.9rem auto 0;
}

.rooms-note {
  line-height: 2;
}

/* 客室の内訳 */
.room-table {
  width: 38.5rem;
  margin: 5rem auto 0;
  border-top: 1px solid #D7E4E4;
}

.room-row {
  position: relative;
  display: flex;
  justify-content: space-between;
  padding: 0.5rem 0;
  line-height: 2;
  text-align: left;
}

.room-row::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background: #D7E4E4;
}

.room-row dt,
.room-row dd {
  margin: 0;
}

.room-row dd {
  display: flex;
  gap: 1.5rem;
}

.room-count {
  width: 3.8rem;
  text-align: right;
}

/* 館内の3枚 */
.facility-list {
  display: flex;
  justify-content: space-between;
  width: 93.2rem;
  margin: 5.8rem auto 0;
  text-align: left;
}

.facility-list li {
  width: 27.4rem;
}

.facility-list img {
  width: 27.4rem;
  height: 16.6rem;
  object-fit: cover;
}

.facility-list h3 {
  margin-top: 2.6rem;
  font-size: 1.8rem;
  font-weight: 600;
  line-height: 1;
}

.facility-list p {
  margin-top: 2.5rem;
  font-size: 1.4rem;
  line-height: 2;
}

/* 設備・アメニティ */
.amenity {
  width: 93.2rem;
  margin: 5.2rem auto 0;
  padding: 5.6rem 0 5.2rem;
  border: 1px solid var(--main);
}

.amenity-title {
  font-size: 1.8rem;
  font-weight: 600;
  line-height: 1;
  color: var(--main);
}

.amenity-list {
  display: flex;
  justify-content: center;
  margin-top: 4.2rem;
}

.amenity-list li {
  padding: 0 2.5rem;
  line-height: 1.375;
}

.amenity-list li + li {
  border-left: 1px solid #D7E4E4;
}

.amenity-note {
  margin-top: 4.1rem;
  font-size: 1.4rem;
  line-height: 1;
}

/* --------------------------------------------------------------------------
   12. 周辺（横スライダー）
   -------------------------------------------------------------------------- */
/* デザイン実測：ドットの下端から次のセクション（FAQ）まで247px */
.around {
  position: relative;
  margin: 20rem 0 0 25.4rem;
  width: 118.6rem;
  padding: 7.7rem 0 7.7rem;
}

/* 背景写真は不透明度60% */
/* 背景はスポットごとに切り替わる。2枚重ねて交差させる */
.around::before,
.around::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: center / cover no-repeat;
  transition: opacity .4s ease;
}

.around::before {
  /* JSが動かない・古いまま読み込まれた場合でも、デザインどおりの1枚は出るようにする */
  background-image: var(--bg-a, url("../img/Group_48_01.jpg"));
  opacity: var(--op-a, .6);
}

.around::after {
  background-image: var(--bg-b);
  opacity: var(--op-b, 0);
}

/* 動きを減らす設定の環境では、切り替えを瞬時にする */
@media (prefers-reduced-motion: reduce) {
  .around::before,
  .around::after { transition: none; }
}

.around-head,
.slider {
  position: relative;
  z-index: 1;
}

.around-head {
  margin-left: 9rem;
}

.around-lead {
  margin-top: 2.5rem;
  font-family: var(--hina);
  font-size: 1.4rem;
  line-height: 2;
}

/* デザイン実測：リードの文字の下端からカードの上端まで63px（実装は40pxだった） */
.slider {
  margin: 6.3rem 0 0 9.1rem;
  overflow: hidden;
}

.slider-view {
  overflow: hidden;
}

.slider-track {
  display: flex;
  align-items: stretch; /* カードの高さを揃える */
  gap: 4rem;
  transition: transform .5s cubic-bezier(.4, 0, .2, 1);
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
  /* iOSで指をすべらせたときに文字選択・長押しメニューが割り込まないように */
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.slider-track.is-grabbing {
  cursor: grabbing;
  transition: none;
}

/* ドラッグ中に画像を掴んでしまわないようにする */
.slider-track img {
  pointer-events: none;
}

/* 1枚のカード。写真＋テキストを白の90%で敷く */
.spot {
  flex: none;
  display: flex;
  align-items: flex-start;
  gap: 5.5rem;
  width: 97.3rem;
  min-height: 37.8rem;
  padding: 3rem 4.1rem 3rem 3rem;
  background: rgb(255 255 255 / .9);
}

.spot > img {
  flex: none;
  align-self: stretch; /* カードの高さいっぱいに伸ばす */
  width: 40rem;
  height: auto;
  min-height: 31.8rem;
  object-fit: cover;
}

.spot-title {
  margin-top: 4rem;
  font-size: 2.4rem;
  line-height: 1;
  font-weight: 600;
}

.spot-desc {
  margin-top: 2.7rem;
  line-height: 2;
}

.spot-check {
  margin-top: 2.2rem;
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 2;
  color: var(--main);
}

.spot-text {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.spot-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  margin-top: 2.7rem;
  padding-top: 0;
  font-size: 1.4rem;
  line-height: 2;
}

.spot-link {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex: none;
  color: var(--main);
  transition: opacity .3s;
}

@media (hover: hover) {
  .spot-link:hover {
    opacity: .7;
  }
}

/* 送りのドット */
/* 送りの矢印。ドットと同じ行に、左右に置く */
.slider-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2.6rem;
  margin-top: 11.8rem;
  margin-right: 9.1rem;
  /* iOSのSafariは、2枚重ねた背景写真（.around::before/::after）を別レイヤーで
     描く。スライドを送って2枚目が出た瞬間から、その半透明の写真が矢印とドットの
     上に重なって「薄くなった」ように見えることがある。
     ナビを自分のレイヤーに上げて、必ず写真より前に描かせる */
  position: relative;
  z-index: 2;
  transform: translateZ(0);
}

.slider-arrow {
  display: grid;
  place-items: center;
  width: 4.6rem;
  height: 3.2rem;
  border: 1px solid var(--main);
  border-radius: 3rem;
  background: var(--main);
  cursor: pointer;
  transition: background-color .3s, border-color .3s;
}

.slider-arrow::before {
  content: "";
  width: 0.9rem;
  height: 0.6rem;
  border-right: 1px solid #fff;
  border-bottom: 1px solid #fff;
  transform: skewX(45deg) scaleY(.7);
  transition: border-color .3s;
}

/* 180度回すと上下も返ってしまうので、左右だけ鏡にする */
.slider-arrow.is-prev::before {
  transform: scaleX(-1) skewX(45deg) scaleY(.7);
}

/* 通常時に色を敷き、ホバーで抜く。ノーマルの視認性を優先した */
/* 指で触る端末では、押したあとに色が残らないようにホバーを使わない */
@media (hover: hover) {
  .slider-arrow:hover {
    background: transparent;
  }

  .slider-arrow:hover::before {
    border-color: var(--main);
  }
}

.slider-dot::after {
  content: "";
  position: absolute;
  inset: -1.1rem;   /* 実際に押せる範囲を 3.3rem 角にする */
}

.slider-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
}

/* 小さくて押しにくかったため、見た目は変えずに当たり判定を広げる */
.slider-dot {
  position: relative;
  width: 1.1rem;
  height: 1.1rem;
  border: 1px solid var(--main);
  border-radius: 50%;
  background: transparent;
  transition: background-color .3s;
}

.slider-dot.is-current {
  background: var(--main);
}

/* --------------------------------------------------------------------------
   13. よくあるご質問
   -------------------------------------------------------------------------- */
.faq {
  margin-top: 17rem;
  text-align: center;
}

.faq-lead {
  margin-top: 2.6rem;
  font-family: var(--hina);
  font-size: 1.4rem;
  line-height: 2;
}

.faq-list {
  width: 81.3rem;
  margin: 7.3rem auto 0;
  text-align: left;
}

.faq-item {
  border-bottom: 1px solid #D7E4E4;
}

.faq-item summary {
  position: relative;
  display: flex;
  gap: 1.1rem;
  padding: 0.9rem 4rem 0.9rem 0;
  line-height: 2;
  cursor: pointer;
  list-style: none;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

/* ＋／− の切り替え */
.faq-item summary::before,
.faq-item summary::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: 1rem;
  height: 1px;
  background: var(--main);
  transition: transform .3s;
}

.faq-item summary::after {
  transform: rotate(90deg);
}

.faq-item.is-open summary::after {
  transform: rotate(0);
}

/* JSが動かない環境では、開いた時点で向きが変わる */
.faq-item[open]:not(.is-animating) summary::after {
  transform: rotate(0);
}

.faq-item p {
  display: flex;
  gap: 1.1rem;
  padding: 0 4rem 0.9rem 0;
  line-height: 2;
}

/* 高さを動かすあいだだけ、はみ出しを隠す */
.faq-item.is-animating p {
  overflow: hidden;
}

.qa {
  flex: none;
  width: 1.6rem;
  font-family: var(--antique);
  font-size: 1.4rem;
  color: var(--main);
  text-align: center;
}

/* --------------------------------------------------------------------------
   14. アクセス
   -------------------------------------------------------------------------- */
.access {
  width: 93.2rem;
  margin: 18.6rem 0 0 25.4rem;
}

.access-body {
  display: flex;
  justify-content: space-between;
  /* 地図の高さを右の列に合わせる */
  align-items: stretch;
  margin-top: 6rem;
}

.access-map {
  flex: none;
  width: 48.7rem;
  min-height: 42.2rem;   /* 右の列が短いときでも潰れないように */
  background: var(--gray);
}

.access-map iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.access-info {
  width: 38.5rem;
}

.access-name {
  font-size: 2.4rem;
  line-height: 1;
  font-weight: 600;
}

/* デザイン実測：前の行の文字の下端から、次のラベルの文字の上端まで39〜4rem */
.access-row {
  margin-top: 2.4rem;
}

/* 宿名の直後だけは、デザインで少し広い（文字の下端から3.8rem） */
.access-name + .access-row {
  margin-top: 3rem;
}

.access-row p {
  line-height: 2;
}

.access-label {
  font-size: 1.2rem;
  line-height: 2;
  color: var(--main);
}

.access-row .tel-btn {
  width: 29.5rem;
  margin: 1.2rem 0 0;
}

.access-sub {
  margin-top: 1.2rem;
}

.tel-alt {
  font-family: var(--antique);
  font-size: 1.8rem;
}

.access-fax {
  font-family: var(--antique);
}

/* --------------------------------------------------------------------------
   15. フッター
   -------------------------------------------------------------------------- */
.footer {
  position: relative;
  margin-top: 10.2rem;
  padding-top: 10rem;
}

/* 背景写真は不透明度80%。ご予約セクションと同じ写真 */
.footer::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url("../img/Group_47_01.jpg") center / cover no-repeat;
  opacity: .8;
}

.footer .booking-card {
  position: relative;
  z-index: 1;
}

/* 一番下の帯 */
.footer-bar {
  position: relative;
  z-index: 1;
  margin-top: 10rem;
  padding: 2.7rem 0 2.7rem;
  background: rgb(0 0 0 / .25);
  color: var(--white);
  text-align: center;
}

.footer-crest {
  width: 2.9rem;
  height: 2.9rem;
  margin: 0 auto;
}

.footer-name {
  margin-top: 1rem;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.5;
}

.footer-en {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2.2rem;
  margin-top: 1.5rem;
  font-family: var(--sedan);
  font-size: 1.2rem;
  line-height: 1;
}

.footer-en span + span {
  position: relative;
}

.footer-en span + span::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -1.6rem;
  width: 1rem;
  height: 1px;
  background: rgb(255 255 255 / .75);
}

/* --------------------------------------------------------------------------
   16. ハンバーガーメニュー（開いた状態）
   -------------------------------------------------------------------------- */
/* 閉じているあいだパネルは画面の右外にあるので切り取っておく */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 300;
  overflow: hidden;
  background: rgb(0 0 0 / .2);
  opacity: 0;
  transition: opacity .4s;
}

.drawer[hidden] {
  display: block;
  pointer-events: none;
}

.drawer.is-open {
  opacity: 1;
}

/* 右から出るパネル */
.drawer-panel {
  position: absolute;
  top: 0;
  right: 0;
  width: 66rem;
  height: 100%;
  overflow-y: auto;
  padding: 0 5.1rem;
  background: rgb(255 255 255 / .9); /* Figma: #FFFFFF 不透明度90% */
  transform: translateX(100%);
  transition: transform .4s cubic-bezier(.4, 0, .2, 1);
}

.drawer.is-open .drawer-panel {
  transform: none;
}

/* パネルにも和紙のテクスチャを薄く敷く */
.drawer-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url("../img/bg_washi.jpg") center / cover no-repeat;
  opacity: .2;
  pointer-events: none;
}

.drawer-panel > * {
  position: relative;
  z-index: 1;
}

/* 閉じる（×） */
.drawer-close {
  position: absolute;
  top: 5.8rem;
  right: 6.8rem;
  z-index: 2;
  width: 2.6rem;
  height: 2.6rem;
}

.drawer-close::before,
.drawer-close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 2.6rem;
  height: 1.5px;
  background: var(--main);
}

.drawer-close::before { transform: rotate(45deg); }
.drawer-close::after  { transform: rotate(-45deg); }

/* 縦組みのメニュー。右から左へ読む */
.drawer-nav {
  display: flex;
  flex-direction: row-reverse;
  justify-content: center;
  gap: 4rem;
  padding-top: 12.5rem;
}

.drawer-nav a {
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-size: 1.6rem;
  line-height: 1;
  letter-spacing: .1em;
  transition: color .3s;
}

@media (hover: hover) {
  .drawer-nav a:hover {
    color: var(--main);
  }
}

.drawer-body {
  margin-top: 11.4rem;
  text-align: center;
}

.drawer-title {
  font-size: 2.4rem;
  font-weight: 600;
  line-height: 1;
}

.drawer-lead {
  width: 41.7rem;
  margin: 3.3rem auto 0;
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1.5;
  text-align: left;
}

.drawer-prices {
  display: flex;
  justify-content: center;
  width: 53.8rem;
  margin: 3.2rem auto 0;
  padding: 1.3rem 0;
  border-top: 1px solid var(--text);
  border-bottom: 1px solid var(--text);
}

.drawer-note {
  margin-top: 4rem;
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1.5;
}

.drawer-body .tel-btn.is-outline {
  margin-top: 2.9rem;
}

.drawer-rule {
  width: 7.9rem;
  height: 0;
  margin: 4rem auto;
  border: none;
  border-top: 1px solid rgb(0 94 130 / .75);
}

.drawer-sub {
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1.5;
}

.drawer-body .ota-links {
  margin-top: 2.8rem;
  padding-bottom: 4.7rem;
}

.ota-link.is-dark {
  background: #D7E4E4;
}

/* ==========================================================================
   SP ─ Figma「たなべ旅館 / SP」（37.5rem基準）より
   採寸は design_sp/199-153.png（375幅の0.93867倍）から実測。
   デザイン上のページ本体は y=64 から始まる（上の 0〜64 は端末のモックアップ）。
   ========================================================================== */

/* PCでは出さない（SP専用の要素） */
.sp-reserve-bar { display: none; }

/* 押している最中の色は自分で描くので、端末が勝手に敷く灰色は消す */
.tel-btn,
.ota-link,
.sp-reserve-btn,
.drawer-nav a,
.slider-arrow,
.slider-dot,
.spot-link,
.float-cta {
  -webkit-tap-highlight-color: transparent;
}

/* SPだけで効かせる改行 */
.sp-br { display: none; }

/* --------------------------------------------------------------------------
   12. スクロールに合わせて現れる
   ひと区切りずつ、下から少し上がりながら淡く出す。
   JSが動くときだけ隠す（js-reveal）ので、JSが無効でも中身は必ず見える
   -------------------------------------------------------------------------- */
.js-reveal .reveal {
  opacity: 0;
  transform: translateY(2.4rem);
}

.js-reveal .reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity .9s ease, transform .9s cubic-bezier(.4, 0, .2, 1);
  /* 並んでいるものを順に出すための待ち時間。既定は0 */
  transition-delay: var(--reveal-delay, 0s);
}

@media (prefers-reduced-motion: reduce) {
  .js-reveal .reveal {
    opacity: 1;
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   13. 画面幅への対応
   1440pxのデザインを基準に、狭い画面では版面ごと縮める。
   1080px未満は375pxのデザインに切り替える。
   -------------------------------------------------------------------------- */
@media (min-width: 1080px) and (max-width: 1439.98px) {
  /* 1440pxのとき1rem＝10px。そのまま比率を保って縮む */
  html {
    font-size: 0.694444vw;
  }
}

@media (max-width: 1079.98px) {

  /* 375pxのデザインを画面幅に比例させる。1rem＝10px@375、450px超で12pxで頭打ち。
     タブレット（625px超）では版面が細くなりすぎるので、画面幅の72%まで広げる */
  html {
    font-size: max(min(2.66667vw, 12px), 1.92vw);
  }

  .page {
    max-width: 37.5rem;   /* 450px以下では 100vw と同じ。それ以上では中央寄せ */
    margin-inline: auto;
  }

  :root {
    --inner: 33.5rem;
    --header-h: 8.3rem;
  }

  /* --------------------------------------------------------------------------
   ヘッダー ─ ロゴ（左）＋ハンバーガー（右）
   -------------------------------------------------------------------------- */
  .header {
    height: var(--header-h);
  }

  .header-inner {
    /* 版面と同じ幅で中央に。450px以下では画面幅と同じなので見た目は変わらない */
    max-width: 37.5rem;
    margin-inline: auto;
    height: var(--header-h);
    padding: 1.9rem 2rem 0;
  }

  /* 縦書きのグローバルナビはSPでは出さない（ドロワーに集約する） */
  .gnav { display: none; }

  .logo {
    flex-direction: row;
    align-items: center;
    gap: 0.9rem;
    pointer-events: auto;
  }

  .logo-crest {
    width: 2.8rem;
    height: 2.8rem;
  }

  .logo-name {
    writing-mode: horizontal-tb;
    text-orientation: mixed;
    font-size: 1.8rem;
    letter-spacing: .08em;
  }

  /* --------------------------------------------------------------------------
   右の固定パネル ─ SPではハンバーガーだけをヘッダーの右に置き、常に出す
   -------------------------------------------------------------------------- */
  .float-panel {
    top: 2.2rem;
    /* 版面37.5remの右端から2rem内側。450px以下では画面端から2rem */
    right: calc(50% - 18.75rem + 2rem);
    flex-direction: row;
    gap: 0;
    opacity: 1;
    visibility: visible;
  }

  /* ご宿泊予約は下の .sp-reserve-bar が受け持つ */
  .float-cta { display: none; }

  /* デザイン実測：線は太さ2px、上から22/32/4.2rem（間隔0.8rem）、幅26/19/26 */
  .hamburger {
    gap: 0.8rem;
    width: 2.6rem;
    pointer-events: auto;
  }

  .hamburger span { height: 2px; }

  .hamburger span:nth-child(1),
  .hamburger span:nth-child(3) { width: 2.6rem; }
  .hamburger span:nth-child(2) { width: 1.9rem; }

  /* --------------------------------------------------------------------------
   ファーストビュー ─ 写真2枚を縦に積み、右に縦書きのキャッチを重ねる
   -------------------------------------------------------------------------- */
  .fv {
    height: 57.2rem;
  }

  .fv-media {
    left: 2rem;
    width: 33.5rem;
  }

  .fv-slide {
    grid-template-rows: 27.6rem 27.5rem;
  }

  /* 行の高さと同じ値を直接指定する（上の .fv-img の注意書きを参照） */
  .fv-img { height: 27.6rem; }
  .fv-img + .fv-img { height: 27.5rem; }

  /* .fv は既にヘッダー分（8.3rem）下から始まる。top はその中での位置 */
  /* デザイン実測：白帯の上端はページ y151（FV内 6.8rem） */
  .fv-catch {
    top: 6.8rem;
    left: auto;
    right: 3.8rem;
    gap: 1.1rem;
  }

  /* 縦書きでは line-height が行の幅になる。中身の幅と揃えないと文字が右に寄る */
  .fv-line {
    width: 3rem;
    padding: 0.6rem 0.4rem;
    font-size: 2rem;
    line-height: 1.1;
  }

  /* --------------------------------------------------------------------------
   FV下のご宿泊予約バー（SP専用）
   外側 .sp-reserve-bar は場所取り。中の .sp-reserve-inner だけが
   スクロールで画面下に貼りつき、フッターの下に潜り込む
   -------------------------------------------------------------------------- */
  /* FVの下に帯は出さない。位置の目印としてだけ置く */
  .sp-reserve-bar {
    display: block;
    height: 0;
    margin: 0;
  }

  .sp-reserve-inner {
    display: none;
  }

  /* 通り過ぎたら画面下へ貼りつく。z-indexはフッターより上 */
  .sp-reserve-bar.is-fixed .sp-reserve-inner {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 150;
    display: grid;
    place-items: center;
    height: 7.1rem;
    background: var(--pale);
    /* fill-mode は付けない。both を付けると、何かの理由でアニメーションが */
    animation: sp-reserve-in .3s ease-out;
  }

  @keyframes sp-reserve-in {
    from { transform: translateY(100%); }
    to   { transform: none; }
  }

  /* 動きを減らす設定のときは、せり上がりを出さずにそのまま置く */
  @media (prefers-reduced-motion: reduce) {
    .sp-reserve-bar.is-fixed .sp-reserve-inner { animation: none; }
  }

  /* メニューを開いているあいだは引っ込める */
  body.is-drawer-open .sp-reserve-bar.is-fixed .sp-reserve-inner {
    display: none;
  }

  /* Figma 239-1763 の実測：帯375×71 のなかにボタン131×44（左右12.2rem・上1.1rem） */
  .sp-reserve-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    width: 13.1rem;
    height: 4.4rem;
    border: 1px solid var(--main);
    background: var(--white);
    color: var(--main);
    font-family: var(--mincho);
    font-size: 1.5rem;
    letter-spacing: .06em;
    text-decoration: none;
    transition: background .2s, color .2s;
  }

  .sp-reserve-btn img {
    width: 2rem;
    height: 1.9rem;
  }

  /* 押したとき */
  .sp-reserve-btn:active {
    background: var(--main);
    color: var(--white);
  }

  .sp-reserve-btn:active img {
    filter: brightness(0) invert(1);
  }

  /* --------------------------------------------------------------------------
   見出しまわり（全セクション共通）
   -------------------------------------------------------------------------- */
  .label {
    font-size: 1.1rem;
    letter-spacing: .06em;
  }

  /* デザイン実測：英字ラベルの下端から見出しの上端まで18px（実装は22pxだった） */
  .heading {
    margin-top: 1.4rem;
    font-size: 2.3rem;
  }

  /* --------------------------------------------------------------------------
   コンセプト
   -------------------------------------------------------------------------- */
  /* 上の9.8remは、デザインでFV下の予約バーが占めていた分 */
  .concept {
    padding: 9.8rem 0 21.6rem;
  }

  .concept-head {
    margin-left: 2rem;
  }

  /* デザインの行送りは2.8rem（＝1.4rem×2.0） */
  .concept-text {
    width: 33.5rem;
    margin: 3.9rem 0 0 2rem;
    font-size: 1.4rem;
    line-height: 2;
  }

  /* --------------------------------------------------------------------------
   コンセプトの写真帯
   🔴 SPでもPCと同じく、スクロールに連れて横へ流す。
   🔴 帯の高さと位置はFigmaのまま（21.2rem・本文の4.3rem下）。
   1枚目が定位置に来たらそこで止まり、あとは横に流れるだけ。
   止める位置を画面の下寄りにしておくと、写真が現れてすぐ止まるので
   「上端が下がっていく」動きが出ない
   -------------------------------------------------------------------------- */
  .marquee-pin {
    height: calc(var(--mq-stick, 29.1rem) + var(--mq-travel, 0px) + var(--mq-hold, 0px));
  }

  /* Figma「gallery-sp」（node 224:286）の実測。帯は2122×291px */
  /* 写真の帯の中心が画面の中心に来る位置で止める */
  .marquee-stick {
    top: calc(50vh + 14.55rem - var(--mq-stick, 70rem));
  }

  .marquee {
    height: 29.1rem;
    margin-top: 4.3rem;   /* 本文から写真帯まで（デザイン実測） */
  }

  .marquee-track {
    gap: 7.8rem;
    width: max-content;
    padding-left: 1.9rem;
  }

  /* Figma「gallery-sp」実測：3枚とも高さは同じ21.2rem。段差だけが違う */
  .marquee-img.is-a { width: 39.8rem; height: 21.2rem; margin-top: 0; }
  .marquee-img.is-b { width: 30.1rem; height: 21.2rem; margin-top: 7.9rem; }
  .marquee-img.is-c { width: 14.8rem; height: 21.2rem; margin-top: 3.9rem; }

  /* --------------------------------------------------------------------------
   ３つの魅力
   SPではカードを縦積みにし、写真は文章の下に置く
   -------------------------------------------------------------------------- */
  .reasons {
    padding: 3.7rem 0 6rem;
  }

  .reasons-inner {
    width: 100%;
    margin: 0;
    padding: 0 2rem;
  }

  .reason-list {
    gap: 4.1rem;
    margin-top: 4rem;
  }

  .reason-card {
    padding: 1.8rem 2rem 2.4rem;
  }

  .reason-num {
    font-size: 1.2rem;
  }

  .reason-body {
    display: block;
    margin-top: 1.4rem;
  }

  .reason-text {
    width: auto;
  }

  .reason-title {
    font-size: 1.8rem;
  }

  .reason-desc {
    margin-top: 1.8rem;
    font-size: 1.4rem;
    line-height: 2;
  }

  .reason-img {
    width: 100%;
    height: 23.2rem;
    margin-top: 3.7rem;
  }

  /* --------------------------------------------------------------------------
   お料理
   -------------------------------------------------------------------------- */
  .cuisine {
    width: auto;
    margin: 0;
    padding: 8.3rem 2rem 7.9rem;
  }

  .cuisine-hero {
    width: 100%;
    height: 39rem;
    margin-top: 4.2rem;
  }

  .cuisine-main {
    display: block;
    margin-top: 3.5rem;
  }

  .cuisine-main-text {
    width: auto;
  }

  .dish-title {
    font-size: 1.8rem;
  }

  .dish-desc {
    margin-top: 2.9rem;
    font-size: 1.4rem;
  }

  .note {
    margin-top: 1.6rem;
    font-size: 1.2rem;
  }

  /* お品書き（縦組み） */
  /* お品書き：SPはタイトルと項目が同じ高さから始まる（PCのような段差なし） */
  /* ️ .menu-list は flex-direction: row-reverse */
  .menu-list {
    justify-content: flex-start;
    gap: 4rem;
    margin-top: 7.2rem;
    padding-right: 3.8rem;   /* デザイン実測：見出しの右端が x317 */
  }

  .menu-list-items {
    gap: 2.2rem;
    margin-top: 0;
  }

  .menu-list-title {
    font-size: 1.6rem;
  }

  /* デザイン実測：線の上の文字から線まで50px、線から次の写真まで40px */
  .rule {
    margin: 4.5rem 0 0;
  }

  /* お料理の各品（姿造り・地酒）：SPは写真を上、文章を下に積む */
  .dish-row {
    display: block;
    margin-top: 6.4rem;
  }

  .dish-img {
    width: 100%;
    height: 29.5rem;
  }

  .dish-text {
    width: auto;
    margin-top: 3.9rem;
  }

  .dish-text .dish-title {
    margin-top: 1.8rem;
  }

  .dish-row.is-reverse {
    margin-top: 4.9rem;
  }

  .dish-row.is-reverse .dish-text {
    width: auto;
  }

  /* 冬季限定メニュー */
  .winter {
    width: auto;
    margin: 3.5rem 0 0;
  }

  .winter-head {
    gap: 2rem;
  }

  .winter-title {
    font-size: 1.8rem;
  }

  .winter-item {
    margin-top: 7.9rem;
  }

  /* .winter の直下は winter-head が最初の div なので :first-of-type は使えない */
  .winter-head + .winter-item {
    margin-top: 3.9rem;
  }

  .winter-item img {
    width: 100%;
    height: 29.6rem;
  }

  .winter-item .dish-title {
    margin-top: 4rem;
  }

  .cuisine-foot {
    margin-top: 3.7rem;
    font-size: 1.4rem;
  }

  /* お食事処は文章が先・写真が後 */
  .dish-row.is-reverse .dish-img {
    margin-top: 3.9rem;
  }

  /* .cuisine 直下の div は head(1) main(2) dish-row(3) dish-row(4) winter(5) dish-row(6) */
  .cuisine .dish-row:nth-of-type(3) {
    margin-top: 4rem;
  }

  .cuisine .dish-row:nth-of-type(6) {
    margin-top: 2.7rem;
  }

  /* 早瀬浦だけ写真とバッジの間隔が狭い（デザイン実測 1.9rem） */
  .cuisine .dish-row:nth-of-type(4) .dish-text {
    margin-top: 1.9rem;
  }

  /* --------------------------------------------------------------------------
   ご宿泊プラン・料金
   SPでは淡色の帯を全幅にし、写真の下に文章を置く
   -------------------------------------------------------------------------- */
  .plans {
    padding: 3.4rem 0 6rem;
  }

  .plans::before,
  .plans::after {
    left: 0;
    width: 100%;
  }

  .plans-head,
  .plan {
    margin-left: 2rem;
    margin-right: 2rem;
  }

  .plan {
    display: block;
    width: auto;
    margin-top: 3.7rem;
  }

  .plan + .plan {
    margin-top: 7.6rem;
  }

  .plan-img,
  .is-reverse .plan-img {
    width: 100%;
    height: 29.6rem;
  }

  .plan-text {
    width: auto;
    margin-top: 3.4rem;
  }

  /* 素泊まりはHTML上は文章が先だが、SPのデザインは写真が上 */
  .plan.is-reverse {
    display: flex;
    flex-direction: column-reverse;
    /* PC側の .plan に align-items:flex-start が付いているため、 */
    align-items: stretch;
  }

  /* flexの子は min-width:auto で縮まないため、横にはみ出すのを防ぐ */
  .plan.is-reverse > * {
    min-width: 0;
  }

  .plan.is-reverse .plan-text {
    margin-top: 0;
  }

  .plan.is-reverse .plan-img {
    margin-bottom: 3.4rem;
  }

  .plan-title {
    margin-top: 2.5rem;
    font-size: 1.8rem;
  }

  .plan-title.is-wide {
    width: auto;
  }

  .plan-desc {
    margin-top: 3.4rem;
    font-size: 1.4rem;
  }

  .price-table {
    margin-top: 2rem;
  }

  /* 行送り3.2rem（デザイン実測） */
  .price-row dt,
  .price-row dd {
    line-height: 1.88;
  }

  .price-row dt {
    font-size: 1.5rem;
  }

  .price-row dd {
    font-size: 1.7rem;
  }

  .price-row dd small,
  .option-price small {
    font-size: 1.1rem;
  }

  .price-unit {
    margin-top: 0.4rem;
    font-size: 1.1rem;
  }

  .plan-note {
    margin-top: 3rem;
    font-size: 1.3rem;
  }

  .plan-note + .plan-note {
    margin-top: 1rem;
  }

  .plan-option {
    margin-top: 4rem;
    padding: 0.8rem 0.8rem 1.6rem;
  }

  .option-lead {
    margin-top: 1.7rem;
    font-size: 1.5rem;
  }

  .option-row {
    margin-top: 1.4rem;
    font-size: 1.4rem;
  }

  /* ⚠ PC側の width:36rem（360px）がSPにも効いて枠から34pxはみ出していた */
  .option-note {
    width: auto;
    font-size: 1.2rem;
  }

  /* --------------------------------------------------------------------------
   ご予約
   -------------------------------------------------------------------------- */
  .booking {
    margin-top: 17.4rem;
    padding: 4rem 0;
  }

  .booking-card {
    width: auto;
    margin: 0 2rem;
    padding: 3rem 2rem 4rem;
  }

  .booking-title {
    font-size: 1.8rem;
    line-height: 1.4;
  }

  /* SPだけ左端合わせ */
  .booking-lead {
    margin-top: 3rem;
    font-size: 1.4rem;
    line-height: 2;
    text-align: left;
  }

  /* 2プランの料金はSPでは縦に積む */
  .booking-prices {
    display: block;
    margin-top: 3rem;
  }

  .booking-price {
    width: auto;
    gap: 1rem;
  }

  /* 縦積みなので、区切りは行の間に短い横線で入れる */
  .booking-price + .booking-price {
    position: relative;
    margin-top: 3.7rem;
    border-left: none;
  }

  .booking-price + .booking-price::before {
    content: "";
    position: absolute;
    top: -1.9rem;
    left: 50%;
    width: 3rem;
    height: 2px;
    margin-left: -1.5rem;
    background: #D7E4E4;
  }

  .booking-price .plan-name { font-size: 1.4rem; }
  .booking-price b { font-size: 1.7rem; }
  .booking-price small { font-size: 1.1rem; }

  .sub-head {
    margin-top: 3rem;
    font-size: 1.5rem;
  }

  /* ️ 239-1783 では色が反転して見えるが、本体（199-153）はPCと同じ */
  .tel-btn {
    width: 29.5rem;
    height: 5.3rem;
    margin-top: 1.2rem;
    font-size: 1.5rem;
  }

  .tel-btn .tel-num { font-size: 1.7rem; }

  .tel-btn.is-outline {
    width: 29.5rem;
    height: 5.3rem;
    margin-top: 1.2rem;
  }

  .tel-btn.is-outline .tel-num { font-size: 1.6rem; }
  .tel-btn.is-outline small { font-size: 1.3rem; }

  .sp-br { display: inline; }

  .tel-note {
    margin-top: 3.6rem;
    font-size: 1.3rem;
    line-height: 1.6;
  }

  .tel-btn.is-outline + .sub-head {
    margin-top: 3.2rem;
  }

  /* 宿泊サイトのボタンはSPでは縦積み・中央寄せ */
  .ota-links {
    flex-direction: column;
    align-items: center;
    gap: 2.3rem;
    margin-top: 3.2rem;
  }

  /* SPだけ、じゃらんのボタンを楽天トラベルと同じ大きさにする */
  .ota-link {
    justify-content: center;
    font-size: 1.5rem;
  }

  .booking-card .ota-link {
    width: 17.1rem;
    padding: 0;
  }

  /* --------------------------------------------------------------------------
   館内・客室
   -------------------------------------------------------------------------- */
  .rooms {
    margin-top: 10.5rem;
    padding: 0 2rem;
  }

  .rooms-lead {
    margin-top: 3.8rem;
    font-size: 1.4rem;
  }

  .rooms-hero {
    width: 100%;
    height: 40rem;
    margin-top: 3rem;
  }

  .rooms-detail {
    width: auto;
    margin-top: 2.9rem;
    text-align: left;
  }

  .rooms-note {
    font-size: 1.4rem;
  }

  .room-table {
    width: auto;
    margin-top: 2.9rem;
  }

  .room-row {
    padding: 0.6rem 0;
    font-size: 1.5rem;
  }

  .room-row dd {
    gap: 1.2rem;
  }

  /* 館内の3枚：SPは写真とテキストを横に並べ、左右を交互にする */
  .facility-list {
    display: flex;
    flex-direction: column;
    gap: 3.8rem;
    width: auto;
    margin-top: 3.7rem;
  }

  /* 写真は grid-row: 1/3 で2行にまたがるため、写真（16.8rem）の高さぶん */
  .facility-list li {
    display: grid;
    grid-template-columns: 14.8rem 1fr;
    grid-template-rows: auto 1fr;
    align-items: start;
    column-gap: 1.6rem;
    width: auto;
  }

  .facility-list li img {
    grid-row: 1 / 3;
    width: 14.8rem;
    height: 16.8rem;
  }

  /* 行送りを指定しないと body の line-height:2 を継いで、 */
  .facility-list li h3 {
    margin-top: 0;
    font-size: 1.6rem;
    line-height: 1.4;
  }

  /* 最終行に「す。」だけが落ちるのを避けるため、字送りをわずかに詰めている */
  .facility-list li p {
    margin-top: 0.9rem;
    font-size: 1.5rem;
    line-height: 1.9;
    letter-spacing: -0.06em;
    /* 対応ブラウザでは最終行が1〜2文字だけにならないよう自動で調整される */
    text-wrap: pretty;
  }

  /* 1番目＝お風呂（HTML順）はデザインでは3番目 */
  .facility-list li:nth-child(1) { order: 3; }
  .facility-list li:nth-child(2) { order: 1; }
  .facility-list li:nth-child(3) { order: 2; }

  /* 2番目に出るトイレ・洗面所だけ写真を右に */
  .facility-list li:nth-child(3) {
    grid-template-columns: 1fr 14.8rem;
  }

  .facility-list li:nth-child(3) img {
    grid-column: 2;
  }

  .facility-list li:nth-child(3) h3,
  .facility-list li:nth-child(3) p {
    grid-column: 1;
  }

  /* 設備・アメニティ */
  /* デザイン実測：枠は x30〜349（幅320）、中の項目は縦に積んで左揃え */
  .amenity {
    width: auto;
    margin: 3.8rem 1rem 0;
    padding: 3.8rem 0 3.6rem;
  }

  .amenity-title {
    font-size: 1.6rem;
  }

  .amenity-list {
    display: block;
    width: fit-content;
    margin: 3.6rem auto 0;
    text-align: left;   /* デザインは項目の頭が揃っている（x101） */
  }

  .amenity-list li {
    padding: 0;
  }

  .amenity-list li + li {
    margin-top: 1.5rem;
    border-left: none;
  }

  .amenity-note {
    margin-top: 3.4rem;
  }

  /* --------------------------------------------------------------------------
   周辺（AROUND）
   SPもスライダーのまま。カードは写真が上・文章が下
   -------------------------------------------------------------------------- */
  /* デザイン実測：ナビの下端からセクションの終わりまで44px */
  .around {
    width: auto;
    margin: 7.3rem 0 0;
    padding: 6rem 0 4.4rem;
  }

  .around-head {
    margin-left: 2rem;
  }

  .around-lead {
    margin-top: 2rem;
    font-size: 1.4rem;
  }

  .slider {
    margin: 3rem 0 0 2rem;
  }

  /* ⚠ iOSのSafariはタッチをJSに渡さないことがあり、指で送れなかった。
     SPはブラウザ標準の横スクロールに任せる（1枚ずつ吸い付いて止まる） */
  .slider-view {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .slider-view::-webkit-scrollbar {
    display: none;
  }

  /* 4枚とも同じ高さに揃える */
  .slider-track {
    align-items: stretch;
    gap: 2rem;
    touch-action: auto;
    transition: none;
    cursor: auto;
  }

  .spot {
    scroll-snap-align: start;
  }

  /* 最後の1枚も左端まで寄れるように、うしろに余白を足す */
  .slider-track::after {
    content: "";
    flex: none;
    width: 6rem;
  }

  /* 矢印とドットはPCと同じものを出す */
  /* デザインは38pxだが、カードと矢印を1画面に収めるため詰めている */
  .slider-nav {
    gap: 2rem;
    margin: 2rem 2rem 0 0;
  }

  /* 次のカードを少し覗かせる */
  /* カードと下の矢印が1画面に収まるように詰めた */
  .spot {
    display: block;
    width: 30rem;
    min-height: 0;
    padding: 1.6rem;
  }

  .spot > img {
    width: 100%;
    min-height: 0;
    height: 13rem;        /* 18.8rem から */
  }

  .spot-text {
    display: block;
    margin-top: 1.5rem;   /* 2rem から */
  }

  .spot-title {
    margin-top: 1.2rem;   /* 1.8rem から */
    font-size: 1.7rem;
  }

  .spot-desc {
    margin-top: 1.6rem;   /* 4.2rem から */
    font-size: 1.4rem;
  }

  .spot-check {
    margin-top: 1.2rem;   /* 2rem から */
    font-size: 1.3rem;
  }

  /* 「宿から◯分」とリンクはSPでは縦に並ぶ */
  .spot-foot {
    display: block;
    margin-top: 1.8rem;   /* 3.7rem から */
    font-size: 1.4rem;
  }

  .spot-link {
    margin-top: 1.2rem;   /* 1.9rem から */
  }

  /* --------------------------------------------------------------------------
   よくあるご質問
   -------------------------------------------------------------------------- */
  .faq {
    margin-top: 10.4rem;
    padding: 0 2rem;
  }

  .faq-lead {
    margin-top: 3.6rem;
    font-size: 1.4rem;
  }

  .faq-list {
    width: auto;
    margin-top: 1.3rem;
  }

  /* デザインでは質問が1行に収まる。折り返さない幅に詰める */
  .faq-item summary {
    gap: 0.8rem;
    padding: 1.1rem 1.8rem 1.1rem 0;
    font-size: 1.4rem;
    line-height: 1.93;
  }

  .faq-item p {
    gap: 0.8rem;
    font-size: 1.4rem;
  }

  /* --------------------------------------------------------------------------
   アクセス
   -------------------------------------------------------------------------- */
  .access {
    width: auto;
    margin: 9.8rem 0 0;
    padding: 0 2rem;
  }

  .access-body {
    display: block;
    margin-top: 4rem;
  }

  .access-map {
    width: 100%;
    /* PC側で入れている min-height を打ち消す（SPはデザイン実測で縦32.1rem） */
    min-height: 0;
    height: 32.1rem;
  }

  .access-info {
    width: auto;
    margin-top: 3.8rem;
  }

  .access-name {
    font-size: 1.8rem;
  }

  /* デザイン実測：前の行の文字の下端から次のラベルの文字の上端まで39〜40px */
  .access-row {
    margin-top: 2.9rem;
  }

  .access-row p {
    font-size: 1.4rem;
  }

  /* デザイン実測：ラベルの文字の上端から本文の上端まで22px（実装は28pxだった） */
  /* デザイン実測：ラベルの文字の上端から本文の上端まで22px（実装は28pxだった） */
  .access-row .access-label {
    font-size: 1.2rem;
    line-height: 1.4;
  }

  .access-row .tel-btn {
    width: 100%;
    height: 5.2rem;
    margin-top: 0.4rem;
  }

  /* デザインでは「つながらない時は」の後で改行される */
  .access-sub {
    max-width: 21rem;
    margin: 1.6rem auto 0;   /* デザイン実測：ボタンの下端から30px */
    text-align: center;
  }

  .tel-alt {
    white-space: nowrap;
    font-size: 1.7rem;
  }

  /* --------------------------------------------------------------------------
   フッター
   -------------------------------------------------------------------------- */
  .footer {
    margin-top: 6.6rem;
    /* 一番下まで送ったとき、貼りついた予約バー（高さ71px）に */
    padding: 6rem 0 7.1rem;
  }

  /* デザイン実測：じゃらんボタンの下端から一番下の帯まで98px（実装は159pxだった） */
  .footer-bar {
    margin-top: 3.9rem;
  }

  /* --------------------------------------------------------------------------
   押したときの見え方
   押しているあいだ、地と文字の色が入れ替わる
   -------------------------------------------------------------------------- */

  /* 黒地の電話ボタン → 白地・黒枠に */
  .tel-btn:active {
    border: 1px solid var(--text);
    background: var(--white);
    color: var(--text);
  }

  /* 白地・黒枠の電話ボタン → 黒地・白文字に */
  .tel-btn.is-outline:active {
    background: var(--text);
    color: var(--white);
  }

  /* 宿泊サイトのボタン */
  .ota-link:active {
    background: var(--text);
    color: var(--white);
  }

  .ota-link:active .arrow {
    border-color: var(--white);
  }

  .ota-link:active .arrow::before {
    border-right-color: var(--white);
    border-bottom-color: var(--white);
  }

  /* --------------------------------------------------------------------------
   ハンバーガーメニュー
   PCは幅66remのパネルが右から出る作り。SPは画面いっぱいに開く
   -------------------------------------------------------------------------- */
  .drawer-panel {
    /* 版面と同じ幅・同じ位置に。450px以下では画面幅いっぱいで見た目は変わらない */
    width: 100%;
    max-width: 37.5rem;
    right: 50%;
    margin-right: -18.75rem;
    padding: 0 2rem;
    /* デザインの地色は和紙テクスチャ20%込みで rgb(202 214 215) */
    background:
      linear-gradient(rgb(197 209 210 / .8), rgb(197 209 210 / .8)),
      url("../img/bg_washi.jpg") center / cover no-repeat;
  }

  .drawer-panel::before {
    display: none;
  }

  .drawer-close {
    top: 3.9rem;
    right: 2rem;
    width: 2.3rem;
    height: 2.3rem;
  }

  /* ×は45度に倒した2本の線。デザインの外形23×23に合わせるには */
  .drawer-close::before,
  .drawer-close::after {
    left: -0.5rem;
    width: 3.3rem;
  }

  .drawer-nav {
    gap: 4rem;
    padding-top: 14.1rem;
  }

  /* 押したところが分かるよう、文字の後ろに薄く色を敷く（デザインはTOPで例示） */
  .drawer-nav a:active {
    background: rgb(0 0 0 / .14);
  }

  .drawer-body {
    margin-top: 7.8rem;
  }

  .drawer-title {
    font-size: 1.8rem;
  }

  .drawer-lead {
    width: auto;
    margin-top: 2.9rem;
    font-size: 1.4rem;
    line-height: 2;
  }

  /* 2プランの料金はSPでは縦に積む */
  .drawer-prices {
    display: block;
    width: auto;
    margin-top: 2.9rem;
    padding: 1.1rem 0;
  }

  /* ご予約セクションでは行の間に短い横線を入れているが、 */
  .drawer-prices .booking-price + .booking-price {
    margin-top: 2rem;
  }

  .drawer-prices .booking-price + .booking-price::before {
    display: none;
  }

  .drawer-body .tel-btn {
    width: 32.5rem;
    margin-top: 3.9rem;
  }

  .drawer-note {
    margin-top: 3.4rem;
    font-size: 1.4rem;
    line-height: 1.5;
  }

  .drawer-body .tel-btn.is-outline {
    width: 30.3rem;
    margin-top: 3.5rem;
  }

  .drawer-rule {
    width: 8.1rem;
    margin: 3.6rem auto;
  }

  /* デザインの字送りは見出しと同じ約1.78rem＝1.8rem相当（PCの1.6remより大きい） */
  .drawer-sub {
    font-size: 1.75rem;
  }

  /* ドロワーの中だけは横並びのまま */
  .drawer-body .ota-links {
    flex-direction: row;
    gap: 2.2rem;
    margin-top: 3.2rem;
    padding-bottom: 4.1rem;
  }

  .drawer-body .ota-link {
    flex: 1 1 0;
    width: auto;
    padding: 0;
  }

  /* 地色が水色のため、デザインではボタンを白にしている */
  .ota-link.is-dark {
    background: #F8F8F8;
  }

}