/* ============================================================
   BJ 2.0 — Topic Page Styles (bj20-topic.css)
   対象: single-sfwd-topic.php
   依存: bj20-common.css（CSS変数定義）
   ============================================================ */


/* ----------------------------------------------------------
   [A] タイトル下のコース/レッスン情報
   ---------------------------------------------------------- */

/* ワイド幅コンテナ（タイトル・ナビ等に使用） */
.bj20-topic-page .bj-topic-body__inner--wide {
  max-width: var(--wide-w);
}

/* コース/レッスン コンテキスト行 */
.bj20-topic-page .bj-topic-meta__context {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-label);
  font-family: var(--sans-jp);
  color: var(--color-text-sub);
  letter-spacing: var(--ls-tight);
}

.bj20-topic-page .bj-topic-meta__course-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--color-text-sub);
  text-decoration: none;
  transition: color 0.2s;
}

.bj20-topic-page .bj-topic-meta__course-link:hover {
  color: var(--color-accent);
}

.bj20-topic-page .bj-topic-meta__kanji {
  font-family: var(--serif-jp);
  font-size: 15px;
  color: var(--color-accent);
  line-height: 1;
}

.bj20-topic-page .bj-topic-meta__sep {
  color: var(--color-text-muted);
  font-size: 14px;
  flex-shrink: 0;
}

.bj20-topic-page .bj-topic-meta__lesson-name {
  color: var(--color-text-sub);
}


/* ----------------------------------------------------------
   [B] プレーヤーエリア
   ---------------------------------------------------------- */

.bj20-topic-page .bj-topic-player {
  background: var(--color-bg);
  position: relative;
  z-index: 1;
}

.bj20-topic-page .bj-topic-player__inner {
  max-width: var(--wide-w);
  margin: 0 auto;
}

/* 16:9 アスペクト比 */
.bj20-topic-page .bj-topic-player__ratio {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  background: var(--color-surface-dark);
}

.bj20-topic-page .bj-topic-player__ratio iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

/* ロック画面 */
.bj20-topic-page .bj-topic-locked__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.55);
}

.bj20-topic-page .bj-topic-locked {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background: rgba(var(--color-black-rgb), 0.35);
  color: rgba(var(--color-white-rgb), 0.85);
  text-align: center;
  padding: 24px;
  z-index: 1;
}

.bj20-topic-page .bj-topic-locked__icon {
  color: #fff;
  opacity: 0.5;
}

.bj20-topic-page .bj-topic-locked__text {
  font-size: var(--fs-body);
  font-family: var(--sans-jp);
  letter-spacing: var(--ls-tight);
  margin: 0;
  max-width: 400px;
}

.bj20-topic-page .bj-topic-locked__link {
  color: rgba(var(--color-white-rgb), 0.95);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(var(--color-white-rgb), 0.4);
  transition: text-decoration-color 0.2s;
}

.bj20-topic-page .bj-topic-locked__link:hover {
  text-decoration-color: rgba(var(--color-white-rgb), 0.9);
}

/* チャプターバー（プレーヤー直下） */
.bj20-topic-page .bj-chapter-bar {
  max-width: var(--wide-w);
  margin: 0 auto;
  background: var(--color-bg-sub);
  color: var(--color-text);
  font-family: var(--sans-jp);
  border-bottom: 1px solid var(--color-border);
}

.bj20-topic-page .bj-chapter-bar:empty {
  display: none;
}

/* 現在チャプター行（常時表示） */
.bj20-topic-page .bj-chapter-bar__current {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 20px;
  background: none;
  border: none;
  color: inherit;
  font-family: inherit;
  font-size: var(--fs-note);
  letter-spacing: var(--ls-tight);
  cursor: pointer;
  transition: background 0.15s;
  text-align: left;
}

.bj20-topic-page .bj-chapter-bar__current:hover {
  background: rgba(var(--color-black-rgb), 0.03);
}

.bj20-topic-page .bj-chapter-bar__indicator {
  flex-shrink: 0;
  font-size: 11px;
  color: var(--color-text-muted);
  min-width: 28px;
}

.bj20-topic-page .bj-chapter-bar__title {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bj20-topic-page .bj-chapter-bar__time {
  display: none;
}

.bj20-topic-page .bj-chapter-bar__toggle {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: 8px;
  color: var(--color-text-muted);
  transition: color 0.15s;
}

.bj20-topic-page .bj-chapter-bar__current:hover .bj-chapter-bar__toggle {
  color: var(--color-text-sub);
}

.bj20-topic-page .bj-chapter-bar__toggle-count {
  display: none;
}

.bj20-topic-page .bj-chapter-bar__toggle-icon {
  transition: transform 0.2s;
}

.bj20-topic-page .bj-chapter-bar.is-open .bj-chapter-bar__toggle-icon {
  transform: rotate(180deg);
}

/* 展開リスト */
.bj20-topic-page .bj-chapter-bar__list {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.bj20-topic-page .bj-chapter-bar__list[aria-hidden="false"] {
  max-height: 280px;
  overflow-y: auto;
  border-top: 1px solid var(--color-border);
}

.bj20-topic-page .bj-chapter-bar__items {
  list-style: none;
  margin: 0;
  padding: 4px 0;
}

.bj20-topic-page .bj-chapter-bar__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 20px;
  font-size: var(--fs-note);
  letter-spacing: var(--ls-tight);
  color: var(--color-text-sub);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}

.bj20-topic-page .bj-chapter-bar__item:hover {
  background: rgba(var(--color-black-rgb), 0.03);
  color: var(--color-text);
}

.bj20-topic-page .bj-chapter-bar__item.is-active {
  color: var(--color-accent);
}

.bj20-topic-page .bj-chapter-bar__item-num {
  flex-shrink: 0;
  min-width: 20px;
  font-size: 11px;
  color: var(--color-text-muted);
  text-align: right;
}

.bj20-topic-page .bj-chapter-bar__item.is-active .bj-chapter-bar__item-num {
  color: var(--color-accent);
}

.bj20-topic-page .bj-chapter-bar__item-title {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bj20-topic-page .bj-chapter-bar__item-time {
  flex-shrink: 0;
  font-size: 11px;
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

/* スクロールバー（展開リスト内） */
.bj20-topic-page .bj-chapter-bar__list::-webkit-scrollbar {
  width: 4px;
}

.bj20-topic-page .bj-chapter-bar__list::-webkit-scrollbar-track {
  background: transparent;
}

.bj20-topic-page .bj-chapter-bar__list::-webkit-scrollbar-thumb {
  background: rgba(var(--color-black-rgb), 0.12);
  border-radius: 2px;
}

/* モバイル */
@media (max-width: 768px) {
  .bj20-topic-page .bj-chapter-bar__current {
    padding: 10px 16px;
  }

  .bj20-topic-page .bj-chapter-bar__item {
    padding: 8px 16px;
  }

  .bj20-topic-page .bj-chapter-bar__list[aria-hidden="false"] {
    max-height: 220px;
  }
}


/* ----------------------------------------------------------
   [B][D] タイトル+概要（上部）/ 完了+ナビ（下部）
   ---------------------------------------------------------- */

.bj20-topic-page .bj-topic-body {
  background: var(--color-bg);
  padding: clamp(40px, 6vw, 80px) 40px;
  position: relative;
  z-index: 1;
}

/* タイトル+コンテキストのみの上部パート */
.bj20-topic-page .bj-topic-body--upper {
  margin-top: 68px;
  padding-top: clamp(24px, 3vw, 44px);
  padding-bottom: clamp(24px, 3vw, 40px);
}

/* JS が付与: position fixed に切替え */
.bj20-topic-page .bj-topic-body--upper.is-fixed {
  position: fixed;
  top: 68px;
  left: 0;
  right: 0;
  z-index: 10;
  margin-top: 0;
  transition: padding 0.3s ease, box-shadow 0.3s ease;
  will-change: padding, box-shadow;
}

/* スクロール時の縮小状態 */
.bj20-topic-page .bj-topic-body--upper.is-scrolled {
  padding-top: 20px;
  padding-bottom: 16px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

.bj20-topic-page .bj-topic-meta__title {
  transition: font-size 0.3s ease, margin 0.3s ease;
}

.bj20-topic-page .bj-topic-body--upper.is-scrolled .bj-topic-meta__title {
  font-size: clamp(17px, 2.5vw, 22px);
  margin-bottom: 6px;
}

.bj20-topic-page .bj-topic-meta__row {
  transition: gap 0.3s ease;
}

.bj20-topic-page .bj-topic-body--upper.is-scrolled .bj-topic-meta__row {
  gap: 4px 12px;
}

.bj20-topic-page .bj-topic-body--upper .bj-topic-body__inner--wide {
  max-width: var(--wide-w);
  margin: 0 auto;
}

/* 動画プレーヤーの下に来る下部パート */
.bj20-topic-page .bj-topic-body--lower {
  padding-top: clamp(32px, 4vw, 56px);
}

.bj20-topic-page .bj-topic-body--lower .bj-topic-body__inner--wide {
  max-width: var(--wide-w);
  margin: 0 auto;
}

.bj20-topic-page .bj-topic-body__inner {
  max-width: var(--content-w);
  margin: 0 auto;
}

/* 2カラムレイアウト
   PC(>1024px): 左A(メイン) 右B1(タグ等)
   グリッド領域: info=B1, main=A */
.bj20-topic-page .bj-topic-layout {
  display: grid;
  grid-template-columns: 1fr 380px;
  grid-template-areas:
    "main info"
    "main action";
  grid-template-rows: auto 1fr;
  gap: 24px 32px;
  align-items: start;
}

/* [C] アクションエリア（完了ボタン/アップセル） — PC: 右カラム下部 */
.bj20-topic-page .bj-topic-action {
  grid-area: action;
}

/* [A] メインコンテンツ — PC時に左右余白 */
.bj20-topic-page .bj-topic-main {
  grid-area: main;
  padding: 0 clamp(24px, 4vw, 64px);
}

/* [B-1] タグ・視聴時間・完了日 */
.bj20-topic-page .bj-topic-info {
  grid-area: info;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* 完了ボタン — グリッド外・中央寄せ（PC/タブレット） */

/* メタ行 — アイコン + ティア + デュレーション 横並び（共通文字サイズ・色） */
.bj20-topic-page .bj-topic-info__meta-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 8px;
  font-size: var(--fs-body-sm);
  font-family: var(--sans-jp);
  color: var(--color-text-muted);
  letter-spacing: var(--ls-tight);
}

/* コースティア */
.bj20-topic-page .bj-topic-info__tiers {
  font-size: inherit;
  color: inherit;
}

/* 視聴時間 */
.bj20-topic-page .bj-topic-info__duration {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: inherit;
  color: inherit;
}

.bj20-topic-page .bj-topic-info__duration svg {
  color: var(--color-text-muted);
  flex-shrink: 0;
}

/* コメント / シェア アイコン（情報エリア左端） */
.bj20-topic-page .bj-topic-info__comments,
.bj20-topic-page .bj-topic-info__share {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: none;
  transition: color 0.2s ease;
}

.bj20-topic-page .bj-topic-info__comments svg,
.bj20-topic-page .bj-topic-info__share svg {
  color: var(--color-text-muted);
  flex-shrink: 0;
  transition: color 0.2s ease;
}

.bj20-topic-page .bj-topic-info__comments:hover,
.bj20-topic-page .bj-topic-info__share:hover,
.bj20-topic-page .bj-topic-info__comments:hover svg,
.bj20-topic-page .bj-topic-info__share:hover svg {
  color: var(--color-accent);
}

.bj20-topic-page .bj-topic-info__comments.is-disabled {
  cursor: default;
  pointer-events: none;
}

/* 完了日（1行） */
.bj20-topic-page .bj-topic-info__completed {
  display: flex;
  align-items: center;
  gap: 8px;
}

.bj20-topic-page .bj-topic-info__completed-label {
  font-size: var(--fs-note);
  font-family: var(--sans-jp);
  color: var(--color-text-muted);
  letter-spacing: var(--ls-tight);
}

.bj20-topic-page .bj-topic-info__completed-date {
  font-size: var(--fs-note);
  font-family: var(--sans-jp);
  color: var(--color-accent);
  letter-spacing: var(--ls-tight);
}

/* 未視聴おすすめ（グリッド外・リニアナビ直上・コンテンツ幅） */
.bj20-topic-page .bj-topic-suggestions {
  max-width: var(--content-w);
  margin: 40px auto 0;
}

.bj20-topic-page .bj-topic-suggestions__heading {
  font-size: var(--fs-body-sm);
  font-family: var(--serif-jp);
  font-weight: 400;
  color: var(--color-text);
  letter-spacing: var(--ls-heading);
  margin: 0 0 12px;
}

.bj20-topic-page .bj-topic-suggestions__list {
  display: flex;
  flex-direction: row;
  gap: 16px;
}

.bj20-topic-page .bj-topic-suggestion {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  text-decoration: none;
  color: inherit;
  transition: opacity 0.2s;
}

.bj20-topic-page .bj-topic-suggestion:hover {
  opacity: 0.75;
}

.bj20-topic-page .bj-topic-suggestion__thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 3px;
  overflow: hidden;
  background: var(--color-bg-sub);
}

.bj20-topic-page .bj-topic-suggestion__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.bj20-topic-page .bj-topic-suggestion__thumb-ph {
  width: 100%;
  height: 100%;
  background: var(--color-suna-200);
}

.bj20-topic-page .bj-topic-suggestion__title {
  margin-top: 6px;
  font-size: var(--fs-note);
  font-family: var(--sans-jp);
  color: var(--color-text);
  letter-spacing: var(--ls-tight);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* タグ一覧 */
.bj20-topic-page .bj-topic-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 8px;
}

.bj20-topic-page .bj-topic-tags__group {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
}

.bj20-topic-page .bj-topic-tags__item {
  display: inline-block;
  padding: 2px 10px;
  font-size: var(--fs-note);
  font-family: var(--sans-jp);
  color: var(--color-text-sub);
  border: 1px solid var(--color-border);
  border-radius: 2px;
  letter-spacing: var(--ls-tight);
}

/* タイトル + メタ */
.bj20-topic-page .bj-topic-meta {
  margin-bottom: 0;
}

.bj20-topic-page .bj-topic-meta__title {
  font-size: var(--fs-heading-m);
  font-family: var(--serif-jp);
  font-weight: 400;
  letter-spacing: var(--ls-heading);
  color: var(--color-text);
  margin: 0 0 12px;
  line-height: 1.5;
}

.bj20-topic-page .bj-topic-meta__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
}

.bj20-topic-page .bj-topic-meta__completed-date {
  font-size: var(--fs-note);
  font-family: var(--sans-jp);
  color: var(--color-accent);
  letter-spacing: var(--ls-tight);
}

.bj20-topic-page .bj-topic-meta__tag-group {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
}

.bj20-topic-page .bj-topic-meta__tag {
  display: inline-block;
  padding: 2px 10px;
  font-size: var(--fs-note);
  font-family: var(--sans-jp);
  color: var(--color-text-sub);
  border: 1px solid var(--color-border);
  border-radius: 2px;
  letter-spacing: var(--ls-tight);
}

/* リニアナビ（前 | コーストップ | 次） */
.bj20-topic-page .bj-topic-nav {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1px;
  background: var(--color-border);
  border: 1px solid var(--color-border);
  border-radius: 3px;
  margin: 40px auto 0;
  max-width: var(--wide-w);
  overflow: hidden;
}

.bj20-topic-page .bj-topic-nav__item {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 20px;
  font-size: var(--fs-body-sm);
  font-family: var(--sans-jp);
  color: var(--color-text);
  background: var(--color-bg);
  text-decoration: none;
  transition: background 0.2s;
}

.bj20-topic-page .bj-topic-nav__item:hover {
  background: var(--color-bg-sub);
}

.bj20-topic-page .bj-topic-nav__item.is-disabled {
  pointer-events: none;
  opacity: 0.25;
  background: var(--color-bg-sub);
}

.bj20-topic-page .bj-topic-nav__item--prev,
.bj20-topic-page .bj-topic-nav__item--next {
  padding: 14px 18px;
}

.bj20-topic-page .bj-topic-nav__item--course {
  letter-spacing: var(--ls-tight);
}

.bj20-topic-page .bj-topic-nav__item svg {
  flex-shrink: 0;
  color: var(--color-text-muted);
}

/* サマリー（bj_summary）— サイドバー内に配置 */
.bj20-topic-page .bj-topic-summary {
  background: var(--color-bg-sub);
  border-radius: 6px;
  padding: 1.2em 1.4em;
}

.bj20-topic-page .bj-topic-summary p {
  font-size: var(--fs-body-sm);
  font-family: var(--sans-jp);
  color: var(--color-text);
  line-height: 1.9;
  letter-spacing: var(--ls-tight);
  margin: 0;
}

/* 完了ボタン・完了済み・アップセル — アクションエリア内 */
.bj20-topic-page .bj-topic-action .bj-topic-complete,
.bj20-topic-page .bj-topic-action .bj-topic-done,
.bj20-topic-page .bj-topic-action .bj-topic-upsell {
  margin: 0;
  max-width: none;
}

/* 本文（bj_body） */
.bj20-topic-page .bj-topic-desc {
  margin-bottom: 0;
}

.bj20-topic-page .bj-topic-desc p {
  font-size: var(--fs-body);
  font-family: var(--sans-jp);
  color: var(--color-text);
  line-height: 2.0;
  letter-spacing: var(--ls-tight);
  margin: 0;
}

.bj20-topic-page .bj-topic-desc p + p {
  margin-top: 1em;
}

.bj20-topic-page .bj-topic-desc h3 {
  font-size: 1.15em;
  font-family: var(--serif-jp);
  font-weight: 600;
  color: var(--color-accent);
  line-height: 1.8;
  letter-spacing: var(--ls-tight);
  margin: 2.5em 0 0.8em;
}

.bj20-topic-page .bj-topic-desc h3:first-child {
  margin-top: 0;
}

/* 概要内のアイコン・画像サイズ制限 */
.bj20-topic-page .bj-topic-desc img {
  max-width: 100%;
  height: auto;
}

/* Elementor タブヘッダー（概要/チャプターリスト切替UI）を非表示 */
.bj20-topic-page .bj-topic-desc .e-n-tabs-heading {
  display: none !important;
}

/* Elementor タブ: チャプターリストタブ（2番目）を非表示（JS版で表示済み） */
.bj20-topic-page .bj-topic-desc .e-n-tabs-content > .e-con:nth-child(2) {
  display: none !important;
}

/* Elementor タブ: 概要タブは常に表示 */
.bj20-topic-page .bj-topic-desc .e-n-tabs-content > .e-con:first-child {
  display: block !important;
}

/* 完了ボタン（グリッド外 — PC/タブレットは中央寄せ、モバイルは全幅） */
.bj20-topic-page .bj-topic-complete {
  text-align: center;
  max-width: 360px;
  margin: 48px auto 0;
}

.bj20-topic-page .bj-topic-complete__form {
  display: block;
}

.bj20-topic-page .bj-topic-complete__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px 16px;
  font-size: var(--fs-body-sm);
  font-family: var(--serif-jp);
  font-weight: 400;
  letter-spacing: var(--ls-cta);
  color: #fff;
  background: var(--color-surface-dark);
  border: none;
  border-radius: 2px;
  cursor: pointer;
  transition: opacity 0.2s;
}

.bj20-topic-page .bj-topic-complete__btn:hover {
  opacity: 0.85;
}

.bj20-topic-page .bj-topic-complete__btn.is-loading {
  opacity: 0.4;
  pointer-events: none;
}

.bj20-topic-page .bj-topic-complete__btn.is-locked {
  opacity: 0.3;
  cursor: not-allowed;
}

.bj20-topic-page .bj-topic-complete__btn.is-locked:hover {
  opacity: 0.3;
}

/* 完了済みメッセージ（完了ボタンと同じ体裁・位置） */
.bj20-topic-page .bj-topic-done {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  max-width: 360px;
  margin: 48px auto 0;
  padding: 12px 16px;
  border: 1.5px solid var(--color-border);
  border-radius: 2px;
}

.bj20-topic-page .bj-topic-done__icon {
  flex-shrink: 0;
  color: var(--color-accent);
}

.bj20-topic-page .bj-topic-done__text {
  font-size: var(--fs-body-sm);
  font-family: var(--serif-jp);
  font-weight: 400;
  letter-spacing: var(--ls-cta);
  color: var(--color-text);
  line-height: 1.8;
  margin: 0;
}

.bj20-topic-page .bj-topic-done__date {
  color: var(--color-text-sub);
}

.bj20-topic-page .bj-topic-complete__hint {
  margin: 10px 0 0;
  font-size: var(--fs-note);
  font-family: var(--sans-jp);
  color: var(--color-text-muted);
  letter-spacing: var(--ls-tight);
}


/* コース完了は bj-topic-done に統合 — 旧スタイル削除済み */


/* ----------------------------------------------------------
   アップセル CTA（非アクセスユーザー向け）
   完了ボタン領域を活用。guest / free / visitor で表示
   ---------------------------------------------------------- */
.bj20-topic-page .bj-topic-upsell {
  text-align: center;
  max-width: 480px;
  margin: 48px auto 0;
  padding: 32px 24px;
  background: var(--color-bg-sub);
  border-radius: 2px;
}

.bj20-topic-page .bj-topic-upsell__text {
  font-family: var(--serif-jp);
  font-size: var(--fs-body);
  font-weight: 400;
  letter-spacing: var(--ls-normal);
  line-height: 2.0;
  color: var(--color-text);
  margin: 0 0 24px;
}

.bj20-topic-page .bj-topic-upsell__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--serif-jp);
  font-size: var(--fs-body-sm);
  font-weight: 400;
  letter-spacing: var(--ls-cta);
  color: var(--color-bg);
  background: var(--color-accent);
  border: none;
  border-radius: 2px;
  padding: 10px 32px;
  text-decoration: none;
  transition: opacity 0.2s, gap 0.3s;
}

.bj20-topic-page .bj-topic-upsell__btn:hover {
  opacity: 0.85;
  gap: 14px;
}

.bj20-topic-page .bj-topic-upsell__btn svg {
  transition: transform 0.3s ease;
}

.bj20-topic-page .bj-topic-upsell__btn:hover svg {
  transform: translateX(3px);
}


/* ----------------------------------------------------------
   関連動画末尾 CTA（visitor 向け）
   ---------------------------------------------------------- */
.bj20-topic-page .bj-topic-related__cta {
  text-align: center;
  margin-top: 48px;
  padding-top: 40px;
  border-top: 1px solid var(--color-border);
}

.bj20-topic-page .bj-topic-related__cta-text {
  font-family: var(--serif-jp);
  font-size: var(--fs-body);
  font-weight: 400;
  letter-spacing: var(--ls-normal);
  line-height: 2.0;
  color: var(--color-text);
  margin: 0 0 24px;
}

.bj20-topic-page .bj-topic-related__cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--serif-jp);
  font-size: var(--fs-body-sm);
  font-weight: 400;
  letter-spacing: var(--ls-cta);
  color: var(--color-bg);
  background: var(--color-accent);
  border: none;
  border-radius: 2px;
  padding: 10px 32px;
  text-decoration: none;
  transition: opacity 0.2s, gap 0.3s;
}

.bj20-topic-page .bj-topic-related__cta-btn:hover {
  opacity: 0.85;
  gap: 14px;
}

.bj20-topic-page .bj-topic-related__cta-btn svg {
  transition: transform 0.3s ease;
}

.bj20-topic-page .bj-topic-related__cta-btn:hover svg {
  transform: translateX(3px);
}


/* ----------------------------------------------------------
   [D] コメント欄
   style.css のレガシースタイルを統合。BJ2.0 トークン完全準拠。
   ---------------------------------------------------------- */

/* --- D-1. コンテナ --- */

.bj20-topic-page .bj-topic-comments {
  background: var(--color-bg-sub);
  padding: clamp(40px, 6vw, 80px) 40px;
  border-top: 1px solid var(--color-border);
}

.bj20-topic-page .bj-topic-comments__inner {
  max-width: var(--content-w);
  margin: 0 auto;
}

/* WP デフォルトの「X件のフィードバック」見出しを隠し、JSで差し替える */
.bj20-topic-page #comments > h2:not(.bj-comments-title) {
  display: none !important;
}

/* --- D-2. 見出しブロック（JS挿入: ラベル + タイトル + 件数） --- */

.bj20-topic-page .bj-comments-header {
  margin: 0 0 28px;
}

.bj20-topic-page .bj-comments-header__label {
  display: block;
  font-size: var(--fs-label);
  font-family: var(--serif-en);
  font-weight: 400;
  letter-spacing: var(--ls-wide);
  color: var(--color-accent);
  margin-bottom: 6px;
}

.bj20-topic-page .bj-comments-title {
  font-size: var(--fs-h2);
  font-family: var(--serif-jp);
  font-weight: 400;
  letter-spacing: var(--ls-heading);
  color: var(--color-text);
  margin: 0;
}

/* --- D-3. コメント一覧 --- */

.bj20-topic-page .bj-topic-comments__inner .comment-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.bj20-topic-page .bj-topic-comments__inner .comment,
.bj20-topic-page .bj-topic-comments__inner .pingback {
  position: relative;
}

.bj20-topic-page .bj-topic-comments__inner .comment-body {
  display: flex;
  flex-direction: column;
  padding: 24px 0;
  border-bottom: 1px solid var(--color-border);
}

.bj20-topic-page .bj-topic-comments__inner .comment-list > li:last-child > .comment-body,
.bj20-topic-page .bj-topic-comments__inner .children > li:last-child > .comment-body {
  border-bottom: none;
}

/* アバター（名前行内にインライン配置） */
.bj20-topic-page .bj-topic-comments__inner .comment .avatar,
.bj20-topic-page .bj-topic-comments__inner .pingback .avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  /* JSで .comment-meta 内に移動するため、absolute 不要 */
  position: static;
  float: none;
  flex-shrink: 0;
}

/* 「より：/says:」非表示 */
.bj20-topic-page .bj-topic-comments__inner .says {
  display: none !important;
}

/* --- D-4. コメントヘッダー（名前+バッジ 左、日付 右） --- */

.bj20-topic-page .bj-topic-comments__inner .comment-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  line-height: 1;
}

.bj20-topic-page .bj-topic-comments__inner .comment-author {
  display: flex;
  align-items: center;
  gap: 16px;
}

.bj20-topic-page .bj-topic-comments__inner .comment-author .fn {
  font-size: var(--fs-body-sm);
  font-family: var(--sans-jp);
  font-weight: 500;
  color: var(--color-text);
}

/* WP デフォルトの日付は非表示（返信リンク行に移動） */
.bj20-topic-page .bj-topic-comments__inner .comment-metadata {
  display: none;
}

/* --- D-5. コメント本文 --- */

.bj20-topic-page .bj-topic-comments__inner .comment-content p {
  font-size: var(--fs-body-sm);
  font-family: var(--sans-jp);
  color: var(--color-text);
  line-height: 1.8;
  letter-spacing: var(--ls-tight);
  margin: 0;
}

/* 返信リンク + 日付行 */
.bj20-topic-page .bj-topic-comments__inner .reply {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 12px;
}

.bj20-topic-page .bj-topic-comments__inner .reply a {
  font-size: var(--fs-note);
  font-family: var(--sans-jp);
  color: var(--color-text-sub);
  text-decoration: none;
  letter-spacing: var(--ls-tight);
  transition: color 0.2s;
}

.bj20-topic-page .bj-topic-comments__inner .reply a:hover {
  color: var(--color-text);
}

.bj20-topic-page .bj-reply-icon {
  display: inline-block;
  vertical-align: -2px;
  margin-right: 2px;
}

.bj20-topic-page .bj-comment-time {
  font-size: var(--fs-note);
  font-family: var(--sans-jp);
  color: var(--color-text-muted);
  letter-spacing: var(--ls-tight);
  margin-left: auto;
}

/* 制限ユーザー向け: 返信リンクがない場合の日付行 */
.bj20-topic-page .bj-comment-time-row {
  margin-top: 12px;
  text-align: right;
}

/* --- D-6. 子コメント（返信スレッド） --- */

.bj20-topic-page .bj-topic-comments__inner .children {
  list-style: none;
  margin: 0;
  padding-left: 28px;
  border-left: 2px solid var(--color-border);
}

.bj20-topic-page .bj-topic-comments__inner .children li:last-child {
  padding-bottom: 0;
}

/* --- D-7. コメントフォーム --- */

.bj20-topic-page .bj-topic-comments__inner #respond {
  margin-top: 32px;
}

/* フォーム全体: 横並び（入力 + 送信ボタン） */
.bj20-topic-page .bj-topic-comments__inner #commentform {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  flex-wrap: wrap;
}

/* 見出しがフォーム内に入る場合、全幅1行目に */
.bj20-topic-page #comments #commentform .bj-comments-title {
  flex: 0 0 100%;
  order: 0;
  margin: 0 0 12px;
}

.bj20-topic-page .bj-topic-comments__inner #commentform .comment-form-comment {
  flex: 1 1 0;
  min-width: 0;
  order: 1;
}

.bj20-topic-page .bj-topic-comments__inner #commentform .form-submit {
  margin: 0;
  flex: 0 0 auto;
  align-self: flex-start;
  margin-left: auto;
  order: 2;
}

/* アバター + テキストエリア（ログイン中） */
.bj20-topic-page .bj-comment-form {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0;
}

.bj20-topic-page .bj-comment-form__avatar {
  flex: 0 0 auto;
  line-height: 1;
}

.bj20-topic-page .bj-comment-form__avatar-img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: block;
  position: static !important;
  left: auto !important;
  top: auto !important;
  float: none !important;
}

.bj20-topic-page .bj-comment-form__field {
  flex: 1 1 auto;
  display: block;
}

.bj20-topic-page .bj-comment-form textarea#comment {
  width: 100%;
}

/* 返信タイトル行 */
.bj20-topic-page .bj-topic-comments__inner #reply-title,
.bj20-topic-page .bj-topic-comments__inner .comment-reply-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 12px 0 10px;
  font-size: var(--fs-body-sm);
  font-family: var(--sans-jp);
  font-weight: 400;
  color: var(--color-text-sub);
}

.bj20-topic-page .bj-topic-comments__inner #reply-title small,
.bj20-topic-page .bj-topic-comments__inner .comment-reply-title small {
  margin-left: auto;
}

.bj20-topic-page .bj-topic-comments__inner #cancel-comment-reply-link {
  display: inline-block;
  margin-left: 12px;
  font-size: var(--fs-note);
  color: var(--color-text-muted);
  text-decoration: none;
}

/* フォーム入力 */
.bj20-topic-page .bj-topic-comments__inner .comment-form label {
  display: block;
  font-size: var(--fs-body-sm);
  font-family: var(--sans-jp);
  color: var(--color-text-sub);
  letter-spacing: var(--ls-tight);
  margin-bottom: 6px;
}

.bj20-topic-page .bj-topic-comments__inner .comment-form input[type="text"],
.bj20-topic-page .bj-topic-comments__inner .comment-form input[type="email"],
.bj20-topic-page .bj-topic-comments__inner .comment-form textarea {
  width: 100%;
  padding: 10px 14px;
  font-size: var(--fs-body-sm);
  font-family: var(--sans-jp);
  color: var(--color-text);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 2px;
  outline: none;
  transition: border-color 0.2s;
  box-sizing: border-box;
}

.bj20-topic-page .bj-topic-comments__inner .comment-form input:focus,
.bj20-topic-page .bj-topic-comments__inner .comment-form textarea:focus {
  border-color: var(--color-text-sub);
}

.bj20-topic-page .bj-topic-comments__inner .comment-form textarea {
  min-height: 40px;
  height: 40px;
  resize: none;
  overflow: hidden;
  padding-top: 9px;
  padding-bottom: 9px;
}

/* 送信ボタン（テキストボックスと高さ揃え） */
.bj20-topic-page .bj-topic-comments__inner .form-submit .submit {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 32px;
  font-size: var(--fs-body);
  font-family: var(--serif-jp);
  letter-spacing: var(--ls-cta);
  color: #fff;
  background: var(--color-surface-dark);
  border: none;
  border-radius: 2px;
  cursor: pointer;
  transition: opacity 0.2s;
}

.bj20-topic-page .bj-topic-comments__inner .form-submit .submit:hover {
  opacity: 0.85;
}

/* 補助テキスト */
.bj20-topic-page .bj-topic-comments__inner .logged-in-as,
.bj20-topic-page .bj-topic-comments__inner .comment-notes {
  font-size: var(--fs-note);
  font-family: var(--sans-jp);
  color: var(--color-text-muted);
  letter-spacing: var(--ls-tight);
  margin-bottom: 16px;
}

/* --- D-8. 返信中（comment-reply.js がフォームを移動する） --- */

/* 返信中のフォーム整列は左端揃えのため padding 不要 */

/* --- D-9. グループバッジ --- */

.bj20-topic-page .bj-comment-badge {
  display: inline-block;
  padding: 2px 8px;
  margin-left: 10px;
  font-size: var(--fs-micro);
  font-family: var(--sans-jp);
  font-weight: 500;
  line-height: 1.4;
  border-radius: 2px;
  vertical-align: middle;
  letter-spacing: var(--ls-tight);
  color: var(--color-bg);
}

.bj20-topic-page .bj-badge-master {
  background: var(--color-kitsurubami-500);
}

.bj20-topic-page .bj-badge-adept {
  background: var(--color-ai-500);
}

.bj20-topic-page .bj-badge-novice {
  background: var(--color-seiji-500);
}

.bj20-topic-page .bj-badge-free {
  background: var(--color-suna-600);
}

.bj20-topic-page .bj-badge-admin {
  background: var(--color-akane-500);
}

/* --- D-10. コメント制限（ゲスト/無料ユーザー） --- */

.bj20-topic-page .bj-comment-restricted-notice {
  text-align: center;
  padding: 20px 24px;
  margin: 16px 0 28px;
}

.bj20-topic-page .bj-comment-restricted-notice__text {
  font-size: var(--fs-note);
  font-family: var(--sans-jp);
  color: var(--color-text-muted);
  letter-spacing: var(--ls-tight);
  line-height: 1.6;
  margin: 0;
}

.bj20-topic-page .bj-comment-restricted-notice__link {
  font-size: var(--fs-note);
  font-family: var(--sans-jp);
  color: var(--color-text-sub);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--color-border);
  transition: text-decoration-color 0.2s, color 0.2s;
}

.bj20-topic-page .bj-comment-restricted-notice__link:hover {
  color: var(--color-text);
  text-decoration-color: var(--color-text-sub);
}

.bj20-topic-page .bj-notice-arrow {
  display: none;
}

/* tier 判定でコメント不可のユーザー: フォーム + 返信リンク非表示
   ゲスト / 無料ユーザー / 他コース会員（bj-visitor の一部）を横断的にカバーする */
.bj20-topic-page.bj-comment-restricted #respond,
.bj20-topic-page.bj-comment-restricted .comment-respond {
  display: none !important;
}

.bj20-topic-page.bj-comment-restricted .comment-reply-link,
.bj20-topic-page.bj-comment-restricted .comment-reply-login {
  display: none !important;
}


/* ----------------------------------------------------------
   [E] 関連動画
   ---------------------------------------------------------- */

.bj20-topic-page .bj-topic-related {
  background: var(--color-bg);
  padding: clamp(40px, 6vw, 80px) 40px;
  border-top: 1px solid var(--color-border);
}

.bj20-topic-page .bj-topic-related__inner {
  max-width: var(--wide-w);
  margin: 0 auto;
}

.bj20-topic-page .bj-topic-related__label {
  font-size: var(--fs-label);
  font-family: var(--serif-en);
  letter-spacing: var(--ls-wide);
  color: var(--color-accent);
  margin: 0 0 6px;
}

.bj20-topic-page .bj-topic-related__heading {
  font-size: var(--fs-h2);
  font-family: var(--serif-jp);
  font-weight: 400;
  letter-spacing: var(--ls-heading);
  color: var(--color-text);
  margin: 0 0 32px;
}

.bj20-topic-page .bj-topic-related__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* 関連動画カード */
.bj20-topic-page .bj-related-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  border-radius: 4px;
  overflow: hidden;
  background: var(--color-bg);
}

.bj20-topic-page .bj-related-card:hover .bj-related-card__thumb {
  transform: scale(1.05);
}

.bj20-topic-page .bj-related-card--done {
  opacity: 0.75;
}

/* tier ロック表示: 暗幕 + ロックアイコン */
.bj20-topic-page .bj-related-card--locked .bj-related-card__thumb-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  pointer-events: none;
  z-index: 1;
}

.bj20-topic-page .bj-related-card__lock-icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  opacity: 0.85;
  z-index: 2;
  pointer-events: none;
}

.bj20-topic-page .bj-related-card__tier-badges {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px;
  max-width: calc(100% - 16px);
  z-index: 3;
  pointer-events: none;
}

.bj20-topic-page .bj-related-card__tier-badge {
  background: rgba(var(--color-black-rgb), 0.7);
  color: #fff;
  font-family: var(--sans-jp);
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 2px;
  letter-spacing: var(--ls-tight);
  line-height: 1.3;
  font-weight: 400;
}

.bj20-topic-page .bj-related-card__thumb-wrap {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--color-bg-sub);
}

.bj20-topic-page .bj-related-card__thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

.bj20-topic-page .bj-related-card__thumb-placeholder {
  width: 100%;
  height: 100%;
  background: var(--color-suna-200);
}

.bj20-topic-page .bj-related-card__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s;
}

.bj20-topic-page .bj-related-card:hover .bj-related-card__play {
  opacity: 1;
}

.bj20-topic-page .bj-related-card__done-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 3;
}

.bj20-topic-page .bj-related-card__body {
  padding: 8px 4px 0;
}

.bj20-topic-page .bj-related-card__tag {
  display: inline-block;
  font-size: var(--fs-note);
  font-family: var(--sans-jp);
  color: var(--color-text-muted);
  letter-spacing: var(--ls-tight);
  margin-bottom: 4px;
}

.bj20-topic-page .bj-related-card__title {
  font-size: var(--fs-body-sm);
  font-family: var(--sans-jp);
  font-weight: 400;
  color: var(--color-text);
  letter-spacing: var(--ls-tight);
  line-height: 1.6;
  margin: 0;
}


/* ----------------------------------------------------------
   [F] フローティングトグルボタン
   ---------------------------------------------------------- */

.bj20-topic-page .bj-nav-toggle {
  position: fixed;
  right: 24px;
  bottom: 32px;
  z-index: 200;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 14px 10px;
  background: var(--color-surface-dark);
  color: rgba(var(--color-white-rgb), 0.85);
  border: 1px solid rgba(var(--color-white-rgb), 0.15);
  border-radius: 4px;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(var(--color-black-rgb), 0.3);
  transition: background 0.2s, color 0.2s;
  line-height: 1;
}

.bj20-topic-page .bj-nav-toggle:hover {
  background: var(--color-tetsukon-600);
  color: rgba(var(--color-white-rgb), 1);
}

.bj20-topic-page .bj-nav-toggle__icon {
  display: block;
}

.bj20-topic-page .bj-nav-toggle__label {
  font-size: 10px;
  font-family: var(--sans-jp);
  letter-spacing: 0.08em;
  line-height: 1;
}


/* ----------------------------------------------------------
   [F] コースナビ 中央モーダル
   コースページの .bj-tag-modal / .bj-lesson 構造を流用
   ---------------------------------------------------------- */

.bj20-topic-page .bj-nav-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.bj20-topic-page .bj-nav-modal[aria-hidden="false"] {
  pointer-events: auto;
  opacity: 1;
}

.bj20-topic-page .bj-nav-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(var(--color-black-rgb), 0.45);
  backdrop-filter: blur(2px);
}

.bj20-topic-page .bj-nav-modal__panel {
  position: relative;
  width: 640px;
  max-width: 92vw;
  max-height: 80vh;
  background: var(--color-bg);
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 16px 48px rgba(var(--color-black-rgb), 0.2);
}

/* モーダルヘッダー */
.bj20-topic-page .bj-nav-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}

.bj20-topic-page .bj-nav-modal__course-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  font-size: var(--fs-body-sm);
  font-family: var(--sans-jp);
  color: var(--color-text);
  letter-spacing: var(--ls-tight);
  transition: color 0.2s;
}

.bj20-topic-page .bj-nav-modal__course-link:hover {
  color: var(--color-accent);
}

.bj20-topic-page .bj-nav-modal__kanji {
  font-family: var(--serif-jp);
  font-size: 20px;
  line-height: 1;
  color: var(--color-accent);
}

.bj20-topic-page .bj-nav-modal__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: transparent;
  color: var(--color-text-sub);
  border: none;
  border-radius: 2px;
  cursor: pointer;
  transition: color 0.2s, background 0.2s;
}

.bj20-topic-page .bj-nav-modal__close:hover {
  color: var(--color-text);
  background: var(--color-bg-sub);
}

/* 進捗バー */
.bj20-topic-page .bj-nav-modal__progress {
  padding: 14px 24px;
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}

.bj20-topic-page .bj-nav-modal__progress .bj-progress-bar {
  width: 100%;
  max-width: 100%;
  height: 4px;
  background: var(--color-border);
  border-radius: 2px;
  overflow: hidden;
}

.bj20-topic-page .bj-nav-modal__progress .bj-progress-bar__fill {
  height: 100%;
  background: var(--color-accent);
  border-radius: 2px;
  transition: width 0.6s ease;
}

.bj20-topic-page .bj-nav-modal__progress-text {
  display: inline-block;
  margin-top: 6px;
  font-size: var(--fs-note);
  font-family: var(--sans-jp);
  color: var(--color-text-sub);
  letter-spacing: var(--ls-tight);
}

/* モーダルボディ（スクロール領域） */
.bj20-topic-page .bj-nav-modal__body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* ============================================================
   コースページと同じ .bj-lesson / .bj-topic カード構造
   bj20-course.css をベースにモーダル向け微調整
   ============================================================ */

/* レッスンヘッダー（アコーディオン） */
.bj20-topic-page .bj-lesson__header {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 16px 24px;
  background: var(--color-bg-sub);
  border: none;
  border-bottom: 1px solid var(--color-border);
  cursor: pointer;
  text-align: left;
  transition: background 0.15s;
}

.bj20-topic-page .bj-lesson__header:hover {
  background: var(--color-suna-200);
}

.bj20-topic-page .bj-lesson__status {
  flex-shrink: 0;
  color: var(--color-text-muted);
}

.bj20-topic-page .bj-lesson--complete .bj-lesson__status {
  color: var(--color-accent);
}

.bj20-topic-page .bj-lesson__title {
  flex: 1;
  font-size: var(--fs-body-sm);
  font-family: var(--sans-jp);
  font-weight: 400;
  color: var(--color-text);
  letter-spacing: var(--ls-tight);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bj20-topic-page .bj-lesson__count {
  font-size: var(--fs-note);
  font-family: var(--sans-jp);
  color: var(--color-text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}

.bj20-topic-page .bj-lesson__toggle-icon {
  flex-shrink: 0;
  color: var(--color-text-muted);
  transition: transform 0.2s;
}

.bj20-topic-page .bj-lesson__header[aria-expanded="true"] .bj-lesson__toggle-icon {
  transform: rotate(180deg);
}

/* トピックグリッド（リスト表示で統一） */
.bj20-topic-page .bj-lesson__topics {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  padding: 0;
  background: var(--color-bg);
}

.bj20-topic-page .bj-lesson__topics[aria-hidden="true"] {
  display: none;
}

/* トピック行 (リスト表示) */
.bj20-topic-page .bj-topic {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 24px;
  text-decoration: none;
  color: inherit;
  border-bottom: 1px solid var(--color-border);
  transition: background 0.15s;
}

.bj20-topic-page .bj-topic:hover {
  background: var(--color-bg-sub);
}

/* 現在のトピックをハイライト */
.bj20-topic-page .bj-topic--current {
  background: rgba(var(--color-accent-rgb), 0.08);
  border-left: 3px solid var(--color-accent);
  padding-left: 21px;
}

.bj20-topic-page .bj-topic__thumb-wrap {
  flex-shrink: 0;
  width: 80px;
  height: 45px;
  border-radius: 2px;
  overflow: hidden;
  position: relative;
  background: var(--color-bg-sub);
}

/* 地図モーダル: tier ロック表示 */
.bj20-topic-page .bj-topic--locked .bj-topic__thumb-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  pointer-events: none;
  z-index: 1;
}

.bj20-topic-page .bj-topic__lock-icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  opacity: 0.85;
  z-index: 2;
  pointer-events: none;
}

.bj20-topic-page .bj-topic--locked .bj-topic__title {
  color: var(--color-text-muted);
}

.bj20-topic-page .bj-topic__thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 2px;
}

.bj20-topic-page .bj-topic__thumb-placeholder {
  width: 100%;
  height: 100%;
  background: var(--color-suna-200);
}

.bj20-topic-page .bj-topic__badge {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 20px;
  height: 20px;
  padding: 2px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.bj20-topic-page .bj-topic__badge--complete {
  background: var(--color-accent);
  color: #fff;
}

.bj20-topic-page .bj-topic__title {
  flex: 1;
  font-size: var(--fs-body-sm);
  font-family: var(--sans-jp);
  color: var(--color-text);
  letter-spacing: var(--ls-tight);
  line-height: 1.6;
  margin: 0;
  padding: 0;
}


/* ----------------------------------------------------------
   レスポンシブ（タブレット以下: max-width 1024px）
   2カラム → 1カラム（上B1 中A 下B2）
   ---------------------------------------------------------- */

@media (max-width: 1024px) {
  .bj20-topic-page .bj-topic-layout {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas:
      "info"
      "main"
      "action";
    gap: 0;
  }

  .bj20-topic-page .bj-topic-main {
    padding: 0;
  }

  /* サイドバー → モバイルでは上部に展開 */
  .bj20-topic-page .bj-topic-info {
    flex-direction: column;
    gap: 12px;
    padding-bottom: 1.5em;
    margin-bottom: 1.5em;
    border-bottom: 1px solid var(--color-border);
  }

  .bj20-topic-page .bj-topic-summary {
    background: none;
    border-radius: 0;
    padding: 0;
  }

  /* メタ情報をインラインに */
  .bj20-topic-page .bj-topic-info .bj-topic-tags,
  .bj20-topic-page .bj-topic-info .bj-topic-info__tiers,
  .bj20-topic-page .bj-topic-info .bj-topic-info__duration {
    display: inline-flex;
  }

  /* モバイル: メタ行・タグの左右余白を0に */
  .bj20-topic-page .bj-topic-info__meta-row,
  .bj20-topic-page .bj-topic-tags {
    padding: 0;
  }

  /* モバイル: アクションエリア（本文の下） */
  .bj20-topic-page .bj-topic-action {
    margin-top: 2em;
  }

  .bj20-topic-page .bj-topic-related__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}


/* ----------------------------------------------------------
   レスポンシブ（モバイル: max-width 767px）
   ---------------------------------------------------------- */

@media (max-width: 767px) {
  .bj20-topic-page .bj-topic-body {
    padding: 32px 24px;
  }

  .bj20-topic-page .bj-topic-body--upper {
    margin-top: 64px;
    padding: 26px 24px 20px;
  }

  .bj20-topic-page .bj-topic-body--upper.is-fixed {
    top: 64px;
  }

  .bj20-topic-page .bj-topic-player__inner {
    padding: 0;
  }

  .bj20-topic-page .bj-chapter-bar {
    padding: 0;
  }

  .bj20-topic-page .bj-topic-body--lower {
    padding-top: 24px;
  }


  .bj20-topic-page .bj-topic-meta__title {
    font-size: clamp(18px, 4vw, 22px);
    margin-bottom: 8px;
  }

  .bj20-topic-page .bj-topic-meta__row {
    margin-bottom: 4px;
  }

  .bj20-topic-page .bj-topic-complete {
    max-width: none;
    margin-top: 4px;
  }

  .bj20-topic-page .bj-topic-done {
    max-width: none;
    margin-top: 4px;
  }

  .bj20-topic-page .bj-topic-upsell {
    max-width: none;
    margin-top: 4px;
    padding: 24px 16px;
  }

  .bj20-topic-page .bj-topic-related__cta {
    margin-top: 32px;
    padding-top: 24px;
  }

  .bj20-topic-page .bj-topic-nav__item {
    padding: 12px 14px;
  }

  .bj20-topic-page .bj-topic-comments {
    padding: 32px 24px;
  }

  .bj20-topic-page .bj-topic-comments__inner .comment-body {
    padding: 16px 0;
  }

  .bj20-topic-page .bj-topic-comments__inner .children {
    padding-left: 16px;
  }

  /* スマホ: アバターを小さく */
  .bj20-topic-page .bj-topic-comments__inner .comment .avatar {
    width: 30px;
    height: 30px;
  }

  .bj20-topic-page .bj-topic-comments__inner .comment-meta {
    gap: 10px;
  }

  .bj20-topic-page .bj-topic-comments__inner #commentform {
    flex-direction: column;
    align-items: stretch;
  }

  .bj20-topic-page .bj-topic-comments__inner #commentform .form-submit {
    align-self: flex-end;
  }

  .bj20-topic-page .bj-comment-restricted-notice {
    padding: 16px;
  }

  .bj20-topic-page .bj-topic-related {
    padding: 32px 24px;
  }

  .bj20-topic-page .bj-topic-related__grid {
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }

  .bj20-topic-page .bj-nav-toggle {
    right: 16px;
    bottom: 24px;
  }

  .bj20-topic-page .bj-nav-modal__panel {
    max-height: 85vh;
  }

  .bj20-topic-page .bj-lesson__header {
    padding: 14px 16px;
  }

  .bj20-topic-page .bj-topic {
    padding: 10px 16px;
  }
}


/* シェアモーダル CSS は assets/css/bj20-share.css に移設（共通コンポーネント化） */