#organisations .title .container:before,
#organisations .title .container:after {
    position: absolute;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%;
    content: "";
    z-index: 0;
}

#organisations {
    background-color: var(--light-yellow);
}

#organisations .title .container {
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    background: none;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    font-family: TsukushiBRoundGothic, sans-serif;
    font-weight: bold;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    text-align: center;
}

#organisations .title .container:before {
    background-image: url(../img/organisations/suns.png);
}

#organisations .title .container:after {
    background-image: url(../img/organisations/survey_man.png);
}

#organisations .title .container .text {
    position: relative;
    z-index: 2;
}

#organisations .container {
    -webkit-box-align: stretch;
        -ms-flex-align: stretch;
            align-items: stretch;
    background-color: white;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

#organisations .additional {
    font-size: 16px;;
}

#organisations .left {
    -webkit-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
}

#organisations .map {
    -ms-flex-negative: 0;
        flex-shrink: 0;
}

#organisations .map img {
    height: 90%;
    width: auto;
}

#organisations .toggle {
    position: absolute;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    border-style: solid;
    border-radius: 1000px;
    cursor: pointer;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    font-family: TsukushiBRoundGothic, sans-serif;
    font-weight: bold;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-transition: background-color .2s, color .2s;
    -o-transition: background-color .2s, color .2s;
    transition: background-color .2s, color .2s;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    z-index: 2;
}

#organisations .toggle:after {
    background-position: center;
    background-repeat: no-repeat;
    content: "";
    display: block;
}

/*
 * 中部
 */
#organisations .toggle[for="chubu_toggle"] {
    top: 71%;
    left: 48%;
    border-color: #54b72f;
    color: #54b72f;
}

#organisations .toggle[for="chubu_toggle"]:after {
    background-image: url(../img/organisations/plus_chubu.svg);
}

#chubu_toggle:checked ~ #organisations .toggle[for="chubu_toggle"] {
    background-color: #54b72f;
    color: white;
}

#chubu_toggle:checked ~ #organisations .list .area_name:before {
    content: "中部エリア";
}

#chubu_toggle:checked ~ #organisations .list .area_name:after {
    background-color: #54b72f;
}

/*
 * 中国
 */
#organisations .toggle[for="chugoku_toggle"] {
    top: 58%;
    left: -2%;
    border-color: #dfba4c;
    color: #dfba4c;
}

#organisations .toggle[for="chugoku_toggle"]:after {
    background-image: url(../img/organisations/plus_chugoku.svg);
}

#chugoku_toggle:checked ~ #organisations .toggle[for="chugoku_toggle"] {
    background-color: #dfba4c;
    color: white;
}

#chugoku_toggle:checked ~ #organisations .list .area_name:before {
    content: "中国エリア";
}

#chugoku_toggle:checked ~ #organisations .list .area_name:after {
    background-color: #dfba4c;
}

/*
 * 北海道
 */
#organisations .toggle[for="hokkaido_toggle"] {
    top: 5%;
    left: 42%;
    border-color: #0070cd;
    color: #0070cd;
}

#organisations .toggle[for="hokkaido_toggle"]:after {
    background-image: url(../img/organisations/plus_hokkaido.svg);
}

#hokkaido_toggle:checked ~ #organisations .toggle[for="hokkaido_toggle"] {
    background-color: #0070cd;
    color: white;
}

#hokkaido_toggle:checked ~ #organisations .list .area_name:before {
    content: "北海道エリア";
}

#hokkaido_toggle:checked ~ #organisations .list .area_name:after {
    background-color: #0070cd;
}

/*
 * 近畿
 */
#organisations .toggle[for="kansai_toggle"] {
    top: 50%;
    left: 19%;
    border-color: #f18900;
    color: #f18900;
}

#organisations .toggle[for="kansai_toggle"]:after {
    background-image: url(../img/organisations/plus_kansai.svg);
}

#kansai_toggle:checked ~ #organisations .toggle[for="kansai_toggle"] {
    background-color: #f18900;
    color: white;
}

#kansai_toggle:checked ~ #organisations .list .area_name:before {
    content: "近畿エリア";
}

#kansai_toggle:checked ~ #organisations .list .area_name:after {
    background-color: #f18900;
}

/*
 * 関東
 */
#organisations .toggle[for="kanto_toggle"] {
    top: 58%;
    left: 70%;
    border-color: #23c2ac;
    color: #23c2ac;
}

#organisations .toggle[for="kanto_toggle"]:after {
    background-image: url(../img/organisations/plus_kanto.svg);
}

#kanto_toggle:checked ~ #organisations .toggle[for="kanto_toggle"] {
    background-color: #23c2ac;
    color: white;
}

#kanto_toggle:checked ~ #organisations .list .area_name:before {
    content: "関東エリア";
}

#kanto_toggle:checked ~ #organisations .list .area_name:after {
    background-color: #23c2ac;
}

/*
 * 九州
 */
#organisations .toggle[for="kyushu_toggle"] {
    top: 89%;
    left: 3%;
    border-color: #ec7088;
    color: #ec7088;
}

#kyushu_toggle:checked ~ #organisations .toggle[for="kyushu_toggle"] {
    background-color: #ec7088;
    color: white;
}

#organisations .toggle[for="kyushu_toggle"]:after {
    background-image: url(../img/organisations/plus_kyushu.svg);
}

#kyushu_toggle:checked ~ #organisations .list .area_name:before {
    content: "九州エリア";
}

#kyushu_toggle:checked ~ #organisations .list .area_name:after {
    background-color: #ec7088;
}

/*
 * 四国
 */
#organisations .toggle[for="shikoku_toggle"] {
    top: 80%;
    left: 30%;
    border-color: #f199ad;
    color: #f199ad;
}

#organisations .toggle[for="shikoku_toggle"]:after {
    background-image: url(../img/organisations/plus_shikoku.svg);
}

#shikoku_toggle:checked ~ #organisations .toggle[for="shikoku_toggle"] {
    background-color: #f199ad;
    color: white;
}

#shikoku_toggle:checked ~ #organisations .list .area_name:before {
    content: "四国エリア";
}

#shikoku_toggle:checked ~ #organisations .list .area_name:after {
    background-color: #f199ad;
}

/*
 * 東北
 */
#organisations .toggle[for="tohoku_toggle"] {
    top: 38%;
    left: 74%;
    border-color: #6f9ed4;
    color: #6f9ed4;
}

#organisations .toggle[for="tohoku_toggle"]:after {
    background-image: url(../img/organisations/plus_tohoku.svg);
}

#tohoku_toggle:checked ~ #organisations .toggle[for="tohoku_toggle"] {
    background-color: #6f9ed4;
    color: white;
}

#tohoku_toggle:checked ~ #organisations .list .area_name:before {
    content: "東北エリア";
}

#tohoku_toggle:checked ~ #organisations .list .area_name:after {
    background-color: #6f9ed4;
}

#chubu_toggle:checked ~ #organisations .toggle[for="chubu_toggle"]:after,
#chugoku_toggle:checked ~ #organisations .toggle[for="chugoku_toggle"]:after,
#hokkaido_toggle:checked ~ #organisations .toggle[for="hokkaido_toggle"]:after,
#kansai_toggle:checked ~ #organisations .toggle[for="kansai_toggle"]:after,
#kanto_toggle:checked ~ #organisations .toggle[for="kanto_toggle"]:after,
#kyushu_toggle:checked ~ #organisations .toggle[for="kyushu_toggle"]:after,
#shikoku_toggle:checked ~ #organisations .toggle[for="shikoku_toggle"]:after,
#tohoku_toggle:checked ~ #organisations .toggle[for="tohoku_toggle"]:after {
    background-image: url(../img/organisations/minus_white.svg);
}

#organisations .list .area_name {
    font-family: TsukushiBRoundGothic, sans-serif;
    font-weight: bold;
}

#organisations .list .area_name:before {
    content: "35か所の「体験の機会の場」";
}

#organisations .list .area_name:after {
    background-color: var(--yellow);
    border-radius: 1000px;
    content: "";
    display: block;
    -webkit-transition: background-color .2s;
    -o-transition: background-color .2s;
    transition: background-color .2s;
    width: 100%;
}

#organisations .list .blocks {
    overflow-y: auto;
}

#organisations .list .block {
    font-family: TsukushiBRoundGothic, sans-serif;
    margin-bottom: 16px;
}

#organisations .list .block .head {
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

#organisations .list .block hr {
    background-color: #333;
    border: none;
    height: 1px;
}

#organisations .list .block .head .img {
    overflow: hidden;
}

#organisations .list .block hr,
#organisations .list .block .head h4,
#organisations .list .block .head p {
    margin: 0;
}

#organisations .list .block .head h4 {
    font-weight: bold;
}

#organisations .list .block .row {
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

#organisations .list .block .row {
    border-bottom: 1px solid #d5d5d5;
}

input[id$="_toggle"]:checked ~ #organisations .list .all,
body:not(.organisation_filtered) #organisations .list .region {
    display: none;
}

input[id$="_toggle"]:checked ~ #organisations .list .block .row:last-child {
    border-color: #23c2ac;
}

#organisations .list .row .label {
    -ms-flex-negative: 0;
        flex-shrink: 0;
    font-weight: 600;
}

#organisations .list .row a {
    color: #005c84;
    word-break: break-all;
}

#organisations .list .row a:hover {
    text-decoration: underline;
}

#chubu_toggle:checked ~ #organisations .block:not(.chubu),
#chugoku_toggle:checked ~ #organisations .block:not(.chugoku),
#hokkaido_toggle:checked ~ #organisations .block:not(.hokkaido),
#kansai_toggle:checked ~ #organisations .block:not(.kansai),
#kanto_toggle:checked ~ #organisations .block:not(.kanto),
#kyushu_toggle:checked ~ #organisations .block:not(.kyushu),
#shikoku_toggle:checked ~ #organisations .block:not(.shikoku),
#tohoku_toggle:checked ~ #organisations .block:not(.tohoku) {
    display: none;
}


@media (min-width: 1440px) {
    #organisations .left,
    #organisations .map {
        height: 730px;
    }

    #organisations {
        padding-left: 55px;
        padding-right: 55px;
        padding-bottom: 63px;
    }

    #organisations .title .container {
        font-size: 30px;
        height: 196px;
    }

    #organisations .title .container:before {
        top: -10px;
        left: 20px;
        height: 210px;
        width: 286px;
    }

    #organisations .title .container:after {
        top: 25px;
        right: 105px;
        height: 145px;
        width: 79px;
    }

    #organisations .title .big {
        font-size: 40px;
    }

    #organisations .container {
        border-radius: 30px;
        padding: 45px 30px ;
    }

    #organisations .left {
        margin-right: 40px;
    }

    #organisations .map {
        width: 710px;
    }

    #organisations .toggle {
        border-width: 4px;
        font-size: 28px;
        height: 60px;
        width: 170px;
    }

    #organisations .toggle:after {
        background-size: 24px 24px;
        height: 24px;
        width: 24px;
        margin-left: 10px;
    }

    #organisations .list .area_name {
        height: 73px;
        line-height: 48px;
    }

    #organisations .list .area_name:before {
        font-size: 36px;
    }

    #organisations .list .area_name:after {
        height: 4px;
    }

    #organisations .list .blocks {
        height: calc(100% - 73px);
        padding-right: 24px;
    }

    #organisations .list .block {
        margin-bottom: 16px;
    }

    #organisations .list .block .head .liner {
        padding-top: 16px;
        padding-bottom: 16px;
    }

    #organisations .list .block .head .img {
        border-radius: 10px;
        margin-right: 12px;
        width: 118px;
    }

    #organisations .list .block .head h4,
    #organisations .list .block .head p {
        font-size: 18px;
        line-height: 24px;
    }

    #organisations .list .block .head h4 .num {
        font-size: 16px;
        margin-right: 3px;
    }

    #organisations .list .block .row {
        padding-top: 15px;
        padding-bottom: 15px;
    }

    #organisations .list .row .label {
        width: 120px;
    }
}

@media (max-width: 1440px) and (min-width: 751px) {
    #organisations .left,
    #organisations .map {
        height: calc(100vw * 730 / 1440);
    }

    #organisations {
        padding-left: calc(100vw * 55 / 1440);
        padding-right: calc(100vw * 55 / 1440);
        padding-bottom: calc(100vw * 63 / 1440);
    }

    #organisations .title .container {
        font-size: calc(100vw * 30 / 1440);
        height: calc(100vw * 196 / 1440);
    }

    #organisations .title .container:before {
        top: calc(100vw * -10 / 1440);
        left: calc(100vw * 20 / 1440);
        height: calc(100vw * 210 / 1440);
        width: calc(100vw * 286 / 1440);
    }

    #organisations .title .container:after {
        top: calc(100vw * 25 / 1440);
        right: calc(100vw * 105 / 1440);
        height: calc(100vw * 145 / 1440);
        width: calc(100vw * 79 / 1440);
    }

    #organisations .title .big {
        font-size: calc(100vw * 40 / 1440);
    }

    #organisations .container {
        border-radius: calc(100vw * 30 / 1440);
        padding: calc(100vw * 45 / 1440) calc(100vw * 30 / 1440);
    }

    #organisations .left {
        margin-right: calc(100vw * 40 / 1440);
    }

    #organisations .map {
        width: calc(100vw * 710 / 1440);
    }

    #organisations .toggle {
        border-width: calc(100vw * 4 / 1440);
        font-size: calc(100vw * 28 / 1440);
        height: calc(100vw * 60 / 1440);
        width: calc(100vw * 170 / 1440);
    }

    #organisations .toggle:after {
        background-size: calc(100vw * 24 / 1440) calc(100vw * 24 / 1440);
        height: calc(100vw * 24 / 1440);
        width: calc(100vw * 24 / 1440);
        margin-left: calc(100vw * 10 / 1440);
    }

    #organisations .list .area_name {
        height: calc(100vw * 73 / 1440);
        line-height: calc(100vw * 48 / 1440);
    }

    #organisations .list .area_name:before {
        font-size: calc(100vw * 36 / 1440);
    }

    #organisations .list .area_name:after {
        height: calc(100vw * 4 / 1440);
    }

    #organisations .list .blocks {
        height: calc(100% - (100vw * 73 / 1440));
        padding-right: calc(100vw * 24 / 1440);
    }

    #organisations .list .block {
        margin-bottom: calc(100vw * 16 / 1440);
    }

    #organisations .list .block .head .liner {
        padding-top: calc(100vw * 16 / 1440);
        padding-bottom: calc(100vw * 16 / 1440);
    }

    #organisations .list .block .head .img {
        border-radius: calc(100vw * 10 / 1440);
        margin-right: calc(100vw * 12 / 1440);
        width: calc(100vw * 118 / 1440);
    }

    #organisations .list .block .head h4,
    #organisations .list .block .head p {
        font-size: calc(100vw * 18 / 1440);
        line-height: calc(100vw * 24 / 1440);
    }

    #organisations .list .block .head h4 .num {
        font-size: calc(100vw * 16 / 1440);
        margin-right: calc(100vw * 3 / 1440);
    }

    #organisations .list .block .row {
        padding-top: calc(100vw * 15 / 1440);
        padding-bottom: calc(100vw * 15 / 1440);
    }

    #organisations .list .row .label {
        width: calc(100vw * 120 / 1440);
    }
}

@media (min-width: 751px) {
}

@media (max-width: 750px) {
    #organisations > .container {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: reverse;
            -ms-flex-direction: column-reverse;
                flex-direction: column-reverse;
    }

    #organisations .map,
    #organisations .left {
        width: 100%;
    }

    #organisations {
        padding-left: calc(100vw * 20 / 750);
        padding-right: calc(100vw * 20 / 750);
        padding-bottom: calc(100vw * 25 / 750);
    }

    #organisations .title .container {
        font-size: calc(100vw * 28 / 750);
        height: calc(100vw * 196 / 750);
        line-height: calc(100vw * 40 / 750);
    }

    #organisations .title .container:before {
        top: calc(100vw * 10 / 750);
        left: calc(100vw * -20 / 750);
        height: calc(100vw * 80 / 750);
        width: calc(100vw * 140 / 750);
    }

    #organisations .title .container:after {
        top: calc(100vw * 30 / 750);
        right: calc(100vw * 5 / 750);
        height: calc(100vw * 135 / 750);
        width: calc(100vw * 70 / 750);
    }

    #organisations .title .big {
        font-size: calc(100vw * 40 / 750);
    }

    #organisations .container {
        border-radius: calc(100vw * 30 / 750);
        padding: calc(100vw * 25 / 750) calc(100vw * 20 / 750);
    }

    #organisations .left {
        margin-top: calc(100vw * 40 / 750);
    }

    #organisations .map {
        height: calc(100vw * 680 / 750);
    }

    #organisations .toggle {
        border-width: calc(100vw * 3 / 750);
        font-size: calc(100vw * 26 / 750);
        height: calc(100vw * 48 / 750);
        width: calc(100vw * 165 / 750);
    }

    #organisations .toggle:after {
        background-size: calc(100vw * 18 / 750) calc(100vw * 18 / 750);
        height: calc(100vw * 18 / 750);
        width: calc(100vw * 18 / 750);
        margin-left: calc(100vw * 10 / 750);
    }

    #organisations .list .area_name {
        height: calc(100vw * 73 / 750);
        line-height: calc(100vw * 48 / 750);
    }

    #organisations .list .area_name:before {
        font-size: calc(100vw * 36 / 750);
    }

    #organisations .list .area_name:after {
        height: calc(100vw * 4 / 750);
    }

    #organisations .list .blocks {
        max-height: calc(100vw * 600 / 750);
    }

    #organisations .list .block {
        margin-bottom: calc(100vw * 16 / 750);
    }

    #organisations .list .block .head .liner {
        padding-top: calc(100vw * 16 / 750);
        padding-bottom: calc(100vw * 16 / 750);
    }

    #organisations .list .block .head .img {
        border-radius: calc(100vw * 10 / 750);
        margin-right: calc(100vw * 12 / 750);
        width: calc(100vw * 118 / 750);
    }

    #organisations .list .block .head h4,
    #organisations .list .block .head p {
        font-size: calc(100vw * 28 / 750);
        line-height: calc(100vw * 40 / 750);
    }

    #organisations .list .block .head h4 .num {
        font-size: calc(100vw * 28 / 750);
        margin-right: calc(100vw * 5 / 750);
    }

    #organisations .list .block .row {
        padding-top: calc(100vw * 15 / 750);
        padding-bottom: calc(100vw * 15 / 750);
    }

    #organisations .list .row .label {
        width: calc(100vw * 160 / 750);
    }
}