@charset "utf-8";
@layer assets {

  /*____________________________________________________________________________

  SITE TITLE: BOEM - assets
  TITLE: PC ログイン 【L4】
  ____________________________________________________________________________*/

  /* 共通 */
  #login h2 {
    margin-bottom: 20px;
    padding: 0;
    font-size: 20px;
    border-bottom: none;
  }
  #users {
    color: #000;
    display: flex;
    justify-content: space-between;
  }
  #users:after {
    display: block;
    clear: both;
  }
  #users h3 {
    font-size: 18px;
    background: #eaeaea;
    padding: 15px 20px;
    text-align: center;
  }
  #users p {
    font-size: 14px;
    line-height: 170%;
  }

  /* ログイン・新規登録 */
  .registered_users_in,
  .new_users_in {
    padding: 30px 50px 30px 50px;
  }
  .new_users_in {
    box-sizing: border-box;
    padding: 30px 50px 30px 50px;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    background-color: #f6f6f6;
  }
  .new_users_in form {
    width: 100%;
  }
  .new_users {
    width: calc((100% - 40px) / 2);
    max-width: 620px;
    margin-bottom: 32px;
    border: 1px solid #ddd;
    box-sizing: border-box;
  }
  .new_users #new_btn {
    margin: 20px 0 24px 0;
  }
  @media all and (-ms-high-contrast: none) {
    .new_users #new_btn {
      margin-top: 80px;
    }
  }
  .new_users .new_users_in p {
    display: block;
    line-height: 1.7;
    color: #666;
  }
  .registered_users {
    width: calc((100% - 40px) / 2);
    max-width: 620px;
    margin-bottom: 32px;
    border: 1px solid #ddd;
    box-sizing: border-box;
  }
  .registered_users a {
    display: block;
    text-decoration: underline;
    text-align: center;
    font-size: 14px;
    margin: 20px 0;
  }
  .registered_users a:hover {
    text-decoration: none;
  }
  .registered_users dl {
    clear: both;
    overflow: hidden;
    margin-bottom: 15px;
  }
  .registered_users dt,
  .registered_users dd {
    width: 100%;
  }
  .registered_users dt label {
    font-weight: normal;
    font-size: 14px;
    margin-bottom: 7px;
  }
  .registered_users input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px white inset;
  }
  .registered_users input {
    width: 100%;
    background: #fff;
    border: 1px solid #ddd;
    box-sizing: border-box;
    padding: 13px 10px;
    font-size: 14px;
  }
  #password_visibility_label {
    cursor: pointer;
  }
  .registered_users .block-password {
    margin-bottom: 32px;
  }

  .new_users .to_inquiry{
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
  }
  .new_users .to_inquiry:hover{
    text-decoration: none;
  }
  /* ボタン共通設定 */
  button#login_btn {
    display: block;
    cursor: pointer;
    border: none;
    width: 100%;
    height: 64px;
    font-size: 18px;
    color: #fff;
    border-radius: 10px;
  }
  button#new_btn {
    display: block;
    cursor: pointer;
    border: none;
    width: 100%;
    height: 64px;
    font-size: 18px;
    color: #fff;
    border-radius: 10px;
  }
  button#login_btn {
    margin: 20px 0 0 0;
  }
  button#new_btn {
    margin: 0 0 0 0;
    background-color: #fff;
    border: 1px solid #000;
  }
  button#login_btn:hover,
  button#new_btn:hover {
    filter: alpha(opacity=60);
    -ms-filter: "alpha(opacity=60)";
    opacity: 0.8;
  }

  /* エラーメッセージ */
  a#loginError {
    color: #f06f47;
    text-decoration: underline;
  }
  a#loginError:hover {
    color: #f06f47;
    text-decoration: none;
  }

  /* ログイン再認証 */
  #login.isLogin h2 {
    display: none;
  }
  #login.isLogin .registered_users {
    float: none;
    margin: 32px auto 0;
    width: 490px;
  }

  /* エラーメッセージ調整 */
  .loginPage .error-msg .txt {
    display: block;
    margin-bottom: .5em;
    font-size: 13px;
  }
  .loginPage .error-msg .note {
    display: inline-block;
    line-height: 1.7;
    font-size: 11px;
    font-weight: 400;
  }
  .loginPage .error-msg .note a {
    text-decoration: underline;
    color: inherit !important;
  }
  .loginPage .toSendpassword a {
    text-underline-offset: .5em;
  }

  /* 旧ユーザーへの案内 */
  .loginPage .-js-legacy_member_info a {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #888;
    margin-top: 3em;
    text-decoration: none;
  }
  .loginPage .-js-legacy_member_info i svg {
    width: 1em;
    height: 1em;
    margin-right: .2em;
  }
  .loginPage .-js-legacy_member_info:hover {
    opacity: .7;
  }

}