/* コンテナ */
.l-container {
  width: 100%;
  max-width: var(--width-content);
  margin: 0 auto;
  padding: 0 var(--spacing-side);
}
.l-container--narrow {
  max-width: var(--width-narrow);
}

/* ★ 固定CTAバーぶんの余白は main ではなく footer 側で取る（2026-09-07）★
   バーは画面下端に固定されており、ページ末尾に来るのは footer である。
   main に余白を付けても footer の末尾はバーの下に潜ったままで、
   同時に main と footer のあいだに使われない隙間ができていた。
   余白は footer.css の .c-footer 側にある（バーが出るスマホ幅だけ）。 */

/* セクション共通 */
.l-section {
  padding: var(--section-pad-y) 0;
}
.l-section--pale {
  background: var(--color-bg-light);
}
/* ごく薄い緑。白→薄グレー→白→薄緑 で境界を作るための面 */
.l-section--mint {
  background: var(--color-bg-mint);
}
.l-section--primary {
  background: var(--color-primary);
  color: var(--color-text-inverse);
}
.l-section__heading {
  text-align: center;
  margin-bottom: var(--spacing-xl);
}
.l-section__heading h2 {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding-bottom: var(--spacing-md);
  line-height: var(--lh-heading);
}
.l-section__heading h2::after {
  content: '';
  position: absolute;
  bottom: 0; left: 50%;
  transform: translateX(-50%);
  width: 48px; height: 4px;
  background: var(--color-primary);
  border-radius: var(--radius-pill);
}
.l-section--primary .l-section__heading h2::after {
  background: var(--color-secondary);
}
/* 見出しアイコンは文字サイズに追従させる（h2が大きくなった分だけ丸も育つ） */
.l-section__heading-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5em;
  height: 1.5em;
  border-radius: 50%;
  background: var(--color-primary-pale);
  color: var(--color-primary);
  flex-shrink: 0;
}
.l-section__heading-icon .c-icon-svg { width: 0.8em; height: 0.8em; }
.l-section__heading-icon--accent {
  background: var(--color-secondary-pale);
  color: var(--color-secondary-dark);
}
/* 見出し直下の導入文 */
.l-section__lead {
  max-width: var(--width-narrow);
  margin: calc(var(--spacing-lg) * -1) auto var(--spacing-xl);
  text-align: center;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-text-secondary);
}

/* セクション内の中央寄せ補助CTA（一覧の下などに置く控えめなリンクボタン）*/
.c-section-cta {
  text-align: center;
  margin-top: var(--spacing-lg);
}

/* グリッド */
.l-grid { display: grid; gap: var(--spacing-md); }
.l-grid--2 { grid-template-columns: 1fr 1fr; }
.l-grid--3 { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 767px) {
  .l-grid--2, .l-grid--3 { grid-template-columns: 1fr; }
  .l-grid--2-mobile       { grid-template-columns: 1fr 1fr; }
}

/* サイドバー付きレイアウト（PC） */
@media (min-width: 768px) {
  .l-sidebar-layout {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: var(--spacing-xl);
    align-items: start;
  }
}