/* ============================================================
   style-news.css — ニュース一覧・記事詳細 専用スタイル
   slug: news（一覧: home.php / 詳細: single.php）
   ============================================================ */

/* ============================================================
   NEWS — ページネーション（home.php ニュース一覧）
   ============================================================ */

/* ページネーションコンテナ */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-xs);
  margin-top: var(--space-xl);
}

/* ページネーションボタン1個（.is-current で緑塗り） */
.pagination-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: var(--fs-16);
  text-decoration: none;
  color: var(--c-text);
  border: 1px solid var(--c-border);
  transition: all var(--transition);

  &:hover {
    border-color: var(--c-main-deep);
    color: var(--c-main-deep);
    opacity: 1;
  }

  &.is-current {
    background: var(--c-main);
    border-color: var(--c-main);
    color: var(--c-white);
  }
}

/* ============================================================
   NEWS DETAIL — 記事詳細（single.php）
   ============================================================ */

/* 記事詳細ページの最大幅コンテナ */
.section-article-detail {
  max-width: var(--inner);
  margin: 0 auto;
}

.section-article-meta {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.section-article-date {
  font-size: var(--fs-16);
  color: var(--c-text-light);
}

/* 記事本文エリア（白背景・パディング、the_content() を囲む） */
.section-article-body {
  line-height: var(--lh-wide);
  background-color: var(--c-white);
  padding: 0rem 0rem 2rem 0rem;

  & p {
    margin-bottom: 1.5em;

    &:last-child {
      margin-bottom: 0;
    }
  }

  & a {
    text-decoration: underline;
    text-underline-offset: 3px;

    &:hover {
      color: var(--c-main);
      opacity: 1;
    }
  }
}

.section-article-back {
  margin-top: calc(var(--space-lg) + var(--space-sm));
  padding-top: var(--space-lg);
  border-top: 1px solid var(--c-border);
  text-align: center;
}