@charset "utf-8";

@media screen and (min-width: 961px) {
  #page, .main {
    overflow: revert;
  }

  .sidebarBox--sp {
    display: none;
  }
}

/* gallery
---------------------------------------------- */
.gallery {
  padding-block: clamp(50px, 0.83rem + 9.78vw, 160px) clamp(80px, 3.54rem + 6.22vw, 150px);
  position: relative;
  z-index: 0;
}
.gallery::before {
  content: '';
  width: 100%;
  height: 65%;
  background: url(../../img/common/bg_gradient.png) repeat-x top left / auto 1000px;
  position: absolute;
  top: -12%;
  left: 0;
  z-index: -1;
}

.galleryIntro {
  margin-bottom: 200px;
}
.galleryIntro__text {
  font-size: clamp(16px, 0.34rem + 1.37vw, 26px);
  letter-spacing: 0.01em;
  line-height: 2;
  text-align: center;
}

.gallerySlider {
  position: relative;
  z-index: 0;
}
.gallerySlider .swiper-container {
  max-width: 1000px;
}

.gallerySlider__title {
  color: #fff;
  font-size: clamp(20px, 0.2rem + 2.19vw, 36px);
  text-shadow: 0 0 5px rgb(0 0 0 / .7);
  position: absolute;
  right: 3%;
  bottom: 3%;
  z-index: 1;
}

.gallerySlider .swiper-slide {
  width: 840px;
  opacity: .6;
  transition: .4s;
}
.gallerySlider .swiper-slide-active {
  opacity: 1;
  transform: scale(1.19047); /* 1000px */
}

.gallerySliderControl {
  width: 1000px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}

.gallerySlider .swiper-button-prev,
.gallerySlider .swiper-button-next {
  aspect-ratio: 1;
  box-shadow: 1px 1px 3px rgb(0 0 0 / .3);
}
.gallerySlider .swiper-button-prev {
  left: -20px;
}
.gallerySlider .swiper-button-next {
  right: -20px;
}

.thumbSlider {
  max-width: 1000px;
  margin-top: 100px;
}
.thumbSlider .swiper-slide {
  width: calc(196 / 1000 * 100%);
}

.thumb__btn {
  display: block;
  transition: .4s;
  position: relative;
  z-index: 0;
}
.thumb__btn::before {
  content: '';
  width: 100%;
  height: 100%;
  background-color: rgb(0 0 0 / .6);
  transition: .4s;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}
.thumb__cap {
  width: 100%;
  color: #fff;
  font-size: clamp(9px, 0.46rem + 0.44vw, 14px);
  transition: .4s;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}

.swiper-slide-thumb-active .thumb__btn::before {
  height: 0;
}
.swiper-slide-thumb-active .thumb__cap {
  opacity: 0;
}

@media (hover: hover) and (pointer: fine) {
  .thumb__btn:hover {
    opacity: .8;
  }
}

@media screen and (max-width: 1200px) {
  .gallerySlider .swiper-slide {
    width: 100%;
  }
  .gallerySlider .swiper-slide-active {
    transform: scale(1);
  }
  .gallerySlider .swiper-button-next {
    right: calc(-20 / 1000 * 100%);
  }
  .gallerySlider .swiper-button-prev {
    left: calc(-20 / 1000 * 100%);
  }

  .thumbSlider {
    margin-top: 30px;
  }
}

@media screen and (min-width: 769px) {
  .thumbSlider .swiper-wrapper {
    flex-wrap: wrap;
  }
  .thumbSlider .swiper-wrapper {
    gap: 5px calc(5 / 1000 * 100%);
  }

  .thumbSlider .thumbSliderControl {
    display: none;
  }
}

@media screen and (max-width: 768px) {
  .galleryIntro {
    margin-bottom: 60px;
  }
  .gallerySlider {
    overflow: hidden;
  }
  .gallerySlider .swiper-container {
    width: 100%;
  }

  .gallerySlider .swiper-button-prev,
  .gallerySlider .swiper-button-next {
    display: none;
  }

  .thumbSlider .swiper-container {
    width: 114px;
  }
  .thumbSlider .swiper-slide {
    width: 114px;
  }

  .thumbSliderControl {
    display: flex;
    align-items: center;
    column-gap: 20px;
    margin-top: 20px;
  }
  .thumbSliderControl .swiper-pagination {
    width: auto;
    color: #ccc;
    font-family: "EB Garamond", serif !important;
    font-size: 14px;
    letter-spacing: 0.05em;
    position: static;
  }
  .thumbSliderControl .swiper-pagination-current {
    color: #333;
  }
  .thumbSliderNavBox {
    display: flex;
    align-items: center;
    column-gap: 20px;
  }
  .thumbSliderNavBox .swiper-button-prev,
  .thumbSliderNavBox .swiper-button-next {
    position: static;
    transform: translateY(0);
    box-shadow: none;
    border: 1px solid #ccc;
    background: none;
  }
}

/* vrArea
---------------------------------------------- */
.vrArea {
  padding-block: clamp(50px, 0.83rem + 9.78vw, 160px) clamp(80px, 3.54rem + 6.22vw, 150px);
}

.vrArea__title {
  display: flex;
  align-items: center;
  column-gap: 1em;
  max-width: 1000px;
  font-size: 17px;
  letter-spacing: 0.05em;
  white-space: nowrap;
}
.vrArea__title::after {
  content: '';
  display: block;
  width: 100%;
  height: 1px;
  background-color: #ccc;
}

.vrBox {
  margin-top: 40px;
}
.vrBox__type {
  max-width: 1000px;
  font-size: 17px;
  letter-spacing: 0.05em;
}
.vrBox__type .em {
  font-size: calc(30 / 17 * 100%);
}

.vrImg {
  max-width: 1000px;
}
.vrImg iframe {
  width: 100%;
}

@media screen and (max-width: 768px) {
  .vrImg {
    width: 100%;
  }
  .vrImg iframe {
    height: 230px;
  }
}