@charset "UTF-8";
/* CSS Document */
/* productsArea */
.productsArea .sub_inner {
  padding: 80px 40px 120px;
}
.productsArea .sub_inner ul {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 60px 30px;
}
.productsArea .sub_inner ul li a .img {
  overflow: hidden;
  width: 100%;
  aspect-ratio: 320 / 300;
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: .3s;
    transform: scale(1);
  }
}
.productsArea .sub_inner ul li a dl {
  color: var(--color-text);
  padding-top: 16px;
  transition: all 0.3s;
  dt {
    font-size: var(--font-md-plus);
    font-weight: var(--font-weight-mid);
    padding-bottom: 8px;
  }
}
.productsArea .sub_inner ul li a {
  display: block;
    &:hover {
    dl {
      color: var(--color-secondary);
    }
    img {
      transform: scale(1.1);
    }
  }
}

@media screen and (max-width: 1200px) {
/* productsArea */
  .productsArea .sub_inner ul {
    gap: 50px 10px;
  }
}

@media screen and (max-width: 1000px) {
/* productsArea */
  .productsArea .sub_inner {
    padding: 60px 6vw 100px;
    ul {
      grid-template-columns: repeat(2, 1fr);
      gap: 50px 30px;
    }
  }
  .productsArea .sub_inner ul li a dl {
    padding-top: 12px;
    dt {
      font-size: var(--font-md);
      padding-bottom: 6px;
    }
  }
}

@media screen and (max-width: 768px) {
/* productsArea */
  .productsArea .sub_inner ul {
    gap: 40px 10px;
    li a dl dt {
      font-size: clamp(1rem, 0.911rem + 0.45vw, 1.125rem);
    }
  }
}

@media screen and (max-width: 600px) {
/* productsArea */
  .productsArea .sub_inner {
    padding-top: 48px;
    padding-bottom: 70px;
    ul {
      grid-template-columns: repeat(1, 1fr);
      gap: 46px 0;
      li a .img {
        aspect-ratio: 400 / 280;
      }
    }
  }
}