@charset "UTF-8";

/* ==========================================================================
   フロートバナー（画面右上固定）: .p-float-banner
   --------------------------------------------------------------------------
   - アサヒビール「ニッカ フロンティア 缶ハイボール」商品ページへの外部リンクバナー。
   - バナー画像（frontier-banner.png / .webp）はキャッチ・商品名を内包した1枚絵。
   - assets/css/top.css は他社が SCSS からビルドした生成物のため手を加えず、
     本ファイルを index.html から追加で読み込む（top.css の後に読み込むこと）。

   【表示制御は top.js に依存せず assets/js/banner.js が単独で行う】
     - .is-shown       : オープニング演出終了後に付与 → フェードイン
     - .is-foot-near   : フッター手前〜フッター領域内で付与 → 非表示（抜けるまで保持）
     - .is-menu-hidden : ハンバーガーメニュー展開中に付与 → 非表示
       （バナーの z-index(--z-fixed) はメニュー・オープニングより前面のため、
        展開中/演出中は明示的に隠さないと覆いかぶさってしまう）
     初期状態は opacity: 0（未表示）で、banner.js が .is-shown を付けて初めて出す。

   - レイアウトは top.css の :root で定義済みのデザイントークン
     （--size / --z-fixed / --e-out-cubic / --_header-height）を参照する。
     --size は基準ビューポート幅（SP:390 / PC:1360）に対するレスポンシブ px 単位。
     ※これらは値（トークン）の参照であり、top.js の表示制御ロジックには依存しない。
   ========================================================================== */

/* セレクタに #contents を付けている理由:
   top.css（ビルド生成物）に `#contents a` 相当の高詳細度リセットがあり、
   クラス単体（0,1,0）ではルートの <a> に当てたスタイルが打ち消されるため、
   `#contents .p-float-banner`（1,1,0）でリセットより優先させる。 */
#contents .p-float-banner {
  /* 固定ヘッダー（共通ヘッダー）の直下・右上に固定配置する。
     --_header-height は共通スクリプトが実ヘッダー高に合わせて更新するトークン */
  position: fixed;
  top: calc(var(--_header-height, 45px) + 10 * var(--size));
  right: calc(10 * var(--size));
  z-index: var(--z-fixed);

  /* バナー画像の表示幅。--size により基準幅に対して伸縮する（SP基準390） */
  display: block;
  width: calc(130 * var(--size));

  /* 初期は非表示。banner.js が .is-shown を付けてフェードインさせる */
  opacity: 0;
  transition: opacity 0.6s var(--e-out-cubic, ease-out);
}

/* オープニング演出後のフェードイン */
#contents .p-float-banner.is-shown {
  opacity: 1;
}

/* 非表示状態（フッター手前・メニュー展開中）はクリックできないようにする
   （見た目のフェードは _inner 側で行う） */
#contents .p-float-banner.is-foot-near,
#contents .p-float-banner.is-menu-hidden {
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   Element: _inner（バナー画像のラッパー。表示/非表示・ホバーを担当）
   -------------------------------------------------------------------------- */
.p-float-banner_inner {
  display: block;

  /* 画像は透過 PNG のため、矩形ではなく形状に沿った影を落とす */
  filter: drop-shadow(0 2px 8px rgb(0 0 0 / 35%));

  /* .is-foot-near（フッター手前）／.is-menu-hidden（メニュー展開中）のフェード用 */
  opacity: 1;
  transition:
    opacity 0.4s var(--e-out-cubic, ease-out),
    transform 0.4s var(--e-out-cubic, ease-out);
}

.p-float-banner.is-foot-near .p-float-banner_inner,
.p-float-banner.is-menu-hidden .p-float-banner_inner {
  opacity: 0;
}

/* バナー画像本体 */
.p-float-banner_image {
  display: block;
}

.p-float-banner_image img {
  display: block;
  width: 100%;
  height: auto;
}

/* --------------------------------------------------------------------------
   ホバー演出（ホバーが使えるデバイスのみ）
   既存サイトの演出（--e-out-cubic の軽いスケール）に合わせる
   -------------------------------------------------------------------------- */
@media (any-hover: hover) {
  .p-float-banner:hover .p-float-banner_inner {
    transform: scale(1.03);
  }
}

/* --------------------------------------------------------------------------
   PC（サイト共通ブレークポイント: 1024px〜 / 基準幅 1360）
   -------------------------------------------------------------------------- */
@media screen and (min-width: 1024px) {
  #contents .p-float-banner {
    top: calc(var(--_header-height, 100px) + 16 * var(--size));
    right: calc(16 * var(--size));

    /* バナー内テキストの可読性のため拡大。
       ただし .p-hot__headline_text（見出し）にかぶらない幅に留める。
       基準幅1360px時: 右16px固定 → 左端≈1116px、見出し右端≈1103px（約13px余白）。 */
    width: calc(228 * var(--size));
  }
}