@charset "utf-8";

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

/*基本のアニメーション
-------------------------------------------------------*/
.inview { opacity: 0; transition: all 1.2s ease; }

/*上から
-------------------------------------------------------*/
.fadeUp { opacity: 0; transform: translateY(-100px); transition: all 1.6s ease; }
.fadeUp.is-show { opacity: 1; transform: translateY(0); }

/*下から
-------------------------------------------------------*/
.fadeDown { opacity: 0; transform: translateY(100px); transition: all 1.6s ease; }
.fadeDown.is-show { opacity: 1; transform: translateY(0); }

/*左から
-------------------------------------------------------*/
.fadeLeft { opacity: 0; transform: translateX(-100px); transition: all 1.6s ease; }
.fadeLeft.is-show { opacity: 1; transform: translateX(0); }

/*右から
-------------------------------------------------------*/
.fadeRight { opacity: 0; transform: translateX(100px); transition: all 1.6s ease; }
.fadeRight.is-show { opacity: 1; transform: translateX(0); }

/*ズームインアニメーション
-------------------------------------------------------*/
.zoomIn { opacity: 0; transform: scale(0.5); transition: all 1.6s ease; }
.zoomIn.is-show { opacity: 1; transform: scale(1); }

/*上下にほわほわする
-------------------------------------------------------*/
.upDown { opacity: 0; transform: translateY(0); will-change: transform, opacity;}
.upDown.is-show { opacity: 1; animation: float 1.8s ease-in-out infinite;}

@keyframes float {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-10px); }
  100% { transform: translateY(0); }
}