@media screen and (max-width: 767px) {
    .map-page-container {
        width: 100%;
        margin: 100px 0 0 0;
    }
    .map-page-container .area1 {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 40px 0;
    }

        .map-page-container .area1 > .content {
            width: calc(100% - 40px);
            max-width: 1280px;
        }
            .map-page-container .area1 > .content > .map-container {
                width: 100%;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                gap: 60px;
            }

                .map-page-container .area1 > .content > .map-container > iframe {
                    width: 100%;
                }

    /* ------ */
}

@media screen and (min-width: 768px) {
    .map-page-container {
        width: 100%;
    }
        .map-page-container .area1 {
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 40px 0;
        }

            .map-page-container .area1 > .content {
                width: calc(100% - 40px);
                max-width: 1280px;
            }
                .map-page-container .area1 > .content > .map-container {
                    width: 100%;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    gap: 60px;
                }
}