@charset "UTF-8";
/* ==========================================================================
   輸送部門セクション専用スタイル
   ========================================================================== */
.tp-wrapper {
  width: 100%;
  overflow: hidden; /* スマホ時の微小な横揺れ防止 */
}
.tp-wrapper *,
.tp-wrapper *::before,
.tp-wrapper *::after {
  box-sizing: border-box;
}

/* ==========================================================================
   メインビジュアルエリア（PC表示）
   ========================================================================== */
.tp-main-visual {
  position: relative;
  width: 100%;
  /* 縦横比 150:45 (＝100vw : 30vw) を維持する設計 */
  height: 30vw;
  min-height: 320px; /* スマートフォン等の極端な縮小時の視認性確保 */
  background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.2)),
              url('../images/power_distribution/main_image.webp') center/cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: flex-start; /* 右寄せ(flex-end)から左寄せに変更 */
  padding-left: 8%; /* 右の余白を左の余白に変更 */
}

/* キャッチコピー */
.tp-catch-container {
  color: #fff;
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
  text-align: left;
  font-family: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "MS PMincho", serif;
}
.tp-catch-sub {
  font-size: 2.2vw;
  font-weight: 500;
  letter-spacing: 0.15em;
  margin-bottom: 0.5em;
}
.tp-catch-main {
  font-size: 3.5vw;
  font-weight: 700;
  letter-spacing: 0.1em;
}
/* ==========================================================================
   実績データ（ブルーエリア - PC表示）
   ========================================================================== */
.tp-kpi-section {
  position: relative; /* タイトルの絶対配置の基準点 */
  max-width: 900px; /* 横幅900px指定 */
  width: 92%;
  margin: -50px auto 50px auto; /* メイン画像にぴったり50px被せる */
  background-color: #3c6eb4; /* 画像準拠 of ディープブルー */
  color: #fff;
  padding: 40px;
  border-radius: 4px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  z-index: 10;
}

/* 枠外の上に左寄せで配置する白の透かしタイトル */
.tp-kpi-outer-title {
  position: absolute;
  left: 10px;
  top: -38px;
  font-size: 1.4rem;
  letter-spacing: 0.3em;
  font-weight: 800;
  font-family: 'Arial Black', "Helvetica Neue", Arial, sans-serif;
  color: #fff;
  opacity: 0.8;
  text-transform: uppercase;
  margin: 0;
  z-index: 15;
}

/* 4カラムグリッド構造 */
.tp-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 15px;
}

/* 各実績項目 */
.tp-kpi-item {
  position: relative;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-right: 1px solid rgba(255, 255, 255, 0.2);
  padding: 5px 10px;
  min-height: 160px;
  
  background-position: left top;
  background-size: auto 65%;
  background-repeat: no-repeat;
}
.tp-kpi-item:last-child {
  border-right: none;
}

/* 個別の透かし画像パス指定 */
.tp-icon-1 { background-image: url('../images/power_distribution/p_1.webp'); }
.tp-icon-2 { background-image: url('../images/power_distribution/p_2.webp'); }
.tp-icon-3 { background-image: url('../images/power_distribution/p_3.webp'); }
.tp-icon-4 { background-image: url('../images/power_distribution/p_4.webp'); }

/* 各テキスト要素（PC版） */
.tp-kpi-header {
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", sans-serif;
  font-size: 1.1rem;
  font-weight: bold;
  letter-spacing: 0.05em;
  z-index: 2;
  text-shadow: 1px 1px 2px #005288;
}
.tp-kpi-number {
  font-size: 3rem;
  font-weight: bold;
  font-family: 'Arial', sans-serif;
  line-height: 1;
  margin: 15px 0;
  z-index: 2;
}
.tp-kpi-number1 {
  font-size: 2.0rem;
  font-weight: bold;
  font-family: 'Arial', sans-serif;
  line-height: 1;
  margin: 15px 0;
  z-index: 2;
}

.tp-kpi-unit {
  font-size: 1.1rem;
  font-weight: bold;
  margin-left: 4px;
}
.tp-kpi-desc {
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", sans-serif;
  font-size: 0.85rem;
  opacity: 0.95;
  line-height: 1.4;
  z-index: 2;
}

/* ==========================================================================
   レスポンシブ対応 (タブレット・スマホ)
   ========================================================================== */
@media (max-width: 768px) {
  /* メインビジュアル設定 */
  .tp-main-visual {
    background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.2)),
                url('../images/power_distribution/main_image_sp.webp') center/cover no-repeat;
    width: 100%;
    height: auto;
    aspect-ratio: 376 / 261; /* 指定の縦横比 376:261 */
    min-height: auto;
    justify-content: center;
    padding-right: 0;
  }
  
  .tp-catch-container {
    text-align: center;
  }
  .tp-catch-sub { font-size: 5.5vw; }
  .tp-catch-main { font-size: 7.5vw; }

  /* 実績データエリア（テキスト以外をPC版の80%にスケールダウン） */
  .tp-kpi-section {
    width: 80%; /* スマホ幅80％ */
    margin: -40px auto 40px auto; /* 被り幅を 50px から 40px に縮小 */
    padding: 32px;
    border-radius: 3px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  }

  /* 枠外タイトル */
  .tp-kpi-outer-title {
    top: -30px;
    font-size: 1.1rem;
    left: 8px;
    font-weight: 700;
  }

  /* 【修正】グリッド構造：スマホ画面でも「2列×2行」を維持 */
  .tp-kpi-grid {
    grid-template-columns: repeat(2, 1fr); /* 2列に固定 */
    gap: 28px 12px; /* 縦・横の隙間 */
  }

  /* 各項目の枠・背景サイズ */
  .tp-kpi-item {
    min-height: 128px;
    padding: 4px 8px;
    background-size: auto 52%; /* 透かし背景のサイズを縮小 */
    border-right: 1px solid rgba(255, 255, 255, 0.2); /* 左右の区切り線を調整 */
  }
  /* 2列並びの右側（2つ目と4つ目）の右線を消す */
  .tp-kpi-item:nth-child(2n) {
    border-right: none;
  }

  /* 数字の間隔マージン */
  .tp-kpi-number {
    font-size: 2.6rem;
    margin: 12px 0;
  }
  .tp-kpi-number1 {
    font-size: 1.6rem; /* 数字自体の主張が強すぎないよう微調整 */
    margin: 12px 0; /* マージンを 15px から 12px (80%) に縮小 */
  }
  .tp-kpi-desc {
    font-size: 0.70rem;
  }
}

@media (max-width: 480px) {
  /* スマホ縦画面での調整 */
  .tp-kpi-section {
    width: 80%; /* 80%幅を維持 */
    padding: 24px 16px;
  }
  .tp-kpi-outer-title {
    left: 4px;
    font-size: 0.95rem;
    top: -24px;
  }
  
  /* 【修正】1列に落ちないよう、480px以下でも「2列×2行」を完全にキープ */
  .tp-kpi-grid {
    grid-template-columns: repeat(2, 1fr); /* 2列指定 */
    gap: 24px 8px; /* 狭い画面に合わせて間隔を微調整 */
  }
  
  .tp-kpi-item {
    border-bottom: none; /* 縦1列リスト用の下線を無効化 */
    padding-bottom: 0;
    min-height: 110px; /* 画面幅に合わせて高さを微調整 */
    text-align: center; /* 2列並びなので中央揃えの綺麗な見栄えを維持 */
    padding-left: 10px; /* 2列並び用にパディングを最適化 */
  }
  
  .tp-kpi-number {
    font-size: 2.2rem; /* 画面が狭くても文字がはみ出さないよう数字を少しコンパクトに */
  }
  .tp-kpi-number1 {
    font-size: 1.4rem; /* 数字自体の主張が強すぎないよう微調整 */
    margin: 12px 0; /* マージンを 15px から 12px (80%) に縮小 */
  }
  .tp-kpi-unit {
    font-size: 0.9rem;
  }
  .tp-kpi-desc {
    font-size: 0.7rem;
  }
}
/* ==========================================================================
   ワンストップ輸送（ONE-STOP TRANSPORT）セクション専用スタイル
   ========================================================================== */
.ost-section {
  width: 100%;
  background-color: #fff;
  padding: 80px 0;
}

/* 1100px幅のメインコンテナ */
.ost-container {
  max-width: 1100px;
  width: 92%;
  margin: 0 auto;
  position: relative; /* 絶対配置の基準 */
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  /* フロー枠の高さ(450px)から、正確に50pxだけ下に飛び出させるため、
     この上部エリア自体の高さを一律「400px」に固定・最適化 */
  height: 400px; 
}

/* --------------------------------------
 * 左側：テキストエリア
 * ------------------------------------ */
.ost-left-content {
  width: 60%;
  padding-right: 20px;
}
.ost-sub-title {
  color: #002b66;
  font-family: 'Arial', sans-serif;
  font-size: 1.5rem;
  font-weight: bold;
  letter-spacing: 0.15em;
  margin-bottom: 25px;
  text-transform: uppercase;
}
/* 【修正】明朝体を外し、ハッキリとしたモダンなゴシック体に固定 */
.ost-main-heading {
  color: #002b66;
  /* 明朝体を排し、標準的な視認性の高いゴシック体フォントを指定 */
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  font-size: 2.1rem;
  font-weight: 800; /* 力強い太文字に変更 */
  line-height: 1.6; /* ゴシック体のバランスに合わせて行間を微調整 */
  letter-spacing: 0.05em;
}

/* --------------------------------------
 * 右側：ワンストップフローエリア
 * ------------------------------------ */
.ost-right-flow {
  position: absolute;
  right: 50px; /* 下部画像の右端から50px内側 */
  bottom: -50px; /* 上部エリアの底辺から50pxだけ下に突き出すよう固定 */
  width: 410px;
  aspect-ratio: 41 / 45; /* 縦横比 41:45 (横410px × 縦450px) */
  background-color: #f2f5f9;
  padding: 40px 45px 30px 45px;
  z-index: 10; /* 下部の画像より前面に表示させて50pxかぶせる */
  
  /* 右下の大きな「ONE STOP」透かしサークルロゴの設定 */
  background-image: url('../images/power_distribution/one-stop.webp');
  background-position: right -10px bottom -10px;
  background-size: 260px auto;
  background-repeat: no-repeat;
}

/* 上部のネイビーのアクセントバー */
.ost-flow-accent-line {
  position: absolute;
  top: 0;
  left: 45px;
  width: 35px;
  height: 5px;
  background-color: #002b66;
}

/* タイムライン構造 */
.ost-flow-list {
  list-style: none;
  position: relative;
  padding-left: 25px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
/* フローを繋ぐ左側の縦線 */
.ost-flow-list::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 10px;
  bottom: 10px;
  width: 1px;
  background-color: #002b66;
}

/* 各フロー項目 */
.ost-flow-item {
  position: relative;
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  font-size: 1.2rem;
  font-weight: 900; /* 力強い太文字 */
  color: #002b66;
  letter-spacing: 0.05em;
  line-height: 0.9;
}

/* ピン留めの丸印（○） */
.ost-flow-item::before {
  content: '';
  position: absolute;
  left: -25px;
  top: 3px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background-color: #fff;
  border: 1px solid #002b66;
  z-index: 2;
}

.ost-flow-item span {
  position: relative;
  z-index: 5;
}

/* --------------------------------------
 * 下部：背景画像エリア
 * ------------------------------------ */
.ost-bottom-image {
  max-width: 1100px;
  width: 92%;
  height: auto;
  aspect-ratio: 110 / 35; /* 縦横比 110:35 */
  margin: 0 auto;
  background: url('../images/power_distribution/one-stop_img.webp?260926') center/cover no-repeat;
  border-radius: 4px;
  position: relative;
  z-index: 5;
}

/* ==========================================================================
   レスポンシブ対応 (タブレット・スマホ)
   ========================================================================== */
@media (max-width: 960px) {
  .ost-container {
    flex-direction: column;
    gap: 30px;
    height: auto;
  }
  .ost-left-content {
    width: 100%;
    padding-right: 0;
  }
  .ost-right-flow {
    position: relative;
    right: auto;
    bottom: auto;
    margin: 0 auto;
    width: 80%;
    max-width: 410px;
  }
  .ost-main-heading {
    font-size: 1.8rem;
    br { display: none; }
  }
  .ost-bottom-image {
    margin-top: -50px;
  }
}

@media (max-width: 576px) {
  .ost-section {
    padding-top: 50px;
    padding-bottom: 40px;
  }
  .ost-sub-title {
    font-size: 1.2rem;
    margin-bottom: 15px;
  }
  .ost-main-heading {
    font-size: 1.4rem;
    line-height: 1.6;
  }
  .ost-right-flow {
    padding: 35px 30px 30px 30px;
    background-size: 200px auto;
    background-position: right -15px bottom -15px;
  }
  .ost-flow-accent-line {
    left: 30px;
  }
}
/* ==========================================================================
   輸送部門の特色（Features）セクション専用スタイル
   ========================================================================== */
.ft-section {
  width: 100%;
  background-color: #f4f6f9; /* 画面いっぱいに広がる薄いグレーの背景 */
  padding: 100px 0;
}

/* タイトルエリア */
.ft-title-area {
  text-align: center;
  margin-bottom: 60px;
}
.ft-section-title {
  font-size: 32px;
  font-weight: bold;
  color: #0b316a;
  margin: 0 0 10px 0;
  letter-spacing: 0.05em;
  font-family: "Arial Black", "Impact", "Noto Sans JP", "Hiragino Sans", "Segoe UI Black", "Meiryo UI", sans-serif;
}
.ft-section-subtitle {
  font-size: 15px;
  color: #777777;
  margin: 0;
  font-weight: bold;
  color: #4a72b2;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* 1000px幅のコンテンツコンテナ */
.ft-container {
  max-width: 1000px; /* 指定の横幅 */
  width: 92%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 30px; /* カード同士の間隔 */
}

/* 各特色カード（白背景・シャドウ） */
.ft-card {
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: stretch; /* アイコンエリアとテキストエリアの縦幅を統一 */
  overflow: hidden;
  position: relative;
}

/* 左側：アイコンエリア（修正：幅180px、左右余白25px、赤線はpaddingを除外） */
.ft-icon-area {
  width: 180px; /* 指定の幅 */
  flex-shrink: 0;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 25px 25px 20px 25px; /* 上部にも少し余白を設けてラインとのバランスを最適化 */
  border-right: 1px solid #eef2f6; /* テキストエリアとの境界の薄い縦線 */
  position: relative; /* 疑似要素ラインの基準点 */
}

/* 【修正】左右のpadding 25pxを完全に白のまま残し、中央の130pxだけに赤線を引く設定 */
.ft-icon-area::before {
  content: '';
  position: absolute;
  top: 0;
  left: 25px;  /* 左側のpadding 25px分を空ける */
  right: 25px; /* 右側のpadding 25px分を空ける */
  height: 5px; /* 線の太さ */
  background-color: #961e23; /* 指定の赤色 */
  z-index: 2;
}

.ft-icon-img {
  width: 100%; /* 180pxから左右余白50pxを引いた横幅（130px）に自動フィット */
  height: auto;
  object-fit: contain;
  position: relative;
  z-index: 1;
}

/* 右側：テキストエリア */
.ft-text-content {
  flex: 1;
  padding: 40px 45px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* 各特色タイトル（数字＋見出し） */
.ft-card-title {
  color: #002b66;
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", sans-serif;
  font-size: 1.3rem;
  font-weight: 800;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  letter-spacing: 0.03em;
}

/* 見出しのナンバーと仕切り線「1 ｜ 」 */
.ft-card-title span {
  font-size: 1.8rem;
  font-family: 'Arial Black', sans-serif;
  color: #002b66;
  margin-right: 12px;
  position: relative;
  display: inline-flex;
  align-items: center;
}
.ft-card-title span::after {
  content: '\FF5C';
  font-size: 1.2rem;
  font-weight: 300;
  color: #ccc;
  margin-left: 12px;
}

/* 特色説明文 */
.ft-card-desc {
  color: #444;
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", sans-serif;
  font-size: 1.1rem;
  line-height: 1.8;
  letter-spacing: 0.03em;
  text-align: justify;
}

/* ==========================================================================
   レスポンシブ対応 (タブレット・スマホ)
   ========================================================================== */
@media (max-width: 768px) {
  .ft-section {
    padding: 60px 0;
  }
  .ft-title-area {
    margin-bottom: 40px;
  }
  .ft-section-title {
    font-size: 1.8rem;
  }
  
  /* スマホ環境では横並びを解除して縦積みに変更 */
  .ft-card {
    flex-direction: column;
    align-items: center;
  }
  .ft-icon-area {
    width: 100%;
    max-width: 180px; /* スマホ時もアイコン枠の最大幅を180pxに統一 */
    border-right: none;
    border-bottom: 1px solid #eef2f6;
    padding: 25px 25px 20px 25px;
  }
  .ft-text-content {
    padding: 30px 24px;
  }
  .ft-card-title {
    font-size: 1.15rem;
    flex-wrap: wrap;
  }
  .ft-card-desc {
    font-size: 1.0rem;
    line-height: 1.7;
  }
}

/* ==========================================================================
   保有車両紹介（Trailer）セクション専用スタイル
   ========================================================================== */
.tr-section {
  width: 100%;
  padding: 100px 0 120px 0; /* 下部にテーブルが配置されるため、底面のパディングを調整 */
}

/* タイトルエリア */
.tr-title-area {
  text-align: center;
  margin-bottom: 60px;
}
.tr-section-title {
  font-size: 32px;
  font-weight: bold;
  color: #0b316a;
  margin: 0 0 10px 0;
  letter-spacing: 0.05em;
  font-family: "Arial Black", "Impact", "Noto Sans JP", "Hiragino Sans", "Segoe UI Black", "Meiryo UI", sans-serif;
}
.tr-section-subtitle {
  font-size: 15px;
  color: #777777;
  margin: 0;
  font-weight: bold;
  color: #4a72b2;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 20px;
}
.tr-section-lead {
  color: #333;
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", sans-serif;
  font-size: 1rem;
  font-weight: bold;
  letter-spacing: 0.05em;
}

/* 1100px幅のメインコンテナ */
.tr-container {
  max-width: 1100px;
  width: 92%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 80px; /* PC版の要素同士の間隔 */
}

/* 車両2カラムレイアウト */
.tr-vehicle-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  justify-items: center;
  gap: 80px 40px;
}

/* 各車両項目：横幅500px・立体的な白いボックスカード */
.tr-vehicle-card {
  position: relative;
  width: 500px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06), 0 1px 5px rgba(0, 0, 0, 0.04); 
  padding: 0 40px 45px 40px;
  margin-top: 100px;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

/* 画像制御グラフィックコンテナ */
.tr-graphic-container {
  position: relative;
  width: 100%;
  height: 60px;
}
.tr-vehicle-img {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 105%;
  max-width: none;
  height: auto;
  z-index: 3;
}

/* 透かしラッパー */
.tr-watermark-wrapper {
  width: 100%;
  margin-top: 50px;
  text-align: right;
  line-height: 1;
}
.tr-bg-text-watermark {
  display: inline-block;
  font-family: 'Arial Black', sans-serif;
  font-size: 2.5rem;
  font-weight: 900;
  color: #f0f3f6;
  letter-spacing: 0.08em;
  line-height: 1;
  pointer-events: none;
  margin-right: -20px;
}

/* ボトムコンテンツコンテナ */
.tr-card-content-bottom {
  margin-top: 15px;
  display: flex;
  flex-direction: column;
}

/* 斜めカットタイトルラベル */
.tr-vehicle-label {
  align-self: flex-start;
  background-color: #3b6b94;
  color: #fff;
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", sans-serif;
  font-size: 1.35rem;
  font-weight: bold;
  padding: 10px 45px 10px 25px;
  margin: 0 0 25px -40px;
  letter-spacing: 0.05em;
  clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 100%, 0 100%);
}

.tr-vehicle-desc {
  color: #333;
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", sans-serif;
  font-size: 1.0rem;
  line-height: 1.8;
  letter-spacing: 0.02em;
}

/* メリットエリア */
.tr-merit-title {
  color: #cbd7e3;
  font-family: 'Arial Black', sans-serif;
  font-size: 1.8rem;
  letter-spacing: 0.08em;
  line-height: 1;
  margin-bottom: 20px;
}
.tr-merit-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.tr-merit-list li {
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", sans-serif;
  font-size: 1.05rem;
  font-weight: bold;
  color: #002b66;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 15px;
}
.tr-merit-list li:last-child {
  margin-bottom: 0;
}

.tr-check-circle {
  width: 24px;
  height: 24px;
  background-color: #961e23;
  color: #fff;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 900;
  flex-shrink: 0;
  padding-bottom: 1px;
}

/* --------------------------------------
 * 下段：車両軌跡図の案内枠ボックス
 * ------------------------------------ */
.tr-info-box {
  background-color: #fff;
  border: none;
  max-width: 800px;
  width: 100%;
  margin: 30px auto 0 auto;
  padding: 40px 10px 40px 90px;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  overflow: visible;
  box-sizing: border-box;
}
.tr-info-bulb-img {
  position: absolute;
  left: 10px;
  top: 15%;
  width: 70px;
  height: auto;
  opacity: 0.15;
  pointer-events: none;
  z-index: 1;
}
.tr-info-left {
  position: relative;
  z-index: 5;
  width: 500px;
  flex-shrink: 0;
}
.tr-info-text {
  color: #003366;
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", sans-serif;
  font-size: 1.05rem;
  font-weight: bold;
  line-height: 1.9;
  letter-spacing: 0.03em;
  margin-bottom: 35px;
}
.tr-info-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  width: 320px;
  background-color: #fff;
  border: 2px solid #002b66;
  color: #002b66;
  text-decoration: none;
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", sans-serif;
  font-size: 1.1rem;
  font-weight: bold;
  padding: 12px 0;
  position: relative;
  box-sizing: border-box;
  transition: background-color 0.3s ease;
  background: linear-gradient(to bottom, #fff 60%, #f0f2f5 60%);
}
.tr-btn-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  background-color: #002b66;
  color: #fff;
  border-radius: 50%;
  font-size: 0.8rem;
  padding-bottom: 2px;
}
.tr-info-btn:hover {
  background: #002b66;
  color: #fff;
}
.tr-info-btn:hover .tr-btn-arrow {
  background-color: #fff;
  color: #002b66;
}
.tr-info-right-img {
  position: absolute;
  right: -60px;
  top: -60px;
  width: 380px;
  z-index: 2;
  pointer-events: none;
}
/* -------------------------------------------------------------
 * 保有車両一覧ブロック（修正：案内ブロックの下に自然に並ぶ仕様）
 * ------------------------------------------------------------- */
.tr-vl-block {
  max-width: 1000px; /* 幅1000pxで作成 */
  width: 100%;
  /* 【修正】マイナスマージンによる被りを無効にし、案内ボックスの下に配置 */
  margin: 50px auto 0 auto; 
  position: relative;
}

/* 見出しスタイル */
.tr-vl-title {
  color: #002b66;
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", sans-serif;
  font-size: 1.4rem;
  font-weight: 800;
  margin-bottom: 25px;
  letter-spacing: 0.05em;
}

/* テーブルを左右に並べるコンテナ */
.tr-vl-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
}

/* 各テーブル設定 */
.tr-vl-table {
  width: 100%;
  height: 360px; /* テーブルの高さは420px */
  border-collapse: collapse;
  table-layout: fixed;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
}

.tr-vl-table td {
  border: 1px solid #cbd7e3;
  padding: 0 24px;
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", sans-serif;
  font-size: 0.95rem;
  color: #333;
  vertical-align: middle;
}

/* 左側セル：薄い水色背景 */
.tr-vl-table td.tr-vl-cell-name {
  background-color: #e9f6fc;
  color: #002b66;
  font-weight: bold;
  width: 73%;
  text-align: left;
}
.tr-vl-table td.tr-vl-cell-name1 {
  background-color: #ffffff;
  color: #002b66;
  font-weight: bold;
  width: 73%;
  text-align: center;
}

/* 右側セル：白背景・中央寄せ */
.tr-vl-table td.tr-vl-cell-count {
  background-color: #fff;
  color: #333;
  width: 27%;
  text-align: center;
}

/* ==========================================================================
   レスポンシブ対応 (タブレット・スマホ)
   ========================================================================== */
@media (max-width: 1040px) {
  .tr-vehicle-grid {
    grid-template-columns: 1fr;
    gap: 60px;
  }
}

@media (max-width: 768px) {
  .tr-container {
    gap: 50px;
  }
  
  /* スマホ版の場合は幅は全体の80％に指定 */
  .tr-vl-block {
    width: 80%;
    margin-top: 30px; /* スマホ用の適正な間隔に変更 */
  }
  
  /* スマホ版の場合は縦に引っ付ける */
  .tr-vl-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }
  
  /* 上下のテーブルが結合したように見せるための線調整 */
  .tr-vl-table:first-child {
    border-bottom: none;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }
  .tr-vl-table:last-child {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }
  
  /* スマホ版テーブル高さの可変化 */
  .tr-vl-table {
    height: auto;
  }
  .tr-vl-table td {
    padding: 15px 15px;
    font-size: 0.85rem;
  }
}

@media (max-width: 540px) {
  .tr-vehicle-grid {
    width: 100%;
    box-sizing: border-box;
    padding: 0 15px; /* 画面左右に最低限の余白を作る */
  }

  .tr-vehicle-card {
    width: 100%;
    max-width: 100%; /* 絶対に画面幅を超えないように制御 */
    padding: 0 20px 35px 20px;
    margin-top: 60px; /* スマホ用に上の余白を少し縮小 */
    box-sizing: border-box;
  }

  /* 画像がカードの横幅を突き破って画面外に出るのを防ぐ */
  .tr-vehicle-img {
    width: 100%; /* 105% から 100% に修正してはみ出し防止 */
  }

  .tr-vehicle-label {
    margin-left: -20px;
    font-size: 1.15rem;
  }
  .tr-graphic-container {
    height: 40px;
  }
  .tr-watermark-wrapper {
    margin-top: 35px;
  }
  
  /* 透かし文字が長すぎて右側にはみ出るのを防ぐ */
  .tr-bg-text-watermark {
    font-size: 1.8rem; /* 2.8rem から縮小してはみ出し防止 */
    margin-right: 0;
    word-break: break-all;
  }

  /* 既存のその他スマホスタイル */
  .tr-info-box {
    flex-direction: column;
    align-items: flex-start;
    padding: 40px 20px;
    overflow: hidden;
  }
  .tr-info-left {
    max-width: 100%;
  }
  .tr-info-bulb-img {
    display: none;
  }
  .tr-info-right-img {
    position: relative;
    right: auto;
    top: auto;
    margin: 20px auto 0 auto;
    width: 240px;
  }
  .tr-vehicle-desc br,
  .tr-info-text br {
    display: none;
  }
  .tr-info-btn {
    width: 100%;
  }}