/*
  ============================================================
  亀田商会 HP  デザイン v3 — プレミアムコーポレート
  design-v2.css の後に読み込み、必要箇所のみ上書き
  方針: バウンス除去・シャドウ軽量化・3D回転撤廃・上質感
  ============================================================
*/

/* ─────────────────────────────────────────────
   §0  変数上書き — イージングとシャドウを落ち着かせる
───────────────────────────────────────────── */
:root {
  /* バウンスなし — Material Design 準拠の ease-out */
  --ease-spring: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);

  /* シャドウをニュートラルカラーのみ — 青色グロー排除 */
  --depth-1:
    0 1px 3px  rgba(26,42,58,.04),
    0 2px 6px  rgba(26,42,58,.03);
  --depth-2:
    0 2px 8px  rgba(26,42,58,.06),
    0 6px 18px rgba(26,42,58,.05);
  --depth-3:
    0 4px 14px rgba(26,42,58,.08),
    0 10px 28px rgba(26,42,58,.06);
  --depth-4:
    0 6px 20px rgba(26,42,58,.09),
    0 18px 40px rgba(26,42,58,.07);
  --depth-hover:
    0 10px 30px rgba(26,42,58,.11),
    0 20px 48px rgba(26,42,58,.07);
}

/* ─────────────────────────────────────────────
   §1  ヒーロー — クリーンな単層グラデーション
───────────────────────────────────────────── */
.hero {
  background:
    linear-gradient(165deg, #f4f9ff 0%, #ffffff 55%, #eaf4fb 100%) !important;
}

/* 過剰ブロブは非表示 */
.hero::before   { display: none !important; }
.hero-blob-1    { opacity: 0 !important; pointer-events: none !important; }
.hero-blob-2    { opacity: 0 !important; pointer-events: none !important; }

/* タイトル text-shadow を除去 */
.hero-title {
  text-shadow: none !important;
}

/* バッジ — ガラスエフェクト除去、シンプルに */
.hero-badge {
  background: rgba(36,122,193,.07) !important;
  border: 1px solid rgba(36,122,193,.16) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* メインボタン — 薄い影・短い浮き */
.btn-main {
  box-shadow:
    0 2px 0   var(--blue-dark),
    0 4px 14px rgba(36,122,193,.18),
    inset 0 1px 0 rgba(255,255,255,.12) !important;
  transition: transform .22s var(--ease-smooth), box-shadow .22s var(--ease-smooth) !important;
}
.btn-main:hover {
  transform: translateY(-3px) !important;
  box-shadow:
    0 5px 0   var(--blue-dark),
    0 8px 22px rgba(36,122,193,.22),
    inset 0 1px 0 rgba(255,255,255,.14) !important;
}

/* サブボタン */
.btn-sub {
  box-shadow: 0 2px 0 var(--border), 0 3px 8px rgba(26,42,58,.05) !important;
  transition: transform .22s var(--ease-smooth), box-shadow .22s var(--ease-smooth), background .18s !important;
}
.btn-sub:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 5px 0 var(--border), 0 7px 16px rgba(26,42,58,.07) !important;
}

/* ─────────────────────────────────────────────
   §2  マーキー帯 — フラットグラデーション
───────────────────────────────────────────── */
.marquee-wrap {
  background: linear-gradient(90deg, var(--blue-dark) 0%, var(--blue) 100%) !important;
  box-shadow: 0 2px 10px rgba(26,42,58,.10) !important;
}
.marquee-wrap::before { display: none !important; }

/* ─────────────────────────────────────────────
   §3  STATSカード — translateY のみ、回転なし
───────────────────────────────────────────── */
.stat-card {
  border-radius: 12px !important;
  border-bottom: 2px solid var(--border) !important;
  box-shadow: var(--depth-2) !important;
  transition: transform .22s var(--ease-smooth), box-shadow .22s var(--ease-smooth) !important;
}
.stat-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: var(--depth-hover) !important;
  border-bottom-color: var(--blue) !important;
}

/* ─────────────────────────────────────────────
   §4  CARGOカード — 回転なし
───────────────────────────────────────────── */
.cargo-card {
  border-radius: 12px !important;
  border-bottom: 2px solid var(--border) !important;
  box-shadow: var(--depth-2) !important;
  transition: transform .22s var(--ease-smooth), box-shadow .22s var(--ease-smooth), border-color .18s !important;
}
.cargo-card:hover {
  transform: translateY(-6px) !important;
  border-color: rgba(36,122,193,.22) !important;
  border-bottom-color: var(--blue) !important;
  box-shadow: var(--depth-hover) !important;
}

/* 事業CTAバナー — 落ち着いたグラデーション */
.cargo-cta {
  background: linear-gradient(145deg,
    #0d2540 0%,
    #1a5a96 60%,
    #247ac1 100%) !important;
  box-shadow:
    0 6px 22px rgba(26,42,58,.18),
    inset 0 1px 0 rgba(255,255,255,.05) !important;
}

/* 白ボタン */
.btn-white {
  box-shadow:
    0 2px 0   rgba(0,0,0,.07),
    0 4px 10px rgba(0,0,0,.07),
    inset 0 1px 0 rgba(255,255,255,.9) !important;
  transition: transform .22s var(--ease-smooth), box-shadow .22s var(--ease-smooth) !important;
}
.btn-white:hover {
  transform: translateY(-3px) !important;
  box-shadow:
    0 5px 0  rgba(0,0,0,.08),
    0 9px 20px rgba(0,0,0,.09),
    inset 0 1px 0 rgba(255,255,255,.9) !important;
}

/* ─────────────────────────────────────────────
   §5  FLEETカード — 回転なし
───────────────────────────────────────────── */
.fleet-card {
  border-radius: 14px !important;
  border-bottom: 2px solid var(--border) !important;
  box-shadow: var(--depth-2) !important;
  transition: transform .22s var(--ease-smooth), box-shadow .22s var(--ease-smooth), border-color .18s !important;
}
.fleet-card:hover {
  transform: translateY(-8px) !important;
  border-bottom-color: var(--blue) !important;
  box-shadow: var(--depth-hover) !important;
}

/* ─────────────────────────────────────────────
   §6  ABOUTセクション — 写真シャドウ整理
───────────────────────────────────────────── */
.about-img {
  border-radius: 20px !important;
  box-shadow:
    0 6px 20px rgba(26,42,58,.09),
    0 16px 36px rgba(26,42,58,.07),
    inset 0 0 0 1px rgba(255,255,255,.30) !important;
}
.about-img:hover {
  transform: scale(1.01) !important;
  box-shadow:
    0 10px 28px rgba(26,42,58,.11),
    0 22px 48px rgba(26,42,58,.08) !important;
}

/* ─────────────────────────────────────────────
   §7  CONTACTセクション
───────────────────────────────────────────── */
.contact-tel-card {
  background: linear-gradient(135deg,
    var(--blue-dark) 0%,
    var(--blue) 100%) !important;
  box-shadow:
    0 6px 20px rgba(36,122,193,.18),
    inset 0 1px 0 rgba(255,255,255,.06) !important;
  transition: transform .22s var(--ease-smooth), box-shadow .22s var(--ease-smooth) !important;
}
.contact-tel-card:hover {
  transform: translateY(-4px) !important;
  box-shadow:
    0 10px 28px rgba(36,122,193,.22),
    inset 0 1px 0 rgba(255,255,255,.08) !important;
}

/* ─────────────────────────────────────────────
   §8  CEOカード
───────────────────────────────────────────── */
.ceo-card {
  transition: transform .22s var(--ease-smooth), box-shadow .22s var(--ease-smooth) !important;
}
.ceo-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--depth-3) !important;
}

/* ─────────────────────────────────────────────
   §9  BLOGカード
───────────────────────────────────────────── */
.blog-card {
  transition: transform .22s var(--ease-smooth), box-shadow .22s var(--ease-smooth), border-color .18s !important;
}
.blog-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: var(--depth-hover) !important;
}
.blog-card-sm {
  transition: transform .22s var(--ease-smooth), box-shadow .22s var(--ease-smooth), border-color .18s !important;
}
.blog-card-sm:hover {
  transform: translateX(4px) !important;
  box-shadow: var(--depth-2) !important;
}

/* ─────────────────────────────────────────────
   §10  RECRUITセクション (index.html内)
───────────────────────────────────────────── */
.recruit-point {
  transition: transform .22s var(--ease-smooth), background .18s, box-shadow .18s !important;
}
.recruit-point:hover {
  transform: translateX(6px) !important;
}

/* ─────────────────────────────────────────────
   §11  recruit/index.html ページ
───────────────────────────────────────────── */
.appeal-card {
  transition: transform .22s var(--ease-smooth), box-shadow .22s var(--ease-smooth) !important;
}
.appeal-card:hover {
  transform: translateY(-5px) !important;
  box-shadow: var(--depth-3) !important;
}

.benefit-item {
  transition: transform .22s var(--ease-smooth), box-shadow .22s var(--ease-smooth) !important;
}
.benefit-item:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--depth-3) !important;
}

/* ─────────────────────────────────────────────
   §12  blog/index.html ページ
───────────────────────────────────────────── */
.btn-back {
  box-shadow:
    0 2px 0 var(--blue-dark),
    0 4px 12px rgba(36,122,193,.16) !important;
  transition: transform .22s var(--ease-smooth), box-shadow .22s var(--ease-smooth), background .18s !important;
}
.btn-back:hover {
  transform: translateY(-3px) !important;
  box-shadow:
    0 5px 0 var(--blue-dark),
    0 8px 18px rgba(36,122,193,.20) !important;
}

/* ─────────────────────────────────────────────
   §13  スクロールリビール — perspective 回転なし
───────────────────────────────────────────── */
.reveal {
  opacity: 0 !important;
  transform: translateY(20px) !important;
  transition: opacity .5s var(--ease-smooth), transform .5s var(--ease-smooth) !important;
}
.reveal.visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
}
.reveal-left {
  opacity: 0 !important;
  transform: translateX(-24px) !important;
  transition: opacity .5s var(--ease-smooth), transform .5s var(--ease-smooth) !important;
}
.reveal-left.visible {
  opacity: 1 !important;
  transform: translateX(0) !important;
}
.reveal-right {
  opacity: 0 !important;
  transform: translateX(24px) !important;
  transition: opacity .5s var(--ease-smooth), transform .5s var(--ease-smooth) !important;
}
.reveal-right.visible {
  opacity: 1 !important;
  transform: translateX(0) !important;
}

/* ─────────────────────────────────────────────
   §14  カウントアップ — 振動アニメーション除去
───────────────────────────────────────────── */
.stat-card.counting .count-num {
  animation: none !important;
}

/* ─────────────────────────────────────────────
   §15  prefers-reduced-motion 完全対応 (v3)
───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal-left,
  .reveal-right {
    opacity:    1    !important;
    transform:  none !important;
    transition: none !important;
  }
}

/* ─────────────────────────────────────────────
   §16  モバイル最適化 (v3)
───────────────────────────────────────────── */
@media (max-width: 768px) {
  .stat-card:hover,
  .cargo-card:hover,
  .fleet-card:hover,
  .appeal-card:hover,
  .benefit-item:hover,
  .ceo-card:hover {
    transform: none !important;
  }
  .fleet-card:active,
  .cargo-card:active,
  .blog-card:active,
  .appeal-card:active {
    transform: scale(.98) !important;
    transition-duration: .1s !important;
  }
}

@media (max-width: 480px) {
  .stat-card:hover,
  .cargo-card:hover,
  .fleet-card:hover,
  .blog-card:hover,
  .appeal-card:hover,
  .benefit-item:hover,
  .ceo-card:hover,
  .contact-tel-card:hover {
    transform: none !important;
  }
}