@charset "UTF-8";html{-webkit-font-smoothing:antialiased;text-shadow:1px 1px 1px rgba(0,0,0,.004);font-size:10px}body{box-sizing:border-box;min-height:100vh;margin:0;font-family:"Spoqa Han Sans",Sans-serif}body *,body ::after,body ::before{box-sizing:inherit}nav ol,nav ul{list-style:none;margin-top:0;margin-bottom:0;padding-left:0}.button{cursor:pointer;border:none;padding:0;background:0 0}.a11y-hidden{overflow:hidden;position:absolute;clip:rect(0 0 0 0);clip:rect(0,0,0,0);width:1px;height:1px;margin:-1px;border:0;padding:0}.a11y-hidden.focusable:focus{overflow:visible;position:static;clip:auto;width:auto;height:auto;margin:0}caption.a11y-hidden{position:static}.is-center{top:50%;left:50%;transform:translate(-50%,-50%)}.is-center-x{left:50%;transform:translateX(-50%)}.is-center-y{top:50%;transform:translateY(-50%)}.is-flex-center{display:flex;justify-content:center;align-items:center}.is-rwd{width:100%;height:auto}body{font-family:"Spoqa Han Sans";background:radial-gradient(circle,#504bd1 35%,#35318a)}body::before{content:"";opacity:1;position:fixed;z-index:5;top:0;right:0;bottom:0;left:0;background:radial-gradient(circle,#393939 35%,#121212);transition:opacity 1.4s ease-out}body.is-play::before{opacity:0}.album-container{position:fixed;z-index:100;max-width:600px;max-height:600px;width:60vw;height:60vw}.album-cover{position:absolute;top:0;right:0;bottom:0;left:0;margin:auto;border-radius:50%;transform:scale(0);box-shadow:0 0 16px rgba(0,0,0,.45)}.audiojs{opacity:0}.album-cover.is-play{animation:play .8s both}.album-cover.is-pause{animation:pause .8s both}.album-control{position:absolute;width:9rem;height:9rem;border-radius:50%;box-shadow:inset 0 6px 10px rgba(0,0,0,.3);background-color:#393939;transition:all .8s ease-out}.album-control:hover{background-color:#222}.button{position:absolute;width:4rem;height:4rem;animation-duration:.8s}.button:focus{outline:3px solid #fed63b}.button:active{outline:0}.button.is-play{background-image:url(https://cdn.rawgit.com/yamoo9/yamoo9.github.io/master/sef/images/play.svg);background-position:center center;background-repeat:no-repeat}.button.is-pause{background-image:url(https://cdn.rawgit.com/yamoo9/yamoo9.github.io/master/sef/images/pause.svg);background-position:center center;background-repeat:no-repeat}.button.is-pause,.button.is-play{opacity:1;transform:rotate(0);animation-name:play}.button.is-pre{opacity:0;visibility:hidden;transform:rotate(360deg);animation-name:pause}.playlist-container{position:fixed;top:50%;max-width:76rem;width:95vw;height:50vh;background-color:#504bd2;color:#fff;box-shadow:0 -5px 20px rgba(0,0,0,.3);animation-fill-mode:both;animation-duration:.8s}.playlist-container.is-open{top:50%;animation-name:open-playlist}.playlist-container.is-close{opacity:0;top:100%;animation-name:close-playlist}.playlist{max-width:60rem;width:90%;height:100%;margin:0 auto;padding:6rem 2rem 3rem}.playlist .title{font-size:2.6rem;font-weight:700;color:#fff}.playlist .item{display:flex;margin-top:1rem;font-size:1.8rem}.playlist .item.is-play{color:#fed63b}.playlist .is-number{flex:0 0 25px}.item:first-child .is-number{letter-spacing:.08em}.playlist .is-divider{flex:0 0 10px;color:#918fd2}.playlist a{cursor:pointer;display:inline-block;flex:1 0 50%;color:inherit;text-decoration:none;transition:all .3s ease-out}.playlist a:focus,.playlist a:hover{padding-left:.2em;color:#fed63b}.playlist a:active,.playlist a:focus{outline:0}.playlist .runtime{margin-left:15px;font-size:1.4rem;color:#c8c7ff}@media (max-width:768px){.album-container{width:90vw;height:90vw}.mobile .album-control .button{margin-left:-20px;margin-top:25px}.playlist{padding-top:3.4rem}.playlist .title{line-height:1.2;font-size:2rem}.playlist .item{margin-top:.4rem}.button.is-play{animation-name:album-play-m}.button.is-pause{animation-name:album-pause-m}}@keyframes open-playlist{from{top:100%;opacity:0}70%{opacity:1}to{top:50%}}@keyframes close-playlist{from{top:50%;opacity:1}70%{opacity:0}to{top:100%}}@keyframes play{from{transform:scale(0);transform:rotate(-135deg);opacity:0}to{transform:scale(1);transform:rotate(0);opacity:1}}@keyframes pause{from{transform:scale(1);transform:rotate(0);opacity:1}to{transform:scale(0);transform:rotate(180deg);opacity:0}}@keyframes album-play{from{transform:scale(.2);opacity:0}to{transform:scale(1);opacity:1}}@keyframes album-pause{from{transform:scale(1);opacity:1}30%{opacity:0}to{transform:scale(.2);opacity:0}}@keyframes album-play-m{from{transform:scale(.2);opacity:0}to{transform:scale(1);opacity:1}}@keyframes album-pause-m{from{transform:scale(1);opacity:1}30%{opacity:0}to{transform:scale(.2);opacity:0}}