@charset "utf-8";
/* ------- Login CSS ------- */
body{
	background-color: #ECECEC;
	-webkit-appearance: none;
}
input, button, select, textarea { -webkit-appearance: none;}

#loginWrap {
	width: 800px;	
	margin: 100px auto 0;
}
#loginWrap h1 img{
    display: block;
    width: 100%;
    width: 250px;
    margin: 0 auto;
}

.login-box {
	min-width: 300px;	
	max-width: 350px;
	min-height: 150px;
	margin: 50px auto 0 auto;
	color: #222;
	font-size: 14px;
}
.login-box .ipass-list{list-style-type: none; margin-top: 24px;}
.login-box .ipass-list li{margin-top: 9px;}
.login-box .ipass-list b{
	display: block;
	float: left;
	padding: 8px 0;
	font-size: 12px;
}
.login-box .ipass-list .ipass-text{
  display: block;
  float: right;
  width: 70%;
  height: 40px;
  padding:  10px;
  color: #000;
  font-size: 14px;
  line-height: 22px;
  background: #fff;
  border: solid 1px #cccccc;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  border-radius: 4px;
  behavior: url(./PIE.htc) !important;
}
.login-box .ipass-list .ipass-text:focus{
	color: #555!important;
}

.login-box .cookie-check {
	position: relative;
	display: block;
	/*width: 50%;*/
	height: 2em;
	margin: 1em auto 0 30%;
	/*font-size: 0.85em;*/
}
.login-box .cookie-check label{
	position: relative;
	display: block;
	padding-left: 25px;
	font-size: 0.8em;
	line-height: 1.6em;
}

/* checkbox custom */
.cookie-check input[type="checkbox"]{
	visibility: hidden;
	position: absolute;	
	left: 0;	
}

.cookie-check .style-btn:after{
	content: "";
	position: absolute;	
	width: 9px;
	height: 5px;
	bottom: 5px;	
	left: 2px;	
	opacity: 0;
	background: none repeat scroll 0 0 transparent;
	border-color: -moz-use-text-color -moz-use-text-color #333 #333;
	border-image: none;
	border-style: none none solid solid;
	border-width: medium medium 3px 3px;
	transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	-moz-border-bottom-colors: none;
	-moz-border-left-colors: none;
	-moz-border-right-colors: none;
	-moz-border-top-colors: none;		
	behavior: url(./PIE.htc) !important;
}
.cookie-check .style-btn:hover:after{
	filter: alpha(opacity=80);
	-moz-opacity:0.8;
	opacity:0.8;
}

.cookie-check input[type="checkbox"]:checked + .style-btn:after{
	filter: alpha(opacity=100);
	-moz-opacity:1;
	opacity:1;	
}

.cookie-check .style-btn{
    position: absolute;
    top: 0;
    left: 0;
    width: 18px;
    height: 18px;
    background: #fff;
    cursor: pointer;
    border: solid 1px #ccc;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    border-radius: 4px;
    behavior: url(./PIE.htc) !important;
}

.login-box .login-btn{
	-webkit-appearance: none;
	width: 100%;
	margin-top: 20px;
	padding: 0.8em 1em;
	color: #fff;
	font-size: 1.2em;
	/*font-weight: 700;*/
	text-decoration: none;
	cursor: pointer;
	border-width: 0px ; /*ie8*/
	border-color: rgba(0,0,0,0.1); /*ie8*/
	border: solid 0px rgba(0,0,0,0.1);
	border-radius: 4px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	-ms-border-radius: 4px;
	border-radius: 4px;
	background: #222;
	background: -webkit-gradient(linear, left top, left bottom, color-stop(1.0, #222), color-stop(0.0, #333));
	background: -webkit-linear-gradient(top, #333 0%, #222 100%);
	background: -moz-linear-gradient(top, #333 0%, #222 100%);
	background: -ms-linear-gradient(top, #333 0%, #222 100%);
	background: linear-gradient(top, #333 0%, #222 100%);
	behavior: url(./PIE.htc);
  -moz-transition: .3s;
  -webkit-transition: .3s;
  -ms-transition: .3s;
  transition: .3s;
}
.login-box .login-btn:hover{ opacity:0.8; }

.login-box .cookie-delete{
	min-height: 1em;
	margin: 1em auto 0;
	padding: 14px 0;
	color: #888;
	font-size: 0.9em;
	border: 1px solid #ccc; 
}

.login-box .cookie-delete p{
	font-size: 0.92em;
	text-align: center;
	cursor: pointer;
	-moz-transition: .3s;
  -webkit-transition: .3s;
  -ms-transition: .3s;
  transition: .3s;
  behavior: url(./PIE.htc);
}
.login-box .cookie-delete p:hover{
	color: #333;
}

.login-box .cookie-delete p span{padding-left: 0.8em;}
.login-box .cookie-delete p .fa{
	font-size: 1.2em;
    -moz-transition: .3s;
    -webkit-transition: .3s;
    -ms-transition: .3s;
    transition: .3s;
  }
.login-box .cookie-delete .cookie-clear-btn{
	display: block;
	width: 18em;
	height: 3em;
	margin: 12px auto 0 auto;
	padding: 0 2em;
	color: #fff;
	font-weight: bold;
	background: #323741;
	cursor: pointer;
	border: solid 0px #FFF; 
	border-radius: 4px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	-ms-border-radius: 4px;
  -moz-transition: .3s;
  -webkit-transition: .3s;
  -ms-transition: .3s;
  transition: .3s;
  behavior: url(./PIE.htc);
}

.login-box .cookie-delete .button-box{display: none; text-align: center;}
.login-box .cookie-delete .rotate90{
  color: rgba(50, 55, 65, 1);
  -moz-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
  behavior: url(./PIE.htc);
}

.login-box p.news-telop-btn {
	text-align: center;
}
.login-box .news-telop-btn a{ 
	display: block;
	width: 100%;
	margin: 20px auto 0 auto;
	padding: 1em 1em 1em;
	color: #353741;
	font-size: 1em;
	text-decoration: none;
	cursor: pointer;
	background: rgba(53, 55, 65, 0);
	border: 1px solid rgba(53, 55, 65, 1);
}

.login-box .news-telop-btn:hover {
	background: rgba(53, 55, 65, 0.1);
}
.login-box > *{
	-moz-transition: .3s;
	-webkit-transition: .3s;
	-o-transition: .3s;
	-ms-transition: .3s;
	transition: .3s;
}

#loginWrap .attention-txt {
	padding-top: 20px;
	/*font-size: 0.923em;*/
	text-align: center;
}

#loginWrap .attention-txt p{
	margin-top: 10px;
	font-size: 0.8461em;
	line-height: 1.4em;
}

#loginWrap .attention-txt .btn a{
	display: block;
	width: auto;
	max-width: 200px;
	height: ;
	margin: 1em auto;
	padding: 1em;
	color: #555;
	font-size: 14px;
	text-decoration: none;
	border: solid 0px #FFF; 
	background: rgba(0,0,0,0.05);
	cursor: pointer;
	border-radius: 4px;
	-webkit-border-radius: 4px;
	behavior: url(./PIE.htc);
}

#loginFooter {
	margin: 17px 0 164px 0;
	padding-top: 4px;
	text-align: center;
	font-size: 0.8461em;
	border-top: solid 1px #ccc;	
}
#loginFooter p {
	margin-top: 11px;
	line-height: 1.4;
}

/* --------------------------------------------------
	Old ver.IE
-------------------------------------------------- */
.ie7 #loginWrap .style-btn,
.ie8 #loginWrap .style-btn {display: none;}

.ie7 #loginWrap INPUT[type='checkbox'],
.ie8 #loginWrap INPUT[type='checkbox']{
	visibility: visible;
	height: 22px;
	width: 22px;
}

.ie7 .login-box .news-telop-btn{
	display: block;
	position: relative;
	top: 20px;	
}
.ie7 .fa-angle-down{
	position: relative;
	top: -3px;
	width: 10px;
	height: 7px;
	/*background: url(../image/common/old_ie_icn_fa-angle-down.png) left bottom no-repeat;	*/
}
.ie7 .cookie-delete .rotate-180{background-position: left top!important;}
.ie7 .login-box .cookie-delete{min-height: 0;}
.ie7 .login-box .cookie-delete .cookie-clear-btn{position: relative;}


/* --------------------------------------------------
	SmartPhone
-------------------------------------------------- */
@media screen and ( max-width: 667px){
		
	#loginWrap{
		width: 100%;
		margin: 40px 0 0;
		padding: 0 5%;
	}
	#loginWrap h1 img{
	    width: 200px;
	}

	.login-box{
		max-width: 100%;
		min-width: 100%;
		margin-top: 10px;	
	}
	.login-box .ipass-list .ipass-text{
		width: 70%;
	}
	.login-box h1{text-align: center;}
	#loginFooter{margin-bottom: 30px;}

	.cookie-delete,
	.login-box .cookie-check {/*font-size:.75em;*/}

	.cookie-check .style-btn:hover:after{
		filter: alpha(opacity=0);
		-moz-opacity:0;
		opacity:0;			
	}
	
	.news-telop-btn{display: none!important;}	
	
}