/* =========================================================
   blog.css — お知らせ・ブログ Display Runtime v1（一覧＋詳細 共通1枚）
   正本: pt08-blog-archive.html（URL /blog/）/ pt08-blog-single.html（URL /blog/post/）
   スコープ: 一覧＝.blog / 詳細＝.blog-single 配下へ全セレクタを限定（global／他 Runtime 波及回避）。
   共通基盤（:root / body / .container / reset / .mock-flag）は common.css 既存のため取り込まない。
   共有部（両ページで完全一致する値）はカンマで両スコープへ1回。値が両ページで異なる共有 class
   （.section / .sec-head / .sec-head h2 / .acard__body / .acard h3 / .acard p / .acard .date）は、
   各ページの正本値を忠実再現するためスコープ別に分けて保持する（fidelity 優先）。
   RULE-01/03/04: 面・DOM・コピーを増減しない忠実 Runtime 化。
   ========================================================= */

/* ---- 共有：両ページ完全一致 ---- */
.blog a, .blog-single a { color: var(--blue-600); text-decoration: none; }
.blog .en-label, .blog-single .en-label { font-family: var(--font-en); font-weight: 700; color: var(--blue-500); letter-spacing: .1em; font-size: 14px; }
.blog .btn--white, .blog-single .btn--white { background: #fff; color: var(--navy-900); }
.blog .section--gray, .blog-single .section--gray { background: var(--gray-50); }

.blog .pill, .blog-single .pill { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-en); font-weight: 700; font-size: 12px; letter-spacing: .06em; color: #fff; background: var(--blue-600); border-radius: 999px; padding: 4px 12px; }
.blog .tag-tbc, .blog-single .tag-tbc { display: inline-block; background: #fff7e6; border: 1px solid #ffd98a; color: #8a6d00; font-size: 11px; padding: 1px 8px; border-radius: 999px; margin-left: 6px; }

/* acard（共有ブロック・完全一致部分） */
.blog .acard, .blog-single .acard { background: #fff; border: 1px solid var(--gray-200); border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform .18s var(--ease), box-shadow .18s var(--ease); display: flex; flex-direction: column; }
.blog .acard:hover, .blog-single .acard:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
/* F2: 画像なしカードのプレースホルダを TOP のフラットなカテゴリラベルへ統一（斜線ストライプ廃止・記事無関係画像は使わない）。画像ありカードは img が覆うため不変。 */
.blog .acard__thumb, .blog-single .acard__thumb { aspect-ratio: 16/10; background: var(--gray-100); display: flex; align-items: center; justify-content: center; color: var(--text-muted); font-weight: 700; font-size: 14px; letter-spacing: .08em; }
.blog .chip, .blog-single .chip { align-self: flex-start; font-family: var(--font-en); font-weight: 700; font-size: 11px; line-height: 1.4; letter-spacing: 0.04em; padding: 4px 10px; border-radius: 999px; } /* Chip Design System: 角丸pill・基本メトリクス統一 */
.blog .chip--news, .blog-single .chip--news { color: var(--blue-600); background: #e8f3fd; }
.blog .chip--tech, .blog-single .chip--tech { color: #0a7a5b; background: #e6f6ef; }
.blog .chip--field, .blog-single .chip--field { color: #8a5a00; background: #fdf3e3; }
.blog .chip--info, .blog-single .chip--info { color: var(--navy-800); background: var(--gray-100); }

/* grid3（共有） */
.blog .grid3, .blog-single .grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 900px) { .blog .grid3, .blog-single .grid3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .blog .grid3, .blog-single .grid3 { grid-template-columns: 1fr; } }

/* cta（共有） */
.blog .cta, .blog-single .cta { background: radial-gradient(ellipse at top right, rgba(12,127,217,.3), transparent 55%), var(--navy-900); color: #fff; border-radius: var(--radius-lg); padding: 48px; text-align: center; }
.blog .cta h2, .blog-single .cta h2 { font-size: 26px; font-weight: 700; margin-bottom: 8px; }
.blog .cta p, .blog-single .cta p { color: #cfe0f2; margin-bottom: 24px; }
.blog .cta__btns, .blog-single .cta__btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
@media (max-width: 560px) { .blog .cta__btns .btn, .blog-single .cta__btns .btn { width: 100%; } }

/* ---- 共有 class だが値が両ページで異なる → スコープ別（各正本を忠実再現） ---- */
.blog .section { padding: 64px 0; }
.blog-single .section { padding: 56px 0; }
.blog .sec-head { margin-bottom: 32px; }
.blog-single .sec-head { margin-bottom: 28px; }
.blog .sec-head h2 { font-size: 28px; font-weight: 700; line-height: 1.4; margin-top: 4px; }
.blog-single .sec-head h2 { font-size: 26px; font-weight: 700; line-height: 1.4; margin-top: 4px; }
.blog .acard__body { padding: 20px; display: flex; flex-direction: column; flex: 1; }
.blog-single .acard__body { padding: 18px; display: flex; flex-direction: column; flex: 1; }
.blog .acard h3 { font-size: 16px; color: var(--navy-900); line-height: 1.6; margin: 10px 0 8px; }
.blog-single .acard h3 { font-size: 15.5px; color: var(--navy-900); line-height: 1.6; margin: 10px 0 8px; }
.blog .acard p { color: var(--gray-700); font-size: 13.5px; flex: 1; }
.blog-single .acard p { color: var(--gray-700); font-size: 13px; flex: 1; }
.blog .acard .date { font-family: var(--font-en); color: var(--text-muted); font-size: 13px; letter-spacing: .04em; margin-top: 12px; }
.blog-single .acard .date { font-family: var(--font-en); color: var(--text-muted); font-size: 13px; margin-top: 10px; }

/* =========================================================
   一覧（archive）専用 — .blog
   ========================================================= */
.blog .narrow { max-width: 880px; }
/* archive hero — Hero Runtime 共通化（案C）: Blog専用 .blog .hero を撤去し、共通 .lhero（common.css）を使用。
   マークアップは <section class="lhero blog-hero"> へ変更済。共通値＝common.css .lhero（padding/H1/背景/::after/mobile media query）。
   .blog-hero は Blog固有差分用の予約フック（現時点で固有差分なし＝共通 .lhero と完全一致。CSS 追加なし）。 */
/* subscribe band */
.blog .subscribe { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16); border-radius: var(--radius-md); padding: 20px 22px; margin-top: 26px; display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.blog .subscribe .sub-t { font-weight: 700; color: #fff; font-size: 15px; }
.blog .subscribe .sub-d { color: #b9c9de; font-size: 13px; }
.blog .subscribe .chans { display: flex; gap: 8px; flex-wrap: wrap; margin-left: auto; }
.blog .chan { font-size: 13px; font-weight: 700; color: #fff; background: rgba(12,127,217,.28); border: 1px solid rgba(94,178,245,.5); border-radius: 999px; padding: 6px 14px; }
.blog .chan.tbc { background: transparent; color: #cbd8ea; border-style: dashed; }
/* category navigation */
.blog .filterbar { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.blog .cats { display: flex; gap: 8px; flex-wrap: wrap; }
.blog .cat { font-size: 14px; font-weight: 700; color: var(--navy-800); background: var(--gray-100); border: 1px solid var(--gray-200); border-radius: 999px; padding: 7px 16px; cursor: pointer; transition: all .18s var(--ease); }
.blog .cat:hover { border-color: var(--blue-500); color: var(--blue-600); }
.blog .cat:focus-visible { outline: 2px solid var(--blue-500); outline-offset: 2px; }
.blog .cat.is-active { background: var(--navy-800); color: #fff; border-color: var(--navy-800); }
.blog .search { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.blog .search input { font-family: var(--font-jp); font-size: 14px; border: 1px solid var(--gray-300); border-radius: var(--radius-sm); padding: 9px 14px; width: 220px; max-width: 46vw; }
.blog .tags { margin-top: 14px; display: flex; gap: 8px; flex-wrap: wrap; font-size: 13px; color: var(--text-muted); }
.blog .tags a { color: var(--gray-700); background: var(--gray-100); border-radius: 999px; padding: 3px 12px; }
.blog .tags a::before { content: "#"; color: var(--blue-500); font-weight: 700; }
/* featured */
.blog .featured { display: grid; grid-template-columns: 1.15fr 1fr; gap: 0; border: 1px solid var(--gray-200); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); background: #fff; }
@media (max-width: 820px) { .blog .featured { grid-template-columns: 1fr; } }
.blog .featured__thumb { aspect-ratio: 16/10; background: var(--navy-800) repeating-linear-gradient(45deg, transparent, transparent 14px, rgba(255,255,255,.03) 14px, rgba(255,255,255,.03) 28px); display: flex; align-items: center; justify-content: center; color: #9fb3cd; font-size: 13px; }
.blog .featured__body { padding: 34px; }
.blog .pill--pin { background: var(--navy-800); }
.blog .featured__body h3 { font-size: 24px; color: var(--navy-900); line-height: 1.5; margin: 14px 0 10px; }
.blog .featured__body p { color: var(--gray-700); font-size: 15px; }
.blog .meta-row { display: flex; gap: 12px; align-items: center; color: var(--text-muted); font-size: 13px; margin-top: 16px; font-family: var(--font-en); letter-spacing: .04em; }
/* pager */
.blog .pager { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 40px; font-family: var(--font-en); font-weight: 700; }
.blog .pager a, .blog .pager span { min-width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--gray-300); border-radius: var(--radius-sm); color: var(--navy-800); }
.blog .pager .is-current { background: var(--navy-800); color: #fff; border-color: var(--navy-800); }
.blog .tbc-note { font-size: 12px; color: var(--text-muted); margin-top: 14px; }

/* =========================================================
   詳細（single）専用 — .blog-single
   ========================================================= */
/* article header */
.blog-single .arthead { background: linear-gradient(180deg, var(--navy-900), var(--navy-700)); color: #fff; padding: 56px 0 48px; position: relative; overflow: hidden; }
.blog-single .arthead::after { content: ""; position: absolute; top: -30%; right: -8%; width: 55%; height: 120%; background: radial-gradient(ellipse, rgba(12,127,217,.32), transparent 60%); }
.blog-single .arthead .container { position: relative; z-index: 1; max-width: 880px; }
.blog-single .arthead h1 { font-size: 34px; font-weight: 700; line-height: 1.55; margin: 16px 0 14px; }
.blog-single .artmeta { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; color: #cfe0f2; font-size: 13px; font-family: var(--font-en); letter-spacing: .04em; }
.blog-single .byline { display: flex; gap: 10px; align-items: center; margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.16); }
.blog-single .byline .avt { width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.14); display: flex; align-items: center; justify-content: center; font-family: var(--font-en); font-weight: 800; color: #fff; font-size: 15px; }
.blog-single .byline .who { font-size: 13px; color: #dbe8f7; font-family: var(--font-jp); line-height: 1.6; }
.blog-single .byline .who b { color: #fff; font-weight: 700; }
/* layout */
.blog-single .wrap { display: grid; grid-template-columns: 1fr 300px; gap: 44px; padding: 56px 0; }
@media (max-width: 960px) { .blog-single .wrap { grid-template-columns: 1fr; } }
.blog-single .prose { max-width: 100%; font-size: 16px; }
.blog-single .prose .lede { font-size: 18px; color: var(--navy-800); font-weight: 500; line-height: 2; margin-bottom: 8px; }
.blog-single .prose h2 { font-size: 24px; color: var(--navy-900); border-left: 4px solid var(--blue-500); padding-left: 14px; margin: 40px 0 16px; line-height: 1.5; }
.blog-single .prose h3 { font-size: 19px; color: var(--navy-800); margin: 28px 0 10px; }
.blog-single .prose p { color: var(--text); margin-bottom: 16px; }
.blog-single .prose ul { margin: 0 0 16px 1.2em; color: var(--text); }
.blog-single .prose li { margin-bottom: 8px; }
.blog-single .prose .figure { aspect-ratio: 16/9; background: var(--gray-200) repeating-linear-gradient(45deg, transparent, transparent 14px, rgba(0,0,0,.02) 14px, rgba(0,0,0,.02) 28px); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; color: var(--gray-500); font-size: 13px; margin: 22px 0; }
.blog-single .callout { background: var(--gray-50); border: 1px solid var(--gray-200); border-left: 4px solid var(--navy-700); border-radius: var(--radius-md); padding: 20px 22px; margin: 24px 0; }
.blog-single .callout b { color: var(--navy-900); }
.blog-single .tbc { color: var(--text-muted); font-size: 14px; }
.blog-single .samplebar { background: #fffbe6; border: 1px solid #ffe28a; color: #8a6d00; font-size: 12.5px; border-radius: var(--radius-md); padding: 12px 16px; margin-bottom: 28px; }
/* inline product link (LLMO: article -> product) */
.blog-single .prodlink { display: flex; gap: 16px; align-items: center; background: #fff; border: 1px solid var(--gray-200); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); padding: 18px; margin: 26px 0; }
.blog-single .prodlink .ico { width: 56px; height: 56px; border-radius: var(--radius-sm); background: var(--navy-800); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--font-en); font-weight: 800; font-size: 12px; text-align: center; line-height: 1.2; flex: 0 0 auto; }
.blog-single .prodlink .t { font-weight: 700; color: var(--navy-900); }
.blog-single .prodlink .d { color: var(--gray-700); font-size: 13.5px; }
.blog-single .prodlink .go { margin-left: auto; white-space: nowrap; }
@media (max-width: 560px) { .blog-single .prodlink { flex-wrap: wrap; } .blog-single .prodlink .go { margin-left: 0; width: 100%; } }
/* sidebar */
.blog-single .side { position: sticky; top: 100px; align-self: start; display: flex; flex-direction: column; gap: 22px; }
@media (max-width: 960px) { .blog-single .side { position: static; } }
.blog-single .side__box { border: 1px solid var(--gray-200); border-radius: var(--radius-md); background: #fff; box-shadow: var(--shadow-sm); padding: 20px; }
.blog-single .side__box h4 { font-size: 13px; font-family: var(--font-en); letter-spacing: .08em; color: var(--blue-600); margin-bottom: 12px; }
.blog-single .toc a { display: block; color: var(--gray-700); font-size: 14px; padding: 6px 0; border-bottom: 1px dashed var(--gray-200); }
.blog-single .toc a:hover { color: var(--blue-600); }
.blog-single .side__cta { background: var(--navy-900); color: #fff; border: none; }
.blog-single .side__cta h4 { color: var(--blue-400); }
.blog-single .side__cta p { color: #cfe0f2; font-size: 13.5px; margin-bottom: 14px; }
.blog-single .side__cta .btn { width: 100%; margin-bottom: 8px; }
.blog-single .chips-in { display: flex; gap: 6px; flex-wrap: wrap; font-size: 12px; }
.blog-single .chips-in a { background: var(--gray-100); color: var(--gray-700); border-radius: 999px; padding: 3px 10px; }
.blog-single .chips-in a::before { content: "#"; color: var(--blue-500); font-weight: 700; }
/* product line (article -> product 導線 block) */
.blog-single .grid3b { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 820px) { .blog-single .grid3b { grid-template-columns: 1fr; } }
.blog-single .pcard { background: #fff; border: 1px solid var(--gray-200); border-radius: var(--radius-md); padding: 22px; box-shadow: var(--shadow-sm); transition: transform .18s var(--ease), box-shadow .18s var(--ease); }
.blog-single .pcard:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.blog-single .pcard h3 { font-size: 16px; color: var(--navy-900); margin-bottom: 6px; }
.blog-single .pcard p { color: var(--gray-700); font-size: 13.5px; }
.blog-single .pcard .go { font-family: var(--font-en); font-weight: 700; color: var(--blue-600); font-size: 14px; margin-top: 10px; display: inline-block; }
/* faq */
.blog-single .faq__item { background: #fff; border: 1px solid var(--gray-200); border-radius: var(--radius-md); padding: 20px 24px; margin-bottom: 12px; box-shadow: var(--shadow-sm); }
.blog-single .faq__item h3 { font-size: 16px; color: var(--navy-900); margin-bottom: 6px; }
.blog-single .faq__item h3::before { content: "Q. "; font-family: var(--font-en); color: var(--blue-500); font-weight: 800; }
.blog-single .faq__item p { color: var(--gray-700); font-size: 15px; }

/* ============================================================
   P3 Blog Dynamic Runtime — 実データ描画のための最小追記
   （.blog / .blog-single スコープ限定・common 非波及）
   ============================================================ */
/* カードサムネに実画像（本文先頭画像）を敷く（縦横比を 16:10 に固定して高さを揃える） */
.blog .acard__thumb,
.blog-single .acard__thumb { position: relative; aspect-ratio: 16 / 10; height: auto; overflow: hidden; }
.blog .acard__thumb img,
.blog-single .acard__thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
/* .blog（一覧/カテゴリ）側の acard 本文（.blog-single と同等） */
.blog .acard__body { padding: 18px; display: flex; flex-direction: column; flex: 1; }
.blog .acard h3 { font-size: 15.5px; color: var(--navy-900); line-height: 1.6; margin: 10px 0 8px; }
.blog .acard p { color: var(--gray-700); font-size: 13px; flex: 1; }
.blog .acard .date { font-family: var(--font-en); color: var(--text-muted); font-size: 13px; margin-top: 10px; }
/* フィルタ導線をリンク化（<a> でも見た目維持） */
.blog .filterbar .cat, .blog-single .filterbar .cat { cursor: pointer; }
.blog .filterbar .cat.is-active { color: #fff; background: var(--navy-800); border-color: var(--navy-800); }
/* 本文（migrated the_content）の可読性・レスポンシブ画像 */
/* F3: 本文画像の左寄せ・不自然な右余白を解消（中央配置）。max-width:100% で過剰拡大しない・height:auto で比率維持・本文HTML/画像は不変。 */
.blog-single .prose img { max-width: 100%; height: auto; border-radius: var(--radius-md); margin: 18px auto; display: block; }
.blog-single .prose a { color: var(--blue-600); text-decoration: underline; }
.blog-single .prose p { line-height: 1.95; }
.blog-single .prose { line-height: 1.9; word-break: break-word; }
/* 旧投稿本文が <pre>（moz-quote-pre 等）でラップされていても折返し・可読化（本文は改変せず表示のみ整える） */
.blog-single .prose pre {
	white-space: pre-wrap;
	overflow-wrap: anywhere;
	word-break: break-word;
	font-family: var(--font-jp);
	font-size: 16px;
	/* F4: メール貼付 pre の縦リズム改善（原文の空行/改行/本文は不変・pre-wrap/横スクロール0 維持）。 */
	line-height: 1.55;
	background: none;
	border: 0;
	padding: 0;
	margin: 0 0 10px;
	color: var(--text);
}

/* ---- 標準投稿 single: Editorial レイアウト（白背景・中央 760px・左揃え） ---- */
.blog-single--article .article { background: #fff; padding: 8px 0 80px; }
.blog-single--article .article__inner { max-width: 760px; margin: 0 auto; padding: 0 20px; }
.blog-single--article .article__meta { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin: 22px 0 14px; }
.blog-single--article .article__date { font-family: var(--font-en); color: var(--text-muted); font-size: 14px; letter-spacing: .04em; }
.blog-single--article .article__title { font-size: 30px; font-weight: 700; line-height: 1.55; color: var(--navy-900); text-align: left; margin: 0 0 26px; }
.blog-single--article .article__eyecatch { margin: 0 0 28px; }
.blog-single--article .article__eyecatch img { width: 100%; height: auto; border-radius: var(--radius-md); display: block; }
.blog-single--article .prose { text-align: left; }
@media (max-width: 600px) { .blog-single--article .article__title { font-size: 24px; } }

/* ============================================================
 * Card Design Unification — /blog/・/category/ の .acard を TOP `.topic-item` を基準デザインへ統一
 * 透明・境界/影/角丸なし／画像 4:3／画像なし=フラットラベル／meta[日付+カテゴリ]→タイトル／抜粋なし／hover=画像opacity。
 * .blog スコープ限定・common.css 非波及。specificity は .blog .acard __* で旧 .acard h3/p/date に勝たせる。
 * ============================================================ */
.blog .acard { background: transparent; border: 0; border-radius: 0; box-shadow: none; color: var(--navy-900); display: block; transition: none; }
.blog .acard:hover { transform: none; box-shadow: none; }
.blog .acard .acard__thumb { aspect-ratio: 4 / 3; background: var(--gray-100); overflow: hidden; border-radius: 0; position: relative; }
.blog .acard .acard__thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity .4s var(--ease); }
.blog .acard:hover .acard__thumb img { opacity: .86; }
.blog .acard .acard__thumb--label { display: flex; align-items: center; justify-content: center; }
.blog .acard .acard__thumb-text { font-weight: 700; font-size: .9rem; letter-spacing: .08em; color: var(--navy-900); opacity: .5; }
.blog .acard .acard__body { padding: 18px 2px 0; }
.blog .acard .acard__meta { display: flex; gap: 10px; align-items: center; margin: 0 0 10px; }
.blog .acard .acard__date { font-family: var(--font-en); font-weight: 600; font-size: 14px; color: var(--blue-600); letter-spacing: .04em; }
.blog .acard .acard__tag { font-size: 11px; font-weight: 700; line-height: 1.4; letter-spacing: 0.04em; color: var(--blue-600); background: transparent; border: 1px solid var(--gray-200); border-radius: 999px; padding: 4px 10px; } /* Chip Design System: 記事カードCategory を角丸pillの属性Chipへ統一 */
.blog .acard h3.acard__title { font-family: var(--font-jp); font-weight: 600; font-size: 17px; line-height: 1.7; color: var(--navy-900); margin: 0; }

/* ============================================================
 * Card Rhythm Refinement — 境界線ではなく「余白で区切る」Editorial Rhythm（TOP と同思想）へ。
 * 前回の border / border-radius を撤去し、TOP と同じく 境界なし・shadow なし・radius なしへ戻す。
 * 代わりに gap と間隔だけで一覧性を最小改善。画像比率/画像/ラベル/日付/カテゴリ/タイトル/hover/構造/抜粋は不変。
 * .blog スコープ限定・common 非波及。
 * ============================================================ */
.blog .acard { border: 0; border-radius: 0; box-shadow: none; }         /* 前回の境界/角丸を撤去（TOP と同じ無境界フラット） */
.blog .grid3 { gap: 36px 28px; }                                        /* カード同士: gap 22 → 行36 / 列28（余白で区切る） */
.blog .acard .acard__body { padding: 22px 2px 6px; }                    /* 画像↔meta 18→22 / カード下余白 0→6 */
.blog .acard .acard__meta { display: flex; gap: 10px; align-items: center; margin: 0 0 12px; } /* meta↔title 10→12（他は不変） */

/* ============================================================
 * Spacing & Category Label Unification v1
 * ============================================================ */
/* Task 1: フィルター群（.filterbar）と ARTICLES 見出し（.sec-head）の間にセクション余白を付与。
 *   隣接兄弟セレクタで「filterbar 直後の sec-head」だけに適用＝二重付与なし・単一適用。
 *   フィルター/ARTICLES 見出しのデザインと sec-head→grid（margin-bottom:32px）は不変。
 *   /blog/・/category/topics/・/category/blog/ 共通（すべて .blog スコープ）。 */
.blog .filterbar + .sec-head { margin-top: 48px; }
@media (max-width: 700px) { .blog .filterbar + .sec-head { margin-top: 36px; } }

/* Task 2: 記事詳細（single）のカテゴリラベルを一覧カードの .acard__tag デザイン言語へ統一。
 *   ピル（radius 999・カテゴリ別カラー背景・font-en/700）→ 角丸なし・透明背景・1px gray-200 枠・
 *   blue-600・weight 600・letter-spacing .08em の card 言語へ。詳細用に「自然な詳細版」として
 *   font-size/padding のみ card（11px / 2px 8px）よりわずかに大きく（必要以上に大きくしない）。
 *   .article__meta .chip に限定＝カード側 .acard__tag は不変・表示カテゴリ名/取得ロジックも不変。
 *   specificity 0,3,0 が .blog-single .chip--info / --field（0,2,0）に勝ちカテゴリ差の色/背景も統一。 */
.blog-single--article .article__meta .chip {
	font-family: var(--font-jp);
	font-weight: 700;
	font-size: 11px;
	letter-spacing: 0.04em;
	line-height: 1.4;
	color: var(--blue-600);
	background: transparent;
	border: 1px solid var(--gray-200);
	border-radius: 999px; /* Chip Design System: 記事Category を角丸pillの属性Chipへ統一（カードと同一言語） */
	padding: 4px 10px;
}