.sec_member {
  overflow: hidden;
  background-color: #ebebeb;
  background-image: url(../images/interview/bg_town_sp.webp);
  background-repeat: no-repeat;
  background-size: cover;
  padding: 30px 0 60px;
}
@media all and (min-width: 751px) {
  .sec_member {
    background-image: url(../images/interview/bg_town_pc.webp);
    background-repeat: repeat-x;
    background-size: 1200px auto;
    background-position: left bottom;
    padding: 58px 0 120px;
  }
}
@media all and (max-width: 750px) {
  .sec_member .inner {
    display: contents;
  }
}
.sec_member .sec_ttl {
  text-align: center;
  font-family: "Oswald", sans-serif;
  font-optical-sizing: auto;
  font-weight: bold;
  color: #a9161b;
  font-size: 40px;
  margin-bottom: 58px;
}
@media all and (min-width: 751px) {
  .sec_member .sec_ttl {
    font-size: 59px;
    margin-bottom: 78px;
  }
}
.sec_member .list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 78px;
  width: min(400px, 100%);
  margin-inline: auto;
}
@media all and (min-width: 751px) {
  .sec_member .list {
    gap: 80px;
    width: min(604px, 100%);
  }
}
.sec_member .list > li {
  position: relative;
  z-index: 1;
  width: 70%;
}
@media all and (min-width: 751px) {
  .sec_member .list > li {
    width: calc((100% - 80px) / 2);
  }
}
@media all and (max-width: 750px) {
  .sec_member .list > li:nth-child(odd) {
    margin-left: auto;
  }
}
.sec_member .list > li:nth-child(1)::before {
  position: absolute;
  content: "";
  background-image: url(../images/interview/shape0101.svg);
  background-repeat: no-repeat;
  background-size: contain;
  aspect-ratio: 162/163;
  width: 61.8%;
  top: -22.5%;
  left: 0;
  -webkit-transform: translateX(-100%);
          transform: translateX(-100%);
  z-index: -1;
}
@media all and (min-width: 751px) {
  .sec_member .list > li:nth-child(1)::after {
    position: absolute;
    content: "";
    background-image: url(../images/interview/shape0102.svg);
    background-repeat: no-repeat;
    background-size: contain;
    aspect-ratio: 1;
    width: 47.5%;
    bottom: -12.9%;
    right: -13.6%;
    z-index: -1;
  }
}
.sec_member .list > li:nth-child(2)::before {
  position: absolute;
  content: "";
  background-image: url(../images/interview/shape02.svg);
  background-repeat: no-repeat;
  background-size: contain;
  aspect-ratio: 205/204;
  width: 77.9%;
  top: -14%;
  right: -48.2%;
  z-index: -1;
}
.sec_member .list > li:nth-child(3)::before {
  position: absolute;
  content: "";
  background-image: url(../images/interview/shape0301.svg);
  background-repeat: no-repeat;
  background-size: contain;
  aspect-ratio: 1;
  width: 66.5%;
  top: -12.9%;
  left: -37.6%;
  z-index: -1;
}
.sec_member .list > li:nth-child(3)::after {
  position: absolute;
  content: "";
  background-image: url(../images/interview/shape0302.svg);
  background-repeat: no-repeat;
  background-size: contain;
  aspect-ratio: 1;
  width: 34.98%;
  bottom: -23.9%;
  left: -7%;
  -webkit-transform: translateX(-100%);
          transform: translateX(-100%);
  z-index: -1;
}
.sec_member .list > li:nth-child(4)::before {
  position: absolute;
  content: "";
  background-image: url(../images/interview/shape04.svg);
  background-repeat: no-repeat;
  background-size: contain;
  aspect-ratio: 212/215;
  width: 80%;
  bottom: -12.1%;
  right: -45.2%;
  z-index: -1;
}
.sec_member .list > li a {
  display: block;
}
@-webkit-keyframes rotateAnime {
  0% {
    -webkit-transform: rotateY(450deg);
            transform: rotateY(450deg);
  }
  100% {
    -webkit-transform: rotateY(0);
            transform: rotateY(0);
  }
}
@keyframes rotateAnime {
  0% {
    -webkit-transform: rotateY(450deg);
            transform: rotateY(450deg);
  }
  100% {
    -webkit-transform: rotateY(0);
            transform: rotateY(0);
  }
}
.sec_member .list > li a .image {
  -webkit-transform: rotateY(450deg);
          transform: rotateY(450deg);
}
@media all and (min-width: 751px) {
  .sec_member .list > li a .image {
    -webkit-animation: rotateAnime 0.8s ease-out forwards 0.2s;
            animation: rotateAnime 0.8s ease-out forwards 0.2s;
  }
}
@media (hover: hover) {
  .sec_member .list > li a {
    -webkit-transition: -webkit-filter 0.4s;
    transition: -webkit-filter 0.4s;
    transition: filter 0.4s;
    transition: filter 0.4s, -webkit-filter 0.4s;
  }
  .sec_member .list > li a:hover {
    -webkit-filter: brightness(120%);
            filter: brightness(120%);
  }
}
@media all and (min-width: 751px) {
  .sec_member .list > li:nth-child(2) .image {
    -webkit-animation-delay: 0.4s;
            animation-delay: 0.4s;
  }
  .sec_member .list > li:nth-child(3) .image {
    -webkit-animation-delay: 0.6s;
            animation-delay: 0.6s;
  }
  .sec_member .list > li:nth-child(4) .image {
    -webkit-animation-delay: 0.8s;
            animation-delay: 0.8s;
  }
  .sec_member .list > li:nth-child(5) .image {
    -webkit-animation-delay: 1s;
            animation-delay: 1s;
  }
  .sec_member .list > li:nth-child(6) .image {
    -webkit-animation-delay: 1.2s;
            animation-delay: 1.2s;
  }
  .sec_member .list > li:nth-child(7) .image {
    -webkit-animation-delay: 1.4s;
            animation-delay: 1.4s;
  }
  .sec_member .list > li:nth-child(8) .image {
    -webkit-animation-delay: 1.6s;
            animation-delay: 1.6s;
  }
  .sec_member .list > li:nth-child(9) .image {
    -webkit-animation-delay: 1.8s;
            animation-delay: 1.8s;
  }
}
@media all and (max-width: 750px) {
  .sec_member .list > li.scroll_active .image {
    -webkit-animation: rotateAnime 0.8s ease-out forwards;
            animation: rotateAnime 0.8s ease-out forwards;
  }
}