@charset "utf-8";

#form {
	padding: 10px;
}


/*============================================
				form
============================================*/
#form img {
	width: 100%;
	}

#form p {
	font-size: 80%;
	text-align: right;
	margin: 2% 2% 0 0;
	}
#form p span {
	color: #F00;
}
.smaple {
	color: #77766c;
	margin: 0px;
	padding-top: 2px;
	padding-bottom: 2px;
}
#form .form_inner dt {
	padding-top: 3px;
	padding-bottom: 3px;
}
#form .form_inner dt span {
	color: #F00;
}
#form .form_inner dd {
	padding-bottom: 10px;
}






#form-style {;
	color: #000000;
	text-align: left;
	}

	#form-style h2 {
		font-size: 110%;
		color: #000000;
		padding-top: 4%;
		padding-left: 8%;
		padding-bottom: 2%;
		margin-top: 2%;
		text-shadow: 3px 3px 4px rgba(0,0,0,0.40);
		-moz-text-shadow: 3px 3px 4px rgba(0,0,0,0.40);
		-webkit-text-shadow: 3px 3px 4px rgba(0,0,0,0.40);
		}

	#form-style div {
		text-align: center;
		}

	#form-style div p {
		font-size: 80%;
		color: 000000;
		text-align: center;
		}

	#form-style ul li {
		font-size: 85%;
		margin-left: 8%;
		margin-right: 6%;
		margin-bottom: 1%;
		}

input[type="radio"]{
	width: 26px;
	height: 26px;
	vertical-align: middle;
	}

input[type="text"]{
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	box-shadow:inset 2px 2px 4px rgba(0,0,0,0.50);
	-moz-box-shadow:inset 2px 2px 4px rgba(0,0,0,0.50);
	-webkit-box-shadow:inset 2px 2px 4px rgba(0,0,0,0.50);
	font-size: 170%;
	width:100%;
	}

select{
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	font-size: 116%;
	margin-right:5px;
	}

#submit {
	margin: 6% auto 2%;
	width: 140px;
	}
	#submit button {
		color: #666;
		font-size: 16px;
		width: 9em;
		font-weight: bold;
		display: inline-block;
		position: relative;
		height: 3.2em;
		padding: 0 1.6em;
		border: 0;
		border-radius: 5px;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
		background: none;
		vertical-align: middle;
		text-decoration: none;
		line-height: 2.8em;
		text-shadow: 0 2px 0 rgba(255, 255, 255, 0.5);
		-moz-text-shadow: 0 2px 0 rgba(255, 255, 255, 0.5);
		-webkit-text-shadow: 0 2px 0 rgba(255, 255, 255, 0.5);
		cursor: pointer;
		-webkit-user-select: none;
		-moz-user-select: none;
		user-select: none;
		}

aside {
	margin: 2% 2% 4% ;
	}




#form div.mobileonly p {
	font-size: 68%;
	color: #f00;
	margin: 0 0 2% 0;
	text-align: center;
}




input[type="radio"] {
	height: 10px;
	left: -20px;
	margin: -5px 0 0;
	outline: 0 none !important;
	position: absolute;
	top: 50%;
	width: 10px;
	z-index: 1;
}

label[for="M"], label[for="F"],  label[for="G"], label[for="D"] {

	display: inline-block;
	overflow: hidden;
	z-index: 2;
	font-size: 16px;
	font-weight: bold;
	color: #ffffff;
	text-shadow: 0 -1px 1px #333;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	background: #818181;

	width:50%;
}

label[for="M"], label[for="G"] {
	margin-right: -9px;
	border-right: none;
	border-bottom-left-radius: 0.6em;
	border-top-left-radius: 0.6em;
}

label[for="F"], label[for="D"] {
	border-left: none;
	border-bottom-right-radius: 0.6em;
	border-top-right-radius: 0.6em;
}

label[for="F"] span, label[for="M"] span, label[for="G"] span, label[for="D"] span {

	display: inline-block;
	margin: 0;
	padding: 0.8em 0px;
	width:100%;
	text-align:center;
}

label[for="M"] span, label[for="G"] span {
	border-bottom-left-radius: 0.5em;
	border-top-left-radius: 0.5em;
}

label[for="F"] span, label[for="D"] span {
	border-bottom-right-radius: 0.5em;
	border-top-right-radius: 0.5em;
}

input#F:checked + label,   input#D:checked + label {
	display: inline-block;
	overflow: hidden;
	color: #ffffff;
	background: #ffb2cf; /* Old browsers */


}
input#M:checked + label, input#G:checked + label {
	display: inline-block;
	overflow: hidden;
	color: #ffffff;
	background: #b2d1ff; /* Old browsers */
}
input#F:checked + label, input#D:checked + label {
	border-right: none;
}

input#M:checked + label, input#G:checked + label {
	border-left: none;
}

input#F:checked + label span, input#M:checked + label span, input#G:checked + label span, input#D:checked + label span {

	display: inline-block;
	margin: 0;
	padding: 0.8em 0px;
}

input#F:checked + label span, input#D:checked + label span {
	border-bottom-left-radius: 0.5em;
	border-top-left-radius: 0.5em;
}

input#M:checked + label span, input#G:checked + label span {
	border-bottom-right-radius: 0.5em;
	border-top-right-radius: 0.5em;
}






label[for="A"], label[for="B"], label[for="O"], label[for="AB"] {
	border: 1px solid #d7d7d7;
	display: inline-block;
	overflow: hidden;
	z-index: 2;
	font-size: 16px;
	font-weight: bold;
	color: #ffffff;
	text-shadow: 0 -1px 1px #333;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	background: #818181;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#818181), to(#707070)); /* Saf4+, Chrome */
	background-image: -webkit-linear-gradient(top, #818181, #707070); /* Chrome 10+, Saf5.1+ */
	background-image:	-moz-linear-gradient(top, #818181, #707070); /* FF3.6 */
	background-image:	 -ms-linear-gradient(top, #818181, #707070); /* IE10 */
	background-image:	  -o-linear-gradient(top, #818181, #707070); /* Opera 11.10+ */
	background-image:		 linear-gradient(top, #818181, #707070);
	width:25%;
}

label[for="A"] {
	margin-right: -9px;
	border-right: none;
	border-bottom-left-radius: 0.6em;
	border-top-left-radius: 0.6em;
}

label[for="B"], label[for="O"] {
	margin-right: -9px;
	border-right: none;
	border-left: none;
}

label[for="AB"] {
	border-left: none;
	border-bottom-right-radius: 0.6em;
	border-top-right-radius: 0.6em;
}

label[for="A"] span, label[for="B"] span, label[for="O"] span, label[for="AB"] span {
	border: 1px solid #222222;
	display: inline-block;
	margin: 0;
	padding: 0.8em 0px;
	width:100%;
	text-align:center;
}

label[for="A"] span {
	border-bottom-left-radius: 0.5em;
	border-top-left-radius: 0.5em;
}

label[for="B"] span, label[for="O"] span {
}

label[for="AB"] span {
	padding: 0.8em 0px;
	border-bottom-right-radius: 0.5em;
	border-top-right-radius: 0.5em;
}

input#A:checked + label, input#B:checked + label, input#O:checked + label, input#AB:checked + label {
	border: 1px solid #d7d7d7;
	display: inline-block;
	overflow: hidden;
	color: #ffffff;
	background: #00a6e2; /* Old browsers */
background: -moz-linear-gradient(top,  #00a6e2 1%, #0071e2 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#00a6e2), color-stop(100%,#0071e2)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #00a6e2 1%,#0071e2 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #00a6e2 1%,#0071e2 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #00a6e2 1%,#0071e2 100%); /* IE10+ */
background: linear-gradient(to bottom,  #00a6e2 1%,#0071e2 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00a6e2', endColorstr='#0071e2',GradientType=0 ); /* IE6-9 */

	text-align:center;
}

input#A:checked + label {
	border-right: none;
}

input#B:checked + label, input#O:checked + label {
	border-right: none;
	border-left: none;
}

input#AB:checked + label {
	border-left: none;
}

input#A:checked + label span, input#B:checked + label span, input#O:checked + label span, input#AB:checked + label span {
	border: 1px solid #762911;
	display: inline-block;
	margin: 0;
	padding: 0.8em 0px;
}

input#A:checked + label span {
	border-bottom-left-radius: 0.5em;
	border-top-left-radius: 0.5em;
}

input#AB:checked + label span {
	padding: 0.8em 0px;
	border-bottom-right-radius: 0.5em;
	border-top-right-radius: 0.5em;
}

/*input.btn {
	width: 80%;
	height: 100%;
	text-indent: -9999px;
	background-image: url(../form/img/btn_submit.gif);
	background-repeat: no-repeat;
	background-position: left top;
	-moz-background-size:100% 100%;
    background-size:100% 100%;
	-webkit-background-size:100% 100%;
	}*/
#form .butto {
	height: auto;
	width: 80%;
}
#form  #sub{
	text-align: center;
	padding-top: 15px;
}
textarea {
	resize: vertical;
	width: 100%;
　　border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	box-shadow:inset 2px 2px 4px rgba(0,0,0,0.50);
	-moz-box-shadow:inset 2px 2px 4px rgba(0,0,0,0.50);
	-webkit-box-shadow:inset 2px 2px 4px rgba(0,0,0,0.50);
	font-size: 170%;
}
#form p a {
	display: block;
	padding-top: 7px;
	padding-right: 10px;
	padding-bottom: 7px;
}
.comp {
	padding: 10px;
	font-size: 16px;
}