/*
 * 中古バス販売ページ専用スタイル
 * 既存テーマ（style.min.css）の上に重ねる前提。すべて #used-bus の中に限定する。
 * 色・余白・ブレークポイントは既存サイトに合わせている（769px以上がPC）。
 */

/* Keep essential content visible before scrolling and without animation scripts. */
#used-bus .fadeIn,
#used-bus .fadeInUp,
#used-bus .fadeView,
#used-bus .fadeViewUp,
#used-bus .fadeViewLeft,
#used-bus .fadeViewRight {
  opacity: 1;
  transform: none;
  animation: none;
  transition: none;
}

/* ---------- 導入 ---------- */
#used-bus .intro-area .text { line-height: 2; }
@media (min-width: 769px) {
  #used-bus .intro-area .text { text-align: center; }
}

#used-bus .ub-points {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .75rem;
}
@media (min-width: 769px) {
  #used-bus .ub-points { grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
}
#used-bus .ub-points__item {
  background: #f1f5f3;
  border-radius: .5rem;
  padding: 1.25rem .75rem;
  text-align: center;
}
@media (min-width: 769px) {
  #used-bus .ub-points__item { border-radius: 1rem; padding: 1.75rem 1rem; }
}
#used-bus .ub-points__label { display: block; font-size: .8125rem; font-weight: 700; color: #00b59d; }
#used-bus .ub-points__value { display: block; margin: .25rem 0 .5rem; font-size: 1.75rem; font-weight: 700; line-height: 1.2; color: #00b555; }
#used-bus .ub-points__value small { font-size: .5em; margin-left: .1em; }
#used-bus .ub-points__value--text { font-size: 1.5rem; padding: .15em 0; }
#used-bus .ub-points__text { font-size: .8125rem; line-height: 1.6; }
@media (min-width: 769px) {
  #used-bus .ub-points__label { font-size: .875rem; }
  #used-bus .ub-points__value { font-size: 2.25rem; }
  #used-bus .ub-points__value--text { font-size: 1.875rem; }
  #used-bus .ub-points__text { font-size: .875rem; }
}

/* ---------- 見出しの英字 ---------- */
#used-bus .second-title .title-en { margin-top: .25em; }

/* ---------- 絞り込み ---------- */
#used-bus .ub-filter {
  background: #f1f5f3;
  border-radius: .5rem;
  padding: 1rem;
  margin-bottom: 1.5rem;
}
@media (min-width: 769px) {
  #used-bus .ub-filter { border-radius: 1rem; padding: 1.25rem 1.5rem; margin-bottom: 2rem; }
}
#used-bus .ub-filter__cats { display: flex; flex-wrap: wrap; gap: .5rem; }
#used-bus .ub-filter__cat {
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .05em;
  color: #00b59d;
  background: #fff;
  border: solid 1px #00b59d;
  border-radius: 30px;
  padding: .5em 1.1em;
  cursor: pointer;
  transition: all .2s;
}
#used-bus .ub-filter__cat .num { font-size: .85em; margin-left: .25em; opacity: .8; }
#used-bus .ub-filter__cat.is-active { color: #fff; background: #00b555; border-color: #00b555; }
@media (min-width: 769px) {
  #used-bus .ub-filter__cat { font-size: .9375rem; }
  #used-bus .ub-filter__cat:hover { color: #fff; background: #00b59d; }
  #used-bus .ub-filter__cat.is-active:hover { background: #00b555; }
}
#used-bus .ub-filter__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem 1.5rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: solid 1px #ccc;
}
#used-bus .ub-filter__check { display: inline-flex; align-items: center; gap: .5em; font-size: .875rem; font-weight: 700; }
#used-bus .ub-filter__check input { width: 1.1em; height: 1.1em; accent-color: #c42b0c; margin: 0; }
#used-bus .ub-filter__sort { display: inline-flex; align-items: center; gap: .5em; font-size: .875rem; font-weight: 700; }
#used-bus .ub-filter__sort select { width: auto; height: 2.5rem; font-size: .875rem; }
#used-bus .ub-filter__count { font-size: .875rem; font-weight: 700; }
#used-bus .ub-filter__count strong { font-size: 1.25rem; color: #00b555; margin: 0 .1em; }

/* ---------- 車両カード ---------- */
#used-bus .ub-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}
@media (min-width: 769px) {
  #used-bus .ub-grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
}
@media (min-width: 1025px) {
  #used-bus .ub-grid { grid-template-columns: repeat(3, 1fr); }
}
#used-bus .ub-empty { display: none; padding: 3rem 1rem; text-align: center; font-weight: 700; }
#used-bus .ub-empty.is-show { display: block; }

#used-bus .ub-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: solid 1px #ddd;
  border-radius: .5rem;
  overflow: hidden;
  transition: box-shadow .2s, transform .2s;
}
#used-bus .ub-card[hidden] { display: none; }
@media (min-width: 769px) {
  #used-bus .ub-card { border-radius: 1rem; }
  #used-bus .ub-card:hover { box-shadow: 0 6px 18px rgba(7, 88, 88, .12); transform: translateY(-2px); }
}

#used-bus .ub-card__photo {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #fff;
  border-bottom: solid 1px #eee;
}
#used-bus .ub-card__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
#used-bus .ub-card__photo:hover img { opacity: .85; }
#used-bus .ub-card__count {
  position: absolute;
  right: .5rem;
  bottom: .5rem;
  display: inline-flex;
  align-items: center;
  gap: .35em;
  padding: .3em .7em;
  font-size: .75rem;
  font-weight: 700;
  color: #fff;
  background: rgba(7, 88, 88, .85);
  border-radius: 1em;
}
#used-bus .ub-card__count svg { width: 1.1em; height: 1.1em; }

#used-bus .ub-badges { position: absolute; top: .5rem; left: .5rem; display: flex; flex-wrap: wrap; gap: .3rem; }
#used-bus .ub-badge {
  display: inline-block;
  padding: .3em .75em;
  font-size: .6875rem;
  font-weight: 700;
  line-height: 1.3;
  color: #fff;
  border-radius: 1em;
}
#used-bus .ub-badge--new { background: #00b555; }
#used-bus .ub-badge--down { background: #c42b0c; }
#used-bus .ub-badge--shaken { background: #00b59d; }
#used-bus .ub-badge--allin { color: #075858; background: #f8fd71; }

#used-bus .ub-card__body { display: flex; flex-direction: column; flex-grow: 1; padding: 1rem 1rem 1.25rem; }
@media (min-width: 769px) {
  #used-bus .ub-card__body { padding: 1.25rem 1.25rem 1.5rem; }
}
#used-bus .ub-card__meta { display: flex; justify-content: space-between; gap: .5rem; font-size: .75rem; color: #666; }
#used-bus .ub-card__cat { font-weight: 700; color: #00b59d; }
#used-bus .ub-card__title { margin-top: .4rem; font-size: 1.125rem; font-weight: 700; line-height: 1.4; }
#used-bus .ub-card__year { display: block; font-size: .8125rem; font-weight: 700; color: #666; }

#used-bus .ub-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .75rem; margin-top: .75rem; }
#used-bus .ub-price__old { font-size: .875rem; color: #aaa; text-decoration: line-through; }
#used-bus .ub-price__now { font-size: 2.25rem; font-weight: 700; line-height: 1.1; color: #c42b0c; letter-spacing: .02em; }
#used-bus .ub-price__now small { font-size: .45em; margin-left: .1em; }
#used-bus .ub-price__allin { font-size: .8125rem; font-weight: 700; color: #c42b0c; margin-right: -.4rem; }
#used-bus .ub-price__note { width: 100%; font-size: .75rem; color: #666; }
#used-bus .ub-price__down {
  align-self: flex-start;
  display: inline-block;
  margin-top: .35rem;
  padding: .2em .7em;
  font-size: .75rem;
  font-weight: 700;
  color: #c42b0c;
  background: #fdeee9;
  border-radius: 1em;
}

#used-bus .ub-spec {
  display: grid;
  grid-template-columns: 5.5em 1fr;
  margin-top: 1rem;
  font-size: .875rem;
  line-height: 1.5;
  border-top: solid 1px #eee;
}
#used-bus .ub-spec dt,
#used-bus .ub-spec dd { padding: .45em 0; border-bottom: solid 1px #eee; }
#used-bus .ub-spec dt { font-weight: 700; color: #00b59d; }

#used-bus .ub-tags { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .75rem; }
#used-bus .ub-tags li { padding: .2em .7em; font-size: .75rem; font-weight: 700; background: #e5f7da; border-radius: 1em; }
#used-bus .ub-card__notes { margin-top: .75rem; font-size: .8125rem; line-height: 1.7; }

#used-bus .ub-card__actions { display: grid; gap: .5rem; margin-top: auto; padding-top: 1.25rem; }
#used-bus .ub-btn {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 3rem;
  padding: .6rem 2.25rem;
  font: inherit;
  font-size: .9375rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-align: center;
  border-radius: 30px;
  cursor: pointer;
  transition: all .2s;
}
#used-bus .ub-btn::after {
  content: "";
  position: absolute;
  right: 1.1rem;
  width: 6px;
  height: 6px;
  border-right: solid 2px;
  border-bottom: solid 2px;
  transform: rotate(-45deg);
  transition: right .3s;
}
#used-bus .ub-btn:hover::after { right: .85rem; }
#used-bus .ub-btn--primary { color: #fff; background: #00b555; border: solid 1px #00b555; }
#used-bus .ub-btn--outline { color: #00b59d; background: #fff; border: solid 1px #00b59d; }
#used-bus .ub-btn--tel { color: #075858; background: #fff; border: solid 1px #075858; }
@media (min-width: 769px) {
  #used-bus .ub-btn--primary:hover { opacity: .85; }
  #used-bus .ub-btn--outline:hover { color: #fff; background: #00b59d; }
}

/* 車両一覧の下の案内 */
#used-bus .ub-grid-note { margin-top: 1.5rem; font-size: .8125rem; line-height: 1.8; }

/* ---------- 売約済み車両 ---------- */
#used-bus .ub-sold-lead { text-align: center; line-height: 2; }
#used-bus .ub-sold-lead strong { font-size: 1.5em; color: #00b555; margin: 0 .1em; }
#used-bus .ub-sold-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .5rem;
  margin-top: 1.5rem;
}
@media (min-width: 769px) {
  #used-bus .ub-sold-grid { grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-top: 2rem; }
}
@media (min-width: 1025px) {
  #used-bus .ub-sold-grid { grid-template-columns: repeat(6, 1fr); }
}
#used-bus .ub-sold { position: relative; background: #fff; border-radius: .5rem; overflow: hidden; }
#used-bus .ub-sold[hidden] { display: none; }
#used-bus .ub-sold__img { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; }
#used-bus .ub-sold__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: .8; }
#used-bus .ub-sold__label {
  position: absolute;
  top: .4rem;
  left: .4rem;
  padding: .15em .6em;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .1em;
  color: #fff;
  background: #c42b0c;
  border-radius: .25rem;
}
#used-bus .ub-sold__name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  padding: .4rem .5rem .5rem;
  font-size: .6875rem;
  line-height: 1.4;
}
@media (min-width: 769px) {
  #used-bus .ub-sold__name { font-size: .75rem; }
}
#used-bus .ub-sold-more { margin-top: 1.5rem; text-align: center; }
#used-bus .ub-sold-more .ub-btn { max-width: 320px; margin: 0 auto; }

/* ---------- ご購入の流れ ---------- */
#used-bus .ub-flow { display: grid; gap: 1rem; counter-reset: step; }
@media (min-width: 769px) {
  #used-bus .ub-flow { grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
}
#used-bus .ub-flow__item {
  position: relative;
  padding: 1.25rem 1rem 1.25rem 4.25rem;
  background: #fff;
  border: solid 1px #ddd;
  border-radius: .5rem;
}
@media (min-width: 769px) {
  #used-bus .ub-flow__item { padding: 4.75rem 1.25rem 1.5rem; border-radius: 1rem; text-align: center; }
  #used-bus .ub-flow__item:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -1.05rem;
    width: 10px;
    height: 10px;
    border-top: solid 2px #00b555;
    border-right: solid 2px #00b555;
    transform: translateY(-50%) rotate(45deg);
  }
}
#used-bus .ub-flow__num {
  position: absolute;
  top: 1.1rem;
  left: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  font-size: 1.125rem;
  font-weight: 700;
  color: #fff;
  background: #00b555;
  border-radius: 50%;
}
@media (min-width: 769px) {
  #used-bus .ub-flow__num { top: 1.5rem; left: 0; right: 0; margin: 0 auto; width: 2.75rem; height: 2.75rem; }
}
#used-bus .ub-flow__title { font-size: 1.0625rem; font-weight: 700; }
#used-bus .ub-flow__text { margin-top: .4rem; font-size: .8125rem; line-height: 1.7; }
@media (min-width: 769px) {
  #used-bus .ub-flow__title { font-size: 1.125rem; }
  #used-bus .ub-flow__text { font-size: .875rem; text-align: left; }
}

/* ---------- レンタカー・パーツ ---------- */
#used-bus .ub-sub-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}
@media (min-width: 769px) {
  #used-bus .ub-sub-grid { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
}
#used-bus .ub-sub-grid--parts { grid-template-columns: repeat(2, 1fr); gap: .75rem; }
@media (min-width: 769px) {
  #used-bus .ub-sub-grid--parts { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
}
#used-bus .ub-sub-grid--parts .ub-card__body { padding: .75rem .75rem 1rem; }
#used-bus .ub-sub-grid--parts .ub-card__title { font-size: .9375rem; }
#used-bus .ub-part-price { margin-top: .5rem; font-size: 1.375rem; font-weight: 700; color: #c42b0c; line-height: 1.2; }
#used-bus .ub-part-price small { display: block; font-size: .5em; color: #666; }
@media (min-width: 769px) {
  #used-bus .ub-sub-grid--parts .ub-card__body { padding: 1.25rem; }
  #used-bus .ub-sub-grid--parts .ub-card__title { font-size: 1.0625rem; }
  #used-bus .ub-part-price { font-size: 1.625rem; }
}
#used-bus .ub-rental-table { width: 100%; margin-top: 1rem; }
#used-bus .ub-rental-table th,
#used-bus .ub-rental-table td { display: table-cell; padding: .5em .75em; font-size: .875rem; border: solid 1px #ccc; }
#used-bus .ub-rental-table th { width: 6em; text-align: center; color: #075858; background: #e5f7da; white-space: nowrap; }
#used-bus .ub-rental-table td { font-weight: 700; color: #c42b0c; }
#used-bus .ub-sub-note { margin-top: 1.5rem; font-size: .8125rem; line-height: 1.8; }

/* ---------- ご購入にあたって ---------- */
#used-bus .ub-notice__list li { position: relative; padding-left: 1.2em; font-size: .875rem; line-height: 1.8; }
#used-bus .ub-notice__list li + li { margin-top: .4rem; }
#used-bus .ub-notice__list li::before { content: "●"; position: absolute; left: 0; top: .15em; font-size: .6em; color: #00b555; }
@media (min-width: 769px) {
  #used-bus .ub-notice__list li { font-size: 1rem; }
}

/* ---------- お問い合わせ ---------- */
#used-bus .contact-area .ub-contact-info { margin-top: 1rem; font-size: .8125rem; font-weight: 700; line-height: 1.8; }
#used-bus .contact-area .ub-contact-info span { display: block; font-weight: 500; }
#used-bus .contact-area .phone a[href^="tel:"] { color: #00b59d; }