.sx-cases{--dark:#0e0f12;--light:#f7f7f5;--ink:#121316;--accent:#ff6a13;--sealed:#19c37d;--attack:#e5383b;--gx:max(24px,6vw);--sans:"Noto Sans JP","Hiragino Sans",sans-serif}.sx-cases *{box-sizing:border-box}.sx-cases,.sx-cases>.sx-b{margin:0}.sx-cases>.sx-b{font-family:var(--sans);-webkit-font-smoothing:antialiased;line-break:strict;background:var(--dark);overflow-x:clip}.sx-cases .sec.dark{background:var(--dark);color:#fff;--sub:#ffffffb8;--mute:#ffffff80;--rule:#ffffff1f}.sx-cases .sec.light{background:var(--light);color:var(--ink);--sub:#121316b8;--mute:#12131680;--rule:#1213161f}.sx-cases h2{font:900 clamp(28px,3.2vw,40px)/1.3 var(--sans);letter-spacing:-.01em;word-break:auto-phrase;margin:0}.sx-cases .lead{font:500 clamp(15px,1.2vw,17px)/1.75 var(--sans);color:var(--sub);margin:14px 0 0}.sx-cases .notes{margin:20px 0 0;padding:0;list-style:none}.sx-cases .notes li{font:500 13.5px/1.8 var(--sans);color:var(--sub);padding-left:20px;position:relative}.sx-cases .notes li:before{content:"※";color:var(--mute);position:absolute;left:0}@keyframes sx-cases-beat{0%{box-shadow:0 0 #19c37d99}70%,to{box-shadow:0 0 0 7px #19c37d00}}.sx-cases .rv{opacity:0;transition:opacity .7s,transform .9s cubic-bezier(.2,.8,.2,1);transform:translateY(20px)}.sx-cases .rv.in{opacity:1;transform:none}@media (prefers-reduced-motion:reduce){.sx-cases .rv{opacity:1;transform:none}.sx-cases *{transition:none!important;animation:none!important}}.sx-cases .sec{padding:clamp(80px,12vh,128px) var(--gx)}.sx-cases .cases{border-top:1px solid var(--rule);margin-top:clamp(36px,6vh,56px)}.sx-cases .cs{border-bottom:1px solid var(--rule);transition-delay:var(--d);grid-template-columns:minmax(0,.9fr) minmax(0,1fr) minmax(0,1.5fr);align-items:center;gap:24px clamp(24px,4vw,64px);padding:clamp(28px,4vh,40px) 0;display:grid}.sx-cases .env{align-items:center;gap:18px;display:flex}.sx-cases .env img{object-fit:contain;filter:drop-shadow(0 8px 20px #00000080);flex:none;width:64px;height:64px}.sx-cases .env img[src*=wordpress],.sx-cases .env img[src*=rails]{filter:brightness(0)invert()}.sx-cases .en{font:900 20px/1.4 var(--sans);margin:0}.sx-cases .st{font:700 12.5px var(--sans);align-items:center;gap:7px;margin:4px 0 0;display:inline-flex}.sx-cases .st i{border-radius:50%;width:7px;height:7px}.sx-cases .st.ok{color:var(--sealed)}.sx-cases .st.ok i{background:var(--sealed)}.sx-cases .st.bt{color:var(--accent)}.sx-cases .st.bt i{background:var(--accent)}.sx-cases .ver .from{font:700 15px var(--sans);color:var(--mute);margin:0}.sx-cases .ver .to{font:900 clamp(34px,3.4vw,52px)/1.1 var(--sans);letter-spacing:-.02em;margin:2px 0 0}.sx-cases .ver .to i{color:var(--accent);margin-right:10px;font-size:.7em;font-style:normal}.sx-cases .tm{align-items:baseline;gap:8px;margin:12px 0 0;display:flex}.sx-cases .tm b{font:900 22px var(--sans);color:#fff}.sx-cases .tm span{font:600 12.5px var(--sans);color:var(--mute)}.sx-cases .mt+.mt{margin-top:16px}.sx-cases .ml{font:600 13px var(--sans);color:var(--sub);margin:0}.sx-cases .mv{font-variant-numeric:tabular-nums;align-items:baseline;gap:10px;margin-top:2px;display:flex}.sx-cases .mv .fr{font:900 30px/1.1 var(--sans);color:#ff6b6e}.sx-cases .mv i{color:var(--mute);font-style:normal;font-weight:700}.sx-cases .mv .to{font:900 30px/1.1 var(--sans);color:var(--sealed)}.sx-cases .bar{background:#ffffff0f;border-radius:3px;height:6px;margin-top:6px;overflow:hidden}.sx-cases .bar i{height:100%;width:var(--w);transform-origin:0;transition:transform 1.4s cubic-bezier(.4,0,.2,1) calc(var(--d) + .4s);background:linear-gradient(90deg,#e5383be6,#e5383b80);border-radius:3px;display:block}.sx-cases .in .bar i{transform:scaleX(0)}.sx-cases .nt{margin:10px 0 0;padding:0;list-style:none}.sx-cases .nt li{font:600 14px/1.6 var(--sans);color:#fff;padding:3px 0 3px 18px;position:relative}.sx-cases .nt li:before{content:"";background:var(--sealed);border-radius:50%;width:8px;height:8px;position:absolute;top:11px;left:0}.sx-cases .mt+.nt,.sx-cases .res>.nt:first-child{margin-top:0}.sx-cases .legend{font:500 13px var(--sans);color:var(--mute);flex-wrap:wrap;gap:8px 28px;margin-top:20px;display:flex}.sx-cases .legend b{color:#ff6b6e}.sx-cases .legend em{color:var(--sealed);font-style:normal;font-weight:800}@media (max-width:900px){.sx-cases .cs{grid-template-columns:1fr}.sx-cases .env img{width:48px;height:48px}}