:root{--color-white: #ffffff;--color-light-blue: #e0f2fe;--color-light-green: #e8f5e8;--color-cream: #fefbf3;--color-soft-blue: #b3e5fc;--color-soft-green: #c8e6c9;--color-warm-cream: #f5f1e8;--color-text-dark: #2c3e50;--color-text-light: #546e7a;--color-border: #e0e6ed;--color-shadow: rgba(0, 0, 0, .08);--color-primary: var(--color-soft-blue);--color-secondary: var(--color-soft-green);--color-accent: #ff6b9d}*{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth}body{font-family:Hiragino Kaku Gothic ProN,Hiragino Sans,Yu Gothic Medium,Meiryo,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;line-height:1.6;color:var(--color-text-dark);overflow-x:hidden}.landing{min-height:100vh}.container{max-width:1200px;margin:0 auto;padding:0 40px}.hero-section{min-height:100vh;background:linear-gradient(135deg,var(--color-white) 0%,var(--color-light-blue) 50%,var(--color-light-green) 100%);display:flex;align-items:center;justify-content:center;text-align:center;padding:80px 40px}.hero-content{max-width:800px;animation:fadeInUp 1s ease-out}.logo-container{margin-bottom:30px;animation:fadeIn 1s ease-out}.hero-logo{height:auto;width:auto;max-width:350px;filter:drop-shadow(0 4px 8px rgba(0,0,0,.1));transition:transform .3s ease}.hero-logo:hover{transform:scale(1.05)}.hero-title{font-size:4rem;font-weight:900;margin-bottom:30px;line-height:1.2}.title-main{display:block;color:var(--color-text-dark);margin-bottom:10px}.title-emphasis{display:block;background:linear-gradient(45deg,var(--color-primary),var(--color-secondary));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-shadow:0 4px 8px var(--color-shadow);animation:bounce 2s infinite}.hero-subtitle{font-size:1.4rem;color:var(--color-text-light);margin-bottom:50px;font-weight:500}.hero-visual{margin:50px 0;animation:fadeIn 1.5s ease-out .5s both}.hero-cta{margin-top:60px}.cta-button{display:inline-block;padding:20px 40px;font-size:1.3rem;font-weight:700;text-decoration:none;border-radius:50px;transition:all .3s ease;box-shadow:0 8px 25px #00000026;border:none;cursor:pointer}.cta-button.primary{background:linear-gradient(135deg,var(--color-primary),var(--color-secondary));color:var(--color-text-dark)}.cta-button.primary:hover{transform:translateY(-5px);box-shadow:0 15px 35px #0003;background:linear-gradient(135deg,var(--color-light-blue),var(--color-light-green))}.cta-button.secondary{background:linear-gradient(135deg,var(--color-accent),#ff8fab);color:#fff}.cta-button.secondary:hover{transform:translateY(-5px);box-shadow:0 15px 35px #ff6b9d4d}.cta-note{margin-top:20px;font-size:1rem;color:var(--color-text-light);font-style:italic}.section-title{font-size:2.5rem;font-weight:800;text-align:center;margin-bottom:60px;color:var(--color-text-dark);position:relative}.section-title:after{content:"";display:block;width:80px;height:4px;background:linear-gradient(45deg,var(--color-primary),var(--color-secondary));margin:20px auto;border-radius:2px}.features-section{padding:100px 0;background:var(--color-white)}.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:40px;margin-top:80px}.feature-card{background:var(--color-cream);padding:40px 30px;border-radius:20px;text-align:center;box-shadow:0 10px 30px var(--color-shadow);border:1px solid var(--color-border);transition:all .3s ease;position:relative;overflow:hidden}.feature-card:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(45deg,var(--color-primary),var(--color-secondary))}.feature-card:hover{transform:translateY(-10px);box-shadow:0 20px 40px #00000026}.feature-icon{font-size:3rem;margin-bottom:20px}.feature-card h3{font-size:1.5rem;font-weight:700;margin-bottom:20px;color:var(--color-text-dark)}.feature-card p{color:var(--color-text-light);line-height:1.8}.demo-section{padding:100px 0;background:linear-gradient(135deg,var(--color-light-blue) 0%,var(--color-light-green) 100%)}.demo-scenarios{display:flex;flex-direction:column;gap:80px;margin-bottom:80px}.scenario-card{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;background:var(--color-white);padding:50px;border-radius:25px;box-shadow:0 15px 35px var(--color-shadow)}.scenario-card.reverse{direction:rtl}.scenario-card.reverse *{direction:ltr}.scenario-visual,.scenario-content{animation:fadeInLeft 1s ease-out}.scenario-card.reverse .scenario-visual,.scenario-card.reverse .scenario-content{animation:fadeInRight 1s ease-out}.scenario-content h3{font-size:1.8rem;font-weight:700;margin-bottom:20px;color:var(--color-text-dark)}.scenario-content p{font-size:1.1rem;color:var(--color-text-light);line-height:1.8}.demo-video{text-align:center;margin-top:60px}.how-to-section{padding:100px 0;background:var(--color-white)}.steps-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:40px;margin-bottom:80px}.step-card{text-align:center;padding:40px 20px;background:var(--color-cream);border-radius:20px;box-shadow:0 10px 30px var(--color-shadow);transition:all .3s ease;position:relative}.step-card:hover{transform:translateY(-5px);box-shadow:0 15px 35px #0000001f}.step-number{position:absolute;top:-15px;left:50%;transform:translate(-50%);width:40px;height:40px;background:linear-gradient(45deg,var(--color-primary),var(--color-secondary));color:var(--color-text-dark);border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.2rem;box-shadow:0 4px 12px var(--color-shadow)}.step-icon{font-size:3rem;margin:30px 0 20px}.step-card h3{font-size:1.4rem;font-weight:700;margin-bottom:15px;color:var(--color-text-dark)}.step-card p{color:var(--color-text-light);line-height:1.7}.cta-container{text-align:center;margin-top:60px}.footer{background:var(--color-text-dark);color:var(--color-white);padding:60px 0 30px}.footer-content{display:grid;grid-template-columns:1fr 1fr;gap:60px;margin-bottom:40px}.footer-brand h3{font-size:2rem;font-weight:800;margin-bottom:15px;background:linear-gradient(45deg,var(--color-primary),var(--color-secondary));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.footer-brand p{color:#bbb;font-size:1rem}.footer-links{display:grid;grid-template-columns:1fr 1fr;gap:40px}.footer-section h4{font-size:1.2rem;font-weight:700;margin-bottom:20px;color:var(--color-white)}.social-links,.contact-info{display:flex;flex-direction:column;gap:10px}.footer-bottom{border-top:1px solid #555;padding-top:30px;text-align:center;color:#bbb}.placeholder-image,.placeholder-video{background:var(--color-border);border:2px dashed #ccc;border-radius:15px;padding:20px;text-align:center;color:var(--color-text-light);min-height:250px;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;overflow:hidden}.placeholder-image img,.scenario-visual img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;border-radius:10px}.hero-visual .placeholder-image{min-height:300px;background:#fff9;border:1px solid rgba(224,230,237,.5);border-radius:25px;padding:30px;box-shadow:0 10px 30px #0000001a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.hero-visual .placeholder-image img{max-height:280px;object-fit:contain;filter:drop-shadow(0 5px 15px rgba(0,0,0,.1))}.scenario-visual .placeholder-image{min-height:200px;background:linear-gradient(135deg,var(--color-light-blue),var(--color-light-green));border:1px solid var(--color-border);padding:16px 20px;border-radius:20px;box-shadow:0 8px 20px #0000001a}.scenario-visual .placeholder-image img{max-height:180px;object-fit:contain;border-radius:10px;padding:10px;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.placeholder-text{font-weight:700;font-size:1.2rem;margin-bottom:10px}.placeholder-desc{font-size:.9rem;font-style:italic}.play-button{position:absolute;bottom:20px;right:20px;width:50px;height:50px;background:var(--color-primary);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.5rem;color:var(--color-text-dark);cursor:pointer;transition:all .3s ease}.play-button:hover{transform:scale(1.1);box-shadow:0 5px 15px #0003}.placeholder-icon{font-size:3rem;background:var(--color-border);border-radius:50%;width:80px;height:80px;display:flex;align-items:center;justify-content:center;margin:0 auto}.placeholder-social,.placeholder-contact{background:#555;padding:10px 15px;border-radius:8px;color:#bbb;text-align:center;transition:all .3s ease;cursor:pointer}.placeholder-social:hover,.placeholder-contact:hover{background:#666;color:var(--color-white)}@keyframes fadeInUp{0%{opacity:0;transform:translateY(50px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeInLeft{0%{opacity:0;transform:translate(-50px)}to{opacity:1;transform:translate(0)}}@keyframes fadeInRight{0%{opacity:0;transform:translate(50px)}to{opacity:1;transform:translate(0)}}@keyframes bounce{0%,20%,50%,80%,to{transform:translateY(0)}40%{transform:translateY(-10px)}60%{transform:translateY(-5px)}}@media (max-width: 1024px){.container{padding:0 30px}.hero-title{font-size:3.5rem}.scenario-card{grid-template-columns:1fr;text-align:center;padding:40px}.scenario-card.reverse{direction:ltr}.footer-content{grid-template-columns:1fr;gap:40px}}@media (max-width: 768px){.container{padding:0 20px}.hero-section{padding:60px 20px}.hero-title{font-size:2.8rem}.hero-subtitle{font-size:1.2rem}.section-title{font-size:2rem}.features-grid{grid-template-columns:1fr;gap:30px}.feature-card{padding:30px 20px}.demo-scenarios{gap:50px}.scenario-card{padding:30px 20px}.steps-grid,.footer-links{grid-template-columns:1fr;gap:30px}.cta-button{padding:16px 32px;font-size:1.1rem}}@media (max-width: 480px){.hero-title{font-size:2.2rem}.hero-subtitle{font-size:1.1rem}.hero-logo{max-height:60px;max-width:150px}.section-title{font-size:1.8rem}.feature-card,.step-card,.scenario-card{padding:25px 15px}.placeholder-image,.placeholder-video{min-height:200px;padding:15px}.hero-visual .placeholder-image{min-height:200px;padding:20px}.hero-visual .placeholder-image img{max-height:180px}.scenario-visual .placeholder-image{min-height:150px;padding:15px}.scenario-visual .placeholder-image img{max-height:130px;padding:8px}.cta-button{padding:14px 28px;font-size:1rem}}.scroll-trigger{opacity:0;transform:translateY(30px);transition:all .8s ease-out}.scroll-trigger.active{opacity:1;transform:translateY(0)}