@charset "utf-8";

/* 検索BOX ---------------- */
.searchBox {
  margin-block:6% 4%; padding:15px 0; border:3px solid var(--color-base); border-radius:10px;
  > form { position:relative; }
  fieldset { width:min(100%,360px); border:none;
    legend { color:var(--color-base); font-size:1.125em; font-weight:bold; line-height:1; }
    select { width:100%; padding:3px 10px; font-family:inherit; background-color:#fff; border:1px solid #ccc; border-radius:3px; }
    &.range select { max-width:46%; }
  }
  .searchBtn {
    display:block; position:relative;
    color:#fff; font-size:15px; font-weight:bold; font-family:inherit;
    border:none; border-radius:5px; background:var(--color-l-orn); cursor:pointer;
    &::before { content:'';
      position:absolute; background:var(--color-wht);
      mask-image:url(../img/common/ico_search.svg);
      mask-repeat:no-repeat; mask-position:center; mask-size:contain;
    }
  }
}

/* タイプ別 */
.car-type {
  margin-top: clamp(30px,4vw,60px); padding: max(5%,14px); background-color: #fee835; border-radius: 2.25em;
  >* { width: fit-content; margin-inline: auto;}
  &:where([open]) {
    summary { margin-bottom: max(5%,16px);}
    .content {
      display: block;
    }
  }
  summary {
    display: block; cursor: pointer;
    &::-webkit-details-marker { display: none;}
  }
  .content {
    display: none; overflow: hidden;
    .link-list {
      flex-direction: row; justify-content: center; gap: 1.5em;
    }
  }
}

/* 絞り込み */
.typeBtn { margin-bottom: 3em;}
.typeBtnList {
  display: grid; grid-template-columns: repeat(5,1fr); gap: .93em;
}


/* 支払総額関連 */
.price_total {
  margin:0; font-size:min(3.6vw,16px); font-weight:bold; text-align:right; line-height:1.2;
  > em { font-family:'Helvetica','Arial',sans-serif; font-size:2em; color:var(--color-red); }
  .label { }
  .manen { font-size:.9em; }
  .soldout { font-size:1.8em; }
}
dl.price_cost {
  display:grid; width:fit-content; margin-inline:auto 0;
  grid-template-columns:5em 1fr; grid-column-gap:10px;
  font-size:.9em; letter-spacing: .01em; line-height: 1.6; text-align:right; }

/* シンプル車両情報 */
.carinfo {
  display:grid; grid-template-columns:5em 1fr;
  grid-row-gap:3px; grid-column-gap:10px;
  margin-top:.2em; font-size:.9em;
  dt { text-align:center; background-color:var(--color-crm); }
}


/* 在庫ページ ---------------- */
#stock {
  .page-ttl { padding-block: 4.2em 1.2em; }
  figure.image { line-height:0; }
  .order {
    .current { color:var(--color-base); text-decoration:none; }
  }
  .rowMax { font-size:1.6em; }

  .pagination { margin-block:min(6%,20px); .disabled { display:none; } }

  .carContact { margin-top:auto; padding-inline:.6em; text-align:center;
    li + li { margin-top:.5em; }
    .tel > a {
      display:inline-block; padding-left:1.1em; font-size:1.6em; color:var(--color-base); position:relative;
      &::before {
        content:''; position:absolute; top:.2em; left:0;
        width:1em; height:1em; background:var(--color-base);
        mask-image:url(../img/common/ico_tel.svg);
        mask-repeat:no-repeat; mask-position:center; mask-size:contain;
      }
    }
    .btn {
      width:100%; padding-inline:1em 2em; border-radius:10px;
      > span { display:block; }
    }
  }

  /* その他のラインナップ */
  .others .ttl-bg { margin-block:1.5em .75em; }
  .otherList {
    display:grid; grid-template-columns:repeat(2, 1fr);
    grid-column-gap:4%; grid-row-gap:2em;
    .cname { font-size:1.2em; }
    .price_total { margin-right:5px; > em { font-size:1.6em } }
    dl.price_cost { margin-right:5px; }
    .btn { display:block; width:fit-content; margin-inline:auto; }
  }
}
#stockList + .pagination { margin-bottom:8%; }

/* stockList 在庫一覧 --------------------------- */
#stockList { margin-top:2em;
  display:grid; grid-template-columns:repeat(2, 1fr);
  grid-column-gap:2%; grid-row-gap:2em;
  > li {
    display:flex; flex-direction:column; padding-bottom:.6em; border-bottom:1px solid #ddd; border-inline:1px solid #ddd; border-radius:10px 10px 0 0;
    .cname {
      /*min-height:5.5em;*/ display:flex; align-items:center;
      margin-inline:-1px; padding:.5em; color:var(--color-wht); line-height:1.4; background-color:var(--color-base); border-radius:8px 8px 0 0;
      > span {
        em { letter-spacing:-.01em; }
        .maker { font-size:.8em; }
        .grade { font-size:.8em; font-weight:normal; display:-webkit-box; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 2; }
      }
    }
    .label { margin-block:.4em; gap:.2em;
      > li { padding-inline:.5em; color:#fff; font-size:.8em; line-height:1.7; border-radius:5px; }
      .store { background-color:var(--color-l-orn);  }
      .unused { background-color:#F37322; }
      .l-used { background-color:#219B35; }
      .used-pickup { background-color:#4087C5; }
      .used { background-color:var(--color-base); }
    }
    .image { }
    .data {
      padding-block:.2em .5em; padding-inline:.6em;
    }
  }
}

/* zaiko 詳細 --------------------------- */
#zaikoDetail { position:relative;
  .carName {
    width:100%; margin-block:2em 1em; padding:.6em 1em; font-size:1.125em; font-weight:bold; background:#f6f6f6; border:1px solid #dcdcdc; }

  .lBox { width:min(100%,640px); }

  /* slick高さ調節 */
  .slick-initialized .slick-slide .img { height:258px; }
  .slick-slide p { font-size:.9em; line-height:1.4; }

  /* slick矢印 */
  #sliderInner { position:relative; }
  #arrow {
    position:absolute; top:50%; left:0; right:0; height:0;
    .slick-arrow {
      top:50%; width:29px; height:80px; z-index:999; opacity:1;
      text-indent:-9999px; background:rgba(255,255,255,.9); border:none;
      &:hover { opacity:0.7; }
      &.slick-disabled { background:rgba(255,255,255,.5); }
      &::before {
        position:absolute; top:50%; left:auto; right:10px; margin-top:-6px;
        content:""; width:12px; height:12px;
        border-top:3px solid var(--color-sub);
        border-right:3px solid var(--color-sub);
        transform:rotate(45deg);
        background:transparent; clip-path:none;
      }
      &.slick-prev::before { right:auto; left:10px; }
    }
    .slick-prev { left:0; }
    .slick-next { right:0; }
  }

  /* slickPager */
  #slidePager {
    margin-block:.5em;
    > ul {
      display:grid; grid-template-columns:repeat(6, 1fr); gap:5px;
    }
  }

  .price.flex { justify-content: flex-end; margin-bottom:1em; font-size:16px; line-height:1.2; }
  .price.flex .label { font-size:.8em; }
  .price.flex em { font-size:1.5em; font-family:'Helvetica','Arial',sans-serif; }
  .price.flex > li { display:flex; gap:.5em; }
  .price.flex .total { align-items: baseline; justify-content: flex-end; width:100%; margin-bottom:.4em; border-bottom:2px solid #dcdcdc; }
  .price.flex .total em { font-size:2em; color:#da263c; }
  .price.flex .total .label { margin-right: 1em;}
  .price.flex .def { font-size:.9em; }
  .price.flex .def .manen { font-size:.9em; }
  .price.flex .base { padding-right:1em; }
  .price.flex .tax { font-size:.85em; }

  ul.law { margin: .3em 0 .8em .2em;
    > li {
      padding-left:1.3em; font-size:.8em; line-height:1.4; position:relative;
      &::before {
      position:absolute; left:0; top:0; width:1em; height:100%;
      display:block; content:"";
      background:url(../img/common/ico-tag.svg) no-repeat center / contain; }
    }
    > li + li { margin-top: .5em;}
  }

  .data { width:100%; margin-bottom:9px; text-align:center;
    &:last-child { margin-bottom:10px;}
    th { width:50%; font-size:13px; background:#f6f6f6; border:solid 1px #dcdcdc; padding:4px 0 2px;}
    td { padding:5px 0 4px; background:#FFF; border:solid 1px #dcdcdc; }
  }

  .carContact {
    width:100%; margin:30px auto 1em; padding:25px 20px; text-align:center; background:#f6f6f6;
    li + li { margin-top: 1.5em; padding-top: 1em; border-top: 1px dashed var(--color-base);}
    .note { margin-block: unset; font-size: .8em; color: var(--color-red); line-height: 1.6;}
    .ttl-w-border { font-size: 1.2em; color: var(--color-blu);}
    :where(hgroup,.ttl-w-border:not(:has(+.note))){ margin-bottom: 1em;}
    .tel { margin-bottom: 1em;}
  }

  .ttl-l-line { margin-block:1.5em .5em; font-size:1.2em; }

  .vehicle { width:100%; margin:0 auto 1.5em;
    tr > * { padding:5px 10px 3px; text-align:left; background:#FFF; border:solid 1px #dcdcdc; }
    th { width:15%; font-size:13px; background:#f6f6f6;}
  }
  .equip {
    display:grid; grid-template-columns:repeat(2, 1fr);
    > li { padding:5px 8px; border:1px solid #dcdcdc; }
  }

  .contactCom {
    width:100%; margin-block:min(10%,50px) 0; padding:.7em; text-align:center; font-weight:bold; color:var(--color-wht); line-height:1.5; background:var(--color-base); border-radius:10px 10px 0 0; position:relative;
    &::before {
      position:absolute; bottom:-.7em; left:50%; margin-left:-.5em;
      content:""; width:1em; height:.8em; background-color:var(--color-base);
      clip-path: polygon(0 0, 50% 100%, 100% 0); }
  }

  #toiawase {
    margin-bottom:2em; padding:1em; background-color:var(--color-l-gry);
    .contactForm { dt { margin-top:.5em; font-weight:bold; } }
  }
}

/*来店予約カレンダー*/
.reserve { width:100%; }
#rdate { padding-inline:20px; margin-block: 1em 2em; }
#rdate .slick-arrow { font-size: 0; line-height: 0; position: absolute; top: 50%; padding: 0;
  display:block; width:10px; height:10px;
  border-top:2px solid #32170d;
  border-right:2px solid #32170d; }
#rdate .slick-arrow::before { content: none;  }
#rdate .slick-arrow::after { content: none; }
#rdate .slick-prev { left: 5px; transform:rotate(-135deg); }
#rdate .slick-next { right: 5px; transform:rotate(45deg) }
#rdate button { display:block; padding-inline: 0 6px; width:100%; color:#333; text-align:center; background-color:transparent; font-size: 1.2em; border: 0; cursor: pointer; }
#rdate button:disabled { cursor:auto; }
#rdate .week { display:block; font-size: .8em; }
#rdate .week.holiday { color:#f55; }
#rdate .week.saturday { color:#0af; }
#rdate .date { display:block; padding-block:.5em 2em; border:1px solid #ddd; border-radius:3px; position:relative; }

#rdate .date.holiday { background:#fee; }
#rdate .date.saturday { background:#eef9ff; }
#rdate .no .date { background: #f7f7f7;}

#rdate .date::after {
  content:""; display:block; width:1.2em; height:1.2em;
  position:absolute; left:0; right: 0; bottom:.5em; margin-inline: auto;
  background:no-repeat center / 90%;
}
#rdate .slick-slide { margin:0; }
#rdate .ok .date::after { background-image:url("../img/common/mark-ok.svg"); }
#rdate .no .date::after { background-image:url("../img/common/mark-no.svg"); }


/* ================================================================
  レスポンシブ
=================================================================== */
/* 600以上(PC・タブレット) */
@media screen and (min-width:600px) {
  /* 検索BOX */
  .searchBox {
    padding:20px;
    > form { padding-right:180px; }
    .searchBtn {
      position:absolute; top:50%; right:10px; translate:0 -50%;
      padding-top:66px; width:140px; height:106px;
      transition:all .5s;
      &:hover { background:var(--color-base); }
      &::before {
        top:9%; left:50%; translate:-50% 0; width:4em; height:4em; }
    }
  }

  /* 在庫一覧 */
  #stockList {
    grid-template-columns:repeat(3, 1fr); grid-column-gap:2%;
    > li {
      .cname { padding-inline:.8em; }
    }
  }
  #stock .otherList { grid-template-columns:repeat(4, 1fr); grid-column-gap:2%; }

  /* zaiko 詳細 */
  #zaikoDetail {
    .lBox { margin-right:4%; }
    .rBox { flex:1 }
    .slick-initialized .slick-slide .img { height:468px; }
    #slidePager > ul { grid-template-columns:repeat(10, 1fr); }

    .equip {
      grid-template-columns:repeat(4, 1fr);
      > li {
        &:not(:nth-child(4n+1)) { border-left:none; }
        &:nth-child(n+5) { border-top:none; }
      }
    }

    #toiawase .contactForm {
      width:60%; margin-top:1em; margin-inline:auto;
      display:grid; grid-template-columns:10em 1fr;
      dd { padding-top:.5em; }
    }
  }
}

/* 960px以上(PC) */
@media screen and (min-width:960px) {
  #stockList {
    grid-template-columns:repeat(4, 1fr);
  }
}

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

}

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

}

/* ================================================================
  スマホ
=================================================================== */
@media screen and (max-width:599px){
  /* 検索BOX */
  .searchBox {
    .searchBtn {
      width:80%; height:auto; margin:10px auto 0;
      padding-block:.7em; padding-left:2em;
      &::before {
        top:50%; left:calc(50% - 3.5em); translate:0 -50%;
        width:1.8em; height:1.8em; }
    }
  }

  /* タイプ別 */
  .car-type {
    border-radius: 10px;
    .content {
      .link-list { gap: .7em;}
    }
  }

  /* 絞り込み */
  .typeBtnList {
    gap:.2em;
  }


  /* 在庫ページ */
  #stock {
    .pagination :where(a,span){ width:28px; line-height:28px; }
  }

  /* 在庫一覧 */
  #stockList { margin-top:0;
    > li {
      .cname {
        min-height:5.8em;
        > span > .grade { -webkit-line-clamp: 3; }
      }
      .carContact {
        .tel, .contact { display:none; }
        .detail { margin-top:0; }
        .btn { padding-block:.2em; }
      }
      .carinfo { margin-top:.5em; font-size:.85em; }
    }
  }

  /* zaiko 詳細 */
  #zaikoDetail {
    .rBox { width:100%; }
    .vehicle { width:100%; margin:10px auto;
      tr {
        display:flex; flex-wrap:wrap;
        > * { padding:5px 10px 3px; text-align:left; border:solid 1px #dcdcdc; box-sizing:border-box; }
        &:first-child > *:nth-child(n+3) { border-top:none; }
        &:not(:first-child) > * { border-top:none; }

        th { width:40%; font-size:13px; background:#f6f6f6;}
        td { width:60%; border-left:none; &:empty { display:none; } }
      }
    }
    .equip > li {
      &:nth-child(2n) { border-left:none; }
      &:nth-child(n+3) { border-top:none; }
    }
    .carContact {
      :where(hgroup,.ttl-w-border:not(:has(+.note))){ margin-bottom: .5em;}
      .tel { margin-bottom: .5em;}
    }
  }
}