/* ============================================================
   responsive.css — ブレークポイント整理（375 / 768 / 1024 / 1280）
   方針: モバイルファースト（min-width で積み上げ）。
   ここでは「可変トークンの上書き」「グリッド段数」「タイポのSP/PC切替」を集約。
   ============================================================ */

/* ---------- Base：〜767px（375px 基準 / モバイル） ---------- */
/* variables.css の初期値がモバイル基準:
   --da-gutter:16px / --da-section-y:64px。
   見出しは SP サイズに落とす。 */
.da-c-section-title__heading { font-size: 26px; }

/* ---------- ≥768px：タブレット ---------- */
@media (min-width: 768px) {
	:root {
		--da-gutter: 24px;
		--da-section-y: 80px;
	}
	/* グリッド: 2列まで展開 */
	.da-grid--2,
	.da-grid--3,
	.da-grid--4 { grid-template-columns: repeat(2, 1fr); }

	/* 見出しを PC サイズへ */
	.da-c-section-title__heading { font-size: var(--da-fs-h2); } /* 32px */
}

/* ---------- ≥1024px：デスクトップ（ここでグローバルナビ想定） ---------- */
@media (min-width: 1024px) {
	:root {
		--da-gutter: 32px;
		--da-section-y: 120px;
	}
	/* グリッド: 3 / 4 列に展開 */
	.da-grid--3 { grid-template-columns: repeat(3, 1fr); }
	.da-grid--4 { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- ≥1280px：ワイドデスクトップ ---------- */
@media (min-width: 1280px) {
	/* コンテンツ幅は --da-container(1200px) で頭打ち。
	   現段階では追加の微調整なし（TOP実装時に必要なら追記）。 */
}