@charset "utf-8";

html{
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
}

body{
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
}



a:hover{
	opacity:0.6;
	filter:alpha(opacity=60);
	-ms-filter: "alpha( opacity=60 )";    
	-webkit-transition: 0.2s ease-in-out;  
	    -moz-transition: 0.2s ease-in-out;  
	    -o-transition: 0.2s ease-in-out;  
	    transition: 0.2s ease-in-out;  
	
}


.mv{
	width: 100%;
	padding-top: 100px;
}

.mv video{
	width: 100%;
	height: 90vh;
}

.naka_fv {
	width: 71%;
	margin: 0 auto;
}

.naka{
	width: 71%;
	max-width: 1900px;
	margin: 0 auto;
}


.naka2{
	width: 70%;
	max-width: 1900px;
	margin: 0 auto;
	overflow: auto;
}


.top_spec{
	padding-top: 16vh;
}


.top_left{
	float: left;
	width: 60%;
}

.top_left img{
	width: 100%;
}

.top_right{
	float: right;
	width: 23%;
}

.top_right img{
	width: 100%;
}


.p01{
	float: right;
	width: 80%;
	margin-top: 10vh;
}

.p01 img{
	width: 100%;	
}


.c01{
	width: 57%;
	float: left;
	margin-top: 5vh;
}

.c01 img{
	width: 100%;
}

.p02{
	margin-top: 8vh;
	float: left;
	width: 66%;
}

.p02 img{
	width: 100%;	
}


.p03{
	float: left;
	margin-left: 6%;
	width: 88%;
	margin-top: 8vh;
}

.p03 img{
	width: 100%;
}


.p04{
	float: right;
	width: 80%;
	margin-top: 15vh;
}

.p04 img{
	width: 100%;
}


.c02{
	width: 100%;
	float: left;
	margin-top: 5vh;
}

.c02 img{
	width: 100%;
}



.p05{
	float: right;
	width: 80%;
	margin-top: 15vh;
}

.p05 img{
	width: 100%;
}


.c03{
	width: 79%;
	float: left;
	margin-top: 5vh;
}

.c03 img{
	width: 100%;
}


.p06{
	float: left;
	width: 53%;
	margin-top: 10vh;
}

.p06 img{
	width: 100%;
}


.p07{
	float: right;
	width: 63%;
	margin-top: 5vh;
}

.p07 img{
	width: 100%;
}


.p08{
	float: left;
	width: 48%;
	margin-top: 10vh;
}

.p08 img{
	width: 100%;
}




footer{
	width: 100%;
	margin-top: 5vh;
	background-color: #DBDBDB;
	padding-top: 3vh;
	padding-bottom: 5vh;
}

.foot_left{
	width: 58%;
	float: left;
}

.foot_right{
	width: 42%;
	float: right;
}


.flogo{
	width: 65%;
	margin-bottom: 12%;
	margin-top: 6%;
/*
	margin-top: 5vh;
	margin-bottom: 8vh;
*/
}


.flogo img{
	height: 23%;
}


.f1{
	width: 88%;
	margin-bottom: 5%;
}

.f1 img{
	width: 100%;
}


.f2{
	width: 38%;
	margin-bottom: 3%;
}

.f2 img{
	width: 100%;
}


.f3{
	width: 52%;
}

.f3 img{
	width: 100%;
}




/*
.fade_off {
    opacity: 0;
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -o-transition: all 1s;
    -ms-transition: all 1s;
    transition: all 1s;
}

.fade_on {
    opacity: 1;
}
*/



.fadeUp{
animation-name:fadeUpAnime;
animation-duration:0.8s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeUpAnime{
  from {
	opacity: 0;
  transform: translateY(100px);
  }

  to {
	opacity: 1;
  transform: translateY(0);
  }
}


/* スクロールをしたら出現する要素にはじめに透過0を指定　*/

.fadeUpTrigger{
	opacity: 0;
}



@media screen and (max-width: 767px) {
	.mv {
		padding-top: 50px;
	}
	.mv video{
		height: auto;
	}
	.top_spec {
		padding-top: 5vh;
	}
	
	.p01 {
		margin-top: 4vh;
	}
	
	.naka{
		width: 90%;
	}
	
	.naka2{
		width: 90%;
	}
	.c01 {
		margin-top: 3vh;
	}
	
	.p02 {
		margin-top: 4vh;
	}
	.p03 {
		margin-top: 5vh;
	}
	.p04 {
		margin-top: 6vh;
	}
	.c02 {
		margin-top: 3vh;
	}
	.p05 {
		margin-top: 5vh;
	}
	.c03 {
		margin-top: 3vh;
	}
	.p06 {
		margin-top: 5vh;
	}
	.p07 {
		margin-top: 3vh;
	}
	.p08 {
		margin-top: 2vh;
	}



.f1{
	width: 91%;
	margin-bottom: 0%;
}

.f1 img{
	width: 100%;
}


.f2{
	width: 38%;
	margin-bottom: 0%;
}

.f2 img{
	width: 100%;
}


.f3{
	width: 52%;
}

.f3 img{
	width: 100%;
}
footer {
	padding: 10px;
}
footer .naka2 {
	width: 95%;
}
.foot_left {
	width: 55%;
}
.foot_right {
	width: 45%;
}
	
	
	
}