/* ==========================================================================
   sato-style.css — ENECO TOP LP
   ========================================================================== */

/* --------------------------------------------------------------------------
   基本リセット — WordPress テーマCSSの上書き
   -------------------------------------------------------------------------- */
.lp-main,
.lp-section,
.lp-fv,
.lp-offer {
  background: none !important;
  background-color: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  min-height: 0 !important;
}

.lp-main {
  display: block !important;
}

.lp-section {
  display: block !important;
  line-height: 0 !important;
  font-size: 0 !important;
}

.lp-img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* --------------------------------------------------------------------------
   FV / offer ラッパー — position:relative を強制
   -------------------------------------------------------------------------- */
.lp-fv__wrap,
.lp-offer__wrap {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  line-height: 0 !important;
  font-size: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: none !important;
  background-color: transparent !important;
}

/* pictureタグのgap対策 */
.lp-fv__wrap picture,
.lp-offer__wrap picture {
  display: block !important;
  line-height: 0 !important;
  font-size: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* --------------------------------------------------------------------------
   CTAオーバーレイ共通
   ラッパー込みのセレクターで styles.css の .lp-cta { position:relative } に勝つ
   -------------------------------------------------------------------------- */
.lp-fv__wrap .lp-cta,
.lp-offer__wrap .lp-cta {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  justify-content: center !important;
  align-items: center !important;
  padding: 0 20px;
  line-height: 1 !important;
  font-size: 0 !important;
  background: none !important;
  background-color: transparent !important;
  margin: 0 !important;
}

.lp-cta a {
  display: inline-block;
  line-height: 0;
  font-size: 0;
  transition: opacity 0.2s;
  background: none !important;
}

.lp-cta a:hover {
  opacity: 0.8;
}

.lp-cta a img {
  display: block !important;
  height: auto !important;
}

/* --------------------------------------------------------------------------
   PC用CTA — 横並び・表示（デフォルト）
   同じ詳細度 0,2,0 で display と flex-direction を制御
   -------------------------------------------------------------------------- */
.lp-fv__wrap .lp-cta--pc,
.lp-offer__wrap .lp-cta--pc {
  display: flex !important;
  flex-direction: row !important;
  gap: 24px;
  bottom: 9%;
}

.lp-cta--pc a img {
  width: 28vw;
  max-width: 480px;
}

/* FV専用 PC CTA位置 */
.lp-fv__wrap .lp-cta--pc {
  bottom: 5%;
}

/* --------------------------------------------------------------------------
   SP用CTA — 非表示（デフォルト）
   同じ詳細度 0,2,0 で display: none を制御
   -------------------------------------------------------------------------- */
.lp-fv__wrap .lp-cta--sp,
.lp-offer__wrap .lp-cta--sp {
  display: none !important;
}

/* --------------------------------------------------------------------------
   SP対応 — 798px以下
   -------------------------------------------------------------------------- */
@media (max-width: 798px) {

  /* PC用CTAを非表示 */
  .lp-fv__wrap .lp-cta--pc,
  .lp-offer__wrap .lp-cta--pc {
    display: none !important;
  }

  /* SP用CTAを縦並びで表示 */
  .lp-fv__wrap .lp-cta--sp,
  .lp-offer__wrap .lp-cta--sp {
    display: flex !important;
    flex-direction: column !important;
    gap: 7px;
    bottom: 3%;
  }

  .lp-cta--sp a img {
    width: 80vw;
    max-width: 340px;
  }

  /* FV専用 SP CTA位置 */
  .lp-fv__wrap .lp-cta--sp {
    gap: 3px;
    bottom: 0%;
  }
}