html {
    scroll-behavior: smooth;
}

.map-wrapper {
    position: relative;
    width: 100%;
    margin: auto;
    background: #e5e5e5;
    font-size: 16px;
}

    .map-wrapper img {
        width: 100%;
        display: block;
        /* height: 100%; */
    }

/* =========================
   COMMON LABEL STYLE
========================= */

.label {
    position: absolute;
    font-size: 1.2vw;
    color: #222;
    white-space: nowrap;
    font-weight: 500;
    text-decoration: none;
    position: absolute;
    line-height: 0.5rem;
    padding: 0 5px;
}

/* =========================
   LEFT SIDE LABELS
========================= */

.akita {
    top: 0;
    left: 19.5%;
}

.yokote {
    top: 5.5%;
    left: 12%;
}

.niigata-kamo {
    top: 10.5%;
    left: 5.5%;
}

.joetsu-myoko {
    top: 15.5%;
    left: .5%;
}

.kanazawa {
    top: 20%;
    left: 5.5%;
}

.fukui {
    top: 25%;
    left: .5%;
}

.ritsumeikan {
    top: 29.3%;
    left: 5.5%;
}

.nishi-umeda {
    top: 37%;
    left: 1%;
}

.hiroshima {
    top: 47%;
    left: 5.5%;
}

.fukuoka {
    top: 53%;
    left: 0.5%;
}

.saga {
    top: 59%;
    left: 5.5%;
}

.naha {
    top: 67%;
    left: 1%;
}

.kagoshima {
    bottom: 4%;
    left: 29%;
}

/* =========================
   RIGHT SIDE LABELS
========================= */

.aomori {
    top: 7.5%;
    right: 7%;
}

.sendai {
    top: 16%;
    right: 6%;
}

.fukushima {
    top: 23%;
    right: 0.5%;
}

.gumma {
    top: 30%;
    right: 0%;
}

.utsunomiya {
    top: 36%;
    right: 6%;
}

.nagano {
    top: 41.5%;
    right: 13%;
}

.shibaura {
    top: 48%;
    right: 6%;
}

.toranomon {
    top: 53.5%;
    right: 5.6%;
}

.ningyocho {
    top: 58%;
    right: 5.9%;
}

.hamamatsucho {
    top: 62.5%;
    right: 6%;
}

.shibuya {
    bottom: 32%;
    right: 6%;
}

.nagoya {
    bottom: 20%;
    right: 10%;
}

.map-wrapper a.label[href]:focus {
    z-index: 1;
    outline: 4px dashed #000;
    outline-offset: 7px;
}
.contents {
   
    background-color: #e6e6e6;
}
@media(max-width:767px) {
    .map-wrapper a.label[href]:focus {
        outline: .07rem dashed #000;
        /*outline-offset: -1px;*/
    }

    .label {
        font-size: 1vw;
      }
    }

@media (prefers-color-scheme: dark) {
    
    .map-wrapper a.label[href]:focus {
        outline-color: window !important;
       /* outline: 3px dashed #000;*/
        outline-offset: 7px;
    }
    .label {
        color: windowtext;
    }
    .contents {
        background-color: WindowText;
     
    }
}



@media only screen and (min-width: 321px) and (max-width: 650px) {
    .map-wrapper a.label[href]:focus {
        outline-offset: 4px;
    }
    .nagano {
        top: 41%;
    }
    .yokote {
        top: 5%;
    }
    .joetsu-myoko {
        top: 14.5%;
    }

    .kanazawa {
        top: 19.5%;
    }

    .fukui {
        top: 23.7%;
    }

    .utsunomiya {
        top: 35.5%;
    }

    .toranomon {
        top: 53%;
    }

    .ningyocho {
        top: 57.5%;
    }

    .hamamatsucho {
        top: 62%;
    }

    .shibuya {
        bottom: 31.4%;
    }

    .nagoya {
        bottom: 20%;
    }

    .kagoshima {
        bottom: 3%;
    }

    .ritsumeikan {
        top: 29%;
    }

    .niigata-kamo {
        top: 9.8%;
    }
    
}

@media(max-width:320px) {
    .fukui {
        top: 23.5%;
    }

    .saga {
        top: 57.5%;
    }

    .shibuya {
        bottom: 29%;
    }

    .shibaura {
        top: 46%;
    }

    .hamamatsucho {
        top: 61%;
    }

    .ningyocho {
        top: 56.5%;
    }

    .toranomon {
        top: 52%;
    }

    .kanazawa {
        top: 19.5%;
    }

    .ritsumeikan {
        top: 28%;
    }

    .niigata-kamo {
        top: 9.5%;
    }

    .joetsu-myoko {
        top: 14.5%;
    }

    .map-wrapper a.label[href]:focus {
        outline-offset: -1px;
    }

    .yokote {
        top: 4%;
    }

   
    .akita {
      top:-0.8%;
        left: 18%;
    }

    .yokote {
       
        left: 11%;
    }

    .niigata-kamo {
        
        left: 4%;
    }

    .joetsu-myoko {
       
        left: -1%;
    }

    .kanazawa {
        
        left: 4.5%;
    }

    .fukui {
        
        left: -1%;
    }

    .ritsumeikan {
       
        left: 4%;
    }

    .nishi-umeda {
        
        left: -1%;
    }

    .hiroshima {
        
        left: 4%;
    }

    .fukuoka {
        
        left: -1%;
    }

    .saga {
        
        left: 4%;
    }

    .naha {
        
        left: 1%;
    }

    .kagoshima {
       
        left: 29%;
    }

    /* =========================
   RIGHT SIDE LABELS
========================= */

    .aomori {
       
        right: 5%;
    }

    .sendai {
        
        right: 5%;
    }

    .fukushima {
        
        right: -0.5%;
    }

    .gumma {
        
        right: -1%;
    }

    .utsunomiya {
       
        right: 4%;
    }

    .nagano {
        
        right: 11%;
    }

    .shibaura {
        
        right: 5%;
    }

    .toranomon {
        
        right: 4.6%;
    }

    .ningyocho {
       
        right: 4.9%;
    }

    .hamamatsucho {
        
        right: 5%;
    }

    .shibuya {
        
        right: 5%;
    }

    .nagoya {
       
        right: 8%;
    }
}



  @media only screen and (min-width:1281px) {
        .map-wrapper a.label[href]:focus {
            outline-offset: 10px;
        }
    }