.cv_button .reservation {
    background: #ed0303;
}

#mechanical .mecha_item input {
    display: none;
}

@media screen and (min-width: 768px) {
    .SPonly {
        display: none !important;
    }

    #mechanical {
        width: 100%;
        text-align: center;
        position: relative;
        font-size: 16px;
    }

    #mechanical * {
        vertical-align: middle;
    }

    #mechanical .mecha_item {
        background: #fff;
        text-align: left;
        font-weight: 100 !important;
        padding-top: 20px;
    }

    #mechanical th {
        background: #eee;
        font-weight: 100 !important;
        height: 30px;
    }

    #mechanical td {
        padding: 16px;
        border: solid 1px #eee;
    }

    #mechanical .mecha_item2 th > span {
        display: inline-block;
        background: #999;
        color: #fff;
        margin-left: 2px;
        width: 16px;
        height: 16px;
        border-radius: 8px;
        font-size: 12px;
        font-weight: bold;
        line-height: 16px;
        cursor: pointer;
        transition: 0.2s;
        position: relative;
    }

    #mechanical .mecha_item2 th > span:after {
        position: absolute;
        display: block;
        content: "";
        width: 0;
        height: 0;
        left: 0;
        bottom: 100%;
        transition: 0.1s;
    }

    #mechanical .mecha_item2 th > span:hover:after {
        position: absolute;
        display: block;
        content: "△：修理おすすめ　×：要修理　\A※△はすぐに修理する必要はありません。";
        white-space: pre;
        width: 240px;
        height: auto;
        padding: 10px 4px;
        left: 10%;
        bottom: 100%;
        background: #fff;
        color: #000;
        font-weight: 100;
        text-align: left;
        border-radius: 5px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    }

    #mechanical .mecha_item3 td:nth-of-type(1) {
        width: 30%;
    }

    #mechanical .mecha_item3 td:nth-of-type(2) {
        width: 20%;
    }

    #mechanical .mecha_item3 td:nth-of-type(3) {
        width: 30%;
    }

    #mechanical .mecha_item3 td:nth-of-type(4) {
        width: 20%;
    }

    .hidden_box label {
        display: block;
        height: 40px;
        text-align: left;
        line-height: 40px;
    }

    /*繝懊ち繝ｳ繝帙ヰ繝ｼ譎?*/
    .hidden_box label:hover {
        opacity: 0.9;
    }

    /*繝√ぉ繝?け縺ｯ隕九∴縺ｪ縺上☆繧?*/
    .hidden_box input {
        display: none;
    }

    .mecha_item_comment {
        text-align: left;
    }

    #glossary {
        position: absolute;
        top: 0;
        right: 0;
        width: 100px;
        height: 30px;
        text-decoration: underline;
    }

    .reservation {
        display: block;
        width: 100%;
    }

    .cv_bn-area {
        width: 100%;
        display: table;
        height: 100px;
    }

    .cv_bn-area > a {
        display: table-cell;
        table-layout: fixed;
        width: 50%;
        height: 100px;
        color: #fff;
        background: #999;
    }

    .cv_bn-area {
        margin-bottom: 2%;
    }

    .cv_bn-area > a:last-child {
        background: #666;
    }
    .modal_line_contact{display: none;}
}

@media screen and (max-width: 769px) {
    .PConly {
        display: none;
    }

    #glossary {
        text-decoration: underline;
        text-align: right;
        width: 100%;
        height: 20px;
        margin-top: -20px;
    }

    #mechanical table {
        table-layout: fixed;
        width: 100%;
        display: block;
    }

    #mechanical tbody, #mechanical tr, #mechanical td {
        display: block;
    }

    #mechanical * {
        box-sizing: border-box;
    }

    #mechanical .mecha_item {
        display: block;
        font-size: 16px;
        margin-top: 20px;
        border: none;
    }

    #mechanical tr * {
        display: inline-block;
        border: solid 1px #cccccc;
        font-size: 14px;
    }

    #mechanical .mecha_item2 * {
        display: none;
    }

    #mechanical .mecha_item3 {
        transition: 0.2s;
    }

    #mechanical .mecha_item3 td {
        box-sizing:border-box;
        padding:16px 0;
        text-align: center;
        position: relative;
    }

    #mechanical .mecha_item3 td:nth-of-type(1) {
        display: block;
        width: 100%;
        float: left;
        font-weight: bold;
        background: #eee;
        border-top: solid 1px #cccccc;
        border-bottom: none;
        margin-top: -1px;
    }

    #mechanical .mecha_item3 td:nth-of-type(2):before {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        content: "状態";
        width: 20%;
        height: 100%;
        float: left;
        background: #f4f4f4;
        border-bottom: none;
        border-right: solid 1px #cccccc;
        position: absolute;
        top: 0;
        left: 0;
    }
    #mechanical .mecha_item3 td:nth-of-type(2) {
        display: block;
        width: 100%;
        float: right;
        border-bottom: none;
        padding-left: 20%;
    }
    #mechanical .mecha_item3 td:nth-of-type(3):before {
        display: flex;
        flex-direction: column;
        justify-content: center;
        content: "内容";
        width: 20%;
        height: 100%;
        float: left;
        background: #f4f4f4;
        border-right: solid 1px #cccccc;
        position: absolute;
        top: 0;
        left: 0;
    }
    #mechanical .mecha_item3 td:nth-of-type(3) {
        display: block;
        width: 100%;
        float: left;
        border-bottom: none;
        padding-left: 20%;
    }
    #mechanical .mecha_item3 td:nth-of-type(4):before {
        display: flex;
        flex-direction: column;
        justify-content: center;
        content: "修理費用";
        width: 20%;
        height: 100%;
        float: left;
        background: #f4f4f4;
        border-right: solid 1px #cccccc;
        border-bottom: solid 1px #cccccc;
        position: absolute;
        top: 0;
        left: 0;
    }
    #mechanical table{
        margin-bottom:10px;
        border-bottom: solid 1px #cccccc;
        border-spacing:0;
        border-collapse:collapse ;
    }

    #mechanical .mecha_item3 td:nth-of-type(4) {
        display: block;
        width: 100%;
        float: left;
        border-bottom: solid 1px #cccccc;
        padding-left: 20%;
    }

    .mecha_item_comment {
        display: block;
        width: 100%;
        padding: 2%;
        line-height: 1.8em;
        font-size: 18px;
    }


    .hidden_box label {
        width: 100%;
        height: 40px;
        line-height: 40px;
        display: block;
        font-size: 16px;
        margin: 0;
        padding: 0 10px;
        cursor: pointer;
        transition: 0.2s;
        border-bottom: solid 1px #cccccc;
        position: relative;
    }

    .hidden_box label:hover {
        opacity: 0.9;
    }

    .hidden_box input {
        display: none;
    }

    .hidden_box table {
        height: 0;
        padding: 0;
        overflow: hidden;
        opacity: 0;
        transition: 0.8s;
        display: block !important;
    }

    .hidden_box .arrow {
        float: right;
        margin: -30px 10px 0 0;
        transition: 0.2s;
    }

    .hidden_box #label1:checked ~ #mecha_table1 {
        height: auto;
        opacity: 1;
    }

    .hidden_box #label2:checked ~ #mecha_table2 {
        height: auto;
        opacity: 1;
    }

    .hidden_box #label3:checked ~ #mecha_table3 {
        height: auto;
        opacity: 1;
    }

    .hidden_box #label4:checked ~ #mecha_table4 {
        height: auto;
        opacity: 1;
    }

    .hidden_box #label5:checked ~ #mecha_table5 {
        height: auto;
        opacity: 1;
    }

    .hidden_box #label6:checked ~ #mecha_table6 {
        height: auto;
        opacity: 1;
    }

    .hidden_box #label7:checked ~ #mecha_table7 {
        height: auto;
        opacity: 1;
    }

    .hidden_box #label8:checked ~ #mecha_table8 {
        height: auto;
        opacity: 1;
    }

    .hidden_box #label9:checked ~ #mecha_table9 {
        height: auto;
        opacity: 1;
    }

    .hidden_box #label10:checked ~ #mecha_table10 {
        height: auto;
        opacity: 1;
    }

    .hidden_box #label11:checked ~ #mecha_table11 {
        height: auto;
        opacity: 1;
    }

    .hidden_box #label1:checked ~ #arrow1 {
        transform: rotate(90deg)
    }

    .hidden_box #label2:checked ~ #arrow2 {
        transform: rotate(90deg)
    }

    .hidden_box #label3:checked ~ #arrow3 {
        transform: rotate(90deg)
    }

    .hidden_box #label4:checked ~ #arrow4 {
        transform: rotate(90deg)
    }

    .hidden_box #label5:checked ~ #arrow5 {
        transform: rotate(90deg)
    }

    .hidden_box #label6:checked ~ #arrow6 {
        transform: rotate(90deg)
    }

    .hidden_box #label7:checked ~ #arrow7 {
        transform: rotate(90deg)
    }

    .hidden_box #label8:checked ~ #arrow8 {
        transform: rotate(90deg)
    }

    .hidden_box #label9:checked ~ #arrow9 {
        transform: rotate(90deg)
    }

    .hidden_box #label10:checked ~ #arrow10 {
        transform: rotate(90deg)
    }

    .hidden_box #label11:checked ~ #arrow11 {
        transform: rotate(90deg)
    }

    .mecha_info {
        font-size: 14px;
        line-height: 1.8em;
        text-align: right;
    }

    .mecha_info span {
        font-size: 0.8em;
    }

    body {
        margin-bottom: 60px;
    }

    .car-detail .button {
        margin-bottom: 1% !important;
    }

    .cv_button * {
        box-sizing: border-box;
    }

    .cv_button {
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
        background: #fff;
        z-index: 99;
    }

    .cv_button .button {
        display: table !important;
        width: 100%;
    }

    .cv_button .button > a {
        display: table-cell !important;
        table-layout: fixed;
        width: 33%;
        vertical-align: middle;
        border: solid 1px #fff;
    }

    .cv_button .button .mail span {
        display: none !important;
    }

    .cv_button .cv_bn-area {
        display: none;
        width: 100%;
        height: auto;
    }


    .cv_bn-area > a {
        display: block;
        width: 100%;
        color: #fff;
        margin: 0 auto;
    }
    .modal_line_contact{
        display: none;
        position: fixed;
        top:0;left:0;
        background: rgba(0,0,0,0.8);
        width:100vw;
        height:100vh;
        z-index: 100;
    }
    .modal_line_body{
        position: fixed;
        top:50%;left:50%;
        background: #fff;
        width: 98%;
        padding:12px 6px 6px 6px;
        transform: translate(-50%,-50%);
        -webkit-transform: translate(-50%,-50%);
        -ms-transform: translate(-50%,-50%);
    }
    .modal_line_body >h3,
    .modal_line_body >p{
        margin: 10px 0;
        text-align: center;
    }
}