/* フェード */
.fadeIn {
	opacity: 0;
	transition: .8s;
	-webkit-transition: .8s;
}
.fadeIn.run {
	opacity: 1;
}
.fadeIn_up {
	opacity: 0;
	transform: translate(0, 20px);
	-webkit-transform: translate(0, 20px);
	transition: .8s;
	-webkit-transition: .8s;
}
.fadeIn_up.run {
	transform: translate(0, 0);
	-webkit-transform: translate(0, 0);
	opacity: 1;
}
.fadeIn_down {
	opacity: 0;
	transform: translate(0, -20px);
	-webkit-transform: translate(0, -20px);
	transition: .8s;
	-webkit-transition: .8s;
}
.fadeIn_down.run {
	transform: translate(0, 0);
	-webkit-transform: translate(0, 0);
	opacity: 1;
}
.fadeIn_right {
	opacity: 0;
	transform: translate(20px, 0px);
	-webkit-transform: translate(20px, 0px);
	transition: .8s;
	-webkit-transition: .8s;
}
.fadeIn_right.run {
	transform: translate(0, 0);
	-webkit-transform: translate(0, 0);
	opacity: 1;
}
.fadeIn_left {
	opacity: 0;
	transform: translate(-20px, 0px);
	-webkit-transform: translate(-20px, 0px);
	transition: .8s;
	-webkit-transition: .8s;
}
.fadeIn_left.run {
	transform: translate(0, 0);
	-webkit-transform: translate(0, 0);
	opacity: 1;
}
/* ディレイ */
.delay01{
	transition-delay: .1s;
}
.delay02{
	transition-delay: .2s;
}
.delay03{
	transition-delay: .3s;
}
.delay04{
	transition-delay: .4s;
}
.delay05{
	transition-delay: .5s;
}
.delay06{
	transition-delay: .6s;
}
.delay07{
	transition-delay: .7s;
}
.delay08{
	transition-delay: .8s;
}
.delay09{
	transition-delay: .9s;
}
.delay10{
	transition-delay: 1s;
}
/* テキストアニメーション１文字ずつ */
.text_order span{
	opacity: 0;
	-webkit-transition: .6s ease-in-out;
	transition: .6s ease-in-out;
}

/* ポヨンと出る */
.poyon{
	transform: translate(-50%, -50%) scale(0);
}
.poyon01{
	transform: scale(0);
}
.poyon02{
	transform: scale(0);
}
.poyon03{
	transform: scale(0);
}
.poyon.run{
	animation: poyon cubic-bezier(0.175, 0.885, 0.32, 1.275) .6s forwards;
}
.poyon.run.loaded{
	animation: poyon_re cubic-bezier(0.175, 0.885, 0.32, 1.275) .8s forwards;
}
.poyon_re.run{
	animation: poyon cubic-bezier(0.175, 0.885, 0.32, 1.275) .8s forwards;
}
.poyon01.run{
	animation: poyon cubic-bezier(0.175, 0.885, 0.32, 1.275) .8s .1s forwards;
}
.poyon02.run{
	animation: poyon cubic-bezier(0.175, 0.885, 0.32, 1.275) .8s .2s forwards;
}
.poyon03.run{
	animation: poyon cubic-bezier(0.175, 0.885, 0.32, 1.275) .8s .3s forwards;
}
.poyon_image{
	transform: scale(0);
}
.poyon_image.run{
	animation: poyon_image cubic-bezier(0.175, 0.885, 0.32, 1.275) .8s forwards;
}
@keyframes poyon {
	0%{
		transform: translate(-50%, -50%) scale(0);
	}
	65%{
		transform: translate(-50%, -50%) scale(1.12);
	}
	100%{
		transform: translate(-50%, -50%) scale(1);
	}
}
@keyframes poyon_re {
	0%{
		opacity: 1;
		transform: translate(-50%, -50%) scale(1);
	}
	20%{
		opacity: 1;
		transform: translate(-50%, -50%) scale(1);
	}
	65%{
		opacity: 1;
		transform: translate(-50%, -50%) scale(1.15);
	}
	100%{
		opacity: 0;
		transform: translate(-50%, -50%) scale(0.4);
	}
}
@keyframes poyon_image {
	0%{
		transform: scale(0);
	}
	60%{
		transform: scale(1.01);
	}
	100%{
		transform: scale(1);
	}
}

/* マスクで動く */
.left_to{
	overflow: hidden;
	opacity: 0;
	position: relative;
}
.right_to{
	overflow: hidden;
	position: relative;
	opacity: 0;
}
.left_to_2{
	overflow: hidden;
	opacity: 0;
	position: relative;
}
.right_to_2{
	overflow: hidden;
	position: relative;
	opacity: 0;
}
@keyframes left_to {
	0%{
		opacity: 0;
		transform: translateX(-100%);
	}
	100%{
		opacity: 1;
		transform: translateX(0%);
	}
}
@keyframes right_to{
	0%{
		opacity: 0;
		transform: translateX(100%);
	}
	100%{
		opacity: 1;
		transform: translateX(0%);
	}
}
.left_to.run{
	animation: left_to 1s ease forwards;
	opacity: 0;
}
.right_to.run{
	animation: right_to 1s ease forwards;
	opacity: 0;
}

@keyframes left_to_2 {
	0%{
		opacity: 0;
		transform: translateX(-100%);
	}
	100%{
		opacity: 1;
		transform: translateX(0%);
	}
}
@keyframes right_to_2{
	0%{
		opacity: 0;
		transform: translateX(100%);
	}
	100%{
		opacity: 1;
		transform: translateX(0%);
	}
}
.left_to_2.run{
	animation: left_to_2 1s 0.4s ease forwards;
	opacity: 0;
}
.right_to_2.run{
	animation: right_to_2 1s 0.4s ease forwards;
	opacity: 0;
}

.zoom_out{
	transform: translate(-50%, -50%) scale(0);
}
.zoom_out.loaded{
	animation: zoom_out 1s ease forwards;
}
@keyframes zoom_out{
	0%{
		opacity: 0;
		transform: translate(-50%, -50%) scale(0);
	}
	1%{
		opacity: 1;
	}
	100%{
		opacity: 1;
		transform: translate(-50%, -50%) scale(12);
	}
}
/* PC ================================================== */
@media all and (min-width:1025px){

}

/* Tablet ================================================== */
@media all and (min-width:600px) and (max-width:1024px){

}

/* SP ================================================== */
@media all and (max-width:599px){

}