@charset "UTF-8";
/* CSS Document */
/*
	base
-----------------------------------------------------------------------------------------------*/
:root{
	--anmDuration: 0.5s;
	--anmDelay: 0.5s;
	--anmBaseCB: cubic-bezier(0.7, 0.1, 0.35, 0.84);
	--anmFadeIn: anmFadeIn var(--anmDuration) ease var(--anmDelay) forwards;
}

/* 起点 */
.jsAnm{
	opacity: 0;
}

/* ふわっと
============================== */
.anmFadeIn.jsAnmStart{
	animation: var(--anmFadeIn);
}
@keyframes anmFadeIn{
	0%  {opacity: 0;}
	100%{opacity: 1;}
}

/* ふわっと消える
============================== */
.anmFadeOut.jsAnmStart{
	animation: anmFadeOut var(--anmDuration) ease var(--anmDelay) forwards;
}
@keyframes anmFadeOut{
	0%  {opacity: 1;}
	100%{opacity: 0;}
}

/* 下からふわっと
============================== */
.anmFadeUp.jsAnmStart{
	animation: anmFadeUp var(--anmDuration) var(--anmBaseCB) var(--anmDelay) forwards, var(--anmFadeIn);
}
@keyframes anmFadeUp{
	0%  {translate: 0 50px;}
	100%{translate: 0 0;}
}

/* 上からふわっと
============================== */
.anmFadeDown.jsAnmStart{
	animation: anmFadeDown var(--anmDuration) var(--anmBaseCB) var(--anmDelay) forwards, var(--anmFadeIn);
}
@keyframes anmFadeDown{
	0%  {translate: 0 -50px;}
	100%{translate: 0 0;}
}

/* 右からふわっと
============================== */
.anmFadeRight.jsAnmStart{
	animation: anmFadeRight var(--anmDuration) var(--anmBaseCB) var(--anmDelay) forwards, var(--anmFadeIn);
}
@keyframes anmFadeRight{
	0%  {translate: 50px 0;}
	100%{translate: 0 0;}
}
.anmFadeRight.jsAnmStart{
	animation: anmFadeRightS var(--anmDuration) var(--anmBaseCB) var(--anmDelay) forwards, var(--anmFadeIn);
}
@keyframes anmFadeRightS{
	0%  {translate: 10px 0;}
	100%{translate: 0 0;}
}

/* 左からふわっと
============================== */
.anmFadeLeft.jsAnmStart{
	animation: anmFadeLeft var(--anmDuration) var(--anmBaseCB) var(--anmDelay) forwards, var(--anmFadeIn);
}
@keyframes anmFadeLeft{
	0%  {translate: -50px 0;}
	100%{translate: 0 0;}
}
.anmFadeLeftS.jsAnmStart{
	animation: anmFadeLeftS var(--anmDuration) var(--anmBaseCB) var(--anmDelay) forwards, var(--anmFadeIn);
}
@keyframes anmFadeLeftS{
	0%  {translate: -10px 0;}
	100%{translate: 0 0;}
}

/* ぼかし
============================== */
.anmBlur.jsAnmStart{
	animation: anmBlur var(--anmDuration) ease var(--anmDelay) forwards,
			   var(--anmFadeIn);
}
@keyframes anmBlur{
	0%  {filter: blur(20px);}
	100%{filter: blur(0);}
}

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