/* =========================================================================
   SEOROBO — コンポーネント

   ⚠️ このファイルに生の hex を書かないこと。色は必ず var(--*) で参照する。
      色の実体は tokens.css だけが持つ。
   ⚠️ アクセントは var(--c-accent) / var(--c-accent-deep) 経由のみ。
      slot 番号による分岐や色の配列を作らないこと。
   ⚠️ メディアクエリは min-width（モバイルファースト）のみ。

   命名: l-* レイアウト / c-* コンポーネント / p-* ページ固有パーツ / u-* ユーティリティ
   ========================================================================= */

/* =========================================================================
   ベース
   ========================================================================= */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd,
ul, ol {
  margin: 0;
}

ul, ol {
  padding: 0;
  list-style: none;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  letter-spacing: var(--ls-base);
  color: var(--c-text);
  background-color: var(--c-bg);
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

input, button, textarea, select {
  font: inherit;
  color: inherit;
}

a {
  color: var(--c-accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--c-focus);
  outline-offset: 2px;
}

h1, h2, h3, h4 {
  line-height: var(--lh-tight);
  font-weight: 700;
  letter-spacing: var(--ls-heading);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* =========================================================================
   アクセシビリティ
   ========================================================================= */

/* 視覚的にだけ隠す。読み上げには残る。
   ⚠️ display: none にしないこと（読み上げからも消えるため）。
   .screen-reader-text は WordPress が出力するマークアップ用に残してある。 */
.u-sr-only,
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link:focus-visible {
  position: fixed;
  top: var(--sp-2);
  left: var(--sp-2);
  z-index: 100;
  width: auto;
  height: auto;
  padding: var(--sp-2) var(--sp-4);
  clip-path: none;
  color: var(--c-text-inverse);
  background-color: var(--c-accent-deep);
  border-radius: var(--radius-sm);
}

/* =========================================================================
   l-* レイアウト
   ========================================================================= */

.l-site {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.l-main {
  flex: 1 0 auto;
}

/* コンテナ。--article は記事詳細用の狭い版（実測 1040px）。
   ⚠️ --container-max は「中身の幅」。左右パディングはその外側に足す。
      max-width にそのまま入れるとパディングぶん中身が痩せ、カンプより
      カラムが 10px 前後細くなる（1440 幅で実測 335px vs カンプ 345px）。 */
.l-container {
  width: 100%;
  max-width: calc(var(--container-max) + var(--container-pad) * 2);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.l-container--article {
  max-width: calc(var(--container-article) + var(--container-pad) * 2);
}

/* 全幅コンテナ。センタリングせず左右にパディングだけを持つ。
   ⚠️ ヘッダーとヒーロー内パンくずはこちら（カンプ実測 1440幅で 40〜1399）。
      本文セクションの 1100px センタリングとは別物なので混ぜないこと。 */
.l-container--edge {
  max-width: none;
}

@media (min-width: 1024px) {
  .l-container--edge {
    padding-inline: var(--container-edge-pad);
  }
}

/* グリッド。カラム数は「親が」決める。カード側は列数を一切持たない。 */
.l-grid {
  display: grid;
  gap: var(--sp-6) var(--gap-grid);
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .l-grid--2,
  .l-grid--3,
  .l-grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

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

  .l-grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* カテゴリカードは記事カードより詰める（実測 列20px / 行16px）。 */
.l-grid--tight {
  gap: var(--gap-grid-tight-row) var(--gap-grid-tight);
}

/* セクションの縦リズム。 */
.l-section {
  padding-block: var(--sp-7);
}

@media (min-width: 1024px) {
  .l-section {
    padding-block: var(--sp-8);
  }
}

.l-section--divided {
  border-top: 1px solid var(--c-border-strong);
}

.l-section__title {
  margin-bottom: var(--sp-6);
  font-size: var(--fs-xl);
}

/* 中央寄せの見出し（ツール一覧のタグ紹介ブロック）。 */
.l-section__title--center {
  text-align: center;
}

/* 「カテゴリで探す」など、上に区切り線が入る見出し。 */
.l-section__title--ruled {
  padding-top: var(--sp-7);
  border-top: 1px solid var(--c-border-strong);
}

/* 「読むべき記事TOP3」の帯。カンプ実測では背景が途中で切れ、カードが
   境界をまたぐ（帯の高さがカードより低い）。 */
.p-archive__top3 {
  position: relative;
  padding-top: var(--sp-6);
}

.p-archive__top3::before {
  position: absolute;
  inset: 0 0 auto;
  height: 220px;
  content: "";
  background-color: var(--c-bg-subtle);
}

.p-archive__top3 > .l-container {
  position: relative;
}

/* =========================================================================
   c-btn
   ========================================================================= */

.c-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-5);
  font-size: var(--fs-meta);
  font-weight: 700;
  line-height: 1.2;
  color: var(--c-text);
  text-decoration: none;
  cursor: pointer;
  background-color: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
}

/* ヘッダー CTA（トップ・記事詳細）: ブランド主色で塗る。
   ⚠️ カテゴリ色に追従しない。アーカイブでは白抜き（--cta-outline）に
      切り替わるため、そもそも色帯の上に塗りの CTA は出ない。 */
.c-btn--cta {
  color: var(--c-text-inverse);
  background-color: var(--c-brand-primary);
  border-radius: var(--radius-pill);
}

/* ヘッダー CTA（アーカイブ）: 直下に色帯が来るため白抜きに反転する。
   カンプ archive-cat01〜06 / archive-tool で実測。 */
.c-btn--cta-outline {
  color: var(--c-text);
  background-color: var(--c-bg);
  border-color: var(--c-border-strong);
  border-radius: var(--radius-pill);
}

/* ニュースレターの送信ボタン。
   ⚠️ カテゴリ色に追従しない。6色すべてのページで --c-brand-primary のまま（カンプ実測）。 */
.c-btn--submit {
  color: var(--c-text-inverse);
  background-color: var(--c-brand-primary);
  border-radius: var(--radius-sm);
}

/* もっと読む。全幅・淡色。 */
.c-btn--more {
  width: 100%;
  padding-block: var(--sp-5);
  color: var(--c-text-muted);
  background-color: var(--c-bg-subtle);
  border-radius: var(--radius-md);
}

.c-btn--more[disabled] {
  cursor: progress;
}

.c-btn .c-icon {
  flex-shrink: 0;
}

/* =========================================================================
   c-badge — 記事カテゴリ / ツールタグ。小面積なので slot 6 も --brand-6 のまま。
   色は呼び出し側が style 属性で --c-accent を流し込む。
   ========================================================================= */

.c-badge {
  display: inline-block;
  /* 左右パディングはカンプ実測。「SEOの基礎」(5文字) で pill 全体が 82px。
     --sp-4(16px) だと 93px になり 11px 広がる。 */
  padding: var(--sp-1) var(--sp-3);
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 1.7;
  /* 字送りは入れない。pill 内の短い文字列では 1文字ごとの加算が効きすぎ、
     カンプ実測（5文字で 82px）から 5px 広がってしまう。 */
  letter-spacing: 0;
  color: var(--c-text-inverse);
  text-decoration: none;
  white-space: nowrap;
  background-color: var(--c-accent);
  border-radius: var(--radius-pill);
}

.c-badge-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

/* =========================================================================
   c-card--article — トップ / アーカイブ / 関連記事で共用。
   ⚠️ 3カラム・4カラムの出し分けは親の .l-grid--3 / --4 が持つ。
      ここにカラム幅を書かないこと。
   ========================================================================= */

.c-card--article {
  display: flex;
  flex-direction: column;
}

.c-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

/* サムネ 16:9。未設定でも同じ高さを占め、グリッドが揃うようにする。 */
.c-card__thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background-color: var(--c-placeholder);
  border-radius: var(--radius-md);
}

.c-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.c-card__title {
  margin-top: var(--sp-4);
  font-size: var(--fs-lg);
  line-height: var(--lh-card);
}

.c-card__date {
  margin-top: var(--sp-3);
  font-size: var(--fs-meta);
  line-height: 1.4;
  color: var(--c-text-muted);
}

/* バッジ列と矢印を両端に置く行。 */
.c-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-top: var(--sp-3);
}

.c-card__arrow {
  flex-shrink: 0;
  color: var(--c-text);
}

/* =========================================================================
   p-page — 固定ページのレイアウト
   本文だけの1カラム。本文の見た目は記事と同じ（.p-entry__content）。
   ⚠️ 行長を記事と揃えるため、PC の本文幅は記事本文と同じ 700px にする。
      l-container--article（1040px）いっぱいに広げると1行が長くなりすぎ、
      同じ本文スタイルなのに読み心地が変わる。
   ========================================================================= */

.p-page {
  padding-top: var(--sp-5);
}

.p-page__main {
  min-width: 0;
}

@media (min-width: 1024px) {
  /* 記事詳細と同じ上余白。パンくず下端からの距離を揃える。 */
  .p-page {
    padding-top: calc(var(--sp-8) + var(--sp-4));
  }

  .p-page__main {
    max-width: 700px; /* カンプ single-pc.png 実測の本文カラム幅と同値 */
    margin-inline: auto;
  }
}

/* =========================================================================
   p-single — 記事詳細のレイアウト
   カンプ single-pc.png 実測: 本文700px + サイドバー300px（ガター40px）
   左固定シェアは本文の外側（ページ左端から x=40）。
   ========================================================================= */

.p-single {
  display: grid;
  gap: var(--sp-6);
  grid-template-columns: minmax(0, 1fr);
  /* SP はパンくず下端のすぐ下からアイキャッチが始まる（カンプ実測 126px）。
     ⚠️ パンくずの line-height を詰めたぶんを padding で戻す。 */
  padding-top: var(--sp-5);
}

/* 左固定レール。PC のみ。 */
.p-single__rail {
  display: none;
}

@media (min-width: 1024px) {
  /* PC は h1 のグリフ上端が 186px。line-height 1.4 のボックス上端に換算すると
     175px なので、パンくず下端からこの余白を空ける。 */
  .p-single {
    padding-top: calc(var(--sp-8) + var(--sp-4));
  }

  /* ⚠️ justify-content: space-between にすると本文が右へ流れる。
     カンプでは本文 700px が左端（x=200）、サイドバー 300px が右端（x=940）で、
     間は 40px の固定ガター。トラック幅を明示して左詰めにする。 */
  .p-single {
    gap: var(--sp-7) var(--sp-6);
    grid-template-columns: 700px minmax(0, 300px);
    justify-content: space-between;
  }

  .p-single__rail {
    position: absolute;
    left: var(--breadcrumb-pad);
    display: block;
  }
}

.p-single__main {
  min-width: 0;
}

.p-single__aside {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
  min-width: 0;
}

/* --- 記事本体 ---------------------------------------------------------- */

.p-entry__title {
  font-size: var(--fs-2xl);
}

.p-entry__meta {
  display: flex;
  gap: var(--sp-4);
  align-items: center;
  padding-bottom: var(--sp-4);
  margin-top: var(--sp-4);
  font-size: var(--fs-meta);
  color: var(--c-text-muted);
  border-bottom: 1px solid var(--c-border);
}

.p-entry__author {
  display: flex;
  gap: var(--sp-3);
  align-items: center;
  margin-top: var(--sp-4);
  font-size: var(--fs-meta);
  color: var(--c-text-muted);
}

.p-entry__avatar {
  width: 30px;
  height: 30px;
  background-color: var(--c-placeholder);
  border-radius: 50%;
}

/* ⚠️ SP はアイキャッチが h1 の上（DOM 順どおり）。PC は h1・メタ・著者の下に
   回すため order を使う。DOM を PC 都合で並べ替えると読み上げ順が崩れるため、
   DOM は SP の順のまま CSS 側で入れ替える。 */
.p-entry {
  display: flex;
  flex-direction: column;
}

.p-entry__thumb {
  order: -1;
  margin-bottom: var(--sp-4);
  /*
   * ⚠️ カンプ実測 7:4（PC 700x400 / SP 350x200 とも比率 1.750）。
   *    比率を指定しないと画像そのものの縦横比で伸び、下の h1 の位置が動く。
   *    実際にアイキャッチ未設定時のフォールバック（カテゴリイラスト
   *    1047x739）を入れた時点で SP の h1 が 341px → 383px にずれた。
   */
  aspect-ratio: 7 / 4;
  overflow: hidden;
  border-radius: var(--radius-md);
}

.p-entry__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* PC は h1・メタ・著者の下へ回す。order は「全要素に振らないと DOM 順が
   残る」ため、兄弟すべてに順序を与える。 */
@media (min-width: 1024px) {
  .p-entry__header {
    order: 1;
  }

  .p-entry__thumb {
    order: 2;
    margin-top: var(--sp-5);
    margin-bottom: 0;
  }

  /* ⚠️ 1枚要約を1つ増やしたので 3 以降を1つずつ繰り下げてある。
     order は「全兄弟に振らないと DOM 順が残る」ため、飛ばさず連番で持つ。 */
  .p-entry__summary {
    order: 3;
  }

  .p-entry .c-toc {
    order: 4;
  }

  .p-entry__content {
    order: 5;
  }
}

/* ⚠️ 比率は .p-entry__thumb 側で持つ。ここは面の色だけ。 */
.p-entry__thumb--empty {
  background-color: var(--c-placeholder);
}

/* 1枚要約。目次の直前に出る記事の要約図。
   ⚠️ アイキャッチと違って★切り抜かない。aspect-ratio も object-fit も持たせない。
      図解なので比率を固定すると文字が切れる。素材は 16:9 だが素の比率のまま出す。 */
.p-entry__summary {
  margin-top: var(--sp-6);
}

.p-entry__summary-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
}

.p-entry__content {
  margin-top: var(--sp-6);
}

.p-entry__content > * + * {
  margin-top: var(--sp-5);
}

/* 目次・ニュースレター・シェア・ページャの間隔。 */
.p-single__main > * + * {
  margin-top: var(--sp-7);
}

.p-entry .c-toc {
  margin-top: var(--sp-6);
}

/* --- 関連記事 ---------------------------------------------------------- */

.p-related {
  background-color: var(--c-bg-mute);
}

.p-related__title {
  font-size: var(--fs-lg);
  letter-spacing: 0.06em;
}

/* =========================================================================
   c-toc — 目次
   カンプ single-pc 実測: 700x360 / bg は --c-bg-subtle / 角丸 / パディング24 /
   項目48pxピッチ / 項目間に2pxの罫線。最終項目の下には罫線なし。
   ⚠️ 開閉は <details>/<summary>。既定は開いた状態（カンプの ▼ が下向き）。
   ========================================================================= */

.c-toc {
  padding: var(--sp-5);
  background-color: var(--c-bg-subtle);
  border-radius: var(--radius-md);
}

.c-toc__summary {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-meta);
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

/* 既定のマーカーを消して ▼ を自前で出す（開閉で向きが変わる）。 */
.c-toc__summary::-webkit-details-marker {
  display: none;
}

.c-toc__summary::before {
  font-size: 0.7em;
  content: "▶";
}

.c-toc[open] > .c-toc__summary::before {
  content: "▼";
}

.c-toc__item {
  border-bottom: 2px solid var(--c-border-subtle);
}

.c-toc__item:last-child {
  border-bottom: 0;
}

.c-toc__link {
  display: block;
  padding-block: var(--sp-3);
  font-size: var(--fs-meta);
  line-height: 1.6;
  color: var(--c-text);
  text-decoration: none;
}

/* h3 のインデント。カンプではダミー項目が全て同一階層・同一 x 位置(223px)で
   階層差が表現されておらず実測不能だったため、一般的な1段ぶんの値を採用した。
   記事本文には h2/h3 の階層があるため、目次も階層表示する（2026-08-07 確定）。 */
.c-toc__item--h3 .c-toc__link {
  padding-left: var(--sp-4);
}

.c-toc__link.is-current {
  font-weight: 700;
  color: var(--c-accent);
}

/* =========================================================================
   c-share — シェアボタン
   ⚠️ SNS の色は外部サービス由来。brand パレットとは別系統の --c-sns-* のみ。
   ========================================================================= */

.c-share__list {
  display: flex;
  gap: var(--sp-3);
}

.c-share__btn {
  display: grid;
  place-items: center;
  padding: 0;
  color: var(--c-text-inverse);
  cursor: pointer;
  background-color: var(--c-sns-copy);
  border: 0;
  border-radius: 50%;
}

.c-share__btn--facebook { background-color: var(--c-sns-facebook); }
.c-share__btn--x        { background-color: var(--c-sns-x); }
.c-share__btn--linkedin { background-color: var(--c-sns-linkedin); }
.c-share__btn--line     { background-color: var(--c-sns-line); }
.c-share__btn--copy     { background-color: var(--c-sns-copy); }

.c-share__btn.is-copied {
  outline: 2px solid var(--c-focus);
  outline-offset: 2px;
}

/* 記事下（Ø46・中央寄せ）。 */
.c-share--inline .c-share__title {
  margin-bottom: var(--sp-4);
  font-size: var(--fs-meta);
  font-weight: 700;
  text-align: center;
  letter-spacing: 0.08em;
}

.c-share--inline .c-share__list {
  /* カンプ実測: 円 Ø46 がピッチ 64 → 間隔 18px。 */
  gap: var(--sp-4);
  justify-content: center;
}

.c-share--inline .c-share__btn {
  width: 46px;
  height: 46px;
}

/* 左固定フロート（Ø32）。SP では出さない。 */
.c-share--float {
  display: none;
}

.c-share--float .c-share__list {
  flex-direction: column;
  gap: var(--sp-2);
}

.c-share--float .c-share__btn {
  width: 32px;
  height: 32px;
}

@media (min-width: 1024px) {
  .c-share--float {
    position: sticky;
    top: var(--sp-6);
    display: block;
  }
}

/* =========================================================================
   c-pager — < PREV / INDEX / NEXT >
   ⚠️ 端の記事でも非表示にせず disabled 状態で残す（INDEX の位置がずれないため）。
   ========================================================================= */

.c-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-top: var(--sp-5);
  /* カンプ実測 2px。当初 1px としていたのは推測値だった。 */
  border-top: 2px solid var(--c-border-subtle);
}

.c-pager__link {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--c-text);
  text-decoration: none;
  letter-spacing: 0.04em;
}

.c-pager__link.is-disabled {
  color: var(--c-text-muted);
  pointer-events: none;
}

/* =========================================================================
   c-load-more
   ========================================================================= */

.c-load-more {
  margin-top: var(--sp-6);
}

/* =========================================================================
   c-card--tool — ツールカード
   ⚠️ タグは複数付き、バッジごとに色が変わる（バッジ単位で --c-accent を流す）。
   ========================================================================= */

.c-card--tool {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

/* サムネはツールのみ 250:135（記事カードの 16:9 とは別。カンプ実測）。 */
.c-card__thumb--tool {
  aspect-ratio: 50 / 27;
}

.c-card__ext {
  position: absolute;
  top: var(--sp-3);
  right: var(--sp-3);
  color: var(--c-text);
}

.c-card--tool .c-card__title {
  margin-top: 0;
  font-size: var(--fs-base);
}

/* =========================================================================
   c-tag-card — ツールタグの紹介カード
   カンプ archive-tool-pc.png 実測: 170x200 / ガター16 / 6カラム
   ⚠️ 並び順は color_slot ではなく display_order（ワークフロー順）。
      並べ替えは PHP 側（seorobo_display_terms）の責務でここでは持たない。
   ========================================================================= */

.p-tag-cards {
  background-color: var(--c-bg-subtle);
}

.p-tag-cards__grid {
  display: grid;
  /* SP はカンプ実測 2カラム・ガター10px。 */
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 768px) {
  .p-tag-cards__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .p-tag-cards__grid {
    gap: var(--gap-grid-tight-row);
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

.c-tag-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 200px;
  padding: var(--sp-4) var(--sp-3);
  color: var(--c-text-inverse);
  text-align: center;
  text-decoration: none;
  background-color: var(--c-accent-deep);
  border-radius: var(--radius-md);
}

.c-tag-card__name {
  font-size: var(--fs-xl);
  font-weight: 700;
  line-height: var(--lh-tight);
}

.c-tag-card__subtitle {
  margin-top: var(--sp-1);
  font-size: var(--fs-xs);
  font-weight: 700;
}

.c-tag-card__desc {
  margin-top: var(--sp-3);
  font-size: var(--fs-xs);
  line-height: 1.7;
  text-align: left;
}

/* =========================================================================
   c-rank — 人気記事ランキング
   ⚠️ トップとサイドバーで幅が違うだけ。同一コンポーネントを使い回す。
   ⚠️ 順位の色は --c-rank-* のみ。brand パレットを参照しない。
   ========================================================================= */

.c-rank__title {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding-bottom: var(--sp-3);
  font-size: var(--fs-lg);
  border-bottom: 1px solid var(--c-border);
}

.c-rank__icon {
  color: var(--c-rank-2);
}

.c-rank__item {
  display: flex;
  gap: var(--sp-4);
  padding-block: var(--sp-4);
  border-bottom: 1px solid var(--c-border);
}

.c-rank__mark {
  flex-shrink: 0;
  width: 24px;
  font-size: var(--fs-meta);
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
}

/* 1位: 数字入りメダル。二重リングは inset の box-shadow で描く（画像不要）。
   mark 自体にも色を持たせ、順位3段階の色分岐を機械検証できるようにしている。 */
.c-rank__mark--medal {
  color: var(--c-rank-1);
}

.c-rank__mark--medal .c-rank__num {
  position: relative;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  font-size: var(--fs-xs);
  color: var(--c-text-inverse);
  background-color: var(--c-rank-1);
  border-radius: 50%;
  box-shadow:
    inset 0 0 0 2px var(--c-rank-1),
    inset 0 0 0 4px var(--c-bg);
}

/* リボン。 */
.c-rank__mark--medal .c-rank__num::after {
  position: absolute;
  top: 100%;
  width: 12px;
  height: 6px;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 70%, 0 100%);
  content: "";
  background-color: var(--c-rank-1);
}

/* 2-3位: 数字＋下線。 */
.c-rank__mark--high {
  color: var(--c-rank-2);
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

/* 4位以降: グレーの数字のみ。 */
.c-rank__mark--rest {
  color: var(--c-rank-rest);
}

.c-rank__link {
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--c-text);
  text-decoration: none;
}

/* =========================================================================
   c-newsletter
   ========================================================================= */

.c-newsletter {
  border: 1px solid var(--c-border);
}

.c-newsletter__title {
  font-size: var(--fs-lg);
  font-weight: 400;
}

/* サイト名だけ太字。カンプ「**ECのSEO**に登録しませんか？」実測。 */
.c-newsletter__title strong {
  font-weight: 700;
}

.c-newsletter__lead {
  margin-top: var(--sp-2);
  font-size: var(--fs-meta);
  line-height: 1.5;
}

/*
 * ⚠️★SP は縦積み（入力欄が全幅、ボタンが右下）。PC のみ横並び。
 *
 *   申し送りでは「SP がどちらかカンプで確認できなかった（archive-sp に
 *   ニュースレターが無い）」として横並びのまま保留になっていたが、
 *   ★archive-sp.png の y=2204..2503 に存在する（front-page-sp / menu-sp も同じ形）。
 *   3枚とも入力欄が全幅・ボタンが下段右寄せで一致するため、縦積みで確定する。
 * ⚠️ 横並びのままだと 390px 幅で入力欄 144px・ボタン 128px まで縮み、
 *    メールアドレスがほとんど見えない。
 */
.c-newsletter__form {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--sp-3);
  margin-top: var(--sp-3);
}

@media (min-width: 1024px) {
  /* カンプ実測 front-page-pc: PC は入力欄とボタンが横並び。 */
  .c-newsletter--center .c-newsletter__form {
    flex-direction: row;
    align-items: stretch;
  }
}

.c-newsletter__input {
  min-width: 0;
  padding: var(--sp-2) var(--sp-4);
  background-color: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
}

.c-newsletter__terms {
  margin-top: var(--sp-1);
  font-size: var(--fs-xs);
  line-height: 1.4;
  text-align: right;
}

.c-newsletter__terms a,
.c-newsletter__terms span {
  color: var(--c-text);
}

/* 飛び先が決まるまでは span。下線だけ残して見た目を保つ。 */
.c-newsletter__terms span {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* 中央寄せ版（記事下・トップ）。実測 700x190、入力欄とボタンが横並び。 */
.c-newsletter--center {
  max-width: 700px;
  margin-inline: auto;
  padding: var(--sp-4) var(--sp-6);
}

/* SP は縦積みなので入力欄が全幅。PC で横並びに戻したときに伸びるようにする。 */
.c-newsletter--center .c-newsletter__input {
  width: 100%;
}

@media (min-width: 1024px) {
  .c-newsletter--center .c-newsletter__input {
    width: auto;
    flex: 1 1 auto;
  }
}

/* サイドバー版。縦積みでボタンは右寄せ。 */
.c-newsletter--aside {
  padding: var(--sp-5);
}

.c-newsletter--aside .c-newsletter__form {
  flex-direction: column;
  align-items: flex-end;
}

.c-newsletter--aside .c-newsletter__input {
  width: 100%;
}

/* =========================================================================
   c-notice-bar — ヘッダー直下のお知らせ帯
   ⚠️ brand とは別系統。--c-notice-* のみを参照する。
   ========================================================================= */

/* ⚠️ カンプ実測では SP のみに存在する（PC カンプ5枚には無い）。 */
.c-notice-bar {
  background-color: var(--c-notice-bg);
}

@media (min-width: 1024px) {
  .c-notice-bar {
    display: none;
  }
}

/* ヒーローに重なる画面では白背景・黒文字に反転し、色帯の中の白い帯になる。 */
.c-notice-bar--on-hero {
  position: absolute;
  inset: var(--header-h) 0 auto;
  z-index: 5;
  color: var(--c-text);
  background-color: var(--c-bg);
}

.c-notice-bar--on-hero .c-notice-bar__inner {
  color: var(--c-text);
}

.c-notice-bar__inner {
  display: flex;
  padding-block: 0;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  /* カンプ実測: 帯の高さ 20px。 */
  min-height: 20px;
  font-size: var(--fs-xs);
  line-height: 1.6;
  font-weight: 700;
  color: var(--c-notice-text);
  text-decoration: none;
}

/* ⚠️ カンプは1行（帯 20px）。SP 幅では文言が折り返して2行になり帯が倍になるため、
   1行に固定して溢れは省略する。横スクロールを出さないためでもある。 */
.c-notice-bar__text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.c-notice-bar__arrow {
  flex-shrink: 0;
}

/* =========================================================================
   c-cat-list — 「カテゴリで探す」リンクリスト（サイドバー）
   ========================================================================= */

.c-cat-list__title {
  margin-bottom: var(--sp-4);
  font-size: var(--fs-lg);
}

.c-cat-list__list {
  border: 1px solid var(--c-border);
}

.c-cat-list__item + .c-cat-list__item {
  border-top: 1px solid var(--c-border);
}

.c-cat-list__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-meta);
  font-weight: 700;
  color: var(--c-text);
  text-decoration: none;
}

.c-cat-list__item--all .c-cat-list__link {
  color: var(--c-text-inverse);
  background-color: var(--c-accent);
}

/* =========================================================================
   p-banner — 内部バナー枠。未設定なら PHP 側で出力ごと止める。
   300×250（IAB Medium Rectangle）。サイドバー幅が300pxなので左右余白ゼロ。
   ⚠️ 枠（p-banner）と中身（p-banner__inner）を分けてある。将来 GAM 等の
      外部広告に差し替えるとき、枠はそのままで中身だけ入れ替えられるように。
   ========================================================================= */

.p-banner {
  display: block;
  aspect-ratio: 6 / 5;
  overflow: hidden;
}

.p-banner__inner {
  display: block;
  width: 100%;
  height: 100%;
}

.p-banner__inner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* =========================================================================
   c-cat-card — カテゴリカード
   背景は var(--c-accent-deep)。slot 6 のときだけ --brand-6-deep に切り替わる。
   ⚠️ イラスト列は card_illust 未設定でも幅を保持する。空にするだけで、
      テキストの位置が動かない（「未設定時も崩れないこと」の担保）。
   ========================================================================= */

.c-cat-card {
  position: relative;
  display: grid;
  align-items: center;
  overflow: hidden;
  color: var(--c-text-inverse);
  text-decoration: none;
  background-color: var(--c-accent-deep);
  border-radius: var(--radius-md);
}

.c-cat-card__illust {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 100%;
  min-width: 0;
}

.c-cat-card__illust img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom center;
}

.c-cat-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  min-width: 0;
}

.c-cat-card__name {
  font-weight: 700;
  line-height: var(--lh-tight);
}

.c-cat-card__lead {
  line-height: 1.5;
}

.c-cat-card__arrow {
  position: absolute;
  right: var(--sp-5);
  bottom: var(--sp-4);
}

/* 大（トップ・アーカイブ下部）。イラスト列の比率は PC/SP とも実測 46%。
   ⚠️ パディングはカード側ではなく本文側に置く。カード側に置くと 46% が
      「パディングを引いた残り」に対する比率になり、本文の左位置が
      カンプ（カード左端から 248px）より 10px 手前にずれる。 */
.c-cat-card--lg {
  grid-template-columns: 46% minmax(0, 1fr);
  min-height: 180px;
}

.c-cat-card--lg .c-cat-card__body {
  padding: var(--sp-5) var(--sp-5) var(--sp-5) 0;
}

.c-cat-card--lg .c-cat-card__name {
  font-size: var(--fs-xl);
}

.c-cat-card--lg .c-cat-card__lead {
  font-size: var(--fs-sm);
}

/* 小（記事詳細サイドバー）。 */
.c-cat-card--sm {
  grid-template-columns: 40% minmax(0, 1fr);
  min-height: 154px;
}

.c-cat-card--sm .c-cat-card__body {
  padding: var(--sp-4) var(--sp-4) var(--sp-4) 0;
}

.c-cat-card--sm .c-cat-card__name {
  font-size: var(--fs-base);
}

.c-cat-card--sm .c-cat-card__lead {
  font-size: var(--fs-xs);
}

.c-cat-card--sm .c-cat-card__arrow {
  right: var(--sp-4);
  bottom: var(--sp-3);
}

/* =========================================================================
   p-breadcrumb
   ⚠️ カンプ実測ではコンテナ(1100px)ではなく、ページ左端から 42px の位置に出る。
      l-container の中に入れないこと。
   ========================================================================= */

.p-breadcrumb {
  /* SP はお知らせバーの下 8px から。PC はヘッダー直下すぐ（lg 以下で上書き）。 */
  padding-block: var(--sp-2) 0;
  padding-inline: var(--breadcrumb-pad);
  font-size: var(--fs-xs);
  font-weight: 700;
  /* ⚠️ 本文用の --lh-base(1.8) を継承すると 12px × 1.8 = 21.6px となり、
     グリフの上下に 5px ずつの余剰が乗る。カンプは罫線下端からグリフ上端まで
     9px しかないため、ここは行高を詰める（カンプ実測の行送り 14px 相当）。 */
  line-height: 1.2;
}

/* ヒーロー内のパンくずは縦余白を持たない。位置は p-hero__inner の
   padding-top が決める（積み上げの起点を1箇所にまとめるため）。 */
.p-hero .p-breadcrumb {
  padding-block: 0;
}

/* PC はお知らせバーが無いぶん、ヘッダー直下すぐから始まる（カンプ実測 70px）。 */
@media (min-width: 1024px) {
  .p-breadcrumb {
    padding-block: 0;
  }
}

.p-breadcrumb__list {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

/* ⚠️ SP では記事タイトルが長く1行に収まらない。折り返すとヒーロー内の
   積み上げが崩れ、はみ出させると横スクロールが出るため、末尾を省略する。 */
.p-breadcrumb__item {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.p-breadcrumb__item:last-child {
  min-width: 0;
}

@media (min-width: 1024px) {
  .p-breadcrumb__list {
    flex-wrap: wrap;
  }

  .p-breadcrumb__item {
    overflow: visible;
    white-space: normal;
  }
}

/* ヒーロー内のパンくずは SP でも左寄せのまま（カンプ実測 x20）。 */
.p-hero .p-breadcrumb__list {
  justify-content: flex-start;
}

.p-breadcrumb__item + .p-breadcrumb__item::before {
  margin-right: var(--sp-2);
  content: ">";
}

.p-breadcrumb a {
  color: inherit;
}

.p-breadcrumb span {
  text-decoration: none;
}

/* =========================================================================
   p-hero — アーカイブのヒーロー帯
   ⚠️ カンプ実測では色帯が y=0 から始まり、ヘッダーの背後まで伸びている。
      ヘッダーは白帯ではなくヒーローの上に透過で乗る（p-header--over-hero）。
   ========================================================================= */

.p-hero {
  position: relative;
  /* ★イラストの下端を帯で切る（カンプどおり）。高さで縮めて収めない。 */
  overflow: hidden;
  color: var(--c-text-inverse);
  background-color: var(--c-accent-deep);
}

.p-hero--dark {
  background-color: var(--c-hero-dark);
}

.p-hero__inner {
  position: relative;
  z-index: 1;
  padding-bottom: var(--sp-7);
  /* ⚠️ SP は中央寄せ。PC は左寄せ（lg 以上で戻す）。カンプ実測。
     縦位置は「上端の余白 → パンくず → 余白 → h1 → 余白 → リード」の
     積み上げで組む。上端からの絶対位置を SP/PC 別に持つとトークンが
     増えすぎるため、変えるのは padding-top と h1 の margin-top だけにする。 */
  text-align: center;
  min-height: 360px;
  /* SP はヘッダー(60) + お知らせバー(20) + 余白8 = 88 からパンくずが始まる。
     お知らせバーは absolute でヒーローに重なるため、その 20px も自前で確保する。
     ⚠️ パンくずの line-height を 1.2 に詰めた（PC のカンプ実測に合わせた）ぶん、
        グリフ位置が上がるので padding で戻す。 */
  padding-top: calc(var(--header-h) + var(--sp-5) + var(--sp-2));
}

.p-hero__title {
  /* パンくず下端からの余白。SP はカンプ実測 23px ≒ --sp-5。 */
  margin-top: var(--sp-5);
  /* SP のヒーロー見出しはカンプ実測 32px（PC は 60px）。 */
  font-size: var(--fs-hero-sp);
  line-height: var(--lh-tight);
}

.p-hero__lead {
  /* h1 下端からの余白。SP 0px / PC 4px でほぼ同じため共通値にする。 */
  margin-top: var(--sp-1);
  font-size: var(--fs-meta);
  font-weight: 700;
}

/*
 * SP のイラスト。
 *
 * ⚠️★これまで SP では display: none で【描画していなかった】が、SP カンプ
 *    （ref-archive-sp-1〜6）には6枚とも入っている。寸法検証も個数検証も
 *    SP のイラストを見ていなかったため、無いことに誰も気付いていなかった。
 *
 * カンプ実測（scripts/illust-measure.py --sp --fit）:
 *   ・位置は【中央そろえ】。カテゴリごとの左右のばらつきは 0〜0.5px で一律。
 *     → SP 用に term_meta を増やす必要は無い。
 *   ・上端は 198〜220px（cat06 のみ 220、他5枚は 198〜204）。中央値 204 を採る。
 *     cat06 だけ 16px 上に出るが、そこだけ合わせるには SP 用の term_meta が要る。
 *   ・倍率は 0.27〜0.34 でばらつく。PC の 0.50 に対して概ね 62%。
 *     ★規則性が読めないため、PC 幅の 62% の一律とする（誤差 -9%〜+15%）。
 *     絵ごとに合わせるには SP 用の term_meta が要るため、必要なら判断を仰ぐ。
 * ⚠️ 下端は帯でクリップされる（.p-hero の overflow: hidden）。カンプもそうなっている。
 */
.p-hero__illust {
  position: absolute;
  top: var(--illust-top-sp, 204px);
  left: 50%;
  display: block;
  width: calc(var(--illust-w, 0px) * 0.62);
  transform: translateX(-50%);
}

.p-hero__illust img,
.p-hero__illust picture {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
}

/*
 * ツール一覧のヒーローは別系統（帯いっぱいに敷く1枚絵のバナー）。
 *
 * ⚠️★SP では display: none のままで【描画していなかった】。
 *    archive-tool-sp.png には帯いっぱいにイラストが描かれており、
 *    SP 用のクロップ（illust-hero-tools-sp.webp / 965x472）も用意済みだった。
 *    ＝素材はあるのに出していなかった。カテゴリのイラストと同じ種類の欠落。
 * ⚠️ カテゴリの 50% ルールは当てない。全幅で帯の下端に合わせる。
 */
.p-hero--dark .p-hero__illust {
  top: auto;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  transform: none;
}

@media (min-width: 1024px) {
  /* ⚠️ 帯の高さ 362px にはヘッダー(70px)ぶんが含まれる。ヘッダーは
     p-header--over-hero として帯の上に透過で乗るため、その領域を
     padding-top で確保しておく（カンプ archive-cat01 実測）。 */
  .p-hero__inner {
    min-height: 362px;
    /* PC: ヘッダー(70) + 罫線(2) + 空き(9) = 81px からパンくずのグリフが始まる。
       line-height 1.2 の半レディング分（1.2px）を差し引いて padding にする。 */
    padding-top: calc(var(--header-h) + 2px + 8px);
    padding-bottom: var(--sp-7);
    /* ⚠️ SP は中央寄せ、PC は左寄せ（カンプ実測）。base 側で center にしているので
       ここで戻す。過去に指定が失われて PC でも中央寄せになっていた。 */
    text-align: left;
  }

  .p-hero__title {
    /* カンプのグリフ上端 164px を、line-height 1.35 のボックス上端 151px に換算した値。 */
    margin-top: calc(var(--sp-7) + var(--sp-3));
    font-size: var(--fs-3xl);
  }

  /*
   * ★素材は 2x 書き出しで、カンプは 1x（50%）で置いているだけ。
   *   幅は hero.php が素材の natural width の 50% を inline style で入れる。
   *
   * ⚠️★高さで縛らないこと。以前は「高さ 288px に合わせて object-fit: contain」で
   *    決めていたため、6枚とも本来より縮み、幅が 560px 前後で頭打ちになっていた。
   *    寸法検証は「幅が一律」を異常と見ていなかったため検出できなかった。
   * ⚠️ 下端は帯（.p-hero の overflow: hidden）でクリップされる。これが正しい状態で、
   *    絵の下側が切れて見えるのはカンプどおり。
   * ⚠️ 位置は per-category。値は term_meta（illust_offset_right / illust_offset_top）。
   *    フォールバックは6枚の平均（inc/taxonomies.php の seorobo_illust_offset_default）。
   */
  .p-hero__illust {
    position: absolute;
    right: var(--illust-right, 217px);
    top: var(--illust-top, 98px);
    bottom: auto;
    /* ⚠️ SP の中央そろえ（left + translateX）をここで戻す。戻さないと二重に効く。 */
    left: auto;
    display: block;
    /* --illust-w は hero.php が入れる「素材の natural width の 50%」。 */
    width: var(--illust-w, auto);
    height: auto;
    transform: none;
  }

  .p-hero__illust img,
  .p-hero__illust picture {
    display: block;
    width: 100%;
    height: auto;
    max-width: none;
  }

  /*
   * ⚠️ ツール一覧のヒーローは別系統。カテゴリの2x素材と違い、帯いっぱいに敷く
   *    1枚絵のバナー（PC/SP で別クロップ）なので 50% ルールを当てない。
   *    ★ここを分けないと natural size（2114px）でそのまま出て帯を突き破る（実際に踏んだ）。
   *    値は従来のまま（HEY レビュー済みの状態）。
   */
  .p-hero--dark .p-hero__illust {
    right: 230px;
    top: auto;
    bottom: 0;
    /* ⚠️ base 側で SP 用に display: none にしているのでここで戻す。 */
    display: block;
    width: auto;
    height: 288px;
  }

  .p-hero--dark .p-hero__illust img,
  .p-hero--dark .p-hero__illust picture {
    width: auto;
    height: 100%;
    object-fit: contain;
    object-position: bottom right;
  }
}

/* =========================================================================
   サイト骨格（ヘッダー / フッター）— 詳細はグループC以降で詰める
   ========================================================================= */

/* ⚠️ SP は直下にお知らせバーが来るため罫線を出さない（カンプ実測）。
   PC のみ 2px の罫線を入れる。色は --c-header-rule 1指定で、
   白背景でもヒーローの色帯の上でも実測どおりの色になる。 */
.p-header {
  background-color: var(--c-bg);
}

@media (min-width: 1024px) {
  .p-header {
    border-bottom: 2px solid var(--c-header-rule);
  }
}

/* ⚠️ gap はロゴ〜タグラインの間隔（カンプ実測 39px）。--sp-* の刻みに無い値なので
   直接書く。トークンにするほど他で使い回さない（ヘッダー1箇所のみ）。
   ⚠️ SP はタグラインが sr-only になるため margin-right: auto が効かず、
      ハンバーガーが中央寄りに残る。space-between で右端へ寄せる。
      PC はタグラインの margin-right: auto が間隔を吸収する。 */
.p-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* カンプ実測 front-page-pc: ナビ右端 1209 → CTA 左端 1240 の 31px。 */
  gap: 31px;
  min-height: var(--header-h);
}

/* タグラインとナビの間を空け、CTA を右端に寄せる。 */
.p-header__tagline {
  margin-right: auto;
}

/*
 * ⚠️★ヘッダー CTA はカンプ実測 160x40。
 *
 *   c-btn の既定（文字14px・上下padding12px・min-height 44px）のままだと
 *   205x44 になり、右端は合っていても【左へ45px はみ出してナビを押し出す】。
 *   ナビの左端が 118px ずれていた原因の一部がこれ。
 *
 *   カンプ実測 front-page-pc: ボタン x=1240..1399 / y=16..55（160x40）
 *     左padding 16px → 文字「ニュースレター登録」106px → 空き16px → 矢印10px → 右padding 13px
 * ⚠️ min-height の 44px（タップ最小）を PC のここだけ 40px に下げる。
 *    CTA は SP では非表示なので、タップターゲット検証（375/390）には影響しない。
 */
.p-header__cta {
  flex-shrink: 0;
  min-height: 40px;
  padding-block: 0;
  /* カンプ実測: 左 16px / 右 13px（矢印の右が少し詰まる）。 */
  padding-inline: var(--sp-4) 13px;
  font-size: var(--fs-xs);
  letter-spacing: 0;
  /*
   * カンプ実測の文字→矢印は 16px だが 12px にしてある。
   * ⚠️ 実装のフォントは「ニュースレター登録」を 109px で描き、カンプ（106px）より
   *    3px 広い。フォントファミリは XD 確認待ちで変えられないため、
   *    ★ボタン全体の幅 160px（＝ナビの位置を決める値）を優先し、差はここで吸収する。
   */
  gap: var(--sp-3);
}

.p-header__title {
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--c-text);
  text-decoration: none;
}

/* --- ロゴ ---------------------------------------------------------------
   白黒は PHP（over_hero）が決め、PC / SP は CSS で切り替える。
   ⚠️ SP 版はタグラインが焼き込まれた別デザインなので、
      PC 版を縮小して使い回さない。
   ------------------------------------------------------------------- */

.p-header__logo {
  display: block;
  flex-shrink: 0;
}

.p-header__logo-img {
  height: auto;
}

.p-header__logo-img--pc {
  display: none;
  width: 121px;
}

.p-header__logo-img--sp {
  display: block;
  width: 174px;
}

@media (min-width: 1024px) {
  .p-header__logo-img--pc {
    display: block;
  }

  .p-header__logo-img--sp {
    display: none;
  }
}

/* ⚠️ SP では視覚的にだけ隠す（SP ロゴに焼き込まれているため二重になる）。
   display: none にすると読み上げからも消えるので使わない。 */
.p-header__tagline {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

@media (min-width: 1024px) {
  /* ⚠️ カンプは2行。1行目「…をまとめた」/ 2行目「超実務寄りのEC SEO専門メディア」で
     折り返る。<br> は入っておらず自然折り返しなので、font-size と max-width の
     両方が合わないと2行にならない（片方だけだと3行か1行になる）。
     Playwright で実際の折り返し位置を総当たりし、fs10px × max-width 330px で
     カンプと同じ位置に折り返ることを確認して確定した。
     行送りはカンプ実測 14px。 */
  .p-header__tagline {
    position: static;
    width: auto;
    height: auto;
    max-width: 330px;
    margin: 0;
    /*
     * カンプ実測: ロゴ右端 161 → タグライン左端 200 の 39px。
     * ⚠️ 列ギャップ（31px）はナビ→CTA の実測に合わせてあるので、差の 8px をここで足す。
     *    ギャップを 39px に戻すとナビ全体が 8px 左へずれる。
     * ⚠️ この直前に margin: 0 があるので、順番を入れ替えないこと。
     */
    margin-left: 8px;
    margin-right: auto;
    overflow: visible;
    font-size: var(--fs-tagline);
    font-weight: 700;
    line-height: 14px;
    clip-path: none;
    white-space: normal;
  }
}

/* ⚠️ SP ではナビはドロワー内に入る。ヘッダーのナビは隠す。 */
.p-nav {
  display: none;
}

@media (min-width: 1024px) {
  .p-nav {
    display: block;
  }
}

/*
 * ⚠️★文字サイズは 12px、字送りは 0。
 *
 *   14px / 0.02em にしていたため、5項目の合計が 53px 広がり、
 *   右寄せのぶん【ナビ全体の左端が 118px 左へずれていた】。
 *   区切りの間隔（25px）は合っていたので、ズレは文字幅の積み上がりだった。
 *
 *   カンプ実測（front-page-pc / archive-cat01-pc の2枚で完全一致）:
 *     記事 24px / おすすめ 46 / 便利ツール 60 / プロのブックマーク 106 / お役立ち資料 71
 *   → 1文字あたり約 12px、字送りの加算なし。
 * ⚠️ バッジと同じ理由（SEOROBO.md「フォントと行間」）で、短い文字列に
 *    字送りを効かせない。1文字ごとの加算が積み上がって幅が狂う。
 */
.p-nav__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-5);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0;
}

/*
 * ★項目の区切り「|」。
 *
 * ⚠️ これまで実装されていなかった。擬似要素で描くものは個数検証（count-check）の
 *    対象外で、寸法にも出ないため、4層の検証すべてをすり抜けていた。
 *    カンプ実測 front-page-pc: x=841 / 912 / 995 / 1126 に 1px 幅・高さ 13px、
 *    色 #727272（--c-nav-sep）。5項目の間に4本。
 * ⚠️ gap の中央に置く。項目そのものの padding を増やすと左右の位置が動く。
 */
.p-nav__list > li + li::before {
  content: "";
  position: absolute;
  left: calc(var(--sp-5) / -2);
  width: 1px;
  height: 13px;
  background-color: var(--c-nav-sep);
}

.p-nav__list > li {
  position: relative;
  display: flex;
  align-items: center;
}

.p-nav__list a {
  color: var(--c-text);
  text-decoration: none;
}

.p-nav__list a:hover {
  color: var(--c-accent);
}

/* ヒーローに重なるヘッダー。ロゴ・ナビが白へ、CTA が白抜きへ反転する。
   絶対配置でヒーローの上に乗せる。ヒーロー側は p-hero__inner の padding-top で
   ヘッダーぶんの領域を確保している。 */
.p-header--over-hero {
  position: absolute;
  inset: 0 0 auto;
  z-index: 5;
  color: var(--c-text-inverse);
  background-color: transparent;
}

.p-header--over-hero .p-header__title,
.p-header--over-hero .p-header__tagline,
.p-header--over-hero .p-nav__list a {
  color: var(--c-text-inverse);
}

/* 区切り線も反転する。カンプ実測: 帯の上では白 55%（6色すべて同じ見え方）。 */
.p-header--over-hero .p-nav__list > li + li::before {
  background-color: var(--c-nav-sep-on-hero);
}


/* ⚠️ フッター帯はカテゴリ色に追従しない。カンプ8画面すべてで --c-footer-bg 固定
   （cat01 紫のページでもフッターは紫にならない）。
   ⚠️ カンプ実測ではフッターは「中身が空の色帯」（テキストのピクセル0）。
      リンクもコピーライトも描かれていないため、メニューは登録しない。
      高さは PC 264px / SP 400px（2026-08-09 HEY 判断）。
      メニューを登録すれば has_nav_menu('footer') で自動的に出る。 */
/* ★カンプ未描画。TARO判断（2026-09-02）
   6カンプすべてでフッターの中身は 0px（色帯のみ）だった。
   帯の高さ（PC 264px / SP 400px）はカンプ実測値なので変えない。
   中身は中央寄せで帯の上下中央に置く。 */

.p-footer__band {
  display: flex;
  min-height: 400px; /* カンプ実測（SP） */
  padding-block: var(--sp-7);
  color: var(--c-text-inverse);
  background-color: var(--c-footer-bg);
  align-items: center; /* 帯の中で上下中央 */
}

@media (min-width: 1024px) {
  .p-footer__band {
    min-height: 264px; /* カンプ実測（PC） */
  }
}

.p-footer__inner {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3); /* 項目間 12px。★TARO判断 */
  text-align: center;
}

.p-footer__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-5);
  justify-content: center;
}

.p-footer__band a {
  color: var(--c-text-inverse);
}

.p-footer__band a:hover {
  text-decoration: underline;
}

.p-footer__brand {
  font-size: var(--fs-base); /* 16px。★TARO判断 */
  font-weight: 700;
}

.p-footer__operator,
.p-footer__links {
  font-size: var(--fs-sm); /* 13px。★TARO判断 */
}

/* ⚠️ タップ領域を 44x44 以上にする（sp-check）。文字の行box は 16px しかないため
   上下に 14px の padding を足して 44px にする。
   ★見た目の項目間は 12px のままにしたいので、足したぶんを負のマージンで打ち消す。
   padding だけ足すと行間が 26px に開いてしまう。 */
.p-footer__links {
  margin-block: -14px;
}

.p-footer__links a {
  display: inline-block;
  padding-block: 14px;
}

.p-footer__copyright {
  /* 12px・白の70%。★TARO判断 */
  font-size: var(--fs-xs);
  opacity: 0.7;
}

/* =========================================================================
   汎用
   ========================================================================= */

.u-no-results {
  padding-block: var(--sp-7);
  color: var(--c-text-muted);
  text-align: center;
}

/* =========================================================================
   p-front-top — トップ最上部（スライダー + ランキング）
   カンプ front-page-pc.png 実測: 左 700px / 右 300px
   ========================================================================= */

.p-front-top {
  display: grid;
  gap: var(--sp-6);
  grid-template-columns: minmax(0, 1fr);
  /* SP はお知らせバー(20px)の下すぐ。カンプ実測 100px。 */
  padding-top: var(--sp-4);
}

@media (min-width: 1024px) {
  .p-front-top {
    grid-template-columns: 700px minmax(0, 300px);
    justify-content: space-between;
    /* PC はカンプ実測でスライダー画像の上端が 180px。 */
    padding-top: calc(var(--sp-8) + var(--sp-7));
  }

  /* スライドが0件のときはランキングだけを右寄せにせず、全幅で出す。 */
  .p-front-top--no-slider {
    grid-template-columns: minmax(0, 1fr);
  }
}

.p-front-top__main,
.p-front-top__aside {
  min-width: 0;
}

/* =========================================================================
   p-hero-slider
   ⚠️ ページネーションは Swiper の renderBullet で 1〜5 の数字を出す。
      現在のスライドだけ白丸（Ø30）に濃字、他は白数字。カンプ実測。
   ========================================================================= */

.p-hero-slider {
  /* Swiper の初期化前でも高さが崩れないようにしておく。 */
  position: relative;
}

.p-hero-slider__link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.p-hero-slider__figure {
  position: relative;
  aspect-ratio: 7 / 4;
  overflow: hidden;
  background-color: var(--c-placeholder);
  border-radius: var(--radius-md);
}

.p-hero-slider__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.p-hero-slider__title {
  margin-top: var(--sp-5);
  font-size: var(--fs-2xl);
}

.p-hero-slider__author {
  display: flex;
  gap: var(--sp-3);
  align-items: center;
  margin-top: var(--sp-4);
  font-size: var(--fs-meta);
  color: var(--c-text-muted);
}

.p-hero-slider__avatar {
  width: 30px;
  height: 30px;
  background-color: var(--c-placeholder);
  border-radius: 50%;
}

/* --- ページネーション ---------------------------------------------------- */

/* ⚠️ カンプ実測ではページネーションが画像の右下に重なる。スライダー全体ではなく
   「画像の枠」を基準にする必要があるため、figure を基準にした絶対配置にする。
   スライダー直下に置くと、見出し・著者名を含めた高さの下端に落ちてしまう。 */
/* ⚠️ 位置は Swiper が用意している CSS 変数で指定する。
   .swiper-pagination の bottom は Swiper 側のセレクタと同詳細度になり、
   Swiper の CSS が後に読まれる（enqueue 優先度 20）ため素直には勝てない。
   詳細度を競ったり !important を使うのではなく、ライブラリの拡張ポイントに乗る。 */
.p-hero-slider {
  /* 画像（7:4）の下端から 22px 内側。カンプ実測。
     SP は画像幅が可変なので、ビューポート幅から算出する。 */
  --swiper-pagination-top: calc((100vw - var(--container-pad) * 2) * 4 / 7 - 30px - 22px);
  --swiper-pagination-bottom: auto;
}

/* PC は画像幅が 700px で固定される。 */
@media (min-width: 1024px) {
  .p-hero-slider {
    --swiper-pagination-top: calc(700px * 4 / 7 - 30px - 22px);
  }
}

/* 横位置は Swiper が left:0 / width:100% を直に当てるため、right で寄せようとすると
   詳細度争いになる（しかも付与されるクラス名は swiper-pagination-horizontal で、
   Swiper の更新で変わりうる）。幅いっぱいのまま中身を右寄せする方が壊れにくい。
   ⚠️ !important も詳細度の上書きも使わない。 */
.p-hero-slider__pagination {
  position: absolute;
  display: flex;
  gap: var(--sp-2);
  align-items: center;
  justify-content: flex-end;
  /* カンプ実測: 画像右端から 33px 内側。 */
  padding-right: calc(var(--sp-6) + 1px);
  z-index: 2;
}

/* 現在以外のバレットは白数字（背景なし）。カンプ実測。 */
.p-hero-slider__bullet:not(.swiper-pagination-bullet-active) {
  color: var(--c-text-inverse);
  background-color: transparent;
}

.p-hero-slider__bullet {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  font-size: var(--fs-meta);
  font-weight: 700;
  color: var(--c-text-inverse);
  cursor: pointer;
  background-color: transparent;
  border: 0;
  border-radius: 50%;
}

.p-hero-slider__bullet.swiper-pagination-bullet-active {
  color: var(--c-text);
  background-color: var(--c-bg);
}

/* Swiper 既定のドット装飾を打ち消す（数字表示にするため）。 */
.p-hero-slider .swiper-pagination-bullet {
  width: 30px;
  height: 30px;
  margin: 0;
  opacity: 1;
}

/* =========================================================================
   c-search — 検索フォーム（404 / 検索結果0件）
   ニュースレターの入力欄とボタンに見た目をそろえる。
   ========================================================================= */

.c-search {
  display: flex;
  gap: var(--sp-3);
  max-width: 700px;
}

.c-search__input {
  flex: 1 1 auto;
  min-width: 0;
  padding: var(--sp-2) var(--sp-4);
  background-color: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
}

.p-search {
  margin-top: var(--sp-5);
}

/* =========================================================================
   p-404
   ⚠️ カンプに無いため、既存コンポーネントの組み合わせで構成している。
      新しい見た目を発明しない。
   ========================================================================= */

.p-404__code {
  font-size: var(--fs-3xl);
  font-weight: 700;
  line-height: 1;
  color: var(--c-accent);
}

.p-404 .l-section__title {
  margin-top: var(--sp-4);
  margin-bottom: var(--sp-4);
}

.p-404__lead {
  max-width: 700px;
  font-size: var(--fs-meta);
  line-height: 1.8;
  color: var(--c-text-muted);
}

.p-404__back {
  margin-top: var(--sp-6);
}

/* =========================================================================
   SP ドロワー（menu-sp.png 準拠）
   ⚠️ PC に無い要素が2つある: 「記事」直下のカテゴリパネル / ニュースレター枠。
   ========================================================================= */

/* トグルは SP のみ。PC では CTA に置き換わる。
   ⚠️ 見た目は 26px のアイコンだが、当たり判定は 44px を確保する。
      右端からの距離をカンプ実測（19px）に合わせるため、
      44px の枠が右にはみ出すぶんを負のマージンで戻す。 */
.p-header__menu {
  display: grid;
  place-items: center;
  width: var(--tap-min);
  height: var(--tap-min);
  margin-right: calc((var(--tap-min) - 26px) / -2);
  padding: 0;
  color: inherit;
  cursor: pointer;
  background-color: transparent;
  border: 0;
}

@media (min-width: 1024px) {
  .p-header__menu {
    display: none;
  }
}

/* PC では CTA を出し、SP では隠す（カンプ SP のヘッダーは CTA を持たない）。 */
.p-header__cta {
  display: none;
}

@media (min-width: 1024px) {
  .p-header__cta {
    display: inline-flex;
  }
}

/* 開いている間は背面をスクロールさせない。 */
.is-drawer-open {
  overflow: hidden;
}

.p-drawer {
  position: fixed;
  inset: 0;
  z-index: 50;
  overflow-y: auto;
  overscroll-behavior: contain;
  background-color: var(--c-bg);
  opacity: 0;
  transition: opacity var(--duration-drawer) ease;
}

.p-drawer.is-open {
  opacity: 1;
}

/* ⚠️ 動きを減らす設定では遷移そのものを無効にする。 */
@media (prefers-reduced-motion: reduce) {
  .p-drawer {
    transition: none;
  }
}

@media (min-width: 1024px) {
  /* PC ではドロワーを使わない。JS が hidden を外しても出さない。 */
  .p-drawer {
    display: none;
  }
}

/* ⚠️ ドロワーは全画面（カンプ実測 1074px）で画面高さを超えてスクロールする。
   下部までスクロールした状態でも閉じられるよう、ヘッダーごと sticky で
   追従させる。カンプでもヘッダー下端に影が入っており、浮いている表現。 */
.p-drawer__head {
  position: sticky;
  top: 0;
  z-index: 1;
  background-color: var(--c-bg);
  box-shadow: 0 4px 12px var(--c-shadow);
}

/* ⚠️ ヘッダーと同じ高さ・同じ並びにする。開閉でハンバーガーと ✕ の位置が
   ズレると「押した場所と閉じる場所が違う」状態になるため。
   タグラインが折り返して高さが伸びないよう、SP では sr-only のままにする。 */
.p-drawer__head-inner {
  display: flex;
  gap: var(--sp-3);
  align-items: center;
  justify-content: space-between;
  height: var(--header-h);
}

/* ⚠️ ドロワーのロゴにもタグラインが焼き込まれている（SP版SVG）。
   HTML のタグラインは読み上げのために DOM に残し、視覚的には隠す。
   出すとヘッダーの高さが伸びて ✕ の位置がハンバーガーとズレる。 */
.p-drawer__tagline {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ハンバーガーと同じ寸法・同じ右余白にする（開閉で位置がズレないため）。 */
.p-drawer__close {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: var(--tap-min);
  height: var(--tap-min);
  margin-right: calc((var(--tap-min) - 26px) / -2);
  padding: 0;
  cursor: pointer;
  background-color: transparent;
  border: 0;
}

/* --- ナビ項目（カンプ実測: ピッチ約 69px・中央寄せ） ------------------- */

.p-drawer__item {
  text-align: center;
}

.p-drawer__link,
.p-drawer__list a {
  display: grid;
  place-items: center;
  min-height: 69px;
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--c-text);
  text-decoration: none;
}

.p-drawer__list {
  text-align: center;
}

/* --- カテゴリパネル（PC に無い） ---------------------------------------- */

.p-drawer__panel {
  position: relative;
  padding: var(--sp-6) var(--sp-5) var(--sp-7);
  color: var(--c-text-inverse);
  background-color: var(--c-drawer-panel);
}

/* 上辺中央の ▲ ポインタ。 */
.p-drawer__panel::before {
  position: absolute;
  bottom: 100%;
  left: 50%;
  width: 20px;
  height: 10px;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  content: "";
  background-color: var(--c-drawer-panel);
  transform: translateX(-50%);
}

.p-drawer__panel-title {
  padding-bottom: var(--sp-5);
  text-align: center;
  border-bottom: 1px solid rgb(255 255 255 / 20%);
}

.p-drawer__panel-link {
  display: inline-block;
  min-height: var(--tap-min);
  font-size: var(--fs-lg);
  font-weight: 700;
  line-height: var(--tap-min);
  color: var(--c-text-inverse);
  text-decoration: none;
}

.p-drawer__cats {
  display: grid;
  gap: var(--sp-2) var(--sp-4);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: var(--sp-4);
}

.p-drawer__cat {
  display: flex;
  gap: var(--sp-3);
  align-items: center;
  min-height: var(--tap-min);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--c-text-inverse);
  text-decoration: none;
}

/* 色ドット。カンプ実測 Ø15。色は color_slot から流し込む。 */
.p-drawer__dot {
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  background-color: var(--c-accent);
  border-radius: 50%;
}

.p-drawer__foot {
  padding: var(--sp-5) var(--container-pad) var(--sp-8);
}

/* =========================================================================
   タップターゲット（SP）
   ⚠️ 見た目はカンプのままにし、当たり判定だけを 44x44px 以上にする。
      カンプ実測の寸法（バッジ 28px高 / スライダーのバレット Ø30）を
      そのまま大きくするとデザインが変わるため、::after を敷いて
      当たり判定を広げる方式を採る。
   ========================================================================= */

/* 当たり判定を広げる共通の仕掛け。要素は position: relative が前提。 */
.c-badge,
.c-pager__link,
.c-rank__link,
.c-newsletter__terms a,
.c-newsletter__terms span,
.p-hero-slider__bullet,
.p-header__logo {
  position: relative;
}

.c-badge::after,
.c-pager__link::after,
.c-rank__link::after,
.c-newsletter__terms a::after,
.c-newsletter__terms span::after,
.p-hero-slider__bullet::after,
.p-header__logo::after {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: var(--tap-min);
  min-height: var(--tap-min);
  width: 100%;
  height: 100%;
  content: "";
  transform: translate(-50%, -50%);
}

/* ボタン類は実寸で 44px を確保する（見た目に影響しない）。 */
.c-btn {
  min-height: var(--tap-min);
}

/*
 * ⚠️ ヘッダー CTA だけはカンプ実測 40px。
 *    ★ここに置くのは「後勝ち」を効かせるため。上の .c-btn と同じ詳細度なので、
 *      定義が前にあると 44px に戻される（!important は使わない・SEOROBO.md §4-8）。
 *    CTA は SP で非表示なので、タップターゲット検証（375/390）には掛からない。
 */
.p-header__cta {
  min-height: 40px;
}

.c-search__input,
.c-newsletter__input {
  min-height: var(--tap-min);
}

/* 目次・カテゴリリストの行も 44px 以上にする。 */
.c-toc__link,
.c-cat-list__link {
  min-height: var(--tap-min);
}

/* ランキングの行はテキストが折り返すため、リンク自体に余白を持たせる。 */
.c-rank__link {
  display: block;
  padding-block: var(--sp-1);
}

/* =========================================================================
   c-carousel — SP のみカルーセル / PC はグリッド
   カンプ実測:
     アーカイブTOP3（--full）: カードが画面幅いっぱい（x27-363）で1枚表示
     関連記事（--peek）     : カードが x80-311 で左右の前後カードが見切れる
     ドット: Ø8 / gap 10px / 中央寄せ。
             アクティブ=--c-dot-active の中空リング（6色共通の固定色）、
             非アクティブ=--c-dot-idle の塗り
   ⚠️ PC では Swiper を初期化しないため、swiper 由来のクラスの効果を
      CSS 側で打ち消してグリッドに戻す。
   ========================================================================= */

.c-carousel {
  /* PC ではみ出しを見せない。SP は overflow を切って見切れを出す。 */
  overflow: visible;
}

/* Swiper 初期化前・3枚未満（is-static）・PC では素のグリッドとして振る舞う。
   ⚠️ Swiper の CSS（.swiper-wrapper { display: flex }）は style.css より後に
      読まれるため、親を1つ足して詳細度で勝たせる。 */
.c-carousel .c-carousel__track {
  display: grid;
}

.c-carousel__pagination {
  display: none;
}

@media (max-width: 1023.98px) {
  /* SP のみカルーセル。 */
  .c-carousel.swiper-initialized .c-carousel__track {
    display: flex;
  }

  /* 初期化時はグリッドの gap を持ち込まない（Swiper が spaceBetween で管理）。 */
  .c-carousel.swiper-initialized .c-carousel__track {
    gap: 0;
  }

  .c-carousel.swiper-initialized .c-carousel__pagination {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: var(--sp-5);
  }

  /* --peek は左右の前後カードを見切れさせる（カンプ実測）。
     カード幅はカンプ実測 232px 固定。slidesPerView: 'auto' と組で使う。
     ⚠️ overflow: visible にすると見切れたカードがページ幅を押し広げ、
        横スクロールが出る。overflow: hidden のまま、親を左右いっぱいに
        広げて中身に padding を入れることで「見切れ」を表現する。 */
  .c-carousel--peek.swiper-initialized {
    overflow: hidden;
  }

  .c-carousel--peek.swiper-initialized .c-carousel__item {
    width: 232px;
  }

  .c-carousel--full.swiper-initialized {
    overflow: hidden;
  }
}

/* --- ドット（カンプ実測 Ø8） ------------------------------------------- */

/* ⚠️ 見た目は Ø8（カンプ実測）のまま、当たり判定だけ 44px 以上にする。
   ドットを実寸で大きくするとカンプから外れるため ::after を敷く。
   バッジ・ページャと同じ方式。 */
.c-carousel .swiper-pagination-bullet {
  position: relative;
  width: 8px;
  height: 8px;
  margin: 0;
  background-color: var(--c-dot-idle);
  border-radius: 50%;
  opacity: 1;
}

.c-carousel .swiper-pagination-bullet::after {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: var(--tap-min);
  min-height: var(--tap-min);
  width: 100%;
  height: 100%;
  content: "";
  transform: translate(-50%, -50%);
}

/* アクティブは中空のリング。塗りではなく枠線で描く（カンプ実測）。
   ⚠️ 色は --c-accent ではなく固定色。ref-archive-sp-1〜6 の実測で
      ヒーローが何色でもドットは紫のままだったため。 */
.c-carousel .swiper-pagination-bullet-active {
  background-color: transparent;
  box-shadow: inset 0 0 0 2px var(--c-dot-active);
}

/* ==========================================================================
   記事本文（グループE）
   ==========================================================================
   ⚠️ カンプ single-pc.png の本文エリア（x=200..899 / 幅700px）から実測した。
   ⚠️ カンプに描かれていない要素は実装しない（ul / ol / li / strong / a /
      blockquote / table は本文に1つも描かれていなかった）。想像で作らない。
   ⚠️ 生 hex を書かないこと。色は tokens.css の var(--*) を参照する。
   -------------------------------------------------------------------------- */

/*
 * h2。★上に 2px の罫線が入る（カンプ実測 y=1274..1275 / 色 #888888 = --c-text-muted /
 *   幅は本文カラムいっぱいの 700px）。罫線の下端から見出しのグリフ上端までは 37px。
 */
.p-entry__content h2 {
  padding-top: var(--sp-6);
  border-top: 2px solid var(--c-text-muted);
  font-size: var(--fs-xl);        /* カンプ実測: 行ピッチ33px ÷ 行間1.4 = 24px */
  font-weight: 700;
  line-height: var(--lh-tight);   /* カンプ実測: 2行の行ピッチ 33px */
  letter-spacing: var(--ls-heading);
}

/*
 * h3。カンプ実測: グリフ高 18px（本文 15.5px との比 1.16）。
 * ⚠️ 実記事121本には h3 が1つも無い。将来 h3 を使う記事が出たときのために
 *    実装は残すが、現時点で目視確認できる実データは無い。
 */
.p-entry__content h3 {
  font-size: var(--fs-lg);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-heading);
}

/*
 * 見出しの上下の余白。
 *   カンプ実測（グリフ基準）: 本文下端 → h3 上端 64px / h3 下端 → 本文上端 34px
 * ⚠️ `> * + *` の共通マージンより後に書くこと。先に書くと後勝ちで打ち消される。
 */
/*
 * ⚠️ 順序が意味を持つ。見出しの「後ろ」の規則を先に書き、見出しの「前」の規則を
 *    後に書く。逆にすると h2 の直後に h3 が来たとき、後勝ちで詰まった値になる。
 *
 * ⚠️ 値は px で書いてある。トークンの刻み（4/8/12/16/24/32/48/64）に無い数字で、
 *    calc を重ねるより実測値をそのまま書くほうが根拠を追える。
 *    ★グリフ基準のカンプ実測値と、ボックス基準の margin は一致しない
 *      （行送りの半分が上下に付くため）。括弧内はカンプのグリフ間距離。
 */
.p-entry__content > h2 + *,
.p-entry__content > h3 + * {
  margin-top: var(--sp-5);   /* カンプ実測: h3 下端 → 本文上端 35px */
}

.p-entry__content > h2 + h3 {
  margin-top: 58px;          /* カンプ実測: h2 下端 → h3 上端 69px */
}

.p-entry__content > * + h2 {
  margin-top: 72px;          /* カンプ実測: 本文下端 → 罫線 80px */
}

.p-entry__content > * + h3 {
  margin-top: 52px;          /* カンプ実測: 本文下端 → h3 上端 64px */
}

/*
 * 画像ブロック（公開後に本文へ図解を追加する前提で実装する）。
 *
 * カンプ実測（single-pc.png の図解「ECサイトの内部施策」）:
 *   枠      x=200..899（本文カラムいっぱい 700px）/ 背景 #FAFAFA
 *   図の下端 → キャプション上端  37px
 *   キャプション  グリフ高 12px / #888888 / 中央寄せ
 *   キャプション下端 → 次の本文  62px
 *
 * ⚠️ 画像そのものは幅100%で本文カラムに収まる（PC 700 / SP 350）。
 *    実測ではみ出しも横スクロールも出ないことを確認済み。
 */
/*
 * ⚠️ 背景は figure ではなく img に付ける。
 *    カンプでは灰色の面が【図の下端で終わり】、キャプションは白地の上にある。
 *    figure に付けるとキャプションの裏まで灰色が伸びてカンプと変わる
 *    （実際に一度そう書いて外した）。
 * ⚠️ 図が透過 PNG なら灰色が透けて見え、不透過なら見た目は変わらない。
 *    どちらでもカンプと矛盾しない置き方にしてある。
 */
.p-entry__content .wp-block-image img {
  display: block;
  width: 100%;
  height: auto;
  background-color: var(--c-figure-bg);
}

.p-entry__content .wp-block-image figcaption {
  /* カンプ実測: 図の下端 → キャプション上端 37px。★グリフ基準で合わせた実測値。
     var(--sp-6)（32px）だと 33px になり 4px 足りなかった。 */
  margin-top: 36px;
  color: var(--c-text-muted);
  font-size: var(--fs-xs);   /* カンプ実測グリフ高 12px */
  line-height: var(--lh-tight);
  text-align: center;
}

/* キャプションの下は本文より広く空ける（カンプ実測 62px）。 */
.p-entry__content > .wp-block-image + * {
  margin-top: 54px;
}

/*
 * リスト（ul / ol / li）。
 *
 * ★カンプ未描画。TARO判断（2026-08-24）。
 *   カンプの本文にリストは1つも描かれていないが、実記事121本が
 *   ul 256件 / li 1603件 / ol 19件 を使うため実装が要る。
 *   ⚠️ ここの値はカンプ実測ではない。調整可。
 *
 * 実記事での使用状況（2026-08-24 集計）:
 *   p 3882 / h2 1997 / li 1603 / ul 256 / ol 19
 *   ★blockquote / table / strong / a は 0件。実装しない。
 */
.p-entry__content ul,
.p-entry__content ol {
  margin-top: var(--sp-6);      /* TARO判断: リストの上 32px */
  margin-bottom: var(--sp-6);   /* TARO判断: リストの下 32px */
  padding-left: var(--sp-5);    /* TARO判断: マーカーぶんの字下げ 24px */
  font-size: var(--fs-base);
  line-height: var(--lh-base);
}

.p-entry__content ul {
  list-style-type: disc;        /* TARO判断: ● 黒丸（「・」ではない） */
}

.p-entry__content ol {
  list-style-type: decimal;     /* TARO判断: 算用数字 + 「.」 */
}

/* ★2階層目は ○（白丸）。3階層目以降は想定しない。 */
.p-entry__content ul ul {
  list-style-type: circle;
}

.p-entry__content li + li {
  margin-top: var(--sp-3);      /* TARO判断: 項目間 12px */
}

/* ⚠️ 入れ子のリストは項目間ではなく行間で繋ぐ。上下 32px が二重に入ると空きすぎる。 */
.p-entry__content li > ul,
.p-entry__content li > ol {
  margin-top: var(--sp-3);
  margin-bottom: 0;
}

/*
 * マーカーの色。★::marker は color だけが効く（背景や余白は効かない）。
 * ⚠️ 文字色まで薄くしないこと。本文は --c-text のまま。
 */
.p-entry__content li::marker {
  color: var(--c-text-muted);   /* TARO判断: #888888 */
}

/*
 * ヒーロースライダーの暫定画像（カテゴリイラスト）。
 *
 * ★本物のサムネイル121枚ができるまでの見え方（2026-08-25 HEY 判断 (B)）。
 *   イラストは透過で比率も 7:4 ではないため、既定のグレー背景だと左右に
 *   灰色の帯が出て「読み込み失敗」に見える。カテゴリ色を敷いて中央に置く。
 *   ⚠️ カテゴリページのヒーロー帯と同じ考え方（色帯の上にイラストが乗る）。
 *
 * ⚠️ 本物のサムネイルに差し替えると slot が 0 になり --tinted が付かなくなる。
 *    あとで消す作業が要らない形にしてある。
 */
.p-hero-slider__figure--tinted {
  background-color: var(--slide-bg, var(--c-placeholder));
}

/* ⚠️ cover だと絵が切れる。contain で全体を見せ、余りは色帯で埋める。 */
.p-hero-slider__figure--tinted .p-hero-slider__image {
  object-fit: contain;
  padding: var(--sp-5);
}