.hidden {
  display: none !important;
}

.player {
  position: relative;
  height: 0;
  padding: 0 0 56.25%;
  overflow: hidden;
}

.player video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/** アクセス禁止時のメッセージ **/
div.access-denied {
  position: absolute;
  display: flex;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #111;
  text-align: center;
  z-index: 1001;
  justify-content: center;
  align-items: center;
}

/** 終了後の以降ボタン対応 **/
div.after-url-link-area {
  position: absolute;
  display: flex;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(10, 10, 10, 0.3);
  text-align: center;
  z-index: 1000;
  justify-content: center;
  align-items: center;
}

@media screen and (min-width: 768px) {
div.access-denied .contents p {
  font-size: 1.5rem;
  color: #eee;
}

div.after-url-link-area .contents p {
  font-size: 1.5rem;
  color: #eee;
}

div.after-url-link-area .contents a {
  font-size: 1.25rem;
}

div.after-url-link-area .reload {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
}

.btn-outline-reload {
  color: #eee;
  border-width: 0;
  font-size: 2rem;
}

}

@media screen and (max-width: 767px) {
div.access-denied .contents p {
  font-size: 1.0rem;
  color: #eee;
}

div.after-url-link-area .contents p {
  font-size: 1.0rem;
  color: #eee;
}

div.after-url-link-area .contents a {
  font-size: 1.0rem;
}

div.after-url-link-area .reload {
  position: absolute;
  left: 0;
  bottom: 0;
}

.btn-outline-reload {
  color: #eee;
  border-width: 0;
  font-size: 1.5rem;
}

}

.btn-outline-reload:hover {
  color: #eee;
  background-color: #1266f1;
}