@charset "utf-8";

/*
* CONTENTS
******************************************************/
.login{
	padding: 40px 25px;
	margin:auto;
	max-width: 500px;
    margin: auto;
}
.login__title {
    font-size: var(--font-size-lg);
    text-align: center;
    margin-bottom: 40px;
    color: #575757;
}
.login__heading {
	font-size: var(--font-size-df);
	padding: 0 0 8px 32px;
}
.login__heading::before {
	content: url(../images/common/ico-arrow-m.png);
	position: absolute;
	left: 8px;
}
.login__form {
	max-width: 340px;
    margin: auto;
}
.login__inputOuter{
	margin-bottom:40px;
}
.login__notice{
	margin-bottom: 15px;
	color: #575757;
	font-size: var(--font-size-xxs);
	padding-left:1em;
	text-indent:-1em;
	max-width: 340px;
	margin: auto;
}
.login__noticeLink:link,.login__noticeLink:visited{
	color:var(--color-secondary);
	text-decoration: underline;
}
.login__btnOuter{
	text-align: center;
}
.login__register{
	margin-top: 75px;
	text-align: center;
	padding: 60px 0 90px 0;
	background-color: #f8f8f8;
	border-top: solid #a5a5a5 1px;
	border-bottom: solid #a5a5a5 1px;
	color: #575757;
}
.login__registerText{
	margin-bottom: 15px;
	color: #575757;
	font-size: var(--font-size-df);
	line-height: 1.5;
}
@media print, screen and (min-width: 1140px) {
	.login{
		padding: 120px 0 190px 0;
		width: 550px;
	}
	.login__title {
		font-size:var(--font-size-heading);
		text-align:center;
		margin-bottom:80px;
		color: #575757;
	}
	.login__form {
		max-width: inherit;
	}
	.login__heading {
		font-size: var(--font-size-ml);
		padding: 0 0 8px 32px;
	}
	.login__notice{
		font-size: var(--font-size-df);
		max-width: inherit;
	}
}

/* BUTTON */
.login__btn{
	background-color:var(--color-secondary);
	border: solid transparent 1px;
	color:var(--color-default);
	border-radius: 30px;
	margin-top:25px;
}
.login__registerBtn {
	margin:auto;
}
.login__registerBtn a {
	border: solid #a5a5a5 2px;
	background-color: var(--color-default);
	border-radius: 30px;
	color: #575757;
	padding: 0 0 0 16px;
}
.login__registerBtn a::after {
	content: '';
	display: inline-block;
	width: 20px;
	height: 20px;
	background-image: url(../images/common/ico-external-link.jpg);
	background-size: contain;
	vertical-align: middle;
	margin: -3px 0 0 0.25em;
}
@media print, screen and (min-width: 1140px) {
	.login__registerBtn a::after {
		width: 34px;
		height: 32px;
	}
}