@charset 'utf-8';

/** video.js のスキン上書き用 */

.vjs-sample-skin {
  font-size: 14px !important;
}

:not(.vjs-has-started) .vjs-control-bar {
  display: flex;
}

.video-js .vjs-progress-control {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 3em;
  margin-left: 0;
  margin-right: 0;
  width: 100%;
  height: 10px;
}

.video-js .vjs-spacer {
  flex: 1;
}

.video-js .vjs-menu-button-popup .vjs-menu .vjs-menu-content {
  max-height: 20em;
}

.video-js .vjs-time-control {
  font-size: 14px !important;
  padding: 0 0.5em;
  display: block;
}

.video-js .vjs-time-divider {
  min-width: initial;
  padding: 0 0.5em;
}

.vjs-chapters-button .vjs-menu-content {
  right: -4.5em !important;
  z-index: 101;
}

.vjs-chapters-button .vjs-menu-content li.vjs-menu-item {
  text-align: left;
  font-size: 1em;
  padding: 0.3em 0.5em;
}

li.vjs-menu-item {
  text-transform: none;
}

@media screen and (min-width: 768px) {
  .vjs-chapters-button .vjs-menu-content {
    width: 40em !important;
  }
}

@media screen and (max-width: 767px) {
  .vjs-chapters-button .vjs-menu-content {
    max-height: 12em !important;
    width: 22em !important;
  }
}

@media screen and (max-width: 767px) and (min-width: 576px) {
}

@media screen and (max-width: 575px) {
  /** 一定以下の場合は非表示 **/
  .video-js .vjs-volume-control {
    display: none;
  }
}

@media screen and (max-width: 479px) {
  /** 一定以下の場合は非表示 **/
  .video-js .vjs-mute-control {
    display: none;
  }

  /** サイズによって selector の高さを変える **/
  .video-js .vjs-quality-selector .vjs-menu-content {
    max-height: 12em !important;
  }
}

@media screen and (max-width: 319px) {
  /** 一定以下の場合は非表示 **/
  .video-js .vjs-time-divider,
  .video-js .vjs-duration-display {
    display: none;
  }
}

@media screen and (max-width: 575px) {
  /** 一定以下の場合は非表示とサイズ変更 **/
  .video-js .vjs-menu-button {
    width: 3em;
  }
}

.vjs-tip {
  font-size: 14px;
}

.vjs-tip .vjs-tip-inner {
  text-align: left;
  max-width: 300px;
}