@charset 'utf-8';

/*------------------------------------------------------------------------------
 layout
 ------------------------------------------------------------------------------*/
* {
	margin: 0;
	padding: 0;
	line-height: 1.0;
}
*, ::after, ::before {
	box-sizing: border-box;
}
html {
	font-size: 10px;
	-webkit-text-size-adjust: 100%;
}
body {
	font-size: 1.4rem;
	font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', Osaka, sans-serif;
	color: #333;
	background: #EEE;
}
a {
	color: #36C;
	text-decoration: underline;
	outline: none;
}
a:hover {
	color: #F90;
}

/*------------------------------------------------------------------------------
 wrapper
 ------------------------------------------------------------------------------*/
#wrapper {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	background: #FFF;
}
@media screen and (min-width: 481px) {
	#wrapper {
		width: 375px;
		margin: 0 auto;
		border-right: 1px solid #CCC;
		border-left: 1px solid #CCC;
	}
}

/*------------------------------------------------------------------------------
 login
 ------------------------------------------------------------------------------*/
.login header {
	display: grid;
	place-items: center;
	height: 44px;
	font-size: 1.6rem;
	font-weight: bold;
	color: #FFF;
	background: #28AAC4;
}
.login._girl header { background: #F92E7C; }
.login._staff header { background: #B68D4C; }

/*------------------------------------------------------------------------------
 form
 ------------------------------------------------------------------------------*/
.login form {
	width: 160px;
	margin: 0 auto;
}

/* input */
.login .input {
	margin: 15px 0;
}
.login .input span {
	display: block;
	font-weight: bold;
	font-family: Arial;
}
.login .input input {
	display: block;
	width: 100%;
	height: 30px;
	padding: 3px;
	font-size: 1em;
	font-family: inherit;
	border: 1px solid #7F9DB9;
	border-radius: 3px;
}

/* label */
.login label {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	margin: 20px 0;
	font-size: 92%;
	cursor: pointer;
}
.login .ck label:hover {
	color: #36C;
}

/* submit
------------------------------------------------------------------------------*/
.login .submit {
	text-align: center;
	margin: 0 auto 15px;
}
.login .submit .btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 40px;
}
.login .submit input {
	display: block;
	width: 100%;
	height: 100%;
	font-size: 1.6rem;
	font-weight: bold;
	font-family: inherit;
	color: #FFF;
	background: #61C419;
	border: none;
	border-radius: 5px;
	cursor: pointer;
}
.login .submit input:hover {
	cursor: pointer;
	opacity: 0.8;
}
.login .submit .loading {
	position: absolute;
	top: calc(50% - 15px);
	left: calc(50% - 15px);
	display: none;
	width: 30px;
	height: 30px;
	border: 3px solid rgba(35, 115, 255, 0.3);
	border-top-color: rgb(35, 115, 255);
	border-radius: 50%;
	animation: spin 1s infinite linear;
}
@keyframes spin {
	  0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}
.login .submit .btn.on input {
	opacity: 0.5;
}
.login .submit .btn.on .loading {
	display: block;
}

/*------------------------------------------------------------------------------
 footer
 ------------------------------------------------------------------------------*/
footer {
	margin-top: auto;
	display: grid;
	place-items: center;
	width: 100%;
	height: 45px;
	font-size: 92%;
	color: #FFF;
	background: #222;
}