/**
 * VENUE-CLASSROOM-PLANE STYLE
 * 教室-平面
 * 平面動画 [parent-plane]
 */

/* HEADER */
/* .venue-header {
  position: static !important;
} */

/* /HEADER ここまで */

/* 背景 */
.background {
  width: 100%;
  /* 1924.15317691346px / 1920px * 100 */
  height: 100%;
  /* 1054.04847214581px / 910px * 100 */
  top: 0%;
  /* -134.41095936307px / 910px * 100 */
  left: 0%;
  /* -1.83934201105149px / 1920px * 100 */
  z-index: 0;
}

/* .parts-student 基準 ここから */
.parts-student {
  aspect-ratio: 960 / 137;
  height: auto;
  width: 100.00%;
  /* 1920px / 1920px * 100 */
  /* height: 30.11%; */
  /* 273.981204412117px / 910px * 100 */
  top: 69.89%;
  /* 636.018795587883px / 910px * 100 */
  left: 0.00%;
  /* 0px / 1920px * 100 */
  z-index: 5;
}

.left-1 {
  width: 30.84%;
  /* 592.214573365184px / 1920px * 100 */
  height: 197.07%;
  /* 539.927614586124px / 273.981204412117px * 100 */
  top: 1.17%;
  /* 3.21672480052985px / 273.981204412117px */
  left: -3.16%;
  /* -60.7531581731973px / 1920px */
  z-index: 10;
}

.left-2 {
  width: 23.78%;
  /* 456.558609284447px / 1920px * 100 */
  height: 48.46%;
  /* 132.759516444197px / 273.981204412117px * 100 */
  top: 38.34%;
  /* 105.053069161768px / 273.981204412117px */
  left: 6.26%;
  /* 120.102828812521px / 1920px */
  z-index: 5;
}

.center-1 {
  width: 34.18%;
  /* 656.185274000995px / 1920px * 100 */
  height: 113.69%;
  /* 311.483504276437px / 273.981204412117px * 100 */
  top: 20.00%;
  /* 54.8077295693565px / 273.981204412117px */
  left: 32.71%;
  /* 627.942078914094px / 1920px */
  z-index: 10;
}

.center-2 {
  width: 28.84%;
  /* 553.707295722649px / 1920px * 100 */
  height: 119.31%;
  /* 326.892566638588px / 273.981204412117px * 100 */
  top: 4.93%;
  /* 13.5004493370325px / 273.981204412117px */
  left: 35.32%;
  /* 678.20107522803px / 1920px */
  z-index: 5;
}

.right-1 {
  width: 33.20%;
  /* 637.414596270171px / 1920px * 100 */
  height: 201.64%;
  /* 552.458422379435px / 273.981204412117px * 100 */
  top: 3.57%;
  /* 9.78245960413824px / 273.981204412117px */
  left: 70.26%;
  /* 1348.91844386568px / 1920px */
  z-index: 5;
}

/* アニメーション パーツ */
.move-sub-avatar7-arm-l1 {
  width: 2.96%;
  /* 56.9266355739892px / 1920px * 100 */
  height: 15.61%;
  /* 42.7668289358389px / 273.981204412117px * 100 */
  top: 45.17%;
  /* 123.769840895919px / 273.981204412117px */
  left: 22.41%;
  /* 430.32928018495px / 1920px */
  z-index: 5;
}

.move-sub-avatar7-arm-l2 {
  width: 3.20%;
  /* 61.3454328011503px / 1920px * 100 */
  height: 9.96%;
  /* 27.2916094489319px / 273.981204412117px * 100 */
  top: 46.48%;
  /* 127.337034362121px / 273.981204412117px */
  left: 22.44%;
  /* 430.936007934908px / 1920px */
  z-index: 5;
}

.move-sub-avatar7-arm-l3 {
  width: 3.12%;
  /* 59.9751213124409px / 1920px * 100 */
  height: 12.20%;
  /* 33.4308482136857px / 273.981204412117px * 100 */
  top: 40.76%;
  /* 111.674683480733px / 273.981204412117px */
  left: 22.30%;
  /* 428.237596907072px / 1920px */
  z-index: 5;
}

.move-sub-avatar4-arm-l1 {
  width: 2.91%;
  /* 55.8241979249633px / 1920px * 100 */
  height: 16.29%;
  /* 44.6316823300931px / 273.981204412117px * 100 */
  top: 61.50%;
  /* 168.496176044257px / 273.981204412117px */
  left: 46.91%;
  /* 900.758726315378px / 1920px */
  z-index: 5;
}

.move-sub-avatar4-arm-l2 {
  width: 3.20%;
  /* 61.5118311610277px / 1920px * 100 */
  height: 13.98%;
  /* 38.3094108922905px / 273.981204412117px * 100 */
  top: 63.26%;
  /* 173.306923746721px / 273.981204412117px */
  left: 46.76%;
  /* 897.764195889387px / 1920px */
  z-index: 5;
}

.move-sub-avatar4-arm-l3 {
  width: 3.20%;
  /* 61.3921015832057px / 1920px * 100 */
  height: 10.55%;
  /* 28.9160591028667px / 273.981204412117px * 100 */
  top: 65.52%;
  /* 179.513173471685px / 273.981204412117px */
  left: 46.80%;
  /* 898.563302341625px / 1920px */
  z-index: 5;
}

.move-sub-avatar2-head1 {
  width: 15.86%;
  /* 304.53684608358px / 1920px * 100 */
  height: 104.24%;
  /* 285.584975028px / 273.981204412117px * 100 */
  top: -0.00%;
  /* -0.00978098272753px / 273.981204412117px */
  left: 87.39%;
  /* 1677.93587138462px / 1920px */
  z-index: 10;
}

.move-sub-avatar2-head2 {
  width: 15.88%;
  /* 304.84913376483px / 1920px * 100 */
  height: 103.44%;
  /* 283.395950093398px / 273.981204412117px * 100 */
  top: 1.08%;
  /* 2.96882944230674px / 273.981204412117px */
  left: 87.39%;
  /* 1677.95358665681px / 1920px */
  z-index: 10;
}

.move-sub-avatar2-head3 {
  width: 15.66%;
  /* 300.702045617489px / 1920px * 100 */
  height: 100.55%;
  /* 275.486796830477px / 273.981204412117px * 100 */
  top: 4.19%;
  /* 11.4704944155346px / 273.981204412117px */
  left: 87.52%;
  /* 1680.39193350875px / 1920px */
  z-index: 10;
}

/* /アニメーションパーツ ここまで */
/* /.parts-student基準 ここまで */

/* .parts-screen 基準ここから */
.parts-screen {
  min-width: 320px;
  left: 50%;
  transform: translateX(-50%);
  width: 16.15%;
  /* 310.000031081861px / 1920px * 100 */
  height: 20.56%;
  /* 187.0796px / 910px * 100 */
  top: 31.32%;
  /* 285.055652201544px / 910px * 100 */
  left: 41.93%;
  /* 804.999984459069px / 1920px * 100 */
  left: 50%;
  /* 810px / 1920px * 100 */
  aspect-ratio: 320 / 193;
  height: auto;
  z-index: 5;
}

.thumbnail-screen {
  z-index: 5;
}

.screen-parts {
  width: 100.00%;
  /* 960px / 960px * 100 */
  height: 6.79%;
  /* 39.3432193321005px / 579.343219332048px * 100 */
  top: 0.00%;
  /* 0px / 579.343219332048px */
  left: 0.00%;
  /* 0px / 960px */
  z-index: 5;
}

/* SCREEN */
.screen {
  top: 6.79%;
  /* 39.3432193320505px / 579.343219332048px */
}

/* コントロールボタン 平面動画 [parent-plane] */
.movie-control-buttons.is-parent-plane {
  top: 50%;
}
/* /コントロールボタン ここまで */

/* 再生アイコン */
/* .screen-movie基準 */
.button-play {
  width: 20.83%;
  /* 200px / 960px * 100 */
  height: 26.30%;
  /* 152.362359589053px / 579.343219332048px * 100 */
  top: 40.25%;
  /* 233.162039537523px / 579.343219332048px */
  left: 39.58%;
  /* 380px / 960px */
  z-index: 5;
}

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

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

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

  /* .parts-screen 基準 ここから */
  .parts-screen {
    width: 31.25%;
    /* 600px / 1920px * 100 */
    height: 39.79%;
    /* 362.08951208253px / 910px * 100 */
    top: 20.03%;
    /* 182.238518139646px / 910px * 100 */
    /* left: 34.38%; */
    /* 660px / 1920px * 100 */
  }

  /* SCREEN */
  .screen {}

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

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

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

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

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

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

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

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

  /* .parts-screen 基準 ここから */
  .parts-screen {
    width: 50.00%;
    /* 960px / 1920px * 100 */
    height: 63.66%;
    /* 579.343219332048px / 910px * 100 */
    top: 7.25%;
    /* 66.0180457106599px / 910px * 100 */
    /* left: 25.00%; */
    /* 480px / 1920px * 100 */
  }

  /* SCREEN */
  .screen {}

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

@media (orientation: landscape) {

  /* デバイスが横向きの場合の記述 */
  /* .parts-screen 基準 ここから */
  .parts-screen {
    width: 50.00%;
    /* 960px / 1920px * 100 */
    top: 7.25%;
    /* 66.0180457106599px / 910px * 100 */
    height: auto;
  }

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

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

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