.c-speaker {
  display: flex;
  gap: var(--spc-8);
  padding-block: var(--spc-6);
  @container speakers (max-width:520px) {
    gap: var(--spc-6);
  }
  @container speakers (max-width:380px) {
    flex-direction: column;
    gap: var(--spc-3);
  }
  .c-speaker-content {
    flex: 1;
  }
  .c-speaker__thumb {
    width: 14.8rem;
    height: 14.8rem;
    border-radius: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    @container speakers (max-width:520px) {
      width: 9.6rem;
      height: 9.6rem;
    }
  }
  .c-speaker__position {
    color: var(--c-primary);
    & + * {
      margin-top: var(--spc-1);
    }
  }
  .c-speaker__name {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spc-3);
    & + * {
      margin-top: var(--spc-3);
    }
    span {
      display: block;
      font-family: var(--ff-en);
      font-weight: var(--fw-default-en);
      font-style: italic;
      color: var(--c-black-300);
    }
  }
  .c-speaker__profile {
    display: -webkit-box;
    position: relative;
    padding-top: var(--spc-6);
    line-clamp: 2;
    box-orient: vertical;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    @media (max-width: 520px) {
      display: block;
    }
    &.is-opened {
      display: block;
    }
    & + * {
      margin-top: var(--spc-3);
    }
    &:before,
    &:after {
      position: absolute;
    }
    &:before {
      content: "";
      inset: var(--spc-1) var(--spc-10) auto 0;
      height: .1rem;
      background-color: var(--c-black-000);
    }
    &:after {
      content: "Profile";
      inset: 0 0 auto auto;
      font-family: var(--ff-en);
      font-weight: var(--fw-default-en);
      font-style: italic;
      color: var(--c-black-300);
      font-size: var(--fs-2xs);
      line-height: 1em;
    }
  }
  .c-speaker__toggle {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--spc-2);
    color: var(--c-primary);
    cursor: pointer;
    @media (max-width: 520px) {
      display: none;
    }
    &.is-opened {
      img {
        transform: rotate(180deg);
      }
    }
    span {
      display: block;
      width: 1.6rem;
      height: .1rem;
      background-color: var(--c-primary);
    }
    img {
      width: 1.6rem;
    }
  }
}