@charset "UTF-8";

/* =====================
  first-view
===================== */
.first-view {
  padding-top: 76rem;
  padding-bottom: 84rem;
}
.r-mv {
  /* width: 75.97vw; */
  width: 1094rem;
  margin-inline: auto;
  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: 200rem;
    height: 201rem;
    right: -24rem;
    bottom: 84rem;
  }
  &::after {
    background-image: url(/recruit/assets/img/top/mv-dec02.svg);
    width: 163rem;
    height: 155rem;
    right: -98rem;
    bottom: 89rem;
  }
}
.r-mv__image {
  width: 100%;
  aspect-ratio: 1094 / 673;
}
.r-mv-text {
  margin: -241rem 72rem 0;
  display: grid;
  grid-template-columns: repeat(2, auto);
  justify-content: space-between;
  align-items: last baseline;
  position: relative;
  &::before {
    content: '';
    position: absolute;
    display: inline-block;
    background: url(/recruit/assets/img/top/mv-dec01.svg) no-repeat center / contain;
    width: 112rem;
    height: 107rem;
    top: -48rem;
    left: -56rem;
    z-index: -1;
  }
}
.r-mv-text--en {
  color: var(--color-text-primary);
  text-shadow: 7rem 5rem 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: 136rem;
  line-height: 1;
  transform: translateZ(0);
  will-change: transform;
}
.mv-text--ja {
  font-size: 32rem;
  line-height: 1.4;
  text-align: right;
}

/* =====================
  text-slider
===================== */
.text-slider__wrapper {
  color: var(--color-white);
  font-size: 104rem;
  line-height: 0.9;
  margin-block: 32rem 80rem;
  .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: 208rem;
    height: 132rem;
    top: 0;
    left: calc(50% + 312rem);
  }
}
.text-slider--slow {
  padding-block: 48rem 28rem;
  &::after {
    width: 296rem;
    height: 188rem;
    left: calc(50% - 520rem);
    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/text-slider.webp);
      }
    }
    .text-slider--slow {
      &::after {
        background-image: url(/recruit/assets/img/top/text-slider02.webp);
      }
    }
  }

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

/* =====================
  about
===================== */
.r-about {
  position: relative;
}
.r-about-bg {
  display: grid;
  grid-template-columns: 21.3% 10.23% 22.44% 9.09% 19.34% 1fr;
  grid-template-rows: 16.67vw 16.67vw 22.99vw 22.99vw;
  gap: 16rem;
  margin: 0 16rem 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 / 3;
    grid-row: 1 / 3;
  }
  &:has(.r-about-bg__image02) {
    grid-column: 3 / 5;
    grid-row: 1 / 2;
  }
  &:has(.r-about-bg__image03) {
    grid-column: 3 / 5;
    grid-row: 2 / 3;
  }
  &:has(.r-about-bg__image04) {
    grid-column: 5 / 7;
    grid-row: 1 / 3;
  }
  &:has(.r-about-bg__image05) {
    grid-column: 1 / 2;
    grid-row: 3 / 4;
  }
  &:has(.r-about-bg__image06) {
    grid-column: 1 / 2;
    grid-row: 4 / 5;
  }
  &:has(.r-about-bg__image07) {
    grid-column: 2 / 4;
    grid-row: 3 / 5;
  }
  &:has(.r-about-bg__image08) {
    grid-column: 4 / 6;
    grid-row: 3 / 5;
  }
  &:has(.r-about-bg__image09) {
    grid-column: 6 / 7;
    grid-row: 3 / 5;
  }
}
.r-about-container {
  position: relative;
  z-index: 2;
  height: 100%;
  .inner--noBottom {
    height: 100%;
    display: grid;
    align-items: flex-end;
  }
}
.r-about-text__wrapper {
  background-color: var(--color-background);
  margin-inline: 160rem;
  padding: 160rem 120rem 136rem;
  border-top-left-radius: 440rem;
  border-top-right-radius: 440rem;
  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: 107rem;
    height: 102rem;
    top: 185rem;
    right: 0;
  }
  &::after {
    background-image: url(/recruit/assets/img/top/about-dec02.svg);
    width: 174rem;
    height: 176rem;
    left: -63rem;
    bottom: 232rem;
  }
}
.r-about-text {
  > p {
    + p {
      margin-top: 24rem;
    }
  }
}

/* =====================
  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: 122rem;
    height: 116rem;
    position: absolute;
    top: -73rem;
    left: 67rem;
  }
}
.r-number-list {
  display: grid;
  grid-template-columns: 32.44% 15.6% 7.88% 6.3% 1fr;
  grid-auto-rows: auto;
  gap: 16rem;
  width: 100%;
}
.r-number-list__item {
  background-color: rgb(255 255 255 / 0.6);
  border-radius: var(--img-round);
  padding: 24rem 32rem;
  display: grid;
  grid-template-columns: auto 1fr;
  &:nth-child(1) {
    grid-column: 1 / 2;
  }
  &:nth-child(2) {
    grid-column: 2 / 5;
  }
  &:nth-child(3) {
    grid-column: 5 / 6;
  }
  &:nth-child(4) {
    grid-column: 1 / 3;
    grid-row: 2 / 3;
  }
  &:nth-child(5) {
    grid-column: 3 / 6;
    grid-row: 2 / 3;
  }
  &:nth-child(6) {
    grid-column: 1 / 2;
    grid-row: 3 / 4;
  }
  &:nth-child(7) {
    grid-column: 2 / 5;
    grid-row: 3 / 4;
  }
  &:nth-child(8) {
    grid-column: 5 / 6;
    grid-row: 3 / 4;
  }
  &:nth-child(9) {
    grid-column: 1 / 4;
    grid-row: 4 / 5;
    width: 703rem;
  }
  &:nth-child(10) {
    grid-column: 4 / 6;
    grid-row: 4 / 5;
    width: 480rem;
  }
}
.r-number-list__title {
  font-size: 20rem;
  line-height: 1.7;
  letter-spacing: 0.06em;
  margin-block-end: 24rem;
  grid-column: 1 / 3;
  &::before {
    content: '';
    border-radius: 50%;
    width: 16rem;
    height: 16rem;
    border: 4rem solid var(--color-accent-green);
    display: inline-block;
    margin-inline-end: 8rem;
  }
}
.r-number-list__icon {
  width: 83rem;
  aspect-ratio: 83 / 66;
  align-self: center;
  &.horizontal {
    width: 361rem;
    aspect-ratio: 361 / 66;
  }
}
.r-number-list__result {
  margin-left: 16rem;
  text-align: right;
}
.r-number-list__value,
.r-number-list__value--ja,
.r-number-list__value--sm,
.r-number-list__colon {
  font-size: 88rem;
  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: 40rem;
  line-height: 1.7;
  letter-spacing: 0.06em;
}
.r-number-list__value--sm {
  font-size: 56rem;
  &::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;
  }
}