@charset "utf-8";

/*列の並べ方（管理画面の「列の並べ方」で選んだときだけ効きます）
---------------------------------------------------------------------------
「標準」を選んでいる間はクラスが付かないので、パーツ本来の並びのままです。
カード１個あたりの最低幅は --cols-min で、各パーツ側から上書きできます。
grid-auto-flow: row は「項目の数だけ横に並べる」指定を持つパーツ（list-counter1）
を打ち消すためのもので、パーツ側の指定に勝つよう列クラスと組み合わせて書いています。
---------------------------------------------------------------------------*/

/*自動折り返し（幅に合わせて折り返す）*/
.cms-cols-parts.cols-auto-parts {
	grid-auto-flow: row;
	grid-template-columns: repeat(auto-fill, minmax(var(--cols-min, 260px), 1fr));	/*カード1個あたりの最低幅。これを下回ると1列減ります。*/
}

/*2列・3列・4列*/
.cms-cols-parts.cols-2-parts {
	grid-auto-flow: row;
	grid-template-columns: repeat(2, minmax(0, 1fr));	/*2列*/
}
.cms-cols-parts.cols-3-parts {
	grid-auto-flow: row;
	grid-template-columns: repeat(3, minmax(0, 1fr));	/*3列*/
}
.cms-cols-parts.cols-4-parts {
	grid-auto-flow: row;
	grid-template-columns: repeat(4, minmax(0, 1fr));	/*4列*/
}

	/*本文の入るブロック（main）の幅が899px以下の追加指定。3列・4列は2列にします。*/
	@container (max-width: 899px) {

	.cms-cols-parts.cols-3-parts,
	.cms-cols-parts.cols-4-parts {
		grid-template-columns: repeat(2, minmax(0, 1fr));	/*2列*/
	}

	}/*追加指定ここまで*/

	/*同じく480px以下（スマホ）の追加指定。「スマホでの列数」で2列を選んだときだけ2列のままにします。*/
	@container (max-width: 480px) {

	.cms-cols-parts:not(.sp2-parts) {
		grid-template-columns: minmax(0, 1fr);	/*1列*/
	}
	.cms-cols-parts.sp2-parts {
		grid-template-columns: repeat(2, minmax(0, 1fr));	/*2列*/
	}

	}/*追加指定ここまで*/