@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);
	}
}
/* upDown */
@keyframes upDown01{
	0%  {transform: translateY(0);}
	50% {transform: translateY(-5px);}
	100%{transform: translateY(0);}
}
@keyframes upDown02{
	0%  {transform: translateY(0);}
	50% {transform: translateY(5px);}
	100%{transform: translateY(0);}
}
@keyframes upDown03{
	0%  {transform: translateY(0);}
	50% {transform: translateY(10px);}
	100%{transform: translateY(0);}
}
@keyframes upDown04{
	0%  {transform: translateY(0);}
	50% {transform: translateY(-10px);}
	100%{transform: translateY(0);}
}

/* バウンドしながら */
@keyframes upScale{
	0%   {transform: scale(0.9);
		  opacity: 0;
		 }
	40%  {transform: scale(1.05);
		  opacity: 1;
		 }
	60%  {transform: scale(0.95);}
	100% {transform: translateY(1);
		  opacity: 1
		 }
}
.upScale.anmStart{
	animation: upScale .7s ease .7s forwards;
}
.upScale02.anmStart{
	animation: upScale .7s ease .7s forwards;
	animation-delay: .8s;
}
@media screen and (max-width:812px) {
	.upScale02.anmStart{
		animation-delay: 0s;
	}	
}

/* ページ全体 */
#wrapper{
	opacity: 0;
	animation: fadeIn 0.8s ease 0.2s forwards;
}

/*
	kv
-----------------------------------------------------------------------------------------------*/
.kv__logo,
.kv__obi,
.kv__character,
.forms__tit {
	opacity: 0;	
	animation: upScale .7s ease-in-out .1s forwards; 
	animation-delay: .9s;
}
.kv__obi,
.kv__character{
	animation-delay: 1.5s;
}
.kv__item01,
.kv__item02,
.kv__item03 {
	opacity: 0;	
	animation: upScale .7s ease-in-out .1s forwards; 
	animation-delay: 2.0s;
}
.kv__item02{
	animation-delay: 2.2s;
}
.kv__item03{
	animation-delay: 2.4s;
}
.kv__bnr {
	opacity: 0;
	animation: fadeUp .7s ease .7s forwards;
	animation-delay: 2.8s;
}
/* 地球の回転 */
@keyframes rotateBg {
	0% {
	transform: rotate(0deg);
	}
	100% {
	transform: rotate(-360deg);
	}
}