@charset "utf-8";

.top__fv {
  padding: 10px 10px 10px;
}

.top__fv-inner {
  margin-inline: auto;
  border-radius: 10px;
  overflow: hidden;
  width: 100%;
  height: auto;
  aspect-ratio: 375/667;
  position: relative;
}

@media screen and (min-width: 768px) {
  .top__fv-inner {
    aspect-ratio: 1346/749;
  }
}

.top__fv-inner::after {
  position: absolute;
  content: "";
  z-index: 2;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.48);
  pointer-events: none;
}

.top__fv-contain {
  position: absolute;
  top: 40%;
  left: 9.6%;
  z-index: 3;
  color: var(--color-white);
}

.top__fv-title {
  font-size: clamp(12px, 1.1vw, 15px);
  font-weight: 600;
  letter-spacing: calc(200 / 1000 * 1em);
  line-height: calc(24 / 15);
}

.top__fv-text {
  margin-top: 11px;
  font-size: clamp(20px, 2.79vw, 38px);
  font-weight: 700;
  letter-spacing: calc(50 / 1000 * 1em);
  line-height: calc(62 / 38);
}

.top__fv-slider {
  width: 100%;
  height: 100%;
}

.top__fv-swiper {
  width: 100%;
  height: 100%;
}

.top__fv-swiper-slide {
  width: 100%;
  height: 100%;
}

.top__fv-swiper-slide-image {
  width: 100%;
  height: 100%;
}

.top__fv-swiper-slide-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* ===========================
about
============================ */
.top__about {
  padding-top: 80px;
}

@media screen and (min-width: 768px) {
  .top__about {
    padding-top: 170px;
  }

  .top__about-inner.l-inner {
    max-width: calc(741px + 40px * 2);
  }

  .top__about-inner .title__en {
    margin-left: -10px;
  }
}

.top__about-container {
  margin-top: 43px;
  display: flex;
  flex-direction: column;
}

@media screen and (min-width: 768px) {
  .top__about-container {
    flex-direction: row;
    justify-content: space-between;
  }
}

.top__about-head {
  margin-block: auto;
}

.top__about-head-text {
  font-size: clamp(30px, 2.93vw, 40px);
  font-weight: 700;
}

.top__about-head-text + .top__about-head-text {
  margin: 82px 31px 0 0;
}

.top__about-bottom {
  margin-top: 52px;
  width: 100%;
  max-width: 414px;
  margin-inline: auto;
}

@media screen and (min-width: 768px) {
  .top__about-bottom {
    margin-top: 32px;
  }
}

@media screen and (min-width: 768px) {
  .top__about-bottom {
    max-width: 414px;
    margin-inline: auto 10px;
  }
}

.top__about-bottom-text {
  font-size: 12px;
  font-weight: 500;
  line-height: calc(30 / 15);
}

@media screen and (min-width: 414px) {
  .top__about-bottom-text {
    font-size: clamp(13px, 1.1vw, 15px);
  }
}

.top__about-bottom-text + .top__about-bottom-text {
  margin-top: 30px;
}

.top__about-button {
  margin-top: 45px;
}

.top__about-slider {
  margin-top: 100px;
}

@media screen and (min-width: 768px) {
  .top__about-slider {
    margin-top: 156px;
    width: 100%;
  }
}

.top__about-swiper-wrapper {
  transition-timing-function: linear;
}

.top__about-swiper-slide {
  width: auto;
  height: clamp(100px, 32.95vw, 450px);
  aspect-ratio: 530/450;
  border-radius: 10px;
  overflow: hidden;
}

.top__about-swiper-image {
  width: auto;
  height: 100%;
}

.top__about-swiper-image img {
  object-fit: cover;
  object-position: center;
  width: 100%;
  height: 100%;
}

/* ===========================
service
============================ */
.top__service {
  margin-top: 100px;
}

@media screen and (min-width: 768px) {
  .top__service {
    margin-top: 186px;
  }
}

.top__service-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 30px;
}

@media screen and (min-width: 768px) {
  .top__service-inner {
    gap: 10px;
    flex-direction: row;
    align-items: stretch;
    justify-content: space-between;
  }
}

.top__service-box {
  width: 100%;
  position: relative;
  padding-bottom: 258px;
}

@media screen and (min-width: 500px) {
  .top__service-box {
    padding-bottom: 100px;
  }
}

@media screen and (min-width: 768px) {
  .top__service-box {
    padding-bottom: 183px;
  }
}

@media screen and (min-width: 1000px) {
  .top__service-box {
    padding-bottom: 100px;
  }
}

.top__service-box-image {
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 668/528;
}

.top__service-box-image img {
  object-fit: cover;
  object-position: center;
  width: 100%;
  height: 100%;
}

.top__service-box-container {
  position: absolute;
  max-width: 300px;
  bottom: 0;
  right: -1px;
  border-radius: 10px;
  background: #f8f8f5;
  padding: 47px 43px 36px 36px;
}

@media screen and (min-width: 500px) {
  .top__service-box-container {
    max-width: 393px;
  }
}

@media screen and (min-width: 768px) {
  .top__service-box-container {
    max-width: 300px;
  }
}

@media screen and (min-width: 1000px) {
  .top__service-box-container {
    max-width: 393px;
  }
}

.top__service-box-container .title__en {
  margin-left: -10px;
}

.top__service-box-title-ja {
  margin-top: 18px;
}

.top__service-box-text {
  margin-top: 16px;
}

.top__service-box-button {
  margin-top: 34px;
}

/* ===========================
works
============================ */
.top__works {
  margin-top: 92px;
}

.top__works-inner {
  position: relative;
}

.top__works-slider {
  width: 100%;
}

.top__works-swiper-slide-image {
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 355/300;
  width: 100%;
  height: auto;
}

@media screen and (min-width: 500px) {
  .top__works-swiper-slide-image {
    aspect-ratio: 1346/590;
  }
}

.top__works-swiper-slide-image img {
  object-fit: cover;
  object-position: center;
  width: 100%;
  height: 100%;
}

.top__works-box {
  text-align: center;
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.top__works-box-title {
  font-size: clamp(30px, 2.93vw, 40px);
  font-weight: 600;
  color: var(--color-white);
  letter-spacing: calc(50 / 1000 * 1em);
}

.top__works-box .title__en {
  margin-top: 10px;
  color: var(--color-white);
}

.top__works-box-button {
  margin-top: 26px;
}

/* ===========================
recruit
============================ */
.top__recruit {
  margin-top: clamp(100px, 13.77vw, 188px);
  padding-bottom: 258px;
}

@media screen and (min-width: 768px) {
  .top__recruit {
    padding-bottom: 0;
  }
}

.top__recruit-inner {
  position: relative;
}

.top__recruit-head-title {
  position: absolute;
  top: -8.5%;
  left: 32px;
  font-size: clamp(40px, 7.03vw, 96px);
  font-weight: 600;
  letter-spacing: calc(100 / 1000 * 1em);
  line-height: 1.2;
  color: var(--color-title-en);
}

.top__recruit-bg {
  margin-inline: 0 auto;
  border-radius: 10px;
  aspect-ratio: 355/280;
  overflow: hidden;
  max-width: 1085px;
  width: clamp(340px, 79.43vw, 1085px);
}

@media screen and (min-width: 768px) {
  .top__recruit-bg {
    aspect-ratio: 1085/670;
  }
}

.top__recruit-bg img {
  object-fit: cover;
  object-position: center;
  width: 100%;
  height: 100%;
}

.top__recruit-box {
  max-width: 300px;
  border-radius: 10px;
  position: absolute;
  right: 0;
  padding: 44px 40px 38px 30px;
  background: #f8f8f5;
  bottom: -90%;
}

@media screen and (min-width: 400px) {
  .top__recruit-box {
    bottom: -67%;
  }
}

@media screen and (min-width: 600px) {
  .top__recruit-box {
    bottom: -44%;
    max-width: 393px;
  }
}

@media screen and (min-width: 768px) {
  .top__recruit-box {
    bottom: 9.1%;
  }
}

.top__recruit-box .title-ja {
  margin-top: 18px;
}

.top__recruit-box .description__base {
  margin-top: 16px;
}

.top__recruit-box .top__recruit-button {
  margin-top: 34px;
}

/* ===========================
recruit
============================ */
.top__news {
  padding-block: 80px 100px;
}

@media screen and (min-width: 768px) {
  .top__news {
    padding-block: 160px 130px;
  }
}

.top__news-inner {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

@media screen and (min-width: 768px) {
  .top__news-inner {
    flex-direction: row;
    justify-content: space-between;
    gap: clamp(20px, 8.35vw, 114px);
  }
}

.top__news-box {
  padding-left: 3px;
}

@media screen and (min-width: 768px) {
  .top__news-box {
    max-width: 323px;
  }
}

.top__news-box .title__en {
  margin-left: -9px;
}

.top__news-box .title-ja {
  margin-top: 22px;
}

.top__news-box .description__base {
  margin-top: 16px;
}

.top__news-box-button {
  margin-top: 28px;
}

.top__news-contents {
  width: 100%;
}

.top__news-contents .webgene-blog {
  width: 100%;
  margin-top: 15px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.news__item-link {
  display: block;
  padding: 20px 15px;
  background: var(--color-white);
  border-radius: 10px;
  position: relative;
}

@media screen and (min-width: 768px) {
  .news__item-link {
    padding: 34px 39px 26px;
  }
}

.news__item-link::after {
  position: absolute;
  content: "";
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
  background: url(../images/arrow-icon.svg) no-repeat center center/contain;
  aspect-ratio: 30/30;
  width: 30px;
  height: auto;
  transition: right 0.3s ease;
}

.news__item-link:hover::after {
  right: 15px;
}

@media screen and (min-width: 768px) {
  .news__item-link::after {
    right: 39px;
  }

  .news__item-link:hover::after {
    right: 35px;
  }
}

.news__item-row {
  display: flex;
  align-items: center;
  gap: 20px;
}

.news__item-time {
  font-size: 13px;
  line-height: 1.2;
}

.news__item-tag {
  border-radius: 3px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: calc(80 / 1000 * 1em);
  line-height: 1.2;
  padding: 3px 7px;
  color: #dc2e1e;
  border: 1px solid #dc2e1e;
  background: var(--color-white);
}

.news__item-title {
  width: 84%;
  margin-top: 15px;
  font-size: clamp(14px, 1.18vw, 16px);
  font-weight: 500;
  line-height: calc(35.2 / 16);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

@media screen and (min-width: 900px) {
  .news__item-title {
    -webkit-line-clamp: 1;
    line-clamp: 1;
  }
}