.cmp-win{border:2px solid #f5f5f0;background:#f5f5f0}.cmp-chrome{display:flex;align-items:center;gap:7px;padding:10px 14px;background:#f5f5f0;color:#0b0b0b;font-size:12px}.cmp-chrome i{width:10px;height:10px;border-radius:50%;background:#0b0b0b;opacity:.25}.cmp-chrome span{margin-left:10px;padding:3px 14px;border-radius:999px;background:#fff;border:1px solid #cfcfc8;font-family:Space Grotesk,sans-serif}.cmp-chrome em{margin-left:auto;font-style:normal;font-weight:700;font-size:12px}.cmp{position:relative;aspect-ratio:1360 / 860;overflow:hidden;user-select:none;-webkit-user-select:none;container-type:inline-size}.cmp p{margin:0}.cmp-a,.cmp-b{position:absolute;inset:0;overflow:hidden}.cmp-b{clip-path:inset(0 0 0 var(--x))}.cmp-a{background:#fff url(/assets/site/compare-before.webp) 50% 43.64% / 105.69% auto no-repeat}.cmp-b{background:#0b0b0b url(/assets/site/compare-after.webp) 50% 67.26% / 106.47% auto no-repeat}.cmp-tag{position:absolute;bottom:12px;z-index:3;padding:6px 14px;border-radius:999px;font-size:13px;font-weight:900;pointer-events:none;transition:opacity .25s;font-family:Zen Kaku Gothic New,sans-serif}.cmp.all-b .cmp-tag.l,.cmp.all-a .cmp-tag.r{opacity:0}.cmp-tag.l{left:12px;background:#374151;color:#fff}.cmp-tag.r{right:12px;background:#e6ff00;color:#0b0b0b}.cmp-bar{position:absolute;top:0;bottom:0;left:clamp(34px,var(--x),calc(100% - 34px));z-index:4;width:4px;margin-left:-2px;background:#e6ff00;pointer-events:none;box-shadow:0 0 24px #e6ff00b3}.cmp-bar i{position:absolute;left:50%;top:24%;width:60px;height:60px;margin:-30px 0 0 -30px;display:grid;place-items:center;border-radius:50%;background:#e6ff00;color:#0b0b0b;font-style:normal;font-size:24px;font-weight:900;box-shadow:0 0 0 6px #0b0b0b59;animation:cmp-knob 1.8s ease-in-out infinite}@keyframes cmp-knob{50%{transform:scale(1.12)}}.cmp.used .cmp-bar i{animation:none}.cmp.all-a .cmp-bar,.cmp.all-b .cmp-bar{background:transparent;box-shadow:none}.cmp-range{position:absolute;inset:0;z-index:5;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;touch-action:pan-y}.cmp:has(.cmp-range:focus-visible){outline:3px solid #e6ff00;outline-offset:4px}.cmp-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px}.cmp-hint{margin:0;font-size:14px;font-weight:700;color:#e6ff00}.cmp-btns{display:inline-flex;flex-wrap:wrap;gap:4px;border:2px solid #f5f5f0;border-radius:999px;padding:4px}.cmp-btns button{font:inherit;font-weight:700;font-size:14px;border:0;border-radius:999px;padding:10px 18px;cursor:pointer;background:transparent;color:#f5f5f0;transition:background .2s,color .2s}.cmp-btns button:hover,.cmp-btns button.on{background:#f5f5f0;color:#0b0b0b}.cmp-points{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);border-top:2px solid #f5f5f0}.cmp-points li{display:flex;flex-direction:column;gap:6px;padding:22px 24px 4px 0}.cmp-points li+li{padding-left:24px;border-left:2px solid #3a3a36}.cmp-points small{font-size:12px;font-weight:700;letter-spacing:.12em;color:#e6ff00}.cmp-points s{font-size:15px;color:#bdbdb6;text-decoration-thickness:2px}.cmp-points b{font-size:clamp(18px,1.9vw,26px);font-weight:900;line-height:1.4}.cmp-points b:before{content:"\2192  ";color:#e6ff00}.ind{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,4vw,64px);align-items:center}.ind-list{display:flex;flex-direction:column;border-top:3px solid #0b0b0b}.ind-tab{position:relative;display:block;width:100%;text-align:left;font:inherit;color:#0b0b0b;background:transparent;border:0;border-bottom:3px solid #0b0b0b;padding:20px 22px;cursor:pointer;overflow:hidden;transition:background .3s,color .3s,padding .3s}.ind-name{display:block;font-size:clamp(28px,3.8vw,58px);font-weight:900;line-height:1.15;letter-spacing:-.03em;transition:color .3s}.ind-tab:not(.on):hover{padding-left:34px}.ind-tab.on{background:#0b0b0b;color:#f5f5f0}.ind-tab.on .ind-name{color:#e6ff00}.ind-more{display:grid;grid-template-rows:0fr;grid-template-columns:1fr;transition:grid-template-rows .45s cubic-bezier(.2,.8,.2,1)}.ind-in{display:block;min-height:0;overflow:hidden}.ind-tab.on .ind-more{grid-template-rows:1fr}.ind-desc{display:block;font-size:16px;font-weight:700;line-height:1.7;padding-top:10px}.ind-goal{display:block;font-size:14px;line-height:1.7;color:#dadad3;padding-top:10px}.ind-goal small{display:block;font-size:11px;font-weight:700;letter-spacing:.12em;color:#e6ff00}.ind-prog{position:absolute;left:0;bottom:0;height:4px;width:100%;background:#e6ff00;transform:scaleX(0);transform-origin:0 50%}.ind.auto .ind-tab.on .ind-prog{animation:ind-prog 6s linear both}@keyframes ind-prog{to{transform:scaleX(1)}}.ind-any{margin:16px 0 0;font-size:15px;font-weight:900}.ind-stage{position:relative;justify-self:center;width:min(100%,75.582vh);aspect-ratio:1240 / 1280;background:#fff;border:3px solid #0b0b0b;box-shadow:14px 14px #0b0b0b;rotate:1.2deg;overflow:hidden;transition:rotate .6s cubic-bezier(.2,.8,.2,1)}.ind-stage[data-on="1"]{rotate:-1.4deg}.ind-stage[data-on="2"]{rotate:.8deg}.ind-shot{position:absolute;inset:0;margin:0;clip-path:inset(0 0 100% 0);transition:clip-path 0s .75s}.ind-shot img{display:block;width:100%;height:100%;object-fit:contain;scale:1.08;transition:scale .9s cubic-bezier(.2,.8,.2,1)}.ind-shot.on{z-index:2;clip-path:inset(0 0 0 0);transition:clip-path .75s cubic-bezier(.7,0,.2,1)}.ind-shot.on img{scale:1}@media (max-width: 860px){.cmp-chrome em{display:none}.cmp-bar i{width:46px;height:46px;margin:-23px 0 0 -23px;font-size:18px}.cmp-tag{bottom:10px}.cmp-btns button[data-to="50"]{display:none}.cmp-hint{font-size:12px}.cmp-points{grid-template-columns:1fr}.cmp-points li,.cmp-points li+li{padding:16px 0 4px;border-left:0}.cmp-points li+li{border-top:2px solid #3a3a36}.ind{grid-template-columns:1fr}.ind-stage{width:100%;box-shadow:8px 8px #0b0b0b}}@media (prefers-reduced-motion: reduce){.cmp-bar i,.ind-prog{animation:none!important}.ind-shot,.ind-shot img,.ind-more{transition:none}}.ind-tab{padding:13px 22px}.ind-name{font-size:clamp(24px,2.9vw,44px)}.ind-stage{background:#faf8f3}.ind-stage[data-on="3"]{rotate:-.9deg}.ind-stage[data-on="4"]{rotate:1.3deg}.ind-stage[data-on="5"]{rotate:-1.2deg}
