/* Google Mapを囲う要素 */
.map {
    position: relative;
    max-width: 100vw;
    max-height: 70vh;
}

/* Google Mapのiframe */
.map iframe {
    position: static;
    padding-top: 20px;
    padding-bottom: 3%;
    padding-left: 5%;
    top: 0;
    left: 5%;
    min-height: 40vh;
}
/* スマホなどの小さな画面向けの調整 */
@media (max-width: 991px) {
    .map {
            padding: 0 5% 5% 20px;
    }
}
/* 画面幅が広い場合 (992px以上) */
@media (min-width: 992px) {
    .map {
        text-align: center;
        display: block;
        height :auto;
        min-height: 60vh;
    }

}