@charset "utf-8";

/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  GRM Grid CSS
  Author : Hirohisa Kambe
  Date : 2026.04.14
  Version : 4.0
  ・独自グリッド（確定版）
  ・Bootstrap完全非依存
  ・Flex + marginベース
  ・padding未使用設計
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/

/* =========================
   Container
========================= */

/* ▼ フル幅 */
.grm-container-field{
	width:100%;
}

/* ▼ 最大幅 */
.grm-container{
	width:100%;
	max-width:1200px;
	margin:0 auto;
}

/* =========================
   Row（横並び）
========================= */

.grm-row{
	display:flex;
	flex-wrap:wrap;

	/* ▼ 外余白打ち消し */
	margin-left:-10px;
	margin-right:-10px;
}

/* =========================
   Col（基本幅）
========================= */

/* ▼ 共通（重要） */
[class*="gcol-"]{
	flex:0 0 auto;
	width:100%;
	min-width:0;

	/* ▼ 余白（margin管理） */
	margin:0 10px 20px;
}

/* ▼ 基本5種（margin考慮） */
.gcol-12{ width:calc(100% - 20px); }
.gcol-6{ width:calc(50% - 20px); }
.gcol-4{ width:calc(33.333% - 20px); }
.gcol-3{ width:calc(25% - 20px); }
.gcol-2{ width:calc(16.666% - 20px); }

/* =========================
   Responsive（991基準）
========================= */

@media screen and (max-width: 991px){
	.gcol-sm-12{ width:calc(100% - 20px); }
	.gcol-sm-6{ width:calc(50% - 20px); }
}

/* =========================
   Catalog Grid（基準クラス）gcol-4col
   4列：992px以上
   3列：576px〜991px
   2列：575pxまで
========================= */

.gcol-4col{
	width:calc(25% - 20px);
}

/* ▼ 991px以下 → 3列 */
@media screen and (max-width: 1200px){
	.gcol-4col{
		width:calc(33.333% - 20px);
	}
}

/* ▼ 575px以下 → 2列 */
@media screen and (max-width: 900px){
	.gcol-4col{
		width:calc(50% - 20px);
	}
}

/* =========================
   縦揃え（align-items）
========================= */

.grm-row-top{ align-items:flex-start; }
.grm-row-middle{ align-items:center; }
.grm-row-bottom{ align-items:flex-end; }

/* =========================
   横揃え（justify-content）
========================= */

.grm-row-left{ justify-content:flex-start; }
.grm-row-center{ justify-content:center; }
.grm-row-right{ justify-content:flex-end; }

/* =========================
   注意事項
========================= */

/*
■ 基本ルール

・横並び → grm-row
・幅 → gcol-
・余白 → marginで管理
・paddingは使用しない

■ 禁止

・col- 使用（Bootstrap衝突）
・row 使用（Bootstrap衝突）
・paddingで間隔調整
・gap使用（widthと衝突するため）

■ 設計思想

・col = 純粋な箱
・余白 = 外で管理（margin）
・構造と見た目を分離

■ 使い分け

・通常 → grm-row + gcol
・可変 → 別途grid（必要時のみ）

*/