#youtube,
#youtube-area {
  width: 100%;
  height: 100%;
  position: relative;
}

#youtube {
  position: absolute;
  pointer-events: none;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 178vh;
  height: 56vw;
  min-height: 100%;
  min-width: 100%;
}

.hero-main {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 100%;
  height: fit-content;
  max-width: 82rem;
  margin: auto;
  color: #fff;
  z-index: 2;
  text-align: center;
  opacity: 0;
  transition: 1.5s;
}
.hero-main.is-active {
  opacity: 1;
}

#youtube-area {
  opacity: 0;
  transition: 0.2s;
}
#youtube-area.is-active {
  opacity: 1;
}

.top-main-content {
  overflow-x: clip;
}

.hero {
  height: 76.8rem;
  height: 100vh;
  background-color: var(--color-black);
}
@media (max-width: 767px) {
  .hero {
    height: 66.7rem;
  }
}
.hero__mv {
  top: 0 !important;
}
.hero__mv-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero__title {
  font-size: 4.4rem;
  font-weight: bold;
}
@media (max-width: 767px) {
  .hero__title {
    font-size: 2.8rem;
  }
}
.hero__lead {
  font-size: 1.4rem;
  font-family: var(--font-en);
  font-weight: 500;
}
@media (max-width: 767px) {
  .hero__lead {
    font-size: 1.2rem;
  }
}
.hero__logo {
  position: absolute;
  width: 3.98rem;
  inset: -3.3rem auto auto 0;
}
@media (max-width: 767px) {
  .hero__logo {
    width: 2.2rem;
    inset: -3rem auto auto 1.5rem;
  }
}
.hero__logo--2 {
  transform: scale(-1);
  inset: auto 0 5.7rem auto;
}
@media (max-width: 767px) {
  .hero__logo--2 {
    inset: auto 1.5rem 9rem auto;
  }
}
.hero__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  padding: 0 16rem;
}
@media (max-width: 767px) {
  .hero__tags {
    padding: 0 2rem;
    gap: 1rem 0.5rem;
  }
}
.hero__tag {
  padding: 0.3rem 1.5rem 0.2rem;
  background-color: #fff;
  border-radius: 3rem;
  width: fit-content;
  font-size: 1.2rem;
  color: var(--color-black);
}
@media (max-width: 767px) {
  .hero__tag {
    padding: 0.1rem 0.5rem 0.2rem;
  }
}

.top-section3 {
  min-height: 100vh;
  overflow-x: clip;
  position: relative;
}
.top-section3 .js-section__pin {
  z-index: 2;
}
.top-section3__inner {
  position: relative;
  z-index: 3;
}
.top-section3__bg1 {
  position: absolute;
  inset: auto 0 0;
  height: 54.5rem;
  width: 100%;
  background-color: var(--color-light-gray);
}

.intro {
  padding-bottom: 20rem;
}

.intro-mv {
  position: relative;
  margin-top: 6rem;
  height: 52rem;
}
@media (max-width: 767px) {
  .intro-mv {
    margin-top: 2.5rem;
    height: 50rem;
  }
}
.intro-mv__body {
  color: #fff;
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  text-align: center;
  padding: 5rem;
}
@media (max-width: 767px) {
  .intro-mv__body {
    padding: 1.5rem;
  }
}
.intro-mv__image {
  position: relative;
  border-radius: 3rem;
  overflow: hidden;
}
@media (max-width: 767px) {
  .intro-mv__image {
    border-radius: 1.5rem;
    height: 100%;
  }
  .intro-mv__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
.intro-mv__image::before {
  content: "";
  width: 100%;
  height: 100%;
  opacity: 0.3;
  background-color: #212121;
  inset: 0;
  position: absolute;
}
.intro-mv__l-text {
  font-size: 12rem;
  font-family: var(--font-en);
  font-weight: bold;
  line-height: 1;
  margin-top: 2rem;
}
.intro-mv__s-text {
  font-size: 1.4rem;
  font-weight: 500;
  margin-bottom: 3.5rem;
}
.intro-mv__items {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.8rem;
}
@media (max-width: 767px) {
  .intro-mv__items {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    grid-auto-rows: 12rem;
  }
}
.intro-mv__item {
  border: solid 1px #fff;
  border-radius: 1rem;
  font-weight: bold;
  padding: 1.5rem 1.5rem 1rem;
}
@media (max-width: 767px) {
  .intro-mv__item {
    padding: 1rem 0.5rem;
  }
}
@media print, screen and (min-width: 768px) {
  .intro-mv__item-text {
    height: 3em;
    align-content: center;
  }
}
@media (max-width: 767px) {
  .intro-mv__item-text {
    height: 4rem;
    display: flex;
    align-items: center;
    font-size: 1.4rem;
    text-align: center;
    justify-content: center;
  }
  .intro-mv__item-text.irgr1 {
    font-size: 1.1rem;
  }
}
.intro-mv__item-value {
  line-height: 1;
  font-family: var(--font-en);
  font-size: 6.4rem;
  font-size: 5.5rem;
  letter-spacing: 0.1em;
}
@media (max-width: 767px) {
  .intro-mv__item-value {
    letter-spacing: 0.05em;
    font-size: 3.2rem;
    margin-top: 1rem;
    white-space: nowrap;
  }
}
.intro-mv__item-value span {
  font-size: 2.8rem;
  margin-left: 1.5rem;
  letter-spacing: 0;
  font-family: var(--font);
}
@media (max-width: 767px) {
  .intro-mv__item-value span {
    margin-left: 0.5rem;
    font-size: 2rem;
  }
}

.intro-description {
  display: grid;
  grid-template-columns: 1fr 52rem;
  gap: 8rem;
  align-items: center;
}
@media (max-width: 767px) {
  .intro-description {
    display: flex;
    flex-direction: column-reverse;
    gap: 2.5rem;
  }
}
.intro-description__image {
  position: relative;
}
@media (max-width: 767px) {
  .intro-description__image {
    height: 37.2rem;
  }
}
.intro-description__image > img {
  border-radius: 2rem;
}
@media print, screen and (min-width: 768px) {
  .intro-description__image > img {
    height: 56rem;
  }
}
.intro-description__image-illust {
  position: absolute;
}
.intro-description__image-illust--1 {
  width: 17.5rem;
  inset: -5rem auto auto 1.3rem;
}
@media (max-width: 767px) {
  .intro-description__image-illust--1 {
    width: 11.2rem;
    inset: -2.5rem auto auto 1rem;
  }
}
.intro-description__image-illust--2 {
  width: 22.2rem;
  inset: auto 0 -10.1rem auto;
}
.client {
  overflow: hidden;
  margin-bottom: 5rem;
}
@media (max-width: 767px) {
  .client {
    margin-bottom: 3.5rem;
  }
  .client__image-illust {
    position: absolute;
    width: 12rem;
    inset: -2rem 1.5rem auto auto;
  }
}
.client__lists {
  display: flex;
  gap: 2rem;
}
@media (max-width: 767px) {
  .client__lists {
    height: 7.7rem;
  }
}
.client__list {
  display: flex;
  gap: 2rem;
  animation: holizon-animation 30s linear infinite;
}
.client__list > * {
  flex: 0 0 16rem;
  max-width: 16rem;
}
@media (max-width: 767px) {
  .client__list > * {
    flex: 0 0 11.6rem;
    max-width: 11.6rem;
  }
}

.our-service {
  display: grid;
  grid-template-columns: 52rem 1fr;
  gap: 10rem;
}
@media (max-width: 767px) {
  .our-service {
    display: flex;
    flex-direction: column-reverse;
  }
  .our-service__image {
    height: 37.2rem;
  }
}

.recruit {
  background-color: var(--accent1);
  padding: 9rem 7rem 11rem;
  border-radius: 1.5rem;
  margin: 4rem 0 5.85rem;
  position: relative;
  color: #fff;
}
@media (max-width: 767px) {
  .recruit {
    padding: 5rem 1.5rem;
    margin-bottom: 5rem;
  }
}
.recruit__illust {
  position: absolute;
  width: 31.6rem;
  inset: -12rem 6.2rem auto auto;
}
@media (max-width: 767px) {
  .recruit__illust {
    width: 14.2rem;
    inset: -7rem 0 auto auto;
  }
}
.recruit__ruby {
  font-family: var(--font-en);
  letter-spacing: 0.1em;
  font-size: 1.6rem;
  font-weight: bold;
}
.recruit__body {
  position: relative;
}
.recruit__logos {
  display: flex;
  gap: 1em;
  position: absolute;
  top: 10rem;
}
.recruit__logo {
  white-space: nowrap;
  font-size: 14.4rem;
  font-weight: bold;
  letter-spacing: 0.05em;
  opacity: 0.1;
  animation: holizon-animation 30s linear infinite;
}
@media (max-width: 767px) {
  .recruit__logo {
    font-size: 8rem;
  }
}
.recruit__title {
  font-size: 4.8rem;
  letter-spacing: 0.05em;
  padding-bottom: 1rem;
  border-bottom: 1px solid #fff;
  margin-bottom: 5rem;
}
@media (max-width: 767px) {
  .recruit__title {
    margin-top: 0.5rem;
    font-size: 2.8rem;
    margin-bottom: 2.5rem;
  }
}
.recruit__title2 {
  font-size: 6.4rem;
  line-height: 8rem;
  font-size: 4.8rem;
  line-height: 6rem;
  letter-spacing: 0.05em;
  margin-bottom: 3.5rem;
}
@media print, screen and (min-width: 768px) {
  .recruit__title2 {
    white-space: nowrap;
  }
}
@media (max-width: 767px) {
  .recruit__title2 {
    font-size: 3.2rem;
    line-height: 4rem;
    margin-bottom: 2.5rem;
    letter-spacing: 0;
  }
}
@media print, screen and (min-width: 768px) {
  .recruit__row1 {
    display: grid;
    grid-template-columns: 1fr 30rem;
    gap: 9rem;
    align-items: end;
  }
}

.job {
  position: relative;
}
.job__illust {
  position: absolute;
  width: 13.4rem;
  inset: auto auto -8rem 7rem;
  z-index: 2;
}
@media (max-width: 767px) {
  .job__illust {
    width: 6.4rem;
    inset: auto auto -3.3rem 1.5rem;
  }
}
.job__illust--2 {
  width: 13.8rem;
  inset: auto auto -8rem 21.4rem;
}
@media (max-width: 767px) {
  .job__illust--2 {
    inset: auto auto -3.3rem 7.9rem;
    width: 6.46rem;
  }
}

.job-items {
  padding-bottom: 9.5rem;
}
@media (max-width: 767px) {
  .job-items {
    padding-bottom: 5rem;
  }
}

.job-item {
  padding: 5rem 0;
  display: grid;
  grid-template-columns: 1fr 69rem;
  gap: 8rem;
  justify-content: space-between;
  align-items: center;
  border-top: solid 1px #aaaaaa;
  border-bottom: solid 1px #aaaaaa;
}
@media (max-width: 767px) {
  .job-item {
    display: flex;
    flex-direction: column-reverse;
    gap: 3rem;
  }
}
.job-item:first-child {
  margin-top: 3.5rem;
  border-top: solid 1px var(--color-black);
  border-bottom: 0;
}
@media (max-width: 767px) {
  .job-item:first-child {
    margin-top: 2.5rem;
  }
}
@media print, screen and (min-width: 768px) {
  .job-item .c-button {
    width: 23rem;
  }
}
.job-item__no {
  font-size: 1.6rem;
  letter-spacing: 0.2em;
  font-family: var(--font-en);
  color: var(--accent1);
  font-weight: bold;
}
@media (max-width: 767px) {
  .job-item__no {
    font-size: 1.4rem;
    margin-bottom: 0.5rem;
  }
}
.job-item__title {
  font-size: 3.6rem;
  font-weight: bold;
  margin-bottom: 1rem;
}
@media (max-width: 767px) {
  .job-item__title {
    font-size: 2.4rem;
    margin-bottom: 0.5rem;
  }
}
.job-item__ruby {
  font-family: var(--font-en);
  letter-spacing: 0.2em;
  font-weight: bold;
  color: #aaaaaa;
  margin-bottom: 3.5rem;
}
@media (max-width: 767px) {
  .job-item__ruby {
    font-size: 1.4rem;
    margin-bottom: 2.5rem;
  }
}
.job-item__image img {
  width: 38rem;
  height: 30rem;
  object-fit: cover;
  border-radius: 15rem;
  border: solid 1px #212121;
}
@media (max-width: 767px) {
  .job-item__image img {
    width: 100%;
    height: 27.2rem;
    border-radius: 13.5rem;
  }
}
@media print, screen and (min-width: 768px) {
  .job-item__bar {
    background-color: #efefef;
    display: grid;
    grid-template-columns: 38rem 1fr;
    gap: 4rem;
    align-items: center;
    border-radius: 15rem;
  }
}

.top-section3 {
  padding-bottom: 20rem;
}

.interview {
  background-color: var(--accent3);
  padding: 4.85rem 7rem 10rem;
  border-radius: 1.5rem;
  overflow-x: clip;
  position: relative;
}
@media (max-width: 767px) {
  .interview {
    padding: 5rem 1.5rem;
  }
}
.interview__sep {
  border-top: 1px solid #fff;
  margin: 4rem auto 5rem;
}
@media (max-width: 767px) {
  .interview__sep {
    margin: 2.5rem auto;
  }
}
@media print, screen and (min-width: 768px) {
  .interview .c-interview-card__title-main {
    font-size: 2.8rem;
  }
}
.interview .c-section-headline__title {
  color: #fff;
}

.interview-carousel-progress {
  width: 100rem;
  background-color: #efefef;
  margin: 5rem auto;
}
@media (max-width: 767px) {
  .interview-carousel-progress {
    width: 100%;
    margin: 3.5rem auto;
  }
}

.interview-carousel-progress-bar {
  background-color: var(--accent2);
  height: 10px;
  transition: width 1000ms ease;
  width: 0;
}
@media (max-width: 767px) {
  .interview-carousel-progress-bar {
    height: 0.5rem;
  }
}

.interview .splide__track {
  margin-right: calc(50% - 50vw);
}
.interview .splide__arrows {
  display: flex;
  gap: 2rem;
}
@media (max-width: 767px) {
  .interview .splide__arrows {
    display: none;
  }
}
.interview .splide__arrow {
  inset: 0;
  position: relative;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20id%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97_18280%22%20data-name%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97%2018280%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2260%22%20height%3D%2260%22%20viewBox%3D%220%200%2060%2060%22%3E%20%3Ccircle%20id%3D%22%E6%A5%95%E5%86%86%E5%BD%A2_30%22%20data-name%3D%22%E6%A5%95%E5%86%86%E5%BD%A2%2030%22%20cx%3D%2230%22%20cy%3D%2230%22%20r%3D%2230%22%20fill%3D%22%23fff%22%2F%3E%20%3Cg%20id%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97_16699%22%20data-name%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97%2016699%22%20transform%3D%22translate(23.522%2025)%22%3E%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_29185%22%20data-name%3D%22%E3%83%91%E3%82%B9%2029185%22%20d%3D%22M0%2C0%2C5.331%2C6.715%2C10.646%2C0%22%20transform%3D%22translate(6.715%200)%20rotate(90)%22%20fill%3D%22%23fff%22%20stroke%3D%22%23505050%22%20stroke-width%3D%222%22%2F%3E%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_29186%22%20data-name%3D%22%E3%83%91%E3%82%B9%2029186%22%20d%3D%22M977.933-127.017h13.429%22%20transform%3D%22translate(-977.933%20132.34)%22%20fill%3D%22%23fff%22%20stroke%3D%22%23505050%22%20stroke-width%3D%222%22%2F%3E%20%3C%2Fg%3E%3C%2Fsvg%3E");
  background-size: contain;
  width: 6rem;
  height: 6rem;
  border-radius: 100%;
  transform: scaleX(1);
  outline: 0 !important;
}
.interview .splide__arrow--next {
  transform: scaleX(-1);
}

.interview-slide-navi {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.top-section4 {
  z-index: 4;
  position: relative;
}

@media print, screen and (min-width: 768px) {
  .topics__head {
    display: flex;
    justify-content: space-between;
    align-items: end;
    margin-top: 7rem;
  }
}
@media (max-width: 767px) {
  .topics__head {
    margin: 3rem auto 2.5rem;
  }
}
@media print, screen and (min-width: 768px) {
  .topics__row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10rem;
    position: relative;
  }
}
.topics__row::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 1px;
  height: 100%;
  background-image: linear-gradient(to bottom, var(--color-black) 4px, transparent 4px);
  background-size: 1px 8px;
  background-repeat: repeat-y;
}
.topics .c-topic-list--top {
  position: relative;
}
@media print, screen and (min-width: 768px) {
  .topics .c-topic-list--top::before {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 1px;
    height: 100%;
    background-image: linear-gradient(to bottom, var(--color-black) 4px, transparent 4px);
    background-size: 1px 8px;
    background-repeat: repeat-y;
  }
}
@media print, screen and (min-width: 768px) {
  .topics .c-topic-list--top {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 10rem;
  }
}
@media print, screen and (min-width: 768px) {
  .topics .c-topic-list--top .c-topic:nth-child(5) {
    border-bottom: 0;
    padding-bottom: 0;
    margin-bottom: 0;
  }
}
@media (max-width: 767px) {
  .topics .c-topic-list--top .c-topic:nth-child(3) {
    border-bottom: 0;
    padding-bottom: 0;
    margin-bottom: 0;
  }
  .topics .c-topic-list--top .c-topic:nth-child(n+4) {
    display: none;
  }
}