/* ============================================================
  モーダルウインドウ
============================================================ */
 #modalBase {
    width: 884px;
    padding: 40px;
    display:none;
    background: #FFF;
    border-radius: 4px;
}


#lean_overlay {
position: fixed;
z-index: 10000;
top: 0px;
left: 0px;
height: 100%;
width: 100%;
background: #000;
display: none;
}

.modal_close_global {position: absolute;right: 3px;top: -28px;cursor: pointer;}

.modal_close_global-icon{
  width: 16px;
  height: 16px;
  z-index: 9999;
  fill:white;
}

.modal_close_global-icon:hover{
opacity: .8;
}


/* ============================================================
   0101010101010101010101010101
============================================================ */
.modal01{position: relative;}
.modal01__block{text-align: center;}
.modal01__title {
text-align: center;
font-size: 30px;
color: rgb(75, 75, 75);
line-height: 1.2;
margin: 21px auto 42px auto;
}


.btnLogin,.btnRegist{
  border:none;
  outline: none;
  width: 300px;
  height: 60px;
  line-height: 60px;
  border-radius: 4px;
  cursor: pointer;
  color: #ffffff;
  font-size: 20px;
      box-shadow: inset 0 -3px 0 0 rgba(0, 0, 0, 0.08);
}
.btnLogin:hover,.btnRegist:hover{opacity: 0.8;}
.btnLogin{margin-right: 20px;}





/* ============================================================
   020202020202020202020202020200202020202020202020
============================================================ */
.modal02{display: none;position: relative;}
.modal02__title{ font-size: 24px;text-align: center;}
.modal02__title-recomend {font-size: 18px;text-align: center;margin: 30px 0;}
.modal02__title-guide-link {font-size: 26px;text-align: center;margin-bottom: 25px;}

.modal02__agreeBase {font-size: 13px;margin-top: 30px;}

.modal02__agreeBase-label{
  cursor: pointer;
}

.modal02__checkbox {
position: relative;
top: -1px;
margin-right: 8px;
}


.modal02__block__title-text{
    font-size: 12px;
    text-align: center;
    margin-bottom: 12px;
    color: #333;
}


.modal02__block{
    display: -webkit-flex; /* Safari */
    display: flex;
}
.modal02__leftblock,.modal02__rightblock{
  width:  50%;
      padding: 20px 0;
}
.modal02__leftblock{
    border-right: 1px solid #e7e7e7;
    padding-right: 46px;
}
.modal02__rightblock{
    padding-left: 46px;
}
.modal02__block__title{
    font-size: 20px;
    text-align: center;
    margin-bottom: 30px;
}
.modal02__block__content{
    text-align: center;
    margin-bottom: 30px;
}
.modal02__hintText{
  margin-top: 12px;
}


.registFacebook,
.registTwitter,
.registLine,
.registOmni7,
.registYconnect,
.registApple {
  display: block;
  width: 226px;
  height: 46px;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  margin: auto;
  outline: none;
  font-size: 16px;
  font-weight: bold;
  color: #fff;
  position: relative;
  margin-bottom: 12px;
}

.registFacebook {background: #3b5998;}
.registTwitter {background: #55acee;}
.registLine {background: #00c300;}
.registOmni7 {background: #ff6600;}
.registYconnect {background: #ff0033;}
.registApple {background-color: #fff;line-height: 35px;height: 44px; border: 1px solid #000;}
.registApple p {
  color: #000;
  font-weight: 500;
  font-size: 19px;
  margin-left: 24px;
}

.registsns__icon {
    fill: #fff;
    width: 24px;
    height: 24px;
    position: absolute;
    left: 14px;
    top: 10px;
}

.fill-black {
  fill: #000;
}

.registFacebook:hover,
.registLine:hover,
.registTwitter:hover,
.registOmni7:hover,
.registYconnect:hover {
  opacity: 0.8;
}
/*.snsBaseDown{
  width: 440px;
  margin: 0 auto 50px auto;
}*/

.btnRegit02{
  display: block;
    border: none;
    cursor: pointer;
    font-size: 18px;
    border-radius: 4px;
    line-height: 44px;
    height: 46px;
    width: 140px;
    position: relative;
    margin: auto;
    margin-top: 25px;
  }

.btnLogin02-icon{    width: 11px;
    height: 13px;
    position: relative;
    top: 1px;
    left: -1px;}



.btnRegit02:hover{
  opacity: 0.8;
}
.btnLogin02{outline: none;
    border: none;
    background: transparent;
    display: block;
    cursor: pointer;
    font-size: 14px;
    margin: 15px auto 30px auto;}

.btnLogin02:hover{text-decoration: underline;}
.btnLogin02:hover{text-decoration: none;opacity: .6;}


/*.checkErr {
width: 440px;
height: 26px;
text-align: center;
background: #ed5565;
font-size: 12px;
line-height: 26px;
color: white;
border-radius: 4px;
margin: -38px auto 30px auto;
}


.formBack02{margin-top: 18px;}
*/



/* ============================================================
   03030303030303003303303303303000030303003030303330
============================================================ */
.modal03{
  display: none;
  position: relative;
}

.modal03__title {
    font-size: 24px;
    text-align: center;
}

.modal03__block{
    display: -webkit-flex; /* Safari */
    display: flex;
}
.modal03__leftblock,.modal03__rightblock{
  width: 50%;
      padding: 20px 0;
}
.modal03__leftblock{
    border-right: 1px solid #e7e7e7;
    padding-right: 46px;
}
.modal03__rightblock{
    padding-left: 46px;
}
.modal03__block__title{
      font-size: 20px;
    text-align: center;
    margin-bottom: 30px;
}
.modal03__block__content{
    text-align: center;
    margin-bottom: 30px;
}

/*.namenInput{
padding: 6px;
font-size: 16px;
color: #333333;
border: solid 1px #D5D5D5;
border-radius: 2px;
background-color: #fff;
width: 440px;
height: 43px;
margin: 0 auto 0px auto;
display: block;
border-radius: 4px;
}*/
.submitBtn03 {
    display: block;
    border: none;
    cursor: pointer;
    font-size: 18px;
    border-radius: 4px;
    line-height: 44px;
    height: 46px;
    width: 140px;
    position: relative;
    margin-left: auto;
}


.modal03__btn__block{position: relative;margin-top: 30px;}


.modal03__forgetPass {
  text-align: center;
  position: absolute;
  bottom: 14px;
  font-size: 12px;
  color: #858585;
}
.modal03__forgetPass:hover{opacity: .6;text-decoration: none;}
.modal03__forgetPass-icon {
    width: 12px;
    height: 10px;
    position: relative;
    top: 0px;
    left: 2px;
    fill: #858585;
}
.btnLogin03 {
    outline: none;
    border: none;
    background: transparent;
    display: block;
    cursor: pointer;
    font-size: 14px;
    margin: 15px auto 30px auto;
}
.btnLogin03-icon {
    width: 11px;
    height: 13px;
    position: relative;
    top: 1px;
    left: -1px;
}
.btnLogin03:hover{text-decoration: none;opacity: .6;}



/* ============================================================
   0404040404040404040404040404040404040404040
============================================================ */
.modal04{display: none;position: relative;}

.modal04__title {
  font-size: 24px;
  text-align: center;
  margin: 0 0 40px 0;
}

.modal04__block{width: 360px;margin: auto;}

.modal04__agreeBase {font-size: 14px;}

.modal04__agreeBase-label{
  cursor: pointer;
}


.joinFormbaseIn {
position: relative;
}
.kurumi {
    margin-bottom: 20px;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
}
.note {margin-bottom: 5px;font-size: 14px;margin-right: 20px;width: 100px;}

.note--textright{text-align: right;}

.modal04__from-text {
       font-size: 14px;
    line-height: 1.8;
    margin-left: 125px;
    margin-top: -18px;
}
/*日本版*/
.notes {
    color: #949494;
    font-size: 12px;
    margin-top: 6px;
    line-height: 1.4;
}
/*海外版*/
.notes_En {
color: #7d7d7d;
font-size: 12px;
display: block;
margin-top: 7px;
}

.loginForm {
padding: 6px;
font-size: 13px;
color: #333;
border: solid 1px #D5D5D5;
border-radius: 2px;
background-color: #fff;
width: 236px;
height: 40px;
}


.checkbox {
  font-size: 12px;
  margin: 30px 0 15px 0;
  display: block;
  line-height: 20px;
}
.checkbox input{
  position:relative;
  top:-1px;
  margin-right: 8px;
}

.checkBtn02 {
  display: block;
  border: none;
  cursor: pointer;
  font-size: 18px;
  border-radius: 4px;
  line-height: 44px;
  height: 46px;
  width: 140px;
  position: relative;
  box-shadow: inset 0 -3px 0 0 rgba(0, 0, 0, 0.08);
  margin: auto;
  margin-top: 25px;
}

.checkBtn02:hover{opacity: 0.8;}




/* ============================================================
   050505050505050505050505050505050505050505050505
============================================================ */
.overlay{
background-color: rgba(0, 0, 0, 0.6);
z-index: 9999;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#modal_regist {
background: #f4f4f4;
border-radius: 4px;
z-index: 10000;
width: 660px;
height: auto;
margin: -50px 0 0 -200px;
top: 50%;
left: 50%;
position: absolute;
margin-top: -150px;
opacity: 1;
margin-left: -330px;
margin-top: -225px;
}
.joinFormbaseInRegist {
position: relative;
}

/* ============================================================
   ローディング
============================================================ */

.loadingBase:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: url("../img/common_loading.gif") no-repeat center center rgba(0, 0, 0, 0.8);
z-index: 10000;
border-radius: 4px;
}

/* ============================================================
   exvaridation
============================================================ */

.errMsg {
    display: block;
    line-height: 1.4;
    margin-top: 5px;
}


.formError {
  display: block;
  line-height: 1.8;
}
.fixed {
  padding-bottom: 0;
}

  .formError .formErrorClose {
    border: solid #252525 2px;
    border-radius: 9px 9px 9px 9px;
    -moz-border-radius: 9px 9px 9px 9px;
    -webkit-border-radius: 9px 9px 9px 9px;
    display: block;
    width: 16px;
    height: 16px;
    position: absolute;
    top: -4px;
    right: -4px;
    color: #efefef;
    background: #333;
    font-weight: bold;
    text-align: center;
    line-height: middle;
    cursor: pointer;
    box-shadow: 1px -1px 3px #888;
    -moz-box-shadow: 1px -1px 3px #888;
    -webkit-box-shadow: 1px -1px 3px #888;
    _z-index:2;
  }
  .formError .formErrorClose:hover {
    background: #666;
  }
  .fixed .formErrorClose {
    display: none;
  }

  #modalBase .formError .formErrorContent{
    color: #f53a67!important;
    padding: 0px!important;
  }
   .formError .formErrorContent {
    width: 236px;
    position: relative;
    color: #fff;
    font-size: 14px;
    padding: 4px;
    padding-left: 8px;
  }
  .formErrorContent__icon{
    width: 16px;
    height: 16px;
    position: relative;
    fill: #f53a67;
    top: 2px;
    margin-right: 4px;
  }