/* ============================================================
   CSS Grid システム
   ============================================================ */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--gutter);
text-align: center;	
}

/* 共通セクション余白 */
section.container {
  margin-top: var(--container-space);
  margin-bottom: var(--container-space);
}

/* 12カラムのGridコンテナ */
.grid-row {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gutter);
}

/* 各カラムの標準幅（デフォルトは全幅） */
.grid-row > * {
  grid-column: span 12;
}

/* PC用カラスパン定義（769px以上で適用） */
@media (min-width: 769px) {
  .span-1  { grid-column: span 1; }
  .span-2  { grid-column: span 2; }
  .span-3  { grid-column: span 3; }
  .span-4  { grid-column: span 4; }
  .span-5  { grid-column: span 5; }
  .span-6  { grid-column: span 6; }
  .span-7  { grid-column: span 7; }
  .span-8  { grid-column: span 8; }
  .span-9  { grid-column: span 9; }
  .span-10 { grid-column: span 10; }
  .span-11 { grid-column: span 11; }
  .span-12 { grid-column: span 12; }
}