.noto-sans-jp-regular{font-optical-sizing:auto;font-family:Noto Sans JP,serif;font-style:normal;font-weight:400}.noto-sans-jp-medium{font-optical-sizing:auto;font-family:Noto Sans JP,serif;font-style:normal;font-weight:500}.noto-sans-jp-semi-bold{font-optical-sizing:auto;font-family:Noto Sans JP,serif;font-style:normal;font-weight:600}.noto-sans-jp-bold{font-optical-sizing:auto;font-family:Noto Sans JP,serif;font-style:normal;font-weight:700}.zen-kaku-gothic-new-medium{font-family:Zen Kaku Gothic New,serif;font-style:normal;font-weight:500}.zen-kaku-gothic-new-bold{font-family:Zen Kaku Gothic New,serif;font-style:normal;font-weight:700}.zen-kaku-gothic-new-black{font-family:Zen Kaku Gothic New,serif;font-style:normal;font-weight:900}.zen-maru-gothic-regular{font-family:Zen Maru Gothic,serif;font-style:normal;font-weight:400}.shippori-antique-b1-regular{font-family:Shippori Antique B1,serif;font-style:normal;font-weight:400}.hiragino-kaku-gothic-pron{font-family:hiragino-kaku-gothic-pron,sans-serif;font-style:normal;font-weight:600}.hiragino-mincho-pron{font-family:hiragino-mincho-pron,sans-serif;font-style:normal;font-weight:600}.fot-cezanne-pron{font-family:fot-cezanne-pron,sans-serif;font-style:normal;font-weight:500}.klee-one{font-family:klee-one,sans-serif;font-style:normal;font-weight:600}.source-han-sans-japanese{font-family:source-han-sans-japanese,sans-serif;font-style:normal;font-weight:900}.shippori-mincho-b1{font-family:shippori-mincho-b1,sans-serif;font-style:normal;font-weight:800}:root{--MainBG:#000;--MainColor:#fff;--MainAccent:red;--SecondAccent:#fff;--First-font:"Arial",sans-serif;--Second-font:"Noto Sans JP",sans-serif}*{font-family:var(--First-font)}body{font-family:var(--First-font);background-color:var(--MainBG);font-weight:700}button{color:var(--MainColor);cursor:pointer;font-size:20px;font-family:var(--First-font);background-color:#0000;border:none}.Components{color:var(--MainColor);border:4px 4px 4px 4px solid var(--MainColor);scrollbar-width:thin;width:50vw;height:50vh;position:absolute;top:50vh;left:50vw;overflow-y:auto;transform:translate(-50%,-50%)}.mySiteLink{color:var(--MainColor);text-decoration:none;position:absolute;bottom:1em;left:50vw;transform:translate(-50%)}.GithubLink{color:var(--MainColor);fill:var(--MainColor);text-decoration:none;position:absolute;bottom:1em;right:64px;transform:translate(-50%)}.XLink{color:var(--MainColor);fill:var(--MainColor);text-decoration:none;position:absolute;bottom:1em;right:16px;transform:translate(-50%)}
.tab{color:var(--MainColor);margin-left:5vw;position:absolute;top:50vh;transform:translateY(-50%)}button{border:none;font-size:1.2rem}.tab-Btn{transition:color .5s cubic-bezier(0,.7,.2,1)}.tab-Btn:hover{background:linear-gradient(to top,var(--MainAccent)50%,var(--MainBG)50%);background-size:100% 200%;animation:1s cubic-bezier(0,.7,.2,1) slideInLeft}@keyframes slideInLeft{0%{background-position:0 100%}to{background-position:0 0}}
.header{color:var(--MainColor);grid-template-columns:1fr auto 1fr;align-items:center;width:100%;display:grid;position:fixed;top:0;left:0}.title{grid-column:2;justify-self:center}.title span{color:var(--MainAccent)}.current-time{margin:0;position:fixed;top:2em;right:1em}.player-card{margin:0;position:fixed;top:1.4em;left:1em}.player-panel{background-color:var(--MainBG);border:solid 2px var(--MainAccent);z-index:1000;border-radius:8px;width:280px;height:200px;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%)}button{transition:color .5s cubic-bezier(0,.7,.2,1)}button:hover{background:linear-gradient(to top,var(--MainAccent)50%,var(--MainBG)50%);background-size:100% 200%;animation:1s cubic-bezier(0,.7,.2,1) slideInLeft}@keyframes slideInLeft{0%{background-position:0 100%}to{background-position:0 0}}
.home-container{justify-content:center;align-items:center;display:flex}.openbtn{color:var(--MainColor);padding:10px 20px;font-size:50px;position:fixed;top:50%;transform:translateY(-100%)}
.selectbox-5{align-items:center;margin-left:1em;display:inline-flex;position:relative}.selectbox-5:after{background-color:var(--MainColor);clip-path:polygon(0 0,100% 0,50% 100%);content:"";pointer-events:none;width:10px;height:7px;position:absolute;right:15px}.selectbox-5 select{appearance:none;border:none;border-bottom:2px solid var(--MainColor);background-color:var(--MainBG);min-width:230px;height:2.8em;color:var(--MainColor);cursor:pointer;padding:.4em calc(.8em + 30px) .4em .8em;font-size:1em}.selectbox-5 select:focus{outline:none}
.webgl-popup{background-color:var(--MainBG);width:720px;height:600px;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:-5px -5px 60px #8080801a,5px 5px 60px #8080801a}.webgl-popup canvas{image-rendering:-moz-crisp-edges;image-rendering:-webkit-optimize-contrast;image-rendering:crisp-edges;image-rendering:pixelated;width:720px!important;height:600px!important}.webgl-popup button{position:absolute;top:-64px;left:auto;right:-10px}
.p-4{color:var(--MainColor)}button{color:var(--MainColor);margin:1em}
table{border-collapse:collapse;width:98%}th,td{border:1px solid var(--MainColor);text-align:left;padding:8px}th{background-color:var(--MainBG);font-weight:700}tr:nth-child(2n){background-color:var(--MainBG)}
@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.rotating-element svg{transform-origin:50%}.rotating-element:hover svg{animation:2s cubic-bezier(.9,0,.1,1) infinite rotate}
.BG-anim{opacity:.5;z-index:-1;will-change:transform;backface-visibility:hidden;perspective:1000px;width:100%;height:100%;position:fixed;top:0;left:0;overflow:hidden;transform:translateZ(0)}.svg-container{will-change:transform;width:0;height:0;position:absolute;top:6%;left:50%;transform:translateZ(0)}.BG-svg{transform-origin:50%;backface-visibility:hidden;will-change:transform;position:absolute;top:0;left:0;transform:translate(-50%,-50%)}.rotate-clockwise{will-change:transform;animation-name:rotateClockwise;animation-timing-function:linear;animation-iteration-count:infinite}.rotate-counterclockwise{will-change:transform;animation-name:rotateCounterClockwise;animation-timing-function:linear;animation-iteration-count:infinite}.rotate-speed-20{animation-duration:20s}.rotate-speed-25{animation-duration:25s}.rotate-speed-30{animation-duration:30s}.rotate-speed-40{animation-duration:40s}.rotate-speed-50{animation-duration:50s}.rotate-speed-60{animation-duration:60s}.rotate-speed-70{animation-duration:70s}.rotate-speed-80{animation-duration:80s}.rotate-speed-90{animation-duration:90s}.rotate-speed-100{animation-duration:100s}.rotate-speed-120{animation-duration:120s}@keyframes rotateClockwise{0%{transform:translate(-50%,-50%)rotate(0)}to{transform:translate(-50%,-50%)rotate(360deg)}}@keyframes rotateCounterClockwise{0%{transform:translate(-50%,-50%)rotate(0)}to{transform:translate(-50%,-50%)rotate(-360deg)}}@media (prefers-reduced-motion:reduce){.rotate-clockwise,.rotate-counterclockwise{animation-duration:180s!important}}
.animation-settings{color:var(--MainColor);margin:1.5rem 0}.toggle-container{align-items:center;margin:1rem 0 1rem 1em;display:flex}.toggle-switch{width:50px;height:28px;margin-right:10px;display:inline-block;position:relative}.toggle-switch input{opacity:0;width:0;height:0}.toggle-slider{cursor:pointer;background-color:var(--MainBG);border:2px solid var(--MainColor);border-radius:34px;transition:all .4s;position:absolute;inset:0}.toggle-slider:before{content:"";background-color:var(--MainColor);border-radius:50%;width:20px;height:20px;transition:all .4s;position:absolute;bottom:2px;left:2px}input:checked+.toggle-slider{background-color:var(--MainAccent);border-color:var(--MainAccent)}input:checked+.toggle-slider:before{background-color:var(--MainBG);transform:translate(22px)}.toggle-label{font-size:1.1rem}.settings-info{opacity:.8;max-width:80%;margin:1rem 0 1rem 1em;font-size:.9rem}
.loading-container{min-height:200px;color:var(--MainColor);flex-direction:column;justify-content:center;align-items:center;display:flex}.loading-spinner{border:4px solid #ffffff1a;border-left-color:var(--MainAccent);border-radius:50%;width:50px;height:50px;animation:1s linear infinite spin}.loading-text{opacity:.9;font-size:1.1rem;font-family:var(--First-font);margin-top:15px}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (prefers-reduced-motion:reduce){.loading-spinner{animation-duration:2s}}