@charset "utf-8";

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

html{
  position: relative;

  min-height: 100dvh;
}

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

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

div#signup{
  display: block;

  width: 80%;
  height: fit-content;

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

div#signup>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: 5rem;
  letter-spacing: 0;
}

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

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

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

  width: 100%;
  height: fit-content;

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

div#signup>form>div{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 1.5rem;
}

div#signup>form>div>select{
  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#signup>form>span{
  position: relative;
  
  display: flex;
  flex-direction: column;
  gap: 0.75rem;

  width: 100%;
  height: fit-content;

  margin: 0;
  padding: 0;
}

div#signup>form>span>label{
  display: block;

  width: 100%;
  height: fit-content;

  margin: 0;
  padding: 0;

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

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

div#signup>form>span>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#signup>form>span>button{
  position: absolute;
  top: calc(2rem + 0.75rem);
  right: 0;

  display: block;

  width: 5rem;
  height: 5rem;

  margin: 0;
  padding: 0;

  border: none;

  
  box-sizing: border-box;
  
  background-color: #00000000;

  color: var(--text2);
  font-size: 2rem;

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

div#signup>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: 2rem;

  margin: 2rem auto auto 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: 2rem;
  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#signupTrouble{
  position: absolute;
  bottom: calc(7.25rem + 4rem);
}

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

/* フッター修正 */
footer{
  position: absolute;
  bottom: 0;
  left: 0;
  width: 322px;
}

footer>h4#copyright{
  margin: 0;
}