@charset "utf-8";

::selection {
  background-color: #777;	/* テキスト洗濯時の色 */
}

/* QRコード画像読み込みBOX */
#drop_box{
	clear: both; float: right;
	padding: 50px 20px 0 20px; width: 220px; height: 220px;
	background-color: #111;
	border: 2px #09f dashed; border-radius: 7px;
	text-align: center; color: #aaa; font-size: 113%; line-height: 36px;
	cursor: pointer;

	/* 幅や高さ不明の時のセンタリング */
	position: absolute; top: 50%; left: 50%;
	margin-right: -50%;
	-webkit-transform: translate(-50%, -50%); /* Safari用 */
	transform: translate(-50%, -50%);

	/* 均等割付 */
	text-align-last: justify;			/* Chrome・Firefox */
	text-justify: inter-ideograph;	/* IE・Edge */
}
#drop_box:hover{
	transition: all 500ms ease 0ms;				/* まとめて指定する場合「transition: transition-propertyの値 transition-durationの値 transition-timing-functionの値 transition-delayの値;」*/
	background-color: #222; border: 2px #0af dashed; color: #fff;
}
#drop_box input[type="file"]{
	position: absolute; top: 0px; right: 0px;
	width: 100%; height: 100%;
	font-size: 135px;
	cursor: pointer;
	opacity: 0; filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);/**/
}


/* MENU BOX */
#waku{
	clear: both; float: left;
	padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px; width: 100%;
	background-color: #000;
}
/* 結果表示 BOX */
#kekka{
	display: none;/**/
	clear: both; float: left;
	width: 100%; min-height: 700px;
	background-color: #000;
}
#msg_menu{
	clear: both; float: left;
	padding: 10px 0px 0px 0px; margin: 0; width: 100%;
}
.msg_menu_link_on, .msg_menu_link_off{
	float: left;
	padding: 5px 0px; margin: 0px 10px 0px 0px; width : calc(100% / 2 - 5px);
	background-color: #333;
	border: 1px #777 solid; border-radius: 4px;
	text-align: center; color: #fff; font-size: 100%;
}
.msg_menu_link_off{ opacity:0.3; }
.msg_menu_link_off:hover{ opacity:0.6; cursor: pointer; }
.msg_menu_copy_on, .msg_menu_copy_off{
	float: left;
	padding: 5px 0px; margin: 0px 0px 0px 0px; width : calc(100% / 2 - 5px);
	background-color: #333;
	border: 1px #777 solid; border-radius: 4px;
	text-align: center; color: #fff; font-size: 100%;
}
.msg_menu_copy_off{ opacity:0.3; }
.msg_menu_copy_off:hover{ opacity:0.6; cursor: pointer; }

#msg{			/* 文字列表示領域（リンク対応） */
	clear: both; float: left;
	padding: 4px 4px 40px 4px; margin: 0; width: 100%; min-height: 100px;
	background-color: #121212;
	border: 1px #555 solid; border-radius: 4px;
	text-align: left; color: #fff; font-size: 100%; line-height: 22px;
}
#msgt{
	display: none;/**/
	clear: both; float: left;
	padding: 4px 4px 40px 4px; margin: 0; width: 100%; min-height: 100px;
	background-color: #121212;
	border: 1px #555 solid; border-radius: 4px;
	text-align: left; color: #fff; font-size: 100%; line-height: 22px;
}
#msgt:focus{
	background-color: #121212;
	border: 1px #555 solid;
}
#msg2_textarea{
	padding: 0px 0px 40px 0px; margin: 0; width: 100%; height: 100%;
	background-color: #000;
	border: 0px #000 solid;
	text-align: left; color: #fff; font-size: 100%; line-height: 22px;
}
#msg2_textarea_button_box{		/* 文字拡大と選択ボタン BOX */
	clear: both; float: left;
	margin: 10px 0px 65px 0px; width: 100%;
}
#textarea_b1, #textarea_b2, #textarea_b3, #textarea_b4, #textarea_b5{
	float: left;
	padding: 5px 2px; margin: 0px 10px 0px 0px; width: 45px;
	background-color: #333;
	border: 1px #777 solid; border-radius: 4px;
	text-align: cnter; color: #fff; font-size: 100%;
}
#textarea_b4{ width: 60px; }	/* 選択 */
#textarea_b5{ width: 55px; }	/* TOP */
#textarea_b5 a{ text-decoration: none; }



/* canvasの親BOX */
#picture_box{
	display: none;/**/
	clear: both; float: left;
	width: 500px;
}
#picture{
	clear: both; float: left;
	padding: 0px;
	background-color: #fff;
	/* 幅や高さ不明の時のセンタリング */
	position: absolute; top: 50%; left: 50%;
	margin-right: -50%;
	-webkit-transform: translate(-50%, -50%); /* Safari用 */
	transform: translate(-50%, -50%);

	display: block;
}