/* CSS Document */

.area { position: relative; height: 540px; margin-bottom: 40px; }
.area .map { position: absolute; top: 0; right: 0; }

.arealist { width: 420px; }
.arealist dt {
	background-color: #008344;
	color: #fff;
	font-size: 20px;
	line-height: 27px;
	height: 30px;
	padding: 0px 10px;
	position: relative;
	margin-bottom: 10px;
}
.arealist dt span {
	position: absolute;
	right: 10px;
	top: 2px;
	font-size: 12px;
	font-family: 'Judson', serif;
}
.arealist dd { margin-bottom: 20px; }
.arealist ul { position: relative; }
.arealist ul:after {
	content: '';
	display: block;
	width: 400px;
	height: 10px;
	position: absolute;
	top: 35px;
	background-color: #999;
}
.arealist li {
	display: inline-block;
	height: 80px;
	width: 80px;
	text-align: center;
	color: #fff;
	font-size: 18px;
	line-height: 80px;
	border-radius: 50%;
	position: relative;
	margin-right: 5px;
	z-index: 10;
}
.arealist li:last-child { margin-right: 0; }
.arealist .e:after, .arealist .e li { background-color: #6dba44; }
.arealist .w:after, .arealist .w li { background-color: #f6ac3b; }
.arealist .s:after, .arealist .s li { background-color: #ec6d45; }
.arealist .n:after, .arealist .n li { background-color: #6b9bd2; }
.arealist li:before {
	content: '';
	display: block;
	width: 70px;
	height: 70px;
	position: absolute;
	top: 3px;
	left: 3px;
	border: 2px dotted #fff;
	border-radius: 50%;
}
.arealist dd:not(:first-of-type) li { margin-right: 90px; }
.arealist dd:not(:first-of-type) li:last-child { margin-right: 0px; }
/*.arealist dd:last-child li { margin-right: 33px; }
.arealist dd:last-child li:last-child { margin-right: 0px; }*/

.areabox { margin-bottom: 20px; }
.areabox li {
	display: inline-block;
	vertical-align: top;
	width: 498px;
	height: 298px;
	border: 1px solid #b4b5b5;
	margin-right: 20px;
	margin-bottom: 40px;
}
.areabox li:nth-child(2n) { margin-right: 0; }
.areabox dl { margin: 0 0; padding: 0 0; }
.areabox dt {
	background-color: #008344;
	height: 40px;
	line-height: 40px;
	text-align: center;
	color: #fff;
	font-size: 20px;
}
.areabox dd { padding: 15px 19px; font-size: 13px; line-height: 21px; }
.areabox p { padding: 0 7px; margin-bottom: 32px; }

.listbox li { display: block; }
.listbox li:nth-child(odd) dt { text-align: left; }
.listbox li dd { position: relative; min-height: 320px; padding-left: 510px; }
.listbox li dd .img { position: absolute; top: 0px; left: 0; }
.listbox li dd .img2 { position: absolute; bottom: 0; }
.listbox li:nth-child(even) dd { padding-left: 0; padding-right: 510px; }
.listbox li:nth-child(even) dd .img { left: auto; right: 0; }
.listbox li dd:after {
	content: '';
	display: block;
	width: 1px;
	height: 320px;
	border-left: 1px solid #b4b5b5;
	position: absolute;
	top: 0px;
	left: 490px;
}

.listbox li dd h3 { margin-bottom: 0.5em; letter-spacing: -1px; }






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

.areabox li {
	width: auto;
	height: auto;
	margin-right: 0;
	margin-bottom: 2em;
	display: block;
}
.areabox dt { font-size: 1em; height: 3em; line-height: 3em; }
.areabox dd { padding: 0.5em; }
.areabox dd img { width: 100%; }
.arealist { width: auto; }
.area { height: auto; padding-top: 2em; }
.area .map { position: static; width: 100%; }
.arealist ul { display: block; margin: 0 auto; width: auto; text-align: center; }
.arealist li {
	font-size: 0.8em;
	width: 3.8em;
	height: 3.8em;
	line-height: 3.8em;
	margin-right: 2em;
}
.arealist li:before {
	width: 3.1em;
	height: 3.1em;
	top: 0.3em;
	left: 0.3em;
	border-width: 1px;
}
.arealist ul:after {
	width: 20em;
	height: 0.5em;
	top: 1.3em;
	left: 50%;
	margin-left: -10em;
}
/*.arealist dd:last-child li { margin-right: 3.9em; }*/

ul.listbox li dd img {
	width: 100%;
}
.listbox li dd:after { display: none; }




}