/* //////////////////////////////////////////////////

Title : recruit-number.scss
For   : bell-c/

Created       : 2025-12-12
Last Modified : 2025-12-12

==========================================

Content

////////////////////////////////////////////////// */
/**
 * layout
 */
.p-recruit-number {
  -webkit-padding-after: 16rem;
          padding-block-end: 16rem;
  padding-inline: 2rem;
}
.p-recruit-number__container {
  container-type: inline-size;
  container-name: container;
  display: grid;
  gap: 2.4rem;
  max-width: var(--container-wide);
  width: 100%;
  margin-inline: auto;
}
.p-recruit-number__card {
  --card-spacer-default: calc(40 * var(--cqi));
  aspect-ratio: 464/240;
  position: relative;
  padding-block: var(--card-spacer-default);
  padding-inline: var(--card-spacer-default);
  background-color: var(--color-background-recruit);
  color: var(--color-primary);
  font-family: var(--font-combine);
}
.p-recruit-number__title {
  position: absolute;
  font-size: calc(20 * var(--cqi));
  font-weight: 700;
  z-index: var(--zindex-front);
  letter-spacing: 0.09em;
}
.p-recruit-number__image {
  position: absolute;
}
.p-recruit-number__data {
  position: absolute;
  z-index: var(--zindex-front);
  font-size: 0;
  font-weight: 700;
  line-height: 1;
}
.p-recruit-number__data-label {
  font-size: var(--data-label-font-size);
  font-weight: 500;
}
.p-recruit-number__data-number {
  font-size: var(--data-number-font-size);
  transform: translateY(10%);
}
.p-recruit-number__data-unit {
  font-size: var(--data-unit-font-size);
}
.p-recruit-number__data[data-text-size=large] {
  --data-label-font-size: calc(16 * var(--cqi));
  --data-number-font-size: calc(72 * var(--cqi));
  --data-unit-font-size: calc(24 * var(--cqi));
}
.p-recruit-number__data[data-text-size=medium] {
  --data-label-font-size: calc(16 * var(--cqi));
  --data-number-font-size: calc(38 * var(--cqi));
  --data-unit-font-size: calc(18 * var(--cqi));
}
.p-recruit-number__data[data-text-size=small] {
  --data-label-font-size: calc(16 * var(--cqi));
  --data-number-font-size: calc(28 * var(--cqi));
  --data-unit-font-size: calc(15 * var(--cqi));
}

/**
 * each cards
 */
.p-recruit-number__card[data-summary=employees] .p-recruit-number__image {
  width: 29.3103448276%;
  bottom: var(--card-spacer-default);
  right: var(--card-spacer-default);
}
.p-recruit-number__card[data-summary=employees] .p-recruit-number__data {
  bottom: var(--card-spacer-default);
  left: var(--card-spacer-default);
}
.p-recruit-number__card[data-summary="20s-30s-ratio"] .p-recruit-number__image {
  width: 31.25%;
  bottom: var(--card-spacer-default);
  right: var(--card-spacer-default);
}
.p-recruit-number__card[data-summary="20s-30s-ratio"] .p-recruit-number__data {
  bottom: var(--card-spacer-default);
  left: var(--card-spacer-default);
}
.p-recruit-number__card[data-summary=humanities-science-ratio] {
  background-image: url(../../assets/images/recruit/number/figure-humanities-science-ratio.svg);
  background-size: 56.8965517241%;
  background-repeat: no-repeat;
  background-position: center bottom var(--card-spacer-default);
}
.p-recruit-number__card[data-summary=humanities-science-ratio] .p-recruit-number__image--01 {
  width: 9.9137931034%;
  bottom: calc(50 * var(--cqi));
  left: var(--card-spacer-default);
}
.p-recruit-number__card[data-summary=humanities-science-ratio] .p-recruit-number__image--02 {
  width: 9.0517241379%;
  bottom: calc(45 * var(--cqi));
  right: var(--card-spacer-default);
}
.p-recruit-number__card[data-summary=humanities-science-ratio] .p-recruit-number__data {
  bottom: calc(80 * var(--cqi));
}
.p-recruit-number__card[data-summary=humanities-science-ratio] .p-recruit-number__data[data-type=humanities] {
  left: calc(100 * var(--cqi));
}
.p-recruit-number__card[data-summary=humanities-science-ratio] .p-recruit-number__data[data-type=science] {
  right: calc(100 * var(--cqi));
}
.p-recruit-number__card[data-summary=gender-ratio] {
  background-image: url(../../assets/images/recruit/number/figure-gender-ratio.svg);
  background-size: 62.7118644068%;
  background-repeat: no-repeat;
  background-position: center bottom calc(34 * var(--cqi));
}
.p-recruit-number__card[data-summary=gender-ratio] .p-recruit-number__image {
  width: 11.6379310345%;
  bottom: calc(20 * var(--cqi));
}
.p-recruit-number__card[data-summary=gender-ratio] .p-recruit-number__image--01 {
  left: calc(22 * var(--cqi));
}
.p-recruit-number__card[data-summary=gender-ratio] .p-recruit-number__image--02 {
  right: calc(22 * var(--cqi));
}
.p-recruit-number__card[data-summary=gender-ratio] .p-recruit-number__data[data-type*=rate] {
  bottom: calc(122 * var(--cqi));
}
.p-recruit-number__card[data-summary=gender-ratio] .p-recruit-number__data[data-type*=number] {
  bottom: calc(86 * var(--cqi));
}
.p-recruit-number__card[data-summary=gender-ratio] .p-recruit-number__data[data-type*=male] {
  left: var(--pos-left, calc(133 * var(--cqi)));
}
.p-recruit-number__card[data-summary=gender-ratio] .p-recruit-number__data[data-type*=female] {
  --pos-left: auto;
  right: calc(133 * var(--cqi));
}
.p-recruit-number__card[data-summary=new-hire-gender-ratio-3y] {
  background-image: url(../../assets/images/recruit/number/figure-new-hire-gender-ratio-3y.svg);
  background-size: 62.7118644068%;
  background-repeat: no-repeat;
  background-position: center bottom calc(34 * var(--cqi));
}
.p-recruit-number__card[data-summary=new-hire-gender-ratio-3y] .p-recruit-number__image {
  width: 11.6379310345%;
  bottom: calc(20 * var(--cqi));
}
.p-recruit-number__card[data-summary=new-hire-gender-ratio-3y] .p-recruit-number__image--01 {
  left: calc(22 * var(--cqi));
}
.p-recruit-number__card[data-summary=new-hire-gender-ratio-3y] .p-recruit-number__image--02 {
  right: calc(22 * var(--cqi));
}
.p-recruit-number__card[data-summary=new-hire-gender-ratio-3y] .p-recruit-number__data[data-type*=rate] {
  bottom: calc(122 * var(--cqi));
}
.p-recruit-number__card[data-summary=new-hire-gender-ratio-3y] .p-recruit-number__data[data-type*=number] {
  bottom: calc(86 * var(--cqi));
}
.p-recruit-number__card[data-summary=new-hire-gender-ratio-3y] .p-recruit-number__data[data-type*=male] {
  left: var(--pos-left, calc(133 * var(--cqi)));
}
.p-recruit-number__card[data-summary=new-hire-gender-ratio-3y] .p-recruit-number__data[data-type*=female] {
  --pos-left: auto;
  right: calc(133 * var(--cqi));
}
.p-recruit-number__card[data-summary=revenue] {
  background-image: url(../../assets/images/recruit/number/figure-revenue.svg);
  background-size: 66.384180791%;
  background-repeat: no-repeat;
  background-position: right var(--card-spacer-default) bottom var(--card-spacer-default);
}
.p-recruit-number__card[data-summary=revenue] .p-recruit-number__image {
  width: 18.9655172414%;
  bottom: calc(22 * var(--cqi));
  left: calc(22 * var(--cqi));
}
.p-recruit-number__card[data-summary=revenue] .p-recruit-number__data[data-type=lower] {
  bottom: calc(115 * var(--cqi));
  left: calc(96 * var(--cqi));
}
.p-recruit-number__card[data-summary=revenue] .p-recruit-number__data[data-type=upper] {
  top: calc(12 * var(--cqi));
  right: calc(22 * var(--cqi));
}
.p-recruit-number__card[data-summary=new-employee-training] .p-recruit-number__image {
  width: 28.0172413793%;
  bottom: var(--card-spacer-default);
  left: var(--card-spacer-default);
}
.p-recruit-number__card[data-summary=new-employee-training] .p-recruit-number__data {
  display: grid;
  grid-template-columns: 1fr calc(80 * var(--cqi)) auto;
  align-items: end;
  right: var(--card-spacer-default);
}
.p-recruit-number__card[data-summary=new-employee-training] .p-recruit-number__data[data-type=orientation] {
  bottom: calc(180 * var(--cqi));
}
.p-recruit-number__card[data-summary=new-employee-training] .p-recruit-number__data[data-type=human-skill] {
  bottom: calc(110 * var(--cqi));
}
.p-recruit-number__card[data-summary=new-employee-training] .p-recruit-number__data[data-type=technical-training] {
  bottom: var(--card-spacer-default);
}
.p-recruit-number__card[data-summary=new-employee-training] .p-recruit-number__data-label {
  -webkit-padding-end: calc(10 * var(--cqi));
          padding-inline-end: calc(10 * var(--cqi));
}
.p-recruit-number__card[data-summary=parental-leave-return-rate] .p-recruit-number__image {
  width: 15.5172413793%;
  bottom: var(--card-spacer-default);
  right: var(--card-spacer-default);
}
.p-recruit-number__card[data-summary=parental-leave-return-rate] .p-recruit-number__data {
  bottom: var(--card-spacer-default);
  left: var(--card-spacer-default);
}
.p-recruit-number__card[data-summary=paid-leave] .p-recruit-number__image {
  width: 27.5862068966%;
  bottom: var(--card-spacer-default);
  right: var(--card-spacer-default);
}
.p-recruit-number__card[data-summary=paid-leave] .p-recruit-number__data {
  bottom: var(--card-spacer-default);
  left: var(--card-spacer-default);
}
.p-recruit-number__card[data-summary=new-employee-interviews] .p-recruit-number__image {
  width: 30.1724137931%;
  bottom: var(--card-spacer-default);
  right: var(--card-spacer-default);
}
.p-recruit-number__card[data-summary=new-employee-interviews] .p-recruit-number__data {
  bottom: var(--card-spacer-default);
  left: var(--card-spacer-default);
}

/* --- for small viewport --- */
@media (max-width: 767px) {
  .p-recruit-number__container {
    --cqi: 100cqi / 440;
    grid-template-columns: 100%;
  }
  .p-recruit-number__card {
    padding-block: calc(18 * var(--cqi));
  }
  .p-recruit-number__card[data-summary=gender-ratio] .p-recruit-number__data[data-type*=male] {
    left: var(--pos-left, calc(92 * var(--cqi)));
  }
  .p-recruit-number__card[data-summary=gender-ratio] .p-recruit-number__data[data-type*=female] {
    --pos-left: auto;
    right: calc(92 * var(--cqi));
  }
  .p-recruit-number__card[data-summary=new-hire-gender-ratio-3y] .p-recruit-number__data[data-type*=male] {
    left: var(--pos-left, calc(92 * var(--cqi)));
  }
  .p-recruit-number__card[data-summary=new-hire-gender-ratio-3y] .p-recruit-number__data[data-type*=female] {
    --pos-left: auto;
    right: calc(92 * var(--cqi));
  }
  .p-recruit-number__card[data-summary=revenue] {
    background-position: right var(--card-spacer-default) bottom calc(20 * var(--cqi));
  }
  .p-recruit-number__card[data-summary=revenue] .p-recruit-number__image {
    width: calc(88 * var(--cqi));
    bottom: calc(22 * var(--cqi));
    left: calc(22 * var(--cqi));
  }
  .p-recruit-number__card[data-summary=revenue] .p-recruit-number__data[data-type=lower] {
    bottom: calc(94 * var(--cqi));
    left: calc(45 * var(--cqi));
  }
  .p-recruit-number__card[data-summary=revenue] .p-recruit-number__data[data-type=upper] {
    top: calc(14 * var(--cqi));
    right: calc(28 * var(--cqi));
  }
  .p-recruit-number__card[data-summary=new-employee-training] .p-recruit-number__image {
    width: calc(108 * var(--cqi));
    bottom: calc(15 * var(--cqi));
    left: calc(26 * var(--cqi));
  }
  .p-recruit-number__card[data-summary=new-employee-training] .p-recruit-number__data {
    display: grid;
    grid-template-columns: 1fr calc(106 * var(--cqi)) auto;
    align-items: end;
    right: var(--card-spacer-default);
  }
  .p-recruit-number__card[data-summary=new-employee-training] .p-recruit-number__data[data-type=orientation] {
    bottom: calc(165 * var(--cqi));
  }
  .p-recruit-number__card[data-summary=new-employee-training] .p-recruit-number__data[data-type=human-skill] {
    bottom: calc(97 * var(--cqi));
  }
  .p-recruit-number__card[data-summary=new-employee-training] .p-recruit-number__data[data-type=technical-training] {
    bottom: calc(30 * var(--cqi));
  }
  .p-recruit-number__card[data-summary=new-employee-training] .p-recruit-number__data-label {
    -webkit-padding-end: calc(10 * var(--cqi));
            padding-inline-end: calc(10 * var(--cqi));
  }
  .p-recruit-number__data[data-text-size=medium] {
    --data-label-font-size: calc(16 * var(--cqi));
    --data-number-font-size: calc(50 * var(--cqi));
    --data-unit-font-size: calc(18 * var(--cqi));
  }
}
/* --- for large viewport --- */
@media (min-width: 768px) {
  .p-recruit-number__container {
    --cqi: 100cqi / 1440;
    grid-template-columns: repeat(6, 1fr);
  }
  .p-recruit-number__card[data-summary=employees] {
    grid-column: 4/span 3;
    grid-row: 1;
  }
  .p-recruit-number__card[data-summary="20s-30s-ratio"] {
    grid-column: 1/span 2;
    grid-row: 3;
  }
  .p-recruit-number__card[data-summary=humanities-science-ratio] {
    grid-column: 5/span 2;
    grid-row: 2;
  }
  .p-recruit-number__card[data-summary=gender-ratio] {
    grid-column: 1/span 2;
    grid-row: 2;
  }
  .p-recruit-number__card[data-summary=new-hire-gender-ratio-3y] {
    grid-column: 3/span 2;
    grid-row: 2;
  }
  .p-recruit-number__card[data-summary=revenue] {
    grid-column: 1/span 3;
    grid-row: 1;
  }
  .p-recruit-number__card[data-summary=new-employee-training] {
    grid-column: 1/span 3;
    grid-row: 4;
  }
  .p-recruit-number__card[data-summary=parental-leave-return-rate] {
    grid-column: 5/span 2;
    grid-row: 3;
  }
  .p-recruit-number__card[data-summary=paid-leave] {
    grid-column: 3/span 2;
    grid-row: 3;
  }
  .p-recruit-number__card[data-summary=new-employee-interviews] {
    grid-column: 4/span 3;
    grid-row: 4;
  }
}
/**
 * evaluation
 */
.p-post-evaluation {
  max-width: var(--post-shell-width, var(--container-wide));
  width: 100%;
  margin-inline: auto;
  padding-inline: 2rem;
}
.p-post-evaluation__container {
  display: grid;
}
.p-post-evaluation__lead {
  line-height: 1.8;
}
.p-post-evaluation__item {
  border-bottom: var(--recruit-border-style);
}
.p-post-evaluation__caption dt {
  font-weight: 700;
}
.p-post-evaluation__caption dd {
  line-height: 1.8;
}

/* --- for small viewport --- */
@media (max-width: 767px) {
  .p-post-evaluation {
    padding-block: 8rem;
  }
  .p-post-evaluation__container {
    grid-template-columns: 100%;
    row-gap: 4rem;
  }
  .p-post-evaluation__lead {
    font-size: 1.6rem;
  }
  .p-post-evaluation__list {
    border-top: var(--recruit-border-style);
  }
  .p-post-evaluation__item {
    padding-block: 2.4rem;
  }
  .p-post-evaluation__thumbnail {
    padding-inline: 2rem;
  }
  .p-post-evaluation__caption {
    -webkit-margin-before: 1.2rem;
            margin-block-start: 1.2rem;
  }
  .p-post-evaluation__caption dt {
    font-size: 1.8em;
  }
  .p-post-evaluation__caption dd {
    -webkit-margin-before: 1.6rem;
            margin-block-start: 1.6rem;
    font-size: 1.4rem;
  }
}
/* --- for large viewport --- */
@media (min-width: 768px) {
  .p-post-evaluation {
    -webkit-padding-after: 19rem;
            padding-block-end: 19rem;
  }
  .p-post-evaluation__container {
    grid-template-columns: 1fr 95rem;
    row-gap: 1.6rem;
  }
  .p-post-evaluation__heading {
    grid-column: 1;
    grid-row: 1/span 2;
    align-self: start;
  }
  .p-post-evaluation__lead {
    font-size: 1.8rem;
  }
  .p-post-evaluation__item {
    display: grid;
    grid-template-columns: 34rem 1fr;
    align-items: center;
    -moz-column-gap: 2.4rem;
         column-gap: 2.4rem;
    padding-block: 4rem;
  }
  .p-post-evaluation__caption dt {
    font-size: 2.4em;
  }
  .p-post-evaluation__caption dd {
    -webkit-margin-before: 2.4rem;
            margin-block-start: 2.4rem;
    font-size: 1.8rem;
  }
}
/*# sourceMappingURL=recruit-number.css.map */