@charset "utf-8";

#zm {
    position: relative;
    overflow: hidden;
}

#zm .closebtn {
    display: none;
    position: absolute;
    bottom: .3em;
    right: .3em;
    font-size: 70%;
    font-size: 70%;
    line-height: 1.3;
    color: #fff;
    background: #66758c;
    padding: .3em 1em;
    border: #fff 1px solid;
    border-radius: 5px;
    cursor: pointer;
}

#zm .area {
    position: absolute;
    font-size: 70%;
    line-height: 1.3;
    color: #fff;
    width: 15em;
}

#zm .area h3 {
    display: table;
    margin: 0 0 1em;
    padding: .3em 1em;
    cursor: pointer;
}

#zm .area a {
    display: inline-block;
    color: #fff;
    margin: .2em 0 .2em .5em;
    padding: .3em .3em;
}

#zm .area a::after {
    content: attr(data-c);
    margin-left: .3em;
    display: inline-block;
    width: 1.5em;
    font-size: 80%;
    color: #000;
    text-align: center;
    line-height: 1.5;
    background: #fff;
    border-radius: 50%;
}

#zm .area>* {
    position: relative;
    z-index: 1;
    border: #fff 1px solid;
    border-radius: 5px;
}

/* PC用の位置と背景色 */
#zm [data-a="hk"] {
    left: 65%;
    top: 15%;
}

#zm [data-a="hk"]>* {
    background: #63aad0;
}

#zm [data-a="th"] {
    left: 65%;
    top: 35%;
}

#zm [data-a="th"]>* {
    background: #628cca;
}

#zm [data-a="kt"] {
    left: 65%;
    top: 60%;
}

#zm [data-a="kt"]>* {
    background: #e68d7c;
}

#zm [data-a="cb"] {
    left: 44%;
    top: 51%;
}

#zm [data-a="cb"]>* {
    background: #97c559;
}

#zm [data-a="kk"] {
    left: 40%;
    top: 72%;
}

#zm [data-a="kk"]>* {
    background: #dba53d;
}

#zm [data-a="cg"] {
    left: 24%;
    top: 64%;
}

#zm [data-a="cg"]>* {
    background: #a496da;
}

#zm [data-a="sk"] {
    left: 28%;
    top: 80%;
}

#zm [data-a="sk"]>* {
    background: #50c3af;
}

#zm [data-a="ky"] {
    left: 9%;
    top: 80%;
}

#zm [data-a="ky"]>* {
    background: #d586a8;
}

#zm [data-a="ot"] {
    left: 28%;
    top: 35%;
}

#zm [data-a="ot"]>* {
    background: #3f94c3;
}

@media only screen and (max-width:699px) {

    /* SP用の位置 */
    #zm [data-a="hk"] {
        left: 63%;
        top: 15%;
    }

    #zm [data-a="th"] {
        left: 63%;
        top: 40%;
    }

    #zm [data-a="kt"] {
        left: 67%;
        top: 60%;
    }

    #zm [data-a="cb"] {
        left: 42%;
        top: 60%;
    }

    #zm [data-a="kk"] {
        left: 38%;
        top: 71%;
    }

    #zm [data-a="cg"] {
        left: 18%;
        top: 62%;
    }

    #zm [data-a="sk"] {
        left: 28%;
        top: 79%;
    }

    #zm [data-a="ky"] {
        left: 9%;
        top: 88%;
    }

    #zm [data-a="ot"] {
        left: 28%;
        top: 35%;
    }

    #zm .area a {
        display: none;
    }

    /* 都道府県は非表示 */
    #zm.zoom h3 {
        display: none;
    }

    /* エリア名も非表示 */
    #zm.zoom .area {
        left: 30%;
        top: 30%;
    }

    /* 拡大した際には中央っぽい場所に表示 */
    /* エリアごとのアニメーションの指定 */
    #zm[data-p="hk"] .map {
        animation: zo-hk 2s linear forwards;
    }

    #zm[data-p="th"] .map {
        animation: zo-th 2s linear forwards;
    }

    #zm[data-p="kt"] .map {
        animation: zo-kt 2s linear forwards;
    }

    #zm[data-p="cb"] .map {
        animation: zo-cb 2s linear forwards;
    }

    #zm[data-p="kk"] .map {
        animation: zo-kk 2s linear forwards;
    }

    #zm[data-p="cg"] .map {
        animation: zo-cg 2s linear forwards;
    }

    #zm[data-p="sk"] .map {
        animation: zo-sk 2s linear forwards;
    }

    #zm[data-p="ky"] .map {
        animation: zo-ky 2s linear forwards;
    }

    #zm[data-p="ot"] .map {
        animation: zo-ot 2s linear forwards;
    }

    /* ズーム完了後に 都道府県名が揺れるアニメーション */
    #zm[data-p="hk"] [data-a="hk"] a {
        opacity: 0;
        display: inline-block;
        animation: disp 1s 2s forwards;
    }

    #zm[data-p="th"] [data-a="th"] a {
        opacity: 0;
        display: inline-block;
        animation: disp 1s 2s forwards;
    }

    #zm[data-p="kt"] [data-a="kt"] a {
        opacity: 0;
        display: inline-block;
        animation: disp 1s 2s forwards;
    }

    #zm[data-p="cb"] [data-a="cb"] a {
        opacity: 0;
        display: inline-block;
        animation: disp 1s 2s forwards;
    }

    #zm[data-p="kk"] [data-a="kk"] a {
        opacity: 0;
        display: inline-block;
        animation: disp 1s 2s forwards;
    }

    #zm[data-p="cg"] [data-a="cg"] a {
        opacity: 0;
        display: inline-block;
        animation: disp 1s 2s forwards;
    }

    #zm[data-p="sk"] [data-a="sk"] a {
        opacity: 0;
        display: inline-block;
        animation: disp 1s 2s forwards;
    }

    #zm[data-p="ky"] [data-a="ky"] a {
        opacity: 0;
        display: inline-block;
        animation: disp 1s 2s forwards;
    }

    #zm[data-p="ot"] [data-a="ot"] a {
        opacity: 0;
        display: inline-block;
        animation: disp 1s 2s forwards;
    }

    #zm.zoom .closebtn {
        display: block;
    }

    /* ズーム時には閉じるボタンを表示 */
}

#zm .area a[data-c="0"] {
    display: none;
}

/* 件数0の都道府県は非表示 */

/* ズームする場所と倍率の指定 */
@keyframes zo-hk {
    to {
        transform-origin: 63% 15%;
        transform: scale(3);
    }
}

@keyframes zo-th {
    to {
        transform-origin: 63% 40%;
        transform: scale(3);
    }
}

@keyframes zo-kt {
    to {
        transform-origin: 67% 60%;
        transform: scale(3);
    }
}

@keyframes zo-cb {
    to {
        transform-origin: 42% 60%;
        transform: scale(3);
    }
}

@keyframes zo-kk {
    to {
        transform-origin: 38% 71%;
        transform: scale(3);
    }
}

@keyframes zo-cg {
    to {
        transform-origin: 18% 62%;
        transform: scale(3);
    }
}

@keyframes zo-sk {
    to {
        transform-origin: 28% 79%;
        transform: scale(3);
    }
}

@keyframes zo-ky {
    to {
        transform-origin: 9% 88%;
        transform: scale(3);
    }
}

@keyframes zo-ot {
    to {
        transform-origin: 28% 35%;
        transform: scale(3);
    }
}

/* 都道府県が揺れるアニメーション */
@keyframes disp {
    0% {}

    50% {
        opacity: 1;
        transform: rotate(0deg);
    }

    70% {
        opacity: 1;
        transform: rotate(20deg);
    }

    90% {
        opacity: 1;
        transform: rotate(-20deg);
    }

    100% {
        opacity: 1;
        transform: rotate(0deg);
    }
}

@media (max-width:699px) {
    #zm.zoom .area {
        width: 80%;
        left: 10%;
        top: 50%;
        transform: translateY(-50%);
    }

    #zm .area h3 {
        font-size: 2.2vw;
        margin: 0;
    }

    #zm.zoom .area a {
        font-size: 3vw;
    }

    #zm .closebtn {
        font-size: 3vw;
    }

    #zm[data-p="hk"] [data-a="hk"] a::after {
        color: #63aad0;
    }

    #zm[data-p="th"] [data-a="th"] a::after {
        color: #628cca;
    }

    #zm[data-p="kt"] [data-a="kt"] a::after {
        color: #e68d7c;
    }

    #zm[data-p="cb"] [data-a="cb"] a::after {
        color: #97c559;
    }

    #zm[data-p="kk"] [data-a="kk"] a::after {
        color: #dba53d;
    }

    #zm[data-p="cg"] [data-a="cg"] a::after {
        color: #a496da;
    }

    #zm[data-p="sk"] [data-a="sk"] a::after {
        color: #50c3af;
    }

    #zm[data-p="ky"] [data-a="ky"] a::after {
        color: #d586a8;
    }

    #zm[data-p="ot"] [data-a="ot"] a::after {
        color: #3f94c3;
    }
}

@media (max-width:399px) {
    #zm .area h3 {
        font-size: 3vw;
    }

    #zm.zoom .area a {
        font-size: 4vw;
    }

    #zm .closebtn {
        font-size: 4vw;
    }
}