.fadeUpTrigger,
.fadeLeftTrigger,
.fadeRightTrigger,
.zoomInTrigger{
  opacity: 0;
}

/* 下から */
.fadeUp{
  animation-name:fadeUpAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
  opacity:0;
}

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

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

/* 拡大 */
.zoomIn{
  animation-name:zoomInAnime;
  animation-duration:1.5s;
  animation-fill-mode:forwards;
}

@keyframes zoomInAnime{
  from {
    transform: scale(0.6);
    opacity: 0;
  }

  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* 左から */
.fadeLeft{
  animation-name:fadeLeftAnime;
  animation-duration:0.8s;
  animation-fill-mode:forwards;
  opacity:0;
}

@keyframes fadeLeftAnime{
  from {
    opacity: 0;
    transform: translateX(-100px);
  }

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

/* 右から */
.fadeRight{
  animation-name:fadeRightAnime;
  animation-duration:0.8s;
  animation-fill-mode:forwards;
  opacity:0;
}

@keyframes fadeRightAnime{
  from {
    opacity: 0;
    transform: translateX(100px);
  }

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


/* アニメーションスタートの遅延時間を決めるCSS*/
@media screen and (min-width: 640px) {
  .time02{ animation-delay: 0.2s; }
  .time04{ animation-delay: 0.4s; }
  .time06{ animation-delay: 0.6s; }
  .time08{ animation-delay: 0.8s; }
  .time10{ animation-delay: 1s; }
  .time12{ animation-delay: 1.2s; }
  .time14{ animation-delay: 1.4s; }
  .time16{ animation-delay: 1.6s; }
}
@media screen and (max-width: 639px) {
  .time02_sp{ animation-delay: 0.2s; }
  .time04_sp{ animation-delay: 0.4s; }
}