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

.region_box{
	background-color: #f0ede2;
	
}

.map_wrap{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	position: relative;
	margin:30px auto 0;
	max-width:1260px;
	padding:50px 40px 60px;
}

.map_img{
	position:absolute;
	top:35px;
	left:0;
	right:0;
	margin: auto;
	height:calc(100% - 110px);
	width:auto;
}

.map_list a,
.list_div{
	display: block;
	font-size: 13px;
	padding:8px 12px;
}
.map_list a{
	color:#333;
	text-decoration:none;
	transition: .2s;
}

.map_list.left,
.map_list.right{
	position: relative;
	z-index: 2;
}


@media only screen and (max-width: 1100px){
	.map_list.left,
	.map_list.right{
		width:100%;	
	}
	.map_list a,
	.list_div{
		padding:6px 12px;
	}
	.map_img{
		top:50px;
		left:auto;
		right:20px;
		margin: 0;
		width:60%;
		height:auto;
	}
}


@media only screen and (max-width: 767px){
	.map_img{
		position:relative;
		top:auto;
		right:auto;
		width:100%;
		max-width: 500px;
		margin: auto;
	}
	.map_list.left{
		padding-top:20px;
	}
}

@media only screen and (max-width: 520px){
	.map_wrap {
		padding:30px 20px 60px;
	}
	.map_list a,
	.list_div{
		padding:7px 8px;
		font-size: 12px;
		letter-spacing: -0.04em;
		line-height: 1.4em;
	}
	.map_list a{
		text-decoration: underline dotted;
	}
	.map_list.left{
		padding-top:10px;
	}
}

@media only screen and (min-width: 521px){
	.map_list a:hover{
		background-color: rgba(255,255,255,.4);
	}
}