@charset "UTF-8";
/* CSS Document */
#section-left {
	width: 100vw;
	height: 100vh;
	background-image: url("../../img/left-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-left02 {
	width: 110vw;
	height: 100vh;
	background-image: url("../../img/left-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-left{
	-webkit-animation: anime-left01 3s ease-in-out;
    animation: anime-left01 3s ease-in-out; 
	animation-fill-mode: forwards;
}
@keyframes anime-left01 {
  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-left02{
	-webkit-animation: anime-left01-b 1s ease-in-out;
    animation: anime-left01-b 1s ease-in-out; 
	animation-fill-mode: forwards;
}
@keyframes anime-left01-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-effect02 {
	width: 200vw;
	height: 100vh;
	position: absolute;
	z-index: 1000;
	opacity: 0;
	left: 0;
	top: 0;
	background-image: url("../../img/n-l-blur.jpg");
	background-size: cover;
	background-position: right center;
	transform: translate(-100vw, 0px);
}
#section00-effect02.action-left{
	-webkit-animation: anime-left02 3s ease-in-out;
    animation: anime-left02 3s ease-in-out; 
	animation-fill-mode: forwards;
}
@keyframes anime-left02 {
  0% {
         opacity: 0;
    }
	 10% {
         opacity: 1;
    }
	30%{
		opacity: 0.4;
		transform: translate(0vw, 0px);
	}
	40%{
		opacity: 0;
		transform: translate(0vw, 0px);
	}
    100% {
		opacity: 0;
		transform: translate(0vw, 0px);
    }
}
#section00-effect02.action-left02{
	-webkit-animation: anime-left02-b 1s ease-in-out;
    animation: anime-left02-b 1s ease-in-out; 
	animation-fill-mode: forwards;
}
@keyframes anime-left02-b {
  0% {
		opacity: 0;
		transform: translate(0vw, 0px);
    }
	60%{
		opacity: 0;
		transform: translate(0vw, 0px);
	}
	70%{
		opacity: 0.4;
		transform: translate(0vw, 0px);
	}
	90% {
         opacity: 1;
    }
	100% {
         opacity: 0;
		z-index: -1;
    }
    
}

#section-left.action-left{
	-webkit-animation: anime-left03 3s ease-in-out;
    animation: anime-left03 3s ease-in-out; 
	animation-fill-mode: forwards;
	
}
@keyframes anime-left03 {
  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-left.action-left02{
	-webkit-animation: anime-left03-b 1s ease-in-out;
    animation: anime-left03-b 1s ease-in-out; 
	animation-fill-mode: forwards;
	
}
@keyframes anime-left03-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-left02.action-left{
	-webkit-animation: anime-left04 3s ease-in-out;
    animation: anime-left04 3s ease-in-out; 
	animation-fill-mode: forwards;
	
}
@keyframes anime-left04 {
  0% {
        opacity: 0;
    }
	5% {
        opacity: 0;
		z-index: 1;
		transform : translateX(-300px);
    }
    30% { 
		opacity: 1;
		transform : translateX(-4vw);
		z-index: 2;
	}
	60% { 
		opacity: 1;
		transform : translateX(-5vw);
		z-index: 2;
	}
	100% { 
		opacity: 1;
		transform : translateX(-5vw);
		z-index: 2;
	}
}
#section-left02.action-left02{
	-webkit-animation: anime-left04-b 1s ease-in-out;
    animation: anime-left04-b 1s ease-in-out; 
	animation-fill-mode: forwards;
	
}
@keyframes anime-left04-b {
  0% { 
		opacity: 1;
		transform : translateX(-5vw);
		z-index: 2;
	}
	40% { 
		opacity: 1;
		transform : translateX(-5vw);
		z-index: 2;
	}
	70% { 
		opacity: 1;
		transform : translateX(-4vw);
		z-index: 2;
	}
	95% {
        opacity: 0;
		z-index: 1;
		transform : translateX(-300px);
    }
	100% {
        opacity: 0;
    }
	
    
	
	
}
#section-left-light {
	width: 110vw;
	height: 100vh;
	background-image: url("../../img/left-light.png");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
	position: absolute;
	mix-blend-mode: lighten;
	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-left-light.action-left{
	-webkit-animation: anime-left-light 3s 1s ease-in-out;
    animation: anime-left-light 3s 1s ease-in-out; 
	animation-fill-mode: forwards;
}
@keyframes anime-left-light {
  0% {
	  transform : translateX(-5vw);
        opacity: 0;
	}
	
    100% {
		transform : translateX(-5vw);
		opacity: 1;
	}
}
#section-left-light.action-left02{
	-webkit-animation: anime-left-light-b 0.5s ease-in-out;
    animation: anime-left-light-b 0.5s ease-in-out; 
	animation-fill-mode: forwards;
}
@keyframes anime-left-light-b {
  0% {
	  transform : translateX(-5vw);
        opacity: 1;
	}
	
    100% {
		transform : translateX(-5vw);
		opacity: 0;
	}
}
.contents02.action-left{
	-webkit-animation: anime-left-cont 4s ease-in-out;
    animation: anime-left-cont 4s ease-in-out; 
	animation-fill-mode: forwards;
}

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

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