@charset "utf-8";

/* #form */

main#form {
	font-size: 13px;
	@media only screen and (max-width: 500px) {
		padding-top: calc(18vw + 32px);
	}
}

#form .contentWrap {
	background: #fff;
}

#form .mainContainer {
	margin: 0 auto;
	padding: 0;
	float: none;
	max-width: 930px;
	font-size: 108%;
}

#form .introTxt {
	padding: 40px 0 0 240px;
	color: #d0111b;
	font-weight: bold;
	font-size: 108%;
	@media only screen and (min-width: 501px) {
		background: url(../images/form_bg_01.webp) no-repeat left top;
		height: 111px;
		position: relative;
	}
	@media only screen and (max-width: 500px) {
		padding: 8px;
	}
}

#form .introTxt span {
	position: absolute;
	width: 484px;
	bottom: 0;
}

#form #form01 {
	background: url(../images/form_bg_03.webp) no-repeat left bottom;
}

#form #form01 .selectWrap {
	background: url(../images/form_bg_02.webp) no-repeat left top;
}

#form #form01 .selectCourse h3 {
	margin-bottom: 10px;
	font-weight: bold;
	font-size: 18px;
	color: #d0111b;
}

#form #form01 .selectCourse h3 span {
	font-size: 12px;
	color: #fff;
}

#form #form01 .selectCourse table {
	margin-bottom: 10px;
}

#form #form01 .selectCourse table th,
#form #form01 .selectCourse table td {
	padding: 5px 7px 5px 0;
}

#form #form01 .selectCourse table th {
	font-weight: bold;
}

#form #form01 .selectCourse p {
	color: #d0111b;
	font-weight: bold;
}

#form #form01 #select01 h3 span {
	padding: 7px 29px 7px 13px;
	background: url(../images/form_bg_05.webp) no-repeat left top;
}
#form #form01 #select02 h3 span {
	padding: 7px 29px 7px 15px;
	background: url(../images/form_bg_05.webp) no-repeat left top;
}

#form #form01 #select01 {
	margin-right: 10px;
	padding: 20px 19px 15px;
	float: left;
	width: 511px;
}

#form #form01 #select02 {
	padding: 20px 19px 15px;
	float: left;
	width: 333px;
}

#form #form01 #select02 td {
	padding-right: 20px;
	font-size: 85%;
}

#form #form02 {
	clear: both;
}

#form #form02 .formDetail {
	margin-bottom: 20px;
	width: 100%;
	table-layout: fixed;
}

#form #form02 .formDetail th,
#form #form02 .formDetail td {
	padding: 10px 0;
	border-bottom: 1px solid #eae5e5;
}

#form #form02 .formDetail th {
	padding-right: 16px;
	width: 226px;
	text-align: right;
	@media only screen and (max-width: 500px) {
		border-bottom: none;
		text-align: left;
		padding-bottom: 5px;
	}
}

#form #form02 .formDetail td {
	font-size: 85%;
	vertical-align: middle;
	@media only screen and (max-width: 500px) {
		padding-top: 5px;
	}
}

#form #form02 .formDetail table td {
	padding: 0 20px 0 0;
	font-size: 100%;
	border-bottom: 0;
	vertical-align: top;
}

#form #form02 .formDetail li {
	margin-right: 15px;
	display: inline-block;
}

* html #form #form02 .formDetail li {
	display: inline;
	zoom: 1;
}

*:first-child+html #form02 .formDetail li {
	display: inline;
	zoom: 1;
}

#form #form02 .formDetail .w215 {
	margin-right: 12px;
	width: 215px;
}

#form form {
	@media only screen and (max-width: 500px) {
		padding-left: 10px;
		padding-right: 10px;
		table, tbody, tr, th, td {
			display: block;
		}
	}
	input[type=text], textarea, select {
		border: 1px solid #e6e6e6;
		border-radius: 8px;
		padding: 1.0em;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		-o-box-sizing: border-box;
		-ms-box-sizing: border-box;
		box-sizing: border-box;
		font-size: initial;
		background-color: #fafafa;
	}
	textarea {
		max-width: min(40em, 100%);
	}
	li:has(> .checkbox + label) {
		padding: 0.5em 0.8em;
		vertical-align: middle;
		.checkbox, label {
			vertical-align: middle;
			cursor: pointer;
		}
		.checkbox + label {
			margin-left: 0.5em;
		}
	}
}

.grecaptcha-badge {
	margin-bottom: 160px;
	@media only screen and (max-width: 500px) {
		margin-bottom: 0;
	}
}

#form .require {
	color: #e6001a;
}

#form .error {
	margin: 50px 0 50px;
	color: #e6001a;
	font-weight: bold;
}

#form .thanks {
	margin: 50px 0 50px;
}

#form .btnArea {
	padding: 0 0 40px 226px;
	@media only screen and (max-width: 500px) {
		padding-left: 0;
	}
}

#form .btnArea p {
	margin-bottom: 10px;
	font-size: 85%;
	color: #e6001a;
}

#form .btnArea ul li {
	margin-right: 30px;
	display: inline;
}

#form .btnArea ul li img {
	cursor: pointer;
}