/* ============================================================
   /course/ の可視パンくず
   ------------------------------------------------------------
   /free-tools/css/breadcrumb.css と同じ内容で、クラス名だけを
   .course-crumbs に変えたもの。並べて直すこと。

   商用ページ（/course/writing-correction/ など）は検索から直接
   着地する導線なので、「料金・プランの下にいる」ことがその場で
   見えないと親ページへ戻れない。JSON-LD の BreadcrumbList は
   各ページに入っていたが、これは検索結果の表示用で、
   人が押せる導線にはならない（2026-08-21・aeo-worklog 89節）。

   置き場所はヒーローの「上」。/free-tools/ と同じ理由で、
   見出しと本体の間に挟むと本文が切れて見える。

   ▲ 3か所目が要るようになったら、クラス名を中立にして
     css/ds/ へ引き上げること。2本までは重複を許容している。
   ============================================================ */

.course-crumbs {
  background: var(--surface-sunken);
  border-bottom: 1px solid var(--line);
}

.course-crumbs__list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  list-style: none;
  margin: 0;
  /* ol の既定の padding-inline-start（40px）を消す。
     残すと ds-container のコンテンツ列より右に寄って、見出しと左端が揃わない。 */
  padding-inline: 0;
  padding-block: var(--space-3);
  font-size: var(--fs-small);
  line-height: 1.5;
}

.course-crumbs__list li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--ink-muted);
}

/* 区切りは擬似要素で置く。文字として書くと読み上げが「大なり」を拾う。 */
.course-crumbs__list li:not(:last-child)::after {
  content: "";
  width: 0.4em;
  height: 0.4em;
  border-right: 1.5px solid var(--line-strong);
  border-bottom: 1.5px solid var(--line-strong);
  transform: rotate(-45deg);
  margin-inline-start: var(--space-1);
}

.course-crumbs__list a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--ink-strong);
  text-decoration: none;
  transition: color 0.2s ease;
}

.course-crumbs__list a:hover,
.course-crumbs__list a:focus-visible {
  color: var(--sky-600);
  text-decoration: underline;
}

.course-crumbs__list .is-current {
  color: var(--ink-muted);
  font-weight: 500;
}

/* 現在地は長くなりがち。狭い画面では1行に収めて省略する
   （折り返すとパンくずだけで2行を占める）。 */
@media (max-width: 30rem) {
  .course-crumbs__list {
    flex-wrap: nowrap;
  }
  .course-crumbs__list .is-current {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}