html,body{margin:0;padding:0;background-color:#000;font-family:apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol;height:100dvh;overflow:hidden}#base{position:absolute;top:0;left:0;right:0;bottom:0}a{color:#fff}#time{position:absolute;bottom:calc(10px + env(safe-area-inset-bottom,0));left:30px;right:30px;margin:0;font-size:1.6rem;font-weight:700;color:#fff;text-align:right;line-height:1.8em;text-align:center;pointer-events:none;-webkit-user-select:none;user-select:none;padding:0;opacity:.8;transition:all .5s ease-out}#time.up{bottom:calc(65px + env(safe-area-inset-bottom,0))}#time .yyyymmdd{padding-right:0}#time .hhnnss{font-size:2.5em}#jaxa{position:absolute;top:10px;left:10px;width:150px;pointer-events:none;-webkit-user-select:none;user-select:none;opacity:0;transition:all .5s ease-out}#jaxa.show{opacity:.8}#credit{position:absolute;top:33px;right:30px;pointer-events:none;-webkit-user-select:none;user-select:none;color:#fffc;font-size:.5em;padding:0;text-align:right}#expirationAlert{position:absolute;width:80%;top:15%;left:50%;transform:translate(-50%,-50%);z-index:100;pointer-events:none;-webkit-user-select:none;user-select:none;color:#fff;font-size:.8em;padding:10px;text-align:center;font-weight:700;opacity:0}#expirationAlert.show{animation:fadeOut 5s;animation-fill-mode:both}@-webkit-keyframes fadeOut{0%{opacity:80%}90%{opacity:80%}to{opacity:0%}}@-moz-keyframes fadeOut{0%{opacity:80%}90%{opacity:80%}to{opacity:0%}}@keyframes fadeOut{0%{opacity:80%}90%{opacity:80%}to{opacity:0%}}#timeCtrl{position:absolute;bottom:env(safe-area-inset-bottom,0);left:0;right:0;height:60px;border-radius:0;border:none;text-align:center;color:#fff;z-index:-10;opacity:0;transition:all .5s ease-out;padding:0}#timeCtrl.show{z-index:10;opacity:1;transition:all .5s ease-out}#live{position:absolute;bottom:calc(75px + env(safe-area-inset-bottom,0));right:15px;background-color:#fff2;color:#fffc;border-radius:5px;border:#ffffffcc solid 2px;width:70px;height:40px;cursor:pointer;padding:0;font-size:.8em;font-weight:700;font-stretch:condensed;text-align:center;-webkit-user-select:none;user-select:none;z-index:-10;opacity:0;transition:all .5s ease-out}#live:not(.on):before{white-space:pre;content:"LIVE\aSTART"}#live.on{animation:blink .5s linear infinite alternate}#live.on:before{content:"LIVE"}#live.show{z-index:10;opacity:1;transition:all .5s ease-out}@-webkit-keyframes blink{0%{background-color:#fff2}to{background-color:#fff8}}@-moz-keyframes blink{0%{background-color:#fff2}to{background-color:#fff8}}@keyframes blink{0%{background-color:#fff2}to{background-color:#fff8}}#replay{position:absolute;bottom:calc(75px + env(safe-area-inset-bottom,0));left:15px;background-color:#fff2;color:#fffc;border-radius:5px;border:#ffffffcc solid 2px;width:70px;height:40px;cursor:pointer;padding:0;font-size:.8em;font-weight:700;font-stretch:condensed;text-align:center;-webkit-user-select:none;user-select:none;z-index:-10;opacity:0;transition:all .5s ease-out}#replay:not(.on):before{white-space:pre;content:"REPLAY\aSTART"}#replay.on{animation:blink .2s linear infinite alternate}#replay.on:before{content:"REPLAY"}#replay.show{z-index:10;opacity:1;transition:all .5s ease-out}#auto{position:absolute;top:15px;left:15px;background-color:#fff2;color:#fffc;border-radius:5px;border:#ffffffcc solid 2px;width:70px;height:40px;cursor:pointer;padding:0;font-size:.8em;font-weight:700;font-stretch:condensed;text-align:center;-webkit-user-select:none;user-select:none;z-index:-10;opacity:0;transition:all .5s ease-out}#auto:before{white-space:pre;content:"CAMERA\a AUTO"}#auto.show{z-index:10;opacity:1;transition:all .5s ease-out}.details{position:absolute;bottom:10px;left:50%;transform:translate(-50%);width:700px;height:200px;padding:2px;background-color:#333e;color:#fff;border-radius:5px;border:#00000000 solid 0px;border-left:#cccccc solid 10px;z-index:-1;pointer-events:none;-webkit-user-select:none;user-select:none;opacity:0;transition:all .5s ease-out}.details.show{pointer-events:auto;-webkit-user-select:auto;user-select:auto;opacity:1;z-index:10000}.details .close{position:absolute;top:10px;right:10px;cursor:pointer}.details h2{position:absolute;top:30px;left:25px;z-index:10002;font-size:1.2em}.details h3{position:absolute;top:80px;left:25px;z-index:10002;font-size:.8em;margin:0}.details .link{position:absolute;top:65px;right:20px;z-index:10002;color:#fff}.details .link:before{content:"詳細はこちらへ"}.details .inner{position:absolute;bottom:5px;left:5px;right:5px;font-size:.9em;height:70px;z-index:10002;padding:0 20px 20px;overflow-y:scroll}.details .cg{position:absolute;top:-100px;left:10;width:250px;z-index:10002;filter:drop-shadow(0px 0px 10px #ccc);pointer-events:none;-webkit-user-select:none;user-select:none}.details .logo{position:absolute;top:-50px;right:80px;width:100px;z-index:10003;filter:drop-shadow(0px 0px 10px #ccc);pointer-events:none;-webkit-user-select:none;user-select:none}@media (max-width:700px) or (max-height:700px){#time{font-size:1.2rem;bottom:calc(10px + env(safe-area-inset-bottom,0))}#jaxa{width:100px}}@media (max-width:700px) or (orientation: portrait){#time{left:10px;right:10px;text-align:center;transition:all .5s ease-out}#time.up{font-size:1em;bottom:calc(65px + env(safe-area-inset-bottom,0))}#time .yyyymmdd{padding-right:0}.details{transform:translate(0);left:10px;right:10px;width:auto}.details .link:before{content:"詳細"}.details .cg{top:-70px;left:10;width:200px}.details .logo{top:-30px;right:65px;width:60px}}@media (max-width:400px){.details .logo{top:-20px;right:60px;width:40px}}
