:root {
	--area1-color: #7385de;
	--area1-sub-color: #d8dcf1;
	--area2-color: #539fe6;
	--area2-sub-color: #539fe6;
	--area3-color: #42ab64;
	--area3-sub-color: #cae1d2;
	--area4-color: #4ec0ca;
	--area4-sub-color: #bfdddf;
	--area5-color: #3f74a5;
	--area5-sub-color: #b9cddf;
	--area6-color: #b5d24f;
	--area6-sub-color: #dfe5c7;
	--area7-color: #fbae46;
	--area7-sub-color: #efd8b9;
	--area8-color: #df9d82;
	--area8-sub-color: #ebd6cd;
	--area9-color: #ff7575;
	--area9-sub-color: #f1d6d6;
}

.top_map_search_sect {
	padding: 4em 0;
}

.top_map_search {
	position: relative;
	width: 100%;
	max-width: 600px;
	margin: auto;
}

.top_map_search dl {
	position: absolute;
	background: #eee;
	width: 108px;
}

.top_map_search dl#pref-area1 {
	top: 130px;
	right: 38px;
}

.top_map_search dl#pref-area1 dt {
	background: var(--area1-color);
}
.top_map_search dl#pref-area1 dd {
	background: var(--area1-sub-color);
}

.top_map_search dl#pref-area2 {
	top: 290px;
	right: 70px;
}

.top_map_search dl#pref-area2 dt {
	background: var(--area3-color);
}
.top_map_search dl#pref-area2 dd {
	background: var(--area3-sub-color);
}
.top_map_search dl#pref-area3 {
	top: 153px;
	left: 226px;
}

.top_map_search dl#pref-area3 dt {
	background: var(--area4-color);
}
.top_map_search dl#pref-area3 dd {
	background: var(--area4-sub-color);
}

.top_map_search dl#pref-area4 {
	bottom: 36px;
	right: 69px;
}

.top_map_search dl#pref-area4 dt {
	background: var(--area5-color);
}
.top_map_search dl#pref-area4 dd {
	background: var(--area5-sub-color);
}

.top_map_search dl#pref-area5 {
	bottom: 6px;
	right: 185px;
}

.top_map_search dl#pref-area5 dt {
	background: var(--area6-color);
}
.top_map_search dl#pref-area5 dd {
	background: var(--area6-sub-color);
}

.top_map_search dl#pref-area6 {
	left: 113px;
	bottom: 254px;
}

.top_map_search dl#pref-area6 dt {
	background: var(--area7-color);
}
.top_map_search dl#pref-area6 dd {
	background: var(--area7-sub-color);
}

.top_map_search dl#pref-area7 {
	bottom: 6px;
	left: 190px;
}

.top_map_search dl#pref-area7 dt {
	background: var(--area8-color);
}
.top_map_search dl#pref-area7 dd {
	background: var(--area8-sub-color);
}

.top_map_search dl#pref-area8 {
	left: 0;
	bottom: 193px;
}

.top_map_search dl#pref-area8 dt {
	background: var(--area9-color);
}
.top_map_search dl#pref-area8 dd {
	background: var(--area9-sub-color);
}

.top_map_search dl dt,
.top_map_search dl dd {
	padding: 5px !important;
}
.top_map_search dl dt {
	font-size: 10pt;
	padding: 0 5px!important;
	color: #fff;
	font-weight: normal;
}
.top_map_search dl dd ul {
	display: flex;
	flex-wrap: wrap;
	list-style-type: none;
	gap: 5px;
}
.top_map_search dl dd ul li {
	padding: 3px;
	background: #fff;
	font-size: 9pt;
	width: 46px;
	text-align: center;
	cursor: pointer;
}
.map-container {
	width: 100%;
	margin: auto;
	padding: 20px;
	box-sizing: border-box;
}
svg {
	width: 100%;
}

dl#pref-area1 {
    top: 53px;
    right: 0;
}

dl#pref-area2 {
    top: 206px;
    right: 85px;
}






.prefecture polygon,
.prefecture path {
	stroke: #fff;
	stroke-width: 1;
	transition: fill 0.2s;
	cursor: pointer;
}
.prefecture:hover polygon,
.prefecture:hover path {
	opacity: 0.8;
}
.area01 {
	fill: var(--area1-color);
}
.area02 {
	fill: var(--area1-color);
}
.area03 {
	fill: var(--area3-color);
}
.area04 {
	fill: var(--area4-color);
}
.area05 {
	fill: var(--area5-color);
}
.area06 {
	fill: var(--area6-color);
}
.area07 {
	fill: var(--area7-color);
}
.area08 {
	fill: var(--area8-color);
}
.area09 {
	fill: var(--area9-color);
}
.prefecture-name {
	font-size: 18px;
	fill: #fff;
	pointer-events: none; /* テキストをクリック可能にしない */
	/*font-weight: bold;*/
	text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}



@media(max-width: 599px) {
	.top_map_search dl {
 		position: static;
		width: 100%;
		display: flex;
 	}
	.top_map_search dl dt,
	.top_map_search dl dd {
		padding: 10px !important;
		border-bottom: 2px solid #fff;
	}
	.top_map_search dl dt {
		width: 110px;
	}
	.top_map_search dl dd {
		flex: 2;
		background: #eee !important;
	}
	.top_map_search dl:last-child dt,
	.top_map_search dl:last-child dd {
		border-bottom: none;
	}
}