@charset "utf-8";

/* ===============================
   Location Gallery
================================ */

.location-gallery {
  position: absolute;
  left: auto;
  right: -50px;
  top: 50%;

  width: min(46vw, 760px);
  height: min(58vh, 560px);

  transform: translateY(-50%);

  overflow: visible;
  isolation: isolate;
}

.location-gallery__viewport,
.location-gallery__track {
  position: relative;
  width: 100%;
  height: 100%;
}

.location-gallery__page {
  position: absolute;
  inset: 0;

  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 18px 22px;

  opacity: 0;
  visibility: hidden;
  transform: scale(1.02);
  pointer-events: none;

  transition:
    opacity 0.5s ease,
    transform 0.65s cubic-bezier(.22, .61, .36, 1),
    visibility 0s linear 0.65s;
}

.location-gallery__page.is-active {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
  pointer-events: auto;

  transition:
    opacity 0.5s ease,
    transform 0.65s cubic-bezier(.22, .61, .36, 1),
    visibility 0s linear 0s;
}

.location-gallery__item {
  position: relative;
  display: grid;
  grid-template-rows: auto auto 1fr;
  align-content: start;

  min-width: 0;
  min-height: 0;

  color: #fff;
  text-align: center;
  cursor: zoom-in;

  opacity: 0;
  filter: saturate(0.96) contrast(1.01);
  transform: translate3d(0, 18px, 0) scale(0.985);

  transition:
    transform 0.7s cubic-bezier(.22, .61, .36, 1),
    opacity 0.55s ease,
    filter 0.35s ease;
}

.location-gallery__page.is-active .location-gallery__item {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

.location-gallery__time {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 98px;
  min-height: 26px;
  margin: 0 auto 8px;
  padding: 0 15px;

  border: 1px solid rgba(255,255,255,0.62);
  border-radius: 999px;

  color: rgba(255,255,255,0.9);
  font-size: 10px;
  line-height: 1;
  letter-spacing: 0.08em;
}

.location-gallery__item h3 {
  min-height: 40px;
  margin: 0 0 9px;

  color: rgba(255,255,255,0.94);
  font-size: clamp(11.5px, 0.82vw, 13.5px);
  line-height: 1.4;
  letter-spacing: 0.07em;
  font-weight: 500;
}

.mintop .location-gallery__item h3 {
  min-height: 30px;
}

.location-gallery__item figure {
  margin: 0;
  width: 100%;
  aspect-ratio: 16 / 7.6;

  border-radius: 6px;
  overflow: hidden;
  background: rgba(255,255,255,0.08);
}

.location-gallery__item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;

  transform: scale(1.01);

  transition:
    transform 0.75s var(--ease-main),
    filter 0.45s ease;
}

.location-gallery__item:hover img {
  transform: scale(1.07);
  filter: contrast(1.05) saturate(1.04);
}

/* ===============================
   Pager
================================ */

.location-gallery__nav {
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;
}

.location-gallery__arrow {
  position: absolute;
  top: 50%;

  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 999px;

  background: rgba(0,0,0,0.28);
  color: #fff;

  transform: translateY(-50%);
  pointer-events: auto;
  cursor: pointer;

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.location-gallery__arrow[disabled] {
  opacity: 0.35;
  cursor: default;
}

.location-gallery__arrow--prev {
  left: 12px;
}

.location-gallery__arrow--next {
  right: 12px;
}

.location-gallery__arrow span {
  position: relative;
  display: block;
  width: 12px;
  height: 12px;
  margin: auto;

  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
}

.location-gallery__arrow--prev span {
  transform: rotate(-135deg);
  left: 2px;
}

.location-gallery__arrow--next span {
  transform: rotate(45deg);
  right: 2px;
}

.location-gallery__counter {
  position: absolute;
  left: 50%;
  bottom: -34px;

  min-width: 62px;
  padding: 6px 11px;
  border-radius: 999px;

  background: rgba(0,0,0,0.28);
  color: rgba(255,255,255,0.88);

  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-align: center;

  transform: translateX(-50%);
  pointer-events: none;

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* ===============================
   Modal
================================ */

.location-gallery-modal {
  position: fixed;
  inset: 0;
  z-index: 9995;

  display: grid;
  place-items: center;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transition:
    opacity 0.32s ease,
    visibility 0s linear 0.32s;
}

.location-gallery-modal.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;

  transition:
    opacity 0.32s ease,
    visibility 0s linear 0s;
}

.location-gallery-modal__backdrop {
  position: absolute;
  inset: 0;

  background: rgba(0,0,0,0.52);

  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}

.location-gallery-modal__inner {
  position: relative;
  z-index: 1;

  width: min(76vw, 980px);
  max-height: 86vh;

  border-radius: 18px;
  overflow: hidden;

  background: rgba(8,8,10,0.78);
  box-shadow: 0 28px 90px rgba(0,0,0,0.38);

  opacity: 0;
  filter: blur(10px);
  transform: translate3d(0, 24px, 0) scale(0.985);

  transition:
    opacity 0.42s var(--ease-main),
    filter 0.42s var(--ease-main),
    transform 0.42s var(--ease-main);
}

.location-gallery-modal.is-open .location-gallery-modal__inner {
  opacity: 1;
  filter: blur(0);
  transform: translate3d(0,0,0) scale(1);
}

.location-gallery-modal__image {
  display: block;
  width: 100%;
  max-height: 64vh;
  object-fit: contain;

  background: rgba(0,0,0,0.28);
}

.location-gallery-modal__caption {
  padding: 22px 26px 24px;
}

.location-gallery-modal__time {
  margin: 0 0 10px;

  color: rgba(255,255,255,0.58);
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.14em;
}

.location-gallery-modal__title {
  margin: 0 0 12px;

  color: rgba(255,255,255,0.96);
  font-size: clamp(16px, 1.45vw, 23px);
  line-height: 1.45;
  letter-spacing: 0.08em;
  font-weight: 400;
}

.location-gallery-modal__text {
  margin: 0;

  color: rgba(255,255,255,0.74);
  font-size: 12px;
  line-height: 1.85;
  letter-spacing: 0.06em;
}

.location-gallery-modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 3;

  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 999px;

  background: rgba(0,0,0,0.34);
  cursor: pointer;
}

.location-gallery-modal__close::before,
.location-gallery-modal__close::after {
  content: "";
  position: absolute;

  left: 13px;
  top: 20px;

  width: 16px;
  height: 1px;

  background: #fff;
}

.location-gallery-modal__close::before {
  transform: rotate(45deg);
}

.location-gallery-modal__close::after {
  transform: rotate(-45deg);
}

@media (prefers-reduced-motion: reduce) {
  .location-gallery__page,
  .location-gallery__item,
  .location-gallery-modal,
  .location-gallery-modal__inner {
    transition: none !important;
    animation: none !important;
  }
}


/* =========================================
   Location Gallery Tabs
========================================= */

.location-gallery-switcher {
  position: absolute;
  left: auto;
  right: -50px;
  top: 50%;

  width: min(46vw, 760px);
  height: min(58vh, 560px);

  transform: translateY(-50%);

  overflow: visible;
  isolation: isolate;
}

.location-gallery-switcher .location-gallery {
  position: absolute !important;
  inset: 0 !important;

  left: auto !important;
  right: auto !important;
  top: auto !important;

  width: 100% !important;
  height: 100% !important;

  transform: none !important;
}

.location-gallery-tabs {
  position: absolute;
  top: -58px;
  left: 50%;

  z-index: 120;

  display: flex;
  gap: 10px;

  transform: translateX(-50%);
}
/* =========================================
   Location Title Click Through
========================================= */

#page-location .page-section_logotitleset,
#page-location .page-section_logotitleset * {
  pointer-events: none !important;
}

.location-gallery-tabs button {
  min-width: 118px;
  height: 30px;

  border: 1px solid rgba(255,255,255,0.24);
  border-radius: 999px;

  background: rgba(0,0,0,0.32);
  color: rgba(255,255,255,0.72);

  font-size: 11px;
  letter-spacing: 0.18em;

  cursor: pointer;

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  transition:
    background 0.35s ease,
    color 0.35s ease,
    border-color 0.35s ease;
}

.location-gallery-tabs button.is-active {
  background: rgba(255,255,255,0.92);
  color: #000;
  border-color: rgba(255,255,255,0.92);
}

.location-gallery--panel {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transition:
    opacity 0.45s ease,
    visibility 0s linear 0.45s;
}

.location-gallery--panel.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;

  transition:
    opacity 0.45s ease,
    visibility 0s linear 0s;
}

/* =========================================
   Location Gallery Tab Click Guard
   非表示タブ側の透明クリックを完全に無効化
========================================= */

.location-gallery--panel:not(.is-active),
.location-gallery--panel:not(.is-active) * {
  pointer-events: none !important;
}

.location-gallery--panel.is-active {
  pointer-events: auto !important;
}

.location-gallery--panel.is-active .location-gallery__nav {
  pointer-events: none !important;
}

.location-gallery--panel.is-active .location-gallery__arrow {
  pointer-events: auto !important;
}


/* ===============================
   Location Gallery in SideInfo
================================ */

.location-gallery.location-gallery--sideinfo {
  position: relative;
  left: auto;
  right: auto;
  top: auto;

  width: 100%;
  height: min(52vh, 500px);

  transform: none;
  overflow: visible;
}

.location-gallery.location-gallery--sideinfo .location-gallery__page {
  gap: 14px 16px;
}

.location-gallery.location-gallery--sideinfo .location-gallery__item h3 {
  font-size: clamp(11px, 0.78vw, 13px);
}

.location-gallery.location-gallery--sideinfo .location-gallery__item figure {
  aspect-ratio: 16 / 8.2;
}
.location-gallery.location-gallery--sideinfo.simple .location-gallery__item figure {
  margin-top: 20px;
  aspect-ratio: 16 / 9;
}

@media (max-width: 1050px) {
  html.is-fallback-scroll .location-gallery.location-gallery--sideinfo {
    width: 100%;
    height: auto;
    min-height: 420px;
  }
}

/* ===============================
   SideInfo Location Gallery Reveal
================================ */

.horizontal-stage__sideinfo-item .location-gallery--sideinfo {
  opacity: 0;
  filter: blur(12px);
  transform: translate3d(0, 24px, 0);
  will-change: opacity, filter, transform;
}

.horizontal-stage__sideinfo-item.is-text-visible .location-gallery--sideinfo,
.horizontal-stage__sideinfo-item.is-active .location-gallery--sideinfo {
  animation: sideInfoLocationGalleryFadeUp 0.9s var(--ease-main) 0.22s forwards;
}

@keyframes sideInfoLocationGalleryFadeUp {
  0% {
    opacity: 0;
    filter: blur(12px);
    transform: translate3d(0, 24px, 0);
  }

  100% {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0);
  }
}

/* =========================================
   Horizontal Stage Guard
========================================= */

.horizontal-stage__sideinfo-item {
  pointer-events: none;
}

.horizontal-stage__sideinfo-item.is-active {
  pointer-events: auto;
}


/* =========================================
   PC Fix: PATTAYA SideInfo Location Gallery Click Guard
========================================= */

@media (min-width: 1051px) {
  #page-pattaya .horizontal-stage__sideinfo,
  #page-pattaya .horizontal-stage__sideinfo * {
    pointer-events: none !important;
  }

  #page-pattaya .horizontal-stage__sideinfo-item:not(.is-active),
  #page-pattaya .horizontal-stage__sideinfo-item:not(.is-active) * {
    pointer-events: none !important;
    cursor: default !important;
  }

  #page-pattaya .horizontal-stage__sideinfo-item.is-active {
    pointer-events: auto !important;
  }

  #page-pattaya .horizontal-stage__sideinfo-item.is-active .location-gallery--sideinfo {
    pointer-events: auto !important;
  }

  #page-pattaya .horizontal-stage__sideinfo-item.is-active .location-gallery__viewport,
  #page-pattaya .horizontal-stage__sideinfo-item.is-active .location-gallery__track,
  #page-pattaya .horizontal-stage__sideinfo-item.is-active .location-gallery__page.is-active,
  #page-pattaya .horizontal-stage__sideinfo-item.is-active .location-gallery__page.is-active .location-gallery__item,
  #page-pattaya .horizontal-stage__sideinfo-item.is-active .location-gallery__page.is-active .location-gallery__item * {
    pointer-events: auto !important;
  }

  #page-pattaya .horizontal-stage__sideinfo-item.is-active .location-gallery__page:not(.is-active),
  #page-pattaya .horizontal-stage__sideinfo-item.is-active .location-gallery__page:not(.is-active) * {
    pointer-events: none !important;
    cursor: default !important;
  }

  #page-pattaya .horizontal-stage__sideinfo-item.is-active .location-gallery__nav {
    pointer-events: none !important;
  }

  #page-pattaya .horizontal-stage__sideinfo-item.is-active .location-gallery__arrow {
    pointer-events: auto !important;
  }
}

/* =========================================
   PC Fix: ALPINE SideInfo Location Gallery Click Guard
========================================= */

@media (min-width: 1051px) {
  #page-alpine .horizontal-stage__sideinfo,
  #page-alpine .horizontal-stage__sideinfo * {
    pointer-events: none !important;
  }

  #page-alpine .horizontal-stage__sideinfo-item:not(.is-active),
  #page-alpine .horizontal-stage__sideinfo-item:not(.is-active) * {
    pointer-events: none !important;
    cursor: default !important;
  }

  #page-alpine .horizontal-stage__sideinfo-item.is-active {
    pointer-events: auto !important;
  }

  #page-alpine .horizontal-stage__sideinfo-item.is-active .location-gallery--sideinfo {
    pointer-events: auto !important;
  }

  #page-alpine .horizontal-stage__sideinfo-item.is-active .location-gallery__viewport,
  #page-alpine .horizontal-stage__sideinfo-item.is-active .location-gallery__track,
  #page-alpine .horizontal-stage__sideinfo-item.is-active .location-gallery__page.is-active,
  #page-alpine .horizontal-stage__sideinfo-item.is-active .location-gallery__page.is-active .location-gallery__item,
  #page-alpine .horizontal-stage__sideinfo-item.is-active .location-gallery__page.is-active .location-gallery__item * {
    pointer-events: auto !important;
  }

  #page-alpine .horizontal-stage__sideinfo-item.is-active .location-gallery__page:not(.is-active),
  #page-alpine .horizontal-stage__sideinfo-item.is-active .location-gallery__page:not(.is-active) * {
    pointer-events: none !important;
    cursor: default !important;
  }

  #page-alpine .horizontal-stage__sideinfo-item.is-active .location-gallery__nav {
    pointer-events: none !important;
  }

  #page-alpine .horizontal-stage__sideinfo-item.is-active .location-gallery__arrow {
    pointer-events: auto !important;
  }
}

/* =========================================
   LTGR Map Panel
========================================= */

.ltgr-map-panel {
  position: relative;

  width: min(55vw, 850px);
  height: min(65vh, 600px);

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

  opacity: 0;
  transform: translateY(24px);

  transition:
    opacity .9s ease,
    transform .9s ease;
    
  left: -250px;
}

/* 表示中 */

.horizontal-stage__sideinfo-item.is-active .ltgr-map-panel {
  opacity: 1;
  transform: translateY(0);
}

.ltgr-map-panel img {
  display: block;

  width: 100%;
  height: 100%;
  
  opacity: 0.7;

  object-fit: contain;
}

/* =========================================
   LTGR CLICKABLE MAP
========================================= */

.ltgr-map-panel{
  position:relative;
}

.ltgr-map-panel img{
  display:block;
  width:100%;
  height:auto;
}

/*
  調整用
  完成後は透明にする
*/

.ltgr-map-hotspot{
  position:absolute;
  z-index:50;

  cursor:pointer;
/*
  background:rgba(0,0,0,.5);
  border:1px solid rgba(255,255,255,.8);
*/

  transition:.3s ease;
}
/*
.ltgr-map-hotspot:hover{
  background:rgba(0,0,0,.65);
}
*/

/*
  Sauna
  ※後で微調整
*/

/* 左列 */

.hotspot-dormitory{
  left:8%;
  top:31%;
  width:24%;
  height:8%;
}

.hotspot-terrace{
  left:8%;
  top:42%;
  width:24%;
  height:5%;
}

.hotspot-simulation{
  left:8%;
  top:48%;
  width:24%;
  height:8%;
}

.hotspot-green{
  left:8%;
  top:58%;
  width:24%;
  height:15%;
}

.hotspot-bunker{
  left:8%;
  top:74%;
  width:24%;
  height:6%;
}

.hotspot-iron{
  left:8%;
  top:80%;
  width:24%;
  height:8%;
}


/* 右列 */

.hotspot-looftop{
  left:69%;
  top:12%;
  width:22%;
  height:8%;
}

.hotspot-restaurant{
  left:67%;
  top:21%;
  width:25%;
  height:8%;
}

.hotspot-skygym{
  left:69%;
  top:31%;
  width:25%;
  height:10%;
}

.hotspot-shop{
  left:73%;
  top:43%;
  width:18%;
  height:8%;
}

/* ← サウナは既存位置を基準 */

.hotspot-sauna{
  left:78%;
  top:58%;
  width:18%;
  height:10%;
}

.hotspot-discobar{
  left:68%;
  top:75%;
  width:22%;
  height:10%;
}


/* =========================================
   LTGR Hotspot Click Enable
   PATTAYA click guard override
========================================= */

@media (min-width: 1051px) {
  #page-pattaya .horizontal-stage__sideinfo-item.is-active .ltgr-map-panel,
  #page-pattaya .horizontal-stage__sideinfo-item.is-active .ltgr-map-panel *,
  #page-pattaya .horizontal-stage__sideinfo-item.is-active .ltgr-map-hotspot {
    pointer-events: auto !important;
  }
}