@charset "utf-8";

#contactform {
	.wrap {
		padding-bottom:120px;
		.contents {
			max-width:840px;
			h2 {
				font-size:3.0rem;
			}
			& > p {
				&.thanks {
					background-color:var(--color_white);
					color:var(--color_def);
					padding:1em;
					line-height:1.8;
				}
			}
			dl {
				display:grid;
				font-size:1.6rem;
				grid-template-columns:15em 1fr;
				grid-row-gap:1.5em;
				margin-bottom:20px;
				dt,dd {
					line-height:1.66;
					color:var(--color_white);
				}
				dt {
					padding-top:.66em;
					span {
						font-size:.8em;
						margin-right:.5em;
						background-color:#cccccc;
						padding:.2em .5em;
						&.required {
							background-color:#FF0000;
						}
					}
				}
				dd {
					display:flex;
					flex-wrap:wrap;
					align-items:center;
					& > span {
						width:100%;
						a {
							color:var(--color_sub);
							text-decoration:underline;
						}
					}
					input {
						&[type="text"],&[type="email"],&[type="tel"],&[type="date"],&[type="number"] {
							padding:.75em 1em;
							background-color:#f5f5f5;
							border:1px solid #C5BFBF;
							width:100%;
							font-size:16px;
							color:var(--color_def);
						}
						&[type="checkbox"] {
							transform:translateY(-.1em);
						}
					}
					&.name {
						column-gap:.5em;
						input {
							width:10em;
						}
						& > span {
							width:auto;
						}
						.namesub {
							width:2em;
							text-align:right;							
						}
					}
					textarea {
						padding:.5em;
						background-color:#f5f5f5;
						border:1px solid #C5BFBF;
						width:100%;
						height:8em;
						font-size:16px;
						color:var(--color_def);
					}
					.wpcf7-list-item-label {
						color:var(--color_white);
						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;
				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;
					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: #0461AE;
					&.wpcf7-previous {
						border:none;
						background-color:#bababa;
						color:#FFFFFF;
					}
				}
				&.attachfile {
					opacity:.6;
					pointer-events:none;
				}
			}
			.wpcf7-spinner {
				position:absolute;
				bottom:-2em;;
				top:auto;
			}
		}
	}
	&.confirm {
		.wrap {
			.contents {
				& > p {
					text-align:center;
					margin-bottom:1em;
				}
			}
		}
	}
}

.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output, .wpcf7 form.payment-required .wpcf7-response-output {
    border-color: #ff0000;
	color:#ff0000;
}

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

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

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

	#contactform,#entry {
		.wrap {
			.contents {
				h2 {
					font-size:2.0rem;
				}
				dl {
					font-size:1.5rem;
					grid-template-columns:1fr;
					grid-row-gap:.66em;
					margin-bottom:15px;
					dt {
						padding-top:0;
					}
					dd {
						margin-bottom:5px;
						padding:0 .5em;
						input {
							&[type="text"],&[type="email"],&[type="tel"],&[type="date"],&[type="number"] {
								padding:.5em;
							}
						}
						textarea {
							height:6em;
						}
						p {
							font-size:1.3rem;
						}
						&.name {
							column-gap:.2em;
							input {
								width:6em;
							}
							.namesub {
								font-size:1.4rem;
							}
						}
						&.tel {
							.time {
								grid-column-gap:.5em;
								input {
									width:4em;
								}
							}
						}
					}
				}
				.btnwrap {
					margin-top:30px;
					input {
						font-size:1.4rem;
						padding:0 .5em;
						height:3.0em;
						max-width:11em;
					}
				}
			}
		}
		&.confirm {
			.wrap {
				.contents {
					dl {
						dt {
							background-color:var(--color_sub2);
							padding:.33em;
						}
					}
				}
			}
		}
	}
	
}