@charset "utf-8";
/* CSS Document */
/* zaiko
================================================================== */
#contents .contact { width:auto; margin:auto; }

.subTitle {
 margin:min(8%,50px) 0 .5em; padding:.5em; font-size:1.3em; color:#fff; background-color:#000; }
form .subTitle { margin-block:0 1em; }
.subTitle2 { margin:min(8%,50px) 0 .8em; padding-bottom:.3em; font-size:1.2em;  border-bottom:2px solid var(--color-base); }
.subTitle + .subTitle2 { margin-top:.2em; }

/* 検索 */
.searchBox { margin-bottom:30px; padding:20px; background:#f7f7f7; }
.searchBox .filter { width:84%; display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; }
.searchBox fieldset { margin:0; padding:0; border:none; }
.searchBox fieldset legend { margin-bottom:5px; color:#000; font-size:18px; font-weight:bold; line-height:1; }
.searchBox fieldset select { width:100%; padding:3px 10px; font-family:inherit; font-weight:inherit; font-size:16px; border-radius:3px; border:1px solid #ccc; background-color:#fff; }
.searchBox .range select { width:47%; }

.searchBox .searchBtn { align-self:flex-end; display:block; width:14%; height:106px; padding-top:66px; color:#fff; font-size:15px; font-weight:bold; font-family:inherit; border:none; background:var(--color-base) url(../img/common/icon-f-search.svg) no-repeat; background-position:center 20px; background-size:25% auto; cursor:pointer; transition:all .5s; -webkit-transition:all .5s; }
.searchBox .searchBtn:hover { background-color:var(--color-yel); }

.maxNum { line-height:1.1; }
.rowMax { font-size:1.8em; }

/* 並べ替え */
.orderBox { clear:both; margin-block:1.5em 2em; line-height:30px; }
.orderBox .label { margin:0 20px 0 0; padding:0 1em; color:#fff; line-height:30px; font-weight:bold; background:var(--color-base); position:relative; }
.orderBox .label::after {
  content:""; position:absolute; top:0; right:-10px;
  display:block; width:0; height:0; border-style:solid;
  border-width:15px 0 15px 10px;
  border-color:transparent transparent transparent var(--color-base);
  }
.orderBox > dl > div { border:solid 1px #ccc; }
.orderBox > dl > div + div { margin-left:1em; }
.orderBox > dl > div > dt { padding:0 .5em;  background:#eee;  }
.orderBox > dl > div > dd > a { display: block; padding:0 1em; text-decoration:none; background:#fff; border-left:1px solid #ccc;  }
.orderBox .current a { color:#fff; background-color:#ed9200 ; }

#stock .pagination { margin-block:1em 0; }

/* 支払総額関連 */
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.flex { margin-bottom:.5em; 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; justify-content:space-between; }
.price.flex .total { width:100%; margin-bottom:.4em; border-bottom:2px solid #ccc; }
.price.flex .total em { font-size:2em; color:#c00; }
.price.flex .def { font-size:.9em; }
.price.flex .def .manen { font-size:.9em; }
.price.flex .base { width:60%; padding-right:1em; }
.price.flex .cost { width:40%; }
.price.flex .tax { font-size:.85em; }

ul.law { margin-bottom:.5em; margin-left:.2em; }
ul.law > li { padding-left:1.3em; font-size:.8em; line-height:1.4; position:relative; }
ul.law > li::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; }

/* リボン update_type */
.image .ribbon { display:none; position:absolute; z-index:2; left:0; width:50px; height:50px; overflow:hidden; }


/* zaikoList 一覧 ------------- */
#zaikoList > li { display:grid; margin-bottom:30px; padding:10px; background-color:#fff; border:solid 2px #ccc; border-radius:10px; }
#zaikoList .cname { display:flex; align-items:center; font-size:1.3em; font-weight:bold; }
#zaikoList .cname .shopname { margin-left:auto; padding:0 .75em; font-size:.65em; color:#fff; background:#000; }
#zaikoList .maker { margin-right:.5em; font-size:.85em; }
#zaikoList .grade { margin:0 0 .8em; font-size:.85em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#zaikoList .image { position:relative; }
/*#zaikoList .image .obi { position:absolute; bottom:0; left:0; right:0; }*/

#zaikoList .data { font-size:.9em; border-top:1px solid #ccc; }
#zaikoList .data > div {
  display:flex; width:50%; border-width:0 1px 1px 1px; border-style:solid; border-color:#ccc; }
#zaikoList .data dt { width:5.5em; padding:.3em .5em; font-size:.9em; text-align:center; background-color:#f6f6f6; }
#zaikoList .data dd { flex:1; padding:.2em 1em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

#zaikoList .link { width:min(100%,500px); margin-top:10px; margin-left:auto; }
#zaikoList .link > li { width:49%; }
#zaikoList .link > li:nth-child(n+2) { margin-left:2%; }
#zaikoList .link > li > a { display:block; padding:.3em; color:#fff; font-weight:bold; text-align:center; text-decoration:none; border-radius:5px; }
#zaikoList .link > li > a.contact { background:var(--color-sub); margin-block:0; }
#zaikoList .link .detail  { background:var(--color-base); }

#zaikoList .goo { display:flex; align-items:center; gap:20px; }
#zaikoList .goo > div { font-size:.95em; }
#zaikoList .kantei img { width:90px; }
#zaikoList .shindan img { width:24px; }


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

/* 店舗情報関連 */
.shop-area { padding:1em; border:solid 1px #dcdcdc; } /*これだけ詳細のみ*/
.shop-name { margin-top:0; font-size:1.1em; font-weight:bold; }
.shop-name > .name { display:block; padding-bottom:.5em; color:var(--color-base); }
.shop-name > a.telno { display:block; padding-left:1.5rem; font-size:1.5em; font-family:'Helvetica','Arial',sans-serif; letter-spacing:.02em; position:relative; }
.shop-name > a::before {
  position:absolute; top:50%; left:0; margin-top:-.5rem;
  content:""; display:inline-block; width:1rem; height:1rem;
  background:no-repeat center / contain;
  }
.shop-name > a.telno::before { background-image:url(../img/common/ico_tel.svg); }
.shop-link > li:nth-child(n+2) { margin-top:1em; }

.shop-btn {
  display:block; width:100%; padding:.5em 0 .5em 2em; font-size:16px; font-weight:bold; text-align:center; text-decoration:none; color:#fff; background-color:var(--color-sub); border-radius:5px; position:relative;
}

.shop-btn:hover { color:#fff; opacity:.9; }
.shop-btn::before {
  position:absolute; left:.8em; top:50%; transform:translateY(-50%);
  content:''; display:block; width:1.5em; height:1.3em;
  background:no-repeat center / contain;
}
.shop-btn.contact::before { background-image:url(../img/common/ico-mail-wht.svg); }



/* 装備関連 */
.dl-def { line-height:1.3; border-top:1px solid #dcdcdc; border-left:1px solid #dcdcdc; }
.dl-def dt { padding:1em .8em 0; font-size:.85em; background:#f6f6f6; border-bottom:1px solid #dcdcdc; }
.dl-def dd { padding:.75em; font-weight:bold; background:#fff; border-bottom:1px solid #dcdcdc; }
.dl-def dd:last-child { border-right:1px solid #dcdcdc; }
.dl-def dd.com { font-weight:normal; font-size:.9em; line-height:1.5; }

.dl-def > div { display:flex; }
.dl-def > div > dt { width:max(20%,6em); }
.dl-def > div > dd { flex:1; }


ul.eqData { display:grid; grid-column-gap:3px; grid-row-gap:3px; font-size:.85em; }
ul.eqData > li { padding:.85em; line-height:1.5; font-weight:bold; border:1px solid #dcdcdc; }
ul.eqData > li.wide { grid-column:span 2; }


/* #slider */
#zaikoDetail #slider { max-width:640px; margin:auto; }
#zaikoDetail #sliderInner { position:relative; }
#zaikoDetail #slider .cap { font-size:.9em; color:#555; line-height:1.3; }

#zaikoDetail #slider .slide-arrow {
  position:absolute; top:30%; width:25px; height:110px; z-index:1;
  padding:0; outline:none; appearance:none; border:none; cursor:pointer;
  background-color:rgb(230, 0, 18,.6);
}
#zaikoDetail #slider .slide-arrow::before {
  position:absolute; top:50%;
  content:""; display:block; width:10px; height:10px;
  border-top:1px solid #fff;
  border-right:1px solid #fff }
#zaikoDetail #slider .slide-arrow.prev-arrow { left:0}
#zaikoDetail #slider .slide-arrow.prev-arrow::before {
  left:40%; transform:translateY(-50%) rotate(-135deg); }
#zaikoDetail #slider .slide-arrow.next-arrow { right:0 }
#zaikoDetail #slider .slide-arrow.next-arrow::before {
  left:25%; transform:translateY(-50%) rotate(45deg) }

#zaikoDetail #slider .slick-num {
  position:absolute; top:5px; right:5px; padding:0 5px;
  color:#fff; font-size:.8em;
  background-color:rgba(0,0,0,.7);
}

#zaikoDetail #sliderPager {  }
#zaikoDetail #sliderPager > li { width:10%; padding:1px; cursor:pointer; }
#zaikoDetail #sliderPager > li > img { border:1px solid #fff; }
#zaikoDetail #sliderPager .slick-current > img { border:1px solid #c00; }

/*来店予約*/
.zaikoDetail .img .ttl-bb-b { margin-top:5%; }
#rdate { padding-inline:20px; }
#rdate .slick-arrow {
  display:block; width:10px; height:10px;
  border-top:2px solid #32170d;
  border-right:2px solid #32170d }
#rdate .slick-arrow::before { content:""; }
#rdate .slick-prev { left:0; transform:rotate(-135deg); }
#rdate .slick-next { right:0; transform:rotate(45deg) }
#rdate button { display:block; width:100%; color:#333; text-align:center; background-color:transparent; }
#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 3em; font-size:.95em; 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:50%; bottom:1em; transform:translateX(-50%);
  background:no-repeat center / contain;
}
#rdate .ok .date::after { background-image:url("../img/common/mark-ok.svg"); }
#rdate .no .date::after { background-image:url("../img/common/mark-no.svg"); }

.youtube_wrap { margin-top:5%; }


/*お問い合わせ*/
.contact-area { margin-top:1em; padding:5% 10px; background:#fef9e2; }
.contact-area .shop-link { margin-bottom:1em; }


/* その他の車 */
.otherList > li > a {
  display:grid; grid-column-gap:15px; position:relative;
  grid-template-columns:36% 1fr; grid-template-rows:auto 1fr;
  text-decoration:none; line-height:1.4; }
.otherList > li > a::before {
  position:absolute; top:50%; right:1.3%;
  content:""; display:block; width:10px; height:10px;
  border-top:2px solid #444;
  border-right:2px solid #444;
  transform:translateY(-50%) rotate(45deg)
}
.otherList > li > a:hover { color:#000; }
.otherList .image { grid-area: 1 / 1 / 3 / 2; }
.otherList .obi { display:none; }
.otherList .cname { font-size:1.1em; font-weight:bold; }
.otherList .data > div { display:flex; align-items:center; font-size:.9em; font-weight:bold; }
.otherList .data dt { width:5em; font-size:.9em; }
.otherList .data dd::before { content:"："; }
.otherList .data .price { font-size:.9em; }
.otherList .data .price > em { font-size:1.4em; color:#c00; }

/* form 在庫問合せフォーム -------------- */
.form-area { padding:15px; background-color:#fff; }
.form-area .carInfo { margin-bottom:20px; }
.form-area .cname { line-height:1.3; }
.form-area .pack { display:inline-block; font-size:.8em; }



/* PC・タブレット ----------------------- */
@media screen and (min-width:640px){
  #zaikoList .data > div:nth-child(2n) { border-left:none; }

  /* 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; }
  .spec > div { width:50%; margin-bottom:10px; border:1px solid #dcdcdc; }
  .spec > div:nth-child(2n) { border-left:none; }
  .spec > div > * { padding:9px 4px; line-height:1.2; }
  .spec > div > dt { background-color:#f6f6f6; border-bottom:1px solid #dcdcdc; }

  ul.eqData { grid-template-columns:repeat(5, 1fr); font-size:.8em; }

  .loan-data { display:flex; flex-wrap:wrap; justify-content:space-between; }
  .loan-data > div:not(.wide) { width:49.7%; }


  /* #zaiko その他の車 */
  .otherList { display:grid; grid-template-columns:repeat(2, 1fr); grid-column-gap:15px; grid-row-gap:15px; }

  /* form 在庫問合せフォーム -------------- */
  .form-area .ttl-bb-b { margin-top:0; }
  .form-area .specDataBox {
    display:grid; align-items:start;
    grid-template-columns:35% 1fr;
    grid-template-rows:repeat(3, auto);
    grid-column-gap:15px;
  }
  .form-area .specDataBox .img   { grid-area: 1 / 1 / 4 / 2; }
  .form-area .specDataBox .cname { grid-area: 1 / 2 / 2 / 3; margin:0; }
  .form-area .specDataBox .price { grid-area: 2 / 2 / 3 / 3; max-width:400px !important; margin:.2em 0 !important; }
  .form-area .specDataBox .info  { grid-area: 3 / 2 / 4 / 3; }
  .form-area .spec > div { width:25%; }
  .form-area .spec > div.wide { width:50%; }

}

/* PC ----------------------- */
@media screen and (min-width:960px){
  /* zaikoList 一覧 ---------------------- */
  #zaikoList > li {
    grid-template-columns:29% 30% 1fr;
    grid-template-rows:repeat(3, auto);
    column-gap:20px;
  }
  #zaikoList > li .image { grid-area:1 / 1 / 5 / 2; }
  #zaikoList > li .cname { grid-area:1 / 2 / 2 / 4; }
  #zaikoList > li .grade { grid-area:2 / 2 / 3 / 4; }
  #zaikoList > li .price_law { grid-area:3 / 2 / 4 / 3; }
  #zaikoList > li .sub   { grid-area:4 / 2 / 5 / 3; }
  #zaikoList > li .data  { grid-area:3 / 3 / 4 / 4; }
  #zaikoList > li .link  { grid-area:4 / 3 / 5 / 4; margin-top:15px; }

  /* zaiko 詳細 ------------------------ */
  .zaikoDetail .specDataBox {
    display:grid;
    grid-template-columns:590px 1fr;
    grid-template-rows:auto auto 1fr;
  }
  .zaikoDetail .specDataBox .price { grid-area:1 / 2 / 2 / 3; }
  .zaikoDetail .specDataBox .law   { grid-area:2 / 2 / 3 / 3; }
  .zaikoDetail .specDataBox .img   { grid-area:1 / 1 / 5 / 2; padding-right:20px; }
  .zaikoDetail .specDataBox .info  { grid-area:3 / 2 / 4 / 3; }
  .zaikoDetail .specDataBox .shop  { grid-area:4 / 2 / 5 / 3; }
  .zaikoDetail .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; }
}

/* タブレット以下 ----------------------- */
@media screen and (max-width:959px){
  /* 検索 */
  .searchBox { margin-top:2em; padding:15px; }
  .searchBox .filter { width:100%; grid-template-columns:1fr; gap:10px; }
  .searchBox fieldset legend { font-size:15px; }
  .searchBox fieldset select { font-size: 14px; }
  .searchBox .searchBtn { width:100%; height:auto; margin-top:15px; padding: 10px; background-position:33% center; background-size:20px auto; }

  .rowMax { float:none; }
  .orderBox { font-size:.8em; }
  .orderBox .label { display:none; }
  .orderBox > dl > div > dt { }
  .orderBox > dl > div > dd > a { padding:0 .8em; }


  /* zaiko 詳細 ------------------------ */
  .carInfo .price.flex { max-width:640px; margin:.8em auto .5em; }
  .zaikoDetail .law { max-width:640px; margin-inline:auto; margin-bottom:.75em; }

  #sliderPager { margin:0 auto 20px; }
  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:639px){

  /* zaikoList 一覧 ---------------------- */
  #zaikoList > li {
    grid-template-columns:40% 60%;
    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; padding-bottom:10px; padding-right:10px; }
  #zaikoList > li .price_law { grid-area:3 / 2 / 4 / 3; }
  #zaikoList > li .sub   { grid-area:4 / 1 / 5 / 3; padding-bottom:5px; }
  #zaikoList > li .data  { grid-area:5 / 1 / 6 / 3; }
  #zaikoList > li .link  { grid-area:6 / 1 / 7 / 3; }

  #zaikoList .price .def,
  #zaikoList .price .price { display:block; }
  #zaikoList .price .label br { display:none; }

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


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

  .zaikoDetail .law { display:block; }
  .zaikoDetail .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:.75em; text-align:center; }
  .specDataBox .spec > div:not(:first-child) { border-left:1px solid #dcdcdc; }
  .specDataBox .spec > div > 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 button { padding:0 2px; }

  /*お問い合わせ*/
  .contactForm dl { grid-template-columns:1fr; gap:0; }
  .contactForm dd:not(:last-child) { margin-bottom:1em; }


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

}