@charset "utf-8";

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

.fadeUp {
opacity:0;
}

.fadeUp.is-active {
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);
  }
}

/*==================================================
アニメーション設定
===================================*/

/* アニメーション１回分の時間の長さを指定するCSS*/

.change-time05{
  animation-duration: 0.5s;
}

.change-time1{
  animation-duration: 1s;
}

.change-time15{
  animation-duration: 1.5s;
}

.change-time2{
 animation-duration: 2s;
}

.change-time25{
animation-duration: 2.5s;
}


/* 動きをループさせるCSS*/

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

.countinfinite{
 animation-iteration-count: infinite;/*無限ループ*/
}


/* アニメーションの開始を遅らせるCSS*/

.delay-time025{
animation-delay: 0.25s;
}

.delay-time05{
animation-delay: 0.5s;
}

.delay-time075{
animation-delay: 0.75s;
}

.delay-time1{
animation-delay: 1s;
}

.delay-time15{
animation-delay: 1.5s;
}

.delay-time2{
animation-delay: 2s;
}

.delay-time25{
  animation-delay: 2.5s;
}


/* アニメーションの進行具合を操作するCSS*/

.timing-ease{
animation-timing-function:ease;
}

.timing-ease-in{
animation-timing-function:ease-in;
}

.timing-ease-out{
animation-timing-function:ease-out;
}

.timing-ease-in-out{
animation-timing-function:ease-in-out;  
}

.timing-linear{
animation-timing-function:linear; 
}

.timing-steps{
animation-timing-function:steps(4, end);  
}

.timing-cubic-bezier{
animation-timing-function:cubic-bezier(.17,.67,.67,.51);  
}

/*==================================================
アニメーションをまとめて設定する
===================================*/

.fadeDown{
animation: fadeDownAnime 1s ease 1.5s forwards;/*アニメーションの定義名、アニメーション１回分の時間の長さ、アニメーションの進行具合、アニメーションの開始を遅らせる、アニメーションの開始と終了時の状態を指定をまとめて設定*/
opacity:0;
}

/*アニメーションの開始から終了までを指定する*/
@keyframes fadeDownAnime{
  from {
    opacity: 0;
  transform: translateY(-100px);
  }

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


/*========= レイアウトのためのCSS ===============*/

.wrapper{
  overflow: hidden;
}

.flex{
  display:flex;
  flex-wrap: wrap;
}