@charset "utf-8";

#pagetitle {
    .pagetitle {
        h1 {
            width:150px;
            letter-spacing:.08em;
        }
    }
}

#contact {
	.wrap {
		.contents {
			h2 {
				margin-bottom:2em;
			}
			p {
				text-align:center;
				font-size:1.8rem;
				letter-spacing:.08em;
				font-weight:600;
				line-height:1.9;
				font-family: "dnp-shuei-mgothic-std", sans-serif;
                &.body {
                    font-size:2.0rem;
                    margin-bottom:4.5em;
                }
			}
			.tel {
				display:grid;
				align-items:center;
				justify-content:center;
				font-size:3.2rem;
				padding:.2em 0 3em;
				a {
					letter-spacing:.11em;
					font-weight:600;
					color:var(--color_main);
					& > span {
						font-size:6.0rem;
						letter-spacing:.08em;
						span {
							display: inline-block;
							transform: translateY(-.1em);
						}
					}
				}
			}
			.formbox {
				max-width:990px;
				margin:0 auto;
				padding-top:50px;
				dl {
					font-size:1.6rem;
					background-color:#efe5d8;
					display:grid;
					grid-template-columns:20em 1fr;
					border-radius:20px;
					overflow:hidden;
					dt {
						background-color:var(--color_main);
						color:#FFFFFF;
						padding:2.5em 1em 2.5em 2.5em;
						display:grid;
						grid-template-columns:repeat(2,auto);
						align-items:start;
						justify-content:start;
						grid-column-gap:1em;
						position:relative;
						letter-spacing:.05em;
						font-weight:600;
						span {
							background-color:#e4e6f1;
							color:var(--color_main);
							font-size:1.5rem;
							font-weight:500;
							line-height:1.4;
							padding:0 .33em;
							border-radius:4px;
						}
						&:not(:nth-last-child(2)) {
							align-items:center;
							&::after {
								content:'';
								display:block;
								width:calc(100% - 2.5em);
								border-bottom:1px dashed #FFFFFF;
								position:absolute;
								right:0;
								bottom:0;
							}
						}
					}
					dd {
						padding:2em;
						position:relative;
						display:grid;
						align-items:center;
						input {
							&[type="text"],&[type="email"],&[type="tel"],&[type="date"],&[type="number"] {
								padding:1em;
								background-color:#ffffff;
								border:none;
								width:100%;
								font-size:16px;
								border-radius:6px;
							}
						}
						textarea {
							padding:1em;
							background-color:#ffffff;
							border:none;
							width:100%;
							height:10em;
							font-size:16px;
							border-radius:6px;
						}
						.wpcf7-checkbox {
							display:flex;
							flex-wrap:wrap;
							gap:2em;
							.wpcf7-list-item {
								margin:0;
								label {
									color:var(--color_main);
									font-weight:500;
									display:flex;
									align-items:center;
									gap:.66em;
									position:relative;
									input {
										width:1.2em;
										height:1.2em;
										border-color:#FFFFFF;
										background:#FFFFFF;
										outline:none;
										-webkit-appearance: none;
										-moz-appearance: none;
										appearance: none;
										border-radius:4px;
										box-shadow:2px 2px 0 var(--color_main);
										&:checked {
											&::before {
												content:'';
												display:block;
												width:.4em;
												height:.66em;
												border-bottom:3px solid var(--color_main);
												border-right:3px solid var(--color_main);
												position:absolute;
												left:.33em;
												top:43%;
												transform:translateY(-50%) rotate(45deg);
											}
										}
									}
								}
							}
						}
						&:not(:last-child) {
							&::after {
								content:'';
								display:block;
								width:calc(100% - 2.5em);
								border-bottom:1px dashed var(--color_main);
								position:absolute;
								left:0;
								bottom:0;
							}
						}
						.wpcf7-not-valid-tip {
							font-size:1.4rem;
							font-weight:600;
							padding-top:.66em;
						}
					}
				}
				.btnbox {
					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.5rem;
						letter-spacing:.1em;
						color:#FFFFFF;
						padding:0 1.5em;
						font-weight:600;
						border:none;
						display:grid;
						justify-content:center;
						align-items:center;
						grid-gap:.66em;
						height:2.4em;
						border-radius:1.2em;
						width:auto;
						background-color: var(--color_main);
						&.wpcf7-previous {
							border:none;
							background-color:#bababa;
							color:#FFFFFF;
						}
					}
				}
				.wpcf7-spinner {
					position:absolute;
					bottom:-2em;
					transform:translate(0,0);
					margin:0;
					left:calc(50% - 12px);
					top:auto;
				}
			}
			&:has(.wpcf7-previous) {
				p {
					&.body {
						font-size:1.8rem;
						margin-bottom:0;
					}
				}
			}
			.privacy {
				padding-top:90px;
				h2 {
					margin-bottom:1.25em;
				}
				p {
					margin-bottom:2em;
				}
				.privacy_wrap {
					max-width:1000px;
					margin:0 auto;
					border-radius:20px;
					border:2px solid var(--color_main);
					background-color:#FFFFFF;
					padding:30px;
					.privacy_content {
						overflow-y:auto;
						height:340px;
						padding:40px;
						h3 {
							font-size:1.6rem;
							margin-bottom:.2em;
						}
						.detail {
							&:not(:last-child) {
								margin-bottom:30px;
							}
						}
						p {
							font-size:1.6rem;
							line-height:1.8;
							text-align:left;
							margin-bottom:0;
							font-weight:500;
							&:not(:last-child) {
								margin-bottom:1.5em;
							}
						}
						.simplebar-vertical {
							width:3px;
							background-color:#c8cce1;
							.simplebar-scrollbar {
								width: 3px;
								min-width: 3px;
								&::before {
									opacity:1!important;
									width: 3px;
									left:0;
									right:0;
									top:0;
									bottom: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 (hover:hover) {

}

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

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

@media screen and (max-width:768px) {
	
	#contact {
		.wrap {
			.contents {
				p {
					font-size:1.4rem;
	                &.body {
	                    font-size:1.4rem;
	                    margin-bottom:2.5em;
						text-align:left;
						&.thanks {
							text-align:center;
							padding-top:1em;
						}
	                }
					&.info {
						text-align:left;
					}
				}
				.tel {
					font-size:2.0rem;
					padding-bottom:2em;
					a {
						span {
							font-size:3.0rem;
						}
					}
				}
				.formbox {
					padding-top:30px;
					dl {
						font-size:1.4rem;
						grid-template-columns:1fr;
						border-radius:15px;
						dt {
							padding:1em 1.5em;
							span {
								font-size:1.3rem;
							}
							&:not(:nth-last-child(2)) {
								&::after {
									content:none;
								}
							}
						}
						dd {
							padding:1em;
							input {
								&[type="text"],&[type="email"],&[type="tel"],&[type="date"],&[type="number"] {
									padding:.66em;
									font-size:16px;
								}
							}
							textarea {
								height:6em;
								font-size:16px;
							}
							.wpcf7-checkbox {
								gap:1em;
							}
							.wpcf7-not-valid-tip {
								font-size:1.2rem;
							}
							&:not(:last-child) {
								&::after {
									content:none;
								}
							}
						}
					}
					.btnbox {
						margin-top:30px;
						input {
							font-size:1.4rem;
							&.wpcf7-previous {
								border:none;
								background-color:#bababa;
								color:#FFFFFF;
							}
						}
					}
				}
				&:has(.wpcf7-previous) {
					p {
						&.body {
							font-size:1.4rem;
							text-align:center;
						}
					}
				}
				.privacy {
					padding-top:60px;
					p {
						text-align:left;
					}
					.privacy_wrap {
						border-radius:15px;
						padding:20px;
						.privacy_content {
							height:240px;
							padding:0 5px;
							h3 {
								font-size:1.3rem;
							}
							.detail {
								&:not(:last-child) {
									margin-bottom:20px;
								}
							}
							p {
								font-size:1.2rem;
								&:not(:last-child) {
									margin-bottom:1em;
								}
							}
						}
					}
				}
			}
		}
	}
	
}