@charset "utf-8";
/* 
サイト固有の記述
*/

/* 全体（色系）*/
body {
    .header-nav li a,
    header.fixed .header-r-area .header-nav li a {
        color: #004163;
    }

    .non_thum_list li:after {
        right: 35px;
    }

    .tp_news .non_thum_list li:first-child {
        border-top: solid 1px #fff;
    }

    .non_thum_list li {
        padding: 30px 35px;
        border-bottom: solid 1px #ccc;
    }

    .dl_tbl01 dt .box,
    .dl_tbl01 dd .box {
        padding: 30px 20px;
    }

    .dl_tbl01 dt {
        width: 25%;
    }

    .dl_tbl01 dd {
        width: 75%;
    }

    .dl_tbl01 dt {
        border-bottom: solid 1px #ccc;
    }

    .non_thum_list li:first-child {
        border-top: solid 1px #ccc;
    }

    .flow_list li.flow_in_flex .imgbox {
        width: 200px;
    }

    .flow_list a.tel_link {
        display: inline-block;
        font-size: 36px;
        color: #004163;
        background-color: #fff;
        padding: 15px 40px;
        border-radius: 100px;
        margin-top: 20px;
        margin-bottom: 20px;
        border: solid 2px #004163;
    }

    &.company {
        .sec01 h2 {
            color: #004163;
        }
    }

    .mail_form dl {
        background-color: #ebebeb;
    }
}

/* パソコン以上*/
@media screen and (min-width: 1281px) {
    body {
        header .header-r-area {
            margin-right: 50px;
        }

        .header-nav li a,
        header.fixed .header-r-area .header-nav li a {
            border-left: none;
        }

        #main_visual .loop_text_area {
            bottom: 7%;
        }

        #main_visual .mv_flex .textarea {
            width: 50%;
        }

        #main_visual .mv_flex .slider_area {
            width: 50%;
        }

        .tp_sec01 .layout_b .imgbox {
            width: 60%;
        }

        .tp_sec01 {
            .layout_b .txtbox {
                margin-left: 60px;
            }
        }

        .tp_sec02 {
            p {
                width: 55%;
            }
        }

        .footerUpper_nav_area .box {
            width: 80%;
        }

        &.used-car-sales,
        &.road-service,
        &.maintenance,
        &.other-car-services {
            .layout_b .txtbox {
                margin-left: 80px;
            }

            .layout_a .txtbox {
                margin-right: 80px;
            }
        }

        main section .page_title_flex .sv_ttl {
            margin-left: 5%;
        }

        &.company {
            .sec01 .sub_images_ul.cul2 {
                gap: 20px 40px;
            }
        }
    }
}

/* モニター以上*/
@media screen and (min-width: 1860px) {
    body {
        main section .page_title_flex .sv_ttl {
            margin-left: 10%;
        }

        #main_visual .loop_text_area {
            bottom: 10%;
        }
    }
}

/* タブレット*/
@media screen and (max-width: 1024px) {
    body {
        .tp_sec02 {
            .page_link01.type01 {
                left: 0;
            }
        }

        .non_thum_list li {
            display: flex;
        }

        &.feature .sec01 .layout_a .imgbox, 
        &.feature .sec01 .layout_b .imgbox {
            margin: 0 auto;
            width: 50%;
        }

        
    }
}

/* 携帯*/
@media screen and (max-width: 767px) {
    body {
        .non_thum_list li {
            display: flex;
        }

        #main_visual .mv_flex .slider_area {
            height: 274px;
        }

        #main_visual {
            height: 80vh;
        }

        main section .page_title_flex .sv_ttl .eng_ttl {
            font-size: 20px;
        }

        .flow_list .tel_box {
            text-align: center;
        }

        .flow_list a.tel_link {
            font-size: 30px;
        }

        .category-list li {
            margin-right: 10px;
        }

        .dl_tbl01 dt {
        width: 28%;
    }

    .dl_tbl01 dd {
        width: 72%;
    }

    .non_thum_list li:after {
        right: 25px;
    }

    .non_thum_list li {
        padding: 25px;
    }

        
    }
}