@charset "UTF-8";

/* ---------------------------------
  page_title
--------------------------------- */
.page_title img {
  width: 37rem;
}


/* ---------------------------------
  main_content
--------------------------------- */
.main_content {
  background-color: #D5EDF2;
}


/* ---------------------------------
  sort_block
--------------------------------- */
.sort_block {
  display: flex;
  column-gap: 4rem;
  align-items: flex-start;
  margin-bottom: 6.4rem;
}
.sort_block .sort_label {
  font-weight: 500;
  font-size: 2rem;
  line-height: 4.1rem;
  flex-shrink: 0;
}
.sort_block ul {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
}
.sort_block ul li {
  width: 14.4rem;
  padding: .8rem 0;
  background-color: #fff;
  color: #000;
  font-weight: 500;
  text-align: center;
  border-radius: 100rem;
}
.sort_block ul li.active {
  background-color: #000;
  color: #fff;
  cursor: default;
}
.sort_block ul li:not(.active):hover {
  color: #fff;
  background-color: #000;
  cursor: pointer;
}
@media screen and (max-width: 999px) {
  .sort_block {
    flex-flow: column;
    row-gap: 1.6rem;
    margin-bottom: 4rem;
  }
  .sort_block .sort_label {
    font-size: 1.6rem;
    line-height: 1.4;
  }
  .sort_block ul {
    gap: 1.6rem;
    width: 100%;
  }
  .sort_block ul li {
    width: calc((100% - 3.2rem) / 3);
  }
}


/* ---------------------------------
  people_list
--------------------------------- */
.people_list {
  display: flex;
  flex-flow: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  column-gap: 4rem;
  row-gap: 4rem;
}
.people_list li {
  display: none;
}
.people_list li.active {
  display: block;
}
@media screen and (max-width: 999px) {
  .people_list {
    column-gap: 0;
    row-gap: 0;
    margin: 0 -2rem 0;
  }
  .people_list li {
    width: 50%;
  }
  .people_list li.active a {
    border: 0;
    border-bottom: .2rem solid #000;
    padding: .8rem;
    border-radius: 0;
  }
  .people_list li.first-second-active a {
    border-top: .2rem solid #000;
  }
  .people_list li.active-odd a {
    border-right: .1rem solid #000;
  }
  .people_list li.active-even a {
    border-left: .1rem solid #000;
  }
  .people_list .message_content {
    border-radius: 0;
  }
  .people_list .message_content .people_number {
    font-size: 1.2rem;
  }
  .people_list .message_content .people_job {
    font-size: 1.4rem;
  }
  .people_list .message_content .people_detail .initial {
    margin-right: 0;
    padding-right: 0;
    width: 100%;
    font-size: 1.2rem;
    border-right: 0;
  }
  .people_list .message_content .people_message {
    padding: 2rem 1.2rem;
  }
}