@charset "utf-8";
/* CSS Document */

.table_form{
	width:90%;
	height:auto;
	border:none;
	margin:10px auto;
}
.table_form th{
	text-align:left;
	width: 30%;
	padding:10px;
	white-space:nowrap;
	border-bottom:solid 1px #666666;
	background-color:#F4F4F4;
	color: #333333;
}
.table_form td{
	width: 70%;
	padding:10px;
	border-bottom:solid 1px #666666;
}
.table_form input.textbox{
	border: 1px solid #ccc;
	padding:10px;
	font-size:1.3em;
	font-family:Arial, sans-serif;
	color:#000;
	margin:0 2% 20px;
	width:96%;
	-moz-box-shadow: inset 0 0 4px rgba(0,0,0,0.2);
	-webkit-box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.2);
	box-shadow: inner 0 0 4px rgba(0, 0, 0, 0.2);
}
.table_form textarea{
	border: 1px solid #ccc;
	padding:10px;
	font-size:1.3em;
	font-family:Arial, sans-serif;
	color:#000;
	margin:0 2% 20px;
	width:96%;
	-moz-box-shadow: inset 0 0 4px rgba(0,0,0,0.2);
	-webkit-box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.2);
	box-shadow: inner 0 0 4px rgba(0, 0, 0, 0.2);
}
.table_form select{
	width:50%;
	padding: 10px 0;
	margin:0 2% 20px;
	border: 1px solid #ccc;
	box-sizing: border-box;
	-moz-box-shadow: inset 0 0 4px rgba(0,0,0,0.2);
	-webkit-box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.2);
	box-shadow: inner 0 0 4px rgba(0, 0, 0, 0.2);
}
input.submit_button {
    padding: 10px 30px;
    font-size: 1.2em;
    background-color:#444444;
    color: #fff;
    border-style: none;
	margin:5px;
	cursor: pointer;
}

.table_form label{
	margin: 0 10px 0 20px;
}
.table_form label.checkbox {
	cursor     : pointer;
	width      : 20px;
	height     : 20px;
	margin     : 0 0 20px 20px;
	border     : 1px solid #ccc;
	background : #fff;
	overflow   : hidden;
	position   : relative;
	display    : inline-block;
	box-sizing : border-box;
	-moz-box-shadow: inset 0 0 4px rgba(0,0,0,0.2);
	-webkit-box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.2);
	box-shadow: inner 0 0 4px rgba(0, 0, 0, 0.2);
}

/*Radio Check*/
label.radio, label.radio_text, label.checkbox, label.checkbox_text {
	position      : relative;
	cursor        : pointer;
	display       : inline-block;
	overflow      : hidden;
	box-sizing    : border-box;
}
label.radio {
	width         : 18px;
	height        : 18px;
	border        : 1px solid #666666;
	border-radius : 100%;
}
label.radio_text {
	min-height   : calc(18px + 5px);
	margin-right : calc(18px + 5px);
	padding-left : calc(18px + 5px);
	line-height  : calc(18px + 5px);
}
label.checkbox {
	width      : 20px;
	height     : 20px;
	border     : 1px solid #ccc;
	background : #fff;
}
label.checkbox_text {
	padding-left : calc(20px + 5px);
	line-height  : 20px;
}
/** before after **/
label.radio:before, label.radio_text:before, label.checkbox_text:before,
label.checkbox:after, label.radio_text:after, label.checkbox_text:after{
	content  : '';
	position : absolute;
	box-sizing : border-box;
}
label.radio:before, label.radio_text:before{
	border-radius    : 100%;
}
label.radio:before, label.checkbox:after{
	top              : 0px;
	bottom           : 0px;
	left             : 0px;
	right            : 0px;
	margin           : auto;
}
label.checkbox:after, label.checkbox_text:after{
	transform         : rotate(45deg);
	-webkit-transform : rotate(45deg);
	-moz-transform    : rotate(45deg);
	border-right      : 3px solid #DD6655;
	border-bottom     : 3px solid #DD6655;
	top               : calc(50% - (((17px / 12 ) * 5) / 2));
	display           : block;
	margin-top        : calc(((17px / 12 ) * 5) * -1);
	width             : calc(((17px / 12 ) * 5));
	height            : 17px;
	z-index           : 1;
}
label.radio_text:before, label.radio_text:after{
	top              : 0px;
	bottom           : 0px;
	margin-top       : auto;
	margin-bottom    : auto;
}
label.radio:before {
	display          : block;
	width            : 10px;
	height           : 10px;
	z-index          : 1;
	background-color : #DD6655; 
}
label.radio_text:before {
	width         : 18px;
	height        : 18px;
	border        : 1px solid #666666;
	left          : 0px;
	z-index       : 3;
}
label.checkbox_text:before {
	width    : 20px;
	height   : 20px;
	left     : 0px;
	top      : 0;
	border   : 1px solid #B3B3B3;
	z-index  : 3;
	box-sizing: border-box;
}
label.radio_text:after {
	width            : 10px;
	height           : 10px;
	border-radius    : 100%;
	left             : calc(((18px/2) - (10px) / 2));
	background-color : #DD6655;
	z-index          : 1;
}
label.checkbox_text:after {
	left : calc((20px / 2) - (((17px / 12 ) * 5) / 2));
}
/** input **/
label.radio input[type="radio"], label.radio_text input[type="radio"], label.checkbox input[type="checkbox"], label.checkbox_text input[type="checkbox"]{
	-moz-appearance: none;
	-webkit-appearance: none;
	position   : absolute;
	z-index    : 2;
	margin     : 0px;
	width      : 20px;
	height     : 20px;
	box-sizing    : border-box;
	outline       : none;
}
label.radio input[type="radio"], label.radio_text input[type="radio"]{
	left       : calc(18px * -1);
	width      : 18px;
	height     : 18px;
	top           : 0px;
	bottom        : 0px;
	margin-top    : auto;
	margin-bottom : auto;
	border-radius : 100%;
}
label.checkbox input[type="checkbox"], label.checkbox_text input[type="checkbox"]{
	left       : calc(20px * -1);
	padding    : 0;
}
label.radio input[type="radio"] {
	display    : block;
	box-shadow : 18px 0px #FFF;
}
label.radio_text input[type="radio"] {
	box-shadow : 18px 0px #FFF;
}
label.checkbox input[type="checkbox"] {
	box-shadow : 20px 0px #FFF;
}
label.checkbox_text input[type="checkbox"] {
	display    : block;
	box-shadow : 20px 0px #FFF;
}
/** checked forcus */
label.checkbox_text input[type="checkbox"]:checked,
label.checkbox input[type="checkbox"]:checked,
label.radio_text input[type="radio"]:checked,
label.radio input[type="radio"]:checked{
	box-shadow : none;
}
label.checkbox_text input[type="checkbox"]:checked:focus,
label.checkbox input[type="checkbox"]:checked:focus{
	opacity: 0.1;
}
label.radio_text input[type="radio"]:focus,
label.radio input[type="radio"]:focus{
	opacity: 0.2;
}

label.checkbox_text input[type="checkbox"]:checked:focus {
	box-shadow : 20px 0px #666;
}
label.checkbox_text input[type="checkbox"]:focus {
	box-shadow : 20px 0px #EEE;
}
label.checkbox input[type="checkbox"]:checked:focus {
	box-shadow : 20px 0px #666;
}
label.checkbox input[type="checkbox"]:focus {
	box-shadow : 20px 0px #EEE;
}
label.radio_text input[type="radio"]:focus {
	box-shadow : 18px 0px #FFF;
}
label.radio input[type="radio"]:focus {
	box-shadow : 18px 0px #FFF;
}

@media screen and (max-width: 640px){
.table_form th{
	text-align:left;
	width: 40%;
	padding:10px 2px;
	white-space: pre-wrap;
	border-bottom:solid 1px #666666;
	background-color:#F4F4F4;
}
}