/* 全体背景を黒に */
body {
  margin: 0;
  background-color: black;
  color: white;
  font-family: 'Arial', sans-serif;
  overflow: hidden;
}

/* メインコンテナ */
.title-container {
  position: relative;
  width: 1080px;
  height: 720px;
  margin: 0 auto;
  background-color: black;
}

/* タイトル画像 */
.title-image {
  width: 100%;
  height: 100%;
  object-fit: cover;  /* or 'contain' */
  display: block;
}
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: white; /* 白背景 */
  color: black;            /* 黒文字にする！ */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  font-size: 24px;
  text-align: center;
  padding: 20px;
}

.question-box {
  text-align: center;
  font-family: 'Arial', sans-serif;
}

.question {
  font-size: 2rem;
  margin-bottom: 1rem;
}

.sub-question {
  font-size: 1.2rem;
  margin-bottom: 2rem;
}

.answer-button {
  font-size: 1rem;
  padding: 0.5rem 1rem;
  margin: 0 1rem;
  cursor: pointer;
}


/* タイトル文字（フェードイン） */
.title-text {
  position: absolute;
  top: 100px; /* 上部に配置 */
  left: 50%;
  transform: translateX(-50%);
  font-size: 64px;
  opacity: 0;
  animation: fadeIn 2s ease-in-out forwards;
}


.footer {
  height: 60px;
  color: white;
  font-size: 24px;
  text-align: center;
  line-height: 60px;
  font-family: sans-serif;
}

.logo-area {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.logo {
  position: absolute;
  opacity: 0;
}

/* 個別の位置調整 */
.logo1 {
  left: 1%;
  top: 35%;
}
.logo2 {
  left: 17%;
  top: 12%;
}
.logo3 {
  left: 70%;
  top: 13%;
}
.logo4 {
  left: 80%;
  top: 38%;
}
.logo5 {
  left: 75%;
  top: 72%;
}

.hidden {
  display: none;
}

.animate-drop {
  animation: dropRotateFade 4.5s forwards;
}

@keyframes dropRotateFade {
  0% {
    transform: translateY(-150px) rotateY(0deg);
    opacity: 0;
  }
  100% {
    transform: translateY(0px) rotateY(360deg);
    opacity: 1;
  }
}

.fade-in {
  animation: fadeOnly 6s forwards;
}

@keyframes fadeOnly {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}