@charset "utf-8";
/* CSS Document */

/* フェードインのアニメーション定義 */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

#overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: rgba(0, 0, 0, 0.4) !important; /* 少し暗めにして確認しやすく */
  display: flex !important;
  opacity: 1;
  justify-content: center !important;
  align-items: center !important;
  /*/z-index: 99999 !important;*/ /* 他の要素より絶対上に */
  z-index: 9000 !important;
  
  animation: fadeIn 0.5s ease-out forwards !important;
  transition: opacity 0.5s ease !important;
  
}

/* ポップアップが下からふわっと浮き上がる演出（お好みで） */
@keyframes slideUp {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}


/* フェードイン（出現） */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* フェードアウト（消滅） */
@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

/* クラスでアニメーションを切り替える */
.fade-in {
  animation: fadeIn 0.5s ease forwards !important;
}

.fade-out {
  animation: fadeOut 0.5s ease forwards !important;
}

/* ポップアップ本体 */
#popup {
  background: #fff !important;
  padding: 40px !important;
  border-radius: 20px !important; /* 角を大きく丸める */
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2) !important; /* 影で立体感を出す */
  text-align: center !important;
  position: relative !important;
  border: none !important;
  
  animation: slideUp 0.6s ease-out forwards !important;
}


#popup p {
  text-align: left !important;   /* 文章は左揃え */
  display: inline-block !important; /* 中身の長さに合わせる、または width を指定 */
  max-width: 100% !important;
  margin: 20px auto !important;  /* 上下に余白、左右は中央寄せ */
  line-height: 1.6 !important;   /* 行間を広げて読みやすく */
  color: #444 !important;
}



/* 閉じるボタン */
#close-btn {
  background:  #6091d3 !important; /* シックな黒系 */
  color: #fff !important;
  border: none !important;
  padding: 10px 25px !important;
  border-radius: 50px !important; /* カプセル型の丸いボタン */
  font-size: 14px !important;
  cursor: pointer !important;
  transition: 0.3s !important; /* 変化を滑らかに */
  margin-top: 20px !important;
}

/* ボタンにマウスを乗せた時 */
#close-btn:hover {
  background: #99ccff !important; /* 少し明るくする */
  transform: scale(1.05) !important; /* わずかに大きく */
}



.infobox2026 {
    padding: 2em 1em !important; /* 上下の余白を少し広めに */
    margin: 2em 0;
    font-size:large;
    font-weight: bold;
    color: #6091d3;
    background: #FFF;
    border: solid 3px #6091d3;
    border-radius: 10px;
    
    /* 追加：中身の inline-block 要素を中央に寄せる */
    text-align: center !important; 
}

.infobox2026 p {
    padding: 0;
    text-align: left !important;    /* 文章自体は左揃え */
    display: inline-block !important; /* 内容の幅に合わせる */
    max-width: 90% !important;      /* 左右に少し余裕を持たせる */
    margin: 20px auto !important;   /* 上下に余白、左右中央 */
    line-height: 1.6 !important;
}