/* ===============================
   LPカテゴリバッジ（優先度最強版）
   =============================== */

.lp-page .lp-badge {
    padding: 10px 26px !important;
    background: linear-gradient(to right, #b2f5ea, #c6f6d5) !important;
    border: 2px solid #38a169 !important;
    border-radius: 40px !important;
    box-shadow: 0 4px 15px rgba(56, 161, 105, 0.35) !important;
    display: inline-flex !important;
    align-items: center !important;
    position: relative !important;
    z-index: 10 !important;
}

.lp-page .lp-badge::after {
    content: "" !important;
    position: absolute !important;
    inset: -6px !important;
    border-radius: 50px !important;
    background: radial-gradient(circle,
        rgba(72,186,120,0.35) 0%,
        rgba(72,186,120,0) 70%) !important;
    z-index: -1 !important;
}

.lp-page .lp-badge-icon {
    font-size: 1.6rem !important;
    color: #2f855a !important;
    font-weight: bold !important;
    margin-right: 4px !important;
}

.lp-page .lp-badge-text {
    color: #22543d !important;
    font-weight: 800 !important;
    font-size: 1.2rem !important;
    letter-spacing: 0.03em !important;
}

.lp-page .lp-badge-sep {
    color: #38a169 !important;
    font-weight: 800 !important;
    margin: 0 6px !important;
    font-size: 1.2rem !important;
}

.lp-page .lp-badge:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 6px 18px rgba(56, 161, 105, 0.45) !important;
}

/* Tailwind の inline-flex / gap / rounded / shadow などを完全無効化 */
/* .lp-page .lp-badge {
    all: unset !important;
    display: inline-flex !important;
    align-items: center !important;
    padding: 10px 26px !important;
    background: linear-gradient(to right, #b2f5ea, #c6f6d5) !important;
    border: 2px solid #38a169 !important;
    border-radius: 40px !important;
    box-shadow: 0 4px 15px rgba(56, 161, 105, 0.35) !important;
    position: relative !important;
    cursor: default !important;
} */

/* Glow */
.lp-page .lp-badge::after {
    content: "" !important;
    position: absolute !important;
    inset: -6px !important;
    border-radius: 50px !important;
    background: radial-gradient(
        circle,
        rgba(72,186,120,0.35) 0%,
        rgba(72,186,120,0) 70%
    ) !important;
    z-index: -1 !important;
}

/* テキスト */
.lp-page .lp-badge-text {
/*     all: unset !important; */
    color: #22543d !important;
    font-size: 1.2rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.03em !important;
    line-height: 1 !important;
}

/* 仕切り */
.lp-page .lp-badge-sep {
/*     all: unset !important; */
    color: #38a169 !important;
    font-size: 1.2rem !important;
    font-weight: 800 !important;
    margin: 0 6px !important;
    line-height: 1 !important;
}

/* アイコン */
.lp-page .lp-badge-icon {
/*     all: unset !important; */
    font-family: "remixicon" !important;
    font-size: 1.6rem !important;
    color: #2f855a !important;
    margin-right: 6px !important;
    line-height: 1 !important;
}

/* ===============================
   バッジを 2倍 に拡大させる調整
   =============================== */
.lp-page .lp-badge {
    transform: scale(1.5) !important;     /* 2倍拡大 */
    transform-origin: left top !important; /* 自然な拡大位置 */
    padding: 18px 40px !important;      /* 物理的な余白も増やす */
    border-width: 3px !important;       /* 太さUP */
    box-shadow: 0 8px 30px rgba(56, 161, 105, 0.40) !important; /* 影強化 */
}

.lp-page .lp-badge-text {
    font-size: 1.5rem !important;  /* 文字サイズUP */
}

.lp-page .lp-badge-icon {
    font-size: 2rem !important;    /* アイコンも大きく */
    margin-right: 10px !important;
}

.lp-page .lp-badge-sep {
    font-size: 1.6rem !important;  /* 区切り |
    の存在感UP */
    margin: 0 10px !important;
}

/* ============================
   3ステップ（カードレイアウト修正）
   ============================ */

/* 全カードの高さを揃える */
.lp-page #steps .step-card {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: center !important;
    text-align: center !important;
    height: 420px !important; /* カード高さを固定化 */
    padding: 40px 20px !important;
}

/* 数字 / アイコン / タイトル */
.lp-page #steps .step-number {
    font-size: 4rem !important;
    margin-bottom: 10px !important;
}

.lp-page #steps .step-icon {
    margin: 15px 0 !important;
}

/* タイトル（2行想定） */
.lp-page #steps .step-title {
    font-weight: bold !important;
    font-size: 1.4rem !important;
    line-height: 1.4 !important;
    margin-bottom: 12px !important;
    min-height: 3.2em !important; /* タイトル高さを固定して縦ズレ防止 */
}

/* 説明文（高さ固定で揃える） */
.lp-page #steps .step-desc {
    font-size: 1rem !important;
    line-height: 1.6 !important;
    max-width: 260px !important;
    min-height: 4.8em !important; /* テキストが短いカードも揃える */
}

/* グリッド全体 */
.lp-page #steps .steps-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 40px !important;
    align-items: start !important;
}

/* （769px以上）の選択肢カードを横に5px拡張 */
@media (min-width: 769px) {
  #choices .grid > div {
    width: calc(100% + 20px) !important; /* 横に10px拡張（左右5pxずつ） */
  }
}

/******************************************** ********************************************/

/********************************************
  スマホ最適化（最大幅768px）
********************************************/
@media (max-width: 768px) {

  /* ------------------------------
      全体の横幅・余白調整
  ------------------------------ */
  .lp-page .container,
  .lp-page .lp-container {
    padding-left: 1.2rem !important;
    padding-right: 1.2rem !important;
  }

  /* 各セクションに十分な余白 */
  .lp-page section {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }

  /* ------------------------------
      バッジ（沖縄市専門 | 相続×不動産）
  ------------------------------ */
  .lp-page .lp-badge {
    transform: scale(0.85) !important;
    margin-bottom: 10px !important;
  }

  /* ------------------------------
      ファーストビューのタイトル
  ------------------------------ */
  .lp-page h1 {
    font-size: 1.9rem !important;
    line-height: 1.35 !important;
    white-space: normal !important;
    word-break: keep-all !important;
  }

  .lp-page h1 span {
    display: block !important;
  }

  /* ------------------------------
      ファーストビューの本文
  ------------------------------ */
  .lp-page p {
    font-size: 1rem !important;
    line-height: 1.65 !important;
  }

  /* ------------------------------
      LINEボタン（大ボタン）
  ------------------------------ */
  .lp-page button {
    font-size: 1rem !important;
    padding: 14px 24px !important;
  }

  /* ------------------------------
      メリット6個のカード
  ------------------------------ */
  #line-benefits .grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  #line-benefits .bg-white {
    padding: 20px !important;
  }

  /* ------------------------------
      「3ステップ」カードレイアウト
  ------------------------------ */
  #steps .steps-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }

  #steps .step-card {
    height: auto !important;
    padding: 30px 20px !important;
  }

  #steps .step-number {
    font-size: 3rem !important;
  }

  #steps .step-title {
    font-size: 1.3rem !important;
    min-height: auto !important;
    margin-bottom: 12px !important;
  }

  .step-desc {
    min-height: auto !important;
    font-size: 0.95rem !important;
  }

  /* ------------------------------
      「こんな悩みはありませんか？」のリスト
  ------------------------------ */
  #problems .space-y-4 > div {
    padding: 16px !important;
  }

  #problems h2 {
    font-size: 1.8rem !important;
    line-height: 1.3 !important;
  }

  /* ------------------------------
      イラスト画像の中央寄せ
  ------------------------------ */
  .lp-page img {
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 95% !important;
  }
}

/********************************************
  スマホ最終調整（全体バランス改善）
********************************************/
@media (max-width: 768px) {

  /* ▼ バッジ（沖縄市専門｜相続×不動産）を小さく */
  .lp-page .lp-badge {
    transform: scale(0.75) !important;
    margin: 0 auto 10px auto !important;
  }

  /* ▼ ファーストビュー見出し */
  #lp-inheritance-uruma-okinawa h1 {
    font-size: 1.6rem !important;
    line-height: 1.35 !important;
    margin-bottom: 12px !important;
  }

  /* ▼ リード文の行間改善 */
  #lp-inheritance-uruma-okinawa p {
    line-height: 1.7 !important;
    font-size: 0.95rem !important;
  }

  /* ▼ メリット見出しの改善 */
  #line-benefits h2 {
    font-size: 1.4rem !important;
    line-height: 1.4 !important;
    margin-bottom: 10px !important;
  }

  /* ▼ メリットカード（6つ） */
  #line-benefits .bg-white {
    padding: 18px !important;
    border-radius: 16px !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05) !important;
  }

  #line-benefits .grid {
    gap: 14px !important;
  }

  /* ▼ イラスト（女の子）—幅を少し縮める */
  .lp-page img {
    max-width: 88% !important;
  }

  /* ▼ 「こんな悩みありませんか？」 */
  #problems h2 {
    font-size: 1.4rem !important;
    line-height: 1.45 !important;
    text-align: center !important;
  }

  #problems .space-y-4 > div {
    padding: 14px !important;
    border-radius: 12px !important;
  }

  /* ▼ 各セクション余白の最適化 */
  .lp-page section {
    padding-top: 36px !important;
    padding-bottom: 36px !important;
  }
}

/********************************************
  ★スマホのステップレイアウト完全修正パッチ★
********************************************/
@media (max-width: 768px) {

  /* ▼ 高さ固定のせいで崩れる → 解除 */
  .lp-page #steps .step-card {
      height: auto !important;
      padding: 32px 20px !important;
  }

  /* ▼ スマホは絶対1列表示にする（強制優先度UP） */
  .lp-page section#steps .steps-grid {
      display: grid !important;
      grid-template-columns: 1fr !important;
      gap: 32px !important;
      width: 100% !important;
  }

  /* ▼ grid内での圧縮を防ぐ（最重要） */
  .lp-page .step-card,
  .lp-page .step-title,
  .lp-page .step-desc {
      min-width: 0 !important;
  }

  /* ▼ 数字・タイトルのサイズ最適化 */
  .lp-page #steps .step-number {
      font-size: 2.4rem !important;
      margin-bottom: 14px !important;
  }

  .lp-page #steps .step-title {
      font-size: 1.25rem !important;
      line-height: 1.45 !important;
      margin-bottom: 10px !important;
      min-height: auto !important;
  }

  .lp-page #steps .step-desc {
      font-size: 0.95rem !important;
      line-height: 1.6 !important;
      min-height: auto !important;
  }
}

/* ==========================================
   LPファーストビューの安定化パッチ
========================================== */

/* PCでは grid を強制維持 */
.lp-wide {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 40px !important;
}

/* スマホでは縦並びを維持 */
@media (max-width: 768px) {
    .lp-wide {
        display: flex !important;
        flex-direction: column !important;
    }
}

/* =======================================
   スマホのみ：画像の上に文章を重ねる
======================================= */
@media (max-width: 768px) {

  /* 画像を重ね用コンテナとして扱う */
  .hero-image-wrapper {
      position: relative !important;
  }

  /* 画像（少し暗めのマスクを追加して読みやすく） */
  .hero-image-wrapper img {
      width: 100% !important;
      height: auto !important;
      display: block !important;
      filter: brightness(0.85) !important; /* 画像を少し暗くする */
  }

  /* 文章ブロック（画像の上に重ねる） */
  .hero-text-overlay {
      position: absolute !important;
      bottom: 12% !important;      /* 画像の下の方に配置 */
      left: 50% !important;
      transform: translateX(-50%) !important;
      background: rgba(255,255,255,0.92) !important;
      padding: 18px !important;
      border-radius: 16px !important;
      width: 90% !important;
      box-shadow: 0 8px 20px rgba(0,0,0,0.10) !important;
      text-align: center !important;
  }

  /* 文章をスマホ用に最適化 */
  .hero-text-overlay h1 {
      font-size: 1.3rem !important;
      line-height: 1.45 !important;
      margin-bottom: 10px !important;
  }

  .hero-text-overlay p {
      font-size: 0.9rem !important;
      line-height: 1.55 !important;
      margin: 0 !important;
  }

  /* ボタンは画像の下にそのまま */
  .sp-fv-button {
      margin-top: 20px !important;
      text-align: center !important;
  }
}

/* =====================================================
   アニメーション定義
   ===================================================== */

/* フェードイン基本 */
.lp-fade-in,
.lp-fade-up,
.lp-fade-left,
.lp-fade-right,
.lp-scale-in {
    opacity: 0;
    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.lp-fade-up {
    transform: translateY(40px);
}

.lp-fade-left {
    transform: translateX(-40px);
}

.lp-fade-right {
    transform: translateX(40px);
}

.lp-scale-in {
    transform: scale(0.9);
}

/* 表示時 */
.lp-fade-in.lp-visible,
.lp-fade-up.lp-visible,
.lp-fade-left.lp-visible,
.lp-fade-right.lp-visible,
.lp-scale-in.lp-visible {
    opacity: 1;
    transform: translateY(0) translateX(0) scale(1);
}

/* =====================================================
   CTAボタン パルス・グロー効果
   ===================================================== */

@keyframes lp-pulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
    }
    50% {
        box-shadow: 0 0 0 15px rgba(34, 197, 94, 0);
    }
}

@keyframes lp-glow {
    0%, 100% {
        box-shadow: 0 4px 20px rgba(34, 197, 94, 0.4),
                    0 0 40px rgba(34, 197, 94, 0.2);
    }
    50% {
        box-shadow: 0 6px 30px rgba(34, 197, 94, 0.6),
                    0 0 60px rgba(34, 197, 94, 0.3);
    }
}

@keyframes lp-shimmer {
    0% {
        background-position: -200% center;
    }
    100% {
        background-position: 200% center;
    }
}

.lp-cta-pulse {
    position: relative;
    animation: lp-pulse 2s infinite, lp-glow 3s ease-in-out infinite;
    overflow: hidden;
}

.lp-cta-pulse::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.4) 50%,
        transparent 100%
    );
    background-size: 200% 100%;
    animation: lp-shimmer 3s ease-in-out infinite;
    pointer-events: none;
    border-radius: inherit;
}

/* =====================================================
   ホバーエフェクト強化
   ===================================================== */

/* カードホバー */
.lp-page .bg-white.rounded-2xl,
.lp-page .bg-white.rounded-3xl {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.lp-page .bg-white.rounded-2xl:hover,
.lp-page .bg-white.rounded-3xl:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12),
                0 0 0 1px rgba(34, 197, 94, 0.1) !important;
}

/* アイコンホバーアニメーション */
.lp-page .bg-white.rounded-2xl:hover .ri-phone-line,
.lp-page .bg-white.rounded-2xl:hover .ri-time-line,
.lp-page .bg-white.rounded-2xl:hover .ri-robot-2-line,
.lp-page .bg-white.rounded-2xl:hover .ri-camera-line,
.lp-page .bg-white.rounded-2xl:hover .ri-lock-line,
.lp-page .bg-white.rounded-2xl:hover .ri-heart-line {
    animation: lp-icon-bounce 0.5s ease;
}

@keyframes lp-icon-bounce {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
}

/* チェックマークアイコンのホバー */
.lp-page .ri-checkbox-circle-fill {
    transition: transform 0.3s ease;
}

.lp-page .flex.items-start:hover .ri-checkbox-circle-fill {
    transform: scale(1.15);
}

/* ボタンホバー強化 */
.lp-page a.rounded-full {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.lp-page a.rounded-full:hover {
    transform: translateY(-4px) scale(1.02) !important;
}

/* =====================================================
   ヒーローセクション スタイル
   ===================================================== */

/* 即座に表示（アニメーションなし） */
.lp-page section:first-of-type .space-y-8 {
    opacity: 1;
}

.lp-page .hero-image-wrapper {
    opacity: 1;
}

/* ヒーローテキストの視認性向上 */
.hero-text-shadow {
    text-shadow:
        0 2px 4px rgba(0, 0, 0, 0.5),
        0 4px 8px rgba(0, 0, 0, 0.3),
        0 8px 16px rgba(0, 0, 0, 0.2);
}

.hero-text-shadow-light {
    text-shadow:
        0 1px 3px rgba(0, 0, 0, 0.6),
        0 2px 6px rgba(0, 0, 0, 0.3);
}

/* =====================================================
   ファーストビュー見出しの視認性強化（シャープな縁取り）
   ===================================================== */
.lp-page section:first-of-type h1 {
    text-shadow:
        1px 1px 0 rgba(0, 0, 0, 0.6),
        -1px -1px 0 rgba(0, 0, 0, 0.6),
        1px -1px 0 rgba(0, 0, 0, 0.6),
        -1px 1px 0 rgba(0, 0, 0, 0.6),
        2px 2px 3px rgba(0, 0, 0, 0.4);
}

.lp-page section:first-of-type h1 .text-green-400,
.lp-page section:first-of-type h1 .text-green-600 {
    text-shadow: none !important;
}

/* ファーストビューのリード文の視認性強化 */
.lp-page section:first-of-type .space-y-8 > p {
    text-shadow:
        1px 1px 0 rgba(0, 0, 0, 0.5),
        -1px -1px 0 rgba(0, 0, 0, 0.5),
        1px -1px 0 rgba(0, 0, 0, 0.5),
        -1px 1px 0 rgba(0, 0, 0, 0.5);
}

/* ファーストビューの緑色テキストの視認性強化 */
.lp-page section:first-of-type .text-green-300 {
    text-shadow: none !important;
}

/* エリアタイトル（沖縄市安慶田）のテキストシャドウ */
.lp-page .hero-area-title h2 {
    text-shadow:
        1px 1px 0 rgba(0, 0, 0, 0.5),
        -1px -1px 0 rgba(0, 0, 0, 0.5),
        1px -1px 0 rgba(0, 0, 0, 0.5),
        -1px 1px 0 rgba(0, 0, 0, 0.5),
        2px 2px 2px rgba(0, 0, 0, 0.3) !important;
}

/* 「相続 × 不動産」グラデーションテキストはシャドウなし（ぼやけ防止） */
.lp-page .hero-area-title .area-main-text span[style*="background-clip"] {
    text-shadow: none !important;
    filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.3)) !important;
}

/* 1行目（相続した方も）は黒縁あり - インラインスタイルを維持 */

/* サブテキストとラベルのシャドウ */
.lp-page .hero-area-title p {
    text-shadow:
        0 0 6px rgba(0, 0, 0, 0.7),
        0 0 12px rgba(0, 0, 0, 0.5),
        1px 1px 3px rgba(0, 0, 0, 0.4);
}

/* 信頼バッジのテキストシャドウ */
.lp-page .hero-section .text-white\/80,
.lp-page .hero-section .text-white {
    text-shadow:
        0 0 6px rgba(0, 0, 0, 0.7),
        0 0 12px rgba(0, 0, 0, 0.5),
        1px 1px 3px rgba(0, 0, 0, 0.4);
}

/* CTAボタン下のテキスト */
.lp-page .hero-section .text-white\/70 {
    text-shadow:
        0 0 6px rgba(0, 0, 0, 0.7),
        1px 1px 3px rgba(0, 0, 0, 0.5);
}

/* =====================================================
   ファーストビューテキストエリア（枠なし）
   ===================================================== */
.lp-page section:first-of-type .space-y-8 {
    position: relative;
    z-index: 5;
    padding: 30px;
    border-radius: 0;
    background: transparent;
    backdrop-filter: none;
    box-shadow: none;
}

/* グリーンテキスト - 縁取りなし */
.hero-section .text-green-400 {
    text-shadow: none !important;
}

.hero-section .text-green-300 {
    text-shadow: none !important;
}

/* =====================================================
   デザイン改善：色・グラデーション
   ===================================================== */

/* より洗練されたグラデーション背景 */
.lp-page section.bg-gradient-to-br {
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 1) 0%,
        rgba(240, 253, 244, 0.5) 50%,
        rgba(220, 252, 231, 0.3) 100%
    ) !important;
}

/* セクション間の区切りをより滑らかに */
.lp-page section {
    position: relative;
}

.lp-page section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(34, 197, 94, 0.2) 50%,
        transparent 100%
    );
}

/* =====================================================
   カードデザイン改善
   ===================================================== */

/* メリットカードの強化 */
.lp-page #line-benefits .bg-white.rounded-2xl {
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 1) 0%,
        rgba(240, 253, 244, 0.3) 100%
    ) !important;
    border: 1px solid rgba(34, 197, 94, 0.15) !important;
}

/* 実績カードの強化 */
.lp-page #cases .bg-white.rounded-2xl {
    position: relative;
    overflow: hidden;
}

.lp-page #cases .bg-white.rounded-2xl::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #22c55e, #16a34a);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.lp-page #cases .bg-white.rounded-2xl:hover::before {
    opacity: 1;
}

/* お客様の声カードの強化 */
.lp-page #testimonials .bg-white.rounded-2xl {
    border-left: 4px solid transparent;
    transition: all 0.3s ease !important;
}

.lp-page #testimonials .bg-white.rounded-2xl:hover {
    border-left-color: #22c55e;
}

/* =====================================================
   ステップセクション デザイン強化
   ===================================================== */

.lp-page .step-card {
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 1) 0%,
        rgba(240, 253, 244, 0.5) 100%
    ) !important;
    border: 2px solid rgba(34, 197, 94, 0.2) !important;
    border-radius: 24px !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.lp-page .step-card:hover {
    border-color: rgba(34, 197, 94, 0.5) !important;
    transform: translateY(-5px) !important;
    box-shadow: 0 15px 40px rgba(34, 197, 94, 0.15) !important;
}

.lp-page .step-number {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 900 !important;
}

.lp-page .step-icon {
    color: #22c55e !important;
    font-size: 3.5rem !important;
    transition: transform 0.3s ease;
}

.lp-page .step-card:hover .step-icon {
    transform: scale(1.1);
}

/* =====================================================
   選択肢セクション 色分け強化
   ===================================================== */

.lp-page #choices .h-2.bg-blue-400 {
    background: linear-gradient(90deg, #60a5fa, #3b82f6) !important;
}

.lp-page #choices .h-2.bg-orange-400 {
    background: linear-gradient(90deg, #fb923c, #f97316) !important;
}

.lp-page #choices .h-2.bg-green-400 {
    background: linear-gradient(90deg, #4ade80, #22c55e) !important;
}

/* =====================================================
   CTAセクション デザイン強化
   ===================================================== */

.lp-page #line-cta .bg-gradient-to-br,
.lp-page #final-cta {
    background: linear-gradient(
        135deg,
        #22c55e 0%,
        #16a34a 50%,
        #15803d 100%
    ) !important;
}

/* LINE CTAセクションの見出しサイズ調整 */
#line-cta h2 {
    font-size: 2.5rem !important;  /* PC: 1行表示用 */
}

@media (max-width: 1023px) {
    #line-cta h2 {
        font-size: 1.5rem !important;  /* モバイル: 1行表示用 */
    }
}

/* 装飾円のアニメーション */
.lp-page #line-cta .bg-white\/5,
.lp-page #final-cta .bg-white\/5 {
    animation: lp-float 8s ease-in-out infinite;
}

/* =====================================================
   フローティングCTA
   ===================================================== */

.lp-floating-cta {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.3s ease;
    pointer-events: none;
}

.lp-floating-cta.lp-floating-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* =====================================================
   星評価のキラキラ効果
   ===================================================== */

@keyframes lp-star-twinkle {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.8; transform: scale(1.1); }
}

.lp-page .ri-star-fill {
    animation: lp-star-twinkle 2s ease-in-out infinite;
}

.lp-page .ri-star-fill:nth-child(2) { animation-delay: 0.1s; }
.lp-page .ri-star-fill:nth-child(3) { animation-delay: 0.2s; }
.lp-page .ri-star-fill:nth-child(4) { animation-delay: 0.3s; }
.lp-page .ri-star-fill:nth-child(5) { animation-delay: 0.4s; }

/* =====================================================
   引用符の装飾強化
   ===================================================== */

.lp-page .ri-double-quotes-l {
    background: linear-gradient(135deg, #bbf7d0, #86efac);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* =====================================================
   フッター改善
   ===================================================== */

.lp-page footer {
    background: linear-gradient(
        180deg,
        #14532d 0%,
        #052e16 100%
    ) !important;
}

.lp-page footer a:hover {
    transform: translateX(3px);
    transition: transform 0.2s ease;
}

/* =====================================================
   スマホ対応
   ===================================================== */

@media (max-width: 768px) {
    /* アニメーションを軽量化 */
    .lp-fade-up {
        transform: translateY(20px);
    }

    .lp-cta-pulse::before {
        display: none; /* シマー効果をオフ */
    }

    /* フローティングCTAの位置調整 */
    .lp-floating-cta {
        bottom: 10px;
        right: 10px;
        left: 10px;
    }

    /* ホバーエフェクトを無効化（タッチデバイス） */
    .lp-page .bg-white.rounded-2xl:hover,
    .lp-page .bg-white.rounded-3xl:hover {
        transform: none !important;
    }
}

/* =====================================================
   ページロードアニメーション
   ===================================================== */

@keyframes lp-page-load {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.lp-page {
    animation: lp-page-load 0.5s ease-out;
}

/* =====================================================
   スクロールバーのカスタマイズ
   ===================================================== */

.lp-page::-webkit-scrollbar {
    width: 8px;
}

.lp-page::-webkit-scrollbar-track {
    background: #f1f5f9;
}

.lp-page::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #22c55e, #16a34a);
    border-radius: 4px;
}

.lp-page::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #16a34a, #15803d);
}

/* =====================================================
   パーティクル（キラキラ光の粒子）アニメーション
   ===================================================== */

/* 親要素にposition: relativeを確保 */
.hero-image-wrapper,
.hero-image-inner {
    position: relative !important;
}

/* パーティクルコンテナ */
.hero-particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: visible;
    z-index: 10;
    border-radius: 1.5rem;
}

/* パーティクル（光の粒子） */
.particle {
    position: absolute;
    width: 10px;
    height: 10px;
    background: rgba(255, 215, 0, 0.9);
    border-radius: 50%;
    animation: particle-float 6s ease-in-out infinite;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.8), 0 0 30px rgba(255, 215, 0, 0.4);
}

/* パーティクルのサイズバリエーション */
.particle.small {
    width: 4px;
    height: 4px;
}

.particle.medium {
    width: 8px;
    height: 8px;
}

.particle.large {
    width: 12px;
    height: 12px;
}

/* パーティクルの色バリエーション */
.particle.gold {
    background: radial-gradient(circle, rgba(255, 215, 0, 1) 0%, rgba(255, 215, 0, 0) 70%);
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

.particle.green {
    background: radial-gradient(circle, rgba(134, 239, 172, 1) 0%, rgba(134, 239, 172, 0) 70%);
    box-shadow: 0 0 10px rgba(134, 239, 172, 0.5);
}

.particle.white {
    background: radial-gradient(circle, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 70%);
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

.particle.cyan {
    background: radial-gradient(circle, rgba(103, 232, 249, 1) 0%, rgba(103, 232, 249, 0) 70%);
    box-shadow: 0 0 10px rgba(103, 232, 249, 0.5);
}

/* パーティクルの浮遊アニメーション */
@keyframes particle-float {
    0% {
        opacity: 0.8;
        transform: translateY(0) scale(1);
    }
    50% {
        opacity: 1;
        transform: translateY(-50px) scale(1.2);
    }
    100% {
        opacity: 0.8;
        transform: translateY(0) scale(1);
    }
}

/* キラキラ点滅アニメーション */
@keyframes particle-twinkle {
    0%, 100% {
        opacity: 0.3;
        transform: scale(0.8);
    }
    50% {
        opacity: 1;
        transform: scale(1.2);
    }
}

/* 漂うアニメーション（横揺れ付き） */
@keyframes particle-drift {
    0% {
        opacity: 0;
        transform: translate(0, 100%) scale(0);
    }
    10% {
        opacity: 1;
    }
    25% {
        transform: translate(15px, 50%) scale(1);
    }
    50% {
        transform: translate(-10px, 0) scale(0.9);
    }
    75% {
        transform: translate(20px, -50%) scale(1.1);
    }
    90% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translate(-5px, -100%) scale(0);
    }
}

/* 個別パーティクルのアニメーション遅延とバリエーション */
.particle:nth-child(1) { left: 10%; animation-delay: 0s; animation-duration: 5s; }
.particle:nth-child(2) { left: 20%; animation-delay: 0.5s; animation-duration: 6s; animation-name: particle-drift; }
.particle:nth-child(3) { left: 30%; animation-delay: 1s; animation-duration: 5.5s; }
.particle:nth-child(4) { left: 40%; animation-delay: 1.5s; animation-duration: 7s; animation-name: particle-drift; }
.particle:nth-child(5) { left: 50%; animation-delay: 2s; animation-duration: 4.5s; }
.particle:nth-child(6) { left: 60%; animation-delay: 2.5s; animation-duration: 6.5s; animation-name: particle-drift; }
.particle:nth-child(7) { left: 70%; animation-delay: 3s; animation-duration: 5s; }
.particle:nth-child(8) { left: 80%; animation-delay: 3.5s; animation-duration: 7.5s; animation-name: particle-drift; }
.particle:nth-child(9) { left: 90%; animation-delay: 4s; animation-duration: 6s; }
.particle:nth-child(10) { left: 15%; animation-delay: 0.3s; animation-duration: 5.2s; animation-name: particle-drift; }
.particle:nth-child(11) { left: 25%; animation-delay: 0.8s; animation-duration: 6.3s; }
.particle:nth-child(12) { left: 35%; animation-delay: 1.3s; animation-duration: 5.8s; animation-name: particle-drift; }
.particle:nth-child(13) { left: 45%; animation-delay: 1.8s; animation-duration: 6.8s; }
.particle:nth-child(14) { left: 55%; animation-delay: 2.3s; animation-duration: 5.3s; animation-name: particle-drift; }
.particle:nth-child(15) { left: 65%; animation-delay: 2.8s; animation-duration: 7.3s; }
.particle:nth-child(16) { left: 75%; animation-delay: 3.3s; animation-duration: 4.8s; animation-name: particle-drift; }
.particle:nth-child(17) { left: 85%; animation-delay: 3.8s; animation-duration: 6.8s; }
.particle:nth-child(18) { left: 5%; animation-delay: 4.3s; animation-duration: 5.8s; animation-name: particle-drift; }
.particle:nth-child(19) { left: 95%; animation-delay: 4.8s; animation-duration: 7s; }
.particle:nth-child(20) { left: 50%; animation-delay: 0.2s; animation-duration: 6.2s; animation-name: particle-drift; }

/* スマホ対応 - パーティクルを軽量化 */
@media (max-width: 768px) {
    .particle:nth-child(n+11) {
        display: none; /* スマホでは10個に制限 */
    }

    .particle {
        animation-duration: 8s !important; /* スマホではゆっくり */
    }
}

/* パフォーマンス最適化 */
@media (prefers-reduced-motion: reduce) {
    .particle {
        animation: none;
        opacity: 0.5;
    }
}

/* =====================================================
   ローディング画面（パーティクルアニメーション）
   ===================================================== */

/* サイト全体を表示 */
.lp-page {
    opacity: 1;
    visibility: visible;
}

.lp-loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 99999;
    transition: opacity 0.8s ease, visibility 0.8s ease;
    overflow: hidden;
}

.lp-loading-overlay.hide {
    opacity: 0;
    visibility: hidden;
}

/* パーティクルCanvas */
#particle-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

/* ローディングテキスト */
.lp-loader-text {
    position: absolute;
    bottom: 15%;
    left: 50%;
    transform: translateX(-50%);
    color: #86efac;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    animation: lp-text-fade 1.5s ease-in-out infinite;
    z-index: 10;
}

@keyframes lp-text-fade {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

/* スマホ対応 */
@media (max-width: 768px) {
    .lp-loader-text {
        font-size: 12px;
        letter-spacing: 2px;
        bottom: 20%;
    }
}

/* =====================================================
   タイプライターアニメーション用 初期非表示
   ===================================================== */

/* タイプライター対象テキスト - 最初から非表示 */
.lp-page .hero-section .hero-area-title .area-main-text span {
    visibility: hidden;
}

.lp-page .hero-section h1 span.block {
    visibility: hidden;
}

/* 残りの要素 - 最初から非表示 */
.lp-page .hero-section .hero-area-title > div:first-child,
.lp-page .hero-section .hero-area-title > p,
.lp-page .hero-section p.text-lg,
.lp-page .hero-section p.text-base,
.lp-page .hero-section .max-w-4xl > p,
.lp-page .hero-section .flex.flex-col.sm\:flex-row,
.lp-page .hero-section .text-white\/70,
.lp-page .hero-section .text-white\/60,
.lp-page .hero-section .border-t {
    opacity: 0;
    transform: translateY(20px);
}

/* JavaScriptで表示する時のトランジション */
.lp-page .hero-section .hero-show {
    opacity: 1 !important;
    transform: translateY(0) !important;
    transition: opacity 0.6s ease, transform 0.6s ease !important;
}

/* =====================================================
   タイプライター中央→左移動アニメーション
   ===================================================== */

/* テキストコンテナ - 常に左揃え、位置だけ移動 */
.lp-page .hero-section .max-w-3xl,
.lp-page .hero-section .max-w-4xl {
    position: relative;
    transform: translateX(0);
}

/* タイプライター中は中央に配置 */
.lp-page .hero-section.typewriter-center .max-w-3xl,
.lp-page .hero-section.typewriter-center .max-w-4xl {
    transform: translateX(calc(50vw - 50%));
}

/* タイプライター完了後（動画表示時）、左に滑らかに移動（少しスペースを残す） */
.lp-page .hero-section.typewriter-done .max-w-3xl,
.lp-page .hero-section.typewriter-done .max-w-4xl {
    transform: translateX(3rem);
    transition: transform 1.2s cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* =====================================================
   タイプライター中の黒背景 → 移動完了後に動画表示
   ===================================================== */

/* ヒーローセクションの背景を黒に（タイプライター中） */
.lp-page .hero-section {
    background-color: #000 !important;
}

/* 背景画像/動画を最初は非表示 */
.lp-page .hero-section .hero-split-container,
.lp-page .hero-section .hero-video-container {
    opacity: 0;
    transition: opacity 1.5s ease;
}

/* 移動完了後に背景（動画）を表示 */
.lp-page .hero-section.background-reveal .hero-split-container,
.lp-page .hero-section.background-reveal .hero-video-container {
    opacity: 1;
}

/* =====================================================
   ヒーローセクション 左右分割レイアウト
   ===================================================== */

/* ヒーローセクションを画面高さに収める */
.lp-page .hero-section {
    height: 100vh !important;
    max-height: 100vh !important;
    min-height: auto !important;
    overflow: hidden !important;
}

/* ヒーローセクション内のコンテンツを画面に収める */
.lp-page .hero-section > .container {
    padding-top: 1.5rem !important;
    padding-bottom: 1rem !important;
}

/* テキストを白に戻し、シャープな縁取りで可読性向上 */
.lp-page .hero-section h1,
.lp-page .hero-section .max-w-3xl p,
.lp-page .hero-section .text-white,
.lp-page .hero-section .border-t span {
    color: #fff !important;
    text-shadow:
        -1px -1px 0 #000,
        1px -1px 0 #000,
        -1px 1px 0 #000,
        1px 1px 0 #000 !important;
}

.lp-page .hero-section h1 .text-green-400 {
    color: #4ade80 !important;
    text-shadow: none !important;
}

/* 4行目（相続不動産、どうしていますか？）緑文字に黒縁あり */
.lp-page .hero-section h1 span.block:nth-child(2) {
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
}

.lp-page .hero-section .max-w-3xl .text-green-300 {
    color: #86efac !important;
    text-shadow: none !important;
}

/* エリアタイトルの縁取り */
.lp-page .hero-area-title h2 span {
    text-shadow:
        -1px -1px 0 #000,
        1px -1px 0 #000,
        -1px 1px 0 #000,
        1px 1px 0 #000 !important;
}

/* 「これから相続するかもしれない方も・・・」に黒縁あり */
.lp-page .hero-area-title .area-main-text span:nth-child(2) {
    color: #4ade80 !important;
    background: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    -webkit-text-fill-color: #4ade80 !important;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
}

/* 下線も調整 */
.lp-page .hero-area-title .area-main-text span:nth-child(2) span {
    background: #4ade80 !important;
}

/* 信頼バッジ */
.lp-page .hero-section .border-t {
    border-color: rgba(255, 255, 255, 0.3) !important;
}

/* CTAボタン下のテキスト */
.lp-page .hero-section .text-white\/70 {
    color: rgba(255, 255, 255, 0.9) !important;
    text-shadow:
        -1px -1px 0 #000,
        1px -1px 0 #000,
        -1px 1px 0 #000,
        1px 1px 0 #000 !important;
}

/* エリアタイトルのマージン調整 */
.lp-page .hero-area-title {
    margin-bottom: 1rem !important;
}

.lp-page .hero-area-title h2 {
    font-size: clamp(1rem, 2vw, 1.5rem) !important;
}

/* メインコピーのサイズ調整 */
.lp-page .hero-section h1 {
    font-size: clamp(1.5rem, 3.5vw, 3rem) !important;
    margin-bottom: 0.75rem !important;
    line-height: 1.3 !important;
}

/* リード文の調整 */
.lp-page .hero-section > .container .max-w-2xl {
    margin-bottom: 1rem !important;
}

.lp-page .hero-section > .container .max-w-2xl,
.lp-page .hero-section > .container p.text-lg {
    font-size: clamp(0.9rem, 1.5vw, 1.1rem) !important;
    line-height: 1.5 !important;
    margin-bottom: 0.75rem !important;
}

/* CTAボタンの調整 */
.lp-page .hero-section .flex.flex-col.gap-4 {
    gap: 0.5rem !important;
}

.lp-page .hero-section a.rounded-full {
    padding: 0.75rem 2rem !important;
    font-size: 1rem !important;
}

/* 信頼バッジの調整 */
.lp-page .hero-section .border-t {
    margin-top: 0.75rem !important;
    padding-top: 0.75rem !important;
    gap: 1rem !important;
}

.lp-page .hero-section .border-t .text-sm {
    font-size: 0.8rem !important;
}

/* スクロールインジケーター非表示（画面に収めるため） */
.lp-page .hero-section > .absolute.bottom-8 {
    display: none !important;
}

.hero-section .hero-split-container {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    display: flex !important;
    width: 100% !important;
    height: 100% !important;
}

.hero-section .hero-split-left,
.hero-section .hero-split-right {
    width: 50% !important;
    height: 100% !important;
    position: relative !important;
    flex-shrink: 0 !important;
    background-color: #fff !important;
}

.hero-section .hero-split-left img,
.hero-section .hero-split-right img,
.hero-section .hero-split-left video,
.hero-section .hero-split-right video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    max-width: none !important;
    margin: 0 !important;
}

/* 左側の画像 */
.hero-section .hero-split-left img {
    opacity: 1 !important;
}

/* 境目の白いグラデーションを非表示 */
.hero-section .hero-split-left > div:last-child,
.hero-section .hero-split-right > div:last-child {
    display: none !important;
}

/* 左側にグラデーションオーバーレイ（左から右に薄くなる） */
.hero-section .hero-split-left .hero-overlay {
    background: linear-gradient(to right, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.2) 70%, rgba(0, 0, 0, 0) 100%) !important;
}

/* 右側（動画）にも逆グラデーション（境目をぼかす） */
.hero-section .hero-split-right .hero-overlay {
    background: linear-gradient(to left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 80%, rgba(0, 0, 0, 0.15) 100%) !important;
}

.hero-section .hero-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 1 !important;
}

/* 画像と動画の境目をグラデーションでぼかす（少しグレーがかった色） */
.hero-section .hero-split-left::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    width: 300px !important;
    height: 100% !important;
    background: linear-gradient(to right, transparent 0%, rgba(200,200,200,1) 100%) !important;
    z-index: 2 !important;
    pointer-events: none !important;
}

.hero-section .hero-split-right::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 300px !important;
    height: 100% !important;
    background: linear-gradient(to left, transparent 0%, rgba(200,200,200,1) 100%) !important;
    z-index: 2 !important;
    pointer-events: none !important;
}

/* スマホ対応：縦並びに変更（動画を上に） */
@media (max-width: 768px) {
    .hero-section .hero-split-container {
        flex-direction: column-reverse !important;
    }

    .hero-section .hero-split-left,
    .hero-section .hero-split-right {
        width: 100% !important;
        height: 50% !important;
    }

    /* スマホ用タイプライター配置修正 */
    .lp-page .hero-section.typewriter-center .max-w-3xl {
        transform: translateX(0) !important;
    }

    .lp-page .hero-section .max-w-3xl {
        padding: 15px !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* ヒーローセクションのコンテンツ配置 */
    .lp-page .hero-section > .container {
        padding: 10px 15px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        padding-top: 60px !important;
        height: 100% !important;
    }

    /* 「相続×不動産」テキストのスマホ対応 */
    .lp-page .hero-area-title {
        margin-bottom: 10px !important;
    }

    .lp-page .hero-area-title .area-main-text {
        font-size: 1.5rem !important;
        line-height: 1.4 !important;
    }

    .lp-page .hero-area-title .area-main-text span:first-child {
        font-size: 1.2rem !important;
        margin-bottom: 4px !important;
        display: block !important;
    }

    .lp-page .hero-area-title .area-main-text span:nth-child(2) {
        font-size: 1.3rem !important;
        display: block !important;
        white-space: nowrap !important;
        letter-spacing: 0.02em !important;
    }

    /* 下線を調整 */
    .lp-page .hero-area-title .area-main-text span:nth-child(2) span {
        height: 3px !important;
        bottom: -2px !important;
    }

    /* メインコピーのスマホ対応 */
    .lp-page .hero-section h1 {
        font-size: 1.3rem !important;
        line-height: 1.4 !important;
        margin-bottom: 10px !important;
    }

    /* リード文のスマホ対応 */
    .lp-page .hero-section p.text-lg {
        font-size: 0.85rem !important;
        line-height: 1.5 !important;
        margin-bottom: 10px !important;
    }

    /* CTAボタンのスマホ対応 */
    .lp-page .hero-section a.rounded-full {
        padding: 12px 20px !important;
        font-size: 0.9rem !important;
    }

    /* 信頼バッジのスマホ対応 */
    .lp-page .hero-section .border-t {
        margin-top: 10px !important;
        padding-top: 10px !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    .lp-page .hero-section .border-t > div {
        font-size: 0.75rem !important;
    }

    /* 境目のグラデーションをスマホでは非表示 */
    .hero-section .hero-split-left::after,
    .hero-section .hero-split-right::before {
        display: none !important;
    }
}

/* =====================================================
   選択肢カード スクロールアニメーション
   ===================================================== */

/* 初期状態：非表示・縮小・下にずれた状態 */
.choices-card {
    opacity: 0;
    transform: translate3d(0, 40px, 0) scale3d(0.8, 0.8, 1);
    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    transition-delay: calc(var(--card-delay, 0) * 0.15s);
}

/* 表示状態：フェードイン＋スケールアップ */
.choices-card.animated {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
}

/* ホバー時の追加効果 */
.choices-card.animated:hover {
    transform: translate3d(0, -10px, 0) scale3d(1.02, 1.02, 1);
}

/* =====================================================
   Readdyロゴボタン非表示
   ===================================================== */
#watermark,
#readdy-logo,
.readdy-logo,
[class*="readdy-"],
[id*="readdy-"],
a[href*="readdy.ai"][class*="fixed"],
iframe[src*="readdy"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}