@charset "utf-8";

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

    /*------------------------------------------------------------------------------------------
    *
    *
        car_common_sp.css
            max-width : 768px
    *
    *
    ------------------------------------------------------------------------------------------ */
    #gnav {
        position: relative;
        z-index: 1;
        text-align: center;
        background-color: #000;
    }

    #gnav h1 {
        padding: 25px 0;
    }

    #gnav h1 img {
        max-width: 85%;
        height: auto;
    }

    #subnav_list {
        display: none;
    }

    /* ------------------------------------------------------------------------------------------ */


    /* ------------------------------------------------------------------------------------------
    *
        .section
    *
    ------------------------------------------------------------------------------------------ */

    .section {
        margin: 0;
        padding: 50px 0 0;
        color: #fff;
        box-sizing: border-box;
        overflow: hidden;
        background-color: #000;
    }

    .section br {
        display: none;
    }

    .section h3 {
        margin: 0 0 25px 0;
        padding: 0 0 10px;
        font-size: 38px;
        line-height: 0;
        white-space: nowrap;
        border-bottom: 1px solid #f00;
    }

    .section h3 img {
        width: 100%;
    }


    /* ------------------------------------------------------------------------------------------
    *
        element
    *
    ------------------------------------------------------------------------------------------ */
    .btn_pagetop {
        width: 37px;
        height: 37px;
        background-image: url(../image_common/btn_pagetop.png);
        background-repeat: no-repeat;
        background-size: 37px;
        opacity: 0;
        visibility: hidden;
        position: fixed;
        bottom: 10px;
        right: 10px;
        cursor: pointer;
        transition: opacity .1s ease;
        z-index: 10;
    }

    .btn_pagetop:hover {
        opacity: .7 !important;
        z-index: 65535;
    }


    /* ------------------------------------------------------------------------------------------
    *
        #manual_info
    *
    ------------------------------------------------------------------------------------------ */
    #manual_info .column_wrap {
        position: relative;
        overflow: hidden;
        border-bottom: 1px solid #5e6267;
    }

    #manual_info h4 {
        height: 50px;
        padding: 18px 20px;
        box-sizing: border-box;
        display: block;
        vertical-align: top;
        position: relative;
        cursor: pointer;
    }

    #manual_info a::after,
    #manual_info h4::after {
        content: '';
        width: 7px;
        height: 50px;
        display: block;
        background-image: url(../image_common/parts_ico_btm_nav_arrow.png);
        background-repeat: no-repeat;
        background-position: center;
        background-size: 7px;
        position: absolute;
        top: 0;
        right: 24px;
        transition: all .1s ease;
    }

    #manual_info .has_child::after {
        width: 11px;
        background-image: url(../image_common/parts_ico_btm_nav_plus.png);
        background-size: 11px;
        right: 22px;
    }

    #manual_info .has_child.on::after {
        background-image: url(../image_common/parts_ico_btm_nav_minus.png);
        transform: rotate(-180deg);
    }

    #manual_info li a {
        height: 40px;
        padding: 12px 20px 12px 45px;
        font-size: 12px;
        font-family: var(--font-light);
        color: #ccc;
        box-sizing: border-box;
        display: block;
        vertical-align: middle;
        position: relative;
    }

    #manual_info li a::after {
        height: 40px;
    }


}