@charset "UTF-8";


.contents .sec03 { padding-top: 0; }

/* =====================================
	map
===================================== */

#map { width: 100%; height: 600px; }
header:before { opacity: 1 !important; }

#odekake {
	padding: 160px 0 0;
	position: relative;
	background: url(../img/common/bg02.jpg);
	position: relative;
}
#odekake:before {
    content: "";
    position: absolute;
    width: 1px;
    height: 140px;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    background: #644a3b;
}
#odekake h2 {
    font-size: 26px;
    text-align: center;
    line-height: 1.6;
    letter-spacing: 0.2em;
    margin-bottom: 35px;
}
#odekake h2 span {
    font-size: 15px;
    display: block;
}

#mapList {
	display: grid;
	grid-template-columns: 1fr 45%;
	gap: 0 30px;
	max-width: 1100px;
	margin: 40px auto 0;
}
#mapList .tableWrap { width: 100%; }
#mapList table { border-spacing: 0 10px; }
#mapList th { background: #f1edeb; text-align: center; padding: 10px 15px; line-height: 1.5; white-space: nowrap; }
#mapList td { padding: 0 15px; }
#mapList td a { color: #644a3b; text-decoration: none; transition: .2s; display: inline-block; line-height: 1.4; }
#mapList td a span { border-bottom: 1px solid #644a3b; }
#mapList td a:hover span { border-color: transparent; }

@media screen and (max-width: 1200px) {
	#mapList { max-width: 90%; }
}
@media screen and (max-width: 768px) {
	#mapList { grid-template-columns: 1fr; }
	#mapList .tableWrap:last-child { margin-top: -10px; }
	#mapList table { width: 100%; }
	#mapList tr { display:block; width: 100%; }
	#mapList th { margin: 20px 0 10px; }
	#mapList th, #mapList td { display: block; width: 100%; padding: 10px 0; }
}

/* フィルター */

#odekake .mapFilter {
	position:absolute;
	top:10px;
	left:10px;
	background:white;
	padding:10px;
	border-radius:6px;
	box-shadow:0 2px 6px rgba(0,0,0,.3);
	z-index:10;
}

#odekake .mapFilter button {
	margin:2px;
	padding:6px 10px;
	border:none;
	background:#eee;
	cursor:pointer;
	border-radius:4px;
}

#odekake .mapFilter button:hover { background:#ddd;  }

/* カードUI */


#odekake .mapCard {	width: 220px; font-size: 14px; line-height: 1.6; }
/*#odekake .mapPhoto img { width: 100%; border-radius: 4px; margin-bottom: 6px; }*/
#odekake .mapHeader { display: grid; grid-template-columns: 1fr 30px; margin: 15px 0 8px; }
#odekake .mapHeader .mapTitle { font-weight: bold; font-size: 15px; line-height: 1.4; }
#odekake .mapHeader .mapClose { border: none; background: none; padding: 0; cursor: pointer; }
#odekake .mapHeader .mapClose span { display: block; position: relative; width: 100%; height: 100%; }
#odekake .mapClose span:before,
#odekake .mapClose span:after {
	content: "";
	position: absolute;
	top: 10px;
	left: 50%;
	width: 18px;
	height: 2px;
	background: #333;
	transform: translate(-50%,-50%) rotate(45deg);
}
#odekake .mapClose span:after { transform: translate(-50%,-50%) rotate(-45deg); }

#odekake .mapAddress { font-size: 13px; color:#555; }
#odekake .mapRating { margin: 4px 0; }
#odekake .mapLink {
	display: inline-block;
	margin-top: 4px;
	color: #1a73e8;
	text-decoration: none;
	font-size: 13px;
}

#odekake .mapLink:hover { text-decoration:underline; }

/* 凡例 */

#odekake .mapLegend {
	background:white;
	padding:10px;
	margin:10px;
	border-radius:6px;
	box-shadow:0 2px 6px rgba(0,0,0,.3);
	font-size:14px;
}

#odekake .legendItem { display:flex; align-items:center; margin-top:6px; }

#odekake .legendItem img { margin-right:6px; }