:root{--blue:#087bfa;--ink:#101d28;--muted:#65717d;--pale:#edf7ff;--line:#e4eaf0}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0;font-family:var(--lp-body,'DM Sans'),var(--lp-sans,'Noto Sans JP'),sans-serif;color:var(--ink);background:#fff}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer}header{height:100px;margin:0 auto;max-width:1440px;padding:0 5%;display:flex;align-items:center;justify-content:space-between;gap:25px}.logo{font-family:'DM Sans',sans-serif;font-size:49px;font-weight:800;letter-spacing:-4px;line-height:1}.logo span{font-size:12px;letter-spacing:0;vertical-align:top;display:inline-block;margin:5px 0 0 5px}nav{display:flex;gap:35px;font-size:13px;font-weight:600}nav a{transition:color .2s}nav a:hover{color:var(--blue)}.button{background:var(--blue);color:#fff;display:inline-flex;align-items:center;justify-content:center;gap:36px;padding:20px 27px;border-radius:40px;font-size:15px;font-weight:700;border:0;transition:background .25s,transform .25s}.button:hover{background:#0064d3;transform:translateY(-3px)}.button.small{padding:14px 23px;font-size:13px;gap:20px}.button-dot{width:7px;height:7px;border-radius:50%;background:white}.hero{position:relative;max-width:1440px;margin:auto;min-height:790px;padding:78px 5% 80px;display:grid;grid-template-columns:1.05fr 1fr;align-items:center;overflow:hidden}.eyebrow{font-size:11px;letter-spacing:2px;font-weight:700;display:flex;align-items:center;gap:10px;margin:0 0 28px}.eyebrow>span{width:7px;height:7px;background:var(--blue);border-radius:50%}h1{font-size:clamp(36px,3.5vw,54px);font-weight:800;letter-spacing:-1.9px;line-height:1.55;margin:0 0 25px}.blue{color:var(--blue);position:relative}.blue:after{content:'';position:absolute;left:0;right:0;bottom:-4px;height:3px;background:var(--blue);transform:rotate(-3deg)}.hero-actions{display:flex;align-items:center;gap:26px;margin:29px 0 35px}.text-link{font-size:13px;font-weight:600;display:flex;align-items:center;gap:9px}.play{font-size:9px;border:1px solid #d0d8df;display:grid;place-items:center;width:27px;height:27px;border-radius:50%}.social-line{display:flex;align-items:center;gap:16px}.social-line b{font-size:23px}.social-line .ig{color:#c43789;font-size:28px}.social-line .yt{color:#f04444;font-size:21px}.social-line i{width:24px;height:1px;background:#bdc7d0}.mini-logo{width:29px;height:29px;border-radius:8px;display:grid;place-items:center;background:var(--blue);color:white;font-weight:800;font-size:25px}.hero-visual{height:590px;position:relative;display:flex;align-items:center;justify-content:center}.orbit{position:absolute;width:540px;height:540px;background:#e5f3ff;border-radius:50%;right:-30px;top:12px}.orbit:after{content:'';position:absolute;inset:-23px;border:1px solid #e7f1f8;border-radius:50%}.visual-label{position:absolute;right:-24px;top:35px;writing-mode:vertical-rl;font-size:10px;letter-spacing:3px;color:#6a8eab}.phone{position:relative;width:280px;height:555px;background:#fff;border:7px solid #1b2730;border-radius:43px;box-shadow:0 0 0 2px #79868c,15px 30px 45px #254d7b26;transform:rotate(8deg);padding:16px 12px 10px;overflow:hidden;z-index:2}.island{position:absolute;width:88px;height:22px;border-radius:0 0 16px 16px;background:#1b2730;left:calc(50% - 44px);top:0}.status{display:flex;justify-content:space-between;font-size:9px;margin-bottom:24px;padding:0 7px}.app-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:23px}.app-head .logo{font-size:30px;letter-spacing:-2px}.app-head>span:last-child{font-size:20px;color:#7894a5}.app-tabs{display:flex;font-size:10px;gap:17px;margin-bottom:16px}.app-tabs b{color:var(--blue);border-bottom:2px solid var(--blue);padding-bottom:6px}.app-tabs>span{color:#8894a0}.chips{display:flex;gap:5px;margin-bottom:15px}.chips span{font-size:8px;background:#f1f4f8;padding:5px 10px;border-radius:20px;white-space:nowrap}.chips .selected{background:var(--blue);color:#fff}.phone-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px 8px}.app-card{font-size:9px;line-height:1.6}.app-card .thumb{position:relative;height:110px;border-radius:8px;overflow:hidden;background:#b5cfc0}.app-card img{width:100%;height:100%;object-fit:cover}.app-card strong{display:block;margin:5px 0 3px}.app-card small{font-size:7px;color:#85919c}.app-card .heart{position:absolute;right:7px;top:3px;font-size:22px;color:white}.duration{position:absolute;bottom:6px;right:6px;color:white;background:#182426a1;font-size:8px;border-radius:3px;padding:0 3px}.app-bottom{position:absolute;bottom:0;left:0;right:0;display:flex;justify-content:space-around;background:#ffffffef;padding:12px 0 15px;color:#98a4b0;font-size:17px}.app-bottom b:first-child{color:var(--blue)}.app-bottom small{display:block;font-size:7px;font-weight:400}.floating-note{position:absolute;top:70px;left:-13px;background:#fff;border:1px solid #edf1f4;padding:16px 20px;display:flex;align-items:center;gap:11px;border-radius:13px;z-index:3;box-shadow:0 12px 35px #133b6510;font-size:12px;font-weight:700;transform:rotate(-7deg)}.floating-note small{display:block;font-size:7px;letter-spacing:1px;margin-top:5px;color:#8c98a2}.check{background:#eaf5ff;color:var(--blue);border-radius:50%;padding:5px 8px}.floating-card{position:absolute;bottom:26px;right:-18px;display:flex;align-items:center;gap:12px;background:white;padding:20px 24px;z-index:3;border-radius:13px;box-shadow:0 10px 50px #23496515;transform:rotate(-5deg);font-size:11px;line-height:1.8}.bookmark{background:var(--blue);color:white;padding:10px 17px;font-size:22px;border-radius:13px}.saved-avatars{display:flex;padding-left:8px}.saved-avatars span{border:2px solid white;margin-left:-9px;background:#d7e8ce;border-radius:50%;width:26px;height:26px;text-align:center;font-size:9px}.saved-avatars span:nth-child(2){background:#d9e8fd}.saved-avatars span:nth-child(3){background:#fff0cb}.spark{position:absolute;font-size:76px;color:#097af8;bottom:30px;left:5px;transform:rotate(10deg)}.small-cross{position:absolute;right:0;top:100px;font-size:42px;color:#66b2f8}.hero-foot{position:absolute;bottom:22px;left:5%;right:5%;display:flex;justify-content:space-between;align-items:center;color:#7d8b98;font-size:9px;letter-spacing:1.5px}.hero-foot>span:nth-child(2){display:flex;align-items:center;gap:14px}.hero-foot i{height:35px;width:1px;background:#adc0ce}section{scroll-margin-top:35px}@media(min-width:1500px){.hero{min-height:820px}}@media(max-width:1000px){nav{gap:18px;font-size:12px}.hero{grid-template-columns:1fr 1fr;padding-top:40px}.hero-visual{transform:scale(.88);transform-origin:center}.hero h1{font-size:36px}.hero-actions{gap:17px}.social-line{gap:10px}.floating-note{left:-25px}}@media(max-width:720px){header{height:80px;padding:0 6%}header>.logo{font-size:39px}nav{display:none}.button.small{font-size:11px;padding:12px 18px}.hero{display:flex;flex-direction:column;padding:35px 6% 70px;overflow:hidden;align-items:stretch;min-height:0}.eyebrow{font-size:9px;letter-spacing:1.5px;margin-bottom:22px}h1,.hero h1{font-size:clamp(28px,7.5vw,44px);letter-spacing:-1px;line-height:1.6}.hero-actions{margin-top:23px;margin-bottom:28px}.button{font-size:13px;padding:18px 23px;gap:24px}.hero-visual{height:555px;margin-top:30px;transform:scale(.9);transform-origin:center top;margin-bottom:-40px}.orbit{width:430px;height:430px;top:45px;right:calc(50% - 215px)}.floating-note{left:-5px;top:64px}.floating-card{right:-10px;bottom:3px;padding:14px}.spark{left:0;bottom:45px;font-size:60px}.visual-label{right:0}.hero-foot{font-size:8px}.hero-foot>span:last-child{display:none}}
.section{padding:110px 6%;max-width:1440px;margin:auto}h2{font-size:clamp(28px,3vw,42px);line-height:1.6;letter-spacing:-1.1px;margin:0;font-weight:800}.section .eyebrow{color:var(--blue);font-size:10px;margin-bottom:18px;letter-spacing:1.8px}.section p{font-size:14px;line-height:2;color:var(--muted)}.light-text{color:#87929b}.how{background:#f7f9fb;border-radius:25px}.section-heading{position:relative}.section-heading>p:last-child{position:absolute;right:0;bottom:8px}.steps{display:grid;grid-template-columns:repeat(3,1fr);margin-top:55px;gap:35px}.step-top{display:flex;align-items:center;gap:20px}.step-top>span{font-size:14px;color:var(--blue);border:1px solid #c8e2f7;border-radius:50%;width:42px;height:42px;display:grid;place-items:center}.step h3{font-size:36px;margin:0;font-weight:600;letter-spacing:-1px}.step h3 small{display:block;font-size:12px;letter-spacing:0;font-weight:600;margin-top:3px}.step>p{font-size:13px;margin:25px 0}.step-art{height:215px;background:#edf2f7;border-radius:14px;position:relative;overflow:hidden}.find-art{display:flex;align-items:center;justify-content:center}.little-video{width:122px;height:157px;position:relative;border-radius:9px;overflow:hidden;transform:rotate(-9deg);box-shadow:0 10px 20px #2b45552c}.little-video img{height:100%;width:100%;object-fit:cover}.little-video>span{position:absolute;left:43px;top:62px;display:grid;place-items:center;background:#ffffff80;width:34px;height:34px;border-radius:50%;color:white;font-size:13px}.network{position:absolute;z-index:2;font-family:'DM Sans';font-size:11px;background:white;border:1px solid #e4e9ed;padding:9px 11px;border-radius:7px}.network:first-child{top:30px;left:14px;transform:rotate(-6deg)}.network:nth-child(2){bottom:20px;left:22px;transform:rotate(6deg)}.network:last-child{right:12px;top:65px;transform:rotate(8deg)}.stack-card{position:absolute;width:157px;height:169px;border-radius:10px;background:white;top:25px;left:calc(50% - 78px);padding:7px;box-shadow:0 5px 20px #2a455515;transform:rotate(-7deg)}.stack-card.back{transform:rotate(8deg);background:#c1ddf5}.stack-card img{width:100%;height:124px;object-fit:cover;border-radius:6px}.stack-card>span{font-size:8px;font-weight:600}.save-badge{position:absolute;bottom:28px;right:20px;background:var(--blue);color:white;padding:12px 18px;border-radius:8px;font-size:11px;transform:rotate(5deg)}.plan-art{padding:24px 19px}.plan-art>div{background:white;display:flex;align-items:center;gap:9px;border-radius:6px;padding:7px;margin-bottom:7px;transform:rotate(-3deg)}.plan-art img{width:37px;height:30px;object-fit:cover;border-radius:4px}.plan-art b{font-size:8px;flex:1}.plan-art>div>span{font-size:9px;color:#7191ab}.plan-tag{font-size:8px;letter-spacing:1.5px;display:block;text-align:center;margin-top:14px;color:#8b9fac}.discover{padding-top:115px}.discover-head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px}.discover-head>p{margin:0 0 8px}.filter-row{display:flex;gap:10px;margin:40px 0 30px;flex-wrap:wrap}.filter-row button{padding:11px 23px;border:1px solid #dee5eb;background:white;border-radius:30px;font-size:12px;color:#607080;transition:background .2s,color .2s}.filter-row button.active{background:var(--ink);border-color:var(--ink);color:white}.training-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;min-height:310px}.training-image{height:240px;position:relative;border-radius:11px;overflow:hidden;background:#dbe6e0}.training-image img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.2,1)}.training-card:hover img{transform:scale(1.055)}.training-image:after{content:'';position:absolute;inset:60% 0 0;background:linear-gradient(transparent,#061c2866);pointer-events:none}.training-image .duration{z-index:1;font-size:11px;bottom:15px;right:12px}.save-video{position:absolute;right:12px;top:12px;width:34px;height:34px;background:#ffffffee;border:none;border-radius:50%;font-size:25px;line-height:1;color:var(--ink);z-index:1}.save-video.is-saved{color:var(--blue)}.video-label{position:absolute;bottom:15px;left:14px;font-size:8px;color:white;letter-spacing:1px;z-index:1}.training-card>p{font-size:10px;margin:14px 0 6px}.training-card h3{font-size:14px;margin:0;line-height:1.7}.photo-note{font-size:10px!important;margin-top:26px}.analysis-section{display:grid;grid-template-columns:1fr .85fr;gap:100px;background:#edf7ff;border-radius:25px;align-items:center;padding-top:85px;padding-bottom:85px}.analysis-card{max-width:450px;background:white;border-radius:15px;overflow:hidden;box-shadow:0 20px 45px #1e5f9620;transform:rotate(-3deg)}.analysis-image{height:275px;position:relative;overflow:hidden}.analysis-image>img{width:100%;height:100%;object-fit:cover;object-position:center 58%}.analysis-image:after{content:'';position:absolute;inset:40% 0 0;background:linear-gradient(transparent,#081c33a8)}.analysis-chip{position:absolute;top:20px;left:20px;padding:7px 10px;border:1px solid #ffffff70;border-radius:3px;font-size:8px;letter-spacing:1.5px;color:white;z-index:1}.analysis-caption{position:absolute;bottom:20px;left:22px;color:white;font-size:17px;line-height:1.7;font-weight:600;z-index:1}.scan-line{position:absolute;left:0;right:0;top:20%;height:2px;background:#84cfff;box-shadow:0 0 25px 5px #0a90ff60;z-index:2;animation:scan 5s ease-in-out infinite}.insight{padding:24px}.insight>span{font-size:8px;letter-spacing:2px;color:#94a3af}.insight h3{font-size:18px;margin:12px 0}.insight-tags{display:flex;gap:6px}.insight-tags b{font-size:9px;padding:4px 10px;background:#edf5fb;border-radius:3px;color:#6486a2;font-weight:500}dl{margin:20px 0 0}dl>div{border-top:1px solid #eef0f2;padding:11px 0;display:flex;gap:20px;font-size:10px}dt{color:#8493a1;min-width:95px}dd{margin:0}.analysis-copy>p:not(.eyebrow){margin-top:27px}.feature-caption{font-size:11px;color:var(--blue);display:block;border-top:1px solid #c9e1f3;padding-top:20px;margin-top:25px}.demo-section{display:grid;grid-template-columns:.8fr 1.2fr;gap:70px;align-items:center;padding-top:130px;padding-bottom:130px}.demo-copy>p{margin-top:28px}.faq{display:grid;grid-template-columns:.8fr 1.2fr;gap:70px;padding-top:60px;padding-bottom:110px}.faq-list{border-top:1px solid var(--line)}details{border-bottom:1px solid var(--line)}summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px;font-size:14px;font-weight:600;padding:25px 0;cursor:pointer}summary::-webkit-details-marker{display:none}summary>span{color:var(--blue);font-size:22px;font-weight:400;transition:transform .2s}details[open] summary>span{transform:rotate(45deg)}details>p{margin:0 30px 25px 0;font-size:13px!important}.closing{max-width:1440px;margin:auto;background:#e9f5ff;position:relative;overflow:hidden;text-align:center;padding:85px 6% 95px;border-radius:24px}.closing .eyebrow{justify-content:center;color:var(--blue);font-size:10px}.closing h2{font-size:43px;position:relative;z-index:1}.closing .button{position:relative;z-index:1;margin-top:30px}.closing-mark{position:absolute;left:-20px;bottom:-80px;font-size:340px;line-height:1;font-weight:800;letter-spacing:-27px;color:#d5ebfd;pointer-events:none}.closing-note{position:absolute;right:40px;bottom:30px;font-size:10px;color:#7395b2}footer{max-width:1440px;margin:auto;display:flex;align-items:center;gap:30px;padding:45px 6%}footer .logo{font-size:36px}footer .logo>span{font-size:9px}footer>p{font-size:10px;color:#748390;flex:1}footer>span{font-size:10px;color:#748390}footer>button{background:none;border:none;font-size:10px;color:#748390;text-decoration:underline}.reveal{opacity:0;translate:0 22px;transition:opacity .8s,translate .8s}.reveal.in{opacity:1;translate:0 0}.steps .reveal:nth-child(2){transition-delay:.12s}.steps .reveal:nth-child(3){transition-delay:.24s}.floating-note{animation:float-note 6s ease-in-out infinite}.floating-card{animation:float-card 7s ease-in-out infinite}.spark{animation:turn 22s linear infinite}.hero-copy{animation:entrance .9s both}.phone{animation:phone-in 1.2s both}.hero-visual .orbit{animation:entrance 1.5s both}@keyframes float-note{50%{transform:translateY(-12px) rotate(-5deg)}}@keyframes float-card{50%{transform:translateY(10px) rotate(-3deg)}}@keyframes turn{to{transform:rotate(370deg)}}@keyframes entrance{from{opacity:0;translate:0 20px}to{opacity:1;translate:0 0}}@keyframes phone-in{from{opacity:0;transform:translateY(35px) rotate(12deg)}to{opacity:1;transform:translateY(0) rotate(8deg)}}@keyframes scan{50%{top:85%}}.motion-off *{animation:none!important;transition:none!important}.motion-off .reveal{opacity:1;translate:0 0}.motion-off{scroll-behavior:auto}body.motion-off .scan-line{display:none}a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid #5daaff;outline-offset:5px}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.reveal{opacity:1;translate:0 0}.scan-line{display:none}}@media(max-width:1100px){.analysis-section{gap:50px}.demo-section{gap:35px}.training-image{height:210px}.steps{gap:22px}.network{font-size:9px}.hero{min-height:750px}}@media(max-width:720px){.section{padding:65px 6%}.how,.analysis-section,.closing{border-radius:0}.section-heading>p:last-child{position:static;margin-top:22px}.steps{grid-template-columns:1fr;gap:35px;margin-top:33px}.step{display:grid;grid-template-columns:1fr 1fr;gap:0 16px;align-items:start}.step-top{grid-column:1;gap:12px}.step h3{font-size:31px}.step-top>span{width:32px;height:32px;font-size:11px}.step>p{grid-column:1;font-size:11px;margin:17px 0 0}.step-art{grid-column:2;grid-row:1/3;height:165px}.little-video{width:95px;height:130px}.little-video>span{left:32px;top:50px}.network{font-size:7px;padding:6px}.network:first-child{left:2px;top:20px}.network:nth-child(2){left:0;bottom:10px}.network:last-child{right:0;top:65px}.stack-card{width:114px;height:140px;left:calc(50% - 57px);top:12px}.stack-card img{height:97px}.stack-card>span{font-size:6px}.save-badge{font-size:8px;right:5px;bottom:16px;padding:9px 12px}.plan-art{padding:22px 8px}.plan-art>div{gap:4px;padding:5px}.plan-art img{width:25px;height:24px}.plan-art b{font-size:6px}.plan-tag{font-size:6px;margin-top:9px}.discover-head{display:block}.discover-head>p{margin-top:21px;font-size:13px}.filter-row{gap:7px;margin:28px 0 23px}.filter-row button{font-size:10px;padding:9px 14px}.training-grid{grid-template-columns:1fr 1fr;gap:25px 14px;min-height:260px}.training-image{height:215px}.training-card h3{font-size:12px}.video-label{font-size:6px;left:10px}.training-image .duration{font-size:9px;right:9px}.training-card>p{font-size:9px}.analysis-section{display:flex;flex-direction:column-reverse;gap:35px;align-items:stretch}.analysis-copy>p:not(.eyebrow){font-size:13px;margin-top:20px}.analysis-card{max-width:420px;width:94%;margin:0 auto}.analysis-image{height:230px}.analysis-caption{font-size:16px}.insight{padding:20px}.insight h3{font-size:16px}.demo-section{grid-template-columns:1fr;gap:25px}.demo-copy h2 br:nth-child(2){display:none}.demo-copy>p{font-size:13px}.faq{display:block}.faq-list{margin-top:30px}summary{font-size:12px;padding:22px 0}.closing{padding:65px 5% 85px}.closing h2{font-size:30px}.closing .eyebrow{font-size:8px;letter-spacing:1px}.closing-mark{font-size:220px;bottom:-58px;left:-12px;letter-spacing:-19px}.closing-note{font-size:9px;bottom:24px;right:22px}footer{flex-wrap:wrap;gap:20px;padding:35px 6%}footer>p{flex:auto;font-size:9px;margin-left:auto}footer>span{font-size:9px}footer>button{margin-left:auto;font-size:9px}.hero{min-height:0}}
/* Reading text stays generous; miniature product previews retain their scale. */
.section p:not(.eyebrow):not(.photo-note),.step>p,.analysis-copy>p:not(.eyebrow){font-size:16px}.training-card>p{font-size:12px!important}.section p.eyebrow{font-size:11px}.filter-row button,summary{font-size:14px}.photo-note{font-size:12px!important}.hero-foot{font-size:10px}html:has(body.motion-off){scroll-behavior:auto}@media(max-width:720px){.step{grid-template-columns:1fr}.step-art{grid-column:1;grid-row:auto;margin-top:20px;height:200px}.step>p{font-size:15px}.step>p br{display:none}.steps{gap:36px}.section-heading>p:last-child br,.discover-head>p br{display:none}.step-art .little-video{height:155px;width:120px}.step-art .stack-card{top:22px;height:160px;width:145px;left:calc(50% - 72px)}.step-art .stack-card img{height:118px}.step-art .plan-art{padding:25px}.plan-art>div{padding:8px;gap:12px}.plan-art img{width:44px;height:30px}.plan-art b{font-size:10px}.network{font-size:11px;padding:9px 12px}.network:first-child{left:15%;top:30px}.network:nth-child(2){left:17%;bottom:20px}.network:last-child{right:12%;top:70px}.save-badge{right:14%;bottom:25px;font-size:11px}.filter-row button{font-size:12px}}
/* Original supplied plax artwork, framed without altering the source image. */
.brand-logo{display:block!important;position:relative;width:112px;height:50px;overflow:hidden;margin:0!important;vertical-align:middle!important}.brand-logo img{position:absolute;width:123%;max-width:none;height:auto;left:-12%;top:-92%}header .logo,footer .logo{display:block;line-height:1}.app-head .brand-logo{width:70px;height:31px}.mini-logo{width:58px;height:30px;background:transparent;border-radius:0}.mini-logo .brand-logo{width:56px;height:25px}.closing-mark{bottom:12px;left:25px;opacity:.08}.closing-mark .brand-logo{width:450px;height:200px}footer .brand-logo{width:94px;height:42px}
/* A pinned stage gives each incoming folder a visible title rail. */
.how{padding-bottom:55px}.how .section-heading>p:last-child{max-width:390px}.steps{display:block;height:260svh;position:relative;margin-top:48px}.stack-stage{--title-height:78px;position:sticky;top:50px;height:min(680px,calc(100svh - 80px));overflow:hidden;isolation:isolate;padding:0 1px}.step{position:absolute;left:1px;right:1px;top:0;height:calc(100% - 2 * var(--title-height) - 12px);min-height:320px;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:var(--title-height) 1fr;padding:0 42px 32px;gap:0 45px;border:1px solid #d9e4ec;border-radius:19px 19px 14px 14px;background:#fff;box-shadow:0 -5px 24px #1635530a;will-change:transform;opacity:1;translate:none;transition:none}.step:nth-child(1){z-index:1;background:#fff}.step:nth-child(2){z-index:2;background:#edf7ff;transform:translateY(110vh)}.step:nth-child(3){z-index:3;background:#dcefff;transform:translateY(110vh)}.step-top{grid-column:1 / -1;grid-row:1;border-bottom:1px solid #162d4212;gap:18px}.step-top>span{width:35px;height:35px;font-size:12px;background:#ffffff80}.step h3{display:flex;align-items:center;gap:20px;font-size:31px;letter-spacing:-.8px}.step h3 small{font-size:14px;font-weight:500;margin:0;letter-spacing:0}.step>p{grid-column:1;grid-row:2;align-self:center;font-size:21px!important;line-height:2!important;margin:0;color:var(--ink)!important}.step-art{grid-column:2;grid-row:2;align-self:center;height:min(270px,100%);min-height:190px;margin:22px 0 0;background:#e8f0f7}.step:nth-child(2) .step-art{background:#deedf9}.step:nth-child(3) .step-art{background:#cce3f6}.step .little-video{width:150px;height:200px}.step .little-video>span{left:58px;top:82px}.step .stack-card{top:30px;width:170px;height:190px;left:calc(50% - 85px)}.step .stack-card img{height:147px}.step .stack-card>span{font-size:10px}.step .network{font-size:13px}.step .network:first-child{left:10%;top:35px}.step .network:nth-child(2){left:12%;bottom:25px}.step .network:last-child{right:9%;top:85px}.step .save-badge{bottom:30px;right:12%;font-size:13px}.step .plan-art{padding:28px 20px}.step .plan-art>div{padding:12px;gap:13px;margin-bottom:10px}.step .plan-art img{width:52px;height:38px}.step .plan-art b{font-size:11px}.step .plan-tag{font-size:10px}.motion-off .steps{height:auto}.motion-off .stack-stage{position:static;height:auto;overflow:visible;display:grid;gap:20px}.motion-off .step{position:relative;height:420px;min-height:0;transform:none!important}
@media(max-width:900px){.how .section-heading>p:last-child{position:static;margin-top:20px}.step{padding:0 25px 25px;gap:0 25px}.step>p{font-size:17px!important}}
@media(max-width:720px){header .brand-logo{width:93px;height:42px}.mini-logo .brand-logo{width:43px;height:19px}.mini-logo{width:45px}.closing-mark .brand-logo{width:265px;height:118px}.steps{height:260svh;margin-top:30px}.stack-stage{--title-height:65px;top:20px;height:calc(100svh - 45px);max-height:740px}.step{padding:0 21px 20px;display:grid;grid-template-columns:1fr;grid-template-rows:65px auto 1fr;gap:0;border-radius:15px;min-height:0}.step-top{grid-column:1;grid-row:1;gap:11px}.step h3{font-size:27px;gap:15px}.step h3 small{font-size:13px}.step-top>span{width:30px;height:30px;font-size:11px}.step>p{grid-column:1;grid-row:2;align-self:center;font-size:16px!important;margin:19px 0 0;line-height:1.9!important}.step>p br{display:initial}.step-art{grid-column:1;grid-row:3;margin:18px 0 0;align-self:stretch;height:auto;min-height:0;max-height:290px}.step .little-video{height:80%;max-height:190px;width:130px}.step .little-video>span{top:42%;left:48px}.step .stack-card{height:76%;max-height:190px;top:12%;width:145px;left:calc(50% - 72px)}.step .stack-card img{height:78%}.step .network{font-size:10px}.step .save-badge{font-size:11px;right:7%;bottom:20px}.step .plan-art{padding:16px 13px}.step .plan-art>div{padding:7px;gap:8px;margin-bottom:7px}.step .plan-art img{width:37px;height:28px}.step .plan-art b{font-size:9px}.step .plan-tag{font-size:8px;margin-top:10px}.motion-off .step{height:450px}}
@media(max-height:650px) and (min-width:721px){.stack-stage{--title-height:60px;top:15px;height:calc(100svh - 30px)}.step{min-height:0;padding-bottom:15px}.step-top{height:60px}.step-art{min-height:0;margin-top:15px;max-height:210px}.step>p{font-size:16px!important}}
@media(prefers-reduced-motion:reduce){.steps{height:auto}.stack-stage{position:static;height:auto;overflow:visible;display:grid;gap:20px}.step{position:relative;height:450px;min-height:0;transform:none!important}}
/* Quiet blue graph paper across the page and tinted section backgrounds. */
:root{--paper-grid:linear-gradient(to right,rgba(45,121,179,.075) 1px,transparent 1px),linear-gradient(to bottom,rgba(45,121,179,.075) 1px,transparent 1px);--paper-square:28px}
body,.how,.analysis-section,.closing{background-image:var(--paper-grid);background-size:var(--paper-square) var(--paper-square);background-position:0 0}
@media(max-width:720px){:root{--paper-square:22px}}

/* 横にはみ出す飾り（インク・CTA の流れるカード）で、ページが横に揺れないように */
body{overflow-x:hidden;overflow-x:clip}

/* ===== セクションの英字ラベル：1文字ずつの span（TechText が位置を読む）===== */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.fl-line{display:inline-flex;flex-wrap:wrap;align-items:flex-start;line-height:1.15}
.fl-w{display:inline-flex;flex-wrap:nowrap}
.fl{display:inline-block;perspective:900px}
.fl-f{display:block;position:relative;backface-visibility:hidden;-webkit-backface-visibility:hidden;white-space:pre}
.fl-sp{display:inline-block;width:.32em}
/* .eyebrow>span は見出しの頭の青い点の指定。転がす文字の入れ物には当てない
   （当たると幅7pxの丸に押し込まれて、1語ずつ折れる） */
.eyebrow>.fl-line{width:auto;height:auto;background:none;border-radius:0;flex:0 1 auto}
.eyebrow>.sr-only{background:none}
/* ===== 見出しの英字：Unbounded の小文字（2026-10-05・ユーザー指示「アンバウンデッドの小文字に」）=====
   ロゴ（小文字・丸い幾何学形）に寄せる。Unbounded は横に広いので、測定会の Anton（92px）と同じ大きさに
   すると1語で1行を使い切る。行の長さが測定会と近くなる大きさ（最大64px）にしてある。色は PLAX の青のまま。
   #more で書くのは、画面幅ごとの小さい指定（.section p.eyebrow など）より強くするため */
#more .eyebrow{font-family:Unbounded,var(--lp-sans,"Noto Sans JP"),sans-serif;font-weight:800;
  font-size:clamp(30px,5vw,64px);line-height:1.1;letter-spacing:-.01em;text-transform:lowercase;
  margin:0 0 clamp(12px,1.6vw,20px)}
#more .eyebrow .fl-line{line-height:1.1}
#more .eyebrow .fl-sp{width:.28em}
/* 語と語のあいだは gap で空ける（空白の棒を置くと、折り返した行の頭に1字ぶんの空きが出る） */
#more .eyebrow .fl-line{column-gap:.28em}
#more .eyebrow .fl-sp{display:none}
/* 最後のセクションは文字も見出しも中央 */
#more .closing .eyebrow .fl-line{justify-content:center}
/* 見出しが大きくなったので、右の説明が細く押し込まれないようにする（左の見出しのほうが折れる） */
.discover-head>p{flex-shrink:0}

/* ===== 英字見出しの TechText（tech-title.js・React Bits の移植）=====
   まわし終わったら .is-tech が付き、文字は canvas が描く（並び・折り返しは下の span のまま） */
.eyebrow.is-tech{position:relative;touch-action:pan-y;-webkit-user-select:none;user-select:none}
.eyebrow.is-tech>.fl-line,.eyebrow.is-tech .fl-f{visibility:hidden!important;animation:none!important}
.tt-canvas{position:absolute;pointer-events:none;z-index:2}

/* ===== 日本語の見出し：ふい字で描いた絵（headings.js・scripts/lp-headings.py が作る）=====
   高さは「行数 × 行の高さ1.6em」。文字の大きさ（clamp）はいままでの h1・h2 のまま効く */
.hh{display:block;height:calc(var(--hh-lines) * 1.6em);width:auto;max-width:100%;object-fit:contain;object-position:left center}
.closing .hh{margin:0 auto;object-position:center}

/* ===== 最後の CTA：トレーニングカードが縦に流れる背景（app.js・Pinterest の登録画面の形）=====
   列ごとに上へ／下へを交互に流し、暗い幕を左から右へ薄くかけて、文字は左に白で置く */
.closing.has-cards{background:#0b1724;background-image:none;color:#fff;text-align:left;min-height:min(620px,92vh);
  display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:90px 6%;--tt-accent:#ffffff}
.closing.has-cards>:not(.cta-bg):not(.cta-dim):not(.closing-note):not(.closing-mark):not(.ink-layer){position:relative;z-index:2}
.closing.has-cards .closing-note{z-index:2}
.closing.has-cards .eyebrow{color:#fff;justify-content:flex-start;--tt-tint:rgba(150,214,255,.62)}   /* 暗い地なのでインクの塗りを明るい青に（tech-title.js の --tt-tint・2026-10-07） */
#more .closing.has-cards .eyebrow .fl-line{justify-content:flex-start}
.closing.has-cards h2{font-size:clamp(34px,4.4vw,60px)}
.closing.has-cards .hh{margin:0;object-position:left center;filter:brightness(0) invert(1)}
.closing.has-cards .closing-mark{display:none}
.closing.has-cards .closing-note{color:rgba(255,255,255,.72)}
.cta-bg{position:absolute;inset:-60px 0;display:grid;grid-template-columns:repeat(8,minmax(150px,1fr));gap:14px;padding:0 14px;z-index:0}
.cta-col{overflow:visible}
.cta-col:nth-child(even){margin-top:-90px}
.cta-track{--gap:14px;display:flex;flex-direction:column;gap:var(--gap);will-change:transform;animation:ctaUp var(--dur,48s) linear infinite}
.cta-col.is-down .cta-track{animation-name:ctaDown}
.closing.is-paused .cta-track{animation-play-state:paused}
/* 2回つないだ並びの「半分＋すき間の半分」流すと、2つ目の並びがちょうど頭に来る */
@keyframes ctaUp{from{transform:translateY(0)}to{transform:translateY(calc(-50% - var(--gap) / 2))}}
@keyframes ctaDown{from{transform:translateY(calc(-50% - var(--gap) / 2))}to{transform:translateY(0)}}
.cta-card{position:relative;margin:0;border-radius:16px;overflow:hidden;background:#1d2b3a;flex:none}
.cta-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cta-card:after{content:'';position:absolute;inset:45% 0 0;background:linear-gradient(transparent,rgba(4,14,24,.7))}
.cta-card figcaption{position:absolute;left:12px;right:12px;bottom:11px;z-index:1;line-height:1.45}
.cta-card small{display:block;font-size:9px;color:rgba(255,255,255,.8)}
.cta-card b{display:block;font-size:12px;color:#fff}
.cta-dur{position:absolute;right:9px;top:9px;z-index:1;font-size:9px;font-weight:700;color:#fff;background:rgba(4,14,24,.55);padding:3px 7px;border-radius:9px}
.cta-dim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(6,16,28,.86) 0%,rgba(6,16,28,.72) 38%,rgba(6,16,28,.38) 70%,rgba(6,16,28,.22) 100%)}
@media(max-width:720px){
  .closing.has-cards{min-height:540px;padding:70px 6%}
  .cta-bg{grid-template-columns:repeat(8,118px);gap:10px;padding:0 10px}
  .cta-track{--gap:10px}
  .cta-dim{background:rgba(6,16,28,.66)}
  .cta-card b{font-size:10px}.cta-card small{font-size:8px}
}
@media(prefers-reduced-motion:reduce){.cta-track{animation:none}}
.closing.has-cards .closing-note{display:none}

/* ===== ログインの窓（explore.js の PLAXLOGIN）===== */
html.lm-open{overflow:hidden}
.lm{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:16px}
.lm[hidden]{display:none}
.lm-back{position:absolute;inset:0;background:rgba(6,16,28,.55);opacity:0;transition:opacity .2s}
.lm-box{position:relative;width:min(480px,100%);max-height:calc(100dvh - 32px);overflow:auto;background:#fff;border-radius:28px;padding:34px 34px 28px;
  box-shadow:0 30px 80px -20px rgba(6,16,28,.5);opacity:0;transform:translateY(14px) scale(.98);transition:opacity .2s,transform .2s}
.lm.is-in .lm-back{opacity:1}.lm.is-in .lm-box{opacity:1;transform:none}
.lm-x{position:absolute;right:16px;top:14px;width:40px;height:40px;border:0;border-radius:50%;background:#eef2f6;font-size:22px;line-height:1;color:#4c5966;cursor:pointer}
.lm-logo img{height:40px;width:auto;display:block}
.lm-title{font-size:26px;font-weight:800;margin:18px 0 6px;letter-spacing:-.5px}
.lm-lead{font-size:14px;line-height:1.7;color:#4c5966;margin:0 0 20px}
.lm-form{display:grid;gap:12px}
.lm-field{width:100%;box-sizing:border-box;height:54px;border:1.5px solid #cdd5dd;border-radius:16px;padding:0 16px;font:inherit;font-size:16px;color:var(--ink);background:#fff}
.lm-field:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(8,123,250,.2)}
.lm-pw{position:relative}.lm-pw .lm-field{padding-right:50px}
.lm-eye{position:absolute;right:8px;top:7px;width:40px;height:40px;border:0;background:transparent;color:#4c5966;cursor:pointer;border-radius:50%}
.lm-eye[aria-pressed="true"]{color:var(--blue)}
.lm-forgot{font-size:13px;color:#0a5cc0;font-weight:700;text-decoration:none;justify-self:start}
.lm-err{margin:0;font-size:13px;color:#b42318;background:#fef3f2;border-radius:12px;padding:10px 12px;line-height:1.6}
/* ロボット判定の枠（/human-check.html）と、その下の一言（アプリの HumanCheck と同じ言い方） */
.lm-human iframe{display:block;width:100%;border:0}
.lm-human-note{margin:0;font-size:12px;color:#5d6b77;text-align:center}.lm-human-note:empty{display:none}
.lm-human-retry{border:0;background:none;padding:0;color:#0a6fd6;font:inherit;font-weight:700;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.lm-go{display:block;text-align:center;text-decoration:none;border:0;border-radius:999px;background:#0a6fd6;color:#fff;font:inherit;font-size:16px;font-weight:700;height:52px;line-height:52px;cursor:pointer;width:100%}
.lm-go:disabled{opacity:.7;cursor:wait}
.lm-new{font-size:14px;margin:20px 0 0;color:var(--ink)}
.lm-new a{color:var(--ink);font-weight:700}
.lm-done p{font-size:15px;margin:0 0 16px}
@media(max-width:520px){.lm-box{padding:28px 22px 22px;border-radius:24px}.lm-title{font-size:22px}}

/* ヘッダーの「ログイン」 */
.hd-login{border:0;background:#eef2f6;color:var(--ink);font:inherit;font-size:14px;font-weight:700;border-radius:999px;padding:12px 20px;margin-right:10px;cursor:pointer}
@media(max-width:720px){.hd-login{padding:9px 14px;font-size:12px;margin-right:6px}}
.hd-actions{display:flex;align-items:center}
/* 360px 前後の端末で、ログインと「無料ではじめる」が2行に折れないように */
.hd-login,header .button.small{white-space:nowrap}
@media(max-width:380px){header{gap:10px}.hd-login{padding:8px 11px;margin-right:5px}header .button.small{padding:11px 13px;gap:10px}}
.lm-logo img{height:34px}

/* ===== インクの飛び散り（app.js・ink/splat-*.webp）=====
   セクションの後ろ（z-index:-1＋isolation）に置く。横はセクションの幅で切り、縦ははみ出してよい */
.has-ink{position:relative;isolation:isolate}
.ink-layer{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow-x:clip;overflow-y:visible}
.ink{position:absolute;width:clamp(260px,32vw,500px);height:auto;mix-blend-mode:multiply;opacity:.9;-webkit-user-select:none;user-select:none}
/* 上下のずらしは px で（% だとセクションの高さで決まり、背の高い「使い方」で大きくずれる） */
.ink-tr{right:-12%;top:-130px;transform:rotate(18deg)}
.ink-tl{left:-13%;top:-140px;transform:rotate(-24deg)}
.ink-br{right:-10%;bottom:-150px;transform:rotate(140deg)}
.ink-bl{left:-12%;bottom:-160px;transform:rotate(-120deg)}
.ink-mr{right:-16%;top:38%;transform:rotate(70deg)}
.ink-ml{left:-16%;top:42%;transform:rotate(-70deg)}
.ink.is-off{display:none}   /* どこに置いても見出しにかかるときは出さない */
.ink[data-src]{visibility:hidden;aspect-ratio:1}   /* 読む前も大きさを持たせる（高さ0だと近づいても気づけない） */
.closing.has-cards .ink-layer{z-index:1}
.ink-cta{right:-8%;top:-18%}
.closing .ink{mix-blend-mode:screen;opacity:.8}
@media(max-width:720px){
  .ink{width:66vw}
  .ink-tr,.ink-tl,.ink-br,.ink-bl{opacity:.75}
  .ink-tl,.ink-tr{opacity:.6}
}
@media(max-width:720px){.ink.ink-mr,.ink.ink-ml,.ink.ink-br,.ink.ink-bl{opacity:.7}.closing .ink{opacity:.75}}

/* ===== ヒーローのモック：画像（assets/hero-mock-v1.webp）＋ SNS のロゴ（2026-10-05・ユーザー指示）=====
   画像のまわりは白い地なので、ふちを薄くして方眼の地へなじませる。ロゴは画像の上に重ねる（画像に焼き込まない）。
   ロゴは Simple Icons（CC0）の形。色は各社の色（Instagram のグラデーション・YouTube の赤・Facebook の青・TikTok と X の黒） */
.hero-visual.hv-img{position:relative;height:auto;display:block;transform:none;margin:0;align-self:center}
.hv-mock{display:block;width:100%;height:auto;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent),linear-gradient(transparent,#000 5%,#000 95%,transparent);
  -webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent),linear-gradient(transparent,#000 5%,#000 95%,transparent);mask-composite:intersect}
/* 日本語以外：スマホの画面の文字をその言葉で重ねる（scripts/lp-i18n.py の hero_overlay）。画像は全言語で同じ。
   位置は画像の px（1536×1024）を％にしたもの。大きさは画像の幅に合わせる（--hm＝画像の 1px） */
.hv-loc>img{display:block;width:100%;height:auto}
.hv-loc{container-type:inline-size}
.hv-i18n{position:absolute;inset:0;--hm:calc(100cqw / 1536);text-align:left;font-family:'DM Sans',var(--lp-sans,'Noto Sans JP'),sans-serif;pointer-events:none;color:#10131a}
.hv-i18n>div{position:absolute;background:#fff;overflow:hidden}
.hv-chips{display:flex;align-items:center;gap:calc(var(--hm) * 7);padding-left:calc(var(--hm) * 6)}
.hv-chips b{flex:none;display:flex;align-items:center;height:calc(var(--hm) * 32);padding:0 calc(var(--hm) * 15);border-radius:999px;background:#f2f5f8;color:#676d76;font-size:calc(var(--hm) * 13.5);font-weight:600}
.hv-chips b.on{background:#2b8cf3;color:#fff;font-weight:700}
.hv-ct{padding:calc(var(--hm) * 4) calc(var(--hm) * 3) 0 calc(var(--hm) * 2)}
.hv-ct .tg{display:flex;gap:calc(var(--hm) * 6);overflow:hidden}
.hv-ct .tg i{flex:none;display:flex;align-items:center;height:calc(var(--hm) * 22);padding:0 calc(var(--hm) * 9);border-radius:999px;font-style:normal;font-size:calc(var(--hm) * 11.5);font-weight:700;white-space:nowrap}
.hv-ct .tg .c-blue{background:#e0f3fd;color:#1d7fcf}.hv-ct .tg .c-indigo{background:#e5ebfc;color:#3555cc}
.hv-ct .tg .c-yellow{background:#fdf0c9;color:#946400}.hv-ct .tg .c-green{background:#e0f5e2;color:#2c8a45}
.hv-ct .tg .c-orange{background:#fdeada;color:#bd6311}.hv-ct .tg .c-purple{background:#efe3fb;color:#7d3fc4}
.hv-ct .tg .c-pink{background:#fde4ec;color:#c93a69}
.hv-ct>b{display:block;margin:calc(var(--hm) * 6) 0 0 calc(var(--hm) * 2);font-size:calc(var(--hm) * 16.5);font-weight:800;line-height:1.35;white-space:nowrap;overflow:hidden}
.hv-ct small{display:flex;gap:calc(var(--hm) * 8);margin:calc(var(--hm) * 5) 0 0 calc(var(--hm) * 2);font-size:calc(var(--hm) * 11);color:#575b63;white-space:nowrap}
.hv-ct small span{display:inline-flex;align-items:center;gap:calc(var(--hm) * 3)}
.hv-ct svg{width:calc(var(--hm) * 13);height:calc(var(--hm) * 13);flex:none}
.hv-ct .ic-clock{fill:none;stroke:#f39a1e;stroke-width:2.6}.hv-ct .ic-user{fill:#8fb9d8}.hv-ct .ic-cone{fill:#f6c08a;stroke:#d99a5c;stroke-width:1.2}
.hv-nav span{position:absolute;top:0;transform:translateX(-50%);font-size:calc(var(--hm) * 11.5);font-weight:600;color:#7d838b;white-space:nowrap}
.hv-nav span.on{color:#2f7fe0;font-weight:700}
.sl{position:absolute;width:5.2%;aspect-ratio:1;transform:translate(-50%,-50%) rotate(-8deg);border-radius:24%;display:grid;place-items:center;
  box-shadow:0 0 0 3px #fff,0 8px 18px -6px rgba(16,29,40,.45);z-index:2}
.sl svg{width:58%;height:58%;fill:#fff}
.sl-ig{background:radial-gradient(circle at 30% 107%,#fdf497 0%,#fdf497 5%,#fd5949 45%,#d6249f 60%,#285aeb 90%)}
.sl-tt{background:#000}
.sl-tt svg{filter:drop-shadow(-1px -1px 0 #25f4ee) drop-shadow(1px 1px 0 #fe2c55)}
.sl-yt{background:#fff}.sl-yt svg{fill:#ff0000;width:66%;height:66%}
.sl-fb{background:#fff;border-radius:50%}.sl-fb svg{fill:#0866ff;width:78%;height:78%}
.sl-x{background:#000}.sl-x svg{width:52%;height:52%}
.sl-yt{transform:translate(-50%,-50%) rotate(7deg)}.sl-x{transform:translate(-50%,-50%) rotate(6deg)}
@media(max-width:720px){.hero-visual.hv-img{margin:26px -2% 0}.sl{box-shadow:0 0 0 2px #fff,0 5px 12px -4px rgba(16,29,40,.45)}}
/* ヒーローのコピーの下の SNS の並びも、本物のロゴに（同じ .sl を小さく・回さずに） */
.sl-row{display:inline-flex;gap:9px;align-items:center}
.sl.sl-mini{position:static;width:24px;height:24px;transform:none;box-shadow:0 0 0 1px rgba(16,29,40,.08);border-radius:7px}
.sl.sl-mini.sl-fb{border-radius:50%}
@media(min-width:1001px){.hero-visual.hv-img{width:112%;margin-left:-4%}}
.sl-pin{background:#fff;border-radius:50%;transform:translate(-50%,-50%) rotate(8deg)}.sl-pin svg{fill:#e60023;width:80%;height:80%}
.sl.sl-mini.sl-pin{border-radius:50%;transform:none}

/* =========================================================================
   2026-10-06〜07 使い方の3ステップで使う部品（実機の枠・SNS の投稿のモック）。
   はじめは物語の LP（10-06）として作り、10-07 にユーザー指示で3ステップに組み直した
   ========================================================================= */

/* ---- 実機の枠（.dv）：画面は public/lp/screens/*.webp（アプリの画面を見本のデータで撮ったもの）---- */
.dv{--dw:280px;position:relative;margin:0;width:var(--dw);aspect-ratio:390/844;flex:none;border-radius:calc(var(--dw) * .155);background:#0f1722;padding:calc(var(--dw) * .032);box-shadow:0 44px 70px -34px rgba(16,29,40,.5),0 18px 30px -20px rgba(16,29,40,.35),inset 0 0 0 1.5px #2c3746}
.dv-screen{position:relative;width:100%;height:100%;border-radius:calc(var(--dw) * .125);overflow:hidden;background:#fff;display:flex;flex-direction:column}
.dv-screen>img{flex:1;min-height:0;width:100%;height:auto;object-fit:cover;object-position:top center;display:block}
.dv-bar{flex:none;position:relative;height:calc(var(--dw) * .108);display:flex;align-items:center;justify-content:space-between;padding:0 9% 0 10.5%;background:#fff;color:#101d28;font:700 calc(var(--dw) * .044)/1 'DM Sans',sans-serif}
.dv-bar::after{content:"";position:absolute;left:50%;top:22%;height:56%;width:31%;transform:translateX(-50%);border-radius:999px;background:#0f1722}
.dv-ic svg{display:block;width:calc(var(--dw) * .15);height:auto;fill:currentColor}

/* ---- 使い方（3ステップ）----
   2026-10-07・ユーザー指示「物語の時間とか無くして、このデザインのままモックと共にステップセクションに
   （1 SNSで見つけた動画をplaxに保存／2 plaxでメニューを作成／3 現場で実施）」
   「1が表示されて、2に行く時は斜め右にスクロール。3に行く時は斜め左にスクロール」
   ふだん（.hw-wrap.is-on・JS が付ける）… 舞台（.hw-stage）を画面に貼り付け、縦のスクロールで世界（.hw-world）を斜めに動かす
   動きを減らす設定・アニメーション停止・低すぎる画面 … .is-on なし＝3つが縦に並ぶだけ（下の素の指定がその見た目） */
:root{--hw-h:100vh}
@supports(height:100svh){:root{--hw-h:100svh}}
.howto{padding-bottom:30px}
/* 頭：見出し → 3ステップの図を横いっぱい（app.js の ILL_FLOW・2026-10-07。文章と「無料ではじめる」は外した＝ユーザー指示「ボタン含めていらない」） */
.hw-head{display:grid;grid-template-columns:minmax(0,1fr);gap:18px}
.hw-flow{grid-column:1/-1;width:100%;max-width:1100px;margin:40px auto 0}
.hw-flow-wide{display:block;width:100%;height:auto}
.hw-flow-steps{display:none}
.hw-flow-down{width:30px;height:auto;overflow:visible;fill:none;stroke:#1b2733;stroke-width:4.5;stroke-linecap:round;stroke-linejoin:round}
/* 日本語以外の頭の図：文字を消した絵＋その言葉の文字（app.js の ILL_FLOW_I18N）。字は手書きの書体（--lp-hand・言葉ごとに scripts/lp-i18n.py が読む） */
.hf{display:flex;align-items:flex-start;justify-content:center;gap:0}
.hf-p{position:relative;flex:1 1 0;min-width:0;max-width:340px;margin:0;container-type:inline-size;color:#18222c;font-family:var(--lp-hand,'Patrick Hand'),var(--lp-sans,'Noto Sans JP'),sans-serif}
.hf-p>img{display:block;width:100%;height:auto}
.hf-label{position:absolute;transform:translate(-50%,-52%);max-width:var(--fw);font-size:9cqw;font-weight:700;line-height:1.05;text-align:center;white-space:nowrap}
.hf-label.is-long{white-space:normal;font-size:6.6cqw}
.hf-in{position:absolute;font-size:4.4cqw;font-weight:700;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:clip;transform:translateY(8%)}
.hf-in.is-c{text-align:center}
.hf-in.is-s{font-size:3.7cqw}
.hf-in.is-w{white-space:normal;font-size:3.1cqw;line-height:1.1;overflow:visible;transform:none}
.hf-cap{position:absolute;left:2%;right:2%;top:78.5%;margin:0;font-size:7.2cqw;font-weight:700;line-height:1.32;text-align:center;text-wrap:balance}
.hf-cap u{text-decoration:none;padding:0 .12em;background:linear-gradient(transparent 58%,var(--hl) 58%,var(--hl) 90%,transparent 90%)}
.hf-arrow{flex:none;width:44px;margin-top:11%;overflow:visible;fill:none;stroke:#1b2733;stroke-width:4.5;stroke-linecap:round;stroke-linejoin:round}

.hw-wrap{position:relative}
.hw-grid,.hw-path,.hw-dots{display:none}
.hw-panel{position:relative;overflow-x:clip}
.hw-inner{position:relative;max-width:1240px;margin:0 auto;padding:70px 6%;display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:56px;align-items:center}
.hw-p2 .hw-text{order:2}
/* STEP 2 は実機と見本を並べるので、絵の列を広く取る（狭いと見本の名前が折れて縦に伸びる） */
.hw-p2 .hw-inner{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr)}
.hw-p3 .hw-inner{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}
.hw-text h2{font-size:clamp(24px,2.5vw,36px);margin-bottom:20px}
.hw-text p:not(.hw-step){margin:0 0 12px;font-size:16px;line-height:2.05;color:#3d4a56}
.hw-text .hw-note{margin-top:4px;font-size:12px;line-height:1.6;color:var(--muted)}
.hw-visual{position:relative;display:flex;justify-content:center;align-items:center;min-width:0}

/* ---- 斜めに進む（.is-on のときだけ）---- */
.hw-wrap.is-on .hw-stage{position:sticky;top:0;height:var(--hw-h);overflow:hidden;overflow:clip;background:#fff}
.hw-wrap.is-on .hw-grid{display:block;position:absolute;left:calc(var(--paper-square) * -1);top:calc(var(--paper-square) * -1);width:calc(100% + var(--paper-square) * 2);height:calc(100% + var(--paper-square) * 2);background-image:var(--paper-grid);background-size:var(--paper-square) var(--paper-square)}
.hw-wrap.is-on .hw-world{position:absolute;left:0;top:0;width:200%;height:300%}
.hw-wrap.is-on .hw-path{display:block;position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.hw-path path{fill:none;stroke:#9cc9f5;stroke-width:3;stroke-dasharray:2 10;stroke-linecap:round;vector-effect:non-scaling-stroke}
.hw-wrap.is-on .hw-panel{position:absolute;width:50%;height:calc(100% / 3);display:flex;align-items:center}
.hw-wrap.is-on .hw-p1{left:0;top:0}
.hw-wrap.is-on .hw-p2{left:50%;top:calc(100% / 3)}
.hw-wrap.is-on .hw-p3{left:0;top:calc(200% / 3)}
.hw-wrap.is-on .hw-inner{width:100%;padding:24px 6% 86px;transform-origin:50% 45%}
.hw-wrap.is-on .hw-dots{display:flex;position:absolute;left:50%;bottom:20px;transform:translateX(-50%);z-index:5;gap:4px;padding:5px;background:rgba(255,255,255,.92);border:1px solid var(--line);border-radius:999px;box-shadow:0 14px 30px -20px rgba(16,29,40,.5)}
.hw-dots button{display:flex;align-items:center;gap:7px;border:0;background:transparent;border-radius:999px;padding:6px 14px 6px 6px;font:inherit;font-size:12px;font-weight:800;color:var(--muted);cursor:pointer;white-space:nowrap;transition:background .25s,color .25s}
.hw-dots b{display:inline-flex;width:22px;height:22px;align-items:center;justify-content:center;border-radius:50%;background:#eef2f6;color:var(--ink);font-size:11px;transition:background .25s,color .25s}
.hw-dots button.is-on{background:var(--ink);color:#fff}
.hw-dots button.is-on b{background:var(--blue);color:#fff}

/* ---- できること ---- */
.fi{display:inline-flex;width:46px;height:46px;align-items:center;justify-content:center;border-radius:14px;background:#eaf4ff;color:var(--blue)}
.fi svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

@media(max-width:900px){
  .hw-head{grid-template-columns:1fr;gap:18px}
  .hw-inner{grid-template-columns:1fr;gap:30px}
  .hw-p2 .hw-text{order:0}
  .hw-p2 .hw-inner,.hw-p3 .hw-inner{grid-template-columns:1fr}
}
@media(max-width:720px){
  .hw-inner{padding:50px 6%;gap:22px}
  .hw-text p:not(.hw-step){font-size:15px}
  /* 斜めに進むとき：画面の高さに収めるため、2つめの段落・対応SNSの注記は出さない（ヒーローと「できること」に同じ話がある） */
  .hw-wrap.is-on .hw-inner{padding:14px 6% 74px;gap:14px}
  .hw-wrap.is-on .hw-more,.hw-wrap.is-on .hw-note{display:none}
  .hw-wrap.is-on .hw-dots{bottom:14px}
  .hw-dots button{padding:5px 10px 5px 5px;font-size:11px;gap:5px}
}

/* ===== 使い方3ステップの絵（2026-10-07・ユーザー指示「PLAN は、いろんな SNS のトレーニング動画が羅列されていて、そこから右矢印でメニューに
   組み上がる様子をヒーローと同じ雰囲気で」「SAVE・PLAY の絵ももっと作り込んで。ごちゃごちゃではなく、シンプルでその内容が分かる、デザイン性の高い絵に」）=====
   3枚ともヒーローの絵と同じ部品で組む：SNS の投稿カード（.sa-post／横長の .sa-row）・手描きの太い矢印（.sa-go）・実機（.dv）。
   並びは3枚とも「左の素材 → 矢印 → 右の実機」（1枚に1つの意味だけ）。2026-10-08 に頭の図（保存 → マイページで一覧に → メニュー作成）に合わせて組み直した。
     STEP 1 SAVE … SNS の投稿3枚（重なり）→ 青い矢印「リンクをコピー → 貼り付け」→ plax の練習カードの画面＋「✓ 保存しました」
     STEP 2 LIST … SNS のロゴ6つがバラバラ → ピンクの矢印「ぜんぶ一覧に」→ マイボードの画面（2列のカード）
     STEP 3 PLAN … ✓ で選んだカード4枚（横長）→ 緑の矢印「組み合わせるだけ」→ メニューの画面（同じ4本が順に並ぶ）＋「自動生成もできる」
   ⚠ STEP 2・3 の画面は HTML（.mb・.ms）。画面の webp にはカードの並びが写っていなかったので、並びが見える画面を作ってある。
     大きさは --u（＝実機の幅 ÷ 390）。390px の画面で書いた px に --u を掛けるので、実機の幅が変わっても同じ見え方。
   ⚠ SNS のロゴはヒーローの .sl をそのまま写す（app.js の snsIcon）。矢印は動かさない。動くのは投稿カードの上下のゆれだけ。
   ⚠ 2026-10-07 まであった「共有シートの実機（SNS_SHARE）」「並べ替えの見本（TRY IT）」「体育館の絵（ILL_GYM）」「吹き出し（.hw-badge）」は、
     この3枚に置き換えて消した。戻すなら git から（cb5aa55 のころ）。
   ⚠ 2026-10-08 に消したもの：STEP 3 PLAY（進み具合 .sa-prog・実施モードの画面・★の札 .stars-note）。実施と★は「できること」にある */
.sa-post{position:absolute;width:96px;height:128px;margin:0;background:#fff;border-radius:10px;box-shadow:0 10px 24px -8px rgba(16,29,40,.35),0 0 0 1px rgba(16,29,40,.05);padding:7px;display:grid;grid-template-rows:11px 1fr 11px;gap:5px;animation:saFloat 6s ease-in-out infinite}
.sa-hd,.sa-ft{display:flex;align-items:center;gap:4px}
.sa-hd i{width:10px;height:10px;border-radius:50%;background:#d9e2ea}
.sa-hd b,.sa-ft b{height:5px;border-radius:3px;background:#e6ecf1;width:42px}
.sa-ft i{width:9px;height:9px;border-radius:50%;border:1.5px solid #c3cfd9}
.sa-ft b{margin-left:auto;width:16px}
.sa-th{position:relative;border-radius:6px;overflow:hidden;background:#dbe6e0}
.sa-th img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sa-th i{position:absolute;left:50%;top:50%;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;background:rgba(255,255,255,.88);color:var(--ink);font-size:10px;font-style:normal;display:grid;place-items:center;padding-left:2px;box-shadow:0 2px 8px rgba(0,0,0,.2)}
.sa-sns{position:absolute;left:-10px;top:-10px;z-index:2}
.sa-sns .sl{position:static;width:26px;height:26px;transform:rotate(-8deg);border-radius:24%;box-shadow:0 0 0 2px #fff,0 5px 12px -4px rgba(16,29,40,.45)}
.sa-sns .sl-yt{transform:rotate(6deg)}
/* 横長の投稿カード（STEP 2 の羅列） */
.sa-row{position:relative;display:flex;align-items:center;gap:9px;margin:0;padding:6px 9px 6px 6px;background:#fff;border-radius:10px;box-shadow:0 10px 24px -10px rgba(16,29,40,.35),0 0 0 1px rgba(16,29,40,.05);animation:saFloat 6s ease-in-out infinite}
.sa-row .sa-sns{left:-9px;top:-9px}
.sa-row .sa-sns .sl{width:22px;height:22px}
.sa-row .sa-th{flex:none;width:58px;height:44px;border-radius:7px}
.sa-row .sa-th i{width:20px;height:20px;margin:-10px 0 0 -10px;font-size:8px}
.sa-row>span:last-child{min-width:0;display:grid;gap:2px}
.sa-row b{font-size:10.5px;line-height:1.35;color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sa-row small{font-size:9px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* 手描きの矢印＋ひとこと */
.sa-go{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;flex:none;width:92px;color:var(--blue)}
.sa-arrow{display:block;width:88px;height:auto;overflow:visible}
.sa-arrow path{fill:none;stroke:currentColor;stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
.sa-go em{font-style:normal;font-size:12px;line-height:1.5;font-weight:800;margin-top:4px;text-align:center;white-space:nowrap;color:var(--ink)}
.sa-burst{position:absolute;width:22px;height:22px;overflow:visible;pointer-events:none}
.sa-burst path{fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round}
.sa-saved{position:absolute;left:-28px;bottom:15%;z-index:3;background:var(--blue);color:#fff;font-size:12px;font-weight:800;padding:8px 14px;border-radius:9px;transform:rotate(-5deg);box-shadow:0 10px 22px -8px rgba(8,123,250,.6);white-space:nowrap}
@keyframes saFloat{50%{translate:0 -5px}}
/* STEP 1：投稿3枚の重なり → 貼り付け → カードの画面 */
.hw-v1{gap:8px}
.sa-pile{position:relative;flex:none;width:176px;height:206px}
.sa-pile .p1{left:40px;top:40px;z-index:2}
.sa-pile .p2{left:0;top:6px;transform:rotate(-10deg);animation-delay:-2s}
.sa-pile .p3{left:80px;top:0;transform:rotate(9deg);animation-delay:-4s}
.sa-pile .b1{left:150px;top:158px;transform:rotate(15deg)}
.hw-front{position:relative;flex:none;transform:rotate(3deg)}
.hw-v1 .dv{--dw:min(220px,calc(var(--hw-h) * .27),19vw)}
/* STEP 2：4本の羅列 → 並べるだけ → メニューの画面 */
/* STEP 2：SNS のロゴがバラバラ → ぜんぶ一覧に → マイボードの画面 */
.hw-v2{gap:10px}
.sa-cloud{position:relative;flex:none;width:170px;height:200px}
.sa-c{position:absolute;animation:saFloat 6s ease-in-out infinite}
.sa-c .sl{position:static;display:grid;width:44px;height:44px;transform:none;box-shadow:0 0 0 3px #fff,0 10px 20px -8px rgba(16,29,40,.45)}
.sa-cloud .c1{left:6px;top:20px;transform:rotate(-12deg)}
.sa-cloud .c2{left:94px;top:0;transform:rotate(8deg);animation-delay:-1.2s}
.sa-cloud .c3{left:56px;top:74px;transform:rotate(-4deg) scale(1.12);animation-delay:-2.4s}
.sa-cloud .c4{left:124px;top:84px;transform:rotate(14deg);animation-delay:-3.6s}
.sa-cloud .c5{left:2px;top:128px;transform:rotate(6deg);animation-delay:-4.8s}
.sa-cloud .c6{left:86px;top:152px;transform:rotate(-10deg);animation-delay:-.6s}
.sa-cloud .b1{left:146px;top:34px;transform:rotate(15deg)}
.hw-v2 .sa-go{width:104px}
.hw-v2 .sa-arrow{width:100px}
.hw-v2 .dv{--dw:min(230px,calc(var(--hw-h) * .28),20vw)}
.hw-v2 .hw-front{transform:rotate(-3deg)}
/* STEP 3：✓ で選んだカード → 組み合わせるだけ → メニューの画面＋「自動生成もできる」 */
.hw-v3{gap:10px}
.sa-feed{display:grid;gap:9px;flex:0 1 196px;min-width:150px}
.sa-feed .sa-row:nth-child(1){transform:rotate(-2deg)}
.sa-feed .sa-row:nth-child(2){transform:rotate(1.5deg);animation-delay:-1.5s}
.sa-feed .sa-row:nth-child(3){transform:rotate(-1.5deg);animation-delay:-3s}
.sa-feed .sa-row:nth-child(4){transform:rotate(2deg);animation-delay:-4.5s}
.sa-row.is-pick{padding-left:18px}
.sa-chk{position:absolute;left:-12px;top:50%;margin-top:-12px;z-index:3;width:24px;height:24px;border-radius:50%;background:#2d9cff;display:grid;place-items:center;box-shadow:0 0 0 2.5px #fff,0 6px 12px -4px rgba(16,29,40,.45)}
.sa-chk svg{width:14px;height:14px;fill:none;stroke:#fff;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
.sa-row.is-pick .sa-sns{left:58px;top:auto;bottom:3px}
.sa-row.is-pick .sa-sns .sl{width:18px;height:18px;transform:none}
.hw-v3 .sa-go{width:112px}
.hw-v3 .sa-arrow{width:110px}
.hw-v3 .dv{--dw:min(230px,calc(var(--hw-h) * .28),20vw)}
.hw-v3 .hw-front{transform:rotate(-3deg)}
.sa-feed{position:relative}
.sa-feed .b1{right:-16px;top:-18px;transform:rotate(15deg)}
.sa-auto{position:absolute;right:-40px;top:-6%;z-index:3;display:flex;align-items:center;gap:6px;background:#fff;color:var(--ink);border:2.5px solid #2d9cff;border-radius:12px;padding:8px 12px;font-size:12px;font-weight:800;line-height:1.3;white-space:nowrap;transform:rotate(6deg);box-shadow:0 12px 24px -10px rgba(8,123,250,.55)}
.sa-auto svg{flex:none;width:18px;height:18px;fill:none;stroke:#8b5cf6;stroke-width:1.8;stroke-linejoin:round}
.ms{--u:calc(var(--dw) / 390);flex:1;min-height:0;position:relative;display:flex;flex-direction:column;overflow:hidden;color:#0e2233;font-family:var(--lp-sans,"Noto Sans JP"),sans-serif;background:#fff;background-image:linear-gradient(to right,rgba(19,180,228,.13) 1px,transparent 1px),linear-gradient(to bottom,rgba(19,180,228,.13) 1px,transparent 1px);background-size:calc(var(--u) * 40) calc(var(--u) * 40)}
.ms-body{flex:1;min-height:0;padding:calc(var(--u) * 22) calc(var(--u) * 26) 0}
.ms-back{font-size:calc(var(--u) * 20);font-weight:700;color:#0a86b4}
.ms-title{font-size:calc(var(--u) * 23);font-weight:800;line-height:1.3;margin:calc(var(--u) * 12) 0 calc(var(--u) * 14)}
.ms-sum{background:#e6f6fc;border-radius:calc(var(--u) * 8);padding:calc(var(--u) * 14) calc(var(--u) * 22);font-size:calc(var(--u) * 20);font-weight:800;color:#0b6e95;line-height:1.5}
.ms-sum b{font-size:calc(var(--u) * 26)}
.ms-sum span{font-weight:700;color:#3a7d99}
.ms-sum small{display:block;font-size:calc(var(--u) * 18);color:#0e2233}
.ms-h{font-size:calc(var(--u) * 22);font-weight:800;margin:calc(var(--u) * 16) 0 calc(var(--u) * 9)}
.ms-row{display:flex;align-items:center;gap:calc(var(--u) * 12);padding:calc(var(--u) * 9) calc(var(--u) * 10);margin-bottom:calc(var(--u) * 8);background:#fff;border:1px solid #dfeaf0;border-radius:calc(var(--u) * 10)}
.ms-row i{flex:none;width:calc(var(--u) * 30);height:calc(var(--u) * 30);border-radius:50%;background:#13b4e4;color:#fff;font-style:normal;font-weight:800;font-size:calc(var(--u) * 17);display:grid;place-items:center;font-family:'DM Sans',sans-serif}
.ms-row img{flex:none;width:calc(var(--u) * 70);height:calc(var(--u) * 52);object-fit:cover;border-radius:calc(var(--u) * 6)}
.ms-row span{min-width:0;display:grid;gap:calc(var(--u) * 2)}
.ms-row b{font-size:calc(var(--u) * 17);line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ms-row small{font-size:calc(var(--u) * 15);color:#6b7c88}
.ms-tab{flex:none;margin-top:auto;display:flex;align-items:center;justify-content:space-around;height:calc(var(--u) * 90);background:#fff;border-top:1px solid #e3edf2;font-size:calc(var(--u) * 16);color:#5d6f7d;font-weight:700}
.ms-tab b{display:grid;place-items:center;width:calc(var(--u) * 60);height:calc(var(--u) * 60);background:#13b4e4;color:#fff;border-radius:calc(var(--u) * 6);font-size:calc(var(--u) * 40);font-weight:400;line-height:1}
.ms-tab .is-on{color:#0a86b4}
/* STEP 2 のマイボードの画面（HTML・.ms と同じ土台）。アプリの /drills と同じ並び：見出し・カード／メニュー／タグ・ことばで探す・絞り込み・枚数・2列のカード */
.mb .ms-body{padding:calc(var(--u) * 18) calc(var(--u) * 20) 0;overflow:hidden}
.mb svg{flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mb-hd{display:flex;align-items:center;justify-content:space-between}
.mb-hd b{font-size:calc(var(--u) * 27);font-weight:900}
.mb-hd svg{width:calc(var(--u) * 24);height:calc(var(--u) * 24);color:#5d6f7d}
.mb-tabs{display:grid;grid-template-columns:repeat(3,1fr);margin:calc(var(--u) * 14) 0 calc(var(--u) * 12);padding:calc(var(--u) * 4);background:#fff;border-radius:calc(var(--u) * 8);box-shadow:0 calc(var(--u) * 2) calc(var(--u) * 10) rgba(16,29,40,.08),0 0 0 1px #e3edf2}
.mb-tabs span{display:grid;place-items:center;height:calc(var(--u) * 40);border-radius:calc(var(--u) * 6);font-size:calc(var(--u) * 15);font-weight:800;color:#5d6f7d;white-space:nowrap}
.mb-tabs .is-on{background:#13b4e4;color:#fff}
.mb-search{display:flex;align-items:center;gap:calc(var(--u) * 8);height:calc(var(--u) * 42);padding:0 calc(var(--u) * 14);background:#fff;border:1px solid #dfe8ee;border-radius:calc(var(--u) * 8);font-size:calc(var(--u) * 14);color:#7d8d99;white-space:nowrap;overflow:hidden}
.mb-search svg{width:calc(var(--u) * 18);height:calc(var(--u) * 18)}
.mb-chips{display:flex;gap:calc(var(--u) * 6);margin-top:calc(var(--u) * 10);overflow:hidden}
.mb-chips i{flex:none;font-style:normal;font-size:calc(var(--u) * 13);font-weight:700;color:#3d4a56;background:#fff;border:1px solid #dfe8ee;border-radius:999px;padding:calc(var(--u) * 5) calc(var(--u) * 11);white-space:nowrap}
.mb-count{display:flex;align-items:center;gap:calc(var(--u) * 4);margin:calc(var(--u) * 12) 0 calc(var(--u) * 8);font-size:calc(var(--u) * 14);font-weight:800;color:#6b7c88}
.mb-count span{margin-right:auto;white-space:nowrap}
.mb-count i{display:grid;place-items:center;width:calc(var(--u) * 30);height:calc(var(--u) * 30);border-radius:calc(var(--u) * 6);color:#8a99a5}
.mb-count i.is-on{background:#e6f6fc;color:#0a86b4}
.mb-count svg{width:calc(var(--u) * 18);height:calc(var(--u) * 18)}
.mb-grid{display:grid;grid-template-columns:1fr 1fr;gap:calc(var(--u) * 12)}
.mb-card{background:#fff;border-radius:calc(var(--u) * 10);overflow:hidden;box-shadow:0 calc(var(--u) * 3) calc(var(--u) * 12) rgba(16,29,40,.1),0 0 0 1px rgba(16,29,40,.05)}
.mb-th{display:block;aspect-ratio:4/3;background:#dbe6e0}
.mb-th img{display:block;width:100%;height:100%;object-fit:cover}
.mb-card b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.7em;margin:calc(var(--u) * 9) calc(var(--u) * 10) 0;font-size:calc(var(--u) * 14);line-height:1.35}
.mb-meta{display:flex;gap:calc(var(--u) * 5);padding:calc(var(--u) * 7) calc(var(--u) * 10) calc(var(--u) * 10)}
.mb-meta i{font-style:normal;font-size:calc(var(--u) * 11);font-weight:800;color:#3d4a56;background:#f0f4f7;padding:calc(var(--u) * 2) calc(var(--u) * 7);white-space:nowrap}
/* STEP 1 のアプリ画面（日本語以外・app.js の CARD_SCREEN）。実機の画面と同じ並び。--u＝画面の幅 390 の 1 */
.as{--u:calc(var(--dw) / 390);flex:1;min-height:0;position:relative;display:flex;flex-direction:column;overflow:hidden;background:#fff;color:#1d2b36;font-family:'DM Sans',var(--lp-sans,'Noto Sans JP'),sans-serif;text-align:left;line-height:1.4}
.as svg{flex:none}
.as-top{position:relative;flex:none}
.as-top img{display:block;width:100%;height:auto;flex:none}
.as-play{position:absolute;left:73.85%;top:82.9%;width:22.05%;height:13.4%;display:flex;align-items:center;justify-content:center;gap:calc(var(--u) * 5);color:#fff;font-size:calc(var(--u) * 14);font-weight:800;white-space:nowrap}
.as-body{padding:calc(var(--u) * 22) calc(var(--u) * 20) 0}
.as-tags{display:flex;gap:calc(var(--u) * 6)}
.as-tags i{font-style:normal;background:#1fb6e9;color:#fff;font-size:calc(var(--u) * 11.5);font-weight:800;padding:calc(var(--u) * 3) calc(var(--u) * 10);line-height:1.3;white-space:nowrap}
.as-title{display:block;margin-top:calc(var(--u) * 9);font-size:calc(var(--u) * 22);font-weight:900;line-height:1.3}
.as-desc{margin:calc(var(--u) * 8) 0 0;font-size:calc(var(--u) * 14);line-height:1.7;color:#5d6b77}
.as-acts{display:grid;grid-template-columns:repeat(4,1fr);margin-top:calc(var(--u) * 20);text-align:center;font-size:calc(var(--u) * 10.5);font-weight:700;color:#5d6b77}
.as-acts span{display:grid;justify-items:center;gap:calc(var(--u) * 6)}
.as-acts i{width:calc(var(--u) * 46);height:calc(var(--u) * 46);display:grid;place-items:center}
.as-acts svg{width:calc(var(--u) * 24);height:calc(var(--u) * 24);fill:none;stroke:#5d6b77;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.as-acts .is-fav{color:#c8103f}.as-acts .is-fav i{background:#fdecef}.as-acts .is-fav svg{fill:#e2104b;stroke:none}
.as-acts .is-done{color:#0a6f99}.as-acts .is-done i{background:#e3f6fc}.as-acts .is-done svg{stroke:#0a6f99}
.as-stats{display:grid;grid-template-columns:repeat(4,1fr);margin-top:calc(var(--u) * 18);box-shadow:0 calc(var(--u) * 2) calc(var(--u) * 10) rgba(16,29,40,.09)}
.as-stats span{display:grid;justify-items:center;gap:calc(var(--u) * 3);padding:calc(var(--u) * 12) calc(var(--u) * 2);border-right:1px solid #eef2f5}
.as-stats b{font-size:calc(var(--u) * 15);font-weight:800;white-space:nowrap}
.as-stats small{display:flex;align-items:center;gap:calc(var(--u) * 3);font-size:calc(var(--u) * 10);color:#7a8794;white-space:nowrap}
.as-stats i{display:flex}.as-stats svg{width:calc(var(--u) * 12);height:calc(var(--u) * 12);fill:none;stroke:currentColor;stroke-width:2}
.as-feel{display:grid;grid-template-columns:repeat(3,1fr);margin-top:calc(var(--u) * 10);text-align:center;font-size:calc(var(--u) * 10);color:#5d6b77;font-weight:700}
.as-feel i{display:flex;justify-content:center;gap:calc(var(--u) * 1);font-style:normal;margin-top:calc(var(--u) * 2)}.as-feel i svg{width:calc(var(--u) * 12);height:calc(var(--u) * 12);fill:#dfe5ea}.as-feel i svg.on{fill:#f5b500}
.as-foot{position:absolute;left:0;right:0;bottom:0;display:flex;gap:calc(var(--u) * 12);padding:calc(var(--u) * 12) calc(var(--u) * 18) calc(var(--u) * 16);background:#fff;border-top:1px solid #e9eef2}
.as-share{width:calc(var(--u) * 54);height:calc(var(--u) * 54);display:grid;place-items:center;border:1px solid #dfe5ea;box-shadow:0 calc(var(--u) * 2) calc(var(--u) * 6) rgba(16,29,40,.08)}
.as-share svg{width:calc(var(--u) * 22);height:calc(var(--u) * 22);fill:none;stroke:#1aa3d6;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.as-foot b{flex:1;display:flex;align-items:center;justify-content:center;gap:calc(var(--u) * 8);background:#1fb6e9;color:#fff;font-size:calc(var(--u) * 15);font-weight:800;white-space:nowrap}
.as-foot b svg{width:calc(var(--u) * 20);height:calc(var(--u) * 20);fill:none;stroke:#fff;stroke-width:2}
@media(max-width:720px){
  .sa-pile{width:128px;height:150px}
  .sa-pile .sa-post{transform-origin:0 0;scale:.72}
  .sa-pile .p1{left:30px;top:30px}
  .sa-pile .p2{left:0;top:4px}
  .sa-pile .p3{left:60px;top:0}
  .sa-pile .b1{left:110px;top:118px}
  .sa-go{width:60px}.sa-arrow{width:56px}.sa-go em{font-size:9px}
  .hw-v1{gap:6px}
  .hw-v1 .sa-go em{translate:-3px 0}   /* 文字が実機の縁に触れないように */
  .sa-saved{left:-14px;font-size:10px;padding:6px 10px}
  .hw-v1 .dv{--dw:min(140px,36vw,calc(var(--hw-h) * .21))}
  /* STEP 2：ロゴのまとまりを小さく → 矢印 → 画面（横並びのまま） */
  .hw-v2{gap:6px}
  .sa-cloud{zoom:.6}
  .hw-v2 .dv{--dw:min(140px,36vw,calc(var(--hw-h) * .21))}
  /* STEP 3 は縦に：選んだカードを2列 → 下向きの矢印 → 画面 */
  .hw-v3{flex-direction:column;gap:6px}
  .sa-feed{flex:none;width:100%;max-width:330px;grid-template-columns:1fr 1fr;gap:8px 16px;min-width:0;padding-left:8px}
  .sa-row{padding:5px 7px 5px 5px;gap:7px}
  .sa-row.is-pick{padding-left:14px}
  .sa-row .sa-th{width:46px;height:36px}
  .sa-row.is-pick .sa-sns{left:43px}
  .sa-chk{width:20px;height:20px;margin-top:-10px;left:-10px}.sa-chk svg{width:12px;height:12px}
  .sa-row b{font-size:9.5px}.sa-row small{font-size:8px}
  .hw-v3 .sa-go{flex-direction:row;gap:6px;width:auto;height:76px;align-items:center}
  .hw-v3 .sa-arrow{width:66px;transform:rotate(90deg)}
  .hw-v3 .sa-go em{margin:0}
  .hw-v3 .dv{--dw:min(176px,46vw,calc(var(--hw-h) * .25))}
  .sa-auto{right:-26px;top:-5%;font-size:10px;padding:6px 9px;gap:4px}.sa-auto svg{width:14px;height:14px}
}
/* いちばん下（app.js が作るフッター）の規約・プライバシーポリシー・権利者の窓口（2026-10-07）。文書は lib/legal.ts、ページは /terms /privacy /legal/notice */
.lp-legal{display:flex;flex-wrap:wrap;gap:16px}.lp-legal a{font-size:10px;color:#748390;text-decoration:underline;text-underline-offset:3px}.lp-legal a:hover{color:var(--blue)}@media(max-width:720px){.lp-legal{gap:12px;font-size:9px;width:100%;order:9}}
/* ヒーロー：見出しの下の2つの文を外した（2026-10-07・ユーザー指示「ここいらない」）ので、ボタンまでの間を詰める */
.hero-actions{margin-top:6px}
@media(max-width:720px){.hero-actions{margin-top:4px}}

/* ===== できること（app.js の FX_VIS・2026-10-07・ユーザー指示「この部分、手抜きだから、イラストやモック用いて作り込んで」）=====
   1枚＝上にモック（方眼の淡い面の上に、アプリと同じ部品）＋下に名前と説明。大きい2枚（自動分析・自動メニュー作成）＋小さい4枚。
   並び … 1280px〜：4列（大きい2枚が1段目を半分ずつ）／〜1279px：2列（大きい2枚は横いっぱい）／〜720px：1列
   大きい2枚の中は「入力 → 手描きの矢印 → 出力」。面が狭いとき（〜480px・@container）は縦に積む。自動メニュー作成は選んだ札だけ残す
   ⚠ モックの中に p・dl・h3 を使わない（.section p・dl>div などの指定が当たって崩れる）。色はアプリの水色 #13b4e4 と、ヒーローの手描きの矢印の色 */
.fx-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:50px}
.fx{display:flex;flex-direction:column;min-width:0;background:#fff;border:1px solid var(--line);border-radius:22px;padding:10px;box-shadow:0 22px 44px -34px rgba(16,29,40,.5);transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s}
.fx:hover{transform:translateY(-4px);box-shadow:0 32px 54px -36px rgba(16,29,40,.55)}
.fx.is-auto,.fx.is-menu{grid-column:1/-1}
@media(min-width:1280px){.fx-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.fx.is-auto,.fx.is-menu{grid-column:span 2}}
.fx-grid .reveal:nth-child(2){transition-delay:.08s}.fx-grid .reveal:nth-child(3){transition-delay:.05s}.fx-grid .reveal:nth-child(4){transition-delay:.12s}.fx-grid .reveal:nth-child(5){transition-delay:.19s}.fx-grid .reveal:nth-child(6){transition-delay:.26s}
.fx-vis{position:relative;height:270px;border-radius:15px;overflow:hidden;background-color:#fff;background-image:var(--pencil,none),var(--paper-grid);background-size:100% 100%,22px 22px,22px 22px;background-repeat:no-repeat,repeat,repeat;background-position:center,0 0,0 0;display:flex;align-items:center;justify-content:center;container-type:inline-size;font-family:var(--lp-sans,"Noto Sans JP"),sans-serif;color:var(--ink);line-height:1.45}
/* 面は色鉛筆で塗った絵（scripts/lp-pencil.py・2026-10-07・ユーザー指示「各カード背景、色鉛筆で塗ったようにして」）。
   白い紙＋方眼の上に、透明の地の色鉛筆の絵を引き伸ばして重ねる＝線のすき間から方眼が見える */
.fx.is-auto .fx-vis{--pencil:url(/lp/ill/pencil-blue-wide-v1.webp)}
.fx.is-menu .fx-vis{--pencil:url(/lp/ill/pencil-pink-wide-v1.webp)}
.fx.is-play .fx-vis{--pencil:url(/lp/ill/pencil-blue-small-v1.webp)}
.fx.is-share .fx-vis{--pencil:url(/lp/ill/pencil-pink-small-v1.webp)}
.fx.is-tag .fx-vis,.fx.is-star .fx-vis{--pencil:url(/lp/ill/pencil-yellow-small-v1.webp)}
.fx-body{padding:18px 14px 12px}
.fx-body h3{display:flex;align-items:center;gap:10px;margin:0 0 8px;font-size:18px}
.fx-body .fi{flex:none;width:32px;height:32px;border-radius:10px}
.fx-body .fi svg{width:18px;height:18px}
.fx-body p{margin:0;font-size:14px!important;line-height:1.9!important}
/* 共通の部品 */
.fx-vis img{display:block}
.fx-paper,.fx-sheet,.fx-form,.fx-mlist,.fx-run,.fx-rev,.fx-link,.fx-search,.fx-tcard{box-shadow:0 16px 32px -14px rgba(16,29,40,.35),0 0 0 1px rgba(16,29,40,.05)}
.fx-hd{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:800;margin-bottom:8px;white-space:nowrap}
.fx-spark{display:inline-grid;place-items:center;flex:none;width:20px;height:20px;border-radius:6px;background:#e3f5fc;color:#0a86b4}
.fx-spark svg,.fx-btn svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round}
.fx-logo{height:11px;width:auto}
.fx-flow{display:flex;align-items:center;justify-content:center;gap:2px;padding:0 12px}
.fx-vis .sa-post{position:relative;flex:none;transform:rotate(-6deg)}
.fx-vis .sa-go{width:68px}.fx-vis .sa-arrow{width:64px}.fx-vis .sa-go em{font-size:11px}
.fx-vis .sa-burst{position:absolute}
/* 自動分析：書き出された項目 */
.fx-sheet{flex:none;width:292px;background:#fff;border-radius:12px;padding:12px 12px 10px;transform:rotate(1.5deg)}
.is-auto .b1{right:6%;top:8%;transform:rotate(18deg)}
/* 自動分析の書き出し：アプリの練習カードと同じ欄（対象・人数・時間・道具）＋用意するもの（アイコン）＋手順＋POINT */
.fx-ok{margin-left:auto;font-style:normal;font-size:8.5px;font-weight:800;color:#13865a;background:#e3f6ee;border-radius:999px;padding:2px 7px}
.fx-stats{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid #e3edf2;border-radius:8px;overflow:hidden;margin-bottom:8px}
.fx-stats>span{display:grid;justify-items:center;gap:1px;padding:6px 2px 5px;border-left:1px solid #e3edf2}
.fx-stats>span:first-child{border-left:0}
.fx-stats i,.fx-tools i{display:block;font-style:normal;color:#0a86b4}
.fx-stats i{width:14px;height:14px}
.fx-stats svg,.fx-tools svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.fx-stats b{font-size:10.5px;font-weight:800;white-space:nowrap}
.fx-stats small{font-size:8px;color:#5d6b77;font-weight:700}
.fx-lbl{font-size:8.5px;font-weight:800;color:#5d6b77;margin:0 0 4px}
.fx-tools{display:flex;gap:5px;margin-bottom:8px}
.fx-tools>span{flex:1;display:flex;align-items:center;gap:4px;padding:4px 6px;background:#f3f8fb;border-radius:7px;font-size:9px;font-weight:700;white-space:nowrap}
.fx-tools i{width:14px;height:14px;flex:none}
.fx-tools b{margin-left:auto;font-family:'DM Sans',sans-serif;font-size:10px;color:#0b6e95}
.fx-steps{list-style:none;margin:0 0 7px;padding:0;display:grid;gap:3px}
.fx-steps li{display:flex;align-items:center;gap:5px;font-size:9.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fx-steps i{flex:none;width:14px;height:14px;border-radius:50%;background:#13b4e4;color:#fff;font-style:normal;font-size:8px;font-weight:800;display:grid;place-items:center;font-family:'DM Sans',sans-serif}
.fx-point{display:flex;align-items:center;gap:6px;font-size:9px;font-weight:700;color:#3d4a56}
.fx-point b{flex:none;font-family:'DM Sans',sans-serif;font-size:7.5px;letter-spacing:.08em;color:#0a6f99;border:1px solid #9fd3ea;border-radius:3px;padding:1px 4px}
/* 自動メニュー作成：条件 → メニュー */
.fx-form{flex:none;width:184px;background:#fff;border-radius:12px;padding:12px;transform:rotate(-1.5deg)}
.fx-grp{margin-bottom:7px}
.fx-grp>span{display:block;font-size:9px;font-weight:700;color:#5d6b77;margin-bottom:4px}
.fx-grp>div{display:flex;gap:4px;flex-wrap:wrap}
.fx-grp b{font-size:9.5px;font-weight:700;padding:3px 8px;border:1px solid #dfe8ef;background:#fff;color:#5d6f7d;border-radius:5px;white-space:nowrap}
.fx-grp b.on{background:#13b4e4;border-color:#13b4e4;color:#fff}
.fx-btn{display:flex;align-items:center;justify-content:center;gap:5px;margin-top:9px;height:28px;background:#13b4e4;color:#fff;font-size:10px;font-weight:800;border-radius:6px;white-space:nowrap}
.fx-mlist{flex:none;width:252px;background:#fff;border-radius:12px;padding:11px;transform:rotate(1.5deg)}
.fx-mrow{display:flex;align-items:center;gap:7px;padding:5px 6px;margin-bottom:5px;border:1px solid #e3edf2;border-radius:8px}
.fx-mrow i,.fx-pl i,.fx-step i{flex:none;display:grid;place-items:center;border-radius:50%;background:#13b4e4;color:#fff;font-style:normal;font-weight:800;font-family:'DM Sans',sans-serif}
.fx-mrow i{width:16px;height:16px;font-size:9px}
.fx-mrow img{flex:none;width:34px;height:26px;object-fit:cover;border-radius:4px}
.fx-mrow b{flex:1;min-width:0;font-size:9.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fx-mrow small{flex:none;font-size:9px;color:#5d6b77;font-weight:700}
.fx-mlist-ft{display:flex;justify-content:flex-end;align-items:baseline;gap:4px;margin-top:3px;font-size:10px;font-weight:700;color:#5d6b77}
.fx-mlist-ft b{font-size:14px;color:#0b6e95}
/* タグで整理 */
.fx-tagbox{width:230px;display:grid;gap:14px}
.fx-search{display:flex;align-items:center;gap:7px;height:34px;padding:0 12px;background:#fff;border-radius:999px;font-size:9.5px;color:#5d6b77;font-weight:700}
.fx-search svg{width:13px;height:13px;stroke:#7b8b97;fill:none;stroke-width:2.2;stroke-linecap:round;flex:none}
.fx-search span{margin-left:auto}
.fx-stack{position:relative;height:156px}
.fx-tcard{position:absolute;inset:0;background:#fff;border-radius:12px;padding:9px;display:flex;flex-direction:column;gap:7px}
.fx-tcard.b1{background:#e9f3fb;transform:rotate(-6deg) translate(-4px,6px)}
.fx-tcard.b2{background:#f4f8fc;transform:rotate(4deg) translate(6px,2px)}
.fx-tcard img{width:100%;height:76px;object-fit:cover;border-radius:7px}
.fx-tcard>b{font-size:10.5px}
.fx-tags{display:flex;gap:4px;flex-wrap:wrap}
.fx-tags i,.fx-search i{font-style:normal;font-size:9.5px;font-weight:800;padding:3px 8px;border-radius:999px;white-space:nowrap}
.fx-vis .t1{background:#e3f1ff;color:#0a5cc0}.fx-vis .t2{background:#ffe3f1;color:#b01f6a}.fx-vis .t3{background:#fff0c7;color:#7d5100}
.fx-tags .add{border:1px dashed #b9c8d4;color:#66737f;background:#fff}
/* 実施モード：残り時間の輪 */
.fx-run{width:222px;background:#fff;border-radius:14px;padding:11px 12px;display:grid;gap:7px}
.fx-run-hd{display:flex;justify-content:space-between;gap:8px;font-size:9.5px;font-weight:800}
.fx-run-hd span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fx-run-hd b{color:#0a86b4;font-family:'DM Sans',sans-serif}
.fx-seg{display:grid;grid-template-columns:repeat(4,1fr);gap:3px}
.fx-seg i{height:4px;border-radius:2px;background:#dfe9ef}
.fx-seg i.d{background:#13b4e4}.fx-seg i.n{background:linear-gradient(90deg,#13b4e4 42%,#dfe9ef 42%)}
.fx-ring{position:relative;width:104px;height:104px;margin:0 auto}
.fx-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.fx-ring circle{fill:none;stroke-width:9}
.fx-ring .tr{stroke:#e3f3fa}.fx-ring .pg{stroke:#13b4e4;stroke-linecap:round}
.fx-ring div{position:absolute;inset:0;display:grid;place-content:center;text-align:center}
.fx-ring small{font-size:8.5px;color:#0b6e95;font-weight:700}
.fx-ring b{font-family:'DM Sans',sans-serif;font-size:26px;line-height:1.1;color:#0b4f6c}
.fx-step{display:flex;gap:6px;align-items:flex-start;font-size:9.5px;font-weight:700}
.fx-step i{width:15px;height:15px;font-size:8.5px}
.fx-ctl{display:grid;grid-template-columns:1fr 2fr;gap:5px}
.fx-ctl span{height:24px;display:grid;place-items:center;font-size:9.5px;font-weight:800;border:1px solid #dfe8ef;border-radius:5px;color:#5d6f7d}
.fx-ctl .on{background:#13b4e4;border-color:#13b4e4;color:#fff}
/* ★でふりかえり */
.fx-rev{position:relative;width:224px;background:#fff;border-radius:14px;padding:12px;transform:rotate(-1.5deg)}
.fx-rev-hd{font-size:12.5px;font-weight:800;margin-bottom:8px}
.fx-rev-hd small{display:block;font-size:8.5px;color:#5d6b77;font-weight:700;margin-top:2px}
.fx-srow{display:flex;align-items:center;justify-content:space-between;padding:6px 0;border-top:1px solid #eef3f6;font-size:10px;font-weight:700;color:#3d4a56}
.fx-st{display:flex;gap:2px}
.fx-st svg{width:15px;height:15px;fill:#e3e9ee}
.fx-st svg.on{fill:#f5b301}
/* 炎（盛り上がり度）は橙・ハート（運動強度）は赤（アプリの FEEL_MARK と同じ色）。線の印は太らせて塗る */
.fx-st svg.k-flame,.fx-st svg.k-heart,.as-feel svg.k-flame,.as-feel svg.k-heart{stroke:currentColor;stroke-width:1.5;stroke-linejoin:round;color:#e3e9ee}
.fx-st svg.on.k-flame,.as-feel svg.on.k-flame{fill:#fb923c;color:#f97316}.fx-st svg.on.k-heart,.as-feel svg.on.k-heart{fill:#fb7185;color:#f43f5e}
.fx-note{margin-top:7px;font-size:9.5px;font-weight:700;background:#f4f8fb;border-radius:8px;padding:7px 9px;color:#3d4a56}
.fx-note b{color:#5d6b77;margin-right:6px}
.is-star .b1{right:-14px;top:-16px;transform:rotate(20deg)}
/* 共有・印刷：URL と、印刷・PDF の紙 */
.fx-share{position:relative;width:236px;height:222px}
.fx-paper{position:absolute;right:0;top:0;width:152px;background:#fff;border-radius:4px;padding:12px 11px 10px;transform:rotate(5deg)}
.fx-paper-hd{position:relative;font-size:8.5px;font-weight:800;padding-right:26px;margin-bottom:7px}
.fx-paper-hd i{position:absolute;right:0;top:0;font-style:normal;font-size:7.5px;font-weight:800;color:#fff;background:#d93a44;border-radius:3px;padding:1px 4px}
.fx-pl{display:flex;gap:5px;align-items:center;font-size:7.5px;padding:5px 0;border-top:1px solid #eef2f5;color:#3d4a56}
.fx-pl i{width:11px;height:11px;font-size:6.5px}
.fx-pl span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fx-pl b{flex:none;color:#5d6b77}
.fx-link{position:absolute;left:0;bottom:0;width:192px;background:#fff;border-radius:12px;padding:10px;transform:rotate(-3deg);display:grid;gap:6px}
.fx-url{display:flex;align-items:center;gap:6px;background:#f2f6f9;border-radius:9px;padding:5px 5px 5px 8px;font-size:9px;color:#3d4a56}
.fx-url svg{width:12px;height:12px;stroke:#0a86b4;fill:none;stroke-width:2.2;stroke-linecap:round;flex:none}
.fx-url span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fx-url b{flex:none;background:#fff;color:#0a6f99;font-size:9px;padding:3px 7px;border-radius:6px}
.fx-send{height:26px;display:grid;place-items:center;background:#13b4e4;color:#fff;font-size:9.5px;font-weight:800;border-radius:8px}
.fx-link small{font-size:8px;color:#5d6b77;text-align:center;font-weight:700}
/* 大きい2枚：面が狭いときは縦に積む */
@container (max-width:480px){
  .fx-flow{flex-direction:column;gap:0;padding:4px 0}
  .fx-flow .sa-go{flex-direction:row;gap:6px;width:auto;height:50px}
  .fx-flow .sa-arrow{width:44px;transform:rotate(90deg)}
  .fx-flow .sa-go em{margin:0}
  .is-auto .sa-post{transform:rotate(-6deg) scale(.86);margin:-6px 0}
  .fx-sheet,.fx-mlist{width:min(270px,94cqw);transform:none}
  .fx-form{width:min(270px,94cqw);transform:none}
  .fx-grps{display:flex;justify-content:space-between;gap:6px}
  .fx-grp{margin:0}
  .fx-grp b:not(.on){display:none}
}
/* 2列のとき（大きい2枚が横いっぱい）は面が広いので、中のモックを少し大きく */
@media(min-width:721px) and (max-width:1279px){
  .fx.is-auto .fx-vis,.fx.is-menu .fx-vis{height:330px}
  .fx.is-auto .fx-flow,.fx.is-menu .fx-flow{zoom:1.22}
}
@media(max-width:720px){
  .fx-grid{grid-template-columns:1fr;gap:14px;margin-top:34px}
  .fx.is-auto,.fx.is-menu{grid-column:auto}
  .fx.is-auto .fx-vis,.fx.is-menu .fx-vis{height:auto;min-height:270px;padding:18px 0}
  .fx-body h3{font-size:17px}
}
/* 3ステップの図：スマホは3枚に切ったものを縦に（横長のままだと字が読めない） */
@media(max-width:720px){
  .hw-flow{margin-top:28px}
  .hw-flow-wide{display:none}
  .hw-flow-steps{display:flex;flex-direction:column;align-items:center;gap:6px}
  .hw-flow-steps img{display:block;width:min(100%,330px);height:auto}
  .hf{flex-direction:column;align-items:center;gap:6px}
  .hf-p{flex:none;width:min(100%,330px);max-width:none;margin-bottom:12%}
  .hf-arrow{width:30px;margin:0;transform:rotate(90deg)}
}

/* ===== 「無料ではじめる」の置き場（2026-10-09・app.js の CTA・光り方とインクは /cta/cta.css）=====
   区切りごと（使い方・できること・みんなの練習のあと）は、ボタンと短い一文を真ん中に。いちばん下は大きく */
.cta-row{display:flex;flex-direction:column;align-items:center;gap:12px;margin:56px auto 0;text-align:center}
.howto+.cta-row,.hw-wrap+.cta-row{margin:40px auto 30px}
.section .cta-row .cta-note,.cta-row .cta-note{margin:0;font-size:13px!important;line-height:1.7;color:var(--muted)}
.closing-cta{position:relative;z-index:1;margin-top:30px}
/* いちばん下は暗い背景（練習の写真が流れる）なので、紺のボタンが沈まないように白いふちと青い光 */
.closing a.cta{box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.6),0 14px 34px -10px rgba(8,123,250,.8)}
/* 右のポッチを外したぶん、左右を少し広く（2026-10-09・ユーザー指示「無料ではじめるの右のポッチいらない」） */
.button.cta{padding-left:36px;padding-right:36px}
.button.small.cta{padding-left:24px;padding-right:24px}
.button.cta-lg{font-size:18px;padding:22px 44px;gap:30px}
@media(max-width:720px){
  .cta-row{margin-top:40px}
  .cta-row .button.cta{width:min(100%,340px)}
  .button.cta-lg{font-size:16px;padding:20px 28px;width:min(100%,340px)}
  .hero-c .hero-actions{flex-direction:column;gap:16px}
  .hero-c .hero-actions .button.cta{width:min(100%,340px)}
}

/* STEP 1〜3 の見出しも、セクションタイトルと同じ英字（Unbounded の小文字・インクの塗り・TechText の枠）に
   （2026-10-07・ユーザー指示「ステップ1、ステップ2、ステップ3も青装飾（セクションタイトル）と同じ装飾に」）。大きさだけ一段小さく */
#more .eyebrow.hw-step{font-size:clamp(24px,2.6vw,38px);margin:0 0 14px;color:var(--blue)}

/* ===== ふわふわ浮かせる（2026-10-07・ユーザー指示「各モック、やアイコン、ふわふわ浮かせるアニメーション追加」）=====
   動かすのは translate だけ（それぞれの傾き＝transform・rotate とは別のプロパティなので重ならない）。
   周期と始まりをずらして、全部が同じ拍子で揺れないようにする。
   「アニメーションを停止」（.motion-off）・「視差効果を減らす」の設定では、既存の指定が animation を止める */
@keyframes lpFloat{0%,100%{translate:0 0}50%{translate:0 var(--fl-y,-7px)}}
.hero-visual .sl,.hv-mock,
.hw-visual .dv,.sa-saved,.sa-auto,
.fx-sheet,.fx-form,.fx-mlist,.fx-run,.fx-rev,.fx-link,.fx-paper,.fx-search,.fx-stack,
.fx-body .fi{animation:lpFloat var(--fl-d,6s) ease-in-out var(--fl-dl,0s) infinite}
.hv-mock{--fl-y:-6px;--fl-d:7.5s}
.hero-visual .sl{--fl-y:-9px;--fl-d:5.2s}
.hero-visual .sl:nth-of-type(2){--fl-dl:-1.1s;--fl-d:5.8s}
.hero-visual .sl:nth-of-type(3){--fl-dl:-2.3s;--fl-d:4.9s}
.hero-visual .sl:nth-of-type(4){--fl-dl:-3.4s;--fl-d:6.1s}
.hero-visual .sl:nth-of-type(5){--fl-dl:-0.6s;--fl-d:5.5s}
.hero-visual .sl:nth-of-type(6){--fl-dl:-2.8s;--fl-d:6.4s}
.hw-visual .dv{--fl-y:-8px;--fl-d:7s}
.hw-v2 .dv{--fl-dl:-2s}.hw-v3 .dv{--fl-dl:-4s}
.sa-saved{--fl-y:-6px;--fl-d:4.6s;--fl-dl:-1s}
.sa-auto{--fl-y:-6px;--fl-d:5s;--fl-dl:-1.5s}
.fx-sheet,.fx-mlist{--fl-d:6.4s;--fl-dl:-1.6s}
.fx-form{--fl-d:5.6s;--fl-dl:-3.2s}
.fx-run{--fl-d:6.2s;--fl-dl:-0.8s}
.fx-rev{--fl-d:5.4s;--fl-dl:-2.2s}
.fx-search{--fl-y:-4px;--fl-d:5s;--fl-dl:-3s}
.fx-stack{--fl-d:6.8s;--fl-dl:-1.2s}
.fx-paper{--fl-y:-5px;--fl-d:7s;--fl-dl:-3.6s}
.fx-link{--fl-d:5.8s;--fl-dl:-0.4s}
.fx-body .fi{--fl-y:-3px;--fl-d:4.2s}
.fx:nth-child(2) .fi{--fl-dl:-0.7s}.fx:nth-child(3) .fi{--fl-dl:-1.4s}.fx:nth-child(4) .fi{--fl-dl:-2.1s}.fx:nth-child(5) .fi{--fl-dl:-2.8s}.fx:nth-child(6) .fi{--fl-dl:-3.5s}

/* ===== できること：実際の動き（app.js の「できること：モックに実際の動き」・2026-10-07）=====
   .is-anim … 最初の形（data-s の付いたものは隠す・選んだ札は選ぶ前の色）。.s1 .s2 … が足されると順に出る。
   .tap … 押したところに指の印と波紋。.s-out … 終わりに全体を薄くしてから最初に戻す。
   ⚠ .is-anim が付いていないとき（動きを止める設定）は、出来上がった形のまま＝この節の指定は何も効かない */
.fx-vis.is-anim [data-s]{opacity:0;translate:0 6px;transition:opacity .35s ease,translate .35s ease}
.fx-vis.is-anim.s1 [data-s="1"],.fx-vis.is-anim.s2 [data-s="2"],.fx-vis.is-anim.s3 [data-s="3"],.fx-vis.is-anim.s4 [data-s="4"],.fx-vis.is-anim.s5 [data-s="5"],.fx-vis.is-anim.s6 [data-s="6"],.fx-vis.is-anim.s7 [data-s="7"],.fx-vis.is-anim.s8 [data-s="8"],.fx-vis.is-anim.s9 [data-s="9"]{opacity:1;translate:0 0}
.fx-vis.is-anim .fx-stats>span:nth-child(2){transition-delay:.08s}.fx-vis.is-anim .fx-stats>span:nth-child(3){transition-delay:.16s}.fx-vis.is-anim .fx-stats>span:nth-child(4){transition-delay:.24s}
.fx-vis>*{transition:opacity .4s ease}
.fx-vis.s-out>*{opacity:0}
/* 押したところ：波紋と指の印 */
.fx-vis .tap{position:relative}
.fx-vis .tap::after{content:"";position:absolute;left:50%;top:50%;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;background:rgba(19,180,228,.38);pointer-events:none;z-index:3;animation:fxTap .6s ease-out forwards}
.fx-vis .tap::before{content:"";position:absolute;left:58%;top:55%;width:20px;height:20px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 3l14 7.5-6.2 1.6L10 18z' fill='%23101d28' stroke='%23fff' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain;pointer-events:none;z-index:4;animation:fxHand .65s ease-out forwards}
@keyframes fxTap{from{scale:.2;opacity:1}to{scale:2.1;opacity:0}}
@keyframes fxHand{0%{opacity:0;translate:8px 8px}25%{opacity:1;translate:0 0}70%{opacity:1}100%{opacity:0}}
/* 自動メニュー作成：選ぶ前の札・押したボタン */
.fx-grp b{transition:background .25s,color .25s,border-color .25s}
.fx-vis.is-anim .fx-grp b.on{background:#fff;border-color:#dfe8ef;color:#5d6f7d}
.fx-vis.is-anim.s1 .fx-grp:nth-child(1) b.on,.fx-vis.is-anim.s2 .fx-grp:nth-child(2) b.on,.fx-vis.is-anim.s3 .fx-grp:nth-child(3) b.on{background:#13b4e4;border-color:#13b4e4;color:#fff}
.fx-btn{transition:scale .15s,box-shadow .3s}
.fx-btn.tap{scale:.96}
.fx-vis.is-anim.s4 .fx-btn{box-shadow:0 0 0 4px rgba(19,180,228,.22)}
/* タグ：探すと後ろのカードが広がる */
.fx-tcard.b1,.fx-tcard.b2{transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.fx-vis.is-anim .fx-tcard.b1,.fx-vis.is-anim .fx-tcard.b2{transform:none}
.fx-vis.is-anim.s4 .fx-tcard.b1{transform:rotate(-6deg) translate(-4px,6px)}
.fx-vis.is-anim.s4 .fx-tcard.b2{transform:rotate(4deg) translate(6px,2px)}
/* ★：行ごとに左から順に付く */
.fx-st svg{transition:fill .2s ease}
.fx-st svg:nth-child(2){transition-delay:.07s}.fx-st svg:nth-child(3){transition-delay:.14s}.fx-st svg:nth-child(4){transition-delay:.21s}.fx-st svg:nth-child(5){transition-delay:.28s}
.fx-vis.is-anim .fx-st svg.on{fill:#e3e9ee}
.fx-vis.is-anim.s1 .fx-srow:nth-child(2) svg.on,.fx-vis.is-anim.s2 .fx-srow:nth-child(3) svg.on,.fx-vis.is-anim.s3 .fx-srow:nth-child(4) svg.on{fill:#f5b301}
/* 共有：コピーした／印刷の紙が出る */
.fx-copy i{font-style:normal}
.fx-copy i+i{display:none}
.fx-vis.is-anim.s1 .fx-copy i:first-child{display:none}
.fx-vis.is-anim.s1 .fx-copy i+i{display:inline}
.fx-paper{transition:opacity .45s ease,scale .45s cubic-bezier(.2,.7,.2,1)}
.fx-vis.is-anim .fx-paper{opacity:0;scale:.86}
.fx-vis.is-anim.s3 .fx-paper{opacity:1;scale:1}


/* ===== ヒーロー：中央に縦に積む（2026-10-07・ユーザー指示「中央寄せで一番上にFIND×SAVE×PLAY ちょっと湾曲させて、デカめにインパクト。
   装飾はセクションタイトルと同じ青インク その下に…手書き。その下にモック」）=====
   上から ① FIND×SAVE×PLAY（弧に沿わせた SVG の文字・塗りはセクションの英字と同じインクの面 ink/tex.webp）
          ② 手書きのコピー（素材の画像を塗り直したもの・scripts/lp-copy-art.py）③ ストアのボタン ④ モック
   ⚠ SNS の小さい並び（.social-line）は隠すだけで消さない（使い方のモックが、ここからロゴの形を借りる＝app.js の snsIcon） */
.hero.hero-c{display:flex;flex-direction:column;align-items:center;text-align:center;min-height:0;padding:30px 5% 56px}
.hero-c .hero-copy{display:flex;flex-direction:column;align-items:center;width:100%}
.hero-c .social-line[hidden]{display:none}
.hero-arc{margin:0;width:min(1120px,100%);line-height:0}
.hero-arc svg{display:block;width:100%;height:auto;overflow:visible}
.ha-text{font-family:Unbounded,var(--lp-sans,"Noto Sans JP"),sans-serif;font-weight:800;font-size:112px;fill:url(#hero-ink) #087bfa}
/* 1文字ずつ打ち込む（セクションの英字のタイプライターと同じ拍子）。⚠ 止める設定では最初から全部出す（下の2行） */
.ha-c{fill-opacity:0;animation:haType .01s steps(1) forwards;animation-delay:calc(.3s + var(--i) * .07s)}
@keyframes haType{to{fill-opacity:1}}
body.motion-off .ha-c{fill-opacity:1}
@media(prefers-reduced-motion:reduce){.ha-c{animation:none;fill-opacity:1}}
.hero-c h1.hero-hand{margin:clamp(-14px,-1vw,-4px) 0 0;line-height:0;font-size:inherit}
.hero-copy-art{display:block;width:min(760px,88vw);height:auto}
.hero-c .hero-actions{justify-content:center;margin:30px 0 4px}
.hero-c .hero-visual.hv-img{width:min(980px,100%);margin:22px auto 0}
@media(max-width:720px){
  .hero.hero-c{padding:18px 5% 40px}
  .hero-c h1.hero-hand{margin-top:2px}
  .hero-c .hero-actions{margin:22px 0 0}
  .hero-c .hero-visual.hv-img{width:108%;margin:16px -4% 0}
}

/* ===== ヒーローのインクと、細かいしぶき（2026-10-07・ユーザー指示「この辺り、インクの装飾、文字にガッツリ被らない程度に入れて。
   細かい飛び散りもっと欲しい。LP全体にも」）=====
   ヒーローは見出しが真ん中に2つあるので、置き場は決め打ち（app.js の PLACES の fixed）。
   大きな飛び散り … 左上（FIND の手前）・右（PLAY と手書きの右）・左下（ボタンとモックの左）。文字の外に本体が来るように
   しぶき（spray-*.webp・scripts/lp-ink.py spray）… 根元が絵の左端にある扇形の粒。右から飛ばすときは左右を反転する。
     根元（濃いところ）は余白に置き、まばらな先だけが文字のそばまで届く */
.ink.spray{width:clamp(320px,34vw,540px);opacity:.9}
.ink.spray-flip,.ink.spray-h-r,.ink.spray-sec-r{transform:scaleX(-1)}
.ink.ink-h-tl{left:-4%;top:-3%;width:clamp(190px,18vw,290px);transform:rotate(-28deg)}
.ink.ink-h-r{right:-5%;top:29%;width:clamp(210px,20vw,330px);transform:rotate(150deg)}
.ink.ink-h-bl{left:2%;top:49%;width:clamp(130px,11vw,180px);transform:rotate(-64deg)}
.ink.spray-h-l{left:0;top:15%}
.ink.spray-h-r{right:0;top:1%}
.ink.spray-h-b{right:1%;bottom:2%;width:clamp(260px,28vw,440px)}
.ink.spray-sec-l{left:0;top:30px;width:clamp(260px,26vw,420px);opacity:.75}
.ink.spray-sec-r{right:0;top:20px;width:clamp(260px,28vw,440px);opacity:.8}
.ink.spray-cta{left:0;bottom:6%;width:clamp(280px,32vw,500px)}
@media(max-width:720px){
  .ink.spray{width:78vw;opacity:.75}
  .ink.ink-h-tl{left:-15%;top:40%;width:34vw}   /* スマホは見出しが横いっぱいなので、「使い方を見る」の左へ */
  .ink.ink-h-r{right:-19%;top:19%;width:36vw}
  .ink.ink-h-bl{display:none}
  .ink.spray-h-l{top:38%}
  .ink.spray-h-r{top:-7%;width:64vw}
  .ink.spray-h-b{width:70vw;bottom:0}
  .ink.spray-sec-l,.ink.spray-sec-r{width:62vw;opacity:.6}
}

/* ===== 探す画面（explore.js）：アプリの「探す」と同じ形（2026-10-07・ユーザー指示「タグや、メニュー切り替えなど、実際の画面に近いもの出したい」）=====
   見本は components/explore/Browse.tsx・components/drill/PlayCard.tsx・components/menu/MenuPlayCard.tsx（アプリの色：塗り #22C3EE・文字 #1F2937・
   面 #F6F7F9・線 #E5E7EB）。カードは「台紙（角丸18px・種目の色のインク）に白いカード（角丸12px）」、ほかの面とボタンは角の無い付箋の形。
   ⚠ すべて #explore で書く（LP 全体の .section p の大きい文字・行の高さに負けないように）
   ⚠ 一覧の上にロゴ（中央・ユーザー指示「投稿一覧の上にplaxのロゴ置いて。中央に」） */
#explore{--ec-fill:#22c3ee;--ec-ink:#1f2937;--ec-ink2:#4b5563;--ec-ink3:#6b7280;--ec-line:#e5e7eb;--ec-surface:#f6f7f9;--ec-brand:#0476a6;
  --ec-shadow:0 1px 1px rgb(15 23 42/.08),0 4px 10px -3px rgb(15 23 42/.2);--ec-shadow-sm:0 1px 1px rgb(15 23 42/.08),0 2px 5px -2px rgb(15 23 42/.2);
  max-width:1180px;margin:0 auto;color:var(--ec-ink);font-family:var(--lp-sans,'Noto Sans JP'),sans-serif}
#explore p{margin:0;font-size:inherit;line-height:inherit;color:inherit}
#explore button{font:inherit;cursor:pointer}
#explore svg{flex:none;display:block}
#explore .ex-logo{display:block;width:fit-content;margin:0 auto 26px}
#explore .ex-logo img{height:46px;width:auto;display:block}
#explore .ec-tabs{display:grid;grid-template-columns:1fr 1fr;background:#fff;padding:4px;box-shadow:var(--ec-shadow);margin-bottom:12px}
#explore .ec-tabs button{height:44px;border:0;background:transparent;font-size:14px;font-weight:700;color:var(--ec-ink2)}
#explore .ec-tabs button[aria-selected="true"]{background:var(--ec-fill);color:#fff}
#explore .ec-search{display:flex;align-items:center;gap:10px;height:48px;padding:0 14px;background:#fff;border:1px solid var(--ec-line);color:var(--ec-ink3);margin-bottom:16px}
#explore .ec-search:focus-within{border-color:var(--ec-fill);box-shadow:0 0 0 3px rgba(34,195,238,.25)}
#explore .ec-search input{flex:1;min-width:0;border:0;outline:none;background:transparent;font:inherit;font-size:15px;color:var(--ec-ink)}
#explore .ec-tagcloud{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-bottom:18px}
#explore .ec-tagcloud:empty{display:none}
#explore .ec-tag{display:flex;align-items:center;gap:8px;height:44px;padding:4px 16px 4px 6px;border:0;border-radius:999px;background:#fff;box-shadow:var(--ec-shadow);font-size:15px;font-weight:700;color:var(--ec-ink)}
/* 札のアイコン＝丸の中をいろんな色のインクで埋めたもの（/ink/tag-<n>-v2.webp・2026-10-09）。練習のサムネイルではない */
#explore .ec-tag span{width:32px;height:32px;flex:none;border-radius:50%;background:#fff center/contain no-repeat}
#explore .ec-tag-more{display:flex;align-items:center;gap:6px;height:44px;padding:0 20px;border:2px solid rgba(34,195,238,.6);border-radius:999px;background:#fff;font-size:14px;font-weight:700;color:var(--ec-brand)}
#explore .ec-chips{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;margin-bottom:10px;scrollbar-width:none}
#explore .ec-chip{display:flex;align-items:center;gap:6px;height:40px;flex:none;padding:0 12px;border:0;background:#fff;box-shadow:var(--ec-shadow-sm);font-size:14px;font-weight:700;color:var(--ec-ink2)}
#explore .ec-chip.on{background:var(--ec-fill);color:#fff}
#explore .ec-chip.on span{display:flex;margin-right:-4px}
#explore .ec-clear{height:40px;flex:none;padding:0 12px;border:0;background:transparent;font-size:14px;font-weight:700;color:var(--ec-brand)}
#explore .ec-pop{background:#fff;box-shadow:var(--ec-shadow);padding:14px 16px 16px;margin:2px 0 14px}
#explore .ec-pop>p{font-size:13px;font-weight:700;color:var(--ec-ink3);margin-bottom:10px}
#explore .ec-pop>div{display:flex;flex-wrap:wrap;gap:8px}
#explore .ec-pop button{min-width:72px;height:44px;padding:0 14px;border:1px solid var(--ec-line);background:#fff;font-size:14px;font-weight:700;color:var(--ec-ink)}
#explore .ec-pop button.on{background:var(--ec-fill);border-color:var(--ec-fill);color:#fff}
#explore .ec-tools-row{display:flex;align-items:center;gap:8px;margin:6px 0 12px}
#explore .ec-tools-row>p,#explore .ec-count{margin-right:auto;font-size:14px;font-weight:700;color:var(--ec-ink3)}
#explore .ec-count{margin-bottom:12px}
#explore .ec-sort{position:relative;display:block}
#explore .ec-sort select{height:40px;appearance:none;-webkit-appearance:none;border:0;background:#fff;box-shadow:var(--ec-shadow-sm);padding:0 32px 0 12px;font:inherit;font-size:14px;font-weight:700;color:var(--ec-ink2);border-radius:0}
#explore .ec-sort svg{position:absolute;right:9px;top:12px;color:var(--ec-ink3);pointer-events:none}
#explore .ec-layout{display:flex;background:#fff;padding:2px;box-shadow:var(--ec-shadow-sm)}
#explore .ec-layout button{width:36px;height:36px;border:0;background:transparent;color:var(--ec-ink3);display:grid;place-items:center}
#explore .ec-layout button[aria-pressed="true"]{background:var(--ec-fill);color:#fff}
/* 並べ方はアプリと同じ（スマホ1列・広い画面2列）。とても広い画面だけ3列（1枚がアプリと同じ幅になる） */
#explore .ec-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
@media(min-width:1300px){#explore .ec-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:640px){#explore .ec-grid{grid-template-columns:minmax(0,1fr)}}
/* 台紙はインクの模様（2026-10-09）。既定はブランドの青のインク（mat-12）。カードは explore.js の matStyle が種目（＝タグ）と同じ色の絵に差し替える */
#explore .ec-frame{display:flex;background:var(--ec-fill) url(/ink/mat-12-v1.webp) center/cover;padding:8px;border-radius:18px;box-shadow:var(--ec-shadow)}
#explore .ec-card{flex:1;background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 1px 2px rgb(15 27 45/.28),0 4px 10px -4px rgb(15 27 45/.38);display:flex;flex-direction:column}
#explore .ec-thumb{position:relative;aspect-ratio:16/9;background:#dfe6ec;overflow:hidden;cursor:pointer;outline:none}
/* 絵は切り抜かない：前に絵そのもの（contain）、後ろに同じ絵をぼかして敷く（アプリの DrillThumb と同じ・設計書 17-1 ③） */
#explore .ec-bg,#explore .ec-fg,#explore .ec-thumb video{position:absolute;inset:0;width:100%;height:100%}
#explore .ec-bg{object-fit:cover;filter:blur(14px) brightness(.9);transform:scale(1.15)}
#explore .ec-fg{object-fit:contain}
#explore .ec-thumb video{object-fit:cover;z-index:1}
#explore .ec-noimg{display:none}
#explore .is-noimg{background:var(--ec-surface)}
#explore .ec-thumb.is-noimg .ec-noimg{position:absolute;inset:0;display:grid;place-items:center;font-size:14px;font-weight:700;color:var(--ec-ink3)}
#explore .ec-sns{position:absolute;right:8px;bottom:8px;z-index:2;width:24px;height:24px}
#explore .ec-slide{position:absolute;inset:0;opacity:0;transition:opacity .5s}
#explore .ec-slide.on{opacity:1}
#explore .ec-thumb:focus-visible{box-shadow:inset 0 0 0 3px var(--ec-brand)}
#explore .ec-badge{position:absolute;left:12px;top:12px;z-index:2;max-width:70%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background:var(--ec-fill);color:#fff;font-size:14px;font-weight:700;padding:4px 10px;border-radius:6px;box-shadow:var(--ec-shadow-sm)}
#explore .ec-rank{position:absolute;right:12px;top:0;z-index:2;width:36px;height:48px;display:flex;flex-direction:column;align-items:center;padding-top:6px;color:#fff;clip-path:polygon(0 0,100% 0,100% 100%,50% 82%,0 100%);box-shadow:var(--ec-shadow-sm)}
#explore .ec-rank b{font-size:14px;font-weight:800;line-height:1}
#explore .ec-rank.r1{background:#e8a800}#explore .ec-rank.r2{background:#9aa5b1}#explore .ec-rank.r3{background:#b9783f}
#explore .ec-play{position:absolute;left:50%;top:50%;z-index:2;width:48px;height:48px;margin:-24px 0 0 -24px;border-radius:50%;background:rgba(0,0,0,.45);color:#fff;display:grid;place-items:center;backdrop-filter:blur(4px);pointer-events:none}
#explore .ec-play svg{transform:translateX(1px)}
#explore .ec-thumb video~.ec-play,#explore .ec-thumb:has(video) .ec-play{opacity:0}
#explore .ec-dur{position:absolute;right:8px;bottom:8px;z-index:2;font-size:11px;font-weight:700;color:#fff;background:rgba(6,16,28,.6);padding:2px 7px;border-radius:6px}
#explore .ec-text{padding:12px 16px 0;cursor:pointer}
/* カードの名前は1行・説明は出さない（2026-10-09・ユーザー指示「タイトルは1行。詳細はいらない」・アプリの PlayCard と同じ） */
#explore .ec-text h3{margin:0;font-size:18px;font-weight:700;line-height:1.4;color:var(--ec-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#explore .ec-meta{margin-top:4px;display:flex;align-items:center;gap:4px;font-size:14px;color:var(--ec-ink2)}
#explore .ec-meta svg{color:var(--ec-brand)}
#explore .ec-src{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:8px;padding:0 8px 0 16px;font-size:12px;color:var(--ec-ink3)}
#explore .ec-src>span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#explore .ec-src>span:last-child{display:flex;align-items:center;flex:none}
#explore .ec-src button,#explore .ec-src a{display:flex;align-items:center;gap:4px;height:36px;padding:0 8px;border:0;background:transparent;font-size:12px;font-weight:700;color:var(--ec-ink2)}
#explore .ec-src a:hover{text-decoration:underline;text-underline-offset:4px}
#explore .ec-src .ec-flag{width:36px;justify-content:center;color:var(--ec-ink3)}
#explore .ec-boxes{display:grid;gap:8px;padding:12px 16px 0}
#explore .ec-feel{display:grid;grid-template-columns:repeat(3,1fr);background:var(--ec-surface)}
#explore .ec-feel>div{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 4px}
#explore .ec-feel>div+div,#explore .ec-facts>div+div{border-left:1px solid var(--ec-line)}
#explore .ec-feel span{font-size:11px;font-weight:700;color:var(--ec-ink3)}
#explore .ec-stars{display:flex;gap:1px}
#explore .ec-stars i{position:relative;display:block;width:13px;height:13px;color:#e5e7eb}
#explore .ec-stars b{position:absolute;left:0;top:0;height:100%;overflow:hidden;color:#fbbf24}
#explore .ec-stars b svg{stroke:#f59e0b}
/* 炎（盛り上がり度）は橙・ハート（運動強度）は赤。アプリの FEEL_MARK（orange-400/500・rose-400/500）と同じ色 */
#explore .ec-stars.k-flame b{color:#fb923c}#explore .ec-stars.k-flame b svg{stroke:#f97316}
#explore .ec-stars.k-heart b{color:#fb7185}#explore .ec-stars.k-heart b svg{stroke:#f43f5e}
#explore .ec-facts{display:grid;grid-template-columns:repeat(3,1fr);background:var(--ec-surface)}
#explore .ec-facts>div{display:flex;align-items:center;justify-content:center;gap:6px;padding:10px 4px;min-width:0}
#explore .ec-facts svg{color:var(--ec-brand)}
#explore .ec-facts span{display:block;min-width:0;font-size:14px;font-weight:700;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#explore .ec-facts small{display:block;font-size:11px;color:var(--ec-ink3)}
#explore .ec-tools{background:var(--ec-surface);padding:10px 12px}
#explore .ec-tools>p{font-size:11px;font-weight:700;color:var(--ec-ink3)}
/* 必要なものは1行（折り返さない・入りきらなければ札の中を「…」で詰める・「ほか◯」は詰めない） */
#explore .ec-tools>div{display:flex;flex-wrap:nowrap;align-items:center;gap:6px;margin-top:6px;min-width:0;overflow:hidden}
#explore .ec-tools>div>span{border:1px solid var(--ec-line);background:#fff;padding:1px 8px;font-size:13px;line-height:20px;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#explore .ec-tools>div>span.ec-more-tools{flex-shrink:0}
#explore .ec-tools b{margin-left:4px;color:var(--ec-ink2)}
#explore .ec-tools>div>span.ec-more-tools{border:0;background:transparent;color:var(--ec-ink3)}
#explore .ec-tools p.ec-none{margin-top:4px;font-size:13px;font-weight:400;color:var(--ec-ink2)}
#explore .ec-acts{display:grid;grid-template-columns:auto 1fr;gap:8px;padding:12px 16px 16px;margin-top:auto}
#explore .ec-save,#explore .ec-add{display:flex;align-items:center;justify-content:center;gap:6px;height:44px;padding:0 16px;font-size:14px;font-weight:700;box-shadow:var(--ec-shadow-sm)}
#explore .ec-save{border:1px solid var(--ec-line);background:#fff;color:var(--ec-ink2)}
#explore .ec-add{border:0;background:var(--ec-fill);color:#fff}
#explore .ec-save:active,#explore .ec-add:active{transform:translateY(1px);box-shadow:none}
#explore .ec-dots{position:absolute;left:0;right:0;bottom:8px;z-index:2;display:flex;justify-content:center;gap:5px}
#explore .ec-dots i{width:6px;height:6px;border-radius:999px;background:rgba(255,255,255,.6)}
#explore .ec-dots i.on{width:16px;background:#fff}
#explore .ec-mlist{background:var(--ec-surface);padding:10px 12px;margin-bottom:16px}
#explore .ec-mlist>p{font-size:11px;font-weight:700;color:var(--ec-ink3)}
#explore .ec-mlist ol{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:6px}
#explore .ec-mlist li{display:flex;align-items:center;gap:8px;font-size:13px;line-height:20px}
#explore .ec-mlist li b{width:20px;flex:none;font-weight:800;color:var(--ec-brand);font-variant-numeric:tabular-nums}
#explore .ec-mi{position:relative;width:48px;aspect-ratio:16/9;border-radius:4px;overflow:hidden;flex:none;background:var(--ec-surface)}
#explore .ec-mmore{margin-top:6px;padding-left:84px;font-size:13px;color:var(--ec-ink3)}
#explore .ec-mlist li span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#explore .ec-mlist li em{flex:none;font-style:normal;color:var(--ec-ink3)}
#explore .ec-rows{display:grid;gap:8px}
#explore .ec-row{display:flex;align-items:center;gap:12px;background:#fff;padding:10px;box-shadow:var(--ec-shadow)}
#explore .ec-rthumb{position:relative;width:80px;height:80px;flex:none;overflow:hidden;background:var(--ec-surface)}
#explore .ec-row b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:15px;line-height:1.4}
#explore .ec-row em{font-style:normal;color:var(--ec-brand);margin-right:4px}
#explore .ec-row small{display:flex;align-items:center;gap:4px;margin-top:4px;font-size:12px;color:var(--ec-ink3)}
#explore .ec-more{display:flex;align-items:center;justify-content:center;width:100%;max-width:320px;height:48px;margin:20px auto 0;border:1px solid var(--ec-line);background:#fff;box-shadow:var(--ec-shadow);font-size:14px;font-weight:700;color:var(--ec-ink2)}
#explore .ec-empty{background:#fff;box-shadow:var(--ec-shadow);padding:40px 24px;text-align:center}
#explore .ec-empty b{font-size:16px}
#explore .ec-empty p{margin-top:8px;font-size:14px;color:var(--ec-ink2)}
#explore .ex-real{text-align:center;margin-top:36px}
#explore .ex-real-btn{display:inline-flex;align-items:center;gap:8px;height:52px;padding:0 26px;background:var(--ec-fill);color:#fff;font-size:15px;font-weight:700;box-shadow:var(--ec-shadow)}
#explore .ex-real-btn:active{transform:translateY(1px);box-shadow:none}
#explore p.ex-note{margin-top:12px;font-size:12px;color:#7a8794}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media(max-width:720px){
  #explore .ex-logo img{height:38px}
  #explore .ec-tag{height:40px;font-size:14px}
  #explore .ec-text h3{font-size:17px}
}
#explore .ec-skel .ec-thumb{background:var(--ec-surface)}
#explore .ec-sk{display:grid;gap:10px;padding:16px}
#explore .ec-sk i{display:block;height:14px;background:var(--ec-surface)}
#explore .ec-sk i:first-child{width:80%;height:20px}#explore .ec-sk i:last-child{height:56px}
#explore a.ec-more{text-decoration:none}
/* ヒーローの飾りは少し控えめに（2026-10-07・ユーザー指示「ヒーローの装飾少しだけ抑えて」）：
   大きな飛び散りを小さく・薄く、しぶきも薄く、左下のしぶき（spray-h-bl）は外した */
.hero .ink{opacity:.7}
.hero .ink.spray{opacity:.55}
@media(max-width:720px){.hero .ink{opacity:.65}.hero .ink.spray{opacity:.5}}

/* ===== 日本語 / English の切り替え（2026-10-07・ユーザー指示「イングリッシュ、ジャパニーズ入れ替えできるようにして」）=====
   上の帯の右（ログインの左）。いまの言葉は黒く塗り、押すともう一方のページ（/lp ⇄ /lp/en）へ。スマホは、もう一方の言葉だけを出す */
/* 言葉の一覧（上の帯・scripts/lp-i18n.py が書く .lang-menu）。地球の印＋いまの言葉を押すと、15の言葉が開く */
.lang-menu{position:relative;margin-right:10px}
.lang-menu summary{list-style:none;display:inline-flex;align-items:center;gap:6px;cursor:pointer;font-size:12px;font-weight:700;line-height:1;color:#3d4954;padding:8px 11px;border:1px solid #dbe3ea;border-radius:999px;background:#fff;white-space:nowrap;user-select:none}
.lang-menu summary::-webkit-details-marker{display:none}
.lang-menu summary::after{content:"";width:6px;height:6px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:translateY(-2px) rotate(45deg);margin-left:2px}
.lang-menu[open] summary::after{transform:translateY(1px) rotate(-135deg)}
.lang-menu summary:hover{color:var(--blue)}
.lang-menu summary b{font-weight:700}
.lang-list{position:absolute;right:0;top:calc(100% + 8px);z-index:60;width:max-content;min-width:180px;max-height:min(70vh,560px);overflow:auto;display:grid;grid-template-columns:1fr 1fr;gap:2px;padding:8px;background:#fff;border:1px solid #e1e8ee;border-radius:14px;box-shadow:0 18px 40px -18px rgba(16,29,40,.35)}
.lang-list a{font-size:13px;font-weight:600;color:#33404b;padding:9px 12px;border-radius:9px;white-space:nowrap}
.lang-list a:hover{background:#f1f6fa;color:var(--blue)}
.lang-list a[aria-current="page"]{background:var(--ink);color:#fff}
@media(max-width:720px){.lang-menu{margin-right:6px}.lang-menu summary{padding:8px 9px;border:0;background:transparent}.lang-menu summary b{display:none}.lang-list{position:fixed;left:12px;right:12px;top:64px;width:auto}}
/* フッターの言葉の並び */
.lp-langs{order:20;flex-basis:100%;display:flex;flex-wrap:wrap;gap:4px 14px;padding-top:14px;border-top:1px solid var(--line)}
.lp-langs a{font-size:11px;color:#748390}.lp-langs a:hover{color:var(--blue)}
.lp-langs a[aria-current="page"]{color:var(--ink);font-weight:700}
/* 英語版のヒーローのコピー：文字で書き、見出しの手書きの絵（headings.js）に入れ替える。大きさは日本語の絵（.hero-copy-art）と同じくらい */
.hero-c h1.hero-hand-en{font-size:clamp(28px,3.2vw,46px);line-height:1.5;margin-top:clamp(-6px,-.4vw,0px)}
.hero-c h1.hero-hand-en .hh{margin:0 auto;object-position:center}
header.hd-tight a.cta{display:none}
@media(max-width:720px){.lang-menu summary::after{display:none}.lang-menu summary{padding:8px 6px}}
/* 頭の図の説明は、ページの段落（.howto p など）の色・行間を受けない */
.hw-flow .hf-p .hf-cap{color:#18222c;line-height:1.32;letter-spacing:0;max-width:none}