/* ==========================================================================
   recruitment-members — メンバー紹介ページ
   BEM block: rc-members
   ========================================================================== */

.rc-members {
  padding-top: min(calc(90 / 1366 * 100vw), 90px);
  overflow-x: clip;
}

.rc-members__container {
  margin: 0 auto;
}

.rc-members__list {
  padding: 0;
  list-style: none;
}

/* Item — grey stripe background
   ========================================================================== */

.rc-members__item {
  position: relative;
  z-index: 1;
}

.rc-members__item::after {
  content: "";
  background-color: #d3d3d3;
  width: 100vw;
  height: 107%;
  position: absolute;
  top: min(calc(20 / 1366 * 100vw), 20px);
  left: 0;
  z-index: -1;
}

.rc-members__item:not(:first-child) {
  margin-top: min(calc(136 / 1366 * 100vw), 136px);
}

/* Inner layout
   ========================================================================== */

.rc-members__inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 0 min(calc(60 / 1366 * 100vw), 60px);
  max-width: min(calc(1020 / 1366 * 100vw), 1020px);
  margin: 0 auto;
  position: relative;
}

/* Even items — row-reverse */
.rc-members__item:nth-child(even) .rc-members__inner {
  flex-direction: row-reverse;
}

/* Profile column
   ========================================================================== */

.rc-members__profile {
  width: 28.88%;
}

.rc-members__photo {
  width: 100%;
}

.rc-members__photo img {
  width: 100%;
  height: auto;
  border-radius: min(calc(10 / 1366 * 100vw), 10px);
}

/* Name badge — gradient skew
   ========================================================================== */

.rc-members__name {
  color: #fff;
  font-size: min(calc(24 / 1366 * 100vw), 24px);
  font-family: var(--font-family-en);
  font-weight: 600;
  line-height: 100%;
  margin-top: min(calc(17 / 1366 * 100vw), 17px);
  width: max-content;
  background: linear-gradient(65deg, #0d76a3, #171f63);
  padding: min(calc(6 / 1366 * 100vw), 6px) min(calc(12 / 1366 * 100vw), 12px);
  transform: skewX(-10deg);
}

/* Career / past
   ========================================================================== */

.rc-members__career {
  color: #000;
  font-size: min(calc(18 / 1366 * 100vw), 18px);
  font-family: var(--font-family-en);
  font-weight: 400;
  line-height: min(calc(26 / 1366 * 100vw), 26px);
  margin-top: min(calc(17 / 1366 * 100vw), 17px);
}

/* Detail column
   ========================================================================== */

.rc-members__detail {
  width: calc(100% - 28.88%);
  margin-top: 0;
}

.rc-members__item:nth-child(even) .rc-members__detail {
  padding-right: min(calc(60 / 1366 * 100vw), 60px);
}

.rc-members__item:nth-child(odd) .rc-members__detail {
  padding-left: min(calc(48 / 1366 * 100vw), 48px);
}

/* Catch copy — static badge on PC
   ========================================================================== */

.rc-members__catch {
  color: #fff;
  font-size: min(calc(20 / 1366 * 100vw), 20px);
  font-family: var(--font-family-en);
  font-weight: 600;
  display: block;
  width: max-content;
  background: linear-gradient(65deg, #0d76a3, #171f63);
  padding: min(calc(6 / 1366 * 100vw), 6px) min(calc(12 / 1366 * 100vw), 12px);
  transform: skewX(-10deg);
}

.rc-members__catch span {
  display: inline;
  background: none;
  padding: 0;
  transform: none;
}

/* Body text
   ========================================================================== */

.rc-members__text {
  color: #000;
  font-family: var(--font-family-en);
  font-weight: 500;
  font-size: min(calc(16 / 1366 * 100vw), 16px);
  line-height: min(calc(24 / 1366 * 100vw), 24px);
  margin-top: min(calc(21 / 1366 * 100vw), 21px);
}

/* the_content() が出力する <p> の段落間スペースを復元 */
.rc-members__text p + p {
  margin-top: 1em;
}

/* ==========================================================================
   SP (<= 750px)
   ========================================================================== */

@media screen and (width <= 750px) {
  .rc-members {
    padding-top: calc(80 / 375 * 100vw);
  }

  .rc-members__item::after {
    top: calc(34 / 375 * 100vw);
  }

  .rc-members__item:not(:first-child) {
    margin-top: calc(130 / 375 * 100vw);
  }

  /* Grid layout — photo と catch を同セルに重ね、name 以降は下に配置 */
  .rc-members__inner {
    display: grid;
    grid-template-columns: 1fr;
    padding: 0 calc(37 / 375 * 100vw);
    max-width: none;
  }

  /* contents で wrapper を透過し、子要素を直接グリッドに参加させる */
  .rc-members__profile,
  .rc-members__detail {
    display: contents;
  }

  /* Photo と Catch を同じセル (row 1) に重ねる */
  .rc-members__photo {
    grid-column: 1;
    grid-row: 1;
    width: 54.27vw;
  }

  .rc-members__photo img {
    border-radius: calc(10 / 375 * 100vw);
  }

  /* Catch — photo と同セルに重なり、右下に配置 */
  .rc-members__catch {
    grid-column: 1;
    grid-row: 1;
    place-self: end start;
    font-size: calc(20 / 375 * 100vw);
    background: none;
    padding: 0;
    transform: none;
    width: auto;
  }

  .rc-members__catch span {
    display: block;
    background: linear-gradient(65deg, #0d76a3, #171f63);
    padding: calc(6 / 375 * 100vw) calc(12 / 375 * 100vw);
    transform: skewX(-10deg);
    width: max-content;
    max-width: calc(100vw - 20vw);
  }

  .rc-members__catch span + span {
    margin-top: calc(6 / 375 * 100vw);
  }

  /* Name / Career — photo+catch の下に全幅配置 */
  .rc-members__name {
    grid-column: 1;
    grid-row: 2;
    font-size: calc(24 / 375 * 100vw);
    margin-top: calc(21 / 375 * 100vw);
    padding: calc(6 / 375 * 100vw) calc(12 / 375 * 100vw);
  }

  .rc-members__career {
    grid-column: 1;
    grid-row: 3;
    font-size: calc(16 / 375 * 100vw);
    line-height: 100%;
    margin-top: calc(16 / 375 * 100vw);
  }

  /* Body text — 最下部 */
  .rc-members__text {
    grid-column: 1;
    grid-row: 4;
    font-size: calc(16 / 375 * 100vw);
    line-height: calc(24 / 375 * 100vw);
    margin-top: calc(20 / 375 * 100vw);
  }
}