/* =====================================================================
   授業動画（videos/）だけのCSS。共通部品は common.css。
   ①動画4本の大きな格子（画像＋再生マーク。本番はYouTube埋め込み） ②科目と教科書の表 ③動画の使い方
   ===================================================================== */

/* ---------- ①動画の格子（2列。画像＋赤い再生マーク＋見出し） ---------- */
.vgrid{list-style:none;padding:0;margin:30px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:26px 28px}
.vgrid > li{min-width:0}
.frame{position:relative;display:block;text-decoration:none;color:var(--ink);border:2px solid var(--band);background:var(--box);border-radius:10px;overflow:hidden}
.frame img{width:100%;aspect-ratio:16/9;object-fit:cover}
.frame .play{position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;background:var(--pen);color:#fff;display:grid;place-items:center;box-shadow:0 0 0 7px rgba(255,255,255,.85)}
.frame .play svg{width:26px;height:26px;margin-left:3px}
.frame:hover .play,.frame:focus-visible .play{background:var(--ai)}
/* 本番のYouTube埋め込み（iframe）に差し替えたときも同じ枠に収まるように */
.frame iframe{display:block;width:100%;aspect-ratio:16/9;height:auto;border:0}
.vcap{margin-top:10px;font-size:18px;font-weight:700;line-height:1.5}
.vcap small{display:block;font-family:"BIZ UDPGothic",sans-serif;font-size:14px;font-weight:700;color:var(--ai);margin-bottom:2px}
.vlead{margin-top:14px;font-size:16px;color:var(--ink-2)}
.vfree{display:inline-block;background:var(--yellow);color:var(--on-yellow);border-radius:6px;padding:0 10px;font-weight:900;font-family:"Zen Kaku Gothic New","Hiragino Sans",sans-serif;margin-left:4px}

/* ---------- ②科目と教科書（黒板の上の表） ---------- */
.tbl.subjects th[scope="row"]{white-space:nowrap;font-weight:700;width:9em}
.tbl.subjects td small{display:block;font-size:14px;opacity:.85}

/* ---------- ③動画の使い方（.facts を3つ・1列に） ---------- */
.facts.howto{grid-template-columns:1fr;max-width:640px}

/* ---------- 画面幅 ---------- */
@media (max-width:640px){
  .vgrid{grid-template-columns:1fr;gap:20px}
  .vcap{font-size:17px}
  .frame .play{width:56px;height:56px;margin:-28px 0 0 -28px}
}