@charset "UTF-8";
:root{--navy:#123e72;--blue:#3678b9;--sky:#eaf7ff;--sky-deep:#d6eefb;--yellow:#ffd34c;--cream:#fff7e9;--ink:#234565;--white:#fff;--radius:24px;--space:clamp(72px,9vw,132px);--container:1140px;--body:clamp(16px,1.35vw,18px);--ease:cubic-bezier(.2,.7,.2,1)}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:90px}body{margin:0;background:var(--white);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic",Meiryo,sans-serif;font-size:var(--body);line-height:1.9;overflow-x:clip}img{display:block;max-width:100%;height:auto}a{color:inherit}button{font:inherit}button,a,summary{-webkit-tap-highlight-color:transparent}:focus-visible{outline:3px solid #e5a600;outline-offset:4px}.container{width:min(calc(100% - 48px),var(--container));margin-inline:auto}.skip{position:absolute;top:-100px;left:12px;background:white;padding:8px;z-index:100}.skip:focus{top:12px}.sample-note{text-align:center;background:#e8f4ff;color:var(--navy);padding:9px 18px;font-size:13px;font-weight:700;line-height:1.7}.site-header{background:rgba(255,255,255,.97);position:sticky;top:0;z-index:20;border-bottom:1px solid #e5edf5}.header-inner{min-height:78px;display:flex;align-items:center;justify-content:space-between;gap:20px}.brand{text-decoration:none;font-size:clamp(17px,1.8vw,23px);font-weight:900;letter-spacing:-.035em;color:var(--navy);white-space:nowrap}.brand-mark{color:#ffbd18;margin-right:8px}.nav{display:flex;align-items:center;gap:clamp(12px,1.8vw,28px)}.nav a{text-decoration:none;font-size:14px;font-weight:750;white-space:nowrap}.nav a:hover{text-decoration:underline;text-underline-offset:5px}.nav .nav-cta{background:var(--yellow);border-radius:999px;padding:11px 19px;color:var(--navy)}.menu-toggle{display:none;border:1px solid #bdd6e9;border-radius:12px;padding:7px 12px;background:white;color:var(--navy);font-weight:800;cursor:pointer}.hero{position:relative;background:linear-gradient(165deg,#fff 10%,#eff9ff 100%);overflow:hidden}.hero-grid{display:grid;grid-template-columns:1.03fr .97fr;align-items:center;gap:20px;min-height:620px;padding-block:72px 85px}.hero-copy{position:relative;z-index:1}.eyebrow,.kicker{font-size:clamp(14px,1.3vw,16px);font-weight:900;color:var(--blue);letter-spacing:.05em}.eyebrow{display:inline-block;background:#e6f4ff;padding:6px 15px;border-radius:99px}.hero h1{font-size:clamp(36px,4.35vw,62px);line-height:1.38;letter-spacing:-.065em;color:var(--navy);margin:22px 0}.hero h1 span{background:linear-gradient(transparent 70%,#ffe47e 70%)}.lead{font-size:clamp(17px,1.6vw,21px);font-weight:650;line-height:1.85}.hero-aside{font-size:15px;margin:12px 0 28px;color:#4a6e91}.button{display:inline-flex;align-items:center;justify-content:center;gap:18px;border:0;border-radius:999px;background:var(--yellow);color:#153c67;text-decoration:none;font-weight:900;padding:15px 28px;min-height:56px;cursor:pointer;box-shadow:0 5px 0 #e6b93b;transition:transform .2s}.button:hover{transform:translateY(-2px)}.hero-art img{width:100%;object-fit:contain}.hero-bottom{height:28px;background:var(--sky-deep);clip-path:polygon(0 35%,50% 100%,100% 35%,100% 100%,0 100%)}.section{padding-block:var(--space)}.section h2{font-size:clamp(29px,3.35vw,46px);line-height:1.45;letter-spacing:-.045em;color:var(--navy);margin:12px 0 24px}.section h3{font-size:clamp(23px,2.4vw,34px);line-height:1.5;color:var(--navy);margin:15px 0}.worries{background:var(--sky-deep)}.worries-grid{display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:40px}.thoughts{list-style:none;padding:0;margin:28px 0}.thoughts li{background:white;border-radius:17px;margin-bottom:13px;padding:14px 20px;font-weight:750;box-shadow:0 3px 0 #c1e4f8}.thoughts li:before{content:'？';color:var(--navy);background:var(--yellow);border-radius:50%;display:inline-grid;place-items:center;width:29px;height:29px;margin-right:12px;font-weight:900}.closing{font-weight:800;color:var(--navy)}.worries-art img{width:100%;object-fit:contain}.section-intro{max-width:770px;margin-bottom:54px}.section-intro p:last-child{margin-top:0}.experience{background:white}.experience-list{display:grid;gap:65px}.experience-item{display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:clamp(35px,6vw,100px)}.experience-item.reverse .experience-art{order:2}.experience-item.reverse .experience-text{order:1}.experience-art{min-height:320px;border-radius:46% 54% 45% 55% / 50% 45% 55% 50%;display:grid;place-items:center;padding:20px}.experience-art img{width:100%;max-height:360px;object-fit:contain}.art-cream{background:#fff9ed}.art-blue{background:#eaf6ff}.step-tag{display:inline-block;border-radius:99px;background:var(--yellow);color:var(--navy);font-size:14px;font-weight:900;padding:3px 16px}.experience-text{max-width:420px}.experience-text p{font-size:clamp(17px,1.55vw,20px)}.example{background:var(--sky)}.example-grid{display:grid;grid-template-columns:1fr 55px 1fr;align-items:center;gap:18px}.message-card{background:white;border:2px solid #d0e8fa;border-radius:var(--radius);padding:28px;min-height:230px;box-shadow:0 10px 0 #d8ecf9}.message-label{display:inline-block;font-size:14px;font-weight:900;color:var(--navy);border-bottom:3px solid var(--yellow);margin-bottom:14px}.message-card p{margin:0;line-height:2}.output-card{background:#fffdf5;border-color:#f4d96d;box-shadow:0 10px 0 #f5e9ba}.example-arrow{font-size:42px;text-align:center;color:var(--blue);font-weight:900}.example-caption{font-size:14px;margin-top:30px}.flow-section{background:white}.flow-list{padding:0;margin:0;list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}.flow-list li{position:relative;border-top:4px solid var(--blue);padding:26px 12px 10px}.flow-list li:not(:last-child):after{content:'→';position:absolute;right:-23px;top:25px;color:var(--blue);font-weight:900;font-size:22px}.flow-num{display:grid;place-items:center;width:58px;height:58px;border-radius:50%;background:var(--yellow);color:var(--navy);font-size:21px;font-weight:900}.flow-list h3{font-size:clamp(17px,1.55vw,22px);margin-top:22px}.safety{background:#fff9eb}.safety-inner{display:grid;grid-template-columns:1fr 1.15fr;gap:60px;align-items:center}.safety-list{padding:0;list-style:none}.safety-list li{padding:15px 12px 15px 42px;border-bottom:1px solid #e9dcbf;position:relative;font-weight:700}.safety-list li:before{content:'✓';position:absolute;left:7px;color:var(--blue);font-weight:900}.details-section{background:var(--sky)}.details-layout{display:grid;grid-template-columns:.75fr 1.25fr;gap:65px}.details-heading{position:sticky;top:120px;align-self:start}.details-table{margin:0;background:white;border-radius:var(--radius);padding:12px 32px}.details-table div{display:grid;grid-template-columns:175px 1fr;gap:20px;padding:17px 0;border-bottom:1px solid #dfeaf4}.details-table div:last-child{border:0}.details-table dt{font-weight:900;color:var(--navy)}.details-table dd{margin:0;color:#64788a}.faq-section{background:white}.faq-container{max-width:850px}.faq-list details{border-bottom:1px solid #c7dceb}.faq-list summary{cursor:pointer;list-style:none;padding:23px 45px 23px 12px;font-weight:850;color:var(--navy);position:relative}.faq-list summary::-webkit-details-marker{display:none}.faq-list summary:after{content:'＋';position:absolute;right:10px;top:20px;font-size:24px;color:var(--blue)}.faq-list details[open] summary:after{content:'−'}.faq-list details p{padding:0 18px 22px;margin:0}.final-cta{background:linear-gradient(180deg,#d9effe,#eef8ff);text-align:center}.final-inner{max-width:760px}.final-inner h2{font-size:clamp(34px,4vw,55px)}.final-inner>p{line-height:1.9}.small-sun{font-size:54px;color:#e7b900}.demo-button{margin-top:20px}.demo-message{max-width:520px;margin:25px auto 0;padding:18px;background:white;border:2px solid var(--blue);border-radius:14px;font-weight:850;color:var(--navy)}.demo-disclaimer{font-size:14px}.site-footer{background:var(--navy);color:white;padding:52px 0}.footer-inner{display:flex;justify-content:space-between;gap:45px}.footer-inner>div{max-width:590px}.footer-brand{font-size:24px;font-weight:900;margin:0}.footer-note{font-size:13px;opacity:.83}.footer-inner nav{display:flex;flex-direction:column;gap:9px;font-size:14px}.footer-inner a{text-underline-offset:4px}.reveal{opacity:1;transform:none}@media (prefers-reduced-motion:no-preference){.js-motion .reveal:not(.is-visible){opacity:0;transform:translateY(12px)}.js-motion .reveal{transition:opacity .75s var(--ease),transform .75s var(--ease)}.js-motion .reveal.is-visible{opacity:1;transform:none}}
@media(max-width:950px){.menu-toggle{display:flex;gap:12px;align-items:center}.nav{display:none;position:absolute;top:100%;left:0;right:0;background:white;padding:18px 24px 25px;box-shadow:0 10px 15px #173b631c;flex-direction:column;align-items:stretch;gap:4px}.nav.is-open{display:flex}.nav a{padding:10px 6px}.nav .nav-cta{text-align:center}.hero-grid{min-height:0}.hero h1{font-size:clamp(32px,4.5vw,48px)}}
@media(max-width:700px){:root{--space:72px}.container{width:min(calc(100% - 34px),var(--container))}.header-inner{min-height:66px}.brand{font-size:17px}.sample-note{font-size:12px}.hero-grid{grid-template-columns:1fr;gap:24px;padding-top:55px;padding-bottom:48px}.hero h1{font-size:clamp(31px,8vw,43px)}.hero-art{max-width:550px;margin:auto}.worries-grid,.experience-item,.safety-inner,.details-layout{grid-template-columns:1fr;gap:28px}.worries-art{max-width:480px;margin:auto}.experience-list{gap:58px}.experience-item.reverse .experience-art,.experience-item.reverse .experience-text{order:initial}.experience-art{min-height:0;padding:15px;border-radius:28px}.experience-art img{max-height:300px}.experience-text{max-width:none}.section-intro{margin-bottom:32px}.example-grid{grid-template-columns:1fr;gap:8px}.example-arrow{transform:rotate(90deg);font-size:32px}.message-card{min-height:0;padding:22px}.flow-list{grid-template-columns:1fr 1fr;gap:20px}.flow-list li:nth-child(2):after{display:none}.flow-list h3{font-size:18px}.details-heading{position:static}.details-table{padding:10px 20px}.details-table div{grid-template-columns:1fr;gap:1px}.footer-inner{flex-direction:column;gap:20px}.section h2{font-size:clamp(28px,7vw,38px)}}@media(max-width:420px){.flow-list{grid-template-columns:1fr}.flow-list li:after{display:none}.thoughts li{font-size:15px;padding:13px}.hero h1{font-size:30px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition-duration:.01ms!important;animation-duration:.01ms!important}.reveal,.js-motion .reveal:not(.is-visible){opacity:1!important;transform:none!important}}

/* Motion enhancement v2: one-time, accessible, restrained. */
:root{--motion-duration:.78s;--motion-short:.48s;--motion-shift:16px;--motion-ease:cubic-bezier(.16,1,.3,1)}
@media (prefers-reduced-motion:no-preference){
/* Hero is visible immediately; its entry animation never waits for scroll or JS. */
.hero-copy .eyebrow{animation:hero-arrive .65s var(--motion-ease) both}
.hero-copy h1{animation:hero-arrive .8s .10s var(--motion-ease) both}
.hero-copy .lead,.hero-copy .hero-aside{animation:hero-arrive .8s .20s var(--motion-ease) both}
.hero-copy .button{animation:hero-arrive .8s .28s var(--motion-ease) both}
.hero-art{animation:hero-art-arrive .95s .14s var(--motion-ease) both}
@keyframes hero-arrive{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes hero-art-arrive{from{opacity:0;transform:translate(12px,8px) scale(.97)}to{opacity:1;transform:translate(0,0) scale(1)}}
/* Reveal only when enhanced JS is ready. Never hide content on JS failure. */
.js-motion .reveal{transition:opacity var(--motion-duration) var(--motion-ease),transform var(--motion-duration) var(--motion-ease)}
.js-motion .reveal:not(.is-visible){opacity:0;transform:translateY(var(--motion-shift))}
.js-motion .reveal.is-visible{opacity:1;transform:none}
.js-motion .experience-item.reveal:not(.is-visible){transform:translate(-14px,12px)}
.js-motion .experience-item.reverse.reveal:not(.is-visible){transform:translate(14px,12px)}
.js-motion .flow-list li.reveal:not(.is-visible){transform:translateY(13px) scale(.98)}
.js-motion .flow-list li.reveal.is-visible{transition-delay:var(--stagger,0ms)}
.js-motion .thoughts li{transition:transform .4s var(--motion-ease),background-color .4s}
.js-motion .thoughts li:hover{transform:translateX(5px);background-color:#fffdf3}
.js-motion .experience-art img{transition:transform .55s var(--motion-ease)}
.js-motion .experience-item:hover .experience-art img{transform:scale(1.025)}
.js-motion .flow-num{transition:transform .45s var(--motion-ease),box-shadow .45s var(--motion-ease)}
.js-motion .flow-list li:hover .flow-num{transform:translateY(-4px);box-shadow:0 6px 0 #d9eafa}
.js-motion .message-card{transition:transform .4s var(--motion-ease),box-shadow .4s var(--motion-ease)}
.js-motion .message-card:hover{transform:translateY(-4px)}
.js-motion .faq-list details[open] p{animation:faq-in .35s var(--motion-ease) both}
@keyframes faq-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.demo-message:not([hidden]){animation:faq-in .45s var(--motion-ease) both}
}
@media(prefers-reduced-motion:reduce){.hero-copy .eyebrow,.hero-copy h1,.hero-copy .lead,.hero-copy .hero-aside,.hero-copy .button,.hero-art{animation:none!important}}