@charset "UTF-8";
/* ==========================================================================
   ホテル ページ専用CSS
   common.css と衝突しないよう、セレクタは .hotel 配下に閉じる
   クラス名は common.css に合わせて camelCase（block__element / -modifier）。
   common.css に .hotelGroup__link があるので、新しい block 名は衝突しないか確認してから使う

   ブレークポイントは PC を基準にして、SP は max-width: 767px で上書きする。
   992px / 576px は崩れが気になった箇所にだけ後から足す（どちらも max-width で上書きできるよう PC 基準にしている）

   JS で動かす要素の初期状態（隠すなど）は、.js（head で html に付く）を頭に付け、
   @media (prefers-reduced-motion: no-preference) の中にだけ書く。
   JS 無効・reduce では効かず、最初から表示した状態になる。JS が付け外しする状態は is-xxx。
   js-xxx と data-reveal を CSS で使うのは、この初期状態と transition だけにする
   ========================================================================== */

.hotel {
  /* カンプの変数 maroon / gold / BK / wh */
  --color-maroon: #5e2226;
  --color-gold: #ccb372;
  --color-text: #333;
  --color-white: #fff;
  /* My Story の見出しとリードが止まって見える区間。Message の写真を止める長さと My Story の重ねもこれで決まるので 1 か所で変える */
  --myStoryStop: 200svh;
  /* KV のタイトルとイントロが止まって見える区間。Message の位置は Opening の長さを打ち消して決めているので、ここだけ変えればよい */
  --kvTitleStop: 80svh;
  --kvIntroStop: 120svh;
  /* Message の写真が切り替わってから止まって見える区間 */
  --messageStop: 150svh;
  /* 上へ戻って切り替えの線を越えても、消えていく面が消えきるまで止めておく長さ。止まる要素を線よりこのぶん手前から止める */
  --fadeOutRoom: 100svh;

  --font-serif: "Noto Serif JP", serif;
  --font-en: "Cinzel", serif;
  --font-en-text: "EB Garamond", serif;

  color: var(--color-text);
  font-family: var(--font-serif);
  /* common.css が html を 62.5% にしているので 1rem = 10px */
  font-size: 1.5rem;
  line-height: 2;
}

/* .hotel の外側だが、このページだけ common.css を上書きする。
   #main_rn::before の水色の背景がパンくずと下の余白に出るので白にし、
   帯（.hotelSns）をフッターに付けるため下の余白を 0 にする */
#main_rn::before {
  background: #fff;
}

#main_rn {
  padding-bottom: 0;
}

/* common.css の body * { letter-spacing: .05em } と body の palt を打ち消す。
   body * は子孫に直接当たるので、継承ではなく .hotel * で直接指定する。
   個別に字間を決めている所は、詳細度が同じで後ろに書いてあるので勝つ */
.hotel,
.hotel * {
  font-feature-settings: normal;
  letter-spacing: 0;
}

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

/* --------------------------------------------------------------------------
   テキストの表示（対象は HTML の data-reveal。"2" は見出しに続くブロックで、0.5s 遅らせる）
   表示した後の見た目は書かず、各要素の本来の指定に戻す。
   screen に限るのは、印刷でスクロールしていない箇所が透明のまま出ないようにするため
   My Story 導入の舞台のコピーも、同じずらし・ぼかし・カーブで動かしている（舞台のブロックに直接書いている）
   -------------------------------------------------------------------------- */
@media screen and (prefers-reduced-motion: no-preference) {
  .js [data-reveal] {
    transition:
      opacity 1.5s ease-out,
      transform 1.5s ease-out,
      filter 1s ease-out;
  }

  .js [data-reveal="2"] {
    transition-delay: 0.5s;
  }

  /* 上がる量は文字の大きさに比例させない。em だと大きい見出しほど大きく動いて、動きが目立ちすぎる */
  .js [data-reveal]:not(.is-shown, :focus-within) {
    opacity: 0;
    transform: translateY(1rem);
    filter: blur(6px);
  }
}

/* --------------------------------------------------------------------------
   背景を sticky で固定し、その上をコンテンツが流れる共通の重ね方
   （.hotelOpening / .hotelMessage）
   -------------------------------------------------------------------------- */
.hotelOpening,
.hotelMessage {
  display: grid;
  color: var(--color-white);
}

/* JS 無効のときは、前のセクションの最後の 100svh に重ね、止まった面の上へ下からせり上がらせる。
   前の面の sticky の要素より手前に描くため、positioned にする */
.hotelMessage,
.hotelMyStory {
  position: relative;
  margin-top: -100svh;
}

.hotelOpening > *,
.hotelMessage > * {
  grid-area: 1 / 1;
}

/* grid の stretch のままだと sticky の動く余地がなくなるので、上詰めにして高さを画面に合わせる */
.hotelOpening__bg,
.hotelMessage__bg {
  position: sticky;
  top: 0;
  align-self: start;
  height: 100svh;
}

.hotelOpening__bg img,
.hotelMessage__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* sticky の背景より手前に描画させる */
.hotelOpening__body,
.hotelMessage__body {
  position: relative;
}

/* --------------------------------------------------------------------------
   KV
   -------------------------------------------------------------------------- */
/* 中身の箱 100svh の後ろに、タイトルとイントロが止まって見える区間と、Message が覆いかぶさる 100svh を足す。
   flow-root にするのは、中身の margin-top が外へ抜けて .hotelKv ごと下がらないようにするため */
.hotelKv {
  display: flow-root;
  position: relative;
  height: calc(100svh + var(--kvTitleStop) + var(--kvIntroStop) + 100svh);
}

/* この線の下端が画面の上端を越えたら、タイトルからイントロに切り替える */
.hotelKv__line {
  position: absolute;
  top: 0;
  height: var(--kvTitleStop);
}

/* 中央に固定する中身。画面の中央は、固定ヘッダーの下端から画面の下端までの中央とする。
   height にしないのは、JS が無くてタイトルとイントロを縦に並べたとき、背の低い画面で上下にはみ出さないようにするため */
.hotelKv__inner,
.hotelMessage__inner,
.hotelMyStory.is-fade .hotelMyStory__intro {
  position: sticky;
  top: calc(var(--headerHeight, 0) * 1px);
  min-height: calc(100svh - var(--headerHeight, 0) * 1px);
  /* 止まっている間のヘッダーは縮んだ追従ヘッダー（約 63px）なので、その下端から画面の下端までの中央に置く。
     --headerHeight は縮む前の高さなので、差の分を下に足して中央を上げる。63px は common.css の .-move の高さを測った値 */
  padding-bottom: calc(var(--headerHeight, 0) * 1px - 63px);
}

/* ヘッダーの分だけ下げて置き、写真に対して止まったときと同じ位置にする。
   こうすると写真と一緒に上がり、写真が画面の上端で止まるのと同時に止まる。
   JS が無いと切り替えられないので、タイトルとイントロを縦に並べて両方見せる */
.hotelKv__inner {
  margin-top: calc(var(--headerHeight, 0) * 1px);
  display: grid;
  place-content: center;
  justify-items: center;
  row-gap: 6rem;
}

/* 疑似要素の膜より手前に描画させる */
.hotelKv__inner > * {
  position: relative;
}

.js .hotelKv__inner > * {
  grid-area: 1 / 1;
}

/* 背景写真に重ねて暗く沈める。要素ごと multiply にすると文字まで混ざるので疑似要素に分ける。
   写真の上を流れていた頃のグラデーションは、止まったままでは境目が見えないので単色にした。
   ヘッダーはスクロールすると縮むので、空いた所も沈むよう、ヘッダーの裏まで広げる */
.hotelKv__inner::before {
  position: absolute;
  inset: calc(var(--headerHeight, 0) * -1px) 0 0;
  background: rgb(65 99 141 / 0.2);
  mix-blend-mode: multiply;
  content: "";
}

/* 切り替えの間に重なって読めなくならないよう、消すほうを先に短く消し、出すほうはそのあとで出す */
@media screen and (prefers-reduced-motion: no-preference) {
  .js .hotelKv__inner::before {
    transition: opacity 0.6s ease-out;
  }

  /* 止まって見える区間が短いので、ほかの data-reveal（1.5s）より速く出しきる */
  .js .hotelKv [data-reveal] {
    transition:
      opacity 1s ease-out 0.3s,
      transform 1s ease-out 0.3s,
      filter 0.7s ease-out 0.3s;
  }

  .js .hotelKv [data-reveal="2"] {
    transition-delay: 0.6s;
  }

  .js .hotelKv [data-reveal]:not(.is-shown) {
    transition-duration: 0.3s;
    transition-delay: 0s;
  }
}

/* data-reveal の隠し方は reduce では効かないが、ここは同じ位置に重ねているので reduce でも隠す */
.js .hotelKv [data-reveal]:not(.is-shown),
.js .hotelKv:not(.is-intro) .hotelKv__inner::before {
  opacity: 0;
}

.hotelKv__title {
  font-family: var(--font-en);
  font-size: 5.4rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
  text-align: center;
  /* イントロと重ねたマスは背の高いイントロに合わせて伸びるので、stretch のままだとタイトルが上に寄る */
  align-self: center;
}

/* --------------------------------------------------------------------------
   イントロ
   -------------------------------------------------------------------------- */
.hotelIntro {
  padding-inline: 2rem;
  text-align: center;
}

.hotelIntro__lead img {
  width: 45rem;
  margin-inline: auto;
}

.hotelIntro__text {
  margin-top: 2rem;
  font-size: 1.3rem;
  line-height: 2.07;
  letter-spacing: -0.02em;
}

/* --------------------------------------------------------------------------
   全幅画像 ＋ 縦書きコピー
   -------------------------------------------------------------------------- */
/* 中身が入ってくる 100svh ＋ 中央に止まって見せる 100svh ＋ 次のセクションが覆いかぶさる 100svh（JS 無効のとき。JS が動くと is-fade で伸ばす） */
.hotelMessage__body {
  height: 300svh;
}

.hotelMessage__inner {
  display: flex;
  flex-direction: column;
  gap: 5.9rem;
  align-items: center;
  justify-content: center;
}

.hotelMessage__logo {
  width: 21rem;
}

.hotelMessage__copy img {
  width: 6.7rem;
}

/* 切り替えのきっかけ。この線の下端（＝Message の上端）が画面の上端を越えたら、Message に切り替える */
.hotelMessage__line {
  position: absolute;
  top: 0;
  height: 1px;
}

/* 流さずに、その場でイントロ → 写真 → ロゴとコピーの順に切り替える（JS が is-fade を付ける）。
   イントロが止まって見える 100svh にも重ね、Message の写真が画面全体に止まってから出す。
   さらに Opening を伸ばした分にも重ねるので、Message の位置は伸ばす前と同じ */
.hotelMessage.is-fade {
  margin-top: calc(-200svh - var(--messageStop) - var(--myStoryStop));
}

/* Message の写真が止まっている間（--messageStop ＋ My Story の見出しが止まって見える区間）は、下の Opening の写真も止めておく。
   短いと、Message の写真が出きる前に速く進んだとき、上へずれた Opening の写真と白が透けて見える。
   sticky が動けるのは grid のセルの中だけなので、Opening 自身ではなくセルの中身を伸ばす */
.hotelOpening.is-fade .hotelOpening__body {
  padding-bottom: calc(var(--messageStop) + var(--myStoryStop));
}

/* 見えないままイントロの上に重なるので、イントロの文字を選べるようにする */
.hotelMessage.is-fade:not(.is-current) {
  pointer-events: none;
}

/* 入ってくる 100svh（見えない）＋ 切り替えて止まって見せる --messageStop ＋ My Story の見出しが止まって見える区間。
   写真の下端を My Story のえんじの上端にそろえる */
.hotelMessage.is-fade .hotelMessage__body {
  height: calc(100svh + var(--messageStop) + var(--myStoryStop));
}

/* 上へ戻って線を越えても、写真とロゴ・コピーを消えきるまでその場に止めておく。
   上へずらすのは止まり始める位置だけで、止まり終わる位置と Message の高さは変わらない */
.hotelMessage.is-fade .hotelMessage__bg,
.hotelMessage.is-fade .hotelMessage__inner {
  margin-top: calc(var(--fadeOutRoom) * -1);
}

/* 重ねて置いているので、reduce でも隠す（KV と同じ） */
.hotelMessage.is-fade:not(.is-current) .hotelMessage__bg,
.hotelMessage.is-fade [data-reveal]:not(.is-shown) {
  opacity: 0;
}

/* My Story に切り替えるとき、写真をその場でえんじ色に変える。写真と一緒に止まり、そのまま My Story のえんじにつながる */
.hotelMessage.is-fade .hotelMessage__bg::after {
  position: absolute;
  inset: 0;
  background: var(--color-maroon);
  opacity: 0;
  content: "";
}

.hotelMessage.is-passed .hotelMessage__bg::after {
  opacity: 1;
}

/* 出すときは、イントロが消える 0.5s を待って写真を 1s で、そのあとでロゴとコピーを出す。消すときは全部を先に短く消す */
@media screen and (prefers-reduced-motion: no-preference) {
  .hotelMessage.is-fade .hotelMessage__bg {
    transition: opacity 0.5s ease-out;
  }

  .hotelMessage.is-fade.is-current .hotelMessage__bg {
    transition: opacity 1s ease-in-out 0.5s;
  }

  .hotelMessage.is-fade [data-reveal] {
    transition-delay: 1.5s;
  }

  .hotelMessage.is-fade [data-reveal="2"] {
    transition-delay: 2s;
  }

  .hotelMessage.is-fade [data-reveal]:not(.is-shown) {
    transition-duration: 0.5s;
    transition-delay: 0s;
  }

  .hotelMessage.is-fade .hotelMessage__bg::after {
    transition: opacity 0.5s ease-out;
  }

  /* ロゴとコピーが消える 0.5s を待ってから変える */
  .hotelMessage.is-passed .hotelMessage__bg::after {
    transition: opacity 1s ease-in-out 0.5s;
  }
}

/* --------------------------------------------------------------------------
   My Story
   -------------------------------------------------------------------------- */
.hotelMyStory {
  padding: 28rem 0 20.7rem;
  background: var(--color-maroon);
  color: var(--color-white);
}

.hotelMyStory__intro {
  display: flex;
  flex-direction: column;
  gap: 4.6rem;
  text-align: center;
}

/* 切り替えのきっかけ。この線の下端（＝My Story の上端）が画面の上端を越えたら、My Story に切り替える */
.hotelMyStory__line {
  position: absolute;
  top: 0;
  height: 1px;
}

/* 流さずに、その場で Message の写真をえんじに変えてから見出しとリードを出す（JS が is-fade を付ける）。
   見出しが止まって見える区間ごと Message に重ね、そのあいだは透明にして、えんじは Message の写真の下端から始める */
.hotelMyStory.is-fade {
  margin-top: calc(-100svh - var(--myStoryStop));
  padding-top: calc(var(--headerHeight, 0) * 1px);
  background: linear-gradient(transparent calc(100svh + var(--myStoryStop)), var(--color-maroon) 0);
}

.hotelMyStory.is-fade:not(.is-current) {
  pointer-events: none;
}

/* 上へ戻って線を越えても、見出しとリードを消えきるまでその場に止めておく（Message と同じ）。
   flow-root は、intro の margin が introHold の外へ抜けないようにするため（ヘッダーの高さが入る前は section の margin とも重なって消える） */
.hotelMyStory.is-fade .hotelMyStory__introHold {
  display: flow-root;
}

.hotelMyStory.is-fade .hotelMyStory__intro {
  justify-content: center;
  margin-top: calc(var(--fadeOutRoom) * -1);
}

/* intro を上へずらした分を後ろで足し、introHold の高さを変えない（舞台を引き上げる -200svh がこの高さを前提にしている） */
.hotelMyStory.is-fade .hotelMyStory__introHold::after {
  display: block;
  height: calc(var(--myStoryStop) + var(--fadeOutRoom));
  content: "";
}

/* 舞台を重ねるときは、見出しとリードを 01 の区間（100svh）の終わりまで止めておく。
   01 が出る線で sticky が切れると、消えている途中の見出しが上へ流れるため */
.hotelMyStory.is-fade .hotelMyStory__introHold.is-pinned::after {
  height: calc(var(--myStoryStop) + 100svh + var(--fadeOutRoom));
}

/* 重ねて置いているので、reduce でも隠す（KV・Message と同じ） */
.hotelMyStory.is-fade .hotelMyStory__intro [data-reveal]:not(.is-shown) {
  opacity: 0;
}

@media screen and (prefers-reduced-motion: no-preference) {
  .hotelMyStory.is-fade .hotelMyStory__intro [data-reveal] {
    transition-delay: 1.5s;
  }

  .hotelMyStory.is-fade .hotelMyStory__intro [data-reveal="2"] {
    transition-delay: 2s;
  }

  .hotelMyStory.is-fade .hotelMyStory__intro [data-reveal]:not(.is-shown) {
    transition-duration: 0.5s;
    transition-delay: 0s;
  }
}

.hotelMyStory__title {
  font-family: var(--font-en);
  font-size: 5rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
}

.hotelMyStory__lead {
  font-size: 1.6rem;
}

/* JS が is-pinned を付けたときだけ1つの舞台に重ねる。JS 無効・reduce はこの縦積みのまま */
.hotelMyStory__list {
  display: flex;
  flex-direction: column;
  gap: 12rem;
  margin-top: 19.4rem;
}

/* 写真は左寄せ。コピーは写真の右 96px に、頭を写真より上に出して置く。
   コピーの列は内容の幅（max-content）にして右へ寄せない。1180px では写真の列を縮めて収める */
.hotelMyStory__item {
  display: grid;
  grid-template-columns: minmax(0, 85.4rem) max-content;
  column-gap: 9.6rem;
  align-items: start;
  width: min(144rem, 100%);
  margin-inline: auto;
  padding-left: 12.8rem;
}

.hotelMyStory__photo {
  margin-top: 7.2rem;
}

.hotelMyStory__image {
  width: 100%;
}

.hotelMyStory__catch {
  white-space: nowrap;
  writing-mode: vertical-rl;
  /* 「117年」の半角数字も横倒しにせず立てる */
  text-orientation: upright;
}

/* .hotel * の letter-spacing: 0 は子孫に直接当たるので、span にも付ける。サブはカンプでも字間なし */
.hotelMyStory__catchMain span {
  letter-spacing: 0.1em;
}

/* 句の途中の句読点の後ろの空きを詰める。vhal は縦書き用の半角の字形で、全角の箱の下半分の空きがなくなる */
.hotelMyStory__catch .hotelMyStory__punct {
  font-feature-settings: "vhal";
  letter-spacing: 0;
}

.hotelMyStory__catchMain,
.hotelMyStory__catchSub {
  display: block;
}

/* 句のまとまりごとに inline-block にして、同じ列の中に縦の空きを作る */
.hotelMyStory__catch span span {
  display: inline-block;
}

.hotelMyStory__catchMain {
  font-size: 2.4rem;
  line-height: 1.5;
}

/* 句のあいだはカンプ（メイン 14px・サブ 18px）の約 2/3。カンプの空きは字形の上下の余白を除いた所から測っているので、そのままだと広く見える */
.hotelMyStory__catchMain span + span {
  margin-inline-start: 0.3rem;
}

.hotelMyStory__catchSub {
  margin-block-start: 1rem;
  font-size: 1.6rem;
  line-height: 1;
}

.hotelMyStory__catchSub span + span {
  margin-inline-start: 1.2rem;
}

/* 3 は場面の数。li を増減したら合わせる。li 自身の 100svh に、1場面ごとに 100svh の止まっていられる余白を足す。
   03 の区間を過ぎたら、舞台はそのまま上へ流れる。
   dvh はアドレスバーの伸縮で高さが変わるので使わない。
   SP の物語01 のテキストは背景を敷いていて、引き上げると 03 のコピーの下端に掛かるので、舞台を手前に描く */
.hotelMyStory__list.is-pinned {
  display: grid;
  position: relative;
  z-index: 2;
  height: calc(100svh + 3 * 100svh);
}

/* 見出しの止まって見える区間の終わりで、01 がもう止まっているように引き上げる。
   200svh = 見出しの箱の 100svh ＋ 上で伸ばした 01 の区間の 100svh */
.hotelMyStory.is-fade .hotelMyStory__list.is-pinned {
  margin-top: -200svh;
}

/* 上へ戻って 01 の線を越えても、01 を消えきるまでその場に止めておく（Message と同じ）。ul の位置と、03 が止まり終わる位置は変わらない */
.hotelMyStory.is-fade .hotelMyStory__list.is-pinned .hotelMyStory__item {
  margin-top: calc(var(--fadeOutRoom) * -1);
}

/* 03 の写真とコピーの下端から物語01 の見出しの上端までを 148px にする。
   li は写真とコピーを画面の高さの中で上下中央に置くので、その下の空き（--myStoryTail）を JS が測る。
   そこから、見出しの止まる前の位置（.hotelStory__text の margin-top）も引く */
.hotelMyStory__list.is-pinned + .hotelStory {
  margin-top: calc(14.8rem - var(--myStoryTail, 0px) - 7.77% * 1835 / 1440);
}

/* コピーの列は内容の幅のままだと 03 だけ広く、約 1240px 未満で 03 の写真の列だけが縮んで位置がずれるので、03 の幅に固定する。
   13.4rem = メインコピー縦3行 × 3.6rem + サブコピーの margin 1rem + サブコピー1列 1.6rem。文言や行数が変わったら測り直す。
   固定ヘッダーに隠れないよう、上にその分の余白を取る。--headerHeight は縮む前の高さなので少し大きめになる */
.hotelMyStory__list.is-pinned .hotelMyStory__item {
  grid-area: 1 / 1;
  grid-template-columns: minmax(0, 85.4rem) 13.4rem;
  position: sticky;
  top: 0;
  align-self: start;
  align-content: center;
  height: 100svh;
  padding-top: calc(var(--headerHeight, 0) * 1px);
  /* 上下中央ちょうどだと低く見えるので、下の余白で 5svh 上げる */
  padding-bottom: 10svh;
}

/* 列を 03 の幅に固定したので、幅の狭い 01・02 が列の右端に寄って写真から離れないよう、左に詰める */
.hotelMyStory__list.is-pinned .hotelMyStory__catch {
  justify-self: start;
}

/* 背の低い画面では写真の上下を切って収める。7.2rem は写真の margin-top、10svh は li の padding-bottom */
.hotelMyStory__list.is-pinned .hotelMyStory__image {
  max-height: calc(100svh - var(--headerHeight, 0) * 1px - 7.2rem - 10svh);
  object-fit: cover;
}

/* 場面の切り替え。JS が今の場面の li に is-current を付ける */
.hotelMyStory__list.is-pinned .hotelMyStory__image {
  transition: opacity 0.8s ease-in-out;
}

.hotelMyStory__list.is-pinned .hotelMyStory__item:not(.is-current) .hotelMyStory__image {
  opacity: 0;
}

/* 見出しの間は 01 を隠しておく（JS が 01 の区間に入ると section に is-scene を付ける）。
   消すときはコピーと同じ 0.3s にそろえる */
.hotelMyStory.is-fade:not(.is-scene) .hotelMyStory__list.is-pinned .hotelMyStory__image {
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

/* 出方はテキストの表示（data-reveal）に合わせ、長さだけ短くしている。ずらす量・ぼかし・カーブを変えるときは両方そろえる。
   コピーは同じ位置に重なっているので、前のコピーが消える 0.3s を待ってから出す */
.hotelMyStory__list.is-pinned .hotelMyStory__catchMain,
.hotelMyStory__list.is-pinned .hotelMyStory__catchSub {
  transition:
    opacity 1.2s ease-out 0.3s,
    transform 1.2s ease-out 0.3s,
    filter 0.8s ease-out 0.3s;
}

.hotelMyStory__list.is-pinned .hotelMyStory__catchSub {
  transition-delay: 0.8s;
}

/* 場面が変わったときと、見出しに戻ったときは、opacity だけを速く消す。ずらしとぼかしは消えきってから戻し、次に出すときに備える */
.hotelMyStory__list.is-pinned .hotelMyStory__item:not(.is-current) .hotelMyStory__catchMain,
.hotelMyStory__list.is-pinned .hotelMyStory__item:not(.is-current) .hotelMyStory__catchSub,
.hotelMyStory.is-fade:not(.is-scene) .hotelMyStory__list.is-pinned .hotelMyStory__catchMain,
.hotelMyStory.is-fade:not(.is-scene) .hotelMyStory__list.is-pinned .hotelMyStory__catchSub {
  opacity: 0;
  transform: translateY(1rem);
  filter: blur(6px);
  transition:
    opacity 0.3s ease-in-out,
    transform 0s 0.3s,
    filter 0s 0.3s;
}

/* 上へ戻ったときと、一度出きった面に下へ戻ったとき（JS が .hotel に is-quick を付ける）は、出し直しの待ちと演出をやめ、消える面と出る面を同時に短く入れ替える。
   待ちを残すと、前の面の文字が出るまで写真だけが映る。
   ずらしとぼかしは、出す側はその場で戻し、消す側は消えきってから戻す。待たずに戻すと、まだ見えている文字が下がってぼける。
   それぞれ今いちばん強いセレクタに .hotel.is-quick を足して勝たせている。舞台の写真の消し方とコピーの消し方は、もとから同じ形 */
@media screen and (prefers-reduced-motion: no-preference) {
  .hotel.is-quick .hotelKv__inner::before,
  .hotel.is-quick .hotelMessage.is-fade .hotelMessage__bg,
  .hotel.is-quick .hotelMessage.is-fade .hotelMessage__bg::after,
  .hotel.is-quick .hotelMyStory__list.is-pinned .hotelMyStory__image {
    transition: opacity 0.3s ease-in-out;
  }

  .hotel.is-quick .hotelKv [data-reveal],
  .hotel.is-quick .hotelMessage.is-fade [data-reveal],
  .hotel.is-quick .hotelMyStory.is-fade .hotelMyStory__intro [data-reveal],
  .hotel.is-quick .hotelMyStory.is-scene .hotelMyStory__list.is-pinned .hotelMyStory__item.is-current .hotelMyStory__catchMain,
  .hotel.is-quick .hotelMyStory.is-scene .hotelMyStory__list.is-pinned .hotelMyStory__item.is-current .hotelMyStory__catchSub {
    transition:
      opacity 0.3s ease-in-out,
      transform 0s,
      filter 0s;
  }

  .hotel.is-quick .hotelKv [data-reveal]:not(.is-shown),
  .hotel.is-quick .hotelMessage.is-fade [data-reveal]:not(.is-shown),
  .hotel.is-quick .hotelMyStory.is-fade .hotelMyStory__intro [data-reveal]:not(.is-shown) {
    transition:
      opacity 0.3s ease-in-out,
      transform 0s 0.3s,
      filter 0s 0.3s;
  }
}

/* --------------------------------------------------------------------------
   My Story 01〜03
   写真4枚の位置は幅に対する割合で持ち、カンプの比率のまま伸び縮みさせる。
   -reverse は写真の位置だけ左右反転させる。コピーの位置は鏡写しにならないので、カンプの座標を別に持つ
   -------------------------------------------------------------------------- */
/* テキストと写真を同じセルに重ね、テキストだけを sticky で止める。section の高さは写真の側（__gallery）が決める */
.hotelStory {
  display: grid;
  /* 列の幅を section に固定する。auto のままだと、写真の列の % の margin が幅の計算に入って列が section より広がる */
  grid-template-columns: minmax(0, 1fr);
  position: relative;
  margin-top: 20rem;
}

.hotelStory > * {
  grid-area: 1 / 1;
}

.hotelStory + .hotelStory {
  margin-top: 44.5rem;
}

/* 止まる位置はヘッダーの下 9rem。写真が下を通るときは文字を上に出す。
   止まる前の位置は margin で持つ。margin の % は幅が基準なので、section の高さに対する 7.77% を縦横比で換算する */
.hotelStory__text {
  position: sticky;
  top: calc(var(--headerHeight, 0) * 1px + 9rem);
  z-index: 1;
  align-self: start;
  justify-self: start;
  width: 35%;
  margin: calc(7.77% * 1835 / 1440) 0 0 8.26%;
}

.hotelStory.-reverse .hotelStory__text {
  margin-left: 60.56%;
}

.hotelStory__title {
  display: flex;
  flex-direction: column;
  gap: 1.3rem;
  font-weight: 400;
}

.hotelStory__titleEn {
  font-family: var(--font-en);
  font-size: 3.6rem;
  line-height: 1;
  letter-spacing: 0;
}

.hotelStory__titleJa {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.7;
}

.hotelStory__copy {
  margin-top: 4rem;
  font-size: 1.5rem;
  line-height: 2.2;
}

.hotelStory__gallery {
  position: relative;
  aspect-ratio: 1440 / 1835;
  /* テキストが止まった時点で写真がまだ出ていないよう、テキストの上端の 204px（1440 幅のとき）下から始める */
  margin-top: calc(7.77% * 1835 / 1440 + 204 / 1440 * 100%);
}

.hotelStory__image {
  position: absolute;
  top: var(--y);
  right: var(--x);
  width: var(--w);
  aspect-ratio: var(--ratio);
  object-fit: cover;
}

.hotelStory.-reverse .hotelStory__image {
  right: auto;
  left: var(--x);
}

.hotelStory__image:nth-child(1) {
  --x: 11.94%;
  --y: 0%;
  --w: 45%;
  --ratio: 648 / 386;
}

.hotelStory__image:nth-child(2) {
  --x: 0%;
  --y: 24.09%;
  --w: 48.75%;
  --ratio: 702 / 418;
}

.hotelStory__image:nth-child(3) {
  --x: 16.88%;
  --y: 49.92%;
  --w: 59.86%;
  --ratio: 862 / 514;
}

.hotelStory__image:nth-child(4) {
  --x: 4.1%;
  --y: 80.98%;
  --w: 40.69%;
  --ratio: 586 / 349;
}

/* --------------------------------------------------------------------------
   Train / Pick Up 共通の見出し（英字＋日本語）
   -------------------------------------------------------------------------- */
.hotelTrain__title,
.hotelPickup__title {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  font-weight: 400;
}

.hotelTrain__titleEn,
.hotelPickup__titleEn {
  font-family: var(--font-en);
  font-size: 5rem;
  line-height: 1;
  letter-spacing: 0;
}

.hotelTrain__titleJa,
.hotelPickup__titleJa {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.7;
}

/* --------------------------------------------------------------------------
   Train
   -------------------------------------------------------------------------- */
/* カンプでは1行が親の 447px より少し広い 450px。折り返さないので、テキストの列がこの幅まで広がり、そのぶんバナーが縮む */
.hotelTrain__titleEn {
  white-space: nowrap;
}

.hotelTrain {
  display: flex;
  gap: 10.9rem;
  align-items: center;
  justify-content: center;
  padding: 10.4rem 12rem;
  background: var(--color-gold);
}

.hotelTrain__text {
  flex: 0 0 44.7rem;
}

.hotelTrain__copy {
  margin-top: 4.4rem;
  line-height: 2.2;
}

/* body の最小幅 1180px では横に収まらないので、バナー側を縮める */
.hotelTrain__banner {
  flex: 0 1 64.2rem;
  min-width: 0;
}

.hotelTrain__link {
  display: flex;
  gap: 0.8rem;
  align-items: center;
  width: fit-content;
  margin-top: 5.9rem;
  padding-bottom: 0.7rem;
  color: inherit;
  font-size: 1.8rem;
  line-height: 1;
  text-decoration: none;
  --line-hover-color: rgb(51 51 51 / 0.7);
}

.hotelTrain__link img {
  width: 1.6rem;
}

/* --------------------------------------------------------------------------
   Pick Up / Access は中央 1200px の段組み
   -------------------------------------------------------------------------- */
.hotelPickup,
.hotelAccess {
  width: min(120rem, 100% - 4rem);
  margin-inline: auto;
}

.hotelPickup {
  padding-top: 9.7rem;
}

.hotelPickup__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.55rem;
  margin-top: 6.6rem;
}

.hotelPickup__link {
  display: block;
  color: #000;
  text-decoration: none;
}

.hotelPickup__banner {
  position: relative;
  display: block;
  overflow: hidden;
  isolation: isolate;
}

.hotelPickup__image {
  width: 100%;
  aspect-ratio: 383 / 228;
  object-fit: cover;
  /* ホバーで拡大するときの中心。カンプの拡大に合わせると、写真の中心より上に寄る */
  transform-origin: 48.9% 30.9%;
}

/* ホバーで写真だけを拡大するため、文字は別の画像にして重ねている */
img.hotelPickup__bannerText {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
}

/* 白い文字を読ませる膜。文字の画像があるバナーにだけ敷く（仮のバナーには敷かない）。
   拡大中の写真は重なり順で前に出るので、z-index で写真の上・文字の下に置く */
.hotelPickup__banner:has(.hotelPickup__bannerText)::before {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-color: rgb(75 46 2 / 0.4);
  content: "";
}

/* reduce のときは拡大だけ止め、色の変化は残す */
@media (prefers-reduced-motion: no-preference) {
  .hotelPickup__image,
  .hotelPickup__banner::before {
    transition: scale 0.6s ease-out, background-color 0.6s ease-out;
  }

  .hotelPickup__link:focus-visible .hotelPickup__image {
    scale: 1.036;
  }

  @media (hover: hover) {
    .hotelPickup__link:hover .hotelPickup__image {
      scale: 1.036;
    }
  }
}

/* タップ後にホバーの見た目が残らないよう、ホバーできる端末に限る */
@media (hover: hover) {
  .hotelPickup__link:hover .hotelPickup__banner::before {
    background-color: rgb(75 46 2 / 0.5);
  }
}

.hotelPickup__link:focus-visible .hotelPickup__banner::before {
  background-color: rgb(75 46 2 / 0.5);
}

/* カンプの余白は文字の上下を切り詰めて測った値なので、行の高さの余白と字面の上の空きを引いている */
.hotelPickup__date {
  margin-top: 1.16rem;
  font-family: var(--font-en-text);
  font-size: 1.4rem;
  font-weight: 400;
  /* EB Garamond は指定しないと数字がオールドスタイルになる */
  font-variant-numeric: lining-nums proportional-nums;
  line-height: 1.2;
}

.hotelPickup__name {
  margin-top: 0.1rem;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   Access
   -------------------------------------------------------------------------- */
.hotelAccess {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2.3rem;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1200 / 302;
  margin-top: 12rem;
  overflow: hidden;
  color: var(--color-white);
  isolation: isolate;
}

/* .hotel img の height: auto に負けないよう img を付けて詳細度を揃える */
img.hotelAccess__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
}

/* 写真を沈めて白文字を読ませる */
.hotelAccess::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgb(51 79 101 / 0.4);
  content: "";
}

.hotelAccess__title {
  font-family: var(--font-en);
  font-size: 5rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
}

.hotelAccess__link {
  display: flex;
  gap: 0.8rem;
  align-items: center;
  padding-bottom: 0.7rem;
  color: inherit;
  font-size: 1.8rem;
  line-height: 1;
  text-decoration: none;
  --line-hover-color: rgb(255 255 255 / 0.7);
}

.hotelAccess__link img {
  width: 1.6rem;
}

/* バナー全体を押せるように、リンクの当たり判定を section いっぱいに広げる */
.hotelAccess__link::after {
  position: absolute;
  inset: 0;
  content: "";
}

/* reduce のときは拡大だけ止め、色の変化は残す */
@media (prefers-reduced-motion: no-preference) {
  img.hotelAccess__bg,
  .hotelAccess::before {
    transition: scale 0.6s ease-out, background-color 0.6s ease-out;
  }

  .hotelAccess:has(.hotelAccess__link:focus-visible) img.hotelAccess__bg {
    scale: 1.05;
  }

  @media (hover: hover) {
    .hotelAccess:hover img.hotelAccess__bg {
      scale: 1.05;
    }
  }
}

/* タップ後にホバーの見た目が残らないよう、ホバーできる端末に限る */
@media (hover: hover) {
  .hotelAccess:hover::before {
    background-color: rgb(51 79 101 / 0.5);
  }
}

/* キーボード操作でも同じ見た目にする */
.hotelAccess:has(.hotelAccess__link:focus-visible)::before {
  background-color: rgb(51 79 101 / 0.5);
}

/* --------------------------------------------------------------------------
   「詳しく見る」「アクセス情報を見る」の下線
   ホバーで、細い線が右へ抜け、太い線が左から入る。外すと太い線が右へ抜け、細い線が左から戻る（どちらの向きも右へ流れる）
   カンプは太い線を乗算（白はスクリーン）で重ねているが、背景が単色なので不透明度だけで近づけている
   -------------------------------------------------------------------------- */
.hotelTrain__link,
.hotelAccess__link {
  background:
    linear-gradient(var(--line-hover-color), var(--line-hover-color)) right bottom / 0 2px no-repeat,
    linear-gradient(currentColor, currentColor) left bottom / 100% 1px no-repeat;
}

@media (prefers-reduced-motion: no-preference) {
  .hotelTrain__link,
  .hotelAccess__link {
    transition: background-size 0.4s ease-out;
  }
}

/* 「詳しく見る」はテキストの表示の transition に上書きされるので、表示の分（上の data-reveal="2"）も並べ直し、下線だけ遅らせない */
@media screen and (prefers-reduced-motion: no-preference) {
  .js .hotelTrain__link[data-reveal] {
    transition:
      opacity 1.5s ease-out 0.5s,
      transform 1.5s ease-out 0.5s,
      filter 1s ease-out 0.5s,
      background-size 0.4s ease-out;
  }
}

/* Access はバナー全体がリンクなので、バナーのホバーで動かす */
@media (hover: hover) {
  .hotelTrain__link:hover,
  .hotelAccess:hover .hotelAccess__link {
    background-position: left bottom, right bottom;
    background-size: 100% 2px, 0 1px;
  }
}

.hotelTrain__link:focus-visible,
.hotelAccess__link:focus-visible {
  background-position: left bottom, right bottom;
  background-size: 100% 2px, 0 1px;
}

/* --------------------------------------------------------------------------
   締めのコピー
   -------------------------------------------------------------------------- */
.hotelClosing {
  display: flex;
  justify-content: center;
  padding: 32.7rem 0 25.2rem;
}

/* 高さがカンプの 364px になる幅 */
.hotelClosing__copy {
  width: 2.3rem;
}

/* --------------------------------------------------------------------------
   フッターの上の帯（ロゴと SNS）
   .hotel の外に置くので、.hotel img の指定は効かない
   -------------------------------------------------------------------------- */
.hotelSns {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 4.2rem 5.4rem 2.1rem 5.6rem;
  /* 共通フッターとの境目の線。共通の footer.html は触らず、こちらの下辺に付ける */
  border-bottom: 1px solid #fff;
  background: #0d0d0d;
}

.hotelSns img {
  display: block;
  height: auto;
}

.hotelSns__logo {
  width: 19.1rem;
}

.hotelSns__list {
  display: flex;
  gap: 3rem;
  margin: 3.7rem 0 0;
  padding: 0;
  list-style: none;
}

.hotelSns__list img {
  width: 2.7rem;
}

/* ==========================================================================
   SP
   ========================================================================== */
@media screen and (max-width: 767px) {
  /* common.js が SP では html の font-size を 画面幅/414 基準にする（390px 幅で 1rem = 9.42px）。
     このブロックの rem は、390px 幅のカンプの px 値を 414/390 倍して 390px 幅でカンプどおりになるようにしている */
  .hotel {
    --myStoryStop: 150svh;
    /* 1 回はじくと 1 画面以上動くので、PC より強めに詰める */
    --kvTitleStop: 50svh;
    --kvIntroStop: 80svh;
    --messageStop: 120svh;
    font-size: 1.59rem;
  }

  .hotelOpening__bg img {
    object-position: 37% center;
  }

  /* 下の固定ナビに隠れた分を除いた範囲の中央に置く。
     common.css の .spFixNavi__listLink の padding 上下 1.8rem、アイコンの高さ 2.4rem、上の border 1px */
  .hotelKv__inner,
  .hotelMessage__inner,
  .hotelMyStory.is-fade .hotelMyStory__intro {
    padding-bottom: calc(1.8rem * 2 + 2.4rem + 1px);
  }

  .hotelKv__title {
    font-size: 5.1rem;
  }

  .hotelIntro {
    padding-inline: 2.12rem;
  }

  .hotelIntro__lead img {
    width: 37.15rem;
  }

  .hotelIntro__text {
    margin-top: 3.82rem;
    font-size: 1.27rem;
  }

  .hotelMessage__bg img {
    object-position: 76% center;
  }

  /* 中央のままだと上に寄って見えるので 2rem 下げる。上下の中央に寄せているので、padding-top はずらしたい量の 2 倍にする。
     子の data-reveal が transform を使うので、transform ではずらさない */
  .hotelMessage__inner {
    padding-top: 4rem;
    gap: 6.16rem;
  }

  .hotelMessage__logo {
    width: 22.29rem;
  }

  .hotelMessage__copy img {
    width: 7.64rem;
  }

  .hotelMyStory {
    padding: 22.72rem 0 13.59rem;
  }

  .hotelMyStory__intro {
    gap: 5.2rem;
  }

  .hotelMyStory__title {
    font-size: 3.82rem;
  }

  .hotelMyStory__lead {
    font-size: 1.49rem;
  }

  .hotelMyStory__list {
    gap: 9.34rem;
    margin-top: 10.83rem;
  }

  /* SP は写真を上、コピーを下に積む */
  .hotelMyStory__item {
    display: flex;
    flex-direction: column;
    gap: 2.65rem;
    align-items: stretch;
    width: auto;
    margin-inline: 0;
    padding-left: 0;
  }

  .hotelMyStory__photo {
    margin-top: 0;
  }

  .hotelMyStory__image {
    aspect-ratio: 390 / 423;
    object-fit: cover;
  }

  .hotelMyStory__catch {
    padding-inline: 2.12rem;
    white-space: normal;
    writing-mode: horizontal-tb;
  }

  /* 字間を変えるのは縦書きのときだけ */
  .hotelMyStory__catchMain span {
    letter-spacing: 0;
  }

  .hotelMyStory__catch span span {
    display: inline;
  }

  .hotelMyStory__catchMain span + span,
  .hotelMyStory__catchSub span + span {
    margin-inline-start: 0;
  }

  .hotelMyStory__catchMain {
    font-size: 2.12rem;
    font-weight: 500;
  }

  .hotelMyStory__catchSub {
    margin-block-start: 1.59rem;
    font-size: 1.49rem;
    line-height: 1.5;
  }

  /* コピーの高さは 390 幅の 03 を測った値（14.69rem を切り上げ）に、サブコピー1行分の余裕を足したもの。
     測った値ちょうどだと、最小フォントサイズの設定や端末ごとの改行の違いで、下の固定ナビにかかる。文言が変わったら測り直す */
  .hotelMyStory__list.is-pinned .hotelMyStory__item {
    --catchHeight: calc(14.7rem + 1.49rem * 1.5);
    /* common.css の .spFixNavi__listLink の padding 上下 1.8rem、アイコンの高さ 2.4rem、上の border 1px */
    --spNaviHeight: calc(1.8rem * 2 + 2.4rem + 1px);
    justify-content: center;
    padding-bottom: var(--spNaviHeight);
  }

  /* 03 の写真とコピーの下端から、物語01 の見出しの文字の上端までを 118px（390 幅）にし、物語どうしの間隔とそろえる。10.5rem は .hotelStory__text の padding-top */
  .hotelMyStory__list.is-pinned + .hotelStory {
    margin-top: calc(13.38rem - var(--myStoryTail, 0px) - 10.5rem);
  }

  /* 2.65rem は li の gap */
  .hotelMyStory__list.is-pinned .hotelMyStory__image {
    max-height: calc(100svh - var(--headerHeight, 0) * 1px - var(--spNaviHeight) - var(--catchHeight) - 2.65rem);
  }

  /* 3場面で写真の位置がずれないよう、コピーの高さを最も長い 03 にそろえる */
  .hotelMyStory__list.is-pinned .hotelMyStory__catch {
    height: var(--catchHeight);
  }

  /* SP は見出し・本文・写真・インジケーターを縦に並べる。写真は横スクロールのスライダーで、前後ボタンは写真と同じセルに重ねる */
  .hotelStory {
    display: grid;
    margin-top: 18.69rem;
    --storyInterval: 4s;
    /* scripts.js の initStorySlider がこの値で送る */
    --storySlide: 1.2s;
  }

  /* インジケーターから次の見出しの文字の上端までを 118px にする。見出しの上の .hotelStory__text の padding-top（10.5rem）と、行の上の余白のぶんを引いている */
  .hotelStory + .hotelStory {
    margin-top: 0.56rem;
  }

  /* 上の 10.5rem は .hotelMyStory__list.is-pinned + .hotelStory の計算が前提にしている */
  .hotelStory__text,
  .hotelStory.-reverse .hotelStory__text {
    grid-area: 1 / 1;
    position: static;
    justify-self: stretch;
    width: auto;
    margin: 0;
    padding: 10.5rem 2.12rem 0;
  }

  /* 見出し・本文の間隔は、カンプの文字の上端〜下端の間隔（28px・32px）から、行の上下の余白のぶんを引いた値 */
  .hotelStory__title {
    gap: 1.2rem;
    text-align: center;
  }

  .hotelStory__titleEn {
    font-size: 4.56rem;
  }

  /* SP のカンプは前後の「-」がない。PC と同じ HTML なので、SP だけ隠す */
  .hotelStory__dash {
    display: none;
  }

  .hotelStory__titleJa {
    font-size: 1.7rem;
  }

  .hotelStory__copy {
    margin-top: 1.45rem;
    font-size: 1.49rem;
  }

  /* position: relative は子の offsetLeft の基準にする（scripts.js の initStorySlider） */
  .hotelStory__gallery {
    grid-area: 2 / 1;
    position: relative;
    display: flex;
    gap: 1.7rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    aspect-ratio: auto;
    margin-top: 4.25rem;
    /* 左右に隣の写真の端を見せるため、写真を容器の中央に置く */
    padding-inline: calc((100% - 35.03rem) / 2);
    /* PC で SP 幅を見たとき、常に表示されるスクロールバーを隠す */
    scrollbar-width: none;
  }

  /* scrollbar-width に対応していない古い Chrome / Safari 向け */
  .hotelStory__gallery::-webkit-scrollbar {
    display: none;
  }

  /* JS が写真を送っている間はスナップを外す（scripts.js の initStorySlider） */
  .hotelStory__gallery.is-sliding {
    scroll-snap-type: none;
  }

  .hotelStory__image {
    position: static;
    flex: none;
    width: 35.03rem;
    height: auto;
    aspect-ratio: 330 / 196;
    scroll-snap-align: center;
    /* 慣性で 2 枚以上飛ばさない */
    scroll-snap-stop: always;
  }

  /* 前後ボタンは写真と同じセルに重ねる。margin-top は写真の margin-top と同じ値で、中央揃えを写真の高さの中に収める */
  .hotelStory__prev,
  .hotelStory__next {
    grid-area: 2 / 1;
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    align-self: center;
    width: 3.82rem;
    height: 3.82rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--color-white);
    cursor: pointer;
  }

  .hotelStory__prev {
    justify-self: start;
    margin: 4.25rem 0 0 1.06rem;
  }

  .hotelStory__next {
    justify-self: end;
    margin: 4.25rem 1.06rem 0 0;
  }

  .hotelStory__prev::before,
  .hotelStory__next::before {
    content: "";
    width: 0.85rem;
    height: 0.85rem;
    border-bottom: 1.5px solid var(--color-maroon);
    border-left: 1.5px solid var(--color-maroon);
    transform: translateX(0.2rem) rotate(45deg);
  }

  .hotelStory__next::before {
    transform: translateX(-0.2rem) rotate(-135deg);
  }

  .hotelStory__dots {
    grid-area: 3 / 1;
    justify-self: start;
    align-self: start;
    display: flex;
    gap: 0.74rem;
    margin: 3.4rem 0 0 2.12rem;
  }

  .hotelStory__dot {
    position: relative;
    width: 5.84rem;
    height: 2px;
  }

  .hotelStory__dot::before,
  .hotelStory__dot::after {
    content: "";
    position: absolute;
    inset: 0;
  }

  /* カンプの #747474 の乗算を、えんじに掛けた結果の色で塗る。mix-blend-mode のままだと、
     出てくる途中（opacity・transform・filter が付いている間）は乗算の相手がえんじにならず、グレーに見える */
  .hotelStory__dot::before {
    background: #2b1011;
  }

  .hotelStory__dot::after {
    background: var(--color-white);
    transform: scaleX(0);
    transform-origin: left;
  }

  /* is-leaving は、写真が動き出してから止まりきるまでの前のバー */
  .hotelStory__dot.is-current::after,
  .hotelStory__dot.is-leaving::after {
    transform: scaleX(1);
  }

  .hotelStory__dot.is-leaving::after {
    opacity: 0;
  }

  /* 自動再生の時計は、今のバーが伸びきったときの animationend。reduce では animation を付けないので自動再生しない */
  @media (prefers-reduced-motion: no-preference) {
    /* スライダーは、本文が出終わってから（initStoryOrder が is-waiting を外してから）、テキストの表示と同じ出方で出す。
       transition を待っていないときだけに付けるのは、読み込み時に is-waiting を付けたとき、見えていた写真が消えていく動きを見せないため */
    .hotelStory:not(.is-waiting) :is(.hotelStory__gallery, .hotelStory__prev, .hotelStory__next, .hotelStory__dots) {
      transition:
        opacity 1.5s ease-out,
        transform 1.5s ease-out,
        filter 1s ease-out;
    }

    .hotelStory.is-waiting :is(.hotelStory__gallery, .hotelStory__prev, .hotelStory__next, .hotelStory__dots) {
      opacity: 0;
      transform: translateY(1rem);
      filter: blur(6px);
    }

    /* is-leaving にも同じ animation を書くのは、名前が変わると最初から伸び直してしまうため。伸びは止めて、白を送る間に消す */
    .hotelStory__dot.is-current::after,
    .hotelStory__dot.is-leaving::after {
      animation: hotelStoryProgress var(--storyInterval) linear;
    }

    .hotelStory__dot.is-leaving::after {
      animation-play-state: paused;
      transition: opacity var(--storySlide);
    }

    .hotelStory.is-paused .hotelStory__dot.is-current::after {
      animation-play-state: paused;
    }

    @keyframes hotelStoryProgress {
      from {
        transform: scaleX(0);
      }
    }
  }

  .hotelTrain__title,
  .hotelPickup__title {
    gap: 1.17rem;
    text-align: center;
  }

  .hotelTrain__titleEn,
  .hotelPickup__titleEn {
    font-size: 3.82rem;
  }

  .hotelTrain__titleJa,
  .hotelPickup__titleJa {
    font-size: 1.7rem;
  }

  .hotelTrain {
    flex-direction: column;
    gap: 6.79rem;
    align-items: stretch;
    padding: 8.81rem 2.12rem 3.48rem;
  }

  .hotelTrain__text {
    flex: none;
  }

  .hotelTrain__copy {
    margin-top: 2.55rem;
    font-size: 1.49rem;
  }

  .hotelTrain__link {
    gap: 0.94rem;
    margin: 2.97rem auto 0;
    padding-bottom: 0.74rem;
    font-size: 1.49rem;
  }

  .hotelTrain__link img {
    width: 1.37rem;
  }

  .hotelTrain__banner {
    flex: none;
    width: 100%;
  }

  .hotelPickup {
    width: calc(100% - 4.24rem);
    padding-top: 8.81rem;
  }

  .hotelPickup__list {
    grid-template-columns: 1fr;
    gap: 3.4rem;
    margin-top: 2.55rem;
  }

  .hotelPickup__date {
    margin-top: 1.13rem;
    font-size: 1.38rem;
  }

  .hotelPickup__name {
    font-size: 1.7rem;
  }

  /* SP は左右の余白なしで画面幅いっぱい */
  .hotelAccess {
    width: auto;
    gap: 2.02rem;
    aspect-ratio: 390 / 183;
    margin-top: 12.42rem;
  }

  img.hotelAccess__bg {
    object-position: 53% 36%;
  }

  .hotelAccess__title {
    font-size: 3.82rem;
  }

  .hotelAccess__link {
    gap: 0.64rem;
    padding-bottom: 0.74rem;
    font-size: 1.49rem;
  }

  .hotelAccess__link img {
    width: 1.27rem;
  }

  .hotelClosing {
    padding: 14.44rem 0 14.12rem;
  }

  .hotelClosing__copy {
    width: 2.02rem;
  }

  .hotelSns {
    flex-direction: column;
    align-items: center;
    padding: 2.97rem 0 4.25rem;
  }

  .hotelSns__logo {
    width: 20.28rem;
  }

  .hotelSns__list {
    gap: 3.18rem;
    margin-top: 2.89rem;
  }

  .hotelSns__list img {
    width: 2.87rem;
  }
}