.player-page {
} /* =======================
FV
======================= */
.fv {
  position: relative;
  overflow: hidden;
  min-height: 520px;
  background: #f2f2f2;
} /* ギザギザ画像エリア（書き出し元: player_bg.png → player-profile-hero-bg.png） */
.fv__bg {
  position: absolute;
  inset: 0;
  background-image: url("../images/player/player-profile-hero-bg.png");
  background-size: cover;
  background-position: right top;
  background-repeat: no-repeat;
} /* 白い斜めマスク */
.fv__mask {
  position: absolute;
  inset: 0; /* Figma の白い斜めパスを SVG で再現 */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='820' height='520' viewBox='0 0 820 520' fill='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='410' y1='0' x2='410' y2='520' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='white'/%3E%3Cstop offset='1' stop-color='%23EDEEF2'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 520V0H820L519.722 520H0Z' fill='url(%23g)'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: left top;
  z-index: 1;
  fill: var(--fv-mask-gradient);
} /* FV 内だけ .l-page をグリッド化（他セクションの .l-page はそのまま） */
.fv > .l-page {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 520px) minmax(0, 1fr);
  grid-template-rows: 1fr;
  column-gap: var(--gap-section-md);
  row-gap: 0;
  box-sizing: border-box;
  width: 100%;
  max-width: var(--content-max);
  height: 520px;
  min-height: 520px;
  margin-block: 0;
  margin-inline: auto; /* 上はパディングにしない（行の実効高が縮んで写真が下に見えるのを防ぐ）。左のみガター */
  padding: 0 0 0 var(--gap-section-md);
} /* FV コピーエリア（Figma Frame 564 準拠: column, gap 40px） */
.fv__copy {
  display: flex;
  flex-direction: column;
  gap: 40px;
  color: var(--navy);
  max-width: 400px;
  width: 100%;
  align-self: start;
  margin-top: 140px;
} /* 日本語名（Figma: Noto Sans JP, 700, 48px, line-height 1.2, #22347A） */
.fv__name-ja {
  margin: 0;
  font-family: var(--font-heading-jp-family);
  font-size: 48px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--navy);
} /* 英語名（Figma: Oswald, 400, 24px, letter-spacing 4%, #22347A） */
.fv__name-en {
  display: block;
  margin: 0;
  font-family: var(--font-heading-en-family);
  font-size: 24px;
  font-weight: 400;
  line-height: 1.48;
  letter-spacing: 0.04em;
  color: var(--navy);
  text-transform: uppercase;
} /* GK と背番号の行（Figma Frame 554: row, space-between, flex-end） */
.fv__meta {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-end;
  align-self: stretch;
  margin: 0;
} /* ポジション表記（Figma: Oswald, 400, 96px, #22347A） */
.fv__pos {
  font-family: var(--font-heading-en-family);
  font-size: 96px;
  font-weight: 400;
  line-height: 1;
  color: var(--navy);
} /* 背番号（Figma: Oswald, 500, 120px, fill #000, stroke #22347A 4px） */
.fv__num {
  font-family: var(--font-heading-en-family);
  font-size: 120px;
  font-weight: 500;
  line-height: 1;
  color: #fff; /* text-shadow を使ったアウトライン表現（縁取り） */
  text-shadow:
    -2px 0 var(--navy),
    2px 0 var(--navy),
    0 -2px var(--navy),
    0 2px var(--navy),
    -2px -2px var(--navy),
    2px -2px var(--navy),
    -2px 2px var(--navy),
    2px 2px var(--navy);
} /* 選手写真：右カラムいっぱいのうち中央・下揃え（最大幅は従来に近い 540px） */
.fv__photo {
  display: block;
  width: auto;
  max-width: min(540px, 100%);
  height: auto;
  margin: 0;
  justify-self: center;
  align-self: end;
  z-index: 4;
}
.fv__photo--empty {
  width: min(540px, 100%);
  aspect-ratio: 540 / 520;
} /* 共通ドロップシャドウ（x:0 y:4 blur:4 color:#000 alpha:25%） */
.shadow-drop {
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
} /* =======================
DATA（Figma Frame 816 準拠）
======================= */ /* 余白は各セクション内の .l-page が担当（背景のみセクションでフル幅） */
.data,
.profile,
.gallery {
  padding: 0;
} /* DATA 背景（書き出し元: data_bg.png → player-profile-data-bg.png） */
.data {
  position: relative;
  color: #fff;
  background-image: url("../images/player/player-profile-data-bg.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
  padding-bottom: var(--gap-section-lg);
} /* ネイビー80%オーバーレイ */
.data::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(34, 52, 122, 0.8); /* navy 80% */
  z-index: 0;
  backdrop-filter: blur(12px);
} /* DATA セクション全体をガラス風にするレイアウトコンテナ */
.data .l-page {
  position: relative;
  z-index: 1; /* .l-page 既定の gap は lg のため、見出し〜グリッド間は従来どおり md */
  gap: var(--gap-section-md);
} /* 見出しは .p-section-title の margin-bottom で間隔を取る（.l-page の縦 gap と二重にしない） */
.profile .l-page,
.gallery .l-page {
  gap: 0;
} /* セクションタイトル（Figma Frame 597: row, flex-end, gap 20px） */
.data .p-section-title {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-end;
  gap: 20px;
  margin-bottom: 0;
}
.data .p-section-title__en,
.data .p-section-title__jp {
  color: #fff;
} /* 3列×3行グリッド（Figma: row gap 40px） */
.data__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
} /* 各カード（Figma Frame 317: fill rgba(0,0,0,0.25)、内側に border-bottom 1px #fff） */
.stat {
  display: grid;
  justify-content: space-between;
  align-items: flex-start;
  padding: var(--gap-section-sm) 0;
  border-bottom: 1px solid #fff;
  grid-template-columns: 1.9fr 2.1fr;
} /* ラベル（Figma: Noto Sans, 700, 20px, line-height 1.362） */
.stat__label {
  font-family: var(--font-body-jp-family);
  font-size: var(--font-body-jp-size);
  font-weight: 500;
  line-height: 1.362;
  color: var(--white);
} /* 数値＋単位のラップ（Figma Frame 326: row, flex-end, gap 8px, padding-left 8px） */
.stat__value-wrap {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  gap: 8px;
  padding-left: 8px;
  justify-content: space-evenly;
} /* 数値（Figma指定: 80px, line-height 1） */
.stat__value {
  font-family: var(--font-heading-en-family);
  font-size: 64px;
  font-weight: 400;
  line-height: 1;
  color: var(--white);
  text-align: center;
}
.stat__unit {
  font-family: var(--font-heading-jp-family);
  color: var(--white);
  vertical-align: bottom;
} /* 注釈（Figma: Noto Sans JP, 500, 10px, line-height 1.2） */
.data__note {
  font-family: var(--font-heading-jp-family);
  font-size: 10px;
  color: var(--white);
  margin: 0;
}
/* =======================
PROFILE
======================= */
.profile__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
}
.profile-table {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
}
.profile-table__th {
  background: var(--gray-bg);
  padding: 8px 16px;
  display: flex;
  align-items: center;
  min-height: 70px;
  line-height: 1.7;
  font-size: 0.875em;
}
.profile-table__td {
  background: var(--white);
  padding: 8px 16px;
  display: flex;
  align-items: center;
  min-height: 70px;
  line-height: 1.7;
}
/* =======================
GALLERY
======================= */
.gallery__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  justify-content: center;
  gap: 10px;
}
.gallery__item {
  margin: 0;
  width: 100%;
  min-width: 0;
  aspect-ratio: 340 / 260;
  overflow: hidden;
  background: #ccc;
}
.gallery__item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
} /* =======================
RESPONSIVE
======================= */ /* TB: 768px〜1023px */
@media (min-width: 768px) and (max-width: 1023px) {
  .fv > .l-page {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .fv__copy {
    max-width: none;
  }
  .fv__photo {
    max-width: 100%;
  }
  .data__grid {
    grid-template-columns: 1fr 1fr;
  }
  .profile__grid {
    gap: 20px;
  }
} /* SP: 767px以下 */
@media (max-width: 767px) {
  .fv {
    min-height: auto;
  }
  .fv > .l-page {
    display: flex;
    flex-direction: column;
    height: auto;
    min-height: 0;
    padding: 0;
    gap: 0;
  }
  .fv__mask {
    /* SP用の白いパスSVG（上部白＋大きな逆三角形） */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='390' height='411' viewBox='0 0 390 411' fill='none'%3E%3Cpath d='M390 200.476L390 196.5L390 0L0 0L0 196.5L0 410.501L390 200.476Z' fill='white'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: left top;
  }
  .fv__copy {
    margin-top: 0;
    padding: 40px 20px 0;
    position: static;
    width: 100%;
    max-width: none;
    gap: 16px;
  }
  .fv__name-ja {
    font-size: clamp(40px, 8vw, 48px); /* SP最小40px, PC基準48pxまで拡大 */
  }
  .fv__name-en {
    font-size: clamp(
      var(--font-heading-jp-size),
      4vw,
      24px
    ); /* SP最小16px, PC基準24pxまで拡大 */
  }
  .fv__meta {
    align-items: center;
    margin-bottom: -20px;
  }
  .fv__pos {
    font-size: clamp(36px, 7vw, 96px); /* SP最小36px, PC基準96pxまで拡大 */
    font-weight: 600;
  }
  .fv__num {
    font-size: clamp(96px, 10vw, 120px); /* SP最小96px, PC基準120pxまで拡大 */
  }
  .fv__photo {
    width: 100%;
    max-width: none;
    margin: 0;
    align-self: center;
  }
  .fv__photo--empty {
    width: 100%;
    aspect-ratio: 390 / 411;
  }
  .data .l-page {
    gap: var(--gap-section-md);
  }
  .profile__grid {
    grid-template-columns: 1fr;
  } /* PROFILE 行の余白（SP: padding 8px, min-height解除） */
  .profile-table__th,
  .profile-table__td {
    padding: 8px;
    min-height: auto;
    font-size: 0.875em;
  }
  .stat__value {
    font-size: 56px;
  }
  .stat__label {
    font-size: medium;
  }
  .gallery__grid {
    grid-template-columns: 1fr 1fr;
  }
  .data__grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}