@charset "utf-8";

#contact {
	.wrap {
		padding-bottom:90px;
		.contents {
			.tel {
				display:grid;
				align-content:center;
				justify-items:center;
				grid-row-gap:.2em;
				font-size:3.2rem;
				border:1px solid #000000;
				width:100%;
				max-width:13em;
				height:2.6em;
				border-radius:1.8em;
				margin:0 auto 90px;
				span {
					font-size:1.6rem;
				}
			}
			p {
				text-align:center;
				&:not(:last-child) {
					margin-bottom:1em;
				}
			}
		}
	}
}

#contactform {
	.wrap {
		.contents {
			max-width:860px;
			& > p {
                margin-bottom: 3em;
				text-align: center;
			}
			dl {
				display:grid;
				font-size:1.6rem;
				grid-template-columns:18em 1fr;
				grid-row-gap:1.5em;
				margin-bottom:20px;
				dt,dd {
					line-height:1.66;
				}
				dt {
					display:grid;
					grid-template-columns:auto 1fr;
					align-items:start;
					grid-gap:.5em;
					padding-top:.66em;
					span {
						background-color:#C5C5C5;
						color:#FFFFFF;
						padding:.2em .5em .1em;
						font-size:.8em;
						&.required {
							background-color:#CE052C;
						}
						&.small {
							display: contents;
							color:inherit;
							a{
								color:#38B2E5;
							}
						}
					}
				}
				dd {
					display:flex;
					flex-wrap:wrap;
					align-items:center;
					& > span {
						width:100%;
					}
					input {
						&[type="text"],&[type="email"],&[type="tel"],&[type="date"],&[type="number"] {
							padding:1em;
							background-color:#f5f5f5;
							border:1px solid #C5BFBF;
							width:100%;
							font-size:16px;
						}
					}
					select {
						padding:1em;
						background-color:#f5f5f5;
						border:1px solid #C5BFBF;
						width:100%;
						font-size:16px;
					}
					&.name {
						column-gap:.33em;
						input {
							width:9em;
						}
						span[data-name="yourname1"],
						span[data-name="kana1"] {
							margin-right:.5em;
						}
						& > span {
							width:auto;
							&.sei,&.mei {
								width:2em;
							}
						}
					}
					&.time {
						input {
							width:15em;
						}
					}
					textarea {
						padding:.5em;
						background-color:#f5f5f5;
						border:1px solid #C5BFBF;
						width:100%;
						height:8em;
						font-size:16px;
					}
					p {
						font-size:1.5rem;
						line-height:1.5;
						color:#7B7B7B;
						margin-top:.5em;
						a {
							color:#2A86FF;
							text-decoration:underline;
						}
					}
					.wpcf7-list-item-label {
						a{
							color:var(--color_main);
							text-decoration:underline;
						}
					}
					.small {
						display: contents;
						color:inherit;
						a{
							color:var(--color_main);
							text-decoration:underline;
						}
					}
					.wpcf7-list-item {
						margin: 0 1em 0 0;
					}
					.wpcf7-checkbox {
						display:flex;
						flex-wrap:wrap;
						gap:5px 10px;
					}
				}
			}
			.btnwrap {
				position:relative;
				display:flex;
				flex-wrap:wrap;
				gap:.5em;
				flex-wrap:wrap;
				align-items:center;
				justify-content:center;
				margin-top:60px;
				input {
					font-size:1.6rem;
					color:#FFFFFF;
					padding:0 2.5em;
					font-weight:600;
					border:1px solid var(--color_main);
					display:grid;
					grid-template-columns:repeat(2,auto);
					justify-content:center;
					align-items:center;
					grid-gap:.66em;
					height:4em;
					width:100%;
					max-width:16em;
					background-color: var(--color_main);
					&.wpcf7-previous {
						border:none;
						background-color:#bababa;
						color:#FFFFFF;
					}
				}
			}
			.wpcf7-spinner {
				position:absolute;
				bottom:-2em;;
				top:auto;
			}
		}
	}
	&.thanks {
		.wrap {
			padding-top:0;
			.contents {
				max-width:1100px;
				h2 {
					text-align:center;
					margin-bottom:1em;
					font-size:2.4rem;
				}
				p {
					margin-bottom:1em;
					text-align:center;
				}
				.btn {
					margin:30px auto 0;
					color:#FFFFFF;
					background-color:var(--color_main);;
					display:grid;
					width:100%;
					max-width:12em;
					height:3em;
					align-items:center;
					justify-content:center;
				}
			}
		}
	}
	&.confirm {
		.wrap {
			padding-top:0;
			.contents {
				dl {
					dt {
						padding-top:0;
					}
				}
			}
		}
	}
}

.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 (hover:hover) {

	#contactform {
		&.thanks {
			.wrap {
				.contents {
					.btn {
						transition-duration:.3s;
						&:hover {
							filter: brightness(1.2);
						}
					}
				}
			}
		}
		.btnwrap {
			input {
				transition-duration:.3s;
				&:hover {
					filter: brightness(1.2);
				}
			}
		}
	}

}

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

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

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

	#contact {
		.wrap {
			padding-bottom:30px;
			.contents {
				.tel {
					font-size:2.6rem;
					max-width:12em;
					margin:0 auto 50px;
					span {
						font-size:1.4rem;
					}
				}
				p {
					text-align:left;
					&:not(:last-child) {
						margin-bottom:.66em;
					}
				}
			}
		}
	}

	#contactform {
		.wrap {
			padding-top:30px;
			.contents {
				& > p {
					text-align: left;
				}
				p.entry{
					font-size:1.6rem;
				}
				dl {
					font-size:1.5rem;
					grid-template-columns:1fr;
					grid-row-gap:.66em;
					margin-bottom:15px;
					dt {
						padding-top:0;
					}
					dd {
						margin-bottom:10px;
						input {
							&[type="text"],&[type="email"],&[type="tel"],&[type="date"],&[type="number"] {
								padding:.5em;
							}
						}
						select {
							padding:.5em;
						}
						textarea {
							height:6em;
						}
						p {
							font-size:1.3rem;
						}
						&.name {
							input {
								width:6em;
							}
						}
						.wpcf7-list-item {
							margin:0;
						}
						&.detail {
							.wpcf7-form-control {
								grid-template-columns:1fr;
							}
						}
						&.school {
							.wpcf7-form-control {
								grid-template-columns:repeat(2,auto);
							}
						}
					}
				}
				.btnwrap {
					margin-top:30px;
					input {
						font-size:1.4rem;
						padding:0 .5em;
						height:3.4em;
						max-width:11em;
					}
				}
			}
		}
		&.thanks {
			.wrap {
				.contents {
					h2 {
						font-size:2.0rem;
					}
					p {
						text-align:left;
					}
					.btn {
						font-size:1.4rem;
					}
				}
			}
		}
	}
	
}