html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

.map {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: #33424f;
    position: absolute;
    z-index: 0;
}

.map .ol-custom-overviewmap .ol-overviewmap-box {
    border: 0.2rem solid #d63636;
}

.map .ol-custom-overviewmap:not(.ol-collapsed) button{
    display:none;
}

.map .ol-custom-overviewmap,
.map .ol-custom-overviewmap.ol-uncollapsible {
    border: 0.25rem solid #c2c2c2;
    opacity: 90%;
    margin: 0;
    padding: 0;
    border-radius: 0 0 0 0;
    bottom: 0;
    left: auto;
    right: 0;
    top: auto;
}

.map .ol-custom-overviewmap .ol-overviewmap-map {
    background-color: #1f1f1f;
    border: none;
    width: 28.8vw;
    height: 16.2vw;
}

.ol-overviewmap-map {
    border: none;
}

.ol-overviewmap .ol-overviewmap-map {
    margin: 0 !important;
}


.ol-attribution :not(.copyright){
    display: none;
}

.ol-control {
    padding: 0 !important;
}

.copyright {
    top: auto;
    bottom: 1.2vw;
    left: 0;
    right: auto;
    padding: 0;
    margin: 0;
    border-radius: 0 !important;
    background-color: #a1a1a1 !important;
    opacity: 80%;
}

.map .copyright button {
    display: none;
}

.map .copyright ul {
    padding: 0 1vw 0 0.8vw;
    margin: 0;
}

.ol-zoom {
    display: none;
}

/* copyright の文字*/
.map .copyright ul li {
    font-size: 1vw;
    font-family: 'Noto Sans JP', sans-serif;
}

.data {
    padding: .5vw 1.5vw 1vw 1.5vw;
    color: #ffffff;
    background-color: #67728a;
    position: absolute;
    z-index: 1;
    opacity: 80%;
    font-family: 'Noto Sans JP', sans-serif;
}

.title {
    text-align: center;
    font-size: 3vw;

}

.now {
    text-align: center;
    font-size: 1.5vw;
}