@charset "utf-8";

#firstContent {
	.wrap {
		.contents {
			.privacy_title {
				border:1px solid #4a647c;
				max-width:640px;
				margin:0 auto;
				padding:10px 15px;
				h3 {
					font-size:1.4rem;
					color:#4a647c;
					text-align:center;
					margin-bottom:.5em;
				}
				p {
					font-size:1.3rem;
					color:#4a647c;
					margin-bottom:1em;
					line-height:1.66;
					margin:0;
					a {
						color:#0078dc;
					}
				}
			}
			.contents_inner {
				.btnwrap {
					margin-bottom:30px;
				}
			}
		}
	}
}

#mainContent {
	.wrap {
		.contents {
			h2 {
				& + p {
					padding:0 1em;
					margin-bottom:2em;
				}
			}
			.progress {
				display:grid;
				grid-template-columns:repeat(3,1fr);
				font-size:1.8rem;
				margin-bottom:30px;
				li {
					display:grid;
					height:3em;
					align-items:center;
					justify-content:center;
					background-color:#dfdfdf;
					clip-path:polygon(0 0,92% 0,100% 50%,92% 100%,0 100%,8% 50% );
					&:first-child {
						clip-path:polygon(0 0,92% 0,100% 50%,92% 100%,0 100%);
					}
					&.active {
						background-color:#ffb700;
					}
				}
			}
			#form {
				background-color:rgba(241,236,236,.5);
				padding:50px;
				dl {
					max-width:800px;
					margin:0 auto;
					display:grid;
					grid-template-columns:auto 1fr;
					grid-gap:20px 30px;
					dt {
						font-size:1.8rem;
						padding-top:.66em;
						span {
							color:#ff0000;
							margin-left:.33em;
							font-size:.8em;
							display:inline-block;
						}
					}
					dd {
						input,textarea,select {
							padding:.75em;
							border:1px solid rgba(74,100,124,.5);
							width:calc(100% - 8em);
							&#zip {
								width:8em;
							}
						}
						select {
							max-width:10em;
						}
						textarea {
							width:100%;
							height:8em;
						}
						span:not(.wpcf7-form-control-wrap) {
							font-size:1.4rem;
							margin-left:.5em;
						}
						&.birth {
							display:flex;
							align-items:center;
							gap:.5em;
							input {
								width:4em;
							}
							select {
								width:auto;
							}
							span:not(.wpcf7-form-control-wrap) {
								margin:0;
							}
						}
					}
				}
				.btnBox {
					padding:45px 0 30px;
					display:flex;
					flex-wrap:wrap;
					justify-content:center;
					align-items:center;
					gap:20px;
					position:relative;
					input {
						background-color:#004da1;
						color:#FFFFFF;
						border:none;
						font-size:2.0rem;
						padding:.5em 1em;
						line-height:1;
						&.wpcf7-previous {
							background-color:#999999;
						}
					}
					.wpcf7-spinner {
						position:absolute;
						bottom:0px;
					}
				}
				&.confirm {
					dl {
						grid-template-columns:repeat(2,auto);
						justify-content:center;
						dt {
							padding-top:0;
						}
					}
				}
				&.thanks {
					.formBox {
						p {
							text-align:center;
						}
					}
				}
			}
		}
	}
}

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

	#firstContent {
		.wrap {
			.contents {
				.privacy_title {
					h3 {
						font-size:1.3rem;
					}
					p {
						font-size:1.1rem;
						a {
							color:#0078dc;
						}
					}
				}
				.contents_inner {
					.btnwrap {
						margin-bottom:20px;
					}
				}
			}
		}
	}
	
	#mainContent {
		.wrap {
			.contents {
				h2 {
					& + p {
						padding:0;
						margin-bottom:1.5em;
					}
				}
				.progress {
					font-size:1.5rem;
					margin-bottom:20px;
					li {
						height:2.4em;
					}
				}
				#form {
					padding:20px;
					dl {
						grid-template-columns: 1fr;
						grid-gap:10px;
						dt {
							font-size:1.6rem;
						}
						dd {
							input,textarea,select {
								padding:.5em;
								border:1px solid rgba(74,100,124,.5);
								width:calc(100% - 6em);
							}
							span:not(.wpcf7-form-control-wrap) {
								font-size:1.2rem;
							}
							&.birth {
								display:flex;
								flex-wrap:wrap;
								align-items:center;
								gap:.5em;
								input {
									width:4em;
								}
								select {
									width:auto;
								}
								span:not(.wpcf7-form-control-wrap) {
									margin:0;
								}
							}
						}
					}
					.btnBox {
						padding:30px 0;
						gap:10px;
						input {
							font-size:1.6rem;
						}
					}
					&.confirm {
						dl {
							font-size:1.4rem;
							grid-gap:1em;
							dt {
								font-size:1.4rem;
							}
						}
					}
				}
			}
		}
	}
	
}