@charset "utf-8";


/* アニメーションイージング */
.left_in,
.right_in,
.right_in_short,
.bottom_in,
.is_show{
    transition: 2s cubic-bezier(0.165, 0.84, 0.44, 1);
}

/* 低位置に動かす */
.delay_numbers.on .right_in,
.delay_numbers.on .right_in_short,
.delay_numbers.on .left_in,
.delay_numbers.on .bottom_in,
.bottom_in.on,
.right_in.on,
.right_in_short.on,
.left_in.on{
    opacity: 1;
    transform: translate(0,0);
}


/* 左から */
.left_in{
    opacity: 0;
    transform: translate(-50px,0);
}

/* 右から */
.right_in{
    opacity: 0;
    transform: translate(50px,0);
}

.right_in_short{
    opacity: 0;
    transform: translate(20px,0);
}

/* 下から */
.bottom_in{
    opacity: 0;
    transform: translate(0,20px);
}


/* 遅れさせる */
.delay1{
    transition-delay: .3s;
}

.delay2{
    transition-delay: .6s;
}

.delay3{
    transition-delay: .9s;
}

.delay4{
    transition-delay: 1.2s;
}

.delay5{
    transition-delay: 1.5s;
}

.delay6{
    transition-delay: 1.8s;
}

.delay7{
    transition-delay: 2.1s;
}

.delay8{
    transition-delay: 2.4s;
}


/* 少し遅れさせる */
.dl1{
    transition-delay: .35s;
}

.dl2{
    transition-delay: .4s;
}

.dl3{
    transition-delay: .45s;
}

.dl4{
    transition-delay: .5s;
}

.dl5{
    transition-delay: .55s;
}

.dl6{
    transition-delay: .6s;
}

.dl7{
    transition-delay: .65s;
}

.dl8{
    transition-delay: .7s;
}

.dl9{
    transition-delay: .75s;
}

/* 画像アニメーション */
.blur_photo{
	opacity: 0;
	-moz-transition: -moz-transform 0.5s linear;
	-webkit-transition: -webkit-transform 0.5s linear;
	-o-transition: -o-transform 0.5s linear;
	-ms-transition: -ms-transform 0.5s linear;
	transition: transform 0.5s linear;
	-webkit-animation-duration: 1.5s;
	animation-duration: 1.5s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
}

.on .blur_photo,
.blur_photo.on{
	-webkit-animation-name: imageBlur;
	animation-name: imageBlur;
	opacity: 1;
	transition: .8s;
}


/* 少し遅れさせる */
.anime_dl1{
    animation-delay: .3s;
}

.anime_dl2{
    animation-delay: .5s;
}

.anime_dl3{
    animation-delay: .7s;
}

.anime_dl4{
    animation-delay: .9s;
}

@keyframes imageBlur {
	from {
		opacity: 0;
		-webkit-filter: blur(15px);
		-moz-filter: blur(15px);
		-ms-filter: blur(15px);
		-o-filter: blur(15px);
		filter: blur(15px);
	}

	to {
		opacity: 1;
		-webkit-filter: blur(0px);
		-moz-filter: blur(0px);
		-ms-filter: blur(0px);
		-o-filter: blur(0px);
		filter: blur(0px);
	}
}