body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: sans-serif;
  background: black;
}

header {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100px;
}

.logo {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 230px; /* 上から30px下げる */
}

.logo img {
  height: 100px; /* ロゴ画像の高さを調整 */
  width: auto;
}


main {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: orangered;
  font-family: "Dancing Script", sans-serif;
}

.title {
  font-size: 200px; /* 必要に応じて調整 */
  margin-bottom: 80px;
  font-weight: 900;
}

.buttons {
  display: flex;
  gap: 20px;
}

button {
  padding: 12px 32px;
  font-size: 1.1rem;
  border: none;
  border-radius: 6px;
  background: #0078d7;
  color: #fff;
  cursor: pointer;
  transition: background 0.2s;
}

button:hover {
  background: #005fa3;
  animation: shakeY 0.4s;
}
button.enter {
  background: orange;
  color: #fff;
  animation: blink-orange 1s infinite alternate;
}

@keyframes blink-orange {
  0%   { background: orange; }
  100% { background: orangered; }
}

@keyframes shakeY {
  0% { transform: translateY(0); }
  20% { transform: translateY(-4px); }
  40% { transform: translateY(4px); }
  60% { transform: translateY(-4px); }
  80% { transform: translateY(4px); }
  100% { transform: translateY(0); }
}
/* ...existing code... */
.bubble-container {
  position: fixed;
  top: 0; left: 0; width: 100vw; height: 100vh;
  pointer-events: none;
  z-index: 1;
}

.bubble {
  position: absolute;
  top: -80px;
  border-radius: 50%;
  opacity: 0.7;
  animation: bubble-fall 10s linear forwards;
  pointer-events: none;
  box-shadow: 0 0 16px #fff8;
}

@keyframes bubble-fall {
  0% {
    transform: translateY(0) scale(1, 1);
    opacity: 0.7;
  }
  20% {
    transform: translateY(20vh) scale(1.15, 0.85);
  }
  40% {
    transform: translateY(40vh) scale(0.9, 1.2);
  }
  60% {
    transform: translateY(60vh) scale(1.2, 0.9);
  }
  80% {
    transform: translateY(80vh) scale(0.95, 1.1);
    opacity: 0.7;
  }
  100% {
    transform: translateY(100vh) scale(1.1, 1);
    opacity: 0;
  }

}
.logo-bottom {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
}

footer {
  text-align: center;
  padding: 16px 0;
  font-size: 0.95rem;
  color: #888;
   font-family: "Dancing Script", sans-serif;
}
@media (max-width: 600px) {
  .logo img {
    height: 140px;
    transform: translateY(-30px); /* 上に30px移動 */
  }

  .title {
    font-size: 64px; /* 一行で収まるように調整 */
    text-align: center;
    margin: 40px 20px; /* 上下に余白、左右に少し余裕 */
    line-height: 1.2;
  }

  .buttons {
    flex-direction: column; /* 縦並びに変更 */
    gap: 16px;
    width: 100%;
    align-items: center;
  }

  button {
    font-size: 1.3rem;
    padding: 16px 40px;
    width: 100%; /* 横幅を広げてタップしやすく */
  }
}