@charset "utf-8";

/*
************************************************************************
* フォームレイアウト
* @copyright Revolme Inc.
************************************************************************
*/

form .input-area
{
}
form .input-area .label
{
	font-size:1.2rem;
}
form .input-area .unit
{
	position:absolute;
	top:50%;
	right:1em;
	transform:translateY(-50%);
}
form .input-area .memo
{
	font-size:1.2rem;
	color:#999999;
}

form .input-area input,
form .input-area textarea,
form .input-area select,
form .input-area checkbox,
form .input-area radio
{
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    
    border-radius:0px;
}
form .input-area select::-ms-expand {
    display: none;
}

form .input-area input:focus,
form .input-area textarea:focus,
form .input-area select:focus,
form .input-area checkbox:focus,
form .input-area radio:focus
{
	outline:none;
}

form .input-area .controll
{
	display:inline-block;
	width:100%;
}
form .input-area .controll.select
{
	width:auto;
}
form .input-area .controll.select select
{
	border:1px solid #999999;
	background-color:transparent;
	padding:0.5em;
	padding-right:2.0em;
}
form .input-area .controll.select::after
{
	content:"";
	display:block;
	position:absolute;
	top:50%;
	right:1.0em;
	
	width:5px;
	height:5px;
	
	border-right:1px solid #0a8228;
	border-bottom:1px solid #0a8228;
	
	-webkit-transform:rotate(45deg) translateY(-100%);
	-moz-transform:rotate(45deg) translateY(-100%);
	transform:rotate(45deg) translateY(-100%);
}

form .input-area .controll input[type="text"],
form .input-area .controll input[type="number"],
form .input-area .controll input[type="password"],
form .input-area .controll textarea
{
	width:100%;
	border:1px solid #CCCCCC;
	padding:0.5em;
}

form .input-area.small .controll input[type="text"],
form .input-area.small .controll input[type="number"],
form .input-area.small .controll input[type="password"],
form .input-area.small .controll textarea
{
	width:100%;
	border:1px solid #CCCCCC;
	padding:0.1em 0.2em;
}

input:placeholder-shown,
textarea:placeholder-shown{color:#888888;}

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder{color:#888888;}

input:-moz-placeholder,
textarea:-moz-placeholder{color:#888888;}

input::-moz-placeholder,
textarea::-moz-placeholder{color:#888888;}

input:-ms-input-placeholder,
textarea:-ms-input-placeholder{color:#888888;}

form .input-area .controll.file
{
	padding:0.0em 0.0em;
}
form .input-area .controll.file input[type="file"]
{
	/*
	width:100%;
	border:0px solid transparent;
	background-color:transparent;
	*/
	display:none;
}

form .input-area .controll.file .frmFileSelect
{
	line-height:1;
}
form .input-area .controll.file .frmFileSelect .btnFileSelect
{
	display:inline-block;
	padding:0.5em 1.0em;
	border:1px solid #0a8228;
	border-radius:5px;
}
form .input-area .controll.file .frmFileSelect .lblFileSelect
{
	display:inline-block;
	padding:0.5em 1.0em;
	border-radius:5px;
}

form .input-area .controll.file .btnDelete
{
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    
	display:block;
	
	color:transparent;
	border:0px solid transparent;
	background-color:transparent;
	
	width:1.5em;
	height:1.5em;
	
	cursor:pointer;
}
form .input-area .controll.file .btnDelete::before
{
	content:"";
	display:block;
	position:absolute;
	
	top:50%;
	
	width:1.5em;
	height:2px;
	
	background-color:#999999;
	
	transform:rotate(45deg);
}
form .input-area .controll.file .btnDelete::after
{
	content:"";
	display:block;
	position:absolute;
	
	top:50%;
	
	width:1.5em;
	height:2px;
	
	background-color:#999999;
	
	transform:rotate(-45deg);
}
form .input-area .controll.file .uploaded
{
	line-height:1;
	margin-bottom:0.5em;
}
form .input-area .controll.file .uploaded span
{
	display:inline-block;
	position:absolute;
	top:50%;
	left:2em;
	transform:translateY(-50%);
}

form .input-area .controll label
{
	display:inline-block;
	cursor:pointer;
}
form .input-area .controll label span
{
	display:inline-block;
}

form .input-area .controll.check
{
	padding:0.0em;
}
form .input-area .controll.check label
{
	margin:0.5em;
}
form .input-area .controll.check label input[type="checkbox"]
{
	display:none;
}
form .input-area .controll.check label input[type="checkbox"] + span
{
	padding-left:2em;
}
form .input-area .controll.check label input[type="checkbox"] + span::before
{
	content:"";
	display:inline-block;
	position:absolute;
	top:50%;
	left:0px;
	
	transform:translateY(-50%);
	
	width:1.2em;
	height:1.2em;
	
	border:1px solid;
	
	
}
form .input-area .controll.check label input[type="checkbox"] + span::after
{
	content:none;
}
form .input-area .controll.check label input[type="checkbox"]:checked + span::before
{
}
form .input-area .controll.check label input[type="checkbox"]:checked + span::after
{
	content:"";
	display:inline-block;
	position:absolute;
	top:50%;
	left:0.25em;
	
	transform:translateY(-50%);
	
	width:0.7em;
	height:0.7em;
	
	background-color:#0a8228}
/* == タブレットサイズ ==========================================================*/
@media screen and (max-width: 1400px) {
}
/* == スマートフォンサイズ ==========================================================*/
@media screen and (max-width: 640px) {
	form .input-area
	{
	}
	form .input-area .label
	{
	}
	form .input-area .memo
	{
		font-size:2.0rem;
		color:#999999;
	}

	form .input-area input,
	form .input-area textarea,
	form .input-area select,
	form .input-area checkbox,
	form .input-area radio
	{
		-webkit-appearance:none;
	}
	form .input-area input:focus,
	form .input-area textarea:focus,
	form .input-area select:focus,
	form .input-area checkbox:focus,
	form .input-area radio:focus
	{
		outline:none;
	}

	form .input-area .controll.select
	{
	}
	form .input-area .controll.select select
	{
		width:100%;
		padding:0.5em 2em 0.5em 0.5em;
		border:1px solid #0a8228;
	}
	form .input-area .controll.select::after
	{
		content:"";
		display:block;
		position:absolute;
		top:50%;
		right:1.0em;
		
		width:1.125vw;
		height:1.125vw;
		
		border-right:1px solid #0a8228;
		border-bottom:1px solid #0a8228;
		background-color:transparent;
		
		-webkit-transform:rotate(45deg) translateY(-100%);
		-moz-transform:rotate(45deg) translateY(-100%);
		transform:rotate(45deg) translateY(-100%);
	}

	form .input-area .controll input[type="text"],
	form .input-area .controll input[type="password"],
	form .input-area .controll textarea
	{
		width:100%;
		padding:0.5em;
	}

	form .input-area .controll.file
	{
	}
	form .input-area .controll.file input[type="file"]
	{
		display:none;
	}
	form .input-area .controll.file .frmFileSelect
	{
		line-height:1;
	}
	form .input-area .controll.file .frmFileSelect .btnFileSelect
	{
		display:inline-block;
		padding:0.8em 1.0em;
		border:1px solid #0a8228;
		border-radius:5px;
	}
	form .input-area .controll.file .frmFileSelect .lblFileSelect
	{
		display:inline-block;
		padding:0.8em 1.0em;
		border-radius:5px;
	}
	form .input-area .controll.file .btnDelete
	{
	    -webkit-appearance: none;
	    -moz-appearance: none;
	    appearance: none;
	    
		display:block;
		
		color:transparent;
		border:0px solid transparent;
		background-color:transparent;
		
		width:1.5em;
		height:1.5em;
		
		cursor:pointer;
	}
	form .input-area .controll.file .btnDelete::before
	{
		content:"";
		display:block;
		position:absolute;
		
		top:50%;
		
		width:1.5em;
		height:2px;
		
		background-color:#999999;
		
		transform:rotate(45deg);
	}
	form .input-area .controll.file .btnDelete::after
	{
		content:"";
		display:block;
		position:absolute;
		
		top:50%;
		
		width:1.5em;
		height:2px;
		
		background-color:#999999;
		
		transform:rotate(-45deg);
	}
	form .input-area .controll.file .uploaded
	{
		line-height:1;
		margin-bottom:0.5em;
	}
	form .input-area .controll.file .uploaded span
	{
		display:inline-block;
		position:absolute;
		top:50%;
		left:2em;
		transform:translateY(-50%);
	}

	form .input-area .controll label
	{
		display:inline-block;
		cursor:pointer;
	}
	form .input-area .controll label span
	{
		display:inline-block;
	}

	form .input-area .controll.check label input[type="checkbox"]
	{
		display:none;
	}
	form .input-area .controll.check label input[type="checkbox"] + span
	{
		padding-left:2em;
	}
	form .input-area .controll.check label input[type="checkbox"] + span::before
	{
		content:"";
		display:inline-block;
		position:absolute;
		top:50%;
		left:0px;
		
		transform:translateY(-50%);
		
		width:1.5em;
		height:1.5em;
		
		border:1px solid;
		
		
	}
	form .input-area .controll.check label input[type="checkbox"] + span::after
	{
		content:none;
	}
	form .input-area .controll.check label input[type="checkbox"]:checked + span::before
	{
	}
	form .input-area .controll.check label input[type="checkbox"]:checked + span::after
	{
		content:"";
		display:inline-block;
		position:absolute;
		top:50%;
		left:0.25em;
		
		transform:translateY(-50%);
		
		width:1.0em;
		height:1.0em;
		
		background-color:#000000	}
}