/* ============================================================
   文字の見え方を変えるバー（読む人が操作します）
   企画一覧（play/index.php）と企画詳細（play/日付/index.php）で共通
   2026/08/29
   ============================================================ */
.vbar{
  position:sticky; top:0; z-index:70;
  background:#f4e2f6; border-bottom:1px solid #e3bfe0;
}
.vbar .in{
  max-width:980px; margin:0 auto; padding:7px 12px;
  display:flex; gap:8px; align-items:center; justify-content:center; flex-wrap:wrap;
}
.vbar .lb{ font-size:15px; font-weight:700; color:#8a3a7f; }
.vbar button{
  font-family:inherit; font-weight:700; font-size:15px;
  background:#ffffff; border:1px solid #e3bfe0; color:#8a3a7f;
  border-radius:999px; padding:6px 16px; cursor:pointer; line-height:1.4;
  min-height:36px;
}
.vbar button:hover{ background:#fbf0fa; }
.vbar button.on{ background:#d81b8c; color:#ffffff; border-color:#d81b8c; }
.vbar button[disabled]{ opacity:.4; cursor:default; }
.vbar #vbNow{ min-width:3.5em; text-align:center; }

@media (max-width:640px){
  .vbar .in{ gap:6px; padding:6px 8px; }
  .vbar button{ padding:6px 12px; font-size:14px; }
  .vbar .lb{ font-size:14px; }
}

/* 文字の大きさ（ページ全体を拡大・縮小します） */
html.vb-s-3 body{ zoom:.85; }
html.vb-s-2 body{ zoom:.90; }
html.vb-s-1 body{ zoom:.95; }
html.vb-s1  body{ zoom:1.10; }
html.vb-s2  body{ zoom:1.20; }
html.vb-s3  body{ zoom:1.30; }

/* スマホの「標準」をさらに1段階小さく --- 2026/08/31
   （前回=旧−2相当 → 今回=旧−3相当。＋−の操作は同じように効く） */
@media (max-width:640px){
  body{ zoom:.855; }
  html.vb-s-3 body{ zoom:.727; }
  html.vb-s-2 body{ zoom:.770; }
  html.vb-s-1 body{ zoom:.812; }
  html.vb-s1  body{ zoom:.941; }
  html.vb-s2  body{ zoom:1.026; }
  html.vb-s3  body{ zoom:1.112; }
}

/* バー自体は拡大しない（操作しづらくなるため） */
html[class*="vb-s"] .vbar{ zoom:1; }

/* 太字 */
html.vb-bold body{ font-weight:700; }
html.vb-bold p,
html.vb-bold li,
html.vb-bold td,
html.vb-bold th,
html.vb-bold span,
html.vb-bold div,
html.vb-bold a{ font-weight:700; }