/* ==============================================================
   TORABAS ONE — セクション改善: SERVICE / HORIZON を同並びに整理
   Loads AFTER styles.css & mobile.css
   ============================================================== */

/* ==================================================================
   SERVICE カード:
   [01] [中古トラック販売・認定中古車]
        Sales / Certified Used Truck
        ─────────────────────────────
   番号と日本語タイトルを1行で横並び。英字は日本語の直下に小さく。
   ================================================================== */

.service-v2__card {
  display: flex !important;
  flex-direction: column;
  gap: 16px !important;
}

/* 番号のサイズを日本語タイトルと調和するレベルに縮小 */
.service-v2__card__n {
  font-size: 44px !important;
  line-height: 1 !important;
  font-weight: 400;
  color: var(--red);
  flex-shrink: 0;
  letter-spacing: -0.02em;
}

/* 番号+タイトル を横一行に */
.service-v2__card__title {
  font-size: 22px !important;
  line-height: 1.35 !important;
  margin: 0 !important;
  letter-spacing: -0.005em;
}

/* card__n と card__title を横並びにするフレックスラッパー
   HTMLは変えず、::before/after は使わない → CSS Grid で 上段=[番号+タイトル], 下段=英字ライン */
.service-v2__card {
  display: grid !important;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "num   title"
    "num   en"
    "desc  desc"
    "meta  meta";
  column-gap: 20px;
  row-gap: 8px;
  align-items: baseline;
  padding-top: 40px;
}
.service-v2__card__n    { grid-area: num; align-self: start; padding-top: 2px; }
.service-v2__card__title{ grid-area: title; align-self: end; }
.service-v2__card__en   { grid-area: en; align-self: start; padding-bottom: 16px; margin-top: -2px; }
.service-v2__card__desc { grid-area: desc; margin-top: 8px; }
.service-v2__card__meta { grid-area: meta; margin-top: 4px; }

/* 英字は日本語の下に細くきれいに配置 */
.service-v2__card__en {
  border-bottom: 1.5px solid rgba(255,255,255,0.14);
  padding-bottom: 14px !important;
  margin-bottom: 4px;
  font-size: 10.5px !important;
  letter-spacing: 0.22em !important;
  color: rgba(255,255,255,0.5) !important;
}

@media (max-width: 860px) {
  .service-v2__card {
    padding-top: 32px !important;
    column-gap: 16px;
  }
  .service-v2__card__n {
    font-size: 34px !important;
  }
  .service-v2__card__title {
    font-size: 18px !important;
  }
  .service-v2__card__en {
    font-size: 9.5px !important;
    letter-spacing: 0.2em !important;
  }
}

/* ==================================================================
   HORIZON (future-v2) カード:
   [H.01]  TRUST   誇れる一台を、次の現場へ。
   ─────────────────────────────────────
   番号バッジと英字と日本語見出しを 1行 (2段) に整列。
   ================================================================== */

.future-v2__item {
  padding: 36px 26px 30px !important;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* 番号バッジ (H.01) を絶対配置ではなくフローに戻して、上段に組み込む */
.future-v2__item .code {
  position: static !important;
  display: inline-flex;
  align-items: center;
  padding: 4px 10px 3px !important;
  font-size: 10.5px !important;
  letter-spacing: 0.2em !important;
  align-self: flex-start;
  margin-bottom: 14px;
}

/* 英字大タイトルと日本語を横に並べる */
.future-v2__item__row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  column-gap: 18px;
  row-gap: 6px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line-2);
  margin-bottom: 16px;
}

.future-v2__item .en-big {
  font-size: clamp(28px, 2.4vw, 40px) !important;
  margin: 0 !important;
  white-space: nowrap;
  line-height: 1 !important;
  flex-shrink: 0;
}

.future-v2__item h3 {
  font-size: 17px !important;
  line-height: 1.4 !important;
  margin: 0 !important;
  color: var(--black);
  font-weight: 900;
  flex: 1 1 auto;
  min-width: 200px;
}

.future-v2__item p {
  font-size: 13.5px !important;
  line-height: 1.85 !important;
  margin: 0 0 16px !important;
}

.future-v2__item .bars {
  margin-top: auto;
}

@media (max-width: 1100px) {
  .future-v2__item .en-big { font-size: clamp(32px, 4vw, 44px) !important; }
  .future-v2__item h3 { font-size: 17px !important; }
}

@media (max-width: 860px) {
  .future-v2__item { padding: 28px 22px !important; }
  .future-v2__item__row {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding-bottom: 12px;
    margin-bottom: 14px;
  }
  .future-v2__item .en-big { font-size: 32px !important; white-space: normal; }
  .future-v2__item h3 { font-size: 17px !important; min-width: 0; }
  .future-v2__item .code { margin-bottom: 12px; }
}

/* ==============================================================
   2026-07-17 追加調整
   ============================================================== */

/* SERVICE 見出し: 行単位折返し + 文字数ベースのサイズ自動調整 */
.service-v2__title .nb { display: inline-block; white-space: nowrap; }
.service-v2__title {
  font-size: clamp(30px, min(5.6vw, calc((100vw - 2 * var(--pad) - 40px) * 0.545 / 11.8)), 64px) !important;
}
@media (max-width: 860px) {
  .service-v2__title {
    font-size: clamp(22px, min(8vw, calc((100vw - 40px) / 12)), 42px) !important;
  }
}

/* OUR BRANDS カード: 実ロゴ表示 */
.brand-card-t__lockup {
  display: block;
  height: 26px;
  width: auto;
}
.brand-card-t__kmark {
  display: block;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}
@media (max-width: 860px) {
  .brand-card-t__lockup { height: 22px; }
}