/* --- 全体を囲むコンテナ --- */
.container {
  display: flex;
  /* ↓↓↓ここから変更・追加↓↓↓ */
  flex-direction: column; /* ★基本を「縦並び」にする */
  align-items: center;    /* 縦並びの際に中央に配置する */
  /* ↑↑↑ここまで変更・追加↑↑↑ */
  flex-wrap: wrap;
}

/* --- コンテンツのタイトル --- */
.item-title {
  text-align: center;
}

/* --- 四角いコンテンツボックスの共通スタイル --- */
.content-box {
  width: 12em;
  border: 2px solid #000;
  padding: 0.5em;
  margin: 0.5em;
  margin-bottom: 2em;
  aspect-ratio: 1; /* 縦横比を1:1に保ちます */
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* --- テキストを囲むspanのスタイル --- */
.text-wrapper {
  width: 100%;
}

.text-content {
  line-height: 2;
}

/* --- ユーザーが既に追加していたクラス（必要に応じてスタイルを記述） --- */
.c-ruby {
  /* ここに .c-ruby のスタイルを記述 */
}

.c-ruby__rt {
  /* ここに .c-ruby__rt のスタイルを記述 */
}

.grad-01 {
  /* ここに .grad-01 のスタイルを記述 */
}

.marker-01 {
  /* ここに .marker-01 のスタイルを記述 */
}


/* --- ↓↓↓ここから追加↓↓↓ --- */

/* ===============================================
PC向けのスタイル（画面幅が768px以上の場合に適用）
=============================================== */
@media (min-width: 768px) {
  .container {
    flex-direction: row;      /* 「横並び」に戻す */
    justify-content: center;  /* 横並びの際に中央に配置する */
    align-items: flex-start;  /* 上端を揃える */
  }
}