/* ティザー（公開前の告知ページ）。デザイン 1920×1080：写真を画面いっぱいに、中央にロゴ、左下に影付きの黒い箱 */
.page-teaser { background: var(--black); }
.tz { position: relative; width: 100%; height: 100vh; height: 100dvh; min-height: 560px; overflow: hidden; }
.tz__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* ロゴ＋コピーの PNG（866×394）：デザインでは横は中央、上端が 36.6%。画面の縦横比が変わっても収まるよう、幅は横・縦の小さいほうに合わせる */
.tz__brand { position: absolute; left: 50%; top: 36.6%; width: min(45.1vw, 80.2vh); margin: 0; transform: translateX(-50%); }
.tz__brand img { display: block; width: 100%; height: auto; }
/* 左下の黒い箱：デザインで 幅 482px、左・下から 40px、角 6px、影付き */
.tz__box { position: absolute; left: 40px; bottom: 40px; width: 482px; padding: 34px 30px 33px; border-radius: 6px; background: var(--black); color: var(--white); text-align: center; box-shadow: 0 12px 40px rgba(0, 0, 0, .55); }
.tz__en { font-family: var(--font-en); font-weight: 600; font-size: 34px; line-height: 1; }
.tz__text { margin-top: 22px; font-size: 16px; line-height: 1.75; letter-spacing: 0.08em; }
.tz__btn { display: block; width: 343px; margin: 23px auto 0; transition: opacity .2s; }
.tz__btn:hover { opacity: .75; }
.tz__btn img { display: block; width: 100%; height: auto; }
@media (max-width: 767px), (max-aspect-ratio: 1/1) {
  .tz__brand { top: 22%; width: 86vw; }
  .tz__box { left: 16px; right: 16px; bottom: 16px; width: auto; padding: 26px 16px 24px; }
  .tz__en { font-size: 26px; }
  .tz__text { margin-top: 16px; font-size: 13px; letter-spacing: 0.04em; }
  .tz__btn { width: min(100%, 343px); margin-top: 16px; }
}