.service.koi-service{position:relative;isolation:isolate;padding:100px 0 64px;background:#07121a;overflow:hidden}
.koi-heading{display:grid;grid-template-columns:1fr 1fr;align-items:end;gap:40px;position:relative;z-index:2}
.koi-heading .eyebrow{color:#64c3d9;letter-spacing:.2em;margin-bottom:27px;font-size:11px}
.koi-heading h2{font-family:var(--serif);font-weight:400;font-size:clamp(31px,3.8vw,60px);line-height:1.65;letter-spacing:.04em;margin:0}
.koi-heading-copy{max-width:330px;justify-self:end;padding-bottom:10px}
.koi-heading-copy .koi-heading-en{font:500 11px/1.6 var(--ui);letter-spacing:.14em;color:#cee3e9;margin:0 0 17px}
.koi-heading-copy p{font:400 13px/2.05 var(--ui);color:#93a9b5;letter-spacing:.035em;margin:0}
.koi-exhibition{position:relative;max-width:1460px;margin:44px auto 70px;min-height:800px;height:800px}
.koi-stage{position:absolute;width:72%;height:calc(100% - 72px);left:14%;top:72px;z-index:1;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent),linear-gradient(0deg,transparent,#000 12%,#000 88%,transparent);mask-composite:intersect}
.koi-stage canvas{display:block;width:100%;height:100%;cursor:grab;touch-action:pan-y;outline:none}
.koi-stage canvas.dragging{cursor:grabbing}
.koi-stage:has(canvas:focus-visible)~.koi-interaction .koi-touch-note{color:#a6f4ff;text-decoration:underline;text-underline-offset:6px}
.koi-fallback{transform:scale(.84);position:absolute;inset:22% 18%;width:64%;height:56%;object-fit:contain;transition:opacity .7s;pointer-events:none;filter:drop-shadow(0 0 28px #26bcdf2c)}
.koi-stage.is-ready .koi-fallback{opacity:0}
.koi-links{position:absolute;inset:0 0 auto;z-index:2;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:24px;width:calc(100% - var(--gutter) * 2);max-width:1200px;pointer-events:none;list-style:none;margin:0 auto;padding:0}
.koi-links li{position:relative;min-width:0;width:auto;max-width:none;pointer-events:auto}

.koi-service-link{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;width:100%;height:100%;background:transparent;padding:16px 14px 18px;border-bottom:1px solid #53717d50;font-family:var(--ui);transition:border-color .4s,color .4s}
.koi-service-link:after{content:'';position:absolute;left:0;bottom:-1px;width:100%;height:1px;background:#6ce7f6;transform:scaleX(0);transform-origin:left;transition:transform .6s cubic-bezier(.16,1,.3,1)}
.koi-service-link .koi-field-index{grid-column:1/-1;font-size:10px;letter-spacing:.12em;color:#7194a3;margin-bottom:11px}
.koi-service-link strong{font-size:clamp(22px,2.6vw,34px);white-space:nowrap;font-weight:500;line-height:1.06;letter-spacing:-.035em}
.koi-service-link .koi-field-arrow{position:absolute;right:0;top:45px;color:#8dc8d7;font-size:23px;transition:transform .5s cubic-bezier(.16,1,.3,1)}
.koi-service-link .koi-field-jp{grid-column:1/-1;color:#adbdc5;font-size:12px;margin-top:13px;letter-spacing:.025em}
.koi-service-link:hover,.koi-service-link:focus-visible{color:#a6f4ff;outline:none}
.koi-service-link:hover:after,.koi-service-link:focus-visible:after{transform:scaleX(1)}
.koi-service-link:hover .koi-field-arrow,.koi-service-link:focus-visible .koi-field-arrow{transform:translate(4px,-4px)}

.koi-touch-note{text-align:center;font:400 10px/1.8 var(--ui);letter-spacing:.06em;color:#819ea9;margin:18px 0 0}
.koi-footer{display:flex;align-items:center;justify-content:space-between;padding-top:52px;margin-top:48px;border-top:1px solid #3a555e52;font-family:var(--ui)}
.koi-footer p{font-size:12px;color:#9ab0bb;margin:0}.koi-footer .outline-button{min-height:45px;font-size:12px;padding:9px 20px}
@media(min-width:1700px){.koi-exhibition{max-width:1550px;height:840px}}
@media(max-width:900px){.koi-heading{gap:24px}.koi-heading-copy{max-width:260px}.koi-heading h2{font-size:34px}.koi-exhibition{height:760px;min-height:760px}.koi-service-link strong{font-size:24px}.koi-links{gap:18px}.koi-service-link .koi-field-arrow{display:none}.koi-service-link .koi-field-jp{font-size:11px}}
@media(max-width:640px){
 .service.koi-service{padding:65px 0 45px}.koi-heading{display:block}.koi-heading .eyebrow{margin-bottom:20px}.koi-heading h2{font-size:30px;line-height:1.65}.koi-heading-copy{max-width:none;width:100%;justify-self:start;text-align:left;margin-top:25px}.koi-heading-en{display:none}.koi-heading-copy p{font-size:12px;line-height:1.95}
 .koi-exhibition{height:550px;min-height:550px;margin-top:30px}.koi-stage{left:0;width:100%;mask-image:linear-gradient(0deg,transparent,#000 10%,#000 90%,transparent)}
 .koi-links{width:calc(100% - 32px);gap:8px}
 .koi-service-link{padding:14px 0 16px;min-height:78px}.koi-service-link strong{font-size:clamp(12px,3.7vw,20px);letter-spacing:-.025em}.koi-service-link .koi-field-index{margin-bottom:9px;font-size:10px}.koi-service-link .koi-field-jp,.koi-service-link .koi-field-arrow{display:none}.koi-footer{display:block;padding-top:30px;margin-top:34px}.koi-footer .outline-button{margin-top:20px}.koi-touch-note{font-size:10px}
}
@media(prefers-reduced-motion:reduce){.koi-service-link,.koi-service-link:after,.koi-field-arrow,.koi-fallback{transition:none}}
.koi-interaction{position:absolute;top:100%;left:0;right:0;z-index:3}

@media(max-width:640px){.koi-exhibition{margin-bottom:40px}}

.koi-service-link.is-previewing{color:#a6f4ff;border-color:#6ce7f6}.koi-service-link.is-previewing:after{transform:scaleX(1)}