@charset "UTF-8";
/* ========================================
   Course Detail Page
   ======================================== */
.page-course {
  --color-gray-bg: #ececec;
  --color-gray-border: #e0e0e0;
  --color-gray-text: #555555;
  --color-gray-600: #888888;
}

/* ---- page title ---- */
.page-course .page-title {
  position: relative; background: var(--color-gray-bg);
  padding: 84px var(--content-padding) 72px; overflow: hidden;
}
.page-course .page-title__content {
  position: relative; z-index: 2; max-width: 1080px; margin: 0 auto;
  display: flex; flex-direction: column; gap: 24px;
}
.page-course .page-title__en-row { display: flex; align-items: flex-start; }
.page-course .page-title__en-highlight {
  background: linear-gradient(to bottom, transparent 50%, var(--color-yellow) 50%); display: inline-block;
}
.page-course .page-title__en {
  font-family: var(--font-futura); font-size: 100px; font-weight: 500; line-height: 1;
  color: var(--color-black); text-transform: uppercase;
}
.page-course .page-title__deco { position: relative; width: 93px; height: 54px; flex-shrink: 0; }
.page-course .page-title__deco-block { position: absolute; display: block; }
.page-course .page-title__deco-block--y1 { background: var(--color-yellow); top: 81.48%; left: 0; right: 57.65%; bottom: 0; }
.page-course .page-title__deco-block--y2 { background: var(--color-yellow); top: 44.44%; left: 29.41%; right: 35.29%; bottom: 37.04%; }
.page-course .page-title__deco-block--b1 { background: var(--color-black); top: 62.96%; left: 64.71%; right: 0; bottom: 18.52%; }
.page-course .page-title__deco-block--b2 { background: var(--color-black); top: 0; left: 9.41%; right: 55.29%; bottom: 81.48%; }
.page-course .page-title__deco-block--b3 { background: var(--color-black); top: 0; left: 44.71%; right: 23.53%; bottom: 90.74%; }
.page-course .page-title__jp {
  font-family: var(--font-zen); font-weight: 700; font-size: 26px; line-height: 1.5;
  letter-spacing: 1.8px; color: var(--color-black);
}

/* ---- hero ---- */
.page-course .course-hero { background: var(--color-gray-bg); padding: 0 var(--content-padding) 0; }
.page-course .course-hero__inner { max-width: 880px; margin: 0 auto; text-align: center; padding: 8px 0 64px; }
.page-course .course-hero__headline {
  font-family: var(--font-zen); font-weight: 700; font-size: 30px; line-height: 1.8;
  color: var(--color-black); letter-spacing: 1px;
}
.page-course .course-hero__lead {
  margin-top: 28px; font-size: 16px; line-height: 2.1; color: var(--color-gray-text);
}
.page-course .course-hero__lead p { margin: 0; }
.page-course .course-hero__img { width: 100%; max-width: 1080px; margin: 0 auto; }
.page-course .course-hero__img img { width: 100%; height: auto; display: block; }

/* ---- story sections ---- */
.page-course .course-sec { padding: 84px var(--content-padding); }
.page-course .course-sec__inner { max-width: 820px; margin: 0 auto; text-align: center; }
.page-course .course-sec__head {
  font-family: var(--font-zen); font-weight: 700; font-size: 26px; line-height: 1.6;
  color: var(--color-black); letter-spacing: 1px; margin-bottom: 32px; position: relative;
  display: inline-block; padding-bottom: 16px;
}
.page-course .course-sec__head::after {
  content: ''; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  width: 48px; height: 4px; background: var(--color-yellow);
}
.page-course .course-sec__body p {
  margin: 0; font-size: 16px; line-height: 2.1; color: var(--color-gray-text); letter-spacing: .4px;
}
.page-course .course-sec__body p.is-strong {
  font-weight: 700; font-size: 19px; color: var(--color-black); margin: 8px 0;
}
.page-course .course-sec__body p + p { margin-top: 2px; }

/* dark variant */
.page-course .course-sec--dark { background: var(--color-black); }
.page-course .course-sec--dark .course-sec__head { color: var(--color-white); }
.page-course .course-sec--dark .course-sec__body p { color: #cfcfcf; }
.page-course .course-sec--dark .course-sec__body p.is-strong { color: var(--color-white); }

/* gray variant */
.page-course .course-sec--gray { background: var(--color-gray-bg); }

/* ---- CTA ---- */
.page-course .course-cta { padding: 88px var(--content-padding); background: var(--color-black); text-align: center; }
.page-course .course-cta__en {
  font-family: var(--font-futura); font-weight: 500; font-size: 16px; letter-spacing: 3px; color: var(--color-yellow); margin-bottom: 18px;
}
.page-course .course-cta__title {
  font-family: var(--font-zen); font-weight: 700; font-size: 28px; line-height: 1.6; color: var(--color-white); margin-bottom: 36px;
}
.page-course .course-cta__btns { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.page-course .course-cta__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-width: 260px; padding: 20px 36px; border-radius: 999px; font-weight: 700; font-size: 16px; letter-spacing: 1.5px;
  transition: opacity .3s, transform .3s;
}
.page-course .course-cta__btn--primary { background: var(--color-yellow); color: var(--color-black); }
.page-course .course-cta__btn--ghost { background: transparent; color: var(--color-white); border: 1px solid var(--color-white); }
.page-course .course-cta__btn:hover { opacity: .88; transform: translateY(-2px); }

/* ---- breadcrumb ---- */
.page-course .breadcrumb { padding: 28px var(--content-padding) 64px; background: var(--color-white); }
.page-course .breadcrumb__list {
  display: flex; flex-wrap: wrap; align-items: center; max-width: 1080px; margin: 0 auto;
  font-size: 12px; letter-spacing: 1px; color: var(--color-gray-600);
}
.page-course .breadcrumb__list li + li::before { content: '/'; margin: 0 10px; color: var(--color-gray-600); }
.page-course .breadcrumb__list a { color: var(--color-gray-text); }
.page-course .breadcrumb__list a:hover { color: var(--color-black); }

/* ========================================
   Course Story（assistantデザイン内に差し込む本文）
   ======================================== */
.course-story { background: var(--color-white); padding: 96px var(--content-padding); }
.course-story__inner { max-width: 840px; margin: 0 auto; }
.course-story__block + .course-story__block { margin-top: 60px; }
.course-story__head {
  font-family: var(--font-zen); font-weight: 700; font-size: 24px; line-height: 1.6;
  color: #171717; letter-spacing: 0.5px; padding-left: 18px; border-left: 5px solid #FFFF00; margin-bottom: 22px;
}
.course-story__body p { margin: 0; font-size: 16px; line-height: 2.1; color: #555555; letter-spacing: 0.3px; }
.course-story__body p.is-strong { font-weight: 700; color: #171717; font-size: 18px; margin: 8px 0; }
@media (max-width: 768px) {
  .course-story { padding: 56px 20px; }
  .course-story__block + .course-story__block { margin-top: 40px; }
  .course-story__head { font-size: 20px; }
  .course-story__body p { font-size: 15px; }
  .course-story__body p.is-strong { font-size: 16px; }
}

/* ========================================
   Responsive
   ======================================== */
@media (max-width: 768px) {
  .page-course .page-title { padding: 40px 20px 36px; }
  .page-course .page-title__en { font-size: 50px; }
  .page-course .page-title__deco { width: 48px; height: 28px; }
  .page-course .page-title__jp { font-size: 19px; }
  .page-course .course-hero { padding: 0 20px; }
  .page-course .course-hero__inner { padding: 8px 0 40px; }
  .page-course .course-hero__headline { font-size: 22px; line-height: 1.8; }
  .page-course .course-hero__lead { font-size: 15px; }
  .page-course .course-sec { padding: 52px 20px; }
  .page-course .course-sec__head { font-size: 21px; }
  .page-course .course-sec__body p { font-size: 15px; }
  .page-course .course-sec__body p.is-strong { font-size: 17px; }
  .page-course .course-cta { padding: 56px 20px; }
  .page-course .course-cta__title { font-size: 22px; }
  .page-course .course-cta__btn { min-width: 0; width: 100%; }
  .page-course .breadcrumb { padding: 20px 20px 48px; }
}