/* ============================================================
   教室・スクールの世界（黒板）の見た目。土台（_engine/engine.css）の上に重ねる。
   例の出方：黒板の札に、白墨の枠が 上 → 右 → 下 → 左 の順に引かれ、中の字が左から書かれる。
   流れの3つ：白墨で描いた手書きの枠が、左から書かれていく。
   ============================================================ */

/* 困りごとの一覧：白墨の破線の罫 */
.w-kyoshitsu .toc__list{border-top:2px solid rgba(241,241,230,.6)}
.w-kyoshitsu .toc__list a{border-bottom:1.5px dashed rgba(241,241,230,.3)}
.w-kyoshitsu .toc__no{padding:1px 9px;border:1.5px solid #F2D35B;border-radius:4px 9px 5px 8px}

/* ---------- 黒板の札：白墨の枠が引かれる ---------- */
.w-kyoshitsu .vcard{max-width:min(100%,620px)}
html.lp-on.w-kyoshitsu .vcard{opacity:calc(.2 + .8 * var(--e1,1));transform:translate3d(0,calc((1 - var(--eo,1)) * 26px),0)}
.w-kyoshitsu .vcard__in{padding:34px 28px 36px;border-radius:3px;background:#1E3B2F;color:#F4F3EA;
  box-shadow:inset 0 0 50px rgba(0,0,0,.35),0 0 0 6px #6B4A2B,0 0 0 7px rgba(0,0,0,.4),0 26px 50px rgba(0,0,0,.5)}
.w-kyoshitsu .vcard__in::before{content:"";position:absolute;inset:10px;pointer-events:none;opacity:.88;
  filter:drop-shadow(0 0 2px rgba(241,241,230,.55));
  background:
    linear-gradient(90deg,#F1F1E6,#F1F1E6) left top / calc(var(--c1,1) * 100%) 2.5px no-repeat,
    linear-gradient(#F1F1E6,#F1F1E6) right top / 2.5px calc(var(--c2,1) * 100%) no-repeat,
    linear-gradient(90deg,#F1F1E6,#F1F1E6) right bottom / calc(var(--c3,1) * 100%) 2.5px no-repeat,
    linear-gradient(#F1F1E6,#F1F1E6) left bottom / 2.5px calc(var(--c4,1) * 100%) no-repeat}
html.lp-on.w-kyoshitsu .vcard__voice{clip-path:inset(-6px calc((1 - var(--e2,1)) * 100%) -6px -14px)}
.w-kyoshitsu .vcard__code{padding:1px 10px;border:1.5px solid #F2D35B;border-radius:4px 9px 5px 8px;color:#F2D35B}
.w-kyoshitsu .vcard__voice .q{color:#F2D35B}
.w-kyoshitsu .badge--live{color:#FFB199}
.w-kyoshitsu .badge--trial{color:#F2D35B}

/* ---------- こう変わる：黄色の白墨の線 ---------- */
.w-kyoshitsu .scene__title::before{content:"";display:block;width:58px;height:4px;margin-bottom:16px;border-radius:2px;background:#F2D35B;
  transform:rotate(-2deg);box-shadow:0 0 6px rgba(242,211,91,.5)}

/* ---------- 流れ：手書きの枠が書かれていく ---------- */
.w-kyoshitsu .flow__list li{border:2px solid rgba(241,241,230,.72);border-radius:5px 12px 6px 10px;background:rgba(19,39,31,.55)}
.w-kyoshitsu .flow__list li + li::before{width:2px;background:rgba(241,241,230,.7)}
html.lp-on.w-kyoshitsu .flow__list li{opacity:1;transform:none;clip-path:inset(-18px calc((1 - var(--r,1)) * 100%) -4px -4px)}

/* ---------- 画面のイメージ：白墨の点線で囲む ---------- */
.w-kyoshitsu .mock__body{outline:2px dashed rgba(241,241,230,.5);outline-offset:9px}
html.lp-on.w-kyoshitsu .mock{opacity:var(--m0,1);transform:rotate(calc((1 - var(--m0,1)) * 2deg)) scale(calc(.93 + .07 * var(--m0,1)))}

.w-kyoshitsu .tags li{border-style:dashed}

@media (min-width:980px){
  .w-kyoshitsu .vcard{margin-left:4%}
}