/* utility */
.mt-05 { margin-top: 5px; }
.px-10 { padding-left: 10px; padding-right: 10px;}
.py-15 { padding-top: 15px; padding-right: 15px;}
.ratio-16-9 { aspect-ratio: 16 / 9; }
.font-14 { font-size: 14px; }
.font-bold { font-weight: bold; }
.center-screen {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
.grid { display: grid; }
.grid-3 { grid-template-columns: repeat(3,1fr); }
@media screen and (max-width: 750px) {
  .grid-1-sp { grid-template-columns: repeat(1,1fr); }
}
.gap-15 { gap: 15px; }
.bg-white { background-color: #fff; }
.overlay-black {
  position: fixed;
  inset: 0;
  z-index: 9999;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.8);
}

/* class */
.Video {
  aspect-ratio: 16 / 9;
  position: relative;
  background: #d6d6d6;
}
.Video:hover {
  cursor: pointer;
  opacity: .7;
}
.Video::before,.Video::after {
  content: "";
  position: absolute;
}
.Video::before {
  top: calc(50% - 8px);
  left: calc(50% - 5px);
  transform: translate( calc(50% - 5px), calc(50% - 8px));
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 12px solid #fff;
  z-index: 1;
}
.Video::after {
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 36px;
  height: 36px;
  background-color: #333;
  border-radius: 50%;
}
.Video img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}