@charset "utf-8";

#contact{
	.wrap{
		padding-bottom: 150px;
		.contents{
            position:relative;
            &::before {
                content:'';
                display:block;
                width:1200px;
                height:1200px;
                position:absolute;
                z-index:-1;
                background:url(../img/common/bg2.png) no-repeat center center/contain;
                bottom:-300px;
                right:-600px;
            }
			.contents_inner{
				max-width: 980px;
				margin: 0 auto;
				background-color: #fff;
				padding: 90px;
				border-radius: 90px;
				&.thanks {
					border-radius:60px;
					p {
						margin:0;
						padding:3em 0;
						text-align:center;
						font-size:1.8rem;
						font-weight:500;
					}
				}
				& > p {
					margin-bottom:4em;
				}
				form{
					dl{
						display: grid;
						grid-template-columns: 14em 1fr;
						align-items:center;
						font-size:1.6rem;
						margin-bottom:40px;
						dt{
							.red{
								color: #ff0000;
							}
						}
						dd{
							line-height:1.5;
							input, textarea{
								width: 100%;
								border:1px solid #cccccc;
								border-radius:6px;
								padding:1em;
								&::placeholder {
									color:#cccccc;
								}
							}
							textarea {
								height:10em;
							}
							&.type{
								input{
									height: 1.5em;
									width: 1.5em;
									margin-right: 0.3em;
									margin-bottom: 0.2em;
								}
							}
							.zipcode{
								input{
									width: 10em;
									margin-bottom: 1em;
								}
								.note {
									font-size:1.4rem;
								}
							}
							textarea{
								width: 100%;
							}
							.wpcf7-not-valid-tip {
								margin-top: .5em;
							}
						}
					}
					.btn{
						text-align: center;
						margin-top:60px;
						input{
							padding: 1.5em;
							width: 20em;
							border-radius: 50px;
							border: none;
							&.wpcf7-previous {
								padding-right:0;
								padding-left:0;
							}
							&.submit {
								background-color: #7ABB3F;
								background:url(../img/common/arrow_green_white.png) no-repeat right 1em center/auto 50% #7ABB3F;;
								color: #fff;
							}
						}
					}
				}
				.confirm {
					form {
						dl {
							border-bottom:3px dotted #cccccc;
							padding-bottom:1em;
							margin-bottom:1em;
							dt {
								font-weight:600;
							}
						}
					}
				}
			}
		}
	}
}



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

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

	#contact{
		.wrap{
			padding-bottom: 120px;
			.contents{
				.contents_inner{
					padding: 50px;
					border-radius: 60px;
				}
			}
		}
	}
	
}

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

	#contact{
		.wrap{
			padding-bottom: 60px;
			.contents{
	            &::before {
	                width:600px;
	                height:600px;
	                bottom:-150px;
	                right:-300px;
	            }
				.contents_inner{
					padding: 30px 20px;
					border-radius: 30px;
					&.thanks {
						border-radius:30px;
						p {
							padding:2em 0;
							font-size:1.5rem;
						}
					}
					& > p {
						margin-bottom:2em;
					}
					form{
						dl{
							grid-template-columns: 1fr;
							font-size:1.4rem;
							margin-bottom:20px;
							dt {
								margin-bottom:1em;
							}
							dd{
								input, textarea{
									font-size:16px;
									padding:.66em;
								}
								&.type{
									input{
										height: 1em;
										width: 1em;
										margin-right: 0.1em;
									}
								}
								.zipcode{
									display:flex;
									align-items:center;
									column-gap:.5em;
									input{
										width: 8em;
										margin-bottom: 0;
									}
									.note {
										font-size:1.2rem;
									}
									& + span {
										display:block;
										padding-top:1em;
									}
								}
								textarea{
									width: 100%;
									padding:.66em;
								}
							}
						}
						.btn{
							margin-top:30px;
							display:flex;
							align-items:center;
							justify-content:center;
							gap:1em;
							input{
								padding: 1.0em;
								width: 10em;
								padding-right:2em;
							}
							.wpcf7-spinner {
								position:absolute;
								left:50%;
								bottom:0;
								transform:translate(-50%,0%);
								margin:0;
							}
						}
					}
	
				}
			}
		}
	}
	
}