@charset "utf-8";

.topicPathWrap { border-bottom:1px solid #dbd8cb; }

.mapController {
	max-width: 1200px;
	margin:0 auto;
	padding:20px 0 20px;
	overflow:hidden;
}

.mapController .hanrei { float:left; padding-top:20px; width:50%;}
.mapController .hanrei ul { letter-spacing: -.40em; margin-bottom:5px; text-align:left;}
.mapController .hanrei ul li {letter-spacing: normal; display:inline-block; margin:0 20px 0 0;}

.mapController .changeMap { float:right; border:3px solid #d3d2bb; padding:10px; width:50%;}
.mapController .changeMap .changeMapTtl { float:left; margin:10px 0 0 15px;}
.mapController .changeMap ul { letter-spacing: -.40em; text-align:right; line-height:0;}
	.mobile.android .mapController .changeMap ul { letter-spacing: -.50em;}
.mapController .changeMap ul li {letter-spacing: normal; display:inline-block; vertical-align:middle;}

.mapArea {
	max-width: 1200px;
	max-height: 580px;
	margin:0 auto;
}

.popupWrapper.bunjyozumi { height:130px;}

aside { max-width: 1200px; margin:0 auto;}



#mapElem {
width: 100%;
height: 580px;
border:3px solid #2f6910;
}
#mapElem img{ max-width: none !important;}


/* marker tooltip */
.popupWrapper { width:300px; height:270px; padding:20px; font-family:"ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif; }
.popupWrapper h3 { margin:0; padding:0; margin-bottom:5px; font-size:1.2rem;}
.popupWrapper p { margin:0; padding:0; margin-bottom:5px; font-size:1.2rem;}
.popupWrapper ul { letter-spacing: -.40em; margin-bottom:5px;}
	.mobile.android .popupWrapper ul { letter-spacing: -.50em; margin-bottom:5px;}
.popupWrapper ul li {letter-spacing: normal; display:inline-block; margin:0; background:#0d4402; width:50%;}
.popupWrapper ul li:first-child { background:#00612a;}
.popupWrapper ul li a { display:block; color:#fff; padding:8px 0;}
.popupWrapper ul li:first-child a { border-right:2px solid #fff;}
.popupWrapper .photo { width:100%; height:auto; margin:0 auto;}

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

.mapController .hanrei { width:50%; margin:10px 2% 0;}
.mapController .changeMap { float:right; width:36%; margin:0 2%;}
.mapController .changeMap .changeMapTtl { float:none; margin:10px 0;}
.mapController .changeMap ul li { width:33%;}

aside { margin:0 2%;}
	
}
@media only screen and (max-width: 1080px) {

.mapController .hanrei { width:40%; margin:10px 2% 0;}
.mapController .changeMap { float:right; width:38%; margin:0 2%; margin-top:10px;}
.mapController .changeMap .changeMapTtl { float:none; margin:10px 0;}
.mapController .changeMap ul li { width:33%;}

.mapController .hanrei {width:50%; margin:0 2%;}
.mapController .hanrei ul li { margin-bottom:10px;}
	
}
@media only screen and (max-width: 768px) {

.mapController { padding:20px 2%;}
.mapController .hanrei { width:35%;}
.mapController .changeMap {width:55%; margin:30px 2% 0;}
.mapController .hanrei {margin:0;}

.mapArea { margin:0 2%;}
#mapElem {height:400px;}

}
@media only screen and (max-width: 640px) {

.mapController .hanrei,
.mapController .changeMap { float:none; width:96%; margin:0 2% 10px;}
.mapController .changeMap ul { text-align:center;}
.mapController .changeMap ul li { width:auto;}

.mapController .hanrei ul { text-align:left;}
.mapController .hanrei ul li { margin:0 2%;}
.mapController .hanrei { padding-top:0;}

#mapElem {height:400px;}
}
@media only screen and (max-width: 480px) {
.popupWrapper { width:228px; height:230px; padding:20px 0 0;}
#mapElem {height:350px;}
}
@media only screen and (max-width: 460px) {
.mapController .changeMap ul li { width:33%;}
}
@media only screen and (max-width: 320px) {
.popupWrapper { width:190px; height:230px; padding:20px 0 0;}
}