@charset "UTF-8";
/* CSS Document */
#section-right {
	width: 100%;
	height: 100vh;
	background-image: url("../../img/right-bg.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
	position: absolute;
	left: 0;
	top: 0;
	opacity: 0;
	z-index: -1;
	transform : translateX(100vw);
	-webkit-transition: all 1s;
    -moz-transition: all 1s;
    -o-transition: all 1s;
    -ms-transition: all 1s;
	transition : all 1s;
}
#section-right02 {
	width: 110vw;
	height: 100vh;
	background-image: url("../../img/right-front.png");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
	position: absolute;
	left: 0;
	top: 0;
	opacity: 0;
	z-index: -1;
	transform : translateX(100vw);
	-webkit-transition: all 1s;
    -moz-transition: all 1s;
    -o-transition: all 1s;
    -ms-transition: all 1s;
	transition : all 1s;
}


#section00.action-right{
	-webkit-animation: anime-right01 3s ease-in-out;
    animation: anime-right01 3s ease-in-out; 
	animation-fill-mode: forwards;
}
@keyframes anime-right01 {
  0% {
        opacity: 1;
	}
	30%{
		opacity: 0.4;
		transform: translate(-100vw, 0px);
	}
	 40% { 
		opacity: 0;
		transform: translate(-100vw, 0px);
	}
    100% { 
		opacity: 0;
		transform: translate(-100vw, 0px);
		z-index: -1;
	}
}

#section00.action-right02{
	-webkit-animation: anime-right01-b 1s ease-in-out;
    animation: anime-right01-b 1s ease-in-out; 
	animation-fill-mode: forwards;
}
@keyframes anime-right01-b {
   0% { 
		opacity: 0;
		transform: translate(-100vw, 0px);
		z-index: -1;
	}
	60% { 
		opacity: 0;
		transform: translate(-100vw, 0px);
	}
	70%{
		opacity: 0.4;
		transform: translate(-100vw, 0px);
	}
	100% {
        opacity: 1;
	}
}
#section00-effect03 {
	width: 200vw;
	height: 100vh;
	position: absolute;
	z-index: 1000;
	opacity: 0;
	left: 0;
	top: 0;
	background-image: url("../../img/n-r-blur.jpg");
	background-size: cover;
	background-position: right center;
	transform: translate(0vw, 0px);
}
#section00-effect03.action-right{
	-webkit-animation: anime-right02 3s ease-in-out;
    animation: anime-right02 3s ease-in-out; 
	animation-fill-mode: forwards;
}
@keyframes anime-right02 {
  0% {
         opacity: 0;
    }
	 10% {
         opacity: 1;
    }
	30%{
		opacity: 0.4;
		transform: translate(-100vw, 0px);
	}
	40%{
		opacity: 0;
		transform: translate(-100vw, 0px);
	}
    100% {
		opacity: 0;
		transform: translate(-100vw, 0px);
		z-index: -1;
    }
}

#section00-effect03.action-right02{
	-webkit-animation: anime-right02-b 1s ease-in-out;
    animation: anime-right02-b 1s ease-in-out; 
	animation-fill-mode: forwards;
}
@keyframes anime-right02-b {
  0% {
		opacity: 0;
		transform: translate(-100vw, 0px);
    }
	60%{
		opacity: 0;
		transform: translate(-100vw, 0px);
	}
	70%{
		opacity: 0.4;
		transform: translate(-100vw, 0px);
	}
	90% {
         opacity: 1;
    }
	100% {
         opacity: 0;
		z-index: -1;
    }
}

#section-right.action-right{
	-webkit-animation: anime-right03 2s ease-in-out;
    animation: anime-right03 2s ease-in-out; 
	animation-fill-mode: forwards;
	
}
@keyframes anime-right03 {
  0% {
        opacity: 0;
    }
	5% {
        opacity: 0;
		z-index: 1;
		transform : translateX(50px);
    }
    30% { 
		opacity: 1;
		transform : translateX(0px);
		z-index: 2;
	}
	100% { 
		opacity: 1;
		transform : translateX(0px);
		z-index: 2;
	}
}
#section-right.action-right02{
	-webkit-animation: anime-right03-b 1s ease-in-out;
    animation: anime-right03-b 1s ease-in-out; 
	animation-fill-mode: forwards;
	
}
@keyframes anime-right03-b {
  0% { 
		opacity: 1;
		transform : translateX(0px);
		z-index: 2;
	}
	 70% { 
		opacity: 1;
		transform : translateX(0px);
		z-index: 2;
	}
	95% {
        opacity: 0;
		z-index: 1;
		transform : translateX(50px);
    }
	100% {
        opacity: 0;
    }
}

#section-right02.action-right{
	-webkit-animation: anime-right04 2s ease-in-out;
    animation: anime-right04 2s ease-in-out; 
	animation-fill-mode: forwards;
	
}
@keyframes anime-right04 {
  0% {
        opacity: 0;
    }
	5% {
        opacity: 0;
		z-index: 1;
		transform : translateX(300px);
    }
    30% { 
		opacity: 1;
		transform : translateX(-6vw);
		z-index: 2;
	}
	60% { 
		opacity: 1;
		transform : translateX(-5vw);
		z-index: 2;
	}
	100% { 
		opacity: 1;
		transform : translateX(-5vw);
		z-index: 2;
	}
}
#section-right02.action-right02{
	-webkit-animation: anime-right04-b 1s ease-in-out;
    animation: anime-right04-b 1s ease-in-out; 
	animation-fill-mode: forwards;
	
}
@keyframes anime-right04-b{
 0% { 
		opacity: 1;
		transform : translateX(-5vw);
		z-index: 2;
	}
	40% { 
		opacity: 1;
		transform : translateX(-5vw);
		z-index: 2;
	}
	70% { 
		opacity: 1;
		transform : translateX(-6vw);
		z-index: 2;
	}
	95% {
        opacity: 0;
		z-index: 1;
		transform : translateX(300px);
    }
	100% {
        opacity: 0;
    }
}
#section-right-light {
	width: 110vw;
	height: 100vh;
	background-image: url("../../img/right-light.png");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
	position: absolute;
	mix-blend-mode: multiply;
	left: 0;
	top: 0;
	opacity: 0;
	z-index: 3;
	-webkit-transition: all 1s;
    -moz-transition: all 1s;
    -o-transition: all 1s;
    -ms-transition: all 1s;
	transition : all 1s;
}
#section-right-light.action-right{
	-webkit-animation: anime-right-light 2s 1s ease-in-out;
    animation: anime-right-light 2s 1s ease-in-out; 
	animation-fill-mode: forwards;
}
@keyframes anime-right-light {
  0% {
	  transform : translateX(-5vw);
        opacity: 0;
	}
	
    100% {
		transform : translateX(-5vw);
		opacity: 1;
	}
}
#section-right-light.action-right02{
	-webkit-animation: anime-right-light-b 0.5s ease-in-out;
    animation: anime-right-light-b 0.5s ease-in-out; 
	animation-fill-mode: forwards;
}
@keyframes anime-right-light-b {
  0% {
	  transform : translateX(-5vw);
        opacity: 1;
	}
	
    100% {
		transform : translateX(-5vw);
		opacity: 0;
	}
}

.contents03.action-right{
	-webkit-animation: anime-right-cont 4s ease-in-out;
    animation: anime-right-cont 4s ease-in-out; 
	animation-fill-mode: forwards;
}

@keyframes anime-right-cont {
	0% { 
		opacity: 0;
		z-index: 5;
	}
	75% { 
		opacity: 0;
	}
  100% {
        opacity: 1;
    }
}
.contents03.action-right02{
	-webkit-animation: anime-right-cont02 2s ease-in-out;
    animation: anime-right-cont02 2s ease-in-out; 
	animation-fill-mode: forwards;
}

@keyframes anime-right-cont02 {
	 0% {
        opacity: 1;
    }25% { 
		opacity: 0;
	}
	100% { 
		opacity: 0;
		z-index: -1;
	}
	
 
}