/* 全画面表示のためのリセットCSS */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    height: 100%;
    width: 100%;
    overflow: hidden;
    /* モバイルブラウザのズーム防止 */
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

/* 地図コンテナを全画面に設定 */
#map {
    height: 100vh;
    width: 100vw;
    position: absolute;
    top: 0;
    left: 0;
    /* モバイルでのタッチ操作最適化 */
    touch-action: manipulation;
}

/* モバイル対応 - スマートフォン */
@media screen and (max-width: 768px) {
    html, body {
        /* モバイルブラウザのアドレスバー対応 */
        height: 100%;
        min-height: 100vh;
        min-height: -webkit-fill-available;
    }
    
    #map {
        /* モバイルでの実際の表示領域に合わせる */
        height: 100vh;
        height: -webkit-fill-available;
        width: 100vw;
        width: -webkit-fill-available;
        /* iOS Safariのバウンス効果を無効化 */
        -webkit-overflow-scrolling: touch;
        /* タッチ操作の最適化 */
        touch-action: pan-x pan-y;
    }
}

/* iOS Safari専用対応 */
@supports (-webkit-touch-callout: none) {
    #map {
        height: -webkit-fill-available;
    }
}

/* Android Chrome専用対応 */
@media screen and (max-width: 768px) and (orientation: portrait) {
    #map {
        height: calc(100vh - env(safe-area-inset-bottom));
        height: calc(100vh - constant(safe-area-inset-bottom)); /* iOS 11.0-11.2 */
    }
}

@media screen and (max-width: 768px) and (orientation: landscape) {
    #map {
        height: calc(100vh - env(safe-area-inset-bottom));
        height: calc(100vh - constant(safe-area-inset-bottom)); /* iOS 11.0-11.2 */
        width: calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right));
        width: calc(100vw - constant(safe-area-inset-left) - constant(safe-area-inset-right)); /* iOS 11.0-11.2 */
    }
}

/* 高解像度ディスプレイ対応 */
@media screen and (-webkit-min-device-pixel-ratio: 2) {
    #map {
        image-rendering: -webkit-optimize-contrast;
    }
}

/* タブレット対応 */
@media screen and (min-width: 769px) and (max-width: 1024px) {
    #map {
        height: 100vh;
        width: 100vw;
    }
}