/* 
 * 物件整形LP専用スタイルシート (隔離スコープ版)
 */

.bukken-lp-scoped {
  --lp-gold: #bfa46f;
  --lp-teal: #00a0a0;
  --lp-stucco: #faf9f6;
  --lp-ink: #1a1a1a;
  background-color: var(--lp-stucco);
  color: var(--lp-ink);
  font-family: "Noto Serif JP", serif;
  line-height: 1.8; /* 読みやすくするため少し広げる */
  overflow-x: hidden;
  position: relative;
  z-index: 100;
}

/* 【ゴシック体】見出し・ラベル・強調・数値 */
.bukken-lp-scoped h1,
.bukken-lp-scoped h2,
.bukken-lp-scoped h3,
.bukken-lp-scoped h4,
.bukken-lp-scoped h5,
.bukken-lp-scoped h6,
.bukken-lp-scoped .lp-label,
.bukken-lp-scoped .lp-category,
.bukken-lp-scoped .lp-step-num,
.bukken-lp-scoped .lp-metric-value,
.bukken-lp-scoped .lp-hero-sub,
.bukken-lp-scoped input,
.bukken-lp-scoped select,
.bukken-lp-scoped textarea,
.bukken-lp-scoped .font-sans-jp {
  font-family: "Noto Sans JP", sans-serif !important;
}

/* 隔離リセットと横幅制御 */
.bukken-lp-scoped * {
  box-sizing: border-box;
}
.bukken-lp-scoped img {
  max-width: 100%;
  height: auto;
  display: block;
  border: none;
}
.bukken-lp-scoped a {
  text-decoration: none;
  color: inherit;
}

/* 見出しサイズのテーマ上書き強制 */
.bukken-lp-scoped h1 {
  font-size: clamp(4rem, 12vw, 11rem) !important;
}
.bukken-lp-scoped h2 {
  font-size: clamp(3rem, 8vw, 7rem) !important;
}
.bukken-lp-scoped h3 {
  font-size: clamp(2.5rem, 6vw, 6rem) !important;
}

/* レイアウト補正 */
.bukken-lp-scoped .vertical-text {
  writing-mode: vertical-rl;
  text-orientation: mixed;
}

.bukken-lp-scoped .hero-overlay {
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.05) 0%,
    rgba(0, 0, 0, 0.4) 100%
  );
}

.bukken-lp-scoped .descent-gradient {
  background: linear-gradient(
    180deg,
    var(--lp-stucco) 0%,
    #dcdcdc 50%,
    var(--lp-ink) 100%
  );
}

/* アニメーション */
@keyframes lp-slow-zoom {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.08);
  }
}
.bukken-lp-scoped .animate-slow-zoom {
  animation: lp-slow-zoom 30s ease-in-out infinite alternate;
}

@keyframes lp-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}
.bukken-lp-scoped .animate-pulse-slow {
  animation: lp-pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* スクロール連動 */
.bukken-lp-scoped .reveal-on-scroll {
  opacity: 0;
  transform: translateY(40px);
  transition: all 1.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.bukken-lp-scoped .reveal-on-scroll.active {
  opacity: 1;
  transform: translateY(0);
}

/* フォーム補正 */
.bukken-lp-scoped input,
.bukken-lp-scoped textarea,
.bukken-lp-scoped select {
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  font-size: 1.25rem !important;
}

/* ページ全体が横に広がりすぎるのを防ぐためのユーティリティ */
.bukken-lp-scoped .max-w-lp-container {
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
}

/* --------------------------------------------------
   Insight Section 修正 (React版完全移植)
-------------------------------------------------- */

/* Stickyを殺さないための設定 */
.bukken-lp-scoped {
  overflow-x: clip; /* clipを使うことでstickyを維持 */
}

/* React版 style_new.css からの移植 */
.bukken-lp-scoped .descent-gradient {
  /* 画像1枚目(白)から4枚目(黒)への推移を線形グラデーションで作成 */
  background: linear-gradient(
    180deg,
    #faf9f6 0%,
    #dcdcdc 50%,
    #1a1a1a 100%
  ) !important;
}

/* スクロールで色が浮かび上がるテキストの調整 */
.bukken-lp-scoped .insight-highlight-text {
  color: #94a3b8; /* 初期の薄いグレー */
}

/* セクションがactiveになった際、あるいは要素が浮き出た際の色の変化 */
.bukken-lp-scoped .insight-section-wrap.active .insight-highlight-text {
  color: #cbd5e1 !important; /* 背景が暗くなると白に近づく */
  text-shadow: 0 0 20px rgba(255, 255, 255, 0.1);
}

/* Stickyの強制適用 */
@media (min-width: 1024px) {
  .bukken-lp-scoped .lg\:sticky {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 20vh !important;
    z-index: 20;
  }
}

/* 隔離スコープ内の既存スタイル上書き */
.bukken-lp-scoped section {
  overflow: visible !important; /* Stickyのために必須 */
}

/* --------------------------------------------------
   Characteristic 01 垂直整列の強制
-------------------------------------------------- */

.bukken-lp-scoped .section-ch-01 .grid {
  align-items: center !important; /* 左右の高さのバランスをとる */
}

/* 左端の開始線を物理的に一致させる */
.bukken-lp-scoped .section-ch-01 h3,
.bukken-lp-scoped .section-ch-01 .border-l-lpTeal,
.bukken-lp-scoped .section-ch-01 p {
  margin-left: 0 !important;
}

/* スマホでの表示を整える */
@media (max-width: 768px) {
  .bukken-lp-scoped .section-ch-01 h3 {
    font-size: 3rem !important;
  }
}