@charset "UTF-8";

/* =============================================================================

Member CSS

・社員紹介ページ用CSS「.member-×××」

上記はここに記述する

============================================================================= */

/* 冒頭分
----------------------------------------------------------------------------- */
.member-intro {
  padding-block:24.8rem 12.0rem;
  text-align: center;
  @media (width > 640px) {
  }
  @media (width <= 640px) {
    padding-block:15.4rem 8.0rem;
  }
}

/* メンバー
----------------------------------------------------------------------------- */
.member-container {
  display:grid;
  gap:14.4rem;
  padding-bottom:24.0rem;

  @media (width > 640px) {
  }
  @media (width <= 640px) {
    gap:8.0rem;
    padding-bottom:8.0rem;
  }
}
.member-type {
  .type-heading {
    margin-bottom:4.0rem;

    @media (width <= 640px) {
      margin-bottom:2.4rem;
    }
  }
}
.member-list {
  display:grid;
  row-gap:4.0rem;

  @media (width > 640px) {
    grid-template-columns:1fr 1fr;
    column-gap:14.4rem;
  }

  .item {
    display:grid;
    grid-template-rows:1fr auto auto auto 1fr;
    grid-auto-flow:column;
    @media (width > 640px) {
      align-content:center;
      grid-template-columns:20.0rem 1fr;
      column-gap:4.0rem;
    }
    @media (width <= 640px) {
    grid-template-rows:auto auto auto 1fr;
      grid-template-columns:12.0rem 1fr;
      align-items:flex-start;
      column-gap:3.2rem;
    }

    .img {
      @media (width > 640px) {
        grid-row:1/-1;
      }
      @media (width <= 640px) {
        grid-row:1/-2;
      }
    }

    .tag {
      margin-bottom:1.6rem;
      border:1px solid;
      padding:.6rem .8rem .4rem;
      width:fit-content;
      font-size:1.2rem;
      line-height:1.1;
      letter-spacing: .1em;
      @media (width > 640px) {
        grid-row:2;
      }
    }

    .name {
      display:flex;
      gap:1.6rem;
      @media (width > 640px) {
        align-items: center;
      }
      @media (width <= 640px) {
        flex-direction: column;
        gap:1.0rem;
      }
      .ja {
        font-size:2.4rem;
        line-height:1;
        letter-spacing: .2em;
        @media (width <= 640px) {
          font-size:2.0rem;
        }
      }
      .en {
        font-size:1.4rem;
        line-height:1.1;
        letter-spacing: .07em;
        @media (width <= 640px) {
        }
      }

    }

    .desc {
      margin-top:2.0rem;
      font-size:1.2rem;
      line-height:2;
      letter-spacing: .15em;
      @media (width <= 640px) {
        grid-row:-2/-1;
        grid-column:1/-1;
      }
    }
  }
}

/* SelectorName
----------------------------------------------------------------------------- */
.member-selectorName {
  @media (width > 640px) {
  }
  @media (width <= 640px) {
  }
}