.fvPlayerWrapper {
  min-width: 550px !important;
  background-color: #000;
  position: relative !important;
/*
  user-select: none !important;
  -moz-user-select: none !important;
  -webkit-user-select: none !important;
  -ms-user-select: none !important;
*/
  font-family: "Hiragino Kaku Gothic ProN","メイリオ", sans-serif !important;
  overflow: hidden; /* 180112 DVRの時刻ツールチップを追加時、スクロールバーが表示されてしまう現象の対策 */
}

.fvMobileScreen {
  min-width: 320px !important;
}

.slider-hit-area {
    top: -5px;
    width: 100%;
    height: 25px;
    position: absolute;
    background: 'transparent';
}

/* Loading Screen > */

div.fvVideoView>div.fvLodingView {
  background-color: rgba(0,0,0,0.3) !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
/*  z-index: 2 !important; */
}

div.fvVideoView>div.fvLodingView>.sk-fading-circle {
  top: 40% !important;
  width: 80px !important;
  height: 80px !important;
  position: relative !important;
  margin: 0 auto !important;
}

div.fvVideoView>div.fvLodingView>.sk-fading-circle .sk-circle {
  width: 100% !important;
  height: 100% !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
}

div.fvVideoView>div.fvLodingView>.sk-fading-circle .sk-circle:before {
  content: '' !important;
  display: block !important;
  margin: 0 auto !important;
  width: 15% !important;
  height: 15% !important;
  background-color: #ccc;
  border-radius: 100% !important;
  -webkit-animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
        animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
}
div.fvVideoView>div.fvLodingView>.sk-fading-circle .sk-circle2 {
  -webkit-transform: rotate(30deg);
    -ms-transform: rotate(30deg);
        transform: rotate(30deg);
}
div.fvVideoView>div.fvLodingView>.sk-fading-circle .sk-circle3 {
  -webkit-transform: rotate(60deg);
    -ms-transform: rotate(60deg);
        transform: rotate(60deg);
}
div.fvVideoView>div.fvLodingView>.sk-fading-circle .sk-circle4 {
  -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
        transform: rotate(90deg);
}
div.fvVideoView>div.fvLodingView>.sk-fading-circle .sk-circle5 {
  -webkit-transform: rotate(120deg);
    -ms-transform: rotate(120deg);
        transform: rotate(120deg);
}
div.fvVideoView>div.fvLodingView>.sk-fading-circle .sk-circle6 {
  -webkit-transform: rotate(150deg);
      -ms-transform: rotate(150deg);
          transform: rotate(150deg);
}
div.fvVideoView>div.fvLodingView>.sk-fading-circle .sk-circle7 {
  -webkit-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
          transform: rotate(180deg);
}
div.fvVideoView>div.fvLodingView>.sk-fading-circle .sk-circle8 {
  -webkit-transform: rotate(210deg);
      -ms-transform: rotate(210deg);
          transform: rotate(210deg);
}
div.fvVideoView>div.fvLodingView>.sk-fading-circle .sk-circle9 {
  -webkit-transform: rotate(240deg);
      -ms-transform: rotate(240deg);
          transform: rotate(240deg);
}
div.fvVideoView>div.fvLodingView>.sk-fading-circle .sk-circle10 {
  -webkit-transform: rotate(270deg);
      -ms-transform: rotate(270deg);
          transform: rotate(270deg);
}
div.fvVideoView>div.fvLodingView>.sk-fading-circle .sk-circle11 {
  -webkit-transform: rotate(300deg);
      -ms-transform: rotate(300deg);
          transform: rotate(300deg);
}
div.fvVideoView>div.fvLodingView>.sk-fading-circle .sk-circle12 {
  -webkit-transform: rotate(330deg);
      -ms-transform: rotate(330deg);
          transform: rotate(330deg);
}
div.fvVideoView>div.fvLodingView>.sk-fading-circle .sk-circle2:before {
  -webkit-animation-delay: -1.1s;
          animation-delay: -1.1s;
}
div.fvVideoView>div.fvLodingView>.sk-fading-circle .sk-circle3:before {
  -webkit-animation-delay: -1s;
          animation-delay: -1s;
}
div.fvVideoView>div.fvLodingView>.sk-fading-circle .sk-circle4:before {
  -webkit-animation-delay: -0.9s;
          animation-delay: -0.9s;
}
div.fvVideoView>div.fvLodingView>.sk-fading-circle .sk-circle5:before {
  -webkit-animation-delay: -0.8s;
          animation-delay: -0.8s;
}
div.fvVideoView>div.fvLodingView>.sk-fading-circle .sk-circle6:before {
  -webkit-animation-delay: -0.7s;
          animation-delay: -0.7s;
}
div.fvVideoView>div.fvLodingView>.sk-fading-circle .sk-circle7:before {
  -webkit-animation-delay: -0.6s;
          animation-delay: -0.6s;
}
div.fvVideoView>div.fvLodingView>.sk-fading-circle .sk-circle8:before {
  -webkit-animation-delay: -0.5s;
          animation-delay: -0.5s;
}
div.fvVideoView>div.fvLodingView>.sk-fading-circle .sk-circle9:before {
  -webkit-animation-delay: -0.4s;
          animation-delay: -0.4s;
}
div.fvVideoView>div.fvLodingView>.sk-fading-circle .sk-circle10:before {
  -webkit-animation-delay: -0.3s;
          animation-delay: -0.3s;
}
div.fvVideoView>div.fvLodingView>.sk-fading-circle .sk-circle11:before {
  -webkit-animation-delay: -0.2s;
          animation-delay: -0.2s;
}
div.fvVideoView>div.fvLodingView>.sk-fading-circle .sk-circle12:before {
  -webkit-animation-delay: -0.1s;
          animation-delay: -0.1s;
}

@-webkit-keyframes sk-circleFadeDelay {
  0%, 39%, 100% { opacity: 0; }
  40% { opacity: 1; }
}

@keyframes sk-circleFadeDelay {
  0%, 39%, 100% { opacity: 0; }
  40% { opacity: 1; }
}

/* < Loadinf Screen */

/* Error Screen > */

div.fvVideoView>div.fvErrorView {
  background-color: #222 !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  z-index: 1000 !important;
  color: #fff !important;
  padding: 30px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  text-align: center !important;
}

div.fvVideoView>div.fvErrorView>div.fvErrorCaption {
  font-size: 3em !important;
  line-height: 1em !important;
}

div.fvVideoView>div.fvErrorView>div.fvErrorDescription {
  margin: 2em 0 2em 0 !important;
  font-size: 0.8em !important;
}

div.fvVideoView>div.fvErrorView>a.fvErrorReload {
  background-image: url('../img/reload.png') !important;
  width: 30px !important;
  height: 30px !important;
  margin: 0 auto !important;
  background-repeat: no-repeat !important;
  background-size: 60% !important;
  background-position: 50% 50% !important;
  display: block !important;
  background-color: #27579B !important;
  border-radius: 50% !important;
  cursor: pointer !important;
}

/* < Error Screen */

/* Play Screen > */

div.fvVideoView>div.fvPlayScreenView {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  z-index: 1500 !important;
  width: 100% !important;
  background-color: rgba(0,0,0,0.5) !important;
  background-image: url('../img/play.png'), url('../img/black.png');
  background-repeat: no-repeat, no-repeat;
  background-position: 50% 50%, 50% 50%;
  background-size: 80px, cover;
  cursor: pointer;
}

/* < Play Screen */

.fvQualityDropdown {
  position: absolute !important;
  padding: 0 !important;
  margin: 0 !important;
  background-color: #cccccc !important;
  overflow: hidden !important;
  z-index: 9999 !important;
  min-width: 50px !important;
  display: none !important;
  font-size: 12px !important;
}

.fvQualityDropdown.show {
  display: block !important;
}

.fvQualityOption {
  padding: 8px 16px !important;
  color: #fff !important;
  cursor: pointer !important;
  transition: background-color 0.2s ease !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.fvQualityOption:hover {
  background-color: #3a3a3a !important;
}

.fvQualityOption.selected {
  background-color: #444 !important;
}

.fvQualityOption.selected::after {
  content: '✓' !important;
  color: #fff !important;
  font-weight: bold !important;
}

.fvQualityOption.auto {
  border-bottom: 1px solid #444 !important;
}

/* Tutorial Screen > */

div.fvTutorialScreenView {
  cursor: pointer !important;
  overflow: hidden !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  height: 100% !important;
  width: 100% !important;
  z-index: 1600 !important;
  /* background-image: url('../img/tt_black.svg'); */
  background-image: url('https://d2fj9zflbpcrik.cloudfront.net/fkeiba/tutorial.jpg');
  background-color: #38875A;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: 50% 50%;
}

div.fvTutorialScreenView>div.fvTutorialTitle {
  font-size: 1.5em !important;
  font-weight: bold !important;
  text-align: center !important;
  width: 100% !important;
  padding-bottom: 30px !important;
}

div.fvTutorialScreenView>div.fvTutorialContent {
  display:flex !important;
  display:-webkit-flex !important;
  display:-moz-flex !important;
  -webkit-flex-wrap: nowrap !important;
  -moz-flex-wrap: nowrap !important;
  flex-wrap: nowrap !important;
  height: 100% !important;
}

div.fvTutorialScreenView>div.fvTutorialContent>div.fvTutorialMessage {
  font-size: 1em !important;
  width: auto !important;
  display: inline-block !important;
  width: 60% !important;
  margin-left: 10px !important;
  margin-top: 20px !important;
  line-height: 1.5em !important;
}

div.fvTutorialScreenView>div.fvTutorialContent>div.fvTutorialImage {
  background-image: url('../img/howtouse.png') !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  background-position: top !important;
  height: 100% !important;
  width: 40% !important;
  max-width: 600px !important;
  text-align: center !important;
  display: inline-block !important;
}

/* < Tutorial Screen */

@media all and (min-width: 800px) {
  /* Tutorial Screen > */

  div.fvTutorialScreenView>div.fvTutorialTitle {
    font-size: 2.0em !important;
  }

  div.fvTutorialScreenView>div.fvTutorialContent>div.fvTutorialMessage {
    font-size: 1.2em !important;
  }

  /* < Tutorial Screen */
}

@media all and (min-width: 1000px) {
  /* Tutorial Screen > */

  div.fvTutorialScreenView>div.fvTutorialTitle {
    font-size: 3em !important;
  }

  div.fvTutorialScreenView>div.fvTutorialContent>div.fvTutorialMessage {
    font-size: 2em !important;
  }

  /* < Tutorial Screen */
}


/* SmartPhone Landscape */
@media all and (max-width: 768px) {

  /* Loading Screen > */

  div.fvVideoView>div.fvLodingView>.sk-fading-circle {
    width: 40px !important;
    height: 40px !important;
  }

  /* < Loading Screen */

  /* Play Screen > */

  div.fvVideoView>div.fvPlayScreenView {
    background-repeat: no-repeat, no-repeat;
    background-position: 50% 50%, 50% 50%;
    background-size: 70px, cover !important;
    z-index: 100;
  }

  /* < Play Screen */
}

/* SmartPhone Portlate */
@media all and (max-width: 380px) {

  /* Error Screen > */

  div.fvVideoView>div.fvErrorView {
    padding: 25px !important;
  }

  div.fvVideoView>div.fvErrorView>div.fvErrorCaption {
    font-size: 1.7em !important;
  }

  div.fvVideoView>div.fvErrorView>div.fvErrorDescription {
    margin: 1.5em 0 1.5em 0 !important;
  }

  /* < Error Screen */

  /* Play Screen > */

  div.fvVideoView>div.fvPlayScreenView {
    background-repeat: no-repeat, no-repeat;
    background-position: 50% 50%, 50% 50%;
    background-size: 50px, cover !important;
  }

  /* < Play Screen */

  /* Tutorial Screen > */

  div.fvTutorialScreenView {
    /* padding: 20px 30px !important; */
    padding: 5px 5px !important;
  }

  div.fvTutorialScreenView>div.fvTutorialTitle {
    font-size: 0.9em !important;
/*    padding-bottom: 20px !important;*/
    padding-bottom: 5px !important;
  }

  div.fvTutorialScreenView>div.fvTutorialContent>div.fvTutorialMessage {
    font-size: 0.7em !important;
    width: 60% !important;
    margin-left: 5px !important;
    margin-top: 0px !important;
  }

  /* < Tutorial Screen */
}