@charset "UTF-8";

/* =========================================================
   mokṣaḥ - ヨガページ専用テーマ
   ラピスラズリ × ネイビー × 細かいゴールド
   ---------------------------------------------------------
   style.css の後に読み込むこと。yoga.html のみで使用。

   背景は2枚の固定レイヤーで構成しています。
     body::before … ラピスラズリの濃淡（大きなにじみ）
     body::after  … 黄鉄鉱を思わせる金の細片
   金の量を変えたい場合は body::after の opacity を調整。
   ========================================================= */

/* ---------- トークンの上書き ---------- */
:root {
  --base:        #07122A;  /* ネイビー */
  --lapis:       #11367C;  /* ラピスラズリ */
  --gold:        #CDA85C;  /* ゴールド */

  --bg:          transparent;
  --bg-tint:     rgba(255, 255, 255, .04);
  --bg-deep:     rgba(0, 0, 0, .28);
  --ink:         #ECEFF7;
  --ink-soft:    #CFD6E6;
  --ink-mute:    #C2CBDD;
  --accent:      var(--gold);
  --accent-dark: #BC9750;
  --accent-deep: #08122A;
  --line:        rgba(205, 168, 92, .22);
}

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

/* ---------- 背景レイヤー 1：ラピスラズリの濃淡 ---------- */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    /* 周辺減光。石の塊のような奥行きを出す */
    radial-gradient(126% 100% at 50% 40%,
      rgba(0,0,0,0) 28%, rgba(0, 0, 0, .58) 100%),
    radial-gradient(58% 42% at 16% 10%,  #11367C 0%, rgba(17,54,125,0) 62%),
    radial-gradient(52% 40% at 86% 26%,  #0E2C69 0%, rgba(14,44,105,0) 60%),
    radial-gradient(64% 48% at 72% 84%,  #0A2254 0%, rgba(10,35,84,0) 64%),
    radial-gradient(45% 36% at 38% 58%,  #081B40 0%, rgba(8,27,64,0) 66%),
    var(--base);
}

/* ---------- 背景レイヤー 2：金の細片 ---------- */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .5;
  background-image:
    radial-gradient(circle, rgba(236,212,150,.9) 0 1px,   transparent 1.6px),
    radial-gradient(circle, rgba(205,168,92,.7) 0 .7px,  transparent 1.2px),
    radial-gradient(circle, rgba(255,240,200,.6) 0 1.3px, transparent 2px),
    radial-gradient(circle, rgba(190,156,84,.5) 0 .6px,  transparent 1px);
  background-size: 137px 113px, 79px 91px, 233px 197px, 53px 61px;
  background-position: 0 0, 41px 57px, 118px 29px, 23px 12px;
}

/* ---------- ページ上部 ---------- */
.page-hero__bg {
  filter: brightness(1.15);
  background-color: transparent;
  background-image: var(--img, none);
}
.page-hero__bg::after {
  background: linear-gradient(180deg, rgba(7,18,42,.82) 0%, rgba(7,18,42,.4) 20%, rgba(7,18,42,.24) 52%, rgba(7,18,42,.8) 100%);
}
.page-hero__title { color: var(--ink); }
.breadcrumb { color: var(--ink-mute); }

/* ---------- セクションの段差 ---------- */
.section--tint { background: rgba(255, 255, 255, .04); }
.section--deep { background: rgba(0, 0, 0, .28); }

/* ---------- ヘッダー ---------- */
.site-header.is-scrolled {
  background: rgba(7, 18, 42, .88);
  box-shadow: 0 1px 0 rgba(205, 168, 92, .18);
}
@media (max-width: 900px) {
  .nav { background: var(--base); }
}

/* ---------- 写真プレースホルダ ---------- */
.media {
  filter: brightness(1.4);
  background-color: #0A1A3C;
  background-image: var(--img, linear-gradient(155deg, #143B7E 0%, #0E2D66 55%, #071533 100%));
}
.media::after {
  background: linear-gradient(180deg, rgba(205,168,92,.06), rgba(0,0,0,.16));
}

/* ---------- 料金カード ---------- */
.plan {
  background: rgba(255, 255, 255, .045);
  border-color: rgba(205, 168, 92, .2);
}
.plan--featured {
  background: rgba(205, 168, 92, .08);
  border-color: rgba(205, 168, 92, .6);
  box-shadow: 0 24px 60px -34px rgba(0, 0, 0, 1);
}
.plan__tag { background: var(--gold); color: var(--base); }
.plan__price { border-bottom-color: rgba(205, 168, 92, .22); }

/* ---------- 罫線まわり ---------- */
.step,
.step:last-child,
.faq-item,
.faq-item:first-child,
.table th,
.table td { border-color: rgba(205, 168, 92, .18); }

/* ---------- ボタン ---------- */
.btn {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--base);
}
.btn:hover {
  background: transparent;
  border-color: var(--gold);
  color: var(--gold);
}
.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: rgba(236, 239, 247, .3);
}
.btn--ghost:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--base);
}

/* ---------- CTA ---------- */
.cta {
  background: rgba(4, 10, 26, .55);
  border-top: 1px solid rgba(205, 168, 92, .18);
}
.cta .section-label { color: var(--gold); }
.cta__title { color: var(--ink); }
.cta__text  { color: var(--ink-soft); }
.cta .btn {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--base);
}
.cta .btn:hover {
  background: transparent;
  color: var(--gold);
  border-color: var(--gold);
}
.cta .btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: rgba(236, 239, 247, .38);
}
.cta .btn--ghost:hover { background: var(--ink); color: var(--base); }

/* ---------- フッター ---------- */
.site-footer {
  background: rgba(0, 0, 0, .32);
  border-top: 1px solid rgba(205, 168, 92, .18);
}