@charset "UTF-8";
/*
 * customize.css
 * Tailwind非依存のカスタマイズ用スタイルシート
 * このファイルはビルドパイプラインを通さず、直接読み込まれます。
 */

/* スプラッシュ初期表示（JSバンドル読み込み前にちらつきを防止） */
.p-splash {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  background-color: #fff;
}
.p-splash__logo {
  width: min(60%, 500px);
  opacity: 0;
}
.is-splash {
  overflow: hidden;
  touch-action: none;
  overscroll-behavior: none;
}

/* --------------------------
   GLightbox overrides
   -------------------------- */
.glightbox-clean .gslide-media.gslide-video {
  margin-inline: auto;
  max-width: 96vw !important;
}
@media (min-width: 1025px) {
  .glightbox-clean .gslide-media.gslide-video {
    max-width: 960px !important;
  }
}
.glightbox-clean .goverlay {
  background-color: rgba(252, 165, 190, 0.9) !important;
}
.glightbox-clean .gclose {
  width: 35px !important;
  height: 35px !important;
  background: url("/asset/img/icon-movie-close.png") no-repeat center / contain !important;
  opacity: 1 !important;
  border-radius: 0;
  right: 0;
  top: calc(50% - 96vw * 9 / 16 / 2 - 20px) !important;
}
@media (min-width: 1025px) {
  .glightbox-clean .gclose {
    width: 70px !important;
    height: 70px !important;
    top: calc(50% - min(960px, 100vw) * 9 / 16 / 2 - 110px) !important;
    right: calc(50% - min(960px, 100vw) / 2 - 110px) !important;
  }
}
.glightbox-clean .gclose svg {
  display: none;
}

/* --------------------------
   Swiper overrides
   -------------------------- */
.p-performance-slide .swiper .swiper-slide {
  transform: scale(0.87);
  transition:
    transform 0.3s ease,
    opacity 0.3s ease;
  opacity: 0;
}
.p-performance-slide .swiper .swiper-slide-visible {
  opacity: 1;
}
.p-performance-slide .swiper .swiper-slide-active {
  transform: scale(1);
  z-index: 1;
  transform-origin: center;
}

/* Dots (pagination) */
.p-performance-slide .swiper-pagination {
  display: flex;
  justify-content: center;
  gap: 8px;
  --swiper-pagination-bottom: -1vw;
}
@media (min-width: 1025px) {
  .p-performance-slide .swiper-pagination {
    --swiper-pagination-bottom: 0;
    gap: 16px;
  }
}
.p-performance-slide .swiper-pagination-bullet {
  border-radius: 100%;
  background-color: #fff;
  opacity: 1;
  cursor: pointer;
  width: 8px;
  height: 8px;
}
@media (min-width: 1025px) {
  .p-performance-slide .swiper-pagination-bullet {
    width: 18px;
    height: 18px;
  }
}
.p-performance-slide .swiper-pagination-bullet-active {
  background-color: #ed79ac;
}

/* .swiperのoverflow:hiddenを解除し矢印のはみ出しを許可
   表示3枚以外はopacityで非表示にしているためoverflow:visibleで問題なし */
.p-performance-slide_inner.swiper {
  overflow: visible !important;
}

/* Arrows (.p-performance-slide直下に配置、!importantでSwiper上書き) */
.p-performance-slide > .swiper-button-prev,
.p-performance-slide > .swiper-button-next {
  position: absolute !important;
  top: 30% !important;
  width: 15px !important;
  height: 62px !important;
  z-index: 10 !important;
  cursor: pointer;
  border: none;
  padding: 0;
}
@media (min-width: 1025px) {
  .p-performance-slide > .swiper-button-prev,
  .p-performance-slide > .swiper-button-next {
    margin-top: -31px !important;
    top: 43% !important;
    width: 44px !important;
    height: 62px !important;
  }
}
.p-performance-slide > .swiper-button-prev::after,
.p-performance-slide > .swiper-button-next::after {
  display: none !important;
}
.p-performance-slide > .swiper-button-prev {
  left: clamp(8px, calc(50% - 870px), 90px) !important;
  right: auto !important;
  background: url(/asset/img/icon-arrow--l.png) no-repeat center / contain !important;
}
.p-performance-slide > .swiper-button-next {
  right: clamp(8px, calc(50% - 870px), 90px) !important;
  left: auto !important;
  background: url(/asset/img/icon-arrow--r.png) no-repeat center / contain !important;
}