@charset "utf-8";

.gjs-dashed .swiper-slide{
  height:auto;
}

.gjs-dashed .swiper-wrapper{
  height:auto;
  align-items:flex-start;
}

.main::before,
.main::after{
  display:none;
}

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

.slider .swiper-slide img{
  aspect-ratio:643/398;
  object-fit:cover;
}

.illust{
  padding-bottom:7.5rem;
}

.webgene-blog{
  display:flex;
  flex-wrap:wrap;
  gap:80px 60px;
  max-width:1345px;
}

.slick-arrow,
.slick-track:before, 
.slick-track:after{
  display: none !important;
}

.illust-item{
  width:calc((100% - 60px ) / 2 );
  font-weight:bold;
  font-size:clamp(0.75rem, 0.568rem + 0.61vw, 1.25rem);
}

.illust-item h2{
  font-size:clamp(1rem, 0.909rem + 0.3vw, 1.25rem);
  padding:1rem 0 ;
  margin-bottom:1.5rem;
  border-bottom:1px solid #707070;
}

.thumb {
  padding: 0;
  border: 1px solid #D6D6D6;
}

.thumb .slick-slide img{
  aspect-ratio:642/398;
}

.sub{
  margin:1.5rem 0 0;
}

.sub .slick-track{
  margin:0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  width: 100% !important;
  transform: none !important;
}

.sub .swiper-wrapper{
  gap:8px;
}

.sub .slick-slide{
  width:calc((100% - 32px ) / 5) !important;
  aspect-ratio:1/1;
}

.sub .slick-slide img{
  aspect-ratio:1/1;
  object-fit:cover;
}

.sub .slick-slide {
  opacity: .8;
  transition: opacity .5s;
}
.sub .slick-slide.slick-current {
  opacity: 1;
}

@media (max-width: 1279px) {
  .illust-item {
    width: calc((100% - 30px) / 2);
  }
  .webgene-blog{
    gap: 80px 30px;
  }
  .lower-fv p{
    font-size: clamp(2rem, 0.49rem + 3.14vw, 3rem);
  }
}

@media (max-width: 1024px) {
}

@media (max-width: 767px) {
  .lower-fv p {
    font-size: clamp(2.5rem, 1.955rem + 1.82vw, 4rem);
  }
  .illust-item {
    width: 100%;
  }
  .sub{
    margin-top:1rem;
  }
  .illust-item h2{
    padding: 4px 0 8px;
    margin-bottom: 12px;
  }
  .banner{
    margin-top:5rem;
  }
}