footer {
  position: fixed !important;
  bottom: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 620px !important;
  height: 50px !important;
  background-color: gray !important;
  color: white !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 16px !important;
}

#randomNumber {
  color: red;
  font-weight: bold;
}

.reading-text {
  font-size: 70%;
  font-weight: bold;
}


@keyframes twiceMoveUpPopup {
  0%, 100% { transform: scale(1) translateY(0); }
  25% { transform: scale(1.5) translateY(-10px); }
  50% { transform: scale(1) translateY(0); }
  75% { transform: scale(1.5) translateY(-10px); }
}

.twiceMoveUpPopup {
  animation: twiceMoveUpPopup 1s ease-out;
}



 #image-container {
    position: relative;
    display: inline-block;
    width: 100%; /* Responsive width */
    height: auto; /* Maintain aspect ratio */
    max-width: 570px; /* Original image width */
    max-height: 210px; /* Original image height */
  }
  #background-box {
    position: absolute;
    top: 2%; /* Adjusted to be relative to the image size */
    left: 9%; /* Adjusted based on image width */
    width: 20%; /* Percentage of image width */
    height: 25%; /* Percentage of image height */
    background-color: black; /* Background color always black */
  }
  #random-number {
    position: absolute;
    top: 2%;  /* Relative to the top of the image */
    left: 9%; /* Relative to the left side of the image */
    font-size: 6vw;  /* Responsive font size based on viewport width */
    color: white;  /* Font color to white */
    font-weight: bold;
    line-height: 25%; /* Adjusted to match background box height */
    text-align: center; /* Center the text horizontally */
    width: 20%; /* Matches background box width */
  }


#imageContainer {
    position: fixed;
    bottom: 50px; /* フッターの高さからの距離 */
    left: 50%; /* 中央揃えの基点 */
    transform: translateX(-50%); /* 実際の中央揃え */
    display: none; /* 初期状態では非表示 */
    z-index: 10; /* 他の要素より前面に表示 */
    width: 525px; /* 実際の画像の最大幅 */
    max-width: 100%; /* ビューポートを超えないように */
}

#imageContainer img {
    width: 100%; /* コンテナに合わせる */
    height: auto; /* 高さは自動で調整 */
    max-height: 235px; /* 最大高さを指定 */
}


@media (max-width: 525px) {
    #imageContainer {
        width: 100%; /* スマホの幅に合わせて100%に設定 */
        bottom: 50px; /* フッターの高さを保持 */
        left: 50%;
        transform: translateX(-50%);
    }

    #imageContainer img {
        max-width: 525px; /* 画像の物理的な最大幅 */
        max-height: 235px; /* 画像の最大高さ */
    }
}