@charset "utf-8";


/* common ---------------- */
#contents {  }
section:first-of-type { margin-top: 1.5em;}


/* パンくず */
#pan {
  gap: .5em; font-size: .85em; max-width:1200px; margin: 1em auto 5em;
  li {
    &:nth-child(n+2)::before {
      content: '>'; padding-right: .5em;
    }
  }
}

/* スライダー */
.slick-dots{
  position: absolute; bottom: -20px;
  li.slick-active button:before { color: #666;}
}

/* title */
.page-ttl {
  z-index: -1; padding-block: 1.5em; font-size: 1.75em; font-weight: 700; text-align: center; line-height: 1.5; position: relative; background-color: var(--color-base); color: var(--color-wht);
  .sub {
    margin-block: 0 -1em; font-size: .56em; font-weight:500;
  }
  &::before {content: ""; display: block; width: 45px; height: 45px; background: url(../img/logo_m.png) no-repeat 100% / 100%; position: absolute; top: 5px; left: 0; right: 0; margin: auto;}
}
.sec_ttl {
  font-size: 1.75em; text-align: center; font-weight: 700; margin: 0 auto .8em; position: relative; padding-top: 35px; font-family: var(--font-round);
  &::before {content: ""; display: block; width: 40px; height: 40px; background: url(../img/logo_m.png) no-repeat 100% / 100%; position: absolute; top: 0; left: 0; right: 0; margin: auto;}
}
.sec_ttl2 {
  display: inline-block; font-size: 1.5em; text-align: center; line-height: 1.4; font-weight: 700; margin: 0 auto 1em; font-family: var(--font-round); position: relative; padding-top: 30px;
  span.dotted { font-size:1em; color:var(--color-base); border-bottom: 4px dotted var(--color-base);}
  &::before {content: ""; display: block; width: 40px; height: 40px; background: url(../img/logo_m.png) no-repeat 100% / 100%; position: absolute; top: 0; left: 0; right: 0; margin: auto;}
}
.ttl-def { display: inline-block; font-size: 1.5em; border-bottom: 3px dotted var(--text-color); line-height: 1.5; margin: 0 auto 1em;}


/* pagination ページ送り ------------- */
.pagination{
  margin:1em 0 30px auto; text-align:center;
  :where(a,span){
    display:inline-block; margin:3px; width:34px; line-height:32px; text-align:center; color:var(--color-wht); background-color:var(--color-base); border-radius: 3px;
  }
  a{ color: var(--color-wht); text-decoration:none; background-color:var(--color-base); border:1px solid var(--color-l-gry); }
  a:hover{color:var(--color-gry); background-color:var(--color-l-gry); border:1px solid var(--color-gry); }
  span.current{ color:var(--color-base); background-color:var(--color-wht); border:1px solid var(--color-base); }
  span.disabled { border:1px solid #d0cac8; color:#d0cac8; }

}
/* form */
.tab-nav {
  overflow:hidden; max-width:600px; margin:2em auto 2em; border:3px solid var(--color-base); border-radius:5px;
  li {
    -webkit-box-flex:1; flex-grow:1;
    a {
      display:block; padding:.5em 1em; color:var(--color-base); text-align:center; font-weight:bold; text-decoration:none;
      &:hover,&:focus { background-color:var(--color-l-gry); }
    }
    &.current a {background-color:var(--color-base); color: var(--color-wht); }
  }
  li + li { border-left:2px solid var(--color-base) }
}

.btn-submit {
  min-width: 170px; padding: 1em; font-weight: 700; color: var(--color-wht); background-color: var(--color-orn);
  &.prev {
    color: var(--text-color); border: 1px solid; background-color: var(--color-l-gry);
  }
}

/* list */
.oval {
  >li {
    text-indent: 1.3em; position: relative;
    &::before {
      content: ''; position: absolute; top: 1.2em; left: .5em; rotate: -30deg; width: .8em; height: .5em; background-color: var(--color-l-orn); border-radius: 50%;
    }
  }
}

/* contents ---------------- */

/* reason 選ばれる理由
================================================================== */
/* about-list */
.about-list {gap: 1em; margin: 0 auto 1em; max-width: 1000px;}
.about-list > li { position:relative; padding:4em 1.5em 1.5em; background:#f8add7; border-radius: 10px;}

.about-list .point { position:absolute; top:0; left:0; right:0; margin:0; text-align:center; font-size:1.25em; font-weight:bold; }
.about-list .point span { display:inline-block; padding:.7em 2.25em; color:#fff; line-height:1; background:#222; border-radius: 0 0 10px 10px;}
.about-list li:nth-child(2) {background:#8ad2f2;}
.about-list li:nth-child(3) {background:#f5d093;}
.about-list li:nth-child(4) {background:#fab7bd;}

.about-list .ttl { margin:.2em 0 .8em; text-align:center; font-weight:bold; font-size:1.25em; line-height:1.4; }
.about-list .txt { margin-bottom:0; text-align:justify; font-size:.9375em; line-height: 180%;}

/* アフターサポート */
.tcs-box { margin-top:40px; padding:2.5em; border-radius: 15px;}
.tcs-ttl { margin-bottom:1em; color:#5c360d; text-align:center; font-size:2em; font-weight:bold; line-height:1.3; }
.tcs-list .item { width:24%; margin-right:1.3%; margin-bottom:1.3%; padding:1.2em 1em 1.8em; text-align:center; border-radius:50%; background:#eb6100; color:#fff;}
.tcs-list .item:nth-child(4n) { margin-right:0; }
.tcs-list dt { height:3.2em; margin-bottom:.8em; padding-bottom:.5em; font-size:1.375em; font-weight:bold; line-height:1.4;
  display:-webkit-box; display:flex;
  -webkit-box-orient:vertical; -webkit-box-direction:normal; flex-direction:column;
  -webkit-box-pack:center; justify-content:center;
  border-bottom:1px dashed #fbfbe7; }
.tcs-list dd { font-size:0.9375em; line-height:1.7; }

.tcs-list .item:nth-child(2) { background:#166d36; }
.tcs-list .item:nth-child(3) { background:#ffcc00; }
.tcs-list .item:nth-child(4) { background:#eb6100; }
.tcs-list .item:nth-child(5) { background:#5c360d; }
.tcs-list .item:nth-child(6) { background:#166d36; }
.tcs-list .item:nth-child(7) { background:#ffcc00; }


.support-box {max-width: 1000px; margin: 0 auto 20px; position:relative; padding: 1.5em; box-shadow: 7px 7px var(--color-gry); background: #fff;  -webkit-box-align:start; align-items:flex-start; border-radius: 10px;}
.support-box .con { -webkit-box-align:start; align-items:flex-start; }
.support-box .ttl { padding:.5em 1em; font-size:1.25em; font-weight:bold; line-height:1.4; background: var(--color-sub); color: var(--color-wht); margin-bottom: 1em; }
.support-box .txt { margin-top:0; }
.support-box .btn { margin-bottom:1em;}
.support-box .slider { width:100%; }


.hoken_bnr { margin-bottom:1em;}
.hoken_bnr > li { width:100%; text-align: center; margin-bottom: .3em;}
.hoken_bnr > li:only-child { width:auto; max-width:70%; }

.slick-dots > li:only-child { display:none; }

/* about 軽未使用車とは
================================================================== */
.rec-kei-list {gap: 1em;}
.rec-kei-list li { position:relative; padding: 4em 1.2em 1.2em; box-shadow: 5px 5px var(--color-l-gry); background: var(--color-l-base); border-radius: 10px;}
.rec-kei-list .ttl { margin-bottom:.8em; text-align:center; font-size:1.25em; line-height:1.2; position: relative;}
.rec-kei-list .ttl:before {content: ''; display: block; mask: url(../img/common/ico_car.svg) 100% / 100% no-repeat; background: var(--color-wht); width: 60px; height: 42px; position: absolute; top: -45px; left: 0; right: 0; margin: auto;}
.rec-kei-list .txt { margin:.5em 0 0;}
.rec-mainimg {margin-bottom: 2em;}
.rec-about-box + .rec-about-box { margin-top:40px; }
.rec-kei-list li:nth-child(2) {background: var(--color-l-blu);}
.rec-kei-list li:nth-child(3) {background: var(--color-yel);}

.rec-about-img { width:48%; overflow:hidden; }
.rec-about-txt { width:47%; padding-top:1.4em; }
.rec-about-txt .ttl { margin-bottom:1em; padding-bottom:.5em; font-size:1.75em; font-weight:bold; line-height:1.6; border-bottom:4px dotted #f19100; }

.action-btn-box { margin-top:60px; padding:2.5em; background:#fbfbe7; }
.bg-yel .action-btn-box,
.bg-round-yel .action-btn-box { border:3px solid #faba30; background:#fff; }
.action-btn-list li { width:49%; overflow:hidden; border-radius:5px; }
.action-btn-list li:nth-child(odd) { margin-right:2%; }

.relief-list { margin:30px 0; padding: 30px 0; width: 100%;}
.relief-list ul {margin: 0 auto; max-width: 1200%;}
.relief-list li { width:300px; margin:0 20px; text-align:center;}
.relief-list .ttl { font-size:1.25em; font-weight:bold; }
.relief-list .ttl span { font-size:1.2em; }
.relief-msg { text-align:center; font-size:1.5em; font-weight:bold; margin: 0;}
.relief-msg span { position:relative; display:inline-block; padding:0 1em; }


.promise-ttl { overflow:hidden; margin:.8em 0 .5em; text-align:center; color:#f15e0e; font-size:1.875em; font-weight:bold; line-height:1.4; }
.promise-ttl .num { font-size:1.786em; }
.promise-ttl > span { position:relative; padding:0 1em; }
.promise-ttl > span:before,
.promise-ttl > span:after { content:""; position:absolute; top:0; bottom:0; left:100%; width:500px; height:6px; margin:auto 0; background:#f19100; }
.promise-ttl > span:after { left:auto; right:100%; }

.promise-list{
  gap: .7em;
  li { position:relative; padding: 1.25em; background: var(--color-sub); border-radius: 10px; color: var(--color-wht);}
}
.promise-list .ttl { margin:0 0 .8em; text-align:center; font-size:1.25em; line-height:1.4; color: var(--text-color);}
.promise-list .ttl span { position:absolute; top:20px; left:0; right:0; width:1.6em; height:1.6em; margin:0 auto; padding:.05em 0 0 .05em; text-align:center; font-size:1.364em; font-weight:bold; line-height:1.6em; color:#fff; border-radius:50%; background:#f19100; }
.promise-list .txt { margin:0 0;}



.flow-list { 
  margin:1em auto 0; padding-left:0; max-width: 1000px;
  li { position:relative; margin-bottom:35px; padding:1.2em; list-style:none; border: 4px solid var(--color-base); border-radius: 10px;}
}

.flow-list > li:not(:last-child):after { content:""; position:absolute; bottom: -40px; left:0; right:0; margin: auto;
  mask:url(../img/about/arrow_u.svg) 100% / 100% no-repeat; width:35px; height: 33px; background-color: var(--text-color);}
.flow-list .img {overflow:hidden; }
.flow-list .con {padding-top:.5em; -webkit-box-flex:1; flex:1; }
.flow-list .ttl { position:relative; margin-bottom:1em; padding-top:.3em; font-size:1.5em; font-weight:700; color: var(--color-base);}
.flow-list .ttl span {font-size: 1.125em; display: block; width: 40px; text-align: center; height: 40px; padding: 9px 0 0; background-color: var(--color-base); border-radius: 50%; color: var(--color-wht); margin-bottom: 5px;}


/* company 会社紹介
================================================================== */
.google-map { margin-bottom:30px; height: 400px;}
.access-map { margin-bottom:35px; padding:2em; text-align:center; background:#fcfcee; }

.access-box { margin-bottom:50px; }
.access-info { width:48%; }
.access-list { width:48%; }
.access-list .row + .row { margin-top:1.5em; }
.access-list dt { margin-bottom:.6em; padding-left:.6em; font-size:1.125em; color:#fff; background: #fca92b; }

.access-img li { width:33%; }
.access-img li img {}

#seo {background: url(../img/company/seo_bg.jpg) no-repeat; background-size: cover;}
.txt_right {text-align: right;}
.seo_box .image {width: 30%;}
.seo_box .text {width: 64%;}

/* staff */
#staff .shopttl { margin:0 0 30px;}
#staff .shopttl span { display: inline-block; padding: 0.6em 6.5em 0.7em; background-color: #166d36; color:#fff; border-radius: 10px; font-size: 1.25em;}
#staff .shopttl2 { margin-top: 30px;}
#staff .shopttl2 span { background-color: #61390e;}
.staff-list li { width:23.5%; margin-bottom:40px; margin-right:2%; }
.staff-list li:nth-child(4n) { margin-right:0;}
.staff-list a { display:block; text-align:center; text-decoration:none; }
.staff-list .img { overflow:hidden; margin-bottom:.8em; }
.staff-list .post,
.staff-box .post { margin:0 0 .5em; display:inline-block; padding:0; color: #f17700; font-weight:bold; font-size:.85em; line-height:1.4;}
.staff-list2 .post, .staff-box .post2 { background: #61390e;}
.staff-list .name { line-height:1.6; font-size:1.25em; }
.staff-list .name span { display:block; font-size:.75em; }

.staff-box { position:relative; width:500px; max-width:90%; margin:0 auto; padding:40px 30px 24px; border-radius:10px; background:#fff; }
.staff-box h3 { margin-bottom:18px; padding-bottom:2px; font-size:24px; font-family:"Rounded Mplus 1c"; font-weight:500; border-bottom:1px dashed #bbb; }
.staff-box .img { margin-bottom:.8em; overflow:hidden; padding:1em; text-align:center; border-radius:10px; background:#fcfcee; }
.staff-box .img img { border-radius:10px; }
.staff-box .name { margin-bottom:1em; padding-bottom:.2em; font-size:1.25em; border-bottom:3px dotted #faba30; }
.staff-box .name span { margin-left:1em; font-size:.8em; }

.staff-data dt { width:26%; color:#fff; text-align:center; font-weight:bold; border-radius:3px; background:#eb6100; }
.staff-data dd { width:74%; padding-left:1em; }
.staff-data > * { margin-bottom:5px; padding:2px 6px; font-size:.875em; }


/* gude 初めての方へ
================================================================== */
#guide01 {background: url(../img/guide/guide_bg.jpg); background-attachment: fixed; background-size: cover; padding: 40px 0;}
.guide-intro {
  padding: 30px 0 120px; background-color: rgba(255, 255, 255, 0.8); max-width: 900px; width: 94%; margin: 0 auto; position: relative;
  .big {color: var(--color-red); font-weight: 600;}
  &::after {content: ""; display: block; width: 143px; height: 138px; background: url(../img/guide/guide_staff.png) no-repeat 100% / 100%; position: absolute; bottom: 0; right: 5px;}
}
.guide-intro-ttl { margin-bottom:1em; font-size:1.6em; line-height:1.5; text-align:center; font-weight: 700; position: relative;}
.guide-intro-txt { font-size:1em; text-align:center; }

.use-list {gap: .7em;}
.use-list li { border-radius: 10px; border: 3px solid var(--color-base); box-shadow: 5px 5px var(--color-base); padding: 1.2em 1em;}
.use-list .ttl { font-size:1.5em; color: var(--color-base); text-align: center;}
.use-list .ttl span { text-align: center; font-size:.7em; padding: .2em .3em; width: 5em; display: block; background: var(--color-base); color: var(--color-wht); margin: 0 auto .3em; border-radius: 30px;}
.use-list p {margin-block: .5em}
.use-list .img { width:100%; overflow: hidden; margin-bottom: 5px;}
.use-list .img img { border: 2px solid #fff;}

.buy-list {
  gap: .7em;
  li {
    width: 100%; background:var(--color-sub); padding: 1.2em; border-radius: 10px; color: var(--color-wht); 
    .ttl {
      text-align: center; font-size: 1.5em; margin-bottom: .8em; font-weight: 700;
      span {font-size: 1.5em; display: block; width: 43px; height: 43px; padding: 8px 0 0; margin: 0 auto .1em; background-color: var(--color-yel); border-radius: 50%;}
    }
    .img {width: 100%; border: 2px solid #fff;}
  }
}

.guide-outro .guide-intro-ttl { margin-bottom:.8em; margin-top: -1em; padding-top: 0; font-size: 1.25em; font-weight: bold;}
.guide-outro .guide-intro-ttl:before {display: none;}
.guide-intro-msg { text-align:center; font-size:1.5em; font-weight:bold; line-height:1.4;}
.guide-step { max-width:800px; width: 95%; margin:0 auto; }
.guide-step li + li { margin-top:7px; }



/*軽自動車専門店とは */
.con-box {
  >:nth-child(n+2):not(:last-child) { margin-bottom: 1.5em;}
}

.card-list {
  gap: .7em;
  li {
    padding: 1.5em; box-shadow: var(--shadow);
    .ttl { margin-bottom: .7em; font-size: 1.12em; color: var(--color-sub); font-weight: 700; text-align: center;}
    .txt { margin-block: unset; padding: .7em 1em; background-color: var(--color-crm);}
  }
  &.border {
    li {
      box-shadow: unset; border: 3px solid var(--color-grn); border-radius: 10px; padding: 1.5em; 
      .ttl { color: var(--color-wht); background-color: var(--color-grn); padding: .5em;}
      .txt { padding: 0 1em 1em; background-color: unset;}
    }
  }
  &.bg{
    li {box-shadow: unset;}
    .txt { padding: unset; background-color: unset;}
    &.l-orn {
      li {
        background-color: var(--color-l-orn);
      }
    }
    &.blue {
      li {
        color: var(--color-wht); background-color: var(--color-blu);
      }
    }
  }
}
.img-list {
  gap: 1em;
}
.bg-box {
  width: 100%; margin-inline: auto; padding: .7em 1em;
  &.crm { background-color: var(--color-crm);}
  &.wht { background-color: var(--color-wht);}
  &.l-gry { background-color: var(--color-l-gry);}
}
.con-list {
  > li{
    &:nth-child(n+2) {
      margin-top: 1.7em;
    }
  }
}

#reason {
  .low-price {
    gap: .5em;
    >li {
      border: 3px solid; border-radius:10px;
      .ttl { padding-block: .7em; font-size: 1.25em; color: var(--color-wht); font-weight: 700; text-align: center;}
      .txt { margin-block: unset;}
      &.our {
        border-color: var(--color-base);
        .ttl { background-color: var(--color-base);}
        .dtl {
          .dtl-ttl {
            color: var(--color-base);
          }
        }
      }
      &.customer {
        border-color: var(--color-l-grn);
        .ttl { background-color: var(--color-l-grn);}
        .dtl {
          .dtl-ttl {
            color: var(--color-l-grn);
          }
        }
      }
      .dtl {
        padding: .5em;
        li {
          &:nth-child(n+2) { margin-top: .7em;}
          .dtl-ttl { font-size: 1.1em; font-weight: bold;}
        }
      }
    }
  }
  .con-list {
    > li {
      display: flex; flex-wrap: wrap; gap: .5em; padding: 1em; background-color: var(--color-wht); box-shadow: var(--shadow);
      .txt-area {
        width: 100%;
        .bnr {
          li {
            width: fit-content; margin-inline: auto; padding: .5em; border: 2px solid var(--color-l-gry);
            a.flex { gap: .5em; align-items: center;}
            img { width: 100%; max-width: 250px;}
            .shop-name { display: block; color: var(--color-blu); font-weight: 700; }
          }
          &.flex {
            gap: .5em;
          }
        }
      }
      .slider,.image { width: 100%;}
    }
  }
}
dl.melit { margin:5px auto; height:140px; max-width: 1000px; position: relative;}
dl.melit > .item { position: absolute; top: 0; left: 0; right: 0; margin: auto;  width:8%; height:100%; padding-top:40px; font-size:1.125em; font-weight:700; text-align:center; background-color: var(--color-base); background-repeat:no-repeat; background-position:center 20px;  border-radius: 5px;}
dl.melit > .new,.melit .old { position: absolute; top: 0; width:45%; height:100%; padding: .8em; border-radius: 5px;}
dl.melit > .new { left: 0; background-color: var(--color-yel); color: var(--color-base);}
dl.melit > .old { right: 0; background-color: var(--color-l-gry);}

.kosyo dt { background-image:url(../img/about/kosho.svg); background-size: 60%; color: #fff; margin: 0 10px;}
.buhin dt { background-image:url(../img/about/buhin.svg); background-size: 60%; color: #fff;  margin: 0 10px;}
.tenken dt { background-image:url(../img/about/tenken.svg); background-size: 60%; color: #fff; margin: 0 10px;}
.sell dt { background-image:url(../img/about/sell.svg); background-size: 60%; color: #fff; margin: 0 10px;}

dl.melit_item { margin:0 auto 5px; height:40px; position: relative;}
dl.melit_item dt.new,dl.melit_item dt.old {width:45%; height:100%; padding: .5em 1em!important; font-size:1.25em; font-weight: 700; text-align: center; position: absolute; top:0;}

/* メンテナンス */
.maintenance-list {
  >li {
    display: flex; flex-wrap: wrap; justify-content: space-between; margin-bottom: 1em; gap: .5em; padding: 1em; background-color: var(--color-wht); box-shadow: var(--shadow); }
    .txt-area { width:100%;}
    .slider,.image { width: 100%;}
    .bnr {margin-bottom: 1em; gap: .5em;}
    .bnr li {width: 45%; gap: .5em; border: 1px solid #ccc;}
    .policy_link a {display: block; padding: .5em; width: 100%; text-align: center; background-color: var(--text-color); color: var(--color-wht);}
  }

.weithing li {width: 33.3%;}
.shaken_banner a {width:100%; border: 1px solid #ccc;}
.shaken_banner img {width:100%;}
.priceList { width:100%;}
.priceList p {margin-block:0;}
.priceList table { width:100%;}
.priceList td, .priceList th { padding:.5em 1em; border:1px solid #666; font-weight:normal; text-align:center; background:#fff; }

.link_txt { 
  display: inline-block; width: 100%;
  a {display: inline-block; width: 100%; padding: .3em 1em; text-align: center; background: var(--color-gry); color: var(--color-wht); font-weight: 700;}
}
.btn_arrow a {
  display: inline-block; background: var(--color-base); padding: .8em 2em; padding-right: 3em; color: var(--color-wht); position: relative; text-align: center; font-size: 1.5em; font-weight: 700; border-radius: 3em; margin: 0 auto;
  &::before {content: ""; background: url(../img/common/arrow_circle.svg) no-repeat left top / auto 100%; width:1.8em; height: 1.8em; position: absolute; right: .6em; top: .4em;}
}

/* 会社紹介 */
#company {
  #access {
    .shop_ttl{font-size: 1.5em; font-weight: 700; color: var(--color-base); margin-bottom: 1em;}
    .shop {
      gap: 1em;
      .dtl-wrap { display: flex; flex-direction: column-reverse;}
      .info {
        dd {
          font-size: 1.3em;
          .holiday { font-size: .9em;}
        }
      }
      address { margin-bottom: .5em; font-size: 1.2em; font-weight: 600;}
    }
  }
  .message {
    gap: 1em; max-width: 800px; margin:0 auto 3em; padding: 0 1.5em;
    .txt-box {
      .sub {font-size: 1.5em; font-weight: 700; color: var(--color-gry); font-style: italic;}
      .serif {
        margin-bottom: .5em; font-weight: 600; text-align: end;
        .name { padding-left: 1em; max-width: 180px; display: inline-block;}
      }
      .ttl { padding-left: .5em; font-size: clamp(20px,3vw,36px);; color: var(--color-base); font-weight: 700; line-height: 1.5; border-bottom: 2px solid;}
    }
  }
  .slogan {
    > li{
        padding: 1em 1.5em 2em; box-shadow: var(--shadow);
        .ttl-w-border {
          margin-block: .7em .5em; font-size: 1.5em; color: var(--color-base); font-weight: 700; text-align: center;
          &.mb-narrow { margin-block: .3em .2em;}
        }
        p { margin: unset;}
    }
    .slogan-num-list {
      > li {
        counter-incement: slogan-num; padding-left: 2.5em; position: relative; z-index: 0;
        &::before {
          z-index: -1; content: '-'counter(slogan-num)'-'; position: absolute; left: 0; font-size: 1.5em; color: var(--color-gry); font-family: "Roboto Condensed",sans-serif; font-style: italic;
        }
        &:nth-child(n+2) { margin-top: 1em;}
      }
    }
  }
}

.shop_box {
  max-width: 1000px; margin: 0 auto; 3em; padding-bottom: 3em; border-bottom: 2px dotted #ccc;
  .btn-wrap {margin-top: 2.5em;}
  .slider {max-width: 640px; margin: 0 auto;}
}
.route {
  gap: .5em; margin-block: 2em;
  > li { width: 100%;}
  .ttl { padding-left: .5em; font-size: 1.12em; color: var(--color-base); font-weight: 700; border-bottom: 1px solid;}
  .txt { margin-block: .5em 0;}
}

.thanks {
  .btn {padding: .3em 3em; margin-top: 3em;}
}

/* 買取査定 */
#purchase {
  .satei_bg {
    width: 100%; padding-block: clamp(30px,3vw,60px); background: url(../img/top/top_contact_bg.jpg) no-repeat; background-size: cover;
  }
  .satei-list {
    text-align: center; font-weight: 700; font-size: 1em; line-height: 1.6; padding: 0 0 1em; line-height: 1.6em;
    a.tel_num {font-size: 2.5em; line-height: 1.4em;}
    p {margin-block: .8em;}
    .yel {color: var(--color-orn);}
  .reserve_btn {background: var(--color-base); max-width: 500px; margin: 0 auto; border-radius: 10px; text-align: center; height: 80px;}
  .reserve_btn a {display: block; height:100%; padding-left: 1.5em; color: #fff; font-size: 1.5em; font-weight: 600; padding-top: .8em; position: relative;}
  .reserve_btn a::before {content:""; display: block; width: 1.5em; height: 1.5em; position: absolute; top:0; bottom: 0; left: 1em;  margin:auto; background: url(../img/top/reserve_icon.svg) no-repeat 100% / 100%;}
  .reserve_btn a span {display: block; font-size: .6em;}
  }
  .over-bg-gry {
  .satei-list,a.tel_num {color:var(--text-color);}
}
}

#purchase {
  .lead {
    gap: 1em; align-items: flex-end; margin-bottom: 2em; color: var(--color-wht);
  }
  .satei-list {
    margin-top: 1.5em; gap: 1em;
    > li {
      width: 100%;
      a {
        display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 75px; padding: 1em; font-size: 1.3em;color: var(--color-wht); font-weight: 700; border-radius: 5em;
      }
      &.form {
        a {
          background-color: var(--color-blu); position: relative;
          &::before {
            content: ''; position: absolute; top: 55%; right: 1.3em; translate: 0 -50%; rotate: 90deg; width: .8em; aspect-ratio: 1; background-color: var(--color-wht); clip-path: var(--arrow);
          }
        }
      }
      &.tel {
        a {
          padding-block: .5em; line-height: 1.3; background-color: var(--color-red);
          .yel { color: var(--color-yel);}
          em { display: block;}
        }
      }
    }
  }
  /* 買取事例 */
  .pex-list {
    overflow: hidden; position:relative;
    .item {
      margin-bottom: .5em; margin-inline: .5em; padding-bottom:.5em; box-shadow: var(--shadow);
      .pex-ttl {
        display: grid; align-items: center; min-height: 3.5em; font-size: clamp(12px,3vw,20px); color: var(--color-wht); line-height: 1.5; text-align: center; background-color: var(--color-base);
        p { margin-block: unset;}
      }
      :where(.price,.info) {
        margin-top: .7em; padding-inline: .5em;
      }
      .price {
        p { margin-block: unset;}
        .base {
          font-size: clamp(11px,2vw,14px); width: 100%;
        }
        .p-price {
          .font-en { font-size: 2em; color: var(--color-red); font-weight: 900;}
        }
        .up-price{
          align-self: center; padding-inline: .5em; font-size: .8em; color:var(--color-wht); line-height: 1.5; background-color: var(--color-red); border-radius: 3px;
        }
      }
      .info {
        font-size: clamp(10px,2vw,14px);
        > div { gap: .7em;}
        dt {
          width: 6em; text-align: center; background-color: var(--color-crm);
        }
        dd {
          flex: 1;
        }
      }
    }
  }
  /* 買取強化 */
  .pcar-list {
    gap: 1em;
    >li {
      width: calc((100% - 1em) / 2); padding-bottom:.5em; box-shadow: var(--shadow);background-color: var(--color-wht);
      .pcar-ttl {
        display: grid; align-items: center; min-height: 3.5em; font-size: clamp(12px,3vw,20px); color: var(--color-wht); line-height: 1.5; text-align: center; background-color: var(--color-base);
        p { margin-block: unset;}
      }
      .info {
        margin-top: .7em; padding-inline: .5em; font-size: clamp(10px,2vw,14px);
        > div { gap: .7em;}
        dt {
          width: 6em; text-align: center; background-color: var(--color-crm);
        }
        dd {
          flex: 1;
        }
      }
    }
  }
  .high-price-reason {
    .card-list {
      li {
        counter-incement: reason-num;
        .ttl {
          &::before {
            content: '\7406\7531\305D\306E'counter(reason-num); display: block; margin-bottom: -.5em; font-size: .8em;
          }
        }
      }
    }
  }
  .customer-image {
    .card-list {
      li {
        display: flex; align-items: center; justify-content: center; width: 100%; padding-top: 6em; font-size: 1.1em; font-weight: 700; position: relative;
        &::before {
          content: ''; position: absolute; top: .5em; left: 50%; translate: -50% 0;  width: 5.5em; aspect-ratio: 1; background-color: var(--color-pnk); mask-repeat: no-repeat; mask-position: center; mask-size: contain;
        }
        &.image-1 {
          &::before { mask-image: url(../img/purchase/ico_customer1.svg);}
        }
        &.image-2 {
          &::before { mask-image: url(../img/purchase/ico_customer2.svg);}
        }
        &.image-3 {
          &::before { mask-image: url(../img/purchase/ico_customer3.svg);}
        }
        .txt { padding: unset; text-align: center; background-color: unset;}
      }
    }
  }
  .flow {
    .card-list {
      gap:1em;
      li {
        position: relative;
        &:not(:last-child)::before {
          content: ''; position: absolute; bottom: -2.1em; left: 50%; translate: -50% 0; rotate: 90deg; width: 1em; aspect-ratio: 1; background-color: var(--color-l-orn); clip-path: var(--arrow);
        }
        .txt {
          margin-top: .5em; padding: .2em; background-color: unset;
        }
      }
    }
  }
}

/* サイトマップ */
.sitemap {
  li {
    border-bottom: 1px dashed var(--color-l-gry);
    a {
      display: block; padding: .5em;

    }
  }
}

/* クッキーポリシー */
#policy {
  .con-box {max-width: 1000px; margin: 0 auto clamp(30px, 8vw, 60px);}
  .sec_ttl {width: 100%; text-align: left; padding-left: .5em;
    &::before {display: none;}
  }
  .txt-box {max-width: 1000px; margin: 0 auto; border-top: 1px dotted #ccc; border-bottom: 1px dotted #ccc; padding: .5em;}
}
.privacy {
  .sec_ttl {
    font-size: clamp(16px,3vw,24px); width: 90%; display: inline-block; background: var(--color-orn); padding: .5em 2em; box-shadow: 3px 3px #999; margin: 0 auto 20px; color: var(--color-wht); position: relative;
  }
}

.cookie-policy {
  .con-list {
    counter-reset: con-num;
    .ttl {
      counter-incement: con-num;
      border-bottom: 2px solid var(--color-sub);
    }
    ol.paren { margin-top: 1em;}
  }
}

/* チラシ */
#flyer {
  .flyer-list {
    gap: 1em; margin-bottom: clamp(14px,3vw,28px); padding: 1em; background-color: var(--color-wht);
    li { margin-top: 2em; }
  }
}

.bnr-coupon {margin-bottom: 2em;}

.voice_list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1em;}
.voice_list li { position:relative; }
.voice_list li a { display:block; text-decoration:none; border-radius:5px 5px 0 0; }
.voice_list li .date { margin:0; padding:4px 0;
  text-align:center; color:#fff; font-size:13px; background: var(--color-base);
}
.voice_list li a figure { padding: 10px; background: var(--color-l-gry); transition:all .3s; -webkit-transition:all .3s; }
.voice_list li a:hover figure { opacity:0.7; }
.voice_list li .date { margin:0; padding:4px 0;
  text-align:center; color:#fff; font-size:13px; background: var(--color-base);
  border-radius:5px 5px 0 0;
}
.voice_list li a:focus { outline:none; }
.voice_list li img { max-width:100%; }

#myForm .submit {max-width:600px; margin: 0 auto; }

/* ================================================================
  レスポンシブ
=================================================================== */
/* 600以上(PC・タブレット) */
@media screen and (min-width: 600px) {

#myForm .btn-submit[value="戻る"] { order:-1; }

/* title */
.page-ttl {
  font-size: 2em;
  &::before {width: 50px; height: 50px; top: 15px;}
}
.sec_ttl {
  font-size: 1.875em; padding-top: 45px;
  &::before {width: 50px; height: 50px;}
}
.sec_ttl2 {
  font-size: 1.875em; padding-top: 45px;
  &::before {width: 50px; height: 50px;}
}

    /* スライダー */
    .slick-arrow {
      &.slick-prev {left: -2%;}
      &.slick-next { right: -2%;}
    }

   /* guide */
  .buy-list {
    gap: 1em;
    li {width: calc((100% - 3em) / 3);}
  }
  .guide-outro .guide-intro-ttl { margin-top: 0;}
  .guide-intro {
    padding-top: 60px;
    &::after { width: 220px; height: 215px; bottom: 0; right: 5px;}
  }
  .guide-intro-ttl {font-size:1.875em;}
  .guide-intro-txt { font-size:1.125em;}
  .guide-intro-img {text-align: center;}

  .use-list {max-width: 1000px; margin: 0 auto;}
  .use-list li {width: calc((100% - 2em) / 2);}

  .promise-list{
  gap: 1em;
  li {width: calc((100% - 3em) / 3);}
  }

  .flow-list .img { width:42%;}
  .flow-list .con { margin-left:2em;}

  .about-list > li {width: calc((100% - 1.5em) / 2);}

  .support-box .lead { width:55%; margin-right:5%; }
  .support-box .slider { width:40%; }
  .support-box .bnr { margin-top:2em; width:50%;}
  .hoken_bnr > li { width:60%; }
  .con-box {
    >:nth-child(n+2):not(:last-child) { margin-bottom: 2em;}
  }
  .card-list {
    &.col-3 {
      gap: 1em;
      li { width: calc((100% - 2em) / 3);}
    }
  }
  .card-list {
    &.col-2 {
      gap: 1em;
      li { width: calc((100% - 3em) / 2);}
    }
  }
  .img-list {
    gap: 1em;
    &.col-2 {
      li { width: calc((100% - 1em) / 2);}
    }
  }
  .bg-box {
    width: 90%; padding: .7em 1em; text-align: center;
  }
  .con-list {
    &.col2 {
      display: flex; flex-wrap: wrap; gap: 1em;
      li {
        width: calc((100% - 1em) / 2);
        &:nth-child(n+2) {
          margin-top: unset;
        }
      }
    }
  }

  /* 軽自動車専門店とは */

  .rec-kei-list {
    gap: .5em;
    li {
    width: calc((98% - 1em) / 3);
    }
  }

  #reason{
    .low-price {
      gap: 1em;
      >li {
        width: calc((100% - 1em) / 2);
        .dtl { padding: 1em;}
      }
    }
    .con-list {
      > li {
        gap: 1.5em;
        .txt-area {
          width: 60%;
          .bnr {
            &.flex.col-3 {
              gap: .5em;
              li { width: calc((100% - 1em) / 2);}
            }
            li { margin-inline: unset;}
          }
        }
        .slider,.image { width: calc(100% - 1.5em - 60%);}
      }
    }
  }

  /* 会社紹介 */
  #company {
    #access {
      .shop {
        .info {
          dd { font-size: 1.2em;}
        }
      }
    }
  }

  #history {
    th {width: 11em; text-align: right;}
  }

  .route {
    gap: 1.5em;
    > li { width: fit-content;}
  }
  .slogan {
    columns: 2;
    > li{
        padding: 1em 1.5em 1.5em; min-height: 200px;
      &:nth-child(n+2) {
        margin-top: 1em;
        &:not(:last-child) { margin-bottom: unset;}
      }
    }
    .slogan-num-list {
      > li {
        counter-incement: slogan-num; padding-left: 2em; position: relative; z-index: 0;
        &::before {
          z-index: -1; content: '-'counter(slogan-num)'-'; position: absolute; left: 0; font-size: 1.5em; color: var(--color-gry); font-family: "Roboto Condensed",sans-serif; font-style: italic;
        }
        &:nth-child(n+2) { margin-top: 1em;}
      }
    }
  }

  /* サイトマップ */
  .sitemap {
    width: 70%; margin-inline: auto; columns: 2;
  }

  /* クッキーポリシー */
  .cookie-policy {
    .con-list {
      .bg-box { text-align: start;}
    }
  }

  dl.melit { margin: 10px auto; height:120px;}
  dl.melit > .item { padding-top:80px;}
  dl.melit > .new,.melit .old { padding:30px 40px; }

  dl.melit_item { height:50px;}

/* お客様の声・納車式 */
#reason > .nousya #contents, #reason > .enquete #contents { margin-bottom:300px; }
#reason > .nousya #contents > section, #reason > .enquete #contents > section { margin-top: 40px; }

.voice_list { grid-template-columns: repeat(4, 1fr);}

/* 960px以上(PC) */
@media screen and (min-width: 960px) {

}

/* ================================================================
  タブレット
=================================================================== */
/* 1024以下 (タブレット横以下) */
@media screen and (max-width: 1024px) {

}

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

}

/* ================================================================
  スマホ
=================================================================== */
@media screen and (max-width: 599px){
  .voice_list { grid-template-columns: repeat(2, 1fr); gap:10px; }

  .img_list {display: flex; flex-wrap: wrap; justify-content: center;}
  .img_list li {width: 50%;}


  dl.melit > .item {padding-top:36px; font-size:1em; line-height:1.4;}
  dl.melit > .new,.melit .old { padding:.7em; line-height: 1.4;}

  dl.melit_item { height:40px;}
  dl.melit_item dt.new,dl.melit_item dt.old { padding: .5em; font-size:1.125em;}

}