@charset "UTF-8";

/* =========================================================
   mokṣaḥ - TOP ページ専用テーマ（ダークグリーン）
   ---------------------------------------------------------
   style.css の後に読み込むこと。index.html のみで使用。

   ■ 色味を変えたいとき
     --base の1行だけを書き換えれば、
     セクションの濃淡（--bg-tint / --bg-deep）は自動で追従します。
     直後の16進はcolor-mix非対応ブラウザ用のフォールバックです。
   ========================================================= */

/* ---------- トークンの上書き ---------- */
:root {
  --base:        #05120A;  /* ← 基調色。ほぼ黒に近い深緑 */
  --ink:         #F1EEE3;  /* 本文（温かみのあるオフホワイト） */
  --accent:      #C0A055;  /* ゴールド。彩度 0.38→0.56 に深めた */

  --bg:          transparent;
  /* 単色ではなく半透明にして、下の周辺減光を透かす */
  --bg-tint:     rgba(31, 140, 70, .075);
  --bg-deep:     rgba(0, 0, 0, .4);

  --ink-soft:    #D3DDCD;
  --ink-mute:    #A6B5A0;
  --accent-dark: #A98B45;
  --accent-deep: #05120A;
  --line:        rgba(241, 238, 227, .15);
}

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

/* 周辺減光。中央をわずかに持ち上げ、四隅を沈ませて奥行きを出す */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(120% 92% at 50% 34%,
      rgba(28, 122, 62, .17) 0%, rgba(28, 122, 62, 0) 48%),
    radial-gradient(126% 100% at 50% 42%,
      rgba(0,0,0,0) 30%, rgba(0, 0, 0, .6) 100%);
}

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

.site-header.is-scrolled {
  background: rgba(5, 18, 10, .9);
  box-shadow: 0 1px 0 var(--line);
}

/* ---------- ヒーロー ---------- */
.hero__bg {
  filter: brightness(1.55);
  background-color: var(--base);
  background-image: var(--img, radial-gradient(120% 90% at 78% 16%, #16351E 0%, #0B2211 42%, #05120A 100%));
}
.hero__bg::after {
  /* 写真が入ったので、文字の乗る左側だけを沈め、右の光はそのまま通す */
  background:
    /* ヘッダーの帯。ナビが光の上に乗っても読めるように */
    linear-gradient(180deg, rgba(5,18,10,.62) 0%, rgba(5,18,10,0) 17%),
    linear-gradient(100deg, rgba(5,18,10,.88) 0%, rgba(5,18,10,.5) 42%, rgba(5,18,10,0) 76%),
    linear-gradient(0deg, rgba(0,0,0,.4), rgba(0,0,0,0) 30%);
}
.hero__label { color: var(--accent); }
.hero__title { color: var(--ink); }

/* ---------- 写真プレースホルダ ---------- */
.media {
  /* 生成写真が非常に暗いため、写真層だけを持ち上げる（数値を下げれば元の暗さに戻ります） */
  filter: brightness(1.5);
  background-color: #0A1C10;
  background-image: var(--img, linear-gradient(155deg, #17351D 0%, #0D2412 55%, #06150B 100%));
}
.media::after {
  background: linear-gradient(180deg, rgba(241,238,227,.04), rgba(0,0,0,.16));
}

/* ---------- カード類 ---------- */
.plan,
.voice {
  background: rgba(241, 238, 227, .04);
  border-color: var(--line);
}
.plan--featured {
  background: rgba(198, 172, 123, .07);
  border-color: rgba(198, 172, 123, .5);
  box-shadow: 0 24px 60px -34px rgba(0, 0, 0, 1);
}
.plan__tag { color: #05120A; }

/* ---------- ボタン ---------- */
.btn {
  background: var(--accent);
  border-color: var(--accent);
  color: #05120A;
}
.btn:hover {
  background: transparent;
  border-color: var(--accent);
  color: var(--accent);
}
.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: rgba(241, 238, 227, .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: #05120A;
}
.cta .btn:hover {
  background: transparent;
  color: var(--accent);
  border-color: var(--accent);
}

.field input,
.field select,
.field textarea {
  background: rgba(241, 238, 227, .055);
  border-color: rgba(241, 238, 227, .2);
  color: var(--ink);
}
.field input::placeholder,
.field textarea::placeholder { color: rgba(241, 238, 227, .32); }
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--accent);
  background: rgba(241, 238, 227, .085);
}
/* セレクトのプルダウンもダークに揃える */
.field select { color-scheme: dark; }

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