@layer pages {

  /* ============================================================
     WORKS 一覧
     ============================================================ */

  /* --- フィルター --- */
  .p-works-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-3);
  }
  .p-works-filter__label {
    font-family: var(--ff-num);
    font-size: var(--fs-eyebrow);
    letter-spacing: 0.2em;
    color: var(--c-text-subtle);
    margin-right: var(--sp-2);
  }
  a.p-filter-btn,
  a.p-filter-btn:hover,
  a.p-filter-btn:visited {
    text-decoration: none;
  }
  .p-filter-btn {
    appearance: none;
    background: none;
    border: 1px solid var(--c-line);
    color: var(--c-text-muted);
    font-family: var(--ff-sans);
    font-size: var(--fs-small);
    padding: 0.5em 1.2em;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
  }
  .p-filter-btn:hover {
    color: var(--c-text);
    border-color: var(--c-text-subtle);
  }
  .p-filter-btn.is-active {
    color: var(--c-action-on);
    background: var(--c-accent);
    border-color: var(--c-accent);
  }

  /* --- グリッド --- */
  .p-works-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-7) var(--sp-5);
  }
  @media (max-width: 900px) {
    .p-works-grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-6) var(--sp-4); }
  }
  @media (max-width: 560px) {
    .p-works-grid { grid-template-columns: 1fr; }
  }
  /* フィルターで隠れたカード */
  .p-works-grid .c-card[hidden] { display: none; }

  /* 事例カード見出しは h3 だがデフォルトの小四角は不要 */
  .c-card__title::before { content: none; }

  /* カード下部の余白（社名と枠下端が近すぎる対策） */
  .c-card { padding-bottom: var(--sp-4); }

  /* カード下部の余白（社名と枠下端が近すぎる対策） */
  .c-card { padding-bottom: var(--sp-4); }

  /* 事例カードのメタ(種別 + 年) */
  .p-work-card__cat {
    font-family: var(--ff-num);
    font-size: var(--fs-eyebrow);
    color: var(--c-accent);
    letter-spacing: 0.18em;
  }
  .p-work-card__year {
    font-family: var(--ff-num);
    font-size: var(--fs-eyebrow);
    color: var(--c-text-subtle);
    letter-spacing: 0.1em;
  }

  /* --- ページネーション --- */
  .p-works-pager {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--sp-2);
    margin-top: var(--sp-9);
  }
  /* the_posts_pagination() が出力する .nav-links にも flex を当てる */
  .p-works-pager .nav-links {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
  }
  .p-works-pager a,
  .p-works-pager span {
    font-family: var(--ff-num);
    font-size: var(--fs-small);
    min-width: 2.6em;
    height: 2.6em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--c-line);
    color: var(--c-text-muted);
    text-decoration: none;
    transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
  }
  .p-works-pager a:hover {
    color: var(--c-text);
    border-color: var(--c-text-subtle);
  }
  .p-works-pager .is-current {
    color: var(--c-action-on);
    background: var(--c-accent);
    border-color: var(--c-accent);
  }

  /* ============================================================
     WORKS 個別(事例詳細)
     ============================================================ */
  .p-workd {
    padding-top: var(--sp-7);
    padding-bottom: var(--section-py);
  }

  /* ヘッダー部 */
  .p-workd__head {
    margin-bottom: var(--sp-6);
  }
  .p-workd__cat {
    display: inline-block;
    font-family: var(--ff-num);
    font-size: var(--fs-eyebrow);
    color: var(--c-accent);
    letter-spacing: 0.2em;
    margin-bottom: var(--sp-3);
  }
  .p-workd__title {
    font-family: var(--ff-display);
    font-size: var(--fs-h1);
    font-weight: var(--fw-medium);
    line-height: var(--lh-heading);
    margin: 0;
  }
  .p-workd__year {
    font-family: var(--ff-num);
    font-size: var(--fs-small);
    color: var(--c-text-subtle);
    letter-spacing: 0.1em;
    margin-top: var(--sp-3);
  }

  /* メインビジュアル */
  .p-workd__visual {
    aspect-ratio: 3 / 2;
    background: var(--c-bg-alt);
    overflow: hidden;
    margin-bottom: var(--sp-6);
  }
  .p-workd__visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* 本文 */
  .p-workd__body {
    font-size: var(--fs-body);
    line-height: 2;
    color: var(--c-text);
  }
  .p-workd__body p { margin: 0 0 1.5em; }

  /* 実サイトへのリンク */
  .p-workd__sitelink {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    margin-top: var(--sp-3);
    padding: 0.8em 1.6em;
    border: 1px solid var(--c-text);
    color: var(--c-text);
    font-family: var(--ff-sans);
    font-size: var(--fs-small);
    text-decoration: none;
    transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
  }
  .p-workd__sitelink:hover {
    color: var(--c-accent);
    border-color: var(--c-accent);
  }
  .p-workd__sitelink span[aria-hidden] { font-family: var(--ff-num); }

  /* 担当領域タグ */
  .p-workd__tags {
    margin: var(--sp-7) 0 0;
    padding-top: var(--sp-6);
    border-top: 1px solid var(--c-line);
  }
  .p-workd__tags-label {
    display: block;
    font-family: var(--ff-sans);
    font-size: var(--fs-eyebrow);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--tr-wide);
    color: var(--c-text-subtle);
    text-transform: uppercase;
    margin-bottom: var(--sp-3);
  }
  .p-workd__tags-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
  }

  /* 関連事例 */
  .p-workd-related {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-6) var(--sp-5);
  }
  @media (max-width: 720px) {
    .p-workd-related { grid-template-columns: 1fr; }
  }
}


@layer pages {
  /* 事例カードの左右余白（種別・社名が枠左端に付く対策） */
  .p-work-card { padding-left: var(--sp-4); padding-right: var(--sp-4); }
  .p-work-card .c-card__thumb { margin-left: calc(var(--sp-4) * -1); margin-right: calc(var(--sp-4) * -1); }
}