/*========================================================
　　メンバー紹介　css
　========================================================*/
.member-list {
  display: flex;
  flex-direction: column;
  gap: 106px;
  max-width: 1360px;
  margin: 206px auto;
  padding: 0 30px;
}

.member-list-li {
  display: grid;
  grid-template: auto auto auto auto/ auto 1fr;
  gap: 0 150px;
  padding-bottom: 150px;
  border-bottom: 1px solid #a6a7a7;

  &:last-child {
    padding-bottom: 0;
    border-bottom: none;
  }
}

.member-pic {
  grid-row: 1/ 5;
  width: 358px;
  height: 406px;
  border-radius: 20px;
  object-fit: cover;

  &.honda {
    object-view-box: inset(10%)
  }
  &.yamamoto {
    object-view-box: inset(5%);
  }

  &.sakamoto {
    object-view-box: inset(20%);
    object-position: left;
  }
}

.member-position {
  margin-bottom: 22px;
  font-size: 22px;
  font-weight: 500;
}

.member-name {
  font-size: 32px;
  font-weight: bold;

  & span {
    padding-left: 20px;
    font-size: 22px;
    font-weight: 500;
    color: #a6a7a7;
    letter-spacing: .1em;
  }
}

.member-post {
  margin-top: 22px;
  font-size: 22px;
  font-weight: 500;
}

.member-other {
  margin-top: 50px;
  font-size: 18px;
  line-height: 1.75em;
}

.mt {
  margin-top: 30px;
}

/*会員のご紹介-------------------------------------------*/
.company-wrapper {
  position: relative;
  padding: 227px 30px;
  overflow: hidden;

  &::before {
    position: absolute;
    top: 0;
    left: calc(50% - 1050px);
    content: '';
    display: block;
    width: 2100px;
    height: 227px;
    background: #f0f0f0;
    clip-path: shape(
      from 0 100%,
      curve to 100% 100% with 50% -227px,
    );
  }

  &::after {
    position: absolute;
    top: 227px;
    left: 0;
    z-index: -1;
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background: #f0f0f0;
  }
}

.company-container {
  max-width: 1300px;
  margin: auto;
}

.company-item {
  display: grid;
  gap: 75px;
  margin-top: 113px;
}

.company-list-title {
  display: flex;
  gap: 20px;
  align-items: center;
  margin-bottom: 30px;
  font-size: 20px;
  font-weight: 500;

  &::before {
    content: '';
    width: 30px;
    height: 1px;
    background: #262626;
  }
}

.company-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 36px;
  font-size: 18px;
  font-weight: 500;
}

.company-list-li {
  flex-basis: 30%;
  padding: 30px;
  border-radius: 50px;
  background: #fff;
  text-align: center
}


/* 以下　スマホ版css ================================================================================================*/
@media (max-width: 768px) {
  .member-list {
    gap: 110px;
    margin: 86px auto 90px;
  }


  .member-list-li {
    grid-template: auto/ 1fr;
    padding-bottom: 110px;
  }

  .member-pic {
    width: 315px;
    height: 330px;
    margin: 0 auto;
  }

  .member-position {
    margin: 48px 0 20px;
    font-size: 20px;
  }

  .member-name {
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 30px;

    & span {
      padding: 0;
      font-size: 20px;
    }
  }

  .member-post {
    margin-top: 20px;
    font-size: 20px;
  }

  .member-other {
    font-size: 16px;
  }

  .mt {
    margin-top: 20px;
  }

  /*スマホ　会員のご紹介------------------------------------*/
  .company-wrapper {
    padding: 100px 30px;

    &::before {
      left: calc(50% - 379px);
      width: 758px;
      height: 100px;
      clip-path: shape(
        from 0 100%,
        curve to 100% 100% with 50% -100px,
      );
    }

    &::after {
      top: 100px;
    }
  }

  .company-item {
    margin-top: 53px;
  }

  .company-list-title {
    font-size: 18px;
  }

  .company-list {
    gap: 15px;
  }

  .company-list-li {
    flex-basis: 100%;
    padding: 18px 29px;
    font-size: 16px;
  }
}