@charset "UTF-8";
/* ==========================================================================
   wp.css — WordPress用の追加スタイル
   一覧 / 記事詳細 / 固定ページ / 404 / ページネーション / 下層ページ見出し
   既存（reset/style/responsive）のデザインには影響しない追加のみ。
   ========================================================================== */

/* 読み幅を絞るコンテナ（記事・固定ページ本文用） */
.l-inner--narrow{ width: 84rem; }

/* --------------------------------------------------------------------------
   下層ページ共通の見出しバンド（絶対配置ヘッダーを避けるため上余白を確保）
   -------------------------------------------------------------------------- */
.p-page-hero{ padding: 19rem 0 6rem; background: var(--color-bg-mint); text-align: center; }
.p-page-hero .c-heading-mincho{ color: var(--color-green); }
.p-single__date{ margin-top: 1.8rem; font-family: var(--font-label); font-size: 1.8rem; font-weight: 700; letter-spacing: .04em; color: var(--color-green); }

/* --------------------------------------------------------------------------
   お知らせ・ブログ 一覧
   -------------------------------------------------------------------------- */
.p-archive{ padding: 8rem 0 12rem; background: var(--color-bg-cream); }
.p-archive__list{ margin-top: 0; }
.p-news__empty{ text-align: center; font-size: 1.6rem; color: var(--color-text); padding: 4rem 0; }

/* ページネーション */
.p-archive .pagination{ margin-top: 8rem; }
.p-archive .nav-links{ display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem; }
.p-archive .page-numbers{
  display: grid; place-items: center; min-width: 4.8rem; height: 4.8rem; padding: 0 1.2rem;
  border: 1px solid var(--color-border); border-radius: .6rem; background: var(--color-white);
  font-family: var(--font-label); font-size: 1.6rem; font-weight: 700; color: var(--color-green);
  transition: opacity .3s ease;
}
.p-archive .page-numbers:hover{ opacity: .7; }
.p-archive .page-numbers.current{ background: var(--color-green); color: var(--color-white); border-color: var(--color-green); }
.p-archive .page-numbers.dots{ border: none; background: transparent; }

/* --------------------------------------------------------------------------
   記事詳細
   -------------------------------------------------------------------------- */
.p-single{ padding: 6rem 0 12rem; background: var(--color-bg-cream); }
.p-single__eyecatch{ margin-bottom: 4rem; }
.p-single__eyecatch img{ width: 100%; height: auto; border-radius: 1.2rem; }

.p-single__body{ font-size: 1.6rem; line-height: 2; letter-spacing: .03em; color: var(--color-text); }
.p-single__body > * + *{ margin-top: 2.2rem; }
.p-single__body h2{ margin-top: 5rem; font-family: var(--font-mincho); font-size: 2.8rem; font-weight: 500; line-height: 1.5; letter-spacing: .03em; color: var(--color-green); }
.p-single__body h3{ margin-top: 4rem; font-family: var(--font-mincho); font-size: 2.2rem; font-weight: 500; line-height: 1.5; letter-spacing: .03em; color: var(--color-green); }
.p-single__body h4{ margin-top: 3rem; font-weight: 700; font-size: 1.8rem; color: var(--color-green); }
.p-single__body a{ color: var(--color-green); text-decoration: underline; }
.p-single__body a:hover{ opacity: .7; }
.p-single__body strong{ font-weight: 700; }
.p-single__body em{ font-style: italic; }
.p-single__body blockquote{ margin: 2.4rem 0; padding: 1.6rem 2.4rem; border-left: 3px solid var(--color-green); background: var(--color-bg-mint); border-radius: .4rem; }
.p-single__body ul{ list-style: disc; padding-left: 2.2rem; }
.p-single__body ol{ list-style: decimal; padding-left: 2.2rem; }
.p-single__body li{ margin-top: .6rem; }
.p-single__body img{ max-width: 100%; height: auto; border-radius: 1.2rem; }
.p-single__body figure{ margin: 2.4rem 0; }
.p-single__body figcaption{ margin-top: .8rem; font-size: 1.3rem; color: #6b7b74; text-align: center; }
.p-single__body table{ width: 100%; border-collapse: collapse; }
.p-single__body th, .p-single__body td{ padding: 1.2rem; border: 1px solid var(--color-border); }
.p-single__pages{ margin-top: 3rem; display: flex; gap: 1rem; }

/* 記事ナビ */
.p-single__nav{ display: flex; align-items: center; justify-content: center; gap: 2.4rem; margin-top: 8rem; }
.p-single__nav-link{ font-size: 1.5rem; color: var(--color-green); letter-spacing: .04em; transition: opacity .3s ease; }
.p-single__nav-link:hover{ opacity: .7; }

/* --------------------------------------------------------------------------
   固定ページ / 404
   -------------------------------------------------------------------------- */
.p-page{ padding: 6rem 0 12rem; background: var(--color-bg-cream); }
.p-page__body{ font-size: 1.6rem; line-height: 2; letter-spacing: .03em; color: var(--color-text); }
.p-page__body > * + *{ margin-top: 2.2rem; }
.p-page__body h2{ margin-top: 5rem; font-family: var(--font-mincho); font-size: 2.8rem; font-weight: 500; line-height: 1.5; color: var(--color-green); }
.p-page__body h3{ margin-top: 4rem; font-family: var(--font-mincho); font-size: 2.2rem; font-weight: 500; color: var(--color-green); }
.p-page__body a{ color: var(--color-green); text-decoration: underline; }
.p-page__body ul{ list-style: disc; padding-left: 2.2rem; }
.p-page__body ol{ list-style: decimal; padding-left: 2.2rem; }
.p-page__body img{ max-width: 100%; height: auto; border-radius: 1.2rem; }

.p-404{ text-align: center; }
.p-404__text{ font-size: 1.6rem; line-height: 2; color: var(--color-text); }

/* --------------------------------------------------------------------------
   スマートフォン
   -------------------------------------------------------------------------- */
@media screen and (max-width: 992px){
  .l-inner--narrow{ width: calc(100% - 64px); }

  .p-page-hero{ padding: 120px 0 40px; }
  .p-single__date{ font-size: 16px; margin-top: 14px; }

  .p-archive{ padding: 56px 0 72px; }
  .p-archive .pagination{ margin-top: 56px; }
  .p-archive .page-numbers{ min-width: 42px; height: 42px; font-size: 15px; }

  .p-single{ padding: 40px 0 72px; }
  .p-single__eyecatch{ margin-bottom: 28px; }
  .p-single__body{ font-size: 15px; }
  .p-single__body h2{ font-size: 22px; margin-top: 40px; }
  .p-single__body h3{ font-size: 19px; margin-top: 32px; }
  .p-single__nav{ margin-top: 56px; gap: 16px; }

  .p-page{ padding: 40px 0 72px; }
  .p-page__body{ font-size: 15px; }
}

@media screen and (max-width: 768px){
  .l-inner--narrow{ width: calc(100% - 40px); }
}