@charset "utf-8";
/* CSS Document */

/* common
	============================================================== */

/* .js-mask_rise__gsap */
.js-mask_rise__gsap {
  transform: translate3d(0, 40px, 0);
  clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
}

/* .js-gsap__fade */
.js-gsap__fade {
  opacity: 0;
}

/* .js-gsap__imgSlide */
.js-gsap__imgSlide {
  position: relative;
  display: block;
  overflow: hidden;
  opacity:0;
  transition: oapcity 0.5s;
}
body.js-isLoaded .js-gsap__imgSlide{
  opacity: 1;
}

.js-gsap__imgSlide:before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 10;
  display: block;
  background: #2B5BA3;
  opacity: 0.85;
  pointer-events: none;
  transform-origin: right;
  transition: all 0.4s ease-out;
}
body:not(.js-isFirefox) .js-gsap__imgSlide:not(.is-active):before {
  transform: translateX(-100%);
}
body.js-isFirefox .js-gsap__imgSlide:not(.is-active):before {
  opacity: 0;
  transform: translateX(0);
}
.js-gsap__imgSlide.is-active:before {
  animation: gsapImgSlide 1s cubic-bezier(0.43, 0.05, 0.17, 1) 0.25s;
  animation-fill-mode: forwards;
  transform: translateX(0);
}
body.js-isFirefox .js-gsap__imgSlide.is-active:before {
  opacity: 0.85;
}

body.js-isFirefox .js-gsap__imgSlide:before {
  opacity: 0;
}
body.js-isFirefox .js-gsap__imgSlide.is-active:before {
  opacity: 0.85;
}

.js-gsap__imgSlide img {
  clip-path: inset(0 100% 0 0);
  opacity: 0;
  transition:opacity 0.8s, clip-path 0.8s cubic-bezier(0.43, 0.05, 0.17, 1);
}
.js-gsap__imgSlide.is-active img {
  clip-path: inset(0 0 0 0);
  opacity: 1;
}


@keyframes gsapImgSlide {
  0% {
    transform: translateX(0);
  }
  99.9% {
    transform: translateX(100%);
    opacity: 0.85;
  }
  100%{
    opacity: 0;
  }
}

/* .js-gsap__lineTitle */
.js-gsap__lineTitle {
  color: rgba(255, 255, 255, 0);
  display: block;
  overflow: hidden;
  position: relative;
  width: max-content;
  transition: color 0s 0.5s;
}
.js-gsap__lineTitle:after {
  content: "";
  left: -1px;
  display: block;
  position: absolute;
  top: 0;
  transform: translateX(-100%);
  width: 100%;
  height: 100%;
  background-color: #fff;
}
.js-gsap__lineTitle.is-active {
  color: rgba(255, 255, 255, 1);
}
.js-gsap__lineTitle.is-active::after {
  animation: gltLineAnime 1s;
}
@keyframes gltLineAnime {
  0% {
    transform: translateX(-100%);
  }
  50% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(100.1%);
  }
}