@charset "UTF-8";

/* =====================
  first-view
===================== */
.first-view {
  padding-top: 95rem;
  padding-bottom: 86rem;
  position: relative;
  &::before,
  &::after {
    content: '';
    position: absolute;
    display: inline-block;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    z-index: -1;
  }
  &::before {
    background-image: url(/recruit/assets/img/top/mv-dec03.svg);
    width: 59rem;
    height: 59rem;
    right: 32rem;
    bottom: 12rem;
  }
  &::after {
    background-image: url(/recruit/assets/img/top/mv-dec02.svg);
    width: 48rem;
    height: 46rem;
    right: 10rem;
    bottom: 13rem;
  }
}
.r-mv {
  width: 100%;
  position: relative;
}
.r-mv__image {
  width: 100%;
  aspect-ratio: 390 / 293;
}
.r-mv-text {
  margin: -25rem 24rem 0;
  position: relative;
  &::before {
    content: '';
    position: absolute;
    display: inline-block;
    background: url(/recruit/assets/img/top/mv-dec01.svg) no-repeat center / contain;
    width: 64rem;
    height: 61rem;
    top: -21rem;
    left: -8rem;
    z-index: -1;
  }
}
.r-mv-text--en {
  color: var(--color-text-primary);
  text-shadow: 3rem 2rem 0px var(--color-text-primary);
  -webkit-text-fill-color: var(--color-white);
  text-fill-color: var(--color-white);
  -webkit-text-stroke: 4rem var(--color-text-primary);
  text-stroke: 4rem var(--color-text-primary);
  paint-order: stroke;
  font-size: 64rem;
  line-height: 1;
  padding-block: 0.1em;
  transform: translateZ(0);
  will-change: transform;
}
.mv-text--ja {
  font-size: 18rem;
  line-height: 1.5;
  margin-top: 16rem;
}

/* =====================
  text-slider
===================== */
.text-slider__wrapper {
  color: var(--color-white);
  font-size: 72rem;
  line-height: 0.9;
  margin-block: 16rem 40rem;
  .swiper {
    overflow-y: inherit;
  }
  .swiper-slide-active,
  .swiper-slide-duplicate-active {
    transform: translate(0, 5rem);
  }
  .swiper-slide-prev,
  .swiper-slide-next,
  .swiper-slide-duplicate-prev,
  .swiper-slide-duplicate-next {
    transform: translate(0, 2.5rem);
  }

  .swiper-slide {
    transition: all 0.3s;
    height: auto;
  }
  .swiper-wrapper {
    -webkit-transition-timing-function: linear;
    transition-timing-function: linear;
  }
}
.text-slider--fast,
.text-slider--slow {
  text-wrap: nowrap;
  position: relative;
  &::after {
    content: '';
    position: absolute;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    border-radius: var(--img-round);
    display: block;
    z-index: 5;
  }
}
.text-slider--fast {
  padding-block-start: 16rem;
  &::after {
    width: 130rem;
    height: 82rem;
    top: 0;
    right: 32rem;
  }
}
.text-slider--slow {
  padding-block: 48rem 22rem;
  &::after {
    width: 161rem;
    height: 102rem;
    left: 48rem;
    bottom: 0;
  }
}
.text-slider__item {
  width: auto !important;
  padding-inline-start: 0.3em;
  &.coiny {
    padding-block: 0.09em;
  }
  .blue {
    color: var(--color-accent-blue);
  }
  .yellow {
    color: var(--color-accent-yellow);
  }
  .green {
    color: var(--color-accent-green);
  }
  .pink {
    color: var(--color-accent-pink);
  }
  .orange {
    color: var(--color-accent-orange);
  }
}

/* MV下 */
.text-slider__wrapper {
  &.mv-below {
    .text-slider--fast {
      &::after {
        background-image: url(/recruit/assets/img/top/sp-text-slider.webp);
      }
    }
    .text-slider--slow {
      &::after {
        background-image: url(/recruit/assets/img/top/sp-text-slider02.webp);
      }
    }
  }

  /* 下部 */
  &.lower-part {
    margin-block: 0;
    .text-slider--fast {
      &::after {
        background-image: url(/recruit/assets/img/top/sp-text-slider03.webp);
      }
    }
    .text-slider--slow {
      &::after {
        background-image: url(/recruit/assets/img/top/sp-text-slider04.webp);
      }
    }
  }
}

/* =====================
  about
===================== */
.r-about {
  position: relative;
}
.r-about-bg {
  display: grid;
  grid-template-columns: 33.85% 16.41% 11.03% 1fr;
  grid-template-rows: 106rem 106rem 104rem 72rem 219rem;
  gap: 8rem;
  margin-bottom: 16rem;
  position: relative;
  width: 100%;
  z-index: -1;
  &.is-fixed {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    z-index: -1;
  }
  &.is-end {
    position: absolute;
    left: 0;
    bottom: 0;
  }
  &::after {
    content: '';
    position: absolute;
    display: inline-block;
    background: url(/recruit/assets/img/top/about-bg-gradation.webp) repeat-x center / 104rem;
    width: 100%;
    height: 104rem;
    inset: 0 0 auto 0;
    z-index: 1;
  }
  & img {
    width: 100%;
    height: 100%;
    border-radius: var(--img-round);
    object-fit: cover;
  }
}
picture {
  &:has(.r-about-bg__image01) {
    grid-column: 1 / 4;
    grid-row: 3 / 5;
  }
  &:has(.r-about-bg__image02) {
    grid-column: 1 / 3;
    grid-row: 1 / 2;
  }
  &:has(.r-about-bg__image03) {
    grid-column: 1 / 3;
    grid-row: 2 / 3;
  }
  &:has(.r-about-bg__image04) {
    grid-column: 3 / 6;
    grid-row: 1 / 3;
  }
  &:has(.r-about-bg__image05) {
    grid-column: 4 / 6;
    grid-row: 3 / 4;
  }
  &:has(.r-about-bg__image06) {
    grid-column: 4 / 6;
    grid-row: 4 / 5;
  }
  &:has(.r-about-bg__image07) {
    grid-column: 1 / 2;
    grid-row: 5 / 6;
  }
  &:has(.r-about-bg__image08) {
    grid-column: 2 / 5;
    grid-row: 5 / 6;
  }
  &:has(.r-about-bg__image09) {
    grid-column: 5 / 6;
    grid-row: 5 / 6;
  }
}
.r-about-container {
  position: relative;
  z-index: 2;
  height: 100%;
  .inner--noBottom {
    height: 100%;
    display: grid;
    align-items: flex-end;
    padding-inline: 16rem;
  }
}
.r-about-text__wrapper {
  background-color: var(--color-background);
  padding: 80rem 24rem 56rem;
  border-top-left-radius: 179rem;
  border-top-right-radius: 179rem;
  position: relative;
  &::before,
  &::after {
    content: '';
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    position: absolute;
    display: inline-block;
    z-index: 1;
  }
  &::before {
    background-image: url(/recruit/assets/img/top/about-dec01.svg);
    width: 67rem;
    height: 63rem;
    top: 114rem;
    right: -18rem;
  }
  &::after {
    background-image: url(/recruit/assets/img/top/about-dec02.svg);
    width: 87rem;
    height: 88rem;
    left: -43rem;
    bottom: 105rem;
  }
}
.r-about-text {
  line-height: 1.9;
  > p {
    + p {
      margin-top: 16rem;
    }
  }
}

/* =====================
  number
===================== */
.r-number {
  margin-top: -40rem;
  background: url(/recruit/assets/img/common/bg-gray.webp) repeat center / 282px 282px;
  background-attachment: fixed;
  position: relative;
  &::before {
    content: '';
    display: inline-block;
    background: url(/recruit/assets/img/top/interview-dec.svg) no-repeat center / contain;
    width: 63rem;
    height: 60rem;
    position: absolute;
    top: -27rem;
    left: 18rem;
  }
}
.r-number-list__item {
  background-color: rgb(255 255 255 / 0.6);
  border-radius: var(--img-round);
  padding: 24rem;
  display: grid;
  grid-template-columns: auto 1fr;
  & + .r-number-list__item {
    margin-top: 12rem;
  }
  &:has(.horizontal) {
    .r-number-list__icon {
      grid-column: 1 / 3;
    }
    .r-number-list__result {
      grid-column: 1 / 3;
      display: flex;
      align-items: center;
      justify-content: flex-end;
    }
  }
}

.r-number-list__title {
  font-size: 18rem;
  line-height: 1.7;
  letter-spacing: 0.06em;
  margin-block-end: 8rem;
  grid-column: 1 / 3;
  &::before {
    content: '';
    border-radius: 50%;
    width: 14rem;
    height: 14rem;
    border: 4rem solid var(--color-accent-green);
    display: inline-block;
    margin-inline-end: 8rem;
  }
}
.r-number-list__icon {
  width: 72rem;
  aspect-ratio: 72 / 66;
  align-self: center;
  &.horizontal {
    width: 100%;
    aspect-ratio: 361 / 66;
  }
}
.r-number-list__result {
  margin-left: 8rem;
  text-align: right;
}
.r-number-list__value,
.r-number-list__value--ja,
.r-number-list__value--sm,
.r-number-list__colon {
  font-size: 68rem;
  letter-spacing: 0.02em;
  color: var(--color-accent-green);
  display: inline-block;
  font-variant-numeric: tabular-nums;
}
.r-number-list__value--ja {
  line-height: 1.2;
}
.r-number-list__unit--ja,
.r-number-list__unit--en {
  margin-left: 6rem;
  color: var(--color-accent-green);
}
.r-number-list__unit--ja {
  font-size: 24rem;
  line-height: 1.7;
  letter-spacing: 0.06em;
  &.sm {
    font-size: 22rem;
    letter-spacing: 0em;
  }
}
.r-number-list__value--sm {
  font-size: 44rem;
  &::before {
    content: '.';
    display: inline-block;
    padding-inline: 4rem;
  }
}
.r-number-list__text {
  margin-top: 8rem;
  font-size: 14rem;
  line-height: 1.7;
  letter-spacing: 0.04em;
  grid-column: 1 / 3;
}
.r-number-list__text--vertical {
  font-size: 14rem;
  writing-mode: vertical-rl;
  text-orientation: upright;
  letter-spacing: 0.2em;
}
.r-number-pair {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17ch;
  text-align: center;
  font-variant-numeric: tabular-nums;
  .r-number-list__value {
    display: inline-block;
    width: 1.2ch;
  }
  .r-number-list__colon {
    display: inline-block;
    width: 0.6ch;
    min-width: 0.6ch;
    text-align: center;
  }
}

/* =====================
  club
===================== */
.r-club {
  .box-container {
    background: url(/recruit/assets/img/common/bg-pink.webp) repeat center / 282px;
    background-attachment: fixed;
  }
}