/* ═══════════════════════════════════════════════════════════
   AI-LP Block Design Variants
   各ブロックのデザインバリアントCSS
   バリアントは .variant-{id} クラスで適用
   ═══════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────
   HERO VARIANTS
   ───────────────────────────────────────────────────────── */

/* hero: split — 左寄せテキスト */
.ailp-body .hero.variant-split {
    text-align: left;
    min-height: 90vh;
}

.ailp-body .hero.variant-split .hero-content {
    text-align: left;
    max-width: 700px;
    margin-left: 5%;
}

.ailp-body .hero.variant-split .hero-features {
    justify-content: flex-start;
}

.ailp-body .hero.variant-split::before {
    left: 70%;
    width: 500px;
    height: 500px;
}

.ailp-body .hero.variant-split::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    width: 35%;
    height: 100%;
    background: linear-gradient(135deg, var(--ailp-accent-1-20, rgba(0, 212, 255, 0.1)), var(--ailp-accent-2-20, rgba(168, 85, 247, 0.1)));
    clip-path: polygon(30% 0, 100% 0, 100% 100%, 0% 100%);
    z-index: 0;
}

/* hero: wave — 波形グラデーション */
.ailp-body .hero.variant-wave::before {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    transform: none;
    border-radius: 0;
    background: none;
    animation: none;
}

.ailp-body .hero.variant-wave {
    background: linear-gradient(180deg,
            var(--ailp-bg-primary) 0%,
            var(--ailp-accent-1-10, rgba(0, 212, 255, 0.06)) 30%,
            var(--ailp-accent-2-10, rgba(168, 85, 247, 0.06)) 60%,
            var(--ailp-bg-primary) 100%);
}

.ailp-body .hero.variant-wave::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 100px;
    background: var(--ailp-bg-primary);
    clip-path: ellipse(55% 70% at 50% 100%);
    z-index: 2;
}

.ailp-body .hero.variant-wave .hero-badge {
    border-color: var(--ailp-accent-1);
    background: var(--ailp-accent-1-10, rgba(0, 212, 255, 0.08));
}

/* hero: minimal — クリーンデザイン */
.ailp-body .hero.variant-minimal {
    min-height: 80vh;
    background: var(--ailp-bg-primary);
}

.ailp-body .hero.variant-minimal::before {
    display: none;
}

.ailp-body .hero.variant-minimal .orb {
    display: none;
}

.ailp-body .hero.variant-minimal .hero-badge {
    border: none;
    background: none;
    font-size: 0.85rem;
    letter-spacing: 6px;
    color: var(--ailp-text-secondary);
}

.ailp-body .hero.variant-minimal .hero-badge .dot {
    display: none;
}

.ailp-body .hero.variant-minimal h1 {
    font-size: clamp(2rem, 5vw, 3.5rem);
    letter-spacing: -0.02em;
}

.ailp-body .hero.variant-minimal .hero-feature {
    background: none;
    border: none;
    padding: 0.4rem 0;
    color: var(--ailp-text-secondary);
}

.ailp-body .hero.variant-minimal .cta-button {
    border-radius: 4px;
    padding: 1rem 3rem;
}

/* hero: bold — 大胆な太文字 */
.ailp-body .hero.variant-bold h1 {
    font-size: clamp(2.5rem, 7vw, 4.5rem);
    font-weight: 900;
    letter-spacing: -0.03em;
    line-height: 1.15;
}

.ailp-body .hero.variant-bold .hero-badge {
    font-size: 0.9rem;
    letter-spacing: 4px;
    padding: 0.6rem 1.5rem;
    background: var(--ailp-accent-1);
    color: var(--ailp-bg-primary);
    border: none;
}

.ailp-body .hero.variant-bold .hero-badge .dot {
    display: none;
}

.ailp-body .hero.variant-bold .hero-sub {
    font-size: 1.15rem;
    max-width: 550px;
}

.ailp-body .hero.variant-bold .cta-button {
    font-size: 1.1rem;
    padding: 1.2rem 3rem;
}

/* hero: gradient-flow — 流れるグラデーション */
.ailp-body .hero.variant-gradient-flow {
    background: linear-gradient(135deg,
            var(--ailp-bg-primary),
            var(--ailp-accent-1-10, rgba(0, 212, 255, 0.08)) 30%,
            var(--ailp-accent-2-10, rgba(168, 85, 247, 0.08)) 50%,
            var(--ailp-accent-1-10, rgba(0, 212, 255, 0.06)) 70%,
            var(--ailp-bg-primary));
    animation: ailpGradientFlow 8s ease infinite;
    background-size: 200% 200%;
}

@keyframes ailpGradientFlow {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

.ailp-body .hero.variant-gradient-flow::before {
    opacity: 0.4;
}

.ailp-body .hero.variant-gradient-flow .hero-badge {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--ailp-accent-1);
    box-shadow: 0 0 20px var(--ailp-accent-1-20, rgba(0, 212, 255, 0.15));
}


/* ─────────────────────────────────────────────────────────
   SECTION LABEL VARIANTS
   ───────────────────────────────────────────────────────── */

/* section_label: gradient-bar */
.ailp-body .section-label.variant-gradient-bar {
    flex-direction: column;
    gap: 0.5rem;
}

.ailp-body .section-label.variant-gradient-bar::before {
    display: none;
}

.ailp-body .section-label.variant-gradient-bar::after {
    content: '';
    width: 60px;
    height: 3px;
    background: var(--ailp-gradient-main);
    border-radius: 2px;
}

/* section_label: badge */
.ailp-body .section-label.variant-badge {
    display: inline-flex;
    padding: 0.4rem 1.25rem;
    border: 1px solid var(--ailp-accent-1);
    border-radius: 100px;
    background: var(--ailp-accent-1-10, rgba(0, 212, 255, 0.08));
    gap: 0;
}

.ailp-body .section-label.variant-badge::before {
    display: none;
}

/* section_label: neon-box */
.ailp-body .section-label.variant-neon-box {
    display: inline-flex;
    padding: 0.5rem 1.5rem;
    border: 1px solid var(--ailp-accent-1);
    background: var(--ailp-accent-1-10, rgba(0, 212, 255, 0.05));
    box-shadow: 0 0 15px var(--ailp-accent-1-20, rgba(0, 212, 255, 0.15)),
        inset 0 0 15px var(--ailp-accent-1-10, rgba(0, 212, 255, 0.05));
    gap: 0;
}

.ailp-body .section-label.variant-neon-box::before {
    display: none;
}

/* section_label: underline */
.ailp-body .section-label.variant-underline {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
    border-bottom: 2px solid var(--ailp-accent-1);
    padding-bottom: 0.5rem;
}

.ailp-body .section-label.variant-underline::before {
    display: none;
}

/* section_label: dot-accent */
.ailp-body .section-label.variant-dot-accent::before {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ailp-accent-1);
    box-shadow: 0 0 8px var(--ailp-accent-1);
}


/* ─────────────────────────────────────────────────────────
   HEADING VARIANTS
   ───────────────────────────────────────────────────────── */

/* heading: underline-accent */
.ailp-body .variant-heading-underline-accent h2,
.ailp-body .variant-heading-underline-accent h3 {
    display: inline-block;
    padding-bottom: 0.5rem;
    border-bottom: 3px solid var(--ailp-accent-1);
}

/* heading: side-border */
.ailp-body .variant-heading-side-border h2,
.ailp-body .variant-heading-side-border h3 {
    padding-left: 1rem;
    border-left: 4px solid transparent;
    border-image: var(--ailp-gradient-main) 1;
}

/* heading: bg-highlight */
.ailp-body .variant-heading-bg-highlight h2,
.ailp-body .variant-heading-bg-highlight h3 {
    display: inline;
    padding: 0.3rem 1rem;
    background: var(--ailp-accent-1-10, rgba(0, 212, 255, 0.08));
    border-radius: 6px;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

/* heading: shadow-text */
.ailp-body .variant-heading-shadow-text h2,
.ailp-body .variant-heading-shadow-text h3 {
    text-shadow: 0 4px 12px var(--ailp-accent-1-20, rgba(0, 212, 255, 0.25)),
        0 0 40px var(--ailp-accent-1-10, rgba(0, 212, 255, 0.1));
}


/* ─────────────────────────────────────────────────────────
   GLASS CARD VARIANTS
   ───────────────────────────────────────────────────────── */

/* glass_card: solid */
.ailp-body .glass-card.variant-solid {
    background: var(--ailp-card-solid-bg, rgba(30, 32, 50, 0.95));
    backdrop-filter: none;
    border: 1px solid var(--ailp-glass-border);
}

/* glass_card: gradient-border */
.ailp-body .glass-card.variant-gradient-border {
    border: none;
    position: relative;
    background-clip: padding-box;
}

.ailp-body .glass-card.variant-gradient-border::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 2px;
    background: var(--ailp-gradient-main);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

/* glass_card: top-accent */
.ailp-body .glass-card.variant-top-accent {
    border-top: 3px solid var(--ailp-accent-1);
    border-radius: 0 0 12px 12px;
}

/* glass_card: shadow-lift */
.ailp-body .glass-card.variant-shadow-lift {
    transition: transform 0.3s, box-shadow 0.3s;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.ailp-body .glass-card.variant-shadow-lift:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4);
}


/* ─────────────────────────────────────────────────────────
   CHECKLIST VARIANTS
   ───────────────────────────────────────────────────────── */

/* checklist: card-list */
.ailp-body .checklist.variant-card-list li {
    background: var(--ailp-glass-bg);
    border: 1px solid var(--ailp-glass-border);
    border-radius: 10px;
    padding: 0.8rem 1rem;
    margin-bottom: 0.5rem;
}

/* checklist: numbered */
.ailp-body .checklist.variant-numbered li .check-icon {
    display: none;
}

.ailp-body .checklist.variant-numbered {
    counter-reset: checklist-counter;
    list-style: none;
}

.ailp-body .checklist.variant-numbered li {
    counter-increment: checklist-counter;
    padding-left: 0;
}

.ailp-body .checklist.variant-numbered li::before {
    content: counter(checklist-counter, decimal-leading-zero);
    font-family: 'Orbitron', sans-serif;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--ailp-accent-1);
    margin-right: 0.75rem;
    min-width: 24px;
}

/* checklist: icon-box */
.ailp-body .checklist.variant-icon-box li {
    padding: 0.75rem 1rem;
    background: var(--ailp-accent-1-10, rgba(0, 212, 255, 0.05));
    border-left: 3px solid var(--ailp-accent-1);
    border-radius: 0 8px 8px 0;
    margin-bottom: 0.5rem;
}

/* checklist: gradient-check */
.ailp-body .checklist.variant-gradient-check li::before {
    background: var(--ailp-gradient-main);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 1.2rem;
}


/* ─────────────────────────────────────────────────────────
   CTA BUTTON VARIANTS
   ───────────────────────────────────────────────────────── */

/* cta: pill */
.ailp-body .cta-button.variant-pill {
    border-radius: 100px;
    padding: 1rem 3rem;
}

/* cta: outline */
.ailp-body .cta-button.variant-outline {
    background: transparent !important;
    border: 2px solid var(--ailp-accent-1);
    color: var(--ailp-accent-1) !important;
}

.ailp-body .cta-button.variant-outline:hover {
    background: var(--ailp-accent-1-10, rgba(0, 212, 255, 0.1)) !important;
}

/* cta: glow */
.ailp-body .cta-button.variant-glow {
    box-shadow: 0 0 20px var(--ailp-accent-1-20, rgba(0, 212, 255, 0.3)),
        0 0 40px var(--ailp-accent-1-10, rgba(0, 212, 255, 0.15));
    font-size: 1.1rem;
    padding: 1.1rem 3rem;
    animation: ailpCtaGlow 2s ease-in-out infinite;
}

@keyframes ailpCtaGlow {

    0%,
    100% {
        box-shadow: 0 0 20px var(--ailp-accent-1-20, rgba(0, 212, 255, 0.3)), 0 0 40px var(--ailp-accent-1-10, rgba(0, 212, 255, 0.15));
    }

    50% {
        box-shadow: 0 0 30px var(--ailp-accent-1-20, rgba(0, 212, 255, 0.5)), 0 0 60px var(--ailp-accent-1-10, rgba(0, 212, 255, 0.25));
    }
}

/* cta: arrow */
.ailp-body .cta-button.variant-arrow::after {
    content: ' →';
    margin-left: 0.5rem;
    transition: margin-left 0.3s;
}

.ailp-body .cta-button.variant-arrow:hover::after {
    margin-left: 1rem;
}

/* cta: gradient-border */
.ailp-body .cta-button.variant-gradient-border {
    background: transparent !important;
    border: none;
    position: relative;
    color: var(--ailp-text-primary) !important;
    z-index: 1;
}

.ailp-body .cta-button.variant-gradient-border::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 2px;
    background: var(--ailp-gradient-main);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    z-index: -1;
}


/* ─────────────────────────────────────────────────────────
   STEP CARDS VARIANTS
   ───────────────────────────────────────────────────────── */

/* step_cards: horizontal — PC横並び */
.ailp-body .step-cards.variant-horizontal {
    flex-direction: row !important;
    flex-wrap: nowrap;
    gap: 1rem;
}

.ailp-body .step-cards.variant-horizontal .step-card {
    flex: 1 1 0;
    min-width: 0;
    flex-direction: column;
    text-align: center;
    align-items: center;
}

.ailp-body .step-cards.variant-horizontal .step-card .step-number {
    margin: 0 auto 0.5rem;
    min-width: auto;
}

/* step_cards: connected — 線で繋がったステップ */
.ailp-body .step-cards.variant-connected {
    gap: 0;
}

.ailp-body .step-cards.variant-connected .step-card {
    position: relative;
    padding-left: 3rem;
    margin-bottom: 0;
    padding-bottom: 2rem;
    border-left: 2px solid var(--ailp-accent-1-20, rgba(0, 212, 255, 0.2));
    border-radius: 0 !important;
    background: none !important;
    border-top: none !important;
    border-right: none !important;
    border-bottom: none !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
    overflow: visible !important;
}

.ailp-body .step-cards.variant-connected .step-card::before {
    content: '';
    position: absolute;
    left: -8px;
    top: 5px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--ailp-accent-1);
    box-shadow: 0 0 10px var(--ailp-accent-1-20, rgba(0, 212, 255, 0.3));
    z-index: 2;
}

/* glass-card の hover ::before (光るトップライン) を消す */
.ailp-body .step-cards.variant-connected .step-card:hover::before {
    opacity: 0 !important;
    background: var(--ailp-accent-1) !important;
}

.ailp-body .step-cards.variant-connected .step-card .step-number {
    display: none;
}

.ailp-body .step-cards.variant-connected .step-card:last-child {
    padding-bottom: 0;
}

/* step_cards: icon-circle — 丸形番号 */
.ailp-body .step-cards.variant-icon-circle .step-number {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--ailp-gradient-main) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff !important;
    font-weight: 800;
    font-size: 1.1rem;
    margin-bottom: 0.75rem;
    position: relative;
    z-index: 1;
    -webkit-text-fill-color: #fff !important;
    -webkit-background-clip: unset !important;
    background-clip: border-box !important;
    text-shadow: none;
    line-height: 1;
    min-width: 52px;
    flex-shrink: 0;
}

/* step_cards: timeline-style — 縦タイムライン（番号付き） */
.ailp-body .step-cards.variant-timeline-style {
    gap: 0;
}

.ailp-body .step-cards.variant-timeline-style .step-card {
    padding-left: 4rem;
    border-left: 3px solid var(--ailp-accent-1);
    position: relative;
    padding-bottom: 1.5rem;
    border-radius: 0 !important;
    background: none !important;
    border-top: none !important;
    border-right: none !important;
    border-bottom: none !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
    overflow: visible !important;
    margin-bottom: 0;
}

/* glass-card の hover ::before を消す */
.ailp-body .step-cards.variant-timeline-style .step-card:hover::before {
    opacity: 0 !important;
}

.ailp-body .step-cards.variant-timeline-style .step-card .step-number {
    position: absolute;
    left: -18px;
    top: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--ailp-accent-1) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    -webkit-background-clip: unset !important;
    background-clip: border-box !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 800;
    line-height: 1;
    min-width: 32px;
    z-index: 2;
}

.ailp-body .step-cards.variant-timeline-style .step-card:last-child {
    border-left-color: transparent !important;
    padding-bottom: 0;
}


/* ─────────────────────────────────────────────────────────
   TESTIMONIAL VARIANTS
   ───────────────────────────────────────────────────────── */

/* testimonial: card-grid — 明確なカード枠付きグリッド */
.ailp-body .testimonial-list.variant-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
}

.ailp-body .testimonial-list.variant-card-grid .ailp-testimonial-card {
    background: var(--ailp-glass-bg);
    border: 1px solid var(--ailp-glass-border);
    border-radius: 16px;
    padding: 1.5rem;
    backdrop-filter: blur(12px);
    margin-bottom: 0;
    transition: border-color 0.3s, box-shadow 0.3s;
}

.ailp-body .testimonial-list.variant-card-grid .ailp-testimonial-card:hover {
    border-color: var(--ailp-card-hover-border);
    box-shadow: var(--ailp-card-hover-glow);
}

/* testimonial: bubble — 吹き出し形式 */
.ailp-body .testimonial-list.variant-bubble {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.ailp-body .testimonial-list.variant-bubble .ailp-testimonial-card {
    position: relative;
    background: var(--ailp-glass-bg);
    border: 1px solid var(--ailp-glass-border);
    border-radius: 20px 20px 20px 4px;
    padding: 1.5rem;
    margin-bottom: 0.75rem;
}

.ailp-body .testimonial-list.variant-bubble .ailp-testimonial-card::after {
    content: '';
    position: absolute;
    bottom: -12px;
    left: 28px;
    width: 0;
    height: 0;
    border-left: 14px solid var(--ailp-glass-bg, rgba(255, 255, 255, 0.05));
    border-bottom: 12px solid transparent;
    filter: drop-shadow(0 1px 0 var(--ailp-glass-border));
}

.ailp-body .testimonial-list.variant-bubble .ailp-testimonial-text {
    font-style: italic;
}

/* testimonial: minimal — シンプル引用形式（左ボーダー） */
.ailp-body .testimonial-list.variant-minimal {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.ailp-body .testimonial-list.variant-minimal .ailp-testimonial-card {
    background: none;
    border: none;
    backdrop-filter: none;
    border-left: 3px solid var(--ailp-accent-1);
    border-radius: 0;
    padding: 1rem 1.5rem;
}

/* testimonial: photo-accent — 写真強調 */
.ailp-body .testimonial-list.variant-photo-accent .ailp-testimonial-card .ailp-testimonial-avatar,
.ailp-body .testimonial-list.variant-photo-accent .ailp-testimonial-card .ailp-testimonial-avatar-placeholder {
    width: 64px !important;
    height: 64px !important;
    border: 2px solid var(--ailp-accent-1);
    box-shadow: 0 0 12px var(--ailp-accent-1-20, rgba(0, 212, 255, 0.2));
}


/* ─────────────────────────────────────────────────────────
   PRICING VARIANTS
   ───────────────────────────────────────────────────────── */

/* pricing: centered */
.ailp-body .pricing-card.variant-centered {
    text-align: center;
    max-width: 500px;
    margin: 0 auto;
}

.ailp-body .pricing-card.variant-centered .ailp-pricing-current {
    font-size: 3rem;
}

/* pricing: ribbon */
.ailp-body .pricing-card.variant-ribbon {
    position: relative;
    overflow: hidden;
}

.ailp-body .pricing-card.variant-ribbon .ailp-pricing-label {
    position: absolute;
    top: 20px;
    right: -35px;
    transform: rotate(45deg);
    background: var(--ailp-gradient-main);
    padding: 0.25rem 2.5rem;
    font-size: 0.7rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.5px;
}

/* pricing: dark-glass */
.ailp-body .pricing-card.variant-dark-glass {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid var(--ailp-accent-1-20, rgba(0, 212, 255, 0.15));
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3),
        inset 0 0 30px rgba(0, 0, 0, 0.2);
}

/* pricing: gradient-bg */
.ailp-body .pricing-card.variant-gradient-bg {
    background: linear-gradient(135deg,
            var(--ailp-accent-1-10, rgba(0, 212, 255, 0.08)),
            var(--ailp-accent-2-10, rgba(168, 85, 247, 0.08)));
    border: 1px solid var(--ailp-accent-1-20, rgba(0, 212, 255, 0.15));
}


/* ─────────────────────────────────────────────────────────
   STATS VARIANTS
   ───────────────────────────────────────────────────────── */

/* stats: card — カード形式 */
.ailp-body .stats-grid.variant-card .ailp-stat-item {
    background: var(--ailp-glass-bg);
    border: 1px solid var(--ailp-glass-border);
    border-radius: 12px;
    padding: 1.5rem;
}

/* stats: circle — 丸形囲み */
.ailp-body .stats-grid.variant-circle .ailp-stat-item {
    width: 140px !important;
    height: 140px;
    border-radius: 50%;
    border: 2px solid var(--ailp-accent-1);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0;
}

/* stats: bar — ボーダー区切り */
.ailp-body .stats-grid.variant-bar .ailp-stat-item {
    border-right: 1px solid var(--ailp-glass-border);
    padding: 0 2rem;
}

.ailp-body .stats-grid.variant-bar .ailp-stat-item:last-child {
    border-right: none;
}

/* stats: glow — 光る数値 */
.ailp-body .stats-grid.variant-glow .ailp-stat-number {
    text-shadow: 0 0 20px var(--ailp-accent-1),
        0 0 40px var(--ailp-accent-1-20, rgba(0, 212, 255, 0.3));
    font-size: 3rem;
}


/* ─────────────────────────────────────────────────────────
   HIGHLIGHT VARIANT
   ───────────────────────────────────────────────────────── */
.ailp-body .highlight-box.variant-gradient-border {
    border: none;
    position: relative;
}

.ailp-body .highlight-box.variant-gradient-border::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 2px;
    background: var(--ailp-gradient-main);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}

.ailp-body .highlight-box.variant-accent-left {
    border: none;
    border-left: 4px solid var(--ailp-accent-1);
    border-radius: 0 8px 8px 0;
    background: var(--ailp-accent-1-10, rgba(0, 212, 255, 0.05));
}


/* ─────────────────────────────────────────────────────────
   FAQ VARIANTS
   ───────────────────────────────────────────────────────── */

.ailp-body .faq-list.variant-card .faq-item {
    background: var(--ailp-glass-bg);
    border: 1px solid var(--ailp-glass-border);
    border-radius: 12px;
    margin-bottom: 0.75rem;
    overflow: hidden;
}

.ailp-body .faq-list.variant-minimal .faq-item {
    background: none;
    border: none;
    border-bottom: 1px solid var(--ailp-glass-border);
    border-radius: 0;
}

.ailp-body .faq-list.variant-accent .faq-question {
    border-left: 3px solid var(--ailp-accent-1);
    padding-left: 1rem;
}


/* ─────────────────────────────────────────────────────────
   TIMELINE VARIANTS
   ───────────────────────────────────────────────────────── */

.ailp-body .timeline-list.variant-card .timeline-item {
    background: var(--ailp-glass-bg);
    border: 1px solid var(--ailp-glass-border);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    margin-bottom: 0.75rem;
}

.ailp-body .timeline-list.variant-gradient-dot .timeline-dot {
    background: var(--ailp-gradient-main);
    width: 14px;
    height: 14px;
    box-shadow: 0 0 10px var(--ailp-accent-1-20, rgba(0, 212, 255, 0.3));
}


/* ─────────────────────────────────────────────────────────
   RESPONSIVE
   ───────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .ailp-body .hero.variant-split .hero-content {
        margin-left: 0;
        text-align: center;
    }

    .ailp-body .hero.variant-split .hero-features {
        justify-content: center;
    }

    .ailp-body .hero.variant-split::after {
        display: none;
    }

    /* ステップカード: 横並びをスマホで縦に（デフォルトと同じレイアウトに戻す） */
    .ailp-body .step-cards.variant-horizontal {
        flex-direction: column !important;
    }

    .ailp-body .step-cards.variant-horizontal .step-card {
        flex-direction: row;
        text-align: left;
        align-items: flex-start;
    }

    .ailp-body .step-cards.variant-horizontal .step-card .step-number {
        margin: 0;
        min-width: 50px;
    }

    /* タイムライン: パディング縮小 */
    .ailp-body .step-cards.variant-timeline-style .step-card {
        padding-left: 3rem;
    }

    /* Stats: サークル縮小 */
    .ailp-body .stats-grid.variant-circle .ailp-stat-item {
        width: 110px !important;
        height: 110px;
    }

    /* Stats: バー バリアントのボーダーをスマホでは下線に */
    .ailp-body .stats-grid.variant-bar .ailp-stat-item {
        border-right: none;
        border-bottom: 1px solid var(--ailp-glass-border);
        padding: 1rem 0;
    }

    .ailp-body .stats-grid.variant-bar .ailp-stat-item:last-child {
        border-bottom: none;
    }

    /* Stats: data-columns-mobile によるスマホ列制御 (width ベース) */
    .ailp-body .ailp-stats-grid[data-columns-mobile="1"]>.ailp-stat-item {
        width: 100% !important;
    }

    .ailp-body .ailp-stats-grid[data-columns-mobile="2"]>.ailp-stat-item {
        width: 50% !important;
    }

    .ailp-body .ailp-stats-grid[data-columns-mobile="3"]>.ailp-stat-item {
        width: 33.333% !important;
    }

    /* Stats: スマホ3列時の数字サイズ縮小 */
    .ailp-body .ailp-stats-grid[data-columns-mobile="3"] .ailp-stat-number {
        font-size: 1.3rem !important;
    }

    .ailp-body .ailp-stats-grid[data-columns-mobile="3"] .ailp-stat-suffix {
        font-size: 0.8rem;
    }

    .ailp-body .stats-grid.variant-glow .ailp-stat-number {
        font-size: 2.2rem;
    }

    /* Testimonial: バブルの吹き出しをスマホで小さく */
    .ailp-body .testimonial-list.variant-bubble .ailp-testimonial-card {
        margin-bottom: 0.5rem;
    }

    /* Pop: circle-card をスマホで縦並びに */
    .ailp-body .step-cards.variant-circle-card .step-card {
        flex-direction: column;
        text-align: center;
    }

    .ailp-body .step-cards.variant-circle-card .step-card .step-number {
        margin: 0 auto 0.5rem;
    }
}


/* ═════════════════════════════════════════════════════════
   POP-SPECIFIC BLOCK VARIANTS
   ポップ系LP向けのデザインバリアント
   ═════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────
   section_label: badge-emoji — 絵文字バッジ
   プロトタイプの .section-badge を再現
   ───────────────────────────────────────────────────────── */
.ailp-body .section-label.variant-badge-emoji {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--ailp-gradient-main);
    color: #fff;
    font-weight: 700;
    font-size: 0.8rem;
    padding: 0.4rem 1.2rem;
    border-radius: 100px;
    letter-spacing: 0.05em;
    text-transform: none;
}

.ailp-body .section-label.variant-badge-emoji::before {
    display: none;
}

/* ─────────────────────────────────────────────────────────
   checklist: worry-list — お悩みリスト
   プロトタイプの .worry-list を再現
   （×マーク付き、破線ボーダー区切り）
   ───────────────────────────────────────────────────────── */
.ailp-body .checklist.variant-worry-list {
    list-style: none;
    max-width: 600px;
    margin: 0 auto;
}

.ailp-body .checklist.variant-worry-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
    padding: 1rem 0;
    border-bottom: 1px dashed var(--ailp-glass-border);
    font-size: 1rem;
    line-height: 1.7;
}

.ailp-body .checklist.variant-worry-list li:last-child {
    border-bottom: none;
}

.ailp-body .checklist.variant-worry-list li::before {
    content: '😣';
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    background: var(--ailp-accent-1-10, rgba(255, 107, 107, 0.1));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    margin-top: 0.2rem;
}

/* 親コンテナのグラスカード枠を外す */
.ailp-body .glass-card:has(.checklist.variant-worry-list) {
    border: none;
    background: transparent;
    backdrop-filter: none;
    box-shadow: none;
    padding: 0;
}

/* ─────────────────────────────────────────────────────────
   step_cards: circle-card — 丸番号カード
   プロトタイプの .content-card を再現
   （丸グラデ番号 + 白カード + ホバーで浮く）
   ───────────────────────────────────────────────────────── */
.ailp-body .step-cards.variant-circle-card {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    max-width: 600px;
    margin: 0 auto;
}

.ailp-body .step-cards.variant-circle-card .step-card {
    display: flex;
    gap: 1.2rem;
    align-items: flex-start;
    background: var(--ailp-bg-secondary, #fff);
    border: 2px solid var(--ailp-glass-border);
    border-radius: 20px;
    padding: 1.5rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    backdrop-filter: none;
}

.ailp-body .step-cards.variant-circle-card .step-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 20px var(--ailp-cta-shadow, rgba(255, 107, 107, 0.12));
}

/* ::before (トップライン) を消す */
.ailp-body .step-cards.variant-circle-card .step-card::before {
    display: none;
}

.ailp-body .step-cards.variant-circle-card .step-number {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    min-width: 48px;
    background: var(--ailp-gradient-main) !important;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    -webkit-background-clip: unset !important;
    background-clip: border-box !important;
    font-weight: 900;
    font-size: 1.2rem;
    line-height: 1;
}

.ailp-body .step-cards.variant-circle-card .step-content h3 {
    font-size: 1.05rem;
    font-weight: 800;
    margin-bottom: 0.3rem;
}

.ailp-body .step-cards.variant-circle-card .step-content p {
    font-size: 0.9rem;
    color: var(--ailp-text-secondary);
    line-height: 1.7;
}


/* ═════════════════════════════════════════════════════════
   POP STYLE VARIANT OVERRIDES
   ═════════════════════════════════════════════════════════ */

/* ─── B1: Section Label Pop Variants ─────────────────── */

/* section_label pop: gradient-bar → 下線グラデーション */
.ailp-style-pop .pop-section-badge.variant-gradient-bar {
    border-bottom: 3px solid transparent;
    border-image: var(--ailp-gradient-main, linear-gradient(135deg, #ff6b6b, #ffc947)) 1;
    border-radius: 0;
    background: transparent;
    padding: 0.3rem 0;
}

/* section_label pop: badge → 枠線付きバッジ */
.ailp-style-pop .pop-section-badge.variant-badge {
    border: 2px solid var(--ailp-accent-1, #ff6b6b);
    background: rgba(255, 107, 107, 0.08);
}

/* section_label pop: neon-box → 光るアウトライン */
.ailp-style-pop .pop-section-badge.variant-neon-box {
    border: 1px solid var(--ailp-accent-1, #ff6b6b);
    box-shadow: 0 0 15px rgba(255, 107, 107, 0.25),
        inset 0 0 15px rgba(255, 107, 107, 0.08);
}

/* section_label pop: underline → 下線のみ */
.ailp-style-pop .pop-section-badge.variant-underline {
    border-radius: 0;
    background: transparent;
    border-bottom: 3px solid var(--ailp-accent-1, #ff6b6b);
    padding: 0.3rem 0.5rem;
}

/* section_label pop: dot-accent → ドット付き */
.ailp-style-pop .pop-section-badge.variant-dot-accent {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.ailp-style-pop .pop-section-badge.variant-dot-accent::before {
    content: '';
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--ailp-accent-1, #ff6b6b);
    flex-shrink: 0;
}

/* section_label pop: badge-emoji → 絵文字付き */
.ailp-style-pop .pop-section-badge.variant-badge-emoji {
    font-size: 1.1rem;
    letter-spacing: 0.05em;
}

.ailp-style-pop .pop-section-badge.variant-badge-emoji::before {
    content: '✨';
    margin-right: 0.3rem;
}


/* ─── B4: Heading Pop Variants ───────────────────────── */

/* heading pop: underline-accent → アクセント下線 */
.ailp-style-pop .variant-heading-underline-accent .pop-section-title {
    display: inline-block;
    padding-bottom: 0.5rem;
    border-bottom: 3px solid var(--ailp-accent-1, #ff6b6b);
}

/* heading pop: side-border → 左ボーダー */
.ailp-style-pop .variant-heading-side-border .pop-section-title {
    text-align: left;
    padding-left: 1rem;
    border-left: 4px solid var(--ailp-accent-1, #ff6b6b);
}

/* heading pop: bg-highlight → 背景ハイライト */
.ailp-style-pop .variant-heading-bg-highlight .pop-section-title {
    display: inline;
    padding: 0.3rem 1rem;
    background: var(--ailp-accent-1-20, rgba(255, 107, 107, 0.12));
    border-radius: 8px;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

/* heading pop: shadow-text → 影付きテキスト */
.ailp-style-pop .variant-heading-shadow-text .pop-section-title {
    text-shadow: 0 4px 12px rgba(255, 107, 107, 0.3),
        0 0 40px rgba(255, 107, 107, 0.1);
}


/* ─── B2: Gradient text for Pop ─────────────────────── */
.ailp-style-pop .gradient-text {
    background: var(--ailp-gradient-main, linear-gradient(135deg, #ff6b6b, #ffc947));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}


/* ─── B3: Step cards horizontal — 追加強化 ───────────── */
.ailp-body .step-cards.variant-horizontal {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 1rem;
    align-items: stretch;
}

.ailp-body .step-cards.variant-horizontal .step-card {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    flex-direction: column !important;
    text-align: center;
    align-items: center;
}

.ailp-body .step-cards.variant-horizontal .step-card .step-number {
    margin: 0 auto 0.5rem !important;
    min-width: auto !important;
}

.ailp-body .step-cards.variant-horizontal .step-card .step-content {
    text-align: center;
}

.ailp-body .step-cards.variant-horizontal .step-card .step-content h3 {
    text-align: center;
}

/* Pop style step cards horizontal */
.ailp-style-pop .step-cards.variant-horizontal .pop-howto-step {
    flex-direction: column;
    text-align: center;
    align-items: center;
}

.ailp-style-pop .step-cards.variant-horizontal .pop-howto-arrow {
    transform: rotate(-90deg);
}


/* ═════════════════════════════════════════════════════════
   POP BLOCK VARIANT CSS — 全ブロック
   ※ POP HTMLクラス: pop-card, pop-check-list, pop-stats-grid etc.
   ═════════════════════════════════════════════════════════ */


/* ─────────────────────────────────────────────────────────
   POP: GLASS CARD VARIANTS (pop-card)
   ───────────────────────────────────────────────────────── */

/* pop glass_card: solid → 太め枠+大丸角 */
.ailp-style-pop .pop-card.variant-solid {
    border: 2px solid rgba(0, 0, 0, 0.08);
    border-radius: 24px;
    box-shadow: 0 6px 30px rgba(0, 0, 0, 0.06);
}

/* pop glass_card: gradient-border → カラフルグラデ枠線 */
.ailp-style-pop .pop-card.variant-gradient-border {
    border: none;
    position: relative;
}

.ailp-style-pop .pop-card.variant-gradient-border::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 3px;
    background: var(--ailp-gradient-main, linear-gradient(135deg, #ff6b6b, #ffc947));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

/* pop glass_card: top-accent → 上部カラーライン */
.ailp-style-pop .pop-card.variant-top-accent {
    border-top: 4px solid var(--ailp-accent-1, #ff6b6b);
    border-radius: 4px 4px 20px 20px;
}

/* pop glass_card: shadow-lift → 浮遊シャドウ */
.ailp-style-pop .pop-card.variant-shadow-lift {
    box-shadow: 0 12px 40px rgba(255, 107, 107, 0.15),
        0 4px 12px rgba(0, 0, 0, 0.04);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.ailp-style-pop .pop-card.variant-shadow-lift:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 50px rgba(255, 107, 107, 0.22),
        0 8px 20px rgba(0, 0, 0, 0.06);
}


/* ─────────────────────────────────────────────────────────
   POP: CHECKLIST VARIANTS (pop-check-list / pop-worry-list)
   ───────────────────────────────────────────────────────── */

/* pop checklist: card-list → カラフルカード項目 */
.ailp-style-pop .pop-check-list.variant-card-list li,
.ailp-style-pop .pop-worry-list.variant-card-list li {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 16px;
    padding: 1rem 1.2rem;
    margin-bottom: 0.6rem;
    box-shadow: 0 2px 12px rgba(255, 107, 107, 0.06);
    transition: transform 0.2s ease;
}

.ailp-style-pop .pop-check-list.variant-card-list li:hover,
.ailp-style-pop .pop-worry-list.variant-card-list li:hover {
    transform: translateX(4px);
}

/* pop checklist: numbered → カラフル丸数字 */
.ailp-style-pop .pop-check-list.variant-numbered {
    counter-reset: pop-num-list;
}

.ailp-style-pop .pop-check-list.variant-numbered li {
    counter-increment: pop-num-list;
}

.ailp-style-pop .pop-check-list.variant-numbered .pop-check-icon {
    display: none;
}

.ailp-style-pop .pop-check-list.variant-numbered li::before {
    content: counter(pop-num-list);
    background: var(--ailp-gradient-main, linear-gradient(135deg, #ff6b6b, #ffc947));
    color: #fff;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 700;
    flex-shrink: 0;
    margin-right: 0.75rem;
}

/* pop checklist: icon-box → 左ボーダー付きボックス */
.ailp-style-pop .pop-check-list.variant-icon-box li,
.ailp-style-pop .pop-worry-list.variant-icon-box li {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 12px;
    padding: 0.8rem 1rem;
    margin-bottom: 0.5rem;
    border-left: 4px solid var(--ailp-accent-1, #ff6b6b);
}


/* ─────────────────────────────────────────────────────────
   POP: CTA BUTTON VARIANTS
   ───────────────────────────────────────────────────────── */

/* pop cta: pill → 完全丸型+大きめ+シャドウ */
.ailp-style-pop .cta-button.variant-pill {
    border-radius: 100px !important;
    padding: 1.2rem 4rem !important;
    font-weight: 900;
    font-size: 1.15em !important;
    letter-spacing: 0.05em;
    box-shadow: 0 6px 24px var(--ailp-cta-shadow, rgba(255, 107, 107, 0.25));
}

/* pop cta: glow → 常時キラキラ+scale */
.ailp-style-pop .cta-button.variant-glow {
    box-shadow: 0 0 25px var(--ailp-cta-shadow, rgba(255, 107, 107, 0.5)),
        0 0 50px var(--ailp-cta-shadow, rgba(255, 107, 107, 0.25)),
        0 0 80px var(--ailp-cta-shadow, rgba(255, 107, 107, 0.1));
    animation: pop-cta-glow 2s ease-in-out infinite;
    padding: 1.2rem 3.5rem !important;
    font-size: 1.15em !important;
}

@keyframes pop-cta-glow {

    0%,
    100% {
        box-shadow: 0 0 25px var(--ailp-cta-shadow, rgba(255, 107, 107, 0.5)),
            0 0 50px var(--ailp-cta-shadow, rgba(255, 107, 107, 0.25)),
            0 0 80px var(--ailp-cta-shadow, rgba(255, 107, 107, 0.1));
        transform: scale(1);
    }

    50% {
        box-shadow: 0 0 35px var(--ailp-cta-shadow, rgba(255, 107, 107, 0.7)),
            0 0 70px var(--ailp-cta-shadow, rgba(255, 107, 107, 0.4)),
            0 0 100px var(--ailp-cta-shadow, rgba(255, 107, 107, 0.15));
        transform: scale(1.03);
    }
}

/* pop cta: arrow → span.cta-arrow で常時表示（::after はシマー用のため使わない） */
.ailp-style-pop .cta-button.variant-arrow {
    padding-right: 3.2rem !important;
    position: relative;
}

.ailp-style-pop .cta-button.variant-arrow .cta-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 0.8rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.4em;
    font-weight: 900;
    color: #fff;
    -webkit-text-fill-color: #fff;
    animation: popArrowBounce 2s ease-in-out infinite;
    z-index: 2;
}

@keyframes popArrowBounce {

    0%,
    100% {
        transform: translateY(-50%) translateX(0);
    }

    50% {
        transform: translateY(-50%) translateX(5px);
    }
}

.ailp-style-pop .cta-button.variant-arrow:hover .cta-arrow {
    animation: none;
    transform: translateY(-50%) translateX(3px);
}

/* pop cta: outline → 枠線のみ→hover塗り */
.ailp-style-pop .cta-button.variant-outline {
    background: transparent !important;
    border: 3px solid var(--ailp-accent-1, #ff6b6b) !important;
    color: var(--ailp-accent-1, #ff6b6b) !important;
    box-shadow: none !important;
}

.ailp-style-pop .cta-button.variant-outline:hover {
    background: var(--ailp-accent-1, #ff6b6b) !important;
    color: #fff !important;
    box-shadow: 0 4px 20px var(--ailp-cta-shadow, rgba(255, 107, 107, 0.3)) !important;
}


/* ─────────────────────────────────────────────────────────
   POP: STEP CARDS VARIANTS
   ───────────────────────────────────────────────────────── */

/* pop step_cards: connected → 線で繋がる */
.ailp-style-pop .step-cards.variant-connected {
    gap: 0;
}

.ailp-style-pop .step-cards.variant-connected .pop-howto-step {
    position: relative;
    padding-left: 3rem;
    border-left: 3px solid var(--ailp-accent-1, #ff6b6b);
    padding-bottom: 1.5rem;
    background: none;
    border-radius: 0;
    box-shadow: none;
}

.ailp-style-pop .step-cards.variant-connected .pop-howto-step::before {
    content: '';
    position: absolute;
    left: -9px;
    top: 0;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--ailp-accent-1, #ff6b6b);
    box-shadow: 0 0 8px var(--ailp-cta-shadow, rgba(255, 107, 107, 0.3));
}

.ailp-style-pop .step-cards.variant-connected .pop-howto-step:last-child {
    border-left-color: transparent;
    padding-bottom: 0;
}

.ailp-style-pop .step-cards.variant-connected .pop-howto-step-icon {
    display: none;
}

.ailp-style-pop .step-cards.variant-connected .pop-howto-arrow {
    display: none;
}

/* pop step_cards: icon-circle → アクセント色丸 */
.ailp-style-pop .step-cards.variant-icon-circle .pop-howto-step {
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
    text-align: center;
    padding: 2rem 1.5rem;
}

.ailp-style-pop .step-cards.variant-icon-circle .pop-howto-step-icon {
    background: var(--ailp-gradient-main, linear-gradient(135deg, #ff6b6b, #ffc947)) !important;
    color: #fff;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    font-weight: 800;
    margin: 0 auto 1rem;
}

/* pop step_cards: timeline-style → 縦タイムライン */
.ailp-style-pop .step-cards.variant-timeline-style {
    gap: 0;
}

.ailp-style-pop .step-cards.variant-timeline-style .pop-howto-step {
    padding-left: 4rem;
    border-left: 3px solid var(--ailp-accent-1, #ff6b6b);
    position: relative;
    padding-bottom: 2rem;
    border-radius: 0;
    background: none;
    box-shadow: none;
}

.ailp-style-pop .step-cards.variant-timeline-style .pop-howto-step-icon {
    position: absolute;
    left: -18px;
    top: -2px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--ailp-accent-1, #ff6b6b) !important;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 800;
}

/* タイムライン: 最後のステップのラインを残す（padding だけ短く） */
.ailp-style-pop .step-cards.variant-timeline-style .pop-howto-step:last-child {
    padding-bottom: 0.5rem;
}

.ailp-style-pop .step-cards.variant-timeline-style .pop-howto-arrow {
    display: none;
}


/* ─────────────────────────────────────────────────────────
   POP: TESTIMONIAL VARIANTS
   ───────────────────────────────────────────────────────── */

/* pop testimonial: default → カラフルカード */
.ailp-style-pop .ailp-testimonial-card {
    background: #fff !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    border-radius: 20px !important;
    box-shadow: 0 4px 20px rgba(255, 107, 107, 0.06) !important;
    backdrop-filter: none !important;
}

.ailp-style-pop .ailp-testimonial-card::before {
    display: none !important;
}

/* pop testimonial: card-grid → グリッド */
.ailp-style-pop .testimonial-list.variant-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
}

.ailp-style-pop .testimonial-list.variant-card-grid .ailp-testimonial-card {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05) !important;
    transition: transform 0.3s ease;
}

.ailp-style-pop .testimonial-list.variant-card-grid .ailp-testimonial-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(255, 107, 107, 0.12) !important;
}

/* pop testimonial: bubble → 吹き出し */
.ailp-style-pop .testimonial-list.variant-bubble {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.ailp-style-pop .testimonial-list.variant-bubble .ailp-testimonial-card {
    border-radius: 24px 24px 24px 4px !important;
    padding: 1.5rem !important;
}

.ailp-style-pop .testimonial-list.variant-bubble .ailp-testimonial-card::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 30px;
    width: 0;
    height: 0;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-top: 12px solid #fff;
}

/* pop testimonial: minimal → シンプル */
.ailp-style-pop .testimonial-list.variant-minimal .ailp-testimonial-card {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-left: 3px solid var(--ailp-accent-1, #ff6b6b) !important;
    border-radius: 0 !important;
    padding: 1rem 1.5rem !important;
}

/* pop testimonial: photo-accent → 写真強調 */
.ailp-style-pop .testimonial-list.variant-photo-accent .ailp-testimonial-card .ailp-testimonial-avatar,
.ailp-style-pop .testimonial-list.variant-photo-accent .ailp-testimonial-card .ailp-testimonial-avatar-placeholder {
    width: 64px !important;
    height: 64px !important;
    border: 3px solid var(--ailp-accent-1, #ff6b6b) !important;
    box-shadow: 0 0 12px var(--ailp-cta-shadow, rgba(255, 107, 107, 0.2));
}


/* ─────────────────────────────────────────────────────────
   POP: PRICING VARIANTS
   ───────────────────────────────────────────────────────── */

/* pop pricing: default → 白カード+カラフルシャドウ */
.ailp-style-pop .pricing-card {
    background: #fff !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    border-radius: 24px !important;
    box-shadow: 0 4px 24px rgba(255, 107, 107, 0.08) !important;
    backdrop-filter: none !important;
}

.ailp-style-pop .pricing-card::before {
    display: none !important;
}

/* pop pricing: centered → 価格中央大きめ */
.ailp-style-pop .pricing-card.variant-centered {
    text-align: center;
    max-width: 500px;
    margin: 0 auto;
}

.ailp-style-pop .pricing-card.variant-centered .ailp-pricing-current {
    font-size: 3.5rem;
    color: var(--ailp-accent-1, #ff6b6b);
    font-weight: 900;
}

/* pop pricing: ribbon → カラフルリボン */
.ailp-style-pop .pricing-card.variant-ribbon {
    position: relative;
    overflow: hidden;
}

.ailp-style-pop .pricing-card.variant-ribbon .ailp-pricing-label {
    position: absolute;
    top: 20px;
    right: -35px;
    transform: rotate(45deg);
    background: var(--ailp-gradient-main, linear-gradient(135deg, #ff6b6b, #ffc947));
    padding: 0.25rem 2.5rem;
    font-size: 0.7rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.5px;
}

/* pop pricing: gradient-bg → パステルグラデ背景 */
.ailp-style-pop .pricing-card.variant-gradient-bg {
    background: linear-gradient(135deg,
            rgba(255, 107, 107, 0.06),
            rgba(255, 201, 71, 0.06)) !important;
    border: 1px solid rgba(255, 107, 107, 0.12) !important;
}


/* ─────────────────────────────────────────────────────────
   POP: STATS VARIANTS
   ───────────────────────────────────────────────────────── */

/* pop stats: default → カラフル数値 */
.ailp-style-pop .pop-stat-number {
    color: var(--ailp-accent-1, #ff6b6b);
}

/* pop stats: card → ボーダー付きカード形式 */
.ailp-style-pop .pop-stats-grid.variant-card .pop-stat-card {
    background: #fff;
    border: 2px solid var(--ailp-accent-1, #ff6b6b);
    border-radius: 20px;
    padding: 1.5rem;
    box-shadow: 0 6px 24px rgba(255, 107, 107, 0.12);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.ailp-style-pop .pop-stats-grid.variant-card .pop-stat-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 32px rgba(255, 107, 107, 0.2);
}

/* pop stats: circle → カラフル丸囲み */
.ailp-style-pop .pop-stats-grid.variant-circle .pop-stat-card {
    width: 140px !important;
    height: 140px;
    border-radius: 50%;
    border: 3px solid var(--ailp-accent-1, #ff6b6b);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0;
    box-shadow: 0 4px 16px var(--ailp-cta-shadow, rgba(255, 107, 107, 0.12));
}

/* pop stats: glow → カラフルグロウ */
.ailp-style-pop .pop-stats-grid.variant-glow .pop-stat-number {
    text-shadow: 0 0 20px var(--ailp-accent-1, #ff6b6b),
        0 0 40px var(--ailp-cta-shadow, rgba(255, 107, 107, 0.3));
    font-size: 3rem;
}


/* ─────────────────────────────────────────────────────────
   POP: HIGHLIGHT VARIANT
   ───────────────────────────────────────────────────────── */
.ailp-style-pop .highlight-box {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 20px;
    border-left: 5px solid var(--ailp-accent-1, #ff6b6b);
    box-shadow: 0 4px 16px rgba(255, 107, 107, 0.06);
    backdrop-filter: none;
}


/* ─────────────────────────────────────────────────────────
   POP: FAQ VARIANTS
   ───────────────────────────────────────────────────────── */
.ailp-style-pop .faq-question {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 16px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
}

.ailp-style-pop .faq-answer {
    background: rgba(255, 107, 107, 0.03);
    border-radius: 0 0 16px 16px;
}


/* ─────────────────────────────────────────────────────────
   POP RESPONSIVE
   ───────────────────────────────────────────────────────── */
@media (max-width: 768px) {

    .ailp-style-pop .step-cards.variant-connected .pop-howto-step,
    .ailp-style-pop .step-cards.variant-timeline-style .pop-howto-step {
        padding-left: 2.5rem;
    }

    .ailp-style-pop .pop-stats-grid.variant-circle .pop-stat-card {
        width: 120px !important;
        height: 120px;
    }

    .ailp-style-pop .testimonial-list.variant-card-grid {
        grid-template-columns: 1fr;
    }
}


/* ─────────────────────────────────────────────────────────
   VIDEO BLOCK
   ───────────────────────────────────────────────────────── */
.ailp-body .ailp-video-wrapper {
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.ailp-style-pop .ailp-video-wrapper {
    border-radius: 20px;
    box-shadow: 0 8px 40px rgba(255, 107, 107, 0.12);
}


/* ─────────────────────────────────────────────────────────
   PROFILE BLOCK
   ───────────────────────────────────────────────────────── */

/* profile: default (side-by-side) */
.ailp-body .ailp-profile {
    max-width: 800px;
    margin: 0 auto;
}

.ailp-body .ailp-profile-row {
    display: flex;
    gap: 2rem;
    align-items: center;
}

.ailp-body .ailp-profile-img {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 3px solid var(--ailp-accent-1, #00f0ff);
    box-shadow: 0 0 20px var(--ailp-accent-1-20, rgba(0, 212, 255, 0.2));
}

.ailp-body .ailp-profile-name {
    font-size: 1.4rem;
    font-weight: 700;
    margin: 0 0 0.25rem;
}

.ailp-body .ailp-profile-title {
    display: block;
    font-size: 0.85rem;
    opacity: 0.7;
    margin-bottom: 0.75rem;
}

.ailp-body .ailp-profile-bio {
    font-size: 0.95rem;
    line-height: 1.8;
    opacity: 0.9;
}

/* profile: centered */
.ailp-body .ailp-profile.variant-centered {
    text-align: center;
}

.ailp-body .ailp-profile.variant-centered .ailp-profile-img {
    margin: 0 auto 1rem;
}

/* profile: card */
.ailp-body .ailp-profile.variant-card {
    padding: 2rem;
}

.ailp-body .ailp-profile-card-inner {
    display: flex;
    gap: 2rem;
    align-items: center;
}

/* pop style profile overrides */
.ailp-body .ailp-profile.pop-profile .ailp-profile-img {
    border-color: var(--pop-accent, #ff6b6b);
    box-shadow: 0 4px 20px rgba(255, 107, 107, 0.18);
}

.ailp-body .ailp-profile.pop-profile .ailp-profile-name {
    color: var(--pop-text-primary, #333);
}

@media (max-width: 768px) {

    .ailp-body .ailp-profile-row,
    .ailp-body .ailp-profile-card-inner {
        flex-direction: column;
        text-align: center;
    }

    .ailp-body .ailp-profile-img {
        width: 120px;
        height: 120px;
        margin: 0 auto;
    }
}


/* ─────────────────────────────────────────────────────────
   PRODUCT SHOWCASE BLOCK
   ───────────────────────────────────────────────────────── */

/* showcase: default (alternating rows) */
.ailp-body .ailp-showcase-list {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.ailp-body .ailp-showcase-row {
    display: flex;
    gap: 2rem;
    align-items: center;
    position: relative;
}

.ailp-body .ailp-showcase-img-wrap {
    flex: 0 0 45%;
    max-width: 45%;
}

.ailp-body .ailp-showcase-img {
    width: 100%;
    border-radius: 16px;
    object-fit: cover;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.ailp-body .ailp-showcase-img-placeholder {
    width: 100%;
    aspect-ratio: 4/3;
    background: var(--ailp-glass-bg, rgba(255, 255, 255, 0.05));
    border: 1px solid var(--ailp-glass-border, rgba(255, 255, 255, 0.1));
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
}

.ailp-body .ailp-showcase-text {
    flex: 1;
}

.ailp-body .ailp-showcase-text h4 {
    font-size: 1.3rem;
    font-weight: 700;
    margin: 0 0 0.75rem;
}

.ailp-body .ailp-showcase-text p {
    line-height: 1.8;
    opacity: 0.85;
}

.ailp-body .ailp-showcase-badge {
    display: inline-block;
    padding: 0.3rem 0.8rem;
    font-size: 0.75rem;
    font-weight: 700;
    border-radius: 100px;
    background: var(--ailp-gradient-main, linear-gradient(135deg, #00d4ff, #a855f7));
    color: #fff;
    margin-bottom: 0.5rem;
}

/* showcase: card-grid */
.ailp-body .ailp-showcase-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.5rem;
}

.ailp-body .ailp-showcase-card {
    position: relative;
    overflow: hidden;
    padding: 1.25rem;
    transition: transform 0.3s, box-shadow 0.3s;
}

.ailp-body .ailp-showcase-card:hover {
    transform: translateY(-4px);
}

.ailp-body .ailp-showcase-card-img {
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    border-radius: 12px;
    margin-bottom: 1rem;
}

.ailp-body .ailp-showcase-card h4 {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0 0 0.5rem;
}

.ailp-body .ailp-showcase-card p {
    font-size: 0.9rem;
    opacity: 0.8;
    line-height: 1.6;
}

.ailp-body .ailp-showcase-card .ailp-showcase-badge {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
}

/* showcase: fullwidth overlay */
.ailp-body .ailp-showcase-fullwidth {
    position: relative;
    min-height: 300px;
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: flex-end;
}

.ailp-body .ailp-showcase-fullwidth .ailp-showcase-badge {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 2;
}

.ailp-body .ailp-showcase-overlay {
    width: 100%;
    padding: 4rem 2rem 2rem;
    background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.5) 30%, rgba(0, 0, 0, 0.85) 100%);
    color: #fff;
}

.ailp-body .ailp-showcase-overlay h4 {
    font-size: 1.3rem;
    font-weight: 700;
    margin: 0 0 0.5rem;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}

.ailp-body .ailp-showcase-overlay p {
    opacity: 0.95;
    line-height: 1.6;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

/* pop-style showcase overrides */
.ailp-body .ailp-showcase-row.pop-showcase .ailp-showcase-img {
    border-radius: 20px;
    box-shadow: 0 8px 40px rgba(255, 107, 107, 0.12);
}

.ailp-body .ailp-showcase-fullwidth.pop-showcase {
    border-radius: 20px;
}

.ailp-body .pop-showcase .ailp-showcase-badge {
    background: linear-gradient(135deg, #ff6b6b, #ff8e53);
}

@media (max-width: 768px) {
    .ailp-body .ailp-showcase-row {
        flex-direction: column !important;
    }

    .ailp-body .ailp-showcase-img-wrap {
        flex: none;
        max-width: 100%;
        width: 100%;
    }

    .ailp-body .ailp-showcase-fullwidth {
        min-height: 220px;
    }

    .ailp-body .ailp-showcase-grid {
        grid-template-columns: 1fr;
    }
}


/* ─────────────────────────────────────────────────────────
   FORM SECTION ENHANCED DESIGN (Badge, Title, Subtitle)
   ───────────────────────────────────────────────────────── */

/* Form section — overall container */
.ailp-body .ailp-form-section {
    padding-top: 3rem;
    padding-bottom: 3rem;
}

/* Header area above the form */
.ailp-body .ailp-form-header {
    text-align: center;
    margin-bottom: 2rem;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

/* Badge — prominent accent label */
.ailp-body .ailp-form-badge {
    display: inline-block;
    padding: 0.6rem 2rem;
    border-radius: 100px;
    font-weight: 800;
    font-size: 1.1rem;
    letter-spacing: 0.05em;
    margin-bottom: 1.2rem;
    line-height: 1.4;
    background: var(--ailp-gradient-main, linear-gradient(135deg, #00d4ff, #a855f7));
    color: var(--ailp-cta-text, #fff);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

/* pop badge override */
.ailp-style-pop .ailp-form-badge {
    background: var(--pop-accent, linear-gradient(135deg, #22c55e, #16a34a));
    border-radius: 8px;
    font-size: 1.2rem;
    padding: 0.7rem 2.5rem;
}

/* Form Title — big bold heading */
.ailp-body .ailp-form-header .ailp-form-title {
    font-size: 1.6rem;
    font-weight: 800;
    margin: 0 0 0.8rem 0;
    line-height: 1.5;
    color: var(--ailp-text-highlight, #fff);
}

.ailp-style-pop .ailp-form-header .ailp-form-title {
    font-size: 1.8rem;
}

/* Form Subtitle — descriptive text with accent highlight */
.ailp-body .ailp-form-subtitle {
    font-size: 1.05rem;
    line-height: 1.8;
    margin: 0;
    color: var(--ailp-text-secondary, rgba(255, 255, 255, 0.7));
}

.ailp-style-pop .ailp-form-subtitle {
    font-size: 1.15rem;
    font-weight: 500;
}

@media (max-width: 768px) {
    .ailp-body .ailp-form-badge {
        font-size: 0.95rem;
        padding: 0.5rem 1.5rem;
    }

    .ailp-body .ailp-form-header .ailp-form-title {
        font-size: 1.25rem;
    }

    .ailp-style-pop .ailp-form-header .ailp-form-title {
        font-size: 1.4rem;
    }

    .ailp-body .ailp-form-subtitle {
        font-size: 0.95rem;
    }
}


/* ─────────────────────────────────────────────────────────
   FORM EMBED VARIANTS
   ───────────────────────────────────────────────────────── */

/* form_embed: bordered — アクセントボーダー付き */
.ailp-body .ailp-form-wrapper.variant-bordered {
    border-top: 4px solid var(--ailp-accent-1, #00d4ff);
    border-radius: 0 0 16px 16px;
}

.ailp-style-pop .ailp-form-wrapper.variant-bordered {
    border-top: 4px solid var(--pop-accent, #ff6b6b);
    border-radius: 0 0 20px 20px;
}

/* form_embed: gradient-glow — 光るグラデーション枠 (tech) */
.ailp-body .ailp-form-wrapper.variant-gradient-glow {
    border: 2px solid transparent;
    background-clip: padding-box;
    position: relative;
}

.ailp-body .ailp-form-wrapper.variant-gradient-glow::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    background: var(--ailp-gradient-main, linear-gradient(135deg, #00d4ff, #a855f7));
    z-index: -1;
    animation: ailpFormGlow 3s ease-in-out infinite;
}

@keyframes ailpFormGlow {

    0%,
    100% {
        opacity: 0.6;
    }

    50% {
        opacity: 1;
    }
}

/* form_embed: shadow-card — 影付き強調カード (pop) */
.ailp-body .ailp-form-wrapper.variant-shadow-card {
    box-shadow: 0 12px 40px rgba(255, 107, 107, 0.15),
        0 4px 12px rgba(0, 0, 0, 0.08);
    border: 2px solid rgba(255, 107, 107, 0.2);
}


/* ─────────────────────────────────────────────────────────
   FLOATING CTA (FOOTER BAR)
   ───────────────────────────────────────────────────────── */
.ailp-floating-cta {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    padding: 0.75rem 1rem;
    text-align: center;
    transform: translateY(100%);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.ailp-floating-cta.is-visible {
    transform: translateY(0);
}

/* Tech style bar */
.ailp-body:not(.ailp-style-pop) .ailp-floating-cta {
    background: transparent;
}

/* Pop style bar */
.ailp-style-pop .ailp-floating-cta {
    background: transparent;
}

/* ── Floating CTA Button (self-contained styles) ── */
.ailp-floating-cta a {
    display: inline-block;
    margin: 0;
    min-width: 280px;
    max-width: 90vw;
    padding: 0.85rem 2.5rem;
    border-radius: 12px;
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    line-height: 1.4;
    border: none;
}

/* Tech button style */
.ailp-body:not(.ailp-style-pop) .ailp-floating-cta a {
    background: var(--ailp-gradient-main, linear-gradient(135deg, #00d4ff, #a855f7));
    color: var(--ailp-cta-text, #fff);
    box-shadow: 0 4px 20px rgba(0, 212, 255, 0.3);
    letter-spacing: 0.05em;
}

.ailp-body:not(.ailp-style-pop) .ailp-floating-cta a:hover {
    box-shadow: 0 6px 28px rgba(0, 212, 255, 0.5);
    transform: translateY(-2px);
}

/* Pop button style */
.ailp-style-pop .ailp-floating-cta a {
    background: linear-gradient(135deg, #ff6b6b, #ff8e53);
    color: var(--ailp-cta-text, #fff);
    border-radius: 100px;
    box-shadow: 0 4px 20px rgba(255, 107, 107, 0.3);
    font-size: 1.05rem;
    padding: 0.9rem 3rem;
}

.ailp-style-pop .ailp-floating-cta a:hover {
    box-shadow: 0 6px 28px rgba(255, 107, 107, 0.5);
    transform: translateY(-2px);
}

/* Subtext */
.ailp-floating-cta .ailp-floating-subtext {
    font-size: 0.7rem;
    opacity: 0.6;
    margin-top: 0.25rem;
}

.ailp-body:not(.ailp-style-pop) .ailp-floating-cta .ailp-floating-subtext {
    color: rgba(255, 255, 255, 0.6);
}

.ailp-style-pop .ailp-floating-cta .ailp-floating-subtext {
    color: #666;
}

@media (max-width: 768px) {
    .ailp-floating-cta a {
        min-width: auto;
        width: 90vw;
        font-size: 0.95rem;
        padding: 0.75rem 1.5rem;
    }
}

/* ── Text Shadow Utility ── */
.ailp-body .ailp-text-shadow {
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5), 0 0 12px rgba(0, 0, 0, 0.3);
}