/* ═══════════ レスポンシブ（PCデザインを基準にSPで自然な1カラム化） ═══════════ */

/* ノートPC: 1024〜1439px */
@media (max-width: 1439px) {
  .hero__device { width: 400px; right: 8px; }
}

/* タブレット: 768〜1023px */
@media (max-width: 1023px) {
  :root { --fs-hero: 38px; --fs-h2: 26px; }
  .global-nav { display: none; }
  .header-actions { display: none; }
  .menu-toggle { display: block; }

  /* SPナビ（ドロワー） */
  .global-nav.is-open,
  .header-actions.is-open { display: block; }
  .sp-drawer {
    display: block; /* 基本非表示（header.css）をSP幅でのみ解除 */
    position: fixed;
    top: 0; right: 0;
    width: min(320px, 86vw);
    height: 100dvh;
    background: #fff;
    z-index: 120;
    transform: translateX(100%);
    transition: transform .28s ease;
    padding: 84px 24px 40px;
    overflow-y: auto;
  }
  body.nav-open .sp-drawer { transform: translateX(0); }
  .sp-drawer .global-nav { display: block; margin: 0; }
  .sp-drawer .global-nav ul { display: block; }
  .sp-drawer .global-nav li { display: block; }
  .sp-drawer .global-nav li + li::before { content: none; }
  .sp-drawer .global-nav a { display: block; padding: 13px 4px; font-size: 15px; border-bottom: 1px solid var(--color-border); border-radius: 0; }
  .sp-drawer .header-actions { display: flex; flex-direction: column; gap: 12px; margin-top: 24px; }
  .sp-drawer .header-actions a { justify-content: center; min-height: 48px; }
  .hero__device { position: static; width: min(460px, 100%); margin: 40px auto 0; }
  .hero__photo { object-position: 85% center; opacity: .28; }
  .hero__inner { padding: 56px 24px 64px; min-height: 0; }
  .problems__grid { grid-template-columns: repeat(2, 1fr); }
  .voices__grid { grid-template-columns: 1fr; max-width: 640px; margin-left: auto; margin-right: auto; }
  .flow__grid { flex-wrap: wrap; gap: 32px 16px; }
  .flow-card { flex: 1 1 40%; max-width: none; }
  .flow__arrow { display: none; }
  .stats-band__label { border-right: none; padding-right: 0; width: 100%; text-align: center; }
  .stats-band__list { width: 100%; justify-content: center; }
  .brand--header .brand__tag { display: none; }
}

/* スマートフォン: 〜767px */
@media (max-width: 767px) {
  :root { --fs-hero: 30px; --fs-h2: 22px; --header-height: 60px; }
  .brand__logo { height: 32px; }
  .hero__inner { padding: 40px 20px 48px; }
  .hero__lead { font-size: 14.5px; }
  .hero__cta .btn { width: 100%; }
  .problems { padding-top: var(--space-5); }
  .problems__grid { grid-template-columns: 1fr; gap: 16px; margin-top: var(--space-3); }
  .problem-card { padding: 26px 20px 22px; }
  .solutions__grid { gap: 16px; }
  .solution-card { width: 100%; max-width: 420px; }
  .stats-band__list { gap: 28px; flex-direction: column; align-items: center; }
  .flow__grid { flex-direction: column; align-items: stretch; gap: 32px; }
  .flow-card { flex: none; }
  .voice-card { grid-template-columns: 80px 1fr; padding: 20px; }
  .voice-card img { width: 80px; height: 80px; }
  .final-cta__title { flex-direction: column; gap: 4px; font-size: 20px; }
  .final-cta__buttons .btn { width: 100%; }
  .company-profile__row { grid-template-columns: 1fr; gap: 4px; }
  .company-profile__list--cols { columns: 1; }
  .page-shell { padding-top: var(--space-4); padding-bottom: var(--space-5); }
}

/* 小型スマートフォン: 375px前後 */
@media (max-width: 389px) {
  :root { --fs-hero: 27px; }
  .container { padding: 0 16px; }
  .hero__inner { padding: 32px 16px 40px; }
}