@charset "UTF-8";

/*
	common
-----------------------------------------------------------------------------------------------*/
.anm {
	opacity: 0;
}
/* ふわっと（バルーン） */
.fadeIn.anmStart{
	animation: fadeIn 2s ease .3s forwards;
}
@keyframes fadeIn{
	from{
		opacity: 0;
	}
	to{
		opacity: 1;
	}
}
/* 下から（ロゴ 文字 ボタンなど） */
.fadeUp.anmStart{
	animation: fadeUp .7s ease .7s forwards;
}
@keyframes fadeUp{
	from{
		opacity: 0;
		transform: translateY(20px);
	}
	to{
		opacity: 1;
		transform: translateY(0);
	}
}
/* 上から */
.fadeDown.anmStart{
	animation: fadeDown .7s ease .7s forwards;
}
@keyframes fadeDown{
	from{
		opacity: 0;
		transform: translateY(-20px);
	}
	to{
		opacity: 1;
		transform: translateY(0);
	}
}
/* 拡大（リボン 左上） */
.zoomoutLeftTop.anmStart{
	animation: zoomoutLeftTop 2s ease 2s forwards;
}
@keyframes zoomoutLeftTop{
	0% {
		transform: scale(0) translate(300px, 300px);
		opacity: 0;
	}
	20% {
		transform: scale(1) translate(-10px, -10px);
		opacity: 1;
	}
	30% {
		transform: scale(1) translate(0px, 0px);
		opacity: 1;
	}
	40% {
		transform: scale(1) translate(-10px, -10px);
		opacity: 1;
	}
	50% {
		transform: scale(1) translate(0px, 0px);
		opacity: 1;
	}
	60% {
		transform: scale(1) translate(-10px, -10px);
		opacity: 1;
	}
	80% {
		transform: scale(1) translate(0px, 0px);
		opacity: 1;
	}
	100% {
		transform: scale(1) translate(-200px, -200px);
		opacity: 0;
	}
}
/* 拡大（リボン 右上） */
.zoomoutRgihtTop.anmStart{
	animation: zoomoutRgihtTop 2s ease 2s forwards;
}
@keyframes zoomoutRgihtTop{
	0% {
		transform: scale(0) translate(-300px, 300px);
		opacity: 0;
	}
	20% {
		transform: scale(1) translate(10px, -10px);
		opacity: 1;
	}
	30% {
		transform: scale(1) translate(0px, 0px);
		opacity: 1;
	}
	40% {
		transform: scale(1) translate(10px, -10px);
		opacity: 1;
	}
	50% {
		transform: scale(1) translate(0px, 0px);
		opacity: 1;
	}
	60% {
		transform: scale(1) translate(10px, -10px);
		opacity: 1;
	}
	80% {
		transform: scale(1) translate(0px, 0px);
		opacity: 1;
	}
	100% {
		transform: scale(1) translate(200px, -200px);
		opacity: 0;
	}
}
/* 拡大（リボン 左下） */
.zoomoutLeftBtm.anmStart{
	animation: zoomoutLeftBtm 2s ease 2s forwards;
}
@keyframes zoomoutLeftBtm{
	0% {
		transform: scale(0) translate(300px, -300px);
		opacity: 0;
	}
	20% {
		transform: scale(1) translate(-10px, 10px);
		opacity: 1;
	}
	30% {
		transform: scale(1) translate(0px, 0px);
		opacity: 1;
	}
	40% {
		transform: scale(1) translate(-10px, 10px);
		opacity: 1;
	}
	50% {
		transform: scale(1) translate(0px, 0px);
		opacity: 1;
	}
	60% {
		transform: scale(1) translate(-10px, 10px);
		opacity: 1;
	}
	80% {
		transform: scale(1) translate(0px, 0px);
		opacity: 1;
	}
	100% {
		transform: scale(1) translate(-200px, 200px);
		opacity: 0;
	}
}
/* 拡大（リボン 右下） */
.zoomoutRgihtBtm.anmStart{
	animation: zoomoutRgihtBtm 2s ease 2s forwards;
}
@keyframes zoomoutRgihtBtm{
	0% {
		transform: scale(0) translate(-300px, -300px);
		opacity: 0;
	}
	20% {
		transform: scale(1) translate(10px, 10px);
		opacity: 1;
	}
	30% {
		transform: scale(1) translate(0px, 0px);
		opacity: 1;
	}
	40% {
		transform: scale(1) translate(10px, 10px);
		opacity: 1;
	}
	50% {
		transform: scale(1) translate(0px, 0px);
		opacity: 1;
	}
	60% {
		transform: scale(1) translate(10px, 10px);
		opacity: 1;
	}
	80% {
		transform: scale(1) translate(0px, 0px);
		opacity: 1;
	}
	100% {
		transform: scale(1) translate(200px, 200px);
		opacity: 0;
	}
}



/* 右から */
.fadeRight.anmStart{
	animation: fadeRight .7s ease .7s forwards;
}
@keyframes fadeRight{
	from{
		opacity: 0;
		transform: translateX(-20px);
	}
	to{
		opacity: 1;
		transform: translateX(0);
	}
}
/* 左から */
.fadeLeft.anmStart{
	animation: fadeLeft .7s ease .7s forwards;
}
@keyframes fadeLeft{
	from{
		opacity: 0;
		transform: translateX(20px);
	}
	to{
		opacity: 1;
		transform: translateX(0);
	}
}
/* ふわふわ */
@keyframes upDown{
	0%  {transform: translateY(0);}
	50% {transform: translateY(-15px);}
	100%{transform: translateY(0);}
}
@keyframes upDownSp{
	0%  {transform: translateY(0);}
	50% {transform: translateY(-10px);}
	100%{transform: translateY(0);}
}
.upDown01{
	animation: upDown 5s ease 0s infinite;
}
@media screen and (max-width:812px){
	.upDown01{
		animation: upDownSp 5s ease 0s infinite;
	}
}

/* delay */
.anmStart.delay__34s{
	animation-delay: 3.4s;
}
.anmStart.delay__36s{
	animation-delay: 3.6s;
}
.anmStart.delay__37s{
	animation-delay: 3.7s;
}
.anmStart.delay__38s{
	animation-delay: 3.8s;
}
.anmStart.delay__40s{
	animation-delay: 4.0s;
}
.anmStart.delay__42s{
	animation-delay: 4.2s;
}
.anmStart.delay__50s{
	animation-delay: 5.0s;
}