@charset "utf-8";

/*************************************************
			= default
*************************************************/

/*= container
======================================*/
#container {
	color: #333;
}
#container ul,ol {
	margin: 0;
	list-style: none;
}
#container li {
	margin: 0;
}
#container input,
#container select {
	color: #333;
}
#container a {color: #fe706f;}
#container a:link {}
#container a:visited {}
#container a:hover {text-decoration: none;}
#container a:active {}

/*************************************************
			= common
*************************************************/

/*= mainContents
======================================*/
#mainContents {
	margin: 0 auto;
	float: none;
	overflow: visible;
}

/*= topicPath
======================================*/
#mainContents #topicPath {
	width: 704px;
	margin: 0 0 10px -108px;
}
#mainContents #topicPath a {
	color: #666;
}

/*= returnPageTop
======================================*/
p.returnPageTop a {
	color: #666666;
}

/*= footer
======================================*/
#footer li {
	white-space: nowrap;
}

/*************************************************
			= module
*************************************************/

/*= heading
======================================*/
#container h4 {
	border-bottom: 1px solid #000;
	padding-bottom: 5px;
	margin-bottom: 10px;
}

/*= link
======================================*/
#container .link {
	display: inline-block;
	background: url(/img/login/ico_arrow.gif) no-repeat 0 5px;
	padding-left: 10px;
	font-weight: bold;
}

/*= font
======================================*/
#container .font-s {
	font-size: 86%;
}

/*= attention
======================================*/
#container .attention,
#container .attention-list {
	margin-left: 1em;
	text-indent: -1em;
	font-size: 86%;
}

/*= info
======================================*/
#container .info {
	width: 482px;
	background: url(/img/login/bg_info_t.gif) no-repeat right top;
	margin: 0 auto 10px;
}
#container .info p {
	min-height: 46px;
	height: auto !important;
	height: 46px;
	background: url(/img/login/bg_info_b.gif) no-repeat right bottom;
	padding: 10px 10px 10px 100px;
}

/*= error
======================================*/
#container .error {
	background-color: #ffe9e9;
	padding: 10px;
	margin-bottom: 5px;
	color: #eb000d;
	font-size: 86%;
	font-weight: bold;
}
#container .error p {
	margin-bottom: 0;
}

/*= logout
======================================*/
#logout {
	padding: 20px 20px 0;
	margin-bottom: 10px;
}
#logout h3 {
	border-left: 6px solid #eb000d;
	padding: 5px 10px;
	margin-bottom: 15px;
}
#logout p {
	font-weight: bold;
}

/*= move
======================================*/
#container .move {
	background-color: #f1f1f1;
	padding: 10px;
	text-align: center;
}
#container .move .next {
	margin-bottom: 10px;
}

/*= helpLayer02
======================================*/
#helpLayer02-bg {
	border: none;
	visibility: hidden;
}
#container .helpLayer02 {
	width: 196px;
	background: url(/img/login/bg_help-layer_t.png) no-repeat center top;
	border: none;
	margin-left: -2px;
}
#container .helpLayer02 .helpLayer02-inner {
	background: url(/img/login/bg_help-layer_b.png) no-repeat center bottom;
	padding: 3px 0 13px;
}
#container .helpLayer02 p {
	background-color: #666;
	padding: 5px 8px 5px;
	margin: 0 !important;
	color: #fff;
	font-size: 86%;
}

/*************************************************
			= layout
*************************************************/

/*= heading
======================================*/
#heading {
	width: 698px;
	background: url(/img/login/bg_header.gif) no-repeat center bottom;
	padding: 0 3px 5px;
	margin-bottom: 10px;
}
#heading:after{
	content: "";
	display: block;
	clear: both;
}
#heading h2 {
	float: left;
}
#heading p {
	margin-top: -13px;
	float: right;
}
#heading p a {
	margin-left: 3px;
	position: relative;
	top: -1px;
	font-size: 86%;
}

/*= info
======================================*/

/* info-logout */
#container #info-logout {
	margin-bottom: 60px;
}
#container #info-logout p {
	padding-top: 22px;
	padding-bottom: 0;
}

/* info-ohter-login */
#container #info-ohter-login {
	margin-bottom: 60px;
}


/*= login-area
======================================*/
#login-area {
	width: 704px;
	margin: 0 auto;
}

/*= message
======================================*/
#login-area .message {
	font-size: 86%;
	margin-bottom: 1em;
}

/*= login-area-wrap
======================================*/
#login-area .login-area-wrap {
	display: flex;
	justify-content: space-between;
}

/*= box
======================================*/
#login-area .box {
	padding: 18px 20px;
}
#login-area .box h3 {
	margin-bottom: 14px;
	line-height: 1;
}
#login-area .box h3::after {
	display: block;
	content: '';
	background: #333;
	width: 42px;
	height: 2px;
	margin: 12px 0;
}

/*= socialLogin_login
======================================*/
#login-area .socialLogin_login {
	background: #f2f2f2;
	width: 320px;
}
#login-area .socialLogin_login .socialLogin_list .item {
	display: block;
	margin-top: 12px;
}
#login-area .socialLogin_login .socialLogin_description {
	margin: 15px 0 0 1em;
	text-indent: -1em;
	font-size: 85%;
}

/*= attest
======================================*/
#attest {
	background: #f2f2f2;
	width: 370px;
}
#attest .link {
	background: url(/img/login/ico_arrow2.gif) no-repeat 0 5px;
	color: #ff7170;
}
#attest .error {
	border-left: 2px solid #eb000d;
}
#attest .entry {
}
#attest .entry li {
	margin-top: 10px;
}
#attest .entry .er {
	color: #eb000d;
}
#attest .entry li label,
#attest .entry li .term {
	display: block;
	font-size: 12px;
	line-height: 1;
	margin-bottom: 6px;
}
#attest .entry li input {
	display: block;
	border: 1px solid #808080;
	width: 100%;
	padding: 4px;
	font-size: 86%;
	box-sizing: border-box;
}
#attest .entry .er input {
	border-color: #eb000d;
	color: #222;
	background-color: #ffe9e9;
}
#attest .entry li input[type=password]{
	width: 190px;
}
#attest .entry li strong {
	display: block;
	background: #fff;
	padding: 7px 8px;
	font-size: 100%;
	line-height: 1;
}
#attest .entry .save-id {
	margin-top: 10px;
	font-size: 86%;
}
#attest .entry .save-id input {
	margin: 0 5px 0 0;
	vertical-align: baseline;
}
#attest .btn {
	position: relative;
	margin: 16px 0;
}
#attest .btn .reissue {
	position: absolute;
	top: 5px;
	left: 210px;
	font-size: 85%;
}
#attest .attention-list {
	margin-left: 1em;
	text-indent: -1em;
	font-size: 85%;
}
#attest .attention-list + .font-s {
	font-size: 85%;
}
/*
.login-ohter #attest .btn {
	width: 290px;
}
#attest .other {
	width: 216px;
	padding-bottom: 10px;
	margin: 0 auto;
}
#attest .other ul {
	width: 216px;
}
#attest .other ul:after{
	content: "";
	display: block;
	clear: both;
}
#attest .other li {
	width: 54px;
	float: left;
	text-align: center;
}
#attest .other li a {
	color: #01b0b2;
	font-size: 86%;
	font-weight: bold;
}
#attest .other li img {
	display: block;
	margin: 0 auto;
}
*/

/*= not-id
======================================*/
#not-id {
	display: table;
	border: 1px solid #cdcdcd;
	width: 100%;
	margin-top: 30px;
	box-sizing: border-box;
}
#not-id .body {
	display: table-cell;
	padding: 16px 19px;
}
#not-id .body h4 {
	background: url(/img/common/ico/beginner.png) no-repeat 0 2px;
	border: 0;
	padding: 0 0 0 16px;
}
#not-id .body .txt {
	font-size: 92%;
	margin-bottom: 4px;
}
#not-id .btn {
	display: table-cell;
	background: #f2f2f2;
	width: 240px;
	text-align: center;
	vertical-align: middle;
}
#not-id .btn .txt {
	font-size: 10px;
	line-height: 1.3;
	margin-bottom: 10px;
}
#not-id .attention {
	margin-bottom: 0;
	font-size: 11px;
}

/*= cookie
======================================*/
#cookie {
	display: none;
	width: 520px;
	background: url(/img/login/bg_modal.gif) no-repeat center top;
	padding: 12px 30px 10px;
	position: relative;
}
#cookie h5 {
	background: url(/img/login/bg_cookie_border.gif) repeat-x center bottom;
	padding: 0 10px 5px;
	margin: 0 -30px 20px;
	font-size: 114%;
}
#cookie p {
	margin-bottom: 10px;
}
#cookie .modal-close {
	position: absolute;
	top: 16px;
	right: 10px;
	cursor: pointer;
}

/*= mypage-login
======================================*/
#mypage-login .box {
	width: 363px;
	background: url(/img/login/bg_mypage-login_box_t.gif) no-repeat center top;
	margin: 0 auto 5px;
	text-align: left;
}
#mypage-login .box:after{
	content: "";
	display: block;
	clear: both;
}
#mypage-login .box p {
	background: url(/img/login/bg_mypage-login_box_b.gif) no-repeat center bottom;
	padding: 6px 6px 5px 10px;
}
#mypage-login .box a {
	float: right;
}
#mypage-login a {
	color: #333;
	font-size: 86%;
	font-weight: bold;
}

/*************************************************
			= etc
*************************************************/

/*= modal-window
======================================*/
#modal-win {
	width: 100%;
	position: absolute;
}
#modal-win-inner {
	box-shadow: 0 0 5px rgba(0, 0, 0, .25);
	margin: 0 auto;
	position: relative;
	z-index: 101;
}
#modal-bg {
	width: 100%;
	height: 100%;
	background-color: #000000;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 100;
	cursor: pointer;
}