@charset "UTF-8";

/* 起点 */
.jsAnm {
	opacity: 0;
}
/* ふわっと
============================== */
.anmFadeIn.jsAnmStart{
	animation: anmFadeIn 1s ease .7s forwards;
}
@keyframes anmFadeIn{
	from{
		opacity: 0;
	}
	to{
		opacity: 1;
	}
}
/* 下から
============================== */
.anmFadeUp.jsAnmStart{
	animation: anmFadeUp .7s ease .7s forwards;
}
@keyframes anmFadeUp{
	from{
		opacity: 0;
		transform: translateY(20px);
	}
	to{
		opacity: 1;
		transform: translateY(0);
	}
}
/* 上から
============================== */
.anmFadeDown.jsAnmStart{
	animation: anmFadeDown .7s ease .7s forwards;
}
@keyframes anmFadeDown{
	from{
		opacity: 0;
		transform: translateY(-20px);
	}
	to{
		opacity: 1;
		transform: translateY(0);
	}
}

/* 右から
============================== */
.anmFadeRight.jsAnmStart{
	animation: anmFadeRight .7s ease .7s forwards;
}
@keyframes anmFadeRight{
	from{
		opacity: 0;
		transform: translateX(-20px);
	}
	to{
		opacity: 1;
		transform: translateX(0);
	}
}

/* 左から
============================== */
.anmFadeLeft.jsAnmStart{
	animation: anmFadeLeft .7s ease .7s forwards;
}
@keyframes anmFadeLeft{
	from{
		opacity: 0;
		transform: translateX(20px);
	}
	to{
		opacity: 1;
		transform: translateX(0);
	}
}

/* ぼかし
============================== */
.anmBlur.jsAnmStart{
	animation: anmBlur 1.5s ease 0.5s forwards;
}
@keyframes anmBlur{
	from{
		opacity: 0;
		filter: blur(20px);
	}
	to{
		opacity: 1;
		filter: blur(0);
	}
}

/*
	要素
-----------------------------------------------------------------------------------------------*/
/* ページ全体
============================== */
#wrapper{
	opacity: 0;
	animation: anmFadeIn 0.8s ease 0.2s forwards;
}