@charset "UTF-8";

/**********************************************************************
  ユーザーサイト用css
**********************************************************************/

.user-guide .container,
.user-regi .container,
.user-login .container,
.user-passreset .container,
.user-profile .container {
  /* メンバーシップ Start */
  .swpm-registration-widget-form,
  .swpm-login-widget-form,
  .swpm-pw-reset-widget-form, 
  .swpm-edit-profile-form { width: 100%; }
  .swpm_error {
    margin-bottom: 10px;
    padding: 10px;
    color: var(--color-text-red);
    border: 1px solid var(--color-back-red);

    * { color: var(--color-text); }
  }
  /* メンバーシップ End */

  /* form内 Start */
  form {
    label, a { line-height: 2.0rem; }
    input[type=submit], button {
      display: block;
      margin: 20px auto;
      padding: 0.8rem;
      width: 40%;
    }
    input[type=text],
    input[type=password] { width: 100%; }
    .swpm-login-action-msg {
      span {
        display: inline-block;
        color: var(--color-text-red);

        &:first-child { margin-top: 1.0rem; }
      }
    }
    .swpm-form-desc * { color: var(--color-text-red); }
    .swpm-form-row.error .swpm-form-field {
      border-color: var(--color-back-red);
      outline-color: var(--color-back-red);
    }
    .swpm-form-row.error .swpm-form-desc { color: var(--color-text-red); }
    .swpm-membership-level-row,
    .swpm-zipcode-row,
    .swpm-state-row,
    .swpm-city-row,
    .swpm-street-row,
    .swpm-phone-row,
    .swpm-country-row { display: none; }

  }
  /* form内 End */

  /* 登録案内用 Start */
  .user-guide-contents {
    display: flex;
    justify-content: space-between;
    align-items: start;
    flex-direction: row;
    gap: 1.5rem;

    > div {
      margin: 20px auto;
      padding: 50px;
      min-height: 450px;

      /* left */
      &:nth-child(1) {
        width: 60%;
        background-image: url('../images/user-guide.jpg');
        background-size: cover;
        background-repeat: no-repeat;

        > p {
          margin-bottom: 1.5rem;
          width: 100%;
          line-height: 2.5rem;
          -webkit-text-stroke: 3px var(--color-white);
          text-stroke: 3px var(--color-white);
          paint-order: stroke;
        }

        div {
          display: flex;
          justify-content: space-between;
          align-items: center;
          flex-direction: row;
          gap: 2.0rem;
          margin: 0 auto;

          .button-block a {
            padding-left: 50px;
            padding-right: 50px;
            line-height: 1.3rem;
            background-color: var(--color-back-red);
            border-radius: 30px;
          }
          p {
            padding: 10px 50px;
            line-height: 1.3rem;
            font-size: 0.9rem;
            text-align: center;
            color: var(--color-white);
            background-color: var(--color-site-subkey);
            border: 1px solid var(--color-white);
            box-shadow: 0px 1.5px 5px var(--color-shadow);
            border-radius: 30px;
          }
        }
      }

      /* right */
      &:nth-child(2) {
        width: 40%;
        background-color: var(--color-back-gray);
      }
    }
  }
  /* 登録案内用 End */

  /* 登録案内用以外 Start */
  .user-contents {
    display: flex;
    justify-content: start;
    align-items: start;
    flex-direction: column;
    gap: 1.5rem;
    margin: 20px auto;
    padding: 50px;
    width: 60%;
    background-color: var(--color-back-gray);
  }
  /* 登録案内用以外 End */
}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/* 1279px（タブレット）以下 */
@media screen and (max-width: 1279px) {
  /* */
}

/* 767px（スマホ）以下 */
@media screen and (max-width: 767px) {
  .user-guide .container,
  .user-regi .container,
  .user-login .container,
  .user-passreset .container,
  .user-profile .container {
    /* 登録案内用 Start */
    .user-guide-contents {
      flex-direction: column;
      gap: 0;

      > div {
        padding: 40px 30px;

        /* left */
        &:nth-child(1) {
          width: 100%;
          div { flex-direction: column; }
        }

        /* right */
        &:nth-child(2) {
          width: 100%;
        }
      }
    }

    /* 登録案内用以外 Start */
    .user-contents {
      padding: 30px;
      width: 100%;
    }
  }
}