/* ==========================================================================
  メンバー一覧
  --------------------------------------------------------------------------
  レイアウトはトップページのメンバーセクション（top.css の .top-message-*）を
  踏襲している。デザインを変更する際は両方を合わせて調整すること。
========================================================================== */
@layer page {
  /* COMMON 上書き */
  @media all and (width >= 48rem) {
    #member-list .l-section__inner {
      max-width: none;
      padding: 0;
    }
    #member-list .l-section__heading,
    #member-list .l-section__body {
      max-width: calc(1280 / var(--font-size) * 1rem);
      padding-inline: calc(40 / var(--font-size) * 1rem);
      margin-inline: auto;
    }
    /* パンくず */
    .l-breadcrumb {
      background-color: var(--color-light-green);
    }
    .l-breadcrumb__inner {
      max-width: calc(1280 / var(--font-size) * 1rem);
      margin-inline: auto;
      padding-inline: calc(40 / var(--font-size) * 1rem);
      padding-block: calc(14 / var(--font-size) * 1rem);
    }
    .c-breadcrumb-list {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
    }
    .c-breadcrumb-item + .c-breadcrumb-item {
      position: relative;
      margin-left: calc(16 / var(--font-size) * 1rem);
      padding-left: calc(16 / var(--font-size) * 1rem);
    }
    .c-breadcrumb-item + .c-breadcrumb-item::before {
      position: absolute;
      left: 0;
      top: calc(6 / var(--font-size) * 1rem);
      -webkit-transform: translateX(-50%);
              transform: translateX(-50%);
      content: '';
      width: calc(6 / var(--font-size) * 1rem);
      height: calc(10 / var(--font-size) * 1rem);
      background-color: #6c6c6c;
      -webkit-mask: url(/assets/img/column/ico_arrow.svg) no-repeat center/contain;
              mask: url(/assets/img/column/ico_arrow.svg) no-repeat center/contain;
    }
    .c-breadcrumb-item {
      font-size: calc(14 / var(--font-size) * 1rem);
      line-height: 1.5;
      letter-spacing: 0.1em;
      color: var(--color-main);
      font-weight: bold;
    }
    .c-breadcrumb-item.--current {
      color: #8e8e8e;
    }
    .c-breadcrumb-item.--current a {
      pointer-events: none;
    }
  }
  @media all and (width < 48rem) {
    #member-list .l-section__inner {
      max-width: none;
      padding: 0;
    }
    #member-list .l-section__heading,
    #member-list .l-section__body {
      max-width: calc(1280 / var(--font-size) * 1rem);
      padding-inline: calc(20 / var(--font-size) * 1rem);
      margin-inline: auto;
    }
    /* パンくず */
    .l-breadcrumb {
      background-color: var(--color-light-green);
    }
    .l-breadcrumb__inner {
      max-width: calc(1280 / var(--font-size) * 1rem);
      margin-inline: auto;
      padding-inline: calc(20 / var(--font-size) * 1rem);
      padding-block: calc(10 / var(--font-size) * 1rem);
    }
    .c-breadcrumb-list {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
    }
    .c-breadcrumb-item + .c-breadcrumb-item {
      position: relative;
      margin-left: calc(12 / var(--font-size) * 1rem);
      padding-left: calc(12 / var(--font-size) * 1rem);
    }
    .c-breadcrumb-item + .c-breadcrumb-item::before {
      position: absolute;
      left: 0;
      top: calc(5.5 / var(--font-size) * 1rem);
      -webkit-transform: translateX(-50%);
              transform: translateX(-50%);
      content: '';
      width: calc(5 / var(--font-size) * 1rem);
      height: calc(8 / var(--font-size) * 1rem);
      background-color: #6c6c6c;
      -webkit-mask: url(/assets/img/column/ico_arrow.svg) no-repeat center/contain;
              mask: url(/assets/img/column/ico_arrow.svg) no-repeat center/contain;
    }
    .c-breadcrumb-item {
      font-size: calc(12 / var(--font-size) * 1rem);
      line-height: 1.5;
      letter-spacing: 0.1em;
      color: var(--color-main);
      font-weight: bold;
    }
    .c-breadcrumb-item.--current {
      color: #8e8e8e;
    }
    .c-breadcrumb-item.--current a {
      pointer-events: none;
    }
  }

  /* ==========================================================================
    MEMBER LIST
  ========================================================================== */
  @media all and (width >= 48rem) {
    .member-content {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      gap: calc(48 / var(--font-size) * 1rem);
      max-width: calc(1080 / var(--font-size) * 1rem);
      position: relative;
      margin-left: auto;
      margin-right: auto;
    }
    .member-content + .member-content {
      margin-top: calc(80 / var(--font-size) * 1rem);
    }
    .member-content--reverse {
      -webkit-box-orient: horizontal;
      -webkit-box-direction: reverse;
      -ms-flex-direction: row-reverse;
      flex-direction: row-reverse;
    }
    .member-paragraph-texts .c-text {
      --text-font-size: 18;
    }
    .member-paragraph-texts .c-text + .c-text {
      margin-top: calc(24 / var(--font-size) * 1rem);
    }
    .member-paragraph-name {
      margin-top: calc(24 / var(--font-size) * 1rem);
      font-size: calc(24 / var(--font-size) * 1rem);
      font-weight: bold;
      line-height: 1.3;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      gap: calc(16 / var(--font-size) * 1rem);
      -webkit-box-pack: end;
      -ms-flex-pack: end;
      justify-content: flex-end;
    }
    .member-content--reverse .member-paragraph-name {
      -webkit-box-pack: start;
      -ms-flex-pack: start;
      justify-content: flex-start;
    }
    .member-paragraph-name__role {
      font-size: calc(15 / 24 * 1em);
      display: inline-block;
      margin-top: calc(5 / var(--font-size) * 1rem);
    }
    .member-photo {
      -ms-flex-negative: 0;
      flex-shrink: 0;
      width: calc(324 / var(--font-size) * 1rem);
      position: relative;
    }
    .member-photo-img {
      width: calc(324 / var(--font-size) * 1rem);
    }
  }
  @media all and (60rem > width >= 48rem) {
    .member-content {
      gap: calc(32 / var(--font-size) * 1rem);
    }
  }
  @media all and (width < 48rem) {
    .member-content {
      position: relative;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column;
      gap: calc(24 / var(--font-size) * 1rem);
    }
    .member-content + .member-content {
      margin-top: calc(32 / var(--font-size) * 1rem);
    }
    .member-paragraph {
      -webkit-box-ordinal-group: 2;
          -ms-flex-order: 1;
              order: 1;
    }
    .member-paragraph-texts .c-text {
      --text-font-size: 15;
    }
    .member-paragraph-texts .c-text + .c-text {
      margin-top: calc(16 / var(--font-size) * 1rem);
    }
    .member-paragraph-name {
      margin-top: calc(12 / var(--font-size) * 1rem);
      font-size: calc(18 / var(--font-size) * 1rem);
      font-weight: bold;
      line-height: 1.3;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      gap: calc(12 / var(--font-size) * 1rem);
    }
    .member-paragraph-name__role {
      font-size: calc(12 / 18 * 1em);
      display: inline-block;
    }
    .member-photo {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
    }
    .member-photo-img {
      max-width: calc(200 / var(--font-size) * 1rem);
    }
  }
}