@charset "UTF-8";

/* == footer 打ち消し == */
.footer {
  background: transparent;
  /* 共通CSSで固定/絶対配置されている場合の打ち消し */
  position: relative !important;
  inset: auto !important;
  bottom: auto !important;
}

/* == coming限定 == */
body {
  width: 100%;
  min-height: 100vh;
  --closing-bg-w: min(100vw, 1920px); /* 背景画像の表示幅（最大1920px） */
  --closing-bg-h: min(calc(var(--closing-bg-w) * 0.5625), 100vh); /* 1920x1080(16:9)の高さ */
  --closing-h3-push: 0px; /* h3を背景画像下端からさらに下げる量 */
  color: #fff;
  background-color: #000;
  background-image: url("../images/closing/bg_2025.webp");
  background-repeat: no-repeat;
  background-position: top center;
  background-size: var(--closing-bg-w) auto;
  position: relative;
  z-index: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 320px;
}

.coming_contents,
.footer {
  position: relative;
  z-index: 1;
}

/* 背景画像の下端をなじませる（透明→黒 約80px） */
body::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: calc(var(--closing-bg-h) - 80px);
  width: var(--closing-bg-w);
  height: 80px;
  pointer-events: none;
  z-index: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
}

.coming_contents {
  width: 100%;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
  padding-top: 60px;
  box-sizing: border-box;
  min-height: calc(var(--closing-bg-h) + var(--closing-h3-push));
  display: flex;
  flex-direction: column;
}

.coming_contents > section {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.coming_contents h1 {
  width: 70%;
  max-width: 450px;
  margin-left: auto;
  margin-right: auto;
}

.coming_contents h1 img {
  width: 100%;
  height: auto;
  display: block;
}

.coming_contents h2 {
  margin-left: auto;
  margin-right: auto;
  padding-top: 40px;
  text-align: center;
  font-size: 25px;
  font-weight: bold;
  font-weight: 700;
  letter-spacing: 0.15em;
}

.coming_contents h2 span {
  font-size: 40px;
}

.coming_contents h3 {
  margin-left: auto;
  margin-right: auto;
  margin-top: auto;
  padding: 20px;
  text-align: center;
  font-size: 18px;
  font-weight: bold;
  font-weight: 700;
  letter-spacing: 0.15em;
}

@media screen and (max-width: 1100px) {
  body {
    --closing-h3-push: 120px;
  }

  /* 背景画像の下端からコンテンツ開始 */
  .coming_contents {
    padding-top: var(--closing-bg-h);
  }

  .coming_contents h1 {
    width: 60%;
  }

}
@media screen and (max-width: 767px) {
  /* 1100px以下と同じ開始位置（背景画像の下端） */
  .coming_contents {
    padding-top: var(--closing-bg-h);
  }

  .coming_contents h3 {
    font-size: 16px;
  }

}