@charset "UTF-8";

/* 親コンテナを中央に配置 */
#map-container {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    box-sizing: border-box;
}

/* 横長の16:9比率を確実に維持 */
.map {
    width: 100%;
    max-width: 960px;
    aspect-ratio: 16 / 9; /* ←モダンブラウザで完璧に16:9 */
    margin: 0 auto;
    border: 2px solid;
    box-sizing: border-box;
}

/* iframeが親のサイズにぴったり合うように */
.map iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

/* スマホ・タブレット対応 */
@media screen and (max-width: 768px) {
    .map {
        max-width: 90%;
        border-width: 1px;
    }
}