@charset "utf-8";
/* CSS Document */
.form_tbl{
	word-wrap: break-word;
	overflow-wrap: break-word;	
}
.form_tbl{
	width:80%;
	margin:0 auto 30px auto;
}
.form_tbl .base_table{
	width:100%;
}

.form_tbl .base_table td,
.form_tbl .base_table th{
	padding:10px;
	vertical-align: top;
}
.form_tbl .base_table th{
	text-align:right;
}
.form_tbl .base_table th.req:after{
	vertical-align: top;
	display: inline-block;
	content:"必須";
	color:#fff;
	background-color:#cf3140;
	border-radius: 3px;
	font-size:10px;
	text-align:center;
	width:2em;
	padding:1px 7px;
	margin:2px 0 0 20px;
}
.form_tbl div.red{
	position:relative;
	background-color:#fffad2;
	margin-top:10px;
}
.form_tbl div.red em{
	display: inline-block;
	color:#cf3140;
	padding:10px;
	font-weight: bold;
	font-size:86%;
	vertical-align: middle;
}
.form_tbl div.red em:before{
	display: inline-block;
	content:"";
	width:20px;
	height:20px;
	border-radius: 100%;
	background-color:#cf3140;
	margin:0 10px 0 0;
	vertical-align: middle;
}
.form_tbl div.red em:after{
	content:"!";
	color:#fff;
	font-weight: bold;
	position:absolute;
	top:11px;
	left:18px;
	z-index:1;
	vertical-align: middle;}


/* フォーム
----------------------------------------------- */
input, button {
	outline: 0;
}
/* Firefox */
input::-moz-focus-inner, button::-moz-focus-inner {
 border: 0;
}
input[type="submit"]::-webkit-search-decoration,
input[type="button"]::-webkit-search-decoration {
  display: none;
}
input[type="submit"]::focus,
input[type="button"]::focus {
  outline-offset: -2px;
}
button, input[type='text'], input[type='password'], input[type='email'], input[type="date"] {
	border: solid 1px #d9d9d9;
	padding: 10px 10px 10px 10px;
	line-height: 1.3;
	vertical-align: middle;
}
button{
	border:none;
}
button:focus,
button:hover {
	cursor: pointer;
}
/*カスタム ラジオボタン＋チェックボックス*/

input.radio[type=radio], input.checkbox[type=checkbox] {
	display: none;
}
.label-checkbox {
	background-color: #fff;
}
.radio, .checkbox {
	box-sizing: border-box;
	-webkit-transition: background-color 0.1s linear;
	transition: background-color 0.1s linear;
	position: relative;
	display: inline-block;
	margin: 0 20px 8px 0;
	padding: 12px 12px 12px 50px;
	vertical-align: middle;
	cursor: pointer;
}
.tbl td .checkbox{
	margin:0 0 0 0;
	padding:0 0 0 30px;
}
.tbl td .checkbox:before{
	margin-top:-12px;
}
.radio:focus, .checkbox:focus {
	border: none;
	border: 0;
}
.radio {
	border-radius: 100%;
}
.checkbox {
	border-radius: 2px;
}
.radio:hover:after {
	background-color: #fff;
	border-color: #01b7e6;
}
.radio:after, .checkbox:after {
	-webkit-transition: border-color 0.1s linear;
	transition: border-color 0.1s linear;
	position: absolute;
	top: 50%;
	left: 0px;
	display: block;
	margin-top: -15px;
	width: 24px;
	height: 24px;
	border: 1px solid #d9d9d9;
	content: '';
	background-color: #fff;
}
.radio:after {
	border-radius: 100%;
}
.checkbox:after {
	border-radius: 2px;
}
.radio:before {
	-webkit-transition: opacity 0.1s linear;
	transition: opacity 0.1s linear;
	position: absolute;
	top: 40%;
	left: 5px;
	display: block;
	margin-top: -5px;
	width: 16px;
	height: 16px;
	border-radius: 100%;
	background-color: #01b7e6;
	content: '';
	opacity: 0;
	z-index: 99;
}
input[type=radio]:checked + .radio:before {
	opacity: 1;
}
.checkbox:before {
	-webkit-transition: opacity 0.1s linear;
	transition: opacity 0.1s linear;
	position: absolute;
	top: 40%;
	left: 7px;
	display: block;
	margin-top: -8px;
	width: 10px;
	height: 14px;
	border-right: 3px solid #01b7e6;
	border-bottom: 3px solid #01b7e6;
	content: '';
	opacity: 0;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
	z-index: 100;
}
input[type=checkbox]:checked + .checkbox:before {
	opacity: 1;
}
/*　テキストエリア　*/

textarea {
	padding: 7px 10px;
	border: solid 1px #d9d9d9;
	width: 100%;
}
select {
	border: solid 1px #d9d9d9;
	line-height: 32px;
	height: 32px;
}

.error, .caution {
	color: #ed0000;
}




input::-webkit-input-placeholder {
    color: #ddd;
    font-weight: normal;
}
input:-ms-input-placeholder {
    color: #ddd;
    font-weight: normal;
}
input::-moz-placeholder {
    color: #ddd;
    font-weight: normal;
}
