.box {position: absolute; width:50px; height: 25px;}
.box1 {position: relative; margin: 0 auto 0 auto; width:820px; height: 40px; background: #ddd; text-align: center; line-height: 37px; font-size:17px}
.nave {margin-top: 0px; margin-left: auto; margin-right:auto; width: 820px;}
ul.menu {margin: 0px; padding: 0px 100px 0px 0px; background-color: #888; justify-content: center;}
/* -------------------------- */
/* ▼メインメニュー項目の装飾 */
/* -------------------------- */
ul.menu li {width: 140px; display: inline-block; list-style-type: none; position: relative; font-size:15px}
ul.menu a {background-color: #888; color: white; line-height: 30px; text-align: center; text-decoration: none; /* font-weight: bold; */ display: block}
ul.menu a:hover {background-color: #cfc; color: #000;}
/* ---------------------------------- */
/* ▼サブメニューがある場合に開く処理 */	/* ※サブメニューが2階層以上ある場合の記述 */
/* ---------------------------------- */
ul.menu li:hover > ul {display: block;}
/* -------------------- */
/* ▼サブメニューの装飾 */
/* -------------------- */
ul.menu ul {margin: 0px; padding: 0px; display: none; position: absolute; }
/* ------------------------ */
/* ▼サブメニュー項目の装飾 */
/* ------------------------ */
ul.menu ul li {width: 140px; border-top: 1px solid pink; z-index:30;}
ul.menu ul li a {line-height: 25px; text-align: left; padding-left: 3px; font-weight: normal; background-color:#060; color:#fff}
ul.menu ul li a:hover {background-color: #ffff80; color: #005500;}
/* -------------------------------------------------------- */
/* ▼サブメニューの内側にあるサブメニュー(孫メニュー)の装飾 */
/* -------------------------------------------------------- */
ul.menu ul ul {margin: 0px; padding: 0px; display: none; position: absolute; top: -1px; left: 100%; border-left: 1px solid pink}
ul.menu ul ul li a {background-color: #cfc; color: #000}

.space {margin-top: 0px; margin-left: auto; margin-right:auto; width:820px; height: 50px}
.range {margin-top: 0px; margin-left: auto; margin-right:auto; width: 1090px; height: 30px; text-align:left; border: solid 0px black}
td.tw {width:190px;}

#piano-wrap * {box-sizing: border-box; font-family: Arial; user-select: none;}
#piano-wrap {margin: 0 auto; height: 156px; display: flex; background:#d00; width:1092px; border:2px solid #333;border-radius:0 0 5px 5px;}
#piano-wrap > div {position: relative; left:0px;}

.wk {width: 28px; height: 151px; background-color: white; border: solid 1px black; bottom:0px; color: black;}

.bk {width: 18px; height: 100px; background: black; margin-left: -9px; margin-right: -9px; z-index: 2; border-radius: 0 0 4px 4px; border: solid black 2px; transition: 100ms; color: white; text-align: center;}

.k {position: absolute; display: block; bottom: 1px; width: 100%; text-align: center; font-size:16px;}
.r {position: absolute; display: block; bottom: 1px; width: 100%; text-align: center; font-size:16px; color:red;}


.moji-size {margin-top: 0px; margin-left: auto; margin-right:auto;width:576px; height:5px; text-align: right;}
.content {margin-left: auto; margin-right:auto;width:790px; height:470px;}
.met-vol {margin-top: 5px; margin-left: auto; margin-right:auto; width:1080px; height:100px; border: 0px solid #000}
.content-1 {margin-left: auto; margin-right:auto;width:850px; height: 200px}


.kw {position: absolute; display: block; bottom: 1px; width: 100%; text-align: center; font-size:medium;}
.kb {position: absolute; display: block; bottom: 1px; width: 100%; text-align: center; font-size:medium;}
.r {position: absolute; display: block; bottom: 1px; width: 100%; text-align: center; font-size:medium; color:red;}
.d {position: absolute; display: block; bottom: 1px; width: 100%; text-align: center; font-size:medium; font-family: serif; color:red;}
/* .ks {position: absolute; display: block; bottom: 1px; width: 100%; text-align: center; font-size:small;}
.kl {position: absolute; display: block; bottom: 1px; width: 100%; text-align: center; font-size:large;}
.rs {position: absolute; display: block; bottom: 1px; width: 100%; text-align: center; font-size:small; color:red;}
.rl {position: absolute; display: block; bottom: 1px; width: 100%; text-align: center; font-size:large; color:red;} */

a {text-decoration: none;}

.cnt {text-align: center;}
.ht {line-height:80px}

#grid1 {width:600px; height:30px;}

.vlm_piano {width: 40px; padding: 3px 0px; border-radius: 5px; border: 2px solid #ccc;
 font-size:15px; text-align:right;}
/* input[type="number"]::-webkit-inner-spin-button,
 input[type="number"]::-webkit-outer-spin-button {opacity: 1;} */
.vol_metro {width: 40px; padding: 3px 0px; border-radius: 5px; border: 2px solid #ccc; text-align:right;}

.arrow {background:#ccc; cursor: pointer;}

2