:root {
  --color-bg-top: #00040d;
  --color-bg-bottom: #000c28;
  --color-white: #ffffff;
  --color-accent: #04c2ff;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  background: var(--color-bg-bottom);
}

body {
  font-family: "Noto Sans JP", sans-serif;
}

/* ==== ティザーセクション（画面いっぱい） ==== */
.teaser {
  min-height: 100vh;
  min-height: 100dvh;
  position: relative;
  display: flex;
  flex-direction: column;
  background: linear-gradient(
    180deg,
    var(--color-bg-top) 0%,
    var(--color-bg-bottom) 100%
  );
  color: var(--color-white);
}

/* ==== メインコンテンツ ==== */
.teaser__main {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center; /* 縦中央 */
  justify-content: center; /* 横中央 */
  padding: 24px;
}

.teaser__content {
  width: 100%;
  max-width: 620px; /* PC実画像サイズに合わせて調整してください */
  display: flex;
  flex-direction: column;
  align-items: center;
}
@media (min-width: 1920px) {
  .teaser__content {
    max-width: 70vw;
  }
}

.teaser__content img {
  display: block;
  height: auto;
}

/* ロゴ */
.teaser__logo {
  width: 100%;
  max-width: 796px;
  position: relative;
  z-index: 2;
}
@media (min-width: 1920px) {
  .teaser__logo {
    max-width: 80%;
  }
}
.teaser__logo img {
  width: 100%;
}

/* キャッチコピー */
.teaser__catch {
  width: 100%;
  max-width: 700px;
  margin-top: 10px;
  position: relative;
  z-index: 2;
}
@media (min-width: 1920px) {
  .teaser__catch {
    max-width: 80%;
  }
}
.teaser__catch img {
  width: 100%;
}

/* フレア（装飾ライン） */
.teaser__flare {
  width: 100%;
  max-width: 886px;
  position: relative;
  z-index: 0;
  margin-top: -30px;
}
@media (min-width: 1920px) {
  .teaser__flare {
    max-width: 100%;
    margin-top: -8%;
  }
}
.teaser__flare img {
  width: 100%;
}

/* 日程＋バッジ行 */
.teaser__info {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  position: relative;
  z-index: 2;
  margin-top: -30px;
}
@media (min-width: 1920px) {
  .teaser__info {
    width: 70%;
    margin-top: -8%;
  }
}
.teaser__badge {
  order: 1;
  flex-shrink: 0;
  width: 186px;
}
@media (min-width: 1920px) {
  .teaser__badge {
    width: 40%;
  }
}
.teaser__badge img {
  width: 100%;
}

@media (min-width: 1920px) {
  .teaser__badge {
    width: calc(40% - 8px);
  }
  .teaser__date {
    width: calc(60% - 8px);
  }
}

.teaser__date {
  order: 2;
  flex-shrink: 0;
  width: 431px;
}
@media (min-width: 1920px) {
  .teaser__date {
    width: 60%;
  }
}
.teaser__date img {
  width: 100%;
}

/* ==== フッター（常に画面下） ==== */
.teaser__footer {
  margin-top: 0; /* auto は不要になるので削除 */
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding: 24px 32px;
}

.teaser__footer-links {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}

.teaser__footer-links a {
  color: var(--color-white);
  text-decoration: none;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  opacity: 0.9;
  transition: opacity 0.2s ease;
}

.teaser__footer-links a:hover,
.teaser__footer-links a:focus-visible {
  opacity: 1;
  text-decoration: underline;
}

.teaser__footer-links svg {
  width: 11px;
  height: 11px;
  flex-shrink: 0;
}

.teaser__copyright {
  font-size: 12px;
  color: var(--color-white);
  opacity: 0.7;
}

/* ==== SP対応 ==== */
@media (max-width: 768px) {
  .teaser__main {
    padding: 40px 20px 80px;
  }

  .teaser__content {
    max-width: 100%;
  }

  .teaser__logo {
    max-width: 90%;
  }
  .teaser__catch {
    max-width: 90%;
    margin-top: 16px;
  }
  .teaser__flare {
    max-width: 100%;
    margin: 0;
  }

  /* SPでは「日程が先→バッジが後」に縦並びで表示 */
  .teaser__info {
    flex-direction: column;
    gap: 20px;
    margin-top: 0px;
  }
  .teaser__date {
    order: 1;
    width: 100%;
    max-width: 90%;
  }
  .teaser__badge {
    order: 2;
    width: 50%;
  }

  .teaser__footer {
    flex-direction: column;
    align-items: flex-start;
    padding: 20px;
    gap: 14px;
  }

  .teaser__footer-links {
    gap: 20px;
  }
}