@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 ---------------- */
.contents { width:min(96%,1200px); margin-inline:auto; }
.searchBox {
  border:3px solid var(--color-base); border-radius:10px;
  > form { position:relative; }
  .filter {
    dt { padding:.3em .5em; line-height:1.4; background-color:#f9f9f9;
      &:first-child { border-radius:8px 8px 0 0; }
    }
    dd {
      width:100%; padding:3px 10px; font-family:inherit; background-color:#fff;
      select { width:100%; padding:3px 10px; font-family:inherit; background-color:#fff; border:1px solid #ccc; border-radius:3px; }
      label { font-size:.9em; input { margin-right:3px; } }
      label + label { margin-left:.75em; }
      &.range select { width:44%; }
    }
  }

  .searchBtn {
    display:block; position:relative;
    width:calc(100% - 1em); margin:1em .5em; padding-block:.5em; color:#fff; font-size:15px; font-weight:bold; font-family:inherit;
    border:none; border-radius:5px; background:var(--color-base); 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 {
  font-size:1.05em; font-weight:bold; text-align:center;
  > em { font-family:'Helvetica','Arial',sans-serif; font-size:1.8em; color:#c00; }
}
p.price_cost { text-align:center; font-size:.85em; line-height:1.4; }
.medama-list {
  p.price_total > em {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; }
}

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

.mark {
  &.new { background-color:var(--color-base); }
  &.update { background-color:var(--color-sub); }
  &.update_price { background-color:var(--color-sub2); }
}

button.favorite {  }
button.favorite::before { content:""; display:block;
  background:var(--color-base);
  mask-image:url(../img/stock/favo-plus.svg);
  mask-repeat:no-repeat; mask-position:center; mask-size:contain; }
button.favorite.del::before { mask-image:url(../img/stock/favo-minus.svg); }


/* 店舗情報関連 */
.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); }
  &.favorite { border:2px solid var(--color-base);
    &.add { color:var(--color-base); background-color:#fff; }
    &.del { color:#454545; background-color:#eee; border-color:#999;
      &::before { background-color:#454545; }
    }
  }
  &: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;
  }
  &.tel::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; }
  #result { position:relative;
    .sort_txt { margin-bottom:.3em; color:var(--color-base); font-size:1.2em; font-weight:bold; text-align:center; }
    .sort {
      display:flex; margin-bottom:1em; gap:5px;
      > li > a {
        display:block; padding:.2em 1.2em;
        background-color:var(--color-l-gry); border-radius:5px;
      }
      .current { color:#fff; background-color:var(--color-sub); }
    }
    > .num { margin-block:0; }
    .rowMax { font-size:1.6em; }
    .fav {
      position:absolute; right:3px; bottom:.3em; width:2em; margin-block:0;
      .num { position:absolute; top:-3px; right:-3px; display:block; width:1.5em; font-size:.8em; line-height:1.3; aspect-ratio:1; text-align:center; color:#ffF; background-color:var(--color-base); border-radius:50%; }
    }
  }

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

  .reason {
    dt { position:relative; cursor:pointer; font-feature-settings: "palt";
      padding:.6em; font-size:1.1em; font-weight:700; line-height:1.4; border-bottom:1px solid var(--color-l-gry);
      > em { color:var(--color-base) }
      &::after {
        content:""; position:absolute; top:50%; right:.5em;
        width:.5em; aspect-ratio:1; transform:rotate(-45deg) translateY(-50%);
        border-left:2px solid var(--color-sub); border-bottom:2px solid var(--color-sub);
        transition:all .3s;
      }
      &.open::after { transform:rotate(135deg) translateY(-50%); }
    }
    dd { display:none; padding:1em .75em; line-height:1.5; background-color:var(--color-l-gry); }
  }

  /* その他のラインナップ */
  .others { margin-block:min(8%,50px) 10%;
    .ttl-bg { margin-block:2em .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:1em;
  display:grid; grid-template-columns:repeat(2, 1fr);
  grid-column-gap:4%; grid-row-gap:2em;
  > li { min-width:0; border:1px solid #ddd;
    display:grid; grid-template-rows:subgrid; grid-row:span 5; gap:0;
    .maker { padding:.1em .3em; text-align:right; position:relative;
      >em { padding-inline:.3em; font-size:.9em; font-weight:500; border:1px solid var(--text-color); border-radius:3px; }
    }
    .mark { display:inline-block; position:absolute; top:.4em; left:.3em;
      padding:.3em .5em; color:#fff; font-size:.85em; line-height:1; border-radius:3px;
    }
    > a { display:block; }
    .cname {
      width:calc(100% - 2.2em); margin-block:.3em; line-height:1.4;
      .name { display:block; font-size:1.2em; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
      .grade { display:block; width:100%; font-size:.9em; font-weight:500; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
    }
    .image {
      img:not([src*="obi"]) { aspect-ratio: 1/.75; object-fit: cover; object-position: top;}
    }
    .data { min-width:0; padding-inline:.6em; position:relative; }
    p.info { margin-block:0; font-size:.85em; line-height:1.4;
      > span { display:inline-block; }
      > span:not(:last-child)::after { content:"｜"; }
    }
    .ico { margin:.3em;
      display:grid; grid-template-columns:repeat(5, 1fr); gap:2%;
      > li { text-align:center; }
    }
    .priceData { margin:.2em; padding:0 .3em .3em; background-color:#f6f6f6; }
    .soldout { display:grid; padding-top:.3em; place-items:center; }
  }

  button.favorite { position:absolute; top:0; right:0; cursor:pointer; width:2.7em; height:2.7em; padding:8px; background-color:inherit; }
  button.favorite::before { width:100%; height:100%; }

  &.none { display:block; > li { border:none; } }
}

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

  ul.mark { margin-bottom:.5em; gap:.3em;
    > li { padding:.3em .5em; color:#fff; font-size:.85em; line-height:1; border-radius:3px;
      &.unused { background-color:var(--color-yel); }
      &.used { background-color:var(--color-grn); }
    }
  }
  .price.flex { align-items:flex-end;
    padding-bottom:.5em; margin-bottom:.5em; font-size:1.15em; border-bottom:2px solid var(--color-gry);
    .label { font-size:.75em; }
  }
  .price_cost { font-size:.8em; color:#666; }

  /* #slider */
  #slider { position:relative; }
  #slider .slider-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);
  }
  div[class*="swiper-button"]::before {
    display:block; content:"";
    position:absolute; top:50%; width:.8em; aspect-ratio:1;
    border-top:2px solid #fff;
    border-right:2px solid #fff;
    }
  .swiper-button-next { right:0 }
  .swiper-button-next::before {
    left:.2em; transform:translateY(-50%) rotate(45deg); }
  .swiper-button-prev { left:0 }
  .swiper-button-prev::before {
    right:.2em; transform:translateY(-50%) rotate(-135deg); }

  .car-main-slider {
    div[class*="swiper-button"] {
      position:absolute; top:40%; width:20px; height:110px; z-index:1;
      padding:0; outline:none; appearance:none; border:none; cursor:pointer;
      background-color:rgb(243, 152, 0,.6);
    }
  }
  .car-main-slider .cap { font-size:.9em; color:#555; line-height:1.3; }

  .car-thumb-slider { margin-top:.5em; cursor:pointer;
    .swiper-slide { padding:2px; }
    .swiper-slide-thumb-active img { border:1px solid #c00; }
    div[class*="swiper-button"]::before {border-color:#444; }
  }

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

  .ico { margin:.3em 0;
    display:grid; grid-template-columns:repeat(6, 1fr); gap:2%;
    > li { text-align:center; }
  }

  .kome.small { line-height:1.5; }
}

/*来店予約カレンダー*/
#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%; margin-bottom:.5em; 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:50%; bottom:1em; translate:-50% 0;
      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 { margin-bottom:min(5%,30px);
  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:#f0f0f0; }
.contact-area .shop-link { margin-bottom:1em; }


/* ================================================================
  レスポンシブ
=================================================================== */
/* 600以上(PC・タブレット) */
@media screen and (min-width:600px) {
  /* ジャンル別検索 */
  .typeBtnList {
    grid-template-columns: repeat(6,1fr);
  }
  #stock {
    .reason {
      dd > div {
        display:grid; grid-template-columns:35% 1fr; gap:20px; padding:10px;
      }
    }
  }

  /* 在庫一覧 */
  .stockList {
    grid-template-columns:repeat(3, 1fr); grid-column-gap:20px;
    &.other { grid-template-columns:repeat(4, 1fr); }
  }

  /* zaiko 詳細 ------------------------ */
  .carInfo .cname { margin-top:.5em; font-size:1.6em; }
  ul.eqData { grid-template-columns:repeat(5, 1fr); font-size:.8em; }

}

/* 960px以上(PC) */
@media screen and (min-width:960px) {
  /* 在庫一覧 */
  .contents { display:grid; grid-template-columns:250px 1fr; align-items:start; gap:20px; }
  #side { order:-1; position:sticky; top:0; }

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

      .info1 { grid-area:1 / 2 / 2 / 3; }
      .img   { grid-area:1 / 1 / 4 / 2; padding-right:20px; }
      .info2 { grid-area:2 / 2 / 3 / 3; }
      .shop  { grid-area:3 / 2 / 4 / 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 {
    padding-bottom:1em; background:#fff;
    .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; }
    .reason dd > div > p { margin-block:.75em 0; }
  }

  /* 在庫一覧 */
  #stock.index {
    #side { display:none; z-index:1000;
      position:fixed; inset:0; overflow-y:auto;
      padding:2vw 2vw 3em; background-color:rgba(0,0,0,.3);
    }
    .flo-nav { display:none !important; }
    .flo_search {
      position:fixed; bottom:0; left:0; right:0; z-index:999;
      padding-block:.9em; font-size:1.2em;
      color:#fff; line-height:1.2; text-align:center; background-color:var(--color-base);
      .ico { display:inline-block; width:1.2em; vertical-align:bottom; aspect-ratio:1; background:url(/img/common/icon-f-search.svg) no-repeat center / contain; }
    }
  }
  .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; }

  }

  .car-thumb-slider {
    padding-inline:16px; position:relative;
    div[class*="swiper-button"] {
      top:0; margin-top:0;
      width:16px; height:100%; background-color:#fff; }
    .swiper-button-prev {  }
    .swiper-button-next {  }
  }
  .specDataBox .spec {
    order:1;
    > div { font-size:.85em; }
  }


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

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

  /*来店予約*/
  #rdate { font-size:.9em; button { padding:0 2px; } }

}