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

#piano-wrap {margin: 0 auto; height: 130px; display: flex; background:black;width:699px; height:130px; border:2px solid #000;border-radius:0 0 0px 0px;}

#piano-wrap > div {position: relative; left:0px;}

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

.bk {width: 14px; height: 76px; background: black; margin-left: -7px; margin-right: -7px; z-index: 2; border: solid black 2px; transition: 100ms; color: white; text-align: center;}

.b {position: absolute; display: block; /* bottom:1px;*/ width: 100%; text-align: center; font-size:small;}

.k {position: absolute; display: block; bottom: 21px; width: 100%; text-align: center; font-size:small;}

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

a {text-decoration: none;}
  td.tdcl{text-align:center}
  td.ma {width:50px; background-color:#ffff00; text-align:center;}
  td.mi {width:50px; background-color:#e0e0e0; text-align:center;}
  td.tw {width:150px;}
  td.tw-1 {width:100px; text-align:left; vertical-align: top;}


#grid1 {width:600px; height:30px;}
#gridf {width:600px; height:30px;}
ul {list-style: none; display:inline; display: flex;}  https://www.webcreatorbox.com/tech/flexbox
li {margin: 0px; list-style: none; display:inline; position:relative;}
.ww {display:block; width:9px; height:30px; text-align:center; border:1px solid #000; }
.sk {display:block; width:9px; height:30px; text-align:center; border:1px solid #000; background-color:#aff;}
.gr {margin-left:-4px; width:6px; height:15px; background:#ccc; border:1px solid #888; float:left; position: absolute; top: 0px; }
.bb {margin-left:-4px; width:6px; height:15px; background:#000; border:1px solid #000; float:left; position: absolute; top: 0px; }


.container {display:block; position:relative; left:50px; 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;}
2