/* CSS Document */

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

#login{
	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;
	}
	#loginAccount,
	#loginPrecautions{
		justify-self: center;
		width: var(--wrap);
	}
	#loginError,
	#loginError+#loginAccount,
	#loginReservation+#loginAccount{
		margin-top: clamp(32px, calc(48 / 1200 * 100dvw), 48px);
	}
	#loginError{
		justify-self: center;
		max-width: var(--wrap);
		min-width: min(var(--wrap), 320px);
	}
	#loginAccount{
		margin-top: clamp(56px, calc(96 / 1200 * 100dvw), 96px);
	}
	#loginPrecautions{
		margin-top: clamp(32px, calc(48 / 1200 * 100dvw), 48px);
	}
}

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

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

#loginEntry{
	& dt{
		font-weight: 500;
		font-size: 18px;
		letter-spacing: 0.08em;
		&:nth-child(n+2){
			margin-top: 24px;
			padding-top: 16px;
			border-top: 1px solid #b6b6b6;
		}
	}
	& dd{
		margin-top: 8px;
		&:has([for="showPwd"]){
			display: grid;
			& input{
				grid-column: 1;
				grid-row: 1;
				padding-right: 48px;
			}
			& 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;
				&.checked{
					-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-eye-off h-4 w-4"><path d="M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49"></path><path d="M14.084 14.158a3 3 0 0 1-4.242-4.242"></path><path d="M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143"></path><path d="m2 2 20 20"></path></svg>');
				}
			}
		}
		&:has([type="checkbox"]){
			display: grid;
			justify-content: center;
			margin-top: 16px;
			& label{
				& input{
					pointer-events: none;
				}
			}
		}
		&:has([href="remind.html"]){
			margin-top: 16px;
			text-align: center;
		}
	}
	& div{
		margin-top: 16px;
		& button{
			all: unset;
			box-sizing: border-box;
			cursor: pointer;
			display: grid;
			align-items: center;
			column-gap: 1em;
			width: 100%;
			min-height: 56px;
			background: var(--color-theme);
			border-radius: 4px;
			color: #fff;
			font-size: clamp(16px, calc(20 / 768 * 100dvw), 20px);
			letter-spacing: 0.08em;
			text-align: center;
			&#btnModify{
				background: transparent;
				border: 1px solid #b6b6b6;
				color: inherit;
				font-size: inherit;
				letter-spacing: inherit;
			}
		}
	}
	& label{
		font-weight: 500;
	}
	& input{
		&[name="id"],
		&[name="pwd"]{
			padding: 0.25em 1em;
			background: #ebebeb;
			border-color: transparent;
			border-radius: 4px;
		}
	}
}

#loginRegistration{
	display: grid;
	grid-row-gap: 16px;
	padding: clamp(16px, calc(24 / 1200 * 100dvw), 24px);
	background: #ebebeb;
	border-radius: 4px;
	letter-spacing: 0.08em;
	& h4{
		font-weight: 500;
		font-size: 18px;
		letter-spacing: 0.08em;
		text-align: center;
	}
	& a{
		display: grid;
		grid-template-columns: auto auto;
		justify-content: center;
		align-items: center;
		column-gap: 0.5em;
		width: 100%;
		min-height: 48px;
		background: #c1272d;
		border-radius: 4px;
		color: #fff;
		font-weight: 500;
		letter-spacing: 0.08em;
		text-decoration: none;
		&:before{
			content: "";
			aspect-ratio: 1;
			width: 24px;
			background: currentColor;
			-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="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><line x1="19" x2="19" y1="8" y2="14"></line><line x1="22" x2="16" y1="11" y2="11"></line></svg>') no-repeat center / contain;
		}
	}
}