@charset "utf-8";

.kv_hakui {
	background:url(../images/hakui_kv.jpg) center center no-repeat;
	background-size:cover;
}
.kv_tsubata {
	background:url(../images/tsubata_kv.jpg) center center no-repeat;
	background-size:cover;
}

article#wrap > header > div > h1 {
	background-color:#222222;
	font-size:52px;
}
	@media(max-width:979px) {
		article#wrap > header > div > h1 {
			font-size:39px;
		}
	}

article > section > header {
	background:url(../../shared/images/bg_title1.png) left center repeat-x;
	text-align:center;
	margin-bottom:40px;
}
article > section > header > h2 {
	display:inline-block;
	font-size:42px;
	background-color:#FFF;
	padding:0 20px;
	font-family:"游明朝",YuMincho,"ヒラギノ明朝 ProN W3","Hiragino Mincho ProN","ＭＳ Ｐ明朝",serif;
	line-height:1.3;
}
	@media(max-width:767px) {
		article > section > header > h2 {
			font-size:34px;
		}
	}



/* other
---------------------------------------------- */
nav#other {
	margin-bottom:25px;
	text-align:right;
}
nav#other > a {
	display:inline-block;
	color:#FFF;
	font-size:20px;
	text-align:center;
	padding:8px 40px 8px 30px;
	background:url(../../shared/images/bg_btn1.png) right 10px center no-repeat #333;
	background-size:8px 14px;
}
nav#other > a:hover {
	opacity:0.8;
}



/* overview
---------------------------------------------- */
#overview {
	display:table;
	width:100%;
	margin-bottom:80px;
}
	@media(max-width:767px) {
		#overview {
			display:block;
			margin-bottom:60px;
		}
	}

#overview > div {
	width:50%;
	display:table-cell;
	vertical-align:top;
	background-color:#2154A5;
	padding:40px 20px 10px 20px;
}
	@media(max-width:979px) {
		#overview > div {
			padding:30px 20px 10px 20px;
		}
	}
	@media(max-width:767px) {
		#overview > div {
			padding:20px 10px 10px 10px;
		}
	}

#overview > div > h1 {
	text-align:center;
	color:#FFF;
	font-size:64px;
	font-family:"游明朝",YuMincho,"ヒラギノ明朝 ProN W3","Hiragino Mincho ProN","ＭＳ Ｐ明朝",serif;
	padding-bottom:30px;
	border-bottom:1px solid #FFF;
	margin-bottom:40px;
}
	@media(max-width:979px) {
		#overview > div > h1 {
			font-size:54px;
			padding-bottom:15px;
			margin-bottom:15px;
		}
	}
	@media(max-width:767px) {
		#overview > div > h1 {
			font-size:42px;
		}
	}

#overview > div > div {
	display:table;
}
#overview > div > div > strong {
	width:110px;
	text-align:center;
	display:table-cell;
	color:#FFF;
	background:url(../../shared/images/bg_title2.png) center center;
	vertical-align:middle;
	font-size:24px;
	line-height:1.6;
}
	@media(max-width:979px) {
		#overview > div > div > strong {
			width:70px;
		}
	}
	@media(max-width:767px) {
		#overview > div > div > strong {
			line-height:1.2;
			font-size:20px;
			padding:8px 0;
		}
	}
	@media(max-width:479px) {
		#overview > div > div > strong {
			width:60px;
		}
	}

#overview > div > div > ul {
	display:table-cell;
	vertical-align:middle;
	padding:15px 0 5px 15px;
}
	@media(max-width:979px) {
		#overview > div > div > ul {
			padding:10px 0 0 10px;
		}
	}

#overview > div > div > ul > li {
	display:inline-block;
	margin:0 15px 10px 0;
	background-color:#FFF;
	padding:8px 15px;

	border-radius:3px;		/* CSS3草案 */
	-webkit-border-radius:3px;	/* Safari,Google Chrome用 */
	-moz-border-radius:3px;	/* Firefox用 */
}
	@media(max-width:979px) {
		#overview > div > div > ul > li {
			padding:5px 10px;
		}
	}

#overview > figure {
	width:50%;
	display:table-cell;
	vertical-align:top;
}
	@media(max-width:767px) {
		#overview > figure {
			text-align:center;
			display:block;
			width:auto;
		}
	}

#overview > figure > img {
	width:100%;
}

article#wrap > p {
	font-size:24px;
	line-height:1.5;
	text-align:center;
	margin-bottom:80px;
}
	@media(max-width:767px) {
		article#wrap > p {
			margin-bottom:50px;
			font-size:20px;
		}
	}



/* recommend
---------------------------------------------- */
#recommend {
	margin-bottom:90px;
}
	@media(max-width:767px) {
		#recommend {
			margin-bottom:60px;
		}
	}

#recommend > ul {
	padding:0 20px;
}
	@media(max-width:767px) {
		#recommend > ul {
			padding:0px;
		}
	}

#recommend > ul > li {
	width:48%;
	float:left;
	margin-bottom:50px;
	text-align:center;
	background-color:#F6F6F6;
}
	@media(max-width:767px) {
		#recommend > ul > li {
			width:100%;
			max-width:480px;
			float:none !important;
			margin:0 auto 40px auto;

		}
	}

#recommend > ul > li:nth-child(even) {
	float:right;
}
#recommend > ul > li > figure > img {
	width:100%;
}
#recommend > ul > li > figure > figcaption {
	font-size:18px;
	text-align:left;
	line-height:1.3;
	padding:10px;
}
	@media(max-width:767px) {
		#recommend > ul > li > figure > figcaption {
			font-size:18px;
		}
	}

#recommend > ul > li > figure > figcaption > strong {
	font-size:22px;
}



/* information
---------------------------------------------- */
#information {
	margin-bottom:150px;
	padding:0 20px;
}
	@media(max-width:767px) {
		#information {
			margin-bottom:100px;
			padding:0;
		}
	}

#information > div {
	margin-bottom:30px;
}
#information > div > figure {
	width:42%;
	float:left;
}
	@media(max-width:767px) {
		#information > div > figure {
			float:none;
			width:auto;
			margin-bottom:15px;
			text-align:center;
		}
	}

#information > div > figure > img {
	width:100%;
}
	@media(max-width:767px) {
		#information > div > figure > img {
			max-width:450px;
			width:100%;
		}
	}

#information > div > div {
	width:55%;
	float:right;
}
	@media(max-width:767px) {
		#information > div > div {
			width:auto;
			float:none;
		}
	}

#information > div > div > p {
	line-height:1.3;
	margin-bottom:10px;
}
#information > div > div > strong {
	display:inline-block;
	font-size:28px;
	margin-bottom:10px;
	line-height:1.2;
}
	@media(max-width:479px) {
		#information > div > div > strong {
			font-size:20px;
		}
	}

#information > div > div > p.mail > a {
	background:url(../../shared/images/icon_inquiry.png) left center no-repeat;
	background-size:19px 11px;
	padding-left:24px;
}
#information > div > div > p.car > strong {
	display:block;
	font-weight:500;
	background:url(../../shared/images/icon_car.png) left center no-repeat;
	background-size:20px 17px;
	padding-left:24px;
}
#information > #map {
	display:block;
	height:300px;
background-color:#EEE;
}



/* contact
---------------------------------------------- */
#contact > p {
	text-align:center;
	line-height:1.3;
	margin-bottom:20px;
}

#contact > div > ul > li:first-child > p > a {
	display:block;
	font-size:32px;
	padding-top:5px;
}