@charset "UTF-8";
/*======================================================= 
TOPページ用スタイル
=======================================================*/
html, body{
    overflow-x: hidden;
}
section{
    padding: 50px 0;
}
h2{
    text-align: center;
    font-size: 40px;
    margin-bottom: 0.5em;
}
p, a{
    font-size: 15px;
}
a{
    display: block;
    text-decoration: none;
}
ul{
    padding: 0;
}
li{
    list-style: none;
}

/*================ 共通 =================*/
.section-inner{
    max-width: 750px;
    margin: auto;
}
/* text */
.tx-orange{
    color: #ff6302;
}
.tx-yellow{
    color: #ffff00;
}
.tx-small{
    font-size: 0.8em;
}

/* btn */
.orange-btn,
.blue-btn{
    position: relative;
    max-width: 350px;
    border-radius: 50px;
}
.orange-btn:hover,
.blue-btn:hover{
    opacity: 0.8;
}
.orange-btn{
    background-color: #ff6302;
    margin: 30px auto 0 auto;
}
.blue-btn{
    background-color: #0077a8;
    margin: auto;
}
.orange-btn a,
.blue-btn a{
    color: #fff;
    font-weight: bold;
    text-align: center;
    padding: 15px 20px 15px 15px;
}
.orange-btn a::after,
.blue-btn a::after{
    position: absolute;
    content: "\f138";
    font-family: "Font Awesome 5 Free";
    font-weight: bold;
    color: #fff;
    top: 1em;
    right: 30px;
}

/* 見出し */
.service h2,
.flow h2,
.shoplist h2{
    position: relative;
    padding-bottom: 0.2em;
    margin-bottom: 1em;
}
.service h2:before,
.flow h2:before,
.shoplist h2:before{
    position: absolute;
    content: "";
    width: 150px;
    height: 5px;
    background-color: #ff6302;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    
}

/*================ cta =================*/


/*================ header =================*/


/*================ main =================*/
/* Fv */
.fv{
    background-image: url(/assets/img/lp/top/fv_bg.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    text-align: center;
}

/* Campagin */
.cpbanner-pc{
    display: block;
}
.cpbanner-sp{
    display: none;
}

/* Carsearch */
.carsearch{
    border-top: 15px solid #ff6302;
}
.carsearch h2{
    position: relative;
    text-align: left;
    padding-left: 1.2em;
}
.carsearch h2::before{
    position: absolute;
    content: "\f002";
    font-family: "Font Awesome 5 Free";
    font-weight: bold;
    color: #ff6302;
    top: 3px;
    left: 0;
}
.carsearch h3{
    position: relative;
    font-size: 25px;
    padding-left: 1.2em;
}
.carsearch h3::before{
    position: absolute;
    content: "\f192";
    font-family: "Font Awesome 5 Free";
    font-weight: bold;
    color: #ff6302;
    top: 3px;
    left: 0;
}
.maker-block ul,
.bt-block ul{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 20px;
    margin: 20px 0 50px 0;
}
.maker-block ul li,
.bt-block ul li{
    background-color: #fff;
    border: 2px solid #7f7f7f;
    border-radius: 5px;
    box-shadow: 3px 3px 2px #7f7f7f;
    font-weight: bold;
    text-align: center;
    padding: 15px;
}
.maker-block ul li:hover,
.bt-block ul li:hover{
    box-shadow: none;
    opacity: 0.7;
}
.maker-block ul li img,
.bt-block ul li img{
    width: 65%;
}
.maker-block ul li p,
.bt-block ul li p{
    color: #333;
}
#searchForm{
    grid-template-columns: 1fr 100px;
}
.CarSearchForm{
    max-width: 100%;
}
input[type=text].serchBox{
    border: 2px solid #0077a8;
}
#serchBtnArea{
    background-color: #ff6302;
}

/* Reason */
.reason{
    position: relative;
    background-color: #0077a8;
    padding: 150px 0 100px 0;
}
.reason::after{
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 50px 50vw 0 50vw;
    border-color: #0077a8 #fff transparent #fff;
    position: absolute;
    top: 99%;
    left: 0;
    right: 0;
}
.reason-content{
    position: relative;
    background-color: #fff;
    border-radius: 10px;
    padding: 100px 50px 50px;
}
.reason-point{
    position: absolute;
    top: -13%;
    left: 0;
}
.reason-tx{
    font-weight: bold;
    text-align: center;
}
.reason-block{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px 15px;
    padding: 30px 0;
}
/* Service */
.service{
    padding-top: 100px;
}
.service-block{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
}
.service-block img{
    width: 100%;
}
.service-item{
    color: #333;
}
.service-item:hover{
    color: #333;
}
.service-title{
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    text-align: center;
    color: #333;
    padding-right: 1em;
    margin: 20px 0;
}
.service-title i{
    font-size: 1.5em;
    color: #ff6302;
    padding-left: 0.5em;
}
.service-item p{
    font-weight: bold;
}

/* Voice */
.voice{
    position: relative;
    background-color: #f2f2f2;
    clip-path:polygon(0 0, 100% 10%, 100% 100%, 0 100%);
    padding-top: 100px;
}
.voice-top-comment{
    width: fit-content;
    background-color: #0077a8;
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    padding: 10px 15px;
    margin: 0 auto 15px auto;
}
.fukidashi{
    position: relative;
    font-size: 42px;
    font-weight: bold;
    text-align: center;
}
.fukidashi::before,
.fukidashi::after {
    position: absolute;
    top: 0;
    height: 1.5em;
    content: '';
    color: #333;
    border-radius: 5px;
}
.fukidashi::before {
    border-left: solid 5px;
    left: 0;
    transform: rotate(-30deg);
}
.fukidashi::after {
    border-right: solid 5px;
    right: 0;
    transform: rotate(30deg);
}
.voice-block{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 15px;
    margin: 30px 0;
}
.voice-item{
    background-color: #fff;
    border: 3px solid #0077a8;
    border-radius: 0 10px 0 10px;
    box-shadow: 5px 5px 0 #ff630280;
    padding: 15px 10px
}
.voice-info{
    display: grid;
    grid-template-columns: 70px 1fr;
    align-items: center;
    padding-bottom: 15px;
}
.voice-info p{
    font-size: 15px;
    text-align: right;
    line-height: 1.2;
}
.voice-item p{
    font-weight: bold;
}

/* Flow */
.flow_list {
  display: flex;
  justify-content: space-between;
  list-style: none;
  padding: 0;
  margin: 0;
  position: relative;
}

/* 線（横方向） */
.flow_list::before {
  content: "";
  position: absolute;
  bottom: 27%;
  left: 10%;
  right: 10%;
  height: 3px;
  background: #ff7a00;
  z-index: 0;
}
.flow_item {
  text-align: center;
  position: relative;
  flex: 1;
  z-index: 1;
  padding: 0 5px;
}
/* 丸い番号 */
.flow_circle {
  width: 50px;
  height: 50px;
  background: #ff6302;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 1.5rem;
  margin: 20px auto;
  position: relative;
  z-index: 2;
}
/* ステップ内の内容 */
.flow_content img {
  height: auto;
  display: block;
  margin: 0 auto 8px;
}
.flow_content p{
    font-weight: bold;
}

/* Qa */
.qa{
    background-image:  linear-gradient(0deg, transparent calc(100% - 1px), rgba(0, 119, 168, 0.2) calc(100% - 1px)),
    linear-gradient(90deg, transparent calc(100% - 1px), rgba(0, 119, 168, 0.2) calc(100% - 1px));
    background-size: 20px 20px;
    background-repeat: repeat;
    background-position: center center;
}
.qa h2 img{
    display: block;
    margin: auto;
}
.qa-item{
    border: 3px solid #0077a8;
    margin-bottom: 15px;
}
.qa-title{
    position: relative;
    background-color: #0077a8;
    color: #fff;
    font-size: 15px;
    font-weight: bold;
    padding: 0.8em 4em;
}
.qa-title::before{
    position: absolute;
    content: "Q";
    width: 2em;
    height: 2em;
    border-radius: 50px;
    left: 1em;
    top: 0.8em;
    background-color: #fff;
    color: #0077a8;
    font-size: 15px;
    font-weight: bold;
    text-align: center;
}
.qa-title::after {
    position: absolute;
    content: "+";
    font-weight: bold;
    color: #fff;
    top: 28%;
    right: 25px;
}
.qa-title.open::after {
    content: "-";
}
.qa-text{
    display: none;
    position: relative;
    background-color: #fff;
    padding: 1em 3em;
}
.qa-text::before{
    position: absolute;
    content: "A";
    left: 1em;
    top: 1em;
    color: #ff6302;
    font-weight: bold;
}

/* Shop */
.shop-block{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 15px;
}
.shop-item{
    background-color: #fff;
    border: 3px solid #0077a8;
    border-radius: 5px;
    box-shadow: 5px 5px 0 #ff630280;
    padding: 15px 10px;
}
.shop-item h3{
    background-color: transparent;
    color: #ff6302;
    text-align: center;
    padding: 0;
}
.shop-item img{
    margin-bottom: 15px;
}
.shop-item img.tel:hover{
    opacity: 0.7;
}

/* Contact */
.contact{
    background-color: #f2f2f2;
    border-bottom: 15px solid #0077a8;
    padding: 0 0 50px 0;
}
.contact h2{
    background-color: #0077a8;
    color: #fff;
    padding: 0.5em 0;
}
.mailform{
    background-color: #fff;
    padding: 20px;
}
.mailform h2{
    text-align: left;
    font-size: 18px;
    background: #f5f5f5;
    color: #333;
    padding: 15px;
}
.privacypolicy a{
    display: inline-block;
}
/*================ footer =================*/
.footer{
    border: none;
}
.copyright p{
    text-align: center;
}

/* 750px以下 */
@media screen and (max-width:750px){
    h2{
        font-size: 35px;
    }
    section{
        padding: 30px 0;
    }
    /* 共通 */
    .section-inner{
        padding: 0 15px;
    }
    .orange-btn a,
    .blue-btn a{
        padding: 10px 15px 10px 10px;
    }
    .service h2:before,
    .flow h2:before,
    .shoplist h2:before{
        width: 130px;
    }

    /* Campagin */
    .cpbanner-pc{
        display: none;
    }
    .cpbanner-sp{
        display: block;
    }
    /* carsearch */
    .carsearch{
        border-top: 10px solid #ff6302;
    }
    .carsearch h3{
        font-size: 20px;
    }
    .maker-block ul,
    .bt-block ul{
        gap: 10px;
        margin: 15px 0 30px 0;
    }
    .maker-block ul li,
    .bt-block ul li{
        box-shadow: 1px 1px 1px #7f7f7f;
        padding: 5px;
    }
    .maker-block ul li p,
    .bt-block ul li p{
        font-size: 12px;
    }
    #searchForm{
        grid-template-columns: 1fr 80px;
    }
    .CarSearchForm{
        max-width: 100%;
    }
    /* reason */
    .reason{
        padding: 100px 0 50px 0;
    }
    .reason-content{
        padding: 100px 20px 30px 20px;
    }
    .reason-point{
        top: -7.5%;
    }
    .reason-tx{
        text-align: left;
    }
    .reason-block{
        gap: 5px 10px;
        padding: 0;
    }
    /* service */
    .service-block{
        grid-template-columns: 1fr 1fr;
        gap: 15px 10px;
    }
    .service-title{
        margin: 15px 0;
    }
    /* voice */
    .voice{
        padding-top: 50px;
        clip-path: polygon(0 0, 100% 5%, 100% 100%, 0 100%);
    }
    .fukidashi{
        font-size: 25px;
    }
    .fukidashi::before{
        border-left: solid 3px;
        left: 15px;
    }
    .fukidashi::after{
        border-right: solid 3px;
        right: 15px;
    }
    .voice-block{
        gap: 10px;
        padding-top: 15px;
        margin: 0;
    }
    .voice-item{
        padding: 10px;
    }
    .voice-info{
        grid-template-columns: 50px 1fr;
    }
    .voice-info p{
        font-size: 12px;
    }
    /* flow */
    .flow_list::before{
        bottom: 32%;
    }
    .flow_item{
        padding: 0 3px;
    }
    /* qa */
    .qa h2 img{
        width: 120px;
    }
    .qa-title{
        font-size: 15px;
        padding: 0.8em 2.5em;
    }
    .qa-title::before{
        font-size: 15px;
        width: 1.5em;
        height: 1.5em;
        top: 1em;
        left: 0.5em;
        line-height: 1.4;
    }
    /* shop */
    .shop-block{
        display: block;
    }
    .shop-item{
        width: 80%;
        max-width: 450px;
        padding: 15px 30px;
        margin: 0 auto 20px auto;
    }
    .shop-item img {
        width: 100%;
        margin-bottom: 5px;
    }
}

/* 480px以下 */
@media screen and (max-width:480px){
    h2{
        font-size: 28px;
    }
    p, a{
        font-size: 14px;
    }
    .orange-btn a::after,
    .blue-btn a::after{
        top: 0.7em;
    }
    /* carsearch */
    #serchBox {
        padding: 10px 15px;
        font-size: 14px;
    }
    .maker-block ul, .bt-block ul {
        grid-template-columns: 1fr 1fr 1fr;
    }
    .maker-block ul li p, .bt-block ul li p{
        font-size: 10px;
    }
    /* reason */
    .reason::after{
        border-width: 30px 50vw 0 50vw;
    }
    .reason-content{
        padding: 50px 15px 30px 15px;
    }
    .reason-point{
        top: -9%;
    }
    /* service */
    .service{
        padding-top: 60px;
    }
    /* voice */
    .voice-top-comment{
        font-size: 15px;
        padding: 5px 15px;
    }
    .fukidashi{
        font-size: 18px;
    }
    .voice-block{
        display: block;
    }
    .voice-item{
        width: 80%;
        padding: 10px;
        margin: 0 auto 15px auto;
    }
    /* flow */
    .flow_circle{
        width: 35px;
        height: 35px;
        font-size: 1em;
    }
    .flow_content p{
        font-size: 11px;
    }
    /* qa */
    .qa h2 img{
        width: 80px;
    }
    .qa-title{
        font-size: 14px;
    }
    /* shop */
    .shop-item{
        padding: 15px;
    }
}