/* =========================================
       ✨ モダン プラン案内 (Pricing Page)
       ========================================= */
    :root {
        --primary: #00c9a7;
        --primary-light: #e0fdf9;
        --premium: #6366f1;
        --premium-light: #eef2ff;
        --premium-grad: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
        --text-main: #1a202c;
        --text-muted: #718096;
        --bg-gray: #f8fafc;
        --radius-lg: 32px;
        --shadow-sm: 0 4px 15px rgba(0,0,0,0.03);
        --shadow-md: 0 15px 35px rgba(0,0,0,0.06);
        --shadow-hover: 0 20px 40px rgba(0,0,0,0.1);
        --shadow-premium: 0 20px 40px rgba(99, 102, 241, 0.2);
    }

    body { background: #ffffff; }
    .pricing-page { font-family: 'Noto Sans JP', sans-serif; padding: 100px 20px; text-align: center; overflow-x: hidden; min-height: 80vh; }
    .wrap { max-width: 1000px; margin: 0 auto; position: relative; z-index: 2; }

    @keyframes fadeUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }

    /* 🏷️ ヘッダー部分 */
    .pricing-header { animation: fadeUp 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); margin-bottom: 60px; }
    .kicker { font-size: 13px; font-weight: 900; color: var(--primary); text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 16px; display: inline-flex; align-items: center; gap: 8px; background: var(--primary-light); padding: 8px 16px; border-radius: 50px; }
    .pricing-header h2 { font-size: 42px; font-weight: 900; color: var(--text-main); margin-bottom: 16px; letter-spacing: -1px; }
    .pricing-header p { font-size: 18px; color: var(--text-muted); font-weight: 500; }

    /* 🃏 プランカードのレイアウト */
    .plan-flex { display: flex; gap: 30px; justify-content: center; align-items: stretch; animation: fadeUp 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.1s both; flex-wrap: wrap; }
    
    .plan-card { flex: 1; max-width: 400px; background: white; padding: 50px 40px; border-radius: var(--radius-lg); border: 2px solid #edf2f7; transition: 0.4s cubic-bezier(0.2, 0.8, 0.2, 1); box-shadow: var(--shadow-md); box-sizing: border-box; text-align: left; position: relative; display: flex; flex-direction: column; }
    .plan-card:hover { transform: translateY(-8px); border-color: var(--primary); box-shadow: var(--shadow-hover); }

    .plan-card.premium { border-color: var(--premium); box-shadow: var(--shadow-premium); transform: scale(1.05); z-index: 10; }
    .plan-card.premium:hover { transform: scale(1.05) translateY(-8px); }

    /* バッジ */
    .premium-badge { position: absolute; top: -16px; left: 50%; transform: translateX(-50%); background: var(--premium-grad); color: white; padding: 8px 24px; border-radius: 50px; font-size: 12px; font-weight: 900; letter-spacing: 1.5px; box-shadow: 0 8px 20px rgba(99, 102, 241, 0.3); }

    /* カード内テキスト */
    .plan-name { font-weight: 900; font-size: 1.4rem; color: #a0aec0; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 10px; }
    .plan-card.premium .plan-name { color: var(--premium); }
    
    .plan-price { font-size: 4rem; font-weight: 900; color: var(--text-main); line-height: 1; margin-bottom: 30px; }
    .plan-price span { font-size: 1.2rem; color: var(--text-muted); font-weight: 700; margin-left: 4px; }
    
    /* 機能リスト */
    .plan-features { list-style: none; padding: 0; margin: 0 0 40px 0; flex-grow: 1; }
    .plan-features li { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 18px; color: var(--text-main); font-weight: 700; font-size: 15px; line-height: 1.5; }
    .plan-features li.disabled { color: #a0aec0; font-weight: 500; }
    
    .icon-check { color: var(--primary); font-weight: 900; font-size: 16px; margin-top: 2px; }
    .plan-card.premium .icon-check { color: var(--premium); }
    .icon-cross { color: #cbd5e0; font-weight: 900; font-size: 16px; margin-top: 2px; }

    /* ボタン */
    .btn-plan { display: block; text-align: center; padding: 18px; border-radius: 50px; font-weight: 900; font-size: 16px; text-decoration: none; transition: 0.3s; width: 100%; box-sizing: border-box; }
    
    .btn-basic-active { background: var(--primary-light); color: var(--primary); cursor: default; }
    .btn-basic-none { background: var(--bg-gray); color: #a0aec0; cursor: default; }
    .btn-basic-signup { background: white; color: var(--text-main); border: 2px solid #edf2f7; box-shadow: var(--shadow-sm); }
    .btn-basic-signup:hover { border-color: var(--primary); color: var(--primary); }

    .btn-premium-active { background: var(--premium-grad); color: white; cursor: default; box-shadow: var(--shadow-premium); }
    .btn-premium-upgrade { background: var(--premium); color: white; box-shadow: 0 8px 25px rgba(99, 102, 241, 0.3); }
    .btn-premium-upgrade:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(99, 102, 241, 0.4); opacity: 0.95; }

    /* 安心テキスト */
    .trust-text { margin-top: 50px; font-size: 14px; color: var(--text-muted); font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 20px; animation: fadeUp 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.2s both; }
    .trust-text span { display: flex; align-items: center; gap: 6px; }

    /* 📱 レスポンシブ */
    @media (max-width: 768px) {
        .pricing-page { padding: 60px 15px; }
        .pricing-header h2 { font-size: 32px; }
        .plan-flex { flex-direction: column; align-items: center; gap: 40px; }
        .plan-card { width: 100%; max-width: 100%; padding: 40px 25px; }
        .plan-card.premium { transform: scale(1); } /* スマホでは巨大化させない */
        .plan-card.premium:hover { transform: translateY(-5px); }
        .trust-text { flex-direction: column; gap: 10px; }
    }

.inline-4d33b32c9e { font-weight: 900; color: var(--premium); }