.p-topArticles {
  padding: 80px 0;
}

.p-topArticles__list {
  max-width: 1420px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
}

/* カード本体 */
.p-topArticles__item {
  list-style: none;
  margin-bottom:3em;
}

.p-topArticles__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: #000;
  background-color: #fff;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.p-topArticles__link:hover,
.p-topArticles__link:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.12);
}

/* サムネイル */
.p-topArticles__thumb {
  position: relative;
  overflow: hidden;
}

.p-topArticles__thumbImage {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  aspect-ratio: 4 / 3;
  transition: transform 0.4s ease;
}

.p-topArticles__link:hover .p-topArticles__thumbImage,
.p-topArticles__link:focus-visible .p-topArticles__thumbImage {
  transform: scale(1.05);
}

/* テキスト部分（タイトルは上寄せ、全体はカードの残りを埋める） */
.p-topArticles__body {
  padding: 16px 18px 20px;
  display: flex;
  flex-direction: column;
  flex: 1;              /* ← カード内の残り高さを埋める */
}

/* タイトル（常に上側に来る） */
.p-topArticles__title {
  font-size: 18px;
  line-height: 1.6;
  font-weight: 600;
  margin: 0 0 10px;
  color: #000;
}

/* バッジを本文ブロックの「一番下」に揃える */
.post-card__badge-wrap {
  margin-top: auto;     /* ← ここだけ auto にする */
}

/* バッジ共通デザイン */
.post-badge {
  display: inline-block;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 999px;
  background: #a7aaad;
  color: #fff;
  margin-right: 6px;
}

.post-badge--type,
.post-badge--cat {
  background-color: #fff;
  color: #666;
  border: #666 1px solid;
  font-family: Montserrat, sans-serif;
}

/* ===== レスポンシブ ===== */
@media (max-width: 1024px) {
  .p-topArticles__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
  }
}

@media (max-width: 768px) {
  .p-topArticles {
    padding: 48px 0;
  }
  .p-topArticles__list {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 0 16px;
  }
}

.post-badge--type {
  background-color: #fff; /* 元のタイプバッジ */
  color:#666;
  border:#666 1px solid;
  font-family: Montserrat, sans-serif;
}

.post-badge--cat {
  background-color: #fff; /* 元のタイプバッジ */
  color:#666;
  border:#666 1px solid;
  font-family: Montserrat, sans-serif;
}




.p-featureArchive__cats {
  max-width: 1420px;
  margin: 24px auto 40px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  justify-content: flex-start;
}

.post-badge--catFilter {
  text-decoration: none;
  cursor: pointer;
}

.post-badge--catFilter:hover,
.post-badge--catFilter:focus-visible {
  background-color: #000;
  color: #fff;
  border-color: #000;
}

/* ================================
 *  Features 一覧 ページネーション
 * ================================ */

.p-featureArchive__pagination {
  margin: 40px auto 0;
  text-align: center;
}

.p-featureArchive__pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  list-style: none;
  padding: 0;
  margin: 0;
}

/* 各ページ番号のベース */
.p-featureArchive__pagination .page-numbers li {
  margin: 0;
}

.p-featureArchive__pagination .page-numbers a,
.p-featureArchive__pagination .page-numbers span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid #ccc;
  font-size: 14px;
  line-height: 1;
  text-decoration: none;
  color: #666;
  background-color: #fff;
  box-sizing: border-box;
}

/* 現在ページ */
.p-featureArchive__pagination .page-numbers .current {
  background-color: #666;
  color: #fff;
  border-color: #666;
  font-weight: 600;
}

/* ホバー時 */
.p-featureArchive__pagination .page-numbers a:hover,
.p-featureArchive__pagination .page-numbers a:focus-visible {
  background-color: #f0f0f0;
  border-color: #999;
  color: #333;
}

/* 「...」のとこ */
.p-featureArchive__pagination .page-numbers .dots {
  border: none;
  background: transparent;
  min-width: auto;
  padding: 0 4px;
}

/* スマホで少し小さめに */
@media (max-width: 768px) {
  .p-featureArchive__pagination .page-numbers a,
  .p-featureArchive__pagination .page-numbers span {
    min-width: 32px;
    height: 32px;
    font-size: 12px;
    padding: 0 8px;
  }
}


.post-badge--catFilter._current {
  background-color: #666;
  color: #fff;
  border-color: #666;
}






/**************************************************
 *  特集（Features） カード一覧 共通スタイル
 *  - top の「特集」と /feature/ の固定ページ両対応
 *  - HTML 構造：
 *      <section class="p-featureArchive">
 *        <div class="c-inner">
 *          <div class="p-featureArchive__cards">
 *            <article class="p-featureCard"> ... </article>
 **************************************************/

/* ▼ セクション余白 */
.p-featureArchive {
  padding: 80px 0;
}

@media (max-width: 768px) {
  .p-featureArchive {
    padding: 48px 0;
  }
}

/* ▼ 見出し */
.p-featureArchive__head {
  text-align: center;
  margin-bottom: 40px;
}

.p-featureArchive__head .c-heading02 {
  font-size: 28px;
  line-height: 1.4;
}

@media (max-width: 768px) {
  .p-featureArchive__head .c-heading02 {
    font-size: 22px;
  }
}

/* ▼ カード一覧グリッド
   - トップ用の .p-topContents__wide 内でも
   - 特集ページの .p-featureArchive 内でも同じ見た目になるよう両方指定
*/

.p-topContents__wide .p-featureArchive__cards,
.p-featureArchive .p-featureArchive__cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  /* ★ 横方向は元の 32px のまま */
  column-gap: 32px;
  /* ★ 縦方向だけ 3倍（32px → 96px） */
  row-gap: 96px;
}

@media (max-width: 1024px) {
  .p-topContents__wide .p-featureArchive__cards,
  .p-featureArchive .p-featureArchive__cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .p-topContents__wide .p-featureArchive__cards,
  .p-featureArchive .p-featureArchive__cards {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

/* ▼ カード本体 */
.p-topContents__wide .p-featureCard,
.p-featureArchive .p-featureCard {
  background-color: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
  transition: transform .25s ease, box-shadow .25s ease;
  height: 100%;
  display: flex;
}

.p-topContents__wide .p-featureCard__link,
.p-featureArchive .p-featureCard__link {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  height: 100%;
}

/* ホバー */
.p-topContents__wide .p-featureCard:hover,
.p-featureArchive .p-featureCard:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.09);
}

/* ▼ サムネイル */
.p-topContents__wide .p-featureCard__thumb,
.p-featureArchive .p-featureCard__thumb {
  width: 100%;
  overflow: hidden;
}

.p-topContents__wide .p-featureCard__thumb img,
.p-featureArchive .p-featureCard__thumb img {
  display: block;
  width: 100%;
  height: auto;
}

/* ▼ テキスト部分 */
.p-topContents__wide .p-featureCard__body,
.p-featureArchive .p-featureCard__body {
  padding: 18px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* タイトル（features-title or 記事タイトル） */
.p-topContents__wide .p-featureCard__title,
.p-featureArchive .p-featureCard__title {
  font-size: 15px;
  line-height: 1.8;
  font-weight: 500;
}

/* ▼ バッジ行 */
.p-topContents__wide .p-featureCard__badges,
.p-featureArchive .p-featureCard__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* ▼ バッジ共通 */
.p-topContents__wide .post-badge,
.p-featureArchive .post-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 80px;
  padding: 6px 10px 7px;
  font-size: 11px;
  line-height: 1;
  border-radius: 999px;
  border: 1px solid #222;
  background-color: #fff;
  color: #222;
  letter-spacing: .04em;
}

/* Chef's Talk / Column の種別バッジ */
.p-topContents__wide .post-badge--talk,
.p-featureArchive .post-badge--talk {
  background-color: #000;
  border-color: #000;
  color: #fff;
}

.p-topContents__wide .post-badge--column,
.p-featureArchive .post-badge--column {
  background-color: #000;
  border-color: #000;
  color: #fff;
}

/* カテゴリーバッジ */
.p-topContents__wide .post-badge--cat,
.p-featureArchive .post-badge--cat {
  border-color: #ccc;
  background-color: #f8f8f8;
  color: #333;
}

/**************************************************
 *  特集ページのカテゴリー絞り込みバッジ
 *  （/feature/ の上部に並べる filter 用）
 **************************************************/

.p-featureArchive__cats {
  max-width: 1240px;
  margin: 0 auto 32px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.p-featureArchive__cat {
  text-decoration: none;
}

/* 通常状態 */
.p-featureArchive__cat .post-badge {
  background-color: #fff;
  border-color: #ccc;
  color: #333;
}

/* 現在のカテゴリ */
.post-badge--catfilter_current {
  background-color: #666;
  color: #fff;
  border-color: #666;
}

/**************************************************
 *  特集ページ / カード一覧 共通ページネーション
 **************************************************/

.c-pagination {
  margin-top: 90px;
  margin-bottom:30px;
}

.c-pagination ul {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  list-style: none;
  padding: 0;
  margin: 0;
}

/* 各ページ番号のベース */
.p-featureArchive__pagination .page-numbers li {
  margin: 0;
}

.p-featureArchive__pagination .page-numbers a,
.p-featureArchive__pagination .page-numbers span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid #ccc;
  font-size: 14px;
  line-height: 1;
  text-decoration: none;
  color: #666;
  background-color: #fff;
  box-sizing: border-box;
}

/* 現在ページ */
.p-featureArchive__pagination .page-numbers .current {
  background-color: #666;
  color: #fff;
  border-color: #666;
  font-weight: 600;
}

/* ホバー */
.p-featureArchive__pagination .page-numbers a:hover,
.p-featureArchive__pagination .page-numbers a:focus-visible {
  background-color: #f0f0f0;
  border-color: #999;
  color: #333;
}

/* 「…」のとこ */
.p-featureArchive__pagination .page-numbers .dots {
  border: none;
  background: transparent;
  min-width: auto;
  padding: 0 4px;
}

/* スマホで少し小さめ */
@media (max-width: 768px) {
  .p-featureArchive__pagination .page-numbers a,
  .p-featureArchive__pagination .page-numbers span {
    min-width: 32px;
    height: 32px;
    font-size: 12px;
    padding: 0 8px;
  }
}



/* ===============================
 * 特集系ページだけ左右の余白を調整
 *  - トークカテゴリ / コラムカテゴリ / feature 固定ページ
 * =============================== */

/* セクションの左右 padding をゼロにする */
body.tax-talk_category .p-topArticles,
body.tax-column_category .p-topArticles,
body.page-template-page-feature .p-topArticles {
  padding-left: 0;
  padding-right: 0;
}

/* カードグリッドは中央に寄せて適度な幅にする */
body.tax-talk_category .p-topArticles__list,
body.tax-column_category .p-topArticles__list,
body.page-template-page-feature .p-topArticles__list {
  max-width: 1920px;   /* トップと同じくらいの幅 */
  margin: 0 auto;
  /* もう少し内側に寄せたいならここで余白を足す */
  /* padding: 0 40px; */
}

/* スマホ時は通常どおり */
@media (max-width: 768px) {
  body.tax-talk_category .p-topArticles,
  body.tax-column_category .p-topArticles,
  body.page-template-page-feature .p-topArticles {
    padding-left: 0;
    padding-right: 0;
  }

  body.tax-talk_category .p-topArticles__list,
  body.tax-column_category .p-topArticles__list,
  body.page-template-page-feature .p-topArticles__list {
    max-width: 100%;
    margin: 0;
    padding: 0 16px; /* ここの数値は今のトップと合わせてOK */
  }
}


/* ================================
   Column / Features カード画像・高さ統一
   WDB
================================ */

/* 画像枠（比率固定） */
.p-topArticles__thumb {
  position: relative;
  width: 100%;
  padding-top: 66.666%; /* ★ 3:2 の比率 → 工藤が好きな比率に変更OK */
  overflow: hidden;
}

/* 中の画像を枠いっぱいに広げてトリミング */
.p-topArticles__thumbImage {
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center;
  display: block;
}



.post-badge.post-badge--catfilter {
  text-decoration: none !important;
}

.post-badge.post-badge--catfilter:hover {
  text-decoration: none !important;
}


.f__header {
    display: flex;
    row-gap: 9.1603053435vw;
    padding-bottom: 0;
    margin-bottom:3.3674963397vw;
}

@media (min-width: 801px) {
    .f__header {
        grid-template-columns:26.2079062958vw 1fr;
        -moz-column-gap: 3.3674963397vw;
        column-gap: 3.3674963397vw;
        margin-right: 7.3938506589vw;
        margin-left: 7.3938506589vw;
        margin-bottom:3.3674963397vw;
    }
}

@media not all and (min-width: 801px) {
    .f__header {
        padding-right:2em;
        padding-left: 2em;
    }
}

/* Column 個別だけ f__header をページ中央に寄せる（←これを一番後ろに移動） */
@media (min-width: 801px) {
  .single-column .f__header {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    justify-content: center;
  }
}


/* =========================================================
 * 特集カテゴリバッジ（Talk / Column 共通）
 * ======================================================= */

/* UL の並び方 */
.single-talk .p-featureArchive__cats,
.single-column .p-featureArchive__cats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
}

/* LI 自体のリセット */
.single-talk .p-featureArchive__catItem,
.single-column .p-featureArchive__catItem {
  list-style: none;
}

/* バッジ本体 */
.single-talk a.post-badge.post-badge--catfilter,
.single-column a.post-badge.post-badge--catfilter {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1.4;
  background: #f8f8f8;
  color: #585858;
  border: 1px solid #ccc;
  text-decoration: none !important;
  letter-spacing: 0.08em;
}

/* ホバー時 */
.single-talk a.post-badge.post-badge--catfilter:hover,
.single-column a.post-badge.post-badge--catfilter:hover {
  background: #000000;
  color: #ffffff;
}

.t100 {
  margin-top: 100px;
}


.single-talk a.post-badge.post-badge--catfilter, 
.single-column a.post-badge.post-badge--catfilter{
  color:#585858;
}
/* カテゴリーバッジのvisited対策 */
.post-badge.post-badge--catfilter,
.post-badge.post-badge--catfilter:visited,
.post-badge.post-badge--catfilter:link,
.post-badge.post-badge--catfilter:active {
border-color: #ccc;
    background-color: #f8f8f8;
    color: #333;
      border: 1px solid #ccc;
}

.post-badge.post-badge--catfilter:hover {
  background-color: #d4cdc2 !important;
}

.p-talk .p-talk__inner {
    padding-top: 6.4503816794vw;
    padding-bottom: 9.4147582697vw;
    background-color: #fff;
    box-shadow: 0 0 99px #00000014
}

@media (min-width: 801px) {
    .p-talk .p-talk__inner {
        position:relative;
        z-index: 1;
        padding-top: 8.78477306vw;
        padding-bottom: 8.78477306vw;
        margin-top: -2.196193265vw
    }
}

/* カード全体の高さを揃える */
.p-featureCard {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* テキスト部分だけflexで調整 */
.p-featureCard__body {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* バッジを下に押し下げる */
.p-featureCard__badges {
  margin-top: auto;
  padding-top: 15px;
}

.page-id-7950 .l-contents{
  margin-bottom:0;
}
.page-id-7950 .p-topContents{
  padding-top:0;
}
.p-topContents .p-topContents__section {
    margin-top: 3vw !important;
}

/* ▼ デフォルト（非選択）：グレー */
/*.post-badge.post-badge--talk.post-badge--catfilter,
.post-badge.post-badge--column.post-badge--catfilter,
.post-badge.post-badge--tidbits.post-badge--catfilter {
    background-color: #999;
    color: #fff;
    border-color: #999;
}*/

/* ▼ 選択中（active）：ブラック */
/*.post-badge.post-badge--talk.post-badge--catfilter.active,
.post-badge.post-badge--column.post-badge--catfilter.active,
.post-badge.post-badge--tidbits.post-badge--catfilter.active,
.post-badge.post-badge--talk.post-badge--catfilter:visited,
.post-badge.post-badge--column.post-badge--catfilter:visited,
.post-badge.post-badge--tidbits.post-badge--catfilter:visited {
    background-color: #aaa;
    color: #333;
    border-color: #aaa;
}*/

/* ▼ フィルターボタン：非選択（グレー） */
.post-badge--catfilter {
    background-color: #f8f8f8;
    color: #999;
    border-color: #ccc;
}

/* ▼ フィルターボタン：選択中（ブラック） */
.post-badge--catfilter.active {
    background-color: #333 !important;
    color: #fff !important;
    border-color: #333 !important;
}


/* ▼ 絞り込み中ラベル */
.p-featureArchive__filterLabel {
    margin: 16px 0 24px;
    text-align: left;
    padding: 0 8px;
}

.p-featureArchive__filterLabelText {
    display: inline-block;
    background: #111;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    padding: 4px 16px;
    border-radius: 20px;
    letter-spacing: 0.05em;
}


/* ▼ スマホ時：フィルターボタン群の余白調整 */
@media screen and (max-width: 767px) {
    .p-featureArchive__cats {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        padding: 0 16px;
        margin: 0;
        justify-content: flex-start;
    }

    .p-featureArchive__catItem {
        margin: 0;
    }

    .p-featureArchive__catItem .post-badge--catfilter {
        white-space: nowrap;
        font-size: 12px;
        padding: 4px 12px;
    }
}

/* ▼ 特集ページのみ：スマホ時カードの左右余白 */
@media screen and (max-width: 800px) {
    .page-template-page-feature .p-topContents__wide {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
}




/* ▼ 特集ページのみ：スマホ時の上余白を詰める */
@media screen and (max-width: 800px) {
    .page-template-page-feature .l-container .l-container__inner {
        margin-top: 8vw !important;
    }

    .page-template-page-feature .p-topContents {
        padding-top: 8vw !important;
    }

    .page-template-page-feature .f__header.t100 {
        padding: 0 16px !important;
        margin-top: 0 !important;
    }

    .page-template-page-feature .p-featureArchive__cats {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
        justify-content: flex-start !important;
    }

    .page-template-page-feature .p-featureArchive__catItem {
        margin: 0 !important;
        width: auto !important;
    }

    .sp-mg{
      margin-top:6em;
    }
}


/* カードグリッドの下に余白追加 */
.p-featureArchive__cards {
  margin-bottom: 80px; /* お好みで調整 */
}


@media screen and (max-width: 800px) {
  .page-template-page-feature .f__header.t100 {
    margin-top: 60px !important;
    padding-right: 7.6335877863vw !important;
    padding-left: 7.6335877863vw !important;
  }
}

@media screen and (max-width: 800px) {
  .page-template-page-feature .f__header.t100 .p-featureArchive__cats {
    margin-top: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* single-talk バッジ横並び */
.single-talk .p-talk__left {
  width: 100%;
}
.single-talk .p-featureArchive__cats {
  flex-wrap: nowrap !important;
}

/* single-talk バッジ幅リセット */
.single-talk .p-featureArchive__catItem .post-badge {
  width: auto !important;
  flex: none !important;
}

/* single-talk バッジコンテナ幅修正 */
.single-talk .p-talk__cats {
  display: inline-flex !important;
  width: auto !important;
}

/* featureページ カテゴリバッジのフォント統一 */
.p-featureArchive .post-badge--cat,
.p-featureCard__badges .post-badge--cat,
.p-topContents__wide .post-badge--cat {
  font-family: inherit !important;
}

/* related-features バッジ中央揃え */
.p-featureCard__badges .post-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}