@charset "UTF-8";
.ad-block-overlay {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  display: block;
}

.vjs-overlay {
  z-index: -1;
  /** CHANGE THIS **/
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  display: block;
}

.vjs-big-play-button {
  display: none;
}

div[style*="56.25"] > div:first-child[style*="initial"] {
  display: none;
}

/**
 * 関連動画オーバーレイ
 */
.related-video-container {
  position: absolute;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  left: 0px;
  top: 0px;
  padding-top: 88px;
  text-align: center;
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0.8);
  font-size: 0px;
}

.related-video-container .related-video-list {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  box-sizing: border-box;
  width: 596px;
  padding: 0;
  margin: 0 auto;
  background-color: rgba(0, 0, 0, 0);
  text-align: left;
  overflow: hidden;
}

.related-video-container .related-video {
  vertical-align: top;
  width: 178px;
  list-style: none;
  padding: 0;
  margin: 0px 10px 10px;
}

.related-video-container .related-video-thumbnail > img {
  width: 178px;
  height: 100px;
}

.related-video-container .related-video-title {
  margin-top: 6px;
  width: 100%;
  max-height: 83px;
  overflow: hidden;
  text-align: left;
}

.related-video-container .related-video-title > p {
  padding: 0;
  margin: 0;
  font-size: 13px;
  color: #c8c8c8;
}

.related-video > a {
  text-decoration: none;
  display: block;
  position: relative;
}

.related-video > a:after {
  content: "";
  display: block;
  background: #000;
  opacity: 0;
  width: 178px;
  height: 100px;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transition: .2s;
  transition: .2s;
}

.related-video > a:hover:after {
  opacity: .5;
}

#adContainer {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  overflow: hidden;
}

.vjs-control-bar {
  z-index: 2147483649;
}

.vjs-waiting .vjs-big-play-button {
  display: none;
}

.vjs-loading-spinner {
  z-index: 2147483650;
}

.vjs-live .vjs-progress-control {
  display: none !important;
}

.ads-time {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-left: 1em;
  font-size: 1em;
}

.ads-timer {
  min-width: 2em;
  font-size: inherit;
  -webkit-box-flex: 0;
      -ms-flex: 0 1 auto;
          flex: 0 1 auto;
}

.ads-progressContainer {
  display: none;
  -webkit-box-flex: 0;
      -ms-flex: none;
          flex: none;
  position: absolute;
  left: 0;
  top: -.3em;
  height: .3em;
  width: 100%;
  background: rgba(115, 133, 159, 0.5);
  -webkit-transition: .2s linear;
  transition: .2s linear;
}

.not-hover .ads-progressContainer {
  top: -.3em;
  height: .3em;
}

.ads-progress {
  -webkit-box-flex: 0;
      -ms-flex: none;
          flex: none;
  position: absolute;
  left: 0;
  top: 0;
  height: .3em;
  width: 0%;
  background: #ffe400;
  -webkit-transition: .2s linear;
  transition: .2s linear;
}

.not-hover .ads-progress {
  height: .3em;
}

.ads-button {
  cursor: pointer;
  outline: none;
  position: relative;
  text-align: center;
  margin: 0;
  padding: 0;
  height: 100%;
  width: 4em;
  color: inherit;
  font-family: VideoJS;
  font-weight: normal;
  font-style: normal;
  font-size: inherit;
  background: none;
  border: none;
  display: inline-block;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  -webkit-box-flex: 0;
      -ms-flex: none;
          flex: none;
}

.ads-button:before {
  font-size: 1.8em !important;
  color: inherit;
  line-height: 1.67 !important;
  text-align: center;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.ads-button:hover:before {
  text-shadow: 0 0 1em #fff,0 0 1em #fff,0 0 1em #fff;
}

.ads-play:before {
  content: "\f101";
}

.ads-pause:before {
  content: "\f103";
}

.vjs-ad-playing.vjs-ad-playing .vjs-progress-control {
  pointer-events: none;
}

.vjs-ad-playing.vjs-ad-playing .vjs-play-progress {
  background-color: #ffe400;
}

.vjs-ad-playing.vjs-ad-loading .vjs-loading-spinner {
  display: block;
}

.vjs-ad-playing .vjs-captions-button, .vjs-ad-playing .vjs-audio-button {
  display: none;
}

.vjs-ima3-ad-container {
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.vjs-ima3-html5 .vjs-ima3-ad-container > * {
  width: 100% !important;
  height: 100% !important;
}

.vjs-ima3-html5 .vjs-ima3-ad-container > * iframe {
  width: 100% !important;
  height: 100% !important;
}

.vjs-ima3-ad-container, .vjs-ima3-click-tracker {
  pointer-events: none;
  left: -9999px;
}

.vjs-ima3-flash-ad-container {
  left: 0;
}

.vjs-ima3-ad-background {
  width: 100%;
  height: 100%;
  background-color: transparent;
  position: absolute;
  top: 0;
  left: 0;
}

.vjs-ad-playing .vjs-ima3-ad-background {
  background-color: #000;
}

.ima3-ad-loading.ima3-loading-spinner .vjs-loading-spinner {
  display: block;
}

.vjs-ima3-flash.vjs-ad-playing .vjs-tech {
  opacity: 0;
}

.vjs-ad-playing .vjs-ima3-ad-container, .vjs-ad-playing .vjs-ima3-click-tracker {
  left: 0;
}

.vjs-ima3-overlay .vjs-ima3-ad-container, .vjs-ima3-overlay .vjs-ima3-click-tracker {
  left: 0;
}

.vjs-ima3-flash.vjs-ad-playing .vjs-ima3-ad-container, .vjs-ima3-flash.vjs-ima3-overlay .vjs-ima3-ad-container {
  cursor: pointer;
  pointer-events: auto;
}

.vjs-mouse.vjs-ima3-html5.vjs-ad-playing .vjs-ima3-ad-container, .vjs-mouse.vjs-ima3-html5.vjs-ad-playing .vjs-ima3-click-tracker {
  cursor: pointer;
  pointer-events: auto;
}

.vjs-mouse.vjs-ima3-html5.vjs-ima3-overlay .vjs-ima3-ad-container, .vjs-mouse.vjs-ima3-html5.vjs-ima3-overlay .vjs-ima3-click-tracker {
  cursor: pointer;
  pointer-events: auto;
}

.vjs-user-active.vjs-ad-playing.vjs-ima3-html5 .vjs-ima3-ad-container, .vjs-user-active.vjs-ad-playing.vjs-ima3-html5 .vjs-ima3-click-tracker {
  cursor: pointer;
  pointer-events: auto;
}

.vjs-user-active.vjs-ima3-overlay.vjs-ima3-html5 .vjs-ima3-ad-container, .vjs-user-active.vjs-ima3-overlay.vjs-ima3-html5 .vjs-ima3-click-tracker {
  cursor: pointer;
  pointer-events: auto;
}

.vjs-ima3-html5.vjs-using-native-controls.vjs-ima3-paused.vjs-ima3-paused .vjs-ima3-ad-container, .vjs-ima3-html5.vjs-using-native-controls.vjs-ima3-paused.vjs-ima3-paused .vjs-ima3-click-tracker {
  pointer-events: none;
}

.vjs-ima3-click-tracker {
  bottom: 0;
  left: 0;
  margin: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.vjs-ima3-overlay .vjs-ima3-click-tracker {
  top: auto;
  margin: 0 auto;
}

.vjs-control-bar.vjs-control-bar.vjs-ad-control-bar.vjs-ad-control-bar {
  display: none;
}

.vjs-ad-controls.vjs-ad-playing .vjs-control-bar.vjs-control-bar, .vjs-ad-controls.vjs-ad-playing.vjs-using-native-controls .vjs-ad-control-bar.vjs-ad-control-bar, .vjs-ad-controls.vjs-ad-playing.vjs-controls-disabled .vjs-ad-control-bar.vjs-ad-control-bar {
  display: none;
}

.vjs-ad-playing .vjs-dock-text, .vjs-ad-playing .vjs-dock-shelf {
  display: none;
}

.vjs-ad-controls.vjs-ad-playing .vjs-control-bar.vjs-ad-control-bar {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.vjs-ad-controls.vjs-ad-playing.vjs-no-flex .vjs-control-bar.vjs-ad-control-bar {
  display: table;
}

.vjs-mouse .vjs-control-bar.vjs-ad-control-bar .vjs-progress-control:hover {
  height: 0.5em;
  top: -0.5em;
}

.vjs-mouse .vjs-control-bar.vjs-ad-control-bar .vjs-progress-control:hover .vjs-mouse-display {
  display: none;
}

.vjs-mouse .vjs-control-bar.vjs-ad-control-bar .vjs-progress-control:hover .vjs-mouse-display:after {
  display: none;
}

.vjs-mouse .vjs-progress-control:hover .vjs-play-progress:after {
  display: none;
}

.vjs-ima3-flash.vjs-ad-loading .vjs-tech, .vjs-ima3-html5.vjs-ad-loading .vjs-tech {
  opacity: 0;
}

.vjs-ima3-autoplay.vjs-ima3-not-playing-yet .vjs-poster, .vjs-ima3-autoplay.vjs-ima3-not-playing-yet .vjs-tech {
  opacity: 0;
}

.vjs-ima3-html5.vjs-ad-playing .vjs-ad-control-bar .vjs-play-progress {
  -webkit-transition: width 1s linear;
  transition: width 1s linear;
}

.vjs-ima3-flash.vjs-ad-playing .vjs-ad-control-bar .vjs-play-progress {
  -webkit-transition: width .25s linear;
  transition: width .25s linear;
}

.vjs-ima3-html5.vjs-ad-playing .vjs-ad-control-bar .vjs-play-progress.vjs-play-progress-resetting, .vjs-ima3-flash.vjs-ad-playing .vjs-ad-control-bar .vjs-play-progress.vjs-play-progress-resetting {
  -webkit-transition: width 0s linear;
  transition: width 0s linear;
}

.vjs-ima3-right-click.vjs-ima3-flash .vjs-ima3-ad-container {
  pointer-events: auto;
}

#BCcontainer {
  width: 100%;
  height: auto;
  clear: both;
  position: relative;
  /*.video-js .vjs-tech {
      position: static;
  }*/
}

#BCcontainer .video-js {
  /*size: auto auto;*/
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

#BCcontainer:before {
  content: "";
  display: block;
  padding-top: 56.25%;
  /* 高さと幅の比を16:9に固定。9/16*100=56.25 */
}

#click {
  /*size: auto auto;*/
  display: none;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  cursor: pointer;
  z-index: 1;
}

/** Custom **/
.vjs-progress-control.vjs-control .vjs-play-progress {
  background-color: #00b7ee !important;
}

.vjs-volume-level {
  background-color: #00b7ee !important;
}

.ads-progress {
  background-color: #00b7ee !important;
}

#liveButton {
  background-image: url("../images/LIVE.png");
  background-size: 3em 1.6em;
  margin-top: .6em;
  margin-left: 1em;
  width: 3em;
  height: 1.6em;
  background-repeat: no-repeat;
}

/** Mobile **/
@media only screen and (max-device-width: 980px) {
  .vjs-big-play-button {
    display: none !important;
  }
  .vjs-play-control {
    display: none !important;
  }
  #playButton {
    display: none !important;
    z-index: -1;
  }
  #newPlayButton, #forward10, #backward10, #backward20, #forward20 {
    margin-bottom: 20%;
  }
  #newPlayButton {
    -webkit-box-ordinal-group: 4;
        -ms-flex-order: 3;
            order: 3;
    background-image: url("../images/play.png");
    background-size: 4em 4em;
    background-repeat: no-repeat;
    padding-left: 1.4em;
    width: 4em;
    height: 4em;
    color: #fff;
    -webkit-transition: border-color .4s, outline .4s, background-color .4s;
    transition: border-color .4s, outline .4s, background-color .4s;
  }
  #forward10 {
    -webkit-box-ordinal-group: 5;
        -ms-flex-order: 4;
            order: 4;
    width: 3em;
    height: 3em;
    background-image: url("../images/forward10.png");
    background-size: 3em 3em;
    color: #fff;
    -webkit-transition: border-color .4s, outline .4s, background-color .4s;
    transition: border-color .4s, outline .4s, background-color .4s;
  }
  #backward10 {
    -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
            order: 2;
    width: 3em;
    height: 3em;
    background-image: url("../images/back10.png");
    background-size: 3em 3em;
    color: #fff;
    -webkit-transition: border-color .4s, outline .4s, background-color .4s;
    transition: border-color .4s, outline .4s, background-color .4s;
  }
  #backward20 {
    -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1;
    width: 3em;
    height: 3em;
    background-image: url("../images/back60.png");
    background-size: 3em 3em;
    color: #fff;
    -webkit-transition: border-color .4s, outline .4s, background-color .4s;
    transition: border-color .4s, outline .4s, background-color .4s;
  }
  #forward20 {
    -webkit-box-ordinal-group: 6;
        -ms-flex-order: 5;
            order: 5;
    width: 3em;
    height: 3em;
    background-image: url("../images/forward60.png");
    background-size: 3em 3em;
    color: #fff;
    -webkit-transition: border-color .4s, outline .4s, background-color .4s;
    transition: border-color .4s, outline .4s, background-color .4s;
  }
  .playIcon {
    background-image: url("../images/play.png");
  }
  .pauseIcon {
    background-image: url("../images/pause.png") !important;
  }
  #forward10:after {
    content: '';
  }
  #forward10,
  #forward20,
  #backward10,
  #backward20 {
    line-height: 1.2em;
    padding-left: .7em;
    padding-top: .4em;
  }
  #forward10:after,
  #forward20:after,
  #backward10:after,
  #backward20:after {
    font-size: 1.2em;
  }
  #forward20:after {
    content: '';
  }
  #backward10:after {
    content: '';
  }
  #backward20:after {
    content: '';
  }
  #newOverlay {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding-top: 1em;
    -ms-flex-pack: distribute;
        justify-content: space-around;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    z-index: 9999;
    background-color: rgba(1, 1, 1, 0);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
  }
  .firstplay {
    padding-top: 4em !important;
  }
}

/** Landscape **/
@media only screen and (orientation: landscape) {
  .vjs-play-control {
    display: none !important;
  }
  #playButton {
    display: none !important;
    z-index: -1;
  }
  #newPlayButton, #forward10, #backward10, #backward20, #forward20 {
    margin-bottom: 20%;
  }
  #newPlayButton {
    -webkit-box-ordinal-group: 4;
        -ms-flex-order: 3;
            order: 3;
    background-image: url("../images/play.png");
    background-size: 4em 4em;
    background-repeat: no-repeat;
    padding-left: 1.4em;
    width: 4em;
    height: 4em;
    color: #fff;
    -webkit-transition: border-color .4s, outline .4s, background-color .4s;
    transition: border-color .4s, outline .4s, background-color .4s;
  }
  #forward10 {
    -webkit-box-ordinal-group: 5;
        -ms-flex-order: 4;
            order: 4;
    width: 3em;
    height: 3em;
    background-image: url("../images/forward10.png");
    background-size: 3em 3em;
    color: #fff;
    -webkit-transition: border-color .4s, outline .4s, background-color .4s;
    transition: border-color .4s, outline .4s, background-color .4s;
  }
  #backward10 {
    -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
            order: 2;
    width: 3em;
    height: 3em;
    background-image: url("../images/back10.png");
    background-size: 3em 3em;
    color: #fff;
    -webkit-transition: border-color .4s, outline .4s, background-color .4s;
    transition: border-color .4s, outline .4s, background-color .4s;
  }
  #backward20 {
    -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1;
    width: 3em;
    height: 3em;
    background-image: url("../images/back60.png");
    background-size: 3em 3em;
    color: #fff;
    -webkit-transition: border-color .4s, outline .4s, background-color .4s;
    transition: border-color .4s, outline .4s, background-color .4s;
  }
  #forward20 {
    -webkit-box-ordinal-group: 6;
        -ms-flex-order: 5;
            order: 5;
    width: 3em;
    height: 3em;
    background-image: url("../images/forward60.png");
    background-size: 3em 3em;
    color: #fff;
    -webkit-transition: border-color .4s, outline .4s, background-color .4s;
    transition: border-color .4s, outline .4s, background-color .4s;
  }
  .playIcon {
    background-image: url("../images/play.png");
  }
  .pauseIcon {
    background-image: url("../images/pause.png") !important;
  }
  #forward10:after {
    content: '';
  }
  #forward10,
  #forward20,
  #backward10,
  #backward20 {
    line-height: 1.2em;
    padding-left: .7em;
    padding-top: .4em;
  }
  #forward10:after,
  #forward20:after,
  #backward10:after,
  #backward20:after {
    font-size: 1.2em;
  }
  #forward20:after {
    content: '';
  }
  #backward10:after {
    content: '';
  }
  #backward20:after {
    content: '';
  }
  #newOverlay {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding-top: 1em;
    -ms-flex-pack: distribute;
        justify-content: space-around;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    z-index: 9999;
    background-color: rgba(1, 1, 1, 0);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
  }
  .firstplay {
    padding-top: 4em !important;
  }
}

