@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 30px;}
	100%{translate: 0 0;}
}

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

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

/* 左からふわっと
============================== */
.anmFadeLeft.jsAnmStart{
	animation: anmFadeLeft var(--anmDuration) var(--anmBaseCB) var(--anmDelay) forwards, var(--anmFadeIn);
}
@keyframes anmFadeLeft{
	0%  {translate: -30px 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;
}

/* list
============================== */
@media print, screen and (min-width:813px){
	.clm2 li.jsAnm,
	.clm3 li.jsAnm,
	.clm4 li.jsAnm{
		opacity: 0;
	}
	.clm2 li.jsAnm.jsAnmStart:nth-of-type(2n+1),
	.clm3 li.jsAnm.jsAnmStart:nth-of-type(3n+1),
	.clm4 li.jsAnm.jsAnmStart:nth-of-type(4n+1){
		animation: anmFadeUp var(--anmDuration) ease var(--anmDelay) forwards,
					anmFadeIn var(--anmDuration) ease var(--anmDelay) forwards;
	}
	.clm2 li.jsAnm.jsAnmStart:nth-of-type(2n+2),
	.clm3 li.jsAnm.jsAnmStart:nth-of-type(3n+2),
	.clm4 li.jsAnm.jsAnmStart:nth-of-type(4n+2){
		animation: anmFadeUp var(--anmDuration) ease calc(var(--anmDelay) + 0.2s) forwards,
					anmFadeIn var(--anmDuration) ease calc(var(--anmDelay) + 0.2s) forwards;
	}
	.clm3 li.jsAnm.jsAnmStart:nth-of-type(3n+3),
	.clm4 li.jsAnm.jsAnmStart:nth-of-type(4n+3){
		animation: anmFadeUp var(--anmDuration) ease calc(var(--anmDelay) + 0.4s) forwards,
					anmFadeIn var(--anmDuration) ease calc(var(--anmDelay) + 0.2s) forwards;
	}
	.clm4 li.jsAnm.jsAnmStart:nth-of-type(4n+4){
		animation: anmFadeUp var(--anmDuration) ease calc(var(--anmDelay) + 0.6s) forwards,
					anmFadeIn var(--anmDuration) ease calc(var(--anmDelay) + 0.6s) forwards;
	}
}