/* ====================================================
 * ログインボックス
 * ==================================================*/
div#login{
  position: relative;
  width: 200px;
  height: 400px;
  margin: auto auto;
  margin-top: 100px;
  overflow: hidden;
}

  /* ----------------------------------------------------
   * ロゴ
   * --------------------------------------------------*/
  div#login div.logo{
    margin: auto auto;
    width: 120px;
    height: 120px;
    border-radius: 60px;
    -webkit-border-radius: 60px;
    -moz-border-radius: 60px;
    background-image: url("/img/icon/mi1.png");
    background-size: 120px auto;
    background-position: center center;
  }

  /* ----------------------------------------------------
   * 空白
   * --------------------------------------------------*/
  div#login div.space{
    height: 10px;
    
  }

  /* ----------------------------------------------------
   * ログインボックス
   * --------------------------------------------------*/
  div#login div.login-box{
    position: absolute;
  }
    div#login div.login-box div.account-box{
      position: absolute;
      top: 0px;
      left: 0px;
    }
    div#login div.login-box div.passwd-box{
      position: absolute;
      top: 0px;
      left: 200px;
    }

  /* ----------------------------------------------------
   * 名前
   * --------------------------------------------------*/
  div#login div.name{
    margin: auto auto;
    margin-top: 15px;
    margin-bottom: 2px;
    text-align: center;
  }
    div#login div.name span{
      font-size: 12px;
      margin-left: 8px;
    }
  div#login div.title{
    margin: auto auto;
    margin-top: 15px;
    margin-bottom: 2px;
    text-align: center;
  }
    div#login div.title span{
      font-size: 12px;
      margin-left: 8px;
    }

  /* ----------------------------------------------------
   * メールアドレス
   * --------------------------------------------------*/
  div#login div.mail{
    margin: auto auto;
    margin-bottom: 10px;
    text-align: center;
  }

  /* ----------------------------------------------------
   * パスワード入力
   * --------------------------------------------------*/
  div#login div.sel-box,
  div#login div.user,
  div#login div.user_non,
  div#login div.name,
  div#login div.passwd{
    position: relative;
    width: 200px;
    height: 50px;
    top: 10px;
    background-color: #f9f9f9;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -ms-transition: 0.5s;
    -o-transition: 0.5s;
    transition: 0.5s;
  }
  div#login div.user_non{
    background-color: #ccc;
  }
    div#login div.user,
    div#login div.user_non,
    div#login div.name{
      margin-bottom: 2px;
    }
    div#login div.sel-box{
      margin-bottom: 2px;
    }
    div#login div.sel-box i,
    div#login div.user i,
    div#login div.user_non i,
    div#login div.name i,
    div#login div.passwd i{
      position: absolute;
      top: 15px;
      left: 12px;
    }
    div#login div.user input,
    div#login div.user_non input,
    div#login div.name input,
    div#login div.passwd input{
      position: absolute;
      top: 6px;
      left: 45px;
      width: 150px;
      height: 40px;
      font-size: 16px;
      outline: none;
      border: none;
      background-color: transparent;
    }

  /* ----------------------------------------------------
   * ログインボタン
   * --------------------------------------------------*/
  div#login div.login-btn,
  div#login div.next-btn,
  div#login div.add-btn,
  div#login div.upd-btn,
  div#login div.back-btn,
  div#login div.cancel-btn{
    width: 200px;
    padding: 10px 0;
    text-align: center;
    margin-top: 15px;
    color: #fff;
    background-color: #bd599c;
    cursor: pointer;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -ms-transition: 0.5s;
    -o-transition: 0.5s;
    transition: 0.5s;
  }
  div#login div.add-btn,
  div#login div.upd-btn{
    background-color: #a52a2a;
  }
  div#login div.cancel-btn,
  div#login div.back-btn{
    background-color: #a9a9a9;
    margin-top: 5px;
  }
    div#login div.next-btn:hover,
    div#login div.login-btn:hover{
      background-color: #af4b8e;
    }
    div#login div.add-btn:hover,
    div#login div.upd-btn:hover{
      background-color: #cd5c5c;
    }
    div#login div.cancel-btn:hover,
    div#login div.back-btn:hover{
      background-color: #c0c0c0;
    }

  /* ----------------------------------------------------
   * お困りの場合
   * --------------------------------------------------*/
  div#login div.help{
    width: 200px;
    padding: 7px 0;
    text-align: center;
    margin-top: 5px;
  }
    div#login div.help span{
      cursor: pointer;
      font-size: 14px;
    }
      div#login div.help span:hover{
        color: #5984bd;
      }

  /* ----------------------------------------------------
   * 別アカウントでログイン
   * --------------------------------------------------*/
  div#login div.other,
  div#login div.back,
  div#login div.add{
    margin: auto auto;
    margin-top: 15px;
    text-align: center;
  }
    div#login div.other span,
    div#login div.back span,
    div#login div.add span{
      cursor: pointer;
      font-size: 14px;
    }
      div#login div.other span:hover,
      div#login div.back span:hover,
      div#login div.add span:hover{
        color: #5984bd;
      }

input::-webkit-input-placeholder,
input:-moz-placeholder,
input::-moz-placeholder,
input:-ms-input-placeholder {
  color: #eee;
}

div.btn{
  background-color: #ddd;
  text-align: center;
  margin: auto auto;
  margin-top: 10px;
  padding: 10px 2px;
  width: 100px;
  cursor: pointer;
  color: #999;
  font-size: 13px;
  border-radius: 3px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
}
  div.btn:hover{
    background-color: #d5d5d5;
    color: #888;
  }