@charset "UTF-8";

.score_outline{
	max-width:100%;
	margin-bottom:var(--m_7);
	padding:var(--m_7) 3% var(--m_5);
	border:solid 2px #DDD;
	border-radius:8px;
	box-shadow:1px 1px 3px #DDD;
	}
.score{
	--score_W:312px; /* 1小節の幅 */
	max-width:calc(var(--score_W) * 2); /* 横並びで2小節分の幅が基準 */
	margin:0 auto;
	}

.score .creationPat{
	--scoreH_init:-12px; /* 最上部の高さの初期値 */
	--note_H:120px;	   /* SVG画像の高さ */

	--top_to_StaffNotation:50px; /* 五線譜の高さ */

	--modelNO_margin:0px;	/* 2段表示に配慮した余白設定: 35px */
	--next_5SN_margin:-14.3px;	/* 次の五線譜までの余白。基準は総当たりで標準ドラム譜をスクロールした時に次の五線譜が前の五線譜と重なる位置 */
	--beat_paddding_left:41px; /* 音符の左余白。未指定だと背景の五線譜と被る */

	position:relative; /* 小節番号表示のため必要 */
	display:inline-block;
	width:var(--score_W);
	height:calc(var(--note_H) + var(--modelNO_margin));
	margin:var(--next_5SN_margin) 0;
	padding-top:var(--modelNO_margin);
	padding-left:var(--beat_paddding_left);

	/* 標準的な高さ以外は非表示にする。例えば3連符の3記号やアクセントなど */
	/* overflow:hidden; */

	background:url(/static/img/music_notes/staff_notation/staff_notation_normal.svg) no-repeat 0 calc(var(--top_to_StaffNotation) + var(--modelNO_margin)); /* 通常のリズムなら五線譜はtop:28px。型番を最上部に表示するなら高さを変える */
		/*
			staff_notation_normal  => 標準
			staff_notation_F_clef  => ヘ音記号のみ
			staff_notation_beat4   => 4/4拍子のみ
			staff_notation_only    => 五線譜のみ
			staff_notation_BarMarker            => 確認用：8分音符幅
			staff_notation_BarMarker_T(Triplet) => 確認用：3連符幅
			staff_notation_BarMarker_R(Repeat)
		*/
}

/* 4小節並び時に段ごとの1小節目以降の小節(2～4小節のこと)をずらす ※小節線の重なりを防ぐため */
.score .creationPat:not(:nth-child(4n+1)){
	margin-left:-1px; /* 2・3小節の横並びの五線譜の隙間を埋める */
	background-image:url(/static/img/music_notes/staff_notation/staff_notation_beat4.svg);
}
/* 偶数小節の指定 */
.score .creationPat:nth-child(2n){
	/* background-image:url(/static/img/music_notes/staff_notation/staff_notation_beat4.svg); */
}

.score .creationPat_modelNo,
.score .creationPat_number{position:absolute;left:0;padding:0 var(--m_h);color:#666;font-size:12px;line-height:1.2;letter-spacing:-0.1px;}
.score .creationPat_modelNo{top:-12px;/* -24px */z-index:10;}
/* .score .creationPat_modelNo a{color:var(--red_h);} */
.score .creationPat_number{top:calc(var(--scoreH_init) + 33px + var(--modelNO_margin));color:brown;	/* font-weight:bold;border:solid 1px brown; */}

.score #creationPat_Meter{
	--numerator_T:42px; /* BPMの有無でifによる高さ調整をしているので注意 */
	--numerator_L:-20px;
	position:absolute;color:#000;font:400 32px/1 "Musicfont";
}
.score #creationPat_Meter div{position:relative;}
.score #creationPat_Meter div:nth-child(1){top:var(--numerator_T);left:var(--numerator_L);}
.score #creationPat_Meter div:nth-child(2){top:calc(var(--numerator_T) - 18px);left:var(--numerator_L);}

.score #creationPat_BPM{position:absolute;top:-18px;left:-4px;color:#000;font:400 24px/1 "Meiryo";	/* 文字サイズ24pxが最適。それ以外は大きさがバラバラ、文字がかすれるなどする */}
.score #creationPat_BPM span{position:relative;}
.score #creationPat_BPM .onpu{font-size:78%;} /* ♩ */
.score #creationPat_BPM .equal{left:-7px;font-size:55%;} /* = */
.score #creationPat_BPM .bpmNum{top:-4px;left:-6px;font-family:"Musicfont";} /* BPM */

.score [class*="creationPat_Hata8_"] div{
	--hata_1deff:4px; /* 1音の高さの差 */
	--hata_2deff:7px; /* 2音(五線譜の間)の高さの差 */
	--barL_Hand:41px;
	--barL_Foot:41px;
	--barRL_diff:128px;
	position:absolute;
	top:calc(var(--scoreH_init) + var(--modelNO_margin));
	z-index:1;

	/* opacity: 0.7; */
}
.score .creationPat_Hata8_Hand div:nth-child(1){left:var(--barL_Hand);}
.score .creationPat_Hata8_Hand div:nth-child(2){left:calc(var(--barL_Hand) + var(--barRL_diff));}
.score .creationPat_Hata8_Foot div:nth-child(1){left:var(--barL_Foot);}
.score .creationPat_Hata8_Foot div:nth-child(2){left:calc(var(--barL_Foot) + var(--barRL_diff));}


/* 確認用 */
/* .score .creationPat_Hata8_Hand [class*="top_"] svg{fill:red;opacity:0.7;} */

.score .creationPat_Hata8_Hand [class*="top_RI"]{top:calc(var(--scoreH_init) + var(--modelNO_margin) - 6px);}
.score .creationPat_Hata8_Hand [class*="top_HT"]{top:calc(var(--scoreH_init) + var(--modelNO_margin) + var(--hata_2deff) * 1);}
.score .creationPat_Hata8_Hand [class*="top_LT"]{top:calc(var(--scoreH_init) + var(--modelNO_margin) + var(--hata_2deff) + var(--hata_1deff));}
.score .creationPat_Hata8_Hand [class*="top_SD"]{top:calc(var(--scoreH_init) + var(--modelNO_margin) + var(--hata_2deff) * 2);}
.score .creationPat_Hata8_Hand [class*="top_FT"]{top:calc(var(--scoreH_init) + var(--modelNO_margin) + var(--hata_2deff) * 3);}
.score .creationPat_Hata8_Hand [class*="top_TB"]{top:calc(var(--scoreH_init) + var(--modelNO_margin) + var(--hata_2deff) * 4);}

/* 確認用 */
/* .score .creationPat_Hata8_Foot [class*="btm_"] img{opacity:0.6;} */

.score .creationPat_Hata8_Foot [class*="btm_"]{top:calc(var(--modelNO_margin) - 12px);/* 肉眼で確認 */}

.score .creationPat_Syncopation{position:relative;}
.score .creationPat_Syncopation svg{position:absolute;top:-20px;} /* ※1 top は デフォルトでHHの高さとなる */

.score .creationPat_score{
	--svg_diff:-10px;
	--svg_W:64px;
	position:relative;}
.score .creationPat_score svg{
	position:absolute;
	top:-12px;
	left:var(--svg_diff);
}
.score .creationPat_score svg:nth-child(2){left:calc(var(--svg_diff) + var(--svg_W));}
.score .creationPat_score svg:nth-child(3){left:calc(var(--svg_diff) + var(--svg_W) * 2);}
.score .creationPat_score svg:nth-child(4){left:calc(var(--svg_diff) + var(--svg_W) * 3);}

.score .creationPat_score img{position:absolute;}

/* .score .creationPat_score svg{margin-top:-12px;margin-left:calc(var(--beat_paddding_left) - var(--beat_paddding_left) - 10px);} */

		/* 横並び2小節➡1小節 */
		@media all and (max-width:760px){
			.score_outline{margin-bottom:var(--m_4);padding:var(--m_1) 0 0;border:none;border-radius:0;box-shadow:none;}
			.score{max-width:var(--score_W);}
			.score .creationPat:nth-child(2n){padding-left:var(--beat_paddding_left);background-position-x:0;}
		}


/* ■ 旗の高さを楽器名で指定 ※topは効かないので注意※
		・modelNo_for_1beat_svg で共通化した旗画像を指定
		・共通化なので高さは全て同じなので、IDの楽器名で高さを算出
		・高さは第◯間(2音分)で7pxの差
			・HT→SD: 7px
		・1音の差は下に4px
			・HT→LT: 4px下
			・LT→SD: 3px下
*/
.score .creationPat_score svg [id*="hataRI"]{transform:translateY(-6px);}
.score .creationPat_score svg [id*="hataHT"]{transform:translateY(7px);}
.score .creationPat_score svg [id*="hataLT"]{transform:translateY(11px);}
.score .creationPat_score svg [id*="hataSD"]{transform:translateY(14px);}
.score .creationPat_score svg [id*="hataFT"]{transform:translateY(21px);}
.score .creationPat_score svg [id*="hataTB"]{transform:translateY(28px);}


/* hata画像の位置確認用 */
/*
.score [class*="creationPat_Hata8_"]{opacity:0.5;}
.score [class*="creationPat_Hata8_"] img{
	position:relative;
	opacity:0.5;
}

*/