レイアウトの崩れ直し

@media (min-width: 768px) and (max-width: 1199px) {
.map-section {
flex-direction: column; /* 中間サイズでも縦並びにする */
align-items: center; /* 中央揃え */
gap: 20px; /* 要素間のスペース */
		}
.region-list-left, .region-list-right {
width: 100%; /* 各リストを画面幅いっぱいに */
max-width: none; /* 最大幅を制限しない */
flex-direction: column; /* 縦並びに変更 */
}
.japan-map {
width: 80%; /* 地図の幅を調整 */
max-width: 600px; /* 最大幅を600pxに制限 */
}
.japan-map img {
max-width: 100%;
height: auto; /* 地図のアスペクト比を保持 */
		}
	}

@media (min-width: 768px) and (max-width: 1199px) {
.map-section {
flex-direction: column; /* 中間サイズでも縦並びにする */
align-items: center; /* 中央揃え */
gap: 20px; /* 要素間のスペース */
    }
.region-list-left, .region-list-right {
display: grid; /* グリッドレイアウトを使用 */
grid-template-columns: repeat(2, 1fr); /* 2列構成に設定 */
gap: 10px; /* 各要素間のスペース */
width: 100%; /* 幅を全体に広げる */
    }
.japan-map {
width: 80%; /* 地図の幅を調整 */
max-width: 600px; /* 最大幅を600pxに制限 */
    }
.japan-map img {
max-width: 100%;
height: auto; /* 地図のアスペクト比を保持 */
    }