@charset "UTF-8";

/* 画像ホバーでテキスト表示 */
.box {
  width: 24%;
  height: auto;
  display: block;
  margin-right: 3%;
}

.hover_t_1 {
  position: relative;
}
.hover_t_1 img {
  display: block;
  border-radius: 50%;
  width: 100%;
  height: 100%;
  transition: 0.3s;
}
.hover_t_1 figcaption {
  opacity: 0;
  transition: 0.3s;
  position: absolute;
  left: 0;
  top: 35%;
  width: 100%;
  height: auto;
  color: #FFF;
}
.hover_t_1 figcaption .txt_box {
  position: relative;
  width: 100%;
  height: 100%;
}
.hover_t_1 figcaption .txt_box > p {
  width: 100%;
  height: 100%;
  text-align: center;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.hover_t_1:hover figure img {
  filter: brightness(60%);
}
.hover_t_1:hover figure figcaption {
  opacity: 1;
}

.members_section {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

@media (max-width: 500px) {
  .members_section {
    flex-wrap: wrap;
  }
  .box {
    width: 80%;
    height: auto;
    padding-left: 10%;
    padding-right: 10%;
  }
}