#map_area_wrap {
	margin-top:-12px;
	position:relative;
	width:100%;
	height: calc( 100vh - 68px );
	background-color: #fbf5de;
	border-bottom:1px solid #ccc;
	z-index:101;
}
#map_area_left {
	z-index:1;
	position:absolute;
	left:0;
	top:0;
	height:100%;
	width: 100%;
}
#map_area {
	height:100%;
	width:100%;
}
#map_content {
	z-index:1;
	position:absolute;
	right:0;
	top:0;
	height:100%;
	width:0;
	background-color:#fff;
	overflow:scroll;
}
#map_category {
	position:absolute;
	left:0;
	top:0;
	padding:8px;
	width:80px;
	z-index:10
}
#map_category li {
	list-style-type:none;
	margin-bottom:8px;
	position:relative;
}
#map_category p {
	position:absolute;
	left:0;
	bottom:2px;
	width:100%;
	text-align:center;
	font-size:10px;
	line-height:12px;
	text-shadow: 
		#fff 1px 0px,  #fff -1px 0px,
		#fff 0px -1px, #fff 0px 1px,
		#fff 1px 1px , #fff -1px 1px,
		#fff 1px -1px, #fff -1px -1px,
		#fff 1px 1px,  #fff -1px 1px,
		#fff 1px -1px, #fff -1px -1px,
		#fff 1px 1px,  #fff -1px 1px,
		#fff 1px -1px, #fff -1px -1px;
}

#map_category p.selected {
	color:#f00;
}

#map_category a {
	display:block;
	width:60px;
	height:60px;
	background-color:#fff;
	border-radius:8px;
	text-align:center;
}

#map_category i {
	font-size:34px;
	line-height:46px;
}

#map_picture a {
	width:100%;
}

#map_picture img {
	width:100%;
	background-size:cover;
	background-position:center center;
}

#map_content_detail {
	padding:16px;
	position:relative;
	overflow:hidden;
}

#map_picture_button {
	position:absolute;
	right:20px;
	top:4px;
	font-size:10px;
	color:#000;
}

#map_picture_button a:link, #map_picture_button a:visited {
	color:#aaa;
}

#map_picture_button a.map_pict_show:link, #map_picture_button a.map_pict_show:visited {
	color:#f00;
}

#map_link {
	text-align:center;
	margin-top:32px;
	font-size: 14px;
	line-height: 1.5em;
}

#map_link a:link, #map_link a:visited {
	background-color:#d1eeff;
	padding: 8px 30px;
	display:inline-block;
	width: 150px;
	border-radius: 8px;
}

#map_link a:hover, #map_link a:active {
	background-color:#fcc550;
}

#map_explain a:link, #map_explain a:visited {
	color:#0e85cf;
}

#map_explain a:hover, #map_explain a:active {
	color:#ed4f44;
}

#map_content_detail h2 {
	font-size:16px;
	line-height:22px;
	font-family: 'M PLUS 1p';
	font-weight: 500;
}

#map_explain {
	padding-top:16px;
	font-size:13px;
	line-height:22px;
}

#map_close {
	position: absolute;
	left:7px;
	top:7px;
	width:20px;
	height:20px;
}

#map_close a:link, #map_close a:visited {
	border-radius: 50%;
	background-color:#fff;
	width:20px;
	height:20px;
	text-align:center;
	line-height:18px;
	font-weight:bold;
	font-size:16px;
	box-shadow: 2px 2px 2px #000;
}

#map_icon {
	margin-top:20px;
	padding-top:20px;
	border-top:1px dotted #ccc;
}
#map_icon li {
	display:inline-block;
	list-style-type:none;
	font-size:12px;
	line-height:17px;
	width:48px;
	text-align:center;
}

#map_icon li i {
	font-size:32px;
	line-height:37px;
	margin-bottom:2px;
}

@media screen and (max-width:680px) {
	#map_area_wrap {
		min-height:90vh;
		min-width:100%;
	}
}