:root {
  --color-key: #DC1A1A;
  --color-text: #333333;
  --color-white: #FFFFFF;
  --color-bg: #F9F9F9;
  --font-jp: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;
    /* Container */
  --container-width: 1440px;
  --content-width: 1020px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}
body {
  font-family: var(--font-jp);
  color: var(--color-text);
  line-height: 1.4;
}
img {
  max-width: 100%;
  display: block;
}
a {
  color: var(--color-text);
  transition: opacity 0.2s ease;
}
.mb-40px {
  margin-bottom: 40px;
}
/* ================================================================
   fv（セクション本体）
================================================================= */
.fv {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 80px;
  overflow: hidden;
  background-color: var(--color-white);
  padding: 80px 0 40px;
}

/* ----------------------------------------------------------------
   fv__bg（背景の数字：無限ループスライド）
---------------------------------------------------------------- */
.fv__bg {
  position: absolute;
  top: -21px;
  left: 0;
  width: 100%;
  z-index: 1;
  display: flex;
  flex-direction: column;
}

.fv__bg-track {
  position: relative;
  width: 100%;
  height: 184px;
  overflow: hidden;
  margin-bottom: -32px;
}

.fv__bg-track:last-child {
  margin-bottom: 0;
}

.fv__bg-track__inner {
  display: flex;
  align-items: flex-end;
  width: max-content;
  height: 100%;
  padding: 40px 0;
  will-change: transform;
}

.fv__bg-track--a .fv__bg-track__inner {
  animation: fv-marquee-left 36s linear infinite;
}

.fv__bg-track--b .fv__bg-track__inner {
  animation: fv-marquee-right 36s linear infinite;
}

@keyframes fv-marquee-left {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@keyframes fv-marquee-right {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}

.fv__bg-group {
  display: flex;
  align-items: flex-end;
  gap: 80px;
  padding: 0 40px;
  flex-shrink: 0;
}

/* c-fv-number（背景に浮かぶ数字。値ごとにサイズが異なる） */
.c-fv-number {
  --stroke-w: 1px;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  font-weight: 700;
  line-height: 0.8;
  color: var(--color-white);
  opacity: 0.2;
  white-space: nowrap;
  text-shadow:
    var(--stroke-w) 0 0 var(--color-key),
    calc(var(--stroke-w) * -1) 0 0 var(--color-key),
    0 var(--stroke-w) 0 var(--color-key),
    0 calc(var(--stroke-w) * -1) 0 var(--color-key),
    var(--stroke-w) var(--stroke-w) 0 var(--color-key),
    calc(var(--stroke-w) * -1) var(--stroke-w) 0 var(--color-key),
    var(--stroke-w) calc(var(--stroke-w) * -1) 0 var(--color-key),
    calc(var(--stroke-w) * -1) calc(var(--stroke-w) * -1) 0 var(--color-key);
}

.c-fv-number__unit {
  font-weight: 500;
}

/* 数値ごとのサイズ差分（Figmaのデザインに準拠） */
.fv__bg-track--a .fv__bg-group > :nth-child(1) .c-fv-number__value { font-size: 130px; }
.fv__bg-track--a .fv__bg-group > :nth-child(2) .c-fv-number__value { font-size: 80px; }
.fv__bg-track--a .fv__bg-group > :nth-child(2) .c-fv-number__unit  { font-size: 38px; }
.fv__bg-track--a .fv__bg-group > :nth-child(3) .c-fv-number__value { font-size: 120px; }
.fv__bg-track--a .fv__bg-group > :nth-child(3) .c-fv-number__unit  { font-size: 64px; }
.fv__bg-track--a .fv__bg-group > :nth-child(4) .c-fv-number__value { font-size: 100px; }
.fv__bg-track--a .fv__bg-group > :nth-child(5) .c-fv-number__value { font-size: 140px; }
.fv__bg-track--a .fv__bg-group > :nth-child(5) .c-fv-number__unit  { font-size: 56px; }

.fv__bg-track--b .fv__bg-group > :nth-child(1) .c-fv-number__value { font-size: 80px; }
.fv__bg-track--b .fv__bg-group > :nth-child(1) .c-fv-number__unit  { font-size: 38px; }
.fv__bg-track--b .fv__bg-group > :nth-child(2) .c-fv-number__value { font-size: 120px; }
.fv__bg-track--b .fv__bg-group > :nth-child(2) .c-fv-number__unit  { font-size: 64px; }
.fv__bg-track--b .fv__bg-group > :nth-child(3) .c-fv-number__value { font-size: 100px; }
.fv__bg-track--b .fv__bg-group > :nth-child(4) .c-fv-number__value { font-size: 130px; }
.fv__bg-track--b .fv__bg-group > :nth-child(5) .c-fv-number__value { font-size: 140px; }
.fv__bg-track--b .fv__bg-group > :nth-child(5) .c-fv-number__unit  { font-size: 56px; }

/* 動きに配慮 */
@media (prefers-reduced-motion: reduce) {
  .fv__bg-track__inner {
    animation: none;
  }
}

/* ----------------------------------------------------------------
   fv__catch（キャッチコピー）
---------------------------------------------------------------- */
.fv__catch {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
  padding: 0 20px;
  -webkit-text-stroke: 8px #fff;
  paint-order: stroke fill;
}

.fv__catch-lead {
  font-size: 32px;
  font-weight: 700;
}

.fv__catch-title {
  display: flex;
  flex-direction: column;
  font-size: 120px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--color-key);
}

.fv__catch-text {
  font-size: 20px;
  font-weight: 500;
  line-height: 1.4;
}

/* ----------------------------------------------------------------
   fv__nav（ヒーロー内ナビ枠）
---------------------------------------------------------------- */
.fv__nav {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1020px;
}

/* ================================================================
   c-nav（共通ナビコンポーネント）
   c-nav--hero  … ヒーロー内表示（英字+日本語、大）
   c-nav--fixed … スクロール追従の実ナビ（英字のみ、小）
================================================================= */
.c-nav {
  display: flex;
  align-items: stretch;
  justify-content: center;
  width: 100%;
}

.c-nav__list {
  display: flex;
  align-items: stretch;
  justify-content: center;
  width: 100%;
}

.c-nav__item {
  display: flex;
}

.c-nav__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background-color: var(--color-white);
  color: var(--color-key);
  transition: color 0.2s ease;
}

.c-nav__link:hover {
  color: var(--color-text);
}

.c-nav__label-en {
  font-weight: 700;
}

.c-nav__label-jp {
  font-weight: 500;
}

.c-nav__icon {
  color: var(--color-key);
}

/* ---- c-nav--hero（ヒーロー内・大） ---- */
.c-nav--hero {
  width: 100%;
}


.c-nav--hero .c-nav__item {
  display: flex;
  justify-content: center;
  text-align: center;
  width: calc(100% / 4);
  border-right: 1px solid var(--color-key);
  
}
.c-nav--hero .c-nav__item:first-child {
    border-left: 1px solid var(--color-key);
}

.c-nav--hero .c-nav__link {
  padding: 12px 20px;
  gap: 8px;
}

.c-nav--hero .c-nav__label-en {
  display: flex;
  font-size: 28px;
  line-height: 1.2;
  margin-bottom: 8px;
}

.c-nav--hero .c-nav__label-jp {
  font-size: 16px;
  line-height: 1.6;
}

.c-nav--hero .c-nav__icon {
  width: 18px;
  height: 18px;
  margin-top: auto;
}

/* ---- c-nav--fixed（画面上部固定・小） ---- */
.c-nav--fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background-color: var(--color-white);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-100%);
  transition: visibility 0.25s ease, opacity 0.25s ease, transform 0.25s ease;
  padding-top: 43px;
}

.c-nav--fixed.is-visible {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .c-nav--fixed {
    transition: none;
  }
}

.c-nav--fixed .c-nav__item {
  border-right: 1px solid var(--color-key);
}

.c-nav--fixed .c-nav__item:first-child {
  border-left: 1px solid var(--color-key);
}

.c-nav--fixed .c-nav__link {
  flex-direction: row;
  width: 260px;
  padding: 14px 20px;
}

.c-nav--fixed .c-nav__label-en {
  font-size: 18px;
  line-height: 1.6;
}

.c-nav--fixed .c-nav__icon {
  width: 14px;
  height: 8px;
  margin-left: 8px;
}

/* ================================================================
   レスポンシブ（SP: max-width 768px）
================================================================= */
@media (max-width: 768px) {

  .fv {
    gap: 40px;
    padding: 48px 0 24px;
  }

  .fv__bg-track {
    height: 96px;
    margin-bottom: -16px;
  }

  .fv__bg-group {
    gap: 32px;
    padding: 0 16px;
  }

  .fv__bg-track__inner {
    padding: 16px 0;
  }

  /* 背景数字はSPでは一律縮小して可読性を確保 */
  .c-fv-number .c-fv-number__value {
    font-size: 48px !important;
  }

  .c-fv-number .c-fv-number__unit {
    font-size: 22px !important;
  }

  .fv__catch {
    gap: 12px;
    padding: 0 13px;
  }

  .fv__catch-lead {
    font-size: 18px;
  }

  .fv__catch-title {
    font-size: 60px;
    line-height: 1.2;
  }

  .fv__catch-text {
    font-size: 14px;
  }

  .c-nav--hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .c-nav--hero .c-nav__item {
    width: 100%;
    border-left: 1px solid var(--color-key);
    border-right: 1px solid var(--color-key);
  }

  .c-nav--hero .c-nav__item:nth-child(1),
  .c-nav--hero .c-nav__item:nth-child(2) {
    border-bottom: 1px solid var(--color-key);
  }

  .c-nav--hero .c-nav__link {
    width: 100%;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    padding: 8px 8px 12px;
  }

  .c-nav--hero .c-nav__label-en {
    font-size: 20px;
    margin-bottom: 0;
  }

  .c-nav--hero .c-nav__label-jp {
    font-size: 14px;
  }

  .c-nav--hero .c-nav__icon {
    width: 20px;
    height: 12px;
    margin-top: 4px;
  }

  /* 固定ナビ：横並び均等4分割を維持しつつ幅を可変に */
  .c-nav--fixed .c-nav__list {
    width: 100%;
  }

  .c-nav--fixed .c-nav__item {
    flex: 1;
  }

  .c-nav--fixed .c-nav__link {
    width: 100%;
    padding: 10px 8px;
  }

  .c-nav--fixed .c-nav__label-en {
    font-size: 12px;
  }

  .c-nav--fixed .c-nav__icon {
    width: 10px;
    height: 6px;
    margin-left: 4px;
  }
}

/* ================================================================
   c-heading（共通見出しコンポーネント）
================================================================= */
.c-heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 16px 120px;
  text-align: center;
}

.c-heading__en {
  --stroke-w: 1px;
  margin: 0;
  font-size: 80px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--color-white);
  text-shadow:
    var(--stroke-w) 0 0 var(--color-key),
    calc(var(--stroke-w) * -1) 0 0 var(--color-key),
    0 var(--stroke-w) 0 var(--color-key),
    0 calc(var(--stroke-w) * -1) 0 var(--color-key),
    var(--stroke-w) var(--stroke-w) 0 var(--color-key),
    calc(var(--stroke-w) * -1) var(--stroke-w) 0 var(--color-key),
    var(--stroke-w) calc(var(--stroke-w) * -1) 0 var(--color-key),
    calc(var(--stroke-w) * -1) calc(var(--stroke-w) * -1) 0 var(--color-key);
}

.c-heading__jp {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 4.8px;
  color: var(--color-key);
}
/* ================================================================
   セクション共通
================================================================= */
.bg-gray {
    background-color: var(--color-bg);
}
/* ================================================================
   about（セクション本体）
================================================================= */
.about {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 80px;
  padding: 80px 0;
}

.about__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: var(--content-width);
  padding: 0 20px;
}

.lead--text {
  width: 100%;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.4;
  text-align: left;
}
.lead--text.center {
  text-align: center;
}

.lead--accent {
  font-size: 28px;
  color: var(--color-key);
}

.about__highlights {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  grid-template-rows: auto auto auto;
  column-gap: 30px;
  row-gap: 32px;
  width: 100%;
}

.about__highlight {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
  align-content: start;
  justify-items: center;
  width: 100%;
  max-width: 480px;
  padding: 40px;
  border-bottom: 1px solid var(--color-key);
  justify-self: center;
}

.about__highlight:first-of-type {
  grid-column: 1;
}

.about__highlight:last-of-type {
  grid-column: 3;
}

.about__highlight .c-figure {
  align-self: stretch;
  width: 100%;
}

.about__highlight-body {
  width: 100%;
  justify-self: stretch;
}

.about__divider {
  grid-column: 2;
  grid-row: 1 / -1;
  flex-shrink: 0;
  width: 1px;
  align-self: stretch;
  background-color: var(--color-key);
  margin-bottom: 20px;
  margin-top: 40px;
}

/* ----------------------------------------------------------------
   about__list（下段：PB商品数／リサイクル／食育）
   PC: 横並び（左に数値・右にテキスト） / SP: 縦並び
---------------------------------------------------------------- */
.about__list {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.about__list-item {
  display: flex;
  align-items: center;
  gap: 64px;
  width: 100%;
  padding: 40px;
  border-bottom: 1px solid var(--color-key);
}

.about__list-item-figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  flex-shrink: 0;
  width: 350px;
}

.about__list-item-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  flex: 1;
  min-width: 0;
}

/* ================================================================
   c-badge（赤枠ピル型ラベル）
================================================================= */
.c-badge {
  display: inline-block;
  padding: 10px 30px;
  border: 1px solid var(--color-key);
  border-radius: 60px;
  background-color: var(--color-white);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  color: var(--color-key);
  white-space: nowrap;
}
.c-badge--small {
  font-size: 24px;
}

.c-badge--multiline {
  gap: 2px;
}

.c-badge__sub {
  font-size: 16px;
}

.c-badge__main {
  display: block;
  font-size: 28px;
}

/* ================================================================
   c-figure（数値＋単位＋注釈）
================================================================= */
.c-figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  width: 100%;
}

.c-figure__lead {
  font-size: 24px;
  font-weight: 700;
  white-space: nowrap;
}

.c-figure__lead-num {
  font-size: 32px;
}

.c-figure__number {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 8px;
  padding-bottom: 20px;
}
/* c-figure--no-lead: c-figure__leadを持たないカードで、
   あるカードと数字(c-figure__number)の位置を揃えるための
   ダミー領域（リード文と同じ高さ分の空白）を確保する */
.c-figure--no-lead::before {
  content: "";
  display: block;
  height: calc(24px * 1.4); /* c-figure__lead の line-height と同じ高さ */
  width: 100%;
}

.c-figure__value {
  font-size: 80px;
  font-weight: 700;
  line-height: 0.8;
  color: var(--color-key);
  font-variant-numeric: tabular-nums;
}

/* 上段カードは96px（より大きい数値） */
.c-figure__value.value--96 {
  font-size: 96px;
}

.c-figure__unit {
  font-size: 32px;
  font-weight: 500;
  line-height: 1;
  color: var(--color-key);
}

.c-figure__note {
  width: 100%;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  text-align: left;
}

/* ================================================================
   c-textblock（見出し＋本文）
================================================================= */
.c-textblock {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
  text-align: left;
}

.c-textblock__title {
  width: 100%;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
}

.c-textblock__text {
  width: 100%;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
}
.c-textblock__text--red {
  color: var(--color-key);
}

/* ================================================================
   レスポンシブ（SP: max-width 768px）
   横並び要素を縦並びに切り替える
================================================================= */
@media (max-width: 768px) {

  .c-heading {
    padding: 16px 24px;
    gap: 8px;
  }

  .c-heading__en {
    font-size: 40px;
    --stroke-w: 0.6px;
  }

  .c-heading__jp {
    font-size: 16px;
    letter-spacing: 3px;
  }

  .about {
    gap: 40px;
    padding: 40px 0;
  }

  .about__body {
    padding: 0;
  }

  .lead--text {
    font-size: 20px;
    text-align: center;
    margin-bottom: 0;
  }

  .lead--accent {
    font-size: 24px;
  }

  /* 上段：横並び→縦並び */
  .about__highlights {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
  }

  .about__highlight {
    display: flex;
    flex-direction: column;
    align-items: center;
    grid-column: auto;
    grid-row: auto;
    gap: 32px;
    width: 100%;
    max-width: 100%;
    padding: 40px 10px;
  }

  .about__highlight .c-figure {
    align-self: auto;
  }
  .c-figure--no-lead::before {
    display: none;
  }
  .about__highlight-body {
    justify-self: auto;
  }

  .about__divider {
    display: none;
  }


  /* 下段：横並び→縦並び */
  .about__list-item {
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
    padding: 40px 10px;
  }

  .about__list-item-figure {
    width: 100%;
  }

  .c-badge {
    font-size: 22px;
    padding: 8px 20px;
  }

  .c-badge__sub {
    font-size: 16px;
  }

  .c-badge__main {
    font-size: 20px;
  }

  .c-textblock__title {
    font-size: 16px;
  }
}
/* ================================================================
   section2（Our People / 働く人）
================================================================= */
.people {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 80px;
  padding: 80px 0;
  background-color: var(--color-white);
}

.people__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 64px;
  width: 100%;
  max-width: var(--content-width);
  padding: 0 20px;
}

.people__group {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.people__highlights {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  grid-template-rows: auto auto auto;
  column-gap: 30px;
  row-gap: 32px;
  width: 100%;
}

.people__highlight {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
  align-content: start;
  justify-items: center;
  width: 100%;
  max-width: 480px;
  padding: 40px;
  border-bottom: 1px solid var(--color-key);
  justify-self: center;
}

.people__highlight:first-of-type {
  grid-column: 1;
}

.people__highlight:last-of-type {
  grid-column: 3;
}

.people__highlight .c-figure {
  align-self: stretch;
  width: 100%;
}

.people__highlight-body {
  width: 100%;
  justify-self: stretch;
}

.people__divider {
  grid-column: 2;
  grid-row: 1 / -1;
  flex-shrink: 0;
  width: 1px;
  align-self: stretch;
  background-color: var(--color-key);
  margin-bottom: 20px;
  margin-top: 40px;
}

/* ----------------------------------------------------------------
   --full 修飾子は「バッジ＋グラフ＋テキスト」を縦に中央揃えする
   フル幅レイアウト（定着率比較・男女比率カードで使用）
---------------------------------------------------------------- */
.people__list {
  display: flex;
  flex-direction: column;
  width: 100%;
  list-style: none;
}

.people__list-item {
  display: flex;
  align-items: center;
  gap: 64px;
  width: 100%;
  padding: 40px;
  border-bottom: 1px solid var(--color-key);
}

.people__list-item-figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  flex-shrink: 0;
  width: 350px;
}

.people__list-item-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  flex: 1;
  min-width: 0;
}

.people__list-item--full {
  flex-direction: column;
  align-items: center;
  gap: 32px;
}

.people__list-item-note {
  max-width: 940px;
}

.people__list-item-body--full {
  width: 100%;
}

/* ================================================================
   c-figure--inline（ラベル＋数値の横並び修飾子）
   例：「新卒入社8年目」＋「29歳」
================================================================= */
.c-figure--inline {
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 32px;
}

.c-figure__label {
  font-size: 18px;
  font-weight: 700;
  white-space: nowrap;
}

/* ================================================================
   c-donut（円グラフ）
   c-donut-group … A社／Belc／B社の定着率比較（リング＋中央に数値）
   c-donut--ratio … 2026年4月入社の男女比率（円全体を2色で分割）
================================================================= */
.c-donut-group {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 48px;
  list-style: none;
}

.c-donut {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.c-donut__label {
  font-weight: 700;
  color: #737373;
  font-size: 24px;
}

.c-donut--main .c-donut__label {
  font-size: 28px;
}

.c-donut__circle {
  --donut-size: 200px;
  position: relative;
  width: var(--donut-size);
  height: var(--donut-size);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: conic-gradient(var(--donut-color) calc(var(--donut-value) * 1%), #E5E5E5 0);
}

.c-donut--sub .c-donut__circle,
.c-donut--main .c-donut__circle,
.c-donut--ratio .c-donut__circle {
  /* リング状に見せるため中央に白い円を重ねる */
  z-index: 0;
}

.c-donut--sub .c-donut__circle::before,
.c-donut--main .c-donut__circle::before,
.c-donut--ratio .c-donut__circle::before {
  content: "";
  position: absolute;
  inset: 24px;
  border-radius: 50%;
  background-color: var(--color-white);
  z-index: 1;
}
.c-donut--sub .c-donut__circle::before {
  inset: 18px;
}


.c-donut--main .c-donut__circle {
  --donut-size: 300px;
}

.c-donut__number {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  gap: 4px;
}

.c-donut__value {
  font-size: 40px;
  font-weight: 700;
  line-height: 1;
  color: #ACACAC;
}

.c-donut__unit {
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  color: #ACACAC;
}

.c-donut--main .c-donut__value {
  font-size: 72px;
  color: var(--color-key);
}

.c-donut--main .c-donut__unit {
  font-size: 32px;
  color: var(--color-key);
}

/* ---- c-donut--ratio（男女比率：円全体を2色で分割） ---- */
.c-donut--ratio .c-donut__circle {
  --donut-size: 300px;
  background: conic-gradient(
    var(--donut-track, #5C5C5C) 0 calc(var(--donut-value) * 1%),
    var(--donut-color) calc(var(--donut-value) * 1%) 100%
  );
}

.c-donut__ratio-numbers {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  gap: 12px;
}

.c-donut__ratio-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.c-donut__ratio-label {
  font-size: 18px;
  font-weight: 700;
  color: #5C5C5C;
}

.c-donut__ratio-label--red {
  color: var(--color-key);
}

.c-donut__ratio-item .c-donut__value {
  font-size: 56px;
  line-height: 0.8;
  color: var(--color-key);
}

.c-donut__ratio-item .c-donut__value--black {
  color: #5C5C5C;
}

.c-donut__ratio-item .c-donut__unit {
  font-size: 24px;
  color: var(--color-key);
}

.c-donut__ratio-item .c-donut__unit--male {
  color: #5C5C5C;
}

/* ----------------------------------------------------------------
   section2__ratio（男女比率カード：アイコン＋円グラフの横並び）
---------------------------------------------------------------- */
.people__ratio {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  width: 100%;
}

.people__ratio .c-people-icon {
  width: 150px;
  height: 160px;
  flex-shrink: 0;
}

/* ================================================================
   レスポンシブ（SP: max-width 768px）
================================================================= */
@media (max-width: 768px) {

  .people {
    gap: 48px;
    padding: 48px 0;
  }

  .people__body {
    gap: 40px;
    padding: 0;
  }

  /* 2カード：横並び→縦並び */
  .people__highlights {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
  }

  .people__highlight {
    display: flex;
    flex-direction: column;
    align-items: center;
    grid-column: auto;
    grid-row: auto;
    gap: 24px;
    width: 100%;
    max-width: 100%;
    padding: 40px 10px;
  }

  .people__highlight .c-figure {
    align-self: auto;
  }

  .people__highlight-body {
    justify-self: auto;
  }

  .people__divider {
    display: none;
  }

  /* リスト項目：横並び→縦並び */
  .people__list-item {
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
    padding: 40px 10px;
  }

  .people__list-item-figure {
    width: 100%;
  }

  .people__list-item--full {
    align-items: center;
  }

  .c-figure--inline {
    gap: 16px;
  }

  .c-figure__label {
    font-size: 14px;
  }

  /* 定着率比較の円グラフ：
     PC=3つ横並びのまま／SP=Belc(main)を上段、A社・B社(sub)を下段横並びに。 */
  .c-donut-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    justify-items: center;
    row-gap: 16px;
    column-gap: 28px;
  }

  .c-donut--main {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .c-donut-group > .c-donut--sub:first-child {
    grid-column: 1;
    grid-row: 2;
  }

  .c-donut-group > .c-donut--sub:last-child {
    grid-column: 2;
    grid-row: 2;
  }

  .c-donut__circle {
    --donut-size: 150px;
  }

  .c-donut--main .c-donut__circle {
    --donut-size: 260px;
  }

  .c-donut__value {
    font-size: 30px;
  }

  .c-donut__unit {
    font-size: 16px;
  }

  .c-donut--main .c-donut__value {
    font-size: 62px;
  }

  .c-donut--main .c-donut__unit {
    font-size: 28px;
  }

  .c-donut__label {
    font-size: 24px;
  }

  .c-donut--main .c-donut__label {
    font-size: 28px;
  }

  /* 男女比率：アイコン＋円グラフを縦積みに */
  .people__ratio {
    display: grid;
    grid-template-columns: 1fr 1fr;
    row-gap: 24px;
    column-gap: 24px;
    justify-items: center;
  }

  .people__ratio .c-donut--ratio {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .people__ratio .c-people-icon:first-child {
    grid-column: 1;
    grid-row: 2;
  }

  .people__ratio .c-people-icon:last-child {
    grid-column: 2;
    grid-row: 2;
  }

  .c-donut--ratio .c-donut__circle {
    --donut-size: 300px;
  }

  .c-donut__ratio-item .c-donut__value {
    font-size: 56px;
  }

  .people__ratio .c-people-icon {
    width: 86px;
    height: 109px;
  }
}

.workstyle {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  padding: 80px 0;
}

.workstyle__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: var(--content-width);
  padding: 0 20px;
}

/* ----------------------------------------------------------------
   section3__highlights（2カード横並び）
   about__highlights / section2__highlights と同じ subgrid パターン
---------------------------------------------------------------- */
.workstyle__highlights {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  grid-template-rows: auto auto auto;
  column-gap: 30px;
  row-gap: 32px;
  width: 100%;
}

.workstyle__highlight {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
  align-content: start;
  justify-items: center;
  width: 100%;
  max-width: 480px;
  padding: 40px;
  border-bottom: 1px solid var(--color-key);
  justify-self: center;
  text-align: center;
}

.workstyle__highlight:first-of-type {
  grid-column: 1;
}

.workstyle__highlight:last-of-type {
  grid-column: 3;
}

.workstyle__highlight .c-figure {
  align-self: stretch;
  width: 100%;
}

.workstyle__highlight-body {
  width: 100%;
  justify-self: stretch;
}

.workstyle__divider {
  grid-column: 2;
  grid-row: 1 / -1;
  flex-shrink: 0;
  width: 1px;
  align-self: stretch;
  background-color: var(--color-key);
  margin-bottom: 20px;
  margin-top: 40px;
}

/* ----------------------------------------------------------------
   section3__list / section3__list-item
---------------------------------------------------------------- */
.workstyle__list {
  display: flex;
  flex-direction: column;
  width: 100%;
  list-style: none;
}

.workstyle__list-item {
  width: 100%;
  padding: 40px;
  border-bottom: 1px solid var(--color-key);
}

.workstyle__list-item--full {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}

.workstyle__list-item--row {
  display: flex;
  align-items: center;
  gap: 64px;
}

.workstyle__list-item-figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  flex-shrink: 0;
  width: 350px;
  text-align: center;
}

.workstyle__list-item-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  flex: 1;
  min-width: 0;
}

.workstyle__list-item-body--full {
  width: 100%;
}

.workstyle__list-item-lead-text {
  width: 100%;
  font-size: 14px;
  line-height: 1.6;
}

.workstyle__list-item-note {
  max-width: 940px;
}

/* ================================================================
   c-compare（数値の下に他社比較を並べるミニ比較リスト）
================================================================= */
.c-compare {
  display: flex;
  justify-content: center;
  gap: 64px;
  opacity: 0.5;
}

.c-compare__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.c-compare__label {
  font-size: 24px;
  font-weight: 700;
}

.c-compare__number {
  display: flex;
  align-items: baseline;
  gap: 2px;
}

.c-compare__value {
  font-size: 40px;
  font-weight: 700;
}

.c-compare__unit {
  font-size: 24px;
  font-weight: 700;
}

/* ================================================================
   c-donut__split（円グラフ中央にコロン区切りで2つの数値を表示）
   ナショナル社員：地域限定社員＝6：4 で使用
================================================================= */
.c-donut__split {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 74%;
}

.c-donut__split-item {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-width: max-content;
}

.c-donut__split-label {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
}

.c-donut__split-colon {
  font-size: 32px;
  font-weight: 700;
  align-self: flex-end;
  padding-bottom: 4px;
}

.c-donut__split .c-donut__value {
  font-size: 56px;
  line-height: 0.8;
  color: var(--color-key);
}

.c-donut__split .c-donut__value--black {
  color: #5C5C5C;
}

/* ================================================================
   section4（Benefits / Info・福利厚生/その他）
================================================================= */
.benefits {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  padding: 80px 0;
  background-color: var(--color-white);
}

.benefits__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: var(--content-width);
  padding: 0 20px;
}

/* ----------------------------------------------------------------
   section4__list / section4__list-item（about__list-item と同じ）
---------------------------------------------------------------- */
.benefits__list {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.benefits__list-item {
  display: flex;
  align-items: center;
  gap: 64px;
  width: 100%;
  padding: 40px;
  border-bottom: 1px solid var(--color-key);
}
.benefits__list-item-figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  flex-shrink: 0;
  width: 350px;
  text-align: center;
}

.benefits__list-item-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  flex: 1;
  min-width: 0;
}


.benefits__pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 30px;
  row-gap: 24px;
  width: 100%;
}

.benefits__pair-item {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 2;
  align-content: start;
  justify-items: center;
  width: 100%;
  max-width: 480px;
  padding: 40px;
  border-bottom: 1px solid var(--color-key);
  justify-self: center;
}

.benefits__pair-item:first-of-type {
  grid-column: 1;
}

.benefits__pair-item:last-of-type {
  grid-column: 3;
}

.benefits__pair-item .benefits__list-item-figure {
  align-self: stretch;
  width: 100%;
}

.benefits__pair-item .benefits__list-item-body {
  width: 100%;
  justify-self: stretch;
}

.benefits__divider {
  grid-column: 2;
  grid-row: 1 / -1;
  flex-shrink: 0;
  width: 1px;
  align-self: stretch;
  background-color: var(--color-key);
  margin-bottom: 20px;
  margin-top: 40px;
}

/* ================================================================
   c-link-cta（外部リンク導線：矢印＋テキスト＋ロゴ枠）
================================================================= */
.c-link-cta {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  font-size: 14px;
  gap: 8px;
}

.c-link-cta:hover {
  opacity: 0.7;
}

.c-link-cta__logo {
  display: inline-block;
  width: 90px;
  height: 22px;
  margin-left: 8px;
  border-radius: 4px;
  background-color: #E5E5E5;
}
.c-link-cta img.Voice_logo_wide {
  width: 173px;
  height: 22px;
}
.c-link-cta img.tik_icon {
  width: 40px;
  height: 40px;
}

/* ----------------------------------------------------------------
   section4__ranking（就職ブランドランキング：共通バッジ＋2カード）
---------------------------------------------------------------- */
.benefits__ranking {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding-top: 40px;
}

.benefits__ranking-badge {
  white-space: normal;
  text-align: center;
  max-width: 100%;
}

.benefits__highlights {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 30px;
  width: 100%;
}

.benefits__highlight {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: 100%;
  max-width: 480px;
  padding: 24px 40px;
  text-align: center;
}

.benefits__highlight-label {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.4;
}
.benefits__highlight-label span {
  font-size: 30px;
}
.benefits__highlight .c-figure__value {
  font-size: 80px;
}

/* ================================================================
   レスポンシブ（SP: max-width 768px）
================================================================= */
@media (max-width: 768px) {

  .workstyle,
  .benefits {
    gap: 0;
    padding: 48px 0;
  }

  .workstyle__body,
  .benefits__body {
    padding: 0;
  }

  /* 2カード：横並び→縦並び（section3） */
  .workstyle__highlights {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
  }

  .workstyle__highlight {
    display: flex;
    flex-direction: column;
    align-items: center;
    grid-column: auto;
    grid-row: auto;
    gap: 24px;
    width: 100%;
    max-width: 100%;
    padding: 40px 10px;
  }

  .workstyle__divider {
    display: none;
  }


  /* リスト項目：横並び→縦並び（section3） */
  .workstyle__list-item--row {
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
  }

  .workstyle__list-item {
    padding: 40px 10px;
  }

  .workstyle__list-item-figure {
    width: 100%;
  }
  .c-compare {
    gap: 40px;
  }
  /* コロン区切り円グラフ：縮小 */
  .c-donut__split {
    gap: 8px;
  }

  .c-donut__split .c-donut__value {
    font-size: 62px;
  }

  .c-donut__split-label {
    font-size: 18px;
  }

  .c-donut__split-colon {
    font-size: 56px;
  }

  /*  benefits__list-item：リスト項目 横並び→縦並び */
  .benefits__list-item {
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
    padding: 40px 10px;
  }

  .benefits__list-item-figure {
    width: 100%;
  }

  /* benefits__pair：横並び→縦並び */
  .benefits__pair {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
  }

  .benefits__pair-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    grid-column: auto;
    grid-row: auto;
    gap: 24px;
    width: 100%;
    max-width: 100%;
    padding: 40px 10px;
  }

  .benefits__pair-item .benefits__list-item-figure {
    align-self: auto;
  }

  .benefits__pair-item .benefits__list-item-body {
    justify-self: auto;
  }

  .benefits__divider {
    display: none;
  }

  .c-link-cta {
    flex-wrap: wrap;
  }

  /* ランキングカード：横並び→縦並び */
  .benefits__highlights {
    flex-direction: column;
    align-items: center;
    gap: 24px;
  }

  .benefits__highlight {
    padding: 16px;
  }

  .benefits__highlight .c-figure__value {
    font-size: 80px;
  }

  .benefits__highlight-label {
    font-size: 24px;
  }

  .u-sp-no-border {
    border-bottom: none;
  }
}
/* ================================================================
   c-page-top（Page TOPボタン）
   一定量スクロールすると表示され、クリックで #top へスムーズスクロール
================================================================= */
.c-page-top {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 200;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 18px;
  border-radius: 999px;
  background-color: #333333;
  color: var(--color-white);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
}

.c-page-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.c-page-top:hover {
  opacity: 0.8;
  color: #fff;
}

.c-page-top__icon {
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 10px solid var(--color-white);
}

.c-page-top__text {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

@media (max-width: 768px) {
  .c-page-top {
    right: 8px;
    bottom: 64px;
    padding: 8px 16px;
  }

  .c-page-top__icon {
    border-left-width: 6px;
    border-right-width: 6px;
    border-bottom-width: 8px;
  }

  .c-page-top__text {
    font-size: 12px;
  }
}