/* =============================================
   responsive.css — レスポンシブ対応
   ============================================= */

/* ----- Tablet (768px ~ 1024px) ----- */
@media (max-width: 1024px) {
  :root {
    --section-padding-x: 40px;
  }

  .hamburger {
    display: flex;
  }

  .header-menu {
    position: fixed;
    top: 0;
    right: -100%;
    width: 80%;
    max-width: 400px;
    height: 100vh;
    background-color: var(--color-primary-dark);
    flex-direction: column;
    align-items: flex-start;
    padding: 100px 40px 40px;
    gap: 40px;
    transition: right 0.3s ease;
    overflow-y: auto;
    z-index: 1000;
  }

  .header-menu.is-open {
    right: 0;
  }

  /* メニューオーバーレイ */
  .header-menu.is-open::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: -1;
  }

  .nav-list {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }

  .nav-list li a {
    font-size: 16px;
  }

  .header-icons {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }

  .footer-main {
    flex-direction: column;
    gap: 60px;
    padding: 60px 40px;
  }

  .footer-nav-wrap {
    gap: 60px;
    flex-wrap: wrap;
    width: 100%;
  }
}

/* ----- SP (~767px) ----- */
@media (max-width: 767px) {
  :root {
    --section-padding-x: 20px;
    --section-padding-y: 80px;
  }

  .header-inner {
    padding: 8px 20px;
    height: 60px;
  }

  .header-logo {
    width: 120px;
  }

  .footer-main {
    padding: 40px 20px;
  }

  .footer-nav-wrap {
    flex-direction: column;
    gap: 40px;
  }

  .section-title__ja {
    font-size: 24px;
    line-height: 38px;
  }

  .section-title__en {
    font-size: 16px;
  }

  /* パンくず */
  .breadcrumb {
    padding: 12px 20px;
    font-size: 11px;
  }

  /* ボタン */
  .btn-line__inner {
    gap: 30px;
  }

  .btn-line__text {
    font-size: 15px;
  }
}