@charset "UTF-8";

/* ScrollSmoother */
#smooth-wrapper {
  overflow: hidden;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0; left: 0;
}

@media (max-width: 767px) {
  #smooth-wrapper {
    position: relative;
    overflow: visible;
    height: auto;
background-color: #fff;
  }
}

#smooth-content {
  overflow: visible;
  width: 100%;
}

#hs-outer {}

#hs-inner {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: visible;
}

#bg-layer {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.bg-slot {
  position: absolute;
  inset: 0;
overflow: hidden;
}
#bg-0 { z-index: 5; }
#bg-1 { z-index: 4; }
#bg-2 { z-index: 3; }
#bg-3 { z-index: 2; }

.bg-slot video,
.bg-slot img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

#bg-0::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(181, 222, 226, 0.5);
  mix-blend-mode: multiply;
  z-index: 1;
  pointer-events: none;
}

/* PC: sp画像を非表示 */
.bg-slot img.sp,
#video-overlay2 img.sp {
  display: none;
}

/* SP: pc画像を非表示 */
@media (max-width: 767px) {
  .bg-slot img.pc,
  #video-overlay2 img.pc {
    display: none;
  }
  .bg-slot img.sp,
  #video-overlay2 img.sp {
    display: block;
  }
}

#content-layer {
  position: absolute;
  inset: 0;
  z-index: 10;
}

#p1-content {
  position: absolute;
  top: 0;
  left: 0;
  width: auto;
  height: 100%;
  opacity: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-top: 120px;
}

#p1-content > img {
  height: 100%;       /* 高さ100%に合わせる */
  width: auto;        /* アスペクト比を保って幅が伸縮 */
}

#p1-content .scroll-hint {
  position: absolute; /* imgの上に重ねる場合 */
  bottom: 25%;
  left: 0;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  color: #fff;
  font-size: 10px;
  background: linear-gradient(135deg,rgba(119, 191, 215, 1) 51%, rgba(124, 209, 174, 1) 100%);
  padding: 0 10px;
}

#p1-content .scroll-line {
  width: 48px;
  height: 1px;
  background: #777;
  position: relative;
  overflow: hidden;
}

#p1-content .scroll-line::after {
  content: '';
  position: absolute; top: 0; left: -100%;
  width: 100%; height: 100%;
  background: #ffffff;
  animation: lineScan 2s ease-in-out infinite;
}
@keyframes lineScan {
  0%   { left: -100%; }
  50%  { left: 0%; }
  100% { left: 100%; }
}

.panel-inner {
  position: absolute;
  top: 0; left: 0;
  width: 100vw;
  height: 100%;
  display: flex;
  align-items: center;
  transform: translateX(110vw);
  background: linear-gradient(135deg,rgba(119, 191, 215, 1) 51%, rgba(124, 209, 174, 1) 100%);
  z-index: 11;
}

.panel-inner .text-block {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  position: relative;
}

.p2_img {
  position: absolute;
  bottom: 20px;
  left: 0;
  width: 100%;
}

.p3_img {
  position: absolute;
  bottom: 20px;
  left: 0;
  width: 100%;
}

.p4_img {
  position: absolute;
  bottom: 20px;
  left: 0;
  width: 100%;
}

.panel-inner .text-block .col-left {
  width: 30%;
}

.panel-inner .text-block .col-right {
  width: 65%;
  position: relative;
}

.col-left img,
.col-right img{
  opacity: 0;
  transition: opacity 1s ease;
}

.mv_active {
  opacity: 1 !important;
}



.mv_imgleft {
transition-duration: 1s;
transition-delay: 0.2s;
transition-timing-function: ease-out;
transition-property: clip-path;
clip-path: inset(0 100% 0 0);
transform: translateZ(0);
backface-visibility: hidden;
}

.mv_imgright {
transition-duration: 0.5s;
transition-delay: 0s;
transition-timing-function: ease-out;
transition-property: clip-path;
clip-path: inset(0 0 0 100%);
transform: translateZ(0);
backface-visibility: hidden;
}

.mv_imgleft.mv_active,
.mv_imgright.mv_active {
clip-path: inset(0 0 0 0);
}




/* video-overlay */
#video-overlay {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  pointer-events: none;
  transition: opacity 0.8s ease;
}

.vo-title {
  width: 100%;
  opacity: 0;
}


#video-overlay2 {
width: 80%;
  position: fixed;
  top: 130px;
  right: 0;
  right: 0;
  z-index: 10;
  opacity: 0;
}

.vo-title2 {
  width: 100%;
}



#video-overlay3 {
  width: 35%;
  position: fixed;
  top: 200px;
  right: 50px;
  z-index: 10;
  opacity: 0;
}
.vo-title3 {
  width: 100%;
}

/* progress-bar */
#progress-bar {
  position: absolute;
  bottom: 0; left: 0;
  height: 5px; width: 0%;
  background: #0f4357;
  z-index: 100; opacity: 0.7; pointer-events: none;
}

@media (max-width: 767px) {
  #progress-bar {
    position: fixed;
  bottom: 50px; left: 0;
  }
}

/* sp-spacer: PCでは非表示 */
#sp-spacer { display: none; }

/* =====================
   After-scroll
===================== */
#after-scroll { position: relative; z-index: 10; background-color: #fff; top: -2px; }
.after-section { min-height: 100vh; display: flex; align-items: center; justify-content: center; }


/* =====================
   SP (〜767px)
===================== */
@media (max-width: 767px) {

  #bg-layer {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    z-index: 0;
    overflow: hidden;
  }

  #content-layer {
    position: relative;
    inset: auto;
    top: auto;
    left: auto;
    width: 100vw;
    height: auto;
    display: flex;
    flex-direction: column;
    z-index: 2;
  }

  #hs-inner {
    position: relative;
    width: 100vw;
    height: auto;
    overflow: visible;
    z-index: 1;
  }

#video-overlay {
  bottom: 70px;
z-index: 1;
}

#video-overlay2 {
width: 80%;
  top: 70px;
z-index: 2;
}

  #sp-spacer {
    display: block;
    height: 100vh;
    width: 100%;
  }

  #p1-content {
    position: relative;
    width: 100%;
    height: 100vh;
    opacity: 0;
    z-index: 2;
    justify-content: center;
    padding: 0;
  }

#p1-content > img {
  height: auto;       /* 高さ100%に合わせる */
  width: 100%;        /* アスペクト比を保って幅が伸縮 */
}

  .panel-inner {
    position: relative;
    width: 100%;
    height: auto;
    opacity: 0;
    z-index: 2;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    margin-top: 100vh;
  }

  /* 最終パネルの下余白 */
  #p4-inner { margin-bottom: 100vh; }

  .panel-inner .text-block {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap-reverse;
  height: auto;
padding: 40px 0 80px 0;
}

#p2-inner .text-block {
  flex-wrap: wrap;
}


  .panel-inner .text-block .col-left {
width: 70%;
margin: 20px 30% 0 0;
}
  .panel-inner .text-block .col-right {
width: 95%;
margin: 0 0 20px 5%;
}


#p2-inner .text-block .col-left {
width: 70%;
margin: 20px 0 0 30%;
}

#p2-inner .text-block .col-right {
width: 95%;
margin: 0 5% 20px 0;
}

#video-overlay3 {
  width: 70%;
  position: fixed;
  top: 150px;
  right: 20px;
  z-index: 1;
  opacity: 0;
}


} /* end @media (max-width: 767px) */