@charset "utf-8";

html {
	font-size: 62.5%;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body {
	background-color: #efefef;
	color: #000;
	font-family:-apple-system, BlinkMacSystemFont, 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'メイリオ', 'Meiryo', 'ＭＳ ゴシック', sans-serif;
	animation: fadeIn 1s ease 0s 1 normal;
	-webkit-animation: fadeIn 1s ease 0s 1 normal;
}

@keyframes fadeIn {
	0% {opacity: 0}
	100% {opacity: 1}
}

@-webkit-keyframes fadeIn {
	0% {opacity: 0}
	100% {opacity: 1}
}

/* wrap */
.wrap {
	margin: 0 auto;
	position: relative;
	width: 100%;
}

/* login-card */
.login-card {
	background-color: #fff;
	box-shadow: 0 0 8px #cecece;
	border-radius: 8px;
	box-sizing: border-box;
	height: 400px;
	margin: 80px auto 0;
	overflow: hidden;
	width: 400px;
}
.login-card .border-box {
	border: 1px solid #dedede;
	border-radius: 8px;
	box-sizing: border-box;
	height: 390px;
	margin: 5px auto 0;
	width: 390px;
}
.login-card .border-box .logo {
	margin: 40px auto 0;
	width: 120px;
}
.login-card .border-box p {
	color: #717171;
	font-size: 1.2rem;
	letter-spacing: 0;
	line-height: 1.2rem;
	margin: 16px auto 0;
	text-align: center;
}

/* form */
.login-card .border-box form {
	margin: 32px auto 0;
	width: 240px;
}
.login-card .border-box form input[type=text],
.login-card .border-box form input[type=password] {
	border: 0;
	border-bottom: 1px solid #c9caca;
	border-radius: 0;
	box-shadow: none;
	font-size: 1.8rem;
	height: 40px;
	line-height: 1.8rem;
	margin-bottom: 16px;
	padding-top: 16px;
	text-align: center;
	width: 100%;
}
.login-card .border-box form input::placeholder {
	color: ccc;
	font-size: 1.2rem;
	font-style: italic;
}
.login-card .border-box form input:focus {
	border-bottom: 1px solid #febbbb;
}
.login-card .border-box form .flex-button-area {
	margin: 32px auto 0;
	display: flex;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
	justify-content: center;
}
.login-card .select-box {
	width: 100%;
}

.login-card .select-box select {
	width: 100%;
}