@charset "utf-8";

.subTitle { margin:min(8%,50px) 0 .8em; padding-bottom:.3em; font-size:1.2em;  border-bottom:2px solid var(--color-base); }

/* 検索BOX ---------------- */
.searchBox {
  margin-block:6%; padding:15px 0; border:3px solid var(--color-base); border-radius:10px;
  > form { position:relative; }
  fieldset { width:min(100%,320px); 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-sub); 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;
    }
  }
}
/* ジャンル別検索 */
.typeBtnList {
  display: grid; grid-template-columns: repeat(3,1fr); gap: 1em;
  margin-bottom: min(9%, 50px);
}


/* 支払総額関連 */
p.price_total { margin-block:7px 0; font-size:1.05em; font-weight:bold; text-align:center; }
p.price_total > em { font-family:'Helvetica','Arial',sans-serif; font-size:1.8em; color:#c00; text-shadow: 2px 2px 3px #ffff1a, -2px 2px 3px #ffff1a, 2px -2px 3px #ffff1a, -2px -2px 3px #ffff1a, 2px 0px 3px #ffff1a, 0px 2px 3px #ffff1a, -2px 0px 3px #ffff1a, 0px -2px 3px #ffff1a; }
p.price_cost { text-align:center; font-size:.85em; line-height:1.4; }

.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; }
ul.law { margin-bottom:.5em; margin-left:.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; }
  }
}

/* 店舗情報関連 */
.carInfo .shop-area { padding:1em; border:solid 1px #ddd; }
.shop-name {
  margin-top:0; font-size:1.1em; font-weight:bold;
  > .name { display:block; padding-bottom:.5em; color:var(--color-base); }
  a.telno { display:block; padding-left:1.5rem; font-size:1.5em; font-family:'Helvetica','Arial',sans-serif; letter-spacing:.02em; position:relative;
    &::before {
      position:absolute; top:50%; left:0; margin-top:-.5em;
      content:""; display:inline-block; width:1em; height:1em;
      background:url(../img/common/ico_tel.svg) no-repeat center / contain;
    }
  }
}
.shop-link > li:nth-child(n+2) { margin-top:1em; }
.shop-btn { position:relative;
  display:block; width:100%; padding:.5em 0 .5em 2em; font-size:18px; font-weight:bold; text-align:center; text-decoration:none; color:#fff; background-color:var(--color-base); border-radius:5px;
  &.tel { background-color:var(--color-grn); }
  &.reserve { background-color:var(--color-blu); }
  &:hover { color:#fff; opacity:.9; }
  &::before {
    position:absolute; left:.8em; top:50%; transform:translateY(-50%);
    content:''; display:block; width:1.5em; height:1.3em;
    background:no-repeat center / contain;
  }
  &::before { background-image:url(../img/common/ico-tel-wht.svg); }
  &.reserve::before { background-image:url(../img/common/ico-cal-wht.svg); width: 1.6em; height: 1.5em; }
  &.contact::before { background-image:url(../img/common/icon-f-mail.svg); }
}

/* 在庫ページ ---------------- */
#stock {
  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; border-radius:8px;
      > span { display:block; }
    }
  }

  /* その他のラインナップ */
  .others { margin-block:min(8%,50px) 10%;
    .ttl-bg { margin-block:1.5em .75em; }
  }
  .otherList {
    display:grid; grid-template-columns:repeat(2, 1fr); gap:2em 4%;
    font-size:.9em;
    .cname { font-size:1.1em; text-align:center; line-height:1.4; }
    .grade { font-size:.8em; font-weight:normal; }
    .price_total { margin-right:5px; > em { font-size:1.6em } }
    dl.price_cost { margin-right:5px; }
    dl.info {
      display:grid; grid-template-columns:5.5em 1fr; gap:5px .6em;
      margin-top:.5em; font-size:.9em; line-height:1.5;
      dt { text-align:center; background-color:var(--color-l-gry); }
    }
    .btn { display:block; width:88%; margin-top:.65em; margin-inline:auto; padding-block:0; }
  }
}
#stockList + .pagination { margin-bottom:8%; }

/* stockList 在庫一覧 --------------------------- */
#stockList { margin-top:2em;
  display:grid; grid-template-columns:repeat(2, 1fr);
  grid-column-gap:4%; grid-row-gap:2em;
  > li {
    display:grid; grid-template-rows:subgrid; grid-row: span 4; row-gap:0;
    padding-bottom:.6em; border-bottom:1px solid #ddd; border-inline:1px solid #ddd; border-radius:10px 10px 0 0;
    .cname {
      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 { line-height:1.2;
        em { letter-spacing:-.01em; }
        .maker { font-size:.9em; }
        .grade { font-size:.9em; font-weight:normal; }
      }
    }
    .image {
      img:not([src*="obi"]) { aspect-ratio: 1/.75; object-fit: cover; object-position: top;}
    }
    .data { padding-block:.2em .75em; padding-inline:.6em; }
    dl.info {
      display:grid; grid-template-columns:5.5em 1fr; gap:5px .6em;
      margin-top:.5em; font-size:.9em; line-height:1.5;
      dt { text-align:center; background-color:var(--color-l-gry); }
    }
  }
}

/* zaiko 詳細 --------------------------- */
.carInfo {
  max-width:960px; margin:0 auto 7%;
  .maker { display:inline-block; margin-right:.5em; padding:.1em .5em; font-size:.8em; color:#fff; background-color:var(--color-base); }
  .cname { margin-bottom:.3em; font-size:1.5em; font-weight:bold; border-bottom:3px solid var(--color-base); position:relative; }
  .grade { margin-block:auto 1em; font-size:.8em; line-height:1.3; color:#444; }
  .pr { line-height:1.4; }
  .price.flex { font-size:1.15em; .label { font-size:.75em; } }
  .price_cost { font-size:.8em; color:#666; }

  /* slic */
  #slider { position:relative;
    .slick-num {
      position:absolute; top:5px; right:5px; z-index:1;
      padding:0 5px; color:#fff; font-size:.8em;
      background-color:rgba(0,0,0,.7);
    }
    .slick-arrow {
      position:absolute; top:40%; width:20px; height:80px; z-index:999; opacity:1;
      text-indent:-9999px; background:rgba(255,255,255,.8); border:none;
      &.slick-disabled { background:rgba(255,255,255,.5); }
      &::before {
        position:absolute; top:50%; left:auto; right:5px; margin-top:-6px;
        content:""; width:10px; height:10px;
        border-top:3px solid var(--color-sub);
        border-right:3px solid var(--color-sub);
        transform:rotate(45deg);
        background:transparent; clip-path:none;
      }
      &.prev-arrow::before { right:5px; transform:rotate(-135deg); }
    }
    .prev-arrow { left:0; }
    .next-arrow { right:0; }
  }
  #sliderPager { margin-block:.5em; }
}

/*来店予約カレンダー*/
#rdate { padding-inline:20px;
  .slick-arrow {
    display:block; width:10px; height:10px;
    border-top:2px solid #333; border-right:2px solid #333;
    &::before { content:""; }
  }
  .slick-prev { left:5px; transform:rotate(-135deg); }
  .slick-next { right:5px; transform:rotate(45deg) }

  button { display:block; width:100%; color:#333; text-align:center; background-color:transparent; }
  button:disabled { cursor:auto; }
  .week { display:block; font-size:.8em; }
  .week.holiday { color:#f55; }
  .week.saturday { color:#0af; }
  .date { display:block; padding-block:.5em 3em; font-size:.95em; border:1px solid #ddd; border-radius:3px; position:relative;
    &::after {
      content:""; display:block; width:1.2em; height:1.2em;
      position:absolute; left:0; bottom:1em;
      background:no-repeat center / contain;
    }
  }
  .date.holiday { background:#fee; }
  .date.saturday { background:#eef9ff; }

  .ok .date::after { background-image:url("../img/common/mark-ok.svg"); }
  .no .date { background: #f7f7f7; &::after { background-image:url("../img/common/mark-no.svg"); } }
}

/* 装備関連 */
.dl-def {
  line-height:1.3; border-top:1px solid #dcdcdc; border-left:1px solid #dcdcdc;
  dt { padding:1em .8em 0; font-size:.85em; background:#f6f6f6; border-bottom:1px solid #dcdcdc; }
  dd { padding:.75em; font-weight:bold; background:#fff; border-bottom:1px solid #dcdcdc;
    &last-child { border-right:1px solid #dcdcdc; }
    &.com { font-weight:normal; font-size:.9em; line-height:1.5; }
  }
  > div { display:flex;
    > dt { width:max(20%,6em); }
    > dd { flex:1; }
  }
}
ul.eqData {
  display:grid; grid-column-gap:3px; grid-row-gap:3px; font-size:.85em;
  > li { padding:.85em; line-height:1.5; font-weight:bold; border:1px solid #dcdcdc;
    &.wide { grid-column:span 2; }
  }
}

/*お問い合わせ*/
.contact-area { margin-top:6%; padding:5% 10px; background:var(--color-l-blu); }
.contact-area .shop-link { margin-bottom:1em; }


/* ================================================================
  レスポンシブ
=================================================================== */
/* 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; }
    }
  }

  /* ジャンル別検索 */
  .typeBtnList {
    grid-template-columns: repeat(6,1fr);
  }

  /* 在庫一覧 */
  #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 詳細 ------------------------ */
  .carInfo .cname { margin-top:.5em; font-size:1.6em; }
  .spec {
    display:flex; flex-wrap:wrap; margin-bottom:1em; text-align:center; font-size:.9em;
    > div {
      display:block; width:50%; margin-block:0 10px !important; border:1px solid #dcdcdc;
      &.wide { width:100%; }
      &:nth-child(2n) { border-left:none; }
      > * { padding:9px 4px; line-height:1.2; }
      > dt { background-color:#f6f6f6; border-bottom:1px solid #dcdcdc; }
    }
  }
  ul.eqData { grid-template-columns:repeat(5, 1fr); font-size:.8em; }

}

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

  /* zaiko 詳細 ------------------------ */
  #zaikoDetail {
    .specDataBox {
      display:grid; align-items:start;
      grid-template-columns:590px 1fr;
      grid-template-rows:repeat(3, auto) 1fr;

      .price { grid-area:1 / 2 / 2 / 3; }
      .law   { grid-area:2 / 2 / 3 / 3; }
      .img   { grid-area:1 / 1 / 5 / 2; padding-right:20px; }
      .info  { grid-area:3 / 2 / 4 / 3; }
      .shop  { grid-area:4 / 2 / 5 / 3; }
    }
    .shop-area { margin-bottom:auto; }
  }
  dl.specData > dt { width:13.33%; }
  dl.specData > dd { width:20%; font-size:.95em; }
  dl.specData > dd:nth-child(6n) { border-right:1px solid #dcdcdc; }

  /* slickPager */
  #sliderPager { display:grid; grid-template-columns:repeat(10, 1fr); gap:5px; }

}



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

}

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

  /* zaiko 詳細 ------------------------ */
  dl.specData > dt { width:17%; }
  dl.specData > dd { width:33%; }
  dl.specData > dd:nth-child(4n) { border-right:1px solid #dcdcdc; }

}

/* ================================================================
  スマホ
=================================================================== */
@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; }
    }
  }

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

  /* 在庫一覧 */
  #stockList {
    > li {
      .price_total { font-size:1em; }
    }
  }

  /* zaiko 詳細 ------------------------ */
  #zaikoDetail {
    #slider .slide-arrow { height:80px; }
    #sliderPager .slick-list { padding: 0 10% 0 0!important; }
    #sliderPager .slick-slide { padding:2px; border:1px solid #fff; }

  }

  .specDataBox .spec {
    order:1; display:flex; flex-wrap:wrap; width:100%; margin-block:.75em;
    > div { width:25%; margin-top:0 !important; font-size:.75em; line-height:1.4; text-align:center;
      &:not(.sp_none) { display:block; }
      &:not(:first-child) { border-left:1px solid #dcdcdc; }
      > dd { font-weight:bold; }
    }
  }

  dl.specData > dt { width:30%; }
  dl.specData > dd { width:70%; border-right:1px solid #dcdcdc; }

  .eqData { grid-template-columns:repeat(2, 1fr); }

  /*来店予約*/
  #rdate { margin-inline:-10px; padding-inline:15px;
    button { padding:0 2px; }
  }

}