/*
 * 数字で見るはた楽（data）下層ページ専用スタイル。
 * デザイン基準幅: 1920px（Figma「採用TOP_数字で見るはた楽」）
 */

.data-page {
  --dt-red: #811c21;
  --dt-red-deep: #751b1e;
  --dt-ink: #333;
  --dt-font-yu: "Yu Gothic", YuGothic, "游ゴシック体", "游ゴシック", "Noto Sans JP", sans-serif;
  --dt-font-noto: "Noto Sans JP", sans-serif;
  font-family: var(--dt-font-noto);
  color: var(--dt-ink);
  overflow-x: clip;
}

.data-page img {
  max-width: 100%;
}

/* ---------------------------------- 共通セクション */

.dt-section {
  width: min(1200px, 92%);
  margin: 0 auto;
  padding: clamp(64px, 6.25vw, 120px) 0;
}

.dt-section__heading {
  margin: 0 0 clamp(28px, 2.5vw, 48px);
  font-family: var(--dt-font-yu);
  font-weight: 700;
  font-size: clamp(30px, 2.6vw, 50px);
  line-height: 1.6;
  color: #000;
  text-align: center;
}

.dt-photo img {
  display: block;
  width: 100%;
  height: clamp(220px, 24vw, 463px);
  object-fit: cover;
  object-position: center center;
}

/* ---------------------------------- カード共通 */

.dt-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--dt-red);
  border-radius: 10px;
  padding: clamp(24px, 2.4vw, 46px);
  overflow: hidden;
}

.dt-card__label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-family: var(--dt-font-yu);
  font-weight: 700;
  font-size: clamp(17px, 1.25vw, 24px);
  line-height: 1.4;
  color: #000;
	    z-index: 2;
    position: relative;
}

.dt-card__label img {
  flex: 0 0 50px;
  width: 50px;
  height: 50px;
}

.dt-card__label .dt-ico {
  flex: 0 0 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #fbe9e0;
}

.dt-card__label .dt-ico img {
  flex: none;
  width: 60%;
  height: auto;
}

.dt-card__label small {
  display: block;
  font-size: clamp(11px, 0.75vw, 14px);
  font-weight: 700;
}

.dt-card__note {
  position: relative;
  margin: clamp(8px, 0.8vw, 16px) 0 0;
  font-size: clamp(14px, 0.95vw, 18px);
  line-height: 1.8;
  color: #000;
  max-width: 32em;
	    z-index: 2;
}

.dt-num {
  font-family: var(--dt-font-yu);
  font-weight: 700;
  color: var(--dt-red);
  line-height: 1.1;
}

/* ---------------------------------- はた楽の実績 */

.dt-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(20px, 1.7vw, 32px);
}

.dt-grid .dt-card--wide {
  grid-column: 1 / -1;
}

.dt-card--10th {
  display: flex;
  align-items: center;
  gap: clamp(28px, 3.1vw, 60px);
  padding: clamp(28px, 3.3vw, 64px);
}

.dt-card--10th .dt-card__art {
  flex: 0 0 clamp(160px, 14.6vw, 280px);
  width: clamp(160px, 14.6vw, 280px);
  min-width: 0;
  height: auto;
}

.dt-card--10th .dt-num-line {
  margin: clamp(4px, 0.5vw, 10px) 0 0;
}

.dt-card--10th .dt-lead {
  margin: 0;
  font-family: var(--dt-font-yu);
  font-weight: 700;
  font-size: clamp(20px, 1.7vw, 32px);
  color: #000;
}

.dt-num-line {
  margin: 0;
  font-family: var(--dt-font-yu);
  font-weight: 700;
  line-height: 1.15;
  color: var(--dt-red);
  letter-spacing: 0.02em;
	    z-index: 2;
    position: relative;
}

.dt-num-line .n-xxl {
  font-size: clamp(64px, 8.3vw, 160px);
}

.dt-num-line .n-xl {
  font-size: clamp(60px, 5.3vw, 101px);
}

.dt-num-line .n-lg {
  font-size: clamp(34px, 4.2vw, 80px);
}

.dt-num-line .n-md {
  font-size: clamp(32px, 2.6vw, 50px);
}

.dt-num-line .n-sub {
  font-size: clamp(20px, 2.8vw, 54px);
  color: #000;
}
.dt-num-line.amount .n-xl {
    font-size: clamp(44px, 7.3vw, 150px);
}
.dt-num-line.amount .n-lg {
   font-size: clamp(34px, 5.2vw, 90px);
}
/* 装飾イラスト（右下配置） */

.dt-card__bg {
  position: absolute;
  right: clamp(8px, 1.5vw, 28px);
  bottom: clamp(8px, 1.5vw, 28px);
  width: 42%;
  pointer-events: none;
}

.dt-card__bg--faded {
  opacity: 0.55;
}

.dt-section__footnote {
  margin: clamp(20px, 1.7vw, 32px) 0 0;
  font-size: clamp(14px, 0.95vw, 18px);
  text-align: center;
  color: #000;
}

/* ---------------------------------- スタッフ（人数・円グラフ） */

.dt-grid--3 {
  grid-template-columns: repeat(3, 1fr);
}

.dt-bignum {
  margin: clamp(8px, 1vw, 20px) 0 0;
  font-family: var(--dt-font-yu);
  font-weight: 700;
  line-height: 1;
  color: var(--dt-red);
	    position: relative;
    z-index: 2;
}

.dt-bignum .n-huge {
  font-size: clamp(80px, 10.4vw, 200px);
}

.dt-bignum .n-unit {
  font-size: clamp(36px, 4.2vw, 80px);
}

.dt-card--staff {
  min-height: clamp(220px, 15.6vw, 300px);
}

.dt-card--staff .dt-card__bg {
    width: 40%;
    bottom: clamp(16px, 2vw, 40px);
    opacity: 0.5;
}

/* 円グラフカード */

.dt-pie {
  display: flex;
  align-items: center;
  gap: clamp(16px, 1.6vw, 30px);
  margin-top: clamp(12px, 1.2vw, 24px);
}

.dt-pie--stack {
  flex-direction: column;
  align-items: center;
}

.dt-donut {
  position: relative;
  flex: 0 0 clamp(180px, 13.2vw, 254px);
  width: clamp(180px, 13.2vw, 254px);
  aspect-ratio: 1;
}

.dt-donut svg {
  display: block;
  width: 100%;
  height: 100%;
}

.dt-donut__center {
  position: absolute;
    left: 40%;
    top: 33%;
    width: 20%;
  height: 34%;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.dt-donut__center img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

.dt-donut text {
  font-family: var(--dt-font-yu);
  font-weight: 700;
  fill: #fff;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.dt-donut text.is-visible {
  opacity: 1;
}

.dt-legend {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.dt-legend li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--dt-font-yu);
  font-weight: 700;
  font-size: clamp(15px, 1.05vw, 20px);
  color: var(--dt-ink);
}

.dt-legend li::before {
  content: "";
  flex: 0 0 25px;
  width: 25px;
  height: 25px;
  background: var(--swatch, var(--dt-red));
}
@media (max-width: 768px) {
	.dt-card--staff .dt-card__bg {
    position: absolute;
    top: 70px;
}
}
/* ---------------------------------- 働き方 */

.dt-work-card {
  text-align: center;
}

.dt-work-card .dt-card__label {
  text-align: left;
}

.dt-work-card__art {
  display: block;
  width: min(320px, 90%);
  margin: clamp(8px, 0.8vw, 16px) auto 0;
}

.dt-work-card .dt-num-line {
  margin-top: clamp(4px, 0.5vw, 10px);
}

.dt-work-card .n-num {
  font-size: clamp(44px, 3.65vw, 70px);
}

.dt-work-card .n-unit2 {
  font-size: clamp(26px, 2.1vw, 40px);
}

.dt-work-card__sub {
  margin: 4px 0 0;
  font-family: var(--dt-font-yu);
  font-weight: 700;
  font-size: clamp(13px, 0.8vw, 16px);
  color: var(--dt-red);
}

.dt-work-card__sub--lg {
  font-size: clamp(16px, 1.25vw, 24px);
}

.dt-work-card .dt-card__note {
  text-align: left;
  max-width: none;
}

/* 勤務形態（ピクトグラム） */

.dt-keitai {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: clamp(16px, 2vw, 40px);
  margin-top: clamp(16px, 1.6vw, 30px);
}

.dt-keitai__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(10px, 1vw, 20px);
  flex: 1;
}

.dt-keitai__pct {
  margin: 0;
  font-family: var(--dt-font-yu);
  font-weight: 700;
  color: var(--dt-red);
  line-height: 1;
  text-align: center;
}

.dt-keitai__pct .n-num {
  font-size: clamp(40px, 3.3vw, 64px);
}

.dt-keitai__pct .n-unit2 {
  font-size: clamp(24px, 2.1vw, 40px);
}

.dt-keitai__name {
  margin: 6px 0 0;
  font-family: var(--dt-font-yu);
  font-weight: 700;
  font-size: clamp(17px, 1.4vw, 27px);
  color: #000;
  text-align: center;
}

.dt-keitai__name small {
  display: block;
  font-size: clamp(12px, 0.85vw, 16px);
}

.dt-keitai__picto {
  width: min(308px, 100%);
}

/* 勤務場所 */

.dt-place {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(24px, 4.2vw, 80px);
  margin-top: clamp(16px, 1.6vw, 30px);
}

.dt-place__side {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: clamp(160px, 13.3vw, 256px);
}

.dt-place__side img {
  width: clamp(120px, 10.4vw, 200px);
}

.dt-place .dt-donut {
  flex: 0 0 clamp(220px, 17vw, 328px);
  width: clamp(220px, 17vw, 328px);
}

/* ---------------------------------- responsive */

@media (max-width: 900px) {
  .dt-grid,
  .dt-grid--3 {
    grid-template-columns: 1fr;
  }

  .dt-card--10th {
    flex-direction: column;
    text-align: center;
  }

  .dt-card__bg {
    position: static;
    display: block;
    width: 60%;
    margin: 16px auto 0;
  }

  .dt-pie {
    flex-direction: column;
  }

  .dt-keitai {
    flex-direction: column;
    align-items: center;
  }

  .dt-place {
    flex-direction: column;
  }
}