@charset "UTF-8";

/*body class*/
.page-login {

  /*全体ラッパー*/
  .wrapper-login {
    --color-text: var(--color-muted);
    color: var(--color-text);
    min-height: var(--sz-dvh-100);
    width: var(--sz-full);
    padding-block: var(--space-16);
    padding-inline: clamp(var(--space-12), calc(12 / 400 * 100vw), var(--space-16));
    display: grid;
    grid-template-rows: 1fr auto;
    gap: var(--space-16);

    /* 背景画像 */
    background-image: url("../../images/bg/texture-01.webp");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    /* フォールバック */
    background-color: var(--color-bg-gray);
    @media (max-width: 499px) {
    }
  }


  /*main*/
  .page-main {
    --color-text: var(--color-text);
    max-width: 51.2rem;
    width: var(--sz-full);
    height: min-content;
    margin: auto;
    background: var(--color-bg-white);
    border: 1px solid var(--color-border-100);
    border-radius: var(--radius-16);
    box-shadow: 0 5px 10px var(--shadow-5);
    padding: var(--space-64) var(--space-48) var(--space-48);
    @media (max-width: 499px) {
      padding: calc(32 / 400 * 100vw) calc(32 / 400 * 100vw) calc(24 / 400 * 100vw);
    }
  }


  /*ロゴ*/
  .heading {
    height: var(--space-48);
    text-align: center;

    img {
      display: inline-block;
      height: var(--sz-48);
      @media (max-width: 499px) {
        max-width: calc(148 / 400 * 100vw);
      }
    }
  }


  /*ログイン（サインインしてください）*/
  .title-login {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    width: 100%;
    margin-top: var(--space-32);
    @media (max-width: 499px) {
      margin-top: calc(20 / 400 * 100vw);
    }

    .text-login {
      --color-text: var(--color-black);
      font-size: var(--fs-32);
      color: var(--color-text);
      display: inline-flex;
      align-items: center;
      @media (max-width: 499px) {
        font-size: calc(24 / 400 * 100vw);
        font-size: var(--fs-24);
      }
      @media (max-width: 299px) {
        font-size: calc(32 / 400 * 100vw);
      }
    }

    .icon-key {
      width:  var(--sz-24);
      height: var(--sz-24);
      margin-right: var(--space-10);
      @media (max-width: 499px) {
        width:  calc(20 / 400 * 100vw);
        height: calc(20 / 400 * 100vw);
        margin-right: calc(6 / 400 * 100vw);
      }
    }

    .text-signin {
      font-size: var(--fs-10);
      margin-left: var(--space-6);
      @media (max-width: 499px) {
        font-size: calc(9 / 400 * 100vw);
      }
    }
  }


  /*コピーライト*/
  .footer {
    color: var(--color-text);
    width: 100%;
    text-align: center;
    font-size: var(--fs-10);
    z-index: 1;
    @media (max-width: 499px) {
      font-size: var(--fs-9);
    }
    @media (max-width: 299px) {
      font-size: calc(12 / 400 * 100vw);
    }

    .copyright {
      display: block;
      font-size: inherit;
    }

  }

  /*パスワードを表示する*/
  .block-show-password {
    margin-top: var(--space-8);

    label {
      display: inline-grid;
      grid-template-columns: var(--space-16) 1fr;
      gap: var(--space-4);
      place-items: center;
    }

    .checkbox-show-password {
      transform: scale(calc(10 / 12.98));
      @media (max-width: 499px) {
        transform: scale(calc(9 / 12.98));
      }
    }

    .text-show-password {
      line-height: 2;
      font-size: var(--fs-11);
      @media (max-width: 499px) {
        font-size: var(--fs-10);
      }
    }
  }


  /*ログインボタン*/
  .block-btn-login {
    text-align: center;
    margin-top: var(--space-16);
    @media (max-width: 499px) {
      margin-top: calc(16 / 400 * 100vw);
    }
  }


  .button-login {
    font-size: var(--fs-16);
    background-color: var(--color-primary);
    border: 0;
    color: var(--color-white);
    padding: 0;
    border-radius: var(--radius-5);
    cursor: pointer;
    transition: background-color 0.4s ease-in-out;
    display: inline-grid;
    grid-template-columns: repeat(2, auto);
    gap: var(--space-8);
    place-items: center;
    place-content: center;
    min-width: var(--sz-136);
    min-height: var(--sz-44);
    @media (max-width: 499px) {
        font-size: var(--fs-15);
        width: var(--sz-full);
        min-height: var(--sz-48);
    }

    .icon {
      width:  var(--sz-12);
      height: var(--sz-12);
      background-size: var(--sz-12);
      background-position: 50%;
      background-repeat: no-repeat;
      background-image: url('data:image/svg+xml,%3Csvg viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="m4.5 2.625c0-0.20711 0.16789-0.375 0.375-0.375h6c0.2071 0 0.375 0.16789 0.375 0.375v6.75c0 0.20711-0.1679 0.375-0.375 0.375h-6c-0.20711 0-0.375-0.16789-0.375-0.375v-1.5c0-0.20711-0.16789-0.375-0.375-0.375s-0.375 0.16789-0.375 0.375v1.5c0 0.62132 0.50368 1.125 1.125 1.125h6c0.6213 0 1.125-0.50368 1.125-1.125v-6.75c0-0.62132-0.5037-1.125-1.125-1.125h-6c-0.62132 0-1.125 0.50368-1.125 1.125v1.5c0 0.20711 0.16789 0.375 0.375 0.375s0.375-0.16789 0.375-0.375v-1.5z" clip-rule="evenodd" fill="%23fff" fill-rule="evenodd"/%3E%3Cpath d="m8.8902 6.2652c0.14644-0.14644 0.14644-0.38388 0-0.53032l-2.25-2.25c-0.14644-0.14645-0.38388-0.14645-0.53032 0-0.14645 0.14644-0.14645 0.38388 0 0.53032l1.6098 1.6098h-6.5947c-0.20711 0-0.375 0.16789-0.375 0.375s0.16789 0.375 0.375 0.375h6.5947l-1.6098 1.6098c-0.14645 0.14645-0.14645 0.38389 0 0.53034 0.14644 0.14644 0.38388 0.14644 0.53032 0l2.25-2.25z" clip-rule="evenodd" fill="%23fff" fill-rule="evenodd"/%3E%3C/svg%3E%0A');
    }
  }


  /*入力項目*/
  .form-group {
    width: 100%;
    margin-top: var(--space-16);
    @media (max-width: 499px) {
      margin-top: calc(16 / 400 * 100vw);
    }
  }

  .form-label {
    display: flex;
    align-items: center;
    position: relative;
    width: var(--sz-full);

    .text-label {
      color: var(--color-border-200);
      font-size: var(--fs-13);
      position: absolute;
      margin-left: var(--space-16);
      background: var(--color-bg-white);
      width: max-content;
      transform-origin: 0 0;
      transition: .26s;
      @media (max-width: 499px) {
        font-size: calc(13 / 400 * 100vw);
      }
    }

    .form-input {
      --color-text: var(--color-black);
      color: var(--color-text);
      padding: var(--space-12);
      width: 100%;
      border: 1px solid var(--color-form-border);
      border-radius: var(--radius-8);
      font-size: var(--fs-16);
      cursor: text;

      /* フォーカスしたら移動 */
      &:focus {
        outline: 1px solid var(--color-primary);
        + .text-label {
          color: var(--color-primary);
          display: inline-block;
          padding-inline: var(--space-6);
          transform: translateY(-1.65em) scale(calc(8 / 14));
        }
      }

      /* 入力済みだったら移動後の表示のままにする */       
      &:not(:placeholder-shown),
      &:-webkit-autofill {
        + .text-label {
          padding-inline: var(--space-8);
          transform: translateY(-1.65em) scale(calc(8 / 14));
        }
      }
      /* オートフィル時の青い背景色を白に上書き */
      &:-webkit-autofill,
      &:-webkit-autofill:hover,
      &:-webkit-autofill:focus,
      &:-webkit-autofill:active {
        -webkit-box-shadow: 0 0 0px 1000px var(--color-bg-white) inset !important;
        -webkit-text-fill-color: var(--color-black) !important;
        font-size: var(--fs-16) !important;
        transition: background-color 5000s ease-in-out 0s;
      }
    }
  }


  /* サブリンク */
  .tips-login {
    margin-top: var(--space-48);
    @media (max-width: 499px) {
      margin-top: calc(40 / 400 * 100vw);
    }
  }


  .title-tips-login {
    color: var(--color-black);
    font-size: var(--fs-14);
    font-weight: var(--fw-medium);
    display: flex;
    align-items: center;
    @media (max-width: 499px) {
      font-size: calc(13 / 400 * 100vw);
    }

    .icon {
      width:  var(--sz-14);
      height: var(--sz-14);
      display: flex;
      align-items: center;
      margin-right: var(--space-8);
      @media (max-width: 499px) {
        width:  calc(13 / 400 * 100vw);
        height: calc(13 / 400 * 100vw);
        margin-right: calc(8 / 400 * 100vw);
      }
    }

    .icon-tips {
      width:  var(--sz-14);
      height: var(--sz-14);
      @media (max-width: 499px) {
        width:  calc(13 / 400 * 100vw);
        height: calc(13 / 400 * 100vw);
      }
    }
  }


  .list-tips-login {
    margin-left: calc(var(--space-8) + var(--sz-14));
    @media (max-width: 499px) {
      font-size: calc(9 / 400 * 100vw);
      margin-top: calc(1 / 400 * 100vw);
      margin-left: calc(20 / 400 * 100vw); 
    }

    li {
      margin-top: var(--space-4);
      @media (max-width: 499px) {
        margin-top: calc(4 / 400 * 100vw);
      }
    }
  }


}