@charset "UTF-8";
/* CSS Document */


/*======================================================
下層ページ共通
======================================================*/

table th, table td{
    padding:4px 10px;
}

.blue-ta tr:nth-child(2n+1){
    background: #fff;
}

.blue-ta tr:nth-child(2n+0){
    background: #dbedee;
}

.page-title{
    margin-bottom:1em;
}

.h2-page{
    font-size:1.8rem;
    padding:10px;
    font-weight: normal;
    margin:1.5em auto;
    color:#fff;
    border-top:1px solid #fff;
    border-bottom:1px solid #fff;
}

.h2-page p{
    border-left:4px solid #2F81F1;
    padding-left:8px;
}

.h3-page{
    border-bottom:1px dotted #fff;
    margin-bottom:10px;
    font-size:1.8rem;
}

.heading-square{
    margin-bottom:1em;
    &::before{
        content:"■";
        margin-right:0.5em;
        color:#2F81F1;
    }
}

.heading-bg-blue{
    background:#99b1d1;
    color:#333;
    padding:4px;
    margin-bottom:1em;
}

.bt-contact{
    margin:50px 0;
    text-align: center;
}

.page-copy{
    text-align: center;
    font-size:3.0rem;
    color:#3485f2;
}

.page-copy img{
    vertical-align: middle;
}


th{
    text-align: left;
}

th,td{
    /* /border: 1px solid #999; */
    padding:4px;
}

/*======================================================
整備・板金ページ共通
======================================================*/

.button-box{
    text-align: center;
    margin:20px auto;
}

.mainte-torikumi-wrapper{
    display: flex;
    justify-content: space-between;
}

@media(min-width:768px){
    .mainte-torikumi-img{
        flex-basis: 35%;
        margin-right:20px;
    }
    .mainte-torikumi-txt{
        flex-basis: 62%;
    }
}

@media(max-width:767px){
    .mainte-torikumi-wrapper{
        flex-wrap: wrap;
    }
    .mainte-torikumi-img,.mainte-torikumi-txt{
        flex-basis:100%;
    }
    .mainte-torikumi-img{
        margin: auto;
        text-align: center;
    }

}

/*======================================================
クーポンページ
======================================================*/

.dotbox{
    border:2px dotted #2F81F1;
    padding:20px;
    margin-bottom:20px;
}

.h3-coupon{
    color:#3485f2;
}

/*======================================================
店舗情報
======================================================*/

.shop-floor{
    background:rgba(0, 79, 188, 0.84);
    margin-bottom:10px;
    color:#fff;
    padding-left:10px;
}

/*======================================================
会社概要
======================================================*/

.company-ta{
    width:100%;
}

.company-ta th,.company-ta td{
    border-bottom:1px dashed #fff;
    padding:4px;
}

/*======================================================
プライバシーポリシー
======================================================*/

.h3-privacy{
    font-size:1.8rem;
    margin-bottom:10px;
}

.h4-privacy{
    color:#5b9ce0;
    margin:10px 0;
}

.privacy ol,.privacy ul{
    list-style: none;
    font-size:1.3rem;
    margin-bottom:20px;
}

.pri-add-ta{
    font-size:1.2rem;
    margin-left:20px;
}

.pri-add-ta th,.pri-add-ta td{
    padding:0 10px;
    vertical-align: top;
}

.privacy p{
    margin-bottom:10px;
}









/*======================================================
求人情報
======================================================*/

.recruit-ta{
    width:100%;
    margin-bottom:30px;
}

.recruit-ta th,.recruit-ta td{
    padding:6px;
    border:1px solid #aaa;
}

.recruit-ta tr:nth-child(2n+1){
    background: #f2f2f2;
}

@media(min-width:768px){
    .recruit-ta th{
        width:13%;
    }
}

.recruit-info{
    border:1px solid #f00;
    padding:10px;
    font-size:1.8rem;
    margin-bottom:20px;
    color:#fffdd3;
}

/*======================================================
中古車
======================================================*/

.tenji-box li.new::after{
    content: url(../img/car/new_a001.gif);
}




/*======================================================
中古車
======================================================*/

.Ucar-box{
    margin-bottom:40px;
}

.Umaker{
    font-size:1.2rem;
}

.Uname-box{
    border-top:2px solid #1456b1;
    border-bottom:2px solid #1456b1;
    padding:4px 0;
    margin-bottom:20px;
}

.Uname{
    font-size:2.0rem;
    color:#fff;
    /* //background: #1456b1; */

    margin-bottom:10px;
}

.Uprice{
    float:left;
    margin-bottom:0;
}

.Uprice:first-child{
    margin-right:50px;
}

.Utotal-price, .Ucar-price{
    font-size:3.0rem;
    font-weight: bold;
}

.Utotal-price{
    color:#f00;
}

.Uyen{
    font-size:1.8rem;
}

.used-ta{
    width:100%;
}

.used-ta th, .used-ta td{
    padding:8px;
    border:1px solid rgba(255, 255, 255, 0.66);
}

.used-ta th{
    background: #1456b1;
    text-align: center;
}

/*======================================================
お問い合わせ
======================================================*/

.contact-box{
    background: #fff;
    padding:20px;
    border-radius:4px;
    color:#333;
}

.contact-box li{
    color:#333;
}

.contact-box .h3-page{
    border-bottom:1px solid #2F81F1;
}

.h3-contact{
    background: #2f81f1;
    color:#fff;
    text-align: center;
    font-weight: normal;
}

.contact-box p{
    color:#333;
    font-size:1.3rem;
}

.contact-att-box{
    border:1px solid #f00;
    padding:10px;
    margin-bottom:20px;    
}

.form-tel{
    font-size:3.0rem;
    font-weight: bold;
    color:#3485f2;
}

.form-ex li{
    color: #f00;
}

.form-ex li:last-child{
    text-indent: 1.5em;
}

.contact-tel{
    font-size:2.4rem !important;
    margin-right:10px;
}

/*======================================================
カレンダー
======================================================*/
.cal-wrapper{
    background: #fff;
    padding:10px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.cal-box{
    flex-basis: 33%;
    padding:5px;
}

@media(max-width:960px){
    .cal-box{
        flex-basis: 50%;
    }
}

@media(max-width:500px){
    .cal-box{
        flex-basis: 100%;
    }
}

.cal-title span{
    background: #32aade;
    border-radius: 20px;
    padding:2px 10px;
    font-size:1.3rem;
}

.cal-ta{
    width:100%;
}

.cal-ta th,.cal-ta td{
    font-size:0.9rem;
    font-weight: bold;
    color:#666;
    border:3px solid #fff;
    padding:8px;
    text-align: center;
}

.cal-ta th{
    background: #fff;
}

.cal-ta td{
    background: #f3f3f3;
}

.cal-ta .sun{
    background: #fca6a7;
}

/*======================================================
所有権解除のページ
======================================================*/
.page-ownership ul li,
.page-ownership ol li,
.page-ownership p{
    font-size:1.5rem;
}

.ownership-list > li{
    margin-bottom:0.5em;
}

.att-required{
    color:#f00;
    border:1px solid #f00;
    padding:0 5px;
}

.page-ownership a:link,
.page-ownership a:visited{
    color:#1456b1;
}

.page-ownership a:hover{
    color:#2f81f1;
}

.ico-dl-before::before{
    content:"\f090";
    font-family: 'Material Icons';
    font-size:1.5rem;
}

.btn-dl a{
    border:1px solid #1456b1;
    display: block;
    /* padding:2px 20px; */
    text-align: center;
    margin: 20px 0;
    width:260px;
    text-decoration: none;
}

.btn-dl a:hover{
    background: #93b9ee;
    color:#fff;
    transition: all .3s ease 0s;
}

.btn-dl a::after{
    content:"\f090";
    font-family: 'Material Icons';
}
/* 外部リンクボタン */

.btn-ex-link a{
    display: block;
    border:4px solid rgb(212, 212, 212);
    padding:10px 20px;
    width:260px;
    box-shadow: 4px 4px 4px rgba(196, 196, 196, 0.4);
    margin:20px 10px;
    text-align: center;
    color:#999;
    text-decoration: none;
    font-weight: bold;
}

.btn-ex-link a:link,
.btn-ex-link a:visited{
    color:#2f81f1;
}

.btn-ex-link a:hover{
    background:#93b9ee;
    color:#fff;
    transition:all .3s;
}

.btn-ex-link a::after{
    font-family: 'Material Icons';
    content:"\e894";
    margin-left:20px;
    color:#2f81f1;
    font-weight:normal;
    position:absolute;
    right:30px;
    top:50%;
    transform: translateY(-50%);
}

.btn-ex-link a:hover::after{
    color:#fff;
}

.btn-ex-link{
    position:relative;
}
.ownership-link{
    display: flex;
    justify-content: center;
}


/*======================================================
パックdeメンテ料金表ページ
======================================================*/

/* はみ出したらスクロール */

.ta-scroll-wrapper{
    width:100%;
    overflow: scroll;
}

/* 見出しを固定 */
.ta-scroll-fixed01,.ta-scroll-fixed02{
        position: sticky;
        background: #333;
    }
    .ta-scroll-fixed01{
        width:100px !important;
        left:-1px;
        &:before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
      }
    }
    .ta-scroll-fixed02{
        width:100px !important;
        left:99px;
    }    

/* テーブルスタイル */
.mainte-price-ta{
    /* table-layout: fixed; */
    thead{
     tr:not(:last-of-type){
        th{
        border-top:1px solid #b0b0b0;
        }
    }
    }
    tr:last-of-type{
        th,td{
            border-bottom:1px solid #b0b0b0;
        }
        }
    tbody th{
        border:1px solid #b0b0b0;
    }
}

.mainte-price-ta{
    width:1200px;
    th{
        border-left:1px solid #b0b0b0;
    }
    th,td{
        font-size:1.2rem;
        padding:4px;
        border-right:1px solid #b0b0b0;
        text-align: center;
        width:60px;
    }
    tr:nth-child(odd){
        td{
        background:#5c5c5c;
        }
    }
}

.mainte-price-ta__odd{
    background: #5c5c5c;
}

.mainte-price-ta__car_type{
    background: #aaaaaa;
}

/* 基本料金・車両重量 */

.mainte-basic-ta{
    width:100%;
    th,td{
        border-bottom:1px solid #b0b0b0;
    }

    /* ここからPCの時の表示 */
    @media(min-width:768px){
    th,td{
        border-right:1px solid #b0b0b0;
        text-align: center;
        &:first-of-type{
            border-left:1px solid #b0b0b0;
        }
    }
    thead th{
        border-top:1px solid #b0b0b0;
    }
    
    tbody tr:nth-child(odd){
        th,td{
        background:#5c5c5c;
        }
    }
    
    tr:last-of-type{
        th,td{
            border-bottom:1px solid #b0b0b0;
        }
        }
}
}
/* 基本料金・車両重量 レスポンシブ設定 */

@media(max-width:768px){
    /* テーブルの内容が入っていない場合、スマホではセルごと削除する */
    .ta-s-none {       
    display: none !important;
  }


  .mainte-basic-ta {
      thead{
    display: none;
  }
    th,
    td {
      display: block;
      width: 100%;
      text-align: center !important;
    }
    th {
      background: #3a3a3a;
    }
    td{
        padding:0.5em;
        &::before{
            content:attr(data-label);
            display: inline;
            margin-right:0.5em;
        }
    }
    
  }
  }

  @media(min-width:768px){
    /* td:first-of-type{
        background: #7a7a7a;
    } */
     .mainte-basic-ta {
        tr:last-of-type td:last-of-type {
        border-bottom: 1px solid #999;
        }
    }
  }


/*======================================================
整備・部品料金表ページ
======================================================*/

/* 表共通 */
.parts-ta-labor{
    width:100%;
    margin-bottom:20px;
    thead th{
        text-align: center;
    }
    th,td{
        border-bottom:1px solid #a0a0a0;
        padding:8px;
    }
    td:last-of-type{
        text-align: right;
    }
    tr:hover{
        background: #333;
    }
    td:nth-of-type(2){
        text-align: center;
    }
    td:nth-child(3){
    text-align: right;
    }
}

/* レスポンシブ設定 */
@media(max-width:767px){
    /* テーブルの内容が入っていない場合、スマホではセルごと削除する */
    .ta-s-none {       
    display: none !important;
  }
  .parts-ta-labor {
    margin-bottom:50px;
    thead{
    display: none;
  }
    th,
    td {
      display: block;
      width: 100%;
      text-align: center !important;
    }
    th {
      background: #3a3a3a;
    }
    td{
        &::before{
            content:attr(data-label);
            display: block;

        }
    }
    td:first-of-type{
        background: #7a7a7a;
    }
    tr:last-of-type td:last-of-type {
      border-bottom: 1px solid #999;
    }
  }
}

  /* 部品の表のみ */
  @media(min-width:768px){
    .parts-ta{
            td:first-of-type{
            width:70%;
        }
        td:nth-of-type(2){
            width:30%;
            text-align: right;
        }
    }
    }