@charset "utf-8";


#visual{
	line-height: 0;
	margin: 0 auto 0;
	padding: 0;
	position: relative;
	z-index: 1;
}
#visual>#bgs{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	line-height: 0;
}
#visual>#bgs:after{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	line-height: 0;
	background: rgba(0, 0, 0, 0.3);
}
#visual>#tex.inner{
	padding: 300px 0;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
#visual h1{
	text-align: center;
	line-height: 0;
	padding: 0;
	margin: 0 auto 20px;
}
#visual>#tex>p{
	text-align: center;
	line-height: 0;
	padding: 0;
	margin: 0 auto;
}


#text{
	padding: 95px 0 70px;
	margin: 0 auto;
}
#text h2{
	font-size: 2.5rem;
	line-height: 140%;
	margin: 0 auto 30px;
	text-align: center;
	font-weight: normal;
	color: #333;
}
#text p{
	font-size: 1.4rem;
	line-height: 160%;
	margin: 0 auto;
	text-align: center;
	color: #333;
}

#index .btn{
	text-align: center;
	line-height: 0;
	margin: 0 auto;
}
#index .btn>a{
	display: inline-block;
	margin: 0 auto;
	line-height: 100%;
	position: relative;
	color: #fff;
	background: #000;
	padding: 16px 92px 24px;
	font-size: 1.4rem;
	-webkit-transition: 0.3s ease-in-out;
	-moz-transition: 0.3s ease-in-out;
	-o-transition: 0.3s ease-in-out;
	transition: 0.3s ease-in-out;
}
#index .btn>a:before{
	position: absolute;
	top: 50%;
	right: 34px;
	display: block;
	content: '';
	width: 4px;
	height: 4px;
	margin-top: -2px;
	border-top: 1px solid #fff;
	border-right: 1px solid #fff;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	-webkit-transition: 0.3s ease-in-out;
	-moz-transition: 0.3s ease-in-out;
	-o-transition: 0.3s ease-in-out;
	transition: 0.3s ease-in-out;
}
#index .btn>a:after{
	position: absolute;
	top: 50%;
	right: 30px;
	display: block;
	content: '';
	width: 4px;
	height: 4px;
	margin-top: -2px;
	border-top: 1px solid #fff;
	border-right: 1px solid #fff;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	-webkit-transition: 0.3s ease-in-out;
	-moz-transition: 0.3s ease-in-out;
	-o-transition: 0.3s ease-in-out;
	transition: 0.3s ease-in-out;
}
#index .btn>a>span{
	display: block;
	position: absolute;
	bottom: 9px;
	left: 0;
	width: 100%;
	font-size: 1.1rem;
	line-height: 100%;
	color: #00a3d9;
}
#index .btn>a:hover{
	text-decoration: none;
	filter:alpha(opacity=60);
	-moz-opacity: 0.6;
	opacity: 0.6;
}
#index .btn>a:hover:before{
	right: 30px;
}
#index .btn>a:hover:after{
	right: 26px;
}

#business{
	padding: 0 0 138px;
}
#business h2{
	font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	font-size: 3rem;
	line-height: 100%;
	color: #333;
	text-align: center;
	margin: 0 auto 50px;
	font-weight: normal;
}
#business h2>span{
	font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "ＭＳ Ｐゴシック", sans-serif;
	font-size: 1.4rem;
	line-height: 100%;
	color: #008c46;
	display: block;
	padding: 10px 0 0;
}
#business ul{
	display: block;
	letter-spacing: -0.4em;
	text-align: center;
	line-height: 0;
	margin: 0 auto 35px;
}
#business ul>li{
	display: inline-block;
	letter-spacing: normal;
	vertical-align: top;
	margin: 0 5px 10px;
}



#what{
	padding: 300px 0 100px;
	background: url(../img/index/what_bg.png) center top no-repeat;
	background-size: contain;
	position: relative;
	margin: 0 auto 147px;
}
@media screen and (min-width:1200px){
	#what{background-size: cover !important;}
}
#what:after{
	content: '';
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background: #281400;
	opacity: 0.5;
	z-index: 1;
}
#what h2{
	font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	font-size: 5rem;
	line-height: 120%;
	color: #fff;
	text-align: center;
	margin: 0 auto 12px;
	font-weight: normal;
	position: relative;
	z-index: 2;
}
#what p{
	position: relative;
	z-index: 2;
}
#what p.tex{
	font-size: 2rem;
	text-align: center;
	line-height: 160%;
	padding: 0;
	color: #fff;
	margin: 0 auto 40px;
}
#what p.tex2{
	font-size: 2rem;
	text-align: center;
	line-height: 160%;
	padding: 0;
	color: #fff;
	margin: 0 auto 180px;
}

#about{
	margin: 0 auto 40px;
	padding: 65px 0 80px;
	background: url(../img/index/about_bg.png) center top no-repeat;
	background-size: cover;
}
#about h2{
	font-size: 5.8rem;
	font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	line-height: 120%;
	color: #333;
	margin: 0 auto 23px;
	text-align: center;
	font-weight: normal;
}
#about h2>span{
	color: #003f1f;
}
#about p.tit{
	font-size: 2.5rem;
	text-align: center;
	color: #fff;
	margin: 0 auto 20px;
	line-height: 140%;
}
#about p.tex{
	font-size: 1.4rem;
	text-align: center;
	color: #333;
	margin: 0 auto 36px;
	line-height: 140%;
}
#about p.tex2{
	display: inline-block;
	padding: 8px 20px;
	background: #000;
	font-size: 1.6rem;
	text-align: center;
	color: #fff;
	margin: 0 auto 40px;
	line-height: 140%;
}
#about p.tex3{
	font-size: 1.4rem;
	text-align: center;
	color: #fff;
	margin: 0 auto 20px;
	line-height: 140%;
	text-shadow: 0 0 8px #333, 0 0 8px #333, 0 0 8px #333, 0 0 8px #333, 0 0 8px #333, 0 0 8px #333;
}
#about p.tex3>strong{
	display: block;
	font-size: 1.6rem;
	margin: 0 auto 1em;
}
#about ul{
	display: block;
	letter-spacing: -0.4em;
	text-align: center;
	line-height: 0;
	margin: 0 auto 80px;
	padding: 0;
}
#about ul>li{
	display: inline-block;
	letter-spacing: normal;
	vertical-align: top;
	background: rgba(0, 100, 80, 0.9);
	color: #fff;
	line-height: 200px;
	width: 200px;
	font-size: 2rem;
	margin: 0 60px 0 0;
	border-radius: 100%;
}
#about ul>li:last-child{
	margin-right: 0;
}





@media screen and (min-width:768px){
	#text h2,
	#text p,
	#business h2,
	#business ul,
	#business .btn,
	#what h2,
	#what p,
	#about h2,
	#about p,
	#about li{
		opacity: 0;
		transform: scale(0.9);
		-webkit-transition: 0.45s ease-in-out;
		-moz-transition: 0.45s ease-in-out;
		-o-transition: 0.45s ease-in-out;
		transition: 0.45s ease-in-out;
	}
	
	#text h2[data-object="active"],
	#text p[data-object="active"],
	#business h2[data-object="active"],
	#business ul[data-object="active"],
	#business .btn[data-object="active"],
	#what h2[data-object="active"],
	#what p[data-object="active"],
	#about h2[data-object="active"],
	#about p[data-object="active"],
	#about li[data-object="active"]{
		opacity: 1;
		transform: scale(1);
	}
	
	
}

@media screen and (max-width:767px){
	#visual>#tex.inner{padding: 180px 0 80px;}
	#visual h1{margin-bottom: 150px;}
	
	#text{
		padding: 80px 0;
	}
	#text h2{font-size: 1.8rem;}
	#text p{text-align: left;}
	
	#business{padding-bottom: 80px;}
	#business h2{margin-bottom: 40px;}
	#business ul>li{
		width: 32.666%;
		margin: 0 1% 0 0;
	}
	#business ul>li:last-child{
		margin-right: 0;
	}
	
	#what{
		margin-bottom: 80px;
		padding: 270px 0 40px;
		background-size: 100% auto !important;
		background-position-x: center;
	}
	#what h2{
		font-size: 2.4rem;
	}
	#what p{
		font-size: 1.6rem;
	}
	#what p.tex2{
		font-size: 1.4rem;
		margin-bottom: 40px;
	}
	
	#about h2{
		font-size: 3.4rem;
	}
	#about p.tit{
		font-size: 2rem;
	}
	#about p.tex2{
		padding: 8px 10px;
		font-size: 1.3rem;
	}
	#about ul>li{
		width: 110px;
		margin: 0 10px 0 0;
		font-size: 1.3rem;
		line-height: 110px;
	}
	
}