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

/* =====================
  first-view
===================== */
.first-view {
  width: 100%;
  height: 100svh;
  position: relative;
  overflow: hidden;
  @media screen and (min-width: 500px) {
    height: 725rem;
  }
  &::before {
    content: '';
    display: inline-block;
    background: url(/assets/img/top/sp-mv-dec.webp) no-repeat center / contain;
    position: absolute;
    right: 0;
    bottom: 0;
    width: 255rem;
    height: 180rem;
    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.12);
  }
}
.mv__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* mv-text */
.mv-text {
  position: absolute;
  top: 19.45%;
  left: 8.21%;
  z-index: 1;
  color: #fff;
  font-feature-settings: 'palt';
  .mincho {
    line-height: 1.5;
  }
}
.mv-text--sm {
  font-size: 16rem;
  padding-inline-start: 2rem;
  margin-block-end: 16rem;
}
.mv-text--lg {
  font-size: 30rem;
}
.mv-text-en {
  font-size: 14rem;
  padding-inline-start: 2rem;
  margin-block-start: 16rem;
}

/* news */
.news {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 1;
  color: #fff;
  min-height: 72rem;
  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: 17rem;
  text-transform: uppercase;
  height: 100%;
  background-color: var(--color-primary);
  > a {
    display: grid;
    align-content: center;
    width: 100%;
    height: 100%;
    padding-inline: 14rem;
  }
}
.news__content {
  padding: 16rem;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: repeat(2, auto);
  gap: 6rem 8rem;
  align-items: center;
}
.news__date {
  font-size: 11rem;
}
.news__category {
  font-size: 9rem;
  line-height: 1.5;
  padding-inline: 16rem;
  border: var(--border) var(--color-white);
  display: inline-block;
  width: fit-content;
}
.news__text {
  text-wrap: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  font-size: 12rem;
  letter-spacing: 0.06em;
  text-decoration: underline;
  text-decoration-color: rgb(255 255 255 / 0.4);
  text-underline-offset: 0.2em;
  grid-column: 1 / 3;
  .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 - 16rem) / 2) 0 calc((1lh - 16rem) / 2) 0rem;
    }
  }
}

/* banner */
.banner {
  position: absolute;
  right: 0;
  bottom: 105rem;
  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: 8rem;
  height: 108rem;
  padding: 16rem 8rem 16rem 16rem;
  position: relative;
  .icon--square {
    width: 23rem;
  }
}
.banner__text {
  > p {
    font-size: 11rem;
  }
}
.banner__title {
  > span {
    line-height: 1.5;
    &:first-child {
      font-size: 12rem;
      padding-inline: 24rem;
      border: var(--border) var(--color-white);
    }
    &:nth-child(2) {
      display: block;
      margin-block: 6rem 8rem;
    }
  }
}
.banner__image {
  width: 88rem;
  aspect-ratio: 120 / 96;
}

/* =====================
      about
===================== */
.top-about {
  padding-block-end: 56rem;
  background: url(/assets/img/top/sp-about-bg.webp) no-repeat center bottom / cover;
  color: var(--color-white);
  & h2 {
    font-size: 25rem;
    line-height: 1.7;
    margin-block-end: 16rem;
  }
}
.top-about__text {
  line-height: 2.6;
  position: relative;
  z-index: 10;
}
.top-about__list {
  margin-top: 24rem;
  padding-inline: 16rem;
}
.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;
  & + .top-about__list-item {
    margin-top: 16rem;
  }
  &::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: 22rem;
    line-height: 1.7;
    margin-block-end: 8rem;
  }
}

/* =====================
      service
===================== */
.top-service {
  position: relative;
  overflow-x: hidden;
  &::after {
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    width: 270rem;
    height: 1383rem;
    background-color: #dfeafb;
    z-index: -1;
  }
  .inner {
    padding-block-start: 0;
  }
}
.service__item {
  width: 100vw;
  margin: 0 calc(50% - 50vw);
  & + .service__item {
    margin-top: 56rem;
  }
}
.service__item-image {
  width: 100vw;
  aspect-ratio: 390 / 264;
  margin: 0 calc(50% - 50vw);
}
.service__item-block {
  margin: -72rem 16rem 0;
  background-color: var(--color-background);
  padding: 24rem 32rem 32rem;
  > a {
    .icon {
      transition: transform 0.3s ease-in-out 0s;
      width: 34rem;
      height: 9rem;
      margin: 18rem 0 0 auto;
      display: block;
    }
    @media (any-hover: hover) {
      &:hover {
        .icon {
          transform: translateX(8rem);
        }
      }
    }
  }
}
.service__item-title--ja {
  font-size: 22rem;
  line-height: 1.7;
}
.service__item-title--en {
  font-size: 12rem;
  color: #97a1b3;
  margin-block-end: 16rem;
}
/* =====================
      company / sdgs
===================== */
.top-link__block {
  color: var(--color-white);
  padding: 72rem 32rem;
}
.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 {
  &::before {
    background-image: url(/assets/img/top/sp-company-bg.webp);
  }
}
.top-sdgs {
  &::before {
    background-image: url(/assets/img/top/sp-sdgs-bg.webp);
  }
}

/* =====================
      recruit
===================== */
.top-recruit {
  background: url(/assets/img/top/sp-recruit-bg.webp) no-repeat center / cover;
  padding-bottom: 135rem;
  overflow-x: hidden;
  .inner {
    position: relative;
  }
  .dec-brackets__image {
    margin-inline: auto;
  }
}
.top-recruit__text {
  margin-bottom: 72rem;
}
.top-recruit__image {
  width: 276rem;
  aspect-ratio: 276 / 388;
}
picture {
  &:has(.top-recruit__image) {
    position: relative;
    z-index: 0;
    &::before {
      content: '';
      position: absolute;
      right: -57rem;
      bottom: -113rem;
      width: 259rem;
      height: 155rem;
      background-color: #e2f2fe;
      z-index: -1;
    }
  }
}
picture {
  &:has(.top-recruit__image--absolute) {
    position: absolute;
    left: 0;
    bottom: -135rem;
  }
}
.top-recruit__image--absolute {
  width: 261rem;
  aspect-ratio: 261 / 127;
}