@charset "utf-8";

html, body{
  background-color: var(--base1);
}

html{
  position: relative;

  min-height: 100dvh;
}

/* ================================================== */

/* ログインセクション */

div#login{
  display: block;

  width: 80%;
  height: fit-content;

  margin: calc((100dvh - 35.5rem - 7.25rem) / 2) auto 4rem auto;
}

div#login>h1{
  display: block;

  width: 100%;
  height: fit-content;

  margin: 0;
  padding: 0;

  color: var(--text1);
  font-weight: 400;
  font-size: 3rem;
  font-family: Noto Sans JP, sans-serif;

  text-decoration: none;
  text-align: center;
  line-height: 3.5rem;
  letter-spacing: 0;
}

/* ================================================== */

/* ログインフォーム */

div#login>form{
  display: flex;
  flex-direction: column;
  gap: 2rem;

  width: 100%;
  height: 21rem;

  margin: 5rem auto 0 auto;
  padding: 0;
}

div#login>form>input{
  display: block;

  width: 100%;
  height: 5rem;

  margin: 0;
  padding: 0 1.5rem;

  border: 1px solid var(--base4);
  border-radius: 0.5rem;
  
  box-sizing: border-box;
  
  background-color: var(--base2);

  color: var(--text1);
  font-weight: 400;
  font-size: 2rem;
  font-family: Noto Sans JP, sans-serif;

  text-decoration: none;
  text-align: left;
  line-height: 5rem;
  letter-spacing: 0;
}

div#login>form>button{
  display: block;

  width: 100%;
  height: 5rem;

  margin: 2rem auto 0 auto;
  padding: 0 4rem;

  border: none;
  border-radius: 1rem;

  background-color: var(--green3);

  color: var(--base1);
  font-weight: 400;
  font-size: 2rem;
  font-family: Noto Sans JP, sans-serif;

  text-decoration: none;
  text-align: center;
  line-height: 5rem;
  letter-spacing: 0;
}

/* ================================================== */

/* お困りの場合 */

body>p{
  display: block;

  width: 100%;
  height: fit-content;

  margin: 2rem auto 0 auto;
  padding: 0;

  color: var(--text1);
  font-weight: 400;
  font-size: 2rem;
  font-family: Noto Sans JP, sans-serif;

  text-decoration: none;
  text-align: center;
  line-height: 3rem;
  letter-spacing: 0;
}

body>p>a{
  display: inline;

  width: auto;
  height: 2rem;

  margin: 0;
  padding: 0 0.125rem;

  color: var(--green3);
  font-weight: 500;
  font-size: 2rem;
  font-family: Noto Sans JP, sans-serif;

  text-decoration: underline;
  text-align: center;
  line-height: 2rem;
  letter-spacing: 0;
}

/* ================================================== */

body>p#loginTrouble{
  position: absolute;
  bottom: calc(7.25rem + 2rem);
}

/* ================================================== */

footer{
  position: absolute;
  bottom: 0;
  left: 0;
  width: 322px;
}

footer>h4#copyright{
  margin: 0;
}