#wrapper{
	width:100%;
	max-width:1280px;
	height:480px;
	border:1px solid #CCC;
	box-sizing:border-box;
	margin:20px auto 0;
	background-image:url(../images/content_back.jpg);
	background-repeat:repeat;
}
@media screen and (max-width:1020px) {
	#wrapper{
		margin:0 auto;
	}
}

.l_barCP {
	border-left:5px solid #493BC1;
	padding-left:0.5em;
}
.bg_CP  { background-color:#493BC1;	color: #FFF; }
.bg_CP a{ color: #FFF; }

/* ============================== */
/* scene1.php */
/* ============================== */
.sample
{
	max-width:800px;
	margin:10px auto;
	text-align:center;
	display:flex;
	flex-wrap:wrap;
}
.sample input:not([type="text"]){display:none;}
.sample label
{
	display:block;
	font-size:14px !important;
	text-align:center;
	min-width:150px;
	height:50px;
	line-height:50px !important;
	padding:0 10px !important;
	margin:5px;
	font-weight:bold;
	opacity:0.4;
	border-radius:2px;
}
.sample input[type="radio"]:checked + label
{
	opacity:1;
	color:white;
}
.sample select,
.sample input[type="text"]
{
	min-width:150px;
	height:50px;
	line-height:50px;
	margin:5px;
	padding:0 10px;
	font-size:16px;
	border:1px gray solid;
	border-radius:2px;
}
.max800
{
	max-width:1000px;
	margin:20px auto;
}
#wrapper
{
	height:100% !important;
}
.sample input[type="radio"]:disabled + label
{
	text-decoration:line-through;
	background-color:#CCC;
}

#melody label{display:flex; align-items:center;}
#melody p{font-size:18px; font-weight:bold; padding-right:8px;}

#status{position:relative; margin-top:15px;}
#statusA p{text-align:center;}
#statusA p:last-child{margin-bottom:20px;}
#statusB
{
	position:absolute;
	top:10px;
	left:auto;
	right:15px;
	width:120px;
	height:40px;
	line-height:40px;
	text-align:center;
	font-weight:bold;
	background-color:#F00;
	border-radius:2px;
	color:white;
	cursor:pointer;
}
#statusC
{
	position:absolute;
	top:60px;
	left:auto;
	right:15px;
	width:120px;
	height:40px;
	line-height:40px;
	text-align:center;
	font-weight:bold;
	background-color:#33F;
	border-radius:2px;
	color:white;
	cursor:pointer;
}
#statusD
{
	position:absolute;
	top:110px;
	left:auto;
	right:15px;
	width:120px;
	height:40px;
	line-height:40px;
	text-align:center;
	font-weight:bold;
	background-color:#999;
	border-radius:2px;
	color:white;
	cursor:pointer;
}

@media screen and (max-width:1020px){
	#statusA p{text-align:left;}
}

/* ============================== */
/* scene2.php */
/* ============================== */

/* ベースメント */
.bg_CP  { background-color:#493BC1;	color: #FFF; }
.bg_CP a{ color: #FFF; }

/* 氏名やTwitterなどの情報 */
#nameWrap {
	position:absolute;
	top:0px;
	left:125px;
	font-size:14px;
	font-weight:bold;
	color:black;
}
.noteU1::before{
	content: "";
	display: inline-block;
	width:15px;
	height:50px;
	background-size: contain;
	vertical-align: middle;
	background: url("images/noteU1.png") no-repeat;
	background-position:0% 55%;
	background-size:90%;
}
.noteU2::before{
	content: "";
	display: inline-block;
	width:15px;
	height:50px;
	background-size: contain;
	vertical-align: middle;
	background: url("images/noteU2.png") no-repeat;
	background-size:85%;
}
.noteU4::before{
	content: "";
	display: inline-block;
	width:15px;
	height:50px;
	background-size: contain;
	vertical-align: middle;
	background: url("images/noteU4.png") no-repeat;
	background-size:85%;
}

#qrcodeWrap
{
	position:absolute;
	top:3px;
	right:140px;
	line-height:25px;
}
#qrcodeWrap a{
	color:#FFF;
	display: block;
	font-size:14px;
	font-weight: bold;
	border:3px solid #00ACEE;
	border-radius:50px;
	box-sizing:border-box;
	padding:0 15px;
	text-align:center;
	text-decoration:none !important;
	background:#00ACEE;
}
#qrcodeWrap a:hover
{
	color:#FFF;
	border:3px solid #00CEFF;
    background: #00CEFF;
}

#twitterWrap
{
	position:absolute;
	top:3px;
	right:20px;
	line-height:25px;
}

#twitterWrap a.btn-tweet
{
	color:#FFF;
	display: block;
	font-size:14px;
	font-weight: bold;
	border:3px solid #00acee;
	border-radius:50px;
	box-sizing:border-box;
	padding:0 15px;
	text-align:center;
	text-decoration:none !important;
	background:#00ACEE;
}
#twitterWrap a.btn-tweet:before
{
	content: "";
	display: inline-block;
	width:17px;
	height: 17px;
	margin: 3px 10px 0 0;
	background: url("images/Twitter_Logo_WhiteOnImage.png") no-repeat;
	background-size: contain;
	vertical-align: middle;
}
#twitterWrap a.btn-tweet:hover
{
	border:3px solid #00CEFF;
    background: #00CEFF;
}

#develWrap
{
	position:absolute;
	top:-1%;
	left:2%;
}
#develWrap #devel
{
	width:60px;
	height:60px;
	display:inline-block;
	mask: no-repeat center/70%;
	-webkit-mask: no-repeat center/70%;
	background: darkorange;
	mask-image:url(images/devel.png);
	-webkit-mask-image:url(images/devel.png);
}
#highscoreWrap
{
	padding:0 20px;
	border:3px #493BC1 solid;
	border-radius:50px;
	background:#493BC1;
	box-sizing:border-box;
	color:white;
	position:absolute;
	top:3px;
	right:280px;
	font-size:14px;
	font-weight:bold;
	line-height:25px;
}

/* 五線関連 */
.stage1 {
	position: relative;
	width: 100%;
	height: 50%;
	margin-left: auto;
	margin-right: auto;
}
.note1 {
	position: absolute; /*display: none;*/
}
.add1 {
	position: absolute;
	display: none;
}
.tie1 {
	position: absolute;
	width: 50px;
	height: 70px;
	display: none;
}
.tie3 {
	position: absolute;
	width: 65px;
	height: 70px;
	display: none;
}

/* ユーザーインターフェース関連 */
.controller{
	border-radius:3px;
	font-weight:bold;
	font-size:20px;
	text-align:center;
	box-shadow:2px 2px 2px;
}
.controller a{
	color:white;
	text-decoration:none;
	display:block;
	touch-action: none;
	-webkit-touch-callout:none; /* リンク長押しのポップアップを無効化 */
	-webkit-user-select:none; /* テキスト長押しの選択ボックスを無効化 */
	-webkit-tap-highlight-color:rgba(0,0,0,0);
}
.controller a:active{
	background-color:#063;
	border-radius:3px;
}
.controller.f16 {
	font-size:16px;
}
.H60W80
{
	height:60px;
	width:80px;
	line-height:60px;
}
.H60W120
{
	height:60px;
	width:120px;
	line-height:60px;
}
.H80W80
{
	height:80px;
	width:80px;
	line-height:80px;
	font-size:36px;
}
.H60W170
{
	height:60px;
	width:170px;
	line-height:60px;	
}

#leftBottom	{	display:none; position:fixed; left:5px;	 z-index:99;}
#rightBottom{	display:none; position:fixed; right:5px; z-index:99;}
#centerBottom{	display:none; position:fixed; left:20%;	right:auto;  z-index:99; bottom:10px; width:180px; justify-content:center; flex-wrap:wrap;}
@media screen and (min-width:600px){
	#centerBottom{	left:15%; width:350px; flex-wrap:nowrap;}
}

#pcBottom	{	display:none; position:fixed; right:15px; bottom:3%; z-index:99;}
#leftMiddle{
	display:flex;
	justify-content:space-between;
	width:720px;
	margin-left:2%;
}

#centerMiddle{
	margin-left:10px
}

#rightMiddle{
	margin:0 20px 0 auto;
}
#rightMiddle p{
	font-size:14px;
	line-height:20px;
}
#tonePlay{
	background-color:#093;
	cursor:pointer;
}
#tonePlay a
{
	text-decoration:none;
	color:white;
	display:block;
}
#tonePlay a:active
{
	background-color:#043;
}

#transUP,#transDW,#btnTheme
{
	font-size:10pt;
	background-color:#093;
	cursor:pointer;
}
#transUP a,#transDW a,#btnTheme a
{
	text-decoration:none;
	color:white;
	display:block;
}
#transUP a:active,#transDW a:active,#btnTheme a:active
{
	background-color:#063;
}

#toLeft	{	position:fixed;	background-color:#093;	right:100px;	bottom:10px;}
#toRight{	position:fixed;	background-color:#093;	right:10px;		bottom:10px;}
#toUp	{	position:fixed;	background-color:#093;	bottom:100px;}
#toDown	{	position:fixed;	background-color:#093;	bottom:10px;}

#rhythm	{
	position:fixed;	
	background-color: #999;
	border-radius: 3px;
	right:10px;	
	bottom:170px;
}
#shiftR{
	position:fixed;
	background-color: #999;
	border-radius: 3px;
	right:10px;
	bottom:100px;
}
#shiftL{
	width:60px;
	height:100px;
	font-size:14px;
	writing-mode:vertical-rl;
	position:fixed;
	background-color: #999;
	border-radius: 3px;
	left:95px;
	bottom:10px;
	line-height:60px;
}
#shiftR a:active, #shiftL a:active,#mute:active{
	background-color:#666;
	border-radius:3px;
}
#mute{
	width:60px;
	height:60px;
	line-height:60px;
	font-size:30px;
	position:fixed;
	left:95px;
	bottom:120px;
	background-color: #999;
}


#edit{
	min-width:70px;
	font-size:20px;
	box-shadow:2px 2px 2px;
}
#edit a:active{
	/*background-color:#493BC1;*/
	background-color:#2719A0;
	border-radius:3px;
}
#setAcc{
	width:60px;
	height:170px;
	writing-mode:vertical-rl;
	position:fixed;
	line-height:60px;
	background-color:#999;
	display:none;	/* 短調の時のみ出現する */
	font-size:24px;
	left:165px;
	bottom:10px;
}
#setAcc a:active{
	background-color:#666;
	border-radius:3px;
}
#back{
	font-size:18px;
	background-color:#999;
}
#back a:active{
	background-color:#666;
	border-radius:3px;
}
#send{
	font-size:18px;
	background-color:#093;
}
#send a:active{
	background-color:#063;
	border-radius:3px;
}

#next{
	font-size:18px;
	background-color:#493BC1;
	display:none;	/* 最初は不可視 */
}
#next a:active{
	background-color:#2719A3;
	border-radius:3px;
}
#code{
	width:45%;
	min-width:70px;
	font-size:18px;
	margin:3px 3px;
	background-color:#999;
}
#code a:active{
	background-color:#666;
	border-radius:3px;
}

/* モーダルメッセージ（ペロタンからのひとこと）関係 */
.modal{
	display: none;
	width: 80%;
	height:80%;
	position: fixed;
	top: 50%;
	left: 50%;
	background: #fff;
	padding: 20px;
	transform: translate(-50%,-50%);
	border-radius:4px;
	box-sizing: border-box;
	z-index: 1;
}
#pero{
	background-size:auto 90%;
	background-repeat:no-repeat;
	background-position:center center;
	width:100%;
	height:100%;
	position:absolute;
	top:0;
	left:0;
	opacity:0.4;
}
#comment{
	width:85%;
	text-align:center;
	position:absolute;
	top:50%;
	left:50%;
	transform: translateY(-50%) translateX(-50%);
	overflow:auto;
}
#comment p{
	font-size:3vh;
}
#comment p:first-child{
	font-size:3vh;
}
.is-overlay{
	display: none;
	width: 100%;
	height: 120%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 0;
	background-color: rgba(0,0,0,.6);
}