@charset "UTF-8";
html, body {
  height: 100%;
}

html {
  font-size: 16px;
  font-size: min(16px, 1.2903225806vw);
}
@media screen and (max-width: 767px) {
  html {
    font-size: 4.2666666667vw;
  }
}

body, button, input, textarea, select {
  color: #000000;
  font-family: "YakuHanJP", "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;
  line-height: 1.7;
  font-feature-settings: "palt";
  letter-spacing: 0.05em;
}
@media screen and (max-width: 767px) {
  body, button, input, textarea, select {
    line-height: 1.5;
  }
}

h1, h2, h3, h4, h5, h6 {
  font-size: inherit;
  margin: 0;
}

ol, ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

li {
  margin: 0;
  padding: 0;
}

dl, dt, dd {
  margin: 0;
  padding: 0;
}

p {
  margin: 0 0 1em;
}
p:last-child {
  margin-bottom: 0;
}

a:link, a:active {
  color: #808080;
}

a:hover {
  color: #000;
}

body {
  background: url(../images/bg.jpg) no-repeat 50% 50%;
  background-size: cover;
  margin: 0;
}

.site-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.login-form {
  max-width: 30rem;
  margin: 2.5rem auto;
  padding: 2.5rem 1.875rem 2.5rem;
  border: 1px solid #DDD;
  border-radius: 10px;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.95);
  text-align: center;
}
.login-form .logo {
  margin: 0 0 1.5em;
  font-size: 1em;
}
.login-form .logo .main {
  display: inline-block;
  content: "";
  width: 11.71875rem;
  height: 2.15625rem;
  background: url(../images/logo.png) no-repeat 0 0;
  background-size: 11.71875rem 2.15625rem;
  text-indent: -9999px;
  margin-bottom: 0.5em;
}
.login-form .logo .sub {
  display: block;
  font-size: 0.75rem;
  font-weight: bold;
  letter-spacing: 0.1em;
  color: #808080;
  white-space: nowrap;
}
.login-form .fields {
  margin: 1.5em 0 2em;
}
.login-form .fields .text-field:first-child {
  border-radius: 5px 5px 0 0;
}
.login-form .fields .text-field:last-child {
  margin-top: -1px;
  border-radius: 0 0 5px 5px;
}
.login-form .fields .text-field:not(:first-child):not(:last-child) {
  margin-top: -1px;
  border-radius: 0;
}
.login-form .fields .text-field:first-child:last-child {
  border-radius: 5px;
}
.login-form .fields > .row {
  display: flex;
  align-items: center;
}
@media screen and (max-width: 767px) {
  .login-form .fields > .row {
    flex-direction: column;
    align-items: flex-start;
  }
}
.login-form .fields > .row:not(:last-child) {
  margin-bottom: 1em;
}
.login-form .fields > .row > .col:first-child {
  width: 30%;
  text-align: left;
}
.login-form .fields > .row > .col:last-child {
  width: 70%;
}
.login-form .fields > .row > .col > .row, .login-form .fields > .row > .col.row {
  display: flex;
  align-items: center;
}
.login-form .fields > .row > .col > .row > .col:not(:first-child):not(:last-child), .login-form .fields > .row > .col.row > .col:not(:first-child):not(:last-child) {
  margin: 0 0.5em;
}
.login-form .fields > .row > .col-auto:not(:last-child) {
  margin-right: 1em;
}
.login-form dl.fields {
  text-align: left;
}
.login-form dl.fields dt {
  font-weight: bold;
  margin-bottom: 0.5em;
}
.login-form dl.fields dd {
  margin-bottom: 1em;
}
.login-form .box {
  background: rgba(0, 61, 255, 0.1);
  border-radius: 10px;
  padding: 1.5em 1.5em 1px;
  margin-bottom: 1.5em;
  text-align: left;
}
.login-form .persistent {
  text-align: left;
  margin-top: -1em;
  margin-bottom: 1.5em;
}
.login-form .txtlink {
  font-size: 0.75rem;
  color: #808080;
}

.eye {
  display: block;
  margin: -2em 1em 0 0;
  text-align: right;
}
.eye::before {
  display: inline-block;
  content: "";
  width: 1em;
  height: 1em;
  background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgaWQ9IkxheWVyXzIiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDMyIDMyOyIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgMzIgMzIiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxnPjxwYXRoIGQ9Ik0yNi40MTgyNywxMC40ODkzMmwtNC42NjkxOSw0LjY2OTI1YzAuMTY2MDIsMC42MTEzMywwLjIzNjc2LDEuMjg5OTgsMC4xNzk5MywxLjkzOTcgICBjLTAuMTk3MDIsMy42Mzc1Ny0zLjk0MDY3LDYuMzA3OC03LjQzODg0LDUuMzE5MDljMC4wMDAwNiwwLTMuMTk5NDYsMy4xOTk1Mi0zLjE5OTQ2LDMuMTk5NTIgICBjNy42MDA3NywyLjE3NzM3LDE2LjExMTQ1LTEuMzEyMDEsMjAuMDA2NzctOC4xOTg3OWMwLjI3MDAyLTAuNDU5ODQsMC4yNzAwMi0xLjAzOTc5LDAuMDAwMDYtMS40OTk2MyAgIEMzMC4wNTMyOCwxMy43NDA5NywyOC4zNzkyNywxMS45NTk3OCwyNi40MTgyNywxMC40ODkzMnoiLz48cGF0aCBkPSJNMC43MDI1MSwxNS45MTg1MkMwLjQzMjUsMTYuMzc4MywwLjQzMjUsMTYuOTU4MjUsMC43MDI0NSwxNy40MTgyMWMxLjI1OTgzLDIuMTY5NjIsMi45Mjk1LDMuOTk5MzMsNC44ODkxNiw1LjQxOTA3ICAgTDMuNDgzNCwyNC45NDU2MmMtMC41ODk5LDAuNTg5ODQtMC41ODk5LDEuNTI5NzIsMCwyLjExOTYzYzAuNTg1NzUsMC41ODQ5LDEuNTMzOTQsMC41ODUyNywyLjExOTYzLDBMMjUuNjI5ODgsNy4wMzg0NSAgIGMxLjMyMzYxLTEuMzkyODItMC43NzUwMi0zLjQ2NzA0LTIuMTQ5NzgtMi4wODk1NGMwLjAwMDA2LTAuMDAwMDYtMi43ODA4OCwyLjc4MDgyLTIuNzgwODgsMi43ODA4MiAgIEMxMy4xMjQ4Miw1LjUxNTc1LDQuNTg0ODQsOS4wNTE1NywwLjcwMjUxLDE1LjkxODUyeiBNMTcuNTA5ODMsMTAuOTE5MzFjLTAuMDAwMDYtMC4wMDAwNi03LjI1ODkxLDcuMjU4NzktNy4yNTg5MSw3LjI1ODc5ICAgYy0wLjEyOTk0LTAuNDc5OTgtMC4xOTk5NS0wLjk4OTkzLTAuMTk5OTUtMS41MDk3N0M5Ljk5Mzk2LDEyLjgzODMyLDEzLjgyNzY0LDkuODg0NDYsMTcuNTA5ODMsMTAuOTE5MzF6Ii8+PC9nPjwvc3ZnPg==") no-repeat 0 0;
  background-size: 1em 1em;
}
.eye.-open::before {
  display: inline-block;
  content: "";
  width: 1em;
  height: 1em;
  background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgaWQ9IkxheWVyXzIiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDMyIDMyOyIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgMzIgMzIiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxnPjxwYXRoIGQ9Ik0xNiw2LjQxMTU2Yy02LjI4ODk0LDAtMTIuMTQ4MDcsMy4zODk0Ny0xNS4yOTc1NSw4LjgzODU2Yy0wLjI2OTk2LDAuNDU5OS0wLjI2OTk2LDEuMDM5NzksMCwxLjQ5OTc2ICAgQzMuODUxOTMsMjIuMTk5MDQsOS43MTEwNiwyNS41ODg0NCwxNiwyNS41ODg0NHMxMi4xNDgwNy0zLjM4OTQsMTUuMjk3NTUtOC44Mzg1NmMwLjI2OTk2LTAuNDU5OTYsMC4yNjk5Ni0xLjAzOTg2LDAtMS40OTk3NiAgIEMyOC4xNDgwNyw5LjgwMTAzLDIyLjI4ODk0LDYuNDExNTYsMTYsNi40MTE1NnogTTE2LDIxLjk0OTFjLTMuMjc5NDgsMC01Ljk0OTA0LTIuNjY5NjItNS45NDkwNC01Ljk0OTEgICBTMTIuNzIwNTIsMTAuMDUwOTYsMTYsMTAuMDUwOTZTMjEuOTQ5MDQsMTIuNzIwNTIsMjEuOTQ5MDQsMTZTMTkuMjc5NDgsMjEuOTQ5MSwxNiwyMS45NDkxeiIvPjxjaXJjbGUgY3g9IjE2IiBjeT0iMTYiIHI9IjIuOTQ5NTIiLz48L2c+PC9zdmc+") no-repeat 0 0;
  background-size: 1em 1em;
}

.form-table {
  border-collapse: collapse;
  border-top: 1px solid #DDD;
  margin: 2em 0 2em;
}
.form-table th, .form-table td {
  text-align: left;
  padding: 0.75em 0.5em;
  border-bottom: 1px solid #DDD;
}

.text-field, .text-area, .select-box {
  width: 100%;
  padding: 0.5em 1em;
  box-sizing: border-box;
  border: 1px solid #cccccc;
  border-radius: 5px;
  box-shadow: none;
  font-size: 16px;
  vertical-align: middle;
}

.select-box {
  padding: 0.8em 0.5em;
}

.error,
.attention {
  color: #F00;
  text-align: left;
}

.error-messages {
  color: #F00;
  text-align: center;
}

.button-large {
  position: relative;
  display: inline-block;
  background: linear-gradient(135deg, #0006ff 0, #0072ff 100%);
  border: 1px solid #003DFF;
  padding: 0.44em 1.111em;
  min-width: 16.666em;
  color: #FFFFFF;
  font-size: 1.125em;
  font-weight: bold;
  box-sizing: border-box;
  text-decoration: none;
  transition: all 0.5s;
  outline: 0;
  border-radius: 27px;
}
.button-large:link {
  color: #FFF;
}
.button-large:hover {
  opacity: 0.7;
  color: #FFF;
}
.button-large.-outline {
  color: #003DFF;
  background: none;
}
.button-large.-login::after {
  position: absolute;
  right: 1.5em;
  top: calc(50% - 0.5em);
  display: inline-block;
  content: "";
  width: 1em;
  height: 1em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17.066' height='17.066' viewBox='0 0 17.066 17.066'%3E%3Cpath id='パス_439' data-name='パス 439' d='M7.779,30.713a1.067,1.067,0,1,0,1.508,1.508l3.2-3.2a1.066,1.066,0,0,0,0-1.508l-3.2-3.2a1.067,1.067,0,1,0-1.508,1.508L9.158,27.2H1.067a1.067,1.067,0,1,0,0,2.133H9.158Z' transform='translate(0 -19.734)' fill='%23FFFFFF'/%3E%3Cpath id='パス_440' data-name='パス 440' d='M35.733,0H25.067A1.066,1.066,0,0,0,24,1.067V3.2a1.067,1.067,0,1,0,2.133,0V2.133h8.533v12.8H26.133V13.866a1.067,1.067,0,1,0-2.133,0V16a1.066,1.066,0,0,0,1.067,1.067H35.733A1.066,1.066,0,0,0,36.8,16V1.067A1.066,1.066,0,0,0,35.733,0Z' transform='translate(-19.733 0)' fill='%23FFFFFF'/%3E%3C/svg%3E%0A") no-repeat 0 0;
  background-size: 1em 1em;
}
.button-large.-secondary {
  color: #003DFF;
  background: transparent;
}

.button-small {
  position: relative;
  display: inline-block;
  border: 1px solid #f5f5f5;
  border-radius: 5px;
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
  background: #f5f5f5;
  padding: 0.33em 0.833em;
  color: #000000;
  font-size: 0.75em;
  font-weight: bold;
  box-sizing: border-box;
  text-decoration: none;
  transition: all 0.5s;
  outline: 0;
}

.link-utilty {
  color: #808080;
  font-size: 0.75rem;
  font-weight: bold;
  text-decoration: none;
}
.link-utilty:hover {
  color: #808080;
  text-decoration: underline;
}

.note-list {
  font-size: 0.8125rem;
  text-align: left;
}
.note-list > li {
  text-indent: -1em;
  padding-left: 1em;
}

@media screen and (max-width: 640px) {
  .login-form {
    width: auto;
    margin: auto 1rem;
  }
  .login-form .logo .sub {
    font-size: 0.6875rem;
  }
  .login-form .button-large {
    min-width: 0;
    width: 100%;
  }
}
.button-avatar {
  float: right;
}

#select-avatar {
  max-width: 80vw;
}
#select-avatar .title {
  margin-bottom: 10px;
}
#select-avatar .icon-list {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
#select-avatar .icon-list li {
  margin: 0.3125rem;
}
#select-avatar .icon-list img {
  border: 2px solid transparent;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  transition: all 0.2s;
}
#select-avatar .icon-list input[type=radio] {
  display: none;
}
#select-avatar .icon-list input[type=radio]:checked + label img {
  border: 2px solid #003DFF;
  box-shadow: 0 0 10px rgba(0, 61, 255, 0.5);
  transform: scale(1.2);
}
#select-avatar .icon-list label {
  cursor: pointer;
}
#select-avatar .close {
  text-align: center;
  font-size: 0.75rem;
  margin: 0;
}
#select-avatar .close .button-large {
  min-width: 0;
}

/*# sourceMappingURL=style.css.map */