@charset "UTF-8";
/*
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com
Twitter: @rich_clark
*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

body {
  line-height: 1;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

nav ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: "";
  content: none;
}

a {
  margin: 0;
  padding: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

/* change colours to suit your needs */
ins {
  background-color: #ff9;
  color: #000;
  text-decoration: none;
}

/* change colours to suit your needs */
mark {
  background-color: #ff9;
  color: #000;
  font-style: italic;
  font-weight: bold;
}

del {
  text-decoration: line-through;
}

abbr[title], dfn[title] {
  border-bottom: 1px dotted;
  cursor: help;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* change border colour to suit your needs */
hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #D9D9D9;
  margin: 1em 0;
  padding: 0;
}

input, select {
  vertical-align: middle;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

svg,
img {
  max-width: 100%;
  vertical-align: middle;
}

svg {
  overflow: visible;
}

li {
  list-style: none;
}

h1, h2, h3, h4, h5, h6, th, dt {
  font-weight: inherit;
}

article, main, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, picture {
  display: block;
}

/*
 * Lenis（慣性スクロール）
 * 本来は lenis/dist/lenis.css を読み込むが、lenis は package.json で
 * sideEffects: false を宣言しているため、JS から import すると Rollup に
 * ツリーシェイクされてバンドルに入らない。そのため SCSS 側で定義する。
 * 追従元: node_modules/lenis/dist/lenis.css
 */
html.lenis,
html.lenis body {
  height: auto;
}

/* lenis.stop() 中にキーボード・スクロールバー操作でスクロールするのを防ぐ */
.lenis:not(.lenis-autoToggle).lenis-stopped {
  overflow: clip;
}

/* 入れ子のスクロール領域（data-lenis-prevent）で親にスクロールを伝播させない */
.lenis [data-lenis-prevent],
.lenis [data-lenis-prevent-wheel],
.lenis [data-lenis-prevent-touch],
.lenis [data-lenis-prevent-vertical],
.lenis [data-lenis-prevent-horizontal] {
  overscroll-behavior: contain;
}

/* 慣性スクロール中に iframe がホイールイベントを奪うのを防ぐ */
.lenis.lenis-smooth iframe {
  pointer-events: none;
}

:root {
  --sans: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro", "メイリオ", "Meiryo", sans-serif;
  --serif: "Noto Serif JP", "游明朝", YuMincho, "Hiragino Mincho ProN", "Hiragino Mincho Pro", "HG明朝E", "ＭＳ 明朝", serif;
  --font: var(--serif);
  --Garamond: "Cormorant Garamond", serif;
  --mincho: "Shippori Mincho B1", var(--serif);
  --black: #333333;
  --white: #FFFFFF;
  --gray-1: #E6E6E6;
  --gray-2: #808080;
  --beige-1: #FCFAF2;
  --beige-2: #F2ECDA;
  --beige-3: #F6F1E5;
  --brown-1: #331D12;
  --gold-1: #CCAE52;
  --gold-1-hover: #D4BA6C;
  --shadow1: 0 0 1.5rem #F2E6C2;
  --color: var(--black);
  --color-inverse: var(--white);
  --header-height: 3.75rem;
  --header-offset: 3.75rem;
}
@media screen and (min-width: 1024px) {
  :root {
    --header-height: 7.125rem;
    --header-offset: 7.1875rem;
  }
}
:root {
  --header-logo-w: 9.25rem;
  --header-logo-top: 0.875rem;
  --header-logo-top-compact: 1.375rem;
  --header-action-top: 1rem;
  --header-nav-top: 0px;
}
@media screen and (min-width: 1024px) {
  :root {
    --header-logo-w: 11.25rem;
    --header-logo-top: 2.3125rem;
    --header-action-top: 1.5rem;
    --header-nav-top: 4.375rem;
  }
}
:root {
  --stroke1: 1px;
  --img-icon-check: url(../img/icon-check.svg);
  --img-icon-logo: url(../img/icon-logo.svg);
  --img-icon-logo-alpha: url(../img/icon-logo-alpha.svg);
  --img-bg-noise: url(../img/bg-noise.svg);
  --img-p-restaurant-sec2-bg: url(../img/p-restaurant-sec2-bg.webp);
  --img-p-restaurant-sec2-bg-sp: url(../img/p-restaurant-sec2-bg-sp.webp);
  --img-p-top-restaurant-bg-2: url(../img/p-top-restaurant-bg-2.webp);
  --mask-logo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='486' height='302' viewBox='0 0 486 302'%3E%3Cpath d='M430.785 244.726C387.793 267.919 341.692 284.767 293.907 294.751C245.71 304.72 202.716 305.728 201.307 268.289L205.771 248.499C188.462 243.603 163.474 246.363 136.92 251.853C89.1178 261.837 43.0021 278.695 0 301.906L55.2002 57.1953C98.2026 33.9867 144.312 17.1142 192.106 7.09863C240.276 -2.82812 283.284 -3.87771 284.693 33.5332L280.206 53.4248C297.517 58.3275 322.514 55.5602 349.065 50.0684C396.869 40.0659 442.988 23.203 486 0L430.785 244.726Z' fill='white'/%3E%3C/svg%3E");
  --gap: 0.75rem;
  --padding-section: 6.75rem;
  --padding-section-lg: 10rem;
}
@media screen and (min-width: 1024px) {
  :root {
    --gap: 1rem;
    --padding-section: 10.25rem;
    --padding-section-lg: 10rem;
  }
}

@media screen and (min-width: 1024px) {
  body.is-header-compact {
    --header-height: 5.3125rem;
    --header-logo-top: var(--header-logo-top-compact);
    --header-action-top: 0.625rem;
    --header-nav-top: 3.25rem;
  }
}

:root {
  --easeInSine: cubic-bezier(0.47, 0, 0.745, 0.715);
  --easeOutSine: cubic-bezier(0.39, 0.575, 0.565, 1);
  --easeInOutSine: cubic-bezier(0.445, 0.05, 0.55, 0.95);
  --easeInQuad: cubic-bezier(0.55, 0.085, 0.68, 0.53);
  --easeOutQuad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --easeInOutQuad: cubic-bezier(0.455, 0.03, 0.515, 0.955);
  --easeInCubic: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  --easeOutCubic: cubic-bezier(0.215, 0.61, 0.355, 1);
  --easeInOutCubic: cubic-bezier(0.645, 0.045, 0.355, 1);
  --easeInQuart: cubic-bezier(0.895, 0.03, 0.685, 0.22);
  --easeOutQuart: cubic-bezier(0.165, 0.84, 0.44, 1);
  --easeInOutQuart: cubic-bezier(0.77, 0, 0.175, 1);
  --easeInQuint: cubic-bezier(0.755, 0.05, 0.855, 0.06);
  --easeOutQuint: cubic-bezier(0.23, 1, 0.32, 1);
  --easeInOutQuint: cubic-bezier(0.86, 0, 0.07, 1);
  --easeInExpo: cubic-bezier(0.95, 0.05, 0.795, 0.035);
  --easeOutExpo: cubic-bezier(0.19, 1, 0.22, 1);
  --easeInOutExpo: cubic-bezier(1, 0, 0, 1);
  --easeInBack: cubic-bezier(0.6, -0.28, 0.735, 0.045);
  --easeOutBack: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --easeInOutBack: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --duration: .3s;
  --easeTheme: var(--easeOutSine);
  --duration-hover: .6s;
  --duration-hover-move: .9s;
  --duration-hover-zoom: 1.2s;
  --ease-hover: var(--easeOutQuart);
  --ease-hover-lingering: var(--easeOutExpo);
}

.is-section-dark {
  --color: var(--white);
}

:root,
:root[data-theme=grghotelnaha] {
  --color-accent: #1B5949;
  --color-accent-hover: #3D7264;
  --mv-logo-w: 13.875rem;
  --mv-logo-mt: 0.125rem;
  --mv-logo-img-w: 112.79%;
  --mv-logo-img-x: -6.39%;
  --mv-logo-img-t: -6.39%;
  --mv-logo-img-b: -6.39%;
}
@media screen and (min-width: 1024px) {
  :root,
  :root[data-theme=grghotelnaha] {
    --mv-logo-w: 24.4375rem;
    --mv-logo-mt: 0.1875rem;
  }
}

:root[data-theme=grghotelnaha-h] {
  --color-accent: #E07224;
  --color-accent-hover: #E58745;
  --mv-logo-w: 17rem;
  --mv-logo-mt: 0px;
  --mv-logo-img-w: 105.15%;
  --mv-logo-img-x: -0.10%;
  --mv-logo-img-t: -4.44%;
  --mv-logo-img-b: -5.15%;
}
@media screen and (min-width: 1024px) {
  :root[data-theme=grghotelnaha-h] {
    --mv-logo-w: 30.5625rem;
  }
}

:root[data-theme=hotelblion] {
  --color-accent: #7F0D2A;
  --color-accent-hover: #92314A;
  --header-logo-w: 6.75rem;
  --header-logo-top: 0.625rem;
}
@media screen and (min-width: 1024px) {
  :root[data-theme=hotelblion] {
    --header-logo-w: 9.125rem;
    --header-logo-top: 1.875rem;
    --header-logo-top-compact: 0.96875rem;
  }
}
:root[data-theme=hotelblion] {
  --mv-logo-w: 13.4375rem;
  --mv-logo-mt: 0px;
  --mv-logo-img-w: 114.38%;
  --mv-logo-img-x: -7.44%;
  --mv-logo-img-t: -6.31%;
  --mv-logo-img-b: -12.48%;
}
@media screen and (min-width: 1024px) {
  :root[data-theme=hotelblion] {
    --mv-logo-w: 24rem;
  }
}

/*----------------------------------------------------
	c-paragraph
----------------------------------------------------*/
.c-paragraph {
  font-size: 1rem;
  line-height: 2;
}

/*::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*----------------------------------------------------
	c-btn
----------------------------------------------------*/
@keyframes c-btn-arrow-through {
  0% {
    transform: translateX(0);
    animation-timing-function: var(--ease-hover);
  }
  40% {
    transform: translateX(var(--arrow-through, 220%));
  }
  40.01% {
    transform: translateX(calc(-1 * var(--arrow-through, 220%)));
    animation-timing-function: var(--ease-hover);
  }
  80% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(0);
  }
}
.c-btn-arrow, .c-btn-bnr__arrow, .c-btn-round__arrow {
  display: flex;
  width: 2.5rem;
  height: 1.5rem;
  padding: 0;
  line-height: 0;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 6.25rem;
  overflow: hidden;
  border: var(--stroke1) solid var(--white, #FFF);
  background: var(--color-accent);
  transition: background-color var(--duration-hover) var(--ease-hover), border-color var(--duration-hover) var(--ease-hover);
}
.c-btn-arrow svg, .c-btn-bnr__arrow svg, .c-btn-round__arrow svg {
  width: 1rem;
  height: auto;
  aspect-ratio: 16/8;
  stroke: #fff;
  transition: stroke var(--duration-hover) var(--ease-hover);
}
@media (hover: hover) {
  .c-btn-arrow:hover svg, .c-btn-bnr__arrow:hover svg, .c-btn-round__arrow:hover svg, a:hover .c-btn-arrow svg, a:hover .c-btn-bnr__arrow svg, a:hover .c-btn-round__arrow svg, button:hover .c-btn-arrow svg, button:hover .c-btn-bnr__arrow svg, button:hover .c-btn-round__arrow svg {
    animation: c-btn-arrow-through var(--duration-hover-move);
  }
}

.c-btn-arrow--wh, .c-btn-round--assort .c-btn-round__arrow {
  border-color: var(--color-accent);
  background: var(--white, #FFF);
}
.c-btn-arrow--wh svg, .c-btn-round--assort .c-btn-round__arrow svg {
  stroke: var(--color-accent);
}

.c-btn-arrow--circle {
  width: 2.5rem;
  height: 2.5rem;
  border-color: var(--gray-1, #E6E6E6);
  background: var(--white, #FFF);
}
.c-btn-arrow--circle svg {
  stroke: var(--color-accent);
}
@media (hover: hover) {
  .c-btn-arrow--circle:hover, a:hover .c-btn-arrow--circle, button:hover .c-btn-arrow--circle {
    border-color: var(--white, #FFF);
    background: var(--color-accent);
  }
  .c-btn-arrow--circle:hover svg, a:hover .c-btn-arrow--circle svg, button:hover .c-btn-arrow--circle svg {
    stroke: var(--white, #FFF);
  }
}

/*::::::::::::::::::::::::::::::::::::::::::::::::::*/
.c-btn-circle-sm, .cm-section-group-item__arrow,
.c-btn-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  aspect-ratio: 1/1;
  border: var(--stroke1) solid #ccc;
  border-radius: 100%;
  overflow: hidden;
  --arrow-through: 250%;
  transition: background-color var(--duration-hover) var(--ease-hover), border-color var(--duration-hover) var(--ease-hover);
}
.c-btn-circle-sm svg, .cm-section-group-item__arrow svg,
.c-btn-circle svg {
  width: 0.75rem;
  height: auto;
  aspect-ratio: 12/8;
  stroke: #ccc;
  transition: stroke var(--duration-hover) var(--ease-hover);
}
@media (hover: hover) {
  .c-btn-circle-sm:hover svg, .cm-section-group-item__arrow:hover svg, a:hover .c-btn-circle-sm svg, a:hover .cm-section-group-item__arrow svg, button:hover .c-btn-circle-sm svg, button:hover .cm-section-group-item__arrow svg,
  .c-btn-circle:hover svg,
  a:hover .c-btn-circle svg,
  button:hover .c-btn-circle svg {
    animation: c-btn-arrow-through var(--duration-hover-move);
  }
}
@media screen and (min-width: 1024px) {
  .c-btn-circle-sm, .cm-section-group-item__arrow,
  .c-btn-circle {
    width: 3rem;
    height: 3rem;
  }
}

.c-btn-circle--prev {
  transform: rotate(-180deg);
}

.c-btn-circle-sm, .cm-section-group-item__arrow {
  width: 1.5rem;
  height: 1.5rem;
}
.c-btn-circle-sm svg, .cm-section-group-item__arrow svg {
  width: 0.75rem;
}
@media screen and (min-width: 1024px) {
  .c-btn-circle-sm, .cm-section-group-item__arrow {
    width: 1.5rem;
    height: 1.5rem;
  }
}

/*::::::::::::::::::::::::::::::::::::::::::::::::::*/
.c-btn-round {
  display: inline-flex;
  align-items: center;
  width: 15.25rem;
  height: 3.5rem;
  padding: 1rem 1rem 1rem 2rem;
  gap: 0.5rem;
  border-radius: 1.75rem;
  border: 0.0625rem solid var(--gray-1, #E6E6E6);
  background: var(--white, #FFF);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  text-align: left;
  transition: color var(--duration-hover) var(--ease-hover), background-color var(--duration-hover) var(--ease-hover), border-color var(--duration-hover) var(--ease-hover), transform var(--duration-hover) var(--ease-hover);
}
@media (hover: hover) {
  .c-btn-round:hover, a:hover .c-btn-round, button:hover .c-btn-round {
    border-color: var(--color-accent);
    background: var(--color-accent);
    color: var(--white, #FFF);
  }
  .c-btn-round:hover .c-btn-round__arrow, a:hover .c-btn-round .c-btn-round__arrow, button:hover .c-btn-round .c-btn-round__arrow {
    border-color: var(--color-accent);
    background: var(--white, #FFF);
  }
  .c-btn-round:hover .c-btn-round__arrow svg, a:hover .c-btn-round .c-btn-round__arrow svg, button:hover .c-btn-round .c-btn-round__arrow svg {
    stroke: var(--color-accent);
  }
  .c-btn-round:hover .c-btn-round__ico svg, a:hover .c-btn-round .c-btn-round__ico svg, button:hover .c-btn-round .c-btn-round__ico svg {
    fill: var(--white, #FFF);
  }
}
@media (hover: none) {
  .c-btn-round:active {
    transform: scale(0.965);
  }
}

.c-btn-round__txt {
  flex: 1;
}

.c-btn-round__ico {
  width: 1rem;
}
.c-btn-round__ico svg {
  width: 100%;
  aspect-ratio: 1/1;
  transition: fill var(--duration-hover) var(--ease-hover);
  fill: var(--color-accent);
}

.c-btn-round--assort {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--white, #FFF);
}
.c-btn-round--assort .c-btn-round__ico svg {
  fill: var(--white, #FFF);
}
@media (hover: hover) {
  .c-btn-round--assort:hover, a:hover .c-btn-round--assort, button:hover .c-btn-round--assort {
    background: var(--white, #FFF);
    color: var(--black, #333);
  }
  .c-btn-round--assort:hover .c-btn-round__arrow, a:hover .c-btn-round--assort .c-btn-round__arrow, button:hover .c-btn-round--assort .c-btn-round__arrow {
    border-color: var(--white, #FFF);
    background: var(--color-accent);
  }
  .c-btn-round--assort:hover .c-btn-round__arrow svg, a:hover .c-btn-round--assort .c-btn-round__arrow svg, button:hover .c-btn-round--assort .c-btn-round__arrow svg {
    stroke: #fff;
  }
  .c-btn-round--assort:hover .c-btn-round__ico svg, a:hover .c-btn-round--assort .c-btn-round__ico svg, button:hover .c-btn-round--assort .c-btn-round__ico svg {
    fill: var(--color-accent);
  }
}

.c-btn-round--reserve {
  padding: 1rem 1rem 1rem 1rem;
  border-color: var(--color-accent);
}

/*::::::::::::::::::::::::::::::::::::::::::::::::::*/
.c-btn-header {
  display: inline-flex;
  width: 9.5rem;
  height: 2.125rem;
  padding: 0.625rem;
  justify-content: center;
  align-items: center;
  gap: 0.25rem;
  border-radius: 0.25rem;
  background: var(--color-accent);
  color: var(--white, #FFF);
  text-align: center;
  font-size: 0.875rem;
  line-height: 1;
}
.c-btn-header span {
  flex: 1;
}
.c-btn-header i {
  width: 0.5rem;
}
.c-btn-header i svg {
  width: 100%;
  aspect-ratio: 1/1;
  fill: #fff;
  transition: transform var(--duration-hover-move) var(--ease-hover-lingering);
}
@media (hover: none) {
  .c-btn-header:active {
    transform: scale(0.965);
  }
}
@media (hover: hover) {
  .c-btn-header:hover, a:hover .c-btn-header, button:hover .c-btn-header {
    background: var(--color-accent-hover);
  }
  .c-btn-header:hover i svg, a:hover .c-btn-header i svg, button:hover .c-btn-header i svg {
    transform: translateX(0.125rem);
  }
}

.c-btn-header--member {
  background: var(--gold-1, #CCAE52);
}
@media (hover: none) {
  .c-btn-header--member:active {
    transform: scale(0.965);
  }
}
@media (hover: hover) {
  .c-btn-header--member:hover, a:hover .c-btn-header--member, button:hover .c-btn-header--member {
    background: var(--gold-1-hover, #D4BA6C);
  }
}

/*::::::::::::::::::::::::::::::::::::::::::::::::::*/
.c-btn-header-sm {
  display: inline-flex;
  align-items: center;
  gap: 0.125rem;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1;
}
.c-btn-header-sm i {
  width: 0.5rem;
  line-height: 0;
}
.c-btn-header-sm i svg {
  width: 100%;
  aspect-ratio: 1/1;
  fill: var(--color-accent);
  transition: transform var(--duration-hover-move) var(--ease-hover-lingering);
}
@media (hover: hover) {
  .c-btn-header-sm:hover, a:hover .c-btn-header-sm, button:hover .c-btn-header-sm {
    color: var(--color-accent);
  }
  .c-btn-header-sm:hover i svg, a:hover .c-btn-header-sm i svg, button:hover .c-btn-header-sm i svg {
    transform: translateX(0.125rem);
  }
}

/*::::::::::::::::::::::::::::::::::::::::::::::::::*/
.c-btn-header-lang {
  display: inline-flex;
  align-items: center;
  gap: 0.125rem;
  padding: 0;
  font-size: 0.875rem;
  line-height: 1;
}
@media (hover: hover) {
  .c-btn-header-lang:hover, a:hover .c-btn-header-lang, button:hover .c-btn-header-lang {
    color: var(--color-accent);
  }
}
@media screen and (min-width: 1024px) {
  .c-btn-header-lang {
    font-size: 0.9375rem;
  }
}

.c-btn-header-lang__ico {
  width: 1rem;
}

.c-btn-header-lang__triangle {
  line-height: 0;
  width: 0.5rem;
}
.c-btn-header-lang__triangle svg {
  width: 100%;
  aspect-ratio: 12/8;
  fill: var(--color-accent);
  transition: transform var(--duration-hover-move) var(--ease-hover-lingering);
}
@media (hover: hover) {
  .c-btn-header-lang__triangle:hover svg, a:hover .c-btn-header-lang__triangle svg, button:hover .c-btn-header-lang__triangle svg {
    transform: translateY(0.125rem);
  }
}
@media screen and (min-width: 1024px) {
  .c-btn-header-lang__triangle {
    width: 0.75rem;
    margin-left: 0.5em;
  }
}

/*::::::::::::::::::::::::::::::::::::::::::::::::::*/
.c-btn-menu {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  cursor: pointer;
  position: relative;
  border-radius: 0.5rem;
  border: var(--stroke1) solid var(--color-accent);
  background: var(--color-accent);
  transition: background-color var(--duration-hover) var(--ease-hover), border-color var(--duration-hover) var(--ease-hover);
}
.c-btn-menu span {
  position: absolute;
  display: block;
  width: 1rem;
  height: 0;
  border-top: var(--stroke1) solid #fff;
  transition: top 0.35s var(--easeTheme), width 0.35s var(--easeTheme), left 0.35s var(--easeTheme), border-color var(--duration-hover) var(--ease-hover), transform 0s var(--easeTheme);
}
@media (hover: hover) {
  .c-btn-menu:hover, a:hover .c-btn-menu, button:hover .c-btn-menu {
    background: var(--white, #FFF);
  }
  .c-btn-menu:hover span, a:hover .c-btn-menu span, button:hover .c-btn-menu span {
    border-top-color: var(--color-accent);
  }
}
.c-btn-menu span:nth-child(1) {
  top: calc(50% - 0.3125rem);
}
.c-btn-menu span:nth-child(2) {
  top: 50%;
}
.c-btn-menu span:nth-child(3) {
  top: calc(50% + 0.3125rem);
}
.c-btn-menu.is-nav-open span {
  transition: top 0.2s var(--easeTheme), width 0.2s var(--easeTheme), left 0.2s var(--easeTheme), border-color var(--duration-hover) var(--ease-hover), transform 0.3s 0.2s var(--easeTheme);
}
.c-btn-menu.is-nav-open span:nth-child(1) {
  top: 50%;
  transform: scale(-1, -1) rotate(-35deg);
}
.c-btn-menu.is-nav-open span:nth-child(2) {
  width: 0;
  left: 50%;
}
.c-btn-menu.is-nav-open span:nth-child(3) {
  top: 50%;
  transform: scale(-1, -1) rotate(35deg);
}

/*::::::::::::::::::::::::::::::::::::::::::::::::::*/
.c-btn-bnr-list {
  display: grid;
  gap: 1rem;
}
@media screen and (min-width: 1024px) {
  .c-btn-bnr-list {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }
}

.c-btn-bnr {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  aspect-ratio: 624/240;
  position: relative;
  border-radius: 0.5rem;
  padding: 1rem;
  overflow: hidden;
}
@media screen and (min-width: 1024px) {
  .c-btn-bnr {
    padding: 2rem;
  }
}

.c-btn-bnr__pic {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  overflow: hidden;
}
.c-btn-bnr__pic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (hover: hover) {
  .c-btn-bnr__pic img {
    will-change: transform;
  }
}
.c-btn-bnr__pic img {
  transition: transform var(--duration-hover-zoom) var(--ease-hover);
}
@media (hover: hover) {
  .c-btn-bnr__pic:hover img, a:hover .c-btn-bnr__pic img, button:hover .c-btn-bnr__pic img {
    transform: scale(1.06);
  }
}
.c-btn-bnr__wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}
.c-btn-bnr__ja {
  color: var(--white, #FFF);
  font-size: 1.375rem;
  line-height: 1;
  letter-spacing: 0.05em;
}
@media screen and (min-width: 1024px) {
  .c-btn-bnr__ja {
    font-size: 2rem;
  }
}

.c-btn-bnr__en {
  margin-top: 0.5rem;
  color: var(--white, #FFF);
  font-family: var(--Garamond);
  font-size: 0.875rem;
  line-height: 1;
  letter-spacing: 0.01em;
}
@media screen and (min-width: 1024px) {
  .c-btn-bnr__en {
    margin-top: 0.75rem;
    font-size: 1rem;
  }
}

/*::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*----------------------------------------------------
	フォーム
----------------------------------------------------*/
[hidden] {
  display: none !important;
}

[disabled] {
  cursor: not-allowed;
}

:focus:not(:focus-visible) {
  outline: none;
}

.sr-only {
  position: absolute;
  clip: rect(1px, 1px, 1px, 1px);
  left: -9999px;
  top: -9999px;
}

input,
select,
label {
  vertical-align: middle;
  color: var(--color);
}

[type=text] {
  line-height: normal;
}

input[type=text],
input[type=email],
input[type=tel],
button {
  appearance: none;
  border-radius: 0;
  outline: none;
  background: transparent;
  color: var(--color);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
}

input[type=submit],
button {
  cursor: pointer;
  border: none;
}

textarea {
  appearance: none;
  resize: none;
  outline: none;
  background: transparent;
  color: var(--color);
  font-family: var(--font);
  font-size: 16px;
}

*:focus {
  outline: none;
}

/*----------------------------------------------------
	フォント
----------------------------------------------------*/
html {
  font-size: 16px;
}
@media screen and (max-width: 640px) {
  html {
    font-size: 4.2666666667vw;
  }
}
@media screen and (min-width: 641px) and (max-width: 1023px) {
  html {
    font-size: 2.1333333333vw;
  }
}
@media screen and (min-width: 1024px) {
  html {
    font-size: min(16px, 1.1111111111vw);
  }
}
body {
  font-family: var(--font);
  line-height: 1.5;
  font-weight: 600;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  word-wrap: break-word;
  color: var(--color);
}

.serif {
  font-family: var(--serif);
}

/*----------------------------------------------------
	レスポンシブ
----------------------------------------------------*/
@media screen and (min-width: 641px) {
  .sp {
    display: none;
  }
}

@media screen and (min-width: 1024px) {
  .sp-tab {
    display: none;
  }
}

@media screen and (max-width: 1023px) {
  .pc {
    display: none;
  }
}

@media screen and (max-width: 640px) {
  .pc-tab {
    display: none;
  }
}

@media screen and (max-width: 640px) {
  .tab {
    display: none;
  }
}
@media screen and (min-width: 1024px) {
  .tab {
    display: none;
  }
}

/*----------------------------------------------------
	リンク
----------------------------------------------------*/
button,
a {
  color: var(--color);
  text-decoration: none;
  transition: transform var(--duration) var(--ease-hover), color var(--duration-hover) var(--ease-hover), background-color var(--duration-hover) var(--ease-hover), border-color var(--duration-hover) var(--ease-hover), box-shadow var(--duration-hover) var(--ease-hover), opacity var(--duration-hover) var(--ease-hover);
  cursor: pointer;
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}
@media (hover: hover) {
  a[href^="tel:"] {
    pointer-events: none;
  }
}
@media (hover: none) {
  a, button {
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
  }
}
[data-scroll-target] {
  content: "";
  display: block;
  position: relative;
  pointer-events: none;
  top: calc(-1 * var(--header-height));
}

/*----------------------------------------------------
	コンテナ
----------------------------------------------------*/
.l-container {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 1440px;
}
@media screen and (max-width: 640px) {
  .l-container {
    padding-left: 5.3333333333vw;
    padding-right: 5.3333333333vw;
  }
}
@media screen and (min-width: 641px) and (max-width: 1023px) {
  .l-container {
    padding-left: 10.6666666667vw;
    padding-right: 10.6666666667vw;
  }
}
@media screen and (min-width: 1024px) {
  .l-container {
    padding-left: 5.5555555556vw;
    padding-right: 5.5555555556vw;
  }
}
@media screen and (min-width: 1441px) {
  .l-container {
    padding-left: 80px;
    padding-right: 80px;
  }
}

/*----------------------------------------------------
	body
----------------------------------------------------*/
body {
  position: relative;
}
.l-body-wrap {
  width: 100%;
  min-height: 100%;
  padding-top: var(--header-offset);
  overflow-x: clip;
}

/*----------------------------------------------------
	ヘッダー
----------------------------------------------------*/
.l-header {
  content: "";
  width: 100%;
  height: var(--header-height);
  position: fixed;
  left: 0;
  top: 0;
  z-index: 500;
  background: #fff;
  transition: height var(--duration) var(--easeTheme);
}

.l-header-logo {
  position: absolute;
  left: 0.625rem;
  top: var(--header-logo-top);
  width: var(--header-logo-w);
  line-height: 0;
  transition: top var(--duration) var(--easeTheme);
}
@media screen and (min-width: 1024px) {
  .l-header-logo {
    left: 1.25rem;
  }
}

.l-header-action {
  position: absolute;
  right: 4.125rem;
  top: 1rem;
  display: flex;
  align-items: center;
}
@media screen and (min-width: 1024px) {
  .l-header-action {
    right: 1.25rem;
    top: var(--header-action-top);
    gap: 1.5rem;
    transition: top var(--duration) var(--easeTheme);
  }
}

.l-header-action__sub {
  display: none;
}
@media screen and (min-width: 1024px) {
  .l-header-action__sub {
    display: flex;
    padding-bottom: 0.375rem;
    gap: 1rem;
  }
}

.l-header-action__locale {
  position: relative;
}
@media screen and (min-width: 1024px) {
  .l-header-action__locale {
    margin-left: 1rem;
    padding-bottom: 0.25rem;
  }
}
.l-header-action__locale > .l-header-action__locale-list {
  width: max-content;
  min-width: 100%;
  position: absolute;
  right: 0;
  top: 100%;
  z-index: 1;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration) var(--easeTheme), visibility var(--duration) var(--easeTheme);
}
.l-header-action__locale.is-open > .l-header-action__locale-list {
  opacity: 1;
  visibility: visible;
}
.l-header-action__locale.is-open .c-btn-header-lang__triangle svg {
  transform: rotate(180deg);
}

.l-header-action__locale-list {
  display: flex;
  padding: 0.5rem;
  flex-direction: column;
  gap: 0.375rem;
  align-self: stretch;
  border-radius: 0.5rem;
  background: var(--white, #FFF);
  box-shadow: 0 0 0.5rem 0 rgba(0, 0, 0, 0.16);
}
.l-header-action__locale-list li:not(:first-child) {
  padding-top: 0.375rem;
  border-top: var(--stroke1) solid rgba(230, 230, 230, 0.5);
}
.l-header-action__locale-list a {
  padding-left: 1rem;
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 100%;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
}
.l-header-action__locale-list a:hover {
  color: var(--color-accent);
}
.l-header-action__locale-list a:before {
  content: "";
  display: block;
  width: 0.75rem;
  height: 0.75rem;
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  background: var(--img-icon-check) center center/contain no-repeat;
  opacity: 0;
}
.l-header-action__locale-list a[data-stt-active]:before {
  opacity: 1;
}

.l-header-action__cta {
  display: none;
}
@media screen and (min-width: 1024px) {
  .l-header-action__cta {
    display: flex;
    gap: 0.25rem;
  }
}

.l-header-nav {
  display: none;
}
@media screen and (min-width: 1024px) {
  .l-header-nav {
    display: flex;
    justify-content: center;
    width: 78.25rem;
    position: absolute;
    right: 1.25rem;
    top: var(--header-nav-top);
    transition: top var(--duration) var(--easeTheme);
  }
}

.l-header-menu {
  position: absolute;
  right: 0.625rem;
  top: 0.625rem;
}
@media screen and (min-width: 1024px) {
  .l-header-menu {
    display: none;
  }
}

/*----------------------------------------------------
	l-header-drawer
	SPのグローバルメニュー。暗幕＋右からスライドインするパネル
	開閉は common.js の globalMenu() が body に付ける .is-nav-open で行う
	PCはヘッダーにナビが出ているので非表示
----------------------------------------------------*/
.l-header-drawer {
  width: 100%;
  position: fixed;
  inset: var(--header-height) 0 0;
  overflow: hidden;
  background: rgba(0, 0, 0, 0);
  visibility: hidden;
  transition: background-color var(--duration-hover) var(--ease-hover), visibility 0s linear var(--duration-hover);
}
.is-nav-open .l-header-drawer {
  background: rgba(0, 0, 0, 0.5);
  visibility: visible;
  transition: background-color var(--duration-hover) var(--ease-hover), visibility 0s linear 0s;
}
@media screen and (min-width: 1024px) {
  .l-header-drawer {
    display: none;
  }
}

.l-header-drawer__wrap {
  width: calc(100% - 2.5rem);
  max-width: 20.9375rem;
  height: 100%;
  margin-left: auto;
  padding: 2.5rem 1.25rem;
  overflow-y: auto;
  overscroll-behavior: none;
  background: var(--beige-1, #FCFAF2);
  transform: translateX(100%);
  transition: transform var(--duration-hover) var(--ease-hover-lingering);
}
.is-nav-open .l-header-drawer__wrap {
  transform: translateX(0);
}

/*::::::::::::::::::::::::::::::::::::::::::::::::::*/
.l-header-drawer__info {
  margin-top: 2.5rem;
  text-align: center;
}

.l-header-drawer__info-address {
  font-size: 0.875rem;
  line-height: 1.5;
}

.l-header-drawer__info-map {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1;
}
.l-header-drawer__info-map a {
  color: var(--color-accent);
}

.l-header-drawer__info-tel {
  margin-top: 1.5rem;
  line-height: 0;
}
.l-header-drawer__info-tel a {
  display: inline-flex;
  align-items: center;
  color: var(--color-accent);
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.1em;
}
.l-header-drawer__info-tel img {
  width: 1.75rem;
}

.l-header-drawer__info-sns {
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin-top: 1.5rem;
}
.l-header-drawer__info-sns li {
  width: 1.25rem;
}
.l-header-drawer__info-sns a {
  display: block;
  line-height: 0;
}
.l-header-drawer__info-sns img {
  width: 100%;
}
@media (hover: hover) {
  .l-header-drawer__info-sns:hover a:hover, a:hover .l-header-drawer__info-sns a:hover, button:hover .l-header-drawer__info-sns a:hover {
    opacity: 0.6;
  }
}

/*::::::::::::::::::::::::::::::::::::::::::::::::::*/
.l-header-drawer__line {
  margin-top: 2.5rem;
  line-height: 0;
}
.l-header-drawer__line a {
  display: block;
  border-radius: 0.5rem;
  overflow: hidden;
}
.l-header-drawer__line img {
  width: 100%;
}
@media (hover: hover) {
  .l-header-drawer__line:hover a:hover, a:hover .l-header-drawer__line a:hover, button:hover .l-header-drawer__line a:hover {
    opacity: 0.8;
  }
}

/*::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*----------------------------------------------------
	l-header-mega
	グローバルナビ「客室紹介」のホバーで開くメガメニュー（PCのみ）。
	寸法は Figma `1706:59492`（1211×202 / パディング32）準拠
----------------------------------------------------*/
.l-header-mega {
  display: none;
}
@media screen and (min-width: 1024px) {
  .l-header-mega {
    display: block;
    width: 75.6875rem;
    position: fixed;
    left: 50%;
    top: calc(var(--header-height) + 0.5rem);
    transform: translateX(-50%);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--duration) var(--easeTheme), visibility var(--duration) var(--easeTheme);
  }
  .l-header-mega:before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: 1.25rem;
  }
}

@media screen and (min-width: 1024px) {
  .cm-nav-header__item--mega:hover > .l-header-mega, .cm-nav-header__item--mega:focus-within > .l-header-mega {
    opacity: 1;
    visibility: visible;
  }
}

.l-header-mega__inner {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  padding: 2rem;
  border-radius: 0.5rem;
  background: var(--white, #FFF);
}

/*----- 左の見出し -----*/
.l-header-mega__head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 15.3125rem;
  flex-shrink: 0;
  color: var(--black, #333);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1;
}

.l-header-mega__ico {
  width: 1.5rem;
  height: 0.9375rem;
  flex-shrink: 0;
}

/*----- 右の客室一覧 -----*/
.l-header-mega__list {
  display: grid;
  grid-template-columns: repeat(6, 8.3125rem);
  gap: 1rem;
}

.l-header-mega__link {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  color: var(--black, #333);
}

.l-header-mega__pic {
  height: 6.25rem;
  border-radius: 0.5rem;
  overflow: hidden;
}
.l-header-mega__pic img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (hover: hover) {
  .l-header-mega__pic img {
    will-change: transform;
  }
}
.l-header-mega__pic img {
  transition: transform var(--duration-hover-zoom) var(--ease-hover);
}
.l-header-mega__link:hover .l-header-mega__pic img {
  transform: scale(1.06);
}

.l-header-mega__body {
  display: flex;
  align-items: flex-start;
  gap: 0;
}

.l-header-mega__name {
  flex: 1 0 0;
  min-width: 0;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.25;
  line-break: strict;
  overflow-wrap: normal;
  word-break: normal;
}

.l-header-mega__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}
.l-header-mega__arrow svg {
  width: 1rem;
  height: 0.5rem;
  stroke: currentColor;
  transition: transform var(--duration-hover-move) var(--ease-hover-lingering);
}
.l-header-mega__link:hover .l-header-mega__arrow svg {
  transform: translateX(0.25rem);
}

/*----------------------------------------------------
	main
----------------------------------------------------*/
/*----------------------------------------------------
	フッター
----------------------------------------------------*/
.l-footer {
  padding-block: 7.5rem 5rem;
  background: var(--beige-1, #FCFAF2);
}
@media screen and (min-width: 1024px) {
  .l-footer {
    padding-bottom: 5.5625rem;
  }
}

.l-footer__wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
}
@media screen and (min-width: 1024px) {
  .l-footer__wrap {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
  }
}

/*::::::::::::::::::::::::::::::::::::::::::::::::::*/
.l-footer__body {
  width: 100%;
}
@media screen and (min-width: 1024px) {
  .l-footer__body {
    width: 18.5rem;
  }
}

.l-footer__logo {
  width: 13.5rem;
  margin-inline: auto;
}
@media screen and (min-width: 1024px) {
  .l-footer__logo {
    width: 16.5rem;
    margin-inline: 0;
  }
}
.l-footer__logo img {
  width: 100%;
}

.l-footer__info {
  margin-top: 2.5rem;
  width: 100%;
  text-align: center;
}
@media screen and (min-width: 1024px) {
  .l-footer__info {
    margin-top: 3rem;
    text-align: left;
  }
}

.l-footer__info-address {
  font-size: 0.875rem;
  line-height: 1.5;
}

.l-footer__info-map {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1;
}
.l-footer__info-map a {
  color: var(--color-accent);
}

.l-footer__info-tel {
  margin-top: 1.5rem;
  line-height: 0;
}
.l-footer__info-tel a {
  display: inline-flex;
  align-items: center;
  color: var(--color-accent);
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.1em;
}
.l-footer__info-tel img {
  width: 1.75rem;
}

.l-footer__info-sns {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  margin-top: 1.5rem;
}
.l-footer__info-sns li {
  width: 1.25rem;
}
.l-footer__info-sns a {
  display: block;
  line-height: 0;
}
.l-footer__info-sns img {
  width: 100%;
}
@media (hover: hover) {
  .l-footer__info-sns:hover a:hover, a:hover .l-footer__info-sns a:hover, button:hover .l-footer__info-sns a:hover {
    opacity: 0.6;
  }
}
@media screen and (min-width: 1024px) {
  .l-footer__info-sns {
    justify-content: flex-start;
  }
}

/*::::::::::::::::::::::::::::::::::::::::::::::::::*/
.l-footer__nav {
  width: 100%;
  margin-top: 5rem;
}
@media screen and (min-width: 1024px) {
  .l-footer__nav {
    width: 52.6875rem;
    margin-top: 0;
  }
}

/*::::::::::::::::::::::::::::::::::::::::::::::::::*/
.l-footer__bottom {
  margin-top: 5rem;
  padding-top: 1rem;
  border-top: var(--stroke1) solid #D9D9D9;
}
@media screen and (min-width: 1024px) {
  .l-footer__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 7.875rem;
    padding-top: 1.5rem;
  }
}

.l-footer__nav-sub {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem 0.5rem;
  font-size: 0.875rem;
  line-height: 1;
}
@media (hover: hover) {
  .l-footer__nav-sub a:hover, a:hover .l-footer__nav-sub a, button:hover .l-footer__nav-sub a {
    color: var(--color-accent);
  }
}
@media screen and (min-width: 1024px) {
  .l-footer__nav-sub {
    display: flex;
    gap: 1rem;
  }
}

.l-footer__copyright {
  margin-top: 2.5rem;
  font-size: 0.625rem;
  line-height: 1;
  text-align: center;
}
@media screen and (min-width: 1024px) {
  .l-footer__copyright {
    margin-top: 0;
    font-size: 0.75rem;
    text-align: right;
  }
}

/*----------------------------------------------------
	l-reserve
	画面下に貼り付く予約ボタン。
	メインビジュアルを過ぎたら出し、フッターに入ったら引っ込める。
	出し入れの判定は body のクラス（common.js）に任せる
----------------------------------------------------*/
.l-reserve {
  position: fixed;
  left: 50%;
  bottom: 1rem;
  z-index: 400;
  transform: translate(-50%, calc(100% + 2rem));
  opacity: 0;
  visibility: hidden;
  transition: transform var(--duration-hover-move) var(--ease-hover-lingering), opacity var(--duration-hover) var(--ease-hover), visibility 0s linear var(--duration-hover);
}
@media screen and (min-width: 1024px) {
  .l-reserve {
    bottom: 1.5rem;
  }
}
.is-scrolled:not(.is-footer-show) .l-reserve {
  transform: translate(-50%, 0);
  opacity: 1;
  visibility: visible;
  transition: transform var(--duration-hover-move) var(--ease-hover-lingering), opacity var(--duration-hover) var(--ease-hover), visibility 0s linear 0s;
}

.l-reserve__link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 17.5rem;
  height: 3rem;
  border-radius: 6.25rem;
  background: var(--color-accent);
  color: var(--white, #FFF);
  line-height: 1;
  box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.15);
  transition: background-color var(--duration-hover) var(--ease-hover);
}
@media screen and (min-width: 1024px) {
  .l-reserve__link {
    gap: 0.75rem;
    width: 25rem;
    height: 3.125rem;
  }
}
@media (hover: none) {
  .l-reserve__link:active {
    transform: scale(0.965);
  }
}
@media (hover: hover) {
  .l-reserve__link:hover, a:hover .l-reserve__link, button:hover .l-reserve__link {
    background: var(--color-accent-hover);
  }
}

.l-reserve__ico {
  display: block;
  width: 1rem;
  line-height: 0;
}
.l-reserve__ico svg {
  width: 100%;
  aspect-ratio: 1/1;
  fill: var(--white, #FFF);
}

.l-reserve__ja {
  font-size: 1rem;
  font-weight: 600;
}

.l-reserve__en {
  font-family: var(--Garamond);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  opacity: 0.7;
}

/*::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*----------------------------------------------------
	p-top
	TOPページ。セクションごとに段階的に実装していく（docs/p-top.md 参照）
----------------------------------------------------*/
.p-top > :where(section) {
  position: relative;
  padding-block: var(--padding-section);
}

/*::::::::::::::::::::::::::::::::::::::::::::::::::*/
/* STEP1 メインビジュアル */
.p-top-mv {
  padding-block: 0;
}

.p-top-mv__visual {
  --mv-reserve: 8.875rem;
  position: relative;
  margin-inline: 0.625rem;
  height: calc(100vh - var(--header-offset) - var(--mv-reserve));
  height: calc(100svh - var(--header-offset) - var(--mv-reserve));
  border-radius: 0.5rem;
  overflow: hidden;
  background: var(--brown-1, #331D12);
}
@media screen and (min-width: 1024px) {
  .p-top-mv__visual {
    --mv-reserve: 1.25rem;
    margin-inline: 1.25rem;
    border-radius: 1rem;
  }
}

/*----- スライド -----*/
.p-top-mv__slide {
  position: absolute;
  inset: 0;
  visibility: hidden;
}
.p-top-mv__slide.is-active {
  visibility: visible;
}

.p-top-mv__half {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
@media screen and (min-width: 1024px) {
  .p-top-mv__half {
    will-change: transform;
  }
}
.p-top-mv__half picture {
  display: block;
  width: 100%;
  height: 100%;
}
.p-top-mv__half img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media screen and (min-width: 1024px) {
  .p-top-mv__half {
    width: 50%;
  }
}

@media screen and (min-width: 1024px) {
  .p-top-mv__half--l img {
    object-position: right center;
  }
}

.p-top-mv__half--r {
  display: none;
}
@media screen and (min-width: 1024px) {
  .p-top-mv__half--r {
    display: block;
    left: 50%;
  }
  .p-top-mv__half--r img {
    object-position: left center;
  }
}

/*----- ロゴ／キャッチコピー -----*/
.p-top-mv__body {
  display: grid;
  place-items: center;
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.p-top-mv__logo,
.p-top-mv__copy {
  grid-area: 1/1;
}

@media (scripting: enabled) {
  .p-top-mv__logo,
  .p-top-mv__copy {
    opacity: 0;
  }
}
.p-top-mv__logo {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}
@media screen and (min-width: 1024px) {
  .p-top-mv__logo {
    gap: 0.875rem;
  }
}

.p-top-mv__logo-flag {
  width: 3.25rem;
  height: 1.9375rem;
}
@media screen and (min-width: 1024px) {
  .p-top-mv__logo-flag {
    width: 5.75rem;
    height: 3.5625rem;
  }
}
.p-top-mv__logo-flag img {
  width: 100%;
  height: 100%;
}

.p-top-mv__logo-name {
  display: flow-root;
  width: var(--mv-logo-w);
  margin-top: var(--mv-logo-mt);
}
.p-top-mv__logo-name img {
  display: block;
  width: var(--mv-logo-img-w);
  height: auto;
  max-width: none;
  margin: var(--mv-logo-img-t) 0 var(--mv-logo-img-b) var(--mv-logo-img-x);
}

.p-top-mv__copy {
  color: var(--white, #fff);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 2;
  text-align: center;
  text-shadow: 0 0 0.9375rem rgba(0, 0, 0, 0.9);
}
@media screen and (min-width: 1024px) {
  .p-top-mv__copy {
    font-size: 1.75rem;
    text-shadow: 0 0 1.25rem rgba(0, 0, 0, 0.8);
  }
}

/*----- Scroll Down（PCのみ） -----*/
.p-top-mv__scroll {
  display: none;
}
@media screen and (min-width: 1024px) {
  .p-top-mv__scroll {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    position: absolute;
    left: 50%;
    bottom: 2.5rem;
    z-index: 3;
    transform: translateX(-50%);
    pointer-events: none;
  }
}

.p-top-mv__scroll-txt {
  color: var(--white, #fff);
  font-family: var(--Garamond);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}

.p-top-mv__scroll-arrow {
  width: 1.5rem;
  height: 0.5rem;
}
.p-top-mv__scroll-arrow img {
  width: 100%;
  height: 100%;
}

/*----- LINEバナー（SPのみ） -----*/
.p-top-mv__bnr {
  margin: 0.625rem 0.625rem 0;
  line-height: 0;
}
.p-top-mv__bnr img {
  width: 100%;
}
@media screen and (min-width: 1024px) {
  .p-top-mv__bnr {
    display: none;
  }
}

/*::::::::::::::::::::::::::::::::::::::::::::::::::*/
/* STEP2 インフォメーション／宿泊プラン */
.p-top-information,
.p-top-plan {
  padding-block: 7.5rem 0;
}
@media screen and (min-width: 1024px) {
  .p-top-information,
  .p-top-plan {
    padding-block: var(--padding-section-lg) 0;
  }
}

.p-top-information__nav,
.p-top-plan__nav {
  margin-top: 2.5rem;
}
@media screen and (min-width: 1024px) {
  .p-top-information__nav,
  .p-top-plan__nav {
    margin-top: 4.5rem;
  }
}

.p-top-information__list,
.p-top-plan__list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  gap: 1.5rem 1.25rem;
  margin-top: 1.5rem;
}
@media screen and (min-width: 1024px) {
  .p-top-information__list,
  .p-top-plan__list {
    grid-template-columns: repeat(4, 1fr);
    gap: 4rem 2rem;
    margin-top: 3.5rem;
  }
}

.p-top-information__empty,
.p-top-plan__empty {
  margin-top: 2.5rem;
  font-size: 1rem;
  text-align: center;
}
@media screen and (min-width: 1024px) {
  .p-top-information__empty,
  .p-top-plan__empty {
    margin-top: 3.5rem;
  }
}

.p-top-information__action {
  display: flex;
  justify-content: center;
  margin-top: 2.5rem;
}
@media screen and (min-width: 1024px) {
  .p-top-information__action {
    margin-top: 4.5rem;
  }
}

@media screen and (max-width: 1023px) {
  .p-top-plan__list {
    row-gap: 2rem;
  }
  .p-top-plan__list > li:nth-child(n+5) {
    display: none;
  }
}

/*::::::::::::::::::::::::::::::::::::::::::::::::::*/
/* STEP8 コンセプト */
.p-top-guide {
  padding-block: 0;
  background: var(--white, #FFF);
}

.p-top-guide__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: var(--white, #FFF);
}
.p-top-guide__stage > .l-container {
  position: relative;
  z-index: 2;
  height: 100%;
}

.p-top-guide__visual {
  --mask-ratio: calc(486 / 302);
  --mask-fit: min(100%, 100svh * var(--mask-ratio));
  --mask-scale: 1;
  --mask-scale-end: 6;
  position: absolute;
  inset: 0;
  transform: scale(0.05);
  will-change: transform;
  mask: var(--mask-logo) center center/calc(var(--mask-scale) * var(--mask-fit)) auto no-repeat;
  -webkit-mask: var(--mask-logo) center center/calc(var(--mask-scale) * var(--mask-fit)) auto no-repeat;
}
@media screen and (min-width: 1024px) {
  .p-top-guide__visual {
    --mask-scale-end: 2.8;
  }
}
.p-top-guide__visual img {
  display: block;
  width: 100%;
  height: 116%;
  position: absolute;
  left: 0;
  top: -8%;
  object-fit: cover;
  opacity: 0;
  will-change: transform, opacity;
}

.p-top-guide__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0;
  background: rgba(0, 0, 0, 0.45);
  pointer-events: none;
}

.p-top-guide__catch {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  position: absolute;
  left: 1.25rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--white, #FFF);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.6;
  text-shadow: 0 0 1.25rem rgba(0, 0, 0, 0.5);
}
.p-top-guide__catch span {
  display: block;
}
@media screen and (min-width: 1024px) {
  .p-top-guide__catch {
    left: 6.25rem;
    gap: 1rem;
    font-size: 1.5rem;
  }
}

/*----- 右カラムの本文。貼り付いたステージの上を流れる -----*/
.p-top-guide__body {
  position: relative;
  z-index: 1;
  margin-top: 50rem;
  padding-bottom: calc(100vh + 18.75rem);
  padding-bottom: calc(100svh + 18.75rem);
  color: var(--white, #FFF);
}

.p-top-guide__body-inner {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}
@media screen and (min-width: 1024px) {
  .p-top-guide__body-inner {
    width: 38.875rem;
    margin-left: auto;
    gap: 3.5rem;
  }
}

.p-top-guide__txt {
  font-size: 0.9375rem;
  line-height: 2;
  text-shadow: 0 0 1.25rem rgba(0, 0, 0, 0.5);
}
@media screen and (min-width: 1024px) {
  .p-top-guide__txt {
    font-size: 1rem;
  }
}

.p-top-guide__action {
  display: flex;
  justify-content: flex-start;
}

/*::::::::::::::::::::::::::::::::::::::::::::::::::*/
/* STEP8 コンセプト（東町）*/
.p-top-concept {
  --band-h: calc(100svh - var(--header-offset) - 1.75rem);
  padding-block: 0;
  background: var(--white, #FFF);
  isolation: isolate;
}
@media screen and (min-width: 1024px) {
  .p-top-concept {
    --band-h: 100svh;
  }
}

.p-top-concept__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: var(--white, #FFF);
}

/*----- 横に流れる写真帯 -----*/
.p-top-concept__slider {
  display: flex;
  align-items: flex-start;
  position: absolute;
  inset: 0;
  padding-top: var(--header-offset);
  overflow: hidden;
}
@media screen and (min-width: 1024px) {
  .p-top-concept__slider {
    align-items: center;
    padding-top: 0;
  }
}

.p-top-concept__track {
  --slide-gap: calc(var(--band-h) * 0.025);
  --slide-loop: calc(var(--band-h) * 2.7875);
  --slide-duration: 60s;
  display: flex;
  gap: var(--slide-gap);
  flex-shrink: 0;
  will-change: transform;
  animation: p-top-concept-slide var(--slide-duration) linear infinite;
}
.p-top-concept__track img {
  display: block;
  width: auto;
  max-width: none;
  height: var(--band-h);
  border-radius: 0.5rem;
}
@media (prefers-reduced-motion: reduce) {
  .p-top-concept__track {
    animation: none;
  }
}

@keyframes p-top-concept-slide {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(calc(-1 * var(--slide-loop)), 0, 0);
  }
}
/*----- 帯を白く沈めるマスク。本文を読ませているあいだだけ乗せる -----*/
.p-top-concept__mask {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(27.78% 50% at 50% 50%, rgba(255, 255, 255, 0.8) 0%, #FFF 82.7%);
}

/*----- 帯の上を流れていく大きな地名 -----*/
.p-top-concept__title {
  display: none;
}
@media screen and (min-width: 1024px) {
  .p-top-concept__title {
    display: block;
    position: absolute;
    left: 50%;
    bottom: calc(100svh - 0.625rem);
    z-index: 2;
    transform: translateX(-50%);
    color: var(--white, #FFF);
    font-family: var(--Garamond);
    font-size: 13.6805555556vw;
    font-weight: 400;
    line-height: 0.7;
    letter-spacing: 0;
    white-space: nowrap;
    pointer-events: none;
  }
}

/*----- キャッチと本文。貼り付いた帯の上を流れる -----*/
.p-top-concept__body {
  position: relative;
  z-index: 3;
  padding-bottom: calc(200vh + 56.25rem);
  padding-bottom: calc(200svh + 56.25rem);
}

.p-top-concept__catch-area {
  display: flex;
  align-items: center;
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.p-top-concept__catch {
  display: flex;
  flex-direction: column;
  color: var(--black, #333);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 2.5;
  letter-spacing: 0.1em;
}
.p-top-concept__catch span {
  display: block;
}
@media screen and (min-width: 1024px) {
  .p-top-concept__catch {
    padding-left: 6.875rem;
    font-size: 1.75rem;
  }
}

.p-top-concept__txts {
  display: flex;
  flex-direction: column;
  gap: 3.5rem;
}
@media screen and (min-width: 1024px) {
  .p-top-concept__txts {
    width: 38.875rem;
    margin-left: auto;
  }
}

.p-top-concept__txt {
  color: var(--black, #333);
  font-family: var(--mincho);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 2;
  letter-spacing: 0.05em;
}
@media screen and (min-width: 1024px) {
  .p-top-concept__txt {
    font-size: 1.125rem;
  }
}

.p-top-concept__action {
  display: flex;
  justify-content: center;
  margin-top: 1.5rem;
}
@media screen and (min-width: 1024px) {
  .p-top-concept__action {
    justify-content: flex-start;
  }
}

.p-top-concept + .p-top-guest {
  z-index: 1;
  margin-top: -100vh;
  margin-top: -100svh;
  background: var(--white, #FFF);
}

/*::::::::::::::::::::::::::::::::::::::::::::::::::*/
/* STEP8 コンセプト（ブライオン）*/
.p-top-blion {
  --col-w: 11.5rem;
  --col-gap: 0.4375rem;
  padding-block: 0;
  margin-top: var(--padding-section);
  background: var(--white, #FFF);
  isolation: isolate;
}
@media screen and (min-width: 1024px) {
  .p-top-blion {
    --col-w: 30.0625rem;
    --col-gap: 1.1875rem;
  }
}

.p-top-blion__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: var(--white, #FFF);
}

/*----- 上下に流れる写真列 -----*/
.p-top-blion__cols {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: var(--col-gap);
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.p-top-blion__col {
  --marquee-gap: 1.25rem;
  --marquee-speed: 12;
}
@media screen and (min-width: 1024px) {
  .p-top-blion__col {
    --marquee-speed: 25;
  }
}
.p-top-blion__col {
  display: flex;
  flex-direction: column;
  gap: var(--marquee-gap);
  flex-shrink: 0;
  width: var(--col-w);
  will-change: transform;
}
.p-top-blion__col img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0.5rem;
}

.p-top-blion__vignette {
  position: absolute;
  inset: 0;
  z-index: 1;
  mix-blend-mode: multiply;
  pointer-events: none;
  background: radial-gradient(50% 50% at 50% 50%, rgba(51, 51, 51, 0) 50.5%, rgba(51, 51, 51, 0.5) 100%);
}

/*----- 旗の形に切り抜いた白い面。小さく現れて画面の外まで広がる -----*/
.p-top-blion__overlay {
  --mask-ratio: calc(486 / 302);
  --mask-fit: min(100%, 100svh * var(--mask-ratio));
  --overlay-scale: 0;
  --overlay-scale-from: 0;
  --overlay-scale-to: 4.8;
}
@media screen and (min-width: 1024px) {
  .p-top-blion__overlay {
    --overlay-scale-to: 1.7;
  }
}
.p-top-blion__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(1.25rem);
  mask: var(--mask-logo) center center/calc(var(--overlay-scale) * var(--mask-fit)) auto no-repeat;
  -webkit-mask: var(--mask-logo) center center/calc(var(--overlay-scale) * var(--mask-fit)) auto no-repeat;
  opacity: clamp(0, var(--overlay-scale) * 100, 1);
}

.p-top-blion__fade {
  height: 12.5rem;
  position: absolute;
  right: 0;
  bottom: 100vh;
  bottom: 100svh;
  left: 0;
  z-index: 4;
  pointer-events: none;
  background: linear-gradient(to top, var(--white, #FFF) 0%, rgba(255, 255, 255, 0) 100%);
}

/*----- キャッチと本文。貼り付いた写真の上を流れる -----*/
.p-top-blion__body {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  position: relative;
  z-index: 3;
  width: min(31.9375rem, 100% - 2.5rem);
  margin-inline: auto;
  padding-bottom: calc(100vh + 12.5rem);
  padding-bottom: calc(100svh + 12.5rem);
  color: var(--black, #333);
}
@media screen and (min-width: 1024px) {
  .p-top-blion__body {
    gap: 4rem;
  }
}

.p-top-blion__catch {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.1em;
}
.p-top-blion__catch span {
  display: block;
}
@media screen and (min-width: 1024px) {
  .p-top-blion__catch {
    gap: 2rem;
    font-size: 1.75rem;
  }
}

.p-top-blion__txts {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}
@media screen and (min-width: 1024px) {
  .p-top-blion__txts {
    gap: 3.5rem;
  }
}

.p-top-blion + .p-top-guest {
  z-index: 1;
  margin-top: -100vh;
  margin-top: -100svh;
  background: var(--white, #FFF);
}

.p-top-blion__txt {
  font-family: var(--mincho);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 2;
  letter-spacing: 0.05em;
}
@media screen and (min-width: 1024px) {
  .p-top-blion__txt {
    font-size: 1.125rem;
  }
}

/*::::::::::::::::::::::::::::::::::::::::::::::::::*/
/* STEP3 客室紹介 */
.p-top-guest {
  padding-block: 7.5rem 3rem;
}
@media screen and (min-width: 1024px) {
  .p-top-guest {
    padding-block: var(--padding-section-lg) 6rem;
  }
}
.p-top-guest .cm-section-head {
  --lead-gap: 4rem;
  --lead-width: 38.75rem;
  --lead-offset: 4.75rem;
}
.p-top-guest .c-spec-room {
  --spec-label: 8.25rem;
  --spec-gap: 1rem;
}

.p-top-guest__list {
  display: grid;
  gap: 2.5rem;
  margin-top: 2.5rem;
}
@media screen and (min-width: 1024px) {
  .p-top-guest__list {
    grid-template-columns: repeat(3, 1fr);
    align-items: start;
    column-gap: 2.5rem;
    row-gap: 3.5rem;
    margin-top: 5rem;
  }
}

.p-top-guest__link {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
@media screen and (min-width: 1024px) {
  .p-top-guest__link {
    gap: 2rem;
  }
}
@media (hover: hover) {
  .p-top-guest__link:hover .p-top-guest__pic img, a:hover .p-top-guest__link .p-top-guest__pic img, button:hover .p-top-guest__link .p-top-guest__pic img {
    transform: scale(1.06);
  }
}

.p-top-guest__pic {
  position: relative;
  aspect-ratio: 3/2;
  border-radius: 0.5rem;
  overflow: hidden;
}
.p-top-guest__pic img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (hover: hover) {
  .p-top-guest__pic img {
    will-change: transform;
  }
}
.p-top-guest__pic img {
  transition: transform var(--duration-hover-zoom) var(--ease-hover);
}

.p-top-guest__arrow {
  position: absolute;
  right: 0.625rem;
  bottom: 0.625rem;
}
@media screen and (min-width: 1024px) {
  .p-top-guest__arrow {
    right: 1rem;
    bottom: 1rem;
  }
}

.p-top-guest__body {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.p-top-guest__name {
  color: var(--black, #333);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.25;
}
@media screen and (min-width: 1024px) {
  .p-top-guest__name {
    font-size: 1.5rem;
  }
}

.p-top-guest__action {
  display: flex;
  justify-content: center;
  margin-top: 2.5rem;
}
@media screen and (min-width: 1024px) {
  .p-top-guest__action {
    margin-top: 5rem;
  }
}

/*::::::::::::::::::::::::::::::::::::::::::::::::::*/
/* STEP4 設備・サービス */
.p-top-facility {
  --bg-opacity: 1;
  padding-block: 7.5rem;
  overflow: hidden;
}
.p-top-facility::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--beige-1, #FCFAF2);
  opacity: var(--bg-opacity);
  pointer-events: none;
}
@media screen and (min-width: 1024px) {
  .p-top-facility {
    padding-block: var(--padding-section-lg) 8.5rem;
  }
}
.p-top-facility .cm-section-head {
  --lead-gap: 2.5rem;
  --lead-width: 38.75rem;
  --lead-offset: 7.75rem;
}
.p-top-facility > .l-container {
  position: relative;
  z-index: 1;
}

.p-top-facility__bg {
  position: absolute;
  right: 1.25rem;
  top: 9.625rem;
  opacity: var(--bg-opacity);
  width: 10.5rem;
  height: 10.5rem;
  z-index: 0;
  pointer-events: none;
}
.p-top-facility__bg img {
  display: block;
  width: 100%;
  height: 100%;
}
@media screen and (min-width: 1024px) {
  .p-top-facility__bg {
    right: auto;
    left: 0;
    top: 23rem;
    width: 46.25rem;
    height: 46.25rem;
  }
}

/*----- カード -----*/
.p-top-facility__list {
  display: grid;
  gap: 0.5rem;
  margin-top: 2.25rem;
}
@media screen and (min-width: 1024px) {
  .p-top-facility__list {
    width: 52.5rem;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin-top: 5rem;
    margin-left: auto;
  }
}

.p-top-facility__item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem;
  border-radius: 0.5rem;
  background: var(--white, #FFF);
}
@media screen and (min-width: 1024px) {
  .p-top-facility__item {
    gap: 2rem;
    padding: 2rem;
    box-shadow: var(--shadow1);
  }
}

.p-top-facility__ico {
  width: 2.5rem;
  height: 2.5rem;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.p-top-facility__ico img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
}

.p-top-facility__line {
  width: var(--stroke1);
  align-self: stretch;
  flex-shrink: 0;
  background: var(--gray-1, #E6E6E6);
}

.p-top-facility__body {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
  min-width: 0;
}

.p-top-facility__title {
  color: var(--black, #333);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
}
@media screen and (min-width: 1024px) {
  .p-top-facility__title {
    font-size: 1.125rem;
  }
}

.p-top-facility__txt {
  color: var(--black, #333);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.25;
}
@media screen and (min-width: 1024px) {
  .p-top-facility__txt {
    line-height: 1.5;
  }
}

.p-top-facility__action {
  display: flex;
  justify-content: center;
  margin-top: 4.25rem;
}
@media screen and (min-width: 1024px) {
  .p-top-facility__action {
    width: 52.5rem;
    margin-top: 5rem;
    margin-left: auto;
  }
}

/*::::::::::::::::::::::::::::::::::::::::::::::::::*/
/* STEP7 朝食レストラン */
.p-top-restaurant {
  padding-block: 0;
  background: var(--white, #FFF);
}
@media screen and (max-width: 1023px) {
  .p-top-restaurant {
    background: #fafafa;
  }
}

.p-top-restaurant__pin {
  height: calc(100vh + 75rem);
  height: calc(100svh + 75rem);
}
@media screen and (min-width: 1024px) {
  .p-top-restaurant__pin {
    height: calc(100vh + 37.5rem + 128.6875rem + 100vh);
    height: calc(100svh + 37.5rem + 128.6875rem + 100svh);
  }
}

.p-top-restaurant__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}

.p-top-restaurant__visual {
  position: absolute;
  inset: 0;
  transform: scale(1.25);
  will-change: transform;
}
.p-top-restaurant__visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.p-top-restaurant__panel {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  inset: 0;
  opacity: 0;
}

.p-top-restaurant__curtain-veil {
  --veil-opacity: 0;
  --curtain-width: 0%;
  position: absolute;
  inset: 0;
}
.p-top-restaurant__curtain-veil:before {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  background: var(--white, #FFF);
  opacity: var(--veil-opacity);
}
.p-top-restaurant__curtain-veil:after {
  content: "";
  display: block;
  width: var(--curtain-width);
  height: 100%;
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  background: var(--white, #FFF);
}

.p-top-restaurant__texture {
  position: absolute;
  inset: 0;
  opacity: 0;
  background: var(--img-p-top-restaurant-bg-2) center center/cover no-repeat;
}

.p-top-restaurant__body {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 32.5rem;
  padding-inline: 1.25rem;
  text-align: center;
}
@media screen and (min-width: 1024px) {
  .p-top-restaurant__body {
    padding-inline: 3.75rem;
  }
}

.p-top-restaurant__copy {
  margin-top: 2.5rem;
  color: var(--black, #333);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.6;
}
@media screen and (min-width: 1024px) {
  .p-top-restaurant__copy {
    margin-top: 3.5rem;
    font-size: 1.5rem;
  }
}

.p-top-restaurant__rule {
  display: block;
  width: 3.75rem;
  height: var(--stroke1);
  margin: 1.5rem auto 0;
  background: var(--gray-1, #E6E6E6);
}
@media screen and (min-width: 1024px) {
  .p-top-restaurant__rule {
    margin-top: 2rem;
  }
}

.p-top-restaurant__txt {
  margin-top: 1.5rem;
  font-size: 1rem;
  line-height: 2;
  text-align: left;
}
@media screen and (min-width: 1024px) {
  .p-top-restaurant__txt {
    margin-top: 2rem;
  }
}

.p-top-restaurant__action {
  display: flex;
  justify-content: center;
  margin-top: 2rem;
}
@media screen and (min-width: 1024px) {
  .p-top-restaurant__action {
    margin-top: 2.5rem;
  }
}

/*----- 散らした料理写真。地はぼかした白のテクスチャ（bg-2） -----*/
.p-top-restaurant__photos {
  position: relative;
  z-index: 1;
  pointer-events: none;
  overflow-x: clip;
  --photo-scale: 1;
  --photo-design: 23.4375rem;
}
@media screen and (min-width: 641px) and (max-width: 1023px) {
  .p-top-restaurant__photos {
    --photo-scale: 2;
    --photo-design: 46.875rem;
  }
}
.p-top-restaurant__photos {
  height: calc(54.6875rem * var(--photo-scale));
}
@media screen and (max-width: 1023px) {
  .p-top-restaurant__photos {
    margin-top: calc(-20svh - 1.5625rem);
  }
}
@media screen and (min-width: 1024px) {
  .p-top-restaurant__photos {
    height: 128.6875rem;
    margin-top: calc(-1 * (128.6875rem + 100vh));
    margin-top: calc(-1 * (128.6875rem + 100svh));
  }
}

.p-top-restaurant__photo {
  position: absolute;
  left: calc(50% - var(--photo-design) / 2 + var(--sp-x) * var(--photo-scale));
  top: calc(var(--sp-y) * var(--photo-scale));
  width: calc(var(--sp-w) * var(--photo-scale));
  border-radius: 0.5rem;
  overflow: hidden;
  will-change: transform;
}
.p-top-restaurant__photo img {
  display: block;
  width: 100%;
  height: auto;
}
@media screen and (min-width: 1024px) {
  .p-top-restaurant__photo {
    left: calc(50% - 45rem + var(--pc-x));
    top: var(--pc-y);
    width: var(--pc-w);
  }
}

.p-top-restaurant__photo--blur {
  filter: blur(0.375rem);
  opacity: 0.55;
}

@media screen and (max-width: 1023px) {
  .p-top-restaurant__photo--pc {
    display: none;
  }
}

/*::::::::::::::::::::::::::::::::::::::::::::::::::*/
/* STEP7 朝食レストラン（東町）*/
.p-top-breakfast {
  padding-block: 0;
  background: var(--beige-1, #FCFAF2);
}
.p-top-breakfast .cm-section-head {
  --lead-gap: 5rem;
}
@media screen and (min-width: 1024px) {
  .p-top-breakfast .cm-section-head {
    --lead-width: 38.75rem;
    --lead-offset: 4.8125rem;
  }
}

.p-top-breakfast__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}

.p-top-breakfast__visual {
  position: absolute;
  inset: 0;
  will-change: transform;
}
.p-top-breakfast__visual picture {
  display: block;
  width: 100%;
  height: 100%;
}
.p-top-breakfast__visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/*
	--reveal を付けたサイトだけ、写真を白い画面で隠した状態から始める。
	x は最初から100%、y だけを 0% → 100% に開くので、中央から上下へ
	めくれるように写真が出る。地はセクションの白。
	拡大は中の img が持つ（clip は枠側なので、拡大しても開き幅が変わらない）。
	動かすのは page.js の topBreakfast
*/
.p-top-breakfast--reveal .p-top-breakfast__visual {
  --visual-reveal: 0%;
  clip-path: inset(calc((100% - var(--visual-reveal)) / 2) 0);
}
.p-top-breakfast--reveal .p-top-breakfast__visual img {
  will-change: transform;
}

.p-top-breakfast__lead {
  height: 100vh;
  height: 100svh;
}

/*----- 写真を沈める白いベールと、その上の本文 -----*/
.p-top-breakfast__panel {
  position: relative;
  z-index: 1;
  padding-top: 9.75rem;
  padding-bottom: 3.75rem;
}
@media screen and (min-width: 1024px) {
  .p-top-breakfast__panel {
    padding-top: 10rem;
  }
}

.p-top-breakfast__veil {
  position: absolute;
  inset: 0 -3.75rem;
  pointer-events: none;
  background: var(--white, #FFF);
  opacity: 0.9;
  filter: blur(1.5625rem);
}

.p-top-breakfast__head {
  position: relative;
  z-index: 1;
}

.p-top-breakfast__body {
  margin-top: var(--lead-gap);
}
@media screen and (min-width: 1024px) {
  .p-top-breakfast__body {
    width: var(--lead-width);
    margin-top: var(--lead-offset);
    flex-shrink: 0;
  }
}

.p-top-breakfast__copy {
  color: var(--black, #333);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.5;
}
@media screen and (min-width: 1024px) {
  .p-top-breakfast__copy {
    font-size: 1.5rem;
  }
}

.p-top-breakfast__txt {
  margin-top: 1.5rem;
  font-size: 1rem;
  line-height: 2;
}
@media screen and (min-width: 1024px) {
  .p-top-breakfast__txt {
    margin-top: 2.5rem;
  }
}

.p-top-breakfast__action {
  display: flex;
  justify-content: flex-start;
  margin-top: 2.5rem;
}

/*----- 流れる料理写真。散らした配置は1枚の画像に焼き込んである -----*/
.p-top-breakfast__photos {
  --photos-h: 22.5rem;
  --photos-left: -3.0833;
  --photos-gap: calc(var(--photos-h) * 0.25);
  --photos-loop: calc(var(--photos-h) * 6.0545 + var(--photos-gap));
  --photos-duration: 105s;
  position: relative;
  z-index: 1;
  height: var(--photos-h);
  margin-top: 5rem;
  overflow-x: clip;
  pointer-events: none;
}
@media screen and (min-width: 1024px) {
  .p-top-breakfast__photos {
    --photos-h: 40rem;
    --photos-left: -1.9328;
    margin-top: 7.5rem;
  }
}

.p-top-breakfast__photos-track {
  display: flex;
  gap: var(--photos-gap);
  position: absolute;
  left: calc(var(--photos-h) * var(--photos-left));
  top: 0;
  will-change: transform;
  animation: p-top-breakfast-slide var(--photos-duration) linear infinite;
}
.p-top-breakfast__photos-track img {
  display: block;
  flex-shrink: 0;
  width: calc(var(--photos-h) * 6.0545);
  max-width: none;
  height: calc(var(--photos-h) * 1.045);
}
@media (prefers-reduced-motion: reduce) {
  .p-top-breakfast__photos-track {
    animation: none;
  }
}

@keyframes p-top-breakfast-slide {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(calc(-1 * var(--photos-loop)), 0, 0);
  }
}
/*::::::::::::::::::::::::::::::::::::::::::::::::::*/
/* STEP6 フロアマップ */
.p-top-floor {
  z-index: 1;
  padding-block: 3.75rem;
  background: var(--beige-1, #FCFAF2);
}
@media screen and (min-width: 1024px) {
  .p-top-floor {
    padding-block: 10rem;
  }
}
.p-top-floor .cm-section-head {
  --lead-gap: 2.5rem;
  --lead-width: 31.875rem;
  --lead-offset: 9.75rem;
}
.p-top-floor:before, .p-top-floor:after {
  content: "";
  display: block;
  width: 100%;
  height: 7.5rem;
  position: absolute;
  left: 0;
  pointer-events: none;
}
@media screen and (min-width: 1024px) {
  .p-top-floor:before, .p-top-floor:after {
    height: 10rem;
  }
}
.p-top-floor:before {
  bottom: 100%;
  background: linear-gradient(to top, var(--beige-1, #FCFAF2) 0%, rgba(252, 250, 242, 0) 100%);
}
.p-top-floor:after {
  top: 100%;
  background: linear-gradient(to bottom, var(--beige-1, #FCFAF2) 0%, rgba(252, 250, 242, 0) 100%);
}

.p-top-floor__wrap {
  margin-top: 5rem;
}
@media screen and (min-width: 1024px) {
  .p-top-floor__wrap {
    display: flex;
    justify-content: space-between;
    gap: 5rem;
    padding-left: 6.25rem;
  }
}

@media screen and (min-width: 1024px) {
  .p-top-floor__side {
    width: 30.375rem;
    flex-shrink: 0;
    position: sticky;
    top: calc(var(--header-height) + 2.5rem);
    align-self: flex-start;
  }
}
.p-top-floor__side .cm-floor-list {
  gap: 0.5rem;
  margin-top: 2.1875rem;
}
@media screen and (min-width: 1024px) {
  .p-top-floor__side .cm-floor-list {
    margin-top: 5rem;
  }
}

.p-top-floor__body {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  margin-top: 5rem;
}
@media screen and (min-width: 1024px) {
  .p-top-floor__body {
    width: 31.875rem;
    flex-shrink: 0;
    gap: 2.8125rem;
    margin-top: 0;
  }
}

.p-top-floor__item-title {
  margin-top: 1rem;
  color: #4D4D4D;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1;
}
@media screen and (min-width: 1024px) {
  .p-top-floor__item-title {
    margin-top: 1.25rem;
    font-size: 1.25rem;
  }
}

.p-top-floor__action {
  display: flex;
  justify-content: center;
  margin-top: 2.5rem;
}
@media screen and (min-width: 1024px) {
  .p-top-floor__action {
    width: 31.875rem;
    margin-top: 5rem;
    margin-left: auto;
  }
}

/*::::::::::::::::::::::::::::::::::::::::::::::::::*/
/* STEP5 沖縄を感じる（2段の逆走マーキー） */
@keyframes p-top-okinawa-left {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
@keyframes p-top-okinawa-right {
  from {
    transform: translateX(-50%);
  }
  to {
    transform: translateX(0);
  }
}
.p-top-okinawa {
  padding-block: 3.75rem 7.5rem;
}
@media screen and (min-width: 1024px) {
  .p-top-okinawa {
    padding-block: 8rem 15rem;
  }
}
.p-top-okinawa .cm-section-head {
  --lead-gap: 2.5rem;
  --lead-width: 31.875rem;
  --lead-offset: 0px;
}
.p-top-okinawa > .l-container {
  position: relative;
  z-index: 1;
}
.p-top-okinawa:before, .p-top-okinawa:after {
  content: "";
  display: block;
  width: 100%;
  height: 7.5rem;
  position: absolute;
  left: 0;
  z-index: 0;
  pointer-events: none;
}
@media screen and (min-width: 1024px) {
  .p-top-okinawa:before, .p-top-okinawa:after {
    height: 10rem;
  }
}
.p-top-okinawa:before {
  bottom: 100%;
  background: linear-gradient(to top, #F7F5ED 0%, rgba(247, 245, 237, 0) 100%);
}
.p-top-okinawa:after {
  top: 100%;
  background: linear-gradient(to bottom, #F7F5ED 0%, rgba(247, 245, 237, 0) 100%);
}

.p-top-okinawa__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: radial-gradient(closest-side, #CCE5CA, rgba(247, 245, 237, 0)) -10.1875rem 31.8125rem/22.5rem 22.5rem no-repeat, radial-gradient(closest-side, #E5B6A0, rgba(247, 245, 237, 0)) -0.375rem 48.8125rem/22.5rem 22.5rem no-repeat, radial-gradient(closest-side, #C0DFE5, rgba(247, 245, 237, 0)) 9.375rem 31.8125rem/22.5rem 22.5rem no-repeat, #F7F5ED;
}
@media screen and (min-width: 1024px) {
  .p-top-okinawa__bg {
    background: radial-gradient(closest-side, #CCE5CA, rgba(247, 245, 237, 0)) -8.625rem 9rem/55rem 55rem no-repeat, radial-gradient(closest-side, #E5B6A0, rgba(247, 245, 237, 0)) 30.125rem 23.5625rem/55rem 55rem no-repeat, radial-gradient(closest-side, #C0DFE5, rgba(247, 245, 237, 0)) 49.8125rem 9rem/55rem 55rem no-repeat, #F7F5ED;
  }
}

/*----- マーキー -----*/
.p-top-okinawa__marquee {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  margin-top: 5rem;
  overflow: hidden;
}
@media screen and (min-width: 1024px) {
  .p-top-okinawa__marquee {
    margin-top: 7rem;
  }
}

.p-top-okinawa__row {
  display: flex;
  width: max-content;
  will-change: transform;
  animation: p-top-okinawa-left var(--marquee-duration, 24s) linear infinite;
}
@media (hover: hover) {
  .p-top-okinawa__row:has(.p-top-okinawa__card-link:hover) {
    animation-play-state: paused;
  }
}
@media (prefers-reduced-motion: reduce) {
  .p-top-okinawa__row {
    animation: none;
  }
}

.p-top-okinawa__row--left {
  --marquee-duration: 24s;
}
@media screen and (min-width: 1024px) {
  .p-top-okinawa__row--left {
    --marquee-duration: 40s;
  }
}

.p-top-okinawa__row--right {
  --marquee-duration: 18s;
  animation-name: p-top-okinawa-right;
}
@media screen and (min-width: 1024px) {
  .p-top-okinawa__row--right {
    --marquee-duration: 30s;
  }
}

.p-top-okinawa__track {
  display: flex;
  gap: 1rem;
  padding-right: 1rem;
}
@media screen and (min-width: 1024px) {
  .p-top-okinawa__track {
    gap: 2rem;
    padding-right: 2rem;
  }
}

/*----- カード -----*/
.p-top-okinawa__card {
  width: 12.5rem;
  flex-shrink: 0;
}
@media screen and (min-width: 1024px) {
  .p-top-okinawa__card {
    width: 33.75rem;
  }
}

.p-top-okinawa__card-link {
  display: flex;
  flex-direction: column-reverse;
  height: 100%;
  border-radius: 0.5rem;
  background: var(--white, #FFF);
  overflow: hidden;
}
@media screen and (min-width: 1024px) {
  .p-top-okinawa__card-link {
    flex-direction: row;
    gap: 1rem;
    padding: 2rem;
  }
}
@media (hover: hover) {
  .p-top-okinawa__card-link:hover .p-top-okinawa__card-pic img, a:hover .p-top-okinawa__card-link .p-top-okinawa__card-pic img, button:hover .p-top-okinawa__card-link .p-top-okinawa__card-pic img {
    transform: scale(1.06);
  }
  .p-top-okinawa__card-link:hover .p-top-okinawa__card-title, a:hover .p-top-okinawa__card-link .p-top-okinawa__card-title, button:hover .p-top-okinawa__card-link .p-top-okinawa__card-title {
    color: var(--color-accent);
  }
}

.p-top-okinawa__card-body {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1rem;
}
@media screen and (min-width: 1024px) {
  .p-top-okinawa__card-body {
    gap: 0.75rem;
    width: 12.875rem;
    flex-shrink: 0;
    padding: 0;
  }
}

.p-top-okinawa__card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}
.p-top-okinawa__card-tags li {
  padding: 0.25rem;
  border-radius: 0.25rem;
  background: #F6F5F1;
  color: var(--black, #333);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}
@media screen and (max-width: 1023px) {
  .p-top-okinawa__card-tags li:nth-child(n+2) {
    display: none;
  }
}

.p-top-okinawa__card-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  color: var(--black, #333);
  font-size: 1rem;
  font-weight: 600;
  line-height: 2;
  transition: color var(--duration-hover) var(--ease-hover);
}
@media screen and (min-width: 1024px) {
  .p-top-okinawa__card-title {
    -webkit-line-clamp: 4;
    line-height: 1.8;
  }
}

.p-top-okinawa__card-pic {
  aspect-ratio: 3/2;
  overflow: hidden;
}
.p-top-okinawa__card-pic img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (hover: hover) {
  .p-top-okinawa__card-pic img {
    will-change: transform;
  }
}
.p-top-okinawa__card-pic img {
  transition: transform var(--duration-hover-zoom) var(--ease-hover);
}
@media screen and (min-width: 1024px) {
  .p-top-okinawa__card-pic {
    width: 15.875rem;
    height: 11.25rem;
    flex-shrink: 0;
    aspect-ratio: auto;
    border-radius: 0.5rem;
  }
}

.p-top-okinawa__action {
  display: flex;
  justify-content: center;
  position: relative;
  z-index: 1;
  margin-top: 2.5rem;
}
@media screen and (min-width: 1024px) {
  .p-top-okinawa__action {
    margin-top: 5rem;
  }
}

/*----------------------------------------------------
	ホテル概要
----------------------------------------------------*/
.p-about {
  padding-block: 2.5rem var(--padding-section-lg);
}
@media screen and (min-width: 1024px) {
  .p-about {
    padding-block: 7.5rem var(--padding-section-lg);
  }
}

.p-about__section + .p-about__section {
  padding-top: 5rem;
}

/*::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*----------------------------------------------------
	プライバシーポリシー
----------------------------------------------------*/
.p-privacy {
  padding-block: 2.5rem var(--padding-section-lg);
}
@media screen and (min-width: 1024px) {
  .p-privacy {
    padding-block: 7.5rem var(--padding-section-lg);
  }
}

.p-privacy__section + .p-privacy__section {
  padding-top: 5rem;
}

/*::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*----------------------------------------------------
	宿泊約款・規約
----------------------------------------------------*/
.p-terms {
  padding-block: 2.5rem var(--padding-section-lg);
}
@media screen and (min-width: 1024px) {
  .p-terms {
    padding-block: 7.5rem var(--padding-section-lg);
  }
}

.p-terms__section + .p-terms__section {
  padding-top: 5rem;
}

.p-terms__appendix {
  margin-top: 1rem;
}

/*::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*----------------------------------------------------
	よくあるご質問
----------------------------------------------------*/
.p-faq {
  padding-block: 5rem var(--padding-section-lg);
}
@media screen and (min-width: 1024px) {
  .p-faq {
    padding-block: 5.75rem var(--padding-section-lg);
  }
}

@media screen and (min-width: 1024px) {
  .p-faq__wrap {
    display: flex;
    justify-content: space-between;
  }
}

@media screen and (min-width: 1024px) {
  .p-faq__aside {
    width: 18.5rem;
    position: sticky;
    top: calc(var(--header-height) + 5rem);
    align-self: flex-start;
  }
}

.p-faq__aside-btn {
  display: none;
}
@media screen and (min-width: 1024px) {
  .p-faq__aside-btn {
    display: block;
  }
}
.p-faq__aside-btn {
  margin-top: 3.5rem;
}
.p-faq__aside-btn .c-btn-round {
  width: 100%;
  padding-inline: 1.25rem;
}

.p-faq__body {
  margin-top: 5rem;
}
@media screen and (min-width: 1024px) {
  .p-faq__body {
    width: 52.6875rem;
    margin-top: 0;
  }
}

.p-faq__section + .p-faq__section {
  padding-top: 4rem;
}

/*::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*----------------------------------------------------
	ご利用案内
----------------------------------------------------*/
.p-guide {
  padding-block: 4.5rem 7.5rem;
}
@media screen and (min-width: 1024px) {
  .p-guide {
    padding-top: 5rem;
  }
}

@media screen and (min-width: 1024px) {
  .p-guide__wrap {
    display: flex;
    justify-content: space-between;
  }
}

@media screen and (min-width: 1024px) {
  .p-guide__aside {
    width: 18.5rem;
    margin-top: 1.5rem;
    position: sticky;
    top: calc(var(--header-height) + 5rem);
    align-self: flex-start;
  }
}

.p-guide__aside-btn {
  display: none;
}
@media screen and (min-width: 1024px) {
  .p-guide__aside-btn {
    display: block;
  }
}
.p-guide__aside-btn {
  margin-top: 3.5rem;
}
.p-guide__aside-btn .c-btn-round {
  width: 100%;
  padding-inline: 1.25rem;
}

.p-guide__body {
  margin-top: 5rem;
}
@media screen and (min-width: 1024px) {
  .p-guide__body {
    width: 52.6875rem;
    margin-top: 0;
  }
}

/*::::::::::::::::::::::::::::::::::::::::::::::::::*/
.p-guide__section + .p-guide__section {
  padding-top: 10rem;
}

.p-guide__section > * + * {
  margin-top: 2.5rem;
}

.p-guide__visual img {
  display: block;
  width: 100%;
  aspect-ratio: 843/421;
  object-fit: cover;
}

/*::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*
	p-guide__item
	「◯ 見出し＋本文」の連なり。項目の下端に区切り線を持たせ、
	最後の項目の線がそのままセクションの締めになる
*/
.p-guide__item {
  padding-bottom: 2rem;
  border-bottom: var(--stroke1) solid var(--gray-1, #E6E6E6);
}
.p-guide__item + .p-guide__item {
  padding-top: 2rem;
}
@media screen and (min-width: 1024px) {
  .p-guide__item {
    padding-bottom: 2.5rem;
  }
  .p-guide__item + .p-guide__item {
    padding-top: 2.5rem;
  }
}

.p-guide__item-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.5;
}

.p-guide__item-mark {
  flex-shrink: 0;
}

.p-guide__item-body {
  margin-top: 1rem;
  font-size: 1rem;
  font-weight: 600;
  line-height: 2;
}
.p-guide__item-body > * + * {
  margin-top: 0.5rem;
}

.p-guide__item-body--blank > * + * {
  margin-top: 2rem;
}

.p-guide__link {
  color: var(--color-accent);
}

/*::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*
	p-guide__pay
	お支払い方法の下に置く、対応ブランドのロゴ一覧（ベージュ地）
*/
.p-guide__pay {
  margin-top: 2.5rem;
  padding: 1.25rem;
  border-radius: 0.5rem;
  background: var(--beige-1, #FCFAF2);
}
@media screen and (min-width: 1024px) {
  .p-guide__pay {
    padding: 2.5rem;
  }
}

.p-guide__pay-item + .p-guide__pay-item {
  margin-top: 1.5rem;
}
@media screen and (min-width: 1024px) {
  .p-guide__pay-item + .p-guide__pay-item {
    margin-top: 2.5rem;
  }
}

.p-guide__pay-title {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5;
}

.p-guide__pay-mark {
  flex-shrink: 0;
  color: var(--color-accent);
}

.p-guide__pay-fig {
  margin-top: 1rem;
}
.p-guide__pay-fig img {
  display: block;
  width: 100%;
  height: auto;
  mix-blend-mode: multiply;
}
@media screen and (min-width: 1024px) {
  .p-guide__pay-fig {
    max-width: 47.5625rem;
  }
}

@media screen and (min-width: 1024px) {
  .p-guide__pay-fig--sm {
    max-width: 36rem;
  }
}

/*::::::::::::::::::::::::::::::::::::::::::::::::::*/
.p-guide__bnr {
  margin-top: 10rem;
}
@media screen and (min-width: 1024px) {
  .p-guide__bnr {
    margin-top: 15rem;
  }
}

/*::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*----------------------------------------------------
	設備・サービス
----------------------------------------------------*/
.p-facility {
  padding-block: 5rem 7.5rem;
}
@media screen and (min-width: 1024px) {
  .p-facility {
    padding-bottom: 12.5rem;
  }
}

/*::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*
	p-facility__main
	01〜03のサービス紹介。PCのみ左側にベージュの帯を敷く。
	帯は装飾なので絶対配置にし、セクション側を position: relative で上に重ねる
*/
.p-facility__main {
  position: relative;
}
@media screen and (min-width: 1024px) {
  .p-facility__main:before {
    content: "";
    display: block;
    width: calc(50% + 19.5rem);
    position: absolute;
    left: 0;
    top: 9.3125rem;
    bottom: -10rem;
    pointer-events: none;
    background: var(--beige-1, #FCFAF2);
  }
}

.p-facility__section {
  position: relative;
}
.p-facility__section + .p-facility__section {
  margin-top: 10rem;
}
@media screen and (min-width: 1024px) {
  .p-facility__section + .p-facility__section {
    margin-top: 15rem;
  }
}

@media screen and (min-width: 1024px) {
  .p-facility__row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 5rem;
  }
}

@media screen and (min-width: 1024px) {
  .p-facility__row--reverse {
    flex-direction: row-reverse;
  }
}

@media screen and (min-width: 1024px) {
  .p-facility__body {
    position: relative;
    width: 36rem;
    flex-shrink: 0;
  }
}

/*::::::::::::::::::::::::::::::::::::::::::::::::::*/
.p-facility__lead {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding-left: 1rem;
  border-left: var(--stroke1) solid var(--gold-1, #CCAE52);
}
@media screen and (min-width: 1024px) {
  .p-facility__lead {
    gap: 2rem;
    padding-left: 2rem;
  }
}

.p-facility__num {
  color: var(--color-accent);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.1em;
}
@media screen and (min-width: 1024px) {
  .p-facility__num {
    font-size: 2rem;
  }
}

.p-facility__title {
  color: var(--black, #333);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.5;
}
@media screen and (min-width: 1024px) {
  .p-facility__title {
    font-size: 2rem;
  }
}

.p-facility__desc {
  color: var(--black, #333);
  font-size: 1rem;
  font-weight: 600;
  line-height: 2;
}

/*
	英字の飾り。SPは本文とボタンの間に流し込むが、
	PCは行の高さに算入させたくないので絶対配置で本文の下に垂らす
	（カルーセルの位置はビューアの下端から120pxで決まる）
*/
.p-facility__en {
  margin-top: 2rem;
  color: var(--beige-2, #F2ECDA);
  font-family: var(--Garamond);
  font-size: 3.125rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}
@media screen and (min-width: 1024px) {
  .p-facility__en {
    width: 100%;
    position: absolute;
    left: 0;
    top: 100%;
    margin-top: 2.5rem;
    font-size: 6.25rem;
  }
}

.p-facility__action {
  margin-top: 2rem;
}
@media screen and (min-width: 1024px) {
  .p-facility__action {
    margin-top: 2.5rem;
  }
}

/*::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*
	p-facility__viewer
	360度カメラのiframe、または暫定の通常写真。比率は16:9で固定する
*/
.p-facility__viewer {
  position: relative;
  margin-top: 2.5rem;
}
@media screen and (min-width: 1024px) {
  .p-facility__viewer {
    width: 39rem;
    flex-shrink: 0;
    margin-top: 0;
  }
}
.p-facility__viewer iframe,
.p-facility__viewer img {
  display: block;
  width: 100%;
  aspect-ratio: 16/9;
  border: 0;
  border-radius: 0.5rem;
  overflow: hidden;
}
.p-facility__viewer img {
  height: auto;
  object-fit: cover;
}

.p-facility__viewer-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: 0.625rem;
  top: 0.625rem;
  padding: 0.375rem 0.5rem;
  border-radius: 6.25rem;
  background: #F00;
  color: var(--white, #FFF);
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1;
  pointer-events: none;
}
@media screen and (min-width: 1024px) {
  .p-facility__viewer-badge {
    left: 1.25rem;
    top: 1.25rem;
    padding: 0.5rem;
    font-size: 0.8125rem;
  }
}

/*::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*
	p-facility__slider
	画面幅いっぱいに流す写真カルーセル。中央のスライドを軸に左右へはみ出す
*/
.p-facility__slider {
  margin-top: 5rem;
}
@media screen and (min-width: 1024px) {
  .p-facility__slider {
    margin-top: 7.5rem;
  }
}
.p-facility__slider .swiper-wrapper {
  transition-timing-function: linear;
}
.p-facility__slider .swiper {
  padding-bottom: 1.25rem;
}
@media screen and (min-width: 1024px) {
  .p-facility__slider .swiper {
    padding-bottom: 2.5rem;
  }
}
.p-facility__slider .swiper-slide {
  width: 11.25rem;
  height: auto;
}
@media screen and (min-width: 1024px) {
  .p-facility__slider .swiper-slide {
    width: 22.5rem;
  }
}

.p-facility__slide {
  display: block;
  border-radius: 0.5rem;
  overflow: hidden;
}
.p-facility__slide img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 180/240;
  object-fit: cover;
}
@media screen and (min-width: 1024px) {
  .p-facility__slide img {
    aspect-ratio: 360/240;
  }
}

.p-facility__slide--lower {
  transform: translateY(1.25rem);
}
@media screen and (min-width: 1024px) {
  .p-facility__slide--lower {
    transform: translateY(2.5rem);
  }
}

/*::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*
	p-facility__services
	その他サービス。SPはベージュ地を画面幅いっぱいに広げる
*/
.p-facility__services {
  margin-top: 10rem;
}
@media screen and (min-width: 1024px) {
  .p-facility__services {
    margin-top: 20.375rem;
  }
}

@media screen and (max-width: 1023px) {
  .p-facility__services-container {
    padding-inline: 0;
  }
}

.p-facility__services-list {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem 0.75rem;
  margin-top: 2.5rem;
  padding-inline: 1.25rem;
}
@media screen and (min-width: 1024px) {
  .p-facility__services-list {
    grid-template-columns: repeat(3, 1fr);
    gap: 4rem 2rem;
    width: 66.375rem;
    max-width: 100%;
    margin-inline: auto;
    padding-inline: 0;
  }
}

.p-facility__service-pic {
  border-radius: 0.25rem;
  overflow: hidden;
}
.p-facility__service-pic img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 332/221;
  object-fit: cover;
}

.p-facility__service-title {
  margin-top: 1rem;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.25;
}
@media screen and (min-width: 1024px) {
  .p-facility__service-title {
    margin-top: 1.5rem;
    font-size: 1.25rem;
  }
}

.p-facility__service-txt {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.5;
}
@media screen and (min-width: 1024px) {
  .p-facility__service-txt {
    font-size: 1rem;
  }
}

/*::::::::::::::::::::::::::::::::::::::::::::::::::*/
.p-facility__bnr {
  margin-top: 10rem;
}
@media screen and (min-width: 1024px) {
  .p-facility__bnr {
    margin-top: 15rem;
  }
}

/*::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*----------------------------------------------------
	客室紹介
----------------------------------------------------*/
.p-room {
  padding-block: 2.5rem 7.5rem;
}
@media screen and (min-width: 1024px) {
  .p-room {
    padding-top: 5rem;
  }
}

@media screen and (min-width: 1024px) {
  .p-room__wrap {
    display: flex;
    justify-content: space-between;
  }
}

@media screen and (min-width: 1024px) {
  .p-room__aside {
    width: 18.5rem;
    margin-top: 1.5rem;
    position: sticky;
    top: calc(var(--header-height) + 5rem);
    align-self: flex-start;
  }
}

.p-room__aside-btn {
  display: none;
}
@media screen and (min-width: 1024px) {
  .p-room__aside-btn {
    display: block;
  }
}
.p-room__aside-btn {
  margin-top: 3.5rem;
}
.p-room__aside-btn .c-btn-round {
  width: 100%;
  padding-inline: 1.25rem;
}

.p-room__body {
  margin-top: 5rem;
}
@media screen and (min-width: 1024px) {
  .p-room__body {
    width: 52.5rem;
    margin-top: 0;
  }
}

body.page-room {
  transition: background-color 0.6s ease;
}

body.is-room-premium {
  background-color: var(--beige-3, #F6F1E5);
}

/*::::::::::::::::::::::::::::::::::::::::::::::::::*/
.p-room__section + .p-room__section {
  padding-top: 7.5rem;
}
@media screen and (min-width: 1024px) {
  .p-room__section + .p-room__section {
    padding-top: 10rem;
  }
}
.p-room__section {
  scroll-margin-top: var(--header-height);
}

/*::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*
	p-room__visual
	PCは 写真スライダー（620px）＋ ROOM LAYOUT（200px）の横並び。
	SPはスライダーの下にROOM LAYOUTを中央寄せで置く
*/
.p-room__visual {
  margin-top: 2.5rem;
}
@media screen and (min-width: 1024px) {
  .p-room__visual {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.25rem;
  }
}

.p-room__slider {
  position: relative;
}
@media screen and (min-width: 1024px) {
  .p-room__slider {
    width: 38.75rem;
    flex-shrink: 0;
  }
}
.p-room__slider .swiper {
  border-radius: 0.5rem;
  overflow: hidden;
}

.p-room__slide {
  display: block;
}
.p-room__slide img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 620/413;
  object-fit: cover;
}

.p-room__slider--premium .p-room__slide {
  position: relative;
}
.p-room__slider--premium .p-room__slide::after {
  content: "";
  position: absolute;
  inset: 0.5rem;
  border: 1px solid var(--white, #FFF);
  border-radius: 0.5rem;
  pointer-events: none;
}

.p-room__slider-nav {
  position: absolute;
  top: 0;
  bottom: 1.625rem;
  margin-block: auto;
  z-index: 2;
  width: 2rem;
  height: 2rem;
  border-color: var(--white, #FFF);
  background: transparent;
}
.p-room__slider-nav svg {
  stroke: var(--white, #FFF);
}
@media (hover: hover) {
  .p-room__slider-nav:hover, a:hover .p-room__slider-nav, button:hover .p-room__slider-nav {
    background: rgba(255, 255, 255, 0.3);
  }
}
@media screen and (min-width: 1024px) {
  .p-room__slider-nav {
    width: 3rem;
    height: 3rem;
  }
}
.p-room__slider-nav.swiper-prev {
  left: 0.75rem;
}
@media screen and (min-width: 1024px) {
  .p-room__slider-nav.swiper-prev {
    left: 1.5rem;
  }
}
.p-room__slider-nav.swiper-next {
  right: 0.75rem;
}
@media screen and (min-width: 1024px) {
  .p-room__slider-nav.swiper-next {
    right: 1.5rem;
  }
}

.p-room__slider .p-room__slider-pagination {
  position: static;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: auto;
  margin-top: 1.25rem;
}
.p-room__slider .p-room__slider-pagination .swiper-pagination-bullet {
  display: block;
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 100%;
  background: var(--gray-1, #E6E6E6);
  cursor: pointer;
  transition: background-color var(--duration-hover) var(--ease-hover);
}
.p-room__slider .p-room__slider-pagination .swiper-pagination-bullet-active {
  background: var(--color-accent);
}

/*::::::::::::::::::::::::::::::::::::::::::::::::::*/
.p-room__layout {
  margin-top: 0.75rem;
}
@media screen and (min-width: 1024px) {
  .p-room__layout {
    width: 12.5rem;
    flex-shrink: 0;
    margin-top: 0;
    margin-bottom: 1.625rem;
  }
}

.p-room__premium {
  width: 8.625rem;
  margin: 0 auto 1rem;
}
@media screen and (min-width: 1024px) {
  .p-room__premium {
    width: 11.5rem;
    margin-bottom: 1.25rem;
  }
}
.p-room__premium img {
  display: block;
  width: 100%;
  height: auto;
}

.p-room__layout-title {
  color: var(--black, #333);
  font-family: var(--Garamond);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.1em;
  text-align: center;
}

.p-room__layout-pic {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 12.5rem;
  height: 12.5rem;
  margin-top: 1rem;
  margin-inline: auto;
  padding: 0;
  border-radius: 0.5rem;
  background: var(--beige-1, #FCFAF2);
}
.p-room__layout-pic img {
  display: block;
  width: 100%;
  height: auto;
}

/*
	間取り図のピン。写真スライダーと連動して、いま出ている写真の場所が
	金→グリーンに変わる（page.js の roomLayoutPins）。
	ピン自体もボタンなので、押すとその写真へ送る
*/
.p-room__pins {
  position: absolute;
  inset: 0;
}

.p-room__pin {
  position: absolute;
  left: var(--pin-x);
  top: var(--pin-y);
  transform: translate(-50%, -50%);
}

/*
	見た目は 20px の輪＋8px の点で、カレントのときだけ外側に 28px の淡い輪が増える。
	枠は 28px で固定しておくと、切り替わっても当たり判定が動かない。
	色は color、外側の輪は --pin-halo（シンボル側の circle が参照している）
*/
.p-room__pin-btn {
  --pin-halo: 0;
  display: block;
  width: 1.75rem;
  height: 1.75rem;
  color: var(--gold-1, #CCAE52);
  line-height: 0;
  transition: color var(--duration-hover) var(--ease-hover);
}
.p-room__pin-btn svg {
  display: block;
  width: 100%;
  height: 100%;
}
@media (hover: hover) {
  .p-room__pin-btn:hover, a:hover .p-room__pin-btn, button:hover .p-room__pin-btn {
    --pin-halo: 0.1;
  }
}
.p-room__pin-btn.is-current {
  --pin-halo: 0.1;
  color: var(--color-accent);
}

/*::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*
	p-room__spec
	表の中身は .c-spec-room（Component/_c-spec.scss）。ここでは置き場所の余白と幅だけ持つ
*/
.p-room__spec {
  margin-top: 2rem;
}
@media screen and (min-width: 1024px) {
  .p-room__spec {
    width: 38.75rem;
    max-width: 100%;
  }
}

/*::::::::::::::::::::::::::::::::::::::::::::::::::*/
.p-room__lead {
  margin-top: 2.5rem;
}

.p-room__lead-title {
  color: var(--black, #333);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.35;
}
@media screen and (min-width: 1024px) {
  .p-room__lead-title {
    font-size: 1.5rem;
    line-height: 1.5;
  }
}

.p-room__lead-txt {
  margin-top: 1rem;
  font-size: 1rem;
  font-weight: 600;
  line-height: 2;
}
@media screen and (min-width: 1024px) {
  .p-room__lead-txt {
    margin-top: 1.5rem;
  }
}

/*::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*
	p-room__accordions
	「室内設備」「設備・アメニティ・無料貸出」の開閉ブロック
*/
.p-room__accordions {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-top: 2.5rem;
}

.p-room__accordion {
  padding: 1.25rem;
  border-radius: 0.5rem;
  background: var(--beige-1, #FCFAF2);
  border: var(--stroke1) solid var(--beige-2, #F2ECDA);
  overflow: hidden;
}
@media screen and (min-width: 1024px) {
  .p-room__accordion {
    padding: 2.5rem;
    border-radius: 1rem;
  }
}

.p-room__accordion-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.p-room__accordion-title {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.25;
}
@media screen and (min-width: 1024px) {
  .p-room__accordion-title {
    font-size: 1.25rem;
  }
}

.p-room__accordion-mark {
  display: block;
  position: relative;
  width: 1.9375rem;
  height: 1.9375rem;
  flex-shrink: 0;
  border-radius: 100%;
  background: var(--color-accent);
  transition: background-color var(--duration-hover) var(--ease-hover);
}
.p-room__accordion-mark:before, .p-room__accordion-mark:after {
  content: "";
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0.8125rem;
  height: 0.09375rem;
  transform: translate(-50%, -50%);
  background: var(--white, #FFF);
  transition: transform var(--duration-hover) var(--ease-hover);
}
.p-room__accordion-mark:after {
  transform: translate(-50%, -50%) rotate(90deg);
}
.is-open > .p-room__accordion-mark:after {
  transform: translate(-50%, -50%) rotate(0deg);
}
@media (hover: hover) {
  .p-room__accordion-mark:hover, a:hover .p-room__accordion-mark, button:hover .p-room__accordion-mark {
    background: var(--color-accent-hover);
  }
}

.p-room__accordion-body {
  display: none;
  padding-top: 1.25rem;
}
@media screen and (min-width: 1024px) {
  .p-room__accordion-body {
    padding-top: 2.5rem;
  }
}

.p-room__accordion-btn.is-open + .p-room__accordion-body {
  display: block;
}

/*::::::::::::::::::::::::::::::::::::::::::::::::::*/
.p-room__group + .p-room__group {
  margin-top: 1.5rem;
}
@media screen and (min-width: 1024px) {
  .p-room__group + .p-room__group {
    margin-top: 2.5rem;
  }
}

.p-room__group-title {
  padding-bottom: 0.75rem;
  border-bottom: var(--stroke1) solid var(--gray-1, #E6E6E6);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.25;
}

.p-room__note {
  margin-top: 1rem;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.5;
}
@media screen and (min-width: 1024px) {
  .p-room__note {
    font-size: 0.875rem;
  }
}

.p-room__note + .p-room__icons {
  margin-top: 1rem;
}

/*::::::::::::::::::::::::::::::::::::::::::::::::::*/
.p-room__icons {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  row-gap: 1rem;
}
@media screen and (min-width: 1024px) {
  .p-room__icons {
    grid-template-columns: repeat(7, 1fr);
  }
}

.p-room__icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.p-room__icon-pic {
  width: 2.5rem;
  flex-shrink: 0;
  line-height: 0;
}
.p-room__icon-pic img {
  display: block;
  width: 100%;
  height: auto;
}

.p-room__icon-label {
  min-height: 2.5em;
  color: var(--black, #333);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  word-break: break-word;
}

/*::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*
	p-room__viewer
	360度カメラ。ベージュの半円の上にアイコンを載せ、下に16:9のiframeを敷く
*/
.p-room__viewer {
  margin-top: 5rem;
}

.p-room__viewer-head {
  width: 7.5rem;
  margin-inline: auto;
  text-align: center;
}
@media screen and (min-width: 1024px) {
  .p-room__viewer-head {
    width: 10rem;
  }
}

.p-room__viewer-ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 7.5rem;
  height: 3.75rem;
  border-radius: 5rem 5rem 0 0;
  background: linear-gradient(180deg, var(--beige-2, #F2ECDA) 0%, rgba(242, 236, 218, 0) 100%);
  padding-top: 0.75rem;
}
.p-room__viewer-ico img {
  display: block;
  width: 2.25rem;
  height: auto;
}
@media screen and (min-width: 1024px) {
  .p-room__viewer-ico {
    width: 10rem;
    height: 5rem;
    padding-top: 0.375rem;
  }
  .p-room__viewer-ico img {
    width: 3rem;
  }
}

.p-room__viewer-en {
  color: var(--color-accent);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: lining-nums;
}
@media screen and (min-width: 1024px) {
  .p-room__viewer-en {
    font-size: 1rem;
  }
}

.p-room__viewer-lead {
  margin-top: 1.5rem;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
}
@media screen and (min-width: 1024px) {
  .p-room__viewer-lead {
    margin-top: 2.25rem;
    font-size: 1.25rem;
  }
}

.p-room__viewer-frame {
  position: relative;
  margin-top: 1.5rem;
}
@media screen and (min-width: 1024px) {
  .p-room__viewer-frame {
    margin-top: 2.5rem;
  }
}
.p-room__viewer-frame iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16/9;
  border: 0;
  border-radius: 0.5rem;
  overflow: hidden;
}

.p-room__viewer-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: 0.625rem;
  top: 0.625rem;
  padding: 0.375rem 0.5rem;
  border-radius: 6.25rem;
  background: #F00;
  color: var(--white, #FFF);
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1;
  pointer-events: none;
}
@media screen and (min-width: 1024px) {
  .p-room__viewer-badge {
    left: 1.875rem;
    top: 1.875rem;
    padding: 0.75rem 1.25rem;
    font-size: 1rem;
  }
}

/*::::::::::::::::::::::::::::::::::::::::::::::::::*/
.p-room__action {
  display: flex;
  justify-content: center;
  margin-top: 2.5rem;
}
@media screen and (min-width: 1024px) {
  .p-room__action {
    margin-top: 5rem;
  }
}

/*::::::::::::::::::::::::::::::::::::::::::::::::::*/
.p-room__bnr {
  margin-top: 7.5rem;
}
@media screen and (min-width: 1024px) {
  .p-room__bnr {
    margin-top: 10rem;
  }
}

/*::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*----------------------------------------------------
	朝食レストラン
----------------------------------------------------*/
.p-restaurant {
  padding-block: 0 7.5rem;
}
@media screen and (min-width: 1024px) {
  .p-restaurant {
    padding-bottom: 12.5rem;
  }
}

/*::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*
	ページ頭の全幅ビジュアル
	SP・PCとも画面いっぱいの枠にして貼り付ける。写真は拡大した状態から等倍へ戻すので、
	はみ出しを枠で切る（拡大・戻し・貼り付きは page.js の restaurantMv）。
	貼り付いたあとは次の .p-restaurant__points がこの上に被さって隠す
*/
.p-restaurant__mv {
  position: relative;
  z-index: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}
.p-restaurant__mv picture {
  display: block;
  height: 100%;
}
.p-restaurant__mv img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/*
	--reveal を付けたサイトだけ、写真を白い画面で隠した状態から始める。
	TOPの朝食レストラン（.p-top-breakfast--reveal）と同じ組み立てで、
	x は最初から100%、y だけを 0% → 100% に開く。動かすのは page.js の restaurantMv
*/
.p-restaurant__mv--reveal {
  --mv-reveal: 0%;
  clip-path: inset(calc((100% - var(--mv-reveal)) / 2) 0);
}

/*::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*
	p-restaurant__point
	01〜03のポイント。SPは「本文パネル→写真」の縦積み、
	PCは画面の左右半分に分けて1ポイント＝100vhにする
*/
/*
	英字の飾りを1つだけ内側に持つので、その基準になる。
	PCは貼り付いた .p-restaurant__mv の上に被せたいので、地色を持つこのブロックを前に出す
*/
.p-restaurant__points {
  position: relative;
  z-index: 1;
  background: var(--white, #FFF);
}

@media screen and (min-width: 1024px) {
  .p-restaurant__point {
    display: flex;
    align-items: stretch;
    height: 100vh;
  }
}

/*
	PCで貼り付ける左半分の下敷き。地紋と英字の飾りをここにまとめ、
	本文だけがこの上を流れるようにする（貼り付けは page.js の restaurantPoints）。
	SPは箱を作らず、中の英字だけを今までどおり .p-restaurant__points 基準で置く
*/
.p-restaurant__points-layer {
  display: contents;
}
@media screen and (min-width: 1024px) {
  .p-restaurant__points-layer {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 50%;
    height: 100vh;
    pointer-events: none;
  }
}

.p-restaurant__points-bg {
  display: none;
}
@media screen and (min-width: 1024px) {
  .p-restaurant__points-bg {
    display: block;
    position: absolute;
    inset: 0;
    background: var(--img-p-restaurant-sec2-bg) center center/cover no-repeat;
  }
}

.p-restaurant__point-body {
  position: relative;
  min-height: 34rem;
  padding: 5.625rem 1.25rem 1.25rem;
  background: var(--img-p-restaurant-sec2-bg-sp) center bottom/cover no-repeat;
}
@media screen and (min-width: 1024px) {
  .p-restaurant__point-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 50%;
    min-height: 0;
    padding: 5.3125rem 5rem 0;
    background: none;
  }
}

.p-restaurant__point-lead {
  position: relative;
  padding-left: 1rem;
  border-left: var(--stroke1) solid var(--gold-1, #CCAE52);
}
.p-restaurant__point-lead > * + * {
  margin-top: 1rem;
}
@media screen and (min-width: 1024px) {
  .p-restaurant__point-lead {
    width: 22.5rem;
    max-width: 100%;
    padding-left: 2.5rem;
  }
  .p-restaurant__point-lead > * + * {
    margin-top: 2rem;
  }
}

.p-restaurant__point-num {
  color: var(--color-accent);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.1em;
}
@media screen and (min-width: 1024px) {
  .p-restaurant__point-num {
    font-size: 2rem;
  }
}

.p-restaurant__point-title {
  color: var(--black, #333);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.5;
}
@media screen and (min-width: 1024px) {
  .p-restaurant__point-title {
    line-height: 2;
  }
}

.p-restaurant__point-desc {
  color: var(--black, #333);
  font-size: 1rem;
  font-weight: 600;
  line-height: 2;
}

/*
	英字の飾り。ポイントごとには置かず、下敷きのなかに1つだけ置く。
	SPは1つ目のパネルの右下に横組み（パネルは min-height 固定なのでその下端に合わせる。
	下敷きが display:contents なので基準は .p-restaurant__points のまま）、
	PCは下敷きの右端＝画面中央へ縦組みで立てて、下敷きごと貼り付ける
	（PCは writing-mode で欧文が90度倒れる＝カンプの向きになる）
*/
.p-restaurant__point-en {
  position: absolute;
  z-index: 1;
  right: 1.25rem;
  top: 32.75rem;
  transform: translateY(-100%);
  color: var(--beige-2, #F2ECDA);
  font-family: var(--Garamond);
  font-size: 2rem;
  font-weight: 600;
  line-height: 1;
  text-align: right;
  pointer-events: none;
}
.p-restaurant__point-en span {
  display: block;
}
@media screen and (min-width: 1024px) {
  .p-restaurant__point-en {
    right: 2.5rem;
    top: 50%;
    transform: translateY(-50%);
    writing-mode: vertical-rl;
    font-size: 3.5rem;
    text-align: left;
  }
  .p-restaurant__point-en span + span {
    margin-top: 2.5rem;
  }
}

/*::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*
	p-restaurant__point-visual
	同じ写真を2枚重ね、背面をぼかして敷き詰める。
	PCは3枚ぶんを画面の右半分に重ね置きして、下敷きと一緒に貼り付ける。
	重ねてあるので、上の枚をフェードインさせるだけで写真が入れ替わる
*/
.p-restaurant__point-visual {
  position: relative;
}
@media screen and (min-width: 1024px) {
  .p-restaurant__point-visual {
    position: absolute;
    right: 0;
    top: 0;
    width: 50%;
    height: 100vh;
    overflow: hidden;
  }
}
.p-restaurant__point-visual img {
  display: block;
  width: 100%;
  height: auto;
}

.p-restaurant__point-blur {
  display: none;
}
@media screen and (min-width: 1024px) {
  .p-restaurant__point-blur {
    display: block;
    position: absolute;
    inset: 0;
    pointer-events: none;
  }
  .p-restaurant__point-blur img {
    height: 100%;
    object-fit: cover;
    transform: scale(1.1);
    filter: blur(1.5rem);
  }
}

.p-restaurant__point-pic {
  display: block;
}
.p-restaurant__point-pic img {
  aspect-ratio: 375/372;
  object-fit: cover;
}
@media screen and (min-width: 1024px) {
  .p-restaurant__point-pic {
    position: absolute;
    left: 5rem;
    right: 5rem;
    top: calc(var(--header-height) + 5.625rem);
    bottom: 5.5rem;
  }
  .p-restaurant__point-pic img {
    height: 100%;
    aspect-ratio: auto;
  }
}

/*::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*
	p-restaurant__slider
	画面幅いっぱいに流す写真カルーセル。
	PCではここから下が、貼り付いたままの写真の上に被さって隠す側になるので、
	余白は margin ではなく padding で持たせて地色を敷く（.p-restaurant__tail-cover）
*/
.p-restaurant__slider {
  padding-top: 10rem;
}
@media screen and (min-width: 1024px) {
  .p-restaurant__slider {
    padding-top: 12.5rem;
  }
}
.p-restaurant__slider .swiper-wrapper {
  transition-timing-function: linear;
}
.p-restaurant__slider .swiper {
  padding-bottom: 1.25rem;
}
@media screen and (min-width: 1024px) {
  .p-restaurant__slider .swiper {
    padding-bottom: 2.5rem;
  }
}
.p-restaurant__slider .swiper-slide {
  width: 11.25rem;
  height: auto;
}
@media screen and (min-width: 1024px) {
  .p-restaurant__slider .swiper-slide {
    width: 25rem;
  }
}

.p-restaurant__slide {
  display: block;
  border-radius: 0.5rem;
  overflow: hidden;
}
.p-restaurant__slide img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 180/240;
  object-fit: cover;
}
@media screen and (min-width: 1024px) {
  .p-restaurant__slide img {
    aspect-ratio: 400/267;
  }
}

.p-restaurant__slide--lower {
  transform: translateY(1.25rem);
}
@media screen and (min-width: 1024px) {
  .p-restaurant__slide--lower {
    transform: translateY(2.5rem);
  }
}

/*::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*
	p-restaurant__info
	基本情報。箱・飾り・見出しは .cm-databox（設備・サービスと共通）
*/
.p-restaurant__info {
  padding-top: 5rem;
}

@media screen and (max-width: 1023px) {
  .p-restaurant__info-container {
    padding-inline: 0;
  }
}

@media screen and (min-width: 1024px) {
  .cm-databox.p-restaurant__databox {
    width: 66.375rem;
    max-width: 100%;
    margin-inline: auto;
    padding-block: 5rem;
  }
}

.p-restaurant__data {
  display: grid;
  gap: 0 2rem;
}
@media screen and (min-width: 1024px) {
  .p-restaurant__data {
    grid-template-columns: 1fr 1fr;
  }
}

.p-restaurant__data-row {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding-block: 1rem;
  border-bottom: var(--stroke1) solid var(--gray-1, #E6E6E6);
}
.p-restaurant__data-row:first-child {
  padding-top: 0;
}

.p-restaurant__data-label {
  width: 6rem;
  flex-shrink: 0;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5;
}

.p-restaurant__data-row:before {
  content: "";
  display: block;
  width: var(--stroke1);
  height: 0.875rem;
  flex-shrink: 0;
  order: 1;
  margin-top: 0.3125rem;
  background: var(--gray-1, #E6E6E6);
}

.p-restaurant__data-row--multi:before {
  height: auto;
  margin-top: 0;
  align-self: stretch;
}

.p-restaurant__data-label {
  order: 0;
}

.p-restaurant__data-value {
  order: 2;
  flex: 1;
  min-width: 0;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5;
}

/*::::::::::::::::::::::::::::::::::::::::::::::::::*/
.p-restaurant__notes {
  display: grid;
  gap: 0 2rem;
  margin-top: 2.5rem;
  padding-inline: 1.25rem;
}
@media screen and (min-width: 1024px) {
  .p-restaurant__notes {
    grid-template-columns: 1fr 1fr;
    width: 66.375rem;
    max-width: 100%;
    margin-inline: auto;
    padding-inline: 0;
  }
}

.p-restaurant__notes-item {
  display: flex;
  gap: 0.25rem;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 2;
}
.p-restaurant__notes-item:before {
  content: "・";
  flex-shrink: 0;
}

/*::::::::::::::::::::::::::::::::::::::::::::::::::*/
.p-restaurant__bnr {
  padding-top: 10rem;
}
@media screen and (min-width: 1024px) {
  .p-restaurant__bnr {
    padding-top: 15rem;
  }
}

/*::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*
	貼り付いたままの写真（.p-restaurant__point-visual）を隠す側。
	写真は position:fixed で画面に残っているので、地色を敷いたうえで前に出す。
	余白を padding で持たせているのは、margin だと地色が途切れて写真が透けるため
*/
@media screen and (min-width: 1024px) {
  .p-restaurant__slider,
  .p-restaurant__info,
  .p-restaurant__bnr {
    position: relative;
    z-index: 2;
    background: var(--white, #FFF);
  }
}

/*::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*
	p-restaurant--marquee
	写真をポイントごとに差し替えず、3ポイント共通で流し続ける版（GRGホテル那覇東町）。
	PCは本文を右半分に寄せ、左に2列を上下へ。SPは本文3つのあとに2段を左右へ。
	流れ自体はCSSアニメーションなので、page.js の restaurantPoints がやるのは
	下敷き（.p-restaurant__points-layer）の貼り付けだけになる
*/
.p-restaurant--marquee .p-restaurant__point-body {
  position: relative;
  z-index: 1;
  min-height: 0;
  padding: 5.625rem 1.25rem;
  background: none;
}
@media screen and (min-width: 1024px) {
  .p-restaurant--marquee .p-restaurant__point-body {
    margin-left: auto;
    padding: 5.3125rem 5rem 0 5.625rem;
  }
}
@media screen and (min-width: 1024px) {
  .p-restaurant--marquee .p-restaurant__point-lead {
    width: 100%;
  }
}
@media screen and (min-width: 1024px) {
  .p-restaurant--marquee .p-restaurant__info {
    padding-top: 12.5rem;
  }
}
.p-restaurant--marquee {
  /*
  	下敷き。SPは本文のあとにそのまま流し、PCだけ画面いっぱいの帯にして貼り付ける
  */
}
.p-restaurant--marquee .p-restaurant__points-layer {
  display: block;
  position: static;
  width: auto;
  height: auto;
}
@media screen and (min-width: 1024px) {
  .p-restaurant--marquee .p-restaurant__points-layer {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100vh;
  }
}
.p-restaurant--marquee {
  /*
  	地紋＋円の帯はPCのみ。SPのカンプは白地。
  	画像はカンプの帯そのままの比率（1440×1230）なので、幅を合わせて上端で切る
  */
}
.p-restaurant--marquee .p-restaurant__points-bg {
  display: none;
}
@media screen and (min-width: 1024px) {
  .p-restaurant--marquee .p-restaurant__points-bg {
    display: block;
    position: absolute;
    inset: 0;
    overflow: hidden;
    background: var(--img-p-restaurant-sec2-bg) center top/100% auto no-repeat;
  }
}

/*::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*
	マーキー本体。SPは画面幅いっぱいの2段、PCは左端から2列
*/
.p-restaurant__marquee {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 7.5rem;
  overflow: hidden;
}
@media screen and (min-width: 1024px) {
  .p-restaurant__marquee {
    position: absolute;
    left: 5rem;
    top: 0;
    width: 39rem;
    height: 100%;
    margin-top: 0;
    flex-direction: row;
    gap: 1rem;
  }
}

.p-restaurant__marquee-lane {
  height: 21rem;
  overflow: hidden;
}
@media screen and (min-width: 1024px) {
  .p-restaurant__marquee-lane {
    width: 19rem;
    height: 100%;
  }
}
.p-restaurant__marquee-lane:nth-child(2) .p-restaurant__marquee-track {
  animation-direction: reverse;
}

/*
	同じ列を2本並べて半分ぶん送ると、繋ぎ目なく回り続ける。
	送りは transform だけなので、貼り付き中でも再レイアウトは起きない
*/
.p-restaurant__marquee-track {
  display: flex;
  width: max-content;
  animation: p-restaurant-marquee-x 40s linear infinite;
}
@media screen and (min-width: 1024px) {
  .p-restaurant__marquee-track {
    flex-direction: column;
    width: auto;
    height: max-content;
    animation-name: p-restaurant-marquee-y;
    animation-duration: 60s;
  }
}

.p-restaurant__marquee-pic {
  flex: none;
}
.p-restaurant__marquee-pic img {
  display: block;
  width: auto;
  height: 21rem;
}
@media screen and (min-width: 1024px) {
  .p-restaurant__marquee-pic img {
    width: 19rem;
    height: auto;
  }
}

@keyframes p-restaurant-marquee-x {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-50%, 0, 0);
  }
}
@keyframes p-restaurant-marquee-y {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(0, -50%, 0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .p-restaurant__marquee-track {
    animation: none;
  }
}
/*::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*----------------------------------------------------
	フロアマップ
----------------------------------------------------*/
.p-floor {
  padding-block: 5rem 7.5rem;
}
@media screen and (min-width: 1024px) {
  .p-floor {
    padding-block: 5rem 12.5rem;
  }
}

@media screen and (min-width: 1024px) {
  .p-floor__wrap {
    display: flex;
    justify-content: space-between;
    gap: 5rem;
  }
}

/*::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*
	p-floor__side
	フロアマップと館内リスト。PCのみ追従する
*/
@media screen and (min-width: 1024px) {
  .p-floor__side {
    width: 30.375rem;
    flex-shrink: 0;
    position: sticky;
    top: calc(var(--header-height) + 2.5rem);
    align-self: flex-start;
  }
}
.p-floor__side .cm-floor-list {
  margin-top: 2.5rem;
}
@media screen and (min-width: 1024px) {
  .p-floor__side .cm-floor-list {
    margin-top: 2rem;
  }
}

/*::::::::::::::::::::::::::::::::::::::::::::::::::*/
.p-floor__body {
  margin-top: 3.5rem;
}
@media screen and (min-width: 1024px) {
  .p-floor__body {
    width: 39rem;
    flex-shrink: 0;
    margin-top: 0;
  }
}

.p-floor__section {
  scroll-margin-top: calc(var(--header-height) + 1.5rem);
}
.p-floor__section + .p-floor__section {
  margin-top: 5rem;
}

.p-floor__section-title {
  margin-top: 1rem;
  color: var(--black, #333);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.5;
}
@media screen and (min-width: 1024px) {
  .p-floor__section-title {
    margin-top: 1rem;
    font-size: 1.25rem;
  }
}

/*::::::::::::::::::::::::::::::::::::::::::::::::::*/
.p-floor__bnr {
  margin-top: 10rem;
}
@media screen and (min-width: 1024px) {
  .p-floor__bnr {
    margin-top: 15rem;
  }
}

/*::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*----------------------------------------------------
	お問い合わせ
----------------------------------------------------*/
.page-contact .cm-pagehead--img {
  --pagehead-visual: 11rem;
}

.p-contact {
  padding-block: 5rem var(--padding-section-lg);
}
@media screen and (min-width: 1024px) {
  .p-contact {
    padding-block: 5.875rem var(--padding-section-lg);
  }
}

.p-contact__form {
  margin-top: 6.0625rem;
}
@media screen and (min-width: 1024px) {
  .p-contact__form {
    margin-top: 7.5rem;
  }
}

/*::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*----------------------------------------------------
	記事一覧（宿泊プラン／インフォメーション共通）
----------------------------------------------------*/
.p-plan,
.p-information {
  padding-block: 0 var(--padding-section-lg);
}
@media screen and (min-width: 1024px) {
  .p-plan,
  .p-information {
    padding-block: 0 var(--padding-section-lg);
  }
}

.p-plan__list,
.p-information__list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem 0.75rem;
  margin-top: 2.5rem;
}
@media screen and (min-width: 1024px) {
  .p-plan__list,
  .p-information__list {
    grid-template-columns: repeat(4, 1fr);
    gap: 4rem 2rem;
    margin-top: 5rem;
  }
}

.p-plan__empty,
.p-information__empty {
  margin-top: 2.5rem;
  font-size: 1rem;
  text-align: center;
}
@media screen and (min-width: 1024px) {
  .p-plan__empty,
  .p-information__empty {
    margin-top: 5rem;
  }
}

.p-plan__pagination,
.p-information__pagination {
  margin-top: 7.5rem;
}

/*::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*----------------------------------------------------
	c-heading
----------------------------------------------------*/
.c-heading-section {
  position: relative;
  padding-left: 2rem;
}
.c-heading-section:before {
  content: "";
  display: block;
  width: 2rem;
  height: 2rem;
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  background: var(--img-icon-logo) center center/0.75rem auto no-repeat;
}
@media screen and (min-width: 1024px) {
  .c-heading-section {
    padding-left: 2.5rem;
  }
  .c-heading-section:before {
    width: 2.5rem;
    height: 2.5rem;
    background-size: 1.5rem auto;
  }
}

.c-heading-section__title {
  color: var(--black, #333);
  font-size: 1.75rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.05em;
}
@media screen and (min-width: 1024px) {
  .c-heading-section__title {
    font-size: 2.5rem;
  }
}

.c-heading-section__en {
  margin-top: 0.5rem;
  color: var(--color-accent);
  font-family: var(--Garamond);
  font-size: 0.75rem;
  line-height: 1;
  letter-spacing: 0.1em;
}
@media screen and (min-width: 1024px) {
  .c-heading-section__en {
    margin-top: 0.9375rem;
    font-size: 1.25rem;
  }
}

@media screen and (min-width: 1024px) {
  .c-heading-section--lg {
    padding-left: 4rem;
  }
  .c-heading-section--lg:before {
    width: 4rem;
    height: 4rem;
    background-size: 2.375rem auto;
  }
  .c-heading-section--lg .c-heading-section__title {
    font-size: 3.5rem;
  }
  .c-heading-section--lg .c-heading-section__en {
    margin-top: 1rem;
  }
}

/*::::::::::::::::::::::::::::::::::::::::::::::::::*/
.c-heading-section-lg {
  position: relative;
  padding-top: 2rem;
}
.c-heading-section-lg:before {
  content: "";
  display: block;
  width: 4rem;
  height: 4rem;
  position: absolute;
  left: calc(50% - 2rem);
  top: 0;
  pointer-events: none;
  background: var(--img-icon-logo-alpha) center center/contain no-repeat;
}
.c-heading-section-lg__en {
  position: relative;
  color: var(--brown-1, #331D12);
  text-align: center;
  font-family: var(--Garamond);
  font-size: 2rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.1em;
}
@media screen and (min-width: 1024px) {
  .c-heading-section-lg__en {
    font-size: 3rem;
  }
}

.c-heading-section-lg__title {
  position: relative;
  margin-top: 0.75rem;
  color: #4D4D4D;
  text-align: center;
  font-size: 0.9375rem;
  line-height: 1;
}
.c-heading-section-lg--left {
  padding-top: 0;
}
.c-heading-section-lg--left:before {
  content: none;
}
.c-heading-section-lg--left .c-heading-section-lg__en {
  color: var(--black, #333);
  text-align: left;
  letter-spacing: 0.1em;
}
.c-heading-section-lg--left .c-heading-section-lg__title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
  font-weight: 600;
  text-align: left;
}
.c-heading-section-lg--left .c-heading-section-lg__title:before {
  content: "";
  display: block;
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  pointer-events: none;
  background: var(--img-icon-logo) center center/1.25rem auto no-repeat;
}

/*::::::::::::::::::::::::::::::::::::::::::::::::::*/
.c-heading-label {
  position: relative;
  padding-top: 1.3125rem;
  border-top: var(--stroke1) solid var(--gray-1, #E6E6E6);
  display: flex;
  align-items: center;
}
.c-heading-label:before {
  content: "";
  display: block;
  width: 1.25rem;
  height: 0.125rem;
  position: absolute;
  left: 0;
  top: calc(-1 * var(--stroke1));
  pointer-events: none;
  background: var(--color-accent);
}
@media screen and (min-width: 1024px) {
  .c-heading-label {
    padding-top: 2.5rem;
  }
  .c-heading-label:before {
    width: 2.5rem;
  }
}

.c-heading-label__label {
  width: 2rem;
  color: var(--color-accent);
  font-size: 0.75rem;
  line-height: 100%;
  letter-spacing: 0.05em;
}
@media screen and (min-width: 1024px) {
  .c-heading-label__label {
    width: 3rem;
    font-size: 1rem;
  }
}

.c-heading-label__title {
  padding-left: 0.5rem;
  flex: 1;
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 125%;
  letter-spacing: 0.05em;
  border-left: var(--stroke1) solid #D9D9D9;
}
@media screen and (min-width: 1024px) {
  .c-heading-label__title {
    padding-left: 1rem;
    font-size: 2rem;
  }
}

/*::::::::::::::::::::::::::::::::::::::::::::::::::*/
.c-heading-icon {
  position: relative;
  padding-top: 1.25rem;
  border-top: var(--stroke1) solid var(--gray-1, #E6E6E6);
  display: flex;
  align-items: center;
}
.c-heading-icon:before {
  content: "";
  display: block;
  width: 1.25rem;
  height: 0.125rem;
  position: absolute;
  left: 0;
  top: calc(-1 * var(--stroke1));
  pointer-events: none;
  background: var(--color-accent);
}
@media screen and (min-width: 1024px) {
  .c-heading-icon {
    padding-top: 2.5rem;
  }
  .c-heading-icon:before {
    width: 2.5rem;
  }
}

.c-heading-icon__icon {
  width: 2rem;
}
.c-heading-icon__icon img {
  width: 1.5rem;
}
@media screen and (min-width: 1024px) {
  .c-heading-icon__icon {
    width: 3.5rem;
  }
  .c-heading-icon__icon img {
    width: 2.5rem;
  }
}

.c-heading-icon__title {
  padding-left: 0.5rem;
  flex: 1;
  font-size: 1.5rem;
  line-height: 125%;
  border-left: var(--stroke1) solid #D9D9D9;
}
@media screen and (min-width: 1024px) {
  .c-heading-icon__title {
    padding-left: 1rem;
    font-size: 2rem;
  }
}

/*::::::::::::::::::::::::::::::::::::::::::::::::::*/
.c-heading-line, .cm-post > h3 {
  position: relative;
  padding-bottom: 1rem;
  border-bottom: var(--stroke1) solid var(--gray-1, #E6E6E6);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.5;
}
.c-heading-line:after, .cm-post > h3:after {
  content: "";
  display: block;
  width: 2.5rem;
  height: var(--stroke1);
  position: absolute;
  left: 0;
  bottom: calc(-1 * var(--stroke1));
  pointer-events: none;
  background: var(--color-accent);
}

/*::::::::::::::::::::::::::::::::::::::::::::::::::*/
.c-heading-bar, .cm-post > h1,
.cm-post > h2 {
  position: relative;
  display: flex;
  padding: 1rem 1rem 1rem 3.375rem;
  align-items: center;
  background: var(--beige-1, #FCFAF2);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.5;
}
.c-heading-bar:before, .cm-post > h1:before,
.cm-post > h2:before {
  content: "";
  display: block;
  width: 1.875rem;
  height: 1.875rem;
  position: absolute;
  left: 1rem;
  top: 1rem;
  pointer-events: none;
  background: var(--img-icon-logo) center center/1.125rem auto no-repeat;
}

/*::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*----------------------------------------------------
	c-heading-underline
	全幅の細い下線だけの見出し（宿泊プラン本文・その他のプラン）
----------------------------------------------------*/
.c-heading-underline, .p-single-plan__entry.cm-post > h2,
.p-single-information__entry.cm-post > h2, .p-single-plan__related-title {
  padding-bottom: 0.5rem;
  border-bottom: var(--stroke1) solid var(--black, #333);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.5;
}
@media screen and (min-width: 1024px) {
  .c-heading-underline, .p-single-plan__entry.cm-post > h2,
  .p-single-information__entry.cm-post > h2, .p-single-plan__related-title {
    font-size: 1.25rem;
  }
}

/*::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*----------------------------------------------------
	記事詳細（宿泊プラン／インフォメーション共通）
----------------------------------------------------*/
.p-single-plan,
.p-single-information,
.p-single-okinawa {
  padding-block: 1.25rem var(--padding-section-lg);
}

.p-single-plan__wrap,
.p-single-information__wrap,
.p-single-okinawa__wrap {
  margin-top: 3.75rem;
}
@media screen and (min-width: 1024px) {
  .p-single-plan__wrap,
  .p-single-information__wrap,
  .p-single-okinawa__wrap {
    width: 52.625rem;
    max-width: 100%;
    margin-inline: auto;
    margin-top: 5rem;
  }
}

/*::::::::::::::::::::::::::::::::::::::::::::::::::*/
.p-single-plan__entry,
.p-single-information__entry,
.p-single-okinawa__entry {
  margin-top: 2.5rem;
}
@media screen and (min-width: 1024px) {
  .p-single-plan__entry,
  .p-single-information__entry,
  .p-single-okinawa__entry {
    margin-top: 5rem;
  }
}

.p-single-plan__foot,
.p-single-information__foot,
.p-single-okinawa__foot {
  display: flex;
  justify-content: center;
  margin-top: 2.5rem;
}
@media screen and (min-width: 1024px) {
  .p-single-plan__foot,
  .p-single-information__foot,
  .p-single-okinawa__foot {
    margin-top: 5rem;
  }
}

/*::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*----------------------------------------------------
	沖縄を感じる 記事本文
	H2は共通の c-heading-bar ではなく、テキスト幅ぶんの下線見出し
----------------------------------------------------*/
@media screen and (min-width: 1024px) {
  .p-single-okinawa__entry.cm-post {
    gap: 2.5rem;
  }
}
.p-single-okinawa__entry.cm-post > h2 {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  padding: 0 0 0.5rem;
  background: none;
  border-bottom: var(--stroke1) solid var(--black, #333);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.5;
}
.p-single-okinawa__entry.cm-post > h2:before {
  content: none;
}
@media screen and (min-width: 1024px) {
  .p-single-okinawa__entry.cm-post > h2 {
    font-size: 1.25rem;
  }
}
.p-single-okinawa__entry.cm-post > h2:not(:first-child) {
  margin-top: 1.25rem;
}
@media screen and (min-width: 1024px) {
  .p-single-okinawa__entry.cm-post > h2:not(:first-child) {
    margin-top: 2.5rem;
  }
}
.p-single-okinawa__entry.cm-post .wp-block-media-text {
  margin-top: 1.25rem;
}
@media screen and (min-width: 1024px) {
  .p-single-okinawa__entry.cm-post .wp-block-media-text {
    margin-top: 2.5rem;
  }
}
.p-single-okinawa__entry.cm-post .wp-block-gallery {
  margin-top: 1.25rem;
}
@media screen and (min-width: 1024px) {
  .p-single-okinawa__entry.cm-post .wp-block-gallery {
    margin-top: 5rem;
    margin-bottom: 2.5rem;
  }
}
.p-single-okinawa__entry.cm-post blockquote ul {
  font-size: 1.125rem;
  line-height: 1.5;
}
.p-single-okinawa__entry.cm-post blockquote ul:not(:first-child) {
  margin-top: 1rem;
}

/*::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*----------------------------------------------------
	宿泊プラン／インフォメーション 記事本文
	H2 は共通の c-heading-bar ではなく、細い下線見出し（プランは全幅、インフォメーションは文字幅）
----------------------------------------------------*/
.p-single-plan__entry.cm-post > h2,
.p-single-information__entry.cm-post > h2 {
  display: block;
  padding: 0 0 0.5rem;
  background: none;
}
.p-single-plan__entry.cm-post > h2:before,
.p-single-information__entry.cm-post > h2:before {
  content: none;
}
.p-single-plan__entry.cm-post > h2:not(:first-child),
.p-single-information__entry.cm-post > h2:not(:first-child) {
  margin-top: 1.25rem;
}
@media screen and (min-width: 1024px) {
  .p-single-plan__entry.cm-post > h2:not(:first-child),
  .p-single-information__entry.cm-post > h2:not(:first-child) {
    margin-top: 2.5rem;
  }
}
.p-single-plan__entry.cm-post .wp-block-media-text__content h3,
.p-single-information__entry.cm-post .wp-block-media-text__content h3 {
  width: fit-content;
  max-width: 100%;
  padding-bottom: 0.5rem;
  border-bottom: var(--stroke1) solid var(--black, #333);
  color: var(--black, #333);
  font-weight: 600;
}
.p-single-plan__entry.cm-post .wp-block-media-text__content,
.p-single-information__entry.cm-post .wp-block-media-text__content {
  align-self: start;
}
.p-single-plan__entry.cm-post .wp-block-media-text__content p,
.p-single-information__entry.cm-post .wp-block-media-text__content p {
  line-height: 1.8;
}
.p-single-plan__entry.cm-post li,
.p-single-information__entry.cm-post li {
  line-height: 1.8;
}
.p-single-plan__entry.cm-post > p + ul,
.p-single-information__entry.cm-post > p + ul {
  margin-top: -1.875rem;
}
@media screen and (min-width: 1024px) {
  .p-single-plan__entry.cm-post > p + ul,
  .p-single-information__entry.cm-post > p + ul {
    margin-top: -2.25rem;
  }
}
.p-single-plan__entry.cm-post > .is-style-link-arrow:last-child,
.p-single-information__entry.cm-post > .is-style-link-arrow:last-child {
  margin-top: 1.25rem;
}
@media screen and (min-width: 1024px) {
  .p-single-plan__entry.cm-post > .is-style-link-arrow:last-child,
  .p-single-information__entry.cm-post > .is-style-link-arrow:last-child {
    margin-top: 2.5rem;
  }
}

.p-single-information__entry.cm-post > h2 {
  width: fit-content;
  max-width: 100%;
}
.p-single-information__entry.cm-post .wp-block-media-text__content h3 {
  width: auto;
}

/*::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*----------------------------------------------------
	その他のプラン
----------------------------------------------------*/
.p-single-plan__related {
  margin-top: 5rem;
}
@media screen and (min-width: 1024px) {
  .p-single-plan__related {
    margin-top: 7.5rem;
  }
}

.p-single-plan__related-more {
  display: flex;
  justify-content: flex-end;
  margin-top: 1.5rem;
}
@media screen and (min-width: 1024px) {
  .p-single-plan__related-more {
    margin-top: 2.5rem;
  }
}

.p-single-plan__related .p-plan__list {
  margin-top: 1.5rem;
}
@media screen and (min-width: 1024px) {
  .p-single-plan__related .p-plan__list {
    margin-top: 2.5rem;
  }
}

@media screen and (min-width: 1024px) {
  .p-single-plan__related + .p-single-plan__foot {
    margin-top: 7.5rem;
  }
}

/*::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*----------------------------------------------------
	c-card-information
	記事一覧のカード（プラン／インフォメーション共通）
----------------------------------------------------*/
.c-card-information__pic {
  overflow: hidden;
  aspect-ratio: 296/222;
  border-radius: 0.5rem;
}
.c-card-information__pic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (hover: hover) {
  .c-card-information__pic img {
    will-change: transform;
  }
}
.c-card-information__pic img {
  transition: transform var(--duration-hover-zoom) var(--ease-hover);
}

.c-card-information__body {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.c-card-information__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
}
@media screen and (min-width: 1024px) {
  .c-card-information__meta {
    flex-direction: row;
    align-items: center;
  }
}

.c-card-information__date {
  font-size: 0.875rem;
  line-height: 1;
}

.c-card-information__cat {
  padding: 0.25rem;
  border-radius: 0.25rem;
  background: var(--beige-2, #F2ECDA);
  font-size: 0.8125rem;
  line-height: 1;
}

.c-card-information__title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5;
  transition: color var(--duration-hover) var(--ease-hover);
}

/*::::::::::::::::::::::::::::::::::::::::::::::::::*/
.c-card-information__link {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
@media screen and (min-width: 1024px) {
  .c-card-information__link {
    gap: 1.5rem;
  }
}
@media (hover: hover) {
  .c-card-information__link:hover .c-card-information__pic img, a:hover .c-card-information__link .c-card-information__pic img, button:hover .c-card-information__link .c-card-information__pic img {
    transform: scale(1.06);
  }
  .c-card-information__link:hover .c-card-information__title, a:hover .c-card-information__link .c-card-information__title, button:hover .c-card-information__link .c-card-information__title {
    color: var(--color-accent);
  }
}

/*::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*----------------------------------------------------
	c-card-information--vertical
	画像を全面に敷き、テキストを重ねる縦長カード
----------------------------------------------------*/
.c-card-information--vertical .c-card-information__link {
  position: relative;
  display: block;
  aspect-ratio: 296/528;
  border-radius: 0.5rem;
  overflow: hidden;
}
.c-card-information--vertical .c-card-information__link:after {
  content: "";
  display: block;
  width: 100%;
  height: 50%;
  position: absolute;
  left: 0;
  bottom: 0;
  pointer-events: none;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0) 100%);
}
.c-card-information--vertical .c-card-information__pic {
  position: absolute;
  inset: 0;
  aspect-ratio: auto;
  border-radius: 0;
}
.c-card-information--vertical .c-card-information__body {
  position: absolute;
  left: 0.5rem;
  right: 0.5rem;
  bottom: 0.5rem;
  z-index: 1;
  color: var(--white, #FFF);
}
@media screen and (min-width: 1024px) {
  .c-card-information--vertical .c-card-information__body {
    left: 1rem;
    right: 1rem;
    bottom: 1.125rem;
  }
}
.c-card-information--vertical .c-card-information__meta {
  flex-direction: column;
}
@media screen and (min-width: 1024px) {
  .c-card-information--vertical .c-card-information__meta {
    align-items: center;
    flex-direction: row;
  }
}
.c-card-information--vertical .c-card-information__cat {
  color: var(--color);
}
.c-card-information--vertical .c-card-information__title {
  color: var(--white, #FFF);
}
@media (hover: hover) {
  .c-card-information--vertical:hover .c-card-information__title, a:hover .c-card-information--vertical .c-card-information__title, button:hover .c-card-information--vertical .c-card-information__title {
    color: var(--white, #FFF);
  }
}

/*::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*----------------------------------------------------
	c-card-information--okinawa
	沖縄を感じる一覧。大小2サイズを .p-okinawa__list 側の nth-child で出し分ける
----------------------------------------------------*/
.c-card-information--okinawa .c-card-information__pic {
  aspect-ratio: 1/1;
}
@media screen and (min-width: 1024px) {
  .c-card-information--okinawa .c-card-information__body {
    gap: 1rem;
  }
}
.c-card-information--okinawa .c-card-information__meta {
  flex-direction: column;
  gap: 0.25rem;
}
@media screen and (min-width: 1024px) {
  .c-card-information--okinawa .c-card-information__meta {
    align-items: center;
    flex-direction: row;
    gap: 0.5rem;
  }
}
.c-card-information--okinawa .c-card-information__date {
  line-height: 1.5;
}
.c-card-information--okinawa .c-card-information__cat {
  padding: 0.375rem 0.75rem;
  border-radius: 0.8125rem;
  font-size: 0.875rem;
}

/*::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*----------------------------------------------------
	沖縄を感じる 一覧
----------------------------------------------------*/
.p-okinawa {
  padding-block: 2.5rem var(--padding-section-lg);
}
@media screen and (min-width: 1024px) {
  .p-okinawa {
    padding-block: 0.75rem var(--padding-section-lg);
  }
}

@media screen and (min-width: 1024px) {
  .p-okinawa__nav {
    width: 50.25rem;
    max-width: 100%;
    margin-inline: auto;
  }
}

.p-okinawa__list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem 1rem;
  margin-top: 2.5rem;
}
@media screen and (max-width: 1023px) {
  .p-okinawa__list > :nth-child(3n+1) {
    grid-column: span 2;
  }
  .p-okinawa__list > :nth-child(3n+1) .c-card-information__pic {
    aspect-ratio: 3/2;
  }
  .p-okinawa__list > :nth-child(3n+1) .c-card-information__title {
    -webkit-line-clamp: 2;
    font-size: 1.25rem;
  }
}
@media screen and (min-width: 1024px) {
  .p-okinawa__list {
    grid-template-columns: repeat(4, 1fr);
    gap: 4rem 2rem;
    margin-top: 7.5rem;
  }
  .p-okinawa__list > :nth-child(9n+1),
  .p-okinawa__list > :nth-child(9n+6),
  .p-okinawa__list > :nth-child(9n+8) {
    grid-column: span 2;
  }
  .p-okinawa__list > :nth-child(9n+1) .c-card-information__pic,
  .p-okinawa__list > :nth-child(9n+6) .c-card-information__pic,
  .p-okinawa__list > :nth-child(9n+8) .c-card-information__pic {
    aspect-ratio: 3/2;
  }
  .p-okinawa__list > :nth-child(9n+1) .c-card-information__title,
  .p-okinawa__list > :nth-child(9n+6) .c-card-information__title,
  .p-okinawa__list > :nth-child(9n+8) .c-card-information__title {
    -webkit-line-clamp: 2;
    font-size: 1.25rem;
  }
}

.p-okinawa__pagination {
  margin-top: 7.5rem;
}

/*::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*----------------------------------------------------
	cm-block-narrow
	下層ページの本文カラム（PCはコンテナより狭い1062px）
----------------------------------------------------*/
@media screen and (min-width: 1024px) {
  .cm-block-narrow {
    width: 66.375rem;
    max-width: 100%;
    margin-inline: auto;
  }
}

/*----------------------------------------------------
	cm-block-text
	見出しバーの下に置く「小見出し＋本文」の連なり
----------------------------------------------------*/
.cm-block-text {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  margin-top: 2.5rem;
}

.cm-block-text__item {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.cm-block-text__body {
  font-size: 1rem;
  font-weight: 600;
  line-height: 2;
}

/*----------------------------------------------------
	cm-accordion
	Q&Aのアコーディオン。開閉は .js-accordion（common.js）に任せる
----------------------------------------------------*/
.cm-accordion {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 1rem;
}

.cm-accordion__item {
  padding: 1rem;
  border: var(--stroke1) solid var(--gray-1, #E6E6E6);
  border-radius: 0.5rem;
  overflow: hidden;
}
@media screen and (min-width: 1024px) {
  .cm-accordion__item {
    padding: 1.5rem;
  }
}

.cm-accordion__q {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
}

.cm-accordion__a {
  display: none;
  align-items: flex-start;
  gap: 1rem;
  margin-top: 0.5rem;
}
.cm-accordion__q.is-open + .cm-accordion__a {
  display: flex;
}

.cm-accordion__mark {
  flex-shrink: 0;
  color: var(--color-accent);
  font-size: 1rem;
  font-weight: 600;
  line-height: 2;
}

.cm-accordion__a .cm-accordion__mark {
  color: var(--gold-1, #CCAE52);
}

.cm-accordion__txt {
  flex: 1;
  min-width: 0;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5;
}
@media screen and (min-width: 1024px) {
  .cm-accordion__txt {
    padding-right: 3.5rem;
  }
}

.cm-accordion__btn {
  flex-shrink: 0;
  position: relative;
  width: 1.9375rem;
  height: 1.9375rem;
  border-radius: 100%;
  background: var(--color-accent);
}
.cm-accordion__btn:before, .cm-accordion__btn:after {
  content: "";
  display: block;
  width: 0.9375rem;
  height: var(--stroke1);
  position: absolute;
  left: calc(50% - 0.46875rem);
  top: calc(50% - var(--stroke1) / 2);
  pointer-events: none;
  background: var(--white, #FFF);
  transition: transform var(--duration-hover) var(--ease-hover);
}
.cm-accordion__btn:after {
  transform: rotate(90deg);
}
.cm-accordion__q.is-open .cm-accordion__btn:after {
  transform: rotate(0deg);
}

/*----------------------------------------------------
	cm-block-order
	「1.」「2.」と番号を振る条文リスト
----------------------------------------------------*/
.cm-block-order {
  counter-reset: order;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 2.5rem;
  font-size: 1rem;
  font-weight: 600;
  line-height: 2;
}

.cm-block-order__lead {
  font-size: 1rem;
  font-weight: 600;
  line-height: 2;
}
.cm-block-order__lead + .cm-block-order {
  margin-top: 1rem;
}

.cm-block-order__item {
  display: flex;
  gap: 0.25rem;
  counter-increment: order;
}
.cm-block-order__item:before {
  content: counter(order) ".";
  flex-shrink: 0;
  min-width: 0.9375rem;
  white-space: nowrap;
}

.cm-block-order__body {
  flex: 1;
  min-width: 0;
}
.cm-block-order__body > * + * {
  margin-top: 0.25rem;
}

/*----------------------------------------------------
	cm-table
	SPでは横スクロールさせる表
----------------------------------------------------*/
.cm-table {
  overflow-x: auto;
}
.cm-table table {
  width: 100%;
  min-width: 30.75rem;
  border-collapse: collapse;
  table-layout: fixed;
}
.cm-table th,
.cm-table td {
  padding: 0.5rem;
  border: var(--stroke1) solid var(--gray-1, #E6E6E6);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.5;
  text-align: center;
  vertical-align: middle;
}
@media screen and (min-width: 1024px) {
  .cm-table {
    overflow-x: visible;
  }
  .cm-table table {
    min-width: 0;
  }
}

.cm-table--left.cm-table--left {
  text-align: left;
}

.cm-table-title {
  font-size: 1rem;
  font-weight: 600;
  line-height: 2;
}
.cm-table-title + .cm-table {
  margin-top: 1rem;
}

.cm-table-note {
  margin-top: 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.5;
}
.cm-table-note + .cm-table-title {
  margin-top: 2.5rem;
}

/*----------------------------------------------------
	cm-block-define
	見出しバー（.c-heading-bar）の下に置く「項目名＋内容」の定義リスト
----------------------------------------------------*/
.cm-block-define {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  margin-top: 2.5rem;
}

.cm-block-define__item {
  display: flex;
  gap: 0.5rem;
}

.cm-block-define__label {
  flex-shrink: 0;
  width: 7.5rem;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5;
}
@media screen and (min-width: 1024px) {
  .cm-block-define__label {
    width: 10rem;
    font-size: 1.125rem;
  }
}

.cm-block-define__body {
  flex: 1;
  min-width: 0;
  font-size: 1rem;
  font-weight: 600;
  line-height: 2;
}
.cm-block-define__body > * + * {
  margin-top: 0.5rem;
}
.cm-block-define__body a {
  color: var(--color-accent);
}

.cm-block-define__line {
  height: var(--stroke1);
  margin: 0;
  border: 0;
  background: #D9D9D9;
}

/*::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*----------------------------------------------------
	cm-guide
	ベージュ地の案内カード（お問い合わせ導線など）
----------------------------------------------------*/
.cm-guide {
  display: grid;
  grid-auto-rows: 1fr;
  gap: 1rem;
}
@media screen and (min-width: 1024px) {
  .cm-guide {
    display: flex;
    justify-content: center;
    gap: 1.9375rem;
  }
}

.cm-guide__item {
  flex-shrink: 0;
  padding: 2rem 1.25rem;
  border-radius: 0.5rem;
  background: var(--beige-1, #FCFAF2);
}
@media screen and (min-width: 1024px) {
  .cm-guide__item {
    width: 25.375rem;
    padding: 2.5rem;
  }
}

.cm-guide__icon {
  width: 4rem;
  margin-inline: auto;
}
@media screen and (min-width: 1024px) {
  .cm-guide__icon {
    width: 5rem;
  }
}
.cm-guide__icon img {
  width: 100%;
}

.cm-guide__body {
  margin-top: 1rem;
}
@media screen and (min-width: 1024px) {
  .cm-guide__body {
    margin-top: 1.5rem;
  }
}

.cm-guide__title {
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.5;
  text-align: center;
}

.cm-guide__txt {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.5;
}
@media screen and (min-width: 1024px) {
  .cm-guide__txt {
    margin-top: 1rem;
  }
}

.cm-guide__action {
  margin-top: 1.625rem;
}
@media screen and (min-width: 1024px) {
  .cm-guide__action {
    margin-top: 1.5rem;
  }
}

.cm-guide__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  padding: 1rem;
  border: var(--stroke1) solid var(--color-accent);
  border-radius: 1.75rem;
  background: var(--white, #FFF);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
}
@media (hover: none) {
  .cm-guide__btn:active {
    transform: scale(0.965);
  }
}
@media (hover: hover) {
  .cm-guide__btn:hover, a:hover .cm-guide__btn, button:hover .cm-guide__btn {
    background: var(--color-accent);
    color: var(--white, #FFF);
  }
}

.cm-guide__btn-ico {
  width: 1rem;
  line-height: 0;
}
.cm-guide__btn-ico svg {
  width: 100%;
  aspect-ratio: 1/1;
  fill: var(--color-accent);
  transition: fill var(--duration-hover) var(--ease-hover);
}
@media (hover: hover) {
  .cm-guide__btn-ico:hover svg, a:hover .cm-guide__btn-ico svg, button:hover .cm-guide__btn-ico svg {
    fill: var(--white, #FFF);
  }
}

.cm-guide__tel {
  display: block;
  color: var(--color-accent);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1;
  text-align: center;
}

/*::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*----------------------------------------------------
	cm-floor
	フロアマップの共通パーツ（フロアマップページ／TOPの FLOOR MAP）
	置き場所で変わる寸法はカスタムプロパティで受け取る
----------------------------------------------------*/
/*
	cm-floor-maps
	フロアぶんのSVGを重ねて置き、カレントだけ見せる
*/
.cm-floor-maps {
  position: relative;
  aspect-ratio: 515/365;
}

.cm-floor-map {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration-hover) var(--ease-hover), visibility var(--duration-hover) var(--ease-hover);
}
.cm-floor-map.is-current {
  opacity: 1;
  visibility: visible;
}
.cm-floor-map svg {
  display: block;
  width: 100%;
  height: 100%;
}
.cm-floor-map path[id^=pin] {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  transition: fill var(--duration-hover) var(--ease-hover), transform var(--duration-hover-move) var(--ease-hover-lingering);
}
.cm-floor-map path.is-current {
  fill: var(--color-accent);
  transform: scale(1.4);
}

.cm-floor-map-note {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  z-index: 1;
  transform: translateY(-50%);
  color: #F00;
  font-family: var(--sans);
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  pointer-events: none;
}
@media screen and (min-width: 1024px) {
  .cm-floor-map-note {
    font-size: 0.875rem;
  }
}

/*----------------------------------------------------
	cm-floor-map 言語切替（1F）
	shutto翻訳が「アクティブな言語」に付ける印（data-stt-active）と
	<html lang> を見て、日本語レイヤーを隠し翻訳版SVGを重ねる
	※ .fl-base = 日本語版の bg-map-* / icon / text-jp
----------------------------------------------------*/
[data-floor="1f"] .fl-img {
  display: none;
}
body:has([data-stt-changelang="en"][data-stt-active]) [data-floor="1f"] .fl-base,
html[lang="en"] [data-floor="1f"] .fl-base,
html[data-stt-lang="en"] [data-floor="1f"] .fl-base,
body:has([data-stt-changelang="ko"][data-stt-active]) [data-floor="1f"] .fl-base,
html[lang="ko"] [data-floor="1f"] .fl-base,
html[data-stt-lang="ko"] [data-floor="1f"] .fl-base,
body:has([data-stt-changelang="zh-CN"][data-stt-active]) [data-floor="1f"] .fl-base,
html[lang="zh-CN"] [data-floor="1f"] .fl-base,
html[data-stt-lang="zh-CN"] [data-floor="1f"] .fl-base,
body:has([data-stt-changelang="zh-TW"][data-stt-active]) [data-floor="1f"] .fl-base,
html[lang="zh-TW"] [data-floor="1f"] .fl-base,
html[data-stt-lang="zh-TW"] [data-floor="1f"] .fl-base {
  display: none;
}
body:has([data-stt-changelang="en"][data-stt-active]) [data-floor="1f"] .fl-img[data-lang="en"],
html[lang="en"] [data-floor="1f"] .fl-img[data-lang="en"],
html[data-stt-lang="en"] [data-floor="1f"] .fl-img[data-lang="en"],
body:has([data-stt-changelang="ko"][data-stt-active]) [data-floor="1f"] .fl-img[data-lang="ko"],
html[lang="ko"] [data-floor="1f"] .fl-img[data-lang="ko"],
html[data-stt-lang="ko"] [data-floor="1f"] .fl-img[data-lang="ko"],
body:has([data-stt-changelang="zh-CN"][data-stt-active]) [data-floor="1f"] .fl-img[data-lang="zh-CN"],
html[lang="zh-CN"] [data-floor="1f"] .fl-img[data-lang="zh-CN"],
html[data-stt-lang="zh-CN"] [data-floor="1f"] .fl-img[data-lang="zh-CN"],
body:has([data-stt-changelang="zh-TW"][data-stt-active]) [data-floor="1f"] .fl-img[data-lang="zh-TW"],
html[lang="zh-TW"] [data-floor="1f"] .fl-img[data-lang="zh-TW"],
html[data-stt-lang="zh-TW"] [data-floor="1f"] .fl-img[data-lang="zh-TW"] {
  display: inline;
}
/*::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*
	cm-floor-list
	館内リスト。行頭の罫がカレントで緑に伸びる
*/
.cm-floor-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}
.cm-floor-list ul {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.cm-floor-list-floor {
  padding-left: 1.75rem;
  color: var(--color-accent);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
}
@media screen and (min-width: 1024px) {
  .cm-floor-list-floor {
    padding-left: 3rem;
  }
}

.cm-floor-list-link {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-left: 1.625rem;
  position: relative;
  color: var(--gray-2, #808080);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5;
  transition: color var(--duration-hover) var(--ease-hover);
}
.cm-floor-list-link:before {
  content: "";
  display: block;
  width: 0.625rem;
  height: var(--stroke1);
  position: absolute;
  left: 0;
  flex-shrink: 0;
  background: var(--gray-1, #E6E6E6);
  transition: width var(--duration-hover-move) var(--ease-hover-lingering), background-color var(--duration-hover) var(--ease-hover);
}
.cm-floor-list-link.is-current {
  color: var(--black, #333);
}
.cm-floor-list-link.is-current:before {
  width: 1.25rem;
  background: var(--color-accent);
}
@media (hover: hover) {
  .cm-floor-list-link:hover, a:hover .cm-floor-list-link, button:hover .cm-floor-list-link {
    color: var(--black, #333);
  }
}
@media screen and (min-width: 1024px) {
  .cm-floor-list-link {
    padding-left: 3rem;
  }
  .cm-floor-list-link:before {
    width: 1.25rem;
  }
  .cm-floor-list-link.is-current:before {
    width: 2.5rem;
  }
}

/*::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*
	cm-floor-viewer
	360度カメラのiframe
	タップするまでiframeには指を渡さない（ページのスクロールを止めないため）
	タップで活性にすると、中の360ビューをそのまま操作できる
*/
.cm-floor-viewer {
  position: relative;
}
.cm-floor-viewer iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16/9;
  border: 0;
  border-radius: 0.5rem;
  overflow: hidden;
}
.cm-floor-viewer:has(.cm-floor-viewer-hit):not(.is-active) iframe {
  pointer-events: none;
}
.cm-floor-viewer.is-active .cm-floor-viewer-hit {
  display: none;
}
.cm-floor-viewer.is-active .cm-floor-viewer-badge {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}

.cm-floor-viewer-hit {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.cm-floor-viewer-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 4.5rem;
  height: 4.5rem;
  margin: -2.25rem 0 0 -2.25rem;
  border-radius: 50%;
  background: rgba(26, 20, 14, 0.62);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
  color: var(--white, #FFF);
  pointer-events: none;
}
.cm-floor-viewer-badge svg {
  display: block;
  width: 3.25rem;
  height: 2.375rem;
}
@media screen and (min-width: 1024px) {
  .cm-floor-viewer-badge {
    width: 5rem;
    height: 5rem;
    margin: -2.5rem 0 0 -2.5rem;
  }
  .cm-floor-viewer-badge svg {
    width: 3.625rem;
    height: 2.625rem;
  }
}

/*::::::::::::::::::::::::::::::::::::::::::::::::::*/
.cm-floor-list--inline {
  grid-template-columns: 1fr;
}
.cm-floor-list--inline ul {
  margin-top: 0;
}

/*::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*----------------------------------------------------
	cm-databox
	ベージュ地の情報ボックス。右上にGRGの飾り、中央に見出し＋下線を置く
	設備・サービスの「その他サービス」と朝食レストランの「基本情報」で共有する
	箱の幅・上下の余白・飾りの大きさはページ側で上書きする
----------------------------------------------------*/
.cm-databox {
  position: relative;
  padding-block: 5rem;
  overflow: hidden;
  background: var(--beige-1, #FCFAF2);
}
@media screen and (min-width: 1024px) {
  .cm-databox {
    padding-block: 6.875rem;
    border-radius: 0.25rem;
  }
}

.cm-databox__deco {
  width: 12.34375rem;
  position: absolute;
  right: 0;
  top: 0;
  pointer-events: none;
}
.cm-databox__deco img {
  display: block;
  width: 100%;
  height: auto;
}
@media screen and (min-width: 1024px) {
  .cm-databox__deco {
    width: 24.6875rem;
  }
}

.cm-databox__title {
  position: relative;
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  padding-bottom: 0.5rem;
  border-bottom: var(--stroke1) solid var(--color-accent);
  color: var(--black, #333);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.5;
  text-align: center;
}
@media screen and (min-width: 1024px) {
  .cm-databox__title {
    padding-bottom: 1rem;
    font-size: 2rem;
  }
}

.cm-databox__body {
  position: relative;
  margin-top: 2.5rem;
  padding-inline: 1.25rem;
}
@media screen and (min-width: 1024px) {
  .cm-databox__body {
    padding-inline: 5rem;
  }
}

/*::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*----------------------------------------------------
	...
----------------------------------------------------*/
.cm-nav-header {
  display: flex;
  align-items: center;
  gap: 2.0625rem;
}
.cm-nav-header > li:not(:first-child) {
  position: relative;
}
.cm-nav-header > li:not(:first-child):before {
  content: "";
  display: block;
  width: var(--stroke1);
  height: 0.9375rem;
  flex-shrink: 0;
  position: absolute;
  left: -1rem;
  top: 0.1875rem;
  pointer-events: none;
  background: var(--gray-1, #E6E6E6);
}

.cm-nav-header-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 0.25rem;
  color: var(--black, #333);
  font-size: 0.9375rem;
  line-height: 100%;
  position: relative;
}
.cm-nav-header-link:after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  left: 0;
  bottom: 0;
  pointer-events: none;
  border-bottom: var(--stroke1) solid var(--color-accent);
  transition: width var(--duration-hover-move) var(--ease-hover-lingering);
}
@media (hover: hover) {
  .cm-nav-header-link:hover, a:hover .cm-nav-header-link, button:hover .cm-nav-header-link {
    color: var(--color-accent);
  }
  .cm-nav-header-link:hover:after, a:hover .cm-nav-header-link:after, button:hover .cm-nav-header-link:after {
    width: 100%;
  }
}

/*::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*
	cm-nav-main
	サイトのメインナビ。フッターとヘッダードロワー（SP）で共有する
*/
.cm-nav-main {
  display: grid;
}
@media screen and (min-width: 1024px) {
  .cm-nav-main {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1.25rem 2.5rem;
  }
}

.cm-nav-main-link {
  position: relative;
  padding-block: 1.25rem;
  border-top: var(--stroke1) solid var(--gray-1, #E6E6E6);
  display: inline-flex;
  width: 100%;
  align-items: center;
  gap: 0.5rem;
}
.cm-nav-main-link:before {
  content: "";
  display: block;
  width: 1rem;
  height: var(--stroke1);
  position: absolute;
  left: 0;
  top: calc(-1 * var(--stroke1));
  pointer-events: none;
  background: var(--color-accent);
  transition: width var(--duration-hover-move) var(--ease-hover-lingering);
}
@media (hover: hover) {
  .cm-nav-main-link:hover, a:hover .cm-nav-main-link, button:hover .cm-nav-main-link {
    color: var(--color-accent);
  }
  .cm-nav-main-link:hover:before, a:hover .cm-nav-main-link:before, button:hover .cm-nav-main-link:before {
    width: 100%;
  }
}
@media screen and (min-width: 1024px) {
  .cm-nav-main-link {
    padding-top: 1.125rem;
  }
}

.cm-nav-main-link__txt {
  flex: 1;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1;
}
@media screen and (min-width: 1024px) {
  .cm-nav-main-link__txt {
    font-size: 1rem;
  }
}

.cm-nav-main-link__arrow {
  display: block;
  width: 1.25rem;
  line-height: 0;
}
.cm-nav-main-link__arrow svg {
  width: 100%;
  aspect-ratio: 5/3;
  stroke: var(--color-accent);
  transition: transform var(--duration-hover-move) var(--ease-hover-lingering);
}
@media (hover: hover) {
  .cm-nav-main-link__arrow:hover svg, a:hover .cm-nav-main-link__arrow svg, button:hover .cm-nav-main-link__arrow svg {
    transform: translateX(0.25rem);
  }
}
/*
	cm-nav-main-info
	メインナビにぶら下がるサブリンク。フッターではPCヘッダーと重複するのでSPのみ表示
*/
.cm-nav-main-info {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1.25rem;
}
.cm-nav-main-info li {
  line-height: 0;
}
.cm-nav-main-info .c-btn-header-sm {
  font-size: 0.9375rem;
}
@media screen and (min-width: 1024px) {
  .l-footer .cm-nav-main-info {
    display: none;
  }
}

/*::::::::::::::::::::::::::::::::::::::::::::::::::*/
.cm-nav-aside {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}
@media screen and (min-width: 1024px) {
  .cm-nav-aside {
    grid-template-columns: 1fr;
    gap: var(--stroke1);
  }
}

.cm-nav-aside-link {
  display: inline-flex;
  width: 100%;
  min-height: 2.875rem;
  padding: 0.25rem 0.75rem;
  align-items: center;
  gap: 0.25rem;
  flex-shrink: 0;
  border-bottom: var(--stroke1) solid var(--beige-2, #F2ECDA);
  background: var(--beige-1, #FCFAF2);
}
@media (hover: none) {
  .cm-nav-aside-link:active {
    transform: scale(0.965);
  }
}
@media (hover: hover) {
  .cm-nav-aside-link:hover, a:hover .cm-nav-aside-link, button:hover .cm-nav-aside-link {
    background: var(--beige-2, #F2ECDA);
    border-bottom-color: var(--gold-1, #CCAE52);
  }
}
.cm-nav-aside-link.is-current {
  background: var(--beige-2, #F2ECDA);
  border-bottom-color: var(--gold-1, #CCAE52);
}
@media screen and (min-width: 1024px) {
  .cm-nav-aside-link {
    min-height: 2.75rem;
  }
}

.cm-nav-aside-link__txt {
  flex: 1;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 125%;
}
@media screen and (min-width: 1024px) {
  .cm-nav-aside-link__txt {
    font-size: 1rem;
  }
}

.cm-nav-aside-link__arrow {
  width: 0.75rem;
  height: 0.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transform: rotate(90deg);
}
.cm-nav-aside-link__arrow svg {
  width: 100%;
  aspect-ratio: 3/2;
  stroke: var(--color-accent);
  transition: transform var(--duration-hover-move) var(--ease-hover-lingering);
}
@media (hover: hover) {
  .cm-nav-aside-link__arrow:hover svg, a:hover .cm-nav-aside-link__arrow svg, button:hover .cm-nav-aside-link__arrow svg {
    transform: translateX(0.1875rem);
  }
}
/*::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*----------------------------------------------------
	cm-nav-article
	記事一覧のカテゴリ切り替え。SPは2カラム、PCは中央寄せの横並び。
	一覧ページではリンク、トップページではその場で中身を切り替えるタブ（common.js の jsTab）
----------------------------------------------------*/
.cm-nav-article {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem 0.5rem;
}
@media screen and (min-width: 1024px) {
  .cm-nav-article {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
  }
}

.cm-nav-article-link {
  display: block;
  width: 100%;
  padding: 0 0 0.5rem;
  border-bottom: 0.125rem solid transparent;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
  text-align: center;
  transition: border-color var(--duration-hover) var(--ease-hover);
}
@media screen and (min-width: 1024px) {
  .cm-nav-article-link {
    padding-bottom: 0.75rem;
  }
}
.cm-nav-article-link.is-current {
  border-bottom-color: var(--gold-1, #CCAE52);
}
@media (hover: hover) {
  .cm-nav-article-link:hover, a:hover .cm-nav-article-link, button:hover .cm-nav-article-link {
    border-bottom-color: var(--gold-1, #CCAE52);
  }
}

/*----------------------------------------------------
	cm-nav-paginate
	ページ送り
----------------------------------------------------*/
.cm-nav-paginate {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}
@media screen and (min-width: 1024px) {
  .cm-nav-paginate {
    gap: 1rem;
  }
}

.cm-nav-paginate-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: var(--stroke1) solid var(--gray-1, #E6E6E6);
  border-radius: 100%;
  background: var(--white, #FFF);
  color: var(--color-accent);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
  transition: color var(--duration-hover) var(--ease-hover), background-color var(--duration-hover) var(--ease-hover), border-color var(--duration-hover) var(--ease-hover);
}
@media screen and (min-width: 1024px) {
  .cm-nav-paginate-link {
    width: 3rem;
    height: 3rem;
  }
}
.cm-nav-paginate-link.is-current {
  border-color: var(--color-accent);
  background: var(--color-accent);
  color: var(--white, #FFF);
}
@media (hover: hover) {
  .cm-nav-paginate-link:hover, a:hover .cm-nav-paginate-link, button:hover .cm-nav-paginate-link {
    border-color: var(--color-accent);
    background: var(--color-accent);
    color: var(--white, #FFF);
  }
}

.cm-nav-paginate-dots {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
}

/*::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*----------------------------------------------------
	cm-nav-tag
	タグでの絞り込み。ベージュ地の箱にチップを並べる
----------------------------------------------------*/
.cm-nav-tag {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 1rem;
  border-radius: 0.5rem;
  border: var(--stroke1) solid var(--gray-1, #E6E6E6);
  background: var(--beige-1, #FCFAF2);
}
@media screen and (min-width: 1024px) {
  .cm-nav-tag {
    padding: 2rem;
  }
}

.cm-nav-tag-link {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1rem;
  border-radius: 1rem;
  background: var(--beige-2, #F2ECDA);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1;
  transition: color var(--duration-hover) var(--ease-hover), background-color var(--duration-hover) var(--ease-hover);
}
.cm-nav-tag-link.is-current {
  background: var(--gold-1, #CCAE52);
  color: var(--white, #FFF);
}
@media (hover: hover) {
  .cm-nav-tag-link:hover, a:hover .cm-nav-tag-link, button:hover .cm-nav-tag-link {
    background: var(--gold-1, #CCAE52);
    color: var(--white, #FFF);
  }
}

/*::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*----------------------------------------------------
	ページ上部（パンくず＋見出し＋下ボーダー）
	画像つきなどのバリエーションはモディファイアで追加する
----------------------------------------------------*/
.cm-pagehead {
  padding-block: 1.25rem 2.375rem;
  border-bottom: var(--stroke1) solid var(--gray-1, #E6E6E6);
}
@media screen and (min-width: 1024px) {
  .cm-pagehead {
    padding-block: 1.25rem 6.375rem;
  }
}

/*::::::::::::::::::::::::::::::::::::::::::::::::::*/
.cm-pagehead--img {
  --pagehead-visual: 12.125rem;
  position: relative;
  min-height: var(--pagehead-visual);
  padding-bottom: 0;
  border-bottom: 0;
}
@media screen and (min-width: 1024px) {
  .cm-pagehead--img {
    min-height: 24.25rem;
    padding-bottom: 7rem;
  }
}
.cm-pagehead--img > .l-container {
  position: relative;
  z-index: 1;
}
.cm-pagehead--img .cm-pagehead__heading {
  margin-top: 0;
}

.cm-pagehead__visual {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
  width: 100%;
  height: var(--pagehead-visual);
  pointer-events: none;
}
.cm-pagehead__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media screen and (min-width: 1024px) {
  .cm-pagehead__visual {
    height: 100%;
  }
}

.cm-pagehead__desc {
  margin-top: calc(var(--pagehead-visual) - 7.5rem);
  font-size: 1rem;
  font-weight: 600;
  line-height: 2;
}
@media screen and (min-width: 1024px) {
  .cm-pagehead__desc {
    width: 39rem;
    margin-top: 6.25rem;
  }
}

.cm-pagehead__body {
  margin-top: 2.5rem;
}
@media screen and (min-width: 1024px) {
  .cm-pagehead__body {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-top: 5rem;
  }
}

/*::::::::::::::::::::::::::::::::::::::::::::::::::*/
.cm-pagehead__breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
}
.cm-pagehead__breadcrumb li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.cm-pagehead__breadcrumb li:not(:first-child):before {
  content: ">";
  display: block;
  pointer-events: none;
}
@media (hover: hover) {
  .cm-pagehead__breadcrumb a:hover, a:hover .cm-pagehead__breadcrumb a, button:hover .cm-pagehead__breadcrumb a {
    color: var(--color-accent);
  }
}

/*::::::::::::::::::::::::::::::::::::::::::::::::::*/
.cm-pagehead__heading {
  margin-top: 2.5625rem;
}
@media screen and (min-width: 1024px) {
  .cm-pagehead__heading {
    margin-top: 4.375rem;
  }
}

/*::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*----------------------------------------------------
	...
----------------------------------------------------*/
.cm-section-group {
  position: relative;
  z-index: 1;
  background: var(--img-bg-noise) center center/23.4375rem auto;
}
.cm-section-group__wrap {
  padding-block: 5rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
@media screen and (min-width: 1024px) {
  .cm-section-group__wrap {
    padding-block: 7.5rem;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    gap: 5rem 2rem;
  }
}

@media screen and (min-width: 1024px) {
  .cm-section-group-item {
    width: 25.3333333333rem;
  }
}

.cm-section-group-item__link {
  position: relative;
  padding-top: 1rem;
  display: flex;
  gap: 0.5rem;
  border-top: var(--stroke1) solid rgba(255, 255, 255, 0.3);
}
.cm-section-group-item__link:before {
  content: "";
  display: block;
  width: 2.5rem;
  height: 0.125rem;
  position: absolute;
  left: 0;
  top: calc(-1 * var(--stroke1));
  pointer-events: none;
  background: #fff;
  transition: width var(--duration-hover-move) var(--ease-hover-lingering);
}
@media (hover: hover) {
  .cm-section-group-item__link:hover, a:hover .cm-section-group-item__link, button:hover .cm-section-group-item__link {
    border-top-color: rgba(255, 255, 255, 0.6);
  }
  .cm-section-group-item__link:hover:before, a:hover .cm-section-group-item__link:before, button:hover .cm-section-group-item__link:before {
    width: 100%;
  }
}
@media screen and (min-width: 1024px) {
  .cm-section-group-item__link {
    padding-top: 2.5rem;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.375rem;
  }
}

.cm-section-group-item__pic {
  width: 5.5rem;
  overflow: hidden;
}
.cm-section-group-item__pic img {
  width: 100%;
}
@media (hover: hover) {
  .cm-section-group-item__pic img {
    will-change: transform;
  }
}
.cm-section-group-item__pic img {
  transition: transform var(--duration-hover-zoom) var(--ease-hover);
}
@media (hover: hover) {
  .cm-section-group-item__pic:hover img, a:hover .cm-section-group-item__pic img, button:hover .cm-section-group-item__pic img {
    transform: scale(1.06);
  }
}
@media screen and (min-width: 1024px) {
  .cm-section-group-item__pic {
    border-radius: 0.5rem;
    width: 9.375rem;
    overflow: hidden;
  }
}

.cm-section-group-item__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
@media screen and (min-width: 1024px) {
  .cm-section-group-item__body {
    gap: 0.9375rem;
  }
}

.cm-section-group-item__copy {
  font-size: 0.75rem;
  line-height: 1;
  opacity: 0.5;
  transition: opacity var(--duration-hover) var(--ease-hover);
}
@media (hover: hover) {
  .cm-section-group-item__copy:hover, a:hover .cm-section-group-item__copy, button:hover .cm-section-group-item__copy {
    opacity: 1;
  }
}
@media screen and (min-width: 1024px) {
  .cm-section-group-item__copy {
    font-size: 0.875rem;
  }
}

.cm-section-group-item__name {
  font-size: 1.25rem;
  line-height: 1;
}
@media screen and (min-width: 1024px) {
  .cm-section-group-item__name {
    font-size: 1.75rem;
  }
}

.cm-section-group-item__arrow {
  align-self: center;
}
@media screen and (min-width: 1024px) {
  .cm-section-group-item__arrow {
    position: absolute;
    right: 0;
    bottom: 0;
  }
}

/*::::::::::::::::::::::::::::::::::::::::::::::::::*/
.cm-section-access {
  position: relative;
  margin: 0 0 7.5rem;
  padding-block: 5rem;
  background: var(--beige-1, #FCFAF2);
}
.cm-section-access:before, .cm-section-access:after {
  content: "";
  display: block;
  width: 100%;
  position: absolute;
  left: 0;
  pointer-events: none;
}
.cm-section-access:before {
  bottom: 100%;
  height: 7.5rem;
  background: linear-gradient(to top, var(--beige-1, #FCFAF2) 0%, rgba(252, 250, 242, 0) 100%);
}
.cm-section-access:after {
  top: 100%;
  height: 5rem;
  background: linear-gradient(to bottom, var(--beige-1, #FCFAF2) 0%, rgba(252, 250, 242, 0) 100%);
}
@media screen and (min-width: 1024px) {
  .cm-section-access {
    margin-top: 10rem;
    padding-block: 10rem 3.8125rem;
  }
  .cm-section-access:before, .cm-section-access:after {
    height: 10rem;
  }
}

@media screen and (min-width: 1024px) {
  .cm-section-access__wrap {
    display: flex;
    flex-wrap: wrap;
    column-gap: 5rem;
  }
}

/*::::::::::::::::::::::::::::::::::::::::::::::::::*/
.cm-section-head {
  --rule: 0.125rem;
  --lead-width: 38.75rem;
  --lead-gap: 1.5rem;
  --lead-offset: 0px;
  position: relative;
  padding-top: 2rem;
  border-top: var(--rule) solid var(--gray-1, #E6E6E6);
}
.cm-section-head:before {
  content: "";
  display: block;
  width: 1.25rem;
  height: 0.125rem;
  position: absolute;
  left: 0;
  top: calc(-1 * var(--rule));
  pointer-events: none;
  background: var(--color-accent);
}
@media screen and (min-width: 1024px) {
  .cm-section-head {
    --rule: var(--stroke1);
    display: flex;
    justify-content: space-between;
    column-gap: 5rem;
    padding-top: 3.5rem;
  }
  .cm-section-head:before {
    width: 2.5rem;
  }
}

.cm-section-head__lead {
  margin-top: var(--lead-gap);
}
@media screen and (min-width: 1024px) {
  .cm-section-head__lead {
    width: var(--lead-width);
    margin-top: var(--lead-offset);
    flex-shrink: 0;
  }
}

/*::::::::::::::::::::::::::::::::::::::::::::::::::*/
@media screen and (min-width: 1024px) {
  .cm-section-access__head {
    width: 100%;
  }
}

/*::::::::::::::::::::::::::::::::::::::::::::::::::*/
.cm-section-access__pic {
  position: relative;
  margin-top: 4.3125rem;
}
.cm-section-access__pic img {
  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: 1380/1380;
}
@media screen and (min-width: 1024px) {
  .cm-section-access__pic {
    width: 43.125rem;
    margin-top: 5rem;
  }
}

.cm-section-access__pic-name {
  display: none;
}
@media screen and (min-width: 1024px) {
  .cm-section-access__pic-name {
    display: block;
    width: 100%;
    position: absolute;
    left: 0;
    top: 32.4375rem;
    z-index: 0;
    pointer-events: none;
    color: var(--beige-2, #F2ECDA);
    font-family: var(--Garamond);
    font-size: 7.5rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.1em;
    white-space: nowrap;
  }
  .cm-section-access__pic-name span {
    display: block;
    position: absolute;
    transform: translateX(-50%);
  }
  .cm-section-access__pic-name span:nth-child(1) {
    left: 9rem;
    top: 0;
  }
  .cm-section-access__pic-name span:nth-child(2) {
    left: 20.1875rem;
    top: 7.5rem;
  }
  .cm-section-access__pic-name span:nth-child(3) {
    left: 12.0625rem;
    top: 15rem;
  }
}

/*::::::::::::::::::::::::::::::::::::::::::::::::::*/
.cm-section-access__content {
  margin-top: 2.5rem;
}
@media screen and (min-width: 1024px) {
  .cm-section-access__content {
    width: 31.875rem;
    margin-top: 5rem;
  }
}

.cm-section-access__route {
  display: block;
}
.cm-section-access__route img {
  width: 100%;
  aspect-ratio: 335/316;
}
@media screen and (min-width: 1024px) {
  .cm-section-access__route img {
    aspect-ratio: 510/306;
  }
}

.cm-section-access__desc {
  margin-top: 2.5rem;
}
.cm-section-access__desc > * + * {
  margin-top: 1rem;
}
.cm-section-access__desc > .cm-section-access__desc-info {
  margin-top: 2.5rem;
}

.cm-section-access__desc-info {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5;
}

.cm-section-access__desc > .cm-section-access__desc-info--parking {
  margin-top: 0.25em;
  padding-left: 5em;
  text-indent: -4em;
}
@media screen and (max-width: 1023px) {
  .cm-section-access__desc > .cm-section-access__desc-info--parking {
    padding-left: 0;
    text-indent: 0;
    font-size: 0.8125rem;
  }
}

@media screen and (max-width: 1023px) {
  .cm-section-access__desc-parking-label {
    display: block;
  }
}

.cm-section-access__desc-google {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
}
.cm-section-access__desc-google a {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  color: var(--color-accent);
}

.cm-section-access__desc-pin {
  display: block;
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  line-height: 0;
}
.cm-section-access__desc-pin svg {
  width: 100%;
  height: 100%;
}

.cm-section-access__desc-attention {
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.5;
}

.cm-section-access__map {
  margin-top: 0.75rem;
  border-radius: 0.5rem;
  overflow: hidden;
}
.cm-section-access__map img {
  width: 100%;
  aspect-ratio: 1020/670;
}
@media screen and (min-width: 1024px) {
  .cm-section-access__map {
    margin-top: 2.5rem;
  }
}

/*::::::::::::::::::::::::::::::::::::::::::::::::::*/
.cm-section-bnr {
  position: relative;
  padding-block: 5rem;
  background: var(--white, #FFF);
}
.cm-section-bnr__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
@media screen and (min-width: 1024px) {
  .cm-section-bnr__list {
    gap: 1.25rem;
  }
}

.cm-section-bnr__item {
  width: calc((100% - 0.5rem) / 2);
}
@media screen and (min-width: 1024px) {
  .cm-section-bnr__item {
    width: 14.625rem;
  }
}

.cm-section-bnr__link {
  display: block;
  overflow: hidden;
  aspect-ratio: 163/58;
  border: var(--stroke1) solid var(--gray-1, #E6E6E6);
  transition: var(--duration-hover-zoom) var(--ease-hover);
}
.cm-section-bnr__link img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (hover: hover) {
  .cm-section-bnr__link img {
    will-change: opacity;
  }
}
.cm-section-bnr__link img {
  transition: opacity var(--duration-hover-zoom) var(--ease-hover);
}
@media (hover: hover) {
  .cm-section-bnr__link:hover, a:hover .cm-section-bnr__link, button:hover .cm-section-bnr__link {
    border-color: var(--color);
  }
  .cm-section-bnr__link:hover img, a:hover .cm-section-bnr__link img, button:hover .cm-section-bnr__link img {
    opacity: 0.6;
  }
}
@media screen and (min-width: 1024px) {
  .cm-section-bnr__link {
    aspect-ratio: 234/84;
    border-radius: 0.5rem;
  }
}

/*::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*----------------------------------------------------
	cm-section-visual
	GRGホテルズグループの導入。1画面ぶんのステージを貼り付かせ、
	広がった Good Room & Guests が GRG に縮み、
	OKINAWA / GRG HOTELS になったところで背後にホテルの写真が立ち上がる
	（動きは page.js の groupVisual）
----------------------------------------------------*/
.cm-section-visual {
  position: relative;
  background: var(--white, #FFF);
}

.cm-section-visual__pin {
  height: calc(100vh + 87.5rem + 100vh);
  height: calc(100svh + 87.5rem + 100svh);
}

.cm-section-visual + .cm-section-group {
  margin-top: -100vh;
  margin-top: -100svh;
}

.cm-section-visual__stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}
.cm-section-visual__stage > .l-container {
  position: relative;
  z-index: 2;
}

/*----- 背後のホテル写真 -----*/
.cm-section-visual__panels {
  display: flex;
  flex-direction: column;
  position: absolute;
  inset: 0;
  z-index: 0;
}
@media screen and (min-width: 1024px) {
  .cm-section-visual__panels {
    flex-direction: row;
  }
}

.cm-section-visual__panel {
  flex: 1;
  overflow: hidden;
}
.cm-section-visual__panel img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cm-section-visual__panel picture {
  display: block;
  width: 100%;
  height: 100%;
}

.cm-section-visual__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0;
  background: rgba(0, 0, 0, 0.45);
  pointer-events: none;
}

/*----- 文字 -----*/
.cm-section-visual__lead {
  color: var(--black, #333);
  font-size: 1rem;
  font-weight: 600;
  line-height: 2;
  text-align: center;
  transition: color var(--duration-hover) var(--ease-hover);
}
@media screen and (min-width: 1024px) {
  .cm-section-visual__lead {
    font-size: 1.5rem;
  }
}

.cm-section-visual__type {
  position: relative;
  margin-top: 0.625rem;
}
@media screen and (min-width: 1024px) {
  .cm-section-visual__type {
    margin-top: 1.25rem;
  }
}

.cm-section-visual__okinawa {
  overflow: clip;
  color: var(--black, #333);
  font-family: var(--Garamond);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.1em;
  text-align: center;
  transition: color var(--duration-hover) var(--ease-hover);
}
.cm-section-visual__okinawa span {
  display: block;
}
@media screen and (min-width: 1024px) {
  .cm-section-visual__okinawa {
    font-size: 2rem;
  }
}

.cm-section-visual__band {
  padding-block: 0.5rem 0.4375rem;
  border-block: var(--stroke1) solid #CCC;
  margin-top: 0.75rem;
}
@media screen and (min-width: 1024px) {
  .cm-section-visual__band {
    margin-top: 1.5rem;
  }
}

.cm-section-visual__words {
  display: flex;
  align-items: baseline;
  justify-content: center;
  color: var(--black, #333);
  font-family: var(--Garamond);
  font-size: 2.5rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  transition: color var(--duration-hover) var(--ease-hover);
}
@media screen and (min-width: 1024px) {
  .cm-section-visual__words {
    font-size: 5.5rem;
  }
}

.cm-section-visual__word {
  display: inline-flex;
}
.cm-section-visual__word:nth-child(2) {
  margin-left: 0.75rem;
}
.cm-section-visual__word:nth-child(3) {
  margin-left: 0.625rem;
}
.cm-section-visual__word:nth-child(4) {
  margin-left: 0.625rem;
}
@media screen and (min-width: 1024px) {
  .cm-section-visual__word:nth-child(2) {
    margin-left: 21.0625rem;
  }
  .cm-section-visual__word:nth-child(3) {
    margin-left: 7.125rem;
  }
  .cm-section-visual__word:nth-child(4) {
    margin-left: 7.375rem;
  }
}

.cm-section-visual__rest,
.cm-section-visual__hotels {
  display: inline-block;
  overflow: hidden;
  white-space: pre;
}

.cm-section-visual__hotels {
  width: 0;
  opacity: 0;
}

.cm-section-visual.is-inverted .cm-section-visual__lead,
.cm-section-visual.is-inverted .cm-section-visual__okinawa,
.cm-section-visual.is-inverted .cm-section-visual__words {
  color: var(--white, #FFF);
}
.cm-section-visual.is-inverted .cm-section-visual__band {
  border-color: rgba(255, 255, 255, 0.4);
}

/*::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*----------------------------------------------------
	...
----------------------------------------------------*/
.c-link-underline {
  text-decoration: none;
  display: inline-block;
}
.c-link-underline span {
  position: relative;
  display: inline-block;
  line-height: 1;
}
.c-link-underline span::before, .c-link-underline span::after {
  content: "";
  display: block;
  width: 100%;
  height: var(--stroke1);
  position: absolute;
  left: 0;
  bottom: -0.2em;
  pointer-events: none;
  background: currentColor;
  transition: transform var(--duration-hover-move) var(--ease-hover-lingering);
}
.c-link-underline span::before {
  transform-origin: right center;
}
.c-link-underline span::after {
  transform: scaleX(0);
  transform-origin: left center;
  transition-delay: 0.18s;
}
@media (hover: hover) {
  .c-link-underline:hover, a:hover .c-link-underline, button:hover .c-link-underline {
    color: var(--color-accent);
  }
  .c-link-underline:hover span::before, a:hover .c-link-underline span::before, button:hover .c-link-underline span::before {
    transform: scaleX(0);
  }
  .c-link-underline:hover span::after, a:hover .c-link-underline span::after, button:hover .c-link-underline span::after {
    transform: scaleX(1);
  }
}

/*::::::::::::::::::::::::::::::::::::::::::::::::::*/ /*----------------------------------------------------
	c-link-arrow
	下線つきテキスト＋矢印（客室の紹介はこちら → / 全てのプランを見る →）
	本文（Gutenberg）の段落スタイル「矢印リンク」からも使うので、
	矢印はマークアップを持たず疑似要素で描く。見た目は .c-btn-arrow に合わせる
----------------------------------------------------*/
@keyframes c-link-arrow-through {
  0% {
    background-position-x: 50%;
    animation-timing-function: var(--ease-hover);
  }
  40% {
    background-position-x: 2.5rem;
  }
  40.01% {
    background-position-x: -1rem;
    animation-timing-function: var(--ease-hover);
  }
  80%, 100% {
    background-position-x: 50%;
  }
}
.c-link-arrow, .cm-post .is-style-link-arrow a {
  --link-arrow-gap: 1rem;
  --link-arrow-width: 2.5rem;
  position: relative;
  display: inline-block;
  padding: 0 calc(var(--link-arrow-width) + var(--link-arrow-gap)) 0.5rem 0;
  background: linear-gradient(currentColor, currentColor) left bottom/calc(100% - var(--link-arrow-width) - var(--link-arrow-gap)) var(--stroke1) no-repeat;
  color: var(--black, #333);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.5;
  text-decoration: none;
  transition: color var(--duration-hover) var(--ease-hover);
}
@media screen and (min-width: 1024px) {
  .c-link-arrow, .cm-post .is-style-link-arrow a {
    font-size: 1.25rem;
  }
}
.c-link-arrow::after, .cm-post .is-style-link-arrow a::after {
  content: "";
  position: absolute;
  right: 0;
  top: calc(50% - 0.25rem);
  translate: 0 -50%;
  width: var(--link-arrow-width);
  height: 1.5rem;
  border-radius: 6.25rem;
  background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 8'%3E%3Cpath d='M12.6667 0C12.6667 0.424 12.9721 1.05714 13.2812 1.58857C13.6787 2.27429 14.1537 2.87257 14.6983 3.32914C15.1067 3.67143 15.6017 4 16 4M16 4C15.6017 4 15.1062 4.32857 14.6983 4.67086C14.1537 5.128 13.6787 5.72629 13.2812 6.41086C12.9721 6.94286 12.6667 7.57714 12.6667 8M16 4H0' stroke='%23fff' stroke-width='1' fill='none'/%3E%3C/svg%3E") 50% 50%/1rem 0.5rem no-repeat, var(--color-accent);
}
@media (hover: hover) {
  .c-link-arrow:hover, .cm-post .is-style-link-arrow a:hover, a:hover .c-link-arrow, a:hover .cm-post .is-style-link-arrow a, .cm-post .is-style-link-arrow a:hover a, button:hover .c-link-arrow, button:hover .cm-post .is-style-link-arrow a, .cm-post .is-style-link-arrow button:hover a {
    color: var(--color-accent);
  }
  .c-link-arrow:hover::after, .cm-post .is-style-link-arrow a:hover::after, a:hover .c-link-arrow::after, a:hover .cm-post .is-style-link-arrow a::after, .cm-post .is-style-link-arrow a:hover a::after, button:hover .c-link-arrow::after, button:hover .cm-post .is-style-link-arrow a::after, .cm-post .is-style-link-arrow button:hover a::after {
    animation: c-link-arrow-through var(--duration-hover-move);
  }
}

/*::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*----------------------------------------------------
	cm-post
----------------------------------------------------*/
body figure {
  margin-bottom: 0;
}

.cm-post {
  display: flex;
  flex-direction: column;
  gap: 1.875rem;
  font-size: 1rem;
  line-height: 2;
  word-break: break-all;
}
@media screen and (min-width: 1024px) {
  .cm-post {
    gap: 2.25rem;
  }
}
.cm-post > h4 {
  font-size: 1em;
  font-weight: bold;
}
.cm-post > h5 {
  font-size: 0.83em;
  font-weight: bold;
}
.cm-post strong {
  font-weight: bold;
}
.cm-post em {
  font-style: italic;
}
.cm-post ul, .cm-post ol {
  margin-left: 1.5em;
}
.cm-post li {
  list-style: disc;
}
.cm-post ol li {
  list-style: decimal;
}
.cm-post blockquote,
.cm-post .is-style-box {
  border-radius: 8px;
  background: var(--beige-1, #FCFAF2);
  display: flex;
  padding: 1.25rem;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  align-self: stretch;
}
.cm-post blockquote h2:not(:first-child), .cm-post blockquote h3:not(:first-child),
.cm-post .is-style-box h2:not(:first-child),
.cm-post .is-style-box h3:not(:first-child) {
  margin-top: 1rem;
}
@media screen and (min-width: 1024px) {
  .cm-post blockquote,
  .cm-post .is-style-box {
    padding: 2.5rem;
  }
}
.cm-post table th {
  font-weight: bold;
}
.cm-post table th,
.cm-post table td {
  padding: 0.5em 0.5em;
  border: var(--stroke1) solid #ccc;
}
.cm-post a {
  color: var(--color-accent);
  text-decoration: underline;
}
.cm-post a:hover {
  text-decoration: none;
}
.cm-post .has-text-align-center {
  text-align: center;
}
.cm-post .has-text-align-right {
  text-align: right;
}
/*::::::::::::::::::::::::::::::::::::::::::::::::::*/
.editor-styles-wrapper.editor-styles-wrapper.editor-styles-wrapper .wp-block-image.wp-block-image.wp-block-image,
.cm-post .wp-block-image.wp-block-image.wp-block-image {
  margin: 0;
}
.editor-styles-wrapper.editor-styles-wrapper.editor-styles-wrapper .wp-block-image.wp-block-image.wp-block-image img,
.cm-post .wp-block-image.wp-block-image.wp-block-image img {
  display: block;
  width: 100%;
  height: auto;
}
.editor-styles-wrapper.editor-styles-wrapper.editor-styles-wrapper .wp-block-image.wp-block-image.wp-block-image figcaption,
.cm-post .wp-block-image.wp-block-image.wp-block-image figcaption {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.6;
}
.editor-styles-wrapper.editor-styles-wrapper.editor-styles-wrapper .wp-block-gallery.wp-block-gallery,
.cm-post .wp-block-gallery.wp-block-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}
.editor-styles-wrapper.editor-styles-wrapper.editor-styles-wrapper .wp-block-gallery.wp-block-gallery.columns-1,
.cm-post .wp-block-gallery.wp-block-gallery.columns-1 {
  grid-template-columns: minmax(0, 1fr);
}
@media screen and (min-width: 1024px) {
  .editor-styles-wrapper.editor-styles-wrapper.editor-styles-wrapper .wp-block-gallery.wp-block-gallery,
  .cm-post .wp-block-gallery.wp-block-gallery {
    gap: 1rem;
  }
  .editor-styles-wrapper.editor-styles-wrapper.editor-styles-wrapper .wp-block-gallery.wp-block-gallery.columns-3,
  .cm-post .wp-block-gallery.wp-block-gallery.columns-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .editor-styles-wrapper.editor-styles-wrapper.editor-styles-wrapper .wp-block-gallery.wp-block-gallery.columns-4,
  .cm-post .wp-block-gallery.wp-block-gallery.columns-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.editor-styles-wrapper.editor-styles-wrapper.editor-styles-wrapper .wp-block-gallery.wp-block-gallery figure.wp-block-image:not(#individual-image),
.cm-post .wp-block-gallery.wp-block-gallery figure.wp-block-image:not(#individual-image) {
  width: auto;
  margin: 0;
}
.editor-styles-wrapper.editor-styles-wrapper.editor-styles-wrapper .wp-block-gallery.wp-block-gallery figure.wp-block-image:not(#individual-image) img:not(#individual-image),
.cm-post .wp-block-gallery.wp-block-gallery figure.wp-block-image:not(#individual-image) img:not(#individual-image) {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}
.editor-styles-wrapper.editor-styles-wrapper.editor-styles-wrapper .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image):has(figcaption)::before,
.cm-post .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image):has(figcaption)::before {
  content: none;
}
.editor-styles-wrapper.editor-styles-wrapper.editor-styles-wrapper .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) img:not(#individual-image),
.cm-post .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) img:not(#individual-image) {
  flex: none;
}
.editor-styles-wrapper.editor-styles-wrapper.editor-styles-wrapper .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) figcaption,
.cm-post .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) figcaption {
  position: static;
  max-height: none;
  margin-top: 0.5rem;
  padding: 0;
  overflow: visible;
  background: none;
  color: inherit;
  text-shadow: none;
  text-align: left;
  font-size: 0.8125rem;
  line-height: 1.5;
  will-change: auto;
}
@media screen and (min-width: 1024px) {
  .editor-styles-wrapper.editor-styles-wrapper.editor-styles-wrapper .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) figcaption,
  .cm-post .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) figcaption {
    margin-top: 1rem;
    font-size: 0.875rem;
  }
}
.editor-styles-wrapper.editor-styles-wrapper.editor-styles-wrapper .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) figcaption strong,
.cm-post .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) figcaption strong {
  font-size: 0.875rem;
}
@media screen and (min-width: 1024px) {
  .editor-styles-wrapper.editor-styles-wrapper.editor-styles-wrapper .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) figcaption strong,
  .cm-post .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) figcaption strong {
    font-size: 1rem;
  }
}
.editor-styles-wrapper.editor-styles-wrapper.editor-styles-wrapper .wp-block-columns.wp-block-columns,
.cm-post .wp-block-columns.wp-block-columns {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0;
}
@media screen and (min-width: 1024px) {
  .editor-styles-wrapper.editor-styles-wrapper.editor-styles-wrapper .wp-block-columns.wp-block-columns,
  .cm-post .wp-block-columns.wp-block-columns {
    flex-direction: row;
    gap: 1rem;
  }
}
.editor-styles-wrapper.editor-styles-wrapper.editor-styles-wrapper .wp-block-column.wp-block-column,
.cm-post .wp-block-column.wp-block-column {
  flex: 1 1 0;
  min-width: 0;
}
.editor-styles-wrapper.editor-styles-wrapper.editor-styles-wrapper .is-style-box,
.cm-post .is-style-box {
  gap: 0;
  line-height: 1.8;
}
.editor-styles-wrapper.editor-styles-wrapper.editor-styles-wrapper .is-style-box > *,
.editor-styles-wrapper.editor-styles-wrapper.editor-styles-wrapper .is-style-box > .wp-block-group__inner-container > *,
.cm-post .is-style-box > *,
.cm-post .is-style-box > .wp-block-group__inner-container > * {
  width: 100%;
  margin-block: 0;
}
.editor-styles-wrapper.editor-styles-wrapper.editor-styles-wrapper .is-style-box > * + p,
.editor-styles-wrapper.editor-styles-wrapper.editor-styles-wrapper .is-style-box > * + .wp-block-columns,
.editor-styles-wrapper.editor-styles-wrapper.editor-styles-wrapper .is-style-box > .wp-block-group__inner-container > * + p,
.editor-styles-wrapper.editor-styles-wrapper.editor-styles-wrapper .is-style-box > .wp-block-group__inner-container > * + .wp-block-columns,
.cm-post .is-style-box > * + p,
.cm-post .is-style-box > * + .wp-block-columns,
.cm-post .is-style-box > .wp-block-group__inner-container > * + p,
.cm-post .is-style-box > .wp-block-group__inner-container > * + .wp-block-columns {
  margin-top: 1.8em;
}
.editor-styles-wrapper.editor-styles-wrapper.editor-styles-wrapper .is-style-box > .wp-block-columns + .wp-block-columns,
.editor-styles-wrapper.editor-styles-wrapper.editor-styles-wrapper .is-style-box > .wp-block-group__inner-container > .wp-block-columns + .wp-block-columns,
.cm-post .is-style-box > .wp-block-columns + .wp-block-columns,
.cm-post .is-style-box > .wp-block-group__inner-container > .wp-block-columns + .wp-block-columns {
  margin-top: 1rem;
}
.editor-styles-wrapper.editor-styles-wrapper.editor-styles-wrapper .wp-block-media-text,
.cm-post .wp-block-media-text {
  display: grid;
  grid-template-columns: minmax(0, 515fr) minmax(0, 295fr);
  grid-template-areas: "media-text-media media-text-content";
  align-items: start;
  gap: 2rem;
}
.editor-styles-wrapper.editor-styles-wrapper.editor-styles-wrapper .wp-block-media-text.has-media-on-the-right,
.cm-post .wp-block-media-text.has-media-on-the-right {
  grid-template-columns: minmax(0, 295fr) minmax(0, 515fr);
  grid-template-areas: "media-text-content media-text-media";
}
@media screen and (max-width: 1023px) {
  .editor-styles-wrapper.editor-styles-wrapper.editor-styles-wrapper .wp-block-media-text,
  .cm-post .wp-block-media-text {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 1rem;
  }
  .editor-styles-wrapper.editor-styles-wrapper.editor-styles-wrapper .wp-block-media-text, .editor-styles-wrapper.editor-styles-wrapper.editor-styles-wrapper .wp-block-media-text.has-media-on-the-right,
  .cm-post .wp-block-media-text,
  .cm-post .wp-block-media-text.has-media-on-the-right {
    grid-template-areas: "media-text-media" "media-text-content";
  }
}
.editor-styles-wrapper.editor-styles-wrapper.editor-styles-wrapper .wp-block-media-text__media,
.cm-post .wp-block-media-text__media {
  grid-area: media-text-media;
  margin: 0;
}
.editor-styles-wrapper.editor-styles-wrapper.editor-styles-wrapper .wp-block-media-text__media img,
.cm-post .wp-block-media-text__media img {
  display: block;
  width: 100%;
  height: auto;
}
.editor-styles-wrapper.editor-styles-wrapper.editor-styles-wrapper .wp-block-media-text__content,
.cm-post .wp-block-media-text__content {
  grid-area: media-text-content;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 0;
}
.editor-styles-wrapper.editor-styles-wrapper.editor-styles-wrapper .wp-block-media-text__content h3,
.cm-post .wp-block-media-text__content h3 {
  color: var(--brown-1, #331D12);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.5;
}
/*::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*----------------------------------------------------
	cm-post-head
	記事詳細の見出し部（プラン／インフォメーション共通）
----------------------------------------------------*/
.cm-post-head {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.cm-post-head__meta {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.cm-post-head__date {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
}

.cm-post-head__cat {
  padding: 0.375rem 0.75rem;
  border-radius: 0.8125rem;
  background: var(--beige-2, #F2ECDA);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1;
}

.cm-post-head__title {
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.5;
}
@media screen and (min-width: 1024px) {
  .cm-post-head__title {
    font-size: 2rem;
  }
}

/*::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*----------------------------------------------------
	お問い合わせフォーム
----------------------------------------------------*/
.cm-form {
  padding: 5rem 1.25rem;
  background: var(--beige-1, #FCFAF2);
  display: flex;
  flex-direction: column;
}
@media screen and (min-width: 1024px) {
  .cm-form {
    padding: 6.875rem;
  }
}

/*::::::::::::::::::::::::::::::::::::::::::::::::::*/
.cm-form__head {
  padding-bottom: 1.5rem;
  border-bottom: var(--stroke1) solid var(--gray-2, #808080);
  align-self: center;
}

.cm-form__head-title {
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1;
  text-align: center;
}
@media screen and (min-width: 1024px) {
  .cm-form__head-title {
    font-size: 2rem;
  }
}

/*::::::::::::::::::::::::::::::::::::::::::::::::::*/
.cm-form__inputs {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  margin-top: 2.5rem;
}
@media screen and (min-width: 1024px) {
  .cm-form__inputs {
    margin-top: 5rem;
  }
}

.cm-form-input {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.cm-form-input__title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5;
}
@media screen and (min-width: 1024px) {
  .cm-form-input__title {
    font-size: 1.125rem;
  }
}

.cm-form-input__label {
  flex-shrink: 0;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  background: var(--gold-1, #CCAE52);
  color: var(--white, #FFF);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1;
}

.cm-form-input__label--any {
  background: var(--gray-2, #808080);
}

.cm-form-input__input.cm-form-input__input {
  display: block;
  width: 100%;
  padding: 1.25rem;
  border: var(--stroke1) solid var(--gray-1, #E6E6E6);
  border-radius: 0.5rem;
  background: var(--white, #FFF);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5;
}
.cm-form-input__input.cm-form-input__input::placeholder {
  color: var(--gray-2, #808080);
}
.cm-form-input__input.cm-form-input__input:focus {
  border-color: var(--color-accent);
}

textarea.cm-form-input__input {
  height: 11.5rem;
}

.cm-form-input__choices {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.cm-form-input__choice {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5;
  cursor: pointer;
}
@media screen and (min-width: 1024px) {
  .cm-form-input__choice {
    font-size: 1.125rem;
  }
}
.cm-form-input__choice input {
  position: absolute;
  left: 0;
  top: calc(50% - 0.75rem);
  width: 1.5rem;
  height: 1.5rem;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.cm-form-input__choice-icon {
  flex-shrink: 0;
  position: relative;
  width: 1.5rem;
  height: 1.5rem;
  pointer-events: none;
  border: var(--stroke1) solid var(--gray-1, #E6E6E6);
  background: var(--white, #FFF);
  transition: border-color var(--duration-hover) var(--ease-hover), background-color var(--duration-hover) var(--ease-hover);
}
input[type=radio] + .cm-form-input__choice-icon {
  border-radius: 100%;
}
input[type=checkbox] + .cm-form-input__choice-icon {
  border-radius: 0.25rem;
}
input[type=radio]:checked + .cm-form-input__choice-icon {
  border-color: var(--gold-1, #CCAE52);
}
input[type=radio]:checked + .cm-form-input__choice-icon:before {
  content: "";
  display: block;
  width: 0.75rem;
  height: 0.75rem;
  position: absolute;
  left: calc(50% - 0.375rem);
  top: calc(50% - 0.375rem);
  border-radius: 100%;
  pointer-events: none;
  background: var(--gold-1, #CCAE52);
}
input[type=checkbox]:checked + .cm-form-input__choice-icon {
  border-color: var(--gold-1, #CCAE52);
  background: var(--gold-1, #CCAE52);
}
input[type=checkbox]:checked + .cm-form-input__choice-icon:before {
  content: "";
  display: block;
  width: 0.7375rem;
  height: 0.44375rem;
  position: absolute;
  left: calc(50% - 0.40625rem);
  top: calc(50% - 0.34375rem);
  border-left: 0.15rem solid var(--white, #FFF);
  border-bottom: 0.15rem solid var(--white, #FFF);
  transform: rotate(-45deg);
  pointer-events: none;
}
input:focus-visible + .cm-form-input__choice-icon {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/*::::::::::::::::::::::::::::::::::::::::::::::::::*/
.cm-form-input-agree__message {
  font-size: 1rem;
  font-weight: 600;
  line-height: 2;
}
.cm-form-input-agree__message a {
  color: var(--color-accent);
  text-decoration: underline;
}
.cm-form-input-agree__message a:hover {
  text-decoration: none;
}

.cm-form-input-agree {
  padding: 1.25rem;
  border: var(--stroke1) solid var(--gray-1, #E6E6E6);
  border-radius: 0.5rem;
  background: var(--white, #FFF);
}
.cm-form-input-agree .cm-form-input__choice {
  justify-content: center;
}

/*::::::::::::::::::::::::::::::::::::::::::::::::::*/
.cm-form__action {
  display: flex;
  justify-content: center;
  margin-top: 2.5rem;
}
.cm-form__action .c-btn-round {
  width: 15rem;
  padding-left: 2rem;
}

/*::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*----------------------------------------------------
	エラーメッセージ
	MW WP Form が入力欄の直後に <span class="error"> を差し込む。
	文字色は MW 同梱の style.css が当てるので、ここでは余白だけ持たせる
----------------------------------------------------*/
.cm-form-input__body .error {
  display: block;
  margin-top: 0.5rem;
}

.cm-form-input-agree .error {
  display: block;
  margin-top: 1rem;
  text-align: center;
}

/*::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*----------------------------------------------------
	c-list
----------------------------------------------------*/
.c-list-disc li {
  margin-left: 1.5rem;
  list-style: disc;
  line-height: 2;
}

.c-list-decimal li {
  margin-left: 1.5rem;
  list-style: decimal;
  line-height: 2;
}

.c-list-col2 {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
@media screen and (min-width: 1024px) {
  .c-list-col2 {
    flex-direction: row;
    align-items: flex-start;
  }
  .c-list-col2 > * {
    flex-shrink: 0;
    width: 27.6875rem;
  }
}

/*::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*----------------------------------------------------
	c-spec-room
	客室のスペック表（定員／広さ／ベッドサイズ）
	客室紹介ページとTOPの客室カードで共有する。
	ラベルの幅と、ラベル・値の間隔は置き場所で変わるので変数で受け取る
----------------------------------------------------*/
.c-spec-room {
  --spec-label: 7.25rem;
  --spec-gap: 0.5rem;
}
@media screen and (min-width: 1024px) {
  .c-spec-room {
    --spec-label: 8.25rem;
    --spec-gap: 1rem;
  }
}

.c-spec-room__row {
  display: flex;
  align-items: center;
  gap: var(--spec-gap);
  padding-block: 0.5rem;
  border-bottom: var(--stroke1) solid var(--gray-1, #E6E6E6);
}

.c-spec-room__label {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  width: var(--spec-label);
  flex-shrink: 0;
  position: relative;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.25;
}
.c-spec-room__label:after {
  content: "";
  display: block;
  width: var(--stroke1);
  height: 0.875rem;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  background: var(--gray-1, #E6E6E6);
}

.c-spec-room__ico {
  width: 1rem;
  flex-shrink: 0;
  line-height: 0;
}
.c-spec-room__ico img {
  display: block;
  width: 100%;
  height: auto;
}

.c-spec-room__value {
  flex: 1;
  min-width: 0;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.25;
}

/*::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*----------------------------------------------------
	汎用クラス
----------------------------------------------------*/
.bold,
.strong {
  font-weight: bold;
}

.u-hide {
  display: none;
}

.u-breakLine {
  display: inline-block;
}

.u-center {
  text-align: center;
}

.u-only-sp {
  display: block !important;
}
@media screen and (min-width: 641px) {
  .u-only-sp {
    display: none !important;
  }
}

.u-only-pc {
  display: none !important;
}
@media screen and (min-width: 641px) {
  .u-only-pc {
    display: block !important;
  }
}

.u-color-accent {
  color: var(--color-accent);
}

.u-template {
  display: flex;
  flex-direction: column;
  gap: 5rem;
  padding-bottom: 6.25rem;
}

.u-gap {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  flex-shrink: 0;
}
.u-gap > * {
  flex-shrink: 0;
}

.is-disabled {
  opacity: 0.7;
  pointer-events: none;
}

.u-budoux {
  word-break: keep-all;
  overflow-wrap: anywhere;
}

[data-delay="0.1"] {
  transition-delay: 0.1s;
}

[data-delay="0.2"] {
  transition-delay: 0.2s;
}

[data-delay="0.3"] {
  transition-delay: 0.3s;
}

[data-delay="0.4"] {
  transition-delay: 0.4s;
}

[data-delay="0.5"] {
  transition-delay: 0.5s;
}

[data-delay="0.6"] {
  transition-delay: 0.6s;
}

[data-delay="0.7"] {
  transition-delay: 0.7s;
}

[data-delay="0.8"] {
  transition-delay: 0.8s;
}

[data-delay="0.9"] {
  transition-delay: 0.9s;
}

[data-delay="1"] {
  transition-delay: 1s;
}

[data-delay="1.1"] {
  transition-delay: 1.1s;
}

[data-delay="1.2"] {
  transition-delay: 1.2s;
}

[data-delay="1.3"] {
  transition-delay: 1.3s;
}

[data-delay="1.4"] {
  transition-delay: 1.4s;
}

[data-delay="1.5"] {
  transition-delay: 1.5s;
}

[data-delay="1.6"] {
  transition-delay: 1.6s;
}

[data-delay="1.7"] {
  transition-delay: 1.7s;
}

[data-delay="1.8"] {
  transition-delay: 1.8s;
}

[data-delay="1.9"] {
  transition-delay: 1.9s;
}

[data-delay="2"] {
  transition-delay: 2s;
}

[data-delay="2.1"] {
  transition-delay: 2.1s;
}

[data-delay="2.2"] {
  transition-delay: 2.2s;
}

[data-delay="2.3"] {
  transition-delay: 2.3s;
}

[data-delay="2.4"] {
  transition-delay: 2.4s;
}

[data-delay="2.5"] {
  transition-delay: 2.5s;
}

[data-delay="2.6"] {
  transition-delay: 2.6s;
}

[data-delay="2.7"] {
  transition-delay: 2.7s;
}

[data-delay="2.8"] {
  transition-delay: 2.8s;
}

[data-delay="2.9"] {
  transition-delay: 2.9s;
}

[data-delay="3"] {
  transition-delay: 3s;
}

.__loop {
  display: flex;
}
.__loop figure {
  animation: loopLeft linear 30s infinite;
  will-change: transform;
  backface-visibility: hidden;
}
.__loop img {
  width: auto;
  max-width: none;
  height: 18.75rem;
}
@media screen and (min-width: 1024px) {
  .__loop figure {
    animation-duration: 50s;
  }
  .__loop img {
    height: 32.875rem;
  }
}

@keyframes loopLeft {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-100%, 0, 0);
  }
}
@keyframes loopRight {
  from {
    transform: translate3d(-100%, 0, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}
@keyframes btnArrow {
  0% {
    transform: translate3d(0, 0, 0);
  }
  30% {
    transform: translate3d(70%, 0, 0);
  }
  30.1% {
    transform: translate3d(-70%, 0, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}