@charset "UTF-8";
/**
 * layout.css
 * コンテナ・セクション・グリッド
 *
 * 余白は必ず var(--sp-*) / var(--section-y) を使うこと。
 */

/* ==================================================================
 * コンテナ
 * ================================================================== */
.l-container {
	width: 100%;
	max-width: calc(var(--container) + var(--gutter) * 2);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

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

.l-container--wide {
	max-width: 1440px;
}

/* ==================================================================
 * セクション
 * ================================================================== */
.l-section {
	padding-block: var(--section-y);
}

/* ---------- セクションの色面 ----------
   白／生成り／うすい水色／濃紺 を切り替えて、
   スクロールするたび印象が変わるようにする。 */
.l-section--soft {
	background: var(--bg-soft);
}

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

/* うすい水色。写真やカードが引き立つ */
.l-section--mist {
	background: var(--bg-mist);
}

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

/* 背景を塗るセクションは、区切りの波と重ならないよう前面に出す */
.l-section--soft,
.l-section--cream,
.l-section--mist,
.l-section--white,
.l-section--primary {
	position: relative;
	z-index: 0;
}

/* テーマカラー背景 */
.l-section--primary {
	background: var(--primary);
	color: var(--white);
}

.l-section--primary .c-heading__ja {
	color: var(--white);
}

/* セクション上下の詰め調整 */
.l-section--tight {
	padding-block: var(--sp-8);
}

/* ==================================================================
 * メイン領域
 * ================================================================== */
.l-main {
	display: block;
	min-height: 40vh;
}

/* 固定ヘッダーの分だけ本文を下げる */
.l-body {
	padding-top: var(--header-h);
}

/* アンカーリンクで飛んだ時にヘッダーの下に隠れないように */
[id] {
	scroll-margin-top: calc(var(--header-h) + var(--sp-5));
}

/* ==================================================================
 * グリッド
 * ================================================================== */
.l-grid {
	display: grid;
	gap: var(--sp-5);
}

@media (min-width: 600px) {
	.l-grid--2,
	.l-grid--3,
	.l-grid--4 {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.l-grid {
		gap: var(--sp-6);
	}

	.l-grid--3 {
		grid-template-columns: repeat(3, 1fr);
	}

	.l-grid--4 {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* 2カラム（本文＋サイド、テキスト＋画像） */
.l-split {
	display: grid;
	gap: var(--sp-6);
	align-items: center;
}

@media (min-width: 768px) {
	.l-split {
		grid-template-columns: 1fr 1fr;
		gap: var(--sp-8);
	}

	/* 画像を先に置きたい時 */
	.l-split--reverse > :first-child {
		order: 2;
	}
}

/* ==================================================================
 * 横並び
 * ================================================================== */
.l-cluster {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-4);
}

.l-cluster--center {
	justify-content: center;
}

.l-stack > * + * {
	margin-top: var(--sp-4);
}

.l-stack--lg > * + * {
	margin-top: var(--sp-6);
}