@charset "utf-8";
@import url(reset.css);
@import url(base.css);
@import url(common.css);

body,
#wrap {
	overflow-x:hidden;
}


#container h2 ul {
	text-align:center;
}

#container h2 ul li {
	display:inline-block;
	margin-right:5px;
}

#container h2 ul li:last-child {
	margin-right:0;
}


/*-------------------------------------------------------------------
	environment
-------------------------------------------------------------------*/

#environment {
	padding:0 0 120px;
	background:url(../image/common/cont_wave.png) top repeat-x;
	-webkit-animation: bgroop 20s linear infinite;
  animation: bgroop 20s linear infinite;
}

#environment .map {
	text-align:center;
	max-width:94%;
	margin:0 auto 60px;
}

#environment .map dt {
	font-size:1.3em;
	line-height:1.8;
	font-weight:400;
	margin:0 0 50px;
}

#environment .inwrap {
	border-top:3px dotted #33ccff;
	padding:80px 0 0;
}

#environment .inwrap .box {
	overflow:hidden;
	zoom:1;
	margin:0 0 40px;
}

#environment .inwrap .box.last {
	margin:0;
}

#environment .inwrap .box  .phofo {
	float:left;
	margin-right:40px;
}

#environment .inwrap .box .text {
	width:340px;
	float:right;
}

#environment .inwrap .box .text dt {
	font-size:1.3em;
	font-weight:400;
	line-height:1.0;
	margin:0 0 10px;
}

/*-------------------------------------------------------------------
	access
-------------------------------------------------------------------*/

#access {
	position:relative;
	padding:100px 0 0;
	
}

#access .same {
	overflow:hidden;
	zoom:1;
}

#access .same .map {
	float:left;
}

#access .same .texts {
	margin-left:570px;
	padding:30px 0 0;
}

#access .same .texts p {
	margin:0 0 20px;
}

#access .same .texts .link {
	margin:0;
	padding:10px 0 0;
}

#access .same .texts .link a {
	display:inline-block;
	position:relative;
	line-height:1.0;
	text-align:center;
	padding:13px 70px 15px;
	background:#0065b0;
	color:#fff;
	border-radius:30px;
	font-weight:400;
}

#access .same .texts .link a:before {
	position:absolute;
	top:50%;
	left:17%;
	background:url(../image/common/icon01.png) left top no-repeat;
	background-size:cover;
	width:12px;
	height:12px;
	content:'';
	transform:translateY(-50%);
}

#access .same .texts .link a:after {
	position:absolute;
	top:50%;
	right:17%;
	background:url(../image/common/icon02.png) left top no-repeat;
	background-size:cover;
	width:12px;
	height:12px;
	content:'';
	transform:translateY(-50%);
}

#access .same .texts .link a:hover {
	opacity:0.7;
	text-decoration:none;
}

#access .human01 {
	position:absolute;
	top:20px;
	left:3%;
}

#access .human02 {
	position:absolute;
	bottom:0;
	right:3%;
}


/*===============================================
  画面の横幅が1450px以下に適用
===============================================*/
@media screen and (max-width: 1450px) {
	

}

/*===============================================
  画面の横幅が1024px以下に適用
===============================================*/
@media screen and (max-width: 1024px) {
	
	#environment .inwrap .box  .phofo {
		float:left;
		max-width:30%;
		margin-right:2%;
	}

	#environment .inwrap .box .text {
		width:35%;
	}
	
	#access .human01,
	#access .human02 {
		display:none;
	}
}

/*===============================================
  画面の横幅が768px以下に適用
===============================================*/
@media screen and (max-width: 768px){
	
	

}

/*===============================================
  画面の横幅が640px以下に適用
===============================================*/
@media screen and (max-width: 640px){
	
	

	#container h2 ul li img {
		max-width:40px;
	}

	/* environment */

	#environment {
		padding:0 0 60px;
	}
	
	#environment .map dt {
		font-size:1.1em;
		margin:0 0 40px;
	}

	#environment .inwrap {
		padding:50px 0 0;
	}
	
	#environment .inwrap .box {
		text-align:center;
	}

	
	#environment .inwrap .box .phofo {
		float:none;
		margin-right:2%;
		display:inline-block;
		max-width:45%;	
	}

	#environment .inwrap .box .text {
		width:auto;
		float:none;
		margin:20px 0 0;
		text-align:left;
	}
	
	#environment .inwrap .box .text dt {
		font-size:1.2em;
	}

	/* access */

	#access {
		position:relative;
		padding:50px 0 0;		
	}

	#access .same .map {
		float:none;
		text-align:center;
	}

	#access .same .texts {
		margin-left:0;
		padding:30px 0 0;
	}

	#access .same .texts .link {
		text-align:center;
	}
	
	#access .same .texts p a {
		color:#361d05;
	}

}