/* 
   Project Sign In CSS
*/
/* ========================
   レイアウト
   ======================== */
.p-signin__container {
  position: relative;
}

.p-signup__bg {
  display: block;
  position: absolute;
  width: 500px;
  height: 456px;
  border-radius: 10000px;
  opacity: 0.8;
  z-index: -1;
  background: linear-gradient(310deg, var(--color-surface-primary-stop));
  transform: rotate(45deg);
  top: 40px;
  right: -300px;
  filter: blur(80px);

  @media (max-width: 640px) {
    width: 320px;
    height: 280px;
    top: 600px;
    right: -200px;
    filter: blur(40px);
  }
}

.p-signin__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 48px;
  align-items: start;
  justify-content: space-between;

  @media (min-width: 1024px) {
    flex-wrap: nowrap;
  }
}

.p-signin__footer-inner {
  padding: 40px;

  @media (max-width: 640px) {
    padding: 24px;
  }

  & .l-footer__nav-list--sub {
    margin: 0;
  }
}

/* ========================
   フォーム
   ======================== */
.p-signin__logo {
  margin: 0;
}

.p-signin__logo-image {
  height: 32px;
}

.p-signin__main {
  justify-items: center;
  max-width: 453px;
  width: 100%;

  @media (max-width: 640px) {
    max-width: 100%;
  }

  & #wpmem_login {
    width: 100%;
    font-family:
      'Noto Sans JP', 'Helvetica Neue', Arial, 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo,
      sans-serif;
    font-size: var(--typography-body-size);
    font-weight: var(--typography-body-weight);
    line-height: var(--typography-body-line-height);
    color: var(--color-text-primary);

    & .p-signin__form {
      padding: 48px 40px;
      border-radius: 8px;

      @media (max-width: 640px) {
        padding: 24px;
      }
    }

    /* ボタン ラッパー */
    & .button_div {
      padding: 0;
      text-align: center;
      order: 3;

      /* ログイン状態を保持を非表示にする */
      & input[type='checkbox'],
      & label[for='rememberme'] {
        display: none;
      }
    }

    /* リンク */
    & .link-text {
      padding: 0;
      text-align: left;
      /* 余白追加 */
      margin-top: 8px;

      &:nth-last-child(2) {
        order: 2;
        color: var(--color-surface-secondary);

        /* .o-link */
        font-size: var(--typography-link-size);
        font-weight: var(--typography-link-weight);
        line-height: var(--typography-link-line-height);
        text-decoration: underline;

        &:hover,
        &:focus {
          text-decoration: none;
        }
      }
      &:last-child {
        order: 4;

        & .link-text-register {
          display: grid;
          gap: 24px;
          padding-top: 32px;
          border-top: 1px solid rgba(var(--color-surface-secondary-rgb), 0.64);

          /* .o-heading--2xs */
          font-size: var(--typography-heading-2xs-size);
          font-weight: var(--typography-heading-2xs-weight);
          line-height: var(--typography-heading-2xs-line-height);

          @media (max-width: 640px) {
            gap: 12px;
            padding-top: 24px;
          }

          & a {
            /* base: .o-button */
            display: flex;
            justify-content: center;
            align-items: center;
            flex-shrink: 0;
            border: none;
            cursor: pointer;
            border-radius: 100px;
            text-align: center;
            text-decoration: none;
            text-box: trim-both cap alphabetic;
            transition:
              background-color 0.2s,
              border-color 0.2s,
              color 0.2s;
            /* size: .o-button--lg */
            font-size: var(--typography-button-lg-size);
            font-weight: var(--typography-button-lg-weight);
            line-height: var(--typography-button-lg-line-height);
            gap: 8px;
            height: 52px;
            min-width: 160px;
            padding: 16px 24px;
            /* variants: .o-button--secondary */
            background-color: transparent;
            color: var(--color-gray-900);
            border: 1px solid var(--color-gray-900);

            &:hover,
            &:focus {
              background-color: var(--color-gray-900);
              color: var(--color-common-white);
            }
          }
        }
      }
    }

    /* 各input */
    & input[type='text'],
    & input[type='password'] {
      /* base: .o-input */
      display: flex;
      align-items: center;
      flex-shrink: 0;
      font-size: var(--typography-label-size);
      font-weight: var(--typography-label-weight);
      line-height: var(--typography-label-line-height);
      background-color: var(--color-common-white);
      border-radius: 4px;
      border: 1px solid rgba(var(--color-surface-secondary-rgb), 0.4);
      transition: border-color 0.2s;
      appearance: none;
      cursor: text;

      /* size: .o-input--md */
      gap: 8px;
      height: 44px;
      min-width: 120px;
      padding: 12px 16px;

      margin-top: 12px;

      &:focus {
        border-color: rgba(var(--color-surface-secondary-rgb), 0.8);
        outline: none;
      }
    }

    /* ボタン  */
    /* size: .o-button--lg */
    & .p-signin__button {
      font-size: var(--typography-button-lg-size);
      font-weight: var(--typography-button-lg-weight);
      line-height: var(--typography-button-lg-line-height);
      width: 100%;

      /* 余白追加 */
      margin-top: 8px;
    }
  }

  /* メッセージ */
  & .wpmem_msg {
    width: 100%;
    padding: 24px;
    margin: 0;
    border: 0;
    border-radius: 8px;
    background-color: var(--color-error-100);
    color: var(--color-error-900);
    font-size: var(--typography-error-md-size);
    font-weight: var(--typography-error-md-weight);
    line-height: var(--typography-error-md-line-height);

    @media (max-width: 640px) {
      padding: 12px;
    }
  }
}

.p-signin__field {
  width: 100%;
  order: 1;

  & label {
    font-size: var(--typography-heading-2xs-size);
    font-weight: var(--typography-heading-2xs-weight);
    line-height: var(--typography-heading-2xs-line-height);
  }
}

/* ========================
   メリットセクション
   ======================== */
.p-signin__advantage-heading {
  text-box: trim-both cap alphabetic;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.p-signin__advantage-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 547px;
}

.p-signin__advantage-item {
  padding: 24px;
  border-radius: 16px;
  min-height: 260px;
  align-content: flex-start;

  @media (max-width: 640px) {
    padding: 40px 24px;
    min-height: auto;
  }
}

.p-signin__advantage-title {
  word-break: keep-all;
  overflow-wrap: anywhere;
}