@charset "UTF-8";

/*
	common
-----------------------------------------------------------------------------------------------*/
.anm {
	opacity: 0;
}
/* ふわっと */
.fadeIn.anmStart{
	animation: fadeIn 3s ease .7s forwards;
}
@keyframes fadeIn{
	from{
		opacity: 0;
	}
	to{
		opacity: 1;
	}
}
/* 下から */
.fadeUp.anmStart{
	animation: fadeUp .7s ease .7s forwards;
}
@keyframes fadeUp{
	from{
		opacity: 0;
		transform: translateY(20px);
	}
	to{
		opacity: 1;
		transform: translateY(0);
	}
}
/* 上から */
.fadeDown.anmStart{
	animation: fadeDown .7s ease .7s forwards;
}
@keyframes fadeDown{
	from{
		opacity: 0;
		transform: translateY(-20px);
	}
	to{
		opacity: 1;
		transform: translateY(0);
	}
}
/* 右から */
.fadeRight.anmStart{
	animation: fadeRight .7s ease .7s forwards;
}
@keyframes fadeRight{
	from{
		opacity: 0;
		transform: translateX(-20px);
	}
	to{
		opacity: 1;
		transform: translateX(0);
	}
}
/* 左から */
.fadeLeft.anmStart{
	animation: fadeLeft .7s ease .7s forwards;
}
@keyframes fadeLeft{
	from{
		opacity: 0;
		transform: translateX(20px);
	}
	to{
		opacity: 1;
		transform: translateX(0);
	}
}
/* ふわふわ */
@keyframes upDown{
	0%  {transform: translateY(0);}
	50% {transform: translateY(-15px);}
	100%{transform: translateY(0);}
}
@keyframes upDownSp{
	0%  {transform: translateY(0);}
	50% {transform: translateY(-10px);}
	100%{transform: translateY(0);}
}
/* 回転 */
@keyframes spin {
	0% {transform: rotate(0deg);}
	100% {transform: rotate(360deg);}
}
/* loop */
@keyframes loop {
	0% {transform: translateX(0);}
	100% {transform: translateX(-100%);}
}

/*
	kv
-----------------------------------------------------------------------------------------------*/
.header__logo,
#gNav,
.subNav__areaTop{
	opacity: 0;
	animation: fadeIn 1.5s ease 2.5s forwards;
}