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

/* -- for JavaScript ここから -------------------------------------------------------------------------------- */
form#mail_form tr th span.required,
form#mail_form tr th span.optional {
	display: inline-block;
		font-size: 0.8rem;

}

form#mail_form tr th span.required {
	background: #fff;
	color: #ff0000;
	padding: 1px 5px;
	border-radius: 5px;
	margin-left: 10px;
}

form#mail_form tr th span.optional {
display: none;
}

form#mail_form tr td span.error_blank,
form#mail_form tr td span.error_format,
form#mail_form tr td span.error_match {
	display: block;
	color: #ff0000;
	margin-top: 3px;
}

form#mail_form tr td span.error_blank>span,
form#mail_form tr td span.error_format>span,
form#mail_form tr td span.error_match>span{
display: none;
}


span.loading {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	border-top: 5px solid rgba( 255, 255, 255, 0.2 );
	border-right: 5px solid rgba( 255, 255, 255, 0.2 );
	border-bottom: 5px solid rgba( 255, 255, 255, 0.2 );
	border-left: 5px solid #ffffff;
	-webkit-transform: translateZ( 0 );
	-ms-transform: translateZ( 0 );
	transform: translateZ( 0 );
	-webkit-animation: load-circle 1.0s linear infinite;
	animation: load-circle 1.0s linear infinite;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -30px;
	margin-left: -30px;
}

@-webkit-keyframes load-circle {
	0% {
		-webkit-transform: rotate( 0deg );
		transform: rotate( 0deg );
	}
	100% {
		-webkit-transform: rotate( 360deg );
		transform: rotate( 360deg );
	}
}

@keyframes load-circle {
	0% {
		-webkit-transform: rotate( 0deg );
		transform: rotate( 0deg );
	}
	100% {
		-webkit-transform: rotate( 360deg );
		transform: rotate( 360deg );
	}
}


/* -- for JavaScript ここまで -------------------------------------------------------------------------------- */
/* LAYOUT
-------------------------------------------------- */
label {
	display: block;
}
.name label {
	display: inline-block;
}
.name label + label {
	padding-left: 10px;
}

/* ///////// RESPONSIVE ///////// */
@media screen and (max-width: 640px) {
	.table th,
	.table td {
		display: block;
		border: none !important;
	}
	.name label {
		width: 50%;
	}
	.name label:nth-child(1) {
		padding-right: 5px;
	}
	.name label:nth-child(2) {
		padding-left: 5px;
	}

}
.table th{
	text-align: left;
}
/* FORM
-------------------------------------------------- */
input,textarea,select{
	font-size: 16rem;
line-height: 1.6;
}
input[type="text"],
input[type="num"],
input[type="tel"],
input[type="email"] {
	padding: 5px;
	height: 40px;
}
.company input {
	width:  615px;
}
.name input {
	width: 300px;
}
.post input:nth-child(1) {
	width: 60px;
}
.post input:nth-child(2) {
	width: 80px;
}
.add input,
.school input,
.address input,
.mail input {
	width: 615px;
}
.tel input {
	width: 80px;
}
.grad input {
	width: 60px;
}
textarea {
	width: 615px;
	height: 100px;
}
.submit P{
	text-align: center;
}
.submit input {
        border: none;
        cursor: pointer;
        outline: none;
        appearance: none;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background-color: #156d37;
  padding: 0 50px;
	margin: 30px auto 50px;
	max-width: 200px;
	line-height: 2.2;
  color: #fff;
  font-size: 30rem;
  font-weight: bold;
  text-decoration: none;
  border-top: 0 transparent solid;
  border-bottom: 4px #CCC solid;
  border-radius: 10px;
  transition: .4s all;

}


/* iOSでのデフォルトスタイルをリセット */
input[type="submit"],
input[type="button"] {
  border-radius: 10px;
  -webkit-box-sizing: content-box;
  -webkit-appearance: button;
  appearance: button;
  border: none;
  box-sizing: border-box;
  cursor: pointer;
}
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;
}

  @media (max-width: 767px) {
 .submit input {
      font-size: 16px;
      font-size: 20rem;
      border-radius: 25px; 
	 display: block;
	  }
}
 .submit input:hover {
    text-decoration: none;
    border-top-width: 4px;
    border-bottom-width: 0; 
}
/* ///////// RESPONSIVE ///////// */
@media screen and (max-width: 640px) {
	.name input,
	.add input,
	.school input,
	.mail input,
	textarea {
		width: 100%;
	}
	.tel input {
		width: 70px;
	}

	.submit {
		width: 100%;
	}
	.submit button {
		margin-top: 10px;
	}
	.submit img {
		width: 100%;
	}
	.btn_back {
		width: 50%;
		padding-right: 5px;
	}
	.btn_confirm {
		/*width: 50%;*/
		padding-left: 5px;
	}
	.btn_send {
		width: 100%;
	}
	.birthday select{
		width: 60px;
		font-size: 0.8rem;
	}
	.birthday select:first-child{
		width: 100px;
	}
}