/* One 260vh pin: the same media stage travels from right to left. */
.product-pin{background:#080b10;color:#f1f0eb;--swap:0}
#product-outline{position:absolute;left:50%;top:45%;transform:translate(-50%,-50%);white-space:nowrap;font:900 clamp(100px,14vw,290px)/1 Geist,sans-serif;letter-spacing:-.05em;color:transparent;-webkit-text-stroke:1px #ffffff30;pointer-events:none}
#product-outline span+span{position:absolute;left:0;top:0;-webkit-text-stroke-color:#d7e7ed;clip-path:inset(0 calc(100% - var(--fill,0%)) 0 0)}
#product-label{position:absolute;left:6vw;top:13vh;font-size:11px;opacity:.65;z-index:4}
.product-copy{position:absolute;left:6vw;top:30vh;width:43vw;z-index:3;pointer-events:none}
.product-copy h2{font:900 clamp(48px,6.4vw,122px)/.97 Geist,sans-serif;letter-spacing:-.055em;margin:0 0 28px}
.product-copy .product-jp{font-size:clamp(15px,1.3vw,22px);line-height:1.7;color:#f1f0eb;margin-bottom:18px}
.product-note{font-size:clamp(14px,1.05vw,17px);line-height:2;color:#c1c5cc;max-width:40vw}
.product-name-space{display:none}
.product-verticaly{left:56vw;width:40vw;opacity:0}
.product-verticaly h2{font-size:clamp(45px,5.5vw,105px)}
.product-link{display:inline-block;pointer-events:auto;color:#fff;min-height:44px;margin-top:24px;border-bottom:1px solid #87969f;font:13px/44px "JetBrains Mono",monospace;position:relative;overflow:hidden}
.product-link.roll>span{display:block;transition:transform .3s}
.product-link.roll>span+span{position:absolute;left:0;top:100%;white-space:nowrap}
.product-link.roll:hover>span,.product-link.roll:focus-visible>span{transform:translateY(-100%)}
.product-link:focus-visible{outline:1px solid #bfe3ee;outline-offset:5px}
.product-media{position:absolute;top:18vh;left:calc(52vw - var(--swap)*48vw);width:44vw;height:66vh;z-index:2;pointer-events:none}
.rei-media,.verticaly-media{position:absolute;inset:0}
.rei-main{position:absolute;left:27%;top:0;height:60vh;aspect-ratio:3/4;border:1px solid #dce5ee70;background:#121920;box-shadow:0 24px 70px #0009;overflow:hidden}
.product-media video{display:block;object-fit:cover;background:#121920}
.rei-main video{width:100%;height:100%}
.rei-small{position:absolute;width:34%;aspect-ratio:16/9;border:1px solid #cbd9e480;box-shadow:0 12px 32px #0008}
.rei-small-1{left:1%;top:6%;z-index:2}.rei-small-2{right:0;top:27%;z-index:2}.rei-small-3{left:0;top:57%;z-index:2}.rei-small-4{right:1%;top:78%;z-index:2}
.verticaly-media{opacity:0;overflow:hidden;height:64vh}
.verticaly-strip{display:flex;gap:14px;width:max-content;padding-top:1vh}
.verticaly-strip video{height:60vh;aspect-ratio:9/16;border:1px solid #cbd9e455;box-shadow:0 16px 45px #0007}
.verticaly-strip video:nth-child(even){margin-top:2vh}
.product-index{position:absolute;bottom:7vh;left:6vw;right:6vw;display:flex;align-items:center;gap:18px;font-size:10px;opacity:.6;z-index:4}
.product-index i{display:block;width:80px;height:1px;background:linear-gradient(90deg,#d3e9ef calc(var(--swap)*100%),#ffffff30 0)}
@media(max-width:767px){
 #product-label{left:6vw;top:12vh;font-size:10px}
 #product-outline{top:57%;font-size:92px}
 .product-copy,.product-verticaly{left:6vw;top:14vh;width:88vw}
 .product-copy h2{font-size:46px;line-height:.96;margin-bottom:12px}
 .product-rei h2 br{display:none}.product-rei h2{font-size:clamp(32px,10.4vw,42px);white-space:nowrap}.product-name-space{display:inline}
 .product-copy .product-jp{font-size:14px;margin-bottom:10px}
 .product-note{font-size:12px;line-height:1.9;max-width:88vw}
 .product-link{font-size:11px;line-height:36px;min-height:36px;margin-top:10px}
 .product-media{left:calc(10vw - var(--swap)*4vw);top:39vh;width:88vw;height:61vh}
 .rei-main{height:42vh;left:22%;top:5vh}
 .rei-small{width:31%}.rei-small-1{top:5%;left:1%}.rei-small-2{top:24%;right:0}.rei-small-3{top:48%;left:0}.rei-small-4{top:67%;right:0}
 .verticaly-media{height:61vh}.verticaly-strip{gap:9px;padding-top:0}.verticaly-strip video{height:60vh}.verticaly-strip video:nth-child(even){margin-top:0}
 .product-index{display:none}
}