/* live prototype layer: motion + interaction on top of the v2 mockups */
html{width:auto!important;overflow-x:clip}
body.page{width:1440px;zoom:var(--z,1)}
.mo{display:none!important}
a,[data-href]{cursor:pointer}
nav .mega{display:none;right:120px;left:auto}
nav:hover .mega,nav:focus-within .mega{display:grid}
nav .mega a:hover{background:var(--g1)}
nav>a{transition:background .2s,color .2s}
nav>a:not(.on):not(.cta):hover{background:var(--g1)}
.btn{transition:transform .2s,box-shadow .2s}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,0,0,.15)}
.btn:hover b{rotate:-45deg}
.btn b{transition:rotate .25s}
.pillars a{transition:background .25s,color .25s}
.pillars a:not(.on):hover{background:#1a1a1b}
.pillars a .ar,.bc .ar,.ctab .c .ar{transition:transform .25s}
.pillars a:hover .ar,.bc:hover .ar,.ctab .c:hover .ar{transform:translateX(6px) rotate(-45deg)}
.tilt{transition:transform .2s ease-out,box-shadow .2s;transform-style:preserve-3d}
.tilt:hover{box-shadow:0 30px 60px rgba(0,0,0,.14)}
.marq{position:relative}
.mq-in{display:flex;gap:50px;white-space:nowrap;width:max-content}
a:focus-visible,[data-href]:focus-visible{outline:3px solid var(--y);outline-offset:3px}
.prog i{width:0}
@keyframes mq{to{translate:-50% 0}}
@keyframes float{50%{translate:0 -12px;rotate:2deg}}
@keyframes spin{to{rotate:360deg}}
@keyframes rise{from{translate:0 70px;scale:.94;opacity:.25}}
@keyframes track{from{letter-spacing:.9em;opacity:.3}}
@keyframes drift{to{translate:-160px 0}}
@keyframes blink{50%{opacity:0}}
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  .mq-in{animation:mq 28s linear infinite}
  .hero .mascot img,.phero img,.mh .phone,.amb img,.mem .m img{animation:float 4.5s ease-in-out infinite}
  .amb div:nth-child(2n) img,.mem .m:nth-child(2n) img{animation-delay:-2s}
  .hero .ring{animation:spin 24s linear infinite}
  .rec i,.term .cur{animation:blink 1s steps(1) infinite}
  @supports ((animation-timeline: view()) and (animation-range: entry)){
    .bc,.pc,.sv,.cp,.ln,.nw,.mem .m,.pw>div,.uc,.flow>div,.flow6>div,.proc>div,.step>div,.str>div,.tl>div,.svc>div,.why>div,.wk,.kpis>div,.stats>div,.prob .col,.ov table,.map,.ceo>*,.amb>div,.biz2>*,.card,.week>*,.ctab .c{
      animation:rise auto linear backwards;animation-timeline:view();animation-range:entry 0% entry 90%}
    .h h2{animation:track auto linear backwards;animation-timeline:view();animation-range:entry 0% cover 30%}
    .ghost{animation:drift auto linear both;animation-timeline:scroll(root)}
    .prog i{animation:grow auto linear both;animation-timeline:scroll(root)}
  }
}
@keyframes grow{from{width:0}to{width:100%}}
body{overflow:visible!important;overflow-x:clip!important}
/* v13 right-side section index */
.stoc{position:fixed;right:18px;top:50%;z-index:45;translate:calc(100% + 30px) -50%;transition:translate .35s cubic-bezier(.2,.8,.2,1);max-height:80vh}
.stoc.show,.stoc:focus-within{translate:0 -50%}
.stoc .stoc-t{display:none}
.stoc ol{list-style:none;margin:0;padding:10px;background:rgba(255,255,255,.92);backdrop-filter:blur(12px);border:1px solid var(--g2);border-radius:18px;box-shadow:0 14px 40px rgba(0,0,0,.1);max-height:80vh;overflow:auto}
.stoc a{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:10px;font-size:12px;font-weight:700;color:#555;max-width:230px}
.stoc a b{font:400 12px Anton;color:var(--mut);min-width:18px}
.stoc a span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stoc a:hover{background:var(--g1);color:var(--k)}
.stoc a.on{background:var(--k);color:#fff}.stoc a.on b{color:var(--y)}
@media (max-width:900px){
  .stoc{top:auto;bottom:18px;right:14px;translate:calc(100% + 30px) 0}
  .stoc.show,.stoc:focus-within,.stoc.open{translate:0 0}
  .stoc .stoc-t{display:flex;align-items:center;gap:8px;margin-left:auto;border:0;background:var(--k);color:#fff;font:700 12px 'Noto Sans JP';padding:11px 16px;border-radius:999px;box-shadow:0 10px 30px rgba(0,0,0,.25);cursor:pointer}
  .stoc .stoc-t i{width:14px;height:10px;border-top:2px solid var(--y);border-bottom:2px solid var(--y);position:relative}.stoc .stoc-t i:after{content:"";position:absolute;left:0;right:0;top:2px;border-top:2px solid var(--y)}
  .stoc ol{display:none;position:absolute;right:0;bottom:52px;width:min(78vw,300px);max-height:60vh}
  .stoc.open ol{display:block}
  .stoc a{max-width:none;font-size:13px;padding:10px 12px}
}
@media print{.stoc{display:none}}