body { padding: 0; margin: 0 }
#unity-container { position: absolute }
#unity-container.unity-desktop { left: 50%; top: 50%; transform: translate(-50%, -50%) }
#unity-container.unity-mobile { width: 100%; height: 100% }
#unity-canvas { background: #231F20 }
.unity-mobile #unity-canvas { width: 100%; height: 100% }
/*
#unity-loading-bar { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: none }
#unity-logo { width: 154px; height: 130px; background: url('unity-logo-dark.png') no-repeat center }
#unity-progress-bar-empty { width: 141px; height: 18px; margin-top: 10px; margin-left: 6.5px; background: url('progress-bar-empty-dark.png') no-repeat center }
#unity-progress-bar-full { width: 0%; height: 18px; margin-top: 10px; background: url('progress-bar-full-dark.png') no-repeat center }
*/
#unity-footer { position: relative }
.unity-mobile #unity-footer { display: none }
#unity-webgl-logo { float:left; width: 204px; height: 38px; background: url('webgl-logo.png') no-repeat center; background-size: contain; display: none}
#unity-build-title { float: right; margin-right: 10px; line-height: 38px; font-family: arial; font-size: 18px }
#unity-fullscreen-button { float: right; width: 48px; height: 48px; background: url('fullscreen-button.png') no-repeat center }
#unity-warning { position: absolute; left: 50%; top: 5%; transform: translate(-50%); background: white; padding: 10px; display: none }

/* --- ローディングバー全体のコンテナ --- */
#unity-loading-bar {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: auto;
}

/* ロゴのズレ防止 */
#unity-logo {
  width: 154px; height: 130px; background: url('unity-logo-dark.png') no-repeat center
/*  margin: 0 auto 15px auto !important; */
/*  background-position: center !important;*/
}

/* --- ゲージの外枠（背景） --- */
#unity-progress-bar-empty {
  width: 300px;
  height: 24px; /* 少し太くして見やすくします */
  margin: 0 !important;
  background: #333 !important; /* 画像のような濃いグレーに */
  border-radius: 12px;
  overflow: hidden; /* 中のバーを角丸に収める */
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.5); /* 奥行き感 */
}

/* --- 実際に伸びる青色ゲージ --- */
#unity-progress-bar-full {
  width: 0%; /* ここがJavaScriptで更新されます */
  height: 100% !important; /* 高さを親（24px）いっぱいに */
  margin: 0 !important;     /* ★重要：下半分のズレを解消 */
  padding: 0 !important;
  
  /* 青と水色の斜線ストライプ */
  background-image: repeating-linear-gradient(
    45deg,
    #3498db,
    #3498db 10px,
    #5dade2 10px,
    #5dade2 20px
  ) !important;
  
  background-size: 28px 28px;
  animation: stripe-flow 1s linear infinite;
  border-radius: 12px 0 0 12px; /* 左側だけ丸く（伸びる際に自然に） */
  transition: width 0.2s ease-out; /* ゲージの伸びを滑らかに */
}

/* アニメーション：ストライプを流す */
@keyframes stripe-flow {
  0% { background-position: 0 0; }
  100% { background-position: 28px 0; }
}

/* ボタンを囲むコンテナ */
#terms-container {
  position: absolute;
  pointer-events: auto;
  display: flex;       /* 横並びにする */
  gap: 15px;           /* ボタン同士の間隔 */
  justify-content: center;
  align-items: center;
  white-space: nowrap; /* 折り返し防止 */
}

/* 3つのボタン共通のスタイル */
#terms-container .footer-btn {
  padding: 8px 16px;
  font-size: 14px;
  cursor: pointer;
  background-color: rgba(255, 255, 255, 0.1); /* 半透明の背景 */
  color: white;                                /* 文字色 */
  border: 1px solid rgba(255, 255, 255, 0.5);  /* 薄い枠線 */
  border-radius: 4px;                          /* 少し角を丸く */
  transition: all 0.2s ease;                   /* ホバー時の動きを滑らかに */
}

/* ボタンにマウスを乗せた時の演出 */
#terms-container .footer-btn:hover {
  background-color: rgba(255, 255, 255, 0.3);
  border-color: white;
}

#webgl-logo-bottom {
  position: absolute;   /* 絶対配置 */
  left: 0;              /* JSで計算するので初期値は0 */
  top: 0;               /* JSで計算するので初期値は0 */
  transform: none !important; /* 真ん中寄せ(translate)を完全に無効化 */
  pointer-events: auto;
  z-index: 5;
}