/**
 * 全ページ共通のカスタムCSS（元は各 views/_head_inner の <style> に重複記述されていたものを集約）。
 *
 * 読み込み: includes/head.php が /assets/css/site.css を先に出し、その後 _head_inner を readfile する。
 * Tailwind CDN のユーティリティとは別レイヤー。フォームの @apply 系は contact.html 側の
 * type="text/tailwindcss" に残す（CDN が外部 .css の @apply を処理しないため）。
 *
 * 注意: .delay-100 等は「animation-delay」用の独自クラス。Tailwind の transition-delay 用 delay-* と
 * 名前が被る負債がある。第2段階でリネーム＋HTML の class 置換を検討。
 */

.font-mincho {
  font-family: 'Noto Serif JP', serif;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in-up {
  animation: fadeInUp 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.delay-100 {
  animation-delay: 100ms;
}
.delay-200 {
  animation-delay: 200ms;
}
.delay-300 {
  animation-delay: 300ms;
}

/* 元トップ以外のみだったが、全ページでスムーズスクロールを統一 */
html {
  scroll-behavior: smooth;
}

/**
 * モバイルメニュー表示中の背面スクロール停止。
 * site.js が body に top: -scrollY を当てて位置を維持する（iOS Safari の慣性スクロール対策）。
 */
html.deliver-scroll-locked,
body.deliver-scroll-locked {
  overflow: hidden;
}

body.deliver-scroll-locked {
  position: fixed;
  left: 0;
  right: 0;
  width: 100%;
}

/**
 * 固定ヘッダー（includes/header.php）
 * 高さ・スクロール時の見た目はここで一元管理。site.js は .deliver-header--scrolled の ON/OFF のみ。
 *
 * 注意: 上端のグラデーション帯は absolute のためフロー高さに乗らない。padding-top で帯の下に「空気」を入れないと
 * ロゴ・ナビが天井に張り付いて見える。また親を min-height のみにして子に height:100% を当てると、
 * 環境によって縦方向の解決が崩れるため、余白はこのブロックの padding に寄せる。
 *
 * min-height だけ高いヘッダーに「中身の高さだけ」のブロックを載せると、下に余白だけが残る（死に空間）。
 * 縦 flex + .deliver-header__inner { flex:1; justify-content:center } で行をヘッダー内で縦中央にし、
 * 上下の見かけの余白を均等にする。
 */
.deliver-header {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  /* 2px 帯の下からコンテンツを開始＋上下対称の余白（Tailwind の h-24 相当の見た目を維持） */
  padding-top: calc(2px + 0.625rem);
  padding-bottom: 0.625rem;
  min-height: 6rem;
}

/* グラデーション・#mobile-menu（hidden 時）はフロー外のため、実質このラッパーが flex アイテムになる */
.deliver-header__inner {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  min-height: 0;
}

.deliver-header.deliver-header--scrolled {
  /* 4rem だと電話2行＋CTA＋padding が収まらず詰まるため 5rem ＋ やや狭い縦余白 */
  padding-top: calc(2px + 0.5rem);
  padding-bottom: 0.5rem;
  min-height: 5rem;
  background-color: rgba(255, 255, 255, 0.95);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}

.deliver-header.deliver-header--scrolled .deliver-logo-text {
  font-size: 1.25rem;
  line-height: 1.5rem;
}

.deliver-logo-sub {
  transition:
    opacity 0.3s ease,
    max-height 0.3s ease,
    margin-top 0.3s ease;
}

.deliver-header.deliver-header--scrolled .deliver-logo-sub {
  margin-top: 0;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
}

/* 768〜899px: ナビ＋電話＋CTA が最も窮屈な帯。字間だけ一段詰め（可読性は維持） */
@media (min-width: 768px) and (max-width: 899.98px) {
  .deliver-desktop-nav > a {
    letter-spacing: 0.04em;
  }
}

/**
 * トップ: ヒーローと「選ばれる理由」の境目に delivery_car を載せるブリッジ。
 * ヒーロー section は overflow-hidden のため、車はセクション外に置き負の margin で重ねる。
 */
@keyframes deliverHeroCarFloat {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

.deliver-hero-bridge {
  position: relative;
  z-index: 25;
  display: flex;
  justify-content: center;
  /*
   * グレー帯防止: 上方向の重なりと下方向の「白セクション引き上げ」を画面幅に連続追従（clamp + vw）。
   * 640/768/1024 だけだと中間幅で実高さとズレるため、細かい @media で上書きも入れる。
   */
  margin-top: -clamp(4rem, calc(18vw - 2rem), 7.85rem);
  margin-bottom: -clamp(3.1rem, calc(15vw - 1.35rem), 6.35rem);
  padding-left: 1rem;
  padding-right: 1rem;
  pointer-events: none;
  line-height: 0;
}

/* 極狭（320〜359px）: clamp 下限より少し強く引き上げ */
@media (max-width: 359.98px) {
  .deliver-hero-bridge {
    margin-top: -4.35rem;
    margin-bottom: -3.45rem;
  }
}

@media (min-width: 360px) and (max-width: 399.98px) {
  .deliver-hero-bridge {
    margin-top: -4.6rem;
    margin-bottom: -3.55rem;
  }
}

@media (min-width: 400px) and (max-width: 479.98px) {
  .deliver-hero-bridge {
    margin-top: -5rem;
    margin-bottom: -3.85rem;
  }
}

@media (min-width: 480px) and (max-width: 559.98px) {
  .deliver-hero-bridge {
    margin-top: -5.35rem;
    margin-bottom: -4.05rem;
  }
}

@media (min-width: 560px) and (max-width: 639.98px) {
  .deliver-hero-bridge {
    margin-top: -5.75rem;
    margin-bottom: -4.3rem;
  }
}

/* タブレット縦: clamp だけだとすき間が出やすい帯 */
@media (min-width: 640px) and (max-width: 767.98px) {
  .deliver-hero-bridge {
    margin-top: -6.35rem;
    margin-bottom: -4.65rem;
  }
}

@media (min-width: 768px) and (max-width: 819.98px) {
  .deliver-hero-bridge {
    margin-top: -6.75rem;
    margin-bottom: -4.95rem;
  }
}

@media (min-width: 820px) and (max-width: 899.98px) {
  .deliver-hero-bridge {
    margin-top: -7.1rem;
    margin-bottom: -5.25rem;
  }
}

@media (min-width: 900px) and (max-width: 1023.98px) {
  .deliver-hero-bridge {
    margin-top: -7.45rem;
    margin-bottom: -5.5rem;
  }
}

@media (min-width: 1024px) and (max-width: 1279.98px) {
  .deliver-hero-bridge {
    margin-top: -7.85rem;
    margin-bottom: -5.75rem;
  }
}

@media (min-width: 1280px) {
  .deliver-hero-bridge {
    margin-top: -8rem;
    margin-bottom: -5.85rem;
  }
}

/* 透過PNGの車だけを表示（白枠なし）。影はアルファに沿う drop-shadow */
.deliver-hero-bridge__float {
  margin: 0;
  max-width: min(92vw, 22rem);
  animation: deliverHeroCarFloat 4.5s ease-in-out infinite;
  will-change: transform;
}

@media (min-width: 480px) {
  .deliver-hero-bridge__float {
    max-width: min(90vw, 24rem);
  }
}

@media (min-width: 640px) {
  .deliver-hero-bridge__float {
    max-width: min(88vw, 26rem);
  }
}

@media (min-width: 768px) {
  .deliver-hero-bridge__float {
    max-width: min(86vw, 28rem);
  }
}

@media (min-width: 1024px) {
  .deliver-hero-bridge__float {
    max-width: min(84vw, 32rem);
  }
}

.deliver-hero-bridge__img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  /* 幅の変化に追従（vw + rem）。極端な縦長・横長を避ける */
  max-height: clamp(6.25rem, 5vw + 5.5rem, 13.75rem);
  filter: drop-shadow(0 18px 28px rgba(11, 61, 145, 0.35))
    drop-shadow(0 6px 12px rgba(15, 23, 42, 0.18));
}

@media (min-width: 480px) {
  .deliver-hero-bridge__img {
    max-height: clamp(6.75rem, 4.5vw + 6rem, 13.75rem);
  }
}

@media (min-width: 768px) {
  .deliver-hero-bridge__img {
    max-height: clamp(7.5rem, 3.5vw + 7rem, 13.75rem);
    filter: drop-shadow(0 22px 36px rgba(11, 61, 145, 0.38))
      drop-shadow(0 8px 14px rgba(15, 23, 42, 0.16));
  }
}

@media (min-width: 1024px) {
  .deliver-hero-bridge__img {
    max-height: clamp(8.5rem, 2vw + 10rem, 14rem);
  }
}

/*
 * 639px 以下: 車は境目デコに留め、ヒーロー本文・CTA を食わないよう上方向の食い込みを弱める。
 * margin-bottom の負けを抑えて次セクション見出しとの距離を確保する。
 */
@media (max-width: 639.98px) {
  .deliver-hero-bridge {
    z-index: 12;
    margin-top: -3rem;
    margin-bottom: -2.5rem;
  }

  .deliver-hero-bridge__float {
    max-width: min(90vw, 22rem);
  }

  .deliver-hero-bridge__img {
    max-height: clamp(6.25rem, 12vw + 4.5rem, 9.5rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .deliver-hero-bridge__float {
    animation: none;
  }
}