/* K's 在庫プラグインの追加分（kinv.css＝試作の埋込み版CSS の上に重ねる）。すべて .kinv 配下に限定。 */
.kinv .kinv-card[hidden], .kinv .kinv-empty[hidden], .kinv [hidden] { display:none !important; }
.kinv.kinv--detail { padding:calc(var(--kinv-sticky-top, 0px) + 56px) 0 120px; } /* 固定ヘッダーの高さ分を空ける（高さはJSで測る） */
.kinv.kinv--detail::before { content:"STOCK"; }
.kinv .kinv-breadcrumb { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:0 0 28px; color:var(--kinv-dim); font-size:12px; letter-spacing:.06em; }
.kinv .kinv-breadcrumb a:hover { color:var(--kinv-gold); }
.kinv .kinv-breadcrumb [aria-current] { color:var(--kinv-muted); }
.kinv h1.kinv-title { margin:0; }
.kinv .kinv-btn { text-decoration:none; }
.kinv a.kinv-btn--ghost { font-size:13px; }

/* この車について */
.kinv .kinv-about { margin:64px 0 0; padding:40px 0 0; border-top:1px solid var(--kinv-line); }
.kinv .kinv-about__text { margin:0; max-width:820px; color:var(--kinv-text); font-size:15px; line-height:2.05; }
.kinv .kinv-about__comment { margin:20px 0 0; max-width:820px; color:var(--kinv-muted); font-size:13px; line-height:2; }

/* 問い合わせフォーム */
.kinv .kinv-inquiry { margin:72px 0 0; padding:56px 0 0; border-top:1px solid var(--kinv-line); scroll-margin-top:calc(var(--kinv-sticky-top) + 24px); }
.kinv .kinv-inquiry__car { display:flex; gap:20px; align-items:center; margin:28px 0 32px; padding:18px; border:1px solid var(--kinv-line); background:var(--kinv-panel); }
.kinv .kinv-inquiry__car img { width:160px; height:120px; object-fit:cover; flex:none; background:var(--kinv-img-bg); }
.kinv .kinv-inquiry__name { margin:0 0 6px; color:var(--kinv-strong); font-weight:700; font-size:16px; line-height:1.6; }
.kinv .kinv-inquiry__meta { margin:0; color:var(--kinv-muted); font-size:13px; }
.kinv .kinv-form { display:grid; gap:22px; max-width:820px; }
.kinv .kinv-form__row { display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.kinv .kinv-field { display:grid; gap:8px; margin:0; padding:0; border:0; min-width:0; }
.kinv .kinv-field > span, .kinv .kinv-field > legend { color:var(--kinv-text); font-size:13px; font-weight:700; letter-spacing:.06em; padding:0; margin-bottom:8px; }
.kinv .kinv-field em, .kinv .kinv-agree em { margin-left:8px; padding:1px 6px; background:var(--kinv-gold); color:#070809; font-style:normal; font-size:10px; font-weight:700; letter-spacing:.08em; vertical-align:2px; }
.kinv .kinv-form input[type=text], .kinv .kinv-form input[type=email], .kinv .kinv-form input[type=tel], .kinv .kinv-form select, .kinv .kinv-form textarea {
  width:100%; min-height:50px; padding:12px 14px; border:1px solid var(--kinv-line2); border-radius:0; background:var(--kinv-field-bg); color:var(--kinv-text); font-size:16px; line-height:1.6; }
.kinv .kinv-form textarea { min-height:110px; resize:vertical; }
.kinv .kinv-form [aria-invalid="true"] { border-color:#e0675c; }
.kinv .kinv-checks { display:flex; flex-wrap:wrap; gap:10px; }
.kinv .kinv-checks label { position:relative; cursor:pointer; }
.kinv .kinv-checks input { position:absolute; opacity:0; inset:0; margin:0; cursor:pointer; }
.kinv .kinv-checks span { display:inline-block; padding:10px 16px; border:1px solid var(--kinv-line2); color:var(--kinv-muted); font-size:13px; transition:.2s; }
.kinv .kinv-checks input:checked + span { border-color:var(--kinv-gold); background:var(--kinv-gold-soft); color:var(--kinv-strong); }
.kinv .kinv-checks input:focus-visible + span { outline:2px solid var(--kinv-gold); outline-offset:3px; }
.kinv .kinv-agree { display:flex; gap:10px; align-items:flex-start; color:var(--kinv-text); font-size:13px; }
.kinv .kinv-agree input { width:20px; height:20px; margin-top:2px; accent-color:var(--kinv-gold); flex:none; }
.kinv .kinv-agree a { color:var(--kinv-gold); text-decoration:underline; }
.kinv .kinv-form__hp { position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden; }
.kinv .kinv-form__error { margin:0; padding:14px 16px; border:1px solid #e0675c; color:#ffb4ac; font-size:13px; white-space:pre-line; }
.kinv.kinv--light .kinv-form__error { color:#b3261e; }
.kinv .kinv-form__submit { width:100%; max-width:420px; border:0; cursor:pointer; }
.kinv .kinv-form__submit[disabled] { opacity:.6; cursor:progress; }
.kinv .kinv-form__done { max-width:820px; padding:32px; border:1px solid var(--kinv-gold); background:var(--kinv-gold-soft); outline:none; }
.kinv .kinv-form__done-title { margin:0 0 10px; color:var(--kinv-strong); font-size:18px; font-weight:800; }
.kinv .kinv-form__done p:last-child { margin:0; color:var(--kinv-text); }

@media (max-width: 768px) {
  .kinv.kinv--detail { padding:calc(var(--kinv-sticky-top, 0px) + 28px) 0 110px; }
  .kinv .kinv-form__row { grid-template-columns:1fr; }
  .kinv .kinv-inquiry__car img { width:96px; height:72px; }
}

/* 2026-10-24 追加（0.1.2）：写真は車の全体が入るように（切らない）。自社の写真は3:2なので枠も3:2に */
.kinv { --kinv-photo-ratio:3/2; }
.kinv .kinv-card__image img, .kinv .kinv-gallery__main img, .kinv .kinv-thumbs img { object-fit:contain; }
.kinv .kinv-card:hover .kinv-card__image img { transform:none; } /* 拡大すると端が切れるのでやめる */
/* 2026-10-24 追加（0.1.2）：カード同士の間隔を広げる（罫線のつなぎ目の組み方 → 1枚ずつ独立したカードに） */
.kinv .kinv-grid { gap:32px; border:0; }
.kinv .kinv-card { border:1px solid var(--kinv-line); }
@media (max-width: 1024px) { .kinv .kinv-grid { gap:24px; } }
@media (max-width: 768px) { .kinv .kinv-grid { gap:20px; } }

/* 2026-10-24 追加（0.2.1）：スマホの「絞り込み」パネルが、ページの下の見出し（購入時のオプション など）の後ろに回り込んでいたのを直す。
   パネルは .kinv__wrap（重なり順1）の中にあるため、開いている間だけ .kinv__wrap ごと手前に出す（固定ヘッダーより上＝背景の暗幕でヘッダーも暗くなる） */
@media screen and (max-width:768px) {
  .kinv.kinv--sheet-open .kinv__wrap,
  .kinv .kinv__wrap:has(> .kinv-filters.is-open) { z-index:60; }
}

/* 2026-10-25 追加（0.2.2）：iPhone は文字が16px未満の入力欄を触ると画面を拡大する（絞り込みパネルが右にはみ出して見えた原因）。
   スマホでは入力欄・選択欄の文字を16pxにして拡大させない（絞り込み・問い合わせフォームとも） */
@media screen and (max-width:768px) {
  .kinv select,
  .kinv input[type="search"],
  .kinv .kinv-form input[type=text], .kinv .kinv-form input[type=email], .kinv .kinv-form input[type=tel], .kinv .kinv-form select, .kinv .kinv-form textarea { font-size:16px; }
}
@media screen and (max-width:768px) {
  /* 文字を16pxにした分、メーカー名（メルセデスAMG など）が切れないよう、メーカー欄は1行まるごと使う */
  .kinv .kinv-filters label:has(> select[name="maker"]) { grid-column:1/-1; }
  .kinv .kinv-filters select { padding-left:12px; padding-right:32px; letter-spacing:0; }
}

/* 2026-10-25 追加（0.2.3）：スマホの在庫カードを、カーセンサーと同じ「上に車名、左に写真・右に価格と年式など」の並びにする。
   パソコン表示は今まで通り（スマホ用の本体価格・車検などの行はパソコンでは出さない） */
.kinv .kinv-card__base, .kinv .kinv-facts--sp { display:none; }
@media screen and (max-width:768px) {
  .kinv .kinv-card {
    display:grid; grid-template-columns:minmax(0,48%) minmax(0,1fr); column-gap:12px; align-items:start;
    grid-template-areas:"mk mk" "md md" "gr gr" "im pr" "im bp" "im fs"; padding:16px 14px 18px;
  }
  .kinv .kinv-card__body { display:contents; }
  .kinv .kinv-card__maker { grid-area:mk; margin:0 0 2px; font-size:11px; letter-spacing:.14em; }
  .kinv .kinv-card__model { grid-area:md; font-size:17px; line-height:1.45; letter-spacing:.02em; }
  .kinv .kinv-card__grade { grid-area:gr; margin:2px 0 12px; font-size:12px; line-height:1.55; -webkit-line-clamp:1; }
  .kinv .kinv-card__image { grid-area:im; align-self:start; }
  .kinv .kinv-card__badges { left:6px; top:6px; transform:scale(.85); transform-origin:left top; }
  .kinv .kinv-card__photos { right:6px; bottom:6px; padding:2px 6px; font-size:10px; }
  .kinv .kinv-line, .kinv .kinv-card__tax, .kinv .kinv-card .kinv-facts:not(.kinv-facts--sp), .kinv .kinv-card__foot { display:none; }
  .kinv .kinv-card .kinv-price { grid-area:pr; display:block; padding-top:6px; border-top:3px solid var(--kinv-gold); }
  .kinv .kinv-card .kinv-price > span, .kinv .kinv-card__base > span { display:block; font-size:11px; letter-spacing:.06em; }
  .kinv .kinv-card .kinv-price strong { font-size:26px; line-height:1.15; }
  .kinv .kinv-card .kinv-price small, .kinv .kinv-card__base small { margin-left:2px; font-size:11px; }
  .kinv .kinv-card__base { grid-area:bp; display:block; margin:6px 0 0; padding-top:5px; border-top:3px solid var(--kinv-line2); color:var(--kinv-muted); }
  .kinv .kinv-card__base strong { color:var(--kinv-text); font-size:17px; font-weight:700; white-space:nowrap; }
  .kinv .kinv-facts--sp { grid-area:fs; display:grid; grid-template-columns:minmax(0,1fr); gap:3px; margin:10px 0 0; padding:0; border:0; }
  .kinv .kinv-facts--sp div, .kinv .kinv-facts--sp div + div { display:flex; align-items:center; gap:8px; min-width:0; padding:0; border:0; }
  .kinv .kinv-facts--sp dt { flex:none; width:3em; padding:1px 0; background:var(--kinv-line); color:var(--kinv-muted); font-size:11px; letter-spacing:.04em; text-align:center; }
  .kinv .kinv-facts--sp dd { min-width:0; margin:0; overflow:hidden; color:var(--kinv-text); font-size:12px; text-overflow:ellipsis; white-space:nowrap; }
}

/* 2026-10-25 追加（0.2.4）：スマホの在庫カードの調整（菅さんの指示）
   ・車名と同じ行にグレード ・「整備」は出さない ・年式／走行、車検／修復をそれぞれ1行に
   ・支払総額を車名と同じ高さから始め、写真の横に文字が全部収まる大きさにする */
.kinv .kinv-card__grade-inline { display:none; }
@media screen and (max-width:768px) {
  .kinv .kinv-card {
    grid-template-columns:minmax(0,45%) minmax(0,1fr); column-gap:10px;
    grid-template-areas:"mk pr" "md pr" "im bp" "im fs" "im ."; grid-template-rows:auto auto auto auto 1fr; padding:14px 12px 14px;
  }
  .kinv .kinv-card__maker { margin:0 0 2px; font-size:10px; }
  .kinv .kinv-card__model { font-size:15px; line-height:1.4; -webkit-line-clamp:3; margin:0 0 8px; }
  .kinv .kinv-card__grade-inline { display:inline; color:var(--kinv-muted); font-size:11px; font-weight:400; letter-spacing:0; }
  .kinv .kinv-card__grade { display:none; }
  .kinv .kinv-card .kinv-price { align-self:start; padding-top:4px; border-top-width:2px; }
  .kinv .kinv-card .kinv-price > span { font-size:10px; }
  .kinv .kinv-card .kinv-price strong { font-size:24px; line-height:1.1; }
  .kinv .kinv-card__base { display:flex; align-items:baseline; justify-content:space-between; gap:6px; margin:0; padding-top:4px; border-top-width:2px; }
  .kinv .kinv-card__base > span { display:inline; font-size:10px; }
  .kinv .kinv-card__base strong { font-size:14px; }
  .kinv .kinv-facts--sp { grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px 6px; margin:8px 0 0; }
  .kinv .kinv-facts--sp div, .kinv .kinv-facts--sp div + div { gap:4px; }
  .kinv .kinv-facts--sp dt { width:auto; padding:1px 3px; font-size:10px; letter-spacing:0; }
  .kinv .kinv-facts--sp dd { font-size:11px; letter-spacing:0; }
}
@media screen and (max-width:768px) {
  /* 0.2.4：写真の横に年式・走行・車検・修復が切れずに収まるよう、写真を少し細くし、項目の幅は中身に合わせる */
  .kinv .kinv-card { grid-template-columns:minmax(0,43%) minmax(0,1fr); }
  .kinv .kinv-facts--sp { grid-template-columns:auto auto; justify-content:start; gap:4px 8px; }
  .kinv .kinv-facts--sp dt { padding:1px 2px; }
}

/* 2026-10-25 追加（0.2.5）：スマホの在庫カードをデザインし直し（菅さん「バランス悪い」）
   ・カードの枠をやめて、区切り線だけの一覧にする（カーセンサーの並びに近い、すっきりした見た目）
   ・上に メーカー／車名＋グレード（2行まで）を横いっぱいに。その下に 写真（左）と 価格・年式など（右）
   ・右側は「支払総額（大）＋右上に本体価格（小）」「年式・走行／車検・修復」の2段にして、写真の高さに収める
   ・金・灰の太い線はやめ、文字の大きさと色の濃さで強弱をつける */
@media screen and (max-width:768px) {
  .kinv .kinv-grid { gap:0; border-top:1px solid var(--kinv-line); }
  .kinv .kinv-grid .kinv-card {
    grid-template-columns:minmax(0,47%) minmax(0,1fr); column-gap:14px;
    grid-template-areas:"mk mk" "md md" "im pr" "im fs" "im ."; grid-template-rows:auto auto auto auto 1fr;
    padding:18px 0 20px; border:0; border-bottom:1px solid var(--kinv-line); background:transparent;
  }
  .kinv .kinv-grid .kinv-card:hover { background:transparent; }
  .kinv .kinv-grid .kinv-card__maker { margin:0 0 3px; font-size:10px; letter-spacing:.18em; }
  .kinv .kinv-grid .kinv-card__model { margin:0 0 12px; font-size:16px; line-height:1.45; letter-spacing:.02em; -webkit-line-clamp:2; }
  .kinv .kinv-grid .kinv-card__grade-inline { margin-left:2px; color:var(--kinv-dim); font-size:12px; }
  .kinv .kinv-grid .kinv-card .kinv-price { padding:0; border:0; }
  .kinv .kinv-grid .kinv-card .kinv-price > span { color:var(--kinv-dim); font-size:10px; letter-spacing:.08em; }
  .kinv .kinv-grid .kinv-card .kinv-price strong { display:block; margin-top:3px; font-size:25px; line-height:1.05; letter-spacing:0; }
  .kinv .kinv-grid .kinv-card .kinv-price small { margin-left:3px; font-size:11px; }
  .kinv .kinv-grid .kinv-card__base { grid-area:pr; justify-self:end; align-self:start; display:flex; align-items:baseline; gap:4px; margin:0; padding:0; border:0; }
  .kinv .kinv-grid .kinv-card__base > span { display:inline; color:var(--kinv-dim); font-size:9.5px; letter-spacing:.04em; }
  .kinv .kinv-grid .kinv-card__base strong { color:var(--kinv-muted); font-size:11px; font-weight:500; }
  .kinv .kinv-grid .kinv-card__base small { font-size:10px; font-weight:500; }
  .kinv .kinv-grid .kinv-facts--sp { grid-template-columns:auto auto; justify-content:start; gap:4px 10px; margin:10px 0 0; padding:9px 0 0; border:0; border-top:1px solid var(--kinv-line); }
  .kinv .kinv-grid .kinv-facts--sp div, .kinv .kinv-grid .kinv-facts--sp div + div { gap:6px; }
  .kinv .kinv-grid .kinv-facts--sp dt { padding:0; background:none; color:var(--kinv-dim); font-size:10px; letter-spacing:.04em; }
  .kinv .kinv-grid .kinv-facts--sp dd { color:var(--kinv-text); font-size:11.5px; font-weight:400; line-height:1.35; }
}
@media screen and (max-width:389px) {
  .kinv .kinv-grid .kinv-card { column-gap:12px; }
  .kinv .kinv-grid .kinv-facts--sp { gap:4px 8px; }
  .kinv .kinv-grid .kinv-facts--sp div, .kinv .kinv-grid .kinv-facts--sp div + div { gap:4px; }
  .kinv .kinv-grid .kinv-facts--sp dd { font-size:11px; }
}

/* 2026-10-25 追加（0.2.6）：スマホの在庫カードの価格を、カーセンサーと同じく「支払総額」と「本体価格」を同じ大きさで横並びにし、色だけ変える
   （支払総額＝金色、本体価格＝白）。1,000万円台でも写真の横に収まるよう、文字の大きさは画面幅に合わせて 16〜20px */
@media screen and (max-width:768px) {
  .kinv .kinv-grid .kinv-card {
    grid-template-columns:minmax(0,45%) minmax(0,1fr) minmax(0,1fr); column-gap:12px;
    grid-template-areas:"mk mk mk" "md md md" "im pr bp" "im fs fs" "im . ."; grid-template-rows:auto auto auto auto 1fr;
  }
  .kinv .kinv-grid .kinv-card .kinv-price { grid-area:pr; }
  .kinv .kinv-grid .kinv-card__base { grid-area:bp; }
  .kinv .kinv-grid .kinv-card .kinv-price, .kinv .kinv-grid .kinv-card__base { display:block; align-self:start; justify-self:stretch; margin:0; padding:0; border:0; }
  .kinv .kinv-grid .kinv-card .kinv-price > span, .kinv .kinv-grid .kinv-card__base > span { display:block; color:var(--kinv-dim); font-size:10px; letter-spacing:.06em; }
  .kinv .kinv-grid .kinv-card .kinv-price strong, .kinv .kinv-grid .kinv-card__base strong { display:block; margin-top:2px; font-size:clamp(16px,4.3vw,20px); font-weight:700; line-height:1.1; letter-spacing:0; white-space:nowrap; }
  .kinv .kinv-grid .kinv-card .kinv-price strong { color:var(--kinv-gold); }
  .kinv .kinv-grid .kinv-card__base strong { color:var(--kinv-text); }
  .kinv .kinv-grid .kinv-card .kinv-price small, .kinv .kinv-grid .kinv-card__base small { margin-left:1px; font-size:9.5px; font-weight:700; }
}

/* 2026-11-02 追加（0.3.0）：店舗の切り替え（K’s JAPAN｜K’s Gallery） */
.kinv .kinv-stores{display:flex;gap:0;margin:0 0 18px;border:1px solid rgba(189,161,104,.55)}
.kinv .kinv-stores__tab{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;padding:12px 10px;font-weight:800;font-size:15px;letter-spacing:.04em;text-decoration:none;color:#bda168;background:transparent;transition:background .2s,color .2s}
.kinv .kinv-stores__tab + .kinv-stores__tab{border-left:1px solid rgba(189,161,104,.55)}
.kinv .kinv-stores__tab small{font-size:12px;font-weight:600;opacity:.8}
.kinv .kinv-stores__tab:hover{background:rgba(189,161,104,.12)}
.kinv .kinv-stores__tab.is-active{background:#bda168;color:#070809}
.kinv.kinv--light .kinv-stores__tab.is-active{color:#fff}
@media (max-width:600px){.kinv .kinv-stores__tab{font-size:14px;padding:11px 6px;flex-direction:column;gap:0}}