/* ==========================================================================
   Responsive - Mobile First で書きつつ、PC側を上書き
   ブレークポイント：768（タブレット）/ 1024（PC）
   ========================================================================== */

/* ---------- タブレット以上 (>= 768px) ---------- */
@media (min-width: 768px) {
  .about__grid {
    gap: var(--space-9);
  }
  .hero__inner {
    padding: calc(var(--header-h) + var(--space-9)) var(--container-px) var(--space-9);
  }
}

/* ---------- PC (>= 1024px) ---------- */
@media (min-width: 1024px) {
  /* ヘッダー：ハンバーガー非表示 */
  .nav-toggle {
    display: none;
  }
}

/* ---------- タブレット以下 (< 1024px) ---------- */
@media (max-width: 1023.98px) {
  .site-nav {
    display: none;
  }
  .nav-toggle {
    display: block;
  }

  .value__item {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
  .value__num::after {
    display: none;
  }
  .value__num {
    padding-right: 0;
  }

  .site-footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-7);
  }
}

/* ---------- モバイル (< 768px) ---------- */
@media (max-width: 767.98px) {
  :root {
    --header-h: var(--header-h-sp);
  }

  .hero__heading {
    font-size: clamp(1.4rem, 5.5vw, 1.8rem);
    line-height: 1.6;
  }
  .hero__body {
    font-size: var(--fs-base);
    line-height: 1.9;
  }
  .hero__sub-en {
    font-size: var(--fs-xs);
  }
  .hero__ctas {
    flex-direction: column;
    width: 100%;
  }
  .hero__ctas .btn {
    width: 100%;
    min-width: 0;
  }
  .hero__scroll {
    display: none;
  }

  .notice__quotes {
    padding: var(--space-5) var(--space-4);
  }

  .company-table dl {
    grid-template-columns: 1fr;
  }
  .company-table dt {
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-border);
  }
  .company-table dd {
    padding: var(--space-3) var(--space-4);
  }

  .flow-step {
    padding-left: 64px;
  }
  .flow-step__num {
    width: 44px;
    height: 44px;
    font-size: var(--fs-base);
  }

  .contact__form {
    padding: var(--space-6) var(--space-4);
  }

  .site-footer__grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
  .site-footer__bottom {
    flex-direction: column;
    align-items: flex-start;
  }

  .btn {
    width: 100%;
    min-width: 0;
  }
}

/* ---------- 超小型 (< 380px) ---------- */
@media (max-width: 379.98px) {
  .hero__mega {
    font-size: clamp(2.5rem, 14vw, 4rem);
  }
}