/* 日本地図DOM */
.japan_map{
    position: relative;
    box-sizing: border-box;
    margin: 0 auto;
    display: table;
    background-color: #adf6ff;
}
/* 日本地図画像（スマホ対応用） */
.japan_map img{
    max-width: 100%;
    height: auto;
    border: 0;
    -webkit-backface-visibility: hidden;
}
/* Map close */
.japan_map .map_close_btn{
    cursor        : pointer;
    position      : absolute;
    z-index       : 1;
    font-size     : small;
    top           : -5px;
    right         : -5px;
    color         : red;
    border        : 2px solid red;
    padding       : 1px 7px;
    border-radius : 15px;
    background    : white;
}
/* 日本地図ボタン */
.japan_map .area_btn{
    position         : absolute;
    z-index          : 1;
    box-sizing       : border-box;
    cursor           : pointer;
    border           : 3px solid #333333;
    border-radius    : 5px;
    background-color : #FFF;
    padding          : 0.2em auto;
    font-weight      : bold;
    text-align       : center;
    white-space      : nowrap;
}

.japan_map .area_btn:hover{
    color            : #FFF;
    background-color : #54667a;
}

/* ボタン配置（使用する日本地図画像により微調整） */
.japan_map .area_btn.area1{/* 北海道 */
    top: 12%;
    right: 10%;
    width: 16%;
}
.japan_map .area_btn.area2{/* 東北 */
    top: 37%;
    right: 12%;
    width: 12%;
}
.japan_map .area_btn.area0{/* 関東 */
    top: 67%;
    right: 9%;
    width: 12%;
}
.japan_map .area_btn.area3{/* 北信越 */
    top: 40%;
    right: 30.5%;
    width: 16%;
}
.japan_map .area_btn.area4{/* 東海 */
    top: 85%;
    right: 28%;
    width: 12%;
}
.japan_map .area_btn.area5{/* 近畿 */
    top: 68%;
    right: 48%;
    width: 12%;
}
.japan_map .area_btn.area6{/* 中国 */
    top: 52%;
    left: 26%;
    width: 12%;
}
.japan_map .area_btn.area7{/* 四国 */
    top: 90%;
    left: 28%;
    width: 12%;
}
.japan_map .area_btn.area8{/* 九州 */
    top: 70%;
    left: 5%;
    width: 12%;
}
/* オーバーレイ */
.area_overlay{
    display          : none;
    position         : absolute;
    z-index          : 2;
    top              : 0;
    left             : 0;
    min-width        : 100%;
    min-height       : 100%;
    width            : auto;
    height           : auto;
    background-color : #111;
    opacity          : 0.5;
    cursor           : pointer;
}

/* 選択前は表示を隠す */
.japan_map .pref_area{
    display: none;
}

/* 地域毎の都道府県リスト */
.japan_map .pref_list{
    position          : absolute;
    top               : 50%;
    left              : 50%;
    transform         : translateY(-50%) translateX(-50%);
    -webkit-transform : translateY(-50%) translateX(-50%);
    z-index           : 3;
    box-sizing        : border-box;
    display           : -webkit-flex;
    display           : flex;
    -webkit-flex-wrap : wrap;
    flex-wrap         : wrap;
    width             : 60%;
    background-color  : #FFF;
    padding           : 15px;
    border-radius     : 10px;
    border            : 1px solid #333;
}

@media screen and (max-width: 480px){
    /* スマホユーザー向けにボタン文字サイズを調整 */
    .japan_map .area_btn{
        font-size : 4vw;
    }
    .japan_map .pref_list{
        width : 90%;
    }
}