/* Topics Section */
.topics-list-section {
  padding: 2rem 0 var(--space-section-bottom);
}

.topics-detail-section {
  padding: 7rem 0 var(--space-section-bottom);
  background-color: #fefefe;
}

@media (min-width: 768px) {
  .topics-list-section {
    padding-top: 3rem;
  }
  .topics-detail-section {
    padding-top: 9rem;
  }
}

.topics-breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.75rem;
  margin-bottom: 2rem;
}
.topics-breadcrumb__link,
.topics-breadcrumb__separator {
  flex-shrink: 0;
  white-space: nowrap;
}
/* 最後の段（記事タイトル）は 1 行で省略表示。長いタイトルでも折り返さず末尾「…」 */
.topics-breadcrumb__current {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (min-width: 768px) {
  .topics-breadcrumb {
    margin-bottom: 2.5rem;
  }
}


/* Topics List */
.topics-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
}

@media (min-width: 768px) {
  .topics-list {
    grid-template-columns: repeat(2, 1fr);
    gap: 4rem;
  }
}

@media (min-width: 1024px) {
  .topics-list {
    grid-template-columns: repeat(3, 1fr);
  }
}

.topics-card {
  display: flex;
  flex-direction: column;
}

.topics-card__image-wrapper {
  aspect-ratio: 16/9;
  overflow: hidden;
  margin-bottom: 1.5rem;
  background-color: var(--color--surface);
}

/* WP の wp:post-featured-image は figure > a > img を出力するので
   img へ直接 fill 指定する。BEM の .topics-card__image は静的 mockup 用。 */
.topics-card__image,
.topics-card__image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.9;
  transition: all 0.7s ease;
  display: block;
}

.topics-card:hover .topics-card__image,
.topics-card:hover .topics-card__image-wrapper img:not(.topics-image-placeholder__logo) {
  transform: scale(1.05);
}

.topics-card__meta {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.topics-card__date {
  font-size: 0.75rem;
  letter-spacing: 0.1em;
}

.topics-card__category {
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  padding: 0.3rem 0.75rem;
  background: var(--gradient--accent);
  color: #ffffff;
  border-radius: 100px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: inline-block;
  line-height: 1.2;
}

.topics-card__category:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(27, 110, 188, 0.3);
}

/* wp:post-title は一覧/カテゴリーで <h2> 出力 → theme.json の h2=明朝 を打ち消す */
.topics-card__title {
  font-family: var(--font--sans);
  font-weight: 600;
  font-size: 1.125rem;
  line-height: 1.6;
  letter-spacing: 0.06em;
  transition: color 0.3s ease;
}

.topics-card:hover .topics-card__title {
  color: var(--color--accent);
}

/* ===== 一覧ページネーション（前へ / 1 2 3 / 次へ）— ミニマル =====
   WP の wp:query-pagination が出すクラス
   （wp-block-query-pagination-previous / -next / .page-numbers）に当てる。 */
.topics-list__pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem 1.25rem;
  margin-top: 3rem;
}
@media (min-width: 768px) {
  .topics-list__pagination {
    margin-top: 4rem;
  }
}

/* 前へ / 次へ：Cormorant イタリック + 青グラデ文字 */
.topics-list__pagination .wp-block-query-pagination-previous,
.topics-list__pagination .wp-block-query-pagination-next {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 0.9375rem;
  letter-spacing: 0.1em;
  text-decoration: none;
  background: var(--gradient--accent);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  transition: opacity 0.3s ease;
}
@media (hover: hover) and (pointer: fine) {
  .topics-list__pagination .wp-block-query-pagination-previous:hover,
  .topics-list__pagination .wp-block-query-pagination-next:hover {
    opacity: 0.6;
  }
}

/* 数字グループ */
.topics-list__pagination .wp-block-query-pagination-numbers {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

/* 各数字 */
.topics-list__pagination .page-numbers {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  height: 2rem;
  padding: 0 0.4rem;
  font-family: var(--font--mono);
  font-size: 0.8125rem;
  letter-spacing: 0.05em;
  text-decoration: none;
  color: var(--color--ink);
  border-radius: 6px;
  transition: background-color 0.3s ease, color 0.3s ease;
}
@media (hover: hover) and (pointer: fine) {
  .topics-list__pagination a.page-numbers:hover {
    background-color: rgba(27, 110, 188, 0.08);
    color: var(--color--accent);
  }
}

/* 現在ページ：青グラデ塗り + 白文字 */
.topics-list__pagination .page-numbers.current {
  background: var(--gradient--accent);
  color: #ffffff;
}

/* …（省略記号） */
.topics-list__pagination .page-numbers.dots {
  min-width: auto;
  padding: 0 0.2rem;
  color: var(--color--ink--light);
}

/* Topics Detail */
.topics-detail {
  max-width: 48rem;
  margin: 0 auto;
}

@media (min-width: 1024px) {
  .topics-detail {
    max-width: 72rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 17rem;
    gap: 4rem;
    align-items: start;
  }
  .topics-detail__main {
    min-width: 0;
    max-width: 48rem;
  }
}

/* Sidebar */
.topics-detail__sidebar {
  margin-top: 4rem;
}
@media (min-width: 1024px) {
  .topics-detail__sidebar {
    margin-top: 0;
  }
}

.topics-detail__sidebar-inner {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

.sidebar-section__head {
  margin-bottom: 1.25rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(42, 42, 42, 0.1);
}
.sidebar-section__eyebrow {
  display: block;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 0.9375rem;
  letter-spacing: 0.1em;
  background: var(--gradient--accent);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 0.125rem;
}
.sidebar-section__title {
  font-size: 1rem;
  letter-spacing: 0.06em;
  color: var(--color--ink);
  margin: 0;
}

/* Sidebar: Related Articles */
.sidebar-articles {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
/* WP: サイドバーの Query Loop は <div.wp-block-query> > <ul.wp-block-post-template> > <li.wp-block-post>。
   カード間隔を WP 既定や figure の UA マージン任せにせず、ここで明示的に 1.25rem の縦並びに揃える
   （アイキャッチ未設定カードの placeholder は <div>、実画像は <figure> で、放置すると間隔がズレる）。 */
.sidebar-articles .wp-block-post-template {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.sidebar-articles .wp-block-post {
  margin: 0;
}
.sidebar-article {
  display: flex;
  gap: 0.875rem;
  align-items: flex-start;
  text-decoration: none;
  color: inherit;
  transition: opacity 0.3s ease;
}
.sidebar-article:hover {
  opacity: 0.7;
}
.sidebar-article__thumb {
  flex-shrink: 0;
  width: 120px;
  aspect-ratio: 4/3;
  overflow: hidden;
  background-color: var(--color--surface);
  margin: 0;
}
.sidebar-article__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.sidebar-article__body {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  min-width: 0;
}
.sidebar-article__meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.sidebar-article__category {
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  padding: 0.15rem 0.5rem;
  background: var(--gradient--accent);
  color: #ffffff;
  border-radius: 100px;
  display: inline-block;
  line-height: 1.3;
}
.sidebar-article__title {
  font-family: var(--font--sans);
  font-size: 0.8125rem;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: var(--color--ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.3s ease;
}
.sidebar-article:hover .sidebar-article__title {
  color: var(--color--accent);
}

/* Sidebar: Categories */
.sidebar-categories {
  list-style: none;
  padding: 0;
  margin: 0;
}
.sidebar-categories li + li {
  border-top: 1px solid rgba(42, 42, 42, 0.06);
}
.sidebar-categories__link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 0;
  text-decoration: none;
  color: var(--color--ink);
  font-size: 0.875rem;
  letter-spacing: 0.05em;
  transition: color 0.3s ease;
}
.sidebar-categories__link:hover {
  color: var(--color--accent);
}
.sidebar-categories__count {
  font-family: var(--font--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  color: var(--color--ink--light);
}

/* Recommended Articles (記事下・全幅 3 列グリッド) */
.topics-recommended {
  margin-top: 5rem;
  padding-top: 4rem;
  border-top: 1px solid rgba(42, 42, 42, 0.1);
}

.topics-recommended__head {
  margin-bottom: 2.5rem;
  text-align: center;
}
.topics-recommended__eyebrow {
  display: block;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 1.125rem;
  letter-spacing: 0.1em;
  background: var(--gradient--accent);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 0.25rem;
}
.topics-recommended__title {
  font-family: var(--font--sans);
  font-weight: 600;
  font-size: 1.25rem;
  letter-spacing: 0.06em;
  color: var(--color--ink);
  margin: 0;
}
@media (min-width: 768px) {
  .topics-recommended {
    margin-top: 6rem;
    padding-top: 5rem;
  }
  .topics-recommended__title {
    font-size: 1.5rem;
  }
}

/* SP: トピックス一覧（archive / taxonomy / 合わせて読みたい）を
   サイドバーの関連・新着と同じコンパクト横並びに統一。
   .topics-card は __body のまとめ箱が無いので Grid で
   「画像（2行ぶち抜き） / 右に meta → title」を組む。
   PC では従来通りカード grid のまま。 */
@media (max-width: 767px) {
  .topics-list {
    gap: 0;
  }
  .topics-list .topics-card {
    display: grid;
    grid-template-columns: 120px 1fr;
    column-gap: 0.875rem;
    row-gap: 0.375rem;
    align-items: start;
    margin-bottom: 1.7rem;
    border-bottom: 1px solid rgba(42, 42, 42, 0.1);
  }
  /* 下線は全カードに引く（最後の記事も含む）。最後だけ下の余白を消す。
     静的 mockup / WP の wp-block-post 両対応 */
  .topics-list > .topics-card:last-child,
  .topics-list .wp-block-post:last-child .topics-card {
    margin-bottom: 0;
  }
  .topics-list .topics-card__image-wrapper {
    grid-column: 1;
    grid-row: span 2;
    width: 120px;
    aspect-ratio: 4/3;
    margin-bottom: 0;
    border-radius: 0;
  }
  .topics-list .topics-card__meta {
    grid-column: 2;
    grid-row: 1;
    margin-bottom: 0;
    gap: 0.5rem;
  }
  .topics-list .topics-card__title {
    grid-column: 2;
    grid-row: 2;
    font-size: 0.8125rem;
    line-height: 1.5;
    letter-spacing: 0.05em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .topics-list .topics-card__date {
    font-size: 0.6875rem;
  }
  .topics-list .topics-card__category {
    font-size: 0.625rem;
    letter-spacing: 0.08em;
    padding: 0.15rem 0.5rem;
  }
}

.topics-detail__header {
  margin-bottom: 3rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid rgba(42, 42, 42, 0.1);
}

.topics-detail__meta {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.topics-detail__author {
  display: inline-flex;
  align-items: center;
  font-size: 0.875rem;
}

.topics-detail__author img {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  margin-right: 0.5rem;
  object-fit: cover;
}

.topics-detail__date {
  font-size: 0.875rem;
  letter-spacing: 0.1em;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

/* 「公開日」「更新日」のラベル（WP の wp:post-date は <time> 単独しか出せないので
   ::before で枠線つきラベルを擬似要素で挿入する）。 */
.topics-detail__date--published::before,
.topics-detail__date--modified::before {
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  padding: 0.15rem 0.4rem;
  border: 1px solid rgba(42, 42, 42, 0.18);
  border-radius: 4px;
  color: var(--color--ink--light);
  line-height: 1.2;
}
.topics-detail__date--published::before { content: "公開日"; }
.topics-detail__date--modified::before  { content: "更新日"; }

.topics-detail__category {
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  padding: 0.3rem 0.75rem;
  background: var(--gradient--accent);
  color: #ffffff;
  border-radius: 100px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: inline-block;
  line-height: 1.2;
}

.topics-detail__category:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(27, 110, 188, 0.3);
}

/* theme.json が h1/h2 を明朝にするので、Topics 側はゴシックで明示上書き */
.topics-detail__title {
  font-family: var(--font--sans);
  font-weight: 600;
  font-size: 1.35rem;
  letter-spacing: 0.06em;
  line-height: 1.5;
}

@media (min-width: 768px) {
  .topics-detail__title {
    font-size: 1.8rem;
  }
}

/* エディター（ブロックエディタ）の記事タイトル入力欄をゴシックで上書き。
   theme.json が elements.h1 を明朝にしているので、編集画面の <h1.editor-post-title>
   もデフォルトで明朝になる。topics.css は editor-preview.php が
   「トピックス編集時のみ」キャンバスへ注入するので、ここに書けば
   他の投稿タイプ（news / 固定ページ）には波及しない。 */
.editor-post-title,
.editor-post-title__input,
.wp-block-post-title,
h1.wp-block-post-title {
  font-family: var(--font--sans);
}

.topics-detail__image-wrapper {
  aspect-ratio: 16/9;
  overflow: hidden;
  margin-bottom: 3rem;
  background-color: var(--color--surface);
}

/* WP の wp:post-featured-image は figure > img を出力するので
   img へ直接 fill 指定する。BEM の .topics-detail__image は静的 mockup 用。 */
.topics-detail__image,
.topics-detail__image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.topics-detail__content {
  font-size: 1rem;
  line-height: 2;
  color: var(--color--ink);
}

/* ----- 見出し h2: 薄い青背景 + 4px 青グラデバー（角直角） ----- */
.topics-detail__content h2,
h2.wp-block-heading {
  font-family: var(--font--sans);
  font-size: 1.25rem;
  letter-spacing: 0.06em;
  line-height: 1.7;
  margin-top: 4rem;
  margin-bottom: 1.5rem;
  padding: 0.75rem 1rem;
  background-color: rgba(27, 110, 188, 0.025);
  border-radius: 0;
  position: relative;
  font-weight: 600;
  color: var(--color--ink);
}

.topics-detail__content h2::before,
h2.wp-block-heading::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: var(--gradient--accent);
  border-radius: 0;
}

@media (min-width: 768px) {
  .topics-detail__content h2,
  h2.wp-block-heading {
    font-size: 1.5rem;
    padding: 1rem 1.5rem;
  }
}

/* ----- 見出し h3: 下罫線 + 左下に短い青グラデアクセント ----- */
.topics-detail__content h3,
h3.wp-block-heading {
  font-size: 1.125rem;
  letter-spacing: 0.06em;
  line-height: 1.7;
  margin-top: 3rem;
  margin-bottom: 1.25rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid rgba(0, 0, 0, 0.08);
  position: relative;
  font-weight: 600;
  color: var(--color--ink);
}

.topics-detail__content h3::before,
h3.wp-block-heading::before {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 80px;
  height: 2px;
  background: var(--gradient--accent);
}

@media (min-width: 768px) {
  .topics-detail__content h3,
  h3.wp-block-heading {
    font-size: 1.25rem;
  }
}

/* ----- 見出し h4: 左に 2px 青グラデバー + 下にグレー罫線。
   青バーは上端から下のグレー罫線まで一体で伸びる。 ----- */
.topics-detail__content h4,
h4.wp-block-heading {
  position: relative;
  font-size: 1rem;
  letter-spacing: 0.06em;
  line-height: 1.7;
  margin-top: 2rem;
  margin-bottom: 0.875rem;
  padding: 0.5rem 0 0.5rem 0.875rem;
  border-bottom: 2px solid rgba(0, 0, 0, 0.08);
  font-weight: 600;
  color: var(--color--ink);
}

.topics-detail__content h4::before,
h4.wp-block-heading::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--gradient--accent);
}

/* ----- 箇条書き: 薄い青背景ボックス（角丸） + 丸ポチ + 下線区切り ----- */
.topics-detail__content ul,
.wp-block-list {
  list-style: none;
  padding: 1.5rem 1.75rem;
  margin: 1rem 0 1.5rem;
  background-color: rgba(27, 110, 188, 0.04);
  border-radius: 8px;
}

.topics-detail__content li,
.wp-block-list li {
  position: relative;
  padding-left: 1.5rem;
  padding-bottom: 0.75rem;
  margin-bottom: 0.75rem;
  border-bottom: 1px solid rgba(27, 110, 188, 0.12);
  line-height: 1.9;
  color: var(--color--ink);
}

.topics-detail__content li:last-child,
.wp-block-list li:last-child {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0;
}

.topics-detail__content li::before,
.wp-block-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--gradient--accent);
}

.topics-detail__content p,
.wp-block-paragraph {
  margin-bottom: 1.5rem;
}

/* =========================================================
   テーブル (core/table) — 本文中のデータ表
   ヘッダー: サイトアクセント青の単色 / 角丸 8px / 薄罫線（縦横）
   ========================================================= */
.wp-block-table {
  margin: 1.5rem 0 2rem;
  /* figure 自体を外枠ラッパーにする（border-collapse の table に border-radius が効かない問題を回避） */
  border: 1px solid rgba(27, 110, 188, 0.35);
  border-radius: 4px;
  overflow: hidden;
  background-color: #fff;
}
.wp-block-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}
.wp-block-table thead {
  background: var(--color--accent);
  color: #fff;
}
/* WP コアCSS が .wp-block-table td/th に border:1px solid を一括で当ててくるので
   いったん border:none で全方位リセットしてから必要な罫線だけ付け直す */
.wp-block-table th,
.wp-block-table td {
  border: none;
}
.wp-block-table th {
  padding: 0.75rem 1rem;
  text-align: left;
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  line-height: 1.4;
  color: #fff;
  border-right: 1px solid rgba(255, 255, 255, 0.22);
}
.wp-block-table th:last-child {
  border-right: none;
}
.wp-block-table td {
  padding: 0.875rem 1rem;
  border-right: 1px solid rgba(27, 110, 188, 0.12);
  border-bottom: 1px solid rgba(27, 110, 188, 0.12);
  line-height: 1.6;
  color: var(--color--ink);
}
/* 外枠と二重にならないよう、最右セルの右罫と最終行セルの下罫を消す */
.wp-block-table td:last-child {
  border-right: none;
}
.wp-block-table tbody tr:last-child td {
  border-bottom: none;
}
/* 「左列を項目見出し」ブロックスタイル限定の装飾。
   エディタの右サイドバー > スタイル > 左列を項目見出し を選んだテーブルだけ
   1 列目を「項目見出し風」（薄青背景 + 太字 + 内容ぴったりまで狭く）に装飾する。
   PHP 側で register_block_style('core/table', name=row-header) を登録済み。 */
.wp-block-table.is-style-row-header tbody tr td:first-child {
  background-color: rgba(27, 110, 188, 0.04);
  font-weight: 600;
  color: var(--color--ink);
  /* 縦方向は中央寄せ（内容セル側が複数行になっても項目見出しは行の中央に置く） */
  vertical-align: middle;
  /* width: 1% で「内容に必要な最小幅まで縮める」効果。
     white-space: nowrap で短い項目名は折り返さず1行で。
     ただし窮屈にならないよう左右の padding を通常セルより少し広めに取る。 */
  width: 1%;
  white-space: nowrap;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
.wp-block-table figcaption {
  text-align: right;
  font-size: 0.75rem;
  color: var(--color--ink--light);
  margin-top: 0.5rem;
  line-height: 1.6;
}
/* 横スクロール可能であることを示すヒント文（PHP の render_block_core/table フィルタが挿入）
   PC では非表示、4列以上の SP テーブルでだけ表示する */
.wp-block-table__scroll-hint {
  display: none;
}
/* モバイル */
@media (max-width: 767px) {
  /* セル余白は全テーブルで詰める（共通） */
  .wp-block-table th,
  .wp-block-table td {
    padding: 0.625rem 0.75rem;
    font-size: 0.8125rem;
  }
  /* 「左列を項目見出し」スタイル時は 1 列目に少し左右余白を残す（SP でも窮屈にしない） */
  .wp-block-table.is-style-row-header tbody tr td:first-child {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  /* 4列以上のテーブル限定: 横スクロール + min-width + ヒント表示
     （3列以下は通常表示で画面内に収める） */
  .wp-block-table.is-scrollable {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .wp-block-table.is-scrollable table {
    /* SP 画面（〜540px）でハミ出させて figure の overflow-x: auto を発動させる */
    min-width: 540px;
  }
  .wp-block-table.is-scrollable + .wp-block-table__scroll-hint {
    display: block;
    margin: 0.5rem 0 0;
    text-align: center;
    font-size: 0.6875rem;
    letter-spacing: 0.08em;
    color: var(--color--ink--light);
    line-height: 1.4;
  }
}

/* =========================================================
   記事カード [article_card] — 本文中に置く内部リンクのカード
   ========================================================= */
.article-card {
  display: flex;
  align-items: stretch;
  margin: 2rem 0;
  min-height: 7rem;
  background-color: #fff;
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
@media (hover: hover) and (pointer: fine) {
  .article-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.06);
  }
}
.article-card__thumb {
  position: relative;
  flex-shrink: 0;
  width: 120px;
  background-color: var(--color--surface);
  overflow: hidden;
}
.article-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.article-card__thumb .article-card__placeholder-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 66%;
  height: auto;
  opacity: 0.16;
}
.article-card__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 1rem 1.25rem;
}
.article-card__meta {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  flex-wrap: wrap;
}
.article-card__category {
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  padding: 0.15rem 0.5rem;
  background: var(--gradient--accent);
  color: #ffffff;
  border-radius: 100px;
  line-height: 1.3;
}
.article-card__title {
  font-family: var(--font--sans);
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.6;
  letter-spacing: 0.04em;
  color: var(--color--ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.3s ease;
}
.article-card:hover .article-card__title {
  color: var(--color--accent);
}
.article-card__more {
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  color: var(--color--accent);
  margin-top: auto;
}
@media (min-width: 768px) {
  .article-card__thumb {
    width: 200px;
  }
  .article-card__body {
    padding: 1.5rem 1.75rem;
  }
  .article-card__title {
    font-size: 1.0625rem;
  }
}

/* Author Box */
.topics-author {
  position: relative;
  margin-top: 4rem;
  padding: 2rem;
  background-color: #fff;
  border: 1px solid rgba(27, 110, 188, 0.18);
  border-radius: 12px;
}

.topics-author__eyebrow {
  position: absolute;
  top: 0;
  left: 1.5rem;
  transform: translateY(-50%);
  padding: 0.3rem 0.875rem;
  background: var(--gradient--accent);
  color: #fff;
  font-family: var(--font--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.2em;
  border-radius: 100px;
  line-height: 1.2;
}

.topics-author__body {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  align-items: center;
  text-align: center;
}

@media (min-width: 768px) {
  .topics-author {
    padding: 2.5rem;
  }
  .topics-author__eyebrow {
    left: 2rem;
  }
  .topics-author__body {
    flex-direction: row;
    align-items: flex-start;
    text-align: left;
  }
  .topics-author__desc {
    margin-top: 0.75rem;
  }
}

.topics-author__image-wrapper {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}

.topics-author__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.topics-author__info {
  flex-grow: 1;
}

.topics-author__name {
  font-size: 1.25rem;
  margin-bottom: 0.25rem;
  color: var(--color--ink);
}

.topics-author__role {
  font-size: 0.875rem;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(42, 42, 42, 0.12);
}

.topics-author__desc {
  font-size: 0.875rem;
  line-height: 1.8;
  margin-bottom: 1rem;
}

/* SP: AUTHOR カード — 写真の右に「名前 → 肩書き」、経歴・リンクは下段に全幅・左寄せ。
   PC（min-width:768px）は従来どおり。 */
@media (max-width: 767px) {
  .topics-author__body {
    display: grid;
    grid-template-columns: 100px 1fr;
    row-gap: 1.25rem;
    align-items: center;
    text-align: left;
  }
  .topics-author__info {
    display: contents;
  }
  .topics-author__image-wrapper {
    grid-column: 1;
    grid-row: 1;
  }
  .topics-author__head-text {
    grid-column: 2;
    grid-row: 1;
  }
  .topics-author__desc {
    grid-column: 1 / -1;
    grid-row: 2;
    margin-bottom: 0;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(42, 42, 42, 0.12);
  }
  /* 肩書き下の区切り線は新レイアウトでは不要なので SP では消す */
  .topics-author__role {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
  }
}

/* Pagination */
.topics-detail__footer {
  margin-top: 5rem;
}

/* --- 記事下 prev / next（カード型：サムネ + 日付 + タイトル） --- */
.article-pagination-card {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
.article-pagination-card__item {
  display: flex;
  align-items: stretch;
  background-color: #fff;
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
  text-decoration: none;
  color: inherit;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  overflow: hidden;
}
.article-pagination-card__item:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.06);
}
.article-pagination-card__thumb {
  flex-shrink: 0;
  width: 96px;
  display: block;
  background-color: var(--color--surface);
  overflow: hidden;
}
.article-pagination-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.article-pagination-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  padding: 1rem;
  min-width: 0;
  flex: 1;
}
.article-pagination-card__nav {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 0.8125rem;
  letter-spacing: 0.2em;
  color: var(--color--accent);
}
.article-pagination-card__next .article-pagination-card__nav {
  justify-content: flex-end;
}
.article-pagination-card__icon {
  transition: transform 0.3s ease;
}
.article-pagination-card__prev:hover .article-pagination-card__icon { transform: translateX(-4px); }
.article-pagination-card__next:hover .article-pagination-card__icon { transform: translateX(4px); }
.article-pagination-card__date {
  font-size: 0.75rem;
  letter-spacing: 0.05em;
}
.article-pagination-card__title {
  font-size: 0.9375rem;
  letter-spacing: 0.05em;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.3s ease;
}
.article-pagination-card__item:hover .article-pagination-card__title {
  color: var(--color--accent);
}
.article-pagination-card__next {
  flex-direction: row-reverse;
}
.article-pagination-card__next .article-pagination-card__body {
  text-align: right;
}
@media (min-width: 768px) {
  .article-pagination-card {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }
  .article-pagination-card__thumb {
    width: 140px;
  }
  .article-pagination-card__body {
    padding: 1.5rem;
  }
}

/* prev / next 直下の「一覧へ戻る」ボタン用ラッパ */
.article-back-action {
  display: flex;
  justify-content: center;
  margin-top: 2.5rem;
}
@media (min-width: 768px) {
  .article-back-action {
    margin-top: 3.5rem;
  }
}

/* =========================================================
   記事末 CTA (.topics-cta) は全ページ共通の style.css に移動済み
   （news など他 CPT でも同じパターンで使えるようにするため）
   ========================================================= */

/* =========================================================
   自作目次（TOC）— トピックス詳細でのみ JS が動的に挿入
   ========================================================= */
.toc {
  margin: 2.5rem 0 3rem;
  padding: 1.5rem 1.25rem;
  border: 1px solid rgba(27, 110, 188, 0.12);
  border-radius: 8px;
  background-color: #fff;
}

@media (min-width: 768px) {
  .toc {
    padding: 2rem 2.5rem;
  }
}

.toc__head {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 1.5rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid rgba(27, 110, 188, 0.12);
  position: relative;
}

.toc__title {
  font-family: var(--font--sans);
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0.15em;
  color: var(--color--accent);
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
}

/* タイトルの先頭アイコン（JS で <svg.toc__title-icon> として挿入）。
   高さ・色は親 .toc__title から継承される。 */
.toc__title-icon {
  width: 1.125rem;
  height: 1.125rem;
  flex-shrink: 0;
}

.toc__close {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  background-color: #f0f0f0;
  border: none;
  padding: 0.4rem 0.75rem;
  font-family: var(--font--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.15em;
  color: var(--color--ink);
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.toc__close:hover {
  background-color: #e0e0e0;
}

.toc__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.toc__item {
  padding: 0.875rem 0;
  border-bottom: 1px solid rgba(27, 110, 188, 0.12);
}

.toc__item:last-child {
  border-bottom: none;
}

.toc__item--level-3 {
  padding-left: 1.5rem;
}

.toc__link {
  display: flex;
  align-items: baseline;
  gap: 0.625rem;
  text-decoration: none;
  color: var(--color--ink);
  font-size: 0.9375rem;
  line-height: 1.6;
  transition: color 0.3s ease;
}

.toc__link:hover {
  color: var(--color--accent);
}

.toc__number {
  flex-shrink: 0;
  font-family: var(--font--mono);
  font-size: 0.85rem;
  color: var(--color--accent);
  letter-spacing: 0.1em;
  padding-right: 0.625rem;
  border-right: 1px solid rgba(27, 110, 188, 0.4);
  min-width: 2rem;
}

.toc__item--level-3 .toc__number {
  font-size: 0.85rem;
}

.toc__text {
  flex: 1;
}

/* 右下フローティング「目次へ」ボタン（目次が画面外に出たら表示） */
.toc__back-to-top {
  position: fixed;
  right: 1rem;
  bottom: 1.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.625rem 1rem;
  background: var(--gradient--accent);
  color: #fff;
  border: none;
  border-radius: 100px;
  font-family: inherit;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(27, 110, 188, 0.35);
  z-index: 100;
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.toc__back-to-top.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.toc__back-icon {
  width: 1rem;
  height: 1rem;
}

@media (min-width: 768px) {
  .toc__back-to-top {
    right: 2rem;
    bottom: 2rem;
    padding: 0.75rem 1.25rem;
    font-size: 0.8125rem;
  }
  .toc__back-icon {
    width: 1.125rem;
    height: 1.125rem;
  }
}

/* =========================================================
   本文用 h2/h3/ul/li 装飾が目次に伝染するのを完全に打ち消す。
   .topics-detail__content の specificity を上げて上書きする。
   ========================================================= */
.topics-detail__content .toc {
  margin: 2.5rem 0 3rem;
  padding: 1.5rem 1.25rem;
  border: 2.5px solid rgb(93 175 252 / 50%);
  border-radius: 8px;
  background-color: #fff;
}
@media (min-width: 768px) {
  .topics-detail__content .toc {
    padding: 2rem 2.5rem;
  }
}

/* 目次ヘッダー — タイトル中央 + OPEN/CLOSE 右の grid レイアウト。
   absolute 配置だと CLOSE の line-height や padding でズレが出るので grid で揃える。 */
.topics-detail__content .toc__head {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}
.topics-detail__content .toc__close {
  grid-column: 3;
  justify-self: end;
  position: static;
  transform: none;
  top: auto;
}

/* 目次タイトル（h2）— 本文 h2 の青背景・4px バー・margin を完全リセット */
.topics-detail__content .toc__title {
  grid-column: 2;
  justify-self: center;
  font-family: var(--font--sans);
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0.15em;
  color: var(--color--accent);
  margin: 0;
  padding: 0;
  background: none;
  border-radius: 0;
  position: static;
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
}
/* 本文 h2 装飾の ::before/::after をリセット（content: none で消す）。
   タイトルのアイコンは JS が <svg.toc__title-icon> として挿入する HTML 側で対応。 */
.topics-detail__content .toc__title::before,
.topics-detail__content .toc__title::after {
  content: none;
}

/* 目次リスト — 本文 ul の青背景・padding をリセット + ふわっと開閉アニメーション */
.topics-detail__content .toc__list {
  list-style: none;
  margin: 0;
  padding: 0;
  background: none;
  border-radius: 0;
  overflow: hidden;
  transition: max-height 0.5s ease, opacity 0.5s ease;
}

/* 目次アイテム — 本文 li の青ポチ ::before、border、padding-left をリセット */
.topics-detail__content .toc__item {
  padding: 0.5rem 0;
  margin: 0;
  border-bottom: 1px solid rgba(27, 110, 188, 0.12);
  line-height: 1.6;
  position: static;
  color: var(--color--ink);
}
.topics-detail__content .toc__item:last-child {
  border-bottom: none;
}
.topics-detail__content .toc__item::before {
  content: none;
  display: none;
}
.topics-detail__content .toc__item--level-3 {
  padding-left: 1.5rem;
}
.topics-detail__content .toc__item--level-3 .toc__link {
  font-size: 0.8125rem;
}

/* プレビュー状態：最初の項目 + うっすら続く 2 項目だけが見え、続きはフェードで隠す。
   JS で .is-preview クラス + max-height を付与する。 */
.topics-detail__content .toc__list.is-preview {
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0.4) 50%, rgba(0,0,0,0) 100%);
          mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0.4) 50%, rgba(0,0,0,0) 100%);
  pointer-events: none;
}