@charset "UTF-8";

:root {
  --font-yugo: "Yu Gothic",
    "YuGothic",
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    "Meiryo",
    sans-serif;
  --moveLeftToRight: -100%;
  --moveRightToLeft: 100%;
  --base-width-sp: 750;
  --base-width-pc: 1300;
  --gradient-angle: 135deg;
}

@media screen and (width >=768px) {
  :root {
    --moveLeftToRight: -50%;
    --moveRightToLeft: 50%;
  }
}

svg path {
  fill: currentColor;
}

.splide__container {
  box-sizing: border-box;
  position: relative
}

.splide__list {
  backface-visibility: hidden;
  display: -ms-flexbox;
  display: flex;
  height: 100%;
  margin: 0 !important;
  padding: 0 !important
}

.splide.is-initialized:not(.is-active) .splide__list {
  display: block
}

.splide__pagination {
  -ms-flex-align: center;
  align-items: center;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-pack: center;
  justify-content: center;
  margin: 0;
  pointer-events: none
}

.splide__pagination li {
  display: inline-block;
  line-height: 1;
  list-style-type: none;
  margin: 0;
  pointer-events: auto
}

.splide:not(.is-overflow) .splide__pagination {
  display: none
}

.splide__progress__bar {
  width: 0
}

.splide {
  position: relative;
  visibility: hidden
}

.splide.is-initialized,
.splide.is-rendered {
  visibility: visible
}

.splide__slide {
  backface-visibility: hidden;
  box-sizing: border-box;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  list-style-type: none !important;
  margin: 0;
  position: relative
}

.splide__slide img {
  vertical-align: bottom
}

.splide__spinner {
  animation: splide-loading 1s linear infinite;
  border: 2px solid #999;
  border-left-color: transparent;
  border-radius: 50%;
  bottom: 0;
  contain: strict;
  display: inline-block;
  height: 20px;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  top: 0;
  width: 20px
}

.splide__sr {
  clip: rect(0 0 0 0);
  border: 0;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px
}

.splide__toggle.is-active .splide__toggle__play,
.splide__toggle__pause {
  display: none
}

.splide__toggle.is-active .splide__toggle__pause {
  display: inline
}

.splide__track {
  overflow: hidden;
  position: relative;
  z-index: 0
}

@keyframes splide-loading {
  0% {
    transform: rotate(0)
  }

  to {
    transform: rotate(1turn)
  }
}

.splide__track--draggable {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none
}

.splide__track--fade>.splide__list>.splide__slide {
  margin: 0 !important;
  opacity: 0;
  z-index: 0
}

.splide__track--fade>.splide__list>.splide__slide.is-active {
  opacity: 1;
  z-index: 1
}

.splide--rtl {
  direction: rtl
}

.splide__track--ttb>.splide__list {
  display: block
}

.splide__arrow {
  -ms-flex-align: center;
  align-items: center;
  background: #ccc;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  display: -ms-flexbox;
  display: flex;
  height: 2em;
  -ms-flex-pack: center;
  justify-content: center;
  opacity: .7;
  padding: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2em;
  z-index: 1
}

.splide__arrow svg {
  fill: #000;
  height: 1.2em;
  width: 1.2em
}

.splide__arrow:hover:not(:disabled) {
  opacity: .9
}

.splide__arrow:disabled {
  opacity: .3
}

.splide__arrow:focus-visible {
  outline: 3px solid #0bf;
  outline-offset: 3px
}

.splide__arrow--prev {
  left: 1em
}

.splide__arrow--prev svg {
  transform: scaleX(-1)
}

.splide__arrow--next {
  right: 1em
}

.splide.is-focus-in .splide__arrow:focus {
  outline: 3px solid #0bf;
  outline-offset: 3px
}

.splide__pagination {
  bottom: .5em;
  left: 0;
  padding: 0 1em;
  position: absolute;
  right: 0;
  z-index: 1
}

.splide__pagination__page {
  background: #ccc;
  border: 0;
  border-radius: 50%;
  display: inline-block;
  height: 8px;
  margin: 3px;
  opacity: .7;
  padding: 0;
  position: relative;
  transition: transform .2s linear;
  width: 8px
}

.splide__pagination__page.is-active {
  background: #fff;
  transform: scale(1.4);
  z-index: 1
}

.splide__pagination__page:hover {
  cursor: pointer;
  opacity: .9
}

.splide__pagination__page:focus-visible {
  outline: 3px solid #0bf;
  outline-offset: 3px
}

.splide.is-focus-in .splide__pagination__page:focus {
  outline: 3px solid #0bf;
  outline-offset: 3px
}

.splide__progress__bar {
  background: #ccc;
  height: 3px
}

.splide__slide {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}

.splide__slide:focus {
  outline: 0
}

@supports(outline-offset:-3px) {
  .splide__slide:focus-visible {
    outline: 3px solid #0bf;
    outline-offset: -3px
  }
}

@media screen and (-ms-high-contrast:none) {
  .splide__slide:focus-visible {
    border: 3px solid #0bf
  }
}

@supports(outline-offset:-3px) {
  .splide.is-focus-in .splide__slide:focus {
    outline: 3px solid #0bf;
    outline-offset: -3px
  }
}

@media screen and (-ms-high-contrast:none) {
  .splide.is-focus-in .splide__slide:focus {
    border: 3px solid #0bf
  }

  .splide.is-focus-in .splide__track>.splide__list>.splide__slide:focus {
    border-color: #0bf
  }
}

.splide__toggle {
  cursor: pointer
}

.splide__toggle:focus-visible {
  outline: 3px solid #0bf;
  outline-offset: 3px
}

.splide.is-focus-in .splide__toggle:focus {
  outline: 3px solid #0bf;
  outline-offset: 3px
}

.splide__track--nav>.splide__list>.splide__slide {
  border: 3px solid transparent;
  cursor: pointer
}

.splide__track--nav>.splide__list>.splide__slide.is-active {
  border: 3px solid #000
}

.splide__arrows--rtl .splide__arrow--prev {
  left: auto;
  right: 1em
}

.splide__arrows--rtl .splide__arrow--prev svg {
  transform: scaleX(1)
}

.splide__arrows--rtl .splide__arrow--next {
  left: 1em;
  right: auto
}

.splide__arrows--rtl .splide__arrow--next svg {
  transform: scaleX(-1)
}

.splide__arrows--ttb .splide__arrow {
  left: 50%;
  transform: translate(-50%)
}

.splide__arrows--ttb .splide__arrow--prev {
  top: 1em
}

.splide__arrows--ttb .splide__arrow--prev svg {
  transform: rotate(-90deg)
}

.splide__arrows--ttb .splide__arrow--next {
  bottom: 1em;
  top: auto
}

.splide__arrows--ttb .splide__arrow--next svg {
  transform: rotate(90deg)
}

.splide__pagination--ttb {
  bottom: 0;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  left: auto;
  padding: 1em 0;
  right: .5em;
  top: 0
}

.c_bg {
  display: block;
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 0;
  inset: 0;
  margin: auto;

  & video {
    position: absolute;
    z-index: -1;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    min-height: 100%;
    min-width: 100%;
    object-fit: cover;
    object-position: center bottom;

    @media screen and (width >=768px) {
      width: 177.77777778vh;
      height: 56.25vw;
    }
  }
}

.c_bg .p_bg__sp {
  display: block;
  width: 100%;
  height: 100%;

  @media screen and (width >=768px) {
    display: none;
  }
}

.c_bg .p_bg__pc {
  display: none;

  @media screen and (width >=768px) {
    display: block;
    width: 100%;
    height: 100%;
  }
}

.f_content {
  z-index: 10;
}

.c_hero {
  position: absolute;
  z-index: 10;
  top: calc(190 / var(--base-width-sp) * 100vw);
  left: calc(68 / var(--base-width-sp) * 100vw);
  display: block;
  width: calc(470 / var(--base-width-sp) * 100vw);
  height: calc(840 / var(--base-width-sp) * 100vw);
  transform: scale(0.8);
  transform-origin: 0 0;

  @media screen and (width >=768px) {
    top: min(calc(116 / var(--base-width-pc) * 100vw), 120px);
    left: calc(212 / var(--base-width-pc) * 100vw);
    width: calc(790 / var(--base-width-pc) * 100vw);
    height: calc(580 / var(--base-width-pc) * 100vw);
  }
}

.c_hero .p_hero__list {
  position: relative;
  z-index: 0;
  width: 100%;
  height: 100%;
}

.c_hero .p_hero__item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform-origin: 0 0;
  transition: transform 1.4s cubic-bezier(0.47, 0, 0.29, 1), opacity 1.4s cubic-bezier(0.47, 0, 0.29, 1);
  will-change: transform, opacity;
  backface-visibility: hidden;
  transform: translate(166%, 36%) scale(0.64);
  opacity: 0;
  pointer-events: none;
}

.c_hero .p_hero__item.is-next {
  transform: translate(166%, 26%) scale(0.64);
  opacity: 1;
  z-index: 2;

  @media screen and (width >=768px) {
    transform: translate(calc(1072 / var(--base-width-pc) * 100vw), 32%) scale(0.68);
  }
}

.c_hero .p_hero__item.is-ready {
  transform: translate(170%, 26%) scale(0.64);
  opacity: 0;

  @media screen and (width >=768px) {
    transform: translate(calc(1100 / var(--base-width-pc) * 100vw), 32%) scale(0.68);
  }
}

.c_hero .p_hero__item.is-current {
  transform: translate(4%, 0) scale(1);
  opacity: 1;
  z-index: 1;
  pointer-events: auto;

  @media screen and (width >=768px) {
    transform: translate(0, 0) scale(1);
  }
}

.c_hero .p_hero__item.is-prev {
  transform: translate(-110%, -18%) scale(1.2);
  opacity: 0;
  z-index: 3;
}

.c_hero .p_hero__controls {
  position: relative;
  z-index: 0;
  left: calc(10 / var(--base-width-sp) * 100vw);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100vw;
  margin-top: calc(40 / var(--base-width-sp) * 100vw);
  gap: calc(40 / var(--base-width-sp) * 100vw);
  transform: scale(1.2);

  @media screen and (width >=768px) {
    margin-top: 30px;
    left: auto;
    right: 0;
    margin-inline: auto 30px;
    width: fit-content;
    gap: 20px;
  }
}

.c_hero .p_hero__prev,
.c_hero .p_hero__next,
.c_hero .p_hero__play {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(48 / var(--base-width-sp) * 100vw);
  height: calc(48 / var(--base-width-sp) * 100vw);
  background-color: #fff;
  border-radius: 50%;
  box-shadow: 0 0 1px rgb(0 0 0 / 0.3);
  border: none;
  cursor: pointer;

  @media screen and (width >=768px) {
    width: 25px;
    height: 25px;
  }
}

.c_hero .p_hero__prev {
  background: #fff url("/company/recruit/fresh/img/2027/ico_arrow_right.svg") no-repeat center;
  background-size: calc(16 / var(--base-width-sp) * 100vw) auto;
  transform: rotate(180deg);

  @media screen and (width >=768px) {
    background-size: 12px auto;
  }
}

.c_hero .p_hero__next {
  background: #fff url("/company/recruit/fresh/img/2027/ico_arrow_right.svg") no-repeat center;
  background-size: calc(16 / var(--base-width-sp) * 100vw) auto;

  @media screen and (width >=768px) {
    background-size: 12px auto;
  }
}

.c_hero .p_hero__play::before,
.c_hero .p_hero__play::after {
  content: "";
  position: absolute;
  width: calc(4 / var(--base-width-sp) * 100vw);
  height: calc(14 / var(--base-width-sp) * 100vw);
  background-color: #111;
  opacity: 1;

  @media screen and (width >=768px) {
    width: 2px;
    height: 12px;
  }
}

.c_hero .p_hero__play::before {
  transform: translateX(calc(4 / var(--base-width-sp) * -100vw));

  @media screen and (width >=768px) {
    transform: translateX(2px);
  }
}

.c_hero .p_hero__play::after {
  transform: translateX(calc(4 / var(--base-width-sp) * 100vw));

  @media screen and (width >=768px) {
    transform: translateX(-2px);
  }
}

.c_hero .p_hero__play.is-paused::before {
  opacity: 0;
}

.c_hero .p_hero__play.is-paused::after {
  width: calc(12 / var(--base-width-sp) * 100vw);
  height: calc(12 / var(--base-width-sp) * 100vw);
  clip-path: polygon(0 0, 0% 100%, 100% 50%);
  transform: translateX(0);

  @media screen and (width >=768px) {
    width: 10px;
    height: 10px;
    transform: translateX(1px);
  }
}

.c_hero .p_hero__pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(16 / var(--base-width-sp) * 100vw);

  @media screen and (width >=768px) {
    gap: 12px;
  }
}

.c_hero .p_hero__page {
  display: flex;
  align-items: center;
  justify-content: center;
}

.c_hero .p_hero__button {
  position: relative;
  display: block;
  width: calc(16 / var(--base-width-sp) * 100vw);
  height: calc(16 / var(--base-width-sp) * 100vw);
  background-color: #fff;
  border: none;
  border-radius: 50%;
  margin: 0;
  padding: 0;
  cursor: pointer;

  @media screen and (width >=768px) {
    width: 8px;
    height: 8px;
  }

  &::before {
    content: "";
    position: absolute;
    z-index: 10;
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    inset: 0;
    margin: auto;
    background-color: #0068b7;
    opacity: 0;
    transition: opacity 0.2s ease-out;
  }
}

.c_hero .is-active .p_hero__button::before {
  opacity: 1;
}

.c_keyvisual {
  position: relative;
  z-index: 0;
  display: block;
  width: 100vw;
  height: auto;
  overflow-x: clip;
  overflow-y: visible;
  padding-top: max(calc(95 / var(--base-width-sp) * 100vw), 56px);
  padding-bottom: calc(114 / var(--base-width-sp) * 100vw);

  @media screen and (width >=768px) {
    width: 100%;
    padding-top: 56px;
    padding-bottom: min(calc(346 / var(--base-width-pc) * 100vw), 346px);
  }
}

.c_keyvisual .p_keyvisual__box {
  position: relative;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
  transition: opacity 0.2s ease-out;

  &>picture {
    display: block;
    border-radius: calc(32 / var(--base-width-sp) * 100vw);
    overflow: hidden;

    @media screen and (width >=768px) {
      border-radius: 46px;
    }
  }
}

@media screen and (any-hover: hover) {
  .c_keyvisual .p_keyvisual__box:hover {
    opacity: 0.7;
  }

  .c_keyvisual .p_keyvisual__box:hover .p_keyvisual__photo {
    transform: scale(1.05);
  }
}

.c_keyvisual .p_keyvisual__photo {
  position: relative;
  z-index: 0;
  width: 100%;
  height: calc(624 / var(--base-width-sp) * 100vw);
  object-fit: cover;
  transition: transform 0.2s ease;

  @media screen and (width >=768px) {
    height: 100%;
  }
}

.c_keyvisual .p_keyvisual__label {
  display: block;
  width: calc(552 / var(--base-width-sp) * 100vw);
  margin-top: calc(40 / var(--base-width-sp) * 100vw);
  transform: scale(1.2);

  @media screen and (width >=768px) {
    width: calc(584 / var(--base-width-pc) * 100vw);
    margin-top: 0;
    position: absolute;
    z-index: 10;
    bottom: calc(66 / var(--base-width-pc) * 100vw);
    left: calc(94 / var(--base-width-pc) * -100vw);
  }
}

.c_keyvisual .p_keyvisual__labelHead {
  display: flex;
  align-items: center;
  width: fit-content;
  font-size: calc(36 / var(--base-width-sp) * 100vw);
  font-weight: 700;
  line-height: calc(48 / 36);
  letter-spacing: 0.02em;
  background-color: #000;
  color: #fff;
  padding-block: calc(12 / var(--base-width-sp) * 100vw);
  padding-inline: calc(24 / var(--base-width-sp) * 100vw);

  @media screen and (width >=768px) {
    font-size: calc(30 / var(--base-width-pc) * 100vw);
    line-height: calc(34 / 30);
    padding-block: calc(8 / var(--base-width-pc) * 100vw);
    padding-inline: calc(24 / var(--base-width-pc) * 100vw);

    br {
      display: none;
    }
  }
}

.c_keyvisual .p_keyvisual__labelBody {
  display: flex;
  align-items: center;
  width: fit-content;
  font-size: calc(24 / var(--base-width-sp) * 100vw);
  font-weight: 700;
  line-height: calc(40 / 24);
  letter-spacing: 0.1em;
  background-color: #fff;
  color: #000;
  padding-inline: calc(24 / var(--base-width-sp) * 100vw);
  margin-top: 2px;
  margin-inline-start: calc(24 / var(--base-width-sp) * 100vw);

  @media screen and (width >=768px) {
    height: calc(36 / var(--base-width-pc) * 100vw);
    font-size: calc(18 / var(--base-width-pc) * 100vw);
    line-height: calc(24 / 18);
    padding-inline: calc(26 / var(--base-width-pc) * 100vw);
    margin-top: 0;
    margin-inline-start: calc(24 / var(--base-width-pc) * 100vw);
  }
}

.c_hero .p_hero__item .p_keyvisual__label {
  opacity: 1;
  clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
  transition: clip-path 1.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.c_hero .p_hero__item .p_keyvisual__label .p_keyvisual__labelHead span,
.c_hero .p_hero__item .p_keyvisual__label .p_keyvisual__labelBody span {
  display: inline-block;
  clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
  transition: clip-path 1.2s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: 0.5s;
}

.c_hero .p_hero__item.is-label-visible .p_keyvisual__label,
.c_hero .p_hero__item.is-label-visible .p_keyvisual__label .p_keyvisual__labelHead span,
.c_hero .p_hero__item.is-label-visible .p_keyvisual__label .p_keyvisual__labelBody span {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}

.c_hero .p_hero__item.is-prev .p_keyvisual__label,
.c_hero .p_hero__item.is-prev .p_keyvisual__label .p_keyvisual__labelHead span,
.c_hero .p_hero__item.is-prev .p_keyvisual__label .p_keyvisual__labelBody span {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}

.c_keyvisual .p_keyvisual__title {
  position: relative;
  z-index: 20;
  top: calc(80 / var(--base-width-sp) * 100vw);
  left: calc(508 / var(--base-width-sp) * 100vw);
  width: calc(136 / var(--base-width-sp) * 100vw);

  @media screen and (width >=768px) {
    position: sticky;
    top: calc(130 / var(--base-width-pc) * 100vw);
    left: calc(912 / var(--base-width-pc) * 100vw);
    width: calc(90 / var(--base-width-pc) * 100vw);
  }
}

.c_keyvisual .p_keyvisual__intro {
  position: relative;
  z-index: 30;
  margin-block-start: calc(318 / var(--base-width-sp) * 100vw);
  margin-inline-start: calc(70 / var(--base-width-sp) * 100vw);
  font-size: calc(28 / var(--base-width-sp) * 100vw);
  font-weight: 500;
  line-height: calc(56 / 28);
  letter-spacing: 0.1em;

  span {
    display: inline-block;
  }

  .is-pc {
    display: none;
  }

  @media screen and (width >=768px) {
    margin-block-start: calc(354 / var(--base-width-pc) * 100vw);
    margin-inline: auto;
    width: calc(830 / var(--base-width-pc) * 100vw);
    font-size: calc(18 / var(--base-width-pc) * 100vw);
    line-height: calc(44 / 18);

    .is-sp {
      display: none;
    }

    .is-pc {
      display: block;
    }
  }
}

.c_work {
  position: relative;
  z-index: 0;
  display: block;
  width: 100vw;
  height: auto;
  padding-top: calc(92 / var(--base-width-sp) * 100vw);

  @media screen and (width >=768px) {
    width: 100%;
    padding-top: 0;
  }
}

.c_work .p_work__bg {
  position: relative;
  z-index: 0;
  border-radius: calc(104 / var(--base-width-sp) * 100vw) calc(104 / var(--base-width-sp) * 100vw) 0 0;

  @media screen and (width >=768px) {
    border-radius: 52px 52px 0 0;
    margin-bottom: 0;
  }
}

.c_work .p_work__top {
  position: absolute;
  z-index: 10;
  top: 0;
  left: 0;
  display: block;
  width: 100vw;

  @media screen and (width >=768px) {
    width: calc(1130 / var(--base-width-pc) * 100vw);
    right: 0;
    margin-inline: auto;
  }
}

.c_work .p_work__title {
  position: absolute;
  z-index: 15;
  top: calc(10 / var(--base-width-sp) * 100vw);
  left: calc(515 / var(--base-width-sp) * 100vw);
  display: grid;
  place-items: center;
  inline-size: calc(430 / var(--base-width-sp) * 100vw);
  block-size: calc(140 / var(--base-width-sp) * 100vw);
  background-color: #000;
  color: #fff;
  font-family: var(--font-yugo);
  font-size: calc(64 / var(--base-width-sp) * 100vw);
  font-weight: 700;
  letter-spacing: 0.1em;
  writing-mode: vertical-rl;
  text-orientation: mixed;

  @media screen and (width >=768px) {
    top: max(calc(105 / var(--base-width-pc) * -100vw), -105px);
    left: calc(172 / var(--base-width-pc) * 100vw);
    inline-size: min(calc(300 / var(--base-width-pc) * 100vw), 300px);
    block-size: min(calc(70 / var(--base-width-pc) * 100vw), 70px);
    font-size: min(calc(48 / var(--base-width-pc) * 100vw), 4.8rem);
  }
}

.c_work .p_work__read {
  position: absolute;
  z-index: 15;
  top: calc(816 / var(--base-width-sp) * 100vw);
  left: calc(50 / var(--base-width-sp) * 100vw);
  display: grid;
  place-items: center;
  inline-size: calc(528 / var(--base-width-sp) * 100vw);
  block-size: calc(348 / var(--base-width-sp) * 100vw);
  background-color: #fff;
  font-size: calc(28 / var(--base-width-sp) * 100vw);
  font-weight: 500;
  line-height: calc(56 / 28);
  letter-spacing: 0.1em;
  writing-mode: vertical-rl;
  text-orientation: mixed;

  @media screen and (width >=768px) {
    top: min(calc(21 / var(--base-width-pc) * 100vw), 21px);
    left: auto;
    right: calc(958 / var(--base-width-pc) * 100vw);
    inline-size: min(calc(350 / var(--base-width-pc) * 100vw), 350px);
    block-size: min(calc(173 / var(--base-width-pc) * 100vw), 173px);
    font-size: min(calc(18 / var(--base-width-pc) * 100vw), 1.8rem);
    line-height: calc(28 / 18);
  }
}

.c_work .p_work__container {
  position: relative;
  z-index: 0;
  display: block;
  width: 100%;
  background-color: #fff;
  padding-top: calc(286 / var(--base-width-sp) * 100vw);

  @media screen and (width >=768px) {
    padding-top: min(calc(102 / var(--base-width-pc) * 100vw), 102px);
  }
}

.c_work .p_work__area {
  position: relative;
  z-index: 0;
  padding-top: calc(120 / var(--base-width-sp) * 100vw);
  padding-bottom: calc(70 / var(--base-width-sp) * 100vw);

  @media screen and (width >=768px) {
    padding-top: min(calc(84 / var(--base-width-pc) * 100vw), 84px);
    padding-bottom: min(calc(50 / var(--base-width-pc) * 100vw), 50px);
  }

  &:not(:first-of-type) {
    margin-top: calc(88 / var(--base-width-sp) * 100vw);

    @media screen and (width >=768px) {
      margin-top: min(calc(94 / var(--base-width-pc) * 100vw), 94px);
    }
  }

  &.is-spacer {
    padding-top: calc(74 / var(--base-width-sp) * 100vw);

    @media screen and (width >=768px) {
      padding-top: min(calc(94 / var(--base-width-pc) * 100vw), 94px);
    }
  }

  &::before {
    content: "";
    display: block;
    width: calc(684 / var(--base-width-sp) * 100vw);
    height: 100%;
    background: linear-gradient(var(--gradient-angle), rgb(151, 199, 254) 0%, rgb(252, 199, 251) 100%);
    opacity: 0.8;
    position: absolute;
    z-index: 0;
    inset: 0;
    margin: auto;

    @media screen and (width >=768px) {
      width: min(calc(820 / var(--base-width-pc) * 100vw), 820px);
    }
  }
}

.c_work .p_work__areaTitle {
  position: relative;
  z-index: 10;
  display: flex;
  justify-content: center;
  width: 100vw;
  font-size: calc(56 / var(--base-width-sp) * 100vw);
  font-weight: 500;
  letter-spacing: 0.1em;
  margin-block-end: calc(15 / var(--base-width-sp) * 100vw);

  @media screen and (width >=768px) {
    width: 100%;
    font-size: min(calc(32 / var(--base-width-pc) * 100vw), 3.2rem);
    margin-block-end: min(calc(8 / var(--base-width-pc) * 100vw), 8px);
  }
}

.c_work .p_work__areaTitle--JP {
  font-size: calc(28 / var(--base-width-sp) * 100vw);
  line-height: calc(60 / 28);
  text-align: center;
  margin-block-end: calc(44 / var(--base-width-sp) * 100vw);

  @media screen and (width >=768px) {
    font-size: min(calc(28 / var(--base-width-pc) * 100vw), 2.8rem);
    font-weight: 700;
    line-height: calc(48 / 28);
    margin-block-end: min(calc(56 / var(--base-width-pc) * 100vw), 56px);

    .is-sp {
      display: none;
    }
  }
}

.c_work .p_work__areaTitleEN {
  position: relative;
  z-index: 0;
  display: flex;
  align-items: center;
  text-decoration: none;
  color: #727272;
  text-transform: uppercase;
}

.c_work .p_work__areaTitleIco {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(72 / var(--base-width-sp) * 100vw);
  height: calc(72 / var(--base-width-sp) * 100vw);
  background-color: #fff;
  color: #606060;
  border-radius: 50%;
  margin-left: calc(28 / var(--base-width-sp) * 100vw);

  @media screen and (width >=768px) {
    width: min(calc(56 / var(--base-width-pc) * 100vw), 56px);
    height: min(calc(56 / var(--base-width-pc) * 100vw), 56px);
    margin-left: min(calc(20 / var(--base-width-pc) * 100vw), 20px);
  }

  svg {
    width: calc(32 / var(--base-width-sp) * 100vw);
    height: calc(32 / var(--base-width-sp) * 100vw);

    @media screen and (width >=768px) {
      width: min(calc(26 / var(--base-width-pc) * 100vw), 26px);
      height: min(calc(26 / var(--base-width-pc) * 100vw), 26px);
    }
  }
}

.c_work .p_work__areaTitleEN[href] {
  transition: opacity 0.3s ease-out;
}

@media screen and (any-hover: hover) {
  .c_work .p_work__areaTitleEN[href]:hover {
    opacity: 0.7;
  }
}

.c_work .p_work__areaRead {
  position: relative;
  z-index: 10;
  margin-block-end: calc(72 / var(--base-width-sp) * 100vw);
  font-size: calc(28 / var(--base-width-sp) * 100vw);
  font-weight: 500;
  line-height: calc(60 / 28);
  letter-spacing: 0.1em;
  text-align: center;

  @media screen and (width >=768px) {
    margin-block-end: min(calc(68 / var(--base-width-pc) * 100vw), 68px);
    font-size: min(calc(28 / var(--base-width-pc) * 100vw), 2.8rem);
    font-weight: 700;
    line-height: calc(48 / 28);

    .is-sp {
      display: none;
    }
  }

  .is-pc {
    display: none;

    @media screen and (width >=768px) {
      display: block;
    }
  }
}

.c_work .p_work__slide {
  position: relative;
  z-index: 10;
  display: block;
  width: 100%;
  overflow: hidden;
  padding-top: calc(504 / var(--base-width-sp) * 100vw);

  @media screen and (width >=768px) {
    padding-top: 252px;
  }
}

.c_work .p_work__slideInner {
  position: absolute;
  z-index: 10;
  top: 0;
  display: flex;
  will-change: transform;

  &.is-LeftToRight {
    left: 0;
    flex-direction: row;
    width: calc(2955 / var(--base-width-sp) * 100vw);
    animation: moveLeftToRight 70s linear infinite;

    @media screen and (width >=768px) {
      width: 5908px;

      .p_work__slideImg {
        width: 1477px;
      }
    }
  }

  &.is-RightToLeft {
    right: 0;
    flex-direction: row-reverse;
    width: calc(3546 / var(--base-width-sp) * 100vw);
    animation: moveRightToLeft 66s linear infinite;

    @media screen and (width >=768px) {
      width: 7092px;

      .p_work__slideImg {
        width: 1773px;
      }
    }
  }
}

@keyframes moveLeftToRight {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(var(--moveLeftToRight), 0, 0);
  }
}

@keyframes moveRightToLeft {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(var(--moveRightToLeft), 0, 0);
  }
}

.c_work .p_work__areaRow {
  display: flex;
  flex-direction: column;
  width: calc(618 / var(--base-width-sp) * 100vw);
  margin-inline: auto;
  gap: calc(47 / var(--base-width-sp) * 100vw);

  @media screen and (width >=768px) {
    flex-direction: row;
    width: min(calc(1180 / var(--base-width-pc) * 100vw), 1180px);
    gap: min(calc(36 / var(--base-width-pc) * 100vw), 36px);
  }
}

.c_work .p_work__box {
  position: relative;
  z-index: 0;
  display: block;
  width: 100%;
  border: 1px solid #c0c0c0;
  background-color: #fff;
  color: #000;
  text-decoration: none;
  padding: calc(40 / var(--base-width-sp) * 100vw) 0 calc(34 / var(--base-width-sp) * 100vw) calc(38 / var(--base-width-sp) * 100vw);
  transition: border-color 0.3s ease-out, background-color 0.3s ease-out, color 0.3s ease-out;

  @media screen and (width >=768px) {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    width: min(calc(572 / var(--base-width-pc) * 100vw), 572px);
    padding: min(calc(82 / var(--base-width-pc) * 100vw), 82px) 0 min(calc(44 / var(--base-width-pc) * 100vw), 44px) min(calc(38 / var(--base-width-pc) * 100vw), 38px);
  }
}

@media screen and (any-hover: hover) {
  .c_work .p_work__box:hover {
    border-color: #0068b7;
    background-color: #0068b7;
    color: #fff;
  }
}

.c_work .p_work__boxTitle {
  font-size: calc(48 / var(--base-width-sp) * 100vw);
  font-weight: 500;
  letter-spacing: 0.1em;
  margin-block-end: calc(23 / var(--base-width-sp) * 100vw);

  @media screen and (width >=768px) {
    font-size: min(calc(28 / var(--base-width-pc) * 100vw), 2.8rem);
    font-weight: 700;
    margin-block-end: min(calc(10 / var(--base-width-pc) * 100vw), 10px);
  }
}

.c_work .p_work__boxRead {
  font-size: calc(28 / var(--base-width-sp) * 100vw);
  font-weight: 500;
  line-height: calc(56 / 28);
  letter-spacing: 0.1em;

  @media screen and (width >=768px) {
    font-size: min(calc(16 / var(--base-width-pc) * 100vw), 1.6rem);
    line-height: calc(28 / 16);

    .is-sp {
      display: none;
    }
  }
}

.c_work .p_work__boxIco {
  position: absolute;
  z-index: 10;
  top: calc(60 / var(--base-width-sp) * 100vw);
  right: calc(40 / var(--base-width-sp) * 100vw);
  width: calc(30 / var(--base-width-sp) * 100vw);
  height: calc(30 / var(--base-width-sp) * 100vw);
  color: #000;

  @media screen and (width >=768px) {
    top: min(calc(134 / var(--base-width-pc) * 100vw), 134px);
    right: min(calc(36 / var(--base-width-pc) * 100vw), 36px);
    width: min(calc(15 / var(--base-width-pc) * 100vw), 15px);
    height: min(calc(15 / var(--base-width-pc) * 100vw), 15px);
  }
}

@media screen and (any-hover: hover) {
  .c_work .p_work__box:hover .p_work__boxIco {
    color: #fff;
  }
}

.c_job {
  position: relative;
  z-index: 0;
  background-color: #fff;
  padding-top: calc(324 / var(--base-width-sp) * 100vw);
  padding-bottom: calc(152 / var(--base-width-sp) * 100vw);

  @media screen and (width >=768px) {
    padding-top: min(calc(110 / var(--base-width-pc) * 100vw), 110px);
    padding-bottom: min(calc(142 / var(--base-width-pc) * 100vw), 142px);
  }
}

.c_job .p_job__bg {
  position: relative;
  z-index: 0;
  border-radius: calc(104 / var(--base-width-sp) * 100vw) calc(104 / var(--base-width-sp) * 100vw) 0 0;

  @media screen and (width >=768px) {
    border-radius: 52px 52px 0 0;
  }
}

.c_job .p_job__top {
  position: absolute;
  z-index: 10;
  top: 0;
  left: 0;
  display: block;
  width: 100vw;

  @media screen and (width >=768px) {
    width: min(calc(1130 / var(--base-width-pc) * 100vw), 1130px);
    right: 0;
    margin-inline: auto;
  }
}

.c_job .p_job__title {
  position: relative;
  z-index: 15;
  top: calc(128 / var(--base-width-sp) * 100vw);
  left: calc(540 / var(--base-width-sp) * 100vw);
  display: grid;
  place-items: center;
  inline-size: calc(470 / var(--base-width-sp) * 100vw);
  block-size: calc(140 / var(--base-width-sp) * 100vw);
  background-color: #000;
  color: #fff;
  font-family: var(--font-yugo);
  font-size: calc(64 / var(--base-width-sp) * 100vw);
  font-weight: 700;
  letter-spacing: 0.1em;
  writing-mode: vertical-rl;
  text-orientation: mixed;

  @media screen and (width >=768px) {
    top: min(calc(8 / var(--base-width-pc) * 100vw), 8px);
    left: min(calc(1030 / var(--base-width-pc) * 100vw), 1030px);
    inline-size: min(calc(300 / var(--base-width-pc) * 100vw), 300px);
    block-size: min(calc(70 / var(--base-width-pc) * 100vw), 70px);
    font-size: min(calc(48 / var(--base-width-pc) * 100vw), 4.8rem);
  }
}

.c_job .p_job__read {
  position: relative;
  z-index: 13;
  top: calc(204 / var(--base-width-sp) * -100vw);
  left: calc(364 / var(--base-width-sp) * 100vw);
  display: grid;
  place-items: center;
  inline-size: calc(418 / var(--base-width-sp) * 100vw);
  block-size: calc(180 / var(--base-width-sp) * 100vw);
  background-color: #fff;
  font-size: calc(28 / var(--base-width-sp) * 100vw);
  font-weight: 500;
  line-height: calc(56 / 28);
  letter-spacing: 0.1em;
  writing-mode: vertical-rl;
  text-orientation: upright;

  @media screen and (width >=768px) {
    top: max(calc(192 / var(--base-width-pc) * -100vw), -192px);
    left: min(calc(908 / var(--base-width-pc) * 100vw), 908px);
    inline-size: min(calc(244 / var(--base-width-pc) * 100vw), 244px);
    block-size: min(calc(123 / var(--base-width-pc) * 100vw), 123px);
    font-size: min(calc(18 / var(--base-width-pc) * 100vw), 1.8rem);
    line-height: calc(28 / 18);
  }
}

.c_job .p_job__lst {
  position: absolute;
  z-index: 10;
  left: 0;
  right: 0;
  bottom: calc(192 / var(--base-width-sp) * 100vw);
  display: flex;
  align-items: center;
  width: 100vw;

  @media screen and (width >=768px) {
    width: min(calc(990 / var(--base-width-pc) * 100vw), 990px);
    bottom: min(calc(180 / var(--base-width-pc) * 100vw), 180px);
    margin-inline: auto;
  }
}

.c_job .p_job__item {
  position: relative;
  z-index: 0;

  &:nth-child(1) .p_job__link {
    background-color: #5c96fd;
  }

  &:nth-child(2) .p_job__link {
    background-color: #6bcef9;
  }

  &:nth-child(3) .p_job__link {
    background-color: #35aef3;
  }
}

.c_job .p_job__link {
  display: flex;
  align-items: center;
  width: calc(250 / var(--base-width-sp) * 100vw);
  height: calc(160 / var(--base-width-sp) * 100vw);
  font-size: calc(32 / var(--base-width-sp) * 100vw);
  font-weight: 500;
  color: #fff;
  text-decoration: none;
  padding-inline: calc(24 / var(--base-width-sp) * 100vw) calc(60 / var(--base-width-sp) * 100vw);
  transition: opacity 0.3s ease-out;

  @media screen and (width >=768px) {
    justify-content: center;
    text-align: center;
    width: min(calc(335 / var(--base-width-pc) * 100vw), 335px);
    height: min(calc(80 / var(--base-width-pc) * 100vw), 80px);
    font-size: min(calc(20 / var(--base-width-pc) * 100vw), 2.0rem);
    padding-inline: min(calc(34 / var(--base-width-pc) * 100vw), 34px);
  }
}

@media screen and (any-hover: hover) {
  .c_job .p_job__link:hover {
    opacity: 0.7;
  }
}

.c_job .p_job__ico {
  position: absolute;
  z-index: 10;
  top: 0;
  bottom: 0;
  right: calc(22 / var(--base-width-sp) * 100vw);
  margin-block: auto;
  display: block;
  width: calc(30 / var(--base-width-sp) * 100vw);
  height: calc(30 / var(--base-width-sp) * 100vw);
  color: #fff;

  @media screen and (width >=768px) {
    right: min(calc(20 / var(--base-width-pc) * 100vw), 20px);
    width: min(calc(15 / var(--base-width-pc) * 100vw), 15px);
    height: min(calc(15 / var(--base-width-pc) * 100vw), 15px);
  }
}

.c_people {
  position: relative;
  z-index: 0;
  background-color: #fff;
  padding-bottom: calc(20 / var(--base-width-sp) * 100vw);

  @media screen and (width >=768px) {
    padding-bottom: min(calc(30 / var(--base-width-pc) * 100vw), 30px);
  }

  &::before {
    content: "";
    display: block;
    width: calc(684 / var(--base-width-sp) * 100vw);
    height: 100%;
    background: linear-gradient(var(--gradient-angle), rgb(151, 199, 254) 0%, rgb(252, 199, 251) 100%);
    opacity: 0.8;
    position: absolute;
    z-index: 0;
    inset: 0;
    margin: auto;

    @media screen and (width >=768px) {
      width: min(calc(820 / var(--base-width-pc) * 100vw), 820px);
    }
  }
}

.c_people .p_people__top {
  position: relative;
  z-index: 0;
  display: block;
  width: calc(684 / var(--base-width-sp) * 100vw);
  margin-inline: auto;
  padding-top: calc(150 / var(--base-width-sp) * 100vw);
  margin-bottom: calc(30 / var(--base-width-sp) * 100vw);

  @media screen and (width >=768px) {
    padding-top: min(calc(84 / var(--base-width-pc) * 100vw), 84px);
    margin-bottom: 0;
    margin-inline: auto;
    width: min(calc(418 / var(--base-width-pc) * 100vw), 418px);
  }
}

.c_people .p_people__title {
  position: absolute;
  z-index: 10;
  top: calc(86 / var(--base-width-sp) * 100vw);
  left: calc(528 / var(--base-width-sp) * 100vw);
  display: grid;
  place-items: center;
  inline-size: calc(370 / var(--base-width-sp) * 100vw);
  block-size: calc(120 / var(--base-width-sp) * 100vw);
  background-color: #000;
  color: #fff;
  font-family: var(--font-yugo);
  font-size: calc(72 / var(--base-width-sp) * 100vw);
  font-weight: 700;
  letter-spacing: 0.1em;
  writing-mode: vertical-rl;
  text-orientation: mixed;

  @media screen and (width >=768px) {
    top: min(calc(50 / var(--base-width-pc) * 100vw), 50px);
    left: auto;
    right: calc(0 / var(--base-width-pc) * 100vw);
    inline-size: min(calc(245 / var(--base-width-pc) * 100vw), 245px);
    block-size: min(calc(70 / var(--base-width-pc) * 100vw), 70px);
    font-size: min(calc(48 / var(--base-width-pc) * 100vw), 4.8rem);
  }
}

.c_people .p_people__topArea {
  display: flex;
  flex-direction: column;
  background-color: #fff;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  margin-left: calc(20 / var(--base-width-sp) * 100vw);
  padding-inline: calc(40 / var(--base-width-sp) * 100vw);
  padding-block: calc(28 / var(--base-width-sp) * 100vw);

  @media screen and (width >=768px) {
    width: min(calc(348 / var(--base-width-pc) * 100vw), 348px);
    margin-left: 0;
    padding-inline: min(calc(18 / var(--base-width-pc) * 100vw), 18px);
    padding-block: min(calc(10 / var(--base-width-pc) * 100vw), 10px);
  }
}

.c_people .p_people__read {
  font-size: calc(28 / var(--base-width-sp) * 100vw);
  font-weight: 500;
  line-height: calc(56 / 28);
  letter-spacing: 0.1em;

  &:nth-of-type(3) {
    margin-block-start: calc(59 / var(--base-width-sp) * 100vw);
  }

  .is-pc {
    display: none;

    @media screen and (width >=768px) {
      display: block;
    }
  }

  @media screen and (width >=768px) {
    font-size: min(calc(18 / var(--base-width-pc) * 100vw), 1.8rem);
    line-height: calc(32 / 18);

    &:nth-of-type(1),
    &:nth-of-type(2),
    &:nth-of-type(3) {
      margin-block-start: min(calc(20 / var(--base-width-pc) * 100vw), 20px);
    }
  }
}

.c_people .p_people__indexWrap {
  position: relative;
  z-index: 0;
  display: block;
  width: 100%;
  margin-inline: auto;

  @media screen and (width >=768px) {
    width: min(calc(1180 / var(--base-width-pc) * 100vw), 1180px);
  }
}

.c_people .p_people__index {
  position: relative;
  z-index: 0;
  display: flex;
  align-items: center;
  width: calc(640 / var(--base-width-sp) * 100vw);
  height: calc(144 / var(--base-width-sp) * 100vw);
  border: 1px solid #c0c0c0;
  background-color: #fff;
  text-decoration: none;
  color: #000;
  margin-inline: auto;
  font-size: calc(32 / var(--base-width-sp) * 100vw);
  font-weight: 500;
  letter-spacing: 0.1em;
  padding-inline: calc(67 / var(--base-width-sp) * 100vw) calc(124 / var(--base-width-sp) * 100vw);
  transition: border-color 0.3s ease-out, background-color 0.3s ease-out, color 0.3s ease-out;

  @media screen and (width >=768px) {
    width: min(calc(330 / var(--base-width-pc) * 100vw), 330px);
    height: min(calc(72 / var(--base-width-pc) * 100vw), 72px);
    font-size: min(calc(16 / var(--base-width-pc) * 100vw), 1.6rem);
    padding-inline: min(calc(34 / var(--base-width-pc) * 100vw), 34px) min(calc(58 / var(--base-width-pc) * 100vw), 58px);
    margin-inline: auto min(calc(66 / var(--base-width-pc) * 100vw), 66px);
    margin-top: max(calc(84 / var(--base-width-pc) * -100vw), -84px);
  }
}

@media screen and (any-hover: hover) {
  .c_people .p_people__index:hover {
    border-color: #0068b7;
    background-color: #0068b7;
    color: #fff;
  }
}

.c_people .p_people__indexIco {
  position: absolute;
  z-index: 10;
  top: 0;
  bottom: 0;
  right: calc(85 / var(--base-width-sp) * 100vw);
  display: block;
  width: calc(30 / var(--base-width-sp) * 100vw);
  height: calc(30/ var(--base-width-sp) * 100vw);
  margin-block: auto;
  color: #000;

  @media screen and (width >=768px) {
    right: min(calc(40 / var(--base-width-pc) * 100vw), 40px);
    width: min(calc(15 / var(--base-width-pc) * 100vw), 15px);
    height: min(calc(15 / var(--base-width-pc) * 100vw), 15px);
  }
}

@media screen and (any-hover: hover) {
  .c_people .p_people__index:hover .p_people__indexIco {
    color: #fff;
  }
}

.c_people .p_people__slide {
  display: block;
  width: 100vw;
  margin-top: calc(54 / var(--base-width-sp) * 100vw);
  overflow: hidden;

  @media screen and (width >=768px) {
    width: 100%;
    margin-inline: auto;
    margin-top: min(calc(50 / var(--base-width-pc) * 100vw), 50px);
  }
}

.c_people .p_people__slideInner {
  padding-inline: calc(70 / var(--base-width-sp) * 100vw);

  @media screen and (width >=768px) {
    padding-inline: calc(60 / var(--base-width-pc) * 100vw);
  }
}

.c_people .splide__track {
  overflow: visible;
}

.c_people .splide__arrow {
  width: calc(60 / var(--base-width-sp) * 100vw);
  height: calc(60 / var(--base-width-sp) * 100vw);
  background-color: #fff;
  border: 1px solid #ccc;

  @media screen and (width >=768px) {
    width: 35px;
    height: 35px;
  }
}

.c_people .splide__arrow--prev {
  left: calc(34 / var(--base-width-sp) * -100vw);

  @media screen and (width >=768px) {
    left: -25px;
  }
}

.c_people .splide__arrow--next {
  right: calc(34 / var(--base-width-sp) * -100vw);

  @media screen and (width >=768px) {
    right: -25px;
  }
}

.c_people .splide__pagination {
  position: static;
  margin-top: calc(20 / var(--base-width-sp) * 100vw);

  @media screen and (width >=768px) {
    margin-top: 10px;
  }
}

.c_people .splide__pagination__page {
  width: calc(24 / var(--base-width-sp) * 100vw);
  height: calc(24 / var(--base-width-sp) * 100vw);
  margin: calc(6 / var(--base-width-sp) * 100vw);
  background-color: #fff;
  transform: scale(1);

  @media screen and (width >=768px) {
    width: 11px;
    height: 11px;
    margin: 3px;
  }
}

.c_people .splide__pagination__page.is-active {
  background-color: #0068b7;
  transform: scale(1);
}

.c_people .p_people__box {
  display: block;
  width: 100%;
  background-color: #fff;
  color: #000;
  text-decoration: none;
}

.c_people .p_people__boxHead {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  height: calc(320 / var(--base-width-sp) * 100vw);
  background-color: #0068b7;
  padding: calc(44 / var(--base-width-sp) * 100vw) 0 calc(20 / var(--base-width-sp) * 100vw) calc(44 / var(--base-width-sp) * 100vw);
  transition: opacity 0.2s ease-out;

  @media screen and (width >=768px) {
    height: min(calc(200 / var(--base-width-pc) * 100vw), 200px);
    padding: min(calc(28 / var(--base-width-pc) * 100vw), 28px) min(calc(26 / var(--base-width-pc) * 100vw), 26px) min(calc(12 / var(--base-width-pc) * 100vw), 12px) min(calc(26 / var(--base-width-pc) * 100vw), 26px);
  }
}

.c_people .p_people__boxRead {
  font-size: calc(32 / var(--base-width-sp) * 100vw);
  font-weight: 500;
  line-height: calc(44 / 32);
  letter-spacing: 0.1em;
  color: #fff;

  @media screen and (width >=768px) {
    font-size: min(calc(20 / var(--base-width-pc) * 100vw), 2.0rem);
    line-height: calc(28 / 20);
  }
}

.c_people .p_people__boxTag {
  display: grid;
  place-items: center;
  width: fit-content;
  font-size: calc(28 / var(--base-width-sp) * 100vw);
  font-weight: 500;
  line-height: calc(44 / 28);
  letter-spacing: 0.1em;
  background-color: #fff;
  border-radius: 100vw;
  color: #0068b7;
  padding-inline: calc(16 / var(--base-width-sp) * 100vw);

  @media screen and (width >=768px) {
    font-size: min(calc(16 / var(--base-width-pc) * 100vw), 1.6rem);
    line-height: calc(28 / 16);
    padding-inline: min(calc(16 / var(--base-width-pc) * 100vw), 16px);
  }
}

.c_people .p_people__boxPhoto {
  transition: opacity 0.2s ease-out;
}

@media screen and (any-hover: hover) {

  .c_people .p_people__box:hover .p_people__boxHead,
  .c_people .p_people__box:hover .p_people__boxPhoto {
    opacity: 0.7;
  }
}

.c_diverse {
  position: relative;
  z-index: 0;
  background-color: #fff;
  padding-top: calc(150 / var(--base-width-sp) * 100vw);
  padding-bottom: calc(100 / var(--base-width-sp) * 100vw);

  @media screen and (width >=768px) {
    padding-top: min(calc(108 / var(--base-width-pc) * 100vw), 108px);
    padding-bottom: min(calc(100 / var(--base-width-pc) * 100vw), 100px);
  }
}

.c_diverse .p_diverse__top {
  position: relative;
  z-index: 0;
  display: block;
  width: 100vw;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  padding-right: calc(70 / var(--base-width-sp) * 100vw);

  @media screen and (width >=768px) {
    width: min(calc(1180 / var(--base-width-pc) * 100vw), 1180px);
    padding-right: min(calc(50 / var(--base-width-pc) * 100vw), 50px);
    margin-block: auto;
  }
}

.c_diverse .p_diverse__title {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  font-family: var(--font-yugo);
  font-size: calc(64 / var(--base-width-sp) * 100vw);
  font-weight: 700;
  line-height: calc(90 / 64);
  letter-spacing: 0.1em;

  @media screen and (width >=768px) {
    font-size: min(calc(48 / var(--base-width-pc) * 100vw), 4.8rem);
    line-height: calc(74 / 48);
  }

  &>span {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #000;
    color: #fff;
    width: calc(120 / var(--base-width-sp) * 100vw);
    padding-inline: calc(34 / var(--base-width-sp) * 100vw);

    @media screen and (width >=768px) {
      width: min(calc(70 / var(--base-width-pc) * 100vw), 70px);
      padding-inline: min(calc(22 / var(--base-width-pc) * 100vw), 22px);
    }
  }

  &>span:last-of-type {
    margin-inline-start: calc(160 / var(--base-width-sp) * 100vw);
    position: relative;
    right: -1px;

    @media screen and (width >=768px) {
      margin-inline-start: min(calc(74 / var(--base-width-pc) * 100vw), 74px);
    }
  }
}

.c_diverse .p_diverse__read {
  font-size: calc(28 / var(--base-width-sp) * 100vw);
  font-weight: 500;
  line-height: calc(56 / 28);
  letter-spacing: 0.1em;
  margin-inline-start: calc(184 / var(--base-width-sp) * 100vw);
  margin-block-start: calc(70 / var(--base-width-sp) * 100vw);

  @media screen and (width >=768px) {
    font-size: min(calc(18 / var(--base-width-pc) * 100vw), 1.8rem);
    line-height: calc(28 / 18);
    margin-inline-start: min(calc(116 / var(--base-width-pc) * 100vw), 116px);
    margin-block-start: min(calc(34 / var(--base-width-pc) * 100vw), 34px);
  }
}

.c_diverse .p_diverse__lst {
  display: flex;
  flex-direction: column;
  width: calc(600 / var(--base-width-sp) * 100vw);
  margin-inline: auto;
  gap: calc(80 / var(--base-width-sp) * 100vw);

  @media screen and (width >=768px) {
    position: relative;
    z-index: 10;
    margin-top: max(calc(324 / var(--base-width-pc) * -100vw), -324px);
    display: block;
    width: min(calc(1180 / var(--base-width-pc) * 100vw), 1180px);
    padding-top: min(calc(1300 / var(--base-width-pc) * 100vw), 1300px);
  }
}

.c_diverse .p_diverse__item {
  @media screen and (width >=768px) {
    position: absolute;
    z-index: 10;

    &:nth-child(1) {
      top: calc(0 / var(--base-width-pc) * 100vw);
      left: calc(0 / var(--base-width-pc) * 100vw);
    }

    &:nth-child(2) {
      top: min(calc(414 / var(--base-width-pc) * 100vw), 414px);
      right: calc(0 / var(--base-width-pc) * 100vw);
    }

    &:nth-child(3) {
      top: min(calc(732 / var(--base-width-pc) * 100vw), 732px);
      left: calc(0 / var(--base-width-pc) * 100vw);
    }
  }
}

.c_diverse .p_diverse__box {
  position: relative;
  z-index: 0;
  display: block;
  width: 100%;
  height: auto;
  transform: translate(calc(26 / var(--base-width-sp) * 100vw), calc(26 / var(--base-width-sp) * 100vw));
  transition: opacity 0.3s ease-out;

  @media screen and (width >=768px) {
    width: min(calc(560 / var(--base-width-pc) * 100vw), 560px);
    transform: translate(min(calc(28 / var(--base-width-pc) * 100vw), 28px), min(calc(20 / var(--base-width-pc) * 100vw), 20px));
  }

  &::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(var(--gradient-angle), rgb(151, 199, 254) 0%, rgb(252, 199, 251) 100%);
    opacity: 0.8;
    border-radius: calc(100 / var(--base-width-sp) * 100vw);
    overflow: hidden;
    position: absolute;
    z-index: 0;
    inset: 0;
    margin: auto;

    @media screen and (width >=768px) {
      border-radius: 50px;
    }
  }
}

.c_diverse .p_diverse__boxPhoto {
  position: relative;
  z-index: 10;
  border-radius: calc(100 / var(--base-width-sp) * 100vw);
  overflow: hidden;
  transform: translate(calc(26 / var(--base-width-sp) * -100vw), calc(26 / var(--base-width-sp) * -100vw));
  transition: transform 0.2s ease-out;

  @media screen and (width >=768px) {
    border-radius: 50px;
    transform: translate(max(calc(20 / var(--base-width-sp) * -100vw), -20px), max(calc(20 / var(--base-width-sp) * -100vw), -20px));
  }
}

.c_diverse .p_diverse__boxLabel {
  position: absolute;
  z-index: 20;
  bottom: calc(54 / var(--base-width-sp) * 100vw);
  left: 0;
  right: 0;
  margin-inline: auto;
  display: flex;
  align-items: center;
  width: calc(530 / var(--base-width-sp) * 100vw);
  height: calc(96 / var(--base-width-sp) * 100vw);
  background-color: #fff;
  font-size: calc(32 / var(--base-width-sp) * 100vw);
  font-weight: 500;
  line-height: calc(36 / 32);
  letter-spacing: 0.1em;
  text-decoration: none;
  color: #000;
  padding-inline: calc(30 / var(--base-width-sp) * 100vw) calc(70 / var(--base-width-sp) * 100vw);
  transform: translate(calc(26 / var(--base-width-sp) * -100vw), calc(26 / var(--base-width-sp) * -100vw));
  transition: transform 0.2s ease-out, background-color 0.2s ease-out;

  @media screen and (width >=768px) {
    bottom: min(calc(14 / var(--base-width-pc) * 100vw), 14px);
    width: min(calc(498 / var(--base-width-pc) * 100vw), 498px);
    height: min(calc(78 / var(--base-width-pc) * 100vw), 78px);
    font-size: min(calc(24 / var(--base-width-pc) * 100vw), 2.4rem);
    line-height: calc(28 / 24);
    padding-inline: min(calc(18 / var(--base-width-pc) * 100vw), 18px) min(calc(66 / var(--base-width-pc) * 100vw), 66px);
    transform: translate(max(calc(20 / var(--base-width-sp) * -100vw), -20px), max(calc(20 / var(--base-width-sp) * -100vw), -20px));

    .is-sp {
      display: none;
    }
  }
}

.c_diverse .p_diverse__boxIco {
  position: absolute;
  z-index: 10;
  top: 0;
  right: calc(42 / var(--base-width-sp) * 100vw);
  bottom: 0;
  margin-block: auto;
  display: block;
  width: calc(20 / var(--base-width-sp) * 100vw);
  height: calc(20 / var(--base-width-sp) * 100vw);
  color: #000;

  @media screen and (width >=768px) {
    right: min(calc(40 / var(--base-width-pc) * 100vw), 40px);
    width: min(calc(15 / var(--base-width-pc) * 100vw), 15px);
    height: min(calc(15 / var(--base-width-pc) * 100vw), 15px);
  }
}

@media screen and (any-hover: hover) {

  .c_diverse .p_diverse__box:hover .p_diverse__boxPhoto,
  .c_diverse .p_diverse__box:hover .p_diverse__boxLabel {
    transform: translate(0, 0);
  }

  .c_diverse .p_diverse__box:hover .p_diverse__boxLabel {
    background-color: #0068b7;
    color: #fff;
  }

  .c_diverse .p_diverse__box:hover .p_diverse__boxIco {
    color: #fff;
  }
}

.c_recruit {
  background-color: #fff;
  padding-block: calc(100 / 750 * 100vw);

  @media screen and (width >=768px) {
    padding-block: 100px;
  }
}

.c_recruit .m_lower {
  margin-block: 0;
}

.c_work .p_work__area::before,
.c_people::before,
.c_diverse .p_diverse__box::before {
  will-change: background-image;
}

.a-visualeffects {

  .p_work__bg,
  .p_job__bg {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
  }

  .p_work__title,
  .p_job__title,
  .p_people__title,
  .p_diverse__title>span,
  .p_work__read,
  .p_job__read,
  .p_people__topArea,
  .p_diverse__read {
    visibility: hidden;
    clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
  }

  .p_work__title,
  .p_job__title,
  .p_work__read,
  .p_job__read {
    transition: clip-path 1.2s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.5s;
    transition-delay: 0.8s;
  }

  .p_people__title,
  .p_diverse__title>span,
  .p_people__topArea,
  .p_diverse__read {
    transition: clip-path 1.0s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .p_work__title>span,
  .p_job__title>span,
  .p_work__read>span,
  .p_job__read>span {
    display: inline-block;
    clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
    transition: clip-path 1.2s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: 1.5s;
  }

  .p_people__title>span,
  .p_diverse__title>span>span,
  .p_people__read,
  .p_diverse__read>span {
    display: inline-block;
    clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
    transition: clip-path 1.2s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: 0.8s;
  }
}

.a-visualeffects:not(.is-animated) {

  .p_work__bg,
  .p_job__bg {
    transform: translateY(30px);
  }
}

.a-visualeffects.is-animated,
.a-visualeffects.is-active {

  .p_work__bg,
  .p_job__bg {
    opacity: 1;
    visibility: visible;
  }

  .p_work__title,
  .p_job__title,
  .p_people__title,
  .p_diverse__title>span,
  .p_work__read,
  .p_job__read,
  .p_people__topArea,
  .p_diverse__read {
    visibility: visible;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  }

  .p_work__title>span,
  .p_job__title>span,
  .p_people__title>span,
  .p_diverse__title>span>span,
  .p_work__read>span,
  .p_job__read>span,
  .p_people__read,
  .p_diverse__read>span {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  }
}

.a-fadeInUp {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.a-fadeInUp:not(.is-animated) {
  transform: translateY(30px);
}

.a-fadeInUp.is-animated,
.a-fadeInUp.is-active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}