@charset "utf-8";

/* 在庫関連CSS未整理です */

/* 在庫案内
=============================================================== */
.mtype_btn { overflow: hidden; max-width: 600px; margin: 1em auto; border: 3px solid #f5a547; border-radius: 5px;}
.mtype_btn li { flex-grow: 1;}
.mtype_btn li a { display: block; padding: 0.5em 1em; color: #533c34; text-align: center; font-weight: bold; font-size: 1.142em; text-decoration: none;}
.mtype_btn li:nth-child(1) { border-right: solid 2px #f5a547;}
.mtype_btn.unused li:nth-child(1) a { color: #fff; background: #f5a547;}
.mtype_btn.used li:nth-child(2) a { color: #fff; background: #f5a547;}

#stock .lead { margin: 2.5em 0 1em; text-align: center; font-size: 1.2em; font-weight: bold; color:#4e362e;}
#stock .lead.mt-0 { margin-top: 0; }
#stock .lead .big { font-size: 1.2em; color: #da263c;}

#stock #contents { font-size:14px; line-height:1.7; }
.tokuten { margin:0 auto 50px; text-align:center; }
#stock .tokuten { margin:3em auto 2em; }
.bnr_zozei { margin:2em 0; }

.carContact .tel,
.carContact .contactBtn,
.carContact .detailBtn { float:left; margin-top:5px; }

.carContact .contactBtn { margin-right:10px;}
.carContact .contactBtn a { background:#f5a547;}
.carContact .detailBtn a { background:#7bc8b9;}
.carContact .contactBtn a, .carContact .detailBtn a { color:#fff; border:none; text-decoration:none; border-radius:3px; }

.carContact .contactBtn a,
.carContact .detailBtn a {  -webkit-transition:all .3s; transition:all .3s; }
.carContact .contactBtn a:hover,
.carContact .detailBtn a:hover{ background-color:#533c34; text-decoration:none; }
.carContact .tel { margin:0 42px 0 0; font-size:14px; font-family:inherit; }
.carContact .tel .imagetext { position:relative; top:-3px; left:3px; width:220px; }
.carContact .tel span { display:block; color:#533c34; text-align:center; font-weight:bold; }

.carContact form { width:100%; }
.contactForm {  width:600px; margin:10px auto; }
.contactForm input { border:1px solid #ccc; }

.contactForm .btn_submit { width:220px; padding:14px 0 12px; border: 0;}

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

/* 在庫一覧 */
.typeBtn { margin:2em 0; }
.typeBtn .typeBtnList { display: grid; grid-template-columns: repeat(7,1fr); gap: 1em; }

#stock .order { text-align:right; }

#zaikoList > li { width:100%; }
#zaikoList h3 { font-size:17px; font-weight:bold; padding:14px 30px 10px; margin-bottom:-1px; background:#f6f6f6; border:solid 1px #dcdcdc;}
#zaikoList h3+div { padding:30px 30px 25px; border:solid 1px #dcdcdc; margin-bottom:30px;}
#zaikoList > img { float:left; }
#zaikoList .Cimg { display:block; float:left; width:22%; }
#zaikoList .rBox { float:right; width:75%; }

.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:#ff7bac;}
.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 .rBox .data { width:100%; margin:15px 0; text-align:center;}
#zaikoList .rBox .data th { font-size:12px; background:#f6f6f6; border:solid 1px #dcdcdc; 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; }
#zaikoList .rBox .data th.price .red { font-size:27px; color:#da263c;}
#zaikoList .rBox .data td { border:solid 1px #dcdcdc; padding:7px 0 5px;}

/* 在庫詳細 */
#zaikoDetail .clearfix { position:relative; }
#zaikoDetail h3 {
  width:100%; padding:14px 0 9px 23px; margin-bottom:35px;
  font-size:22px; font-weight:bold; background:#f6f6f6; border:solid 1px #dcdcdc;
}
#zaikoDetail h3 span { font-size:14px; font-weight:500;}
#zaikoDetail ul { margin:0 auto 10px; }
#sliderInner { position: relative; }
#zaikoDetail #sliderPager { margin:0 -4px; }
#zaikoDetail #sliderPager li { display:inline-block; margin:0 4px 3px;}
#zaikoDetail #sliderPager li:hover { text-decoration:none; }
#zaikoDetail #sliderPager li.coupon {
  position:absolute; right:16px; bottom:45px; width:280px; padding:10px 20px;
  font-size:110%; font-weight:bold; color:#533c34; text-align:center; text-decoration:none; border-radius:3px; background:#ffe050;
  transition:all .3s; -webkit-transition:all .3s; }
#zaikoDetail #sliderPager li.coupon:hover { background:#f5a547; }
#zaikoDetail ul p { margin:5px 0 0; }

#zaikoDetail .lBox { float:left; width:640px; }
#zaikoDetail .lBox #sliderPager img { width:56px; height:42px; }

#zaikoDetail .rBox { float:right; width:320px; }

#zaikoDetail .rBox .price { text-align:right; font-size:16px; font-weight:bold; margin:5px 0 2px;}
#zaikoDetail .rBox .price .red { margin-left:10px; font-size:30px; color:#da263c; vertical-align:-2px; }
#zaikoDetail .rBox .price .red span { font-size:16px; }

#zaikoDetail .rBox .data { width:100%; margin-bottom:9px; text-align:center;}
#zaikoDetail .rBox .data:last-child { margin-bottom:10px;}
#zaikoDetail .rBox .data th { width:50%; font-size:13px; background:#f6f6f6; border:solid 1px #dcdcdc; padding:4px 0 2px;}
#zaikoDetail .rBox .data th.price { background:#fff; font-size:16px; font-weight:bold;}
#zaikoDetail .rBox .data th.price span { font-size:27px; color:#da263c;}
#zaikoDetail .rBox .data td { border:solid 1px #dcdcdc; padding:5px 0 4px;}

#zaikoDetail .slick-dotted { margin-bottom: 60px; }
#zaikoDetail .slick-dots { margin: 0; bottom: -55px; }

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

#zaikoDetail table.equip th { width:23%; }
#zaikoDetail table.equip td { width:10%; text-align:center; }

#zaikoDetail h4.subTitle { width:100%; margin:30px 0 10px; text-align:left; }
#zaikoDetail table.iconBox th { width:25%; }
#zaikoDetail table.iconBox td { text-align:center; }
#zaikoDetail .c_icon { padding:5px; }
#zaikoDetail .c_icon li {
  display:inline-block; padding:2px 10px; margin:4px 10px 4px 0; color:#005fa9;
  font-size:13px; border:1px solid #005fa9; border-radius:4px;
}

#stock .lineAt { background-color:#fff; max-width:580px; margin: 20px auto; padding: 10px 20px 20px; }
#stock .lineAt .txt { margin-top: 0;}
#stock .lineAt .btnLine a { padding-right: 2em; }
#stock .lineAt .btnLine a:before { left: 20px; }
#stock .lineAt .btnLine a:after { right: 15px; }

/* 在庫お問い合わせ */
#zaikoDetail .carContact { padding:20px; margin:30px 0; text-align:center; border-radius:3px; background:#fbf2e7; }
#zaikoDetail .carContact .tel span { display:block; margin-bottom:8px; font-weight:bold; color:#533c34; }


#carContactBox { padding:20px; margin:30px 0 70px; border-radius:5px; background:#fbf2e7; }
#carContactBox .lead { font-size: 18px; font-weight: bold; color: #da263c; }
#carContactBox .tel span { display:block; margin-bottom:8px; font-weight:bold; color:#533c34; }
#carContactBox .submit { margin-top:20px; }
#carContactBox .tel { margin:0 0 12px; float:none; }
#carContactBox .tel .imagetext { width:237px;}
#zaikoDetail .carContact p { margin:0 auto; }
#zaikoDetail .carContact .tel-num { font-size:2.2em; }
#zaikoDetail .carContact .contactBtn { width: 100%; margin:8px 0 0; }
#zaikoDetail .carContact .contactBtn a {
  display:block; padding:10px 20px; font-size:110%; font-weight:bold;
}
#zaikoDetail .carContact.box2 .contactBtn a { width:35%; margin:0 auto; }

#zaikoDetail .subHeadline { margin-top:30px; font-size:18px; color:#533c34; }
.rowMax { margin-top:0; margin-bottom:25px; line-height:1; }
.rowMax > span { font-size:25px; font-weight:bold; }

.otherBox { margin-top:50px; }
.otherList { margin:20px 0 30px;}
.otherList li { width:25%; box-sizing:border-box; }
.otherList li a { text-decoration:none; display:block; padding:0 10px;}
.otherList li a:hover { color:#151515; text-decoration:none; }
.otherList li table { margin-top:5px; width:100%; }
.otherList li table tr > * { padding:5px 10px 3px; border:solid 1px #dcdcdc; 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; }
.otherList li table .price span { margin-left:2px; font-size:20px; color:#da263c;}
.otherList .detailBtn {
  position:relative; width:auto; display:block; margin:5px 0 0; padding:7px 10px 6px 5px; font-size:90%;
  font-weight:bold; color:#fff; text-align:center; border-radius:3px; background:#7bc8b9;
  transition:all .3s; -webkit-transition:all .3s;
}
.otherList .detailBtn:before {
 content:""; position:absolute; top:0; bottom:0; right:14px; width:20px; height:20px; margin:auto;
 border-radius:50%; background:#533c34 url(../img/common/icon-arrow-wht.svg) no-repeat center center / 10px; }
.otherList a:hover .detailBtn { background:#533c34; }

/* --- 在庫確認。来店予約・電話問い合わせボタン --- */
#zaikoDetail .contactCom { width: 100%; margin:50px auto 20px; padding: 8px 21px; text-align: center; font-weight: bold; color: #FFF; font-size: 15px;background: #ed9200; position: relative; }
#zaikoDetail .contactCom::before { content: ""; position: absolute; bottom: -8px; left: 50%; width: 0; height: 0; margin-left: -7px; border-style: solid; border-width: 8px 7px 0 7px; border-color: #ed9200 transparent transparent transparent; }
#zaikoDetail .stockBnr { margin:20px 0; }
.stockBnr li { width:32%; }
.stockBnr li a { display:block; }

/*支払総額関連*/
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; }

/*一覧*/
#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; margin-bottom:8px; }
#zaikoList figure.img { min-height:156px; 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; }

#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); }

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

/*来店予約カレンダー*/
.reserve { width:100%; }
#rdate { padding-inline:20px; margin-block: 1em 2em; }
#rdate .slick-arrow { font-size: 0; line-height: 0; position: absolute; top: 50%; padding: 0;
  display:block; width:10px; height:10px;
  border-top:2px solid #32170d;
  border-right:2px solid #32170d; }
#rdate .slick-arrow::before { content:""; }
#rdate .slick-arrow::after { content:""; }
#rdate .slick-prev { left: 5px; transform:rotate(-135deg); }
#rdate .slick-next { right: 5px; transform:rotate(45deg) }
#rdate button { display:block; padding-inline: 0 6px; width:100%; color:#333; text-align:center; background-color:transparent; font-size: 1.2em; border: 0; cursor: pointer; }
#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 2em; 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:0; right: 0; bottom:.5em; margin-inline: auto;
  background:no-repeat center / 90%;
}
#rdate .slick-slide { margin:0; }
#rdate .ok .date::after { background-image:url("../img/common/mark-ok.svg"); }
#rdate .no .date::after { background-image:url("../img/common/mark-no.svg"); }

/* ローン支払シミュレーション */
.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; }

/* 1.9%低金利バナー */
.yasuiBnr { margin-top: 2em; }
.yasuiBnr figure { flex: 1; }
.yasuiBnr a:hover { opacity: 0.7; }

/* --- 絞り込みバナー（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; }