/* =========================================================
   page-fleet.css（完成版 / 1本化）
   - 競合しやすい .fleet-card / .fleet-section__header 等を整理
   - トラック：移動=#fleetTruck / 拡大=.fleet-truck（transform競合なし）
   - スマホは「変数だけ差し替え」でズレにくく
   ========================================================= */


/* =========================================================
   0) ページ変数（fleet全体）
   ========================================================= */
body[data-page="fleet"]{
  /* 見出し・セクション幅 */
  --fleet-max: 1200px;

  /* トラック背景の流れ */
  --bg-time: 22s;

  /* トラック1ループ時間 */
  --loop: 10s;

  /* 接地（PC） */
  --truck-bottom: -40%;

  /* トラック見た目サイズ（PC） */
  --truck-w: min(920px, 92vw);
  --truck-scale: 1.00;

  /* 荷台ロゴ（PC） */
  --sign-top: 32%;
  --sign-left: 76%;
  --sign-w: 12%;
  --sign-max: 190px;

  /* タイヤ（PC） */
  --wheel-size: 7.8%;
  --wheel-bottom: 30.8%;
  --wheel-spin: .55s; /* 回転速度 */
}


/* =========================================================
   1) 導入文・セクション共通
   ========================================================= */

/* 導入文 */
body[data-page="fleet"] .fleet-intro{
  max-width: var(--fleet-max);
  margin: 0 auto 28px;
  padding: 0 16px;
  font-size: 15px;
  line-height: 1.9;
  color:#475569;
}

/* セクション共通ラッパ */
body[data-page="fleet"] .fleet-section{
  max-width: var(--fleet-max);
  margin: 40px auto 60px;
  padding: 0 16px;
}

/* セクション見出し（統一） */
body[data-page="fleet"] .fleet-section__header{
  text-align: left;
  margin-bottom: 16px;
}

body[data-page="fleet"] .fleet-section__title{
  margin: 0 0 6px;
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: 900;
  letter-spacing: .04em;
  color:#0b2a55;
}

body[data-page="fleet"] .fleet-section__lead{
  margin: 0;
  font-size: 14px;
  line-height: 1.85;
  color:#475569;
}


/* =========================================================
   2) トラックアニメ（完全版・1本化）
   ========================================================= */

/* セクション帯 */
body[data-page="fleet"] .fleet-visual{
  background:#f5f9ff;
  padding: 32px 0 32px;
}

/* シーン枠 */
body[data-page="fleet"] .fleet-visual__scene{
  position:relative;
  width:min(var(--fleet-max), calc(100% - 32px));
  margin:0 auto;
  aspect-ratio: 16 / 5;
  overflow:hidden;
  border-radius:24px;
  box-shadow:0 18px 45px rgba(15,23,42,.08);
  background:#eaf3ff;
}

/* 背景（街並み） */
body[data-page="fleet"] .fleet-visual__bg{
  position:absolute;
  inset:0;
  z-index:1;
  background:url("../images/matinami.png") repeat-x bottom center;
  background-size:auto 100%;
  animation:fleet-bg-scroll var(--bg-time) linear infinite;
  animation-play-state: paused;
  will-change: background-position;
}
@keyframes fleet-bg-scroll{
  from{ background-position:0 100%; }
  to  { background-position:100% 100%; }
}
body[data-page="fleet"] .fleet-visual__scene.is-play .fleet-visual__bg{
  animation-play-state: running;
}

/* ========== トラック（移動担当：#fleetTruck） ========== */
body[data-page="fleet"] #fleetTruck{
  position:absolute;
  left:50%;
  bottom: var(--truck-bottom);
  z-index:5;
  pointer-events:none;
  opacity:0;
  transform: translate3d(calc(-50% + 110vw),0,0); /* 右外待機 */
  will-change: transform, opacity;
}

/* is-playで走行ループ */
body[data-page="fleet"] .fleet-visual__scene.is-play #fleetTruck{
  opacity:1;
  animation:fleet-truck-loop var(--loop) linear infinite;
}

/* 右外→中央停止→左外 */
@keyframes fleet-truck-loop{
  0%    { transform: translate3d(calc(-50% + 110vw),0,0); }
  30%   { transform: translate3d(-50%,0,0); }                 /* 到着 */
  70%   { transform: translate3d(-50%,0,0); }                 /* 停止 */
  92%   { transform: translate3d(calc(-50% - 130vw),0,0); }   /* 退場 */
  100%  { transform: translate3d(calc(-50% - 130vw),0,0); }
}

/* ========== トラック（見た目担当：.fleet-truck） ========== */
body[data-page="fleet"] .fleet-truck{
  position:relative;
  width: var(--truck-w);
  transform: scale(var(--truck-scale));
  transform-origin: 50% 100%;
}

/* 車体 */
body[data-page="fleet"] .fleet-truck__body{
  display:block;
  width:100%;
  height:auto;
  filter: drop-shadow(0 18px 30px rgba(0,0,0,.16));
  animation:fleet-truck-bob 2.4s ease-in-out infinite;
  transform-origin:center bottom;
}
@keyframes fleet-truck-bob{
  0%,100%{ transform: translateY(0); }
  50%    { transform: translateY(1px); }
}

/* ========== 荷台ロゴ（画像） ========== */
body[data-page="fleet"] .fleet-truck__sign{
  position:absolute;
  top: var(--sign-top);
  left: var(--sign-left);
  transform: translate(-50%, -50%);
  width: var(--sign-w);
  max-width: var(--sign-max);
  z-index:12;
  pointer-events:none;
}
body[data-page="fleet"] .fleet-truck__sign img{
  display:block;
  width:100%;
  height:auto;
}
/* ========== タイヤ（CSS描画＆回転） ========== */
body[data-page="fleet"] .fleet-truck__wheel{
  position:absolute;
  width: var(--wheel-size);
  aspect-ratio: 1/1;
  bottom: var(--wheel-bottom);
  border-radius:50%;
  z-index:10;
  pointer-events:none;
  overflow:hidden;

  /* タイヤ本体：黒1色をやめて陰影 */
  background: radial-gradient(circle at 35% 35%,
    #475569 0 18%,
    #111827 55%,
    #0b1220 100%
  );
  box-shadow:0 2px 4px rgba(0,0,0,.35);

  /* 右→左に走るので逆回転が自然 */
  animation: fleet-wheel-spin var(--wheel-spin) linear infinite;
  animation-play-state: paused;
  will-change: transform;
}
@keyframes fleet-wheel-spin{ to{ transform: rotate(-360deg); } }

/* ★スポーク（4本）＋リム＋ハブ：ハッキリ見える版 */
body[data-page="fleet"] .fleet-truck__wheel::before{
  content:"";
  position:absolute;
  inset: 4px;                  /* ← 模様を大きく */
  border-radius:50%;
  background:
    /* 1) 4本スポーク */
    conic-gradient(
      from 45deg,
      rgba(255,255,255,0) 0 19%,
      rgba(255,255,255,.92) 19% 27%,
      rgba(255,255,255,0) 27% 44%,
      rgba(255,255,255,.92) 44% 52%,
      rgba(255,255,255,0) 52% 69%,
      rgba(255,255,255,.92) 69% 77%,
      rgba(255,255,255,0) 77% 94%,
      rgba(255,255,255,.92) 94% 100%
    ),
    /* 2) リム（外周リング） */
    radial-gradient(circle at center,
      rgba(0,0,0,0) 0 58%,
      rgba(255,255,255,.38) 59% 66%,
      rgba(0,0,0,0) 67%
    ),
    /* 3) ハブ（中心） */
    radial-gradient(circle at center,
      #ffffff 0 14%,
      #cbd5e1 15% 26%,
      rgba(0,0,0,0) 27%
    );
}

/* is-play中だけ回す */
body[data-page="fleet"] .fleet-visual__scene.is-play .fleet-truck__wheel{
  animation-play-state: running;
}

/* タイヤ位置（トラック基準：%） */
body[data-page="fleet"] .fleet-truck__wheel--front{ left: 24.3%; }
body[data-page="fleet"] .fleet-truck__wheel--rear1{ left: 63.4%; }
body[data-page="fleet"] .fleet-truck__wheel--rear2{ left: 72.5%; }

/* OSが簡易モーションなら停止 */
@media (prefers-reduced-motion: reduce){
  body[data-page="fleet"] .fleet-visual__bg,
  body[data-page="fleet"] .fleet-truck__wheel,
  body[data-page="fleet"] .fleet-truck__body{
    animation:none !important;
  }
}
/* =========================================================
   保有車両紹介（Swiper）※ここだけで完結
   ========================================================= */

body[data-page="fleet"] #fleet-cars{
  margin: 56px auto 86px;
}

/* 外枠：左右のチョイ見せを切らない */
body[data-page="fleet"] .fleet-cars-wrap{
  width: min(var(--fleet-max, 1200px), calc(100% - 32px));
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}

/* Swiper本体 */
body[data-page="fleet"] .fleet-cars-swiper{
  overflow: hidden;                 /* ★重要：ちょい見せを切らない */
  padding: 10px 0 54px;              /* 下にドット用余白 */
}

/* スライド：中央寄せ */
body[data-page="fleet"] .fleet-cars-swiper .swiper-slide{
  display: flex;
  justify-content: center;
}

/* カード（本来の見た目：白枠＋下に紺帯） */
body[data-page="fleet"] .fleet-cars-card{
  width: min(760px, 86vw);           /* ★中央カード幅 */
  border-radius: 26px;
  overflow: hidden;
  background: #ffffff;
  box-shadow: 0 26px 70px rgba(15,23,42,.12);
  border: 1px solid rgba(148,163,184,.35);
}

/* 画像：固定高でトリミング（デカくならない） */
body[data-page="fleet"] .fleet-cars-card__media{
  margin: 0;
  overflow: hidden;
  background: #0b2a55;
}
body[data-page="fleet"] .fleet-cars-card__media img{
  display: block;
  width: 100%;
  height: clamp(280px, 42vh, 520px); /* ★ここが“画像が大きすぎる”の主因を止める */
  object-fit: cover;
}

/* 下の紺帯 */
body[data-page="fleet"] .fleet-cars-card__body{
  background: #0b2a55;
  color: #fff;
  padding: 18px 18px 20px;
  text-align: center;
}
body[data-page="fleet"] .fleet-cars-card__title{
  margin: 0 0 6px;
  font-size: clamp(18px, 2.2vw, 22px);
  font-weight: 900;
  letter-spacing: .06em;
}
body[data-page="fleet"] .fleet-cars-card__text{
  margin: 0;
  font-size: 14px;
  line-height: 1.75;
  opacity: .92;
}

/* 矢印：外側に配置 */
body[data-page="fleet"] .fleet-cars-wrap .swiper-button-prev,
body[data-page="fleet"] .fleet-cars-wrap .swiper-button-next{
  width: 54px;
  height: 54px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(15,23,42,.18);
  top: 50%;
  transform: translateY(-50%);
}
body[data-page="fleet"] .fleet-cars-wrap .swiper-button-prev{ left: -18px; }
body[data-page="fleet"] .fleet-cars-wrap .swiper-button-next{ right: -18px; }

body[data-page="fleet"] .fleet-cars-wrap .swiper-button-prev::after,
body[data-page="fleet"] .fleet-cars-wrap .swiper-button-next::after{
  font-size: 18px;
  font-weight: 900;
  color: #0b2a55;
}

/* ドット */
body[data-page="fleet"] .fleet-cars-wrap .swiper-pagination{
  bottom: 8px;
}
body[data-page="fleet"] .fleet-cars-wrap .swiper-pagination-bullet{
  width: 8px;
  height: 8px;
  margin: 0 5px !important;
  background: #cbd5f5;
  opacity: 1;
}
body[data-page="fleet"] .fleet-cars-wrap .swiper-pagination-bullet-active{
  width: 24px;
  border-radius: 999px;
  background: #2563eb;
}

/* スマホ：矢印を内側に寄せる */
@media (max-width: 768px){
  body[data-page="fleet"] .fleet-cars-wrap .swiper-button-prev{ left: 8px; }
  body[data-page="fleet"] .fleet-cars-wrap .swiper-button-next{ right: 8px; }
}

/* =========================================================
   4) 自社整備工場（本文＋Swiper）＋CTA
   ========================================================= */

/* セクション本体 */
body[data-page="fleet"] .fleet-section.maintenance-section{
  max-width: var(--fleet-max);
  margin: 40px auto 60px;
  padding: 0 16px;
  display: flex;
  flex-direction: column;   /* スマホ：縦並び */
  gap: 24px;
}

/* 左：テキスト */
body[data-page="fleet"] .maintenance-text h2{
  margin: 0 0 14px;
  font-size: clamp(22px, 2.8vw, 26px);
  font-weight: 900;
  letter-spacing: 0.03em;
  color: #0b2a55;
}
body[data-page="fleet"] .maintenance-text{
  font-size: 15px;
  line-height: 1.9;
  color: #475569;
}
body[data-page="fleet"] .maintenance-text p + p{
  margin-top: 12px;
}
body[data-page="fleet"] .maintenance-list{
  margin: 12px 0 16px;
  padding-left: 1.2em;
  list-style: disc;
}
body[data-page="fleet"] .maintenance-list li{
  margin-bottom: 4px;
}

/* 右：スライダー */
body[data-page="fleet"] .maintenance-slider{
  position: relative;
}
body[data-page="fleet"] .maintenance-swiper{
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  padding: 8px 48px 40px;
  box-sizing: border-box;
}

body[data-page="fleet"] .maintenance-photo{
  margin: 0;
  border-radius: 18px;
  overflow: hidden;
  background: #f8fafc;
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.15);
}
body[data-page="fleet"] .maintenance-photo img{
  display:block;
  width:100%;
  height:auto;
}
body[data-page="fleet"] .maintenance-photo figcaption{
  padding: 8px 14px 10px;
  font-size: 13px;
  color: #334155;
}

/* Swiper矢印・ドット */
body[data-page="fleet"] .maintenance-swiper .swiper-button-prev,
body[data-page="fleet"] .maintenance-swiper .swiper-button-next{
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.65);
  top: 50%;
  transform: translateY(-50%);
}
body[data-page="fleet"] .maintenance-swiper .swiper-button-prev{ left: 8px; }
body[data-page="fleet"] .maintenance-swiper .swiper-button-next{ right: 8px; }

body[data-page="fleet"] .maintenance-swiper .swiper-button-prev::after,
body[data-page="fleet"] .maintenance-swiper .swiper-button-next::after{
  font-size: 15px;
  color: #f9fafb;
}

body[data-page="fleet"] .maintenance-swiper-pagination.swiper-pagination-bullets .swiper-pagination-bullet{
  background: #cbd5f5;
  opacity: 1;
}
body[data-page="fleet"] .maintenance-swiper-pagination .swiper-pagination-bullet-active{
  background: #0b2a55;
}

/* 整備CTA */
body[data-page="fleet"] .maintenance-cta{
  max-width: var(--fleet-max);
  margin: 10px auto 40px;
  padding: 0 16px;
}
body[data-page="fleet"] .maintenance-cta__inner{
  display:flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px 20px 22px;
  border-radius: 18px;
  background: linear-gradient(135deg, #0b2a55, #2563eb);
  color: #e5e7eb;
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.2);
}
body[data-page="fleet"] .maintenance-cta__title{
  margin: 0 0 6px;
  font-size: clamp(18px, 2.4vw, 20px);
  font-weight: 900;
  letter-spacing: 0.06em;
}
body[data-page="fleet"] .maintenance-cta__lead{
  margin: 0;
  font-size: 14px;
  line-height: 1.8;
}
body[data-page="fleet"] .maintenance-cta__action{
  display:flex;
  align-items:center;
}
body[data-page="fleet"] .maintenance-cta__btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 10px 18px;
  border-radius: 999px;
  background: #f9fafb;
  color: #0b2a55;
  font-size: 14px;
  font-weight: 800;
  text-decoration:none;
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.2);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
body[data-page="fleet"] .maintenance-cta__btn:hover{
  background: #e5edf9;
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(15, 23, 42, 0.25);
}


/* =========================================================
   5) レスポンシブ（ここだけで管理：ズレにくい）
   ========================================================= */

/* タブレット */
@media (max-width: 980px){
  body[data-page="fleet"] .fleet-swiper{
    padding-inline: 16px;
  }
}

/* タブレット～スマホ */
@media (max-width: 768px){
  body[data-page="fleet"]{
    /* ★沈みはpx固定（%をやめる） */
    --truck-bottom: -68px;

    /* ★スマホは“少し大きく” */
    --truck-w: min(900px, 94vw);
    --truck-scale: 1.30;

    /* ロゴは小さく＆安全位置 */
    --sign-top: 32%;
    --sign-left: 75%;
    --sign-w: 15%;
    --sign-max: 85px;

    /* タイヤ */
    --wheel-size: 7.3%;
    --wheel-bottom: 31.3%;
  }

  body[data-page="fleet"] .fleet-visual__scene{
    aspect-ratio: 390 / 300; /* 縦を少し確保して見切れ防止 */
  }

  body[data-page="fleet"] .fleet-intro{
    margin-bottom: 22px;
    font-size: 14px;
  }

  body[data-page="fleet"] .fleet-section{
    margin: 32px auto 44px;
  }

  body[data-page="fleet"] .fleet-swiper .fleet-card__media img{
    height: 220px;
  }

  body[data-page="fleet"] .maintenance-swiper{
    padding: 8px 40px 38px;
  }
}

/* 小さいスマホ */
@media (max-width: 430px){
  body[data-page="fleet"]{
    --truck-bottom: -56px;
    --truck-scale: 1.28;
    --sign-w: 8.5%;
    --sign-max: 86px;
    --wheel-size: 7.4%;
    --wheel-bottom: 31.2%;
  }

  body[data-page="fleet"] .fleet-truck__wheel{
    width: 7.4% !important;
    bottom: 31.2% !important;
  }
}

/* PC 幅では整備工場を横並び */
@media (min-width: 960px){
  body[data-page="fleet"] .fleet-section.maintenance-section{
    flex-direction: row;
    align-items: flex-start;
  }
  body[data-page="fleet"] .maintenance-text{
    flex: 0 0 45%;
  }
  body[data-page="fleet"] .maintenance-slider{
    flex: 1 1 auto;
  }
  body[data-page="fleet"] .maintenance-swiper{
    margin: 0;
  }

  body[data-page="fleet"] .maintenance-cta__inner{
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
  body[data-page="fleet"] .maintenance-cta__text{
    max-width: 70%;
  }
  body[data-page="fleet"] .maintenance-cta__action{
    justify-content: flex-end;
  }
}
/* =========================
   リボンタイトル：スマホ最適化
   ========================= */
@media (max-width: 768px){

  .section-header h2,
  .greeting-v2__header h2{
    font-size: 16px !important;   /* ←ここがメイン */
    letter-spacing: 0.05em;
    padding: 0 12px;
    text-align: center;
  }

}