/* ============================================================
   Responsive  —  tab: 768–1280 / sp: <768
   ============================================================ */

/* ---------- Tablet (<= 1024px) ---------- */
@media (max-width: 1024px) {
  :root {
    --gutter: 40px;
    --sp-104: 72px;
  }

  /* S03/S07/S08 は .section--fixed（zoom比例縮小）のため、ここではリフローしない */

  /* footer: brand on its own row, nav wraps below (centered) */
  .footer__top {
    flex-wrap: wrap;
    gap: var(--sp-32) var(--sp-64);
  }

  .footer__brand {
    width: 100%;
  }
}

/* ---------- Below 900px: collapse complex grids ---------- */
@media (max-width: 900px) {
  /* NOTE: S04–S11 の .section--fixed グリッドは ≤768 のみで縦積みにする */

  /* S12 timeline is .section--fixed → reflow only at ≤768 */
}

/* ---------- Header → hamburger (<= 1280px; full nav needs ~1280+) ---------- */
@media (max-width: 1280px) {
  .header__menu {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: var(--sp-24);
    background: #fff;
    border-bottom: 1px solid var(--border-default);
    padding: var(--sp-24) var(--gutter) var(--sp-32);
    transform: translateY(-130%);
    transition: transform 0.3s ease;
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.1);
    max-height: calc(100vh - var(--header-h));
    overflow-y: auto;
  }

  body.nav-open .header__menu {
    transform: translateY(0);
  }

  .nav {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .nav a {
    font-size: 16px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border-default);
  }

  .header__cta {
    flex-direction: column;
    align-items: stretch;
    gap: var(--sp-16);
  }

  .header__cta .btn {
    width: 100%;
    padding: 14px 18px;
  }

  .nav-toggle {
    display: flex;
    z-index: 101;
  }

  body.nav-open .nav-toggle span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }

  body.nav-open .nav-toggle span:nth-child(2) {
    opacity: 0;
  }

  body.nav-open .nav-toggle span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }
}

/* NOTE: PC〜タブレット(>=769px)のヒーローは style.css の固定ステージを
   transform: scale で比例縮小するため、ここに専用ブレークポイントは設けない。 */

/* ---------- Mobile (<= 768px) ---------- */
@media (max-width: 768px) {
  :root {
    --gutter: 20px;
    --sp-104: 56px;
    --sp-64: 40px;
  }

  /* 固定構図セクションをモバイルでは通常フロー（縦流し）へ戻す */
  .section--fixed {
    padding-top: var(--sp-104);
    padding-bottom: var(--sp-104);
  }

  .section__stage {
    zoom: 1;
    width: 100%;
    padding-top: 0;
    padding-bottom: 0;
  }

  /* S04 flow → stacked, arrows rotate */
  .flow {
    grid-template-columns: 1fr;
    gap: var(--sp-16);
  }

  .flow__arrow {
    transform: rotate(90deg);
  }

  .flow-card {
    border-left: 1px solid var(--brand-dark);
    border-radius: var(--radius);
  }

  /* フォント拡大でタイトル(24px nowrap)がカード幅を押し広げ右にはみ出すため、
     スマホでは20pxに縮小＋折返し許可してカードを画面内に収める（PCは24px維持） */
  .flow-card__title {
    font-size: 20px;
    white-space: normal;
  }

  /* フローカード群とナンバリングカード群をはっきり分離（モバイルの--sp-64=40pxより広く） */
  .feature-rows {
    margin-top: 64px;
  }

  /* CTAバンド：スマホでは見出しを縮小（既定で折返し可） */
  .cta-band__title {
    font-size: 24px;
  }

  .cta-band__sub {
    font-size: 16px;
  }

  /* S05 solutions → single column */
  .sol-grid {
    grid-template-columns: 1fr;
    gap: var(--sp-32);
  }

  /* S07 features → single column */
  .feat-grid {
    grid-template-columns: 1fr;
  }

  /* S09 chips wrap 3-up; case stacks (image on top) */
  .chips {
    flex-wrap: wrap;
  }

  .chip {
    flex: 1 1 28%;
    height: 56px;
    font-size: 18px;
    border-radius: 8px 8px 0 0;
  }

  .case {
    flex-direction: column;
    gap: var(--sp-24);
    padding: var(--sp-24);
  }

  .case__media {
    width: 100%;
    height: 200px;
  }

  /* S10 why columns → single column */
  .why-grid {
    grid-template-columns: 1fr;
  }

  /* S11 pricing → single column */
  .price-grid {
    grid-template-columns: 1fr;
  }

  /* S12 onboarding → stacked cards */
  .timeline {
    grid-template-columns: 1fr;
    gap: var(--sp-16);
  }

  /* S13 roadmap → single column */
  .road-grid {
    grid-template-columns: 1fr;
  }

  .tl-step {
    border-left: 1px solid var(--brand-dark);
    border-radius: var(--radius);
  }

  /* S08 KPI circles → single column; BEFORE/AFTER stack */
  .kpi-grid {
    grid-template-columns: 1fr;
    gap: var(--sp-24);
  }

  .kpi {
    max-width: 320px;
    margin-inline: auto;
  }

  .ba {
    flex-direction: column;
    gap: var(--sp-16);
  }

  .ba__arrow {
    width: auto;
    transform: rotate(90deg);
  }

  .ba__list li {
    font-size: 16px;
  }

  /* S06 steps → vertical flow, all arrows point down */
  .steps {
    display: flex;
    flex-direction: column;
    gap: var(--sp-16);
    align-items: stretch;
  }

  .step {
    padding: var(--sp-32) var(--sp-24);
    border-radius: 32px;
  }

  .step__device {
    top: var(--sp-24);
    right: var(--sp-24);
  }

  .step-arrow svg {
    transform: rotate(90deg);
  }

  .sa-u {
    display: none;
  }

  /* Type down-scale */
  .h2-head__title,
  .final__title {
    font-size: 24px;
  }

  .case__title {
    font-size: 20px;
  }

  .lead {
    font-size: 16px;
  }

  .bump {
    font-size: 18px;
    min-height: 0;
    padding: 0;
  }

  /* ===== Hero: スマホ専用レイアウトに切替（Figma 591:1652） ===== */
  .hero {
    height: auto;
    min-height: 0;
    /* 旧ブラウザ用フォールバック（png） */
    background-image: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.56) 0%,
        rgba(102, 102, 102, 0) 100%
      ),
      url("../assets/images/hero-bg.png");
    /* 対応ブラウザは webp を使用 */
    background-image: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.56) 0%,
        rgba(102, 102, 102, 0) 100%
      ),
      image-set(
        url("../assets/images/hero-bg.webp") type("image/webp"),
        url("../assets/images/hero-bg.png") type("image/png")
      );
    background-size: cover;
    background-position: center;
  }

  .hero__stage {
    display: none;
  }

  .hero__m {
    display: flex;
    flex-direction: column;
    gap: var(--sp-16);
    padding: var(--sp-16);
    position: relative;
    z-index: 2;
    color: #fff;
  }

  /* tag: 全幅・左フラット/右丸・白地・緑ボーダー、テキスト左＋ロゴ右24px */
  .hero__m-tag {
    display: flex;
    align-items: center;
    gap: var(--sp-8);
    width: 100%;
    background: #fff;
    border: 1px solid var(--brand-dark);
    border-left: none;
    border-radius: 0 999px 999px 0;
    padding: 6px 8px;
  }

  .hero__m-tag-text {
    flex: 1;
    min-width: 0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.75;
    white-space: nowrap;
    color: var(--brand-dark);
  }

  .hero__m-tag-logo {
    flex: none;
    width: 24px;
    height: 24px;
  }

  .hero__m-title {
    font-size: 23px;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: var(--ls);
    text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
  }

  .hero__m-sub {
    font-size: 12px;
    font-weight: 700;
    line-height: 1.75;
    letter-spacing: var(--ls);
    text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
  }

  .hero__m-proofs {
    display: flex;
    gap: 10px;
    width: 100%;
  }

  .hero__m-proofs img {
    flex: 1 1 0;
    min-width: 0;
    width: 100%;
    height: auto;
    aspect-ratio: 400 / 208;
    object-fit: contain;
  }

  /* worker + CTA は隙間なく密着（Figma bottom-group gap0） */
  .hero__m-bottom {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
  }

  /* worker box: px16・角丸16・淡いグレーグロー */
  .hero__m-worker {
    width: 100%;
    padding: 0 16px;
    border-radius: 16px;
    background: radial-gradient(
      58% 50% at 50% 50%,
      rgba(217, 217, 217, 0.55),
      rgba(255, 255, 255, 0)
    );
  }

  /* frame は Figma実寸の切り抜き（中央配置・右端を切らない） */
  .hero__m-worker-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 311 / 298;
    overflow: hidden;
  }

  .hero__m-worker-frame img {
    position: absolute;
    left: -41.16%;
    top: -0.03%;
    width: 135.82%;
    height: 100%;
    max-width: none;
  }

  /* CTA: 全幅・縦グラデ＋白2px枠・24px */
  .hero__m-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 16px 32px;
    border: 2px solid #fff;
    border-radius: 8px;
    background: linear-gradient(to bottom, var(--brand-dark), #62ac59);
    color: #fff;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: var(--ls);
    line-height: 1.75;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
  }

  /* Grids → single / paired columns */
  .issue-grid,
  .feat-grid,
  .kpi-grid,
  .road-grid {
    grid-template-columns: 1fr;
  }

  .kpi-grid {
    gap: var(--sp-24);
  }

  .feature-row {
    flex-wrap: wrap;
    padding: var(--sp-24);
    border-radius: var(--radius);
  }

  .feature-row__num {
    font-size: 24px;
    min-width: 36px;
  }

  .footer__top {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-32);
  }

  .footer__brand {
    width: 100%;
  }

  /* 狭幅では横はみ出しを防ぐため折返しを許可 */
  .footer__desc {
    white-space: normal;
  }

  .footer__nav {
    justify-content: flex-start;
  }

  .footer__bottom {
    flex-direction: column;
    gap: var(--sp-24);
  }

  .footer__copy-col {
    align-items: flex-start;
    width: 100%;
  }

  .btn,
  .hero__cta .btn,
  .final__cta .btn {
    width: 100%;
  }

  .hero__cta,
  .final__cta {
    flex-direction: column;
  }

  .hero__proofs {
    gap: 8px;
    width: 100%;
  }
}

/* ---------- Small mobile (<= 420px) ---------- */
@media (max-width: 420px) {
  .footer__top {
    grid-template-columns: 1fr;
  }

  /* badges stay in a row of 3 (baked-text images), just tighter */
  .hero__proofs {
    gap: 6px;
  }
}