html.is-intro-playing:not(.is-intro-fading),
html.is-intro-playing:not(.is-intro-fading) body {
  overflow: hidden;
}

.is-intro-playing:not(.is-intro-fading) .l-container {
  visibility: hidden;
}

.intro {
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  background: #000;
  opacity: 1;
  transition: opacity 1s ease-out;
}

.intro.is-fading {
  opacity: 0;
}

.intro[hidden] {
  display: none;
}

.intro__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.intro__skip {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
  border-radius: 0;
  box-shadow: none;
  outline: none;
  position: absolute;
  right: max(30px, env(safe-area-inset-right));
  bottom: max(30px, env(safe-area-inset-bottom));
  min-width: 100px;
  min-height: 38px;
  padding: 6px 22px;
  border: 1px solid #fff;
  background: rgba(0, 0, 0, .45);
  color: #fff;
  font: inherit;
  font-family: "futura-pt", "Roboto", "Noto Sans JP", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
  font-size: 1.8rem;
  line-height: 1.2;
  text-align: center;
  letter-spacing: .15em;
  cursor: pointer;
}

@media (hover: hover) {
  .intro__skip:hover {
    background: #fff;
    color: #000;
  }
}

@media (min-width: 769px) {
  .intro__video {
    width: 100vw;
    height: 100vh;
    object-fit: cover;
  }
}

@media (max-width: 768px) {
  .intro__skip {
    right: max(16px, env(safe-area-inset-right));
    bottom: max(16px, env(safe-area-inset-bottom));
    min-width: 76px;
    min-height: 30px;
    padding: 5px 16px;
    font-size: 1.4rem;
  }
}