@charset "UTF-8";
/* 地図から探す */
#my_maps #mymap {
	position: relative;
}

#my_maps #map_usageguide div.u-guide01::before {
	content: "";
	display: inline-block;
	width: 25px;
	height: 25px;
	background-image: url(/assets/img/images_browsing/map_icon02.png);
	background-size: contain;
	vertical-align: middle;
	margin-right: 0.2em;
}

#my_maps #map_usageguide div.u-guide02::before {
	content: "";
	display: inline-block;
	width: 25px;
	height: 25px;
	background-image: url(/assets/img/images_browsing/map_icon01.png);
	background-size: contain;
	vertical-align: middle;
	margin-right: 0.2em;
}

/* 地域選択エリア */
#my_maps #mymap #select_area {
	position: absolute;
	right: 0;
	top: 65px;
	z-index: 99;
	width: 130px;            /* ★ 少し大きめに */
	overflow: hidden;        /* ★ はみ出し防止 */
	box-sizing: border-box;
}

/* 背景画像 */
#my_maps #mymap #select_area .img {
	text-align: center;
	margin-bottom: 8px;
}

#my_maps #mymap #select_area .img img {
	max-width: 100%;
	height: auto;
	display: block;
	margin: 0 auto;
}

/* 地域ボタン共通 */
#my_maps #mymap #select_area .map_point {
	background-color: #e96023;
	font-size: 12px;
	font-weight: bold;
	color: #fff;
	line-height: 1.2;
	padding: .45em .6em;
	position: absolute;
	cursor: pointer;
	width: 72px;             /* ★ 少し大きめ */
	text-align: center;
	left: 50%;
	transform: translateX(-50%);
	box-sizing: border-box;
}

#my_maps #mymap #select_area .map_point.selected {
	background-color: #2360e9;
}

/* 各地域の位置 */
#map_point_1 { top: 5%; }
#map_point_3 { top: 17%; }
#map_point_2 { top: 29%; }
#map_point_4 { top: 41%; }
#map_point_6 { top: 53%; }
#map_point_7 { top: 65%; }

/* iframe */
#my_maps #mymap iframe.imap,
#my_maps #mymap div iframe {
	width: 100%;
	height: 600px;
}

/* --------------------
   レスポンシブ調整
-------------------- */

/* tablet */
@media screen and (min-width: 481px) {
	#my_maps #mymap iframe.imap,
	#my_maps #mymap div iframe {
		height: 580px;
	}

	#my_maps #mymap #select_area {
		width: 120px;
	}

	#my_maps #mymap #select_area .map_point {
		font-size: 12px;
		width: 70px;
	}
}

/* PC */
@media screen and (min-width: 768px) {
	#my_maps #mymap iframe.imap,
	#my_maps #mymap div iframe {
		height: 620px;
	}

	#my_maps #mymap #select_area {
		width: 130px;
	}

	#my_maps #mymap #select_area .map_point {
		font-size: 14px;
		width: 75px;
	}
}

/* 切り替え画面非表示 */
.maparea_container .hide {
	display: none;
}

/* =========================
   スマホ表示用 地域選択UI
   ========================= */
@media screen and (max-width: 480px) {

	#my_maps #mymap #select_area {
		width: 72px;        /* ★ 全体を細く */
		right: 0;
		top: 60px;
	}

	#my_maps #mymap #select_area .img {
		margin-bottom: 6px;
	}

	#my_maps #mymap #select_area .map_point {
		width: 50px;        /* ★ ボタン幅 */
		font-size: 11px;    /* ★ 文字を少し小さく */
		padding: .35em .2em;
		line-height: 1.15;
	}

}