/* 基本設定：先行公開専用。通常サイトのレイアウトには影響しない。 */
:root { color-scheme: light; font-family: "ryo-gothic-plusn", "Noto Sans JP", sans-serif; color: #202d54; background: linear-gradient(90deg, #f9f9e0, #e9e4a8); font-synthesis: none; }
* { box-sizing: border-box; }
body { margin: 0; }
/* MV：曲線マスク付き写真とロゴ。 */
.coming__visual { position: relative; }
.coming__visual > picture:not(.image-fallback), .coming__photo { display: block; width: 100%; }
.coming__photo { height: auto; }
.coming__logo { position: absolute; width: 51.2%; height: auto; top: 20.8%; left: 50%; transform: translateX(-50%); }
/* 告知：高さ固定を使わず余白でデザインを再現。 */
.coming__content { padding: 15px 16px 90px; text-align: center; font-weight: 700; }
.coming__catch { position: relative; display: inline-block; margin: 0; padding-bottom: 6px; font-size: clamp(12px, 3.8vw, 16px); line-height: 1.5; }
.coming__catch::before { position: absolute; top: 100%; left: 0; width: 49.5%; height: 2px; background: #111; content: ""; }
.coming__catch::after { position: absolute; top: 100%; left: 48%; right: 0; padding-top: 12px; background: #111; content: ""; clip-path: polygon(0 calc(100% - 2px), 30px 0, 100% 0, 100% 2px, 30px 2px, 0 100%); }
h1 { margin: 40px 0 0; font-size: clamp(36px, 12vw, 60px); font-weight: 700; letter-spacing: .04em; line-height: 1.5; }
.coming__release { width: fit-content; max-width: 100%; margin: 33px auto 0; padding: 7px 25px; border-radius: 999px; color: #fff; background: #202d54; font-size: 12px; line-height: 1.3; }
.coming__release small { font-size: .75em; }
.coming__year { font-size: .75em; }
.coming__year small { font-size: 1em; }
.coming__hour { margin-left: .4em; white-space: nowrap; }
/* PC：1600pxのアートボードを基準に、画面幅に応じて調整。 */
@media (min-width: 768px) {
  .coming__logo { width: 22.5%; top: 33.4%; }
  .coming__content { padding: 3.75vw 24px 50px; }
  .coming__catch { padding-bottom: 12px; font-size: clamp(20px, 1.987vw, 40px); letter-spacing: .05em; }
  .coming__catch::before { height: 3px; }
  .coming__catch::after { padding-top: 20px; clip-path: polygon(0 calc(100% - 3px), 50px 0, 100% 0, 100% 3px, 50px 3px, 0 100%); }
  h1 { margin-top: 22px; font-size: clamp(52px, 4.875vw, 96px); }
  .coming__release { margin-top: 32px; padding: 18px 65px; font-size: clamp(18px, 1.75vw, 34px); letter-spacing: .05em; }
  .coming__release small { font-size: .643em; }
  .coming__year { font-size: 1em; }
  .coming__year small { font-size: .643em; }
}

/* 画像共通：WebP非対応ブラウザ向けPNG代替。ロゴの配置はpicture側で維持。 */
.image-fallback { display: block; }
.image-fallback > img:not(.step-card__image) { display: block; width: 100%; height: auto; }