@charset "utf-8";

#contact {
	.wrap {
		padding-bottom:90px;
		.contents {
			h2 {
				font-size:3.6rem;
				text-align:center;
				font-weight:500;
				margin-bottom:.5em;
				& + p {
					text-align:center;
					font-size:1.8rem;
					line-height:1.5;
					margin-bottom:2em;
				}
			}
			& > .note {
				display:block;
				line-height:1.5;
				max-width:800px;
				margin:0 auto 1.5em;
			}
			& > .contact_note {
				max-width:800px;
				margin:0 auto 1.5em;
				a {
					color:var(--color_main);
					text-decoration:underline;
				}
			}
			& > .thanks {
				text-align: center;
				border:10px solid #EFEFEF;
				padding:2em;
				max-width:400px;
				margin:0 auto;
				p {
					margin-bottom:1em;
				}
				a {
					color:var(--color_main);
					text-decoration:underline;
				}
			}
			.formwrap {
				max-width:800px;
				margin:0 auto;
				table {
					width:100%;
					border-collapse:collapse;
					th,td {
						font-size:1.6rem;
						padding:1em;
					}
					th {
						background-color:#efefef;
						width:17em;
						text-align:left;
						border-bottom:2px solid #FFFFFF;
						&::before {
							content:'任意';
							background-color:#ababab;
							color:#FFFFFF;
							font-size:1.4rem;
							padding:.2em .33em;
							border-radius:4px;
							font-weight:400;
							margin-right:.5em;
						}
						&.req {
							&::before {
								content:'必須';
								background-color:#cc0000;
							}
						}
						&.privacy {
							background-color:transparent;
							&::before {
								content:none;
							}
						}
					}
					td {
						input {
							&[type="text"],&[type="email"],&[type="tel"],&[type="date"],&[type="number"] {
								padding:.5em;
								border:1px solid #cccccc;
								width:100%;
								font-size:16px;
							}
						}
						textarea {
							width:100%;
							height:8em;
							margin-top:1em;
							padding:.5em;
							border:1px solid #cccccc;
							width:100%;
							font-size:16px;
						}
						&:has(textarea) {
							.wpcf7-checkbox {
								display:grid;
								grid-row-gap:.66em;
								.wpcf7-list-item {
									margin-left:0;
								}
							}
						}
						&.graduation {
							display:flex;
							align-items:center;
							input {
								width:8em;
								margin:0 .5em;
							}
						}
						&.addr {
							display:flex;
							flex-wrap:wrap;
							align-items:center;
							& > span {
								input {
									width:8em;
									margin:0 .5em;
								}
							}
							dl {
								width:100%;
								dt {
									font-size:1.5rem;
									padding:1em 0 .5em;
								}
							}
						}
						&.privacy {
							.wpcf7-list-item {
								margin-left:0;
							}
							.note {
								display:block;
								line-height:1.5;
								padding-left:1em;
								padding-top:.5em;
								a {
									color:var(--color_main);
									text-decoration:underline;
								}
							}
						}
						&.certificate {
							.wpcf7-checkbox {
								display:grid;
								grid-row-gap:.66em;
								.wpcf7-list-item {
									margin-left:0;
								}
							}
							.other {
								padding-top:1em;
							}
						}
					}
				}
				.btn_box {
					position:relative;
					display:flex;
					flex-wrap:wrap;
					gap:.5em;
					flex-wrap:wrap;
					align-items:center;
					justify-content:center;
					margin-top:50px;
					input {
						font-size:1.6rem;
						color:#FFFFFF;
						padding:0 2.5em;
						font-weight:600;
						border:2px solid var(--color_main);
						display:grid;
						justify-content:center;
						align-items:center;
						height:3.6em;
						width:100%;
						max-width:16em;
						background-color: var(--color_main);
						border-radius:4px;
						&.wpcf7-previous {
							border:none;
							background-color:var(--color_main);
							color:#FFFFFF;
						}
						&.back {
							background-color: #999999;
						}
					}
					&:has(.back) {
						input {
							max-width: 10em;
						}
					}
				}
				.wpcf7-spinner {
					position:absolute;
					bottom:-2em;;
					top:auto;
				}
			}
		}
	}
}

.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output, .wpcf7 form.payment-required .wpcf7-response-output {
    border-color: var(--color_main);
}

@media screen and (max-width:1200px) {
}

@media screen and (max-width:1024px) {

	#contact {
		.wrap {
			.contents {
				h2 {
					font-size:3.0rem;
				}
			}
		}
	}
	
}

@media screen and (max-width:768px) {
	
	#contact {
		.wrap {
			padding-bottom:60px;
			.contents {
				h2 {
					font-size:2.0rem;
					& + p {
						font-size:1.4rem;
					}
				}
				& > .thanks {
					border:6px solid #EFEFEF;
				}
				.formwrap {
					table {
						th,td {
							font-size:1.4rem;
							padding:1em;
							display:block;
							width:100%;
						}
						th {
							width:100%;
							&::before {
								font-size:1.2rem;
							}privacy {
								background-color:transparent;
								&::before {
									content:none;
								}
							}
						}
						td {
							input {
								&[type="text"],&[type="email"],&[type="tel"],&[type="date"],&[type="number"] {
									font-size:16px;
								}
							}
							textarea {
								height:6em;
							}
							&:has(textarea) {
								.wpcf7-checkbox {
									display:grid;
									grid-row-gap:.66em;
									.wpcf7-list-item {
										margin-left:0;
									}
								}
							}
							&.graduation {
								display:flex;
								align-items:center;
								input {
									width:8em;
									margin:0 .5em;
								}
							}
							&.addr {
								display:flex;
								flex-wrap:wrap;
								align-items:center;
								& > span {
									input {
										width:8em;
										margin:0 .5em;
									}
								}
								dl {
									width:100%;
									dt {
										font-size:1.5rem;
										padding:1em 0 .5em;
									}
								}
							}
							&.privacy {
								.wpcf7-list-item {
									margin-left:0;
								}
								.note {
									display:block;
									line-height:1.5;
									padding-left:1em;
									padding-top:.5em;
									a {
										text-decoration:underline;
									}
								}
							}
							&.certificate {
								.wpcf7-checkbox {
									display:grid;
									grid-row-gap:.66em;
									.wpcf7-list-item {
										margin-left:0;
									}
								}
								.other {
									padding-top:1em;
								}
							}
						}
					}
					.btn_box {
						margin-top:30px;
						input {
							font-size:1.4rem;
							max-width:14em;
						}
					}
				}
			}
		}
	}
	
}