/* Nettoge Core - Clip Loop（2026-10-05） */
video.ntg-loop {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  background: #000;
  cursor: pointer;
}
/* 映画の横長（2.4:1、上下の黒い帯を切った物 1280x534。2026-10-06 ARC 凍った道） */
video.ntg-loop.is-wide {
  aspect-ratio: 1280 / 534;
}

/* 再生バー（2026-10-06）。見える帯は細く、押せる所は上下に広く取る */
.ntg-loop-bar {
  position: relative;
  height: 16px;
  margin-top: 2px;
  cursor: pointer;
  touch-action: none;
}
.ntg-loop-bar::before,
.ntg-loop-bar__fill {
  position: absolute;
  left: 0;
  right: 0;
  top: 4px;
  height: 4px;
  border-radius: 2px;
  transition: height .15s, top .15s;
}
.ntg-loop-bar::before {
  content: "";
  background: rgba(128, 128, 128, .3);
}
.ntg-loop-bar__fill {
  background: var(--color_main, #3a7be0);
  transform: scaleX(0);
  transform-origin: left center;
}
.ntg-loop-bar:hover::before,
.ntg-loop-bar:hover .ntg-loop-bar__fill,
.ntg-loop-bar.is-drag::before,
.ntg-loop-bar.is-drag .ntg-loop-bar__fill,
.ntg-loop-bar:focus-visible::before,
.ntg-loop-bar:focus-visible .ntg-loop-bar__fill {
  top: 2px;
  height: 8px;
}
.ntg-loop-bar:focus-visible {
  outline: 2px solid var(--color_main, #3a7be0);
  outline-offset: 2px;
}

.ntg-loop-bar.is-paused + figcaption::before {
  content: "▶ 押すと動きます　";
}