@charset "utf-8";
/* CSS Document */
/* zaiko
================================================================== */

#zaiko #wrapper, #zaikoDetail #wrapper { overflow:visible; }
.pagettl { border-top:none; }

.feature-slider { margin-inline:0; padding-inline:25px; margin-bottom:0 !important; }

/* 検索関連 --------------------------- */
.search .ttl-def { font-size:1.35em; }
.search-quick-box { grid-template-columns:1fr 25%; grid-template-rows: repeat(2, 1fr); }
.search-quick-box .cbtn { font-size:1em; border-radius:5px; }
.search-quick-box .c1 { order:1; }
.search-quick-box .c1::before { left:1em; }
.search-quick-box .c2 { order:3; }
.search-quick-box .c2::before { left:.75em; }
.search-quick-box .sbtn {
  display:grid; place-items:center; padding-top:0;
  grid-row:auto / span 2; order:2; border-radius:5px; }
.search-quick-box .sbtn::before { display:none; }

/* 検索BOX */
#searchBox .modal-wrap { top:0; left:0; transform:none; width:100vw; max-height:100%; }
#searchBox .modal-wrap > .modal-close { background-color:var(--color-base); }
#searchBox .ttl { background-color:var(--color-base); }

#searchBox .search-wrap { padding-bottom:4em; }
#searchBox .submit {
  position:fixed; bottom:0; left:0; width:100%;
  background-color:rgba(0, 0, 0, .8); }
#searchBox .submit input { min-width:inherit; margin:0; padding:.5em; }

.search-filter dt { font-size:1.1em; }
.search-filter dd:not(.range) select { width:100%; }
.search-filter dd.range select { width:calc(50% - .8em); }

/*メーカー・車種・グレード*/
.maker-list { grid-template-columns:repeat(6, 1fr); gap:5px; font-size:.9em; }
.maker-list .name { margin-left:-1.6em; }

.search-filter .checkbox-list { display:grid; grid-template-columns:repeat(2, 1fr);}
.search-filter .checkbox-list { border-top:1px solid #dcdcdc; }
  .search-filter .checkbox-list > li { border-bottom:1px solid #dcdcdc; }
  .search-filter .checkbox-list > li:nth-child(2n+1) { border-right:1px solid #dcdcdc; }
  .search-filter .checkbox-list:has(> li:only-child) { display:block; }
  .search-filter .checkbox-list:has(> li:only-child) li { border-right:none; }

  .search-filter .checkbox-list label { padding-block:.5em; padding-right:0; }
  .search-filter .checkbox-list input[type="checkbox"] { margin-right:0; }

  /*色*/
  .search-filter .color label {
    grid-template-columns:1.1em 26px 1fr;
    height:3.4em; padding-block:0; line-height:1.2; }
  .search-filter .color-txt { display:contents; }


/* 検索(ピックアップ) */
.list-search { gap:.5em; font-size:.9em; }
.list-search .btn-border::after { display:none; }
.list-search.price { grid-template-columns:repeat(4, 1fr); }

.list-search.use { grid-template-columns:repeat(3, 1fr); }
.list-search.use > li a:not(.second) { padding-block:1.4em; }

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


/* 台数・ページ移動関連 */
.page-move { margin:1em 0; }
.page-move .num { font-size:.75em; }
.pagination {  }
.pagination a, .pagination span { margin:2px; width:24px; line-height:24px; }
.pagination .n2, .pagination .l2 { display:none; }


/* 絞り込み */
#sortBox { position:sticky; top:0; z-index:99; }
.filter { display:none; }
.filter-list {
  display:grid; grid-template-columns:repeat(3, 1fr);
  margin-top:.5em; margin-inline:-4vw; }
.filter-list > li > a { display:block; position:relative;
  padding-block:.5em; padding-right:1em; text-align:center;
  color:#fff; background-color:var(--color-zaiko);
 }
.filter-list > li > a.is-open { background-color:var(--color-sub3); }
.filter-list > li > a::after {
  position:absolute; top:50%; right:7%; transform:translateY(-50%);
  display:block; content:''; width:1.3em; height:1.3em;
  background:no-repeat center / contain; }
.filter-list > li + li { border-left:1px solid #fff; }
.filter-list a.filter::after {
  background-image:url(../img/common/ico-filter-wht.svg); }
.filter-list a.sort::after {
  background-image:url(../img/common/ico-sort-wht.svg); }
.filter-list a.favorite::after {
  background-image:url(../img/common/ico-favo-wht.svg); }

.sort-list { display:none; margin-inline:-4vw; padding:.5em 1em; border-bottom:2px solid #ccc; font-size:.9em; background-color:#fff; }
.sort-list > div { display:grid; grid-template-columns:6em repeat(2, 1fr); align-items:center; margin-block:.5em; }
.sort-list dd > a { display:block; padding-block:.3em; color:var(--color-gry4); text-align:center; border-block:1px solid #dcdcdc; }
.sort-list dd:nth-of-type(1) > a { border-inline:1px solid #dcdcdc; border-radius:4px 0 0 4px; }
.sort-list dd:nth-of-type(2) > a { border-right:1px solid #dcdcdc; border-radius:0 4px 4px 0; }
.sort-list dd.current > a { background-color:var(--color-sub2); border-color:var(--color-sub2); }


.image .ribbon { width:30px; height:30px; }

/* zaikoList 一覧 ---------------------- */
.categoryList > li { width:100%; }

#zaikoList > li {
  margin-bottom:20px; padding:10px;
  grid-template-columns:38% 1fr;
  grid-template-rows:repeat(6, auto);

}
#zaikoList > li .cname { grid-area:1 / 1 / 2 / 3; font-size:1.2em; }
#zaikoList > li .grade { grid-area:2 / 1 / 3 / 3; }
#zaikoList > li .image { grid-area:3 / 1 / 4 / 2; }
#zaikoList > li .price_law { grid-area:3 / 2 / 5 / 3; padding-left:10px; position:relative; }
#zaikoList > li .data  { grid-area:5 / 1 / 6 / 3; font-size:.8em; margin-top:1em; }
#zaikoList > li .link  { grid-area:6 / 1 / 7 / 3; }
#zaikoList > li .appraisal { grid-area: 4 / 1 / 5 / 2; padding-block:0; align-self:end; }


#zaikoList .price .def,
#zaikoList .price .price { display:block; }
#zaikoList .price .label br { display:none; }
#zaikoList .total .label { align-self:flex-end; padding-bottom:.4em; }
#zaikoList .mtype { position:absolute; top:-3px; left:6px; padding-inline:.3em; font-size:.7em; line-height:1.3; }


#zaikoList .data > div { width:33.33%; }
#zaikoList .data > div:not(:nth-child(3n+1)) { border-left:none; }
#zaikoList .data dt { width:3.3em; }
#zaikoList .data dt > span { display:none; }
#zaikoList .data dd { padding:.3em; }

/*#zaikoList .appraisal img { width:3vw; vertical-align:middle; }*/


/* zaiko 詳細 ------------------------ */
#zaikoDetail #footer { padding-bottom:0; }
#zaikoDetail .bnr-list.top { margin-bottom:1.5em; }
#zaikoDetail .flo-nav { display:none; }

.flo-contact { z-index:99;
  position:sticky; top:0; margin-inline:-4vw;
  display:grid; grid-template-columns:repeat(2, 1fr); gap:5px;
  padding:5px 10px; background-color:#fff;
  }
.flo-contact > li > a {
  display:block; color:#fff; padding-block:.5em;
  line-height:1.2; text-align:center; background-color:var(--color-zaiko);
  border-radius:5px;
  }
  .flo-contact > li > a.reserve { background-color:var(--color-reserve); }

#zaikoDetail .carInfo { margin-top:0; }
#zaikoDetail .cname { margin-top:.5em; font-size:1.4em; }
#zaikoDetail button.favorite { top:-1px; right:-5px; }

.specDataBox .img { max-width:640px; margin-inline:auto; }
.car-main-slider div[class*="swiper-button"] { width:16px; height:80px; }
.car-main-slider div[class*="swiper-button"]::after {
  font-size:.75em; }
.car-thumb-slider { margin-bottom:1em; padding-right:10%; }
.car-thumb-slider div[class*="swiper-button"] { display:none; }

.specDataBox .detail { display:flex; flex-wrap:wrap; }
.specDataBox .appraisal { order:2; margin-bottom:0; padding-inline:3%; }
.specDataBox .appraisal .ttl { width:35%; }

.specDataBox .tokuten { order:3; margin-bottom:1em; }
.specDataBox .shop-area { order:3; width:100%; margin-bottom:5%; }

.specDataBox .law { order:2; display:block; margin-bottom:1em; }
.specDataBox .law > li + li { margin-top:.2em; margin-left:0; }

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

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

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

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

/*購入パック*/
.packList > li { margin-bottom:6%; font-size:15px; }

/*お問い合わせ*/
.contact-area { margin:0 -10px; }
.contact-area.sp_only { margin-top:1.5em; }

/* #zaiko 問合せ */
.zaikoCom { margin-top:-45px !important; font-size:20px; font-weight:bold; line-height:1.3; color:#ff7500; }
.contactForm { width:100%; margin:0; }
.contactForm dt { width:100%; margin:0; }
.contactForm dd { width:100%; margin:0; padding:5px 0; }

/* 選ばれる理由 -------------- */
.reasonBox .ttl-def { font-size:1.3em; }
.reasonBox .txt .fleft { max-width:43%; padding-top:.4em; }

/* #zaiko その他の車 */
.otherList > li { padding-bottom:15px; border-bottom:1px solid #dcdcdc; }
.otherList > li:nth-child(n+2) { margin-top:15px; }
.otherList > li > a { grid-column-gap:10px; }


/* タブレット ----------------------- */
@media screen and (min-width:600px){
  /* zaiko 一覧 ------------------------ */
  #zaikoList > li .appraisal { min-height:2em; }
  #zaikoList .mtype { bottom:2.3em; }

  /* zaiko 詳細 ------------------------ */
  .zaikoDetail { font-size:16px; }
  .carInfo .price.flex { max-width:640px; margin:.8em auto .5em; }

  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){
  .list-search.bodytype { grid-template-columns:repeat(3, 1fr); font-size:.8em; }

}