/*
* EDUCATIONS STUDY 2 STYLE
*/
.blind {
  width: 100%;
  height: 100%;
  z-index: 100;
}

.educations-main {
  aspect-ratio: 192 / 91;
  height: auto;
  min-height: unset;
}

/* 背景 */
.background {
  width: 100.00%;
  /* 1920px / 1920px * 100 */
  /* height: 80.26%;  */
  /* 730.369745941876px / 910px * 100 */
  height: auto;
  top: -0.93%;
  /* -8.43498805805029px / 910px * 100 */
  left: 0.00%;
  /* 0px / 1920px * 100 */
  z-index: 2;
}

.floor {
  width: 101.69%;
  /* 1952.46581150715px / 1920px * 100 */
  height: 30.71%;
  /* 279.420946110075px / 910px * 100 */
  top: 69.29%;
  /* 630.579053889925px / 910px * 100 */
  left: -1.69%;
  /* -32.4658115071497px / 1920px * 100 */
  z-index: 1;
}

/* PARTS-STUDENT */
.parts-student {
  width: 100.00%;
  /* 1920px / 1920px * 100 */
  /* height: 34.31%;  */
  /* 312.235704490628px / 910px * 100 */
  height: auto;
  top: 65.69%;
  /* 597.764295509372px / 910px * 100 */
  left: 0.00%;
  /* 0px / 1920px * 100 */
  aspect-ratio: 80 / 13;
  z-index: 3;
}

/* .parts-student基準 ここから */
/* LEFT */
.left-1 {
  width: 23.94%;
  /* 459.636184207905px / 1920px * 100 */
  height: 89.37%;
  /* 279.048899789722px / 312.2357px * 100 */
  top: 84.62%;
  /* 264.212654343516px / 312.2357px */
  left: -7.11%;
  /* -136.494352704601px / 1920px */
  z-index: 2;
}

.left-2 {
  width: 25.35%;
  /* 486.68165731819px / 1920px * 100 */
  height: 108.20%;
  /* 337.831031633977px / 312.2357px * 100 */
  top: 0.00%;
  /* 0px / 312.2357px */
  left: 3.30%;
  /* 63.323597868186px / 1920px */
  z-index: 1;
}

.move-sub-avatar1-head1 {
  width: 13.89%;
  /* 266.768397082184px / 1920px * 100 */
  height: 78.98%;
  /* 246.599383075245px / 312.2357px * 100 */
  top: 10.51%;
  /* 32.806174061373px / 312.2357px */
  left: -7.86%;
  /* -150.971995383823px / 1920px */
  z-index: 3;
}

.move-sub-avatar1-head2 {
  width: 13.64%;
  /* 261.978143389121px / 1920px * 100 */
  height: 79.11%;
  /* 247.019473152888px / 312.2357px * 100 */
  top: 12.42%;
  /* 38.7727097286943px / 312.2357px */
  left: -8.72%;
  /* -167.414010499894px / 1920px */
  z-index: 3;
}

.move-sub-avatar1-head3 {
  width: 14.60%;
  /* 280.267327364316px / 1920px * 100 */
  height: 78.66%;
  /* 245.59502488085px / 312.2357px * 100 */
  top: 11.09%;
  /* 34.6285485230965px / 312.2357px */
  left: -7.75%;
  /* -148.761634497154px / 1920px */
  z-index: 3;
}

/* CENTER */
.center-1 {
  width: 48.90%;
  /* 938.835244381155px / 1920px * 100 */
  height: 69.57%;
  /* 217.213167360058px / 312.2357px * 100 */
  top: 68.81%;
  /* 214.847639373868px / 312.2357px */
  left: 25.62%;
  /* 491.842251888378px / 1920px */
  z-index: 3;
}

.center-2 {
  width: 37.44%;
  /* 718.894697282481px / 1920px * 100 */
  height: 103.17%;
  /* 322.127390837413px / 312.2357px * 100 */
  top: 6.06%;
  /* 18.9329387238658px / 312.2357px */
  left: 31.16%;
  /* 598.216793624512px / 1920px */
  z-index: 1;
}

.sub-avatar5 {
  width: 8.32%;
  /* 159.76750031677px / 1920px * 100 */
  height: 93.51%;
  /* 291.96534017167px / 312.2357px * 100 */
  top: 18.52%;
  /* 57.8157899804601px / 312.2357px */
  left: 51.71%;
  /* 992.886264988392px / 1920px */
  z-index: 2;
}

.move-sub-avatar5-arm-l1 {
  width: 3.49%;
  /* 66.9214693118884px / 1920px * 100 */
  height: 16.00%;
  /* 49.9536632327108px / 312.2357px * 100 */
  top: 63.61%;
  /* 198.627487104834px / 312.2357px */
  left: 50.96%;
  /* 978.464755692545px / 1920px */
  z-index: 3;
}

.move-sub-avatar5-arm-l2 {
  width: 3.73%;
  /* 71.6543444362251px / 1920px * 100 */
  height: 10.52%;
  /* 32.8371389520216px / 312.2357px * 100 */
  top: 64.64%;
  /* 201.834878152918px / 312.2357px */
  left: 50.66%;
  /* 972.594706672748px / 1920px */
  z-index: 3;
}

.move-sub-avatar5-arm-l3 {
  width: 3.66%;
  /* 70.3673018941081px / 1920px * 100 */
  height: 12.57%;
  /* 39.2337203912939px / 312.2357px * 100 */
  top: 59.09%;
  /* 184.499775621448px / 312.2357px */
  left: 50.90%;
  /* 977.347165516114px / 1920px */
  z-index: 3;
}

/* RIGHT */
.right-1 {
  width: 30.29%;
  /* 581.634456002672px / 1920px * 100 */
  height: 161.71%;
  /* 504.931519923476px / 312.2357px * 100 */
  top: 7.90%;
  /* 24.6578579832103px / 312.2357px */
  left: 78.43%;
  /* 1505.77955449722px / 1920px */
  z-index: 3;
}

.item-table9 {
  width: 25.35%;
  /* 486.681657318191px / 1920px * 100 */
  height: 38.16%;
  /* 119.140304303301px / 312.2357px * 100 */
  top: 40.81%;
  /* 127.409302183888px / 312.2357px */
  left: 74.22%;
  /* 1424.98935587342px / 1920px */
  z-index: 1;
}

.move-sub-avatar10-arm-l1 {
  width: 2.69%;
  /* 51.6091729102409px / 1920px * 100 */
  height: 13.21%;
  /* 41.2617520048334px / 312.2357px * 100 */
  top: 41.56%;
  /* 129.762219713693px / 312.2357px */
  left: 80.45%;
  /* 1544.59022865511px / 1920px */
  z-index: 2;
}

.move-sub-avatar10-arm-l2 {
  width: 2.96%;
  /* 56.8673594680513px / 1920px * 100 */
  height: 11.34%;
  /* 35.4168458181339px / 312.2357px * 100 */
  top: 42.98%;
  /* 134.209730277799px / 312.2357px */
  left: 80.32%;
  /* 1542.10046948693px / 1920px */
  z-index: 2;
}

.move-sub-avatar10-arm-l3 {
  width: 2.96%;
  /* 56.7566701126489px / 1920px * 100 */
  height: 8.56%;
  /* 26.7327422442941px / 312.2357px * 100 */
  top: 44.82%;
  /* 139.947375010469px / 312.2357px */
  left: 80.29%;
  /* 1541.47238919404px / 1920px */
  z-index: 2;
}

/* .parts-student基準 ここまで */

/* スクリーン */
/* .parts-screen 基準 ここから */
.parts-screen {
  max-width: unset;
  width: 50.00%;
  /* 960px / 1920px * 100 */
  height: 62.76%;
  /* 571.074px / 910px * 100 */
  top: 4.47%;
  /* 40.6881383800091px / 910px * 100 */
  left: 50%;
  transform: translate(-50%, 0%);
  z-index: 2;
}

.screen-item {
  width: 100.00%;
  /* 960px / 960px * 100 */
  height: 5.44%;
  /* 31.0739922555995px / 571.073992255548px * 100 */
  top: 0.00%;
  /* 0px / 571.073992255548px */
  left: 0.00%;
  /* 0px / 960px */
  z-index: 2;
}

/* YOUTUBE */
.screen {
  width: 100.00%;
  /* 960px / 960px * 100 */
  /* height: 94.56%;  */
  /* 539.999999999998px / 571.073992255548px * 100 */
  height: auto;
  top: 5.44%;
  /* 31.0739922555495px / 571.073992255548px */
  left: 0.00%;
  /* 0px / 960px */
  z-index: 2;
  aspect-ratio: 16 / 9;
}

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

.thumbnail-screen-container {
  position: absolute;
  width: 100.00%;
  /* 960px / 960px * 100 */
  height: 100.00%;
  /* 539.999999999998px / 571.073992255548px * 100 */
  top: 0%;
  /* 31.0739922555495px / 571.073992255548px */
  left: 0.00%;
  /* 0px / 960px */
  z-index: 1;
}

/* 'live''recording'の時オーバーレイで操作を制限 */
.screen-overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: transparent;
}

/* 再生アイコン */
/* .screen-movie基準 */
.button-play {
  position: absolute;
  width: 20.83%;
  /* 200.000053045842px / 960px * 100 */
  height: 26.68%;
  /* 152.3624px / 571.073992255548px * 100 */
  top: 39.38%;
  /* 224.892792255549px / 571.073992255548px */
  left: 39.58%;
  /* 379.999973477079px / 960px */
  z-index: 4;
  display: block;
}

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

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

/* /.parts-screen 基準 ここまで */

.study2-image {
  position: absolute;
}

/* 音声許可用のモーダル */
.play-permission {
  top: 31px;
  /* .creen-item の高さ分下げて .screen 中央に配置 */
}

/* /音声許可用のモーダル ここまで */

/* VIDEOJS */
/* videojs カスタムボタン */
.movie-control-buttons {
  background-color: transparent;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  position: absolute;
  top: calc(50% - 31px);
  /* .creen-item の高さ分下げて .screen 中央に配置 */
  left: 50%;
  transform: translate(-50%, 0%);
  transition: opacity 0.1s ease-in-out;
  z-index: 50;
  opacity: 0;
}

.control-button {
  color: #fff;
  transition: all .2s ease;
  font-size: 1.25rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  width: 100px;
}

.control-button:hover {
  transform: scale(1.2);
}

/* コントロールボタンアイコン */
.control-button .control-icon {
  color: #fff;
  filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.6));
  font-size: 1.5rem;
}

/* コントロールボタンテキスト */
.control-button .control-label {
  color: #fff;
  filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.6));
}

/* 再生・一時停止ボタン */
.play-pause-button {
  width: 120px;
}

.play-pause-button .control-icon {
  font-size: 3rem;
}

.play-pause-button .control-icon.fa-play-circle::before {
  content: "\f04b";
}

.play-pause-button .control-icon.fa-pause-circle::before {
  content: "\f04c";
}
/* /VIDEOJS ここまで */

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

  /* .parts-screen 基準 ここから */
  /* YOUTUBE */
  .parts-screen {}

  /* /.parts-screen 基準 ここまで */
}

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

  /* .parts-screen 基準 ここから */
  /* YOUTUBE */
  /* スクリーン */
  .parts-screen {}

  /* /.parts-screen 基準 ここまで */
}

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

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

  /* /.parts-screen 基準 ここまで */
}

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

  /* .parts-screen 基準 ここから */
  /* YOUTUBE */
  /* スクリーン */
  .parts-screen {}

  /* VIDEOJS */
  /* videojs カスタムボタン */
  .movie-control-buttons {
    gap: 4.5rem;
  }

  .control-button {
    width: 145px;
  }

  /* コントロールボタンアイコン */
  .control-button .control-icon {
    font-size: 2rem;
  }

  /* 再生・一時停止ボタン */
  .play-pause-button {
    width: 120px;
  }

  .play-pause-button .control-icon {
    font-size: 7rem;
  }
  /* /VIDEOJS ここまで */
  /* /.parts-screen 基準 ここまで */
}

@media (orientation: landscape) {

  /* デバイスが横向きの場合の記述 */
  /* .parts-screen 基準 ここから */
  /* YOUTUBE */
  /* スクリーン */
  .screen {}

  /* /.parts-screen 基準 ここまで */
}

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

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