/* 2024-11-26 */
.header {margin-top: 0px; margin-left: auto; margin-right:auto; width: 750px; 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: 750px; height: 80px;  border-top: 2px solid #333}
.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 {font-size: 14px; 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: 750px; height: 600px;}
.counter {margin-top: 0px; margin-left: auto; margin-right:auto; width: 750px; height: 145px; text-align:center; font-size:12px; border: solid 0px black}
.footer {margin-top: 0px; margin-left: auto; margin-right:auto; width: 750px; height: 100px; text-align:center; border: solid 0px black}

.nave {margin-top: 0px; margin-left: auto; margin-right:auto; width: 750px;}
ul.menu {margin: 0px; padding: 0px 100px 0px 0px; background-color: #888; justify-content: left;}
/* ▼メインメニュー項目の装飾 */
ul.menu li {width: 150px; 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: 150px; 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}

ul.ul1 {
  all: unset; /* 全てのスタイルを初期値（ブラウザ依存ではない）に戻す */
}
#loader-bg {position: relative; top: 20px; background: #0ff; height: 130px; width: 280px; margin-left: auto; margin-right: auto;z-index: 10; border: solid 2px black}
/* #loader {position: absolute;  height: 150px; width: 230px; top: 0px; margin-left:auto; margin-right: auto; z-index: 9;}
#loader-bg img {background: #8ff; position: relative; margin-left:auto; margin-right: auto;}　*/

#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;}
.bk {position: relative; width: 14px; height: 78px; background: #000; margin-left: -7px; margin-right: -7px; z-index: 3; 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;}
.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;}

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

.vol_box {width: 40px; padding: 2px 0px; border-radius: 5px; border: 1px solid #ccc; font-size:15px; text-align:right;}
.BPM_box {width: 50px; padding: 3px 0px; border-radius: 5px; border: 2px solid #ccc; font-size:18px; text-align:right;}
a {text-decoration: none}

body {font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif; font-weight: 500; font-size:large }
td.tw {width:135px;}

.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