/* ======================================= */
/* ファイル名: google-map.css */
/* ======================================= */

/* マップのレスポンシブ容器 */
.map-container {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9の比率で保持 */
    margin-bottom: 40px;
    border: 1px solid #ccc;
}

.map-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
}

/* スマホ時は少し縦長にして見やすくする */
@media screen and (max-width: 768px) {
    .map-container {
        padding-top: 75%; /* 4:3の比率 */
    }
}