@charset "UTF-8";

/* =========================================================
   mokṣaḥ - Special Program ページ専用テーマ
   深い菫（すみれ）× 藍 × 白金の光
   ---------------------------------------------------------
   style.css の後に読み込むこと。special.html のみで使用。

   背景は2枚の固定レイヤーで構成しています。
     body::before … 中央からひらく光。開花のイメージ
     body::after  … 上下に沈む闇（周辺減光）

   ■ 色味を変えたいとき
     --base（地の色）と --accent（光の色）の2行が起点です。
   ========================================================= */

/* ---------- トークンの上書き ---------- */
:root {
  --base:        #0B0716;  /* ほぼ黒に近い深い菫 */
  --violet:      #3A2170;  /* 菫 */
  --indigo:      #1B2A6B;  /* 藍 */
  --halo:        #E4D9F5;  /* 白金の光 */

  --bg:          transparent;
  --bg-tint:     rgba(228, 217, 245, .05);
  --bg-deep:     rgba(0, 0, 0, .42);

  --ink:         #F2EEF9;
  --ink-soft:    #DED7EE;
  --ink-mute:    #C3BCD9;
  --accent:      #CBB6EE;
  --accent-dark: #B49FD8;
  --accent-deep: #0B0716;
  --line:        rgba(228, 217, 245, .18);
}

html { background: var(--base); }
body { background: transparent; }
::selection { background: var(--accent); color: var(--base); }

/* ---------- 背景レイヤー 1：中央からひらく光 ---------- */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(88% 62% at 50% 30%,
      rgba(58, 33, 112, .55) 0%, rgba(58, 33, 112, 0) 62%),
    radial-gradient(70% 50% at 50% 78%,
      rgba(27, 42, 107, .42) 0%, rgba(27, 42, 107, 0) 66%),
    radial-gradient(34% 24% at 50% 30%,
      rgba(203, 182, 238, .16) 0%, rgba(203, 182, 238, 0) 100%);
}

/* ---------- 背景レイヤー 2：周辺減光 ---------- */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(130% 100% at 50% 38%,
      rgba(0,0,0,0) 34%, rgba(0, 0, 0, .72) 100%);
}

/* ---------- ヘッダー / ナビ ---------- */
@media (max-width: 900px) {
  .nav { background: var(--base); }
}

.site-header.is-scrolled {
  background: rgba(11, 7, 22, .9);
  box-shadow: 0 1px 0 var(--line);
}

/* ---------- 下層ページ上部 ---------- */
.page-hero__bg {
  filter: brightness(1.05);
  background-color: transparent;
  background-image: var(--img, none);
}
.page-hero__bg::after {
  background: linear-gradient(180deg, rgba(11,7,22,.8) 0%, rgba(11,7,22,.38) 20%, rgba(11,7,22,.2) 52%, rgba(11,7,22,.78) 100%);
}
.page-hero__title { color: var(--ink); }
.breadcrumb { color: var(--ink-mute); }

/* ---------- セクションの段差 ---------- */
.section--tint { background: var(--bg-tint); }
.section--deep { background: var(--bg-deep); }

/* ---------- 写真プレースホルダ ---------- */
.media {
  filter: brightness(1.4);
  background-color: #150E29;
  background-image: var(--img, linear-gradient(155deg, #2E1D5C 0%, #191039 55%, #0C0819 100%));
}
.media::after {
  background: linear-gradient(180deg, rgba(228,217,245,.05), rgba(0,0,0,.16));
}

/* ---------- カード類 ---------- */
.plan,
.voice {
  background: rgba(228, 217, 245, .045);
  border-color: var(--line);
}
.plan--featured {
  background: rgba(203, 182, 238, .08);
  border-color: rgba(203, 182, 238, .5);
  box-shadow: 0 24px 60px -34px rgba(0, 0, 0, 1);
}
.plan__tag { color: var(--base); }

/* ---------- ボタン ---------- */
.btn {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--base);
}
.btn:hover {
  background: transparent;
  border-color: var(--accent);
  color: var(--accent);
}
.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: rgba(242, 238, 249, .3);
}
.btn--ghost:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--base);
}

/* ---------- CTA ---------- */
.cta { background: var(--bg-deep); }
.cta .section-label { color: var(--accent); }
.cta__title { color: var(--ink); }
.cta__text { color: var(--ink-soft); }
.cta .btn {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--base);
}
.cta .btn:hover {
  background: transparent;
  color: var(--accent);
  border-color: var(--accent);
}

/* ---------- フッター ---------- */
.site-footer {
  background: var(--base);
  border-top: 1px solid rgba(242, 238, 249, .08);
}