/* ORICTION Backstage オープニング: 表サイトを破って宇宙人が出てきて破壊し、宇宙語サイトを建てる */
.bs-op,.bs-op__skip{display:none}
html.js .bs-op{position:fixed;inset:0;z-index:200;display:block;overflow:hidden;background:#05030f;transition:transform .6s cubic-bezier(.9,0,.2,1)}
html.js.bs-open .bs-op{transform:translateY(-104%)}
.bs-op[hidden]{display:none!important}
.bs-op__in{position:absolute;inset:0;--shk:0px}
.bs-op__in.is-shake{animation:bs-op-shake .45s steps(2,end)}
@keyframes bs-op-shake{0%{transform:translate(var(--shk),calc(var(--shk) * -.6))}25%{transform:translate(calc(var(--shk) * -1),calc(var(--shk) * .5))}50%{transform:translate(calc(var(--shk) * .7),var(--shk))}75%{transform:translate(calc(var(--shk) * -.5),calc(var(--shk) * -1))}100%{transform:none}}

html.js .bs-op__skip{position:fixed;right:16px;bottom:16px;z-index:210;display:inline-flex;align-items:center;gap:6px;padding:9px 16px;border:1px solid rgba(255,255,255,.5);border-radius:999px;background:rgba(5,3,15,.7);color:#fff;font:700 13px/1 var(--font-d);letter-spacing:.08em;cursor:pointer;opacity:0;animation:bs-op-skipin .4s ease-out 1s forwards}
html.js .bs-op__skip:hover{border-color:var(--yel);color:var(--yel)}
html.js.bs-open .bs-op__skip{display:none}
@keyframes bs-op-skipin{to{opacity:1}}

/* 宇宙（紙の裏） */
.bs-op__space{position:absolute;inset:0;background:radial-gradient(60% 50% at 50% 55%,rgba(233,49,114,.38),transparent 70%),radial-gradient(40% 40% at 20% 20%,rgba(71,169,225,.28),transparent 70%),#05030f}
.bs-op__space::before{content:"";position:absolute;inset:0;background-image:radial-gradient(1.5px 1.5px at 40px 60px,#fff,transparent),radial-gradient(1.5px 1.5px at 210px 130px,#9fe9ff,transparent),radial-gradient(1.5px 1.5px at 140px 270px,#fff,transparent),radial-gradient(2px 2px at 290px 220px,#ffe9a8,transparent);background-size:330px 330px;opacity:.9}

/* 紙（表サイト） */
.bs-op__sheet{position:absolute;inset:0;transform-origin:50% 50%;animation:bs-op-in .4s ease-out both}
@keyframes bs-op-in{from{opacity:0}to{opacity:1}}
.bs-op__sheet.is-knock{animation:bs-op-knock .32s ease-out}
@keyframes bs-op-knock{0%{transform:none}35%{transform:scale(1.022) translateY(-3px)}100%{transform:none}}
.bs-op__sheet.is-crumple{animation:bs-op-crumple .9s cubic-bezier(.6,0,.3,1) forwards}
@keyframes bs-op-crumple{0%{transform:none;opacity:1}55%{transform:scale(.12) rotate(380deg);opacity:1}100%{transform:translate(70vw,-80vh) scale(.06) rotate(900deg);opacity:0}}
.bs-op__paper,.bs-op__site{position:absolute;inset:0;-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.bs-op__paper{background:#d9d9e2}
.bs-op__site{background:#fff;color:#0a0a0a}

/* 偽・表サイト */
.fs{font-family:var(--font-b);font-weight:500;line-height:1.9;overflow:hidden}
.fs__head{display:flex;align-items:center;justify-content:space-between;gap:16px;height:64px;padding:0 24px;border-bottom:1px solid rgba(10,10,10,.08)}
.fs__logo{display:inline-block;font-family:var(--font-d);font-weight:900;letter-spacing:-.04em;font-size:22px;line-height:1}
.fs__nav{display:flex;gap:28px;font-weight:700;font-size:14px}
.fs__nav span{display:inline-block}
.fs__contact{display:inline-flex;gap:8px;font-weight:700;font-size:14px;line-height:1.4;border-bottom:1px solid currentColor}
.fs__burger{display:none;width:28px;height:18px;flex-direction:column;justify-content:space-between}
.fs__burger i{display:block;height:2px;background:#0a0a0a}
.fs__body{max-width:1400px;margin:0 auto;padding:28px 24px 0}
.fs__wm{font-family:var(--font-d);font-weight:900;letter-spacing:-.04em;font-size:clamp(40px,16vw,220px);line-height:.9;white-space:nowrap}
.fs__label{margin-top:26px;font-family:var(--font-d);font-weight:600;font-size:12px;line-height:1.4;letter-spacing:.14em;text-transform:uppercase;color:#6b6b6b}
.fs__h1{margin-top:14px;font-weight:900;font-size:clamp(24px,3.2vw,40px);line-height:1.1;letter-spacing:-.01em}
.fs__h1 span{display:block}
.fs__lead{margin-top:22px;max-width:760px;font-size:14px}
.fs__btn{display:inline-block;margin-top:22px;padding:14px 22px;background:#0a0a0a;color:#fff;font-weight:700;font-size:14px;line-height:1.5}
.fs__btn--go{display:table;margin-top:10px}
.fs .fs__btn--go.is-press{animation:fs-press .32s ease-out}
@keyframes fs-press{40%{transform:scale(.92);box-shadow:inset 0 0 0 3px #e93172}100%{transform:scale(1)}}
.fs__cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:34px}
.fs__card{padding:18px 20px;border:1px solid rgba(10,10,10,.12);background:#fff;transform-origin:0 100%}
.fs__card b{font-family:var(--font-d);font-weight:800;font-size:36px;line-height:1}
.fs__card small{margin-left:4px;font-weight:700;font-size:13px}
.fs__card span{display:block;margin-top:6px;font-size:12px;color:#6b6b6b}
.fs__foot{position:absolute;left:0;right:0;bottom:0;z-index:2;background:#fff;display:flex;justify-content:space-between;gap:12px;padding:14px 24px;border-top:1px solid rgba(10,10,10,.08);font-size:12px;color:#6b6b6b}
.fs__ch{display:inline-block}

/* 破壊 */
.fs .is-drop{animation:fs-drop .8s cubic-bezier(.55,0,1,.8) forwards}
@keyframes fs-drop{to{transform:translateY(120vh) rotate(var(--r,25deg));opacity:.9}}
.fs .is-fly{animation:fs-fly .9s cubic-bezier(.3,0,.9,.5) forwards}
@keyframes fs-fly{25%{opacity:1}to{transform:translate(var(--dx,0px),var(--dy,120vh)) rotate(var(--r,180deg));opacity:0}}
.fs .is-topple{animation:fs-topple .9s cubic-bezier(.6,0,1,1) forwards}
@keyframes fs-topple{40%{transform:rotate(-14deg)}100%{transform:rotate(-96deg) translate(-20vw,90vh);opacity:.8}}
.fs .is-squash{animation:fs-squash .7s ease-in forwards}
@keyframes fs-squash{30%{transform:scale(1.3,.12)}60%{transform:scale(1.3,.12)}100%{transform:scale(1.3,.12) translateY(120vh)}}
.fs .is-out{animation:fs-out .6s ease-in forwards}
@keyframes fs-out{to{transform:translateX(-110vw) rotate(-6deg);opacity:0}}

/* 宇宙人 */
.bs-op__cast{position:absolute;inset:0;z-index:6;pointer-events:none}
.bs-op__al{position:absolute;left:50%;top:50%;width:var(--w);height:auto;--px:0px;--py:0px;opacity:0;filter:drop-shadow(0 0 18px rgba(9,220,245,.6));transform:translate(calc(-50% + var(--px)),calc(-50% + var(--py))) scale(0) rotate(var(--r,0deg));transition:transform .55s cubic-bezier(.2,1.6,.4,1),opacity .2s}
.bs-op__al.is-out{opacity:1;transform:translate(calc(-50% + var(--px)),calc(-50% + var(--py))) scale(1) rotate(var(--r,0deg))}
.bs-op__al.is-pos{--px:var(--x,0px);--py:var(--y,0px)}
.bs-op__al.is-jab{animation:bs-op-jab .4s ease-out}
@keyframes bs-op-jab{40%{transform:translate(calc(-50% + var(--px)),calc(-50% + var(--py) - 46px)) scale(1.18) rotate(calc(var(--r,0deg) - 10deg))}}
.bs-op__al.is-work{animation:bs-op-work .3s ease-in-out infinite alternate}
@keyframes bs-op-work{from{transform:translate(calc(-50% + var(--px)),calc(-50% + var(--py))) scale(1) rotate(-16deg)}to{transform:translate(calc(-50% + var(--px)),calc(-50% + var(--py) - 14px)) scale(1) rotate(10deg)}}
.bs-op__al--main{--w:min(40vw,340px);--x:0px;--y:6vh;--r:0deg;z-index:3}
.bs-op__al--run{--w:min(26vw,190px);--x:-32vw;--y:14vh;--r:-8deg}
.bs-op__al--jump{--w:min(18vw,140px);--x:30vw;--y:-16vh;--r:10deg}
.bs-op__al--point{--w:min(28vw,230px);--x:34vw;--y:10vh;--r:-4deg;z-index:2}

/* 擬音 */
.bs-op__fx{position:absolute;inset:0;z-index:8;pointer-events:none}
.bs-sfx{position:absolute;left:var(--x);top:var(--y);margin:0;font-family:var(--font-b);font-weight:900;font-size:var(--s,64px);line-height:1;color:var(--c,var(--yel));-webkit-text-stroke:.08em var(--pink);paint-order:stroke fill;text-shadow:.06em .06em 0 #000,0 0 24px rgba(233,49,114,.8);white-space:nowrap;transform:translate(-50%,-50%) rotate(var(--r,-8deg)) scale(0);animation:bs-sfx .8s cubic-bezier(.2,1.5,.4,1) forwards}
.bs-sfx::before{content:"";position:absolute;left:50%;top:50%;z-index:-1;width:2.6em;height:2.6em;transform:translate(-50%,-50%);border-radius:50%;background:repeating-conic-gradient(from 0deg,rgba(233,49,114,.9) 0 6deg,transparent 6deg 16deg);-webkit-mask-image:radial-gradient(circle,#000 30%,transparent 70%);mask-image:radial-gradient(circle,#000 30%,transparent 70%);opacity:.9}
@keyframes bs-sfx{0%{transform:translate(-50%,-50%) rotate(var(--r,-8deg)) scale(0);opacity:1}25%{transform:translate(-50%,-50%) rotate(var(--r,-8deg)) scale(1.15);opacity:1}70%{opacity:1}100%{transform:translate(-50%,-56%) rotate(var(--r,-8deg)) scale(1);opacity:0}}

/* 工事中 */
.bs-op__work{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;opacity:0;pointer-events:none;transition:opacity .3s}
.bs-op__work.is-on{opacity:1}
.bs-op__tape{width:140vw;margin:0;padding:12px 0;transform:rotate(-6deg);background:repeating-linear-gradient(135deg,var(--yel) 0 28px,#111 28px 56px);text-align:center;font-family:var(--font-d);font-weight:900;font-size:clamp(22px,4vw,44px);letter-spacing:.08em;color:#fff;-webkit-text-stroke:.05em #000;paint-order:stroke fill;text-shadow:.04em .04em 0 #000;white-space:nowrap;overflow:hidden}
.bs-op__worksub{margin:0;transform:rotate(-6deg);font-weight:700;font-size:14px;letter-spacing:.1em;color:var(--mute)}

/* 宇宙語サイト */
.bs-op__new{position:absolute;inset:0;z-index:4;opacity:0;visibility:hidden}
.bs-op__new.is-on{opacity:1;visibility:visible}
.fs--alien{position:absolute;inset:0;background:transparent;color:var(--yel)}
.fs--alien .fs__head{border-bottom-color:rgba(233,49,114,.5)}
.fs--alien .fs__logo,.fs--alien .fs__wm{color:var(--yel);-webkit-text-stroke:.06em var(--pink);paint-order:stroke fill;text-shadow:0 0 18px rgba(233,49,114,.8)}
.fs--alien .fs__nav{color:#fff}
.fs--alien .fs__contact{color:var(--cyan)}
.fs--alien .fs__burger i{background:var(--yel)}
.fs--alien .fs__label{color:var(--cyan)}
.fs--alien .fs__h1{color:#fff;text-shadow:0 0 14px rgba(9,220,245,.7)}
.fs--alien .fs__lead{color:var(--mute)}
.fs--alien .fs__btn{background:var(--pink);color:#fff;box-shadow:0 0 20px rgba(233,49,114,.7)}
.fs--alien .fs__card{background:rgba(255,255,255,.04);border:2px solid var(--cyan);box-shadow:0 0 16px rgba(9,220,245,.35)}
.fs--alien .fs__card b{color:var(--yel)}
.fs--alien .fs__card small{color:#fff}
.fs--alien .fs__card span{color:var(--mute)}
.fs--alien .fs__foot{border-top-color:rgba(233,49,114,.5);color:var(--mute);background:rgba(5,3,15,.92)}
.fs--alien .fs__head,.fs--alien .fs__wm,.fs--alien .fs__label,.fs--alien .fs__h1,.fs--alien .fs__lead,.fs--alien .fs__btn,.fs--alien .fs__card,.fs--alien .fs__foot{opacity:0;transform:translateY(30px) scale(.9);transition:opacity .35s,transform .5s cubic-bezier(.2,1.5,.4,1)}
.fs--alien .is-built{opacity:1;transform:none}
.fs--alien .fs__ch.is-wait{visibility:hidden}

/* 完成スタンプ */
.bs-op__stamp{position:absolute;left:50%;top:50%;z-index:7;display:flex;flex-direction:column;align-items:center;gap:6px;margin:0;padding:14px 30px;border:6px solid #ff3b5c;border-radius:18px;background:rgba(5,3,15,.55);color:#ff3b5c;font-family:var(--font-d);font-weight:900;font-size:clamp(48px,11vw,150px);line-height:1;letter-spacing:.02em;white-space:nowrap;opacity:0;pointer-events:none;transform:translate(-50%,-50%) rotate(-12deg) scale(3)}
.bs-op__stamp small{font-family:var(--font-b);font-weight:700;font-size:clamp(13px,1.6vw,18px);letter-spacing:.1em;color:#fff}
.bs-op__stamp.is-on{animation:bs-op-stamp .45s cubic-bezier(.3,1.3,.5,1) forwards}
@keyframes bs-op-stamp{0%{opacity:0;transform:translate(-50%,-50%) rotate(-12deg) scale(3)}60%{opacity:1;transform:translate(-50%,-50%) rotate(-12deg) scale(.94)}100%{opacity:1;transform:translate(-50%,-50%) rotate(-12deg) scale(1)}}

/* SP */
@media (max-width:760px){
  .fs__nav,.fs__contact{display:none}
  .fs__burger{display:flex}
  .fs__head{height:56px;padding:0 16px}
  .fs__body{padding:20px 16px 0}
  .fs__wm{font-size:17.5vw}
  .fs__h1{font-size:26px}
  .fs__lead{font-size:13px;line-height:1.8}
  .fs__btn{margin-top:14px;padding:10px 16px;font-size:13px}
  .fs__btn--go{margin-top:8px}
  .fs__cards{grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}
  .fs__card{padding:10px 12px}
  .fs__card b{font-size:28px}
  .fs__foot{display:block;padding:10px 16px;font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .bs-op__al--main{--w:52vw;--y:8vh}
  .bs-op__al--run{--w:34vw;--x:-30vw;--y:22vh}
  .bs-op__al--jump{--w:22vw;--x:32vw;--y:-22vh}
  .bs-op__al--point{--w:36vw;--x:30vw;--y:16vh}
  .bs-sfx{font-size:calc(var(--s,64px) * .6)}
  .bs-op__tape{font-size:18px}
  html.js .bs-op__skip{right:12px;bottom:12px}
}

/* reduced motion: オープニングは出さない */
@media (prefers-reduced-motion:reduce){
  .bs-op,.bs-op__skip{display:none!important}
}