/* =====================================================
   responsive.css
   レスポンシブ対応 — 1024px / 768px / 480px
   ※ このファイルは必ず最後に読み込む
   ===================================================== */

/* ─── Tablet (≤1024px) ─── */
@media (max-width: 1024px) {
  .features-grid      { grid-template-columns: repeat(2, 1fr); }
  .contact-grid       { grid-template-columns: 1fr; gap: 3rem; }
  .contact-divider    { display: none; }
  .footer-top         { grid-template-columns: 1fr 1fr; }
}

/* ─── Mobile (≤768px) ─── */
@media (max-width: 768px) {
  :root { --header-h: 56px; }

  /* Header */
  .nav-links          { display: none; }
  .hamburger          { display: flex; }
  .header-book-btn    { display: none; }
  .header-inner       { gap: .75rem; }
  .lang-btn           { padding: .25rem .35rem; font-size: .65rem; }

  /* Sections */
  .features-grid      { grid-template-columns: 1fr; }
  .vehicles-grid      { grid-template-columns: 1fr; }
  .steps-row          { grid-template-columns: 1fr; }

  /* Footer */
  .footer-top         { grid-template-columns: 1fr; gap: 2rem; }
  .footer-bottom      { flex-direction: column; align-items: flex-start; }

  /* Typography */
  .hero-title-ja      { font-size: 1.8rem; }

  /* Pricing table */
  .pricing-table             { font-size: .8rem; }
  .pricing-table th,
  .pricing-table td          { padding: .75rem .75rem; }
}

/* ─── Small mobile (≤480px) ─── */
@media (max-width: 480px) {
  .hero-badges        { flex-direction: column; }
  .hero-cta           { flex-direction: column; }
  .hero-cta .btn      { width: 100%; text-align: center; }
  .channels-row       { flex-direction: column; }
  .channel-btn        { width: 100%; justify-content: center; }
  .tab-btn            { padding: .65rem 1rem; font-size: .72rem; }

  /* Coupon banner */
  .coupon-banner {
    padding: .75rem .85rem;
    font-size: .82rem;
    letter-spacing: .03em;
  }
  .coupon-banner small {
    display: block;
    margin-top: .25rem;
  }
}

/* ── スマホ（〜767px）：縦長SP画像・kenburns無効 ── */
@media (max-width: 767px) {
  .hero-bg picture,
  .hero-bg picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 40%;
    display: block;
    animation: none;
    transform: scale(1);
  }
}