/* 公開LP（トップ・運営会社）専用スタイル。レイアウトは Bootstrap ユーティリティで組む前提 */

/* ===== デザイントークン ===== */
:root {
  --lp-main: #e74577;
  --lp-sub: #ea9b18;
  --lp-accent: #ffd8b0;
  --lp-bg: #faf4eb;
  --lp-ink: #161616;
  --lp-muted: #6b6470;
  --lp-dark: #1a1033;
  --lp-dark-2: #2a1546;
  --lp-gradient: linear-gradient(120deg, var(--lp-main) 0%, #f0697a 45%, var(--lp-sub) 100%);
  --lp-radius: 24px;
  --lp-shadow: 0 10px 30px rgba(26, 16, 51, 0.08), 0 2px 6px rgba(26, 16, 51, 0.04);
  --lp-shadow-lg: 0 24px 60px rgba(26, 16, 51, 0.16);
  --lp-nav-height: 72px;
  --lp-font: 'Nunito', 'M PLUS Rounded 1c', system-ui, sans-serif;
}

/* ===== ベース ===== */
.lp {
  background: var(--lp-bg);
  color: var(--lp-ink);
  font-family: var(--lp-font);
  overflow-x: hidden;
}

.lp h1, .lp h2, .lp h3, .lp h4 { font-weight: 800; }

/* アンカー遷移時に fixed navbar に隠れないようにする */
.lp section[id] { scroll-margin-top: var(--lp-nav-height); }

/* ===== ナビゲーション ===== */
.lp-nav {
  min-height: var(--lp-nav-height);
  background: transparent;
  transition: background-color 0.3s, box-shadow 0.3s, backdrop-filter 0.3s;
}

.lp-nav .nav-link,
.lp-nav .lp-wordmark,
.lp-nav .navbar-toggler { color: #fff; }

.lp-nav .nav-link { font-weight: 700; opacity: 0.9; }
.lp-nav .nav-link:hover { opacity: 1; }

.lp-nav.is-scrolled,
.lp-nav:has(.navbar-collapse.show),
.lp-nav:has(.navbar-collapse.collapsing) {
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  box-shadow: 0 4px 20px rgba(26, 16, 51, 0.08);
}

.lp-nav.is-scrolled .nav-link,
.lp-nav.is-scrolled .lp-wordmark,
.lp-nav.is-scrolled .navbar-toggler,
.lp-nav:has(.navbar-collapse.show) .nav-link,
.lp-nav:has(.navbar-collapse.show) .lp-wordmark,
.lp-nav:has(.navbar-collapse.show) .navbar-toggler { color: var(--lp-ink); }

.lp-nav.is-scrolled .lp-btn-glass,
.lp-nav:has(.navbar-collapse.show) .lp-btn-glass {
  color: var(--lp-ink);
  border-color: rgba(22, 22, 22, 0.15);
}

/* flash は fixed navbar の下に出す */
.lp-flash {
  position: relative;
  z-index: 1020;
  padding-top: calc(var(--lp-nav-height) + 12px);
  margin-bottom: calc(-1 * var(--lp-nav-height) - 12px);
}

/* ===== ロゴ ===== */
.lp-logo-box {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--lp-gradient);
  display: inline-grid;
  place-items: center;
  padding: 7px;
  box-shadow: 0 4px 12px rgba(231, 69, 119, 0.35);
  flex-shrink: 0;
}

.lp-logo-box img { width: 100%; height: 100%; object-fit: contain; }

.lp-wordmark {
  font-weight: 900;
  font-size: 1.35rem;
  letter-spacing: -0.5px;
  color: var(--lp-ink);
}

/* ===== ヒーロー ===== */
.lp-hero,
.lp-page-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  color: #fff;
  background:
    radial-gradient(60% 70% at 10% 10%, rgba(231, 69, 119, 0.95) 0%, transparent 60%),
    radial-gradient(50% 60% at 90% 20%, rgba(234, 155, 24, 0.9) 0%, transparent 60%),
    radial-gradient(70% 60% at 70% 100%, rgba(255, 216, 176, 0.95) 0%, transparent 65%),
    radial-gradient(50% 50% at 20% 90%, rgba(240, 105, 122, 0.9) 0%, transparent 60%),
    linear-gradient(135deg, var(--lp-main), var(--lp-sub));
}

.lp-hero {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: calc(var(--lp-nav-height) + 48px) 0 80px;
}

.lp-page-hero { padding: calc(var(--lp-nav-height) + 64px) 0 72px; }

/* ヒーロー内のコンテンツはブロブより前面に */
.lp-hero > .container,
.lp-page-hero > .container { position: relative; z-index: 1; }

/* 装飾ブロブ（ゆっくり漂う） */
.lp-blob {
  position: absolute;
  z-index: 0;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  filter: blur(70px);
  pointer-events: none;
  animation: lp-blob-drift 18s ease-in-out infinite alternate;
}

.lp-blob:nth-of-type(2n) { background: rgba(255, 216, 176, 0.6); animation-duration: 22s; animation-delay: -6s; }
.lp-blob:nth-of-type(3n) { background: rgba(231, 69, 119, 0.55); animation-duration: 26s; animation-delay: -12s; }

@keyframes lp-blob-drift {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(60px, -40px) scale(1.15); }
  100% { transform: translate(-40px, 50px) scale(0.95); }
}

.lp-hero-title {
  font-size: clamp(2.4rem, 6vw, 4.8rem);
  font-weight: 900;
  line-height: 1.12;
  letter-spacing: -0.02em;
}

.lp-gradient-text {
  background: var(--lp-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ===== グラス ===== */
.lp-glass,
.lp-glass-dark {
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  border-radius: var(--lp-radius);
}

.lp-glass {
  background: rgba(255, 255, 255, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 12px 40px rgba(26, 16, 51, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.lp-glass-dark {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
}

/* ===== セクション ===== */
.lp-section {
  position: relative;
  padding: 96px 0;
}

.lp-section-dark {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  color: #fff;
  background: linear-gradient(160deg, var(--lp-dark) 0%, var(--lp-dark-2) 100%);
}

/* 暗背景のぼかしグロー装飾 */
.lp-section-dark::before,
.lp-section-dark::after {
  content: '';
  position: absolute;
  z-index: -1;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  filter: blur(110px);
  opacity: 0.45;
  pointer-events: none;
}

.lp-section-dark::before { top: -160px; left: -120px; background: var(--lp-main); }
.lp-section-dark::after { bottom: -180px; right: -120px; background: var(--lp-sub); }

.lp-section-dark .text-muted,
.lp-section-dark .text-body-secondary { color: rgba(255, 255, 255, 0.65) !important; }

.lp-section-soft {
  background:
    radial-gradient(50% 60% at 0% 0%, rgba(255, 216, 176, 0.7) 0%, transparent 70%),
    radial-gradient(50% 60% at 100% 100%, rgba(231, 69, 119, 0.12) 0%, transparent 70%),
    linear-gradient(180deg, #fff6ec 0%, var(--lp-bg) 100%);
}

.lp-eyebrow {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
  background: var(--lp-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* 暗背景・ヒーロー上ではグラデ文字が沈むので明るい色に */
.lp-section-dark .lp-eyebrow,
.lp-hero .lp-eyebrow,
.lp-page-hero .lp-eyebrow,
.lp-cta .lp-eyebrow {
  background: none;
  -webkit-text-fill-color: currentColor;
  color: var(--lp-accent);
}

.lp-section-title {
  font-size: clamp(1.8rem, 4vw, 3rem);
  font-weight: 900;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

/* ===== パーツ ===== */
.lp-icon-badge {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  background: var(--lp-gradient);
  color: #fff;
  font-size: 1.6rem;
  box-shadow: 0 8px 20px rgba(231, 69, 119, 0.3);
}

.lp-step-num {
  display: inline-block;
  font-size: clamp(3rem, 7vw, 4.5rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.04em;
  background: var(--lp-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.lp-card {
  background: #fff;
  border: 1px solid rgba(26, 16, 51, 0.05);
  border-radius: var(--lp-radius);
  box-shadow: var(--lp-shadow);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.lp-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--lp-shadow-lg);
}

/* ===== ボタン（.btn と併用） ===== */
.lp-btn-gradient,
.lp-btn-glass {
  border-radius: 999px;
  font-weight: 800;
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease, background-color 0.2s ease;
}

.lp-btn-gradient {
  color: #fff;
  border: 0;
  background: var(--lp-gradient);
  box-shadow: 0 8px 22px rgba(231, 69, 119, 0.35);
}

.lp-btn-gradient:hover,
.lp-btn-gradient:focus-visible {
  color: #fff;
  filter: brightness(1.08);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(231, 69, 119, 0.45);
}

.lp-btn-glass {
  color: #fff;
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.lp-btn-glass:hover,
.lp-btn-glass:focus-visible {
  color: #fff;
  background: rgba(255, 255, 255, 0.32);
  transform: translateY(-2px);
}

/* 明るい背景上でのガラスボタン */
.lp-section:not(.lp-section-dark) .lp-btn-glass,
.lp-card .lp-btn-glass {
  color: var(--lp-ink);
  background: rgba(255, 255, 255, 0.7);
  border-color: rgba(22, 22, 22, 0.12);
}

/* ===== スマホ風モック ===== */
.lp-phone {
  position: relative;
  width: min(100%, 300px);
  aspect-ratio: 9 / 19;
  margin-inline: auto;
  padding: 18px 14px;
  border-radius: 40px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  box-shadow: 0 30px 80px rgba(26, 16, 51, 0.25), inset 0 0 0 6px rgba(255, 255, 255, 0.15);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ノッチ */
.lp-phone::before {
  content: '';
  align-self: center;
  flex-shrink: 0;
  width: 34%;
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.6);
}

.lp-float { animation: lp-float 6s ease-in-out infinite; }

@keyframes lp-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}

/* ===== ポイント・ランク ===== */
.lp-points {
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.lp-rank-bronze { background: linear-gradient(135deg, #f3c6a0 0%, #c47a45 50%, #8a4b22 100%); color: #fff; }
.lp-rank-silver { background: linear-gradient(135deg, #f5f6f8 0%, #b9bec7 50%, #8a909b 100%); color: var(--lp-ink); }
.lp-rank-gold { background: linear-gradient(135deg, #fff2b0 0%, #f2c440 45%, #b8860b 100%); color: var(--lp-ink); }

.lp-logo-tile {
  height: 96px;
  padding: 16px 20px;
  background: #fff;
  border-radius: 18px;
  box-shadow: var(--lp-shadow);
  display: flex;
  align-items: center;
  justify-content: center;
}

.lp-logo-tile img { max-width: 100%; max-height: 100%; object-fit: contain; }

/* ===== スクロール出現 ===== */
.lp-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.lp-reveal.is-visible { opacity: 1; transform: none; }

/* ===== CTA ===== */
.lp-cta {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  color: #fff;
  border-radius: 32px;
  background: var(--lp-gradient);
  box-shadow: 0 24px 60px rgba(231, 69, 119, 0.3);
}

.lp-cta::before,
.lp-cta::after {
  content: '';
  position: absolute;
  z-index: -1;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  filter: blur(60px);
  pointer-events: none;
}

.lp-cta::before { top: -120px; right: -60px; background: rgba(255, 255, 255, 0.4); }
.lp-cta::after { bottom: -140px; left: -80px; background: rgba(255, 216, 176, 0.6); }

/* ===== フッター ===== */
.lp-footer {
  background: var(--lp-dark);
  color: rgba(255, 255, 255, 0.75);
}

.lp-footer .lp-wordmark { color: #fff; }
.lp-footer .nav-link { color: rgba(255, 255, 255, 0.75); font-weight: 600; }
.lp-footer .nav-link:hover { color: #fff; }
.lp-footer hr { border-color: rgba(255, 255, 255, 0.15); opacity: 1; }
.lp-footer-copy { color: rgba(255, 255, 255, 0.5); }

/* ===== 会社概要の定義リスト ===== */
.lp-dl { margin: 0; }

.lp-dl > div,
.lp-dl > .row {
  padding: 1.1rem 0;
  border-bottom: 1px solid rgba(26, 16, 51, 0.08);
}

.lp-dl > div:last-child { border-bottom: 0; }

.lp-dl dt {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--lp-muted);
}

.lp-dl dd { margin: 0; font-weight: 600; }

/* ===== レスポンシブ ===== */
@media (max-width: 991.98px) {
  .lp-nav .navbar-collapse { padding-bottom: 0.5rem; }
}

@media (max-width: 767.98px) {
  .lp-section { padding: 64px 0; }
  .lp-hero { padding: calc(var(--lp-nav-height) + 24px) 0 56px; }
  .lp-page-hero { padding: calc(var(--lp-nav-height) + 40px) 0 48px; }
  .lp-blob { width: 260px; height: 260px; filter: blur(50px); }
}

/* ===== 動きを減らす設定 ===== */
@media (prefers-reduced-motion: reduce) {
  .lp-blob,
  .lp-float { animation: none; }

  .lp-reveal { opacity: 1; transform: none; transition: none; }

  .lp-card,
  .lp-btn-gradient,
  .lp-btn-glass { transition: none; }

  .lp-card:hover,
  .lp-btn-gradient:hover,
  .lp-btn-glass:hover { transform: none; }
}