/* ==========================================================================
   layout.css — コンテナ・セクション
   ブレークポイントは px 直書き（custom property は @media で使えないため）。
   sm: 480px / md: 768px / lg: 1024px / xl: 1280px で統一する。
   ========================================================================== */

/*
  ★--container-* は «中身» の幅として扱う。左右の余白（gutter）は別に足す。
    以前は max-width にそのまま入れていたため、--container-max: 1200px でも
    中身は 1200 - 40*2 = 1120px しかなかった。
    「サイトの幅を 1200px に」＝中身が 1200px、という意味なので、
    gutter を足した値を max-width にしている（2026-09-05 三嶋指示）。
*/
.container {
  width: 100%;
  max-width: calc(var(--container-max) + var(--container-gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--container-gutter);
}

.container--narrow {
  max-width: calc(var(--container-narrow) + var(--container-gutter) * 2);
}

.container--wide {
  max-width: calc(var(--container-wide) + var(--container-gutter) * 2);
}

.section {
  padding-block: var(--section-py);
}

.section--lg {
  padding-block: var(--section-py-lg);
}

.section--tight {
  padding-block: var(--space-12);
}

.section--subtle {
  background-color: var(--color-bg-subtle);
}

/* セクション見出しと本体の間 */
.section__head {
  margin-bottom: var(--section-gap);
}

/* 本文の行長を制限する。和文は 1 行 42 字程度が上限 */
.measure {
  max-width: var(--measure);
}

.measure--narrow {
  max-width: var(--measure-narrow);
}

/* ヘッダーは sticky でフローに参加しているため、本文側の押し下げは不要。 */