/* =====================================================================
   TechSync Lab Notes — blog design (2026-09)
   設計図のノートに、ちょっとした遊び。読みやすさが最優先、遊びは脇役。
   body.ts-editorial 配下だけに効く。旧 style.css / editorial.css の装飾を無効化する。
   ===================================================================== */
/* 見出しと英字ラベルだけWebフォント。本文はOS標準の日本語フォント（表示を速く保つため）。 */
@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@500;700&family=Zen+Maru+Gothic:wght@700&display=swap");

body.ts-editorial {
  --ink: #14213d;
  --ink-2: #33415c;
  --muted: #66728a;
  --ground: #f4f6fb;
  --paper: #ffffff;
  --line: #dde3ee;
  --line-2: #c9d2e3;
  --grid: rgba(47, 91, 255, .055);
  --cobalt: #2f5bff;
  --cobalt-700: #1d3fd6;
  --cobalt-50: #eef2ff;
  --cobalt-100: #dfe6ff;
  --tang: #ff6b3d;
  --tang-50: #fff0e9;
  --mint: #0fae84;
  --mint-50: #e6f7f0;
  --butter: #fff4c7;
  --tape: #ffd76a;
  --r: 16px;
  --r-sm: 10px;
  --shadow: 0 1px 2px rgba(20, 33, 61, .05), 0 10px 30px -18px rgba(20, 33, 61, .28);
  --f-body: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "BIZ UDPGothic", "Yu Gothic UI", Meiryo, system-ui, sans-serif;
  --f-head: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Hiragino Sans", "BIZ UDPGothic", sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --col: 44rem;

  margin: 0;
  background-color: var(--ground);
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 24px 24px;
  background-attachment: fixed;
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.95;
  letter-spacing: .02em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "palt" 0;
}
body.ts-editorial *, body.ts-editorial *::before, body.ts-editorial *::after { box-sizing: border-box; }

/* ---------- 旧装飾を止める ---------- */
body.ts-editorial #bgCanvas, body.ts-editorial .bg-gradient, body.ts-editorial .line-numbers,
body.ts-editorial .article-terminal-header, body.ts-editorial .status-bar, body.ts-editorial .xp,
body.ts-editorial .lab-windowbar, body.ts-editorial .lab-playground, body.ts-editorial .lab-productbar,
body.ts-editorial .lab-faq-banner, body.ts-editorial .lab-next-label, body.ts-editorial .lab-readout,
body.ts-editorial .blog-idx-bar .dot, body.ts-editorial .blog-hero-prompt { display: none !important; }
body.ts-editorial .fade-in { opacity: 1 !important; transform: none !important; }

/* ---------- 基本 ---------- */
body.ts-editorial a { color: var(--cobalt-700); text-underline-offset: .22em; text-decoration-thickness: 1.5px; }
body.ts-editorial a:hover { color: var(--tang); }
body.ts-editorial :focus-visible { outline: 3px solid var(--tang); outline-offset: 3px; border-radius: 6px; }
body.ts-editorial img { max-width: 100%; height: auto; }
body.ts-editorial .ts-skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--ink); color: #fff; padding: 8px 14px; border-radius: 8px; }
body.ts-editorial .ts-skip:focus { left: 12px; }

/* ---------- ヘッダー ---------- */
body.ts-editorial > header {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255, 255, 255, .9);
  backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--line);
}
body.ts-editorial > header > nav, body.ts-editorial > header > div {
  max-width: 1180px; margin: 0 auto; padding: 0 22px; height: 62px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
body.ts-editorial .logo, body.ts-editorial .rr-guide-brand, body.ts-editorial > header .brand {
  font-family: var(--f-head); font-weight: 700; font-size: 22px; letter-spacing: .01em;
  color: var(--ink); text-decoration: none; display: inline-flex; align-items: center; gap: 2px;
}
body.ts-editorial .logo::after, body.ts-editorial .rr-guide-brand::after, body.ts-editorial > header .brand::after {
  content: ""; width: 9px; height: 3px; margin-left: 4px; margin-top: 12px;
  background: var(--tang); border-radius: 2px; animation: j-caret 1.1s steps(1) infinite;
}
@keyframes j-caret { 50% { opacity: 0; } }
body.ts-editorial .logo:hover { color: var(--ink); }
body.ts-editorial > header > div > nav { display: flex; gap: 6px; flex-wrap: nowrap; }
body.ts-editorial > header > div > nav a { display: inline-block; white-space: nowrap; padding: 6px 14px; border-radius: 999px; text-decoration: none; font-size: 14px; font-weight: 700; color: var(--ink-2); line-height: 1.6; }
body.ts-editorial > header > div > nav a:hover { background: var(--cobalt-50); color: var(--cobalt-700); }
body.ts-editorial .nav-links { display: flex; gap: 6px; list-style: none; margin: 0; padding: 0; }
body.ts-editorial .nav-links a {
  display: inline-block; white-space: nowrap; padding: 6px 14px; border-radius: 999px; text-decoration: none;
  font-size: 14px; font-weight: 700; color: var(--ink-2); border: 1px solid transparent; line-height: 1.6;
}
body.ts-editorial .nav-links a:hover, body.ts-editorial .nav-links a.active {
  background: var(--cobalt-50); color: var(--cobalt-700); border-color: var(--cobalt-100);
}
body.ts-editorial .nav-links a::before, body.ts-editorial .nav-links a::after { content: none; }
body.ts-editorial .scroll-progress {
  position: fixed; left: 0; top: 0; z-index: 60; height: 3px; width: 0; pointer-events: none;
  background: linear-gradient(90deg, var(--cobalt), var(--tang)); border-radius: 0 3px 3px 0;
}

/* ---------- 記事の骨組み ---------- */
body.ts-editorial main.article-container, body.ts-editorial main#main-content:not(.blog-index-container) { max-width: 1180px; margin: 0 auto; padding: 22px 22px 80px; }
body.ts-editorial .breadcrumb, body.ts-editorial .rr-guide-crumbs {
  font-family: var(--f-mono); font-size: 12.5px; color: var(--muted); letter-spacing: .03em;
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 4px 0 18px;
}
body.ts-editorial .breadcrumb a, body.ts-editorial .rr-guide-crumbs a { color: var(--muted); text-decoration: none; }
body.ts-editorial .breadcrumb a:hover { color: var(--cobalt); }
body.ts-editorial .breadcrumb > span { color: var(--line-2); }

body.ts-editorial main > article {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; align-items: start;
}
@media (min-width: 1100px) {
  body.ts-editorial main > article { grid-template-columns: minmax(0, 1fr) 280px; column-gap: 30px; }
  body.ts-editorial main > article > .article-header { grid-column: 1 / -1; }
  body.ts-editorial main > article > .article-body { grid-column: 1; grid-row: 2; }
  body.ts-editorial main > article > .lab-sidebar { grid-column: 2; grid-row: 2; position: sticky; top: 84px; }
}

/* ---------- 表題欄（記事の頭） ---------- */
body.ts-editorial .article-header {
  position: relative; overflow: hidden;
  background: var(--paper); border: 1px solid var(--line); border-radius: 22px;
  padding: 38px 40px 34px; box-shadow: var(--shadow);
}
body.ts-editorial .article-header::before {           /* 定規の目盛り */
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 10px;
  background:
    repeating-linear-gradient(90deg, var(--line-2) 0 1px, transparent 1px 12px),
    repeating-linear-gradient(90deg, var(--cobalt) 0 1.5px, transparent 1.5px 60px);
  background-size: auto 6px, auto 10px; background-repeat: repeat-x; opacity: .55;
}
body.ts-editorial .article-header::after {             /* 右上の小さな方眼 */
  content: ""; position: absolute; right: -40px; top: -40px; width: 260px; height: 260px; border-radius: 50%;
  background:
    radial-gradient(circle, rgba(47, 91, 255, .16) 1.4px, transparent 1.6px) 0 0 / 14px 14px;
  mask-image: radial-gradient(circle, #000 35%, transparent 70%);
  -webkit-mask-image: radial-gradient(circle, #000 35%, transparent 70%);
  pointer-events: none;
}
body.ts-editorial .lab-title-group { display: contents; }
body.ts-editorial .article-header > *:not(.j-hero-ping) { position: relative; z-index: 1; }
body.ts-editorial .rr-guide-meta { font-family: var(--f-mono); font-size: 12.5px; color: var(--muted); margin: 14px 0 0; letter-spacing: .02em; }
body.ts-editorial .article-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0 0 16px;
  font-family: var(--f-mono); font-size: 12.5px; color: var(--muted); letter-spacing: .02em;
}
body.ts-editorial .article-tag {
  font-family: var(--f-body); font-weight: 700; font-size: 12.5px; letter-spacing: .03em;
  color: var(--cobalt-700); background: var(--cobalt-50); border: 1px solid var(--cobalt-100);
  padding: 2px 11px; border-radius: 999px; text-decoration: none; line-height: 1.7;
}
body.ts-editorial .article-date::before { content: "PUB "; color: var(--line-2); }
body.ts-editorial .article-updated { color: var(--mint); }
body.ts-editorial .reading-badge {
  padding: 2px 10px; border-radius: 999px; background: var(--ground); border: 1px dashed var(--line-2);
}
body.ts-editorial h1, body.ts-editorial .article-title {
  font-family: var(--f-head); font-weight: 700; color: var(--ink);
  font-size: clamp(27px, 3.6vw, 40px); line-height: 1.42; letter-spacing: .01em;
  margin: 0; max-width: 30em; word-break: auto-phrase; text-wrap: pretty;
}
body.ts-editorial .article-title small {
  display: block; margin-top: 10px; font-family: var(--f-body); font-weight: 700;
  font-size: clamp(15px, 1.8vw, 18px); color: var(--ink-2); letter-spacing: .02em; line-height: 1.6;
}
body.ts-editorial .article-title .accent, body.ts-editorial .headline-term {
  background: linear-gradient(transparent 62%, rgba(255, 107, 61, .28) 62%); color: inherit;
}
body.ts-editorial .article-header.j-has-ping { padding-right: 180px; }
body.ts-editorial .j-hero-ping { position: absolute; right: 26px; bottom: 14px; width: 138px; z-index: 1; }
body.ts-editorial .j-hero-ping svg { width: 100%; height: auto; display: block; }
@media (max-width: 760px) {
  body.ts-editorial .article-header { padding: 30px 22px 26px; border-radius: 18px; }
  body.ts-editorial .article-header.j-has-ping { padding-right: 22px; padding-top: 92px; }
  body.ts-editorial .j-hero-ping { width: 84px; right: auto; left: 18px; top: 16px; bottom: auto; }
}

/* ---------- 本文 ---------- */
body.ts-editorial .article-body, body.ts-editorial .editor-wrap { display: block; min-width: 0; }
body.ts-editorial .article-content {
  position: relative; background: var(--paper); border: 1px solid var(--line); border-radius: 22px;
  padding: 40px 48px 44px 64px; box-shadow: var(--shadow);
}
body.ts-editorial .article-content::before {          /* 左を通る配線 */
  content: ""; position: absolute; left: 30px; top: 44px; bottom: 44px; width: 0;
  border-left: 2px dashed var(--cobalt-100);
}
body.ts-editorial .article-content > * { max-width: var(--col); }
body.ts-editorial .article-content > :first-child { margin-top: 0; }
body.ts-editorial article p { margin: 0 0 1.15em; }
body.ts-editorial article p, body.ts-editorial article li { overflow-wrap: anywhere; }
body.ts-editorial article strong, body.ts-editorial article b {
  font-weight: 700; color: var(--ink);
  background: linear-gradient(transparent 64%, rgba(47, 91, 255, .14) 64%);
}
body.ts-editorial .article-content a:not(.cta-button) { font-weight: 700; }

/* 見出し：番号つきのノード */
body.ts-editorial article h2, body.ts-editorial .article-content h2 {
  position: relative; font-family: var(--f-head); font-weight: 700; color: var(--ink);
  font-size: clamp(22px, 2.5vw, 27px); line-height: 1.5; letter-spacing: .01em;
  margin: 2.6em 0 .9em; padding: 0; border: 0; word-break: auto-phrase; text-wrap: pretty;
}
body.ts-editorial article h2::before, body.ts-editorial article h2::after,
body.ts-editorial article h3::before, body.ts-editorial article h3::after { content: none; }
body.ts-editorial .article-content h2 .h2-text { display: inline; }
body.ts-editorial .lab-section-index {
  display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
  font-family: var(--f-mono); font-size: 12px; font-weight: 700; color: var(--cobalt);
  letter-spacing: .12em; line-height: 1;
}
body.ts-editorial .lab-section-index i {
  position: absolute; left: -45px; top: 2px; width: 28px; height: 28px; border-radius: 50%;
  background: var(--paper); border: 2px solid var(--cobalt); box-shadow: 0 0 0 4px var(--paper);
}
body.ts-editorial .lab-section-index i::after {
  content: ""; position: absolute; inset: 6px; border-radius: 50%; background: var(--tang);
}
body.ts-editorial article h3 {
  font-family: var(--f-head); font-weight: 700; font-size: 19.5px; line-height: 1.55; color: var(--ink);
  margin: 2em 0 .6em; padding-left: 16px; position: relative;
}
body.ts-editorial article h3::before {
  content: ""; position: absolute; left: 0; top: .42em; width: 8px; height: 8px; border-radius: 2px;
  background: var(--cobalt); transform: rotate(45deg);
}
body.ts-editorial article h4 { font-family: var(--f-head); font-size: 17px; margin: 1.6em 0 .4em; }

/* リスト */
body.ts-editorial article ul, body.ts-editorial article ol { margin: 0 0 1.3em; padding-left: 0; list-style: none; }
body.ts-editorial article ul > li, body.ts-editorial article ol > li { position: relative; padding-left: 1.7em; margin: .45em 0; }
body.ts-editorial article ul:not([class]) > li::before, body.ts-editorial .editorial-related-list > li::before {
  content: ""; position: absolute; left: .45em; top: .78em; width: 7px; height: 7px; border-radius: 50%;
  background: var(--cobalt); box-shadow: 0 0 0 3px var(--cobalt-50);
}
body.ts-editorial article ol:not([class]) { counter-reset: j-ol; }
body.ts-editorial article ol:not([class]) > li { counter-increment: j-ol; padding-left: 2.3em; }
body.ts-editorial article ol:not([class]) > li::before {
  content: counter(j-ol); position: absolute; left: 0; top: .28em;
  width: 1.55em; height: 1.55em; border-radius: 8px; display: grid; place-items: center;
  font-family: var(--f-mono); font-size: 13px; font-weight: 700; color: #fff; background: var(--ink); line-height: 1;
}

/* ---------- 冒頭のリードと結論 ---------- */
body.ts-editorial .editorial-lead { font-size: 18.5px; line-height: 1.95; color: var(--ink-2); margin-bottom: 1.3em; }
body.ts-editorial .editorial-answer, body.ts-editorial .highlight-block {
  position: relative; background: var(--cobalt-50); border: 1px solid var(--cobalt-100);
  border-radius: var(--r); padding: 22px 24px 18px; margin: 1.6em 0;
}
body.ts-editorial .editorial-answer::before {
  content: "ANSWER"; position: absolute; top: -11px; left: 18px;
  font-family: var(--f-mono); font-size: 11px; font-weight: 700; letter-spacing: .14em; color: #fff;
  background: var(--cobalt); padding: 3px 10px; border-radius: 999px; line-height: 1.5;
}
body.ts-editorial .highlight-block::before { content: none; }
body.ts-editorial .editorial-answer p, body.ts-editorial .highlight-block p { margin: 0 0 .6em; }
body.ts-editorial .editorial-answer p:last-child, body.ts-editorial .highlight-block p:last-child { margin-bottom: 0; }
body.ts-editorial .editorial-answer strong, body.ts-editorial .highlight-block strong { background: none; color: var(--cobalt-700); }
body.ts-editorial .editorial-source, body.ts-editorial .disclaimer {
  font-family: var(--f-body); font-size: 13.5px; color: var(--muted); line-height: 1.8;
}
body.ts-editorial .editorial-source::before {
  content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--mint);
  margin-right: 8px; vertical-align: .1em; box-shadow: 0 0 0 3px var(--mint-50);
}

/* ---------- 目次（本文内／サイドバー） ---------- */
body.ts-editorial nav.editorial-toc {
  background: var(--ground); border: 1px solid var(--line); border-radius: var(--r); padding: 18px 22px; margin: 1.6em 0;
}
body.ts-editorial nav.editorial-toc > strong {
  display: block; background: none; font-family: var(--f-mono); font-size: 12px; letter-spacing: .12em; color: var(--muted); margin-bottom: 6px;
}
body.ts-editorial nav.editorial-toc ol { counter-reset: j-toc; margin: 0; }
body.ts-editorial nav.editorial-toc ol > li { counter-increment: j-toc; padding-left: 2.4em; margin: .25em 0; }
body.ts-editorial nav.editorial-toc ol > li::before {
  content: counter(j-toc, decimal-leading-zero); position: absolute; left: 0; top: .15em; background: none; color: var(--cobalt);
  font-family: var(--f-mono); font-size: 13px; font-weight: 700; width: auto; height: auto;
}
body.ts-editorial nav.editorial-toc a { font-weight: 700; text-decoration: none; color: var(--ink-2); }

body.ts-editorial main > article > .article-header { order: 0; }
body.ts-editorial main > article > .lab-sidebar { order: 1; }
body.ts-editorial main > article > .article-body { order: 2; }
@media (max-width: 1099px) {
  body.ts-editorial .lab-sidebar .lab-contents { max-height: none; box-shadow: none; }
  body.ts-editorial .lab-sidebar .lab-contents > summary { border-bottom: 0; margin: 0; padding: 4px 6px; position: relative; }
  body.ts-editorial .lab-sidebar .lab-contents[open] > summary { border-bottom: 1px dashed var(--line); margin-bottom: 8px; padding-bottom: 10px; }
  body.ts-editorial .lab-contents > summary::after { content: "＋"; position: absolute; right: 8px; top: 2px; color: var(--cobalt); font-size: 14px; }
  body.ts-editorial .lab-contents[open] > summary::after { content: "－"; }
}
body.ts-editorial .lab-contents {
  background: var(--paper); border: 1px solid var(--line); border-radius: 18px; padding: 16px 14px 14px;
  box-shadow: var(--shadow); max-height: calc(100vh - 110px); overflow: auto;
}
body.ts-editorial .lab-contents > summary {
  list-style: none; cursor: pointer; font-family: var(--f-mono); font-size: 11.5px; font-weight: 700;
  letter-spacing: .14em; color: var(--muted); padding: 2px 6px 10px; border-bottom: 1px dashed var(--line); margin-bottom: 8px;
}
body.ts-editorial .lab-contents > summary::-webkit-details-marker { display: none; }
body.ts-editorial .lab-contents > summary span { font-family: var(--f-body); letter-spacing: .04em; color: var(--ink); margin-left: 6px; }
body.ts-editorial .lab-contents ol { margin: 0; }
body.ts-editorial .lab-contents li { padding: 0 !important; margin: 0 !important; }
body.ts-editorial .lab-contents li::before { content: none !important; }
body.ts-editorial .lab-contents a {
  display: grid; grid-template-columns: 26px 1fr; gap: 6px; align-items: baseline;
  padding: 7px 8px; border-radius: 10px; text-decoration: none; font-weight: 400 !important;
  font-size: 13.5px; line-height: 1.6; color: var(--ink-2);
}
body.ts-editorial .lab-contents a:hover { background: var(--ground); color: var(--ink); }
body.ts-editorial .lab-contents a[aria-current] { background: var(--cobalt-50); color: var(--cobalt-700); font-weight: 700 !important; }
body.ts-editorial .lab-toc-n { font-family: var(--f-mono); font-size: 11.5px; font-weight: 700; color: var(--line-2); }
body.ts-editorial .lab-contents a[aria-current] .lab-toc-n { color: var(--tang); }

/* ---------- 表：仕様書 ---------- */
body.ts-editorial .editorial-table, body.ts-editorial .table-scroll, body.ts-editorial .table-wrapper, body.ts-editorial .table-wrap {
  overflow-x: auto; margin: 1.5em 0; border: 1px solid var(--line); border-radius: var(--r); background: var(--paper);
}
body.ts-editorial article table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.7; }
body.ts-editorial article caption, body.ts-editorial .table-caption {
  caption-side: top; text-align: left; padding: 12px 16px 10px; font-family: var(--f-mono); font-size: 12px;
  font-weight: 700; letter-spacing: .06em; color: var(--muted); border-bottom: 1px dashed var(--line);
}
body.ts-editorial article th, body.ts-editorial article td {
  padding: 12px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line);
}
body.ts-editorial article thead th {
  background: var(--ink); color: #fff; font-family: var(--f-body); font-weight: 700; font-size: 13.5px;
  letter-spacing: .04em; border-bottom: 0; min-width: 5.5em;
}
body.ts-editorial article tbody th { background: var(--ground); font-weight: 700; }
body.ts-editorial article tbody tr:nth-child(even) td { background: #fafbfe; }
body.ts-editorial article tbody tr:last-child td, body.ts-editorial article tbody tr:last-child th { border-bottom: 0; }
body.ts-editorial article td strong { background: none; }

/* ---------- 例文：送信前の下書き ---------- */
body.ts-editorial .template-box {
  position: relative; margin: 1.4em 0 1.8em; padding: 34px 22px 18px;
  background: var(--paper); border: 1.5px solid var(--cobalt-100); border-radius: 18px 18px 18px 6px;
  box-shadow: 0 10px 24px -20px rgba(47, 91, 255, .7);
}
body.ts-editorial .template-box::before {
  content: "DRAFT"; position: absolute; left: 14px; top: 10px;
  font-family: var(--f-mono); font-size: 10.5px; font-weight: 700; letter-spacing: .16em; color: var(--cobalt);
}
body.ts-editorial .template-box p { margin: 0 0 .5em; }
body.ts-editorial .template-box strong { background: none; color: var(--cobalt-700); }
body.ts-editorial .template-box p:last-child { margin: 0; }
body.ts-editorial .j-copy {
  position: absolute; right: 10px; top: 8px; z-index: 2;
  font-family: var(--f-mono); font-size: 11px; font-weight: 700; letter-spacing: .08em;
  color: var(--cobalt-700); background: var(--cobalt-50); border: 1px solid var(--cobalt-100);
  padding: 4px 10px; border-radius: 999px; cursor: pointer; line-height: 1.4;
}
body.ts-editorial .j-copy:hover { background: var(--cobalt); color: #fff; border-color: var(--cobalt); }
body.ts-editorial .j-copy[data-done] { background: var(--mint); color: #fff; border-color: var(--mint); }

/* ---------- 補足：付箋 ---------- */
body.ts-editorial .note, body.ts-editorial .editorial-fact-note {
  position: relative; background: var(--butter); border: 0; border-radius: 6px 6px 14px 6px;
  padding: 26px 22px 16px; margin: 1.8em 0 1.6em; box-shadow: 0 8px 18px -14px rgba(120, 90, 0, .55);
}
body.ts-editorial .note::before, body.ts-editorial .editorial-fact-note::before {
  content: "MEMO"; position: absolute; top: -10px; left: 22px; padding: 2px 14px;
  font-family: var(--f-mono); font-size: 11px; font-weight: 700; letter-spacing: .16em; color: #6d5500;
  background: var(--tape); opacity: .92; transform: rotate(-2deg); border-radius: 2px;
}
body.ts-editorial .note p:last-child { margin-bottom: 0; }
body.ts-editorial .note strong { background: none; }

/* ---------- 旧部品：手順・チェック・カード ---------- */
body.ts-editorial .role-list { counter-reset: none; margin: 1.4em 0; display: grid; gap: 12px; }
body.ts-editorial .role-list > li {
  display: grid; grid-template-columns: 46px 1fr; gap: 14px; align-items: start; padding: 16px 18px !important; margin: 0 !important;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r);
}
body.ts-editorial .role-list > li::before { content: none !important; }
body.ts-editorial .role-marker {
  width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
  background: var(--ink); color: #fff; font-family: var(--f-mono); font-size: 13px; font-weight: 700; letter-spacing: .02em;
}
body.ts-editorial .role-info > strong { display: block; font-family: var(--f-head); font-size: 17px; background: none; margin-bottom: 2px; }
body.ts-editorial .role-info > span { display: block; color: var(--ink-2); font-size: 15.5px; line-height: 1.85; }
body.ts-editorial .checklist { margin: 1.3em 0; display: grid; gap: 8px; }
body.ts-editorial .checklist > li {
  display: grid; grid-template-columns: 28px 1fr; gap: 10px; padding: 12px 16px !important; margin: 0 !important;
  background: var(--mint-50); border-radius: 12px;
}
body.ts-editorial .checklist > li::before { content: none !important; }
body.ts-editorial .check {
  width: 24px; height: 24px; border-radius: 7px; background: var(--mint); color: #fff; display: grid; place-items: center;
  font-size: 14px; font-weight: 700; margin-top: 3px;
}
body.ts-editorial .checklist strong { background: none; }
body.ts-editorial .feature-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; margin: 1.5em 0; }
body.ts-editorial .feature-card {
  position: relative; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 20px 20px 16px;
}
body.ts-editorial .feature-card[data-num]::before {
  content: attr(data-num); position: absolute; right: 16px; top: 12px; font-family: var(--f-mono); font-weight: 700;
  font-size: 22px; color: var(--cobalt-100);
}
body.ts-editorial .feature-card h3 { margin: 0 0 .5em; padding: 0; font-size: 17px; padding-right: 36px; }
body.ts-editorial .feature-card h3::before { content: none; }
body.ts-editorial .feature-card p { font-size: 15px; line-height: 1.85; margin: 0; color: var(--ink-2); }
body.ts-editorial .tag {
  display: inline-block; font-family: var(--f-body); font-size: 11.5px; font-weight: 700; color: var(--tang);
  background: var(--tang-50); padding: 1px 9px; border-radius: 999px; vertical-align: .15em; letter-spacing: .03em;
}
body.ts-editorial .merit-list, body.ts-editorial .pricing-grid { margin: 1.4em 0; }

/* ---------- 文中CTA：コンポーネントの置き場 ---------- */
body.ts-editorial .editorial-inline-cta {
  position: relative; margin: 2.6em 0; padding: 26px 26px 22px;
  background:
    radial-gradient(circle, rgba(47, 91, 255, .12) 1.2px, transparent 1.4px) 0 0 / 16px 16px,
    var(--paper);
  border: 2px dashed var(--cobalt); border-radius: 20px;
}
body.ts-editorial .editorial-inline-cta .editorial-kicker {
  display: inline-block; margin: 0 0 8px; font-family: var(--f-mono); font-size: 11.5px; font-weight: 700; letter-spacing: .1em;
  color: var(--cobalt-700); background: var(--cobalt-50); padding: 2px 10px; border-radius: 999px;
}
body.ts-editorial .editorial-inline-cta .editorial-kicker::before { content: "</> "; color: var(--tang); }
body.ts-editorial .editorial-inline-cta h3 { margin: .2em 0 .4em; padding: 0; font-size: 20px; }
body.ts-editorial .editorial-inline-cta h3::before { content: none; }
body.ts-editorial .editorial-inline-cta p { font-size: 15.5px; color: var(--ink-2); margin-bottom: 14px; }
body.ts-editorial .editorial-inline-cta a {
  display: inline-flex; align-items: center; gap: 6px; text-decoration: none; font-weight: 700;
  color: #fff !important; background: var(--cobalt); padding: 10px 18px; border-radius: 12px;
  box-shadow: 0 4px 0 var(--cobalt-700); transition: transform .12s ease, box-shadow .12s ease;
}
body.ts-editorial .editorial-inline-cta a:hover { transform: translateY(2px); box-shadow: 0 2px 0 var(--cobalt-700); color: #fff; }

/* ---------- FAQ：チャットの吹き出し ---------- */
body.ts-editorial .j-ping-faq {
  display: flex; align-items: flex-end; gap: 12px; margin: .4em 0 1em;
  font-family: var(--f-mono); font-size: 12px; font-weight: 700; letter-spacing: .1em; color: var(--muted);
}
body.ts-editorial .j-ping-faq svg { width: 64px; height: auto; flex: none; }
body.ts-editorial .j-ping-faq span {
  position: relative; background: var(--paper); border: 1px solid var(--line); border-radius: 14px 14px 14px 4px;
  padding: 8px 14px; margin-bottom: 18px; font-family: var(--f-body); letter-spacing: .03em; color: var(--ink-2); font-size: 14px;
}
body.ts-editorial .faq-section { margin: 0; padding: 0; border: 0; background: none; }
body.ts-editorial details.faq-item, body.ts-editorial .faq-item {
  margin: 0 0 14px; padding: 0; background: none; border: 0; box-shadow: none;
}
body.ts-editorial details.faq-item > summary {
  position: relative; list-style: none; cursor: pointer; display: block;
  margin-right: 12%; padding: 14px 44px 14px 58px; background: var(--ground); border: 1px solid var(--line);
  border-radius: 18px 18px 18px 6px; font-family: var(--f-head); font-weight: 700; font-size: 16.5px; line-height: 1.65; color: var(--ink);
}
body.ts-editorial details.faq-item > summary::-webkit-details-marker { display: none; }
body.ts-editorial details.faq-item > summary::before {
  content: "Q"; position: absolute; left: 14px; top: 12px; width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center; background: var(--ink); color: #fff; font-family: var(--f-mono); font-size: 14px; font-weight: 700;
}
body.ts-editorial details.faq-item > summary::after {
  content: ""; position: absolute; right: 18px; top: 50%; width: 9px; height: 9px; margin-top: -6px;
  border-right: 2.5px solid var(--muted); border-bottom: 2.5px solid var(--muted); transform: rotate(45deg); transition: transform .2s ease;
}
body.ts-editorial details.faq-item[open] > summary::after { transform: rotate(225deg); margin-top: -2px; }
body.ts-editorial details.faq-item > summary:hover { border-color: var(--line-2); }
body.ts-editorial .faq-answer {
  position: relative; margin: 10px 0 0 12%; padding: 14px 20px 12px 58px;
  background: var(--cobalt-50); border: 1px solid var(--cobalt-100); border-radius: 18px 18px 6px 18px;
}
body.ts-editorial .faq-answer::before {
  content: "A"; position: absolute; left: 14px; top: 12px; width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center; background: var(--tang); color: #fff; font-family: var(--f-mono); font-size: 14px; font-weight: 700;
}
body.ts-editorial .faq-answer p { font-size: 15.5px; line-height: 1.9; margin: 0 0 .5em; }
body.ts-editorial .faq-answer p:last-child { margin: 0; }
@media (max-width: 640px) {
  body.ts-editorial details.faq-item > summary { margin-right: 0; }
  body.ts-editorial .faq-answer { margin-left: 0; }
}

/* ---------- 末尾CTA：デプロイの合図 ---------- */
body.ts-editorial .article-cta {
  position: relative; overflow: hidden; margin: 3em 0 1.4em; padding: 32px 32px 28px;
  background:
    radial-gradient(circle, rgba(255, 255, 255, .09) 1.2px, transparent 1.4px) 0 0 / 18px 18px,
    var(--ink);
  color: #e8ecf6; border-radius: 22px; border: 0;
}
body.ts-editorial .article-cta h3 { color: #fff; margin: 0 0 .5em; padding: 0; font-size: 22px; }
body.ts-editorial .article-cta h3::before { content: none; }
body.ts-editorial .article-cta p { color: #cfd6e6; font-size: 15.5px; }
body.ts-editorial .article-cta.j-has-ping { padding-right: 150px; }
body.ts-editorial .article-cta .j-cta-ping { position: absolute; right: 18px; bottom: 6px; width: 112px; }
body.ts-editorial .cta-button {
  display: inline-flex; align-items: center; gap: 8px; margin: 6px 0 10px; text-decoration: none;
  font-weight: 700; font-size: 16px; color: var(--ink) !important; background: var(--tang);
  padding: 12px 22px; border-radius: 14px; box-shadow: 0 5px 0 #c9431a; transition: transform .12s ease, box-shadow .12s ease;
}
body.ts-editorial .cta-button::before, body.ts-editorial .cta-button::after { content: none; }
body.ts-editorial .cta-button:hover { transform: translateY(3px); box-shadow: 0 2px 0 #c9431a; color: var(--ink) !important; }
body.ts-editorial .cta-subnote { font-size: 13.5px !important; color: #aab4ca !important; margin: 4px 0 0; }
body.ts-editorial .cta-subnote a { color: #fff; }
@media (max-width: 640px) {
  body.ts-editorial .article-cta { padding: 26px 22px 24px; }
  body.ts-editorial .article-cta.j-has-ping { padding-right: 22px; padding-bottom: 100px; }
  body.ts-editorial .article-cta .j-cta-ping { width: 84px; }
}

/* ---------- 次に読む ---------- */
body.ts-editorial .related-articles { margin: 2.4em 0 0; padding: 0; border: 0; background: none; }
body.ts-editorial .related-articles > h2 { margin: 0 0 .7em; font-size: 20px; display: flex; align-items: center; gap: 10px; }
body.ts-editorial .j-ping-next { width: 46px; height: auto; flex: none; }
body.ts-editorial .editorial-related-list { display: grid; gap: 10px; margin: 0; }
body.ts-editorial .editorial-related-list > li { padding: 0 !important; margin: 0 !important; }
body.ts-editorial .editorial-related-list > li::before { content: none !important; }
body.ts-editorial .editorial-related-list a {
  display: block; padding: 14px 44px 14px 18px; background: var(--ground); border: 1px solid var(--line); border-radius: 14px;
  text-decoration: none; color: var(--ink); font-weight: 700; line-height: 1.6; position: relative;
  transition: border-color .15s ease, transform .15s ease;
}
body.ts-editorial .editorial-related-list a::after {
  content: "→"; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); color: var(--cobalt); font-family: var(--f-mono);
}
body.ts-editorial .editorial-related-list a:hover { border-color: var(--cobalt); transform: translateX(3px); color: var(--ink); }

/* 公式出典 */
body.ts-editorial #refs + .disclaimer + ul, body.ts-editorial #refs ~ ul { font-size: 14.5px; }

/* ---------- 本文の余白（スマホ） ---------- */
@media (max-width: 760px) {
  body.ts-editorial { font-size: 16.5px; line-height: 1.9; }
  body.ts-editorial main.article-container { padding: 14px 12px 60px; }
  body.ts-editorial .article-content { padding: 28px 20px 30px 40px; border-radius: 18px; }
  body.ts-editorial .article-content::before { left: 17px; }
  body.ts-editorial .lab-section-index i { left: -32px; width: 22px; height: 22px; }
  body.ts-editorial .lab-section-index i::after { inset: 5px; }
  body.ts-editorial .editorial-lead { font-size: 17px; }
}

/* ---------- 上へ戻る ---------- */
body.ts-editorial .scroll-top, body.ts-editorial .j-top {
  position: fixed; right: 18px; bottom: 18px; z-index: 30; opacity: 0; pointer-events: none;
  font-family: var(--f-mono); font-size: 12px; font-weight: 700; letter-spacing: .06em;
  background: var(--paper); color: var(--ink); border: 1px solid var(--line-2); border-radius: 999px;
  padding: 9px 16px; box-shadow: var(--shadow); cursor: pointer; transition: opacity .2s ease;
}
body.ts-editorial .scroll-top.visible, body.ts-editorial .j-top.visible { opacity: 1; pointer-events: auto; }
body.ts-editorial .scroll-top::before, body.ts-editorial .j-top::before { content: "↑ "; color: var(--tang); }

/* ---------- フッター ---------- */
body.ts-editorial > footer > div { display: flex; flex-wrap: wrap; gap: 10px 20px; justify-content: center; align-items: center; }
body.ts-editorial > footer nav { display: flex; gap: 14px; flex-wrap: wrap; }
body.ts-editorial > footer {
  max-width: 1180px; margin: 0 auto; padding: 28px 22px 40px; text-align: center;
  font-size: 13px; color: var(--muted); border-top: 1px solid var(--line);
}
body.ts-editorial > footer p { margin: 0; }
body.ts-editorial > footer a { color: var(--ink-2); }

/* =====================================================================
   記事一覧（/blog/）
   ===================================================================== */
body.ts-editorial main.blog-index-container { max-width: 1180px; margin: 0 auto; padding: 26px 22px 80px; }
body.ts-editorial .blog-hero {
  position: relative; overflow: hidden; background: var(--paper); border: 1px solid var(--line); border-radius: 26px;
  padding: 46px 48px 40px; box-shadow: var(--shadow); margin-bottom: 22px;
}
body.ts-editorial .blog-hero::before {
  content: "TECHSYNC / LAB NOTES"; display: inline-block; font-family: var(--f-mono); font-size: 12px; font-weight: 700;
  letter-spacing: .16em; color: var(--cobalt); background: var(--cobalt-50); padding: 3px 12px; border-radius: 999px; margin-bottom: 16px;
}
body.ts-editorial .blog-hero h1 { font-size: clamp(34px, 5vw, 56px); line-height: 1.2; margin: 0 0 14px; max-width: 12em; }
body.ts-editorial .blog-hero h1::after { content: "."; color: var(--tang); }
body.ts-editorial .blog-hero > p { max-width: 38em; color: var(--ink-2); font-size: 16.5px; margin: 0 0 16px; }
body.ts-editorial .blog-hero-count {
  font-family: var(--f-mono); font-size: 13px; color: var(--muted); display: inline-flex; gap: 6px; align-items: center;
}
body.ts-editorial .blog-hero-count::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 3px var(--mint-50); }
body.ts-editorial .blog-hero-count span { color: var(--ink); font-weight: 700; }
body.ts-editorial .blog-hero.j-has-ping { padding-right: 280px; }
body.ts-editorial .j-index-ping { position: absolute; right: 48px; bottom: 22px; width: 200px; }
@media (max-width: 860px) {
  body.ts-editorial .blog-hero { padding: 32px 24px 28px; }
  body.ts-editorial .blog-hero.j-has-ping { padding-right: 24px; padding-top: 118px; }
  body.ts-editorial .j-index-ping { width: 104px; right: 18px; top: 18px; bottom: auto; }
}

body.ts-editorial .blog-product-strip {
  display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: center; justify-content: space-between;
  background: var(--ink); color: #dfe5f2; border-radius: 22px; padding: 22px 28px; margin: 0 0 22px;
}
body.ts-editorial .blog-product-main { flex: 1 1 520px; }
body.ts-editorial .blog-product-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
body.ts-editorial .blog-product-head .tag { background: var(--tang); color: var(--ink); }
body.ts-editorial .blog-product-head .name { font-family: var(--f-head); font-weight: 700; color: #fff; font-size: 18px; }
body.ts-editorial .blog-product-strip p { margin: 0; font-size: 14.5px; line-height: 1.85; color: #c7cfe0; }
body.ts-editorial .blog-product-link {
  text-decoration: none; font-weight: 700; color: var(--ink) !important; background: #fff; padding: 11px 20px; border-radius: 14px;
  box-shadow: 0 4px 0 #9aa7c4; white-space: nowrap;
}
body.ts-editorial .blog-product-link:hover { transform: translateY(2px); box-shadow: 0 2px 0 #9aa7c4; }

body.ts-editorial .rr-acquire {
  background: var(--paper); border: 1px solid var(--line); border-radius: 22px; padding: 28px 30px; margin: 0 0 26px;
}
body.ts-editorial .rr-acquire-label { font-family: var(--f-mono); font-size: 11.5px; font-weight: 700; letter-spacing: .14em; color: var(--tang); margin: 0 0 4px; }
body.ts-editorial .rr-acquire h2 { font-family: var(--f-head); font-size: 24px; margin: 0 0 6px; }
body.ts-editorial .rr-acquire > p { color: var(--ink-2); font-size: 15px; }
body.ts-editorial .rr-acquire nav { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; margin: 16px 0; }
body.ts-editorial .rr-acquire nav a {
  display: flex; flex-direction: column; gap: 4px; text-decoration: none; padding: 16px 16px 14px;
  background: var(--ground); border: 1px solid var(--line); border-radius: 16px; color: var(--ink);
  transition: border-color .15s ease, transform .15s ease;
}
body.ts-editorial .rr-acquire nav a:hover { border-color: var(--cobalt); transform: translateY(-2px); }
body.ts-editorial .rr-acquire nav a span { font-family: var(--f-mono); font-size: 11.5px; font-weight: 700; color: var(--cobalt); letter-spacing: .04em; }
body.ts-editorial .rr-acquire nav a b { font-size: 15px; line-height: 1.6; background: none; }
body.ts-editorial .rr-acquire nav a small { font-size: 12.5px; color: var(--muted); margin-top: auto; }

body.ts-editorial .blog-cat-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 10px 0 18px; }
body.ts-editorial .blog-cat-label { font-family: var(--f-mono); font-size: 12px; font-weight: 700; letter-spacing: .12em; color: var(--muted); }
body.ts-editorial .blog-cat-tabs { display: flex; gap: 8px; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
body.ts-editorial .blog-cat-tab {
  cursor: pointer; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--paper);
  font-size: 14px; font-weight: 700; color: var(--ink-2); line-height: 1.6;
}
body.ts-editorial .blog-cat-tab .count { font-family: var(--f-mono); font-size: 12px; color: var(--muted); margin-left: 4px; }
body.ts-editorial .blog-cat-tab.active { background: var(--ink); color: #fff; border-color: var(--ink); }
body.ts-editorial .blog-cat-tab.active .count { color: #aab4ca; }
body.ts-editorial .blog-section-title {
  font-family: var(--f-head); font-size: 22px; margin: 0 0 14px; display: flex; align-items: center; gap: 10px;
}
body.ts-editorial .blog-section-title::before { content: ""; width: 12px; height: 12px; border-radius: 3px; background: var(--tang); transform: rotate(45deg); }

body.ts-editorial .blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
body.ts-editorial .blog-idx-card {
  display: flex; flex-direction: column; text-decoration: none; color: var(--ink);
  background: var(--paper); border: 1px solid var(--line); border-radius: 20px; overflow: hidden;
  box-shadow: var(--shadow); transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
body.ts-editorial .blog-idx-card:hover { transform: translateY(-4px); border-color: var(--cobalt); color: var(--ink); box-shadow: 0 16px 30px -22px rgba(47, 91, 255, .7); }
body.ts-editorial .blog-idx-bar {
  display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-bottom: 1px dashed var(--line); background: var(--ground);
}
body.ts-editorial .blog-idx-bar .fname {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: var(--f-mono); font-size: 11.5px; color: var(--muted); letter-spacing: .02em;
}
body.ts-editorial .blog-idx-bar .fname::before { content: "~/"; color: var(--line-2); }
body.ts-editorial .blog-idx-cat {
  font-size: 11.5px; font-weight: 700; padding: 1px 9px; border-radius: 999px; background: var(--mint-50); color: var(--mint); white-space: nowrap;
}
body.ts-editorial .blog-idx-cat.cat-subsidy { background: var(--tang-50); color: var(--tang); }
body.ts-editorial .blog-idx-body { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px 16px; flex: 1; }
body.ts-editorial .blog-idx-tags { display: flex; flex-wrap: wrap; gap: 6px; }
body.ts-editorial .blog-idx-tag {
  font-size: 11.5px; font-weight: 700; color: var(--cobalt-700); background: var(--cobalt-50); padding: 1px 9px; border-radius: 999px;
}
body.ts-editorial .blog-idx-title { font-family: var(--f-head); font-weight: 700; font-size: 17.5px; line-height: 1.6; text-wrap: pretty; color: var(--ink); margin: 0; flex: none; }
body.ts-editorial .blog-idx-card:hover .blog-idx-title { color: var(--cobalt-700); }
body.ts-editorial .blog-idx-card::before, body.ts-editorial .blog-idx-card::after { content: none; }
body.ts-editorial .blog-idx-excerpt {
  margin: 0; font-size: 14px; line-height: 1.85; color: var(--ink-2);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
body.ts-editorial .blog-idx-meta {
  margin-top: auto; padding-top: 8px; display: flex; align-items: center; gap: 12px;
  font-family: var(--f-mono); font-size: 12px; color: var(--muted);
}
body.ts-editorial .blog-idx-meta .m-arrow {
  margin-left: auto; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: var(--ground); color: var(--cobalt); font-weight: 700; transition: background .15s ease, color .15s ease, transform .15s ease;
}
body.ts-editorial .blog-idx-card:hover .m-arrow { background: var(--cobalt); color: #fff; transform: translateX(3px); }

body.ts-editorial .blog-pagination { display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; margin: 26px 0; }
body.ts-editorial .blog-pg-btn {
  min-width: 38px; height: 38px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--paper);
  font-family: var(--f-mono); font-weight: 700; font-size: 13px; color: var(--ink-2); cursor: pointer;
}
body.ts-editorial .blog-pg-btn.active { background: var(--ink); color: #fff; border-color: var(--ink); }
body.ts-editorial .blog-pg-btn:hover:not(.active) { border-color: var(--cobalt); color: var(--cobalt); }
body.ts-editorial .blog-pg-ellipsis { align-self: center; color: var(--muted); font-family: var(--f-mono); }
body.ts-editorial .editorial-archive { background: var(--paper); border: 1px solid var(--line); border-radius: 20px; padding: 20px 24px; margin-top: 26px; }
body.ts-editorial .editorial-archive h2 { font-family: var(--f-head); font-size: 20px; margin: 0 0 8px; }
body.ts-editorial .editorial-archive summary { cursor: pointer; font-weight: 700; color: var(--cobalt-700); }
body.ts-editorial .editorial-archive ul { list-style: none; padding: 0; margin: 10px 0 0; columns: 2 320px; column-gap: 28px; }
body.ts-editorial .editorial-archive li { font-size: 14px; line-height: 1.7; margin: 0 0 6px; break-inside: avoid; }
body.ts-editorial .blog-idx-footer { text-align: center; margin-top: 30px; }
body.ts-editorial .blog-idx-footer a { font-weight: 700; }

/* ---------- 動きを控えたい人へ ---------- */
@media (prefers-reduced-motion: reduce) {
  body.ts-editorial *, body.ts-editorial *::before, body.ts-editorial *::after { animation: none !important; transition: none !important; }
}
/* Ping のまばたきと手振り（控えめ） */
body.ts-editorial .ping-signal { animation: j-signal 2.4s ease-in-out infinite; transform-origin: 58px 9px; }
@keyframes j-signal { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
body.ts-editorial .j-hero-ping .ping, body.ts-editorial .j-index-ping .ping { animation: j-float 5s ease-in-out infinite; }
@keyframes j-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }

body.ts-editorial .editorial-archive details { border-top: 1px dashed var(--line); padding: 10px 0; }
body.ts-editorial .editorial-archive summary span { font-family: var(--f-mono); font-size: 12px; color: var(--muted); font-weight: 500; margin-left: 6px; }
body.ts-editorial .editorial-archive > p { color: var(--ink-2); font-size: 14.5px; margin: 0 0 8px; }

@media (max-width: 520px) {
  body.ts-editorial > header > nav { padding: 0 14px; height: 56px; }
  body.ts-editorial .logo { font-size: 19px; }
  body.ts-editorial .nav-links { gap: 2px; }
  body.ts-editorial .nav-links a { padding: 5px 10px; font-size: 13px; }
  body.ts-editorial .article-cta.j-has-ping { padding-bottom: 96px; }
}

/* 旧 renraku-reading.css の役目（小見出しつきh1・用語の改行防止・アンカー位置） */
body.ts-editorial h1 > small { display: block; margin-top: 10px; font-family: var(--f-body); font-weight: 700; font-size: clamp(15px, 1.8vw, 19px); line-height: 1.7; color: var(--ink-2); -webkit-text-fill-color: currentColor; letter-spacing: .02em; }
body.ts-editorial .headline-term { display: inline-block; white-space: nowrap; }
body.ts-editorial [id] { scroll-margin-top: 84px; }
body.ts-editorial .article-content section { margin: 0; }

/* 記事固有の部品との同居 */
body.ts-editorial .mcp-article-flow ol > li { padding: 1rem !important; }
body.ts-editorial .mcp-article-flow ol > li::before { content: none !important; }
body.ts-editorial .mcp-article-flow strong, body.ts-editorial .mcp-article-flow b { background: none; }
body.ts-editorial article h3:has(.reminder-number) { padding-left: 0; }
body.ts-editorial article h3:has(.reminder-number)::before { content: none; }

/* 文中CTAの2つ目（mid2）：緑の点線で四辺を囲む。片側だけの強調線は使わない。 */
body.ts-editorial .editorial-inline-cta[data-editorial-cta="mid2"] {
  border: 2px dashed #55a68b;
  background:
    radial-gradient(circle, rgba(15, 174, 132, .12) 1.2px, transparent 1.4px) 0 0 / 16px 16px,
    var(--paper);
  box-shadow: 0 4px 0 var(--mint-50);
}
body.ts-editorial .editorial-inline-cta[data-editorial-cta="mid2"] .editorial-kicker { color: #0b7d5f; background: var(--mint-50); }
body.ts-editorial .editorial-inline-cta[data-editorial-cta="mid2"] .editorial-kicker::before { content: "▶ "; color: var(--mint); }
body.ts-editorial .editorial-inline-cta[data-editorial-cta="mid2"] a { background: var(--ink); box-shadow: 0 4px 0 #0a1224; }
body.ts-editorial .editorial-inline-cta[data-editorial-cta="mid2"] a:hover { box-shadow: 0 2px 0 #0a1224; }