/* ==========================================================
   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;
}

/* よくある質問 Q&A 折り畳み */

.faq-box {
  border: 1px solid #ddd;
  border-radius: 8px;
  margin: 1em 0;
  padding: 0.5em 1em;
  background-color: #fafafa;
}

.faq-box summary {
  font-weight: bold;
  font-size: 1.1em;
  cursor: pointer;
  list-style: none;
}

.faq-box summary::marker {
  display: none;
}

.faq-box ul {
  margin: 0.5em 0 0 1.2em;
}

.faq-box a {
  text-decoration: none;
  color: #0366d6;
}

.faq-box a:hover {
  text-decoration: underline;
}


/* シンプルCSS例（FAQ見出し＋回答） */

.faq-section {
  margin-top: 1.5em;
}

.faq-item {
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 1em;
  margin-bottom: 1em;
  background-color: #fafafa;
}

.question {
  font-size: 1.1em;
  color: #333;
  margin-bottom: 0.5em;
}

.answer {
  margin: 0;
  color: #444;
  line-height: 1.6;
}



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

/* タブレット (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;
  }
}