@charset "utf-8";

/* ============================================================
 * category.css — カテゴリーアーカイブ（category.php）専用
 *
 *   functions.php の (2.6) で is_category() のときだけ読み込む。
 *   top.css は TOP/tag 系専用なので、ここで必要な部品は本ファイルに持つ。
 *
 *   前提として全ページで読まれるもの：
 *     common.css   … カラートークン（--brand-*, --cat-*, --line, --radius 等）
 *     layout.css   … .news_list / .news_box（記事カード本体）
 *     sidebar.css  … .sidebar / .yf-widget / .widget-header / .popular-list
 *
 *   ※カテゴリバッジの色（--cat-*）の定義元は common.css の :root。ここでは参照のみ。
 * ============================================================ */


/* ── ヘッダー下のタブ ───────────────────────────
   layout.css:278 の .tab_wrap は margin-bottom:2rem を持つが、
   カテゴリーページは直下に FV（cat-hero）が来るので余白を詰める。
   本ファイルはランキングページ（template/ranking.php）でも読み込むため、
   FV を持つカテゴリーページ（<main data-cat>）だけに絞る。
   ランキングページは FV が無いので、ヘッダー下の余白は layout.css のまま残す。 */
body:has(main[data-cat]) .tab_wrap { margin-bottom: 0; }


/* ── ヒーローの配色トークン ───────────────────────────
   カテゴリごとに背景と差し色を変える。値の出どころはデザイン
   （devlop_category/yomifami_*_category.html）。
   data-cat には最上位カテゴリの slug が入る。
   --cat-current は表示中カテゴリの色。サイト共通のカテゴリー色（common.css の :root --cat-*）を
   そのまま指すだけで、独自の値は持たない（FVのキッカー・タグの「#」・背景のにじみ・紹介文の見出しバーで共用）。 */
main[data-cat] {
  --hero-bg:     #2b2320;   /* 既定（未登録カテゴリ用のニュートラル） */
  --cat-current: var(--brand-mid);   /* 未登録カテゴリはニュートラル（docs/10 の misc と同じ） */
  --cat-soft:    #efe7dd;   /* 見出し下の罫線など、ごく淡い面 */
}
main[data-cat="entame-culture"] { --cat-current:var(--cat-entame); --hero-bg:#2e1f08; --cat-soft:#fdf0e0; }
main[data-cat="fortune-telling"] { --cat-current:var(--cat-fortune); --hero-bg:#1a1030; --cat-soft:#f0edf9; }
main[data-cat="gourmet"] { --cat-current:var(--cat-gourmet); --hero-bg:#2d1010; --cat-soft:#fdeaea; }
main[data-cat="kurashi"] { --cat-current:var(--cat-kurashi); --hero-bg:#1a2e40; --cat-soft:#e8eff6; }
main[data-cat="ticket-takarazuka"] { --cat-current:var(--cat-ticket); --hero-bg:#2e1028; --cat-soft:#f5e8f3; }
main[data-cat="trip"] { --cat-current:var(--cat-trip); --hero-bg:#1e3d2f; --cat-soft:#e6f2eb; }
main[data-cat="recipe"] { --cat-current:var(--cat-recipe); --hero-bg:#3b2e2b; --cat-soft:#fdf1e6; }


/* ── ヒーロー ───────────────────────────────── */
.cat-hero {
  position: relative;
  overflow: hidden;
  background: var(--cat-current);
}
.cat-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .35;
}
/* ── 背景画像あり（ACF で設定） ─────────────────
   色の無い未登録カテゴリだけ。色のあるカテゴリは画像を使わず is-fill で塗る（下の「カテゴリー色で塗りつぶし」）。
   画像は PHP がインライン background-image で流し込む。
   文字の可読性を確保するため、ベース色（--hero-bg）のグラデーションを重ねる。
   濃さは ACF の値を --hero-overlay（％）としてインラインで受け取る。 */
.cat-hero.has-img {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.cat-hero.has-img::before {
  opacity: 1;
  /* color-mix 非対応ブラウザ向けのフォールバック（黒のスクリム） */
  background: linear-gradient(100deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.72) 38%, rgba(0,0,0,.3) 78%, transparent 100%);
  /* 対応ブラウザではカテゴリのベース色で色を合わせる */
  background: linear-gradient(100deg,
    color-mix(in srgb, var(--hero-bg) var(--hero-overlay, 62%), transparent) 0%,
    color-mix(in srgb, var(--hero-bg) var(--hero-overlay, 62%), transparent) 38%,
    color-mix(in srgb, var(--hero-bg) 28%, transparent) 78%,
    transparent 100%);
}

.cat-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 1240px;
  margin: 0 auto;
  padding: 48px 24px 52px;
}
.cat-hero-text { max-width: 860px; }

/* 統計ブロックがあるときだけ右カラムを作る（PHP 側で has-stats を付与） */
.cat-hero-inner.has-stats {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 44px;
  align-items: center;
}
.cat-hero-inner.has-stats .cat-hero-text { max-width: none; }

/* ── ヒーロー右の統計 ───────────────────────── */
.cat-hero-stats {
  background: rgba(0, 0, 0, .3);
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: var(--radius);
  padding: 24px 22px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.stat-item { text-align: center; min-width: 0; }
.stat-num {
  font-family: arial, sans-serif;
  font-size: 19px;
  font-weight: 800;
  color: #fff;
  line-height: 1.35;
  letter-spacing: -.01em;
  overflow-wrap: anywhere;
}
.stat-label {
  font-size: 10px;
  line-height: 1.6;
  color: rgba(255, 255, 255, .95);
  margin-top: 7px;
  letter-spacing: .08em;
}
/* 2行目との区切り線。grid 全幅に渡す */
.stat-divider { grid-column: 1 / -1; height: 1px; background: rgba(255, 255, 255, .16); }

.cat-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: arial, sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: var(--cat-current);
  letter-spacing: .26em;
  margin-bottom: 16px;
}
.cat-eyebrow::before {
  content: '';
  width: 24px;
  height: 1px;
  background: currentColor;
}

.cat-hero-title {
  font-family: arial, sans-serif;
  font-size: 34px;
  font-weight: 800;
  color: #fff;
  line-height: 1.35;
  letter-spacing: .03em;
  margin: 0 0 18px;
  text-wrap: balance;
}

.cat-hero-desc {
  font-size: 14px;
  line-height: 1.95;
  color: rgba(255,255,255,.82);
  margin-bottom: 24px;
  max-width: 760px;
}
/* term_description() は <p> を含むことがあるので余白を潰す */
.cat-hero-desc p { margin: 0; }
.cat-hero-desc p + p { margin-top: .6em; }
.cat-hero-desc strong { color: #fff; font-weight: 700; }

.cat-hero-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.cat-hero-tags a.cat-tag {
  padding: 10px 15px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  letter-spacing: .04em;
  text-decoration: none;
  transition: background .2s;
}
.cat-hero-tags a.cat-tag::before {
  content: '#';
  color: var(--cat-current);
  margin-right: 2px;
}
.cat-hero-tags a.cat-tag:hover,
.cat-hero-tags a.cat-tag:focus-visible { background: rgba(255,255,255,.26); color: #fff; }

/* 背景画像が無いとき（PHP が has-img を付けない）は FV 全体がカテゴリー色のベタ塗りになる。
   英字キッカーとタグの「#」を同じカテゴリー色のままにすると背景に沈むので白にする。
   背景画像があるときは今までどおりカテゴリー色（暗いスクリムの上なので映える）。 */
.cat-hero:not(.has-img) .cat-eyebrow,
.cat-hero:not(.has-img) .cat-hero-tags a.cat-tag::before { color: #fff; }


/* ── 2カラムレイアウト ─────────────────────────── */
.cat-layout {
  max-width: 1240px;
  margin: 0 auto;
  padding: 28px 20px 64px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 304px;
  gap: 40px;
  align-items: start;
}
.cat-layout > .content { min-width: 0; }
.cat-layout > .sidebar { min-width: 0; }


/* ── 記事カードの列数調整 ───────────────────────
   layout.css は全幅3列想定。サイドバーが入って本文幅が狭くなるため
   このページだけ2列にする。SP（768px以下）は layout.css の既存指定に任せる。 */
@media (min-width: 769px) {
  .cat-layout .news_list .news_box {
    max-width: none;
    width: calc(50% - 10px);
  }
  .cat-layout .news_list::after {
    max-width: none;
    width: calc(50% - 10px);
  }
}

/* ── 記事カードのサムネイルを 16:9 に ─────────────
   タグページ（tag.php）と同じ見え方に揃える。
   画像ファイルは inc/newsbox.php の thumb570（570x440）のまま CSS で中央を切り抜く。
   thumb570_16x9 は 2026-06 追加でどの投稿にも未生成（0/1047件・2026-09-10時点）のため、
   サイズ名を差し替えると原寸画像にフォールバックして重くなる。
   thumb570 自体が中央切り抜きなので、ここで中央を 16:9 に切っても構図は同じになる。
   広告枠（.news_box.ad_box）は dl/dt を持たないので当たらない。 */
.cat-layout .news_list .news_box dl dt .img_wrap {
  aspect-ratio: 16 / 9;
}
.cat-layout .news_list .news_box dl dt .img_wrap img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* SP（768px以下）はカードが横並びで、カテゴリ名・日付（dd p）を
   layout.css が absolute で下端に固定している。16:9 で画像が低くなると
   3〜4行のタイトルがその行に重なるため、dd を縦並びの flex にして p を通常配置に戻す。
   margin-top:auto で、タイトルが短いカードは従来どおり下端に揃う。 */
@media (max-width: 768px) {
  .cat-layout .news_list .news_box dl dd {
    display: flex;
    flex-direction: column;
  }
  .cat-layout .news_list .news_box dl dd p {
    position: static;
    margin-top: auto;
  }
}


/* リンク色について：common.css:16 の a:link{color:#000} は詳細度 0-1-1 で、
   クラス単体（0-1-0）では負ける。!important を足さずに済ませるため、
   リンク系の部品は「親クラス + a.クラス」（0-2-1）で指定している。 */
/* ── サイドバー：今日の運勢（12星座チップ） ─────────────
   表示中のカテゴリに関係なく占いの色で出すため、ここだけ固定値を持つ
   （--cat-fortune はバッジ用の明るい色で、白文字だとコントラストが足りない）。 */
.fortune-mini {
  --fz-base:  #6a5aa0;
  --fz-hover: #4a3c7e;
  padding: 16px 18px;
}
.fortune-mini-lead {
  margin: 0 0 13px;
  font-size: 12px;
  line-height: 1.75;
  color: var(--text-muted);
}
.zodiac-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
  margin-bottom: 14px;
}
.zodiac-grid a.zodiac-chip {
  display: block;
  padding: 7px 6px;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--brand-dark);
  background: var(--cream-50);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: background .2s, border-color .2s, color .2s;
}
.zodiac-chip__mark { margin-right: 3px; }
.zodiac-grid a.zodiac-chip:hover,
.zodiac-grid a.zodiac-chip:focus-visible {
  background: var(--fz-base);
  border-color: var(--fz-base);
  color: #fff;
}
.fortune-mini a.fortune-mini-cta {
  display: block;
  padding: 10px;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  color: #fff;
  background: var(--fz-base);
  border-radius: 999px;
  text-decoration: none;
  transition: background .2s;
}
.fortune-mini a.fortune-mini-cta:hover,
.fortune-mini a.fortune-mini-cta:focus-visible { background: var(--fz-hover); color: #fff; }

/* ── サイドバー：キーワードから探す ─────────────────
   top.css にも同名の定義があるが、あちらは TOP/tag 系でしか読まれないため
   ここにも持つ（同時に読まれることはない）。 */
.tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.tag-cloud a.tag-item {
  padding: 5px 12px;
  background: var(--cream-50);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 11px;
  color: var(--brand-dark);
  text-decoration: none;
  transition: background .2s, color .2s, border-color .2s;
}
.tag-cloud a.tag-item::before { content: '#'; color: var(--brand-mid); margin-right: 2px; }
.tag-cloud a.tag-item:hover,
.tag-cloud a.tag-item:focus-visible { background: var(--brand-dark); color: #fff; border-color: var(--brand-dark); }
.tag-cloud a.tag-item:hover::before { color: var(--brand-pink); }


/* ── サイドバー：フォロー ──────────────────────── */
.follow-lead {
  margin: 0 0 12px;
  font-size: 12.5px;
  line-height: 1.8;
  color: var(--text-muted);
}
.follow-social .sns_list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.follow-social .sns_list a {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--line);
  color: var(--brand-dark);
  transition: background .2s, color .2s, border-color .2s;
}
.follow-social .sns_list a:hover,
.follow-social .sns_list a:focus-visible {
  background: var(--brand-dark);
  color: #fff;
  border-color: var(--brand-dark);
}
.follow-social .sns_list svg { width: 17px; height: 17px; }


/* ── SEOテキスト（記事一覧の下・DISCOVER MORE の上） ──────
   本文は WYSIWYG。見出し(H3)と段落を自由に組める前提のスタイル。 */
.seo-text-block {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px 30px;
  margin-top: 60px;
}
.seo-text-block h2 {
  font-family: arial, sans-serif;
  font-size: 19px; font-weight: 800;
  color: var(--brand-dark);
  letter-spacing: .03em;
  margin: 0 0 14px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--cat-soft);
}
/* 本文中の見出し。編集部が h2〜h4 のどれを選んでも崩れないようにしておく
   （ブロック冒頭の h2 は見出し欄が持つので、本文は h3 以下を想定） */
.seo-text-block h3,
.seo-text-block h4 {
  /* ::before の色バーと文字を横並びにする（デザイン準拠） */
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 15px; font-weight: 800;
  color: var(--cat-current);
  letter-spacing: .02em;
  margin: 24px 0 9px;
}
.seo-text-block h3::before,
.seo-text-block h4::before {
  content: '';
  display: block;
  width: 4px;
  height: 15px;
  background: var(--cat-current);
  border-radius: 2px;
}
.seo-text-block h4 { font-size: 14px; }
.seo-text-block h4::before { height: 13px; }
/* 本文側で h2 が使われた場合も見出し欄と同じ見た目に寄せる */
.seo-text-block > h2 ~ h2 {
  font-size: 16px;
  border-bottom-width: 1px;
  margin-top: 26px;
}
.seo-text-block p {
  font-size: 14px;
  line-height: 1.95;
  color: var(--text-muted);
  margin: 0 0 12px;
}
.seo-text-block > *:last-child { margin-bottom: 0; }
.seo-text-block a { color: var(--brand-pink); text-decoration: underline; }

/* ── ページ末尾：ほかのカテゴリもチェック ───────────────
   各カテゴリの人気記事1位を1枚ずつ。色は common.css の --cat-* を参照。 */
.cross-cat {
  background: var(--surface-2, #f7f2ec);
  border-top: 1px solid var(--line);
}
.cross-cat-inner { max-width: 1240px; margin: 0 auto; padding: 44px 24px 52px; }

.cross-cat-head { text-align: center; margin-bottom: 28px; }
.cc-eyebrow {
  font-family: arial, sans-serif;
  font-size: 11px; font-weight: 700;
  letter-spacing: .24em;
  color: var(--brand-pink);
  margin-bottom: 10px;
}
.cross-cat-head h2 {
  font-family: arial, sans-serif;
  font-size: 22px; font-weight: 800;
  color: var(--brand-dark);
  letter-spacing: .04em;
  margin: 0 0 8px;
}
.cross-cat-head p { margin: 0; font-size: 13px; color: var(--text-muted); }

.cross-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}

.cross-grid a.cross-card {
  display: flex; flex-direction: column;
  color: var(--brand-dark);
  text-decoration: none;
  transition: transform .25s;
}
.cross-grid a.cross-card:hover,
.cross-grid a.cross-card:focus-visible { transform: translateY(-3px); }
.cross-grid a.cross-card:hover .cross-title { color: var(--brand-pink); }

.cross-img { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radius); }
.cross-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* サムネイル未設定時のプレースホルダ。カテゴリ色のグラデーション */
.cross-ph { width: 100%; height: 100%; background: var(--text-light); }
.cross-badge {
  position: absolute; left: 8px; top: 8px;
  padding: 5px 9px; border-radius: 3px;
  font-size: 10px; font-weight: 700; color: #fff;
  letter-spacing: .04em;
  background: var(--text-light);
}

.cross-body { padding: 11px 2px 0; display: flex; flex-direction: column; gap: 5px; }
.cross-catname { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; color: var(--text-muted); }
.cross-title {
  margin: 0;
  transition: color .2s;
  font-size: 13.5px; font-weight: 700; line-height: 1.55;
  color: var(--brand-dark);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* カテゴリ配色（バッジ＝背景 / カテゴリ名＝文字色 / プレースホルダ＝背景） */
.cross-badge.cat-recipe   { background: var(--cat-recipe); }
.cross-catname.cat-recipe { color: var(--cat-recipe); }
.cross-ph.cat-recipe      { background: linear-gradient(135deg, var(--cat-recipe), color-mix(in srgb, var(--cat-recipe) 55%, #000)); }
.cross-badge.cat-trip   { background: var(--cat-trip); }
.cross-catname.cat-trip { color: var(--cat-trip); }
.cross-ph.cat-trip      { background: linear-gradient(135deg, var(--cat-trip), color-mix(in srgb, var(--cat-trip) 55%, #000)); }
.cross-badge.cat-ticket   { background: var(--cat-ticket); }
.cross-catname.cat-ticket { color: var(--cat-ticket); }
.cross-ph.cat-ticket      { background: linear-gradient(135deg, var(--cat-ticket), color-mix(in srgb, var(--cat-ticket) 55%, #000)); }
.cross-badge.cat-entame   { background: var(--cat-entame); }
.cross-catname.cat-entame { color: var(--cat-entame); }
.cross-ph.cat-entame      { background: linear-gradient(135deg, var(--cat-entame), color-mix(in srgb, var(--cat-entame) 55%, #000)); }
.cross-badge.cat-kurashi   { background: var(--cat-kurashi); }
.cross-catname.cat-kurashi { color: var(--cat-kurashi); }
.cross-ph.cat-kurashi      { background: linear-gradient(135deg, var(--cat-kurashi), color-mix(in srgb, var(--cat-kurashi) 55%, #000)); }
.cross-badge.cat-gourmet   { background: var(--cat-gourmet); }
.cross-catname.cat-gourmet { color: var(--cat-gourmet); }
.cross-ph.cat-gourmet      { background: linear-gradient(135deg, var(--cat-gourmet), color-mix(in srgb, var(--cat-gourmet) 55%, #000)); }
.cross-badge.cat-present   { background: var(--cat-present); }
.cross-catname.cat-present { color: var(--cat-present); }
.cross-ph.cat-present      { background: linear-gradient(135deg, var(--cat-present), color-mix(in srgb, var(--cat-present) 55%, #000)); }
.cross-badge.cat-fortune   { background: var(--cat-fortune); }
.cross-catname.cat-fortune { color: var(--cat-fortune); }
.cross-ph.cat-fortune      { background: linear-gradient(135deg, var(--cat-fortune), color-mix(in srgb, var(--cat-fortune) 55%, #000)); }

/* ── サイドバー「他のカテゴリ」の英字ラベル ─────────
   SP だけで出す（下の @media で表示）。PC は従来どおり日本語のみ。 */
.cat-link__en { display: none; }

/* ── 記事一覧のカテゴリー色（--cat-color）─────────
   カテゴリーページの一覧（inc/newsbox.php）とランキングページ本文（WordPress Popular Posts）の .cat に、
   カテゴリーの色を変数で持たせる。PC はラベルの背景、SP は丸と文字の色として使う。
   どちらも a / li.news_box > dl > dd > h3 ＋ p（.cat・.date）の同じ構造（WPP は h3・.cat の中身が <a>）。
   子カテゴリは親の色（.agent-os/docs/10_category-color.md）。該当なしは使う側で var(--brand-mid) に落ちる。
   .content で絞るのは、サイドバーや下部の cross-cat を巻き込まないため。 */
/* カテゴリーページ：newsbox.php が短縮キーのクラスを付ける（yf_category_color_key()） */
.cat-layout .content .news_box .cat--recipe { --cat-color: var(--cat-recipe); }
.cat-layout .content .news_box .cat--trip { --cat-color: var(--cat-trip); }
.cat-layout .content .news_box .cat--ticket { --cat-color: var(--cat-ticket); }
.cat-layout .content .news_box .cat--entame { --cat-color: var(--cat-entame); }
.cat-layout .content .news_box .cat--kurashi { --cat-color: var(--cat-kurashi); }
.cat-layout .content .news_box .cat--gourmet { --cat-color: var(--cat-gourmet); }
.cat-layout .content .news_box .cat--present { --cat-color: var(--cat-present); }
.cat-layout .content .news_box .cat--fortune { --cat-color: var(--cat-fortune); }
/* ランキング本文：WPP の {category} はクラスに ID しか持たないので、リンク先 URL で判定する。
   子カテゴリは URL に親が入るので親の色。column / new-column は yf_category_color_key() と同じ手動対応 */
.cat-layout .content .news_box .cat:has(> a[href*="/category/recipe/"]) { --cat-color: var(--cat-recipe); }
.cat-layout .content .news_box .cat:has(> a[href*="/category/trip/"]) { --cat-color: var(--cat-trip); }
.cat-layout .content .news_box .cat:has(> a[href*="/category/ticket-takarazuka/"]) { --cat-color: var(--cat-ticket); }
.cat-layout .content .news_box .cat:has(> a[href*="/category/entame-culture/"]) { --cat-color: var(--cat-entame); }
.cat-layout .content .news_box .cat:has(> a[href*="/category/kurashi/"]) { --cat-color: var(--cat-kurashi); }
.cat-layout .content .news_box .cat:has(> a[href*="/category/gourmet/"]) { --cat-color: var(--cat-gourmet); }
.cat-layout .content .news_box .cat:has(> a[href*="/category/webpr/"]) { --cat-color: var(--cat-present); }
.cat-layout .content .news_box .cat:has(> a[href*="/category/fortune-telling/"]) { --cat-color: var(--cat-fortune); }
.cat-layout .content .news_box .cat:has(> a[href*="/category/column/"]) { --cat-color: var(--cat-recipe); }
.cat-layout .content .news_box .cat:has(> a[href*="/category/new-column/"]) { --cat-color: var(--cat-kurashi); }
.cat-layout .content .news_box .cat a { color: inherit; }

/* ── 記事一覧のタイトル・カテゴリー・日付（PC）→ TOP の PC 新着カード（.card-title / .card-meta / .card-tag）──
   並び（タイトル → カテゴリー＋日付）は TOP と同じ。SP は下の @media (max-width: 768px)。 */
@media (min-width: 769px) {
  .cat-layout .content .news_box dl dd h3,
  .cat-layout .content .news_box dl dd h3 a {
    font-family: arial, sans-serif;
    font-size: 15px;
    line-height: 1.65;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--brand-dark);
    transition: color .2s;
  }
  .cat-layout .content .news_box dl dd h3 {
    margin-bottom: 10px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .cat-layout .content .news_box:hover dl dd h3,
  .cat-layout .content .news_box:hover dl dd h3 a { color: var(--brand-pink); }
  /* カテゴリー＋日付の行 → .card-meta */
  .cat-layout .content .news_box dl dd p {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: arial, sans-serif;
    font-size: 11px;
    line-height: 1.75;
    letter-spacing: .08em;
    color: var(--brand-mid);
  }
  /* カテゴリー → .card-tag（カテゴリー色のラベル。layout.css の「●」は出さない） */
  .cat-layout .content .news_box .cat {
    padding: 2px 8px;
    border-radius: 2px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    color: #fff;
    background: var(--cat-color, var(--brand-mid));
  }
  .cat-layout .content .news_box .cat::before { content: none; }
  /* 日付 → .card-meta の中の日付（行の書体・大きさ・色をそのまま継承する） */
  .cat-layout .content .news_box .date {
    margin-left: 0;
    font: inherit;
    letter-spacing: inherit;
    color: inherit;
  }
}

/* ── 子カテゴリのナビ（category.php の ul.category-children）→ デザインの .subcat-nav / .subcat-btn ──
   出どころ：devlop_category/yomifami_kurashi_category.html（SP は *_sp.html。下の @media）。
   先頭の「すべて」はこのカテゴリ自身で、表示中なので .is-active（塗り）。
   layout.css の旧スタイル（ピンクの丸・550px 以下で縦並び）をここで上書きする。
   ホバー色はデザインの --cat-accent を、表示中カテゴリの色 --cat-current に置き換えている。 */
.cat-layout .content ul.category-children {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 28px;
  padding: 0;
  list-style: none;
}
.cat-layout .content ul.category-children > li { margin: 0; }
.cat-layout .content a.sub_link {
  display: block;
  padding: 8px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  font-family: arial, sans-serif;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.75;
  letter-spacing: .04em;
  color: var(--brand-dark);
  text-decoration: none;
  transition: border-color .2s, color .2s, background .2s;
}
.cat-layout .content a.sub_link::before { content: none; }
.cat-layout .content a.sub_link:hover {
  opacity: 1;   /* layout.css の a.sub_link:hover { opacity:.7 } を打ち消す */
  border-color: var(--cat-current);
  color: var(--cat-current);
}
/* 表示中（すべて）。ホバーより後に書いて、ホバーしても塗りのまま */
.cat-layout .content a.sub_link.is-active {
  background: var(--brand-dark);
  border-color: var(--brand-dark);
  color: #fff;
}

/* ── レスポンシブ ─────────────────────────── */
@media (max-width: 1024px) {
  .cross-grid { grid-template-columns: repeat(2, 1fr); }

  /* 縦積みでは横方向グラデーションだと下側が読みにくいので上下方向へ */
  .cat-hero.has-img::before {
    background: linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.82) 100%);
    background: linear-gradient(180deg,
      color-mix(in srgb, var(--hero-bg) calc(var(--hero-overlay, 62%) * .8), transparent) 0%,
      color-mix(in srgb, var(--hero-bg) 92%, transparent) 100%);
  }

  /* ヒーローは縦積みにして統計を下へ */
  .cat-hero-inner.has-stats { grid-template-columns: 1fr; gap: 26px; }
  .cat-hero-stats { max-width: 520px; }
  .cat-layout { grid-template-columns: minmax(0, 1fr) 272px; gap: 28px; }
}

@media (max-width: 768px) {
  .seo-text-block { padding: 22px 18px; margin-top: 26px; }
  .seo-text-block h2 { font-size: 17px; }

  .cross-cat-inner { padding: 34px 16px 40px; }
  .cross-cat-head h2 { font-size: 18px; }
  .cross-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .cross-title { font-size: 12px; }

  .cat-hero-inner { padding: 34px 20px 38px; }
  .cat-hero-title { font-size: 24px; }
  .cat-hero-desc  { font-size: 13.5px; margin-bottom: 20px; }

  /* FV 右の統計（4枠）は SP では出さない。
     2×2 のグリッドで 200px あり、SP の FV 510px の約4割を占めていたため。
     PC はそのまま。枠を全部空にしたときは PHP 側で .has-stats 自体が付かない */
  .cat-hero-stats { display: none; }
  .cat-hero-inner.has-stats { gap: 0; }

  /* FV のタグは SP では1行・横スクロールにする（折り返すと FV が縦に伸びるため）
     - 左右を .cat-hero-inner の padding（20px）ぶん画面端まで広げる。端でタグが切れて見えることで
       横にスクロールできると分かる。.cat-hero が overflow:hidden なのでページは横に伸びない
     - 右端の余白は padding-right ではなく ::after で作る
       （flex のスクロールコンテナでは padding-right がスクロール範囲に含まれないブラウザがあるため） */
  .cat-hero-tags {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    margin-inline: -20px;
    padding: 2px 0 2px 20px;   /* 上下 2px はフォーカスリングが切れないように */
    scroll-padding-inline: 20px;
  }
  .cat-hero-tags::-webkit-scrollbar { display: none; }
  .cat-hero-tags::after { content: ''; flex: 0 0 12px; }   /* gap 8px + 12px = 右端 20px */
  .cat-hero-tags a.cat-tag { flex: 0 0 auto; white-space: nowrap; }

  /* サイドバーは本文の下へ回す */
  .cat-layout {
    grid-template-columns: 1fr;
    gap: 34px;
    padding-top: 20px;
  }

  /* ── サイドバーのカテゴリーリンクと「人気記事ランキング」を TOP の SP と同じ見た目にする ──
     対象：カテゴリーページとランキングページ。どちらもサイドバーは inc/sidebar-category.php
     （.cat-layout の直下）で、category.css を読むのもこの2ページだけ。
     基準は TOP（inc/top-sp.php / top.css の .section-mark・.cat-shortcut・.ranking）。
     top.css はこの2ページでは読まれないので、同じ値をここに持つ。
     見た目だけの変更で、出す内容は変えない：
       カテゴリーページ … 表示中カテゴリの除外・このカテゴリの1〜5位
       ランキングページ … 全8カテゴリ・サイト全体の1〜5位
       共通 … 「もっと見る」なし・ラベルの文言・リンク先 */

  /* カード枠を外し、.cat-layout（このファイルの 2カラムレイアウト）の左右 padding 20px を
     打ち消して全幅にする。以降の左右余白は TOP の値（見出し 18px・タイル 14px・ランキング 18px）をそのまま使う */
  .cat-layout > .sidebar .widget-category,
  .cat-layout > .sidebar .widget-ranking {
    margin-inline: 5px;   /* = .cat-layout の padding-inline。変えたらここも合わせる */
    background: none;
    border: 1px solid var(--line);
    border-radius: 12px;
  }

  /* 見出し → TOP の .section-mark（英字の小見出し＋22px の見出し） */
  .cat-layout > .sidebar .widget-category .widget-header,
  .cat-layout > .sidebar .widget-ranking .widget-header {
    display: block;
    padding: 8px 18px 14px;   /* 上 8px ＋ サイドバーの gap 28px ＝ TOP の 36px */
    border-bottom: 1px solid var(--line);
    font-size: 22px;
    letter-spacing: .02em;
  }
  /* PC ではピンクの縦線に使っている ::before を、英字の小見出しに転用する */
  .cat-layout > .sidebar .widget-category .widget-header::before,
  .cat-layout > .sidebar .widget-ranking .widget-header::before {
    display: block;
    width: auto;
    height: auto;
    margin-bottom: 4px;
    background: none;
    border-radius: 0;
    font-size: 10px;
    letter-spacing: .28em;
    color: var(--brand-mid);
  }
  .cat-layout > .sidebar .widget-category .widget-header::before { content: 'BROWSE'; }
  .cat-layout > .sidebar .widget-ranking .widget-header::before  { content: 'RANKING'; }

  /* カテゴリーリンク → TOP の .cat-shortcut（英字ラベル付きのタイル・内側に白い細枠） */
  .cat-layout > .sidebar .widget-category .widget-body { padding: 0; }
  .cat-layout > .sidebar .widget-category .cat-links {
    margin: 28px 14px 15px;
    gap: 10px;
  }
  .cat-layout > .sidebar .widget-category .cat-link {
    position: relative;
    overflow: hidden;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0;
    min-height: 92px;
    padding: 18px 16px;
    font-size: 16px;
    letter-spacing: .04em;
  }
  .cat-layout > .sidebar .widget-category .cat-link::before {
    content: '';
    position: absolute;
    inset: 6px;
    border: 1px solid rgba(255,255,255,.28);
    pointer-events: none;
  }
  .cat-layout > .sidebar .widget-category .cat-link__en {
    display: block;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .26em;
    opacity: .9;
  }
  /* TOP のタイルは hover で動かない。タップ後に 2px ずれたまま残るのも防ぐ */
  .cat-layout > .sidebar .widget-category .cat-link:hover { transform: none; filter: none; }

  /* 人気記事ランキング → TOP の .ranking（大きい順位数字・16:9 画像・3行の見出し） */
  .cat-layout > .sidebar .widget-ranking .widget-header {
    padding-bottom: 10px;   /* widget-ranking.php の .widget-body の inline padding-top:4px と合わせて TOP の 14px */
  }
  .cat-layout > .sidebar .widget-ranking .popular-item {
    display: grid;
    grid-template-columns: 44px 0.8fr 1fr;
    gap: 12px;
    align-items: center;
    padding: 14px 0;
  }
  .cat-layout > .sidebar .widget-ranking .popular-rank {
    min-width: 0;
    padding-top: 0;
    font-size: 28px;
    font-weight: 700;
    font-style: normal;
    letter-spacing: -.02em;
    text-align: center;
    color: var(--text-light);
  }
  /* 順位の色も TOP に合わせる（PC の .gold / .silver / .bronze より優先させる） */
  .cat-layout > .sidebar .widget-ranking .popular-item:nth-child(1) .popular-rank { color: var(--brand-pink); }
  /* 2位だけ !important：2位に付く .silver が common.css:738 の本文用ユーティリティ
     .silver{ color:#c0c0c0 !important } と名前が衝突しており、!important でないと上書きできない */
  .cat-layout > .sidebar .widget-ranking .popular-item:nth-child(2) .popular-rank { color: #d9944b !important; }
  .cat-layout > .sidebar .widget-ranking .popular-item:nth-child(3) .popular-rank { color: var(--cat-trip); }
  .cat-layout > .sidebar .widget-ranking .popular-img {
    width: auto;   /* PC の固定幅 96px を外し、グリッドの列幅に合わせる */
    border-radius: 2px;
  }
  .cat-layout > .sidebar .widget-ranking .popular-title {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.55;
    letter-spacing: .02em;
    color: var(--brand-dark);
  }
  /* データが無いときの1行メッセージは3列ぶんに広げる */
  .cat-layout > .sidebar .widget-ranking .popular-item > .popular-title:only-child { grid-column: 1 / -1; }

  /* ── 記事一覧のタイトル・カテゴリー・日付（SP）→ TOP の SP 新着（.mag-row__title / __cat / __date）──
     PC は上の @media (min-width: 769px)。カテゴリーの色（--cat-color）の対応表はその手前の共通部分。 */
  .cat-layout .content .news_box dl dd h3,
  .cat-layout .content .news_box dl dd h3 a {
    font-family: arial, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--brand-dark);
  }
  .cat-layout .content .news_box dl dd h3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  /* カテゴリー：丸（::before）＋名前をカテゴリー色で */
  .cat-layout .content .news_box .cat {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: arial, sans-serif;
    font-size: 9px;
    letter-spacing: .22em;
    font-weight: 800;
    color: var(--cat-color, var(--brand-mid));
  }
  .cat-layout .content .news_box .cat::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    color: inherit;   /* layout.css の .cat::before { color:#F52688 } を外す（外さないと currentColor がピンクになる） */
    background: currentColor;
  }
  /* 日付 → .mag-row__date。TOP と同じく1行を使う（長いカテゴリー名と横並びで折れることもない） */
  .cat-layout .content .news_box .date {
    display: block;
    margin: 5px 0 0;
    font-family: arial, sans-serif;
    font-size: 10px;
    letter-spacing: .14em;
    color: var(--text-muted);
  }

  /* 子カテゴリのナビ → SP は1行・横スクロール（devlop_category/yomifami_kurashi_category_sp.html）
     左右は .cat-layout の padding 20px を打ち消して画面端まで流す。右端の余白は padding-right ではなく
     ::after で作る（flex のスクロールコンテナでは padding-right がスクロール範囲に入らないブラウザがあるため） */
  .cat-layout .content ul.category-children {
    flex-wrap: nowrap;
    gap: 7px;
    overflow-x: auto;
    scrollbar-width: none;
    margin: 0 -20px 24px;
    padding: 0 0 2px 20px;
  }
  .cat-layout .content ul.category-children::-webkit-scrollbar { display: none; }
  .cat-layout .content ul.category-children::after { content: ''; flex: 0 0 13px; }   /* gap 7px + 13px = 右端 20px */
  .cat-layout .content ul.category-children > li { flex: 0 0 auto; }
  .cat-layout .content a.sub_link {
    white-space: nowrap;
    letter-spacing: .03em;
  }
}

/* ── サイドバー最下段「このページについて」 ─────────────────
   設定ページ（サイドバータブ）で ON にし、本文を入れたときだけ出る枠。
   枠そのものは sidebar.css の .yf-widget / .widget-header / .widget-body を使う。 */
.widget-about .widget-body {
  font-size: 13px;
  line-height: 1.85;
  color: var(--brand-mid);
}
.widget-about .widget-body > *:first-child { margin-top: 0; }
.widget-about .widget-body > *:last-child  { margin-bottom: 0; }
.widget-about .widget-body p { margin: 0 0 10px; }
.widget-about .widget-body a {
  color: var(--brand-pink);
  text-decoration: underline;
}
/* 見出しは紹介文ブロック（.seo-text-block h3/h4）と同じ「色バー＋カテゴリー色」 */
.widget-about .widget-body h2,
.widget-about .widget-body h3,
.widget-about .widget-body h4,
.widget-about .widget-body h5,
.widget-about .widget-body h6 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 800;
  line-height: 1.6;
  letter-spacing: .02em;
  color: var(--cat-current, var(--brand-dark));
  margin: 14px 0 6px;
}
.widget-about .widget-body h2::before,
.widget-about .widget-body h3::before,
.widget-about .widget-body h4::before,
.widget-about .widget-body h5::before,
.widget-about .widget-body h6::before {
  content: '';
  flex: 0 0 auto;
  width: 3px;
  height: 13px;
  border-radius: 2px;
  background: var(--cat-current, var(--brand-pink));
}

/* ── リスト ────────────────────────────────
   箇条書きの「・」と番号付きリストの数字を**表示中カテゴリーの色**にする。
   ブラウザ既定のマーカー（::marker）は対応にばらつきがあるので、
   list-style を外して ::before で自前に描く。番号は counter で出す。
   色は main[data-cat] が持つ --cat-current（common.css の --cat-* を指す）。
   カテゴリー以外のページで使われた場合はピンクに落ちる。 */
.widget-about .widget-body ul,
.widget-about .widget-body ol {
  margin: 0 0 10px;
  padding-left: 0;
  list-style: none;
}
.widget-about .widget-body li {
  position: relative;
  margin-bottom: 5px;
  padding-left: 1.2em;
}
.widget-about .widget-body li:last-child { margin-bottom: 0; }

/* 箇条書き：カテゴリー色の丸 */
.widget-about .widget-body ul > li::before {
  content: '';
  position: absolute;
  left: .2em;
  top: .62em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--cat-current, var(--brand-pink));
}

/* 番号付き：カテゴリー色の数字 */
.widget-about .widget-body ol { counter-reset: yf-about-li; }
.widget-about .widget-body ol > li { padding-left: 1.6em; }
.widget-about .widget-body ol > li::before {
  counter-increment: yf-about-li;
  content: counter(yf-about-li) '.';
  position: absolute;
  left: 0;
  top: 0;
  font-family: arial, sans-serif;
  font-weight: 700;
  color: var(--cat-current, var(--brand-pink));
}

/* 入れ子のリスト */
.widget-about .widget-body li > ul,
.widget-about .widget-body li > ol { margin: 5px 0 0; }

/* マーカー（蛍光ペン）もカテゴリー色で薄く敷く。
   color-mix 非対応ブラウザ向けに、先に淡いクリームのフォールバックを置く
   （.cat-hero.has-img::before と同じ書き方） */
.widget-about .widget-body mark {
  background: rgba(233, 226, 208, .7);
  background: color-mix(in srgb, var(--cat-current, var(--brand-pink)) 22%, transparent);
  color: inherit;
  padding: 0 2px;
  border-radius: 2px;
}

/* PICKUP 特集バナー（.pickup-*）は common/css/pickup.css へ移した（TOP と共用のため） */