@charset "UTF-8";

/* ==========================================================================
   SEGA SAMMY PHOENIX — Page: PLAYER ( メンバー一覧 / メンバー詳細 )
   Figma: Olrvdnxd3NwLbhAQc64Qtl
     - node 50:13239 メンバー一覧   ( PC base 1512px )
     - node 50:12794 メンバー詳細   ( PC base 1512px )
   一覧と詳細は同じ赤グラデ帯・パンくずを共有するため 1 ファイルにまとめる。
   HEADER / section-head / NEWS / MOVIE / FOOTER は components.css を参照。
   ========================================================================== */

.page-player {
  /* カード上の文字色 ( Figma: #161616 ) */
  --player-card-ink: #161616;
  /* 英字ローマ字表記 ( Figma: #969696 ) */
  --player-card-sub: #969696;
  /* 詳細カードの罫線 */
  --player-rule: #656565;
  --player-rule-weak: #bcbcbc;

  /* カード列は x = 106 〜 1458 の 1352px。左右余白 80px。 */
  --player-list-gutter: clamp(16px, 5.29vw, 80px);
  --player-card-radius: min(.66vw, 10px);

  /* Figma では赤グラデの矩形の上に y = 1584 から黒の矩形が重なる。
     帯の高さはページごとに変わるので、グラデーションだけ高さを固定し、
     その下は黒で塗る ( グラデーションの終端も黒なので継ぎ目は出ない )。 */
  --player-grad-h: max(calc(1584 * var(--r)), 900px);
}

/* --------------------------------------------------------------------------
   赤グラデ帯 ( 見出し + パンくず + 本体 を包む )
   -------------------------------------------------------------------------- */
.player-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* Figma: header 下端 102 → MEMBER 見出し 133 */
  padding-top: calc(var(--header-h) + 31px);
  /* Figma: カード下端 1277 → NEWS 帯 1584 */
  padding-bottom: clamp(120px, 20.3vw, 307px);
}

/* Figma: カード下端 2376 → NEWS 帯 2634 */
.player-band--detail {
  padding-bottom: clamp(110px, 17.06vw, 258px);
}

.player-band__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: #000;
  background-image: var(--grad-subpage);
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100% var(--player-grad-h);
  pointer-events: none;
}

/* Figma の NOISE エフェクト。TOP / MISSION と同じ SVG タイルを等倍で敷く。 */
.player-band__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--noise);
  background-repeat: repeat;
  background-size: var(--noise-tile);
}

/* 炎のグラフィック。TOP hero と同じ hero-fire.webp を角度だけ変えて再利用する。 */
.player-band__fire {
  position: absolute;
  z-index: -1;
  max-width: none;
  height: auto;
  pointer-events: none;
  transform-origin: center center;
}

/* 一覧 : 回転 -150.49deg / 中心 (823.79, 747.36) / 実寸 1572.415 x 2369.614 */
.player-band:not(.player-band--detail) .player-band__fire {
  top: calc(747.36 * var(--r));
  left: 54.48%;
  width: max(104%, 620px);
  aspect-ratio: 1572.415 / 2369.614;
  transform:
    translate3d(
      calc(-50% + var(--ember-scroll-x, 0px)),
      calc(-50% + var(--ember-scroll-y, 0px)),
      0
    )
    rotate(-150.49deg);
}

/* 詳細 : 回転 66.63deg / 中心 (684.659, 690.527) / 実寸 1234.432 x 1860.278 */
.player-band--detail .player-band__fire {
  top: calc(690.527 * var(--r));
  left: 45.28%;
  width: max(81.64%, 560px);
  aspect-ratio: 1234.432 / 1860.278;
  transform:
    translate3d(
      calc(-50% + var(--ember-scroll-x, 0px)),
      calc(-50% + var(--ember-scroll-y, 0px)),
      0
    )
    rotate(66.63deg);
}

.player-band.is-ember-scroll-in-view .player-band__fire,
.player-band.is-ember-scroll-in-view .player-detail__backdrop-fire {
  will-change: transform;
}

/* --------------------------------------------------------------------------
   メンバー一覧 : カードグリッド
   Figma: 665 x 427 のカードを 2 列 / column-gap 22 / row-gap 46
   -------------------------------------------------------------------------- */
.member-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: min(1.46vw, 22px);
  row-gap: min(3.04vw, 46px);
  width: min(1352px, 100% - 2 * var(--player-list-gutter));
  /* Figma: パンくず下端 308 → カード上端 377 */
  margin: min(4.56vw, 69px) auto 0;
}

.member-card {
  position: relative;
}

/* ホバー中のカードを最前面へ。拡大した写真が隣のカードに回り込まれないようにする。 */
.member-card:hover,
.member-card:focus-within {
  z-index: 2;
}

.member-card__inner {
  height: 100%;
}

.member-card__link {
  position: relative;
  display: block;
  height: 100%;
  /* 写真がカード上端をはみ出す選手がいるので clip しない。
     白い地は background なので border-radius だけで丸くなる。 */
  overflow: visible;
  border-radius: var(--player-card-radius);
  background: var(--color-white);
  transition:
    transform var(--motion-base) var(--ease-premium),
    box-shadow var(--motion-slow) var(--ease-premium);
}

/* Figma: 炎の背景 425 x 426 をカード左上に配置 ( カード幅 665 の 63.91% ) */
.member-card__media {
  position: absolute;
  inset: 0 auto 0 0;
  width: 63.91%;
}

.member-card__bg-clip {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: var(--player-card-radius) 0 0 var(--player-card-radius);
}

.member-card__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
  transition: transform var(--motion-slow) var(--ease-premium);
}

.member-card__photo {
  position: absolute;
  /* 背景より前面。下端を固定したまま拡大し、写真下に隙間を作らない。 */
  z-index: 1;
  bottom: 0;
  max-width: none;
  object-fit: contain;
  object-position: bottom center;
  transform-origin: center bottom;
  transition: transform var(--motion-image) var(--ease-premium);
}

/* 左位置・幅は炎の背景 (425px) 基準、高さはカード (427px) 基準の比率。 */
.member-card__photo--kayamori,
.member-card__photo--sano {
  left: 1.65%;
  width: 76.71%;
  height: 98.13%;
}

.member-card__photo--daigo {
  left: 1.41%;
  width: 74.59%;
  height: 107.49%;
}

.member-card__photo--takeuchi {
  left: 0;
  width: 80.71%;
  height: 98.13%;
}

/* Figma: テキスト列は x = 329 ( 49.47% ) から / 右余白 26 ( 3.91% ) */
.member-card__body {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: min(3.31vw, 50px) 3.91% min(1.72vw, 26px) 49.47%;
  color: var(--player-card-ink);
}

.member-card__org {
  font-family: var(--font-jp);
  font-size: clamp(11px, .93vw, 14px);
  font-weight: 500;
  line-height: 1.714;
  letter-spacing: -.0223em;
}

.member-card__name {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: min(1.12vw, 17px);
  margin-top: min(1.39vw, 21px);
}

.member-card__name-ja {
  font-family: var(--font-jp);
  font-size: clamp(19px, 2.05vw, 31px);
  font-weight: 700;
  line-height: min(1.59vw, 24px);
  letter-spacing: -.0076em;
  color: var(--color-red);
  white-space: nowrap;
}

.member-card__name-en {
  font-family: var(--font-en);
  font-size: clamp(11px, 1.06vw, 16px);
  font-weight: 400;
  line-height: min(1.59vw, 24px);
  letter-spacing: .0055em;
  text-transform: uppercase;
  color: var(--player-card-sub);
  white-space: nowrap;
}

.member-card__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: min(.93vw, 14px);
  margin-top: min(1.39vw, 21px);
}

.member-card__badge {
  display: inline-flex;
  align-items: center;
  height: min(2.05vw, 31px);
  padding-inline: min(1.07vw, 16.1px);
  border: 1px solid var(--player-card-ink);
  border-radius: 19px;
  font-family: var(--font-jp);
  font-size: clamp(11px, 1.06vw, 16px);
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
}

.member-card__nick {
  font-family: var(--font-jp);
  font-size: clamp(10px, .93vw, 14px);
  font-weight: 500;
  line-height: 1.714;
  white-space: nowrap;
}

/* Figma では 5 行で切り詰められている。文言側の「…」に合わせて行数も揃える。 */
.member-card__text {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  line-clamp: 5;
  margin-top: min(1.32vw, 20px);
  font-family: var(--font-jp);
  font-size: clamp(12px, 1.11vw, 16.767px);
  font-weight: 500;
  line-height: 1.521;
}

/* 「詳細はこちら」。共通 .link-more と同じ寸法・同じ挙動に揃える。 */
.member-card__more {
  display: flex;
  align-items: center;
  gap: min(1.26vw, 19px);
  margin-top: min(1.95vw, 29.5px);
  margin-left: auto;
  padding-right: min(1.06vw, 16px);
}

.member-card__more-text {
  font-family: var(--font-jp);
  font-size: clamp(13px, 1.19vw, 18px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: .15em;
  color: var(--color-red);
  white-space: nowrap;
}

.member-card__more-icon {
  width: min(3.5vw, 53px);
  height: auto;
}

/* --------------------------------------------------------------------------
   メンバー詳細
   -------------------------------------------------------------------------- */
.player-detail__layout {
  display: grid;
  grid-template-columns: minmax(0, 483fr) minmax(0, 764fr);
  column-gap: min(2.18vw, 33px);
  align-items: start;
  /* Figma: 左 103 / 右 129 */
  padding-left: min(6.81vw, 103px);
  padding-right: min(8.53vw, 129px);
  /* Figma: パンくず下端 308 → 縦位置 379 */
  margin-top: min(4.7vw, 71px);
}

.player-detail__backdrop-track {
  display: none;
}

.player-detail__portrait {
  margin: 0;
}

.player-detail__portrait img {
  display: block;
  width: 100%;
  height: auto;
}

/* PC のプロフィール閲覧中は、左の写真と背景だけを親レイアウト内で留める。
   背景 track の開始位置・高さを .player-detail__layout に揃えることで、右カードの
   終端に達した時点で写真と背景が同時に自然解除される。 */
@media (min-width: 1181px) {
  .player-band--detail {
    --player-detail-backdrop-offset: 0px;
    --player-detail-backdrop-tail: 0px;
    --player-detail-backdrop-track-height: 0px;
    --player-detail-sticky-height: 100vh;
    --player-detail-portrait-top: calc(var(--header-h) + clamp(20px, 2.12vw, 32px));
    --player-detail-backdrop-overlap: var(--player-detail-portrait-top);
    /* overflow: hidden は sticky の基準をこの要素へ変えてしまうため、
       見た目のクリップを保ったまま scroll container を作らない clip を使う。 */
    overflow: clip;
  }

  .player-detail__layout {
    position: relative;
  }

  .player-band--detail.is-sticky-backdrop-ready .player-detail__backdrop-track {
    display: block;
  }

  /* band 直下の負 z-index レイヤーに置くことで、画面上端まで描画しても
     見出しやパンくずを覆わない。track の範囲は右カラムと同じ高さ。 */
  .player-detail__backdrop-track {
    position: absolute;
    top: var(--player-detail-backdrop-offset);
    right: 0;
    left: 0;
    z-index: -1;
    height: var(--player-detail-backdrop-track-height);
    pointer-events: none;
  }

  .player-detail__backdrop {
    position: sticky;
    top: var(--player-detail-portrait-top);
    width: 100%;
    height: var(--player-detail-sticky-height);
  }

  /* 写真の sticky 上端ぶん上へ広げ、固定中は透過ヘッダーの背面を含む
     viewport 最上部から背景を描画する。 */
  .player-detail__backdrop-visual {
    position: absolute;
    top: calc(-1 * var(--player-detail-backdrop-overlap));
    right: 0;
    left: 0;
    height: calc(
      100vh + var(--player-detail-backdrop-overlap) +
      var(--player-detail-backdrop-tail) + 2px
    );
    height: calc(
      100dvh + var(--player-detail-backdrop-overlap) +
      var(--player-detail-backdrop-tail) + 2px
    );
    overflow: hidden;
  }

  .player-detail__backdrop-bg {
    position: absolute;
    inset: 0;
    background-color: #000;
    background-image: var(--grad-subpage);
    background-repeat: no-repeat;
    background-position:
      center calc(
        var(--player-detail-backdrop-overlap) -
        var(--player-detail-backdrop-offset)
      );
    background-size: 100% var(--player-grad-h);
  }

  .player-detail__backdrop-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--noise);
    background-repeat: repeat;
    background-position:
      center calc(
        var(--player-detail-backdrop-overlap) -
        var(--player-detail-backdrop-offset)
      );
    background-size: var(--noise-tile);
  }

  .player-detail__backdrop-fire {
    position: absolute;
    top: calc(
      calc(690.527 * var(--r)) - var(--player-detail-backdrop-offset) +
      var(--player-detail-backdrop-overlap)
    );
    left: 45.28%;
    width: max(81.64%, 560px);
    max-width: none;
    height: auto;
    aspect-ratio: 1234.432 / 1860.278;
    transform:
      translate3d(
        calc(-50% + var(--ember-scroll-x, 0px)),
        calc(-50% + var(--ember-scroll-y, 0px)),
        0
      )
      rotate(66.63deg);
    transform-origin: center center;
  }

  .player-detail__portrait {
    position: sticky;
    top: var(--player-detail-portrait-top);
    z-index: 1;
    display: flex;
    align-items: flex-start;
    justify-content: center;
  }

  .player-detail__portrait img {
    width: auto;
    max-width: 100%;
    max-height: calc(100vh - var(--player-detail-portrait-top) - 24px);
    max-height: calc(100dvh - var(--player-detail-portrait-top) - 24px);
  }

  .player-detail__main {
    position: relative;
    z-index: 1;
  }
}

/* 選手名ブロック ( Figma: x 621 / y 379 / gap 38.715 ) ---------------------- */
.player-hero {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: min(2.56vw, 38.715px);
  color: var(--color-white);
}

.player-hero__org {
  font-family: var(--font-jp);
  font-size: clamp(15px, 1.71vw, 25.81px);
  font-weight: 500;
  line-height: 1.714;
  letter-spacing: -.0223em;
}

.player-hero__name {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: min(2.07vw, 31.34px);
}

.player-hero__name-ja {
  font-family: var(--font-jp);
  font-size: clamp(30px, 3.78vw, 57.15px);
  font-weight: 700;
  line-height: .774;
  letter-spacing: -.0101em;
}

.player-hero__name-en {
  font-family: var(--font-en);
  font-size: clamp(16px, 1.95vw, 29.497px);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: .0055em;
  text-transform: uppercase;
}

.player-hero__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: min(1.71vw, 25.81px);
}

.player-hero__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: min(14.27vw, 215.7px);
  height: min(3.78vw, 57.15px);
  padding-inline: min(1.81vw, 27.29px);
  border: max(1px, .122vw) solid currentColor;
  border-radius: 999px;
  font-family: var(--font-jp);
  font-size: clamp(16px, 1.95vw, 29.497px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.0195em;
  white-space: nowrap;
}

.player-hero__nick {
  font-family: var(--font-jp);
  font-size: clamp(15px, 1.71vw, 25.81px);
  font-weight: 500;
  line-height: 1.714;
}

/* 白いプロフィールカード ( Figma: 764 x 1725 / radius 17 / rgba(255,255,255,.95) ) */
.player-card-panel {
  /* Figma: 名前ブロック下端 603.6 → カード上端 651 */
  margin-top: min(3.14vw, 47.42px);
  /* セクションの左右 24px と合算した本文位置は維持しつつ、
     区切り線を本文より左右へ 24px 広げる。 */
  padding-block: 0;
  padding-inline: max(0px, calc(min(6.32vw, 95.5px) - 24px));
  border-radius: min(1.12vw, 17px);
  background: rgba(255, 255, 255, .95);
  color: var(--color-black);
}

.player-section {
  padding-inline: 24px;
  border-bottom: 1px solid var(--player-rule);
}

.player-section--facts {
  padding-block: 70px;
}

.player-section--story,
.player-section--sns {
  padding-block: 80px;
}

.player-section--qa {
  padding-block: 60px;
}

.player-section__label {
  font-family: var(--font-en);
  font-size: 10px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--color-red);
}

/* 基本プロフィール ---------------------------------------------------------- */
.player-facts {
  margin-top: 20px;
}

.player-facts__row {
  display: grid;
  grid-template-columns: min(10.58vw, 160px) minmax(0, 1fr);
  column-gap: min(2.12vw, 32px);
  padding-block: 16px;
  border-bottom: 1px solid var(--player-rule-weak);
}

.player-facts__term {
  font-family: var(--font-en);
  font-size: clamp(12px, .93vw, 14px);
  font-weight: 400;
  line-height: 1.429;
}

.player-facts__desc {
  margin: 0;
  font-family: var(--font-jp);
  font-size: clamp(15px, 1.19vw, 18px);
  font-weight: 500;
  line-height: 1.112;
}

/* Story --------------------------------------------------------------------- */
.player-section--story .player-section__body {
  margin-top: min(2.65vw, 40px);
}

.player-story__lead {
  font-family: var(--font-jp);
  font-size: clamp(21px, 2.25vw, 34px);
  font-weight: 700;
  line-height: 1.391;
  letter-spacing: -.022em;
  color: var(--color-red);
}

.player-story__text {
  /* Figma: 見出し 2 行 ( 47.3px x 2 ) の下端 95 → 本文 130.5 */
  margin-top: min(2.38vw, 36px);
  font-family: var(--font-jp);
  font-size: clamp(14px, 1.06vw, 16px);
  font-weight: 500;
  line-height: 2;
}

/* Q&A ----------------------------------------------------------------------- */
.player-qa {
  margin-top: 10px;
  border-top: 1px solid var(--player-rule);
}

.player-qa__item {
  border-bottom: 1px solid var(--player-rule);
}

.player-qa__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 20px;
  font-family: var(--font-en);
  font-size: clamp(14px, 1.12vw, 17px);
  font-weight: 400;
  line-height: 1.412;
  list-style: none;
}

summary.player-qa__q {
  cursor: pointer;
}

summary.player-qa__q::-webkit-details-marker {
  display: none;
}

.player-qa__mark {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
}

.player-qa__mark svg {
  display: block;
  transition: transform var(--motion-base) var(--ease-premium);
}

.player-qa__item[open] .player-qa__mark svg {
  transform: rotate(45deg);
}

.player-qa__a {
  padding-bottom: 20px;
  font-family: var(--font-jp);
  font-size: clamp(14px, 1.06vw, 16px);
  font-weight: 500;
  line-height: 2;
}

/* SNS & Goods --------------------------------------------------------------- */
.player-sns {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: min(2.65vw, 40px);
}

.player-sns__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border: 1px solid var(--color-black);
  border-radius: 999px;
  font-family: var(--font-en);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.429;
  color: var(--color-black);
  transition:
    background-color var(--motion-fast) var(--ease-standard),
    color var(--motion-fast) var(--ease-standard),
    transform var(--motion-base) var(--ease-premium);
}

.player-sns__icon {
  flex: none;
  display: inline-flex;
}

.player-sns__icon svg {
  display: block;
}

.player-sns__note {
  margin-top: 24px;
  font-family: var(--font-en);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.333;
}

.player-sns__note a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Interaction ( hover / focus-visible )
   TOP の PLAYER カードと同じモーション言語を踏襲する。
   -------------------------------------------------------------------------- */
.member-card__link:focus-visible,
.player-sns__link:focus-visible {
  outline-color: var(--color-red);
}

.member-card__link:focus-visible {
  transform: translateY(-5px);
  box-shadow:
    0 18px 38px -18px rgba(14, 6, 0, .55),
    0 4px 14px -8px rgba(216, 39, 12, .3);
}

.member-card__link:focus-visible .member-card__photo {
  transform: scale(1.084);
}

.member-card__link:focus-visible .member-card__bg {
  transform: scale(1.015);
}

.member-card__link:focus-visible .more-action__icon {
  transform: translateX(7px) scale(1.05);
}

@media (hover: hover) and (pointer: fine) {
  .member-card__link:hover {
    transform: translateY(-5px);
    box-shadow:
      0 18px 38px -18px rgba(14, 6, 0, .55),
      0 4px 14px -8px rgba(216, 39, 12, .3);
  }

  .member-card__link:hover .member-card__photo {
    transform: scale(1.084);
    transition-delay: var(--stagger-1);
    will-change: transform;
  }

  .member-card__link:hover .member-card__bg {
    transform: scale(1.015);
  }

  .player-sns__link:hover {
    background: var(--color-black);
    color: var(--color-white);
    transform: translateY(-2px);
  }

  .player-sns__note a:hover {
    color: var(--color-red);
  }
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

/* 2 カラムのままだと本文列が狭くなりすぎるため 1 カラムへ。 */
@media (max-width: 1024px) {
  .member-list {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 28px;
    width: min(760px, 100% - 2 * var(--gutter));
    margin-top: 48px;
  }

  .member-card__org,
  .member-card__nick {
    font-size: 13px;
  }

  .member-card__name-ja {
    font-size: 27px;
    line-height: 1;
  }

  .member-card__name-en {
    font-size: 14px;
    line-height: 1;
  }

  .member-card__badge {
    height: 29px;
    padding-inline: 14px;
    font-size: 14px;
  }

  .member-card__text {
    font-size: 14px;
  }

  .member-card__more-text {
    font-size: 16px;
  }

  .member-card__more-icon {
    width: 44px;
  }
}

@media (max-width: 1180px) {
  .player-detail__layout {
    grid-template-columns: minmax(0, 1fr);
    row-gap: clamp(28px, 4vw, 48px);
    padding-inline: var(--gutter);
    margin-top: 48px;
  }

  .player-detail__portrait {
    width: min(100%, 420px);
    margin-inline: auto;
  }

  .player-hero {
    gap: 20px;
  }

  .player-hero__org,
  .player-hero__nick {
    font-size: 16px;
    line-height: 1.6;
  }

  .player-hero__name {
    gap: 16px;
  }

  .player-hero__name-ja {
    font-size: clamp(30px, 4.6vw, 44px);
    line-height: 1;
  }

  .player-hero__name-en {
    font-size: clamp(15px, 2.2vw, 21px);
    line-height: 1;
  }

  .player-hero__badge {
    min-width: 0;
    height: 38px;
    padding-inline: 18px;
    border-width: 1px;
    font-size: 17px;
  }

  .player-card-panel {
    --player-card-responsive-inline: clamp(20px, 4vw, 48px);
    margin-top: 32px;
    padding-block: 0;
    padding-inline: max(0px, calc(var(--player-card-responsive-inline) - 24px));
    border-radius: 14px;
  }

  .player-section {
    padding-inline: min(24px, var(--player-card-responsive-inline));
  }

  .player-section--facts {
    padding-block: 40px;
  }

  .player-section--story,
  .player-section--sns {
    padding-block: 44px;
  }

  .player-section--qa {
    padding-block: 36px;
  }

  .player-section--story .player-section__body,
  .player-sns {
    margin-top: 24px;
  }

  .player-story__text {
    margin-top: 28px;
  }
}

/* カードを縦積みへ。写真を上、テキストを下に置く。 */
@media (max-width: 640px) {
  .member-list {
    row-gap: 22px;
  }

  .member-card__link {
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .member-card__media {
    position: relative;
    inset: auto;
    width: 100%;
    aspect-ratio: 5 / 4;
  }

  .member-card__bg-clip {
    border-radius: 0;
  }

  .member-card__photo,
  .member-card__photo--kayamori,
  .member-card__photo--sano,
  .member-card__photo--daigo,
  .member-card__photo--takeuchi {
    left: 50%;
    width: auto;
    height: 100%;
    transform: translateX(-50%);
  }

  .member-card__photo--takeuchi {
    height: 97%;
  }

  .member-card__body {
    padding: 22px 20px 20px;
  }

  .member-card__name,
  .member-card__meta {
    margin-top: 12px;
  }

  .member-card__name-ja {
    font-size: 24px;
  }

  .member-card__text {
    margin-top: 14px;
  }

  .member-card__more {
    margin-top: 18px;
    padding-right: 0;
  }

  .member-card__more-icon {
    width: 38px;
  }

  /* 縦積みでも下端固定のまま、TOP と同じ拡大率にする。 */
  .member-card__link:focus-visible .member-card__photo {
    transform: translateX(-50%) scale(1.084);
  }
}

@media (max-width: 640px) and (hover: hover) and (pointer: fine) {
  .member-card__link:hover .member-card__photo {
    transform: translateX(-50%) scale(1.084);
  }
}

@media (prefers-reduced-motion: reduce) {
  .member-card__link:focus-visible .more-action__icon {
    transform: none;
  }
}

@media (max-width: 600px) {
  .player-facts__row {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 4px;
    padding-block: 14px;
  }

  .player-qa__q {
    padding-block: 16px;
  }

  .player-sns {
    gap: 10px;
  }

  .player-sns__link {
    padding: 9px 16px;
    font-size: 13px;
  }
}