body {
  /** ダブルクリック抑止 */
  touch-action: manipulation;
}

button, a {
  /** ボタンの背景消し */
  -webkit-tap-highlight-color: transparent;
  outline: none;
}

img {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

#blackCanvas {
  position: fixed;
  inset: 0;
  z-index: 1;
  background: #000;
}

#cesiumContainer {
  position: fixed;
  inset: 0;
  z-index: 0;
}

.fadeCanvas {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  z-index: 10004;
  opacity: 0;
  transition: opacity 1s ease;
  pointer-events: none;
}

.fadeCanvas.black {
  background: black;
}

.fadeCanvas.visible {
  opacity: 1;
}

.fadeCanvas.quick {
  transition: opacity 0.5s ease;
}

/*
 * 動画オーバーレイ
 */
.videoOverlay {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  display: flex;
}

.videoOverlay.forward {
  z-index: 10000;
}


#video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: black;
}

.loadingVideoOverlay {
  position: fixed;
  inset: 0;
  z-index: 10003;
  pointer-events: none;
  display: flex;
}

.loadingVideoOverlay.forward {
  z-index: 10000;
}


#loadingVideo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: black;
}

.alphaVideoOverlay {
  position: fixed;
  inset: 0;
  z-index: 10002;
  pointer-events: none;
  display: flex;
  mix-blend-mode: screen;
}

.warpVideoOverlay {
  position: fixed;
  inset: 0;
  z-index: 10010;
  pointer-events: none;
  display: flex;
  mix-blend-mode: screen;
}

#alphaVideo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: transparent;
}

#warpVideo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: transparent;
}

/*
 * 縦向き・横向き制御
 */
/* 警告メッセージ（共通定義：デフォルト非表示） */
.orientation-warning {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.9);
  color: #fff;
  font-size: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  z-index: 10006;
}

.orientation-warningImg {
  position: fixed;
  height: 70%;
  width: auto;
  object-fit: cover;
  object-position: center;
  z-index: 10000;
  left: 50%;
  transform: translateX(-50%);
  top: 50%;
  transform: translate(-50%, -50%);
  display: block;
}

/* 横向き */
@media (orientation: landscape) {
  .orientation-warning {
    display: flex;
  }
}

/* 縦向き */
@media (orientation: portrait) {
  .orientation-warning {
    display: none;
  }
}

/** TOP画面コンテナ */
.topContainer {
  position: fixed;
  display: flex;
  flex-direction: column;
  height: 100dvh;
  width: 100%;
  background-color: rgba(0, 0, 0, 0);
  z-index: 10000;
}

/* ヘッダー */
.topHeader {
  margin-top: 7vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.topConnectImg {
  height: 2.4vh;
  width: auto;
}

.teamlabIconImg {
  height: 31vh;
  width: auto;
}

.topStartButton {
  height: 16vh;
  width: auto;

  cursor: pointer;
  z-index: 20000;
  background: none;
  border: none;
}

.startButtonImg {
  height: 100%;
  display: block;
}

.topHowToButton {
  margin-top: 2vh;
  height: 2vh;
  width: auto;

  cursor: pointer;
  z-index: 10001;
  background: none;
  border: none;
}

.howToButtonImg {
  margin-top: 2vh;
  height: 100%;
  display: block;
}

.topSiteButton {
  margin-top: 7vh;
  height: 8vh;
  width: auto;

  cursor: pointer;
  z-index: 10001;
  background: none;
  border: none;
}

.siteButtonImg {
  height: 100%;
  display: block;
}

.topPresentedImg {
  margin-top: 2vh;
  height: 2vh;
  width: auto;
}

/** 音声確認ポップアップ */
.soundContainer {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0);
  z-index: 10000;

  display: flex;
  justify-content: center;
  align-items: flex-start;
  overflow-y: auto;
  padding: 135px;
}

.soundContent {
  background-color: #fff;
  padding: 10px 5px 100px;
  border-radius: 12px;
  width: 80vh;
  box-shadow: 0 8px 30px rgba(0, 0, 0, .25);
  line-height: 1.6;
  color: #222;
  position: relative;
  max-height: 50dvh;
  overflow-y: auto;
}

.soundInfoImage {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
}

.soundButtons {
  margin-top: -200px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 80px;
}

.soundButton {
  width: 160px;
  height: 160px;

  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0;
}

.soundButton img {
  width: 100%;
  height: auto;
}

/** 遊び方ポップアップ */
.popUpContainer {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0);
  z-index: 10000;

  display: flex;
  justify-content: center;
  align-items: flex-start;
  overflow-y: auto;
  padding: 135px;
}

.popupContent {
  background-color: #fff;
  padding: 10px 5px 100px;
  border-radius: 12px;
  width: 80vh;
  box-shadow: 0 8px 30px rgba(0, 0, 0, .25);
  line-height: 1.6;
  color: #222;
  position: relative;
  max-height: 50dvh;
  overflow-y: auto;
}

.popupCloseButtons {
  margin-top: -200px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 48px;
}

.popupCloseButton {
  width: 160px;
  height: 160px;

  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0;
}

/** How To ポップアップ画面 */
.howToContainer {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background-color: rgba(0, 0, 0, 0);
  width: 100vw;
  height: 100dvh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.howToContent {
  position: relative;
  background-color: #fff;
  color: #222;
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, .25);

  width: min(80%, 960px);
  max-width: 94vw;

  /* 高さを 80% に制限して上下に 10% の余白 */
  max-height: 80dvh;
  margin: 10dvh 0;

  overflow: auto;
  -webkit-overflow-scrolling: touch;

  padding: 60px 20px 20px;
  line-height: 1.6;
}

.infoImage {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
}

.closeButtonImg {
  width: 100%;
  display: block;
}

.howToImage {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
}

.howToCloseButton {
  position: sticky;
  top: 6px;
  float: right;

  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;

  border: none;
  background: transparent;
  cursor: pointer;
  z-index: 1;
  margin-right: 16px;
}

/** ローディング画面 */
.loadingContainer {
  position: fixed;
  display: flex;
  flex-direction: column;
  height: 100dvh;
  width: 100%;
  z-index: 10004;
  flex-direction: column;
  align-items: center;
}

.loadingBox {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.loadingTopBox {
  margin-top: 15vh;
  display: flex;
  width: 100%;
  flex-direction: row;
  gap: 20px;
  justify-content: center;
  align-items: center;
}

.loadingPin {
  height: 140px;
  width: auto;
}

.loadingLineAnim {
  width: 40%;
  height: 10px;
  width: 16vh;
}

.loadingLogo {
  height: 200px;
  width: auto;
}

.loadingInfo {
  margin-top: 8vh;
  height: auto;
  width: 25%;
}

.loadingText1 {
  position: absolute;
  top: 55%;
  left: 50%;
  transform: translate(-50%, -50%);

  height: auto;
  width: 90%;
  opacity: 0;
  transition: opacity 1s ease;
}

.loadingText1.Arround {
  top: 46%;
}

.loadingText2 {
  position: absolute;
  top: 55%;
  left: 50%;
  transform: translate(-50%, -50%);

  height: auto;
  width: 90%;
  opacity: 0;
  transition: opacity 1s ease;
}

.loadingText3 {
  position: absolute;
  top: 62%;
  left: 50%;
  transform: translate(-50%, -50%);

  height: auto;
  width: 80%;
  opacity: 0;
  transition: opacity 1s ease;
}

.loadingText4 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  height: auto;
  width: 90%;
  opacity: 0;
  transition: opacity 1s ease;
}

.loadingText5 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  height: auto;
  width: 90%;
  opacity: 0;
  transition: opacity 1s ease;
}

.loadingImage {
  position: absolute;
  bottom: 15vh;
  left: 50%;
  transform: translate(-50%, -50%);

  height: auto;
  width: 25%;
}

.loadingVisible {
  opacity: 1;
}

.loadingBottomBox {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 15dvh;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.loadingPageNo {
  height: 90px;
  width: auto;
}

.loadingBottomButtonsBox {
  display: flex;
  width: 100%;
  flex-direction: row;
  gap: 10px;
  justify-content: center;
  align-items: center;
}

.loadingButton {
  width: clamp(140px, 140vw, 180px);
  height: clamp(60px, 60vw, 76px);
  display: flex;
  align-items: center;
  justify-content: center;

  user-select: none;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  z-index: 10002;
  grid-area: 1 / 1;
}

.loadingButtonHidden {
  visibility: hidden;
}

/** 飛行開始画面 */
.flyContainer {
  position: fixed;
  display: flex;
  flex-direction: column;
  height: 100dvh;
  width: 100%;
  z-index: 10004;
  align-items: center;
}

.flyText {
  margin-top: 10vh;
  height: auto;
  width: 70%;
}

.flyConnectContainer {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 10vh;
}

.flyButton {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  position: relative;
  width: 50%;
}

.flyButton .flyImg {
  width: 100%;
  height: auto;
  display: block;
}

.flyButton .buttonTap {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 75%;
  z-index: 1;
}


/** プレイ画面 */
.playContainer {
  position: fixed;
  inset: 0;
  display: block;
  z-index: 10000;
}

.playContainer.black {
  background: black;
}

/* バイオヴォルテックス */
.biovortex {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: center;
  z-index: 9999;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

.biovortex.animate {
  animation: scaleUp 8s ease forwards;
}

@keyframes scaleUp {
  from {
    transform: translate(-50%, -50%) scale(1);
  }

  to {
    transform: translate(-50%, -50%) scale(1.2);
  }
}

/* 中央FIND LINEボックス：画面ど真ん中に固定 */
.playCenterBox {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.playText {
  position: absolute;
  top: 200px;
  left: 50%;
  transform: translateX(-50%);
  width: 70%;
}

.warpText {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 70%;
  z-index: 10006;
  pointer-events: none;
}

.findlineContainer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.findlineContainer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.findlineContainer .top {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 64px;
}

.phoneImg {
  width: 128px;
  height: auto;
}

.phoneImg.start {
  animation-name: swing;
  animation-duration: 2.5s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

.phoneImg.Big {
  width: 192px;
  height: auto;
}

@keyframes swing {
  0% {
    transform: translateX(-20px);
  }

  50% {
    transform: translateX(20px);/
  }

  100% {
    transform: translateX(-20px);
  }
}

.findlineContainer .bottom {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
}

.findlineImg {
  width: clamp(160px, 240vw, 280px);
  height: auto;
  display: block;
  user-select: none;
}

.connectContainer {
  display: grid;
  place-items: center;
}

.connectContainer .ringBox {
  position: relative;
  grid-area: 1 / 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.connectContainer .buttonTap {
  position: absolute;
  bottom: 100%;
  margin-bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: auto;
  z-index: 10003;
}

.connectContainer .playConnectRingImg {
  width: clamp(320px, 480vw, 540px);
  height: auto;
  z-index: 10001;
  display: block;
  animation: ringRotate 2s linear infinite;
}

.playConnectImg {
  width: clamp(160px, 160vw, 360px);
  height: auto;
  z-index: 10002;
  display: block;
  grid-area: 1 / 1;
}

@keyframes ringRotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.connectContainer .connectButton {
  width: clamp(200px, 200vw, 400px);
  height: clamp(200px, 200vw, 400px);
  display: flex;
  align-items: center;
  justify-content: center;

  user-select: none;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  z-index: 10002;
  grid-area: 1 / 1;
}

.connectContainer .playConectedImg {
  width: clamp(160px, 160vw, 360px);
  height: auto;
  display: block;
}

/* 三角形 */
.triangle {
  width: 0;
  height: 0;
  border-top: 36px solid transparent;
  border-bottom: 36px solid transparent;
  opacity: 0.9;
}

.triangle.left {
  border-right: 48px solid #fff;
  position: relative;
}

.triangle.start.left {
  animation: slideLeftBlink 1s ease-in-out infinite;
}

.triangle.right {
  border-left: 48px solid #fff;
  position: relative;
}

.triangle.start.right {
  animation: slideRightBlink 1s ease-in-out infinite;
}

.triangle.active.left {
  border-right-color: #FFFF17;
}

.triangle.active.right {
  border-left-color: #FFFF17;
}

@keyframes slideLeftBlink {
  from {
    opacity: 0;
    left: -8px;
  }

  to {
    opacity: 1;
    left: -25px;
  }
}

@keyframes slideRightBlink {
  from {
    opacity: 0;
    left: 8px;
  }

  to {
    opacity: 1;
    left: 25px;
  }
}

.playCenterBox .triangle.hidden.left {
  display: none;
}

.playCenterBox .triangle.hidden.right {
  display: none;
}

/** 距離コンテナ */
.playDistanceBox {
  position: fixed;
  left: 0;
  right: 0;
  width: 100%;
  bottom: calc(120px + env(safe-area-inset-bottom, 0px));
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: system-ui, sans-serif;
  color: #fff;
  text-align: center;
  z-index: 10000;

  box-sizing: border-box;
}

.playDistanceBox .distanceLabelImg {
  width: 100%;
  height: auto;
  display: block;
  user-select: none;
}

.playDistanceBox .distanceOverlay {
  position: absolute;
  top: 64%;
  right: 0;
  left: 0;
  transform: translateY(-50%);
  display: flex;
  justify-content: flex-end;
  padding-right: 10%;
}

/* 数値と単位 */
.playDistanceBox .distanceValue {
  src: url('/font/NotoSansJP-VariableFont_wght.ttf') format('truetype-variations');
  font-style: normal;
  font-display: swap;
  font-size: clamp(48px, 64px, 64px);
  font-weight: 800;
  line-height: 1;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 0 6px rgba(0, 0, 0, .35);
}

.endConnect {
  position: absolute;
  top: 0%;
  right: 10%;
  z-index: 10001;
  display: flex;
  justify-content: flex-end; 
}

@keyframes growAnimation {
  from {
    transform: scale(1);
    color: white;
  }

  to {
    transform: scale(1.3);
    color: yellow;
  }
}


/* アニメーションを適用するクラス */
.highlight {
  animation: growAnimation 1s forwards;
}

/** チームラボロゴコンテナ */
.logoContainer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 1);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10003;
}

.biovortexOpeningLogo {
  width: 70%;
  height: auto;
  max-width: 100%; 
  display: block; 
}

/** 終了画面コンテナ */
.endContainer {
  position: fixed;
  display: flex;
  flex-direction: column;
  height: 100dvh;
  width: 100%;
  
  background-color: #000;
  background-image: url('UI/Last_Back.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  
  z-index: 10000;
}

.endSiteButton {
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translateX(-50%);

  width: 80%;
  height: auto;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: block;
  z-index: 10001;
}

.endSiteButton.center {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.endSiteButtonImg {
  width: 100%;
  height: auto;
  display: block;
}

.playAgeinBox {
  position: absolute;
  bottom: 100px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.playAgainText {
  position: static;
  transform: none;
  margin-bottom: 100px;
  width: 80%;
  height: auto;
  z-index: 10001;
}

.endRestartButton {
  position: static;
  transform: none;
  width: 40%;
  height: auto;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: block;
  z-index: 10001;
}

.endRestartImg {
  width: 100%;
  display: block;
}

/** ミュートボタン */
.topMuteButton {
  position: fixed;
  top: calc(60px + env(safe-area-inset-top));
  right: calc(30px + env(safe-area-inset-right));
  z-index: 20001;
  width: 80px;
  height: 80px;
  padding: 0;

  background-color: transparent;
  background-image: none;
  border: none;
  outline: none;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;

  cursor: pointer;
  border-radius: 50%;
}

.topMuteButtonImg {
  width: 100%;
  height: 100%;
}

.fullScreen {
  position: absolute;
  flex-direction: column;
  height: 100dvh;
  width: 100%;
}

.hidden {
  display: none;
}

.blinkAnim {
  animation: blink-animation 2s ease-in-out infinite;
}

@keyframes blink-animation {
  0% {
    opacity: 1;
    /* アニメーション開始時：完全に見える */
  }

  50% {
    opacity: 0;
    /* アニメーションの中間：完全に見えなくなる */
  }

  100% {
    opacity: 1;
    /* アニメーション終了時：完全に見える状態に戻る */
  }
}
.errorContainer {
  position: fixed;
  inset: 0;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  z-index: 30000;

  src: url('/font/NotoSansJP-VariableFont_wght.ttf') format('truetype-variations');
  font-style: normal;
  font-size: 24px;
}

.errorContainer.hidden {
  display: none;
}

.errorPanel {
  background: black;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 5vh 5vw;
  box-sizing: border-box;
  text-align: center;
}

.errorPanel h2 {
  font-size: clamp(2.5em, 8vw, 5em);
  margin-bottom: 0.8em;
  line-height: 1.2;
}

.errorPanel p {
  font-size: clamp(1.2em, 3.5vw, 2em);
  margin-bottom: 2em;
  line-height: 1.5;
}

.errorPanel ul {
  text-align: left;
  display: inline-block;
  list-style-type: disc;
  margin-bottom: 2em;
  padding-left: 1.5em;
}

.errorPanel ul li {
  font-size: clamp(1.2em, 3.5vw, 2em);
  margin-bottom: 0.8em;
  line-height: 1.5;
}

.errorPanel button {
  background: white;
  color: black;
  border: 1px solid black;
  padding: 1.2em 2.5em;
  font-size: clamp(1.2em, 3vw, 1.8em);
  cursor: pointer;
  border-radius: 8px;
  transition: background-color 0.3s ease;
}

.errorPanel button:hover {
  background-color: #777;
}