@charset "utf-8";
/* ----- ヘッダー */





#wrapper{
	display: none;				/* 非表示 */
	float: left;
	box-sizing: border-box;
	padding: 0px; margin: 0px; width: 100%; height: 100%;
	background-color: #000;
}




/* ドラッグ＆ドロップ、クリックタップのBOX */
#drop_box{
	clear: both; float: right;
	padding: 65px 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: 40px;
	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);/**/
}
/* 使い方説明 */
#drop_box_memo{
	position: relative; top: 0px; left: 0px;
	clear: both; float: left;
	padding: 2px 2px; margin: 0; width: 100%;
	background-color: #222;
	border-bottom: 1px #fff solid;
	text-align: left; color: #ccc; font-size: 100%; line-height: 35px; letter-spacing: 0px; text-indent: 0px;

	animation: drop_box_memo_a1 750ms ease 0s 1 normal;			
	animation-fill-mode: forwards;		/* 「animation」より下の行に記述すること。 */
}
@keyframes drop_box_memo_a1 {
	0% { opacity:0; }			/* 0%は　from { }　と一緒 */
	100% { opacity:0.85; }	/* 100%は　to { }　と一緒 */
}
/* 3、暗号化処理を実行しますか。「キャンセル」「開始する」*/
#img_box_area_memo{
	display: none;				/* 非表示 */
	clear: both; float: left;
	padding: 10px 0px 20px 0px; width: 100%;
	border-bottom: 1px #fff solid;
}
#img_box_area_memo p{
	padding: 0px 5px 15px 5px;
	text-align: left; font-size: 100%;
}
#img_box_area_memo_y, #img_box_area_memo_n{
	float: left;
	width: 47%; height: 32px;
	background-color: #555;
	border: 1px #777 solid; border-radius: 4px;
	text-align: center; color: #fff; font-size: 100%; line-height: 32px; letter-spacing: 0px; text-indent: 0px;
	cursor: pointer;
}
#img_box_area_memo_n{ clear: both; margin: 0px 1% 0px 2%; }
#img_box_area_memo_y{ margin: 0px 2% 0px 1%; }
#img_box_area_memo_y:hover, #img_box_area_memo_n:hover{ background-color: #333; color: #f90; }

/* サムネイル用 */
#img_box_area{}
#img_box{
	display: flex;					/* flexbox */
	flex-wrap: wrap;				/* 折返し指定 */
/*	border-top: 1px #fff solid;/**/
	border-left: 1px #fff solid;
}
.img_box_div_id_class{
	width: calc(100% / 3);
	background: #333;
	border-right: 1px #fff solid;
	border-bottom: 1px #fff solid;
	text-align: center; color: #fff; font-size: 75%; line-height: 26px; letter-spacing: 0px; text-indent: 0px;
	overflow: hidden;			/* はみ出した部分は非表示 */
	cursor: pointer;

	display: flex;/**/
	justify-content: center;	/* 水平方向の中央寄せ */
	align-items: center;			/* 縦方向の中央寄せ */

	/* 画像ピッタリ 枠内に縦横のセンタリング */
/*	background-image: url('./img/001.jpg');/**/
	background-size: cover;						/* 背景全部埋め優先・比率崩れなし */
	background-repeat: no-repeat;				/* 背景画像を一回だけ表示して繰り返しません。 */
	background-position: center center;		/* センタリング */

	Overflow: hidden;
}
/* ビューエリアが指定のpx以上 */
@media screen and (min-width: 768px){ .img_box_div_id_class{ width: calc(100% / 3); } }
@media screen and (min-width: 1024px){ .img_box_div_id_class{ width: calc(100% / 4); font-size: 88%; } }
@media screen and (min-width: 1280px){ .img_box_div_id_class{ width: calc(100% / 6); font-size: 88%;} }
@media screen and (min-width: 1366px){ .img_box_div_id_class{ width: calc(100% / 7); font-size: 88%;} }
@media screen and (min-width: 1536px){ .img_box_div_id_class{ width: calc(100% / 8); font-size: 88%;} }
@media screen and (min-width: 1920px){ .img_box_div_id_class{ width: calc(100% / 10); font-size: 100%; } }
@media screen and (min-width: 2048px){ .img_box_div_id_class{ width: calc(100% / 11); font-size: 100%; } }
@media screen and (min-width: 2560px){ .img_box_div_id_class{ width: calc(100% / 13); font-size: 100%; } }
@media screen and (min-width: 3200px){ .img_box_div_id_class{ width: calc(100% / 16); font-size: 113%; } }
@media screen and (min-width: 3840px){ .img_box_div_id_class{ width: calc(100% / 20); font-size: 138%; } }
@media screen and (min-width: 7680px){ .img_box_div_id_class{ width: calc(100% / 40); font-size: 150%; } }
/* 正方形化 */
.img_box_div_id_class::before{	/* 高さを指定していないBOXをjavascriptを使わずに横幅をcssだけで取得して正方形にする方法 	※「width: calc(100% / 6);」など使うときに便利*/
	content: "";
	display: block;
	padding-top: 100%; 
}





/* 4、暗号化キーを設定して下さい。 */
#angoukey_nyuuryoku_box{
	display: none;				/* 非表示 */	
	clear: both; float: left;
}
/* 背景透過の黒画面 */
#kuro{
	clear: both; float: left;
	position: fixed; top: 0px; left: 0px;
	padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px; width: 100%; height: 100%;
	background-color: #000;
	opacity:0.87;
}
#angouka_input_box{
	clear: both; float: left;
	padding: 5px 5px 8px 5px; width: 90%;
	background-color: #333;
	border: 2px #fff solid; border-radius: 4px;
	text-align: left;
	opacity:1;

	/* 幅や高さ不明の時のセンタリング */
	position: fixed; top: 50%; left: 50%;
	margin-right: -50%;
	-webkit-transform: translate(-50%, -50%); /* Safari用 */
	transform: translate(-50%, -50%);
}
#angouka_input_box_p{
	float: left;
	text-align: left; color: #fff; font-size: 100%; line-height: 26px; letter-spacing: 0px; text-indent: 0px;
	cursor: pointer;
}
#angouka_input_box_p:hover{ color: #0cf; }
#angouka_input_box2{
	position: relative; bottom: 0px; right: 0px;
	clear: both; float: left;
	width: 100%;
	text-align: left;
}
/* aesキーの入力BOX */
#angouka_input_box2_input{
	float: left;
	margin: 0px 10px 0px 0px; width: 50%;
	text-align: left;
}
#angouka_input_box2_input input{
	padding: 2px;
	width: 100%; height: 34px;
	background-color: #fff;
	border: 1px #04a solid;
	text-align: left; color: #000; font-size: 100%; line-height: 24px; letter-spacing: 0px; text-indent: 0px;
}
/* 見えるボタン */
#angouka_input_box2_mieru{
	float: left;
	margin: 0px 12px 0px 0px; width: 34px; height: 34px;
	border: 1px #fff dashed; border-radius: 34px;
	text-align: left; color: #fff; font-size: 100%;
	cursor: pointer;

	display: flex;/**/
	justify-content: center;	/* 水平方向の中央寄せ */
	align-items: center;			/* 縦方向の中央寄せ */
}
#angouka_input_box2_mieru:hover{ background-color: #555; }
/* 暗号化キーBOXを閉じる×ボタン */
#angouka_input_box2_close{
	position: absolute; bottom: -6px; right: -3px;
	clear: both; float: left;
	padding: 0px; margin: 0px; width: 30px; height: 30px;
	background-color: #f00;
	border: 1px #777 solid; border-radius: 30px;
	text-align: center; color: #fff; font-size: 100%; line-height: 30px; letter-spacing: 0px; text-indent: 0px;
	cursor: pointer;
}



/* 閉じるのボタン */
.angouka_input_box2_button_off, .angouka_input_box2_button_on{
	clear: both; float: left;
	padding: 2px 7px; margin: 7px 0px 0px 0px; height: 34px;
	background-color: #ccc;
	border: 1px #777 solid; border-radius: 4px;
	text-align: left; color: #000; font-size: 100%; letter-spacing: 0px; text-indent: 0px;

	display: flex;/**/
	justify-content: center;	/* 水平方向の中央寄せ */
	align-items: center;			/* 縦方向の中央寄せ */
}
.angouka_input_box2_button_off{ opacity:0.2; }
.angouka_input_box2_button_on:hover{ opacity:1.0; cursor: pointer; background-color: #aaa; }

/* 背景透過の黒画面 */
#angouka_input_box2_setsumei_kuro{
	display: none;
	clear: both; float: left;
	position: fixed; top: 0px; left: 0px;
	padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px; width: 100%; height: 100%;
	background-color: #000;
	opacity:0.85;
}
/* 説明BOX 	「4、暗号化キーを設定して下さい。(12-256文字)」　クリックしたら表示されるBOX javascriptで生成 */
#angouka_input_box2_setsumei{
	display: none;
	clear: both; float: left;
	padding: 5px; margin: 0px 0px 0px 0px;
	background-color: #000;
	border: 2px #777 solid; border-radius: 4px;
	opacity:0.91;

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



/* 暗号化スタート	背景透過の黒画面*/
#angouka_start_box{
	display: none;/**/
	clear: both; float: left;
}
/* 暗号化スタート	背景透過の黒画面 クリックできないようにする */
#angouka_start_box_kuro{
	clear: both; float: left;
	position: fixed; top: 0px; left: 0px;
	padding: 0px; margin: 0px; width: 100%; height: 100%;
	background-color: #000;
	opacity:0.75;
}
/* プログレスバーBOXの背景黒 */
#angouka_start_box_progressbar_box{
	clear: both; float: left;
	padding: 0px; margin: 0px; width: 90%; height: 40px;
	background-color: #000;
	border: 2px #fff solid;

	/* 幅や高さ不明の時のセンタリング */
	position: fixed; top: 50%; left: 50%;
	margin-right: -50%;
	-webkit-transform: translate(-50%, -50%); /* Safari用 */
	transform: translate(-50%, -50%);
}
/* プログレスバーの%を示す水色のバー背景色の部分*/
#angouka_start_box_progressbar_box1{
	position: absolute; top: 0px; left: 0px;
	clear: both; float: left;
	padding: 0px; margin: 0px; width: 0%; height: 100%;
	background-color: #09f;/**/
}
/* プログレスバーの●●％のテキスト部分 */
#progressbar_data{
	position: absolute; top: 0px; left: 0px;
	clear: both; float: left;
	padding: 0px; margin: 0px; width: 100%; height: 100%;
	text-align: left; color: #fff; font-size: 100%; line-height: 0px; letter-spacing: 0px; text-indent: 0px;

	display: flex;/**/
	justify-content: center;	/* 水平方向の中央寄せ */
	align-items: center;			/* 縦方向の中央寄せ */
}
/* 「キャンセルして最初に戻る」のボタン */
#progressbar_end_button{
	position: relative; top: 60px; left: 0px;
	clear: both; float: left;
	padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px; width: 100%; height: 40px;
	background-color: #dedede;
	border: 2px #bbb solid; border-radius: 4px;
	text-align: center; color: #000; font-size: 100%; line-height: 40px; letter-spacing: 0px; text-indent: 0px;
	cursor: pointer;

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












/* 全画面黒、テキストBOX表示モード */
#kekka_hyouji{
	display: none;			/* メッセージ等を表示するときはjsで管理 */
	clear: both; float: left;
}
#kekka_hyouji_kuro{
	position: fixed; top: 0px; left: 0px;
	clear: both; float: left;
	padding: 0px; margin: 0px; width: 100%; height: 100%;	/* 画面全体を黒塗り かつ固定 */
	background-color: #333;
	opacity:0.9;
}
#kekka_hyouji_box{
	clear: both; float: left;
	padding: 5px 7px; margin: 0;
	min-width: 15%; max-width: 90%;		/* 最小サイズ */
	min-height: 1%; max-height: 50%;	/* 最大サイズ */
	background-color: #000;
	border: 2px #aaa solid; border-radius: 4px;
	opacity:0.0;
	overflow: auto;							/* カーソル表示 */
	cursor: pointer;

	animation: kekka_hyouji_box_a 750ms ease 0s 1 normal;
	animation-fill-mode: forwards;		/* 「animation」より下の行に記述すること。 */

	/* 幅や高さ不明の時のセンタリング */
	position: fixed; top: 50%; left: 50%;
	margin-right: -50%;
	-webkit-transform: translate(-50%, -50%); /* Safari用 */
	transform: translate(-50%, -50%);
}
@keyframes kekka_hyouji_box_a {		/* js で更新 */
	0% { opacity:0.0; min-width: 0%; min-height: 0%; }					/* 0%は　from { }　と一緒 */
	100% { opacity:1.0; }				/* 100%は　to { }　と一緒 */
}
#kekka_hyouji_box_text{
	clear: both; float: left;
	text-align: left; color: #fff; font-size: 100%; line-height: 28px; letter-spacing: 0px; text-indent: 0px;
}









/* QRコード表示 */
#qr{
	display: none;			/* 非表示 */
	clear: both; float: left;
	width: 100%;
}
/* QRコード BOX */
#qrcode_box{
	clear: both; float: left;
	padding: 0; margin: 40px 0 0 0; width: 100%;

	display: flex;/**/
	justify-content: center;	/* 水平方向の中央寄せ */
}
/* QRコード 外枠 */
#qrcode_soto{
	clear: both; float: left;
	padding: 5px; width: 250px; height: 250px;
	background-color: #fff;
}
/* QRコードを表示するのボタン */
#qrcode_hyouji{
	clear: both; float: left;
	margin: 0; width: 100%; height: 40px;
	background-color: #eee;
	border: 1px #777 solid; border-radius: 4px;
	text-align: center; color: #000; font-size: 100%; line-height: 40px; letter-spacing: 0px; text-indent: 0px;
	cursor: pointer;
}
#qrcode_hyouji:hover{ background-color: #aaa; }
/* QRコード */
#qrcode{
	clear: both; float: left;
	width: 240px; height: 240px;
}
/* QRコード URLを表示するBOX */
#qrcode_url_box{
	clear: both; float: left;
	padding: 0; margin: 20px 0 0 0; width: 100%;
}
/* QRコード 説明文 */
#qrcode_url_box_text{
	clear: both;
	padding: 0 10px; width: 100%;
	text-align: center; color: #fff; font-size: 100%; line-height: 20px; letter-spacing: 0px; text-indent: 0px;
}
/* QRコード URL BOX */
#qrcode_url_box_copy{
	clear: both; float: left;
	padding: 0; margin: 20px 0px 0px 0px; width: 100%;
}
/* QRコード URL */
#qrcode_url{
	clear: both;
	width: 70%; height: 78px;
	border: 1px #777 solid; border-radius: 4px;
	text-align: left; color: #000; font-size: 100%; line-height: 20px; letter-spacing: 0px; text-indent: 0px;

	cursor: pointer; 
}
/* TOP ページに戻る ボタン */
#qrcode_modoru_box{
	clear: both;
	width: 100%;

	display: flex;/**/
	justify-content: center;	/* 水平方向の中央寄せ */
}
#qrcode_modoru{
	clear: both; float: left;
	margin: 40px 0px 0px 0px; width: 250px; height: 40px;
	background-color: #eee;
	border: 1px #777 solid; border-radius: 4px;
	text-align: center; color: #000; font-size: 100%; line-height: 40px; letter-spacing: 0px; text-indent: 0px;
	cursor: pointer;
}
#qrcode_modoru:hover{ background-color: #aaa; }


















#test_box{
	display: none;
	position: relative; bottom: 0px; left: 0px;
	clear: both; float: left;
	margin-top: 100px; width: 100%;
}
#test_box div{
	position: relative; top: 0px; left: 0px;
	float: left;
	padding: 0; margin: 0px 0px 0px 0px; width: 25%; height: 380px;
	background-color: #222;
	text-align: left; color: #fff; font-size: 88%; line-height: 20px; letter-spacing: 0px; text-indent: 0px;

	display: flex;/**/
	justify-content: center;	/* 水平方向の中央寄せ */
	align-items: center;			/* 縦方向の中央寄せ */
}
#test_box div textarea{ 
	width: 100%; height: 100%;
	text-align: left; color: #000; font-size: 88%; line-height: 17px; letter-spacing: 0.2px; text-indent: 0.2px;
}

#test_99{
	clear: both; float: left;
	position: relative; bottom: 0px; left: 0px;
	padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px; width: 320px; height: 240px;
	background-color: #fbc;
	border: 1px #777 solid;
	text-align: center; color: #000; font-size: 100%; line-height: 20px; letter-spacing: 0px; text-indent: 0px;
}
#test_99_img{
/*	object-fit: fill;					/* デフォ。縦横比を無視して画像をコンテナーにフィットさせます。縦横比無視なので画像は歪む場合があります。 */
	object-fit: contain;				/* 切り抜かれずに、リサイズされておさまる */
/*	object-fit: cover;				/* 縦横比を保ち、はみ出る部分はトリミング */
/*	object-fit: none;					/* リサイズせず元の画像の大きさで表示 */
/*	object-fit: scale-down;			/* コンテナーより画像が大きい場合は「contain」を、小さい場合は「none」を指定します。 */
/*	object-fit: object-position;	/* 画像の位置指定。指定方法→「object-position:’横の位置’ ‘縦の位置’;」で、位置の指定は「％」「px」「top」「center」が可能。初期値は「object-position:50% 50%」で縦横中央に配置される。 */

	max-width: 100%;
	max-height: 100%;/**/
/*	height: 900px;
/*	height: auto;/**/
	vertical-align: bottom;		/* 画像下の隙間埋め */

	cursor: pointer;
}