@charset "UTF-8";
/*
 ※ 要素を動かす時はmarginやleft等ではなく描画コストの低いtransformを適用すること
 */
/* ==========================================================
!スクロール
========================================================== */
@-webkit-keyframes scrollarrow01 {
	0% {
		opacity: 0;
		-webkit-transform: rotate(-45deg) translate(0, 0);
		        transform: rotate(-45deg) translate(0, 0);
	}
	50% {
		opacity: 1;
	}
	100% {
		opacity: 0;
		-webkit-transform: rotate(-45deg) translate(-10px, 10px);
		        transform: rotate(-45deg) translate(-10px, 10px);
	}
}
@keyframes scrollarrow01 {
	0% {
		opacity: 0;
		-webkit-transform: rotate(-45deg) translate(0, 0);
		        transform: rotate(-45deg) translate(0, 0);
	}
	50% {
		opacity: 1;
	}
	100% {
		opacity: 0;
		-webkit-transform: rotate(-45deg) translate(-10px, 10px);
		        transform: rotate(-45deg) translate(-10px, 10px);
	}
}

/* ==========================================================
!スクロール マウスホイール
========================================================== */
@-webkit-keyframes scrollwheel {
	0% {
		opacity: 0;
		-webkit-transform: translate(0, 0);
		        transform: translate(0, 0);
	}
	40% {
		opacity: 1;
	}
	80% {
		opacity: 0;
		-webkit-transform: translate(0, 10px);
		        transform: translate(0, 10px);
	}
	100% {
		opacity: 0;
	}
}
@keyframes scrollwheel {
	0% {
		opacity: 0;
		-webkit-transform: translate(0, 0);
		        transform: translate(0, 0);
	}
	40% {
		opacity: 1;
	}
	80% {
		opacity: 0;
		-webkit-transform: translate(0, 10px);
		        transform: translate(0, 10px);
	}
	100% {
		opacity: 0;
	}
}

/* ==========================================================
!透明度変化
========================================================== */
@-webkit-keyframes fadeIn {
	from {
		visibility: visible;
		opacity: 0;
	}
	to {
		visibility: visible;
		opacity: 1;
	}
}
@keyframes fadeIn {
	from {
		visibility: visible;
		opacity: 0;
	}
	to {
		visibility: visible;
		opacity: 1;
	}
}

/* ==========================================================
!下から上へ移動しながら透明度変化
========================================================== */
@-webkit-keyframes slideInUp {
	from {
		visibility: visible;
		opacity: 0;
		-webkit-transform: translate3d(0, 20px, 0);
		        transform: translate3d(0, 20px, 0);
	}
	to {
		visibility: visible;
		opacity: 1;
		-webkit-transform: translate3d(0, 0, 0);
		        transform: translate3d(0, 0, 0);
	}
}
@keyframes slideInUp {
	from {
		visibility: visible;
		opacity: 0;
		-webkit-transform: translate3d(0, 20px, 0);
		        transform: translate3d(0, 20px, 0);
	}
	to {
		visibility: visible;
		opacity: 1;
		-webkit-transform: translate3d(0, 0, 0);
		        transform: translate3d(0, 0, 0);
	}
}

/* ==========================================================
!上から下へ移動しながら透明度変化
========================================================== */
@-webkit-keyframes slideInDown {
	from {
		visibility: visible;
		opacity: 0;
		-webkit-transform: translate3d(0, -30px, 0);
		        transform: translate3d(0, -30px, 0);
	}
	to {
		visibility: visible;
		opacity: 1;
		-webkit-transform: translate3d(0, 0, 0);
		        transform: translate3d(0, 0, 0);
	}
}
@keyframes slideInDown {
	from {
		visibility: visible;
		opacity: 0;
		-webkit-transform: translate3d(0, -30px, 0);
		        transform: translate3d(0, -30px, 0);
	}
	to {
		visibility: visible;
		opacity: 1;
		-webkit-transform: translate3d(0, 0, 0);
		        transform: translate3d(0, 0, 0);
	}
}

/* ==========================================================
!奥からパタッと現れる
========================================================== */
@-webkit-keyframes flipInX {
	from {
		visibility: visible;
		opacity: 0;
		-webkit-animation-timing-function: ease-in;
		        animation-timing-function: ease-in;
		-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
		        transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
	}
	50% {
		opacity: 1;
		-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
		        transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
	}
	to {
		visibility: visible;
		-webkit-transform: perspective(400px);
		        transform: perspective(400px);
	}
}
@keyframes flipInX {
	from {
		visibility: visible;
		opacity: 0;
		-webkit-animation-timing-function: ease-in;
		        animation-timing-function: ease-in;
		-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
		        transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
	}
	50% {
		opacity: 1;
		-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
		        transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
	}
	to {
		visibility: visible;
		-webkit-transform: perspective(400px);
		        transform: perspective(400px);
	}
}

/* ==========================================================
!拡大縮小
========================================================== */
@-webkit-keyframes bounceIn {
	to {
		visibility: visible;
		-webkit-transform: scale3d(1, 1, 1);
		        transform: scale3d(1, 1, 1);
	}
	10%,
	20%,
	30%,
	40%,
	50%,
	60% {
		-webkit-transform: scale3d(1, 1, 1);
		        transform: scale3d(1, 1, 1);
	}
	70% {
		-webkit-transform: scale3d(1.07, 1.07, 1.07);
		        transform: scale3d(1.07, 1.07, 1.07);
	}
	from {
		visibility: visible;
		-webkit-transform: scale3d(1, 1, 1);
		        transform: scale3d(1, 1, 1);
	}
}
@keyframes bounceIn {
	to {
		visibility: visible;
		-webkit-transform: scale3d(1, 1, 1);
		        transform: scale3d(1, 1, 1);
	}
	10%,
	20%,
	30%,
	40%,
	50%,
	60% {
		-webkit-transform: scale3d(1, 1, 1);
		        transform: scale3d(1, 1, 1);
	}
	70% {
		-webkit-transform: scale3d(1.07, 1.07, 1.07);
		        transform: scale3d(1.07, 1.07, 1.07);
	}
	from {
		visibility: visible;
		-webkit-transform: scale3d(1, 1, 1);
		        transform: scale3d(1, 1, 1);
	}
}

/* animationのプロパティまとめ
------------------------------------
animation: [名前] [所要時間(1s)] [イージング] [遅延時間(0.3s)] [ループ回数(1 , infinite)] [再生方向(normal)] [開始前と終了後の適用(forwards)] [再生中か一時停止に適用];
animation: slideInUp 0.8s ease 2.7s 1 forwards;

▼要素に適用するキーフレームアニメーションを指定
animation-name

▼アニメーション開始から終了までの所要時間を指定
animation-duration

▼アニメーションのイージングを指定
animation-timing-function

▼アニメーションが開始するまでの遅延時間を指定
animation-delay

▼アニメーションのループ回数を指定
animation-iteration-count

▼アニメーションの再生方向を指定
animation-direction
normal：通常再生(0% → 100%)
reverse：逆再生(100% → 0%)
alternate：通常再生　だがループの場合は通常→逆→通常→逆と繰り返す
alternate-reverse：逆再生　だがループの場合は逆→通常→逆→通常と繰り返す

▼キーフレームアニメーションで指定したプロパティをアニメーション開始前、終了後に適用するかどうかを指定
animation-fill-mode
none：何も適用しない
forwards：アニメーション終了後に100%(逆再生なら0%)の状態になる
backwards：アニメーション開始前に0%(逆再生なら100%)の状態になる
both：forwardsとbackwardsの両方を適用した状態になる

▼アニメーションを再生中か一時停止にするプロパティ
animation-play-state
 */

/*# sourceMappingURL=../../../map/animation.css.map */