/*
* VENUE-SIMPLE-MONITOR STYLE
*/
.blind {
  width: 100%;
  height: 100%;
  z-index: 3;
}

/* MAIN */
/* 再生アイコン */
.button-play {
  position: absolute;
  width: 10.416666666667%;
  /* 200px / 1920px */
  height: 16.751274725275%;
  /* 152.4366px / 910px */
  top: 47.854351648352%;
  /* 435.4746px / 910px */
  left: 44.791666666667%;
  /* 860px / 1920px */
  z-index: 4;
  display: block;
}

.image-button-play {
  width: 100%;
  height: 100%;
}

.button-play.is-hidden {
  display: none;
}

/* VIDEOJS */
.video-js .vjs-tech {
  visibility: visible !important;
}

.data-player-item {
  width: 100%;
  height: 100%;
}

.data-player-item .video-js {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}

.data-player-item [data-enable-devicemotion] {
  background-color: transparent;
  border: none;
  cursor: pointer;
  outline: none;
  padding: 0;
  appearance: none;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
}

.is-fullscreen {
  z-index: 99999 !important;
}

.is-fullscreen .vjs-control-bar {
  padding: 0 14px;
  height: 5.5em;
}

.is-fullscreen .vjs-control-bar .vjs-control:before {
  font-size: 24px;
  line-height: 1.67;
}

.is-fullscreen .vjs-control-bar .vjs-volume-bar {
  margin: 1.8em 0.45em
}

.is-fullscreen .vjs-control-bar .vjs-progress-control {
  padding-bottom: 1.5em;
}

.is-fullscreen .vjs-control-bar .vjs-time-control {
  line-height: 4em;
}

/* .parts-monitor ここから */
.parts-monitor {
  position: absolute;
  width: 100%;
  /* height: 26.18%; */
  left: 0;
  bottom: 0;
  aspect-ratio: 960 / 119;
  z-index: 5;
}

/* 動画 */
.monitor {
  position: absolute;
  width: 14.01%;
  /* 268.948044047989px / 1920px * 100 */
  /* height: 63.49%; */
  /* 151.283274776995px / 238.280578028045px * 100 */
  /* top: 4.39%; */
  /* 10.4603205246895px / 238.280578028045px */
  bottom: 32.12%;
  left: 42.95%;
  /* 824.613746699932px / 1920px */
  z-index: 15;
  aspect-ratio: 16 / 9;
}

.monitor-movie {
  display: block;
  border: none;
  width: 100%;
  height: 100%;
}

/* サムネイル画像 */
.thumbnail-monitor-container {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.thumbnail-monitor-container--none .thumbnail {
  width: 100%;
  height: 100%;
}

.thumbnail-monitor {
  width: 100%;
  height: 100%;
  background-color: #fff;
}

.simple-monitor-image {
  height: auto;
}

/* モニターフレーム */
.monitor-frame {
  width: 15.62%;
  /* 299.82429683081px / 1920px * 100 */
  /* height: 73.63%; */
  /* 175.457233791351px / 238.280578028045px * 100 */
  /* top: 0.00%; */
  /* 0px / 238.280578028045px */
  bottom: 26.36%;
  left: 42.14%;
  /* 809.052905970531px / 1920px */
  aspect-ratio: 75 / 44;
  z-index: 10;
}

/* 机 */
.sash {
  width: 100.00%;
  /* 1920px / 1920px * 100 */
  /* height: 16.44%; */
  /* 149.610673473488px / 910px * 100 */
  /* top: 83.56%; */
  /* 760.389326526512px / 910px * 100 */
  bottom: 0;
  left: 0.00%;
  /* 0px / 1920px * 100 */
  z-index: 5;
}

/* /.parts-monitor ここまで */

/* モニターをオーバーレイで操作を制限 */
.screen-overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: transparent;
  z-index: 2;
}
/* MAIN ここまで */

@media screen and (min-width: 768px) {
  body {
    font-size: 1rem;
    /* 16px */
  }

  /* HEADER */

  .venue-mv {}

  .venue-mv-wrapper {}

  /* FOOTER */
  .venue-footer-inner {}
}

@media (orientation: landscape) {
  /* デバイスが横向きの場合の記述 */
}

@media (orientation: portrait) {
  /* デバイスが縦向きの場合の記述 */
}

/* タッチデバイス向けのスタイル */
@media only screen and (hover: none) {
  /* hover: none はタッチデバイスを示す条件 */
}