@charset "utf-8";

.fp-float {
  position: absolute;
  pointer-events: none;
  z-index: 5;
  will-change: transform, opacity;
  transform:
    translate3d(
      calc(var(--fp-float-current-x, 0px)),
      calc(var(--fp-float-current-y, 0px)),
      0
    )
    scale(var(--fp-float-current-scale, 1));
  transform-origin: center center;
}

.fp-float > img,
.fp-float > picture,
.fp-float > video,
.fp-float > svg {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
}

/* サイズ */
.fp-float--size-s { width: min(18vw, 220px); }
.fp-float--size-m { width: min(28vw, 400px); }
.fp-float--size-l { width: min(34vw, 520px); }
.fp-float--size-xl { width: min(42vw, 620px); }

/* 横位置 */
.fp-float--left { left: 10vw; }
.fp-float--right { right: 10vw; }
.fp-float--center { left: 50%; translate: -50% 0; }

/* 上位置 */
.fp-float--top-1 { top: 6%; }
.fp-float--top-2 { top: 12%; }
.fp-float--top-3 { top: 18%; }

/* 横縦セット位置 */
.fp-float--right--center { right: 10vw; top: 50%; translate: 0 -50%; }
.fp-float--right--bottom { right: 10vw; bottom: 40px; }

/* 下はみ出し */
.fp-float--bottom-over-1 { bottom: -20svh; }
.fp-float--bottom-over-2 { bottom: -30svh; }
.fp-float--bottom-over-3 { bottom: -60svh; }

/* 少し画面外にはみ出す位置 */
.fp-float--edge-right-1 { right: -5%; }
.fp-float--edge-right-2 { right: -10%; }
.fp-float--edge-left-1 { left: -5%; }
.fp-float--edge-left-2 { left: -10%; }

/* 比率 */
.fp-float--tall {
  aspect-ratio: 3 / 7;
}

.fp-float--tall-- {
  aspect-ratio: 2 / 3;
}

.fp-float--wide {
  aspect-ratio: 7 / 4;
}

.fp-float--square {
  aspect-ratio: 1 / 1;
}

.fp-float--fit > img,
.fp-float--fit > video,
.fp-float--tall > img,
.fp-float--wide > img,
.fp-float--square > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fp-float.is-float-hidden {
  opacity: 0;
}

html.is-fallback-scroll .fp-float {
  transform: none !important;
  opacity: 1 !important;
}

/* 個別 */
/*
.fp-float--conceptlogo {
  width: min(25vw, 350px);
  top: 10%;
  left: 50%;
  transform: translateX(-55%);
}
*/
.fp-float--conceptlogo {
  width: min(16vw, 260px);
  top: 60px;
  left: 60px;
}
.fp-float--conceptmovie {
  width: min(40vw, 620px);
  aspect-ratio: 20 / 9;
  bottom: 130px;
  right: 5vw;
}
.fp-float--golf {
  width: min(50vw, 600px);
  aspect-ratio: 4 / 3;
}
.fp-float--room {
  width: min(50vw, 500px);
  aspect-ratio: 1 / 1;
}
.fp-float--video {
  width: min(50vw, 600px);
  aspect-ratio: 16 / 9;
}

.fp-float.horizontal-set.fp-float--video-- > video {
  position: absolute;
  left: 50%;
  top: 50%;
  inset: auto;

  width: 100%;
  height: auto;              /* ← これが重要 */

  aspect-ratio: 16 / 9;

  transform: translate(-50%, -50%);
  object-fit: cover;
}



.fp-float.horizontal-set {
  overflow: hidden;
}

.fp-float.horizontal-set > img,
.fp-float.horizontal-set > video,
.fp-float.horizontal-set > picture {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate3d(0, 0, 0);
  will-change: transform, opacity;
}

.fp-float.horizontal-set > .is-active {
  opacity: 1;
  visibility: visible;
  z-index: 2;
}

.fp-float.horizontal-set > .is-entering-from-right {
  visibility: visible;
  opacity: 0;
  transform: translate3d(34px, 0, 0);
  z-index: 3;
  animation: fpFloatEnterFromRight 0.82s var(--ease-main) forwards;
  animation-delay: 0.08s;
}

.fp-float.horizontal-set > .is-leaving-to-right {
  visibility: visible;
  opacity: 1;
  transform: translate3d(0, 0, 0);
  z-index: 2;
  animation: fpFloatLeaveToRight 0.62s var(--ease-main) forwards;
}

.fp-float.horizontal-set > .is-entering-from-left {
  visibility: visible;
  opacity: 0;
  transform: translate3d(-34px, 0, 0);
  z-index: 3;
  animation: fpFloatEnterFromLeft 0.82s var(--ease-main) forwards;
  animation-delay: 0.08s;
}

.fp-float.horizontal-set > .is-leaving-to-left {
  visibility: visible;
  opacity: 1;
  transform: translate3d(0, 0, 0);
  z-index: 2;
  animation: fpFloatLeaveToLeft 0.62s var(--ease-main) forwards;
}

@keyframes fpFloatEnterFromRight {
  0% {
    opacity: 0;
    transform: translate3d(34px, 0, 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fpFloatLeaveToRight {
  0% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
  100% {
    opacity: 0;
    transform: translate3d(54px, 0, 0);
  }
}

@keyframes fpFloatEnterFromLeft {
  0% {
    opacity: 0;
    transform: translate3d(-34px, 0, 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fpFloatLeaveToLeft {
  0% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
  100% {
    opacity: 0;
    transform: translate3d(-54px, 0, 0);
  }
}

.fp-float.horizontal-set > video {
  object-fit: cover;
}

.fp-float.firstviewmovie {
  pointer-events: auto !important;
  z-index: 30;
}

.fp-float.firstviewmovie video {
  pointer-events: auto !important;
}

.page-section__overlay.gradation {
  pointer-events: none;
}

/* 手動再生動画だけクリック操作を許可 */
.fp-float--video {
  pointer-events: auto !important;
  z-index: 30;
}

.fp-float--video video,
.fp-float.horizontal-set.fp-float--video > video.is-active {
  pointer-events: auto !important;
}


/* 横幅100%固定で、中のvideoだけ16:9 */
.fp-float.horizontal-set.fp-float--video-- > video {
  inset: auto !important;
  left: 0 !important;
  top: 50% !important;

  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 9;

  transform: translateY(-50%) !important;
  object-fit: cover;
}

/* =========================================
   View Max Image
========================================= */

@media (min-width: 1051px) {

  .fp-float.horizontal-set:has(.viewmax) {
    overflow: visible !important;
  }

  .fp-float.horizontal-set > img.viewmax,
  .fp-float.horizontal-set > video.viewmax {
    width: 132% !important;
    height: auto !important;

    max-width: none !important;
    max-height: none !important;

    left: 0 !important;
    right: auto !important;

    top: 50% !important;
    bottom: auto !important;

    inset: auto !important;

    object-fit: contain !important;
    transform: translateX(-120px) !important;
  }

}

/* =========================================
   View Min Image
   ※ horizontal-set animation と競合しない版
========================================= */

@media (min-width: 1051px) {

  .fp-float.horizontal-set > img.viewmin,
  .fp-float.horizontal-set > video.viewmin {
    width: 100% !important;
    height: 100% !important;

    max-width: none !important;
    max-height: none !important;

    object-fit: contain !important;
    object-position: center center !important;

    transform-origin: center center !important;

    scale: 0.82 !important;
  }

}

/* =========================================
   View Map Image
========================================= */

@media (min-width: 1051px) {

  .fp-float.horizontal-set:has(.viewmap) {
    overflow: visible !important;
  }

  .fp-float.horizontal-set > img.viewmap,
  .fp-float.horizontal-set > video.viewmap {
    width: 105% !important;
    height: auto !important;

    max-width: none !important;
    max-height: none !important;

    left: 0 !important;
    right: auto !important;

    top: 50% !important;
    bottom: auto !important;

    inset: auto !important;

    object-fit: contain !important;
    transform: translate(-50px,50px) !important;
  }

}