/* ==========================================================================
   Scaflinks+ 特設セクション専用CSS
   規約: すべてのセレクタは #scaflinks-plus 配下にスコープする(既存サイト非干渉)。
         :root への変数追加・タグ単独セレクタ・既存クラスへの言及は禁止。
   ========================================================================== */

#scaflinks-plus {
  /* ---- デザイントークン(このセクション専用) ---- */
  --sp-bg: #0D0D0D;
  --sp-bg-soft: #1A1A1A;
  --sp-text: #F2EFE9;
  --sp-text-dim: rgba(242, 239, 233, 0.6);
  --sp-line: rgba(242, 239, 233, 0.25);
  --sp-accent: #C9A96A;
  --sp-serif: 'Shippori Mincho', 'Hiragino Mincho ProN', 'Yu Mincho', serif;
  --sp-sans: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif;
  --sp-ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* ---- 継承リセット(明示再宣言。all:revert は使わない) ---- */
  font-family: var(--sp-sans);
  color: var(--sp-text);
  line-height: 2;
  letter-spacing: 0.02em;
  box-sizing: border-box;

  /* ---- ハードカット暗転。グローバル section 規則(padding/border-top)をスコープ内で上書き ---- */
  background: var(--sp-bg);
  border-top: none;
  margin: 0;                                   /* PRICE側へ余白を漏らさない(余白はpaddingで内包) */
  padding: 0 0 clamp(96px, 12vh, 160px);
  overflow: hidden;                            /* 横スクロール防止(全幅SVGの保険) */
}
#scaflinks-plus * { box-sizing: border-box; }
#scaflinks-plus .sp-inner { max-width: 1120px; margin: 0 auto; padding: 0 24px; }

/* ===== Section 1: ファーストビュー ===== */
#scaflinks-plus .sp-hero {
  position: relative;
  min-height: min(100svh, 900px);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(96px, 12vh, 160px) 24px;
}
/* 本番画像への差し替え: .sp-hero-media 内に
   <img src="assets/plus/hero.jpg" alt=""> を1枚置くだけでよい(下のimg規則が全面カバーする) */
#scaflinks-plus .sp-hero-media { position: absolute; inset: 0; overflow: hidden; }
#scaflinks-plus .sp-hero-media img { width: 100%; height: 100%; object-fit: cover; opacity: 0.5; }
#scaflinks-plus .sp-hero-media::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 72% 18%, rgba(68, 50, 30, 0.55), transparent 62%),
    radial-gradient(90% 70% at 18% 88%, rgba(42, 33, 22, 0.6), transparent 60%),
    linear-gradient(180deg, #16130F 0%, #0D0D0D 100%);
}
#scaflinks-plus .sp-hero-media svg { position: absolute; inset: 0; width: 100%; height: 100%; }
#scaflinks-plus .sp-hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(85% 65% at 50% 52%, rgba(13, 13, 13, 0.1), rgba(13, 13, 13, 0.78));
}
#scaflinks-plus .sp-hero-copy { position: relative; max-width: 900px; }
#scaflinks-plus .sp-eyebrow {
  font-family: var(--sp-sans);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.5em;
  text-indent: 0.5em;
  color: var(--sp-accent);
  margin-bottom: 30px;
}
#scaflinks-plus .sp-hero-title {
  font-family: var(--sp-serif);
  font-weight: 600;
  font-size: clamp(1.85rem, 4.6vw, 3.3rem);
  line-height: 1.75;
  letter-spacing: 0.08em;
  color: var(--sp-text);
}
#scaflinks-plus .sp-hero-sub {
  margin: 40px auto 0;
  max-width: 660px;
  font-family: var(--sp-sans);
  font-size: clamp(0.85rem, 1.6vw, 0.98rem);
  font-weight: 400;
  color: var(--sp-text-dim);
  line-height: 2.3;
  letter-spacing: 0.06em;
}

/* ===== 共通: ブロック・見出し ===== */
#scaflinks-plus .sp-block { margin-top: clamp(96px, 14vh, 180px); }
#scaflinks-plus .sp-label {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.42em;
  color: var(--sp-accent);
  margin-bottom: 22px;
}
#scaflinks-plus .sp-h3 {
  font-family: var(--sp-serif);
  font-weight: 600;
  font-size: clamp(1.45rem, 3vw, 2.15rem);
  line-height: 1.8;
  letter-spacing: 0.06em;
  color: var(--sp-text);
  margin-bottom: 28px;
}
#scaflinks-plus .sp-text {
  font-size: 0.95rem;
  color: var(--sp-text-dim);
  max-width: 620px;
  line-height: 2.2;
}
#scaflinks-plus .sp-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 88px);
  align-items: center;
}

/* ===== 解析画像などのプレースホルダーパネル ===== */
#scaflinks-plus .sp-panel {
  position: relative;
  background: var(--sp-bg-soft);
  border: 1px solid var(--sp-line);
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
#scaflinks-plus .sp-panel svg { position: absolute; inset: 0; width: 100%; height: 100%; }
#scaflinks-plus .sp-panel-caption {
  position: absolute;
  left: 18px;
  bottom: 14px;
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  color: var(--sp-text-dim);
}

/* ===== Section 3: 資産推移グラフ ===== */
#scaflinks-plus .sp-chart {
  background: var(--sp-bg-soft);
  border: 1px solid var(--sp-line);
  padding: clamp(20px, 4vw, 44px);
  margin-top: 48px;
}
#scaflinks-plus .sp-chart svg { display: block; width: 100%; height: auto; }
#scaflinks-plus .sp-chart-unit { font-size: 0.72rem; color: var(--sp-text-dim); letter-spacing: 0.08em; margin-bottom: 14px; }
#scaflinks-plus .sp-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 32px;
  margin-top: 20px;
  font-size: 0.8rem;
  color: var(--sp-text-dim);
}
#scaflinks-plus .sp-legend span { display: inline-flex; align-items: center; gap: 10px; }
#scaflinks-plus .sp-legend i { display: inline-block; width: 24px; height: 2px; background: var(--sp-text-dim); }
#scaflinks-plus .sp-legend .is-accent i { background: var(--sp-accent); }
#scaflinks-plus .sp-disclaimer {
  margin-top: 18px;
  font-size: 0.75rem;
  color: var(--sp-text-dim);
  letter-spacing: 0.04em;
}
#scaflinks-plus .sp-philosophy {
  margin-top: 40px;
  padding-left: 22px;
  border-left: 1px solid var(--sp-accent);
  font-size: 0.9rem;
  color: var(--sp-text-dim);
  line-height: 2.2;
  max-width: 640px;
}

/* ===== Section 4: 視線断面図 ===== */
#scaflinks-plus .sp-section-fig {
  position: relative;
  background: var(--sp-bg-soft);
  border: 1px solid var(--sp-line);
  margin-top: 48px;
  overflow: hidden;
}
#scaflinks-plus .sp-section-fig svg { display: block; width: 100%; height: auto; }

/* ===== Section 5: CTA ===== */
#scaflinks-plus .sp-cta {
  margin-top: clamp(96px, 14vh, 180px);
  padding-top: clamp(72px, 10vh, 120px);
  border-top: 1px solid var(--sp-line);
  text-align: center;
}
#scaflinks-plus .sp-cta .sp-text { margin-left: auto; margin-right: auto; }
#scaflinks-plus .sp-btn-ghost {
  display: inline-block;
  margin-top: 48px;
  padding: 20px 52px;
  border: 1px solid var(--sp-line);
  color: var(--sp-text);
  font-family: var(--sp-sans);
  font-size: 0.9rem;
  font-weight: 400;
  letter-spacing: 0.22em;
  background: transparent;
  transition: border-color 0.5s var(--sp-ease), background-color 0.5s var(--sp-ease);
}
#scaflinks-plus .sp-btn-ghost:hover {
  border-color: var(--sp-text);
  background: rgba(242, 239, 233, 0.06);
}

/* ===== 入口バナー(コンパクト版・独立ページへの導線) ===== */
#scaflinks-plus.sp-compact { padding: 0; }
#scaflinks-plus .sp-doorway {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: clamp(440px, 62vh, 640px);
  padding: clamp(72px, 10vh, 120px) 24px;
  overflow: hidden;
  color: var(--sp-text);
}
#scaflinks-plus .sp-doorway .sp-btn-ghost { margin-top: 40px; }
#scaflinks-plus .sp-doorway:hover .sp-btn-ghost {
  border-color: var(--sp-text);
  background: rgba(242, 239, 233, 0.06);
}

/* ===== フェードイン(静かに、重厚に) =====
   JSが有効なときだけ .sp-js が付与され、非表示初期状態が発生する(JS無効時は常時表示) */
#scaflinks-plus.sp-js .sp-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.9s var(--sp-ease), transform 0.9s var(--sp-ease);
}
#scaflinks-plus.sp-js .sp-reveal.sp-on { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  #scaflinks-plus.sp-js .sp-reveal { opacity: 1; transform: none; transition: none; }
  #scaflinks-plus .sp-btn-ghost { transition: none; }
}

/* ===== レスポンシブ ===== */
@media (max-width: 860px) {
  #scaflinks-plus .sp-grid { grid-template-columns: 1fr; }
  #scaflinks-plus .sp-hero { min-height: min(88svh, 720px); }
  #scaflinks-plus .sp-hero-title { font-size: clamp(1.35rem, 6vw, 1.85rem); }
}