a.anchor{
    display: block;
    padding-top: 70px;
    margin-top: -70px;
    }
.title-oil-change { background: url(../images/bg-mainternance-form.jpg) no-repeat top center; background-size: cover; }
.title-oil-change span { font-size: 18px; color: #fff; padding: 25px 0; display: block;}
.bg-orange { padding: 28px; text-align: center; font-size: 18px; color: #fff; margin-top: 80px;
    background: rgba(255,136,0,1);
    background: -moz-linear-gradient(left, rgba(255,136,0,1) 0%, rgba(254,207,0,0.85) 100%);
    background: -webkit-gradient(left top, right top, color-stop(0%, rgba(255,136,0,1)), color-stop(100%, rgba(254,207,0,0.85)));
    background: -webkit-linear-gradient(left, rgba(255,136,0,1) 0%, rgba(254,207,0,0.85) 100%);
    background: -o-linear-gradient(left, rgba(255,136,0,1) 0%, rgba(254,207,0,0.85) 100%);
    background: -ms-linear-gradient(left, rgba(255,136,0,1) 0%, rgba(254,207,0,0.85) 100%);
    background: linear-gradient(to right, rgba(255,136,0,1) 0%, rgba(254,207,0,0.85) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff8800', endColorstr='#fecf00', GradientType=1 );}
.topic-mainternance { display: block; width: 100%; padding: 3rem 0; font-size: 15px; font-weight: 500; text-align: center; line-height: 1.8; }

/* R23 */
.r23_title{
    background-image: url(../images/top_img.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: left top;
    padding: 0px 0 150px;
}
.r23_title h3{
    background: -webkit-gradient(linear, right top, left top, color-stop(0, rgb(124 247 240 / 85%)), color-stop(95, rgb(91 188 239 / 85%)));
    background: -moz-linear-gradient(Right, rgb(124 247 240 / 85%) 0%, rgb(91 188 239 / 85%) 95%);
    background: -ms-linear-gradient(Right, rgb(124 247 240 / 85%) 0%, rgb(91 188 239 / 85%) 95%);
    background: -o-linear-gradient(Right, rgb(124 247 240 / 85%) 0%, rgb(91 188 239 / 85%) 95%);
    background: linear-gradient(to left, rgb(124 247 240 / 85%) 0%, rgb(91 188 239 / 85%) 95%);
    color: #FFF;
    text-align: center;
    padding: 30px 0;
    font-size: 24px;
    font-weight: bold;
}
.r23_point{
    background-color: #e2faff;
    padding: 30px 0;
}
.r23_point ul{
    display:
    flex;
    justify-content: center;
}
.r23_point ul li{
    display: inline-block;
    padding: 3px;
    border-radius: 8px;
    margin: 4px 7px;
    width: 20%;
}
.r23_point ul li p{
    display: block;
    background: #fff;
    padding: 10px 5px 12px;
    font-size: 15px;
    border-radius: 5px;
    text-align: center;
    color: #079be8;
    font-weight: bold;
    font-size: 18px;
    line-height: 1.2;
}
.title-store {display: block;text-align: left;font-size: 26px; font-weight:bold;text-align: center;margin-top: 3.5rem;}
.title-store span {width: 70px;height: 5px;display: block;margin: 8px auto;}

.step_flow{
    margin-top: 2.5em;
}
.step_flow,.step_flow2{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.step_flow2{
    flex-direction:row-reverse
}
.step_flow dl,.step_flow2 dl{
    width: 284px;
    margin-bottom: 65px;
    position: relative;
    margin-right: 99px;
} 
.step_flow dl dt,.step_flow2 dl dt{background-color: #51dbf8;padding: 10px 15px;text-align: left;font-size: 18px;font-weight: bold;line-height: 1;color: #FFF;}
.step_flow dl dt span:first-child{
    background: #FFF;
    display: inline-block;
    color: #51dbf8;
    width: 23px;
    height: 23px;
    border-radius: 50%;
    text-align: center;
    line-height: 22px;
    margin: 0 5px 0 0;
}
.step_flow dl dt span:last-child{background: #FFF;color: #2ca3ea;display: inline-block;padding: 4px 0px;font-size: 17px;width: 78px;text-align: center;margin: 0 0 0 auto;float: right;}
.step_flow dl dt span:last-child small{ font-size:0.8em;}
.step_flow dl dd{background-color: #51dbf8; padding:4px}
.step_flow dl dd div,.step_flow2 dd div{ border: solid #51dbf8; border-width: 0 10px 10px;text-align: center;margin-bottom: 10px;}
.step_flow dl dd p,.step_flow2 dd p{font-size: 16px;}
.step_arrow:after{
    content:
    '';
    background-image: url(../images/arrow.jpg);
    background-repeat: no-repeat;
    width: 35px;
    height: 46px;
    position: absolute;
    right: -69px;
    top: 86px;
}
.step_flow dl:nth-child(3):after{transform: rotate(90deg);right: 44%;bottom: -57px;top: auto;}
.step_flow dl:nth-child(4):after,
.step_flow dl:nth-child(5):after{transform: rotate(180deg);left: -70px;right: auto;}

.step_flow dl:nth-child(4){order: 6;}
.step_flow dl:nth-child(5){order: 5;}
.step_flow dl:nth-child(6){order: 4;}

.step_flow dl:nth-child(3),.step_flow dl:nth-child(4){ margin-right:0;}

.fllow_text{
    background-color: #e2faff;
    padding: 30px 10px;
    text-align: center;
}
.fllow_text span{
    color: #ec0667;
    background-color: #fffc24;
}
.shaken_price{text-align: center; margin-top: 2.5em;}

.shaken_price_text{
    background-color: #f1f1f1;
    padding: 20px 20px;
    margin: 2.5em  auto;
    max-width: 980px;
}

.nav-tabs .nav-link {
    border: none;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
#nav-tab{
    justify-content: space-between;
    border-bottom: none;
    margin-top:  2.5em;
}
div#nav-tab a {
    color: #FFF;
    text-align: center;
    width: 24.5%;
    padding: 10px 5px 0;
    opacity:1;
    transition:0.7s;
}
div#nav-tab a:hover{ opacity:0.7;}

div#nav-tab a span{
    font-size:20px;
    font-weight: bold;
    display: inline-block;
    line-height: 20px;
}
a#price-type01-tab span,
a#price-type02-tab span,
a#price-type03-tab span{height: 40px;line-height: 40px !important;}
div#nav-tab a p{
    background:#FFF;
    margin: 5px 0 0;
    font-weight: bold;
    padding: 7px 0;
}
div#nav-tab a i{
    font-size: 30px;
    line-height: 30px;
    margin: 5px 0 0;
}

a#price-type01-tab {background: #129ee7;}
a#price-type01-tab p{color:#129ee7}
a#price-type02-tab {background: #fa8700;}
a#price-type02-tab p{color:#fa8700}
a#price-type03-tab {background: #29c387;}
a#price-type03-tab p{color:#29c387}
a#price-type04-tab {background: #ed3fa1;}
a#price-type04-tab p{color:#ed3fa1}

div#nav-tabContent {
    padding: 90px 0 93px;
    margin-top: -70px;
}
.price_detail{
    background-color: #FFF;
    padding: 10px 20px 20px;
}
.price_detail h4{font-size: 24px;text-align: center;font-weight: bold;padding: 15px;position: relative;}
.price_detail h4 br{ display: none;}
.price_detail h4 img{
    position: absolute;
    right: 0;
    bottom: 0;
}
#price01{ border-top: 8px solid #129ee7;}
#price01 h4{color:#129ee7;}
#price02{ border-top: 8px solid #fa8700;}
#price02 h4{color:#fa8700;}
#price03{ border-top: 8px solid #29c387;}
#price03 h4{color:#29c387;}
#price04{ border-top: 8px solid #ed3fa1;}
#price04 h4{color:#ed3fa1;}
.price_detail div{ text-align: center; margin-top: -20px;}

.swipe_txt{ display: none;}

/* plating */
.title-plating {display: block;font-size: 24px;font-weight: 700;padding: 1.5rem 0;}
.title-plating .pit-service { display: inline-block; padding: 3px; border-radius: 32px; margin: 4px 3px; }
.title-plating .pit-service span { display: block; background: #fff; padding: 8px 16px; font-size: 15px; border-radius: 32px; }
.plating  { background: url(../images/bg-2color.jpg) repeat-x top left #fff; }
.column-plating { font-weight: 500; box-shadow: 0px 4px 9px rgba(0, 0, 0, 0.2); display: block; width: 30%; margin: 12px 1%; background: #fff; }
.column-plating h3 { font-size: 16px; font-weight: 700; color: #00a6e4; margin-bottom: 0.5rem;  }


/* repair */
.repair  { background: url(../images/bg-2color-green.jpg) repeat-x top left #fff; }
.title-repair {display: block;font-size: 24px;font-weight: 700;padding: 1.5rem 0;}

.column-repair { font-weight: 500; box-shadow: 0px 4px 9px rgba(0, 0, 0, 0.2); display: block; width: 30%; margin: 12px 2%; background: #fff; }
.column-repair h3 { font-size: 16px; font-weight: 700; color: #38af64; margin-bottom: 0.5rem;  }

/* remark */
.bg-remark {background: #f1f1f1;/* margin-bottom: 5px; */}
.border-left-gray {border-left: 5px solid #f1f1f1;}
.list-nember {position: relative;padding-left: 35px;font-size: 12px;/* font-weight: 500; */}
.list-nember .number { display: inline-block; position: absolute; top: 0; left: 0; }


    
/* reservation */
.bg-gray { background: #f1f1f1; padding: 35px 0; }
.bg-darkgray { background: #767676; padding: 35px 0; text-align: center; }
.reservation { display: block; }
.reservation-form { display: block; background: #000; font-size: 17px; font-weight: 500; color: #fff; text-align: center; padding: 6px; }
.reservation ul { display: block; }
.reservation ul li { display: flex; flex-wrap: wrap; width: 100%; align-items: center; }
.reservation .title { display: block; padding: 12px; width: 30%; text-align: right; font-weight: 500; }
.reservation .data { display: block; padding: 12px; width: 70%; text-align: left; }
.reservation .data span { display: inline-block; padding: 4px 0; }
.reservation .require { background: #f23d78; padding: 0 4px; display: inline-block; font-size: 11px; color: #fff; margin-right: 8px; border-radius: 2px; }


.reservation select{ min-width: 100px; -webkit-appearance:none; -moz-appearance:none;}
.reservation select::-ms-expand{ display: none;}
.reservation select.style-select{  background: url(../images/select-arrow.png) no-repeat right center #fff; padding-right: 18px; }

.input-default {   -webkit-appearance: none; padding: 8px; border: 1px solid #000; border-radius: 4px; background-color: #fff; display: inline-block; box-shadow: 0px 3px 0 #c8c8c8; }

input.short { width: 15%; }
input.medium { width: 45%; }
input.long, textarea.long { width: 60%; }

.reservation select.medium { width: 45%; }

.btn-black { background: #000; border: 1px solid #000; color: #fff; padding: 8px 12px; }
.btn-confirm { background: #fff701; width: 240px; text-align: center; padding: 12px; margin:0 auto 10px; border: 2px solid #000; font-size: 18px; font-weight: 600; box-shadow: 3px 3px 0px #70f4a5, inset 2px 2px 2px #fff; transition: all 0.3s; }

.remark { background: #fcf9d8; padding: 25px 0; text-align: center; }



.ui-state-active{background: #4DB2B6;}
.ui-datepicker{display:none;width: 565px;font-family: 'Monda', sans-serif;text-align: center;background: #ffffff;margin: 0 0 10px 0;border: 5px solid #4ccdeb;box-shadow: 5px 5px 0px rgba(33, 37, 41, 0.32);padding: 15px;font-family: 'Open Sans Condensed', sans-serif;font-weight: bold;}
.ui-datepicker a{color: #000;}
.ui-datepicker-calendar{width: 100%;font-size: 18px;}
.ui-datepicker-group{margin: 0 0 10px 0;background: #48C2C2;}
.ui-datepicker-header {color: #2e2e2e;padding: 0 10px 10px;text-transform: uppercase;letter-spacing: 3px;font-size: 18px;border-bottom: 3px solid #4ccdeb;border-bottom: 3px solid;border-image: linear-gradient(to left, #4bcded 0%, #deea5d 95%);border-image-slice: 1;}

.ui-datepicker-calendar thead th{color: #2e2e2e; padding:10px;}
.ui-datepicker-calendar thead th:first-child {color: #d50c74;}
.ui-datepicker-calendar thead th:last-child {color: #0073b5;}

.ui-datepicker-calendar th,.ui-datepicker-calendar td{font-size: 18px;color: #dadada;text-align: center;}
.ui-datepicker-calendar td span{display: block;padding: 5px;}
.ui-datepicker-calendar td a{color: #2e2e2e;display: block;padding: 5px;}
.ui-datepicker-calendar td:first-child a {color: #d50c74;}
.ui-datepicker-calendar td:last-child a {color: #0073b5;}

.ui-datepicker-title{/* clear: both; *//* font-size: 18px; */}
.ui-datepicker-prev{float: left;}
.ui-datepicker-next{float: right;}


.edit_errors{
    background: rgba(255, 255, 255, 0.7);
    color: black;
    font-weight: bold;
    text-align: center;
    margin: 12px 0;
    padding: 10px 0;  
}
@media(max-width:1199px){
    .step_flow,.step_flow2{
        margin-left:
        auto;
        margin-right:
        auto;
        max-width: 830px;
    }

    .step_flow dl,.step_flow2 dl{
        width: 30%;
        margin-bottom: 50px;
        position: relative;
        margin-right: 2%;
    } 
.step_flow dl dt,.step_flow2 dl dt{padding: 10px 8px;font-size: 18px;}
.step_flow dl dt span:first-child{
    width: 20px;
    height: 20px;
    margin: 0px 3px 0 0;
    line-height: 19px;
}
.step_flow dl dt span:last-child{padding: 4px 0px;font-size: 15px;width: 60px;}
    
    
    
    .step_flow dl dd div,.step_flow2 dd div{ border-width: 0 7px 7px; margin-bottom: 5px;}
    .step_flow dl dd p,.step_flow2 dd p{font-size: 15px;}
    .step_flow dl dd p br,.step_flow2 dd p br{ display:none;}
    .step_arrow:after{width: 26px;height: 34px;position: absolute;right: -34px;top: 82px;background-size: 100%;}
    .step_flow dl:nth-child(3):after{transform: rotate(90deg);right: 44%;bottom: -43px;top: auto;}
    .step_flow dl:nth-child(4):after,
    .step_flow dl:nth-child(5):after
    {transform: rotate(180deg);left: -34px; right: auto;}


}

@media(min-width:768px) {
    .r23_point ul li{
        margin: 4px 2px;
        width: 21%;
    }
    .r23_point ul li p{
        padding: 10px 0px 12px;
        font-size: 15px;
        font-size: 16px;
    }


    



    
    .btn-black:hover { background: #fff701; color: #000;}
    .btn-confirm:hover { box-shadow: 3px 3px 0px #17864300, inset 2px 2px 2px #178643;}
}
@media(max-width:768px) {
    input.short { width: 45%; }
    input.medium { width: 55%; }
    input.long, textarea.long { width: 70%; }
    .ui-datepicker{ width: 90%;}
    .input-default{ font-size: 16px;}


    .step_flow {
        max-width: 560px;
    }
    .step_flow dl,.step_flow2 dl{
        width: 46%;
        margin-right: 0%;
    }
    .step_flow dl:nth-child(3){order: 4;}
    .step_flow dl:nth-child(4){order: 3;}
    .step_flow dl:nth-child(5){order: 5;}
    .step_flow dl:nth-child(6){order: 6;}


    .step_flow dl:nth-child(2):after,
    .step_flow dl:nth-child(4):after{transform: rotate(90deg);right: 44%;bottom: -38px;top: auto;left: auto;}
    .step_flow dl:nth-child(3):after{transform: rotate(180deg);left: -34px; right: auto; top: 97px;}
    .step_flow dl:nth-child(5):after{transform: rotate(0);right: -34px; left:auto; top: 97px;}


div#nav-tab a span{
        font-size:18px;
        line-height: 18px;
    }
    a#price-type01-tab span,
    a#price-type02-tab span,
    a#price-type03-tab span{height: 40px;line-height: 40px !important;}
    div#nav-tab a p{
        padding: 5px 0;
        letter-spacing: -1px;
        font-size: 12px;
    }
    div#nav-tab a i{
        font-size: 25px;
        line-height: 26px;
        margin: 0px 0 0;
    }



}
@media(max-width:767px) {
    .r23_point{
        padding:15px 0;
    }
    .r23_point ul{
        flex-wrap: wrap;
    }
    .r23_point ul li{
        margin: 4px 2px;
        width: 48%;
    }
    .r23_point ul li p{
        padding: 5px 0px 5px;
        font-size: 15px;
    }
    
    .column-plating  { width: 100%; margin: 12px auto; padding: 2rem; }
    .column-plating img { max-width: 100%; width: auto!important; }

    .column-repair  { width: 100%; margin: 12px auto; padding: 2rem; }
    .column-repair img { max-width: 100%; width: auto!important; }

    .content-document { width: 100%; }
    .border-left-gray { border-left: 0; }


    nav {
        position: relative;
        overflow-x: scroll;
    }
    div#nav-tab {
        overflow-x: scroll;
        display: flex;
        flex-wrap: inherit !important;
    }
    div#nav-tab a {
        min-width:100px;
        width: 100%;
    }

    div#nav-tab a {
        padding: 5px 0px 0;
        margin: 0 0 4px;
        transition:0.7s;
    }
    a#price-type01-tab span, a#price-type02-tab span, a#price-type03-tab span {
        height: 32px;
        line-height: 37px !important;
    }
    div#nav-tab a span{
        font-size: 14px;
        display: block;
        line-height: 16px;
    }
    div#nav-tab a p{
        display:none;
    }
    div#nav-tab a i{ font-size:20px;line-height: 15px;}

    div#nav-tabContent {
        padding: 43px 0 10px;
        margin-top: -35px;
    }

    .price_detail{
        padding: 5px 5px 10px;
        border-top-width: 5px !important;
    }
    .price_detail h4{font-size: 20px;padding: 6px 0 28px 9px;line-height: 20px;text-align: left;}
    .price_detail h4 br{ display: block;}

    .price_detail h4 img{
        width: 125px;
        top: 10px;
        bottom: auto;
    }
    #price01 h4 img{
        width: 100px;
    }
    .price_detail div{overflow-x: scroll;}
    .price_detail div img{min-width: 470px;}
    
    .swipe_txt{display: block;text-align: center;color: #7d7d7d;margin: 5px 0 0;font-size: 12px;}

}


@media(max-width:520px) {
    .step_flow dl dt, .step_flow2 dl dt {
        padding: 8px 3px;
        font-size: 16px;
    }
    .step_flow dl dd p, .step_flow2 dd p {
        font-size: 14px;
    }
    .step_flow dl,.step_flow2 dl{
        width: 47%;
        margin-bottom: 22px;
    }
    .step_flow dl dt span:first-child{
        width: 18px;
        height: 18px;
        margin: 0px 0px 0 0;
        line-height: 17px;
        font-size: 13px;
    }
    .step_flow dl dt span:last-child{padding: 3px 2px;font-size: 14px;width: auto;font-weight: normal;display: inline-block;}
    .step_flow dl dd div,.step_flow2 dd div{ border-width: 0 5px 5px; margin-bottom: 5px;}
    .step_arrow:after{width: 12px;height: 17px;position: absolute;right: -15px;top: 72px;background-size: 100%;}
    .step_flow dl:nth-child(2):after,
    .step_flow dl:nth-child(4):after{transform: rotate(90deg);right: 46%;bottom: -18px;top: auto;left: auto;}
    .step_flow dl:nth-child(3):after{transform: rotate(180deg);left: -17px; right: auto; top: 72px;}
    .step_flow dl:nth-child(5):after{transform: rotate(0);right: -18px; left:auto; top: 72px;}


    

}

@media(max-width:480px) {
    .title-store {font-size: 22px;}
    .r23_title{
        padding: 0px 0 100px;
        background-position: center top;
    }
    .r23_title h3{
        padding: 15px 0;
        font-size: 22px;
        font-weight: bold;
    }
        

    input.short { width: 55%; }
    input.tel { width: 27%; }
    input.medium { width: 65%; }
    input.long, textarea.long { width: 100%; }
    .title-plating,.title-repair {padding: 1.5rem 0 0em;font-size: 20px;}
    .bg-orange{ margin-top: 0;} 


}

@media(max-width:460px) {
    .reservation ul li { margin: 4px 0; }
    .reservation .title,
    .reservation .data { width: 100%; text-align: left; padding: 4px; }
    .reservation .data { border-bottom: 1px dotted #666; padding-bottom: 14px; }
}

@media(max-width:380px) {
    .title-plating img { width: 45px; }
    .title-plating .pit-service { margin: 4px 2px; }
    .title-plating .pit-service span { font-size: 12px; padding: 7px 10px; }



    .hasDatepicker{ width: 195px;}
    
}