@charset "UTF-8";
/* CSS Document */


img {
    vertical-align: bottom;
}

a:hover img {
    opacity: 0.7;
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=60);
    filter: alpha(opacity=60);
    transition: all 0.4s;
}

a {
    text-decoration: none;
    color: #435ea9;
}

a:hover {
    text-decoration: none;
    color: #0E2D96;
    transition: 0.3s all;
}

.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    height: 0;
    visibility: hidden;
}

/******* 地図成形 *******/
#japan-map div div.area div {
    border: 1px #ffffff solid;
    text-align: center;
    font-size: 20px;
    display: flex;
    display: -webkit-flex;
    align-items: center;
    /* 縦方向中央揃え */
    -webkit-align-items: center;
    /* 縦方向中央揃え（Safari用） */
    justify-content: center;
    /* 横方向中央揃え */
    -webkit-justify-content: center;
    /* 横方向中央揃え（Safari用） */
    position: absolute;
    box-sizing: border-box;
    transition: 0.2s;
}

#japan-map div div.area div:hover {
    opacity: 0.5;
    transition: 0.2s;
}

#japan-map {
    display: block;
    width: 777px;
    height: 482px;
    background-color: none;
    margin-left: auto;
    margin-right: auto;
    position: relative;
}

#japan-map p.area-title {
    display: none;
}

/* 北海道 */

#hokkaido_parent {
    width: 136px;
    display: block;
    height: 74px;
    position: absolute;
    left: 638px;
    z-index: 1;
}

#hokkaido_parent div.area div {}

#hokkaido {
    width: 133px;
    height: 70px;
    background-color: #2EA6E6;
    color: #ffffff;
}



/* 東北 */

#touhoku {
    width: 136px;
    display: block;
    height: 265px;
    position: absolute;
    left: 638px;
}

#touhoku div.area div {}

#aomori {
    width: 93px;
    height: 43px;
    left: 21px;
    top: 96px;
    background-color: #31C5F7;
    color: #ffffff;
}

#akita {
    width: 67px;
    height: 42px;
    left: 3px;
    top: 139px;
    background-color: #31C5F7;
    color: #ffffff;

}

#iwate {
    width: 67px;
    height: 42px;
    left: 70px;
    top: 139px;
    background-color: #31C5F7;
    color: #ffffff;
}

#yamagata {
    width: 67px;
    height: 42px;
    top: 181px;
    left: 3px;
    background-color: #31C5F7;
    color: #ffffff;
}

#miyagi {
    width: 67px;
    height: 42px;
    top: 181px;
    left: 70px;
    background-color: #31C5F7;
    color: #ffffff;
}

#fukushima {
    width: 67px;
    height: 42px;
    top: 223px;
    left: 70px;
    background-color: #31C5F7;
    color: #ffffff;
}





/* 北関東 */

#kita-kantou {
    width: 158px;
    display: block;
    height: 130px;
    position: absolute;
    top: 265px;
    left: 623px;
    z-index: 2;
}

#kita-kantou div.area div {
    background-color: #26BC5B;
    color: #ffffff;
}

#ibaraki {
    width: 52px;
    height: 85px;
    top: 0px;
    left: 100px;
}

#tochigi {
    width: 50px;
    height: 42px;
    top: 0px;
    left: 50px;
}

#gunma {
    width: 50px;
    height: 42px;
    top: 0px;
    left: 0px;
}

#saitama {
    width: 100px;
    height: 43px;
    top: 42px;
    left: 0px;
}

#nigata {
    width: 85px;
    height: 42px;
    left: 0;
    top: -42px;
}

#nagano {
    width: 67px;
    height: 85px;
    left: -67px;
    top: 0;
}

#yamanashi {
    width: 67px;
    height: 42px;
    left: -67px;
    top: 85px;
}





/* 東京 */
#tokyo_parent {
    width: 100px;
    display: block;
    height: 46px;
    position: absolute;
    top: 350px;
    left: 623px;
    z-index: 3;
}

#tokyo_parent div.area div {
    background-color: #BC2626;
    color: #ffffff;
}

#tokyo {
    width: 100px;
    height: 42px;
    top: 0;
    left: 0;
}






/* 南関東 */

#minami-kantou {
    width: 158px;
    display: block;
    height: 88px;
    position: absolute;
    top: 350px;
    left: 623px;
    z-index: 2;
}

#minami-kantou div.area div {
    background-color: #B2D661;
    color: #ffffff;
}

#chiba {
    width: 52px;
    height: 84px;
    top: 0;
    left: 100px;
}



#kanagawa {
    width: 67px;
    height: 42px;
    top: 42px;
    left: 0px;
}








/* 東海北陸 */

#toukai-hokuriku {
    width: 186px;
    height: 211px;
    position: absolute;
    left: 438px;
    top: 223px;
}

#toukai-hokuriku div.area div {
    background-color: #a260bf;
    color: #ffffff;
    //background-color: #e6e6e6;
}


#toyama {
    width: 67px;
    height: 42px;
    left: 118px;
}

#ishikawa {
    width: 50px;
    height: 57px;
    left: 68px;
}

#fukui {
    width: 68px;
    height: 42px;
    left: 0px;
    z-index: 2;
}

#gifu {
    width: 50px;
    height: 55px;
    left: 68px;
    top: 57px
}

#shizuoka {
    width: 67px;
    height: 42px;
    left: 118px;
    top: 169px;
}

#aichi {
    width: 50px;
    height: 57px;
    top: 112px;
    left: 68px;
}

#mie {
    width: 34px;
    height: 85px;
    top: 84px;
    left: 34px;
}





/* 近畿 */

#kinki {
    width: 151px;
    height: 211px;
    position: absolute;
    left: 320px;
    top: 223px;
}

#kinki div.area div {
    background-color: #b0b72f;
    color: #ffffff;
    //background: #E3E3E3;
}

#kyoto {
    width: 67px;
    height: 84px;
    left: 51px;
}

#shiga {
    width: 68px;
    height: 42px;
    top: 42px;
    left: 118px;
}

#osaka {
    width: 67px;
    height: 85px;
    top: 84px;
    left: 51px;
}

#nara {
    width: 34px;
    height: 85px;
    top: 84px;
    left: 118px;
}

#wakayama {
    width: 113px;
    height: 42px;
    top: 169px;
    left: 61px;
}

#hyougo {
    width: 51px;
    height: 98px;
    left: 0px;
}

/* 中国 */

#tyugoku {
    width: 151px;
    height: 98px;
    position: absolute;
    left: 169px;
    top: 223px;
}

#tyugoku div.area div {
    background-color: #ef9f27;
    color: #ffffff;
    //background: #E3E3E3;
}

#tottori {
    width: 50px;
    height: 49px;
    left: 101px;
}

#okayama {
    width: 50px;
    height: 49px;
    top: 49px;
    left: 101px;
}

#shimane {
    width: 51px;
    height: 49px;
    left: 50px;
}

#hiroshima {
    width: 51px;
    height: 49px;
    top: 49px;
    left: 50px;
}

#yamaguchi {
    width: 50px;
    height: 98px;
    left: 0px;
}

/* 四国 */

#shikoku {
    width: 184px;
    height: 84px;
    position: absolute;
    left: 169px;
    top: 350px;
}

#shikoku div.area div {
    background-color: #d08f68;
    color: #ffffff;
    //background: #E3E3E3;
}

#kagawa {
    width: 92px;
    height: 42px;
    right: 0px;
}

#ehime {
    width: 92px;
    height: 42px;
    left: 0px;
}

#tokushima {
    width: 92px;
    height: 42px;
    right: 0px;
    top: 42px;
}

#kouchi {
    width: 92px;
    height: 42px;
    left: 0px;
    top: 42px;
}

/* 九州・沖縄 */

#kyusyu {
    width: 152px;
    height: 247px;
    position: absolute;
    left: 0px;
    top: 235px;
}

#kyusyu div.area div {
    background-color: #ff7575;
    color: #ffffff;
    //background: #E3E3E3;
}

#fukuoka {
    width: 50px;
    height: 50px;
    left: 101px;
    top: 0px;
}

#saga {
    width: 50px;
    height: 50px;
    left: 51px;
    top: 0px;
}

#nagasaki {
    width: 50px;
    height: 50px;
    left: 1px;
    top: 0px;
}

#oita {
    width: 50px;
    height: 50px;
    left: 101px;
    top: 50px;
}

#kumamoto {
    width: 50px;
    height: 100px;
    left: 51px;
    top: 50px;
}

#miyazaki {
    width: 50px;
    height: 50px;
    left: 101px;
    top: 100px;
}

#kagoshima {
    width: 68px;
    height: 49px;
    left: 83px;
    top: 150px;
}

#okinawa {
    width: 50px;
    height: 50px;
    left: 1px;
    top: 197px;
}


/****************************************
	レスポンシブ

****************************************/


/*
@media screen and (max-width: 776px) {
    #japan-map {
        display: flex;
        width: 100%;
        flex-wrap: wrap;
        justify-content: space-around;
    }

    #japan-map p.area-title {
        display: inline-block;
        width: 100%;
        font-size: 15px;
        text-align: center;
        margin-top: 1.5em;
        margin-bottom: 1em;
        color: #000000;
    }

    #hokkaido_parent,
    #touhoku,
    #kita-kantou,
    #tokyo_parent,
    #minami-kantou,
    #toukai-hokuriku,
    #kinki,
    #tyugoku,
    #shikoku,
    #kyusyu {
        display: block;
        position: static;
        margin: 0 1em 0 1em;
    }

    #japan-map div div.area {
        display: block;
        position: relative;
    }

    #hokkaido_parent {
        height: calc(265px + 4.5em);
    }

    #touhoku {
        height: calc(265px + 4.5em);
    }

    #kita-kantou {
        height: calc(174px + 4.5em);
    }

    #toukai-hokuriku {
        height: calc(211px + 4.5em);
    }

    #kinki {
        height: calc(211px + 4.5em);
    }

    #tyugoku {
        height: calc(98px + 4.5em);
    }

    #shikoku {
        height: calc(84px + 4.5em);
    }

    #kyusyu {
        height: calc(247px + 4.5em);
    }

}
*/

/* レスポンシブ max-776px */



@media screen and (max-width: 1000px) {
    #japan-map {
        display: block;
        width: 100%;
        height: auto;
    }

    #japan-map p.area-title {
        display: inline-block;
        width: 100%;
        font-size: 25px;
        text-align: left;
        color: #000000;
        border-bottom: solid 1px #000;
        padding-bottom: 6px;
        margin-bottom: 14px;
    }


    #hokkaido_parent,
    #touhoku,
    #kita-kantou,
    #tokyo_parent,
    #minami-kantou,
    #toukai-hokuriku,
    #kinki,
    #tyugoku,
    #shikoku,
    #kyusyu {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        height: auto;
        position: static;
        margin-left: 0px;
        margin-right: 0px;
    }

    #japan-map div div.area {
        font-size: 14px;
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: 20px;
        width: 100%;
    }

    #japan-map div div.area a {
        height: auto;
        width: 100%;
    }

    #japan-map div div.area div {
        display: block;
        border-radius: 0px;
        position: static;
        height: auto;
        font-size: 25px;
        width: 100%;
        padding: 0.5em 0.3em 0.5em 0.3em;
        line-height: 2em;
        margin: 0;
        padding: 0;
        height: auto;
        box-shadow: 0 5px 0 rgb(95 169 225 / 30%);
        border:none;
    }

    #japan-map div div.area div p {
        padding: 0;
        margin: 0;
    }

}

/* レスポンシブ max-500px */