@charset "UTF-8";

/* SP Common RaceHeader CSS */
/*アコーディオン*/
.sp-content div.video-wrap{all: initial}
.sp-content div.video-wrap .accordion_inner{background-color: #666666}
#myVideo{ width: 100%; aspect-ratio: 16/9; position:relative; display: block; }
#odds-live-movie-area{width: 100%; aspect-ratio: 16/9; position:relative; display: none; background-color:gray;}
div.vControl{ width: 100%; display: flex; padding: 10px 10px; margin: 0; background-color: #333; }
.vContParts{ display: block; margin-left: 10px; }
.vContParts:first-child{ margin-left: 0; }
.vContParts:last-child{ margin-left: auto; margin-right: 5px; }
button.vContPartsClose{ padding-right: 1.5em; box-sizing: border-box; position: relative;}
button.vContPartsClose::after{ content: ""; position: absolute; right: 5px; top: 0; z-index: 1; width: 0.6em !important; height: 100%; background: url(../images/chevron-up.svg) no-repeat center center / contain; }
/* Safari向けユーザースタイルシートの上書き */
.sp-content .accordion_inner .vControl button,
.sp-content .accordion_inner .vControl select {
  background-color: transparent;
  border: none;
  cursor: pointer;
  outline: none;
  padding: 0;
  appearance: none;
  color: #000;
}

.sp-content .accordion_inner .vControl button{
  background: #efefef;
  border: 1px solid #333;
  border-radius: 4px;
  padding: 4px 22px 4px 4px;
  line-height: 1.1rem;
}
.sp-content .accordion_inner .vControl select {
  background: #efefef;
  border: 1px solid #333;
  border-radius: 4px;
  padding: 4px 16px 4px 4px;
  color: #333;
  box-shadow: none;
  background: #fff url(../images/chevron-down3.svg) no-repeat right 5px top 55%;
  background-size: 8px 8px;
  cursor: pointer;
  line-height: 1.1rem;
}


/*動画*/

.sp-content div.rMovieBtn{ width: 120px; height: auto; margin-left: auto; margin-right: 0; padding: 2px 4px; border-radius: 4px; background: url(../images/movieOpen.svg) no-repeat center center / 105px #333; }
.sp-content div.rMovieBtn.open{ background-image: url(../images/movieClose.svg); }
.sp-content div.raceRaceMovieWrap{ max-width: 11em; position: absolute; top: 7px; right: 10px; z-index: 5; font-size: 0.9em; }
.sp-content div.raceMovSelectWrap{ outline: none; border: 0px solid #d6d6d6; border-radius: 4px; background-color: #fff; }
.sp-content div.raceRaceMovieWrap:has(#raceMovSelect-selected-label) > div.raceMovSelectWrap { border: 1px solid #d6d6d6; }
.sp-content div.raceMovSelectWrap input { display: none; }
.sp-content div.raceMovSelectWrap label { display: block; margin: 0; padding: 1px 1em 0 1.8em; cursor :pointer; height: 2.4em; line-height: 2.4em; width:100%;}
.sp-content div.raceMovSelectWrap label::after{ content: ""; position: absolute; right: 5px; top: 1px; z-index: 1; width: 0.6em !important; height: 100%; background: url(../images/chevron-down3.svg) no-repeat center center / contain; }
.sp-content div.raceMovSelectWrap label::before{ content: ""; position: absolute; left: 7px; top: 0; z-index: 1; width: 1em !important; height: 100%; background: url("../images/chevron-right3.svg") no-repeat center center / contain; }
.sp-content div.raceMovSelectWrap ul { margin: 0; padding: 0; list-style: none; }
.sp-content div.raceMovSelectWrap ul li { height: 0; overflow: hidden; opacity: 0; border-top: 1px solid #d6d6d6; -webkit-transition: all 0.5s; transition: all 0.5s; display: block; color: #333; }
.sp-content div.raceMovSelectWrap ul li label { display: inline-block; padding: 1px 0 0 1.8em; }
.sp-content div.raceMovSelectWrap ul li label::after { content: none; }
.sp-content div.raceMovSelectWrap ul li label::before { content: none; }
.sp-content div.raceMovSelectWrap ul li.raceRaceMovieOn::before{ content: ""; position: absolute; top: 0; left: 7px; z-index: 1; width: 1em !important; height: 100%; background: url("../images/chevron-right3.svg") no-repeat center center / contain; }
#raceMovSelect:checked ~ #raceMovList li { height: 2.4em; line-height: 2.2em; opacity: 1; }

/* video.jsのレイアウト調整 */
.sp-content .video-wrap .video-js .vjs-big-play-button .vjs-icon-placeholder,
.sp-content .video-wrap .video-js .vjs-button .vjs-icon-placeholder{
  position: static;
}
.sp-content .video-wrap .video-js{
  font-size: 10px;
}
.sp-content .video-wrap .video-js .vjs-error-display .vjs-modal-dialog-content{
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 200%;
}