/* ============================================================
   メンバーシップLP（/membership/）調整スタイル

   クライアント支給の css/ とは分離した AQ 追加分。
   支給資材が差し替わっても、このファイルは影響を受けない。

   ・支給 css/style.css より**後**に読み込むこと
   ・script.js（AQ）と対で動作する

   ── 2026-08-24 納品版で、旧版にあった調整の大半が不要になった ──
   支給JS(js/common.js)が .Header の高さを ResizeObserver で実測し、
   --rooms-host-header-height / --rooms-anchor-offset に流し込むように
   なったため、AQ側で持っていた以下は撤去した。

     旧1. 固定ヘッダー分のオフセット   → 支給CSS .hero の margin-top が
          calc(--rooms-page-top-offset + --rooms-host-header-height) で処理
     旧2. ページ内アンカーの着地位置   → 支給CSS が scroll-margin-top:
          var(--rooms-anchor-offset) で処理
     旧4. LP自前フッターの非表示       → footer.site-footer 自体が
          資材から削除され、対象が存在しない

   （このファイルは実測で必要と確認できたものだけを残す方針）
============================================================ */

/* ------------------------------------------------------------
   固定ナビ（.side-nav）がヘッダーに潜る

   .side-nav は PC で
       position: fixed; right: 70px; top: 50%; transform: translateY(-50%)
   と**ビューポート中央**に置かれ、高さは約418px固定。z-index は auto
   （SPのみ 10）。一方ヘッダーは z-index:700 の不透明要素。

   縦が短い画面では上端がヘッダーの裏に入り、会員登録ボタンのクリックが
   ヘッダー側に横取りされる。実測（2026-08-24納品版）:

       1240x500  45.3px 被覆
       1440x500  59.1px
       1920x450 117.5px
       3440x500  198.0px … ここではクリックが Header-underInner に奪われる

   対策: 「ビューポート中央」ではなく「ヘッダーより下の領域の中央」に置く。
   top をヘッダー下端、bottom を 0 にして領域いっぱいに広げ、
   column flex の justify-content: center でボタンを中央に寄せる。

   ・出現アニメは `translate` プロパティで行われるため transform 解除で壊れない
   ・`safe` を付けると、中身が領域より高いときだけ中央寄せをやめて
     先頭（＝ヘッダー直下）基準になる。会員登録ボタンが先頭なので優先的に残る
   ・領域を広げるぶん、空き部分がクリックを奪わないよう
     コンテナを pointer-events:none にし、ボタンだけ auto に戻す

   適用範囲を 1240px 以上に限る理由:
   768〜1239px は支給JSが .side-nav に scale と right を動的に当てており
   （transform-origin:100% 0）、top/bottom を書き換えると縮小の基点が
   ずれる。帯内は実測でも被覆が最大16px（1239px時）で、
   クリック奪取も起きていないため対象外とする。

   ※ .side-nav は2026-08-24納品版で #rooms-lp の外へ移動したため、
     旧版の `#rooms-lp .side-nav` では当たらない。祖先を付けないこと。
------------------------------------------------------------ */
@media screen and (min-width: 1240px) {
  .side-nav {
    top: 6.94444vw; /* header-footer.css の .Header { height } と同値 */
    bottom: 0;
    transform: none;
    justify-content: safe center;
    pointer-events: none;
  }

  .side-nav > * {
    pointer-events: auto;
  }
}

/* ------------------------------------------------------------
   メニューパネルの暗幕（backdrop）が出ない

   テーマCSSは `.Menu .backdrop { opacity: 0 }` で伏せたまま、
   開いたときの `opacity: 1` を GSAP のインラインstyleで当てている。
   CSS側のフォールバックは存在するものの

       .Menu.-show .Menu .backdrop { opacity: 1 }

   と自己入れ子になっており（.Menu の中の .Menu を指す）、
   **永久に成立しない**。テーマ側の既存バグ → theme-known-bugs.md C-3

   GSAPを移植しない本LPでは暗幕が出ないままになるため、
   `-open`（script.js が付与）で opacity を戻す。
   duration は本家の GSAP と同じ 0.4s に合わせている。

   キャンペーンLPには同じパッチが入っていたが、本LP作成時に
   移植漏れしていた（2026-08-25 に本番で発覚し追加）。

   ここは自動生成の header-footer.css ではなく enhance.css に置くこと。
   生成CSSは main.css から作り直されるため、手書きの補正は消える。
------------------------------------------------------------ */
.Menu .backdrop {
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.Menu .backdrop.-open {
  opacity: 1;
}