/* ============================================================
   RoomDrop LP — C×D Hybrid v5.1
   index.html 専用スタイル。base.html の Tailwind (output.css) とは独立。
   GSAP + ScrollTrigger + Lenis でモーション制御。
   ============================================================ */

:root {
  /* CSS 変数化: input.css の --rd-*-rgb を継承（フォールバックは G3 デフォルト = ブルーグレー × ソフトオレンジ × スカイブルー、2026-05-21 採用） */
  --rd-primary: rgb(var(--rd-primary-rgb, 100 116 139));        /* #64748B slate-500 */
  --rd-primary-dark: rgb(var(--rd-primary-dark-rgb, 51 65 85)); /* #334155 slate-700 */
  --rd-primary-bg: rgb(var(--rd-primary-bg-rgb, 241 245 249));  /* #F1F5F9 slate-100 */
  --rd-accent: rgb(var(--rd-accent-rgb, 251 146 60));           /* #FB923C orange-400 */
  --rd-accent-dark: rgb(var(--rd-accent-dark-rgb, 234 88 12));  /* #EA580C orange-600 */
  --rd-secondary: rgb(var(--rd-secondary-rgb, 14 165 233));     /* #0EA5E9 sky-500 */
  --rd-secondary-dark: rgb(var(--rd-secondary-dark-rgb, 3 105 161)); /* #0369A1 sky-700 */
  /* voice avatar (`.lp-voice-card-avatar`) で使用。sky 12% で testimonial の信頼・透明感を表現 */
  --rd-secondary-bg: rgb(var(--rd-secondary-rgb, 14 165 233) / 0.12);
  --rd-text: rgb(var(--rd-text-rgb, 15 23 42));                 /* #0F172A slate-900 */
  --rd-text-light: rgb(var(--rd-text-light-rgb, 100 116 139));  /* #64748B (primary と共通) */
  --rd-bg: rgb(var(--rd-bg-rgb, 241 245 249));                  /* #F1F5F9 slate-100 */
  --rd-border: rgb(var(--rd-border-rgb, 203 213 225));          /* #CBD5E1 slate-300 */
  --rd-white: #FFFFFF;
}

/* ── Reset (LP scope) ── */
.lp *, .lp *::before, .lp *::after { margin: 0; padding: 0; box-sizing: border-box; }
.lp { font-family: 'Lato', 'Noto Sans JP', -apple-system, BlinkMacSystemFont, sans-serif; color: var(--rd-text); background: var(--rd-white); -webkit-font-smoothing: antialiased; }
.lp a { text-decoration: none; color: inherit; }
.lp img { display: block; max-width: 100%; }
/* .lp-nav は LP scope (.lp) 外でも単独で動かす (= legal/error 等で同じ nav partial を使用)、 anchor reset を nav scope でも適用 */
.lp-nav a { text-decoration: none; color: inherit; }

/* ── Lenis ── */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

/* ============================================================
   Nav
   ============================================================ */
.lp-nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 clamp(24px, 5vw, 48px); height: 56px;
  background: var(--rd-white);
  position: sticky; top: 0; z-index: 100;
  transition: box-shadow 0.3s, border-color 0.3s;
  border-bottom: 1px solid transparent;
}
.lp-nav--scrolled {
  border-bottom-color: var(--rd-border);
  box-shadow: 0 1px 12px rgba(0,0,0,0.04);
}
.lp-nav .logo { display: inline-flex; align-items: center; line-height: 0; flex-shrink: 0; }
.lp-nav .logo img { height: 28px; width: auto; display: block; }
.lp-nav-links { display: flex; gap: 12px; align-items: center; flex-shrink: 0; }
.lp-nav-links a { white-space: nowrap; }
.lp-nav a.lp-nav-login {
  font-size: 14px; color: var(--rd-primary); font-weight: 700;
  padding: 10px 20px; border-radius: 8px;
  border: 1.5px solid var(--rd-primary);
  background: transparent;
  transition: background 0.2s, color 0.2s;
}
.lp-nav a.lp-nav-login:hover { background: var(--rd-primary); color: var(--rd-white); }
.lp-nav a.lp-nav-cta {
  font-size: 14px; background: var(--rd-accent); color: var(--rd-white);
  padding: 10px 24px; border-radius: 8px; font-weight: 700;
  transition: background 0.2s, transform 0.2s;
}
.lp-nav a.lp-nav-cta:hover { background: var(--rd-accent-dark); transform: scale(1.05); }

/* ============================================================
   Hero
   ============================================================ */
.lp-hero {
  /* 縦 linear gradient: top sky 5% → bottom white 55% で eyebrow/h1 上部だけ淡く色付け、 metrics 区切り線辺りで white に消える (= minimal × 視覚的興味の両立) */
  background: linear-gradient(180deg, rgb(var(--rd-secondary-rgb, 14 165 233) / 0.05) 0%, var(--rd-white) 55%);
  padding: 96px clamp(32px, 5vw, 80px) 80px;
  text-align: center;
}
.lp-hero-inner { max-width: 680px; margin: 0 auto; }
.lp-hero-eyebrow {
  font-size: 13px; font-weight: 700; color: var(--rd-primary);
  letter-spacing: 0.15em; text-transform: uppercase;
  margin-bottom: 24px; opacity: 0.7;
}
.lp-hero h1 {
  font-size: 48px; font-weight: 900; line-height: 1.45; letter-spacing: -0.02em;
}
.lp-hero h1 .accent { color: var(--rd-secondary); }
.lp-hero-sub {
  margin-top: 28px; font-size: 17px; color: var(--rd-text-light); line-height: 1.9;
}
.lp-hero-cta-row { margin-top: 40px; display: flex; gap: 12px; justify-content: center; }

/* hero CTA 直下の secondary link (= 「物件を見てみる方はこちら」、 PR α 2026-05-26)
   ※ font-size を 14px 未満に縮小する変更時は WCAG AA contrast 再計測必須
      (= rd-text-light #64748B vs 白背景 = 約 4.6:1、 14px 通常で AA 合格、 13px 以下で fail リスク) */
.lp-hero-secondary-link {
  margin-top: 16px; text-align: center; font-size: 14px;
}
.lp-hero-secondary-link a {
  color: var(--rd-text-light); text-decoration: underline;
  transition: color 0.2s;
}
.lp-hero-secondary-link a:hover { color: var(--rd-primary); }
.lp-hero-secondary-link a:focus-visible {
  outline: 2px solid var(--rd-primary);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Buttons */
.lp .btn-primary {
  background: var(--rd-primary); color: var(--rd-white);
  padding: 16px 40px; border-radius: 8px;
  font-size: 15px; font-weight: 700; display: inline-block;
  transition: background 0.2s;
}
.lp .btn-primary:hover { background: var(--rd-primary-dark); }
.lp .btn-ghost {
  color: var(--rd-primary); padding: 16px 40px;
  border-radius: 8px; font-size: 15px; font-weight: 700;
  display: inline-block; border: 1.5px solid var(--rd-primary);
  transition: background 0.2s, color 0.2s;
}
.lp .btn-ghost:hover { background: var(--rd-primary); color: var(--rd-white); }
.lp .btn-accent {
  background: var(--rd-accent); color: var(--rd-white);
  /* 案 b: shadow + サイズ拡大 (= ghost button との階層明確化、 hero 視覚的フック)。
     lp-cta は別 override (L335 周辺) で padding 18×52px のままなので衝突なし */
  padding: 18px 48px; border-radius: 8px;
  font-size: 16px; font-weight: 700; display: inline-block;
  box-shadow: 0 4px 16px rgba(251, 146, 60, 0.22);
  transition: background 0.2s, transform 0.2s;
}
.lp .btn-accent:hover { background: var(--rd-accent-dark); transform: scale(1.05); }

/* Hero Metrics
   階層化: 第 1 metric (= 札幌空室数 / サービス価値の象徴) を 48px + accent orange で主役化、
   他 3 metric は 24px / primary slate で補助情報化。 align-items: flex-end で大小数字の下端揃え (= label 縦位置揃え) */
.lp-hero-metrics {
  margin-top: 64px; padding-top: 40px;
  border-top: 1px solid var(--rd-border);
  display: flex; justify-content: center; align-items: flex-end; gap: 64px;
}
.lp-hero-metric { text-align: center; }
.lp-hero-metric-num {
  font-size: 24px; font-weight: 900; color: var(--rd-primary); line-height: 1;
}
.lp-hero-metric:first-child .lp-hero-metric-num {
  font-size: 48px; color: var(--rd-accent);
}
.lp-hero-metric-label {
  font-size: 14px; color: var(--rd-text-light); margin-top: 8px;
}

/* ============================================================
   Features wrapper
   tape + 4 editorial を 1 大ブロックにまとめ、上下 100px の gradient fade で
   hero / voice section との境界を柔らかく溶かす (= ブロック化 + 連続性)
   ============================================================ */
.lp-features-wrapper {
  background: var(--rd-primary-bg);
}
.lp-features-wrapper::before {
  content: '';
  display: block;
  height: 100px;
  background: linear-gradient(180deg, var(--rd-white) 0%, var(--rd-primary-bg) 100%);
}
.lp-features-wrapper::after {
  content: '';
  display: block;
  height: 100px;
  background: linear-gradient(180deg, var(--rd-primary-bg) 0%, var(--rd-white) 100%);
}
/* tape を wrapper に取り込む: bg 透明 + border 緩和 */
.lp-features-wrapper .lp-tape {
  background: transparent;
  border-bottom: 1px solid rgb(var(--rd-border-rgb, 203 213 225) / 0.4);
}

/* ============================================================
   Tape Divider
   ============================================================ */
.lp-tape {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 clamp(24px, 5vw, 48px); height: 48px;
  border-bottom: 1px solid var(--rd-border);
  font-size: 13px; color: var(--rd-text-light);
  letter-spacing: 0.15em; text-transform: uppercase;
  position: relative;
}
.lp-tape-scroll { display: flex; align-items: center; gap: 8px; }
.lp-scroll-arrow {
  display: inline-flex; align-items: center;
  animation: lpScrollBounce 2s ease-in-out infinite;
  color: var(--rd-text-light);
}
.lp-scroll-arrow svg { width: 12px; height: 40px; }
@keyframes lpScrollBounce {
  0%, 100% { transform: translateY(0); opacity: 0.5; }
  50% { transform: translateY(8px); opacity: 1; }
}

/* ============================================================
   Editorial — イラスト + テキスト
   ============================================================ */
.lp-editorial {
  padding: 80px 0;
}
.lp-editorial-inner {
  max-width: 1040px; margin: 0 auto;
  padding: 0 clamp(24px, 5vw, 64px);
  display: grid; grid-template-columns: 1fr 1fr; gap: 64px;
  align-items: center;
}
.lp-editorial.reverse .lp-editorial-inner { direction: rtl; }
.lp-editorial.reverse .lp-editorial-inner > * { direction: ltr; }
.lp-editorial-num {
  font-size: 72px; font-weight: 900; color: var(--rd-secondary);
  opacity: 0.40; line-height: 1; margin-bottom: 12px;
}
.lp-editorial h3 {
  font-size: 26px; font-weight: 900; line-height: 1.5;
}
.lp-editorial p {
  margin-top: 16px; font-size: 16px; color: var(--rd-text-light); line-height: 1.9;
}
.lp-editorial-illust {
  display: flex; align-items: center; justify-content: center;
  background: var(--rd-white);
  border-radius: 50%;
  padding: 40px; aspect-ratio: 1;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
}
.lp-editorial-illust img {
  width: 220px; height: 220px; object-fit: contain;
  filter: drop-shadow(0 6px 20px rgba(0,0,0,0.06));
}

/* ============================================================
   Voice — コンセプト + テスティモニアル
   ============================================================ */
.lp-voice-section {
  padding: 96px clamp(24px, 5vw, 48px) 80px;
  text-align: center; background: var(--rd-white);
}
.lp-voice-concept {
  font-size: clamp(28px, 3.5vw, 40px); font-weight: 900;
  line-height: 1.6; max-width: 640px; margin: 0 auto; color: var(--rd-text);
}
.lp-voice-concept-sub {
  margin-top: 12px; font-size: 14px; color: var(--rd-text-light); letter-spacing: 0.1em;
}
.lp-voice-divider {
  width: 48px; height: 2px; background: var(--rd-border); margin: 48px auto;
}
.lp-voice-label {
  font-size: 13px; font-weight: 700; color: var(--rd-secondary);
  letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 32px;
}
.lp-voice-cards {
  max-width: 960px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; text-align: left;
}
.lp-voice-card {
  background: var(--rd-white); border: 1px solid var(--rd-border);
  border-radius: 16px; padding: 32px; position: relative;
}
.lp-voice-card-text { font-size: 15px; line-height: 1.8; color: var(--rd-text); }
.lp-voice-card-author {
  margin-top: 20px; padding-top: 16px;
  border-top: 1px solid var(--rd-border);
  display: flex; align-items: center; gap: 12px;
}
.lp-voice-card-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--rd-secondary-bg);
  color: var(--rd-secondary-dark);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 700; flex-shrink: 0;
}
.lp-voice-card-name { font-size: 14px; font-weight: 700; color: var(--rd-text); }
.lp-voice-card-detail { font-size: 13px; color: var(--rd-text-light); margin-top: 2px; }

/* ============================================================
   Comparison — Before / After
   ============================================================ */
.lp-comparison {
  background: var(--rd-white);
  padding: 80px clamp(24px, 5vw, 48px);
}
.lp-comparison-inner { max-width: 880px; margin: 0 auto; }
.lp-comparison-label {
  font-size: 13px; font-weight: 700; color: var(--rd-secondary);
  letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 8px;
}
.lp-comparison h2 { font-size: 28px; font-weight: 900; margin-bottom: 48px; }
.lp-comparison-grid {
  display: grid; grid-template-columns: 1fr 48px 1fr; gap: 0; align-items: stretch;
}
.lp-compare-card { padding: 36px; border-radius: 16px; }
.lp-compare-card--before { background: var(--rd-white); border: 1px solid var(--rd-border); }
.lp-compare-card--after { background: rgb(var(--rd-secondary-rgb, 14 165 233) / 0.08); border: 2px solid var(--rd-secondary); }
.lp-compare-card-title {
  font-size: 14px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; margin-bottom: 24px; color: var(--rd-text-light);
}
.lp-compare-card--after .lp-compare-card-title { color: var(--rd-secondary); }
/* ブランド名 "RoomDrop" は混合大小文字を維持 (DESIGN.md §2.5 ロゴ規約)、eyebrow label の uppercase 化からは除外 */
.lp-comparison-label .brand,
.lp-compare-card-title .brand {
  text-transform: none;
}
.lp-compare-item {
  display: flex; align-items: flex-start; gap: 12px;
  font-size: 15px; line-height: 1.7;
  padding: 10px 0; border-bottom: 1px solid rgba(0,0,0,0.05);
}
.lp-compare-item:last-child { border-bottom: none; }
.lp-compare-icon { flex-shrink: 0; font-size: 16px; margin-top: 2px; }
.lp-compare-icon--x { color: #A0A8B5; }
.lp-compare-icon--check { color: #15803D; /* Tailwind green-700, WCAG AA 4.8:1 on white */ }
.lp-compare-arrow {
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; color: var(--rd-primary); font-weight: 700;
}

/* ============================================================
   CTA
   ============================================================ */
.lp-cta {
  padding: 140px clamp(24px, 5vw, 48px) 120px;
  text-align: center; background: var(--rd-white); position: relative;
}
.lp-cta::before {
  content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 64px; height: 1px; background: var(--rd-border);
}
.lp-cta-eyebrow {
  font-size: 14px; font-weight: 700; color: var(--rd-primary);
  letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 28px;
}
.lp-cta h2 {
  font-size: clamp(32px, 4vw, 44px); font-weight: 900; line-height: 1.5;
  color: var(--rd-text); letter-spacing: -0.01em;
  max-width: 680px; margin-left: auto; margin-right: auto;
}
.lp-cta p:not(.lp-cta-eyebrow) {
  margin-top: 20px; color: var(--rd-text-light); font-size: 16px; line-height: 1.8;
  max-width: 480px; margin-left: auto; margin-right: auto;
}
.lp-cta .btn-accent {
  /* box-shadow は hero CTA (= L114) と同値で LP 全体の accent CTA 一貫性確保 */
  margin-top: 40px; padding: 18px 52px; font-size: 16px;
  border-radius: 8px; box-shadow: 0 4px 16px rgba(251, 146, 60, 0.22);
  transition: background 0.2s, scale 0.2s;
}
.lp-cta .btn-accent:hover { scale: 1.05; }

/* ============================================================
   Footer
   ============================================================ */
.lp-footer {
  border-top: 1px solid var(--rd-border);
  padding: 28px clamp(24px, 5vw, 48px);
  text-align: center; font-size: 14px; color: var(--rd-text-light);
}
.lp-footer a { margin: 0 12px; }
.lp-footer a:hover { text-decoration: underline; }
.lp-footer-disclaimer {
  margin-top: 12px;
  font-size: 12px;
  line-height: 1.7;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
  /* 日本語改行最適化: 句読点禁則 + フレーズ単位の自然改行 + バランス整形 */
  line-break: strict;
  word-break: auto-phrase;
  text-wrap: pretty;
}

/* ============================================================
   GSAP initial states (FOUC prevention)
   ============================================================ */
.lp-hero-line-inner { display: block; }
.lp-hero-fade, .lp-voice-concept, .lp-voice-concept-sub,
.lp-voice-label, .lp-voice-card, .lp-comparison-label, .lp-comparison h2,
.lp-comparison-grid, .lp-cta-eyebrow, .lp-cta h2, .lp-cta p:not(.lp-cta-eyebrow),
.lp-cta .btn-accent,
.lp-editorial-inner > div:first-child, .lp-editorial-illust {
  visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  .lp-hero-fade, .lp-voice-concept, .lp-voice-concept-sub,
  .lp-voice-label, .lp-voice-card, .lp-comparison-label, .lp-comparison h2,
  .lp-comparison-grid, .lp-cta-eyebrow, .lp-cta h2, .lp-cta p:not(.lp-cta-eyebrow),
  .lp-cta .btn-accent,
  .lp-editorial-inner > div:first-child, .lp-editorial-illust {
    visibility: visible !important; opacity: 1 !important;
    transform: none !important;
  }
  .lp-scroll-arrow { animation: none; opacity: 0.5; }
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 900px) {
  .lp-hero h1 { font-size: 36px; }
  .lp-hero-metrics {
    gap: 16px 32px; flex-wrap: wrap;
    display: grid; grid-template-columns: 1fr 1fr; justify-items: center;
  }
  /* :first-child の desktop 48px (specificity 20) を override するため selector 強化 */
  .lp-hero-metrics .lp-hero-metric-num { font-size: 24px; }
  .lp-editorial { grid-template-columns: 1fr; gap: 32px; }
  .lp-editorial.reverse { direction: ltr; }
  .lp-editorial-illust { max-width: 300px; margin: 0 auto; aspect-ratio: auto; padding: 32px; }
  .lp-editorial-illust img { width: 180px; height: 180px; }
  .lp-voice-cards { grid-template-columns: 1fr; max-width: 400px; }
  .lp-comparison-grid { grid-template-columns: 1fr; gap: 16px; }
  .lp-compare-arrow { transform: rotate(90deg); padding: 8px; }
  .lp-nav-login { padding: 6px 12px; font-size: 13px; }
  .lp-nav-cta { padding: 6px 12px; font-size: 13px; }
  .lp-nav-links { gap: 8px; }
  /* hero CTA mobile: 縦並び (= primary 下、 DOM 順自然) + button 全幅化 + 小 link spacing (= PR α 2026-05-26) */
  .lp-hero-cta-row { flex-direction: column; align-items: center; }
  .lp .btn-ghost,
  .lp .btn-accent { width: 100%; max-width: 320px; text-align: center; }
  .lp-hero-secondary-link { margin-top: 12px; }
}