#piano-wrap * {box-sizing: border-box; font-family: Arial; user-select: none;}

#piano-wrap {margin: 0 auto; height: 150px; display: flex; background:black;width:700px; border:3px 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: 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;}

a {text-decoration: none;}

td.tw {width:180px;}
.container {display:block; position:relative; padding-left:35px; margin-bottom:12px; cursor:pointer; font-size:16px; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;}
/* デフォルトのラジオボタンデザインを無効化 */
.container input {position:absolute; opacity:0; cursor:pointer;}
/* カスタムラジオボタンの作成 */
.checkmark {position:absolute; top:0; left:0; height:20px; width:20px; background-color:#eee; border-radius:50%;}
/* マウスオーバーのリアクション */
.container:hover input ~ .checkmark {background-color:#ccc;}
/* チェックした時のカラーリング */
.container input:checked ~ .checkmark {background-color:#4caf50;}
.checkmark:after {content:""; position:absolute; display:none;}
.container input:checked ~ .checkmark:after {display:block;}
.container .checkmark:after {top:6px; left:6px; width:8px; height:8px; border-radius:50%; background:white;}

table.tab{border-collapse: collapse;}
table.tab td{border: 1px solid #a0a0a0; padding:2px; vertical-align:middle;}
table.tab td.a a:hover {background-color: #0000ff; text-decoration:none; }

.vol_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;}

2