/* ==========================================================
   mystyle2.css (CSS Grid + レスポンシブ対応版)
========================================================== */

/* グリッドコンテナ */
.catch-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* デスクトップ: 3カラム */
  gap: 20px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  box-sizing: border-box;
}

/* 共通スタイル */
.catch-container > div {
  font-size: 16px;
  padding: 15px;
  background-color: #fff;
  box-sizing: border-box;
  border: 1px solid #ddd;
  border-radius: 6px;
}

/* 個別調整（高さや色など） */
.paper_craft {
  background-color: #333;
  color: #fff;
}

.catch_character {
  min-height: 200px;
}

.catch_illust,
.icon {
  min-height: 180px;
}

.catch_popupcard {
  min-height: 180px;
}

.catch_nengajou {
  min-height: 150px;
}

.workflow,
.catch_rogo {
  min-height: 70px;
}

/* -------------------------------
   レスポンシブ対応
--------------------------------*/

/* タブレット (768px～1199px): 2カラム */
@media (max-width: 1199px) {
  .catch-container {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* スマホ (～767px): 1カラム */
@media (max-width: 767px) {
  .catch-container {
    grid-template-columns: 1fr;
  }
}