/* Lite YouTube Embed CSS */

.lite-youtube {
  background-color: #000;
  position: relative;
  display: block;
  contain: content;
  background-position: center center;
  background-size: cover;
  cursor: pointer;
  max-width: 100%;
}

.lite-youtube::before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjgiIGhlaWdodD0iNDgiIHZpZXdCb3g9IjAgMCA2OCA0OCI+PHBhdGggZD0iTTY2LjUyLDcuNTJjLS43OC0yLjkzLTIuNDktNS40MS01LjQyLTYuMTlDNTYuNzksLjU5LDM0LDAuNTksMzQsMC41OVMzLjIxLC41OSwxLjUsMS4zM0MtMS40MywyLjEyLTMuMTQsNC42LTQuMTIsNy41MkMtNC44MSw5LjgxLTQuODEsMjQsLTQuODEsMjRTNC44MSwzOC4xOSw2LjUyLDQwLjQ4YzAuNzgsMi45MywyLjQ5LDUuNDEsNS40Miw2LjE5QzEzLjIxLDQ3LjQxLDM0LDQ3LjQxLDM0LDQ3LjQxczMwLjc5LDAsMzIuNS0wLjc4YzIuOTMtMC43OCw0LjY0LTMuMjYsNS40Mi02LjE5QzcyLjgxLDM4LjE5LDcyLjgxLDI0LDcyLjgxLDI0UzcyLjgxLDkuODEsNjYuNTIsNy41MnoiIGZpbGw9IiNmZmYiLz48cGF0aCBkPSJNNDUuMjMsMjRMNjYuNTIsNy41MlY0MC40OEw0NS4yMywyNHoiIGZpbGw9IiNmZmYiLz48L3N2Zz4=);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 68px 48px;
  width: 68px;
  height: 48px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: opacity 0.3s;
}

.lite-youtube:hover::before {
  opacity: 0.8;
}

.lite-youtube iframe {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  border: 0;
}

.lite-youtube.activated {
  cursor: unset;
}

.lite-youtube.activated::before,
.lite-youtube.activated > .lty-playbtn {
  opacity: 0;
  pointer-events: none;
}

.lite-youtube .lty-playbtn {
  width: 68px;
  height: 48px;
  background-color: transparent;
  z-index: 1;
  opacity: 0.8;
  border: 0;
  cursor: pointer;
}

.lite-youtube .lty-playbtn:focus {
  outline: 0;
  opacity: 1;
}

.lite-youtube.lyt-activated {
  cursor: unset;
}

.lite-youtube.lyt-activated::before,
.lite-youtube.lyt-activated > .lty-playbtn {
  opacity: 0;
  pointer-events: none;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
  .lite-youtube::before {
    background-size: 48px 34px;
    width: 48px;
    height: 34px;
  }

  .lite-youtube .lty-playbtn {
    width: 48px;
    height: 34px;
  }
}