/* 全体のベース設定（イベントについて等のBOXと完全に同じ色使いに修正） */
body {
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", sans-serif;
  line-height: 1.8;
  color: #f1f5f9;
  /* 💡 イベントについて等のBOX（section）のベース色と完全に統一 */
  background-color: #0e1b35;
  margin: 0;
  padding: 0;
}

/* 🌟 画面最上部に固定されるバー 🌟 */
.fixed-nav-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  background: rgba(6, 11, 25, 0.9); /* 💡 背景の透明度を下げてくっきりと */
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.25); /* 💡 線をより明るく */
  z-index: 9999;
  display: flex;
  align-items: center;
}

.nav-container {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* 左側のロゴ部分 */
.nav-logo {
  font-size: 0.95rem;
  font-weight: bold;
  color: #ffffff;
  text-shadow: 0 0 12px rgba(0, 242, 254, 0.8); /* 💡 シアンの輝きをより明るく */
  letter-spacing: 1px;
}

/* 🌟 CSSで作る3本線（ハンバーガーボタン） 🌟 */
.hamburger-btn {
  width: 30px;
  height: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
  z-index: 9999; /* バーの上でも常に一番手前 */
}

/* 3本線の「線」自体のデザイン */
.hamburger-btn span {
  display: block;
  width: 100%;
  height: 2px; /* 線の潰れを防ぐため調整 */
  background-color: #ffffff; /* 💡 線自体を純白に */
  transition: 0.3s ease-in-out; /* 動くときのアニメーション */
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.8); /* 💡 線の光をより明るく */
}

/* 🌟 上からスッと出てくるメニューエリア 🌟 */
/* 🌟 上からスッと出てくるメニューエリア 🌟 */
.dropdown-menu {
  position: fixed;
  top: -500px; /* 💡 最初は画面の上に「完全に」隠す（-350pxからマイナスを増やしました） */
  left: 0;
  width: 100%;
  background: rgba(8, 14, 35, 0.98);
  backdrop-filter: blur(15px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
  z-index: 9997; /* 💡 9998から9997に変更：固定バー(9999)の「下に完全に潜り込む」ように変更 */
  transition: 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  padding: 80px 0 20px 0;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
}

.dropdown-menu a {
  display: block;
  text-align: center;
  padding: 16px 0;
  color: #ffffff;
  text-decoration: none;
  font-size: 0.95rem;
  letter-spacing: 2px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  transition: 0.3s;
}
.dropdown-menu a:hover {
  background: rgba(255, 255, 255, 0.08); /* 💡 ホバー時を少し明るく */
  color: #00f2fe; /* ホバーでシアン（青緑）に光る */
  text-shadow: 0 0 10px #00f2fe;
}

/* 💡 メニュー開閉時の連動アニメーションの魔法 */
#menu-toggle {
  display: none; /* チェックボックスは隠す */
}

/* ① チェックが入ったらメニューを下ろす */
#menu-toggle:checked ~ .dropdown-menu {
  top: 0;
}

/* ② チェックが入ったら3本線を「×」に変形させる */
#menu-toggle:checked ~ .fixed-nav-bar .hamburger-btn span:nth-child(1) {
  transform: translateY(9px) rotate(45px);
}
#menu-toggle:checked ~ .fixed-nav-bar .hamburger-btn span:nth-child(2) {
  opacity: 0; /* 2本目を消す */
}
#menu-toggle:checked ~ .fixed-nav-bar .hamburger-btn span:nth-child(3) {
  transform: translateY(-9px) rotate(-45px);
}

/* --- 以下、これまでの星空デザイン（そのまま） --- */
.event-header {
  background: linear-gradient(
    180deg,
    #101c42 0%,
    #1a2b5c 60%,
    #253d75 100%
  ); /* 💡 グラデーション全体をパッと明るい夜空に変更 */
  color: white;
  text-align: center;
  padding: 120px 20px;
  position: relative;
  overflow: hidden;
  margin-top: 60px;
}
.event-header::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.6),
    transparent
  ); /* 💡 中央の光の線を明るく */
}
.event-date-badge {
  background: rgba(255, 255, 255, 0.15); /* 💡 バッジの背景を明るく */
  color: #ffffff;
  padding: 6px 20px;
  border-radius: 20px;
  font-weight: bold;
  font-size: 0.85rem;
  letter-spacing: 2px;
  border: 1px solid rgba(255, 255, 255, 0.5); /* 💡 バッジの枠線を白くくっきりと */
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.4); /* 💡 バッジの輝きを強化 */
}
.event-header h1 {
  font-size: 2.6rem;
  margin: 25px 0 12px 0;
  font-weight: 300;
  letter-spacing: 3px;
  text-shadow:
    0 0 25px rgba(255, 255, 255, 0.85),
    0 0 10px rgba(0, 242, 254, 0.4); /* 💡 タイトル文字の発光を大幅強化 */
}
.event-catch {
  font-size: 1.1rem;
  margin-bottom: 35px;
  color: #f1f5f9; /* 💡 キャッチコピーの文字を明るい白に */
  letter-spacing: 1px;
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
}
.btn-primary {
  display: inline-block;
  background: #ffffff;
  color: #060b19;
  padding: 12px 35px;
  text-decoration: none;
  border-radius: 0px;
  font-weight: bold;
  letter-spacing: 1px;
  box-shadow: 0 0 25px rgba(255, 255, 255, 0.5); /* 💡 ボタンの光を強化 */
  transition: 0.4s;
}
.btn-primary:hover {
  background: transparent;
  color: #ffffff;
  border: 1px solid #ffffff;
  box-shadow: 0 0 35px rgba(255, 255, 255, 0.8);
}
main {
  max-width: 750px;
  margin: 50px auto;
  padding: 0 20px;
}
section {
  background: rgba(255, 255, 255, 0.05); /* 💡 セクションの背景を少し明るく */
  padding: 40px;
  margin-bottom: 35px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.12); /* 💡 白い枠線を明るく強調 */
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
}

h2 {
  color: #ffffff;
  font-size: 1.3rem;
  font-weight: 400;
  letter-spacing: 2px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3); /* 💡 見出しの下線を明るく */
  padding-bottom: 10px;
  margin-top: 0;
  margin-bottom: 30px;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}
.info-table {
  width: 100%;
  border-collapse: collapse;
}
.info-table th,
.info-table td {
  padding: 20px 15px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* 💡 テーブルの横線を明るく */
  text-align: left;
}
.info-table th {
  width: 25%;
  color: #cbd5e1; /* 💡 見出し文字を明るいシルバーに変更 */
  font-weight: bold;
  font-size: 0.9rem;
}
.info-table td {
  color: #f1f5f9; /* 💡 テーブル内の文字を明るく */
}
.sub-text {
  font-size: 0.85rem;
  color: #94a3b8; /* 💡 補足文字を読みやすく明るく */
}
.cta-section {
  text-align: center;
  background: rgba(
    255,
    255,
    255,
    0.08
  ); /* 💡 参加方法エリアをさらに一歩明るく */
  border: 1px solid rgba(255, 255, 255, 0.25); /* 💡 枠線をくっきりと */
}
.info-ticket {
  width: 100%;
  border-collapse: collapse;
}
.info-ticket th,
.info-ticket td {
  padding: 20px 15px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* 💡 テーブルの横線を明るく */
  text-align: left;
}
.info-ticket th {
  width: 25%;
  color: #cbd5e1; /* 💡 見出し文字を明るいシルバーに変更 */
  font-weight: bold;
  font-size: 0.9rem;
}
.info-tisket td {
  color: #f1f5f9; /* 💡 テーブル内の文字を明るく */
}

.btn-area {
  margin-top: 30px;
}
.btn-large {
  display: inline-block;
  background: transparent;
  color: #ffffff;
  border: 1px solid #ffffff;
  padding: 16px 50px;
  text-decoration: none;
  border-radius: 0px;
  font-weight: bold;
  font-size: 1rem;
  letter-spacing: 2px;
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
  transition: 0.3s;
}
.btn-large:hover {
  background: #ffffff;
  color: #060b19;
  box-shadow: 0 0 30px rgba(255, 255, 255, 0.7);
}
footer {
  text-align: center;
  padding: 50px;
  background-color: #03060f;
  color: #64748b; /* 💡 コピーライトの文字を少し明るく */
  font-size: 0.8rem;
  margin-top: 100px;
  letter-spacing: 1px;
}
.coming-soon-badge {
  display: inline-block;
  background-color: rgba(255, 255, 255, 0.15); /* 💡 バッジの背景を明るく */
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.6); /* 💡 バッジの線を明るく */
  padding: 3px 12px;
  font-size: 0.75rem;
  font-weight: bold;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}
.coming-soon-box {
  text-align: center;
  padding: 50px 20px;
  background: rgba(255, 255, 255, 0.01);
  border: 1px dashed rgba(255, 255, 255, 0.15);
}
.coming-soon-text {
  font-size: 1.1rem;
  font-weight: 300;
  color: #ffffff;
  letter-spacing: 3px;
  margin-top: 0;
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
}

/* 画像用（パターンAのスタイルを念のため標準組み込み） */
.event-logo-image {
  display: block;
  width: 100%;
  max-width: 500px;
  height: auto;
  margin: 0 auto 10px;
  box-sizing: border-box;
}
.news-wrapper {
  max-width: 600px; /* 全体の横幅（お好みで） */
  margin: 0 auto;
}
.news-container {
  /* border: 1px solid #ccc; */ /* 💡 削除するか以下に変更 */
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 15px;
  /* background-color: #fff; */ /* 💡 白背景を削除し、他のセクションと同じ透過へ */
  background: rgba(255, 255, 255, 0.05);
  display: flex;
  flex-direction: column;
  gap: 15px;
  overflow: hidden;
}

.news-item {
  padding-bottom: 10px;
  /* border-bottom: 1px dashed #eee; */ /* 💡 明るい背景用の線を夜空用に変更 */
  border-bottom: 1px dashed rgba(255, 255, 255, 0.2);
}
/* 🌟 VIEW MOREボタンをCOMING SOON（バッジ）の配色と完全に統一 🌟 */
.btn-viewmore {
  display: inline-block;
  /* COMING SOONバッジと同じ背景色と文字色 */
  background-color: rgba(255, 255, 255, 0.15);
  color: #ffffff;
  /* COMING SOONバッジと同じくっきりと明るい枠線 */
  border: 1px solid rgba(255, 255, 255, 0.6);

  /* ボタンとして押しやすいサイズ感に調整（お好みで調整してください） */
  padding: 10px 30px;
  font-size: 0.85rem;
  font-weight: bold;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;

  /* COMING SOONバッジと同じ輝き（発光エフェクト） */
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);

  /* マウスを乗せたときのスムーズな変化用 */
  transition: 0.3s;
  cursor: pointer;
}

/* ホバー時（マウスを乗せたとき）の演出（少し明るく発光を強める） */
.btn-viewmore:hover {
  background-color: rgba(255, 255, 255, 0.25);
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
}
@media (max-width: 768px) {
  main {
    padding: 0 15px;
  }

  section {
    padding: 20px;
  }

  .event-logo-image {
    width: 100%;
    max-width: 100%;
    height: auto;
  }
}