@charset "utf-8";

@media (max-width: 890px) {
  .menu_common {
    display: none;
  }
}

@media (max-width: 768px) {
  .body-bg1.color02 {
    background-image: url(/recruit/assets/img/common/body-bg1-color02_sp.png);
    height: 101%;
  }
}

header .h_logo-group {
  .h_logo_link {
    .h_name {
      @media (max-width: 890px) {
        color: #15479E;
      }
    }
  }
}

/* ↓↓↓ main_wrap ↓↓↓ */
.main_wrap {
  display: flex;
  justify-content: center;
  width: calc(100vw - 230px);
  padding-block: 96px 120px;
  margin-left: auto;
  padding-right: 40px;
  padding-left: 20px;

  @media (max-width: 1034px) {
    padding-right: 30px;
    padding-left: 10px;
  }

  @media (max-width: 890px) {
    width: 100%;
    padding-inline: 16px;
  }

  @media (max-width: 768px) {
    width: 100%;
    padding: 80px 16px 96px
  }

  .container {
    position: relative;
    width: calc(869px + 48px * 2);
    max-width: 100%;
    background-color: #E9F1FF;
    border-radius: 12px;
    box-shadow: var(--shadow02);
    transform: translateZ(0px);
    overflow: clip;
    padding: 56px 48px 136px;

    @media (max-width: 1034px) {
      width: 100%;
    }

    @media (max-width: 890px) {
      width: 100%;
      max-width: 730px;
      border-radius: 12px;
      padding: 56px 16px 77px;
      margin: 0 auto;
    }

    @media (max-width: 768px) {
      width: 100%;
      border-radius: 12px;
      padding: 32px 16px 77px;
      margin: 0 auto;
    }

    .en_deco {
      position: absolute;
      width: 100%;
      left: 0;

      @media (max-width: 768px) {
        gap: 8px;
      }

      &.top {
        top: max(-0.75rem, (var(--vw) * -12));

        @media (max-width: 768px) {
          top: -8px;
        }
      }

      &.bottom {
        bottom: max(-0.625rem, (var(--vw) * -10));

        @media (max-width: 768px) {
          bottom: -8px;
        }
      }

      .splide__list {
        display: flex;
        will-change: transform;
        transition-timing-function: linear;
        transform: translateZ(0);
      }

      .en {
        /* width: fit-content; */
        font-size: 80px;
        font-family: var(--lato);
        font-weight: 900;
        line-height: 1;
        letter-spacing: 0;
        color: rgba(255, 255, 255, .56);

        @media (max-width: 768px) {
          font-size: 48px;
        }
      }
    }

    .container_ttl {
      position: relative;
      margin: 0 auto;
      z-index: 1;

      .sub {
        font-size: 14px;
        font-weight: 400;
        letter-spacing: 0.05em;
        text-align: center;

        @media (max-width: 768px) {
          font-size: 14px;
        }

        .num {
          font-family: var(--lato);
          letter-spacing: 0;
          margin-right: min(0.5rem, (var(--vw) * 8));

          @media (max-width: 768px) {
            margin-right: 8px;
          }
        }
      }

      .ttl {
        font-size: 40px;
        font-family: var(--shingoB);
        line-height: 1.2857142857142858;
        letter-spacing: 0;
        text-align: center;

        @media (max-width: 768px) {
          font-size: 28px;
          margin-top: 6px;
        }
      }
    }
  }
}

/* ↑↑↑ main_wrap ↑↑↑ */
/* ↓↓↓ content ↓↓↓ */
.content {
  margin-top: 40px;
  @media (max-width: 1200px) {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }
  @media (max-width: 1034px) {
    flex-direction: column;
    margin-top: 37px;
  }
  @media (max-width: 890px) {
    flex-direction: row;
  }
  @media (max-width: 768px) {
    flex-direction: column;
    margin-top: 40px;
  }
  .card_group {
    display: flex;
    gap: min(1rem, (var(--vw) * 16));
    @media (max-width: 1200px),(max-width: 890px) {
      display: contents;
      gap: 10px;
    }
    @media (max-width: 768px) {
      flex-direction: column;
      gap: 10px;
    }
    + .card_group {
      margin-top: min(1rem, (var(--vw) * 16));
      @media (max-width: 1200px),(max-width: 890px) {
        gap: 10px;
      }
      @media (max-width: 768px) {
        margin-top: 10px;
      }
    } 
    .wrap {
      width: 66.053%;
      @media (max-width: 1200px) {
        display: flex;
        gap: 10px;
        width: 100%;
      }
      @media (max-width: 1034px) {
        flex-direction: column;
        width: 100%;
      }
      @media (max-width: 890px) {
        flex-direction: row;
      }
      @media (max-width: 768px) {
        flex-direction: column;
        width: 100%;
      }
      .card {
        width: 100%;
        @media (max-width: 1200px) {
          width: calc((100% - 10px) / 2);
        }
        @media (max-width: 1034px) {
          width: 100%;
        }
        @media (max-width: 890px) {
          width: calc((100% - 10px) / 2);
        }
        @media (max-width: 768px) {
          width: 100%;
        }
        + .card {
          margin-top: min(1rem, (var(--vw) * 16));
          @media (max-width: 1200px),(max-width: 890px) {
            margin-top: 0;
          }
          @media (max-width: 768px) {
            margin-top: 0;
          }
        }
      }
    }
    .card {
      width: 32.106%;
      padding: min(1.5rem, (var(--vw) * 24)) min(2rem, (var(--vw) * 32)) min(2rem, (var(--vw) * 32));
      background-color: #fff;
      border-radius: 12px;
      @media (max-width: 1023px) {
        width: 100%;
      }
      @media (max-width: 1200px) {
        width: calc((100% - 10px) / 2);
        padding: 24px;
        border-radius: 8px;
      }
      @media (max-width: 1034px) {
        width: 100%;
        padding: 24px;
        border-radius: 8px;
      }
      @media (max-width: 890px) {
        width: calc((100% - 10px) / 2);
        padding: 24px;
        border-radius: 8px;
      }
      @media (max-width: 768px) {
        width: 100%;
        padding: 24px;
        border-radius: 8px;
      }
      &.-newgrad {
        padding:  min(1.5rem, (var(--vw) * 24)) min(1.4375rem, (var(--vw) * 23)) min(2rem, (var(--vw) * 32));
        @media (max-width: 1200px),(max-width: 890px) {
          padding: 20px 24px;
        }
        @media (max-width: 768px) {
          padding: 20px 24px;
        }

        .img_wrap {
          position: relative;
          width: min(13.4375rem, (var(--vw) * 215));
          aspect-ratio: 215 / 153;
          margin: 0 auto;
          @media (max-width: 1200px),(max-width: 890px) {
            width: 215px;
          }
          @media (max-width: 768px) {
            width: 215px;
          }
          .bg {
            position: absolute;
            translate: -50% -50%;
            top: 50%;
            left: 50%;
            width: min(9rem, (var(--vw) * 144));
            height: min(8.25rem, (var(--vw) * 132));
            @media (max-width: 1200px),(max-width: 890px) {
              width: 144px;
              height: 132px;
            }
            @media (max-width: 768px) {
              width: 144px;
              height: 132px;
            }
          }
          .people01, .people02 {
            position: absolute;
            translate: -50% 0;
            left: 50%;
            width: min(9rem, (var(--vw) * 144));
            height: min(4.125rem, (var(--vw) * 66));
            @media (max-width: 1200px),(max-width: 890px) {
              width: 144px;
              height: 66px;
            }
            @media (max-width: 768px) {
              width: 144px;
              height: 66px;
            }
          }
          .people03, .people04 {
            position: absolute;
            translate: -50% 0;
            left: 50%;
            bottom: 0;
            width: min(9rem, (var(--vw) * 144));
            height: min(4.125rem, (var(--vw) * 66));
            @media (max-width: 1200px),(max-width: 890px) {
              width: 144px;
              height: 66px;
            }
            @media (max-width: 768px) {
              width: 144px;
              height: 66px;
            }
          }
          .people01 {
            top: min(0.625rem, (var(--vw) * 10));
            clip-path: inset(0 100% 0 0);
            /* transition: clip-path 300ms ease; */
            transition: clip-path 400ms ease;
            @media (max-width: 1200px),(max-width: 890px) {
              top: 10px;
            }
            @media (max-width: 768px) {
              top: 10px;
            }
          }
          .people03 {
            bottom: min(0.625rem, (var(--vw) * 10));
            clip-path: inset(0 100% 0 0);
            transition: clip-path 200ms 300ms ease;
            @media (max-width: 1200px),(max-width: 890px) {
              bottom: 10px;
            }
            @media (max-width: 768px) {
              bottom: 10px;
            }
          }
          .people04 {
            bottom: min(0.625rem, (var(--vw) * 10));
            clip-path: inset(0 0 0 100%);
            transition: clip-path 600ms ease;
            @media (max-width: 1200px),(max-width: 890px) {
              bottom: 10px;
            }
            @media (max-width: 768px) {
              bottom: 10px;
            }
          }
          .people02 {
            bottom: min(0.625rem, (var(--vw) * 10));
            -webkit-mask-image: linear-gradient(
              to right,
              #000 var(--mask-size, 0%),
              transparent var(--mask-size, 0%),
              transparent calc(100% - var(--mask-size, 0%)),
              #000 calc(100% - var(--mask-size, 0%))
            );
            mask-image: linear-gradient(
              to right,
              #000 var(--mask-size, 0%),
              transparent var(--mask-size, 0%),
              transparent calc(100% - var(--mask-size, 0%)),
              #000 calc(100% - var(--mask-size, 0%))
            );
            transition: --mask-size 300ms 300ms ease;
            @media (max-width: 1200px),(max-width: 890px) {
              bottom: 10px;
            }
            @media (max-width: 768px) {
              bottom: 10px;
            }
          }
        }
        &.-active {
          .img_wrap {
            .people01 {
              clip-path: inset(0 0 0 0);
            }
            .people02 {
              --mask-size: 50%;
              clip-path: inset(0 0 0 0);
            }
            .people03 {
              clip-path: inset(0 50% 0 0);
            }
            .people04 {
              clip-path: inset(0 0 0 50%);
            }
          }
        }
      }

      &.-newgrad {
        padding:  min(1.5rem, (var(--vw) * 24)) min(1.4375rem, (var(--vw) * 23)) min(2rem, (var(--vw) * 32));
        @media (max-width: 1200px),(max-width: 890px) {
          padding: 24px;
        }
        @media (max-width: 768px) {
          padding: 24px;
        }

        .img_wrap {
          position: relative;
          width: min(13.4375rem, (var(--vw) * 215));
          aspect-ratio: 215 / 153;
          margin: 24px auto 10px;
          @media (max-width: 1200px),(max-width: 890px) {
            width: 215px;
            margin: 10px auto 5px;
          }
          @media (max-width: 768px) {
            width: 215px;
            margin: 10px auto 5px;
          }
          .bg {
            position: absolute;
            translate: -50% -50%;
            top: 50%;
            left: 50%;
            width: min(9rem, (var(--vw) * 144));
            height: min(8.25rem, (var(--vw) * 132));
            @media (max-width: 1200px),(max-width: 890px) {
              width: 144px;
              height: 132px;
            }
            @media (max-width: 768px) {
              width: 144px;
              height: 132px;
            }
          }
          .people01 {
            position: absolute;
            translate: -50% 0;
            left: 50%;
            width: min(9rem, (var(--vw) * 144));
            height: min(4.125rem, (var(--vw) * 66));
            @media (max-width: 1200px),(max-width: 890px) {
              width: 144px;
              height: 66px;
            }
            @media (max-width: 768px) {
              width: 144px;
              height: 66px;
            }
          }
          .people02, .people03 {
            position: absolute;
            translate: -50% 0;
            left: 50%;
            bottom: 0;
            width: min(9rem, (var(--vw) * 144));
            height: min(4.125rem, (var(--vw) * 66));
            @media (max-width: 1200px),(max-width: 890px) {
              width: 144px;
              height: 66px;
            }
            @media (max-width: 768px) {
              width: 144px;
              height: 66px;
            }
          }
          .people01 {
            top: min(0.625rem, (var(--vw) * 10));
            clip-path: inset(0 100% 0 0);
            /* transition: clip-path 300ms ease; */
            transition: clip-path 700ms ease;
            @media (max-width: 1200px),(max-width: 890px) {
              top: 10px;
            }
            @media (max-width: 768px) {
              top: 10px;
            }
          }
          .people02 {
            bottom: min(0.625rem, (var(--vw) * 10));
            clip-path: inset(0 100% 0 0);
            transition: clip-path 300ms 650ms ease;
            @media (max-width: 1200px),(max-width: 890px) {
              bottom: 10px;
            }
            @media (max-width: 768px) {
              bottom: 10px;
            }
          }
          .people03 {
            bottom: min(0.625rem, (var(--vw) * 10));
            clip-path: inset(0 0 0 100%);
            transition: clip-path 1000ms ease;
            @media (max-width: 1200px),(max-width: 890px) {
              bottom: 10px;
            }
            @media (max-width: 768px) {
              bottom: 10px;
            }
          }
        }
        &.-active {
          .img_wrap {
            .people01 {
              clip-path: inset(0 0 0 0);
            }
            .people02 {
              clip-path: inset(0 50% 0 0);
            }
            .people03 {
              clip-path: inset(0 0 0 50%);
            }
          }
        }
      }
      
      &.-career {
        width: min(35.875rem, (var(--vw) * 574));
        @media (max-width: 1200px) {
          width: calc((100% - 10px) / 2);
        }
        @media (max-width: 1034px) {
          width: 100%;
        }
        @media (max-width: 890px) {
          width: calc((100% - 10px) / 2);
        }
        @media (max-width: 768px) {
          width: 100%;
        }
        .graph_group {
          position: relative;
          margin-top: min(4.875rem, (var(--vw) * 78));
          @media (max-width: 1200px),(max-width: 890px) {
            width: 263px;
            margin-top: 36px;
            margin-inline: auto;
          }
          @media (max-width: 768px) {
            width: 263px;
            margin-top: 36px;
            margin-inline: auto;
          }
          .graph_head {
            position: absolute;
            top: max(-2.9375rem, (var(--vw) * -47));
            font-size: max(min(1rem, (var(--vw) * 16)), 0.625rem);
            font-family: var(--shingoB);
            padding-left: min(2.125rem, (var(--vw) * 34));
            letter-spacing: 0.05em;
            @media (max-width: 1200px),(max-width: 890px) {
              top: -34px;
              font-size: 14px;
              padding-left: 30px;
            }
            @media (max-width: 768px) {
              top: -34px;
              font-size: 14px;
              padding-left: 30px;
            }
            &::before {
              content: '';
              position: absolute;
              top: min(0.875rem, (var(--vw) * 14));
              left: 0;
              width: min(1.875rem, (var(--vw) * 30));
              height: min(1.9375rem, (var(--vw) * 31));
              @media (max-width: 1200px),(max-width: 890px) {
                top: 11px;
                left: 0;
                width: 28px;
                height: 22px;
              }
              @media (max-width: 768px) {
                top: 11px;
                left: 0;
                width: 28px;
                height: 22px;
              }
            }
            &:nth-of-type(1) {
              left: min(6.875rem, (var(--vw) * 110));
              @media (max-width: 1200px),(max-width: 890px) {
                left: 64px;
              }
              @media (max-width: 768px) {
                left: 64px;
              }
              &::before {
                background: url(/recruit/assets/img/company/data/career_deco01.svg);
                background-size: cover;
                @media (max-width: 1200px),(max-width: 890px) {
                  background: url(/recruit/assets/img/company/data/career_deco01_sp.svg);
                  background-size: cover;
                }
                @media (max-width: 768px) {
                  background: url(/recruit/assets/img/company/data/career_deco01_sp.svg);
                  background-size: cover;
                }
              }
            }
            &:nth-of-type(2) {
              left: min(16.25rem, (var(--vw) * 260));
              @media (max-width: 1200px),(max-width: 890px) {
                left: 160px;
              }
              @media (max-width: 768px) {
                left: 160px;
              }
              &::before {
                background: url(/recruit/assets/img/company/data/career_deco02.svg);
                background-size: cover;
                @media (max-width: 1200px),(max-width: 890px) {
                  background: url(/recruit/assets/img/company/data/career_deco02_sp.svg);
                  background-size: cover;
                }
                @media (max-width: 768px) {
                  background: url(/recruit/assets/img/company/data/career_deco02_sp.svg);
                  background-size: cover;
                }
              }
            }
          }
          .graph {
            display: flex;
            align-items: center;
            gap: min(0.5rem, (var(--vw) * 8));
            @media (max-width: 1200px),(max-width: 890px) {
              gap: 4px;
            }
            @media (max-width: 768px) {
              gap: 4px;
            }
            + .graph {
              margin-top: min(0.5rem, (var(--vw) * 8));
              @media (max-width: 1200px),(max-width: 890px) {
                margin-top: 8px;
              }
              @media (max-width: 768px) {
                margin-top: 8px;
              }
            }
            .graph_year {
              width: max-content;
              font-size: max(min(1.25rem, (var(--vw) * 20)), 0.625rem);
              font-weight: 900;
              font-family: var(--lato);
              @media (max-width: 1200px),(max-width: 890px) {
                font-size: 10px;
                letter-spacing: 0;
              }
              @media (max-width: 768px) {
                font-size: 10px;
                letter-spacing: 0;
              }
              span {
                font-size: max(min(0.875rem, (var(--vw) * 14)), 0.625rem);
                font-family: var(--shingoB);
                padding-left: min(0.25rem, (var(--vw) * 4));
                @media (max-width: 1200px),(max-width: 890px) {
                  font-size: 10px;
                  padding-left: 0;
                  letter-spacing: 0;
                }
                @media (max-width: 768px) {
                  font-size: 10px;
                  padding-left: 0;
                  letter-spacing: 0;
                }
              }
            }
            .graph_bar {
              position: relative;
              flex: 1;
              width: 100%;
              height: min(4.1875rem, (var(--vw) * 67));
              z-index: 0;
              @media (max-width: 1200px),(max-width: 890px) {
                flex: none;
                width: 213px;
                height: 32px;
              }
              @media (max-width: 768px) {
                flex: none;
                width: 213px;
                height: 32px;
              }
              .data_wrap {
                position: relative;
                z-index: 1;
                justify-content: flex-start;
                @media (max-width: 1200px),(max-width: 890px) {
                  align-items: flex-end;
                }
                @media (max-width: 768px) {
                  align-items: flex-end;
                }
                .num {
                  font-size: min(2rem, (var(--vw) * 32));
                  @media (max-width: 1200px),(max-width: 890px) {
                    font-size: 24px;
                    line-height: 1;
                  }
                  @media (max-width: 768px) {
                    font-size: 24px;
                    line-height: 1;
                  }
                }
                .unit {
                  font-size: max(min(0.875rem, (var(--vw) * 14)), 0.625rem);
                  @media (max-width: 1200px),(max-width: 890px) {
                    font-size: 12px;
                    padding-left: 0;
                    line-height: 1.5;
                  }
                  @media (max-width: 768px) {
                    font-size: 12px;
                    padding-left: 0;
                    line-height: 1.5;
                  }
                }
              }
              .career_bar, .newgrad_bar {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                align-items: center;
                height: 100%;
                color: #fff;
                z-index: -1;
                display: flex;
                align-items: center;
              }
              .career_bar {
                padding-left: min(2.5rem, (var(--vw) * 40));
                @media (max-width: 1200px),(max-width: 890px) {
                  padding-left: 0;
                  justify-content: center;
                }
                @media (max-width: 768px) {
                  padding-left: 0;
                  justify-content: center;
                }
                &::before {
                  content: '';
                  position: absolute;
                  top: 0;
                  left: 0;
                  width: 100%;
                  height: 100%;
                  box-sizing: border-box;
                  border: min(0.125rem, (var(--vw) * 2)) solid #0026D5;
                  background-color: #FC5B01;
                  scale: 0 1;
                  transition: scale 700ms ease;
                  transform-origin: left;
                  @media (max-width: 1200px),(max-width: 890px) {
                    border: 2px solid #0026D5;
                  }
                  @media (max-width: 768px) {
                    border: 2px solid #0026D5;
                  }
                }
              }
              .newgrad_bar {
                left: unset;
                right: 0;
                padding-right: min(6.125rem, (var(--vw) * 98));
                justify-content: flex-end;
                @media (max-width: 1200px),(max-width: 890px) {
                  padding-right: 60px;
                }
                @media (max-width: 768px) {
                  padding-right: 60px;
                }

                &::before {
                  content: '';
                  position: absolute;
                  top: 0;
                  left: 0;
                  width: 100%;
                  height: 100%;
                  box-sizing: border-box;
                  background-color: #0026D5;
                  scale: 0 1;
                  transition: scale 500ms ease;
                  transform-origin: right;
                }

              }
            }
            &:nth-of-type(1) {
              .graph_bar {
                .career_bar {
                  width: 30%;
                  @media (max-width: 1200px),(max-width: 890px) {
                    width: 51px;
                  }
                  @media (max-width: 768px) {
                    width: 51px;
                  }
                }
                .newgrad_bar {
                  width: 70%;
                  @media (max-width: 1200px),(max-width: 890px) {
                    width: calc(100% - 51px);
                  }
                  @media (max-width: 768px) {
                    width: calc(100% - 51px);
                  }
                }
                .career_bar, .newgrad_bar {
                  &::before {
                    transition-delay: 300ms;
                  }
                }
              }
            }
            &:nth-of-type(2) {
              .graph_bar {
                .career_bar {
                  width: 40%;
                  @media (max-width: 1200px),(max-width: 890px) {
                    width: 68px;
                  }
                  @media (max-width: 768px) {
                    width: 68px;
                  }
                }
                .newgrad_bar {
                  width: 60%;
                  @media (max-width: 1200px),(max-width: 890px) {
                    width: calc(100% - 68px);
                  }
                  @media (max-width: 768px) {
                    width: calc(100% - 68px);
                  }
                }
                .career_bar, .newgrad_bar {
                  &::before {
                    transition-delay: 500ms;
                  }
                }
              }
            }
            &:nth-of-type(3) {
              .graph_bar {
                .career_bar {
                  width: 49%;
                  @media (max-width: 1200px),(max-width: 890px) {
                    width: 85px;
                  }
                  @media (max-width: 768px) {
                    width: 85px;
                  }
                }
                .newgrad_bar {
                  width: 51%;
                  @media (max-width: 1200px),(max-width: 890px) {
                    width: calc(100% - 85px);
                  }
                  @media (max-width: 768px) {
                    width: calc(100% - 85px);
                  }
                }
                .career_bar, .newgrad_bar {
                  &::before {
                    transition-delay: 700ms;
                  }
                }
              }
            }
          }
        }
        .attention {
          font-size: 10px;
          margin-top: min(2rem, (var(--vw) * 32));
          @media (max-width: 1200px),(max-width: 890px) {
            margin-top: 12px;
            text-align: center;
          }
          @media (max-width: 768px) {
            margin-top: 12px;
            text-align: center;
          }
        }
        &.-active {
          .graph_group {
            .graph_bar {
              .career_bar, .newgrad_bar {
                &::before {
                  scale: 1 1;
                }
              }
            }
          }
        }
      }
      .date {
        font-size: max(min(0.625rem, (var(--vw) * 10)), 0.625rem);
        text-align: center;
        margin-top: min(0.8125rem, (var(--vw) * 13));
        @media (max-width: 1200px),(max-width: 890px) {
          font-size: 10px;
          margin-top: 6px;
          + .graph_group {
            margin-top: 50px;
          }
        }
        @media (max-width: 768px) {
          font-size: 10px;
          margin-top: 6px;
        }
      }
      @media (max-width: 1200px),(max-width: 890px) {
        .date + .graph_group {
          margin-top: 50px;
        }
      }
      .head {
        width: fit-content;
        font-family: var(--shingoB);
        font-size: 14px;
        line-height: 1;
        color: #00497B;
        padding: 8px 16px;
        background-color: #D0E4FF;
        margin: 0 auto;
        border-radius: 18px;
        @media (max-width: 1200px),(max-width: 890px) {
          font-size: 14px;
          padding: 6px 16px;
          border-radius: 18px;
        }
        @media (max-width: 768px) {
          font-size: 14px;
          padding: 6px 16px;
          border-radius: 18px;
        }
      }
      .data_group {
        @media (max-width: 1200px),(max-width: 890px) {
          display: flex;
          justify-content: center;
          gap: 6px;
        }
        @media (max-width: 768px) {
          display: flex;
          justify-content: center;
          gap: 6px;
        }
      }
      .data_wrap {
        display: flex;
        align-items: flex-end;
        justify-content: center;
        + .data_wrap {
          margin-top: min(0.3125rem, (var(--vw) * 5));
          @media (max-width: 1200px),(max-width: 890px) {
            margin-top: 5px;
          }
          @media (max-width: 768px) {
            margin-top: 5px;
          }
        } 
        .num {
          position: relative;
          font-size: max(min(3.5000000000000004rem, (var(--vw) * 56)), 48px);
          font-weight: 900;
          font-family: var(--lato);
          letter-spacing: 0;
          @media (max-width: 1200px),(max-width: 890px) {
            font-size: 40px;
          }
          @media (max-width: 768px) {
            font-size: 40px;
          }
          &.-large {
            font-size: min(4.5rem, (var(--vw) * 72));
            @media (max-width: 1200px),(max-width: 890px) {
              font-size: 56px;
              &.-sp_small {
                font-size: 40px;
              }
            }
            @media (max-width: 768px) {
              font-size: 56px;
              &.-sp_small {
                font-size: 40px;
              }
            }
          }
          .decimal {
            font-size: max(min(3.5000000000000004rem, (var(--vw) * 56)), 48px);
            @media (max-width: 1200px),(max-width: 890px) {
              font-size: 40px;
            }
            @media (max-width: 768px) {
              font-size: 40px;
            }
          }
          &::before {
            content: attr(data-num);
            color: transparent;
          }
          .txt {
            position: absolute;
            text-align: right;
            top: 0;
            right: 0;
          }

          +.unit {
            padding-left: min(0.3125rem, (var(--vw) * 5));
            @media (max-width: 1200px),(max-width: 890px) {
              padding-left: 5px;
            }
            @media (max-width: 768px) {
              padding-left: 5px;
            }
          }
        }
        .unit {
          font-size: min(1.75rem, (var(--vw) * 28));
          font-family: var(--shingoB); 
          @media (max-width: 1200px),(max-width: 890px) {
            font-size: 20px;
          }
          @media (max-width: 768px) {
            font-size: 20px;
          }
          &.-small {
            font-size: max(min(1.25rem, (var(--vw) * 20)), 16px);
            @media (max-width: 1200px),(max-width: 890px) {
              font-size: 20px;
            }
            @media (max-width: 768px) {
              font-size: 20px;
            }
          }
          &.-row {
            writing-mode: vertical-lr;
            line-height: 1;
            letter-spacing: 0.1em;
            padding-bottom: min(0.625rem, (var(--vw) * 10));
            @media (max-width: 1200px),(max-width: 890px) {
              font-size: 16px;
              padding-bottom: 5px;
              padding-right: 5px;
            }
            @media (max-width: 768px) {
              font-size: 16px;
              padding-bottom: 5px;
              padding-right: 5px;
            }
          }
          + .num {
            padding-left: min(0.3125rem, (var(--vw) * 5));
            @media (max-width: 1200px),(max-width: 890px) {
              padding-left: 5px;
            }
            @media (max-width: 768px) {
              padding-left: 5px;
            }
          }
        }
        .colon {
          font-size: max(min(2.3125rem, (var(--vw) * 37)), 30px);
          font-family: var(--lato);
          padding-inline: min(0.3125rem, (var(--vw) * 5));
          padding-bottom: min(0.875rem, (var(--vw) * 14));
          @media (max-width: 1200px),(max-width: 890px) {
            font-size: 37px;
            padding-inline: 5px;
            padding-bottom: 5px;
          }
          @media (max-width: 768px) {
            font-size: 37px;
            padding-inline: 5px;
            padding-bottom: 5px;
          }
        }
      }
      .img {
        width: min(13.4375rem, (var(--vw) * 215));
        height: fit-content;
        margin-top: min(1.125rem, (var(--vw) * 18));
        margin-inline: auto;
        @media (max-width: 1200px),(max-width: 890px) {
          width: 100%;
          margin-top: 8px;
          img {
            display: block;
            margin: 0 auto;
            width: 215px; 
          }
        }
        @media (max-width: 768px) {
          width: 100%;
          margin-top: 8px;
          img {
            display: block;
            margin: 0 auto;
            width: 215px; 
          }
        }
        + .data_wrap {
          margin-top: min(0.3125rem, (var(--vw) * 5));
          @media (max-width: 1200px),(max-width: 890px) {
            width: 100%;
            margin-top: 8px;
          }
          @media (max-width: 768px) {
            width: 100%;
            margin-top: 8px;
          }
        } 
      }
      .flex {
        display: flex;
        margin-top: 16px;
        @media (max-width: 1200px),(max-width: 890px) {
          flex-wrap: wrap;
          justify-content: center;
          margin-top: 8px;
        }
        @media (max-width: 768px) {
          flex-wrap: wrap;
          justify-content: center;
          margin-top: 8px;
        }
        .base {
          margin-right: min(1rem, (var(--vw) * 16));
          @media (max-width: 1200px),(max-width: 890px) {
            width: fit-content;
            order: 2;
            margin-right: 45px;
          }
          @media (max-width: 768px) {
            width: fit-content;
            order: 2;
            margin-right: 45px;
          }
          .branch {
            font-size: 16px;
            line-height: 1.625;
            letter-spacing: 0.05em;
            @media (max-width: 1200px),(max-width: 890px) {
              font-size: 16px;
              line-height: 1.625;
              letter-spacing: 0.05em;
            }
            @media (max-width: 768px) {
              width: fit-content;
              font-size: 14px;
              line-height: 1.4;
            }
          }
          .data_wrap {
            @media (max-width: 1200px),(max-width: 890px) {
              width: fit-content;
              justify-content: flex-start;
            }
            @media (max-width: 768px) {
              width: fit-content;
              justify-content: flex-start;
            }
          }
        }
        .facility {
          margin-top: min(1.875rem, (var(--vw) * 30));
          @media (max-width: 1200px),(max-width: 890px) {
            width: fit-content;
            order: 3;
            margin-top: 0;
          }
          @media (max-width: 768px) {
            width: fit-content;
            order: 3;
            margin-top: 0;
          }
          .facility_txt {
            font-size: max(min(1rem, (var(--vw) * 16)), 14px);
            font-family: var(--shingoB);
            letter-spacing: 0.05em;
            line-height: 1.25;
            @media (max-width: 1200px),(max-width: 890px) {
              width: fit-content;
              font-size: 14px;
            }
            @media (max-width: 768px) {
              width: fit-content;
              font-size: 14px;
            }
          }
          .data_wrap {
            justify-content: center;
            @media (max-width: 1200px),(max-width: 890px) {
              width: fit-content;
              margin: 0 auto;
            }
            @media (max-width: 768px) {
              width: fit-content;
              margin: 0 auto;
            }
          }
        }
        .img {
          margin: 0;
        }
        .data_wtap {
          margin: 0;
        } 
      }

      .card_txt {
        font-size: 14px;
        margin-top: 16px;
        line-height: 1.857142;
        text-align: justify;
        word-break: break-all;
        @media (max-width: 1200px),(max-width: 890px) {
          width: fit-content;
          font-size: 12px;
          margin: 16px auto 0;
          max-width: 500px;
        }
        @media (max-width: 768px) {
          width: fit-content;
          font-size: 12px;
          margin: 16px auto 0;
          max-width: 500px;
        }
      }
      
      .txt01 {
        font-size: max(min(1.25rem, (var(--vw) * 20)), 0.625rem);
        font-family: var(--shingoB);
        text-align: center;
        letter-spacing: 0.05em;
        line-height: 1;
        
        @media (max-width: 1200px),(max-width: 890px) {
          font-size: 16px;
          height: fit-content;
          line-height: 1.2;
          padding-top: 5px;
          .-sp {
            display: block;
          }
        }
        @media (max-width: 768px) {
          font-size: 16px;
          height: fit-content;
          line-height: 1.2;
          padding-top: 5px;
        }
      }

      .txt02 {
        font-size: max(min(1rem, (var(--vw) * 16)), 0.625rem);
        font-family: var(--shingoB);
        text-align: center;
        letter-spacing: 0.05em;
        line-height: 1;
        @media (max-width: 1200px),(max-width: 890px) {
          font-size: 14px;
          margin-top: 5px;
        }
        @media (max-width: 768px) {
          font-size: 14px;
          margin-top: 5px;
        }
      }

      &.-group {
        .img {
          width: min(22.6875rem, (var(--vw) * 363));
          @media (max-width: 1200px),(max-width: 890px) {
            width: 100%;
            img {
              display: block;
              width: 215px;
              margin: 0 auto;
            }
          }
          @media (max-width: 768px) {
            width: 100%;
            img {
              display: block;
              width: 215px;
              margin: 0 auto;
            }
          }
        }
        .flex {
          align-items: center;
          justify-content: space-between;
          @media (max-width: 1200px) {
            flex-direction: column-reverse;
            gap: 30px;
            margin-top: 20px;
          }
          @media (max-width: 1034px) {
            gap: 0;
          }
          @media (max-width: 890px) {
            flex-direction: column-reverse;
            gap: 30px;
            margin-top: 20px;
          }
          @media (max-width: 768px) {
            flex-direction: column-reverse;
            gap: 0;
          }
        } 
      }

      &.-newgrad {
        .data_wrap {
          .unit {
            + .num {
              padding-left: 0;
            }
          }
          .num {
            +.unit {
              padding-left: 0;
            }
          }
        } 
      }
    }
    &.-two {
      .card {
        width: min(26.687499999999996rem, (var(--vw) * 427));
        @media (max-width: 1200px) {
          width: calc((100% - 10px) / 2);
        }
        @media (max-width: 1034px) {
          width: 100%;
        }
        @media (max-width: 890px) {
          width: calc((100% - 10px) / 2);
        }
        @media (max-width: 768px) {
          width: 100%;
        }
        &.-million {
          .data_wrap {
            flex-direction: column;
            align-items: center;
            @media (max-width: 1200px),(max-width: 890px) {
              flex-direction: row;
              align-items: baseline;
            }
            @media (max-width: 768px) {
              flex-direction: row;
              align-items: baseline;
            }
            .unit {
              margin-top: max(-0.75rem, (var(--vw) * -12));
              @media (max-width: 1200px),(max-width: 890px) {
                margin-top: 0;
                font-size: 28px;
              }
              @media (max-width: 768px) {
                margin-top: 0;
                font-size: 28px;
              }
            }
          }
        }
        &.-sale {
          .graph_wrap {
            margin-top: min(1rem, (var(--vw) * 16));
            @media (max-width: 1200px),(max-width: 890px) {
              width: 263px;
              margin: 8px auto 0;
            }
            @media (max-width: 768px) {
              width: 263px;
              margin: 8px auto 0;
            }
            .data_wrap {
              position: relative;
              &:nth-of-type(1) {
                justify-content: flex-start;
                padding-left: min(3.375rem, (var(--vw) * 54));
                @media (max-width: 1200px),(max-width: 890px) {
                  padding-left: 38px;
                }
                @media (max-width: 768px) {
                  padding-left: 38px;
                }
                &::after {
                  content: '';
                  position: absolute;
                  bottom: max(-1.8124999999999998rem, (var(--vw) * -29));
                  left: min(1.1875rem, (var(--vw) * 19));
                  width: min(1.875rem, (var(--vw) * 30));
                  height: min(3rem, (var(--vw) * 48));
                  background: url(/recruit/assets/img/company/data/sale_deco01.svg) no-repeat;
                  background-size: cover;
                  @media (max-width: 1200px),(max-width: 890px) {
                    bottom: -5px;
                    left: 10px;
                    width: 26px;
                    height: 25px;
                    background: url(/recruit/assets/img/company/data/sale_deco01_sp.svg) no-repeat;
                    background-size: cover;
                  }
                  @media (max-width: 768px) {
                    bottom: -5px;
                    left: 10px;
                    width: 26px;
                    height: 25px;
                    background: url(/recruit/assets/img/company/data/sale_deco01_sp.svg) no-repeat;
                    background-size: cover;
                  }
                }
              }
              &:last-of-type {
                justify-content: flex-end;
                @media (max-width: 1200px),(max-width: 890px) {
                  padding-left: 23px;
                  margin-top: 10px;
                }
                @media (max-width: 768px) {
                  padding-left: 23px;
                }
                &::after {
                  content: '';
                  position: absolute;
                  bottom: min(1.25rem, (var(--vw) * 20));
                  left: min(3.875rem, (var(--vw) * 62));
                  width: min(1.6875rem, (var(--vw) * 27));
                  height: min(3.0625rem, (var(--vw) * 49));
                  background: url(/recruit/assets/img/company/data/sale_deco02.svg) no-repeat;
                  background-size: cover;
                  @media (max-width: 1200px),(max-width: 890px) {
                    bottom: 14px;
                    left: 28px;
                    width: 19px;
                    height: 33px;
                    background: url(/recruit/assets/img/company/data/sale_deco02_sp.svg) no-repeat;
                    background-size: cover;
                  }
                  @media (max-width: 768px) {
                    bottom: 14px;
                    left: 28px;
                    width: 19px;
                    height: 33px;
                    background: url(/recruit/assets/img/company/data/sale_deco02_sp.svg) no-repeat;
                    background-size: cover;
                  }
                }
              }
              .unit {
                @media (max-width: 1200px),(max-width: 890px) {
                  padding-left: 3;
                }
                @media (max-width: 768px) {
                  padding-left: 3;
                }
              }
            }
            .graph {
              position: relative;
              width: 100%;
              height: min(4rem, (var(--vw) * 64));
              margin-block: min(2rem, (var(--vw) * 32)) min(0.5rem, (var(--vw) * 8));
              @media (max-width: 1200px),(max-width: 890px) {
                height: 32px;
                margin-block: 10px 3px;
              }
              @media (max-width: 768px) {
                height: 32px;
                margin-block: 10px 3px;
              }
              &::after {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                width: min(3.25rem, (var(--vw) * 52));
                height: 100%;
                background-color: #FC5B01;
                border: min(0.125rem, (var(--vw) * 2)) solid #0026D5;
                border-right: none;
                box-sizing: border-box;
                scale: 0 1;
                transform-origin: left;
                transition: scale 1000ms ease;
                @media (max-width: 1200px),(max-width: 890px) {
                  width: 33px;
                  border: 2px solid #0026D5;
                }
                @media (max-width: 768px) {
                  width: 33px;
                  border: 2px solid #0026D5;
                }
              }
              &::before {
                content: '';
                position: absolute;
                top: 0;
                right: 0;
                width: min(19.4375rem, (var(--vw) * 311));
                height: 100%;
                background-color: #0026D5;
                border: min(0.125rem, (var(--vw) * 2)) solid #0026D5;
                border-right: none;
                box-sizing: border-box;
                scale: 0 1;
                transform-origin: right;
                transition: scale 1000ms ease;
                @media (max-width: 1200px),(max-width: 890px) {
                  width: 230px;
                  border: 2px solid #0026D5;
                }
                @media (max-width: 768px) {
                  width: 230px;
                  border: 2px solid #0026D5;
                }
              }
            }
            + .data_wrap {
              margin-top: min(1.25rem, (var(--vw) * 20));
            }
          }
          &.-active {
            .graph_wrap {
              .graph {
                &::before, &::after {
                  scale: 1 1;
                }
              }
            }
          }
        }
        &.-revenue {
          padding: min(1.5rem, (var(--vw) * 24)) min(1.25rem, (var(--vw) * 20)) min(2rem, (var(--vw) * 32));
          @media (max-width: 1200px),(max-width: 890px) {
            padding: 24px;
          }
          @media (max-width: 768px) {
            padding: 24px;
          }
          .unit {
            padding-left: 0;
          }
        }
      }
    }
  }
}
/* ↑↑↑ content ↑↑↑ */

@property --mask-size {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 0%;
}