:root {
	--mdaform-invalid-bg: #ffe3e3;
	--mdaform-invalid-color: #e00000;
	--mdaform-valid-bg: #f4fff4;
	--mdaform-valid-color: #00a03d;
	--mdaform-loading-bg: rgb(255 255 255 / 0.8);
	--mdaform-loading-color: #514b82;
	--mdaform-scroll-margin: 0;
}

:target {
	scroll-margin-top: var(--mdaform-scroll-margin);
}

/* body {
    background: #f5f5f5;
    color: #000000;
    font-family: YuGothic, AdjustedYuGothic, "Yu Gothic", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    line-height: 1.5;
    line-break: strict;
    word-break: normal;
    overflow-wrap: anywhere;
}

textarea {
    display: block;
}

fieldset {
    margin: 0;
    padding: 0;
    border: none;
}

legend {
    clip: rect(1px, 1px, 1px, 1px);
    position: absolute !important;
    white-space: nowrap;
    height: 1px;
    width: 1px;
    overflow: hidden;
} */

input:is([name="your-name-required"], [name="your-email-required"]) {
	display: none !important;
}

/* [hidden] {
    display: none !important;
} */

.mdaform-wrapper {
	padding: 5%;
}

.mdaform-container {
	max-width: 840px;
	margin: 0 auto;
	padding: 2% 4%;
	background: #fff;
	border-radius: 7px;
	box-shadow: 0 0 30px rgba(0, 0, 0, 0.05);
}

@media (max-width: 767px) {
	.mdaform-container {
		padding: 20px;
	}
}

.mdaform-step-flow {
	margin: 0 0 30px;
	padding: 0;
	list-style: none;
	display: flex;
	border: 1px solid #000;
}

.mdaform-step-flow__item {
	flex: auto;
	padding: 10px;
	text-align: center;
}

.mdaform-step-flow__item:not(:first-child) {
	border-left: 1px solid #000;
}

.mdaform-step-flow__item[aria-current="step"] {
	background: #000;
	color: #fff;
}

.mdaform-table {
	display: block;
}

.mdaform-table__body {
	display: block;
}

.mdaform-table__tr {
	display: grid;
	grid-template-columns: 0.5fr 1fr;
	border-bottom: 1px solid #f5f5f5;
}

@media (max-width: 767px) {
	.mdaform-table__tr {
		display: block;
		border: none;
	}
}

.mdaform-table__th,
.mdaform-table__td {
	padding: 20px 10px;
	text-align: left;
}

.mdaform-table__th {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 0 10px;
	align-items: center;
	align-content: center;
	padding-left: 0;
	font-weight: bold;
}

@media (max-width: 767px) {
	.mdaform-table__th {
		padding: 0 0 5px;
		border-bottom: 3px solid #000;
	}
}

.mdaform-table__td {
	display: block;
	padding-right: 0;
}

@media (max-width: 767px) {
	.mdaform-table__td {
		padding-inline: 0;
	}
}

.mdaform-label {
	display: inline-block;
}

.mdaform-text,
.mdaform-textarea,
.mdaform-select {
	max-width: 100%;
	margin: 0;
	padding: 10px 15px;
	border: 1px solid #ccc;
	border-radius: 4px;
	transition: all 0.2s;
}

:is(.mdaform-text, .mdaform-textarea, .mdaform-select)[aria-invalid="true"] {
	background: var(--mdaform-invalid-bg);
}

.mdaform-textarea {
	width: 100%;
}

.mdaform-buttons {
	margin: 0;
	padding: 40px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
}

@media (max-width: 767px) {
	.mdaform-buttons {
		padding: 20px;
	}
}

.mdaform-back-button,
.mdaform-send-button {
	position: relative;
	display: block;
	width: 300px;
	max-width: 100%;
	padding: 15px;
	background: #000;
	font-size: 18px;
	font-weight: bold;
	letter-spacing: 0.1em;
	color: #fff;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	transition: all 0.2s;
}

:is(.mdaform-back-button, .mdaform-send-button)::after {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	width: 8px;
	height: 8px;
	margin: auto;
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
	backface-visibility: hidden;
}

:is(.mdaform-back-button, .mdaform-send-button):disabled {
	background: #999;
	cursor: not-allowed;
}

:is(.mdaform-back-button, .mdaform-send-button):not(:disabled):hover {
	opacity: 0.5;
}

.mdaform-back-button::after {
	left: 10px;
	transform: rotate(-135deg);
}

.mdaform-send-button::after {
	right: 10px;
	transform: rotate(45deg);
}

.mdaform-icon {
	display: inline-block;
}

.mdaform-icon[data-required] {
	width: 35px;
	font-size: 10px;
	padding: 4px;
	border-radius: 2px;
	line-height: 1.2;
	vertical-align: 0.2em;
	text-align: center;
	transition: all 0.2s;
	background: #eee;
}

.mdaform-icon[data-required="true"] {
	background: var(--mdaform-invalid-color);
	color: #fff;
}

.mdaform-icon[data-invalid="false"] {
	background: var(--mdaform-valid-color);
	color: #fff;
}

.mdaform-icon[data-required="false"] {
	visibility: hidden;
}

.mdaform-icon[data-required="false"]::before {
	content: "任意";
}

.mdaform-icon[data-required="true"]::before {
	content: "必須";
}

.mdaform-icon[data-invalid="false"]::before {
	content: "OK";
}

.mdaform-group {
	transition: all 0.2s;
}

.mdaform-group[data-invalid="true"] {
	padding: 10px 15px;
	background: var(--mdaform-invalid-bg);
}

.mdaform-message {
	display: none;
}

.mdaform-message[data-invalid="true"] {
	display: block;
	color: var(--mdaform-invalid-color);
	margin: 10px 0 0;
	font-size: 12px;
	line-height: 1.4;
}

.mdaform-message[data-invalid="true"]::before {
	content: "❌ ";
}

.mdaform-errorlist {
	margin: 0 0 30px;
	padding: 15px 20px 15px calc(20px + 1.3em);
	border: 1px solid var(--mdaform-invalid-color);
	color: var(--mdaform-invalid-color);
}

@keyframes loading-1 {
	0% {
		clip-path: polygon(
			50% 50%,
			0 0,
			50% 0%,
			50% 0%,
			50% 0%,
			50% 0%,
			50% 0%
		);
	}
	12.5% {
		clip-path: polygon(
			50% 50%,
			0 0,
			50% 0%,
			100% 0%,
			100% 0%,
			100% 0%,
			100% 0%
		);
	}
	25% {
		clip-path: polygon(
			50% 50%,
			0 0,
			50% 0%,
			100% 0%,
			100% 100%,
			100% 100%,
			100% 100%
		);
	}
	50% {
		clip-path: polygon(
			50% 50%,
			0 0,
			50% 0%,
			100% 0%,
			100% 100%,
			50% 100%,
			0% 100%
		);
	}
	62.5% {
		clip-path: polygon(
			50% 50%,
			100% 0,
			100% 0%,
			100% 0%,
			100% 100%,
			50% 100%,
			0% 100%
		);
	}
	75% {
		clip-path: polygon(
			50% 50%,
			100% 100%,
			100% 100%,
			100% 100%,
			100% 100%,
			50% 100%,
			0% 100%
		);
	}
	100% {
		clip-path: polygon(
			50% 50%,
			50% 100%,
			50% 100%,
			50% 100%,
			50% 100%,
			50% 100%,
			0% 100%
		);
	}
}

@keyframes loading-2 {
	0% {
		transform: scaleY(1) rotate(0deg);
	}
	49.99% {
		transform: scaleY(1) rotate(135deg);
	}
	50% {
		transform: scaleY(-1) rotate(0deg);
	}
	100% {
		transform: scaleY(-1) rotate(-135deg);
	}
}

.mdaform-loading {
	width: 100%;
	height: 100%;
	max-width: 100%;
	max-height: 100%;
	padding: 0;
	border: none;
	background: none;
}

.mdaform-loading::backdrop {
	background: var(--mdaform-loading-bg);
}

.mdaform-loading::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	translate: -50% -50%;
	width: 50px;
	aspect-ratio: 1;
	border-radius: 50%;
	border: 8px solid var(--mdaform-loading-color);
	animation:
		loading-1 0.8s infinite linear alternate,
		loading-2 1.6s infinite linear;
}

.mdaform-widget {
	width: fit-content;
	margin: 30px auto 0;
}