:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;text-decoration:inherit}body{margin:0;display:flex;min-width:320px;min-height:100dvh}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}@media (prefers-color-scheme: dark){p{color:#eee}a:hover{color:#99f}button{background-color:#333}}#root{max-width:1280px;margin:0 auto;padding:1.5rem;text-align:left}.header-links{display:flex;position:fixed;top:0rem;right:1rem;font-size:1.5rem;background-color:#fff;box-shadow:0 2px 4px #0000001a}.link-text{text-decoration:none}.dd-link{display:block;width:95px;height:36px;padding-top:.5rem;text-align:center;font-size:1.2rem;color:#242424;border-bottom:solid 2px blue;cursor:pointer;transition:all .3s ease}.dd-link:hover{background-color:#f9f9f9;color:#333}.header{font-family:"M PLUS Rounded 1c",sans-serif;font-weight:700;font-style:bold;font-size:3rem;margin-top:1rem;margin-bottom:1rem}.title{color:#000;font-size:1.5rem;margin:0;margin-right:1rem;transition:color .3s ease}.center{text-align:center}.text-box{font-size:1rem;padding:.5rem;width:250px;margin-top:-1rem;margin-bottom:.5rem;border:1px solid #ccc;border-radius:4px;transition:border-color .3s}.text-box:focus{border-color:#777;outline:none}.side-by-side{display:flex;align-items:center;gap:1rem}.singer{font-family:century,serif;margin:0}.date{font-family:century,serif;text-align:right;margin:auto;margin-top:.2rem}.works{color:#000;width:600px;margin:1rem auto;padding:1rem;border:1px solid #ddd;border-radius:8px;background-color:#fff;transition:all .3s ease}.works:hover{background-color:#f9f9f9;color:#333}.to-terms,.subscribe{transition:color .3s ease;font-size:1rem}.footer{display:flex}.sns-link{display:flex;justify-content:center;align-items:center;width:30px;height:30px;margin-left:1rem;border-radius:50%;background-color:#eee;margin-top:1rem;color:#000;transition:all .3s ease}.sns-link:hover{background-color:#ddd}.yt:after{content:"";font-family:"Font Awesome 7 Brands";font-weight:400}.yt:hover{color:red}.x:after{content:"";font-family:"Font Awesome 7 Brands";font-weight:400}.x:hover{color:#333}.ig:after{content:"";font-family:"Font Awesome 7 Brands";font-weight:400}.ig:hover{color:#e22cd6}.about{font-weight:400;color:#242424;transition:all .3s ease}.about:hover{color:#333}@media screen and (max-width:650px){.header-links{right:0}.header{font-size:2.5rem}.dd-link{width:90px;height:33.4px;font-size:1.1rem}.title{font-size:1.2rem}.checkboxes{font-size:.8rem}.works{width:80vw;min-width:280px}}@media screen and (max-width:400px){.header{font-size:2rem}.works{width:75vw;min-width:auto;font-size:.8rem}.singer,.date{font-size:.8rem}}@media (prefers-color-scheme: light){#root{background-color:#fff;color:#213547}.header,.title{color:#213547}.to-terms{color:#d22}.to-terms:hover{color:#a11}.subscribe{color:#227}.subscribe:hover{color:#114}}@media (prefers-color-scheme: dark){#root{background-color:#242424;color:#ffffffde}.header-links{background-color:#333;box-shadow:0 2px 4px #00000080}.dd-link{border-bottom:solid 2px #777;color:#eee}.dd-link:hover{background-color:#444;color:#fff}.header{color:#eee}.title{color:#ffffffde}.works{background-color:#333;border:1px solid #555;color:#eee}.works:hover{background-color:#444;color:#fff}.to-terms{color:#f55}.to-terms:hover{color:#c33}.subscribe{color:#77c}.subscribe:hover{color:#55f}.about{color:#eee}.about:hover{color:#ccc}}.detail{width:90vw;text-align:left;font-family:Arial,sans-serif;color:#333}.detail .title{font-size:2rem;font-weight:700;float:none}.detail .title:hover{color:#000}.detail .date{text-align:center;font-size:1.2rem}.detail .singer{font-size:1.2rem}.under-detail{position:sticky;text-align:center;background-color:#fff}.under-detail p{margin-bottom:0}.link{margin-top:.5rem;margin-bottom:.5rem;display:inline-block;padding:.5rem 1rem;border:1px solid #ccc;border-radius:5px;background-color:#fff;color:#000;transition:background-color .3s,border-color .3s,color .3s}.link:hover{background-color:#000;color:#fff;border-color:#999}.download{margin-top:1rem;display:inline-block;padding:.5rem 1rem;border:1px solid #ccc;border-radius:5px;background-color:#fff;color:#000;transition:background-color .3s,border-color .3s,color .3s}.download:after{content:"";font-family:"Font Awesome 7 Free";position:relative;font-weight:900;margin-left:.5rem}.download:hover{background-color:#000;color:#fff;border-color:#999}.youtube{margin-top:1rem;display:inline-block;padding:.5rem 1rem;border:1px solid #ccc;border-radius:5px;background-color:#fff;color:#000;transition:background-color .3s,border-color .3s,color .3s}.youtube:after{content:"";font-family:"Font Awesome 7 Brands";position:relative;font-weight:400;margin-left:.5rem}.youtube:hover{background-color:#000;color:#fff;border-color:#999}.youtube-aspect iframe{margin-top:1rem;min-width:400px;aspect-ratio:16/9}.box{margin-top:1rem;min-width:400px;aspect-ratio:16/9;background-color:#ccc}@media screen and (min-width:750px){.detail{display:flex;justify-content:space-around;gap:24px}.detail .left-side{flex:1 1 50%}.detail .right-side{flex:1 1 50%;text-align:center}.under-detail{top:100vh;top:100dvh}}@media screen and (max-width:749px) and (min-width:481px){.detail{width:100%}.detail .title{font-size:1.8rem;float:none;margin:0}.detail .date{float:none;margin:0}.detail .right-side{text-align:center}}@media screen and (max-width:480px){.detail{width:100%;text-align:center}.detail .title{font-size:1.5rem;float:none;margin:0}.detail .date{float:none;margin:0}.under-detail{font-size:.9rem}.youtube-aspect iframe{max-width:100%;min-width:0;aspect-ratio:16/9}.box{text-align:left;max-width:100%;min-width:0;aspect-ratio:16/9}}@media (prefers-color-scheme: light){.link,.download,.youtube{color:#333;border-color:#ccc}.link:hover,.download:hover,.youtube:hover{background-color:#333;border-color:#999}}@media (prefers-color-scheme: dark){.link,.download,.youtube{background-color:#333;color:#eee;border-color:#555}.link:hover,.download:hover,.youtube:hover{background-color:#eee;color:#333;border-color:#777}.under-detail{background-color:#242424}.box{background-color:#555;color:#eee}}button{font-weight:500;text-decoration:inherit;cursor:pointer}
