@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-sub);
  &.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 選ばれる理由
================================================================== */
#reason01 .img_list { margin-top: 1em; }

/* 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:var(--color-l-base); 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), .about-list li:nth-child(3) {background:var(--color-l-blu2);}

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

.carlifesupport { width: 100%; max-width: 1000px; margin-block: 2em; }

.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 軽未使用車とは
================================================================== */
.about_flex { }
.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: #a8e5eb;}

.rec-about-img { width:48%; overflow:hidden; box-shadow: 8px 8px 0 var(--color-sub); }
.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; }
.rec-about-txt .txt { margin: 0; }

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

#about05 .sec_ttl2 { margin-top: 2em; }
#about05 .quality > .txt { margin-top: 0; }

/* 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 {}

.message-box { width: 100%; max-width: 1000px; gap: 1%; margin-inline: auto; }
.message-box .l-box { width: 77%; }
#message .lead { margin-block: 1.5em 1em; text-align: center; font-size: 1.5em; color: var(--color-base); font-weight: bold; }
#message .lead-txt { width: 100%; max-width: 1000px; margin-inline: auto; text-align: center; }
.message-box .l-box .message_list { width: 95%; margin-block: 0 2em; padding: 2em 2.5em .5em 3.5em; background: var(--color-pnk); border-bottom: 2px solid var(--color-base); border-top: 2px solid var(--color-base); }
.message-box .l-box .message_list li { margin-bottom: 1.5em; line-height: 1.4; }
.message-box .r-box { width: 22%; }
.message-box .r-box > p { margin-top: .3em; }

#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 .pnk { color: var(--color-base); }
#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 { gap: 2%; }
.staff-list li { width:25%; margin-bottom:40px; }
.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 { margin-bottom: .3em; line-height:1.6; font-size:1.25em; }
.staff-list .name .txt { display:block; font-size:.75em; border-top: 1px solid var(--color-base); }

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


/* FAQ - Standard */
.faq{
  --faq-bg:#ffffff;
  --faq-border:#e7e7e7;
  --faq-text:#111;
  --faq-sub:#555;
  --faq-accent:#111;

  background:var(--faq-bg);
  color:var(--faq-text);
  padding: clamp(24px, 3vw, 48px) 16px;
}

.faq__inner{
  max-width: 960px;
  margin: 0 auto;
}

.faq__title{
  font-size: clamp(20px, 2.2vw, 28px);
  line-height: 1.2;
  letter-spacing: .02em;
  margin: 0 0 16px;
}

.faq__list{
  display: grid;
  gap: 12px;
}

/* item */
.faq__item{
  border: 2px solid var(--faq-border);
  border-radius: 12px;
  overflow: clip;
  background: #fff;
}

.faq__q{
  list-style: none;
  display: grid;
  grid-template-columns: 28px 1fr 18px;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  cursor: pointer;
  user-select: none;
}

/* hide default marker */
.faq__q::-webkit-details-marker{ display:none; }

.faq__q:focus-visible{
  outline: 2px solid #000;
  outline-offset: 2px;
  border-radius: 10px;
}

.faq__q-icon,
.faq__a-icon{
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 14px;
  background: var(--color-base);
  color: var(--color-wht);
  margin-top: 5px;
}

.faq__q-text{
  font-size: 16px;
  line-height: 1.5;
}

/* chevron */
.faq__chev{
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--color-base);
  border-bottom: 2px solid var(--color-base);
  transform: rotate(45deg);
  transition: transform .2s ease;
  justify-self: end;
}

.faq__item[open] .faq__chev{
  transform: rotate(-135deg);
}

/* answer */
.faq__a{
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 12px;
  padding: 0 16px 16px;
}

.faq__a-head{ padding-top: 2px; }

.faq__a-body{
  color: var(--faq-sub);
  font-size: 15px;
  line-height: 1.8;
}

.faq__a-body p{
  margin: 10px 0 0;
}

.faq__a-body p:first-child{
  margin-top: 7px;
}

.faq__note{
  color:#666;
  font-size: 0.95em;
}

/* subtle divider when opened */
.faq__item[open] .faq__q{
  border-bottom: 1px solid var(--faq-border);
}

/* motion safe */
@media (prefers-reduced-motion: reduce){
  .faq__chev{ transition: none; }
}




/*軽自動車専門店とは */
.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 {
  #contents {
    margin-top: 40px;
    section:first-of-type { margin-top: 0; }
    .lead {
      gap: 2em; align-items: end; margin: 2.5em 10px min(7%, 30px);
      > div:first-child { width: min(80%, 750px); }
      .point { width: 20%; }
    }
    .satei_list {
      column-gap: 1em; max-width: 900px; margin: 2em auto;
      > li {
        width:32%;
        > a {
          display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
          width:100%; height:100%; padding:.5em 1em .6em .5em; position:relative;
          color:#fff; font-size:clamp(17px,2.3vw,22px); line-height:1.2; text-align:center; font-weight:400;
          background:var(--color-base);border-radius:10px;
          .yel { color: var(--color-lyel); }
        }
      }
      > li > a::before {
        position:absolute; top:31%; right:7%; content:"";  width:1.2em; height:1.2em; background:url(../img/common/icon-arrow-wht.svg) no-repeat center / contain; transform:rotate(180deg);
      }
      > li.tel {
        > a { padding:.5em .5em .5em 1em; background:var(--color-sub); }
        > a::before { top:50%; left:15%; right:auto; background-image:url(../img/h_tel.svg); transform:translateY(-50%); }
        > a > span { display:block; width:100%; font-size:0.75em; }
        em { font-family:'Open Sans', sans-serif; }
      }
    }

    /* 3つの理由 */
    .reason_box {
      figure { margin-block: 2.5em 3.5em; }
      th { background: var(--color-sub); }
      .tbl2 { margin: 0 auto; padding: 1em; background: #fff;  }
      .tbl2 li { margin-bottom: 0.5em; }
      .bg_orange { background: var(--color-base); }
      .scrollWrap > .scroll:before { top: 10px; left: 15px; }
      .tbl2 thead th:nth-child(n+3) { background: #939393; }
    }
    .about-list li:nth-child(3) { background: var(--color-l-base);}

    /* tbl */
    .reason_box .tbl2 { margin: 0 auto; padding: 1em; background: var(--color-wht); }

    /*買取事例*/
    .pex_list li.slick-slide { margin-inline: .5em;}
    .pex_img  { width:100%;}
    .pex_data { flex:1; padding:0 25px 0 20px; }
    .pex_ttl { display: flex; align-items: center; justify-content: center; min-height: 65px; padding: .5em; color:#fff; font-size:1.1em; font-weight:bold; line-height:1.3; background-color: var(--color-base); border-radius: 10px 10px 0 0 ; }
    .pex .h2_ttl + p { margin:-1em 0 2em; }
    .pex_price  {
      align-items:center; margin:0; text-align:right; font-weight:bold;
      .base { width:100%; font-size:.85em; font-weight:normal; text-align:left; }
      em { font-size:1.8em; font-family: 'Helvetica','Arial',sans-serif;}
      .up { padding:0 .5em; font-size:.85em; color:#fff; background-color:#e80303; border-radius:5px; }
      .up > em { font-size:1.3em; }
    }

    .pex_info {
      display:flex; flex-wrap:wrap; font-size: .9em;
      > dt { width:5em; }
      > dd { width:calc(100% - 5em); padding:0 1em; }
    }

    /* Arrows */
    .pex .slick-prev, .pex .slick-next {
      display:block; position:absolute; top:50%; transform: translateY(-50%); cursor:pointer;
      width:40px; height:40px; padding:0;
      font-size:0; line-height:0; border:none; border-radius: 20px; outline:none;
      background:var(--color-sub);
    }
    .pex .slick-prev:hover:before, .pex .slick-prev:focus:before,
    .pex .slick-next:hover:before, .pex .slick-next:focus:before { opacity:1; }
    .pex .slick-prev.pex .slick-disabled:before,
    .pex .slick-next.pex .slick-disabled:before { opacity:.25; }

    .pex .slick-prev:before, .pex .slick-next:before {
      content:""; display:block; position:absolute; top:50%;
      width:8px; height:8px; margin-top:-4px;
      border-top:2px solid #fff;
      border-right:2px solid #fff;
      }
    .pex .slick-prev { right:100%; z-index:1; }
    .pex .slick-prev:before { left:15px; transform:rotate(-135deg); }
    .pex .slick-next { left:100%; }
    .pex .slick-next:before { left:15px; transform:rotate(45deg); }


    /* Dots */
    .pex .slick-dotted .slick-slider { margin-bottom:30px; }
    .pex .slick-dots {
      display:block; position:absolute; bottom:-25px;
      width:100%; margin:0; padding:0; list-style:none; text-align:center;
      }
    .pex .slick-dots li {
      display:inline-block; position:relative; cursor:pointer;
      width:20px; height:20px; margin:0 3px; padding:5px;
      }
    .pex .slick-dots li button {
      display:block; width:100%; height:100%; cursor:pointer;
      font-size:0; line-height:0; border:0; border-radius:50%;
      color:transparent; outline:none; background:var(--color-base); opacity:.25;
    }
    .pex .slick-dots .slick-active button,
    .pex .slick-dots li button:hover,
    .pex .slick-dots li button:focus { outline:none; opacity:1; }

    /*買取強化車種*/
    .pcar_list > li { width:23%; background: #fff; border-radius:10px; }
    .pcar_list > li:nth-child(n+5) { margin-top:5%; }
    .pcar_ttl { display: flex; align-items:center; justify-content:center; min-height:2.8em; padding:.5em; color:#fff; font-size:1.1em; line-height:1.4; text-align:center; background:var(--color-base); border-radius: 10px 10px 0 0;}
    .pcar_info { display:flex; padding:1em 0 .8em .8em; flex-wrap:wrap; font-size:.8em;}
    .pcar_info {
      > * { margin-bottom:5px; }
      > dt { width:5em; color:#333; text-align:center; background-color:#f6f6f6; }
      > dd { width:calc(100% - 5em); padding:0 1em; }
    }

    .pflow_list {
      margin-top:min(10%,60px);
      > li { width:32%; margin:0; padding:1.2em 1.2em; text-align:center; border:2px solid #ccc; }
    }

    /* 査定の流れ */
    .flow-list li {
      display: flex; flex-direction: column; padding: 1.5em; background: var(--color-wht);
      &:not(:last-child):after { content: none; }
      .h3_purchase02 { padding-bottom: .8em; }
      img { display: inline-block; margin-top: auto; }
    }
  }
}

/* サイトマップ */
.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-sub); 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; }

@media screen and (max-width: 599px) {
  .about_flex { flex-direction: column; }
  .rec-about-img { width: 100%; }
  .rec-about-txt { width: 100%; }
  #about02 .about_flex { flex-direction: column-reverse; }
  #about02-2 .rec-about-img { margin-top: 3em; }
  #about02-2 .rec-about-txt { padding-top: 0; }
  .about-list li:nth-child(3) {background:var(--color-l-base);}
  .about-list li:nth-child(4) { background: var(--color-l-blu2); }

  /* staff */
  .staff-list { width: 96%; margin-inline: auto; }
  .staff-list li { width:49%; margin-bottom: 0; }
  .staff-list .name { font-size:1.1em; }

  #message .lead { width: 92%; margin-inline: auto; }
  #message .lead-txt { width: 92%; }
  .message-box .l-box { width: 100%; }
  .message-box .r-box { width: 50%; margin-inline: auto; }
  .message-box .l-box .message_list { width: 92%; margin-inline: auto; padding: 1.8em 1.5em .5em 2.5em; }
  .message-box .l-box p:last-of-type { width: 92%; margin-inline: 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: 10px;}
}
.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;}
      }
    }
  }

  .message-box .l-box .txt { width: 95%; padding-inline: 2.5em; }


  /* サイトマップ */
  .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);}

/* 買取 */
#purchase{
  .about-list > li { width: calc((100% - 3em) / 3); }
  .flow-list > li { width: calc((100% - 3em) / 3); }
  .pex { max-width: 1000px; }
  .slick-arrow {
    &.slick-prev { left: -4%;}
    }
  }
}
/* 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;}

  .about_flex { flex-direction: column; }


  #purchase {
    #contents {
      margin-top: 30px;
      .lead {
        margin-top: 2.5em;
        > div:first-child { width: 90%; }
        .point { width: 60%; }
      }
      .satei_list > li { width: 100%; margin-bottom: 1em; min-height: 4em; }
      .pcar_list > li { width: 48%; }
      .pex_ttl {font-size: 1.4em;}
      .pex .slick-prev, .pex .slick-next {width:30px; height:30px;}
      .pex .slick-prev { right:93%; z-index:1; }
      .pex .slick-next { left:93%; }
      .pex .slick-prev:before { left:12px;}
      .pex .slick-next:before { left:10px;}
      .con-box.pex { margin-bottom: 3.5em;}
      .scrollWrap > .scroll > .hscroll { width:550px; }
      .reason_box .tbl2 { padding: 2em 0 1em; }


    }
  }

}