@charset "utf-8";

.pianoMenuControl {display:inline-flex; justify-content:center; align-items:center; position:fixed; width:24px; height:24px; left:2%; border-radius:20px; background:var(--piano-blackkey-back); color:var(--piano-blackkey-text) !important; box-shadow:-2px 2px 0 0 var(--piano-blackkey-text);}
#piano_onoff {display:inline-block; position:relative; width:5.76em; line-height:1.4em; text-align:center; background-size:100% 40% !important; background-position:center 100% !important; background-repeat:no-repeat !important; padding-left:3px; margin-bottom:15px;}

#piano-menu {width:100px; position:fixed; top:50%; transform:translateY(-50%); transition-duration:.5s; transition-property:left; text-align:left;}
#piano-menu * {box-sizing:border-box;}
#piano-menu.open {width:var(--piano-width-hover);}


/* PIANO MENU */
#piano-menu .piano-keyboard {position:relative; margin:0; padding-right:50px;}
#piano-menu .piano-keyboard .piano-key {display:block; height:42px; padding:5px; cursor:pointer;  border-top-left-radius:5px; border-bottom-left-radius:5px; transition-duration:.3s;}
#piano-menu .piano-keyboard .piano-key:hover  {translate:-3px 2px;}
#piano-menu .piano-keyboard .piano-key a  {position:relative; display:block; width:100%;}
#piano-menu .piano-keyboard .piano-key a i  {position:absolute; top:3px; left:2px; font-size:24px !important;}
#piano-menu .piano-keyboard .piano-key a img  {max-width:24px; max-height:24px; margin-top:3px;}
#piano-menu .piano-keyboard .piano-key a .title  {position:absolute; font-size:16px; top:6px; left:7px;}
#piano-menu .piano-keyboard .piano-key a .text   {width:0%; margin-top:7px; white-space:nowrap; transition-duration:.33s; transition-property:width; overflow:hidden; display:inline-block; position:absolute; left:28px;}
#piano-menu.open .piano-keyboard .piano-key a .text   {width:100%;}

#piano-menu .piano-keyboard .piano-key.white:first-child {border-top-right-radius:5px;}
#piano-menu .piano-keyboard .piano-key.white:last-child {border-bottom-right-radius:5px;}

/* WHITE */
#piano-menu .piano-keyboard .piano-key.white  {width:80px; background:var(--piano-whitekey-back); z-index:90; margin-bottom:var(--piano-whitekey-mb); box-shadow:-6px 4px var(--piano-whitekey-shadow); border:var(--piano-whitekey-line) solid var(--piano-whitekey-line-color);}
#piano-menu .piano-keyboard .piano-key.white:hover {width:83px; box-shadow:-3px 2px var(--piano-whitekey-shadow);}
#piano-menu .piano-keyboard .piano-key.white a   {color:var(--piano-whitekey-text) !important;}
#piano-menu.open .piano-keyboard .piano-key.white  {width:var(--piano-width);}
#piano-menu.open .piano-keyboard .piano-key.white:hover {width:var(--piano-width-hover);}

/* BLACK */
#piano-menu .piano-keyboard .piano-key.black {position:absolute; width:40px; left:40px; background:var(--piano-blackkey-back); z-index:99; box-shadow:-6px 4px var(--piano-blackkey-shadow); border:var(--piano-blackkey-line) solid var(--piano-blackkey-line-color);}
#piano-menu .piano-keyboard .piano-key.black:hover {width:43px;}
#piano-menu.open .piano-keyboard .piano-key.black {width:var(--piano-blackkey-width); left:var(--piano-blackkey-ml);}
#piano-menu.open .piano-keyboard .piano-key.black:hover {width:var(--piano-blackkey-width-hover);}
#piano-menu .piano-keyboard .piano-key.black a   {color:var(--piano-blackkey-text) !important;}
/* BLACK TOP */
#piano-menu .piano-keyboard .piano-key.black.key1  {top:23px;}
#piano-menu .piano-keyboard .piano-key.black.key3  {top:69px;}
#piano-menu .piano-keyboard .piano-key.black.key6  {top:161px;}
#piano-menu .piano-keyboard .piano-key.black.key8  {top:207px;}
#piano-menu .piano-keyboard .piano-key.black.key10 {top:253px;}

/* LOGIN BOX */
#piano-menu #login_box   {transition-duration:.5s; width:80px; margin-top:20px; position:relative; padding:0 !important;}
#piano-menu.open #login_box   {transition-duration:.5s; width:var(--piano-width-hover) !important;}
#piano-menu #login_box p   {word-break:keep-all !important;}
#piano-menu #login_box p.name   {width:fit-content; margin:10px auto; padding:0 6px; background:white; border-right:8px solid var(--point-color); background:var(--piano-whitekey-back); color:var(--piano-whitekey-text);}
#piano-menu #login_box #btn_box   {width:80px; margin:10px auto 0; font-size:24px;}
#piano-menu #login_box #btn_box a {color:var(--piano-whitekey-text); display:inline-block; text-shadow:var(--piano-whitekey-back) -1px -1px 1px, var(--piano-whitekey-back) 1px -1px 1px, var(--piano-whitekey-back) -1px 1px 1px, var(--piano-whitekey-back) 1px 1px 1px;}
#piano-menu #login_box #btn_box a.admin  {color:var(--point-color) !important;}
#piano-menu #login_box #btn_box a.point  {color:var(--point-color) !important;}

/* BGM BOX */
#piano-menu #bgm_box  {transition-duration:.5s; width:80px; position:absolute; padding-top:10px;}
#piano-menu.open #bgm_box  {transition-duration:.5s; width:var(--piano-width-hover) !important;}
#piano-menu #bgm_box .bgm-player  {text-align:center; width:80px; margin:0px auto;}
#piano-menu.open #bgm_box .bgm-player  {width:var(--piano-width-hover) !important;}
#piano-menu #bgm_box .bgm-player #site_bgm_box   {display:none;}
#piano-menu #bgm_box .bgm-player ul  {transition-duration:.5s; display:inline-block; vertical-align:middle; /*width:35px;*/ height:25px; margin:0 auto;}

/* hint.css +white */
.hint--white:after 							  {background-color: #fbfbfb!important; color: #000!important; text-shadow: none!important;}
.hint--white.hint--top-left:before 			  {border-top-color: #fbfbfb;}
.hint--white.hint--top-right:before 		  {border-top-color: #fbfbfb;}
.hint--white.hint--top:before 				 {border-top-color: #fbfbfb;}
.hint--white.hint--bottom-left:before 	  {border-bottom-color:#fbfbfb;}
.hint--white.hint--bottom-right:before 	  {border-bottom-color:#fbfbfb;}
.hint--white.hint--bottom:before 			 {border-bottom-color:#fbfbfb;}
.hint--white.hint--left:before 				 {border-left-color:  #fbfbfb;}
.hint--white.hint--right:before 			 {border-right-color: #fbfbfb;}