@charset "utf-8";
.page-id-11 #main {
    padding-bottom: 40px;
}

.wrap{
	.contents{
		p{
			text-align: center;
			margin-bottom: 70px;
		}
	}
}

.contactform{
	max-width: 800px;
	margin: 0 auto;
	display: grid;
	grid-row-gap: 1.5em;
	dl{
		display: grid;
		grid-template-columns: 17em 1fr;
		grid-column-gap: 1em;
		dt{
			font-size: 1.6rem;
			line-height: 1.8;
			padding-top:.6em;
			span{
				background-color: #999999;
				color: #FFFFFF;
				padding: 0.5em .8em;
				margin-right: 1em;
				font-size: 0.8em;
				&.required{
					background-color: #CE052C;
				}
			}
		}
		dd{
			input{
				height: 2em;
				width: 100%;
				padding:.5em;
				&[readonly="readonly"] {
					border:none;
					pointer-events:none;
				}
			}
			textarea{
				width: 100%;
				padding:.5em;
			}
			.wpcf7-not-valid-tip {
				padding-top:.5em;
				font-size:.9em;
			}
			.wpcf7-list-item {
				margin: 0;
			}
		}
	}
	.privacy {
		text-align:center;
		margin-bottom:1em;
		a {
			&::after {
				content:none!important;
			}
		}
	}
	.btnwrap{
		text-align: center;
		position:relative;
		display:flex;
		justify-content:center;
		align-items:center;
		flex-wrap:wrap;
		gap:.5em;
		input{
			background-color: #002D82;
			color: #FFFFFF;
			font-size: 1.8rem;
			padding: 0.5em 1.5em;
			border:none;
			&.back {
				background-color:#999999;
			}
		}
		.wpcf7-spinner {
			position:absolute;
			left:50%;
			bottom:0;
			transform:translate(-50%,120%);
			margin:0;
		}
	}	
}


@media (hover:hover) {

	.btnwrap{
		input{
			&:hover{
				opacity: 0.8;
			}
		}
	}

}

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

	.page-id-11 #main {
		padding-bottom: 30px;
	}
	.contactform{
		dl{
			dd{
				input{
					width: 90%;
				}
				textarea{
					width: 90%;
				}
			}
		}

	}

@media screen and (max-width:1024px) {
	
	.page-id-11  #main {
		padding-bottom: 40px;
	}
	.wrap{
		.contents{
			p{
				margin-bottom: 30px;
			}
		}
	}
	.contactform{
		max-width: 100%;
		dl{
			grid-template-columns: 15em 1fr;
			dt{
				font-size: 1.5rem;	
			}
			dd{
				input{
					width: 90%;
					height: 1.5em;
				}
				textarea{
					width: 90%;
				}
			}
		}
		.btnwrap{
			input{
				font-size: 1.6rem;
			}
		}	
	}

}

@media screen and (max-width:768px) {
	.page-id-11 #main {
		padding-bottom: 30px;
	}
	.wrap{
		.contents{
			p{
				margin-bottom: 20px;
				text-align:left;
			}
		}
	}
	
	.contactform{
		grid-row-gap:1em;
		dl{
			grid-template-columns: 1fr;
			grid-row-gap:.5em;
			padding-top:0;
			dt{
				font-size: 1.5rem;
				span{
					padding: 0.3em .5em;
					margin-right: .66em;
				}
			}
			dd{
				input{
					width: 95%;
					height: 1em;
				}
				textarea{
					width: 95%;
				}
			}
		}
		.btnwrap{
			text-align: center;
			input{
				font-size: 1.5rem;
			}
		}	
	}
	
}