@charset "UTF-8";

/*------------------------------------
MOPM
styles for verification
added 2024/05
--------------------------------------*/

/* =============================================
  Custom Properties
============================================= */
:root {
  /* logo colors */
  --logo-gmo-blue: #005bac;
  --logo-gmo-gray: #5a5858;
  --logo-zcom-red: #d62825;

  /* Qplus colors */
  --qplus-orange1: #fdb33e;
  --qplus-orange2: #ff8a00;
  --qplus-green1: #f1f9f9;
  --qplus-green2: #e5f3f3;
  --qplus-green3: #6cd4d3;
  --qplus-green4: #48b9b7;
  --qplus-green5: #35b1bc;
  --qplus-green6: #218888;
  --qplus-green7: #344845;
  --qplus-green8: #d5e0e0;
  --qplus-green9: #839799;

  /* common colors */
  --common-black1: #222222;
  --common-gray1: #333333;
  --common-gray2: #555555;  /* 85, 85, 85 */
  --common-gray3: #888888;
  --common-gray4: #dddddd;

  /* common variables */
  --variables-spacing1: 0.02em;
  --variables-spacing2: 0.04em;
  --variables-transition1: 0.3s;
  --variables-transition2: 0.5s;
}

/* ===============================================
  Font Setting
  Noto Sans: 400 (normal) / 700 (bold)
=============================================== */
@font-face {
  font-family: "Noto Sans";
  font-style: normal;
  font-weight: 400;
  src: url(../fonts/NotoSansJP-Regular.woff) format("woff");
}

@font-face {
  font-family: "Noto Sans";
  font-style: normal;
  font-weight: 700;
  src: url(../fonts/NotoSansJP-Bold.woff) format("woff");
}


/* ===============================================
  Verification: Common styles
=============================================== */
.verification {
  padding: 0 1.6rem;
}

@media screen and (max-width: 1024px) {
  .verification {
    padding: 0 0.8rem;
  }
}

/* ---------------------------
  main title
--------------------------- */
.verification-maintitle {
  font-size: 1.8rem;
  color: var(--qplus-green5);
  font-weight: 700;

  &::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f023";
    margin-right: .5em;
    opacity: .7;
  }
}

.verification-discription {
  margin-top: 1.6rem;
}


/* ===============================================
  Verification: OTP
=============================================== */
.verification-otp {
  .form-accordion {
    max-width: var(--form-contents3);
    margin-top: 1.2rem;
  }
}

/* ---------------------------
  Date of birth
--------------------------- */
.verification-otp {
  .form-item__birth {
    display: flex;
    column-gap: 0.8rem;

    li {
      flex: 0 1 calc(100% / 3);
    }
  }
}

@media screen and (max-width: 425px) {
  .verification-otp {
    .form-item__birth {
      display: block;

      .form-item__select {
        margin-top: 1rem;
      }
    }
  }
}

.resend-btn-disabled {
  background-color: #f5f5f5;
}