/* ===========================================================
   Layout / Section
   セクションの「外枠＝背景フル幅」「内枠＝中央寄せ」2層構造。
   通常幅(1280px) と 狭い幅(800px) の2バリアントを用意。
   =========================================================== */

.l-section {
	width: 100%;
	position: relative;
}

.l-section__inner {
	max-width: var(--content-max);
	margin-inline: auto;
	padding-inline: var(--content-padding);
}

.l-section__inner--narrow {
	max-width: var(--content-max-narrow);
}

/* 背景バリアント（セクション全幅に伸びる） */
.l-section--white {
	background-color: var(--color-white);
}

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

.l-section--navy {
	background-color: var(--color-navy-500);
	color: var(--color-white);
}

.l-section--soft-navy {
	background-color: var(--color-navy-100);
}

.l-section--pink {
	background-color: var(--color-pink-200);
}