@charset "UTF-8";
/* =============================================================
  Cover Animation
============================================================= */
.cover{
  position: fixed;
  top: 0;
  left: 0;
  /* z-index: var(--zindex-hamburgermenu-contents); */
  z-index: 2147483646;
  width: 100%;
  height: 100vh;
  background-color: var(--color-text-default);
  display: grid;
  place-content: center;
}
.cover-logo{
  width: 18rem;
}

html #tripla-app{
  opacity: 0!important;
}
html.is-loaded #tripla-app{
  opacity: 1!important;
}


/* --- 初期状態 (is-loading) --- */
.is-loading body{
  position: fixed;
  top: 0;
  left: 0;
}
.is-loading #cover {
  /* 画面全体を覆う設定 */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  z-index: 9999;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

.is-loading .cover-logo {
  opacity: 1;
  transition: opacity 0.5s ease;
}

html.is-loading #mv {
  filter: grayscale(1);
  transition: filter 1.5s ease-in-out;
}

/* --- アニメーションのステップ --- */

/* 1. cover-logoが消える */
.is-loading.step-1 .cover-logo {
  opacity: 0;
}

/* 2. coverが消える */
.is-loading.step-2 #cover {
  opacity: 0;
}

/* 3. section-mvのモロクロをカラーにする */
html.is-loading.step-3 #mv {
  filter: grayscale(0);
}

/* 5. site-main-areaを表示する */
.is-loading.step-5 .site-main-area {
  opacity: 1;
}


/* ========================================================
  読み込み待機設定 (真っ白/点滅防止)
  ======================================================== */
#mv {
  opacity: 0;
  will-change: opacity;
}

html.is-loading #mv {
  opacity: 1;
}

html.is-loaded #mv {
  opacity: 1;
  filter: grayscale(0);
}

.is-loaded #cover {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

.is-loaded .site-main-area {
  opacity: 1;
}

@keyframes marquee-normal {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@keyframes marquee-reverse {
  0% { transform: translateX(-50%); }
  100% { transform: translateX(0); }
}
.mv-slide-list{
  pointer-events: none;
}
.mv-slide-list .swiper:nth-child(odd){
  transform: translateX(-140px);
}
@media screen and (min-width: 768px) {
  .mv-slide-list .swiper:nth-child(odd){
    transform: translateX(-300px);
  }
}

/* ========================================================
アニメーション設定 (点滅防止 & 初回演出)
======================================================== */
.mv-slide-item:nth-child(even) .swiper-wrapper {
  animation: marquee-normal 100s linear infinite;
}
.mv-slide-item:nth-child(odd) .swiper-wrapper {
  animation: marquee-reverse 100s linear infinite;
}

html.is-loading:not(.step-4):not(.step-5) .mv-slide-item .swiper-wrapper {
  animation-play-state: paused;
}

:root{
  --top-negative-margin:-10rem;
}
@media screen and (min-width: 768px) {
  :root{
    --top-negative-margin:-10rem;
  }
}

/* =============================================================
  MV
============================================================= */
:root{
  --mv-slide-width:300px;
  --mv-slide-gap:15px;
}
@media screen and (min-width: 768px) {
  :root{
    --mv-slide-width:26dvw;
    --mv-slide-gap:20px;
  }
}

.section-mv{
  /* height: 100vh; JS無効時のフォールバック */
  height: calc(var(--vh, 1vh) * 100); 
  width: 100%;
  background-color: var(--color-text-default);
  position: relative;
}

.section-mv__inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; 
  overflow: hidden; 
}
.mv-slide-list{
  margin-top: -2rem;
}

.mv-slide-list .swiper {
  width: 100%;
  overflow: visible;
}

.mv-slide-item + .mv-slide-item{
  margin-top: var(--mv-slide-gap);
}
.mv-slide-list .swiper-slide {
  --mv-slide-width:auto;
  width: var(--mv-slide-width);
  height: calc(var(--vh, 1vh) * 20); 
  border-radius: 2rem;
  margin-right: var(--mv-slide-gap); 
  overflow: hidden;
  aspect-ratio: 7/4;
}
.mv-slide-list .swiper-slide img{
  max-width: unset;
  height: 100%;
  display: block;
  aspect-ratio: 7 / 4;
  object-fit: cover;
}

.mv-slide-list .swiper-wrapper {
  display: flex;
  width: max-content;
  will-change: transform;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
}

@media screen and (min-width: 768px) {
  .mv-slide-list .swiper-slide{
    height: 25dvh;
  }
}

.site-main-area{
  width: 100%;
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100); 
  background-image: linear-gradient(0deg, rgba(17, 17, 17, 0.65), rgba(46, 46, 46, 0.3) 33%, rgba(59, 59, 59, 0.1) 66%, rgba(68, 68, 68, 0));
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  display: grid;
}
.site-main-area__inner{
  display: grid;
  gap: 4rem;
  padding-inline: 2.5rem;
  margin-block: auto 6.5rem;
  width: 100%;
  box-sizing: border-box;
}
.site-heading h1{
  color: #fff;
  font-size: 4.5rem;
  line-height: 1;
  font-weight: var(--fw-medium);
  font-family: var(--font-roboto);
  letter-spacing: .03em;
}
.site-heading p{
  margin-top: 26px;
  color: #fff;
  font-size: 1.2rem;
  line-height: 1.625;
  font-weight: var(--fw-medium);
  letter-spacing: .03em;
}
.reservation-panel-area{
  width: 100%;
}
.reservation-panel{
  padding: 2rem;
  width: 100%;
  background-color: #fff;
  border-radius: 8px;
}

@media screen and (min-width: 768px) {
  .reservation-panel {
    width: 100%;
    max-width: 790px;
  }
  .site-main-area__inner{
    padding-inline: 7rem;
    margin-block: auto 7rem;
  }
  .site-heading h1{
    font-size: min(6vw,80px);
  }
  .site-heading p{
    margin-top: 31px;
    font-size: min(1.4vw, 15px);
  }
  .availability-form {
    grid-template-columns: calc(50% - 60px - 1.5rem) calc(50% - 60px - 1.5rem) 120px;
  }
  .date-input {
    font-size: 13px;
  }
  .icon-placeholder {
    margin-right: 15x;
  }
  .search-button{
    width: 100%;
    height: 100%;
  }
  #top-availability-result{
    text-align: left;
  }
}
@media screen and (max-width: 768px) {
  .site-main-area {
    width: 100vw;
  }
}
@media screen and (min-width: 768px) {
  .mv-slide-list .swiper-slide {
    height: calc(var(--vh, 1vh) * 25); 
  }
}
/* =============================================================
  ROOMS
============================================================= */
.home .hotel-list{
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 1rem;
}
.home .hotel-item__image{
  border-radius: 8px 8px 0 0;
  overflow: hidden;
}
.home .hotel-item__text{
  border-radius: 0 0 8px 8px;
  border: 1px solid var(--color-frame-default);
  padding: 1rem 1.5rem 1.5rem;
}
.home .hotel-icon--new{
  top: unset;
  left: unset;
  bottom: 0;
  right: 0;
}
.area-tabs .c-button-area-tab{
  padding-block: .75rem;
  line-height: 1;
}

@media (max-width: 992px) {
  .home .hotel-list{
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
}

@media (min-width: 769px) {
  .home .hotel-list{
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 2rem;
  }
  .area-tabs .c-button-area-tab{
    padding-block: .7rem .6rem;
  }
}
@media (max-width: 768px) {
  .home .hotel-item__text{
    gap: .5rem;
  }
  .home .hotel-item__name{
    font-size: 14px;
  }
  .home .hotel-item__location{
    font-size: 12px;
  }
  .home .hotel-item__information{
    margin-top: unset;
  }
  .home .hotel-information-list{
    gap: .5rem;
    margin-bottom: .5rem;
  }
}

/* =============================================================
  Concept
============================================================= */
.section-concept .c-heading-primary{
  padding-inline: var(--padding-horizontal-global);
  width: 100%;
}
.concept-video{
  position: relative;
}
.concept-video-container {
  width: 100%; 
  margin: 3rem auto 0; 
}
.concept-video-container video {
  width: 100%;
  height: auto;
  aspect-ratio: 39 / 45;
  object-fit: cover;
  display: block;
}
.section-concept__text{
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-content: center;
  width: 100%;
  height: 100%;
  color: #fff;
  font-size: 1.4rem;
  line-height: 1.3;
  letter-spacing: .03em;
}
.section-concept__text .c-heading-primary{
  position: absolute;
  top: 3rem;
  left: var(--padding-horizontal-global);
  margin-top: 0;
}
.section-concept__text .c-button-main{
  position: absolute;
  bottom: 4rem;
  right: var(--padding-horizontal-global);
}

/* ============================================
   音声切り替えボタン
============================================ */
.js-sound-toggle {
    position: absolute;
    z-index: 10002;
    bottom: 4rem;
    left: var(--padding-horizontal-global);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 40px;
    padding: 0 16px;
    background-color: rgba(153, 134, 117, 0.1);
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 1);
    border-radius: 99px;
    color: #fff;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.js-sound-toggle svg {
    width: 18px;
    height: 18px;
    display: block;
}
.js-sound-toggle .text {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.1em;
    padding-top: 1px;
    white-space: nowrap;
}
.js-sound-toggle.is-muted .icon-on,
.js-sound-toggle.is-muted .text-on { display: none; }
.js-sound-toggle.is-unmuted .icon-off,
.js-sound-toggle.is-unmuted .text-off { display: none; }

@media screen and (min-width: 768px) {
  .concept-video-container {
    margin: 4rem auto 0; 
  }
  .concept-video-container video {
    aspect-ratio: 7 / 3;
  }
  .section-concept__text{
    font-size: 20px;
  }
  .section-concept__text .c-heading-primary{
    top: 7rem;
  }
}
/* =============================================================
  Service
============================================================= */
.section-service{
  padding-block: 5rem;
}
.section-service__inner{
  padding-inline: var(--padding-horizontal-global);
  width: 100%;
}
.service-list{
  margin-top: 3rem;
  display: grid;
}
.service-item{
  display: grid;
  grid-template-columns: 11rem 1fr;
  align-items: center;
  gap: 2rem;
  width: 100%;
}
.service-item__title{
  font-size: 15px;
  line-height: 1.7;
  letter-spacing: .06em;
  white-space: normal; 
  word-break: break-all;
}
.service-item__description{
  margin-top: .8rem;
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: .06em;
  color: var(--color-text-gray-08);
  white-space: normal; 
  word-break: break-all;
}
.service-message{
  margin-top: 6rem;
  margin-inline: auto;
  border: 1px solid var(--color-text-default);
  padding: 1rem 3rem;
  width: fit-content;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  justify-content: center;
  align-items: center;
}
.service-message--en{
  font-size: 1.5rem;
  line-height: 1;
  letter-spacing: .03em;
}
.service-message--en{
  font-size: 1.4rem;
  line-height: 1;
  letter-spacing: .06em;
}

@media screen and (min-width: 768px) {
  .section-service{
    padding-block: 8rem;
  }
  .service-list{
    margin-top: 4rem;
    grid-template-columns: repeat(6,minmax(0,1fr));
  }
  .service-item{
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }
  .service-item + .service-item{
    border-top: unset;
    border-left: 1px solid var(--color-frame-default);
  }
  .service-item__image{
    display: grid;
    place-content: center;
  }
  .service-item:first-child .service-item__image{
    padding-inline: 0 2.1rem;
  }
  .service-item:last-child .service-item__image{
    padding-inline: 2.1rem 0;
  }
  .service-item__image img{
    width: 16rem;
  }
  .service-item__text{
    width: 100%;
    padding-inline: 2.1rem;
  }
  .service-item:first-child .service-item__text{
    padding-inline: 0 2.1rem;
  }
  .service-item:last-child .service-item__text{
    padding-inline: 2.1rem 0;
  }
  .service-item__title{
    font-size: 1.8rem;
    text-align: center;
  }
  .service-item__description{
    margin-top: 1.5rem;
    font-size: 1.4rem;
  }
  .service-message{
    margin-top: 7rem;
    gap: 2rem;
    flex-direction: row;
    align-items:center;
  }
  .service-message--en{
    font-size: 18px;
  }
  .service-message--en{
    font-size: 15px;
  }
}
@media screen and (max-width: 767px) {
  .service-item + .service-item{
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--color-frame-default);
  }
}

/* =============================================================
    FAQ
============================================================= */
.section-faq__inner{
  display: grid;
  background-color: var(--color-bg-gray);
}
.faq__content-list-inner{
  padding: 5rem var(--padding-horizontal-global);
}
.faq-list{
  margin-top: 3rem;
}
.section-faq .c-button{
  margin-top: 6.5rem;
  margin-inline: auto 0;
}
.common-decolation-slider figure,
.common-decolation-slider figcaption{
  margin: 0;
  padding: 0;
}
.common-decolation-slider img{
  width: 100%;
}
.text-hotel-area{
  position: absolute;
  top: 2rem;
  left: 1rem;
  font-size: 1.2rem;
  font-family: var(--font-roboto);
  line-height: 1.5;
  letter-spacing: 0.06em;
  color: #fff;
  transform: rotate(90deg);
  transform-origin: 0 bottom;
}

@media screen and (min-width: 992px) {
  .section-faq__inner{
    grid-template-columns: 42.85714svw auto;
  }
  .faq__image-list{
    height: 100dvh;
    position: sticky;
    top: 0;
  }
  .text-hotel-area{
    left: 2rem;
  }
  .common-decolation-slider .swiper-slide img{
    width: 100%;
    height: 100dvh;
    display: block;
    object-fit: cover;
  }
  .faq-list {
    margin-top: 3rem;
  }
  .faq__content-list-inner{
    padding: 8rem 5.71428svw;
  }
  .section-faq .c-button{
    margin-top: 4rem;
  }
}

/* =============================================================
    Stories
============================================================= */
.section-stories{
  padding-block: 5rem;
  background-color: var(--color-bg-black);
}
.section-stories .c-heading-primary{
  width: 100%;
}
.stories-list__inner{
  padding-inline: var(--padding-horizontal-global);
  width: 100%;
}
.stories-list__head-area{
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
.stories-list__content{
  margin-top: 3rem;
}
.stories-list {
  overflow: hidden;
}
.stories-list .swiper {
  overflow: visible;
}
.stories-list .swiper-controller {
  display: flex;
  gap: 1rem;
  align-items: center;
}
.stories-list .stories-item {
  width: max-content;
  display: block;
}
.stories-item .slide {
  overflow: hidden;
  width: 15rem;
}
.stories-item__image{
  border-radius: 1.5rem;
  overflow: hidden;
}
.stories-item__content{
  color: #fff;
  margin-top: 1rem;
}
.stories-item__title{
  font-size: 1.3rem;
  line-height: 1.5;
  color: #fff;
  word-break: auto-phrase;
}
.icon-rect{
  width: 55px;
  height: 55px;
}
.icon-rect[data-color="white"]{
  fill: #fff;
}
.section-stories .c-button{
  margin-top: 2rem;
  margin-inline: auto 0;
}

@media screen and (min-width: 768px) {
  .stories-item .slide {
    width: 220px;
  }
  .stories-list .swiper-controller {
    gap: 1.5rem;
  }
  .stories-item__title{
    font-size: 16px;
  }
  .section-stories{
    padding-block: 8rem;
  }
  .section-stories .c-button{
    margin-top: 3rem;
  }
}

/* =================================================
  カスタムマップマーカー
================================================= */
.hotel-item{
  position: relative;
}
.hotel-item::after{
  transition: transform var(--transition-default);
  opacity: 0;
  transform: scale(0);
  position: absolute;
  top: -2rem;
  right: 0;
  display: block;
  content: '';
  width: 30px;
  height: 40px;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2231%22%20height%3D%2241.416%22%20viewBox%3D%220%200%2031%2041.416%22%3E%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_82%22%20data-name%3D%22%E3%83%91%E3%82%B9%2082%22%20d%3D%22M-620%2C1360h0c-.108-.146-10.848-14.647-13.305-19.129a13.756%2C13.756%2C0%2C0%2C1-1.694-6.6%2C13.842%2C13.842%2C0%2C0%2C1%2C4.393-10.093A15.3%2C15.3%2C0%2C0%2C1-620%2C1320a15.3%2C15.3%2C0%2C0%2C1%2C10.607%2C4.18A13.841%2C13.841%2C0%2C0%2C1-605%2C1334.274a13.582%2C13.582%2C0%2C0%2C1-1.5%2C6.232c-2.394%2C4.69-13.387%2C19.345-13.5%2C19.492Zm0-30.188a5.1%2C5.1%2C0%2C0%2C0-3.122%2C1.078%2C5.019%2C5.019%2C0%2C0%2C0-1.813%2C2.828%2C5.041%2C5.041%2C0%2C0%2C0%2C.621%2C3.834%2C5.042%2C5.042%2C0%2C0%2C0%2C3.148%2C2.276%2C5.078%2C5.078%2C0%2C0%2C0%2C1.174.138%2C5.1%2C5.1%2C0%2C0%2C0%2C3.123-1.077%2C5.021%2C5.021%2C0%2C0%2C0%2C1.814-2.828%2C5.083%2C5.083%2C0%2C0%2C0-3.769-6.111A5.1%2C5.1%2C0%2C0%2C0-620.005%2C1329.811Z%22%20transform%3D%22translate(635.5%20-1319.5)%22%20fill%3D%22%23cb001a%22%20stroke%3D%22%23cb001a%22%20stroke-linecap%3D%22round%22%20stroke-width%3D%221%22%2F%3E%3C%2Fsvg%3E')
}
.hotel-item.is-active::after{
  opacity: 1;
  transform: scale(1);
}
.room-search__map{
  width: 100%;
  height: 100%;
  aspect-ratio: 390/301;
}
#facility-list .pager-common{
  margin-top: 3rem;
}
@media screen and (min-width: 768px) {
  .room-search__map{
    width: 100%;
    height: calc(100vh - var(--height-header-main) - 4rem);
    aspect-ratio: inherit;
    border-radius: 2rem;
  }
  .room-search-map-area{
    position: sticky;
    top: var(--height-header-main);
    overflow: hidden;
    height: calc(100vh - var(--height-header-main) - 4rem);
  }
}
@media screen and (max-width: 767px) {
  .home .room-search__content{
    padding-inline: 0;
  }
  .room-search__hotels{
    order: 2;
    padding-inline: var(--padding-horizontal-global);
    padding-block: 2rem;
    background: #fff;
    position: relative;
    z-index: 2;
  }
  .room-search__map{
    order: 1;
  }
  .room-search-map-area{
    position: sticky;
    top: var(--height-header-primary);
    padding-block: 2rem 0;
    z-index: 1;
  }
}

.custom-marker{
  position: absolute;
  transform: translate(-50%, -100%); 
}
.custom-marker__inner {
  background-color: var(--color-bg-black);
  padding: 5px 10px;
  border-radius: 1.5rem;
  border: 1px solid #fff;
  color: #fff;
  font-size: 13px;
  white-space: nowrap; 
  width: fit-content;
  cursor: pointer;
  transition: all 0.2s ease;
  display: grid;
  grid-template-columns: 20px auto;
  gap: 5px;
  align-items: center;
}
.custom-marker__inner::before{
  content: '';
  width: 20px;
  height: 20px;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20id%3D%22icon%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%3E%20%3Ccircle%20id%3D%22%E6%A5%95%E5%86%86%E5%BD%A2%22%20cx%3D%2210%22%20cy%3D%2210%22%20r%3D%2210%22%20fill%3D%22none%22%2F%3E%20%3Cpath%20id%3D%22neru%22%20d%3D%22M11.458%2C8.486v-1.9H1.61v1.9H.5V.5H1.61V5.474H6.534V1.452a6.113%2C6.113%2C0%2C0%2C1%2C4.924%2C2.176v-2.1h1.11V8.486ZM2.521%2C2.957A1.427%2C1.427%2C0%2C1%2C1%2C3.948%2C4.384%2C1.427%2C1.427%2C0%2C0%2C1%2C2.521%2C2.957Z%22%20transform%3D%22translate(3.466%205.507)%22%20fill%3D%22%23fff%22%20stroke%3D%22%23fff%22%20stroke-width%3D%220.5%22%2F%3E%3C%2Fsvg%3E')
}
.marker-icon-rect{ 
  position: absolute;
  left: 0;
  right: 0;
  bottom: -5px;
  z-index: 1;
  margin-inline: auto;
}
.marker-icon-rect__inner{
  position: relative;
  width: 14px;
  height: 7px;
  display: block;
  margin-inline: auto;
}
.marker-icon-rect__inner::before {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  margin-inline: auto;
  clip-path: polygon(50% 100%, 0 0, 100% 0);
  content: '';
  width: 14px;
  height: 7px;
  background-color: var(--color-bg-black);
  display: block;
  z-index: 2;
}
.marker-icon-rect__inner::after{
  position: absolute;
  left: -1px;
  right: 0;
  top: 1px;
  margin-inline: auto;
  clip-path: polygon(50% 100%, 0 0, 100% 0);
  content: '';
  width: 16px;
  height: 9px;
  background-color: #fff;
  display: block;
  z-index: 1;
}
.custom-marker.is-active .custom-marker__inner,
.custom-marker.is-active .marker-icon-rect__inner::before{
  background-color: var(--color-text-red);
}
.custom-marker:hover {
  transform: translate(-50%, -100%); 
  z-index: 10;
}
.custom-marker.is-active {
  z-index: 10;
}
@media (hover : hover){
  .custom-marker .custom-marker__inner,
  .custom-marker .marker-icon-rect__inner::before{
    transition: background-color var(--transition-default);
  }
  .custom-marker:hover .custom-marker__inner,
  .custom-marker:hover .marker-icon-rect__inner::before{
    background-color: var(--color-text-red);
  }
  .hotel-item a{
    opacity: 1;
  }
  .search-button{
    transition: opacity var(--transition-default);
  }
  .search-button:hover{
    opacity: var(--hover-opacity);
  }
}