@charset "utf-8";


@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: translateY(-10px);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.fadeUpTrigger,
.flipLeftTrigger {
  opacity: 0;
}
/* fadeUp */
.fadeUp {
  animation-name:fadeUpAnime;
  animation-duration:2s;
  animation-fill-mode:forwards;
  opacity:0;
}
@keyframes fadeUpAnime {
  from {
    opacity: 0;
    transform: translateY(100px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　2 */
.fadeUpTrigger2,
.flipLeftTrigger2 {
  opacity: 0;
}
/* fadeUp2 */
.fadeUp2 {
  will-change: filter;
  animation-name:fadeUpAnime2;
  animation-duration:1s;
  animation-fill-mode:forwards;
  opacity:0;
  animation-timing-function: ease;
  animation-delay: 0.4s;
}
@keyframes fadeUpAnime2 {
  from {
    opacity: 0;
    transform: translateY(100px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* fadeUpbg */
.fadeUpbg {
  animation-name:fadeUpAnimebg;
  animation-duration:8s;
  animation-fill-mode:forwards;
  opacity:0;
}
@keyframes fadeUpAnimebg {
  from {
    opacity: 0;
    transform: translateY(300px);        
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.flipLeft{
  animation-name:flipLeftAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
  perspective-origin:left center;
  opacity:0;
  }
@keyframes flipLeftAnime {
  0% {
    transform: perspective(600px) translate3d(0, 0, 0) rotateY(30deg);
    opacity: 0;
  }

  100% {
    transform: perspective(600px) translate3d(0, 0, 0) rotateY(0deg);
    opacity: 1;
  }
}