@charset "utf-8";


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

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

/* スライドダー */
.slick-arrow {
  &::before {
    content: ''; position: absolute; top: 0; left: 0; width: 1em; aspect-ratio: 1; clip-path: var(--arrow);
  }
  &.slick-prev {
    left: -5.5%;
    &::before { rotate: -180deg;}
  }
  &.slick-next { right: -5.5%;}
}
.slick-dots{
  bottom: -20px;
  li.slick-active button:before { color: var(--color-l-orn);}
}

/* title */
.page-ttl {
  display: flex; flex-direction: column-reverse; padding-block: 1.2em; font-size: clamp(20px,3vw,38px); font-weight: 700; text-align: center; line-height: 1.5; height: 4em; position: relative; background-color :var(--color-l-gry); z-index: -2;
  &::before {
    content: ''; position: absolute; top: 50%; left: 50%; translate: -50% -50%; width: 3.5em; aspect-ratio: 1; background: url(../img/common/logo_wht.svg) no-repeat center / contain; z-index: -1;
  }
  .sub {
    margin-block: 0 -.3em; font-size: .5em; font-weight:500;
  }
}

.sec_ttl {padding: .5em 2em; min-width: 14em; font-size: clamp(18px,3vw,30px); font-weight: 700; text-align: center; position: relative; background-color: var(--color-l-blu); display: inline-block; margin: 0 auto 1em;
  &::before {position: absolute; inset: -6px 6px 6px -6px; border: 2px solid #070707; content: '';}
}

/* 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; background-color:var(--color-wht); border-radius: 3px;
  }
  a{ color: var(--color-l-orn); text-decoration:none; background-color:var(--color-wht); border:1px solid var(--color-l-orn); }
  a:hover{ background-color:var(--color-l-gry); border:1px solid var(--color-l-orn); }
  span.current{ color:var(--color-sub); background-color:var(--color-l-orn); border:1px solid var(--color-l-orn); }
  span.disabled { border:1px solid #d0cac8; color:#d0cac8; }

}
/* form */
.tab-nav { 
  overflow:hidden; max-width:600px; margin:2rem auto 2rem; 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-blu); }
    }
    &.current a {background-color:var(--color-base); color:var(--color-wht); }
  }
}

.btn-submit {
  min-width: 170px; padding: 1em; font-weight: 700; color: var(--color-wht); background-color: var(--color-d-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 ---------------- */
/* 軽自動車専門店とは */
.con-box {
  >:nth-child(n+2):not(:last-child) { margin-bottom: 1.5em;}
}

.card-list {
  gap: .7em;
  li {
    padding: 1em; box-shadow: var(--shadow);
    .ttl { margin-bottom: .7em; font-size: 1.12em; color: var(--color-base); font-weight: 700; text-align: center;}
    .txt { margin-block: unset; padding: .7em 1em;}
  }
  &.border {
    li {
      box-shadow: unset; border: 2px solid var(--color-base);
      .ttl { color: var(--color-wht); background-color: var(--color-base);}
      .txt { padding: unset; 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: .5em;
  padding: .5em;
}

.lead {font-size: 1.25em; font-weight: 600;}

.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;
    }
  }
}

#about .title_lead { margin-bottom: 3em; }

/* 選ばれる理由 */
#reason {
  .page-ttl { padding-block: 4.2em 1.2em; }
  .low-price {
    gap: .5em;
    >li {
      border: 2px solid;
      .ttl { padding-block: .3em; font-size: 1.25em; color: var(--color-wht); font-weight: 700; text-align: center;}
      .txt { margin-block: unset;}
      &.our {
        border-color: var(--color-grn);
        .ttl { background-color: var(--color-grn);}
        .dtl {
          .dtl-ttl {
            color: var(--color-grn);
          }
        }
      }
      &.customer {
        border-color: var(--color-blu);
        .ttl { background-color: var(--color-blu);}
        .dtl {
          .dtl-ttl {
            color: var(--color-blu);
          }
        }
      }
      .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%;}
    }
  }
}
.weithing li {width: 33.3%;}

/* 来店予約 */
#reserve {
  .page-ttl { padding-block: 4.2em 1.2em}
  .submit.flex { gap: 1.5em;}
  .btn-submit { min-width: 300px; padding: .8em; font-size: 1.6em;}
}
.bnr_reserve { margin: 2em auto; }

/* 買取査定 */
#purchase01 { overflow: hidden; }


/* 会社紹介 */
#company {
  #access {
    .shop {
      gap: 1em;
      .dtl-wrap {}
    }
  }
.slider {
  li.item {width: 50%;}
}
  .message {
    gap: 1em; margin: 0 auto;
    .txt-box {
      margin-bottom: 2em;
      .ttl { padding-left: .5em; font-size: clamp(18px,3vw,24px); color: var(--color-base); font-weight: 700; line-height: 1.5; border-bottom: 2px solid;}
    }
    .image {
      display: flex; flex-direction: column-reverse;
      figcaption {
        margin-bottom: .5em; font-weight: 600; text-align: end;
        .name { padding-left: .5em; font-size: 1.5em;}
      }
    }
  }
  .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-increment: 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;}
      }
    }
  }
}
.route {
  gap: .5em;
  > 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;}
}

/* 買取査定 */
#purchase {
  .satei_bg {
    width: 100%; padding-block: clamp(30px,3vw,60px); background: url(../img/purchase/satei_bg.jpg) no-repeat; background-size: cover;
  }
  .satei-list {
    text-align: center; font-weight: 700; font-size: 1em; line-height: 1.6; color: var(--color-wht); background: #19243a; padding: 1.6em; line-height: 1.6em;
    a.tel_num {color:var(--color-wht); font-size: 1.5em;}
    p {margin-block: .5em;}
  .reserve_btn a {display: inline-block; background: var(--color-yel); padding: .6em 3em; color: var(--color-base); position: relative; padding-left: 4em; font-size: 1.125em;}
  .reserve_btn a span {display: block; line-height: 1.2;}
  .reserve_btn a:before {content: ""; background: url(../img/common/icon-b-mail.svg) no-repeat 100% / 100%; width:1.5em; height: 1.5em; position: absolute; left: 2.2em; top: 1;}
  }
}
  /* 買取事例 */
  .pex-list {
    .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 {
          width:100%;
          font-size: clamp(11px,2vw,14px);
        }
        .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-increment: 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: 6em; height: 6em; background-repeat: no-repeat;
        }
        &.image-1::before { background: url(../img/purchase/ico_customer1.png) no-repeat 100% / 100%;}
        &.image-2::before { background: url(../img/purchase/ico_customer2.png) no-repeat 100% / 100%;}
        &.image-3::before { background: url(../img/purchase/ico_customer3.png) no-repeat 100% / 100%;}
        .txt { padding: unset; text-align: center; background-color: unset;}
      }
    }
  }
  .flow {
    .card-list {
      gap:3em;
      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 {padding: .5em; border-bottom: 1px dashed var(--color-base);}

/* クッキーポリシー */
.cookie-policy {
  .con-list {
    counter-reset: con-num; 
    .ttl-bg {
      counter-increment: con-num;
      &::before {
        content: counter(con-num)'.'; margin-right: .7em;  font-family: "Roboto Condensed",sans-serif;;
      }
    }
    ol.paren { margin-top: 1em;}
  }
}


/* ================================================================
  レスポンシブ
=================================================================== */
/* 600以上(PC・タブレット) */
@media screen and (min-width: 600px) {
  /* スライダー */
  .slick-arrow {
    &.slick-prev {left: -2%;}
    &.slick-next { right: -2%;}
  }

  /* 軽自動車専門店とは */
  .con-box {
    >:nth-child(n+2):not(:last-child) { margin-bottom: 2em;}
  }
  .card-list {
    &.col-3 {
      gap: 1em;
      li { width: calc((100% - 2em) / 3);}
    }
  }
  .img-list {
    padding: 0; gap: 0;
    &.col-2 {
      li {padding: 1em; width: calc((100% - 1em) / 2);}
    }
    &.col-3 {
      li { width: calc((100%) / 3);}
    }
    img {width: 100%;}
  }
  .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;
        }
      }
    }
  }
.weithing li {width: 16.6%;}

  /* 選ばれる理由 */
  #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) / 3);}
            }
            li { margin-inline: unset;}
          }
        }
        .slider,.image { width: calc(100% - 1.5em - 60%);}
      }
    }
  }

  /* 会社紹介 */
  #company {
    #access {
    }
    .message {
      margin: 0 auto 50px; max-width: 900px; width: 100%;
      .txt-box { width: 100%;}
      figcaption {margin-top: .5em; font-size: 1.5em;
        .neme {font-size: 1.5em;}
      }
    }
  }

  .route {
    gap: 1.5em;
    > li { width: fit-content;}
  }
  .slogan {
    columns: 2;
    > li{
        padding: 1em 1.5em 1.5em;
      .ttl-w-border {
      }
      &:nth-child(n+2) {
        margin-top: 1em;
        &:not(:last-child) { margin-bottom: unset;}
      }
    }
    .slogan-num-list {
      > li {
        counter-increment: 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;}
      }
    }
  }
.slider {
  li.item {width: 25%;}
}

  /* 買取査定 */
  #purchase {
    .satei-list { 
      >li {
        width: 42%;
      }
    }
    /* 買取事例 */
    .pex-list {
      .item {
        .price {
          padding-inline: .7em;
          row-gap: .5em;
          .p-price {
            .font-en { font-size: 3em;}
          }
        }
      }
    }
    .satei-list {
      font-size: 1.25em;
      .reserve_btn a {font-size: 1.5em;}
    }

    /* 買取強化 */
    .pcar-list {
      >li {
        width: calc((100% - 3em) / 4); 
      }
    }
    .customer-image {
      .card-list {
        li { width: calc((100% - 2em) / 3);}
      }
    }
    .flow {
      .card-list {
        li {
          display: grid; width: calc((100% - 6em) / 3);
          &:not(:last-child)::before {
            top: 50%; right: -2.1em; bottom: unset; left: unset; translate: 0 -50%; rotate: unset; 
          }
        }
      }
    }
  }
/* サイトマップ */
.sitemap {
  width: 70%; margin-inline: auto; columns: 2;
}

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

}

/* 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){
/* 軽自動車専門店とは */
  #about .page_lead { text-align: start; }

/* 来店予約 */
#reserve { 
  .flo-nav {
    .stock.sp_only,.contact.sp_only { display: none;}
    .pagetop{ bottom: 17.33vw;}
  }
  .submit.flex .btn-submit{ min-width: 150px; font-size: 1.4em;}
}

}