*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
        :root{--bg:#0a0a0f;--bg2:#12121a;--surface:rgba(255,255,255,.04);--surface2:rgba(255,255,255,.08);--text:#e8e8ef;--text2:#9a9ab0;--text3:#6a6a80;--accent:#8b5cf6;--accent-glow:rgba(139,92,246,.3);--cyan:#06b6d4;--pink:#ec4899;--gold:#f59e0b;--grad1:linear-gradient(135deg,#8b5cf6,#06b6d4);--grad2:linear-gradient(135deg,#6d28d9,#ec4899);--radius:16px;--radius-sm:8px}
        html{scroll-behavior:smooth;font-size:16px}
        body{font-family:'Noto Sans JP','Inter',sans-serif;background:var(--bg);color:var(--text);line-height:1.8;overflow-x:hidden}
        a{color:var(--accent);text-decoration:none}
        .container{max-width:1100px;margin:0 auto;padding:0 24px}
        .section{padding:100px 0}
        .section-label{display:inline-block;padding:6px 18px;border-radius:20px;background:var(--surface2);color:var(--accent);font-size:.8rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin-bottom:16px}
        .section-title{font-size:clamp(1.8rem,4vw,2.8rem);font-weight:900;line-height:1.3;margin-bottom:20px}
        .section-sub{color:var(--text2);font-size:1.05rem;max-width:640px;margin-bottom:48px}
        .grad-text{background:var(--grad1);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
        .center{text-align:center}
        .mx-auto{margin-left:auto;margin-right:auto}
        .fade-in{opacity:0;transform:translateY(32px);transition:opacity .7s ease,transform .7s ease}
        .fade-in.visible{opacity:1;transform:translateY(0)}
        .btn{display:inline-flex;align-items:center;gap:8px;padding:16px 40px;border:none;border-radius:60px;font-size:1.05rem;font-weight:700;cursor:pointer;transition:all .3s ease;position:relative;overflow:hidden}
        .btn-primary{background:var(--grad1);color:#fff;box-shadow:0 4px 30px var(--accent-glow)}
        .btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 40px var(--accent-glow)}
        .btn-primary::after{content:'';position:absolute;inset:0;background:linear-gradient(rgba(255,255,255,.2),transparent);opacity:0;transition:opacity .3s}
        .btn-primary:hover::after{opacity:1}
        .btn-outline{background:transparent;color:var(--accent);border:2px solid rgba(139,92,246,.4)}
        .btn-outline:hover{border-color:var(--accent);background:rgba(139,92,246,.1)}
        .btn-lg{padding:20px 52px;font-size:1.15rem}
        .nav{position:fixed;top:0;left:0;right:0;z-index:100;padding:16px 0;transition:all .3s ease}
        .nav.scrolled{background:rgba(10,10,15,.92);backdrop-filter:blur(20px);border-bottom:1px solid rgba(255,255,255,.06)}
        .nav-inner{display:flex;align-items:center;justify-content:space-between}
        .nav-logo{font-size:1.2rem;font-weight:900;letter-spacing:-.02em}
        .nav-links{display:flex;gap:28px;align-items:center}
        .nav-links a{color:var(--text2);font-size:.9rem;font-weight:500;transition:color .3s}
        .nav-links a:hover{color:var(--text)}
        .nav-cta{padding:10px 24px!important;font-size:.85rem!important}
        .hero{padding:160px 0 100px;background:radial-gradient(circle at center,rgba(13,13,18,.4) 0%,var(--bg) 100%);overflow:hidden;display:flex;align-items:center;min-height:80vh;position:relative}
        .hero::before{content:'';position:absolute;width:500px;height:400px;background:radial-gradient(ellipse at center,rgba(139,92,246,.25) 0%,rgba(109,40,217,.15) 40%,transparent 70%);top:15%;left:5%;border-radius:30% 70% 70% 30%/30% 30% 70% 70%;filter:blur(40px);pointer-events:none;z-index:0}
        .hero::after{content:'';position:absolute;width:450px;height:380px;background:radial-gradient(ellipse at center,rgba(6,182,212,.2) 0%,rgba(6,150,180,.12) 40%,transparent 70%);top:20%;right:5%;border-radius:70% 30% 30% 70%/60% 40% 60% 40%;filter:blur(40px);pointer-events:none;z-index:0}
        .hero-content{position:relative;z-index:2;max-width:720px}
        .hero-badge{display:inline-flex;align-items:center;gap:8px;padding:8px 20px;border-radius:40px;background:rgba(139,92,246,.15);border:1px solid rgba(139,92,246,.3);font-size:.85rem;color:var(--accent);font-weight:600;margin-bottom:28px}
        .hero-badge .dot{width:8px;height:8px;border-radius:50%;background:var(--accent);animation:blink 2s infinite}
        @keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}
        .hero h1{font-size:clamp(2.4rem,5.5vw,3.8rem);font-weight:900;line-height:1.15;margin-bottom:24px;letter-spacing:-.03em}
        .hero p{font-size:1.15rem;color:var(--text2);margin-bottom:40px;max-width:560px}
        .hero-buttons{display:flex;gap:16px;flex-wrap:wrap}
        .hero-pillars{display:flex;gap:16px;margin-top:48px;padding-top:36px;border-top:1px solid rgba(255,255,255,.08)}
        .hero-pillar{flex:1;padding:20px;border-radius:var(--radius-sm);background:var(--surface);border:1px solid rgba(255,255,255,.06);transition:all .3s ease}
        .hero-pillar:hover{border-color:rgba(139,92,246,.3);background:rgba(139,92,246,.04);transform:translateY(-2px)}
        .hero-pillar .pillar-icon{font-size:1.6rem;margin-bottom:8px}
        .hero-pillar h4{font-size:.9rem;font-weight:700;margin-bottom:4px;color:var(--text)}
        .hero-pillar p{font-size:.78rem;color:var(--text2);line-height:1.5}
        .hero-visual{position:absolute;right:-40px;top:80px;width:460px;pointer-events:none;opacity:.85;z-index:1;animation:heroFloat 6s ease-in-out infinite}
        .hero-visual img{width:100%;height:auto;display:block;border-radius:var(--radius)}
        @keyframes heroFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
        .problems-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px}
        .problem-card{padding:32px;border-radius:var(--radius);background:var(--surface);border:1px solid rgba(255,255,255,.06);transition:all .3s ease}
        .problem-card:hover{border-color:rgba(236,72,153,.3);background:rgba(236,72,153,.04)}
        .problem-card .icon{font-size:1.2rem;margin-right:8px;display:inline}
        .feature-icon-inline{font-size:1.2rem;margin-right:8px;display:inline}
        .problem-card h3{font-size:1.15rem;font-weight:700;margin-bottom:10px}
        .problem-card p{color:var(--text2);font-size:.95rem}
        .features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:24px}
        .feature-card{padding:36px;border-radius:var(--radius);background:var(--surface);border:1px solid rgba(255,255,255,.06);transition:all .4s ease;position:relative;overflow:hidden}
        .feature-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--grad1);transform:scaleX(0);transform-origin:left;transition:transform .4s ease}
        .feature-card:hover::before{transform:scaleX(1)}
        .feature-card:hover{border-color:rgba(139,92,246,.3);transform:translateY(-4px);box-shadow:0 12px 40px rgba(139,92,246,.1)}
        .feature-icon{width:56px;height:56px;border-radius:14px;overflow:hidden;margin-bottom:20px;flex-shrink:0}
        .feature-card h3{font-size:1.1rem;font-weight:700;margin-bottom:10px}
        .feature-card p{color:var(--text2);font-size:.93rem}
        /* === COMPARISON BOX (NEW) === */
        .comparison-box{max-width:900px;margin:0 auto;border-radius:var(--radius);overflow:hidden;border:1px solid rgba(255,255,255,.08);background:var(--surface)}
        .comparison-row{display:grid;grid-template-columns:120px 1fr 1fr;border-bottom:1px solid rgba(255,255,255,.06)}
        .comparison-row:last-child{border-bottom:none}
        .comparison-header{background:rgba(255,255,255,.04);font-weight:700;font-size:.9rem}
        .comparison-cell{padding:16px 20px;font-size:.9rem;color:var(--text2)}
        .comparison-cell.label{font-weight:700;color:var(--text);background:rgba(255,255,255,.02)}
        .comparison-cell.bad{color:var(--text3)}
        .comparison-cell.good{color:var(--text);background:rgba(139,92,246,.04)}
        @media(max-width:768px){.comparison-row{grid-template-columns:1fr}.comparison-header{display:none}.comparison-cell{padding:12px 16px}.comparison-cell.label{background:rgba(139,92,246,.1);font-size:.85rem}}
        /* === EXTEND GRID (NEW) === */
        .extend-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:900px;margin:0 auto}
        .extend-card{padding:40px;border-radius:var(--radius);background:var(--surface);border:1px solid rgba(255,255,255,.06);transition:all .4s ease}
        .extend-card:hover{border-color:rgba(139,92,246,.3);transform:translateY(-4px);box-shadow:0 12px 40px rgba(139,92,246,.1)}
        .extend-icon{font-size:2.5rem;margin-bottom:20px}
        .extend-card h3{font-size:1.2rem;font-weight:700;margin-bottom:12px}
        .extend-card p{color:var(--text2);font-size:.93rem;line-height:1.7}
        @media(max-width:768px){.extend-grid{grid-template-columns:1fr}}
        /* === SHOWCASE === */
        .showcase-item{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;padding:48px 0}
        .showcase-img-wrap{position:relative;border-radius:var(--radius);overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.1);transition:transform .4s ease,box-shadow .4s ease;min-width:0}
        .showcase-text{min-width:0}
        .showcase-img-wrap:hover{transform:translateY(-6px);box-shadow:0 30px 80px rgba(0,0,0,.6)}
        .showcase-img-wrap img{width:100%;height:auto;display:block}
        .showcase-badge{display:inline-flex;align-items:center;gap:6px;padding:5px 14px;border-radius:20px;font-size:.75rem;font-weight:700;margin-bottom:16px}
        .showcase-badge.star{background:rgba(245,158,11,.15);color:var(--gold);border:1px solid rgba(245,158,11,.3)}
        .showcase-text h3{font-size:1.5rem;font-weight:900;margin-bottom:12px;line-height:1.3}
        .showcase-text p{color:var(--text2);font-size:.95rem;margin-bottom:16px;line-height:1.7}
        .showcase-points{list-style:none;display:flex;flex-direction:column;gap:8px;width:100%;min-width:0}
        .showcase-points li{position:relative;padding-left:1.4em;font-size:.9rem;color:var(--text2);overflow-wrap:break-word;word-break:break-word;line-height:1.6}
        .showcase-points li::before{content:'✦';color:var(--accent);font-weight:700;position:absolute;left:0;top:0}
        @media(max-width:768px){.showcase-item{grid-template-columns:1fr;gap:24px}}
        /* === WORKFLOW === */
        .flow-grid{display:flex;flex-direction:column;gap:0;max-width:800px;margin:0 auto}
        .flow-card{display:flex;gap:24px;align-items:stretch;position:relative;padding:0}
        .flow-line{display:flex;flex-direction:column;align-items:center;width:56px;flex-shrink:0}
        .flow-dot{width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.1rem;font-weight:900;flex-shrink:0;position:relative;z-index:2;border:2px solid}
        .flow-dot.user{background:rgba(236,72,153,.15);border-color:var(--pink);color:var(--pink)}
        .flow-dot.ai{background:rgba(6,182,212,.15);border-color:var(--cyan);color:var(--cyan)}
        .flow-connector{flex:1;width:2px;background:linear-gradient(rgba(139,92,246,.4),rgba(6,182,212,.4))}
        .flow-body{flex:1;padding:12px 0 36px}
        .flow-header{display:flex;align-items:center;gap:10px;margin-bottom:6px}
        .flow-phase{font-size:.7rem;font-weight:700;padding:3px 10px;border-radius:12px;letter-spacing:.05em}
        .flow-phase.user{background:rgba(236,72,153,.15);color:var(--pink)}
        .flow-phase.ai{background:rgba(6,182,212,.15);color:var(--cyan)}
        .flow-body h3{font-size:1.05rem;font-weight:700;margin-bottom:4px}
        .flow-body p{color:var(--text2);font-size:.9rem;line-height:1.6}
        .flow-detail{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
        .flow-tag{font-size:.75rem;padding:4px 10px;border-radius:6px;background:var(--surface2);color:var(--text2)}
        .flow-legend{display:flex;gap:20px;justify-content:center;margin-bottom:40px;flex-wrap:wrap}
        .flow-legend-item{display:flex;align-items:center;gap:6px;font-size:.8rem;color:var(--text2)}
        .flow-legend-dot{width:10px;height:10px;border-radius:50%}
        .flow-legend-dot.c-user{background:var(--pink)}
        .flow-legend-dot.c-ai{background:var(--cyan)}
        .flow-screenshots{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px}
        .flow-screenshots img{width:100%;height:auto;border-radius:var(--radius-sm);border:1px solid rgba(255,255,255,.1);box-shadow:0 8px 30px rgba(0,0,0,.4);transition:transform .3s ease,box-shadow .3s ease}
        .flow-screenshots img:hover{transform:scale(1.02);box-shadow:0 12px 40px rgba(0,0,0,.6)}
        @media(max-width:600px){.flow-screenshots{grid-template-columns:1fr}}
        /* === HOVER ZOOM === */
        .hover-zoom-img { transition: transform .3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow .3s ease, z-index 0s; z-index: 1; position: relative; cursor: zoom-in; }
        .hover-zoom-img:hover { transform: scale(2.0); z-index: 100; box-shadow: 0 40px 80px rgba(0,0,0,0.8); }
        /* === UTILITY === */
        .img-panel{width:100%;border-radius:4px;box-shadow:0 4px 12px rgba(0,0,0,.3)}
        .fbox{background:#0f172a;padding:8px;border-radius:var(--radius-sm)}
        .fbox-accent{border:1px solid rgba(139,92,246,.3)}
        .fbox-cyan{border:1px solid rgba(6,182,212,.3)}
        .fbox-pink{border:1px solid rgba(236,72,153,.3)}
        .fbox-gold{border:1px solid rgba(245,158,11,.3)}
        .fbox-dim{border:1px solid rgba(255,255,255,.08)}
        .feature-hdr{display:flex;align-items:center;gap:12px;margin-bottom:16px}
        .feature-desc{color:var(--text2);font-size:.95rem;line-height:1.7;margin-bottom:24px}
        /* === PRICING === */
        .pricing-card{max-width:540px;margin:0 auto;padding:48px;border-radius:20px;background:linear-gradient(145deg,rgba(139,92,246,.08),rgba(6,182,212,.05));border:1px solid rgba(139,92,246,.25);position:relative;overflow:hidden}
        .pricing-card::before{content:'';position:absolute;top:-60px;right:-60px;width:200px;height:200px;background:radial-gradient(circle,rgba(139,92,246,.15),transparent);pointer-events:none}
        .pricing-badge{display:inline-block;padding:6px 16px;border-radius:20px;background:var(--grad2);color:#fff;font-size:.8rem;font-weight:700;margin-bottom:20px}
        .pricing-card h3{font-size:1.4rem;font-weight:700;margin-bottom:24px}
        .price{margin-bottom:32px}
        .price .original{color:var(--text3);font-size:1rem;text-decoration:line-through;margin-right:8px}
        .price .current{font-size:3.2rem;font-weight:900;background:var(--grad1);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
        .price .yen{font-size:1.2rem;font-weight:700;color:var(--text2)}
        .pricing-features{list-style:none;margin-bottom:36px}
        .pricing-features li{padding:10px 0;border-bottom:1px solid rgba(255,255,255,.06);font-size:.95rem;display:flex;align-items:center;gap:10px}
        .pricing-features li::before{content:'✓';color:var(--accent);font-weight:700}
        /* === FAQ === */
        .faq-list{max-width:700px;margin:0 auto}
        .faq-item{border-bottom:1px solid rgba(255,255,255,.08);padding:20px 0}
        .faq-q{display:flex;justify-content:space-between;align-items:center;cursor:pointer;font-weight:700;font-size:1.05rem;transition:color .3s}
        .faq-q:hover{color:var(--accent)}
        .faq-q .arrow{transition:transform .3s;color:var(--text3);font-size:1.2rem}
        .faq-item.open .arrow{transform:rotate(180deg)}
        .faq-a{max-height:0;overflow:hidden;transition:max-height .4s ease,padding .4s ease;color:var(--text2);font-size:.95rem}
        .faq-item.open .faq-a{max-height:300px;padding-top:16px}
        /* === CTA === */
        .cta-section{padding:100px 0;text-align:center;position:relative;overflow:hidden}
        .cta-section::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent,rgba(139,92,246,.06),transparent);pointer-events:none}
        .cta-section h2{font-size:clamp(1.8rem,4vw,2.6rem);font-weight:900;margin-bottom:20px}
        .cta-section p{color:var(--text2);margin-bottom:40px;font-size:1.05rem}
        .footer{padding:40px 0;border-top:1px solid rgba(255,255,255,.06);text-align:center;color:var(--text3);font-size:.85rem}
        /* === PARTICLES === */
        .particles{position:fixed;inset:0;pointer-events:none;z-index:0}
        .particle{position:absolute;width:2px;height:2px;border-radius:50%;background:var(--accent);opacity:.3;animation:float linear infinite}
        @keyframes float{0%{transform:translateY(100vh) scale(0);opacity:0}10%{opacity:.4}90%{opacity:.4}100%{transform:translateY(-10vh) scale(1);opacity:0}}
        /* =====================================================
           MOBILE FIRST — ベースがスマホ、PCは min-width で上乗せ
           ===================================================== */
        .section{padding:48px 0}
        .container{padding:0 16px}
        .section-title{font-size:1.65rem}
        .section-sub{font-size:.92rem;margin-bottom:28px}
        .hero{padding:88px 0 44px;min-height:auto}
        .hero h1{font-size:1.8rem;letter-spacing:-.02em;margin-bottom:14px}
        .hero p{font-size:.97rem;margin-bottom:22px}
        .hero-badge{font-size:.76rem;padding:6px 14px}
        .hero-badge{font-size:.76rem;padding:6px 14px}
        .hero-visual{display:none}
        .hero-pillars{display:none}
        .hero-buttons{flex-direction:column}
        .btn{width:100%;justify-content:center}
        .btn-lg{padding:15px 24px;font-size:1rem}
        .nav-links a:not(.btn){display:none}
        .nav-cta{padding:8px 18px!important;font-size:.8rem!important}
        .showcase-item{grid-template-columns:1fr!important;gap:20px;padding:28px 0}
        .showcase-text h3{font-size:1.2rem}
        .extend-grid{grid-template-columns:1fr}
        .extend-card{padding:20px}
        .feature-card{padding:20px}
        .problem-card{padding:20px}
        .pricing-card{padding:24px 18px}
        .price .current{font-size:2.2rem}
        .flow-body{padding:6px 0 18px}
        .flow-line{width:40px}
        .flow-dot{width:38px;height:38px;font-size:.9rem}
        .flow-body h3{font-size:.93rem}
        .flow-screenshots{grid-template-columns:1fr}
        .cta-section{padding:52px 0}
        .faq-q{font-size:.93rem}
        .comparison-row{grid-template-columns:1fr}
        .comparison-header{display:none}
        .comparison-cell{padding:10px 14px}
        .comparison-cell.label{background:rgba(139,92,246,.1);font-size:.83rem}
        .mob-pad{padding:16px!important}
        .feature-hdr{margin-bottom:10px}
        .feature-desc{font-size:.9rem;margin-bottom:14px}
        .fbox{padding:0;background:transparent!important;border:none!important}
        @media(min-width:768px){
            .section{padding:100px 0}
            .container{padding:0 24px}
            .section-title{font-size:clamp(1.8rem,4vw,2.8rem)}
            .section-sub{font-size:1.05rem;margin-bottom:48px}
            .hero{padding:160px 0 100px;min-height:80vh}
            .hero h1{font-size:clamp(2.4rem,5.5vw,3.8rem);letter-spacing:-.03em;margin-bottom:24px}
            .hero p{font-size:1.15rem;margin-bottom:40px}
            .hero-badge{font-size:.85rem;padding:8px 20px}
            .hero-visual{display:block}
            .hero-pillars{display:flex;gap:16px}
            .hero-buttons{flex-direction:row}
            .btn{width:auto}
            .btn-lg{padding:20px 52px;font-size:1.15rem}
            .nav-links a:not(.btn){display:block}
            .nav-cta{padding:10px 24px!important;font-size:.85rem!important}
            .showcase-item{grid-template-columns:1fr 1fr!important;gap:48px;padding:48px 0}
            .showcase-text h3{font-size:1.5rem}
            .extend-grid{grid-template-columns:1fr 1fr}
            .extend-card{padding:40px}
            .feature-card{padding:36px}
            .problem-card{padding:32px}
            .pricing-card{padding:48px}
            .price .current{font-size:3.2rem}
            .flow-body{padding:12px 0 36px}
            .flow-line{width:56px}
            .flow-dot{width:48px;height:48px;font-size:1.1rem}
            .flow-body h3{font-size:1.05rem}
            .flow-screenshots{grid-template-columns:1fr 1fr}
            .cta-section{padding:100px 0}
            .faq-q{font-size:1.05rem}
            .comparison-row{grid-template-columns:120px 1fr 1fr}
            .comparison-header{display:grid}
            .comparison-cell{padding:16px 20px}
            .comparison-cell.label{background:rgba(255,255,255,.02);font-size:.9rem}
            .mob-pad{padding:revert!important}
            .feature-hdr{margin-bottom:16px}
            .feature-desc{font-size:.95rem;margin-bottom:24px}
            .fbox{padding:8px}
        }

/* === UTILITY SPACING === */
.mt-0{margin-top:0}.mt-8{margin-top:8px}.mt-16{margin-top:16px}.mt-24{margin-top:24px}.mt-32{margin-top:32px}.mt-40{margin-top:40px}.mt-48{margin-top:48px}.mt-56{margin-top:56px}.mt-64{margin-top:64px}
.mb-0{margin-bottom:0}.mb-8{margin-bottom:8px}.mb-16{margin-bottom:16px}.mb-24{margin-bottom:24px}.mb-32{margin-bottom:32px}
.pt-0{padding-top:0}.pt-16{padding-top:16px}.pt-24{padding-top:24px}.pt-32{padding-top:32px}.pt-48{padding-top:48px}
.pb-0{padding-bottom:0}.pb-16{padding-bottom:16px}.pb-24{padding-bottom:24px}.pb-32{padding-bottom:32px}
.w-full{width:100%}.text-center{text-align:center}.flex-col{flex-direction:column}