:root{--primary:#7B8CDE;--primary-light:#A8B4F0;--primary-dark:#5A6BBF;--accent:#F2A07B;--warm:#FFF8F3;--warm-mid:#FFF0E6;--cream:#FFFCF9;--text:#3D3D4E;--text-light:#7A7A8E;--text-lighter:#A8A8B8;--white:#FFFFFF;--shadow-soft:0 4px 30px rgba(123,140,222,0.12);--shadow-medium:0 8px 40px rgba(123,140,222,0.18);--radius:20px;--radius-sm:12px}
*{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth;font-size:16px}body{font-family:'Noto Sans JP',sans-serif;color:var(--text);background:var(--cream);overflow-x:hidden;-webkit-font-smoothing:antialiased}.zen{font-family:'Zen Maru Gothic',serif}.inner{max-width:720px;margin:0 auto}

.hero{min-height:auto;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:3rem 1.5rem 2rem;position:relative;background:linear-gradient(170deg,var(--cream) 0%,var(--warm) 40%,var(--warm-mid) 100%);overflow:hidden}
.hero::before{content:'';position:absolute;top:-20%;right:-15%;width:500px;height:500px;border-radius:50%;background:radial-gradient(circle,rgba(123,140,222,0.08) 0%,transparent 70%);pointer-events:none}
.hero-icon{width:80px;height:80px;margin-bottom:1.5rem;opacity:0;animation:fadeUp .8s ease-out .2s forwards}.hero-icon svg{width:100%;height:100%}
.hero-concept{font-size:clamp(1.5rem,5vw,2.2rem);font-weight:700;line-height:1.7;letter-spacing:.04em;margin-bottom:1rem;opacity:0;animation:fadeUp .8s ease-out .4s forwards}.hero-concept .highlight{color:var(--primary)}.hero-concept .accent{color:var(--accent)}
br.sp{display:none}@media(max-width:600px){br.sp{display:inline}}
.hero-sub{font-size:clamp(.85rem,2.5vw,1rem);color:var(--text-light);font-weight:400;letter-spacing:.06em;margin-bottom:.5rem;opacity:0;animation:fadeUp .8s ease-out .6s forwards}
.hero-name{font-size:clamp(1.1rem,3vw,1.4rem);font-weight:700;color:var(--primary-dark);letter-spacing:.12em;margin-bottom:2.5rem;opacity:0;animation:fadeUp .8s ease-out .7s forwards}
.hero-waitlist{width:100%;max-width:510px;opacity:0;animation:fadeUp .8s ease-out .85s forwards;margin-bottom:1.2rem;margin-left:auto;margin-right:auto}
.waitlist-limit{font-size:.85rem;color:var(--accent);font-weight:700;letter-spacing:.08em;margin-bottom:.4rem}
.waitlist-form{display:flex;flex-direction:column;align-items:center;gap:.5rem}
.waitlist-input-row{display:flex;gap:.5rem;width:100%}
.waitlist-input{flex:1;padding:.85rem 1.2rem;border:2px solid var(--primary-light);border-radius:50px;font-size:.95rem;font-family:'Noto Sans JP',sans-serif;outline:none;transition:border-color .3s;background:var(--white);text-align:center}
.waitlist-input:focus{border-color:var(--primary)}
.waitlist-input::placeholder{color:var(--text-lighter)}
.waitlist-btn{padding:.85rem 1.8rem;font-size:.9rem;min-width:auto;white-space:nowrap}
.waitlist-note{font-size:.78rem;color:var(--text-light);margin-top:.2rem}
.cta-waitlist{display:flex;flex-direction:column;align-items:center;gap:.5rem;text-align:center;margin-bottom:.5rem}
.cta-limit{font-size:.85rem;color:rgba(255,255,255,0.8);font-weight:700;letter-spacing:.08em;margin-bottom:.5rem}
.cta-waitlist-input{background:rgba(255,255,255,0.95);border-color:rgba(255,255,255,0.4)}
.cta-waitlist-input:focus{border-color:#fff}
.cta-waitlist-input::placeholder{color:var(--text-lighter)}
.cta-waitlist-note{font-size:.75rem;color:rgba(255,255,255,0.6);margin-top:.3rem}
.waitlist-done{text-align:center;padding:1rem}
.waitlist-done-msg{font-size:1rem;color:var(--primary-dark);line-height:1.8}
.hero-cta-sub{display:flex;flex-direction:column;gap:.6rem;align-items:center;opacity:0;animation:fadeUp .8s ease-out 1s forwards;margin-top:1.5em}
.btn-scroll{font-size:.9rem;color:var(--primary);text-decoration:none;font-weight:500;transition:opacity .3s}.btn-scroll:hover{opacity:.7}
@media(max-width:500px){.waitlist-input-row{flex-direction:column}.waitlist-btn{width:100%}}
.hero-cta{display:flex;flex-direction:column;gap:.8rem;align-items:center;opacity:0;animation:fadeUp .8s ease-out .9s forwards}
.btn-primary{display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--primary) 0%,var(--primary-dark) 100%);color:var(--white);font-family:'Zen Maru Gothic',serif;font-size:1.05rem;font-weight:700;padding:1rem 3rem;border-radius:50px;text-decoration:none;border:none;cursor:pointer;box-shadow:0 4px 20px rgba(123,140,222,0.35);transition:all .3s;letter-spacing:.06em;min-width:260px}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 30px rgba(123,140,222,0.45)}
.btn-secondary{font-size:.85rem;color:var(--text-light);text-decoration:none;transition:color .3s}.btn-secondary:hover{color:var(--primary)}
.hero-scroll{margin-top:1.5rem;opacity:0;animation:fadeUp .8s ease-out 1.2s forwards}.hero-scroll span{display:block;width:2px;height:30px;background:var(--primary-light);margin:.5rem auto 0;border-radius:2px;animation:scrollPulse 2s ease-in-out infinite}

section,.full-section{padding:5rem 1.5rem}.full-section{max-width:100%}
.section-label{font-size:.7rem;font-weight:500;color:var(--primary);letter-spacing:.2em;text-transform:uppercase;margin-bottom:.8rem;opacity:0;transform:translateY(20px)}
.section-title{font-size:clamp(1.3rem,4vw,1.7rem);font-weight:700;line-height:1.7;margin-bottom:2rem;opacity:0;transform:translateY(20px)}

.transform-section{background:linear-gradient(180deg,var(--cream) 0%,var(--warm) 100%)}
.transform-examples{display:flex;flex-direction:column;gap:2rem;margin-top:1.5rem}
.transform-example{background:var(--white);border-radius:var(--radius);box-shadow:var(--shadow-soft);overflow:hidden;opacity:0;transform:translateY(20px)}
.transform-example-pair{display:grid;grid-template-columns:1fr 1fr}
.transform-example-label{font-size:.72rem;font-weight:700;color:var(--white);padding:.5rem 1rem}
.transform-example-label.before{background:var(--text-lighter)}
.transform-example-label.after{background:var(--primary)}
.transform-example-text{padding:1.2rem 1.5rem;font-size:.85rem;line-height:2}
.transform-example-text.before{color:var(--text-light);font-weight:300;border-right:1px solid #F0F0F5}
.transform-example-text.after{color:var(--text);font-weight:400}
@media(max-width:600px){.transform-example-pair{grid-template-columns:1fr}.transform-example-text.before{border-right:none;border-bottom:1px solid #F0F0F5}}

.transform-animated{position:relative}
.transform-anim-stage{position:relative;min-height:220px;padding:0}
.transform-anim-content{transition:all .8s ease}
.voice-waves{display:flex;align-items:center;justify-content:center;gap:3px;padding:.8rem 1.5rem 0;height:30px;transition:opacity .5s}
.voice-waves span{width:3px;border-radius:3px;background:var(--primary-light);animation:voiceWave 1s ease-in-out infinite}
.voice-waves span:nth-child(1){height:12px;animation-delay:0s}.voice-waves span:nth-child(2){height:20px;animation-delay:.15s}.voice-waves span:nth-child(3){height:28px;animation-delay:.3s}.voice-waves span:nth-child(4){height:20px;animation-delay:.45s}.voice-waves span:nth-child(5){height:12px;animation-delay:.6s}
@keyframes voiceWave{0%,100%{transform:scaleY(.5);opacity:.4}50%{transform:scaleY(1);opacity:1}}
.transform-anim-label{text-align:center;padding:.8rem;font-size:.78rem;color:var(--text-lighter);border-top:1px solid #F0F0F5;transition:all .5s}
.transform-animated.phase-shimmer #animBefore{opacity:0;filter:blur(6px);transform:translateY(-10px)}
.transform-animated.phase-clean #animBefore{display:none}
.transform-animated.phase-clean #animAfter{opacity:1!important;position:relative!important}
.transform-animated.phase-clean .voice-waves{opacity:0}
.transform-animated.phase-shimmer .voice-waves{opacity:0}

.howto-steps{display:flex;flex-direction:column;gap:1.5rem;margin-top:1rem}
.howto-step{display:flex;gap:1.2rem;align-items:flex-start;background:var(--white);border-radius:var(--radius);padding:1.5rem;box-shadow:var(--shadow-soft);opacity:0;transform:translateY(20px)}
.howto-step-num{flex-shrink:0;width:40px;height:40px;border-radius:50%;background:var(--primary);color:var(--white);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.9rem}
.howto-step-img{flex-shrink:0;width:100%;max-width:160px;aspect-ratio:9/16;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:.68rem;color:var(--text-lighter);text-align:center;object-fit:cover;box-shadow:0 2px 12px rgba(0,0,0,0.1)}
img.howto-step-img{padding:0;border:none;background:none}
.howto-step-content h3{font-size:1rem;font-weight:700;margin-bottom:.4rem}
.howto-step-content p{font-size:.85rem;color:var(--text-light);line-height:1.8}
.howto-image-row{display:flex;gap:.8rem;margin-top:1rem}
@media(max-width:500px){.howto-image-row{flex-direction:column}.howto-step-img{max-width:100%;aspect-ratio:9/16}}

.features-grid{display:grid;grid-template-columns:1fr;gap:1.2rem;margin-top:1rem}
.feature-item{display:flex;align-items:flex-start;gap:1rem;padding:1.5rem;background:var(--white);border-radius:var(--radius-sm);box-shadow:var(--shadow-soft);opacity:0;transform:translateY(20px)}
.feature-icon{flex-shrink:0;width:48px;height:48px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:1.3rem}
.feature-icon.voice{background:rgba(123,140,222,0.12)}.feature-icon.ai{background:rgba(242,160,123,0.12)}.feature-icon.schedule{background:rgba(123,200,180,0.12)}.feature-icon.character{background:rgba(200,140,220,0.12)}
.feature-text h3{font-size:.95rem;font-weight:700;margin-bottom:.3rem}.feature-text p{font-size:.82rem;color:var(--text-light);line-height:1.7}
@media(min-width:600px){.features-grid{grid-template-columns:1fr 1fr}}

.effort-compare{margin-top:1.5rem;display:flex;flex-direction:column;gap:1.2rem}
.effort-row{display:grid;grid-template-columns:1fr auto 1fr;gap:.8rem;align-items:center;background:var(--white);border-radius:var(--radius);padding:1.5rem;box-shadow:var(--shadow-soft);opacity:0;transform:translateY(20px)}
.effort-col{text-align:center}.effort-col h4{font-size:.8rem;font-weight:700;margin-bottom:.5rem}
.effort-col.manual h4{color:var(--text-lighter)}.effort-col.postalk h4{color:var(--primary-dark)}
.effort-col p{font-size:.82rem;color:var(--text-light);line-height:1.6}.effort-col.postalk p{color:var(--text);font-weight:500}
.effort-vs{font-size:.7rem;color:var(--text-lighter);font-weight:700}
@media(max-width:500px){.effort-row{grid-template-columns:1fr;gap:.3rem}.effort-vs{padding:.3rem 0;text-align:center}}

.persona-cards{display:flex;flex-direction:column;gap:1.2rem;margin-top:1rem}
.persona-card{background:var(--white);border-radius:var(--radius);padding:1.8rem;box-shadow:var(--shadow-soft);border-left:4px solid var(--primary-light);opacity:0;transform:translateY(20px)}
.persona-card .persona-name{font-size:.85rem;font-weight:700;color:var(--primary-dark);margin-bottom:.5rem}
.persona-card .persona-quote{font-size:.9rem;line-height:1.8;font-style:italic}

.security-items{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:1rem}
.security-item{background:var(--white);border-radius:var(--radius-sm);padding:1.2rem;box-shadow:var(--shadow-soft);text-align:center;opacity:0;transform:translateY(20px)}
.security-item .sec-icon{font-size:1.5rem;margin-bottom:.5rem}.security-item h4{font-size:.82rem;font-weight:700;margin-bottom:.3rem}.security-item p{font-size:.72rem;color:var(--text-light);line-height:1.6}
@media(max-width:500px){.security-items{grid-template-columns:1fr}}

.origin-text{font-size:.95rem;line-height:2;opacity:0;transform:translateY(20px)}.origin-text p{margin-bottom:1.5rem}.origin-text .em{color:var(--primary-dark);font-weight:500}

.pricing-section{text-align:center}
.pricing-card{background:var(--white);border-radius:var(--radius);box-shadow:var(--shadow-medium);overflow:hidden;max-width:420px;margin:0 auto;opacity:0;transform:translateY(20px)}
.pricing-free{padding:2.5rem 2rem 2rem;background:linear-gradient(170deg,rgba(123,140,222,0.06) 0%,rgba(123,140,222,0.02) 100%)}
.pricing-free-badge{display:inline-block;background:var(--primary);color:var(--white);font-size:.75rem;font-weight:700;padding:.3rem 1rem;border-radius:20px;letter-spacing:.06em;margin-bottom:1rem}
.pricing-free-amount{font-size:1.2rem;font-weight:700;margin-bottom:.8rem}.pricing-free-amount span{font-size:2.5rem;color:var(--primary-dark);margin-left:.3rem}
.pricing-free-desc{font-size:.82rem;color:var(--text-light);line-height:1.8}
.pricing-divider{position:relative;height:1px;background:#EEEEF5}.pricing-divider-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--white);padding:0 1rem;font-size:.72rem;color:var(--text-lighter);white-space:nowrap}
.pricing-paid{padding:2rem}.pricing-paid-amount{font-size:1rem;font-weight:500;margin-bottom:.5rem}.pricing-paid-amount span{font-size:1.8rem;font-weight:700}.pricing-paid-amount small{font-size:.8rem;font-weight:400;color:var(--text-light)}
.pricing-context{font-size:.78rem;color:var(--text-light);margin-bottom:1rem;line-height:1.7}.pricing-context strong{color:var(--primary-dark)}
.pricing-includes{list-style:none;text-align:left;display:flex;flex-direction:column;gap:.5rem}
.pricing-includes li{font-size:.8rem;color:var(--text-light);line-height:1.6;padding-left:1.4rem;position:relative}
.pricing-includes li::before{content:'✓';position:absolute;left:0;color:var(--primary);font-weight:700;font-size:.85rem}
.pricing-note{margin-top:1.2rem;padding-top:1rem;border-top:1px solid #F0F0F5;font-size:.7rem;color:var(--text-lighter);line-height:1.8;text-align:left}

.faq-list{margin-top:1rem;display:flex;flex-direction:column;gap:.8rem}
.faq-item{background:var(--white);border-radius:var(--radius-sm);box-shadow:var(--shadow-soft);overflow:hidden;opacity:0;transform:translateY(20px)}
.faq-q{padding:1.2rem 1.5rem;font-size:.9rem;font-weight:700;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:1rem;user-select:none}
.faq-q::after{content:'+';font-size:1.2rem;color:var(--primary);flex-shrink:0;transition:transform .3s}
.faq-item.open .faq-q::after{transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .4s ease}
.faq-item.open .faq-a{max-height:500px}
.faq-a-inner{padding:0 1.5rem 1.2rem;font-size:.82rem;color:var(--text-light);line-height:1.9}

.cta-section{background:linear-gradient(170deg,var(--primary) 0%,var(--primary-dark) 100%);text-align:center;padding:5rem 1.5rem;position:relative;overflow:hidden}
.cta-section::before{content:'';position:absolute;top:-50%;left:-30%;width:600px;height:600px;border-radius:50%;background:rgba(255,255,255,0.04);pointer-events:none}
.cta-concept{font-size:clamp(1.3rem,4vw,1.8rem);font-weight:700;color:var(--white);line-height:1.7;margin-bottom:.8rem;opacity:0;transform:translateY(20px)}
.cta-sub{font-size:.9rem;color:rgba(255,255,255,0.7);margin-bottom:2.5rem;letter-spacing:.06em;opacity:0;transform:translateY(20px)}
.cta-actions{display:flex;flex-direction:column;align-items:center;gap:.8rem;opacity:0;transform:translateY(20px)}
.btn-white{display:inline-flex;align-items:center;justify-content:center;background:var(--white);color:var(--primary-dark);font-family:'Zen Maru Gothic',serif;font-size:1.05rem;font-weight:700;padding:1rem 3rem;border-radius:50px;text-decoration:none;border:none;cursor:pointer;box-shadow:0 4px 20px rgba(0,0,0,0.1);transition:all .3s;letter-spacing:.06em;min-width:260px}
.btn-white:hover{transform:translateY(-2px);box-shadow:0 8px 30px rgba(0,0,0,0.15)}
.cta-login{display:inline-block;margin-top:.8rem;font-size:.85rem;color:rgba(255,255,255,0.7);text-decoration:underline;text-underline-offset:3px;transition:color .3s}.cta-login:hover{color:rgba(255,255,255,1)}
.cta-prereq{font-size:.72rem;color:rgba(255,255,255,0.5);margin-top:1rem;line-height:1.7}

footer{text-align:center;padding:2.5rem 1.5rem;background:var(--cream)}
footer .footer-brand{font-family:'Zen Maru Gothic',serif;font-size:.9rem;font-weight:700;color:var(--text-light);margin-bottom:.8rem;letter-spacing:.08em}
footer .footer-links{display:flex;justify-content:center;gap:1.5rem;margin-bottom:1rem;flex-wrap:wrap}
footer .footer-links a{font-size:.75rem;color:var(--text-lighter);text-decoration:none;transition:color .3s}footer .footer-links a:hover{color:var(--primary)}
footer .footer-copy{font-size:.7rem;color:var(--text-lighter)}

.tool-compare{width:100%;border-collapse:collapse;font-size:.78rem;text-align:center;opacity:0;transform:translateY(20px)}
.tool-compare th{padding:.8rem .5rem;font-weight:700;font-size:.72rem;color:var(--text-light);border-bottom:2px solid #EEEEF5;vertical-align:bottom}
.tool-compare th:first-child{text-align:left;width:100px}
.tool-compare th:nth-child(2){color:var(--primary-dark);background:rgba(123,140,222,0.04);border-radius:var(--radius-sm) var(--radius-sm) 0 0}
.tool-compare th small{font-weight:400;color:var(--text-lighter);display:block;font-size:.65rem}
.tool-compare td{padding:.7rem .5rem;border-bottom:1px solid #F5F5FA;vertical-align:middle}
.tool-compare td:nth-child(2){background:rgba(123,140,222,0.04)}
.tool-compare .row-label{text-align:left;font-weight:600;font-size:.75rem;color:var(--text)}
.tool-compare .row-label small{font-weight:400;color:var(--text-lighter);display:block}
.tool-compare .yes{color:var(--primary-dark);font-weight:700}
.tool-compare .no{color:var(--text-lighter)}
.tool-compare .mid{color:var(--accent)}
.tool-compare .neutral{color:var(--text-light)}
.tool-compare .price-row td{border-bottom:none;padding-top:1rem}
.tool-compare .price-row .yes strong{font-size:.95rem}

@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes scrollPulse{0%,100%{opacity:.3;transform:scaleY(1)}50%{opacity:1;transform:scaleY(1.3)}}
.animate{animation:fadeUp .7s ease-out forwards}
@media(max-width:500px){section,.full-section{padding:3.5rem 1.2rem}}

/* Auth Modal */
.auth-modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.5);z-index:9999;display:flex;align-items:center;justify-content:center;animation:modalFadeIn .2s ease-out}
@keyframes modalFadeIn{from{opacity:0}to{opacity:1}}
.auth-modal{background:#fff;border-radius:20px;max-width:400px;width:90vw;padding:2rem 1.8rem;position:relative;box-shadow:0 20px 60px rgba(0,0,0,0.15);animation:modalSlideIn .25s ease-out}
@keyframes modalSlideIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
.auth-modal-close{position:absolute;top:12px;right:16px;background:none;border:none;font-size:1.5rem;color:var(--text-lighter);cursor:pointer;padding:4px 8px;line-height:1;transition:color .2s}.auth-modal-close:hover{color:var(--text)}
.auth-modal-body{display:flex;gap:1rem;align-items:flex-start}
.auth-modal-character{flex-shrink:0}
.auth-cat{font-size:3rem;line-height:1;margin-top:.2rem}
.auth-modal-content{flex:1}
.auth-modal-title{font-size:1.15rem;color:var(--text);font-weight:700;line-height:1.6;margin-bottom:.6rem}
.auth-modal-desc{font-size:.88rem;color:var(--text-light);line-height:1.8;margin-bottom:.8rem}
.auth-modal-security{font-size:.75rem;color:var(--text-lighter);margin-bottom:1.2rem;display:flex;align-items:center;gap:.3rem}
.auth-modal-security span{font-size:.85rem}
.waitlist-modal-input{width:100%;padding:.85rem 1rem;border:2px solid var(--primary-light);border-radius:14px;font-size:.95rem;font-family:'Noto Sans JP',sans-serif;outline:none;text-align:center;background:var(--cream);transition:border-color .3s;margin-bottom:.7rem}.waitlist-modal-input:focus{border-color:var(--primary)}
.auth-modal-btn{display:block;text-align:center;background:linear-gradient(135deg,var(--primary) 0%,var(--primary-dark) 100%);color:#fff;font-size:.95rem;font-weight:700;padding:.9rem 1.5rem;border-radius:50px;text-decoration:none;box-shadow:0 4px 16px rgba(123,140,222,0.3);transition:all .3s;letter-spacing:.04em}.auth-modal-btn:hover{transform:translateY(-1px);box-shadow:0 6px 24px rgba(123,140,222,0.4)}
@media(max-width:500px){.auth-modal-body{flex-direction:column;align-items:center;text-align:center}.auth-modal-security{justify-content:center}}