﻿@charset "UTF-8";

/* @class */

.section.single .in-section {
    width: 960px;
    margin: 0 auto;
}

#placesearch_main .tab_direction {
    display: flex;
    text-align: center;
}

#placesearch_main .tab_direction a {
    width: 50%;
}

#placesearch_main .tab_direction h2 {
    font-size: 1.5rem;
}

#placesearch_main a.m-button {
    padding: 5px 1em;
    border-radius: 15px 15px 0 0;
}

#placesearch_main a.m-button+a.m-button {
    margin-left: 2px;
}

#placesearch_main a.m-button.notselect {
    border: solid 3px rgb(38, 139, 186);
    background-color: #ffffff;
    color: rgb(38, 139, 186);
}

/* 地図サイズ共通 */
#placesearch_main ul.jp_map {
    position: relative;
    list-style-type: none;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

#placesearch_main ul.jp_map a {
    color: #000;
    background-color: #ffffff;
}

#placesearch_main .jp_map .area span,
#placesearch_main .jp_map .pref a {
    box-sizing: border-box;
    text-align: center;
}

#placesearch_main .jp_map .pref a:hover {
    text-decoration: none;
    background-color: rgb(38, 139, 186);
    color: rgb(38, 139, 186);
    border-color: rgb(38, 139, 186);
    color: #ffffff;
}

#placesearch_main .AddChildArea,
#placesearch_main .SelectChildArea {
    width: 49%;
    display: inline-block;
}

#placesearch_main .AddChildArea h2,
#placesearch_main .SelectChildArea h2 {
    background-color: rgb(38, 139, 186);
    color: #ffffff;
    padding: 5px;
}

@media screen and (min-width: 769px) {

    #placesearch_main .jp_map .area {
        display: none;
    }

    /* 吹き出し */
    #placesearch_main .balloon_area {
        background: rgb(38, 139, 186);
        border-radius: 30px;
        color: #ffffff;
        font-size: 1.5rem;
        margin: 1em;
        padding: 0.5em;
        width: 15em;
        display: block;
        position: absolute;
    }
    #placesearch_main .balloon_area span {
        font-weight: bold;
    }

/* 地図全体 */
    #placesearch_main .map_area {
        margin-bottom: 2em;
        padding-top: 1em;
        padding-left: 8em;
    }

    #placesearch_main ul.jp_map {
        height: 25em;
    }

    #placesearch_main .jp_map .pref a {
        width: 6%;
        height: calc(11% - 3px);
        padding: 7px 0;
        font-size: 12px;
        background-color: rgb(170, 215, 255);
        border: solid 2px #ffffff;
        border-width: 3px 2px;
    }

/* 都道府県 共通 */
    #placesearch_main .jp_map .pref a {
        position: absolute;
    }

    #placesearch_main .jp_map .pref.col-15 a {
        left: 85%;
    }

    #placesearch_main .jp_map .pref.col-14 a {
        left: 79%;
    }

    #placesearch_main .jp_map .pref.col-13 a {
        left: 73%;
    }

    #placesearch_main .jp_map .pref.col-12 a {
        left: 67%;
    }

    #placesearch_main .jp_map .pref.col-11 a {
        left: 61%;
    }

    #placesearch_main .jp_map .pref.col-10 a {
        left: 55%;
    }

    #placesearch_main .jp_map .pref.col-9 a {
        left: 49%;
    }

    #placesearch_main .jp_map .pref.col-8 a {
        left: 43%;
    }

    #placesearch_main .jp_map .pref.col-7 a {
        left: 37%;
    }

    #placesearch_main .jp_map .pref.col-6 a {
        left: 31%;
    }

    #placesearch_main .jp_map .pref.col-5 a {
        left: 25%;
    }

    #placesearch_main .jp_map .pref.col-4 a {
        left: 19%;
    }

    #placesearch_main .jp_map .pref.col-3 a {
        left: 12%;
    }

    #placesearch_main .jp_map .pref.col-2 a {
        left: 6%;
    }

    #placesearch_main .jp_map .pref.col-1 a {
        left: 0%;
    }


    #placesearch_main .jp_map .pref.row-1 a {
        top: 0;
    }

    #placesearch_main .jp_map .pref.row-2 a {
        top: 10%;
    }

    #placesearch_main .jp_map .pref.row-3 a {
        top: 22%;
    }

    #placesearch_main .jp_map .pref.row-4 a {
        top: 32%;
    }

    #placesearch_main .jp_map .pref.row-5 a {
        top: 42%;
    }

    #placesearch_main .jp_map .pref.row-6 a {
        top: 52%;
    }

    #placesearch_main .jp_map .pref.row-7 a {
        top: 62%;
    }

    #placesearch_main .jp_map .pref.row-8 a {
        top: 72%;
    }

    #placesearch_main .jp_map .pref.row-9 a {
        top: 82%;
    }

    #placesearch_main .jp_map .pref.row-10 a {
        top: 92%;
    }

/* 都道府県 個別 */

    #placesearch_main .jp_map .pref a.no102 {
        margin-top: 10px;
    }

    #placesearch_main .jp_map .pref a.no2 {
        width: 12%;
    }

    #placesearch_main .jp_map .pref a.no7 {
        margin-left: -29px;
    }

    #placesearch_main .jp_map .pref a.no7,
    #placesearch_main .jp_map .pref a.no17 {
        width: calc(6% + 28px);
    }

    #placesearch_main .jp_map .pref a.no16 {
        height: calc(20% + 7px * 1);
    }

    #placesearch_main .jp_map .pref a.no28 {
        border-bottom-width: 8px;
        height: calc(20% + 7px * 1);
    }

    #placesearch_main .jp_map .pref a.no36,
    #placesearch_main .jp_map .pref a.no37,
    #placesearch_main .jp_map .pref a.no38,
    #placesearch_main .jp_map .pref a.no39 {
        margin-top: 1em;
    }

}

@media screen and (max-width: 768px) {
    .section.single .in-section {
        padding: 0;
    }

    #placesearch_main .tab_direction h2 {
        font-size: 1.2rem;
    }

    #placesearch_main .balloon_area {
        font-size: 1.2rem;
        margin: 5px;
    }

    #placesearch_main .jp_map .pref a {
        border: solid 3px rgb(170, 215, 255);
        width: calc(33% - 6px);
        float: left;
        margin: 3px;
    }

    #placesearch_main .jp_map .area span {
        background-color: rgb(38, 139, 186);
        border-radius: 0;
        color: #ffffff;
        width: 100%;
        float: left;
        margin: 3px;
        font-weight: bold;
    }

    .section.single .in-section {
        width: 100%;
        max-width: 768px;
    }
}


@media screen and (max-width: 640px) {
}