/* button */
.btn-gradient-blue-pink { color: #fff; padding: 24px 12px; width: 320px; display: inline-block; text-align: center; border: 0; border-radius: 16px; font-size: 14px; font-weight: 500; margin: 12px auto; transition: all 0.3s;
    background: -webkit-gradient(linear, left top, right top, color-stop(0, #fc16f3), color-stop(100, #0497ff));
    background: -moz-linear-gradient(Left, #fc16f3 0%, #0497ff 100%);
    background: -ms-linear-gradient(Left, #fc16f3 0%, #0497ff 100%);
    background: -o-linear-gradient(Left, #fc16f3 0%, #0497ff 100%);
    background: linear-gradient(to right, #fc16f3 0%, #0497ff 100%); }
.btn-gradient-blue-pink strong { font-size: 20px; }
.btn-gradient-blue-pink:hover { background: -webkit-gradient(linear, left top, right bottom, color-stop(0, #fc16f3), color-stop(100, #0497ff));
    background: -moz-linear-gradient(top left, #fc16f3 0%, #0497ff 100%);
    background: -ms-linear-gradient(top left, #fc16f3 0%, #0497ff 100%);
    background: -o-linear-gradient(top left, #fc16f3 0%, #0497ff 100%);
    background: linear-gradient(to bottom right, #fc16f3 0%, #0497ff 100%); }

.btn-gradient-blue { color: #fff; padding: 24px 12px; width: 320px; display: inline-block; text-align: center; border: 0; border-radius: 16px; font-size: 14px; font-weight: 500; margin: 12px auto; transition: all 0.3s;
    background: -webkit-gradient(linear, left top, right top, color-stop(0, #6abdff), color-stop(100, #556aff));
  background: -moz-linear-gradient(Left, #6abdff 0%, #556aff 100%);
  background: -ms-linear-gradient(Left, #6abdff 0%, #556aff 100%);
  background: -o-linear-gradient(Left, #6abdff 0%, #556aff 100%);
  background: linear-gradient(to right, #6abdff 0%, #556aff 100%); }
.btn-gradient-blue strong { font-size: 20px; }
.btn-gradient-blue:hover {   background: -webkit-gradient(linear, left top, right bottom, color-stop(0, #6abdff), color-stop(100, #556aff));
    background: -moz-linear-gradient(top left, #6abdff 0%, #556aff 100%);
    background: -ms-linear-gradient(top left, #6abdff 0%, #556aff 100%);
    background: -o-linear-gradient(top left, #6abdff 0%, #556aff 100%);
    background: linear-gradient(to bottom right, #6abdff 0%, #556aff 100%); } 

/* margin */
.m28TB { margin: 28px auto; }
.m0-a { margin: 0 auto!important; }

/* padding */
.p24TB { padding: 24px 0;}

/* bachground */
.bg-gray { background: #E6E6E6; }

/* font */
.f_12 { font-size: 12px; }


/* banner top */
.bg-banner-ctn { display: block; text-align: center; position: relative; }
.bg-banner-ctn img { width: 100%; }
.bg-banner-ctn .topic-banner { position: absolute; left: 25%; top: 35%;  width: 50%; text-align: center; color: #fff; font-size: 20px; }
.bg-banner-ctn .topic-banner h1 {font-size: 35px;font-weight: 700;margin-bottom: 18px;text-align: left;text-align: center;}
.bg-banner-ctn .topic-banner .text {/* display: inline-block; */vertical-align: middle;padding: 12px;}
.bg-banner-ctn .topic-banner .link { display: inline-block; vertical-align: middle; padding: 12px; }


/* stocking sales */
.stocking { display: block; padding: 100px 0 150px; font-size: 30px; font-weight: 700; }
.stocking .title-stock { display: block; text-align: center; text-shadow: 3px 3px 5px rgba(0, 0, 0, 0.4); }
.stocking .title-stock .line { display: block; width: 250px; height: 3px; background: #B3B3B3; margin: 24px auto; }
.stocking-list { display: flex; flex-wrap: wrap; justify-content: space-between; }
.stocking-list li { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; height:80px; width: 45%; margin:  18px auto; background: #fff; border-radius: 12px; padding: 12px; font-size: 20px; text-align: center; box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.2); }


/* trouble-stocking */
.trouble-stocking .title-trouble { background: #0099FF; text-align: center; color: #fff; font-size: 28px; font-weight: bold; padding: 40px 8px; }
.trouble-stocking .title-trouble h2 { font-size: 34px; padding-top: 8px; }

.sales { display: flex; flex-wrap: wrap; width: 100%; align-items: center; margin: 40px auto; }
.sales .content-sales {display: block;width: 50%;padding: 0 8px;}
.sales .images-sales { display: block; width: 50%; }
.sales .images-sales img { max-width: 100%; }
.sales .title-text {display: table;width: 100%;text-align: center;}
.sales span {/* display: table-cell; */vertical-align: middle;text-align: center;padding: 8px;}
.sales .number {width: 15%;min-width: 70px;margin: 0 0px 0 0;}
    .sales .number {
        width: 45px;
        min-width: 45px;
        display:inline-block;
    }
    .sales .number img{ width:100%;}
.sales .text {font-size: 26px;font-weight: 700;/* width: 85%; */}
.sales p { font-size: 18px; font-weight: 700; text-align: center; padding: 28px 12px; }
.line-dashed { border-bottom: 2px dashed #ccc; width: 100%; margin: 24px auto; } 


/* support */
.support { display: block; margin: 24px auto 0; background: url(../images/business/ctn/bg-support.jpg) center no-repeat; background-size: cover; padding: 80px 0 20px; text-align: center; }
.support .title-support { font-size: 30px; font-weight: 700; text-align: center; margin-bottom: 50px; }
.support .circle-black { display: flex; flex-wrap: wrap; justify-content: center; margin: 12px auto; }
.support .half { display: block; width: 100%; }
.support .circle-black .circle {display: flex;flex-wrap: wrap;align-items: center;justify-content: center;padding: 8px;margin: 12px 1%;width: 170px;height: 169px;border-radius: 50%;text-align: center;color: #fff;background: #4D4D4D;font-size: 18px;font-weight: 600;}
.support .monthly { width: 50%; margin: 24px auto; padding: 22px; text-align: center; background: rgba(255, 255, 255, 0.8); font-size: 24px; line-height: 2; }
.support .monthly strong { color: #ED1C24; font-size: 30px;}


/* discount */
.discount { margin: 0 auto 24px; display: block; }
.discount .title-discount { background: #0099FF; background-size: cover; text-align: center; color: #fff; font-size: 35px; font-weight: bold; padding: 40px 8px; text-shadow: 2px 3px 4px rgba(0, 0, 0, 0.4); }
.discount .title-discount .highlight-yellow { color: #FFF40A; font-size: 42px; }
.title-radius-gray { background: #fff; border: 2px solid #ccc; border-radius: 38px; padding: 18px; width: 400px; margin: 40px auto 0; text-align: center; font-size: 22px; font-weight: bold; color: #4D4D4D; }

/* line_up */
#line_up ul{ margin: 24px -2% 24px 0; display: flex; flex-wrap: wrap; }
/* #line_up p {
    text-align: center
} */
#line_up li {
    width: 31.33%;
    margin: 12px 2% 12px 0;
    background-color: #fff; 
    border-right: 2px dotted #bdb9b9;
    padding: 30px 10px 20px;
    position: relative; 
}
#line_up li:last-child {
    border-right: 0; 
}
/* #line_up li:nth-child(2) {
    margin: 0 2%;
} */
.car-img {
    /* height: 200px; */
    padding: 15px 0;
}
.grade {
    width: 140px;
    background: #999999;
    color: #fff;
    text-align: center;
    font-size: 18px;
    box-sizing: border-box;
    padding: 4px;
}

.text-right {
    text-align: right !important;
    margin: 15px 0 0
}
.off {
    width: 60px;
    height: 60px;
    background-image: url(../images/off.png);
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    bottom: 0;
    left: 0;
    color: #fff;
    text-align: center;
    line-height: 1.0;
    box-sizing: border-box;
    padding: 8px 0 0;
}
.off span {
    font-size: 10px;
}
.more_bt {
    margin: 30px auto 0;
    text-align: center
}
.more_bt a { display: block; }
.more_bt img { max-width: 100%; }


.arrow-yen { display: block; position: relative; float: right; margin-top: 8px; }
.datacar { display: block; font-size: 12px; padding: 0 8px; }
.arrow-yen span { position: absolute; color: #fff; top: 4px; text-align: center; display: block; width: 100%; }
.arrow-yen span strong { display: block; font-weight: bold; font-size: 20px; }
.arrow-yen span strong small { font-size: 12px; font-weight: 400; }

.car-data { margin: 10px auto 0; color: #4D4D4D; font-size: 18px; font-weight: bold; }
.car-data .type-car { display: block; font-size: 18px; margin-bottom: 8px; }
.car-data .spec-car { font-size: 15px; }
.car-data .price-yen { text-align: center; color: #000; font-size: 15px; }
.car-data .price-yen strong { font-size: 28px;  }

/* purchase  */
.purchase { display: block; margin: 24px auto 50px; background: #fff; padding: 6px; width: 75%; }
.purchase .title-purchase { background: #ffffff; color: #000; font-size: 18px; display: block; width: 320px; margin: 22px auto 10px; text-align: center; }
.content-purchase {  margin-top: 6px; }
.content-purchase ul { display: block !important; padding: 18px 18px 18px 100px; }
.content-purchase ul li { margin:0 !important; position: relative; padding-left: 24px; display: block!important; width: 100%!important; }
.content-purchase ul li::before { content: '・'; font-size: 14px; position: absolute; top: 0; left: 0; }

/* services */
.services { display: block; margin: 24px auto; }
.title-radius-blue { background: #fff; border: 2px solid #2E3192; border-radius: 38px; padding: 18px; width: 400px; margin: 40px auto 0; text-align: center; font-size: 22px; font-weight: bold; color: #2E3192; }
.link-service { display: block; text-align: center; padding: 50px 12px 0; }
.link-service a { display: inline-block; width: 46%; margin: 12px 1%; position: relative; }
.link-service a img { width: 100%; }
.link-service .text-link { display: flex; align-items: center; justify-content: center; background: rgba(225, 225, 225, 0); position: absolute; top: 0; left: 0; width: 100%; height: 100%; text-shadow: 2px 3px 4px rgba(0, 0, 0, 0.4); font-size: 24px; color: #fff; font-weight: bold;   transition: all 0.3s; }
.link-service a:hover .text-link{ background: rgba(0, 0, 0, 0.4);}

.sp_only{ display: none;}

/*step*/
.step { }
.title-step { font-size: 30px; text-align: center; font-weight: bold; color: #4D4D4D;  padding: 30px 12px; }
#step-disp-ctn ul{
    display: flex;
    flex-wrap: wrap;
    position: relative;
}
#step-disp-ctn li {
    display: block; width: 33.33%; margin: 12px auto;
}

#step-disp-ctn li  dl {
    width: 100%;
    text-align: center;
}
#step-disp-ctn li  dt {
    font-size: 20px;
    font-weight: bold;
    line-height: 1.3;
}
#step-disp-ctn li  dt strong {
    font-size: 18px;
    display: block;
    height: 47px;
    overflow: hidden;
}
#step-disp-ctn li  dt span {
    font-size: 14px;
}
#step-disp-ctn li  dd {
    padding: 10px 0 0;
    position: relative;
} 
#step-disp-ctn li dd::after {
    content: "";
    display: block;
    width: 15%;
    background: #B3B3B3;
    height: 8px;
    position: absolute;
    right: -7%;
    top: 50%;
}
#step-disp-ctn li:last-child dd::after {
    content: ""; 
    display: none;
}
#step-disp-ctn li dd div { padding: 15px; width: 190px; height: 190px; border: 4px solid #0099FF; border-radius: 50%; background: #fff; overflow: hidden; display: flex; align-items: center; justify-content: center; margin: 14px auto;  }
#step-disp-ctn li dd div img { max-width: 100%; }

@media(max-width:1024px) {
    .bg-banner-ctn .topic-banner { width: 60%; top: 20%; left: 20%; }


    .sales .number {
        width: 40px;
        min-width: 40px;
        display:inline-block;
    }
    .sales .number img{ width:100%;}

    .sales .images-sales {
        width: 40%;
        }
        .sales .content-sales {
            display: block;
            width: 60%;
            padding: 0 8px;
        }



}


@media(max-width:980px) {
    .bg-banner-ctn .topic-banner { width: 80%; top: 20%; left: 10%; }


}

@media(max-width:768px) {
    .bg-banner-ctn .topic-banner { width: 90%; top: 15%; left: 5%; }
    .stocking-list li { font-size: 16px; }

    .trouble-stocking .title-trouble { font-size: 20px; padding: 20px 8px; }
    .trouble-stocking .title-trouble h2 { font-size: 24px; }

    .stocking { padding: 50px 0; }

    .sales .text {font-size: 18px;text-align: left;width: auto;}
    .sales p { font-size: 15px; text-align: left; }
     .sales p br{ display:none;}

    .support .title-support { font-size: 22px; margin-bottom: 24px; }
    .support .monthly { width: 80%; font-size: 20px; }

    /*.inquiry { padding-bottom: 20px; }
    .inquiry .item-menu { margin: 0 -2% 0 0; }
    .inquiry .item-menu li { padding: 25px 15px; }*/

     #line_up li { width: 100%; border-bottom: 2px dotted #bdb9b9; border-right: 0; }
    .car-data .price-yen { text-align: right; }

    .sales .number {width: 12%;min-width: 40px;display: inline-block;}
    .sales .number img {width: 100%;}


    
}

@media(max-width:680px) {
    .bg-banner-ctn .topic-banner h2 { font-size: 24px; margin: 0; }
    .bg-banner-ctn .topic-banner .text { font-size: 14px; }
    .btn-gradient-blue { font-size: 12px; padding: 9px 12px; }
    .btn-gradient-blue strong { font-size: 16px; }
    .topic-banner p { font-size: 14px; margin: 0 auto !important; }

    .stocking { font-size: 24px; }
    .stocking-list li { font-size: 14px; width: 47%; margin: 8px auto; }

    .sales { border-bottom: 2px dashed #ccc; padding: 18px 0; }
    .sales .images-sales { text-align: center; }
    .sales .text { font-size: 16px; }
    .sales p { font-size: 12px; }
    .line-dashed { display: none; }

    .support .half { display: none; }    
    .support .monthly { width: 100%; }
    .support .circle-black .circle {width: 128px;height: 128px;font-size: 17px;}
    
    .discount .title-discount { font-size: 20px; padding: 22px; }
    .discount .title-discount .highlight-yellow { display: inline-block; font-size: 30px; }

    .purchase { width: 100%; }
    .content-purchase ul { padding: 18px; }

    .title-step { padding: 12px; }
    #step-disp-ctn li { width: 100%; }
    #step-disp-ctn li dl { display: flex; flex-wrap: wrap; align-items: center; }
    #step-disp-ctn li dd { display: block; width: 40%; text-align: center; }
    #step-disp-ctn li dt { display: block; width: 60%; }
    #step-disp-ctn li dd div { width: 150px; height: 150px; padding: 30px; }
    #step-disp-ctn li dd::after { width: 6px; top: auto; bottom: -22%; right: 49%; height: 45px; }

    /*.inquiry { background-repeat: repeat; background-size: contain; }
    .inquiry a { margin: 24px auto; }
    .inquiry .item-menu li { width: 48%; }*/
    
}

@media(max-width:480px) {
    .btn-gradient-blue-pink { width: 290px; }
    .btn-gradient-blue { width: 290px; }

    .sales {margin: 10px auto; }
    .sales .content-sales { padding: 0; }
    .sales p {padding: 12px;}
    .sales p br { display: none; }
    .sales .images-sales {order:1; width:70%; margin:auto;}
    .sales .content-sales {order:2;width:100%;margin: 10px 0 0;}
    .sales .text {
        font-size: 18px;
    }
    .sales p {
    font-size: 16px;
    }
    .sales .number {min-width: 40px;width: 40px;}
    span.number img { max-width: 100%; }

    




    .stocking { font-size: 20px; }
    .stocking-list li { width: 100%; height: auto; }

    .support .title-support { font-size: 20px; }
    .support .monthly { padding: 18px; font-size: 16px; }
    .support .monthly strong { font-size: 20px; }
    

    .title-radius-gray { width: 290px; font-size: 18px; }

    .title-step { font-size: 22px; }

    .purchase .title-purchase { width: 100%; }

    .title-radius-blue { width: 290px; font-size: 18px; }
    .link-service a { width: 100%; }

    #step-disp-ctn li dd div { width: 100px; height: 100px; padding: 14px; }
    #step-disp-ctn li dd::after { bottom:-29%; }

    /*.inquiry a { width: 245px; height: 90px; }
    .inquiry .text-menu { font-size: 15px; padding: 22px 0; }
    .inquiry .item-menu li { width: 100%; }*/
    
    
    
}

@media(max-width:460px) {
    .bg-banner-ctn .topic-banner { top: 3%; }
    .bg-banner-ctn .topic-banner h2 { font-size: 19px; }
    .bg-banner-ctn .topic-banner .text { padding: 4px; }
    .bg-banner-ctn .topic-banner .link { padding: 4px; }
    .btn-gradient-blue { margin: 5px auto; }
    .topic-banner p { font-size: 10px; }
    .btn-gradient-blue strong { font-size: 14px; }

    
}

@media(max-width:420px) {
    .support .circle-black .circle {width: 141px;height: 100px;font-size: 15px;margin: 7px 2px 0;}

}