.brand-explainer{--explainer-step:0;display:grid;grid-template-columns:minmax(230px,.64fr) minmax(420px,1.25fr) minmax(230px,.63fr);gap:2vw;align-items:center;padding:60px var(--pad);min-height:740px;background:#fff;color:#202024;border-top:1px solid #20202426;border-bottom:1px solid #20202426;overflow:hidden}
.brand-explainer-head{align-self:start;padding-top:36px;position:relative;z-index:3}
.brand-explainer-head>span{display:block;font-size:10px;letter-spacing:.12em;margin-bottom:35px}
.brand-explainer-head h2{font-size:clamp(36px,3.7vw,60px);line-height:1.02;letter-spacing:-.055em;font-weight:400;margin:0 0 27px}
.brand-explainer-head p{max-width:31ch;font-size:14px;line-height:1.6}
.brand-explainer-stage{height:min(620px,67vw);min-height:480px;position:relative;isolation:isolate;perspective:1100px}
.brand-explainer-halo{position:absolute;width:76%;height:78%;left:10%;top:9%;border:1px solid #20202427;border-radius:50%;transform:rotateX(58deg) rotateZ(-21deg)}
.brand-explainer-halo:after{content:'';position:absolute;inset:11%;border:1px solid #20202416;border-radius:50%}
.brand-explainer-character{position:absolute;z-index:1;left:5%;top:2%;width:68%;height:90%;object-fit:cover;object-position:50% 42%;mix-blend-mode:multiply;filter:drop-shadow(22px 20px 20px #20202412);transform:translate3d(0,0,28px) rotateY(-4deg);transition:transform .75s cubic-bezier(.2,.7,.2,1)}
.page-work .brand-explainer-character{left:3%;top:2%;width:min(73%,456px);height:auto;max-width:none;object-fit:contain;mix-blend-mode:normal;box-shadow:18px 25px 38px #2020241e}
.brand-explainer-stage:hover .brand-explainer-character{transform:translate3d(-8px,-6px,34px) rotateY(1deg)}
.brand-explainer-mark{position:absolute;z-index:3;top:12%;right:5%;font-size:clamp(14px,1.5vw,22px);letter-spacing:.13em;writing-mode:vertical-rl}
.brand-explainer-mark span{display:block;margin-top:15px;color:#a3d700}
.brand-explainer-preview{position:absolute;z-index:2;width:47%;height:43%;right:0;bottom:9%;background:#fff;box-shadow:18px 25px 42px #20202424;border:8px solid #fff;transform:translate3d(0,0,90px) rotateY(-9deg) rotateZ(3deg);transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.brand-explainer-stage:hover .brand-explainer-preview{transform:translate3d(-7px,-12px,95px) rotateY(-2deg) rotateZ(1deg)}
.brand-explainer-preview img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.08);transition:opacity .55s,transform .8s}
.brand-explainer-preview img.is-active{opacity:1;transform:scale(1)}
.page-work .brand-explainer-preview{width:38%;height:auto;aspect-ratio:4/5;right:7%;bottom:6%}
.page-work .brand-explainer-preview img{object-fit:contain;background:#fff}
.page-web-interactive .brand-explainer-preview img:not(:first-child){object-fit:contain;background:#fff}
.brand-explainer-preview span{position:absolute;z-index:2;left:0;bottom:0;padding:9px 11px;background:#c9ff1b;font-size:9px;letter-spacing:.08em;opacity:0}
.brand-explainer-preview span.is-active{opacity:1}
.brand-explainer-axis{position:absolute;z-index:-1;right:4%;top:16%;width:28%;height:70%;background:#c9ff1b;clip-path:polygon(75% 0,100% 0,25% 100%,0 100%)}
.brand-explainer-steps{align-self:center;position:relative;z-index:3}
.brand-explainer-steps button{display:grid;grid-template-columns:25px 1fr 18px;gap:0 11px;width:100%;padding:23px 5px;border:0;border-top:1px solid #20202435;background:transparent;color:inherit;text-align:left;font:inherit;cursor:pointer;transition:padding .3s,background .3s}
.brand-explainer-steps button:last-child{border-bottom:1px solid #20202435}
.brand-explainer-steps button:hover,.brand-explainer-steps button[aria-pressed=true]{padding-left:12px;background:#f7ffe7}
.brand-explainer-steps button:focus-visible{outline:2px solid #202024;outline-offset:2px}
.brand-explainer-steps button>span{font-size:10px;padding-top:4px}
.brand-explainer-steps strong{font-size:18px;font-weight:400;letter-spacing:-.02em}
.brand-explainer-steps small{grid-column:2;font-size:12px;line-height:1.5;margin-top:9px;max-width:24ch}
.brand-explainer-steps b{grid-column:3;grid-row:1;font-weight:400}
@media(max-width:1000px){.brand-explainer{grid-template-columns:.75fr 1.25fr;gap:0 3vw}.brand-explainer-head{grid-column:1}.brand-explainer-stage{grid-column:2;grid-row:1/3}.brand-explainer-steps{grid-column:1;grid-row:2}.brand-explainer-head h2{font-size:42px}}
@media(max-width:767px){.brand-explainer{display:block;min-height:0;padding:48px 20px 52px}.brand-explainer-head{padding:0}.brand-explainer-head>span{font-size:9px;margin-bottom:20px}.brand-explainer-head h2{font-size:39px;margin-bottom:17px}.brand-explainer-head p{font-size:14px;max-width:34ch}.brand-explainer-stage{height:370px;min-height:0;margin:12px -12px 20px}.brand-explainer-halo{width:70%;height:65%;left:15%;top:17%}.brand-explainer-character{left:4%;top:1%;width:72%;height:94%;object-position:50% 39%}.brand-explainer-preview{right:5%;bottom:6%;width:46%;height:41%;border-width:5px;box-shadow:8px 13px 25px #20202425}.brand-explainer-mark{right:6%;font-size:12px}.brand-explainer-steps{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid #20202435}.brand-explainer-steps button{display:block;padding:13px 5px 8px;border:0;border-bottom:1px solid #20202435;min-height:64px}.brand-explainer-steps button:hover,.brand-explainer-steps button[aria-pressed=true]{padding-left:5px;background:#c9ff1b}.brand-explainer-steps button>span{display:block;font-size:8px}.brand-explainer-steps strong{display:block;margin-top:6px;font-size:12px}.brand-explainer-steps small,.brand-explainer-steps b{display:none}}
@media(max-width:767px){.page-work .brand-explainer-character{left:4%;top:1%;width:min(72%,285px);height:auto}.page-work .brand-explainer-preview{right:3%;bottom:5%;width:38%;height:auto;aspect-ratio:4/5;border-width:5px}}
@media(prefers-reduced-motion:reduce){.brand-explainer-character,.brand-explainer-preview,.brand-explainer-preview img{transition:none}.brand-explainer-stage:hover .brand-explainer-character{transform:translate3d(0,0,28px)}.brand-explainer-stage:hover .brand-explainer-preview{transform:translate3d(0,0,90px)}}