body{
	overflow-y: scroll;
}


body.loading{
	position: fixed;
	width: 100%;

}


body #wrap,
body #gfooter{
	height: 0;
/*	overflow: hidden;
*/	padding: 0;
}

body.load{
overflow: auto;
}

body.load #wrap,
body.load #gfooter{
	display: block;
/*	overflow: inherit;
*/	height: auto;
}





@media screen and (min-width: 751px) {




	/*---------------------------------------------------------------
			
			 kv

	---------------------------------------------------------------*/



	#kv{
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
	}


	.slide{
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		opacity: 0;

		-webkit-transition: opacity 600ms ease;
		-o-transition: opacity 600ms ease;
		transition: opacity 600ms ease;

		background-size: cover;
		background-repeat: no-repeat;
		background-position: 50% 50%;

	}




	.slide.on{
		opacity: 1;
	}
	






	/*---------------------------------------------------------------
			
			slide nav

	---------------------------------------------------------------*/



	.slide-nav{
		position: absolute;
		right: 30px;
		bottom: 30px;
		z-index: 50;
		opacity: 0;

		-webkit-transition: opacity 500ms ease;
		-o-transition: opacity 500ms ease;
		transition: opacity 500ms ease;

	}

	.slide-nav li{
		float: left;
	}

	.slide-nav li + li{
		margin-left: 22px;
	}
	
	.slide-nav li a{
		display: block;
		width: 8px;
		height: 8px;
		border-radius: 100%;
		background: #fff;
		opacity: 0.3;
	}

	.slide-nav li.active a{
		opacity: 1;
	}

	.slide-nav li a:hover{
		opacity: 1;
	}





	/*---------------------------------------------------------------
			
		main main-layer-1

	---------------------------------------------------------------*/



	.main-layer-1{
		position: relative;
		width: 100%;
		height: 100vh;

		z-index: 10;

	}



	.main-layer-1 h2.main-logo{
		position: absolute;
		top: 50%;
		left: 50%;
		margin: -211px 0 0 -118.5px;
		width: 237px;
		height: 422px;
		text-indent: -9999px;
		background: url(../img/logo_goto.png) 50% 0 no-repeat;
		opacity: 0;


		-webkit-transition: opacity 500ms ease;
		-o-transition: opacity 500ms ease;
		transition: opacity 500ms ease;

	}

	.main-layer-1 h2.main-logo.load{
		opacity: 1;
	}



	.main-layer-1 h2.sub-logo{
		position: absolute;
		right: 75px;
		bottom: 75px;
		width: 130px;
		height: 239px;
		text-indent: -9999px;
		background: url(../img/logo_goto.png) 50% 0 no-repeat;
		background-size: auto 100%;
		opacity: 0;


		-webkit-transition: opacity 500ms ease;
		-o-transition: opacity 500ms ease;
		transition: opacity 500ms ease;

	}

	.main-layer-1.on .sub-logo{
		opacity: 1;
	}

	.main-layer-1.on h2.main-logo.load{
		opacity: 0;
	}

	.main-layer-1 .scroll{
		position: absolute;
	}

	.main-layer-1 .slide-nav{
		position: absolute;
		opacity: 0;

		-webkit-transition: opacity 500ms ease;
		-o-transition: opacity 500ms ease;
		transition: opacity 500ms ease;
	}


	.main-layer-1.show .slide-nav{
		opacity: 1;
	}
	

	.main-layer-1 .product-link{
		position: absolute;
		left: 30px;
		bottom: 30px;
		opacity: 0;

		-webkit-transition: opacity 500ms ease;
		-o-transition: opacity 500ms ease;
		transition: opacity 500ms ease;
	}
	.main-layer-1.show .product-link{
		opacity: 1;
	}
	.main-layer-1 .product-link a{
		position: relative;
		display: block;
		padding: 0 40px 0 34px;
		height: 34px;
		line-height: 34px;
		box-sizing: border-box;
		border-radius: 5px;
		font-size: 14px;
		color: #fff;
		font-weight: bold;
		background: #3e9ca6;

		-webkit-transition: opacity 500ms ease;
		-o-transition: opacity 500ms ease;
		transition: opacity 500ms ease;

	}
	.main-layer-1 .product-link a br{
		display: none;
	}
	.main-layer-1 .product-link a:after{
		position: absolute;
		content: "";
		top: 50%;
		right: 8px;	
		margin: -7px 0 0;
		width: 8px;
		height: 14px;
		background: url(../../shared/img/arrow_r_wh.png) 100% 50% no-repeat;
		background-size: 100% 100%;
	}
	.main-layer-1 .product-link a:hover{
		opacity: 0.7;
	}


	/*---------------------------------------------------------------
			
			 lower-kv

	---------------------------------------------------------------*/



	.kv{
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
	}

	.lower .main-area{
		position: relative;
		width: 100%;
		height: 100vh;
	}



	/*---------------------------------------------------------------
			
			 wrap

	---------------------------------------------------------------*/


	body.load #wrap{
		position: relative;
		padding-top: 60px;
		z-index: 100;
	}

	#wrap:before{
		content: "";
		display: block;
		top: 0;
		left: 0;
		position: absolute;
		width: 100%;
		height: 60px;
		background: #fff;
	}


	/*---------------------------------------------------------------
			
			 news

	---------------------------------------------------------------*/


	.news-sp{
		display: none;
	}

	.news{
		display: none;
		position: absolute;
		bottom: 30px;
		left: 30px;
		font-size: 14px;

		border-radius: 4px;
		background: #000;
		z-index: 20;

		opacity: 0;

		-webkit-transition: opacity 500ms ease;
		-o-transition: opacity 500ms ease;
		transition: opacity 500ms ease;

	}


	.show .news{
		opacity: 1;
	}

	.news a{
		position: relative;
		display: block;
		padding: 12px 40px 12px 12px;
		color: #fff;

	}

	.news a:after{
		position: absolute;
		content: "";
		top: 50%;
		right: 13px;
		
		margin: -7px 0 0;

		width: 8px;
		height: 14px;
		background: url(../../shared/img/arrow_r_wh.png) 100% 50% no-repeat;
		background-size: 8px 14px;
	}

	.news dl dt{
		display: inline-block;
		font-weight: bold;
	}
	.news dl dd{
		display: inline-block;
	}



	/*---------------------------------------------------------------
			
			 about

	---------------------------------------------------------------*/

	#about{
		position: relative;
		width: 100%;
		height: 780px;
		overflow: hidden;
	}
	#about .dot{
		position: absolute;
		display: block;
		left: 50%;
		margin: 0 0 0 -400px;
		width: 800px;
		height: 780px;
		background: url(../img/bg_dot.png) 50% 0 repeat;
	}
	#about:before{
		content: "";
		position: absolute;
		display: block;
		width: 100%;
		height: 780px;
		top: 0;
		right: 50%;
		margin: 0 400px 0 0;

		background: #fff;
	}
	#about:after{
		content: "";
		position: absolute;
		display: block;
		width: 100%;
		height: 780px;
		top:0;
		left: 50%;
		margin: 0 0 0 400px;

		background: #fff;
	}

	#about article{
		position: relative;
		padding: 90px 0 0;
		height: 780px;

		text-align: center;
		background: url(../img/bg_about.png) 50% 0 no-repeat;
		box-sizing: border-box;

		z-index: 10;
	} 

	#about article h2{
		margin: 0 0 75px;
		width: 100%;
		height: 25px;
		text-indent: -9999px;
		background: url(../img/title_about.png) 50% 0 no-repeat;
		background-size: auto 100%; 
	}

	#about article p{
		font-weight: bold;
		line-height: 1.8;
	}

	#about article p + p{
		margin-top: 35px;
	}



	/*---------------------------------------------------------------
			
			 topics

	---------------------------------------------------------------*/


	#topics{
		padding: 80px 0;
		background: #fff;
	}
	#topics h2{
		width: 100%;
		height: 23px;
		text-indent: -9999px;
		background: url(../img/title_topics.png) 50% 0 no-repeat;
		background-size: auto 100%; 
	}
	#topics-box{
		margin: 30px auto 0;
		max-width: 880px;
	}
	#topics-box .topics-box-inner{
		padding: 15px 7px;
		border-top: 1px solid #adadad;
		border-bottom: 1px solid #adadad;
	}
	#topics-box dt,
	#topics-box dd{
		display: inline-block;
	}
	#topics-box dt .cat{
		display: inline-block;
		padding: 0 15px;
		height: 24px;
		color: #fff;
		border-radius: 4px;
		line-height: 24px;
		font-size: 12px;
		font-weight: bold;
		background: #000000;
	}
	#topics-box dt .date{
		margin: 0 0 0 30px;
		display: inline-block;
		line-height: 24px;
		font-size: 14px;
	}
	#topics-box dd{
		margin: 0 0 0 30px;
		font-size: 18px;
		font-weight: bold;
		line-height: 24px;
	}

	#topics .topics-link{
		margin: 30px 0 0;
		text-align: center;
	}
	#topics .topics-link a{
		position: relative;
		text-decoration: underline;
		font-weight: bold;
	}
	#topics .topics-link a:hover{
		text-decoration: none;
	}
	#topics #topics-box a{
		position: relative;
		display: block;
		-webkit-transition: opacity ease 200ms;
		-o-transition: opacity ease 200ms;
		transition: opacity ease 200ms;
	}
	#topics #topics-box a:hover{
		opacity: 0.6;
	}		
	#topics #topics-box a:after{
		position: absolute;
		content: "";
		top: 50%;
		right: 10px;
		margin: -8px 0 0;
		display: inline-block;
		width: 9px;
		height: 16px;
		background: url(../../shared/img/arrow_r.png) 100% 50% no-repeat;
		box-sizing: border-box;
		z-index: 30;
	}




}







@media screen and (min-width: 751px) and (max-width: 1180px) {
	



}



@media screen and (min-width: 751px) and (max-width: 780px) {
	

}


@media screen and (max-width: 950px) {

	#wrap {
		padding-top: 0;
	}


}






@media screen and (max-width: 750px) {




	/*---------------------------------------------------------------
			
			 kv

	---------------------------------------------------------------*/



	#kv{
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
	}





	.slide{
		position: absolute;
		top: 0;
		width: 100%;
		height: 100%;
		opacity: 0;

		-webkit-transition: opacity 600ms ease;
		-o-transition: opacity 600ms ease;
		transition: opacity 600ms ease;



	}


	.slide.on{
		opacity: 1;
	}
	
	.slide-1{
		background-repeat: no-repeat;
		background-position: 50% 50%;
		background-size: auto 100%;
	}

	.slide-2{
		background-repeat: no-repeat;
		background-position: 50% 50%;
		background-size: auto 100%;
	}

	.slide-3{
		background-repeat: no-repeat;
		background-position: 50% 50%;
		background-size: auto 100%;
	}

	.slide-4{
		background-repeat: no-repeat;
		background-position: 40% 50%;
		background-size: auto 100%;
	}

	.slide-5{
		background-repeat: no-repeat;
		background-position: 70% 50%;
		background-size: auto 100%;
	}






	/*---------------------------------------------------------------
			
		 slide  nav

	---------------------------------------------------------------*/




	.slide-nav{
		position: absolute;
		right: 0;
		bottom: 0;
		height: 60px;
		width: 130px;

		z-index: 50;
	}

	.slide-nav ul{
		position: absolute;
		bottom: 20px;
		right: 20px;
		margin: -3.25px 0 0;
		font-size: 0;
	}

	.slide-nav li{
		display: inline-block;
	}

	.slide-nav li + li{
		margin-left: 12px;
	}
	
	.slide-nav li a{
		display: block;
		width: 6.5px;
		height: 6.5px;
		border-radius: 100%;
		background: #fff;
		opacity: 0.3;
	}

	.slide-nav li.active a{
		opacity: 1;
	}




	/*---------------------------------------------------------------
			
			main-layer-1

	---------------------------------------------------------------*/


	.main-layer-1{
		position: relative;
		z-index: 10;

	}


	.main-layer-1 h2.main-logo{
		position: absolute;
		top: 50%;
		left: 50%;
		margin: -106px 0 0 -62.5px;		
		width: 115px;
		height: 212px;
		text-indent: -9999px;
		background: url(../img/logo_goto.png) 50% 0 no-repeat;
		background-size: 100% 100%;
		opacity: 0;
		-webkit-transition: opacity 500ms ease;
		-o-transition: opacity 500ms ease;
		transition: opacity 500ms ease;

	}

	.main-layer-1 h2.main-logo.load{
		opacity: 1;
	}

	.main-layer-1 h2.sub-logo{
		position: absolute;
		right: 25px;
		bottom: 50px;
		width: 55px;
		height: 101px;
		text-indent: -9999px;
		background: url(../img/logo_goto.png) 50% 0 no-repeat;
		background-size: auto 100%;
		opacity: 0;

		-webkit-transition: opacity 500ms ease;
		-o-transition: opacity 500ms ease;
		transition: opacity 500ms ease;
	}

	.main-layer-1.on .sub-logo{
		opacity: 1;
	}

	.main-layer-1.on h2.main-logo.load{
		opacity: 0;
	}

	.main-layer-1 .scroll{
		position: absolute;
	}

	.main-layer-1 .slide-nav{
		position: absolute;
		opacity: 0;

		-webkit-transition: opacity 500ms ease;
		-o-transition: opacity 500ms ease;
		transition: opacity 500ms ease;

	}
	.main-layer-1.show .slide-nav{
		opacity: 1;
	}
	

	.main-layer-1 .product-link{
		position: absolute;
		left: 20px;
		bottom: 20px;
		opacity: 0;
		-webkit-transition: opacity 500ms ease;
		-o-transition: opacity 500ms ease;
		transition: opacity 500ms ease;
	}
	.main-layer-1.show .product-link{
		opacity: 1;
	}
	.main-layer-1 .product-link a{
		position: relative;
		display: block;
		padding: 10px; 
		width: 118px;
		box-sizing: border-box;
		border-radius: 4px;
		line-height: 1.3;
		font-size: 12px;
		color: #fff;
		font-weight: bold;
		background: #3e9ca6;
	}
	.main-layer-1 .product-link a:after{
		position: absolute;
		content: "";
		top: 50%;
		right: 8px;	
		margin: -5px 0 0;
		width: 6px;
		height: 10px;
		background: url(../../shared/img/arrow_r_wh.png) 100% 50% no-repeat;
		background-size: 6px 10px;
	}



	/*---------------------------------------------------------------
			
			 lower-kv

	---------------------------------------------------------------*/



	.kv{
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
	}

	.lower .main-area{
		position: relative;
		width: 100%;
		height: 100vh;
	}



	/*---------------------------------------------------------------
			
			 wrap

	---------------------------------------------------------------*/


	#contents{
		position: relative;
		overflow: hidden;
		padding-top: 45px;
	}
	#contents:before{
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		display: block;
		width: 100%;
		height: 47px;
		background: #fff;
	}
	body.load #wrap{
		position: relative;
		padding: 0;
		z-index: 210;

	}







	/*---------------------------------------------------------------
			
			 news

	---------------------------------------------------------------*/


	.news{
		display: none;
	}

	.news-sp{
		display: none;
		padding: 20px 20px 40px;
		font-size: 12px;
		background: #fff;
		z-index: 20;

	}

	.news-sp a{
		position: relative;
		display: block;
		padding: 12px 16px 12px 12px;
		color: #fff;
		background: #000;
		border-radius: 4px;

	}

	.news-sp a:after{
		position: absolute;
		content: "";
		top: 50%;
		right: 13px;	
		margin: -5px 0 0;
		width: 6px;
		height: 10px;
		background: url(../../shared/img/arrow_r_wh.png) 100% 50% no-repeat;
		background-size: 6px 10px;
	}

	.news-sp dl dt{
		font-weight: bold;
	}











	/*---------------------------------------------------------------
			
			 about

	---------------------------------------------------------------*/


	#about{
		position: relative;
		padding: 0;
		width: 100%;
/*		overflow: hidden;
*/
	}
	#about .dot{
		position: absolute;
		display: block;
		left: 0;
		width: 100%;
		height: 100%;
		background: url(../img/bg_dot.png) 50% 0 repeat;
	}



	#about:before{
		content: "";
		position: absolute;
		display: block;
		width: 100%;
		height: 100%;
		top: 0;
		right: 50%;
		margin: 0 187px 0 0;

		background: #fff;
		z-index: 5;
	}


	#about:after{
		content: "";
		position: absolute;
		display: block;
		width: 100%;
		height: 100%;
		top:0;
		left: 50%;
		margin: 0 0 0 187px;

		background: #fff;
		z-index: 5;
	}



	#about article{
		position: relative;
		padding: 0 0 60px;
		height: 625px;
		text-align: center;

		background: url(../img/bg_about_sp.png) 50% 50% no-repeat;
		background-size: 374px 511px;
		z-index: 10;
	} 
	#about article:before{
		content: "";
		position: absolute;
		display: block;
		width: 100%;
		height: 90px;
		top:-2px;
		left: 0;

		background: #fff;
		z-index: 5;
	} 
	#about article:after{
		content: "";
		position: absolute;
		display: block;
		width: 100%;
		height: 90px;
		bottom: -2px;
		left: 0;

		background: #fff;
		z-index: 5;
	} 

	#about article h2{
		position: relative;
		margin: 0 0 45px;
		width: 100%;
		height: 18px;
		text-indent: -9999px;
		background: url(../img/title_about.png) 50% 0 no-repeat;
		background-size: auto 100%; 
		z-index: 10;
	}

	#about article .txt{
		position: relative;
		z-index: 10;
	}
	#about article p{
		font-weight: bold;
		font-size: 13px;
		line-height: 1.8;
	}
	#about article p + p{
		margin-top: 25px;
	}




	/*---------------------------------------------------------------
			
			 topics

	---------------------------------------------------------------*/


	#topics{
		position: relative;
		padding: 0 20px 45px;
		background: #fff;
		z-index: 10;
	}
	#topics h2{
		display: none;
	}
	#topics-box .topics-box-inner{
		padding: 15px 7px;
		border-top: 1px solid #adadad;
		border-bottom: 1px solid #adadad;
	}
	#topics-box dt .cat{
		display: inline-block;
		padding: 0 15px;
		height: 24px;
		color: #fff;
		border-radius: 4px;
		line-height: 24px;
		font-size: 11px;
		font-weight: bold;
		background: #000000;
	}
	#topics-box dt .date{
		margin: 0 0 0 18px;
		display: inline-block;
		line-height: 24px;
		font-size: 11px;
	}
	#topics-box dd{
		margin: 15px 0 0;
		font-size: 15px;
		font-weight: bold;
	}

	#topics .topics-link{
		display: none;
		margin: 30px 0 0;
		text-align: center;
	}
	#topics .topics-link a{
		position: relative;
		text-decoration: underline;
		font-weight: bold;
	}
	#topics #topics-box a{
		position: relative;
		display: block;
		-webkit-transition: opacity ease 200ms;
		-o-transition: opacity ease 200ms;
		transition: opacity ease 200ms;
	}
	#topics #topics-box a:after{
		position: absolute;
		content: "";
		top: 50%;
		right: 10px;
		margin: -8px 0 0;
		display: inline-block;
		width: 6px;
		height: 10.5px;
		background: url(../../shared/img/arrow_r.png) 100% 50% no-repeat;

		background-size: 100% 100%;
		box-sizing: border-box;
		z-index: 30;
	}



}






@media screen and (max-width: 750px) and (max-width: 360px){
	
	#about article p{
		font-size: 12px;
	}

}