@charset "utf-8";

/* リセット */
*,
*::before,
*::after { margin:0; padding:0; box-sizing:border-box; }

html, body {
  width:100%;
  height:100%;
  overflow:hidden;
  background:#000;          /* ← ここだけでOK（重複を1つに） */
  font-family:sans-serif;
  line-height:1.5;
}

/* 初期動画／アクション動画 */
#video-container,
#action-video-container {
  position:absolute; top:0; left:0;
  width:100%; height:100%;
  background:#000;
}

/* 動画 */
video { width:100vw; height:100vh; object-fit:contain; }

/* フェードイン（入場時に使うなら） */
.fade-in { animation: fadeIn .6s ease-in-out both; }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }

/* 退場は「黒マスク」一本化：html に fade-out が付いたら覆う */
html.fade-out::before {
  content:"";
  position:fixed; inset:0;
  background:#000;
  pointer-events:none;
  opacity:0;
  animation:maskIn .5s ease-in-out forwards;  /* JSの500msと一致 */
  z-index:99999;
}
@keyframes maskIn { from{opacity:0} to{opacity:1} }