/* LP制作：お店のページが組み上がり、3つの形で部品が増える */
.lphero-s .vis{width:100%;max-width:560px;margin:0 auto}
.bmock{border:3px solid var(--ink);border-radius:22px;background:#fff;overflow:hidden;box-shadow:12px 12px 0 var(--ink)}
.bmock .bb{display:flex;align-items:center;gap:7px;padding:11px 14px;background:#eceef1;border-bottom:3px solid var(--ink)}.bmock .bb i{width:11px;height:11px;border-radius:50%;background:#c3c7ce}.bmock .bb .url{flex:1;height:14px;border-radius:7px;background:#fff;margin-left:8px}
.bbody{padding:14px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.bbody .m{border-radius:12px;background:#eef0f3;min-height:54px;display:flex;align-items:center;justify-content:center;padding:6px;text-align:center;font-size:13px;opacity:0;transform:translateY(16px);transition:opacity .5s var(--ease),transform .5s var(--ease),background .4s,box-shadow .4s}
.bbody .m b{font-size:13px}.bbody .m.hero{grid-column:1/-1;min-height:110px;background:linear-gradient(120deg,#d8dbe0,#eef0f3)}.bbody .m.p{background:#e1e4e9}.bbody .m.p:nth-child(n+2){}
.bbody .m.x{display:none;background:#fff;border:2px solid var(--red);color:var(--red);grid-column:span 2}
.in .bbody .m,.bmock.sel .bbody .m,.rm .bbody .m{opacity:1;transform:none}.lphero.in .bbody .m{transition-delay:calc(var(--i)*110ms)}
.bmock.auto .bbody .m.x{display:flex;animation:xin 8s ease-in-out infinite;animation-delay:calc(var(--i)*.5s)}
.bmock.auto .bbody .m.x.vr{animation-name:xvr}.bmock.auto .bbody .m.x.fd{display:none}.bmock.auto .bbody .m.x.dm,.bmock.auto .bbody .m.x.ds,.bmock.auto .bbody .m.x.gm{display:none}
@keyframes xvr{0%,15%{opacity:0;transform:scale(.8)}25%,90%{opacity:1;transform:none}100%{opacity:0}}
/* 3つの形：選ぶと部品が変わる */
.forms{margin-top:30px}.fgrid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:50px;margin-top:26px;align-items:start}
.fview .bmock{box-shadow:10px 10px 0 var(--red)}
.forms[data-now="0"] .m.x.vr,.forms[data-now="0"] .m.x.gm,.forms[data-now="1"] .m.x.vr,.forms[data-now="1"] .m.x.gm,.forms[data-now="1"] .m.x.dm{display:flex}
.forms[data-now="2"] .m.x.fd,.forms[data-now="2"] .m.x.ds,.forms[data-now="2"] .m.x.dm,.forms[data-now="2"] .m.x.gm{display:flex}
.forms[data-now="2"] .m.p,.forms[data-now="2"] .m.hero{background:#14161a;color:#fff}
.forms[data-now="1"] .m.x.gm{animation:none}
.fp h3{font-size:clamp(28px,3.2vw,44px);margin-bottom:8px}.fp .for{margin-top:18px;background:#fff;border-radius:18px;padding:14px 18px;border:2px solid var(--ink);font-weight:700}.fp .for span{display:block;font-size:12px;color:var(--red);letter-spacing:.1em;margin-bottom:2px}
.fp{animation:fpin .5s var(--ease)}@keyframes fpin{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
/* 事例 */
.cg.lpc{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}.cg.lpc .cc{min-height:200px}.cg.lpc .cc:nth-child(n){margin-top:0}.cg.lpc .cc h3{font-size:19px;margin:6px 0}
/* 組み合わせ */
.merge{display:flex;align-items:center;gap:0}.merge .mn{flex:none;width:150px;padding:22px 14px;border:3px solid var(--ink);border-radius:26px;background:#fff;text-align:center;box-shadow:8px 8px 0 var(--ink)}.merge .mn b{display:block;font:900 20px var(--disp)}.merge .mn small{color:var(--gray);font-size:13px}.merge .mn.b{background:var(--red);color:#fff;border-color:var(--red);box-shadow:8px 8px 0 #a3092a}.merge .mn.b small{color:#fff}
.merge svg{flex:1;min-width:60px;height:40px}.merge line{stroke:var(--red);stroke-width:4;stroke-dasharray:300;stroke-dashoffset:300;transition:stroke-dashoffset 1.2s var(--ease)}.merge.in line{stroke-dashoffset:0}.rm .merge line{stroke-dashoffset:0}.merge circle{fill:var(--red)}
@media(max-width:1024px){.fgrid{grid-template-columns:minmax(0,1fr)}.cg.lpc{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:820px){.cg.lpc{grid-template-columns:minmax(0,1fr)}.bbody{grid-template-columns:repeat(2,minmax(0,1fr))}.merge .mn{width:120px}}