/* --- Base --- */
* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
    --lp-bg: #050505;
    --lp-gold: #d4af37;
    --lp-text: #e0e0e0;
    --lp-sub: #888;
    --lp-serif: 'Shippori Mincho', serif;
}

body {
    background-color: var(--lp-bg);
    color: var(--lp-text);
    font-family: var(--lp-serif);
    text-align: center;
    line-height: 1.8;
}

/* --- Fixed Header --- */
.fixed-header {
    position: fixed;
    top: 0; width: 100%; height: 80px;
    z-index: 1000;
    background: rgba(5, 5, 5, 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.lp-logo { text-decoration: none; color: var(--lp-text); font-size: 1.3rem; letter-spacing: 0.3em; font-weight: bold; width: 100%; }
.lp-logo .en { font-size: 0.75rem; color: var(--lp-gold); margin-left: 10px; }

/* --- Sections --- */
section { padding: 120px 0; }
.container { max-width: 1100px; margin: 0 auto; padding: 0 25px; }
.container.narrow { max-width: 650px; }

/* --- Hero (1画面固定設定) --- */
#lp-hero {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0; /* paddingをリセットして中央寄せを正確に */
}

/* --- Typography --- */
.text-gold-gradient { background: linear-gradient(135deg, var(--lp-gold), #fff5b1, var(--lp-gold)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.lp-section-title { font-size: 2.2rem; margin-bottom: 80px; letter-spacing: 0.3em; }

/* --- Conditions & Steps --- */
.cond-grid, .step-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 40px; }
.cond-icon { font-size: 1.5rem; color: var(--lp-gold); margin-bottom: 20px; }
.step-num { font-size: 3rem; color: rgba(212, 175, 55, 0.1); margin-bottom: -20px; font-weight: bold; }

/* --- Pricing --- */
.price-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; }
.price-card { background: rgba(255, 255, 255, 0.02); padding: 60px 20px; border: 1px solid rgba(255, 255, 255, 0.05); }
.price-card.popular { border-color: var(--lp-gold); }
.new-price { font-size: 2.5rem; font-weight: bold; margin: 20px 0; }
.plan-features { list-style: none; color: var(--lp-sub); font-size: 0.85rem; line-height: 2.8; margin-top: 20px; border-top: 1px solid rgba(255,255,255,0.05); padding-top: 20px; }

/* --- Q&A --- */
.qa-container { text-align: left; }
.qa-item { margin-bottom: 60px; }
.qa-q-box, .qa-a-box { display: flex; margin-bottom: 15px; }
.q-icon { color: var(--lp-gold); font-weight: bold; margin-right: 15px; }
.a-icon { color: var(--lp-sub); font-weight: bold; margin-right: 15px; }
.qa-a { color: var(--lp-sub); font-size: 0.95rem; }

/* --- Reveal --- */
.reveal { opacity: 0; transform: translateY(30px); transition: 1.5s cubic-bezier(0.16, 1, 0.3, 1); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* --- Fixed Bottom CTA --- */
.floating-cta { position: fixed; bottom: 20px; left: 20px; right: 20px; z-index: 1000; display: none; }
.floating-cta a { background: var(--lp-gold); color: #000; display: block; padding: 18px; text-decoration: none; font-weight: bold; border-radius: 5px; }

.lp-cta-btn { display: inline-block; padding: 22px 60px; border: 1px solid var(--lp-gold); color: var(--lp-gold); text-decoration: none; margin-bottom: 15px; }

@media (max-width: 768px) {
    .floating-cta { display: block; }
    #lp-hero h1 { font-size: 1.5rem; }
    #lp-hero { height: calc(100vh - 70px); }
}

/* ==========================================================================
   Responsive Design (レスポンシブ対応)
   ========================================================================== */

/* --- タブレットサイズ (1024px以下) --- */
@media (max-width: 1024px) {
    .lp-section-title { font-size: 1.8rem; margin-bottom: 60px; }
    .price-grid { grid-template-columns: repeat(2, 1fr); } /* 2列にする */
    .price-card.popular { order: -1; grid-column: span 2; } /* 人気プランを一番上に大きく出す */
}

/* --- スマートフォンサイズ (768px以下) --- */
@media (max-width: 768px) {
    section { padding: 80px 0; } /* 上下余白を狭く */

    /* ヘッダー */
    .fixed-header { height: 70px; }
    .lp-logo { font-size: 1.1rem; }

    /* ヒーロー（最初の画面） */
    #lp-hero h1 { font-size: 1.6rem; line-height: 1.6; }
    #lp-hero { height: calc(100vh - 70px); }
    .hero-sub { font-size: 0.9rem; }

    /* メッセージ */
    .message-title { font-size: 1.4rem; }
    .message-content p { font-size: 0.9rem; text-align: left; } /* スマホは左寄せが見やすい */

    /* 条件・ステップ（すべて1列に） */
    .cond-grid, .step-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    .cond-item, .step-item { padding: 10px; }
    .step-num { font-size: 2.5rem; }

    /* プラン（すべて1列に） */
    .price-grid { grid-template-columns: 1fr; }
    .price-card.popular { grid-column: span 1; }
    .new-price { font-size: 2rem; }

    /* Q&A */
    .qa-q { font-size: 1rem; }
    .q-icon, .a-icon { margin-right: 10px; }
    .qa-a { font-size: 0.85rem; }

    /* CTAボタン */
    .lp-cta-btn { width: 100%; padding: 20px 0; font-size: 0.95rem; }
    .floating-cta { display: block; } /* 下部固定ボタンを表示 */
    
    /* 下部固定ボタンがあるため、フッター周りに余白を作る */
    #lp-cta { padding-bottom: 140px; }
}

/* --- 極小画面 (375px以下) --- */
@media (max-width: 375px) {
    #lp-hero h1 { font-size: 1.4rem; }
    .lp-logo { letter-spacing: 0.1em; }
    .lp-logo .en { display: block; margin-left: 0; font-size: 0.6rem; margin-top: -5px; }
}

/* --- フッターと固定ボタンの重なりを解消 --- */

.lp-footer {
    padding-top: 100px;
    padding-bottom: 100px; /* PCでの余白 */
    border-top: 1px solid rgba(255,255,255,0.05);
}

@media (max-width: 768px) {
    /* スマホの時だけ、フッターの下側に巨大な余白を作る */
    .lp-footer {
        padding-bottom: 120px; /* 固定ボタンに絶対被らない高さ */
    }

    /* 最後のお問い合わせセクションも少し余裕を持たせる */
    #lp-cta {
        padding-bottom: 80px;
    }
}