/* @media (max-width:1024px) / (max-width:767px) の差分のみ */

@media (max-width: 1024px) {
  .site-header__nav { display: none; }
  /* ナビを隠すと space-between でCTAが中央に浮くので、CTAとハンバーガーを右に寄せる */
  .site-header__actions { margin-left: auto; }
  .site-header__toggle {
    display: flex; align-items: center; gap: 8px;
    background: none; border: none; padding: 8px; cursor: pointer;
    font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em;
    color: var(--text-body);
  }
  .site-header__toggle-bar {
    width: 20px; height: 1px; background: var(--text-strong);
    box-shadow: 0 -6px 0 var(--text-strong), 0 6px 0 var(--text-strong);
  }

  .site-header__drawer { display: block; }
  .site-header__drawer[hidden] { display: none; }
  .site-header__drawer nav {
    display: flex; flex-direction: column;
    padding: 8px var(--gutter) 24px; background: var(--surface);
    border-bottom: 1px solid var(--border-light);
  }
  .site-header__drawer nav > a {
    padding: 14px 0; font-size: 14px;
    border-bottom: 1px solid var(--border-light);
  }
  .site-header__drawer .site-header__cta { margin-top: 16px; text-align: center; }
}

@media (max-width: 767px) {
  .site-header { padding: 16px 20px; }
  .site-header__logo-text { font-size: 19px; }
  .site-header__actions .site-header__cta { display: none; }

  .site-footer { flex-direction: column; gap: 32px; padding: 40px 20px; }
  .site-footer__links { flex-direction: column; gap: 16px; }

  .stub { padding: 56px 20px 96px; }
}

/* ===================== ここから本文の部品 ===================== */

@media (max-width: 1024px) {
  .section { padding-block: 56px; }
  .section--sm { padding-block: 44px; }
  .section--md { padding-block: 48px; }
  .section--lg { padding-block: 64px; }

  .hero {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
    padding: 56px var(--gutter);
  }
  .hero__figure { --photo-h: 320px; }

  .card-grid--3,
  .card-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card--tall { min-height: 0; }

  .photo-grid--3,
  .photo-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .photo-grid--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .photo-grid:not(:last-child) { margin-bottom: 32px; }

  .tile-grid--4,
  .tile-grid--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .split { grid-template-columns: minmax(0, 1fr); gap: 32px; }

  .def-row { grid-template-columns: minmax(0, 1fr); gap: 8px; }

  .cta-band { padding: 64px var(--gutter); }
}

@media (max-width: 767px) {
  .section { padding: 36px 20px; }
  .section--sm { padding-block: 32px; }
  .section--md { padding-block: 32px; }
  .section--lg { padding-block: 36px; }

  .section__lead { font-size: 12.5px; }
  .section__lead:not(:last-child) { margin-bottom: 16px; }

  .section-head { margin-bottom: 16px; }
  .section-head__title { font-size: 22px; }
  /* 小見出しはSPでは細罫を落とす */
  .section-head--inline { margin-bottom: 14px; }
  .section-head--inline .section-head__title { font-size: 13px; }
  .section-head--inline .section-head__rule { display: none; }
  .section-head--split { margin-bottom: 16px; }
  .section-head--on-ink { gap: 18px; }
  .section-head--on-ink .section-head__title { font-size: 22px; }

  /* 「導入までの流れ」の右肩リンクはSPでは表の下へ回す */
  .section--stack { gap: 16px; }
  .section--stack .section-head--split { display: contents; }
  .section--stack .section-head__link { order: 9; align-self: flex-start; }

  /* ヒーロー */
  .hero { padding: 36px 20px 32px; gap: 20px; }
  .hero__body { gap: 20px; }
  .hero__eyebrow { font-size: 10px; letter-spacing: .16em; }
  .hero__title { font-size: 26px; line-height: 1.6; }
  .hero__lead { font-size: 13.5px; }
  .hero__figure { --photo-h: 220px; }
  .photo--overlay .photo__caption { left: 14px; bottom: 14px; font-size: 10px; }

  /* ボタン */
  .btn-row { flex-direction: column; align-items: stretch; gap: 12px; padding-top: 0; }
  .btn { text-align: center; }
  .btn--primary { padding: 16px 20px; }
  .btn--outline { padding: 15px 20px; }

  /* カード */
  .card-grid { gap: 16px; }
  .card-grid--2,
  .card-grid--3,
  .card-grid--4 { grid-template-columns: minmax(0, 1fr); }
  .card { gap: 8px; padding: 20px; }
  .card--tall { gap: 10px; padding: 22px 20px; }
  .card__title { font-size: 18px; }
  .card__title-sub { font-size: 13px; }
  .card__name { font-size: 17px; }
  .card__text { font-size: 12.5px; line-height: 1.95; }
  .link-underline { font-size: 12px; }

  /* 写真 */
  .photo-grid { gap: 12px; }
  .photo-grid--2,
  .photo-grid--3,
  .photo-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* 5枚は2列に落とし、あぶれる5枚目だけ横いっぱいに伸ばす */
  .photo-grid--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .photo-grid--5 .photo:last-child { grid-column: 1 / -1; }
  .photo-grid:not(:last-child) { margin-bottom: 4px; }
  .photo { gap: 6px; }
  .photo { --photo-h: 120px; }
  .photo__caption { font-size: 9.5px; }

  /* マス目 */
  .tile-grid--2 { grid-template-columns: minmax(0, 1fr); }
  .tile-grid--3,
  .tile-grid--4,
  .tile-grid--6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile { gap: 6px; padding: 16px 18px; }
  .tile--step { gap: 8px; padding: 16px; }
  .tile__name { font-size: 17px; }
  .tile__text { font-size: 12px; }
  .tile__num { font-size: 10px; }
  .tile__label { font-size: 13px; }

  /* 濃色面の番号つきリスト。SPアートボードでは番号を出さない */
  .split { gap: 18px; }
  .num-list__num { display: none; }
  .num-list__item { gap: 0; padding: 16px 0; }
  .num-list__text { font-size: 13px; }

  /* 用語と説明 */
  .def-row { gap: 6px; margin-top: 14px; padding-top: 14px; }
  .def-row__term { font-size: 12px; }
  .def-row__desc { font-size: 12.5px; line-height: 1.95; }

  /* お知らせ */
  .news-list { gap: 12px; }
  .news-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 14px 0;
    border-top: 1px solid var(--border-light);
    border-bottom: none;
  }
  .news-item:last-child { border-bottom: 1px solid var(--border-light); }
  .news-item__meta {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-caption);
  }
  .news-item__date { font-size: 11px; }
  .news-item__tag { border: none; padding: 0; text-align: left; font-size: 11px; color: var(--text-caption); }
  .news-item__title { font-size: 13px; }

  /* CTA帯 */
  .cta-band { padding: 40px 20px; gap: 16px; }
  .cta-band__title { font-size: 22px; }
  .cta-band__rule { width: 48px; }
  .cta-band__text { font-size: 13px; line-height: 2; }
  .cta-band .btn-row { width: 100%; }
}