@charset "UTF-8";
/* =====================
  header
===================== */
.page__top {
  .header {
    background-image: linear-gradient(#00000030, transparent);
  }
}

/* =====================
  first-view
===================== */
.first-view {
  width: 100%;
  height: max(768px, 100svh);
  position: relative;
  overflow: hidden;
  &::before {
    content: '';
    display: inline-block;
    background: url(/assets/img/top/mv-dec.webp) no-repeat center / contain;
    position: absolute;
    right: 0;
    bottom: 0;
    width: 591rem;
    height: 535rem;
    z-index: 2;
    mix-blend-mode: screen;
    animation: pulsate infinite 6s ease-in-out;
    transform-origin: bottom right;
  }
}
@keyframes pulsate {
  0% {
    opacity: 0;
    transform: scale(1);
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: scale(1.5);
  }
}

/* mv */
.mv {
  width: 100%;
  height: 100%;
}
.mv__item {
  overflow: hidden;
}
.swiper-slide-active,
.swiper-slide-duplicate-active,
.swiper-slide-prev {
  .mv__block {
    animation: zoomUp 7s linear 0s normal both;
  }
}
.mv__block {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
@keyframes zoomUp {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.08);
  }
}
.mv__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* mv-text */
.mv-text {
  position: absolute;
  bottom: 18.89%;
  left: 6.67%;
  z-index: 1;
  color: #fff;
  font-feature-settings: 'palt';
  .mincho {
    line-height: 1.5;
  }
}
.mv-text--sm {
  font-size: 20rem;
  padding-inline-start: 6rem;
  margin-block-end: 16rem;
}
.mv-text--lg {
  font-size: 56rem;
}
.mv-text-en {
  font-size: 22rem;
  padding-inline-start: 6rem;
  margin-block-start: 40rem;
}

/* news */
.news {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 1;
  color: #fff;
  min-height: 64rem;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  &::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    width: 100%;
    height: 1rem;
    background-color: rgb(255 255 255 / 0.2);
    z-index: -1;
  }
}
.news__title {
  font-size: 24rem;
  text-transform: uppercase;
  width: 147rem;
  height: 100%;
  background-color: var(--color-primary);
  > a {
    display: grid;
    align-content: center;
    width: 100%;
    height: 100%;
    padding-inline: 40rem;
  }
}
.news__content {
  padding: 20rem 120rem 20rem 40rem;
  display: grid;
  grid-template-columns: auto auto 1fr;
  column-gap: 24rem;
  align-items: center;
}
.news__date {
  font-size: 14rem;
}
.news__category {
  font-size: 11rem;
  line-height: 1.5;
  padding-inline: 24rem;
  border: var(--border) var(--color-white);
}
.news__text {
  text-wrap: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  font-size: 14rem;
  letter-spacing: 0.06em;
  text-decoration: underline;
  text-decoration-color: rgb(255 255 255 / 0.4);
  text-underline-offset: 0.2em;
  .text-link--blank {
    color: var(--color-white);
    text-decoration: underline;
    text-decoration-color: rgb(255 255 255 / 0.4);
    text-underline-offset: 0.2em;
    .icon--square {
      margin: calc((1lh - 18rem) / 2) 0 calc((1lh - 18rem) / 2);
    }
  }
}

/* banner */
.banner {
  position: absolute;
  right: 40rem;
  bottom: 96rem;
  z-index: 10;
}
.banner__bg {
  background-color: var(--color-primary);
}
.banner__block {
  color: var(--color-white);
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  column-gap: 16rem;
  width: 424rem;
  height: 144rem;
  padding: 24rem 16rem 24rem 32rem;
  position: relative;
  .icon--square {
    width: 25rem;
  }
}
.banner__text {
  > p {
    font-size: 13rem;
  }
}
.banner__title {
  > span {
    line-height: 1.5;
    &:first-child {
      font-size: 13rem;
      padding-inline: 24rem;
      border: var(--border) var(--color-white);
    }
    &:nth-child(2) {
      display: block;
      font-size: 18rem;
      margin-block: 8rem;
    }
  }
}
.banner__image {
  width: 120rem;
  aspect-ratio: 120 / 96;
}

/* =====================
      about
===================== */
.top-about {
  padding-block-end: 80rem;
  background: url(/assets/img/top/about-bg.webp) no-repeat center bottom / cover;
  color: var(--color-white);
  & h2 {
    font-size: 40rem;
    line-height: 1.7;
    margin-block-end: 32rem;
  }
}
.top-about__text {
  line-height: 2.6;
}
.top-about__list {
  margin-top: 64rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 24rem;
}
.top-about__list-item {
  padding: 24rem 32rem;
  background-color: rgb(238 250 255 / 0.2);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  position: relative;
  &::before,
  &::after {
    content: '';
    position: absolute;
    z-index: 1;
    width: 48rem;
    height: 48rem;
  }
  &::before {
    border-top: solid 2rem var(--color-primary);
    border-left: solid 2rem var(--color-primary);
    top: -1rem;
    left: -1rem;
  }
  &::after {
    border-bottom: solid 2rem var(--color-primary);
    border-right: solid 2rem var(--color-primary);
    bottom: -1rem;
    right: -1rem;
  }
  & h3 {
    font-size: 24rem;
    line-height: 1.7;
    margin-block-end: 8rem;
  }
}

/* =====================
      service
===================== */
.top-service {
  position: relative;
  &::after {
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    width: calc((100% - 1440rem) / 2 + 480rem);
    height: 1120rem;
    background-color: #dfeafb;
    z-index: -1;
  }
}
.service__item {
  position: relative;
  & + .service__item {
    margin-top: 56rem;
  }
}
.service__item-image {
  width: 928rem;
  aspect-ratio: 928 / 372;
}
.service__item-block {
  background-color: var(--color-background);
  width: 584rem;
  padding: 48rem;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  > a {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    column-gap: 40rem;
    .icon {
      transition: transform 0.3s ease-in-out 0s;
      width: 34rem;
      height: 9rem;
    }
    @media (any-hover: hover) {
      &:hover {
        .icon {
          transform: translateX(8rem);
        }
      }
    }
  }
}
.service__item-title--ja {
  font-size: 26rem;
  line-height: 1.7;
  margin-bottom: 4rem;
}
.service__item-title--en {
  color: #97a1b3;
  margin-block-end: 24rem;
}

/* =====================
      company / sdgs
===================== */
.top-link__wrapper {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  width: 100%;
  container-type: inline-size;
  container-name: top-link;
}
.top-link__block {
  color: var(--color-white);
  padding: 144rem 160rem;
}
.top-company,
.top-sdgs {
  position: relative;
  overflow: hidden;
  &::before {
    content: '';
    position: absolute;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    inset: 0;
    z-index: -1;
    transition: transform 0.5s ease-in-out 0s;
    transform: scale(1.01);
  }
  &:has(.btn--white:hover) {
    @media (any-hover: hover) {
      &::before {
        transform: scale(1.06);
      }
    }
  }
}
.top-company {
  @container top-link (min-width: 1440px) {
    padding-inline: calc((50vw - 400rem) / 2);
  }
  &::before {
    background-image: url(/assets/img/top/company-bg.webp);
  }
}
.top-sdgs {
  @container top-link (min-width: 1440px) {
    padding-inline: calc((50vw - 400rem) / 2);
  }
  &::before {
    background-image: url(/assets/img/top/sdgs-bg.webp);
  }
}

/* =====================
      recruit
===================== */
.top-recruit {
  background: url(/assets/img/top/recruit-bg.webp) no-repeat center / cover;
  padding-bottom: 112rem;
  .inner {
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: 96rem;
    position: relative;
  }
}
.top-recruit__text {
  position: relative;
  z-index: 10;
}
.top-recruit__image {
  width: 504rem;
  aspect-ratio: 504 / 708;
}
picture {
  &:has(.top-recruit__image) {
    position: relative;
    z-index: 0;
    &::before {
      content: '';
      position: absolute;
      right: 225rem;
      bottom: -152rem;
      width: 544rem;
      height: 326rem;
      background-color: #e2f2fe;
      z-index: -1;
    }
  }
}
picture {
  &:has(.top-recruit__image--absolute) {
    position: absolute;
    left: 0;
    bottom: -112rem;
  }
}
.top-recruit__image--absolute {
  width: 560rem;
  aspect-ratio: 560 / 272;
}

/* =====================
  animation
===================== */
.top-about__list-item {
  &.fadeIn {
    &:nth-child(2) {
      transition-delay: 0.2s;
    }
    &:nth-child(3) {
      transition-delay: 0.4s;
    }
  }
}