/* CSS Document */

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

#remind{
	display: grid;
	& 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;
	}
	#process{
		margin-top: clamp(32px, calc(48 / 1200 * 100dvw), 48px);
	}
	#remindPrecautions,
	#remindForm,
	#remindCheck,
	#remindComplete{
		justify-self: center;
		width: var(--wrap);
	}
	#remindPrecautions,
	#remindError,
	#remindForm,
	#remindCheck,
	#remindComplete{
		margin-top: clamp(32px, calc(48 / 1200 * 100dvw), 48px);
	}
	#remindError{
		justify-self: center;
		max-width: var(--wrap);
		min-width: min(var(--wrap), 320px);
	}
	#back{
		margin-top: clamp(32px, calc(48 / 1200 * 100dvw), 48px);
	}
}

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

#remindError{
	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);
		}
	}
}

#remindForm{
	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));
	& form{
		display: contents;
	}
	& 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{
		display: grid;
		margin-top: 8px;
		&:has([for="showPwd"]){
			display: grid;
			& input{
				grid-column: 1;
				grid-row: 1;
				padding-right: 48px;
			}
			& span{
				display: contents;
			}
			& button{
				grid-column: 1;
				grid-row: 1;
				width: 48px;
				aspect-ratio: 1;
				justify-self: end;
				background: #aaa;
				font-size: 0;
				-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"><path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"></path><circle cx="12" cy="12" r="3"></circle></svg>') no-repeat center / 20px;
			}
		}
	}
	& label{
		font-weight: 500;
	}
	& input{
		padding: 0.25em 1em;
		background: #ebebeb;
		border-color: transparent;
		border-radius: 4px;
	}
}

#remindSubmit{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	grid-gap: 16px 24px;
	& button{
		all: unset;
		box-sizing: border-box;
		cursor: pointer;
	}
	& a{
		text-decoration: none;
	}
	& button,
	& a{
		display: grid;
		align-items: center;
		min-width: min(100%, 240px);
		min-height: 48px;
		padding: 0 1em;
		background: var(--color-theme);
		border-radius: 4px;
		color: #fff;
		font-weight: 600;
		text-align: center;
		&#btnModify{
			background: transparent;
			border: 1px solid #b6b6b6;
			color: inherit;
		}
	}
}

#remindCheck{
	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%));
		}
	}
}

#remindComplete{
	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;
	}
}