@charset "utf-8";
@import url(https://weloveiconfonts.com/api/?family=fontawesome);

[class*="fontawesome-"]:before {
    font-family: 'FontAwesome', sans-serif;
}

body {
    background: #131616;
    color: #606468;
    font: 87.5%/1.5em 'Open Sans', sans-serif;
    margin: 0;
}

input {
    border: none;
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5em;
    padding: 0;
    -webkit-appearance: none;
}

p {
    line-height: 1.5em;
}

after {
    clear: both;
}

.header-container {
    display: flex;
    justify-content: space-between;
    height: 100%;
    height: 30px;
    max-height: 100%;
    background: rgba(0, 0, 0, 0.15);
    color: #fff;
}

.full-height {
    height: 100% !important;
}

.info-page {
    box-sizing: border-box;
    width: 100%;
    height: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.info-box {
    border: 0;
    width: 80%;
    height: 100%;
}

.btn-flat-border {
    display: inline-block;
    padding: 0.3em 1em;
    text-decoration: none;
    color: #40A2F8;
    border: solid 2px #40A2F8;
    border-radius: 3px;
    transition: .4s;
    margin-bottom: 1em;
}

.btn-margin {
    position:fixed;
    top:20px;
    right:50px;
    transform: scale(1.3); 
}


.btn-flat-border:hover {
    background: #40A2F8;
    color: white;
}

#login h1 {
  color: #40A2F8;
  text-align: center;
  font-style: italic;
    /* text-shadow    : 
       2px  2px 1px white,
      -2px  2px 1px white,
       2px -2px 1px white,
      -2px -2px 1px white,
       2px  0px 1px white,
       0px  2px 1px white,
      -2px  0px 1px white,
       0px -2px 1px white;   */
}

/* このへんidじゃなくてクラスにしたほうが楽だから気が向いたら直す */
#login,
#forgot-password-form,
#auth-code-form,
#forgot-auth-form {
    margin: 50px auto;
    width: 320px;
}


#login frame,
#forgot-password-form frame
#auth-code-form frame {
    margin: auto;
    padding: 22px 22px 22px 22px;
    width: 100%;
    border-radius: 5px;
    background: #282e33;
    border-top: 3px solid #434a52;
    border-bottom: 3px solid #434a52;
}

#login span,
#forgot-password-form span,
#auth-code-form span {
    background-color: #363b41;
    border-radius: 3px 0px 0px 3px;
    border-right: 3px solid #434a52;
    color: #606468;
    display: block;
    float: left;
    line-height: 50px;
    text-align: center;
    width: 50px;
    height: 50px;
}

#login input[type="text"],
#forgot-password-form input[type="text"],
#auth-code-form input[type="text"] {
    background-color: #3b4148;
    border-radius: 0px 3px 3px 0px;
    color: #a9a9a9;
    margin-bottom: 1em;
    padding: 0 16px;
    width: 235px;
    height: 50px;
}

#login input[type="password"], 
#forgot-password-form input[type="password"] {
    background-color: #3b4148;
    border-radius: 0px 3px 3px 0px;
    color: #a9a9a9;
    margin-bottom: 1em;
    padding: 0 16px;
    width: 235px;
    height: 50px;
}

#login input[type="submit"], 
#forgot-password-form input[type="submit"],
#auth-code-form input[type="submit"]{
    background: #b5cd60;
    border: 0;
    width: 100%;
    height: 40px;
    margin-bottom: 1em;
    border-radius: 3px;
    color: white;
    cursor: pointer;
    transition: background 0.3s ease-in-out;
}

#login input[type="submit"]:hover,
#forgot-password-form input[type="submit"]:hover,
#auth-code-form[type="submit"]:hover {
    background: #16aa56;
}

/* パスワード忘れ */
#forgot-password-button {
    cursor: pointer;
}

#send-mail-message { display:none; }

#send-mail-message {
    background-color: #fff;
    border-radius: 10px 10px 10px 10px;
    box-shadow: 0 0 25px 5px #999;
    color: #111;
    padding: 25px;
}

#forgot-password-form h1,
#auth-code-form h1 {
  color: #40A2F8;
  text-align: center;
  font-style: italic;
}

#forgot-password-form p,
#auth-code-form p {
  color: #ffffff;
  text-align: center;
}