@charset "utf-8";

::selection { background-color: #777; }	/* テキスト選択時の色 */
::placeholder{	color: #fff; }					/* input または textarea 要素のプレイスホルダー文字列 */







#wrapper{
	float: left;
	padding: 0; margin: 0; width: 100%;
}




/* 登録結果BOX */
#touroku_kekka_b{
	display: none;
	clear: both; float: left;
	padding: 100px 0 300px 0; margin: 0; width: 100%;
}
#touroku_kekka_c{
	clear: both; float: left;
	padding: 0; margin: 0; width: 100%;

	/* 横のセンタリング(子要素) */
	display: flex;
	justify-content: center;		/* 水平方向		中央揃え */
}
#touroku_kekka_cb{
	clear: both; float: left;
	padding: 5px; margin: 0; width: 40%;
	border: 1px #777 solid; border-radius: 4px;
	background-color: #222;
}
@media screen and (max-width: 1280px){										/* 以下		xxx用		ビューエリアが360px以下の場合 */
	#touroku_kekka_cb{ width: 100%; }
}
/* エラー */
#touroktouroku_kekka_cb_er{
	clear: both; float: left;
	padding: 0; margin-top: 5px; width: 100%; min-height: 42px;
	text-align: left; color: #f90; font-size: 100%; line-height: 20px;
}




/* INPUT TYPE 用の親BOX */
.it{
	clear: both; float: left;
	padding: 0; margin: 0 0 30px 0; width: 100%;
}
/* エラー用	※上下にマージン設定 */
.t0{
	clear: both; float: left;
	padding: 0; margin: 3px 0 15px 0; width: 100%; min-height: 45px; height:auto;
	text-align: left; color: #f30; font-size: 100%; line-height: 22px;
}
/* INPUT 説明テキスト用 */
.t1{
	clear: both; float: left;
	padding: 0; margin: 0; width: 100%;
	text-align: left; color: #fff; font-size: 100%; line-height: 30px;
}
/* INPUT TYPE TEXT*/
.text1{
	padding: 0 5px; margin: 0; width: 100%; height: 35px;
	border: 1px #777 solid;
	background-color: #333; border-radius: 4px;
	text-align: left; color: #fff; font-size: 88%; line-height: 20px;
}
.text1:focus{ border: 1px #aaa solid; }
.button1{
	padding: 5px 15px; margin: 0;
	background-color: #222;
	border: 1px #ddd dashed; border-radius: 4px;
	text-align: center; color: #fff; font-size: 100%; line-height: 26px;
	cursor: pointer;
}
.button1:hover{ border: 1px #aaa solid; background-color: #777; color: #fff; }

/* QRコード埋め込み表示用 css */
#s_qr_b{
	display: none;
	clear: both; float: left;
	padding: 0; margin: 0; width: 100%;
}
#s_qr_c{
	clear: both; float: left;
	padding: 0; margin: 0; width: 100%;
	/* 横のセンタリング(子要素) */
	display: flex;
	justify-content: center;		/* 水平方向		中央揃え */
}
#s_qr_img_b{
	clear: both; float: left;
	padding: 13px; margin: 0; width: 280px; height: 280px;
	background-color: #fff;
}
















/* 登録する 領域 */
#touroku_b{
	clear: both; float: left;
	padding: 100px 0 300px 0; margin: 0; width: 100%;
}
#touroku_c{
	clear: both; float: left;
	padding: 0; margin: 0; width: 100%;

	/* 横のセンタリング(子要素) */
	display: flex;
	justify-content: center;		/* 水平方向		中央揃え */
}
#touroku_cb{
	clear: both; float: left;
	padding: 5px; margin: 0; width: 40%;
	border: 1px #777 solid; border-radius: 4px;
	background-color: #222;
}
@media screen and (max-width: 1280px){										/* 以下		xxx用		ビューエリアが360px以下の場合 */
	#touroku_cb{ width: 100%; }
}
/* 登録 タイトル */
.touroku_t0{
	clear: both; float: left;
	padding: 0; margin-bottom: 20px; width: 100%; height: 30px;
	border-bottom: 1px #777 dashed;
	text-align: center; color: #0ff; font-size: 100%; line-height: 20px;
}
.touroku_t1, .touroku_t2, .touroku_t3{
	clear: both; float: left;
	padding: 0; margin: 0; width: 100%;
	text-align: left; color: #fff; font-size: 100%; line-height: 20px;
}
.touroku_t1{ margin-bottom: 25px; }
.touroku_t2{ margin-top: 25px; color: #0ff; }
/* エラー */
#touroku_id_er, #touroku_pass_er{
	clear: both; float: left;
	padding: 0; margin-top: 5px; width: 100%; min-height: 42px;
	text-align: left; color: #f90; font-size: 100%; line-height: 20px;
}

/* 暗号鍵入力 input BOX */
.touroku_i{
	clear: both; float: left;
	padding: 0; margin: 5px 0 3px 0; width: 100%; height: 35px;
}
/* ID INPUT */
#touroku_i_id{
	display: block;
	clear: both; float: left;
	padding: 0 5px; margin-right: 5px; width : calc( 100% - 80px); height: 100%;
	background-color: #555;
	border: 1px #ccc dashed; border-radius: 4px;
	text-align: left; color: #fff; font-size: 100%; line-height: normal;
}
#touroku_i_id:focus{ background-color: #000; border: 1px #aaa solid; }
#touroku_id_kesu{
	float: left;
	padding: 0; margin: 0; width: 35px; height: 35px;
	background-color: #333;
	border: 1px #777 solid; border-radius: 4px;
	text-align: center; color: #fff; font-size: 100%; line-height: 35px;
	cursor: pointer;
}
#touroku_id_kesu:hover{ background-color: #555; } 
/* パスワード INPUT */
#touroku_i_pass_id{
	clear: both; float: left;
	padding: 0 5px; margin: 0 5px 0 0; width : calc( 100% - 80px); height: 100%;
	background-color: #555;
	border: 1px #ccc dashed; border-radius: 4px;
	text-align: left; color: #fff; font-size: 100%; line-height: normal;
}
#touroku_i_pass_id:focus{ background-color: #000; border: 1px #aaa solid; }
#touroku_pass_kesu, #touroku_pass_kakusu{
	float: left;
	padding: 0; margin: 0; width: 35px; height: 35px;
	background-color: #333;
	border: 1px #777 solid; border-radius: 4px;
	text-align: center; color: #fff; font-size: 100%; line-height: 35px;
	cursor: pointer;
}
#touroku_pass_kesu{ margin-right: 5px; }
#touroku_pass_kesu:hover, #touroku_pass_kakusu:hover{ background-color: #555; } 


/* チェックボックス */
#touroku_kiyaku_b{
	clear: both; float: left;
	padding: 0; margin-top: 30px;
}
.ck_b{ display: block; position: relative; user-select: none; }
/* デフォルトチェックボックス非表示 */
.ck_b input{ display: none; }
/* チェックボックスのスタイル */
.ck_b .checkmark {
	position: absolute; top: 0; left: 0;
	width: 25px; height: 25px;
	border: 2px solid #999;	border-radius: 4px;
	cursor: pointer;
}
/* チェックマーク作成 */
.ck_b .checkmark:after {
	content: "";
	display: none;
	position: absolute; left: 7px; top: 2px;
	width: 7px; height: 15px;
	border: 2px solid #FFF;	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}
/* チェック時のスタイル */
.ck_b input:checked + .checkmark{ border: 2px solid #09f; background-color: #09f; }
/* チェック時 チェックマーク表示 */
.ck_b input:checked + .checkmark:after{ display: block; }
#ck_t{
	display: block;
	padding-left: 35px; margin: 0;				/* テキストの左右位置 */
	width: 160px; height: 25px;					/* 縦と横の範囲 */
	text-align: left; color: #fff; font-size: 100%; line-height: 25px;	/* テキストの上下位置と色 */
	cursor: pointer;
}
/* 利用規約 BOX */
#touroku_riyou_kiyaku_b{
	display: none;
	clear: both; float: left;
	padding: 10px; margin-top: 10px; width: 100%; min-height: 45px;
	background-color: #ccc;
	border: 1px #777 solid; border-radius: 4px;
}
#touroku_riyou_kiyaku_b p{
	display: block;
	padding-bottom: 30px; margin: 0; width: 100%;
	text-align: left; color: #000; font-size: 100%; line-height: 20px;
}
/* 利用規約 BOXを閉じるボタン */
#touroku_riyou_kiyaku_b_c{
	clear: both; float: right;
	padding: 0; margin: 0; width: 55px;
	background-color: #333;
	border: 1px #777 solid; border-radius: 4px;
	text-align: center; color: #fff; font-size: 88%; line-height: normal;
	cursor: pointer;
}
/* 暗号化ウェブアプリに登録するのボタン */
#touroku_i_button{
	clear: both; float: left;
	padding-top: 35px; margin-top: 5px; width: 100%;
}
.touroku_i_button_id_on, .touroku_i_button_id_off{
	clear: both; float: right;
	padding: 5px 10px; margin: 0;
	background-color: #333;
	border: 1px #777 solid; border-radius: 4px;
	text-align: left; color: #fff; font-size: 100%; line-height: 26px;
}
.touroku_i_button_id_on:hover{ background-color: #555; border: 1px #aaa solid; cursor: pointer; }
.touroku_i_button_id_off{ opacity:0.50; }















/* ----- フッター */
footer{
	position: fixed; bottom: 0px; left: 0px;
	clear: both; float: left;
	margin: 0; width: 100%;
	background-color: #222;
	border-top: 1px #777 dashed;
}
footer div{
	clear: both; float: left;
	padding: 30px 0; margin: 0; width: 100%;
	background-color: #222;
	text-align: center; color: #fff; font-size: 88%;
}
footer div a:link{ color: #f90; }



#test2{
	clear: both; float: left;
	padding: 0; margin: 0;
	text-align: left; color: #fff; font-size: 100%; line-height: 26px; letter-spacing: 0px; text-indent: 0px;
}


#test{
	clear: both; float: left;
	padding: 5x; margin: 50px 0; padding: 5px 10px; width: 100%; height: 1100px;
	background-color: #730;
	text-align: left; color: #fff; font-size: 88%; line-height: 20px; letter-spacing: 0px; text-indent: 0px;
	border: 1px #333 solid;
}