@charset "utf-8";


/*////////////////////////////////////////////////////////////////////////////////////////*/
/*==================================================
スタート時は要素自体を透過0にするためのopacity:0;を指定する
===================================*/

.box{
  opacity: 0;
}

/*==================================================
上からスライド＋フェードイン
===================================*/

.fadeDown {
animation-name:fadeDownAnime;
animation-duration:1.0s;
animation-fill-mode:forwards;
opacity: 0;
}
@keyframes fadeDownAnime{
  from {
    opacity: 0;
  transform: translateY(-80px);
  }

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


/*==================================================
フェードイン
===================================*/

.fade {
animation-name:fadeAnime;
animation-duration:1.0s;
animation-fill-mode:forwards;
opacity: 0;
}
@keyframes fadeAnime{
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.fade02 {
animation-name:fadeAnime;
animation-duration:2.0s;
animation-fill-mode:forwards;
opacity: 0;
}
@keyframes fadeAnime{
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/*==================================================
ズームイン
===================================*/

.zoomIn{
animation-name:zoomInAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity: 0;
}

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

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


/*==================================================
ズームアウト
===================================*/

.zoomOut{
animation-name:zoomOutAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity: 0;
}

@keyframes zoomOutAnime{
  from {
    opacity: 0;
	transform: scale(1.5);
  }

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


/*==================================================
ぽよん
===================================*/


.poyon{
animation-name:poyon;
animation-duration:1.2s;
animation-fill-mode:forwards;
}

@keyframes poyon {
  0%   { transform: scale(1.0, 1.0) translate(0%, 0%); }
  15%  { transform: scale(1.0, 1.0) translate(0%, 0%); }
  30%  { transform: scale(1.3, 0.8) translate(0%, 10%); }
  50%  { transform: scale(0.8, 1.3) translate(0%, -10%); }
  70%  { transform: scale(1.1, 0.9) translate(0%, 5%); }
  100% { transform: scale(1.0, 1.0) translate(0%, 0%); }
}


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

/* キャラ紹介 */
.delay-time01-01{
animation-delay: 0.1s;
}

.delay-time01-02{
animation-delay: 0.8s;
}

.delay-time01-03{
animation-delay: 1.3s;
}



/* キャラ紹介　ボタン */
.delay-time01-04{
animation-delay: 2.0s;
}



/* ギャラリー */
.delay-time02-01{
animation-delay: 0.1s;
}

.delay-time02-02{
animation-delay: 0.2s;
}

.delay-time02-03{
animation-delay: 0.3s;
}

.delay-time02-04{
animation-delay: 0.4s;
}

.delay-time02-05{
animation-delay: 0.5s;
}

.delay-time02-06{
animation-delay: 0.6s;
}

.delay-time02-07{
animation-delay: 0.7s;
}

.delay-time02-08{
animation-delay: 0.8s;
}

.delay-time02-09{
animation-delay: 0.9s;
}

.delay-time02-10{
animation-delay: 1.0s;
}

.delay-time02-11{
animation-delay: 1.1s;
}

.delay-time02-12{
animation-delay: 1.2s;
}

.delay-time02-13{
animation-delay: 1.3s;
}

.delay-time02-14{
animation-delay: 1.4s;
}

.delay-time02-15{
animation-delay: 1.5s;
}

.delay-time02-16{
animation-delay: 1.6s;
}

.delay-time02-17{
animation-delay: 1.7s;
}

.delay-time02-18{
animation-delay: 1.8s;
}

.delay-time02-19{
animation-delay: 1.9s;
}

.delay-time02-20{
animation-delay: 2.0s;
}

.delay-time02-21{
animation-delay: 2.1s;
}

.delay-time02-22{
animation-delay: 2.2s;

}