@charset "UTF-8";


/*-------------------------------------------
各種記事
-------------------------------------------*/
.news-top{
display: flex;
justify-content:space-evenly;
align-items: center;
margin-top: 10%;
}

.news-text{
    display: block;
   align-items: center;
}
.news-container .section-title{
    margin: 2rem;

}


.news-container {
    width: 100%;
    padding: 5rem;
}

.news-container ul.item {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 2rem; /* 要素間の余白 */
    max-width: 960px;
    width: 100%;
    margin: 0 auto;
    padding: 0;
    justify-content: flex-start;
    box-sizing: border-box;
}

.news-container ul.item li.list {
    flex: 0 0 calc((100% - 4rem) / 3); /* PC: 3列 */
    min-height: 400px;
    box-sizing: border-box;

    /* アニメーション初期状態 */
    opacity: 0;
    transform: translateY(20px);
    animation: fadeUp 0.8s ease forwards;
}
.news-container ul.item li.list {
    text-align: center;
}

/* 表示時のアニメーション */
@keyframes fadeUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 画像スタイル */
.news-container ul.item li.list img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
}

/*-------------------------------------------
レスポンシブ対応
-------------------------------------------*/

@media (max-width: 1024px) {
  .news-top {
    flex-direction: column;
    text-align: center;
  }

  .news-container {
    padding: 3rem;
  }

  .news-container ul.item {
    justify-content: center; 
  }

  
  .news-container ul.item {
    gap: 1.5rem;
  }

  .news-container ul.item li.list {
    flex: 0 0 100%; /* 1列 */
    min-height: auto;
  }

  .news-container .section-title {
    margin: 1.5rem 0;
    text-align: center;
    font-size: 1.6rem;
  }
}


/* スマホ (767px以下) */
@media (max-width: px) {
  .news-container {
    padding: 2rem;
  }

  .news-container ul.item {
    gap: 1.5rem;
  }

  .news-container ul.item li.list {
    flex: 0 0 100%; /* 1列 */
    min-height: auto;
  }

  .news-container .section-title {
    margin: 1.5rem 0;
    text-align: center;
    font-size: 1.6rem;
  }
}

/* 特小スマホ (480px以下) */
@media (max-width: 480px) {
  .news-container {
    padding: 1.5rem;
  }

  .news-container .section-title {
    font-size: 1.4rem;
  }

  .news-container ul.item {
    gap: 1rem;
  }
}