/**
 * セキュリティトレーニングのページ（/security_training）で増えた部品
 *
 * 原稿：Downloads の「トレーニングページ_指示と原稿.md」（2026-10-05）。下書きは docs/content/training.html と blocks/training-hero.html。
 * 冒頭の形・締めの1行・特徴の3カード・4列のステップ・カードのアイコンは css/consulting.css、アイコン付きの3項目（.points）は css/red-team.css。
 * ここにあるのは、3 コースの例のカードだけ。
 *
 * 1024px 以上：PC ／ 768〜1023px：タブレット ／ 767px 以下：スマホ
 */

/* ---------- 3 コースの例 ----------
   PC は2列。大きいカード3枚（設計・開発・運用）と、運用の横に小さいカード2枚（社員向け・経営層向け）を縦に重ねる */

.courses {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.courses__small > ul {
  display: grid;
  grid-auto-rows: 1fr;
  gap: 16px;
  height: 100%;
}

.course {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 32px;
  border: 1px solid var(--sh-line-header);
  border-radius: var(--sh-radius);
  background: var(--sh-bg);
}

.course--small {
  gap: 10px;
  padding: 24px 28px;
}

.course__title {
  font-size: 21px;
  font-weight: 700;
  line-height: 1.5;
}

.course--small .course__title {
  font-size: 17px;
}

/* 対象：小さな黒枠のラベル＋役割の名前 */
.course__target {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.7;
}

.course__target-label {
  flex: none;
  padding: 0 8px;
  border: 1px solid var(--sh-black);
  border-radius: var(--sh-radius);
  font-size: 12px;
  line-height: 1.7;
}

.course__text {
  color: var(--sh-text);
  font-size: 15px;
  line-height: 1.9;
}

.course--small .course__text {
  font-size: 14px;
}

/* 「学べること」：上に区切りの線（コンサルの白いカードの「たとえば」と同じ） */
.course__label {
  margin-top: 4px;
  padding-top: 16px;
  border-top: 1px solid var(--sh-line-header);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
}

/* =================== 767px 以下：スマホ（縦1列） =================== */

@media (max-width: 767px) {
  .courses,
  .courses__small > ul {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .course,
  .course--small {
    padding: 20px;
  }

  .course__title {
    font-size: 18px;
  }

  .course__text {
    font-size: 14px;
  }
}