@charset "utf-8";


/* 	
===黒===
#222222

===白===
#FDFDEB
=

===ネイビー==濃い
#09194F 基本
#465276
#838B9D
#C0C4C4
うすい


===緑===
濃い
#00818A 基本
#3FA0A2
#7FBFBB
#BEDED3
うすい


===黄色===
濃い
#F9CE00 基本
#FADA3B
#FBE676
#FCF1B0
うすい


===ボタン緑===
濃い
#A2FFA2

#D1FFD1
うすい


===ボタン赤===
濃い
#FFA2A2

#FFD1D1
うすい


===ボタン青===
濃い
#A2A2FF

#D1D1FF
うすい

===ボタン黄色===
濃い
#FFFF74

#FFFFA2
うすい

*/

/* ===変数定義=== */

:root{
	--navy: #09194F;
	--yellow: #F9CE00;
	--green: #00818A;
	--light-green: #BEDED3;
	--white: #FDFDEB;
	--brack: #222222;
	--gray: #cccccc;
	--shadow: 8px 4px 20px rgba(0, 0, 0, 0.1);
}


.inline-block{
	display: inline-block;
	vertical-align: top;
}

/* 
*===main===
*/
.score-editor-main-inner{
	width: 100%;
	padding: 5px;
	overflow-x: hidden;
}

.score-editor-headline{
	text-align: center;
}


/* 
*====form1,form2====
*/

.score-editor-form{
	margin: 20px;
	padding: 20px;
	width: fit-content;
	background: #BEDED3;
	border: solid 1px #00818A;
	border-radius: 10px;
}

.score-editor-form-item{
	padding: 10px 0;
}

.score-editor-form-button{
	padding: 3px;
	background: #FDFDEB;
	color: var(--brack);
	text-align: center;
	border-radius: 5px;
	box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5),
	2px 2px 4px rgba(255, 255, 255, 0.5) inset;
	transition: background 0.2s;
}

.score-editor-form-button:hover{
	background: #BEDED3;
}

.score-editor-form-select{
	border: solid 1px #00818A;
	text-align: center;
	padding: 3px;
	background: #FDFDEB;
	cursor: pointer;
}



/* 
*====editor-container====
*/

.score-editor-editor-container{
	width: 98%;
	min-width: 600px;
	margin: 0 auto;
	text-align: left;
	overflow-x: hidden;
	display: flex;
}



.score-editor-label-container{
	width: fit-content;
	padding-top: 105px;
}

.score-editor-parts-label{
	margin: 5px 0;
	padding: 0 5px;
	height: 25px;
	font-size: 16px;
	text-align: center;
	line-height: 25px;
	vertical-align: bottom;
	border-radius: 5px;
	box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5),
				2px 2px 4px rgba(255, 255, 255, 0.5) inset;
}






.score-editor-editor-main{
	width: calc(99% - 123px);
	overflow: hidden;
	white-space: nowrap;
}

.score-editor-container{
	width: 100%;
	overflow-x: scroll;
	white-space:nowrap;
}


.bar-container{
	margin: 10px;
	background: #FDFDEB;
	border: solid 1px #00818A;
	border-radius: 20px;
	overflow: hidden;
	box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.bar-label-wrapper{
	display: flex;
	align-items: center;
	padding: 0 10px;
	background: #00818A;
}

.bar-label{
	font-size: 25px;
	color: #FDFDEB;
}

.bar-button-wrapper{
	margin-left: auto;
}

.bar-button{
	border: none;
	margin: 0 3px;
	padding: 3px;
	background: #FDFDEB;
	text-align: center;
	line-height: 15px;
	vertical-align: middle;
	border-radius: 5px;
	box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5),
				2px 2px 4px rgba(255, 255, 255, 0.5) inset;
	transition: background 0.2s;
}

.bar-button:hover{
	background: #BEDED3;
}


.count-container{
	margin: 10px;
	padding: 10px;
	background: #BEDED3;
	border-radius: 10px;
}

.count-label{
	color: #00818A;
}


.tuplet-button{
	border: none;
	margin: 0 3px;
	padding: 0;
	width: 20px;
	height: 20px;
	line-height: 20px;
	background: #FDFDEB;
	color: var(--brack);
	text-align: center;
	border-radius: 5px;
	box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5),
				2px 2px 4px rgba(255, 255, 255, 0.5) inset;
	transition: background 0.2s;
}

.tuplet-button:hover{
	background: #BEDED3;
}





.inputBox{
	width: 50px;
	height: 25px;
	line-height: 25px;
	text-align: center;
	font-size: 20px;
	margin: 5px 3px;
	padding: 0;
	background: #eee;
	border-radius: 5px;
	box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5),
	2px 2px 4px rgba(255, 255, 255, 0.5) inset;
	/* vertical-align: middle; */
	transition: background 0.2s;
}

.inputBox:hover{
	background: #FDFDEB;
	cursor: pointer;
	-webkit-user-select: none;
	   -moz-user-select: none;
	    -ms-user-select: none;
	        user-select: none;
}

.space{
    margin-top: 15px;
}

.odd{
    background: #7FBFBB;
}

.even{
    background: #BEDED3;    
}


@media screen and (max-width: 480px) {
	.score-editor-editor-container{
		min-width: 100%;
		width: 98%;
	}
	
	
	
	.score-editor-label-container{
		padding-top: 70px;
	}
	
	.score-editor-parts-label{
		margin: 5px 0;
		padding: 0 5px;
		height: 16px;
		font-size: 12px;
		line-height: 16px;
	}

	.score-editor-editor-main{
		width: calc(99% - 100px);
		overflow: hidden;
		white-space: nowrap;
	}
	
	.score-editor-container{
		width: 100%;
		overflow-x: scroll;
		white-space:nowrap;
	}
	
	
	.bar-container{
		margin: 5px;
		border-radius: 10px;
	}
	
	.bar-label-wrapper{
		padding: 0 5px;
	}
	
	.bar-label{
		font-size: 16px;
	}
	
	.bar-button-wrapper{
	
	}
	
	.bar-button{
		line-height: 12px;
	}
	
	
	.count-container{
		margin: 5px;
		padding: 5px;
		border-radius: 5px;
	}
	
	.count-label{
		font-size: 15px;
	}
	
	
	.tuplet-button{
		width: 15px;
		height: 15px;
		line-height: 15px;
	}
	

	.inputBox{
		width: 30px;
		height: 16px;
		line-height: 16px;
		font-size: 14px;
	}

	.space{
		margin-top: 15px;
	}
}

/* 
*====sequencer control====
*/

.score-editor-sequencer-container{
	margin: 20px;
	padding: 20px;
	width: fit-content;
	background: #BEDED3;
	border: solid 1px #00818A;
	border-radius: 10px;
}


/* 
*====error====
*/
.error{
	margin: 20px;
	padding: 20px;
	background: #FFCDD2;
	border-radius: 10px;
}

.error > p{
	color: #E53935;
}

.invisible{
	display: none;
}

/* 
*====canvas====
*/

.canvas-container{
    padding: 20px;
	text-align: left;
	max-width: 100%;
}

.canvas-container canvas{
	max-width: 100%;
}

/* 
*====changeImg====
*/

.change-img-container{
    padding: 20px;
    text-align: left;
}

.change-img-button{
	border: none;
	margin: 0 3px;
	padding: 5px;
	background: #FDFDEB;
	color: var(--brack);
	text-align: center;
	line-height: 15px;
	vertical-align: middle;
	border-radius: 5px;
	box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5),
				2px 2px 4px rgba(255, 255, 255, 0.5) inset;
	transition: background 0.2s;
}

.change-img-button:hover{
	background: #BEDED3;
}

/* 
*====newImg====
*/

.new-img-container{
    padding: 20px;
    text-align: left;
}


/* 
*====button slider====
*/

input[type="range"].score-editor-slider {
    -webkit-appearance: none; /* 🚩これ無しだとスタイルがほぼ全く反映されないので注意 */
    appearance: none;
    cursor: pointer; /* カーソルを分かりやすく */
    outline: none; /* スライダーのアウトラインは見た目がキツイので消す */
    height: 3px; /* バーの高さ */
    width: 200px; /* バーの幅 */
    background: var(--navy); /* バーの背景色 */
    border-radius: 10px; /* バーの両端の丸み */
}

/* WebKit向けのつまみ */
input[type="range"].score-editor-slider::-webkit-slider-thumb {
    -webkit-appearance: none; /*  🚩デフォルトのつまみのスタイルを解除 */
    background: var(--green); /* 背景色 */
    width: 24px; /* 幅 */
    height: 24px; /* 高さ */
    border-radius: 50%; /* 円形に */
    box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.15); /* 影 */
}

/* Moz向けのつまみ */
input[type="range"].score-editor-slider::-moz-range-thumb {
    background: #53aeff; /* 背景色 */
    width: 24px; /* 幅 */
    height: 24px; /* 高さ */
    border-radius: 50%; /* 円形に */
    box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.15); /* 影 */
    border: none; /* デフォルトの線を消す */
}

/* Firefoxで点線が周りに表示されてしまう問題の解消 */
input[type="range"].score-editor-slider::-moz-focus-outer {
    border: 0;
}

/* つまみをドラッグしているときのスタイル */
input[type="range"].score-editor-slider:active::-webkit-slider-thumb {
    box-shadow: 0px 5px 10px -2px rgba(0, 0, 0, 0.3);
}



.score-editor-btn-minus{
    position: relative;
    padding: 0;
    width: 20px;
    height: 20px;
    color: var(--white);
    background: var(--navy);
    border-radius: 50%;
    transition: opacity 0.2s;
}

.score-editor-btn-minus::before{
    content: '';
    position: absolute;
    background: var(--light-navy);
    width: 13px;
    height: 2px;
    border-radius: 3px;
    top: 50%;
    left: 50%;
    translate: -50% -50%;

}

.score-editor-btn-plus{
    position: relative;
    padding: 0;
    width: 20px;
    height: 20px;
    color: var(--white);
    background: var(--navy);
    border-radius: 50%;
    transition: opacity 0.2s;
}

.score-editor-btn-plus::before{
    content: '';
    position: absolute;
    background: var(--light-navy);
    width: 13px;
    height: 2px;
    border-radius: 3px;
    top: 50%;
    left: 50%;
    translate: -50% -50%;

}

.score-editor-btn-plus::after{
    content: '';
    position: absolute;
    background: var(--light-navy);
    width: 2px;
    height: 13px;
    border-radius: 3px;
    top: 50%;
    left: 50%;
    translate: -50% -50%;

}

@media screen and (max-width: 480px) {
	input[type="range"].score-editor-slider {
		width: 180px; /* バーの幅 */
	}
}