/*----------------------------------------------------
** WEB COMBO / form.css
** Ver.1.0.0
** copyright 2020 GRANTEST Inc.
**----------------------------------------------------
** WEB FONTS
** font-family:'Number';
**----------------------------------------------------
** Common settings
**----------------------------------------------------*/
form, input{
	margin:0;
	padding:0;
}
form{
	line-height:1;
}
select, input, button, textarea{
	box-sizing:border-box;
	font-size:16px; 
}
::placeholder{
	color:rgba(51,153,255,0.5);
}
input[type='date'],
input[type='time'],
input[type="button"],
input[type="submit"],
input[type="text"],
input[type="password"],
input[type="number"],
input[type="email"],
input[type="reset"],
select, button, textarea{
	-webkit-appearance:none;
	appearance:none;
	border-radius:0;
	border:none;
	box-shadow:none;
	box-sizing:border-box;
}
input[type='date']:focus,
input[type='time']:focus,
input[type="button"]:focus,
input[type="submit"]:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="reset"]:focus,
select:focus,
button:focus,
textarea:focus{
	outline:none;
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button{
  -webkit-appearance: none;
  margin:0;
}
input[type="number"]{
  -moz-appearance:textfield;
}
input[type="date"],
input[type="time"],
input[type="text"],
input[type="password"],
input[type="number"],
input[type="email"]{
	width:100%;
	text-indent:0.7em;
}
textarea{
	border:none;
	margin:0;
	padding:10px 0.7em;
	resize:vertical;
	width:100%;
}
div.textareawrap{
	position:relative;
	font-size:16px;
	line-height:1.8em;
}
div.textareawrap > .textarea_dummy{
  overflow:hidden;
  visibility:hidden;
  box-sizing:border-box;
  min-height:3em;
  white-space:pre-wrap;
  word-wrap:break-word;
  overflow-wrap:break-word;
	line-height:inherit;
}
div.textareawrap > textarea{
	position:absolute;
	top:0;
	left:0;
	display:block;
	overflow:hidden;
	box-sizing:border-box;
	padding:5px 15px;
	width:100%;
	height:100%;
	background-color:transparent;
	color:inherit;
	font:inherit;
	letter-spacing:inherit;
	resize:none;
	line-height:inherit;
}
div.selectwrap{
	display:inline-block;
	background-color:#FFF;
	position:relative;
	z-index:1;
}
div.selectwrap::after{
	content:'';
	position:absolute;
	width:0;
	height:0;
	border:solid 6px transparent;
	border-top:solid 9px rgba(204,204,204,0.5);
	top:50%;
	right:0;
	transform:translate(-25%,-25%);
	z-index:-1;
}
select{
	display:inline-block;
	vertical-align:middle;
	text-indent:0;
	background-color:transparent;
	max-width:100%;
}
input[type="submit"],
input[type="button"],
button{
	font-size:16px;
	font-weight:400;
	width:100%;
	transition:all 0.3s ease;
	box-sizing:border-box;
	cursor:pointer;
}
[type="radio"]:checked,
[type="radio"]:not(:checked){
	position:absolute;
	display:none;
}
[type="radio"]:checked + label,
[type="radio"]:not(:checked) + label{
	position:relative;
	z-index:1;

	padding:0 0 0 35px;
	cursor:pointer;
	display:inline-block;
	height:30px;
}
[type="radio"]:checked + label:before,
[type="radio"]:not(:checked) + label:before{
	content:'';
	position:absolute;
	left:0;
	top:0;
	width:24px;
	height:24px;
	border:solid 3px rgba(204,204,204,0.5);
	border-radius:100%;
	background:#FFF;
}
[type="radio"]:checked + label:after,
[type="radio"]:not(:checked) + label:after{
	content:'';
	width:20px;
	height:20px;
	background:#39D;
	position:absolute;
	top:5px;
	left:5px;
	border-radius:100%;
	transition:all 0.2s ease;
}
[type="radio"]:not(:checked) + label:after{
	opacity:0;
	transform:scale(0);
}
[type="radio"]:checked + label:after{
	opacity:1.0;
	transform:scale(1);
}
[type="radio"] + label p{
	line-height:30px;
}
[type="checkbox"]:checked,
[type="checkbox"]:not(:checked){
	position:absolute;
	display:none;
}
[type="checkbox"]:checked + label,
[type="checkbox"]:not(:checked) + label{
	position:relative;
	padding:0 0 0 35px;
	cursor:pointer;
	display:inline-block;
	height:30px;
	z-index:1;
}
[type="checkbox"]:checked + label:before,
[type="checkbox"]:not(:checked) + label:before{
	content:'';
	position:absolute;
	left:0;
	top:0;
	width:24px;
	height:24px;
	border:solid 3px rgba(204,204,204,0.5);
	background:#FFF;
}
[type="checkbox"]:disabled + label:before{
	background:#DDD;
}
[type="checkbox"]:checked + label::after,
[type="checkbox"]:not(:checked) + label::after{
	content:"";
	width:15px;
  height:8px;
  border-left:3px solid #39D;
  border-bottom:3px solid #39D;
	position:absolute;
	top:7px;
	left:6px;
	transition:all 0.2s ease;
}
[type="checkbox"]:disabled + label::after{
  border-left:3px solid #dbdbdb;
  border-bottom:3px solid #dbdbdb;
}
[type="checkbox"]:not(:checked) + label::after{
	opacity:0;
	transform:scale(0) rotate(-45deg);
}
[type="checkbox"]:checked + label::after{
	opacity:1;
	transform:scale(1) rotate(-45deg);
}
[type="checkbox"] + label{
	line-height:30px;
}