/* =============================================================
   Responsive Adjustments — matched to current LP design
   ============================================================= */

/* ============ Tablet & mobile (≤1023px) ============ */
@media (max-width: 1023px) {
  body { padding-bottom: 76px; /* space for sticky CTA */ }
  .site-header__inner { height: 68px; }
  .site-logo__img { height: 27px; }
}

/* ============ Tablet portrait & mobile (≤767px) ============ */
@media (max-width: 767px) {
  .container, .container-narrow { padding: 0 16px; }

  /* Header */
  .site-logo__img { height: 24px; }
  .site-logo__sub { font-size: 0.62rem; padding-left: 8px; }

  /* Hero */
  .hero { padding: 90px 0 64px; }
  .hero__card { padding: 24px 20px 28px; border-width: 2px; }
  .hero__stats { gap: 6px; margin-bottom: 22px; }
  .hero__stat { padding: 10px 6px; min-width: 0; border-width: 1.5px; }
  .hero__stat-num { font-size: 1.25rem; }
  .hero__stat-num .unit { font-size: 0.55em; }
  .hero__stat-label { font-size: 0.65rem; margin-top: 4px; line-height: 1.3; }
  .hero__eyebrow { font-size: 0.78rem; padding: 5px 14px; margin-bottom: 14px; }
  .hero__question { font-size: 0.95rem; margin-bottom: 10px; line-height: 1.55; }
  .hero__question::before { font-size: 1.3em; }
  .hero__title { font-size: 2.4rem; line-height: 1.15; margin-bottom: 16px; }
  .hero__title-zero { font-size: 1.25em; }
  .hero__subtitle { font-size: 1rem; padding: 12px 16px; margin-bottom: 22px; line-height: 1.6; }
  .hero__subtitle strong { font-size: 1.1em; }
  .hero__badge { font-size: 0.78rem; padding: 8px 14px; margin-top: 12px; }
  .hero::after { height: 40px; }

  /* Sections */
  .section-head { margin-bottom: 40px; padding: 0 16px; }
  .section-head__title { font-size: 1.5rem; line-height: 1.5; }
  .section-head__desc { font-size: 0.95rem; line-height: 1.85; }
  .fukidashi { font-size: 0.95rem; padding: 8px 20px; margin-bottom: 12px; }
  .section-number { margin-bottom: 8px; }
  .section-number__bar { height: 24px; margin: 6px 0; }

  /* Problem */
  .problem-card { padding: 32px 20px 24px; }
  .problem-card__icon { width: 56px; height: 56px; font-size: 1.4rem; margin: 8px 0 14px; }

  /* Bridge */
  .bridge { padding: 48px 16px 40px; }
  .bridge__text { font-size: 1.35rem; line-height: 1.6; }
  .bridge::before { height: 36px; margin-bottom: 18px; }

  /* Plans */
  .plan-card { padding: 36px 22px 28px; }
  .plan-card__badge { top: -1px; right: 14px; font-size: 0.68rem; padding: 6px 12px 8px; }
  .plan-card__tag { font-size: 0.66rem; margin-bottom: 8px; padding: 3px 10px; }
  .plan-card__name { font-size: 1.5rem; margin-bottom: 12px; }
  .plan-card__catch { font-size: 1rem; padding: 10px 12px; margin-bottom: 20px; line-height: 1.55; }
  .plan-card__duration-num { font-size: 2.6rem; }
  .plan-card__duration-unit { font-size: 1.05rem; }
  .plan-card__duration-label { font-size: 0.65rem; }
  .plan-card__feature { font-size: 0.88rem; }

  /* Mechanism — keep left padding for the absolute STEP label */
  .mechanism-step { padding: 18px 18px 18px 70px; }
  .mechanism-step__label { left: 12px; width: 44px; height: 44px; font-size: 0.8rem; }
  .mechanism-step__title { font-size: 1rem; }
  .mechanism-step__text { font-size: 0.82rem; line-height: 1.65; }
  .mechanism__callout { padding: 24px 20px; }
  .mechanism__callout-main { font-size: 1.1rem; }

  /* Stories */
  .story-card__body { padding: 22px 20px; }
  .story-card__quote { font-size: 1.05rem; line-height: 1.55; }
  .story-card__text { font-size: 0.85rem; line-height: 1.8; }
  .story-metric__num { font-size: 1.2rem; }

  /* Salary chart */
  .salary-chart { padding: 22px 16px; }
  .salary-chart__title { font-size: 1rem; }
  .salary-row { grid-template-columns: 44px 1fr 76px; gap: 10px; }
  .salary-row__level { font-size: 0.9rem; padding: 3px 0; }
  .salary-row__amount { font-size: 0.78rem; }

  /* Timeline — text-based step num, not a circle anymore */
  .timeline-step { grid-template-columns: 62px 1fr; gap: 12px; padding: 14px 16px; }
  .timeline-step__icon { width: 46px; height: 46px; font-size: 1.3rem; border-radius: 10px; }
  .timeline-step__num { font-size: 0.68rem; letter-spacing: 0.08em; margin-bottom: 2px; }
  .timeline-step__title { font-size: 1rem; line-height: 1.35; margin-bottom: 4px; }
  .timeline-step__text { font-size: 0.78rem; line-height: 1.55; }
  .timeline-step::after { left: 32px; bottom: -14px; font-size: 0.85rem; }

  /* Why us */
  .why-card { padding: 24px 18px; }
  .why-card__icon { font-size: 1.9rem; margin-bottom: 10px; }
  .why-card__num { font-size: 1.6rem; margin-bottom: 6px; }
  .why-card__title { font-size: 1rem; }
  .why-card__text { font-size: 0.85rem; line-height: 1.7; }

  /* Gallery */
  .gallery__grid { gap: 8px; padding: 0 16px; }
  .gallery__item-caption { font-size: 0.65rem; padding: 4px 10px; bottom: 8px; left: 8px; }
  .photo-strip { padding: 16px 12px; gap: 5px; }

  /* FAQ */
  .faq-item__q { padding: 16px 18px; font-size: 0.9rem; gap: 10px; }
  .faq-item__q-label { width: 28px; height: 28px; font-size: 0.85rem; }
  .faq-item__text { font-size: 0.92rem; }
  .faq-item__icon { width: 24px; height: 24px; font-size: 0.8rem; }
  .faq-item__a { font-size: 0.85rem; }
  .faq-item__a-inner { padding: 14px 18px 18px 56px; }

  /* CTA blocks */
  .cta-block { padding: 40px 16px; }
  .cta-block__lead { font-size: 1.2rem; line-height: 1.55; }

  /* Final CTA */
  .final-cta { padding: 56px 0 72px; }
  .final-cta__title { font-size: 1.5rem; line-height: 1.45; }
  .final-cta__desc { font-size: 0.95rem; margin-bottom: 28px; }
  .contact-form { padding: 24px 20px; border-radius: 16px; }
  .contact-form__title { font-size: 1.05rem; margin-bottom: 16px; }
  .form-field label { font-size: 0.82rem; }
  .form-field input, .form-field select { padding: 11px 12px; font-size: 0.95rem; }
  /* Mobile chat CTA — horizontal pill (matches desktop) */
  .alt-cta:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

  /* Buttons */
  .btn--xl { padding: 16px 24px; font-size: 1rem; min-height: 56px; }
  .btn--lg { padding: 14px 22px; font-size: 0.95rem; }
  .btn { padding: 14px 22px; font-size: 0.92rem; }

  /* Footer */
  .site-footer { padding: 40px 0 24px; }
  .footer-logo-img { height: 32px; }
  .footer-desc { font-size: 0.78rem; }
  .footer-info, .footer-legal { font-size: 0.7rem; gap: 6px 14px; }
  .footer-bottom { font-size: 0.65rem; }

  /* Trust bar */
  .trust-item__icon { width: 32px; height: 32px; font-size: 1rem; }
  .trust-item__text { font-size: 0.75rem; line-height: 1.3; }

  /* Sticky CTA */
  .sticky-cta { padding: 8px 10px; gap: 6px; }
  .sticky-cta .btn { padding: 11px 4px; font-size: 0.82rem; }
}

/* ============ Small mobile (≤479px) ============ */
@media (max-width: 479px) {
  .hero__title { font-size: 2rem; }
  .hero__stat-num { font-size: 1.1rem; }
  .hero__stat-label { font-size: 0.6rem; }
  .section-head__title { font-size: 1.35rem; }
  .plan-card__name { font-size: 1.35rem; }
  .plan-card__duration-num { font-size: 2.2rem; }
  .bridge__text { font-size: 1.15rem; }
  .fukidashi { font-size: 0.85rem; padding: 7px 16px; }
  .mechanism__callout-main { font-size: 1rem; }
  .story-card__quote { font-size: 0.98rem; }
  .timeline-step { grid-template-columns: 52px 1fr; padding: 12px 12px; gap: 10px; }
  .timeline-step__icon { width: 42px; height: 42px; font-size: 1.2rem; }
  .timeline-step::after { left: 26px; }
  .why-card__title { font-size: 0.95rem; }
  .final-cta__title { font-size: 1.35rem; }
  .trust-bar__inner { gap: 10px; }
  .trust-item { gap: 6px; }
  .trust-item__text { font-size: 0.68rem; }
}

/* ============ Extra tiny (≤360px) ============ */
@media (max-width: 360px) {
  .hero__title { font-size: 1.75rem; }
  .hero__stats { gap: 4px; }
  .hero__stat { padding: 8px 4px; }
  .hero__stat-num { font-size: 0.98rem; }
  .hero__stat-label { font-size: 0.55rem; }
}

/* ============ Desktop (≥1280px) ============ */
@media (min-width: 1280px) {
  .container, .container-narrow { padding: 0 32px; }
}