/* =========================================================
   LP Header (PC + SP)
   - PC: sticky header (logo + CTA in header)
   - SP: sticky header (logo only) + fixed bottom CTA bar
========================================================= */

/* ---------- common ---------- */
.lp-hide-sp { display: flex; }
.lp-only-sp { display: none; }

/* ---------- header ---------- */
.lp-header {
  position: sticky;
  top: 0;
  z-index: 1000;

  width: 100%;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  /* border-bottom: 1px solid rgba(0, 0, 0, 0.06); */
}

.lp-header__inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 16px 32px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.lp-header__logo {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.lp-header__logo img {
  display: block;
  width: auto;
  height: 48px;
}

.lp-header__nav {
  display: flex;
  align-items: center;
  gap: 16px;
}

.lp-header__cta {
  display: inline-flex;
  align-items: center;
}

.lp-header__cta img {
  display: block;
  width: auto;
  height: 48px;
}

.lp-header__cta:hover {
  opacity: 0.85;
  transition: opacity 0.2s ease;
}

/* ヘッダー分の余白（仮：あとで調整） */
.lp main {
  /* padding-top: 96px; */
}

/* =========================================================
   SP Fixed CTA (bottom)
   - margin 10px around
   - fixed height bar + centered buttons
   - width balance by flex ratio
   - safe-area supported
========================================================= */

@media (max-width: 767px) {

  /* CTAバー本体（外周10pxで固定） */
  .lp-fixed-cta {
    position: fixed;
    left: 10px;
    right: 10px;
    bottom: calc(10px + env(safe-area-inset-bottom));
    z-index: 1100;

    height: 76px; /* CTAバーの高さ（必要なら調整） */

    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
  }

  /* 3ボタンの並び（上下中央揃え、間隔10px） */
  .lp-fixed-cta__inner {
    height: 100%;
    padding: 0 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: space-around;
  }

  /* ボタン共通 */
  .lp-fixed-cta__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;         /* 画像のはみ出し/縮み事故防止 */
  }

  /* 画像は「収まる最大サイズ」 */
  .lp-fixed-cta__btn img {
    max-height: 56px;     /* ボタンの見た目高さ（必要なら調整） */
    max-width: 100%;
    width: auto;
    height: auto;
    display: block;
  }

  /* 下部固定CTAがある分、本文の下が隠れないように */
  .lp main {
    padding-bottom: 92px;   /* 下部固定CTA分の仮（後で微調整） */
  }

  /* JSが入れるCTA高さ（初期値は仮） */
  :root {
    --lp-fixed-cta-h: 90px;
  }

  body.lp main,
  main.lp {
    padding-bottom: calc(var(--lp-fixed-cta-h, 90px) + 10px + env(safe-area-inset-bottom));
  }
}

@media (max-width: 767px) {
  :root { --lp-fixed-cta-h: 90px; }

  /* mainだけだとfooterが隠れることがあるので、ページ全体にも付与 */
  body.lp,
  body.lp #page,
  body.lp .site,
  body.lp .site-content,
  body.lp main,
  main.lp {
    padding-bottom: calc(var(--lp-fixed-cta-h, 90px) + 10px + env(safe-area-inset-bottom)) !important;
  }
}



/* =========================================================
   SP (375基準)
   - header: logo only
   - bottom CTA always visible
========================================================= */
@media (max-width: 767px) {

  /* header: ロゴだけ */
  .lp-hide-sp { display: none !important; }
  .lp-only-sp { display: block; }

  .lp-header__inner {
    max-width: 100%;
    padding: 10px 12px;
    justify-content: center; /* ロゴだけ中央寄せにしたい場合 */
  }

  .lp-header__logo img {
    height: 40px;
  }
}



/* =========================
   FIX: フッター直前の余白を消す
   - 逃げは main ではなく body/#page 側に持たせる
========================= */
@media (max-width: 767px) {

  /* main に入っている padding-bottom が「フッター上の空白」になるので無効化 */
  body.lp main,
  main.lp {
    padding-bottom: 0 !important;
  }

  /* 逃げ（固定CTAに隠れない余白）はページ全体側に付ける */
  body.lp,
  body.lp #page,
  body.lp .site,
  body.lp .site-content {
    padding-bottom: calc(var(--lp-fixed-cta-h, 90px) + 10px + env(safe-area-inset-bottom)) !important;
  }
}