@charset "UTF-8";
/* =====================================================
数字で知る（page-recruit-numbers.php）

読み込み: header-recruit.php（$page_slug = numbers）
Figma: 採用HPデザイン node 95:877（recruit/numbers）
複数ページで使うパーツ（ページタイトル・インタビュー・社長メッセージ・次の導線）は recruit-common.css。

PC は Figma（1440px）どおり 3 列。1100px 未満は 2 列、768px 未満は 1 列（SP はデザインが無いため実装側で組んでいる）。

動き（js/numbers.js がカードに .is-inview を付けたら始まる）
  ・数字のカウントアップ（JS）
  ・横棒グラフ／ドーナツグラフが伸びる
  ・アイコンを線画で描き、描き終わったら赤い部分を動かし続ける
JS が動いていない（.is-js が無い）ときは最初から完成形を見せる。
OS の「アニメーション効果」オフ（prefers-reduced-motion）でも動かす（ご要望により）。
======================================================== */

/* -----------------------------------------------------
ページ全体
-------------------------------------------------------- */
.recruit-numbers {
	position: relative;

	/* カードの背景（Figma: #f8f5ed。--recruit--color--bg より明るい） */
	--recruit-numbers--card-bg: #f8f5ed;
	/* 文字・グラフの色は採用サイト共通の色（recruit-common.css）。補助色は Figma の凡例の色 */
	--recruit-numbers--text: var(--recruit--color--text);
	--recruit-numbers--muted: rgba(51, 51, 51, .7);
	--recruit-numbers--red: var(--recruit--color--red);
	--recruit-numbers--teal: var(--recruit--color--teal);
	--recruit-numbers--gold: #b1985f;
	--recruit-numbers--dark: var(--recruit--color--text);
	--recruit-numbers--gray: #bdbdbd;
	--recruit-numbers--track: #eee8dc;
	--recruit-numbers--line: #e3ddcf;
	/* 動きの速さ（デザイン資料の「標準」） */
	--recruit-numbers--duration: 1.7s;
	--recruit-numbers--ease: cubic-bezier(.6, 0, .2, 1);
}

/* ページ上部の淡いグラデーション（Figma: img/bg02。働く環境を知るページと同じ画像）
   ヘッダーの裏（半透明）まで敷くため、ヘッダーの高さ＋150px 上にずらす（Figma どおり） */
.recruit-numbers::before {
	content: "";
	position: absolute;
	top: calc(-1 * var(--recruit--header--height) - 150px);
	left: 0;
	width: 100%;
	aspect-ratio: 1440 / 709;
	background: url("../img/recruit/bg_message-top.jpg") no-repeat left top / 100% auto;
	pointer-events: none;
}

.recruit-numbers > * {
	position: relative;
}

/* 中身の幅は他の採用ページと同じ（1520px ＋ 左右 gutter） */
.recruit-numbers__body {
	display: flex;
	flex-direction: column;
	gap: 80px;
	max-width: var(--recruit--inner--width);
	margin-inline: auto;
	padding: 40px var(--recruit--gutter) 80px;
	color: var(--recruit-numbers--text);
}

.recruit-numbers__lead {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 4px 32px;
}

.recruit-numbers__lead p {
	margin: 0;
	color: var(--recruit-numbers--muted);
}

/* -----------------------------------------------------
セクション（01 人 / 02 休み・働き方 / 03 カルチャー）
-------------------------------------------------------- */
.recruit-numbers-sec {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.recruit-numbers-sec__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 16px;
}

.recruit-numbers-sec__num,
.recruit-numbers-sec__en {
	color: var(--recruit-numbers--muted);
	font-family: "Unbounded", sans-serif;
	font-weight: 400;
	line-height: var(--mh--line-height--xs);
	letter-spacing: var(--mh--letter-spacing--sm);
}

.recruit-numbers-sec__num {
	color: var(--recruit-numbers--red);
	font-size: var(--mh--font-size--md);
}

.recruit-numbers-sec__ttl {
	margin: 0;
}

.recruit-numbers-sec__en {
	font-size: var(--mh--font-size--x3s);
}

.recruit-numbers-sec__list {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (width >= 768px) {
	.recruit-numbers-sec__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (width >= 1100px) {
	.recruit-numbers-sec__list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* -----------------------------------------------------
カード
-------------------------------------------------------- */
.recruit-numbers-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 24px;
	min-width: 0;
	padding: 32px;
	border-radius: var(--recruit--radius--xl);
	background-color: var(--recruit-numbers--card-bg);
}

/* 職場の雰囲気は全幅 */
.recruit-numbers-card.is-wide {
	grid-column: 1 / -1;
}

.recruit-numbers-card__head {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	width: 100%;
}

.recruit-numbers-card__head > .recruit-numbers-card__ttl {
	flex: 1 1 auto;
	min-width: 0;
}

.recruit-numbers-card__ttl {
	margin: 0;
	font-size: var(--mh--font-size--md);
	font-weight: var(--mh--font-weight--bold);
	line-height: var(--mh--line-height--sm);
	letter-spacing: var(--mh--letter-spacing--sm);
}

.recruit-numbers-card__ico {
	display: grid;
	flex: 0 0 auto;
	place-items: center;
	width: 72px;
	height: 72px;
	border-radius: 16px;
	background-color: var(--recruit--color--white);
	color: var(--recruit-numbers--text);
}

.recruit-numbers-card__note {
	margin: 0;
	color: var(--recruit-numbers--muted);
	font-size: var(--mh--font-size--x3s);
	font-weight: var(--mh--font-weight--medium);
	line-height: var(--mh--line-height--lg);
	letter-spacing: var(--mh--letter-spacing--md);
}

@media (width < 768px) {
	.recruit-numbers-card {
		padding: 24px;
	}

	.recruit-numbers-card__ico {
		width: 60px;
		height: 60px;
		border-radius: 12px;
	}
}

/* -----------------------------------------------------
大きな数字（数字は Unbounded、単位は赤の Noto Sans JP）
-------------------------------------------------------- */
.recruit-numbers-val {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px;
	margin: 0;
	white-space: nowrap;
}

.recruit-numbers-val__num,
.recruit-numbers-ages__val,
.recruit-numbers-holiday__val,
.recruit-numbers-mood__val,
.recruit-numbers-donut__num,
.recruit-numbers-legend__val.is-en {
	font-family: "Unbounded", sans-serif;
	font-weight: 400;
	font-variant-numeric: tabular-nums;
	line-height: var(--mh--line-height--xs);
	letter-spacing: var(--mh--letter-spacing--sm);
}

.recruit-numbers-val__num {
	font-size: var(--mh--font-size--x11l);
}

.recruit-numbers-val__unit {
	color: var(--recruit-numbers--red);
	font-size: var(--mh--font-size--x2l);
	font-weight: var(--mh--font-weight--bold);
	line-height: var(--mh--line-height--sm);
	letter-spacing: var(--mh--letter-spacing--sm);
}

/* % は大きめ（Figma: 有休消化率・フルリモート率） */
.recruit-numbers-val__unit.is-lg {
	font-size: var(--mh--font-size--x5l);
}

/* 女性の % は青緑 */
.recruit-numbers-val__unit.is-teal {
	color: var(--recruit-numbers--teal);
}

/* 男女比（2 つ並ぶので一回り小さい） */
.recruit-numbers-val.is-md .recruit-numbers-val__num {
	font-size: var(--mh--font-size--x7l);
}

/* 平均勤続年数（約 4 年 10 ヶ月） */
.recruit-numbers-val.is-tenure .recruit-numbers-val__num {
	font-size: var(--mh--font-size--x10l);
}

.recruit-numbers-val__pre {
	font-size: var(--mh--font-size--xl);
	font-weight: var(--mh--font-weight--medium);
	line-height: var(--mh--line-height--lg);
	letter-spacing: var(--mh--letter-spacing--md);
}

/* -----------------------------------------------------
横棒グラフ
-------------------------------------------------------- */
.recruit-numbers-bar {
	display: block;
	flex: 1 1 auto;
	width: 100%;
	height: 10px;
	border-radius: 99px;
	background-color: var(--recruit-numbers--track);
	overflow: hidden;
}

/* 男女比は 1 本の棒（赤＝男性・青緑＝女性） */
.recruit-numbers-bar.is-gender {
	height: 14px;
	background-color: var(--recruit-numbers--teal);
}

.recruit-numbers-bar.is-sm {
	height: 8px;
}

.recruit-numbers-bar__fill {
	display: block;
	width: var(--pct);
	height: 100%;
	border-radius: inherit;
	background-color: var(--recruit-numbers--red);
	transition: width var(--recruit-numbers--duration) var(--recruit-numbers--ease) var(--delay, 0ms);
}

.recruit-numbers-bar__fill.is-teal {
	background-color: var(--recruit-numbers--teal);
}

.is-js .recruit-numbers-card:not(.is-inview) .recruit-numbers-bar__fill {
	width: 0;
}

/* -----------------------------------------------------
男女比
-------------------------------------------------------- */
.recruit-numbers-gender {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
	width: 100%;
}

.recruit-numbers-gender__item {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
}

.recruit-numbers-gender__item.is-right {
	align-items: flex-end;
}

.recruit-numbers-gender__label {
	color: var(--recruit-numbers--muted);
	margin: 0;
	font-size: var(--mh--font-size--x2s);
	font-weight: var(--mh--font-weight--medium);
	line-height: var(--mh--line-height--lg);
	letter-spacing: var(--mh--letter-spacing--md);
}

/* -----------------------------------------------------
年代別割合
-------------------------------------------------------- */
.recruit-numbers-ages {
	display: flex;
	flex-direction: column;
	gap: 14px;
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

.recruit-numbers-ages__row {
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr) 64px;
	align-items: center;
	gap: 12px;
}

.recruit-numbers-ages__label {
	font-size: var(--mh--font-size--xs);
	font-weight: var(--mh--font-weight--medium);
	line-height: var(--mh--line-height--lg);
	letter-spacing: var(--mh--letter-spacing--md);
}

.recruit-numbers-ages__num {
	color: var(--recruit-numbers--muted);
	display: flex;
	align-items: baseline;
	justify-content: flex-end;
	gap: 2px;
	font-size: var(--mh--font-size--x2s);
	font-weight: var(--mh--font-weight--medium);
}

.recruit-numbers-ages__val {
	color: var(--recruit-numbers--text);
	font-size: var(--mh--font-size--lg);
}

/* -----------------------------------------------------
ドーナツグラフ＋凡例（職種別比率・文系理系）
-------------------------------------------------------- */
.recruit-numbers-chart {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 24px;
	width: 100%;
}

.recruit-numbers-donut {
	position: relative;
	flex: 0 0 auto;
	width: 156px;
	height: 156px;
}

/* 12 時から時計回りにする */
.recruit-numbers-donut__svg {
	display: block;
	width: 100%;
	height: 100%;
	transform: rotate(-90deg);
}

.recruit-numbers-donut__track,
.recruit-numbers-donut__seg {
	fill: none;
	stroke-width: 20;
}

.recruit-numbers-donut__track {
	stroke: var(--recruit-numbers--track);
}

.recruit-numbers-donut__seg {
	stroke-dasharray: var(--len) 100;
	stroke-dashoffset: var(--offset);
	transition: stroke-dasharray calc(var(--recruit-numbers--duration) * .7) var(--recruit-numbers--ease) var(--delay, 0ms);
}

.is-js .recruit-numbers-card:not(.is-inview) .recruit-numbers-donut__seg {
	stroke-dasharray: 0 100;
}

.recruit-numbers-donut__seg.is-red  { stroke: var(--recruit-numbers--red); }
.recruit-numbers-donut__seg.is-teal { stroke: var(--recruit-numbers--teal); }
.recruit-numbers-donut__seg.is-gold { stroke: var(--recruit-numbers--gold); }
.recruit-numbers-donut__seg.is-dark { stroke: var(--recruit-numbers--dark); }
.recruit-numbers-donut__seg.is-gray { stroke: var(--recruit-numbers--gray); }

.recruit-numbers-donut__center {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	margin: 0;
	white-space: nowrap;
}

.recruit-numbers-donut__label {
	color: var(--recruit-numbers--muted);
	font-size: var(--mh--font-size--x3s);
	font-weight: var(--mh--font-weight--medium);
	line-height: var(--mh--line-height--lg);
	letter-spacing: var(--mh--letter-spacing--md);
}

.recruit-numbers-donut__val {
	display: flex;
	align-items: baseline;
	gap: 2px;
}

.recruit-numbers-donut__num {
	font-size: var(--mh--font-size--x3l);
}

.recruit-numbers-donut__unit {
	color: var(--recruit-numbers--red);
	font-size: var(--mh--font-size--md);
	font-weight: var(--mh--font-weight--bold);
	line-height: var(--mh--line-height--sm);
}

.recruit-numbers-legend {
	display: flex;
	flex: 1 1 140px;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.recruit-numbers-legend__row {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: var(--mh--font-size--x2s);
	font-weight: var(--mh--font-weight--medium);
	line-height: var(--mh--line-height--lg);
	letter-spacing: var(--mh--letter-spacing--md);
}

.recruit-numbers-legend__mark {
	flex: 0 0 auto;
	width: 10px;
	height: 10px;
	border-radius: var(--recruit--radius--sm);
}

.recruit-numbers-legend__mark.is-red  { background-color: var(--recruit-numbers--red); }
.recruit-numbers-legend__mark.is-teal { background-color: var(--recruit-numbers--teal); }
.recruit-numbers-legend__mark.is-gold { background-color: var(--recruit-numbers--gold); }
.recruit-numbers-legend__mark.is-dark { background-color: var(--recruit-numbers--dark); }
.recruit-numbers-legend__mark.is-gray { background-color: var(--recruit-numbers--gray); }

.recruit-numbers-legend__label {
	flex: 1 1 auto;
	min-width: 0;
}

.recruit-numbers-legend__val {
	flex: 0 0 auto;
	white-space: nowrap;
}

.recruit-numbers-legend__val.is-en {
	font-size: var(--mh--font-size--x3s);
}

/* -----------------------------------------------------
内訳リスト（年間休日・フルリモート率）
-------------------------------------------------------- */
.recruit-numbers-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: 100%;
	margin: 0;
	padding: 16px 0 0;
	border-top: 1px solid var(--recruit-numbers--line);
	list-style: none;
}

.recruit-numbers-list.is-styles {
	gap: 12px;
}

.recruit-numbers-holiday {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	font-weight: var(--mh--font-weight--medium);
	line-height: var(--mh--line-height--lg);
}

.recruit-numbers-holiday__label {
	font-size: var(--mh--font-size--x2s);
	letter-spacing: var(--mh--letter-spacing--md);
}

.recruit-numbers-holiday__note {
	color: var(--recruit-numbers--muted);
	margin-left: 8px;
	font-size: var(--mh--font-size--x3s);
}

.recruit-numbers-holiday__num {
	display: flex;
	flex: 0 0 auto;
	align-items: baseline;
	gap: 2px;
	font-size: var(--mh--font-size--x3s);
}

.recruit-numbers-holiday__val {
	font-size: var(--mh--font-size--sm);
}

.recruit-numbers-style {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.recruit-numbers-style__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	font-size: var(--mh--font-size--x2s);
	font-weight: var(--mh--font-weight--medium);
	line-height: var(--mh--line-height--lg);
	letter-spacing: var(--mh--letter-spacing--md);
}

.recruit-numbers-style__val {
	color: var(--recruit-numbers--muted);
	flex: 0 0 auto;
	white-space: nowrap;
}

/* -----------------------------------------------------
職場の雰囲気（順位つきの横棒）
-------------------------------------------------------- */
.recruit-numbers-moods {
	display: flex;
	flex-direction: column;
	gap: 18px;
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

.recruit-numbers-mood {
	display: grid;
	grid-template-columns: 28px minmax(0, 1fr) 70px;
	align-items: center;
	gap: 16px;
}

.recruit-numbers-mood__rank {
	color: var(--recruit-numbers--red);
	font-family: "Unbounded", sans-serif;
	font-size: var(--mh--font-size--md);
	line-height: var(--mh--line-height--xs);
	letter-spacing: var(--mh--letter-spacing--sm);
}

.recruit-numbers-mood__body {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
}

.recruit-numbers-mood__label {
	font-size: var(--mh--font-size--sm);
	font-weight: var(--mh--font-weight--medium);
	line-height: var(--mh--line-height--lg);
	letter-spacing: var(--mh--letter-spacing--md);
}

.recruit-numbers-mood__num {
	color: var(--recruit-numbers--muted);
	display: flex;
	align-items: baseline;
	justify-content: flex-end;
	gap: 2px;
	font-size: var(--mh--font-size--x3s);
	font-weight: var(--mh--font-weight--medium);
}

.recruit-numbers-mood__val {
	color: var(--recruit-numbers--text);
	font-size: var(--mh--font-size--x2l);
}

@media (width < 768px) {
	.recruit-numbers-mood {
		grid-template-columns: 24px minmax(0, 1fr) 44px;
		gap: 10px;
	}
}

/* -----------------------------------------------------
アイコン（inc/recruit/c-recruit-numbers-icon.php）
線は pathLength="1" にしてあるので、dashoffset 1 → 0 で描ける。
-------------------------------------------------------- */
.recruit-numbers-ico {
	display: block;
	width: 44px;
	height: 44px;
	overflow: visible;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.recruit-numbers-ico__loop.is-red {
	stroke: var(--recruit-numbers--red);
}

.recruit-numbers-ico__line {
	stroke-dasharray: 1;
	stroke-dashoffset: 0;
	transition:
		stroke-dashoffset .9s var(--recruit-numbers--ease) var(--delay, 0ms),
		opacity .1s linear var(--delay, 0ms);
}

.recruit-numbers-ico__fill {
	fill: var(--recruit-numbers--red);
	stroke: none;
	transition: opacity .4s ease var(--delay, 0ms);
}

.is-js .recruit-numbers-card:not(.is-inview) .recruit-numbers-ico__line {
	stroke-dashoffset: 1;
	opacity: 0;
}

.is-js .recruit-numbers-card:not(.is-inview) .recruit-numbers-ico__fill {
	opacity: 0;
}

/* 描き終わったら動かし続ける（画面に入ったカードだけ） */
.recruit-numbers-ico__loop {
	transform-box: view-box;
	transform-origin: var(--origin);
}

.recruit-numbers-card.is-inview .recruit-numbers-ico__loop {
	animation: var(--anim) var(--time) var(--ease) var(--loop-delay) infinite;
}

@media (width < 768px) {
	.recruit-numbers-ico {
		width: 38px;
		height: 38px;
	}
}

@keyframes recruit-numbers-bob {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-2.5px); }
}

@keyframes recruit-numbers-tilt {
	0%, 100% { transform: rotate(-7deg); }
	50%      { transform: rotate(7deg); }
}

@keyframes recruit-numbers-flicker {
	0%, 100% { transform: scale(1, 1); }
	30%      { transform: scale(.82, 1.14); }
	60%      { transform: scale(1.1, .9); }
}

@keyframes recruit-numbers-spin {
	to { transform: rotate(360deg); }
}

@keyframes recruit-numbers-blink {
	0%, 49%   { opacity: 1; }
	50%, 100% { opacity: .1; }
}

@keyframes recruit-numbers-pop {
	0%, 65%, 100% { transform: scale(1); }
	78%           { transform: scale(1.22); }
}

@keyframes recruit-numbers-fade {
	0%, 100% { opacity: .15; }
	50%      { opacity: 1; }
}

@keyframes recruit-numbers-rise {
	0%   { transform: translateY(0); opacity: 0; }
	20%  { opacity: 1; }
	100% { transform: translateY(-15px); opacity: 0; }
}

@keyframes recruit-numbers-dot {
	0%, 60%, 100% { transform: translateY(0); }
	30%           { transform: translateY(-3.5px); }
}

@keyframes recruit-numbers-grow {
	0%, 100% { transform: scaleY(1); }
	50%      { transform: scaleY(.72); }
}