@charset "utf-8";
/* CSS Document */
/* zaiko
================================================================== */
#sale article { padding-bottom:60px; }
#sale .conTop .pageTtl { background-color:#ed9200; }
.bnr_tokuten { margin-bottom:20px; text-align:center;}
.bnr_tokuten img { max-width:100%; width:auto; }

.bnr_zozei { margin-bottom: 20px; }

/* 検索 */
.searchBox { margin-bottom:30px; padding:20px; background:#f7f7f7; }
.searchBox .title { display:none; }
.searchBox fieldset { width: 25%; margin:20px 0 0; border:none; }
.searchBox fieldset legend { 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 .searchBtn { display:block; width:14%; height:106px; padding-top:66px; color:#fff; font-size:15px; font-weight:bold; font-family:inherit; border:none; background:#2b5071 url(../img/ico_search.png) no-repeat; background-position:center 20px; background-size:30% auto; cursor:pointer; transition:all .5s; -webkit-transition:all .5s; }
.searchBox .searchBtn:hover { background-color:#000; }

.rowMax { font-size:1.8em; }
.order { margin-top:1.6em; text-align:right; }
.order .current { text-decoration:none; color:#00956d; }

/* 共通 */
.carContact li { float:left; margin-top:10px; }
.carContact *[class$="Btn"] a { display:inline-block; padding:7px 20px 5px; text-decoration:none; }
/*.carContact *[class$="Btn"] a:after {
  content:""; display:inline-block; width:0; height:0; margin-left:10px;
  border-style:solid; border-width:4px 0 4px 10px; border-color:transparent transparent transparent #FFF;
  }*/

.carContact .tel { position:static; margin:8px 10px 0 0; line-height:1; }
.carContact .tel a { display:inline-block; padding-left:30px; font-size:20px; color:#681916; font-weight:bold; text-decoration:none; background:url("../img/ico_tel_kasugai.svg") no-repeat bottom 3px left 5px / 18px 15px; position:relative; }
.carContact .tel span { display:block; margin:0 0 5px -24px; font-size:14px; }

.carContact .contactBtn { margin:10px 10px 0 15px; }

.carContact .contactBtn a { background-color:#4a79a2; border:1px solid #4a79a2; color: #fff; }
.carContact .detailBtn a { background-color:#2b5071; border:1px solid #2b5071; color:#fff; }
.carContact .contactBtn a:hover, .carContact .detailBtn a:hover { background-color:#fff; color:#3a3b3f; }


/* 共通  */
/* 一覧追加時に上は削除 #zaikoDetailも下から削除 */
#zaikoDetail .carBox { margin-bottom:10px; padding:4%; background:rgba(255,255,255,.8); }
#zaikoDetail .cname { font-size:1.5em; line-height:1.2; }
#zaikoDetail .grade { font-size:1.1em; }
#zaikoDetail .price {  }
#zaikoDetail .price > em { font-size:2em; }

.cdata { margin-top:.75em; }
.cdata > div { width:25%; padding:0 1%; font-size:.85em; text-align:center; }
.cdata > div + div { border-left:1px solid #ccc; }
.cdata > div > dd > em { font-size:.9rem; }

.carContactList > li { width:32.5%; text-align:center; line-height:1.3; }
.carContactList > li > a { display:block; height:3.6em; font-size:.85em; color:#fff; position:relative; }
.carContactList > li > a > .vh_ctr { display:block; width:100%; }
.carContactList > li > .contact { width:100%; margin:0; background:#7e162c; }
.carContactList > li > .tel { background:#377715; }
.carContactList > li > .reserve { background:#ed9200; }

.salecoupon_bnr {text-align: center; margin-bottom: 35px; }


/* 支払総額関連 */
.price_total { margin:0; font-size:1.5em; font-weight:bold; text-align:right; }
.price_total > em { font-family:'Lato', sans-serif; font-size:1.8em; color:#da263c; }
.price_total > .manen { font-size: .7em;}
.price_total .soldout { font-size: 1.6em;}
p.price_total { font-size: 1.1em; letter-spacing: .01em; line-height: 1.2;}
.price_total > .manen { font-size: .8em;}
dl.price_cost {
  display:grid; grid-column-gap:10px; max-width:140px; letter-spacing: .01em; line-height: 1.6;
  grid-template-columns: repeat(2, 1fr);
  margin:.2em 0 0 auto; font-size:.9em; text-align:right; }

.price.flex { margin-bottom:1em; line-height:1.2; }
.price.flex .label { font-size:.8em; }
.price.flex em { font-size:1.5em; font-family:'Lato', sans-serif }
.price.flex > li { display:flex; justify-content: left; gap: 1em; }
.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 { width:60%; padding-right:3em; }
.price.flex .cost { width:40%; }
.price.flex .tax { font-size:.85em; }

ul.law { margin-bottom:.8em; 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/stock/ico-tag.svg) no-repeat center / contain; }


/* zaikoList 一覧 */
#stock .pagination a, #stock .pagination span {
  display:inline-block; width:30px; line-height:28px; padding:2px 0 0; }

#zaikoList { -webkit-justify-content:left; justify-content:left; }
#zaikoList > li { width:24%; margin-bottom:30px; border:solid 1px #ddd; }
#zaikoList > li:not(:nth-child(4n+1)) { margin-left:1.3%; }
.otherList > li { width:24%; }
#zaikoList > li.is-empty { margin:0; border:none; }
#zaikoList .tbl, #zaikoDetail .tbl { border-collapse:collapse; table-layout:inherit; }
#zaikoList .tbl th { width:40%; }
#zaikoList .tbl td { width:60%; }
#zaikoList h3 { font-size:15px; font-weight:bold; padding:12px 15px 10px; line-height:1.3; color: #fff; background:#222; }
#zaikoList h3+div { padding:15px; background-color:#fff;  }
#zaikoList .image { display:block; }

.tagList li { padding:4px 10px 4px; margin-right:8px; float:left; color:#fff; font-size:13px; border-radius:4px; }
.tagList li.rec { background:#da263c;}
.tagList li.c1 { background:#FF9600;}
.tagList li.c2 { background:#3886c4;}
.tagList li.c3 { background:#38bfc4;}

#zaikoList .rBox .data { width:100%; margin:10px 0 16px; text-align:center;}
#zaikoList .rBox .data th { font-size:12px; background:#2b5071; color: #fff; border:solid 1px #fff; padding:5px 0 3px; }
#zaikoList .rBox .data th.price { width:215px; background:#fff; font-size:16px; font-weight:bold; line-height:1.4; vertical-align:middle; border:none; color: #3a3b3f; }
#zaikoList .rBox .data th.price .red { font-size:27px; color:#da263c;}
#zaikoList .rBox .data td { font-size: 12px; border: solid 1px #fff; padding: 7px 0 5px; background-color: #eee; }

#zaikoList .carContact li { float:none; width:100%; margin-top:8px; text-align:center; }
.tel-zaiko .tel { position:relative; margin:0 auto; display:inline-block; font-size:25px; font-family:'Lato', sans-serif; padding-left:1em; }
.tel-zaiko .tel:before { position:absolute; content:""; background-image: url(../img/ico_tel.png); background-repeat:no-repeat; background-size:contain; width:20px; height:20px; left:3px; top:3px; }
#zaikoList .carContact .contactBtn { margin:10px auto 0; }
#zaikoList .carContact .contactBtn a, #zaikoList .carContact [class$="Btn"] a { display:block; width:100%; }
/*#zaikoList .carContact .contactBtn a:hover { background:#681916; }*/

/*#zaikoList .carContact *[class$="Btn"] a { margin-left:14px; }*/


/* zaiko 詳細 */
#zaikoDetail .inner { position:relative; }
#zaikoDetail .conttl2 { width: 100%; margin-bottom:1em; color: #000; }

#zaikoDetail #bx-pager { margin:10px -4px 0; }
#zaikoDetail #bx-pager ul li { display:inline-block; margin:0 4px 3px;}
#zaikoDetail #bx-pager ul li:hover { text-decoration:none; }
#zaikoDetail #bx-pager ul li.coupon {
  position:absolute; right:20px; bottom:45px; width:224px; padding:10px 20px;
  font-size:110%; font-weight:bold; color:#fff; text-align:center; background:#ed9200; }

#zaikoDetail .lBox { width:64%; }
#zaikoDetail .lBox #bx-pager img { width:56px; height:42px; }

#zaikoDetail .rBox { width:35%;}


#zaikoDetail table.vehicle { width:50%; margin:0 auto 20px; }
.subTitle + table.vehicle { margin-top:5px; }
#zaikoDetail table.vehicle tr > * { padding:5px 10px 3px; text-align:left; background:#FFF; border:1px solid #ddd; }
#zaikoDetail table.vehicle th { width:37%; font-size:13px; background:#f6f6f6;}
#zaikoDetail .comBox { margin-top:30px; font-size:13px;}

#zaikoDetail .equip { border-top:1px solid #ddd; border-left:1px solid #ddd; }
#zaikoDetail .equip li { width:25%; padding:5px 8px; border-bottom:1px solid #ddd; border-right:1px solid #ddd; background:#fff; }

/*#zaikoDetail table.equip th { width:23%; }
#zaikoDetail table.equip td { width:10%; text-align:center; }
*/
#zaikoDetail .conttl4{ margin:30px 0 1em; }
#zaikoDetail h5 { font-size:1.2em; font-weight:bold; }

.carContactBox { width:100%; margin:60px auto;padding:20px; text-align:center; background:#f7f7f7; }
.carContactBox p { width:100%; margin:15px auto 0; }
.carContactBox .zaikoCon { margin:0 auto; font-size:28px; font-weight:bold; color:#2b5071; }

.carContactBox form { width:100%; }
.contactForm { width:100%; max-width: 500px; margin:20px auto 0; text-align:center; }
.contactForm dl { margin-bottom:10px; }
.contactForm dl > * { text-align:left; }
.contactForm dt { width:30%; padding:10px 5px 0; float:left; }
.contactForm dt span {
  display:inline-block; padding:0 8px; float:right; color:#fff; font-size:12px;
  background:#e60012;
}
.contactForm dd { padding:5px; margin-left:30%; }
.contactForm dd input[type="text"] { width:95%; padding:5px; border:1px solid #ccc; }
.contactForm dd label { display:inline-block; padding-top:5px; }


#zaikoDetail .carInfoTbl .tbl { width: 50%; }
#zaikoDetail .carInfoTbl .tbl:nth-of-type(n+2) th,
#zaikoDetail .carInfoTbl .tbl:nth-of-type(n+2) td { border-left: none; }

.otherList { margin:20px 0 40px;}
.otherList li { width:25%; box-sizing:border-box; }
.otherList li a { display:block; padding:0 10px; text-decoration:none; }
.otherList li a:hover { color:#151515; text-decoration:none; }
.otherList li img { margin-bottom:5px;}
.otherList li table { width:100%; background-color:#fff; }
.otherList li table tr > * { padding:5px 10px 3px; border:solid 1px #f7f7f7; font-size:12px;}
.otherList li table th { background:#f6f6f6;}
.otherList li table .price { padding:7px 10px 1px; font-size:13px; text-align:center; font-weight:bold; border: none; }
.otherList li table .price span { margin-left:2px; font-size:20px; color:#da263c;}
.otherList .detailBtn {
  width:auto; display:block; margin:5px 0 0; padding:7px 5px 6px; font-size:90%;
  font-weight:bold; color:#fff; text-align:center; background:#2b5071; -webkit-transition:all .3s; transition:all .3s;
}
.otherList li a:hover .detailBtn { background:#fcd000; }


/*選ばれる理由*/
.reasonBox { margin:30px auto 80px;}
.reasonBox>h2 { text-align: center; font-size: 2em; margin-bottom: 1rem; font-weight: bold; color: #2b5071; }
.reasonBox li { position: relative; width: 48%; margin-left: 1% }
.reasonBox li>a { margin: 2em 0; background-color: #f7f7f7;}
.reasonBox li>a h3 { position: absolute; top:0; left:-4%; width: 100%; padding: 0.5rem 1.2rem; font-weight: bold; font-size: 1.1em; color: #fff; background-color: #000;
  box-shadow: 5px 5px rgb(41 49 41 / 70%);}
.reasonBox li figure {width: 200px; height: auto;}
.reasonBox li p { width: calc(100% - 200px); font-size:0.9em; padding: 2rem 1rem 1rem; box-sizing: border-box;}

.reasonBox li>a:hover { opacity: 0.7 ;}

/*----------------------------------------------------
タブレット
-----------------------------------------------------*/
@media screen and (max-width:1040px) {
#zaikoList > li { width:32%; }

#zaikoDetail .lBox { width: 100%; }
#zaikoDetail .rBox { width: 100%; margin-top: 30px; }

#zaikoDetail .carInfoTbl .tbl { width:100%; }
#zaikoDetail .carInfoTbl .tbl:first-of-type { margin-bottom: 0; }
#zaikoDetail .carInfoTbl .tbl:nth-of-type(n+2) th,
#zaikoDetail .carInfoTbl .tbl:nth-of-type(n+2) td { border-left:1px solid #ddd; border-top: none;}

.reasonBox li { width: 97%; margin-left: 3% }
.reasonBox li p { width: calc(100% - 200px); padding: 1.5rem 1rem 0.5rem; }
}

@media screen and (max-width:750px) {
#zaikoList > li, .otherList > li { width:49%; }
.otherList > li:nth-child(n+3) { margin-top: 30px; }

}

/*----------------------------------------------------
スマホ
-----------------------------------------------------*/
@media screen and (max-width: 599px){

  .searchBox { padding:15px; }
  .searchBox fieldset { width:100%; margin:5px 0 0; }
  .searchBox fieldset legend { font-size:15px; }
  .searchBox fieldset select { font-size: 14px; }
  .searchBox .searchBtn { width:100%; height: auto; padding: 10px; background-position:33% center; background-size:20px auto; }

  /*支払総額共通*/
  p.price_total { font-size:1em; }
  p.price_total > em { font-size:1.6em; }

  #zaikoList > li:not(:nth-child(4n+1)) { margin-left:0; }
  #zaikoList > li:nth-child(odd) { margin-right:2%; }
  #zaikoList .name { padding:10px; }
  #zaikoList .name + div { padding:10px; }
  #zaikoList h3 { padding:10px; font-size:13px; line-height:1.4; }
   #zaikoDetail .tbl { table-layout:fixed; border-collapse:separate; border-spacing:0 5px; }
  #zaikoList .tbl th, #zaikoList .tbl td { width:100%; }
  #zaikoList .rBox .data { margin-bottom:0; }
  #zaikoList .rBox .data th.price { width:100%; margin:0; padding:0; }
  #zaikoList .rBox .data th.price .red { font-size: 22px; }
  #zaikoList .tel-zaiko, #zaikoList .contactBtn { display:none; }

  #zaikoDetail table.vehicle tr td { border-top: none; }
  #zaikoDetail .carContactBox .zaikoCon { font-size:20px; }
  #zaikoDetail .equip li { width: 50%; }
  #zaikoDetail .carInfoTbl .tbl:nth-of-type(n+2) th { border-top: 1px solid #ddd; }
  #zaikoDetail #bx-pager { margin-top:5px; }
  #zaikoDetail #bx-pager ul li { width:12.6%; }
  #zaikoDetail .lBox #bx-pager img { width:100%; height:auto; }
  #zaikoDetail .slide_notes { margin:15px 0 0; text-align:center; }

  #zaikoDetail table.vehicle { width:100%; }

  .contactForm dt { width: 100%; }
  .contactForm dd { width: 100%; margin-left: 0; }

  .reasonBox li p{ width: 60%; }
  .reasonBox li figure { width: 40%; padding: 2rem 1rem 1rem 0; height: auto;}
}

@media screen and (max-width:498px) {
  #zaikoDetail #bx-pager ul li { width:14.4%; }
}
@media screen and (max-width:374px) {
  #zaikoDetail #bx-pager ul li { width:17.4%; }
}
@media screen and (max-width:328px) {
  #zaikoDetail #bx-pager ul li { width:22.2%; }
}