@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;
}

/* 起点 */
[class *= "jsAnm"]{
	opacity: 0;
}
.jsAnmVisible{
	opacity: 1;
}

/* ふわっと
============================== */
.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);}
}

/* 画像　ぼかし
============================== */
[class *= "cmnAnmPh"]{
	width: fit-content;
	overflow: hidden;
}
.cmnAnmPh06{
	border-radius: 6px;
}
.cmnAnmPh10{
	border-radius: var(--roundS);
}
.cmnAnmPh50{
	border-radius: var(--roundL);
}
[class *= "cmnAnmPh"] img{
	filter: blur(3px);
	scale: 1.2;
	opacity: 0.6;
}
@media screen and (max-width:812px){
	.cmnAnmPh50{
		border-radius: 30px;
	}
}
@keyframes anmCmnAnmPh{
	0%  {
		filter: blur(3px);
		scale: 1.2;
		opacity: 0.6;
	}
	100%{
		filter: blur(0);
		scale: 1;
		opacity: 1;
	}
}
.jsAnmStart [class *= "cmnAnmPh"] img,
[class *= "cmnAnmPh"].jsAnmStart img{
	animation: anmCmnAnmPh 0.8s ease 0.3s forwards;
}


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