@charset "utf-8";
/* CSS Document */

@keyframes line {
  0% {
    transform-origin: left bottom;
    transform: scale(0, 1);
  }
  20% {
    transform-origin: left bottom;
    transform: scale(1, 1);
	 opacity: 1;
  }
  
}
.l_off {
  width: 1px;
　height: 2px;
 opacity: 0;
}
.l_on {
  width: 100%;
  height: 1px;
  background: #fff;
animation: line 2s ease-in 0.5s 1 normal;
    -webkit-animation: line 2s ease-in 0.5s 1 normal;
	z-index: 300;
position: fixed;
	top: 50%;
}
.box0 {height: 700px; position: relative; background: url(img/index/main.jpg)center center no-repeat;background-size:cover;}
.box0 .title {display: flex;}
.box0 .textarea {
	position: absolute;
	top: 65%;
	bottom: 0;
	left: 0;
	max-width: 1200px;
	right: 0;
	margin: auto;
}
@keyframes vertica{
  0% {
   
  }
	22% {
		-webkit-transform: translateY(60%);
    transform: translateY(60%);
	}
	50% {
		-webkit-transform: translateY(60%);
    transform: translateY(60%);
	}
	75% {
		-webkit-transform: translateY(60%);
    transform: translateY(60%);
	}
  100% {
    -webkit-transform: translateY(105%);
    transform: translateY(105%);
  }
}
.box00 {
  overflow: auto;
    width: 100%;
    height: 100%;
    background: url(img/index/main_bg.jpg)top center repeat;
    transition: 0.3s ease-in-out;
    -webkit-transform: translateY(50%);
    transform: translateY(50%);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 200;
	}
.box00_on {
   animation: vertica 3s ease-out 2s 1 forwards;
    -webkit-animation: vertica 3s ease-out 2s 1 forwards;
}
@keyframes vertica11{
  0% {
   
  }
	22% {
		-webkit-transform: translateY(-60%);
    transform: translateY(-60%);
	}
	50% {
		-webkit-transform: translateY(-60%);
    transform: translateY(-60%);
	}
	75% {
		-webkit-transform: translateY(-60%);
    transform: translateY(-60%);
	}
  100% {
    -webkit-transform: translateY(-105%);
    transform: translateY(-105%);
  }
}
.box11 {
  overflow: auto;
    width: 100%;
    height: 100%;
    background: url(img/index/main_bg02.jpg)top center repeat;
    transition: 0.3s ease-in-out;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 200;
	}
.box11_on {
   animation: vertica11 3s ease-out 2s 1 forwards;
    -webkit-animation: vertica11 3s ease-out 2s 1 forwards;
}
@keyframes logo {
  0% {
   opacity: 0;
  }
	40% {
	-webkit-transform: translateX(0%);
    transform: translateX(0%);
		opacity: 1;
	}
	50% {
		-webkit-transform: translateX(0%);
    transform: translateX(0%);
		opacity: 0;
	}
	60% {
		-webkit-transform: translateX(0%);
    transform: translateX(0%);
			-webkit-transform: translateY(-35%);
    transform: translateY(-35%);
		opacity: 0;
	}
	64% {
		-webkit-transform: translateX(0%);
    transform: translateX(0%);
			-webkit-transform: translateY(-35%);
    transform: translateY(-35%);
		opacity: 0;
	}
  100% {
    opacity: 0;
	  	-webkit-transform: translateX(0%);
    transform: translateX(0%);
	   	-webkit-transform: translateY(-35%);
    transform: translateY(-35%);
	  position: absolute;
  }
  
}
@keyframes logo2 {
  0% {
   opacity: 0;
  }
	70% {opacity: 0;}
  100% {
    opacity: 1;
  }
  
}
.openlogo {
	top: 43%;
	position: fixed;
	left: 0;
	right: 0;
	margin: auto;
	z-index: 100;
	width: 144px;
	opacity: 0;
	 -webkit-transform: translateX(10%);
    transform: translateX(10%);
}
.openlogo2 {
	top: 10%;
	position: absolute;
	left: 0;
	right: 0;
	margin: auto;
	z-index: 100;
	width: 450px;
	opacity: 0;
}
.openlogo_on {
	  animation: logo 6s ease-out 2s 1 forwards;
    -webkit-animation: logo 6s ease-out 2s 1 forwards;
}
.openlogo_2 {
	  animation: logo2 5s ease-out 1.5s 1 forwards;
    -webkit-animation: logo2 5s ease-out 1.5s 1 forwards;
}
@keyframes hover-intest {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.k01 {
animation: hover-intest 1.6s ease-in 5s 1 forwards;
    -webkit-animation: hover-intest 1.6s ease-in 5s 1 forwards;
}
.k02 {
animation: hover-intest 1s ease-in 6s 1 forwards;
    -webkit-animation: hover-intest 1s ease-in 6s 1 forwards;
}
.k03 {
animation: hover-intest 1s ease-in 7s 1 forwards;
    -webkit-animation: hover-intest 1s ease-in 7s 1 forwards;
}
.k05 {
animation: hover-intest 1s ease-in 8s 1 forwards;
    -webkit-animation: hover-intest 1s ease-in 8s 1 forwards;
}
.k06 {
animation: hover-intest 1s ease-in 9s 1 forwards;
    -webkit-animation: hover-intest 1s ease-in 9s 1 forwards;
}
.k07 {
animation: hover-intest 1.3s ease-in 10s 1 forwards;
    -webkit-animation: hover-intest 1.3s ease-in 10s 1 forwards;
}
.kts,.kts2,.kts3,.kts5,.kts6,.kts7 {opacity: 0;}
.kts {margin-top: -47px;}
.kts5,.kts6,.kts7 {margin-top: -50px;}

/*動き一覧*/
.fedeunder {
    -webkit-transform: translateY(50px);
    transform: translateY(50px);
	opacity: 0;
}
.fedeunder02 {
    -webkit-transform: translateY(50px);
    transform: translateY(50px);
	opacity: 0;
}
.fedeunder03 {
    -webkit-transform: translateY(50px);
    transform: translateY(50px);
	opacity: 0;
}
.fedeunder04 {
    -webkit-transform: translateY(50px);
    transform: translateY(50px);
	opacity: 0;
}
.fedeunder05 {
    -webkit-transform: translateY(50px);
    transform: translateY(50px);
	opacity: 0;
}
.fedeleft {
    -webkit-transform: translateX(-50px);
    transform: translateX(-50px);
	opacity: 0;
}
.federight {
    -webkit-transform: translateX(50px);
    transform: translateX(50px);
	opacity: 0;
}
@keyframes under {
  100% {
    opacity: 1;
	  	-webkit-transform: translateY(0%);
    transform: translateY(0%);
	  	opacity: 1;
  }
}
@keyframes mleft {
  100% {
    opacity: 1;
	  	-webkit-transform: translateX(0%);
    transform: translateX(0%);
	  	opacity: 1;
  }
}
.moveunder {
	  animation: under .5s 0s forwards;
    -webkit-animation: under .5s 0s forwards;
}
.moveunder02 {
	  animation: under .5s .2s forwards;
    -webkit-animation: under .5s .2s forwards;
}
.moveunder03 {
	  animation: under .5s .4s forwards;
    -webkit-animation: under .5s .4s forwards;
}
.moveunder04 {
	  animation: under .5s .6s forwards;
    -webkit-animation: under .5s .6s forwards;
}
.moveunder05 {
	  animation: under .5s .8s forwards;
    -webkit-animation: under .5s .8s forwards;
}
.moveleft {
	  animation: msleft 1s 0s forwards;
    -webkit-animation: mleft 1s 0s forwards;
}