@charset "utf-8";

.personnelPage {
  background-color: #ededed;
  padding-bottom: 7.2rem;

  personnel-illust > img[slot="text"],
  personnel-illust > img[slot="illust"] {
    width: 100%;
  }

  personnel-illust + personnel-normal-text {
    margin-top: 1.8rem;
  }

  personnel-normal-text + personnel-normal-text {
    margin-top: 4rem;
    @media (min-width: 768px) {
      margin-top: 3rem;
    }
  }

  personnel-accordion {
    margin-top: 3rem;
  }

  personnel-accordion + personnel-accordion {
    margin-top: 2.5rem;
  }

  div[slot="summary"] > personnel-blue-balloon {
    margin-top: 2.8rem;

    @media (min-width: 768px) {
      margin-top: 2.2rem;
    }
  }

  div[slot="summary"] > personnel-intro-link + personnel-blue-balloon {
    @media (min-width: 768px) {
      margin-top: 3.5rem;
    }
  }

  personnel-field-heading {
    margin-top: 3.5rem;
  }

  personnel-blue-balloon + personnel-field-heading {
    margin-top: 0.8rem;
  }

  personnel-field-heading + personnel-normal-text {
    margin-top: 2rem;
  }

  personnel-field-sub-heading + personnel-normal-text {
    margin-top: 1rem;
  }

  personnel-section + personnel-qa {
    margin-top: 4rem;
  }

  personnel-moving-example-content > img {
    width: 100%;
  }

  personnel-intro-link > picture[slot="image"] {
    display: block;
  }

  personnel-intro-link > img[slot="image"] {
    display: block;
  }

  personnel-intro-link > picture[slot="image"] > img {
    display: block;
  }

  personnel-illust img[slot="icon"] {
    width: 7rem;
  }

  personnel-illust picture[slot="text"] img {
    margin-inline: auto;
    width: 100%;
  }

  personnel-moving-example-caption-text ul {
    margin-top: 2.4rem;
  }

  @media (min-width: 768px) {
    personnel-moving-example-caption-text ul {
      margin-top: 3.6rem;
    }

    personnel-field-sub-heading + personnel-normal-text {
      margin-top: 0;
    }

    personnel-field-sub-content {
      margin-top: 1rem;
    }

    personnel-intro-link > picture[slot="image"] > img {
      width: auto;
      height: 9rem;
    }

    personnel-qa {
      margin-top: 1rem;
    }

    personnel-moving-example-content > img {
      width: auto;
      height: 10.6rem;
    }
  }

  personnel-moving-section picture[slot="heading"] img {
    margin-inline: auto;
  }
}