@import url("/store/miknits/2025aw/css/variables.css");
@import url("/store/miknits/2025aw/css/base.css");
@import url("/store/miknits/2025aw/css/footer.css");

.js-fade-item {
  opacity: 0;
  transform: translate3d(0, 20px, 0);
  transition-property: opacity, transform;
  transition-duration: 1s;
  transition-timing-function: ease-out;
}

.js-fade-item.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.info {
  padding-top: 4rem;
  background: #fbfbe8;
}

.info__container {
  width: calc(100% - 3rem);
  max-width: 600px;
  margin-inline: auto;
}

.info__text {
  margin-top: 4.8rem;
  font-size: 1.3rem;
  line-height: 1.75;
  letter-spacing: 0.03em;
  text-align: center;
}

.articles {
  padding-block: 4.5rem 5rem;
  background: #fbfbe8;
}

.articles::before {
  content: "";
  display: block;
  width: calc(100% - 2.4rem);
  height: 5px;
  margin-inline: auto;
  background: top left / auto 5px repeat-x
    url("/store/miknits/2025aw/img/pre/border.webp");
}

.articles__container {
  display: flex;
  flex-wrap: wrap;
  gap: 3.2rem 1.2rem;
  width: calc(100% - 4rem);
  max-width: 1000px;
  margin-top: 4.5rem;
  margin-inline: auto;
}

.article {
  display: flex;
  flex-direction: column;
  width: calc(50% - 0.6rem);
}

.article__title {
  flex: 1;
  margin-top: 0.8rem;
  font-size: 1.2rem;
  line-height: 1.35;
  letter-spacing: 0.08em;
}

.article__date {
  margin-top: 1.6rem;
  font-size: 1.2rem;
  letter-spacing: 0.05em;
}

@media (min-width: 801px) {
  .info {
    padding-top: 9.7rem;
  }

  .info__container {
    width: calc(100% - 3rem);
    max-width: 600px;
    margin-inline: auto;
  }

  .info__text {
    margin-top: 8.8rem;
    font-size: 1.4rem;
    line-height: 2;
  }

  .articles {
    padding-block: 8.8rem 6.4rem;
  }

  .articles::before {
    width: 100%;
  }

  .articles__container {
    justify-content: center;
    gap: 4rem;
    width: var(--pc-width);
    margin-top: 6.2rem;
  }

  .article {
    display: flex;
    flex-direction: column;
    width: calc((100% - 8rem) / 3);
  }

  .article__title {
    margin-top: 1.8rem;
    font-size: 1.5rem;
  }
}