@charset "utf-8";

main{width:1280px;margin: 30px auto 0;}
.tc{text-align:center;}
.cb{clear:both;}
.bold{font-weight:bold;}


h2{
    background-image: url(https://www.gtnet.co.jp/images/common/gtnet/h2tag_black02.png);
    background-repeat: no-repeat;
    background-position: 0px 8px;
    height: 37px;
    font-weight: bold;
    color: #FFFFFF;
    padding-left: 50px;
    background-color: #000000d6;
}


#top_pannel table{
    width:100%;
    border: 1px solid #ccc;
    border-collapse: collapse;
}
#top_pannel table tr th{
    font-size: 20px;
    text-align: left;
    padding: 15px;
    background: #cccccc4a;
}
#top_pannel table tr td{
    border: 1px solid #ccc;
    padding: 10px 15px;
}
#top_pannel table tr td p{
    float: left;
    margin: 0;
    width: 100px;
    line-height: 40px;
}
#top_pannel table tr td select{
    float: left;
    height:40px;
}


#main_table{margin:30px 0 50px;}
#main_table table{
    width: 100%;
    border: 1px solid #ccc;
    border-collapse: collapse;
}
#main_table .table_top_title{
    background: #ccc;
    font-size: 20px;
    font-weight: normal;
    text-align: left;
    padding: 7px 20px;
}
#main_table .table_top_title span{
    color:#1423eb;
    font-weight:bold;
}
#main_table .table_sub_title{
    text-align:center;
    background: #e7e7e7;
}
.table_sub_title td{
    border:1px solid #ccc;
    padding:10px;
}
.table_sub_title td a{color:#1423eb;}
#main_table .sub_contents td{
    text-align: center;
    padding: 10px;
    border: 1px solid #ccc;
    font-weight: bold;
}
#main_table .sub_contents th{
    border: 1px solid #ccc;
    padding: 15px;
    text-align: left;
    width: 520px;
}
#main_table .sub_contents th .img_area{
    width:200px;
    float:left;
    margin-right: 10px;
}
#main_table .sub_contents th .img_area img{width:100%;}
.option td{padding: 0 30px;}
.option td ul{
    margin:0;
    padding:0;
    list-style:none;
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    column-gap:10px;
    row-gap:6px;
}
#main_table .sub_contents th .txt_area .maker_name{
    margin: 0 0 5px;
    font-weight: normal;
}
#main_table .sub_contents th .txt_area .car_name{
    color: #1423eb;
    font-weight: 500;
    text-decoration: underline!important;
}
#main_table .sub_contents th .txt_area .detail_name{
    margin: 6px 0 10px;
    font-weight: normal;
}
#main_table .sub_contents th .txt_area .detail_name span{margin:0 10px;}
#main_table .sub_contents th .txt_area .wl_btn{
    border: 1px solid #000;
    border-radius: 6px;
    display: block;
    float: left;
    text-align: center;
    padding: 10px 33px;
    margin-right: 18px;
    color: #fff;
    background: #3471ff;
    position: relative;
    top: 80px;
    font-weight: bold;
    font-size: 15px;
}
#main_table .sub_contents th .txt_area .if_btn{
    border: 1px solid #ccc;
    border-radius: 6px;
    display: block;
    float: left;
    text-align: center;
    padding: 10px 25px;
    color: #fff;
    background: #e9ac3b;
    position: relative;
    bottom: -5px;
    font-weight: bold;
    font-size: 15px;
}
.tate .reset_btn_top{
    background: #abaaaa;
    color: #fff;
    padding: 10px 30px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    border: 1px solid #FFF;
}
.tate .search_btn{ 
    font-size: 16px; 
    padding: 10px 50px; 
    font-weight: bold; 
    background: #c52626; 
    color: #fff;  
    cursor: pointer;
    border: 1px solid #FFF;
}
.tate span{
    background:red;
}
.tate span #ad_arrow {
  display: inline-block;
  width: 73.5px;
  height: 100px;
  background: #000000;
  clip-path: polygon(0 63.2%, 31% 63.2%, 31% 0, 69% 0, 69% 63.2%, 100% 63.2%, 50% 100%);
}



.slider-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.slider {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    background: #000;
}
.slide {
    width: 100%;
    height: 100%;
    display: none;
    object-fit: cover;
}
.slide.active {display: block;}
.controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 36px;
    margin-top: 15px;
}
.arrow {
    background: #cccccc85;
    color: #000;
    border: 1px solid #ccc;
    font-size: 12px;
    font-weight: bold;
    padding: 6px 12px;
    cursor: pointer;
    border-radius: 50%;
    transition: background 0.3s;
}
.arrow:hover {background: #ccc;}
.counter {
    font-size: 16px;
    color: #333;
}



.parts_search_panel {
    background: #cccccc5c;
    overflow: auto;
}
.parts_search_panel ul{
    display: flex;
    flex-wrap: wrap;
    align-content: unset;
    padding: 5px 20px 0;
}
.parts_search_panel ul li {
    width: 284px;
    margin-right: 13px;
    margin-bottom: 20px;
    background: #797878;
    padding: 0px 8px 10px;
}
.parts_search_panel ul li:nth-child(4n){
    margin-right:0;
}
.parts_search_panel ul li p{
    margin: 8px 0;
    font-weight: bold;
    color: #fff;
}
.parts_search_panel ul li select{
    width:100%;
    height:25px;
}
.btn_area{
    text-align: center;
    margin: 0 0 20px;
}
.parts_btn{
    background: #c52626;
    border: 1px solid #ccc;
    color: #fff;
    font-weight: bold;
    font-size: 16px;
    padding: 8px 40px;
    margin-right: 20px;
    cursor: pointer;
}
.reset_btn{
    background: orange;
    border: 1px solid #ccc;
    color: #fff;
    font-weight: bold;
    font-size: 16px;
    padding: 8px 20px;
    cursor: pointer;
}


.mark{
    width: 980px;
    margin-left: 300px;
}
.mark ul {
    display: flex;
    justify-content: space-between;
    margin: 50px 0 0;
}
.mark img { width: 120px;}
.parts_merch ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 70px 0 120px;
}
.parts_merch img {width: 240px;}
.parts_merch p {font-size: 18px;}

.tate{
    text-align:center;
}    

.pagenation {
  display: flex;
  justify-content: center;
  margin: 15px auto;
}
.pagenation a.current, .pagenation a:hover {
  background: #f3771f;
  color: #fff;
}
.pagenation a {
  border: solid 1px #f3771f;
  border-radius: 4px;
  width: 2.5em;
  line-height: 2.375em;
  text-align: center;
  font-weight: bold;
  margin: 0 .625em;
  transition: .3s;
  color:#000;
}

.search-form {
  width: 80%;
  height: 40px;
  padding: 5px 15px 5px 5px;
  border: 1px solid #bbb;
  box-sizing: border-box;
  font-size: 12px;
  outline: none;
}

/**********************************************************
                        タブレット
***********************************************************/
@media screen and (max-width: 980px) {

    main{width:90%; margin:0 5%;}

   #top_pannel {margin: 15px 0 0 0;} 
   #top_pannel table tr td {width:100%;display:block;padding: 10px 0px; height: 20px;}
   #top_pannel table tr td select { width: 65%;}
   .tate{width: 100%; display: block;}
   #top_pannel table .tate  td {height: 44px;}
    #main_table{overflow-x: scroll;}
    #main_table .sub_contents th .txt_area .wl_btn {top:15px; margin-left: 35px; margin-right: 0;}
    #main_table .sub_contents th .txt_area .if_btn {top:30px; margin-left: 35px; margin-right: 0;}
    #main_table .sub_contents th .txt_area .maker_name {margin:24px 0 5px;}

    .parts_search_panel ul li {width:100%; margin-right:0;}
    .parts_search_panel ul li p {font-size:14px;}

    .mark {width: 100%; margin-left: 0;}
    .mark img {width: 70px;}
    .mark ul {justify-content: flex-start;  flex-wrap: wrap;}
    .mark ul li{width:25%; margin-bottom:2.5%;}
    .mark ul li img{width:90%;}

    .parts_merch li{width:48%;}
    .parts_merch img {width:100%;}
    .parts_merch p {font-size: 15px;}
    #main_table .sub_contents th .txt_area .if_btn{
        display: none;
    }

    .search-form {
    width: 100%;
    }

}





/**********************************************************
                        Mobile Main Table
***********************************************************/
/**********************************************************
                        Mobile Main Table
***********************************************************/
/**********************************************************
                        Mobile Main Table
***********************************************************/
@media screen and (max-width: 768px) {
    

    main{width:100%; margin:0; padding:0 10px; box-sizing:border-box;}
    #main_table{margin:20px 0 40px; overflow:visible; width:100%; padding:0 10px; box-sizing:border-box;}
    #main_table table{border:0; width:100%; table-layout:auto; box-sizing:border-box; display:block;}
    #main_table tbody,
    #main_table tr{display:block; width:100%; max-width:100%;}

    #main_table .table_top_title{
        font-size:16px;
        padding:10px 12px;
        border:1px solid #ddd;
    }
    #main_table .table_sub_title{display:none !important;}
    #main_table .table_sub_title td{display:none !important;}

    #main_table .sub_contents{display:block; margin:0 0 12px; width:100%;}
    #main_table .sub_contents th,
    #main_table .sub_contents td{
        display:block;
        width:100%;
        max-width:100%;
        border-left:1px solid #ddd;
        border-right:1px solid #ddd;
        box-sizing:border-box;
    }
    #main_table .sub_contents th{
        padding:12px;
        border-top:1px solid #ddd;
        box-sizing:border-box;
        width:100%;
    }
    #main_table .sub_contents td{
        padding:8px 12px;
        text-align:left;
        display:flex;
        justify-content:space-between;
        align-items:baseline;
        font-weight:normal;
    }
    #main_table .sub_contents td:before{
        color:#666;
        font-size:12px;
        margin-right:10px;
        white-space:nowrap;
    }
    #main_table .sub_contents td:nth-of-type(1):before{content:"Price";}
    #main_table .sub_contents td:nth-of-type(2):before{content:"Year";}
    #main_table .sub_contents td:nth-of-type(3):before{content:"Mileage";}
    #main_table .sub_contents td:nth-of-type(4):before{content:"Model code";}
    #main_table .sub_contents td:nth-of-type(5):before{content:"Trans";}
    #main_table .sub_contents td:nth-of-type(6):before{content:"Displacement";}
    #main_table .sub_contents td:nth-of-type(7):before{content:"Frame repaired";}

    #main_table .sub_contents th .img_area{
        float:none;
        width:100%;
        margin:0 0 10px;
    }
    #main_table .sub_contents th .txt_area{
        float:none;
    }
    #main_table .sub_contents th .txt_area .car_name{font-size:16px;}
    #main_table .sub_contents th .txt_area .detail_name{font-size:12px;}

    .detail_name{font-size:12px;}
    .slider{box-shadow:none;}
    .controls{gap:12px; margin-top:10px;}
    .arrow{padding:6px 10px; font-size:11px;}
    .counter{font-size:12px;}

    .option td{
        padding:10px 12px 2px;
        border-bottom:1px solid #ddd;
    }
    .option td ul{
        margin:0 0 8px;
        padding:0;
        list-style:none;
        display:flex;
        flex-direction:row;
        flex-wrap:wrap;
        column-gap:10px;
        row-gap:6px;
    }
    .option td ul li{
        width:48%;
        font-size:12px;
    }
    #main_table .sub_contents th .txt_area .if_btn{
        display: none;
    }


}

.range_sep{display:inline-block; margin:0 3px; color:#666; font-weight:bold; vertical-align:middle;}
#top_pannel #nenshiki_from,
#top_pannel #nenshiki_to,
#top_pannel #price_from,
#top_pannel #price_to,
#top_pannel #kyori_from,
#top_pannel #kyori_to,
#top_pannel #soukou_from,
#top_pannel #soukou_to{
    width:calc(32% - 8px);
    float:none;
    display:inline-block;
    vertical-align:middle;
}
#top_pannel #nenshiki_from,
#top_pannel #price_from,
#top_pannel #kyori_from,
#top_pannel #soukou_from{margin-right:6px;}
#top_pannel #nenshiki_to,
#top_pannel #price_to,
#top_pannel #kyori_to,
#top_pannel #soukou_to{margin-left:6px;}

/**********************************************************
                        Mobile Top Panel
***********************************************************/
@media screen and (max-width: 768px) {
    

    #top_pannel{
        width:100%;
        max-width:100%;
        padding:0 10px;
        box-sizing:border-box;
    }
    #top_pannel #nenshiki_from,
    #top_pannel #nenshiki_to,
    #top_pannel #price_from,
    #top_pannel #price_to,
    #top_pannel #kyori_from,
    #top_pannel #kyori_to,
    #top_pannel #soukou_from,
    #top_pannel #soukou_to{width:100%; min-width:0; display:block; float:none; margin:0 0 6px;}
    




    #top_pannel table{
        width:100%;
        border:0;
        border-collapse:separate;
        border-spacing:0;
        display:block;
        box-sizing:border-box;
    }
    #top_pannel tbody,
    #top_pannel tr,
    #top_pannel table th,
    #top_pannel table td{
        display:block;
        width:100%;
        max-width:100%;
        box-sizing:border-box;
    }
    #top_pannel table tr{margin-bottom:8px;}
    #top_pannel table tr:last-child{margin-bottom:0;}
    #top_pannel table th{
        padding:10px 12px;
        font-size:16px;
        line-height:1.3;
        background:#efefef;
        border:1px solid #ddd;
        border-bottom:0;
    }
    #top_pannel table td{
        border:1px solid #ddd;
        padding:10px 12px;
        background:#fff;
        height:auto;
    }
    #top_pannel table tr td{
        height:auto;
        padding:10px 12px;
    }
    #top_pannel table tr td p{
        float:none;
        display:block;
        width:auto;
        margin:0 0 6px;
        font-size:13px;
        line-height:1.3;
        color:#333;
    }
    #top_pannel table tr td select{
        float:none;
        width:100%;
        height:38px;
        margin-top:4px;
        box-sizing:border-box;
    }
    #top_pannel table .tate th,
    #top_pannel table .tate td{
        background:#f5f5f5;
        border:1px solid #ddd;
        width:100%;
        max-width:100%;
        box-sizing:border-box;
    }
    #top_pannel table .tate th{border-bottom:0; width:100% !important; display:block;}
    #top_pannel table .tate td{
        height:auto;
        text-align:center;
        padding:10px 12px;
        width:100% !important;
        display:block;
        box-sizing:border-box;
    }
    .tate .reset_btn_top,
    .tate .search_btn{
        width:48%;
        padding:10px 0;
        margin:4px 1%;
        box-sizing:border-box;
        display:inline-block;
    }




}