@charset "UTF-8";
/* ============================================================
   INFOGRAPHIC（動的版）
   テーマ style.css の末尾に追記、または独立ファイルとして
   functions.php から wp_enqueue_style で読み込む。
   ------------------------------------------------------------
   配色・寸法は差し替え前の PNG（640×640）から実測した値。
   寸法の cqi はカード幅に対する % と同じ（1cqi = 640px 画像の 6.4px）。
   元画像と同じ配置になるよう、カード内の要素は絶対配置で置く。
============================================================ */

:root {
  --ifg-navy: #36357f;
  --ifg-gray: #d9d9d9;
  --ifg-grid: #f2f2f2;
  --ifg-rule: #919fb9;
  --ifg-blue: #42a5f5;
  --ifg-pink: #ec407a;
  --ifg-axis: max(1px, 0.31cqi);
  --ifg-duration: 1400ms;
}

/* ---------- カード土台 ----------
   cqi（コンテナ基準の相対サイズ）は「自分自身」のコンテナでは解決されないため、
   グリッドのマス目側をコンテナにする。これでカード内の文字・余白が
   PC／SP のどちらでもマス目の幅に正比例して縮む。 */
.home-content-inner-inforgraphic-content-item {
  container-type: inline-size;
}

.ifg-card {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  margin: 0;
  padding: 0;
  overflow: hidden;
  color: var(--ifg-navy);
  background-color: #ffffff;
  border-radius: 8px;
  font-family: "Rubik", "Noto Sans JP", sans-serif;
}

/* テーマ側の p の余白を打ち消す。:where で詳細度を 0 にし、個別の margin 指定を優先させる */
:where(.ifg-card) p {
  margin: 0;
}

/* 絶対配置の共通指定。中央寄せの要素は left:0; right:0 で幅いっぱいに取る */
.ifg-abs {
  position: absolute;
  line-height: 1;
}

.ifg-abs--center {
  left: 0;
  right: 0;
  text-align: center;
}

.ifg-card-title {
  top: 12.2cqi;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 5.8cqi;
  font-weight: 700;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.ifg-note {
  right: 4cqi;
  bottom: 3.1cqi;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 4.4cqi;
  font-weight: 700;
  color: #000000;
  white-space: nowrap;
}

/* ---------- 数字 ---------- */
.ifg-num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

.ifg-bignum {
  font-weight: 800;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.ifg-unit {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
}

/* ---------- 01 年間休日数 ---------- */
.ifg-holiday-num {
  top: 39.3cqi;
  font-size: 27.4cqi;
  letter-spacing: -0.035em;
  transform: translateX(-0.5cqi);
}

.ifg-holiday-unit {
  top: 65.6cqi;
  right: 7.7cqi;
  font-size: 7.5cqi;
  letter-spacing: 0.04em;
}

.ifg-deco--palm {
  position: absolute;
  left: 1.56cqi;
  bottom: 1.56cqi;
  width: 29.7cqi;
  height: auto;
  color: var(--ifg-navy);
  pointer-events: none;
}

/* ---------- 02 有休取得率（円グラフ） ---------- */
/* svg の円は viewBox 120 に対して直径 100。円そのものが幅 53.3cqi になるよう外枠を 1.2 倍にする */
.ifg-donut {
  position: absolute;
  top: 21.9cqi;
  left: 18.1cqi;
  width: 64cqi;
}

.ifg-donut svg {
  display: block;
  width: 100%;
  height: auto;
  transform: rotate(-90deg);
}

.ifg-donut-track {
  fill: var(--ifg-gray);
}

.ifg-donut-hole {
  fill: #ffffff;
}

.ifg-donut-value {
  fill: none;
  stroke: var(--ifg-navy);
  stroke-width: 50;
  /* r=25・stroke-width=50 で中心まで塗り、見た目は円グラフになる。
     円周 = 2πr = 157.08。dasharray を JS が書き換える */
  stroke-dasharray: 0 157.08;
  transition: stroke-dasharray var(--ifg-duration) cubic-bezier(0.22, 1, 0.36, 1);
}

.ifg-donut-label {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-left: 2cqi;
  font-size: 16.4cqi;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  -webkit-text-stroke: 1.5cqi #ffffff;
  paint-order: stroke fill;
}

.ifg-donut-label-unit {
  font-size: 0.56em;
  align-self: center;
  margin-top: 0.28em;
}

/* ---------- 03 男女比 ---------- */
.ifg-ratio {
  top: 22.6cqi;
  font-size: 12cqi;
  letter-spacing: 0.02em;
}

.ifg-ratio-sep {
  margin: 0 0.3em;
}

.ifg-people {
  position: absolute;
  top: 40.5cqi;
  left: 15.9cqi;
  width: 67.2cqi;
  display: grid;
  grid-template-columns: repeat(10, 4.53cqi);
  grid-template-rows: repeat(4, auto);
  grid-auto-flow: column;
  justify-content: space-between;
  row-gap: 1.56cqi;
}

/* 人ピクトグラム（男女比・従業員数で共用） */
.ifg-person {
  display: block;
  width: 100%;
  height: auto;
  opacity: 0;
  transform: translateY(15%);
  transition: opacity 320ms ease, transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

.ifg-person._male { fill: var(--ifg-blue); }
.ifg-person._female { fill: var(--ifg-pink); }
.ifg-person._staff { fill: var(--ifg-navy); }

.is-ifg-played .ifg-person {
  opacity: 1;
  transform: none;
}

/* ---------- 04・06 共通のグラフ枠（L 字の軸） ---------- */
.ifg-chart {
  position: absolute;
  top: 28.4cqi;
  left: 8.28cqi;
  width: 83.9cqi;
  height: 56.4cqi;
  border-left: var(--ifg-axis) solid var(--ifg-navy);
  border-bottom: var(--ifg-axis) solid var(--ifg-navy);
  box-sizing: border-box;
}

.ifg-chart-bars {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
}

.ifg-bars-item {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  height: 100%;
}

/* 年号は軸の下に出す */
.ifg-bars-label {
  position: absolute;
  top: 100%;
  left: 50%;
  margin-top: 3.3cqi;
  transform: translateX(-50%);
  font-family: "Noto Sans JP", sans-serif;
  font-size: 4.1cqi;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

/* ---------- 04 従業員数（人アイコンの積み上げ） ---------- */
.ifg-chart--people .ifg-chart-bars {
  padding: 0 0 1.7cqi 4.7cqi;
  gap: 7cqi;
}

.ifg-chart--people .ifg-bars-label {
  /* 積み上げの下余白ぶん、軸からの距離を合わせる */
  margin-top: 5cqi;
}

.ifg-stack-item {
  --ifg-icon: 1.56cqi;
}

/* 最新年だけ一回り大きく（元画像どおり） */
.ifg-stack-item:last-child {
  --ifg-icon: 1.92cqi;
}

.ifg-stack-value {
  margin-bottom: 2.8cqi;
  font-family: "Noto Sans JP", sans-serif;
  font-size: calc(var(--ifg-icon) * 3);
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.ifg-stack-value small {
  font-size: 0.8em;
}

.ifg-stack {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: calc(var(--ifg-icon) * 0.6);
}

.ifg-stack-row {
  display: flex;
  gap: calc(var(--ifg-icon) * 0.45);
}

.ifg-stack .ifg-person {
  width: var(--ifg-icon);
}

/* ---------- 06 売り上げ推移 ---------- */
.ifg-chart--sales .ifg-chart-bars {
  padding-left: 2.35cqi;
  gap: 5.94cqi;
}

.ifg-chart--sales .ifg-bars-item {
  width: 10.94cqi;
}

.ifg-bars-bar {
  width: 100%;
  /* 各棒の伸びしろ。JS が --ifg-ratio（0〜1）を書き込む */
  height: calc(var(--ifg-ratio, 0) * 100%);
  background-color: var(--ifg-navy);
  transition: height var(--ifg-duration) cubic-bezier(0.22, 1, 0.36, 1);
}

.ifg-chart-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.ifg-chart-gridline {
  position: absolute;
  left: 0;
  right: 0;
  /* --y は「億」単位。data-max に対する比率で配置する（JS が --ifg-chart-max に転記） */
  bottom: calc(var(--y) / var(--ifg-chart-max, 280) * 100%);
  border-top: var(--ifg-axis) solid var(--ifg-grid);
}

.ifg-chart-gridline i {
  position: absolute;
  left: 1.3cqi;
  bottom: 0.9cqi;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 3.4cqi;
  font-weight: 700;
  font-style: normal;
  line-height: 1;
  white-space: nowrap;
}

/* ---------- 05 平均勤続年数／社員定着率 ---------- */
.ifg-tenure-title { top: 15.2cqi; }
.ifg-retention-title { top: 58.3cqi; }

.ifg-tenure-num,
.ifg-retention-num {
  font-size: 21.6cqi;
}

.ifg-tenure-num { top: 22.6cqi; }
.ifg-retention-num { top: 66.2cqi; }

.ifg-tenure-num .ifg-unit,
.ifg-retention-num .ifg-unit {
  margin-left: 1.2cqi;
  font-size: 7.8cqi;
}

.ifg-retention-num .ifg-unit {
  font-family: "Rubik", sans-serif;
  font-weight: 800;
  font-size: 8.4cqi;
}

.ifg-split-rule {
  position: absolute;
  top: 49.1cqi;
  left: 30cqi;
  width: 40.2cqi;
  height: 0.94cqi;
  margin: 0;
  background-color: var(--ifg-rule);
  border: none;
}

/* ---------- アニメーションの無効化設定に追従 ---------- */
@media (prefers-reduced-motion: reduce) {
  .ifg-donut-value,
  .ifg-bars-bar,
  .ifg-person {
    transition: none !important;
  }
}

/* ---------- スマートフォン ---------- */
@media screen and (max-width: 767px) {
  .ifg-card {
    border-radius: 6px;
  }
}