/*desktop*/
@media only screen and (min-aspect-ratio: 13/9)
{
}
/*mobile*/
@media only screen and (max-aspect-ratio: 13/9)
{
}
/*general*/

/*UI block*/
#UI_block{
	width:100%;
	height:100%;
	position:absolute;
	top:0;
	left:0;
	background-color:rgba(128,128,128,0.5);
	-webkit-animation: fadein 0.2s; /* Safari, Chrome and Opera > 12.1 */
	-moz-animation: fadein 0.2s; /* Firefox < 16 */
	-ms-animation: fadein 0.2s; /* Internet Explorer */
	 -o-animation: fadein 0.2s; /* Opera < 12.1 */
	animation: fadein 0.2s;
}
@keyframes fadein {
	from{ opacity: 0; }
	to{ opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
	from{ opacity: 0; }
	to{ opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
	from{ opacity: 0; }
	to{ opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
	from{ opacity: 0; }
	to{ opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
	from{ opacity: 0; }
	to{ opacity: 1; }
}
#UI_block img{
	max-width:30%;
	max-height:100%;
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
	margin:auto;
}

/* InputBox */
#inputBoxCover{
	width:100%;
	height:100%;
	position:fixed;
	top:0;
	left:0;
	background-color:rgba(128,128,128,0.5);
	z-index:999;
}
#inputBoxInner{
	outline:none;
	background-color:#FFF59D;
	border-radius:15px;
	border:8px ridge;
	position:relative;
}
#inputBoxInner.XXL{
	width:90%;
	height:86%;
	left:5%;
	top:7%;
}
#inputBoxInner.XL{
	width:80%;
	height:78%;
	left:10%;
	top:11%;
}
#inputBoxInner.L{
	width:74%;
	height:72%;
	left:13%;
	top:14%;
}
#inputBoxInner.M{
	width:70%;
	height:70%;
	left:15%;
	top:15%;
}
#inputBoxInner.S{
	width:60%;
	height:68%;
	left:20%;
	top:16%;
}
#inputBoxInner.XS{
	width:50%;
	height:60%;
	left:25%;
	top:20%;
}
#inputBoxInner.XXS{
	width:40%;
	height:52%;
	left:30%;
	top:24%;
}
#inputBoxInner.XXXS{
	width:20%;
	height:44%;
	left:40%;
	top:28%;
}
#infoBoxTitle{
	text-align:center;
	font-size:2em;
	font-weight:bold;
	margin:0.8em 0 0.8em 0;
}
#inputBoxInnerDiv{
	position:static;
	top:0; bottom:0; left:0; right:0;
	margin:auto;
	width:90%;
	height:100%;
	overflow:auto;
	padding-bottom:20px;
}
#inputBoxInnerDiv label{
	display:inline-block;
	text-align:right;
	font-weight:bold;
	padding-right:0.5em;
	margin-bottom:0.2em;
}
#inputBoxInnerDiv .inputBoxInputs{
	padding-left:0.5em;
	margin-bottom:0.2em;
	background-color:#EFEBE9;
}
#inputBoxInnerDiv input[type="checkbox"]:not([disabled]){cursor:pointer;}
#inputBoxInnerDiv textarea{
	padding-left:0.5em;
	resize:none;
	border:inset 2px #EBE9ED;
	border-right:solid 1px #CCCCCC;
	border-bottom:solid 1px #CCCCCC;
}
#inputBoxInnerDiv select{
	border:inset 2px #EBE9ED;
	border-right:solid 1px #CCCCCC;
	border-bottom:solid 1px #CCCCCC;
}
#btnGrp{
	margin-top:0.8em;
	text-align:center;
}
#btnGrp input[type=button]{
	border-radius:5px;
	outline:none;
}
#btnGrp input[type=button]:hover{
	filter:brightness(80%);
	font-weight:bold;
	cursor:pointer;
}
div.btnDivEffect input[type=button]:hover{
	filter:brightness(80%);
	font-weight:bold;
	cursor:pointer;
}
#btnGrp input[type=button]:not(:first-child){
	margin-left:1em;
}
#inputBoxInfoArea{
	float:right;
	margin-right:3em;
	font-size:0.8em;
	font-style:italic;
}
