/**
 * VENUE-CONFERENCE-PLANE JS
 * 大講義室 平面
 * 平面動画 [parent-plane]
 */

/* 背景 */
.background {
  width: 100.01%;
  /* 1920.1809045789px / 1920px * 100 */
  height: 100.00%;
  /* 909.9610808078px / 910px * 100 */
  top: 0.00%;
  /* 0.03891919220041px / 910px * 100 */
  left: -0.01%;
  /* -0.1809045789023px / 1920px * 100 */
  z-index: 5;
}

/* .parts-screen 基準 ここから */
.parts-screen {
  aspect-ratio: 517 / 336;
  width: 53.85%;
  /* 1033.85166682786px / 1920px * 100 */
  height: 73.88%;
  /* 672.300658960252px / 910px * 100 */
  top: 9.96%;
  /* 90.6544844953296px / 910px * 100 */
  left: 23.08%;
  /* 443.074166586066px / 1920px * 100 */
  z-index: 5;
}

/* SCREEN */
.screen {
  width: 92.86%;
  /* 960px / 1033.85166682786px * 100 */
  height: 80.32%;
  /* 539.999999999997px / 672.300658960252px * 100 */
  top: 2.19%;
  /* 14.7067805473807px / 672.300658960252px */
  left: 3.57%;
  /* 36.925833413934px / 1033.85166682786px */
  z-index: 10;
  aspect-ratio: 16 / 9;
  height: auto;
}

.screen-parts {
  width: 100.00%;
  /* 1033.85166682786px / 1033.85166682786px * 100 */
  height: 100.00%;
  /* 672.300658960252px / 672.300658960252px * 100 */
  top: 0.00%;
  /* 0px / 672.300658960252px */
  left: 0.00%;
  /* 0px / 1033.85166682786px */
  z-index: 5;
}

/* 再生アイコン */
/* .screen-movie基準 */
.button-play {
  position: absolute;
  width: 19.35%;
  /* 200px / 1033.85166682786px * 100 */
  height: 22.66%;
  /* 152.362359589053px / 672.300658960252px * 100 */
  top: 31.02%;
  /* 208.525600752853px / 672.300658960252px */
  left: 40.33%;
  /* 416.925833413934px / 1033.85166682786px */
  z-index: 15;
  display: block;
}

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

/* SLIDE */
.slide {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  aspect-ratio: 16 / 9;
  height: auto;
  overflow: hidden;
}

.slide-image {
  max-width: none;
}

/* .parts-slide-left 基準 ここから */
.parts-slide-left {
  width: 20.01%;
  /* 384.173894053311px / 1920px * 100 */
  height: 74.45%;
  /* 677.494053202805px / 910px * 100 */
  top: -0.00%;
  /* 0px / 910px * 100 */
  left: 2.12%;
  /* 40.7048869221071px / 1920px * 100 */
  z-index: 5;
}

.slide-parts-left {
  width: 100.00%;
  /* 384.481857084636px / 384.481857084636px * 100 */
  height: 68.36%;
  /* 467.79835858052px / 684.362601829795px * 100 */
  top: 0.00%;
  /* 0px / 684.362601829795px */
  left: 0.00%;
  /* 0px / 384.481857084636px */
  z-index: 5;
}

.slide-left {
  width: 99.87%;
  /* 384px / 384.481857084636px * 100 */
  /* height: 31.56%; */
  /* 216px / 684.362601829795px * 100 */
  top: 68.39%;
  /* 468.013777956652px / 684.362601829795px */
  left: 0.06%;
  /* 0.22471181379842px / 384.481857084636px */
  z-index: 5;
}

/* /.parts-slide-left 基準 ここまで */

/* .parts-slide-right 基準 ここから */
.parts-slide-right {
  width: 20.03%;
  /* 384.48185708464px / 1920px * 100 */
  height: 74.45%;
  /* 677.494053202805px / 910px * 100 */
  top: -0.00%;
  /* 0px / 910px * 100 */
  left: 77.32%;
  /* 1484.55323428964px / 1920px * 100 */
  z-index: 5;
}

.slide-parts-right {
  width: 100.00%;
  /* 384.481857084639px / 384.481857084639px * 100 */
  height: 68.39%;
  /* 467.79835858052px / 684.01377795665px * 100 */
  top: 0.00%;
  /* 0px / 684.01377795665px */
  left: 0.00%;
  /* 0px / 384.481857084639px */
  z-index: 5;
}

.slide-right {
  width: 99.87%;
  /* 383.999999999999px / 384.481857084639px * 100 */
  /* height: 31.58%; */
  /* 216px / 684.01377795665px * 100 */
  top: 68.42%;
  /* 468.01377795665px / 684.01377795665px */
  left: 0.10%;
  /* 0.37075394055864px / 384.481857084639px */
  z-index: 5;
}

/* /.parts-slide-right 基準 ここまで */

/* .parts-student 基準 ここから */
.parts-student {
  width: 100.00%;
  /* 1920px / 1920px * 100 */
  height: 34.98%;
  /* 318.349918340013px / 910px * 100 */
  top: 65.02%;
  /* 591.650081659987px / 910px * 100 */
  left: 0.00%;
  /* 0px / 1920px * 100 */
  z-index: 5;
}

.item-chair {
  width: 95.71%;
  /* 1837.71765905704px / 1920px * 100 */
  height: 23.23%;
  /* 73.9492894978794px / 318.349918340013px * 100 */
  top: 76.91%;
  /* 244.838103288406px / 318.349918340013px */
  left: 2.15%;
  /* 41.3622024138194px / 1920px */
  z-index: 15;
}

.student {
  width: 95.75%;
  /* 1838.40589384316px / 1920px * 100 */
  height: 94.19%;
  /* 299.853646162341px / 318.349918340013px * 100 */
  top: 16.89%;
  /* 53.7840052208594px / 318.349918340013px */
  left: 2.25%;
  /* 43.1445265382063px / 1920px */
  z-index: 10;
}

.sub-avatar9 {
  width: 7.35%;
  /* 141.101798074689px / 1920px * 100 */
  height: 79.80%;
  /* 254.029514235872px / 318.349918340013px * 100 */
  top: -0.05%;
  /* -0.14692803825346px / 318.349918340013px */
  left: 83.55%;
  /* 1604.18188535378px / 1920px */
  z-index: 5;
}

/* アニメーション パーツ */
.move-sub-avatar2-head1 {
  width: 10.73%;
  /* 205.980618395194px / 1920px * 100 */
  height: 55.94%;
  /* 178.07707292765px / 318.349918340013px * 100 */
  top: 19.34%;
  /* 61.5713107255178px / 318.349918340013px */
  left: 13.96%;
  /* 268.095783476236px / 1920px */
  z-index: 5;
}

.move-sub-avatar2-head2 {
  width: 10.44%;
  /* 200.424386109928px / 1920px * 100 */
  height: 56.50%;
  /* 179.859780812106px / 318.349918340013px * 100 */
  top: 18.61%;
  /* 59.2290085873674px / 318.349918340013px */
  left: 14.18%;
  /* 272.272024415815px / 1920px */
  z-index: 5;
}

.move-sub-avatar2-head3 {
  width: 10.27%;
  /* 197.250777090104px / 1920px * 100 */
  height: 57.59%;
  /* 183.339215158006px / 318.349918340013px * 100 */
  top: 17.42%;
  /* 55.4459677258346px / 318.349918340013px */
  left: 14.38%;
  /* 276.059996616376px / 1920px */
  z-index: 5;
}

.move-sub-avatar6-arm-l1 {
  width: 4.14%;
  /* 79.4860259085999px / 1920px * 100 */
  height: 26.93%;
  /* 85.7377358115191px / 318.349918340013px * 100 */
  top: 74.49%;
  /* 237.13143623406px / 318.349918340013px */
  left: 63.15%;
  /* 1212.40293737743px / 1920px */
  z-index: 5;
}

.move-sub-avatar6-arm-l2 {
  width: 5.39%;
  /* 103.421346950081px / 1920px * 100 */
  height: 17.77%;
  /* 56.5866744851155px / 318.349918340013px * 100 */
  top: 77.83%;
  /* 247.780260490295px / 318.349918340013px */
  left: 62.80%;
  /* 1205.80164344422px / 1920px */
  z-index: 5;
}

.move-sub-avatar6-arm-l3 {
  width: 5.68%;
  /* 109.019971246331px / 1920px * 100 */
  height: 12.50%;
  /* 39.7793061968823px / 318.349918340013px * 100 */
  top: 78.40%;
  /* 249.600527343824px / 318.349918340013px */
  left: 62.65%;
  /* 1202.85000388114px / 1920px */
  z-index: 5;
}

.move-sub-avatar8-head1 {
  width: 9.93%;
  /* 190.733587651817px / 1920px * 100 */
  height: 57.37%;
  /* 182.638187155687px / 318.349918340013px * 100 */
  top: 19.38%;
  /* 61.6957323774959px / 318.349918340013px */
  left: 88.74%;
  /* 1703.84092645049px / 1920px */
  z-index: 5;
}

.move-sub-avatar8-head2 {
  width: 9.90%;
  /* 190.013392310821px / 1920px * 100 */
  height: 57.50%;
  /* 183.052544677263px / 318.349918340013px * 100 */
  top: 18.96%;
  /* 60.3502737568142px / 318.349918340013px */
  left: 88.77%;
  /* 1704.31550189572px / 1920px */
  z-index: 5;
}

.move-sub-avatar8-head3 {
  width: 9.82%;
  /* 188.602123629329px / 1920px * 100 */
  height: 57.59%;
  /* 183.339251872879px / 318.349918340013px * 100 */
  top: 18.52%;
  /* 58.9519188978757px / 318.349918340013px */
  left: 88.81%;
  /* 1705.17316203957px / 1920px */
  z-index: 5;
}

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

.conference-plane-image {
  height: auto;
}

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

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

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

@media (orientation: landscape) {
  /* デバイスが横向きの場合の記述 */
  .parts-screen {
    transform: translateX(-50%);
    left: 50%;
    height: auto;
  }
}

@media only screen and (hover: conference) and (orientation: landscape) and (min-width: 768px) {
  /* デバイスが横向き 且つ 768px以上 の場合の記述 */
}

@media only screen and (orientation: landscape) and (min-width: 769px) {
  /* デバイスが横向き 且つ 769px 以上 且つ 1023px 以下 の場合の記述 */
  /* .parts-screen {
    width: 24.23%;
    top: 30.28%;
  }

  .parts-slide-left {
    width: 20.01%;
    top: 5.19%;
    left: 23.33%;
  }

  .parts-slide-right {
    width: 20.01%;
    top: 5.21%;
    left: 62.65%;
  } */
}

@media (orientation: portrait) {

  /* デバイスが縦向きの場合の記述 */
  .parts-screen {
    transform: translateX(-50%);
    left: 50%;
    height: auto;
  }
}

@media (orientation: portrait) and (max-width: 1024px) {

  /* デバイスが縦向き 且つ 1024px 未満 の場合の記述 */
  .parts-screen {
    max-width: 980px;
    width: 40.38%;
    /* 775.388750120898px / 1920px * 100 */
    top: 19.20%;
    /* 174.69206686536px / 910px * 100 */
  }
}

@media (orientation: portrait) and (max-width: 920px) {

  /* デバイスが縦向き 且つ 920px 未満 の場合の記述 */
  .parts-screen {
    max-width: 720px;
    width: 40.38%;
    /* 775.388750120898px / 1920px * 100 */
    top: 19.20%;
    /* 174.69206686536px / 910px * 100 */

  }
}

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

  /* デバイスが縦向き 且つ 768px 未満 の場合の記述 */
  .parts-screen {
    width: 37.69%; /* 723.696166779506px / 1920px * 100 */
    top: 21.04%; /* 191.499583339368px / 910px * 100 */
  }
}

@media (orientation: portrait) and (max-width: 550px) {

  /* デバイスが縦向き 且つ 550px 未満 の場合の記述 */
  .parts-screen {
    max-width: 500px;
    /* 465.848083389753px / 1920px * 100 */
    width: 24.23%;
    /* 465.233250072539px / 1920px * 100 */
    top: 30.28%;
    /* 275.537165709398px / 910px * 100 */
  }
}

@media (orientation: portrait) and (min-width: 469px) and (max-width: 520px) {

  /* デバイスが縦向き 且つ 468px 未満 の場合の記述 */
  .parts-screen {
    max-width: 450px;
    width: 18.85%;
    /* 361.848083389753px / 1920px * 100 */
    top: 33.97%;
    /* 309.152198657412px / 910px * 100 */
  }
}

@media (orientation: portrait) and (max-width: 468px) {

  /* デバイスが縦向き 且つ 468px 未満 の場合の記述 */
  .parts-screen {
    width: 18.85%;
    /* 361.848083389753px / 1920px * 100 */
    top: 33.97%;
    /* 309.152198657412px / 910px * 100 */
  }
}

@media (orientation: portrait) and (max-width: 320px) {

  /* デバイスが縦向き 且つ 320px 未満 の場合の記述 */
  .parts-screen {
    max-width: 300px;
    top: 33.97%;
    /* 309.152198657412px / 910px * 100 */
  }
}

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