#opening{--op-vw:min(76vw,142vh);--op-logo-w:min(39.4vw,568px);--op-cx:calc(50% + var(--op-logo-w) * .0065);--op-cy:calc(50% + var(--op-logo-w) * .024);--op-top:46px;--op-bot:66px;--op-pad:22px;--soft:cubic-bezier(.22,1,.36,1);position:fixed;inset:0;z-index:2147483000;overflow:hidden;touch-action:none;cursor:pointer;display:none;-webkit-tap-highlight-color:transparent;background:transparent}
html.is-opening #opening{display:block}
html.is-opening.op-measure{overflow:auto!important;scrollbar-gutter:auto!important}
#opening.op-exit{pointer-events:none}
#opening *{box-sizing:border-box}

.op-sheet{position:absolute;inset:0;z-index:1;will-change:transform}
.op-sheet::after{content:"";position:absolute;left:0;right:0;top:calc(100% - 1px);height:15px;background:radial-gradient(circle at 14px 0,#fffbed 13.5px,transparent 14px) 0 0/28px 15px repeat-x;pointer-events:none}
#opening.op-exit .op-sheet{filter:drop-shadow(0 8px 9px rgba(70,60,40,.2))}
.op-world{position:absolute;inset:0;overflow:hidden;transform-origin:50% 100%}
.op-paper{position:absolute;inset:0;background:linear-gradient(#eaf4c8,#eaf4c800 55%),radial-gradient(#dcce9c66 1px,transparent 1px) 0 0/18px 18px,#fffbed}
.op-grain{position:absolute;inset:0;opacity:.05;pointer-events:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .35 0 0 0 0 .3 0 0 0 0 .2 0 0 0 1.4 -.2'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>")}
.op-clouds{position:absolute;inset:0;pointer-events:none}
.op-cloud{position:absolute;display:block;overflow:visible;opacity:0}
.op-cloud path{fill:#fffefa;stroke:#e6dab8;stroke-width:2px;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.op-cloud.c1{left:-3%;bottom:10%;width:min(30vw,420px);filter:blur(2.5px)}
.op-cloud.c2{right:3%;top:58%;width:min(22vw,300px)}
.op-cloud.c3{left:37%;top:11%;width:min(12vw,170px)}
.op-route{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.op-route.d{inset:auto;left:calc(50% - var(--op-vw) / 2);top:calc(var(--op-cy) - var(--op-vw) * .28125);width:var(--op-vw);height:calc(var(--op-vw) * .5625)}
.op-route.d .op-dots{vector-effect:non-scaling-stroke}
.op-route.m{display:none;inset:auto;left:0;top:calc(var(--op-cy) - 50vw);width:100vw;height:100vw}
@media(max-aspect-ratio:99/100){.op-route.d{display:none}.op-route.m{display:block}}
.op-dots{fill:none;stroke:#d8c98f;stroke-width:3;stroke-dasharray:0 12;stroke-linecap:round}
.op-rmask{fill:none;stroke:#fff;stroke-width:14;stroke-dasharray:1;stroke-dashoffset:1}
.op-vlift{--bl:40px;position:absolute;inset:calc(var(--bl) * -1);pointer-events:none;-webkit-mask-image:linear-gradient(#0000 calc(var(--bl) + var(--op-top)),#000 calc(var(--bl) + var(--op-top) + 16px),#000 calc(100% - var(--bl) - var(--op-bot) - 16px),#0000 calc(100% - var(--bl) - var(--op-bot)));mask-image:linear-gradient(#0000 calc(var(--bl) + var(--op-top)),#000 calc(var(--bl) + var(--op-top) + 16px),#000 calc(100% - var(--bl) - var(--op-bot) - 16px),#0000 calc(100% - var(--bl) - var(--op-bot)))}
.op-media{position:absolute;inset:auto;left:50%;top:var(--op-cy);width:var(--op-vw);max-width:none;height:auto;aspect-ratio:16/9;margin-left:calc(var(--op-vw) / -2);transform:translateY(-50%);object-fit:fill;display:block;opacity:0;-webkit-mask-image:linear-gradient(90deg,#0000,#000 24%,#000 76%,#0000),linear-gradient(#0000,#000 24%,#000 76%,#0000);mask-image:linear-gradient(90deg,#0000,#000 24%,#000 76%,#0000),linear-gradient(#0000,#000 24%,#000 76%,#0000);-webkit-mask-composite:source-in;mask-composite:intersect}
.op-media.on{opacity:1}
@media(max-aspect-ratio:99/100){.op-media{inset:auto;left:50%;top:var(--op-cy);width:150vw;max-width:none;height:auto;aspect-ratio:16/9;margin-left:-75vw;transform:translateY(-50%);object-fit:fill;-webkit-mask-composite:source-over;mask-composite:add;-webkit-mask-image:linear-gradient(#0000,#000 16%,#000 84%,#0000);mask-image:linear-gradient(#0000,#000 16%,#000 84%,#0000)}}

.op-fx{position:absolute;inset:0;z-index:3;pointer-events:none}
.op-logo{position:absolute;left:50%;top:50%;width:var(--op-logo-w);height:var(--op-logo-w);margin:calc(var(--op-logo-w) / -2) 0 0 calc(var(--op-logo-w) / -2);will-change:transform;z-index:3}
.op-logo img{display:block;width:100%;height:100%;object-fit:contain;opacity:0;transform-origin:50% 50%}
.op-halo{position:absolute;z-index:1;left:var(--op-cx);top:calc(var(--op-cy) + var(--op-logo-w) * .06);width:calc(var(--op-logo-w) * .935 * 1.55);height:calc(var(--op-logo-w) * .56 * 1.9);margin:calc(var(--op-logo-w) * -.532) 0 0 calc(var(--op-logo-w) * -.7243);opacity:0;border-radius:50%;background:radial-gradient(closest-side,#fffbedf2 0,#fffbedcc 45%,#fffbed00 100%)}
.op-ring{position:absolute;z-index:2;left:var(--op-cx);top:var(--op-cy);width:calc(var(--op-logo-w) * 1.075);height:calc(var(--op-logo-w) * 1.075);margin:calc(var(--op-logo-w) * -.5375) 0 0 calc(var(--op-logo-w) * -.5375);opacity:0;overflow:visible}
.op-ring circle{fill:none;stroke:#ffa657;stroke-width:2px;stroke-dasharray:6 7;vector-effect:non-scaling-stroke}
.op-fw{position:absolute;z-index:4;width:calc(var(--op-logo-w) * .42 * var(--s,1));height:calc(var(--op-logo-w) * .42 * var(--s,1));left:calc(var(--op-cx) + var(--op-logo-w) * var(--dx));top:calc(var(--op-cy) + var(--op-logo-w) * var(--dy));margin:calc(var(--op-logo-w) * -.21 * var(--s,1)) 0 0 calc(var(--op-logo-w) * -.21 * var(--s,1));overflow:visible}
.op-fw line{fill:none;stroke-linecap:round;stroke-width:3;opacity:0}
.op-fw polygon{opacity:0;transform-box:fill-box;transform-origin:50% 50%}
.op-welcome{position:absolute;z-index:3;left:0;right:0;top:calc(50% + var(--op-logo-w) * .304 + 16px);text-align:center;font:italic 15px/1.5 Georgia,"Times New Roman",serif;letter-spacing:.08em;color:#6f8a38;white-space:nowrap;text-shadow:0 0 3px #fffbed,0 0 3px #fffbed,0 0 6px #fffbed,0 0 6px #fffbed}
.op-welcome .w{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .04em .22em;margin-bottom:-.22em}
.op-welcome .w>span{display:inline-block;transform:translateY(118%)}

.op-ui{position:absolute;inset:0;z-index:5;pointer-events:none}
.op-rule{position:absolute;left:var(--op-pad);right:var(--op-pad);height:1px;background:#e2d6ae;transform-origin:0 50%;transform:scaleX(0)}
.op-rule.t{top:var(--op-top)}
.op-rule.b{bottom:var(--op-bot)}
.op-meta{position:absolute;font:600 11px/1 "Hiragino Maru Gothic ProN","Yu Gothic",Meiryo,sans-serif;letter-spacing:.14em;color:#9a8a66;white-space:nowrap;opacity:0;font-variant-numeric:tabular-nums}
.op-meta.tl{left:var(--op-pad);top:calc(var(--op-top) - 28px)}
.op-meta.tr{right:var(--op-pad);top:calc(var(--op-top) - 28px)}
.op-meta.bl{left:var(--op-pad);bottom:calc(var(--op-bot) - 40px);min-width:9em}
.op-meta.bl span{display:block}
.op-meta.bl .done{position:absolute;left:0;top:0;opacity:0;color:#7d9643}
.op-skip{position:absolute;pointer-events:auto;right:calc(var(--op-pad) - 12px);bottom:max(10px,env(safe-area-inset-bottom));min-width:44px;min-height:44px;padding:0 12px;border:0;background:none;color:#9a8a66;font:600 11px/1 "Hiragino Maru Gothic ProN","Yu Gothic",Meiryo,sans-serif;letter-spacing:.14em;cursor:pointer;opacity:0}
.op-skip:hover{color:#665338}
.op-skip:focus-visible{outline:3px solid #ffa657;outline-offset:-3px;border-radius:8px}
@media(max-width:700px){
#opening{--op-logo-w:min(76vw,320px);--op-top:38px;--op-bot:62px;--op-pad:16px}
.op-meta,.op-skip{font-size:9px}
.op-cloud.c3{display:none}
.op-welcome{font-size:13px}
.op-cloud.c1{width:44vw;bottom:14%}
.op-cloud.c2{width:34vw;top:11%}
.op-fw{--s:.9}
}

.op-panel{position:fixed;left:16px;bottom:16px;z-index:70;max-width:min(300px,calc(100vw - 32px));font:12px/1.4 "Hiragino Maru Gothic ProN","Yu Gothic",Meiryo,sans-serif;color:#665338}
.op-panel[hidden]{display:none}
.op-panel-box{background:#fffdf3;border:2px solid #c4d394;border-radius:18px;box-shadow:0 4px 0 #c4d395;padding:10px 12px;display:grid;gap:8px}
.op-panel-box[hidden]{display:none}
.op-panel b{font-size:11px;color:#809744;letter-spacing:.06em}
.op-row{display:flex;flex-wrap:wrap;gap:5px;align-items:center}
.op-panel button{min-height:36px;padding:0 11px;border:1.5px solid #c4d595;background:#fff;color:#677c3b;border-radius:18px;font:inherit;font-weight:700;cursor:pointer}
.op-panel button[aria-pressed="true"]{background:#d9ed96;color:#4a5e22}
.op-panel .op-replay{background:#ffa657;border-color:#ffa657;color:#fff}
.op-panel .op-chip{min-height:40px}
.op-readout{font-variant-numeric:tabular-nums;font-weight:700;color:#665338}
@media(max-width:800px){.op-panel{left:10px;bottom:140px}}