/* ==========================================================================
   People / Member interview / Mentor profile
   People & Story → Spectrum-led (DESIGN_SYSTEM.md §21).
   Interview: Human Voice entrance (Portrait + Spectrum Brush Field) → Editorial Reading.
   Mentor: expertise within the shared system → Navy brush field.
   ========================================================================== */

/* ---------- People list ---------- */
.people-head {
  position: relative;
  overflow: hidden;
  padding: calc(var(--header-h) + clamp(56px, 7vw, 104px)) 0 clamp(48px, 5vw, 80px);
}
.people-head .wrap { position: relative; z-index: 1; }
.people-body { position: relative; z-index: 1; padding-bottom: var(--space-section); }
.people-group + .people-group { margin-top: var(--space-section-inner); }
.people-group__head { margin-bottom: 28px; }

.member-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; }
.member-card { display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none; }
.member-card__photo { display: block; position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radius-editorial); background: #eceae4; }
.member-card__photo::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 4px; background: var(--id); }
.member-card__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; transition: transform .45s var(--ease); }
.member-card:hover .member-card__photo img { transform: scale(1.03); }
.member-card__body { display: flex; flex-direction: column; flex: 1; padding-top: 16px; }
.member-card__name { font-size: 20px; font-weight: 700; line-height: 1.4; letter-spacing: .06em; color: var(--color-ink); }
.member-card__role { margin-top: 4px; font-size: 13px; font-weight: 500; line-height: 1.5; color: var(--color-body); }
.member-card__year { font-size: 13px; line-height: 1.5; color: var(--color-muted); }
.member-card__more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 14px;
  font-size: 14px;
  font-weight: 700;
  color: var(--world-navy);
}
.member-card__more::after {
  content: "";
  width: 16px;
  height: 10px;
  background: currentColor;
  -webkit-mask: var(--arrow) no-repeat center / contain;
  mask: var(--arrow) no-repeat center / contain;
  transition: transform .2s var(--ease);
}
.member-card:hover .member-card__more::after,
.mentor-card:hover .member-card__more::after { transform: translateX(3px); }
.member-card:hover .member-card__name,
.mentor-card:hover .mentor-card__name { text-decoration: underline; text-underline-offset: 5px; }

.people-group--mentor { padding-top: var(--space-section-inner); border-top: 1px solid var(--color-border); }
.mentor-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; }
.mentor-card { display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none; }
.mentor-card__photo { display: block; aspect-ratio: 4 / 5; max-width: 168px; overflow: hidden; border-radius: var(--radius-editorial); background: var(--color-paper); }
.mentor-card__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; }
.mentor-card__name { margin-top: 18px; font-size: 18px; font-weight: 700; letter-spacing: .06em; color: var(--color-ink); }
.mentor-card__role { margin-top: 4px; font-size: 13px; line-height: 1.6; color: var(--color-body); }

.note-banner {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(32px, 4vw, 64px);
  align-items: center;
  margin-top: var(--space-section-inner);
  padding: clamp(28px, 3.4vw, 48px);
  border-radius: var(--radius-surface);
  background: var(--color-paper);
}
.note-banner__photos { display: grid; grid-template-columns: 3fr 4fr; gap: 12px; align-items: end; }
.note-banner__photos img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--radius-editorial); }
.note-banner__photos img + img { aspect-ratio: 4 / 3; }
.note-banner__title { font-size: clamp(19px, 1.6vw, 22px); font-weight: var(--heading-weight); line-height: 1.65; color: var(--color-ink); }
.note-banner__text p:not(.sec-kicker) { margin-top: 12px; }
.note-banner .btn-outline { margin-top: 24px; }

@media (max-width: 1200px) {
  .member-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 40px; }
  .mentor-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 40px; }
}
@media (max-width: 900px) {
  .member-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 16px; }
  .member-card__name { font-size: 17px; }
  .mentor-grid { grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--color-border); }
  .mentor-grid li { border-bottom: 1px solid var(--color-border); }
  .mentor-card { display: grid; grid-template-columns: 72px minmax(0, 1fr); grid-template-rows: auto auto auto; column-gap: 16px; padding-block: 16px; }
  .mentor-card__photo { grid-row: 1 / 4; width: 72px; }
  .mentor-card__name { margin-top: 0; font-size: 16px; }
  .mentor-card__role { margin-top: 0; }
  .mentor-card .member-card__more { padding-top: 4px; }
  .note-banner { grid-template-columns: 1fr; }
}

/* ---------- Interview (member-01…05) ---------- */
/* Visual Polish：一覧・TOPと同じNavy系のテキスト。ヘッダー等には適用しない。 */
.page-member main {
  --color-ink: #0B1F33;
  --color-body: #222222;
  --color-muted: #5B6879;
  color: var(--color-body);
}

.mi-hero { position: relative; overflow: hidden; padding: calc(var(--header-h) + clamp(48px, 6vw, 96px)) 0 var(--space-section-inner); }
.mi-hero__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(48px, 6vw, 112px); align-items: center; }
.mi-hero__visual {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: min(100%, 480px);
  height: 600px;
  margin-inline: auto;
  padding: 0;
  clip-path: inset(-100vh -100vw 0 -100vw);
}
.mi-hero__brush {
  position: absolute;
  z-index: 0;
  left: -34%;
  bottom: -14%;
  width: 150%;
  max-width: none;
  pointer-events: none;
}
.mi-hero__photo {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  min-width: 0;
  object-fit: contain;
  object-position: center bottom;
  transform-origin: 50% 100%;
}
/* 元の透明素材を維持し、5人の頭部の視覚的な大きさだけを揃える。 */
.page-member.member-01 .mi-hero__photo,
.page-member.member-02 .mi-hero__photo { transform: scale(1.06); }
.page-member.member-03 .mi-hero__photo { transform: scale(.97); }
.page-member.member-05 .mi-hero__photo { transform: scale(.86); }
/* Interview：主張 → 前職から現在 → 人物署名。写真は既存の承認済みCutoutを維持。 */
.mi-hero__text { min-width: 0; }
.mi-hero__quote {
  position: relative;
  padding-top: clamp(42px, 3.8vw, 50px);
  font-size: clamp(28px, 3.05vw, 44px);
  font-weight: var(--heading-weight);
  line-height: 1.5;
  letter-spacing: .005em;
  font-feature-settings: "palt";
  color: var(--color-ink);
}
.mi-hero__career {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20px minmax(0, 1fr);
  gap: clamp(8px, 1.4vw, 18px);
  align-items: start;
  margin-top: clamp(30px, 3.6vw, 50px);
  padding-block: clamp(20px, 2.4vw, 28px);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.mi-hero__career-item { min-width: 0; }
.mi-hero__career-label {
  display: block;
  margin-bottom: 9px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--color-muted);
}
.mi-hero__career-value {
  display: block;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.75;
  color: var(--color-muted);
  overflow-wrap: normal;
  word-break: auto-phrase;
}
.mi-hero__career-item--origin .mi-hero__career-value { font-size: 18px; font-weight: 700; color: var(--world-navy); }
.mi-hero__career-arrow {
  align-self: center;
  justify-self: center;
  font-size: 20px;
  line-height: 1;
  color: #947837; font-weight: 500; }
.mi-hero__identity {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 6px 20px;
  margin-top: clamp(26px, 3vw, 40px);
}
.mi-hero__name { min-width: 0; color: var(--color-ink); }
.mi-hero__jp { font-size: clamp(24px, 2vw, 28px); font-weight: var(--heading-weight); line-height: 1.35; letter-spacing: .05em; }
.mi-hero__en { display: block; margin-top: 4px; font-size: 13px; font-weight: 500; letter-spacing: .045em; color: var(--color-muted); }
.mi-hero__year { padding-bottom: 3px; font-size: 13px; font-weight: 500; line-height: 1.65; color: var(--color-muted); }
/* Decorative Gold quote from the original Culture section; a CSS mark, not part of the headline text. */
.mi-hero__quote::before {
  content: "”";
  position: absolute;
  top: 3px;
  left: 0;
  color: #D8B46A;
  font-family: "Noto Sans JP", Georgia, serif;
  font-size: 46px;
  font-weight: 500;
  line-height: 1;
  pointer-events: none;
}
.mi-hero__quote--maruyama .u { display: block; white-space: nowrap; }

/* DP-001：章ごとに左の見出しと右の本文を組む。固定は章の範囲内。 */
.mi-article { padding-block: clamp(88px, 9vw, 128px) var(--space-section); background: var(--color-paper); }
.mi-article__wrap { max-width: min(88%, 1000px); }
.mi-qa {
  display: grid;
  grid-template-columns: clamp(220px, 28%, 272px) minmax(0, 1fr);
  column-gap: 4.8%;
}
.mi-qa + .mi-qa { margin-top: clamp(80px, 9vw, 128px); }
.mi-q {
  position: sticky;
  top: var(--gs-header-height);
  align-self: start;
  margin: 0;
  padding-top: 50px;
  font-size: clamp(22px, 2.6vw, 32px);
  font-weight: var(--heading-weight);
  line-height: 1.5;
  color: var(--color-ink);
  font-feature-settings: "palt";
}
.mi-q::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: min(172px, 100%);
  height: 4px;
  background: var(--world-gold);
}
.mi-q__num { display: block; margin-bottom: 12px; font-family: var(--font-serif); font-size: 24px; font-weight: 500; font-variant-numeric: lining-nums; line-height: 1; color: var(--color-muted); letter-spacing: .04em; }
.mi-qa__body {
  min-width: 0;
  border-top: 1px solid var(--color-border);
  padding-top: 50px;
}
/* 記事本文のサイズと行間。整列は subpage-typography.css の共通規則。 */
.mi-qa__body p {
  font-size: 16.5px;
  line-height: 2.26;
  letter-spacing: .012em;
  text-wrap: pretty;
}
.mi-qa__body p + p { margin-top: 1.55em; }
.mi-return { margin-top: var(--space-section-inner); }

@media (max-width: 900px) {
  .mi-hero__grid { grid-template-columns: 1fr; gap: 40px; }
  .mi-hero__visual {
    width: min(100%, 400px);
    height: clamp(350px, 92vw, 460px);
    margin-inline: auto;
    padding: 0;
  }
  .mi-hero__quote { font-size: clamp(22px, 6.1vw, 26px); padding-top: 42px; line-height: 1.6; }
  .mi-hero__quote::before { font-size: 42px; top: 3px; }
  .mi-hero__career { margin-top: 30px; gap: 8px; grid-template-columns: minmax(0, 1fr) 16px minmax(0, 1fr); padding-block: 20px; }
  .mi-hero__career-label { margin-bottom: 7px; font-size: 11px; }
  .mi-hero__career-value { font-size: 13px; line-height: 1.7; }
  .mi-hero__career-item--origin .mi-hero__career-value { font-size: 15px; }
  .mi-hero__career-arrow { font-size: 16px; }
  .mi-hero__identity { margin-top: 24px; }
  .mi-hero__jp { font-size: clamp(22px, 6vw, 25px); }
  .mi-hero__en { font-size: 13px; }
  .mi-q__num { font-size: 21px; }
  .mi-article { padding-top: 82px; }
  .mi-qa__body p { font-size: 15.5px; line-height: 2.22; }
}

@media (max-width: 760px) {
  .mi-article__wrap { max-width: 680px; }
  .mi-qa { display: block; }
  .mi-q {
    position: relative;
    top: auto;
    margin-bottom: 36px;
    padding-top: 20px;
    border-top: 1px solid var(--color-border);
    font-size: var(--heading-h2-size);
  }
  .mi-q::before { width: 40px; height: 3px; }
  .mi-qa__body { border-top: 0; padding-top: 0; }
}

/* SP：前職と現在を上下に並べ、長い前職を無理に狭い列へ収めない。 */
@media (max-width: 600px) {
  .mi-hero__career { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .mi-hero__career-item { display: grid; grid-template-columns: 3.4em minmax(0, 1fr); align-items: baseline; }
  .mi-hero__career-label { margin-bottom: 0; }
  .mi-hero__career-arrow { justify-self: start; margin-left: 3.6em; font-size: 14px; transform: rotate(90deg); }
}

/* ---------- Mentor profile (member-06…10) ---------- */
.mentor-hero .mi-hero__meta { display: flex; flex-direction: column; gap: 6px; margin-top: 18px; font-size: 14px; color: var(--color-muted); }
.mentor-hero__origin { font-size: 17px; font-weight: 700; color: var(--world-navy); }
.mentor-hero { overflow: hidden; padding: calc(var(--header-h) + clamp(56px, 7vw, 112px)) 0 var(--space-section); }
.mentor-hero__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(48px, 6vw, 112px); align-items: center; }
.mentor-hero__visual { position: relative; width: min(100%, 360px); margin-inline: auto; padding: 32px 32px 56px 0; }
.mentor-hero__brush {
  position: absolute;
  z-index: 0;
  right: -38%;
  bottom: -10%;
  width: 140%;
  max-width: none;
  pointer-events: none;
}
.mentor-hero__photo {
  position: relative;
  z-index: 1;
  width: min(100%, 260px);
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 22%;
  border-radius: var(--radius-editorial);
  background: var(--color-paper);
}
.mentor-hero__bio {
  margin-top: 32px;
  padding-top: 28px;
  border-top: 1px solid var(--color-border);
  max-width: 34em;
  font-size: clamp(17px, 1.4vw, 19px);
  font-weight: 500;
  line-height: 2;
  color: var(--color-ink);
}
@media (max-width: 900px) {
  .mentor-hero__grid { grid-template-columns: 1fr; gap: 32px; }
  .mentor-hero__visual { width: 72%; margin: 0; }
}