@charset "UTF-8";

/*================================================
*  ログイン系
================================================*/
input:-webkit-autofill {	
  -webkit-box-shadow: 0 0 0px 1000px rgb(255,255,255) inset;	
  -webkit-text-fill-color: #000 !important;	
}
.auth-page input,
.auth-page select{ font-size: 16px !important; }
.auth-page main input::placeholder{ color: #bbb; }
.grayBox { background: #f1f1f1; }
.flex{ display: flex; flex-wrap: wrap; align-items: center; }
.flex-auto { flex: 1;  }
.auth-page .p-login__content .flex label{ width:6em; font-weight: bold; margin-right: 1em; white-space:nowrap; }
.auth-page .p-login__content .flex .auto-login-wrap label{ font-weight: normal; }
.auth-page .p-login{ padding-top: 0; }
.auth-page .p-login__input{margin-bottom:0 !important; font-size: 16px;}
.auth-page .p-login__input-box{ margin-top:0;  background: #f1f1f1; border: none !important;  }
.auth-page .p-signup{ padding: 0; max-width: 72rem; }
.auth-page .p-signup__title,
.auth-page .p-login__title{ font-size: 16px; padding: 1rem 2rem; font-weight: bold; background: #be1f15 !important; color: #fff; border: none !important;}
.auth-page .p-signup__title, .auth-page .p-login__title{
  margin:0;
}
.auth-page .p-signup__input-name:first-child{ margin-left: 0; }
.auth-page .p-signup__input-birthday-y,
.auth-page .p-signup__input-birthday-m,
.auth-page .p-signup__input-birthday-d{
  width: inherit; min-width: 3em;
}

.auth-page .p-signup__signup-btn{ width: 24rem; }
.auth-page .p-signup__input-area,
.auth-page .p-signup__input-gender,
.auth-page .p-signup__input-birthday-y{ margin-left:0; width: inherit; min-width: 6em; }
.auth-page .p-signup{margin:0;}
.auth-page .p-signup__input{ margin:0; width:100% }
.auth-page .p-signup__input-box{ padding: 3rem 6rem; }
.flex-ttl{ font-weight: bold; min-width: 11em; }
.auth-page .p-login__content{ padding: 3rem 3rem !important; }
.auth-page .p-login__password-process{ font-size: 14px; }
.auth-page .p-login__signup-btn,
.auth-page .p-login__login-btn{
  display: block;
  width: 21rem;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1em;
  line-height: 2;
  font-size: 1.6rem;
  font-weight: bold;
}

.auth-page .p-login__ext-sns{
  color: #333;
}
.auth-page .p-login__jp{ color:#666; font-size:1.3rem;  padding: 1em;  }
.auth-page .p-login__jp-desc{ text-align: center;}
.auth-page .p-login__jp a{color: #666; }
.auth-page .p-login__jp-title{color: #666; }
.auth-page .toggle-password{ font-size: 1.4rem; }
.login-left-width{}
.auth-page .auto-login-wrap{margin-left: 11rem;}
.auth-page .login-btn::before{ display: none; }
.auth-page .login-btn a{ padding: 0.8rem 0 0.7rem; }
.auth-page .flex-ttl .t-red{ font-size: 1.2rem; }
.auth-page .check-list input[type="checkbox"] + label::before{
  width: 2rem;
  height: 2rem;
  border: 0.1rem solid #707070;
}
.auth-page .check-list input[type="checkbox"] + label::after{
  width: 0.4rem;
  height: 1rem;
}


@media (max-width:1280px) {
  .auth-page .p-login__content .flex{ display: block; }
  .auth-page .auto-login-wrap{margin-left: 0;}
}
@media (max-width:800px) {
  .auth-page main{ padding-top:0; }
  .auth-page .p-signup { margin: 0 1rem;}
  .flex,
  .auth-page .flex-ttl{ display: block; margin-bottom: .5rem; }
  .auth-page .flex-ttl br{ display: none; }
  .auth-page .p-login__title{ text-align: center; }
  .auth-page .p-login__input-box,
  .auth-page .p-signup__input{ width: calc(100% - 15px ) }
  .auth-page .p-signup__signup-btn{ width: 70%; max-width: 28rem; margin-left:.5rem; }
  .auth-page .p-signup__cancel-btn{ font-size: 1.4rem !important; width: inherit; }
  .auth-page .p-signup__input-box{ padding: 1.5rem; }
  .auth-page .p-login{
    flex-direction:column-reverse;
  }
  .auth-page .check-list input[type="checkbox"] + label::before{
    width: 1.8rem;
    height: 1.8rem;
  }
  .auth-page .check-list input[type="checkbox"] + label::after{
    width: 0.5rem;
    height: 1rem;
    left: 0.6rem;
  }
  .auth-page .p-login__jp-desc{ text-align: left;}
}
