@charset "UTF-8";

@media (max-width: 750px) {
    .crumbsList {
        border-top: solid 1px #707070;
        padding-top: 1em;
    }
}

.mainContents {
    margin: 0 auto;
    padding: 15px 0 45px;
    width: calc(100% - var(--vertical-width));
}
@media (max-width: 750px) {
    .mainContents {
        width: 100%;
    }
}
.mainContents.login {
    max-width: none;
}

.mainContents h1.title {
    text-align: center;
    margin: 0 35px;
    height: 80px;
    line-height: 80px;
    font-size: 1.8rem
}

.mainContents__inner {
    width: 100%;
}

.regmessageWrapper {
    width: 400px;
    padding: 0;
    margin: auto;
}

/* @media (min-width: 1024px) {
    .regmessageWrapper {
        padding-right: 60px;
    }
}
@media (max-width: 1023px) {
    .regmessageWrapper {
        justify-content: center;
    }
}
.title-box {
    border-bottom: 1px solid #000;
    margin-bottom: 35px;
}
.login-contents__wrapper .login-contents__inner .note {
    margin-top: 30px;
    margin-bottom: 0px;
}
.login-contents__wrapper .login-contents__inner .note .link-to-terms {
    text-decoration: underline;
    color: #008cba;
    text-underline-offset: 2px;
} */

.section {
    padding: 60px 60px 25px 60px;
    background: #efefeff5
}

.section__ttl {
    font-size: 1.5rem;
    margin-bottom: 7px
}

/* .error-messages {
    margin-bottom: 15px;
} */

.mainContents input[type=text],
.mainContents input[type=password] {
    height: 40px;
    box-shadow: none;
    padding: 13px 14px;
    background-color: #fff;
    font-size: 1.4rem;
    border: none
}

.mainContents input[type=text]::placeholder,
.mainContents input[type=password]::placeholder {
    color: #d1d1d1
}

.mainContents .form-bottom {
    margin-bottom: 10px;
}

.mainContents .form-bottom.last {
    margin-bottom: 15px;
}

.mainContents .login_forgot {
    display: block;
    font-size: 1rem;
    letter-spacing: .007em
}

.mainContents .join_text {
    font-size: 1.1rem;
    margin-bottom: 10px;
}

.mainContents .btm_btn {
    margin: 13px auto;
}

.login .login_btn,
.login .login_sign_up_btn {
    background: #333;
    color: white;
    width: 100%;
    height: 40px;
    display: grid;
    place-content: center;
    transition: opacity 0.3s ease;
    margin: 0;
    font-size: 1.4rem;
    padding: 0;
}

.signup-contents__inner {
    padding: 0 60px 60px 60px;
}

.signup-contents__inner .section__ttl {
    padding-top: 20px;
    margin: 0 0 12px;
    border-top: solid 1px #666666
}

.login .checkbox.remenmber {
    margin: 0;
    padding-left: 35px;
    font-size: 1.2rem;
}

.login .checkbox.remenmber::before {
  transform: translateY(-50%);
  background-color: white;
  border: none;
}
.login .checkbox.remenmber::after {
  left: 9px;
}

/* .mainContents.reminder .mail {
  padding-bottom: 10px;
  font-size: 16px;
} */

/* .login .form-remember-area {
  display: flex;
  display: -webkit-flex;
  align-items: center;
  justify-content: space-between;
} */

.page-title-header {
  margin: 52px auto 0;
}

@media only screen and (max-width: 750px) {
    .mainContents {
        padding: 25px 0 75px;
        border: none;
        margin: 0;
        width: 100%
    }

    .mainContents.login {
        padding: 29px 0 38px;
    }

    .mainContents h1.title {
        height: 75px;
        line-height: 75px;
        margin: 50px 0 0;
    }

    .mainContents__inner {
        padding: 0;
        position: sticky;
        z-index: 2;
    }

    .login-contents__wrapper {
        width: 100%;
        margin: auto;
    }

    .regmessageWrapper {
        width: 100%;
        margin: 0;
        padding: 0px 35px 0px
    }

    .login-contents__inner {
        padding: 35px 32px 33px 32px;
    }

    .signup-contents__inner {
        padding: 0 32px 33px 32px;
    }

    .header.bg-line.navbar, .float_header {
        z-index: 3;
    }

    /* .error-messages {
        margin: 0;
        margin-top: 8px;
    } */
    /* .reminder #form_mail {
        width: 100% !important;
    } */
    .page-title-header {
        margin: 40px auto 0;
    }
}
/* BUTTON
-------------------------------*/
/* .buttonArea .mypage-btn {
  width: 250px;
  float: left;
  margin-right: 10px;
}

.buttonArea .mypage-btn.single {
  float: none;
  margin: 0 0 10px;
}

.buttonArea .backlink {
  display: block;
  border: 1px solid #000;
  background-color: #FFF;
  text-align: center;
  width: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  height: inherit;
  font-size: 16px;
  font-size: 1.6rem;
  padding: 12px 0;
}

@media only screen and (max-width: 750px) {
  .buttonArea .mypage-btn {
    width: 100%;
    float: none;
    margin: 0 0 10px;
  }
} */