@charset "utf-8";

.content-wrap {
	margin-top: var(--header-height);
	@media screen and (min-width: 1200px) {
		margin-top: 0;
	}
}

.form-section {
	@media screen and (min-width: 1200px) {
		margin-top: 150px;
	}
	h1 {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		font-size: calc(20 / 390 * 100vw);
		font-weight: 500;
		text-align: center;
		margin: 0 auto calc(50 / 390 * 100vw);
		padding-top: calc(50 / 390 * 100vw);
		gap: calc(10 / 390 * 100vw);
		@media screen and (min-width: 1200px) {
			font-size: 30px;
			font-weight: 700;
			margin-bottom: 120px;
			padding-top: 70px;
			gap: 12px;
		}
		& span {
			font-size: calc(16 / 390 * 100vw);
			@media screen and (min-width: 1200px) {
				font-size: 20px;
			}
		}
	}
	.msg-form {
		font-size: var(--fontsize-base);
		margin-bottom: 1em;
		text-align: center;
		@media (min-width: 1200px) {
			font-size: 16px;
		}
	}
	hgroup.title-input, hgroup.title-confirm, hgroup.title-complete {
		display: none;
	}
	hgroup.title-input:has(~ .form-wrapper form[data-screen="input"]),
	hgroup.title-input:has(~ .form-wrapper form[data-screen="back"]),
	hgroup.title-input:has(~ .form-wrapper form[data-screen="invalid"]),
	hgroup.title-confirm:has(~ .form-wrapper form[data-screen="confirm"]),
	hgroup.title-complete:has(~ .form-wrapper form[data-screen="complete"]) {
		display: block;
	}
	.form-wrapper {
		width: calc(350 / 390 * 100vw);
		margin: 0 auto;
		@media screen and (min-width: 1200px) {
			max-width: 700px;
			.smf-form {
				display: flex;
				flex-wrap: wrap;
				gap: 28px;
			}
			.smf-item {
				width: 100%;
				&.form-item-w50 {
					width: calc(50% - 14px);
				}
			}
		}
		&:has( .smf-system-error-content) {
			max-width: 1200px;
			padding-top: calc(30 / 390 * 100vw);
			@media screen and (min-width: 1200px) {
				padding-top: 0;
			}
			.smf-form {
				display: flex;
				justify-content: center;
				.smf-button-control {
					margin-inline: auto;
					@media screen and (min-width: 1200px) {
						margin-inline: 0!important;
					}
				}
			}
		}
		.smf-item__label__text {
			font-size: calc(16 / 390 * 100vw);
			font-weight: 500;
			@media screen and (min-width: 1200px) {
				font-size: 16px;
			}
		}
		input[type="text"],
		input[type="email"],
		input[type="tel"],
		select,
		textarea {
			width: 100%;
			padding: calc(8 / 390 * 100vw);
			font-size: calc(14 / 390 * 100vw);
			border: 1px solid #282828;
			border-radius: 5px;
			box-sizing: border-box;
			margin-bottom: calc(15 / 390 * 100vw);
			resize: vertical;
			@media screen and (min-width: 1200px) {
				font-size: 16px;
				padding: 10px;
				margin-bottom: 0;
			}
		}
		input[type="radio"],
		input[type="checkbox"] {
			border: 1px solid #282828;
			margin-top: 0;
			width: 22px;
			height: 22px;
			position: relative;
			top: calc(-2 / 390 * 100vw);
			@media screen and (min-width: 1200px) {
				top: 0;
			}
		}
		.smf-file-control {
			width: 100%;
			padding: calc(8 / 390 * 100vw);
			font-size: calc(14 / 390 * 100vw);
			border: 1px solid #9a9a9a;
			box-sizing: border-box;
			margin-bottom: calc(15 / 390 * 100vw);
			resize: vertical;
			@media screen and (min-width: 1200px) {
				font-size: 16px;
				padding: 10px;
				margin-bottom: 0;
			}
		}
		.form-files {
			border: 1px solid #9a9a9a;
		}
		.smf-checkboxes-control {
			margin-bottom: 0;
		}
		.smf-radio-button-control,
		.smf-checkbox-control {
			gap: 0.9em;
			margin-top: calc(16 / 390 * 100vw);
			@media screen and (min-width: 1200px) {
				margin-top: 20px;
			}
		}
		.form-privacy {
			margin-top: calc(50 / 390 * 100vw);
			font-size: calc(16 / 390 * 100vw);
			@media screen and (min-width: 1200px) {
				margin-top: 120px;
				font-size: 20px;
			}
			.smf-checkboxes-control {
				margin-bottom: 0;
			}
			.smf-item__controls {
				display: flex;
				flex-direction: column;
				justify-content: center;
				text-align: center;
			@media screen and (min-width: 1200px) {
				flex-direction: row;
				align-items: baseline;
				gap: 10px;
			}
			}
			& a {
				color: #009cdf;
			}
		}
		@media screen and (min-width: 1200px) {
			.smf-action {
				display: flex;
				justify-content: center;
				gap: 40px;
			}
		}
		.smf-button-control {
			display: block;
			width: calc(300 / 390 * 100vw);
			margin: calc(30 / 390 * 100vw) auto 0;
			@media screen and (min-width: 1200px) {
				width: 500px;
				margin: 50px auto 0;
			}
		}
		.smf-button-control__control {
			background-image: none;
			background-color: var(--text-green);
			color: #fff;
			border: 2px solid var(--text-green);
			padding: calc(10 / 390 * 100vw);
			font-size: calc(18 / 390 * 100vw);
			font-weight: 500;
			letter-spacing: 0.1em;
			cursor: pointer;
			width: 100%;
			height: calc(60 / 390 * 100vw);
			border-radius: calc(30 / 390 * 100vw);
			transition: background-color 0.3s ease;
			display: flex;
            justify-content: center;
            align-items: center;
			@media screen and (min-width: 1200px) {
				padding: 12px;
				font-size: 22px;
				font-weight: 700;
				height: 80px;
				border-radius: 40px;
			}
			&:hover {
				background-color: #fff;
				color: var(--text-green);
			}
		}

		.smf-item__label__text {
			position: relative;
		}
		.smf-item:has(.smf-item__col--controls *[data-validations~="required"]) .smf-item__col--label .smf-item__label__text::after {
			 content: '【必須】';
			 color:  #f24040;
			 display: inline-block;
			 font-size: 16px;
			 font-weight: 500;
			 padding-left: 0.6em;
		}
		form[data-screen="confirm"] {
			.smf-item:has(.smf-placeholder[data-name="family-name"]),
			.smf-item:has(.smf-placeholder[data-name="first-name"]),
			.smf-item:has(.smf-placeholder[data-name="family-name-kana"]),
			.smf-item:has(.smf-placeholder[data-name="first-name-kana"]) {
				display: none;
			}
		}
		form[data-screen="confirm"],
		form[data-screen="complete"] {
			.smf-form {
				gap: 0;
			}
			.smf-item {
				border: 1px solid #a7a7a7;
				padding: calc(10 / 390 * 100vw);
				@media screen and (min-width: 1200px) {
					display: flex;
					padding: 30px 45px;
					&.form-item-w50 {
						width: 100%;
					}
					.smf-item__col--label {
						width: 30%;
						flex-shrink: 0;
					}
					.smf-item__col--controls {
						width: 70%;
						flex-shrink: 0;
						padding-left: 1em;
					}
				}
			}
			.smf-item__label__text::after,
			.form-privacy {
				display: none!important;
			}
			.smf-button-control__control[data-action="back"] {
				background-color: #fff;
				border: 2px solid var(--text-green);
				color: var(--text-green);
				margin-top: calc(40 / 390 * 100vw);
				@media screen and (min-width: 1200px) {
					margin-top: 0;
				}
				&:hover {
					background-color: var(--text-green);
					color: #fff;
				}
			}
			.smf-button-control {
				margin-left: auto!important;
				@media screen and (min-width: 1200px) {
					margin-top: 120px;
				}
			}
		}
		form[data-screen="complete"] {
			.smf-button-control {
				margin-top: calc(50 / 390 * 100vw);
				@media screen and (min-width: 1200px) {
					width: 380px;
					margin-top: 120px;
				}
			}
		}
		form[data-screen="back"] {
			.smf-item:has(.smf-placeholder:empty) {
				display: none;
			}
		}
	}
}

/* 各種お問い合わせ */
.form .form-section {
	h1 {
		font-size: calc(24 / 390 * 100vw);
		margin: 0 auto calc(22 / 390 * 100vw);
		@media screen and (min-width: 1200px) {
			font-size: 30px;
			margin-bottom: 60px;
		}
	}
	.msg-form {
		font-size: var(--fontsize-base);
		margin-bottom: 1em;
		text-align: center;
		@media (min-width: 1200px) {
			font-size: 20px;
		}
	}
	.form-list-wrapper {
		width: calc(350 / 390 * 100vw);
		margin: calc(60 / 390 * 100vw) auto 0;
		@media (min-width: 1200px) {
			width: 926px;
			margin-top: 60px;
		}
	}
	.form-list {
		display: flex;
		flex-direction: column;
		gap: calc(20 / 390 * 100vw);
		@media (min-width: 1200px) {
			flex-direction: row;
			gap: 25px;
		}
	}
	.form-list-item {
		width: 100%;
		@media (min-width: 1200px) {
			width: calc((100% - 25px) / 2);
		}
	}
	.form-list-btn {
		display: block;
		border: 2px solid var(--text-base);
		border-radius: calc(15 / 390 * 100vw);
		aspect-ratio: 35 / 12;
		padding: calc(30 / 390 * 100vw) calc(17 / 390 * 100vw);
		position: relative;
		box-shadow: 2px 2px 3px 0px rgba(212, 212, 212, 1);
		transition: 0.4s ease;
		text-decoration: none;
		color: var(--text-base);
		@media (min-width: 1200px) {
			border-radius: 15px;
			aspect-ratio: 45 / 13;
			padding: 32px 25px;
		}
		&::before,
		&::after {
			content: '';
			display: block;
			position: absolute;
			bottom: calc(18 / 390 * 100vw);
			right: calc(17 / 390 * 100vw);
			width: calc(27 / 390 * 100vw);
			height: calc(27 / 390 * 100vw);
			background: url('../img/form/btn_fill_black.svg') no-repeat center;
			background-size: contain;
			transition: 0.4s ease;
			@media (min-width: 1200px) {
				bottom: 20px;
				right: 19px;
				width: 27px;
				height: 27px;
			}
		}
		&::before {
			background: url('../img/form/btn_stroke_black.svg') no-repeat center;
			background-size: contain;
			z-index: 0;
		}
		&::after {
			background: url('../img/form/btn_fill_black.svg') no-repeat center;
			background-size: contain;
			z-index: 1;
		}
		&:hover {
			transform: translate(2px, 2px);
			box-shadow: 0px 0px 0px 0px rgba(212, 212, 212, 1);
			&::after {
				opacity: 0;
			}
		}
		& h2 {
			font-size: calc(18 / 390 * 100vw);
			font-weight: 500;
			@media (min-width: 1200px) {
				font-size: 20px;
				font-weight: 700;
			}
		}
		& p {
			font-size: calc(14 / 390 * 100vw);
			font-weight: 400;
			margin-top: calc(15 / 390 * 100vw);
			@media (min-width: 1200px) {
				font-size: 14px;
				margin-top: 24px;
			}
		}
	}
	.link-list-wrapper {
		width: calc(350 / 390 * 100vw);
		margin: calc(60 / 390 * 100vw) auto 0;
		@media (min-width: 1200px) {
			width: 926px;
			margin-top: 120px;
		}
		& > p {
			font-size: var(--fontsize-base);
			line-height: 1.625;
			text-align: center;
			@media (min-width: 1200px) {
				font-size: 20px;
			}
		}
	}
	.link-list {
		display: flex;
		flex-direction: column;
		gap: calc(20 / 390 * 100vw);
		margin-top: calc(20 / 390 * 100vw);
		@media (min-width: 1200px) {
			flex-direction: row;
			gap: 25px;
			margin-top: 60px;
		}
	}
	.link-list-item {
		width: 100%;
		@media (min-width: 1200px) {
			width: calc((100% - 25px) / 2);
		}
	}
	.link-list-btn {
		width: 100%;
		height: calc(85 / 390 * 100vw);
		border-radius: calc(85 / 390 * 100vw);
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		color: #fff;
		text-decoration: none;
		transition: 0.4s ease;
		&.tel-btn {
			background-color: #d64e4e;
			& p {
				font-size: calc(26 / 390 * 100vw);
				font-weight: 700;
				letter-spacing: 0.05em;
				@media (min-width: 1200px) {
					font-size: 36px;
				}
				&:first-of-type {
					position: relative;
					display: flex;
					justify-content: center;
					align-items: center;
					gap: calc(13 / 390 * 100vw);
					@media (min-width: 1200px) {
						gap: 18px;
					}
					&::before {
						content: '';
						display: inline-block;
						width: calc(15 / 390 * 100vw);
						height: calc(21 / 390 * 100vw);
						background: url('../img/form/i_form_btn_tel.svg') no-repeat center;
						background-size: contain;
						position: relative;
						@media (min-width: 1200px) {
							width: 19px;
							height: 27px;
						}
					}
				}
			}
			& p ~ p {
				font-size: calc(14 / 390 * 100vw);
				font-weight: 400;
				@media (min-width: 1200px) {
					font-size: 16px;
				}
			}
		}
		&.line-btn {
			background-color: #00bd00;
			position: relative;
			& p {
				font-size: calc(20 / 390 * 100vw);
				font-weight: 700;
				letter-spacing: 0.05em;
				@media (min-width: 1200px) {
					font-size: 30px;
				}
				&:first-of-type {
					position: relative;
					&::before {
						content: '';
						display: inline-block;
						width: calc(30 / 390 * 100vw);
						height: calc(28 / 390 * 100vw);
						background: url('../img/form/i_form_btn_line.svg') no-repeat center;
						background-size: contain;
						position: absolute;
						top: calc(50% - (14 / 390 * 100vw));
						left: calc(-43 / 390 * 100vw);
						@media (min-width: 1200px) {
							width: 34px;
							height: 33px;
							top: calc(50% - 16.5px);
							left: -52px;
						}
					}
				}
			}
			&::after {
				content: '';
				display: inline-block;
				width: calc(24 / 390 * 100vw);
				height: calc(24 / 390 * 100vw);
				background: url('../img/form/btn_stroke_white.svg') no-repeat center;
				background-size: contain;
				position: absolute;
				bottom: calc(50% - (12 / 390 * 100vw));
				right: calc(30 / 390 * 100vw);
				@media (min-width: 1200px) {
					bottom: calc(50% - 13.5px);
					right: 30px;
					width: 27px;
					height: 27px;
				}
			}
		}
		@media (min-width: 1200px) {
			height: 100px;
			border-radius: 50px;
		}
		&:hover {
			opacity: 0.5;
		}
	}
}