@charset "utf-8";

/*グラデ演出=================================================*/

    .gradient-bg-section {
      position: relative;
      background: #fdfdfd;
      overflow: hidden;
      /* min-height: 100vh; */
    }

    .bg-layer {
      position: absolute;
      top: 0; left: 0;
      width: 100%;
      height: 100%;
      z-index: 0;
      pointer-events: none;
    }

    .blob {
      position: absolute;
      width: 50vw;
      height: 50vw;
      /* max-width: 500px;
      max-height: 500px; */
      border-radius: 50%;
      opacity: 0.9;
      filter: blur(40px);
      mix-blend-mode: soft-light;
      transition: transform 0.2s ease-out;
    }

    .top-left {
      top: 0%; left: 10%;
      background: radial-gradient(circle, #FFA6D1, transparent 100%);
    }
    .top-right {
      top: 0%; right: 10%;
      background: radial-gradient(circle, #FF845E, transparent 100%);
    }
    .bottom-left {
      bottom: 0%; left: 15%;
      background: radial-gradient(circle, #ABEBFF, transparent 100%);
      z-index: 1;
    }
    .bottom-right {
      bottom: 0%; right: 5%;
      background: radial-gradient(circle, #C3A1FF, transparent 100%);
    }

    .gradient-bg-section .content {
      position: relative;
    }

    .cursor-gradient {
      position: absolute;
      width: 200px;
      height: 200px;
      pointer-events: none;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(171, 235, 255, 0.4), transparent 70%);
      filter: blur(20px);
      transform: translate(-50%, -50%);
      z-index: 0;
      opacity: 0;
      transition: opacity 0.3s ease;
    }

    .work__hero__title {
      text-align: center;
    }

.work__hero__subtitle {
    margin-bottom: 0;
    text-align: center;
    margin-left: 0;
}

.wrapper {
    max-width: 1240px;
    margin: 0 auto;
    padding: 80px 40px 96px;
}

.work__grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
}

.work__grid a {
  display: block; /* ブロック化してグリッドアイテムとして機能 */
  overflow: hidden; 
}
.work__grid a img {
    aspect-ratio: 1/1;
    object-fit: cover;
    display: block;
    /* filter: grayscale(0.8); */
    transition: all 0.3s ease;
}
.work__grid a:hover img {
    /* filter: grayscale(0); */
    transform: scale(1.05);  /* ホバーで5%ズームアップ */
}

.view_more__zone_work {
    padding: 140px 0 136px;
    text-align: center;
}


@media screen and (max-width: 767px) {
    .work__grid {
        grid-template-columns: 1fr 1fr;
    }

}

@media screen and (max-width: 428px) {
    .wrapper {
        padding: 32px 24px 64px;
    }
}