/* ============================================================
   共通ナビバー（動画ヒーローを持たないページ用）
   ------------------------------------------------------------
   style.css の .hero-nav / .hero-nav-inner / .hero-nav-logo /
   .hero-nav-menu / .nav-toggle 一式をそのまま流用する。

   style.css の .hero-nav は position:absolute（動画ヒーローに
   重ねる前提）で親の高さに寄与しない。動画ヒーローが無いページで
   それをそのまま使うと、親が高さを持てず

     ・スマホのハンバーガー（44px）やドロップダウンが収まらない
     ・親が潰れて背景が消え「白地に白字」になる

   という事故になる。そこで .site-nav を併記して通常フローに戻し、
   バー自体に navy を敷く。

   使い方:
     <link rel="stylesheet" href="/cruise/css/nav.css">   ← style.css の後
     <nav class="hero-nav site-nav"> … </nav>
     <script src="/cruise/js/nav.js" defer></script>

   ドロップダウン（.hero-nav-menu）は幅900px以下で
   position:absolute; top:66px になるが、基準ボックスは .hero-nav の
   ままなので、動画ヒーローのあるページと同じ位置・同じ幅で開く。
   ============================================================ */

.hero-nav.site-nav {
    position: relative;      /* 通常フローへ戻す。static ではなく relative なのは
                                z-index を効かせ、ドロップダウンの基準ボックスを
                                .hero-nav に保つため */
    top: auto;
    right: auto;
    left: auto;              /* absolute 用オフセットの持ち越しを打ち消す */
    width: 100%;
    background: #0e1a2b;     /* style.css:2 の --deep-navy と同値。
                                変数が解決できない場合の保険でリテラル指定 */
    z-index: 20;
}