/* ================================================================
   HOSHIKAMI — グローバル スピリチュアルテーマ v2
   テーマ : 幻想的・神秘的・女性向け・明るい
   カラー : ラベンダー系グラデーション + ゴールド + ピンク
   対象  : 全ページ（style.css の後に wp_enqueue で読み込み）
   方針  : 既存レイアウト（padding/margin/grid/flex）は変更しない。
            色・背景・テキスト・装飾のみ上書き。
   ================================================================ */


/* ─────────────────────────────────────────────
   DESIGN TOKENS — 新カラーパレット
───────────────────────────────────────────── */
:root {
    /* ── 深いネイビー背景ファミリー ── */
    --hk-t-bg-start:     #04060f;   /* グラデーション始端（最暗） */
    --hk-t-bg-mid-a:     #0a0c22;
    --hk-t-bg-mid-b:     #120f35;   /* ミッドナイトネイビー */
    --hk-t-bg-mid-c:     #1a1245;
    --hk-t-bg-end:       #1e1640;   /* グラデーション終端（深いネイビー） */

    /* ── メインカラー ── */
    --hk-t-main:         #6C63FF;
    --hk-t-main-deep:    #4B42D8;
    --hk-t-main-light:   #A6B1FF;

    /* ── ゴールドアクセント ── */
    --hk-t-gold:         #FFD166;
    --hk-t-gold-light:   #FFE090;
    --hk-t-gold-deep:    #E8B800;

    /* ── 女性向け ピンク ── */
    --hk-t-pink:         #FFB7D5;
    --hk-t-pink-deep:    #FF85B5;
    --hk-t-pink-soft:    #FFD9EC;

    /* ── テキスト（ライト背景用: 暗いパープル系） ── */
    --hk-t-text:         #2D2780;   /* メインテキスト */
    --hk-t-text-sub:     #4B4598;   /* サブテキスト */
    --hk-t-text-muted:   #7870A8;   /* ミュートテキスト */
    --hk-t-text-hero:    #FFE090;   /* ヒーロー（暗い bg 上）*/

    /* ── カード・サーフェス ── */
    --hk-t-card:         #FFFFFF;
    --hk-t-card-tinted:  rgba(255,255,255,.80);
    --hk-t-card-border:  rgba(108,99,255,.14);

    /* ── グラデーション ── */
    --hk-t-grad-bg:      linear-gradient(160deg,
                             #04060f  0%,
                             #0a0c22 25%,
                             #120f35 55%,
                             #1e1640 100%);
    --hk-t-grad-main:    linear-gradient(135deg, #6C63FF 0%, #9490FF 100%);
    --hk-t-grad-gold:    linear-gradient(135deg, #FFD166 0%, #FFE090 50%, #FFD166 100%);
    --hk-t-grad-pink:    linear-gradient(135deg, #FFB7D5 0%, #FFD9EC 100%);
    --hk-t-grad-card:    linear-gradient(145deg,
                             rgba(255,255,255,.98) 0%,
                             rgba(240,242,255,.95) 100%);

    /* ── シャドウ・グロー ── */
    --hk-t-shadow:       0 8px 36px rgba(108,99,255,.14), 0 2px 8px rgba(108,99,255,.07);
    --hk-t-shadow-card:  0 4px 24px rgba(108,99,255,.10), 0 1px 4px rgba(255,183,213,.08);
    --hk-t-glow-gold:    0 0 22px rgba(255,209,102,.45), 0 0 56px rgba(255,209,102,.16);
    --hk-t-glow-pink:    0 0 22px rgba(255,183,213,.42), 0 0 52px rgba(255,183,213,.14);
    --hk-t-glow-main:    0 0 22px rgba(108,99,255,.38), 0 0 56px rgba(108,99,255,.12);

    /* ── フォント ── */
    --hk-t-font-jp:      'Noto Serif JP', 'Hiragino Mincho ProN', 'Yu Mincho', serif;
    --hk-t-font-sub:     'Shippori Mincho', 'Hiragino Mincho ProN', 'Yu Mincho', serif;

    /* === 背景 === */
    --bg-deepest:    #04060f;
    --bg-base:       #0a0c22;
    --bg-surface:    #120f35;
    --bg-elevated:   rgba(24,21,71,0.9);
    --bg-form:       rgba(10,13,30,0.85);
    --bg-overlay:    rgba(4,6,15,0.92);

    /* === テキスト === */
    --text-primary:   #EEF0FF;
    --text-secondary: rgba(200,204,255,0.80);
    --text-muted:     rgba(166,177,255,0.60);
    --text-heading:   #FFE090;
    --text-on-gold:   #04060f;

    /* === アクセント（ゴールド） === */
    --gold:          #FFD166;
    --gold-bright:   #FFE090;
    --gold-dim:      rgba(255,209,102,0.60);
    --gold-subtle:   rgba(255,209,102,0.25);
    --gold-glow:     rgba(255,209,102,0.12);

    /* === アクセント（ローズ） ※旧 accent-vermilion から改名 === */
    --accent-rose:   #FFB7D5;

    /* === ボーダー === */
    --border-gold:   rgba(255,209,102,0.25);
    --border-form:   rgba(255,209,102,0.40);
    --border-card:   rgba(255,209,102,0.20);

    /* === グラデーション === */
    --gradient-hero: linear-gradient(135deg, #04060f 0%, #1e1640 100%);
    --gradient-cta:  linear-gradient(135deg, #FFD166 0%, #FFE090 100%);
    --gradient-card: linear-gradient(135deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.02) 100%);

    /* === シャドウ === */
    --shadow-card:   0 4px 24px rgba(0,0,0,0.45);
    --shadow-btn:    0 2px 12px rgba(255,209,102,0.20);

    /* === タイポグラフィ === */
    --tracking-heading: 0.12em;
    --tracking-body:    0.03em;
    --leading-body:     1.9;

    /* === 角丸 === */
    --radius-sm:   6px;
    --radius-md:   12px;
    --radius-lg:   20px;
    --radius-pill: 50px;

    /* === 後方互換エイリアス（既存コードが壊れないよう残す） === */
    --primary-navy:    var(--bg-deepest);
    --primary-indigo:  var(--bg-base);
    --primary-purple:  var(--bg-surface);
    --accent-gold:     var(--gold);
    --accent-vermilion: var(--accent-rose);
    --bg-white:        var(--bg-base);
    --bg-light:        var(--bg-surface);
    --text-dark:       var(--text-primary);
    --text-gray:       var(--text-secondary);
    --secondary-color: var(--text-muted);
    --border-color:    var(--border-gold);
    --card-shadow:     var(--shadow-card);
}


/* ─────────────────────────────────────────────
   BODY — ラベンダーグラデーション背景
───────────────────────────────────────────── */
body {
    background: var(--hk-t-grad-bg) fixed !important;
    background-size: cover !important;
    color: rgba(238,240,255,.88) !important;
    font-family: var(--hk-t-font-jp);
}


/* ─────────────────────────────────────────────
   BODY::BEFORE — 星屑 + 光の粒子フィールド
   ラベンダー背景に映えるゴールド・ピンク・白のスパークル
───────────────────────────────────────────── */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-image:
        /* ─ 白い星（上段の濃い紫エリアで輝く）─ */
        radial-gradient(1.5px 1.5px at  4%  2%, rgba(255,255,255,.90) 0%, transparent 100%),
        radial-gradient(1px   1px   at 11%  8%, rgba(255,255,255,.75) 0%, transparent 100%),
        radial-gradient(1.5px 1.5px at 19%  4%, rgba(255,255,255,.85) 0%, transparent 100%),
        radial-gradient(1px   1px   at 27% 12%, rgba(255,255,255,.65) 0%, transparent 100%),
        radial-gradient(1.5px 1.5px at 35%  2%, rgba(255,255,255,.82) 0%, transparent 100%),
        radial-gradient(1px   1px   at 43%  9%, rgba(255,255,255,.70) 0%, transparent 100%),
        radial-gradient(1.5px 1.5px at 52%  5%, rgba(255,255,255,.88) 0%, transparent 100%),
        radial-gradient(1px   1px   at 61% 14%, rgba(255,255,255,.62) 0%, transparent 100%),
        radial-gradient(1.5px 1.5px at 70%  3%, rgba(255,255,255,.78) 0%, transparent 100%),
        radial-gradient(1px   1px   at 80%  9%, rgba(255,255,255,.85) 0%, transparent 100%),
        radial-gradient(1.5px 1.5px at 89%  1%, rgba(255,255,255,.90) 0%, transparent 100%),
        radial-gradient(1px   1px   at 96%  7%, rgba(255,255,255,.72) 0%, transparent 100%),
        radial-gradient(1px   1px   at  8% 18%, rgba(255,255,255,.60) 0%, transparent 100%),
        radial-gradient(1.5px 1.5px at 24% 22%, rgba(255,255,255,.75) 0%, transparent 100%),
        radial-gradient(1px   1px   at 48% 20%, rgba(255,255,255,.55) 0%, transparent 100%),
        radial-gradient(1px   1px   at 66% 25%, rgba(255,255,255,.68) 0%, transparent 100%),
        radial-gradient(1.5px 1.5px at 84% 18%, rgba(255,255,255,.80) 0%, transparent 100%),
        /* ─ ゴールドの星（全体に輝く、主役スパークル）─ */
        radial-gradient(2px   2px   at 16% 14%, rgba(255,209,102,.88) 0%, transparent 100%),
        radial-gradient(2.5px 2.5px at 33%  7%, rgba(255,209,102,.78) 0%, transparent 100%),
        radial-gradient(2px   2px   at 54% 18%, rgba(255,209,102,.82) 0%, transparent 100%),
        radial-gradient(2.5px 2.5px at 73%  9%, rgba(255,209,102,.72) 0%, transparent 100%),
        radial-gradient(2px   2px   at 88% 22%, rgba(255,209,102,.85) 0%, transparent 100%),
        radial-gradient(1.5px 1.5px at  7% 38%, rgba(255,209,102,.65) 0%, transparent 100%),
        radial-gradient(2px   2px   at 28% 44%, rgba(255,209,102,.75) 0%, transparent 100%),
        radial-gradient(2px   2px   at 47% 36%, rgba(255,209,102,.70) 0%, transparent 100%),
        radial-gradient(2.5px 2.5px at 63% 50%, rgba(255,209,102,.80) 0%, transparent 100%),
        radial-gradient(2px   2px   at 80% 40%, rgba(255,209,102,.62) 0%, transparent 100%),
        radial-gradient(2px   2px   at 94% 55%, rgba(255,209,102,.72) 0%, transparent 100%),
        radial-gradient(1.5px 1.5px at 20% 65%, rgba(255,209,102,.60) 0%, transparent 100%),
        radial-gradient(2px   2px   at 41% 72%, rgba(255,209,102,.68) 0%, transparent 100%),
        radial-gradient(2.5px 2.5px at 57% 60%, rgba(255,209,102,.75) 0%, transparent 100%),
        radial-gradient(2px   2px   at 76% 78%, rgba(255,209,102,.65) 0%, transparent 100%),
        radial-gradient(1.5px 1.5px at 90% 68%, rgba(255,209,102,.58) 0%, transparent 100%),
        radial-gradient(2px   2px   at 12% 85%, rgba(255,209,102,.55) 0%, transparent 100%),
        radial-gradient(2px   2px   at 35% 92%, rgba(255,209,102,.62) 0%, transparent 100%),
        radial-gradient(2.5px 2.5px at 60% 88%, rgba(255,209,102,.70) 0%, transparent 100%),
        radial-gradient(2px   2px   at 82% 95%, rgba(255,209,102,.58) 0%, transparent 100%),
        /* ─ ピンクのスパークル（女性向け装飾）─ */
        radial-gradient(2px   2px   at 22% 30%, rgba(255,183,213,.80) 0%, transparent 100%),
        radial-gradient(2.5px 2.5px at 45% 25%, rgba(255,183,213,.72) 0%, transparent 100%),
        radial-gradient(2px   2px   at 68% 35%, rgba(255,183,213,.78) 0%, transparent 100%),
        radial-gradient(1.5px 1.5px at  5% 55%, rgba(255,183,213,.65) 0%, transparent 100%),
        radial-gradient(2px   2px   at 38% 58%, rgba(255,183,213,.70) 0%, transparent 100%),
        radial-gradient(2.5px 2.5px at 72% 62%, rgba(255,183,213,.75) 0%, transparent 100%),
        radial-gradient(2px   2px   at 15% 78%, rgba(255,183,213,.60) 0%, transparent 100%),
        radial-gradient(2px   2px   at 52% 82%, rgba(255,183,213,.68) 0%, transparent 100%),
        radial-gradient(2.5px 2.5px at 85% 75%, rgba(255,183,213,.72) 0%, transparent 100%),
        radial-gradient(2px   2px   at 30% 95%, rgba(255,183,213,.55) 0%, transparent 100%),
        radial-gradient(1.5px 1.5px at 65% 90%, rgba(255,183,213,.62) 0%, transparent 100%),
        /* ─ パープルのスパークル（ラベンダー濃いめエリアに）─ */
        radial-gradient(1.5px 1.5px at 50% 15%, rgba(196,181,255,.80) 0%, transparent 100%),
        radial-gradient(1.5px 1.5px at 77% 32%, rgba(196,181,255,.70) 0%, transparent 100%),
        radial-gradient(1.5px 1.5px at 10% 48%, rgba(196,181,255,.65) 0%, transparent 100%),
        radial-gradient(1.5px 1.5px at 93% 42%, rgba(196,181,255,.72) 0%, transparent 100%);
    animation: hkt-sparkle-breathe 9s ease-in-out infinite;
}

/* スパークルのブレスアニメーション */
@keyframes hkt-sparkle-breathe {
    0%,  100% { opacity: .82; transform: scale(1); }
    30%        { opacity: 1;   transform: scale(1.01); }
    60%        { opacity: .90; transform: scale(.99); }
}


/* ─────────────────────────────────────────────
   BODY::AFTER — 月光 / 魔法の光のグロー（右上）
───────────────────────────────────────────── */
body::after {
    content: '';
    position: fixed;
    pointer-events: none;
    z-index: 0;
    top: -8vw;
    right: -8vw;
    width: 45vw;
    height: 45vw;
    min-width: 220px;
    min-height: 220px;
    max-width: 440px;
    max-height: 440px;
    border-radius: 50%;
    /* 月光：白 → ゴールド → ピンク → 透明 */
    background: radial-gradient(circle at 38% 38%,
        rgba(255,255,255,.72)   0%,
        rgba(255,224,144,.38)  20%,
        rgba(255,183,213,.22)  42%,
        rgba(108, 99,255,.10)  62%,
        transparent            82%);
    box-shadow:
        0 0  60px rgba(255,255,255,.18),
        0 0 130px rgba(255,209,102,.10),
        0 0 240px rgba(255,183,213,.06);
    animation: hkt-moon-glow 13s ease-in-out infinite;
}

@keyframes hkt-moon-glow {
    0%,  100% { opacity: .88; transform: scale(1)    translate(0, 0); }
    40%        { opacity: 1;   transform: scale(1.05) translate(-1%,  1%); }
    70%        { opacity: .80; transform: scale(.96)  translate( 1%, -1%); }
}


/* ─────────────────────────────────────────────
   コンテンツ z-index（背景レイヤーより前面）
───────────────────────────────────────────── */
.site-header,
.site-wrapper,
main, #main,
article,
.container,
.hero-section,
.diagnosis-section,
.about-section,
.features-section,
.membership-section,
.testimonials-section,
.cta-section,
.site-footer,
footer {
    position: relative;
    z-index: 1;
}


/* ─────────────────────────────────────────────
   サイトヘッダー — フロストグラス（白）
───────────────────────────────────────────── */
.site-header {
    background: rgba(4,6,15,.85) !important;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-bottom: 1px solid rgba(255,209,102,.14) !important;
    box-shadow: 0 2px 24px rgba(0,0,0,.45) !important;
}

.header-logo h1,
.site-logo,
.logo-text {
    color: var(--hk-t-gold-light) !important;
    text-shadow: 0 0 20px rgba(255,209,102,.30);
}

.logo-subtitle {
    color: rgba(196,181,255,.70) !important;
}

/* ナビゲーション */
.nav-list a,
.header-nav a,
.gnav a {
    color: var(--text-secondary) !important;
    transition: color .2s !important;
}

.nav-list a:hover,
.header-nav a:hover,
.header-nav a.active,
.gnav a:hover {
    color: var(--gold) !important;
}

/* ヘッダーCTAボタン */
.btn-cta-header {
    background: var(--gradient-cta) !important;
    border: none !important;
    color: var(--text-on-gold) !important;
    border-radius: var(--radius-pill) !important;
    padding: 10px 22px !important;
    font-weight: 600 !important;
    letter-spacing: 0.03em !important;
    box-shadow: var(--shadow-btn) !important;
    transition: opacity 0.2s !important;
}

.btn-cta-header:hover {
    opacity: 0.88 !important;
    color: var(--text-on-gold) !important;
}

/* ログインボタン */
.btn-login-small {
    border: 1px solid rgba(255,209,102,.25) !important;
    color: rgba(196,181,255,.88) !important;
    border-radius: 20px !important;
    background: rgba(255,255,255,.06) !important;
    transition: all .3s ease;
}

.btn-login-small:hover {
    background: rgba(255,209,102,.10) !important;
    border-color: rgba(255,209,102,.45) !important;
    color: var(--hk-t-gold) !important;
}

/* ハンバーガーメニュー */
.hamburger span,
.hamburger .bar,
.hamburger-line {
    background: rgba(238,240,255,.88) !important;
}

/* モバイルメニュー */
.mobile-menu,
.mobile-nav {
    background: rgba(4,6,15,.96) !important;
    border-top: 1px solid rgba(255,209,102,.12) !important;
}

.mobile-nav-list a,
.mobile-menu a,
.mobile-menu li a {
    color: rgba(196,181,255,.88) !important;
    border-bottom: 1px solid rgba(255,209,102,.08) !important;
}

.mobile-nav-list a:hover,
.mobile-menu a:hover {
    color: var(--hk-t-gold) !important;
    background: rgba(255,209,102,.06) !important;
}


/* ─────────────────────────────────────────────
   ヒーローセクション
───────────────────────────────────────────── */
.hero-section {
    background-color: transparent !important;
    background-image:
        linear-gradient(180deg,
            rgba(108, 99,255,.50)  0%,
            rgba(108, 99,255,.28) 40%,
            rgba(166,177,255,.18) 75%,
            rgba(246,247,255,.05) 100%
        ),
        url('https://kamihoshi.d-sky-n.com/wp-content/themes/hoshikami_hp/images/hero-background.jpg') !important;
    background-position: center top !important;
    background-size: min(1024px, 100%) auto !important;
    background-repeat: no-repeat !important;
    position: relative !important;
    overflow: hidden !important;
}

/* ヒーロー上部 — ゴールド光芒 */
.hero-section::before {
    content: '';
    position: absolute;
    top: 0; left: 50%;
    transform: translateX(-50%);
    width: 100%; max-width: 720px; height: 320px;
    background: radial-gradient(ellipse at 50% 0%,
        rgba(255,209,102,.18)  0%,
        rgba(255,183,213,.10)  30%,
        transparent            65%);
    pointer-events: none; z-index: 0;
}

/* ヒーロー下部 — 柔らかなピンク・ラベンダー */
.hero-section::after {
    content: '';
    position: absolute;
    bottom: 0; left: 50%;
    transform: translateX(-50%);
    width: 100%; height: 220px;
    background: radial-gradient(ellipse at 50% 100%,
        rgba(255,183,213,.20)  0%,
        rgba(108, 99,255,.10)  40%,
        transparent            70%);
    pointer-events: none; z-index: 0;
}

.hero-content {
    position: relative;
    z-index: 1;
}

/* タイトル（ヒーロー上：濃い紫背景 → ゴールドが映える）*/
.hero-title {
    color: var(--hk-t-gold-light) !important;
    font-family: var(--hk-t-font-jp) !important;
    text-shadow:
        0 0 44px rgba(255,209,102,.30),
        0 2px 16px rgba(0,0,0,.30) !important;
}

.hero-subtitle {
    color: rgba(255,255,255,.92) !important;
    opacity: 1 !important;
}

/* ヒーローCTAボタン */
.btn-hero-cta {
    background: var(--hk-t-grad-gold) !important;
    color: #2D2780 !important;
    font-family: var(--hk-t-font-jp) !important;
    font-weight: 700 !important;
    border-radius: 50px !important;
    letter-spacing: .20em;
    box-shadow: 0 8px 28px rgba(255,209,102,.45), 0 0 50px rgba(255,209,102,.14) !important;
    transition: all .35s ease !important;
}

.btn-hero-cta:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 12px 36px rgba(255,209,102,.55), 0 0 70px rgba(255,209,102,.20) !important;
}

/* 既存 .hero-stars を強化 */
.hero-stars {
    background-image:
        radial-gradient(2.5px 2.5px at 20% 30%, rgba(255,209,102,.95), transparent),
        radial-gradient(2px   2px   at 60% 70%, rgba(255,255,255,.85), transparent),
        radial-gradient(2.5px 2.5px at 50% 50%, rgba(255,183,213,.90), transparent),
        radial-gradient(1.5px 1.5px at 80% 10%, rgba(255,209,102,.78), transparent),
        radial-gradient(2px   2px   at 90% 60%, rgba(255,255,255,.82), transparent),
        radial-gradient(1.5px 1.5px at 33% 80%, rgba(255,183,213,.75), transparent),
        radial-gradient(2px   2px   at 15% 20%, rgba(255,209,102,.70), transparent),
        radial-gradient(1.5px 1.5px at 70% 40%, rgba(255,255,255,.65), transparent),
        radial-gradient(2.5px 2.5px at 45% 15%, rgba(255,209,102,.88), transparent),
        radial-gradient(1.5px 1.5px at 25% 65%, rgba(255,183,213,.72), transparent),
        radial-gradient(2px   2px   at 55% 85%, rgba(255,255,255,.78), transparent),
        radial-gradient(1.5px 1.5px at 85% 30%, rgba(255,209,102,.65), transparent) !important;
    animation: hkt-hero-sparkle 7s ease-in-out infinite !important;
    opacity: .85 !important;
}

@keyframes hkt-hero-sparkle {
    0%,  100% { opacity: .75; transform: scale(1); }
    35%        { opacity: 1;   transform: scale(1.03); }
    60%        { opacity: .88; transform: scale(1.01); }
}

/* スクロールインジケーター */
.scroll-indicator { color: rgba(255,255,255,.80) !important; }
.scroll-arrow { border-color: rgba(255,255,255,.80) !important; }


/* ─────────────────────────────────────────────
   テキスト全般
───────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
    color: var(--hk-t-gold-light) !important;
    font-family: var(--hk-t-font-jp) !important;
}

p {
    color: rgba(196,181,255,.88);
}

a {
    color: var(--hk-t-gold);
    transition: color .3s ease;
}

a:hover {
    color: var(--hk-t-gold-light);
}

/* セクションタイトル */
.section-title {
    color: var(--hk-t-gold-light) !important;
    font-family: var(--hk-t-font-jp) !important;
    letter-spacing: .18em;
}


/* ─────────────────────────────────────────────
   診断セクション
───────────────────────────────────────────── */
.diagnosis-section,
#diagnosis {
    background-color: transparent !important;
    background-image: none !important;
    position: relative;
}

/* 上部区切りライン */
.diagnosis-section::before,
#diagnosis::before {
    content: '';
    position: absolute;
    top: 0; left: 50%;
    transform: translateX(-50%);
    width: 60%; height: 1px;
    background: linear-gradient(90deg,
        transparent,
        rgba(108,99,255,.28),
        rgba(255,183,213,.28),
        transparent);
    pointer-events: none;
}

/* 診断カード */
.diagnosis-card {
    background: rgba(18,15,53,0.80) !important;
    border: 1px solid var(--border-card) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-card) !important;
    backdrop-filter: blur(6px);
    position: relative;
    overflow: hidden;
}

/* 上辺アクセントライン（ゴールド → ピンク） */
.diagnosis-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, #FFD166 0%, #FFB7D5 50%, #A6B1FF 100%);
    opacity: .80;
    pointer-events: none;
}

.form-label {
    color: rgba(255,209,102,0.85) !important;
    font-family: var(--hk-t-font-sub) !important;
    font-size: 0.875rem !important;
    letter-spacing: 0.05em !important;
}

.diagnosis-form input[type="date"],
.diagnosis-form input[type="text"],
.form-input {
    background: var(--bg-form) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-form) !important;
    border-radius: var(--radius-sm) !important;
    color-scheme: dark;
    transition: border-color .3s, box-shadow .3s;
}

.diagnosis-form input[type="date"]:focus,
.diagnosis-form input[type="text"]:focus,
.form-input:focus {
    outline: none !important;
    border-color: var(--gold) !important;
    box-shadow: 0 0 0 2px var(--gold-glow) !important;
}

.form-note {
    color: var(--hk-t-text-muted) !important;
}

/* 診断ボタン */
.btn-diagnosis {
    background: var(--gradient-cta) !important;
    color: var(--text-on-gold) !important;
    border: none !important;
    border-radius: var(--radius-pill) !important;
    padding: 14px 40px !important;
    font-family: var(--hk-t-font-jp) !important;
    letter-spacing: .28em;
    font-weight: 600 !important;
    cursor: pointer !important;
    box-shadow: var(--shadow-btn) !important;
    transition: opacity 0.2s, transform .3s ease !important;
}

.btn-diagnosis:hover {
    opacity: 0.9 !important;
    transform: translateY(-2px) !important;
}

/* チョイスボタン */
.choice-button {
    background: var(--hk-t-grad-gold) !important;
    color: #2D2780 !important;
    border: none !important;
    border-radius: 12px !important;
    font-weight: 700 !important;
    box-shadow: 0 6px 20px rgba(255,209,102,.32) !important;
    transition: all .3s ease !important;
}

.choice-button:hover {
    box-shadow: var(--hk-t-glow-gold) !important;
    transform: translateY(-2px) !important;
}


/* ─────────────────────────────────────────────
   占い結果カード
───────────────────────────────────────────── */
.fortune-results {
    animation: hkt-fade-up .8s ease both;
}

@keyframes hkt-fade-up {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

.result-card {
    background: var(--hk-t-card) !important;
    border: 1px solid rgba(108,99,255,.12) !important;
    border-radius: 20px !important;
    box-shadow: var(--hk-t-shadow-card) !important;
    backdrop-filter: blur(6px);
    position: relative;
    overflow: hidden;
}

/* 上辺カラーライン */
.result-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg,
        #A6B1FF 0%,
        #FFB7D5 35%,
        #FFD166 65%,
        #A6B1FF 100%);
    pointer-events: none;
}

.result-title {
    color: var(--hk-t-main) !important;
    font-family: var(--hk-t-font-jp) !important;
    letter-spacing: .14em;
}


/* ─────────────────────────────────────────────
   守護神ブロック
───────────────────────────────────────────── */
.guardian-info {
    background: rgba(246,247,255,.85) !important;
    border: 1px solid rgba(108,99,255,.10) !important;
    border-radius: 12px !important;
}

.guardian-name,
.guardian-title .guardian-guardian {
    color: var(--hk-t-main-deep) !important;
    text-shadow: none !important;
}

.guardian-reading {
    color: var(--hk-t-text-muted) !important;
}

.guardian-element,
.guardian-quality {
    color: var(--hk-t-text-sub) !important;
}

.guardian-desc,
#ns-guardian,
#ns-guardian p {
    color: var(--text-secondary) !important;
}

/* 神社リスト */
.guardian-shrines {
    background: rgba(10,13,30,0.6) !important;
    border: 1px solid var(--border-gold) !important;
    border-radius: var(--radius-sm) !important;
}

.guardian-shrines-title {
    color: var(--gold-dim) !important;
    border-bottom-color: var(--border-gold) !important;
}

.guardian-shrines-list {
    color: var(--hk-t-text-sub) !important;
}

/* 特性リスト */
.ns-feature-list li {
    color: var(--hk-t-text) !important;
    border-bottom: 1px solid rgba(108,99,255,.08) !important;
}

.ns-feature-list li:last-child {
    border-bottom: none !important;
}


/* ─────────────────────────────────────────────
   HOSHIKAMIとは（about セクション）
───────────────────────────────────────────── */
.about-section {
    background: rgba(30,22,64,.52) !important;
    border-top: 1px solid rgba(255,209,102,.10);
    border-bottom: 1px solid rgba(255,209,102,.10);
}

.about-lead {
    color: var(--hk-t-gold-light) !important;
}

.about-description {
    color: rgba(196,181,255,.88) !important;
}

/* 特徴カード */
.feature-item,
.about-feature,
.feature-card {
    background: var(--hk-t-card) !important;
    border: 1px solid rgba(108,99,255,.10) !important;
    border-radius: 16px !important;
    box-shadow: var(--hk-t-shadow-card) !important;
}

.feature-icon,
.feature-item .icon {
    color: var(--hk-t-gold) !important;
}

.feature-title,
.feature-item h3 {
    color: var(--hk-t-main) !important;
}

.feature-desc,
.feature-item p {
    color: var(--hk-t-text-sub) !important;
}


/* ─────────────────────────────────────────────
   会員プランセクション
───────────────────────────────────────────── */
.membership-section,
.plans-section,
.pricing-section {
    background: rgba(30,22,64,.45) !important;
}

.membership-card,
.plan-card,
.pricing-card {
    background: var(--hk-t-card) !important;
    border: 1px solid rgba(108,99,255,.12) !important;
    border-radius: 20px !important;
    box-shadow: var(--hk-t-shadow-card) !important;
}

.membership-card.featured,
.plan-card.recommended {
    border-color: var(--hk-t-gold) !important;
    box-shadow: 0 0 0 2px rgba(255,209,102,.30), var(--hk-t-shadow) !important;
}

/* 会員ゲートモーダル */
.membership-gate {
    background: linear-gradient(135deg,
        rgba(108, 99,255,.85) 0%,
        rgba(166,177,255,.90) 100%) !important;
    border: 1px solid rgba(255,255,255,.30) !important;
    border-radius: 20px !important;
    box-shadow: 0 16px 56px rgba(108,99,255,.28) !important;
}

.membership-title {
    color: #FFFFFF !important;
}

.membership-desc {
    color: rgba(255,255,255,.92) !important;
}

.btn-membership-signup,
.btn-membership {
    background: var(--hk-t-grad-gold) !important;
    color: #2D2780 !important;
    border-radius: 50px !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 18px rgba(255,209,102,.35) !important;
    transition: all .3s ease !important;
}

.btn-membership-signup:hover,
.btn-membership:hover {
    box-shadow: var(--hk-t-glow-gold) !important;
    transform: translateY(-2px) !important;
}


/* ─────────────────────────────────────────────
   ボタン汎用
───────────────────────────────────────────── */
.btn-back {
    background: var(--hk-t-grad-main) !important;
    border: none !important;
    border-radius: 12px !important;
    color: #FFFFFF !important;
    box-shadow: 0 6px 22px rgba(108,99,255,.28) !important;
    transition: all .3s ease !important;
}

.btn-back:hover {
    box-shadow: var(--hk-t-glow-main) !important;
    transform: translateY(-2px) !important;
}

.btn-primary:not(.pmpro_btn):not(.pmpro_checkout-button) {
    background: var(--hk-t-grad-gold) !important;
    color: #2D2780 !important;
    border-radius: 50px !important;
    font-weight: 700 !important;
    transition: all .3s ease !important;
}

.btn-primary:not(.pmpro_btn):not(.pmpro_checkout-button):hover {
    box-shadow: var(--hk-t-glow-gold) !important;
}


/* ─────────────────────────────────────────────
   テスティモニアル / 口コミ
───────────────────────────────────────────── */
.testimonial-card,
.review-card,
.voice-card {
    background: var(--hk-t-card) !important;
    border: 1px solid rgba(255,183,213,.22) !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 20px rgba(255,183,213,.14) !important;
}

.testimonial-text,
.review-text {
    color: var(--hk-t-text-sub) !important;
}

.testimonial-author,
.review-author {
    color: var(--hk-t-main) !important;
}


/* ─────────────────────────────────────────────
   静的ページ / エントリーコンテンツ
───────────────────────────────────────────── */
.entry-content,
.page-content,
article.post,
article.page {
    color: var(--hk-t-text-sub);
}

.entry-content a,
.page-content a {
    color: var(--hk-t-main);
    text-decoration-color: rgba(108,99,255,.30);
}

.entry-content a:hover,
.page-content a:hover {
    color: var(--hk-t-main-deep);
}

.entry-content h2,
.entry-content h3,
.page-content h2,
.page-content h3 {
    color: var(--hk-t-main) !important;
}


/* ─────────────────────────────────────────────
   HR / 区切り線
───────────────────────────────────────────── */
hr,
.divider,
.sep {
    border: none !important;
    border-top: 1px solid rgba(108,99,255,.14) !important;
    margin: 36px 0 !important;
}


/* ─────────────────────────────────────────────
   フッター
───────────────────────────────────────────── */
.site-footer,
footer {
    background: rgba(4,6,15,.92) !important;
    border-top: 1px solid rgba(255,209,102,.12) !important;
    color: rgba(166,177,255,.75) !important;
    position: relative;
    z-index: 1;
}

.site-footer h2,
.site-footer h3,
.site-footer h4,
footer h2,
footer h3,
footer h4 {
    color: var(--hk-t-gold-light) !important;
}

.site-footer p,
.site-footer span,
footer p,
footer span {
    color: rgba(200,204,255,0.70) !important;
}

.site-footer a,
footer a {
    color: rgba(200,204,255,0.70) !important;
    transition: color .2s !important;
}

.site-footer a:hover,
footer a:hover {
    color: var(--gold) !important;
}

.site-footer .footer-brand,
footer .hoshikami-brand {
    color: var(--gold) !important;
}

.footer-copyright,
footer .copyright,
footer .copy {
    color: rgba(166,177,255,0.45) !important;
    font-size: 0.8rem !important;
}


/* ─────────────────────────────────────────────
   スクロールバー（WebKit系）
───────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #04060f; }
::-webkit-scrollbar-thumb {
    background: rgba(255,209,102,.22);
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(255,183,213,.45);
}

/* テキスト選択 */
::selection {
    background: rgba(255,209,102,.25);
    color: #FFE090;
}


/* ─────────────────────────────────────────────
   モバイル — 色のみ上書き（レイアウト変更なし）
───────────────────────────────────────────── */
@media (max-width: 768px) {
    /* style.css @media 内の白カード上書き（ライトテーマに合わせる）*/
    .card,
    .card-item,
    .panel,
    .tile,
    .section-card,
    .ns-item,
    .feature-item,
    .deity-card {
        background: var(--hk-t-card) !important;
        border: 1px solid rgba(108,99,255,.12) !important;
        border-radius: 12px !important;
        box-shadow: var(--hk-t-shadow-card) !important;
        color: var(--hk-t-text) !important;
    }

    /* 強調色はゴールドに統一 */
    .btn-primary:not(.pmpro_btn),
    .accent,
    .highlight,
    .ns-label,
    .highlight-text {
        background: var(--hk-t-grad-gold) !important;
        color: #2D2780 !important;
    }

    /* フォーム */
    input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]),
    textarea,
    select {
        background: rgba(240,241,255,.80) !important;
        border-color: rgba(108,99,255,.22) !important;
        border-radius: 8px !important;
    }

    /* 区切り線 */
    hr,
    .divider,
    .sep {
        border-top-color: rgba(108,99,255,.12) !important;
    }
}

@media (max-width: 480px) {
    .hero-title {
        font-size: 32px !important;
    }
}


/* ─────────────────────────────────────────────
   縁結の儀（kigaku 九星気学）カラー修正
   kigaku-diagnosis.css の --kg-* 変数を暗背景向けに上書き
───────────────────────────────────────────── */
.kigaku-wrap {
    --kg-text:        #EEF0FF;                    /* 旧: #1c1408（黒）→ 白系 */
    --kg-text-mid:    rgba(200,204,255,0.80);
    --kg-text-light:  rgba(166,177,255,0.60);
    --kg-card:        rgba(18,15,53,0.80);
    --kg-card-alt:    rgba(10,13,30,0.85);
    --kg-card-deep:   rgba(4,6,15,0.90);
}

/* ラベル（「あなた」「お相手」）をゴールドに */
.kigaku-person-card__label {
    color: rgba(255,209,102,0.85) !important;
    font-size: 0.8rem !important;
    letter-spacing: 0.08em !important;
}

/* 入力欄 */
.kigaku-person-card input[type="date"],
.kigaku-person-card input[type="text"] {
    background: var(--bg-form) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-form) !important;
    border-radius: var(--radius-sm) !important;
    color-scheme: dark;
}

/* 診断ボタン */
.kigaku-btn-diagnose {
    background: var(--gradient-cta) !important;
    color: var(--text-on-gold) !important;
    border: none !important;
    border-radius: var(--radius-pill) !important;
}

/* 結果セクション */
.kigaku-result-section {
    background: rgba(18,15,53,0.80) !important;
    border: 1px solid var(--border-card) !important;
    border-radius: var(--radius-md) !important;
}

/* SNSシェアボタン */
.kigaku-share-btn--x,
.kigaku-share-btn--line {
    color: var(--text-primary) !important;
    border-color: var(--border-gold) !important;
}