@charset "utf-8";

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


#sakusei_b{
	clear: both; float: left;
	padding: 0; margin: 0; width: 100%;
}

/* 詳細を閉じる ボタン */
#menu_open{
	position: relative; top: 40px; left: 0px;
	clear: both; float: left;
	padding: 2px 7px; margin: 0 0 30px 0;
	background-color: #072;
	border-top: 1px #555 solid; border-left: 1px #555 solid;
	text-align: center; color: #fff; font-size: 100%;
	cursor: pointer;
}
#menu_open:hover{ background-color: #052; }

/* MENU BOX*/
#menu{
	display: none;
	clear: both; float: left;
	padding: 10px 0 40px 0; width: 100%;
	background-color: #222;
	border-bottom: 1px #777 solid;
}
#menu_t{
	clear: both; float: left;
	padding: 0px 0px 0px 0px; margin: 0px 0px 20px 0px; width: 100%; height: 40px;
	text-align: center; color: #fff; font-size: 100%;
	border-bottom: 1px #777 solid;
}

/* QRコードの大きさ */
#menu_size{
	clear: both; float: left;
	margin: 30px 0 0 0; width: 100%;
}
#menu_size_t{
	float: left;
	padding: 0 0 5px 3px; width: 100%;
	text-align: left; color: #fff; font-size: 100%;
}
.qr_size{
	float: left;
	padding: 7px 0px; margin: 0 7px 7px 0; width: 80px;
	background-color: #333;
	border: 1px #777 solid; border-radius: 4px;
	text-align: center; color: #fff; font-size: 113%;
}
.qr_size:nth-child(5){ clear: both; }
.qr_size:hover{ border: 1px #aaa solid; cursor: pointer;  }
#size_px{	/* QRコードのサイズを表示させるBOX */
	clear: both; float: left;
	margin: 5px 0 0 0; padding: 0 0 0 10px; width: 100px; height: 34px;
	text-align: left; color: #f90; font-size: 113%;
}



/* QRコードの修復タイプ */
#menu_level{
	float: left;
	margin: 50px 0 0 0; width: 100%;
}
#menu_level_t{
	float: left;
	padding: 0 0 5px 3px; width: 100%;
	text-align: left; color: #fff; font-size: 100%;
}
.level_on, .level_off{
	float: left;
	padding: 7px 0px; margin: 0 15px 0 0; width: 60px;
	background-color: #333;
	border: 1px #777 solid; border-radius: 4px;
	text-align: center; color: #fff; font-size: 125%;
}
.level_off{ opacity:0.4; cursor: pointer; }
.level_off:hover{ opacity:0.7; }


/* ファイル形式の選択 */
#menu_kakutyoushi{
	float: left;
	margin: 50px 0 0 0; width: 100%;
}
#menu_kakutyoushi_t{
	float: left;
	padding: 0 0 5px 3px; width: 100%;
	text-align: left; color: #fff; font-size: 100%;
}
.kakutyoushi_on, .kakutyoushi_off{
	float: left;
	padding: 7px 0px; margin: 0 15px 0 0; width: 60px;
	background-color: #333;
	border: 1px #777 solid; border-radius: 4px;
	text-align: center; color: #fff; font-size: 125%;
}
.kakutyoushi_off{ opacity:0.4; cursor: pointer; }
.kakutyoushi_off:hover{ opacity:0.7; }

/* 詳細を閉じる ボタン */
#menu_close{
	position: relative; top: 40px; right: 0px;
	clear: both; float: right;
	padding: 2px 7px; margin: 0px 0px 0px 0px;
	background-color: #f90;
	border-top: 1px #555 solid; border-left: 1px #555 solid;
	text-align: center; color: #000; font-size: 100%;
	cursor: pointer;
}
#menu_close:hover{ background-color: #f70; }




/* テキストエリア BOX */
#msg_b{
	position: relative; top: 0px; left: 0px;
	clear: both; float: left;
	padding: 0px 0px; margin: 50px 0px 0px 0px; width: 100%;
}
.msg_moji{	/* 1番目以外の全て */
	float: left;
	padding: 0px 18px; height: 30px;
	background-color: #333;
	border-top: 1px #777 solid; border-right: 1px #777 solid;
	text-align: left; color: #fff; font-size: 88%; line-height: 30px; letter-spacing: 0px; text-indent: 0px;
	cursor: pointer;
}
.msg_moji:hover{	background-color: #555; }
.msg_moji:first-child{ border-left: 1px #777 solid; }		/* 最初のみ */


#msg{		/* 文字列を入力するテキストエリア */
	clear: both; float: left;
	padding: 4px 4px; margin: 0; width: 80%; min-height: 100px;
	background-color: #000;
	border: 1px #777 solid;
	text-align: left; color: #fff; font-size: 16px; line-height: 22px;
}
#msg::placeholder{ color: #ccc; } 
#msg:focus{ border: 1px solid #fff; outline: 0; }	/* afari Chrome 対策 */

/* テキストエリアの高さを変更するボタン */
#msg_button_b{
	position: relative; top: 0px; left: 0px;
	float: left;
	width: 80%;
	border-right: 1px #777 solid; border-bottom: 1px #777 solid; border-left: 1px #777 solid;
}
#msg_button_m, #msg_button_p{
	float: left;
	padding: 3px 0px; margin: 0; width: calc(100% / 2 - 0px);
	background-color: #333;
	text-align: center; color: #fff; font-size: 125%; line-height: 20px;
	cursor: pointer;
}
#msg_button_m{ border-right: 1px #777 solid; }
#msg_button_m:hover, #msg_button_p:hover{ background-color: #555; }

/* QRコードを作成するのボタン */
#sakusei{
	clear: both; float: left;
	padding: 5px 0px; margin: 120px 0 0 0; width: 200px;
	background-color: #333;
	border: 1px #777 solid; border-radius: 4px;
	text-align: center; color: #fff; font-size: 100%;
	cursor: pointer;

	display: flex;/**/
	justify-content: center;	/* 水平方向の中央寄せ */
	align-items: center;			/* 縦方向の中央寄せ */
}
#sakusei:hover{ background-color: #555; }






/* 生成されたQRコードを表示するIMG BOX */
#qrcode_img_box_futa{
	display: none;
	clear: both; float: left;
	width: 100%;
}
#qrcode_img_box{
	clear: both; float: left;
	margin: 100px 0px 0px 0px; width: 100%;
}
#qrcode_img_soto{
	clear: both; float: left;
/*	width: 250px; height: 250px;/**/
}
#qrcode_img{
	clear: both; float: left;
/*	width: 250px; height: 250px;/**/
}		/* QRコード表示BOXは全てセンタリング */
#qrcode_img_box, #qrcode_img_soto, #qrcode_img{
	display: flex;/**/
	justify-content: center;	/* 水平方向の中央寄せ */
	align-items: center;			/* 縦方向の中央寄せ */
}
#qrcode_img img{ vertical-align: bottom; }	/*下の隙間対策 */


/* canvas */
#picture_box{
	display: none;
	clear: both; float: left;
	margin: 50px 0px 200px 0px;
	background-color: #fff;
}
#picture{
	clear: both; float: left;
	padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px;
}


/* 完成後に表示させるBOX */
#qrcode_kansei{
	display: none;
	clear: both; float: left;
	padding: 0; margin-top: 20px; width: 100%;
}
#qrcode_img_t{		/* クリックorタップで保存 */
	clear: both; float: left;
	padding: 0px 0px 0px 0px; width: 100%;
	text-align: center; color: #fff; font-size: 113%;
}
#reset_button{		/* リセット ボタンBOX */
	clear: both; float: left;
	margin-top: 60px; width: 100%;

	display: flex;/**/
	justify-content: center;	/* 水平方向の中央寄せ */
}
#reset_button p{	/* リセット ボタン */
	padding: 3px 25px;
	background-color: #777; border-radius: 4px;
	text-align: center; color: #fff; font-size: 113%;
	cursor: pointer;
}
#reset_button p:hover{ background-color: #555; }







footer{
	clear: both; float: left;
	padding: 0px 0px 0px 0px; margin: 300px 0px 0px 0px; width: 100%;
}
small{
	clear: both; float: left;
	padding: 0px 0px; width: 100%;
	text-align: center; color: #fff; font-size: 88%; line-height: 20px;
}