@charset "UTF-8";
/* CSS Document */
/*
	base
-----------------------------------------------------------------------------------------------*/
/* 起点 */
.jsAnm{
	opacity: 0;
}

/* ふわっと
============================== */
.anmFadeIn.jsAnmStart{
	animation: anmFadeIn 1s ease 0.5s forwards;
}
@keyframes anmFadeIn{
	from{
		opacity: 0;
	}
	to{
		opacity: 1;
	}
}

/* ふわっと消える
============================== */
.anmFadeOut.jsAnmStart{
	animation: anmFadeOut 1s ease 0.5s forwards;
}
@keyframes anmFadeOut{
	from{
		opacity: 1;
	}
	to{
		opacity: 0;
	}
}

/* 下からふわっと
============================== */
.anmFadeUp.jsAnmStart{
	animation: anmFadeUp 1s ease 0.5s forwards;
}
@keyframes anmFadeUp{
	from{
		opacity: 0;
		transform: translateY(100px);
	}
	to{
		opacity: 1;
		transform: translateY(0);
	}
}

/* anmFadeUpS */
.anmFadeUpS.jsAnmStart{
	animation: anmFadeUpS 1s ease 0.5s forwards;
}
@keyframes anmFadeUpS{
	from{
		opacity: 0;
		transform: translateY(30px);
	}
	to{
		opacity: 1;
		transform: translateY(0);
	}
}

/* 上からふわっと
============================== */
.anmFadeDown.jsAnmStart{
	animation: anmFadeDown 1s ease 0.5s forwards;
}
@keyframes anmFadeDown{
	from{
		opacity: 0;
		transform: translateY(-100px);
	}
	to{
		opacity: 1;
		transform: translateY(0);
	}
}

/* anmFadeDownS */
.anmFadeDownS.jsAnmStart{
	animation: anmFadeDownS 1s ease 0.5s forwards;
}
@keyframes anmFadeDownS{
	from{
		opacity: 0;
		transform: translateY(-30px);
	}
	to{
		opacity: 1;
		transform: translateY(0);
	}
}

/* 右からふわっと
============================== */
.anmFadeRight.jsAnmStart{
	animation: anmFadeRight 1s ease 0.5s forwards;
}
@keyframes anmFadeRight{
	from{
		opacity: 0;
		transform: translateX(100px);
	}
	to{
		opacity: 1;
		transform: translateX(0);
	}
}

/* anmFadeRightS */
.anmFadeRightS.jsAnmStart{
	animation: anmFadeRightS 1s ease 0.5s forwards;
}
@keyframes anmFadeRightS{
	from{
		opacity: 0;
		transform: translateX(30px);
	}
	to{
		opacity: 1;
		transform: translateX(0);
	}
}

/* 左からふわっと
============================== */
.anmFadeLeft.jsAnmStart{
	animation: anmFadeLeft 1s ease 0.5s forwards;
}
@keyframes anmFadeLeft{
	from{
		opacity: 0;
		transform: translateX(-100px);
	}
	to{
		opacity: 1;
		transform: translateX(0);
	}
}

/* anmFadeLeftS */
.anmFadeLeftS.jsAnmStart{
	animation: anmFadeLeftS 1s ease 0.5s forwards;
}
@keyframes anmFadeLeftS{
	from{
		opacity: 0;
		transform: translateX(-30px);
	}
	to{
		opacity: 1;
		transform: translateX(0);
	}
}

/* updown フワフワ01
============================== */
.anmUpdown01.jsAnmStart{
	opacity: 0;
	animation: anmFadeIn 2s ease 0.5s forwards, anmUpdown01 5s ease 0s infinite;
}
@keyframes anmUpdown01{
	0%  {transform: translateY(0);}
	50% {transform: translateY(-10px);}
	100%{transform: translateY(0);}
}

/* リバース */
.anmUpdownR01.jsAnmStart{
	opacity: 0;
	animation: anmFadeIn 2s ease 0.5s forwards, anmUpdownR01 5s ease 0s infinite;
}
@keyframes anmUpdownR01{
	0%  {transform: translateY(0);}
	50% {transform: translateY(10px);}
	100%{transform: translateY(0);}
}

/* updown フワフワ02
============================== */
.anmUpdown02.jsAnmStart{
	opacity: 0;
	animation: anmFadeIn 2s ease 0.5s forwards, anmUpdown02 5s ease 0s infinite;
}
@keyframes anmUpdown02{
	0%  {transform: translateY(0);}
	50% {transform: translateY(-20px);}
	100%{transform: translateY(0);}
}

/* リバース */
.anmUpdownR02.jsAnmStart{
	opacity: 0;
	animation: anmFadeIn 2s ease 0.5s forwards, anmUpdownR02 5s ease 0s infinite;
}
@keyframes anmUpdownR02{
	0%  {transform: translateY(0);}
	50% {transform: translateY(20px);}
	100%{transform: translateY(0);}
}

/* updown フワフワ03 
============================== */
.anmUpdown03.jsAnmStart{
	opacity: 0;
	animation: anmFadeIn 2s ease 0.5s forwards, anmUpdown03 5s ease 0s infinite;
}
@keyframes anmUpdown03{
	0%  {transform: translateY(0);}
	50% {transform: translateY(-30px);}
	100%{transform: translateY(0);}
}

/* リバース */
.anmUpdownR03.jsAnmStart{
	opacity: 0;
	animation: anmFadeIn 2s ease 0.5s forwards, anmUpdownR03 5s ease 0s infinite;
}
@keyframes anmUpdownR03{
	0%  {transform: translateY(0);}
	50% {transform: translateY(30px);}
	100%{transform: translateY(0);}
}

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

/* width 0-100%
============================== */
.anmW100.jsAnmStart{
	animation: anmW100 1s ease-in 0.5s forwards;
}
@keyframes anmW100{
	from{
		width: 0;
	}
	to{
		width: 100%;
	}
}

/* width 100%-0
============================== */
.anmW100.jsAnmStart{
	animation: anmW100 1s ease-in 0.5s forwards;
}
@keyframes anmW0{
	from{
		width: 100%;
	}
	to{
		width: 0;
	}
}


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

/* list
============================== */
@media print, screen and (min-width:813px){
	.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: anmFadeIn 1s ease 0.5s 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: anmFadeIn 1s ease 0.8s forwards;
	}
	.clm3 li.jsAnm.jsAnmStart:nth-of-type(3n+3),
	.clm4 li.jsAnm.jsAnmStart:nth-of-type(4n+3){
		animation: anmFadeIn 1s ease 1.1s forwards;
	}
	.clm4 li.jsAnm.jsAnmStart:nth-of-type(4n+4){
		animation: anmFadeIn 1s ease 1.4s forwards;
	}

	/* 画像用 */
	.clm2 .phLayerOut.jsAnmStart:nth-of-type(2n+1) .phLayer::before,
	.clm3 .phLayerOut.jsAnmStart:nth-of-type(3n+1) .phLayer::before,
	.clm4 .phLayerOut.jsAnmStart:nth-of-type(4n+1) .phLayer::before{
		animation: anmPhLayer 0.8s ease 0.5s forwards;
	}
	.clm2 .phLayerOut.jsAnmStart:nth-of-type(2n+2) .phLayer::before,
	.clm3 .phLayerOut.jsAnmStart:nth-of-type(3n+2) .phLayer::before,
	.clm4 .phLayerOut.jsAnmStart:nth-of-type(4n+2) .phLayer::before{
		animation: anmPhLayer 0.8s ease 0.8s forwards;
	}
	.clm3 .phLayerOut.jsAnmStart:nth-of-type(3n+3) .phLayer::before,
	.clm4 .phLayerOut.jsAnmStart:nth-of-type(4n+3) .phLayer::before{
		animation: anmPhLayer 0.8s ease 1.1s forwards;
	}
	.clm4 .phLayerOut.jsAnmStart:nth-of-type(4n+4) .phLayer::before{
		animation: anmPhLayer 0.8s ease 1.4s forwards;
	}
}

/* 写真
============================== */
.phLayerOut.jsAnmStart .phLayer::before{
	opacity: 1;
	animation: anmPhLayer 0.8s ease 0.5s forwards;
}
@keyframes anmPhLayer{
	from{
		width: 100%;
	}
	to{
		width: 0;
	}
}