@charset "utf-8";

#contactform {
	.wrap {
		padding-top: 50px;
		.contents {
			a.tel{
				display: grid;
				grid-template-columns: auto auto;
				grid-column-gap: 0.3em;
				align-items: center;
				color: #001B5D;
				border: solid 1px #001B5D;
				border-radius: 50px;
				padding:0.5em 2em;
				width: 20em;
				margin: 0 auto;
				background-color: #fff;
				&:hover{
					background-color:#c2ddfe;
				}
				span {
					font-size: 2.8rem;
					letter-spacing: 0.07em;
					font-weight: 500;
				}
				img {
					width: 2.6rem;
				}
			}
			max-width:840px;
			& > p {
                margin-bottom: 3em;
				text-align: center;
			}
			dl {
				display:grid;
				font-size:1.7rem;
				grid-template-columns:15em 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:#a1967e;
						}
						&.small {
							display: contents;
							color:inherit;
							a {
								color:var(--color_sub);
							}
						}
					}
				}
				dd {
					display:flex;
					flex-wrap:wrap;
					align-items:center;
					& > span {
						width:100%;
						&.attachfile::after {
							content:'ファイル添付中';
							color:var(--color_main);
						}
					}
					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;
						}
					}
					&.name {
						column-gap:.5em;
						input {
							width:10em;
						}
						span[data-name="yourname1"] {
							margin-right:1em;
						}
						& > span {
							width:auto;
						}
					}
					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:var(--color_sub);
							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:50px;
				input {
					border-radius: 50px;
					font-size:1.6rem;
					color:#001B5D;
					padding:0 2.5em;
					font-weight:500;
					border:1px solid #001B5D;
					display:grid;
					grid-template-columns:repeat(2,auto);
					justify-content:center;
					align-items:center;
					grid-gap:.66em;
					height:3.6em;
					width:100%;
					max-width:16em;
					background-color: #fff;
					&.wpcf7-previous {
						border:none;
						background-color:#bababa;
						color:#FFFFFF;
					}
					&:hover{
                        background-color:#c2ddfe;
                    }
				}
				&.attachfile {
					opacity:.6;
					pointer-events:none;
				}
			}
			.wpcf7-spinner {
				position:absolute;
				bottom:-2em;;
				top:auto;
			}
		}
	}
	&.thanks {
		.wrap {
			.contents {
				max-width:1100px;
				text-align:center;
				h2 {
					font-size:2.6rem;
					color:var(--color_main);
					margin-bottom:1em;
				}
				p {
					margin-bottom:1em;
					+ a {
						text-decoration:underline;
						font-size:1.2em;
					}
				}
			}
		}
	}
	&.confirm {
		.wrap {
			.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 screen and (max-width:1200px) {
}

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

	#contactform{
		.wrap{
			.contents{
				max-width: 100%;
			}
		}
	}
	
}

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

	#contactform,#entry {
		.wrap {
			padding-top:30px;
			.contents {
				a.tel{
					width: 18em;
					span {
						font-size: 2.4rem;
					}
					img {
						width: 2.0rem;
					}
				}
				& > p {
					margin-bottom: 2em;
					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;
							}
						}
						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.0em;
						max-width:11em;
					}
				}
				p {
					&.thanks {
						font-size:1.5rem;
					}
				}
			}
		}
		&.thanks {
			.wrap {
				.contents {
					h2 {
						font-size:2.0rem;
						color:var(--color_main);
						margin-bottom:1em;
					}
					p {
						text-align:left;
						+ a {
							font-size:1em;
						}
					}
				}
			}
		}
	}
	
	
}