/* =========================================
   Grid / グリッド
   CSS Gridベースレイアウト
   Bootstrap row / col の代替

   命名ルール
   grow-{PC}-t{TAB}-s{SP}

   例
   grow-4-t3-s2

   PC  : 4列
   TAB : 3列
   SP  : 2列
========================================= */

/* =========================================
   Container / コンテンツ幅
   ・サイト共通幅
   ・中央寄せ
   ・root.css の
	 --container を使用
========================= */
/*
Usage

<div class="grm-container">
	・・・
</div>
*/
.grm-container{
	max-width:var(--container);
	margin:0 auto;
	padding-left:15px;
	padding-right:15px;
}

/* =========================================
   Container Field / 全幅エリア
   ・背景色用
   ・セクション用
   ・画面幅100%
========================= */
/*
Usage

<div class="grm-container-field">
	<div class="grm-container">
		・・・
	</div>
</div>
*/
.grm-container-field{
	width:100%;
}

/* =========================================
   Auto Grid / 自動レイアウト
   ・カード幅280pxを維持
   ・画面幅に応じて自動折返し
   ・商品一覧
   ・ブログ一覧
   ・施工事例
   ・スタッフ一覧
   などにおすすめ
========================= */
/*
Usage

<div class="grow-auto">
	<div>Item</div>
	<div>Item</div>
	<div>Item</div>
	<div>Item</div>
</div>

Result
PC      : 自動
TAB     : 自動
SP      : 自動
*/
.grow-auto{
	display:grid;
	gap:var(--gap);
	grid-template-columns:
	repeat(auto-fit,minmax(280px,1fr));
}

/* =========================================
   Grid 2 Column / 2分割
   PC  : 2列
   TAB : 2列
   SP  : 1列
========================= */
/*
Usage

<div class="grow-2-t2-s1">
	<div>Item</div>
	<div>Item</div>
</div>
*/
.grow-2-t2-s1{
	display:grid;
	gap:var(--gap);
	grid-template-columns:repeat(2,1fr);
}
@media(max-width:991px){
	.grow-2-t2-s1{
		grid-template-columns:repeat(2,1fr);
	}
}
@media(max-width:767px){
	.grow-2-t2-s1{
		grid-template-columns:1fr;
	}
}

/* =========================================
   Grid 3 Column / 3分割
   PC  : 3列
   TAB : 2列
   SP  : 1列
========================= */
/*
Usage

<div class="grow-3-t2-s1">
	<div>Item</div>
	<div>Item</div>
	<div>Item</div>
</div>
*/
.grow-3-t2-s1{
	display:grid;
	gap:var(--gap);
	grid-template-columns:repeat(3,1fr);
}
@media(max-width:991px){
	.grow-3-t2-s1{
		grid-template-columns:repeat(2,1fr);
	}
}
@media(max-width:767px){
	.grow-3-t2-s1{
		grid-template-columns:1fr;
	}
}

/* =========================================
   Grid 4 Column Custom / 4分割カスタム
   PC  : 4列
   TAB : 2列
   SP  : 2列
========================= */
/*
Usage

<div class="grow-4-t2-s2">
	<div>Item</div>
	<div>Item</div>
	<div>Item</div>
	<div>Item</div>
</div>
*/
.grow-4-t2-s2{
	display:grid;
	gap:var(--gap);
	grid-template-columns:repeat(4,1fr);
}
@media(max-width:991px){
	.grow-4-t2-s2{
		grid-template-columns:repeat(2,1fr);
	}
}
@media(max-width:767px){
	.grow-4-t2-s2{
		grid-template-columns:repeat(2,1fr);
	}
}

/* =========================================
   Grid 4 Column / 4分割
   PC  : 4列
   TAB : 3列
   SP  : 2列
========================= */
/*
Usage

<div class="grow-4-t3-s2">
	<div>Item</div>
	<div>Item</div>
	<div>Item</div>
	<div>Item</div>
</div>
*/
.grow-4-t3-s2{
	display:grid;
	gap:var(--gap);
	grid-template-columns:repeat(4,1fr);
}
@media(max-width:991px){
	.grow-4-t3-s2{
		grid-template-columns:repeat(3,1fr);
	}
}

@media(max-width:767px){
	.grow-4-t3-s2{
		grid-template-columns:repeat(2,1fr);
	}
}

/* =========================================
   Grid 5 Column / 5分割
   PC  : 5列
   TAB : 3列
   SP  : 2列
========================= */
/*
Usage

<div class="grow-5-t3-s2">
	<div>Item</div>
	<div>Item</div>
	<div>Item</div>
	<div>Item</div>
	<div>Item</div>
</div>
*/
.grow-5-t3-s2{
	display:grid;
	gap:var(--gap);
	grid-template-columns:repeat(5,1fr);
}
@media(max-width:991px){
	.grow-5-t3-s2{
		grid-template-columns:repeat(3,1fr);
	}
}
@media(max-width:767px){
	.grow-5-t3-s2{
		grid-template-columns:repeat(2,1fr);
	}
}

/* =========================================
   Grid 6 Column / 6分割
   PC  : 6列
   TAB : 3列
   SP  : 2列
========================= */
/*
Usage

<div class="grow-6-t3-s2">
	<div>Item</div>
	<div>Item</div>
	<div>Item</div>
	<div>Item</div>
	<div>Item</div>
	<div>Item</div>
</div>
*/
.grow-6-t3-s2{
	display:grid;
	gap:var(--gap);
	grid-template-columns:repeat(6,1fr);
}
@media(max-width:991px){
	.grow-6-t3-s2{
		grid-template-columns:repeat(3,1fr);
	}
}
@media(max-width:767px){
	.grow-6-t3-s2{
		grid-template-columns:repeat(2,1fr);
	}
}