/* スクロールCSS */
.fade-in {
  opacity: 0;
  transition-duration: 500ms;
  transition-property: opacity, transform;
}

.fade-in-up {
  transform: translate(0, 50px);
}

.fade-in-down {
  transform: translate(0, -50px);
}

.fade-in-left {
  transform: translate(-50px, 0);
}

.fade-in-right {
  transform: translate(50px, 0);
}

.scroll-in {
  opacity: 1;
  transform: translate(0, 0);
}

.fadeUp{
animation-name:fadeUpAnime;
animation-duration:0.7s;
animation-fill-mode:forwards;
opacity:0;
animation-delay: 1s;
}
.fadeUp.fadeUp2 {
  animation-delay: 1.5s;
}
.fadeUp.fadeUp3 {
  animation-delay: 2s;
}

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

  to {
  opacity: 1;
  transform: translateY(0);
  }
}