.fv {
  height: 560px;
  overflow: hidden;
  position: relative;
}

.fv-slide {
  height: 100%;
}
.fv-slide::after {
  background: rgba(0, 0, 0, 0.5);
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 1;
}
.fv-slide .swiper-wrapper,
.fv-slide .swiper-slide {
  height: 100%;
}
.fv-slide.swiper-fade .swiper-slide {
  background-color: #111;
  transition-property: opacity;
}
.fv-slide__item {
  height: 100%;
  overflow: hidden;
}
.fv-slide__item img {
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transform: scale(1);
  transform-origin: center center;
  width: 100%;
  will-change: transform;
}

.fv__copy {
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  z-index: 2;
}
.fv__copy h1 {
  color: #ffffff;
  font-size: clamp(1.25rem, 1.0134964682rem + 1.0090817356vw, 1.875rem);
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: calc(45 / 30);
  text-align: center;
}

.fv-ticker {
  background: rgba(49, 49, 49, 0.95);
  border-radius: 10px;
  bottom: 24px;
  box-shadow: 7px 7px 14px 0 rgba(114, 114, 114, 0.3);
  height: 52px;
  left: 16px;
  overflow: hidden;
  position: absolute;
  right: 16px;
  z-index: 2;
}
.fv-ticker .bg-text__wrap {
  align-items: center;
  gap: 0;
  height: 100%;
}
.fv-ticker .bg-text {
  align-items: center;
  animation: infinity-scroll-left 100s infinite linear 0.5s both;
  color: #ffffff;
  display: flex;
  font-size: 16px;
  font-weight: 600;
  line-height: calc(32 / 16);
  padding-inline: 28px;
  white-space: nowrap;
}
.intro__img-wrap {
  display: flex;
  flex-direction: column;
  gap: 25px;
  max-width: 330px;
  width: 100%;
}

.intro {
  overflow: hidden;
  padding-block: 56px 72px;
}
.intro__bg {
  align-items: flex-start;
  display: block;
  display: flex;
  height: 100%;
  inset: 0;
  justify-content: center;
  padding-inline: 20px;
  padding-top: 40px;
  position: absolute;
  width: 100%;
  z-index: 0;
}
.intro__bg img {
  aspect-ratio: 853/643;
  height: auto;
  -o-object-fit: contain;
     object-fit: contain;
}
.intro__title {
  color: #303131;
  font-size: clamp(1.5rem, 1.3580978809rem + 0.6054490414vw, 1.875rem);
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: calc(48 / 30);
  margin-bottom: 24px;
  max-width: 415px;
  position: relative;
  z-index: 1;
}
.intro__lead {
  max-width: 100%;
  position: relative;
  z-index: 1;
}
.intro__lead p:not(:first-child) {
  margin-top: 13px;
}
.intro__visual {
  align-items: center;
  display: flex;
  gap: 20px;
  justify-content: space-around;
  margin-top: 40px;
  position: relative;
  z-index: 1;
}
.intro__deco {
  flex-shrink: 0;
  max-width: 380px;
  pointer-events: visible;
  width: 50%;
}
.intro__deco img {
  height: auto;
  -o-object-fit: contain;
     object-fit: contain;
  width: 100%;
}
.intro__img {
  border-radius: 10px;
  box-shadow: 0 9px 14px 0 #9da0b1;
  overflow: hidden;
  pointer-events: auto;
}
.intro__img img {
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
}
.intro__img--1 {
  aspect-ratio: 360/402;
  grid-column: 1/-1;
  margin-left: auto;
  margin-right: 20px;
  max-width: 360px;
  width: 80%;
}
.intro__img--2 {
  aspect-ratio: 251/223;
  width: 57%;
}
.intro__img--3 {
  aspect-ratio: 166/185;
  margin-left: auto;
  margin-top: -35%;
  width: 38%;
}

.service {
  background-color: #f9f9fa;
  padding-block: 56px 72px;
}
.service .c-title {
  margin-bottom: 28px;
}
.service .c-offer {
  margin-top: 60px;
}
.service__note {
  margin-bottom: 40px;
  max-width: 648px;
}
.service__list {
  display: flex;
  flex-direction: column;
  gap: 50px;
}

.service-group {
  display: flex;
  flex-direction: column-reverse;
  gap: 60px;
}
.service-group--reverse {
  flex-direction: column;
}
.service-group__body {
  display: flex;
  flex-direction: column;
  gap: 50px;
  margin-inline: auto;
  max-width: 538px;
  width: 100%;
}
.service-group__visual {
  height: 265px;
  margin-inline: -20px;
  max-width: none;
  overflow: hidden;
  position: relative;
  width: calc(100% + 40px);
}
.service-group__slide {
  height: 100%;
  overflow: hidden;
  width: 100%;
}
.service-group__slide:not(.swiper-initialized) .swiper-wrapper {
  transition: none;
}
.service-group__img {
  aspect-ratio: 297/265;
  border-radius: 10px;
  height: auto;
  overflow: hidden;
  width: 226px;
}
.service-group__img img {
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
}

.service-item .c-desc {
  max-width: 434px;
}
.service-item__links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 30px;
}
.company {
  padding-block: 72px 56px;
}

.company-banner {
  border: 1px solid #bdbdbd;
  border-radius: 20px;
  color: #ffffff;
  display: block;
  margin-top: 40px;
  overflow: hidden;
  position: relative;
}
.company-banner:hover {
  color: #ffffff;
  opacity: 1;
}
.company-banner:hover .company-banner__img img {
  transform: scale(1.04);
}
.company-banner:hover .c-btn-more::after {
  transform: translateX(4px);
}
.company-banner__img {
  height: 100%;
  inset: 0;
  position: absolute;
  width: 100%;
}
.company-banner__img img {
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: transform 0.6s ease;
  width: 100%;
}
.company-banner__img::after {
  background: linear-gradient(to bottom, rgba(35, 160, 218, 0.7), rgba(228, 220, 181, 0.7));
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
}
.company-banner__body {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 280px;
  padding: 65px 25px;
  pointer-events: none;
  position: relative;
  text-align: center;
  z-index: 1;
}
.company-banner__title {
  font-size: clamp(1.125rem, 1.0303985873rem + 0.4036326942vw, 1.375rem);
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: calc(37 / 22);
  pointer-events: auto;
}
.company-banner__text {
  font-size: 14px;
  font-weight: 700;
  line-height: calc(32 / 14);
  margin-top: 20px;
  max-width: 408px;
  pointer-events: auto;
}

.instagram {
  padding-block: 40px 40px;
}
.instagram__list {
  margin-top: 40px;
}
.instagram__list > .webgene-blog {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr));
}

.instagram-item {
  color: #333333;
  display: block;
}
.instagram-item:hover {
  color: #333333;
}
.instagram-item__img {
  aspect-ratio: 1/1;
  border-radius: 10px;
  overflow: hidden;
}
.instagram-item__text {
  color: #333333;
  font-size: 14px;
  font-weight: 700;
  line-height: 2;
  margin-top: 6px;
}

.instaCont .imgBx01 {
  display: block;
  padding: 0 0 100% 0;
  position: relative;
}

.instaCont .imgBx01 img,
.instaCont .imgBx01 video {
  bottom: 0;
  height: auto;
  left: 0;
  margin: auto;
  max-height: 100%;
  max-width: 100%;
  position: absolute;
  right: 0;
  top: 0;
  width: auto;
}

.instaCont .imgBx01 > span {
  bottom: 0;
  height: auto;
  left: 0;
  margin: auto;
  max-height: 100%;
  max-width: 100%;
  position: absolute;
  right: 0;
  top: 0;
  width: auto;
}

.instaCont .imgBx01 > img + span,
.instaCont .imgBx01 > video + span {
  display: none;
}

.instaCont .webgene-item-main-video {
  display: block;
  max-width: 100%;
  width: auto;
}

@media (width >= 768px) {
  .intro__visual {
    margin-inline: auto;
    max-width: 600px;
  }
  .instagram__list {
    margin-top: 57px;
  }
  .instagram__list > .webgene-blog {
    gap: 33px;
  }
}

@media (width >= 1024px) {
  .fv {
    height: 768px;
  }
  .fv__copy {
    padding-top: 60px;
  }
  .fv-ticker {
    bottom: 38px;
    height: 63px;
    left: 160px;
    right: 160px;
  }
  .fv-ticker .bg-text {
    animation: infinity-scroll-left 50s infinite linear 0.5s both;
  }
  .intro__img-wrap {
    height: 100%;
    inset: 0;
    max-width: 100%;
    position: absolute;
    z-index: 0;
  }
  .intro {
    overflow: visible;
    padding-block: 0;
  }
  .intro .c-layout__inner {
    min-height: 996px;
    padding-block: 151px 200px;
  }
  .intro__bg {
    height: auto;
    padding-top: 0;
    right: 0px;
    top: 190px;
    width: 100%;
    z-index: 0;
  }
  .intro__bg img {
    height: auto;
    margin-left: auto;
    max-width: 853px;
    width: 100%;
  }
  .intro__title {
    margin-bottom: 47px;
  }
  .intro__lead {
    max-width: 433px;
  }
  .intro__lead p:not(:first-child) {
    margin-top: 30px;
  }
  .intro__visual {
    display: block;
    gap: 16px;
    height: 100%;
    left: 0;
    margin-top: 0;
    max-width: 100%;
    pointer-events: none;
    position: absolute;
    top: 0;
    width: 100%;
  }
  .intro__deco {
    bottom: 0;
    left: 20px;
    position: absolute;
    z-index: 0;
  }
  .intro__img--1 {
    height: auto;
    margin: 0;
    max-width: 360px;
    position: absolute;
    right: calc(15 / 1366 * 100vw);
    top: 140px;
    width: calc(360 / 1366 * 100vw);
    z-index: 2;
  }
  .intro__img--2 {
    height: auto;
    max-width: 251px;
    position: absolute;
    right: calc(243 / 1366 * 100vw);
    top: 611px;
    width: calc(251 / 1366 * 100vw);
    z-index: 2;
  }
  .intro__img--3 {
    height: auto;
    margin: 0;
    max-width: 166px;
    position: absolute;
    right: calc(29 / 1366 * 100vw);
    top: 758px;
    width: calc(166 / 1366 * 100vw);
    z-index: 2;
  }
  .service {
    margin-top: 117px;
    padding-block: 95px 120px;
  }
  .service .c-offer {
    margin-top: 80px;
  }
  .service__note {
    margin-bottom: 68px;
  }
  .service__list {
    gap: 130px;
  }
  .service-group {
    align-items: stretch;
    flex-direction: row;
    gap: 70px;
    justify-content: space-between;
  }
  .service-group--reverse {
    flex-direction: row-reverse;
  }
  .service-group__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 60px;
    min-width: 0;
    padding-bottom: 27px;
  }
  .service-group__visual {
    align-self: stretch;
    flex: 0 0 297px;
    height: auto;
    margin-inline: 0;
    overflow: visible;
    width: 297px;
  }
  .service-group__slide {
    border-radius: 10px;
    height: auto;
    inset: 0;
    position: absolute;
  }
  .service-group__img {
    border-radius: 0;
    width: 100%;
  }
  .service-item__inner {
    padding-left: 20px;
  }
  .company {
    padding-block: 110px 80px;
  }
  .company-banner {
    margin-top: 60px;
  }
  .company-banner__body {
    min-height: 422px;
  }
  .instagram {
    padding-block: 37px 30px;
  }
}

@media (width >= 1366px) {
  .intro__deco {
    left: 40px;
    width: 380px;
  }
  .intro__img--1 {
    right: 15px;
  }
  .intro__img--2 {
    right: 243px;
  }
  .intro__img--3 {
    right: 29px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fv-slide__item img {
    transform: scale(1) !important;
    transition: none !important;
  }
  .fv-ticker .bg-text {
    animation: none;
  }
  .service-group__slide .swiper-wrapper {
    transition: none !important;
  }
}