/*-------------------------------------------------- staff --*/
#staff {
  margin-bottom: 5rem;
}

@media (max-width: 768px) {
  #staff {
    margin-bottom: 3.75rem;
  }
}

#staff .staff_list {
  display: flex;
  flex-flow: wrap;
  justify-content: space-between;
}

#staff .staff_list li {
  width: calc((100% - 2rem * 2) / 3);
  margin-right: 2rem;
}

@media (max-width: 768px) {
  #staff .staff_list li {
    width: calc((100% - 1.5rem) / 2);
    margin-right: 0;
  }
  #staff .staff_list li:nth-of-type(n+3) {
    margin-top: 3.5rem;
  }
}

@media (max-width: 480px) {
  #staff .staff_list li {
    width: 100%;
    margin-right: 0;
  }
  #staff .staff_list li:nth-of-type(n+2) {
    margin-top: 3.5rem;
  }
}

#staff .staff_list li:nth-of-type(3n) {
  margin-right: 0;
}

#staff .staff_list li:nth-of-type(n+4) {
  margin-top: 3.5rem;
}

#staff .staff_list li a {
  position: relative;
  display: block;
}

#staff .staff_list li a:hover .staff_list_image img {
  transform: scale(1.1);
}

#staff .staff_list li a:hover .staff_list_data .name span {
  color: #FFF;
}

#staff .staff_list li a:hover .staff_list_data .name span::before {
  left: 0;
}

#staff .staff_list li a:hover .staff_list_data .position span {
  color: #FFF;
}

#staff .staff_list li a:hover .staff_list_data .position span::before {
  left: 0;
}

#staff .staff_list li a .staff_list_image {
  overflow: hidden;
  z-index: -2;
  position: relative;
}

#staff .staff_list li a .staff_list_image img {
  width: 100%;
  transition: all 0.3s;
}

#staff .staff_list li a .staff_list_data {
  margin-top: -18%;
  overflow: hidden;
}

#staff .staff_list li a .staff_list_data .position span {
  position: relative;
  border-left: solid 2px #00B2A9;
  background: #FFF;
  font-weight: 700;
  padding: 0.625rem 1.25rem;
  transition: all 0.3s;
  z-index: 0;
  display: inline-block;
  font-size: 0.75rem;
}

@media (max-width: 480px) {
  #staff .staff_list li a .staff_list_data .position span {
    font-size: 0.875rem;
  }
}

#staff .staff_list li a .staff_list_data .position span::before {
  content: "";
  background-color: #00B2A9;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: -100%;
  transition: all 0.3s;
  z-index: -1;
}

#staff .staff_list li a .staff_list_data .name span {
  position: relative;
  border-left: solid 2px #00B2A9;
  background: #FFF;
  font-weight: 700;
  padding: 0.625rem 1.25rem;
  transition: all 0.3s;
  z-index: 0;
  display: inline-block;
  font-size: 1.125rem;
}

@media (max-width: 480px) {
  #staff .staff_list li a .staff_list_data .name span {
    font-size: 1.5rem;
  }
}

#staff .staff_list li a .staff_list_data .name span::before {
  content: "";
  background-color: #00B2A9;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: -100%;
  transition: all 0.3s;
  z-index: -1;
}