@charset "UTF-8";

/* =====================
  @property
===================== */
@property --ratio {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 0%;
}

/* =====================
  @keyframes
===================== */
@keyframes circle-graph-left {
  to {
    --ratio: calc(100% - var(--_right-ratio));
  }
}

@keyframes circle-graph-right {
  to {
    --ratio: var(--_right-ratio);
  }
}

/* =====================
    data-id='3'
  ===================== */
.js-circle[data-id='3'] {
  --_inline-size: 185px;
  --_right-ratio: 57.5%;

  @media (width <=768px) {
    --_inline-size: calc((100 / 750) * 80 * 1vw);
  }
}

/* =====================
  numbers
===================== */
.numbers {
  position: relative;
  padding-block: 160px 118px;
  background: linear-gradient(180deg, #001636 15.73%, #002f4e 57.86%, #0c7db5 100%);

  @media only screen and (width <=768px) {
    padding-block: calc((100 / 390) * 80 * 1vw);
  }

  &::before {
    position: absolute;
    top: 0;
    right: 0;
    inline-size: 100%;
    block-size: 3064px;
    pointer-events: none;
    content: '';
    background-image: url('../../img/recruit/keyword/number_bg.png');
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
  }

  @media only screen and (width <=768px) {
    &::before {
      block-size: calc((100 / 390) * 3064 * 1vw);
    }
  }

  /* ==== u-inner ==== */
  .u-inner {
    >.wrap {
      padding: 80px;
      margin-inline: 40px;
      background-color: rgb(255 255 255 / 90%);
      backdrop-filter: blur(40px);

      @media only screen and (width <=768px) {
        padding-block: calc((100 / 390) * 64 * 1vw);
        padding-inline: calc((100 / 390) * 24 * 1vw);
        margin-inline: 0;
        backdrop-filter: blur(calc((100 / 390) * 40 * 1vw));
      }

      >.description {
        margin-block-start: 48px;
        text-align: center;
      }
    }
  }

  /* ==== number-wrap ==== */
  .number-wrap {
    margin-block-start: 48px;

    @media only screen and (width <=768px) {
      margin-block-start: calc((100 / 390) * 48 * 1vw);
    }

    /* unit */
    .unit {
      display: block grid;
      grid-template-rows: auto 61px;
      min-block-size: 325px;
      background-color: #fff;

      @media only screen and (width <=768px) {
        grid-template-rows: auto calc((100 / 390) * 61 * 1vw);
        min-block-size: calc((100 / 390) * 325 * 1vw);
      }
    }

    /* ==== unit parts ==== */
    .unit1 {
      display: block grid;
      grid-template-rows: max-content max-content 61px;
      grid-template-columns: 1fr;
      align-content: end;
      text-align: center;

      @media only screen and (width <=768px) {
        grid-template-rows: max-content max-content calc((100 / 390) * 61 * 1vw);
      }

      .item-num {
        margin-block-end: 24px;

        @media only screen and (width <=768px) {
          margin-block-end: calc((100 / 390) * 24 * 1vw);
        }

        .num {
          justify-content: center;
        }
      }

      .img {
        margin-block-end: 8px;

        @media only screen and (width <=768px) {
          inline-size: calc((100 / 390) * 107 * 1vw);
          margin-block-end: calc((100 / 390) * 8 * 1vw);
        }
      }
    }

    .num {
      display: block flex;
      gap: 4px;
      align-items: baseline;

      @media only screen and (width <=768px) {
        gap: calc((100 / 390) * 4 * 1vw);
      }
    }

    .count {
      font-family: var(--title);
      font-weight: bold;
      line-height: 1.2;
    }

    .tani {
      font-weight: 600;
    }

    .dot {
      &::before {
        display: inline-block;
        content: '.';
      }
    }

    .img {
      display: block flow;
      margin-inline: auto;
    }

    h4.title {
      position: relative;
      inline-size: inherit;
      padding-block: 20px;
      margin-inline: 40px;
      font-size: 18px;
      font-weight: 600;
      line-height: 1;
      text-align: center;

      @media only screen and (width <=768px) {
        padding-block: calc((100 / 390) * 20 * 1vw);
        margin-inline: calc((100 / 390) * 24 * 1vw);
        font-size: calc((100 / 390) * 18 * 1vw);
      }

      &::before {
        position: absolute;
        top: 0;
        left: 0;
        display: block flow;
        inline-size: 100%;
        block-size: 1px;
        content: '';
        background: linear-gradient(to bottom, #001636, #0c7db5);
      }
    }
  }

  /* =====================
    個別対応
  ===================== */
  /* ==== 社員男女比 ==== */
  .unit[data-id='2'] {
    position: relative;

    /* ==== wrap ==== */
    .item-num {
      display: block grid;
      grid-template-columns: repeat(2, 1fr);

      @media only screen and (width <=768px) {
        grid-template-columns: 1fr;
      }
    }

    /* ==== .u-text-gradation ==== */
    .u-text-gradation {
      font-weight: 550;
    }

    /* ==== wrap ==== */
    .content-wrap {
      position: relative;
      display: block grid;
      grid-template-rows: repeat(2, max-content);
      row-gap: 25px;
      justify-items: center;
      padding-block-start: 32px;

      @media only screen and (width <=768px) {
        row-gap: calc((100 / 390) * 20 * 1vw);
        padding-block-start: calc((100 / 390) * 32 * 1vw);
      }

      &+.content-wrap {
        &::before {
          position: absolute;
          top: 50%;
          left: 0;
          display: block flow;
          inline-size: 1px;
          block-size: 200px;
          content: '';
          background-color: #dfe6f0;
          transform: translateY(-50%);
        }

        @media only screen and (width <=768px) {
          margin-block-end: calc((100 / 390) * 24 * 1vw);
        }
      }
    }

    /* ==== content ==== */
    .content {
      position: absolute;
      z-index: 3;

      &[data-id='men'] {
        top: 64px;
        left: 50px;

        @media only screen and (width <=768px) {
          top: calc((100 / 390) * 64 * 1vw);
          left: calc((100 / 390) * 40 * 1vw);
        }
      }

      &[data-id='women'] {
        right: 23px;
        bottom: 12px;

        @media only screen and (width <=768px) {
          right: calc((100 / 390) * 23 * 1vw);
          bottom: calc((100 / 390) * 12 * 1vw);
        }

        .sub-title {
          text-align: right;
        }
      }

      .sub-title {
        font-weight: 500;
        line-height: 1;
      }
    }

    /* ==== count ==== */
    .count {
      margin-block: calc((1em - 1lh) / 2);
    }

    /* ==== js-circle ==== */
    .js-circle::after {
      position: absolute;
      inset-block-start: 50%;
      inset-inline: 0;
      z-index: 4;
      inline-size: 60px;
      block-size: 47px;
      margin-inline: auto;
      content: '';
      background-image: url('../../img/recruit/keyword/number_02.svg');
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;
      translate: 0 -50%;
    }

    @media only screen and (width <=768px) {
      .js-circle::after {
        inline-size: calc((100 / 390) * 60 * 1vw);
        block-size: calc((100 / 390) * 47 * 1vw);
      }
    }

    /* ==== part-time ==== */
    .content-wrap[data-id='part-time'] {
      .content[data-id='men'] {
        translate: -10px 0;
      }

      .content[data-id='women'] {
        translate: -4px 0;
      }
    }
  }

  /* ==== メビウスを選んだ理由 ==== */
  .unit[data-id='3'] {
    position: relative;

    /* 🙆 */
    &::before {
      position: absolute;
      inset-block: 46px;
      inset-inline-end: 60px;
      inline-size: 90px;
      width: 90px;
      block-size: 81px;
      height: 81px;
      pointer-events: none;
      content: '';
      background-image: url('../../img/recruit/keyword/number_03.svg');
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;
    }

    @media only screen and (width <=768px) {
      &::before {
        inset-block: calc((100 / 390) * 18 * 1vw);
        inset-inline-end: calc((100 / 390) * 20 * 1vw);
        inline-size: calc((100 / 390) * 74 * 1vw);
        width: calc((100 / 390) * 74 * 1vw);
        block-size: calc((100 / 390) * 64 * 1vw);
        height: calc((100 / 390) * 64 * 1vw);
      }
    }

    .list {
      display: block grid;
      gap: 1px;
      padding-block-start: 67px;
      padding-inline-start: 40px;

      @media only screen and (width <=768px) {
        padding-block-start: calc((100 / 390) * 80 * 1vw);
        padding-inline: calc((100 / 390) * 16 * 1vw);
      }

      li {
        display: block flex;
        gap: 6px;
        align-items: baseline;
        margin-block: calc((1em - 1lh) / 2);

        span:last-child {
          margin-inline-start: 9px;
        }
      }

      li+li {
        padding-inline-start: 17px;
        margin-block-start: -29px;

        @media only screen and (width <=768px) {
          padding-inline-start: calc((100 / 390) * 17 * 1vw);
          margin-block-start: calc((100 / 390) * -29 * 1vw);
        }
      }
    }
  }

  /* ==== 売上高推移 ==== */
  .unit[data-id='4'] {
    position: relative;

    &::before {
      position: absolute;
      inset-block-start: 0;
      inset-inline-start: 36px;
      inline-size: 193px;
      block-size: 162px;
      pointer-events: none;
      content: '';
      background-image: url('../../img/recruit/keyword/number_04.svg');
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;
      clip-path: polygon(0 0, 0% 0%, 0% 100%, 0% 100%);
      transform: translateX(-20%);
      scale: 0.5;
      transition: all 800ms var(--easeOutBounce) 1000ms;
    }

    @media only screen and (width <=768px) {
      &::before {
        inset-inline-start: calc((100 / 390) * 12 * 1vw);
        inline-size: calc((100 / 390) * 173 * 1vw);
        block-size: calc((100 / 390) * 146 * 1vw);
      }
    }

    &.on::before {
      clip-path: polygon(0 0, 100% 0%, 100% 100%, 0% 100%);
      transform: translateX(0);
      scale: 1;
    }

    .bar-chart-vertical {
      display: block grid;
      block-size: 100%;
      padding: 0;
    }

    /* バー列全体 */
    .bar-cols {
      position: relative;
      display: block flex;
      align-items: flex-end;
      justify-content: center;
      block-size: 100%;

      &::after {
        position: absolute;
        inset-block-end: 24px;
        inset-inline: 0;
        inline-size: 82%;
        block-size: 1px;
        margin-inline: auto;
        content: '';
        background: #001636;
      }

      @media only screen and (width <=768px) {
        &::after {
          inset-block-end: calc((100 / 390) * 24 * 1vw);
        }
      }
    }

    /* 1本分 */
    .bar-col {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-end;
      inline-size: 34px;
      height: 100%;
      padding-inline: 30px;

      @media only screen and (width <=768px) {
        inline-size: calc((100 / 390) * 16 * 1vw);
        padding-inline: calc((100 / 390) * 19 * 1vw);
      }
    }

    .bar-col-wrap {
      display: flex;
      flex-direction: column;
      gap: 10px;
      align-items: center;
      inline-size: 34px;

      @media only screen and (width <=768px) {
        gap: calc((100 / 390) * 10 * 1vw);
        inline-size: calc((100 / 390) * 22 * 1vw);
      }
    }

    .bar-value-label {
      gap: 0;
      justify-content: center;
      white-space: nowrap;
    }

    .count {
      font-family: 'Noto serif JP', serif;
      font-weight: 500;
    }

    .bar-bg {
      display: flex;
      align-items: flex-end;
      width: 100%;
    }

    .bar-fill {
      width: 100%;
      height: 1px;
      background-color: #dfe6f0;
      transition: block-size 1500ms ease var(--_delay);

      --_block-size: 170px;

      @media only screen and (width <=768px) {
        --_block-size: calc((100 / 390) * 170 * 1vw);
      }

      &[data-percent='21'] {
        --bar-height: calc((21 / 100) * var(--_block-size));
      }

      &[data-percent='31'] {
        --bar-height: calc((31 / 100) * var(--_block-size));
      }

      &[data-percent='42'] {
        --bar-height: calc((42 / 100) * var(--_block-size));
      }

      &[data-percent='53'] {
        --bar-height: calc((53 / 100) * var(--_block-size));
      }

      &[data-percent='68'] {
        --bar-height: calc((68 / 100) * var(--_block-size));
      }

      &[data-percent='79'] {
        --bar-height: calc((79 / 100) * var(--_block-size));
      }

      &[data-percent='100'] {
        --bar-height: calc((100 / 100) * var(--_block-size));
      }
    }

    .bar-fill.on {
      height: var(--bar-height, 1px);
    }

    /* 最新年（2025）だけ色を濃くする */
    .bar-fill[data-highlight='true'] {
      background-color: #88b7cc;
    }

    .bar-year {
      padding-block: 5px 7px;
      margin-block: calc((1em - 1lh) / 2);
      font-size: 12px;
      font-weight: 500;
      color: #6b8ea8;
      background: var(--gradation, linear-gradient(180deg, #001636 0%, #0c7db5 100%));
      background-clip: text;
      -webkit-text-fill-color: transparent;

      @media only screen and (width <=768px) {
        padding-block: calc((100 / 390) * 5 * 1vw) calc((100 / 390) * 7 * 1vw);
        font-size: calc((100 / 390) * 12 * 1vw);
      }
    }
  }

  /* ==== 女性役職者の割合 ==== */
  .unit[data-id='5'] {
    position: relative;
    display: block grid;

    /* ==== js-circle ==== */
    .js-circle {
      margin-inline: auto;

      &::after {
        position: absolute;
        inset-block-start: 50%;
        inset-inline-start: 50%;
        z-index: 3;
        inline-size: 100%;
        width: 35px;
        block-size: 100%;
        height: 48px;
        content: '';
        background-image: url('../../img/recruit/keyword/number_05.svg');
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        translate: -50% -50%;
      }

      @media only screen and (width <=768px) {
        &::after {
          width: calc((100 / 390) * 40 * 1vw);
          height: calc((100 / 390) * 53 * 1vw);
        }
      }
    }

    /* ==== num ==== */
    .num {
      position: absolute;
      inset-block-start: 34px;
      inset-inline-end: 40px;
      z-index: 2;

      @media only screen and (width <=768px) {
        inset-block-start: calc((100 / 390) * 34 * 1vw);
        inset-inline-end: calc((100 / 390) * 40 * 1vw);
      }
    }
  }

  /* ==== 出身都道府県 ==== */
  .unit[data-id='8'] {
    position: relative;
    isolation: isolate;

    &::before {
      position: absolute;
      inset-block: 73px;
      inset-inline: 20px 0;
      display: block flow;
      inline-size: 579px;
      block-size: 500px;
      margin-inline: auto;
      pointer-events: none;
      content: '';
      background-image: url('../../img/recruit/keyword/number_08.svg');
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;
    }

    @media only screen and (width <=768px) {
      &::before {
        inset-block: calc((100 / 390) * 20 * 1vw);
        inset-inline: calc((100 / 390) * 20 * 1vw);
        inline-size: calc((100 / 390) * 262 * 1vw);
        block-size: auto;
        aspect-ratio: 579/500;
      }
    }

    /* ==== wrap ==== */
    .item-num {
      position: relative;
      z-index: 2;
    }

    /* ==== count ==== */
    .count {
      font-family: 'Noto Serif JP', serif;
      font-weight: 500;
    }

    /* ==== num ==== */
    .num {
      position: absolute;
      margin-block: calc((1em - 1lh) / 2);

      span {
        margin-block: calc((1em - 1lh) / 2);
      }

      .title {
        margin-inline-end: 10px;
      }
    }

    .num[data-id='大阪'] {
      inset-block-start: 61px;
      inset-inline-start: 118px;

      @media only screen and (width <=768px) {
        inset-block-start: calc((100 / 390) * 14 * 1vw);
        inset-inline-start: calc((100 / 390) * 20 * 1vw);

        .count {
          font-size: calc((100 / 390) * 32 * 1vw);
        }

        .tani {
          font-size: calc((100 / 390) * 16 * 1vw);
        }
      }

      .title {
        margin-inline-end: 29px;

        @media only screen and (width <=768px) {
          margin-inline-end: calc((100 / 390) * 18 * 1vw);
          font-size: calc((100 / 390) * 18 * 1vw);
        }
      }
    }

    .num[data-id='兵庫'] {
      inset-block-start: 136px;
      inset-inline-start: 118px;

      @media only screen and (width <=768px) {
        inset-block-start: calc((100 / 390) * 50 * 1vw);
        inset-inline-start: calc((100 / 390) * 22 * 1vw);

        .count {
          font-size: calc((100 / 390) * 28 * 1vw);
        }

        .tani {
          font-size: calc((100 / 390) * 16 * 1vw);
        }
      }

      .title {
        margin-inline-end: 69px;

        @media only screen and (width <=768px) {
          margin-inline-end: calc((100 / 390) * 32 * 1vw);
          font-size: calc((100 / 390) * 16 * 1vw);
        }
      }
    }

    .num[data-id='中国地方'] {
      inset-block-start: 196px;
      inset-inline-start: 118px;

      @media only screen and (width <=768px) {
        inset-block-start: calc((100 / 390) * 79 * 1vw);
        inset-inline-start: calc((100 / 390) * 24 * 1vw);

        .count {
          font-size: calc((100 / 390) * 24 * 1vw);
        }

        .tani {
          font-size: calc((100 / 390) * 14 * 1vw);
        }
      }

      .title {
        margin-inline-end: 28px;

        @media only screen and (width <=768px) {
          margin-inline-end: calc((100 / 390) * 24 * 1vw);
          font-size: calc((100 / 390) * 16 * 1vw);
        }
      }
    }

    .num[data-id='京都'] {
      inset-block-start: 288px;
      inset-inline-start: 254px;

      @media only screen and (width <=768px) {
        inset-block-start: calc((100 / 390) * 116 * 1vw);
        inset-inline-start: calc((100 / 390) * 100 * 1vw);

        .count {
          font-size: calc((100 / 390) * 16 * 1vw);
        }

        .tani {
          font-size: calc((100 / 390) * 12 * 1vw);
        }

        .title {
          margin-inline-end: 0;
        }
      }
    }

    .num[data-id='四国'] {
      inset-block-start: 473px;
      inset-inline-start: 235px;

      @media only screen and (width <=768px) {
        inset-block-start: calc((100 / 390) * 202 * 1vw);
        inset-inline-start: calc((100 / 390) * 96 * 1vw);

        .count {
          font-size: calc((100 / 390) * 14 * 1vw);
        }

        .tani {
          font-size: calc((100 / 390) * 10 * 1vw);
        }

        .title {
          margin-inline-end: calc((100 / 390) * 0 * 1vw);
          font-size: calc((100 / 390) * 10 * 1vw);
        }
      }
    }

    .num[data-id='沖縄'] {
      inset-block-start: 540px;
      inset-inline-start: 205px;

      @media only screen and (width <=768px) {
        inset-block-start: calc((100 / 390) * 234 * 1vw);
        inset-inline-start: calc((100 / 390) * 76 * 1vw);

        .count {
          font-size: calc((100 / 390) * 14 * 1vw);
        }

        .tani {
          font-size: calc((100 / 390) * 10 * 1vw);
        }

        .title {
          margin-inline-end: calc((100 / 390) * 0 * 1vw);
          font-size: calc((100 / 390) * 10 * 1vw);
        }
      }
    }

    .num[data-id='滋賀'] {
      inset-block-start: 450px;
      inset-inline-start: 415px;

      @media only screen and (width <=768px) {
        inset-block-start: calc((100 / 390) * 194 * 1vw);
        inset-inline-start: calc((100 / 390) * 180 * 1vw);

        .count {
          font-size: calc((100 / 390) * 14 * 1vw);
        }

        .tani {
          font-size: calc((100 / 390) * 10 * 1vw);
        }

        .title {
          margin-inline-end: calc((100 / 390) * 0 * 1vw);
          font-size: calc((100 / 390) * 10 * 1vw);
        }
      }
    }

    .num[data-id='奈良'] {
      inset-block-start: 495px;
      inset-inline-start: 397px;

      @media only screen and (width <=768px) {
        inset-block-start: calc((100 / 390) * 214 * 1vw);
        inset-inline-start: calc((100 / 390) * 169 * 1vw);

        .count {
          font-size: calc((100 / 390) * 14 * 1vw);
        }

        .tani {
          font-size: calc((100 / 390) * 10 * 1vw);
        }

        .title {
          margin-inline-end: calc((100 / 390) * 0 * 1vw);
          font-size: calc((100 / 390) * 10 * 1vw);
        }
      }
    }

    .num[data-id='和歌山'] {
      inset-block-start: 542px;
      inset-inline-start: 375px;

      @media only screen and (width <=768px) {
        inset-block-start: calc((100 / 390) * 235 * 1vw);
        inset-inline-start: calc((100 / 390) * 162 * 1vw);

        .count {
          font-size: calc((100 / 390) * 14 * 1vw);
        }

        .tani {
          font-size: calc((100 / 390) * 10 * 1vw);
        }

        .title {
          margin-inline-end: calc((100 / 390) * 0 * 1vw);
          font-size: calc((100 / 390) * 10 * 1vw);
        }
      }
    }

    .num[data-id='福井'] {
      inset-block-start: 288px;
      inset-inline-start: 563px;

      @media only screen and (width <=768px) {
        inset-block-start: calc((100 / 390) * 120 * 1vw);
        inset-inline-start: calc((100 / 390) * 240 * 1vw);

        .count {
          font-size: calc((100 / 390) * 14 * 1vw);
        }

        .tani {
          font-size: calc((100 / 390) * 10 * 1vw);
        }

        .title {
          margin-inline-end: calc((100 / 390) * 0 * 1vw);
          font-size: calc((100 / 390) * 10 * 1vw);
        }
      }
    }

    .num[data-id='東京'] {
      inset-block-start: 378px;
      inset-inline-start: 563px;

      @media only screen and (width <=768px) {
        inset-block-start: calc((100 / 390) * 160 * 1vw);
        inset-inline-start: calc((100 / 390) * 232 * 1vw);

        .count {
          font-size: calc((100 / 390) * 14 * 1vw);
        }

        .tani {
          font-size: calc((100 / 390) * 10 * 1vw);
        }

        .title {
          margin-inline-end: calc((100 / 390) * 0 * 1vw);
          font-size: calc((100 / 390) * 10 * 1vw);
        }
      }
    }

    .num[data-id='東海地方'] {
      inset-block-start: 430px;
      inset-inline-start: 529px;

      @media only screen and (width <=768px) {
        inset-block-start: calc((100 / 390) * 183 * 1vw);
        inset-inline-start: calc((100 / 390) * 232 * 1vw);

        .count {
          font-size: calc((100 / 390) * 14 * 1vw);
        }

        .tani {
          font-size: calc((100 / 390) * 10 * 1vw);
        }

        .title {
          margin-inline-end: calc((100 / 390) * 0 * 1vw);
          font-size: calc((100 / 390) * 10 * 1vw);
        }
      }
    }
  }

  /* ==== 休日の過ごし方 ==== */
  .unit[data-id='9'] {
    position: relative;
    grid-template-rows: max-content auto;

    /* ==== item-num ==== */
    .item-num {
      position: relative;
      display: block grid;
      place-content: center;
      margin-block-start: 54px;

      @media only screen and (width <=768px) {
        margin-block-start: calc((100 / 390) * 54 * 1vw);
      }
    }

    .item {
      position: absolute;
      z-index: 2;
      text-align-last: left;

      /* ==== indoor ==== */
      &[data-id='1'] {
        inset-block-start: -15px;
        inset-inline-start: 33px;

        @media only screen and (width <=768px) {
          inset-block-start: calc((100 / 390) * -15 * 1vw);
          inset-inline-start: calc((100 / 390) * 33 * 1vw);
        }

        .num {
          padding-inline-start: 10px;

          @media only screen and (width <=768px) {
            padding-inline-start: calc((100 / 390) * 10 * 1vw);
          }
        }
      }

      /* ==== outdoor ==== */
      &[data-id='2'] {
        inset-block-end: -12px;
        inset-inline-end: 39px;

        @media only screen and (width <=768px) {
          inset-block-end: calc((100 / 390) * -12 * 1vw);
          inset-inline-end: calc((100 / 390) * 39 * 1vw);
        }

        .sub-title {
          padding-inline-start: 25px;

          @media only screen and (width <=768px) {
            padding-inline-start: calc((100 / 390) * 25 * 1vw);
          }
        }
      }

      .sub-title {
        margin-block: calc((1em - 1lh) / 2);
        text-align: right;
      }

      .count {
        margin-block: calc((1em - 1lh) / 2);
      }
    }

    /* ==== js-circle ==== */
    .js-circle {
      justify-content: center;
      margin-inline: auto;

      &::after {
        position: absolute;
        inset-block-start: 50%;
        inset-inline-start: 50%;
        z-index: 3;
        inline-size: 37px;
        block-size: 50px;
        pointer-events: none;
        content: '';
        background-image: url('../../img/recruit/keyword/number_09.svg');
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        translate: -50% -50%;
      }

      @media only screen and (width <=768px) {
        &::after {
          inline-size: calc((100 / 390) * 37 * 1vw);
          block-size: calc((100 / 390) * 50 * 1vw);
        }
      }
    }

    @media (width > 768px) {
      h4.title {
        translate: 0 -3px;

        @media only screen and (width <=768px) {
          translate: 0 calc((100 / 390) * -3 * 1vw);
        }
      }
    }
  }

  /* ==== 実家？一人暮らし？ ==== */
  .unit[data-id='10'] {
    position: relative;
    grid-template-rows: max-content auto;
    padding-block-start: 54px;

    @media only screen and (width <=768px) {
      padding-block-start: calc((100 / 390) * 54 * 1vw);
    }

    .item-num {
      margin-block-end: 40px;

      @media only screen and (width <=768px) {
        margin-block-end: calc((100 / 390) * 40 * 1vw);
      }
    }

    &::before {
      position: absolute;
      inset-block-start: 47px;
      inset-inline-start: 40px;
      inline-size: 65px;
      aspect-ratio: 1 / 1;
      pointer-events: none;
      content: '';
      background-image: url('../../img/recruit/keyword/number_10.svg');
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;
    }

    @media only screen and (width <=768px) {
      &::before {
        inset-block-start: calc((100 / 390) * 47 * 1vw);
        inset-inline-start: calc((100 / 390) * 40 * 1vw);
        inline-size: calc((100 / 390) * 65 * 1vw);
      }
    }

    /* ==== content ==== */
    .content {
      position: relative;

      --__background: #88b7cc;

      &[data-id='type-1'] {
        --__background: #dfe6f0;
        inline-size: 124px;
        margin-inline: auto 88px;

        @media only screen and (width <=768px) {
          inline-size: calc((100 / 390) * 124 * 1vw);
          margin-inline: auto calc((100 / 390) * 88 * 1vw);
        }

        .num {
          inset-block-start: -23px;
          inset-inline-end: -51px;

          @media only screen and (width <=768px) {
            inset-block-start: calc((100 / 390) * -23 * 1vw);
            inset-inline-end: calc((100 / 390) * -51 * 1vw);
          }
        }
      }

      &[data-id='type-2'] {
        inline-size: 80px;
        margin-block-start: -10px;
        margin-inline: 73px auto;

        @media only screen and (width <=768px) {
          inline-size: calc((100 / 390) * 80 * 1vw);
          margin-block-start: calc((100 / 390) * -10 * 1vw);
          margin-inline: calc((100 / 390) * 73 * 1vw) auto;
        }

        .num {
          inset-block-start: -5px;
          inset-inline-start: -33px;

          @media only screen and (width <=768px) {
            inset-block-start: calc((100 / 390) * -5 * 1vw);
            inset-inline-start: calc((100 / 390) * -33 * 1vw);
          }
        }
      }

      &[data-id='type-3'] {
        inline-size: 58px;
        margin-block-start: -77px;
        margin-inline: auto 58px;

        @media only screen and (width <=768px) {
          inline-size: calc((100 / 390) * 58 * 1vw);
          margin-block-start: calc((100 / 390) * -77 * 1vw);
          margin-inline: auto calc((100 / 390) * 58 * 1vw);
        }

        .num {
          inset-block-start: 21px;
          inset-inline-end: -25px;

          @media only screen and (width <=768px) {
            inset-block-start: calc((100 / 390) * 21 * 1vw);
            inset-inline-end: calc((100 / 390) * -25 * 1vw);
          }
        }
      }
    }

    /* ==== sub-title ==== */
    .sub-title {
      display: block grid;
      place-content: center;
      inline-size: var(--_inline-size);
      aspect-ratio: 1 / 1;
      padding-inline: 7px;
      font-size: 16px;
      background: var(--__background);
      border-radius: calc(infinity * 1px);

      @media only screen and (width <=768px) {
        padding-inline: calc((100 / 390) * 7 * 1vw);
        font-size: calc((100 / 390) * 16 * 1vw);
      }
    }

    .num {
      position: absolute;
      z-index: 2;
    }

    @media (width > 768px) {
      h4.title {
        translate: 0 -5px;

        @media only screen and (width <=768px) {
          translate: 0 calc((100 / 390) * -5 * 1vw);
        }
      }
    }
  }

  /* ==== 通勤時間 ==== */
  .unit[data-id='11'] {
    position: relative;

    /* ==== bar-icon ==== */
    .bar-icon {
      z-index: 2;
      inline-size: fit-content;
      pointer-events: none;
      translate: 26px 14px;

      @media only screen and (width <=768px) {
        translate: calc((100 / 390) * 4 * 1vw) calc((100 / 390) * 14 * 1vw);

        & img {
          inline-size: calc((100 / 390) * 64 * 1vw);
        }
      }
    }

    /* ==== wrap ==== */
    .bar-horizontal-wrap {
      display: flex;
      flex-direction: column;
      gap: 8px;
      padding: 42px 90px 42px 81px;

      @media only screen and (width <=768px) {
        gap: calc((100 / 390) * 8 * 1vw);
        padding-block: calc((100 / 390) * 64 * 1vw) calc((100 / 390) * 42 * 1vw);
        padding-inline: calc((100 / 390) * 16 * 1vw);
      }
    }

    /* ==== bar ==== */
    .bar-horizontal {
      display: flex;
      width: 100%;
      height: 48px;
      overflow: hidden;

      @media only screen and (width <=768px) {
        height: calc((100 / 390) * 48 * 1vw);
      }

      /* ==== bar section ==== */
      .bar-h-section {
        flex: 0 0 0;
      }

      .bar-h-fill {
        width: 100%;
        height: 100%;
      }
    }

    /* 文字ラベルエリア */
    .bar-h-labels {
      display: flex;
      width: 100%;
      margin-top: 8px;

      @media only screen and (width <=768px) {
        margin-top: calc((100 / 390) * 0 * 1vw);
      }

      /* 割合 */
      .bar-h-label-item {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: flex-start;

        .num {
          position: absolute;
        }
      }

      /* 時間 */
      .bar-h-label {
        position: absolute;
        inset-block-end: -33px;
        display: block flow;
        align-items: baseline;
        margin-block: calc((1em - 1lh) / 2);
        font-size: 24px;
        font-weight: 500;
        line-height: 1;
        color: var(--main);
        white-space: nowrap;

        @media only screen and (width <=768px) {
          inset-block-end: calc((100 / 390) * -33 * 1vw);
          font-size: calc((100 / 390) * 24 * 1vw);
        }
      }

      .bar-h-label-item[data-id='1'] {
        .num {
          inset-block-start: -110px;
          inset-inline-end: 22px;

          @media only screen and (width <=768px) {
            inset-block-start: calc((100 / 390) * -86 * 1vw);
            inset-inline-end: calc((100 / 390) * 8 * 1vw);

            .count {
              font-size: calc((100 / 390) * 36 * 1vw);
            }
          }
        }

        .bar-h-label {
          inset-inline-start: 14px;
          font-size: 32px;

          @media only screen and (width <=768px) {
            inset-inline-start: calc((100 / 390) * 14 * 1vw);
            font-size: calc((100 / 390) * 16 * 1vw);
            translate: 0 calc((100 / 390) * -6 * 1vw);
          }
        }
      }

      .bar-h-label-item[data-id='2'] {
        .num {
          inset-block-start: -107px;
          inset-inline-end: 8px;

          @media only screen and (width <=768px) {
            inset-block-start: calc((100 / 390) * -86 * 1vw);
            inset-inline-end: calc((100 / 390) * 8 * 1vw);

            .count {
              font-size: calc((100 / 390) * 36 * 1vw);
            }
          }
        }

        .bar-h-label {
          inset-inline-start: 18px;
          translate: 0 -6px;

          @media only screen and (width <=768px) {
            inset-inline-start: calc((100 / 390) * -6 * 1vw);
            font-size: calc((100 / 390) * 16 * 1vw);
            translate: 0 calc((100 / 390) * -6 * 1vw);
          }
        }
      }

      .bar-h-label-item[data-id='3'] {
        .num {
          inset-block-start: -107px;
          inset-inline-end: -20px;

          @media only screen and (width <=768px) {
            inset-block-start: calc((100 / 390) * -86 * 1vw);
            inset-inline-end: calc((100 / 390) * -8 * 1vw);

            .count {
              font-size: calc((100 / 390) * 36 * 1vw);
            }
          }
        }

        .bar-h-label {
          inset-inline-start: 20px;
          translate: 0 -6px;

          @media only screen and (width <=768px) {
            inset-inline-start: calc((100 / 390) * -12 * 1vw);
            font-size: calc((100 / 390) * 16 * 1vw);
            translate: 0 calc((100 / 390) * -6 * 1vw);
          }
        }
      }
    }
  }

  /* ==== 文系？理系？ ==== */
  .unit[data-id='12'] {
    position: relative;

    /* ==== wrap ==== */
    .item-num {
      display: block grid;
      grid-template-columns: repeat(3, 138px);
      justify-content: center;
      block-size: 264px;
      padding-block: 56px 13px;
      padding-inline: 50px;
      text-align: center;

      @media only screen and (width <=768px) {
        grid-template-columns: repeat(3, 1fr);
        padding-block: calc((100 / 390) * 56 * 1vw) calc((100 / 390) * 24 * 1vw);
        padding-inline: calc((100 / 390) * 24 * 1vw);
      }
    }

    /* ==== content ==== */
    .content {
      position: relative;
      display: block grid;
      gap: 14px;

      @media only screen and (width <=768px) {
        gap: calc((100 / 390) * 14 * 1vw);

        .img {
          inline-size: calc((100 / 390) * 67 * 1vw);
        }
      }
    }

    .content+.content {
      &::before {
        position: absolute;
        top: 50%;
        left: 0;
        display: block flow;
        inline-size: 1px;
        block-size: 200px;
        content: '';
        background-color: #dfe6f0;
        transform: translateY(-50%);
      }
    }

    .num {
      justify-content: center;

      @media only screen and (width <=768px) {
        .count {
          font-size: calc((100 / 390) * 40 * 1vw);
        }
      }
    }
  }

  /* ==== 血液型 ==== */
  .unit[data-id='13'] {
    background-image: url('../../img/recruit/keyword/number_13.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;

    .item-num {
      position: relative;
      block-size: 264px;

      @media only screen and (width <=768px) {
        block-size: calc((100 / 390) * 264 * 1vw);
      }

      .content {
        position: absolute;
      }

      .content[data-id='type-a'] {
        top: 53px;
        left: 67px;

        @media only screen and (width <=768px) {
          top: calc((100 / 390) * 53 * 1vw);
          left: calc((100 / 390) * 67 * 1vw);
        }

        .sub-title {
          margin-inline-start: 34px;

          @media only screen and (width <=768px) {
            margin-inline-start: calc((100 / 390) * 34 * 1vw);
          }
        }
      }

      .content[data-id='type-o'] {
        top: 51px;
        left: 305px;

        @media only screen and (width <=768px) {
          top: calc((100 / 390) * 65 * 1vw);
          left: calc((100 / 390) * 180 * 1vw);
        }

        .num {
          margin-inline-start: 29px;

          @media only screen and (width <=768px) {
            margin-inline-start: calc((100 / 390) * 29 * 1vw);
          }
        }
      }

      .content[data-id='type-ab'] {
        top: 177px;
        left: 41px;

        @media only screen and (width <=768px) {
          top: calc((100 / 390) * 177 * 1vw);
          left: calc((100 / 390) * 24 * 1vw);
        }

        .num {
          margin-inline-start: 11px;

          @media only screen and (width <=768px) {
            margin-inline-start: calc((100 / 390) * 11 * 1vw);
          }
        }
      }

      .content[data-id='type-b'] {
        top: 153px;
        left: 241px;

        @media only screen and (width <=768px) {
          top: calc((100 / 390) * 153 * 1vw);
          left: calc((100 / 390) * 141 * 1vw);
        }

        .sub-title {
          margin-inline-start: 6px;

          @media only screen and (width <=768px) {
            margin-inline-start: calc((100 / 390) * 6 * 1vw);
          }
        }
      }

      .content[data-id='type-x'] {
        top: 177px;
        left: 382px;

        @media only screen and (width <=768px) {
          top: calc((100 / 390) * 170 * 1vw);
          left: calc((100 / 390) * 242 * 1vw);
        }

        .num {
          margin-inline-start: 9px;

          @media only screen and (width <=768px) {
            margin-block-start: calc((100 / 390) * 9 * 1vw);
          }
        }
      }
    }
  }

  /* =====================
    block
  ===================== */
  .block {
    display: block grid;
    justify-content: space-between;
    margin-block-start: 20px;
  }

  /* Block */
  .block-1-2 {
    grid-template-columns: 333px 687px;

    @media only screen and (width <=768px) {
      grid-template-columns: 1fr;
      row-gap: calc((100 / 390) * 20 * 1vw);
    }
  }

  .block-15-15 {
    grid-template-columns: 514px 506px;

    @media only screen and (width <=768px) {
      grid-template-columns: 1fr;
      row-gap: calc((100 / 390) * 20 * 1vw);
    }
  }

  .block-1-1-1 {
    display: block grid;
    grid-template-columns: repeat(3, 333px);
    grid-row: span 2;
    align-items: start;

    @media only screen and (width <=768px) {
      grid-template-columns: 1fr;
      row-gap: calc((100 / 390) * 20 * 1vw);
    }

    .unit {
      grid-template-rows: max-content auto !important;
    }

    @media (width > 768px) {
      .block-1-1-1-wrap {
        margin-block-end: 5px;
      }

      h4.title {
        translate: 0 -3px;
      }
    }
  }

  .block-2-1-1 {
    grid-template-rows: repeat(2, max-content);
    grid-template-columns: 687px 333px;
    row-gap: 20px;

    @media only screen and (width <=768px) {
      grid-template-columns: 1fr;
    }

    .unit[data-id='8'] {
      grid-area: 1/1/3/2;
    }
  }

  .block-3 {
    grid-template-columns: 1fr;
  }
}

/* =====================
  data-type="circle-graph"
===================== */
.js-circle {
  --ratio: 0%;
  position: relative;
  z-index: 2;
  display: block grid;
  place-content: center;
  inline-size: var(--_inline-size);
  aspect-ratio: 1 / 1;
  container-type: inline-size;
  pointer-events: none;

  &::before {
    z-index: 3;
    inline-size: 59cqi;
    aspect-ratio: 1 / 1;
    margin-inline: auto;
    content: '';
    background-color: #fff;
    border-radius: calc(infinity * 1px);
  }

  :where(.left, .right) {
    position: absolute;
    inset: 0;
    z-index: 2;
    inline-size: var(--_inline-size);
    aspect-ratio: 1 / 1;
    border-radius: calc(infinity * 1px);
    animation-duration: 2000ms;
    animation-timing-function: cubic-bezier(0.72, -0.46, 0.53, 0.97);
    animation-delay: 0ms;
    animation-fill-mode: forwards;
  }

  .left {
    background-image: conic-gradient(from 180deg, #dfe6f0 var(--ratio), transparent var(--ratio) 100%);
    scale: 1 -1;
  }

  .right {
    background-image: conic-gradient(#88b7cc var(--ratio), transparent var(--ratio) 100%);
  }

  &.on .left {
    animation-name: circle-graph-left;
  }

  &.on .right {
    animation-name: circle-graph-right;
  }
}

/* =====================
  社員男女比
===================== */
.js-circle[data-id='gender-1'],
.js-circle[data-id='gender-2'] {
  --_inline-size: 152px;

  @media (width <=768px) {
    --_inline-size: calc((100 / 390) * 150 * 1vw);
  }
}

/* =====================
  女性役職者の割合
===================== */
.js-circle[data-id='female'] {
  --_inline-size: 185px;

  @media (width <=768px) {
    --_inline-size: calc((100 / 390) * 180 * 1vw);
  }
}

/* =====================
  女性役職者の割合
===================== */
.js-circle[data-id='holiday'] {
  --_inline-size: 185px;

  @media (width <=768px) {
    --_inline-size: calc((100 / 390) * 180 * 1vw);
  }
}

/* =====================
  animation
===================== */
[data-parallax='fade'] {
  opacity: 0;
  filter: blur(1rem);
  transition: all 1000ms var(--slideInBezier) var(--_delay, 0ms);

  &.on {
    opacity: 1;
    filter: blur(0);
  }
}

[data-parallax='slideUp'] {
  --_transition: transform 1s var(--slideInBezier), opacity 0.4s var(--slideInBezier);

  opacity: 0;
  transform: translateY(1.5rem);
  transition: var(--_transition);
  transition-delay: var(--_delay, 200ms), var(--_delay, 200ms);
  will-change: transform, opacity;

  &.on {
    opacity: 1;
    transform: translateY(0);
  }
}