.fvPlayerWrapper {
  min-width: 550px !important;
  background-color: #000;
  position: relative !important;






  font-family: "Hiragino Kaku Gothic ProN", "メイリオ", sans-serif !important;
  overflow: hidden;
}

#fvPlayer:fullscreen,
#fvPlayer:-webkit-full-screen {
  width: 100% !important;
  max-width: none !important;
}

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

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



div.fvVideoView > div.fvLodingView {
  background-color: rgba(0, 0, 0, 0.3) !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !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;
  }
}





div.fvVideoView > div.fvErrorView {
  background-color: #1a1a1a !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  z-index: 1000 !important;
  color: #fff !important;

  padding: clamp(10px, 4vw, 30px) !important;
  width: 100% !important;
  height: 100% !important;
  box-sizing: border-box !important;
  text-align: center !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}

div.fvVideoView > div.fvErrorView > div.fvErrorCaption {
  font-size: clamp(1.1em, 6vw, 2em) !important;
  line-height: 1.3em !important;
  font-weight: bold !important;
}

div.fvVideoView > div.fvErrorView > div.fvErrorDescription {
  margin: clamp(0.4em, 2vw, 1.2em) 0 clamp(0.6em, 2.5vw, 2em) 0 !important;
  font-size: clamp(0.7em, 3.2vw, 0.9em) !important;
  color: #bbb !important;
  line-height: 1.6em !important;
}








div.fvVideoView > div.fvErrorView > a.fvErrorReload {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 42 42'%3E%3CclipPath id='u'%3E%3Crect width='42' height='16.5'/%3E%3C/clipPath%3E%3CclipPath id='d'%3E%3Crect y='25.5' width='42' height='16.5'/%3E%3C/clipPath%3E%3Ccircle cx='21' cy='21' r='17' fill='none' stroke='white' stroke-width='7' clip-path='url(%23u)'/%3E%3Ccircle cx='21' cy='21' r='17' fill='none' stroke='white' stroke-width='7' clip-path='url(%23d)'/%3E%3Cpath fill='white' d='M39.5 0.5L41 2V16.5H26V13.5Z'/%3E%3Cpath fill='white' d='M2.5 41.5L1 40V25.5H16V28.5Z'/%3E%3C/svg%3E") !important;
  width: clamp(40px, 12vw, 56px) !important;
  height: clamp(40px, 12vw, 56px) !important;
  flex-shrink: 0 !important;
  margin: 0 auto !important;
  background-repeat: no-repeat !important;
  background-size: 50% !important;
  background-position: 50% 50% !important;
  display: block !important;
  background-color: #27579b !important;
  border-radius: 50% !important;
  cursor: pointer !important;
}





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("../../../../js/fvLivePlayer/img/play.png"), url("../../../../js/fvLivePlayer/img/black.png");
  background-repeat: no-repeat, no-repeat;
  background-position: 50% 50%, 50% 50%;
  background-size: 80px, cover;
  cursor: pointer;
}



.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;
}



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("https://d2fj9zflbpcrik.cloudfront.net/f-keiba/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("../../../../js/fvLivePlayer/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;
}



@media all and (min-width: 800px) {


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

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


}

@media all and (min-width: 1000px) {


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

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


}


@media all and (max-width: 768px) {


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





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


}


@media all and (max-width: 380px) {




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





  div.fvTutorialScreenView {

    padding: 5px 5px !important;
  }

  div.fvTutorialScreenView > div.fvTutorialTitle {
    font-size: 0.9em !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;
  }


}