@charset "utf-8";

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






#wrapper{
	float: left;
	box-sizing: border-box;
	padding: 0; margin: 0; width: 100%;
/*	display: flex; justify-content: center;				/* 子要素	幅や高さ不明	水平方向 */
}


/* 暗号化メモウェブアプリ MENU BOX */
#menu_b{
	clear: both; float: left;
	padding: 0; width: 100%;
	background-color: #333;
	border-bottom: 1px #777 solid;
}
#menu_b div{
	float: left;
	padding: 0; margin: 0; width: 100%; height: 35px;
	text-align: center; font-size: 107%; line-height: 35px;
}
#menu_b div a{ color: #f90; text-decoration: none; }
@media screen and (min-width: 1280px){			/* 1280以上		PC用 */
	#menu_b div{
		padding: 0 0 0 10px; text-align: left;
	}
}
#menu_b div a:hover{ color: #f70; }






/* メイン領域 */
#area1{
	clear: both; float: left;
	padding: 0; margin: 0; width: 100%;
	display: flex; justify-content: center;	/* 子要素	幅や高さ不明	縦方・水平方向 */
}

#area1_w500_b{
	clear: both; float: left;
	padding: 0; margin: 0; width: 100%;
}
@media screen and (min-width: 1280px){										/* PC用		ビューエリアが360px以上の場合 */
	#area1_w500_b{
		width: 500px;
	}
}



/* 暗号化メモの作成 タイトル */
#area1_title{
	clear: both; float: left;
	padding: 0; margin-top: 50px; width: 100%;
	text-align: center; color: #fff; font-size: 113%;
}
/* 暗号化メモの作成 フォームBOX */
#form_box{
	clear: both; float: left;
	padding: 0; margin-top: 5px; width: 100%;
	border: 1px #777 dashed; border-radius: 4px;
	background-color: #333;
}



/* 暗号化メモのタイトル BOX */
#a_b{
	clear: both; float: left;
	padding: 10px 5px; margin: 0; width: 100%;
}
#a_0{
	clear: both; float: left;
	padding: 0; margin: 0; width: 200px;
	text-align: left; color: #fff; font-size: 113%;
}
#a_1{
	clear: both; float: left;
	padding: 1px; margin: 2px 0 4px 0; width: 100%; height: 40px;
}
@media screen and (min-width: 1280px){										/* PC用		ビューエリアが1280px以上の場合 */
	#a_1{
		height: 5vh;
	}
}
/* 暗号化メモのタイトル 入力フォーム */
#a_1_input{
	padding: 0 5px; margin: 0; width: 100%; height: 100%;
	background-color: #fff;
	text-align: left; color: #000; font-size: 100%;
	border: 1px #000 solid; border-radius: 4px;
	box-sizing: border-box;
}
#a_2{
	clear: both; float: left;
	padding: 0; margin: 0; width: 100%;
	text-align: left; color: #fff; font-size: 82%; line-height: 20px;
}
/* 暗号化メモのタイトル 入力フォームのエラー表示 */
#a_e{
	clear: both; float: left;
	padding: 0; margin: 5px 0 0 0; width: 100%;
	text-align: left; color: #f00; font-size: 100%; line-height: 20px;
}


/* 暗号化メモのタイトル BOX */
#b_b{
	clear: both; float: left;
	padding: 10px 5px; margin: 40px 0 0 0; width: 100%;
}
#b_0{
	clear: both; float: left;
	padding: 0; margin: 0; width: 200px;
	text-align: left; color: #fff; font-size: 113%;
}
#b_1{
	clear: both; float: left;
	padding: 1px; margin: 2px 0 4px 0; width: 100%; height: 40px;
}
@media screen and (min-width: 1280px){										/* PC用		ビューエリアが360px以上の場合 */
	#b_1{
		height: 5vh;
	}
}
/* 暗号化メモのタイトル 入力フォーム */
#b_1_input{
	padding: 0 5px; margin: 0; width: 100%; height: 100%;
	background-color: #fff;
	text-align: left; color: #000; font-size: 100%;
	border: 1px #000 solid; border-radius: 4px;
	box-sizing: border-box;
}
#b_2{
	clear: both; float: left;
	padding: 0; margin: 0; width: 100%;
	text-align: left; color: #fff; font-size: 82%; line-height: 20px;
}
/* 暗号化メモのタイトル 入力フォームのエラー表示 */
#b_e{
	clear: both; float: left;
	padding: 0; margin: 5px 0 0 0; width: 100%;
	text-align: left; color: #f00; font-size: 100%; line-height: 20px;
}


/* 利用規約 */
#c_b{
	clear: both; float: left;
	padding: 5px 5px 20px 5px; margin: 0; width: 100%;
}
#c_kiyaku{
	clear: both; float: left;
	padding: 0; margin: 50px 0 12px 0;
	text-align: left; color: #f90; font-size: 100%; line-height: 20px;
	cursor: pointer;
}
#c_0{
	display: none;
	clear: both; float: left;
	padding: 0; margin: 0; width: 100%;
	text-align: left; color: #fff; font-size: 100%; line-height: 20px;
}
#c_1{
	display: none;
	clear: both; float: left;
	padding: 0; margin: 0;
}
#sakusei_button{
	clear: both; float: left;
	padding: 0; margin: 0; width: 290px; height: 45px;
	background-color: #ccc;
	border: 1px #000 solid; border-radius: 4px;
	text-align: center; color: #000; font-size: 94%; line-height: 45px;
	cursor: pointer;
}
#c_2{
	clear: both; float: left;
	padding: 0; margin: 0; width: 290px; height: 45px;
	background-color: #ccc;
	border: 1px #000 solid; border-radius: 4px;
	text-align: center; color: #000; font-size: 94%; line-height: 45px;
	opacity:0.3;
}




/* 暗号化メモページのURL表示BOX	※作成後に表示 */
#area1_sakusei_ok_b{
	display: none;/**/
	clear: both; float: left;
	padding: 0; margin: 0; width: 100%;
}
@media screen and (min-width: 1280px){										/* PC用		ビューエリアが360px以上の場合 */
	#area1_sakusei_ok_b{
		width: 840px;
	}
}

/* 暗号化メモの作成 タイトル */
#area1_sakusei_ok_title{
	clear: both; float: left;
	padding: 0; margin-top: 50px; width: 100%;
	text-align: center; color: #fff; font-size: 113%;
}
/* 暗号化メモのURLを表示するBOX */
#area1_sakusei_ok_url{
	clear: both; float: left;
	padding: 0; margin: 0; width: 100%;
}
#area1_sakusei_ok_url_form{
	padding: 5px; margin: 0; width: 100%;
	background-color: #fff;
	box-sizing: border-box;
	border: 1px #777 solid; border-radius: 4px;
	text-align: left; color: #000; font-size: 100%;
}
/* 暗号化メモのURLのコピーボタン */
#area1_sakusei_ok_url_copy{
	clear: both; float: right;
	padding: 5px 10px; margin-top: 7px; width: 280px;
	background-color: #ccc;
	border: 1px #777 solid; border-radius: 4px;
	text-align: center; color: #000; font-size: 100%;
	cursor: pointer;
}
#area1_sakusei_ok_url_copy:hover{ background-color: #eee; }
/* 暗号化メモのURLのリンク */
#area1_sakusei_ok_link{
	clear: both; float: left;
	padding: 5px; margin: 40px 0 0px 0; width: 100%;
	background-color: #333;
	border: 1px #777 dashed; border-radius: 4px;
}
#area1_sakusei_ok_link p{
	padding: 0; margin: 0px 0; width: 100%;
	text-align: left; color: #fff; font-size: 100%;
}
#url_id_ink_b{
	clear: both; float: left;
	width: 100%;
}
/*  暗号化メモのURLのリンクタグ */
#url_id_ink_b a{
	padding: 0; margin: 5px 0; width: 100%;
	text-align: left; color: #f90; font-size: 100%;
}

/* 暗号化メモのURLの説明BOX */
#area1_sakusei_ok_setumei{
	clear: both; float: left;
	padding: 0 5px; margin-top: 50px; width: 100%;
	background-color: #333;
	border: 1px #777 dashed; border-radius: 4px;
}
#area1_sakusei_ok_setumei p{
	padding: 0; margin: 15px 0; width: 100%;
	text-align: left; color: #fff; font-size: 100%; line-height: 24px; letter-spacing: 0px; text-indent: 0px;
}
/* QRコード作成BOX */
#area1_sakusei_ok_qrcode_b{
	clear: both; float: left;
	padding: 0; margin-top: 50px; width: 100%;
	display: flex; justify-content: center;				/* 子要素	幅や高さ不明	水平方向 */
}
#area1_sakusei_ok_qrcode_button{
	clear: both; float: left;
	padding: 5px 10px; margin: 0; width: 290px;
	background-color: #ccc;
	border: 1px #777 solid; border-radius: 4px;
	text-align: center; color: #000; font-size: 100%;
	cursor: pointer;
}
#area1_sakusei_ok_qrcode_button:hover{ background-color: #eee; }
/* QRコード表示BOX */
#area1_sakusei_ok_qrcode_img_b{
	clear: both; float: left;
	padding: 0; margin-top: 50px; width: 100%;
	display: flex; justify-content: center;				/* 子要素	幅や高さ不明	水平方向 */
}
#area1_sakusei_ok_qrcode_img{
	display: none;
	clear: both; float: left;
	padding: 15px; margin: 0; width: 290px; height: 290px;
	background-color: #fff;
	border: 1px #fff dashed; border-radius: 4px;
	text-align: center; color: #fff; font-size: 100%;
}


#area1_er_b{
	display: none;
	clear: both; float: left;
	padding: 0; margin: 0; width: 100%;
}
@media screen and (min-width: 1280px){										/* PC用		ビューエリアが360px以上の場合 */
	#area1_er_b{
		width: 840px;
	}
}
/* 暗号化メモの作成 タイトル */
#area1_er_title{
	clear: both; float: left;
	padding: 0; margin-top: 50px; width: 100%;
	text-align: center; color: #fff; font-size: 113%;
}
/* 暗号化メモのURLを表示するBOX */
#area1_er_naiyou_b{
	clear: both; float: left;
	padding: 0; margin-top: 5px; width: 100%;
	border: 1px #777 dashed; border-radius: 4px;
	background-color: #333;
}
/* エラーメッセージ */
#area1_er_naiyou_b p{
	padding: 5px; margin: 15px 0; width: 100%;
	text-align: left; color: #fff; font-size: 100%; line-height: 24px; letter-spacing: 0px; text-indent: 0px;
}
/* TOPに戻る */
#area1_er_link{
	clear: both; float: left;
	padding: 10px 0; margin-top: 30px; width: 100%;
	display: flex; justify-content: center;
}
#area1_er_link a{
	padding: 10px 20px;
	border: 1px #777 solid; border-radius: 4px;
	background-color: #333;
	text-align: left; font-size: 100%;
	text-decoration: none;
}
#area1_er_link a:hover{ background-color: #555; 



.demo{
	/* 親BOXに指定	※子BOXの水平方向の中央寄せ	テキストや画像の中央寄せ用 */
	text-align: center;

	/* 親BOXに指定	※子BOXの水平方向の中央寄せ	※body等に記述 */
	min-width: 1240px; max-width: 1920px;	/* width 指定必須 maxやminでもok */
	margin: 0 auto;

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

	/* 親BOXに指定	※子BOXの垂直と水平方向の中央寄せ */
	display: flex; align-items: center; justify-content: center;	/* 垂直・水平方向の中央寄せ */

	/* 均等割付 */
	text-align-last: justify;			/* Chrome・Firefox */
	text-justify: inter-ideograph;	/* IE・Edge */
}




/* ★背景画像 */
/*	background					/* 背景に関する指定をまとめて行う */
/*	background-attachment	/* 背景画像の固定・移動を指定する */
/*	background-color			/* 背景色を指定する */
/*	background-image			/* 背景画像を指定する */
/*	background-position		/* 背景画像の表示開始位置を指定する */
/*	background-position-x	/* 背景画像の横位置を指定する（IE独自の仕様） */
/*	background-position-y	/* 背景画像の縦位置を指定する（IE独自の仕様） */
/*	background-repeat			/* 背景画像のリピートの仕方を指定する */

	/* 記述例 */
/*	background: url(./test.png) no-repeat;	/* 繰り返さない */
/*	background: url(./test.png) repeat-x;	/* 横方向に繰り返す */
/*	background: url(./test.png) repeat-y;	/* 縦方向に繰り返す */
/*	background: url(./test.png) repeat;		/* 縦と横で繰り返す */