:root{
  --header-max: 1200px;     /* 中身の最大幅 */
  --side-pad: 16px;         /* 左右の固定パディング */
  --nav-navy: #0b2a55;

  /* ヒーロー画像関連 */
  --hero-img-brightness: 1.3;
  --hero-h-min:   760px;
  --hero-h-ideal: 760px;
  --hero-h-max:   760px;

  /* ヘッダー：高さ・文字サイズ */
  --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;          /* ナビ同士の間隔 */

  --brand-gap: 18px;        /* ★ ロゴと社名の間隔（お好みで 14〜24px） */
  --hdr-cta-py: 10px;       /* ★ お問い合わせボタンの上下パディング */
  --hdr-cta-px: 16px;       /* ★ お問い合わせボタンの左右パディング */
}

/* =========================================
   ヒーロー画像の高さを 3 ページで完全統一
   （会社概要／事業案内／車両・設備紹介）
   ========================================= */

body[data-page="company"]  .hero--page,
body[data-page="services"] .services-hero,
body[data-page="fleet"]    .services-hero{
  min-height: clamp(var(--hero-h-min), var(--hero-h-ideal), var(--hero-h-max));
  height:     clamp(var(--hero-h-min), var(--hero-h-ideal), var(--hero-h-max));
}
/* 会社概要のヒーロー下の余白も、他ページとそろえる */
body[data-page="company"] .hero--page{
  margin-bottom: 32px;
}

/* ===============================

   固定ヘッダー：全ページ共通
   =============================== */

/* iOSの自動拡大オフ＋スクロールバー幅を固定 */
html{
  -webkit-text-size-adjust:100%;
  overflow-y:scroll;
  scrollbar-gutter:stable both-edges;
}

/* ヘッダー本体（箱だけ） */
.site-header2{
  position:fixed;
  top:0; left:0; right:0;
  z-index:9999;
  background:#fff;
  border-radius:12px 12px 0 0;
  box-shadow:0 6px 18px rgba(0,0,0,.10);
  overflow:hidden;
}

/* 上段・下段共通のリセット */
.site-header2 .topbar,
.site-header2 .mainbar{
  padding:0;
  margin:0;
}

/* ================= 上段（濃紺帯） ================= */
.site-header2 .topbar{
  background:var(--nav-navy);
  color:#fff;
}
.site-header2 .topbar > .inner{
  max-width:var(--header-max);
  margin:0 auto;
  padding:0 var(--side-pad);
  height:var(--topbar-h);
  display:flex;
  align-items:center;
  justify-content:flex-start;
  box-sizing:border-box;
  font-size:var(--topbar-fz);
  line-height:var(--topbar-lh);
  letter-spacing:var(--topbar-ls);
  white-space:nowrap;
}
.site-header2 .topbar *{
  font-size:inherit;
  line-height:inherit;
  letter-spacing:inherit;
}

/* ================= 下段（白バー） ================= */
.site-header2 .mainbar{
  background:#fff;
  border-bottom:1px solid #e6e8ee;
}
.site-header2 .mainbar > .inner{
  max-width:var(--header-max);
  margin:0 auto;
  padding:0 var(--side-pad);
  height:var(--mainbar-h);
  display:flex;
  align-items:center;
  justify-content:initial;
  gap:var(--hdr-gap);
  box-sizing:border-box;
}

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

/* 右：ナビ一式 */
.site-header2 .nav{
  margin-left:auto;
}
.site-header2 .nav-links{
  display:flex;
  align-items:center;
  gap:var(--hdr-gap);        /* ← ナビ間隔もここで統一 */
  list-style:none;
  margin:0;
  padding:0;
  white-space:nowrap;
}
.site-header2 .nav a{
  position:relative;
  display:inline-flex;
  align-items:center;
  font-size:var(--hdr-link-fz);     /* ← ナビ文字サイズ */
  letter-spacing:var(--hdr-link-ls);
  font-weight:800;
  color:var(--nav-navy);
  text-decoration:none;
  line-height:1.2;
  padding-block:6px;
}

/* ホバー／現在地 下線 */
.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;
  border-radius:999px;
  padding:var(--hdr-cta-py) var(--hdr-cta-px);  /* ← 大きさは変数で統一 */
}

/* ヘッダー内フォント・box-sizing統一 */
.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;
  font-variant-ligatures:none;
  box-sizing:border-box;
}

/* ヒーローのあるページは main 側で調整 */
.has-hero main{ padding-top:0; }
.has-hero main > *:first-child{ margin-top:0; }

/* ヒーローがないページ用の押し下げ（必要なら残す） */
body:not(.has-hero){
  padding-top:calc(var(--topbar-h) + var(--mainbar-h));
}

/* モバイル（幅が狭いときのまとめ調整） */
@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;
    --brand-gap:10px;
  }
}
/* =========================================
   HEADER 最終ロック（高さ・文字サイズ・間隔を完全統一）
   ========================================= */

/* 上段／下段に余計な余白が入らないように */
body .site-header2 .topbar,
body .site-header2 .mainbar{
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* 上段（濃紺）の高さ固定 */
body .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;
}


/* ロゴと社名の間隔＆サイズを統一 */
body .site-header2 .brand{
  margin-right:auto !important;
  display:flex !important;
  align-items:center !important;
  gap: var(--brand-gap) !important;  /* ★ ← ここ一箇所でロゴと社名の距離を調整 */
  white-space:nowrap;
}
body .site-header2 .brand img{
  height: var(--hdr-logo-h) !important;
  width:auto !important;
  display:block !important;
}
body .site-header2 .brand span{
  font-size: var(--hdr-name-fz) !important;
  font-weight:800 !important;
  letter-spacing:.04em !important;
  line-height:1.25 !important;
  color: var(--nav-navy) !important;
}

/* ナビ文字（ホーム／会社概要／事業案内／車両紹介…） */
body .site-header2 .nav-links{
  display:flex !important;
  align-items:center !important;
  gap: var(--hdr-gap) !important;
  margin:0 !important;
  padding:0 !important;
  list-style:none !important;
  white-space:nowrap !important;
}
body .site-header2 .nav a{
  position:relative !important;
  display:inline-flex !important;
  align-items:center !important;
  font-size: var(--hdr-link-fz) !important;
  letter-spacing: var(--hdr-link-ls) !important;
  font-weight:800 !important;
  line-height:1.2 !important;
  padding-block: 6px !important;
  color: var(--nav-navy) !important;
  text-decoration:none !important;
}

/* お問い合わせボタンだけピル型＋サイズも統一 */
body .site-header2 .nav a.cta{
  background: var(--nav-navy) !important;
  color:#fff !important;
  border-radius:999px !important;
  padding: var(--hdr-cta-py) var(--hdr-cta-px) !important;
}
/* =========================================
   ヒーロー下のリボン位置を全ページで合わせる
   （会社概要／事業案内／車両・設備紹介）
   ========================================= */

/* ① ヒーローの下の余白を統一 */
body[data-page="company"]  .hero--page,
body[data-page="services"] .services-hero,
body[data-page="fleet"]    .services-hero{
  margin-bottom: 20px;   /* ← 好みで 24〜40px に調整OK */
}
/* =========================================
   会社概要ヒーローの高さ・トリミングを
   services / fleet と完全に揃える
   ========================================= */

/* ヒーローブロック自体の高さをロック */
body[data-page="company"] .hero--page{
  position: relative;
  overflow: hidden;
}

/* 中の画像があれば「cover」でトリミングしてフィット */
body[data-page="company"] .hero--page img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ===============================
   会社概要だけ ご挨拶ブロックを少し下げる
   =============================== */

/* greeting セクション全体を下にずらす（リボン〜カードの間隔はそのまま） */
body[data-page="company"] .greeting-v2{
  margin-top: 34px !important;   /* まずは 12px くらいで様子見 */
}
/* まだ狭く感じたら 16px, 20px…と少しずつ増やして調整 */
/* =========================================================
   Header：モバイルで確実に縮む（最終上書き）
   ========================================================= */
@media (max-width: 820px){

  body .site-header2 .topbar > .inner,
  body .site-header2 .mainbar > .inner{
    max-width: 100% !important;
    padding-inline: 12px !important;
  }

  body .site-header2 .mainbar > .inner{
    margin: 0 !important;                 /* ★ auto を殺す（左基準） */
    justify-content: flex-start !important;/* ★ 中身も左基準 */
    height: auto !important;
    flex-wrap: wrap !important;
    row-gap: 4px !important;              /* ← 1段目⇄2段目の落段（ここで調整） */
    gap: 12px !important;
    padding-block: 10px !important;
  }
}

  /* ▼ブランド（ロゴ＋社名）も折り返し許可 */
  body .site-header2 .brand{
    white-space: normal !important;
  }

  /* ▼ナビ：nowrap を解除して折り返し可能に */
  body .site-header2 .nav-links{
    white-space: normal !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
  }

  /* ▼ナビ文字を少し小さく（詰まり防止） */
  body .site-header2 .nav a{
    font-size: 13px !important;
    padding-block: 4px !important;
  }
@media (max-width: 820px){
  body .site-header2 .nav{ width: 100%; margin-left: 0 !important; }
  body .site-header2 .nav-links{ justify-content: flex-start !important; }
}

  /* ▼トップバーも長文が入るなら折り返し許可 */
  body .site-header2 .topbar > .inner{
    white-space: normal !important;
  }

/* =========================================================
   company：モバイル 2段目を「整備 + お問い合せ」横並び中央（確定版）
   ========================================================= */
@media (max-width: 820px){

  body[data-page="company"] .site-header2 .nav{
    width: 100% !important;
    min-width: 0 !important;
  }

  body[data-page="company"] .site-header2 .nav-links{
    width: 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }

  /* ここがポイント：
     6番目の前で改行するための “ダミー改行” を入れる */
  body[data-page="company"] .site-header2 .nav-links::before{
    content: "";
    flex: 0 0 100%;
    order: 6;                 /* 6番目の前に入れる */
  }

  /* 1〜5番目は上段 */
  body[data-page="company"] .site-header2 .nav-links li:nth-child(-n+5){
    order: 1;
  }

  /* 6〜7番目（整備＋CTA）は2段目 */
  body[data-page="company"] .site-header2 .nav-links li:nth-child(6){ order: 7; }
  body[data-page="company"] .site-header2 .nav-links li:nth-child(7){ order: 8; }

  /* 2段目の行を中央寄せにする：
     6番目と7番目だけに auto margin を付けて中央へ寄せる */
  body[data-page="company"] .site-header2 .nav-links li:nth-child(6){
    margin-left: auto !important;
  }
  body[data-page="company"] .site-header2 .nav-links li:nth-child(7){
    margin-right: auto !important;
  }

  /* CTAの見た目は維持 */
  body[data-page="company"] .site-header2 .nav-links a.cta{
    display: inline-flex !important;
    white-space: nowrap !important;
  }
}
/* =========================================================
   company：モバイル 2段目（整備＋お問い合わせ）を左寄せにする
   ========================================================= */
@media (max-width: 820px){

  body[data-page="company"] .site-header2 .nav-links{
    justify-content: flex-start !important; /* 左寄せ */
  }

  /* 整備・お問い合わせともに自動マージンを解除 */
  body[data-page="company"] .site-header2 .nav-links li:nth-child(6),
  body[data-page="company"] .site-header2 .nav-links li:nth-child(7){
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* CTAも通常リンクと同じ流れで */
  body[data-page="company"] .site-header2 .nav-links li:nth-child(7) a.cta{
    margin: 0 !important;
  }
}
/* =========================================================
   company：モバイル ナビの段間を少し詰める（最終微調整）
   ========================================================= */
@media (max-width: 820px){

  /* 1段目⇄2段目の行間 */
  body[data-page="company"] .site-header2 .nav-links{
    row-gap: 5px !important;   /* ← ここだけ調整（4〜8pxで好み） */
  }

  /* 2段目の上余白があれば軽く削る */
  body[data-page="company"] .site-header2 .nav-links li:nth-child(6){
    margin-top: 2px !important;
  }

/* 2段目：整備 ↔ お問い合わせ の横スキマ調整 */
  body[data-page="company"] .site-header2 .nav-links li:nth-child(6){
    margin-right: 20px !important;  /* ← ここで間隔を作る */
  }
}
/* =========================================================
   home：お問い合わせボタンが右に行き過ぎるのを修正
   ========================================================= */
@media (max-width: 820px){
  body[data-page="home"] .site-header2 .nav{
    margin-left: 0 !important;   /* ← 右に押し出す指定を解除 */
  }

  body[data-page="home"] .site-header2 .nav-links{
    justify-content: flex-start !important; /* 他ページと同じ左寄り */
  }
}
/* =========================================================
   HOME（index）：モバイル時ヘッダー最終調整版
   - company / services と並び・基準を完全統一
   ========================================================= */
@media (max-width: 820px){

  /* 上段・下段の左右余白を統一 */
  body[data-page="home"] .site-header2 .topbar > .inner,
  body[data-page="home"] .site-header2 .mainbar > .inner{
    max-width: 100% !important;
    padding-inline: 12px !important;
  }

  /* mainbar：2段構成＋段間調整 */
  body[data-page="home"] .site-header2 .mainbar > .inner{
    height: auto !important;
    flex-wrap: wrap !important;
    row-gap: 20px !important;     /* ← 1段目と2段目の落段（調整はここ） */
    padding-block: 10px !important;
  }

  /* nav を右に押し出す指定を完全無効化 */
  body[data-page="home"] .site-header2 .nav{
    width: 100% !important;
    margin-left: 0 !important;
    flex: 0 0 100% !important;
  }

  /* ナビ全体：左寄せ＋折り返し */
  body[data-page="home"] .site-header2 .nav-links{
    width: 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    gap: 10px !important;         /* ← ナビ同士の基本間隔 */
    white-space: normal !important;
  }

  /* 2段目：整備ナビとお問い合わせの間隔 */
  body[data-page="home"] .site-header2 .nav-links li:nth-child(6){
    margin-right: 12px !important; /* ← 整備 ↔ お問い合わせ */
  }

  /* CTA（お問い合わせ）保険 */
  body[data-page="home"] .site-header2 .nav-links a.cta{
    display: inline-flex !important;
    white-space: nowrap !important;
  }
}
@media (max-width: 820px){
  body[data-page="home"] .site-header2 .mainbar > .inner{
    max-width: 100% !important;
    margin: 0 !important;          /* ← auto を殺す */
    padding-inline: 12px !important;

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

    row-gap: 20px !important;
  }
}
@media (max-width: 820px){

  /* HOME：ロゴ行 ↔ ナビ行 の間を詰める（赤印） */
  body[data-page="home"] .site-header2 .mainbar > .inner{
    padding-block: 10px !important;  /* ★トップバーとロゴの隙間：10→6 */
    row-gap: 11px !important;        /* ★ロゴとﾅﾋﾞの隙間：8→4 */
  }

  /* 念のため：個別マージンで広がっていたら殺す */
  body[data-page="home"] .site-header2 .brand{ margin-bottom: 0 !important; }
  body[data-page="home"] .site-header2 .nav{   margin-top: 0 !important; }
}
/* ================================
   HOME：ロゴを少し右へ（微調整）
   ================================ */
@media (max-width: 820px){
  body[data-page="home"] .site-header2 .brand{
    margin-left: 1px !important;   /* ← 6〜12pxで微調整OK */
  }
}