/* ===================================================
   DESIGN V7 CSS — 亀田商会
   V7 FV: フォトバナー（全体表示）+ 水平区切り + 白コンテンツエリア
   design-v6.css の後に読み込み、ヒーローセクションを上書き
   =================================================== */

/* ===== V7 HERO RESET ===== */
.v7-hero {
  display: block !important;
  background: #ffffff !important;
  min-height: auto !important;
  padding: 0 !important;
  overflow: visible !important;
  position: relative !important;
}

/* v6 の装飾要素を非表示 */
.v7-hero > .hero-blob,
.v7-hero > .hero-road,
.v7-hero > .hero-scroll {
  display: none !important;
}

/* v6 hero::after（斜め divider）を無効化 */
.v7-hero::after {
  display: none !important;
}

/* ===== V7 PHOTO AREA（全体表示） ===== */
.v7-photo-area {
  position: relative;
  width: 100%;
  /* 高さ固定なし → 画像の自然な高さで表示 */
  overflow: hidden;
  background: #eef2f7; /* 余白が出た場合の背景色（薄いブルー系） */
  /* 斜め区切りなし → 水平ボーダーのみ */
  border-bottom: 1px solid #dde4ec;
}

/* 斜め切り込みを削除（水平区切りに変更） */
.v7-photo-area::after {
  display: none !important;
}

/* 写真上の軽いオーバーレイも不要なので非表示 */
.v7-photo-area::before {
  display: none !important;
}

/* hero-img-wrap: static 配置で画像全体を表示 */
.v7-photo-area .hero-img-wrap {
  position: static !important;
  inset: auto !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  width: 100% !important;
  height: auto !important;
  background: transparent !important;
  border-left: none !important;
  clip-path: none !important;
  overflow: visible !important;
  z-index: auto !important;
}

/* 画像を全体表示（縦横比を維持） */
.v7-photo-area .hero-img {
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  object-fit: unset !important;
  padding: 0 !important;
  display: block !important;
  vertical-align: bottom !important;
}

/* v6 FIX-B のオーバーレイを無効化 */
.v7-photo-area .hero-img-wrap::before,
.v7-photo-area .hero-img-wrap::after {
  display: none !important;
  content: none !important;
}

/* ===== V7 TITLE BOX（白コンテンツエリア内） ===== */
/* 写真下の content-inner に移動済み */
.v7-content-inner .v7-title-box {
  position: static !important;
  transform: none !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-left: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 0 32px 0 !important;
  max-width: none !important;
  width: auto !important;
  box-shadow: none !important;
}

.v7-content-inner .hero-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: #0d2240 !important;
  color: #ffffff !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.08em !important;
  padding: 5px 14px !important;
  border-radius: 2px !important;
  margin-bottom: 20px !important;
}

.v7-content-inner .badge-dot {
  width: 6px !important;
  height: 6px !important;
  background: #4a9edd !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
}

/* メインコピー — 白背景上に濃紺で大きく */
.v7-content-inner .hero-title {
  font-size: clamp(1.7rem, 3.2vw, 2.6rem) !important;
  font-weight: 700 !important;
  color: #0d2240 !important;
  line-height: 1.55 !important;
  letter-spacing: 0.04em !important;
  margin: 0 0 28px 0 !important;
}

.v7-content-inner .hero-title .accent {
  color: #1e6ab0 !important;
  display: inline !important;
}

/* ===== V7 CONTENT AREA ===== */
.v7-content-area {
  position: relative;
  background: #ffffff;
  padding: 60px 80px 80px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
  overflow: hidden;
}

.v7-content-inner {
  max-width: 720px;
  flex: 1;
  position: relative;
  z-index: 2;
}

/* アクセントライン（コピーの上） */
.v7-content-inner::before {
  content: '';
  display: block;
  width: 48px;
  height: 3px;
  background: linear-gradient(90deg, #1e6ab0, #4a9edd);
  margin-bottom: 28px;
  border-radius: 2px;
}

.v7-content-area .hero-desc {
  font-size: clamp(0.92rem, 1.4vw, 1.05rem) !important;
  color: #153655 !important;
  line-height: 1.9 !important;
  margin: 0 0 36px !important;
}

.v7-content-area .hero-btns {
  display: flex !important;
  gap: 16px !important;
  flex-wrap: wrap !important;
}

.v7-content-area .btn-main {
  background: #0d2240 !important;
  color: #ffffff !important;
  border: 2px solid #0d2240 !important;
  padding: 14px 32px !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  border-radius: 3px !important;
  text-decoration: none !important;
  display: inline-block !important;
  transition: background 0.2s, color 0.2s !important;
}

.v7-content-area .btn-main:hover {
  background: #153655 !important;
  border-color: #153655 !important;
}

.v7-content-area .btn-sub {
  background: transparent !important;
  color: #0d2240 !important;
  border: 2px solid #0d2240 !important;
  padding: 14px 28px !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  border-radius: 3px !important;
  text-decoration: none !important;
  display: inline-block !important;
  transition: background 0.2s, color 0.2s !important;
}

.v7-content-area .btn-sub:hover {
  background: #0d2240 !important;
  color: #ffffff !important;
}

/* ===== V7 DECO（装飾的な円） ===== */
.v7-deco {
  position: absolute;
  right: 80px;
  bottom: 40px;
  width: 240px;
  height: 240px;
  pointer-events: none;
  z-index: 1;
  flex-shrink: 0;
}

.v7-deco::before,
.v7-deco::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  border: 2px solid rgba(74, 158, 221, 0.20);
}

.v7-deco::before {
  width: 200px;
  height: 200px;
  top: 20px;
  left: 20px;
}

.v7-deco::after {
  width: 130px;
  height: 130px;
  top: 55px;
  left: 55px;
  border-color: rgba(74, 158, 221, 0.12);
  border-width: 3px;
}

/* ===== v6 の斜めカット全般を水平区切りに上書き ===== */
/*
  v6 では各セクションの ::before / ::after に clip-path: polygon() で
  斜めの三角形を作っていた。すべて display: none にして
  セクションを自然な水平ボーダーで区切る。
*/

/* ヒーロー → About 斜め */
.hero::after {
  display: none !important;
}

/* About セクション 上下斜め */
.about::before,
.about::after {
  display: none !important;
}

/* Cargo セクション 下斜め */
.cargo::after {
  display: none !important;
}

/* Fleet セクション 下斜め */
.fleet::after {
  display: none !important;
}

/* Company セクション 下斜め */
.company::after {
  display: none !important;
}

/* Blog セクション 下斜め */
.blog::after {
  display: none !important;
}

/* Recruit セクション 下斜め */
.recruit::after {
  display: none !important;
}

/* 採用ページ・ブログページのヒーロー斜め */
.kameda-recruit-page .recruit-hero::after,
.blog-hero::after {
  display: none !important;
}

/* セクション間の視覚的区切りを薄いボーダーで補完 */
.about,
.cargo,
.fleet,
.company,
.blog,
.recruit,
.contact {
  border-top: 1px solid rgba(13, 34, 64, 0.08) !important;
}

/* ===== RESPONSIVE ===== */

/* タブレット (≤960px) */
@media (max-width: 960px) {
  .v7-content-area {
    padding: 48px 48px 64px;
  }

  .v7-deco {
    right: 40px;
    width: 180px;
    height: 180px;
  }

  .v7-content-inner .hero-title {
    font-size: clamp(1.5rem, 3vw, 2.2rem) !important;
  }
}

/* モバイル (≤640px) */
@media (max-width: 640px) {
  .v7-photo-area {
    border-bottom: 1px solid #dde4ec;
  }

  .v7-content-area {
    padding: 40px 24px 56px;
    flex-direction: column;
  }

  .v7-deco {
    display: none;
  }

  .v7-content-inner .hero-title {
    font-size: 1.5rem !important;
    margin-bottom: 20px !important;
  }

  .v7-content-inner::before {
    margin-bottom: 20px;
  }

  .v7-content-area .hero-btns {
    flex-direction: column !important;
  }

  .v7-content-area .btn-main,
  .v7-content-area .btn-sub {
    text-align: center !important;
    width: 100% !important;
    padding: 16px 24px !important;
  }
}

/* 小さいモバイル (≤390px) */
@media (max-width: 390px) {
  .v7-content-area {
    padding: 32px 16px 48px;
  }

  .v7-content-inner .hero-title {
    font-size: 1.3rem !important;
  }
}

/* ===== FV コピーセクション 中央寄せ ===== */
/* 修正1・2: テキスト・ボタンを中央配置 */
.v7-content-area {
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

.v7-content-inner {
  max-width: 720px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
}

/* アクセントラインを中央に */
.v7-content-inner::before {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* バッジを中央に */
.v7-content-inner .hero-badge {
  display: inline-flex !important;
}

/* h1 を中央に */
.v7-content-inner .hero-title {
  text-align: center !important;
}

/* リード文を中央に */
.v7-content-area .hero-desc {
  text-align: center !important;
}

/* ボタン群を中央寄せ */
.v7-content-area .hero-btns {
  justify-content: center !important;
}

/* ===== 保有車両: 紺帯（v6-fleet-header）削除 ===== */
/* 修正4: カード上部の紺色帯を非表示 */
.v6-fleet-header {
  display: none !important;
}

/* ===== 保有車両: トラック画像を全体表示・白背景 ===== */
.fleet-card-img {
  background: #ffffff !important;
}

.fleet-card-img img {
  object-fit: contain !important;
  object-position: center center !important;
  padding: 10px !important;
  background: #ffffff !important;
}

/* ===== 保有車両: スペックラベルと数値の調整 ===== */
.fleet-spec-label {
  font-weight: 500 !important;
  font-size: 10px !important;
  letter-spacing: 0.08em !important;
  color: var(--v6-text-mid, #4a5568) !important;
}

.fleet-spec-val {
  font-weight: 600 !important;
  font-size: 1.05rem !important;
  color: #0d2240 !important;
  font-family: inherit !important;
  line-height: 1.3 !important;
}

.fleet-spec-row {
  line-height: 1.5 !important;
}

/* ===== RESPONSIVE (追加分) ===== */
@media (max-width: 640px) {
  /* FV ボタンをスマホでも中央寄せ縦並び */
  .v7-content-area .hero-btns {
    flex-direction: column !important;
    align-items: center !important;
  }

  .v7-content-area .btn-main,
  .v7-content-area .btn-sub {
    width: 100% !important;
    max-width: 320px !important;
    text-align: center !important;
    padding: 16px 24px !important;
  }
}

/* ================================================================
   FV OVERLAY REDESIGN
   背景画像の前面に左グラデーションパネルを重ねて左寄せ表示
   ================================================================ */

/* ── ヒーロー全体を位置コンテナに ── */
.v7-hero {
  position: relative !important;
  min-height: 600px !important;
  overflow: hidden !important;
  background: #162232 !important; /* 画像未読み込み時フォールバック */
  display: block !important;
  padding: 0 !important;
}

/* ── 写真エリアをヒーロー全面に絶対配置（背景として機能） ── */
.v7-photo-area {
  position: absolute !important;
  inset: 0 !important;
  top: 0 !important; left: 0 !important;
  right: 0 !important; bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  background: #162232 !important;
  border-bottom: none !important;
}

.v7-photo-area .hero-img-wrap {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: #162232 !important;
  overflow: hidden !important;
}

/* 画像はカバーで全面表示 — 右側にトラックが見えるよう右寄り */
.v7-photo-area .hero-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: 68% center !important;
  padding: 0 !important;
  display: block !important;
}

/* ── コンテンツエリアを写真の上に重ねる ── */
.v7-content-area {
  position: relative !important;
  z-index: 2 !important;
  /* 左白〜右透明グラデーション */
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.97)  0%,
    rgba(255, 255, 255, 0.92) 38%,
    rgba(255, 255, 255, 0.72) 60%,
    rgba(255, 255, 255, 0.00) 100%
  ) !important;
  min-height: 600px !important;
  padding: 88px 8% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;  /* 左寄せ */
  text-align: left !important;
  overflow: visible !important;
}

/* コンテンツを左半分に収める */
.v7-content-inner {
  max-width: 520px !important;
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;   /* 左寄せ */
  text-align: left !important;
  background: transparent !important;
}

/* アクセントラインを左寄せ */
.v7-content-inner::before {
  margin-left: 0 !important;
  margin-right: auto !important;
}

/* バッジ・タイトル・リード文を左寄せ（中央寄せルールを上書き） */
.v7-content-inner .hero-title {
  text-align: left !important;
}

.v7-content-area .hero-desc {
  text-align: left !important;
  max-width: 480px !important;
}

/* ボタンを左寄せ */
.v7-content-area .hero-btns {
  justify-content: flex-start !important;
  flex-wrap: nowrap !important;
}

/* デコ要素は非表示 */
.v7-deco {
  display: none !important;
}

/* ── タブレット (≤960px) ── */
@media (max-width: 960px) {
  .v7-hero {
    min-height: 520px !important;
  }

  .v7-content-area {
    min-height: 520px !important;
    padding: 72px 6% !important;
    background: linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.97)  0%,
      rgba(255, 255, 255, 0.93) 50%,
      rgba(255, 255, 255, 0.78) 72%,
      rgba(255, 255, 255, 0.00) 100%
    ) !important;
  }

  .v7-content-inner {
    max-width: 460px !important;
  }
}

/* ── スマホ (≤640px) ──
   写真を上部に固定高で見せ、コンテンツをほぼ白背景で読みやすく */
@media (max-width: 640px) {
  .v7-hero {
    min-height: 0 !important;
    overflow: visible !important;
  }

  /* 写真を通常フロー（relative）に戻して上部に表示 */
  .v7-photo-area {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: 56vw !important;
    min-height: 220px !important;
    max-height: 300px !important;
    overflow: hidden !important;
    background: #162232 !important;
  }

  .v7-photo-area .hero-img-wrap {
    position: absolute !important;
    inset: 0 !important;
  }

  .v7-photo-area .hero-img {
    object-position: 60% center !important;
  }

  /* コンテンツは写真の下、白背景で表示 */
  .v7-content-area {
    position: relative !important;
    z-index: 1 !important;
    min-height: 0 !important;
    padding: 40px 6% 52px !important;
    /* スマホはほぼ白 — 読みやすさ優先 */
    background: rgba(255, 255, 255, 0.98) !important;
  }

  .v7-content-inner {
    max-width: 100% !important;
  }

  .v7-content-inner .hero-title {
    font-size: 1.55rem !important;
  }

  .v7-content-area .hero-btns {
    flex-direction: column !important;
    width: 100% !important;
  }

  .v7-content-area .btn-main,
  .v7-content-area .btn-sub {
    width: 100% !important;
    max-width: 100% !important;
    text-align: center !important;
    padding: 15px 20px !important;
  }
}

/* ── 小さいスマホ (≤390px) ── */
@media (max-width: 390px) {
  .v7-photo-area {
    height: 50vw !important;
  }

  .v7-content-area {
    padding: 32px 5% 44px !important;
  }

  .v7-content-inner .hero-title {
    font-size: 1.35rem !important;
  }
}

/* ================================================================
   PATCH v10: スマホ修正 + クイックナビ非表示 + フッター色修正
   ================================================================ */

/* ── 1. ヘッダー電話番号: スマホで自然なサイズ・色に ── */
@media (max-width: 640px) {
  /* ヘッダーの tel を小さく・通常フォントに */
  .header-tel {
    font-size: 11px !important;
    font-family: inherit !important;   /* Dela Gothic One を解除 */
    font-weight: 700 !important;
    color: #1e6ab0 !important;         /* 「長く付き合える」と同じ色 */
    letter-spacing: 0.01em !important;
    white-space: nowrap !important;
  }
  /* "お問合せ" ラベルはスマホ不要 */
  .header-tel-label {
    display: none !important;
  }
  /* header-right がはみ出さないよう制限 */
  .header-right {
    gap: 8px !important;
  }
  .header-tel-wrap {
    flex-shrink: 1 !important;
    min-width: 0 !important;
  }
}

/* ── 2. ドロワーメニュー: スマホで全幅表示 ──
   300px幅のドロワーを開いた際、左に見えるページコンテンツ（よくある質問等）が
   メニューの一部のように見えてしまう問題を解決。スマホでは全幅に。 */
@media (max-width: 640px) {
  .drawer-menu {
    width: 100% !important;
    right: -100% !important;
  }
  .drawer-menu.open {
    right: 0 !important;
  }
  /* ドロワー内のナビをより見やすく */
  .drawer-link {
    padding: 18px 28px !important;
    font-size: 15px !important;
  }
  .drawer-nav li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.10) !important;
  }
}

/* ── 3. フッター 電話番号・FAX: 読みやすい色に ── */
.footer-info {
  color: rgba(255, 255, 255, 0.72) !important;  /* 0.38 → 0.72 に明るく */
}
/* iOS Safari が自動リンク化した電話番号の色を統一 */
.footer-info a,
footer .footer-info a[href^="tel:"],
footer .footer-info a[href^="fax:"] {
  color: inherit !important;
  text-decoration: none !important;
  -webkit-text-decoration: none !important;
}

/* ── 4. クイックナビ非表示 (HTML削除の念押し) ── */
.v6-quick-nav {
  display: none !important;
}

/* ── 5. FV下・次セクション間の余白調整 ──
   クイックナビ削除後、ヒーロー直後からABOUTセクションへの接続 */
.v7-hero + .marquee-wrap + .stats-section + .about,
.about {
  margin-top: 0 !important;
}