@charset "UTF-8";
/* ==========================================================================
   STEMON北九州 - responsive.css
   モバイルファースト。ここでは「画面が広くなったときの上書き」だけを書く。
   想定ブレークポイント：
     - 〜599px   スマートフォン（375 / 390px を基準に設計）
     - 600px〜   大きめのスマートフォン / 小型タブレット
     - 768px〜   タブレット
     - 992px〜   ナビをPC表示に切替
     - 1024px〜  小型ノートPC
     - 1280px〜  デスクトップ（1440px 想定）
   ========================================================================== */

/* --------------------------------------------------------------------------
   600px〜 : 2カラムを許可
   -------------------------------------------------------------------------- */
@media (min-width: 600px) {
  .stm-grid--2 { grid-template-columns: repeat(2, 1fr); }
  .stm-grid--3 { grid-template-columns: repeat(2, 1fr); }
  .stm-grid--4 { grid-template-columns: repeat(2, 1fr); }

  .checklist  { grid-template-columns: repeat(2, 1fr); }
  .link-cards { grid-template-columns: repeat(2, 1fr); }

  .cta-inline { grid-template-columns: 1fr auto; align-items: center; text-align: left; }

  .btn-row .stm-btn { min-width: 15rem; }
}

/* --------------------------------------------------------------------------
   768px〜 : タブレット。余白と文字サイズを拡大
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  :root {
    --section-padding: 4.5rem;
    --gutter: 2rem;
  }

  h1 { font-size: 2.1rem; }
  h2 { font-size: 1.6rem; }

  .section-head__title { font-size: 1.8rem; }

  .stm-hero__title { font-size: 2.35rem; }
  .stm-hero__copy  { font-size: 1.1rem; }

  .page-hero h1 { font-size: 2rem; }

  .prose h2 { font-size: 1.5rem; }
  .prose h3 { font-size: 1.2rem; }

  .stm-grid--3 { grid-template-columns: repeat(3, 1fr); }

  .media-block { grid-template-columns: 1fr 1fr; gap: var(--space-xl); }
  .media-block--reverse .media-block__media { order: 2; }

  .stm-steps { grid-template-columns: repeat(2, 1fr); }

  .site-footer__grid { grid-template-columns: 1.4fr 1fr 1fr; }
  .site-footer__contact { grid-column: 1 / -1; }
}

/* LINEでの申し込み：タブレット以上でQRコードを横に表示 */
@media (min-width: 768px) {
  .line-apply {
    grid-template-columns: 1fr auto;
    gap: var(--space-xl);
    padding: var(--space-xl);
  }
  .line-apply__qr { display: block; }
}

/* --------------------------------------------------------------------------
   992px〜 : グローバルナビをPC表示へ
   -------------------------------------------------------------------------- */
@media (min-width: 992px) {
  :root { --header-height: 72px; }

  .nav-toggle { display: none; }

  .site-logo__img { height: 40px; }

  .global-nav {
    /* JSの開閉状態に関わらずPCでは常時表示。リストとCTAを横並びにする */
    display: flex !important;
    align-items: center;
    gap: var(--space-md);
    width: auto;
    padding: 0;
    border-top: 0;
  }
  .global-nav__list {
    display: flex;
    align-items: center;
    gap: var(--space-md);
  }
  .global-nav__list li + li { margin-top: 0; border-top: 0; }
  .global-nav__link {
    padding: .5rem 0;
    font-size: .95rem;
    border-bottom: 2px solid transparent;
  }
  .global-nav__link:hover,
  .global-nav__link[aria-current="page"] { border-bottom-color: var(--color-accent); }

  .global-nav__cta { flex-shrink: 0; margin-top: 0; margin-left: var(--space-sm); }
  .global-nav__cta .stm-btn { width: auto; white-space: nowrap; } /* 狭い幅でもボタンの文字を折り返さない */

  /* SP固定CTAはPCでは不要 */
  .sp-cta { display: none; }
  body.has-sp-cta { padding-bottom: 0; }

  /* ヒーローを2カラムに */
  .stm-hero__inner {
    grid-template-columns: 1.05fr 1fr;
    align-items: center;
    padding-block: var(--space-3xl);
  }
  .stm-hero__title { font-size: 2.6rem; }

  .stm-grid--4 { grid-template-columns: repeat(4, 1fr); }
  .checklist { grid-template-columns: repeat(3, 1fr); }
  .link-cards { grid-template-columns: repeat(3, 1fr); }

  .site-footer__grid { grid-template-columns: 1.5fr 1fr 1fr 1.2fr; }
  .site-footer__contact { grid-column: auto; }
}

/* 992〜1199px はナビ7項目＋CTAで横幅が足りないため、ロゴ横の補足テキストを隠し、項目の間隔を少し詰める */
@media (min-width: 992px) and (max-width: 1199px) {
  .site-logo__sub { display: none; }
  .global-nav__list { gap: .8rem; }
}

/* 補足テキストが入りきらない極端に狭い画面 */
@media (max-width: 359px) {
  .site-logo__sub { display: none; }
}

/* --------------------------------------------------------------------------
   1280px〜 : デスクトップ
   -------------------------------------------------------------------------- */
@media (min-width: 1280px) {
  :root { --section-padding: 5.5rem; }

  .stm-hero__title { font-size: 2.9rem; }
  .section-head__title { font-size: 2rem; }
  .global-nav__list { gap: var(--space-lg); }
  .global-nav__link { font-size: 1rem; }
}

/* --------------------------------------------------------------------------
   アクセシビリティ：アニメーションを減らす設定を尊重
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .stm-btn:hover, .stm-card--link:hover { transform: none; }
}