/*
* EDUCATIONS STUDY 3 STYLE
* STUDY 1 の 2/3 の大きさ
*/
.blind {
  width: 100%;
  height: 100%;
  z-index: 100;
}

/* parts-avatar 基準 ここから */
.parts-avatar {
  width: 23.92%;
  /* 459.21487141615px / 1920px * 100 */
  height: 37.48%;
  /* 341.080310711404px / 910px * 100 */
  top: 62.52%;
  /* 568.919689288596px / 910px * 100 */
  left: 76.08%;
  /* 1460.78512858385px / 1920px * 100 */
  aspect-ratio: 459 / 341;
  height: auto;
  z-index: 5;
}

/* アバター */
.move-avatar-woman-arm1 {
  width: 18.44%;
  /* 84.681269238441px / 459.21487141615px * 100 */
  height: 8.65%;
  /* 29.510512676974px / 341.080310711404px * 100 */
  top: 42.61%;
  /* 145.342808149486px / 341.080310711404px */
  left: calc(33.36% + 0.2%);
  /* 153.17826479336px / 459.21487141615px */
  z-index: 3;
}

.move-avatar-woman-arm2 {
  width: 16.80%;
  /* 77.1286868527004px / 459.21487141615px * 100 */
  height: 15.92%;
  /* 54.3087423937704px / 341.080310711404px * 100 */
  top: 42.61%;
  /* 145.342808149486px / 341.080310711404px */
  left: calc(35.00% + 0.2%);
  /* 160.7308471791px / 459.21487141615px */
  z-index: 3;
}

.move-avatar-woman-arm3 {
  width: 15.35%;
  /* 70.4754115566393px / 459.21487141615px * 100 */
  height: 20.64%;
  /* 70.4156532504021px / 341.080310711404px * 100 */
  top: 42.61%;
  /* 145.342808149486px / 341.080310711404px */
  left: calc(36.45% + 0.2%);
  /* 167.384122475161px / 459.21487141615px */
  z-index: 3;
}

/* 背景 */
.bldg-parts {
  max-width: none;
  /* 不要な部分を画面の外に出させる */
  width: 118.11%;
  /* 542.389371416151px / 459.21487141615px * 100 */
  /* height: 72.05%; */
  /* 245.737524488728px / 341.080310711404px * 100 */
  height: auto;
  top: 42.61%;
  /* 145.342786222676px / 341.080310711404px */
  left: 0.00%;
  /* 0px / 459.21487141615px */
  z-index: 2;
}

/* parts-monitor 基準 ここから */
.parts-monitor {
  position: absolute;
  width: 55.75%;
  /* 255.999947847249px / 459.21487141615px * 100 */
  height: 42.22%;
  /* 143.999970664077px / 341.080310711404px * 100 */
  top: 0.00%;
  /* 0px / 341.080310711404px */
  left: 30.31%;
  /* 139.176213592091px / 459.21487141615px */
  z-index: 5;
  overflow: hidden;
}

/* モニター */
.monitor {
  width: 100%;
  aspect-ratio: 16 / 9;
}

.monitor-movie {
  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: #000;
}

/* アバターフェイスにオーバーレイをかけて操作を制限 */
.monitor-overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: transparent;
}

/* parts-monitor 基準 ここまで */

/* parts-avatar 基準 ここまで */

/* スクリーン */
.screen {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;
}

.screen-movie {
  width: 100%;
  height: 100%;
}

.thumbnail-screen-container {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

/* 再生アイコン */
/* .screen-movie基準 */
.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 */
/* videojs カスタムボタン */
.movie-control-buttons {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  position: fixed;
  top: 11%;
  right: 1%;
  z-index: 50;
}

/* /VIDEOJS ここまで */

@media screen and (min-width: 600px) {

  /* YOUTUBE */
  .screen {}
}

@media screen and (min-width: 768px) {

  /* YOUTUBE */
  /* スクリーン */
  .screen {}
}

@media only screen and (hover: none) and (orientation: landscape) and (min-width: 768px) {

  /* デバイスが横向き 且つ 768px以上の場合の記述 */
  /* YOUTUBE */
  /* スクリーン */
  .screen {}
}

@media screen and (min-width: 960px) {

  /* YOUTUBE */
  /* スクリーン */
  .screen {}
}

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

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

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