@charset "UTF-8";
/*フォントの読み込み*/
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100&display=swap");
@import url("https://fast.fonts.net/lt/1.css?apiType=css&c=147389a2-6baa-4788-9105-af3456a6b721&fontids=5664070,5664081");
@font-face {
  font-family: "NotoSansJP";
  src: url("fonts/NotoSansJP-VF.woff") format("woff-variations");
  font-weight: 300;
}
@font-face {
  font-family: "Helvetica Neue LT W05 25 Ult Lt";
  src: url("fonts/5664070/ec6281a0-c9c4-4477-a360-156acd53093f.woff2") format("woff2"), url("fonts/5664070/11066b40-10f7-4123-ba58-d9cbf5e89ceb.woff") format("woff");
  unicode-range: U+0030-0039, U+0041-007A, U+0025-00FF, U+0021, U+2381, U+0332, U+FF3F, U+005F, U+0022, U+0027, U+2018, U+2019, U+201C, U+201D, U+0023, U+FF03, U+0024, U+FE69, U+FF04, U+1F4B2, U+00B7, U+0387, U+2022, U+2219, U+22C5, U+30FB, U+FF65, U+0080 –U0FF, U+2122;
}
@font-face {
  font-family: "Helvetica Neue LT W05 35 Thin";
  src: url("fonts/5664081/7d63ccf8-e0ae-4dee-ad4d-bbc798aa5803.woff2") format("woff2"), url("fonts/5664081/b2c1327f-ab3d-4230-93d7-eee8596e1498.woff") format("woff");
  unicode-range: U+0030-0039, U+0041-007A, U+0025-00FF, U+0021, U+2381, U+0332, U+FF3F, U+005F, U+0022, U+0027, U+2018, U+2019, U+201C, U+201D, U+0023, U+FF03, U+0024, U+FE69, U+FF04, U+1F4B2, U+00B7, U+0387, U+2022, U+2219, U+22C5, U+30FB, U+FF65, U+0080 –U0FF, U+2122;
}
@font-face {
  font-family: "OstentRounded-Regular";
  src: url("fonts/OstentRounded-Regular.otf") format("opentype");
  /* 他のスタイル指定 */
}
@font-face {
  font-family: "OstentRounded-Heavy";
  src: url("fonts/OstentRounded-Heavy.otf") format("opentype");
  /* 他のスタイル指定 */
}
@font-face {
  font-family: "PG_ASCII_230513_1-Regular";
  src: url("fonts/PG_ASCII_230513_1-Regular.otf") format("opentype");
  /* 他のスタイル指定 */
}
* {
  font-family: "Helvetica Neue LT W05 35 Thin", "NotoSansJP", sans-serif;
}

.transition {
  transition: cubic-bezier(0.075, 0.82, 0.165, 1);
  transition-duration: 0.5s;
}

body {
  overflow-y: auto;
  width: 100vw;
  height: 100vh;
  margin: 0px;
  padding: 0px;
  transition: cubic-bezier(0.075, 0.82, 0.165, 1);
  transition-duration: 0.5s;
}

#babylonCanvas {
  width: 100%;
  height: 100%;
  display: block;
  border: solid 0px;
  box-sizing: border-box;
}
#babylonCanvas:focus {
  outline: none;
}

#embed-host {
  z-index: 100000 !important;
}

#babylonLoadingScreen {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  color: white;
  font-size: 50px;
  text-align: center;
  z-index: 90000;
}

#splashWrap {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  color: white;
  font-size: 50px;
  text-align: center;
  background-color: white;
  z-index: 90000;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
#splashWrap #splashLogo {
  position: relative;
  top: 0;
  left: 0;
  width: 80vw;
  height: 80vw;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  z-index: 91000;
  filter: url(#innerShadow);
}

#loadingDataWrap {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  color: #231815;
  font-size: 50px;
  text-align: center;
  background-color: black;
  z-index: 80000;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
#loadingDataWrap p {
  font-family: "OstentRounded-Heavy";
  font-size: 24px;
  color: white;
  animation: blink 0.1s ease-in-out infinite alternate;
}

@keyframes blink {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
p {
  margin: 0px;
}

#topMenuWrap {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 300px;
  height: 40px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  align-content: flex-start;
  z-index: 10000;
}
@media screen and (max-width: 768px) {
  #topMenuWrap {
    width: 180px;
  }
}
#topMenuWrap #menuButton {
  position: relative;
  top: 0px;
  left: 10px;
  width: -moz-fit-content;
  width: fit-content;
  height: -moz-fit-content;
  height: fit-content;
}
#topMenuWrap #menuButton p {
  position: relative;
  top: 0px;
  left: 0px;
  width: -moz-fit-content;
  width: fit-content;
  height: -moz-fit-content;
  height: fit-content;
  margin: 0px;
  font-size: 40px;
  font-family: "OstentRounded-Heavy";
  font-feature-settings: "palt";
  color: #ff9898;
  filter: url(#innerShadow);
}
@media (max-width: 768px) {
  #topMenuWrap #menuButton p {
    font-size: 24px;
  }
}
#topMenuWrap #menuButton p:hover {
  cursor: pointer;
  -webkit-text-stroke: 2px #231815;
  text-stroke: 2px #231815;
  -webkit-text-fill-color: #ff9898;
  text-fill-color: #ff9898;
}
@media screen and (max-width: 768px) {
  #topMenuWrap #menuButton p:hover {
    -webkit-text-stroke: 1.2px #231815;
    text-stroke: 1.2px #231815;
  }
}

#meshOnOffButtonWrap {
  position: absolute;
  bottom: 0vh;
  left: 0px;
  width: 300px;
  height: 50vh;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: flex-start;
  justify-content: flex-end;
  align-items: flex-start;
}
#meshOnOffButtonWrap #maskMeshButton {
  position: relative;
  top: 0px;
  left: 0px;
  width: 300px;
  height: -moz-fit-content;
  height: fit-content;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: flex-start;
  justify-content: flex-start;
  align-items: flex-start;
}
#meshOnOffButtonWrap #maskMeshButton p {
  position: relative;
  top: 0px;
  left: 10px;
  width: -moz-fit-content;
  width: fit-content;
  height: -moz-fit-content;
  height: fit-content;
  margin: 0px;
  font-size: 40px;
  font-family: "OstentRounded-Heavy";
  font-feature-settings: "palt";
  color: #22ab38;
  filter: url(#innerShadow);
}
@media (max-width: 768px) {
  #meshOnOffButtonWrap #maskMeshButton p {
    font-size: 24px;
  }
}
#meshOnOffButtonWrap #maskMeshButton p:hover {
  cursor: pointer;
  -webkit-text-stroke: 2px #231815;
  text-stroke: 2px #231815;
  -webkit-text-fill-color: #ff9898;
  text-fill-color: #ff9898;
}
@media screen and (max-width: 768px) {
  #meshOnOffButtonWrap #maskMeshButton p:hover {
    -webkit-text-stroke: 1.2px #231815;
    text-stroke: 1.2px #231815;
  }
}
#meshOnOffButtonWrap #maskMeshButton .active {
  -webkit-text-decoration: line-through wavy #22ab38;
          text-decoration: line-through wavy #22ab38;
}
#meshOnOffButtonWrap #partsMeshButton {
  position: relative;
  top: 0px;
  left: 0px;
  width: 300px;
  height: -moz-fit-content;
  height: fit-content;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: flex-start;
  justify-content: flex-start;
  align-items: flex-start;
}
#meshOnOffButtonWrap #partsMeshButton p {
  position: relative;
  top: 0px;
  left: 10px;
  width: -moz-fit-content;
  width: fit-content;
  height: -moz-fit-content;
  height: fit-content;
  margin: 0px;
  font-size: 40px;
  font-family: "OstentRounded-Heavy";
  font-feature-settings: "palt";
  color: #22ab38;
  filter: url(#innerShadow);
}
@media (max-width: 768px) {
  #meshOnOffButtonWrap #partsMeshButton p {
    font-size: 24px;
  }
}
#meshOnOffButtonWrap #partsMeshButton p:hover {
  cursor: pointer;
  -webkit-text-stroke: 2px #231815;
  text-stroke: 2px #231815;
  -webkit-text-fill-color: #ff9898;
  text-fill-color: #ff9898;
}
@media screen and (max-width: 768px) {
  #meshOnOffButtonWrap #partsMeshButton p:hover {
    -webkit-text-stroke: 1.2px #231815;
    text-stroke: 1.2px #231815;
  }
}
#meshOnOffButtonWrap #partsMeshButton .active {
  -webkit-text-decoration: line-through wavy #22ab38;
          text-decoration: line-through wavy #22ab38;
}

#menuWrap {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100vw;
  height: 100vh;
  display: none;
  background-color: #cccccc;
  z-index: 9000;
}
#menuWrap #articleListWrap {
  position: absolute;
  top: 120px;
  left: 300px;
  width: calc(100vw - 300px);
  height: 100vh;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: flex-start;
  justify-content: flex-start;
  align-items: flex-start;
  z-index: 11000;
}
@media (max-width: 768px) {
  #menuWrap #articleListWrap {
    left: 10px;
    width: 100vw;
  }
}
#menuWrap .articleTitle {
  position: relative;
  top: 0px;
  left: 0px;
  width: -moz-fit-content;
  width: fit-content;
  height: -moz-fit-content;
  height: fit-content;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: flex-start;
  justify-content: flex-start;
  align-items: flex-start;
}
#menuWrap .articleTitle p {
  position: relative;
  top: 0px;
  left: 0px;
  width: -moz-fit-content;
  width: fit-content;
  height: -moz-fit-content;
  height: fit-content;
  margin: 0px;
  font-size: 40px;
  font-family: "OstentRounded-Heavy";
  font-feature-settings: "palt";
  color: #22ab38;
  filter: url(#innerShadow);
}
#menuWrap .articleTitle p:hover {
  cursor: pointer;
  -webkit-text-stroke: 2px #231815;
  text-stroke: 2px #231815;
  -webkit-text-fill-color: #ff9898;
  text-fill-color: #ff9898;
}
@media screen and (max-width: 768px) {
  #menuWrap .articleTitle p:hover {
    -webkit-text-stroke: 1.2px #231815;
    text-stroke: 1.2px #231815;
  }
}
#menuWrap #peopleTextBody {
  position: absolute;
  top: 40px;
  left: 0px;
  width: 300px;
  height: 50vh;
  background-position: left top;
  background-repeat: no-repeat;
  background-size: contain;
  filter: url(#innerShadow);
}
@media (max-width: 768px) {
  #menuWrap #peopleTextBody {
    top: 24px;
    width: 180px;
  }
}

@keyframes blinkAlert {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
#alertPartOutOfVideo {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: flex-start;
  align-items: center;
  writing-mode: vertical-rl;
  font-size: 80px;
  font-family: "OstentRounded-Heavy", "heisei-maru-gothic-std";
  font-feature-settings: "palt";
  color: #22ab38;
  text-align: center;
  filter: url(#innerShadow);
  animation: blinkAlert 1s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 8000;
}
@media (max-width: 768px) {
  #alertPartOutOfVideo {
    font-size: 48px;
  }
}

#alertNoPeopleInVideo {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: flex-start;
  align-items: center;
  writing-mode: vertical-rl;
  font-size: 80px;
  font-family: "OstentRounded-Heavy", "heisei-maru-gothic-std";
  font-feature-settings: "palt";
  color: #22ab38;
  text-align: center;
  filter: url(#innerShadow);
  animation: blinkAlert 1s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 8000;
}
@media (max-width: 768px) {
  #alertNoPeopleInVideo {
    font-size: 48px;
  }
}

#webcamDeviceIdSelectWrap {
  position: fixed;
  top: 3px;
  left: 300px;
  width: calc(100vw - 300px);
  height: -moz-fit-content;
  height: fit-content;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: flex-start;
  justify-content: flex-start;
  align-items: flex-start;
  /* select要素の枠線を取り除く */
  z-index: 11000;
}
@media (max-width: 768px) {
  #webcamDeviceIdSelectWrap {
    left: 180px;
    width: calc(100vw - 180px);
  }
}
#webcamDeviceIdSelectWrap #webcamDeviceIdSelectButton {
  position: relative;
  top: 0px;
  right: 10px;
  width: calc(300px + 10vw);
  height: 48px;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: flex-start;
  justify-content: center;
  align-items: flex-start;
  white-space: nowrap;
  padding-left: 10px;
  margin-bottom: 10px;
  font-size: 40px;
  font-family: "OstentRounded-Heavy", "heisei-maru-gothic-std";
  font-feature-settings: "palt";
  color: #22ab38;
  filter: url(#innerShadow);
  cursor: pointer;
}
@media (max-width: 768px) {
  #webcamDeviceIdSelectWrap #webcamDeviceIdSelectButton {
    width: 180px;
    height: 28.8px;
  }
}
@media (max-width: 768px) {
  #webcamDeviceIdSelectWrap #webcamDeviceIdSelectButton {
    font-size: 24px;
  }
}
#webcamDeviceIdSelectWrap #webcamDeviceIdSelectButton:hover {
  -webkit-text-stroke: 2px #231815;
  text-stroke: 2px #231815;
  -webkit-text-fill-color: #ff9898;
  text-fill-color: #ff9898;
}
@media screen and (max-width: 768px) {
  #webcamDeviceIdSelectWrap #webcamDeviceIdSelectButton:hover {
    -webkit-text-stroke: 1.2px #231815;
    text-stroke: 1.2px #231815;
  }
}
#webcamDeviceIdSelectWrap #webcamDeviceIdSelect {
  position: absolute;
  opacity: 0;
  top: 0px;
  left: 10px;
  width: calc(300px + 10vw);
  height: 48px;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: flex-start;
  justify-content: center;
  align-items: center;
  padding-left: 10px;
  margin-bottom: 10px;
  font-size: 40px;
  font-family: "OstentRounded-Heavy", "heisei-maru-gothic-std";
  font-feature-settings: "palt";
  color: #22ab38;
  cursor: pointer;
}
@media (max-width: 768px) {
  #webcamDeviceIdSelectWrap #webcamDeviceIdSelect {
    width: 180px;
    height: 28.8px;
  }
}
@media (max-width: 768px) {
  #webcamDeviceIdSelectWrap #webcamDeviceIdSelect {
    font-size: 24px;
  }
}
#webcamDeviceIdSelectWrap select {
  /* 追加で枠線の影なども取り除く場合 */
  /* ブラウザが適用するデフォルトの外見を無効にする場合 */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 8px;
  text-align: left;
  -moz-text-align-last: right;
  text-align-last: left;
  direction: ltr;
  filter: url(#innerShadow);
}
@media (max-width: 768px) {
  #webcamDeviceIdSelectWrap select {
    border-radius: 4.8px;
  }
}
#webcamDeviceIdSelectWrap select:focus {
  outline: none;
}/*# sourceMappingURL=style.css.map */