@charset "UTF-8";

/* ==== root ========================== */
:root {
  --color-black: #030E1D;
  --color-white: #ffffff;
  --color-primary: #014094;
  --color-gray: #F9F9F9;

  --noto-sans: "Noto Sans JP", sans-serif;
  --din: "din-2014", sans-serif;
}

/*================================================
 *  #subVisual
 ================================================*/
#subVisual {
  background-image: url(../../images/works/subvis.webp);
}

@media screen and (max-width:767px) {
  #subVisual {
    background-image: url(../../images/works/subvis_sp.webp);
  }
}

/*================================================
 * works
 ================================================*/
#works ul {
    display: flex;
    flex-wrap: wrap;
    gap: 3rem;
}

#works ul li {
    width: calc((100%/3) - 2rem);
}

.works_slide {
    width: 100%;
    overflow: visible !important;
}

.works_slide .swiper-slide {
    width: 100%;
}

.works_slide .swiper-pagination {
    text-align: right !important;
    bottom: -3rem !important;
}
.works_slide .swiper-pagination .swiper-pagination-bullet {
    width: 1rem;
    height: 1rem;
}
.works_slide .swiper-pagination .swiper-pagination-bullet-active {
    background: #014094;
}

.works_slide .swiper-slide img {
    width: 100%;
    aspect-ratio: 19/15;
}

.works_category {
    display: inline-block;
    color: #FFF;
    font-size: 1.4rem;
    font-weight: 500;
    text-align: center;
    letter-spacing: 0.05em;
    background: #014094;
    padding: .3rem 1rem;
    margin-top: 2rem;
}

#works ul li h3 {
  font-size: 2rem;
  letter-spacing: 0.1em;
  margin: 1.5rem 0 1.3rem;
}

#works ul li p span {
  background: var(--color-primary);
  display: inline-block;
  font-size: 1.4rem;
  color: var(--color-white);
  padding: 0.3rem 1.5rem;
  letter-spacing: .05em;
}



@media screen and (max-width:767px) {
    #works {
        padding-bottom: 8rem;
    }

    #works ul {
        flex-wrap: wrap;
        gap: 4rem;
        margin: 0 auto;
    }

    #works ul li {
        width: 100%;
    }

    .works_slide .swiper-pagination {
        bottom: -3rem !important;
    }

    .works_slide .swiper-pagination .swiper-pagination-bullet {
        width: .8rem;
        height: .8rem;
    }

    .works_slide .swiper-slide img {
        aspect-ratio: 35/20;
    }

    .works_category {
        font-size: 1.2rem;
        padding: .3rem .8rem;
        margin-top: 1.5rem;
    }

    #works ul li h3 {
        font-size: 1.8rem;
        letter-spacing: 0.1em;
        margin: 0.6rem 0 1rem;
    }

    #works ul li p {
        font-size: 1.4rem;
    }
}