/* ======================================
   各ページのヒーロー高さをここで統一
   ====================================== */
/* ===== ここから下を 追記（必ず上の共通ルールより後ろに書く） ===== */
body[data-page="fleet"] .services-hero{
  height: calc(
    clamp(var(--hero-h-min), var(--hero-h-ideal), var(--hero-h-max)) + 30px
  );
}
.hero--page .hero__bg{
  position:absolute;
  inset:0;
  background-image: var(--hero);
  background-size: var(--size, cover);
  background-position: var(--pos, center);
  background-repeat:no-repeat;
  filter: saturate(1.05) contrast(1.05);
  z-index:0;
}

.hero--page::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.28), rgba(0,0,0,.45));
  z-index:1;
}

.hero--page .hero__inner{ position:relative; z-index:2; }

/* ===== Greeting v2：幅と背景の単一管理 ===== */ 
.greeting-v2{
  /* ここだけ変えればリボンとカードが一緒に動く */
  --band: 1140px;                             /* 会社概要と同値に */
  --padX: clamp(16px, 3vw, 24px);             /* 左右余白 */
  --navy: #0d2a53;
  position: relative;
  background: #f3f6f9;                        /* 余白の地色 */
  padding: 80px 0;                            /* 上下余白 */
  overflow: hidden;                           /* はみ出し防止 */
  isolation: isolate;                         /* 影の安全 */
}

/* 余白だけに出る“斜めロゴタイル” */
.greeting-v2::before{
  content:"";
  position: absolute; inset: 0; z-index: 0; pointer-events:none;
  background-image: url("../images/inagawa-rogo.jpg");  /* タイル画像（PNG/SVG） */
  background-repeat: repeat;
  background-size: 560px auto;                 /* PC時のタイルサイズ */
  opacity: .06;                                 /* 薄さは0.05〜0.10程度 */
}

/* 見出しブロック（＝リボンの外枠） */
.greeting-v2__header{
  max-width: var(--band);
  margin: 0 auto var(--gap,14px);              /* 下に少し間隔 */
  padding-inline: var(--padX);
  box-sizing: border-box;
  position: relative;
  z-index: 1;
}

/* リボン本体（中央寄せ＋左右スリット）※最終統一方式用：中身だけ担当 */
.greeting-v2__header > h2{
  width: 100%;
  height: 64px;
  margin: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  text-align: center;
  color: #fff;
  font-weight: 800;
  letter-spacing: .02em;
  font-size: clamp(21px, 2.1vw, 26px);

  /* 背景は親（.greeting-v2__header::before/after）に任せる */
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  overflow: visible !important;

  position: relative;
  z-index: 1; /* 親の帯より上に */
}

.greeting-v2__header > h2 small{
  margin-left: .6em; font-size: .72em; opacity: .92; letter-spacing: .08em;
}
/* スリット（上下0でピタ付け） */
.greeting-v2__header > h2::before,
.greeting-v2__header > h2::after{
  content:""; position:absolute; top:0; bottom:0; width:10px; background: var(--navy);
}
.greeting-v2__header > h2::before{ left:0; }
.greeting-v2__header > h2::after { right:0; }

/* カード（白箱） */
.greeting-v2__card{
  max-width: var(--band);
  margin: 0 auto;
  padding-inline: var(--padX);
  box-sizing: border-box;
  position: relative; z-index: 1;
}
.greeting-v2__body{
  background:#fff;
  border-radius: 14px;
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
  padding: 48px 56px;
  line-height: 1.8;
}
.greeting-v2__body p{ margin: 0 0 1em; }

/* 右下のロゴすかし（カード内。不要なら削除可） */
.greeting-v2__body::after{
  content:""; position:absolute;
  right: clamp(12px, 2vw, 20px); bottom: clamp(10px, 1.6vw, 16px);
  width: min(38%, 340px); aspect-ratio: 3 / 1;
  background: url("../images/inagawa-rogo.jpg") no-repeat right bottom / contain;
  opacity:.08; pointer-events:none;
}

/* サイン */
.greeting-v2__sign{
  display:flex; justify-content:flex-end; align-items:flex-end;
  gap: 12px; margin-top: 14px; padding-inline: var(--padX);
}
.greeting-v2__role{ font-size:.9rem; color:#334; opacity:.85; transform: translateY(1px); }
.greeting-v2__name{
  font-family:"Yuji Syuku","Yuji Boku",serif;
  font-size: clamp(22px, 2.1vw, 32px);
  color: var(--navy); letter-spacing:.02em; line-height:1;
  text-shadow: 0 0 .01em rgba(0,0,0,.25);
}

/* レスポンシブ微調整 */
@media (max-width: 1024px){
  .greeting-v2::before{ background-size: 480px auto; opacity:.07; }
  .greeting-v2__body{ padding: 36px 28px; border-radius: 12px; }
}
@media (max-width: 600px){
  .greeting-v2::before{ background-size: 68vw auto; opacity:.08; }
}

/* 会社概要：やや控えめに */
.company-overview.bg-logo-tiling{
  --logo-size: 540px;     /* タイルの大きさ */
  --logo-opacity: .06;    /* 薄さ */
  --logo-rotate: 45deg;   /* 角度（指定なくても45°） */
}
/* サービスページのヒーロー画像の明るさ */
body[data-page="services"] .services-hero__bg{
  filter: brightness(var(--hero-img-brightness));
}

/* =========================================
   ヘッダー文字サイズを全ページで統一
   （ホーム／会社概要／事業案内／車両紹介）
   ========================================= */



body[data-page="company"] .greeting-v2{
  padding-top: 60px;
}
/* =========================
   fleet：カード内の画像サイズ調整
   ========================= */
body[data-page="fleet"] .fleet-card__media {
  width: 100%;
  aspect-ratio: 21/9;      /* 好みで 5/3 や 21/9 に変えてOK */
  overflow: hidden;
}

body[data-page="fleet"] .fleet-card__media img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block;
}
/* =========================
   fleet スライダー：ナビ位置
   ========================= */
body[data-page="fleet"] .fleet-swiper{
  position: relative;
}

/* 共通デザイン */
body[data-page="fleet"] .fleet-swiper__btn{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: none;
  background: #ffffff;
  box-shadow: 0 4px 12px rgba(15, 23, 42, .18);
  cursor: pointer;
}

/* 左右の位置 */
body[data-page="fleet"] .fleet-swiper__btn--prev{
  left: 16px;   /* 必要なら 24px など微調整 */
}

body[data-page="fleet"] .fleet-swiper__btn--next{
  right: 16px;
}

/* Swiper のデフォルト矢印アイコンを表示 */
body[data-page="fleet"] .fleet-swiper__btn::after{
  font-size: 18px;
  color: #0b2a55;
}

/* ページネーション（ドット）を中央下に */
body[data-page="fleet"] .fleet-swiper__pagination{
  bottom: 8px !important;
}

/* =========================
   fleet カード内テキストを中央寄せ
   ========================= */
body[data-page="fleet"] .fleet-card__body{
  text-align: center;
}

body[data-page="fleet"] .fleet-card__title{
  margin: 16px 0 8px;
  font-weight: 700;
}

body[data-page="fleet"] .fleet-card__text{
  margin: 0 0 16px;
  line-height: 1.8;
}
/* =========================
   fleet：ページ導入コピー
   ========================= */
body[data-page="fleet"] .fleet-intro{
  max-width: 900px;          /* 少し細めの幅で読みやすく */
  margin: 32px auto 24px;    /* リボンとの間 / 下の見出しとの間 */
  padding: 0 16px;
  text-align: center;
}

/* ページ導入コピー（上の1行） */
body[data-page="fleet"] .fleet-intro__copy{
  font-size: 15px;
  line-height: 1.9;
  font-weight: 500;      /* ← ちょっと太く */
  letter-spacing: .03em; /* ← すこしだけ字間広め */
  color: #374151;        /* ← ほんの少し濃いグレーに */
}

/* =========================
   fleet：セクション共通
   ========================= */
body[data-page="fleet"] .fleet-section{
  max-width: 1200px;
  margin: 0 auto 60px;       /* 上を 0 にして intro と詰めすぎない程度に */
  padding: 0 16px;
}
/* セクション見出し（保有車両紹介） */
body[data-page="fleet"] .fleet-section__header{
  margin: 16px auto 20px;
  text-align: center;     /* ← センター寄せ */
}

body[data-page="fleet"] .fleet-section__title{
  margin: 0;
  font-size: clamp(22px, 2.6vw, 24px); /* ← ほんの少し大きく */
  font-weight: 900;                     /* ← 太め */
  letter-spacing: .04em;
  color: #0b2a55;
}


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

/* =========================
   fleet：トラックアイコン＋見出し
   ========================= */
body[data-page="fleet"] .fleet-heading{
  max-width: 960px;
  margin: 24px auto 32px;
  padding: 8px 16px 32px;
  text-align: center;
}

body[data-page="fleet"] .fleet-heading__icon{
  display: inline-block;
  margin-bottom: 12px;
}

body[data-page="fleet"] .fleet-heading__truck-svg{
  width: min(100%, 320px);
  height: auto;
}

/* 見出しテキスト（他ページとトーン合わせ） */
body[data-page="fleet"] .fleet-section__title{
  margin: 0 0 6px;
  font-size: clamp(22px, 2.6vw, 24px);
  font-weight: 900;
  letter-spacing: .06em;
  color: #0b2a55;
}

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

/* スマホ調整 */
@media (max-width: 599px){
  body[data-page="fleet"] .fleet-heading{
    margin-top: 16px;
    padding-bottom: 24px;
  }
  body[data-page="fleet"] .fleet-heading__truck-svg{
    width: min(100%, 260px);
  }
}

/* =========================
   fleet：保有車両台数サマリー
   ========================= */
body[data-page="fleet"] .fleet-stats{
  padding: 32px 16px 40px;
}

body[data-page="fleet"] .fleet-stats__inner{
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  gap: 40px;
  flex-wrap: wrap;
}

body[data-page="fleet"] .fleet-stat{
  text-align: center;
  min-width: 150px;
}

/* アイコン */
body[data-page="fleet"] .fleet-stat__icon{
  font-size: 40px;          /* ここを画像サイズに合わせて調整 */
  margin-bottom: 8px;
}

/* 数字＋単位 */
body[data-page="fleet"] .fleet-stat__number{
  margin: 0 0 4px;
  font-weight: 900;
  letter-spacing: .12em;
  color: #0b2a55;
}

body[data-page="fleet"] .fleet-stat__value{
  font-size: 36px;
}

body[data-page="fleet"] .fleet-stat__unit{
  font-size: 18px;
  margin-left: 4px;
}

/* ラベル */
body[data-page="fleet"] .fleet-stat__label{
  margin: 0;
  font-size: 14px;
  color: #475569;
}

/* スマホで少し詰める */
@media (max-width: 599px){
  body[data-page="fleet"] .fleet-stats__inner{
    gap: 24px;
  }
  body[data-page="fleet"] .fleet-stat__value{
    font-size: 30px;
  }
  body[data-page="fleet"] .fleet-stat__unit{
    font-size: 16px;
  }
}

/* =========================
   fleet：設備・冷蔵庫紹介（一覧3枚）
   ========================= */

/* セクション全体の幅を絞る */
body[data-page="fleet"] #facility .container{
  max-width: 1200px;
  margin: 40px auto 56px;
  padding: 0 16px;
}

/* 白いカード */
body[data-page="fleet"] #facility .facility-block{
  margin-top: 24px;
  background: #ffffff;
  border-radius: 24px;
  padding: 24px 28px 28px;
  box-shadow:
    0 18px 45px rgba(15, 23, 42, .06),
    0 0 0 1px rgba(148, 163, 184, .12);
}

/* タイトル */
body[data-page="fleet"] #facility .facility-block > h3{
  margin: 0 0 16px;
  font-size: 18px;
  font-weight: 800;
  color: #0b2a55;
}

/* 冷蔵庫3枚を横並びに */
body[data-page="fleet"] #facility .facility-images{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

/* 各カード */
body[data-page="fleet"] #facility .fridge-card{
  margin: 0;
  text-align: center;
}

/* 画像サイズ調整（大きすぎ防止） */
body[data-page="fleet"] #facility .fridge-card img{
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;      /* 4:3 比率で統一 */
  object-fit: cover;
  border-radius: 18px;
  box-shadow: 0 12px 30px rgba(15, 23, 42, .18);
}

/* キャプション */
body[data-page="fleet"] #facility .fridge-caption{
  margin-top: 6px;
  font-size: 13px;
  color: #475569;
}

/* タブレット：2列、スマホ：1列 */
@media (max-width: 959px){
  body[data-page="fleet"] #facility .facility-images{
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
}
@media (max-width: 599px){
  body[data-page="fleet"] #facility .facility-images{
    grid-template-columns: 1fr;
  }
  body[data-page="fleet"] #facility .facility-block{
    padding: 20px 18px 22px;
  }
}
/* =========================
   fleet：設備 特集ブロック（冷蔵庫 / スタンド / フォーク）
   index と同じデザイン＆左右交互レイアウト
   ========================= */

/* セクション全体（背景を濃紺に） */
body[data-page="fleet"] .feature.feature--dark{
  background: #0b2a55;
  color: #ffffff;
  padding: 48px 0;
}

/* 内側：左右 2 カラム */
body[data-page="fleet"] .feature__inner{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 40px;
  align-items: stretch;
}

/* 画像側 */
body[data-page="fleet"] .feature__media{
  margin: 0;
}

body[data-page="fleet"] .feature__media img{
  display: block;
  width: 100%;
  height: 100%;
  max-height: 420px;          /* ← 大きすぎる場合は 380 〜 400 などに調整 */
  object-fit: cover;
}

/* テキスト側 */
body[data-page="fleet"] .feature__body{
  padding: 8px 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;  /* 画像の高さに対して縦方向も中央寄せ */
}

/* reverse 用に余計なパディングをつけない */
body[data-page="fleet"] .feature.feature--reverse .feature__body{
  grid-column: 1;
}
/* ===== 左右交互（スタンドだけ画像右・テキスト左） ===== */
body[data-page="fleet"] .feature.feature--reverse .feature__media{
  grid-column: 2;
}
body[data-page="fleet"] .feature.feature--reverse .feature__body{
  grid-column: 1;
  padding-left: 0;
  padding-right: 24px;
}

/* ===== 見出し（白いアンダーライン＋ひし形） ===== */
body[data-page="fleet"] .facility-title{
  position: relative;
  margin: 0 0 16px;
  padding-bottom: 12px;
  font-size: clamp(24px, 2.6vw, 28px);
  font-weight: 900;
  letter-spacing: .12em;
  color: #ffffff;
}

/* 下線 */
body[data-page="fleet"] .facility-title::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 60%;
  height: 3px;
  background: #ffffff;
}

/* 左見出し：ひし形を左側に */
body[data-page="fleet"] .facility-title.sec-title--to-left::before,
body[data-page="fleet"] .facility-title.arrow-left::before{
  content: "";
  position: absolute;
  left: -16px;
  bottom: -4px;
  width: 10px;
  height: 10px;
  background: #ffffff;
  transform: rotate(45deg);
}

/* 右見出し（スタンド）：ひし形を右側に */
body[data-page="fleet"] .facility-title.sec-title--to-right::before{
  content: "";
  position: absolute;
  right: -16px;
  bottom: -4px;
  width: 10px;
  height: 10px;
  background: #ffffff;
  transform: rotate(45deg);
}

/* リード文・リストなど */
body[data-page="fleet"] .feature__lead{
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 1.9;
  color: #e2e8f0;
}

body[data-page="fleet"] .feature__list{
  margin: 0 0 16px;
  padding-left: 1.2em;
  font-size: 14px;
  line-height: 1.8;
  color: #e2e8f0;
}

/* 温度帯チップ */
body[data-page="fleet"] .temp-chips{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

body[data-page="fleet"] .temp-chip{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 120px;
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  color: #0b2a55;
  background: #ffffff;
}

body[data-page="fleet"] .temp-chip.freeze{
  background: #3b82f6;
  color: #ffffff;
}
body[data-page="fleet"] .temp-chip.chilled{
  background: #0ea5e9;
  color: #ffffff;
}
body[data-page="fleet"] .temp-chip.normal{
  background: #22c55e;
  color: #ffffff;
}

/* CTAボタン（スタンド） */
body[data-page="fleet"] .feature__cta{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 26px;
  border-radius: 999px;
  background: #f97316;
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 10px 25px rgba(0,0,0,.25);
}

/* レスポンシブ：スマホでは縦並びに */
@media (max-width: 768px){
  body[data-page="fleet"] .feature__inner{
    grid-template-columns: minmax(0,1fr);
    gap: 24px;
  }
  body[data-page="fleet"] .feature.feature--reverse .feature__media{
    grid-column: auto;
  }
  body[data-page="fleet"] .feature.feature--reverse .feature__body{
    grid-column: auto;
    padding: 0 8px;
  }
  body[data-page="fleet"] .feature__body{
    padding: 0 8px;
  }
  body[data-page="fleet"] .feature__media img{
    max-height: 260px;
  }
}
/* =========================
   fleet：設備 特集ブロックのレイアウト修正
   grid → flex に変更してズレ解消
   ========================= */

/* 共通：左右2カラムを flex で並べる */
body[data-page="fleet"] .feature__inner{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;   /* 高さをそろえる */
  gap: 40px;
}

/* 画像・テキストの幅 */
body[data-page="fleet"] .feature__media,
body[data-page="fleet"] .feature__body{
  flex: 1 1 0;
}

/* 画像側 */
body[data-page="fleet"] .feature__media{
  margin: 0;
}

body[data-page="fleet"] .feature__media img{
  display: block;
  width: 100%;
  height: 100%;
  max-height: 420px;        /* 大きければ 380〜400 に調整 */
  object-fit: cover;
}

/* テキスト側（左右共通パディング） */
body[data-page="fleet"] .feature__body{
  padding: 8px 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;  /* 縦位置も中央寄せ */
}

/* ===== スタンドだけ左右反転 ===== */
body[data-page="fleet"] .feature.feature--reverse .feature__inner{
  flex-direction: row-reverse;
}

/* ===== スマホでは縦並び ===== */
@media (max-width: 768px){
  body[data-page="fleet"] .feature__inner{
    flex-direction: column;
    gap: 24px;
  }
  body[data-page="fleet"] .feature.feature--reverse .feature__inner{
    flex-direction: column;   /* reverse も通常と同じ縦並び */
  }
  body[data-page="fleet"] .feature__body{
    padding: 0 8px 8px;
  }
  body[data-page="fleet"] .feature__media img{
    max-height: 260px;
  }
}
/* 自社敷地内の給油スタンドの見出し＋本文を、画像側に少し寄せる */
body[data-page="fleet"] #feature-stand .facility-title,
body[data-page="fleet"] #feature-stand .feature__lead{
  margin-left: 10rem;   /* ← 好みで 2〜5rem くらいに調整 */
}

/* スマホでは元の位置に戻す（必要なら） */
@media (max-width: 768px){
  body[data-page="fleet"] #feature-stand .facility-title,
  body[data-page="fleet"] #feature-stand .feature__lead{
    margin-left: 0;
  }
}

/* 自社敷地内の給油スタンド：下線だけ少し長くする */
body[data-page="fleet"] #feature-stand .facility-title::after {
  width: 100%;   /* 80〜100% の間でお好みに調整 */
}

/* 冷蔵庫庫内：下線の長さを少し長めに（例） */
body[data-page="fleet"] #feature-coldstorage .facility-title::after {
  width: 80%;   /* お好みで 70〜90% あたりを調整 */
}
/* フォークリフト：下線の長さを少し短めに（例） */
body[data-page="fleet"] #feature-forklift .facility-title::after {
  width: 45%;   /* 40〜70% くらいでバランスを見る */
}

/* =========================
   フォークリフト動画のサイズ調整
   ========================= */

/* dialog 本体（真ん中に小さめで表示） */
.video-lightbox {
  padding: 0;
  border: none;
}

/* 中の枠：最大幅・高さを制限 */
.video-lightbox .video-frame {
  width: min(720px, 60vw);  /* 画面幅の 90% 以内、かつ最大 960px */
  max-height: 70vh;        /* 画面高さの 80% まで */
  background: #000;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 18px 45px rgba(0, 0, 0, .6);
}

/* 実際の動画サイズ */
.video-lightbox video {
  width: 100%;
  height: 100%;
  max-height: 70vh;        /* 枠からはみ出さないように */
  object-fit: contain;      /* 全体が見えるように表示 */
}

/* 背景を少し暗く（好みで） */
.video-lightbox::backdrop {
  background: rgba(15, 23, 42, .8);
}
/* ================================
   赤いプレイボタン（フォーク動画用）
================================ */

.play-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: #4288f1;           /* 赤 */
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  border-radius: 999px;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0,0,0,0.25);
  transition: background 0.25s ease;
}

.play-button:hover {
  background: hsl(2, 97%, 49%);   /* 濃い赤 */
}

/* プレイアイコン（白い三角） */
.play-button .play-icon {
  display: inline-block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 8px 0 8px 14px;  /* 三角形 */
  border-color: transparent transparent transparent #ffffff;
}
/* 7) フッター（簡潔版） */
.site-footer--compact {
  background: #07235f;
  color: #fff;
  padding: clamp(16px, 2.6vw, 22px) 0;
  margin-top: clamp(20px, 3vw, 32px);
}

.site-footer__container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 clamp(12px, 4vw, 24px);
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 2vw, 14px);
  align-items: center;
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(10px, 2vw, 18px);
}

.footer-nav a {
  color: #dfe9ff;
  text-decoration: none;
}

.footer-nav a:hover {
  text-decoration: underline;
}

.copyright {
  font-size: clamp(12px, 1.4vw, 14px);
  opacity: .9;
  margin: 0;
}

footer {
  margin-top: 0 !important;
}

/* =======================================================
   低温輸送：4枚ギャラリー ＋ 説明テキスト
   ======================================================= */

/* 全体コンテナ */
.svc-detail {
  margin: 40px auto 64px;
  max-width: 1200px;
  padding: 0 16px;
}


/* =========================
   庫内画像だけ 90° 回転させる
   ========================= */

/* ギャラリー内の庫内画像（ファイル名に "konai" を含むもの） */
.svc-gallery__item img[src*="konai"] {
  transform-origin: center center;
  transform: rotate(270deg);
}

/* 拡大表示（ライトボックス）で表示したときも同じく回転 */
#svc-lightbox-img[src*="konai"] {
  transform-origin: center center;
  transform: rotate(270deg);
}
/* スマホでは縦並びに戻す */
@media (max-width: 850px) {
  #svc-cold-detail .svc-detail__inner{
    flex-direction: column !important;
  }

  #svc-cold-detail .svc-detail__gallery{
    flex: 0 0 auto !important;
    width: 100% !important;
  }
}


/* ホバー時の浮き上がり */
.svc-gallery__item:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.25);
}



.svc-detail__text p {
  margin: 0 0 12px;
}

.svc-detail__text ul {
  margin: 0;
  padding-left: 1.4em;
}

.svc-detail__text li + li {
  margin-top: 4px;
}

/* ===== services 詳細カード：左画像を少し小さく（推奨） ===== */
.svc-detail-block__eyecatch{
  /* 大きすぎるのは「高さ」が原因になりやすいので上限を付ける */
  max-height: 420px;              /* ←ここで大きさ調整（360〜480で好み） */
  overflow: hidden;
  border-radius: 26px;            /* 角丸は今のデザインに合わせる */
}

/* picture / img を枠いっぱいに、でも切り抜きで整える */
.svc-detail-block__eyecatch picture,
.svc-detail-block__eyecatch img{
  width: 100%;
  height: 100%;
  display: block;
}

.svc-detail-block__eyecatch img{
  object-fit: cover;
  object-position: center;
}
/* 画像の見せたい位置（上が切れやすいので少し下へ） */
.svc-detail-block__eyecatch img{
  object-fit: cover;
  object-position: center 60%;
}

/* =======================================================
   画像拡大用 ライトボックス
   ======================================================= */

.svc-lightbox {
  position: fixed;
  inset: 0;
  display: none;               /* is-active が付いたときだけ表示 */
  align-items: center;
  justify-content: center;
  z-index: 999;
}

.svc-lightbox.is-active {
  display: flex;
}

/* 背景 */
.svc-lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.65);
}

/* 画像パネル */
.svc-lightbox__panel {
  position: relative;
  max-width: min(960px, 95vw);
  max-height: min(640px, 85vh);
  margin: 0;
  border-radius: 16px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 24px 80px rgba(15, 23, 42, 0.6);
  z-index: 1;
  /* ★ここを追加：中身（画像）を中央寄せ */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ライトボックス内の画像共通レイアウト */
#svc-lightbox-img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* 閉じるボタン */
.svc-lightbox__close {
  position: absolute;
  top: 8px;
  right: 12px;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: none;
  background: rgba(15, 23, 42, 0.7);
  color: #fff;
  font-size: 22px;
  cursor: pointer;
}
/* 画像拡大ライトボックス共通 */
.svc-lightbox {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding-top: 100px;         /* 上に 60px の余白を入れる */

}

.svc-lightbox.is-active {
  display: flex;
}

.svc-lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15,23,42,.65);
}

.svc-lightbox__panel {
  position: relative;
  max-width: min(1100px, 95vw);          /* 横幅の上限 */
  max-height: calc(100vh - 120px);       /* 上下 50px ずつ余裕を持たせる */
  margin: 0;
  border-radius: 16px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 24px 80px rgba(15,23,42,.6);
  z-index: 1;
}

#svc-lightbox-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ライトボックスのパネルを少し小さくして余裕をつくる */
.svc-lightbox__panel {
  max-width: min(1100px, 96vw);
  max-height: min(650px, 86vh);
}

/* ×ボタンを画面右上固定にして、必ず見えるようにする */
.svc-lightbox__close {
  position: fixed;        /* ← これで画面に固定 */
  top: 95px;              /* ヘッダーの下あたりに表示 */
  right: 40px;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: none;
  background: rgba(15,23,42,.85);
  color: #fff;
  font-size: 26px;
  cursor: pointer;
  z-index: 1001;          /* ライトボックスより前面 */
}
/* 低温輸送 詳細ブロック内だけフォント大きめに */
#svc-cold-detail .svc-detail__text,
#svc-cold-detail .svc-detail__text p,
#svc-cold-detail .svc-detail__text li {
  font-size: 18px !important;  /* ← 他の指定を上書き */
  line-height: 1.9;
  color: #374151;              /* 少し濃いグレー */
}
/* 低温輸送のポイント 見出しを強調 */
.svc-detail__title{
  margin: 0 0 16px;
  font-size: 26px;          /* ← タイトルを大きく */
  font-weight: 800;         /* ← 太く */
  letter-spacing: .05em;    /* 文字間を少し広く */
  color:#0b2a55;            /* 濃紺でハッキリ */
  position: relative;
}

/* 下にアクセントライン（お好みで） */
.svc-detail__title::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:180px;
  height:3px;
  border-radius:999px;
}
/* 低温輸送のポイントの見出しを強調（強制上書き版） */
body[data-page="services"] #svc-cold-detail .svc-detail__title{
  margin: 0 0 16px !important;
  font-size: 28px !important;     /* ← ここでしっかり大きく */
  font-weight: 800 !important;
  letter-spacing: .05em !important;
  color:#0b2a55 !important;
  position: relative !important;
  padding-bottom: 6px !important;
}

/* 下線アクセント */
body[data-page="services"] #svc-cold-detail .svc-detail__title::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:190px;
  height:3px;
  border-radius:999px;
}
/* =====================================================
   ルート配送：切替ボタン
   ===================================================== */
.svc-detail-toggle{
  display:inline-flex;
  align-items:center;
  gap:.5em;
  padding:10px 16px;
  margin: 10px 0 16px;
  border-radius:999px;
  border:1px solid #cbd5e1;
  background:#fff;
  color:#0b2a55;
  font-weight:800;
  letter-spacing:.02em;
  cursor:pointer;
  transition:.2s;
}
.svc-detail-toggle::after{
  content:"↔";
  opacity:.7;
}
.svc-detail-toggle:hover{ transform:translateY(-1px); }
.svc-detail-toggle[aria-pressed="true"]{
  border-color:#2b6cb0;
  box-shadow:0 0 0 4px rgba(43,108,176,.14);
}

/* =====================================================
   ルート配送：カード全体（幅を固定）
   ===================================================== */
#svc-route.svc-detail-block{
  display:grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap:24px;
  max-width: 1400px;
  margin-inline:auto;
  position:relative;
}

/* 縦区切り線 */
#svc-route.svc-detail-block::after{
  content:"";
  position:absolute;
  top:32px;
  bottom:32px;
  left:50%;
  width:1px;
  background:#e5e7eb;
}

/* =====================================================
   右側ビジュアル：固定フレーム
   ===================================================== */
#svc-route .svc-visual{
  position:relative;
  width:100%;
  aspect-ratio: 4 / 3;      /* ← 路線図が一番収まりやすい */
  min-height: 600px;
  padding:12px;
  box-sizing:border-box;
  overflow:hidden;
  border-radius:16px;
  background:#fff;
}

/* 画像共通（地図／路線図） */
#svc-route .svc-visual__img{
  position:absolute;
  inset:12px;
  width:calc(100% - 24px);
  height:calc(100% - 24px);
  object-fit:contain;       /* ←絶対に切らない */
  object-position:center;
  display:none;
  cursor: zoom-in;
}

/* 表示中のみ */
#svc-route .svc-visual__img.is-active{
  display:block;
}

/* =====================================================
   レスポンシブ
   ===================================================== */
@media (max-width: 1100px){
  #svc-route .svc-visual{ min-height:520px; }
}
@media (max-width: 900px){
  #svc-route.svc-detail-block{
    grid-template-columns: 1fr;
  }
  #svc-route.svc-detail-block::after{ display:none; }
  #svc-route .svc-visual{ min-height:360px; }
}
/* ===== 画像拡大モーダル ===== */
.img-modal{
  position: fixed;
  inset: 0;
  display: none;
  z-index: 9999;
}
.img-modal.is-open{ display:block; }

.img-modal__backdrop{
  position:absolute;
  inset:0;
  background: rgba(10, 20, 40, .65);
}

/* ここがポイント：panel に padding を作って“安全枠”を確保 */
/* ここがポイント：panel に padding を作って“安全枠”を確保 */
.img-modal__panel{
  position: relative;
  width: min(1200px, calc(100vw - 32px));
  height: min(86vh, 900px);
  margin: 7vh auto 0;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
  overflow: hidden;
}

/* img は “panelの内側”に収める（幅/高さ100%固定をやめる） */
.img-modal__img{
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  background: #fff;
}

.img-modal__close{
  position:absolute;
  top: 10px;
  right: 12px;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 999px;
  background: rgba(0,0,0,.6);
  color: #fff;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}

/* 「ルート配送の詳細」ボタン（見出し風） */
.svc-detail-toggle{
  display:inline-flex;
  align-items:center;
  gap:.8em;
  padding:10px 16px;
  margin: 10px 0 16px;
  border-radius:999px;
  border:1px solid #cbd5e1;
  background:#fff;
  color:#0b2a55;
  font-weight:800;
  letter-spacing:.02em;
  cursor:pointer;
  transition:.2s;
}

/* ← 矢印を消して「ココをクリック」に変更 */
.svc-detail-toggle::after{
  content:"ココをクリック";
  font-weight:800;
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(43,108,176,.10);
  color: #2b6cb0;
  margin-left: auto;      /* 右寄せ */
}

.svc-detail-toggle:hover{ transform:translateY(-1px); }

.svc-detail-toggle[aria-pressed="true"]{
  border-color:#2b6cb0;
  box-shadow:0 0 0 4px rgba(43,108,176,.14);
}
/* ルート配送（路線図）の拡大だけ、さらに小さく表示 */
.img-modal.is-route .img-modal__panel{
  padding: 38px;  /* ← ここを 32〜52pxで調整 */
}

.img-modal.is-route .img-modal__img{
  max-width: 92%;
  max-height: 92%;
}
#svc-route .svc-visual__img.is-active{
  pointer-events: auto;
  cursor: zoom-in;
}
/* 路線図用：パネル高さ 85vh、画像が必ず全部入る */
#svc-lightbox.is-route .svc-lightbox__panel{
  height: 85vh;
  width: min(calc(85vh * 1.50), calc(100vw - 32px)); /* ←この 1.50 が答え */
}

#svc-lightbox.is-route #svc-lightbox-img{
  width: 100%;
  height: 100%;
  object-fit: contain; /* 切れない */
}
/* 画像拡大：左右の黒余白を「濃紺」にする */
#svc-lightbox .svc-lightbox__panel{
  background:#0b2a55; /* 濃紺 */
}

/* 画像の周りに少しだけ余白を残す（好みで 0〜16px） */
#svc-lightbox #svc-lightbox-img{
  padding: 10px;
  box-sizing: border-box;
  background: transparent;
}
#svc-lightbox .svc-lightbox__backdrop{
  background: rgba(11, 42, 85, .70);
}

/* =================================
   HOME：斜め固定ロゴ背景（見える確認用）
   ================================= */

/* 背景の器 */
body[data-page="home"] #bg-logo-fixed{
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

/* 斜め背景（ここが本体） */
body[data-page="home"] #bg-logo-fixed::before{
  content:"";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 220vmax;
  height: 220vmax;
  transform: translate(-50%, -50%) rotate(-14deg);
  transform-origin: center;

  /* ★ここが重要：common.css は /css/ 配下 → 画像はルート直下なので ../ */
  background: url("../images/inagawa-rogo.jpg") repeat;
  background-size: 520px auto;

  /* まず “見える” を優先して濃く */
  opacity: .1;
}

/* 前面（本文）※ footer は透明にしない */
body[data-page="home"] main,
body[data-page="home"] section{
  position: relative;
  z-index: 1;
  background: transparent;
}

/* 固定ヘッダー分だけ上にずらすアンカー */
.anchor{
  display:block;
  height:0;
  scroll-margin-top: 140px; /* ヘッダー高さに合わせて 120〜160で調整 */
}

/* お問い合わせコピー：もう少し下へ＆太く */
.contact-lead{
  margin-top: 22px;      /* ← 下げる（18〜34で調整） */
  margin-bottom: 22px;
  font-size: 16px;       /* 少しだけ存在感 */
  line-height: 1.85;
}

.contact-lead strong{
  font-weight: 900;      /* しっかり太く */
}

/* =========================================================
   非ホーム：ページヒーローを全幅表示
   ========================================================= */
body:not([data-page="home"]) header.hero.hero--page,
body:not([data-page="home"]) .maint-hero,
body:not([data-page="home"]) .services-hero,
body:not([data-page="home"]) .recruit-hero{
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  border-radius: 0;
}

/* =========================================================
   固定ヘッダー対策：本文は下げる／「ページヒーロー」だけ上に戻す
   ※ recruit-hero など “元から隙間がないヒーロー” は対象外
   ========================================================= */

html, body { margin: 0; }

:root{
  --hdr-offset: calc(var(--topbar-h, 35px) + var(--mainbar-h, 60px));
}

/* 本文は常にヘッダー分だけ下げる（隠れ防止） */
body{
  padding-top: var(--hdr-offset) !important;
}

/* ▼ ここが重要：隙間が出る「ページヒーロー」だけ相殺する */
body.has-hero .hero.hero--page,
body.has-hero .services-hero,
body.has-hero .fleet-hero{
  margin-top: calc(-1 * var(--hdr-offset)) !important;
}

/* ▼ 採用・整備など “切れたら困るヒーロー” は相殺しない（保険） */
body[data-page="recruit"] .recruit-hero,
body[data-page="maintenance"] .maint-hero{
  margin-top: 0 !important;
}
:root{
  --hero-to-ribbon: 36px; /* ←ここを変えるだけで全ページ一括調整 */
}

/* ヒーロー直後の最初のリボンだけ、上の余白を統一 */
.services-hero + .greeting-v2,
.recruit-hero + .greeting-v2,
.fleet-hero + .greeting-v2,
.page-hero + .greeting-v2,
header + .greeting-v2{
  margin-top: var(--hero-to-ribbon) !important;
}

/* 逆に、ヒーロー側が margin-bottom を持っていてズレるのを防ぐ（保険） */
.services-hero,
.recruit-hero,
.fleet-hero,
.page-hero{
  margin-bottom: 0 !important;
}
:root{
  --hero-to-ribbon: 36px;  /* ヒーロー→帯 の間隔（ここだけ触ればOK） */
}

/* ヒーロー直後の帯：上余白を統一（まずは基本形） */
header + .greeting-v2{
  margin-top: var(--hero-to-ribbon) !important;
}

/* 念のため：ヒーロー側の余白が原因のことが多いので0に寄せる */
.services-hero,
.recruit-hero,
.fleet-hero{
  margin-bottom: 0 !important;
}

:root{
  --hero-h: clamp(420px, 52vh, 620px); /* 全ページ共通のヒーロー高さ */
  --hero-to-ribbon: 36px;              /* ヒーロー→リボンの間隔 */
}

/* 1) ヒーローの高さを統一（車両ページも services-hero ならこれで揃う） */
.services-hero{
  min-height: var(--hero-h);
  height: auto;
  margin-bottom: 0 !important;         /* ヒーロー側の余白差を潰す */
}

/* 背景と中身が min-height に追従するように */
.services-hero__bg,
.services-hero__inner{
  min-height: inherit;
}

/* =========================================================
   ページヒーロー高さ：全ページで統一（基準）
   ========================================================= */
:root{
  /* 10mm ≒ 38px。必要なら下の数字だけ微調整してください */
  --page-hero-h: clamp(445px, 52vh, 620px);
}

/* 事業案内/車両などの共通ヒーロー */
.services-hero{
  min-height: var(--page-hero-h) !important;
}

/* 採用ページのヒーロー（クラスが別の場合にも効かせる） */
.recruit-hero,
body[data-page="recruit"] .services-hero{
  min-height: var(--page-hero-h) !important;
}
/* =========================================================
   services ヒーロー：文字が画像の外に出るのを防止
   （内側を“全面レイヤー”にして中央配置）
   ========================================================= */

/* ヒーロー土台を確実に相対配置 */
.services-hero{
  position: relative !important;
  overflow: hidden !important;
}

/* 背景は全面 */
.services-hero__bg{
  position: absolute !important;
  inset: 0 !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}

/* 文字レイヤーを“全面”にして中で中央寄せ */
.services-hero__inner{
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;

  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: flex-start !important;

  /* ここで上下の位置を決める（外に出ない範囲の余白） */
  padding: clamp(80px, 10vh, 120px) 24px clamp(48px, 7vh, 88px) !important;

  /* “どこかで付いてるズラし”を無効化 */
  margin: 0 !important;
  transform: none !important;
  top: auto !important;
  bottom: auto !important;
}

/* タイトル側にも変なマージンがあると飛ぶのでリセット */
.services-hero__title,
.services-hero__subtitle{
  margin: 0 !important;
}
/* services ヒーロー文字：中央寄せ */
.services-hero__inner{
  align-items: center !important;
  text-align: center !important;
}
/* =========================================
   ご挨拶(GREETING) セクションの背景面を完全に消す
========================================= */

/* 1) セクション本体の背景（薄いグレー）を消す */
body[data-page="company"] #greeting.greeting-v2{
  background: transparent !important;
}

/* 2) 疑似要素が背景を作っている場合を完全に無効化 */
body[data-page="company"] #greeting.greeting-v2::before,
body[data-page="company"] #greeting.greeting-v2:before,
body[data-page="company"] .greeting-v2::before,
body[data-page="company"] .greeting-v2:before{
  content: none !important;
  display: none !important;
  background: none !important;
}

/* 3) もし“枠っぽさ”が影/枠線ならそれも消す（保険） */
body[data-page="company"] #greeting.greeting-v2,
body[data-page="company"] #greeting.greeting-v2 *{
  box-shadow: none !important;
}
/* =========================================
   greeting-v2 セクションの背景面を完全排除（全ページ共通）
========================================= */

/* セクション本体 */
section.greeting-v2{
  background: transparent !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* 念のため疑似要素も完全停止 */
section.greeting-v2::before,
section.greeting-v2::after{
  content: none !important;
  display: none !important;
}

/* リボン自体は余白を持たせる */
.greeting-v2__header{
  margin: 64px auto 48px;
}
/* =========================================================
   ヒーロー画像 〜 最初のリボン（見出しセクション）までの隙間を全ページで統一
   ========================================================= */
:root{
  --hero-gap: 56px; /* ← ここだけ調整。目安：50〜70px */
}

/* 1) ヒーロー側の下余白は一旦ゼロに統一（ページ差の元を潰す） */
header.hero--page,
header.services-hero,
body[data-page="recruit"] .recruit-hero{
  margin-bottom: 0 !important;
}

/* 2) ヒーロー直後に来る“最初のリボン用セクション”の上余白を固定 */
main#content > :is(header.hero--page, header.services-hero, body[data-page="recruit"] .recruit-hero) + section.greeting-v2{
  margin-top: 0 !important;
  padding-top: var(--hero-gap) !important;
}

/* 3) セクション側に変な余白が残っている時の保険（上だけ整える） */
section.greeting-v2{
  margin-top: 0 !important;
}
/* =========================================================
   ヒーロー内タイトル：完全センター（全ページ共通）
   ========================================================= */
.services-hero{
  position: relative;
}

.services-hero__inner{
  position: absolute;
  inset: 0;
  z-index: 2;

  display: flex;
  flex-direction: column;
  justify-content: center;   /* 縦センター */
  align-items: center;       /* 横センター */
  text-align: center;

  padding: clamp(80px, 10vh, 120px) 24px clamp(48px, 7vh, 88px);
  margin: 0;

  /* どこかでズラしてる指定を無効化 */
  transform: none !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
}

/* テキスト自体も念のためセンターに */
.services-hero__title,
.services-hero__subtitle{
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* fleetだけ：2mm（約8px）分だけ補正 */
body[data-page="fleet"]{
  --hero-gap: 59px;
}
/* =========================================================
   company：唯一の基準コンテナ（これだけ）
   ========================================================= */

body[data-page="company"]{
  --company-w: 1180px;
  --company-pad: 16px;
}

/* 本文の“基準枠” */
body[data-page="company"] main{
  max-width: none;
}

/* 基準幅ラッパー */
body[data-page="company"] main > section,
body[data-page="company"] main > article{
  padding-left: var(--company-pad);
  padding-right: var(--company-pad);
}

/* 中身を中央の基準幅に */
body[data-page="company"] main > section > *,
body[data-page="company"] main > article > *{
  max-width: var(--company-w);
  margin-left: auto;
  margin-right: auto;
}

/* =========================================
   company：ご挨拶カードを“元のカード構造”に戻す（確定）
   ========================================= */

/* ご挨拶セクション自体は全幅でOK */
body[data-page="company"] section#greeting{
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}

/* 白いカードを明示的に中央＆基準幅へ */
body[data-page="company"] article.greeting-v2__card{
  max-width: var(--company-w, 1180px);
  margin: 0 auto;
  padding: 48px 56px;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 10px 28px rgba(0,0,0,.08);
  box-sizing: border-box;
}

/* =========================================================
   リボン：全ページ統一（最終版・これ1本だけ）
   置き場所：common.css のいちばん最後
   ========================================================= */

:root{
  --band-max: 1600px;   /* リボン帯の最大幅（1400〜1500で調整） */
  --band-gutter: 16px;  /* 画面端の余白 */
  --band-mt: 26px;      /* リボン上 */
  --band-mb: 14px;      /* リボン下 */

  --card-max: 1100px;   /* ご挨拶カード等の上限 */
  --card-gutter: 16px;

  --greet-h: 64px;      /* ご挨拶リボン高さ */
  --greet-ear: 10px;    /* ご挨拶 左の縦線幅 */
}

/* ---------------------------------------------------------
   0) リボン外側（ラッパー）は “広げない/ズラさない”
   --------------------------------------------------------- */
.section-header.section-header--band,
.greeting-v2__header{
  width: 100% !important;
  max-width: none !important;

  margin: var(--band-mt) 0 var(--band-mb) !important;
  padding: 0 !important;

  left: auto !important;
  right: auto !important;
  transform: none !important;
  translate: none !important;

  position: relative !important;
  overflow: visible !important;
}

/* ※通常リボンは「帯本体(h2/span等)」に背景を任せる */
.section-header.section-header--band{
  background: none !important;
}

/* ---------------------------------------------------------
   1) 通常リボン：帯本体（h2 / .band-title 等）を固定幅で中央
   --------------------------------------------------------- */
.section-header.section-header--band > h2,
.section-header.section-header--band .band-title{
  width: min(var(--band-max), calc(100% - (var(--band-gutter) * 2))) !important;
  max-width: min(var(--band-max), calc(100% - (var(--band-gutter) * 2))) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: .45em !important;
  text-align: center !important;
}

/* span に背景が乗るタイプだけ 100%（jp/en 直指定は除外） */
.section-header.section-header--band > h2 > span:not(.jp):not(.en),
.section-header.section-header--band .band-title > span:not(.jp):not(.en){
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: .45em !important;
  text-align: center !important;
}

/* 英語の見た目（全ページ） */
.section-header.section-header--band .en,
.greeting-v2__header .en{
  font-size: .85em;
  font-weight: 700;
  letter-spacing: .12em;
}

/* ---------------------------------------------------------
   2) ご挨拶：親が青帯を描く（耳だけ残る事故を完全封殺）
   --------------------------------------------------------- */

/* 親＝青帯本体 */
.greeting-v2__header{
  min-height: var(--greet-h);
  display: flex;
  align-items: center;
  justify-content: center;

  background: linear-gradient(180deg,#5a97e4 0%, #4f8ad7 100%);
  border-radius: 8px;
  box-shadow: 0 8px 22px rgba(13,42,83,.12);
  overflow: hidden;
}

/* 中の h2 は透明（帯は親が描く） */
.greeting-v2__header > h2,
.greeting-v2__header > h2.band-title,
.greeting-v2__header .band-title{
  margin: 0;
  height: var(--greet-h);
  width: 100%;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: .45em;
  text-align: center;

  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;

  color: #fff;
  font-weight: 800;
  letter-spacing: .02em;
  font-size: clamp(21px, 2.1vw, 26px);

  position: relative;
  z-index: 2;
}

/* ご挨拶：jp/en が直並びでも中央に詰める */
.greeting-v2__header > h2 > span.jp,
.greeting-v2__header > h2 > span.en,
.greeting-v2__header > h2.band-title > span.jp,
.greeting-v2__header > h2.band-title > span.en{
  display: inline !important;
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
}

/* 左の“耳”（濃紺縦線） */
.greeting-v2__header::before{
  content:"";
  position:absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--greet-ear);
  background: #0b2a55;
  z-index: 1;
}

/* 左右スリット（不要ならこのブロックを削除OK） */
.greeting-v2__header::after{
  content:"";
  position:absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(135deg, transparent 0 18px, rgba(0,0,0,0) 18px) left center/22px 100% no-repeat,
    linear-gradient(225deg, transparent 0 18px, rgba(0,0,0,0) 18px) right center/22px 100% no-repeat;
  z-index: 1;
}

/* ★二重縦線対策：ご挨拶内に “元からある縦線” があっても全部無効化 */
.greeting-v2__header{
  border-left: 0 !important;
}
.greeting-v2__header > h2{
  border-left: 0 !important;
}
.greeting-v2__header > h2::before,
.greeting-v2__header > h2::after,
.greeting-v2__header .band-title::before,
.greeting-v2__header .band-title::after{
  content: none !important;
}

/* ---------------------------------------------------------
   3) ご挨拶カード幅の固定（デカすぎ問題対策）
   --------------------------------------------------------- */
article.greeting-v2__card{
  width: min(var(--card-max), calc(100% - (var(--card-gutter) * 2))) !important;
  max-width: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
  transform: none !important;
}
/* =========================================================
   ご挨拶リボン：幅を固定して中央寄せ + 右縦線も追加（上書き最終）
   置き場所：common.css のいちばん最後
   ========================================================= */

/* 1) ご挨拶の青帯（親）自体を “固定幅” にして中央寄せ */
.greeting-v2__header{
  width: min(var(--band-max), calc(100% - (var(--band-gutter) * 2))) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* 2) 左右の縦線を “背景レイヤー” で両方描く（疑似要素に頼らない） */
.greeting-v2__header{
  background:
    linear-gradient(#0b2a55, #0b2a55) left 0 top 0 / var(--greet-ear) 100% no-repeat,
    linear-gradient(#0b2a55, #0b2a55) right 0 top 0 / var(--greet-ear) 100% no-repeat,
    linear-gradient(180deg,#5a97e4 0%, #4f8ad7 100%) 0 0 / 100% 100% no-repeat !important;
}

/* 3) 以前の left耳（::before）やスリット（::after）が残ってたら無効化 */
.greeting-v2__header::before,
.greeting-v2__header::after{
  content: none !important;
}
/* =========================================================
   会社概要リボンだけ短い → 他と同じ長さに揃える（上書き）
   置き場所：common.css の一番最後
   ========================================================= */

/* 会社概要セクション側に付いている見出しの帯本体を拾えるだけ拾う */
body[data-page="company"] .company-overview-layout .section-header--band > h2,
body[data-page="company"] .company-overview-layout .section-header--band .band-title,
body[data-page="company"] #company-overview .section-header--band > h2,
body[data-page="company"] #company-overview .section-header--band .band-title{
  width: min(var(--band-max), calc(100% - (var(--band-gutter) * 2))) !important;
  max-width: min(var(--band-max), calc(100% - (var(--band-gutter) * 2))) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
/* =========================
   Section header (band) : company 用（幅を他と統一）
   ========================= */

/* 外側：画面いっぱいにはせず、帯幅ルールで統一 */
body[data-page="company"] .section-header.section-header--band{
  width: 100%;
  max-width: none;
  margin: 26px 0 14px;
  padding: 0;
}

/* h2：帯の“器”として band 幅で中央寄せ */
body[data-page="company"] .section-header--band h2{
  margin: 0;
  font-weight: 800;
  font-size: clamp(1.28rem, 2.4vw, 1.56rem);
  letter-spacing: .02em;

  width: min(var(--band-max), calc(100% - (var(--band-gutter) * 2)));
  margin-left: auto;
  margin-right: auto;

  display: flex;
  justify-content: center;
}

/* ★帯本体：span を 100% に伸ばして“長いリボン”にする */
body[data-page="company"] .section-header--band h2 > span{
  width: 100%;
  flex: 1 1 auto;

  display: flex;                 /* block → flex に変更 */
  align-items: center;
  justify-content: center;
  gap: .45em;
  text-align: center;

  color: #fff;
  background: var(--band);
  padding: 14px 24px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,.08);
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}

/* 左右の縦線（耳） */
body[data-page="company"] .section-header--band h2 > span::before,
body[data-page="company"] .section-header--band h2 > span::after{
  content:"";
  position:absolute;
  top:0; bottom:0;
  width: 9px;
  background: var(--band-accent);
}
body[data-page="company"] .section-header--band h2 > span::before{ left:0; }
body[data-page="company"] .section-header--band h2 > span::after { right:0; }
/* 会社概要リボン：帯(span)を他と同じ幅まで伸ばす（最終） */
body[data-page="company"] #company-profile .section-header.section-header--band > h2{
  width: min(var(--band-max), calc(100% - (var(--band-gutter) * 2))) !important;
  margin: 0 auto !important;
  display: flex !important;
}
body[data-page="company"] #company-profile .section-header.section-header--band > h2 > span{
  width: 100% !important;
  flex: 1 1 auto !important;
  display: flex !important;          /* block を上書き */
  justify-content: center !important;
  align-items: center !important;
  gap: .45em !important;
  box-sizing: border-box !important;
}
/* =========================================================
   会社概要 (#company-profile) リボン幅：強制で他と同じにする（決め打ち）
   置き場所：common.css のいちばん最後
   ========================================================= */

body[data-page="company"] #company-profile .section-header.section-header--band{
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* h2（帯の器）を band幅に固定 */
body[data-page="company"] #company-profile .section-header.section-header--band > h2{
  width: min(var(--band-max), calc(100% - (var(--band-gutter) * 2))) !important;
  max-width: min(var(--band-max), calc(100% - (var(--band-gutter) * 2))) !important;
  margin-left: auto !important;
  margin-right: auto !important;

  display: flex !important;
  justify-content: center !important;
}

/* span（青帯本体）を100%に伸ばす */
body[data-page="company"] #company-profile .section-header.section-header--band > h2 > span{
  width: 100% !important;
  max-width: 100% !important;
  flex: 1 1 auto !important;

  display: flex !important;          /* display:block を上書き */
  justify-content: center !important;
  align-items: center !important;
  gap: .45em !important;

  box-sizing: border-box !important;
}

/* 念のため：英語が折れて幅が崩れるのを防ぐ（好みで外してOK） */
body[data-page="company"] #company-profile .section-header.section-header--band .en{
  white-space: nowrap !important;
}
/* =========================================================
   【最終確定】会社概要リボンを他と完全に同じ長さにする
   原因：h2 > span が文字幅で止まっていたため
   ========================================================= */

/* 帯の器（h2）を他と同じ最大幅に */
body[data-page="company"] #company-profile .section-header--band > h2{
  width: min(1600px, calc(100% - 32px)); /* ← 他と揃える基準幅 */
  margin-left: auto;
  margin-right: auto;
  display: flex;
}

/* ★青帯の正体（span）を強制的に100%に伸ばす */
body[data-page="company"] #company-profile .section-header--band > h2 > span{
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .45em;
  box-sizing: border-box;
}
/* =========================================================
   会社概要：リボンがカード幅に揃っている → そろえる相手(カード)を広げる
   置き場所：common.css のいちばん最後
   ========================================================= */

:root{
  --company-w: 1480px;     /* ← 他リボンに合わせたい幅（1400〜1600で調整） */
  --company-pad: 16px;     /* 画面端余白 */
}

/* セクション中身（カード＋リボンの基準）を広げる */
body[data-page="company"] #company-profile .overview-index__grid{
  width: min(var(--company-w), calc(100% - (var(--company-pad) * 2))) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* 念のため：リボンも同じ幅で中央に */
body[data-page="company"] #company-profile .section-header.section-header--band > h2{
  width: min(var(--company-w), calc(100% - (var(--company-pad) * 2))) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
body[data-page="company"] #company-profile .section-header.section-header--band > h2 > span{
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: .45em !important;
}
/* =========================================================
   company：会社概要（#company-profile）だけ整える最終パッチ
   - 幅は --company-w で統一（ここを変えればリボンもカードも揃う）
   ========================================================= */

:root{
  --company-w: 1480px;   /* ← リボンを長くしたいなら 1480〜1600 */
  --company-pad: 16px;
}

/* セクション全体の基準幅（カード） */
body[data-page="company"] #company-profile .overview-index__grid{
  width: min(var(--company-w), calc(100% - (var(--company-pad) * 2))) !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: minmax(0,1fr) minmax(0,1.15fr) !important;
  gap: 24px !important;
  align-items: start !important;
}

/* スマホは縦積み */
@media (max-width: 960px){
  body[data-page="company"] #company-profile .overview-index__grid{
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
}

/* リボンもカード幅に合わせる（ここで“揃う”） */
body[data-page="company"] #company-profile .section-header.section-header--band > h2{
  width: min(var(--company-w), calc(100% - (var(--company-pad) * 2))) !important;
  margin: 0 auto !important;
  display: flex !important;
}
body[data-page="company"] #company-profile .section-header.section-header--band > h2 > span{
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: .45em !important;
  box-sizing: border-box !important;
}

/* 左の写真カードの暴れ防止（あなたのHTMLに合わせて .photo-card のみ） */
body[data-page="company"] #company-profile .photo-card{
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
}
body[data-page="company"] #company-profile .photo-card img{
  display:block;
  width:100%;
  height: 360px;          /* 320〜420で調整 */
  object-fit: cover;
}

/* 右の表カード（あなたのHTMLに合わせて table を整える） */
body[data-page="company"] #company-profile .overview-clean__table-card{
  position: relative;
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  border-left: 6px solid #173a84;
  padding-left: 16px;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
}
body[data-page="company"] #company-profile .overview-clean__table-card table{
  width: 100%;
  border-collapse: collapse;
}
body[data-page="company"] #company-profile .overview-clean__table-card th,
body[data-page="company"] #company-profile .overview-clean__table-card td{
  padding: 16px 18px;
  vertical-align: top;
  border-bottom: 1px solid #e6eef8;
}
body[data-page="company"] #company-profile .overview-clean__table-card th{
  width: 30%;
  white-space: nowrap;
  text-align: center;
  background: #eaf2ff;
  color: #113a7a;
  font-weight: 700;
  letter-spacing: .03em;
  border-right: 1px solid #dbe7fb;
}
body[data-page="company"] #company-profile .overview-clean__table-card tr:last-child th,
body[data-page="company"] #company-profile .overview-clean__table-card tr:last-child td{
  border-bottom: none;
}
/* =========================================================
   会社概要：リボンとカードの幅連携を切る（最終）
   - リボン：--band-max
   - カード：--card-max
   ========================================================= */

:root{
  --band-max: 1480px;   /* リボンの長さ（好きに） */
  --band-gutter: 16px;  /* 画面端余白 */
  --card-max: 1100px;   /* カード（画像+表）の幅（好きに） */
  --card-gutter: 16px;
}

/* -----------------------
   1) リボン：band幅（長い）
   ----------------------- */
body[data-page="company"] #company-profile .section-header.section-header--band{
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

body[data-page="company"] #company-profile .section-header.section-header--band > h2{
  width: min(var(--band-max), calc(100% - (var(--band-gutter) * 2))) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  display: flex !important;
}

body[data-page="company"] #company-profile .section-header.section-header--band > h2 > span{
  width: 100% !important;            /* ←青帯の正体を100%に */
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: .45em !important;
  box-sizing: border-box !important;
}

/* -----------------------
   2) カード：card幅（リボンと別）
   ----------------------- */
body[data-page="company"] #company-profile .overview-index__grid{
  width: min(var(--card-max), calc(100% - (var(--card-gutter) * 2))) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ※もし overview-index / overview など外枠に max-width が残っていたら無効化 */
body[data-page="company"] #company-profile.overview-index{
  max-width: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
/* =========================================================
   company：ヒーロー直下〜ご挨拶リボンまでの間隔を確実に広げる（最終）
   ========================================================= */

/* 1) ヒーローの下に余白（直接） */
body[data-page="company"] header.hero.hero--page{
  margin-bottom: 49px !important;  /* ← 24〜48pxで調整 */
}

/* 2) さらに確実：ヒーローの直後（#greeting）に余白を付ける */
body[data-page="company"] header.hero.hero--page + section#greeting{
  margin-top: 34px !important;     /* ← 24〜48pxで調整 */
}

/* 3) “見出し側のmarginが潰れて効かない”保険：paddingで空ける */
body[data-page="company"] section#greeting{
  padding-top: 10px !important;    /* ← 0〜16pxで微調整 */
}
/* =========================================================
   company：「輸送への取り組み」見出しの文字を少し右へ（リボンと揃える）
   置き場所：common.css のいちばん最後
   ========================================================= */

/* セクション見出しの文字位置を右へ */
body[data-page="company"] .safety-section .sec-title,
body[data-page="company"] .safety-section .sec-title--to-left,
body[data-page="company"] .safety-section h2{
  padding-left: 50px !important;  /* ← 10〜24px で調整 */
}
/* company：縦棒が背景で描かれている場合の右移動 */
body[data-page="company"] .safety-section .sec-title,
body[data-page="company"] .safety-section .sec-title--to-left{
  background-position: 46px 0 !important; /* ← 10〜24px */
}
/* 輸送の安全への取り組み：見出し全体を右へ */
body[data-page="company"] .safety-section .section-header {
  padding-left: 17px;   /* ← ここで全体を調整 */
}

/* 縦棒と文字の間隔を少し広げる */
body[data-page="company"] .safety-section h2.section-title{
  padding-left: 18px;   /* ← 14〜24pxで好みに調整OK */
}

/* スマホだけは少し詰める（任意） */
@media (max-width: 640px){
  body[data-page="company"] .safety-section h2.section-title{
    padding-left: 14px;
  }
}

/* 市場ロゴ（大阪/東京など）画像を大きくする */
body[data-page="company"] .market-logos{
  --ml-img-h: 165px;   /* ← 130 → 165（好みで 150〜180） */
  --ml-card-h: 250px;  /* ← 画像を大きくした分、カードも少し高く（任意だが推奨） */
}
body[data-page="company"] .market-logos{
  --ml-img-h: 155px;   /* 控えめに */
}
body[data-page="company"] .market-logos .logo-face img{
  max-height: 175px;
  width: auto;
}
/* 市場ロゴ：画像そのものを確実に大きくする（変数に頼らない） */
body[data-page="company"] .market-logos .logo-face{
  height: 190px !important;   /* ← 160〜220で調整 */
  display: grid;
  place-items: center;
}

body[data-page="company"] .market-logos .logo-face img{
  max-height: 250px !important; /* ← 150〜200で調整 */
  width: auto !important;
  height: auto !important;
}
/* market-logos 最終上書き（最後尾に置く） */
body[data-page="company"] .market-logos{
  --ml-card-h: 250px !important;
  --ml-img-h:  180px !important;
}
/* =========================================
   ご挨拶：2重カード解消（内側カードを消して1枚に）
   ※リボンには触れません
   ========================================= */

/* 内側カードの見た目を完全に消す */
body[data-page="company"] .greeting-v2__card{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

/* 文章ブロックにだけ余白を付ける（中身の構造が違っても広めにカバー） */
body[data-page="company"] .greeting-v2__card .greeting-v2__inner,
body[data-page="company"] .greeting-v2__card .greeting-body,
body[data-page="company"] .greeting-v2__card .greeting-text,
body[data-page="company"] .greeting-v2__card .container,
body[data-page="company"] .greeting-v2__card > div{
  padding: clamp(22px, 3vw, 36px) !important;
}
/* リボン（section-header）の下に一定の余白を付ける */
.section-header{ margin-bottom: 16px; }   /* 12〜20で調整 */
/* ご挨拶本文の読みやすさ */
body[data-page="company"] .greeting-v2__card{
  line-height: 1.95;
  font-size: 16px;            /* 15〜16がおすすめ */
}
body[data-page="company"] .greeting-v2__card p{
  margin: 0 0 18px;
}
@media (max-width: 640px){
  body[data-page="company"] .greeting-v2__card{
    padding: 18px 16px;
  }
}
body[data-page="company"] .greeting-sign{
  display: flex;
  justify-content: flex-end;
  margin-top: 18px;
}
main{ padding-bottom: 40px; }
/* ===== フッターが上に上がるページ対策（sticky footer）===== */
html, body { height: 100%; }

body{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* main が残りの高さを埋めてフッターを下へ押す */
main{ flex: 1 0 auto; }

/* ===== ご挨拶リボン復活（最小・安全） ===== */
body[data-page="company"] .greeting-v2__header,
body[data-page="company"] .greeting-v2__header > h2{
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* もし高さが0に潰れている場合の保険 */
body[data-page="company"] .greeting-v2__header > h2{
  min-height: 64px !important;
}
body[data-page="company"] .greeting-v2{ overflow: visible !important; }
/* company：ご挨拶リボンの位置を少し上へ（上余白を詰める） */
body[data-page="company"] #greeting .greeting-v2__header{
  margin-top:-8px !important;   /* ←ここを 0〜12px で微調整 */
  margin-bottom: 14px !important;
}

/* もし「見出し(h2)自体」に余白が乗っている場合の保険 */
body[data-page="company"] #greeting .greeting-v2__header > h2{
  margin-top: 0 !important;
}
/* ===== company：ご挨拶リボン（仮サーバーで出ない対策：見た目をここで確実に定義） ===== */
body[data-page="company"] #greeting .greeting-v2__header{
  margin: 0 0 14px;
}

/* h2 に class="band-title" があっても無くても効くように両方対象 */
body[data-page="company"] #greeting .greeting-v2__header > h2,
body[data-page="company"] #greeting .greeting-v2__header .band-title{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;

  width: min(1200px, calc(100% - 32px));
  margin: 0 auto;

  min-height: 64px;
  padding: 0 18px;
  color: #fff;
  font-weight: 900;
  letter-spacing: .02em;

  background: linear-gradient(180deg,#5a97e4 0%, #4f8ad7 100%);
  border-radius: 10px;
  box-shadow: 0 8px 22px rgba(13,42,83,.12);
  overflow: hidden;
}

/* 両端の縦紺ライン（耳の代わりに確実に出す） */
body[data-page="company"] #greeting .greeting-v2__header > h2::before,
body[data-page="company"] #greeting .greeting-v2__header > h2::after,
body[data-page="company"] #greeting .greeting-v2__header .band-title::before,
body[data-page="company"] #greeting .greeting-v2__header .band-title::after{
  content:"";
  position:absolute;
  top:0; bottom:0;
  width: 12px;
  background:#0b2a55;
  opacity:.95;
}

body[data-page="company"] #greeting .greeting-v2__header > h2::before,
body[data-page="company"] #greeting .greeting-v2__header .band-title::before{ left:0; }

body[data-page="company"] #greeting .greeting-v2__header > h2::after,
body[data-page="company"] #greeting .greeting-v2__header .band-title::after{ right:0; }

/* =========================================================
   Home Hero：picture対応スライダー + 100vwフル幅（最終版）
   ========================================================= */

/* 100vw化の保険（横スクロール防止） */
body[data-page="home"]{
  overflow-x: hidden;
}

/* hero を画面幅いっぱいに“はみ出し”させる（右側の空き対策） */
body[data-page="home"] #hero{
  width: 100vw !important;
  max-width: 100vw !important;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  margin: 0 !important;
  border-radius: 0 !important;

  /* 高さはここで管理（必要な値に調整OK） */
  height: clamp(520px, 72vh, 760px);
  overflow: hidden;
}

/* スライダー領域を hero 全面に固定 */
body[data-page="home"] #hero .slider{
  position: absolute;
  inset: 0;
}

/* スライド要素（img / picture）を同一レイヤーに */
body[data-page="home"] #hero .slider > img,
body[data-page="home"] #hero .slider > picture{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1.1s ease;
}

/* アクティブだけ表示 */
body[data-page="home"] #hero .slider > img.active,
body[data-page="home"] #hero .slider > picture.active{
  opacity: 1;
}

/* picture 内の img も全面カバー */
body[data-page="home"] #hero .slider > picture > img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 念のため：単体 img も cover（他の画像用） */
body[data-page="home"] #hero .slider > img{
  object-fit: cover;
}

/* スマホは少し高さを抑える（任意） */
@media (max-width: 768px){
  body[data-page="home"] #hero{
    height: clamp(460px, 66vh, 620px);
  }
}
/* =========================================================
   HOME：ヒーローの横幅を “ロゴ背景（画面）基準” に揃える
   ========================================================= */

/* 1) home の main を幅制限から解放（heroが中で縮まないように） */
body[data-page="home"] main#content{
  width: 100% !important;
  max-width: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* 2) hero は container 影響ゼロで全幅 */
body[data-page="home"] #hero{
  width: 100% !important;      /* 100vw じゃなくて 100% にするのがポイント */
  max-width: none !important;
  margin: 0 !important;
  border-radius: 0 !important;
  overflow: hidden !important;
}

/* 3) 1〜2pxの白スジ保険（必要なら） */
body[data-page="home"] #hero .slider{
  position: absolute !important;
  inset: -2px !important;
}
/* =========================================================
   【最強上書き】低温輸送のポイント（#svc-cold-detail）
   画像：2×2 ／ 右：文章（PC）に“固定”
   ========================================================= */

/* まず当たってるか見える化（当たれば枠が出る） */
body[data-page="services"] section#svc-cold-detail{
  outline: 0px solid transparent; /* 必要なら 2px solid red にして確認 */
}

/* 外枠カード */
body[data-page="services"] section#svc-cold-detail > .svc-detail__inner{
  max-width: 1200px !important;
  margin: 40px auto 64px !important;
  padding: 34px !important;

  display: flex !important;         /* ←横並び固定 */
  gap: 32px !important;
  align-items: center !important;

  background:#fff !important;
  border:1px solid #e8eef7 !important;
  border-radius: 34px !important;
  box-shadow: 0 22px 80px rgba(11,42,85,.10) !important;
}

/* 左：2×2グリッド強制 */
body[data-page="services"] section#svc-cold-detail .svc-detail__gallery{
  flex: 0 0 46% !important;
  width: auto !important;

  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-auto-flow: row !important;
  gap: 16px !important;
}

/* ボタンが横並びになるのを潰す */
body[data-page="services"] section#svc-cold-detail .svc-gallery__item{
  width: 100% !important;
  min-width: 0 !important;
  display: block !important;
  padding: 0 !important;
  border: none !important;
  background: none !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}

/* 画像サイズを“デカ過ぎ防止”で統一 */
body[data-page="services"] section#svc-cold-detail .svc-gallery__item img{
  width: 100% !important;
  height: 170px !important;         /* ←ここで大きさ決まる（160〜190で調整） */
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  border-radius: 12px !important;
}

/* 右：本文 */
body[data-page="services"] section#svc-cold-detail .svc-detail__text{
  flex: 1 !important;
  min-width: 0 !important;
}

/* スマホだけ縦積み */
@media (max-width: 850px){
  body[data-page="services"] section#svc-cold-detail > .svc-detail__inner{
    display: block !important;
    padding: 18px !important;
    border-radius: 26px !important;
  }
  body[data-page="services"] section#svc-cold-detail .svc-detail__gallery{
    width: 100% !important;
    margin-bottom: 14px !important;
  }
  body[data-page="services"] section#svc-cold-detail .svc-gallery__item img{
    height: 160px !important;
  }
}
/* =========================
   Footer（中央寄せを固定）
   ========================= */
.site-footer--compact .footer-inner{
  width: min(1100px, calc(100% - 32px));
  margin: 0 auto;
  padding: 22px 0;
  text-align: center;
  box-sizing: border-box;
}

.site-footer--compact .footer-nav{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px;
  line-height: 1.8;
}

.site-footer--compact .footer-nav .sep{
  opacity: .65;
}

.site-footer--compact .footer-nav a{
  color: #fff;
  text-decoration: none;
}

.site-footer--compact .footer-nav a:hover{
  text-decoration: underline;
}

.site-footer--compact .copyright{
  display: block;
  margin-top: 10px;
  color: rgba(255,255,255,.92);
}

/* =========================
   Services：ライトボックス画像をパネルいっぱいに
   ========================= */
body[data-page="services"] .svc-lightbox__panel{
  width: min(92vw, 1100px) !important;
  height: min(86vh, 760px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 18px !important;
}

/* ここが本命：画像をパネル内で最大化 */
body[data-page="services"] #svc-lightbox-img{
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important; /* はみ出さず最大表示 */
  display: block !important;
}

/* =========================================================
   ✅ COMMON FINAL（Header → Hero → Band → Footer）
   置き場所：common.css のいちばん最後
   ========================================================= */

/* iOSの自動拡大オフ */
html { -webkit-text-size-adjust: 100%; }

/* スクロールバー幅の揺れを止める（ページ移動でガタつくの防止） */
html{
  overflow-y: scroll;
  scrollbar-gutter: stable both-edges;
}

/* ---- 共通トークン（ここだけ触れば全体が揃う） ---- */
:root{
  --nav-navy: #0b2a55;

  /* ヘッダー */
  --header-max: 1200px;
  --side-pad: 16px;
  --topbar-h: 35px;
  --mainbar-h: 60px;
  --topbar-fz: 14px;
  --topbar-lh: 1.6;
  --topbar-ls: .06em;
  --hdr-logo-h: 34px;
  --hdr-name-fz: 20px;
  --hdr-link-fz: 16px;
  --hdr-link-ls: .08em;
  --hdr-gap: 28px;

  /* ヒーロー */
  --hero-h-min: 260px;
  --hero-h-ideal: 52vh;
  --hero-h-max: 600px;

  /* ヒーロー→最初の帯（余白） */
  --hero-gap: 56px;

  /* リボン（共通） */
  --band-max: 1480px;    /* 長さ */
  --band-gutter: 16px;   /* 画面端余白 */

  /* ご挨拶リボン */
  --greet-h: 64px;
  --greet-ear: 12px;

  /* カード（本文箱） */
  --card-max: 1100px;
  --card-gutter: 16px;

  /* フッター */
  --footer-max: 1100px;
}

/* フォントの入れ替わりによるズレ防止（headerだけ system で固定） */
.site-header2, .site-header2 *{
  font-family:
    system-ui, -apple-system, "Segoe UI",
    "Noto Sans JP", "Hiragino Kaku Gothic ProN",
    "Yu Gothic Medium", Meiryo, sans-serif !important;
  font-variant-ligatures: none;
}

/* =========================================================
   1) 固定ヘッダー（2段）
   ========================================================= */
.site-header2{
  position: fixed; top:0; left:0; right:0;
  z-index: 9999;
  background:#fff;
  border-radius:12px 12px 0 0;
  overflow:hidden;
  box-shadow: 0 6px 18px rgba(0,0,0,.10);
}

/* 外側バー：余計な padding/margin を持たせない */
.site-header2 .topbar,
.site-header2 .mainbar{
  width:100% !important;
  padding-inline:0 !important;
  margin:0 !important;
  box-sizing:border-box;
}

/* 上段（濃紺） */
.site-header2 .topbar{
  background: var(--nav-navy);
  color:#fff;
  font-size: var(--topbar-fz) !important;
  line-height: var(--topbar-lh) !important;
  letter-spacing: var(--topbar-ls) !important;
}
.site-header2 .topbar > .inner{
  max-width: var(--header-max) !important;
  margin-inline: auto !important;
  padding-inline: var(--side-pad) !important;
  height: var(--topbar-h) !important;
  display:flex !important;
  align-items:center !important;
  box-sizing:border-box;
}
/* 上段の文字は継承で統一 */
.site-header2 .topbar *{
  font-size: inherit !important;
  line-height: inherit !important;
  letter-spacing: inherit !important;
}

/* 下段（白） */
.site-header2 .mainbar{
  background:#fff;
  border-bottom:0;
  box-shadow:none;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.site-header2 .mainbar > .inner{
  max-width: var(--header-max) !important;
  margin-inline: auto !important;
  padding-inline: var(--side-pad) !important;

  height: var(--mainbar-h) !important;
  display:flex !important;
  align-items:center !important;
  gap: var(--hdr-gap) !important;
  box-sizing:border-box;
}

/* 左：ロゴ＋社名 */
.site-header2 .brand{
  margin-right:auto !important;
  display:flex; align-items:center; gap:12px;
  color:inherit; text-decoration:none; white-space:nowrap;
}
.site-header2 .brand img{
  height: var(--hdr-logo-h) !important;
  width:auto !important;
  display:block;
}
.site-header2 .brand span{
  color: var(--nav-navy);
  font-weight:800;
  font-size: var(--hdr-name-fz) !important;
  line-height:1.25;
  letter-spacing:.04em;
  white-space:nowrap;
}

/* 右：ナビ */
.site-header2 .nav{ margin-left:auto !important; }
.site-header2 .nav-links{
  display:flex; align-items:center;
  gap: var(--hdr-gap) !important;
  margin:0; padding:0; list-style:none;
  white-space:nowrap;
}
.site-header2 .nav a{
  position:relative;
  display:inline-flex;
  align-items:center;
  padding-block: 6px !important;
  color: var(--nav-navy);
  text-decoration:none;
  font-weight:800;
  font-size: var(--hdr-link-fz) !important;
  letter-spacing: var(--hdr-link-ls) !important;
  line-height:1.2 !important;
}

/* 下線（hover / 現在地） */
.site-header2 .nav a::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-8px;
  height:2px;
  background:#0c2b50;
  transform:scaleX(0);
  transform-origin:center;
  transition:transform .22s ease;
}
.site-header2 .nav a:hover::after,
.site-header2 .nav a[aria-current="page"]::after{
  transform:scaleX(1);
}

/* CTA */
.site-header2 .nav a.cta{
  background: var(--nav-navy);
  color:#fff !important;
  border-radius:999px;
  padding:10px 16px;
  margin-left: 20px;
}

/* モバイル */
@media (max-width: 820px){
  :root{
    --topbar-h: 32px;
    --mainbar-h: 64px;
    --hdr-logo-h: 30px;
    --hdr-name-fz: 18px;
    --hdr-link-fz: 14px;
    --hdr-gap: 16px;
  }
}

/* =========================================================
   2) 固定ヘッダー分、本文を下げる（全ページ共通）
   ========================================================= */
:root{
  --hdr-offset: calc(var(--topbar-h) + var(--mainbar-h));
}
html, body { margin:0; }
body{
  padding-top: var(--hdr-offset) !important;
}

/* アンカー飛び（ヘッダーに隠れない） */
.anchor{
  display:block;
  height:0;
  scroll-margin-top: calc(var(--hdr-offset) + 20px);
}

/* =========================================================
   3) ヒーロー（全幅化：非home）
   ========================================================= */
body:not([data-page="home"]) header.hero.hero--page,
body:not([data-page="home"]) .services-hero,
body:not([data-page="home"]) .recruit-hero,
body:not([data-page="home"]) .maint-hero{
  width: 100vw !important;
  max-width: none !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  border-radius: 0 !important;
}

/* hero--page（company など） */
.hero.hero--page{
  position: relative;
  display: grid;
  place-items: center;
  color:#fff;
  text-align:center;
  overflow:hidden;
  isolation:isolate;
  min-height: clamp(var(--hero-h-min), var(--hero-h-ideal), var(--hero-h-max));
}
.hero--page .hero__bg{
  position:absolute; inset:0;
  background-image: var(--hero);
  background-size: var(--size, cover);
  background-position: var(--pos, center);
  background-repeat:no-repeat;
  filter: saturate(1.05) contrast(1.05);
  z-index:0;
}
.hero--page::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.28), rgba(0,0,0,.45));
  z-index:1;
}
.hero--page .hero__inner{ position:relative; z-index:2; }

/* services-hero（services/fleet など）文字は完全センター */
.services-hero{
  position: relative !important;
  overflow: hidden !important;
  min-height: clamp(var(--hero-h-min), var(--hero-h-ideal), var(--hero-h-max)) !important;
  margin-bottom: 0 !important;
}
.services-hero__bg{
  position: absolute !important;
  inset: 0 !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}
.services-hero__inner{
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
  padding: clamp(80px, 10vh, 120px) 24px clamp(48px, 7vh, 88px) !important;
  margin: 0 !important;
  transform: none !important;
}
.services-hero__title,
.services-hero__subtitle{
  margin: 0 !important;
  text-align: center !important;
}

/* services：ヒーロー画像の明るさ（必要なページだけ） */
body[data-page="services"] .services-hero__bg{
  filter: brightness(1.3);
}

/* =========================================================
   4) ヒーロー直後 → 最初のリボン（帯）までの隙間を統一
   ========================================================= */
header.hero--page,
header.services-hero,
body[data-page="recruit"] .recruit-hero{
  margin-bottom: 0 !important;
}

/* ヒーロー直後に来る greeting-v2（最初の帯）だけ padding-top を付ける */
main#content > :is(header.hero--page, header.services-hero, body[data-page="recruit"] .recruit-hero) + section.greeting-v2{
  margin-top: 0 !important;
  padding-top: var(--hero-gap) !important;
}

/* =========================================================
   5) リボン（全ページ統一）＋ ご挨拶帯（greeting-v2）
   ========================================================= */

/* 外側ラッパーは広げない */
.section-header.section-header--band,
.greeting-v2__header{
  width: 100% !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 26px 0 14px !important;
  position: relative !important;
  transform: none !important;
  left:auto !important;
  right:auto !important;
  overflow: visible !important;
}

/* 通常リボン：帯の器（h2 / .band-title）を固定幅で中央 */
.section-header.section-header--band > h2,
.section-header.section-header--band .band-title{
  width: min(var(--band-max), calc(100% - (var(--band-gutter) * 2))) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;

  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:.45em !important;
  text-align:center !important;
}

/* span 背景タイプ（span を 100%に） */
.section-header.section-header--band > h2 > span:not(.jp):not(.en),
.section-header.section-header--band .band-title > span:not(.jp):not(.en){
  width:100% !important;
  max-width:100% !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:.45em !important;
  box-sizing:border-box !important;
}

/* 英語表記 */
.section-header.section-header--band .en,
.greeting-v2__header .en{
  font-size: .85em;
  font-weight: 700;
  letter-spacing: .12em;
  white-space: nowrap;
}

/* ---------- ご挨拶（greeting-v2）帯：確実に出る最終形 ---------- */
.greeting-v2__header{
  width: min(var(--band-max), calc(100% - (var(--band-gutter) * 2))) !important;
  margin-left: auto !important;
  margin-right: auto !important;

  min-height: var(--greet-h);
  display:flex;
  align-items:center;
  justify-content:center;

  /* 両端縦線＋青グラ */
  background:
    linear-gradient(#0b2a55, #0b2a55) left 0 top 0 / var(--greet-ear) 100% no-repeat,
    linear-gradient(#0b2a55, #0b2a55) right 0 top 0 / var(--greet-ear) 100% no-repeat,
    linear-gradient(180deg,#5a97e4 0%, #4f8ad7 100%) 0 0 / 100% 100% no-repeat !important;

  border-radius: 10px;
  box-shadow: 0 8px 22px rgba(13,42,83,.12);
  overflow:hidden;
}

/* 中のh2は透明（帯は親が描く） */
.greeting-v2__header > h2,
.greeting-v2__header > h2.band-title,
.greeting-v2__header .band-title{
  margin:0 !important;
  height: var(--greet-h);
  width:100% !important;

  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:.45em !important;
  text-align:center !important;

  background: transparent !important;
  box-shadow:none !important;
  border-radius:0 !important;

  color:#fff;
  font-weight:900;
  letter-spacing:.02em;
  font-size: clamp(21px, 2.1vw, 26px);
}

/* 旧疑似要素が残っても事故らないように完全停止 */
.greeting-v2__header::before,
.greeting-v2__header::after,
.greeting-v2__header > h2::before,
.greeting-v2__header > h2::after{
  content:none !important;
}

/* ご挨拶カード幅（帯と連動させない） */
article.greeting-v2__card{
  width: min(var(--card-max), calc(100% - (var(--card-gutter) * 2))) !important;
  margin-left:auto !important;
  margin-right:auto !important;
  box-sizing:border-box !important;
}

/* =========================================================
   6) フッター（中央寄せ固定）
   ========================================================= */
.site-footer--compact{
  background: #07235f;
  color:#fff;
  padding: clamp(16px, 2.6vw, 22px) 0;
  margin-top: clamp(20px, 3vw, 32px);
}

.site-footer--compact .footer-inner,
.site-footer--compact .site-footer__container{
  width: min(var(--footer-max), calc(100% - 32px));
  margin: 0 auto;
  padding: 22px 0;
  text-align:center;
  box-sizing:border-box;
}

.site-footer--compact .footer-nav{
  display:flex;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  gap: 18px;
  line-height: 1.8;
}
.site-footer--compact .footer-nav a{
  color:#fff;
  text-decoration:none;
}
.site-footer--compact .footer-nav a:hover{
  text-decoration: underline;
}

.site-footer--compact .copyright{
  display:block;
  margin-top: 10px;
  color: rgba(255,255,255,.92);
  font-size: clamp(12px, 1.4vw, 14px);
}

/* sticky footer（短いページでフッターが上に上がる対策） */
html, body{ height: 100%; }
body{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main{ flex: 1 0 auto; }
footer{ margin-top: 0 !important; }

:root{
  --hero-to-ribbon: 36px; /* 他ページに合わせて 28〜48px で調整 */
}

/* company：ヒーロー直下 → 1個目のリボン（ご挨拶）までの余白を作る */
body[data-page="company"] #greeting .section-header{
  margin-top: var(--hero-to-ribbon) !important;
}

/* =========================================================
   company：ご挨拶セクションの「透かしロゴ」だけ徹底的に消す（リボンは残す）
   ========================================================= */

/* 1) greeting セクション本体やカード/本文の背景画像を無効化 */
body[data-page="company"] #greeting.greeting-v2,
body[data-page="company"] #greeting .greeting-v2__card,
body[data-page="company"] #greeting .greeting-v2__body,
body[data-page="company"] #greeting .greeting-v2__sign{
  background-image: none !important;
  background: transparent !important;
}

/* 2) 透かしは ::before / ::after で出してることが多いので、本文側だけ止める
      ※ header（リボン）側は除外する */
body[data-page="company"] #greeting :not(.greeting-v2__header):not(.band-title)::before,
body[data-page="company"] #greeting :not(.greeting-v2__header):not(.band-title)::after{
  content: none !important;
  display: none !important;
  background: none !important;
  background-image: none !important;
}
/* 整備メニュー */

.maint-menu{
  max-width:1100px;
  margin:60px auto;
  text-align:center;
}

.maint-menu-title{
  font-size:22px;
  font-weight:700;
  margin-bottom:30px;
}

.maint-menu-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
  max-width:900px;
  margin:0 auto;
}

.maint-menu-item{
  background:#f1f5f9;
  padding:22px 16px;   /* ← 少し増やす */
  border-radius:10px;
  font-weight:600;
  text-align:center;
  box-shadow:0 4px 10px rgba(0,0,0,0.05);
  transition: transform .2s ease, box-shadow .2s ease;
}
.maint-menu-item:hover{
  transform: translateY(-3px);
  box-shadow: 0 10px 18px rgba(0,0,0,0.08);
}
section{
  margin-top: 80px;
  margin-bottom: 80px;
}
@media (max-width:700px){

section{
  margin-top: 60px;
  margin-bottom: 60px;
 }
}

/* 整備ページ：スマホ時のナビ詰まり防止 */
@media (max-width: 768px){
  body[data-page="maintenance"] .nav-links{
    gap: 6px;
  }

  body[data-page="maintenance"] .nav a{
    font-size: 12px;
    padding: 6px 6px;
  }
}
html, body{
  overflow-x: hidden;
}

/* =========================================================
   recruit（採用情報）完全統合版
   ※ いまは common.css の最後に貼ってOK
   ※ 後でそのまま page-recruit.css に移設可能
   ========================================================= */

/* ===== recruit ヒーロー ===== */
body[data-page="recruit"] .recruit-hero{
  position: relative;
  min-height: clamp(420px, 52vh, 620px);
  border-radius: 26px;
  overflow: hidden;
  margin: 26px auto 34px;
  width: min(1400px, calc(100% - 32px));
  box-shadow: 0 18px 70px rgba(0,0,0,.10);
  background: #0b2a55;
}

body[data-page="recruit"] .recruit-hero__media{
  position: absolute;
  inset: 0;
}

body[data-page="recruit"] .recruit-hero__media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.02);
}

body[data-page="recruit"] .recruit-hero__shade{
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(11,42,85,.88) 0%,
    rgba(11,42,85,.55) 46%,
    rgba(11,42,85,.20) 100%
  );
}

body[data-page="recruit"] .recruit-hero__inner{
  position: relative;
  padding: clamp(22px, 4.2vw, 54px);
  max-width: 780px;
  color: #fff;
  z-index: 2;
}

body[data-page="recruit"] .recruit-hero__kicker{
  margin: 0 0 10px;
  letter-spacing: .22em;
  font-weight: 900;
  opacity: .9;
}

body[data-page="recruit"] .recruit-hero__title{
  margin: 0 0 10px;
  font-size: clamp(28px, 4.3vw, 46px);
  line-height: 1.18;
  font-weight: 900;
}

body[data-page="recruit"] .recruit-hero__title span{
  color: #9fd0ff;
}

body[data-page="recruit"] .recruit-hero__lead{
  margin: 0 0 18px;
  line-height: 1.9;
  opacity: .95;
}

body[data-page="recruit"] .recruit-hero__cta{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin: 18px 0 16px;
}

body[data-page="recruit"] .btn-primary,
body[data-page="recruit"] .btn-ghost{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  padding: 0 18px;
  border-radius: 999px;
  font-weight: 900;
  letter-spacing: .02em;
  text-decoration: none;
}

body[data-page="recruit"] .btn-primary{
  background: #fff;
  color: #0b2a55;
}

body[data-page="recruit"] .btn-ghost{
  border: 1px solid rgba(255,255,255,.55);
  color: #fff;
}

body[data-page="recruit"] .recruit-hero__chips{
  list-style: none;
  padding: 0;
  margin: 10px 0 0;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

body[data-page="recruit"] .recruit-hero__chips li{
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.18);
  font-weight: 800;
  font-size: 13px;
}

/* ===== recruit 共通セクション ===== */
body[data-page="recruit"] .recruit-sec{
  width: min(1200px, calc(100% - 32px));
  margin: 0 auto 46px;
}

body[data-page="recruit"] .section-header{
  margin: 0 0 14px;
}

body[data-page="recruit"] .section-title{
  margin: 0;
  font-size: clamp(20px, 2.6vw, 26px);
  font-weight: 900;
  color: #0b2a55;
}

body[data-page="recruit"] .section-title small{
  font-size: .62em;
  opacity: .7;
  margin-left: .35em;
  letter-spacing: .12em;
}

body[data-page="recruit"] .recruit-card{
  background: #fff;
  border-radius: 22px;
  padding: clamp(16px, 2.4vw, 26px);
  box-shadow: 0 14px 50px rgba(0,0,0,.08);
}

/* ===== 2カラム導入 ===== */
body[data-page="recruit"] .recruit-two{
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 22px;
  align-items: center;
}

body[data-page="recruit"] .recruit-two__img img{
  width: 100%;
  height: clamp(220px, 26vw, 340px);
  object-fit: cover;
  border-radius: 18px;
  display: block;
}

body[data-page="recruit"] .recruit-hdg{
  margin: 0 0 8px;
  font-size: clamp(18px, 2.4vw, 22px);
  font-weight: 900;
  color: #0b2a55;
}

body[data-page="recruit"] .recruit-txt{
  margin: 0 0 12px;
  line-height: 1.9;
  color: #334155;
}

body[data-page="recruit"] .recruit-points{
  margin: 0;
  padding-left: 1.1em;
  line-height: 1.9;
  color: #334155;
}

/* ===== 募集職種カード ===== */
body[data-page="recruit"] .recruit-grid3{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

body[data-page="recruit"] .job-card{
  position: relative;
  background: #fff;
  border-radius: 20px;
  padding: 18px;
  box-shadow: 0 12px 40px rgba(0,0,0,.08);
  display: flex;
  flex-direction: column;
  min-height: 260px;
  transition: transform .2s ease, box-shadow .2s ease;
}

body[data-page="recruit"] .job-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 18px 55px rgba(0,0,0,.12);
}

body[data-page="recruit"] .job-card[data-type]::before{
  content: attr(data-type);
  position: absolute;
  top: 14px;
  right: 14px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid #e2e8f0;
  background: #fff;
  color: #0b2a55;
}

body[data-page="recruit"] .job-card.is-driver{
  border: 1px solid rgba(246, 153, 63, .35);
}

body[data-page="recruit"] .job-card.is-office{
  border: 1px solid rgba(99, 179, 237, .35);
}

body[data-page="recruit"] .job-card.is-maint{
  border: 1px solid rgba(148, 163, 184, .45);
}

body[data-page="recruit"] .job-card__title{
  margin: 0 0 8px;
  font-weight: 900;
  color: #0b2a55;
  font-size: 18px;
}

body[data-page="recruit"] .job-card__txt{
  margin: 0 0 12px;
  color: #475569;
  line-height: 1.8;
}

body[data-page="recruit"] .job-card__dl{
  margin: 0 0 14px;
}

body[data-page="recruit"] .job-card__dl > div{
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 10px;
  padding: 7px 0;
  border-top: 1px solid #eef2f7;
}

body[data-page="recruit"] .job-card__dl > div:first-child{
  border-top: 0;
}

body[data-page="recruit"] .job-card__dl dt{
  color: #0b2a55;
  font-weight: 900;
}

body[data-page="recruit"] .job-card__dl dd{
  margin: 0;
  color: #334155;
}

body[data-page="recruit"] .job-card__actions{
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  align-items: flex-start !important;
  margin-top: auto;
}

body[data-page="recruit"] .job-card__link{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  max-width: none !important;
  min-height: 34px !important;
  padding: 8px 14px !important;
  border-radius: 999px !important;
  background: #0b2a55 !important;
  color: #fff !important;
  text-decoration: none !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  box-shadow: 0 10px 22px rgba(0,0,0,.10);
  transition: background-color .15s ease, transform .15s ease, box-shadow .15s ease !important;
}

body[data-page="recruit"] .job-card.is-driver .job-card__link{
  background: linear-gradient(90deg, #0b2a55 0%, #17407a 55%, #0b2a55 100%) !important;
}

body[data-page="recruit"] .job-card__link:hover{
  background: #d12b2b !important;
  box-shadow: 0 10px 22px rgba(209,43,43,.16) !important;
  transform: translateY(-1px) !important;
}

body[data-page="recruit"] .job-card__link:active{
  background: #e66a00 !important;
  transform: translateY(1px) !important;
}

body[data-page="recruit"] .job-card__more{
  display: inline-block;
  margin-left: 6px;
}

/* ===== 福利厚生など ===== */
body[data-page="recruit"] .recruit-grid2{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

body[data-page="recruit"] .benefit{
  background: #fff;
  border-radius: 18px;
  padding: 16px 18px;
  box-shadow: 0 10px 34px rgba(0,0,0,.07);
}

body[data-page="recruit"] .benefit h3{
  margin: 0 0 6px;
  color: #0b2a55;
  font-weight: 900;
}

body[data-page="recruit"] .benefit p{
  margin: 0;
  color: #475569;
  line-height: 1.85;
}

/* ===== 応募フロー ===== */
body[data-page="recruit"] .flow{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

body[data-page="recruit"] .flow li{
  background: #fff;
  border-radius: 18px;
  padding: 14px;
  box-shadow: 0 10px 34px rgba(0,0,0,.07);
  display: flex;
  align-items: center;
  gap: 12px;
}

body[data-page="recruit"] .flow__no{
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background: #0b2a55;
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 900;
  flex: 0 0 auto;
}

body[data-page="recruit"] .flow h3{
  margin: 0 0 4px;
  font-size: 16px;
  color: #0b2a55;
  font-weight: 900;
}

body[data-page="recruit"] .flow p{
  margin: 0;
  color: #475569;
  line-height: 1.8;
}

/* ===== FAQ ===== */
body[data-page="recruit"] .faq{
  background: #fff;
  border-radius: 22px;
  padding: 10px 14px;
  box-shadow: 0 14px 50px rgba(0,0,0,.08);
}

body[data-page="recruit"] .faq__item{
  border-top: 1px solid #eef2f7;
  padding: 10px 0;
}

body[data-page="recruit"] .faq__item:first-child{
  border-top: 0;
}

body[data-page="recruit"] .faq__item summary{
  cursor: pointer;
  list-style: none;
  font-weight: 900;
  color: #0b2a55;
  padding: 8px 6px;
}

body[data-page="recruit"] .faq__item summary::-webkit-details-marker{
  display: none;
}

body[data-page="recruit"] .faq__body{
  padding: 0 6px 10px;
  color: #475569;
  line-height: 1.9;
}

/* ===== エントリー帯 ===== */
body[data-page="recruit"] .entry__card{
  background: #0b2a55;
  color: #fff;
  border-radius: 22px;
  padding: clamp(18px, 3vw, 28px);
}

body[data-page="recruit"] .entry__card h3{
  margin: 0 0 8px;
  font-weight: 900;
}

body[data-page="recruit"] .entry__card p{
  margin: 0 0 12px;
  line-height: 1.9;
  opacity: .95;
}

body[data-page="recruit"] .entry__btns{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 10px;
}

body[data-page="recruit"] .entry__note{
  opacity: .85;
  font-size: 13px;
  margin-top: 10px;
}

/* ===== 詳細カード ===== */
body[data-page="recruit"] .job-details{
  display: grid;
  gap: 18px;
}

body[data-page="recruit"] .job-detail{
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 16px 50px rgba(0,0,0,.06);
  scroll-margin-top: 150px;
}

body[data-page="recruit"] .job-detail__head{
  margin-bottom: 12px;
}

body[data-page="recruit"] .job-detail__title{
  margin: 0 0 6px;
  font-size: clamp(18px, 2.2vw, 22px);
  font-weight: 900;
  color: #0b2a55;
}

body[data-page="recruit"] .job-detail__lead{
  margin: 0;
  color: #475569;
  line-height: 1.9;
}

body[data-page="recruit"] .job-detail__grid{
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr 1fr;
}

body[data-page="recruit"] .job-detail__box{
  border: 1px solid #eef2f7;
  border-radius: 14px;
  padding: 14px;
  background: #fbfdff;
}

body[data-page="recruit"] .job-detail__hdg{
  margin: 0 0 8px;
  font-weight: 900;
  color: #0b2a55;
}

body[data-page="recruit"] .job-detail__sub{
  margin: 12px 0 6px;
  font-weight: 900;
  color: #0b2a55;
  font-size: 14px;
}

body[data-page="recruit"] .job-detail__list{
  margin: 0 0 0 18px;
  color: #334155;
  line-height: 1.9;
}

body[data-page="recruit"] .job-detail__dl{
  display: grid;
  gap: 8px;
  margin: 0;
}

body[data-page="recruit"] .job-detail__dl > div{
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 10px;
}

body[data-page="recruit"] .job-detail__dl dt{
  color: #0b2a55;
  font-weight: 900;
}

body[data-page="recruit"] .job-detail__dl dd{
  margin: 0;
  color: #334155;
}

body[data-page="recruit"] .job-detail__meta{
  margin-top: 14px;
  display: grid;
  gap: 12px;
}

body[data-page="recruit"] .job-detail__cta{
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid #e7eefb;
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

body[data-page="recruit"] .job-detail__btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 18px;
  border-radius: 999px;
  background: #0b2a55;
  color: #fff;
  font-weight: 900;
  text-decoration: none;
  box-shadow: 0 14px 34px rgba(11,42,85,.18);
  transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease;
}

body[data-page="recruit"] .job-detail__btn:hover{
  background: #d12b2b;
  transform: translateY(-1px);
  box-shadow: 0 18px 44px rgba(209,43,43,.18);
}

body[data-page="recruit"] .job-detail__back{
  display: inline-flex;
  align-items: center;
  padding: 10px 6px;
  color: #0b2a55;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 4px;
  opacity: .85;
}

body[data-page="recruit"] .job-detail__back:hover{
  opacity: 1;
}

/* ===== アンカー位置補正 ===== */
body[data-page="recruit"] .jobdetail{
  scroll-margin-top: 50px;
}

:root{
  --anchor-offset: 200px;
}

body[data-page="recruit"] [id^="detail-"]:target::before{
  content: "";
  display: block;
  height: var(--anchor-offset);
  margin-top: calc(-1 * var(--anchor-offset));
}

body[data-page="recruit"] #jobs:target::before{
  content: none !important;
  height: 0 !important;
  margin-top: 0 !important;
}

body[data-page="recruit"] #jobs{
  scroll-margin-top: 140px;
}

/* ===== 採用メッセージ（海動画背景） ===== */
body[data-page="recruit"] .message-card{
  --mc-pad: 28px;
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  background: #fff;
  padding-bottom: clamp(220px, 30vw, 330px);
}

body[data-page="recruit"] .message-card__driver{
  align-self: start;
  margin-top: 6px;
  position: relative !important;
  z-index: 11 !important;
}

body[data-page="recruit"] .message-card__driver img{
  width: 100%;
  height: auto;
  border-radius: 16px;
  display: block;
}

body[data-page="recruit"] .message-card .message-sea{
  position: absolute;
  left: calc(-1 * var(--mc-pad)) !important;
  right: calc(-1 * var(--mc-pad)) !important;
  bottom: -360px;
  width: auto !important;
  height: 60%;
  z-index: 0 !important;
  pointer-events: none;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom,
    transparent 0%,
    black 18%,
    black 100%
  );
  mask-image: linear-gradient(to bottom,
    transparent 0%,
    black 18%,
    black 100%
  );
}

body[data-page="recruit"] .message-card .message-sea video{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center bottom;
  max-width: none !important;
  filter: brightness(1.14) contrast(1.05) saturate(1.05) !important;
}

body[data-page="recruit"] .message-card .message-sea::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
    rgba(11,42,85,.45),
    rgba(11,42,85,.08)
  );
  z-index: 1 !important;
}

body[data-page="recruit"] .message-card .recruit-two{
  position: relative !important;
  z-index: 10 !important;
}

body[data-page="recruit"] .message-card .recruit-two__txt{
  position: relative !important;
  z-index: 11 !important;
}

/* ===== レスポンシブ ===== */
@media (max-width: 980px){
  body[data-page="recruit"] .recruit-two{
    grid-template-columns: 1fr;
  }

  body[data-page="recruit"] .recruit-grid3{
    grid-template-columns: 1fr;
  }

  body[data-page="recruit"] .recruit-grid2{
    grid-template-columns: 1fr;
  }

  body[data-page="recruit"] .flow{
    grid-template-columns: 1fr;
  }

  body[data-page="recruit"] .recruit-hero{
    border-radius: 22px;
  }
}

@media (max-width: 860px){
  body[data-page="recruit"] .job-detail__grid{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px){
  body[data-page="recruit"] .job-detail__btn{
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce){
  body[data-page="recruit"] .message-card .message-sea video{
    animation: none;
  }
}