/* ============================================================
   layout.css  ＝ ページ全体の「枠組み」
   ・左右の余白（画面が広いときは中身を1280pxに収めて中央寄せ）
   ・セクションの上下の余白
   画面の広さによる切り替え：
     960px以上   PC
     768〜959px  タブレット
     767px以下   スマホ（480px以下は狭いスマホ用の微調整）
   ============================================================ */

/* 左右の余白（--gutter）。画面サイズで値を切り替える */
:root {
  --gutter: var(--page-gutter-pc);
  --section-space: var(--section-space-lg);
}

@media (max-width: 959px) {
  :root {
    --gutter: var(--page-gutter-tab);
    --section-space: var(--section-space-md);
  }
}

@media (max-width: 767px) {
  :root {
    --gutter: var(--page-gutter-sp);
    --section-space: var(--section-space-sm);
  }
}

@media (max-width: 480px) {
  :root {
    --gutter: 16px;                     /* 狭いスマホは左右余白を20px→16pxに詰める */
  }
}

/* 「画面の端から中身までの距離」。
   画面が1440pxを超えたら、中身は1280pxのまま中央に寄る。それ以下は --gutter の余白を確保する */
:root {
  --side-space: max(var(--gutter), calc((100% - var(--content-width)) / 2));
}

/* 中身を入れる枠（区切り②以降のセクションで使う） */
.l-container {
  width: 100%;
  padding-inline: var(--side-space);
}

/* セクションの上下余白（区切り②以降のセクションで使う）
   scroll-margin-top：ナビで飛んだとき、上に貼り付いたヘッダーの下に見出しが隠れないよう、ヘッダーの高さ分だけ手前で止める */
.l-section {
  padding-block: var(--section-space);
  scroll-margin-top: var(--header-height-pc);
}

@media (max-width: 959px) {
  .l-section {
    scroll-margin-top: var(--header-height-sp);
  }
}