* {
	margin: 0;
	padding: 0;
}

body {
	background: #ddd;
	overflow: hidden;
	font-family: 'Noto Sans JP';
}

.container {
	height: 100vh;
	display: grid;
}

.box {
	box-shadow: 0 15px 30px #888;
	margin: auto;
	padding-bottom: 2rem;
	background: #eee;
	border-radius: 20px;
	text-align: center;
}

.box > .logo {
	border-radius: 200px;
	width: 8rem;
	margin: 1rem;
	margin-top: 4rem;
}

.box > .title {
	color: #333;
	font-family: 'Noto Sans JP';
	font-size: 1.4em;
	margin: 0 3em;
	margin-bottom: 1.5rem;
}

.box > .warning-message {
	margin: 1em;
	font-size: 0.8em;
	color: #e22;
}

.box > form > div {
	margin: 0 auto;
	margin-bottom: 1.5rem;
	width: fit-content;
	position: relative;
	color: #222;
}

.box > form > div > input,
.box > form > div > button {
	border-radius: 100px;
	border-width: 1px;
}

.box .leading {
	position: absolute;
	left: 0;
	/* text baseline: bottom; */
	height: fit-content;
	top: 50%; bottom: 0;
	transform: translateY(-50%);
}

.box > form .login-button {
	color: inherit;
	font-family: inherit;
	font-weight: 400;
	font-size: 1.2rem;
}

/* form width setting */
.box > form > div > input { width: 12rem; }
.box > form > div > button { width: 12rem; }

/* form height setting */
.box > form > div > input,
.box > form > div > button { height: 2.8rem; }
.box .leading { left: 1.4rem; } /* 1/2 of height */

/* form left padding setting */
.box .leading { font-size: 1.25rem; }
.box > form > div > input { padding-left: calc(1rem + 1.4rem*2); }