/* ==========================================================================
   People ページ
   旧 resources/styles/layouts/_people.sass
   ========================================================================== */

body.page-people {
  & main {
    .wrap1048 {
      @media only screen and (max-width: 767px) {
        --outer-margin: 20px;
      }
    }

    .group {
      .headingWrap {
        /* 旧 @extend .cols（%wrap を含む）をインライン展開 */
        --outer-margin: 76px;
        width: calc(100% - var(--outer-margin) * 2);
        max-width: 1596px;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        --gap: 48px;
        column-gap: var(--gap);
        row-gap: var(--gap);
        margin: 0 auto;
        @media only screen and (max-width: 1748px) {
          grid-template-columns: 1fr 1fr;
          max-width: 1048px;
        }
        @media only screen and (max-width: 900px) {
          grid-template-columns: 1fr;
          max-width: 500px;
        }
        @media only screen and (max-width: 767px) {
          grid-template-columns: 1fr;
          --gap: 40px;
          --outer-margin: 16px;
        }
      }
      & h2,
      & h3,
      & h4 {
        font-family: 'Aoto Gothic Bold', 'NotoSansJP-Bold', var(--font-yugothic);
        font-size: 1.9rem;
        @media only screen and (max-width: 767px) {
          font-size: 1.8rem;
        }
      }
      & h3 {
        margin-bottom: 24px;
      }
      & h4 {
        margin-bottom: 18px;
      }
    }

    .people {
      .person {
        font-family: 'Aoto Gothic Bold', 'NotoSansJP-Bold', var(--font-yugothic);
        .name {
          margin-top: 18px;
          font-size: 2rem;
          letter-spacing: 0.02em;
          line-height: 1.8; /* calc(36 / 20) */
          @media only screen and (max-width: 767px) {
            /* NOTE: 旧 SASS のタイポをそのまま移植（font-size の綴り誤り＝元から無効） */
            font-sie: 1.8rem;
          }
        }
        .title {
          margin-top: 2px;
          font-size: 1.6rem;
          letter-spacing: 0.025em;
          line-height: 1.8125; /* calc(29 / 16) */
          @media only screen and (max-width: 767px) {
            font-size: 1.4rem;
          }
        }
        .profile {
          margin-top: 16px;
          font-size: 1.5rem;
          line-height: 2;
          letter-spacing: 0.025em;
          @media only screen and (max-width: 767px) {
            font-size: 1.2rem;
            line-height: 1.8333333333; /* calc(22 / 12) */
          }
        }
      }
    }

    .group + .group {
      margin-top: 166px;
    }

    .subGroup + .subGroup {
      margin-top: 88px;
    }

    .personWrap {
      margin-top: 120px;
      display: flex;
      justify-content: center;
      @media only screen and (max-width: 767px) {
        margin: 115px 0 54px;
      }
      .person {
        @media only screen and (max-width: 767px) {
          height: 260px;
          width: auto;
        }
      }
    }
  }
}