/*==================================================
ふわっ
===================================*/

/* fadeUp */

.fadeUp {
  animation-name: fadeUpAnime;
  animation-duration: 0.8s;
  animation-fill-mode: forwards;
  opacity: 0;
}

.fadeUp2 {
  animation-name: fadeUpAnime;
  animation-duration: 0.8s;
  animation-delay: 0.4s;
  animation-fill-mode: forwards;
  opacity: 0;
}
.fadeUp3 {
  animation-name: fadeUpAnime;
  animation-duration: 0.8s;
  animation-delay: 1.2s;
  animation-fill-mode: forwards;
  opacity: 0;
}
.line-fukidashi.fadeUp3 {
  animation-name: fadeUpAnimePaused;
  animation-duration: 8s;
  animation-delay: 0.4s;
  animation-fill-mode: forwards;
  animation-iteration-count:infinite;
  opacity: 0;
}
.fadeUp4 {
  animation-name: fadeUpAnime;
  animation-duration: 0.8s;
  animation-delay: 1.6s;
  animation-fill-mode: forwards;
  opacity: 0;
}
.fadeUp5 {
  animation-name: fadeUpAnime;
  animation-duration: 0.8s;
  animation-delay: 1.6s;
  animation-fill-mode: forwards;
  opacity: 0;
}

.fadeUpX {
  animation-name: fadeUpAnimeX;
  animation-duration: 0.8s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes fadeUpAnime {
  from {
    opacity: 0;
    transform: translateY(40px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fadeUpAnimePaused {
  0% {
    opacity: 0;
    transform: translateY(40px);
  }
  20% {
    opacity: 1;
    transform: translateY(0);
  }
  85% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
  }
}
@keyframes fadeUpAnimeX {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(40px);
  }

  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}
@keyframes fadeUpAnimeXY {
  from {
    opacity: 0;
    top: calc(50% + 15px);
  }

  to {
    opacity: 1;
    top: calc(50% - 15px);
  }
}
/* スクロールをしたら出現する要素にはじめに透過0を指定　*/

.fadeUpTrigger,
.fadeUpTrigger2,
.fadeUpTrigger3,
.fadeUpTrigger4,
.fadeUpTrigger5 {
  opacity: 0;
  will-change: opacity;
}