@charset "UTF-8";
/* ============================================================
   在庫車一覧ページ（carlist.html）
   旧サイト main_list.php の構成（絞り込み → 件数/ページ表示 →
   一覧テーブル → 前後ページ送り）を、カード型のグリッドに置き換えている。
   文字サイズはページ全体で最低 16px（.car-card__no のみ例外）。
   ============================================================ */

/* ------------------------------------------------------------
   絞り込み検索（メーカー・車種・価格帯）
   デザインは style.css の search-form__* を流用し、文字サイズと余白だけ上書き。
   ------------------------------------------------------------ */
.car-filter {
  position: relative;
  width: var(--container);
  margin: 60px auto 0;
  padding: 28px 40px;
  border-radius: 20px;
  background: var(--orange);
  color: #fff;
}
.car-filter .search-form__head { font-size: 20px; line-height: 20px; }
.car-filter .search-form__label { font-size: 16px; line-height: 16px; }
.car-filter .search-form__select { height: 48px; font-size: 16px; }
.car-filter .search-form__submit { align-self: auto; margin-top: 0; height: 48px; font-size: 16px; }
.car-filter__row { display: flex; gap: 16px; margin-top: 16px; }
/* 価格帯と検索ボタンを同じ行に並べて縦幅を抑える */
.car-filter__prices {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 24px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, .3);
}
.car-filter__prices-label { font-size: 16px; line-height: 16px; font-weight: 700; }
.car-filter__prices-label::before { content: "◆"; margin-right: 2px; }
.car-check { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 500; cursor: pointer; }
.car-check input { width: 20px; height: 20px; accent-color: var(--green); }
.car-check.is-disabled { color: rgba(255, 255, 255, .48); cursor: not-allowed; }
.car-check.is-disabled input { opacity: .45; }
.car-filter__foot { display: flex; align-items: center; gap: 12px; margin-left: auto; }
/* 条件クリア（検索ボタンの左隣） */
.car-filter__clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 24px;
  border: 1px solid #fff;
  border-radius: 100px;
  background: transparent;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color .25s ease, transform .25s ease;
}
.car-filter__clear:hover { background: rgba(255, 255, 255, .18); transform: translateY(-2px); }

/* ------------------------------------------------------------
   件数 / ページ表示（旧: .kensup / .pagep）
   ------------------------------------------------------------ */
.car-result-bar {
  scroll-margin-top: 134px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: var(--container);
  margin: 40px auto 0;
}
.car-result-bar__count { font-size: 16px; line-height: 26px; font-weight: 500; color: var(--ink); }
.car-result-bar__count strong { margin: 0 4px; font-family: var(--ff-en); font-size: 24px; color: var(--orange); }
.car-result-bar__page { flex: none; font-family: var(--ff-en); font-size: 16px; font-weight: 600; color: var(--green); }

/* ------------------------------------------------------------
   一覧カード（旧: #data-list の各行）
   ------------------------------------------------------------ */
.car-list { width: var(--container); margin: 24px auto 0; display: flex; flex-direction: column; gap: 20px; }

.car-card__link {
  display: flex;
  gap: 28px;
  padding: 24px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  transition: transform .25s ease, box-shadow .25s ease;
}
.car-card__link:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(18, 68, 30, .12); }

.car-card__photo {
  flex: none;
  width: 240px;
  height: 180px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--card);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--ink-60);
}
.car-card__photo img { width: 100%; height: 100%; object-fit: cover; }
.car-card__photo-label { font-size: 16px; font-weight: 700; }

.car-card__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.car-card__name { font-size: 22px; line-height: 1.45; font-weight: 700; color: var(--ink); }
.car-card__tags { display: flex; flex-wrap: wrap; gap: 14px 32px; }
.car-card__tags li { font-size: 16px; line-height: 1.6; color: var(--ink-55); }
.car-card__tag-label { display: block; margin-bottom: 2px; font-size: 16px; line-height: 1.4; font-weight: 700; color: var(--green-mid); }

.car-card__price {
  flex: none;
  width: 250px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  text-align: right;
  border-left: 1px solid var(--line);
  padding-left: 24px;
}
.car-card__price-row { display: flex; align-items: baseline; gap: 6px; }
.car-card__price-label { font-size: 16px; font-weight: 700; color: var(--ink-60); }
.car-card__price-num { font-family: var(--ff-en); font-size: 24px; font-weight: 600; color: var(--ink-60); }
.car-card__price-unit { font-size: 16px; color: var(--ink-60); }
.car-card__price-row--total .car-card__price-label,
.car-card__price-row--total .car-card__price-num,
.car-card__price-row--total .car-card__price-unit { color: var(--orange); }
.car-card__price-row--total .car-card__price-num { font-size: 34px; }
.car-card__no { font-family: var(--ff-en); font-size: 11px; color: var(--ink-60); }
.car-card__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
  padding: 12px 24px;
  border-radius: 100px;
  background: var(--green);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  transition: filter .25s ease;
}
.car-card__link:hover .car-card__btn { filter: brightness(1.08); }

/* 在庫なし（0件時） */
.car-empty {
  width: var(--container);
  margin: 24px auto 0;
  padding: 80px 40px;
  text-align: center;
  background: var(--card);
  border-radius: 16px;
  font-size: 18px;
  line-height: 1.9;
  color: var(--ink-60);
}

/* ------------------------------------------------------------
   前後ページ送り（旧: #data-foot）
   ------------------------------------------------------------ */
.car-pager { width: var(--container); margin: 48px auto 20px; display: flex; align-items: center; justify-content: center; gap: 24px; }
.car-pager__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid #d5d8d5;
  border-radius: 50%;
  color: #9aa19a;
  transition: border-color .2s ease, color .2s ease;
}
.car-pager__btn:hover { border-color: var(--green); color: var(--green); }
.car-pager__btn--next .ico { transform: scaleX(-1); }
.car-pager__btn.is-disabled { opacity: .45; pointer-events: none; }
.car-pager__pages { font-family: var(--ff-en); font-size: 18px; font-weight: 600; color: #9aa19a; }

/* ============================================================
   SP（760px 以下）
   PC と同じ内容を 1 カラムで表示する。
   ============================================================ */
@media (max-width: 760px) {
  /* 絞り込み検索 */
  .car-filter { width: auto; margin: 24px 16px 0; padding: 20px 16px; border-radius: 14px; }
  .car-filter .search-form__head { font-size: 18px; line-height: 18px; }
  .car-filter__row { flex-direction: column; gap: 12px; margin-top: 14px; }
  .car-filter .search-form__select { height: 46px; }
  .car-filter__prices { gap: 10px 8px; margin-top: 16px; padding-top: 16px; }
  .car-filter__prices-label { width: 100%; }
  .car-check { padding: 10px 12px; border-radius: 8px; background: rgba(255, 255, 255, .18); white-space: nowrap; }
  .car-filter__foot { width: 100%; margin: 4px 0 0; }
  .car-filter .search-form__submit { flex: 1; width: auto; justify-content: center; }
  .car-filter__clear { flex: none; height: 48px; padding: 0 20px; }

  /* 件数 / ページ */
  .car-result-bar { width: auto; margin: 24px 16px 0; flex-direction: column; align-items: flex-start; gap: 4px; }
  .car-result-bar__count { line-height: 1.7; }
  .car-result-bar__count strong { font-size: 22px; }
  .car-result-bar__page { align-self: flex-end; }

  /* 一覧カード */
  .car-list { width: auto; margin: 16px 16px 0; gap: 16px; }
  .car-card__link { flex-direction: column; gap: 16px; padding: 16px; border-radius: 12px; }
  .car-card__link:hover { transform: none; box-shadow: none; }
  .car-card__photo { width: 100%; height: auto; aspect-ratio: 4 / 3; }
  .car-card__body { gap: 12px; }
  .car-card__name { font-size: 18px; line-height: 1.5; }
  /* 年式〜走行距離は罫線で区切った縦積み（ラベルの下に値） */
  .car-card__tags { flex-direction: column; gap: 0; border-top: 1px solid var(--line); }
  .car-card__tags li { padding: 10px 0; border-bottom: 1px solid var(--line); color: var(--ink); }

  .car-card__price {
    width: 100%;
    align-items: stretch;
    gap: 6px;
    padding: 14px 16px;
    border-left: 0;
    border-radius: 10px;
    background: var(--card);
    text-align: left;
  }
  .car-card__price-row { gap: 4px; }
  .car-card__price-row .car-card__price-num { margin-left: auto; }
  .car-card__price-num { font-size: 22px; }
  .car-card__price-row--total .car-card__price-num { font-size: 30px; }
  .car-card__no { align-self: flex-end; }
  .car-card__btn { justify-content: center; width: 100%; margin-top: 8px; padding: 14px 20px; }

  .car-empty { width: auto; margin: 16px 16px 0; padding: 48px 20px; font-size: 16px; }

  .car-pager { width: auto; margin: 32px 16px 20px; gap: 20px; }
}