/* ダッシュボード */

.learning-announcement {
  background: rgba(196, 77, 44, 0.08);
  border: 1px solid rgba(196, 77, 44, 0.2);
  padding: 1rem 1.25rem;
  border-radius: var(--radius);
  margin-bottom: 2rem;
}

/* 復習質問セクション — 立体的なクリック可能カード */
.learning-review-section {
  position: relative;
  border: 1px solid #f3d9cd;
  background: #fdf6f2;
  border-radius: 16px;
  padding: 1.6rem 1.7rem;
  margin-bottom: 2.5rem;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(124,45,18,.04), 0 10px 30px -16px rgba(194,65,12,.25);
}
.learning-review-section.is-urgent {
  border-color: #f5cdcd;
  background: #fdf3f3;
}

/* 2カラム: 左にボタン・右に一覧（PC）。スマホは1カラムでボタンのみ */
.learning-review-section__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.8rem;
  align-items: center;
}
.learning-review-section__lead {
  font-size: 1.02rem; font-weight: 700; color: #7c2d12; margin: 0 0 1rem;
  letter-spacing: .01em;
}
.learning-review-section__note {
  font-size: .76rem; color: #b07a62; margin: .75rem 0 0; text-align: center;
}

/* ▼ 立体的で押したくなる「復習を開始する」ボタン */
.learning-review-start {
  display: flex; align-items: center; justify-content: center; gap: .7rem;
  width: 100%; box-sizing: border-box;
  padding: 1.05rem 1.5rem;
  border-radius: 14px;
  text-decoration: none;
  font-size: 1.12rem; font-weight: 700; letter-spacing: .01em;
  color: #fff;
  background: #c2410c;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    0 1px 2px rgba(124,45,18,.25),
    0 8px 20px -6px rgba(194,65,12,.5);
  transition: background .18s ease, transform .18s cubic-bezier(.2,.8,.3,1), box-shadow .18s ease;
  -webkit-tap-highlight-color: transparent;
  position: relative;
}
.learning-review-start__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; flex: none;
  border-radius: 50%;
  background: rgba(255,255,255,.16);
  font-size: .82rem; line-height: 1;
  transition: transform .18s cubic-bezier(.2,.8,.3,1);
}
.learning-review-start__text { flex: 0 1 auto; }
.learning-review-start__badge {
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px; padding: .12rem .65rem;
  font-size: .8rem; font-weight: 700; letter-spacing: .02em;
}
.learning-review-start:hover {
  background: #d24a12;
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.2),
    0 2px 4px rgba(124,45,18,.25),
    0 14px 28px -8px rgba(194,65,12,.6);
}
.learning-review-start:hover .learning-review-start__icon { transform: translateX(3px); }
.learning-review-start:active {
  transform: translateY(0);
  background: #b23a0c;
  box-shadow:
    inset 0 1px 2px rgba(124,45,18,.4),
    0 2px 6px -2px rgba(194,65,12,.4);
}
.learning-review-start:focus-visible {
  outline: 3px solid rgba(194,65,12,.4);
  outline-offset: 3px;
}
/* 緊急時は深い赤系に */
.learning-review-section.is-urgent .learning-review-start { background: #b91c1c; }
.learning-review-section.is-urgent .learning-review-start:hover { background: #c92626; }
.learning-review-section.is-urgent .learning-review-start:active { background: #a51818; }

/* 右カラム: 復習予定の講義 */
.learning-review-section__list-title {
  font-size: .92rem; font-weight: 700; color: #8a2d12; margin: 0 0 .7rem;
}
.learning-review-section__more {
  font-size: .8rem; color: #a8694f; margin: .5rem 0 0;
}

/* スマホ: 1カラム・ボタンのみ（右の一覧は隠す） */
@media (max-width: 768px) {
  .learning-review-section__grid { grid-template-columns: 1fr; gap: 0; }
  .learning-review-section__list { display: none; }
  .learning-review-section__lead { text-align: center; }
}

.learning-review-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.75rem; }
.learning-review-list__item {
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 10px;
  padding: 1rem;
}
.learning-review-list__meta { font-size: 0.75rem; color: var(--color-muted); margin: 0 0 0.25rem; }
.learning-review-list__title { font-weight: 500; margin: 0; }
.learning-tag { display: inline-block; margin-left: 0.5rem; font-size: 0.7rem; padding: 0 0.5rem; border-radius: 4px; }
.learning-tag--required { background: var(--color-accent); color: var(--color-bg); }

/* カテゴリ行 */
.learning-category-row { margin-bottom: 3rem; }
.learning-category-row__title {
  font-size: 1.5rem;
  margin: 0 0 1.25rem;
  padding-left: 0.25rem;
  display: flex;
  align-items: center;
  gap: 8px;
}
.learning-category-row__icon {
  font-size: 1.4rem;
  line-height: 1;
}
.learning-category-row__count {
  background: #f1ede4;
  color: #555;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 2px 10px;
  border-radius: 999px;
  margin-left: 6px;
}
.learning-category-row__list {
  display: flex;
  flex-wrap: nowrap;        /* 横スクロールで1行表示 */
  gap: 1.5rem;
  overflow-x: auto;
  overflow-y: clip;
  /* 横スクロール端での連鎖だけ防ぐ。縦ホイールはコンテナを素通りしてページへ届く。
     JSで preventDefault するとネイティブ慣性が失われてガクガクするため CSS のみで対応。 */
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  padding: 24px 20px 36px;
  margin: 0;
  scrollbar-width: thin;
  scrollbar-color: #c5cae9 #f0f0f0;
  -webkit-overflow-scrolling: touch;
}
.learning-category-row__list::-webkit-scrollbar { display: none; } /* Chrome/Safari: 縦横ともバー非表示 */
/* ── カードサイズ: リストの style 属性に出力された CSS変数を消費（インラインCSS非依存） ── */
.learning-category-row__list .learning-card,
.learning-category-row__list .learning-card-3d-wrap {
  flex: 0 0 var(--lc-cw, 24rem) !important;
  width: var(--lc-cw, 24rem) !important;
}
.learning-category-row__list .learning-card-3d-wrap:has(.learning-card-wrapper) {
  flex: 0 0 auto !important;
  width: auto !important;
}
.learning-category-row__list .learning-card-3d-wrap > .learning-card {
  width: 100% !important;
}
.learning-category-row__list .learning-card__title {
  font-size: var(--lc-title, 1.23rem) !important;
}
.learning-category-row__list .learning-card__action-btn {
  font-size: var(--lc-btn, 1.32rem) !important;
}
@media (max-width: 480px) {
  .learning-category-row__list .learning-card,
  .learning-category-row__list .learning-card-3d-wrap {
    flex: 0 0 var(--lc-cw-sp, 17rem) !important;
    width: var(--lc-cw-sp, 17rem) !important;
  }
  .learning-category-row__list .learning-card-3d-wrap:has(.learning-card-wrapper) {
    flex: 0 0 auto !important;
    width: auto !important;
  }
  .learning-category-row__list .learning-card__title { font-size: var(--lc-title-sp, 1rem) !important; }
  .learning-category-row__list .learning-card__action-btn { font-size: var(--lc-btn-sp, 0.95rem) !important; }
}
/* カードリストの直接の親要素が overflow を制限している場合の対策 */
.learning-category-row,
.learning-contents-wrap {
  overflow: visible !important;
  /* カテゴリ行が html/body 幅を超えて広がらないよう抑制 */
  max-width: 100%;
}

/* 学習中（今日やること）行 — 極太オレンジ立体枠デザイン */
.learning-category-row--in-progress {
  background: linear-gradient(180deg, #fff8f0 0%, #fff3e8 100%);
  /* 真四角（border-radius: 0）で極太オレンジ枠 */
  border: 8px solid #ff8c00;
  border-radius: 0;
  padding: 1.25rem 0.5rem 0.5rem;
  margin-bottom: 2.5rem;
  position: relative;
  /* 立体感: 右・下に濃いオレンジの「厚み」影、左・上にハイライト */
  box-shadow:
    /* 左・上のハイライト（手前面の光） */
    inset  4px  4px 0 rgba(255, 200, 100, 0.55),
    /* 右・下の内側影（奥まった感） */
    inset -4px -4px 0 rgba(160,  60,  0, 0.30),
    /* 右下の外側「厚み」（立体の側面） */
     8px  8px 0 #c05e00,
    /* さらに外側のドロップシャドウ */
    10px 12px 18px rgba(180, 80, 0, 0.35);
  overflow: visible;
}
.learning-category-row--in-progress .learning-category-row__title {
  color: #d4590a;
  font-weight: 800;
  padding-left: 1rem;
}
.learning-category-row--in-progress .learning-category-row__count {
  background: #fff;
  color: #d97706;
  border: 1px solid #f59e0b;
  font-weight: 700;
}
.learning-category-row--in-progress .learning-category-row__list {
  padding: 24px 1rem 28px;  /* 縦に余裕を持たせて選択中バッジ・浮き上がりを切らない */
}

/* カード（本のデザイン・16:9 画像主体） */
.learning-card {
  flex: 0 0 24rem;
  box-sizing: border-box;
  min-height: auto;
  background: var(--color-card-bg, #fff);
  /* 上面: 明るいハイライト縁、側面/底面は ::before/::after で描画 */
  border: 2px solid #b0bec5;
  border-top-color: #eceff1;
  border-left-color: #eceff1;
  border-radius: 6px;
  padding: 0;
  position: relative;
  /* 右面・底面の「厚み」をbox-shadowで表現 */
  box-shadow:
    /* 右面の影（奥行き側面） */
     6px  6px 0 #8fa0ae,
    /* 底面の追加影 */
     8px  8px 0 #6b8090,
    /* 全体をわずかに浮かせるドロップシャドウ */
     3px  3px 8px  rgba(0,0,0,0.18),
    10px 10px 20px rgba(0,0,0,0.12);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}

/* 旧・本のページカール装飾は新3Dボックスデザインでは非表示 */
.learning-card::before,
.learning-card::after {
  display: none;
}

.learning-card:hover {
  transform: translate(-2px, -3px);  /* 左上に浮き上がる */
  box-shadow:
     8px  8px 0 #8fa0ae,
    10px 10px 0 #6b8090,
     4px  4px 12px rgba(0,0,0,0.22),
    12px 14px 28px rgba(0,0,0,0.15);
}
.learning-card:active {
  transform: translate(2px, 2px);
  box-shadow:
     3px  3px 0 #8fa0ae,
     4px  4px 0 #6b8090,
     1px  1px 6px rgba(0,0,0,0.15);
  transition: transform 0.06s ease;
}

/* 本のタイトルエリア（小さめ） */
.learning-card__title {
  padding: 0.45rem 0.7rem 0.65rem;
  font-size: 1.23rem;   /* 0.82rem × 1.5 */
  line-height: 1.42;
  flex: 1;
  margin: 0;
  font-weight: 700;
  color: #2a2a2a;
  /* タイトルの行数に関わらずカード高さを揃えるため、常に3行分を確保 */
  height: calc(1.23rem * 1.42 * 3 + 0.45rem + 0.65rem);
  min-height: calc(1.23rem * 1.42 * 3 + 0.45rem + 0.65rem);
  font-family: 'Hiragino Mincho ProN', 'Yu Mincho', YuMincho, serif;
  letter-spacing: 0.01em;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;   /* 最大3行で省略 */
  overflow: hidden;
  box-sizing: content-box;
}

/* 本の「カバー」風サムネ - 16:9 で画像を主役に */
.learning-card__thumb {
  aspect-ratio: 16/9;
  background: linear-gradient(135deg, #ece5d8 0%, #d4cdbf 100%);
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}

/* 本のメタ情報（種別バッジ・PROバッジ） */
.learning-card__meta {
  display: flex;
  gap: 0.3rem;
  align-items: center;
  padding: 0.4rem 0.7rem 0;
  font-size: 0.64rem;
  color: var(--color-muted, #888);
}

.learning-card__thumb::after {
  /* サムネ下部に微かな影 → カードを浮き立たせる */
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 30%;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,0.08));
  pointer-events: none;
}
.learning-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.learning-card:hover .learning-card__thumb img {
  transform: scale(1.04);
}

.learning-card__paid {
  background: linear-gradient(135deg, #ffa726, #fb8c00);
  color: #fff;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  box-shadow: 0 1px 3px rgba(251, 140, 0, 0.3);
}

/* ═══════════════════════════════════════════════════
   カードアクションボタン（全幅・状態別）
   ═══════════════════════════════════════════════════ */

/* 旧バッジを非表示（完全削除より安全） */
.learning-card__badge:not(.learning-card__badge--bonus) {
  display: none;
}

/* ── 全幅アクションボタン（立体的・押せる物理ボタン） ──
   上面のハイライト → 側面の段差 → 下に落ちる影 の3層構成。
   :active で沈み込ませて押下感を出す。 */
.learning-card__action-btn {
  --btn-base: #1976d2;          /* 開く: 青（既定） */
  --btn-dark: #0d47a1;          /* 側面・縁の濃い色 */
  --btn-shadow: rgba(13, 71, 161, 0.45);

  position: relative;
  display: block;
  width: calc(100% - 16px);
  box-sizing: border-box;
  margin: 0 8px 10px;
  padding: .55rem .5rem;
  text-align: center;
  font-size: .88rem;
  font-weight: 800;
  letter-spacing: .04em;
  border-radius: 6px;
  cursor: pointer;
  border: none;
  color: #fff;
  text-shadow: none;  /* shadowによるぼやけを除去 */
  /* 表面の光沢グラデーション */
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.28) 0%,
      rgba(255, 255, 255, 0.08) 45%,
      rgba(0, 0, 0, 0.08) 100%
    ),
    var(--btn-base);
  /* 立体感の本体: 上面ハイライト + 下側面の濃い色（段差） + 落ち影 */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),       /* 上端の光 */
    inset 0 -2px 0 rgba(0, 0, 0, 0.20),            /* 下端の陰り */
    0 3px 0 var(--btn-dark),                       /* ボタンの厚み（側面） */
    0 5px 8px var(--btn-shadow);                   /* 床への落ち影 */
  transition:
    transform .08s ease,
    box-shadow .08s ease,
    filter .15s ease;
}
.learning-card__action-btn:hover {
  filter: brightness(1.06);
}
/* 押下時: 1px 沈んで厚みも薄くなる */
.learning-card__action-btn:active {
  transform: translateY(2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.30),
    inset 0 -1px 0 rgba(0, 0, 0, 0.18),
    0 1px 0 var(--btn-dark),
    0 2px 3px var(--btn-shadow);
}
/* キーボードフォーカス: アクセシブルな枠 */
.learning-card__action-btn:focus-visible {
  outline: 2px solid #fff;
  outline-offset: -4px;
}

/* 実行中: オレンジ（色だけ差し替え、立体感は共通） */
.learning-card__action-btn--in-progress {
  --btn-base: #ff8c00;
  --btn-dark: #c25e00;
  --btn-shadow: rgba(194, 94, 0, 0.45);
}
.learning-card--in_progress {
  outline: 3px solid #ff8c00 !important;
  outline-offset: 1px;
}
.learning-card--in_progress .learning-card__badge { display: none; }

/* 完了: 鮮やかな緑 */
.learning-card__action-btn--completed {
  --btn-base: #00c853;
  --btn-dark: #00952e;
  --btn-shadow: rgba(0, 149, 46, 0.50);
}
.learning-card--completed {
  outline: 3px solid #00c853 !important;
  outline-offset: 1px;
}
.learning-card--completed .learning-card__badge { display: none; }

/* ── 動画カード: 右上の再生ボタン ── */

/* 右上: 赤丸再生ボタン */
.learning-card__video-badge {
  position: absolute;
  top: 6px;
  right: 8px;
  z-index: 5;
  pointer-events: none;
}

/* 再生ボタン */
.learning-card__play-btn {
  display: block;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ff5a52 0%, #e53935 55%, #b71c1c 100%);
  box-shadow:
    0 0 0 2px #fff,
    0 2px 8px rgba(229, 57, 53, 0.55);
  position: relative;
}
.learning-card__play-btn::after {
  content: '';
  position: absolute;
  top: 50%; left: 56%;
  transform: translate(-50%, -50%);
  width: 0; height: 0;
  border-style: solid;
  border-width: 5px 0 5px 9px;
  border-color: transparent transparent transparent #fff;
}

.learning-card__badge {
  margin: 0 0.85rem 0.85rem;
  font-size: 0.68rem;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  background: #f1ede4;
  color: var(--color-muted, #888);
  align-self: flex-start;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.learning-card--in_progress .learning-card__badge {
  background: linear-gradient(135deg, #fdecc8, #f9c66b);
  color: #92560a;
  font-weight: 800;
  box-shadow: 0 2px 4px rgba(146, 86, 10, 0.20);
}

/* ── 完了済みカードの強調デザイン（border ではなく outline で各デザイン尊重） ─── */
.learning-card--completed {
  outline: 2px solid #43a047;
  outline-offset: 1px;
}
.learning-card--completed .learning-card__badge {
  background: linear-gradient(135deg, #43a047, #2e7d32);
  color: #fff;
  font-weight: 800;
  font-size: 0.82rem;
  padding: 0.4rem 1rem;
  box-shadow: 0 2px 6px rgba(67, 160, 71, 0.35);
  letter-spacing: 0.05em;
}
/* サムネイル左上に大きなチェックマークオーバーレイ */
.learning-card--completed .learning-card__thumb::before {
  content: '✓';
  position: absolute;
  top: 8px;
  left: 8px;
  right: auto;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, #43a047, #2e7d32);
  color: #fff;
  font-size: 1.4rem;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  box-shadow: 0 3px 8px rgba(0,0,0,0.25), 0 0 0 3px rgba(255,255,255,0.9);
  animation: completedPulse 2.5s ease-in-out infinite;
}
@keyframes completedPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.08); }
}
/* サムネ全体にうっすら緑のオーバーレイ */
.learning-card--completed .learning-card__thumb::after {
  background: linear-gradient(180deg, rgba(67, 160, 71, 0.05), rgba(67, 160, 71, 0.18));
}
/* タイトルにも完了感 */
.learning-card--completed .learning-card__title {
  color: #1b5e20;
}

/* ── お知らせ（新着3件） ───────────────────────── */
.learning-announcements {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: var(--radius, 12px);
  padding: 1.25rem 1.5rem;
  margin-bottom: 2rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.learning-announcements__head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 0.75rem;
}
.learning-announcements__title {
  font-size: 1.05rem; margin: 0; font-weight: 600;
}
.learning-announcements__more {
  font-size: 0.85rem; color: var(--color-primary, #43a047);
  text-decoration: none; font-weight: 500;
}
.learning-announcements__more:hover { text-decoration: underline; }
.learning-announcements__list {
  list-style: none; padding: 0; margin: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
}
.learning-announcements__item {
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
.learning-announcements__link {
  display: flex; gap: 1rem; align-items: baseline;
  padding: 0.85rem 0; text-decoration: none; color: inherit;
  transition: color 0.15s;
}
.learning-announcements__link:hover { color: var(--color-primary, #43a047); }
.learning-announcements__date {
  flex-shrink: 0;
  width: 8em;
  font-size: 0.8rem;
  color: var(--color-muted, #888);
  font-variant-numeric: tabular-nums;
}
.learning-announcements__item-title {
  font-weight: 500; line-height: 1.5;
}

@media (max-width: 600px) {
  .learning-announcements__link { flex-direction: column; gap: 0.2rem; }
  .learning-announcements__date { width: auto; }
}

/* ── お知らせ: 空状態 ─────────────────────────── */
.learning-announcements__empty {
  color: var(--color-muted, #888);
  font-size: 0.9rem;
  padding: 0.6rem 0;
  margin: 0;
}

/* ── 講義コンテンツ全体ラッパー ─────────────────── */
/* 「コンテンツ一覧へ戻る」ボタンのジャンプ先 */
#learning-contents-anchor {
  display: block;
  scroll-margin-top: 80px; /* ヘッダー分の余白 */
  outline: none;
}
.learning-contents-wrap {
  margin: 1.5rem 0;
}
.learning-contents-wrap__title {
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0 0 0.75rem;
}
.learning-contents-empty {
  background: #fafafa;
  border: 1px dashed rgba(0, 0, 0, 0.15);
  border-radius: 10px;
  padding: 1.5rem 1rem;
  text-align: center;
  color: var(--color-muted, #777);
}
.learning-contents-empty__msg  { margin: 0 0 0.4rem; font-weight: 600; color: #555; }
.learning-contents-empty__hint { margin: 0; font-size: 0.9rem; }
.learning-contents-empty__hint a { color: var(--color-primary, #43a047); text-decoration: underline; }

/* ── 復習セクション: 空状態 + CTA ─────────────── */
.learning-review-section__empty {
  background: #fafafa;
  border: 1px dashed rgba(0, 0, 0, 0.12);
  border-radius: 8px;
  padding: 1rem;
  text-align: center;
  margin: 0.75rem 0;
}
.learning-review-section__empty-msg  { margin: 0 0 0.3rem; font-weight: 600; color: #555; }
.learning-review-section__empty-hint { margin: 0; font-size: 0.85rem; color: var(--color-muted, #888); }

.learning-review-section__cta {
  margin-top: 0.85rem;
  text-align: center;
}
.learning-review-section__cta .learning-btn {
  display: inline-block;
  padding: 0.65rem 1.5rem;
  background: var(--color-primary, #43a047);
  color: #fff;
  text-decoration: none;
  border-radius: 6px;
  font-weight: 600;
  transition: opacity 0.15s;
}
.learning-review-section__cta .learning-btn:hover { opacity: 0.9; }

/* ── 学習中で「選択中」のカード（border ではなく outline で覆う・各デザインを尊重）─── */
.learning-card--active {
  outline: 3px solid #ffa000;
  outline-offset: 2px;
  position: relative;
  z-index: 2;
}
.learning-card--active::before {
  content: '👇 学習中';
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #ff9800, #f57c00);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(255, 152, 0, 0.4);
  z-index: 2;
  letter-spacing: 0.5px;
}
.learning-card--active:hover {
  transform: translateY(-8px) scale(1.03);
}

/* ── カテゴリ進捗率バー ───────────────────────── */
.learning-category-row__header {
  display: block;
  margin-bottom: 0.75rem;
}
.learning-category-row__header .learning-category-row__title {
  margin: 0 0 0.5rem 0;
  display: block;
}
.learning-category-row__progress {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 600px;
  padding-left: 0.25rem;
}
.learning-category-row__progress-bar {
  flex: 1;
  height: 12px;
  background: #ece5d8;
  border-radius: 999px;
  overflow: hidden;
  position: relative;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.08);
}
.learning-category-row__progress-fill {
  height: 100%;
  /* ビビッドな緑のグラデーション */
  background: linear-gradient(90deg, #00c853 0%, #00e676 50%, #4caf50 100%);
  border-radius: 999px;
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  min-width: 0;
  box-shadow: 0 1px 3px rgba(0, 200, 83, 0.4);
}
.learning-category-row__progress-text {
  font-size: 0.85rem;
  white-space: nowrap;
  color: #555;
  font-variant-numeric: tabular-nums;
}
.learning-category-row__progress-text strong {
  color: #00c853;
  font-size: 1.1rem;
  font-weight: 800;
}
.learning-category-row__progress-detail {
  font-size: 0.78rem;
  color: #888;
}

@media (max-width: 600px) {
  .learning-category-row__progress { max-width: 100%; }
  .learning-category-row__progress-detail { display: none; }
}

/* ── 復習ダイアログ ─────────────────────── */
.learning-review-dialog {
  border: none;
  border-radius: 12px;
  padding: 0;
  max-width: 600px;
  width: 90vw;
  box-shadow: 0 24px 64px rgba(0,0,0,0.30);
  background: #fff;
  overflow: hidden;
}
.learning-review-dialog::backdrop {
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(2px);
}
.learning-review-dialog__inner { padding: 0; }
.learning-review-dialog__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: linear-gradient(135deg, #00c853, #00e676);
  color: #fff;
}
.learning-review-dialog__title { margin: 0; font-size: 1.15rem; }
.learning-review-dialog__close {
  background: rgba(255,255,255,0.2);
  border: none;
  color: #fff;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 1.4rem;
  cursor: pointer;
  line-height: 1;
}
.learning-review-dialog__close:hover { background: rgba(255,255,255,0.35); }
.learning-review-dialog__progress {
  padding: 12px 20px;
  background: #f8f8f8;
  border-bottom: 1px solid #eee;
}
.learning-review-dialog__progress-text {
  display: block;
  font-size: 0.85rem;
  color: #666;
  margin-bottom: 6px;
  text-align: center;
}
.learning-review-dialog__progress-bar {
  height: 6px;
  background: #e0e0e0;
  border-radius: 999px;
  overflow: hidden;
}
.learning-review-dialog__progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #00c853, #00e676);
  border-radius: 999px;
  transition: width 0.4s ease;
  width: 0%;
}
.learning-review-dialog__body {
  padding: 24px 20px;
  min-height: 200px;
}
.learning-review-dialog__meta {
  font-size: 0.78rem;
  color: #888;
  margin-bottom: 8px;
}
.learning-review-dialog__q-title {
  font-size: 1.1rem;
  margin: 0 0 12px;
  font-weight: 700;
}
.learning-review-dialog__q-prompt {
  margin: 0 0 1.2rem;
  line-height: 1.7;
}
.learning-review-dialog__choices {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 1rem 0;
}
.learning-review-dialog__choice {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s;
}
.learning-review-dialog__choice:hover { border-color: #00c853; background: #f1f8e9; }
.learning-review-dialog__choice:has(input:checked) {
  border-color: #00c853;
  background: #e8f5e9;
  font-weight: 600;
}
.learning-review-dialog__feedback {
  padding: 12px 16px;
  border-radius: 8px;
  margin: 1rem 0;
  font-weight: 600;
}
.learning-review-dialog__feedback.is-correct {
  background: #e8f5e9;
  color: #1b5e20;
  border-left: 4px solid #00c853;
}
.learning-review-dialog__feedback.is-incorrect {
  background: #ffebee;
  color: #c62828;
  border-left: 4px solid #f44336;
}
.learning-review-dialog__actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 1rem;
}

/* ═══════════════════════════════════════════════════
   カードデザイン: 5 パターン
   body に learning-cards--{name} クラスで切替
   ═══════════════════════════════════════════════════ */

/* ── パターン 1: 📚 分厚い本（立体・3D奥行き） ── */
.learning-cards--book-thick .learning-card, .learning-card.learning-card--design-book-thick {
  flex: 0 0 24rem;
  background: var(--color-card-bg, #fff);
  border: 1px solid #d4dcec;
  border-left: 14px solid #1976d2;  /* 青の背表紙 */
  border-radius: 2px 8px 8px 2px;
  position: relative;
  /* 分厚い本のページの重なりを表現（複数オフセット）*/
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.85),
    inset -3px 0 0 rgba(0, 0, 0, 0.04),
    inset 0 -3px 0 rgba(0, 0, 0, 0.10),
    /* 紙の厚みを示す右側の積層線 */
    1px 1px 0 #f0f4fa,
    2px 2px 0 #e2eaf4,
    3px 3px 0 #f0f4fa,
    4px 4px 0 #e2eaf4,
    5px 5px 0 #f0f4fa,
    6px 6px 0 #e2eaf4,
    /* 本の影 */
    8px 10px 0 rgba(25, 60, 110, 0.15),
    14px 16px 0 rgba(25, 60, 110, 0.08),
    0 12px 24px rgba(30, 60, 100, 0.18),
    0 24px 40px -8px rgba(30, 60, 100, 0.24);
}
.learning-cards--book-thick .learning-card::before {
  /* 右上のページめくりカール */
  content: '';
  position: absolute; top: 0; right: 0;
  width: 22px; height: 22px;
  background: linear-gradient(225deg, transparent 50%, rgba(0,0,0,0.06) 50%, rgba(0,0,0,0.14) 100%);
  border-bottom-left-radius: 4px;
  pointer-events: none; z-index: 2;
}
.learning-cards--book-thick .learning-card::after {
  /* 右端のページ重なり線 */
  content: '';
  position: absolute; top: 6px; bottom: 6px; right: 2px; width: 4px;
  background:
    linear-gradient(180deg, transparent, rgba(0,0,0,0.04) 20%, rgba(0,0,0,0.10) 50%, rgba(0,0,0,0.04) 80%, transparent),
    repeating-linear-gradient(0deg, rgba(0,0,0,0.04) 0 1px, transparent 1px 3px);
  pointer-events: none; z-index: 1;
}
.learning-cards--book-thick .learning-card:hover {
  transform: scale(1.04);
}

/* ── パターン 2: 📖 本（シンプルな書籍風） ── */
.learning-cards--book .learning-card, .learning-card.learning-card--design-book {
  flex: 0 0 24rem;
  background: var(--color-card-bg, #fff);
  border: 1px solid #d4dcec;
  border-left: 6px solid #1976d2;  /* 青の背表紙 */
  border-radius: 2px 6px 6px 2px;
  position: relative;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.85),
    inset -2px 0 0 rgba(0, 0, 0, 0.03),
    inset 0 -2px 0 rgba(0, 0, 0, 0.08),
    0 2px 4px rgba(0, 0, 0, 0.10),
    0 6px 10px -2px rgba(30, 60, 100, 0.18),
    0 12px 18px -6px rgba(30, 60, 100, 0.12);
}
.learning-cards--book .learning-card::after {
  content: ''; position: absolute; top: 6px; bottom: 6px; right: 2px; width: 2px;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,0.08) 50%, transparent);
  pointer-events: none;
}

/* ── パターン 3: 🟦 フラット（モダン・ミニマル） ── */
.learning-cards--flat .learning-card, .learning-card.learning-card--design-flat {
  flex: 0 0 24rem;
  background: var(--color-card-bg, #fff);
  border: 2px solid #e0e0e0;
  border-radius: 4px;
  box-shadow: none;
  position: relative;
  transition: all 0.15s ease;
}
.learning-cards--flat .learning-card:hover {
  border-color: #1976d2;
  background: #fafbff;
  transform: none;
  box-shadow: 0 0 0 4px rgba(25, 118, 210, 0.10);
}
.learning-cards--flat .learning-card::before,
.learning-cards--flat .learning-card::after { display: none; }

/* ── パターン 4: 🔮 ガラス（半透明・モダン） ── */
.learning-cards--glass .learning-card, .learning-card.learning-card--design-glass {
  flex: 0 0 24rem;
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 16px;
  position: relative;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 8px 32px rgba(31, 38, 135, 0.15),
    0 1px 2px rgba(0, 0, 0, 0.05);
}
.learning-cards--glass .learning-card::before,
.learning-cards--glass .learning-card::after { display: none; }
.learning-cards--glass .learning-card:hover {
  background: rgba(255, 255, 255, 0.85);
  transform: translateY(-4px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 16px 48px rgba(31, 38, 135, 0.22),
    0 2px 4px rgba(0, 0, 0, 0.06);
}

/* ── パターン 5: 📄 紙カード（柔らかな質感） ── */
.learning-cards--paper .learning-card, .learning-card.learning-card--design-paper {
  flex: 0 0 24rem;
  background:
    linear-gradient(135deg, #fffef9 0%, #fefcf3 100%);
  border: none;
  border-radius: 6px;
  position: relative;
  /* 紙のテクスチャ風影 */
  box-shadow:
    0 1px 1px rgba(0,0,0,0.06),
    0 2px 5px rgba(0,0,0,0.08),
    0 6px 12px rgba(0,0,0,0.10),
    0 12px 24px -4px rgba(0,0,0,0.10);
  /* 紙のひっかかり感（端のテクスチャ） */
  background-image:
    radial-gradient(ellipse at top, rgba(0,0,0,0) 0%, rgba(139, 109, 60, 0.04) 100%);
}
.learning-cards--paper .learning-card::before,
.learning-cards--paper .learning-card::after { display: none; }
.learning-cards--paper .learning-card:hover {
  transform: scale(1.03);
  box-shadow:
    0 2px 2px rgba(0,0,0,0.08),
    0 6px 12px rgba(0,0,0,0.12),
    0 16px 32px rgba(0,0,0,0.14);
}

/* ═══════════════════════════════════════════════════
/* ── パターン 6: 🧊 完全立方体（3Dキューブ） ── */
.learning-cards--cube .learning-card {
  flex: 0 0 24rem;
  background: var(--color-card-bg, #fff);
  border: none;
  border-radius: 4px;
  position: relative;
  -webkit-font-smoothing: subpixel-antialiased;
  -moz-osx-font-smoothing: auto;
  /* 立方体の側面と底面を box-shadow で精密に表現（青系） */
  box-shadow:
    /* 内側ハイライト（上面光） */
    inset 0 3px 0 rgba(255, 255, 255, 0.95),
    inset 0 -3px 0 rgba(0, 0, 0, 0.12),
    inset 3px 0 0 rgba(255, 255, 255, 0.3),
    inset -3px 0 0 rgba(0, 0, 0, 0.05),
    /* 立方体の側面 (青系で重ねる) */
    1px 1px 0 rgba(120, 144, 180, 0.95),
    2px 2px 0 rgba(115, 138, 175, 0.92),
    3px 3px 0 rgba(110, 132, 170, 0.90),
    4px 4px 0 rgba(105, 128, 165, 0.88),
    5px 5px 0 rgba(100, 122, 160, 0.86),
    6px 6px 0 rgba(95, 118, 155, 0.84),
    7px 7px 0 rgba(90, 114, 150, 0.82),
    8px 8px 0 rgba(85, 110, 145, 0.80),
    9px 9px 0 rgba(80, 105, 140, 0.78),
    10px 10px 0 rgba(75, 100, 135, 0.76),
    /* 落ちる影 */
    14px 16px 24px rgba(30, 60, 110, 0.30),
    20px 28px 48px -8px rgba(30, 60, 110, 0.38);
}
.learning-cards--cube .learning-card::before,
.learning-cards--cube .learning-card::after { display: none; }
.learning-cards--cube .learning-card:hover {
  transform: translate(-4px, -8px);
  box-shadow:
    inset 0 3px 0 rgba(255, 255, 255, 0.95),
    inset 0 -3px 0 rgba(0, 0, 0, 0.12),
    inset 3px 0 0 rgba(255, 255, 255, 0.3),
    inset -3px 0 0 rgba(0, 0, 0, 0.05),
    1px 1px 0 rgba(120, 144, 180, 0.95),
    3px 3px 0 rgba(115, 138, 175, 0.92),
    5px 5px 0 rgba(110, 132, 170, 0.89),
    7px 7px 0 rgba(105, 128, 165, 0.86),
    9px 9px 0 rgba(100, 122, 160, 0.83),
    11px 11px 0 rgba(95, 118, 155, 0.80),
    13px 13px 0 rgba(90, 114, 150, 0.77),
    15px 15px 0 rgba(85, 110, 145, 0.74),
    17px 17px 0 rgba(80, 105, 140, 0.71),
    19px 19px 0 rgba(75, 100, 135, 0.68),
    22px 24px 36px rgba(30, 60, 110, 0.36),
    32px 40px 64px -8px rgba(30, 60, 110, 0.42);
}

/* ── 立方体カード: 受講中・完了済みでも立方体を維持 ── */
.learning-cards--cube .learning-card--active,
.learning-cards--cube .learning-card--in_progress,
.learning-cards--cube .learning-card--completed {
  border-radius: 4px !important;
}
/* 受講中/完了の装飾は outline のみ（::before の矩形塗りは使わない＝塗りつぶしバグ防止） */
.learning-cards--cube .learning-card--active::before,
.learning-cards--cube .learning-card--in_progress::before {
  display: none !important;
}
.learning-cards--cube .learning-card--completed::before {
  display: none !important;
}


/* ── パターン 7: 🃏 ダークトレカ（TCG・ホログラム風） ── */
.learning-cards--tcg-dark .learning-card, .learning-card.learning-card--design-tcg-dark {
  flex: 0 0 24rem;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(120,80,255,0.18) 0%, transparent 60%),
    linear-gradient(160deg, #1a1035 0%, #0d0820 100%);
  border: 2px solid transparent;
  border-radius: 12px;
  position: relative;
  box-shadow:
    0 0 0 1px rgba(140,100,255,0.4),
    0 6px 20px rgba(80,40,180,0.4),
    0 2px 4px rgba(0,0,0,0.6);
  transition: transform .25s ease, box-shadow .25s ease;
  overflow: hidden;
}
/* ホログラムシマー */
.learning-cards--tcg-dark .learning-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    125deg,
    transparent 30%,
    rgba(160,120,255,0.12) 45%,
    rgba(80,200,255,0.12) 55%,
    transparent 70%
  );
  background-size: 200% 200%;
  animation: tcgShimmer 3s ease-in-out infinite;
  z-index: 1;
  pointer-events: none;
  border-radius: inherit;
}
/* レアリティライン（左端） */
.learning-cards--tcg-dark .learning-card::after {
  content: '';
  position: absolute;
  top: 10%; bottom: 10%; left: 0;
  width: 3px;
  background: linear-gradient(to bottom, #a855f7, #06b6d4, #a855f7);
  border-radius: 2px;
  z-index: 2;
  pointer-events: none;
}
@keyframes tcgShimmer {
  0%,100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}
.learning-cards--tcg-dark .learning-card .learning-card__title { color: #e2d9ff; }
.learning-cards--tcg-dark .learning-card .learning-card__meta  { color: #a5b4fc; }
.learning-cards--tcg-dark .learning-card:hover {
  transform: scale(1.04);
  box-shadow:
    0 0 0 1px rgba(168,85,247,0.7),
    0 0 18px rgba(168,85,247,0.5),
    0 12px 28px rgba(80,40,180,0.5);
}

/* ── パターン 8: 🌸 プレミアムトレカ（パステルレア） ── */
.learning-cards--tcg-pastel .learning-card, .learning-card.learning-card--design-tcg-pastel {
  flex: 0 0 24rem;
  background: linear-gradient(145deg, #fff5fb 0%, #fce8ff 50%, #e8f3ff 100%);
  border: 2px solid transparent;
  border-radius: 14px;
  position: relative;
  box-shadow:
    0 0 0 2px rgba(220,160,255,0.45),
    0 4px 14px rgba(180,100,230,0.2),
    0 10px 24px rgba(100,150,255,0.15);
  transition: transform .25s ease, box-shadow .25s ease;
  overflow: hidden;
}
/* パステルホログラム */
.learning-cards--tcg-pastel .learning-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    115deg,
    transparent 25%,
    rgba(255,180,230,0.2) 40%,
    rgba(180,210,255,0.2) 55%,
    rgba(200,255,220,0.15) 65%,
    transparent 75%
  );
  background-size: 200% 200%;
  animation: pastelShimmer 4s ease-in-out infinite;
  z-index: 1;
  pointer-events: none;
  border-radius: inherit;
}
@keyframes pastelShimmer {
  0%,100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}
/* 右上スター */
.learning-cards--tcg-pastel .learning-card::after {
  content: '✦';
  position: absolute;
  top: 7px; right: 9px;
  font-size: 18px;
  color: rgba(220,130,255,0.85);
  text-shadow: 0 0 6px rgba(220,130,255,0.6);
  z-index: 2;
  pointer-events: none;
}
.learning-cards--tcg-pastel .learning-card .learning-card__title { color: #4a2060; }
.learning-cards--tcg-pastel .learning-card:hover {
  transform: scale(1.04);
  box-shadow:
    0 0 0 2px rgba(220,130,255,0.7),
    0 0 20px rgba(220,130,255,0.35),
    0 12px 30px rgba(140,100,255,0.25);
}

/* ── パターン 8: 🪵 木製パネル ── */
.learning-cards--wood .learning-card, .learning-card.learning-card--design-wood {
  flex: 0 0 24rem;
  background:
    linear-gradient(135deg, #d4a574 0%, #c4925f 100%);
  background-image:
    /* 木目テクスチャ */
    repeating-linear-gradient(90deg, rgba(0,0,0,0) 0px, rgba(0,0,0,0.04) 2px, rgba(0,0,0,0) 4px),
    linear-gradient(135deg, #d4a574 0%, #c4925f 100%);
  border: 2px solid #8b5a2b;
  border-radius: 6px;
  position: relative;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.25),
    inset 0 -2px 0 rgba(0, 0, 0, 0.20),
    0 3px 6px rgba(101, 67, 33, 0.30),
    0 8px 16px rgba(101, 67, 33, 0.20);
}
.learning-cards--wood .learning-card::before,
.learning-cards--wood .learning-card::after { display: none; }
.learning-cards--wood .learning-card .learning-card__title { color: #3e2723; }

/* ── パターン 9: 🎴 トレカ（金縁カードゲーム風） ── */
.learning-cards--card-game .learning-card, .learning-card.learning-card--design-card-game {
  flex: 0 0 24rem;
  background:
    linear-gradient(135deg, #fff 0%, #fffbe6 100%);
  border: 3px solid;
  border-image: linear-gradient(135deg, #ffd700, #ffec80, #c79100, #ffd700) 1;
  border-radius: 10px;
  position: relative;
  box-shadow:
    inset 0 0 0 2px rgba(255, 215, 0, 0.3),
    0 0 0 1px rgba(199, 145, 0, 0.4),
    0 4px 12px rgba(199, 145, 0, 0.30),
    0 12px 24px rgba(120, 80, 0, 0.20);
}
.learning-cards--card-game .learning-card::before {
  /* 金色の輝き */
  content: '★';
  position: absolute;
  top: 8px; right: 8px;
  font-size: 22px;
  color: #ffc107;
  filter: drop-shadow(0 0 4px rgba(255, 215, 0, 0.8));
  z-index: 2;
}
.learning-cards--card-game .learning-card::after { display: none; }
.learning-cards--card-game .learning-card:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow:
    inset 0 0 0 2px rgba(255, 215, 0, 0.5),
    0 0 0 1px rgba(199, 145, 0, 0.6),
    0 8px 20px rgba(199, 145, 0, 0.40),
    0 20px 40px rgba(120, 80, 0, 0.30);
}

/* ── パターン 10: ⚪ ミニマル ── */
.learning-cards--minimal .learning-card, .learning-card.learning-card--design-minimal {
  flex: 0 0 24rem;
  background: var(--color-card-bg, #fff);
  border: 1px solid #f0f0f0;
  border-radius: 0;
  box-shadow: none;
  position: relative;
  transition: all 0.2s ease;
}
.learning-cards--minimal .learning-card::before,
.learning-cards--minimal .learning-card::after { display: none; }
.learning-cards--minimal .learning-card:hover {
  border-color: #333;
  background: #fafafa;
}

/* ── パターン 11: 🌷 フローラル（女性向け・花柄・上品） ── */
.learning-cards--floral .learning-card, .learning-card.learning-card--design-floral {
  flex: 0 0 24rem;
  background: linear-gradient(150deg, #fff8f9 0%, #fef0f5 50%, #fce8ef 100%);
  border: 1.5px solid rgba(240,160,180,0.5);
  border-radius: 16px;
  position: relative;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.9),
    0 2px 8px rgba(230,100,140,0.12),
    0 8px 20px rgba(200,80,120,0.1);
  transition: transform .25s ease, box-shadow .25s ease;
  overflow: hidden;
}
/* 花柄の装飾（角に小さな花） */
.learning-cards--floral .learning-card::before {
  content: '🌸';
  position: absolute;
  bottom: 8px; right: 10px;
  font-size: 1.6rem;
  opacity: 0.22;
  z-index: 1;
  pointer-events: none;
  line-height: 1;
}
/* 上部ピンクラインのアクセント */
.learning-cards--floral .learning-card::after {
  content: '';
  position: absolute;
  top: 0; left: 10%; right: 10%;
  height: 3px;
  background: linear-gradient(to right, transparent, #f48fb1, #ce93d8, #f48fb1, transparent);
  border-radius: 0 0 3px 3px;
  z-index: 2;
  pointer-events: none;
}
.learning-cards--floral .learning-card .learning-card__title { color: #6d1b3a; }
.learning-cards--floral .learning-card .learning-card__meta  { color: #ad5070; }
.learning-cards--floral .learning-card:hover {
  transform: scale(1.03);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.9),
    0 6px 18px rgba(230,100,140,0.22),
    0 16px 32px rgba(200,80,120,0.18);
  border-color: rgba(240,120,160,0.7);
}

/* ── パターン 12: 🍵 和紙（女性向け・和モダン・落ち着き） ── */
.learning-cards--washi .learning-card, .learning-card.learning-card--design-washi {
  flex: 0 0 24rem;
  background:
    /* 和紙の微妙なテクスチャ */
    repeating-linear-gradient(
      0deg,
      transparent 0px, transparent 3px,
      rgba(180,140,80,0.04) 3px, rgba(180,140,80,0.04) 4px
    ),
    repeating-linear-gradient(
      90deg,
      transparent 0px, transparent 5px,
      rgba(180,140,80,0.03) 5px, rgba(180,140,80,0.03) 6px
    ),
    linear-gradient(155deg, #fdf8ee 0%, #f5ecda 100%);
  border: 1.5px solid rgba(180,140,80,0.35);
  border-radius: 8px;
  position: relative;
  box-shadow:
    inset 0 0 0 6px rgba(210,175,100,0.08),
    0 2px 6px rgba(140,100,40,0.15),
    0 8px 18px rgba(140,100,40,0.1);
  transition: transform .25s ease, box-shadow .25s ease;
  overflow: hidden;
}
/* 朱印風の右上スタンプ */
.learning-cards--washi .learning-card::before {
  content: '';
  position: absolute;
  top: 10px; right: 10px;
  width: 28px; height: 28px;
  border: 2px solid rgba(180,50,50,0.35);
  border-radius: 50%;
  z-index: 2;
  pointer-events: none;
}
/* 左縦ライン（冊子感） */
.learning-cards--washi .learning-card::after {
  content: '';
  position: absolute;
  top: 8%; bottom: 8%; left: 0;
  width: 4px;
  background: linear-gradient(to bottom, transparent, rgba(180,140,80,0.3) 20%, rgba(180,140,80,0.3) 80%, transparent);
  z-index: 2;
  pointer-events: none;
}
.learning-cards--washi .learning-card .learning-card__title { color: #3d2b0e; }
.learning-cards--washi .learning-card .learning-card__meta  { color: #7a5c2e; }
.learning-cards--washi .learning-card:hover {
  transform: scale(1.03);
  box-shadow:
    inset 0 0 0 6px rgba(210,175,100,0.12),
    0 6px 16px rgba(140,100,40,0.22),
    0 14px 28px rgba(140,100,40,0.15);
  border-color: rgba(180,140,80,0.55);
}

/* ── パターン 14: 🎬 動画プレイヤー風 ── */
.learning-cards--video-play .learning-card, .learning-card.learning-card--design-video-play {
  flex: 0 0 24rem;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  position: relative;
  box-shadow: 0 2px 8px rgba(0,0,0,.12), 0 6px 16px rgba(0,0,0,.08);
  transition: transform .25s ease, box-shadow .25s ease;
  overflow: hidden;
}
.learning-cards--video-play .learning-card::before {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(to right, #e53935 30%, rgba(255,255,255,.15) 30%);
  z-index: 4; pointer-events: none;
}
.learning-cards--video-play .learning-card::after {
  content: '▶';
  position: absolute;
  bottom: 12px; right: 14px;
  font-size: 1rem; color: rgba(255,255,255,.85);
  background: #e53935;
  width: 32px; height: 32px; border-radius: 50%;
  line-height: 32px; text-align: center;
  z-index: 4; pointer-events: none;
  backdrop-filter: blur(4px);
  box-shadow: 0 2px 6px rgba(0,0,0,.4);
  padding-left: 2px;
}
.learning-cards--video-play .learning-card .learning-card__title, .learning-card.learning-card--design-video-play .learning-card__title { color: #111; }
.learning-cards--video-play .learning-card .learning-card__meta, .learning-card.learning-card--design-video-play .learning-card__meta  { color: #555; }
.learning-cards--video-play .learning-card .learning-card__badge, .learning-card.learning-card--design-video-play .learning-card__badge { color: #666; }
/* タイトル・メタ・バッジのパディング調整 */
.learning-cards--video-play .learning-card .learning-card__meta {
  padding: .3rem .6rem .1rem;
}
.learning-cards--video-play .learning-card .learning-card__title {
  padding: 0 .6rem .2rem;
}
.learning-cards--video-play .learning-card .learning-card__badge {
  padding: .1rem .6rem .4rem;
}
.learning-cards--video-play .learning-card:hover, .learning-card.learning-card--design-video-play:hover {
  transform: scale(1.04);
  box-shadow: 0 6px 18px rgba(0,0,0,.18), 0 12px 28px rgba(0,0,0,.12);
}


/* ─ 動画再生演出（video エフェクト） ─ */
.lvid-bg {
  position: fixed; inset: 0; z-index: 9990;
  pointer-events: none; background: rgba(0,0,0,0);
  animation: lvidBgIn .22s ease forwards;
}
@keyframes lvidBgIn { to { background: rgba(0,0,0,.92); } }
.lvid-player {
  position: fixed; z-index: 9999; pointer-events: none;
  /* FLIP: 最終(拡大後)サイズでレイアウトし、開始時のみカード位置へ縮小→等倍へ戻す。
     これにより画像は最終サイズで一度だけ描画され、拡大によるぼやけが出ない。 */
  top: var(--lvt); left: var(--lvl);
  width: var(--lvw); height: var(--lvh);
  border-radius: 10px;
  background: #000; overflow: hidden;
  transform-origin: center center;
  animation: lvidPlayerExpand .24s cubic-bezier(.22,1,.36,1) forwards;
  box-shadow: 0 16px 40px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.15);
}
@keyframes lvidPlayerExpand {
  from {
    transform: translate(var(--lv-tx,0), var(--lv-ty,0)) scale(var(--lv-sx,.3));
    box-shadow: 0 0 0 1px rgba(255,255,255,.1);
  }
  to {
    transform: translate(0,0) scale(1);
  }
}
.lvid-player__thumb { position: absolute; inset: 0; overflow: hidden; opacity: 1; }
.lvid-player__thumb img {
  width: 100%; height: 100%; object-fit: cover;
  image-rendering: auto;
}
.lvid-player__btn {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center; z-index: 5;
  /* アイキャッチをはっきり見せるため、ボタン背後に薄い暗幕だけ */
  background: rgba(0,0,0,0.22);
}
.lvid-player__btn::before {
  content: '▶'; font-size: 3.5rem; color: #fff;
  background: rgba(229,57,53,.95);
  width: 88px; height: 88px; border-radius: 50%;
  line-height: 88px; text-align: center; padding-left: 8px;
  box-shadow: 0 4px 28px rgba(229,57,53,.7), 0 0 0 4px rgba(255,255,255,.3);
  animation: lvidBtnIn .22s cubic-bezier(.22,1,.36,1) forwards;
}
@keyframes lvidBtnIn { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.lvid-player__bar {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 8px 12px;
  background: linear-gradient(to top, rgba(0,0,0,.8), transparent);
  z-index: 6; display: flex; flex-direction: column; gap: 4px;
}
.lvid-player__bar-track {
  height: 3px; background: rgba(255,255,255,.2); border-radius: 2px; overflow: hidden;
}
.lvid-player__bar-track::after {
  content: ''; display: block; height: 100%; width: 0%;
  background: #e53935;
  animation: lvidTrack .27s ease .1s forwards;
}
@keyframes lvidTrack { to { width: 35%; } }
.lvid-player__bar-title {
  font-size: .7rem; color: rgba(255,255,255,.85);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600;
}
.learning-card.is-effect-video {
  visibility: hidden !important;
  pointer-events: none !important;
}

/* ═══════════════════════════════════════════════════
   カードクリック演出: カードがその場で本のページをめくるように開く（0.6秒）

   構造（JS がすべて body に直接追加）:
     .lbook-bg       ← 全画面暗転
     .lbook-wrap     ← カードと同じ位置・サイズ。fixed。画面中央へ移動+拡大
       .lbook-inner  ← 裏側（記事の抜粋）。表紙がめくれるまで hidden
       .lbook-cover  ← 表紙（カードの複製）。左軸でめくれる
                        + 本らしい縁取り（背表紙線・ページ積み・金縁）
   ═══════════════════════════════════════════════════ */

/* 全画面暗転 */
.lbook-bg {
  position: fixed;
  inset: 0;
  z-index: 9990;
  pointer-events: none;
  background: rgba(0,0,0,0);
  animation: lbookDim .42s ease forwards;
}
@keyframes lbookDim {
  to { background: rgba(0,0,0,.52); }
}

/* カードと同じ位置のラッパー → 画面中央へ移動・拡大 */
.lbook-wrap {
  position: fixed;
  z-index: 9999;
  pointer-events: none;
  top:  var(--lbt);
  left: var(--lbl);
  width:  var(--lbw);
  height: var(--lbh);
  perspective: 1600px;
  animation: lbookFly .18s cubic-bezier(.32,1,.40,1) forwards;
}
@keyframes lbookFly {
  from { transform: translate(0,0) scale(1); }
  to {
    transform:
      translate(
        calc(50vw - var(--lbl) - var(--lbw)/2),
        calc(50vh - var(--lbt) - var(--lbh)/2)
      )
      scale(var(--lbs, 1.7));
    filter: drop-shadow(0 30px 55px rgba(0,0,0,.65));
  }
}

/* 裏側: 表紙がめくれた後に現れる記事抜粋 */
.lbook-inner {
  position: absolute;
  inset: 0;
  border-radius: var(--lbr, 8px);
  background: linear-gradient(155deg, #fffef8 0%, #f5ecd8 100%);
  /* ページ積み（小口）の縦線をボーダーで表現 */
  border-right: 6px solid #e8d8b0;
  box-shadow:
    inset -3px 0 0 #d4c08a,    /* 小口の最前面 */
    inset -6px 0 0 #c8b070,    /* 小口の影 */
    inset  3px 0 8px -3px rgba(0,0,0,.12); /* 背表紙側の落ち影 */
  padding: 1rem 1rem 1rem 1.2rem;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .5rem;
  opacity: 0;
  animation: lbookInnerShow .42s ease forwards;
}
@keyframes lbookInnerShow {
  0%,42% { opacity: 0; }
  75%    { opacity: 1; }
  100%   { opacity: 1; }
}
.lbook-inner__label {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .08em;
  color: #9a6c20;
  text-transform: uppercase;
}
.lbook-inner__title {
  font-size: .9rem;
  font-weight: 700;
  color: #2a1e08;
  line-height: 1.4;
  margin: 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.lbook-inner__excerpt {
  font-size: .76rem;
  line-height: 1.72;
  color: #4a3a1a;
  margin: 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
}

/* ══ 表紙（.lbook-cover）
   カードの innerHTML をコピーしたもの。
   本らしい縁取りを before/after で追加する。
   ══ */
.lbook-cover {
  position: absolute;
  inset: 0;
  border-radius: var(--lbr, 8px);
  transform-origin: left center;
  transform-style: preserve-3d;
  animation: lbookPeel .85s cubic-bezier(.45,0,.25,1) forwards;
  overflow: hidden;
}

/* 背表紙ライン（左端の縦線） */
.lbook-cover::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 10px;
  background: linear-gradient(
    to right,
    rgba(0,0,0,.45) 0%,
    rgba(0,0,0,.20) 40%,
    transparent 100%
  );
  z-index: 4;
  pointer-events: none;
  border-radius: inherit 0 0 inherit;
}

/* 金枠 + 右端（小口）ページ積み線 */
.lbook-cover::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow:
    inset 0 0 0 2px rgba(210, 168, 40, 0.65),    /* 金枠 */
    inset 0 0 0 4px rgba(255, 235, 150, 0.18),   /* 金枠内側光 */
    inset -4px 0 0 rgba(200, 175, 90, 0.5),      /* 小口線 */
    inset -7px 0 0 rgba(180, 150, 60, 0.3),      /* 小口線 2 */
    inset -10px 0 0 rgba(160, 130, 40, 0.15);    /* 小口線 3 */
  z-index: 5;
  pointer-events: none;
}

/* 表紙が左軸を支点に右へ 0.6 秒でめくれる */
@keyframes lbookPeel {
  0%,40% { transform: perspective(1600px) rotateY(0deg); }
  100%   { transform: perspective(1600px) rotateY(-172deg); }
}

/* 元のカードは演出中に非表示 */
.learning-card.is-effect-book {
  visibility: hidden !important;
  pointer-events: none !important;
}

/* ═══════════════════════════════════════════════════
   ダッシュボード レイアウト
   上部: 左 2/3 (stats + 復習) | 右 1/3 (カレンダー)
   下部: 講義 (フル幅) → スタンプ (フル幅)
   ═══════════════════════════════════════════════════ */
.learning-dashboard__top-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 2rem;
  margin: 1.5rem 0;
  align-items: start;
}
.learning-dashboard__top-main,
.learning-dashboard__top-side {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* スタンプ・カレンダーは中で .learning-collection / .learning-calendar が出力される */
.learning-dashboard__top-side .learning-calendar {
  margin: 0;
  width: 100%;
}

/* ══ 折りたたみカレンダー ══ */
.learning-calendar-wrap {
  border: 1px solid rgba(0,0,0,.1);
  border-radius: 10px;
  overflow: hidden;
  background: linear-gradient(155deg, #f8f9ff, #f0f4ff);
  width: 100%;
}
.learning-calendar-wrap__summary {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .85rem 1rem;
  cursor: pointer;
  list-style: none;
  background: linear-gradient(180deg, #ffffff 0%, #eef2ff 100%);
  border-bottom: 1px solid transparent;
  transition: background .15s ease;
  user-select: none;
}
.learning-calendar-wrap__summary:hover {
  background: linear-gradient(180deg, #ffffff 0%, #e0e7ff 100%);
}
.learning-calendar-wrap[open] .learning-calendar-wrap__summary {
  border-bottom-color: rgba(0,0,0,.07);
}
.learning-calendar-wrap__summary::-webkit-details-marker { display: none; }
.learning-calendar-wrap__summary::marker { display: none; content: ''; }
.learning-calendar-wrap__icon { font-size: 1.1rem; line-height: 1; }
.learning-calendar-wrap__title {
  font-weight: 800;
  font-size: 1rem;
  color: #1a1560;
}
.learning-calendar-wrap__toggle-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(180deg, #4f6dff 0%, #3949ab 100%);
  color: #fff;
  font-size: .85rem;
  font-weight: 900;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.35),
    inset 0 -2px 0 rgba(0,0,0,.18),
    0 2px 0 #283593,
    0 3px 6px rgba(57,73,171,.4);
  transition: transform .25s ease;
  margin-left: auto;
}
.learning-calendar-wrap[open] .learning-calendar-wrap__toggle-icon {
  transform: rotate(90deg);
}
.learning-calendar-wrap .learning-calendar {
  margin: 0;
  border-radius: 0;
  border: none;
}

/* サイドバー（右1/3）のカレンダーをコンパクトに */
.learning-dashboard__top-side .learning-calendar__title {
  font-size: 1.1rem;
}
.learning-dashboard__top-side .learning-calendar__legend {
  font-size: 0.72rem;
  padding: 8px 10px;
  gap: 4px 6px;
}
.learning-dashboard__top-side .learning-calendar__legend-label {
  display: block;
  width: 100%;
  margin-bottom: 2px;
}
.learning-dashboard__top-side .learning-calendar__cell {
  height: 50px;
  padding: 3px;
}
.learning-dashboard__top-side .learning-calendar__day {
  font-size: 0.78rem;
}
.learning-dashboard__top-side .learning-calendar__grade {
  font-size: 0.95rem;
  margin-top: 2px;
}
.learning-dashboard__top-side .learning-calendar__weekday {
  font-size: 0.7rem;
  padding: 3px 0;
}
.learning-dashboard__top-side .learning-calendar__month-row .learning-calendar__month-tag {
  font-size: 0.8rem;
  padding: 4px 10px;
}
.learning-dashboard__top-side .learning-calendar__cell.is-today::before {
  font-size: 0.55rem;
  padding: 0 5px;
  top: -7px;
}

/* タブレット以下: 1カラムへ */
@media (max-width: 980px) {
  .learning-dashboard__top-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .learning-dashboard__top-side .learning-calendar__cell {
    height: 60px;
  }
}

/* スマホ: カードをより小さく */
@media (max-width: 480px) {
  .learning-card,
  .learning-card-wrapper .learning-card {
    flex: 0 0 17rem !important;
  }
  .learning-card-3d-wrap {
    flex: 0 0 auto;
  }
  .learning-card.learning-card--bonus {
    flex: 0 0 17rem !important;
    width: 8rem;
  }
  .learning-category-row__list {
    gap: 1.2rem;
    padding: 12px 12px 70px;
  }
  .learning-card__title {
    font-size: 0.68rem;
    padding: 0.3rem 0.45rem 0.45rem;
    height: calc(0.68rem * 1.42 * 3 + 0.3rem + 0.45rem);
    min-height: calc(0.68rem * 1.42 * 3 + 0.3rem + 0.45rem);
    -webkit-line-clamp: 3;
  }
  .learning-card__meta {
    padding: 0.25rem 0.45rem 0;
    font-size: 0.56rem;
  }
  .learning-card__action-btn {
    font-size: 0.95rem;   /* スマホでも読みやすいサイズに */
    padding: 0.45rem 0.35rem;
    margin: 0 5px 6px;
    width: calc(100% - 10px);
  }
}

/* ═══════════════════════════════════════════════════
   今日やること: カードのグレーアウト・強調デザイン・選択肢表示
   ═══════════════════════════════════════════════════ */

/* 本日やるコンテンツラベル（進捗率の下） */
.learning-today-content-label {
  margin: .4rem 0 .6rem;
  font-size: .9rem;
  color: #1565c0;
  background: #e3f2fd;
  border-radius: 6px;
  padding: .4rem .8rem;
  display: inline-block;
}

/* カードラッパー（カード + 選択肢サイドバーを横並びにする） */
.learning-card-wrapper {
  display: flex;
  gap: 1.2rem;   /* カードと説明パネルの間に少し余白を持たせる */
  align-items: stretch;
  flex: 0 0 auto;
}
.learning-card-wrapper .learning-card {
  flex: 0 0 24rem;   /* 通常カードと同じ幅 */
  min-width: 0;
}

/* グレーアウト: 今日やることセクション内のみ適用・クリックは可能 */
.learning-category-row--in-progress .learning-card-wrapper.is-grayed .learning-card,
.learning-category-row--in-progress .learning-card.learning-card--grayed {
  opacity: .42;
  filter: grayscale(.6);
  /* pointer-events は削除しない → クリック可能なまま */
}

/* 今日やるカード強調（枠は outline で表現し、コンテンツデザインの box-shadow は維持する） */
.learning-card.learning-card--today {
  position: relative;
  /* box-shadow はコンテンツデザイン（cube / book など）の立体表現を活かすため上書きしない */
}
/* 今日やる: 鮮やかな赤（既定の開く・受講中と差別化） */
.learning-card__action-btn--today {
  --btn-base: #e53935;
  --btn-dark: #b71c1c;
  --btn-shadow: rgba(183, 28, 28, 0.50);
}

/* 赤枠: カード外側に描画（outline-offset 正値 → 内側要素に隠れず4辺すべて表示）
   choices パネルとのgapは1.2remあるので2pxの外側枠は干渉しない */
.learning-card--today:not(.learning-card--completed) {
  outline: 4px solid #e53935;
  outline-offset: 2px;
}
/* 3Dデザイン時もカード自身に枠 */
.learning-card-3d-wrap .learning-card--today:not(.learning-card--completed) {
  outline: 4px solid #e53935;
  outline-offset: 2px;
}

/* 今日やるカードもホバーで立体的に浮き上がる */
.learning-card--today:not(.learning-card--completed):hover {
  transform: translate(-2px, -3px);
}

/* wrapper クラスは枠を持たない（説明文パネルを巻き込まないため） */
.learning-card-wrapper--today {
  outline: none;
}

/* 実行中: オレンジ太枠（6px） */
.learning-card--in_progress {
  outline: 6px solid #ff8c00 !important;
  outline-offset: 2px;
  box-shadow:
    0 0 0 8px rgba(255, 140, 0, 0.12),
    0 6px 20px rgba(255, 140, 0, 0.25) !important;
}
/* 実行中カードもホバーで立体的に浮き上がる（オレンジ枠は維持） */
.learning-card--in_progress:hover {
  transform: translate(-2px, -3px);
  box-shadow:
     8px  8px 0 #c05e00,
    10px 10px 0 #8a4400,
     4px  4px 12px rgba(255,140,0,0.30),
    12px 14px 28px rgba(255,140,0,0.20),
    0 0 0 8px rgba(255, 140, 0, 0.12) !important;
}

/* 受講中カード強調（通常カテゴリ内も含む） */
.learning-card.learning-card--active {
  box-shadow:
    0 0 0 2px #43a047,
    0 6px 18px rgba(67,160,71,.25);
}

/* 開始前質問の選択肢サイドバー（学びたいことの確認） */
.learning-card-choices {
  flex: 0 0 540px;   /* 説明文の横幅を3倍に */
  background: linear-gradient(155deg, #f0f7ff, #e8f4fd);
  border: 1px solid rgba(25,118,210,.2);
  border-radius: 8px;
  padding: .8rem .9rem;
  display: flex;
  flex-direction: column;
  gap: .4rem;
}
.learning-card-choices__label {
  font-size: .78rem;
  font-weight: 700;
  color: #1565c0;
  margin: 0 0 .3rem;
  letter-spacing: .03em;
}
.learning-card-choices__list {
  margin: 0; padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: .3rem;
}
.learning-card-choices__list li {
  font-size: .8rem;
  line-height: 1.5;
  color: #1a3a6a;
  padding: .3rem .5rem;
  background: rgba(255,255,255,.85);
  border-radius: 4px;
  border-left: 3px solid #1976d2;
  border-left: 2px solid rgba(180,140,60,.4);
}

/* 問い合わせボタン */
.learning-contact-btn-wrap {
  text-align: center;
  margin: 1.5rem 0 .5rem;
}
.learning-contact-btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .9rem;
}

/* ═══════════════════════════════════════════════════
   ロードマップ
   ═══════════════════════════════════════════════════ */
.learning-roadmap {
  margin: 1rem 0;
  border: 1px solid rgba(0,0,0,.1);
  border-radius: 10px;
  overflow: hidden;
  background: linear-gradient(155deg, #f8f9ff, #f0f4ff);
}
/* 「開く」エリア全体をボタンっぽく大きく */
.learning-roadmap__summary {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: 1.15rem 1.25rem;
  cursor: pointer;
  list-style: none;
  flex-wrap: wrap;
  background: linear-gradient(180deg, #ffffff 0%, #eef2ff 100%);
  border-bottom: 1px solid transparent;
  transition: background .15s ease, box-shadow .15s ease;
}
.learning-roadmap__summary:hover {
  background: linear-gradient(180deg, #ffffff 0%, #e0e7ff 100%);
}
.learning-roadmap[open] .learning-roadmap__summary {
  border-bottom-color: rgba(0,0,0,.07);
}
.learning-roadmap__summary::-webkit-details-marker { display: none; }
.learning-roadmap__summary::marker { display: none; content: ''; }

.learning-roadmap__icon { font-size: 1.6rem; line-height: 1; }
.learning-roadmap__title {
  font-weight: 800;
  font-size: 1.15rem;
  color: #1a1560;
  letter-spacing: 0.02em;
}
.learning-roadmap__quick {
  display: flex;
  gap: 1rem;
  margin-left: auto;
  font-size: .85rem;
  flex-wrap: wrap;
}
.learning-roadmap__finish strong,
.learning-roadmap__today-time strong { color: #1565c0; }

/* トグルアイコンを「明確な丸ボタン」化 */
.learning-roadmap__toggle-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(180deg, #4f6dff 0%, #3949ab 100%);
  color: #fff;
  font-size: 1rem;
  font-weight: 900;
  /* 立体感: 上ハイライト + 下の段差 + 落ち影 */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 -2px 0 rgba(0, 0, 0, 0.18),
    0 2px 0 #283593,
    0 4px 8px rgba(57, 73, 171, 0.4);
  transition: transform .25s ease, box-shadow .15s ease;
  margin-left: .5rem;
}
.learning-roadmap__summary:hover .learning-roadmap__toggle-icon {
  filter: brightness(1.06);
}
.learning-roadmap__summary:active .learning-roadmap__toggle-icon {
  transform: translateY(2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    inset 0 -1px 0 rgba(0, 0, 0, 0.18),
    0 0 0 #283593,
    0 2px 4px rgba(57, 73, 171, 0.4);
}
/* 開いたら 90 度回転（▸ → ▾ 相当） */
.learning-roadmap[open] .learning-roadmap__toggle-icon {
  transform: rotate(90deg);
}
.learning-roadmap[open] .learning-roadmap__summary:active .learning-roadmap__toggle-icon {
  transform: rotate(90deg) translateX(2px);
}

.learning-roadmap__detail {
  padding: 1rem 1.1rem 1.2rem;
  border-top: 1px solid rgba(0,0,0,.07);
}
.learning-roadmap__note {
  font-size: .85rem;
  color: #555;
  margin: 0 0 1rem;
}
.learning-roadmap__stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);  /* モバイル: 2列 */
  gap: .6rem;
  margin-bottom: 1.2rem;
}
/* PC: 4カラム1行で表示 */
@media (min-width: 600px) {
  .learning-roadmap__stats-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
/* 完走予定日カード: 日付が長くても1行に収まるように */
.learning-roadmap__stat--date-full { min-width: 0; }
.learning-roadmap__stat-value--date {
  font-size: 1rem !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.learning-roadmap__stat {
  background: #fff;
  border-radius: 8px;
  padding: .65rem .8rem;
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
  display: flex;
  flex-direction: column;
  gap: .2rem;
}
.learning-roadmap__stat-label { font-size: .68rem; color: #666; }
.learning-roadmap__stat-value { font-size: 1.15rem; font-weight: 900; color: #1a1560; }
.learning-roadmap__stat-value small { font-size: .7rem; font-weight: 400; color: #888; }

.learning-roadmap__week-title {
  font-size: .88rem;
  font-weight: 700;
  color: #333;
  margin: 0 0 .7rem;
}
.learning-roadmap__week-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: .4rem;
}
.learning-roadmap__day {
  background: #fff;
  border-radius: 8px;
  padding: .5rem .45rem;
  box-shadow: 0 1px 3px rgba(0,0,0,.07);
  display: flex;
  flex-direction: column;
  gap: .25rem;
  font-size: .68rem;
}
.learning-roadmap__day.is-today {
  background: #e3f2fd;
  box-shadow: 0 0 0 2px #1976d2, 0 2px 6px rgba(25,118,210,.2);
}
.learning-roadmap__day-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.learning-roadmap__day-date { font-weight: 700; color: #333; }
.learning-roadmap__day-name { color: #888; font-size: .62rem; }
.learning-roadmap__day-items { display: flex; flex-direction: column; gap: .18rem; }
.learning-roadmap__day-item {
  padding: 1px 4px;
  border-radius: 3px;
  font-size: .62rem;
  font-weight: 600;
  white-space: nowrap;
}
.item--content { background: #e8f5e9; color: #1b5e20; }
.item--review  { background: #fff3e0; color: #e65100; }
.item--quiz    { background: #e3f2fd; color: #0d47a1; }
.learning-roadmap__day-time { font-size: .62rem; color: #666; margin-top: .1rem; }

/* ══ ツイン: タブUI + 折りたたみ ══ */
.learning-twin {
  margin-bottom: 1rem;
}
.learning-twin__tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .5rem;
  margin-bottom: 0;
}
.learning-twin__tab {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 50px;
  padding: .65rem 1rem;
  background: linear-gradient(180deg, #ffffff 0%, #eef2ff 100%);
  border: 1.5px solid #d4daf0;
  border-bottom: none;
  border-radius: 12px 12px 0 0;
  cursor: pointer;
  font-size: .96rem;
  font-weight: 800;
  color: #5c6bc0;
  transition: background .15s, color .15s, box-shadow .15s;
  box-shadow: 0 -2px 6px rgba(57,73,171,.06);
}
.learning-twin__tab:hover {
  background: linear-gradient(180deg, #ffffff 0%, #e0e7ff 100%);
}
.learning-twin__tab.is-active {
  background: linear-gradient(155deg, #1a1560 0%, #283593 100%);
  color: #fff;
  border-color: #283593;
  border-bottom-color: #283593;
  box-shadow: 0 -4px 14px rgba(40,53,147,.25);
}
.learning-twin__tab-icon { font-size: 1.1rem; line-height: 1; }
.learning-twin__tab-arrow {
  margin-left: auto;
  font-size: .8rem;
  transition: transform .2s;
}

/* パネルエリア: display切り替えで折りたたみ（overflow:hidden+max-height は二重スクロールを生む） */
.learning-twin__panels {
  border: 1.5px solid #d4daf0;
  border-radius: 0 0 12px 12px;
  background: #fff;
}
/* 初期値: 閉じた状態 */
.learning-twin__panels.is-collapsed { display: none; }
.learning-twin__panel { display: none; }
.learning-twin__panel.is-active { display: block; }

/* twin内は ltwn-roadmap / ltwn-calendar クラスで出力
   overflow:hidden を持つ既存クラスを一切使わないため二重スクロールが発生しない */
.ltwn-roadmap,
.ltwn-calendar {
  padding: 0;
}
/* 縦スクロール完全防止: twin内のすべてのコンテナに overflow-y:visible を強制 */
.learning-twin__panels,
.learning-twin__panel,
.ltwn-roadmap,
.ltwn-calendar,
.ltwn-roadmap *,
.ltwn-calendar * {
  overflow-y: visible !important;
  max-height: none !important;
}

@media (max-width: 600px) {
  .learning-twin__tab { font-size: .85rem; padding: .55rem .7rem; min-height: 44px; }
  .learning-twin__tab-icon { font-size: .95rem; }
}

@media (max-width: 600px) {
  .learning-roadmap__week-grid { grid-template-columns: repeat(4, 1fr); }
  .learning-roadmap__quick { display: none; }
  .learning-card-wrapper { flex-direction: column; }
  .learning-card-choices { flex: none; }

  /* ── スマホでは開始前質問（説明文パネル）を非表示 ── */
  .learning-card-choices,
  .learning-card-wrapper--today .learning-card-choices {
    display: none;
  }

  /* ── 今日やる枠: スマホでは細く（カード内側） ── */
  .learning-card--today:not(.learning-card--completed),
  .learning-card-3d-wrap .learning-card--today:not(.learning-card--completed) {
    outline-width: 3px;
  }
}

/* 日次制限メッセージ */
.learning-footer-bar__limit-msg {
  font-size: .82rem;
  color: #1565c0;
  background: #e3f2fd;
  padding: .4rem .8rem;
  border-radius: 6px;
  margin: 0;
  text-align: center;
  line-height: 1.5;
}

/* ═══════════════════════════════════════════════════
   ボーナスコンテンツ: 豪華な特別セクション
   ═══════════════════════════════════════════════════ */

/* ── ボーナスセクション全体 ── */
.learning-bonus-section {
  margin-top: 2.5rem;
  position: relative;
  border-radius: 18px;
  padding: 1.6rem .8rem .8rem;
  overflow: hidden;
  /* 未解放: 重厚な暗色の金縁 */
  background:
    linear-gradient(160deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
  border: 2px solid transparent;
  background-clip: padding-box;
  box-shadow:
    0 0 0 2px rgba(180, 140, 40, 0.55),
    0 8px 32px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 220, 80, 0.12);
}

/* 解放済み: 光り輝く金色のセクション */
.learning-bonus-section.is-unlocked {
  background:
    radial-gradient(ellipse at 20% 0%, rgba(255, 215, 0, 0.18) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 100%, rgba(255, 140, 0, 0.14) 0%, transparent 50%),
    linear-gradient(160deg, #1a1505 0%, #2a1f00 40%, #1a1205 100%);
  box-shadow:
    0 0 0 2px rgba(255, 200, 50, 0.80),
    0 0 0 4px rgba(255, 160, 0, 0.30),
    0 12px 40px rgba(200, 140, 0, 0.35),
    inset 0 1px 0 rgba(255, 240, 120, 0.20);
}

/* 上端の金の輝きライン */
.learning-bonus-section::before {
  content: '';
  position: absolute;
  top: 0; left: 10%; right: 10%;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 220, 60, 0.8) 30%,
    rgba(255, 255, 180, 1) 50%,
    rgba(255, 220, 60, 0.8) 70%,
    transparent 100%
  );
  border-radius: 999px;
  animation: bonusTopLine 3s ease-in-out infinite alternate;
}
@keyframes bonusTopLine {
  from { opacity: 0.7; left: 10%; right: 10%; }
  to   { opacity: 1;   left: 5%;  right: 5%; }
}

/* 背景の輝きオーラ */
.learning-bonus-section::after {
  content: '';
  position: absolute;
  inset: -40%;
  background: radial-gradient(
    ellipse at center,
    rgba(255, 200, 50, 0.06) 0%,
    transparent 65%
  );
  animation: bonusAura 4s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 0;
}
@keyframes bonusAura {
  from { opacity: 0.5; transform: scale(0.95); }
  to   { opacity: 1;   transform: scale(1.05); }
}

/* ── 星屑・輝きスパークル ── */
.learning-bonus-section__sparkles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}
.bonus-sparkle {
  position: absolute;
  color: rgba(255, 215, 0, 0.75);
  font-size: 1rem;
  animation: sparkleTwinkle 2.5s ease-in-out infinite;
  text-shadow: 0 0 8px rgba(255, 220, 60, 0.9);
}
.bonus-sparkle--1  { top: 10%; left: 5%;  font-size: .7rem;  animation-delay: 0s;    animation-duration: 2.1s; }
.bonus-sparkle--2  { top: 20%; left: 92%; font-size: 1.1rem; animation-delay: .4s;   animation-duration: 3.0s; }
.bonus-sparkle--3  { top: 65%; left: 3%;  font-size: .8rem;  animation-delay: .8s;   animation-duration: 2.4s; }
.bonus-sparkle--4  { top: 80%; left: 88%; font-size: .65rem; animation-delay: 1.2s;  animation-duration: 2.8s; }
.bonus-sparkle--5  { top: 5%;  left: 48%; font-size: .9rem;  animation-delay: .3s;   animation-duration: 3.2s; }
.bonus-sparkle--6  { top: 45%; left: 95%; font-size: .75rem; animation-delay: 1.6s;  animation-duration: 2.2s; }
.bonus-sparkle--7  { top: 90%; left: 25%; font-size: .6rem;  animation-delay: .6s;   animation-duration: 2.7s; }
.bonus-sparkle--8  { top: 35%; left: 1%;  font-size: .85rem; animation-delay: 1.9s;  animation-duration: 2.9s; }
@keyframes sparkleTwinkle {
  0%, 100% { opacity: 0.2; transform: scale(0.7) rotate(0deg); }
  50%       { opacity: 1;   transform: scale(1.2) rotate(20deg); }
}

/* ── セクションタイトル ── */
.learning-bonus-section__title {
  color: rgba(255, 220, 80, 0.95);
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-wrap: wrap;
  font-size: 1.1rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-shadow: 0 2px 8px rgba(200, 140, 0, 0.6), 0 0 20px rgba(255, 200, 50, 0.3);
  position: relative;
  z-index: 2;
}
.learning-bonus-section.is-unlocked .learning-bonus-section__title {
  color: #fff5a0;
  text-shadow:
    0 2px 8px rgba(200, 140, 0, 0.8),
    0 0 30px rgba(255, 220, 60, 0.5),
    0 0 60px rgba(255, 180, 0, 0.3);
  animation: bonusTitleGlow 2.5s ease-in-out infinite alternate;
}
@keyframes bonusTitleGlow {
  from { text-shadow: 0 2px 8px rgba(200,140,0,.8), 0 0 20px rgba(255,200,50,.4); }
  to   { text-shadow: 0 2px 8px rgba(200,140,0,.8), 0 0 40px rgba(255,220,60,.7), 0 0 80px rgba(255,180,0,.4); }
}

.learning-bonus-section__lock-hint {
  font-size: .73rem;
  font-weight: 600;
  color: rgba(255, 200, 80, 0.85);
  background: rgba(255, 180, 30, 0.12);
  border: 1px solid rgba(255, 180, 30, 0.35);
  padding: 2px 10px;
  border-radius: 10px;
}
.learning-bonus-section__desc {
  font-size: .85rem;
  color: rgba(200, 180, 120, 0.80);
  margin: .3rem 0 .6rem;
  padding-left: 1.2rem;
  position: relative;
  z-index: 2;
}

/* ── ボーナスカードラッパー ── */
.learning-bonus-card-wrap {
  position: relative;
  flex: 0 0 auto;
  z-index: 2;
}
/* ── ボーナスカード: 通常カードと同サイズに統一 ── */
.learning-card.learning-card--bonus {
  flex: 0 0 24rem !important;
  width: 20rem;
  box-sizing: border-box;
}

/* ── 解放済みカードのホログラム光彩 ── */
.learning-card.is-unlocked {
  position: relative;
  overflow: visible;
  box-shadow:
    0 0 0 2px rgba(255, 200, 50, 0.75),
    0 0 0 4px rgba(255, 140, 0, 0.25),
    0 8px 28px rgba(200, 140, 0, 0.40),
    0 2px 8px rgba(0, 0, 0, 0.25);
}
.learning-card.is-unlocked:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow:
    0 0 0 2px rgba(255, 220, 60, 0.90),
    0 0 0 5px rgba(255, 160, 0, 0.35),
    0 16px 40px rgba(200, 140, 0, 0.50),
    0 4px 12px rgba(0, 0, 0, 0.30);
}
/* ホログラムシマーレイヤー */
.learning-bonus-glow {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  border-radius: inherit;
  overflow: hidden;
}
.bonus-holo-shimmer {
  position: absolute;
  inset: -30%;
  background: linear-gradient(
    125deg,
    transparent       20%,
    rgba(255,255,180, 0.18) 38%,
    rgba(255,200,60,  0.22) 45%,
    rgba(255,140,0,   0.16) 52%,
    rgba(255,255,180, 0.12) 60%,
    transparent       75%
  );
  background-size: 200% 200%;
  animation: holoShimmer 2.8s ease-in-out infinite;
}
@keyframes holoShimmer {
  0%   { background-position: 200% 200%; opacity: 0.6; }
  50%  { background-position: -30% -30%; opacity: 1; }
  100% { background-position: 200% 200%; opacity: 0.6; }
}

/* コーナーリボン（BONUS） */
.learning-bonus-ribbon {
  position: absolute;
  top: 10px;
  right: -6px;
  z-index: 6;
  pointer-events: none;
}
.learning-bonus-ribbon span {
  display: block;
  background: linear-gradient(135deg, #ffd700 0%, #ff8c00 60%, #e65100 100%);
  color: #fff;
  font-size: .56rem;
  font-weight: 900;
  letter-spacing: .12em;
  padding: 3px 10px 3px 8px;
  border-radius: 3px 0 0 3px;
  box-shadow:
    0 2px 6px rgba(200, 100, 0, 0.5),
    inset 0 1px 0 rgba(255,255,200,0.35);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 6% 50%);
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

/* ── ロック中カードの見た目: 透けて内容が見える ── */
.learning-card.is-locked {
  cursor: not-allowed;
  position: relative;
  /* grayscaleで色を抜き、brightnessを少し下げる程度（内容は見える） */
  filter: grayscale(0.4) brightness(0.85);
}

/* ── 鎖のオーバーレイ: 半透明で内容が透けて見える ── */
.learning-bonus-lock-overlay {
  position: absolute;
  inset: 0;
  /* 軽い半透明のみ（backdrop-blurなし）で内容を見せる */
  background: rgba(20, 15, 40, 0.40);
  border-radius: inherit;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  pointer-events: none;
  border: 1px solid rgba(180, 140, 40, 0.35);
}

/* ── 鎖（より太く重厚に） ── */
.learning-bonus-lock-chains {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}
.chain {
  position: absolute;
  background: transparent;
  border-radius: 6px;
}
/* 横鎖1: 左上→右下 */
.chain--1 {
  width: 160%; height: 20px;
  top: 50%; left: -30%;
  transform: translateY(-50%) rotate(-28deg);
  background: repeating-linear-gradient(
    90deg,
    rgba(160, 130, 50, .90) 0px,
    rgba(220, 190, 80, .95) 5px,
    rgba(255, 230, 100, 1) 8px,
    rgba(200, 170, 60, .90) 12px,
    rgba(140, 110, 40, .85) 16px,
    rgba(160, 130, 50, .90) 20px
  );
  border-top: 2px solid rgba(255, 230, 100, .7);
  border-bottom: 2px solid rgba(100, 70, 10, .8);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255,240,120,.3);
}
/* 横鎖2: 右上→左下 */
.chain--2 {
  width: 160%; height: 20px;
  top: 50%; left: -30%;
  transform: translateY(-50%) rotate(28deg);
  background: repeating-linear-gradient(
    90deg,
    rgba(160, 130, 50, .90) 0px,
    rgba(220, 190, 80, .95) 5px,
    rgba(255, 230, 100, 1) 8px,
    rgba(200, 170, 60, .90) 12px,
    rgba(140, 110, 40, .85) 16px,
    rgba(160, 130, 50, .90) 20px
  );
  border-top: 2px solid rgba(255, 230, 100, .7);
  border-bottom: 2px solid rgba(100, 70, 10, .8);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255,240,120,.3);
}
/* 鎖の交差リング */
.chain--diagonal {
  width: 18px; height: 22px;
  border: 3px solid rgba(220, 190, 80, 0.95);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, rgba(255,240,120,.5), rgba(60,45,10,.6));
  box-shadow: 0 2px 6px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,240,120,.3);
}
.chain--d1 { top: calc(50% - 11px); left: calc(50% - 32px); transform: rotate(28deg); }
.chain--d2 { top: calc(50% - 11px); left: calc(50% + 14px); transform: rotate(-28deg); }

/* 鍵アイコン */
.learning-bonus-lock-icon {
  font-size: 2.8rem;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.8)) drop-shadow(0 0 12px rgba(255,200,50,.4));
  z-index: 2;
  line-height: 1;
  animation: lockSway 3s ease-in-out infinite;
}
@keyframes lockSway {
  0%, 100% { transform: rotate(-4deg); }
  50%       { transform: rotate(4deg); }
}

/* 「全講義完了で解放」ラベル */
.learning-bonus-lock-label {
  font-size: .73rem;
  font-weight: 800;
  color: rgba(255, 230, 120, 0.98);
  text-shadow: 0 1px 4px rgba(0,0,0,.8);
  background: linear-gradient(135deg, rgba(0,0,0,.5), rgba(30,20,0,.6));
  border: 1px solid rgba(200, 160, 40, 0.50);
  padding: 3px 12px;
  border-radius: 10px;
  white-space: nowrap;
  z-index: 2;
  margin: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,230,80,.15);
}

/* ── 有料ロック（無料会員が有料コンテンツを見たとき）鎖で施錠 ── */
.learning-card--paid-locked { position: relative; cursor: not-allowed; }
/* ロック中は少しだけグレーアウト */
.learning-card--paid-locked .learning-card__thumb img {
  filter: grayscale(.3) brightness(.82);
}
.learning-paid-lock-overlay {
  position: absolute; inset: 0;
  background: rgba(15, 12, 30, 0.22);
  border-radius: inherit;
  z-index: 10;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .5rem;
  pointer-events: none;
  border: 1px solid rgba(180, 140, 40, 0.4);
}
.learning-paid-lock-chains {
  position: absolute; inset: 0; overflow: hidden;
  border-radius: inherit; pointer-events: none;
}
.learning-paid-lock-chains .chain { position: absolute; background: transparent; border-radius: 6px; }
.learning-paid-lock-chains .chain--1,
.learning-paid-lock-chains .chain--2 {
  width: 160%; height: 18px; top: 50%; left: -30%;
  background: repeating-linear-gradient(
    90deg,
    rgba(160,130,50,.90) 0px, rgba(220,190,80,.95) 5px, rgba(255,230,100,1) 8px,
    rgba(200,170,60,.90) 12px, rgba(140,110,40,.85) 16px, rgba(160,130,50,.90) 20px);
  border-top: 2px solid rgba(255,230,100,.7);
  border-bottom: 2px solid rgba(100,70,10,.8);
  box-shadow: 0 2px 6px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,240,120,.3);
}
/* 2本の鎖で斜め十字（X） */
.learning-paid-lock-chains .chain--1 { transform: translateY(-50%) rotate(-28deg); }
.learning-paid-lock-chains .chain--2 { transform: translateY(-50%) rotate(28deg); }
.learning-paid-lock-icon {
  font-size: 2.8rem; line-height: 1; z-index: 2;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.8)) drop-shadow(0 0 12px rgba(255,200,50,.4));
  animation: lockSway 3s ease-in-out infinite;
}
.learning-paid-lock-label {
  font-size: .73rem; font-weight: 800; margin: 0; z-index: 2;
  color: rgba(255,230,120,.98);
  text-shadow: 0 1px 4px rgba(0,0,0,.8);
  background: linear-gradient(135deg, rgba(0,0,0,.5), rgba(30,20,0,.6));
  border: 1px solid rgba(200,160,40,.5);
  padding: 3px 12px; border-radius: 10px; white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,230,80,.15);
}

/* ボーナスバッジ */
.learning-card__badge--bonus {
  background: linear-gradient(135deg, #ffd700 0%, #ff8c00 60%, #e65100 100%);
  color: #fff !important;
  border-radius: 4px;
  padding: 2px 8px;
  font-size: .68rem;
  font-weight: 800;
  margin-left: auto;
  box-shadow: 0 1px 4px rgba(200,100,0,.4), inset 0 1px 0 rgba(255,255,180,.3);
  text-shadow: 0 1px 2px rgba(0,0,0,.25);
}


/* 動画系カードは再生ボタンがあるので __type テキストは非表示 */
.learning-card.learning-card--has-video-style .learning-card__type {
  display: none;
}




/* ════════════════════════════════════════════════════════
   修正(v2.0.1): 立体カード（cube / video-film-3d）のサイズ統一
   ────────────────────────────────────────────────────────
   原因:
   cube / video-film-3d は各カードを .learning-card-3d-wrap で包むが、
   このラッパーは display:block のため、内側カードの flex 指定が無効になり、
   カードが画像の元サイズに合わせて伸縮 → 大きさがバラバラに。
   さらに行が縮まる/はみ出す挙動が不安定で PC では横スクロール不可だった。
   対策:
   ラッパー自体に固定幅を与え、内側カードを width:100% でラッパーに合わせる。
   PC・スマホ両方に適用（前回 PC 幅限定だったため効果が出ていなかった）。
   ════════════════════════════════════════════════════════ */

/* 立体カードのラッパー: 通常カードと同じ固定幅で全カードを統一 */
.learning-card-3d-wrap {
  flex: 0 0 24rem !important;
  width: 24rem !important;
  box-sizing: border-box;
  position: relative;
  /* カードの3D影（右10px・下10px）がクリップされないよう余白を確保 */
  padding-right: 14px;
  padding-bottom: 14px;
}
/* ラッパー直下のカードはラッパー幅いっぱい（block子なので 100% で一致） */
.learning-card-3d-wrap > .learning-card {
  flex: 0 0 auto !important;
  width: 100% !important;
  box-sizing: border-box;
}
/* 「今日やること」など選択肢サイドバー付きカードは内容に合わせて広げる */
.learning-card-3d-wrap:has(.learning-card-wrapper) {
  flex: 0 0 auto !important;
  width: auto !important;
}

/* サムネは必ず 16:9 に固定（画像の元比率に引きずられないように）。
   画像を absolute 配置にして、flex の min-height:auto が画像実寸で
   サムネを押し広げ aspect-ratio を無効化する問題を回避する。 */
.learning-card .learning-card__thumb {
  aspect-ratio: 16 / 9 !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  flex: 0 0 auto;
  position: relative;
  overflow: hidden;
}
.learning-card .learning-card__thumb img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* CSS 未定義だった video-film-3d の基本サイズを補完 */
.learning-cards--video-film-3d .learning-card,
.learning-card.learning-card--design-video-film-3d {
  box-sizing: border-box;
}

/* 行は必ず横並びを保ち、はみ出した分が横スクロールできるように */
.learning-category-row__list {
  flex-wrap: nowrap;
}

/* 厚み演出用の装飾 div はレイアウトに影響させない */
.learning-card-3d-wrap .card-depth-bottom,
.learning-card-3d-wrap .card-depth-side {
  position: absolute;
  pointer-events: none;
  z-index: -1;
}
.learning-card-3d-wrap .card-depth-bottom {
  left: 4px;
  right: -4px;
  bottom: calc(var(--thick, 16px) * -0.35);
  height: var(--thick, 16px);
  background: linear-gradient(180deg, rgba(0,0,0,0.16), rgba(0,0,0,0.04));
  border-radius: 0 0 6px 6px;
  filter: blur(1px);
}
.learning-card-3d-wrap .card-depth-side {
  display: none;
}

/* スマホ: カードを少し小さく（既存方針を踏襲しラッパー幅で統一） */
@media (max-width: 480px) {
  .learning-card-3d-wrap {
    flex: 0 0 17rem !important;
    width: 17rem !important;
  }
  .learning-card.learning-card--bonus {
    flex: 0 0 17rem !important;
    width: 17rem !important;
  }
}



/* ── 理解度クイズ・復習問題: 回答ボタン非表示（選択時に自動回答） ── */
[data-action="submit"] {
  display: none !important;
}

/* ── 横スクロール矢印インジケータ ── */
.learning-scroll-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 30;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.95);
  box-shadow: 0 2px 10px rgba(0,0,0,0.22);
  color: #1976d2;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  display: none;            /* JSが必要時に flex に切替 */
  align-items: center;
  justify-content: center;
  transition: background .15s, transform .15s;
  padding: 0;
}
.learning-scroll-arrow:hover {
  background: #1976d2;
  color: #fff;
}
.learning-scroll-arrow--left  { left: 6px; }
.learning-scroll-arrow--right { right: 6px; }
@media (max-width: 480px) {
  .learning-scroll-arrow { width: 36px; height: 36px; font-size: 22px; }
}

/* ── ボーナスロック クリック時のトーストメッセージ ── */
.learning-bonus-locked-toast {
  position: fixed;
  left: 50%;
  bottom: 40px;
  transform: translateX(-50%) translateY(20px);
  background: #2d2d2d;
  color: #fff;
  padding: 14px 24px;
  border-radius: 10px;
  font-size: 0.95rem;
  font-weight: 600;
  box-shadow: 0 6px 24px rgba(0,0,0,0.35);
  z-index: 99999;
  opacity: 0;
  transition: opacity .3s ease, transform .3s ease;
  max-width: 90vw;
  text-align: center;
  border: 2px solid #ffb300;
}
.learning-bonus-locked-toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ── ロードマップ: いつ・どの講義をやるか ── */
.learning-roadmap__plan {
  margin-top: 1.5rem;
  padding-top: 1.2rem;
  border-top: 1px solid #e0e0e0;
}
.learning-roadmap__plan-list {
  list-style: none;
  margin: 0.8rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.learning-roadmap__plan-day {
  display: flex;
  gap: 0.8rem;
  padding: 0.7rem 0.9rem;
  background: #fafafa;
  border-radius: 8px;
  border-left: 4px solid #c5cae9;
}
.learning-roadmap__plan-day.is-today {
  background: #e8f4fd;
  border-left-color: #1976d2;
}
.learning-roadmap__plan-date {
  flex: 0 0 90px;
  font-weight: 700;
  font-size: 0.88rem;
  color: #444;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.learning-roadmap__plan-today-badge {
  display: inline-block;
  background: #1976d2;
  color: #fff;
  font-size: 0.68rem;
  padding: 1px 8px;
  border-radius: 999px;
  width: fit-content;
}
.learning-roadmap__plan-contents {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.learning-roadmap__plan-content {
  font-size: 0.9rem;
  color: #333;
  display: flex;
  gap: 0.4rem;
  align-items: flex-start;
}
.learning-roadmap__plan-bullet { flex: 0 0 auto; }
.learning-roadmap__plan-note {
  font-size: 0.78rem;
  color: #888;
  margin: 0.8rem 0 0;
}
@media (max-width: 480px) {
  .learning-roadmap__plan-day { flex-direction: column; gap: 0.4rem; }
  .learning-roadmap__plan-date { flex-direction: row; align-items: center; gap: 8px; }
}

/* ── ロードマップ: 文字サイズ 1.5倍（v2.21.0） ── */
.learning-roadmap__title         { font-size: 1.73rem; }   /* 1.15 × 1.5 */
.learning-roadmap__quick         { font-size: 1.28rem; }   /* 0.85 × 1.5 */
.learning-roadmap__stat-label    { font-size: 1.02rem; }   /* 0.68 × 1.5 */
.learning-roadmap__stat-value    { font-size: 1.73rem; }   /* 1.15 × 1.5 */
.learning-roadmap__stat-value small { font-size: 1.05rem; } /* 0.70 × 1.5 */
.learning-roadmap__day-name      { font-size: 0.93rem; }   /* 0.62 × 1.5 */
.learning-roadmap__day-time      { font-size: 0.93rem; }   /* 0.62 × 1.5 */
/* ── ロードマップ フォントサイズ最終定義（v2.25.0） ──
   全体: 1.2倍
   完走予定・本日の目安: 1.1倍
   7日間スケジュール: 1.2倍 ゴシック体
   ─────────────────────────────── */

/* 全体 1.2倍 */
.learning-roadmap__title         { font-size: 1rem !important; }  /* 学習カレンダーのタイトルに合わせる */
.learning-roadmap__stat-label    { font-size: calc(0.68rem * 1.2) !important; }
.learning-roadmap__stat-value    { font-size: calc(1.15rem * 1.2) !important; }
.learning-roadmap__stat-value small { font-size: calc(0.70rem * 1.2) !important; }
.learning-roadmap__plan-content  { font-size: calc(0.9rem  * 1.2) !important; }
.learning-roadmap__plan-date     { font-size: calc(0.88rem * 1.2) !important; }
.learning-roadmap__plan-note     { font-size: calc(0.78rem * 1.2) !important; }

/* 完走予定・本日の目安 のみ 1.1倍 */
.learning-roadmap__finish        { font-size: calc(0.85rem * 1.1) !important; }
.learning-roadmap__today-time    { font-size: calc(0.85rem * 1.1) !important; }

/* 7日間スケジュール: 1.2倍 ゴシック体 */
.learning-roadmap__week {
  font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", YuGothic, "Noto Sans JP", sans-serif !important;
}
.learning-roadmap__week-title    { font-size: calc(1.0rem  * 1.2) !important; font-family: inherit !important; }
.learning-roadmap__day-date      { font-size: calc(0.88rem * 1.2) !important; font-family: inherit !important; }
.learning-roadmap__day-name      { font-size: calc(0.62rem * 1.2) !important; font-family: inherit !important; }
.learning-roadmap__day-item      { font-size: calc(0.72rem * 1.2) !important; font-family: inherit !important; }
.learning-roadmap__day-time      { font-size: calc(0.62rem * 1.2) !important; font-family: inherit !important; }

/* ── ロードマップ: スマホ文字サイズ縮小 ── */
@media (max-width: 600px) {
  .learning-roadmap__title         { font-size: .92rem !important; }
  .learning-roadmap__stat-label    { font-size: .68rem !important; }
  .learning-roadmap__stat-value    { font-size: 1.05rem !important; }
  .learning-roadmap__stat-value small { font-size: .65rem !important; }
  .learning-roadmap__finish,
  .learning-roadmap__today-time    { font-size: .8rem  !important; }
  .learning-roadmap__week-title    { font-size: .88rem !important; }
  .learning-roadmap__day-date      { font-size: .78rem !important; }
  .learning-roadmap__day-name      { font-size: .58rem !important; }
  .learning-roadmap__day-item      { font-size: .62rem !important; }
  .learning-roadmap__day-time      { font-size: .58rem !important; }
  .learning-roadmap__plan-content  { font-size: .84rem !important; }
  .learning-roadmap__plan-date     { font-size: .8rem  !important; }
  .learning-roadmap__plan-note     { font-size: .72rem !important; }
}

@media (max-width: 400px) {
  .learning-roadmap__title         { font-size: .86rem !important; }
  .learning-roadmap__stat-label    { font-size: .62rem !important; }
  .learning-roadmap__stat-value    { font-size: .95rem !important; }
  .learning-roadmap__stat-value small { font-size: .6rem !important; }
  .learning-roadmap__finish,
  .learning-roadmap__today-time    { font-size: .74rem !important; }
  .learning-roadmap__week-title    { font-size: .8rem  !important; }
  .learning-roadmap__day-date      { font-size: .7rem  !important; }
  .learning-roadmap__day-name      { font-size: .54rem !important; }
  .learning-roadmap__day-item      { font-size: .58rem !important; }
  .learning-roadmap__day-time      { font-size: .54rem !important; }
}
.learning-card-choices__empty {
  font-size: .78rem;
  color: #5572a0;
  margin: 0;
  line-height: 1.6;
  font-style: italic;
}

/* ── ロードマップ: 講義コンテンツ タイトルリンク ── */
.learning-roadmap__lectures { margin-top: 1.25rem; }
.learning-roadmap__lecture-list {
  list-style: none;
  margin: .6rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .4rem;
}
.learning-roadmap__lecture-link {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .7rem .9rem;
  background: #fff;
  border: 1px solid #e6e6ee;
  border-radius: 10px;
  text-decoration: none;
  color: #1a1a2e;
  font-size: .9rem;
  font-weight: 600;
  transition: background .12s, border-color .12s, transform .1s;
}
.learning-roadmap__lecture-link:hover {
  background: #f0f4ff;
  border-color: #c5cae9;
  transform: translateX(2px);
}
.learning-roadmap__lecture-link.is-done {
  color: #888;
  background: #f7f8fa;
}
.learning-roadmap__lecture-link.is-done .learning-roadmap__lecture-title {
  text-decoration: line-through;
  text-decoration-color: #bbb;
}
.learning-roadmap__lecture-icon { flex-shrink: 0; font-size: 1rem; }
.learning-roadmap__lecture-title { flex: 1; line-height: 1.5; }

@media (max-width: 600px) {
  .learning-roadmap__lecture-link { font-size: .82rem; padding: .6rem .75rem; }
}

/* ════════════════════════════════════════════
   今日やること 余白埋めパネル（PC専用）
   1〜2講義のとき右側の余白を予習パネルで埋める
   ════════════════════════════════════════════ */
.learning-today-fill { display: none; } /* デフォルト（スマホ）非表示 */

@media (min-width: 800px) {
  .learning-today-fill {
    display: flex;
    align-items: stretch;
    flex: 1 1 auto;          /* カードの右側の余白を埋める */
    min-width: 260px;
    max-width: 520px;
    align-self: stretch;     /* カードと同じ高さに伸びる */
  }
  .learning-today-fill__inner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: .7rem;
    width: 100%;
    padding: 1.6rem 1.8rem;
    border-radius: 18px;
    background:
      radial-gradient(ellipse at 85% 15%, rgba(21,101,192,.10), transparent 60%),
      linear-gradient(135deg, #f5f8ff 0%, #eef3fb 100%);
    border: 1.5px dashed #c3d4f0;
  }
  .learning-today-fill__eyebrow {
    font-size: .8rem; font-weight: 800; letter-spacing: .05em;
    color: #1565c0;
  }
  .learning-today-fill__question {
    font-size: 1.15rem; font-weight: 700; line-height: 1.6;
    color: #1a2238; margin: 0;
  }
  .learning-today-fill__hint {
    font-size: .82rem; color: #6b7383; line-height: 1.6; margin: 0;
  }
  .learning-today-fill__excerpt {
    font-size: .92rem; color: #44506a; line-height: 1.8; margin: 0;
  }
  .learning-today-fill__cta {
    align-self: flex-start;
    margin-top: .4rem;
    font-size: .9rem; font-weight: 700;
    color: #fff; text-decoration: none;
    padding: .6rem 1.3rem; border-radius: 999px;
    background: linear-gradient(135deg, #1e88e5, #1565c0);
    box-shadow: 0 4px 12px rgba(21,101,192,.3);
    transition: transform .12s, box-shadow .18s;
  }
  .learning-today-fill__cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 7px 18px rgba(21,101,192,.4);
  }
}

/* twinモード ロードマップヘッダ（完走予定日） */
.ltwn-roadmap__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: .9rem;
  font-weight: 700;
  color: #333;
  padding: .5rem .2rem .8rem;
  gap: .5rem;
  flex-wrap: wrap;
}
.ltwn-roadmap__finish {
  font-size: .82rem;
  color: #1565c0;
  white-space: nowrap;
}

/* ── 今日やること以外クリック時モーダル ── */
.lc-today-modal[hidden] { display: none !important; }
.lc-today-modal {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
}
.lc-today-modal__backdrop {
  position: absolute; inset: 0;
  background: rgba(10,20,40,.55);
  backdrop-filter: blur(3px);
}
.lc-today-modal__box {
  position: relative; z-index: 1;
  background: #fff; border-radius: 20px;
  padding: 2.2rem 2rem 2rem;
  max-width: 400px; width: calc(100% - 2.5rem);
  text-align: center;
  box-shadow: 0 20px 60px rgba(0,0,0,.22);
  animation: lc-modal-in .22s ease-out;
}
@keyframes lc-modal-in {
  from { opacity: 0; transform: translateY(14px) scale(.97); }
  to   { opacity: 1; transform: none; }
}
.lc-today-modal__icon { font-size: 2.4rem; margin-bottom: .7rem; }
.lc-today-modal__title {
  font-size: 1.1rem; font-weight: 900;
  color: #1a2238; margin: 0 0 .85rem;
}
.lc-today-modal__desc {
  font-size: .88rem; color: #5a6276; line-height: 1.75; margin: 0 0 1.5rem;
}
.lc-today-modal__btns { display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; }
.lc-today-modal__btn {
  padding: .72rem 1.4rem; border-radius: 10px;
  font-size: .92rem; font-weight: 700; cursor: pointer;
  text-decoration: none; transition: filter .12s, transform .1s;
}
.lc-today-modal__btn:hover { filter: brightness(1.05); transform: translateY(-1px); }
.lc-today-modal__btn--close {
  background: #f0f2f8; border: 1.5px solid #d0d5e8; color: #3a4256;
}
.lc-today-modal__btn--proceed {
  background: linear-gradient(135deg,#e8a020,#c47a00);
  color: #fff; border: none;
  box-shadow: 0 4px 12px rgba(196,122,0,.3);
}

/* タブ横の常時表示「完走予定」(PCのみ。狭い画面ではタブ内表示に委ねる) */
.learning-twin__finish {
  display: none;
  margin-left: auto;
  align-self: center;
  font-size: .88rem;
  font-weight: 700;
  color: #1565c0;
  white-space: nowrap;
  padding-right: .4rem;
}
@media (min-width: 900px) {
  .learning-twin__finish { display: inline-flex; align-items: center; gap: .25rem; }
}

/* PCではタブ行を flex 化して右端に完走予定を並べる（タブ2つ + 右寄せ表示） */
@media (min-width: 900px) {
  .learning-twin__tabs {
    display: flex;
    align-items: stretch;
  }
  .learning-twin__tabs .learning-twin__tab { flex: 0 1 260px; }
}

/* 復習一覧: タイトルのみのシンプルリスト */
.learning-review-list__link {
  display: block;
  padding: .4rem .1rem;
  border-bottom: 1px solid var(--color-border, #eee);
  font-size: .95rem;
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color .12s;
}
.learning-review-list__link:hover { color: var(--color-accent, #c44d2c); }
.learning-review-list__item:last-child .learning-review-list__link { border-bottom: none; }
/* タイトルのみ表示のリストは、行を詰めてカード装飾を外す */
.learning-review-list--titles { gap: 0; }
.learning-review-list--titles .learning-review-list__item {
  display: flex; align-items: center; justify-content: flex-start; gap: .5rem;
  text-align: left;
  background: none; border-radius: 0;
  padding: .5rem .1rem;
  border-bottom: 1px solid rgba(196,77,44,.12);
  font-size: .9rem; color: #6a3a28;
}
.learning-review-list--titles .learning-review-list__item:last-child { border-bottom: none; }
.learning-review-list__dot { flex: none; font-size: .9rem; opacity: .8; }
.learning-review-list__name {
  flex: 1 1 auto;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ── スマホ: 「今日やる」等のアクションボタンが下端で途切れる問題の調整 ───── */
@media (max-width: 768px) {
  /* カード下端でボタンの立体影(厚み3px+落ち影5px)がクリップされないよう余白を確保 */
  .learning-card {
    overflow: visible;               /* 影のクリップを防ぐ */
    padding-bottom: 4px;
  }
  .learning-card__action-btn {
    width: calc(100% - 20px);
    margin: 0 10px 14px;             /* 下マージンを増やし影の描画領域を確保 */
    padding: .7rem .5rem;            /* タップしやすい高さ */
    font-size: .92rem;
    line-height: 1.35;
    min-height: 42px;                /* 文字が詰まらない最小高さ */
    white-space: nowrap;             /* 「今日やる」を途中で折り返さない */
    display: flex;
    align-items: center;
    justify-content: center;
  }
  /* カード列がボタンの影を切り落とさないように */
  .learning-category-row__list,
  .learning-cards {
    overflow: visible;
  }
  /* 立体カード(3D)側のラッパーも同様 */
  .learning-card-3d-wrap { overflow: visible; }
}

/* 極小画面（iPhone SE 等） */
@media (max-width: 380px) {
  .learning-card__action-btn {
    font-size: .86rem;
    letter-spacing: .02em;
    padding: .65rem .4rem;
    margin: 0 8px 12px;
    width: calc(100% - 16px);
  }
}

/* ══════════ 最終目標（ゴール）: バナー / モーダル / 一覧 ══════════ */
body.lc-goal-open { overflow: hidden; }

/* ── バナー ── */
.lc-goal-banner {
  display: flex; align-items: center; gap: 14px;
  background: linear-gradient(135deg, #fff7e6 0%, #fff 60%);
  border: 2px solid #f0c14b;
  border-left: 6px solid #e8a317;
  border-radius: 14px;
  padding: 14px 18px;
  margin: 0 0 18px;
  box-shadow: 0 4px 14px rgba(232,163,23,.14);
}
.lc-goal-banner__icon { font-size: 1.8rem; flex: 0 0 auto; }
.lc-goal-banner__body { flex: 1; min-width: 0; }
.lc-goal-banner__eyebrow {
  display: inline-block; font-size: .72rem; font-weight: 800; letter-spacing: .08em;
  color: #a5761a; background: #fdf0d0; padding: 2px 8px; border-radius: 999px;
}
.lc-goal-banner__text {
  margin: .3rem 0 .2rem; font-size: 1.02rem; font-weight: 800; color: #4a3608; line-height: 1.5;
  overflow-wrap: anywhere;
}
.lc-goal-banner__deadline { font-size: .84rem; color: #7a5b12; font-weight: 600; }
.lc-goal-banner__deadline .is-over { color: #c0392b; }
.lc-goal-banner__actions { display: flex; flex-direction: column; gap: 6px; flex: 0 0 auto; }
.lc-goal-banner__btn {
  border: 2px solid #e8a317; background: #fff; color: #a5761a;
  font-weight: 800; font-size: .8rem; padding: .4rem .8rem; border-radius: 8px; cursor: pointer;
  white-space: nowrap; transition: background .15s, transform .08s;
}
.lc-goal-banner__btn:hover { background: #fff7e6; }
.lc-goal-banner__btn:active { transform: scale(.97); }
.lc-goal-banner__btn--ghost { border-color: #d9c48a; color: #8a6d24; }

/* ── モーダル ── */
.lc-goal-modal {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(20, 22, 34, .72);
  backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  overflow-y: auto;
}
.lc-goal-modal[hidden] { display: none; }
.lc-goal-modal__inner {
  background: #fff; border-radius: 20px; padding: 32px 28px;
  max-width: 560px; width: 100%;
  box-shadow: 0 24px 70px rgba(0,0,0,.35);
  max-height: 90vh; overflow-y: auto;
  text-align: center;
}
.lc-goal-modal__icon { font-size: 2.6rem; margin-bottom: .3rem; }
.lc-goal-modal__title { margin: 0 0 .5rem; font-size: 1.4rem; font-weight: 900; color: #2c3550; }
.lc-goal-modal__desc { margin: 0 0 1.4rem; font-size: .94rem; color: #5a6480; line-height: 1.7; }
.lc-goal-modal__error {
  background: #fdecea; color: #b3261e; border-radius: 8px;
  padding: .6rem .8rem; font-size: .86rem; font-weight: 700; margin: 0 0 .8rem;
}

.lc-goal-field { display: block; text-align: left; margin: 0 0 1rem; }
.lc-goal-field__label { display: block; font-weight: 800; font-size: .88rem; color: #3d4763; margin-bottom: .35rem; }
.lc-goal-field__input {
  width: 100%; box-sizing: border-box;
  padding: .8rem .9rem; font-size: 1rem;
  border: 2px solid #d8dded; border-radius: 10px;
  transition: border-color .15s;
}
.lc-goal-field__input:focus { outline: none; border-color: #5c6bc0; }
.lc-goal-field__hint { display: block; margin-top: .3rem; font-size: .78rem; color: #8b93ab; }

.lc-goal-check {
  display: flex; align-items: flex-start; gap: .55rem; text-align: left;
  font-size: .85rem; color: #5a6480; margin: 0 0 1.2rem; cursor: pointer; line-height: 1.6;
}
.lc-goal-check input { margin-top: 3px; flex: 0 0 auto; }

.lc-goal-btn {
  display: block; width: 100%; box-sizing: border-box;
  padding: .9rem 1rem; border-radius: 12px; border: none;
  font-size: 1rem; font-weight: 900; cursor: pointer;
  transition: transform .08s, filter .15s;
  margin-top: .6rem;
}
.lc-goal-btn:active { transform: scale(.985); }
.lc-goal-btn--primary { background: linear-gradient(180deg,#5c6bc0,#3f51b5); color: #fff; box-shadow: 0 4px 0 #303f9f, 0 8px 16px rgba(63,81,181,.32); }
.lc-goal-btn--primary:hover { filter: brightness(1.06); }
.lc-goal-btn--primary:disabled { opacity: .6; cursor: not-allowed; }
.lc-goal-btn--ghost { background: #f2f4fb; color: #4a5474; border: 2px solid #dfe4f2; }
.lc-goal-btn--ghost:hover { background: #e9edf9; }

/* ── みんなの目標一覧 ── */
.lc-goal-list { text-align: left; margin: 0 0 1rem; max-height: 46vh; overflow-y: auto; }
.lc-goal-list__loading,
.lc-goal-list__empty { text-align: center; color: #8b93ab; font-size: .9rem; padding: 1.6rem 0; line-height: 1.7; }
.lc-goal-card {
  display: flex; gap: .8rem; align-items: flex-start;
  background: #f8f9fd; border: 1.5px solid #e6eaf5; border-radius: 12px;
  padding: .85rem 1rem; margin-bottom: .6rem;
}
.lc-goal-card.is-me { background: #eef2ff; border-color: #b9c2ea; }
.lc-goal-card__avatar { width: 38px; height: 38px; border-radius: 50%; flex: 0 0 auto; }
.lc-goal-card__body { flex: 1; min-width: 0; }
.lc-goal-card__name { font-weight: 800; font-size: .86rem; color: #3d4763; display: flex; align-items: center; gap: .4rem; }
.lc-goal-card__me { background: #5c6bc0; color: #fff; font-size: .68rem; padding: 1px 6px; border-radius: 999px; font-weight: 700; }
.lc-goal-card__text { margin: .25rem 0 .3rem; font-size: .95rem; color: #2c3550; line-height: 1.55; overflow-wrap: anywhere; }
.lc-goal-card__deadline { font-size: .78rem; color: #7a8299; font-weight: 600; }

@media (max-width: 600px) {
  .lc-goal-banner { flex-wrap: wrap; gap: 10px; padding: 12px 14px; }
  .lc-goal-banner__actions { flex-direction: row; width: 100%; }
  .lc-goal-banner__btn { flex: 1; }
  .lc-goal-modal__inner { padding: 24px 18px; border-radius: 16px; }
  .lc-goal-modal__title { font-size: 1.2rem; }
}

/* ── 目標モーダル: 公開選択（必須）＆ 閉じるボタン ── */
.lc-goal-modal__pane { position: relative; }

.lc-goal-close {
  position: absolute; top: -8px; right: -6px;
  width: 36px; height: 36px;
  border: none; border-radius: 50%;
  background: #f2f4fb; color: #6b7590;
  font-size: 1rem; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s, transform .08s;
}
.lc-goal-close:hover { background: #e5e9f5; color: #3d4763; }
.lc-goal-close:active { transform: scale(.94); }

.lc-goal-radio {
  border: 2px solid #e3e7f4;
  border-radius: 12px;
  padding: .85rem 1rem 1rem;
  margin: 0 0 1.2rem;
  text-align: left;
  transition: border-color .15s, background .15s;
}
.lc-goal-radio.is-error {
  border-color: #e05a5a;
  background: #fff5f5;
  animation: lc-goal-shake .3s;
}
@keyframes lc-goal-shake {
  0%,100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}
.lc-goal-radio legend {
  padding: 0 .3rem;
  display: flex; align-items: center; gap: .5rem;
}
.lc-goal-req {
  background: #e05a5a; color: #fff;
  font-size: .68rem; font-weight: 800;
  padding: 2px 7px; border-radius: 999px; letter-spacing: .04em;
}
.lc-goal-radio__item {
  display: flex; align-items: flex-start; gap: .6rem;
  padding: .55rem .5rem;
  border-radius: 8px;
  font-size: .9rem; color: #4a5474; line-height: 1.55;
  cursor: pointer;
  transition: background .12s;
}
.lc-goal-radio__item:hover { background: #f6f8fd; }
.lc-goal-radio__item input { margin-top: 3px; flex: 0 0 auto; accent-color: #5c6bc0; width: 17px; height: 17px; }
.lc-goal-radio__item strong { color: #2c3550; }
.lc-goal-radio .lc-goal-field__hint { padding-left: .5rem; }

@media (max-width: 600px) {
  .lc-goal-close { top: -4px; right: -2px; width: 34px; height: 34px; }
}

/* ── 受講制限メッセージ: 2行・赤文字で強調 ── */
.lc-today-modal__desc {
  color: #d32f2f !important;
  font-weight: 700;
  line-height: 1.75;
  text-align: center;
}