@charset "utf-8";

.bubble-background {
    position: relative;
    background-color: #f4b117;
    height: 100%;
    width: 100%;
    overflow: hidden;
  }

  /* 泡の見た目 */
.bubble {
    position: absolute;
    bottom: -50px;
    background-color: transparent;
    border-radius: 50%;
    pointer-events: none;
    box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.359);
    animation: bubble 5s linear infinite;
  }
  
  /* 泡の一番明るい部分を疑似要素で表現 */
  .bubble::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    transform: scale(0.25) translate(-70%, -70%);
    background: radial-gradient(rgba(255,255,255, 0.5), transparent);
    border-radius: 50%;
  }
  
  /* 泡が上に浮かび上がっていくアニメーション */
  @keyframes bubble {
    0% {
      transform: translatY(0);
      opacity: 1;
    }
    99% {
      opacity: 1;
    }
    100% {
      transform: translateY(-500vh);
      opacity: 0;
    }
  }