@charset "UTF-8";

/* 変数
========================================*/
:root{
	--anmMove: 50px;
	--anmMoveSmall: calc(var(--anmMove) * .4);
	--anmScale: 1.03;
	--anmTime: 1.3s;
	--anmDelay: .3s;
	--anmEase: cubic-bezier(.22,1,.36,1);
}

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

/* ふわっと
============================== */
.anmFadeIn.jsAnmStart{
	animation: anmFadeIn var(--anmTime) var(--anmEase) var(--anmDelay) forwards;
}
@keyframes anmFadeIn{
	from{
		opacity: 0;
	}
	to{
		opacity: 1;
	}
}

/* 下から
============================== */
.anmFadeUp.jsAnmStart{
	animation: anmFadeUp var(--anmTime) var(--anmEase) var(--anmDelay) forwards;
}
@keyframes anmFadeUp{
	from{
		opacity: 0;
		transform: translateY(var(--anmMoveSmall));
	}
	to{
		opacity: 1;
		transform: translateY(0);
	}
}

/* 上から
============================== */
.anmFadeDown.jsAnmStart{
	animation: anmFadeDown var(--anmTime) var(--anmEase) var(--anmDelay) forwards;
}
@keyframes anmFadeDown{
	from{
		opacity: 0;
		transform: translateY(calc(var(--anmMoveSmall) * -1));
	}
	to{
		opacity: 1;
		transform: translateY(0);
	}
}

/* 右から
============================== */
.anmFadeRight.jsAnmStart{
	animation: anmFadeRight var(--anmTime) var(--anmEase) var(--anmDelay) forwards;
}
@keyframes anmFadeRight{
	from{
		opacity: 0;
		transform: translateX(calc(var(--anmMoveSmall) * -1));
	}
	to{
		opacity: 1;
		transform: translateX(0);
	}
}

/* 左から
============================== */
.anmFadeLeft.jsAnmStart{
	animation: anmFadeLeft var(--anmTime) var(--anmEase) var(--anmDelay) forwards;
}
@keyframes anmFadeLeft{
	from{
		opacity: 0;
		transform: translateX(var(--anmMoveSmall));
	}
	to{
		opacity: 1;
		transform: translateX(0);
	}
}

/* 右上から
============================== */
.anmFadeRightTop.jsAnmStart{
	animation: anmFadeRightTop var(--anmTime) var(--anmEase) var(--anmDelay) forwards;
}
@keyframes anmFadeRightTop{
	from{
		opacity: 0;
		transform: translate(var(--anmMove),calc(var(--anmMove) * -1)) scale(var(--anmScale));
	}
	to{
		opacity: 1;
		transform: translate(0,0) scale(1);
	}
}

/* 左上から
============================== */
.anmFadeLeftTop.jsAnmStart{
	animation: anmFadeLeftTop var(--anmTime) var(--anmEase) var(--anmDelay) forwards;
}
@keyframes anmFadeLeftTop{
	from{
		opacity: 0;
		transform: translate(calc(var(--anmMove) * -1),calc(var(--anmMove) * -1)) scale(var(--anmScale));
	}
	to{
		opacity: 1;
		transform: translate(0,0) scale(1);
	}
}

/* 右下から
============================== */
.anmFadeRightBottom.jsAnmStart{
	animation: anmFadeRightBottom var(--anmTime) var(--anmEase) var(--anmDelay) forwards;
}
@keyframes anmFadeRightBottom{
	from{
		opacity: 0;
		transform: translate(var(--anmMove),var(--anmMove)) scale(var(--anmScale));
	}
	to{
		opacity: 1;
		transform: translate(0,0) scale(1);
	}
}

/* 左下から
============================== */
.anmFadeLeftBottom.jsAnmStart{
	animation: anmFadeLeftBottom var(--anmTime) var(--anmEase) var(--anmDelay) forwards;
}
@keyframes anmFadeLeftBottom{
	from{
		opacity: 0;
		transform: translate(calc(var(--anmMove) * -1),var(--anmMove)) scale(var(--anmScale));
	}
	to{
		opacity: 1;
		transform: translate(0,0) scale(1);
	}
}

/* ぼかし
============================== */
.anmBlur.jsAnmStart{
	animation: anmBlur 0.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;
}