/* ============================================
   トップのヒーロー：ロゴ・キャラクター・キャッチコピーの台（2026-11-07）
   画面の解像度や拡大率が変わると、ロゴ（幅は px 固定）・キャラ（幅は vw、上下は vh）・
   キャッチコピー（画面の下端から）がばらばらに動いて、離れたりくっついたりしていた。
   PC では3つを .hero__stage にまとめ、1920×960 で見た今の配置を台の中の割合にして、
   台ごと同じ比率で拡大縮小する。--u は「1920×960 のときの 1px」に当たる長さで、
   画面の幅と、日付の帯より下の高さの、小さい方に合わせる。
   スマホ（768px 以下）は台を display: contents にして、style.css の今の並べ方のまま。
   ============================================ */
@media (min-width: 769px) {
  .hero__inner {
    flex: none;
  }

  .hero__stage {
    --u: max(0.42px, min(calc(100vw / 1920), calc((100vh - 191px) / 769)));
    position: relative;
    z-index: 5;
    flex: none;
    width: calc(1536 * var(--u));
    height: calc(764 * var(--u));
    /* 日付の帯の下に、ロゴが今と同じだけ食い込むように */
    margin: -54px auto -24px;
  }

  .hero__stage .hero__char,
  .hero__stage .hero__logo,
  .hero__stage .hero__catchcopy {
    position: absolute;
    right: auto;
    bottom: auto;
    height: auto;
    max-width: none;
    margin: 0;
  }

  .hero__stage .hero__char--dai   { left: 0;        top: 3.403%;  width: 30.013%; }
  .hero__stage .hero__char--suu   { left: 67.513%;  top: 3.403%;  width: 32.487%; }
  .hero__stage .hero__char--drone { left: 63.737%;  top: 46.204%; width: 16.276%; }
  .hero__stage .hero__logo        { left: 26.563%;  top: 0;       width: 46.875%; z-index: 4; }
  .hero__stage .hero__catchcopy   { left: 28.776%;  top: 61.518%; width: 42.513%; transform: none; }

  /* ガイドの帯は台のすぐ下。hero が画面より高いときも下に寄せる */
  .hero__apply {
    margin-top: auto;
  }
}

@media (max-width: 768px) {
  .hero__stage {
    display: contents;
  }

  /* 前は .hero__center の中で真ん中に置かれ、.hero__inner（z-index: 5）の重なりの中にいた。
     hero の gap（16px）が1つ増えたので、上の食い込みを 16px 足して今と同じ位置に */
  .hero__logo {
    position: relative;
    z-index: 5;
    display: block;
    margin-top: -46px;
    margin-left: auto;
    margin-right: auto;
  }
}