body{background:#000}.appwrap{aspect-ratio:4/3;max-width:100vw;max-height:100vh;overflow:hidden;margin:auto;position:relative}.mainwrap{background:url(../images/stage/login_bg.webp?v=a33b6593) no-repeat top center;background-size:cover;position:relative;width:100%;height:100%}.mainwrap .top{height:20%;position:relative;overflow:visible}.mainwrap .top:before{content:"";background:url(../images/stage/head_design.png?v=981f719c) no-repeat top;background-size:100%;position:absolute;width:100%;top:0;bottom:0;z-index:5}.mainwrap .top:after{content:"";background:url(../images/stage/curtain_top.png?v=803f649b) no-repeat top center;background-size:100%;position:absolute;width:100%;top:20%;bottom:-40%;z-index:4}.mainwrap .top ul{position:relative;z-index:6;padding:.5rem;margin:0}.mainwrap .top ul li{list-style:none;display:inline-block}.mainwrap .mid{height:80%;position:relative}.mainwrap .mid:before{content:"";background:url(../images/stage/curtain_left.png?v=841a8018) no-repeat top left;background-size:cover;position:absolute;width:20%;top:-10%;bottom:0;left:0;z-index:3}.mainwrap .mid:after{content:"";background:url(../images/stage/curtain_right.png?v=17163faa) no-repeat top right;background-size:cover;position:absolute;width:20%;top:-10%;bottom:0;right:0;z-index:3}.mainwrap .content{padding:0 20%;height:100%;background:url(../images/stage/img_stage.png?v=7d6677b5) no-repeat bottom center;background-size:100%}.mainwrap .content h3{text-align:center}.mainwrap .content h3 img{width:auto;height:10%;max-height:140px;margin-top:-40px}.mainwrap.submit .mid:before,.mainwrap.submit .mid:after{content:none}.mainwrap.submit .content{padding:0 5%;height:100%;background:transparent}.mainwrap .char-wrap{width:100%;position:absolute;bottom:0;text-align:center}.mainwrap .char-wrap img{width:14%;margin:0 2%}.mainwrap .char-wrap img:nth-child(2n){transform:translateY(-20%)}.subwrap{background:url(../images/stage/sub_bg.webp?v=26827613) no-repeat top center;background-size:cover;position:relative;width:100%;height:100%}.subwrap .top{height:15%;position:relative;overflow:visible}.subwrap .top:before{content:"";background:url(../images/stage/bg-subhead.webp?v=59134d0e) no-repeat top;background-size:100%;position:absolute;width:100%;top:0;bottom:0;z-index:5}.subwrap .top ul{position:relative;z-index:6;padding:.5rem;margin:0}.subwrap .top ul li{list-style:none;display:inline-block}.subwrap .top ul.sub-options{position:absolute;right:2rem;top:3.5rem}.subwrap .top h3{position:relative;z-index:5;margin-top:-4rem;text-align:center}.subwrap .top h3 img{width:32%}.subwrap .content{position:relative;z-index:7;padding:0;height:75vh}.subwrap .content h3{text-align:center}.subwrap .content h3 img{width:40%;height:10%;max-height:160px;margin-top:-20px}.subwrap .content .creation-content{padding:1rem 2.4rem;overflow:auto;max-height:70vh;height:100%}.subwrap .content .creation-content .melody-group{padding-bottom:2rem}.form-control::placeholder{color:#9a9a9a;font-size:1.25rem}.form-control:hover{border-color:#e76f44}.form-control:focus{border-color:#1c7fc2;box-shadow:none}.btn{width:100%;border-radius:1rem;height:4rem;font-size:1.5rem;font-weight:600;padding:.75rem 2rem}.btn-small{border-radius:.75rem;height:2.8rem;font-size:1rem;padding:.6rem 1.5rem}.btn-xsmall{border-radius:.75rem;height:2.4rem;font-size:1rem;padding:.3rem 1rem}.btn-pink{background-color:var(--yl-cancel);color:var(--yl-cancel-ink)}.btn-pink:hover{border-color:var(--yl-cancel-hover-border);background-color:var(--yl-cancel-hover);color:var(--yl-cancel-ink)}.btn-gray{background-color:var(--yl-quiet);color:var(--yl-quiet-ink)}.btn-gray:hover{border-color:var(--yl-quiet-hover-border);background-color:var(--yl-quiet-hover);color:var(--yl-quiet-hover-ink)}.btn-circred{padding:.5rem;text-align:center;display:flex;flex-wrap:wrap;justify-content:center;align-content:center;border-radius:999px;border:2px solid #FFF;background:#e76474;background:linear-gradient(90deg,#e76474,#ed909c);transition:all .1s linear}.btn-circred:hover{background:linear-gradient(90deg,#ed909c,#e76474);transform:translateY(-2px);box-shadow:#e76474 0 2px 2px}.ico{display:block;width:30px;height:30px;background-size:cover;background-repeat:no-repeat;background-color:transparent;background-position:center}.ico-back{background-image:url(../images/icon/icon-back.webp?v=67896107)}.ico-home{background-image:url(../images/icon/icon-home.webp?v=0c5e5525)}.ico-help{background-image:url(../images/icon/icon-help.webp?v=cc90031c)}.ico-logout{background-image:url(../images/icon/icon-logout.webp?v=f6608dcd)}.ico-refresh{background-image:url(../images/icon/icon-refresh.webp?v=d6ab5001)}.ico-play{background-image:url(../images/icon/icon-play.webp?v=dfc99a65)}.ico-save{background-image:url(../images/icon/icon-save.webp?v=16416fba)}.ico-share{background-image:url(../images/icon/icon-share.png?v=b42be2cf)}.ico-stop{background-image:url(../images/icon/icon-stop.png?v=1d8c86ae)}.btn-circblue{width:50px;height:50px;text-align:center;display:flex;flex-wrap:wrap;justify-content:center;align-content:center;border-radius:999px;border:2px solid #FFF;background:#e76474;background:linear-gradient(90deg,#e76474,#ed909c);transition:all .1s linear;background:#1c7fc2;background:linear-gradient(90deg,#1c7fc2,#8dbfe1)}.btn-circblue span.ico{width:24px;background-size:contain}.btn-circblue:hover{background:linear-gradient(90deg,#ed909c,#e76474);transform:translateY(-2px);box-shadow:#e76474 0 2px 2px}.btn-circblue:hover{background:linear-gradient(90deg,#8dbfe1,#1c7fc2);box-shadow:#1c7fc2 0 2px 2px}.btn-openfile{text-align:center;display:flex;flex-wrap:wrap;justify-content:center;align-content:center;border-radius:999px;border:2px solid #FFF;background:#e76474;background:linear-gradient(90deg,#e76474,#ed909c);transition:all .1s linear;border-radius:2rem;margin:1rem auto 0;width:80%;aspect-ratio:1/1}.btn-openfile:hover{background:linear-gradient(90deg,#ed909c,#e76474);transform:translateY(-2px);box-shadow:#e76474 0 2px 2px}.btn-openfile .ico-openfile{background-image:url(../images/icon/ico-notelink.png?v=0ab04bce);background-size:80%;background-repeat:no-repeat;background-position:center;width:80%;aspect-ratio:1/1;display:block}.preloader-wrap{text-align:center;color:#fff;font-size:1.5rem;padding-top:30%}.preloader-wrap .preloader{background:url(../images/preloader.png?v=034809f6) no-repeat center;background-size:cover;width:144px;height:144px;margin:0 auto;animation-name:spin;animation-duration:1.5s;animation-iteration-count:infinite;animation-timing-function:linear}@-moz-keyframes spin{0%{-moz-transform:rotate(0deg)}to{-moz-transform:rotate(360deg)}}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg)}to{-webkit-transform:rotate(360deg)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.modal-content{background-color:#ffffe7;padding:8px;border-radius:16px}.modal-content .modal-body{border:#E76474 2px dashed;border-radius:8px;padding:40px 24px}.modal-content .ddicon{width:2.5rem;height:2.5rem}.modal-dialog{max-width:80%}.modal-dialog .modal-content{background-color:#ffffe7;padding:16px;border-radius:2rem}.modal-dialog .modal-content .modal-body{border:#E76474 .25rem dashed;border-radius:1rem;padding:2rem}.modal-dialog .modal-content .modal-body .cta-wrap{padding-top:1rem}.modal-dialog .modal-content .modal-body .cta-wrap .btn{width:auto}.modal-dialog.savemodal{height:80vh;padding-top:5%;max-width:500px;max-height:450px}.modal-dialog.savemodal .modal-content{height:100%;position:relative;text-align:left}.modal-dialog.savemodal .modal-content .ttlwrap h3{background:#e76f44 0%;background:linear-gradient(0deg,#e76f44,#f3b7a1)}.modal-dialog.savemodal .modal-content .modal-save-wrap{background:url(../images/characters/char-human.png?v=a505e8b5) no-repeat bottom right;background-size:30%;height:100%;display:flex;flex-direction:column;gap:1rem;padding:2rem 1rem}.modal-dialog.savemodal .modal-content .modal-save-wrap input{height:44px;width:70%}.modal-dialog.savemodal p{font-weight:600;margin:0}.modal-dialog.modal-validation{max-width:24%;padding-top:20%}.modal-dialog.modal-validation .modal-content{padding:8px;border-radius:1.5rem}.modal-dialog.modal-validation .modal-content .modal-body{border:#E76474 2px dashed}.ttlwrap{top:-5%;left:0;right:0;position:absolute;z-index:99;text-align:center}.ttlwrap h3{border-radius:99px;text-align:center;padding:1rem 2rem 1rem 5rem;margin:0 auto;display:inline-block;min-width:200px;max-width:80%;font-size:2rem;color:#08263a;font-weight:900;position:relative}.ttlwrap h3:before{content:"";background:url(../images/icon/ico-titlestar.webp?v=29b880d6) no-repeat;background-size:contain;width:64px;height:64px;display:block;position:absolute;left:16px;top:0}.popup-notif-wrap .popup-notif{font-size:24px;text-align:center}.login-banner{background:url(../images/login/login_banner.png?v=bc3580a8) no-repeat top center;background-size:contain;position:absolute;width:100%;top:0;bottom:0;left:0}.menu-wrap{position:relative;height:100%}.menu-wrap:before{content:"";background:url(../images/menu/link-lines.webp?v=9b3f4e40) no-repeat;background-size:contain;width:100%;height:100%;position:absolute;top:-10%;bottom:0;left:0}.menu-wrap>a{text-indent:-9999px;position:absolute;transition:all .1s linear;background-size:contain;background-repeat:no-repeat;width:55%;height:25%;max-width:400px;max-height:180px;display:block;z-index:7}.menu-wrap>a:hover{transform:translateY(-4px)}.menu-wrap .link-rhythm{background-image:url(../images/menu/link-rhythm.webp?v=c89e977a);left:-30px;top:0}.menu-wrap .link-melody{background-image:url(../images/menu/link-melody.webp?v=71a0f9ad);right:-40px;top:12%}.menu-wrap .link-submit{background-image:url(../images/menu/link-submit.webp?v=5ebed610);left:25%;top:32%}.maincontent{display:flex;gap:2rem}.maincontent.wrap{flex-wrap:wrap}.maincontent .left:not(.rhythm-measure-box){flex-grow:0;flex-shrink:0;flex-basis:60%}.maincontent .right:not(.rhythm-measure-box){flex-grow:1}.maincontent .full{flex-grow:0;flex-shrink:0;flex-basis:100%}.cbox{padding:2rem;border-radius:1.25rem;background-color:#fff}.cbox.nopad-side{padding-left:0;padding-right:0}.cbox h2{color:#e76474;font-size:2.4vw;text-align:center}.wborder{border-style:solid;border-top-width:2px;border-left-width:2px;border-right-width:2px;border-bottom-width:4px}.wborder.blue{border-color:#60a5d4}.wborder.red{border-color:#ed909c}.dv-flexlist{border:0;flex:1 1 auto;height:auto;min-height:0;overflow-x:hidden;overflow-y:auto;padding:0}.dv-flexlist .dropdown{border-bottom:#D8D8D8 1px solid;cursor:pointer}.dv-flexlist .dropdown:hover{background-color:#e8f2f9}.dv-flexlist .dropdown:active{background-color:#d7edfd}.dv-flexlist .dropdown:nth-child(1){border-top:#D8D8D8 1px solid}.dv-flexlist .dropdown:last-child{border-bottom:none}.dv-flexlist .dropdown .dropdown-menu{margin-left:60%;margin-top:-1rem;box-shadow:0 10px 10px #0000001a}.dv-flexlist .dropdown .dropdown-menu .dropdown-item:hover,.dv-flexlist .dropdown .dropdown-menu .dropdown-item:focus{background-color:#e8f2f9}.dv-flexlist .dropdown .dropdown-menu .dropdown-item:focus{color:#1c7fc2}.dv-flexrow{display:flex;padding:1rem 2rem;gap:.5rem}.dv-flexrow p{margin:0;color:#145988}.dv-flexrow p:nth-child(2){width:100%}.dv-flexrow .icon{width:1.5rem;height:1.5rem;align-content:center;background:url(../images/icon/ico-error.png?v=9d30524d) no-repeat left;background-size:contain}.dv-flexrow .icon.noerror{opacity:0}.dv-flexrow .icon.witherror{opacity:1}.ddicon{width:1.25rem;height:1.25rem;background-repeat:no-repeat;background-size:contain;display:inline-block;vertical-align:middle;margin-right:.25rem}.ddicon.mlist{background-image:url(../images/icon/ico-musiclist.png?v=4d5674a4)}.ddicon.rename{background-image:url(../images/icon/ico-edit.png?v=234f000a)}.ddicon.delete{background-image:url(../images/icon/ico-delete.webp?v=8b213dc1)}.ddicon.cancel{background-image:url(../images/icon/ico-cancel.webp?v=86ecbc49)}.dv-instrument-select span.inst{width:100px;height:100px;display:block;background:url(../images/graphic-Instruments.webp?v=78fcb163) no-repeat;background-size:500%}.dv-instrument-select span.inst.big{width:240px;height:240px}.dv-instrument-select span.inst:hover,.dv-instrument-select span.inst.active{background-position-y:100%}.dv-instrument-select span.inst-stick{background-position:0 0}.dv-instrument-select span.inst-triangle{background-position:25% 0}.dv-instrument-select span.inst-drum{background-position:50% 0}.dv-instrument-select span.inst-piano{background-position:75% 0}.dv-instrument-select span.inst-flute{background-position:100% 0}.dv-tempo{display:flex;align-items:center;padding:1rem 2rem;gap:1rem}.dv-tempo .select-tempo{background:url(../images/tempo-bg.webp?v=f7715ff1) no-repeat;background-size:contain;width:224px;height:8px;display:flex;justify-content:space-between}.dv-tempo .select-tempo .btn-tempo{width:40px;height:40px;display:block;background:url(../images/tempo-btn.webp?v=2bede182) no-repeat;background-size:40px;background-position:0 0;text-decoration:none;margin-top:-16px}.dv-tempo .select-tempo .btn-tempo:hover,.dv-tempo .select-tempo .btn-tempo.active{background-position:0 100%}.dv-tempo .select-tempo .btn-tempo:first-child{margin-left:-16px}.dv-tempo .select-tempo .btn-tempo:last-child{margin-right:-16px}.crea-beat p{font-size:3rem;line-height:1;padding-right:20px;font-family:serif;font-weight:600}.creation{display:flex;align-items:flex-start;overflow:auto;gap:1rem;padding-bottom:156px}.creation .crea-label{display:flex;align-items:center;padding-top:1.25rem}.creation .crea-note{width:100%;position:relative;display:flex;gap:1rem;flex-wrap:wrap}.creation .crea-note .note-group{width:100%}.creation .crea-note-2{width:100%;display:flex;gap:1rem;position:relative}.creation .crea-note-2:before{content:"";display:block;width:20px;height:100%;background:url(../images/line-bracket.webp?v=d8c20099) no-repeat;background-size:contain;position:absolute;top:-2px;left:-20px}.creation .crea-note-1{width:100%;display:flex;gap:1rem}.creation .crea-note .crea-note-box{display:flex;height:120px;width:100%;margin-bottom:.5rem}.creation .crea-note .crea-note-box>*{width:100%;border:#60A5D4 2px solid;background:#fff}.creation .crea-note .crea-note-box>*:hover{background:#bbd9ed}.creation .crea-note .crea-note-box.rhythm-drop-target>*{background:#bbd9ed;border-color:#1c7fc2;box-shadow:inset 0 0 0 3px #1c7fc240}.creation .crea-note .crea-note-box>*.playing{background-color:#e76f444d}.creation .crea-note .crea-note-box .left{border-radius:1rem 0 0 1rem}.creation .crea-note .crea-note-box .right{border-radius:0 1rem 1rem 0;border-left:0}.creation .crea-play{align-content:center}.creation .crea-play.playing a{border:none}.creation .crea-play.playing a .ico-play{background-image:url(../images/icon/icon-stop.png?v=1d8c86ae)!important}.creation-select-wrap{position:absolute;left:0;right:0;bottom:0;background-color:#feffb7;padding:1rem;border-radius:1.2rem 1.2rem 0 0;z-index:10}.creation-select-wrap .accordion{border:none}.creation-select-wrap .accordion-item{background-color:transparent;border:none}.creation-select-wrap .btn-creation-select{position:relative}.creation-select-wrap .btn-creation-select:after{content:"";display:block;background:url(../images/btn-sml-accordion.png?v=fd4d9d79) no-repeat;width:74px;height:40px;background-size:cover;top:-32px;left:24px;position:absolute}.creation-select-wrap .btn-creation-select:hover:after{background-position:0 33.33%}.creation-select-wrap .btn-creation-select.collapsed:after{background-position:0 66.66%}.creation-select-wrap .btn-creation-select.collapsed:hover:after{background-position:0 100%}.creation-select-wrap .accordion-collapse.collapse .accordion-body{height:0;padding:0;border:none;border-radius:1rem 1rem 0 0}.creation-select-wrap .accordion-collapse.collapse.show .accordion-body{height:auto;padding:0 0 1rem;border:dashed 2px #E76474}.creation-select-wrap .crea-select-items{width:100%;display:flex;gap:1rem;overflow:auto;padding:1rem}.creation-select-wrap .crea-select-items a{background:#fff;border:1px solid #FFFFFF;border-radius:.75rem;box-shadow:0 4px 10px #0000001a;height:88px;text-align:center;padding:8px}.creation-select-wrap .crea-select-items a:hover{background:#e8f2f9;border:1px solid #60A5D4}.creation-select-wrap .crea-select-items a:active{background:#1c7fc2;border:1px solid #60A5D4}.creation-select-wrap .crea-select-items a,.rhythm-entry{touch-action:none;-webkit-user-select:none;user-select:none}.rhythm-drag-source{opacity:.55}.rhythm-drag-ghost{left:0;opacity:.9;pointer-events:none;position:fixed;top:0;z-index:9999}.note,.rest,.qnote{min-width:70px;height:70px;display:inline-block;background-size:70%;background-repeat:no-repeat;background-position:center;position:relative}.note.count-half:after,.rest.count-half:after,.qnote.count-half:after{content:".";font-size:32px;color:#000;position:absolute;right:8px;bottom:4px}.note.whole{background-image:url(../images/note/note-whole.webp?v=004de5ca)}.note.half{background-image:url(../images/note/note-half.webp?v=788f66cb)}.note.quarter{background-image:url(../images/note/note-quarter.webp?v=a756d7a2)}.note.eighth{background-image:url(../images/note/note-eighth.webp?v=288d507f)}.note.sixteenth{background-image:url(../images/note/note-sixteenth.webp?v=230d7f79)}.notegroup1{background-size:80%!important;background-image:url(../images/note/note-group1.webp?v=6b1db82d)}.notegroup2{background-size:90%!important;background-image:url(../images/note/note-group2.webp?v=6f7e5f17)}.notegroup3{background-size:90%!important;min-width:80px;background-image:url(../images/note/note-group3.webp?v=4d4dfbb6)}.notegroup4{background-size:90%!important;min-width:100px;background-image:url(../images/note/note-group4.webp?v=025730eb)}.notegroup5{background-size:90%!important;min-width:80px;background-image:url(../images/note/note-group5.webp?v=a3c40338)}.notegroup6{background-size:90%!important;min-width:84px;background-image:url(../images/note/note-group6.webp?v=f7cd77c3)}.rest.whole{background-image:url(../images/candidates/wholeBarRest.svg?v=2e397db1)}.rest.half{background-image:url(../images/candidates/halfRest.svg?v=6d2e76d0)}.rest.quarter{background-image:url(../images/candidates/quarterRest.svg?v=414fd6bc)}.rest.eighth{background-image:url(../images/rest/rest-eighth.png?v=dda2b2ac)}.rest.sixteenth{background-image:url(../images/rest/rest-sixteenth.png?v=90981fda)}.head-option{display:flex;justify-content:space-between}.head-option .right{display:flex;align-items:center;padding-right:32px;gap:2rem}.head-option .dv-label a{text-decoration:none;background:url(../images/note-label.webp?v=88f18abe) no-repeat;background-size:100%;background-position:0 0;width:100px;height:43px;display:inline-block}.head-option .dv-label a:hover{background-position:0 33.33%}.head-option .dv-label a.active{background-position:0 66.66%}.head-option .dv-label a.active:hover{background-position:0 100%}.piano{background-color:#434343;margin:0 -2rem -2rem;padding:.5rem 1.5rem}.piano .keys{background-color:#d8d8d8;width:100%;position:relative}.piano .keys .whole{border-top:8px solid #DC2239;display:flex;gap:1px}.piano .keys .whole a{background-color:#fff;height:170px;width:100%;text-decoration:none}.piano .keys .whole a:hover{background-color:#f6f6f6}.piano .keys .half{display:flex;gap:2%;position:absolute;top:8px;width:100%;padding:0 3.6%}.piano .keys .half a{background-color:#141414;height:100px;width:100%;text-decoration:none}.piano .keys .half a:nth-child(4),.piano .keys .half a:nth-child(6),.piano .keys .half a:nth-child(9),.piano .keys .half a:nth-child(11){margin-left:6%}.piano .keys .half a:hover{background-color:#000}#piano-doremi .whole a{text-decoration:none;color:#6e6e6e;font-style:italic;text-align:center;padding-top:130px}#piano-abc .whole a{text-decoration:none;color:#6e6e6e;text-align:center;padding-top:130px}.piano-wrap{display:flex}.piano-wrap .nav-tabs{border:none;flex:1 0 auto;display:flex;padding:1rem;border-right:dashed 2px #E76474}.piano-wrap .nav-tabs .nav-item .nav-link{background:#b9b9b9;color:#434343;border:1px solid #FFFFFF;border-radius:.75rem 0 0 .75rem;height:88px;font-size:1.5rem}.piano-wrap .nav-tabs .nav-item .nav-link.active{background:#1c7fc2;color:#fff}.piano-wrap .nav-tabs .nav-item:last-child .nav-link{border-radius:0 .75rem .75rem 0}.submit-wrap{max-height:100%;padding-bottom:20px}.submit-wrap .maincontent{gap:.5rem}.submit-wrap .submit-ttl{display:flex;justify-content:space-between;align-items:center}.submit-wrap .submit-ttl img.ttl{height:3.25rem}.submit-wrap .submit-ttl img.char-eli{height:4.25rem}.submit-wrap .thead{background-color:#bbd9ed;font-weight:400;color:#145988;border:#8DBFE1 1px solid;border-radius:16px;display:flex;width:100%;gap:.5rem;padding:1rem 1rem 1rem 2.5rem}.submit-wrap .thead p{margin:0;width:24%}.submit-wrap .thead p:last-child{width:28%}.submit-wrap .tbody{overflow:scroll;max-height:44vh;background:#fff;border-radius:16px;counter-reset:item;width:100%}.submit-wrap .tbody>div{display:flex;width:100%;gap:.5rem;position:relative;padding:1rem 1rem 1rem 2.5rem;border-bottom:1px solid #D8D8D8}.submit-wrap .tbody>div p{margin:0;width:24%;color:#145988;font-weight:400;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.submit-wrap .tbody>div p:last-child{width:28%}.submit-wrap .tbody>div p .btn{width:auto;display:inline-block}.submit-wrap .tbody>div p a img{width:2rem}.submit-wrap .tbody>div p a img:hover{opacity:.8}.submit-wrap .tbody>div p a:last-child{float:right}.submit-wrap .tbody>div:before{counter-increment:item;content:counter(item) ". ";position:absolute;left:1rem;top:1rem;color:#145988;font-weight:400}