/* ========== h2 ========== */
.top h2 {
  font-family: 'Roboto', sans-serif;
  font-size: 10.821rem;
  font-style: italic;
  font-weight: bold;
  padding-top: .5em;
  text-align: center;
  margin-bottom: 2.5rem;
}
.top h2 span {
  font-size: 6.711rem;
  font-weight: 300;
}
.top h2 .common__title__h2_ja {
  display: block;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-style: normal;
  font-size: 2.4rem;
  font-weight: 400;
  margin-top: -1rem;
}


/* ========== line ========== */
.top .common__line {
  top: 96rem;
}

@media screen and (max-width:767px) {
  .top .common__line {
    top: 21%;
  }
}


/* ========== kv ========== */
.top__kv {
  position: relative;
  padding-bottom: 8rem;
}

.top__kv h1 {
  position: absolute;
  top: 11.5rem;
  left: 0;
  right: 0;
  margin: auto;
  transform: translateX(25rem);
  width: fit-content;
  font-size: 5.078rem;
  font-weight: 500;
  line-height: 1.3em;
  z-index: 2;
  animation: topSlide .4s both ease-in-out .5s;
  animation-delay: 1s;
}

.top__kv h1 .top__kv__h1--bg_blue {
  display: inline-block;
  background-color: #42a0d9;
  font-weight: 500;
}

.top__kv h1 .top__kv__h1--font_l {
  font-size: 6.487rem;
  font-weight: bold;
  line-height: 1.3em;
}

.top__kv__image--01,
.top__kv__image--02 {
  animation: topSlide .3s both ease-in-out .5s;
}

@keyframes topSlide {
  0% {
    clip-path: inset(0 100% 0 0);
  }
  100% {
    clip-path: inset(0 0 0 0);
  }
}

.top__kv__image--01 {
  background-image: url(../img/top/top__kv--01@2x.webp);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: right;
  margin-top: 2rem;
  height: 66.1rem;
  width: 72%;
  animation-delay: .3s;
}
.top__kv__image--02 {
  background-image: url(../img/top/top__kv--02@2x.webp);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: left;
  margin-top: -35rem;
  margin-left: auto;
  height: 44rem;
  width: 50%;
  animation-delay: .5s;
}

.top__kv .top__kv__letter {
  position: absolute;
  top: 37rem;
  left: 0;
  right: 0;
  margin: auto;
  transform: translateX(-36rem);
  width: 67rem;
}

#mask path,
#mask line{
  fill:none;
  stroke:#ffffff;
  stroke-width:7;
  stroke-dasharray: 1800px;
  stroke-dashoffset: 1800px;
  animation: line 4s forwards;
}

/* Animation for each path with delay */
#mask path:nth-child(1) {
  animation-duration: 3s;
  animation-delay: 1.5s;
}
#mask path:nth-child(2) {
  animation-delay: 2s;
}
#mask path:nth-child(3) {
  animation-delay: 2.3s;
}
#mask path:nth-child(4) {
  animation-delay: 2.7s;
}
#mask path:nth-child(5) {
  animation-delay: 2.8s;
}
#mask path:nth-child(6) {
  animation-duration: 3s;
  animation-delay: 3.3s;
}
#mask path:nth-child(7) {
  animation-delay: 3.5s;
}
#mask path:nth-child(8) {
  animation-delay: 3.8s;
}
#mask path:nth-child(9) {
  animation-duration: 2.5s;
  animation-delay: 4s;
}
#mask path:nth-child(10) {
  animation-duration: 3s;
  animation-delay: 4.3s;
}
#mask path:nth-child(11) {
  animation-delay: 4.6s;
}
#mask path:nth-child(12) {
  animation-delay: 4.8s;
}
#mask path:nth-child(13) {
  animation-delay: 5s;
}
#mask path:nth-child(14) {
  animation-delay: 5.2s;
}

@keyframes line{
  0%{stroke-dashoffset: 1800px;}
  100%{stroke-dashoffset: 0;}
}
#text{
  mask: url(top.css@20240828.css);
  fill: #000;
}


@media screen and (max-width:767px) {
  .top__kv {
    padding-top: 16rem;
    padding-bottom: 22rem;
  }

  .top__kv h1 {
    top: 5rem;
    left: 5rem;
    right: auto;
    transform: none;
  }

  .top__kv__image--01 {
    background-image: url(../img/top/top__kv--01--sp.webp);
    background-position: center;
    height: 65rem;
    width: 100%;
  }

  .top__kv__image--02 {
    background-position: left;
    margin-top: -20rem;
    height: 34rem;
    width: 60%;
  }

  .top__kv .top__kv__letter {
    top: 75rem;
    transform: translateX(-7rem);
  }
}


/* ========== top__message ========== */
.top__message {
  position: relative;
  padding: 0 13.6rem 11rem;
}

.top__message__text {
  font-size: 2.1rem;
  line-height: 3.7rem;
}

.top__message__text--bg_blue {
  font-size: 3.394rem;
  margin-top: 1em;
}

.top__message__text--bg_blue span {
  margin-bottom: .4em;
}

.top__message__image_01 {
  position: absolute;
  top: 6rem;
  right: -10rem;
  width: 44.2rem;
}

.top__message__image_02 {
  position: absolute;
  top: 23rem;
  left: -12rem;
  width: 20rem;
}

.top__message__image_03 {
  margin: 10rem -8rem 0 auto;
  width: 62.4rem;
}

@media screen and (max-width:767px) {
  .top__message {
    padding: 0 5.2rem 40rem;
    overflow: hidden;
  }

  .top__message__text {
    font-size: 2.8rem;
    line-height: 4.2rem;
  }

  .top__message__text--bg_blue {
    font-size: 4rem;
    letter-spacing: -0.04em;
    transform: scale(0.98, 1);
    margin-top: .8em;
  }

  .top__message__image_02 {
    top: unset;
    bottom: 15rem;
    left: 4.5rem;
    width: 22.81rem;
    z-index: 2;
  }

  .top__message__image_03 {
    margin-right: -15rem;
    width: 62.4rem;
  }
}


/* ========== top__about ========== */
.top__about {
  padding-bottom: 25rem;
}

.top__about h2 {
  text-align: right;
}

.top__about__lists {
  display: flex;
  justify-content: center;
  gap: 1rem;
}

.top__about__item {
  position: relative;
  width: 53.4rem;
  overflow: hidden;
}

.top__about__item p {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  color: #fff;
  text-align: center;
}

.top__about__item p span {
  display: block;
  font-size: 5.177rem;
  font-style: italic;
  margin-bottom: 2rem;
}

.top__about__item p::after {
  content: "";
  display: block;
  width: 4.64rem;
  height: 4.64rem;
  margin: 2rem auto 0;
  background-image: url(../img/common/common__btn__arrow.svg);
  background-size: 98%;
  background-repeat: no-repeat;
  transition: 0.4s;
}

.top__about__item img {
  transition: .6s all;
}

.top__about__item:hover img{
  transform:scale(1.1,1.1);
}

@media screen and (max-width: 767px) {
  .top__about {
    padding: 0 4.5rem 22rem;
  }

  .top__about__lists {
    flex-direction: column;
  }

  .top__about__item {
    width: 66.19rem;
  }

  .top__about__item p span {
    font-size: 6.408rem;
  }
}


/* ========== top__business ========== */
.top__business {
  position: relative;
  background: linear-gradient(0deg, #42a0d9 0%, #a8d8d8 100%);
  margin-top: 8rem;
  margin-bottom: 50rem;
  padding-bottom: 5rem;
  z-index: 1;
}

.top__business .common__inner {
  position: relative;
  z-index: 2;
}

.top__business .top__business__text--copy {
  position: absolute;
  top: -10rem;
  left: 0;
  right: 0;
  margin: auto;
  font-size: 5.81rem;
  transform: scale(0.9429, 1);
  width: 86.4rem;
  max-width: 100%;
}
.top__business .top__business__text {
  font-weight: 500;
  margin: auto;
  padding-bottom: 2rem;
  width: 50rem;
  line-height: 1.7;
}

.top__business__fig {
  background-color: #fff;
  padding: 3rem 5rem;
  margin: 0 auto 3rem;
  width: 86.4rem;
}

.top__business__fig p {
  font-size: 2.66rem;
  font-weight: 500;
  text-align: center;
  line-height: 1.4em;
}

.top__business__fig img {
  margin-top: 3rem;
  width: 100%;
}


.top__business__bg-font {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.top__business__bg-font img {
  position: absolute;
  opacity: 0;
  transition: .3s;
}

.top__business__bg-font.active img {
  opacity: .1;
}

@media screen and (min-width: 768px) {
  .top__business__bg-font img {
    left: 0;
    right: 0;
    margin: auto;
  }

  .top__business__bg-font img:nth-child(1) {
    top: -1rem;
    transform: translateX(-51rem);
    width: 31.01rem;
    transition-delay: .2s;
  }
  .top__business__bg-font img:nth-child(2) {
    top: 17rem;
    transform: translateX(-52rem);
    width: 47.96rem;
    transition-delay: .6s;
  }
  .top__business__bg-font img:nth-child(3) {
    bottom: 0rem;
    transform: translateX(-58rem);
    width: 12.22rem;
    transition-delay: 1.2s;
  }
  .top__business__bg-font img:nth-child(4) {
    top: -1rem;
    transform: translateX(45rem);
    width: 20.28rem;
    transition-delay: .4s;
  }
  .top__business__bg-font img:nth-child(5) {
    top: 16rem;
    transform: translateX(67rem);
    width: 13.8rem;
    transition-delay: .8s;
  }
  .top__business__bg-font img:nth-child(6) {
    bottom: -1.4rem;
    transform: translateX(40rem);
    width: 77.61rem;
    transition-delay: 1s;
  }
}

@media screen and (max-width: 767px) {
  .top__business {
    margin-bottom: 54rem;
    padding-bottom: 6.3rem;
  }

  .top__business .top__business__text--copy {
    left: 2rem;
  }

  .top__business .top__business__text {
    padding-bottom: 4rem;
    width: 58.1rem;
  }

  .top__business__fig {
    width: 100%;
  }

  .top__business__fig p {
    font-size: 2.8rem;
  }

  /* 課題解決 */
  .top__business__bg-font img:nth-child(1) {
    top: -1rem;
    left: -11rem;
    width: 31.01rem;
  }
  /* 探求心 */
  .top__business__bg-font img:nth-child(2) {
    top: 27.5rem;
    left: -11rem;
    width: 39.6rem;
  }
  /* 成長戦略 */
  .top__business__bg-font img:nth-child(3) {
    bottom: 5.4rem;
    left: 0;
    width: 8.76rem;
  }
  /* 野心 */
  .top__business__bg-font img:nth-child(4) {
    top: -2rem;
    right: -3.4rem;
    width: 17.08rem;
  }
  /* 採用に化学反応 */
  .top__business__bg-font img:nth-child(5) {
    bottom: 12rem;
    right: -0.8rem;
    width: 9.34rem;
  }
  /* 挑戦 */
  .top__business__bg-font img:nth-child(6) {
    bottom: 0rem;
    right: 1.8rem;
    width: 44.95rem;
  }
}


/* ========== top__staff ========== */
.top__staff {
  background: linear-gradient(40deg, #e4ecef 0%, #e4ecef 25%, transparent 25%, transparent 100%);
  padding-bottom: 26rem;
  margin-bottom: -15rem;
}

.top__staff__image--wrap {
  position: sticky;
  top: 50vh;
  transform: translateY(-50%);
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  z-index: -1;
}

.top__staff__image {
  width: 100%;
  height: 65.2rem;
  background-image: url(../img/top/top__staff__bg--pc.webp);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  z-index: 1;
}

.scroll-container {
  position: relative;
  height: 58rem;
  margin: 10rem;
  z-index: 2;
}

.top__staff__title {
  position: relative;
  margin: auto;
  display: block;
  width: fit-content;
  transition: top 1s;
}

.top__staff__title h2 {
  position: absolute;
  bottom: 0;
  left: 12rem;
  text-align: left;
}

.top__staff__title p {
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
}

.top__staff__title p span {
  display: inline-block;
  font-size: 5.81rem;
  background-color: #42a0d9;
}

.top__staff__splide {
  margin-top: -20rem;
}

.top__staff__splide .splide__slide {
  position: relative;
  padding: 5rem 3rem;
}

.top__staff__splide .top__staff__profile {
  position: absolute;
  bottom: 0;
  right: 0;
  background-image: url(../img/top/top__staff__profile__bg.webp);
  background-size: contain;
  background-repeat: no-repeat;
  padding: 2rem 0 0 2rem;
  height: 12rem;
  width: 24.48rem;
}

.top__staff__splide .top__staff__profile__affiliation {
  font-size: 1.36rem;
  letter-spacing: -0.02em;
}

.top__staff__splide .top__staff__profile__name--ja {
  font-size: 2.4rem;
  line-height: 1.4em;
}

.top__staff__splide .top__staff__profile__name--en {
  font-size: 1.28rem;
  font-style: italic;
  color: #42a0d9;
}

.top__staff__splide .top__staff__profile__join {
  font-size: 1.28rem;
  line-height: 1.4em;
}

.top__staff__splide .top__staff__slide__arrow {
  position: absolute;
  top: 45%;
  right: 0;
  left: 0;
  margin: auto;
  display: block;
  cursor: pointer;
  background: transparent;
  background: url(../img/top/top__staff__slide__arrow.svg) no-repeat center/100% auto;
  border: none;
  padding: 4px 0 0 0;
  width: 1.4rem;
  height: 3.53rem;
  z-index: 2;
  outline: none;
}
.top__staff__splide .top__staff__slide__arrow.top__staff__slide__arrow--prev {
  transform: rotate(180deg) translateX(25rem);
}
.top__staff__splide .top__staff__slide__arrow.top__staff__slide__arrow--next {
  transform: translateX(25rem);
}

.top__staff__btns {
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin-top: 10rem;
}

.top__staff__btns .common__btn__gray {
  margin: 0;
}

@media screen and (max-width: 767px) {
  .top__staff {
    background: linear-gradient(40deg, #e4ecef 0%, #e4ecef 25%, transparent 25%, transparent 100%);
    padding-bottom: 12.9rem;
  }

  .top__staff__image {
    background-image: url(../img/top/top__staff__bg--sp.webp);
  }

  .scroll-container {
    height: 72rem;
    margin: 10rem 0 20rem;
  }

  .top__staff__title h2 {
    position: unset;
    padding-top: .1em;
  }

  .top__staff__title p {
    margin-left: 6rem;
  }

  .top__staff__splide {
    margin-top: -30rem;
  }

  .top__staff__splide .splide__slide {
    padding: 5rem 3rem 10rem;
  }

  .top__staff__splide .top__staff__profile {
    padding-top: 3rem;
    height: 17rem;
    width: 35rem;
  }

  .top__staff__splide .top__staff__profile__affiliation {
    font-size: 2rem;
  }

  .top__staff__splide .top__staff__profile__name--ja {
    font-size: 3.3rem;
  }

  .top__staff__splide .top__staff__profile__name--en {
    font-size: 1.8rem;
  }

  .top__staff__splide .top__staff__profile__join {
    font-size: 1.8rem;
  }


  .top__staff__btns {
    align-items: center;
    flex-direction: column;
    gap: 2.5rem;
    margin-top: 3.4rem;
    margin-bottom: 13rem;
  }
}



/* ========== animation ========== */
.fadeIn {
  transition: 0.7s;
  opacity: 0;
}

.fadeUp {
  transition: 0.7s;
  opacity: 0;
  transform: translateY(10%);
}
.fadeUp.active {
  opacity: 1;
  transform: translateY(0);
}

.fadeInRight {
  transition: 0.7s;
  opacity: 0;
  transform: translateX(10%);
}
.fadeInRight.active {
  opacity: 1;
  transform: translateX(0);
}

.fadeInLeft {
  transition: 0.7s;
  opacity: 0;
  transform: translateX(-10%);
}
.fadeInLeft.active {
  opacity: 1;
  transform: translateX(0);
}

/* ========== / top ========== */