/* 2024-11-26 */
.header {margin-top: 0px; margin-left: auto; margin-right:auto; width: 1040px; height: 30px; text-align:center; font-size:20px; border: solid 0px black}
.kenban-moji  {margin-top: 0px; margin-left: auto; margin-right:auto; width: 1040px; height: 30px; font-size:14px; border-top: 2px solid #333}
.space {margin-top: 0px; margin-left: auto; margin-right:auto; width: 1040px; height: 50px}
.range {margin-top: 0px; margin-left: auto; margin-right:auto; width: 1040px; height: 30px; text-align:left; border: solid 0px black}
.keyboard {margin-top: 0px; margin-left: auto; margin-right:auto; width: 1040px; height: 125px; border: solid 0px black}
.attachment {margin-top: 0px; margin-left: auto; margin-right:auto; width: 1040px; height: 115px; border: solid 0px black}
.explanation {margin-top: 0px; margin-left: auto; margin-right:auto; width: 1040px; height: 3827px;}
.counter {margin-top: 0px; margin-left: auto; margin-right:auto; width: 1040px; height: 145px; text-align:center; font-size:12px; border: solid 0px black}
.footer {margin-top: 0px; margin-left: auto; margin-right:auto; width: 1040px; height: 100px; text-align:center; border: solid 0px black}

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

.wk {width: 20px; height: 119px; background-color: white; border-radius: 0 0 4px 4px; border: solid 1px black; bottom:0px; color: black; bottom: 1px;}
.bk {position: relative; width: 14px; height: 78px; background: #000; margin-left: -7px; margin-right: -7px; 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:small;}
.l {font-size:x-small;}
.ks {position: absolute; display: block; bottom: 1px; width: 100%; text-align: center; font-size:1px;}
.r {position: absolute; display: block; bottom: 1px; width: 100%; text-align: center; font-size:small; font-weight: bold; color:red;}
.s {position: absolute; display: block; bottom: 1px; width: 100%; text-align: center; font-size:x-small;}
.d {position: absolute; display: block; bottom: 1px; width: 100%; text-align: center; font-size:x-small; color:red}

a {text-decoration: none;}

td.tw {width:138px;}

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