@charset "utf-8";

.titlewrap {
	background:url(../img/contact/mv.jpg) no-repeat center center/cover;
}

#contactform {
	.wrap {
		.contents {
			& > p {
                margin-bottom: 3em;
				text-align:center;
				&.thanks {
					text-align:center;
					margin:0;
					padding:2em 0;
				}
			}
			.contents_inner {
				background-color:#F7F7F2;
				padding:50px;
				&:not(:last-child) {
					margin-bottom:20px;
				}
				h2 {
					font-size:2.4rem;
					color:#000000;
					padding:0;
					border:none;
					text-align:center;
				}
				div[data-id="list_company"] {
					background-color:#EFEFCE;
					padding:1.5em 50px;
					margin:0 -50px;
					.caption {
						font-size:.8em;
						line-height:1;
						
					}
				}
			}
			dl {
				&.company {
					display:flex;
					align-items:center;
					dd {
						padding-left:0;
					}
				}
				&.method {
					display:flex;
					align-items:center;
					dd {
						padding-left:1em;
						transform:translateY(-.2em);
					}
				}
				&:not(:last-child) {
					margin-bottom:2em;
				}
				dt,dd {
					line-height:1.66;
				}
				dt {
					display:grid;
					grid-template-columns:4em auto 1fr;
					align-items:anchor-center;
					grid-gap:.5em;
					padding-top:.66em;
					font-weight:600;
					margin-bottom:1em;
					.req {
						background-color:#F98989;
						line-height:1;
						height:1.8em;
						color:#FFFFFF;
						display:grid;
						align-items:center;
						justify-content:center;
						border-radius:6px;
					}
					.note {
						font-size:.8em;
						padding-left:1em;
					}
				}
				dd {
					padding-left:4.5em;
					input {
						&[type="text"],&[type="email"],&[type="tel"],&[type="date"],&[type="number"] {
							padding:1em;
							background-color:#FFFFFF;
							border:1px solid #707070;
							width:100%;
							font-size:16px;
						}
					}
					select {
						padding:1em;
						font-size:16px;
					}
					textarea {
						padding:.5em;
						background-color:#FFFFFF;
						border:1px solid #707070;
						width:100%;
						height:8em;
						font-size:16px;
					}
					.wpcf7-list-item {
						margin: 0 1em 0 0;
					}
					.wpcf7-checkbox {
						display:flex;
						flex-wrap:wrap;
						gap:5px 10px;
					}
					&.zip {
						input {
							width:10em;
						}
						.note {
							margin-left:1em;
						}
					}
					&.about {
						.wpcf7-checkbox {
							display:grid;
						}
					}
					&.catalog {
						.wpcf7-checkbox {
							display:grid;
							grid-template-columns:auto 1fr;
						}
					}
					&.sample {
						p {
							margin-bottom:.66em;
						}
						.wpcf7-checkbox {
							display:flex;
							justify-content:flex-start;
							flex-wrap:wrap;
							gap:15px 10px;
							span {
								width:calc((100%/6) - 10px);
								min-width:140px;
								margin:0;
								label {
									display:block;
									&::after {
										content:'';
										display:block;
										width:100%;
										max-width:120px;
										aspect-ratio:.6666;
										margin-top:.5em;
									}
								}
								&:nth-child(1) {
									label {
										&::after {
											background:url(../img/contact/sample01.png) no-repeat center center/contain;
										}
									}
								}
								&:nth-child(2) {
									label {
										&::after {
											background:url(../img/contact/sample02.png) no-repeat center center/contain;
										}
									}
								}
								&:nth-child(3) {
									label {
										&::after {
											background:url(../img/contact/sample03.png) no-repeat center center/contain;
										}
									}
								}
								&:nth-child(4) {
									label {
										&::after {
											background:url(../img/contact/sample04.png) no-repeat center center/contain;
										}
									}
								}
								&:nth-child(5) {
									label {
										&::after {
											background:url(../img/contact/sample05.png) no-repeat center center/contain;
										}
									}
								}
								&:nth-child(6) {
									label {
										&::after {
											background:url(../img/contact/sample06.png) no-repeat center center/contain;
										}
									}
								}
							}
						}
					}
					.wpcf7-form-control-wrap[data-name="customer"] {
						&:has(.chidden) {
							display:none;
						}
					}
					.wpcf7-list-item-label {
						a {
							text-decoration:underline;
							color:var(--color_main);
						}
					}
				}
				&.column {
					display:grid;
					grid-template-columns: 14em 1fr;
					align-items:center;
					dd {
						padding-left: 0;
					}
				}
			}
			.btn_box {
				position:relative;
				display:flex;
				flex-wrap:wrap;
				gap:.5em;
				flex-wrap:wrap;
				align-items:center;
				justify-content:center;
				margin-top:50px;
				input {
					font-size:1.6rem;
					color:#FFFFFF;
					padding:0 5em 0 4em;;
					font-weight:600;
					display:grid;
					border:none;
					align-items:left;
					text-align:center;
					grid-gap:.66em;
					height:3.6em;
					width:100%;
					max-width:16em;
					background:url(../img/common/arrow-white-01.svg) no-repeat right 1em center/3em auto var(--color_sub);
					&.wpcf7-previous {
						border:none;
						background-color:#bababa;
						color:#FFFFFF;
						text-align: right;
						background:url(../img/common/arrow-white-01r.svg) no-repeat left 1em center/3em auto #bababa;
					}
				}
			}
			.wpcf7-spinner {
				position:absolute;
				bottom:-2em;;
				top:auto;
			}
		}
	}
	&.thanks {
		.wrap {
			.contents {
				max-width:1100px;
				p {
					margin-bottom:1em;
				}
				.btn {
					grid-template-columns:.8em 1fr;
					padding-right:1.5em;
					margin:1em auto 0;
					img {
						transform:rotate(180deg);
					}
				}
			}
		}
	}
	&.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) {
	
}

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

	#contactform {
		.wrap {
			.contents {
				& > p {
	                margin-bottom: 1em;
					text-align:left;
				}
				.contents_inner {
					padding:20px;
					&:not(:last-child) {
						margin-bottom:15px;
					}
					h2 {
						font-size:2.0rem;
						margin-bottom:.5em;
					}
					div[data-id="list_company"] {
						padding:1.5em 20px;
						margin:0 -20px;
					}
					&.confirm {
						dd {
							background-color:#FFFFFF;
							padding:.5em;
						}
					}
				}
				dl {
					&:not(:last-child) {
						margin-bottom:1em;
					}
					dt {
						grid-template-columns:auto 1fr;
						grid-gap:.25em;
						margin-bottom:.66em;
						&:has(.wpcf7-form-control-wrap) {
							.req {
								grid-area:unset;
							}
						}
						.req {
							padding:0 .5em;
							grid-area:1/2/2/3;
							font-size:1.2rem;
							justify-self:start;
							transform:translateY(-.1em);
						}
						.note {
							padding-left:0em;
							grid-area:2/1/3/3;
						}
					}
					dd {
						padding-left:0;
						input {
							&[type="text"],&[type="email"],&[type="tel"],&[type="date"],&[type="number"] {
								padding:.5em;
							}
						}
						select {
							padding:1em;
							font-size:16px;
						}
						textarea {
							height:6em;
						}
						&.zip {
							.note {
								font-size:.8em;
								margin-left:0;
								display:block;
								padding-top:.25em;
							}
						}
						&.catalog {
							.wpcf7-checkbox {
								grid-template-columns:1fr;
							}
						}
						&.sample {
							p {
								margin-bottom:.66em;
							}
							.wpcf7-checkbox {
								justify-content:center;
								margin:0 -10px 0 0;
								span {
									min-width:120px;
									label {
										font-size:1.4rem;
										&::after {
											max-width:100px;
										}
									}
								}
							}
						}
					}
					&.column {
						grid-template-columns:1fr;
						dd {
							padding-left: 0;
						}
					}
				}
				.btn_box {
					margin-top:30px;
					input {
						font-size:1.4rem;
					}
				}
				.wpcf7-spinner {
					position:absolute;
					bottom:-2em;;
					top:auto;
				}
			}
		}
	}
	
}