@charset "utf-8";

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

#header{
	clear: both; float: left;
	padding: 10px; margin: 0; width: 100%;
	background-color: #222;
	border-bottom: 1px #555 solid; border-radius: 4px;
}
#header h1{
	float: left;
	padding: 0; margin: 5px 0 0 0; width: 240px; height: 45px;
	text-align: left; color: #f90; font-size: 125%; line-height: 45px;
}
@media screen and (max-width: 769px){							/* スマホ用		ビューエリアが769px以下の場合 */
	#header h1{ width: 100%; text-align: center; }
}
#settei_menu{	/* 詳細設定 */
	float: right;
	padding: 0; margin: 5px 0 0 0; width: 90px; height: 45px;
	background-color: #333;
	border: 1px #aaa dashed; border-radius: 4px;
	text-align: center; color: #fff; font-size: 100%; line-height: 45px;
	cursor: pointer;
}
#settei_menu:hover{ background-color: #555; }
@media screen and (max-width: 769px){							/* スマホ用		ビューエリアが769px以下の場合 */
	#settei_menu{ clear: both; margin: 5px 0 0 0; width: 100%; text-align: center; }
}
#header a{	/* top */
	float: right;
	padding: 0; margin: 5px 10px 0 0; width: 90px; height: 45px;
	background-color: #333;
	border: 1px #aaa dashed; border-radius: 4px;
	text-align: center; color: #fff; font-size: 100%; line-height: 45px;
}
#header a:link{ text-decoration: none; }
@media screen and (max-width: 769px){							/* スマホ用		ビューエリアが769px以下の場合 */
	#header a{ clear: both; margin: 10px 0 0 0; width: 100%; text-align: center; }
}





/* 詳細設定のボタン */
#sttei_box{
	display: none;	/* 非表示 */
	clear: both; float: left;
	padding: 15px 0; margin: 0; width: 100%;
	background-color: #222;
	border-bottom: 1px #777 solid;
}


/* QRコードの大きさ ～px */
#settei_ookisa{
	clear: both; float: left;
	width: 100%;
}
.sttei_text1{
	clear: both; float: left;
	padding: 0 0 0 5px; margin: 0; height: 30px;
	text-align: left; color: #fff; font-size: 100%; line-height: 30px;
}
#settei_ookisa_px{
	float: left;
	padding: 0 0 0 5px; margin: 0; height: 30px;
	text-align: left; color: #ff0; font-size: 100%; line-height: 30px;
}
#settei_ookisa_button_box{
	clear: both; float: left;
}
#settei_ookisa_button_box div{
	float: left;
	padding: 0; margin: 5px 0 0 5px; width: 70px; height: 45px;
	background-color: #333;
	border: 1px #777 solid; border-radius: 4px;
	text-align: center; color: #fff; font-size: 100%; line-height: 45px;
}
#settei_ookisa_1{ clear: both; background-color: #fff; }
#settei_ookisa_button_box div:hover{ border: 1px #aaa solid; background-color: #555; cursor: pointer; }


/* QRコードの修復タイプ */
#settei_syuuhuku{
	clear: both; float: left;
	margin-top: 45px; width: 100%;
}
#settei_syuuhuku_level{
	clear: both; float: left;
}
#settei_syuuhuku_level div{
	float: left;
	padding: 0; margin: 5px 0 0 5px; width: 70px; height: 45px;
	background-color: #333;
	border: 1px #777 solid; border-radius: 4px;
	text-align: center; color: #fff; font-size: 100%; line-height: 45px;
}
#settei_syuuhuku_level div:hover{ border: 1px #aaa solid; background-color: #555; cursor: pointer; }


/* 画像ファイルの形式 */
#settei_yohaku{
	clear: both; float: left;
	margin-top: 45px; width: 100%;
}
#settei_yohaku_box{
	clear: both; float: left;
}
#settei_yohaku_box div{
	float: left;
	padding: 0; margin: 5px 0 0 5px; width: 70px; height: 45px;
	background-color: #333;
	border: 1px #777 solid; border-radius: 4px;
	text-align: center; color: #fff; font-size: 100%; line-height: 45px;
	opacity:0.4;
}
#settei_yohaku_box div:hover{ border: 1px #aaa solid; background-color: #555; cursor: pointer; }


/* 画像ファイルの形式 */
#settei_img_type{
	clear: both; float: left;
	margin-top: 45px; width: 100%;
}
#settei_img_type_box{
	clear: both; float: left;
}
#settei_img_type_box div{
	float: left;
	padding: 0; margin: 5px 0 0 5px; width: 70px; height: 45px;
	background-color: #333;
	border: 1px #777 solid; border-radius: 4px;
	text-align: center; color: #fff; font-size: 100%; line-height: 45px;
	opacity:0.4;
}
#settei_img_type_box div:hover{ border: 1px #aaa solid; background-color: #555; cursor: pointer; }


/* 詳細設定を閉じる */
#settei_menu_close{
	clear: both; float: left;
	padding: 0; margin-top: 45px; width: 150px; height: 40px;
	background-color: #f90;
	border: 2px #fff solid; border-radius: 4px;
	color: #000; font-size: 100%;
	display: flex; align-items: center; justify-content: center;			/* 縦方・水平方向の中央寄せ */
}
#settei_menu_close:hover{ background-color: #f70; cursor: pointer; }


/* テキストエリア */
#texarea_box{
	clear: both; float: left;
	padding: 0; margin-top: 45px; width: 100%;
}
#texarea_box_ta{
	clear: both; float: left;
	padding: 0; margin: 0; width: 100%; height: 80px;
	background-color: #900;
	border: 1px #777 solid;
}
#msg{	/* テキストエリア */
	display: block;
	clear: both; float: left;
	padding: 2px 3px; margin: 0; width: 100%; height: 100%;
	background-color: #333;
	border: 1px #777 solid;
	text-align: left; color: #fff; font-size: 113%; line-height: 24px;
}
#settei_qr_sakusei{
	clear: both; float: left;
	padding: 0; margin-top: 40px; width: 170px; height: 40px;
	background-color: #f90;
	border: 2px #fff solid; border-radius: 4px;
	color: #000; font-size: 100%;
	display: flex; align-items: center; justify-content: center;			/* 縦方・水平方向の中央寄せ */
}
#settei_qr_sakusei:hover{ background-color: #f70; cursor: pointer; }



/* canvas imgタグにQR画像を出力（gif B64形式の場合）*/
#canvas_box{
	display: none;
	clear: both; float: left;
	padding: 0 0 100px 0; margin: 50px 0 0 0; width: 100%;
}
#canvas_img{	/* canvas用画像 */
	padding: 0; margin: 0;
	vertical-align: bottom;
}
#qrcode_img{	/* 保存用画像 */
	padding: 0; margin: 0;
	vertical-align: bottom;
}
#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 */
	padding: 3px 0; margin: 65px auto 0 auto; width: 160px;
	background-color: #555; border-radius: 4px;
	text-align: center; color: #fff; font-size: 113%;
	cursor: pointer;
}
#reset_button:hover{ background-color: #777; }


/* エラーメッセージ等・背景黒画面*/
#oshirase_b{
	display: none;/**/
	clear: both; float: left;
	padding: 20px 0 0 0;  margin: 0 auto; width: 100%;
	background-color: #000;
	text-align: center;
}
#oshirase_t{
	display: block;
	padding: 10px; margin: 0 auto; width: 100%; max-width: 500px;
	background-color: #333;
	border: 1px #fff solid; border-radius: 4px;
	text-align: left; color: #fff; font-size: 100%; line-height: 26px;
}
#oshirase_link{
	padding: 0; margin: 45px auto 0 auto; width: 150px; height: 45px;
	background-color: #333;
	border: 1px #aaa dashed; border-radius: 4px;
	text-align: center; color: #fff; font-size: 100%; line-height: 45px;
}
#oshirase_link:hover{ background-color: #555; cursor: pointer; }