@charset "shift_jis";

/*--------------------------------------------------------
	譜読み用
--------------------------------------------------------*/
.mscr{	/*メインフレーム*/
	width:98%;
	height: 20em;
	/*
	height: 20em;
*/
	color:red;
}

.KeyBtn{	/*ボタン*/
	width: 7%;
}

.tableDiv{
	position: relative;

	margin: 0;
/*
	height:20em;
*/
	height:10em;
	width:100%;
}


.lineTable{
	position: absolute;
/*
	table-layout: fixed;
*/
	margin: 0;
	height:6em;
	width:100%;
	
	border: none;
}

.lineTableTr{
	height:1em;
	width:100%;
	border-bottom: solid 1px #000000;
	border-top: none;
}

.lineTableTr td{
	position: relative;
	padding: 0;
	margin: 0;
}


.clef{	/*ト音記号 未使用*/
/*
	position: absolute;
	height:auto;
	width:3em;
*/

	top: 6em;
	left: 30px;
/*
	background-color:red;
	background:url(../img/reading/clef.jpg);
	background-image : url(../img/returnTop_10A.png);
*/
	background-image : url(../img/reading/clef.png);
	background-size:contain;
	
	background-position:top;
	background-repeat:no-repeat;

	border : none;
	border : solid 1px black;
}


.clef2{	/*ト音記号*/
	position: absolute;
	width:auto;
	height:45%;
	left: 30px;
	top:-20px;
}

.clef3{	/*ト音記号*/
	position: absolute;
	width:auto;
	height:10em;
	left: 1em;
	top:-2.5em;
}

.infoBlk{
	width :100%;
	border: solid 1px black;
}

.infoFld{
/*
	border: solid 1px green;
*/
	height: 3em;
	color:red;
}

.resultFld{
	height: 1.5em;
}

.addline1{	/*音符基準 高音*/
	position: absolute;
	width: 1em;
	height: 1em;
	top: -1em;

/*	
	border: solid 1px blue;
	border-bottom: solid 1px black;
	backgraund-color: red;
	background-color: blue;
	left: -1em;	←これをつけると2つ以上の時ズレる
	text-align: center;
	background-color: yellow;
	float:left;
	 display: inline-block;
*/	 
}

.addline2{	/*加線基準 高音*/
	position: absolute;
	border-bottom: solid 1px black;
	width: 2em;
	height: 1em;
	top: -1em;
	left: 1.5em;
/*	
	top: 0em;
	left: 0em;
	background-color: green;
	float:left;
	display: inline-block;
*/
}

.addline_1{	/*音符基準 低音*/
	position: absolute;
	width: 1em;
	height: 1em;
	bottom: -1em;

/*	
	border: solid 1px blue;
	border-bottom: solid 1px black;
	backgraund-color: red;
	background-color: blue;
	left: -1em;	←これをつけると2つ以上の時ズレる
	text-align: center;
	background-color: yellow;
	float:left;
	 display: inline-block;
*/	 
}

.addline_2{	/*加線基準 低音*/
	position: absolute;
	border-bottom: solid 1px black;
	width: 2em;
	height: 1em;
	bottom: -1em;
	left: 1.5em;
/*	
	top: 0em;
	left: 0em;
	background-color: green;
	float:left;
	display: inline-block;
*/
}

.addline_2_{	/*最下加線なし 低音*/
	position: absolute;
	border-bottom: none;
	width: 2em;
	height: 1em;
	bottom: -1em;
	left: 1.5em;
/*	
	top: 0em;
	left: 0em;
	background-color: green;
	float:left;
	display: inline-block;
*/
}


.note1{	/*音符イメージ*/
	position: absolute;
	height: 1em;
	width:auto;
	margin: 0;
	font-size: 4em;
	bottom: 0em;
	color:black;
	content: ♩
	left: 0.5em;
/*
	border: solid 1px red;
	padding: 0;
	margin: 0 0 auto 0px;
*/
}

.note2{	/*音符イメージ(反転)*/
	position: absolute;
	height: 1em;
	width:auto;
	transform: rotateZ(180deg);
	font-size: 4em;
	top: 0em;
	color:black;
	content: ♩
	left: 0.5em;
/*	
	border: solid 1px red;
	padding: 0;
	margin: 0 0 auto 0px;
	margin: 0 0 1.5em 0;
*/
}

.note_1{	/*音符加線部*/
	bottom: -0.15em;
}

.note_2{	/*音符加線部(反転)*/
	padding: 0 0 0.15em 0;
}

.mark1{		/* #や♭、ナチュラル */
	position: absolute;
	height: 2em;
	width:auto;
	bottom: -0.2em;
	left:0.5em;
}

.mark2{		/* #や♭、ナチュラル半音下へ */
	bottom: -1em;
}

.hmark{

}