*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#fff;color:#222;font-family:Arial,Helvetica,sans-serif;letter-spacing:-.02em}main{max-width:1600px;padding:66px 60px 0;margin:auto}h1,h2,h3,h4,p,dl,dd{margin:0}h1,h2{font-weight:900;text-transform:uppercase;letter-spacing:-.035em}h1{font-size:clamp(44px,6.64vw,106px);line-height:1;max-width:1380px}header .intro{margin-top:100px}.intro{display:grid;grid-template-columns:1.6fr 1fr;gap:15%;align-items:start}p{font-size:clamp(18px,1.75vw,28px);line-height:1.15;color:#9da6a8;max-width:983px}dl{display:grid;grid-template-columns:1fr 1fr;gap:55px 24px}dt{color:#9da6a8;font-size:clamp(15px,1.375vw,22px);margin-bottom:16px}dd{font-size:clamp(18px,1.75vw,28px);font-weight:600}.overview{margin-top:100px}.visual{display:flex;width:100%;margin:80px 0 0}.panel{display:block;position:relative;overflow:hidden;width:calc(100% / var(--parts));aspect-ratio:var(--ratio);flex:none}.panel img{display:block;position:absolute;max-width:none;width:calc(100% * var(--parts));height:100%;left:calc(-100% * var(--n));object-fit:fill}.overview .visual{margin:0}.concept{border-top:2px solid var(--accent);margin-top:220px;padding-top:150px;--accent:#eb89dc}.c2{--accent:#ff9b16}.c3{--accent:#63bdf8}.c4{--accent:#2dc8a3}h2{font-size:clamp(34px,6.16vw,98px);line-height:1.04}h2 span{display:inline-block;margin-right:24px}.brief{display:grid;grid-template-columns:359fr 793fr;gap:64px 24px;max-width:1176px;margin-top:100px}.brief h4{font-size:clamp(23px,2.25vw,36px);font-weight:600;display:flex;gap:16px;align-items:start}.brief h4:before{content:'';width:14px;height:14px;background:#222;border-radius:50%;flex:none;margin-top:.35em}.sub{margin-top:110px}h3{font-size:clamp(22px,2.5vw,40px);line-height:1.1;font-weight:600;text-transform:uppercase}.sub>p{margin-top:60px}.custom{display:grid;grid-template-columns:1fr 1fr;gap:15%;align-items:center;margin-top:110px}.custom p+p{margin-top:55px}.custom .visual{margin:0}.concept>.visual+p,.concept>.sub+p{margin-top:80px}.concept>p{margin-top:80px}footer{margin:220px 0 160px}footer .intro{margin-top:100px}.final{max-width:1600px;margin:auto}.final .visual{margin:0}.progress{position:fixed;z-index:10;top:0;left:0;height:3px;background:#28c99a;width:0}.panel:focus-visible{outline:4px solid #222;outline-offset:4px}a{color:inherit}@media(min-width:1601px){main{padding-top:66px}}@media(max-width:1000px){main{padding:40px 28px 0}.intro{gap:8%;grid-template-columns:1.4fr 1fr}header .intro{margin-top:60px}.overview{margin-top:60px}.concept{margin-top:100px;padding-top:70px}.brief{margin-top:60px;grid-template-columns:1fr 2.5fr;gap:40px 20px}.sub{margin-top:70px}.visual{margin-top:45px}.sub>p{margin-top:32px}.custom{gap:5%;margin-top:65px}footer{margin:100px 0 80px}footer .intro{margin-top:50px}}
@media(max-width:600px){main{padding:28px 20px 0}h1{font-size:44px;line-height:1.02}.intro{grid-template-columns:1fr;gap:36px}header .intro{margin-top:36px}p{font-size:18px;line-height:1.4}dl{gap:28px 20px}dt{margin-bottom:8px}.overview{margin-top:48px}.overview .visual{display:grid;grid-template-columns:1fr 1fr;gap:6px}.overview .panel{width:100%;aspect-ratio:.36}.overview .panel img{object-fit:fill}.concept{margin-top:64px;padding-top:48px}h2{font-size:36px}h2 span{margin-right:8px}.brief{grid-template-columns:1fr;gap:14px;margin-top:36px}.brief h4:not(:first-child){margin-top:20px}.brief h4{font-size:23px}.sub{margin-top:56px}h3{font-size:24px}.sub>p{margin-top:24px}.visual{flex-direction:column;gap:20px;margin-top:28px}.panel{width:100%}.custom{grid-template-columns:1fr;gap:28px;margin-top:40px}.custom p+p{margin-top:24px}.concept>p{margin-top:36px}footer{margin:64px 0}footer .intro{margin-top:32px}.final{overflow:hidden}.final .visual{width:150%;margin-left:-25%}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Kata site navigation */
.case-nav{position:fixed;top:16px;left:16px;right:16px;z-index:60;display:flex;justify-content:space-between;pointer-events:none}
.case-nav a{pointer-events:auto;display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:100px;background:#ffffffe6;color:#222;font-size:15px;font-weight:700;text-decoration:none;box-shadow:0 4px 20px #00000014;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:background .3s,color .3s}
.case-nav a:hover{background:#28c99a;color:#fff}
main{padding-top:96px}
body{animation:case-in .6s cubic-bezier(.22,1,.36,1) both}
@keyframes case-in{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){body{animation:none}}
@media(max-width:700px){main{padding-top:80px}}