/* ==========================================================================
   輸送部門セクション専用スタイル
   ========================================================================== */
.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/transportation/main_image.webp') center/cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 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: #005288; /* 画像準拠 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/transportation/t_1.webp'); }
.tp-icon-2 { background-image: url('../images/transportation/t_2.webp'); }
.tp-icon-3 { background-image: url('../images/transportation/t_3.webp'); }
.tp-icon-4 { background-image: url('../images/transportation/t_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-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/transportation/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;
  }
}

@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-unit {
    font-size: 0.9rem;
  }
  .tp-kpi-desc {
    font-size: 0.7rem;
  }
}
@charset "UTF-8";

/* ==========================================================================
   ワンストップ輸送（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/transportation/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/transportation/one-stop_img.webp') 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: '｜';
  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: 0.9rem;
    line-height: 1.7;
  }
}

/* ==========================================================================
   対応できる輸送（Correspondence）セクション専用スタイル
   ========================================================================== */
.cr-section {
  width: 100%;
  background-color: #fff;
  padding: 90px 0;
}

/* タイトルエリア */
.cr-title-area {
  text-align: center;
  margin-bottom: 55px;
}
.cr-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;
}
.cr-section-subtitle {
  font-size: 15px;
  color: #777777;
  margin: 0;
  font-weight: bold;
  color: #4a72b2;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 20px;
}
.cr-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幅のメインコンテナ */
.cr-container {
  max-width: 1100px; /* 指定の横幅 */
  width: 92%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 40px; /* 上段と下段の行間 */
}

/* 上段：3カラム構造 */
.cr-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

/* 下段：2カラム構造（中央寄せ） */
.cr-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
  max-width: 724px; /* 3カラムのカードと横幅をジャストで揃えるための計算値 */
  width: 100%;
  margin: 0 auto; /* 下段を中央に寄せる */
}

/* 各輸送カード共通スタイル */
.cr-card {
  background-color: #fff;
  border-radius: 6px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.07);
  overflow: visible; /* アイコンを写真枠から下にはみ出させるためvisible */
  display: flex;
  flex-direction: column;
  position: relative;
}

/* カード上部：画像エリア */
.cr-card-thumb {
  position: relative;
  width: 100%;
  height: auto;
  aspect-ratio: 345 / 195; /* 写真の比率 345:195 */
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}
.cr-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}

/* 写真の上に重ねて配置する透かし線画イラスト（アイコン） */
.cr-card-icon {
  position: absolute;
  right: 15px; /* 右端から15px内側 */
  /* 【修正】基準位置から40px下に下げました（-5px - 40px = -45px） */
  bottom: -45px; 
  width: auto;
  height: 65px; /* 線画イラストの縦幅サイズ */
  object-fit: contain;
  pointer-events: none;
  z-index: 5; /* 写真や斜めラベルより前面に表示 */
}

/* 写真の上に重なるネイビーの斜めカットタイトル帯 */
.cr-card-label {
  position: absolute;
  left: 0;
  bottom: 0;
  background-color: #004077; /* 濃いブルー */
  color: #fff;
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", sans-serif;
  font-size: 1.15rem;
  font-weight: bold;
  padding: 8px 35px 8px 20px;
  margin: 0;
  letter-spacing: 0.05em;
  z-index: 3;
  
  /* 右側を斜めにカットするクリップパスエフェクト */
  clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 100%, 0 100%);
}

/* カード下部：テキストエリア */
.cr-card-body {
  padding: 35px 25px 35px 25px;
  flex: 1;
  display: flex;
  align-items: flex-start;
  position: relative;
  z-index: 2;
}
.cr-card-text {
  color: #333;
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", sans-serif;
  font-size: 1rem;
  line-height: 1.7;
  letter-spacing: 0.02em;
  margin: 0;
  text-align: justify;
}

/* ==========================================================================
   レスポンシブ対応 (タブレット・スマホ)
   ========================================================================== */
@media (max-width: 960px) {
  .cr-grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }
  .cr-grid-2 {
    max-width: 100%;
  }
}

@media (max-width: 680px) {
  .cr-section {
    padding: 60px 0;
  }
  .cr-title-area {
    margin-bottom: 35px;
  }
  .cr-section-title { font-size: 1.8rem; }
  .cr-section-lead { font-size: 0.9rem; padding: 0 10px; }
  
  .cr-grid-3, .cr-grid-2 {
    grid-template-columns: 1fr;
    gap: 25px;
  }
  .cr-card-body {
    padding: 25px 20px 30px 20px;
  }
  /* スマホ1列時は説明文の邪魔にならないよう右下に配置 */
  .cr-card-icon {
    position: absolute;
    right: 15px;
    bottom: 15px;
    top: auto;
  }
}

/* ==========================================================================
   特殊車両紹介（Trailer）セクション専用スタイル
   ========================================================================== */
.tr-section {
  width: 100%;
  background-color: #f4f6f9; /* 画面いっぱいに広がる薄いグレーの背景 */
  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: 3.8rem;
  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: 420px; /* テーブルの高さは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-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-card {
    width: 100%;
    padding: 0 20px 35px 20px;
  }
  .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: 2.8rem;
    margin-right: 0;
  }
  .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%;
  }
}
@charset "UTF-8";

/* ==========================================================================
   産業廃棄物収集運搬業許可（Industrial Waste）セクション専用スタイル
   ========================================================================== */
.iw-section {
  width: 100%;
  background-color: #fff;
  padding: 90px 0;
}

/* 1000pxベースのインナーコンテナ（PC用） */
.iw-container {
  max-width: 1000px;
  width: 100%;
  margin: 0 auto;
}

/* タイトルエリア */
.iw-title-area {
  text-align: center;
  margin-bottom: 50px;
}
.iw-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;
}
.iw-section-subtitle {
  font-size: 15px;
  color: #777777;
  margin: 0;
  font-weight: bold;
  color: #4a72b2;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 20px;
}
.iw-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;
}

/* 許可品目一覧 小見出し */
.iw-table-title {
  color: #002b66;
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", sans-serif;
  font-size: 1.35rem;
  font-weight: 800;
  margin-bottom: 20px;
  letter-spacing: 0.05em;
}

/* テーブルをラップする横スクロール用の外枠 */
.iw-table-wrapper {
  width: 100%;
  overflow-x: auto; /* 溢れた時に横スクロールさせる */
  -webkit-overflow-scrolling: touch; /* iOSでのスクロールを滑らかにする */
  margin-bottom: 25px;
}

/* --------------------------------------
 * テーブル本体のデザイン
 * ------------------------------------ */
.iw-table {
  width: 100%;
  border-collapse: separate; /* 【修正】sticky時の枠線を綺麗に表現するためcollapseから変更 */
  border-spacing: 0; /* 隙間をゼロにリセット */
  background-color: #fff;
}

/* テーブルヘッダー共通（濃いネイビー背景、白文字） */
.iw-table th {
  background-color: #1e457e;
  color: #fff;
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", sans-serif;
  font-size: 0.95rem;
  font-weight: bold;
  padding: 14px 10px;
  border-right: 1px solid #d4deea;
  border-bottom: 1px solid #d4deea;
  border-top: 1px solid #d4deea;
  text-align: center;
  white-space: nowrap;
}
.iw-table th:first-child {
  border-left: 1px solid #d4deea;
}

/* 【新規追加】スクロール時、ヘッダーの左端の「品目」セルも左端に固定 */
.iw-table th:first-child {
  position: sticky;
  left: 0;
  z-index: 10; /* 通常のth（横スクロールする都道府県）より前面に */
  background-color: #1e457e; /* スクロール時に文字が下に潜り込まないよう不透明背景に固定 */
}

/* 各セルの共通デザイン */
.iw-table td {
  border-right: 1px solid #d4deea;
  border-bottom: 1px solid #d4deea;
  padding: 12px 10px;
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", sans-serif;
  font-size: 0.95rem;
  text-align: center;
  color: #555;
  vertical-align: middle;
}

/* 【修正・機能強化】左端「品目」列：スクロール時に左端に完全固定 */
.iw-table td.iw-cell-name {
  position: sticky; /* 固定配置を有効化 */
  left: 0;          /* 左端ぴったりにピン留め */
  z-index: 5;       /* 都道府県の白セルが上に重ならないよう前面に出す */
  background-color: #edf5fa; /* スクロール時に後ろの〇印が透けないよう背景色を完全固定 */
  border-left: 1px solid #d4deea;
  color: #002b66;
  font-weight: bold;
  text-align: center;
  white-space: nowrap;
  width: 140px;     /* 横スクロール時にブレないよう幅を完全固定 */
  min-width: 140px;
}

/* 〇や〇※の記号の文字色 */
.iw-table tbody td:not(.iw-cell-name) {
  font-weight: 500;
  color: #4c6d96;
}

/* --------------------------------------
 * 下部：注釈テキストエリア
 * ------------------------------------ */
.iw-notes-area {
  width: 100%;
  margin-top: 15px;
}
.iw-note-item {
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", sans-serif;
  font-size: 0.85rem;
  font-weight: bold;
  color: #555;
  line-height: 1.7;
  margin-bottom: 5px;
}
.iw-note-item:last-child {
  margin-bottom: 0;
}

/* ==========================================================================
   レスポンシブ対応
   ========================================================================== */
@media (max-width: 1024px) {
  /* スマホ用の場合は横幅を全体の90％にする */
  .iw-container {
    width: 90%; 
  }
  
  /* スクロール可能な最低限のテーブル全体の横幅を維持 */
  .iw-table {
    width: 1000px; 
  }
}

@media (max-width: 600px) {
  .iw-section {
    padding: 60px 0;
  }
  .iw-section-title { font-size: 1.8rem; }
  .iw-table-title { font-size: 1.15rem; }
  .iw-note-item { font-size: 0.75rem; }
}
/* ==========================================================================
   最下部コンタクト（Contact CTA）セクション専用スタイル
   ========================================================================== */
.ct-section {
  width: 100%;
  /* 【指示】背景画像は画面全体に表示、縦横比 1500:673 を維持 */
  height: 44.8vw; 
  min-height: 520px; /* スマホや縮小時の最低限の高さを確保 */
  background: linear-gradient(rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0.45)),
              url('../images/transportation/contact_bg.webp') center/cover no-repeat;
  display: flex;
  align-items: center; /* 縦方向中央配置 */
  position: relative;
  box-sizing: border-box;
  padding: 40px 0;
}

/* 1100px幅のメインコンテナ */
.ct-container {
  max-width: 1100px; /* 【指示】コンテンツの横幅は1100px */
  width: 92%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 40px; /* 上段と下段の間の余白 */
}

/* --------------------------------------
 * 上段：メイン要素（テキスト ＋ ボタン）
 * ------------------------------------ */
.ct-main-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

/* 左側：テキストエリア */
.ct-text-area {
  flex: 1;
}
.ct-main-heading {
  color: #002b66; /* 深いネイビー */
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", sans-serif;
  font-size: 2.5rem; /* 画像のようにハッキリと大きく強調 */
  font-weight: 800;
  line-height: 1.5;
  letter-spacing: 0.05em;
  margin-bottom: 20px;
  position: relative;
  padding-left: 20px;
}
/* 青い細い左縦線の再現 */
.ct-main-heading::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 3px;
  background-color: #3b6b94;
}

.ct-sub-text {
  color: #333;
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", sans-serif;
  font-size: 0.95rem;
  font-weight: bold;
  line-height: 1.8;
  letter-spacing: 0.03em;
  padding-left: 20px;
}

/* 右側：ボタンエリア */
.ct-btn-area {
  display: flex;
  flex-direction: column;
  gap: 20px; /* 上下のボタンの隙間 */
  width: 340px; /* 画像のボタン幅に合わせた適正サイズ */
  flex-shrink: 0;
}
.ct-img-btn {
  display: block;
  width: 100%;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.ct-img-btn img {
  width: 100%;
  height: auto;
  display: block;
  /* 画像そのものに立体的な影がついているため、CSSの影は不要 */
}
/* マウスホバー時に少し沈む心地よいエフェクト */
.ct-img-btn:hover {
  opacity: 0.9;
  transform: translateY(2px);
}

/* --------------------------------------
 * 下段：円が切れて文字がはみ出る白い立体ボックス（デザイン完全再現）
 * ------------------------------------ */
.ct-features-box {
  width: 100%;
  background-color: #fff;
  border-radius: 6px;
  /* 画像に準拠した、柔らかく上品に浮き出る立体シャドウ */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); 
  padding: 50px 40px; /* 上下のパディングをゆったり確保 */
  box-sizing: border-box;
}

/* 4列の均等グリッド（PC版） */
.ct-features-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 15px; /* 左右のアイテム同士の間隔 */
}

.ct-feature-item {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

/* 【完全再現】右側がカットされて消えている「切れた円」の形状定義 */
.ct-circle {
  width: 110px;  /* 直径を少しコンパクトに調整 */
  height: 110px;
  border-radius: 50%;
  
  /* 【重要】上・左・下だけを濃いネイビーの線にし、右側の線を完全に消去（透明化） */
  border-top: 1px solid #002b66;
  border-left: 1px solid #002b66;
  border-bottom: 1px solid #002b66;
  border-right: 1px solid transparent; 
  
  display: flex;
  align-items: center;
  justify-content: flex-start; /* 文字を円の左側から開始させる */
  position: relative;
  box-sizing: border-box;
  
  /* 文字を右側へ大きくはみ出させるため、枠線からの溢れ出しを許可 */
  overflow: visible; 
  padding-left: 20px; /* 円の左側の内側余白 */
}

/* 【完全再現】円の右側へ大胆に突き抜けてはみ出る太文字テキスト */
.ct-circle-text {
  color: #002b66; /* 濃いネイビー */
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
  font-size: 0.95rem; /* しっかりとした視認性の高いサイズ */
  font-weight: 900; /* がっしりとした極太文字に設定 */
  line-height: 1.6;
  letter-spacing: 0.02em;
  text-align: left; /* お手本通り左寄せ */
  
  /* 【重要】横幅を円の直径（110px）よりも意図的に広く（180px等に）引き伸ばすことで、
     右側の切れた線の先へとダイナミックに文字をはみ出させます */
  width: 180px; 
  white-space: nowrap; /* テキストが途中で勝手に折り返されるのを防止 */
  flex-shrink: 0;
}
/* ==========================================================================
   レスポンシブ対応 (タブレット・スマホ)
   ========================================================================== */
@media (max-width: 960px) {
  .ct-section {
    height: auto; /* スマホ時は高さを自動可変に */
    padding: 60px 0;
  }
  .ct-main-row {
    flex-direction: column; /* 縦並びに変更 */
    align-items: center;
    gap: 40px;
  }
  .ct-text-area {
    text-align: center;
  }
  .ct-main-heading {
    font-size: 1.8rem;
    padding-left: 0;
    display: inline-block;
  }
  .ct-main-heading::before {
    display: none; /* スマホ中央寄せ時は縦線を非表示に */
  }
  .ct-sub-text {
    font-size: 0.9rem;
    padding-left: 0;
    br { display: none; } /* スマホ時は自動改行 */
  }
  .ct-btn-area {
    width: 100%;
    max-width: 340px;
  }
  
  /* 4つの特殊グラフィック（2列×2行のレイアウトに移行） */
  .ct-features-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 40px 20px; /* 縦横の隙間を最適化 */
    justify-items: center;
  }
}


@media (max-width: 480px) {
  .ct-main-heading {
    font-size: 1.4rem;
  }
  .ct-features-box {
    padding: 40px 15px;
  }
  /* スマホの細い画面では文字の折り返しや重なりを防ぐためタテ1列に美しく並び替え */
  .ct-features-grid {
    grid-template-columns: 1fr;
    gap: 30px 0;
  }
  .ct-circle {
    /* スマホ画面に合わせてはみ出し幅のバランスを中央に調整 */
    left: -20px; 
  }
}