/* 全体の設定 */
body {
  margin: 0;
  font-family: system-ui, sans-serif;
  background: #0b0f14;
  color: #e6edf3;
}

/* グリッド */
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* デフォルトは3列 */
  gap: 16px;
  width: 100%;
  margin: 24px auto;
  padding: 0 16px;
  box-sizing: border-box;
}

/* iPhone SE（〜375px）では2列 */
@media (max-width: 375px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* iPad（768px〜1023px）は4列 */
@media (min-width: 768px) and (max-width: 1023px) {
  .grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* 通常のPC（1024px〜1199px）は3列 */
@media (min-width: 1024px) and (max-width: 1199px) {
  .grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* 大画面PC（1200px〜1599px）は4列 */
@media (min-width: 1200px) and (max-width: 1599px) {
  .grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ウルトラワイド（1600px〜1919px）は5列 */
@media (min-width: 1600px) and (max-width: 1919px) {
  .grid {
    grid-template-columns: repeat(5, 1fr);
  }
}

/* 超ウルトラワイド（1920px〜）は6列 */
@media (min-width: 1920px) {
  .grid {
    grid-template-columns: repeat(6, 1fr);
  }
}

/* カード */
.card {
  aspect-ratio: 1 / 1;           /* 正方形を維持 */
  display: flex;
  flex-direction: column;        /* タイトル→本文の縦並び */
  justify-content: center;       /* 縦中央 */
  align-items: center;           /* 横中央 */
  text-align: center;
  padding: 16px;
  border: 1px solid #2a3443;
  border-radius: 12px;
  background: #0f141b;
  color: inherit;
  text-decoration: none;
  transition: 0.2s;
  box-sizing: border-box;
  overflow: hidden;
  word-wrap: break-word;
}

/* タイトル部分（大きめ） */
.card b {
  font-size: clamp(18px, 3vw, 36px); /* 大画面では大きく、小さい画面では縮小 */
  margin-bottom: 8px;
  line-height: 1.2;
  font-weight: bold;
}

/* 本文部分（小さめ） */
.card span {
  font-size: clamp(12px, 2vw, 20px); /* タイトルより一段小さい */
  line-height: 1.4;
}

/* ホバー効果 */
.card:hover,
.card:focus {
  border-color: #6bd3ff;
  background: #141b24;
  transform: translateY(-2px);
}