@charset "utf-8";

/* 在庫関連CSS未整理です（contents.cssなどにも残っています） */

/*支払総額関連*/
p.price_total { margin:0; font-weight:bold; text-align:right; }
p.price_total > em { font-family:'Helvetica','Arial',sans-serif; font-size:1.8em; color:#da263c; }
dl.price_cost {
  display:grid; grid-column-gap:10px; max-width:150px;
  grid-template-columns: repeat(2, 1fr);
  margin-inline:auto 0; 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:'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 #dcdcdc; }
.price.flex .total em { font-size:2em; color:#da263c; }
.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/stock/ico-tag.svg) no-repeat center / contain; }

/* バナー */
.newrecruit img{ width: 80%;}

/*一覧*/
#zaikoList { width:100%; column-gap:1.3%; }
#zaikoList.flex > li { width:24%; margin-bottom: 30px; border:solid 1px #dcdcdc; }
#zaikoList > li.is-empty { margin: 0; border: none; }
#zaikoList table, #zaikoDetail table { border-collapse:collapse; }
#zaikoList h3 { min-height: 3.8em; margin: 0; padding:12px 13px 9px; font-size:17px; line-height:1.3; font-weight:bold; background:#f6f6f6; border: none; border-bottom: solid 1px #dcdcdc;}
#zaikoList h3>span { font-weight:inherit; }
#zaikoList .maker { font-size:.8em; }
#zaikoList .grade { font-size:.9em; }
#zaikoList h3+div { margin: 0; padding:15px; background-color: #fff; border: none; }
#zaikoList a.image { display: block; min-height:156px; margin-bottom:8px; }
#zaikoList figure.img { position:relative; }
#zaikoList figure.img .brake { position:absolute; top: 0; right: 0; margin: 2.5%;display:block; width:50px; }

/* 装備アイコン（横5列固定・6個目以降は非表示） */
#zaikoList .ico {
  display:grid; grid-template-columns:repeat(5, 1fr); gap:2%;
  margin:8px 0 0;
  min-height:38px; /* アイコン0個でも1行分を確保（PC:カード内幅208px÷5列） */
}
#zaikoList .ico > li { line-height:0; }
#zaikoList .ico > li:nth-child(n+6) { display:none; }
#zaikoList .ico img { display:block; width:100%; height:auto; aspect-ratio:1/1; }

/* 月々払い（一覧カード） */
#zaikoList .monthlyPay { margin:8px 0 0; padding:5px 4px 4px; background:#f2f2f2; text-align:center; line-height:1.2; }
#zaikoList .monthlyPay .cap { margin:0 0 3px; font-size:11px; }
#zaikoList .monthlyPay .pay { margin:0; font-size:12px; font-weight:bold; }
#zaikoList .monthlyPay .pay > em { margin:0 1px; font-family:'Helvetica','Arial',sans-serif; font-size:1.9em; color:#da263c; }
.loan-note { margin:1.5em 0 0; font-size:12px; }

.tagList { gap:4px 8px; }
.tagList li { padding:4px 10px 4px; color:#fff; font-weight: bold; border-radius:4px;}
.tagList li.shop_1 { background:#5fb7a5;}
.tagList li.shop_2 { background:#f5a547;}
.tagList li.shop_3 { background:#a49bd9;}
.tagList li.kubun_1 { background:#FF9600;}
.tagList li.kubun_2 { background:#3886c4;}
.tagList li.wd4 { background:#6064be;}
.cat_unused { background: #da263c;}
.cat_unused2 { background: #da263c;}
.cat_used { background: #61a3d4;}

#zaikoList .carContact > p { float: none; margin: 8px 0 0; }
#zaikoList .carContact > p > a { display:block; }

#zaikoList .rBox { width:100%; }
#zaikoList .rBox p.price { margin: 10px auto; font-size: 16px; font-weight: bold; line-height: 1.4; vertical-align: middle; text-align: right; }
#zaikoList .rBox p.price .red { font-size:27px; color:#da263c;}
#zaikoList .rBox .data th { width: 0; white-space: nowrap; padding: 5px; white-space:nowrap; }

/*詳細*/
#zaikoDetail :is(.price ,ul.law) { font-size: 15px; }
#zaikoDetail ul.law { margin-left: 0; }

#zaikoDetail .favorite { position: relative; cursor:pointer; width:40px; height:40px; margin-bottom: 10px; padding:18px 0 0; font-size:10px; text-align:center; border:1px solid #e60012; border-radius:3px; }
#zaikoDetail .favorite::before { content:""; position:absolute; top:0; left:23%; width:54%; height:26px; background:url(../img/common/ico-heart-red.svg) no-repeat center / contain; }
#zaikoDetail .favorite.add { color:#e60012; background-color:#fff; }
#zaikoDetail .favorite.del { color:#fff; background-color:#e60012; }
#zaikoDetail .favorite.del::before { background-image:url(../img/common/ico-heart-wht.svg); }

.otherList li table td[colspan] { padding-top:0; }
.otherList .price_total { margin-top: 0; font-size:14px; }

/* ローン支払シミュレーション */
.loanBox {
  display:grid; grid-template-columns:55% 1fr; align-items:end;
  grid-column-gap:5%; grid-row-gap:30px; }

.loan-input  { grid-area: 1 / 1 / 3 / 2; }
.loan-result { grid-area: 2 / 2 / 3 / 3; }
.loan-error  { grid-area: 1 / 2 / 2 / 3; }
.loan-notice { grid-area: 3 / 1 / 4 / 3; font-size:.9em; color:#666; }

.loan-input > div {
  display:flex; align-items:flex-end;
  padding-block:1em 7px; font-weight:bold; border-bottom:2px solid #ddd; }
.loan-input dt { flex:1; padding-left:15px; }
.loan-input dt > span { font-weight:normal; }
.loan-input dd { width:8.5em; }
.loan-input .total { font-size:2em; }
.loan-input input { margin-right:2px; width:4em; font-size:1.2em; font-weight:bold; text-align:right; }
.loan-input select { margin:0; padding:3px 5px; font-size:1.1em; font-weight:bold; border: 1px solid #ccc; border-radius:3px; }

.loan-result { padding-block:.5em; background:#f6f6f6; }
.loan-result > div {
  display:flex; justify-content:space-between;
  padding:.5em 1em; font-weight:bold; }
.loan-result em { font-size:1.6em; line-height:1.2; }
.loan-result .amount { border-bottom:2px solid #ccc; }
.loan-result .amount dd { font-size:1.2em; }
.loan-result .monthly dd { font-size:1.3em; }

.loan-error { line-height:1.4; }

/* --- 絞り込みバナー（inc/define.inc の $_ctypeBtn） ---------------
   PCは6枚を1行に並べる。バナーを増減したら列数も合わせること。   */
.typeBtn .typeBtnList { grid-template-columns: repeat(6, 1fr); }
.typeBtn .typeBtnList > li > a { display:block; }
.typeBtn .typeBtnList > li > a > img { display:block; width:100%; height:auto; }