/*
 * numbers ページ専用スタイル
 * BEM 規約：既存サイトに準拠
 *   - 各セクションを独立ブロック化（例：.p-numbers-organization）
 *   - ページ直下要素のみ .p-numbers__* で表現（例：.p-numbers__lead-message）
 *   - 既存トーン（白基調・薄い青グレーアクセント・font-weight 400 中心）に厳密準拠
 */

/* ============================================================
 * 1. 全セクション共通スタイル（グループセレクタで DRY 化）
 * ============================================================ */

/* 共通：セクション枠 */
.p-numbers-organization,
.p-numbers-workstyle,
.p-numbers-diversity,
.p-numbers-impact,
.p-numbers-market {
  padding: 80px 0;
}
@media (min-width: 768px) {
  .p-numbers-organization,
  .p-numbers-workstyle,
  .p-numbers-diversity,
  .p-numbers-impact,
  .p-numbers-market {
    padding: 120px 0;
  }
}

/* 共通：セクションヘッダー余白 */
.p-numbers-organization__header,
.p-numbers-workstyle__header,
.p-numbers-diversity__header,
.p-numbers-impact__header,
.p-numbers-market__header {
  margin-bottom: 40px;
}
@media (min-width: 768px) {
  .p-numbers-organization__header,
  .p-numbers-workstyle__header,
  .p-numbers-diversity__header,
  .p-numbers-impact__header,
  .p-numbers-market__header {
    margin-bottom: 60px;
  }
}

/* ============================================================
 * 2. ページ直下要素（p-numbers__*）
 * ============================================================ */

/* リード文（c-page-header__inner 内に配置） */
.p-numbers__lead-message {
  max-width: 720px;
  margin: 0;
  font-feature-settings: "palt";
  font-size: 0.9375rem;
  line-height: 2;
  letter-spacing: 0.05em;
  font-weight: 400;
}
@media (min-width: 768px) {
  .p-numbers__lead-message {
    font-size: 1rem;
  }
}

/* ============================================================
 * 3. 組織と人セクション（p-numbers-organization）
 * ============================================================ */

/* 統計カードグリッド */
.p-numbers-organization__metric-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 768px) {
  .p-numbers-organization__metric-list {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }
}

/* 統計カード本体 */
.p-numbers-organization__metric {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 32px;
  background-color: #fff;
  border-radius: 16px;
}
@media (min-width: 768px) {
  .p-numbers-organization__metric {
    padding: 40px 32px;
  }
}
.p-numbers-organization__metric-label {
  font-feature-settings: "palt";
  font-family: "A+mfCv-AXIS Font ベーシック M ProN", sans-serif;
  font-size: 1.0625rem;
  line-height: 1.75;
  letter-spacing: 0.05em;
  font-weight: 400;
  margin: 0 0 20px;
}
@media (min-width: 768px) {
  .p-numbers-organization__metric-label {
    font-size: 1.1875rem;
    margin-bottom: 24px;
  }
}
/* 主要表示エリア：数字とグラフのセンターラインを揃えるラッパー */
.p-numbers-organization__metric-display {
  display: flex;
  align-items: center;
  min-height: 96px;
}
.p-numbers-organization__metric-value {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 0;
  line-height: 1;
}
.p-numbers-organization__metric-number {
  font-feature-settings: "palt";
  font-size: 3rem;
  line-height: 1;
  letter-spacing: 0.02em;
  font-weight: 400;
}
@media (min-width: 768px) {
  .p-numbers-organization__metric-number {
    font-size: 3.5rem;
  }
}
.p-numbers-organization__metric-unit {
  font-size: 1.0625rem;
  font-weight: 400;
  letter-spacing: 0.05em;
}
.p-numbers-organization__metric-sub,
.p-numbers-impact__metric-sub,
.p-numbers-market__metric-sub {
  margin: 16px 0 0;
  font-size: 0.8125rem;
  line-height: 1.75;
  letter-spacing: 0.02em;
  color: #99a1ac;
  font-weight: 400;
}
.p-numbers-organization__metric-note,
.p-numbers-impact__metric-note,
.p-numbers-market__metric-note {
  display: block;
  margin-top: 4px;
  font-size: 0.75rem;
  color: #99a1ac;
  letter-spacing: 0.05em;
}
.p-numbers-organization__metric-desc {
  margin: 24px 0 0;
  font-size: 0.8125rem;
  line-height: 2;
  letter-spacing: 0.02em;
  font-weight: 400;
}

/* 男女比の円グラフ（ドーナツチャート） */
.p-numbers-organization__chart {
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 0;
  min-height: 96px;
}
.p-numbers-organization__chart-figure {
  position: relative;
  flex-shrink: 0;
  width: 96px;
  height: 96px;
}
.p-numbers-organization__chart-svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
  overflow: visible;
}
.p-numbers-organization__chart-bg {
  fill: none;
  stroke: rgba(0, 51, 102, 0.1);
  stroke-width: 14;
}
.p-numbers-organization__chart-fg {
  fill: none;
  stroke: rgba(0, 51, 102, 0.4);
  stroke-width: 14;
  stroke-dasharray: 251.327;
  /* 男性 65% を強調表示： dashoffset = 251.327 * (1 - 0.65) ≈ 87.96 */
  stroke-dashoffset: 251.327;
  transition: stroke-dashoffset 1.6s cubic-bezier(0.22, 1, 0.36, 1) 0.4s;
}
.p-numbers-organization__chart-figure.is-shown .p-numbers-organization__chart-fg {
  stroke-dashoffset: 87.96;
}
.p-numbers-organization__chart-legend {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.p-numbers-organization__chart-legend-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-feature-settings: "palt";
  font-size: 0.8125rem;
  font-weight: 400;
  letter-spacing: 0.05em;
}
.p-numbers-organization__chart-legend-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  flex-shrink: 0;
}
.p-numbers-organization__chart-legend-dot--male {
  background-color: rgba(0, 51, 102, 0.4);
}
.p-numbers-organization__chart-legend-dot--female {
  background-color: rgba(0, 51, 102, 0.1);
}

/* ============================================================
 * 4. 働き方セクション（p-numbers-workstyle）
 * ============================================================ */

/* 本文側 */
.p-numbers-workstyle__body {
  /* 本文ラッパー（縦並び） */
}
.p-numbers-workstyle__lead {
  font-feature-settings: "palt";
  font-size: 1.5rem;
  line-height: 1.6;
  letter-spacing: 0.1em;
  font-weight: 400;
  margin: 0 0 24px;
}
@media (min-width: 768px) {
  .p-numbers-workstyle__lead {
    font-size: 1.75rem;
  }
}
.p-numbers-workstyle__desc {
  font-feature-settings: "palt";
  font-size: 0.9375rem;
  line-height: 2;
  letter-spacing: 0.05em;
  font-weight: 400;
  margin: 0 0 32px;
}

/* 横並び1行統計（年間休日・有給消化率） */
.p-numbers-workstyle__stats {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.p-numbers-workstyle__stat-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 24px 28px;
  background-color: #fff;
  border-radius: 16px;
}
.p-numbers-workstyle__stat-row-label {
  font-feature-settings: "palt";
  font-size: 0.9375rem;
  line-height: 1.75;
  letter-spacing: 0.05em;
  font-weight: 400;
  margin: 0;
}
.p-numbers-workstyle__stat-row-sub {
  display: block;
  margin-top: 2px;
  font-size: 0.75rem;
  color: #99a1ac;
  letter-spacing: 0.05em;
  font-weight: 400;
}
.p-numbers-workstyle__stat-row-value {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin: 0;
  line-height: 1;
}
.p-numbers-workstyle__stat-row-number {
  font-feature-settings: "palt";
  font-size: 2.25rem;
  line-height: 1;
  font-weight: 400;
  letter-spacing: 0.02em;
}
@media (min-width: 768px) {
  .p-numbers-workstyle__stat-row-number {
    font-size: 2.5rem;
  }
}
.p-numbers-workstyle__stat-row-unit {
  font-size: 0.9375rem;
  font-weight: 400;
  letter-spacing: 0.05em;
}

/* aside（画像枠） */
.p-numbers-workstyle__aside figure {
  margin: 0;
}
.p-numbers-workstyle__aside img {
  width: 100%;
  height: auto;
  border-radius: 16px;
  display: block;
}

/* タブレット以下：本文との余白を確保し、画像サイズを抑える */
@media (max-width: 1024px) {
  .p-numbers-workstyle__aside {
    margin-top: 48px;
  }
  .p-numbers-workstyle__aside img {
    max-width: 560px;
    margin: 0 auto;
  }
}

/* aside の左→右スライドイン＋フェードイン（data-slide-in 付与時） */
.p-numbers-workstyle__aside[data-slide-in] img {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.p-numbers-workstyle__aside[data-slide-in].is-shown img {
  opacity: 1;
  transform: translateX(0);
}

/* モディファイア：aside をセクション最上段から配置 */
@media (min-width: 1025px) {
  .p-numbers-workstyle--with-aside-top .c-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: start;
  }
  .p-numbers-workstyle--with-aside-top .p-numbers-workstyle__header {
    margin-bottom: 40px;
  }
  .p-numbers-workstyle--with-aside-top .p-numbers-workstyle__main {
    position: relative;
    z-index: 1;
  }
  .p-numbers-workstyle--with-aside-top .p-numbers-workstyle__aside {
    position: relative;
    z-index: 0;
    margin-left: -180px;
  }
  .p-numbers-workstyle--with-aside-top .p-numbers-workstyle__aside img {
    width: calc(100% + 40px);
    max-width: 640px;
  }
}

/* ============================================================
 * 5. 経験と多様性セクション（p-numbers-diversity）
 * ============================================================ */

/* 2列レイアウト */
.p-numbers-diversity__split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: start;
}
@media (min-width: 1025px) {
  .p-numbers-diversity__split {
    grid-template-columns: 1fr 1.2fr;
    gap: 64px;
  }
}

/* 大型単独統計（事業会社出身者比率） */
.p-numbers-diversity__highlight {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0 0 32px;
}
.p-numbers-diversity__highlight-label {
  font-feature-settings: "palt";
  font-size: 0.9375rem;
  letter-spacing: 0.05em;
  font-weight: 400;
  margin: 0;
}
.p-numbers-diversity__highlight-value {
  display: flex;
  align-items: baseline;
  gap: 8px;
  line-height: 1;
  margin: 0;
}
.p-numbers-diversity__highlight-number {
  font-feature-settings: "palt";
  font-size: clamp(3.5rem, 7vw, 5.5rem);
  font-weight: 400;
  letter-spacing: 0.02em;
}
.p-numbers-diversity__highlight-unit {
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: 0.05em;
}
.p-numbers-diversity__highlight-desc {
  font-feature-settings: "palt";
  font-size: 0.9375rem;
  line-height: 2;
  letter-spacing: 0.05em;
  font-weight: 400;
  margin: 16px 0 0;
}

/* 引用 */
.p-numbers-diversity__quote {
  margin: 32px 0;
  padding: 28px 32px;
  background-color: rgba(0, 51, 102, 0.05);
  border-radius: 16px;
  font-feature-settings: "palt";
  font-size: 0.9375rem;
  line-height: 2;
  letter-spacing: 0.05em;
  font-weight: 400;
}

/* CTA 配置（既存 c-button-primary を内側で使う） */
.p-numbers-diversity__cta {
  display: flex;
  justify-content: center;
  margin: 48px 0 0;
}
.p-numbers-diversity__cta--left {
  justify-content: flex-start;
}

/* メンバー写真のランダム円形配置 */
.p-numbers-diversity__members {
  position: relative;
  width: 100%;
  max-width: 480px;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
}
.p-numbers-diversity__member {
  position: absolute;
  overflow: hidden;
  border-radius: 50%;
  background-color: #eceef0;
  opacity: 0;
  transform: scale(0.5);
  transition:
    opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.p-numbers-diversity__member.is-shown {
  opacity: 1;
  transform: scale(1);
}
.p-numbers-diversity__member.is-shown:hover {
  transform: scale(1.04);
}
.p-numbers-diversity__member-thumb {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 1 / 1;
}
/* 5人を散らす（バラバラのサイズと位置）
   対角の大2つ（TL/BR）＋逆対角の中2つ（TR/BL）＋中央の小1つ */
.p-numbers-diversity__member--1 { top: 0%;    left: 0%;    width: 38%; }
.p-numbers-diversity__member--2 { top: 4%;    right: 2%;   width: 30%; }
.p-numbers-diversity__member--3 { top: 36%;   left: 40%;   width: 26%; }
.p-numbers-diversity__member--4 { bottom: 0%; right: 0%;   width: 36%; }
.p-numbers-diversity__member--5 { bottom: 4%; left: 4%;    width: 32%; }

/* ============================================================
 * 6. 事業とインパクトセクション（p-numbers-impact）
 * ============================================================ */

.p-numbers-impact__metric-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 768px) {
  .p-numbers-impact__metric-list {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }
}
.p-numbers-impact__metric {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 32px;
  background-color: #fff;
  border-radius: 16px;
}
@media (min-width: 768px) {
  .p-numbers-impact__metric {
    padding: 40px 32px;
  }
}
.p-numbers-impact__metric-label {
  font-feature-settings: "palt";
  font-family: "A+mfCv-AXIS Font ベーシック M ProN", sans-serif;
  font-size: 1.0625rem;
  line-height: 1.75;
  letter-spacing: 0.05em;
  font-weight: 400;
  margin: 0 0 20px;
}
@media (min-width: 768px) {
  .p-numbers-impact__metric-label {
    font-size: 1.1875rem;
    margin-bottom: 24px;
  }
}
.p-numbers-impact__metric-value {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 0;
  line-height: 1;
}
.p-numbers-impact__metric-number {
  font-feature-settings: "palt";
  font-size: 3rem;
  line-height: 1;
  letter-spacing: 0.02em;
  font-weight: 400;
}
@media (min-width: 768px) {
  .p-numbers-impact__metric-number {
    font-size: 3.5rem;
  }
}
.p-numbers-impact__metric-unit {
  font-size: 1.0625rem;
  font-weight: 400;
  letter-spacing: 0.05em;
}
.p-numbers-impact__metric-desc {
  margin: 24px 0 0;
  font-size: 0.8125rem;
  line-height: 2;
  letter-spacing: 0.02em;
  font-weight: 400;
}
.p-numbers-impact__cta {
  display: flex;
  justify-content: center;
  margin: 48px 0 0;
}

/* ============================================================
 * 7. マーケットと展開セクション（p-numbers-market）
 * ============================================================ */

/* 2列レイアウト（白カード同士のgapは metric-list と揃える / 高さは長い方に合わせる） */
.p-numbers-market__split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  align-items: stretch;
}
@media (min-width: 1025px) {
  .p-numbers-market__split {
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }
}
.p-numbers-market__lead {
  font-feature-settings: "palt";
  font-size: 1.5rem;
  line-height: 1.6;
  letter-spacing: 0.1em;
  font-weight: 400;
  margin: 0 0 24px;
}
@media (min-width: 768px) {
  .p-numbers-market__lead {
    font-size: 1.75rem;
  }
}
.p-numbers-market__desc {
  font-feature-settings: "palt";
  font-size: 0.9375rem;
  line-height: 2;
  letter-spacing: 0.05em;
  font-weight: 400;
  margin: 0 0 32px;
}
/* クライアント構成比カード（白背景ブロック、map-wrap と並列）
   ・grid align-items:stretch で chart-wrap を map-wrap と同じ高さに揃える
   ・chart-figure を flex-grow させ、breakdown より上の余白を全て吸収
   ・img は絶対配置 inset:0 + object-fit:contain で chart-figure 内に収める */
.p-numbers-market__chart-wrap {
  padding: 32px;
  background-color: #fff;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
}
.p-numbers-market__chart-figure {
  flex: 1 1 auto;
  min-height: 200px;
  margin: 0;
  position: relative;
  overflow: hidden;
}
.p-numbers-market__chart-img {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* 構成比リスト（白カード内なので背景なし＋罫線セパレータ、各項目に色ドット） */
.p-numbers-market__breakdown {
  display: grid;
  grid-template-columns: max-content max-content;
  column-gap: 1.5em;
  justify-content: center;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}
/* 各 item を display:contents にすることで、すべての marker / percent が
   親 grid の 2 列を共有し、列幅は最長ラベルに自動追従する */
.p-numbers-market__breakdown-item {
  display: contents;
}
.p-numbers-market__breakdown-marker,
.p-numbers-market__breakdown-percent {
  padding: 0;
  align-self: center;
}
.p-numbers-market__breakdown-label {
  font-feature-settings: "palt";
  font-size: 0.9375rem;
  line-height: 1.75;
  letter-spacing: 0.05em;
  font-weight: 400;
}
.p-numbers-market__breakdown-percent {
  font-feature-settings: "palt";
  font-size: 1.125rem;
  font-weight: 400;
  letter-spacing: 0.05em;
}

/* 地図カード（chart-wrap と並列の白背景ブロック） */
.p-numbers-market__map-wrap {
  position: relative;
  padding: 32px;
  background-color: #fff;
  border-radius: 16px;
  text-align: center;
}
.p-numbers-market__map-figure {
  margin: 0 0 16px;
}
.p-numbers-market__map-figure img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
  border-radius: 8px;
}
.p-numbers-market__map-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 32px;
  background-color: rgba(0, 51, 102, 0.05);
  font-feature-settings: "palt";
  font-size: 1.0625rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  border-radius: 96px;
  margin: 0;
}
.p-numbers-market__map-desc {
  margin: 16px auto 0;
  max-width: 360px;
  font-size: 0.8125rem;
  line-height: 2;
  letter-spacing: 0.02em;
  font-weight: 400;
}

.p-numbers-market__cta {
  display: flex;
  justify-content: center;
  margin: 48px 0 0;
}

/* ============================================================
 * 8. 数字の出現エフェクト（scale-down 弾性）
 *   対象：data-number 属性を持つ数字要素（span）
 *   JS が IntersectionObserver で data-fx="scale-down" と is-shown を付与
 *   動き：2.2倍 → 行き過ぎ縮(0.94) → わずかに戻る(1.03) → 等倍着地
 * ============================================================ */

[data-number][data-fx="scale-down"] {
  display: inline-block;
  opacity: 0;
  transform: scale(2.2);
  will-change: opacity, transform;
}
[data-number][data-fx="scale-down"].is-shown {
  animation: p-numbers-scale-down-in 1.1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes p-numbers-scale-down-in {
  0% {
    transform: scale(2.2);
    opacity: 0;
  }
  55% {
    transform: scale(0.94);
    opacity: 1;
  }
  78% {
    transform: scale(1.03);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}