section.mailform {
	background-image: url(./image/bg_pattern.webp);
	background-repeat: repeat-y;
	background-size: auto auto;
	background-position: 100% 0%;
	> div {
		padding: 0 3% 60px 3%;

		> div {
			background-color: #fff;
			border-radius: 20px;
			border: solid 5px #efc100;
			box-shadow: 0 0 5px rgba(0,0,0,0.5);
			overflow: hidden;
			padding: 20px;
			> div.title {
				padding-block: 30px 60px;
				> figure {
					text-align: center;
					> img {
						max-width: 100%;
						width: 55%;
						@media (width < 490px) {
							width: 80%;
						}
					}
				}
			}
			> div.step {
				max-width: 800px;
				margin-inline: auto;
				display: grid;
				grid-template-columns: repeat(3,1fr);
				> div#formStep1 {
					font-size: min(0.8rem,4.5vw);
					line-height: 1;
					color: #222;
					padding-block: 8px;
					text-align: center;
					clip-path: polygon(0 0,95% 0,100% 50%,95% 100%,0 100%);
					&.on {
						background-color: var(--color-accent);
						color: #fff;
					}
				}
				> div#formStep2 {
					font-size: min(0.8rem,4.5vw);
					line-height: 1;
					color: #222;
					padding-block: 8px;
					text-align: center;
					clip-path: polygon(0 0,95% 0,100% 50%,95% 100%,0 100%,5% 50%);
					background-color: rgba(0,0,0,0.05);
					&.on {
						background-color: var(--color-accent);
						color: #fff;
					}
				}
				> div#formStep3 {
					font-size: min(0.8rem,4.5vw);
					line-height: 1;
					color: #222;
					padding-block: 8px;
					text-align: center;
					clip-path: polygon(0 0,100% 0,100% 100%,0 100%,5% 50%);
					&.on {
						background-color: var(--color-accent);
						color: #fff;
					}
				}
			}
			> form {
				margin-top: 10px;
				margin-bottom: 0;
				> div.input {
					max-width: 800px;
					margin-inline: auto;
					display: flex;
					flex-direction: column;
					row-gap: 5px;
					> dl {
						display: grid;
						grid-template-columns: 200px 1fr;
						column-gap: 5px;
						@media (width < 810px) {
							grid-template-columns: 1fr;
						}
						&.wide {
							display: block;
						}
						> dt {
							user-select: none;
							padding-block: 5px;
							padding-inline: 8px;
							display: flex;
							align-items: start;
							justify-content: space-between;
							background-color: rgba(0,0,0,0.05);
							@media (width < 810px) {
								padding-inline: 5px;
							}
							> .item {
								font-size: 0.9rem;
								line-height: 1.3;
								color: #111;
								font-weight: 500;
								> span.expand {
									color: var(--color-accent);
									cursor: pointer;
									padding-inline: 10px;
									opacity: 0.5;
									&:hover {
										opacity: 1;
										background-color: #bbb;
									}
								}
								> br.pc {
									@media (width < 810px) {
										display: none;
									}
								}
							}
							> .require {
								font-size: 0.8rem;
								line-height: 1;
								color: var(--color-accent);
								border: solid 1px currentColor;
								text-align: center;
								padding: 1px 5px 3px 5px;
								border-radius: 3px;
								white-space: nowrap;
								&:empty {
									border: none;
								}
							}
						}
						> dd {
							> p {
								font-size: 0.9rem;
								line-height: 1.4;
								color: #222;
								@media (width < 810px) {
									font-size: min(0.8rem,4.5vw);
								}
							}
							> div.control {
								display: flex;
								column-gap: 5px;
								@media (width < 810px) {
									flex-direction: column;
								}
								> div {
									width: 100%;
									position: relative;
									&:has(> div > span.radio),
									&:has(> div > div.checkbox) {
										padding-right: 40px;
										@media (width < 810px) {
											margin-top: 3px;
										}
									}
									&.datetime {
										display: grid;
										grid-template-columns: 1fr 1fr;
										column-gap: 5px;
										> div {
											width: 100%;
											> input {
												width: 100%;
											}
										}
									}
									> div {
										display: flex;
										flex-wrap: wrap;
										gap: 3px;
										input[type="text"],
										select,
										textarea {
											width: 100%;
											transition: 0.3s;
											font-family: inherit;
										}
										textarea {
											field-sizing: content;
										}
									}
									> div[data-validate-mark] {
										position: absolute;
										top: 13px;
										right: 9px;
										width: 16px;
										height: 16px;
										background-image: url(./common/image/form_validate_none.svg);
										background-repeat: no-repeat;
										&[data-mark="ok"] {
											background-image: url(./common/image/form_validate_ok.svg);
										}
										&[data-mark="ng"] {
											background-image: url(./common/image/form_validate_ng.svg);
										}
										&[disabled="disabled"] {
											visibility: hidden;
										}
									}
								}
								> button {
									width: 200px;
								}
							}
							> div[data-validate-error] {
								position: relative;
								> div {
									position: absolute;
									left: 10px;
									top: -15px;
									font-size: 0.8rem;
									line-height: 1;
									color: #f20;
								}
							}
						}
					}
				}
				> div.privacy {
					margin-top: 15px;
					background-color: #fff;
					max-width: 800px;
					margin-inline: auto;
					padding-block: 15px;
					> p {
						font-size: 0.9rem;
						line-height: 1.8;
						color: #333;
						> a {
							text-decoration: none;
							color: #f29600;
							&:hover {
								text-decoration: underline;
							}
						}
					}
				}
				> div.consent {
					margin-top: 20px;
					text-align: center;
					> label {
						font-size: 0.9rem;
						color: #222;
						line-height: 1.4;
						cursor: pointer;
						> input {
							accent-color: var(--color-accent);
						}
					}
				}
				> div.submit {
					margin-top: 20px;
					display: flex;
					column-gap: 5px;
					> button {
						width: 100%;
						height: 3.5rem;
						border-radius: 8px;
					}
				}
			}
		}
	}
	> div {
		padding-top: 10%;
		padding-inline: 3%;
		> figure {
			max-width: 800px;
			margin-inline: auto;
			> img {
				text-align: center;
				max-width: 100%;
			}
			&:nth-of-type(2) {
				margin-top: 8%;
				padding-inline: 5%;
			}
		}
	}
}