/* ==============================
   Course Detail Page（プログラム詳細）
   Figma: 105-2007
   ============================== */

.course-detail-page {
  background-color: var(--color-bg-warm);
  padding-top: 120px;
  padding-bottom: 120px;
}

@media (min-width: 768px) {
  .course-detail-page {
    padding-top: 100px;
    padding-bottom: 200px;
  }
}
.course-detail__back {
  max-width: var(--container-max);
  margin-inline: auto;
  padding: 0 var(--container-pad-sp);
  margin-bottom: var(--space-4);
}

.course-detail__back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-base);
  font-weight: 700;
  font-size: var(--text-md);
  color: var(--color-primary);
  text-decoration: none;
  transition: opacity 0.2s;
}

.course-detail__back-link:hover {
  opacity: 0.85;
}

.course-detail__back-icon {
  font-size: 1.2em;
}

/* Layout: Figma CourseDetailPageLayout 105-2008 - 上下 padding、中央配置 */
.course-detail__layout {
  position: relative;
  padding: 0 var(--container-pad-sp) 80px;
}

@media (min-width: 768px) {
  .course-detail__layout {
    padding: 0 var(--container-pad-pc) 80px;
  }
}

/* 白コンテナ内・右下の装飾（挙手する子供イラスト） */
.course-detail__decoration {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 120px;
  z-index: 1;
  pointer-events: none;
}

.course-detail__decoration img {
  width: 100%;
  height: auto;
  display: block;
}

@media (min-width: 768px) {
  .course-detail__decoration {
    width: 180px;
  }
}

/* Container: Figma CourseContentContainer 105-2012 - 白・角丸16・padding64・gap32・max-width 1280 */
.course-detail__container {
  position: relative;
  max-width: 1200px;
  margin-inline: auto;
  background: var(--color-white);
  border-radius: 16px;
  padding: 40px var(--space-6);
  display: flex;
  flex-direction: column;
  gap: 32px;
}

@media (min-width: 768px) {
  .course-detail__container {
    padding: 64px;
  }
}

/* Hero（主題）Figma: CourseHeroSection 105-2173 - タイトルのみ、32px #ffa54c */
.course-detail-hero {
  text-align: center;
}

.course-detail-hero__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--text-2xl);
  line-height: 1.3;
  color: var(--color-primary);
  margin: 0;
}

.course-detail-hero__subtitle {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 16px;
  line-height: 1.3;
  color: var(--color-primary);
  margin: 8px 0 0;
}

@media (min-width: 768px) {
  .course-detail-hero__title {
    font-size: 32px;
  }

  .course-detail-hero__subtitle {
    font-size: 16px;
  }
}

/* Meta Section Figma: CourseMetaSection 115-1909 - bg #e7f5f6、3枚のカード */
.course-detail-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  background: var(--color-bg-teal);
  padding: 24px;
  border-radius: 8px;
}

.course-detail-meta__card {
  flex: 1 1 140px;
  min-width: 0;
  background: var(--color-white);
  border-radius: 16px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

@media (min-width: 768px) {
  .course-detail-meta__card {
    flex: 0 0 160px;
  }
}

.course-detail-meta__header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.course-detail-meta__icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.course-detail-meta__icon--target {
  background-image: url("../img/course-meta-icon-target.svg");
}

.course-detail-meta__icon--subject {
  background-image: url("../img/course-meta-icon-subject.svg");
}

.course-detail-meta__icon--time {
  background-image: url("../img/course-meta-icon-time.svg");
}

.course-detail-meta__label {
  font-family: var(--font-base);
  font-weight: 700;
  font-size: 18px;
  color: var(--color-secondary);
}

@media (min-width: 768px) {
  .course-detail-meta__label {
    font-size: 20px;
  }
}

.course-detail-meta__value {
  font-family: var(--font-base);
  font-weight: 700;
  font-size: var(--text-md);
  color: var(--color-text);
  margin: 0;
  text-align: center;
}

/* duration はデータ側で \n を入れて改行表示する */
.course-detail-meta__value.js-course-detail-duration {
  white-space: pre-line;
}

@media (min-width: 768px) {
  .course-detail-meta__value {
    font-size: 18px;
  }
}

/* 概要 Figma: CourseSummarySection 105-2344 - 見出し20px #ffa54c、本文16px */
.course-detail-summary__heading {
  font-family: var(--font-base);
  font-weight: 700;
  font-size: var(--text-lg);
  color: var(--color-primary);
  margin: 0 0 16px;
  letter-spacing: 0.05em;
}

.course-detail-summary__body {
  font-family: var(--font-base);
  font-weight: 500;
  font-size: var(--text-md);
  line-height: 1.8;
  color: var(--color-text);
  letter-spacing: 0.05em;
  white-space: pre-line;
}

/* 講座の流れ Figma: CourseFlowSection 105-2347 - FlowItem = tag(#fffaef 120px) + description */
.course-detail-flow__heading {
  font-family: var(--font-base);
  font-weight: 700;
  font-size: var(--text-lg);
  color: var(--color-primary);
  margin: 0 0 16px;
  letter-spacing: 0.05em;
}

.course-detail-flow__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.course-detail-flow-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.course-detail-flow-item__tag {
  flex-shrink: 0;
  width: 120px;
  background: var(--color-bg-alt);
  color: var(--color-text);
  font-family: var(--font-base);
  font-weight: 700;
  font-size: var(--text-md);
  line-height: 1.8;
  text-align: center;
  padding: 8px;
  border-radius: 4px;
  letter-spacing: 0.05em;
}

.course-detail-flow-item__desc {
  font-family: var(--font-base);
  font-weight: 500;
  font-size: var(--text-md);
  line-height: 1.8;
  color: var(--color-text);
  letter-spacing: 0.05em;
}

@media (max-width: 767px) {
  .course-detail-flow-item {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .course-detail-flow-item__tag {
    width: 100%;
  }
}

/* 効果 Figma: 105-2354 - 見出し20px、ol に margin-left 24px */
.course-detail-effects__heading {
  font-family: var(--font-base);
  font-weight: 700;
  font-size: var(--text-lg);
  color: var(--color-primary);
  margin: 0 0 16px;
  letter-spacing: 0.05em;
}

.course-detail-effects__list {
  margin: 0;
  padding-left: 24px;
  list-style-type: decimal;
  list-style-position: outside;
  font-family: var(--font-base);
  font-weight: 500;
  font-size: var(--text-md);
  line-height: 1.8;
  color: var(--color-text);
  letter-spacing: 0.05em;
}

.course-detail-effects__list li {
  margin-bottom: 0.25em;
}

.course-detail-effects__list li:last-child {
  margin-bottom: 0;
}

/* 写真 Figma: CourseEffectSection 145-2239 - 300x225、gap 32、flex wrap */
.course-detail-photos__grid {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
}

.course-detail-photos__item {
  flex: 0 0 auto;
  height: 225px;
  width: auto;
  border-radius: 8px;
  overflow: hidden;
  background: var(--color-placeholder);
}

.course-detail-photos__item img {
  width: auto;
  height: 100%;
  display: block;
}

/* Footer CTA */
.course-detail__footer-note {
  text-align: center;
  padding: 48px var(--container-pad-sp) 32px;
}

.course-detail__cta {
  display: inline-block;
  font-family: var(--font-base);
  font-weight: 700;
  font-size: var(--text-lg);
  color: var(--color-white);
  background: var(--color-primary);
  padding: 16px 40px;
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: opacity 0.2s;
}

.course-detail__cta:hover {
  opacity: 0.9;
}

@media (max-width: 767px) {
  .course-detail__container {
    padding: 28px var(--space-5);
  }
}