/* ===== curriculum: カリキュラムのページと、ホームの先頭に出すおすすめのカード ===== */

/* おすすめのカード。コンテンツのサムネイルと同じ形だが、絵は低くして名前と説明を先に見せる */
.catbox .lesson.thumb.nextcard{width:100%}
.lesson.thumb.nextcard .art{aspect-ratio:auto;height:132px}
.lesson.thumb.nextcard .body{padding:12px}
.lesson.thumb.nextcard .t b{font-size:17px}
.lesson.thumb.nextcard .t span{-webkit-line-clamp:3}

/* いまの設定のチップ。ラベルを小さく前に置き、開いているものは色を付ける */
.curchips .chip{display:inline-flex;align-items:center;gap:6px;text-align:left}
.curchips .chip .cl{font-size:11px;font-weight:800;color:var(--ink3)}
.curchips .chip.on,.curopts .chip.on{background:var(--accent-soft);border-color:var(--accent);color:var(--ink)}
.curopts{margin-top:2px}
.curlead{margin:0 2px 2px;font-size:15px;color:var(--ink2)}

/* 場面ごとの 3 段階の帯 */
.stagerow{padding:8px 2px 4px;border-top:1px solid var(--line)}
.stagerow:first-child{border-top:0}
.stagerow .sname{font-size:14px;font-weight:800;color:var(--ink);margin-bottom:6px}
.stagerow .sbar{display:flex;align-items:center;gap:8px;margin-top:4px}
.stagerow .bn{flex:none;width:46px;font-size:12px;font-weight:700;color:var(--ink3)}
.stagerow .bt{flex:1;height:8px;border-radius:999px;background:var(--surface2);overflow:hidden}
.stagerow .bt i{display:block;height:100%;border-radius:999px;background:var(--accent)}
.stagerow .bv{flex:none;min-width:48px;text-align:right;font-size:12px;font-weight:800;color:var(--ink3)}

@media (max-width:560px){
  .lesson.thumb.nextcard .art{height:112px}
  .stagerow .bv{min-width:42px}
}