@charset "UTF-8";

#trans_button_area, #list_button_area {
    text-align: center;
}

.bt_trans {
    display: block;
    background: url(../../img/yellow_off.gif) no-repeat;
    color: black !important;
    text-decoration: none;
    margin-bottom: 10px;
}

.bt_list_trans {
    display: block;
    background: url(../../img/yellow_off.gif) no-repeat;
    color: black !important;
    text-decoration: none;
    float: left;
    margin: 10px;
}

#facility_list th {
	border: solid 1px #000000 ;
    background-color: #aecd93;
}

@media screen and (min-width:781px) {
    /* PC */
    #area_map {
        width: 100%;
        height: 800px;
    }

    .bt_trans {
        font-size: small;
        width: 150px;
        height: 40px;
        background-size: 100% 100%;
        line-height: 40px;
    }

    .bt_list_trans {
        font-size: medium;
        font-weight: bold;
        width: 200px;
        height: 64px;
        background-size: 100% 100%;
        line-height: 64px;
    }

    #select_disp_marker_area {
        background-color: white;
        border: solid 1px #000000 ;
    }

    #select_disp_marker_guide {
        font-size: medium;
        margin: 10px;
    }

    #disp_marker_checkbox_area {
        display: none;
    }

    .disp_marker_img {
        width: 16px;
        margin: 0 4px;
        vertical-align: text-top;
    }

    .lb_checkbox {
        display: block;
        font-size: medium;
        margin: 5px;
    }
}

@media screen and (max-width:780px) {
    /* モバイル */
    #area_map {
        width: 100%;
        height: 500px;
    }

    .bt_trans, .bt_list_trans {
        font-size: small;
        width: 120px;
        height: 50px;
        background-size: 100% 100%;
        line-height: 50px;
    }

    .message {
        font-size: small;
    }

    #select_disp_marker_area {
        display: none;
    }

    .checkbox_button_line {
        /*
          ビューポート100%(100vw)を4分割(横並びボタン数4のためボタン1つあたりの幅)して
          元画像の幅(160)で割って伸縮率を求めそれを元画像の高さ(80)に掛けて描画領域高さを求める
        */
        height: calc(((100vw / 4) / 160) * 80);
    }

    .checkbox_button {
        cursor: pointer;
    }

    .check-text {
        display: flex;
    }

    .checkbox_button {
        display: inline-block;
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        content: "";
        height: 100%;
        position: relative;
        width: 25%;
    }

    #checkbox_button_1_1 {
        background-image: url("../img/check_button_1_1_off.png");
    }

    #checkbox_button_1_1.checked {
        background-image: url("../img/check_button_1_1_on.png");
    }

    #checkbox_button_1_3 {
        background-image: url("../img/check_button_1_3_off.png");
    }

    #checkbox_button_1_3.checked {
        background-image: url("../img/check_button_1_3_on.png");
    }

    #checkbox_button_1_4 {
        background-image: url("../img/check_button_1_4_off.png");
    }

    #checkbox_button_1_4.checked {
        background-image: url("../img/check_button_1_4_on.png");
    }

    #checkbox_button_1_5 {
        background-image: url("../img/check_button_1_5_off.png");
    }

    #checkbox_button_1_5.checked {
        background-image: url("../img/check_button_1_5_on.png");
    }

    #checkbox_button_2_2 {
        background-image: url("../img/check_button_2_2_off.png");
    }

    #checkbox_button_2_2.checked {
        background-image: url("../img/check_button_2_2_on.png");
    }

    #checkbox_button_2_3 {
        background-image: url("../img/check_button_2_3_off.png");
    }

    #checkbox_button_2_3.checked {
        background-image: url("../img/check_button_2_3_on.png");
    }

    #checkbox_button_2_4 {
        background-image: url("../img/check_button_2_4_off.png");
    }

    #checkbox_button_2_4.checked {
        background-image: url("../img/check_button_2_4_on.png");
    }

    #checkbox_button_2_5 {
        background-image: url("../img/check_button_2_5_off.png");
    }

    #checkbox_button_2_5.checked {
        background-image: url("../img/check_button_2_5_on.png");
    }

    #checkbox_button_2_6 {
        background-image: url("../img/check_button_2_6_off.png");
    }

    #checkbox_button_2_6.checked {
        background-image: url("../img/check_button_2_6_on.png");
    }

    .checkbox_dummy {
        display: inline-block;
        background-image: url("../img/check_button_dummy.gif");
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        content: "";
        height: 100%;
        position: relative;
        width: 25%;
    }

    table#facility_list td {
        word-break:break-all ;
    }
}