.opening{position:fixed;inset:0;z-index:10000;display:grid;place-items:center;overflow:hidden;background:radial-gradient(ellipse at 50% 38%,#334e6c 0%,#243b55 56%,#192e46 100%);color:#f6f1e5;transition:opacity .45s ease,visibility .45s;isolation:isolate}.opening.is-leaving{opacity:0;visibility:hidden;pointer-events:none}.opening-inner{text-align:center;position:relative;z-index:1;padding:20px}.opening-mark{width:clamp(180px,35vw,260px);display:block;margin:0 auto 28px;filter:drop-shadow(0 8px 30px #061b1530)}.opening-ribbon,.opening-thread{stroke-dasharray:1;stroke-dashoffset:1;--opening-animation:tie-ribbon 1.8s cubic-bezier(.35,0,.2,1) .15s forwards}.opening-thread{--opening-animation:tie-ribbon 1.5s cubic-bezier(.35,0,.2,1) .7s forwards}.opening-name{font-family:'Yu Mincho','Hiragino Mincho ProN',serif;font-size:clamp(34px,7vw,48px);letter-spacing:.22em;margin:0 0 18px .22em;--opening-animation:opening-reveal 1.1s ease .5s both}.opening-subtitle{font-family:'Yu Mincho','Hiragino Mincho ProN',serif;font-size:clamp(17px,4vw,22px);letter-spacing:.16em;margin:0;--opening-animation:opening-reveal 1.1s ease 1.05s both}.opening-rule{display:block;width:44px;height:1px;background:#e07a5f;margin:26px auto;--opening-animation:opening-reveal 1s ease 1.4s both}.opening-caption{font:12px/1.8 system-ui,sans-serif;letter-spacing:.12em;color:#d6dce6;margin:0;--opening-animation:opening-reveal 1s ease 1.65s both}.opening-orbit{position:absolute;width:min(78vw,640px);aspect-ratio:1;border:1px solid #b5c0a51a;border-radius:50%;transform:rotate(-35deg) scaleX(.68);--opening-animation:orbit-arrive 4s ease-out both}.opening-orbit:after{content:'';position:absolute;inset:8%;border:1px solid #e07a5f20;border-radius:50%;transform:rotate(65deg) scaleX(.7)}.opening-skip{position:absolute;bottom:max(70px,calc(env(safe-area-inset-bottom) + 50px));right:24px;background:transparent;border:1px solid #c9d3c94d;border-radius:30px;color:#e2e6da;padding:10px 18px;min-height:44px;font:12px system-ui;cursor:pointer}.opening-skip:disabled{visibility:hidden}.opening-skip:focus-visible{outline:2px solid #e07a5f;outline-offset:5px}.opening-credit{position:absolute;bottom:max(25px,env(safe-area-inset-bottom));font:9px system-ui,sans-serif;letter-spacing:.3em;color:#b7c4d3}@keyframes tie-ribbon{to{stroke-dashoffset:0}}@keyframes opening-reveal{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:translateY(0)}}@keyframes orbit-arrive{from{opacity:0;transform:rotate(-48deg) scaleX(.68) scale(.9)}to{opacity:1;transform:rotate(-35deg) scaleX(.68) scale(1)}}@media(prefers-reduced-motion:reduce){.opening *{--opening-animation:none!important}.opening-ribbon,.opening-thread{stroke-dashoffset:0}.opening{transition:none}}

.opening.is-playing *{animation:var(--opening-animation,none)}.opening-accent{stroke-dasharray:1;stroke-dashoffset:1;--opening-animation:tie-ribbon .9s ease 1.1s forwards}.opening-head{opacity:0;--opening-animation:opening-reveal .65s ease .1s both}.opening-head.second{--opening-animation:opening-reveal .65s ease .55s both}@media(prefers-reduced-motion:reduce){.opening.is-playing *{animation:none!important}.opening-head{opacity:1}.opening-accent{stroke-dashoffset:0}}

.opening:not(.is-playing) .opening-inner{opacity:0}.opening:not(.is-playing):before{content:"名刺帳を開いています";position:absolute;top:50%;font:13px system-ui,sans-serif;color:#c4cfdd;letter-spacing:.12em}