@charset "UTF-8";


/* アニメーションスタートの遅延時間を決めるCSS*/

 .delay-time02{
  animation-delay: 0.5s;
  }
  
  .delay-time03{
  animation-delay: 0.9s;
  }
  
  
  /*==================================================
  スタート時は要素自体を透過0にするためのopacity:0;を指定する
  ===================================*/
  
  .list-box{
    opacity: 0;
  }
  
  /*==================================================
  ふわっ
  ===================================*/
  
  .fadeUp, .fadeUp02 {
  animation-name:fadeAnime;
  animation-duration: 1s;
  animation-fill-mode:forwards;
  opacity: 0;
  }

  @keyframes fadeAnime{
    from {
      opacity: 0;
    transform: translateY(100px);
    }
  
    to {
      opacity: 1;
    transform: translateY(0);
    }
  }


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

@keyframes zoomInAnime{
  from {
	transform: scale(0.2);
  }

  to {
      transform: scale(1);
  }
}

/* 滑らかに変形して出現 */
.smooth{
	animation-name:smoothAnime;
	animation-duration:1s;
	animation-fill-mode:forwards;
  transform-origin:left;
	opacity:0;
}

@keyframes smoothAnime{
  from {
  transform:translate3d(0, 100%, 0) skewY(20deg);
  opacity:0;
  }

  to {
  transform:translate3d(0, 0, 0) skewY(0);
  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);
    }
  }