比較

@media (max-width: 768px) {
.map-section {
flex-direction: column; /* 縦並びに変更 */
align-items: center; /* 中央揃え */
gap: 10px; /* スペースを小さく */
padding: 1%; /* パディングを少し縮小 */
margin: 0 auto; /* 全体を中央揃え */
    }
.region-list-left, .region-list-right{
display: grid; /* グリッドレイアウトを使用 */
grid-template-columns: repeat(1, 1fr); /* 1列にする */
gap: 10px; /* 各要素間のスペース */
width: 100%; /* 幅を全体に広げる */
    }
.region {
width: 100%; /* 子要素の幅を親に合わせる */
margin-bottom: 10px; /* 各地域ブロック間の余白 */
    }
.region-list-right {
display: none; /* 768px以下では非表示 */
    }
.japan-map {
width: 100%; /* 地図の幅を全体に */
max-width: 300px; /* 最大幅を制限 */
margin: auto; /* 中央揃え */
    }
.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; /* グリッドレイアウトを使用 */
flex-direction: column; /* 縦並びに変更 */
grid-template-columns: repeat(2, 1fr); /* 2列構成に設定 */
gap: 10px; /* 各要素間のスペース */
width: 100%; /* 幅を全体に広げる */
max-width: none; /* 最大幅を制限しない */}
.japan-map {
width: 80%; /* 地図の幅を調整 */
max-width: 600px; /* 最大幅を600pxに制限 */    }
.japan-map img {
max-width: 100%;
height: auto; /* 地図のアスペクト比を保持 */
    }