:root{--navy:#252f5d;--cyan:#20b5d8;--green:#12a766;color:var(--navy);font-family:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:16px}body{margin:0;background:#f4fbfd}a{color:inherit}button,summary,a{-webkit-tap-highlight-color:transparent}button{font:inherit}a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid #f4a92d;outline-offset:5px}.sr-only,.skip:not(:focus){position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.skip:focus{position:fixed;z-index:100;background:white;padding:16px}.ambient{position:fixed;inset:0;z-index:-1;background:radial-gradient(ellipse at 7% 15%,#c9f0f7 0,transparent 35%),radial-gradient(ellipse at 95% 80%,#d7e7f1 0,transparent 40%),#f8fcfd}.lp{position:relative;width:min(100%,450px);margin:auto;background:#fff;box-shadow:0 0 45px #18394d12}.image-section{position:relative;scroll-margin-top:0}.image-section img{display:block;width:100%;height:auto}.image-cta{display:block;position:absolute;border-radius:999px;z-index:2}.image-cta:hover{background:#ffffff14}.image-cta:focus-visible{outline-offset:2px}.side{position:fixed;top:0;height:100dvh;max-height:100vh;width:calc((100vw - 450px)/2);padding:clamp(22px,3.5vw,64px);display:flex;flex-direction:column;justify-content:center}.side-left{left:0}.side-right{right:0;padding-left:clamp(22px,3vw,60px);padding-right:clamp(22px,3vw,60px)}.brand{position:absolute;left:clamp(22px,3.5vw,64px);top:32px;width:min(190px,65%)}.brand img{display:block;width:100%;height:auto;mix-blend-mode:multiply}.side-message{margin:36px 0 65px}.side-message>p:first-child{font-size:clamp(11px,1.1vw,16px);font-weight:700;letter-spacing:.07em}.side-title{font-size:clamp(21px,2.25vw,36px);font-weight:800;line-height:1.7;letter-spacing:-.04em;margin:20px 0}.side-title em{font-style:normal;color:#119dc4}.accent-line{height:4px;width:45px;background:var(--cyan);margin:26px 0}.side-description{font-size:clamp(12px,1.05vw,15px);line-height:2}.side-bottom{position:absolute;bottom:28px;font-size:14px;line-height:1.8;color:#5f7b8a;letter-spacing:.1em}.nav-label{color:#129fc6;font-size:12px;letter-spacing:.22em;font-weight:700;margin:0 0 18px}.side nav a{display:flex;justify-content:space-between;gap:8px;text-decoration:none;padding:14px 0;border-bottom:1px solid #d7e6ed;font-size:clamp(11px,1.05vw,15px);line-height:1.5}.side nav a span{color:var(--cyan);font-size:18px;line-height:1}.side nav a:hover,.side nav a[aria-current]{color:#0089b1}.cta{display:flex;justify-content:center;align-items:center;gap:10px;padding:17px 14px;min-height:52px;border:0;border-radius:999px;background:linear-gradient(120deg,#16b77f,#0a9c57);color:white;text-decoration:none;font-weight:700;cursor:pointer;text-align:center}.side-cta{margin-top:28px;font-size:clamp(11px,1.05vw,15px)}.preview-label{font-size:11px;color:#697c8b;text-align:center;line-height:1.6}.faq{padding:42px 28px 40px;background:linear-gradient(130deg,#f5f6fc,#dbe6ef);border-radius:0 0 56px 56px}.eyebrow{text-align:center;font-size:12px;letter-spacing:.18em;color:#129fc6;font-weight:700;margin:0 0 10px}.faq h2{font-size:clamp(26px,7vw,34px);text-align:center;color:#20afd3;margin:0 0 28px;letter-spacing:-.04em}.faq details{background:#fff;border-radius:19px;margin-top:15px;box-shadow:0 3px 14px #25355a10;overflow:hidden}.faq summary{list-style:none;position:relative;padding:22px 43px 22px 20px;font-size:17px;font-weight:700;line-height:1.7;cursor:pointer}.faq summary::-webkit-details-marker{display:none}.faq summary:after{content:'＋';color:#12add4;position:absolute;right:16px;top:24px;font-size:20px}.faq details[open] summary:after{content:'−'}.faq details[open] summary{padding-bottom:15px}.faq details p{margin:0 20px 23px;padding-top:16px;border-top:1px solid #e0e5ee;font-size:16px;line-height:1.95;color:#39455b}footer{padding:25px 15px 36px;text-align:center;color:#687180}footer span{display:inline-block;margin:4px 9px;font-size:12px}footer p{font-size:11px;color:#78838b;margin:10px 0 0}dialog{border:0;border-radius:24px;padding:42px 28px 30px;width:min(460px,calc(100% - 32px));color:var(--navy);box-shadow:0 20px 80px #12254030}dialog::backdrop{background:#17254488;backdrop-filter:blur(4px)}dialog h2{font-size:22px;line-height:1.6;text-align:center;margin:15px 0}dialog>p:not(.eyebrow){font-size:15px;line-height:1.9;text-align:center}dialog .cta{width:100%;margin-top:25px}.dialog-close{position:absolute;right:8px;top:8px;width:44px;height:44px;border:0;border-radius:50%;background:transparent;color:var(--navy);font-size:28px;cursor:pointer}
@media(max-width:1023px){.side{display:none}.lp{box-shadow:0 0 28px #18394d10}}
@media(max-width:500px){body{background:#fff}.lp{box-shadow:none}.faq{padding:34px 22px}.faq summary{font-size:16px;padding-left:18px}.faq details p{font-size:15px}}
@media(max-width:359px){.faq{padding:28px 16px}.faq summary{font-size:15px}.faq details p{font-size:14px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* PC composition matched to the supplied Anatoku reference. */
@media(min-width:1024px){
 body{background:#fff}.ambient{background:linear-gradient(105deg,#62c6dc,#18afe0);top:73.4vh;bottom:0}
 .lp{margin:clamp(36px,6.5vh,64px) auto 0;border-radius:28px 28px 0 0;box-shadow:0 0 35px 12px #22b8e32b}
 .lp #top{border-radius:28px 28px 0 0;overflow:hidden}
 .side{height:100dvh;padding:0;justify-content:flex-start}
 .side-left{padding:0 clamp(20px,3.5vw,72px)}
 .brand-row{display:flex;align-items:center;gap:12px;position:absolute;top:8vh;left:clamp(18px,3.5vw,72px);right:20px}
 .brand{position:static;width:clamp(85px,8vw,145px);flex-shrink:0}
 .brand-tag{background:#363d5d;color:#fff;border-radius:4px;padding:5px 9px;font-size:clamp(8px,.72vw,14px);font-weight:700;white-space:nowrap}
 .side nav{margin-top:19vh;width:100%}.nav-label{font-size:clamp(18px,1.55vw,28px);letter-spacing:0;margin-bottom:12px;color:#38b9d7}
 .side nav a{font-size:clamp(13px,1.18vw,23px);font-weight:600;padding:clamp(13px,2.1vh,24px) 3px;border-top:1px solid #e5e5e5;border-bottom:0;align-items:center;line-height:1.4}
 .side nav a span{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:clamp(20px,1.6vw,30px);height:clamp(20px,1.6vw,30px);border-radius:50%;background:#35b9dc;color:#fff;font-size:23px;font-weight:400}
 .side-bottom{position:absolute;top:78vh;bottom:auto;left:clamp(20px,3.5vw,72px);right:16px;color:white;letter-spacing:0;line-height:1.35}
 .side-bottom>p{font-size:clamp(16px,1.7vw,30px);font-weight:800;margin:0 0 22px}.side-legal{display:flex;flex-wrap:wrap;gap:8px;font-size:clamp(9px,.8vw,14px)}.side-bottom small{display:block;margin-top:7px;font-size:10px;opacity:.85}
 .side-right{padding:0 clamp(20px,3vw,60px);padding-top:17vh}
 .benefits-panel{position:relative;width:100%;max-width:560px;margin:0 auto}.benefits-panel>img{display:block;width:100%;height:auto}.benefits-cta{position:absolute;border-radius:999px}.benefits-cta:hover{background:#ffffff14}
 .side-right .preview-label{font-size:10px;margin:8px 0;color:#687180}
}
@media(min-width:1024px) and (max-width:1279px){.brand-row{flex-wrap:wrap;gap:4px}.brand-tag{font-size:9px}.side-left{padding-left:22px;padding-right:22px}.side-right{padding-left:18px;padding-right:18px}.side-bottom{left:22px}.side-bottom>p{font-size:17px}}
@media(min-width:1024px) and (max-height:700px){.side nav{margin-top:18vh}.side nav a{padding:9px 3px;font-size:13px}.nav-label{font-size:18px;margin-bottom:8px}.side-bottom>p{font-size:17px;margin-bottom:12px}}

/* Requested revisions: reference logo, hidden menu, height-aware benefits, CTA motion. */
.side nav[hidden]{display:none!important}
@media(min-width:1024px){
 .brand-row{display:block;right:clamp(18px,3.5vw,72px)}
 .brand-row .brand{display:block;width:100%;max-width:384px}
 .brand-row .brand img{mix-blend-mode:normal}
 /* The blue band starts at 73.4vh. Reserve 17vh above and 5vh below the panel. */
 .side-right{height:73.4vh;max-height:73.4vh;padding-top:17vh;padding-bottom:0;align-items:center;overflow:hidden}
 .benefits-panel{flex:none;width:min(100%,560px);max-width:560px}
 .side-right .preview-label{flex:none;line-height:1.4;margin:6px 0 0;font-size:10px}
}
.image-cta,.benefits-cta{overflow:hidden;isolation:isolate;transition:background-color .2s ease,box-shadow .2s ease}
.image-cta::after,.benefits-cta::after{content:"";position:absolute;inset:-35% auto -35% -70%;width:28%;pointer-events:none;background:linear-gradient(100deg,transparent,rgba(255,255,255,.58),transparent);transform:skewX(-20deg);animation:cta-shine 6s ease-in-out infinite}
.image-cta,.benefits-cta{animation:cta-glow 3s ease-in-out infinite}
.image-cta:hover,.benefits-cta:hover{background:#ffffff1a;box-shadow:0 4px 18px #0c99652b}
.image-cta:active,.benefits-cta:active{background:#ffffff30}
@keyframes cta-shine{0%,70%{left:-70%;opacity:0}72%{opacity:1}90%{left:140%;opacity:1}91%,100%{left:140%;opacity:0}}
@keyframes cta-glow{0%,100%{box-shadow:0 0 0 0 #14ad7120}50%{box-shadow:0 0 0 5px #14ad7100}}
@media(prefers-reduced-motion:reduce){.image-cta,.benefits-cta,.image-cta::after,.benefits-cta::after{animation:none!important;transition:none!important}.image-cta::after,.benefits-cta::after{display:none}}

/* 450px body and more visible button motion. The anchor boxes keep their layout dimensions. */
@media(min-width:1024px){.lp{margin-top:20px}}
.image-cta,.benefits-cta{overflow:visible;animation:none}
.image-cta::before,.benefits-cta::before{content:"";position:absolute;inset:0;background-image:var(--button-face);background-size:100% 100%;background-repeat:no-repeat;border-radius:inherit;pointer-events:none;transform-origin:center;animation:button-breathe 2.8s ease-in-out infinite}
.image-cta::after,.benefits-cta::after{inset:0;left:0;width:100%;border-radius:inherit;background:linear-gradient(105deg,transparent 35%,#ffffff90 50%,transparent 65%);background-size:300% 100%;background-repeat:no-repeat;transform:none;animation:button-shine 6s ease-in-out infinite;pointer-events:none}
@keyframes button-breathe{0%,65%,100%{transform:scale(1)}25%,45%{transform:scale(1.025)}}
@keyframes button-shine{0%,70%{background-position:150% 0;opacity:0}72%{opacity:1}90%{background-position:-50% 0;opacity:1}91%,100%{background-position:-50% 0;opacity:0}}
@media(prefers-reduced-motion:reduce){.image-cta::before,.benefits-cta::before,.image-cta::after,.benefits-cta::after{animation:none!important;transform:none!important}.image-cta::after,.benefits-cta::after{display:none}}

/* Reduce the supplied logo lockup to 88% without changing its source crop. */
@media(min-width:1024px){.brand-row .brand{width:88%;max-width:338px}}

/* FAQ refreshed to match the latest AI artwork. */
.faq{background:#fff;border-radius:0;padding:30px 28px 34px}.faq h2{font-size:34px;margin-bottom:24px}.faq details{border-radius:22px;box-shadow:0 0 14px #40b8ef42;margin-top:20px}.faq summary{font-size:17px;line-height:1.55;padding:24px 42px 24px 20px}.faq summary:after{content:'▾';font-size:24px;top:23px}.faq details[open] summary:after{content:'▴'}.faq details p{color:#56627d;line-height:1.7}.faq details[open] summary{padding-bottom:20px}
@media(max-width:500px){.faq{padding:25px 25px 30px}.faq h2{font-size:30px}.faq summary{font-size:16px}.faq details p{font-size:15px}}

/* Screenshot-targeted FAQ readability adjustment, without changing the heading. */
.faq summary{font-size:18.5px}.faq details p{font-size:17px}
@media(max-width:500px){.faq summary{font-size:17.5px}.faq details p{font-size:16px}}
@media(max-width:359px){.faq summary{font-size:16px}.faq details p{font-size:15px}}

/* The FAQ title is the exact artwork from the latest AI, not live typesetting. */
.faq h2.faq-title{margin:0 -28px 24px;font-size:0;line-height:0;letter-spacing:normal}.faq-title img{display:block;width:100%;height:auto}
@media(max-width:500px){.faq h2.faq-title{margin-left:-25px;margin-right:-25px}}

/* 2026-11-03 右パネルを画面の中段へ。
   旧パネル（535x569の縦長）を青帯の上に収めるための height:73.4vh / padding-top:17vh が
   残っていたため上寄りになっていた。新パネルは560x222の横長なので、素直に中央に置く。 */
.side-right{height:100dvh;max-height:100vh;padding-top:0;padding-bottom:0;justify-content:center;align-items:center;overflow:visible}
