/* =========================================================
   proceed/proceed.css — コース案内ページ専用スタイル
   （/proceed コース一覧・single-course コース個別。共通は ../style.css）

   ★ 読み込みは inc/setup.php の kk_enqueue_assets() が
     page-proceed / single-course の時だけ行います。

   コース関連で使う主なパーツ（.course-tiles / .course-tile /
   .course-list-table）は、トップページや教室ページとも共有するため
   ../style.css 側に置いています。
   コース案内ページ「だけ」の装飾を足したい時は、ここに追記してください。
   （例）
     .course-flow { ... }        コース進級の流れ図
     .course-compare-table { ... } コース比較表
   ========================================================= */

/* =========================================================
   このコースで学べる帯結び（single-course）
   コース編集画面の「帯結びリスト」を、名前タグ（チップ）で一覧表示。
   ========================================================= */
.course-obi {
  margin-top: var(--space-xxl);
}
.course-obi__title {
  margin: 0 0 var(--space-xs);
}
.course-obi__sub {
  color: var(--color-ink-subtle);
  font-size: var(--fs-body-sm);
  margin: 0 0 var(--space-lg);
}
.course-obi__chips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}
.course-obi__chip {
  border: 1px solid var(--color-hairline);
  background: var(--color-surface-1);
  padding: 8px 15px;
  font-size: var(--fs-body-sm);
  letter-spacing: 0.03em;
  color: var(--color-ink);
}

/* =========================================================
   はじめての方は初級Ⅰから（page-proceed 冒頭の入口案内）
   ========================================================= */
.course-intro__head {
  display: grid;
  gap: var(--space-xl);
  align-items: center;
}
/* 写真がある時だけ2カラム（テキスト : 写真）。PCの右余白を写真で埋める */
.course-intro__head.has-media {
  grid-template-columns: 1.1fr 0.9fr;
}
.course-intro__title {
  margin: var(--space-xs) 0 var(--space-md);
}
.course-intro__text {
  font-size: var(--fs-body-lg);
  color: var(--color-ink);
  line-height: var(--lh-body);
  margin: 0 0 var(--space-md);
}
.course-intro__text strong {
  font-weight: var(--fw-semibold);
  color: var(--color-primary);
}
.course-intro__note {
  font-size: var(--fs-body-sm);
  color: var(--color-ink-subtle);
  line-height: var(--lh-body);
  margin: 0;
  padding-left: var(--space-md);
  border-left: 2px solid var(--color-hairline);
}
.course-intro__media {
  margin: 0;
  border: 1px solid var(--color-hairline);
}
.course-intro__media img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* ---- 学びのステップ（ロードマップ） ---- */
.roadmap {
  margin-top: var(--space-xxl);
  padding-top: var(--space-xl);
  border-top: 1px solid var(--color-hairline);
}
.roadmap__eyebrow {
  margin-bottom: var(--space-lg);
}
.roadmap__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
}
.roadmap__step {
  position: relative;
  background: var(--color-paper);
  border: 1px solid var(--color-hairline);
  border-top: 2px solid var(--color-accent-gold);
  padding: var(--space-md) var(--space-md) var(--space-lg);
}
/* 入口（初級Ⅰ）は藍で強調 */
.roadmap__step.is-start {
  border-top-color: var(--color-primary);
}
/* ステップ間の矢印（PC は右向き、最後の要素には出さない） */
.roadmap__step::after {
  content: "→";
  position: absolute;
  right: calc(var(--space-md) * -1 - 3px);
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-accent-gold-deep);
  font-size: var(--fs-body);
  z-index: 1;
}
.roadmap__step:last-child::after { content: none; }
.roadmap__badge {
  display: block;
  font-family: var(--font-latin);
  font-size: var(--fs-caption);
  letter-spacing: var(--tracking-latin);
  color: var(--color-accent-gold-deep);
  margin-bottom: var(--space-xs);
}
.roadmap__step.is-start .roadmap__badge { color: var(--color-primary); }
.roadmap__name {
  display: block;
  font-family: var(--font-mincho);
  font-size: var(--fs-card-title);
  font-weight: var(--fw-medium);
  letter-spacing: 0.04em;
  margin-bottom: 2px;
}
.roadmap__note {
  display: block;
  font-size: var(--fs-body-sm);
  color: var(--color-ink-muted);
}
.roadmap__then {
  margin-top: var(--space-xl);
  padding: var(--space-lg);
  background: var(--color-surface-1);
}
.roadmap__then-label {
  font-family: var(--font-mincho);
  font-size: var(--fs-subhead);
  color: var(--color-ink);
  letter-spacing: 0.04em;
  margin: 0 0 var(--space-md);
}
/* 「その先」は分岐（枝分かれ）として提示。矢印でつながず一本道に見せない */
.roadmap__branches {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
}
.roadmap__branch {
  background: var(--color-paper);
  border: 1px solid var(--color-hairline);
  padding: var(--space-md);
}
.roadmap__branch span {
  display: block;
  font-family: var(--font-mincho);
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  margin-bottom: 2px;
}
.roadmap__branch small {
  display: block;
  font-size: var(--fs-caption);
  color: var(--color-ink-muted);
  line-height: 1.5;
}
@media (max-width: 900px) {
  .course-intro__head.has-media { grid-template-columns: 1fr; }
  .roadmap__steps,
  .roadmap__branches { grid-template-columns: repeat(2, 1fr); }
  /* 2列になると横矢印は右端で不自然なので消す */
  .roadmap__step::after { content: none; }
}
@media (max-width: 560px) {
  .roadmap__steps { grid-template-columns: 1fr; }
  .roadmap__branches { grid-template-columns: 1fr; }
  /* 縦並びのときは下向き矢印で流れを示す */
  .roadmap__step { padding-bottom: var(--space-md); }
  .roadmap__step::after {
    content: "↓";
    right: auto;
    left: 50%;
    top: auto;
    bottom: calc(var(--space-md) * -1 + 2px);
    transform: translateX(-50%);
  }
  .roadmap__step:last-child::after { content: none; }
}

/* =========================================================
   カテゴリ見出し＋授業写真（page-proceed 各カテゴリの導入）
   ========================================================= */
.course-cat__head {
  display: grid;
  gap: var(--space-xl);
  align-items: start;
  margin-bottom: var(--space-lg);
}
.course-cat__head.has-media {
  grid-template-columns: 1fr 0.8fr;
}
.course-cat__title { margin: 0 0 var(--space-sm); }
.course-cat__desc {
  color: var(--color-ink-muted);
  line-height: var(--lh-body);
}
.course-cat__media {
  margin: 0;
  border: 1px solid var(--color-hairline);
}
.course-cat__media img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* =========================================================
   コース行（page-proceed 子コース一覧）
   名前→位置づけ→回数→料金→詳細リンク の優先順で、料金は控えめに。
   ========================================================= */
.course-lineup {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--color-hairline);
}
.course-lineup__item {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md) var(--space-xl);
  align-items: start;
  justify-content: space-between;
  padding: var(--space-lg) var(--space-xxs);
  border-bottom: 1px solid var(--color-hairline);
}
.course-lineup__main { flex: 1 1 min(58%, 100%); min-width: 0; }
.course-lineup__name {
  font-family: var(--font-mincho);
  font-size: var(--fs-card-title);
  font-weight: var(--fw-medium);
  line-height: 1.5;
  letter-spacing: 0.03em;
  margin: 0;
}
.course-lineup__name a { color: var(--color-ink); }
.course-lineup__name a:hover { color: var(--color-primary); }
.course-lineup__lessons {
  display: inline-block;
  margin-left: var(--space-sm);
  font-family: var(--font-sans);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-regular);
  color: var(--color-ink-subtle);
  letter-spacing: var(--tracking-caption);
}
.course-lineup__desc {
  margin: var(--space-xs) 0 0;
  font-size: var(--fs-body-sm);
  color: var(--color-ink-muted);
  line-height: var(--lh-body);
  max-width: 42em;
}
.course-lineup__aside {
  flex: 0 0 auto;
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-xs);
}
/* 料金は控えめに（主役にしない）＝太字・大サイズにしない */
.course-lineup__price { line-height: 1.5; }
.course-lineup__price .course-list-table__price {
  font-weight: var(--fw-regular);
  font-size: var(--fs-body-sm);
  color: var(--color-ink);
}
.course-lineup__price small {
  display: block;
  font-size: var(--fs-caption);
  color: var(--color-ink-subtle);
  letter-spacing: var(--tracking-caption);
}
.course-lineup__more {
  font-size: var(--fs-body-sm);
  color: var(--color-primary);
  white-space: nowrap;
}
.course-lineup__more span { margin-left: 4px; }
@media (max-width: 720px) {
  .course-cat__head.has-media { grid-template-columns: 1fr; }
  /* スマホでは料金と「詳しく見る」を縦に積み、全カードで左端を揃える
     （横並びだと料金の行数差でリンク位置がばらつくため） */
  .course-lineup__item { gap: var(--space-sm); }
  .course-lineup__aside {
    width: 100%;
    text-align: left;
    align-items: flex-start;
  }
  .course-lineup__more {
    margin-top: var(--space-xxs);
    font-weight: var(--fw-medium);
  }
}

/* =========================================================
   ミニロードマップ（single-course の現在地表示）
   同一カテゴリの子コースを並べ、閲覧中を藍で強調。
   ========================================================= */
.roadmap--mini {
  margin: 0 0 var(--space-xl);
  padding-top: 0;
  border-top: 0;
}
.roadmap--mini .roadmap__steps {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}
.roadmap--mini .roadmap__step {
  flex: 1 1 auto;
  min-width: 0;
  background: var(--color-surface-1);
  border: 1px solid var(--color-hairline);
  border-top-width: 1px;
  padding: var(--space-sm) var(--space-md);
}
.roadmap--mini .roadmap__step::after { content: none; } /* mini は省スペースのため矢印なし */
.roadmap--mini .roadmap__badge {
  font-size: 10px;
  margin-bottom: 2px;
  color: var(--color-ink-subtle);
}
.roadmap--mini .roadmap__name {
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-regular);
  margin: 0;
}
.roadmap--mini .roadmap__step.is-current {
  background: var(--color-primary);
  border-color: var(--color-primary);
}
.roadmap--mini .roadmap__step.is-current .roadmap__badge,
.roadmap--mini .roadmap__step.is-current .roadmap__name {
  color: var(--color-on-primary);
}

/* =========================================================
   次のステップ（single-course 後半。学びが続くことを示す）
   ========================================================= */
.course-next {
  margin-top: var(--space-xxl);
  padding: var(--space-lg);
  background: var(--color-surface-1);
  border-left: 3px solid var(--color-accent-gold);
}
.course-next__label {
  display: inline-block;
  font-family: var(--font-mincho);
  font-size: var(--fs-body-sm);
  letter-spacing: 0.12em;
  color: var(--color-accent-gold-deep);
  margin-bottom: var(--space-xs);
}
.course-next__lead {
  font-size: var(--fs-body-sm);
  color: var(--color-ink-muted);
  margin: 0 0 var(--space-md);
}
.course-next__card {
  display: block;
  background: var(--color-paper);
  border: 1px solid var(--color-hairline);
  padding: var(--space-md) var(--space-lg);
  text-decoration: none;
  color: var(--color-ink);
}
.course-next__card:hover { background: var(--color-canvas); }
.course-next__name {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  font-family: var(--font-mincho);
  font-size: var(--fs-card-title);
  font-weight: var(--fw-medium);
  letter-spacing: 0.03em;
}
.course-next__arrow { color: var(--color-primary); flex-shrink: 0; }
.course-next__desc {
  display: block;
  margin-top: var(--space-xs);
  font-size: var(--fs-body-sm);
  color: var(--color-ink-muted);
  line-height: var(--lh-body);
}

/* =========================================================
   全コース修了で得られること（page-proceed 末尾の到達点バンド）
   ========================================================= */
.course-goal__title {
  margin: var(--space-xs) 0 0;
}
.course-goal__lead {
  font-family: var(--font-mincho);
  font-size: var(--fs-subhead);
  font-weight: var(--fw-regular);
  color: var(--color-ink-muted);
  letter-spacing: 0.04em;
  margin: var(--space-sm) 0 var(--space-xl);
}
.course-goal__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-xl);
  border-top: 1px solid var(--color-hairline-strong);
}
.course-goal__item {
  padding-top: var(--space-lg);
}
.course-goal__idx {
  display: block;
  font-family: var(--font-latin);
  font-size: var(--fs-body-sm);
  letter-spacing: var(--tracking-latin);
  color: var(--color-accent-gold-deep);
  margin-bottom: var(--space-sm);
}
.course-goal__name {
  font-family: var(--font-mincho);
  font-size: var(--fs-card-title);
  font-weight: var(--fw-medium);
  line-height: 1.6;
  letter-spacing: 0.04em;
  margin: 0 0 var(--space-xs);
}
.course-goal__desc {
  font-size: var(--fs-body-sm);
  color: var(--color-ink-muted);
  line-height: var(--lh-body);
  margin: 0;
}
@media (max-width: 720px) {
  .course-goal__grid {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .course-goal__item {
    padding: var(--space-lg) 0;
    border-bottom: 1px solid var(--color-hairline);
  }
  .course-goal__item:last-child {
    border-bottom: 0;
    padding-bottom: 0;
  }
}