/* ============ 下層ページ共通CSS：#mainの背景・上下余白など（トップでは読み込まない） ============ */
@layer contents {
  #main {
    background-color: #f0f0f0; /* PDF実測(rgb 240,240,240)。下層ページ共通のグレー背景 */
    /* ヘッダーがposition:fixedで浮くため、本文側で高さ分+PDF実測の間隔を確保する */
    padding-block-start: 11rem;
    padding-block-end: 14rem; /* PDF実測（最後の区切り線からフッターまで） */
  }

  @media (max-width: 767px) {
    #main {
      padding-block: 8rem; /* ヘッダー高さSP+余白 */
    }
  }

  /* 下層ページは最上部が白背景のため、ヘッダーを常時is-scrolled相当の見た目にする */
  .l-header:not(:has(.l-mega-menu.is-open)) {
    color: var(--color-text);
    background-color: var(--color-bg);

    .c-logo,
    .l-header__btns {
      color: var(--color-header-muted);
    }
  }

  /* ここから：絞り込みタブ（NEWS一覧・WORKS一覧で共通。項目数が変わってもレイアウトはそのまま使える） */
  .c-filter-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem; /* PDF実測 */
    /* baseline揃えだと下端がずれるため実測差分を引き上げる */
    translate: 0 -1.2rem;
    /* 折り返して単独行になった時、space-betweenが効かず左寄りになるため明示 */
    margin-inline-start: auto;
  }

  .c-filter-tab {
    display: flex;
    align-items: center;
    justify-content: center;
    /* WP化後の文言変更に耐えるようpadding-inlineで可変幅にする */
    padding-inline: 2rem;
    /* 768px境界で急に縮み崩れて見えたため768〜1920pxも連続的に比例縮小させる */
    height: clamp(3rem, 6.833rem - 1.9965vw, 5.3rem);
    padding-block: 0.2em 0; /* フォントの非対称で文字が上寄りに見えるため下げる */
    font-size: clamp(1.2rem, 1.867rem - 0.3472vw, 1.6rem);
    font-weight: var(--fw-bold);
    letter-spacing: 0.1em;
    color: var(--color-text);
    background-color: var(--color-bg);
    border: 1px solid var(--color-text);

    &.is-active {
      color: var(--color-text-invert);
      background-color: var(--color-text);
    }
  }

  @media (max-width: 767px) {
    .c-filter-tabs {
      display: grid;
      grid-template-columns: repeat(3, 1fr); /* PDF実測：3列 */
      column-gap: clamp(0.5rem, -0.3rem + 2.6vw, 1.3rem);
      row-gap: clamp(0.5rem, -0.3rem + 2.6vw, 1.3rem);
      margin-inline: -0.2rem;
      width: calc(100% + 0.4rem);
      translate: none;
    }

    .c-filter-tab {
      /* width:autoだとgridセル(1fr)いっぱいに広がらずコンテンツ幅のまま小さく見えたため削除 */
      padding-inline: 0.5rem;
      height: auto;
      min-height: clamp(4rem, 2.2rem + 4.8vw, 5.3rem);
      font-size: clamp(1.1rem, 0.5rem + 1.7vw, 1.6rem);
      letter-spacing: normal;
    }
  }

  /* ここから：ページネーション（NEWS一覧・WORKS一覧で共通） */
  .c-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    margin-block-start: 4rem;

    @media (max-width: 767px) {
      gap: 1rem;
      margin-block-start: 3rem;
    }
  }

  .c-pagination__page,
  .c-pagination__page-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.6rem;
    height: 3.6rem;
    border-radius: 50%;
    /* PDF実測：非activeも白丸背景（グレーページ地の上に白丸が浮く） */
    background-color: var(--color-bg);
    font-size: 1.4rem;
    font-weight: var(--fw-medium);
    color: var(--color-text);
    line-height: 1;
    /* サイト共通のホバーアニメーション(0.3s)に揃える */
    transition: background-color var(--transition-base);
  }

  .c-pagination__page.is-active {
    background-color: var(--color-text);
    color: var(--color-text-invert);
  }

  /* 現在1ページ目を想定し「最初へ」「前へ」は薄いグレーの無効表示 */
  .c-pagination__page-nav.is-disabled {
    color: #d2d2d2;
    pointer-events: none;
  }

  .c-pagination__page-nav-icon {
    /* 矢印は幅4×高さ9で共通。viewBox比率差のため高さ基準(height)で揃える */
    height: 0.9rem;
    width: auto;
    stroke: currentColor;
    stroke-width: 1;
    fill: none;
  }

  @media (hover: hover) and (pointer: fine) {
    .c-pagination__page:not(.is-active):hover,
    .c-pagination__page-nav:not(.is-disabled):hover {
      background-color: var(--color-bg-alt);
    }
  }

  @media (max-width: 767px) {
    /* SPは丸ボタンが3つしか並ばないため、現在地を中心にPHP側で外す番号を決める */
    .c-pagination__page.is-pc-only {
      display: none;
    }
  }

  /* ここから：一覧に戻る系ボタン（NEWS詳細・WORKS詳細で共通）。c-button(common.css)と組み合わせて使う */
  .c-back-btn {
    /* c-buttonは固定幅20remだが「〇〇一覧に戻る」は文字が長く収まらないため可変幅にする */
    width: auto;
    padding-inline: 6rem; /* PDFベクター矩形実測：幅260px、テキスト幅139.2pxとの差の半分 */

    @media (max-width: 767px) {
      padding-inline: clamp(
        5.3rem,
        1.8rem + 5.5vw,
        6rem
      ); /* PC6rem→SP640px時5.3rem */
      /* height/font-sizeはc-buttonのSP値(common.css)と同じ実測値に揃える */
      height: clamp(4.6rem, 1.9962rem + 6.9434vw, 6.44rem);
      font-size: clamp(1.6rem, 0.6943rem + 2.4151vw, 2.24rem);
    }
  }
}