@charset "utf-8";
/* CSS Document */

#prefectureSearch{
	font-size:14px;
}
.areaSelect{
	box-sizing:border-box;
	margin:0 auto 40px auto;
	padding:20px;
	background-color:#ffffff;
	border-radius:5px;
}
input[type="radio"].switch,
input[type="checkbox"].switch{
	display:none;
}
.areaSelectTitle{
	box-sizing:border-box;
	margin:0 0 20px 0;
	padding:0 0 0 50px;
	color:#5d6d7e;
	font-size:36px;
	background:url(/images/iconSearch.png) left no-repeat;
}
.areaMap{
	box-sizing:border-box;
	position:relative;
	display:block;
	width:420px;
	height:360px;
	background:url(/images/mapAll.png) 0 0 no-repeat;
	float:left;
}
.areaMap li{
	position:absolute;
	display:-moz-flex;
	display:-ms-flex;
	display:-webkit-flex;
	display:flex;
	-moz-flex-direction:column;
	-ms-flex-direction:column;
	-webkit-flex-direction:column;
	flex-direction:-moz-column;
	flex-direction:-ms-column;
	flex-direction:-webkit-column;
	flex-direction:column;
	font-weight:bold;
	list-style:none;
}
.areaMap li label{
	display:block;
	padding:0 1.0em;
	color:#ffffff;
	font-weight:bold;
	line-height:26px;
	text-align:center;
	background-color:#5d6d7e;
	border-radius:3px;
	cursor:pointer;
}
.areaMap li label:hover{
	filter:alpha(opacity=90);
	-moz-opacity:0.9;
	opacity:0.9;
}
.areaMap li.areaName1 a,
.areaMap li.areaName2 a,
.areaMap li.areaName3 a,
.areaMap li.areaName4 a,
.areaMap li.areaName5 a,
.areaMap li.areaName6 a,
.areaMap li.areaName7 a,
.areaMap li.areaName8 a{
	display:block;
	max-height:0;
	padding:0 0.5em;
	line-height:26px;
	background-color:#ffffff;
	overflow:hidden;
	transition:max-height 0.1s;
}
.areaMap li.areaName1{
	top:12px;
	left:205px;
}
.areaMap li.areaName2{
	top:223px;
	left:323px;
}
.areaMap li.areaName3{
	top:108px;
	left:101px;
}
.areaMap li.areaName4{
	top:282px;
	left:248px;
}
.areaMap li.areaName5{
	top:315px;
	left:191px;
}
.areaMap li.areaName6{
	top:152px;
	left:101px;
}
.areaMap li.areaName7{
	top:315px;
	left:95px;
}
.areaMap li.areaName8{
	top:187px;
	left:0;
}
#area1m:checked ~ .areaMap li.areaName1 label,
#area2m:checked ~ .areaMap li.areaName2 label,
#area3m:checked ~ .areaMap li.areaName3 label,
#area4m:checked ~ .areaMap li.areaName4 label,
#area5m:checked ~ .areaMap li.areaName5 label,
#area6m:checked ~ .areaMap li.areaName6 label,
#area7m:checked ~ .areaMap li.areaName7 label,
#area8m:checked ~ .areaMap li.areaName8 label{
	background-color:#eb6148;
	border-radius:3px 3px 0 0;
	z-index:100;
}
#area1m:checked ~ .areaMap li.areaName1 a,
#area2m:checked ~ .areaMap li.areaName2 a,
#area3m:checked ~ .areaMap li.areaName3 a,
#area4m:checked ~ .areaMap li.areaName4 a,
#area5m:checked ~ .areaMap li.areaName5 a,
#area6m:checked ~ .areaMap li.areaName6 a,
#area7m:checked ~ .areaMap li.areaName7 a,
#area8m:checked ~ .areaMap li.areaName8 a{
	max-height:100px;
	border:1px solid #d1d1d1;
	border-top:none;
	z-index:101;
}
#area1m:checked ~ .areaMap li.areaName1,
#area2m:checked ~ .areaMap li.areaName2,
#area3m:checked ~ .areaMap li.areaName3,
#area4m:checked ~ .areaMap li.areaName4,
#area5m:checked ~ .areaMap li.areaName5,
#area6m:checked ~ .areaMap li.areaName6,
#area7m:checked ~ .areaMap li.areaName7,
#area8m:checked ~ .areaMap li.areaName8{
	z-index:102;
}
#area2m:checked ~ .areaMap li.areaName2{
	top:143px;
}
#area4m:checked ~ .areaMap li.areaName4{
	top:230px;
}
#area5m:checked ~ .areaMap li.areaName5{
	top:180px;
}
#area7m:checked ~ .areaMap li.areaName7{
	top:230px;
}
#area8m:checked ~ .areaMap li.areaName8{
	top:120px;
}
#area1m:checked ~ .areaMap{
	background:url(/images/mapAll.png) -420px 0 no-repeat;
}
#area2m:checked ~ .areaMap{
	background:url(/images/mapAll.png) -840px 0 no-repeat;
}
#area3m:checked ~ .areaMap{
	background:url(/images/mapAll.png) 0 -360px no-repeat;
}
#area4m:checked ~ .areaMap{
	background:url(/images/mapAll.png) -420px -360px no-repeat;
}
#area5m:checked ~ .areaMap{
	background:url(/images/mapAll.png) -840px -360px no-repeat;
}
#area6m:checked ~ .areaMap{
	background:url(/images/mapAll.png) 0 -720px no-repeat;
}
#area7m:checked ~ .areaMap{
	background:url(/images/mapAll.png) -420px -720px no-repeat;
}
#area8m:checked ~ .areaMap{
	background:url(/images/mapAll.png) -840px -720px no-repeat;
}
.areaTable{
	display:-moz-flex;
	display:-ms-flex;
	display:-webkit-flex;
	display:flex;
	-moz-flex-wrap:wrap;
	-ms-flex-wrap:wrap;
	-webkit-flex-wrap:wrap;
	flex-wrap:wrap;
	width:520px;
	margin:0;
	padding:1px 1px 0 1px;
	background-color: #d1d1d1;
	float:right;
}
.areaTable dt{
	box-sizing:border-box;
	width:22%;
	margin:0 0 1px 0;
	padding:5px 10px;
	color:#ffffff;
	font-weight:bold;
	background-color:#5d6d7e;
}
.areaTable dd{
	box-sizing:border-box;
	display:-moz-flex;
	display:-ms-flex;
	display:-webkit-flex;
	display:flex;
	-moz-flex-wrap:wrap;
	-ms-flex-wrap:wrap;
	-webkit-flex-wrap:wrap;
	flex-wrap:wrap;
	width:78%;
	margin:0 0 1px 0;
	padding:5px 0;
	background-color:#ffffff;
}
.areaTable dd a{
	display:block;
	margin:5px 0;
	padding:0 10px;
	line-height:1.0;
	border-right:1px solid #222222;
}
.areaTable dd a:last-child{
	border-right:none;
}
#area1m:checked ~ .areaTable dt#areaText1,
#area2m:checked ~ .areaTable dt#areaText2,
#area3m:checked ~ .areaTable dt#areaText3,
#area4m:checked ~ .areaTable dt#areaText4,
#area5m:checked ~ .areaTable dt#areaText5,
#area6m:checked ~ .areaTable dt#areaText6,
#area7m:checked ~ .areaTable dt#areaText7,
#area8m:checked ~ .areaTable dt#areaText8{
	background-color:#eb6148;
}

@media screen and (max-width:1023px){
	.areaSelectTitle{
		font-size:3.5vw;
		min-height:50px;
	}
	.areaSelect{
		padding:0 20px;
	}
	.areaMap{
		margin:0 auto;
		margin-bottom:20px;
		float:none;
	}
	.areaTable{
		width:100%;
		float:none;
	}
}

@media screen and (max-width:640px){
	#prefectureSearch{
		padding:0;
	}
	.areaMap{
		display:none;
	}
	.areaSelectTitle{
		min-height:inherit;
		margin-bottom:0;
		padding:50px 0 0 0;
		font-size:5.0vw;
		text-align:center;
		background:url(/images/iconSearch.png) center top no-repeat;
	}
	.areaSelect{
		padding:0;
	}
	.areaTable{
		box-sizing:border-box;
		display:block;
		width:100%;
		background-color: #d1d1d1;
	}
	.areaTable dt{
		display:block;
		width:100%;
		margin:0;
		padding:0 10px;
		line-height:40px;
		border-bottom:1px solid #d1d1d1;
	}
	.areaTable dt label{
		position:relative;
		display:block;
		height:40px;
	}
	.areaTable dt label:after{
		position:absolute;
		right:5px;
		content:"▼";
	}
	.areaTable dd#prefecture1,
	.areaTable dd#prefecture2,
	.areaTable dd#prefecture3,
	.areaTable dd#prefecture4,
	.areaTable dd#prefecture5,
	.areaTable dd#prefecture6,
	.areaTable dd#prefecture7,
	.areaTable dd#prefecture8{
		display:block;
		width:100%;
		max-height:0;
		margin:0;
		padding:0;
		overflow:hidden;
		-moz-transition-duration:0.2s;
		-ms-transition-duration:0.2s;
		-webkittransition-duration:0.2s;
		transition-duration:0.2s;
	}
	#area1t:checked ~ .areaTable dt#areaText1 label:after,
	#area2t:checked ~ .areaTable dt#areaText2 label:after,
	#area3t:checked ~ .areaTable dt#areaText3 label:after,
	#area4t:checked ~ .areaTable dt#areaText4 label:after,
	#area5t:checked ~ .areaTable dt#areaText5 label:after,
	#area6t:checked ~ .areaTable dt#areaText6 label:after,
	#area7t:checked ~ .areaTable dt#areaText7 label:after,
	#area8t:checked ~ .areaTable dt#areaText8 label:after{
		transform:scale(1.0, -1.0);
	}
	.areaTable dd a{
		display:block;
		margin:0;
		line-height:40px;
		border:none;
	}
	#area1t:checked ~ .areaTable dt#areaText1,
	#area2t:checked ~ .areaTable dt#areaText2,
	#area3t:checked ~ .areaTable dt#areaText3,
	#area4t:checked ~ .areaTable dt#areaText4,
	#area5t:checked ~ .areaTable dt#areaText5,
	#area6t:checked ~ .areaTable dt#areaText6,
	#area7t:checked ~ .areaTable dt#areaText7,
	#area8t:checked ~ .areaTable dt#areaText8{
		background-color:#eb6148;
	}
	#area1t:checked ~ .areaTable dd#prefecture1,
	#area2t:checked ~ .areaTable dd#prefecture2,
	#area3t:checked ~ .areaTable dd#prefecture3,
	#area4t:checked ~ .areaTable dd#prefecture4,
	#area5t:checked ~ .areaTable dd#prefecture5,
	#area6t:checked ~ .areaTable dd#prefecture6,
	#area7t:checked ~ .areaTable dd#prefecture7,
	#area8t:checked ~ .areaTable dd#prefecture8{
		max-height:1000px;
	}
	#area1t:checked ~ .areaTable dd#prefecture1 a,
	#area2t:checked ~ .areaTable dd#prefecture2 a,
	#area3t:checked ~ .areaTable dd#prefecture3 a,
	#area4t:checked ~ .areaTable dd#prefecture4 a,
	#area5t:checked ~ .areaTable dd#prefecture5 a,
	#area6t:checked ~ .areaTable dd#prefecture6 a,
	#area7t:checked ~ .areaTable dd#prefecture7 a,
	#area8t:checked ~ .areaTable dd#prefecture8 a{
		border-bottom:1px solid #d1d1d1;
	}
}