<div class="piano">
		<div class="scale lowlow">
			<button class="key wh a"></button>
			<button class="key bl aSh"></button>
			<button class="key wh b"></button>
			<button class="key wh c"></button>
			<button class="key bl cSh"></button>
			<button class="key wh d"></button>
			<button class="key bl dSh"></button>
			<button class="key wh e"></button>
			<button class="key wh f"></button>
			<button class="key bl fSh"></button>
			<button class="key wh g"></button>
			<button class="key bl gSh"></button>
		</div>
		<div class="scale low">
			<button class="key wh a"></button>
			<button class="key bl aSh"></button>
			<button class="key wh b"></button>
			<button class="key wh c"></button>
			<button class="key bl cSh"></button>
			<button class="key wh d"></button>
			<button class="key bl dSh"></button>
			<button class="key wh e"></button>
			<button class="key wh f"></button>
			<button class="key bl fSh"></button>
			<button class="key wh g"></button>
			<button class="key bl gSh"></button>
		</div>
		<div class="scale midi1">
			<button class="key wh a"></button>
			<button class="key bl aSh"></button>
			<button class="key wh b"></button>
			<button class="key wh c"></button>
			<button class="key bl cSh"></button>
			<button class="key wh d"></button>
			<button class="key bl dSh"></button>
			<button class="key wh e"></button>
			<button class="key wh f"></button>
			<button class="key bl fSh"></button>
			<button class="key wh g"></button>
			<button class="key bl gSh"></button>
		</div>
		<div class="scale midi2">
			<button class="key wh a"></button>
			<button class="key bl aSh"></button>
			<button class="key wh b"></button>
			<button class="key wh c"></button>
			<button class="key bl cSh"></button>
			<button class="key wh d"></button>
			<button class="key bl dSh"></button>
			<button class="key wh e"></button>
			<button class="key wh f"></button>
			<button class="key bl fSh"></button>
			<button class="key wh g"></button>
			<button class="key bl gSh"></button>
		</div>
		<div class="scale hi">
			<button class="key wh a"></button>
			<button class="key bl aSh"></button>
			<button class="key wh b"></button>
			<button class="key wh c"></button>
			<button class="key bl cSh"></button>
			<button class="key wh d"></button>
			<button class="key bl dSh"></button>
			<button class="key wh e"></button>
			<button class="key wh f"></button>
			<button class="key bl fSh"></button>
			<button class="key wh g"></button>
			<button class="key bl gSh"></button>
		</div>
		<div class="scale hihi">
			<button class="key wh a"></button>
			<button class="key bl aSh"></button>
			<button class="key wh b"></button>
			<button class="key wh c"></button>
			<button class="key bl cSh"></button>
			<button class="key wh d"></button>
			<button class="key bl dSh"></button>
			<button class="key wh e"></button>
			<button class="key wh f"></button>
			<button class="key bl fSh"></button>
			<button class="key wh g"></button>
			<button class="key bl gSh"></button>
		</div>
		<div class="scale hihihi">
			<button class="key wh a"></button>
			<button class="key bl aSh"></button>
			<button class="key wh b"></button>
			<button class="key wh c"></button>
			<button class="key bl cSh"></button>
			<button class="key wh d"></button>
			<button class="key bl dSh"></button>
			<button class="key wh e"></button>
			<button class="key wh f"></button>
			<button class="key bl fSh"></button>
			<button class="key wh g"></button>
			<button class="key bl gSh"></button>
		</div>
		<div class="scale hihihihi">
			<button class="key wh a"></button>
			<button class="key bl aSh"></button>
			<button class="key wh b"></button>
			<button class="key wh c"></button>
		</div>
		
	</div>

:root{
	--white_key_width:30px;
	--black_key_width:20px;
	--black_key_pad:5px;
}

.piano{
	background:#060707;
	height:250px;
	display:flex;
	padding:50px;
	box-sizing:border-box;
  overflow-x:scroll;
}


.piano .scale{
	display:flex;
	height:100%;
	position:relative;
}

/* 重なりが順番になるように */
.scale.lowlow{ z-index:80; }
.scale.low{ z-index:70; }
.scale.midi1{ z-index:60; }
.scale.midi2{ z-index:50; }
.scale.hi{ z-index:40; }
.scale.hihi{ z-index:30; }
.scale.hihihi{ z-index:20; }
.scale.hihihihi{ z-index:10; }

.piano .key{
	width:var(--white_key_width);
	border:none;
	border-radius:3px;
	background:#b2b2b2;
	height:100%;
	border:#b2b2b2 solid 1px;
	padding:0;
	transition:all 0.2s ease-out;
}

.piano .key:before{
	content:"";
	height:calc(100% - 10px);
	width:100%;
	position:relative;
	top:-5px;
	display:block;
	background:#fff;
}

.piano .key.bl:before{
	background:#1a1c1b;
}
.piano .key.bl{
	width:var(--black_key_width);
	background:#121413;
	height:50%;
	position:absolute;
	z-index:10
}

.piano .key.bl.aSh{ left:calc(var(--white_key_width) / 2 + var(--black_key_pad));}
.piano .key.bl.cSh{ left:calc(var(--white_key_width) *2 + var(--white_key_width) / 2 + var(--black_key_pad)); }
.piano .key.bl.dSh{ left:calc(var(--white_key_width) *3 + var(--white_key_width) / 2 + var(--black_key_pad)); }
.piano .key.bl.fSh{ left:calc(var(--white_key_width) *5 + var(--white_key_width) / 2 + var(--black_key_pad)); }
.piano .key.bl.gSh{ left:calc(var(--white_key_width) *6 + var(--white_key_width) / 2 + var(--black_key_pad)); }


.piano .key:active:before{
	height:calc(100% - 2px);
	top:1px;
}

.piano .key.wh:active:before{
	background:#ffafba;
}

.piano .key.bl:active:before{
	background:#7f4b63;
}