/* ===============================================
   THE SPA - Parallax Animation CSS
   =============================================== */

/* 基本のパララックスラッパー */
.parallax-wrapper {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* パララックス画像の基本設定 */
.parallax-wrapper img {
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ===============================================
   CONCEPTセクション（PC）用パララックス
   =============================================== */
.concept-parallax-wrapper-1 {
  position: absolute;
  top: 0;
  left: calc(100vw * 536 / 1400);
  width: calc(100vw * 864 / 1400);
  height: calc(100vw * 789 / 1400);
  overflow: hidden;
}

.concept-parallax-wrapper-2 {
  position: absolute;
  top: calc(100vw * 789 / 1400);
  left: 0;
  width: calc(100vw * 728 / 1400);
  height: calc(100vw * 680 / 1400);
  overflow: hidden;
}

.concept-parallax-wrapper-3 {
  position: absolute;
  bottom: 0;
  right: 0;
  width: calc(100vw * 536 / 1400);
  height: calc(100vw * 304 / 1400);
  overflow: hidden;
}

.concept-parallax-wrapper .concept_img {
  position: relative !important;
  top: 0 !important;
  left: 0 !important;
  right: auto !important;
  bottom: auto !important;
  width: 100%;
  height: 100%;
  min-height: 110%;
  object-fit: cover;
}

/* ===============================================
   CONCEPTセクション（SP）用パララックス
   =============================================== */
@media (max-width: 768px) {
  .concept-sp-parallax-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  .concept-sp-parallax-wrapper img {
    width: 100%;
    height: 100%;
    min-height: 110%;
    object-fit: cover;
  }
}

/* ===============================================
   MENUセクション用パララックス
   =============================================== */
.menu-parallax-wrapper-1 {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(100vw * 650 / 1400);
  height: calc(100vw * 595 / 1400);
  overflow: hidden;
}

.menu-parallax-wrapper-2 {
  position: absolute;
  top: calc(100vw * -250 / 1400);
  right: calc(100vw * -125 / 1400);
  width: calc(100vw * 424 / 1400);
  height: calc(100vw * 282 / 1400);
  overflow: hidden;
}

.menu-parallax-wrapper .menu_img {
  position: relative !important;
  top: 0 !important;
  left: 0 !important;
  right: auto !important;
  bottom: auto !important;
  width: 100%;
  height: 100%;
  min-height: 110%;
  object-fit: cover;
}

@media (max-width: 768px) {
  .menu-parallax-wrapper-1 {
    position: relative;
    width: calc(100vw * 295 / 375);
    height: calc(100vw * 200 / 375);
    margin: 0 auto;
    overflow: hidden;
  }

  .menu-parallax-wrapper-1 .menu_img_1 {
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    margin: 0 !important;
    width: 100%;
    height: 100%;
    min-height: 110%;
  }

  .menu-parallax-wrapper-2 {
    position: absolute;
    top: calc(100vw * -958 / 375);
    right: 0;
    width: calc(100vw * 216 / 375);
    height: calc(100vw * 144 / 375);
    overflow: hidden;
    z-index: 1;
  }

  .menu-parallax-wrapper-2 .menu_img_2 {
    position: relative !important;
    top: 0 !important;
    right: auto !important;
    width: 100%;
    height: 100%;
    min-height: 110%;
  }
}

/* ===============================================
   RESERVATIONセクション用パララックス
   =============================================== */
.reservation_background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.reservation-parallax-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.reservation-parallax-wrapper .reservation_bg_image {
  position: relative !important;
  top: 0 !important;
  left: 0 !important;
  width: 100%;
  height: 100%;
  min-height: 110%;
  object-fit: cover;
}

/* ===============================================
   既存のjs-parallax-container（Our Style, Room, Recruit）
   =============================================== */
.js-parallax-container {
  overflow: hidden !important;
  position: relative;
}

.js-parallax-container img {
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.our_style_image.js-parallax-container img,
.room_image.js-parallax-container img,
.recruit_image.js-parallax-container img {
  min-height: 110%;
  object-position: center;
}

/* ===============================================
   パフォーマンス最適化
   =============================================== */
@media (prefers-reduced-motion: reduce) {
  .parallax-wrapper img,
  .js-parallax-container img {
    transform: none !important;
  }
}