.roof-renewal{padding-bottom:90px}.roof-renewal h2 em{font-weight:400;color:#a55232}.roof-compare{position:relative;aspect-ratio:3/2;max-height:680px;isolation:isolate;overflow:hidden;background:#d9ddd3}.roof-compare>img,.roof-before,.roof-before img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.roof-before{clip-path:inset(0 calc(100% - var(--before)) 0 0)}.compare-tag{position:absolute;top:25px;background:#f5f3eef2;color:#263029;padding:9px 15px;font-size:12px;letter-spacing:.12em;pointer-events:none}.compare-old{left:25px}.compare-new{right:25px;background:#263b30ed;color:#fff}.roof-compare-line{position:absolute;left:var(--before);top:0;bottom:0;width:2px;background:#fff;transform:translateX(-1px);pointer-events:none;box-shadow:0 0 18px #0004}.roof-compare-line>span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;gap:11px;width:62px;height:62px;border-radius:50%;background:#f5f3ee;color:#263b30;box-shadow:0 4px 25px #0003;font:26px Arial}.roof-compare-line i{display:block;width:2px;height:21px;background:#b95733}.roof-compare input{position:absolute;inset:0;margin:0;width:100%;height:100%;opacity:0;cursor:ew-resize;touch-action:pan-y;z-index:5}.roof-compare:focus-within{outline:3px solid #b95733;outline-offset:6px}.roof-compare-caption{display:flex;justify-content:space-between;gap:15px;margin-top:18px;font-size:13px;color:#65705f}.roof-compare-caption span{text-align:right;max-width:340px}
.roof-compare{width:100%;height:min(53vw,680px);aspect-ratio:auto}
@media(max-width:700px){.roof-renewal{padding-bottom:55px}.roof-compare{height:auto;aspect-ratio:1/1;max-height:none}.compare-tag{top:14px;font-size:10px;padding:7px 10px}.compare-old{left:14px}.compare-new{right:14px}.roof-compare-line>span{width:48px;height:48px;gap:7px}.roof-compare-caption{display:block;font-size:12px}.roof-compare-caption span{display:block;text-align:left;margin-top:9px;max-width:none}}