ul.jp_map {
    position: relative;
    list-style-type: none;
    margin: 10px;
    padding: 0;
    box-sizing: border-box;
    width: 100%;
}

ul.jp_map a {
    color: #000;
    text-shadow: #fff 2px 0px,
    #fff -2px 0px,
    #fff 0px -2px,
    #fff 0px 2px,
    #fff 2px 2px,
    #fff -2px 2px,
    #fff 2px -2px,
    #fff -2px -2px,
    #fff 1px 2px,
    #fff -1px 2px,
    #fff 1px -2px,
    #fff -1px -2px,
    #fff 2px 1px,
    #fff -2px 1px,
    #fff 2px -1px,
    #fff -2px -1px;
    text-decoration:none;
}

.jp_map li a {
    box-sizing: border-box;
    width: calc(50% - 6px);
    float: left;
    padding: 7px 0;
    border-radius: 10px;
    text-align: center;
    margin: 3px;
}

.jp_map li a:hover {
    text-decoration: none;
}

.jp_map li:nth-child(1) a {
    background-color: #7f7eda;
}

.jp_map li:nth-child(1) a {
    background-color: #7f7eda;
}

.jp_map li:nth-child(2) a {
    background-color: #759ef4;
}

.jp_map li:nth-child(3) a {
    background-color: #759ef4;
}

.jp_map li:nth-child(4) a {
    background-color: #759ef4;
}

.jp_map li:nth-child(5) a {
    background-color: #759ef4;
}

.jp_map li:nth-child(6) a {
    background-color: #759ef4;
}

.jp_map li:nth-child(7) a {
    background-color: #759ef4;
}

.jp_map li:nth-child(8) a {
    background-color: #7ecfea;
}

.jp_map li:nth-child(9) a {
    background-color: #7ecfea;
}

.jp_map li:nth-child(10) a {
    background-color: #7ecfea;
}

.jp_map li:nth-child(11) a {
    background-color: #7ecfea;
}

.jp_map li:nth-child(12) a {
    background-color: #7ecfea;
}

.jp_map li:nth-child(13) a {
    background-color: #7ecfea;
}

.jp_map li:nth-child(14) a {
    background-color: #7ecfea;
}

.jp_map li:nth-child(15) a {
    background-color: #7cdc92;
}

.jp_map li:nth-child(16) a {
    background-color: #7cdc92;
}

.jp_map li:nth-child(17) a {
    background-color: #7cdc92;
}

.jp_map li:nth-child(18) a {
    background-color: #7cdc92;
}

.jp_map li:nth-child(19) a {
    background-color: #7cdc92;
}

.jp_map li:nth-child(20) a {
    height: 20%;
    background-color: #7cdc92;
}

.jp_map li:nth-child(21) a {
    background-color: #7cdc92;
}

.jp_map li:nth-child(22) a {
    background-color: #7cdc92;
}

.jp_map li:nth-child(23) a {
    background-color: #7cdc92;
}

.jp_map li:nth-child(24) a {
    background-color: #ffe966;
}

.jp_map li:nth-child(25) a {
    background-color: #ffe966;
}

.jp_map li:nth-child(26) a {
    background-color: #ffe966;
}

.jp_map li:nth-child(27) a {
    background-color: #ffe966;
}

.jp_map li:nth-child(28) a {
    height: 20%;
    background-color: #ffe966;
}

.jp_map li:nth-child(29) a {
    background-color: #ffe966;
}

.jp_map li:nth-child(30) a {
    background-color: #ffe966;
}

.jp_map li:nth-child(31) a {
    background-color: #ffcc66;
}

.jp_map li:nth-child(32) a {
    background-color: #ffcc66;
}

.jp_map li:nth-child(33) a {
    background-color: #ffcc66;
}

.jp_map li:nth-child(34) a {
    background-color: #ffcc66;
}

.jp_map li:nth-child(35) a {
    background-color: #ffcc66;
}

.jp_map li:nth-child(36) a {
    background-color: #ffbb9c;
}

.jp_map li:nth-child(37) a {
    background-color: #ffbb9c;
}

.jp_map li:nth-child(38) a {
    background-color: #ffbb9c;
}

.jp_map li:nth-child(39) a {
    background-color: #ffbb9c;
}

.jp_map li:nth-child(40) a {
    background-color: #ffbdbd;
}

.jp_map li:nth-child(41) a {
    background-color: #ffbdbd;
}

.jp_map li:nth-child(42) a {
    background-color: #ffbdbd;
}

.jp_map li:nth-child(43) a {
    background-color: #ffbdbd;
}

.jp_map li:nth-child(44) a {
    background-color: #ffbdbd;
}

.jp_map li:nth-child(45) a {
    background-color: #ffbdbd;
}

.jp_map li:nth-child(46) a {
    background-color: #ffbdbd;
}

.jp_map li:nth-child(47) a {
    background-color: #f5c9ff;
}

@media screen and (min-width: 768px) {
    ul.jp_map {
        padding: 84% 0 0;
    }


    .jp_map li a {
        width: 7%;
        height: 10%;
        border: solid #ffffff 2px;
        box-sizing: border-box;
        padding: 7px 0;
        float: none;
        font-size: 14px;
        margin: 0;
    }

    .jp_map li a:hover {
        text-decoration: none;
    }

    .jp_map li:nth-child(1) a {
        position: absolute;
        top: 0;
        left: 85%;
        width: 15%;
        background-color: #7f7eda;
    }

    .jp_map li:nth-child(2) a {
        position: absolute;
        top: 11%;
        left: 85%;
        width: 14%;
        height: 5.5%;
        background-color: #759ef4;
    }

    .jp_map li:nth-child(3) a {
        position: absolute;
        top: 16.5%;
        left: 92%;
        background-color: #759ef4;
    }

    .jp_map li:nth-child(4) a {
        position: absolute;
        top: 26.5%;
        left: 92%;
        background-color: #759ef4;
    }

    .jp_map li:nth-child(5) a {
        position: absolute;
        top: 16.5%;
        left: 85%;
        background-color: #759ef4;
    }

    .jp_map li:nth-child(6) a {
        position: absolute;
        top: 26.5%;
        left: 85%;
        background-color: #759ef4;
    }

    .jp_map li:nth-child(7) a {
        position: absolute;
        top: 36.5%;
        left: 92%;
        background-color: #759ef4;
    }

    .jp_map li:nth-child(8) a {
        position: absolute;
        top: 46.5%;
        left: 92%;
        background-color: #7ecfea;
    }

    .jp_map li:nth-child(9) a {
        position: absolute;
        top: 46.5%;
        left: 85%;
        background-color: #7ecfea;
    }

    .jp_map li:nth-child(10) a {
        position: absolute;
        top: 46.5%;
        left: 78%;
        background-color: #7ecfea;
    }

    .jp_map li:nth-child(11) a {
        position: absolute;
        top: 56.5%;
        left: 85%;
        background-color: #7ecfea;
    }

    .jp_map li:nth-child(12) a {
        position: absolute;
        top: 56.5%;
        left: 92%;
        background-color: #7ecfea;
    }

    .jp_map li:nth-child(13) a {
        left: 85%;
        position: absolute;
        top: 66.5%;
        background-color: #7ecfea;
    }

    .jp_map li:nth-child(14) a {
        left: 78%;
        position: absolute;
        top: 66.5%;
        background-color: #7ecfea;
    }

    .jp_map li:nth-child(15) a {
        position: absolute;
        top: 36.5%;
        left: 78%;
        width: 14%;
        background-color: #7cdc92;
    }

    .jp_map li:nth-child(16) a {
        position: absolute;
        top: 36.5%;
        left: 71%;
        background-color: #7cdc92;
    }

    .jp_map li:nth-child(17) a {
        position: absolute;
        top: 36.5%;
        left: 64%;
        background-color: #7cdc92;
    }

    .jp_map li:nth-child(18) a {
        left: 64%;
        position: absolute;
        top: 46.5%;
        background-color: #7cdc92;
    }

    .jp_map li:nth-child(19) a {
        position: absolute;
        top: 56.5%;
        left: 78%;
        background-color: #7cdc92;
    }

    .jp_map li:nth-child(20) a {
        left: 71%;
        position: absolute;
        top: 46.5%;
        height: 20%;
        background-color: #7cdc92;
    }

    .jp_map li:nth-child(21) a {
        left: 64%;
        position: absolute;
        top: 56.5%;
        background-color: #7cdc92;
    }

    .jp_map li:nth-child(22) a {
        left: 71%;
        position: absolute;
        top: 66.5%;
        background-color: #7cdc92;
    }

    .jp_map li:nth-child(23) a {
        left: 64%;
        position: absolute;
        top: 66.5%;
        background-color: #7cdc92;
    }

    .jp_map li:nth-child(24) a {
        left: 57%;
        position: absolute;
        top: 66.5%;
        background-color: #ffe966;
    }

    .jp_map li:nth-child(25) a {
        left: 57%;
        position: absolute;
        top: 46.5%;
        background-color: #ffe966;
    }

    .jp_map li:nth-child(26) a {
        left: 50%;
        position: absolute;
        top: 46.5%;
        background-color: #ffe966;
    }

    .jp_map li:nth-child(27) a {
        left: 50%;
        position: absolute;
        top: 56.5%;
        background-color: #ffe966;
    }

    .jp_map li:nth-child(28) a {
        left: 43%;
        position: absolute;
        top: 46.5%;
        height: 20%;
        background-color: #ffe966;
    }

    .jp_map li:nth-child(29) a {
        left: 57%;
        position: absolute;
        top: 56.5%;
        background-color: #ffe966;
    }

    .jp_map li:nth-child(30) a {
        left: 50%;
        position: absolute;
        top: 66.5%;
        background-color: #ffe966;
    }

    .jp_map li:nth-child(31) a {
        left: 36%;
        position: absolute;
        top: 46.5%;
        background-color: #ffcc66;
    }

    .jp_map li:nth-child(32) a {
        left: 29%;
        position: absolute;
        top: 46.5%;
        background-color: #ffcc66;
    }

    .jp_map li:nth-child(33) a {
        left: 36%;
        position: absolute;
        top: 56.5%;
        background-color: #ffcc66;
    }

    .jp_map li:nth-child(34) a {
        left: 29%;
        position: absolute;
        top: 56.5%;
        background-color: #ffcc66;
    }

    .jp_map li:nth-child(35) a {
        left: 22%;
        position: absolute;
        top: 51.5%;
        background-color: #ffcc66;
    }

    .jp_map li:nth-child(36) a {
        left: 36%;
        position: absolute;
        top: 78.5%;
        background-color: #ffbb9c;
    }

    .jp_map li:nth-child(37) a {
        left: 36%;
        position: absolute;
        top: 68.5%;
        background-color: #ffbb9c;
    }

    .jp_map li:nth-child(38) a {
        left: 29%;
        position: absolute;
        top: 68.5%;
        background-color: #ffbb9c;
    }

    .jp_map li:nth-child(39) a {
        left: 29%;
        position: absolute;
        top: 78.5%;
        background-color: #ffbb9c;
    }

    .jp_map li:nth-child(40) a {
        left: 14%;
        position: absolute;
        top: 46.5%;
        background-color: #ffbdbd;
    }

    .jp_map li:nth-child(41) a {
        left: 7%;
        position: absolute;
        top: 46.5%;
        background-color: #ffbdbd;
    }

    .jp_map li:nth-child(42) a {
        left: 0;
        position: absolute;
        top: 46.5%;
        background-color: #ffbdbd;
    }

    .jp_map li:nth-child(43) a {
        left: 7%;
        position: absolute;
        top: 56.5%;
        background-color: #ffbdbd;
    }

    .jp_map li:nth-child(44) a {
        left: 14%;
        position: absolute;
        top: 56.5%;
        background-color: #ffbdbd;
    }

    .jp_map li:nth-child(45) a {
        left: 14%;
        position: absolute;
        top: 66.5%;
        background-color: #ffbdbd;
    }

    .jp_map li:nth-child(46) a {
        left: 7%;
        position: absolute;
        top: 66.5%;
        background-color: #ffbdbd;
    }

    .jp_map li:nth-child(47) a {
        left: 0;
        position: absolute;
        top: 76.5%;
        background-color: #f5c9ff;
    }
}