@charset "utf-8";

/*=======================================================
アニメーション一式
=======================================================*/

/*-------------------------------------------------------
フェイドインで下→上に順にすっと出てくる

書き方
<h1>
<span class="fade-in-up">1つめ</span>
<span class="fade-in-up">２つめ</span>
<span class="fade-in-up">３つめ</span>
</h1>
-------------------------------------------------------*/
.fade-in-up { opacity: 0; transform: translateY(20px); animation: fadeInUp 0.8s ease forwards;}
.fade-in-up:nth-child(1) { animation-delay: 0s;}
.fade-in-up:nth-child(2) { animation-delay: 0.5s;}
.fade-in-up:nth-child(3) { animation-delay: 1s;}

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


/*-------------------------------------------------------
ほわほわジャンプし続ける
-------------------------------------------------------*/
.ani_jumpIn { animation: jumpLoop 1.2s ease-in-out infinite;}
@keyframes jumpLoop {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(5px); }
  100% { transform: translateY(0); }
}


/*-------------------------------------------------------
左右に揺れ続ける
-------------------------------------------------------*/
.ani_swing {  animation: swing 1.6s infinite; animation-timing-function: ease-in-out; }

@keyframes swing {
  0%   { transform: translateX(-5px); }
  50%  { transform: translateX(0px); }
  100% { transform: translateX(-5px); }
}


/*-------------------------------------------------------
拡縮を繰り返す
-------------------------------------------------------*/
.ani_pulse { animation: pulse 1.5s infinite;}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.03); }
}