/* =========================================================
   front-page.css — 3枚背景フェード＋フロントバナー
   ========================================================= */

/* =========================================================
   PC（769px〜）
   ========================================================= */
@media (min-width: 769px){

  /* --------------------------------
     0) バナー位置・サイズのカスタム変数
     -------------------------------- */
  :root{
    --hero-bn-right: 0px;      /* 右からの距離 */
    --hero-bn-bottom: 2px;     /* 下からの距離 */
    --hero-bn-width: 250px;   /* 各バナーの幅 */
    --hero-bn-gap: 0px;        /* バナー同士の間隔 */
    --hero-bn-opacity: 0.8;
  }

  /* --------------------------------
     1) ヒーローセクション全体
     -------------------------------- */
  #frontBg{
    position: relative;
    height: 100vh;             /* 1画面ぶんの高さ */
    overflow: hidden;
    z-index: 1;
    pointer-events: none;      /* ヒーロー全体のクリック無効（バナー側で解除） */
  }

  /* コンテナ共通（背景3枚の受け皿） */
  .hero-visual,
  .hero-bg-layer{
    width: 100%;
    height: 100%;
  }

  /* 背景レイヤーを重ねる器 */
  .hero-visual{
    position: relative;
    overflow: hidden;
  }

  /* --------------------------------
     2) 背景レイヤー（3枚フェード）
     -------------------------------- */
  .hero-bg-layer{
    position: absolute;
    inset: 0;                          /* top, right, bottom, left: 0 */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 2s ease;       /* フェード時間 */
  }

  /* 初期表示：1枚目 */
  .hero-bg-layer.front-layer1{
    opacity: 1;
  }

  /* JSから付与される可視状態 */
  .hero-bg-layer.is-visible{
    opacity: 1;
  }

  /* Elementor本文などの上にヒーローを置かないための保険 */
  .site-main,
  .site-main .page-content{
    position: relative;
    z-index: 2;
  }

  /* --------------------------------
     3) フロントバナー（2枚）
     -------------------------------- */
  .hero-front-bn-group{
    position: absolute;
    right: var(--hero-bn-right);
    bottom: var(--hero-bn-bottom);

    display: flex;
    flex-direction: row;
    align-items: flex-end;
    gap: var(--hero-bn-gap);

    z-index: 40;
    pointer-events: auto;
  }

  .hero-front-bn{
    width: var(--hero-bn-width);
    pointer-events: auto;
    display: block;
    transform: translateY(0);
    transition: transform 220ms ease, box-shadow 220ms ease;
  }

  .hero-front-bn:hover{
    transform: translateY(-6px);
    box-shadow: 0 16px 32px rgba(0,0,0,0.32);
  }

  .hero-front-bn img{
    width: 100%;
    height: auto;
    display: block;
    box-shadow: 0 10px 25px rgba(0,0,0,.25);
    opacity: var(--hero-bn-opacity);
    border-radius: 10px;              /* 必要なら調整／削除可 */
  }

  /* --------------------------------
     4) アンカー移動時の位置補正
     -------------------------------- */
  #target-banner{
    scroll-margin-top: 75px;          /* 固定ヘッダーの高さぶん */
  }

  #target-banner2{
    scroll-margin-top: 75px;          /* 固定ヘッダーの高さぶん */
  }
}


/* =========================================================
   モバイル（〜768px）
   - 背景は1枚目をベースに静止表示
   - 右下2枚の訴求画像は横並びで縮小表示
   ========================================================= */
@media (max-width: 768px){

  #frontBg{
    position: relative;
    height: 60vh;                     /* 画面の 60% 高さくらい */
    min-height: 260px;
    overflow: hidden;
    z-index: 1;
  }

  .hero-visual{
    position: relative;
    width: 100%;
    height: 100%;
  }

  .hero-bg-layer{
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
  }

  /* 1枚目だけ見せておけば「とりあえず綺麗」に見える */
  .hero-bg-layer.front-layer1{
    opacity: 1;
  }

  /* --------------------------------
     ポップアップ訴求画像（2枚） — 右下寄せ＆小さめ
     端末幅に応じて自動で縮む
     -------------------------------- */
  .hero-front-bn-group{
    position: absolute;
    right: 10px;
    bottom: 10px;
    left: auto;                       /* ← 左指定を消す（右寄せ確定） */

    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: flex-end;
    gap: 8px;

    width: auto;
    max-width: min(92vw, 360px);      /* 360pxを上限に、画面幅の92%まで */
    z-index: 40;
    pointer-events: auto;
  }

  .hero-front-bn{
    flex: 1 1 0;
    max-width: none;                  /* 50%制限をやめる */
    display: block;
  }

  .hero-front-bn img{
    width: 100%;
    height: auto;
    display: block;
    border-radius: 10px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.28);
    opacity: 0.9;

    max-width: clamp(120px, 22vw, 160px);
  }

  /* hover はスマホでは軽く固定 */
  .hero-front-bn:hover{
    transform: none;
    box-shadow: 0 8px 20px rgba(0,0,0,0.28);
  }

  /* スクロール位置補正（アンカー飛び用） */
  #target-banner,
  #target-banner2{
    scroll-margin-top: 70px;          /* 固定ヘッダーの高さぶん */
  }
}