/* ローディング画面 */
#loading {
  width: 100vw;
  height: 100vh;
  transition: all 1s;
  background-color: rgb(29,29,31);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
}

/* プログレスバーのコンテナ要素 */
.bar-container {
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    
    width: 80%;
    max-width: 900px;

    /* 👇 Flexboxを追加して子要素を縦に並べる */
    display: flex;
    flex-direction: column; /* 子要素を縦方向に並べる */
    align-items: center;    /* 子要素を水平方向に中央揃え */
    /* 👆 */
}

/* ⚠️ 新しく追加する画像のスタイル ⚠️ */
.loading-image {
  width: 40%;
  height: auto;
  margin-bottom: 30px; /* 画像とプログレスバーの間に余白 */
}

/* プログレスバーのラッパー要素 */
.bar-wrapper {
    padding: 0px; 
    border: 2px solid #00face;
    box-sizing: border-box; 
    width: 100%; /* 親要素の幅いっぱいに広げる */
    height: 24px;
}
/* 💡 bar-wrapper内のSVG要素（バー本体）にスタイルを適用 */
.bar-wrapper svg {
    /* SVGをブロック要素として扱い、インライン要素特有の余白を解消 */
    display: block;

}

/* プログレスバーのテキストコンテナのデフォルトスタイル */
.bar-wrapper .progressbar-text {
    top: 105%;
}

.loaded {
  opacity: 0;
  visibility: hidden;
}