/*
* CORPORATE YACHIYO STYLE
*/
html {
  min-height: 100dvh;
  height: 100%;
  font-family: sans-serif;
}

body {
  font-size: 0.875rem;
  /* 14px */
  height: 100%;
  /* overflow: hidden; */
}

.is-transparent {
  opacity: 0;
}

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

/* SCROLL BAR */
/* Chrome, Edge, Safari (WebKit) */
::-webkit-scrollbar {
  width: 10px;
  /* スクロールバーの幅 */
}

::-webkit-scrollbar-thumb {
  background-color: #888;
  /* スクロールバーのつまみの色 */
  border-radius: 5px;
  /* スクロールバーのつまみの角丸 */
}

::-webkit-scrollbar-track {
  background-color: #f1f1f1;
  /* スクロールバーのトラックの色 */
}

/* Firefox */
/* Firefox 64以降は -moz- プレフィックスが不要ですが、古いバージョンのサポートが必要な場合は付与してください */
/* Firefox 64以前の場合 */
/* これらのプロパティは Firefox でのみ適用されます */
/* Firefox 64以降ではネイティブのスクロールバースタイルが適用されます */
.scrollbar-firefox {
  scrollbar-color: #888 #f1f1f1;
  scrollbar-width: thin;
  /* スクロールバーの幅 */
}

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

.yachiyo-wrapper {
  /* width: 100%; */
  min-width: 100%;
  min-height: 100%;
  max-width: none;
  aspect-ratio: 53 / 27;
  /* 2120px : 1080px */
  overflow: hidden;
  width: 2120px;
  height: 1080px;
}

.yachiyo {
  position: relative;
  width: 100%;
  height: 100%;
  /* aspect-ratio: 2.11 / 1; */
  /* 2120px : 1080px */
  /* aspect-ratio: 2.313 / 1; */
  /* 2120px : 830px(1080px - 80px(headerHieght)) */
  /* overflow: hidden; */
  z-index: 1;
}

/* パーツここから */
/* school パーツ */
.room-number {
  width: 2.50%;
  /* 52.958px / 2120px * 100 */
  height: 4.44%;
  /* 47.9303px / 1080px * 100 */
  top: 47.13%;
  /* 509.0302px / 1080px * 100 */
  z-index: 15;
}

.pin-room-1 {
  top: 41.57%;
  /* 448.988521978185px / 1080px * 100 */
  left: 41.12%;
  /* 871.791543169768px / 2120px * 100 */
  z-index: 50;
}

.text-room-1 {}

.room-number-1 {
  left: 40.90%;
  /* 867.1129px / 2120px * 100 */
}

.pin-room-2 {
  top: 41.57%;
  /* 448.988521978185px / 1080px * 100 */
  left: 46.04%;
  /* 976.009959785229px / 2120px * 100 */
  z-index: 49;
}

.text-room-2 {
  z-index: 40;
}

.room-number-2 {
  left: 45.94%;
  /* 973.9785px / 2120px * 100 */
}

.pin-room-3 {
  top: 41.57%;
  /* 448.988521978185px / 1080px * 100 */
  left: 51.15%;
  /* 1084.29686568021px / 2120px * 100 */
  z-index: 48;
}

.text-room-3 {
  z-index: 30;
}

.room-number-3 {
  left: 50.86%;
  /* 1078.1227px / 2120px * 100 */
}

.pin-room-4 {
  top: 41.57%;
  /* 448.988521978185px / 1080px * 100 */
  left: 55.93%;
  /* 1185.673222304px / 2120px * 100 */
  z-index: 47;
}

.text-room-4 {
  z-index: 20;
}

.room-number-4 {
  left: 55.81%;
  /* 1183.0879px / 2120px * 100 */
}

.link-room-1-wrapper {
  width: 4.82%;
  /* 102.095654822392px / 2120px * 100 */
  height: 6.36%;
  /* 68.6941599623833px / 1080px * 100 */
  top: 46.79%;
  /* 505.29380167289px / 1080px * 100 */
  left: 39.67%;
  /* 841.003128281111px / 2120px * 100 */
}

.link-room-2-wrapper {
  width: 4.97%;
  /* 105.322364600011px / 2120px * 100 */
  height: 6.36%;
  /* 68.6941599623815px / 1080px * 100 */
  top: 46.79%;
  /* 505.293801672892px / 1080px * 100 */
  left: 44.59%;
  /* 945.274913106537px / 2120px * 100 */
}

.link-room-3-wrapper {
  width: 4.99%;
  /* 105.864462241516px / 2120px * 100 */
  height: 6.36%;
  /* 68.6941599623815px / 1080px * 100 */
  top: 46.79%;
  /* 505.293801672892px / 1080px * 100 */
  left: 49.66%;
  /* 1052.75569296858px / 2120px * 100 */
}

.link-room-4-wrapper {
  width: 4.54%;
  /* 96.3377480938325px / 2120px * 100 */
  height: 6.36%;
  /* 68.6941599623815px / 1080px * 100 */
  top: 46.79%;
  /* 505.293801672892px / 1080px * 100 */
  left: 54.75%;
  /* 1160.71768681211px / 2120px * 100 */
}

.school {
  width: 32.30%;
  /* 684.844068056497px / 2120px * 100 */
  height: 28.19%;
  /* 304.429786275163px / 1080px * 100 */
  top: 40.25%;
  /* 434.657071660364px / 1080px * 100 */
  left: 33.08%;
  /* 701.358287348893px / 2120px * 100 */
  z-index: 10;
}

/* /school パーツ ここまで */

/* bldg-3 パーツ */
.pin-bldg-3 {
  top: 75.63%;
  /* 816.797712877986px / 1080px * 100 */
  left: 61.86%;
  /* 1311.34486322209px / 2120px * 100 */
}

.text-bldg-3 {}

.link-bldg-3-wrapper {
  width: 25.08%;
  /* 531.665497710179px / 2120px * 100 */
  height: 22.59%;
  /* 243.936393699052px / 1080px * 100 */
  top: 75.63%;
  /* 816.830099999999px / 1080px * 100 */
  left: 52.20%;
  /* 1106.5454px / 2120px * 100 */
}

.bldg-3 {
  width: 25.71%;
  /* 544.985118343368px / 2120px * 100 */
  height: 27.34%;
  /* 295.256072307186px / 1080px * 100 */
  top: 72.12%;
  /* 778.932774943836px / 1080px * 100 */
  left: 51.88%;
  /* 1099.7753073441px / 2120px * 100 */
  z-index: 9;
}

/* /bldg-3 パーツ ここまで */

/* bldg-2 パーツ */
.pin-bldg-2 {
  top: 72.70%;
  /* 785.213891821864px / 1080px * 100 */
  left: 40.69%;
  /* 862.562879982555px / 2120px * 100 */
}

.text-bldg-2 {}

.link-bldg-2-wrapper {
  width: 10.86%;
  /* 230.3253px / 2120px * 100 */
  height: 19.31%;
  /* 208.540614232539px / 1080px * 100 */
  top: 71.65%;
  /* 773.85485852489px / 1080px * 100 */
  left: 37.14%;
  /* 787.309008956051px / 2120px * 100 */
}

.bldg-2 {
  width: 12.33%;
  /* 261.290324686464px / 2120px * 100 */
  height: 19.82%;
  /* 214.057325679572px / 1080px * 100 */
  top: 71.65%;
  /* 773.85485852489px / 1080px * 100 */
  left: 36.34%;
  /* 770.402532198325px / 2120px * 100 */
  z-index: 8;
}

/* /bldg-2 パーツ ここまで */

/* bldg-6 ここから */
.pin-bldg-6 {
  top: 64.83%;
  /* 700.184852592536px / 1080px * 100 */
  left: 15.44%;
  /* 327.315039296715px / 2120px * 100 */
}

.text-bldg-6 {}

.link-bldg-6-wrapper {
  width: 21.31%;
  /* 451.856818280287px / 2120px * 100 */
  height: 31.11%;
  /* 336.008907809901px / 1080px * 100 */
  top: 55.93%;
  /* 604.015732881089px / 1080px * 100 */
  left: 8.78%;
  /* 186.111750000005px / 2120px * 100 */
}

.bldg-6 {
  width: 21.31%;
  /* 451.856900000001px / 2120px * 100 */
  height: 31.11%;
  /* 336.011534237819px / 1080px * 100 */
  top: 55.93%;
  /* 604.015732881089px / 1080px * 100 */
  left: 8.78%;
  /* 186.111750000007px / 2120px * 100 */
  z-index: 7;
}

/* /bldg-6 パーツ ここまで */

/* bldg-4 パーツ */
.pin-bldg-4 {
  top: 50.39%;
  /* 544.190301243463px / 1080px * 100 */
  left: 82.36%;
  /* 1746.12262537638px / 2120px * 100 */
}

.text-bldg-4 {}

.link-bldg-4-wrapper {
  width: 26.12%;
  /* 553.835015446099px / 2120px * 100 */
  height: 27.37%;
  /* 295.628315634011px / 1080px * 100 */
  top: 47.85%;
  /* 516.829860882051px / 1080px * 100 */
  left: 70.80%;
  /* 1500.91044727375px / 2120px * 100 */
}

.bldg-4 {
  width: 26.12%;
  /* 553.835015446104px / 2120px * 100 */
  height: 28.56%;
  /* 308.456121365592px / 1080px * 100 */
  top: 46.67%;
  /* 504.002055150469px / 1080px * 100 */
  top: 45.47%;
  top: 45.77%;
  left: 70.80%;
  /* 1500.91044727375px / 2120px * 100 */
  z-index: 5;
}

/* /bldg-4 パーツ ここまで */

/* bldg-1 パーツ */
.pin-bldg-1 {
  top: 30.10%;
  /* 325.04959386337px / 1080px * 100 */
  left: 19.96%;
  /* 423.159919796447px / 2120px * 100 */
}

.text-bldg-1 {}

.link-bldg-1-wrapper {
  width: 10.29%;
  /* 218.071594238282px / 2120px * 100 */
  height: 11.82%;
  /* 127.699279785156px / 1080px * 100 */
  top: 30.62%;
  /* 330.6679px / 1080px * 100 */
  left: 16.27%;
  /* 344.858805761718px / 2120px * 100 */
}

.bldg-1 {
  width: 11.18%;
  /* 237.0026px / 2120px * 100 */
  height: 13.29%;
  /* 143.4865px / 1080px * 100 */
  top: 29.75%;
  /* 321.2502px / 1080px * 100 */
  left: 15.77%;
  /* 321.2502px / 2120px * 100 */
  z-index: 4;
}

/* /bldg-1 パーツ ここまで */

/* bldg-7 パーツ */
.pin-bldg-7 {
  top: 34.01%;
  /* 367.269697708908px / 1080px * 100 */
  left: 71.29%;
  /* 1511.30153186293px / 2120px * 100 */
}

.text-bldg-7 {}

.link-bldg-7-wrapper {
  width: 21.61%;
  /* 458.044897704096px / 2120px * 100 */
  height: 21.89%;
  /* 236.391296386719px / 1080px * 100 */
  top: 29.75%;
  /* 321.327869413984px / 1080px * 100 */
  left: 63.16%;
  /* 1339.0051902846px / 2120px * 100 */
}

.bldg-7 {
  width: 21.61%;
  /* 458.044914992777px / 2120px * 100 */
  height: 21.89%;
  /* 236.391309595871px / 1080px * 100 */
  top: 29.75%;
  /* 321.327856204833px / 1080px * 100 */
  left: 63.16%;
  /* 1339.0051902846px / 2120px * 100 */
  z-index: 3;
}

/* /bldg-7 パーツ ここまで */

/* bldg-5 パーツ */
.pin-bldg-5 {
  top: 27.68%;
  /* 298.90227544363px / 1080px * 100 */
  left: 81.84%;
  /* 1734.97254084827px / 2120px * 100 */
}

.text-bldg-5 {}

.link-bldg-5-wrapper {
  width: 7.94%;
  /* 168.326200000001px / 2120px * 100 */
  height: 12.12%;
  /* 130.861854430079px / 1080px * 100 */
  top: 29.50%;
  /* 318.620199999999px / 1080px * 100 */
  left: 78.21%;
  /* 1657.9604px / 2120px * 100 */
}

.bldg-5 {
  width: 9.11%;
  /* 193.220651081187px / 2120px * 100 */
  height: 18.86%;
  /* 203.716291143647px / 1080px * 100 */
  top: 27.68%;
  /* 298.90227544363px / 1080px * 100 */
  top: 28.39%;
  top: 28.69%;
  left: 77.74%;
  /* 1648.0537766754px / 2120px * 100 */
  z-index: 2;
}

/* /bldg-5 パーツ ここまで */

/* 背景 */
.background-parts {
  width: 93.83%;
  /* 1989.22897608903px / 2120px * 100 */
  height: 54.14%;
  /* 584.757644845833px / 1080px * 100 */
  top: 26.29%;
  /* 283.89648852157px / 1080px * 100 */
  left: 6.21%;
  /* 131.709751344129px / 2120px * 100 */
  z-index: 6;
}

.background-parts-left {
  width: 9.86%;
  /* 208.93px / 2120px * 100 */
  height: 17.28%;
  /* 186.6112px / 1080px * 100 */
  top: 26.29%;
  /* 283.8965px / 1080px * 100 */
  left: 6.21%;
  /* 131.7098px / 2120px * 100 */
  z-index: 6;
}

.background-parts-right {
  width: 31.87%;
  /* 675.6153px / 2120px * 100 */
  height: 19.18%;
  /* 207.1077px / 1080px * 100 */
  top: 61.25%;
  /* 661.5464px / 1080px * 100 */
  left: 68.18%;
  /* 1445.3235px / 2120px * 100 */
  z-index: 6;
}

.background-road {
  width: 13.26%;
  /* 281.1997px / 2120px * 100 */
  height: 20.11%;
  /* 217.2094px / 1080px * 100 */
  top: 40.04%;
  /* 432.4551px / 1080px * 100 */
  left: 80.95%;
  /* 1716.0357px / 2120px * 100 */
  z-index: 6;
}

.background {
  width: 106.40%;
  /* 2255.75020293957px / 2120px * 100 */
  height: 170.09%;
  /* 1837.02168999411px / 1080px * 100 */
  top: -5.18%;
  /* -55.9708678365096px / 1080px * 100 */
  left: -3.71%;
  /* -78.5603320800456px / 2120px * 100 */
  z-index: 1;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

/* /背景 ここまで */

/* パーツここまで */

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

.yachiyo-image {
  position: absolute;
  height: auto;
  max-width: none;
}

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

.yachiyo-link-wrapper {
  position: absolute;
  z-index: 30;
}

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

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

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

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

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

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

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

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

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

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

svg.yachiyo-link-image {
  fill: transparent;
  /* fill: yellow !important; */
  /* z-index: 10 !important; */
  /* position: absolute; */
}

/* リンク用のピン */
.pin {
  display: block;
  position: absolute;
  width: 2.07%;
  /* 43.8421058106996px / 2120px * 100 */
  height: 6.00%;
  /* 64.7686667483677px / 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('../../common/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;
}

/* /リンク用のピン ここまで */

/* .screen 基準 */
.screen {
  width: 18.11%;
  /* 384px / 2120px * 100 */
  height: 20%;
  /* 216px / 1080px * 100 */
  top: 18.47%;
  /* 199.4257px / 1080px * 100 */
  left: 40.92%;
  /* 867.6054px / 2120px * 100 */
  z-index: 12;
}

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

.thumbnail-screen-container {
  width: 100%;
  height: 100%;
  z-index: -1;
}

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

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

/* 再生アイコン */
.button-play {
  width: 7.45%;
  /* 158px / 2120px * 100 */
  height: 11.20%;
  /* 121px / 1080px * 100 */
  top: 22.86%;
  /* 246.9257px / 1080px * 100 */
  left: 46.25%;
  /* 980.6054px / 2120px * 100 */
}

/* サウンドアイコン */
.buttons-sound {
  position: static;
}

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

.screen-frame {
  width: 20.00%;
  /* 423.997215653379px / 2120px * 100 */
  height: 26.19%;
  /* 282.865281970589px / 1080px * 100 */
  top: 17.02%;
  /* 183.8042777299px / 1080px * 100 */
  left: 40.00%;
  /* 848.001392173312px / 2120px * 100 */
  z-index: 11;
}

/* VIDEO JS */
.video-js .vjs-tech {
  visibility: visible !important;
}

.data-player-item {
  width: 100%;
  height: 100%;
}

.data-player-item .video-js {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}

.data-player-item [data-enable-devicemotion] {
  background-color: transparent;
  border: none;
  cursor: pointer;
  outline: none;
  padding: 0;
  appearance: none;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
}

.is-fullscreen {
  z-index: 99999 !important;
}

.is-fullscreen .vjs-control-bar {
  padding: 0 14px;
  height: 5.5em;
}

.is-fullscreen .vjs-control-bar .vjs-control:before {
  font-size: 24px;
  line-height: 1.67;
}

.is-fullscreen .vjs-control-bar .vjs-volume-bar {
  margin: 1.8em 0.45em
}

.is-fullscreen .vjs-control-bar .vjs-progress-control {
  padding-bottom: 1.5em;
}

.is-fullscreen .vjs-control-bar .vjs-time-control {
  line-height: 4em;
}

/* videojs音声コントロール関係を非表示にする */
.video-js .vjs-mute-control {
  display: none;
}

.video-js .vjs-volume-panel {
  display: none;
}

/* MAIN ここまで */

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

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

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

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

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

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

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

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

@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-yachiyo {}

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

  /* MAIN ここまで */
}