#gaikan-floor-plan {
    position: absolute;
    top: 0;
    right: 0;
    display: none;
    width: calc(2000em / 5);
    height: calc(1073em / 5);
    transform-origin: top right;
    transition: all 0.5s;
    overflow: visible;
}

#gaikan-floor-plan-map {
    width: calc(2000em / 5);
    height: calc(1073em / 5);
}

.hide40ByWidth {
    transform: translateX(calc(100% - (40em/2 + 0.5rem + 5em)))
}


.close-map-icon {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    opacity: 1;
    cursor: pointer;
    background: url("../static/image/MAP/gaikan/arrow.png");
    background-repeat: no-repeat;
    background-size: cover;
    width: calc(40em/2);
    height: calc(40em/2);
    z-index: 1;
}

.open-map-icon {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    opacity: 1;
    cursor: pointer;
    background: url("../static/image/MAP/gaikan/arrow.png");
    background-repeat: no-repeat;
    background-size: cover;
    width: calc(40em/2);
    height: calc(40em/2);
    z-index: 1;
    transform: rotate(180deg);
}

.trasformRight {
    left: calc(9em);
}


#zoom-gaikan-floor-plan-icon {
    position: absolute;
    top: calc(0.7rem + 40em/2);
    right: 0.5rem;
    opacity: 1;
    cursor: pointer;
    background: url("../static/image/MAP/gaikan/add.png");
    background-repeat: no-repeat;
    background-size: cover;
    width: calc(40em/2);
    height: calc(40em/2);
    z-index: 1;
}

#maphotspot-kouen2 {
    position: absolute;
    top: 44%;
    right: 70.5%;
}
#radar-kouen2 {
    position: absolute;
    top: 46.3%;
    left: 28.2%;
}


#maphotspot-kouen4 {
    position: absolute;
    top: 38.3%;
    right: 30.5%;
}
#radar-kouen4 {
    position: absolute;
    top: 40.2%;
    left: 68.3%;
}

#maphotspot-kouen3 {
    position: absolute;
    top: 56%;
    right: 30.7%;
}

#radar-kouen3 {
    position: absolute;
    top: 57.9%;
    left: 68.2%;
}

#maphotspot-kouen7 {
    position: absolute;
    top: 44.5%;
    right: 42.5%;
}
#radar-kouen7 {
    position: absolute;
    top: 46.7%;
    left: 56.6%;
}

#maphotspot-kouen6 {
    position: absolute;   
    top: 37.7%;
    right: 72%;
}
#radar-kouen6 {
    position: absolute;
    top: 40.1%;
    left: 26.8%;
}

#maphotspot-kouen1 {
    position: absolute;
    top: 38%;
    right: 63%;
}
#radar-kouen1 {
    position: absolute;
    top: 40.5%;
    left: 36%;
}

#maphotspot-kouen1_2 {
    position: absolute;
    top: 47.5%;
    right: 52.5%;
}
#radar-kouen1_2 {
    position: absolute;
    top: 49.5%;
    right: 48.5%;
}

#maphotspot-kouen1_3 {
    position: absolute;
    top: 39.5%;
    right: 50.5%;
}
#radar-kouen1_3 {
    position: absolute;
    top: 41.5%;
    right: 46.5%;
}

#maphotspot-hirameki1 {
    position: absolute;
    top: 38.5%;
    right: 46%;

}

#radar-hirameki1 {
    position: absolute;
    top: 41.1%;
    left: 52.7%;
}

#maphotspot-hirameki1_2 {
    position: absolute;
    top: 25.5%;
    right: 32%;

}

#radar-hirameki1_2 {
    position: absolute;
    top: 27.5%;
    left: 67.1%;
}

#maphotspot-kouen5 {
    position: absolute;
    top: 25.5%;
    right: 32%;
}

#radar-kouen5 {
    position: absolute;
    top: 27.5%;
    right: 28.3%;
}


#maphotspot-access {
    position: absolute;
    top: 49.5%;
    right: 70%;
}

#radar-access {
    position: absolute;
    top: 52%;
    right: 66.5%;
}

#maphotspot-gaikan {
    position: absolute;
    top: 37.5%;
    right: 75.2%;
}

#radar-gaikan {
    position: absolute;
    top: 39.9%;
    left: 23.5%;
}


#maphotspot-choukan {
    position: absolute;
    top: 86%;
    right: 39%;
}

#radar-choukan {
    position: absolute;
    top: 88%;
    left: 60.1%;
}

#maphotspot-hirameki2 {
    position: absolute;
    top: 53%;
    right: 13.5%;
}

#radar-hirameki2 {
    position: absolute;
    top: 55%;
    right: 9.5%;
}

#maphotspot-access2 {
    position: absolute;
    top: 42.3%;
    right: 79.3%;
}

#radar-access2 {
    position: absolute;
    top: 44.8%;
    left: 19.6%;
}

#maphotspot-hirameki2_2 {
    position: absolute;
    top: 46%;
    right: 13.8%;
}

#radar-hirameki2_2 {
    position: absolute;
    top: 48.5%;
    left: 84.9%;
}

@media (max-width: 991px) and (max-height: 568px) {
    
#gaikan-floor-plan {
    position: absolute;
    top: 0;
    right: 0;
    display: none;
    width: 100svw;
    height: 100svh;
    transform-origin: top right;
    transition: all 0.5s;
    overflow: visible;
    z-index: 100;
    background-color: rgba(21, 17, 17, 0.61);
}

#gaikan-floor-plan-map {
    width: auto;
    height: auto;
}

.hide40ByWidth {
    transform: translateX(100%)
}

#zoom-gaikan-floor-plan-icon {
    display: none !important;
}

.trasformRight {
    top: 0px;
    left: calc(-201px * 0.5);
}

.close-map-icon {
    background: url("../static/image/icon/Close_01.png");
    background-repeat: no-repeat ;
    background-size: contain ;
    width: calc(40em/2);
    height: calc(40em/2);
}

.open-map-icon {
    background: url("../static/image/MAP/gaikan/MiniMapIcon.png");
    background-repeat: no-repeat ;
    background-size: contain ;
    width: calc(201px * 0.5);
    height: calc(209px * 0.5);
    transform: rotate(0deg) !important;
}

#radar-hirameki1_2 {
    position: absolute;
    top: 26.6%;
    left: 67.1%;
}

#radar-kouen4 {
    position: absolute;
    top: 40.2%;
    left: 68.8%;
}

#radar-kouen3 {
    position: absolute;
    top: 57.9%;
    left: 68.4%;
}

#radar-hirameki1 {
    position: absolute;
    top: 39.5%;
    left: 53%;
}

#radar-kouen1 {
    position: absolute;
    top: 40.1%;
    left: 36.1%;
}

#radar-kouen2 {
    position: absolute;
    top: 45.3%;
    left: 28.5%;
}

#radar-gaikan {
    position: absolute;
    top: 39.9%;
    left: 23.9%;
}
}