.mw_wp_form {
	width: 100%;
	max-width: var(--wp--custom--container--lv-0);
	margin-block-start: var(--wp--preset--spacing--60);
	margin-inline-start: auto;
	margin-inline-end: auto;

	.flow {
		display: flex;
		align-items: center;
		height: 64px;
		font-weight: 600;
		font-size: var(--wp--preset--font-size--large);
		list-style: none;

		li {
			display: flex;
			flex: 1;
			align-items: center;
			justify-content: center;
			height: 100%;
			margin-block-start: 0;
			padding-block-start: 0.5rem;
			padding-block-end: 0.5rem;
			padding-inline-start: 0.5rem;
			padding-inline-end: 0.5rem;
			letter-spacing: 0.2rem;
			text-align: center;
			border: 1px solid var(--wp--preset--color--border);

			&:nth-of-type(1) {
				position: relative;

				&::after {
					position: absolute;
					inset-block-start: 50%;
					inset-inline-end: 0;
					inset-inline-start: 100%;
					border-color: transparent transparent transparent var(--wp--preset--color--secondary);
					border-style: solid;
					border-width: 31px 0 31px 25px;
					transform: translateY(-50%);
					content: "";
				}
			}

			&.active {
				color: var(--wp--preset--color--white);
				background-color: var(--wp--preset--color--secondary);
			}
		}
	}

	.horizontal-item {
		margin-block-start: 0;

		+ .horizontal-item {
			margin-inline-start: 0;
		}
	}

	.mwform-radio-field-text {
		margin-block-start: 0;
	}

	.required {
		display: inline-flex;
		align-items: center;
		margin-inline-start: 0.5rem;
		padding-block-start: 0.5rem;
		padding-block-end: 0.5rem;
		padding-inline-start: var(--wp--preset--spacing--20);
		padding-inline-end: var(--wp--preset--spacing--20);
		color: var(--wp--preset--color--white);
		font-size: var(--wp--preset--font-size--small);
		line-height: 1;
		background-color: var(--wp--preset--color--secondary);
		border-radius: 3px;

		+ table,
		& + dl {
			margin-block-start: var(--wp--preset--spacing--20);
		}
	}

	.error {
		display: inline-block;
		/* margin-block-start : .5rem; */
		padding-block-start: 0.2rem;
		padding-block-end: 0.2rem;
		padding-inline-start: 0.5rem;
		padding-inline-end: 0.5rem;
		color: var(--wp--preset--color--white);
		font-size: var(--wp--preset--font-size--small);
		background-color: var(--wp--preset--color--required);
		border-radius: 3px;
	}

	.error-box {
		margin-block-start: 0;
	}

	.message {
		p {
			display: inline-flex;
			align-items: center;
		}

		.required {
			margin-inline-end: 0.5rem;
			margin-inline-start: 0;
		}

		+ .form {
			margin-block-start: var(--wp--preset--spacing--20);
		}
	}

	.form {
		width: 100%;
		border-collapse: collapse;

		tr {
			+ tr {
				border-block-start: 1px solid var(--wp--preset--color--white);
			}
		}

		th,
		td {
			padding-block-start: var(--wp--preset--spacing--20);
			padding-block-end: var(--wp--preset--spacing--20);
			padding-inline-start: var(--wp--preset--spacing--20);
			padding-inline-end: var(--wp--preset--spacing--20);
			text-align: start;
			background-color: var(--wp--preset--color--light-01);

			@media (width < 768px) {
				display: block;
				border: 0;
			}
		}

		tbody {
			tr {
				th {
					width: 30%;
					font-weight: 600;
					vertical-align: middle;
					background-color: var(--wp--preset--color--alto-05);

					& + td {
						margin-block-start: 0;
					}

					@media (width < 768px) {
						width: 100%;
						margin-block-start: 0.5rem;
					}
				}

				&:focus-within {
					th,
					td {
						background-color: rgba(var(--wp--preset--color--primary), 0.1);
					}
				}
			}
		}

		+ .submit {
			margin-block-start: var(--wp--preset--spacing--50);
		}
	}

	/*フォームのパーツ */
	.form {
		input,
		select,
		textarea {
			width: 100%;
			padding-block-start: 0.5rem;
			padding-block-end: 0.5rem;
			padding-inline-start: 0.5rem;
			padding-inline-end: 0.5rem;
			font-size: var(--wp--preset--font-size--normal);
			border: 1px solid var(--wp--preset--color--border);
			border-radius: 3px;

			@media (width < 768px) {
				box-sizing: border-box;
				width: 100%;
			}
		}

		select {
			width: 100%;
			background-color: var(--wp--preset--color--white);
			background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20d%3D%22M256%20294.1L383%20167c9.4-9.4%2024.6-9.4%2033.9%200s9.3%2024.6%200%2034L273%20345c-9.1%209.1-23.7%209.3-33.1.7L95%20201.1c-4.7-4.7-7-10.9-7-17s2.3-12.3%207-17c9.4-9.4%2024.6-9.4%2033.9%200l127.1%20127z%22%2F%3E%3C%2Fsvg%3E");
			background-repeat: no-repeat;
			background-position: right center;
			background-size: 1.5rem;
			background-origin: content-box;
			appearance: none;

			@media (width < 768px) {
				padding-block-start: 5px;
				padding-block-end: 5px;
				padding-inline-start: 10px;
				padding-inline-end: 10px;
			}
		}

		textarea {
			width: 100%;
		}

		h2 {
			display: inline-flex;
			align-items: center;
			margin-block-start: 0;
			font-weight: 600;
			font-size: var(--wp--preset--font-size--large);

			+ p {
				margin-block-start: 0.5rem;
			}

			+ .checkbox {
				margin-block-start: 0.5rem;
			}

			+ .radio {
				margin-block-start: 0.5rem;
			}

			+ .file {
				margin-block-start: 0.5rem;
			}
		}

		* {
			+ h2 {
				margin-block-start: var(--wp--preset--spacing--40);
			}
		}

		p {
			+ p {
				margin-block-start: 0.5rem;
			}
		}

		.mwform-tel-field {
			display: flex;
			align-items: center;

			input {
				width: auto;

				@media (width < 768px) {
					width: 30%;
				}
			}
		}

		.date {
			display: flex;
			margin-block-start: 0;

			select {
				margin-block-start: 0;
				margin-inline-start: 10px;
			}

			+ h2 {
				margin-block-start: var(--wp--preset--spacing--20);
			}
		}

		.checkbox {
			display: grid;
			grid-gap: 10px;
			grid-template-columns: repeat(3, 1fr);

			+ h2 {
				margin-block-start: var(--wp--preset--spacing--20);
			}

			@media (width < 768px) {
				grid-template-columns: repeat(2, 1fr);
			}
		}

		.file {
			display: flex;
			align-items: flex-start;

			+ .file {
				margin-block-start: 0.5rem;
			}

			.mwform-file-delete {
				display: flex;
				align-items: center;
				align-self: center;
				height: 100%;
				margin-block-start: 0;
				padding-block-start: 0.5rem;
				padding-block-end: 0.5rem;
				padding-inline-start: var(--wp--preset--spacing--20);
				padding-inline-end: var(--wp--preset--spacing--20);
				visibility: visible;
			}

			+ h2 {
				margin-block-start: var(--wp--preset--spacing--20);
			}
		}

		.mwform-checkbox-field {
			&.horizontal-item {
				label {
					display: flex;
					align-items: center;

					input {
						display: none;
						width: auto;

						&:checked {
							+ .mwform-checkbox-field-text {
								color: var(--wp--preset--color--light-01);
								background-color: var(--wp--preset--color--secondary);
								border: 1px solid var(--wp--preset--color--secondary);
							}
						}
					}

					.mwform-checkbox-field-text {
						width: 100%;
						margin-block-start: 0;
						padding-block-start: 0.5rem;
						padding-block-end: 0.5rem;
						padding-inline-start: var(--wp--preset--spacing--20);
						padding-inline-end: var(--wp--preset--spacing--20);
						text-align: center;
						border: 1px solid var(--wp--preset--color--border);
						border-radius: 5px;
						transition: 0.3s;

						&:hover {
							border: 1px solid var(--wp--preset--color--secondary);
						}
					}
				}
			}
		}

		.radio {
			display: grid;
			grid-gap: 10px;
			grid-template-columns: repeat(2, 1fr);
			max-width: fit-content;

			+ h2 {
				margin-block-start: var(--wp--preset--spacing--20);
			}
		}

		.mwform-radio-field {
			&.horizontal-item {
				label {
					display: flex;
					align-items: center;

					input {
						display: none;
						width: auto;

						&:checked {
							+ .mwform-radio-field-text {
								color: var(--wp--preset--color--light-01);
								background-color: var(--wp--preset--color--secondary);
							}
						}
					}

					.mwform-radio-field-text {
						width: 100%;
						margin-block-start: 0;
						padding-block-start: 0.5rem;
						padding-block-end: 0.5rem;
						padding-inline-start: var(--wp--preset--spacing--40);
						padding-inline-end: var(--wp--preset--spacing--40);
						text-align: center;
						border: 1px solid var(--wp--preset--color--border);
						border-radius: 5px;
					}
				}
			}
		}

		[name="user_age"] {
			width: 100px;
		}

		input[placeholder],
		textarea[placeholder] {
			&:placeholder-shown {
				color: var(--wp--preset--color--dark-03);
				text-overflow: ellipsis;
			}
		}
	}

	.submit {
		text-align: center;

		input[type="submit"] {
			display: inline-block;
			width: auto;
			padding-block-start: 0.5rem;
			padding-block-end: 0.5rem;
			padding-inline-start: var(--wp--preset--spacing--50);
			padding-inline-end: var(--wp--preset--spacing--50);
			color: #fff;
			font-size: var(--wp--preset--font-size--medium-large);
			background-color: var(--wp--preset--color--secondary);
			border: 0;
			border-radius: 5px;
			transition: 0.3s;

			&:hover {
				opacity: 0.7;
			}
		}
	}

	@media (width < 768px) {
		/* width : calc(100% - 2rem); */
	}
}