@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@700&display=swap");
input {
  background: #edf6f6;
  border: 1px solid #CCCCCC;
  border-radius: 20px;
  -webkit-border-radius: 20px;
  padding: 8px 16px;
  font-size: 11px;
  width: 100%;
}

@media (min-width: 420px) {
  input {
    font-size: calc(11px + 1 * (100vw - 420px) / 600);
  }
}

@media (min-width: 1020px) {
  input {
    font-size: 12px;
  }
}

input:focus {
  border: 2px solid #1abc9c;
  box-shadow: 0 0 7px #1abc9c;
}

main {
  display: block;
  background: url(/images/tsel/front/bg_login.png) no-repeat top center/100%;
  min-height: 90vh;
}

main .login {
  padding: 16% 0;
}

@media screen and (max-width: 540px) {
  main .login {
    padding: 16% 3%;
  }
}

main .login_head {
  width: 60%;
  margin: 0 auto 40px;
}

@media screen and (max-width: 540px) {
  main .login_head {
    width: 100%;
    margin: 0 auto 10%;
  }
}

main .login_head .lang {
  margin-left: auto;
  width: 220px;
}

main .login_box {
  width: 25%;
  min-width: 360px;
  margin: 0 auto 80px;
}

@media screen and (max-width: 540px) {
  main .login_box {
    width: 86%;
    min-width: initial;
    margin-bottom: 15%;
  }
}

@media screen and (max-width: 540px) and (-ms-high-contrast: none) {
  main .login_box {
    min-width: none;
  }
}

main .login_box .logo {
  width: 100px;
  min-width: 82px;
  margin: 0 auto 32px;
}

@media screen and (max-width: 540px) {
  main .login_box .logo {
    min-width: initial;
  }
}

@media screen and (max-width: 540px) and (-ms-high-contrast: none) {
  main .login_box .logo {
    min-width: none;
  }
}

main .login_list {
  margin-bottom: 32px;
}

main .login_list li {
  margin-bottom: 24px;
}

main .login_list li:last-child {
  margin-bottom: 0;
}

main .login_button {
  width: 70%;
  margin: 0 auto;
  text-align: center;
}

main .login_sns {
  width: 35%;
  min-width: 380px;
  margin: 0 auto;
}

@media screen and (max-width: 540px) {
  main .login_sns {
    width: 90%;
    min-width: initial;
  }
}

@media screen and (max-width: 540px) and (-ms-high-contrast: none) {
  main .login_sns {
    min-width: none;
  }
}

main .login_sns .sns_button {
  border-radius: 4px;
  -webkit-border-radius: 4px;
}

main .login_sns .sns_button a {
  display: flex;
  justify-content: center;
  align-items: center;
}

main .login_sns .sns_button .icon {
  margin-right: 16px;
  fill: #fff;
}

@media screen and (max-width: 800px) {
  main .login_sns .sns_button .icon {
    margin-right: 2%;
  }
}

main .login_sns .sns_button .txt {
  width: auto;
}

main .login_facebook {
  background: #1877f2;
  margin-bottom: 16px;
}

@media screen and (max-width: 800px) {
  main .login_facebook {
    margin-bottom: 2%;
  }
}

main .login_facebook a {
  color: #fff;
  padding: 8px 16px;
}

main .login_google {
  border: 1px solid #b7b0ac;
}

main .login_google a {
  color: #1a1a1a;
  padding: 7px 16px;
}

main .login_google .icon .cls-1 {
  fill: #ffc107;
}

main .login_google .icon .cls-2 {
  fill: #ff3d00;
}

main .login_google .icon .cls-3 {
  fill: #4caf50;
}

main .login_google .icon .cls-4 {
  fill: #1976d2;
}

/*# sourceMappingURL=mypage-login.css.map */