@charset "utf-8";
/* CSS Document */


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

/* fadeIn ふわっ（その場で） */

.fadeIn{
animation-name:fadeInAnime;
animation-delay: 0.8s;/*スタート時間*/
animation-duration: 1s;/*変化時間*/
animation-fill-mode:forwards;
opacity:0;
}
@keyframes fadeInAnime{
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}


/* fadeUp ふわっ（下から） */

.fadeUp{
animation-name:fadeUpAnime;
animation-delay: 0.9s;/*スタート時間*/
animation-duration: 1s;/*変化時間*/
animation-fill-mode:forwards;
opacity:0;
}
@keyframes fadeUpAnime{
  from {
    opacity: 0;
  transform: translateY(100px);
  }
  to {
    opacity: 1;
  transform: translateY(0);
  }
}


/* fadeDown ふわっ（上から）*/

.fadeDown{
animation-name:fadeDownAnime;
animation-delay: 1s;/*スタート時間*/
animation-duration: 1s;/*変化時間*/
animation-fill-mode:forwards;
opacity:0;
}
@keyframes fadeDownAnime{
  from {
    opacity: 0;
  transform: translateY(-100px);
  }
  to {
    opacity: 1;
  transform: translateY(0);
  }
}


/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
 
.fadeInTrigger,
.fadeUpTrigger,
.fadeDownTrigger {
    opacity: 0;
}




/*========= アニメーションの指定 ===============*/


/* アニメーションの回数を決めるCSS*/

.count2{  
	animation-iteration-count: 2;/*この数字を必要回数分に変更*/
}

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

.delay-time05{ animation-delay: 0.5s;}
.delay-time08{ animation-delay: 0.8s;}
.delay-time11{ animation-delay: 1.1s;}

.delay-time17{ animation-delay: 1.2s;}
.delay-time21{ animation-delay: 3.1s;}
.delay-time31{ animation-delay: 6.3s;}


/* アニメーション自体が変化する時間を決めるCSS*/

.change-time{ animation-duration: 2s;/*この数字を変化させたい時間に変更*/}