.hero-vivo{--hv-hd: 0px;--hv-total: clamp(380px, 31.25vw, 560px);--hv-stage: calc(var(--hv-total) - var(--hv-hd));--hv-gutter: calc((100% - min(100%, var(--page-width, 1200px)))/2 + clamp(1rem, 4vw, 2.5rem)) ;position:relative;isolation:isolate;display:block;height:var(--hv-total);overflow:hidden;color:var(--text-on-dark);background:#0d0e12}body:has(#header-component[transparent]) .hero-vivo{--hv-hd: var(--header-height, 118px)}.hero-vivo:before{content:"";position:absolute;z-index:3;inset:0 0 auto;height:170px;background:linear-gradient(#0000008c,#0000);pointer-events:none}.hero-vivo__slide{position:absolute;top:0;right:0;bottom:0;left:0;visibility:hidden;opacity:0;background:linear-gradient(90deg,var(--hv-a, #050507) 0%,var(--hv-b, #161922) 100%);transition:opacity .7s,visibility .7s}.hero-vivo__slide.is-active{visibility:visible;opacity:1}.hero-vivo__text,.hero-vivo__note{opacity:0;transition:opacity .15s}.hero-vivo__text{transform:translateY(10px);transition:opacity .15s,transform .15s}.hero-vivo__slide.is-active .hero-vivo__text,.hero-vivo__slide.is-active .hero-vivo__note{opacity:1;transition:opacity .35s .25s,transform .35s .25s}.hero-vivo__slide.is-active .hero-vivo__text{transform:none}.hero-vivo__box{position:absolute;top:0;right:0;bottom:0;left:0}.hero-vivo__img{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;object-position:right center;transform-origin:calc(var(--xn) * 100%) calc(var(--yn) * 100%)}.hero-vivo__slide.is-active .hero-vivo__img{animation:hero-vivo-zoom 14s ease-out forwards}.hero-vivo.is-paused .hero-vivo__img{animation-play-state:paused}@keyframes hero-vivo-zoom{0%{transform:scale(1)}to{transform:scale(1.07)}}.hero-vivo__text{position:absolute;z-index:2;top:var(--hv-hd);left:var(--hv-gutter);display:flex;flex-direction:column;align-items:flex-start;justify-content:center;width:min(540px,42vw);height:calc(var(--hv-stage) - 68px)}.hero-vivo__title{margin:0;color:inherit;font-family:var(--font-heading--family);font-size:clamp(34px,3.7vw,56px);font-weight:800;line-height:1.08;letter-spacing:-.01em;text-transform:none}.hero-vivo__p{max-width:430px;margin:12px 0 0;color:#eceef2;font-size:clamp(15px,1.25vw,18px);line-height:1.55}.hero-vivo__text .button{margin-top:20px}.hero-vivo__box{container-type:size;--art-w: max(100cqw, 100cqh * 3.2);--art-h: max(100cqh, 100cqw / 3.2);--art-top: calc(50cqh - var(--art-h) / 2)}@media screen and (min-width:750px)and (max-width:1279px){.hero-vivo__box{--art-w: min(100cqw, 100cqh * 3.2);--art-h: calc(var(--art-w) / 3.2);--art-top: calc(100cqh - var(--art-h))}.hero-vivo__img{object-fit:contain;object-position:right bottom;-webkit-mask-image:linear-gradient(to bottom,transparent calc(100% - var(--art-h)),#000 calc(100% - var(--art-h) + 70px));mask-image:linear-gradient(to bottom,transparent calc(100% - var(--art-h)),#000 calc(100% - var(--art-h) + 70px))}.hero-vivo__text{width:min(540px,38vw)}.hero-vivo__title{font-size:clamp(26px,3vw,40px)}.hero-vivo__p{font-size:14px}}@media screen and (min-width:750px)and (max-width:1023px){.hero-vivo__box{--art-w: min(100cqw, (100cqh - 84px) * 3.2);--art-top: calc(100cqh - 84px - var(--art-h))}.hero-vivo__img{height:calc(100% - 84px);-webkit-mask-image:linear-gradient(to bottom,transparent calc(100% - var(--art-h)),#000 calc(100% - var(--art-h) + 70px),#000 calc(100% - 40px),transparent);mask-image:linear-gradient(to bottom,transparent calc(100% - var(--art-h)),#000 calc(100% - var(--art-h) + 70px),#000 calc(100% - 40px),transparent)}}.hero-vivo__note{position:absolute;z-index:3;--ny: calc(var(--art-top) + var(--yn) * var(--art-h));top:var(--ny);left:calc(100cqw - (1 - var(--xn)) * var(--art-w));width:0;height:0}.hero-vivo__dot{position:absolute;top:-5px;left:-5px;width:10px;height:10px;border-radius:50%;background:#fff;box-shadow:0 0 0 4px #ffffff4d}.hero-vivo__tag{position:absolute;top:0;left:5px;display:block;width:calc((.82 - var(--xn)) * var(--art-w) + 11px);height:0;border-top:1px solid rgb(255 255 255 / .9);color:var(--text-on-dark);text-decoration:none}.hero-vivo__lab{position:absolute;top:50%;left:100%;display:flex;flex-direction:column;justify-content:center;gap:2px;min-height:116px;transform:translateY(calc(-50% + clamp(calc(var(--hv-hd) + 74px - var(--ny)),0px,calc(100cqh - 142px - var(--ny)))));width:max-content;max-width:min(340px,calc(.18 * var(--art-w) - 24px));padding:12px;background:#090a0ddb;font-size:13px;line-height:1.35;text-align:left}.hero-vivo__nm{display:-webkit-box;overflow:hidden;font-weight:500;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical}.hero-vivo__pr{color:var(--accent);font-family:var(--font-heading--family);font-size:19px;font-weight:700;line-height:1.2}.hero-vivo__go{font-size:12px;text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:3px}.hero-vivo__tag:hover .hero-vivo__go,.hero-vivo__tag:focus-visible .hero-vivo__go{color:var(--accent)}.hero-vivo__plus{display:none}.hero-vivo__slide--ready{background:#0d0e12}.hero-vivo__ready-link,.hero-vivo__ready{position:absolute;top:calc(var(--hv-hd) + (var(--hv-stage) - 100vw * var(--ready-r, .2137)) / 2);left:0;display:block;width:100%;height:auto}.hero-vivo__ready-link .hero-vivo__ready{position:static}.hero-vivo__ctrl{position:absolute;z-index:4;inset:auto 0 0;display:flex;align-items:flex-end;justify-content:space-between;padding:0 var(--hv-gutter) 24px;pointer-events:none}.hero-vivo__ctrl>*{pointer-events:auto}.hero-vivo__dashes{display:flex;gap:10px}.hero-vivo__dash{position:relative;width:72px;height:44px;padding:0;border:0;background:none;cursor:pointer}.hero-vivo__dash:before{content:"";position:absolute;inset:21px 0 auto;height:2px;background:#fff6}.hero-vivo__dash[aria-current=true]:before{background:#fff}.hero-vivo__btns{display:flex;gap:8px}@media screen and (max-width:1279px){.hero-vivo__dot{display:none}.hero-vivo__tag{display:none;height:auto;border:0}.hero-vivo__plus{position:absolute;top:-22px;left:-22px;display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;background:none;color:#fff;cursor:pointer}.hero-vivo__plus:before{content:"+";display:grid;place-items:center;width:26px;height:26px;border:1px solid #fff;background:#090a0db3;font-family:var(--font-heading--family);font-size:20px;line-height:1}.hero-vivo__note.is-open .hero-vivo__plus:before{content:"\d7"}.hero-vivo__note.is-open .hero-vivo__tag{position:absolute;z-index:5;top:auto;bottom:26px;left:-10px;display:block;width:210px;height:auto}.hero-vivo__note.is-open .hero-vivo__tag--ml{right:-10px;left:auto}.hero-vivo__note.is-open .hero-vivo__lab{position:static;width:auto;min-height:0;max-width:none;transform:none;background:#090a0deb}.hero-vivo__note.is-open .hero-vivo__tag--ml .hero-vivo__lab{align-items:flex-end;text-align:right}}@media screen and (min-width:750px)and (max-width:1279px){.hero-vivo__note.is-open.is-down .hero-vivo__tag{top:26px;bottom:auto}.hero-vivo__note.is-open .hero-vivo__nm{-webkit-line-clamp:2;line-clamp:2}.hero-vivo__note.is-open.is-down .hero-vivo__lab{padding-block:8px}}@media screen and (max-width:749px){.hero-vivo{--hv-hd: 0px;--hv-total: min(100vw, 560px);--hv-stage: var(--hv-total);min-height:340px}.hero-vivo__box{top:0;right:0;bottom:0;left:0;width:var(--hv-total);height:var(--hv-total);margin-inline:auto;aspect-ratio:1;container-type:normal}.hero-vivo__img{object-position:center;transform-origin:calc(var(--mxn) * 100%) calc(var(--myn) * 100%)}.hero-vivo__note{top:calc(var(--myn) * 100%);left:calc(var(--mxn) * 100%)}.hero-vivo__text{inset:auto 20px 56px;justify-content:flex-end;width:auto;height:auto}.hero-vivo__title{font-size:24px;line-height:1.12}.hero-vivo__p{max-width:none;margin-top:6px;font-size:13px;line-height:1.4}.hero-vivo__text .button{display:grid;align-items:center;width:100%;min-height:44px;margin-top:10px;padding-block:10px;text-align:center}.hero-vivo__ctrl{padding:0 20px 6px}.hero-vivo__dashes{gap:2px}.hero-vivo__dash{width:32px;height:44px}.hero-vivo__dash:before{top:21px}.hero-vivo__note.is-open .hero-vivo__tag,.hero-vivo__note.is-open .hero-vivo__tag--ml{top:26px;bottom:auto}.hero-vivo__ready-link,.hero-vivo__ready{top:0}}
/*# sourceMappingURL=/cdn/shop/t/34/assets/section-hero-vivo.css.map */