/* =====================================================================
   授業のかたち（system/）だけのCSS。共通部品は common.css。
   ①3コマの流れ ②授業の中身（黒板の上のステップ） ③使うもの ④時間割（準備中）
   ===================================================================== */

/* ---------- ①3コマの流れ（.flow を3コマに広げる） ---------- */
.flow.three{grid-template-columns:1fr auto 1fr auto 1fr}
.flow.three li h3 small{min-height:1.5em}
#week .sub{margin-top:18px;font-size:16px;color:var(--ink-2)}

/* ---------- ②授業の中身：黒板の上に4つのステップ ---------- */
.board .steps li{border-color:transparent}
.steps.lesson h3{font-size:22px}

/* ---------- ③使う機器：3つの小さな箱（ピクト＋名前） ---------- */
.devices{list-style:none;padding:0;margin:26px 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.devices li{background:var(--box);color:var(--ink);border:2px solid var(--band);border-radius:12px;padding:14px 14px 12px;text-align:center;font-weight:700;font-size:18px}
.devices li .pict{width:min(100%,120px);margin:0 auto 6px}
.devices li small{display:block;font-size:14px;font-weight:400;color:var(--ink-2);line-height:1.6}
.sub-h{font-size:22px;margin-top:44px;padding-bottom:8px;border-bottom:3px solid var(--ai)}

/* ---------- ④時間割：準備中の大きな枠 ---------- */
.tt-box{margin-top:26px;border:3px dashed var(--ai);border-radius:12px;padding:28px 20px;text-align:center;background:var(--paper)}
.tt-box .wip{margin-top:0;font-size:18px}
.tt-box p + p{margin-top:12px}
.tt-box .sub{font-size:16px;color:var(--ink-2)}

/* ---------- 画面幅 ---------- */
@media (max-width:900px){
  .flow.three{grid-template-columns:1fr}
}
@media (max-width:640px){
  .devices{grid-template-columns:1fr 1fr 1fr;gap:8px}
  .devices li{padding:10px 6px 8px;font-size:15px}
  .devices li small{font-size:14px}
  .steps.lesson{grid-template-columns:1fr 1fr}
  .steps.lesson h3{font-size:19px}
  .tt-box{padding:22px 14px}
}