/* =========================================================
   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;          /* 固定ヘッダーの高さぶん */
  }
}


/* =====================================
   準備中メッセージ（absolute・JSなし）
   ===================================== */

/* ヒーローを基準にする */
.front-hero{
  position: relative;
}

/* メッセージ本体 */
.top-notice-abs{
  position: absolute;
  top: 110px;                 /* ← ここだけで上下位置を制御 */
  
  right: 24px;
  left: auto;
  transform: none;
  
  z-index: 20;

  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);

  color: #fff;
  padding: 10px 20px;
  border-radius: 4px;

  text-align: center;
  line-height: 1.6;
  font-size: 14px;
  max-width: 90%;
}

/* 見出し強調 */
.top-notice-abs strong{
  display: block;
  font-weight: 700;
  letter-spacing: .04em;
  margin-bottom: 2px;
}

/* スマホ調整 */
@media (max-width: 767px){
  .top-notice-abs{
    top: 90px;               /* SPでは少し上へ */
    font-size: 13px;
    padding: 8px 14px;
  }
}




/* =====================================
   ヒーロー左下：お問い合わせメール
   ===================================== */

.hero-mailto{
  position: absolute;
  left: 24px;          /* ← 左位置 */
  bottom: 24px;        /* ← 下位置 */
  z-index: 15;

  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);

  padding: 8px 14px;
  border-radius: 4px;
}

/* リンク文字 */
.hero-mailto a{
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  text-decoration: underline;
  letter-spacing: 0.02em;
}

/* hover（PCのみ） */
.hero-mailto a:hover{
  opacity: 0.85;
}

/* スマホ調整 */
@media (max-width: 767px){
  .hero-mailto{
    left: 16px;
    bottom: 16px;
    padding: 6px 12px;
  }

  .hero-mailto a{
    font-size: 13px;
  }
}


/* 背景レイヤーがクリックを奪わないようにする */
.front-hero .hero-visual,
.front-hero .hero-bg-layer{
  pointer-events: none;
}

/* お問い合わせリンクはクリックできるように最前面へ */
.front-hero .hero-mailto{
  pointer-events: auto;
  z-index: 9999; /* とにかく前へ */
}

/* 念のため a もクリック可能に */
.front-hero .hero-mailto a{
  pointer-events: auto;
}