/* -------------------- */
/*  	  MEMBER        */
/* -------------------- */

/* loginWrap */
.loginWrap .loginArea{/* width:48.5%; *//* float:left; */}
.loginTit{margin: 0 auto 20px auto;padding: 0 30px;text-align: center; width:480px;}
.loginTit .tit{font-size: 2.5em;line-height: 1.2em;margin-bottom: 10px;color: #111;}
.loginTit p{ line-height:1.3em;}
.loginArea{position:relative;padding-bottom: 50px;background: #f5f6f7;padding: 2.5em 2em;margin-bottom: 35px;}
.loginArea + .loginArea{ float:right;}
.loginArea .button, .JoinArea .button{ width:100%;}
.loginForm {padding: 0 30px;margin: 0 auto;width: 480px;}
.loginForm > ul > li {overflow:hidden;margin-top:10px;}
.loginForm > ul > li:first-child {margin-top:0;}
.loginForm > ul > li input {padding:0 10px;width:100%;height: 3.5em;vertical-align:middle;}
.loginForm > ul > li label {position:absolute;top:15px;left:10px;}

.loginForm input[type="text"], .loginForm  input[type="password"]{ padding-left:40px;}
.loginForm input[type="text"] {background: #fff url(../images/member/icon_login.png) no-repeat 10px 7px;}
.loginForm input[type="password"] {background: #fff url(../images/member/icon_login.png) no-repeat 10px -75px;}
.loginForm input[type="text"].email {background: #fff url(../images/member/icon_login.png) no-repeat 10px -238px;}
.loginForm input[type="text"].tel {background: #fff url(../images/member/icon_login.png) no-repeat 10px -327px;}
.loginForm input[type="text"]#uname {background: #fff url(../images/member/icon_login.png) no-repeat 10px -412px;}

.loginForm > ul > li.radioBox{background:#fff;padding:0;margin: 0;}
.loginForm > ul > li.radioBox input[type="radio"]{height: auto;margin: 0;width: auto;}
.loginForm > ul > li.radioBox input[type="radio"] + label{ position:relative; left:inherit; top:inherit;}

.loginForm .btnArea {margin-top: 10px;}
.loginForm .btnArea .button.large {color:#fff;margin-bottom: 0;height: 3.15em !important;line-height: 3.15em;font-size: 1.15em !important;}
.loginForm .linkChk {overflow:hidden;margin-top:10px;/* line-height:20px; */}
.loginForm .linkChk .save {float:left;height:20px;}
.loginForm .linkChk .save input[type="checkbox"]{display: inline-block;vertical-align: middle;margin: -2px 0 0 0;}
.loginForm .linkChk .link {float:right;}
.loginForm .linkChk .link a {display:inline-block;color: #666;vertical-align:top;}
.loginForm .linkChk .link a:before{ content:''; display: inline-block; width:1px; height: 12px; background:rgba(0,0,0,0.2);margin:0 5px 0 5px;}
.loginForm .linkChk .link a:first-child:before {display:none;margin:0;padding:0;}

.JoinArea{position:relative;margin:0 auto;padding-bottom: 50px; border-radius: 10px;border:1px solid #ddd;padding:30px;}
.JoinArea .btnArea{margin-bottom: 0;}
.JoinArea .loginForm{ width:400px; margin: 0 auto;}
.JoinArea .loginForm .linkChk label { font-weight: 500;}
.JoinArea .loginForm .linkChk a { color: #9926c4;}
.JoinArea .loginForm .linkChk + .linkChk{margin-top:5px;}
.JoinArea .loginForm .btnArea {margin-bottom:0px;}

.join_cfm{margin-top: 1em;padding: 2em 0 1em 0;border-top: 1px dashed #ddd;text-align: center;margin-left: -7em;}
.join_cfm input{height: 2.5em;}

.separator { clear:both; position: relative;margin: 20px 0;text-align: center;line-height: 16px;font-size: 12px;}
.separator:before {position: absolute;top: 50%;left: 0;background: rgba(0,0,0,.06);width: 100%;height: 1px;content: "";}

.loginWrap .bottom-message {position: relative;clear: both;border:1px solid #ddd;border-radius: 10px;padding: 20px;display: table;width: 100%;}
.loginWrap .bottom-message p{margin-bottom:0 !important;display: table-cell;vertical-align: middle;}
.loginWrap .bottom-message a {display: table-cell;vertical-align: middle;text-align: center;}

.join_done{ position: relative; padding: 25px; border: 1px solid #e2e2e2; overflow: hidden; margin: 0 0 30px 0; box-sizing: border-box; background: #fbfbfb; text-align: center;}
.join_done .tit{ font-size:1.25em; color:#222; letter-spacing:-0.03em; font-weight:600; margin-bottom: 0}
.join_done .tit:before{content:'';display: block;margin: 0 auto 10px auto;width: 80px;height: 80px;background: url('../images/common/ico_sprite.png') 0 0 no-repeat;}

.leaveBox{border:1px solid #dedede; border-top:2px solid #df2d32; padding:2rem; margin-bottom:1rem;}
.leaveBox h5:first-child{ margin-top:0}
.leaveBox input[type="text"].email { background: url(../images/member/icon_login.png) no-repeat 10px -240px; padding: 0 10px 0 40px; width: 100%; height: 50px; vertical-align: middle; border-radius: 8px; }


@media screen and (max-width: 1024px) {
	.loginArea{/* padding:25px; */}	
	.loginTit p br{ display: none;}
	.loginTit,
	.loginArea .loginForm{padding:0;width: 65%;}
    .loginForm input[type="text"]{background-position: 10px 14px;}
    .loginForm input[type="password"]{background-position: 10px -68px;}
    .loginForm input[type="text"]#uname{background-position:10px -405px;}
    .loginForm input[type="text"].email{ background-position:10px -232px;}
    .loginForm input[type="text"].tel{background-position: 10px -320px;}

	
	.loginTit h2 {	font-size: 2em;}
	.JoinArea.joinStep01 { width:100%;}
	.JoinArea { padding: 25px; }
	.JoinArea .loginForm{ padding: 0; width:100%; max-width: 400px;}
}
@media screen and (max-width: 720px) {	
	.loginWrap .loginArea{width:100%;float: none;padding: 2em 1.5em;margin-bottom: 25px;}
	.loginTit .tit{ font-size:2em;}
	.loginTit,
	.loginWrap .loginArea .loginForm{ width:100%;}
	.loginForm input[type="text"], .loginForm input[type="password"]{padding-left:35px;}
	.loginForm input[type="text"]{background-position: 5px 5px;}
    .loginForm input[type="password"]{background-position: 5px -76px;}
    .loginForm input[type="text"]#uname{background-position:5px -413px;}
    .loginForm input[type="text"].email{ background-position:5px -240px;}
    .loginForm input[type="text"].tel{background-position: 5px -328px;}
	.loginWrap .bottom-message p{ display:block;}
	.loginWrap .bottom-message a{display:block; margin-top:10px;}
}
@media screen and (max-width: 400px) {
	
	.JoinArea { padding: 25px; }
	
	.loginTit h2 {font-size:2em;}
	.loginForm > ul > li {margin-top:5px;}
	.loginForm .btnArea {margin: 10px 0 10px;}
	.loginForm .linkChk {margin-top:10px;}
	.loginForm > ul > li input {height: 3em;}
    .loginForm input[type="text"]{background-position: 5px 3px;}
    .loginForm input[type="password"]{background-position: 5px -79px;}
    .loginForm input[type="text"]#uname{background-position:5px -415px;}
    .loginForm input[type="text"].email{ background-position:5px -243px;}
    .loginForm input[type="text"].tel{background-position: 5px -332px;}
    .loginForm .linkChk .save,
	.loginForm .linkChk .link{ float:none;}
}


/* messageSection */
.messageSection {overflow:hidden; border:4px solid #e4e4e4;  box-sizing:border-box; padding:40px; text-align:center; color:#666 }
.messageSection p {text-align:center;}
.messageSection p.tit { font-size:1.5em; margin-bottom:15px;}

@media only screen and (max-width: 450px) {
	.messageSection{ padding:20px;}
}

/* message-area */
.message-area {padding:50px 0 50px;}
.message-guide {color:#333;font-size:1.8em;text-align:center;line-height:32px;}
.message-guide em {display:inline-block;color:#f39800;font-style:normal;vertical-align:top;}
.message-guide span {display:block;padding:12px 0 0;color:#666;font-size:14px;line-height:22px;vertical-align:top;}
@media only screen and (max-width: 450px) {
	.message-guide {color:#333;font-size:1.4em;}
	.message-guide span {font-size: 12px;line-height:1.4}
}

/* input_box */
.input_box { padding: 30px 0; overflow: hidden; text-align: center; border: 1px solid #ddd}
.input_box li { display: inline-block; margin: 5px;}
.input_box input[type=text], input[type=number] {width: 170px; height: 35px;border: 1px solid #ddd; font-weight: 500; text-align: center; color: #000; text-indent: 0; }
.input_box label:before { content: ""; display: inline-block; border: 2px solid #c8161a; margin: 0 5px 5px 0; vertical-align: middle}
.input_box label { margin-right: 5px; display: inline-block; top: inherit;}
.input_box .button { margin:-5px 0 0 0;height: 35px; line-height: 35px;}

@media only screen and (max-width:768px) {	
	.input_box{padding:20px 0;}
	.input_box li{ display: block;;margin: 5px auto; padding: 0 15px}
	.input_box li label { width: 88px; margin-right: 0; text-align: left}
	.input_box .button { width: 100%; margin-top: 10px}
	.input_box input[type=text], input[type=number] { width: calc(100% - 92px);}
}


/* step_join */
.step_join { position: relative; margin-bottom: 40px; border: 1px solid #ddd; padding: 20px;}
.step_join ul{ display:block; margin: 0 auto; text-align:center;}
.step_join li {position:relative; display:inline-block; width:125px; margin:0 23px;}
.step_join li span{ font-size:1.05em; display:inline-block;word-break: break-all; }
.step_join li.on span{color: #2c2f90;text-decoration:underline;font-weight: 500;}
.step_join li:before{ content: ''; display: block; width:125px; height: 65px; background:url('../images/member/bg_member.png') no-repeat;}
.step_join li:after{ content: ''; display: block; position: absolute; right: -32px; top: 50%; margin-top:-7.5px;  width: 15px; height: 15px; border-top: 2px solid #b3b3b3; border-right: 2px solid #b3b3b3; -webkit-transform: rotate(45deg); transform: rotate(45deg);}
.step_join li:last-child:after{ display:none;}
.step_join li.step1:before {background-position: 10px 0;}
.step_join li.step2:before {background-position:-90px 0;}
.step_join li.step3:before  {background-position:-290px 0;}
.step_join li.step4:before  {background-position:-190px 0;}
.step_join li.on.step1:before {background-position:10px -70px;}
.step_join li.on.step2:before {background-position:-90px -70px;}
.step_join li.on.step3:before {background-position:-290px -70px;}
.step_join li.on.step3:before {background-position:-190px -70px;}

@media only screen and (max-width :720px) {
	.step_join{ margin-bottom:20px;}
	.step_join li{width: 50px;margin: 0 9px;}
	.step_join li:last-child{ width:60px;}
	.step_join li:before{background-size: 350px;width: 50px;height: 45px;}
	.step_join li.step1:before {background-position:-9px 0;}
	.step_join li.step2:before {background-position: -81px 0px;}
	.step_join li.step3:before  {background-position: -219px 0px;}
	.step_join li.step4:before  {background-position: -144px 0px;}
	.step_join li.on.step1:before {background-position: -9px -47px;}
	.step_join li.on.step2:before {background-position:-81px -47px;}
	.step_join li.on.step3:before {background-position:-219px -47px;}
	.step_join li.on.step4:before {background-position:-144px -47px;}
	.step_join li:after{ right: -20px; margin-top: -5px; width: 10px; height: 10px; border-width: 1px 1px 0 0;}
	.step_join li span{letter-spacing: -0.05em; font-size:0.9em;}
}



/* join_box */
.join_box{ overflow: hidden; margin-top: 40px;}
.join_box li{ display: block; width:48%; float:left;}
.join_box li:nth-child(even){ float:right;}
.join_box li a{display: block;padding: 30px 30px 30px 120px;border: 1px solid #df2d32;height: 130px;position: relative;}
.join_box li a .tit{font-size: 1.25em;color: #333;font-weight: 500;margin: 7px 0 0 0 !important;letter-spacing: -0.05em;}
.join_box li a .tit em{ display: block; font-size:14px; color:#767676; font-weight: 400;}
.join_box li a .btn{color:#fff;background: #3d505c;border-radius: 5px;font-weight: 500;font-size: 14px;width:100px;height: 40px;line-height: 40px;position: absolute;right:0;top:50%;margin: -20px 30px 0 0;text-align: center;padding: 0;}
.join_box li a:before{ content:''; display: block; width:75px; height: 75px; background-color:#f0f0f0; background-repeat: no-repeat; background-position: 50% 50%; position: absolute; left: 0; top:50%; margin: -37.5px 0 0 28px; border-radius: 50%;}
.join_box li:nth-child(1) a:before{ background-image:url('../images/member/join_ico01.png');}
.join_box li:nth-child(2) a:before{ background-image:url('../images/member/join_ico02.png');}
.join_box li a:hover, .join_box li a:focus{text-decoration: none;background-color: #df2d32;}
.join_box li a:hover .tit, .join_box li a:focus .tit{ color:#fff;}
.join_box li a:hover .tit em, .join_box li a:focus .tit em{ color:rgba(255,255,255,0.7)}
.join_box li a:hover .btn, .join_box li a:focus .btn{background-color:#fff;color: #df2d32;}

@media only screen and (max-width :1024px) {
	.join_box li{ width:49%;}
	.join_box li a:before{left:15px;margin: -37.5px 0 0 0px;}
	.join_box li a .tit{margin-top: 0 !important;font-size: 1.18em;}
	.join_box li a {height: auto;padding: 20px 20px 20px 100px;}
	.join_box li a .tit em{display:none;}
	.join_box li a .btn{position: relative;right:inherit;top:inherit;display: block; width:100%;margin:5px 0 0 0;height: 35px;line-height: 35px;}
}
@media only screen and (max-width :640px) {	
	.join_box {margin-top:30px;}
	.join_box li a:before{position:relative;left:inherit;top:inherit;margin: 0 auto 10px auto;}
	.join_box li a{padding:15px; text-align:center;}
}
@media only screen and (max-width :420px) {
    .join_box li{ width:100%; float:none; margin-bottom: 10px;}
    .join_box li a:before{position:absolute;left:10px;top:10px;margin:0;}
	.join_box li a{padding:15px 15px 15px 95px; text-align:left;}

}

/* agreeBox */
.agreeBox{background:#fff;padding: 25px;overflow: hidden;border: 1px solid #dfdfdf; max-height:250px; overflow-y:auto; margin-bottom:10px; font-size: 0.95em;}
.agreeBox h4:first-child{ margin-top: 0;}
.agreeBox h4 {margin:25px 0 13px 0;font-size:1.2em;color:#333;line-height: 1.1em;}
.agreeBox h4:before{display:none;}
.agreeBox h4 + h5{margin-top: 0 !important;}
.agreeBox h5 {margin:15px 0 10px 0;font-size:1.1em;line-height: 1.1em;color:#555;}
.agreeBox h6{ color:#a26a6c; font-size:1.05em;}
.agreeBox h6:before{  box-shadow: 0 0 0 3px inset #a26a6c}
.agreeBox p { margin-bottom:5px;}
.agreeBox + .checkBox{ margin-top: -10px;}
.agreeBox .list01>li:before, .agreeBox .list_p:before{top: 10px;}
.agreeBox .list_box{ border-color:#ccc;}
@media only screen and (max-width :768px) {
	.agreeBox{background:#fff;padding: 10px;}
	.agreeBox h6:before{ top:4px; box-shadow: 0 0 0 2px inset #a26a6c}
	.agreeBox .list01>li:before, .agreeBox .list_p:before{ top:8px;}
}


/* guideBox */
.guideBox{ border:1px solid #ccc; padding:30px; text-align:left; max-height:300px; overflow-y: scroll;}
.guideBox h4{ font-size:1.2em; margin:1em 0 0.2em 0;}
.guideBox h6{ font-size:1em; margin: 1em 0 0.2em 0;}
.guideBox p{ text-align:left}
.guideBox .listStyle li {padding: 0 0 3px 10px; line-height: 1.5;}
.guideBox dt{ font-size:13px;}
.guideBox ul ul{ padding:0}
.checkBox{ text-align:center; padding:25px; background:#f6f6f7; }
.checkBox label{ padding:0 20px 0 10px}

/* profile_box */
.profile_box span{border:1px solid #ddd;border-radius: 10px;overflow: hidden;display: inline-block;width: 132px;height: 132px;position: relative;background: #ddd url(../images/member/ico_profile.png) no-repeat 50% 50%;vertical-align: middle;}
.profile_box span img{width:100%; height: 100%;}
.profile_box .btn{font-size:0.9em;line-height: 26px;height: 26px;border:1px solid #ddd;background:#fff;color:#555;display: inline-block;padding: 0 5px; margin: 0px 0 0 10px;}

/* radioBox */
.radioBox {padding:5px 0;}
.radioBox span {display:inline-block;font-size:14px;line-height:20px;}
.radioBox input[type="radio"]:first-child{ margin-left:0;}
.radioBox input[type="radio"] {margin-left:40px;vertical-align:middle;}
.radioBox input[type="radio"] + label{margin-left:6px;}
.radioBox label {  display: inline !important;  margin: 0; width: auto !important; }

.member-area .radioBox {margin-top:20px;padding:10px 0;}