/* member.css — 2026リニューアル
   Figma 10 メンバー紹介 807:9337（PC 615:6280／SP 615:6284）
   company.css（会社概要）が同時に読み込まれる前提。共通トークン（--color-*）はcompany.cssを参照。 */

/* =======================================================
hero（共通黒背景ヘッダー）
======================================================= */
.l-member-hero {
  position: relative;
  overflow: hidden;
  background: var(--color-navy);
}

.p-member-hero__bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.p-member-hero__swoosh {
  position: absolute;
  width: 28.9375rem;
  height: 36.534375rem;
  opacity: 0.6;
  mix-blend-mode: soft-light;
}
.p-member-hero__swoosh--a {
  top: -15.25rem;
  right: 8%;
}
.p-member-hero__swoosh--b {
  top: 3.5rem;
  right: 29%;
  transform: scaleX(-1);
}
@media screen and (max-width: 768px) {
  .p-member-hero__swoosh {
    width: 14.46875rem;
    height: 18.26875rem;
  }
  .p-member-hero__swoosh--a {
    top: -7.625rem;
    right: 4%;
  }
  .p-member-hero__swoosh--b {
    top: 1.75rem;
    right: 25%;
  }
}

.p-member-hero__inner {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  /* Figma 615:6280：見出し帯下259→MEMBER帯の黒背景下400（下1.875rem） */
  padding: 16.1875rem 0 1.875rem;
}
@media screen and (min-width: 769px) {
  .p-member-hero__inner {
    /* Figma 615:6280：見出し帯は左110・1220px列（他の見出し帯と同じ列） */
    width: 76.25rem;
  }
}
@media screen and (max-width: 768px) {
  .p-member-hero__inner {
    /* SPはパンくずが見出しより上（Figma 715:17849）。DOM順はhgroup→breadcrumbのため逆順で表示する */
    flex-direction: column-reverse;
    align-items: flex-start;
    /* Figma SP：パンくず下116→MEMBER上156 */
    gap: 2.125rem;
    /* Figma SP：メンバー紹介下232→黒背景下280（下3rem） */
    padding: 5.875rem 0 3rem;
  }
}

.p-member-hero__hgroup-txt {
  font-size: 4.375rem;
  font-weight: 200;
  line-height: 1;
  letter-spacing: 0.03em;
  color: var(--color-white);
}
@media screen and (max-width: 768px) {
  .p-member-hero__hgroup-txt {
    font-size: 2.5rem;
    line-height: calc(50/40);
  }
}
.p-member-hero__hgroup-ttl {
  margin-top: 0.3125rem;
  font-size: 1.25rem;
  font-weight: 500;
  line-height: calc(36/20);
  color: var(--color-white);
}
@media screen and (max-width: 768px) {
  .p-member-hero__hgroup-ttl {
    margin-top: 0.125rem;
    font-size: 1rem;
    line-height: calc(24/16);
  }
}

/* パンくず：ヒーローが暗背景のため白文字にし、SPでも表示する
   （サイト共通のstyle.cssはSP時 .p-bread を非表示にするが、
   本ヒーローはFigmaでSP表示が指定されているためこのページ内だけ上書きする） */
.l-member-hero .p-bread {
  margin: 0;
}
@media screen and (max-width: 768px) {
  .l-member-hero .p-bread {
    display: block;
  }
  .l-member-hero .p-bread__list {
    justify-content: flex-start;
  }
}
.l-member-hero .p-bread__item {
  color: rgba(255, 255, 255, 0.7);
}

/* =======================================================
member list
======================================================= */
.l-member {
  /* Figma 615:6280：黒背景下400→谷写真上520（上7.5rem） */
  padding: 7.5rem 0 7.5rem;
}
@media screen and (max-width: 768px) {
  .l-member {
    /* Figma SP：黒背景下280→谷写真上340（上3.75rem） */
    padding: 3.75rem 0 3.75rem;
  }
}

.p-member__list {
  display: flex;
  flex-direction: column;
  gap: 3.75rem;
}
@media screen and (max-width: 768px) {
  .p-member__list {
    /* Figma SP：カード間60px（他カードと同じ） */
    gap: 3.75rem;
  }
}

.p-member__item {
  display: grid;
  grid-template-columns: 30.25rem 1fr;
  gap: 3.125rem;
}
@media screen and (max-width: 768px) {
  .p-member__item {
    grid-template-columns: auto;
    /* Figma SP：写真下から氏名上まで24px（行の半行送り分-2px調整済み） */
    gap: 1.375rem;
  }
}

.p-member__photo {
  overflow: hidden;
  aspect-ratio: 3 / 2;
  border-radius: 0.9375rem;
}
.p-member__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 25%;
}

.p-member__body {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding-top: 0.125rem;
}

.p-member__head {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.p-member__name-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem;
}

.p-member__name {
  font-size: 1.625rem;
  line-height: calc(40/26);
  color: var(--color-txt);
}
@media screen and (max-width: 768px) {
  .p-member__name {
    font-size: 1.25rem;
    line-height: calc(30/20);
  }
}

.p-member__name-en {
  font-size: 1rem;
  line-height: 1;
  color: var(--color-gray);
}
@media screen and (max-width: 768px) {
  .p-member__name-en {
    font-size: 0.875rem;
    line-height: calc(20/14);
  }
}

.p-member__x {
  display: inline-flex;
  width: 1.25rem;
  height: 1.25rem;
}
@media (hover: hover) {
  .p-member__x {
    transition: opacity 0.3s;
  }
  .p-member__x:hover {
    opacity: 0.6;
  }
}

.p-member__role {
  font-size: 0.875rem;
  line-height: calc(30/14);
  color: var(--color-txt);
}

.p-member__txt {
  font-size: 0.875rem;
  line-height: calc(30/14);
  color: var(--color-txt);
}
/* XとnoteのアイコンをI少し大きく（20→26・10/11谷） */
.p-member__x { width: 1.625rem; height: 1.625rem; align-items: center; justify-content: center; }
.p-member__x img { width: 100%; height: 100%; object-fit: contain; }
.p-member__note img { width: 78%; height: 78%; object-fit: contain; } /* 余白を除いた絵にしてXと同じ見た目の大きさに（10/13谷「小さい」） */
/* 他の下層と同じ縦幅（英字の上179・高さ320）にそろえる（10/11谷） */
@media screen and (min-width: 769px) {
  .p-member-hero__inner { padding-top: 11.1875rem; }
}

/* 10/14 Astra監査04：SPの見出し帯を他の下層（企業情報・採用情報など）と同じ高さにそろえる。
   他の下層と同じくSPではパンくずを出さない（10/14谷「SPの下層MVの縦幅」で他の帯を約8割に詰めたのに合わせる） */
@media screen and (max-width: 768px) {
  .l-member-hero .p-bread { display: none; }
  .p-member-hero__inner { gap: 0; padding: 6.75rem 0 1.125rem; }
}