@charset "UTF-8";

/*======================================
	庄内町とは
=======================================*/
h2 img{
	margin-bottom:20px;
}

#area_wrap,
#category_wrap{
	padding:3%;
	clear:both;
	overflow: hidden;
}

#intro{
	padding:3% 3% 0 3%;
	overflow:hidden;
	margin-bottom:20px;
	position:relative;
	overflow: hidden;
}
#intro_txt h3{
	padding-top:2%;
	color:#b81c22;
	margin-bottom:10px;
	font-size:150%;
}
#intro_txt{
	width:53%;
	margin:0;
	overflow: hidden;
	float:left;
}

#intro_img1{
	displai:block;
}
#intro_img2{
	width:45%;
	float:right;
}


/* エリア紹介・庄内町の魅力 */

#area_wrap h3,
#category_wrap h3{
	font-size:120%;
	color:#fff;
	background-color:#84b131;
	padding:0.5em 1em;
	margin-bottom:1em;
	border-radius:0.3em;
}
#area_wrap h4,
#category_wrap h4{
	background-color:#fffce6;
	font-size:120%;
	background-repeat:no-repeat;
	background-size:35px;
	background-position: 5px center;
	padding:7px 0 5px 50px;
	border-radius:0.3em;
	margin-bottom:10px;
}

#amarume h4{
	background-image:url("../img/spage/about/area_01.png");
}
#karikawa h4{
	background-image:url("../img/spage/about/area_02.png");
}
#kiyokawa h4{
	background-image:url("../img/spage/about/area_03.png");
}
#tachiyazawa h4{
	background-image:url("../img/spage/about/area_04.png");
}
#nature h4{
	background-image:url("../img/spage/about/category_01.png");
}
#sports h4{
	background-image:url("../img/spage/about/category_02.png");
}
#hotsprings h4{
	background-image:url("../img/spage/about/category_03.png");
}
#history h4{
	background-image:url("../img/spage/about/category_04.png");
}
#foods h4{
	background-image:url("../img/spage/about/category_05.png");
}
#products h4{
	background-image:url("../img/spage/about/category_06.png");
}

.area{
	width:48%;
	display: inline-block;
	vertical-align: top;
	margin-bottom:40px;
}
#amarume,
#kiyokawa{
	margin-right:1%;
}
#karikawa,
#tachiyazawa{
	margin-left:1%;
}
.area_txt,
.category_txt{
	margin-bottom:20px;
}
.area img,
.category img{
	margin-bottom:30px;
}
.category{
	margin:0 0 40px 0;
	overflow:hidden;

}
.category img{
	width:49%;
	float:right;
}
.category h4{
	width:42%;
	float:left;
}

.category .category_txt,
.category .more_wrap{
	width:49%;
	float:left;
}

.more_wrap,
.btn_more div{
	width: 180px;
	margin:0 auto;
}
.btn_more p{
	background-position: 35px center;
	padding-left:25px;
}

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

	.category h4{
		width:100%;
	}
}

@media screen and (max-width: 745px) {
	#intro_img1{
		display:none;
	}
	.area,
	.category{
		width:100%;
		margin:0 0 40px 0 !important;
	}
	.category h4,
	.category img,
	.category .category_txt,
	.category .more_wrap{
		width:100%;
	}
	.area_txt,
	.category_txt,
	.area img,
	.category img{
		margin-bottom:20px;
	}
}

/*======================================
	タブレット
=======================================*/
@media screen and (max-width: 599px) {
	
	#intro_img1,
	#intro_img2{
		float:none;
		display:block;
		margin:0 auto;
		width:100%;
		max-width:300px;
	}
	#intro_txt{
		width:100%;
		float:none;
		margin-bottom:10px;
	}
	#intro_img{
		max-width:300px;
		width:100%;
		float:none;
		margin:0 auto;
	}

}