/* コンテナの設定 */
.card-container {
  display: flex;
  gap: 16px;
  justify-content: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  box-sizing: border-box;
}

/* 各カードの基本スタイル */
.card {
  flex: 1;
  min-width: 250px;
  border: 1.5px solid #333333;
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
}

/* カードヘッダー（ピンク背景＋紺色アイコン枠） */
.card-header {
  display: flex;
  align-items: center;
  background-color: #ffdce6; /* 淡いピンク */
  border-bottom: 1.5px solid #333333;
}

/* アイコン用の紺色ボックス */
.icon-box {
  background-color: #1a1c4b; /* 濃い紺色 */
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-box svg {
  width: 28px;
  height: 28px;
}

/* ヘッダーのタイトル文字列 */
.card-title {
  margin: 0;
  padding: 0 10px;
  font-size: 15px;
  font-weight: bold;
  color: #1a1c4b;
  line-height: 1.3;
}

/* カード本文 */
.card-body {
  padding: 16px 14px;
  font-size: 13.5px;
  line-height: 1.6;
  color: #222222;
  font-weight: 500;
}

.card-body p {
  margin: 0;
  font-size: 15px;
}

/* スマホ表示向けのレスポンシブ対応 */
@media (max-width: 768px) {
  .card-container {
    flex-direction: column;
  }
}

/* レイアウト全体設定 */
.intro02ys {
  display: flex;
  flex-wrap: wrap;
  row-gap: 18px;
  column-gap: 24px;
  max-width: 1200px;
  margin: 0 auto;
}

/* 奇数番目のdiv：カプセル型のラベル部分 */
.intro02ys > div:nth-child(odd) {
  width: 200px;
  background-color: #dec2e7; /* 淡いパープル背景 */
  border-radius: 20px; /* カプセル状の丸み */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  box-sizing: border-box;
}

.intro02ys > div:nth-child(odd) p {
  margin: 0;
  font-weight: bold;
  font-size: 14px;
  color: #333333;
  text-align: center;
}

/* 偶数番目のdiv：右側の説明文部分 */
.intro02ys > div:nth-child(even) {
  width: calc(95% - 190px - 24px);
  display: flex;
  align-items: center;
}

.intro02ys > div:nth-child(even) p {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: #333333;
}

/* スマートフォン表示用のレスポンシブ対応 */
@media (max-width: 600px) {
  .intro02ys {
    row-gap: 8px;
  }
  
  .intro02ys > div:nth-child(odd),
  .intro02ys > div:nth-child(even) {
    width: 100%;
  }

  .intro02ys > div:nth-child(even) {
    margin-bottom: 12px;
  }
}

/* テーブル全体の設定 */
.block-materials .table-box-ys table {
  width: 100%;
  border-collapse: collapse;
  font-family: sans-serif;
  box-sizing: border-box;
}

/* 共通のセル境界線 */
.block-materials .table-box-ys th,
.block-materials .table-box-ys td {
  border-bottom: 1.5px solid #ded0e6;
  padding: 12px 16px;
  vertical-align: top;
}

/* ヘッダー行 */
.block-materials .table-box-ys thead th {
  background-color: #6b3ba7; /* 紫色ヘッダー */
  color: #ffffff;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  padding: 10px 0;
  border-bottom: none;
}

/* 各行の左側見出し（第1教程～第12教程） */
.block-materials .table-box-ys tbody th {
  background-color: #ded0e6; /* 淡いパープル背景 */
  color: #222222;
  font-size: 13.5px;
  font-weight: bold;
  text-align: center;
  vertical-align: top;
  padding-top: 14px;
}

/* 右側コンテンツエリア */
.block-materials .table-box-ys tbody td {
  background-color: #ffffff;
  padding-left: 20px;
}

/* 教程タイトル */
.block-materials .lesson-title {
  font-size: 16px;
  font-weight: bold;
  color: #333333;
  margin-bottom: 8px;
}

/* 単元リスト */
.block-materials .unit-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.block-materials .unit-list li {
  font-size: 13.5px;
  color: #333333;
  line-height: 1.6;
  font-weight: 500;
}

/* モバイル表示時の調整（画面幅が狭い場合） */
@media (max-width: 600px) {
  .block-materials .table-box-ys tbody th {
    width: 90px;
    padding-left: 6px;
    padding-right: 6px;
    font-size: 12.5px;
  }
  
  .block-materials .table-box-ys tbody td {
    padding-left: 12px;
    padding-right: 10px;
  }
  
  .block-materials .lesson-title {
    font-size: 14.5px;
  }
  
  .block-materials .unit-list li {
    font-size: 12.5px;
  }
}