@charset "UTF-8";
#news {
  /* ニュース一覧 */
  /* ニュース記事本文 */
  /* SP */ }
  #news .container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    margin: 0 auto; }
  #news .title-wrap {
    margin: 2em 0; }
  #news .category-wrap {
    width: 100%;
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
    margin: 3em 0; }
  #news .news-wrap {
    margin-bottom: 6em; }
  #news .news-card-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    justify-content: flex-start;
    margin: 5em auto 0;
    max-width: 1000px; }
    #news .news-card-wrap .news-card {
      width: calc(50% - 30px);
      min-width: 300px;
      max-width: 500px;
      overflow: hidden; }
    #news .news-card-wrap .news-image {
      width: 100%;
      aspect-ratio: 5 / 3;
      background-color: #f1f1f1; }
      #news .news-card-wrap .news-image img {
        width: 100%;
        height: 100%;
        object-fit: contain; }
    #news .news-card-wrap .news-info {
      padding: 16px; }
    #news .news-card-wrap .date-badge {
      display: flex;
      align-items: center;
      margin-bottom: 1em; }
    #news .news-card-wrap .date {
      font-size: 14px;
      font-weight: 500;
      margin-right: 10px; }
    #news .news-card-wrap .news-title {
      font-size: 1.6rem;
      line-height: 1.4;
      font-weight: 500;
      margin: 0; }
  #news .pagination {
    margin: 5em 0; }
  #news .badge {
    display: inline-block;
    background-color: #38B281;
    color: #FFF;
    line-height: 1.5;
    font-size: 1.2rem;
    padding: 0 10px;
    border-radius: 10px; }
  #news .news-main {
    max-width: 800px;
    margin: 2em auto; }
    #news .news-main .news-title {
      font-size: 2.6rem;
      line-height: 1.8;
      margin-bottom: 1em;
      font-weight: 500; }
    #news .news-main .news-date {
      font-size: 1.5rem; }
    #news .news-main img {
      display: block;
      max-width: 100%;
      margin: 0 auto;
      object-fit: contain; }
    #news .news-main p {
      font-size: 1.6rem;
      line-height: 1.8;
      margin-bottom: 1em; }
  @media screen and (max-width: 768px) {
    #news .category-wrap {
      justify-content: center;
      gap: 10;
      margin: 2em 0; }
      #news .category-wrap .btn-style1, #news .category-wrap .btn-style3 {
        width: calc(100% / 3 - 10px);
        margin-bottom: 10px;
        padding: 15px 10px; }
    #news .product-card {
      flex: 100%; }
    #news .news-card {
      flex: 100%; }
    #news .news-card-wrap {
      justify-content: center; }
    #news .news-wrap {
      width: 90%;
      margin: 0 auto; }
    #news .news-main .news-title {
      font-size: 2rem; } }