@charset "utf-8";
/* CSS Document */
.site_header_sign {
    width: 100%;
    z-index: 1000;
    left: 0px;
    top: 0px;
    margin: 0px;
    padding-top: 3px;
    padding-bottom: 3px;
    background: #ffffff;
}
#signhead{align-items: flex-end;}
#signhead .col{
	margin: 15px;
}
#signhead .col.logo{flex: 0 0 150px;}
#signhead .col.at{flex: 1 1 auto;margin-right: 15px;padding-left: 15px;border-left-width: 1px;border-left-style: solid;border-left-color: #b2b2b2;font-size: 1.3em;
color: #000;}
.wrapperSign{
	clear: both;
	max-width: 600px;
	clear: both;
	padding: var(--blcokin-padding-tb);
	margin-right: auto;
	margin-left: auto;
	box-sizing: border-box;
	font-size:1em;
}
.wrapperSign a{
	color: var(--support-color);
	text-decoration: underline;
}
.wrapperSign.small{max-width: 400px;}
.wrapperSign.ad{max-width: 70%}
.col-sing-ad{flex: 0 0 700px;
text-align:right}
.col-sing-w{
	flex: 0 0 400px;
	margin-left: auto;
	margin-right: 5%;
}
.col-sing-benefit{
	flex: 1 1 auto;
}
.boxSign{
	width: calc(100% - 20px);
	background-color: #FFF;
	clear: both;
	padding: 20px;
	float: left;
}
.divided{
	clear: both;
	float: left;
	width: 100%;
	background-image: url(../img/sign/divided.jpg);
	background-repeat: repeat-x;
	background-position: left center;
	text-align: center;
	margin-top: 15px;
	margin-bottom: 15px;
}
	 .divided span{
	font-size: 0.9em;
	color: #a3a0a0;
	background-color: #FFF;
	padding: 10px;
	}
.iconsing{
	clear: both;
	float: left;
	width: calc(100% - 10px);
	font-size: 1em;
	font-weight: bolder;
	color: #FFF;
	text-align: center;
	padding-top: 15px;
	padding-right: 5px;
	padding-bottom: 15px;
	padding-left: 5px;
	cursor:pointer;
	background-color: var(--main-color);
}
.iconsing:hover{opacity:0.8;}
    .iconsing span{
	margin-right: 10px;
	font-size: 1.1em;
	vertical-align: middle;
    }
	.iconsing.mar{
		margin-top: 15px;
		margin-bottom: 15px;
	}
	.iconsing.FB{
	background-color: #3b5998;
    }
	.iconsing.LINE{
		background-color: #00c300;
	}
	.lineicon{
		width: 20px;
		height: 20px;
		display: inline-block;
		vertical-align: middle;
		background-size: 20px 20px;
		background-image: url("data:image/svg+xml,%3Csvg version='1.1' fill='%23ffffff' id='icon_line' xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' width='85.04px' height='85.04px' viewBox='0 0 85.04 85.04' enable-background='new 0 0 85.04 85.04' xml:space='preserve'%3E%3Cg%3E%3Cpath d='M82.706,36.755c0-17.954-17.999-32.562-40.125-32.562c-22.124,0-40.126,14.608-40.126,32.562 c0,16.095,14.276,29.581,33.558,32.129c1.306,0.279,3.084,0.864,3.536,1.979c0.406,1.012,0.266,2.599,0.13,3.625 c0,0-0.47,2.832-0.572,3.438c-0.175,1.012-0.807,3.966,3.475,2.16c4.283-1.804,23.108-13.607,31.525-23.299h-0.002 C79.921,50.415,82.706,43.942,82.706,36.755z M26.873,47.438H18.9c-1.159,0-2.103-0.942-2.103-2.106V29.388 c0-1.159,0.944-2.105,2.103-2.105c1.161,0,2.104,0.946,2.104,2.105v13.841h5.869c1.161,0,2.103,0.945,2.103,2.103 C28.976,46.495,28.034,47.438,26.873,47.438z M35.119,45.331c0,1.164-0.943,2.106-2.103,2.106s-2.103-0.942-2.103-2.106V29.388 c0-1.159,0.943-2.105,2.103-2.105s2.103,0.946,2.103,2.105V45.331z M54.313,45.331c0,0.91-0.577,1.712-1.438,1.999 c-0.216,0.072-0.443,0.107-0.669,0.107c-0.656,0-1.284-0.313-1.68-0.843L42.353,35.47v9.861c0,1.164-0.942,2.106-2.103,2.106 s-2.105-0.942-2.105-2.106V29.388c0-0.906,0.58-1.708,1.44-1.996c0.216-0.072,0.441-0.109,0.667-0.109 c0.657,0,1.287,0.315,1.681,0.844l8.172,11.129v-9.868c0-1.159,0.944-2.105,2.104-2.105c1.161,0,2.104,0.946,2.104,2.105V45.331z M67.213,35.258c1.161,0,2.104,0.942,2.104,2.104c0,1.158-0.942,2.103-2.104,2.103h-5.867v3.763h5.867 c1.157,0,2.104,0.945,2.104,2.103c0,1.164-0.946,2.106-2.104,2.106H59.24c-1.159,0-2.105-0.942-2.105-2.106v-7.964 c0-0.002,0-0.002,0-0.005c0,0,0-0.004,0-0.005v-7.969c0-1.159,0.945-2.105,2.105-2.105h7.973c1.161,0,2.104,0.946,2.104,2.105 c0,1.161-0.942,2.105-2.104,2.105h-5.867v3.765H67.213z'/%3E%3C/g%3E%3C/svg%3E");
	}
	.iconsing.Email{
	background-color: var(--third-color);
    }
.shPassword{
	font-size: 0.9em;
	text-align: right;
	color:rgba(0,0,0,.5);
	display:block;
	cursor:pointer
}
.shPassword:before {
	font-family: "Font Awesome 5 Free"; 
	font-weight: 900;
	content: "\f06e";
	}
.shPassword.active:before{content: "\f070";}
.foregtPw{
	font-size: 0.9em;
	text-align: center;
	color:rgba(0,0,0,.5);
}
.foregtPw span{
	margin-right: 10px;
	margin-left: 10px;
}
.shPassword:hover,.foregtPw span:hover{color:var(--main-color)}
@media screen  and (max-width: 1700px) {
.wrapperSign.ad{max-width: 80%}
}
@media screen  and (max-width: 1500px) {
.wrapperSign.ad{max-width: 90%}
}
@media screen  and (max-width: 1400px) {
.wrapperSign.ad{max-width: 100%}
}
@media screen  and (max-width: 1200px) {
.wrapperSign.ad{max-width: 100%}
.col-sing-ad{flex: 0 1 65%;
text-align:left}
.col-sing-w{
	flex: 0 0 400px;
	margin-left: auto;
	margin-right: 5%;
}
}
@media screen  and (max-width: 1000px) {
.wrapperSign.ad{max-width: 100%}
.col-sing-ad{display:none}
.col-sing-w{
	flex: 0 0 300px;
	margin-left: auto;
	margin-right: auto;
}
}
@media screen  and (max-width: 600px) {
.wrapperSign,.wrapperSign.small{
	clear: both;
	float: left;
	width: calc(100% - 20px);
	max-width: calc(100% - 20px);
	padding: 10px;
}
}
/*JOINSTATUS*/
.joinstatus{
	clear: both;
	float: left;
	width: 100%;
}
.joinstatus ul{
	clear: both;
	float: left;
	width: 100%;
	display: flex;
  display: -webkit-flex;
  flex-wrap: nowrap;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  align-content: center;
}
.joinstatus ul li{ 
  flex: 1 1 auto;
  margin: 0px;
  }
 .ord_pic{
	clear: both;
	float: left;
	width: 100%;
	margin-bottom: 10px;
	display: block;
	text-align: center;
	-webkit-filter:grayscale(1);
}
.joinstatus ul .active .ord_pic{-webkit-filter:grayscale(0); }
.joinstatus ul li p{
	font-size: 0.9em;
	font-weight: bold;
	color: #000;
	clear: both;
	float: left;
	width: 100%;
	text-align: center;
}
.joinstatus ul .active p{color: var(--support-color); }
.joinstatus ul li i{
	clear: both;
	float: left;
	width: 100%;
	font-size: 0.8em;
	color: #b1b0b0;
	text-align: center;
	}
@media screen  and (max-width: 600px) {
.joinstatus ul li{ 
  flex: 1 1 auto;
  margin: 10px;}
  .joinstatus ul li p{
	  	font-size:0.5em;
  }
   .joinstatus ul li i{
	font-size: 0em;
	display: none;
  }

}

/*JOINSTATUSＥＮＤ*/
/*BENEFIT=====================*/
.boxbenefit{
	background-image: url(../img/user/bg_line.jpg);
	background-repeat: repeat-y;
	background-position: left top;
	clear: both;
	float: left;
	width: 100%;
}
.boxbenefit ul{clear: both;
	float: left;
	width: 100%;}
.boxbenefit ul li{
	clear: both;
	float: left;
	width: 90%;
	text-align: left;
	background-image: url(../img/sign/dot.png);
	background-repeat: no-repeat;
	background-position: left 8px;
	margin-left: 5%;
	padding-left: 5%;
	font-size: 0.9em;
	margin-bottom: 15px;
	color: #666;
	}
/*BENEFITEND*/
/*label*/
.label{
	display: inline-block;
	margin-right: 5px;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 15px 15px;
	width: 15px;
	height: 15px;
	vertical-align: middle;
	}
.label.view{
	background-image: url(../img/sign/lable-view.svg);
}
/*labelEND*/
.showhidebox{
	display:none}
.showhidebox.active{
	display:block}