@charset "UTF-8";

/*     animation    */
.fadeIn{
  opacity: 0;
  /* transform: translateY(20px); */
  transition: all 0.8s;
}
.fadeIn.active{
  opacity: 1;
  /* transform: translateY(0px); */
  transition: all 0.8s;
}
.fadeIn .fadeUp{
  transform: translateY(20px);
  transition: all 0.8s;
}
.fadeIn.active .fadeUp{
  transform: translateY(0px);
}
.fadeIn .fadeZm{
  transform: scale(0.8);
  transition: all 0.8s;
}
.fadeIn.active .fadeZm{
  transform: scale(1);
}


/* .fadeIn .flex-box, */
.fadeIn .fade-order-1,
.fadeIn .fade-order-2,
.fadeIn .fade-order-3,
.fadeIn .fade-order-4{ 
  opacity: 0;
  /* transition-property: all;
  transition-duration: 0.8s; */
}
/* .fadeIn.active .flex-box, */
.fadeIn.active .fade-order-1,
.fadeIn.active .fade-order-2,
.fadeIn.active .fade-order-3,
.fadeIn.active .fade-order-4{ 
  opacity: 1;
  transition-property: all;
  transition-duration: 0.8s;
}

.fadeIn .fade-order-1{ transition-delay: 0s; }
.fadeIn .fade-order-2{ transition-delay: 0.5s; }
.fadeIn .fade-order-3{ transition-delay: 1.0s; }
.fadeIn .fade-order-4{ transition-delay: 1.5s; }

.topPage #mainImage .hero-copy::after,
/*section .fadeIn.section-content.flex .flex-box .hero-copy::after,*/
section .fadeIn/*.flex .flex-box*/ .hero-copy::after {
    clip-path: polygon(0 0, 0 0, 0% 100%, 0 100%);
}

.topPage #mainImage.active .hero-copy::after{
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  transition: all 0.2s cubic-bezier(1,1,0,1) 1.0s;
}
/* section .fadeIn.section-content.flex.active .flex-box .hero-copy::after, */
section .fadeIn/*.flex*/.active /*.flex-box*/ .hero-copy::after {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  transition: all 0.2s cubic-bezier(1,1,0,1) 2s;
}
.section-member .fadeIn.section-content.flex.active .flex-box .hero-copy::after {
  transition: all 0.2s cubic-bezier(1,1,0,1) 0.5s;
}

.section-90min .fade-order-1.fadeZm{ transform-origin: right; }

.section-90min .section-content.flex .flex-box .hero-copy::before,
.section-member .section-content.flex .flex-box .hero-copy::before{ 
  opacity: 0;
  transform: scale(0.9) translate(-50%);
}
.section-90min .section-content.flex.active .flex-box .hero-copy::before,
.section-member .section-content.flex.active .flex-box .hero-copy::before{
    opacity: 1;
  transform: scale(1) translate(-50%);
  transform-origin: center;
  transition: all .8s 1.0s;
}

/* .section-bunker .fadeIn{ opacity: 1; }
.section-bunker .fadeIn .clip img {
  clip-path: inset(0 0 100% 100%);
}
.section-bunker .fadeIn.active .clip img{
  clip-path: inset(13% 0 0 0);
  transition: all 0.4s;
} */