@charset "utf-8";

/* inview */
.fade {
    opacity: 0;
    -webkit-transition-duration: 1.8s;
    transition-duration: 1.8s
}
.fade.is-show {
    opacity: 1;
    -webkit-transition-duration: 1.8s;
    transition-duration: 1.8s
}
.fade_t {
    opacity: 0;
    transform: translateY(30px);
    -webkit-transition-duration: 1.8s;
    transition-duration: 1.8s
}
.fade_t.is-show {
    opacity: 1;
    transform: translateY(0);
    -webkit-transition-duration: 1.8s;
    transition-duration: 1.8s
}
.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
}
.blur {
    opacity: 0;
    filter: blur(20px);
    -ms-filter: blur(20px);
    -webkit-filter: blur(20px);
    -moz-filter: blur(20px);
    -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.belt_item::before{
    background: #ececec;
}
.ani_r::before,.ani_l::before,.ani_rl::before,.ani_rl::after{
    background: #fff;
    content: '';
    left: 0;
    pointer-events: none;
    position: absolute;
    right: 0;
    height: 100%;
    top: 0;
    z-index: 1;
    animation: 2s cubic-bezier(.4, 0, .2, 1) forwards;
}
.ani_l.d02::before{
	animation: 3s cubic-bezier(.4, 0, .2, 1) forwards;
}
.ani_r.is-show::before{
    animation-name: img-wrap-before;
    height: 100%;
    transform: translate(0,0%);
}

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

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

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



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

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


/* @media all and (-ms-high-contrast: none) {
    .ani_r::before,.ani_l::before,.ani_rl::before,.ani_rl::after{
        animation: 2s forwards;
    }
    .ani_rl.is-show::before{
        transform: translate(0,-50%);
    }
    .ani_rl.is-show::after {
        transform: translate(0,-50%);
    }
  } */