/* CSS Document */

#main{
	margin-bottom: clamp(64px, calc(96 / 1200 * 100dvw), 96px);
}

#signup{
	display: grid;
	grid-row-gap: clamp(32px, calc(48 / 1200 * 100dvw), 48px);
	& h2{
		display: grid;
		grid-template-columns: var(--wrap);
		justify-content: center;
		padding: clamp(32px, calc(72 / 1200 * 100dvw), 72px) 0;
		background: var(--color-theme) var(--pattern) repeat center;
		color: #fff;
		font: 700 clamp(24px, calc(32 / 768 * 100dvw), 32px) "Shippori Mincho", var(--font-min);
		letter-spacing: 0.1em;
		text-align: center;
	}
	& form{
		display: contents;
	}
	#signupPrecautions,
	#signupEntry,
	#signupTerms,
	#signupSubmit,
	#signupMail{
		justify-self: center;
		width: var(--wrap);
	}
	#signupError{
		justify-self: center;
		max-width: var(--wrap);
		min-width: min(var(--wrap), 320px);
	}
}

#signupPrecautions{
	font-weight: 600;
	text-align: center;
}

#signupError{
	background: #fdf6f7;
	padding: clamp(16px, calc(24 / 1200 * 100dvw), 24px);
	border: 1px solid #d4183d;
	border-radius: 4px;
	color: #d4183d;
	z-index: 1;
	& h3{
		display: grid;
		grid-template-columns: auto 1fr;
		column-gap: 0.25em;
		font-weight: 600;
		font-size: 18px;
		&:before{
			content: "";
			aspect-ratio: 1;
			width: 1em;
			background: currentColor;
			transform: translateY(calc(0.875em - 50%));
			-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="12" x2="12" y1="8" y2="12"></line><line x1="12" x2="12.01" y1="16" y2="16"></line></svg>') no-repeat center / contain;
		}
	}
	& ul{
		display: grid;
		grid-row-gap: 4px;
		margin-top: 8px;
	}
	& li{
		position: relative;
		padding-left: 1em;
		&:before{
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			aspect-ratio: 1;
			width: 1em;
			background: currentColor;
			border-radius: 100%;
			transform: translateY(calc(0.875em - 50%)) scale(0.25);
		}
	}
}

#signupEntry{
	display: grid;
	grid-row-gap: 24px;
	padding: clamp(16px, calc(40 / 1200 * 100dvw), 40px);
	background: #fff;
	border: 1px solid #b6b6b6;
	border-radius: clamp(16px, calc(24 / 1200 * 100dvw), 24px);
	filter: drop-shadow(3px 3px 3px rgba(4, 0, 0, 0.2));
	& h3{
		position: relative;
		font-weight: 500;
		font-size: clamp(20px, calc(26 / 768 * 100dvw), 26px);
		letter-spacing: 0.08em;
		&:before{
			content: "";
			position: absolute;
			top: 0.35em;
			left: calc(0px - clamp(16px, calc(40 / 1200 * 100dvw), 40px));
			height: 1em;
			border-left: 6px solid var(--color-theme);
		}
	}
	& dt{
		font-weight: 500;
		font-size: 18px;
		letter-spacing: 0.08em;
		&.req{
			display: grid;
			grid-template-columns: auto 1fr;
			column-gap: 0.5em;
			&:before{
				content: "必須";
				align-self: start;
				padding: 0 0.5em;
				border-radius: 4px;
				background: oklch(.637 .237 25.331);
				color: #fff;
				font-size: 0.75em;
				transform-origin: left center;
				transform: translateY(calc(1.2em - 50%));
			}
			&:lang(en):before{
				content: "Required";
			}
			&:lang(zh-TW):before{
				content: "必填";
			}
		}
		&:nth-child(n+2){
			margin-top: 24px;
			padding-top: 16px;
			border-top: 1px solid #b6b6b6;
		}
	}
	& dd{
		margin-top: 8px;
	}
	& input{
		padding: 0.25em 1em;
		background: #ebebeb;
		border-color: transparent;
		border-radius: 4px;
	}
	& select{
		padding: 0.25em 1em;
		background-color: #ebebeb;
		border-color: transparent;
		border-radius: 4px;
	}
}

#signupTerms{
	display: grid;
	grid-row-gap: 24px;
	padding: clamp(16px, calc(40 / 1200 * 100dvw), 40px);
	background: #fff;
	border: 1px solid #b6b6b6;
	border-radius: clamp(16px, calc(24 / 1200 * 100dvw), 24px);
	filter: drop-shadow(3px 3px 3px rgba(4, 0, 0, 0.2));
	& h3{
		position: relative;
		font-weight: 500;
		font-size: clamp(20px, calc(26 / 768 * 100dvw), 26px);
		letter-spacing: 0.08em;
		&:before{
			content: "";
			position: absolute;
			top: 0.35em;
			left: calc(0px - clamp(16px, calc(40 / 1200 * 100dvw), 40px));
			height: 1em;
			border-left: 6px solid var(--color-theme);
		}
	}
	& h3+div{
		display: grid;
		grid-row-gap: 24px;
	}
	& h4{
		font-weight: 500;
		font-size: 18px;
		letter-spacing: 0.08em;
	}
	& ul{
		display: grid;
		grid-row-gap: 4px;
		margin-top: 8px;
	}
	& li{
		position: relative;
		padding-left: 1em;
		&:before{
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			aspect-ratio: 1;
			width: 1em;
			background: currentColor;
			border-radius: 100%;
			transform: translateY(calc(0.875em - 50%)) scale(0.25);
		}
	}
}

#signupTermsConfirmed{
	display: flex;
	justify-content: center;
	padding-top: 24px;
	border-top: 1px solid #b6b6b6;
	text-align: center;
	& label{
		font-weight: 600;
		font-size: 18px;
		letter-spacing: 0.08em;
		& input{
			pointer-events: none;
		}
	}
}

#signupSubmit{
	display: grid;
	justify-items: center;
	grid-row-gap: 16px;
	& button{
		all: unset;
		box-sizing: border-box;
		cursor: pointer;
		display: grid;
		align-items: center;
		column-gap: 1em;
		width: min(100%, 480px);
		min-height: 56px;
		background: var(--color-theme);
		border-radius: 4px;
		color: #fff;
		font-size: clamp(16px, calc(20 / 768 * 100dvw), 20px);
		text-align: center;
		letter-spacing: 0.08em;
		&#btnModify{
			order: 1;
			width: min(100%, 320px);
			background: transparent;
			border: 1px solid #b6b6b6;
			color: inherit;
			font-size: inherit;
			letter-spacing: inherit;
		}
	}
}

#signupMail{
	display: grid;
	grid-row-gap: 24px;
	padding: clamp(16px, calc(40 / 1200 * 100dvw), 40px);
	background: #fff;
	border: 1px solid #b6b6b6;
	border-radius: clamp(16px, calc(24 / 1200 * 100dvw), 24px);
	filter: drop-shadow(3px 3px 3px rgba(4, 0, 0, 0.2));
	& h3{
		position: relative;
		font-weight: 500;
		font-size: clamp(20px, calc(26 / 768 * 100dvw), 26px);
		letter-spacing: 0.08em;
		&:before{
			content: "";
			position: absolute;
			top: 0.35em;
			left: calc(0px - clamp(16px, calc(40 / 1200 * 100dvw), 40px));
			height: 1em;
			border-left: 6px solid var(--color-theme);
		}
	}
	& p{
		font-weight: 500;
		&:nth-child(n+2){
			margin-top: 1em;
		}
	}
	& h4{
		padding-top: 24px;
		border-top: 1px solid #b6b6b6;
		color: var(--color-theme);
		font-weight: 700;
		font-size: clamp(18px, calc(20 / 1200 * 100dvw), 20px);
		letter-spacing: 0.05em;
	}
	& h4+div{
		margin-top: 8px;
	}
	& ul{
		display: grid;
		grid-row-gap: 4px;
		margin-top: 16px;
	}
	& li{
		position: relative;
		padding-left: 1em;
		&:before{
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			aspect-ratio: 1;
			width: 6px;
			background: #ccc;
			border-radius: 100%;
			transform: translate(calc(0.25em - 50%), calc(0.875em - 50%));
		}
	}
}

#back{
	display: flex;
	justify-content: center;
	& a{
		display: grid;
		justify-content: center;
		align-items: center;
		column-gap: 1em;
		width: min(100%, 480px);
		min-height: 56px;
		border: 1px solid #b6b6b6;
		border-radius: 4px;
		color: inherit;
		font-weight: 600;
		text-decoration: none;
	}
}