:root {
  --black: #25171a;
  --white: #ffffff;
  --gray: #a9a9a9;
  --lightblue-50: #e0f3f5;
  --lightblue-100: #b0e0e6;
  --lightblue-200: #92d4dd;
  --lightblue-300: #73c8d3;
  --lightblue-400: #54bcc9;
  --red: #721817;
  --blue: #2b4162;
  --green: #337357;

  --font-mincho: 'Zen Old Mincho', serif;
  --font-biz-udpmincho: 'BIZ UDPMincho', serif;
  --font-stoke: 'Stoke', serif;
  --font-vujahday: 'Vujahday Script', cursive;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
  color: inherit;
  transition: all 0.5s;
}

html {
  scroll-behavior: smooth;
}

a:hover {
  opacity: 0.5;
}
.hover-underline {
  position: relative;
  display: inline-block;
  width: fit-content;
}
.hover-underline:hover,
.hover-underline:focus-visible {
  opacity: 1;
}
.hover-underline::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1px;
  background-color: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.35s ease;
}
.hover-underline:hover::after,
.hover-underline:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left;
}
.nav-window .inner [data-nav-text-split].hover-underline::after {
  bottom: 0;
}
.mask-fade {
  mask-image: url('../img/mask.webp');
  mask-mode: alpha;
  mask-repeat: no-repeat;
  opacity: 0;
}
.mask-fade.is-active {
  animation: 2.3s mask-fade cubic-bezier(0.115, 0.405, 0.24, 1) 0s forwards;
}
.parallax {
  transition: none;
  will-change: transform;
}

@keyframes mask-fade {
  0% {
    mask-position: left bottom;
    opacity: 0;
  }
  20% {
    opacity: 1;
  }

  100% {
    mask-position: left 0%;
    opacity: 1;
  }
}

body {
  background-color: var(--lightblue-100);
  color: var(--black);
  font-family: var(--font-mincho);
  font-weight: 500;
  font-size: clamp(13px, calc(11.82px + 0.34vw), 16px);
}
html.is-concept-open,
body.is-concept-open,
html.is-modal-open,
body.is-modal-open {
  overflow: hidden;
}

html.is-concept-open #concept ~ *,
html.is-concept-open #concept ~ * * {
  animation-play-state: paused !important;
}

header {
  position: fixed;
  top: clamp(16px, calc(-42.35px + 4.71vw), 48px);
  right: clamp(16px, calc(-42.35px + 4.71vw), 48px);
  z-index: 100;

  display: flex;
  align-items: center;
  gap: clamp(16px, calc(1.41px + 1.18vw), 24px);
}

header .nav {
  display: flex;
  align-items: center;
  gap: 16px;

  font-family: var(--font-stoke);
  font-weight: 400;
}

.sns {
  display: block;
  width: 24px;
  height: 24px;
  background-size: contain;
  background-repeat: no-repeat;
}
.sns.facebook {
  background-image: url('../img/sns_icon_facebook.png');
}
.sns.instagram {
  background-image: url('../img/sns_icon_instagram.png');
}
header .tel {
  font-family: var(--font-stoke);
  font-weight: 300;
}
header .web-reservation {
  font-weight: 500;
  background-color: var(--red);
  border: 1px solid var(--red);
  color: var(--white);
  padding: 16px;
}
header .web-reservation:hover {
  background-color: inherit;
  opacity: 1;
  color: var(--red);
}
html.is-nav-open header {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
@media (min-width: 1321px) {
  header .menu-toggle {
    display: none;
  }
}
@media (max-width: 1320px) {
  header .nav,
  header .sns,
  header .tel {
    display: none;
  }
  header .web-reservation {
    padding: 8px 12px;
  }
  header .menu-toggle {
    width: 36px;
    height: 36px;
    border: none;
    cursor: pointer;
    background: transparent;

    background-image: url('../img/menu_toggle.png');
    background-size: contain;
    background-repeat: no-repeat;
  }
  header .menu-toggle:hover {
    opacity: 0.5;
  }
}

.nav-window {
  --nav-window-clip: 100% 50%, 100% 50%, 100% 50%, 100% 50%;

  position: fixed;
  inset: 0;
  z-index: 1000;
  height: 100%;
  width: 100%;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  overflow: hidden;
  isolation: isolate;

  transition: opacity 1.5s ease;
}
.nav-window::before,
.nav-window::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('../img/nav_bg.jpg');
  background-position: center;
  background-size: cover;
  clip-path: polygon(var(--nav-window-clip));
  will-change: clip-path, opacity, transform;
}
.nav-window::before {
  z-index: -2;
  opacity: 0;
  transform: scale(1.025);
  transform-origin: center;
  transition:
    opacity 0.28s ease,
    transform 1.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.nav-window::after {
  z-index: -1;
  opacity: 0;
  transform: scale(1.018) translate3d(0, 0, 0);
  filter: blur(0.4px);
  mix-blend-mode: soft-light;
  transition:
    opacity 0.45s ease,
    transform 2.05s cubic-bezier(0.16, 1, 0.3, 1);
}
.nav-window.is-active,
.nav-window.is-closing {
  opacity: 1;
  visibility: visible;
}
.nav-window.is-active {
  pointer-events: auto;
}
.nav-window.is-closing {
  pointer-events: none;
}
.nav-window-toggle {
  position: absolute;
  top: clamp(16px, calc(-42.35px + 4.71vw), 48px);
  right: clamp(16px, calc(-42.35px + 4.71vw), 48px);
  z-index: 2;
  width: 36px;
  height: 36px;
  border: none;
  cursor: pointer;
  background: transparent url('../img/menu_toggle_off.png') center / contain
    no-repeat;
}
.nav-window-toggle:hover {
  opacity: 0.5;
}
.nav-window.is-active::before {
  opacity: 1;
}
.nav-window.is-closing::before {
  opacity: 0;
  transform: scale(1);
  transition:
    opacity 0.45s ease,
    transform 0.45s ease;
}
.nav-window.is-active::before {
  transform: scale(1);
}
.nav-window.is-active::after {
  opacity: 0.2;
  transform: scale(1) translate3d(0.35%, -0.25%, 0);
}
.nav-window.is-closing::after {
  opacity: 0;
  transform: scale(1);
  transition:
    opacity 0.35s ease,
    transform 0.35s ease;
}
.nav-window .clouds {
  opacity: 0;
  transform: translate3d(1em, 0, 0);
  transition:
    opacity 0.8s ease,
    transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.nav-window.is-active .clouds {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition-delay: 0.42s;
}
.nav-window.is-closing .clouds {
  opacity: 0;
  transform: translate3d(-0.6em, 0, 0);
  transition-duration: 0.35s;
  transition-delay: 0s;
}
.nav-window .inner [data-nav-text-split] {
  display: inline-block;
  overflow: hidden;
}
.nav-window .inner .nav-list {
  opacity: 0;
  transition: opacity 0.18s ease;
}
.nav-window.is-active .inner .nav-list {
  opacity: 1;
  transition-duration: 0.35s;
  transition-delay: 0.32s;
}
.nav-window.is-closing .inner .nav-list,
.nav-window:not(.is-active) .inner .nav-list {
  opacity: 0;
  transition-duration: 0.18s;
  transition-delay: 0s;
}
.nav-window .inner .nav-window-char {
  display: inline-block;
  opacity: 0;
  transform: translate3d(1.25em, 0, 0);
  transition:
    opacity 1.6s ease,
    transform 1.6s cubic-bezier(0.19, 1, 0.22, 1);
  transition-delay: 0s;
  will-change: opacity, transform;
}
.nav-window .inner .nav-window-char-space {
  width: 0.34em;
}
.nav-window.is-active .inner .nav-window-char {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition-delay: var(--nav-char-delay, 0.42s);
}
.nav-window.is-closing .inner .nav-window-char,
.nav-window:not(.is-active) .inner .nav-window-char {
  transition-duration: 0s;
  transition-delay: 0s;
}
.nav-window .inner .usa-logo,
.nav-window .inner .sns-links,
.nav-window .inner .window-web {
  opacity: 0;
  transition: opacity 0.55s ease;
  transition-delay: 0s;
}
.nav-window.is-active .inner .usa-logo,
.nav-window.is-active .inner .sns-links,
.nav-window.is-active .inner .window-web {
  opacity: 1;
}
.nav-window.is-active .inner .usa-logo {
  transition-delay: 0.48s;
}
.nav-window.is-active .inner .sns-links {
  transition-delay: 0.78s;
}
.nav-window.is-active .inner .window-web {
  transition-delay: 0.84s;
}
.nav-window.is-closing .inner .usa-logo,
.nav-window.is-closing .inner .sns-links,
.nav-window.is-closing .inner .window-web,
.nav-window:not(.is-active) .inner .usa-logo,
.nav-window:not(.is-active) .inner .sns-links,
.nav-window:not(.is-active) .inner .window-web {
  opacity: 0;
  transition-duration: 0s;
  transition-delay: 0s;
}
.nav-window .clouds {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.nav-window .clouds .cloud {
  position: absolute;
  background-image: url('../img/cloud_01.png');
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 0;
  width: 240px;
  height: 152px;
}
.nav-window .clouds .cloud1 {
  top: clamp(-70px, calc(-77.08px + 2.02vw), -52px);
  right: clamp(-112px, calc(-135.6px + 6.74vw), -52px);
}
.nav-window .clouds .cloud2 {
  bottom: clamp(-52px, calc(-35.28px - 1.35vw), -40px);
  left: -90px;
}
.nav-window .inner {
  position: relative;
  z-index: 1;
  display: flex;
  height: 100%;
  align-items: center;
}
.nav-window .inner .space1 {
  flex: 200;
}
.nav-window .inner .space2 {
  flex: 160;
}
.nav-window .inner .space3 {
  flex: 250;
}
.nav-window .inner .usa-logo {
  background-image: url('../img/usa_logo.png');
  width: 300px;
  height: 460px;
  background-size: contain;
  background-repeat: no-repeat;
}
.nav-window .inner .nav-list {
  display: flex;
  flex-direction: column;

  color: var(--white);
}
.nav-window .inner .contents-list {
  display: flex;
  flex-direction: column;
  gap: 32px;
  font-size: clamp(16px, calc(14.43px + 0.45vw), 20px);
  font-family: var(--font-stoke);
  font-weight: 400;
}
.nav-window .inner .sns-links {
  display: flex;
  gap: 16px;
  margin: 32px 0 40px;
}
.nav-window .inner .sns-links .sns {
  width: 24px;
  height: 24px;
  display: block;
}
.nav-window .inner .sns-links .sns.facebook {
  background-image: url('../img/sns_icon_facebook.png');
}
.nav-window .inner .sns-links .sns.instagram {
  background-image: url('../img/sns_icon_instagram.png');
}
.nav-window .inner .contact-links {
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.nav-window .inner .contact-links .window-tel {
  font-family: var(--font-stoke);
  font-weight: 300;
  font-size: 16px;
}
.nav-window .inner .contact-links .window-web {
  background-color: var(--red);
  border: 1px solid var(--red);
  color: var(--white);
  padding: 8px;
  width: 200px;
  font-size: 12px;

  display: flex;
  justify-content: center;
}
.nav-window .inner .contact-links .window-web:hover {
  background-color: inherit;
  opacity: 1;
  color: var(--red);
  transition-delay: 0s;
  transition: all 0.5s;
}
@media (max-width: 767px) {
  .nav-window .inner .usa-logo,
  .nav-window .inner .space {
    display: none;
  }
  .nav-window .inner .nav-list {
    width: 100%;
    align-items: center;
  }
  .nav-window .inner .contents-list {
    align-items: center;
  }
  .nav-window .inner .window-tel {
    display: flex;
    justify-content: center;
  }
}

/* kv */
.kv-bg {
  position: relative;
  overflow: hidden;
  --vh-scale: clamp(0.703, calc(100dvh / 996px), 1);
}

section#kv {
  height: 100vh;
  width: 100%;
  position: relative;
}
#kv .kv-content {
  --movie-w: clamp(840px, 54vw, 1040px);
  --movie-h: calc(var(--movie-w) * 400 / 840);

  height: 100%;
  padding-top: clamp(128px, calc(54.9px + 12.18vh), 176px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--movie-w) minmax(0, 1fr);
  grid-template-rows: var(--movie-h) auto;
  grid-template-areas:
    '. movie map'
    'title . .';
}
#kv .usa-logo {
  position: absolute;
  bottom: -86px;
  left: 50%;
  transform: translateX(-50%);

  --usa-logo-w: clamp(136px, calc(19.29px + 9.41vw), 200px);
  --map-real-w: 3944;
  --map-real-h: 1882;
  --logo-real-w: 212;

  width: var(--usa-logo-w);
  aspect-ratio: 200/308;
  z-index: -1;
}
@media (max-width: 1239px) {
  #kv .kv-content {
    --movie-w: clamp(318px, calc(112.72px + 58.65vw), 840px);

    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);

    grid-template-areas:
      'movie movie'
      'title map';
  }
  #kv .usa-logo {
    top: 40%;
    left: 70%;
    bottom: auto;
    transform: translate(-50%, -50%);
    --usa-logo-w: clamp(59px, calc(28.72px + 8.65vw), 136px);
  }
}
@media (max-width: 910px) {
  #kv .kv-content {
    grid-template-rows: var(--movie-h) 1fr auto;
    grid-template-areas:
      'movie movie'
      'map map'
      'title title';
  }
  #kv .usa-logo {
    top: 16px;
    right: 16px;
    left: auto;
    transform: translate(0, 0);
  }
}

#kv .movie {
  grid-area: movie;
  width: 100%;
  aspect-ratio: 840 / 400;
  object-fit: cover;
}
#kv .kv-map-area {
  grid-area: map;
  width: 100%;
  position: relative;
}

#kv .kv-map {
  --map-w: calc(var(--usa-logo-w) * var(--map-real-w) / var(--logo-real-w));
  --map-h: calc(var(--map-w) * var(--map-real-h) / var(--map-real-w));
  --anchor-x: 0.745;
  --anchor-y: 0.36;

  position: absolute;
  width: var(--map-w);
  height: var(--map-h);
  left: calc(50% - (var(--map-w) * var(--anchor-x)));
  top: calc(50% - (var(--map-h) * var(--anchor-y)));
  background: url('../img/kv_map.png') no-repeat 0 0 / 100% 100%;
  z-index: -1;
}
#kv .title {
  grid-area: title;
  position: relative;
  margin: auto 64px 40px;
  width: fit-content;

  display: flex;
  flex-direction: column;
  gap: clamp(26px, calc(15.06px + 0.88vw), 32px);
}
#kv .title .logo {
  background-image: url('../img/kv_title_logo.png');
  background-size: contain;
  background-repeat: no-repeat;
  width: clamp(455px, calc(292.71px + 13.09vw), 544px);
  height: clamp(103px, calc(64.71px + 3.09vw), 124px);
}
#kv .title .subtitle {
  font-size: clamp(20px, calc(12.71px + 0.59vw), 24px);
  font-weight: 500;
  letter-spacing: 20%;
}
#kv .bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
#kv .cloud {
  position: absolute;
  background-size: contain;
  background-repeat: no-repeat;
  z-index: -1;
}
.drift-cloud-01 {
  top: clamp(-146px, calc(17.01px - 13.15vw), -29px);
  left: 0;
  background-image: url('../img/cloud_01.png');

  width: clamp(240px, calc(94.1px + 41.69vw), 611px);
  height: clamp(152px, calc(59.58px + 26.4vw), 387px);

  animation: kv-cloud-drift 60s linear infinite;
  animation-delay: 0s;
}
.drift-cloud-02 {
  top: clamp(-202px, calc(144.92px - 27.98vw), 47px);
  left: 0;
  background-image: url('../img/cloud_02.png');

  height: clamp(200px, calc(39.16px + 45.96vw), 609px);
  width: clamp(240px, calc(46.52px + 55.28vw), 732px);

  animation: kv-cloud-drift 60s linear infinite;
  animation-delay: -30s;
}

@keyframes kv-cloud-drift {
  from {
    transform: translateX(-50vw);
  }
  to {
    transform: translateX(100vw);
  }
}

.title-cloud-03 {
  top: clamp(-132px, calc(-69.88px - 3.24vw), -110px);
  left: clamp(-450px, calc(-243.88px - 10.74vw), -377px);
  background-image: url('../img/cloud_02.png');

  height: clamp(510px, calc(329.47px + 14.56vw), 609px);
  width: clamp(613px, calc(396px + 17.5vw), 732px);
}
.title-cloud-04 {
  top: clamp(-99px, calc(-53.82px - 2.35vw), -83px);
  left: -6px;
  background-image: url('../img/cloud_01.png');

  height: clamp(324px, calc(209.12px + 9.26vw), 387px);
  width: clamp(511px, calc(328.65px + 14.71vw), 611px);
}
.title-cloud-05 {
  top: clamp(-31px, calc(-14.06px - 0.88vw), -25px);
  right: clamp(-283px, calc(-153.12px - 6.76vw), -237px);
  background-image: url('../img/cloud_01.png');

  height: clamp(253px, calc(163.65px + 7.21vw), 302px);
  width: clamp(400px, calc(259.59px + 11.32vw), 477px);
}

/* kv-news */
#kv-news {
  padding: 80px 0 20px;
  background: linear-gradient(to top, #b0e0e6 0%, transparent 100%);
}
#kv-news .item {
  display: flex;
  width: clamp(888px, calc(246.12px + 51.76vw), 1240px);
  margin: 0 auto;
  box-shadow: 0px 8px 10px var(--lightblue-400);
}
#kv-news .single {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  padding: 32px 40px;
  gap: 32px;

  background-color: var(--white);
}
#kv-news .single:hover {
  opacity: 0.5;
}
#kv-news .flex {
  display: flex;
  gap: 32px;
  width: 100%;
}
#kv-news .head {
  font-family: var(--font-stoke);
  font-size: clamp(16px, calc(12.85px + 0.9vw), 24px);
  font-weight: 300;
}
#kv-news .date {
  font-family: var(--font-stoke);
  font-weight: 400;
  font-size: clamp(10px, calc(8.43px + 0.45vw), 14px);
  color: var(--lightblue-300);
  display: flex;
  align-items: center;
}
#kv-news .title {
  flex: 1;
  font-family: var(--font-mincho);
  font-size: clamp(13px, calc(11.82px + 0.34vw), 16px);
  font-weight: 500;

  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
#kv-news .arrow {
  background-image: url('../img/arrow_right.png');
  background-size: contain;
  background-repeat: no-repeat;
  height: 8px;
  width: 18px;
}
#kv-news .view-all {
  display: flex;
  align-items: center;
  justify-content: center;

  padding: 0 24px;
  font-family: var(--font-stoke);
  font-weight: 400;
  font-size: 16px;

  background-color: var(--blue);
  border: 1px solid var(--blue);
  color: var(--white);
}
#kv-news .view-all:hover {
  background-color: var(--white);
  color: var(--blue);
  opacity: 1;
}

/* section */
.section-head {
  display: flex;
  flex-direction: column;
  position: relative;
  gap: 72px;
}
.section-title {
  font-family: var(--font-vujahday);
  font-weight: 400;
  font-size: clamp(48px, calc(22.83px + 7.19vw), 112px);
  color: var(--blue);
}
.section-description {
  padding: 0 22px;
  font-weight: 500;
  line-height: 36px;
}

/* top-content */
.top-content {
  width: 100%;
  overflow: hidden;
}
.top-content .head {
  display: flex;
}
.top-content .head .img-01 {
  height: clamp(520px, calc(155.29px + 29.41vw), 720px);
  width: clamp(520px, calc(155.29px + 29.41vw), 720px);
}
.top-content .head .img-01 img {
  width: 100%;
  height: 100%;
}
.top-content .head .cloud {
  background-image: url(../img/cloud_01.png);
  position: absolute;
  background-size: contain;
  background-repeat: no-repeat;
  z-index: -1;
}
.top-content .body {
  display: flex;
  width: 100%;
}
.top-content .body .imgs {
  display: flex;
  gap: 16px;
}
.top-content .body .water-img {
  width: clamp(320px, calc(174.12px + 11.76vw), 400px);
  height: clamp(320px, calc(174.12px + 11.76vw), 400px);
  flex-shrink: 0;
}
.top-content .body .water-img img {
  width: 100%;
  height: 100%;
}
.top-content .body p {
  writing-mode: vertical-rl;
  font-family: var(--font-stoke);
  font-weight: 400;
  font-size: clamp(10px, calc(7.64px + 0.67vw), 16px);
}

.water-img {
  --water-ripple-duration: 1.2s;

  position: relative;
  overflow: hidden;
  visibility: visible;
  opacity: 1;
}
.water-img img {
  display: block;
  object-fit: cover;
  position: relative;
  z-index: 1;
  filter: none;
  transform: scale(1);
}
.is-water-ready .water-img {
  visibility: hidden;
  opacity: 0;
  transition: opacity var(--water-ripple-duration) ease;
}
.water-img.is-inview {
  visibility: visible;
  opacity: 1;
}
.water-img.is-rippling img {
  filter: url(#waterRipple);
}
.water-img.is-inview img {
  animation: water-ripple-fade var(--water-ripple-duration) ease forwards;
}

.water-ripple-filter {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

@keyframes water-ripple-fade {
  0% {
    opacity: 0;
    transform: scale(1.03);
  }

  40% {
    opacity: 1;
    transform: scale(1.01);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .water-img {
    animation: none;
    visibility: visible;
    opacity: 1;
    transform: none;
    filter: none;
  }
  .water-img img,
  .water-img.is-inview img {
    animation: none;
    opacity: 1;
    transform: none;
    filter: none;
  }
}

/* glamping */
#glamping {
  margin: clamp(96px, calc(86.56px + 2.7vw), 120px) auto 0;
}
#glamping .head {
  gap: clamp(116px, calc(-110.12px + 18.24vw), 240px);
}
#glamping .section-head {
  padding-top: clamp(58px, calc(-11.29px + 5.59vw), 96px);
}
#glamping .cloud {
  top: 26px;
  right: clamp(-332px, calc(-286.82px - 2.35vw), -316px);
  height: clamp(152px, calc(112.28px + 11.35vw), 253px);
  width: clamp(240px, calc(177.08px + 17.98vw), 400px);
}
#glamping .body {
  flex-direction: row-reverse;
}
#glamping .body .img-02 {
  margin-top: clamp(20px, calc(477.41px - 23.82vw), 182px);
  margin-right: clamp(184px, calc(-191.65px + 30.29vw), 390px);
}
#glamping .body .img-03 {
  margin-top: clamp(200px, calc(657.41px - 23.82vw), 362px);
  margin-right: 160px;
}

/* restaurant */
#restaurant {
  margin-top: clamp(260px, calc(223.53px + 2.94vw), 280px);
}
#restaurant .head {
  flex-direction: row-reverse;
  gap: clamp(72px, calc(-272.65px + 27.79vw), 261px);
}
#restaurant .section-head {
  padding-top: clamp(40px, calc(-62.12px + 8.24vw), 96px);
}
#restaurant .section-title {
  padding-right: clamp(0px, calc(-55.15px + 6.06vw), 20px);
}
#restaurant .cloud {
  top: -98px;
  left: clamp(-443px, calc(-486.76px + 3.53vw), -419px);
  height: clamp(203px, calc(130.64px + 20.67vw), 387px);
  width: clamp(320px, calc(205.56px + 32.7vw), 611px);
}
#restaurant .img-02 {
  margin-top: clamp(56px, calc(462.59px - 21.18vw), 200px);
  margin-left: clamp(186px, calc(-382.94px + 45.88vw), 498px);
}
#restaurant .img-03 {
  margin-top: clamp(210px, calc(616.59px - 21.18vw), 354px);
  margin-left: 160px;
}

/* garelly */
#garelly {
  margin: 200px 0;
  position: relative;
  width: 100%;
  overflow: clip;
}
#garelly .inner {
  position: sticky;
  top: max(0px, calc((100svh - 560px) / 2));
  left: 0;

  display: flex;
  gap: 320px;
  height: 560px;
}
#garelly .item {
  position: relative;
}
#garelly .item .photo {
  object-fit: cover;
}
#garelly .item:nth-of-type(odd) .photo {
  height: 320px;
  width: 320px;
}
#garelly .item:nth-of-type(even) .photo {
  height: 240px;
  width: 240px;
}
#garelly .item:nth-of-type(1) .photo {
  margin-top: 80px;
}
#garelly .item:nth-of-type(2) .photo {
  margin-top: 223px;
}
#garelly .item:nth-of-type(3) .photo {
  margin-top: 63px;
}
#garelly .item:nth-of-type(4) .photo {
  margin-top: 280px;
}
#garelly .item:nth-of-type(5) .photo {
  margin-top: 176px;
}
#garelly .item:nth-of-type(6) .photo {
  margin-top: 256px;
}
#garelly .item:nth-of-type(7) .photo {
  margin-top: 80px;
}
#garelly .item:nth-of-type(8) .photo {
  margin-top: 119px;
}
#garelly .item:nth-of-type(9) .photo {
  margin-top: 176px;
}
#garelly .item:nth-of-type(10) .photo {
  margin-top: 80px;
}
#garelly .leaf {
  position: absolute;
}
#garelly .item:nth-of-type(1) .leaf {
  top: 373px;
  left: 334px;
}
#garelly .item:nth-of-type(2) .leaf {
  top: 96px;
  right: 149px;
}
#garelly .item:nth-of-type(3) .leaf {
  top: 304px;
  right: 357px;
}
#garelly .item:nth-of-type(4) .leaf {
  top: 20px;
  right: 240px;
}
#garelly .item:nth-of-type(5) .leaf {
  top: 246px;
  right: 352px;
}
#garelly .item:nth-of-type(6) .leaf {
  top: 120px;
  right: 153px;
}
#garelly .item:nth-of-type(7) .leaf {
  top: 425px;
  right: 320px;
}
#garelly .item:nth-of-type(8) .leaf {
  top: 32px;
  right: 295px;
}
#garelly .item:nth-of-type(9) .leaf {
  top: 416px;
  right: 444px;
}
#garelly .item:nth-of-type(10) .leaf {
  top: 160px;
  right: 306px;
}

/* mask-door */
.mask-door {
  height: 100%;
  position: relative;
  overflow: hidden;

  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: bottom;
  -webkit-mask-size: contain;
  -webkit-mask-mode: alpha;
  -webkit-mask-origin: content-box;
  -webkit-mask-clip: content-box;

  mask-repeat: no-repeat;
  mask-position: bottom;
  mask-size: contain;
  mask-mode: alpha;
  mask-origin: content-box;
  mask-clip: content-box;
}
.mask-door::before,
.mask-door::after {
  content: '';
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
  background: var(--white);
  transition: transform 0.9s ease;
  z-index: 2;
}
.mask-door::before {
  left: 0;
  transform: translateX(0);
}
.mask-door::after {
  right: 0;
  transform: translateX(0);
}
.mask-door.is-active::before {
  transform: translateX(-100%);
}
.mask-door.is-active::after {
  transform: translateX(100%);
}

/* rooftop-glamping-experience */
.rge {
  overflow: hidden;
  padding-bottom: clamp(120px, calc(41.35px + 22.47vw), 320px);
}
.main-section .section-title {
  text-align: center;
  font-size: 80px;
}
.main-section .tent-outer {
  margin: 48px auto 0;
  height: 632px;
  width: 960px;
  position: relative;
}
.rge .tent-top-left {
  position: absolute;
  top: 0;
  left: 0;
}
.rge .tent-top-right {
  position: absolute;
  top: 0;
  right: 0;
}
.rge .tent-bottom-left {
  position: absolute;
  bottom: 0;
  left: 0;
}
.rge .tent-bottom-right {
  position: absolute;
  bottom: 0;
  right: 0;
}
.rge .tent-inner {
  padding: 35px 35px 0;
  height: 100%;
}
.rge .mask-door {
  -webkit-mask-image: url('../img/rge_tent_mask.png');
  mask-image: url('../img/rge_tent_mask.png');
}
.main-section .tent-photo {
  width: 100%;
  height: 100%;
}
.rge .rge-illust1 {
  position: absolute;
  top: 173px;
  right: calc(136px + 900px);
}
.rge .rge-illust2 {
  position: absolute;
  top: 418px;
  right: calc(80px + 900px);
}
.rge .rge-illust3 {
  position: absolute;
  top: 208px;
  left: calc(272px + 900px);
}
.rge .rge-illust4 {
  position: absolute;
  top: 327px;
  left: calc(80px + 900px);
}
.main-section .catch-text {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 50%);
  color: var(--white);
  font-size: 44px;
  font-weight: 500;
  white-space: nowrap;
}
.main-section .line {
  margin: clamp(24px, calc(4.34px + 5.62vw), 74px) auto
    clamp(24px, calc(8.27px + 4.49vw), 64px);
  height: clamp(40px, calc(24.27px + 4.49vw), 80px);
  width: 1px;
  background-color: var(--blue);
}
.main-section .section-text {
  text-align: center;
  font-weight: 500;
  line-height: 56px;
}

.main-section .overview {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  height: 668px;
  width: 1920px;
  margin-top: 120px;
  color: var(--white);
}
.main-section .overview-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.rge .overview-bg {
  background-image: url('../img/rge_overview_bg.jpg');
}
.main-section .overview-outer {
  position: relative;
  z-index: 0;
  width: 100vw;
  height: 100%;
}
.main-section .overview-inner {
  width: clamp(888px, calc(246.12px + 51.76vw), 1240px);
  padding: 121px 0 165px;
  margin: auto;
  display: flex;
  flex-direction: column;
  gap: 64px;
}
.main-section .overview-row {
  display: flex;
  gap: clamp(40px, calc(-102.24px + 11.47vw), 118px);
  padding-bottom: 64px;
  border-bottom: 1px solid var(--white);
}
.main-section .row-title {
  width: 200px;
  font-size: 20px;
}
.rge .normal-users {
  display: flex;
  gap: 16px;
  align-items: center;
}
.rge .rge-overview-tent {
  width: 64px;
  height: 48px;
}
.rge .row-title-note {
  font-size: 40px;
}
.main-section .row-body {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.rge .users {
  display: flex;
  gap: 24px;
}
.main-section .users-title {
  border: 1px solid var(--white);
  padding: 16px;
  font-size: 20px;
}
.main-section .users-body {
  font-size: 36px;
}
.rge .users-body-note {
  font-size: 20px;
}
.rge .less-body {
  display: flex;
  gap: 56px;
}
.rge .less-line {
  height: 100%;
  width: 1px;
  background-color: var(--white);
}
.rge .less-item {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.rge .item-title {
  font-size: 24px;
}

/* detail */
.detail .detail-content {
  position: relative;
  margin: -86px auto 0;
  max-width: 1240px;
  z-index: 1;
}
.detail .detail-content::before {
  content: '';
  background-color: var(--white);

  position: absolute;
  height: 100%;
  width: 100%;
  min-width: 460px;

  top: 0;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 778px 778px 0 0;
  z-index: -1;
}
.detail .detail-title {
  padding: clamp(26px, calc(7.91px + 5.17vw), 72px) 0
    clamp(36px, calc(29.71px + 1.8vw), 52px);
  height: clamp(61px, calc(20.49px + 11.57vw), 164px);
  box-sizing: content-box;
  display: flex;
  justify-content: center;
}
.detail .detail-content-inner {
  padding: 0 64px 64px;
}
.detail .detail-items {
  display: flex;
  gap: 168px;
  padding-bottom: 88px;
  border-bottom: 1px solid var(--lightblue-400);
}
.detail .detail-item {
  flex: 1;
}
.detail .detail-item:nth-of-type(1) {
  --detail-color: var(--green);
}
.detail .detail-item:nth-of-type(2) {
  --detail-color: var(--red);
}

.detail .detail-thumb {
  width: 100%;
}
.detail .detail-body {
  padding-top: clamp(24px, calc(20.85px + 0.9vw), 32px);
  gap: clamp(24px, calc(20.85px + 0.9vw), 32px);
  display: flex;
  flex-direction: column;
}
.detail .detail-meta {
  text-align: center;
  color: var(--detail-color);
  display: flex;
  flex-direction: column;
  gap: clamp(8px, calc(4.85px + 0.9vw), 16px);
}
.detail .detail-item-season {
  font-weight: 500;
}
.detail .detail-item-title {
  font-size: clamp(16px, calc(12.85px + 0.9vw), 24px);
  font-family: var(--font-stoke);
  font-weight: 400;
}
.detail .detail-main {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.detail .detail-text {
  line-height: clamp(28px, calc(24.85px + 0.9vw), 36px);
}
.detail .detail-box {
  border-top: 1px solid var(--lightblue-400);
  border-bottom: 1px solid var(--lightblue-400);
  padding: 32px 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.detail .detail-grid {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 24px;
  row-gap: 24px;
}
.detail .detail-grid-row {
  display: contents;
}

.detail .detail-grid-title {
  color: var(--detail-color);
}
.detail .detail-grid-text {
  margin: 0;
}
.detail .detail-grid-list * {
  list-style: disc;
  list-style-position: inside;
  line-height: 36px;
}
.detail .detail-note {
  font-size: clamp(11px, calc(10.61px + 0.11vw), 12px);
}
.detail .amenities-button {
  width: 100%;
  padding: 16px 0;
  background-color: var(--blue);
  color: white;
  border: 1px solid var(--blue);
  font-family: var(--font-mincho);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
}
.detail .amenities-button:hover {
  color: var(--blue);
  background-color: var(--white);
  cursor: pointer;
}
.detail .amenities-button .plus {
  width: 14px;
  height: 14px;
  position: relative;
}
.detail .amenities-button .plus::after,
.detail .amenities-button .plus::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: var(--white);
  transition: all 0.5s;
}
.detail .amenities-button .plus::after {
  width: 1px;
  height: 100%;
}
.detail .amenities-button .plus::before {
  width: 100%;
  height: 1px;
}
.detail .amenities-button:hover .plus::after,
.detail .amenities-button:hover .plus::before {
  background-color: var(--blue);
}
.modal-amenities-window {
  position: fixed;
  inset: 0;
  z-index: 1000;
  height: 100%;
  width: 100%;
  opacity: 0;
  visibility: hidden;
}
.modal-amenities-window.is-active {
  opacity: 1;
  visibility: visible;
}
.modal-amenities-window .mask {
  position: absolute;
  height: 100%;
  width: 100%;
  border: none;
  background: transparent;
  cursor: pointer;

  backdrop-filter: blur(4px);
}

.modal-amenities-window .inner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;

  height: 756px;
  width: 960px;
  padding: 80px 80px 40px;
  background-color: var(--white);
  font-family: var(--font-biz-udpmincho);

  display: flex;
  flex-direction: column;
  gap: 64px;
}
.modal-amenities-window .inner .item {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.modal-amenities-window .inner .item .head {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.modal-amenities-window .inner .item .title {
  color: var(--lightblue-400);
  font-family: var(--font-stoke);
  font-size: 24px;
}
.modal-amenities-window .inner .item .body {
  background-color: var(--lightblue-50);
  padding: 24px;

  display: flex;
  flex-direction: column;
  gap: 16px;
}
.modal-amenities-window .inner .item .body p {
  line-height: clamp(28px, calc(24.85px + 0.9vw), 36px);
}
.modal-amenities-window .inner .item .table {
  display: grid;
  grid-template-columns: max-content 1fr;
  align-items: stretch;
  border: 1px solid var(--lightblue-400);
}
.modal-amenities-window .inner .item .table dt {
  padding: 16px;
  color: white;
  display: flex;
  justify-content: center;
}
.modal-amenities-window .inner .item .table dt:nth-of-type(1) {
  background-color: var(--green);
}
.modal-amenities-window .inner .item .table dt:nth-of-type(2) {
  background-color: var(--red);
}
.modal-amenities-window .inner .item .table dd {
  padding: 16px 10px;
  border-left: 1px solid var(--lightblue-400);
}
.modal-amenities-window .inner .item .table dt:nth-of-type(n + 2),
.modal-amenities-window .inner .item .table dd:nth-of-type(n + 2) {
  border-top: 1px solid var(--lightblue-400);
}
.modal-amenities-window .inner .item .body .note {
  color: var(--red);
  font-size: clamp(10px, calc(9.21px + 0.22vw), 12px);
  line-height: clamp(20px, calc(15.28px + 1.35vw), 32px);
}
.modal-amenities-window .close-button {
  border: none;
  background: transparent;
  cursor: pointer;

  border-bottom: 1px solid var(--black);
  padding-bottom: 16px;
  display: flex;
  gap: 16px;
  font-family: var(--font-stoke);
  line-height: 20px;
  width: fit-content;
  margin: 0 auto;
}
.modal-amenities-window .close-button-icon {
  height: 17px;
  width: 17px;
}
.modal-amenities-window .close-button:hover {
  opacity: 0.5;
}

.detail .detail-foot {
  padding: 64px 0;
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.detail .detail-tags {
  display: flex;
  gap: 24px;
}
.detail .tags-item {
  display: flex;
  gap: clamp(8px, calc(4.85px + 0.9vw), 16px);
  border: 1px solid var(--lightblue-400);
  font-size: 14px;
  padding-right: clamp(8px, calc(1.71px + 1.8vw), 24px);
}
.detail .tags-item-thumb {
  height: clamp(56px, calc(52.85px + 0.9vw), 64px);
  width: clamp(56px, calc(52.85px + 0.9vw), 64px);
}
.detail .tags-item-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 24px;
}
.detail .tags-item-text .small {
  font-size: clamp(10px, calc(9.21px + 0.22vw), 12px);
}
.detail .detail-precautions {
  padding: clamp(24px, calc(17.71px + 1.8vw), 40px) 16px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;

  background-color: var(--lightblue-50);
}
.detail .detail-precautions-title {
  color: var(--lightblue-400);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--lightblue-400);
  font-size: 16px;
}
.detail .detail-precautions-body {
  font-size: clamp(13px, calc(12.61px + 0.11vw), 14px);
  line-height: clamp(28px, calc(26.43px + 0.45vw), 32px);
}
.reservation-buttons {
  padding-top: 56px;
  display: flex;
  justify-content: center;
  gap: clamp(40px, calc(-7.19px + 13.48vw), 160px);
  font-size: clamp(13px, calc(2.38px + 3.03vw), 40px);
  color: var(--blue);
}
.reservation-buttons .web-reservation,
.reservation-buttons .tel {
  position: relative;
}
.reservation-buttons .web-reservation:hover {
  opacity: 1;
}
.reservation-buttons .circle-effect {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  height: clamp(80px, calc(32.81px + 13.48vw), 200px);
  width: clamp(80px, calc(32.81px + 13.48vw), 200px);
  z-index: 0;
}
@keyframes circle-effect {
  0% {
    transform: scale(0);
    opacity: 0;
  }

  50% {
    opacity: 1;
  }
  90%,
  100% {
    transform: scale(1);
    opacity: 0;
  }
}
.reservation-buttons .circle-effect::before,
.reservation-buttons .circle-effect::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: var(--white);
  border-radius: 50%;
  animation: circle-effect 8s infinite;
}
.reservation-buttons .circle-effect::after {
  animation-delay: -4s;
}
.reservation-buttons a:hover .circle-effect::before,
.reservation-buttons a:hover .circle-effect::after {
  animation: circle-effect 2s infinite;
}
.reservation-buttons a:hover .circle-effect::after {
  animation-delay: -1s;
}
.reservation-buttons a .text {
  position: relative;
  z-index: 1;
}

/* indoor camping restaurant */
.icr {
  overflow: hidden;
  background-color: var(--lightblue-200);
  padding: 320px 0;
}
.icr .tent-frame {
  position: absolute;
  top: 0;
  left: 0;
}
.icr .tent-inner {
  padding: 53px 40px 0;
  height: 100%;
}
.icr .mask-door {
  -webkit-mask-image: url('../img/icr_tent_mask.png');
  mask-image: url('../img/icr_tent_mask.png');
}
.icr .tent-photo {
  width: 100%;
  height: 100%;
}
.icr .icr-illust1 {
  position: absolute;
  top: 148px;
  right: calc(80px + 900px);
}
.icr .icr-illust2 {
  position: absolute;
  top: 417px;
  right: calc(176px + 900px);
}
.icr .icr-illust3 {
  position: absolute;
  top: 160px;
  left: calc(56px + 900px);
}
.icr .icr-illust4 {
  position: absolute;
  top: 385px;
  left: calc(136px + 900px);
}
.icr .section-text-note {
  margin-top: clamp(32px, calc(28.85px + 0.9vw), 40px);
  font-size: clamp(11px, calc(9.82px + 0.34vw), 14px);
  text-align: center;
}
.icr .overview-bg {
  background-image: url('../img/icr_overview_bg.jpg');
}
.icr .private-reservation-title {
  display: flex;
  align-items: center;
  gap: 16px;
}
.icr .icr-overview-fork {
  width: 26px;
  height: 48px;
}
.icr .private-reservation-body {
  display: flex;
  align-items: center;
  gap: 24px;
}
.icr .available {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 40px;
}
.icr .available-items {
  display: flex;
  align-items: center;
  gap: 48px;
}
.icr .available-item {
  display: flex;
  align-items: center;
  gap: clamp(8px, calc(4.85px + 0.9vw), 16px);
}
.icr .available-img {
  max-width: clamp(33px, calc(20.02px + 3.71vw), 66px);
  max-height: clamp(32px, calc(25.71px + 1.8vw), 48px);
}
.icr .available-text {
  font-size: clamp(20px, calc(12.71px + 0.59vw), 24px);
  white-space: nowrap;
}
.icr .detail .detail-content-inner {
  padding-bottom: 0;
}

/* bottom-section */
.bottom-section {
  padding-top: clamp(120px, calc(72.81px + 13.48vw), 240px);
}
.container {
  width: clamp(888px, calc(246.12px + 51.76vw), 1240px);
  margin: 0 auto;
}
.bottom-section .section-head {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.bottom-section .section-title {
  font-size: 96px;
}
.bottom-section .section-title-jp {
  font-size: clamp(13px, calc(10.25px + 0.79vw), 20px);
  color: var(--blue);
}
.bottom-section .section-body {
  margin-top: clamp(40px, calc(21.12px + 5.39vw), 88px);
}

/* faq */
#faq {
  margin-bottom: clamp(80px, calc(-0.62px + 23.03vw), 285px);
}
#faq .faq-items {
  display: flex;
  gap: 48px;
}
#faq .faq-column {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.accordion {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.accordion-q {
  width: 100%;
  padding: 0 16px clamp(16px, calc(12.85px + 0.9vw), 24px);
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--white);

  background: transparent;
  border-top: none;
  border-right: none;
  border-left: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
#faq .faq-q::before {
  content: 'Q';
  font-family: var(--font-stoke);
  font-weight: 300;
  font-size: 24px;
  color: var(--lightblue-400);
}
.accordion-q .space {
  flex: 1;
}
.accordion-q .plus {
  position: relative;
  width: 14px;
  height: 14px;
}
.accordion-q .plus::before,
.accordion-q .plus::after {
  position: absolute;
  content: '';
  background-color: var(--lightblue-400);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.accordion .plus::before {
  height: 100%;
  width: 1px;
  transition: all 0.5s;
}
.accordion .plus::after {
  height: 1px;
  width: 100%;
}
.accordion-a {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  line-height: clamp(28px, calc(24.85px + 0.9vw), 36px);
}
.accordion.is-active .accordion-a {
  grid-template-rows: 1fr;
}
.accordion-a-inner {
  min-height: 0;
  overflow: hidden;
}
.accordion.is-active .accordion-q .plus::before {
  height: 0px;
}
.accordion-a-inner > * {
  padding-bottom: 40px;
}

/* reveiws-banner-area */
#reviews {
  height: clamp(127px, calc(-11.82px + 39.66vw), 480px);
  background-image: url('../img/reviews_bg.jpg');
  position: relative;
  width: 100%;
}
#reviews .reviews-banner {
  position: absolute;
  top: clamp(-125px, calc(-62.3px - 5.06vw), -80px);
  left: 50%;
  transform: translateX(-50%);
  height: clamp(159px, calc(44.56px + 32.7vw), 450px);
  width: clamp(318px, calc(89.12px + 65.39vw), 900px);
}
#reviews .reviews-banner:hover {
  opacity: 0.8;
}

#reviews .reviews-banner-img {
  height: 100%;
  width: 100%;
}

/* access */
#access {
  position: relative;
  overflow-x: hidden;
  padding-bottom: clamp(120px, calc(55.11px + 18.54vw), 285px);
}
#access .cloud1,
#access .cloud2 {
  position: absolute;
  background-image: url('../img/cloud_01.png');
  background-repeat: no-repeat;
  background-size: contain;
  z-index: -1;
}
#access .cloud1 {
  top: 160px;
  right: clamp(-76px, calc(-696px + 50vw), 264px);
  height: 253px;
  width: 400px;
}
#access .cloud2 {
  top: 240px;
  right: clamp(-236px, calc(-856px + 50vw), 104px);
  height: 387px;
  width: 611px;
}
#access .access-flex {
  display: flex;
  gap: clamp(60px, calc(16.24px + 3.53vw), 84px);
}
#access .access-text {
  display: flex;
  flex-direction: column;
  gap: clamp(32px, calc(25.71px + 1.8vw), 48px);
  flex: 1;
}
#access .address {
  line-height: clamp(28px, calc(23.28px + 1.35vw), 40px);
}
#access .info {
  display: grid;
  grid-template-columns: max-content 1fr;
  align-items: center;
  row-gap: 16px;
  column-gap: clamp(16px, calc(12.85px + 0.9vw), 24px);

  font-family: var(--font-stoke);
  font-weight: 300;
}
#access .sns-links {
  display: flex;
  gap: 16px;
}
#access .sns {
  height: 24px;
  width: 24px;
  display: block;
}
#access .train-a {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
#access .train-a .item {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
#access .train-a .item ol {
  padding-left: 1.5em;
}
#access .train-a .item ol li {
  list-style-type: decimal;
  list-style-position: outside;
}
#access .access-map {
  height: clamp(400px, calc(108.24px + 23.53vw), 560px);
  width: clamp(400px, calc(108.24px + 23.53vw), 560px);
}
#access .access-map iframe {
  height: 100%;
  width: 100%;
}

/* footer */
#foot-links {
  display: flex;
  justify-content: center;
  gap: 16px;
  background-color: var(--blue);

  padding: 56px 0;
}
#foot-links .item {
  height: 150px;
  width: 300px;
  background-color: var(--white);

  display: flex;
  justify-content: center;
  align-items: center;
}

#foot-main {
  position: relative;
  overflow: hidden;
  color: var(--white);
  padding-top: 126px;
}
#foot-main .foot-main-bg {
  position: absolute;
  inset: -10% 0;
  z-index: 0;
  pointer-events: none;
  background-image: url('../img/foot_bg.jpg');
  background-position: center 20%;
  background-repeat: no-repeat;
}
#foot-main .container {
  position: relative;
  z-index: 1;
}
#foot-main .foot-main-top {
  display: flex;
  gap: 80px;
}
#foot-main .foot-nav {
  display: flex;
  flex-direction: column;
  gap: 56px;
  padding-top: 34px;

  font-family: var(--font-stoke);
  font-weight: 400;
}
#foot-main .foot-nav-grid {
  display: flex;
  flex-direction: column;
  gap: 40px;
}
#foot-main .last-row {
  display: flex;
  gap: 40px;
}
#foot-main .foot-nav-privacy {
  font-size: 14px;
}
#foot-main .sns-links {
  display: flex;
  gap: 16px;
}
.space {
  flex: 1;
}
#foot-main .contact-nav {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-top: 34px;
}
#foot-main .tel {
  font-family: var(--font-stoke);
  font-weight: 300;
}
#foot-main .web {
  background-color: var(--red);
  border: 1px solid var(--red);
  width: 100%;
  padding: 16px 21.5px;
}
#foot-main .web:hover {
  background-color: transparent;
  border-color: var(--white);
  opacity: 1;
}
#foot-main .foot-main-bottom {
  margin-top: 80px;
  padding: 40px 0 48px;
  border-top: 1px solid var(--white);

  display: flex;
  justify-content: space-between;
  font-family: var(--font-stoke);
  font-weight: 400;
  font-size: 14px;
}
#foot-main .to-top {
  display: flex;
  gap: 16px;
}
#foot-main .to-top::after {
  content: '';
  width: 12px;
  height: 16px;

  background-image: url('../img/arrow_to_top.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
#foot-main .to-top:hover {
  opacity: 1;
}
#foot-main .to-top:hover::after {
  animation: fadeY 0.6s ease;
}
@keyframes fadeY {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  40% {
    transform: translateY(-32%);
    opacity: 0.3;
  }
  45% {
    transform: translateY(-40%);
    opacity: 0;
  }
  46% {
    transform: translateY(40%);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

/* concept */
#concept {
  z-index: 101;

  position: fixed;
  inset: 0;
  height: 100%;
  width: 100%;
  cursor: pointer;

  background-image: url('../img/concept_bg.jpg');
  background-size: auto auto;
  background-position: center;
  background-repeat: no-repeat;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  color: var(--white);
}
#concept.is-close {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
#concept .inner {
  display: flex;
  align-items: center;
  gap: clamp(40px, calc(-178.82px + 17.65vw), 160px);
}
#concept .left {
  width: 320px;
  padding: 40px;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 80px;

  border-right: 1px solid var(--white);
  border-left: 1px solid var(--white);
}
#concept .catch {
  font-size: 20px;
  writing-mode: vertical-rl;
  text-orientation: upright;
  text-align: center;
  letter-spacing: 4px;
}
#concept .catch-en {
  font-size: 12px;
  font-family: var(--font-stoke);
  font-weight: 400;
  text-align: center;
  line-height: 24px;
}
#concept .right {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 72px;
}
#concept .top {
  display: flex;
  flex-direction: column;
  gap: 40px;
}
#concept .since {
  font-family: var(--font-vujahday);
  font-size: 24px;
  font-weight: 400;
}
#concept .text {
  line-height: 36px;
}
#concept .feature {
  display: flex;
  gap: 20px;
}
#concept .feature-item {
  padding: 20px;
  text-align: center;
  border: 1px solid var(--white);

  font-size: 14px;
  line-height: 28px;
}
#concept .bottom {
  font-size: 20px;
}
#concept .close-area {
  display: flex;
  align-items: center;
}
#concept .fake-close {
  border-bottom: 1px solid var(--white);
  padding-bottom: 16px;
  display: flex;
  gap: 16px;
  font-family: var(--font-stoke);
  line-height: 20px;
  width: fit-content;
  margin: 0 auto;
}
#concept .fake-close-icon {
  height: 17px;
  width: 17px;
}
@media (max-width: 1239px) {
  header .web-reservation {
    font-size: clamp(12px, calc(10.43px + 0.45vw), 16px);
  }
  #concept {
    padding: clamp(32px, calc(-65.46px + 16.24vh), 96px) 16px;
  }
  #concept .top-space {
    flex: 0;
  }
  #concept .left {
    gap: clamp(24px, calc(1.98px + 6.29vw), 80px);
  }
  #concept .catch {
    font-size: clamp(16px, calc(14.43px + 0.45vw), 20px);
  }
  #concept .catch-en {
    font-size: clamp(10px, calc(9.21px + 0.22vw), 12px);
  }
  #concept .close-area {
    align-items: end;
  }
  #concept .right {
    display: none;
  }

  /* kv */

  #kv .movie {
    justify-self: center;
    width: clamp(318px, calc(112.72px + 58.65vw), 840px);
  }

  #kv .title {
    margin: auto clamp(36px, calc(24.99px + 3.15vw), 64px)
      clamp(40px, calc(53.93px - 1.12vw), 50px);
    gap: clamp(15px, calc(10.67px + 1.24vw), 26px);
  }
  #kv .title .logo {
    width: clamp(278px, calc(208.39px + 19.89vw), 455px);
    height: auto;
    aspect-ratio: 278/64;
  }
  #kv .title .subtitle {
    font-size: clamp(12px, calc(8.85px + 0.9vw), 20px);
  }
  #kv .title-cloud-03 {
    top: clamp(-110px, calc(-48.7px - 4.94vw), -66px);
    left: clamp(-377px, calc(-159.65px - 17.53vw), -221px);

    height: clamp(310px, calc(231.35px + 22.47vw), 510px);
    width: clamp(374px, calc(280.01px + 26.85vw), 613px);
  }
  #kv .title-cloud-04 {
    top: clamp(-83px, calc(-37.02px - 3.71vw), -50px);
    left: -6px;

    height: clamp(197px, calc(147.06px + 14.27vw), 324px);
    width: clamp(311px, calc(232.35px + 22.47vw), 511px);
  }
  #kv .title-cloud-05 {
    top: clamp(-25px, calc(-11.07px - 1.12vw), -15px);
    right: clamp(-237px, calc(-118.57px - 9.55vw), -152px);

    height: clamp(154px, calc(115.07px + 11.12vw), 253px);
    width: clamp(243px, calc(181.26px + 17.64vw), 400px);
  }

  /* kv-news */
  #kv-news {
    padding-top: clamp(40px, calc(24.27px + 4.49vw), 80px);
  }
  #kv-news .item {
    flex-direction: column;
    width: clamp(318px, calc(93.84px + 64.04vw), 888px);
  }
  #kv-news .single {
    display: grid;
    grid-template-columns: max-content max-content minmax(0, 1fr) 18px;
    column-gap: clamp(16px, calc(9.71px + 1.8vw), 32px);
    row-gap: 8px;
    align-items: center;

    padding: clamp(16px, calc(9.71px + 1.8vw), 32px)
      clamp(16px, calc(6.56px + 2.7vw), 40px);
  }
  #kv-news .head {
    grid-column: 1;
    grid-row: 1;
  }

  #kv-news .date {
    grid-column: 2;
    grid-row: 1;
  }

  #kv-news .title {
    grid-column: 1 / 4;
    grid-row: 2;
    min-width: 0;

    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
    overflow: hidden;
  }

  #kv-news .arrow {
    grid-column: 4;
    grid-row: 2;
    justify-self: end;
  }
  #kv-news .view-all {
    padding: 8px 0;
    font-size: clamp(12px, calc(10.43px + 0.45vw), 16px);
  }

  /* glamping */
  #glamping .head {
    flex-direction: column;
    gap: 80px;
  }
  .top-content .head .img-01 {
    width: clamp(240px, calc(129.89px + 31.46vw), 520px);
    height: clamp(240px, calc(129.89px + 31.46vw), 520px);
  }
  .section-head {
    padding: 0 16px;
    gap: 48px;
    margin: auto;
  }
  #glamping .section-head {
    padding-top: 0;
  }
  .section-description {
    line-height: 32px;
    padding: 0;
  }
  #glamping .cloud {
    top: -56px;
    right: -66px;
  }
  .top-content .body .water-img {
    height: clamp(160px, calc(97.08px + 17.98vw), 320px);
    width: clamp(160px, calc(97.08px + 17.98vw), 320px);
  }
  #glamping .body {
    flex-direction: column;
  }
  #glamping .body .img-02 {
    order: 1;
    margin-top: 80px;
    margin-right: 16px;
    margin-left: auto;
  }
  #glamping .body .img-03 {
    order: 1;
    margin-top: 64px;
    margin-right: auto;
  }
  #restaurant {
    margin-top: 160px;
  }
  #restaurant .head {
    flex-direction: column;
    gap: 80px;
  }
  #restaurant .img-01 {
    margin-left: auto;
  }

  #restaurant .section-head {
    padding-top: 0;
  }
  #restaurant .cloud {
    top: -102px;
    left: -111px;
  }
  #restaurant .body {
    flex-direction: column;
  }
  #restaurant .img-02 {
    margin: 80px auto 0 0;
  }
  #restaurant .img-03 {
    margin: 64px 16px 0 auto;
  }
  /* garelly */
  #garelly .inner {
    gap: clamp(160px, calc(97.08px + 17.98vw), 320px);
  }
  #garelly .item:nth-of-type(odd) .photo {
    height: clamp(160px, calc(97.08px + 17.98vw), 320px);
    width: clamp(160px, calc(97.08px + 17.98vw), 320px);
  }
  #garelly .item:nth-of-type(even) .photo {
    height: clamp(120px, calc(72.81px + 13.48vw), 240px);
    width: clamp(120px, calc(72.81px + 13.48vw), 240px);
  }
  #garelly .leaf {
    height: auto;
  }
  #garelly .item:nth-of-type(1) .leaf {
    top: clamp(186.5px, calc(113.16px + 20.96vw), 373px);
    left: clamp(167px, calc(101.33px + 18.76vw), 334px);
    width: clamp(58px, calc(35.19px + 6.52vw), 116px);
  }
  #garelly .item:nth-of-type(2) .leaf {
    top: clamp(48px, calc(29.12px + 5.39vw), 96px);
    right: clamp(74.5px, calc(45.2px + 8.37vw), 149px);
    width: clamp(52px, calc(31.55px + 5.84vw), 104px);
  }
  #garelly .item:nth-of-type(3) .leaf {
    top: clamp(152px, calc(92.22px + 17.08vw), 304px);
    right: clamp(178.5px, calc(108.3px + 20.06vw), 357px);
    width: clamp(50px, calc(30.34px + 5.62vw), 100px);
  }
  #garelly .item:nth-of-type(4) .leaf {
    top: clamp(10px, calc(6.07px + 1.12vw), 20px);
    right: clamp(120px, calc(72.81px + 13.48vw), 240px);
    width: clamp(62px, calc(37.62px + 6.97vw), 124px);
  }
  #garelly .item:nth-of-type(5) .leaf {
    top: clamp(123px, calc(74.63px + 13.82vw), 246px);
    right: clamp(176px, calc(106.79px + 19.78vw), 352px);
    width: clamp(65px, calc(39.44px + 7.3vw), 130px);
  }
  #garelly .item:nth-of-type(6) .leaf {
    top: clamp(60px, calc(36.4px + 6.74vw), 120px);
    right: clamp(76.5px, calc(46.42px + 8.6vw), 153px);
    width: clamp(50px, calc(30.34px + 5.62vw), 100px);
  }
  #garelly .item:nth-of-type(7) .leaf {
    top: clamp(212.5px, calc(128.93px + 23.88vw), 425px);
    right: clamp(160px, calc(97.08px + 17.98vw), 320px);
    width: clamp(50px, calc(30.34px + 5.62vw), 100px);
  }
  #garelly .item:nth-of-type(8) .leaf {
    top: clamp(16px, calc(9.71px + 1.8vw), 32px);
    right: clamp(147.5px, calc(89.49px + 16.57vw), 295px);
    width: clamp(62px, calc(37.62px + 6.97vw), 124px);
  }
  #garelly .item:nth-of-type(9) .leaf {
    top: clamp(208px, calc(126.2px + 23.37vw), 416px);
    right: clamp(222px, calc(134.7px + 24.94vw), 444px);
    width: clamp(50px, calc(30.34px + 5.62vw), 100px);
  }
  #garelly .item:nth-of-type(10) .leaf {
    top: clamp(80px, calc(48.54px + 8.99vw), 160px);
    right: clamp(153px, calc(92.83px + 17.19vw), 306px);
    width: clamp(60px, calc(36.4px + 6.74vw), 120px);
  }

  /* rge */
  .main-section .section-title {
    font-size: clamp(40px, calc(24.27px + 4.49vw), 80px);
    padding: 0 16px;
  }
  .main-section .tent-outer {
    height: clamp(210px, calc(44.04px + 47.42vw), 632px);
    width: clamp(318px, calc(65.53px + 72.13vw), 960px);
  }
  .rge .tent-top-left,
  .rge .tent-top-right {
    width: clamp(147px, calc(31.78px + 32.92vw), 440px);
  }
  .rge .tent-bottom-left,
  .rge .tent-bottom-right {
    width: clamp(10px, calc(1.35px + 2.47vw), 32px);
  }
  .rge .tent-inner {
    padding: 10px 10px 0;
  }
  .main-section .catch-text {
    font-size: clamp(16px, calc(4.99px + 3.15vw), 44px);
  }
  .main-section .section-text {
    text-align: start;
    padding: 0 16px;
    line-height: 36px;
    display: flex;
    justify-content: center;
  }
  .main-section .overview {
    margin-top: 80px;
    height: auto;
    width: auto;
  }
  .main-section .overview-outer {
    width: auto;
  }
  .main-section .overview-inner {
    margin: 0 auto;
    width: fit-content;
    padding: 80px 16px 104px;
    gap: 24px;
  }
  .main-section .overview-row {
    flex-direction: column;
    gap: 24px;
    padding-bottom: 32px;
  }
  .main-section .row-body {
    gap: 16px;
  }
  .rge .users {
    flex-direction: column;
    gap: 16px;
  }
  .main-section .users-title {
    display: flex;
    justify-content: center;
    font-size: clamp(13px, calc(10.25px + 0.79vw), 20px);
    padding: 8px;
    width: 100%;
  }
  .main-section .users-body {
    font-size: clamp(20px, calc(13.71px + 1.8vw), 36px);
  }
  .rge .users-body-note {
    font-size: clamp(13px, calc(10.25px + 0.79vw), 20px);
  }
  .rge .less-body {
    flex-direction: column;
    gap: 24px;
  }
  .rge .less-line {
    display: none;
  }

  /* detail */
  .detail .detail-content {
    margin: -40px auto 0;
  }
  .detail .detail-content-inner {
    padding: 0 clamp(16px, calc(-2.88px + 5.39vw), 64px) 64px;
  }
  .detail .detail-items {
    flex-direction: column;
    gap: 80px;
  }
  .detail .detail-grid {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }
  .detail .detail-grid-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .detail .detail-tags {
    flex-direction: column;
  }
  .detail .tags-item {
    width: fit-content;
    padding-right: 8px;
    gap: 8px;
  }
  .detail .detail-precautions-body {
    text-align: start;
  }

  /* icr */
  .icr {
    padding: clamp(120px, calc(41.35px + 22.47vw), 320px) 0;
  }
  .icr .tent-frame {
    width: clamp(318px, calc(65.53px + 72.13vw), 960px);
  }
  .icr .tent-inner {
    padding: clamp(17px, calc(2.84px + 4.04vw), 53px)
      clamp(13px, calc(2.38px + 3.03vw), 40px) 0;
  }
  .icr .section-text-note {
    text-align: start;
    padding: 0 16px;
    display: flex;
    justify-content: center;
  }
  .icr .private-reservation-body {
    flex-direction: column;
    gap: 16px;
    align-items: start;
  }
  .icr .available {
    gap: 24px;
  }
  .icr .available-items {
    display: grid;
    grid-template-columns: 1fr 1fr;
    row-gap: 16px;
  }
  .icr .available-text {
    font-size: clamp(13px, calc(10.25px + 0.79vw), 20px);
  }
  /* bottom-section */
  .bottom-section .section-title {
    font-size: clamp(48px, calc(29.12px + 5.39vw), 96px);
  }
  .container {
    width: clamp(318px, calc(93.84px + 64.04vw), 888px);
  }
  #faq .faq-items {
    flex-direction: column;
    gap: 0;
  }
  #access .cloud1 {
    top: clamp(26px, calc(-26.7px + 15.06vw), 160px);
    right: clamp(-76px, calc(29.89px - 8.54vw), 0px);
    height: clamp(90px, calc(25.9px + 18.31vw), 253px);
    width: clamp(143px, calc(41.93px + 28.88vw), 400px);
  }
  #access .cloud2 {
    top: clamp(55px, calc(-17.75px + 20.79vw), 240px);
    right: clamp(-236px, calc(13.39px - 20.11vw), -57px);
    height: clamp(138px, calc(40.08px + 27.98vw), 387px);
    width: clamp(218px, calc(63.45px + 44.16vw), 611px);
  }
  #access .access-flex {
    flex-direction: column;
    gap: 80px;
  }
  #access .access-map {
    width: clamp(318px, calc(285.75px + 9.21vw), 400px);
    height: clamp(318px, calc(285.75px + 9.21vw), 400px);
    margin: 0 auto;
  }

  #foot-main {
    padding-top: 26px;
  }
  #foot-main .foot-main-top {
    flex-direction: column;
    gap: 24px;
  }
  #foot-main .use-logo {
    width: 80px;
    padding-bottom: 24px;
  }
  #foot-main .foot-nav {
    gap: 32px;
    padding-top: 0;
  }
  #foot-main .foot-nav-grid {
    gap: 24px;
  }
  #foot-main .space {
    display: none;
  }
  #foot-main .contact-nav {
    flex-direction: row;
    align-items: center;
  }
  #foot-main .tel {
    white-space: nowrap;
  }
  #foot-main .web {
    padding: 12px 16px;
    width: fit-content;
  }
  #foot-main .foot-main-bottom {
    font-size: clamp(10px, calc(8.43px + 0.45vw), 14px);
  }
  .modal-amenities-window .inner {
    width: clamp(318px, calc(65.53px + 72.13vw), 960px);
    height: auto;
    padding: 32px 16px 40px;
    gap: 32px;
  }
  .modal-amenities-window .inner .item {
    gap: 16px;
  }
  .modal-amenities-window .inner .item .body {
    padding: 16px;
  }
  .modal-amenities-window .inner .item .title {
    font-size: clamp(20px, calc(18.43px + 0.45vw), 24px);
  }
  .modal-amenities-window .inner .item .table {
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  .modal-amenities-window .inner .item .table dd {
    padding: 10px;
  }
}

/* sub-page */
/* page header */
.page-header {
  min-height: clamp(320px, calc(209.89px + 31.46vw), 600px);
  height: auto;
  position: relative;
  width: 100%;
  overflow-x: clip;
  overflow-y: visible;
}
.page-title {
  padding-top: clamp(120px, calc(72.81px + 13.48vw), 240px);
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: clamp(0px, calc(-3.93px + 1.12vw), 10px);
}
.page-title .en {
  font-family: var(--font-vujahday);
  font-weight: 400;
  font-size: clamp(48px, calc(22.83px + 7.19vw), 112px);
  color: var(--blue);
}
.page-title .jp {
  line-height: 36px;
  font-size: clamp(13px, calc(11.82px + 0.34vw), 16px);
}
.page-header .bg-cloud {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  overflow: hidden;
}
.page-header .cloud {
  position: absolute;
  background-repeat: no-repeat;
  background-size: contain;
  z-index: -1;
}
.page-header .title-cloud-03 {
  top: clamp(59px, calc(11.81px + 13.48vw), 179px);
  left: clamp(204px, calc(-355.82px + 45.15vw), 511px);
  height: clamp(310px, calc(275.79px + 9.78vw), 397px);
  width: clamp(374px, calc(333.49px + 11.57vw), 477px);
}
.page-header .title-cloud-04 {
  top: clamp(76px, calc(27.24px + 13.93vw), 200px);
  left: clamp(493px, calc(-66.82px + 45.15vw), 800px);
  height: clamp(198px, calc(176.76px + 6.07vw), 252px);
  width: clamp(311px, calc(276.79px + 9.78vw), 398px);
}
.page-header .title-cloud-05 {
  top: clamp(111px, calc(58.3px + 15.06vw), 245px);
  left: clamp(725px, calc(165.18px + 45.15vw), 1032px);
  height: clamp(154px, calc(137.09px + 4.83vw), 197px);
  width: clamp(243px, calc(216.65px + 7.53vw), 310px);
}
@media (max-width: 1239px) {
  .page-header .title-cloud-03 {
    left: clamp(-185px, calc(-337.98px + 43.71vw), 204px);
  }
  .page-header .title-cloud-04 {
    left: clamp(42px, calc(-135.36px + 50.67vw), 493px);
  }
  .page-header .title-cloud-05 {
    left: clamp(223px, calc(25.58px + 56.4vw), 725px);
  }
}

/* news archive */
.page-content {
  display: flex;
  flex-direction: column;
  gap: clamp(80px, calc(70.56px + 2.7vw), 104px);
  padding: clamp(40px, calc(-22.92px + 17.98vw), 200px) 0
    clamp(80px, calc(32.81px + 13.48vw), 200px);
}
.page-content-inner {
  padding: clamp(40px, calc(24.27px + 4.49vw), 80px)
    clamp(16px, calc(-9.17px + 7.19vw), 80px);
  background-color: var(--white);
}
.news-archive .archive-list {
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.news-archive .archive-item {
  border-bottom: 1px solid var(--lightblue-400);
}
.news-archive .archive-link {
  display: flex;
  align-items: center;
  gap: 32px;
  padding-bottom: 40px;
}
.news-archive .archive-date {
  font-size: 14px;
  font-family: var(--font-stoke);
  font-weight: 400;
  color: var(--lightblue-300);
}
.news-archive .archive-title {
  font-size: 16px;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.news-archive .arrow {
  background-image: url('../img/arrow_right.png');
  background-repeat: no-repeat;
  background-size: contain;
  width: 18px;
  height: 8px;
}
@media (max-width: 1239px) {
  .news-archive .archive-list {
    gap: clamp(24px, calc(17.71px + 1.8vw), 40px);
  }
  .news-archive .archive-link {
    padding-bottom: clamp(24px, calc(17.71px + 1.8vw), 40px);
    display: grid;
    grid-template-columns: minmax(0, 1fr) 18px;
    grid-template-rows: auto auto;
    column-gap: 28px;
    row-gap: 12px;
    align-items: center;
  }
  .news-archive .archive-date {
    grid-column: 1;
    grid-row: 1;
    font-size: clamp(10px, calc(8.43px + 0.45vw), 14px);
  }

  .news-archive .archive-title {
    grid-column: 1;
    grid-row: 2;
    min-width: 0;
    font-size: clamp(13px, calc(11.82px + 0.34vw), 16px);
    line-height: 24px;

    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
  }

  .news-archive .arrow {
    grid-column: 2;
    grid-row: 1 / 3;
    align-self: center;
  }
}

/* page navigation */
.page-navigation {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 40px;
}
.page-navigation .pagination-arrow {
  width: 18px;
  height: 8px;
  background-repeat: no-repeat;
  background-size: contain;
  background-color: var(--blue);
}
.page-navigation .pagination-arrow--prev {
  mask: url('../img/arrow_blue_left.svg') center / contain no-repeat;
  -webkit-mask: url('../img/arrow_blue_left.svg') center / contain no-repeat;
}

.page-navigation .pagination-arrow--next {
  mask: url('../img/arrow_blue_right.svg') center / contain no-repeat;
  -webkit-mask: url('../img/arrow_blue_right.svg') center / contain no-repeat;
}

.page-navigation .pagination-arrow:hover {
  opacity: 1;
  background-color: var(--red);
}
.page-navigation .pagination-arrow.is-disabled {
  display: none;
}
.pagination-arrow--prev {
  background-image: url('../img/arrow_blue_left.svg');
}
.pagination-arrow--next {
  background-image: url('../img/arrow_blue_right.svg');
}
.page-navigation .pagination-numbers {
  display: flex;
  gap: 40px;
  color: var(--blue);
  font-family: var(--font-stoke);
  font-weight: 400;
}
.page-navigation .pagination-number:hover {
  color: var(--red);
  opacity: 1;
}
.pagination-number.is-current {
  color: var(--red);
}
@media (max-width: 1240px) {
  .pagination-number.pagination-number--mobile-hidden {
    display: none;
  }
}
.news-article {
  display: flex;
  flex-direction: column;
  gap: clamp(40px, calc(24.27px + 4.49vw), 80px);
}
.news-article .article-header {
  display: flex;
  flex-direction: column;
  gap: clamp(8px, calc(4.85px + 0.9vw), 16px);
  padding-bottom: clamp(24px, calc(17.71px + 1.8vw), 40px);
  border-bottom: 1px solid var(--lightblue-400);
}
.news-article .article-date {
  font-size: clamp(11px, calc(9.82px + 0.34vw), 14px);
  font-family: var(--font-stoke);
  font-weight: 400;
  color: var(--lightblue-300);
}
.news-article .article-title {
  font-size: clamp(20px, calc(18.43px + 0.45vw), 24px);
}
.news-article .article-thumb {
  display: flex;
  justify-content: center;
}

.news-article .article-thumb img {
  max-height: clamp(286px, calc(146.79px + 39.78vw), 640px);
  object-fit: contain;
}
.news-article .article-footer {
  margin: auto;
  width: clamp(286px, calc(146.79px + 39.78vw), 640px);
  height: clamp(143px, calc(73.39px + 19.89vw), 320px);
  background-image: url('../img/instagram_banner.jpg');
  background-repeat: no-repeat;
  background-size: contain;
}
.news-single .back-to-archive {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  font-size: 24px;
  color: var(--blue);
}
.news-single .back-to-archive:hover {
  color: var(--red);
  opacity: 1;
}
.news-single .back-to-archive::before {
  content: '';
  width: 18px;
  height: 8px;
  background-color: currentColor;
  mask: url('../img/arrow_blue_left.svg') center / contain no-repeat;
  -webkit-mask: url('../img/arrow_blue_left.svg') center / contain no-repeat;
}
/* Editor Content */
.editor-content > *:first-child {
  margin-top: 0;
}
.editor-content h2 {
  font-size: clamp(20px, calc(18.43px + 0.45vw), 24px);
  margin-top: clamp(56px, calc(46.56px + 2.7vw), 80px);

  border: var(--lightblue-400) solid 1px;
  padding: 16px 24px;

  position: relative;
  z-index: 0;
  background: transparent;
}
.editor-content h2::before {
  content: '';
  position: absolute;
  inset: 8px;
  z-index: -1;
  background-color: var(--lightblue-50);
}
.editor-content h3 {
  font-size: clamp(18px, calc(16.43px + 0.45vw), 22px);
  margin-top: clamp(32px, calc(25.71px + 1.8vw), 48px);
  line-height: 36px;

  border-top: 1px solid var(--lightblue-400);
  border-bottom: 1px solid var(--lightblue-400);
  padding: 8px;
}
.editor-content h4 {
  font-size: clamp(16px, calc(14.43px + 0.45vw), 20px);
  margin-top: clamp(32px, calc(25.71px + 1.8vw), 48px);
  line-height: 36px;

  background-color: var(--lightblue-50);
  padding: 8px 16px;
}
.editor-content h5 {
  font-size: clamp(14px, calc(12.43px + 0.45vw), 18px);
  margin-top: clamp(32px, calc(25.71px + 1.8vw), 48px);
  line-height: 36px;

  border-bottom: 1px solid var(--lightblue-400);
  padding: 0 8px 8px;
}
.editor-content h6 {
  font-size: clamp(12px, calc(10.43px + 0.45vw), 16px);
  margin-top: clamp(32px, calc(25.71px + 1.8vw), 48px);
  line-height: 36px;

  color: var(--lightblue-400);
}
.editor-content p,
.editor-content ul,
.editor-content ol {
  line-height: clamp(28px, calc(24.85px + 0.9vw), 36px);
  margin-top: clamp(20px, calc(16.85px + 0.9vw), 28px);
}
.editor-content ul li {
  list-style: disc;
  list-style-position: inside;
}
.editor-content ol li {
  list-style: decimal;
  list-style-position: inside;
}
.editor-content p.has-small-font-size {
  font-size: 11px !important;
  line-height: 20px;
}
.editor-content p.has-large-font-size {
  font-size: clamp(20px, calc(18.43px + 0.45vw), 24px) !important;
  line-height: normal;
}
.editor-content strong {
  color: var(--red);
  font-weight: bold;
}

/* contact */
.contact .contact-front {
  display: flex;
  flex-direction: column;
  gap: clamp(24px, calc(8.27px + 4.49vw), 64px);
  padding-bottom: clamp(40px, calc(24.27px + 4.49vw), 80px);
  border-bottom: var(--lightblue-400) solid 1px;
}
.contact .contact-front-text {
  text-align: center;
  line-height: 28px;
}
.contact .reservation-buttons a .circle-effect {
  height: clamp(80px, calc(64.27px + 4.49vw), 120px);
  width: clamp(80px, calc(64.27px + 4.49vw), 120px);
}

.contact .reservation-buttons a .circle-effect::before,
.contact .reservation-buttons a .circle-effect::after {
  background-color: var(--lightblue-50);
}
.contact .reservation-buttons {
  font-size: clamp(13px, calc(8.67px + 1.24vw), 24px);
}
.contact .contact-middle {
  padding: clamp(40px, calc(24.27px + 4.49vw), 80px) 0 0;
  display: flex;
  flex-direction: column;
  gap: clamp(48px, calc(35.42px + 3.6vw), 80px);
}
.contact .contact-middle form {
  display: flex;
  flex-direction: column;
  gap: clamp(48px, calc(35.42px + 3.6vw), 80px);
  align-items: center;
}
.contact .contact-title-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
}
.contact .contact-title {
  text-align: center;
  font-size: clamp(20px, calc(15.28px + 1.35vw), 32px);
  color: var(--lightblue-400);
}
.contact .contact-title-note {
  text-align: center;
  font-size: clamp(11px, calc(10.61px + 0.11vw), 12px);
  display: flex;
  gap: 8px;
  justify-content: center;
}
.contact .contact-title-note .kome {
  color: var(--red);
}
.contact .contact-form {
  display: flex;
  flex-direction: column;
  gap: clamp(24px, calc(8.27px + 4.49vw), 64px);
  padding-top: clamp(40px, calc(24.27px + 4.49vw), 80px);
}
.contact .contact-form-list,
.contact .contact-confirm-list {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.contact .contact-form-row,
.contact .contact-confirm-row {
  display: flex;
  gap: 32px;
  align-items: center;
}
.contact .contact-form-row dt,
.contact .contact-confirm-row dt {
  width: 200px;
}
.contact .contact-form-row dd,
.contact .contact-confirm-row dd {
  width: clamp(286px, calc(203.42px + 23.6vw), 496px);
}
.contact .contact-form-row .inquiry-label {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.contact .contact-form-row .inquiry-label .note {
  font-size: clamp(11px, calc(10.21px + 0.22vw), 13px);
  color: var(--lightblue-400);
}
.contact .contact-form-row .inquiry-grid .wpcf7-form-control {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.contact .wpcf7-list-item {
  margin: 0;
}
.contact .wpcf7-list-item label {
  display: flex;
  align-items: center;
  gap: 8px;
}
.contact label.is-required {
  display: flex;
  align-items: center;
  gap: 8px;
}
.contact label.is-required::after {
  content: '※';
  color: var(--red);
}
.contact .contact-form-row .inquiry-grid .wpcf7-form-control .wpcf7-list-item {
  display: flex;
  align-items: center;

  padding: 8px;
  border: 1px solid var(--lightblue-400);
}
.contact .inquiry-grid .wpcf7-list-item:has(input[type='checkbox' i]:checked) {
  background-color: var(--lightblue-50);
}
.contact input[type='checkbox' i] {
  appearance: none;
  -webkit-appearance: none;
  display: inline-grid;
  place-content: center;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  padding: 0;
  border: 1px solid var(--lightblue-400);
  background-color: var(--white);
  cursor: pointer;
}

.contact input[type='checkbox' i]::before {
  content: '';
  width: 8px;
  height: 5px;
  border-left: 2px solid var(--white);
  border-bottom: 2px solid var(--white);
  transform: translateY(-2px) rotate(-45deg) scale(0);
  transform-origin: center;
}

.contact input[type='checkbox' i]:checked {
  background-color: var(--lightblue-400);
}

.contact input[type='checkbox' i]:checked::before {
  transform: translateY(-2px) rotate(-45deg) scale(1);
}
.contact input[type='submit' i],
.contact input[type='button' i] {
  width: 200px;
  padding: 8px 12px;
  cursor: pointer;
  display: block;
  margin: auto;
}
.contact input[type='submit' i] {
  background-color: var(--blue);
  color: var(--white);
  border: 1px solid var(--blue);
}
.contact input[type='submit' i]:hover {
  background-color: transparent;
  color: var(--blue);
}
.contact input[type='button' i] {
  background-color: var(--gray);
  color: var(--white);
  border: 1px solid var(--gray);
}
.contact input[type='button' i]:hover {
  background-color: transparent;
  color: var(--gray);
}
.contact .wpcf7-spinner {
  display: none;
}
.contact input,
.contact textarea {
  padding: clamp(8px, calc(4.85px + 0.9vw), 16px);
  border: 1px solid var(--lightblue-400);
  width: 100%;
}
.contact input::placeholder,
.contact textarea::placeholder {
  color: var(--lightblue-100);
  opacity: 1;
}
.contact .flex-fields p {
  display: flex;
  gap: 16px;
}
.contact .contact-form-row--privacy a {
  color: var(--lightblue-400);
  text-decoration: underline;
}
.contact .confirm-content dt {
  color: var(--lightblue-400);
}
.contact .confirm-content .contact-form-actions p {
  display: flex;
  justify-content: center;
  gap: 80px;
}
.wpcf7-form-control-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.contact-form-row--privacy .wpcf7-form-control {
  display: flex;
  justify-content: center;
}

.wpcf7-not-valid-tip {
  color: var(--red);
}
.contact input.wpcf7-not-valid,
.contact textarea.wpcf7-not-valid {
  border-color: var(--red);
}

.contact .inquiry-grid .wpcf7-form-control.wpcf7-not-valid .wpcf7-list-item {
  border-color: var(--red);
}
.contact
  .inquiry-grid
  .wpcf7-form-control.wpcf7-not-valid
  .wpcf7-list-item
  input {
  border-color: var(--red);
}

.wpcf7-response-output {
  display: none;
}
/* confirm */
.contact .contact-confirm {
  display: flex;
  flex-direction: column;
  gap: 80px;
}
.contact .thanks-content {
  display: flex;
  flex-direction: column;
  gap: 80px;
}
.contact .thanks-content .head-body {
  display: flex;
  flex-direction: column;
  gap: clamp(40px, calc(24.27px + 4.49vw), 80px);
}
.contact .thanks-content .hato {
  background-image: url('../img/contact_thanks_hato.png');
  width: clamp(80px, calc(64.27px + 4.49vw), 120px);
  height: clamp(80px, calc(64.27px + 4.49vw), 120px);
  background-repeat: no-repeat;
  background-size: contain;
  margin: auto;
}
.contact .thanks-content .thanks-text {
  text-align: center;
  color: var(--lightblue-400);
  display: flex;
  flex-direction: column;
  gap: clamp(8px, calc(1.71px + 1.8vw), 24px);
}
.contact .thanks-content .thanks-text .thanks-catch {
  font-size: clamp(48px, calc(35.42px + 3.6vw), 80px);
  font-family: var(--font-vujahday);
  font-weight: 400;
}

.contact .thanks-content .thanks-text .thanks-catch {
  font-weight: 500;
}
.contact .back-to-top {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  width: 200px;
  padding: 8px;
  margin: auto;

  color: var(--white);
  background-color: var(--blue);
  border: 1px solid var(--blue);
}
.contact .back-to-top:hover {
  background-color: transparent;
  color: var(--blue);
}
@media (max-width: 1239px) {
  .contact .contact-form-row,
  .contact .contact-confirm-row {
    flex-direction: column;
    gap: 16px;
    align-items: start;
  }
}
@media (max-width: 910px) {
  .contact .contact-form-row .inquiry-grid .wpcf7-form-control {
    display: flex;
    flex-direction: column;
  }
  .contact .contact-front-text {
    text-align: start;
  }
  .contact .confirm-content .contact-form-actions p {
    flex-direction: column;
    gap: 24px;
  }
  .contact .confirm-content input[type='submit' i] {
    order: 1;
  }
  .contact .confirm-content input[type='button' i] {
    order: 2;
  }
}