/**
 * 萩原塗装が選ばれる理由（Reason）セクション（.reason）
 * 各項目のスタイルは assets/css/icon-feature.css（共通コンポーネント）を参照。
 * ここではグリッド（項目の並び）のみを定義する。
 */

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

.reason__inner {
	max-width: var(--container-max-width);
	margin: 0 auto;
	padding: 0 var(--container-padding);
}

/* モバイル: 1カラム */
.reason__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 32px;
}

/* デスクトップ: 項目数が増減しても自動で折り返す */
@media (min-width: 769px) {
	.reason__grid {
		grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
		gap: 24px;
	}
}