@charset "utf-8";
.fade {
	opacity: 0;
	/* -webkit-transform: translateY(30px);
	transform: translateY(30px); */
	-webkit-transition-duration: 1s;
	transition-duration: 1s
}
.fade.is-show {
	opacity: 1;
	/* -webkit-transform: translateY(0);
	transform: translateY(0); */
	-webkit-transition-duration: 1s;
	transition-duration: 1s
}

.opa {
	opacity: 0;
	-webkit-transition-duration: 1s;
	transition-duration: 1s
}
.opa.is-show {
	opacity: 1;
	-webkit-transition-duration: 1s;
	transition-duration: 1s
}
.de01{
    transition-delay: 0.3s;
}


.fade_b {
    opacity: 1;
    transform: translateY(80%);
    filter: blur(4px);
    -ms-filter: blur(4px);
    -webkit-filter: blur(4px);
    -moz-filter: blur(4px);
    -webkit-transition-duration: 1.6s;
    transition-duration: 1.6s
}
.fade_b.is-show {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
    -ms-filter: blur(0);
    -webkit-filter: blur(0);
    -moz-filter: blur(0);
    -webkit-transition-duration: 1.6s;
    transition-duration: 1.6s
}
.fade_t {
    opacity: 1;
    transform: translateY(-80%);
    filter: blur(6px);
    -ms-filter: blur(6px);
    -webkit-filter: blur(6px);
    -moz-filter: blur(6px);
    -webkit-transition-duration: 2.0s;
    transition-duration: 2.0s
}
.fade_t.is-show {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
    -ms-filter: blur(0);
    -webkit-filter: blur(0);
    -moz-filter: blur(0);
    -webkit-transition-duration: 2.0s;
    transition-duration: 2.0s
}
.fade_r {
    opacity: 1;
    transform: translateX(-30%);
    filter: blur(2px);
    -ms-filter: blur(2px);
    -webkit-filter: blur(2px);
    -moz-filter: blur(2px);
    -webkit-transition-duration: 2.0s;
    transition-duration: 2.0s
}
.fade_r.is-show {
    opacity: 1;
    transform: translateX(0);
    filter: blur(0);
    -ms-filter: blur(0);
    -webkit-filter: blur(0);
    -moz-filter: blur(0);
    -webkit-transition-duration: 2.0s;
    transition-duration: 2.0s
}
.blur01 {
    opacity: 0;
    filter: blur(20px);
    -ms-filter: blur(20px);
    -webkit-filter: blur(20px);
    -moz-filter: blur(20px);
    -webkit-transition-duration: 1s;
    transition-duration: 1s
}
.blur01.is-show {
    opacity: 1;
    filter: blur(0);
    -ms-filter: blur(0);
    -webkit-filter: blur(0);
    -moz-filter: blur(0);
    -webkit-transition-duration: 1s;
    transition-duration: 1s
}
.blur02 {
    filter: blur(15px);
    -ms-filter: blur(15px);
    -webkit-filter: blur(15px);
    -moz-filter: blur(15px);
    transition-duration: 1s;
	transition-delay: 0.4s;
}
.blur02.is-show {
    filter: blur(0);
    -ms-filter: blur(0);
    -webkit-filter: blur(0);
    -moz-filter: blur(0);
}
.blur {
    opacity: 0;
    filter: blur(15px);
    -ms-filter: blur(15px);
    -webkit-filter: blur(15px);
    -moz-filter: blur(15px);
    -webkit-transition-duration: 1.8s;
    transition-duration: 1.8s
}
.blur.is-show {
    opacity: 1;
    filter: blur(0);
    -ms-filter: blur(0);
    -webkit-filter: blur(0);
    -moz-filter: blur(0);
    -webkit-transition-duration: 1.8s;
    transition-duration: 1.8s
}
.rotate {
    opacity: 0;
    rotate: 0;
    transform: rotateY(30deg);
    -webkit-transition-duration: 1.8s;
    transition-duration: 1.8s;
}
.rotate.is-show {
    opacity: 1;
    transform: rotateY(0deg);
}
.d01 {
    transition-delay: 0.3s;
}
.d02 {
    transition-delay: 0.6s;
}
.d03 {
    transition-delay: 0.9s;
}
.d04 {
    transition-delay: 1.2s;
}
.d05 {
    transition-delay: 1.5s;
}
.d06 {
    transition-delay: 1.8s;
}
.d07 {
    transition-delay: 2.1s;
}
.d08 {
    transition-delay: 2.48s;
}
.d09 {
    transition-delay: 2.7s;
}
.d10 {
    transition-delay: 3.0s;
}
.d11 {
    transition-delay: 3.3s;
}
.d12 {
    transition-delay: 3.6s;
}



.ani_r,.ani_l,.ani_rl{
    overflow: hidden;
	position: relative;
}

.ani_r::before,.ani_l::before,.ani_rl::before,.ani_rl::after{
    background: #fff;
	content: '';
	left: 0;
	pointer-events: none;
	position: absolute;
	right: 0;
    top: 50%;
	z-index: 1;
	animation: 2s cubic-bezier(.4, 0, .2, 1) forwards;
}

.ani_r.is-show::before{
    animation-name: img-wrap-before;
    height: 100%;
    transform: translate(0,-50%);
}

.ani_l.is-show::before{
    animation-name: img-wrap-after;
    height: 100%;
    transform: translate(0,-50%);
}

.ani_rl.is-show::before{
    animation-name: img-wrap-before;
    height: 100%;
    transform: translate(0,-50%);
}
.ani_rl.is-show::after {
    animation-name: img-wrap-after;
    height: 100%;
    transform: translate(0,-50%);
}

@keyframes img-wrap {
	100% {
		transform: translate(100%,-50%);
	}
}



@keyframes img-wrap-before {
    100% {
        transform: translate(100%,-50%);
    }
}

@keyframes img-wrap-after {
    100% {
        transform: translate(-100%,-50%);
    }
}