html.intro-active { overflow:hidden; background:#173d33; }
html.intro-active #root { visibility:hidden; }
#site-intro { position:fixed; inset:0; z-index:10000; display:grid; place-items:center; color:#fff; font-family:Meiryo,"Hiragino Kaku Gothic ProN",sans-serif; }
.intro-panel { position:absolute; top:0; bottom:0; width:50.15%; background:#173d33; transition:transform .72s cubic-bezier(.76,0,.24,1); }
.intro-left { left:0; }.intro-right { right:0; }
.intro-content { position:relative; display:flex; flex-direction:column; align-items:center; width:min(320px,80vw); transition:opacity .22s ease,transform .4s ease; }
.intro-content>svg { width:74px; margin-bottom:19px; }
.intro-content>small { font-size:12px; letter-spacing:.3em; }.intro-content>strong { font-size:32px; letter-spacing:.16em; margin:5px 0 7px; }
.intro-en { color:#b4d5c6; letter-spacing:.2em; font-size:11px; }
.intro-progress { margin-top:38px; font-size:38px; font-weight:400; font-variant-numeric:tabular-nums; line-height:1.3; letter-spacing:.04em; }
.intro-progress small { font-size:14px; margin-left:6px; color:#b4d5c6; }
.intro-line { width:180px; height:2px; background:#ffffff26; margin:15px 0; overflow:hidden; }.intro-line i { display:block; width:100%; height:100%; background:#8bbf47; transform:scaleX(0); transform-origin:left; }
.intro-content>p { color:#c3dbcf; font-size:12px; letter-spacing:.08em; margin:0; }
.intro-content>button { margin-top:27px; min-height:44px; padding:10px 16px; border:1px solid #ffffff42; border-radius:3px; color:#dfede5; background:transparent; font:inherit; font-size:12px; cursor:pointer; }
.intro-content>button:focus-visible { outline:2px solid #bce47c; outline-offset:4px; }
.intro-sparks { position:absolute; inset:0; overflow:hidden; pointer-events:none; transition:opacity .2s; }
.intro-sparks i { position:absolute; left:19%; top:64%; width:62px; aspect-ratio:1; clip-path:polygon(50% 0,100% 100%,0 100%); background:#8bbf47; opacity:.07; animation:intro-rise 2.5s ease-out both; }
.intro-sparks i:nth-child(2) { left:auto; right:18%; top:28%; width:110px; animation-delay:-.6s; opacity:.045; }.intro-sparks i:nth-child(3) { left:70%; top:80%; width:25px; animation-delay:-1s; }
@keyframes intro-rise { from { transform:translateY(65px) rotate(-12deg); } to { transform:translateY(-35px) rotate(10deg); } }
.intro-exit .intro-left { transform:translateX(-100%); }.intro-exit .intro-right { transform:translateX(100%); }
.intro-exit .intro-content { opacity:0; transform:scale(1.07); pointer-events:none; }.intro-exit .intro-sparks { opacity:0; }
@media(max-width:700px) { .intro-content>strong { font-size:29px; }.intro-sparks i:nth-child(2) { right:7%; width:80px; } }
@media(prefers-reduced-motion:reduce) { .intro-panel { transition:opacity .08s; }.intro-sparks { display:none; }.intro-exit .intro-panel { transform:none; opacity:0; }.intro-content { transition:opacity .08s; }.intro-exit .intro-content { transform:none; } }