@charset "UTF-8";

/* contact
----------------------------------------------------*/
main {
	background-color: var(--gray-02);
	padding-bottom: 18.75vw;
	@media (768px <= width) {
		padding-bottom: calc(168 * var(--vw-unit));
	}
}
.hero {
	background: var(--black-02) url(../img/bg_contact_sp.jpg) no-repeat center center/cover;
	padding-block: calc(80 * var(--vw-unit-768));
	margin-bottom: 13vw;
	@media (768px <= width) {
		background-image: url(../img/bg_contact.jpg);
		padding-block: calc(120 * var(--vw-unit));
		margin-bottom: calc(124 * var(--vw-unit));
	}
	& .innerWrap {
		max-width: calc(1240px + 80px);
		padding-inline: 40px;
		margin-inline: auto;
		& h1 {
			& img {
				width: 46.3vw;
				@media (768px <= width) {
					max-width: calc(455 * var(--vw-unit));
				}
			}
		}
	}
}
.contactWrap {
	max-width: 1240px;
	margin-inline: auto;
	& .contactFlow {
		& ul {
			display: flex;
			flex-direction: row;
			gap: 1vw;
			@media (1101px <= width) {
				gap: 1.1vw;
			}
			& li {
				padding: 1.45vw;
				width: 33%;
				background-color: var(--gray-03);
				text-align: center;
				font-size: min(2.6vw,23px);
				font-weight: bold;
				@media (880px <= width) {
					width: fit-content;
					padding-inline: 4vw;
					padding-block: 1.275em 1.125em;
					line-height: 1;
					font-size: 23px;
				}
				@media (1101px <= width) {
					padding-inline: 2.9em;
				}
				&.current {
					background-color: var(--main-color);
					color: var(--white-01);
				}
			}
		}
	}
	& .contact {
		margin-left: auto;
		margin-right: calc(50% - 50vw);
		background-color: var(--white-01);
		padding-inline: min(9.1vw,175px);
		padding-bottom: calc(196 * var(--vw-unit));
		&:has(.thanks) {
			padding-bottom: calc(122 * var(--vw-unit));

		}
		& .formWrap {
			max-width: 890px;
			padding-top: calc(72 * var(--vw-unit-768));
			@media (768px <= width) {
				padding-top: calc(98 * var(--vw-unit));
			}
			& .lead {
				margin-bottom: calc(100 * var(--vw-unit-768));
				@media (768px <= width) {
					margin-bottom: calc(110 * var(--vw-unit));
				}
				&.thanks {
					margin-bottom: 0;
					@media (768px <= width) {
						font-size: 19px;
					}
					& b {
						display: block;
						font-size: min(4.2vw,24px);
						margin-bottom: 0.6em;
						@media (768px <= width) {
							font-size: 24px;
						}
					}
				}
			}
			& .errorArea {
				border: 2px solid #aa0000;
				background-color: #fff4f4;
				margin-top: calc(-25 * var(--vw-unit-768));
				margin-bottom: calc(50 * var(--vw-unit-768));
				padding: 1.2vw;
				color: #aa0000;
				@media (768px <= width) {
					margin-top: calc(-30 * var(--vw-unit));
					margin-bottom: calc(60 * var(--vw-unit));
				}
			}
			/* 入力フォーム */
			& .contactForm {
				& dl {
					& div {
						margin-bottom: 6.67vw;
						@media (768px <= width) {
							margin-bottom: calc(42 * var(--vw-unit));
						}
						& dt {
							margin-bottom: 2.4vw;
							@media (768px <= width) {
								margin-bottom: calc(18 * var(--vw-unit));
							}
							& label {
								display: flex;
								align-items: center;
								& .hissu {
									margin-left: 1.5em;
									background-color: var(--main-color);
									color: var(--white-01);
									font-size: var(--fs-q6-13);
									padding: 0.3em 1em 0.4em;
									line-height: 1;
								}
							}
						}
						& dd {
							&.onamae {
								& p {
									display: flex;
									justify-content: space-between;
									&:first-of-type {
										margin-bottom: calc(18 * var(--vw-unit));
									}
									& input {
										width: 49%;
									}
								}
							}
							& input,& textarea {
								display: block;
								width: 100%;
								padding-block: calc(20 * var(--vw-unit));
								padding-inline: calc(27 * var(--vw-unit));
								background-color: var(--gray-02);
								font-size: var(--fs-q5-18);
								&::placeholder {
									color: #c1bcbc;
								}
							}
							& textarea {
								min-height: 16em;
							}
						}
					}
				}
				& > p {
					@media (width < 768px) {
						margin-top: calc(64 * var(--vw-unit-768));
					}
					& .submitBtn {
						display: block;
						width: 100%;
						background-color: var(--black-01);
						color: var(--white-01);
						font-size: var(--fs-q3-17);
						padding-block: 1.6em;
						&:hover {
							background-color: #4f484a;
						}
					}
				}
			}
			/* 確認フォーム */
			& .confirmForm {
				& dl {
					& > div {
						display: flex;
						flex-direction: row;
						align-items: center;
						margin-bottom: calc(30 * var(--vw-unit-768));
						@media (768px <= width) {
							margin-bottom: calc(50 * var(--vw-unit));
						}
						&.multipleLines {
							align-items: flex-start;
							@media (width < 768px) {
								display: block;
								& dt {
									margin-bottom: calc(30 * var(--vw-unit-768));
								}
							}
						}
						& dt {
							flex-basis: 14.3em;
							font-weight: bold;
						}
						& dd {
							flex: 1;
							font-size: var(--fs-q7-22);
						}
					}
				}
				& .privacypolicy {
					border-top: 1px solid var(--gray-03);
					margin-top: calc(60 * var(--vw-unit-768));
					padding-top: calc(48 * var(--vw-unit-768));
					@media (768px <= width) {
						margin-top: calc(100 * var(--vw-unit));
						padding-top: calc(48 * var(--vw-unit));
					}
					& p {
						margin-bottom: calc(10 * var(--vw-unit));;
						& label {
							cursor: pointer;
							& a {
								display: inline-block;
								text-decoration: underline;
								color: var(--black-01);
								&:hover {
									text-decoration: none;
								}
							}
							& input[type="radio"]{
								display: inline-block;
								margin-right: 0.4em;
							}
						}
					}
				}
				& > p {
					margin-top: calc(40 * var(--vw-unit-768));
					@media (768px <= width) {
						margin-top: calc(40 * var(--vw-unit));
					}
					& .submitBtn {
						display: block;
						width: 100%;
						background-color: var(--black-01);
						color: var(--white-01);
						font-size: var(--fs-q3-17);
						padding-block: 1.6em;
						&:hover {
							background-color: #4f484a;
						}
					}
					& .returnBtn {
						margin-top: 0.9em;
						display: block;
						width: 100%;
						border: 1px solid var(--black-01);
						background-color: var(--white-01);
						color: var(--black-01);
						font-size: var(--fs-q3-17);
						padding-block: 1.6em;
						&:hover {
							background-color: var(--gray-03);
						}
					}
				}
			}
		}
	}
}