header{
    background-image: url(ki.jpg);
  }
  body{
    background-image:url(ki.jpg);
      background-size: contain;
      background-repeat: repeat;

      
    }
p{
  font-size: 60px;
  margin-left:30% ;
}
.ui{
  margin-top: 3%;
  margin-left: 25%;
  width: 50%;
  height: 40%;
  font-size: 60px;
  background-color: rgba(104, 100, 84, 0.192);
  border-color: black;
 
}
.ei{

  font-size: 30px;
  width: 20%;
  background-color: rgba(82, 57, 51, 0.425);
}
button{
  margin-top: 5%;
  width: 20%;
  background-color: rgba(82, 57, 51, 0.425);
  border-color: black;
  overflow:visible;
}
.hage{
   font-size: 30px;
   
}
.e{

  font-size: 30px;
  width: 20%;
  background-color: rgba(82, 57, 51, 0.425);
}
.i{
  color: black;
  font-size: 30px;
  width: 20%;
  background-color: rgba(82, 57, 51, 0.425); 
}
.uni{

  display: flex;
  justify-content: center; /* 中央寄せ */
}
a{
  color:black;
}








/* ボタンにカーソルを当てたとき、ボタンを半透明にする */
button:hover {
 opacity: 0.7;
}

/* ポップアップメッセージを隠す */
.hidden {
  display: none;
}

/* ポップアップメッセージを画面右下に配置 */
#btn4-text {
  height: 72px;
  padding: 8px 16px;
  border-radius: 8px;
  background: #ddd;
  font-weight: bold;
  text-align: center;
  line-height: 72px;
  position: fixed;
  bottom: 5%;
}

/* ポップアップアニメーションを3秒かけて実行 */
.popup-message {
  animation: popup 5s forwards;
}

@keyframes popup {
  0% {
    transform: translateY(15%);
    opacity: 0;
  }
  10%, 90% {
    transform: none;
    opacity: 1;
  }
  100% {
    transform: translateY(15%);
    opacity: 0;
    pointer-events: none;
  }
}
#btn2-text {
  height: 72px;
  padding: 8px 16px;
  border-radius: 8px;
  background: #ddd;
  font-weight: bold;
  text-align: center;
  line-height: 72px;
  position: fixed;
  bottom: 5%;
}
/* ポップアップアニメーションを3秒かけて実行 */
.popup-msg {
  animation: popup 0.5s forwards;
}

@keyframes popup {
  0% {
    transform: translateY(15%);
    opacity: 0;
  }
  10%, 90% {
    transform: none;
    opacity: 1;
  }
  100% {
    transform: translateY(15%);
    opacity: 0;
    pointer-events: none;
  }
}