/**
 * ホームページ用のスタイル
 */

/* ニュースセクション */
.news-list-header {
  display: flex;
  gap: var(--size-120);
  align-items: center;
}

.news-list-categories {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--size-32);
  row-gap: var(--size-16);
  color: var(--color-text-gray);
}

.news-list-category {
  padding: var(--size-8);
}

.news-list-category.active {
  color: var(--color-text-black);
  font-weight: var(--font-weight-bold);
  border-bottom: 2px solid var(--color-accent-red);
}

.bg-light-gray {
  background: var(--color-bg-light-gray2);
  padding: var(--size-1) 0;
}

.bg-black {
  background: var(--color-text-black);
  padding: var(--size-1) 0;
}
.works-carousel {
  margin-top: var(--size-24);
}

/* セクションタイトル共通スタイル */
.section-title {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--size-24);
  margin-bottom: var(--size-40);
}

.section-title--white {
  color: var(--color-white);
}

.section-title::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  height: 4px;
  width: var(--size-140);
  background-color: var(--color-accent-red);
}

.section-title__heading {
  font-size: var(--size-62);
  font-weight: bold;
}

.section-title__description_sp {
  display: none;
}

/* 事業内容セクション */
.business-section {
  padding: var(--size-80) 0;
}

.business-menus--front {
  margin-top: var(--size-48);
}

/* スマホ対応のメディアクエリ */
@media screen and (max-width: 768px) {
  .news {
    padding: var(--size-40) var(--size-20);
  }

  /* セクションタイトル - スマホサイズ */
  .section-title {
    gap: var(--size-16);
    margin-bottom: var(--size-24);
  }

  .section-title::before {
    width: var(--size-62);
  }

  .section-title__heading {
    font-size: var(--size-32);
  }

  .section-title__description {
    display: none;
  }

  .section-title__description_sp {
    display: inline;
  }

  /* リスト関連 - スマホサイズ */
  .news-list-header {
    flex-direction: column;
    column-gap: var(--size-16);
    row-gap: var(--size-16);
    align-items: flex-start;
  }

  .news-list-categories {
    column-gap: var(--size-16);
  }

  /* 事業内容セクション - スマホサイズ */
  .business-section {
    padding: var(--size-40) var(--size-20);
  }

  .business-menus--front {
    margin-top: var(--size-32);
  }
}