/* ----------------------------------------------
アニメーション
----------------------------------------------- */

/*1.フェードインアニメーションの指定*/
.scrollanime {
  opacity: 0;
}

/*一瞬表示されるのを防ぐ*/
.fadeInDown {
  animation-name: fadeInDown;
  animation-duration: 2s;
  animation-fill-mode: forwards;
}
@keyframes fadeInDown {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
    transform: translate(0);
  }
}

/*2.アップダウン*/
.updown {
  transform: translateY(-100px);
}
.downup {
  transform: translateY(100px);
}

/*3.スライドイン*/

.slide-right {
  transform: translateX(50px);
}
.slide-left {
  transform: translateX(-50px);
}

.slideUp {
  animation-name: slideUp;
  animation-fill-mode: forwards;
}

@keyframes slideUp {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-100%);
  }
}

/*4.フェードイン*/
.fadeIn {
  animation-name: fadeIn;
  animation-duration: 1.5s;
  animation-fill-mode: forwards;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/*5.アニメーションの開始を遅らせる*/
.delay01 {
  animation-delay: 0.5s;
}

.delay02 {
  animation-delay: 1s;
}

.delay03 {
  animation-delay: 1.5s;
}

.delay04 {
  animation-delay: 2s;
}

.delay05 {
  animation-delay: 2.5s;
}