/*
* QUALICAS SCHOOL2 STYLE
* CORPORATE SCHOOL2
*/
body {
  /* 1rem = 14px; */
}

.is-transparent {
  opacity: 0;
}

.image-button-sound {
  min-width: 30px;
  width: auto;
  height: 100%;
}

.blind {
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 15;
}

/* MAIN */
.corporate-school2 {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: auto;
}

.school2-wrapper {
  /* width: 100%; */
  min-width: 100%;
  min-height: 100%;
  aspect-ratio: 16 / 9;
  /* 1920px : 1080px */
}

.school2 {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  overflow: hidden;
  z-index: 1;
}

.school2-image {
  position: absolute;
}

.school2-link {
  position: absolute;
  height: auto;
  z-index: 10;
}

.school2-link img {
  width: 100%;
  height: auto;

}

.school2-link-wrapper {
  position: absolute;
}

.school2-link-wrapper .school2-image {
  width: 100%;
  height: auto;
  left: 0;
  top: 0;
}

/* .school2-link-wrapper:hover .school2-link-text {
  display: block;
} */

.school2-link-image {
  width: 100%;
  height: 100%;
  position: relative;
  left: 0;
  top: 0;
  z-index: 20;
}

/* link-text */
.school2-link-text {
  position: absolute;
  min-width: calc(1.05em * 2);
  /* 2文字 */
  max-width: calc(1.05em * 10);
  /* 10文字 */
  word-break: break-word;
  /* 単語の途中でも折り返す */
  width: max-content;
  color: #050505;
  text-align: center;
  font-weight: bold;
  letter-spacing: 0.1px;
  background-color: rgb(255 255 255 / 95%);
  padding: 1.30rem;
  /* 1rem : 14px / 1080px * 100 */
  left: 50%;
  /* ピンの中央に合わせる */
  transform: translateX(-50%);
  /* ピンの中央に合わせる */
  box-shadow: 0px 0px 15px -5px #777777;
  border-radius: 5px;
  z-index: 40;
  transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.school2-link-text.--top {
  /* top: calc(-100% + -0.2em); */
  transform: translateX(-50%) translateY(0%);
}

.school2-link-text:not(.is-transparent) {
  opacity: 1;
  pointer-events: auto;
}

.school2-link-text.--top:not(.is-transparent) {
  transform: translateX(-50%) translateY(calc(-100% + -0.2em));
  /* 0.2em 上に配置 */
}

.school2-link-text.--bottom {
  /* top: calc(100% + 0.05em); */
  transform: translateX(-50%) translateY(0%);
}

.school2-link-text.--bottom:not(.is-transparent) {
  transform: translateX(-50%) translateY(calc(50% + 0.05em));
  /* 0.05em 下に配置 */
}

.school2-link-text.--bottom.--right {
  transform: translateX(-50%) translateY(calc(50% + 0.05em));
}

.school2-link-text.--bottom.--right:not(.is-transparent) {
  left: 0;
  transform: translateX(0%) translateY(calc(50% + 0.05em));
  /* テキストが長い時左側が画面外に行くためleft(x)の位置を調整 */
}

/* bus */
.text-bus {
  z-index: 40;
}

/* classroom */
.text-classroom1 {
  z-index: 39;
}

.text-classroom2 {
  z-index: 38;
}

.text-classroom3 {
  z-index: 37;
}

.text-classroom4 {
  z-index: 36;
}

/* open-space */
.text-open-space {
  z-index: 40;
}

/* school-building */
.text-school-building {
  z-index: 38;
}

/* staffroom */
.text-staffroom {
  z-index: 40;
}

/* library */
.text-library {
  z-index: 39;
}

/* ground */
.text-ground {
  z-index: 38;
}

/* gym */
.text-gym {
  z-index: 37;
}

/* /link-text ここまで */

.school2-link-url {
  width: 100%;
  height: 100%;
}

svg.school2-link-image {
  fill: transparent;
  /* fill: yellow !important; */
  /* position: absolute; */
}

/* リンク用のピン */
.pin {
  display: block;
  position: absolute;
  width: 2.28%;
  /* 43.8421058106942px / 1920px * 100 */
  height: 6.00%;
  /* 64.7686667483695px / 1080px * 100 */
}

.pin::after {
  content: "";
  position: absolute;
  inset: 0;
  /* top, right, bottom, left 全て0と同じ意味 */
  width: 100%;
  height: 100%;
  filter: drop-shadow(1px 1px 3px rgba(0, 0, 0, 0.5));
  background-image: url('../images/pin.svg');
  background-size: cover;
  cursor: pointer;
  z-index: 45;
  animation: float 4s ease-in-out infinite;
  /* 4秒間でアニメーションをループ */
}

@keyframes float {
  0% {
    transform: translateY(0);
    /* 基本位置 */
  }

  50% {
    transform: translateY(-4px);
    /* 下に-4px移動 */
  }

  100% {
    transform: translateY(0);
    /* 基本位置 */
  }
}

.pin:focus {
  outline: 2px solid blue;
}

.pin-bus {
  top: 60.88%;
  /* 657.536490589117px / 1080px * 100 */
  left: 85.29%;
  /* 1637.51182816516px / 1920px * 100 */
}

.pin-classroom1 {
  top: 71.82%;
  /* 775.676473242871px / 1080px * 100 */
  left: 51.03%;
  /* 979.692357252111px / 1920px * 100 */
}

.pin-classroom2 {
  top: 61.99%;
  /* 669.535838453403px / 1080px * 100 */
  left: 61.36%;
  /* 1178.09330328909px / 1920px * 100 */
}

.pin-classroom3 {
  top: 51.86%;
  /* 560.081767497049px / 1080px * 100 */
  left: 71.41%;
  /* 1371.13081999641px / 1920px * 100 */
}

.pin-classroom4 {
  top: 41.80%;
  /* 451.454644140069px / 1080px * 100 */
  left: 81.59%;
  /* 1566.61420406352px / 1920px * 100 */
}

.pin-open-space {
  top: 45.95%;
  /* 496.303431211027px / 1080px * 100 */
  left: 49.46%;
  /* 949.713292857502px / 1920px * 100 */
}

.pin-school-building {
  top: 30.76%;
  /* 332.155174897675px / 1080px * 100 */
  left: 70.78%;
  /* 1358.96941339087px / 1920px * 100 */
}

.pin-staffroom {
  top: 44.48%;
  /* 480.357858931293px / 1080px * 100 */
  left: 21.64%;
  /* 415.569383551344px / 1920px * 100 */
}

.pin-library {
  top: 32.50%;
  /* 350.950987927109px / 1080px * 100 */
  left: 32.18%;
  /* 617.9380296085px / 1920px * 100 */
}

.pin-ground {
  top: 24.86%;
  /* 268.538862364906px / 1080px * 100 */
  left: 7.22%;
  /* 138.546127995383px / 1920px * 100 */
}

.pin-gym {
  top: 1.55%;
  /* 16.7129000028945px / 1080px * 100 */
  left: 24.19%;
  /* 464.525690391375px / 1920px * 100 */
}

/* /リンク用のピン ここまで */
/* bus パーツ */
.link-bus {
  width: 100.00%;
  /* 108.165710449219px / 108.165690318199px * 100 */
  height: 69.62%;
  /* 92.0802001953125px / 132.268051943462px * 100 */
  top: 130.38%;
  /* 172.455918154399px / 132.268051943462px */
  left: 0.00%;
  /* 0px / 108.165690318199px */
}

.link-bus-wrapper,
.bus {
  width: 5.63%;
  /* 108.165690318199px / 1920px * 100 */
  height: 8.53%;
  /* 92.0801483929699px / 1080px * 100 */
  top: 64.60%;
  /* 697.724394139608px / 1080px * 100 */
  left: 83.73%;
  /* 1607.69510234574px / 1920px * 100 */
}

.bus-image {
  z-index: 15;
}

.link-bus-image {
  z-index: 20;
}

/* classroom パーツ */
.classroom-common-wall {
  width: 55.54%;
  /* 1066.32629115734px / 1920px * 100 */
  height: 50.16%;
  /* 541.717003127105px / 1080px * 100 */
  top: 40.99%;
  /* 442.683349609375px / 1080px */
  left: 39.72%;
  /* 762.620793729314px / 1920px */
  z-index: 10;
}

.classroom-common-blackboard {
  width: 15.55%;
  /* 298.506360732581px / 1920px * 100 */
  height: 22.35%;
  /* 241.386895427678px / 1080px * 100 */
  top: 25.21%;
  /* 272.321952789331px / 1080px */
  left: 78.95%;
  /* 1515.74808176998px / 1920px */
  z-index: 2;
}

/* classroom1 */
.link-classroom1-wrapper {
  width: 15.07%;
  /* 289.2667px / 1920px * 100 */
  height: 17.13%;
  /* 184.9639px / 1080px * 100 */
  top: 67.03%;
  /* 723.9766px / 1080px * 100 */
  left: 46.11%;
  /* 885.2536px / 1920px * 100 */
}

.classroom1-image,
.classroom1 {
  width: 18.98%;
  /* 364.349553297977px / 1920px * 100 */
  height: 22.28%;
  /* 240.611683752953px / 1080px * 100 */
  top: 67.03%;
  /* 723.976606740734px / 1080px */
  left: 43.24%;
  /* 830.122172858434px / 1920px */
  z-index: 10;
}

.link-classroom1-image {
  /* position: relative;
  left: 0;
  top: 0;
  z-index: 30; */
  z-index: 30;
}

.classroom1-entrance {
  width: 9.91%;
  /* 190.194276601119px / 1920px * 100 */
  height: 16.26%;
  /* 175.594776145281px / 1080px * 100 */
  top: 64.56%;
  /* 697.228992593213px / 1080px */
  left: 42.81%;
  /* 822.041719248611px / 1920px */
  z-index: 10;
}

.classroom1-wall {
  width: 9.66%;
  /* 185.527668694721px / 1920px * 100 */
  height: 16.20%;
  /* 174.932629306786px / 1080px * 100 */
  top: 64.77%;
  /* 699.47644010255px / 1080px * 100 */
  left: 52.51%;
  /* 1008.27882534903px / 1920px * 100 */
  z-index: 9;
}

/* classroom2 */
.link-classroom2-wrapper {
  width: 16.51%;
  /* 316.94111024904px / 1920px * 100 */
  height: 17.64%;
  /* 190.460891577688px / 1080px * 100 */
  top: 56.73%;
  /* 612.664590607903px / 1080px * 100 */
  left: 55.66%;
  /* 1068.74931943846px / 1920px * 100 */
}

.link-classroom1-image {
  z-index: 30;
}

.classroom2-image,
.classroom2 {
  width: 19.72%;
  /* 378.625592288071px / 1920px * 100 */
  height: 23.03%;
  /* 248.725694393477px / 1080px * 100 */
  top: 56.73%;
  /* 612.664609942216px / 1080px */
  left: 52.55%;
  /* 1008.92487351356px / 1920px */
  z-index: 9;
}

.classroom2-entrance {
  width: 10.26%;
  /* 196.990508232199px / 1920px * 100 */
  height: 16.67%;
  /* 180.069543209783px / 1080px * 100 */
  top: 54.26%;
  /* 586.007826018037px / 1080px */
  left: 52.52%;
  /* 1008.31016169568px / 1920px */
  z-index: 8;
}

.classroom2-wall {
  width: 9.53%;
  /* 183.03704826459px / 1920px * 100 */
  height: 16.20%;
  /* 174.932629306785px / 1080px * 100 */
  top: 54.46%;
  /* 588.164865873147px / 1080px */
  left: 62.57%;
  /* 1201.33926439982px / 1920px */
  z-index: 8;
}

/* classroom3 */
.link-classroom3-wrapper {
  width: 15.69%;
  /* 301.304067141731px / 1920px * 100 */
  height: 17.63%;
  /* 190.408984388462px / 1080px * 100 */
  top: 46.42%;
  /* 501.384007722553px / 1080px * 100 */
  left: 65.56%;
  /* 1258.8431062143px / 1920px * 100 */
}

.classroom3-image,
.classroom3 {
  width: 19.06%;
  /* 366.047216941279px / 1920px * 100 */
  height: 22.02%;
  /* 237.856471463414px / 1080px * 100 */
  top: 46.42%;
  /* 501.384022823344px / 1080px */
  left: 63.26%;
  /* 1214.54682626024px / 1920px */
  z-index: 5;
}

.classroom3-entrance {
  width: 10.27%;
  /* 197.13451020132px / 1920px * 100 */
  height: 16.67%;
  /* 180.078797732964px / 1080px * 100 */
  top: 43.95%;
  /* 474.626651136843px / 1080px */
  left: 62.56%;
  /* 1201.19512655455px / 1920px */
  z-index: 6;
}

.classroom3-wall {
  width: 9.53%;
  /* 183.011592827521px / 1920px * 100 */
  height: 16.20%;
  /* 174.932629306787px / 1080px * 100 */
  top: 44.16%;
  /* 476.882425472723px / 1080px */
  left: 72.63%;
  /* 1394.40380260095px / 1920px */
  z-index: 4;
}

/* classroom4 */
.link-classroom4-wrapper {
  width: 15.61%;
  /* 299.67952332429px / 1920px * 100 */
  height: 17.61%;
  /* 190.183434601973px / 1080px * 100 */
  top: 36.13%;
  /* 390.198216706929px / 1080px * 100 */
  left: 75.69%;
  /* 1453.17909445956px / 1920px * 100 */
}

.classroom4-image,
.classroom4 {
  width: 18.95%;
  /* 363.7570477714px / 1920px * 100 */
  height: 22.13%;
  /* 239.048264744482px / 1080px * 100 */
  top: 36.13%;
  /* 390.198217729561px / 1080px */
  left: 73.42%;
  /* 1409.73865612204px / 1920px */
  z-index: 2;
}

.classroom4-entrance {
  width: 10.27%;
  /* 197.134510201318px / 1920px * 100 */
  height: 16.67%;
  /* 180.074192400913px / 1080px * 100 */
  top: 33.65%;
  /* 363.445368933305px / 1080px */
  left: 72.61%;
  /* 1394.09751488603px / 1920px */
  z-index: 3;
}

.classroom4-wall {
  width: 9.53%;
  /* 183.011592827521px / 1920px * 100 */
  height: 16.20%;
  /* 174.932629306787px / 1080px * 100 */
  top: 33.86%;
  /* 365.696537937134px / 1080px */
  left: 82.67%;
  /* 1587.30619093243px / 1920px */
  z-index: 1;
}

/* open-space パーツ */
.link-open-space-wrapper {
  width: 22.15%;
  /* 425.367592642067px / 1920px * 100 */
  height: 13.66%;
  /* 147.541921816352px / 1080px * 100 */
  top: 46.17%;
  /* 498.592609086577px / 1080px * 100 */
  left: 39.43%;
  /* 757.134709308482px / 1920px * 100 */
}

.open-space-image,
.open-space {
  width: 22.15%;
  /* 425.367592642067px / 1920px * 100 */
  height: 17.58%;
  /* 189.896148065126px / 1080px * 100 */
  top: 42.24%;
  /* 456.239362822919px / 1080px */
  left: 39.43%;
  /* 757.140908996853px / 1920px */
  z-index: 3;
}

.open-space-roof {
  width: 24.14%;
  /* 463.564998838156px / 1920px * 100 */
  height: 31.95%;
  /* 345.057185560202px / 1080px * 100 */
  top: 28.88%;
  /* 311.897661586624px / 1080px */
  left: 38.43%;
  /* 737.951221382514px / 1920px */
  z-index: 4;
}

/* school-building パーツ */
.link-school-building-wrapper {
  width: 7.27%;
  /* 139.53015967198px / 1920px * 100 */
  height: 17.32%;
  /* 187.034707992459px / 1080px * 100 */
  top: 25.65%;
  /* 277.016047433132px / 1080px * 100 */
  left: 68.13%;
  /* 1308.08635870377px / 1920px * 100 */
}

.school-building-image,
.school-building {
  width: 29.32%;
  /* 562.998215061905px / 1920px * 100 */
  height: 43.80%;
  /* 473.079285494526px / 1080px * 100 */
  top: 3.92%;
  /* 42.3430734639951px / 1080px */
  left: 49.89%;
  /* 957.850271603134px / 1920px */
  z-index: 2;
}

/* subroom パーツ */
.subroom-common-wall {
  width: 2.66%;
  /* 50.9870446225568px / 1920px * 100 */
  height: 9.17%;
  /* 99.0384580810733px / 1080px * 100 */
  top: 33.93%;
  /* 366.390428374545px / 1080px */
  left: 21.74%;
  /* 417.425568159698px / 1920px */
  z-index: 1;
}

/* staffroom */
.link-staffroom-wrapper {
  width: 13.85%;
  /* 265.901431595465px / 1920px * 100 */
  height: 14.27%;
  /* 154.086215263689px / 1080px * 100 */
  top: 43.10%;
  /* 465.428886455618px / 1080px * 100 */
  left: 14.61%;
  /* 280.50225253271px / 1920px * 100 */
}

.staffroom-image,
.staffroom {
  width: 17.68%;
  /* 339.468273263946px / 1920px * 100 */
  height: 18.19%;
  /* 196.426829051627px / 1080px * 100 */
  top: 42.05%;
  /* 454.127811256492px / 1080px */
  left: 11.71%;
  /* 224.817204237705px / 1920px */
  z-index: 2;
}

.staffroom-entrance {
  width: 10.16%;
  /* 195.007341404305px / 1920px * 100 */
  height: 16.56%;
  /* 178.873387097525px / 1080px * 100 */
  top: 36.71%;
  /* 396.418041880826px / 1080px */
  left: 21.74%;
  /* 417.424992554913px / 1920px */
  z-index: 4;
}

.staffroom-wall-1 {
  width: 15.28%;
  /* 293.425514816546px / 1920px * 100 */
  height: 21.69%;
  /* 234.256194972957px / 1080px * 100 */
  top: 47.22%;
  /* 509.945481360948px / 1080px */
  left: 10.78%;
  /* 207.036853834384px / 1920px */
  z-index: 5;
}

.staffroom-wall-2 {
  width: 10.80%;
  /* 207.435864455604px / 1920px * 100 */
  height: 17.29%;
  /* 186.684074730436px / 1080px * 100 */
  top: 46.70%;
  /* 504.371091592209px / 1080px */
  left: 21.15%;
  /* 406.007599737519px / 1920px */
  z-index: 4;
}

.staffroom-wall-3 {
  width: 21.52%;
  /* 413.249134726077px / 1920px * 100 */
  height: 25.36%;
  /* 273.862686866089px / 1080px * 100 */
  top: 28.46%;
  /* 307.358718497736px / 1080px */
  left: 11.49%;
  /* 220.545140393106px / 1920px */
  z-index: 1;
}

/* library */
.link-library-wrapper {
  width: 14.01%;
  /* 269.024713227166px / 1920px * 100 */
  height: 14.42%;
  /* 155.727490182318px / 1080px * 100 */
  top: 29.56%;
  /* 319.290938115477px / 1080px * 100 */
  left: 27.32%;
  /* 524.633021304535px / 1920px * 100 */
}

.library-item {
  width: 14.04%;
  /* 269.631775172676px / 1920px * 100 */
  height: 18.83%;
  /* 203.383456272395px / 1080px * 100 */
  top: 26.36%;
  /* 284.717413950186px / 1080px * 100 */
  left: 27.58%;
  /* 529.622734634267px / 1920px * 100 */
  z-index: 2;
}

.library-floor {
  width: 22.02%;
  /* 422.705645342292px / 1920px * 100 */
  height: 22.66%;
  /* 244.707944822016px / 1080px * 100 */
  top: 27.34%;
  /* 295.254945093076px / 1080px * 100 */
  left: 23.46%;
  /* 450.427016108461px / 1920px * 100 */
  z-index: 1;
}

.library-entrance {
  width: 10.22%;
  /* 196.196006527374px / 1920px * 100 */
  height: 16.71%;
  /* 180.429549760884px / 1080px * 100 */
  top: 33.93%;
  /* 366.390428374545px / 1080px * 100 */
  left: 24.39%;
  /* 468.24469242569px / 1920px * 100 */
  z-index: 3;
}

.library-wall-1 {
  width: 10.04%;
  /* 192.773078106518px / 1920px * 100 */
  height: 16.57%;
  /* 178.910217883918px / 1080px * 100 */
  top: 34.05%;
  /* 367.751752558342px / 1080px * 100 */
  left: 34.21%;
  /* 656.736367253639px / 1920px * 100 */
  z-index: 3;
}

.library-wall-2 {
  width: 10.19%;
  /* 195.622087549159px / 1920px * 100 */
  height: 16.60%;
  /* 179.234126539981px / 1080px * 100 */
  top: 23.84%;
  /* 257.455448952113px / 1080px * 100 */
  left: 33.84%;
  /* 649.686345569017px / 1920px * 100 */
  z-index: 1;
}

.library-wall-3 {
  width: 9.84%;
  /* 188.970043444716px / 1920px * 100 */
  height: 16.69%;
  /* 180.233774050685px / 1080px * 100 */
  top: 23.63%;
  /* 255.196174156893px / 1080px * 100 */
  left: 24.19%;
  /* 464.538850690366px / 1920px * 100 */
  z-index: 1;
}

/* ground */
.link-ground-wrapper {
  width: 16.25%;
  /* 311.939453125px / 1920px * 100 */
  height: 16.89%;
  /* 182.407590147141px / 1080px * 100 */
  top: 22.67%;
  /* 244.833620790359px / 1080px * 100 */
  left: 0.32%;
  /* 6.2392578125px / 1920px * 100 */
}

.ground-image,
.ground {
  width: 16.25%;
  /* 311.939453125px / 1920px * 100 */
  height: 16.89%;
  /* 182.407590147141px / 1080px * 100 */
  top: 22.67%;
  /* 244.833608496987px / 1080px */
  left: 0.32%;
  /* 6.2392578125px / 1920px */
  z-index: 1;
}

/* gym パーツ */
.link-gym-wrapper {
  width: 20.80%;
  /* 399.409057617188px / 1920px * 100 */
  height: 25.22%;
  /* 272.366424671652px / 1080px * 100 */
  top: -0.00%;
  /* 0px / 1080px * 100 */
  left: 14.44%;
  /* 277.161865234375px / 1920px * 100 */
}

.gym-image,
.gym {
  width: 22.19%;
  /* 426.031036533825px / 1920px * 100 */
  height: 27.52%;
  /* 297.255248747923px / 1080px * 100 */
  top: -0.00%;
  /* 0px / 1080px */
  left: 13.55%;
  /* 260.211021791484px / 1920px */
  z-index: 1;
}

/* 背景 */
.background {
  position: absolute;
  width: 100%;
  /* 355.0587px / 1920px * 100 */
  height: auto;
  /* 290.4455px / 1080px * 100 */
  top: 0%;
  /* 619.5545px / 1080px * 100 */
  left: 0%;
  /* 456.8597px / 1920px * 100 */
  z-index: 0;
}

/* 背景 パーツ */
/* road-tree パーツ */
.road-tree-left {
  width: 38.46%;
  /* 738.427418952008px / 1920px * 100 */
  height: 32.29%;
  /* 348.77698556639px / 1080px * 100 */
  top: 62.52%;
  /* 675.242035284649px / 1080px * 100 */
  left: 1.74%;
  /* 33.4512995637588px / 1920px * 100 */
  z-index: 1;
}

.road-tree-left-1 {
  width: 17.90%;
  /* 343.749125721953px / 1920px * 100 */
  height: 11.33%;
  /* 122.346904185291px / 1080px * 100 */
  top: 62.52%;
  /* 675.242035284649px / 1080px * 100 */
  left: 1.74%;
  /* 33.4512995637588px / 1920px * 100 */
  z-index: 11;
}

.road-tree-left-2 {
  width: 13.40%;
  /* 257.253884361379px / 1920px * 100 */
  height: 6.38%;
  /* 68.8514570582411px / 1080px * 100 */
  top: 88.44%;
  /* 955.167563792798px / 1080px * 100 */
  left: 26.80%;
  /* 514.624834154388px / 1920px * 100 */
  z-index: 11;
}

.road-tree-right {
  width: 30.71%;
  /* 589.56641648641px / 1920px * 100 */
  height: 23.56%;
  /* 254.438878929743px / 1080px * 100 */
  top: 71.17%;
  /* 768.642776643786px / 1080px * 100 */
  left: 58.99%;
  /* 1132.66628173433px / 1920px * 100 */
  z-index: 1;
}

.road-tree-right-1 {
  width: 13.40%;
  /* 257.25388436138px / 1920px * 100 */
  height: 6.38%;
  /* 68.8514570582374px / 1080px * 100 */
  top: 88.35%;
  /* 954.230198515292px / 1080px * 100 */
  left: 58.99%;
  /* 1132.66628173433px / 1920px * 100 */
  z-index: 11;
}

.road-tree-right-2 {
  width: 1.83%;
  /* 35.0813836458001px / 1920px * 100 */
  height: 6.26%;
  /* 67.6615136525306px / 1080px * 100 */
  top: 73.41%;
  /* 792.873463628353px / 1080px * 100 */
  left: 73.65%;
  /* 1414.1503816271px / 1920px * 100 */
  z-index: 11;
}

.road-tree-right-3 {
  width: 1.83%;
  /* 35.0813836458201px / 1920px * 100 */
  height: 6.26%;
  /* 67.6615136525306px / 1080px * 100 */
  top: 71.17%;
  /* 768.642776643786px / 1080px * 100 */
  left: 87.87%;
  /* 1687.15131457492px / 1920px * 100 */
  z-index: 11;
}

/* school-entrance パーツ */
.school-entrance {
  width: 20.33%;
  /* 390.362515292043px / 1920px * 100 */
  height: 26.30%;
  /* 284.046143660695px / 1080px * 100 */
  top: 51.85%;
  /* 559.930946217308px / 1080px * 100 */
  left: 25.66%;
  /* 492.714844467149px / 1920px * 100 */
  z-index: 1;
}

/* schoolframe パーツ */
.schoolframe-right {
  width: 70.74%;
  /* 1358.15349728508px / 1920px * 100 */
  height: 54.50%;
  /* 588.571541438207px / 1080px * 100 */
  top: 44.82%;
  /* 484.101508693013px / 1080px */
  left: 27.59%;
  /* 529.7566035881px / 1920px */
  z-index: 10;
}

.schoolframe-left {
  width: 28.33%;
  /* 543.887924612925px / 1920px * 100 */
  height: 33.82%;
  /* 365.289700826765px / 1080px * 100 */
  top: 38.87%;
  /* 419.809442501515px / 1080px */
  left: -2.77%;
  /* -53.2152265753712px / 1920px */
  z-index: 5;
}

.schoolframe-up {
  width: 6.04%;
  /* 115.907209607791px / 1920px * 100 */
  height: 8.59%;
  /* 92.7696442397391px / 1080px * 100 */
  top: 41.22%;
  /* 445.151658096598px / 1080px */
  left: 92.24%;
  /* 1770.99348008276px / 1920px */
  z-index: 1;
}

/* /MAIN ここまで */

/* SCREEN */
.bill-screen {
  width: 31.45%;
  /* 603.920425054041px / 1920px * 100 */
  height: 34.18%;
  /* 369.121646414491px / 1080px * 100 */
  top: 1.77%;
  /* 19.0894551293732px / 1080px * 100 */
  left: 34.27%;
  /* 658.039787472979px / 1920px * 100 */
  z-index: 30;
}

.screen {
  position: absolute;
  width: 28.56%;
  /* 548.4312px / 1920px * 100 */
  height: 28.56%;
  /* 308.4926px / 1080px * 100 */
  top: 3.74%;
  /* 40.4198px / 1080px * 100 */
  left: 35.54%;
  /* 682.2983px / 1920px * 100 */
  z-index: 35;
}

.screen-is-image {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

/* 再生アイコン */
.button-play {
  width: 8.23%;
  /* 158px / 1920px */
  height: 11.20%;
  /* 121px / 1080px */
  top: 12.51%;
  /* 135.1167px / 1080px * 100 */
  left: 45.70%;
  /* 877.4801px / 1920px * 100 */
}

/* サウンドアイコン */
.buttons-sound {
  min-width: unset;
  max-width: unset;
  width: 6.04%;
  /* 130px - padding14px / 1920px * 100 */
  height: 6.11%;
  /* 80px - padding14px / 1080px * 100 */
  top: 24.99%;
  /* 269.8628px / 1080px * 100 */
  left: 57.33%;
  /* 1100.6953px / 1920px * 100 */
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding-right: 0.74%;
  /* 14px / 1920px * 100 */
  padding-bottom: 1.30%;
  /* 14px / 1080px * 100 */
}

.button-sound {
  min-width: 2.08%;
  /* 40px / 1920px * 100 */
  min-height: 4.63%;
  /* 50px / 1080px * 100 */
  height: 100%;
  width: 100%;
  max-width: 40px;
  max-height: 50px;
}

.modal.info-modal {
  background-color: rgb(255 255 255 / 65%);
}

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

/* /SCREEN ここまで */

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

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

  /* 1920px = 120rem */

  .image-button-sound {
    min-width: 40px;
  }

  /* link-text */
  .school2-link-text {
    font-size: 1.15rem;
    max-width: calc(1.05em * 12);
    /* 12文字 */
  }

  /* bus */
  .text-bus {}

  /* classroom */
  .text-classroom1 {}

  .text-classroom2 {}

  .text-classroom3 {}

  .text-classroom4 {}

  /* open-space */
  .text-open-space {}

  /* school-building */
  .text-school-building {}

  /* staffroom */
  .text-staffroom {}

  /* library */
  .text-library {}

  /* ground */
  .text-ground {}

  /* gym */
  .text-gym {}
}

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

  /* 1920px = 120rem */

  .image-button-sound {
    min-width: 50px;
  }

  /* link-text */
  .school2-link-text {
    font-size: 1.25rem;
    max-width: calc(1.05em * 14);
    /* 14文字 */
  }

  /* bus */
  .text-bus {}

  /* classroom */
  .text-classroom1 {}

  .text-classroom2 {}

  .text-classroom3 {}

  .text-classroom4 {}

  /* open-space */
  .text-open-space {}

  /* school-building */
  .text-school-building {}

  /* staffroom */
  .text-staffroom {}

  /* library */
  .text-library {}

  /* ground */
  .text-ground {}

  /* gym */
  .text-gym {}
}

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

  /* 大きいスクリーンの場合 */
  .school2-link-text.--bottom:not(.is-transparent) {
    transform: translateX(-50%) translateY(calc(100% + 0.05em));
    /* 0.05em 下に配置 */
  }

  .school2-link-text.--bottom.--right {
    transform: translateX(-50%) translateY(calc(100% + 0.05em));
  }

  .school2-link-text.--bottom.--right:not(.is-transparent) {
    left: 0;
    transform: translateX(0%) translateY(calc(100% + 0.05em));
    /* テキストが長い時左側が画面外に行くためleft(x)の位置を調整 */
  }
}

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

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

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

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

/* スマホ縦向きのスタイル */
@media screen and (max-width: 768px) and (orientation: portrait) {

  /* MAIN */
  .corporate-school2 {}

  .school2-wrapper {
    min-width: 1080px;
    /* 横スクロールできるように */
  }

  /* MAIN ここまで */
}