@charset "utf-8";

/* ============================================================
   旅館 由布山 コーポレートサイト トップページ
   3-1. ファーストビュー（FV）
   ------------------------------------------------------------
   ・PC表示（1920px基準デザイン）を想定した静的コーディングです。
   ・横位置は vw、縦位置は vh(section高さ=100vh基準) の割合で
     デザインカンプ（1920×1000）の座標を再現しています。
   ・SP対応は別途デザイン到着後に追記します。
============================================================ */

:root {
  --color-bg-beige: #FAF6F6;
  --color-navy: #043351;
  --color-text-black: #1A1311;
  --color-text-white: #FFFFFF;
  --color-line-gray: #A3A1A0;
  --color-btn-line: #8C8988;
  --color-btn-search-fill: #1A1311;
  --color-btn-reserve-fill: #395E76;
  --color-form-gray: #757170;

  --font-en: "Cardo", serif;
  --font-jp: "Zen Old Mincho", "Hiragino Mincho ProN", serif;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html, body {
  overflow-x: hidden;
  overflow-x: clip;
}
body {
  background: var(--color-bg-beige);
  font-family: var(--font-jp);
  color: var(--color-text-black);
  -webkit-font-smoothing: antialiased;
}
img {
  vertical-align: bottom;
}
a {
  text-decoration: none;
  color: inherit;
}
button {
  font-family: inherit;
  color: inherit;
}
/* 見出し1：ブラウザ標準の文字サイズ・太さを打ち消す（見た目は各クラスの指定に従う） */
h1 {
  font-size: inherit;
  font-weight: inherit;
}

/* ==================== マウス操作時のホバー（全ページ共通） ====================
   ・リンク／ボタンを少し透過（個別にホバー指定がある箇所はそちらが優先されるよう :where で詳細度0）
   ・矢印付きリンクは矢印が向きの方向へ少し動く（既存の transform を壊さないよう translate を使用）
   ・タッチ端末では押した後にホバー状態が残るため、マウス環境（hover: hover）のみ */
@media (hover: hover) and (pointer: fine) {
  :where(a, button) { transition: opacity .3s ease; }
  :where(a:not(.rp-jump__item), button):hover { opacity: .6; }
  /* ヘッダー・メニュー画面のテキストリンクは60%透過 */
  :where(.fv-gnav__list, .fixed-header__list, .menu-nav) a:hover { opacity: .4; }
  :where(.rp-arrow, .rooms-arrow, .news-arrow) { transition: translate .3s ease; }
  a:hover :where(.rp-arrow, .rooms-arrow, .news-arrow) { translate: 4px 0; }
  :where(.rp-jump, .ss-tabs) a:hover .rp-arrow { translate: 0 4px; }
  .nw-nav__prev:hover .rp-arrow { translate: -4px 0; }
}

/* ==================== ローディング画面（TOPのみ） ====================
   ・body.is-loading は index.html の <body> 直後の1行のスクリプトで付ける（JS無効時は表示されない）
   ・バーが1.4秒で伸び、FVの1枚目の画像が読み込めたら1.2秒でフェードアウト（最長3秒で閉じる）
   ・表示中はFVのスライド／ズームを止めておき、明けてから動き出すようにする */
.loading { display: none; }
body.is-loading .loading,
.loading.is-leaving {
  display: flex;
}
.loading {
  position: fixed;
  inset: 0;
  z-index: 5000;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: var(--color-bg-beige);
  transition: opacity 1.2s ease, visibility 0s linear 1.2s;
}
.loading.is-leaving { opacity: 0; visibility: hidden; }
.loading__logo { display: block; width: 51px; height: auto; }
.loading__bar {
  width: 204px; /* ロゴ幅（51px）の約4倍 */
  height: 3px;
  margin-top: 64px;
  background-color: #E6E1DF;
  overflow: hidden;
}
.loading__bar span {
  display: block;
  height: 100%;
  background-color: var(--color-navy);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1.4s ease-in-out;
}
.loading.is-progress .loading__bar span { transform: scaleX(1); }
body.is-loading .fv-slide,
body.is-loading .stories-bg__slide { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .loading,
  .loading__bar span { transition-duration: .01s; }
}
@media (max-width: 767px) {
  .loading__logo { width: 42px; }
  .loading__bar { width: 168px; margin-top: 48px; }
}

/* ==================== 18〜20. 一定スクロール後に固定されるヘッダー ==================== */
.fixed-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 72px;
  background-color: var(--color-bg-beige);
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s ease;
}
.fixed-header.is-fixed {
  opacity: 1;
  pointer-events: auto;
}
.fixed-header__nav {
  position: absolute;
  top: 24px;
  right: 24px;
  display: flex;
  align-items: center;
}
.fixed-header__list {
  display: flex;
  align-items: center;
  list-style: none;
}
.fixed-header__list li + li {
  margin-left: calc(2.08vw / var(--zoom, 1));
}
.fixed-header__list a {
  display: block;
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: .12em;
  color: var(--color-text-black);
  white-space: nowrap;
}
.fixed-header__hamburger {
  position: relative;
  width: calc(1.4vw / var(--zoom, 1));
  height: calc(1.4vw / var(--zoom, 1));
  margin-left: calc(2.3vw / var(--zoom, 1));
  background: none;
  border: 0;
  cursor: pointer;
  flex-shrink: 0;
}
.fixed-header__hamburger span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--color-text-black);
}
.fixed-header__hamburger span:nth-child(1) { top: 20%; }
.fixed-header__hamburger span:nth-child(2) { top: 50%; margin-top: -0.5px; }
.fixed-header__hamburger span:nth-child(3) { bottom: 20%; }

.fixed-logo {
  position: fixed;
  top: 24px;
  left: 24px;
  z-index: 1010;
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s ease;
}
.fixed-logo.is-visible {
  opacity: 1;
  pointer-events: auto;
}
.fixed-logo img {
  display: block;
  width: 50px;
  height: auto;
}

/* ==================== FV ==================== */
.fv {
  position: relative;
  width: 100%;
  height: calc(100vh / var(--zoom, 1));
  min-height: 640px;
  overflow: hidden;
  background-color: #000;
}

/* ---- 5〜9. 背景スライダー ---- */
.fv-slider {
  position: absolute;
  inset: 0;
}
.fv-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  opacity: 0;
  transform: scale(1.15);
  transition: opacity 2s ease-in-out;
  z-index: 1;
}
.fv-slide.is-active {
  opacity: 1;
  z-index: 2;
  animation: fvZoomOut 8s ease-out forwards;
}
@keyframes fvZoomOut {
  from { transform: scale(1.15); }
  to   { transform: scale(1); }
}

.br-sp { display: none; }
.sp-only { display: none; }
.hang-l { font-style: normal; }
.stay-viewport, .plan-viewport { display: contents; }
.sp-pager { display: none; }

/* ---- 13. グローバルナビゲーション（初期・透過） ---- */
.fv-gnav {
  position: absolute;
  top: 2.4%;
  right: calc(1.25vw / var(--zoom, 1));
  z-index: 20;
  display: flex;
  align-items: center;
}
.fv-gnav__list {
  display: flex;
  align-items: center;
  list-style: none;
}
.fv-gnav__list li + li {
  margin-left: calc(2.08vw / var(--zoom, 1));
}
.fv-gnav__list a {
  display: block;
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: .12em;
  color: var(--color-text-white);
  white-space: nowrap;
}
.fv-gnav__hamburger {
  position: relative;
  width: calc(1.4vw / var(--zoom, 1));
  height: calc(1.4vw / var(--zoom, 1));
  margin-left: calc(2.3vw / var(--zoom, 1));
  background: none;
  border: 0;
  cursor: pointer;
  flex-shrink: 0;
}
.fv-gnav__hamburger span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--color-text-white);
}
.fv-gnav__hamburger span:nth-child(1) { top: 20%; }
.fv-gnav__hamburger span:nth-child(2) { top: 50%; margin-top: -0.5px; }
.fv-gnav__hamburger span:nth-child(3) { bottom: 20%; }

/* ---- Language（言語切り替え。TOPのFVのみ）----
   デザイン（1920×1000）：グロナビの下・右端。リスト幅108px／行40px／右端は画面右から36.5px。
   通常は閉じ、ホバー・クリック（タップ）で開く（js/main.js）。文字色はFVのグロナビ（白）に合わせる */
.fv-lang {
  position: absolute;
  top: 7.2%;
  right: calc(1.9vw / var(--zoom, 1));
  z-index: 21;
}
.fv-lang__btn {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-left: auto;
  padding: 0 5px 0 0;
  border: 0;
  background: none;
  font-family: var(--font-en);
  font-size: 16px;
  line-height: 24px;
  letter-spacing: .07em;
  color: var(--color-text-white);
  cursor: pointer;
}
.fv-lang__icon { display: block; flex-shrink: 0; }
.fv-lang__list {
  position: absolute;
  top: calc(100% + 5px);
  right: 0;
  width: 108px;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid #757170;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s;
}
.fv-lang.is-open .fv-lang__list {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity .25s ease, transform .25s ease;
}
@media (hover: hover) and (pointer: fine) {
  .fv-lang:hover .fv-lang__list {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity .25s ease, transform .25s ease;
  }
}
.fv-lang__list li { border-bottom: 1px solid #8C8988; }
.fv-lang__list a {
  display: block;
  height: 39px;
  background-color: rgba(255, 255, 255, .8);
  font-family: var(--font-jp);
  font-size: 14px;
  line-height: 39px;
  letter-spacing: .08em;
  text-align: center;
  color: var(--color-text-black);
  transition: background-color .2s ease;
}
.fv-lang__list a:hover,
.fv-lang__list a:focus-visible { background-color: #D1D0CF; opacity: 1; }

/* SP用の Language（ページ最上部の帯）は PC では出さない */
.sp-lang { display: none; }

/* ---- 12. ファーストビュー中央のテキスト ---- */
.fv-text {
  position: absolute;
  top: 24%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  text-align: center;
  color: var(--color-text-white);
}
.fv-text__title {
  margin: 0 auto;
}
.fv-text__logo {
  display: block;
  width: 99px;
  height: auto;
  margin: 0 auto;
  filter: drop-shadow(0 0 30px rgba(0, 0, 0, .35));
}
.fv-text__en {
  margin-top: calc(1.9vw / var(--zoom, 1));
  font-family: var(--font-en);
  font-size: 16px;
  letter-spacing: .32em;
  text-indent: .32em;
}
.fv-text__lead {
  margin-top: calc(1.35vw / var(--zoom, 1));
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 28px;
  letter-spacing: .14em;
  text-shadow: 0 0 30px rgba(0, 0, 0, .35);
}

/* ---- 10. スクロールバー ---- */
.fv-scroll {
  position: absolute;
  left: calc(2.26vw / var(--zoom, 1));
  bottom: 3.7%;
  z-index: 20;
  color: var(--color-text-white);
}
.fv-scroll__pager {
  display: flex;
  align-items: baseline;
  font-family: var(--font-en);
  font-size: 16px;
  letter-spacing: .05em;
}
.fv-scroll__current {
  font-weight: 400;
  font-size: 24px;
}
.fv-scroll__line {
  display: inline-block;
  width: calc(4.5vw / var(--zoom, 1));
  height: 1px;
  margin: 0 calc(.6vw / var(--zoom, 1));
  background: rgba(255, 255, 255, .6);
  font-style: normal;
}
.fv-scroll__total {
  font-weight: 400;
  opacity: .75;
}
.fv-scroll__label {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  margin-top: calc(.9vw / var(--zoom, 1));
  font-family: var(--font-en);
  font-size: 16px;
  letter-spacing: .18em;
}
.fv-scroll__arrow {
  margin-left: calc(.55vw / var(--zoom, 1));
  animation: fvArrowBounce 1.6s ease-in-out infinite;
}
@keyframes fvArrowBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(3px); }
}

/* ---- 11・14. 予約導線ボタン ---- */
.fv-actions {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 1002;
  display: flex;
  align-items: stretch;
  gap: 16px;
}
.fv-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 208px;
  height: 73px;
  padding: 0;
  border: 1px solid var(--color-btn-line);
  color: var(--color-text-white);
  text-align: center;
  cursor: pointer;
}
.fv-btn--search {
  background-color: var(--color-btn-search-fill);
}
.fv-btn--reserve {
  background-color: var(--color-btn-reserve-fill);
}
.fv-btn__en {
  font-family: var(--font-en);
  font-size: 12px;
  line-height: 1;
  letter-spacing: .18em;
  opacity: .5;
}
.fv-btn__ja {
  margin-top: 8px;
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 14px;
  line-height: 1;
  letter-spacing: .1em;
}

/* ==================== 15・16. メニュー展開 ==================== */
.menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 3000;
  background: var(--color-bg-beige);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity .45s ease, visibility 0s linear .45s;
}
.menu-overlay.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity .45s ease;
}
.menu-close {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 29px;
  height: 29px;
  background: none;
  border: 0;
  cursor: pointer;
}
.menu-close span {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--color-text-black);
}
.menu-close span:nth-child(1) { transform: rotate(45deg); }
.menu-close span:nth-child(2) { transform: rotate(-45deg); }

.menu-inner {
  display: flex;
  align-items: center;
}
.menu-logo img {
  display: block;
  width: 55px;
  height: auto;
}
.menu-nav {
  display: flex;
  margin-left: 169px;
}
.menu-nav__col {
  list-style: none;
}
.menu-nav__col:first-child {
  width: 90px;
  margin-right: 152px;
}
.menu-nav__col:last-child {
  width: 110px;
}
.menu-nav__col li + li {
  margin-top: 34px;
}
.menu-nav__col a {
  display: block;
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 16px;
  line-height: 1;
  letter-spacing: .08em;
  color: var(--color-text-black);
  white-space: nowrap;
}
.menu-side {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-left: 245px;
}
.menu-reserve {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 384px;
  height: 96px;
  border: 1px solid var(--color-btn-line);
  background-color: var(--color-btn-reserve-fill);
  color: var(--color-text-white);
  text-align: center;
}
.menu-reserve__en {
  font-family: var(--font-en);
  font-size: 14px;
  line-height: 1;
  letter-spacing: .18em;
  opacity: .5;
}
.menu-reserve__ja {
  margin-top: 10px;
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 18px;
  line-height: 1;
  letter-spacing: .1em;
}
.menu-insta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 36px;
  color: var(--color-text-black);
}
.menu-insta span {
  font-family: var(--font-en);
  font-size: 16px;
  letter-spacing: .04em;
}

/* ==================== 17. 空室検索展開 ==================== */
.search-overlay {
  position: fixed;
  inset: 0;
  z-index: 3000;
  background: var(--color-bg-beige);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity .45s ease, visibility 0s linear .45s;
}
.search-overlay {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.search-overlay.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity .45s ease;
}
.search-inner {
  width: 1200px;
  max-width: calc(90vw / var(--zoom, 1));
  /* 画面より高いときは上詰め・スクロール（align-items:center のままだと上が切れて戻れないため margin:auto で中央寄せ） */
  margin: auto;
  padding: 40px 0;
}
.search-heading {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 16px;
  margin-bottom: 32px;
}
.search-heading__en {
  font-family: var(--font-en);
  font-size: 16px;
  letter-spacing: .1em;
  color: var(--color-navy);
}
.search-heading__ja {
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 20px;
  letter-spacing: .1em;
  color: var(--color-text-black);
}
.search-panel {
  background: var(--color-text-white);
  padding: 80px 168px;
}
.search-fields {
  display: flex;
  align-items: flex-end;
}
.search-field {
  display: flex;
  flex-direction: column;
}
.search-field--date { margin-right: 61px; }
.search-field--nights { margin-right: 62px; }
.search-field--rooms { margin-right: 70px; }
.search-field__label {
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 16px;
  color: var(--color-text-black);
  margin-bottom: 11px;
}
.search-field__row {
  display: flex;
  align-items: center;
}
.search-field__date {
  width: 186px;
  border: 0;
  background: none;
  font-family: var(--font-en);
  font-size: 34px;
  color: var(--color-navy);
  letter-spacing: .02em;
}
.search-field__date {
  -webkit-appearance: none;
  appearance: none;
  padding: 0;
  border-radius: 0;
  outline: none;
  cursor: pointer;
}
.search-field__date:disabled { opacity: .35; cursor: default; }
.search-field__date:disabled ~ .search-field__calendar { opacity: .35; cursor: default; }

/* ---- 空室検索：ご利用日のカレンダー（js/main.js の createStayCalendar） ---- */
.search-field--date { position: relative; }
.search-cal {
  position: absolute;
  left: -32px;
  z-index: 20;
  display: none;
  padding: 24px 28px 20px;
  background-color: #ffffff;
  border: 1px solid #DEDAD9;
  box-shadow: 0 12px 32px rgba(26, 19, 17, .12);
}
.search-cal.is-open { display: block; }
/* 画面下でスクロールしたとき、カレンダーの下にも少し余白が残るようにする */
.search-cal::after { content: ""; position: absolute; left: 0; top: 100%; width: 1px; height: 24px; }
.search-cal__months { display: flex; gap: 48px; }
.search-cal__title {
  margin: 0 0 10px;
  text-align: center;
  font-family: var(--font-jp);
  font-size: 15px;
  line-height: 28px;
  letter-spacing: .1em;
  color: var(--color-navy);
}
.search-cal__num {
  margin: 0 2px;
  font-family: var(--font-en);
  font-size: 20px;
  letter-spacing: .02em;
}
.search-cal__grid { display: grid; grid-template-columns: repeat(7, 40px); row-gap: 2px; }
.search-cal__dow {
  padding-bottom: 8px;
  text-align: center;
  font-family: var(--font-jp);
  font-size: 12px;
  line-height: 20px;
  letter-spacing: .04em;
  color: var(--color-form-gray);
}
.search-cal__day {
  width: 38px;
  height: 38px;
  margin: 0 auto;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  font-family: var(--font-en);
  font-size: 17px;
  line-height: 1;
  color: var(--color-text-black);
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}
.search-cal .is-sun { color: #A4473E; }
.search-cal .is-sat { color: #395E76; }
.search-cal__day.is-today { box-shadow: inset 0 0 0 1px var(--color-line-gray); }
.search-cal__day:not([disabled]):hover { background-color: var(--color-bg-beige); opacity: 1; }
.search-cal__day.is-selected,
.search-cal__day.is-selected:hover { background-color: var(--color-navy); color: #ffffff; box-shadow: none; }
.search-cal__day[disabled] { color: #CFCBCA; cursor: default; }
.search-cal__day:focus-visible { outline: 1px solid var(--color-navy); outline-offset: 1px; }
.search-cal__nav {
  position: absolute;
  top: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-navy);
  cursor: pointer;
}
.search-cal__nav--prev { left: 20px; }
.search-cal__nav--next { right: 20px; }
.search-cal__nav[disabled] { opacity: .2; cursor: default; }
.search-field__calendar {
  flex-shrink: 0;
  margin-left: 16px;
  color: var(--color-form-gray);
  cursor: pointer;
}
.search-field__checkbox {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-left: 40px;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.search-field__checkbox input {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  accent-color: var(--color-form-gray);
  cursor: pointer;
}
.search-field__checkbox span {
  font-family: var(--font-jp);
  font-size: 16px;
  color: var(--color-text-black);
  white-space: nowrap;
}
.search-field__select {
  border: 0;
  background: none;
  -webkit-appearance: none;
  appearance: none;
  font-family: var(--font-en);
  font-size: 34px;
  color: var(--color-navy);
  padding-right: 20px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'><path d='M1 1L7 7L13 1' stroke='%23757170' stroke-width='1.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right center;
  background-size: 14px 9px;
  cursor: pointer;
}
/* 見た目用の数字（.search-field__value）の上に、透明の select（.search-field__native）を重ねる */
.search-field__pick { position: relative; display: inline-block; }
.search-field__value { display: inline-block; }
.search-field__native {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  -webkit-appearance: none;
  appearance: none;
  font-family: var(--font-en);
  font-size: 16px;
  cursor: pointer;
}
.search-field__native:disabled { cursor: default; }
.search-field__pick:has(.search-field__native:disabled) .search-field__value { opacity: .35; }
.search-field__pick:has(.search-field__native:focus-visible) .search-field__value { outline: 1px solid var(--color-navy); outline-offset: 4px; }
.search-field__unit {
  margin-left: 16px;
  font-family: var(--font-jp);
  font-size: 16px;
  color: var(--color-text-black);
}
.search-field__line {
  display: block;
  margin-top: 4px;
  width: 100%;
  height: 1px;
  background: var(--color-form-gray);
}
.search-submit {
  display: block;
  width: 384px;
  height: 72px;
  margin: 40px auto 0;
  background-color: var(--color-btn-search-fill);
  border: 1px solid var(--color-btn-line);
  color: var(--color-text-white);
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: .1em;
  cursor: pointer;
}

/* ==================== TOPのみ：スクロールで要素がふわっと現れる ====================
   対象要素には js/main.js が .js-fade を付け、画面に入ったら .is-in を付ける（JS無効時は何も隠れない）。
   既存の transform（流れる写真など）と干渉しないよう translate で動かし、
   表示後は opacity の指定を外して各要素本来の値（SPカルーセルの非アクティブ等）に戻し、
   出し終わったら .is-done で transition も外す（ホバーの速さ等を元に戻すため） */
body.top .js-fade:not(.is-done) {
  transition: opacity 1.4s ease, translate 1.4s ease;
}
body.top .js-fade:not(.is-in) {
  opacity: 0;
  translate: 0 24px;
}
@media (prefers-reduced-motion: reduce) {
  body.top .js-fade,
  body.top .js-fade:not(.is-in) { opacity: 1; translate: none; transition: none; }
}

/* ==================== 2. トップコンテンツ1：STORIES ==================== */
.curtain {
  position: relative;
}
.stories {
  position: sticky;
  top: min(0px, calc(100vh / var(--zoom, 1) - 1251px));
  z-index: 1;
  width: 100%;
  height: 1251px;
  overflow: hidden;
  background-color: var(--color-bg-beige);
}
.stories-bg {
  position: absolute;
  inset: 0;
}
.stories-bg__slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  filter: blur(15px);
  transform: scale(1.15);
  opacity: 0;
  transition: opacity 2s ease-in-out;
}
.stories-bg__slide.is-active {
  opacity: .3;
  animation: fvZoomOut 8s ease-out forwards;
}
/* iPad 等のタッチ端末（PC版を縮小表示）向けの調整（SP版と同じ対応）
   ・background-attachment: fixed が正しく描画されず、ぼかし＋拡大アニメと重なって背景が崩れるため通常の背景にする
   ・STORIES の sticky（後続セクションが上に重なる演出）は、iOS Safari でスクロール中に後続セクションの描画が
     追いつかず、下の STORIES が透けて見えるため解除して通常のスクロールにする */
@media (hover: none) and (pointer: coarse) {
  .stories-bg__slide { background-attachment: scroll; }
  .stories { position: relative; top: auto; }
}

.stories-canvas {
  position: relative;
  width: 1920px;
  left: 50%;
  margin-left: -960px;
  height: 100%;
}
.stories-inner {
  position: relative;
  width: 100%;
  height: 100%;
}

.stories-text {
  position: absolute;
  left: 360px;
  top: 118px;
  width: 410px;
}
.stories-heading {
  font-family: var(--font-en);
  font-weight: 400;
  font-size: 80px;
  line-height: 1;
  letter-spacing: .075em;
  color: var(--color-navy);
}
.stories-lead {
  margin-top: 20px;
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 32px;
  line-height: 1;
  letter-spacing: .04em;
  color: var(--color-navy);
}
.stories-body {
  margin-top: 62px;
}
.stories-body p {
  margin: 0;
  font-family: var(--font-jp);
  font-size: 16px;
  line-height: 44px;
  letter-spacing: .047em;
  color: var(--color-text-black);
}

.stories-photo {
  position: absolute;
  right: 291px;
  top: 118px;
  width: 675px;
  height: 960px;
  overflow: hidden;
}
.stories-photo img {
  display: block;
  width: calc(100% + 16px);
  height: calc(100% + 16px);
  margin: -8px;
  max-width: none;
  object-fit: cover;
}

/* ==================== 3. 旅館 由布山という旅のかたち ==================== */
.about {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 684px;
  background-color: var(--color-bg-beige);
}
.about-ghostwrap {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 1;
  width: 1920px;
  height: 0;
  margin-left: -960px;
  pointer-events: none;
}
.about-ghost {
  position: absolute;
  left: 357px;
  top: -118px;
  font-family: var(--font-en);
  font-weight: 400;
  font-size: 120px;
  line-height: 1.5;
  letter-spacing: .04em;
  white-space: nowrap;
  color: var(--color-bg-beige);
}
.about-marquee {
  position: absolute;
  left: 0;
  top: 131px;
  width: 100%;
  height: 433px;
  overflow: hidden;
}
.about-track {
  display: flex;
  align-items: stretch;
  width: max-content;
  height: 100%;
  margin-left: -67px;
  list-style: none;
  animation: aboutFlow 60s linear infinite;
}
@keyframes aboutFlow {
  from { transform: translateX(0); }
  to   { transform: translateX(-3528px); }
}
.about-item {
  flex: 0 0 auto;
  margin-right: 24px;
}
.about-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.about-item--tall { width: 297px; }
.about-item--tall:nth-child(8n+5) { width: 345px; }
.about-item--wide { width: 625px; }
.about-item--small { width: 361px; height: 313px; }
.small--bottom { align-self: flex-end; }
.small--top { align-self: flex-start; }

.about-canvas {
  position: relative;
  width: 1920px;
  left: 50%;
  margin-left: -960px;
  height: 100%;
}
.about-text {
  position: absolute;
  left: 880px;
  top: 131px;
  width: 503px;
  height: 433px;
  padding: 47px 0 0 80px;
  background-color: var(--color-bg-beige);
}
.about-heading {
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 24px;
  line-height: 40px;
  letter-spacing: .01em;
  color: var(--color-text-black);
}
.about-body {
  width: 343px;
  margin-top: 66px;
}
.about-body p {
  margin: 0;
  font-family: var(--font-jp);
  font-size: 16px;
  line-height: 40px;
  letter-spacing: .04em;
  color: var(--color-text-black);
}

/* ==================== 5. ROOMS（お部屋） ==================== */
.rooms {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 2150px;
  background-color: var(--color-bg-beige);
}
.rooms-canvas {
  position: relative;
  width: 1920px;
  left: 50%;
  height: 100%;
  margin-left: -960px;
}
.rooms-heading {
  position: absolute;
  left: 363px;
  top: -27px;
  font-family: var(--font-en);
  font-weight: 400;
  font-size: 80px;
  line-height: 120px;
  letter-spacing: .075em;
  color: var(--color-navy);
}
.rooms-heading-ja {
  position: absolute;
  left: 733px;
  top: 5px;
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 28px;
  line-height: 46px;
  letter-spacing: .04em;
  color: var(--color-navy);
}
.rooms-lead {
  position: absolute;
  left: 361px;
  top: 126px;
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 24px;
  line-height: 40px;
  letter-spacing: .04em;
  color: var(--color-text-black);
}
.rooms-intro {
  position: absolute;
  left: 361px;
  top: 201px;
}
.rooms-intro p,
.rooms-text {
  margin: 0;
  font-family: var(--font-jp);
  font-size: 16px;
  line-height: 40px;
  letter-spacing: .04em;
  color: var(--color-text-black);
}
.rooms-main {
  position: absolute;
  left: 0;
  width: 1088px;
  height: 744px;
  overflow: visible;
}
.rooms-main img {
  display: block;
  width: calc(100% + max(0px, (100vw - 1920px) / 2));
  height: 100%;
  margin-left: calc(-1 * max(0px, (100vw - 1920px) / 2));
  object-fit: cover;
  object-position: right center;
}
.rooms-main--mountain { top: 389px; height: 641px; }
.rooms-main--town { top: 1269px; height: 641px; }

.rooms-info {
  position: absolute;
  left: 1144px;
  width: 420px;
}
.rooms-info--mountain { top: 384px; }
.rooms-info--town { top: 1263px; }
.rooms-en {
  font-family: var(--font-en);
  font-weight: 400;
  font-size: 40px;
  line-height: 56px;
  letter-spacing: .08em;
  color: var(--color-navy);
}
.rooms-label {
  margin-top: 3px;
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 16px;
  line-height: 27px;
  letter-spacing: .08em;
  color: var(--color-navy);
}
.rooms-text {
  width: 402px;
  margin-top: 46px;
}
.rooms-text p {
  margin: 0;
  font-family: var(--font-jp);
  font-size: 16px;
  line-height: 40px;
  letter-spacing: .047em;
  color: var(--color-text-black);
}

.rooms-thumbs {
  position: absolute;
  left: 939px;
  display: flex;
  width: 621px;
  height: 337px;
}
.rooms-thumbs--mountain { top: 813px; }
.rooms-thumbs--town { top: 1693px; }
.rooms-thumbs img {
  display: block;
  width: 50%;
  height: 100%;
  object-fit: cover;
}
.rooms-thumbs::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 127px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, .5));
  pointer-events: none;
}
.rooms-thumbs__link {
  position: absolute;
  right: 20px;
  bottom: 20px;
  z-index: 1;
  display: flex;
  align-items: center;
  font-family: var(--font-jp);
  font-size: 16px;
  line-height: 27px;
  letter-spacing: .06em;
  color: var(--color-text-white);
}
.rooms-more {
  margin-left: 21px;
  margin-right: 14px;
  font-family: var(--font-en);
  letter-spacing: .08em;
}
.rooms-arrow {
  flex-shrink: 0;
}
.rooms-link {
  position: absolute;
  left: 361px;
  top: 1985px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 180px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--color-text-black);
  font-family: var(--font-jp);
  font-size: 16px;
  line-height: 27px;
  letter-spacing: .08em;
  color: var(--color-text-black);
}

/* ==================== 6. CUISINE（お食事） ==================== */
.cuisine {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 890px;
  background-color: var(--color-bg-beige);
}
.cuisine-canvas {
  position: relative;
  width: 1920px;
  left: 50%;
  height: 100%;
  margin-left: -960px;
}
.cuisine-main {
  position: absolute;
  left: 0;
  top: 0;
  width: 1088px;
  height: 760px;
}
.cuisine-main img {
  display: block;
  width: calc(100% + max(0px, (100vw - 1920px) / 2));
  height: 100%;
  margin-left: calc(-1 * max(0px, (100vw - 1920px) / 2));
  object-fit: cover;
  object-position: right center;
}
.cuisine-heading {
  position: absolute;
  left: 1168px;
  top: 104px;
  font-family: var(--font-en);
  font-weight: 400;
  font-size: 80px;
  line-height: 120px;
  letter-spacing: .075em;
  color: var(--color-navy);
}
.cuisine-heading-ja {
  position: absolute;
  left: 1168px;
  top: 215px;
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 28px;
  line-height: 46px;
  letter-spacing: .04em;
  color: var(--color-navy);
}
.cuisine-lead {
  position: absolute;
  left: 1168px;
  top: 323px;
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 24px;
  line-height: 40px;
  letter-spacing: .04em;
  color: var(--color-text-black);
}
.cuisine-text {
  position: absolute;
  left: 1168px;
  top: 396px;
  width: 396px;
}
.cuisine-text p {
  margin: 0;
  font-family: var(--font-jp);
  font-size: 16px;
  line-height: 40px;
  letter-spacing: .047em;
  color: var(--color-text-black);
}
.cuisine-link {
  position: absolute;
  left: 1168px;
  top: 618px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 180px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--color-text-black);
  font-family: var(--font-jp);
  font-size: 16px;
  line-height: 27px;
  letter-spacing: .08em;
  color: var(--color-text-black);
}

/* ==================== 7. FACILITIES（館内施設） ==================== */
.facilities {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 1153px;
  background-color: var(--color-bg-beige);
}
.facilities-canvas {
  position: relative;
  width: 1920px;
  left: 50%;
  height: 100%;
  margin-left: -960px;
}
.facilities-heading {
  position: absolute;
  left: 359px;
  top: 93px;
  font-family: var(--font-en);
  font-weight: 400;
  font-size: 80px;
  line-height: 120px;
  letter-spacing: .075em;
  color: var(--color-navy);
}
.facilities-heading-ja {
  position: absolute;
  left: 359px;
  top: 206px;
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 28px;
  line-height: 46px;
  letter-spacing: .04em;
  color: var(--color-navy);
}
.facilities-lead {
  position: absolute;
  left: 359px;
  top: 313px;
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 24px;
  line-height: 40px;
  letter-spacing: .04em;
  color: var(--color-text-black);
}
.facilities-text {
  position: absolute;
  left: 359px;
  top: 388px;
  width: 578px;
}
.facilities-text p {
  margin: 0;
  font-family: var(--font-jp);
  font-size: 16px;
  line-height: 40px;
  letter-spacing: .02em;
  color: var(--color-text-black);
}
.facilities-link {
  position: absolute;
  left: 359px;
  top: 571px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 180px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--color-text-black);
  font-family: var(--font-jp);
  font-size: 16px;
  line-height: 27px;
  letter-spacing: .08em;
  color: var(--color-text-black);
}
.facilities-main {
  position: absolute;
  left: 1028px;
  top: 0;
  width: 673px;
  height: 929px;
}
.facilities-sub {
  position: absolute;
  left: 765px;
  top: 736px;
  width: 305px;
  height: 297px;
}
.facilities-main img,
.facilities-sub img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ==================== 8. LOCATION（アクセス・周辺観光） ==================== */
.location {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 1499px;
  background-color: var(--color-bg-beige);
}
.location-band {
  position: absolute;
  left: 0;
  top: 561px;
  width: 100%;
  height: 938px;
  background-color: var(--color-text-white);
}
.location-canvas {
  position: relative;
  width: 1920px;
  left: 50%;
  height: 100%;
  margin-left: -960px;
}
.location-main {
  position: absolute;
  left: 0;
  top: 27px;
  width: 1088px;
  height: 809px;
}
.location-main img {
  display: block;
  width: calc(100% + max(0px, (100vw - 1920px) / 2));
  height: 100%;
  margin-left: calc(-1 * max(0px, (100vw - 1920px) / 2));
  object-fit: cover;
  object-position: right center;
}
.location-heading {
  position: absolute;
  left: 1062px;
  top: -1px;
  font-family: var(--font-en);
  font-weight: 400;
  font-size: 80px;
  line-height: 120px;
  letter-spacing: .075em;
  color: var(--color-navy);
}
.location-heading-ja {
  position: absolute;
  left: 1168px;
  top: 107px;
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 28px;
  line-height: 46px;
  letter-spacing: .04em;
  color: var(--color-navy);
}
.location-lead {
  position: absolute;
  left: 1168px;
  top: 216px;
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 24px;
  line-height: 40px;
  letter-spacing: .04em;
  color: var(--color-text-black);
}
.location-text {
  position: absolute;
  left: 1168px;
  top: 291px;
  width: 396px;
}
.location-text p {
  margin: 0;
  font-family: var(--font-jp);
  font-size: 16px;
  line-height: 40px;
  letter-spacing: .047em;
  color: var(--color-text-black);
}

.location-map {
  position: absolute;
  left: 340px;
  top: 872px;
  width: 595px;
  height: 560px;
}
.location-map img {
  display: block;
  width: 595px;
  height: 560px;
}
.location-map__small,
.location-map__en {
  position: absolute;
  left: 21px;
}
.location-map__small {
  top: 107px;
  font-family: var(--font-jp);
  font-size: 14px;
  line-height: 23px;
  letter-spacing: .04em;
  color: var(--color-text-black);
}
.location-map__en {
  top: 122px;
  font-family: var(--font-en);
  font-size: 31.3px;
  line-height: 47px;
  letter-spacing: .08em;
  color: var(--color-navy);
}

.sight-heading {
  position: absolute;
  left: 1168px;
  top: 614px;
  font-family: var(--font-en);
  font-weight: 400;
  font-size: 40px;
  line-height: 56px;
  letter-spacing: .08em;
  color: var(--color-navy);
}
.sight-sub {
  position: absolute;
  left: 1168px;
  top: 669px;
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 16px;
  line-height: 27px;
  letter-spacing: .08em;
  color: var(--color-navy);
}
.sight-marquee {
  position: absolute;
  left: 960px;
  top: 753px;
  width: calc(50vw / var(--zoom, 1));
  height: 540px;
  overflow: hidden;
}
.sight-track {
  display: flex;
  align-items: flex-start;
  width: max-content;
  list-style: none;
  animation: sightFlow 48s linear infinite;
}
@keyframes sightFlow {
  from { transform: translateX(0); }
  to   { transform: translateX(-1544px); }
}
.sight-item {
  flex: 0 0 auto;
  width: 354px;
  margin-right: 32px;
}
.sight-item:nth-child(even) {
  margin-top: 64px;
}
.sight-item img {
  display: block;
  width: 354px;
  height: 416px;
  object-fit: cover;
}
.sight-caption {
  display: flex;
  justify-content: space-between;
  margin-top: 9px;
  padding-right: 10px;
  font-family: var(--font-jp);
  font-size: 16px;
  line-height: 27px;
  letter-spacing: .04em;
  color: var(--color-text-black);
}

.location-link {
  position: absolute;
  top: 1338px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 180px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--color-text-black);
  font-family: var(--font-jp);
  font-size: 16px;
  line-height: 27px;
  letter-spacing: .08em;
  color: var(--color-text-black);
}
.location-link--access { left: 961px; }
.location-link--sight { left: 1195px; }

/* ==================== 9. STAY（過ごし方） ==================== */
.stay {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 1353px;
  background-color: var(--color-bg-beige);
}
.stay-canvas {
  position: relative;
  width: 1920px;
  left: 50%;
  height: 100%;
  margin-left: -960px;
}
.stay-heading {
  position: absolute;
  left: 359px;
  top: 91px;
  font-family: var(--font-en);
  font-weight: 400;
  font-size: 86px;
  line-height: 129px;
  letter-spacing: .075em;
  color: var(--color-navy);
}
.stay-heading-ja {
  position: absolute;
  left: 650px;
  top: 126px;
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 28px;
  line-height: 46px;
  letter-spacing: .04em;
  color: var(--color-navy);
}
.stay-lead {
  position: absolute;
  left: 361px;
  top: 250px;
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 24px;
  line-height: 40px;
  letter-spacing: .04em;
  color: var(--color-text-black);
}
.stay-card {
  position: absolute;
  top: 401px;
  width: 369px;
  display: block;
}
.stay-card--couple { left: 359px; }
.stay-card--girls { left: 776px; }
.stay-card--family { left: 1191px; }
.stay-card img {
  display: block;
  width: 369px;
  height: 556px;
  object-fit: cover;
}
.stay-en {
  margin-top: 28px;
  font-family: var(--font-en);
  font-weight: 400;
  font-size: 40px;
  line-height: 56px;
  letter-spacing: .08em;
  color: var(--color-navy);
}
.stay-label {
  margin-top: 0;
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 16px;
  line-height: 27px;
  letter-spacing: .08em;
  color: var(--color-navy);
}
.stay-text {
  margin-top: 27px;
  font-family: var(--font-jp);
  font-size: 16px;
  line-height: 27px;
  letter-spacing: .047em;
  color: var(--color-text-black);
}
.stay-link {
  position: absolute;
  left: 873px;
  top: 1195px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 180px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--color-text-black);
  font-family: var(--font-jp);
  font-size: 16px;
  line-height: 27px;
  letter-spacing: .08em;
  color: var(--color-text-black);
}

/* ==================== 10. PLAN（おすすめの宿泊プラン） ==================== */
.plan {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 880px;
  background-color: var(--color-navy);
  color: var(--color-text-white);
}
.plan-canvas {
  position: relative;
  width: 1920px;
  left: 50%;
  height: 100%;
  margin-left: -960px;
}
.plan-heading {
  position: absolute;
  left: 361px;
  top: 106px;
  font-family: var(--font-en);
  font-weight: 400;
  font-size: 40px;
  line-height: 56px;
  letter-spacing: .08em;
  color: var(--color-text-white);
}
.plan-heading-ja {
  position: absolute;
  left: 516px;
  top: 119px;
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 20px;
  line-height: 33px;
  letter-spacing: .05em;
  color: var(--color-text-white);
}
.plan-card {
  position: absolute;
  top: 231px;
  width: 369px;
  display: block;
  color: var(--color-text-white);
}
.plan-card--1 { left: 360px; }
.plan-card--2 { left: 776px; }
.plan-card--3 { left: 1192px; }
.plan-card img {
  display: block;
  width: 369px;
  height: 276px;
  object-fit: cover;
}
.plan-card__title {
  width: 384px;
  margin-top: 13px;
  font-family: var(--font-jp);
  font-size: 16px;
  line-height: 32px;
  letter-spacing: .1em;
}
.kk-l { margin-left: -.5em; }
.kk-r { margin-right: -.5em; }
.plan-btn {
  position: absolute;
  left: 729px;
  top: 687px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 464px;
  height: 72px;
  border: 1px solid var(--color-btn-line);
  background-color: var(--color-btn-reserve-fill);
  color: var(--color-text-white);
}
.plan-btn__en {
  margin-right: 19px;
  font-family: var(--font-en);
  font-size: 14px;
  line-height: 1;
  letter-spacing: .08em;
  opacity: .5;
}
.plan-btn__ja {
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 18px;
  line-height: 1;
  letter-spacing: .05em;
}

/* ==================== 11. NEWS（お知らせ） ==================== */
.news {
  position: relative;
  z-index: 2;
  width: 100%;
  background-color: var(--color-bg-beige);
}
/* お知らせの件数が変わっても崩れないよう、一覧と「お知らせ一覧」リンクは上から順に並べる
   （3件のときにリンク top:512px・セクション高さ795px になる余白） */
.news-canvas {
  position: relative;
  width: 1920px;
  left: 50%;
  margin-left: -960px;
  padding: 195px 0 245px;
}
.news-heading {
  position: absolute;
  left: 361px;
  top: 105px;
  font-family: var(--font-en);
  font-weight: 400;
  font-size: 40px;
  line-height: 56px;
  letter-spacing: .08em;
  color: var(--color-navy);
}
.news-heading-ja {
  position: absolute;
  left: 531px;
  top: 119px;
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 20px;
  line-height: 33px;
  letter-spacing: .025em;
  color: var(--color-navy);
}
.news-list {
  width: 1200px;
  margin-left: 361px;
  list-style: none;
}
.news-list li {
  border-bottom: 1px solid var(--color-line-gray);
}
.news-list a {
  display: flex;
  align-items: center;
  height: 80px;
  color: var(--color-text-black);
}
.news-date {
  width: 142px;
  font-family: var(--font-en);
  font-size: 16px;
  line-height: 24px;
  letter-spacing: .075em;
  color: var(--color-navy);
}
.news-title {
  flex: 1;
  font-family: var(--font-jp);
  font-size: 16px;
  line-height: 27px;
  letter-spacing: .05em;
}
.news-arrow {
  flex-shrink: 0;
  margin-right: 11px;
  color: var(--color-form-gray);
}
.news-link {
  display: flex;
  margin: 74px 0 0 361px;
  align-items: center;
  justify-content: space-between;
  width: 180px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--color-text-black);
  font-family: var(--font-jp);
  font-size: 16px;
  line-height: 27px;
  letter-spacing: .08em;
  color: var(--color-text-black);
}
.news-link .news-arrow { margin-right: 0; color: var(--color-form-gray); }

/* ==================== 4. フッター ==================== */
.site-footer {
  position: relative;
  z-index: 2;
  width: 1920px;
  left: 50%;
  margin-left: -960px;
  height: 770px;
  overflow: hidden;
  background-color: var(--color-navy);
  color: var(--color-text-white);
}
.footer-bg1 {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}
.footer-bg2 {
  position: absolute;
  left: 0;
  top: 0;
  width: 962px;
  height: 770px;
  background-size: cover;
  background-position: center;
}

.footer-info {
  position: absolute;
  left: 530px;
  top: 112px;
  z-index: 1;
}
.footer-info__en {
  font-family: var(--font-en);
  font-size: 14px;
  letter-spacing: .12em;
}
.footer-info__name {
  margin-top: 6px;
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 20px;
  letter-spacing: .16em;
}
.footer-info__address {
  margin-top: 20px;
  font-family: var(--font-jp);
  font-size: 16px;
  letter-spacing: .04em;
}
.footer-info__tel {
  margin-top: 7px;
  font-family: var(--font-jp);
  font-size: 16px;
  letter-spacing: .04em;
}
/* 電話番号：SPのみタップで発信（PCではリンクとして反応させない） */
.footer-info__tel-link { pointer-events: none; }

/* ---- language テキストリンク（フッター・メニュー画面。全ページ）---- */
.lang-links {
  font-family: var(--font-jp);
  font-size: 14px;
  line-height: 24px;
  letter-spacing: .05em;
}
.lang-links__label { font-family: var(--font-en); letter-spacing: .04em; }
.lang-links__sep { opacity: .5; }
.lang-links a { white-space: nowrap; }
.lang-links--footer { margin-top: 20px; color: var(--color-text-white); }
.lang-links--menu { margin-top: 24px; color: var(--color-text-black); }
.footer-info__insta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 32px;
  color: var(--color-text-white);
}
.footer-info__insta span {
  font-family: var(--font-en);
  font-size: 16px;
  letter-spacing: .04em;
}

.footer-nav {
  position: absolute;
  left: 1174px;
  top: 111px;
  z-index: 1;
  display: flex;
}
.footer-nav__col {
  list-style: none;
}
.footer-nav__col:first-child {
  width: 90px;
  margin-right: 152px;
}
.footer-nav__col li + li {
  margin-top: 34px;
}
.footer-nav__col a {
  display: block;
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 16px;
  line-height: 1;
  letter-spacing: .08em;
  color: var(--color-text-white);
  white-space: nowrap;
}

.footer-reserve {
  position: absolute;
  left: 1174px;
  top: 553px;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 384px;
  height: 96px;
  border: 1px solid var(--color-btn-line);
  background-color: var(--color-btn-reserve-fill);
  color: var(--color-text-white);
  text-align: center;
}
.footer-reserve__en {
  font-family: var(--font-en);
  font-size: 14px;
  line-height: 1;
  letter-spacing: .18em;
  opacity: .5;
}
.footer-reserve__ja {
  margin-top: 10px;
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 18px;
  line-height: 1;
  letter-spacing: .1em;
}

.footer-copyright {
  position: absolute;
  left: 530px;
  top: 628px;
  z-index: 1;
  font-family: var(--font-jp);
  font-size: 14px;
  letter-spacing: .04em;
  opacity: .85;
}


/* ==================== 下層ページ：お部屋 (room/index.html) ==================== */
.rp-title {
  position: relative;
  width: 100%;
  padding-top: 108px;
  /* 1920px以下は左160px（固定ロゴを避ける位置）。それより広い画面では画像（1761px）を右端に寄せる */
  padding-left: max(160px, calc(100% - 1761px));
  background-color: var(--color-bg-beige);
}
.rp-title img {
  display: block;
  width: 1761px;
  height: auto;
}
.rp-canvas {
  position: relative;
  width: 1920px;
  left: 50%;
  margin-left: -960px;
  height: 8031px;
}

/* ---- 見出し・リード・イントロ ---- */
.rp-heading {
  position: absolute;
  left: 363px;
  top: 85px;
  font-family: var(--font-en);
  font-weight: 400;
  font-size: 80px;
  line-height: 1;
  letter-spacing: .075em;
  color: var(--color-navy);
}
.rp-heading-ja {
  position: absolute;
  left: 361px;
  top: 200px;
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 28px;
  line-height: 1;
  letter-spacing: .04em;
  color: var(--color-navy);
}
.rp-lead {
  position: absolute;
  left: 361px;
  top: 300px;
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 24px;
  line-height: 46px;
  letter-spacing: .04em;
  color: var(--color-text-black);
}
.rp-intro {
  position: absolute;
  left: 361px;
  top: 437px;
  width: 600px;
}
.rp-intro p {
  margin: 0;
  font-family: var(--font-jp);
  font-size: 16px;
  line-height: 40px;
  letter-spacing: .047em;
  color: var(--color-text-black);
}

/* ---- ページ内ジャンプナビ（右側） ---- */
.rp-jump {
  position: absolute;
  left: 1112px;
  top: 88px;
  width: 448px;
}
.rp-jump__item {
  position: relative;
  display: block;
  padding-bottom: 16px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--color-form-gray);
  color: var(--color-text-black);
}
.rp-jump__item--head {
  padding-bottom: 12px;
}
.rp-jump__en {
  display: block;
  font-family: var(--font-en);
  font-weight: 400;
  font-size: 28px;
  line-height: 1;
  letter-spacing: .06em;
  color: var(--color-navy);
}
.rp-jump__ja {
  display: block;
  margin-top: 6px;
  font-family: var(--font-jp);
  font-size: 16px;
  line-height: 1;
  letter-spacing: .04em;
}
.rp-jump__item:not(.rp-jump__item--head) .rp-jump__ja {
  margin-top: 0;
}
.rp-jump .rp-arrow {
  position: absolute;
  right: 8px;
  top: calc(50% - 19.5px);
  color: var(--color-form-gray);
  transform: rotate(90deg);
}
.rp-jump__en,
.rp-jump__ja {
  transition: opacity .3s ease;
}
.rp-jump__item:hover .rp-jump__en,
.rp-jump__item:hover .rp-jump__ja {
  opacity: .4;
}

/* ---- 客室セクション共通 ---- */
.rp-room {
  display: block;
}
.rp-room__head {
  position: relative;
}
.rp-room__title {
  position: absolute;
  left: 361px;
  top: calc(765px + var(--dy, 0px));
  display: flex;
  align-items: baseline;
  gap: 40px;
}
.rp-room__en {
  margin: 0;
  font-family: var(--font-en);
  font-weight: 400;
  font-size: 40px;
  line-height: 1;
  letter-spacing: .08em;
  color: var(--color-navy);
}
.rp-room__ja {
  margin: 0;
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 20px;
  line-height: 1;
  letter-spacing: .05em;
  color: var(--color-navy);
}
.rp-tags {
  position: absolute;
  left: 359px;
  top: calc(829px + var(--dy, 0px));
  display: flex;
  align-items: center;
  list-style: none;
}
.rp-tags li {
  display: flex;
  align-items: center;
  height: 32px;
  margin-right: 8px;
  padding: 0 24px;
  background-color: #fff;
  font-family: var(--font-jp);
  font-size: 14px;
  letter-spacing: .04em;
  color: var(--color-text-black);
}
.rp-tag__icon {
  margin-right: 8px;
  color: var(--color-form-gray);
  flex-shrink: 0;
}
img.rp-tag__icon { display: block; }

/* ---- スライダー ---- */
.rp-slider {
  position: absolute;
  left: 317px;
  top: calc(917px + var(--dy, 0px));
  width: 1292px;
  height: 603px;
  overflow: hidden;
  background-color: #000;
}
.rp-slide__img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1.2s ease-in-out;
}
.rp-slide__img.is-active {
  opacity: 1;
}
.rp-slider__pager {
  position: absolute;
  right: 24px;
  bottom: 24px;
  display: flex;
  align-items: baseline;
  font-family: var(--font-en);
  letter-spacing: .05em;
  color: var(--color-text-white);
}
.rp-slider__pager b {
  font-weight: 400;
}
.rp-slider__current {
  font-size: 28px;
}
.rp-slider__pager i {
  display: inline-block;
  width: 72px;
  height: 1px;
  margin: 0 10px;
  background: rgba(255, 255, 255, .7);
}
.rp-slider__pager b:last-child {
  font-size: 16px;
  opacity: .75;
}
.rp-room__caption {
  position: absolute;
  left: 361px;
  top: calc(1576px + var(--dy, 0px));
  width: 920px;
  margin: 0;
  font-family: var(--font-jp);
  font-size: 16px;
  line-height: 40px;
  letter-spacing: .047em;
  color: var(--color-text-black);
}

/* ---- VIEW（写真＋テキスト） ---- */
.rp-view {
  position: relative;
}
.rp-view__photo {
  position: absolute;
  left: 0;
  top: calc(1716px + var(--dy, 0px));
  width: 1067px;
  height: 549px;
}
.rp-view__photo img {
  display: block;
  width: calc(100% + max(0px, (100vw - 1920px) / 2));
  height: 100%;
  margin-left: calc(-1 * max(0px, (100vw - 1920px) / 2));
  object-fit: cover;
  object-position: left center;
}
.rp-view__text {
  position: absolute;
  left: 1147px;
  top: calc(1855px + var(--dy, 0px));
}
.rp-view__tag {
  margin: 0;
  font-family: var(--font-en);
  font-weight: 400;
  font-size: 20px;
  line-height: 1;
  letter-spacing: .08em;
  color: var(--color-navy);
}
.rp-view__lead {
  margin: 22px 0 0;
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 24px;
  line-height: 1;
  letter-spacing: .04em;
  color: var(--color-text-black);
}
.rp-view__body {
  width: 403px;
  margin-top: 42px;
}
.rp-view__body p {
  margin: 0;
  font-family: var(--font-jp);
  font-size: 16px;
  line-height: 40px;
  letter-spacing: .047em;
  color: var(--color-text-black);
}

/* ---- ROOM FACILITIES ---- */
.rp-facilities {
  position: relative;
}
.rp-facilities__heading {
  position: absolute;
  left: 359px;
  top: calc(2338px + var(--dy, 0px));
  margin: 0;
  font-family: var(--font-en);
  font-weight: 400;
  font-size: 20px;
  line-height: 1;
  letter-spacing: .08em;
  color: var(--color-navy);
}
.rp-facilities__list {
  position: absolute;
  left: 359px;
  top: calc(2375px + var(--dy, 0px));
  display: flex;
  list-style: none;
}
.rp-facilities__list li {
  width: 386px;
  margin-left: 14px;
  text-align: left;
}
.rp-facilities__list li:first-child {
  margin-left: 0;
}
.rp-facilities__list img {
  display: block;
  width: 100%;
  height: 257px;
  object-fit: cover;
}
.rp-facilities__list p {
  margin: 9px 0 0;
  font-family: var(--font-jp);
  font-size: 16px;
  line-height: 1;
  letter-spacing: .04em;
  color: var(--color-text-black);
}

/* ---- 客室フッター（ボタン・リンク） ---- */
.rp-room__foot {
  position: relative;
}
.rp-room__btn {
  position: absolute;
  left: 361px;
  top: calc(2725px + var(--dy, 0px));
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 464px;
  height: 72px;
  border: 1px solid var(--color-btn-line);
  background-color: var(--color-btn-reserve-fill);
  color: var(--color-text-white);
  text-align: center;
}
.rp-room__btn-en {
  font-family: var(--font-en);
  font-size: 14px;
  line-height: 1;
  letter-spacing: .1em;
  opacity: .5;
}
.rp-room__btn-ja {
  margin-left: 20px;
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 18px;
  line-height: 1;
  letter-spacing: .05em;
}
.rp-room__link {
  position: absolute;
  top: calc(2743px + var(--dy, 0px));
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--color-text-black);
  font-family: var(--font-jp);
  font-size: 16px;
  line-height: 27px;
  letter-spacing: .08em;
  color: var(--color-text-black);
}
.rp-room__link .rp-arrow {
  flex-shrink: 0;
}
.rp-room__foot .rp-room__link[href="#onsen"] { left: 889px; width: 180px; }
.rp-room__foot .rp-room__link[href="#facilities"] { left: 1132px; width: 220px; }

/* ---- 街側客室：全体を1つ下にずらす分のオフセット ---- */
.rp-room--town {
  --dy: 2136px;
}

/* ==================== ONSEN ==================== */
.rp-onsen {
  position: absolute;
  left: 0;
  top: 5019px;
  width: 100%;
  height: 716px;
  overflow: hidden;
  background-color: var(--color-navy);
}
.rp-onsen__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: .32;
}
.rp-onsen__inner {
  position: absolute;
  left: 360px;
  top: 128px;
  width: 440px;
  color: var(--color-text-white);
}
.rp-onsen__title {
  display: flex;
  align-items: baseline;
  gap: 40px;
  height: 40px;
}
.rp-onsen__tag {
  margin: 0;
  font-family: var(--font-en);
  font-weight: 400;
  font-size: 40px;
  line-height: 1;
  letter-spacing: .08em;
}
.rp-onsen__ja {
  margin: 0;
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 20px;
  line-height: 1;
  letter-spacing: .05em;
}
.rp-onsen__text {
  margin-top: 56px;
}
.rp-onsen__text p {
  margin: 0;
  font-family: var(--font-jp);
  font-size: 16px;
  line-height: 40px;
  letter-spacing: .047em;
}
.rp-onsen__data {
  margin-top: 45px;
  border-top: 1px solid #A3A1A0;
}
.rp-onsen__data p {
  margin: 0;
  padding: 32px 0;
  border-bottom: 1px solid #A3A1A0;
  font-family: var(--font-jp);
  font-size: 16px;
  line-height: 1;
  letter-spacing: .04em;
}
.rp-onsen__data p span {
  display: inline-block;
  width: 90px;
}
.rp-onsen__photo {
  position: absolute;
  left: 873px;
  top: 115px;
  width: 693px;
  height: 490px;
}
.rp-onsen__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ==================== FACILITIES / AMENITIES ==================== */
.rp-facilities-amenities {
  position: absolute;
  left: 0;
  top: 5868px;
  width: 100%;
  height: 868px;
}
.rp-heading2-row {
  position: absolute;
  left: 357px;
  top: 5839px;
  height: 40px;
  display: flex;
  align-items: baseline;
  gap: 40px;
}
.rp-heading2 {
  margin: 0;
  font-family: var(--font-en);
  font-weight: 400;
  font-size: 40px;
  line-height: 1;
  letter-spacing: .08em;
  color: var(--color-navy);
}
.rp-heading2-ja {
  margin: 0;
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 20px;
  line-height: 1;
  letter-spacing: .05em;
  color: var(--color-navy);
}
#facilities .rp-heading2-row {
  top: calc(5839px - 5868px);
}
.rp-amenity-list {
  position: absolute;
  left: 361px;
  top: 67px;
  width: 300px;
  list-style: none;
  column-count: 1;
}
.rp-amenity-list li {
  height: 40px;
  font-family: var(--font-jp);
  font-size: 16px;
  line-height: 40px;
  letter-spacing: .04em;
  color: var(--color-text-black);
}
.rp-amenity-photos {
  position: absolute;
  left: 741px;
  top: 71px;
  display: grid;
  grid-template-columns: repeat(3, 278px);
  grid-auto-rows: 330px;
  gap: 32px;
}
.rp-amenity-photos img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ==================== INFORMATION ==================== */
.rp-info {
  position: absolute;
  left: 0;
  top: 6736px;
  width: 100%;
}
.rp-info > .rp-heading2-row {
  top: 0;
}
.rp-info__row {
  position: relative;
  display: flex;
  padding: 26px 0;
  border-bottom: 1px solid var(--color-line-gray);
  margin-left: 361px;
  margin-top: 96px;
  width: 1200px;
}
.rp-info__row + .rp-info__row {
  margin-top: 0;
}
.rp-info__row--first {
  margin-top: 95px;
  border-top: 1px solid var(--color-line-gray);
}
.rp-info__label {
  width: 260px;
  flex-shrink: 0;
  margin: 0;
  font-family: var(--font-jp);
  font-size: 16px;
  line-height: 27px;
  letter-spacing: .04em;
  color: var(--color-text-black);
}
.rp-info__value {
  margin: 0;
  font-family: var(--font-jp);
  font-size: 16px;
  line-height: 27px;
  letter-spacing: .04em;
  color: var(--color-text-black);
}
.rp-info__row--notes {
  padding: 32px 0;
}
.rp-info__row--notes .rp-info__value p {
  margin: 0 0 6px;
}
.rp-info__row--notes .rp-info__value p:last-child {
  margin-bottom: 0;
}
/* キャンセルポリシー：「キャンセル料」の頭をそろえる（最長の「連絡なしのキャンセル、不泊／」14文字分の幅。SPは改行するので不要） */
.rp-cancel__when { display: inline-block; min-width: 14.56em; }

/* ==================== CUISINE（お食事ページ） ==================== */
.cs-main { position: relative; }
.cs-canvas {
  position: relative;
  width: 1920px;
  left: 50%;
  margin-left: -960px;
  /* COURSEのメニュー表（131px）とRESTAURANTの情報表（481px）を非表示にした分を詰めた値。両方戻す場合は 7650px */
  height: 7038px;
}
.cs-lead {
  position: absolute;
  left: 361px;
  top: 309px;
  margin: 0;
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 24px;
  line-height: 1;
  letter-spacing: .04em;
  color: var(--color-text-black);
}
.cs-intro {
  position: absolute;
  left: 361px;
  top: 390px;
  width: 620px;
}
.cs-intro p {
  margin: 0;
  font-family: var(--font-jp);
  font-size: 16px;
  line-height: 40px;
  letter-spacing: .047em;
  color: var(--color-text-black);
}
.cs-jump { width: 420px; }

/* ---- 共通：タグ+リード+本文 (rp-view__tag/lead/body を流用) ---- */
.cs-menu__heading {
  margin: 56px 0 0;
  font-family: var(--font-en);
  font-weight: 400;
  font-size: 20px;
  line-height: 1;
  letter-spacing: .08em;
  color: var(--color-navy);
}
.cs-seasonal .cs-menu__heading,
.cs-breakfast__text .cs-menu__heading {
  margin-top: 40px;
  padding-top: 40px;
  border-top: 1px solid #A3A1A0;
}
.cs-menu {
  margin-top: 32px;
}
.cs-menu p {
  margin: 0;
  font-family: var(--font-jp);
  font-size: 16px;
  line-height: 40px;
  letter-spacing: .04em;
  color: var(--color-text-black);
}
.cs-menu p span {
  display: inline-block;
  width: 90px;
}
.cs-detail-link {
  display: block;
  margin-top: 32px;
  font-family: var(--font-jp);
  font-size: 18px;
  line-height: 1;
  letter-spacing: .05em;
  color: var(--color-text-black);
  text-decoration: none;
}

/* ---- DINNER ---- */
.cs-dinner {
  position: absolute;
  left: 0;
  top: 690px;
  width: 100%;
}
.cs-dinner__title { position: relative; top: 0; left: 361px; }
.cs-dinner__photo {
  position: absolute;
  left: 0;
  top: 96px;
  width: 1033px;
  height: 768px;
}
.cs-dinner__photo img,
.cs-breakfast__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cs-restaurant__slider {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
  background-color: #000;
}
.cs-restaurant__slider .rp-slide__img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1.2s ease-in-out;
}
.cs-restaurant__slider .rp-slide__img.is-active { opacity: 1; }
.cs-seasonal {
  position: absolute;
  left: 1113px;
  top: 246px;
  width: 390px;
}
.cs-seasonal__body {
  margin-top: 56px;
}
.cs-seasonal__body p {
  margin: 0;
  font-family: var(--font-jp);
  font-size: 16px;
  line-height: 40px;
  letter-spacing: .047em;
  color: var(--color-text-black);
}
.cs-dish__text .rp-view__body,
.cs-course__text .rp-view__body,
.cs-breakfast__text .rp-view__body,
.cs-drink__text .rp-view__body {
  margin-top: 56px;
}
.cs-dish__text .rp-view__body {
  width: 464px;
}

/* ---- MAIN DISH ---- */
.cs-dish-block {
  position: absolute;
  left: 0;
  top: 965px;
  width: 100%;
}
.cs-dish-block__title { position: relative; top: 0; left: 361px; }
.cs-dish {
  position: relative;
  display: flex;
  align-items: flex-start;
  margin-top: 80px;
}
.cs-dish--first { margin-top: 56px; }
.cs-dish__photo {
  flex-shrink: 0;
  margin-left: 360px;
  width: 600px;
  height: 365px;
}
.cs-dish__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cs-dish__text {
  flex-shrink: 0;
  margin-left: 79px;
  width: 464px;
}
.cs-dish__btn {
  margin-top: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 464px;
  height: 72px;
  border: 1px solid var(--color-btn-line);
  background-color: var(--color-btn-reserve-fill);
  color: var(--color-text-white);
  text-align: center;
  text-decoration: none;
}
.cs-dish__btn-en {
  font-family: var(--font-en);
  font-size: 14px;
  line-height: 1;
  letter-spacing: .1em;
  opacity: .5;
}
.cs-dish__btn-ja {
  margin-left: 20px;
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 18px;
  line-height: 1;
  letter-spacing: .05em;
}

/* ---- COURSE（カルーセル） ---- */
.cs-course {
  position: absolute;
  left: 0;
  top: 2635px;
  width: 100%;
}
.cs-course__bg {
  position: absolute;
  left: 0;
  top: -199px;
  width: 100%;
  /* コースのメニュー表を非表示にした分を詰めた値（ページ番号の下140px）。メニュー表を戻す場合は 1149px */
  height: 1018px;
  background-color: #ffffff;
}
.cs-course__title { position: relative; top: -79px; left: 358px; }
.cs-course__tabs {
  position: absolute;
  left: 361px;
  top: 17px;
  display: flex;
  list-style: none;
}
.cs-course__tabs li {
  display: flex;
  align-items: center;
  gap: 40px;
  padding: 0 0 24px;
  margin-right: 24px;
  border-bottom: 1px solid var(--color-line-gray);
  font-family: var(--font-jp);
  font-size: 16px;
  line-height: 27px;
  letter-spacing: .04em;
  color: var(--color-form-gray);
  cursor: pointer;
}
.cs-course__tabs li:last-child { margin-right: 0; }
.cs-course__tabs li.is-active {
  color: var(--color-navy);
  border-bottom-color: var(--color-navy);
}
.cs-course__tab-arrow {
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  transform: rotate(90deg);
}
.cs-course__stage {
  position: relative;
  top: 109px;
  width: 100%;
  height: 700px;
  overflow: hidden;
}
.cs-course__card {
  position: absolute;
  left: 312px;
  top: 0;
  width: 1296px;
  height: 700px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: left .7s cubic-bezier(.4, 0, .2, 1), filter .7s cubic-bezier(.4, 0, .2, 1), opacity .4s ease;
}
.cs-course__card.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.cs-course__card.is-prev,
.cs-course__card.is-next {
  opacity: 1;
  visibility: visible;
  filter: blur(3px);
}
.cs-course__card.is-prev { left: -984px; }
.cs-course__card.is-next { left: 1608px; }
.cs-course__card.is-wrap {
  transition: none;
  opacity: 0;
}
.cs-course__arrow { z-index: 2; }
.cs-course__arrow {
  position: absolute;
  top: 241px;
  z-index: 2;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-navy);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cs-course__arrow--prev { left: 296px; }
.cs-course__arrow--next { left: 1592px; }
.cs-course__slider {
  position: absolute;
  left: 552px;
  top: 0;
  width: 703px;
  height: 468px;
  background-color: #000;
}
.cs-course__slider .rp-slide__img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1.2s ease-in-out;
}
.cs-course__slider .rp-slide__img.is-active { opacity: 1; }
.cs-course__slider .rp-slider__pager {
  right: auto;
  left: 0;
  bottom: auto;
  top: calc(100% + 24px);
  color: #043351;
}
.cs-course__slider .rp-slider__pager i { background: #043351; }
.cs-course__slider .rp-slider__pager b:last-child { opacity: 1; }
.cs-course__text {
  position: absolute;
  left: 48px;
  top: 0;
  width: 424px;
}
.cs-course__text .rp-view__lead { margin-top: 24px; }
.cs-course__text .rp-view__body { width: 424px; }
.cs-course__menu {
  margin-top: 40px;
  padding-top: 40px;
  border-top: 1px solid #A3A1A0;
}
.cs-course__btn {
  width: 424px;
  justify-content: center;
}

/* ---- BREAKFAST ---- */
.cs-breakfast {
  position: absolute;
  left: 0;
  top: 4313px; /* COURSEを131px詰めた分。元は 4444px */
  width: 100%;
}
.cs-breakfast__title { position: relative; top: 0; left: 361px; }
.cs-breakfast__photo {
  position: absolute;
  left: 832px;
  top: -49px;
  width: 1088px;
  height: 766px;
}
.cs-breakfast__text {
  position: absolute;
  left: 361px;
  top: 96px;
  width: 410px;
}

/* ---- DRINK INCLUSIVE ---- */
.cs-drink {
  position: absolute;
  left: 0;
  top: 5150px; /* COURSEを131px詰めた分。元は 5281px */
  width: 100%;
  height: 734px;
  overflow: hidden;
  background: var(--color-navy) url(../cuisine/img/drink-bg.jpg) center top / cover no-repeat;
  color: var(--color-text-white);
}
.cs-drink__title { position: relative; display: block; height: auto; left: 1119px; top: 101px; width: 700px; }
.cs-drink__title .rp-heading2,
.cs-drink__title .rp-heading2-ja { color: var(--color-text-white); }
.cs-drink__title .rp-heading2 { height: 40px; }
.cs-drink__title .rp-heading2-ja { display: block; height: 20px; margin-top: 40px; }
.cs-drink__photo {
  position: absolute;
  left: 341px;
  top: 114px;
  width: 680px;
  height: 448px;
}
.cs-drink__slider {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: #000;
}
.cs-drink__slider .rp-slide__img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1.2s ease-in-out;
}
.cs-drink__slider .rp-slide__img.is-active { opacity: 1; }
.cs-drink__slider .rp-slider__pager {
  right: 0;
  bottom: auto;
  top: calc(100% + 24px);
  color: #ffffff;
}
.cs-drink__slider .rp-slider__pager i { background: #ffffff; }
.cs-drink__slider .rp-slider__pager b:last-child { opacity: 1; }
.cs-drink__text {
  position: absolute;
  left: 1119px;
  top: 257px;
  width: 460px;
  color: var(--color-text-white);
}
.cs-drink__text .rp-view__lead { margin-top: 0; color: var(--color-text-white); }
.cs-drink__text .rp-view__body p { color: var(--color-text-white); }

/* ---- RESTAURANT ---- */
.cs-restaurant {
  position: absolute;
  left: 0;
  top: 5985px; /* COURSEを131px詰めた分。元は 6116px */
  width: 100%;
}
.cs-restaurant__title { position: relative; top: 0; left: 358px; }
.cs-restaurant__photo {
  position: absolute;
  left: 317px;
  top: 96px;
  width: 1292px;
  height: 603px;
}
.cs-restaurant__text {
  position: absolute;
  left: 359px;
  top: 755px;
  width: 700px;
}
.cs-restaurant__text p {
  margin: 0 0 26px;
  font-family: var(--font-jp);
  font-size: 16px;
  line-height: 1;
  letter-spacing: .04em;
  color: var(--color-text-black);
}
.cs-restaurant__info {
  position: relative;
  top: 758px;
}
.cs-restaurant__detail-link {
  position: relative;
  top: 850px;
  left: 361px;
  margin-top: 56px;
}

/* ==================== FACILITIES（館内施設ページ） ==================== */
.fc-main { position: relative; }
.fc-canvas {
  position: relative;
  width: 1920px;
  left: 50%;
  margin-left: -960px;
  height: 5906px;
}
.fc-heading-ja { top: 205px; }
.fc-lead { top: 314px; }
.fc-intro { top: 394px; width: 596px; }

/* ---- 共通：テキスト（40pxライン） ---- */
.fc-text p {
  margin: 0;
  font-family: var(--font-jp);
  font-size: 16px;
  line-height: 40px;
  letter-spacing: .047em;
  color: var(--color-text-black);
}

/* ---- 共通：スライダー ---- */
.fc-slider {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: #000;
}
.fc-slider--right .rp-slider__pager,
.fc-slider--left .rp-slider__pager {
  bottom: auto;
  top: calc(100% + 24px);
  color: #043351;
}
.fc-slider--right .rp-slider__pager { left: 0; right: auto; }
.fc-slider--left .rp-slider__pager { right: 0; left: auto; }
.fc-slider--right .rp-slider__pager i,
.fc-slider--left .rp-slider__pager i { background: #043351; }
.fc-slider--right .rp-slider__pager b:last-child,
.fc-slider--left .rp-slider__pager b:last-child { opacity: 1; }

/* ---- 共通：リンク（矢印付き下線） ---- */
.fc-link {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 180px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--color-text-black);
  font-family: var(--font-jp);
  font-size: 16px;
  line-height: 27px;
  letter-spacing: .08em;
  color: var(--color-text-black);
  text-decoration: none;
}
.fc-link .rp-arrow { flex-shrink: 0; }

/* ---- 共通：見出し行（相対配置に戻す） ---- */
.fc-exterior__title,
.fc-shop__title,
.fc-restaurant__title,
.fc-other__title { position: relative; top: 0; left: 0; }

/* ---- EXTERIOR / ENTRANCE + INTERIOR ---- */
.fc-exterior {
  position: absolute;
  left: 0;
  top: 824px;
  width: 100%;
}
.fc-exterior__title { left: 361px; }
.fc-exterior__photo {
  position: absolute;
  left: 317px;
  top: 96px;
  width: 1292px;
  height: 603px;
}
.fc-exterior__text {
  position: absolute;
  left: 361px;
  top: 755px;
  width: 1100px;
}
.fc-interior__img {
  position: absolute;
}
.fc-interior__img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.fc-interior__img--cat { left: 360px; top: 915px; width: 313px; height: 497px; }
.fc-interior__img--lamp { left: 680px; top: 915px; width: 391px; height: 281px; }
.fc-interior__img--frame { left: 680px; top: 1203px; width: 391px; height: 209px; }
.fc-interior__text {
  position: absolute;
  left: 1151px;
  top: 1031px;
  width: 440px;
}
.fc-interior__text .rp-view__lead { margin-top: 24px; }
.fc-interior__text .rp-view__body { width: 440px; margin-top: 56px; }

/* ---- SHOP（写真右・テキスト左） ---- */
.fc-shop {
  position: absolute;
  left: 0;
  top: 2356px;
  width: 100%;
}
.fc-shop__photo {
  position: absolute;
  left: 961px;
  top: 0;
  width: 801px;
  height: 533px;
}
.fc-shop__text {
  position: absolute;
  left: 361px;
  top: 80px;
  width: 520px;
}
.fc-shop__text .rp-view__lead { margin-top: 80px; }
.fc-shop__text .rp-view__body { width: 520px; margin-top: 56px; }

/* ---- RESTAURANT（写真左・テキスト右） ---- */
.fc-restaurant {
  position: absolute;
  left: 0;
  top: 3071px;
  width: 100%;
}
.fc-restaurant__photo {
  position: absolute;
  left: 159px;
  top: 0;
  width: 801px;
  height: 533px;
}
.fc-restaurant__text {
  position: absolute;
  left: 1040px;
  top: 47px;
  width: 640px;
}
.fc-restaurant__text .rp-view__lead { margin-top: 80px; }
.fc-restaurant__text .rp-view__body { width: 512px; margin-top: 56px; }
.fc-restaurant__link { left: 0; top: 440px; }

/* ---- DRINK INCLUSIVE（写真右・テキスト左） ---- */
.fc-drink {
  position: absolute;
  left: 0;
  top: 3786px;
  width: 100%;
}
.fc-drink__photo {
  position: absolute;
  left: 961px;
  top: 0;
  width: 801px;
  height: 533px;
}
.fc-drink__text {
  position: absolute;
  left: 361px;
  top: 57px;
  width: 520px;
}
.fc-drink__title { position: relative; display: block; }
.fc-drink__title .rp-heading2 { height: 40px; }
.fc-drink__title .rp-heading2-ja { display: block; height: 20px; margin-top: 40px; }
.fc-drink__text .rp-view__lead { margin-top: 80px; }
.fc-drink__text .rp-view__body { width: 520px; margin-top: 56px; }

/* ---- OTHER FACILITIES & SERVICES ---- */
.fc-other {
  position: absolute;
  left: 0;
  top: 4501px;
  width: 100%;
}
.fc-other__title { left: 361px; }
.fc-other__list {
  position: absolute;
  left: 361px;
  top: 95px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.fc-other__list li {
  font-family: var(--font-jp);
  font-size: 16px;
  line-height: 40px;
  letter-spacing: .047em;
  color: var(--color-text-black);
}
.fc-other__photos {
  position: absolute;
  left: 661px;
  top: 104px;
  display: flex;
  gap: 32px;
}
.fc-other__photos img {
  display: block;
  width: 278px;
  height: 330px;
  object-fit: cover;
}
.fc-other__link { left: 360px; }
.fc-other__link--1 { top: 375px; }
.fc-other__link--2 { top: 431px; }

/* ---- INFORMATION ---- */
.fc-info { top: 5090px; }
.fc-info .rp-info__label { width: 241px; }
.fc-info__map {
  color: var(--color-text-black);
  text-decoration: underline;
}

/* ==================== SIGHTSEEING（周辺観光ページ） ==================== */
.ss-main { position: relative; }
.ss-canvas {
  position: relative;
  width: 1920px;
  left: 50%;
  margin-left: -960px;
  padding-bottom: 240px;
}
.ss-head {
  position: relative;
  height: 754px;
}
.ss-sec + .ss-sec { margin-top: 120px; }
.ss-h { position: relative; top: 0; left: 361px; }

/* ---- 共通：テキスト・タグ・リンク ---- */
.ss-tag {
  display: flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  height: 32px;
  margin: 24px 0 0;
  padding: 0 24px;
  background-color: #ffffff;
  font-family: var(--font-jp);
  font-size: 14px;
  line-height: 1;
  letter-spacing: .05em;
  color: var(--color-text-black);
}
.ss-tag img { flex-shrink: 0; display: block; }
.ss-pickup__body,
.ss-card__text {
  margin: 56px 0 0;
  font-family: var(--font-jp);
  font-size: 16px;
  line-height: 40px;
  letter-spacing: .047em;
  white-space: nowrap;
  color: var(--color-text-black);
}
.ss-links {
  display: flex;
  gap: 40px;
  margin-top: 80px;
}
.ss-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 144px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--color-form-gray);
  font-family: var(--font-jp);
  font-size: 16px;
  line-height: 27px;
  letter-spacing: .08em;
  color: var(--color-text-black);
  text-decoration: none;
}
.ss-link img { display: block; flex-shrink: 0; }
/* 九重・久住エリア：「九重　詳細を見る」「久住　詳細を見る」の2ボタン。文字数が多いので幅を文字に合わせ、
   横に収まらない幅（SP）では2段に折り返す */
.ss-links--area { flex-wrap: wrap; }
.ss-link--area { flex-shrink: 0; width: auto; gap: 24px; }
.ss-credit {
  position: absolute;
  right: 10px;
  bottom: 6px;
  font-family: var(--font-jp);
  font-size: 16px;
  line-height: 1;
  letter-spacing: .05em;
  color: #ffffff;
}
.ss-credit--pickup { right: 23px; bottom: 10px; }

/* ---- SIGHTSEEING MAP ---- */
.ss-map__frame {
  width: 1292px;
  height: 603px;
  margin: 56px 0 0 317px;
  overflow: hidden;
  background-color: #e6e6e6;
}
/* ---- 地図の誤操作防止（js/main.js の initMapGuards）----
   通常は透明の .map-guard を地図に重ねてページのスクロールを優先し、クリック／タップで地図を操作できるようにする */
.ss-map__frame { position: relative; }
.map-guard {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 0 0 56px; /* 地図下部の Google ロゴ・表記に重ならない位置 */
  border: 0;
  background: transparent;
  cursor: pointer;
}
.map-guard__label {
  padding: 8px 18px;
  border-radius: 999px;
  background-color: rgba(26, 19, 17, .6);
  font-family: var(--font-jp);
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: .06em;
  color: #ffffff;
  pointer-events: none;
  transition: background-color .3s ease;
}
.map-guard:hover .map-guard__label,
.map-guard:focus-visible .map-guard__label { background-color: rgba(26, 19, 17, .78); }
.map-guard:hover { opacity: 1; }
.map-guard__label--sp { display: none; }
.ss-map__frame.is-active .map-guard { display: none; }
@media (hover: none) and (pointer: coarse) {
  .map-guard__label--pc { display: none; }
  .map-guard__label--sp { display: inline; }
}

.ss-map__frame img,
.ss-map__frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
}
.ss-maplink {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 180px;
  margin: 56px 0 0 1380px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--color-text-black);
  font-family: var(--font-jp);
  font-size: 16px;
  line-height: 27px;
  letter-spacing: .08em;
  color: var(--color-text-black);
  text-decoration: none;
}
.ss-maplink .rp-arrow { flex-shrink: 0; }

/* ---- タブ（ページ内リンク） ---- */
.ss-tabs {
  display: flex;
  width: fit-content;
  margin: 56px 0 0 361px;
}
.ss-tabs a {
  display: flex;
  align-items: center;
  gap: 40px;
  margin-right: 24px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-form-gray);
  font-family: var(--font-jp);
  font-size: 16px;
  line-height: 27px;
  letter-spacing: .04em;
  color: var(--color-text-black);
  text-decoration: none;
}
.ss-tabs a:last-child { margin-right: 0; }
.ss-tabs .rp-arrow {
  flex-shrink: 0;
  color: var(--color-form-gray);
  transform: rotate(90deg);
}

/* ---- 小見出し（英語20px＋日本語24px） ---- */
.ss-subhead {
  display: flex;
  align-items: baseline;
  gap: 40px;
  height: 24px;
  margin-left: 361px;
}
.ss-subhead--area { margin-left: 0; }
.ss-subhead__en {
  font-family: var(--font-en);
  font-size: 20px;
  line-height: 1;
  letter-spacing: .08em;
  color: var(--color-navy);
}
.ss-subhead__ja {
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 24px;
  line-height: 1;
  letter-spacing: .04em;
  color: var(--color-text-black);
}
.ss-tabs + .ss-sub { margin-top: 80px; }
.ss-sub + .ss-sub { margin-top: 120px; }

/* ---- PICKUP ---- */
.ss-pickup {
  display: flex;
  align-items: center;
  gap: 80px;
  margin: 56px 0 0 160px;
}
.ss-pickup + .ss-pickup { margin-top: 80px; }
.ss-pickup--rev { margin-left: 359px; }
.ss-pickup__img {
  position: relative;
  flex-shrink: 0;
  width: 800px;
  height: 559px;
}
.ss-pickup__img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ss-pickup__text { width: 520px; flex-shrink: 0; }
.ss-pickup--rev .ss-pickup__text { width: 521px; }
.ss-pickup__title {
  margin: 24px 0 0;
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 24px;
  line-height: 1;
  letter-spacing: .04em;
  color: var(--color-text-black);
}

/* ---- カード（3列） ---- */
.ss-cards {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: 1200px;
  margin: 80px 0 0 359px;
}
.ss-card { width: 369px; }
.ss-card__title {
  margin: 0;
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 22px;
  line-height: 30px;
  letter-spacing: .04em;
  color: var(--color-text-black);
}
.ss-cards--2 .ss-card__title { min-height: 60px; }
.ss-card__img {
  position: relative;
  width: 369px;
  height: 241px;
  margin-top: 24px;
}
.ss-card__img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ss-card__text { margin-top: 24px; }
.ss-card .ss-links { margin-top: 56px; }

/* ---- 広域観光エリア ---- */
.ss-area {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: 1201px;
  margin: 80px 0 0 360px;
}
.ss-area--rev { margin-left: 359px; }
.ss-area__text { width: 520px; }
.ss-area__imgs {
  display: flex;
  gap: 11px;
  width: 601px;
}
.ss-area__imgs img {
  display: block;
  width: 193px;
  height: 341px;
  object-fit: cover;
}
.ss-area__imgs--low { margin-top: 38px; }

/* ---- LINK ---- */
.ss-table {
  width: 1200px;
  margin: 55px 0 0 361px;
}
.ss-table__row {
  display: flex;
  align-items: center;
  padding: 26px 0;
  border-bottom: 1px solid var(--color-line-gray);
}
.ss-table__row--first { border-top: 1px solid var(--color-line-gray); }
.ss-table__row--two { padding: 15px 0 16px; }
.ss-table__label,
.ss-table__value {
  margin: 0;
  font-family: var(--font-jp);
  font-size: 16px;
  line-height: 27px;
  letter-spacing: .04em;
  color: var(--color-text-black);
}
.ss-table__row--two .ss-table__label { line-height: 24px; }
.ss-table__label { width: 291px; flex-shrink: 0; }
.ss-table__value a {
  color: inherit;
  text-decoration: none;
  transition: opacity .3s ease;
}
.ss-table__value a:hover { opacity: .4; }

/* ==================== ACCESS（アクセスページ） ==================== */
.ac-intro { width: 640px; }
.ac-intro p { white-space: nowrap; }
.ac-info {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: 1200px;
  margin: 56px 0 0 361px;
}
.ac-info__main { display: flex; gap: 80px; }
.ac-info__logo {
  display: block;
  width: auto;
  height: 187px;
}
.ac-info__text { padding-top: 30px; }
.ac-info__text p {
  margin: 0;
  font-family: var(--font-jp);
  font-size: 16px;
  line-height: 40px;
  letter-spacing: .047em;
  color: var(--color-text-black);
}
.ac-info__text .ac-info__code {
  margin: 16px 0 0;
  padding: 0 24px 0 20px;
  font-size: 14px;
  line-height: 1;
}
.ac-info .ss-maplink { margin: 123px 0 0; }
.ac-lines {
  margin: 56px 0 0 361px;
}
.ac-lines p {
  margin: 0;
  font-family: var(--font-jp);
  font-size: 16px;
  line-height: 40px;
  letter-spacing: .047em;
  white-space: nowrap;
  color: var(--color-text-black);
}
.ac-diagram { margin: 56px 0 0 361px; }
.ac-diagram img {
  display: block;
  width: 1198px;
  height: auto;
}
.ac-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 180px;
  margin: 56px 0 0 361px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--color-text-black);
  font-family: var(--font-jp);
  font-size: 16px;
  line-height: 27px;
  letter-spacing: .08em;
  color: var(--color-text-black);
  text-decoration: none;
}
.ac-link .rp-arrow { flex-shrink: 0; }

/* ---- 見出し（英語→日本語を縦積み） ---- */
.ac-stack .rp-heading2 { height: 40px; }
.ac-stack__ja {
  display: flex;
  align-items: center;
  gap: 22px;
  height: 32px;
  margin-top: 40px;
}
.ac-stack__ja .rp-heading2-ja { height: 20px; }
.ac-tag {
  display: flex;
  align-items: center;
  height: 32px;
  padding: 0 24px;
  background-color: #ffffff;
  font-family: var(--font-jp);
  font-size: 14px;
  line-height: 1;
  letter-spacing: .05em;
  color: var(--color-text-black);
}
.ac-lead {
  margin: 80px 0 0;
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 24px;
  line-height: 1;
  letter-spacing: .04em;
  color: var(--color-text-black);
}
.ac-body {
  margin: 56px 0 0;
  font-family: var(--font-jp);
  font-size: 16px;
  line-height: 40px;
  letter-spacing: .047em;
  white-space: nowrap;
  color: var(--color-text-black);
}

/* ---- 送迎 ---- */
.ac-shuttle {
  display: flex;
  justify-content: space-between;
  width: 1200px;
  margin-left: 361px;
}
.ac-shuttle__text { width: 520px; }
.ac-shuttle__img {
  width: 601px;
  height: 395px;
  margin-top: 18px;
}
.ac-shuttle__img img,
.ac-parking__img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ac-shuttle + .ss-table { margin-top: 64px; }
.ac-timetable .ss-table__label { width: 288px; }
.ac-times { white-space: pre; }
.ac-note { margin: 24px 0 0 361px; }
.ac-note p {
  margin: 0;
  font-family: var(--font-jp);
  font-size: 16px;
  line-height: 40px;
  letter-spacing: .047em;
  color: var(--color-text-black);
}

/* ---- 駐車場 ---- */
.ac-parking {
  display: flex;
  gap: 80px;
  width: 1200px;
  margin-left: 361px;
}
.ac-parking__img {
  flex-shrink: 0;
  width: 601px;
  height: 396px;
}
.ac-parking__text { width: 520px; margin-top: 10px; }
.ac-linksec .ss-table__label { width: 288px; }

/* ==================== STAY（過ごし方ページ） ==================== */
.st-main { position: relative; padding-bottom: 240px; }
.st-band { width: 100%; }
.st-band--white { background-color: #ffffff; }
.st-band--beige { background-color: var(--color-bg-beige); }
.st-inner {
  position: relative;
  width: 1920px;
  left: 50%;
  margin-left: -960px;
}
.st-band--white .st-inner { padding: 120px 0; }
.st-band--beige + .st-band--beige { }
.st-band--beige .st-inner { padding-bottom: 0; }
.st-band--gap .st-inner { padding-bottom: 80px; }

/* ---- 見出し（DAY） ---- */
.st-daywrap { padding-top: 120px; }
.st-day {
  display: flex;
  align-items: baseline;
  gap: 40px;
  height: 80px;
  margin-left: 361px;
}
.st-day__en {
  margin: 0;
  font-family: var(--font-en);
  font-weight: 400;
  font-size: 80px;
  line-height: 1;
  letter-spacing: .075em;
  color: var(--color-navy);
}
.st-day__ja {
  margin: 0;
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 24px;
  line-height: 1;
  letter-spacing: .04em;
  color: var(--color-text-black);
}
.st-band--beige .st-daywrap:last-child { padding-bottom: 120px; }

/* ---- GIRLS TRIP（導入） ---- */
.st-hero {
  width: 1292px;
  height: 603px;
  margin: 56px 0 0 317px;
}
/* 女子旅・ファミリーはSP用画像の切り替えで<picture>に入っているため、枠の高さを画像まで伝える */
.st-hero picture { display: block; height: 100%; }
.st-hero img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.st-lead {
  margin: 56px 0 0 361px;
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 24px;
  line-height: 1;
  letter-spacing: .04em;
  color: var(--color-text-black);
}
.st-body {
  margin: 56px 0 0;
  font-family: var(--font-jp);
  font-size: 16px;
  line-height: 40px;
  letter-spacing: .047em;
  white-space: nowrap;
  color: var(--color-text-black);
}
.st-body--intro { margin: 44px 0 0 361px; }
.st-body--tight { margin-top: 59px; }

/* ---- タイムライン ---- */
.st-items { padding-top: 120px; }
.st-items--first { padding-top: 0; }
.st-items--last { padding-top: 0; padding-bottom: 120px; }
.st-arrow {
  display: block;
  width: 39px;
  height: 44px;
  margin: 80px auto;
}
.st-item {
  display: flex;
  align-items: flex-start;
}
.st-item--md { width: 1200px; margin-left: 361px; justify-content: space-between; }
.st-item--md .st-item__text { width: 520px; }
.st-item--md .st-item__img { width: 601px; height: 396px; }
.st-item--lg { width: 1601px; margin-left: 160px; }
.st-item--lg:not(.st-item--rev) { padding-left: 201px; }
.st-item--lg .st-item__text { width: 520px; }
.st-item--lg .st-item__img { width: 801px; height: 533px; }
.st-item--lg:not(.st-item--rev) .st-item__img { margin-left: 80px; }
.st-item--lg.st-item--rev .st-item__text { margin-left: 80px; }
.st-item--md.st-item--rev { flex-direction: row; }
.st-item--text { margin-left: 361px; }
.st-item--text .st-item__text { width: 1200px; }
.st-item__img { position: relative; flex-shrink: 0; }
.st-item__img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.st-time {
  display: flex;
  align-items: baseline;
  gap: 40px;
  height: 40px;
}
.st-time__t {
  font-family: var(--font-en);
  font-weight: 400;
  font-size: 40px;
  line-height: 1;
  letter-spacing: .08em;
  color: var(--color-navy);
}
.st-time__h {
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 24px;
  line-height: 1;
  letter-spacing: .04em;
  color: var(--color-text-black);
  white-space: nowrap;
}
.st-label {
  margin: 80px 0 0;
  font-family: var(--font-en);
  font-weight: 400;
  font-size: 20px;
  line-height: 1;
  letter-spacing: .08em;
  color: var(--color-navy);
}
.st-title {
  margin: 24px 0 0;
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 24px;
  line-height: 1;
  letter-spacing: .04em;
  color: var(--color-text-black);
}
.st-title__2 {
  display: block;
  margin-top: 22px;
}
.st-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 180px;
  margin-top: 80px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--color-text-black);
  font-family: var(--font-jp);
  font-size: 16px;
  line-height: 27px;
  letter-spacing: .08em;
  color: var(--color-text-black);
  text-decoration: none;
}
.st-link .rp-arrow { flex-shrink: 0; }

/* ---- 13:30 SPOT ---- */
.st-spot {
  width: 1200px;
  margin: 64px 0 0 361px;
}
.st-spot .st-label { margin-top: 0; }
.st-spot__row {
  display: flex;
  justify-content: space-between;
  margin-top: 24px;
}
.st-spot__row figure { margin: 0; width: 369px; }
.st-spot__img {
  position: relative;
  width: 369px;
  height: 241px;
}
.st-spot__row img {
  display: block;
  width: 369px;
  height: 241px;
  object-fit: cover;
}
.st-credit {
  position: absolute;
  left: 14px;
  bottom: 8px;
  font-family: var(--font-jp);
  font-size: 16px;
  line-height: 1;
  letter-spacing: .05em;
  color: #ffffff;
  /* 明るい写真でも読めるよう影をつける */
  text-shadow: 0 0 6px rgba(0, 0, 0, .6), 0 0 2px rgba(0, 0, 0, .4);
}
.st-spot__row figcaption {
  margin-top: 24px;
  font-family: var(--font-jp);
  font-size: 16px;
  line-height: 27px;
  letter-spacing: .05em;
  color: var(--color-text-black);
}

/* ---- 17:00 CHECK-IN ---- */
.st-item--checkin { width: 1336px; margin-left: 361px; }
.st-item--checkin .st-item__text { width: 663px; }
.st-item__img--tall { width: 673px; height: 929px; margin-top: -200px; }
.st-checkin__pair {
  position: relative;
  width: 663px;
  height: 478px;
  margin: 80px 0 0 -201px;
}
.st-checkin__pair img { position: absolute; display: block; object-fit: cover; }
.st-checkin__a { left: 0; top: 0; width: 449px; height: 321px; }
.st-checkin__b { left: 505px; top: 141px; width: 305px; height: 337px; }

/* ---- 17:15 ROOMS ---- */
.st-item--full { display: block; }
.st-time--full { margin-left: 361px; }
.st-hero--tl { margin-top: 56px; }
.st-rooms {
  display: flex;
  width: 1200px;
  margin: 56px 0 0 361px;
}
.st-rooms__l { width: 487px; }
.st-rooms__l .st-label { margin-top: 0; }
.st-rooms__r {
  margin: 0;
  font-family: var(--font-jp);
  font-size: 16px;
  line-height: 40px;
  letter-spacing: .047em;
  white-space: nowrap;
  color: var(--color-text-black);
}

/* ---- SIGHTSEEING（3ページ共通の最下部セクション） ---- */
.st-band--navy {
  background: var(--color-navy) url(../stay/img/sight-bg.jpg) center / cover no-repeat;
  color: #ffffff;
}
.st-sight .st-inner { padding: 120px 0; }
.st-sight__head {
  display: flex;
  align-items: baseline;
  gap: 40px;
  height: 40px;
  margin-left: 361px;
}
.st-sight__en {
  margin: 0;
  font-family: var(--font-en);
  font-weight: 400;
  font-size: 40px;
  line-height: 1;
  letter-spacing: .08em;
  color: #ffffff;
}
.st-sight__ja {
  margin: 0;
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 24px;
  line-height: 1;
  letter-spacing: .04em;
  color: #ffffff;
}
.st-sight__imgs {
  display: flex;
  justify-content: space-between;
  width: 1201px;
  margin: 56px 0 0 361px;
}
.st-sight__imgs img {
  display: block;
  width: 289px;
  height: 338px;
  object-fit: cover;
}
.st-sight__text {
  margin: 56px 0 0 361px;
  font-family: var(--font-jp);
  font-size: 16px;
  line-height: 40px;
  letter-spacing: .047em;
  white-space: nowrap;
  color: #ffffff;
}
.st-link--white {
  margin: 56px 0 0 361px;
  border-bottom-color: #ffffff;
  color: #ffffff;
}

/* ==================== NEWS（お知らせ：一覧・詳細。WordPress投稿を想定） ==================== */
.nw-main { position: relative; padding-bottom: 240px; }
.nw-canvas {
  position: relative;
  width: 1920px;
  left: 50%;
  margin-left: -960px;
}
.nw-head { position: relative; height: 288px; }
.nw-heading { top: 113px; }
.nw-heading-ja { top: 213px; }

/* ---- 一覧 ---- */
.nw-list {
  width: 1200px;
  margin: 0 0 0 360px;
  padding: 0;
  list-style: none;
}
.nw-list__item a {
  display: flex;
  align-items: center;
  padding: 25px 0 27px;
  border-bottom: 1px solid var(--color-line-gray);
  color: var(--color-text-black);
  text-decoration: none;
  transition: opacity .3s ease;
}
.nw-list__item a:hover { opacity: .4; }
.nw-list__date {
  flex-shrink: 0;
  width: 142px;
  padding-left: 1px;
  font-family: var(--font-en);
  font-size: 16px;
  line-height: 27px;
  letter-spacing: .05em;
  color: var(--color-navy);
}
.nw-list__title {
  flex: 1;
  font-family: var(--font-jp);
  font-size: 16px;
  line-height: 27px;
  letter-spacing: .08em;
  color: var(--color-text-black);
}
.nw-list__item .rp-arrow {
  flex-shrink: 0;
  margin-right: 11px;
  color: var(--color-form-gray);
  position: relative;
  top: 2px;
}
.nw-pager {
  display: flex;
  justify-content: center;
  gap: 18px;
  margin-top: 53px;
}
.nw-pager__num {
  display: block;
  width: 32px;
  padding-bottom: 6px;
  border-bottom: 1px solid transparent;
  font-family: var(--font-en);
  font-size: 18px;
  line-height: 24px;
  text-align: center;
  color: #6b8394;
  text-decoration: none;
  transition: opacity .3s ease;
}
a.nw-pager__num:hover { opacity: .4; }
.nw-pager__num.is-current { color: var(--color-navy); border-bottom-color: var(--color-navy); }

/* ---- 詳細 ---- */
.nw-entry { width: 1200px; margin: 0 0 0 360px; }
.nw-entry__head {
  padding: 26px 0 0;
  border-bottom: 1px solid var(--color-line-gray);
}
.nw-entry__meta { display: flex; align-items: center; }
.nw-entry__date {
  font-family: var(--font-en);
  font-size: 16px;
  line-height: 27px;
  letter-spacing: .05em;
  color: var(--color-navy);
}
.nw-entry__title {
  margin: 20px 0 0;
  padding-bottom: 28px;
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 20px;
  line-height: 27px;
  letter-spacing: .05em;
  color: var(--color-text-black);
}
.nw-entry__content { margin-top: 40px; }
.nw-entry__content p {
  margin: 0;
  font-family: var(--font-jp);
  font-size: 16px;
  line-height: 44px;
  letter-spacing: .047em;
  color: var(--color-text-black);
}
.nw-entry__content img,
.nw-entry__content figure { display: block; margin: 65px auto; }
.nw-entry__content img { max-width: 100%; height: auto; }
.nw-dummy-img { width: 688px; height: 424px; background-color: #cccccc; }
.nw-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 1200px;
  margin: 0 0 0 360px;
  padding-top: 49px;
  border-top: 1px solid var(--color-line-gray);
}
.nw-nav a {
  display: flex;
  align-items: center;
  gap: 23px;
  padding-bottom: 7px;
  font-family: var(--font-jp);
  font-size: 16px;
  line-height: 27px;
  letter-spacing: .08em;
  color: var(--color-text-black);
  text-decoration: none;
  transition: opacity .3s ease;
}
.nw-nav a:hover { opacity: .4; }
.nw-nav .rp-arrow { flex-shrink: 0; color: var(--color-form-gray); }
.nw-nav__prev .rp-arrow { transform: scaleX(-1); }
.nw-entry + .nw-nav { margin-top: 80px; }
/* 前後の記事がない（静的公開中・記事1件）ときは「一覧へ戻る」だけを中央に */
.nw-nav--single { justify-content: center; }

/* ==================== FAQ（よくある質問。WordPress編集を想定） ==================== */
.fq-main { position: relative; padding-bottom: 240px; }
.fq-head { height: 285px; }
.fq-list { width: 1200px; margin: 0 0 0 360px; }
.fq-item { border-bottom: 1px solid var(--color-line-gray); }
.fq-item__q {
  position: relative;
  display: flex;
  align-items: center;
  padding: 32px 0;
  list-style: none;
  cursor: pointer;
}
.fq-item__q::-webkit-details-marker { display: none; }
.fq-item__mark {
  flex-shrink: 0;
  width: 47px;
  font-family: var(--font-en);
  font-size: 28px;
  line-height: 17px;
  color: var(--color-navy);
}
.fq-item__text {
  flex: 1;
  font-family: var(--font-jp);
  font-size: 18px;
  line-height: 17px;
  letter-spacing: .05em;
  color: var(--color-text-black);
}
.fq-item__icon {
  position: relative;
  flex-shrink: 0;
  top: 5px;
  width: 16px;
  height: 16px;
  margin: -16px 15px -16px 0;
}
.fq-item__icon::before,
.fq-item__icon::after {
  content: "";
  position: absolute;
  background-color: var(--color-form-gray);
  transition: transform .3s ease;
}
.fq-item__icon::before { left: 0; top: 7.5px; width: 16px; height: 1px; }
.fq-item__icon::after { left: 7.5px; top: 0; width: 1px; height: 16px; }
.fq-item[open] .fq-item__icon::after { transform: scaleY(0); }
.fq-item__a {
  padding: 20px 33px 18px;
  background-color: #ffffff;
  border-top: 1px solid var(--color-line-gray);
  margin-top: -1px;
}
.fq-item__a p {
  margin: 0;
  font-family: var(--font-jp);
  font-size: 16px;
  line-height: 44px;
  letter-spacing: .047em;
  color: var(--color-text-black);
}
.fq-item[open] > .fq-item__q { }
.fq-item[open] { border-bottom: 0; }
.fq-item[open] .fq-item__q { border-bottom: 1px solid var(--color-line-gray); }
.fq-item[open] .fq-item__a { border-top: 0; margin-top: 0; }

/* ==================== CONTACT（お問い合わせ：フォーム・サンクス。フォームはWPアプリで設置） ==================== */
.ct-main { position: relative; padding-bottom: 240px; }
.ct-head { height: 317px; }
.ct-lead {
  margin: 0 0 0 361px;
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 24px;
  line-height: 1;
  letter-spacing: .04em;
  color: var(--color-text-black);
}
.ct-text { margin: 39px 0 0 361px; }
.ct-text p {
  margin: 0;
  font-family: var(--font-jp);
  font-size: 16px;
  line-height: 40px;
  letter-spacing: .047em;
  color: var(--color-text-black);
}
.ct-form { width: 1200px; margin: 68px 0 0 360px; border-top: 1px solid var(--color-line-gray); }
.ct-row {
  display: flex;
  align-items: center;
  padding: 32px 0;
  border-bottom: 1px solid var(--color-line-gray);
}
.ct-row--area,
.ct-row--top { align-items: flex-start; }
.ct-row__label {
  flex-shrink: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 248px;
  height: 48px;
  margin-right: 32px;
}
.ct-row__label label {
  font-family: var(--font-jp);
  font-size: 16px;
  line-height: 27px;
  letter-spacing: .08em;
  color: var(--color-text-black);
  position: relative;
  top: -2px;
}
.ct-req {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 24px;
  background-color: var(--color-navy);
  font-family: var(--font-jp);
  font-size: 14px;
  line-height: 1;
  letter-spacing: .1em;
  color: #ffffff;
}
.ct-row__field { flex: 1; }
.ct-row__field input,
.ct-row__field textarea {
  display: block;
  width: 100%;
  box-sizing: border-box;
  border: 0;
  border-radius: 0;
  background-color: #ffffff;
  font-family: var(--font-jp);
  font-size: 16px;
  line-height: 27px;
  letter-spacing: .08em;
  color: var(--color-text-black);
  outline: none;
}
.ct-row__field input { height: 48px; padding: 0 24px; }
.ct-row__field textarea { height: 258px; padding: 10px 24px; resize: none; }
.ct-row__field ::placeholder { color: var(--color-line-gray); opacity: 1; }
.ct-row__field input:focus,
.ct-row__field textarea:focus { box-shadow: inset 0 0 0 1px var(--color-navy); }
.ct-submit { display: flex; justify-content: center; margin-top: 80px; }
.ct-submit__btn {
  width: 464px;
  height: 72px;
  border: 1px solid var(--color-btn-line);
  border-radius: 0;
  background-color: var(--color-btn-search-fill);
  font-family: var(--font-jp);
  font-size: 18px;
  letter-spacing: .1em;
  color: #ffffff;
  cursor: pointer;
  transition: opacity .3s ease;
}
.ct-submit__btn:hover { opacity: .4; }
/* 入力欄の下の注意書き（メールアドレス） */
.ct-field-notes { margin: 16px 0 0; padding: 0; list-style: none; }
.ct-field-notes li {
  padding-left: 1em;
  text-indent: -1em;
  font-family: var(--font-jp);
  font-size: 14px;
  line-height: 24px;
  letter-spacing: .04em;
  color: var(--color-text-black);
}
.ct-notes { margin: 44px 0 0 361px; }
.ct-notes p {
  margin: 0;
  font-family: var(--font-jp);
  font-size: 16px;
  line-height: 40px;
  letter-spacing: .047em;
  color: var(--color-text-black);
}
.ct-phone { margin: 113px 0 0 360px; width: 1200px; }
.ct-phone__head { display: flex; align-items: baseline; gap: 37px; padding-left: 4px; }
.ct-phone__en {
  margin: 0;
  font-family: var(--font-en);
  font-weight: 400;
  font-size: 20px;
  line-height: 1;
  letter-spacing: .08em;
  color: var(--color-navy);
}
.ct-phone__ja {
  margin: 0;
  font-family: var(--font-jp);
  font-size: 16px;
  line-height: 1;
  letter-spacing: .08em;
  color: var(--color-text-black);
}
.ct-phone__box {
  display: flex;
  justify-content: center;
  align-items: baseline;
  height: 102px;
  margin-top: 24px;
  padding-top: 30px;
  box-sizing: border-box;
  background-color: #ffffff;
}
.ct-phone__brand { font-family: var(--font-en); font-size: 14px; letter-spacing: .06em; color: var(--color-navy); }
.ct-phone__name { margin-left: 22px; font-family: var(--font-jp); font-size: 20px; letter-spacing: .08em; color: var(--color-navy); }
.ct-phone__tel { margin-left: 45px; color: var(--color-text-black); text-decoration: none; }
.ct-phone__tel-label { font-family: var(--font-jp); font-size: 16px; letter-spacing: .05em; }
.ct-phone__tel-num { margin-left: 7px; font-family: var(--font-jp); font-size: 24px; letter-spacing: .08em; }

/* ---- 右下固定ボタン：下層ページはFVがないため通常のfixed位置をそのまま利用 ---- */
.rp-actions {}

/* ==================================================================
   SP（トップページのみ）：767px以下
   ・デザインカンプ幅 390px 基準。
   ・PC版（768px以上）には影響しないよう、すべてこのメディアクエリ内に記述。
================================================================== */
@media (max-width: 767px) {

  /* ---- ① ヘッダー・ハンバーガー・下部固定ボタン ---- */
  body:is(.top, .rp-body) { padding-bottom: 72px; }

  /* PC版のグロナビ（横並び）・固定ロゴは廃止 */
  body.top .fv-lang,
  body.top .fv-gnav__list,
  body:is(.top, .rp-body) .fixed-header__list,
  body.top .fixed-logo { display: none; }

  /* FV上のハンバーガー（線のみ・#1A1311）：上24px／右24px */
  body.top .fv-gnav {
    top: 24px;
    right: 24px;
    z-index: 1001;
  }
  body.top .fv-gnav__hamburger {
    width: 41px;
    height: 20px;
    margin-left: 0;
  }
  body.top .fv-gnav__hamburger span,
  body:is(.top, .rp-body) .fixed-header__hamburger span {
    left: 0;
    width: 100%;
    height: 1px;
    background: var(--color-text-black);
  }
  body.top .fv-gnav__hamburger span:nth-child(1),
  body:is(.top, .rp-body) .fixed-header__hamburger span:nth-child(1) { top: 2px; bottom: auto; }
  body.top .fv-gnav__hamburger span:nth-child(2),
  body:is(.top, .rp-body) .fixed-header__hamburger span:nth-child(2) { top: 9.8px; margin-top: 0; bottom: auto; }
  body.top .fv-gnav__hamburger span:nth-child(3),
  body:is(.top, .rp-body) .fixed-header__hamburger span:nth-child(3) { top: 17.6px; bottom: auto; }

  /* スクロール後：ハンバーガーのみ固定。ベージュの枠（線の上下左右10px） */
  body:is(.top, .rp-body) .fixed-header {
    height: 0;
    background: none;
  }
  body:is(.top, .rp-body) .fixed-header__nav {
    top: 16px;
    right: 14px;
  }
  body:is(.top, .rp-body) .fixed-header__hamburger {
    position: relative;
    width: 61px;
    height: 36px;
    margin: 0;
    background-color: var(--color-bg-beige);
  }
  body:is(.top, .rp-body) .fixed-header__hamburger span {
    left: 10px;
    width: 41px;
  }
  body:is(.top, .rp-body) .fixed-header__hamburger span:nth-child(1) { top: 10px; }
  body:is(.top, .rp-body) .fixed-header__hamburger span:nth-child(2) { top: 17.8px; }
  body:is(.top, .rp-body) .fixed-header__hamburger span:nth-child(3) { top: 25.6px; }

  /* 下部固定ボタン：常時表示・2分割フル幅 */
  body:is(.top, .rp-body) .fv-actions {
    left: 0;
    right: 0;
    bottom: 0;
    gap: 0;
  }
  body:is(.top, .rp-body) .fv-btn {
    flex: 1 1 50%;
    width: 50%;
    height: 72px;
  }
  /* 2つのボタンの境界線が2本(2px)に見えないよう、右ボタンの左枠を消して1pxにする */
  body:is(.top, .rp-body) .fv-btn--reserve { border-left-width: 0; }

  /* FVの高さ：iOS Safari等では100vhがアドレスバー等の下まで含むため、
     見えている範囲(svh)に合わせる（非対応ブラウザは100vh） */
  body.top .fv {
    /* 最上部の Language 帯（35px）と下部固定ボタン（72px）を除いた高さ */
    height: calc(100vh - 72px - 35px);
    height: calc(100svh - 72px - 35px);
    min-height: 533px;
  }

  /* ---- Language（ページ最上部の帯。タップで下に言語一覧を重ねて開く）---- */
  body.top .sp-lang {
    display: block;
    position: relative;
    z-index: 1003;
  }
  body.top .sp-lang__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    width: 100%;
    height: 35px;
    padding: 0;
    border: 0;
    background-color: var(--color-text-black);
    font-family: var(--font-en);
    font-size: 16px;
    line-height: 1;
    letter-spacing: .07em;
    color: var(--color-text-white);
    cursor: pointer;
  }
  body.top .sp-lang__icon { display: block; flex-shrink: 0; }
  body.top .sp-lang__list {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, visibility 0s linear .25s;
  }
  body.top .sp-lang.is-open .sp-lang__list {
    opacity: 1;
    visibility: visible;
    transition: opacity .25s ease;
  }
  body.top .sp-lang__list li { border-bottom: 1px solid #6A6665; }
  body.top .sp-lang__list a {
    display: block;
    height: 34px;
    background-color: #DFDFDF;
    font-family: var(--font-jp);
    font-size: 14px;
    line-height: 34px;
    letter-spacing: .08em;
    text-align: center;
    color: var(--color-text-black);
  }

  /* FV中央テキスト：折り返さず、キャッチコピーは2行（由布岳のふもと、／心ほどける時間） */
  body.top .fv-text { white-space: nowrap; }
  body:is(.top, .rp-body) .br-sp { display: inline; }
  /* ロゴ・英語表記・リード文の位置（デザインは画面中央より上） */
  body.top .fv-text { top: 141px; }
  body.top .fv-text__en {
    margin-top: 26px;
    letter-spacing: .08em;
    text-indent: .08em;
  }
  body.top .fv-text__lead {
    margin-top: 17px;
    line-height: 49px;
    letter-spacing: .05em;
  }

  /* ---- ② ファーストビュー ---- */
  /* SP用に縦長でクロップしたFV画像（PC用はインライン指定のため !important で上書き） */
  /* 文字の視認性確保用：画像の上(文字の下)に薄い黒のグラデーション */
  body.top .fv-slider::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(0, 0, 0, .08) 0%, rgba(0, 0, 0, .18) 45%, rgba(0, 0, 0, .28) 100%);
  }
  body.top .fv-slide:nth-child(1) { background-image: url(../img/fv-sp-01.jpg) !important; }
  body.top .fv-slide:nth-child(2) { background-image: url(../img/fv-sp-02.jpg) !important; }
  body.top .fv-slide:nth-child(3) { background-image: url(../img/fv-sp-03.jpg) !important; }
  body.top .fv-slide:nth-child(4) { background-image: url(../img/fv-sp-04.jpg) !important; }
  body.top .fv-slide:nth-child(5) { background-image: url(../img/fv-sp-05.jpg) !important; }

  /* ページネーション「01——05」・SCROLL：PC版と同じ仕様（PC 1920px時の実寸値） */
  body.top .fv-scroll__pager { font-size: 16px; letter-spacing: .05em; }
  body.top .fv-scroll__current { font-size: 16px; }
  body.top .fv-scroll__line {
    width: 72px;
    height: 1px;
    margin: 0 11px 0 6.8px;
    position: relative;
    top: -5.3px;
    background: #fff;
  }
  body.top .fv-scroll__label {
    margin-top: 0;
    letter-spacing: .06em;
  }
  body.top .fv-scroll__arrow { margin-left: 7.5px; }

  /* 小さい画面でも詰まらないよう、ページネーションは左、SCROLLは右に振り分ける。
     左右32px、数字・SCROLLの下端はFVの下端から24px上 */
  body.top .fv-scroll {
    left: 32px;
    right: 32px;
    bottom: 18px;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
  }

  /* メニュー（フルスクリーン・縦積み） */
  body:is(.top, .rp-body) .menu-overlay {
    display: block;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  body:is(.top, .rp-body) .menu-close {
    top: 20px;
    right: 24px;
    width: 29px;
    height: 29px;
  }
  body:is(.top, .rp-body) .menu-inner {
    display: block;
    padding: 39px 0 80px 33px;
  }
  body:is(.top, .rp-body) .menu-logo img {
    width: 49px;
  }
  body:is(.top, .rp-body) .menu-nav {
    margin: 63px 0 0 9px;
  }
  body:is(.top, .rp-body) .menu-nav__col:first-child {
    width: 198px;
    margin-right: 0;
  }
  body:is(.top, .rp-body) .menu-nav__col:last-child {
    width: 130px;
  }
  body:is(.top, .rp-body) .menu-nav__col li + li { margin-top: 0; }
  body:is(.top, .rp-body) .menu-nav__col a {
    height: 50px;
    line-height: 50px;
    letter-spacing: .05em;
  }
  body:is(.top, .rp-body) .menu-side {
    flex-direction: column-reverse;
    margin: 32px 0 0 5px;
  }
  body:is(.top, .rp-body) .menu-insta {
    order: 2;
    margin: 0 0 16px;
  }
  body:is(.top, .rp-body) .lang-links--menu {
    order: 1;
    margin: 0 0 56px;
  }
  body:is(.top, .rp-body) .lang-links { font-size: 12px; line-height: 26px; letter-spacing: .02em; }
  body:is(.top, .rp-body) .lang-links--footer { margin-top: 16px; }
  body:is(.top, .rp-body) .menu-reserve {
    width: 310px;
    height: 84px;
  }

  /* ==================================================================
     ③ STORIES 〜 LOCATION（縦1カラム）
     文字は固定px。本文16px／字間.047em／幅310px(左右40px)
     ================================================================== */
  body:is(.top, .rp-body) { --sp-r: max(15px, calc(100vw - 350px)); }
  body:is(.top, .rp-body) .br-pc { display: none; }
  /* 行末の「、」「。」のぶら下がり（デザインの折り返しに合わせる） */
  body.top .hang { display: inline-block; width: 0; white-space: nowrap; }
  body:is(.top, .rp-body) { overflow-x: hidden; }

  /* ---- STORIES ---- */
  body.top .curtain { position: static; }
  body.top .stories {
    position: relative;
    top: auto;
    height: auto;
    padding: 61.6px 0 153px;
  }
  body.top .stories-bg__slide { background-attachment: scroll; }
  body.top .stories-bg__slide:nth-child(1) { background-image: url(../img/fv-sp-01.jpg) !important; }
  body.top .stories-bg__slide:nth-child(2) { background-image: url(../img/fv-sp-02.jpg) !important; }
  body.top .stories-bg__slide:nth-child(3) { background-image: url(../img/fv-sp-03.jpg) !important; }
  body.top .stories-bg__slide:nth-child(4) { background-image: url(../img/fv-sp-04.jpg) !important; }
  body.top .stories-bg__slide:nth-child(5) { background-image: url(../img/fv-sp-05.jpg) !important; }
  body.top .stories-canvas {
    width: auto;
    left: 0;
    margin-left: 0;
    height: auto;
  }
  body.top .stories-inner { height: auto; }
  body.top .stories-text {
    position: static;
    width: auto;
    padding: 0 var(--sp-r) 0 40px;
  }
  body.top .stories-heading {
    font-size: 56px;
    line-height: 84px;
    letter-spacing: .08em;
  }
  body.top .stories-lead {
    margin-top: 1.4px;
    font-size: 28px;
    line-height: 46px;
    letter-spacing: .05em;
  }
  body.top .stories-body { margin-top: 40.7px; }
  body.top .stories-body p {
    line-height: 44px;
    letter-spacing: .047em;
  }
  body.top .stories-photo {
    position: relative;
    right: auto;
    top: auto;
    width: 338px;
    height: 480.5px;
    margin: 52.8px 0 0 26px;
  }

  /* ---- 旅館 由布山という旅のかたち ---- */
  body.top .about {
    display: flex;
    flex-direction: column;
    height: auto;
    padding-top: 67.2px;
  }
  body.top .about-ghostwrap {
    left: 0;
    width: 100%;
    margin-left: 0;
  }
  body.top .about-ghost {
    left: 0;
    top: -115px;
    width: 100%;
    font-size: 68px;
    line-height: 63.6px;
    letter-spacing: .08em;
    text-align: center;
    white-space: normal;
  }
  body.top .about-canvas {
    order: 1;
    width: auto;
    left: 0;
    margin-left: 0;
    height: auto;
  }
  body.top .about-text {
    position: static;
    width: auto;
    height: auto;
    padding: 0 var(--sp-r) 0 40px;
    background: none;
  }
  body.top .about-heading {
    line-height: 46px;
    letter-spacing: .01em;
  }
  body.top .about-body {
    width: auto;
    margin-top: 16.4px;
  }
  body.top .about-body p {
    line-height: 40px;
    letter-spacing: .047em;
  }
  body.top .about-marquee {
    order: 2;
    position: relative;
    left: auto;
    top: auto;
    flex: none;
    height: 346.4px;
    margin-top: 52.8px;
  }
  /* PCの80%サイズ（画像・余白・流れる距離とも） */
  body.top .about-track {
    margin-left: -53.6px;
    animation-name: aboutFlowSp;
  }
  @keyframes aboutFlowSp {
    from { transform: translateX(0); }
    to   { transform: translateX(-2822.4px); }
  }
  body.top .about-item { margin-right: 19.2px; }
  body.top .about-item--tall { width: 237.6px; }
  body.top .about-item--tall:nth-child(8n+5) { width: 276px; }
  body.top .about-item--wide { width: 500px; }
  body.top .about-item--small {
    width: 288.8px;
    height: 250.4px;
  }

  /* ---- 見出し・リード・本文（ROOMS／CUISINE／FACILITIES／LOCATION 共通） ---- */
  body.top .rooms-canvas,
  body.top .cuisine-canvas,
  body.top .facilities-canvas,
  body.top .location-canvas {
    display: flex;
    flex-direction: column;
    width: auto;
    left: 0;
    margin-left: 0;
    height: auto;
  }
  body.top .rooms,
  body.top .cuisine,
  body.top .facilities,
  body.top .location { height: auto; }

  body.top .rooms-heading,
  body.top .cuisine-heading,
  body.top .facilities-heading,
  body.top .location-heading {
    position: static;
    margin: 67px var(--sp-r) 0 40px;
    font-size: 48px;
    line-height: 72px;
    letter-spacing: .08em;
  }
  body.top .rooms-heading-ja,
  body.top .cuisine-heading-ja,
  body.top .facilities-heading-ja,
  body.top .location-heading-ja {
    position: static;
    margin: 0 var(--sp-r) 0 40px;
    font-size: 28px;
    line-height: 46px;
    letter-spacing: .05em;
  }
  body.top .rooms-lead,
  body.top .cuisine-lead,
  body.top .facilities-lead,
  body.top .location-lead {
    position: static;
    margin: 35.7px var(--sp-r) 0 40px;
    font-size: 24px;
    line-height: 46px;
    letter-spacing: .05em;
  }
  body.top .rooms-intro,
  body.top .cuisine-text,
  body.top .facilities-text,
  body.top .location-text {
    position: static;
    width: auto;
    margin: 14.8px var(--sp-r) 0 40px;
  }
  body.top .rooms-intro p,
  body.top .cuisine-text p,
  body.top .facilities-text p,
  body.top .location-text p {
    line-height: 40px;
    letter-spacing: .047em;
  }
  /* 矢印付き下線リンク */
  body.top .rooms-link,
  body.top .cuisine-link,
  body.top .facilities-link {
    position: static;
    margin: 48px 0 0 40px;
    letter-spacing: .05em;
  }

  /* ---- ROOMS ---- */
  body.top .rooms-heading { margin-top: 69.7px; }
  body.top .cuisine-heading { margin-top: 63.2px; }
  body.top .facilities-heading { margin-top: 63.3px; }
  body.top .rooms-intro { margin-top: 15.7px; }
  body.top .cuisine-text { margin-top: 14.6px; }
  body.top .rooms-main {
    position: static;
    width: 100%;
    height: 528.5px;
    margin-top: 52.2px;
  }
  body.top .rooms-main--town { margin-top: 63.5px; }
  body.top .rooms-main img { object-position: 49% center; }
  body.top .rooms-main--town img { object-position: 21% center; }
  body.top .rooms-info {
    position: static;
    width: auto;
    margin: 46.1px var(--sp-r) 0 40px;
  }
  body.top .rooms-en {
    font-size: 40px;
    line-height: 56px;
    letter-spacing: .08em;
  }
  body.top .rooms-label {
    margin-top: 2.6px;
    line-height: 27px;
    letter-spacing: .05em;
  }
  body.top .rooms-text {
    width: auto;
    margin-top: 38.2px;
  }
  body.top .rooms-text p {
    line-height: 40px;
    letter-spacing: .047em;
  }
  body.top .rooms-thumbs {
    position: relative;
    left: auto;
    top: auto;
    display: block;
    flex: none;
    width: 310px;
    height: 448.5px;
    margin: 26.3px 0 0 40px;
  }
  body.top .rooms-thumbs img {
    width: 100%;
    height: 224.25px;
  }
  body.top .rooms-thumbs--mountain img:nth-of-type(1) { object-position: 60% 70%; }
  body.top .rooms-thumbs--mountain img:nth-of-type(2) { object-position: 42% 78%; }
  body.top .rooms-thumbs--town img:nth-of-type(1) { object-position: 74% 57%; }
  body.top .rooms-thumbs--town img:nth-of-type(2) { object-position: 67% 97%; }
  body.top .rooms-link { margin-top: 57.7px; }

  /* ---- CUISINE ---- */
  body.top .cuisine-heading { order: 1; }
  body.top .cuisine-heading-ja { order: 2; }
  body.top .cuisine-lead { order: 3; }
  body.top .cuisine-text { order: 4; }
  body.top .cuisine-main {
    order: 5;
    position: static;
    width: 100%;
    height: 528.5px;
    margin-top: 54.5px;
  }
  body.top .cuisine-main img { object-position: 65% center; }
  body.top .cuisine-link { order: 6; margin-top: 55.2px; }

  /* ---- FACILITIES ---- */
  body.top .facilities-heading { order: 1; }
  body.top .facilities-heading-ja { order: 2; }
  body.top .facilities-lead { order: 3; }
  body.top .facilities-text { order: 4; }
  body.top .facilities-main {
    order: 5;
    position: static;
    width: 325.5px;
    height: 448.5px;
    margin: 56.7px 0 0 auto;
  }
  body.top .facilities-sub {
    order: 6;
    position: relative;
    left: auto;
    top: auto;
    width: 241px;
    height: 234.5px;
    margin: -24.5px 0 0 0;
  }
  body.top .facilities-sub img { object-position: 18% center; }
  body.top .facilities-link { order: 7; margin-top: 55.2px; }

  /* ---- LOCATION ---- */
  body.top .location { overflow: hidden; }
  body.top .location-band { display: none; }
  body.top .location-heading { order: 1; margin-top: 56.7px; }
  body.top .location-heading-ja { order: 2; }
  body.top .location-lead { order: 3; }
  body.top .location-text { order: 4; }
  body.top .location-main {
    order: 5;
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    height: 444px;
    margin-top: 54.3px;
  }
  body.top .location-main img {
    position: relative;
    z-index: 2;
    object-position: 53% center;
  }
  /* 写真の下端から下を白背景に */
  body.top .location-main::before {
    content: "";
    position: absolute;
    left: 0;
    top: 100%;
    width: 100%;
    height: 3000px;
    background: var(--color-text-white);
    z-index: -1;
  }
  body.top .location-map {
    order: 6;
    position: relative;
    z-index: 1;
    flex: none;
    left: auto;
    top: auto;
    margin: -47.5px 0 0 17.5px;
  }
  body.top .location-map__small { letter-spacing: .05em; }
  body.top .location-map__en { top: 131px; }
  body.top .sight-heading { order: 7; position: static; margin: 40px var(--sp-r) 0 40px; }
  body.top .sight-sub { order: 8; position: static; margin: 0 var(--sp-r) 0 40px; }
  body.top .sight-marquee { order: 9; position: relative; left: auto; top: auto; width: 100%; margin-top: 30px; height: 468px; }
  /* SIGHTSEEINGの画像はPCの90%（文字サイズは変更なし） */
  body.top .sight-track { animation-name: sightFlowSp; }
  @keyframes sightFlowSp {
    from { transform: translateX(0); }
    to   { transform: translateX(-1389.6px); }
  }
  body.top .sight-item {
    width: 318.6px;
    margin-right: 28.8px;
  }
  body.top .sight-item:nth-child(even) { margin-top: 57.6px; }
  body.top .sight-item img {
    width: 318.6px;
    height: 374.4px;
  }
  body.top .location-link { order: 10; position: static; margin: 40px 0 0 40px; }

  /* ==================================================================
     ④ SIGHTSEEING〜フッター直前（STAY／PLAN／NEWS）＋スワイプ操作
     ================================================================== */
  /* 流れるスライダー（旅のかたち／SIGHTSEEING）：CSSアニメをやめ、
     横スクロール可能な領域にして js が自動で流す（指で送れる） */
  body.top .about-marquee,
  body.top .sight-marquee {
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  body.top .about-marquee::-webkit-scrollbar,
  body.top .sight-marquee::-webkit-scrollbar { display: none; }
  body.top .about-track {
    margin-left: 0;
    animation: none;
  }
  body.top .sight-track { animation: none; }

  /* SIGHTSEEING〜リンク */
  body.top .sight-heading { margin-top: 45.2px; }
  body.top .sight-marquee { margin-top: 49.2px; }
  body.top .location { padding-bottom: 80px; }
  body.top .location-link {
    margin: 44.6px 0 0 42px;
    letter-spacing: .05em;
  }
  body.top .location-link--sight { margin-top: 26.3px; }

  /* ---- STAY ---- */
  body.top .stay {
    height: auto;
    padding-bottom: 79px;
  }
  body.top .stay-canvas {
    display: flex;
    flex-direction: column;
    width: auto;
    left: 0;
    margin-left: 0;
    height: auto;
  }
  body.top .stay-heading {
    position: static;
    margin: 62.1px var(--sp-r) 0 41.5px;
    font-size: 48px;
    line-height: 72px;
    letter-spacing: .08em;
  }
  body.top .stay-heading-ja {
    position: static;
    margin: -0.2px var(--sp-r) 0 41.5px;
    font-size: 28px;
    line-height: 46px;
    letter-spacing: .05em;
  }
  body.top .stay-lead {
    position: static;
    margin: 35.8px var(--sp-r) 0 41.5px;
    font-size: 24px;
    line-height: 46px;
    letter-spacing: .05em;
  }
  /* カルーセル（次のカードが少し見える／非アクティブは40%） */
  body.top .stay-viewport,
  body.top .plan-viewport {
    position: relative;
    display: flex;
    flex: none;
    gap: 24px;
    width: 100%;
    padding-left: 41.5px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-padding-left: 41.5px;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  body.top .stay-viewport::-webkit-scrollbar,
  body.top .plan-viewport::-webkit-scrollbar { display: none; }
  body.top .stay-viewport { margin-top: 50.7px; }
  body.top .stay-card,
  body.top .plan-card {
    position: relative;
    left: auto;
    top: auto;
    flex: 0 0 310.5px;
    width: 310.5px;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    opacity: .4;
    transition: opacity .4s ease;
  }
  body.top .stay-card.is-active,
  body.top .plan-card.is-active { opacity: 1; }
  body.top .stay-card img {
    width: 310.5px;
    height: 468.5px;
  }
  body.top .stay-en {
    margin-top: 26.3px;
    letter-spacing: .08em;
  }
  body.top .stay-label {
    margin-top: 1.4px;
    letter-spacing: .05em;
  }
  body.top .stay-text { margin-top: 19.1px; }
  /* ページネーション（01——03） */
  body.top .sp-pager {
    display: flex;
    align-items: baseline;
    margin: 20.3px 0 0 41.5px;
    font-family: var(--font-en);
    color: var(--color-navy);
  }
  body.top .sp-pager__current {
    font-size: 27.8px;
    line-height: 1;
    letter-spacing: .08em;
  }
  body.top .sp-pager__line {
    display: inline-block;
    width: 72px;
    height: 0;
    margin: 0 11px 4.5px 3.8px;
    border-top: 1px solid currentColor;
  }
  body.top .sp-pager__total {
    font-size: 16px;
    line-height: 1;
    letter-spacing: .08em;
  }
  body.top .stay-link {
    position: static;
    margin: 44px 0 0 42px;
    letter-spacing: .05em;
  }

  /* ---- PLAN ---- */
  body.top .plan {
    height: auto;
    padding-bottom: 80px;
  }
  body.top .plan-canvas {
    display: flex;
    flex-direction: column;
    width: auto;
    left: 0;
    margin-left: 0;
    height: auto;
  }
  body.top .plan-heading {
    position: static;
    margin: 71.4px var(--sp-r) 0 41.5px;
    line-height: 56px;
  }
  body.top .plan-heading-ja {
    position: static;
    margin: 2.5px var(--sp-r) 0 41.5px;
    font-size: 20px;
    line-height: 33px;
    letter-spacing: .05em;
  }
  body.top .plan-viewport { margin-top: 49.7px; }
  body.top .plan-card img {
    width: 310.5px;
    height: 233px;
  }
  body.top .plan-card__title {
    width: auto;
    margin-top: 15.8px;
    letter-spacing: .1em;
  }
  body.top .plan-pager {
    color: var(--color-text-white);
    margin-top: 12.1px;
  }
  body.top .plan-btn {
    position: static;
    left: auto;
    top: auto;
    flex: none;
    flex-direction: column;
    width: 310.5px;
    height: 84px;
    margin: 51px 0 0 41.5px;
    justify-content: flex-start;
    padding-top: 22.4px;
  }
  body.top .plan-btn__en {
    margin: 0 0 6.5px;
    line-height: 1;
  }

  /* ---- NEWS ---- */
  body.top .news {
    height: auto;
    padding-bottom: 120px;
  }
  body.top .news-canvas {
    display: flex;
    flex-direction: column;
    width: auto;
    left: 0;
    margin-left: 0;
    height: auto;
    padding: 0;
  }
  body.top .news-heading {
    position: static;
    margin: 65.9px var(--sp-r) 0 41.5px;
  }
  body.top .news-heading-ja {
    position: static;
    margin: 1px var(--sp-r) 0 41.5px;
  }
  body.top .news-list {
    position: static;
    flex: none;
    width: 310.5px;
    margin: 26.3px 0 0 41.5px;
  }
  body.top .news-list a {
    flex-wrap: wrap;
    height: auto;
    padding: 18px 0;
  }
  body.top .news-date {
    flex: 0 0 100%;
    width: auto;
    letter-spacing: .08em;
  }
  body.top .news-title {
    flex: 1;
    margin: 4.1px 16px 0 0;
    line-height: 24px;
  }
  body.top .news-arrow { margin-right: 1.5px; }
  body.top .news-link {
    position: static;
    margin: 50.8px 0 0 42px;
    letter-spacing: .05em;
  }

  /* マウスでドラッグして送れる（狭いPCブラウザ用）。ドラッグ中はスナップ・選択を止める */
  body.top .about-marquee,
  body.top .sight-marquee,
  body.top .stay-viewport,
  body.top .plan-viewport { cursor: grab; }
  body.top .is-dragging {
    cursor: grabbing;
    scroll-snap-type: none;
    user-select: none;
  }
  body.top .about-marquee img,
  body.top .sight-marquee img,
  body.top .stay-viewport img,
  body.top .plan-viewport img { -webkit-user-drag: none; }

  /* ==================================================================
     ⑤ フッター・空室検索（縦1カラム）
     ================================================================== */
  /* ---- フッター（ナビリンクなし） ---- */
  body:is(.top, .rp-body) .site-footer {
    width: 100%;
    left: 0;
    margin-left: 0;
    height: auto;
    min-height: 589px;
    padding-bottom: 50.9px;
  }
  body:is(.top, .rp-body) .footer-bg1 { background-image: url(../common/footer-sp-back.jpg) !important; }
  body:is(.top, .rp-body) .footer-bg2,
  body:is(.top, .rp-body) .footer-nav { display: none; }
  body:is(.top, .rp-body) .footer-info {
    position: relative;
    left: auto;
    top: auto;
    padding: 77.5px 0 0 42px;
  }
  body:is(.top, .rp-body) .footer-info__en {
    line-height: 20px;
    letter-spacing: .04em;
  }
  body:is(.top, .rp-body) .footer-info__name {
    margin-top: 8.4px;
    line-height: 30px;
    letter-spacing: .05em;
  }
  body:is(.top, .rp-body) .footer-info__address {
    margin-top: 19.6px;
    font-size: 15px;
    line-height: 30px;
    letter-spacing: .04em;
  }
  body:is(.top, .rp-body) .footer-info__tel {
    margin-top: 0;
    font-size: 15px;
    line-height: 30px;
    letter-spacing: .04em;
  }
  body:is(.top, .rp-body) .footer-info__tel-link { pointer-events: auto; }
  body:is(.top, .rp-body) .footer-info__insta { margin-top: 23.3px; }
  body:is(.top, .rp-body) .footer-info__insta svg { margin-left: 3px; }
  body:is(.top, .rp-body) .footer-reserve {
    position: relative;
    left: auto;
    top: auto;
    width: 310px;
    height: 84px;
    margin: 59.1px 0 0 42px;
    justify-content: flex-start;
    padding-top: 22.4px;
  }
  body:is(.top, .rp-body) .footer-reserve__en { letter-spacing: .08em; }
  body:is(.top, .rp-body) .footer-reserve__ja {
    margin-top: 6.5px;
    letter-spacing: .05em;
  }
  body:is(.top, .rp-body) .footer-copyright {
    position: relative;
    left: auto;
    top: auto;
    margin-top: 54.3px;
    text-align: center;
    letter-spacing: .06em;
  }

  /* ---- 空室検索（縦積み）---- */
  body:is(.top, .rp-body) .search-overlay {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  body:is(.top, .rp-body) .search-inner {
    width: 100%;
    max-width: 390px;
    margin: auto;
    padding-top: 0;
    padding-bottom: 80px;
  }
  body:is(.top, .rp-body) .search-heading {
    margin: 0;
    gap: 21.2px;
    padding-top: 68.4px;
  }
  body:is(.top, .rp-body) .search-heading__en { line-height: 24px; }
  body:is(.top, .rp-body) .search-heading__ja {
    position: relative;
    top: 2px;
    font-size: 20px;
    line-height: 30px;
    letter-spacing: .05em;
  }
  body:is(.top, .rp-body) .search-panel {
    width: 310px;
    margin: 27px auto 0;
    padding: 58.9px 0 63.5px;
  }
  body:is(.top, .rp-body) .search-fields {
    flex-wrap: wrap;
    align-items: flex-start;
  }
  body:is(.top, .rp-body) .search-field { flex: none; }
  body:is(.top, .rp-body) .search-field--date,
  body:is(.top, .rp-body) .search-field--adults { flex: 0 0 100%; box-sizing: border-box; }
  body:is(.top, .rp-body) .search-field--date {
    display: grid;
    grid-template-columns: 1fr auto;
    margin: 0;
    padding: 0 41.9px 0 40.1px;
  }
  body:is(.top, .rp-body) .search-field--date .search-field__row { display: contents; }
  body:is(.top, .rp-body) .search-cal { left: 50%; margin-left: -165px; padding: 22px 12px 16px; width: 330px; box-sizing: border-box; }
  body:is(.top, .rp-body) .search-cal__grid { grid-template-columns: repeat(7, 43px); }
  body:is(.top, .rp-body) .search-cal__day { width: 40px; height: 40px; margin: 0 auto; }
  body:is(.top, .rp-body) .search-cal__nav { top: 20px; }
  body:is(.top, .rp-body) .search-cal__nav--prev { left: 12px; }
  body:is(.top, .rp-body) .search-cal__nav--next { right: 12px; }
  body:is(.top, .rp-body) .search-field--date .search-field__label { grid-column: 1 / 3; grid-row: 1; }
  body:is(.top, .rp-body) .search-field--date .search-field__date { grid-column: 1; grid-row: 2; width: 100%; min-width: 0; padding: 0; font-size: 34px; letter-spacing: .05em; }
  body:is(.top, .rp-body) .search-field--date .search-field__calendar { grid-column: 2; grid-row: 2; margin: 0 0 0 8px; align-self: center; }
  body:is(.top, .rp-body) .search-field--date .search-field__line { grid-column: 1 / 3; grid-row: 3; }
  body:is(.top, .rp-body) .search-field--date .search-field__checkbox { grid-column: 1 / 3; grid-row: 4; margin: 13.1px 0 0; justify-self: start; }
  body:is(.top, .rp-body) .search-field--nights { width: 104px; margin: 25.7px 0 0 35.4px; }
  body:is(.top, .rp-body) .search-field--rooms { width: 104px; margin: 25.7px 0 0 37.4px; }
  body:is(.top, .rp-body) .search-field--adults { margin: 24.2px 0 0 0; padding: 0 169.2px 0 36.8px; }
  body:is(.top, .rp-body) .search-field__line { margin-top: 0; }
  body:is(.top, .rp-body) .search-field__label {
    margin-bottom: 5.2px;
    letter-spacing: .05em;
  }
  body:is(.top, .rp-body) .search-field__select {
    width: 58px;
    padding: 0 0 0 4px;
    font-size: 34px;
  }
  body:is(.top, .rp-body) .search-field__unit {
    margin-left: 24px;
    letter-spacing: .05em;
  }
  body:is(.top, .rp-body) .search-submit {
    width: 244px;
    margin: 39px 0 0 36.3px;
    letter-spacing: .05em;
  }
}

/* ==================================================================
   SP（下層ページ）：767px以下
   ・共通シェル（ハンバーガー・下部固定ボタン・メニュー・空室検索・フッター）は
     上のSPブロックの body:is(.top, .rp-body) 指定を共用。
   ・ここは下層ページ冒頭（タイトル画像・見出し・リード・イントロ・ジャンプナビ）。
   ・本文セクションはSPデザイン到着まで非表示（SP用デザイン待ち）。
================================================================== */
@media (max-width: 767px) {
  body.rp-body .sp-only { display: inline; }

  /* ロゴ：固定をやめ、ページ先頭の左上に置く */
  body.rp-body .fixed-logo {
    position: absolute;
    top: 20px;
    left: 20px;
    opacity: 1;
    pointer-events: auto;
  }
  body.rp-body .fixed-logo img { width: 50px; }

  /* タイトル画像（スマホ用：右寄せ 304×262） */
  body.rp-body .rp-title {
    padding: 65.5px 0 0 86px;
  }
  body.rp-body .rp-title img {
    display: block;
    width: 304px;
    height: 262px;
    max-width: none;
    object-fit: cover;
  }

  /* 本文セクションはSPデザイン待ちのため非表示 */
  body.rp-body .cs-canvas > section:not(.cs-restaurant):not(.cs-dinner):not(.cs-breakfast):not(.cs-drink),
  body.rp-body .fc-canvas > section:not(.fc-exterior):not(.fc-info):not(.fc-shop):not(.fc-restaurant):not(.fc-drink):not(.fc-other),
  body.rp-body .ss-canvas > section:not(.ss-map):not(.ss-yufuin):not(.ss-wide):not(.ac-howto):not(.ac-shuttle-sec):not(.ac-parking-sec):not(.ss-linksec) { display: none; }

  /* 見出し〜ジャンプナビ：縦に積む */
  body.rp-body .rp-canvas,
  body.rp-body .cs-canvas,
  body.rp-body .fc-canvas,
  body.rp-body .ss-canvas,
  body.rp-body .ss-head,
  body.rp-body .st-inner,
  body.rp-body .nw-canvas {
    position: relative;
    display: flex;
    flex-direction: column;
    width: auto;
    left: 0;
    margin-left: 0;
    height: auto;
  }
  body.rp-body .st-main { padding-bottom: 0; }
  body.rp-body .st-band--gap .st-inner { padding-bottom: 0; }
  body.rp-body .rp-heading {
    position: static;
    margin: 64.3px var(--sp-r) 0 40px;
    font-size: 48px;
    line-height: 72px;
    letter-spacing: .08em;
  }
  /* 長い英語見出し（SIGHTSEEING）は40pxに縮小（TOPと同じ） */
  body.rp-body .rp-heading--long { font-size: 40px; }
  body.rp-body .rp-heading-ja {
    position: static;
    margin: -4.2px var(--sp-r) 0 40px;
    font-size: 28px;
    line-height: 46px;
    letter-spacing: .05em;
  }
  body.rp-body .rp-lead,
  body.rp-body .cs-lead {
    position: static;
    margin: 36.2px var(--sp-r) 0 40px;
    font-size: 24px;
    line-height: 46px;
    letter-spacing: .05em;
  }
  body.rp-body .rp-intro,
  body.rp-body .cs-intro {
    position: static;
    width: auto;
    margin: 15.7px var(--sp-r) 0 40px;
  }
  body.rp-body .rp-intro p,
  body.rp-body .cs-intro p {
    line-height: 40px;
    letter-spacing: .047em;
  }

  /* ページ内ジャンプナビ（下向き矢印つきの罫線リスト） */
  body.rp-body .rp-jump {
    position: static;
    flex: none;
    width: 311.2px;
    margin: 39.1px 0 0 38.8px;
  }
  body.rp-body .rp-jump__item {
    padding: 32px 34px 18.1px 3.1px;
    margin-bottom: 0;
  }
  body.rp-body .rp-jump__item--head { padding: 30.4px 34px 20.4px 3.1px; }
  body.rp-body .rp-jump__en {
    font-size: 26px;
    line-height: 26px;
    letter-spacing: .08em;
  }
  body.rp-body .rp-jump__ja {
    margin-top: 10.4px;
    line-height: 16px;
    letter-spacing: .05em;
  }
  body.rp-body .rp-jump__item:not(.rp-jump__item--head) .rp-jump__ja { margin-top: 0; }
  body.rp-body .rp-jump .rp-arrow {
    top: auto;
    right: 8px;
    bottom: 36.7px;
  }
  body.rp-body .rp-jump__item:not(.rp-jump__item--head) .rp-arrow { bottom: 20px; }
  body.rp-body .rp-canvas,
  body.rp-body .ss-canvas,
  body.rp-body .cs-canvas,
  body.rp-body .fc-canvas { padding-bottom: 120px; }

  /* ---- room：各客室ブロック（タイトル → 大きいスライド → テキスト） ---- */
  body.rp-body .rp-canvas > section.rp-room {
    display: block;
    margin-top: 120px;
  }
  body.rp-body .rp-room--town { --dy: 0px; }
  body.rp-body .rp-room__head { position: static; }
  body.rp-body .rp-room__title {
    position: static;
    display: block;
    margin: 0 var(--sp-r) 0 38.8px;
  }
  body.rp-body .rp-room__en {
    margin-left: 3.1px;
    font-size: 40px;
    line-height: 56px;
    letter-spacing: .08em;
  }
  body.rp-body .rp-room__ja {
    margin-top: 2.7px;
    font-size: 20px;
    line-height: 30px;
    letter-spacing: .05em;
  }
  body.rp-body .rp-tags {
    position: static;
    flex-wrap: wrap;
    align-items: flex-start;
    margin: 17.1px var(--sp-r) 0 40px;
  }
  body.rp-body .rp-tags li { margin-bottom: 8px; }
  body.rp-body .rp-tags li:last-child { margin-right: 0; }
  /* 大きいスライド：PCの画像を流用し、縦幅のみ縮小・左右をトリミング（390×355） */
  body.rp-body .rp-slider {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    height: 355px;
    margin-top: 46px;
  }
  body.rp-body .rp-slider__pager {
    right: 22.6px;
    bottom: 7.1px;
  }
  body.rp-body .rp-slider__current { font-size: 27.8px; }
  body.rp-body .rp-slider__pager i { margin: 0 8.45px; }
  body.rp-body .rp-room__caption {
    position: static;
    width: auto;
    margin: 42.9px var(--sp-r) 0 38.8px;
    line-height: 40px;
  }
  /* ---- VIEW（写真＋テキスト）：大きい画像は縦を縮小して左右トリミング ---- */
  body.rp-body .rp-view { position: static; }
  body.rp-body .rp-view__photo {
    position: static;
    width: auto;
    height: 272px;
    margin: 64px 24px 0;
  }
  body.rp-body .rp-view__photo img {
    width: 100%;
    margin-left: 0;
    object-position: 53% center;
  }
  body.rp-body .rp-view__text {
    position: static;
    margin: 0 var(--sp-r) 0 38.8px;
  }
  body.rp-body .rp-view__tag {
    margin-top: 56.1px;
    line-height: 1;
  }
  body.rp-body .rp-view__lead {
    margin-top: 20.1px;
    line-height: 1;
    letter-spacing: .05em;
  }
  body.rp-body .rp-view__body {
    width: auto;
    margin-top: 52.5px;
  }
  body.rp-body .rp-view__body p {
    line-height: 40px;
    letter-spacing: .047em;
  }

  /* ---- ROOM FACILITIES：小さい画像は等倍で縮小し、縦に並べる ---- */
  body.rp-body .rp-facilities { position: static; }
  body.rp-body .rp-facilities__heading {
    position: static;
    margin: 45.3px var(--sp-r) 0 38.8px;
    line-height: 1;
  }
  body.rp-body .rp-facilities__list {
    position: static;
    display: block;
    margin: 18.5px 0 0 39.5px;
  }
  body.rp-body .rp-facilities__list li,
  body.rp-body .rp-facilities__list li:first-child {
    width: 310.5px;
    margin: 0 0 31.7px;
  }
  body.rp-body .rp-facilities__list img { height: 202.5px; }
  body.rp-body .rp-facilities__list p {
    margin: 22.8px 0 0;
    letter-spacing: .05em;
  }

  /* ---- リンク（温泉／設備）→ 予約ボタン ---- */
  body.rp-body .rp-room__foot {
    position: static;
    display: flex;
    flex-direction: column;
    margin: 41.3px 0 0 40px;
  }
  body.rp-body .rp-room__foot .rp-room__link,
  body.rp-body .rp-room__foot .rp-room__link[href="#onsen"],
  body.rp-body .rp-room__foot .rp-room__link[href="#facilities"] {
    position: static;
    order: 1;
    width: 180px;
    margin-bottom: 16.9px;
    letter-spacing: .05em;
  }
  body.rp-body .rp-room__btn {
    position: static;
    order: 2;
    flex-direction: column;
    justify-content: flex-start;
    width: 310px;
    height: 84px;
    margin-top: 8px;
    padding-top: 22.4px;
    left: auto;
    top: auto;
  }
  body.rp-body .rp-room__btn-en { letter-spacing: .08em; }
  body.rp-body .rp-room__btn-ja {
    margin: 6.5px 0 0;
    letter-spacing: .05em;
  }

  /* ---- 同じ構成（タイトル → 大きいスライド／画像 → テキスト）の箇所：館内施設 EXTERIOR/ENTRANCE、過ごし方の冒頭 ---- */
  body.rp-body .fc-canvas > section.fc-exterior,
  body.rp-body .cs-canvas > section.cs-restaurant,
  body.rp-body .cs-canvas > section.cs-dinner,
  body.rp-body .cs-canvas > section.cs-breakfast,
  body.rp-body .ss-canvas > section.ss-map,
  body.rp-body .ss-canvas > section.ss-yufuin,
  body.rp-body .ss-canvas > section.ss-wide,
  body.rp-body .ss-canvas > section.ac-howto,
  body.rp-body .ss-canvas > section.ac-shuttle-sec,
  body.rp-body .ss-canvas > section.ac-parking-sec,
  body.rp-body .ss-canvas > section.ss-linksec,
  body.rp-body .st-inner > .st-sec {
    position: static;
    display: block;
    width: auto;
    margin-top: 120px;
  }
  body.rp-body .fc-exterior__title,
  body.rp-body .cs-restaurant__title,
  body.rp-body .cs-dinner__title,
  body.rp-body .cs-breakfast__title,
  body.rp-body .cs-dish-block__title,
  body.rp-body .ss-map .ss-h,
  body.rp-body .ss-yufuin .ss-h,
  body.rp-body .ss-wide .ss-h,
  body.rp-body .ac-howto .ss-h,
  body.rp-body .ss-linksec .ss-h,
  body.rp-body .st-sec .ss-h {
    position: static;
    left: auto;
    top: auto;
    display: block;
    height: auto;
    margin: 0 var(--sp-r) 0 38.8px;
  }
  body.rp-body .fc-exterior__title .rp-heading2,
  body.rp-body .cs-restaurant__title .rp-heading2,
  body.rp-body .cs-dinner__title .rp-heading2,
  body.rp-body .cs-breakfast__title .rp-heading2,
  body.rp-body .cs-dish-block__title .rp-heading2,
  body.rp-body .ss-map .rp-heading2,
  body.rp-body .ss-yufuin .rp-heading2,
  body.rp-body .ss-wide .rp-heading2,
  body.rp-body .ac-howto .rp-heading2,
  body.rp-body .ss-linksec .rp-heading2,
  body.rp-body .st-sec .rp-heading2 {
    margin-left: 3.1px;
    font-size: 40px;
    line-height: 56px;
  }
  body.rp-body .fc-exterior__title .rp-heading2-ja,
  body.rp-body .cs-restaurant__title .rp-heading2-ja,
  body.rp-body .cs-dinner__title .rp-heading2-ja,
  body.rp-body .cs-breakfast__title .rp-heading2-ja,
  body.rp-body .cs-dish-block__title .rp-heading2-ja,
  body.rp-body .ss-map .rp-heading2-ja,
  body.rp-body .ss-yufuin .rp-heading2-ja,
  body.rp-body .ss-wide .rp-heading2-ja,
  body.rp-body .ac-howto .rp-heading2-ja,
  body.rp-body .ss-linksec .rp-heading2-ja,
  body.rp-body .st-sec .rp-heading2-ja {
    margin-top: 2.7px;
    line-height: 30px;
  }
  body.rp-body .fc-exterior__photo,
  body.rp-body .cs-restaurant__photo,
  body.rp-body .cs-dinner__photo,
  body.rp-body .cs-breakfast__photo,
  body.rp-body .ss-map__frame,
  body.rp-body .st-hero {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    height: 355px;
    margin: 56px 0 0;
  }
  body.rp-body .fc-slider--hero .rp-slider__pager,
  body.rp-body .cs-restaurant__slider .rp-slider__pager {
    right: 22.6px;
    bottom: 7.1px;
  }
  body.rp-body .fc-exterior__text,
  body.rp-body .cs-restaurant__text {
    position: static;
    width: auto;
    margin: 42.9px var(--sp-r) 0 38.8px;
  }
  body.rp-body .fc-exterior__text p,
  body.rp-body .cs-restaurant__text p {
    margin: 0;
    line-height: 40px;
    letter-spacing: .047em;
  }
  body.rp-body .st-lead {
    margin: 42.9px var(--sp-r) 0 38.8px;
    font-size: 24px;
    line-height: 46px;
    letter-spacing: .05em;
  }
  body.rp-body .st-body--intro {
    margin: 15px var(--sp-r) 0 38.8px;
    white-space: normal;
    letter-spacing: .047em;
  }
  body.rp-body .st-body--intro br { display: none; }
  /* 表組（rp-info）は room と同じ仕様：館内施設・お食事にも適用 */
  body.rp-body .fc-canvas > section.fc-info {
    position: static;
    left: auto;
    top: auto;
    width: auto;
    height: auto;
    margin-top: 120px;
  }
  body.rp-body .cs-restaurant .cs-restaurant__info {
    position: static;
    top: auto;
    display: block;
    margin-top: 56px;
  }
  body.rp-body .cs-restaurant__info .rp-info__row--first { margin-top: 0; }
  /* 施設基本情報：指定の改行以外は語の途中で切らない（スペース位置で折り返す） */
  body.rp-body .fc-info .rp-info__value { word-break: keep-all; }
  body.rp-body .fc-info .rp-info__row--first .rp-info__value { white-space: nowrap; }
  body.rp-body .ss-map > .ss-maplink { margin: 56px 0 0 40px; letter-spacing: .05em; }

  /* ==== room：ONSEN／FACILITIES・AMENITIES／INFORMATION ==== */
  body.rp-body .hang { display: inline-block; width: 0; white-space: nowrap; }
  body.rp-body .rp-canvas > section.rp-onsen {
    position: relative;
    left: auto;
    top: auto;
    width: auto;
    height: auto;
  }
  body.rp-body .rp-canvas > section.rp-facilities-amenities,
  body.rp-body .rp-canvas > section.rp-info {
    position: static;
    left: auto;
    top: auto;
    width: auto;
    height: auto;
  }

  /* ONSEN：紺の帯（画像・表は縦積み） */
  body.rp-body .rp-onsen {
    display: flex;
    flex-direction: column;
    margin-top: 120px;
    padding: 68.7px 0 82px;
  }
  body.rp-body .rp-onsen__inner {
    display: contents;
  }
  body.rp-body .rp-onsen__title {
    order: 1;
    display: block;
    height: auto;
    margin: 0 var(--sp-r) 0 40px;
    position: relative;
  }
  body.rp-body .rp-onsen__tag {
    font-size: 40px;
    line-height: 56px;
  }
  body.rp-body .rp-onsen__ja {
    margin-top: 1.7px;
    line-height: 30px;
  }
  body.rp-body .rp-onsen__text {
    order: 2;
    position: relative;
    margin: 46.4px var(--sp-r) 0 40px;
  }
  body.rp-body .rp-onsen__text p {
    line-height: 40px;
    letter-spacing: .047em;
  }
  body.rp-body .rp-onsen__photo {
    order: 3;
    position: relative;
    left: auto;
    top: auto;
    width: auto;
    height: 225px;
    margin: 39.7px 24px 0;
  }
  body.rp-body .rp-onsen__data {
    order: 4;
    position: relative;
    margin: 58.5px 0 0 40px;
    width: 310px;
    border-top: 1px solid #A3A09F;
  }
  body.rp-body .rp-onsen__data p {
    padding: 0;
    border-bottom: 1px solid #A3A09F;
    line-height: 32px;
    letter-spacing: .05em;
  }
  body.rp-body .rp-onsen__data p span {
    display: block;
    width: auto;
    margin-bottom: 14.3px;
    padding: 13.3px 0 16.7px;
    border-bottom: 1px dashed #A3A09F;
  }
  body.rp-body .rp-onsen__data p { padding-bottom: 16.7px; }
  body.rp-body .rp-onsen__data p + p span { padding-top: 14.3px; }

  /* FACILITIES/AMENITIES */
  body.rp-body .rp-facilities-amenities {
    display: block;
    margin-top: 69.5px;
    overflow: hidden;
  }
  body.rp-body .rp-facilities-amenities .rp-heading2-row {
    position: static;
    top: auto;
    left: auto;
    display: block;
    height: auto;
    margin: 0 var(--sp-r) 0 38.8px;
  }
  body.rp-body .rp-facilities-amenities .rp-heading2 {
    margin-left: 3.1px;
    font-size: 40px;
    line-height: 56px;
  }
  body.rp-body .rp-facilities-amenities .rp-heading2-ja {
    margin-top: 2.7px;
    line-height: 30px;
  }
  body.rp-body .rp-amenity-list {
    position: static;
    width: 386.4px;
    margin: 43.5px 0 0 38.8px;
    column-count: 2;
    column-gap: 0;
  }
  body.rp-body .rp-amenity-list li {
    height: auto;
    margin-bottom: 16px;
    line-height: 24px;
    letter-spacing: .05em;
    break-inside: avoid;
    padding-right: 24px;
  }
  body.rp-body .rp-amenity-list li:nth-child(9) { break-after: column; }
  body.rp-body .rp-amenity-photos {
    position: static;
    grid-template-columns: repeat(2, 148px);
    grid-auto-rows: 175.7px;
    gap: 16.5px;
    margin: 35.8px 0 0 38.5px;
  }

  /* INFORMATION（表組：項目と内容の間は点線） */
  body.rp-body .rp-info { display: block; margin-top: 73.3px; }
  body.rp-body .rp-info > .rp-heading2-row {
    position: static;
    top: auto;
    left: auto;
    display: block;
    height: auto;
    margin: 0 var(--sp-r) 0 38.8px;
  }
  body.rp-body .rp-info .rp-heading2 {
    margin-left: 3.1px;
    font-size: 36px;
    line-height: 56px;
  }
  body.rp-body .rp-info .rp-heading2-ja {
    margin-top: 1.9px;
    line-height: 30px;
  }
  body.rp-body .rp-info__row,
  body.rp-body .rp-info__row + .rp-info__row,
  body.rp-body .rp-info__row--first,
  body.rp-body .rp-info__row--notes {
    display: block;
    width: 308.1px;
    margin: 0 0 0 41.9px;
    padding: 0;
    border-bottom: 1px solid #A3A09F;
  }
  body.rp-body .rp-info__row--first {
    margin-top: 25.5px;
    border-top: 1px solid #A3A09F;
  }
  body.rp-body .rp-info__label,
  body.rp-body .fc-info .rp-info__label {
    width: auto;
    padding: 15.5px 0 15.5px;
    border-bottom: 1px dashed #A3A09F;
    line-height: 32px;
    letter-spacing: .05em;
  }
  body.rp-body .rp-info__value {
    padding: 15.5px 0 15.5px;
    line-height: 32px;
    letter-spacing: .05em;
  }
  body.rp-body .rp-info__row--notes .rp-info__value p { margin: 0; }
  body.rp-body .rp-cancel__when { display: inline; min-width: 0; }
  body.rp-body .rp-canvas > #information .rp-info__row:last-of-type .rp-info__value p:first-child { margin-bottom: 32px; }
  /* クレジットカードの行はデザインの余白に合わせて少し広げる */
  body.rp-body .rp-canvas > #information > .rp-info__row:nth-child(5) .rp-info__label { padding: 16.7px 0 18.5px; }
  body.rp-body .rp-canvas > #information > .rp-info__row:nth-child(5) .rp-info__value { padding: 28.5px 0 24.3px; }
  body.rp-body .rp-canvas { padding-bottom: 120px; }

  /* ==== cuisine：DINNER（大きい画像 → SEASONAL COURSE → MENU）／MAIN DISH ==== */
  body.rp-body .hang-l { margin-left: -8px; }
  body.rp-body .sp-bl { margin-left: -.5em; }
  body.rp-body .sp-br { margin-right: -.5em; }
  body.rp-body .cs-dinner__title .rp-heading2-ja,
  body.rp-body .cs-breakfast__title .rp-heading2-ja { margin-top: 0; }
  body.rp-body .cs-dinner__photo,
  body.rp-body .cs-breakfast__photo { margin-top: 49.6px; }
  body.rp-body .cs-dinner__photo img,
  body.rp-body .cs-breakfast__photo img { position: static; }
  body.rp-body .cs-seasonal,
  body.rp-body .cs-breakfast__text {
    position: static;
    width: auto;
    margin: 0 var(--sp-r) 0 40px;
  }
  body.rp-body .cs-breakfast__text .rp-view__lead { margin-top: 61px; }
  body.rp-body .cs-breakfast__text .rp-view__body { width: auto; margin-top: 52.5px; }
  body.rp-body .cs-seasonal .rp-view__tag { margin-top: 61px; }
  body.rp-body .cs-seasonal__body { margin-top: 52.5px; }
  body.rp-body .cs-seasonal__body p {
    line-height: 40px;
    letter-spacing: .047em;
  }
  body.rp-body .cs-seasonal .cs-menu__heading,
  body.rp-body .cs-breakfast__text .cs-menu__heading {
    margin-top: 21.1px;
    padding-top: 41.4px;
    border-top: 1px solid #A3A09F;
    line-height: 1;
  }
  body.rp-body .cs-menu { margin: 22.1px 0 0 4px; }
  body.rp-body .cs-menu p {
    margin: 0 0 8px;
    padding-left: 67.8px;
    text-indent: -67.8px;
    line-height: 32px;
    letter-spacing: .05em;
  }
  body.rp-body .cs-menu p > span:first-child {
    display: inline-block;
    width: 50.4px;
    margin-right: 17.4px;
    text-indent: 0;
    text-align-last: justify;
  }

  body.rp-body .cs-canvas > section.cs-breakfast { margin-top: 80px; margin-bottom: 80px; }
  body.rp-body .cs-canvas > section.cs-restaurant { margin-top: 80px; }
  body.rp-body .cs-dish-block {
    position: static;
    width: auto;
    margin-top: 62.4px;
  }
  body.rp-body .cs-dish-block__title .rp-heading2-ja { margin-top: -1.2px; line-height: 40px; }
  body.rp-body .cs-dish,
  body.rp-body .cs-dish--first {
    display: flex;
    flex-direction: column;
    margin-top: 43.9px;
  }
  body.rp-body .cs-dish + .cs-dish { margin-top: 63.9px; }
  body.rp-body .cs-dish__text { display: contents; }
  body.rp-body .cs-dish__text .rp-view__tag {
    order: 1;
    margin: 0 var(--sp-r) 0 39.7px;
  }
  body.rp-body .cs-dish__text .rp-view__lead {
    order: 2;
    margin: 20.1px var(--sp-r) 0 39.7px;
  }
  body.rp-body .cs-dish__photo {
    order: 3;
    flex: none;
    width: 310.5px;
    height: 204.5px;
    margin: 54.1px 0 0 38.5px;
  }
  body.rp-body .cs-dish__text .rp-view__body {
    order: 4;
    width: auto;
    margin: 55px var(--sp-r) 0 38.9px;
  }
  body.rp-body .cs-dish__btn {
    order: 5;
    flex-direction: column;
    justify-content: flex-start;
    width: 310px;
    height: 84px;
    margin: 22.4px 0 0 42px;
    padding-top: 22.4px;
  }
  body.rp-body .cs-dish__btn-en { letter-spacing: .08em; }
  body.rp-body .cs-dish__btn-ja {
    margin: 6.5px 0 0;
    letter-spacing: .05em;
  }

  /* ==== cuisine：COURSE（3つのコースから選ぶ／スワイプで切り替え） ==== */
  body.rp-body .cs-course {
    position: relative;
    top: auto;
    left: auto;
    width: auto;
    margin-top: 80px;
    padding: 67.4px 0 80px;
    background-color: #ffffff;
  }
  body.rp-body .cs-course__bg { display: none; }
  body.rp-body .cs-course__title { position: static; top: auto; left: auto; display: block; height: auto; margin: 0 var(--sp-r) 0 38.8px; }
  body.rp-body .cs-course__title .rp-heading2 { margin-left: -1.8px; font-size: 40px; line-height: 56px; }
  body.rp-body .cs-course__title .rp-heading2-ja { margin-top: 3.8px; line-height: 30px; }
  body.rp-body .cs-course__tabs {
    position: static;
    display: block;
    margin: 41.2px 0 0 39.1px;
  }
  body.rp-body .cs-course__tabs li,
  body.rp-body .cs-course__tabs li.is-active {
    width: fit-content;
    max-width: 311.6px;
    margin: 0 0 17.7px;
    padding: 0 0 9.8px;
    border-bottom: 1px solid #757170;
    color: var(--color-text-black);
    letter-spacing: .05em;
    white-space: nowrap;
  }
  body.rp-body .cs-course__tabs li:last-child { margin-bottom: 0; }
  /* 1本目（画面幅いっぱい）は矢印を下線の右端から約6px内側に */
  body.rp-body .cs-course__tabs li > span { min-width: 0; }
  body.rp-body .cs-course__tabs li:first-child { padding-right: 5.7px; }
  body.rp-body .cs-course__stage {
    position: relative;
    top: auto;
    width: auto;
    height: auto;
    margin-top: 36.4px;
    overflow: visible;
  }
  /* カードを横に並べたスクロール領域（スワイプ／ドラッグで送れる） */
  body.rp-body .cs-course__track {
    display: flex;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  body.rp-body .cs-course__track::-webkit-scrollbar { display: none; }
  body.rp-body .cs-course__track { cursor: grab; }
  body.rp-body .cs-course__track.is-dragging {
    cursor: grabbing;
    scroll-snap-type: none;
    user-select: none;
  }
  body.rp-body .cs-course__track img { -webkit-user-drag: none; }
  body.rp-body .cs-course__card,
  body.rp-body .cs-course__card.is-prev,
  body.rp-body .cs-course__card.is-next,
  body.rp-body .cs-course__card.is-wrap,
  body.rp-body .cs-course__card.is-active {
    position: relative;
    left: auto;
    top: auto;
    flex: 0 0 100%;
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    opacity: 1;
    visibility: visible;
    filter: none;
    transition: none;
    pointer-events: auto;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
  body.rp-body .cs-course__text { display: contents; }
  body.rp-body .cs-course__text .rp-view__tag {
    order: 1;
    margin: 0 var(--sp-r) 0 39.7px;
  }
  body.rp-body .cs-course__text .rp-view__lead {
    order: 2;
    margin: 9.2px var(--sp-r) 0 39.7px;
    height: 92px;
    line-height: 46px;
  }
  /* タイトルが1行のカード（UPGRADE／STANDARD）は、写真の位置を動かさず文字だけ少し下げる */
  body.rp-body .cs-course__card[data-course="upgrade"] .rp-view__tag,
  body.rp-body .cs-course__card[data-course="upgrade"] .rp-view__lead,
  body.rp-body .cs-course__card[data-course="standard"] .rp-view__tag,
  body.rp-body .cs-course__card[data-course="standard"] .rp-view__lead {
    position: relative;
    top: 23px;
  }
  body.rp-body .cs-course__slider {
    order: 3;
    position: relative;
    left: auto;
    top: auto;
    flex: none;
    width: auto;
    height: 272.5px;
    margin: 18.1px 23px 0;
  }
  body.rp-body .cs-course__slider .rp-slider__pager {
    position: absolute;
    left: 15.5px;
    top: calc(100% + 16.4px);
  }
  body.rp-body .cs-course__slider .rp-slider__current { font-size: 27.8px; }
  body.rp-body .cs-course__slider .rp-slider__pager i { margin: 0 11px 0 3px; width: 72px; }
  body.rp-body .cs-course__text .rp-view__body {
    order: 4;
    width: auto;
    margin: 70.7px var(--sp-r) 0 42px;
  }
  body.rp-body .cs-course__menu {
    order: 5;
    margin: 13px 0 0 42px;
    padding-top: 17.2px;
    width: 308.7px;
    border-top: 1px solid #A3A09F;
  }
  body.rp-body .cs-course__menu p {
    margin: 0;
    padding-left: 93px;
    text-indent: -93px;
    line-height: 40px;
    letter-spacing: .05em;
  }
  body.rp-body .cs-course__menu p > span:first-child { width: 75.8px; margin-right: 17.2px; text-align-last: auto; }
  body.rp-body .cs-course__btn {
    order: 6;
    width: 310px;
    margin: 40px 0 0 42px;
  }
  body.rp-body .cs-course__arrow {
    position: absolute;
    top: 60.6px;
    z-index: 2;
  }
  body.rp-body .cs-course__arrow--prev { left: -6px; }
  body.rp-body .cs-course__arrow--next { left: 353px; }

  /* 下層のプランボタン：上マージンは40px */
  body.rp-body .cs-dish__btn,
  body.rp-body .cs-course__btn,
  body.rp-body .rp-room__btn { margin-top: 40px; }
  body.rp-body .rp-room__foot .rp-room__link[href="#facilities"] { margin-bottom: 0; }

  /* ==== cuisine：DRINK INCLUSIVE（紺の帯：タイトル→リード→本文→写真→ページ番号） ==== */
  body.rp-body .cs-canvas > section.cs-drink {
    background-image: url(../cuisine/img/drink-bg-sp.jpg);
    background-size: cover;
    background-position: center top;
    position: relative;
    left: auto;
    top: auto;
    display: flex;
    flex-direction: column;
    width: auto;
    height: auto;
    margin-top: 0;
    padding: 68.7px 0 124.9px;
  }
  body.rp-body .cs-drink__title {
    position: static;
    left: auto;
    top: auto;
    width: auto;
    margin: 0 var(--sp-r) 0 38.8px;
  }
  body.rp-body .cs-drink__title .rp-heading2 {
    height: auto;
    margin-left: .7px;
    font-size: 40px;
    line-height: 56px;
  }
  body.rp-body .cs-drink__title .rp-heading2-ja {
    height: auto;
    margin-top: 3.1px;
    line-height: 30px;
  }
  body.rp-body .cs-drink__text {
    order: 2;
    position: static;
    width: auto;
    margin: 0 var(--sp-r) 0 40px;
  }
  body.rp-body .cs-drink__text .rp-view__lead {
    margin-top: 33.7px;
    line-height: 46px;
  }
  body.rp-body .cs-drink__text .rp-view__body {
    width: auto;
    margin-top: 24.4px;
  }
  body.rp-body .cs-drink__text .rp-view__body p { letter-spacing: 0; }
  body.rp-body .cs-drink__photo {
    order: 3;
    position: relative;
    left: auto;
    top: auto;
    width: auto;
    height: 224px;
    margin: 40.6px 25px 0;
  }
  body.rp-body .cs-drink__slider .rp-slider__pager {
    right: auto;
    left: 13.3px;
    top: calc(100% + 17.1px);
  }
  body.rp-body .cs-drink__slider .rp-slider__current { font-size: 27.8px; }
  body.rp-body .cs-drink__slider .rp-slider__pager i { margin: 0 11px 0 3px; width: 72px; }

  /* ==== facilities：INTERIOR（写真コラージュ＋テキスト） ==== */
  body.rp-body .fc-exterior .fc-interior {
    display: block;
    width: auto;
  }
  body.rp-body .fc-interior__collage {
    display: grid;
    grid-template-columns: 151px 4px 187px;
    grid-template-rows: 135.5px 4px 100px;
    width: 342px;
    margin: 72.3px 0 0 24px;
  }
  body.rp-body .fc-interior__img {
    position: static;
    width: auto;
    height: auto;
  }
  body.rp-body .fc-interior__img--cat { grid-column: 1; grid-row: 1 / span 3; }
  body.rp-body .fc-interior__img--lamp { grid-column: 3; grid-row: 1; }
  body.rp-body .fc-interior__img--frame { grid-column: 3; grid-row: 3; }
  body.rp-body .fc-interior__text {
    position: static;
    width: auto;
    margin-top: 56.3px;
  }
  body.rp-body .fc-interior__text .rp-view__tag { margin: 0 var(--sp-r) 0 38.8px; }
  body.rp-body .fc-interior__text .rp-view__lead {
    margin: 10.5px var(--sp-r) 0 38.8px;
    line-height: 46px;
  }
  body.rp-body .fc-interior__text .rp-view__body {
    width: auto;
    margin: 40px var(--sp-r) 0 38.8px;
  }
  body.rp-body .fc-interior__text .rp-view__body p {
    line-height: 40px;
    letter-spacing: .047em;
  }

  /* ==== facilities：SHOP／RESTAURANT／DRINK INCLUSIVE（タイトル→写真272px→ページ番号→テキスト） ====
     PC版はタイトルがテキスト側、写真が別要素という順でDOMが組まれているため、
     SPでは display:contents + flex order で「タイトル→写真→本文」の見た目の順に並べ替える */
  body.rp-body .fc-canvas > section.fc-shop,
  body.rp-body .fc-canvas > section.fc-restaurant,
  body.rp-body .fc-canvas > section.fc-drink {
    position: static;
    display: flex;
    flex-direction: column;
    width: auto;
    margin-top: 80px;
  }
  body.rp-body .fc-shop__text,
  body.rp-body .fc-restaurant__text,
  body.rp-body .fc-drink__text { display: contents; }
  body.rp-body .fc-shop__title,
  body.rp-body .fc-restaurant__title,
  body.rp-body .fc-drink__title {
    order: 1;
    position: static;
    left: auto;
    top: auto;
    display: block;
    height: auto;
    margin: 0 var(--sp-r) 0 38.8px;
  }
  body.rp-body .fc-shop__title .rp-heading2,
  body.rp-body .fc-restaurant__title .rp-heading2,
  body.rp-body .fc-drink__title .rp-heading2 {
    margin-left: 3.1px;
    font-size: 40px;
    line-height: 56px;
    height: auto;
  }
  body.rp-body .fc-shop__title .rp-heading2-ja,
  body.rp-body .fc-restaurant__title .rp-heading2-ja,
  body.rp-body .fc-drink__title .rp-heading2-ja {
    margin-top: 2.0px;
    line-height: 30px;
  }
  body.rp-body .fc-shop__photo,
  body.rp-body .fc-restaurant__photo,
  body.rp-body .fc-drink__photo {
    order: 2;
    position: relative;
    left: auto;
    top: auto;
    width: 344px;
    height: 272px;
    margin: 56.2px auto 0;
  }
  body.rp-body .fc-shop__photo .rp-slider__pager,
  body.rp-body .fc-restaurant__photo .rp-slider__pager,
  body.rp-body .fc-drink__photo .rp-slider__pager {
    left: 17px;
    right: auto;
    bottom: auto;
    top: calc(100% + 16px);
    color: var(--color-navy);
  }
  body.rp-body .fc-shop__photo .rp-slider__pager i,
  body.rp-body .fc-restaurant__photo .rp-slider__pager i,
  body.rp-body .fc-drink__photo .rp-slider__pager i {
    width: 72px;
    margin: 0 11px 0 3px;
  }
  body.rp-body .fc-shop__photo .rp-slider__current,
  body.rp-body .fc-restaurant__photo .rp-slider__current,
  body.rp-body .fc-drink__photo .rp-slider__current { font-size: 27.8px; }
  body.rp-body .fc-shop__text .rp-view__lead,
  body.rp-body .fc-restaurant__text .rp-view__lead,
  body.rp-body .fc-drink__text .rp-view__lead {
    order: 3;
    margin: 90.6px var(--sp-r) 0 38.8px;
    line-height: 46px;
  }
  body.rp-body .fc-shop__text .rp-view__body,
  body.rp-body .fc-restaurant__text .rp-view__body,
  body.rp-body .fc-drink__text .rp-view__body {
    order: 4;
    width: auto;
    margin: 21.0px 32px 0 38.8px;
  }
  body.rp-body .fc-shop__text .rp-view__body p,
  body.rp-body .fc-restaurant__text .rp-view__body p,
  body.rp-body .fc-drink__text .rp-view__body p {
    line-height: 40px;
    letter-spacing: .047em;
  }
  body.rp-body .fc-restaurant__link {
    order: 5;
    position: static;
    margin: 40px 0 0 40.8px;
    letter-spacing: .05em;
  }

  /* ==== OTHER FACILITIES & SERVICES（room「設備・アメニティ」と同じ2カラムリスト＋写真の入れ方） ==== */
  body.rp-body .fc-canvas > section.fc-other {
    position: static;
    width: auto;
    margin-top: 80px;
    overflow: hidden;
  }
  body.rp-body .fc-other__title {
    position: static;
    top: auto;
    left: auto;
    display: block;
    height: auto;
    margin: 0 var(--sp-r) 0 38.8px;
  }
  body.rp-body .fc-other__title .rp-heading2 {
    margin-left: 3.1px;
    font-size: 40px;
    line-height: 56px;
  }
  body.rp-body .fc-other__title .rp-heading2-ja {
    margin-top: 2.0px;
    line-height: 30px;
  }
  body.rp-body .fc-other__list {
    position: static;
    width: 386.4px;
    margin: 56px 0 0 38.8px;
    column-count: 2;
    column-gap: 0;
  }
  body.rp-body .fc-other__list li {
    height: auto;
    font-size: 16px;
    line-height: 24px;
    margin-bottom: 16px;
    letter-spacing: .05em;
    break-inside: avoid;
    padding-right: 24px;
  }
  body.rp-body .fc-other__list li:nth-child(3) { break-after: column; }
  body.rp-body .fc-other__photos {
    position: static;
    display: grid;
    grid-template-columns: 147.5px 17px 147.5px;
    grid-template-rows: 175px 17px 175px;
    gap: 0;
    margin: 56px 0 0 38.8px;
  }
  body.rp-body .fc-other__photos img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  body.rp-body .fc-other__photos img:nth-child(1) { grid-column: 1; grid-row: 1; }
  body.rp-body .fc-other__photos img:nth-child(2) { grid-column: 3; grid-row: 1; }
  body.rp-body .fc-other__photos img:nth-child(3) { grid-column: 1; grid-row: 3; }
  body.rp-body .fc-other__link {
    position: static;
    top: auto;
    left: auto;
    width: 180px;
    margin: 0 0 0 38.8px;
  }
  body.rp-body .fc-other__link--1 { margin-top: 56px; }
  body.rp-body .fc-other__link--2 { margin-top: 18px; }

  /* ==================================================================
     NEWS / FAQ / CONTACT 共通シェル
     ・他ページのvar(--sp-r)可変マージンではなく
       左右均等40pxで組み、幅はすべてwidth:autoの可変幅にしてある
     ・タイトルの文字サイズは.rp-heading/.rp-heading-ja（room等と共通）をそのまま使用
  ================================================================== */
  body.rp-body .nw-main,
  body.rp-body .fq-main,
  body.rp-body .ct-main {
    padding-bottom: 120px;
  }
  body.rp-body .nw-head {
    position: static;
    height: auto;
  }
  body.rp-body .nw-heading,
  body.rp-body .nw-heading-ja {
    position: static;
    top: auto;
  }
  /* このページ群だけタイトル画像が無く見出しがページ最上部から始まるため、
     左上に絶対配置されるロゴ（top:20px、実測で幅50px×高さ208pxの縦長画像）と
     重ならないよう上マージンを広めに確保（ロゴ下端228px + 余白24px） */
  body.rp-body .nw-heading { margin: 252px 40px 0 40px; }
  body.rp-body .nw-heading-ja { margin: -4.2px 40px 0 40px; }

  /* ---- NEWS 一覧 ---- */
  body.rp-body .nw-list {
    width: auto;
    margin: 48px 40px 0;
  }
  /* flex-wrapだと日本語タイトルの行内折返しとアイテム折返しが競合して幅0になる
     事故が起きるため、date(1行目)／title+arrow(2行目)をCSS Gridで組む */
  body.rp-body .nw-list__item a {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "date  date"
      "title arrow";
    align-items: center;
    row-gap: 8px;
    padding: 24px 0;
  }
  body.rp-body .nw-list__date {
    grid-area: date;
    width: auto;
    font-size: 14px;
    line-height: 24px;
  }
  body.rp-body .nw-list__title {
    grid-area: title;
    min-width: 0;
    font-size: 15px;
    line-height: 26px;
  }
  body.rp-body .nw-list__item .rp-arrow {
    grid-area: arrow;
    justify-self: end;
    margin-left: 32px;
    margin-right: 0;
    top: 0;
  }
  body.rp-body .nw-pager { margin-top: 40px; }

  /* ---- NEWS 詳細 ---- */
  body.rp-body .nw-entry {
    width: auto;
    margin: 48px 40px 0;
  }
  body.rp-body .nw-entry__title {
    margin-top: 16px;
    padding-bottom: 20px;
    font-size: 18px;
    line-height: 28px;
  }
  body.rp-body .nw-entry__content { margin-top: 32px; }
  body.rp-body .nw-entry__content p {
    font-size: 15px;
    line-height: 32px;
  }
  body.rp-body .nw-entry__content img,
  body.rp-body .nw-entry__content figure { margin: 40px auto; }
  body.rp-body .nw-dummy-img {
    width: 100%;
    height: auto;
    aspect-ratio: 688 / 424;
  }
  body.rp-body .nw-nav {
    width: auto;
    margin: 0 40px;
    flex-wrap: wrap;
    gap: 16px 24px;
    padding-top: 32px;
  }
  body.rp-body .nw-entry + .nw-nav { margin-top: 56px; }
  body.rp-body .nw-nav__list {
    order: 3;
    width: 100%;
    justify-content: center;
  }

  /* ---- FAQ ---- */
  body.rp-body .fq-list {
    width: auto;
    margin: 48px 40px 0;
  }
  body.rp-body .fq-item__q { padding: 24px 0; }
  body.rp-body .fq-item__mark {
    width: auto;
    margin-right: 12px;
    font-size: 22px;
  }
  body.rp-body .fq-item__text {
    font-size: 15px;
    line-height: 24px;
  }
  body.rp-body .fq-item__icon { margin: -16px 0 -16px 12px; }
  body.rp-body .fq-item__a { padding: 20px 24px 16px; }
  body.rp-body .fq-item__a p {
    font-size: 15px;
    line-height: 30px;
  }

  /* ---- CONTACT ---- */
  body.rp-body .ct-lead {
    margin: 48px 40px 0;
    font-size: 20px;
    line-height: 32px;
  }
  body.rp-body .ct-text { margin: 20px 40px 0; }
  body.rp-body .ct-text p {
    font-size: 15px;
    line-height: 30px;
  }
  body.rp-body .ct-form {
    width: auto;
    margin: 40px 40px 0;
  }
  body.rp-body .ct-row {
    flex-direction: column;
    align-items: flex-start;
    padding: 24px 0;
  }
  body.rp-body .ct-row__label {
    width: 100%;
    height: auto;
    margin: 0 0 12px 0;
  }
  body.rp-body .ct-row__field { width: 100%; }
  body.rp-body .ct-row__field input,
  body.rp-body .ct-row__field textarea { font-size: 15px; }
  body.rp-body .ct-row__field textarea { height: 180px; }
  body.rp-body .ct-submit { margin-top: 48px; }
  body.rp-body .ct-submit__btn {
    width: 100%;
    height: 56px;
    font-size: 16px;
  }
  body.rp-body .ct-field-notes { margin-top: 12px; }
  body.rp-body .ct-field-notes li { font-size: 13px; line-height: 22px; }
  body.rp-body .ct-notes { margin: 32px 40px 0; }
  body.rp-body .ct-notes p {
    font-size: 14px;
    line-height: 28px;
  }
  body.rp-body .ct-phone {
    width: auto;
    margin: 56px 40px 0;
  }
  body.rp-body .ct-phone__head {
    flex-wrap: wrap;
    gap: 8px 24px;
  }
  body.rp-body .ct-phone__box {
    flex-direction: column;
    height: auto;
    align-items: center;
    gap: 8px;
    padding: 24px 16px;
    margin-top: 16px;
  }
  body.rp-body .ct-phone__tel { margin-left: 0; }

  /* ==== sightseeing YUFUIN：タイトル＋タブ（cuisine COURSEのタブと同仕様） ==== */
  body.rp-body .ss-tabs {
    position: static;
    display: block;
    width: auto;
    margin: 41.2px 0 0 39.1px;
  }
  body.rp-body .ss-tabs a {
    display: flex;
    width: fit-content;
    max-width: 311.6px;
    margin: 0 0 17.7px;
    padding: 0 0 9.8px;
    border-bottom: 1px solid #757170;
    color: var(--color-text-black);
    letter-spacing: .05em;
    white-space: nowrap;
  }
  body.rp-body .ss-tabs a:last-child { margin-bottom: 0; }
  body.rp-body .ss-tabs a > span { min-width: 0; }
  body.rp-body .ss-tabs a:first-child { padding-right: 5.7px; }

  /* ==== sightseeing ピックアップ（湯の坪街道など）／その他の観光スポット（カード） ====
     画像はPC版を流用。 */
  body.rp-body .ss-tabs + .ss-sub,
  body.rp-body .ss-sub + .ss-sub { margin-top: 80px; }
  body.rp-body .ss-subhead {
    display: block;
    height: auto;
    margin: 0 var(--sp-r) 0 38.8px;
  }
  body.rp-body .ss-subhead__en { display: block; font-size: 20px; line-height: 1; }
  body.rp-body .ss-subhead__ja { display: block; margin-top: 24px; font-size: 24px; line-height: 1; }

  /* ---- ピックアップ（写真344x272、DOM順は写真→本文/本文→写真が混在するのでcontents+orderで統一） ---- */
  body.rp-body .ss-pickup {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    width: auto;
    margin: 56px 0 0;
  }
  body.rp-body .ss-pickup--rev { margin-left: 0; }
  body.rp-body .ss-pickup + .ss-pickup { margin-top: 64px; }
  body.rp-body .ss-pickup__text,
  body.rp-body .ss-pickup--rev .ss-pickup__text { display: contents; width: auto; }
  body.rp-body .ss-pickup__text .rp-view__tag {
    order: 1;
    margin: 0 var(--sp-r) 0 38.8px;
  }
  body.rp-body .ss-pickup__title {
    order: 2;
    margin: 24px var(--sp-r) 0 38.8px;
    font-size: 24px;
    line-height: 1;
  }
  body.rp-body .ss-pickup__text .ss-tag { order: 3; margin: 24px 0 0 38.8px; }
  body.rp-body .ss-pickup__img {
    order: 4;
    flex-shrink: 0;
    width: 344px;
    height: 272px;
    margin: 24px auto 0;
  }
  body.rp-body .ss-pickup__text .ss-pickup__body {
    order: 5;
    width: auto;
    margin: 24px var(--sp-r) 0 38.8px;
    white-space: normal;
  }
  body.rp-body .ss-pickup__text .ss-links {
    order: 6;
    margin: 40px var(--sp-r) 0 38.8px;
    gap: 24px;
  }

  /* ---- その他の観光スポット（カード、写真幅いっぱい×202、1カラムで縦積み） ---- */
  body.rp-body .ss-cards { display: contents; }
  body.rp-body .ss-card {
    width: auto;
    margin: 64px var(--sp-r) 0 38.8px;
  }
  body.rp-body .ss-card__title {
    font-size: 22px;
    line-height: 30px;
  }
  body.rp-body .ss-cards--2 .ss-card__title { min-height: auto; }
  body.rp-body .ss-card__img {
    width: 100%;
    height: 202px;
    margin-top: 24px;
  }
  body.rp-body .ss-card__text { margin-top: 24px; white-space: normal; }

  /* ---- 詳細を見る／地図を見る（リンク幅144pxはPCと共通、間隔とmargin-topだけSP用に） ---- */
  body.rp-body .ss-links { gap: 24px; margin-top: 56px; }
  body.rp-body .ss-card .ss-links { margin-top: 40px; }

  /* ==== sightseeing WIDE AREA TOURISM ====
     テキスト部分(subhead/タグ/本文/リンク)は3エリアとも共通。
     写真はエリアごとにSP用画像を使用。 */
  body.rp-body .ss-wide .ss-area {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    width: auto;
    margin: 80px 0 0;
  }
  body.rp-body .ss-wide .ss-area--rev { margin-left: 0; }
  body.rp-body #oita + .ss-area { margin-top: 56px; }
  body.rp-body .ss-wide .ss-area__text { display: contents; }
  body.rp-body .ss-wide .ss-subhead { order: 1; margin: 0 var(--sp-r) 0 38.8px; }
  body.rp-body .ss-wide .ss-tag { order: 2; margin: 24px 0 0 38.8px; }
  body.rp-body .ss-wide .ss-pickup__body {
    order: 3;
    width: auto;
    margin: 24px var(--sp-r) 0 38.8px;
    white-space: normal;
  }
  body.rp-body .ss-wide .ss-area__imgs {
    order: 4;
    align-self: stretch;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    width: auto;
    gap: 8px;
    margin: 0;
    padding: 40px 40px 0 40px;
  }
  body.rp-body .ss-wide .ss-area__imgs img {
    width: 100%;
    height: 160px;
    object-fit: cover;
  }
  body.rp-body .ss-wide .ss-links {
    order: 5;
    margin: 40px var(--sp-r) 0 38.8px;
  }

  /* ==================================================================
     ACCESS（アクセスページ）
     他ページと同じ値・手法でレスポンシブ化
  ================================================================== */
  body.rp-body .ac-intro p { white-space: normal; line-height: 32px; }

  /* ---- ACCESS MAP内の所在地・地図コード情報 ---- */
  body.rp-body .ac-info {
    display: flex;
    flex-direction: column;
    width: auto;
    margin: 40px var(--sp-r) 0 38.8px;
  }
  body.rp-body .ac-info__main {
    display: flex;
    align-items: center;
    gap: 24px;
  }
  body.rp-body .ac-info__logo { width: auto; height: 60px; }
  body.rp-body .ac-info__text { padding-top: 0; }
  body.rp-body .ac-info__text p { font-size: 15px; line-height: 30px; }
  body.rp-body .ac-info__text .ac-info__code { margin-top: 8px; padding: 0 16px; }
  body.rp-body .ac-info .ss-maplink { position: static; width: 180px; margin: 32px 0 0; }

  /* ---- HOW TO GET HERE（お車/電車/バス/飛行機の各ss-sub） ---- */
  body.rp-body .ac-lines { margin: 40px var(--sp-r) 0 38.8px; }
  body.rp-body .ac-lines p { white-space: normal; line-height: 32px; }
  /* 経路図の画像自体に左右約40ptの余白が描き込み済みのため、
     CSS側はpaddingを持たず画面幅いっぱいに敷いて画像の内側余白だけで40pxを出す */
  body.rp-body .ac-diagram {
    width: 100vw;
    margin: 40px 0 0 calc(50% - 50vw);
  }
  body.rp-body .ac-diagram img { display: block; width: 100%; height: auto; }
  body.rp-body .ac-link {
    position: static;
    margin: 32px var(--sp-r) 0 38.8px;
  }

  /* ---- 見出し（英語→日本語+タグ を縦積み）：SHUTTLE SERVICE／PARKING共通 ---- */
  body.rp-body .ac-stack .rp-heading2 {
    height: auto;
    margin-left: 3.1px;
    font-size: 40px;
    line-height: 56px;
  }
  body.rp-body .ac-stack__ja {
    height: auto;
    margin-top: 8px;
    gap: 16px;
    flex-wrap: wrap;
  }
  body.rp-body .ac-stack__ja .rp-heading2-ja { height: auto; font-size: 24px; line-height: 30px; }
  body.rp-body .ac-tag { height: 32px; padding: 0 16px; font-size: 13px; }
  body.rp-body .ac-lead {
    margin: 40px 0 0;
    font-size: 22px;
    line-height: 1.4;
  }
  body.rp-body .ac-body {
    margin: 24px 0 0;
    line-height: 32px;
    white-space: normal;
  }

  /* ---- SHUTTLE SERVICE／PARKING：写真とテキストを縦積み ---- */
  body.rp-body .ac-shuttle,
  body.rp-body .ac-parking {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: auto;
    margin: 0;
    gap: 0;
  }
  body.rp-body .ac-shuttle__text,
  body.rp-body .ac-parking__text {
    width: auto;
    margin: 0 var(--sp-r) 0 38.8px;
  }
  body.rp-body .ac-shuttle__img,
  body.rp-body .ac-parking__img {
    align-self: stretch;
    box-sizing: border-box;
    width: auto;
    height: 240px;
    margin-top: 40px;
    padding: 0 var(--sp-r) 0 38.8px;
  }
  body.rp-body .ac-shuttle__img img,
  body.rp-body .ac-parking__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  body.rp-body .ac-shuttle + .ss-table { margin-top: 40px; }
  body.rp-body .ac-note { margin: 24px var(--sp-r) 0 38.8px; }
  body.rp-body .ac-note p { line-height: 32px; }

  /* ---- 送迎時刻表／交通お役立ちリンク：room INFORMATIONと同じ点線区切りの表組 ---- */
  body.rp-body .ss-table {
    width: auto;
    margin: 40px var(--sp-r) 0 38.8px;
  }
  body.rp-body .ss-table__row {
    display: block;
    padding: 0;
    border-bottom: 1px solid var(--color-line-gray);
  }
  body.rp-body .ss-table__row--first { border-top: 1px solid var(--color-line-gray); }
  body.rp-body .ss-table__label,
  body.rp-body .ss-table__value {
    display: block;
    width: auto;
    padding: 15.5px 0;
    line-height: 27px;
  }
  body.rp-body .ss-table__label { border-bottom: 1px dashed var(--color-line-gray); }
  body.rp-body .ac-times { white-space: pre-wrap; }

  /* ==================================================================
     STAY（過ごし方：カップル／女子旅／ファミリー共通のタイムライン）
     他ページと同じ値・手法でレスポンシブ化
  ================================================================== */
  body.rp-body .st-band--white .st-inner { padding: 80px 0; }
  body.rp-body .st-band--beige .st-daywrap:last-child { padding-bottom: 80px; }

  /* ---- DAY見出し ---- */
  body.rp-body .st-daywrap { padding-top: 80px; }
  body.rp-body .st-day {
    align-items: baseline;
    gap: 16px;
    height: auto;
    margin-left: 38.8px;
  }
  body.rp-body .st-day__en { font-size: 48px; }
  body.rp-body .st-day__ja { font-size: 18px; }

  /* ---- タイムライン共通 ---- */
  body.rp-body .st-items { padding-top: 80px; }
  body.rp-body .st-items--first { padding-top: 0; }
  body.rp-body .st-items--last { padding-top: 0; padding-bottom: 80px; }
  body.rp-body .st-arrow { margin: 40px auto; }

  body.rp-body .st-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: auto !important;
    margin: 0 !important;
    padding-left: 0 !important;
  }
  body.rp-body .st-item__text,
  body.rp-body .st-item--text .st-item__text {
    width: auto !important;
    margin: 0 var(--sp-r) 0 38.8px !important;
  }
  body.rp-body .st-item__img {
    width: 100% !important;
    height: 240px !important;
    margin: 24px 0 0 !important;
  }
  body.rp-body .st-item__img--tall {
    height: 320px !important;
    margin-top: 24px !important;
  }

  /* ---- SIGHTSEEING等（.st-item--md）左右反転に関わらずテキスト上・画像下に統一 ---- */
  body.rp-body .st-item--md .st-item__text { order: 1; }
  body.rp-body .st-item--md .st-item__img { order: 2; width: calc(100% - 80px) !important; margin: 32px 40px 0 !important; }
  body.rp-body .st-item--md .st-time { gap: 24px; }
  body.rp-body .st-item--md .st-label { margin-top: 56px; }
  body.rp-body .st-item--md .st-body { margin-top: 32px; }

  body.rp-body .st-time {
    gap: 16px;
    height: auto;
    flex-wrap: wrap;
  }
  body.rp-body .st-time__t { font-size: 32px; }
  body.rp-body .st-time__h { font-size: 17px; white-space: normal; }
  body.rp-body .st-time--full { margin-left: 38.8px; gap: 24px; }

  body.rp-body .st-label { margin-top: 40px; font-size: 18px; }
  body.rp-body .st-title { font-size: 22px; }
  body.rp-body .st-title__2 { margin-top: 12px; }

  body.rp-body .st-body {
    margin-top: 24px;
    line-height: 32px;
    white-space: normal;
  }
  body.rp-body .st-body--tight { margin-top: 24px; }

  body.rp-body .st-link {
    position: static;
    width: fit-content !important;
    gap: 24px;
    margin-top: 40px;
  }

  /* ---- SPOT（2列グリッド、3枚目は次行1列目に自動配置） ---- */
  body.rp-body .st-spot {
    width: auto;
    margin: 32px 40px 0;
  }
  body.rp-body .st-spot .st-label { margin-top: 0; }
  body.rp-body .st-spot__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px 8px;
    margin-top: 24px;
  }
  body.rp-body .st-spot__row figure { width: auto; }
  body.rp-body .st-spot__img { width: 100%; height: 98px; }
  body.rp-body .st-spot__row img { width: 100%; height: 98px; }
  body.rp-body .st-spot__row figcaption { margin-top: 8px; }
  body.rp-body .st-credit { left: auto; right: 16px; bottom: 6px; width: fit-content; white-space: nowrap; }

  /* ---- CHECK-IN（画像が先頭・矢印からの間隔は他箇所と同じ40pxに統一） ---- */
  body.rp-body .st-item--checkin .st-item__img--tall {
    order: 1;
    width: calc(100% - 48px) !important;
    height: 480px !important;
    margin: -80px 24px 0 !important;
  }
  body.rp-body .st-item--checkin .st-item__text { order: 2; margin-top: 56px !important; }
  body.rp-body .st-item--checkin .st-time { gap: 24px; }
  body.rp-body .st-item--checkin .st-label { margin-top: 56px; }
  body.rp-body .st-item--checkin .st-body { margin-top: 56px; }
  body.rp-body .st-checkin__pair {
    position: static;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
    width: auto;
    height: auto;
    margin: 56px calc(-1 * var(--sp-r)) 0 -38.8px;
  }
  body.rp-body .st-checkin__pair img { position: static; display: block; }
  body.rp-body .st-checkin__a { width: calc(100% - 40px); height: 250px; }
  body.rp-body .st-checkin__b { width: calc(100% - 152px); height: 264px; align-self: flex-end; }

  /* ---- ROOMS（17:15、label→title→本文→リンクの順に統一） ---- */
  body.rp-body .st-rooms {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: auto;
    margin: 56px var(--sp-r) 0 38.8px;
  }
  body.rp-body .st-rooms__l { display: contents; }
  body.rp-body .st-rooms__l .st-label { order: 1; margin-top: 0; }
  body.rp-body .st-rooms__l .st-title { order: 2; }
  body.rp-body .st-rooms__r { order: 3; margin-top: 32px; line-height: 32px; white-space: normal; }
  body.rp-body .st-rooms__l .st-link { order: 4; margin-top: 56px; }

  /* ---- DINNER/ONSEN/DRINK（.st-item--lg）左右反転に関わらずタイトル→画像→本文→リンクの順に統一 ---- */
  body.rp-body .st-item--lg .st-item__text { display: contents; }
  body.rp-body .st-item--lg .st-time {
    order: 1;
    gap: 24px;
    margin-left: 38.8px;
    margin-right: var(--sp-r);
  }
  body.rp-body .st-item--lg .st-label {
    order: 2;
    margin-top: 56px;
    margin-left: 38.8px;
    margin-right: var(--sp-r);
  }
  body.rp-body .st-item--lg .st-title {
    order: 3;
    margin-left: 38.8px;
    margin-right: var(--sp-r);
  }
  body.rp-body .st-item--lg .st-item__img {
    order: 4;
    width: calc(100% - 48px) !important;
    height: 284px !important;
    margin: 32px 24px 0 !important;
  }
  body.rp-body .st-item--lg .st-body {
    order: 5;
    margin-left: 38.8px;
    margin-right: var(--sp-r);
  }
  body.rp-body .st-item--lg .st-link {
    order: 6;
    margin-top: 56px;
    margin-left: 38.8px;
    margin-right: var(--sp-r);
  }

  /* ---- SIGHTSEEING（3ページ共通の最下部セクション） ---- */
  body.rp-body .st-sight__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    height: auto;
    margin-left: 38.8px;
  }
  body.rp-body .st-sight__en { font-size: 36px; }
  body.rp-body .st-sight__imgs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: auto;
    gap: 8px;
    margin: 40px var(--sp-r) 0 38.8px;
  }
  body.rp-body .st-sight__imgs img { width: 100%; height: 180px; }
  body.rp-body .st-sight__text {
    margin: 40px var(--sp-r) 0 38.8px;
    line-height: 32px;
    white-space: normal;
  }
  body.rp-body .st-link--white { margin: 40px var(--sp-r) 0 38.8px; }

  /* ==== access 細かい余白調整 ==== */
  body.rp-body .ss-canvas > section.ac-shuttle-sec,
  body.rp-body .ss-canvas > section.ac-parking-sec,
  body.rp-body .ss-canvas > section.ac-linksec {
    margin-top: 80px;
  }

  /* PARKING：タイトルを画像の上に移動（前コンテンツ→タイトル=80pxはセクション自体のmargin-topで対応済み、
     タイトル→画像=56px、画像→本文=56px） */
  body.rp-body .ac-parking__text { display: contents; }
  body.rp-body .ac-parking .ac-stack { order: 1; margin: 0 var(--sp-r) 0 38.8px; }
  body.rp-body .ac-parking__img { order: 2; margin-top: 56px; }
  body.rp-body .ac-parking .ac-lead { order: 3; margin: 56px var(--sp-r) 0 38.8px; }
  body.rp-body .ac-parking .ac-body { order: 4; margin-left: 38.8px; margin-right: var(--sp-r); }

  /* 送迎時刻表：③の前で改行（HTML側にbr-sp追加済み） */

  /* LINK：長いURLがはみ出さないよう良い位置（記号の後）で折り返す */
  body.rp-body .ss-table__value a { overflow-wrap: break-word; word-break: break-word; }

  /* ==== sightseeing 細かい余白・改行調整 ==== */
  /* 画像に重ねる写真クレジット：画像の右端から16px、長い場合は「（一社）」の前で改行（HTML側にbr-sp追加済み） */
  body.rp-body .ss-credit,
  body.rp-body .ss-credit--pickup { right: 16px; }
  /* カードタイトルの括弧書きサブテキストを1行に収まるよう縮小 */
  body.rp-body .ss-card__title-sub { font-size: 17px; }
}