@font-face { font-family: 'Source Serif 4'; font-style: italic; font-weight: 400 600; font-display: swap; src: url(/fonts/source-serif-4-latin-ext-italic.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Source Serif 4'; font-style: italic; font-weight: 400 600; font-display: swap; src: url(/fonts/source-serif-4-latin-italic.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 300 700; font-display: swap; src: url(/fonts/source-serif-4-latin-ext-normal.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 300 700; font-display: swap; src: url(/fonts/source-serif-4-latin-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
:root { color-scheme: light dark; --cs-font-heading: 'Source Serif 4', 'Hiragino Mincho ProN', 'Yu Mincho', serif; --cs-font-body: 'Source Serif 4', 'Hiragino Mincho ProN', 'Yu Mincho', serif; --cs-radius: 2px; --cs-type-scale: 1.15; --cs-content-width: 40rem; --cs-base-font-size: calc(16.5px * 1.15); --cs-base-line-height: 1.6; --cs-font-smoothing: antialiased; --cs-paper: #2d2235; --cs-paper-to: #2d2235; --cs-panel: rgba(65, 54, 80, 0.9); --cs-ink: #e8dcc4; --cs-ink2: #bfae8c; --cs-hair: rgba(232,220,196,0.16); --cs-accent: #c9a227; --cs-accent-tint: rgba(201,162,39,0.14); --cs-ink3: #b6a588; --cs-focus: #d9b957; --cs-edge: rgba(232, 220, 196, 0.48); }
@media (prefers-color-scheme: dark) { :root { --cs-paper: #2d2235; --cs-paper-to: #2d2235; --cs-panel: rgba(65, 54, 80, 0.9); --cs-ink: #e8dcc4; --cs-ink2: #bfae8c; --cs-hair: rgba(232,220,196,0.16); --cs-accent: #c9a227; --cs-accent-tint: rgba(201,162,39,0.14); --cs-ink3: #b6a588; --cs-focus: #d9b957; --cs-edge: rgba(232, 220, 196, 0.48); } }

/*
 * 公開のコラムのページ（docs/specs/column-serve-spec.md §4.3・§8.1）。受け口（othero の Column.module.css・ColumnCard.module.css・
 * Landing.module.css のバッジ・GameNetworkNav.module.css・globals.css の html/body）の版面の**写し**。値（余白・字の大きさ・行の高さ）は
 * 受け口と同じにする（S3 の parity がスクショで比べる）。受け口の CSS を直したら、ここも同じ日に直す。
 * 色・書体・角丸・文字の倍率・本文の幅は --cs-* のトークンだけ（値は config/column/preview-tokens.json から
 * src/lib/column-serve/css.ts が :root に書く。ここに直書きしない）。ダークは prefers-color-scheme だけ（inline script を使わない）。
 * 受け口は本文を器（.scroll・height 100dvh）の中でスクロールさせるが、ここは文書そのものをスクロールさせる（見た目は同じ・
 * JS も固定の高さも要らない）。盤面図の見た目は src/lib/column-diagram/diagram.css（css.ts が後ろに連結する）。
 */

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

html,
body {
  margin: 0;
  padding: 0;
  background: var(--cs-paper);
  color: var(--cs-ink);
  font-family: var(--cs-font-body);
  font-size: var(--cs-base-font-size, 16px);
  line-height: var(--cs-base-line-height, normal);
  -webkit-font-smoothing: var(--cs-font-smoothing, auto);
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: 100vh;
  overflow-x: hidden;
}

:focus-visible {
  outline: 2px solid var(--cs-accent);
  outline-offset: 2px;
}

.cs-scroll {
  min-height: 100vh;
  overflow-x: hidden;
  /* 地のグラデーション（paperTo が無いサイトは paper と同じ色＝単色。jyankokushi の LP の根は paper→alt） */
  background: linear-gradient(to bottom, var(--cs-paper) 0%, var(--cs-paper-to) 100%);
  color: var(--cs-ink);
}

/* ── パンくず（受け口の .bar / .crumbs） ─────────────────────────────── */

.cs-bar {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--cs-paper);
  border-bottom: 1px solid var(--cs-hair);
  padding: calc(env(safe-area-inset-top, 0px) + 4px) 16px 4px;
}

.cs-crumbs {
  max-width: var(--cs-content-width);
  margin: 0 auto;
}

.cs-crumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  column-gap: 8px;
}

.cs-crumbs li {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  font-size: calc(14px * var(--cs-type-scale, 1));
  line-height: 1.6;
  color: var(--cs-ink2);
}

.cs-crumbs li + li::before {
  content: '›';
  margin-right: 8px;
  color: var(--cs-ink3);
}

.cs-crumbs a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--cs-accent);
  text-decoration: none;
}

/* 今のページ（最後の要素）は 1 行で省略する。.cs-crumbs li（inline-flex）より強い指定にする（L-3：負けると省略記号が出ず折り返す） */
.cs-crumbs .cs-crumb-current {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 60vw;
}

/* ── ヘッダーの右上の言語の切り替え（§14.12・受け口の LP の切り替えと同じ考え）。JS なしの details/summary ─────────── */
.cs-bar-lang {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* パンくずと切り替えを本文の幅の列に揃える（パンくずの左端は今と同じ・切り替えの右端は本文の右端） */
.cs-bar.cs-bar-lang {
  padding-left: max(16px, calc((100% - var(--cs-content-width)) / 2));
  padding-right: max(16px, calc((100% - var(--cs-content-width)) / 2));
}

.cs-bar-lang .cs-crumbs {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
}

.cs-lang {
  position: relative;
  flex: none;
  margin-left: auto;
}

.cs-lang-summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  min-width: 44px;
  padding: 0 10px;
  border: 1px solid var(--cs-hair);
  border-radius: var(--cs-radius);
  color: var(--cs-ink);
  font-size: calc(14px * var(--cs-type-scale, 1));
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  list-style: none;
}

.cs-lang-summary::-webkit-details-marker {
  display: none;
}

.cs-lang-summary:focus-visible,
.cs-lang-item:focus-visible {
  outline: 2px solid var(--cs-focus);
  outline-offset: 2px;
}

.cs-lang-glyph {
  flex: none;
  color: var(--cs-accent);
}

.cs-lang-caret {
  width: 6px;
  height: 6px;
  margin-left: 2px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}

.cs-lang-details[open] .cs-lang-caret {
  transform: translateY(2px) rotate(-135deg);
}

.cs-lang-list {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  z-index: 3;
  margin: 0;
  padding: 4px;
  list-style: none;
  min-width: 11rem;
  max-width: calc(100vw - 32px);
  max-height: 70vh;
  overflow-y: auto;
  background: var(--cs-paper);
  border: 1px solid var(--cs-hair);
  border-radius: var(--cs-radius);
  box-shadow: 0 6px 20px var(--cs-hair);
}

.cs-lang-item {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  color: var(--cs-ink);
  text-decoration: none;
  font-size: calc(15px * var(--cs-type-scale, 1));
  border-radius: var(--cs-radius);
  overflow-wrap: anywhere;
}

a.cs-lang-item:hover {
  background: var(--cs-accent-tint);
}

.cs-lang-current {
  color: var(--cs-accent);
  font-weight: 700;
}

.cs-lang-current::before {
  content: '';
  width: 6px;
  height: 6px;
  margin-right: 8px;
  border-radius: 50%;
  background: currentColor;
}

/* ── 本文の枠 ─────────────────────────────────────────────────────────── */

.cs-main {
  max-width: var(--cs-content-width);
  margin: 0 auto;
  padding: 20px 20px calc(env(safe-area-inset-bottom, 0px) + 48px);
  overflow-wrap: anywhere;
  word-break: normal;
}

/* 下に「ゲームコラム一覧へ」（.cs-parent-columns・上に 32px）が続くときは、本文の器の下の余白を詰める（48px と足して最後の欄の下が 80px 空いていた・
 * 本番の監査 2026-10-08）。:where で詳細度を .cs-main と同じにし、器の余白を自分で決めるサイトの CSS（sites/edo.css の padding: 0 20px）を上書きしない。 */
.cs-main:where(:has(+ .cs-parent-columns)) {
  padding-bottom: 16px;
}

.cs-network-footer {
  max-width: var(--cs-content-width);
  margin: 0 auto;
  padding: 0 20px calc(env(safe-area-inset-bottom, 0px) + 24px);
  min-width: 0;
}

/* 親サイトの同じ言語のコラムの一覧へ（parent-columns.ts・受け口には無い。edo の .cs-parent-hub と同じ見た目） */
.cs-parent-columns {
  max-width: var(--cs-content-width);
  margin: 32px auto 0;
  padding: 0 20px 16px;
  font-size: calc(14px * var(--cs-type-scale, 1));
  min-width: 0;
  overflow-wrap: anywhere;
}

.cs-parent-columns a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--cs-accent);
}

.cs-title {
  font-family: var(--cs-font-heading);
  font-size: clamp(24px, 6.4vw, 32px);
  line-height: 1.45;
  font-weight: 600;
  margin: 8px 0 8px;
}

.cs-dates {
  display: flex;
  flex-wrap: wrap;
  column-gap: 16px;
  margin: 0 0 20px;
  font-size: calc(14px * var(--cs-type-scale, 1));
  line-height: 1.7;
  color: var(--cs-ink2);
}

.cs-figure {
  margin: 0 0 24px;
}

.cs-image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--cs-radius);
  background: var(--cs-panel);
}

.cs-body h2 {
  font-family: var(--cs-font-heading);
  font-size: clamp(19px, 5vw, 22px);
  line-height: 1.55;
  font-weight: 600;
  margin: 36px 0 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--cs-hair);
}

.cs-body h3 {
  font-family: var(--cs-font-heading);
  font-size: calc(17px * var(--cs-type-scale, 1));
  line-height: 1.6;
  font-weight: 600;
  margin: 24px 0 8px;
}

.cs-body p,
.cs-body li {
  font-size: calc(16px * var(--cs-type-scale, 1));
  line-height: 1.9;
}

.cs-body p {
  margin: 0 0 16px;
}

.cs-body ul,
.cs-body ol {
  margin: 0 0 18px;
  padding-left: 1.4em;
}

.cs-body li {
  margin: 0 0 8px;
}

.cs-body a {
  color: var(--cs-accent);
  text-underline-offset: 3px;
}

.cs-body blockquote {
  margin: 0 0 18px;
  padding: 10px 14px;
  border-left: 3px solid var(--cs-accent);
  background: var(--cs-accent-tint);
  border-radius: var(--cs-radius);
}

.cs-body blockquote p {
  margin: 0;
}

.cs-table-wrap {
  margin: 0 0 20px;
  max-width: 100%;
  overflow-x: auto;
}

.cs-table {
  width: 100%;
  border-collapse: collapse;
  font-size: calc(15px * var(--cs-type-scale, 1));
  line-height: 1.7;
}

.cs-table caption {
  text-align: left;
  color: var(--cs-ink2);
  font-size: calc(14px * var(--cs-type-scale, 1));
  margin-bottom: 6px;
}

.cs-table th,
.cs-table td {
  border: 1px solid var(--cs-hair);
  padding: 6px 10px;
  text-align: left;
  vertical-align: top;
}

.cs-table th {
  background: var(--cs-panel);
  font-weight: 600;
}

/* ── ストアの導線（受け口の .cta / .ctaThumb と Landing の .ctaBlock / .cta / .badge） ─────── */

.cs-cta {
  margin: 28px 0;
  padding: 18px 12px 4px;
  border-top: 1px solid var(--cs-hair);
  border-bottom: 1px solid var(--cs-hair);
}

.cs-cta-heading {
  text-align: center;
  font-family: var(--cs-font-heading);
  font-size: calc(17px * var(--cs-type-scale, 1));
  line-height: 1.6;
  font-weight: 600;
  margin: 0 0 6px;
}

.cs-cta-lead {
  text-align: center;
  font-size: calc(15px * var(--cs-type-scale, 1));
  line-height: 1.8;
  color: var(--cs-ink2);
  margin: 0 0 14px;
}

.cs-cta-thumb {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  grid-template-areas:
    'thumb text'
    'actions actions';
  column-gap: 14px;
  align-items: center;
}

.cs-cta-thumb-image {
  grid-area: thumb;
  display: block;
  width: 104px;
  height: auto;
  border: 1px solid var(--cs-hair);
  border-radius: var(--cs-radius);
  background: var(--cs-panel);
}

.cs-cta-thumb .cs-cta-text {
  grid-area: text;
  min-width: 0;
}

.cs-cta-thumb .cs-cta-heading,
.cs-cta-thumb .cs-cta-lead {
  text-align: left;
}

.cs-cta-thumb .cs-cta-lead {
  margin-bottom: 0;
}

.cs-cta-thumb .cs-cta-actions {
  grid-area: actions;
  min-width: 0;
  margin-top: 14px;
}

@media (min-width: 768px) {
  .cs-cta-thumb {
    grid-template-columns: 140px minmax(0, 1fr);
    grid-template-areas:
      'thumb text'
      'thumb actions';
    column-gap: 20px;
  }

  .cs-cta-thumb-image {
    width: 140px;
  }

  .cs-cta-thumb .cs-cta-actions {
    margin-top: 12px;
  }
}

.cs-store-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: 0 0 30px;
}

.cs-store-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 12px 14px;
  margin: 0;
}

.cs-badge-link {
  display: inline-flex;
  align-items: center;
  border-radius: 8px;
  /* タップ領域は 44px 以上（バッジの高さは img の height 属性＝設定の badgeHeight） */
  min-height: 44px;
  transition: transform 120ms ease, filter 120ms ease;
}

.cs-badge-link:hover {
  filter: brightness(1.08);
}

.cs-badge-link:active {
  transform: translateY(1px);
}

.cs-badge-link:focus-visible {
  outline: 2px solid var(--cs-focus, var(--cs-accent));
  outline-offset: 3px;
}

.cs-badge {
  display: block;
  width: auto;
}

.cs-store-note {
  font-size: calc(13.5px * var(--cs-type-scale, 1));
  line-height: 1.7;
  color: var(--cs-ink2);
  margin: 0;
  text-align: center;
}

/* ── アプリの画面（本文） ─────────────────────────────────────────────── */

.cs-screen {
  margin: 24px auto;
  max-width: 280px;
}

.cs-screen-image {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--cs-hair);
  border-radius: var(--cs-radius);
  background: var(--cs-panel);
}

.cs-screen-caption {
  margin: 8px 0 0;
  font-size: calc(13.5px * var(--cs-type-scale, 1));
  line-height: 1.7;
  color: var(--cs-ink2);
}

/* ── よくある質問・注記 ──────────────────────────────────────────────── */

.cs-faq {
  margin: 36px 0 0;
}

.cs-faq-item {
  padding: 4px 0 8px;
  border-bottom: 1px solid var(--cs-hair);
}

.cs-faq-item h3 {
  margin-top: 16px;
}

.cs-notes {
  margin: 32px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--cs-hair);
}

.cs-note {
  margin: 0 0 8px;
  font-size: calc(13.5px * var(--cs-type-scale, 1));
  line-height: 1.8;
  color: var(--cs-ink2);
}

.cs-lead {
  font-size: calc(16px * var(--cs-type-scale, 1));
  line-height: 1.9;
  margin: 0 0 20px;
}

.cs-empty {
  font-size: calc(15px * var(--cs-type-scale, 1));
  line-height: 1.8;
  color: var(--cs-ink2);
}

.cs-back {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 24px;
  color: var(--cs-accent);
  text-decoration: none;
  font-size: calc(15px * var(--cs-type-scale, 1));
}

/* ── 記事の下の「この記事の他の言語」（§14 D-6・nav[data-testid="column-languages"]） ──────────────────────
 * 見出しを 1 行、言語を折り返す丸いボタンの並びにする（以前は「一覧へ」の .cs-back を流用していて、見出しと箇条書きが横に並び、
 * 黒丸と字下げが残っていた）。色・角丸・字の倍率はトークンだけ。タップの領域は 44px。 */

.cs-langs {
  margin-top: 32px;
  padding-top: 16px;
  border-top: 1px solid var(--cs-hair);
}

.cs-langs-heading {
  margin: 0 0 10px;
  color: var(--cs-ink2);
  font-size: calc(14px * var(--cs-type-scale, 1));
  font-weight: 700;
  line-height: 1.5;
}

.cs-langs-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.cs-langs-list > li {
  min-width: 0;
  max-width: 100%;
}

.cs-langs-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  max-width: 100%;
  padding: 0 14px;
  border: 1px solid var(--cs-hair);
  border-radius: var(--cs-radius);
  background: var(--cs-paper);
  color: var(--cs-accent);
  font-size: calc(15px * var(--cs-type-scale, 1));
  line-height: 1.3;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.cs-langs-link:hover {
  background: var(--cs-accent-tint);
}

.cs-langs-link:focus-visible {
  outline: 2px solid var(--cs-focus);
  outline-offset: 2px;
}

/* ストアの導線（.cs-cta・上下に区切りの線）の直後に区切りの線を持つ欄が来ると、線が 2 本並んで間が空の帯になる
 * （本番の監査 2026-10-08：一覧の「他の言語」の上・記事の注記の上）。CTA の下の線を区切りに兼ねさせ、自分の線と上の余白を出さない。
 * margin-top は CTA の下の margin（28px）と相殺して、線から見出しまでを .cs-langs の padding-top と同じ 16px にする。 */
.cs-cta + .cs-langs,
article:has(> .cs-body:last-child > .cs-cta:last-child) + .cs-langs,
.cs-body:has(> .cs-cta:last-child) + .cs-notes {
  margin-top: -12px;
  padding-top: 0;
  border-top: 0;
}

/* ── 記事の下の「関連コラム」の欄（§14.17）。区切りと見出しは「他の言語」の欄（.cs-langs）と揃える ── */

.cs-related {
  margin-top: 32px;
  padding-top: 16px;
  border-top: 1px solid var(--cs-hair);
}

.cs-related-heading {
  margin: 0 0 12px;
  color: var(--cs-ink2);
  font-size: calc(14px * var(--cs-type-scale, 1));
  font-weight: 700;
  line-height: 1.5;
}

.cs-related .cs-grid {
  margin-bottom: 0;
}

/* ── カードとカテゴリの並び（受け口の ColumnCard.module.css） ─────────────── */

.cs-grid {
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}

@media (min-width: 600px) {
  .cs-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.cs-grid > li {
  min-width: 0;
  display: flex;
}

.cs-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  width: 100%;
  border: 1px solid var(--cs-hair);
  border-radius: var(--cs-radius);
  background: var(--cs-panel);
  overflow: hidden;
}

.cs-card-link {
  display: block;
  color: var(--cs-ink);
  text-decoration: none;
}

.cs-card-link:focus-visible,
.cs-card-category:focus-visible,
.cs-chip:focus-visible {
  outline: 2px solid var(--cs-focus, var(--cs-accent));
  outline-offset: 2px;
}

.cs-thumb {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1200 / 630;
  object-fit: cover;
  background: var(--cs-hair);
}

.cs-card-title {
  margin: 12px 14px 0;
  font-family: var(--cs-font-heading);
  font-size: calc(17px * var(--cs-type-scale, 1));
  line-height: 1.6;
  font-weight: 600;
  color: var(--cs-accent);
}

.cs-card-link:hover .cs-card-title {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cs-card-desc {
  margin: 6px 14px 0;
  font-size: calc(14.5px * var(--cs-type-scale, 1));
  line-height: 1.8;
  color: var(--cs-ink2);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.cs-card-meta {
  margin: auto 14px 0;
  padding: 6px 0 4px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  column-gap: 12px;
  font-size: calc(13.5px * var(--cs-type-scale, 1));
  line-height: 1.6;
  color: var(--cs-ink2);
}

.cs-card-category {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--cs-accent);
  text-decoration: none;
}

.cs-card-category::before {
  content: '#';
  margin-right: 2px;
  color: var(--cs-ink3);
}

.cs-chips {
  margin: 0 0 20px;
}

.cs-chips ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.cs-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--cs-hair);
  border-radius: 999px;
  background: var(--cs-panel);
  color: var(--cs-accent);
  text-decoration: none;
  font-size: calc(14.5px * var(--cs-type-scale, 1));
  line-height: 1.4;
}

.cs-chip-current {
  border-color: var(--cs-accent);
  background: var(--cs-accent-tint);
  color: var(--cs-ink);
  font-weight: 600;
}

.cs-chip-count {
  font-size: calc(12.5px * var(--cs-type-scale, 1));
  color: var(--cs-ink2);
}

/* ── 関連アプリ（受け口の GameNetworkNav.module.css） ─────────────────────── */

.cs-gn {
  margin: 16px 0 0;
  padding: 8px 0 0;
  border-top: 1px solid var(--cs-hair);
  min-width: 0;
}

.cs-gn-heading {
  font-size: calc(14px * var(--cs-type-scale, 1));
  line-height: 1.7;
  font-weight: 600;
  color: var(--cs-ink2);
  margin: 0;
}

.cs-gn-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  row-gap: 8px;
  min-width: 0;
}

.cs-gn-list li {
  min-width: 0;
}

.cs-gn-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  min-width: 44px;
  max-width: 100%;
  color: var(--cs-accent);
  text-decoration: none;
  font-size: calc(15px * var(--cs-type-scale, 1));
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.cs-gn-link:hover {
  text-decoration: underline;
}

.cs-gn-link:focus-visible {
  outline: 2px solid var(--cs-focus, var(--cs-accent));
  outline-offset: 3px;
}

.cs-gn-operator {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 4px;
  margin: 8px 0 0;
  font-size: calc(14px * var(--cs-type-scale, 1));
  line-height: 1.7;
  color: var(--cs-ink2);
}

@media (min-width: 768px) {
  .cs-gn-list {
    flex-direction: row;
    flex-wrap: wrap;
    column-gap: 20px;
  }
}

/* ── 盤面図の説明の字（受け口の ColumnDiagram.module.css は px × --type-scale。diagram.css の rem は根の字の大きさに引っ張られるので上書き） ── */

.cs-body .cd-caption {
  font-size: calc(14px * var(--cs-type-scale, 1));
}

.cs-body .cd-details {
  font-size: calc(13px * var(--cs-type-scale, 1));
}

/* ── 画面下に貼り付くストアのバー（受け口の LP の .stickyCta と同じ形・Document.tsx の StoreBar）─────────────── */

/*
 * LP は観測器（JS）で出し入れするが、ここは script を増やさないので常に出す。本文の最後・フッター・関連アプリ欄を覆わないよう、
 * バーが出るページだけ本文の器の下にバーの高さぶんの余白を取る（.cs-scroll-storebar）。
 * z-index はヘッダー（.cs-bar・2）より下：言語の切り替えの一覧が長く画面の下まで届いても、一覧のほうが上に出る。
 */
:root {
  --cs-storebar-badge-height: 44px;
  --cs-storebar-pad: 8px;
}

.cs-storebar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  padding: var(--cs-storebar-pad) 16px calc(var(--cs-storebar-pad) + env(safe-area-inset-bottom, 0px));
  /* 地はヘッダー（.cs-bar）と同じ不透明の paper（--cs-panel は半透明のサイトがあり、下の絵が透ける） */
  background: var(--cs-paper);
  border-top: 1px solid var(--cs-hair);
}

.cs-storebar-inner {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin: 0 auto;
  max-width: var(--cs-content-width);
}

/* サイトの CSS（sites/*.css）が .cs-badge・.cs-badge-link を 56px にするので、バーの中は 2 つの class で上書きする（バーの高さと余白の計算を揃える） */
.cs-storebar .cs-storebar-link {
  flex: 0 1 auto;
  min-width: 0;
  min-height: 44px;
}

/* バッジは img の width・height 属性（CLS）を持つので、高さを決めて幅は比で出す */
.cs-storebar .cs-storebar-badge {
  height: var(--cs-storebar-badge-height);
  width: auto;
  max-width: 100%;
}

.cs-scroll-storebar {
  padding-bottom: calc(var(--cs-storebar-badge-height) + 2 * var(--cs-storebar-pad) + 1px + env(safe-area-inset-bottom, 0px));
}

/* 狭い電話（〜359px）は 2 つのバッジが 1 行に収まるよう少し小さくする（押せる高さは .cs-badge-link の 44px のまま） */
@media (max-width: 359px) {
  :root {
    --cs-storebar-badge-height: 38px;
  }

  .cs-storebar {
    padding-left: 12px;
    padding-right: 12px;
  }

  .cs-storebar-inner {
    gap: 8px;
  }
}

@media print {
  .cs-storebar {
    display: none;
  }

  .cs-scroll-storebar {
    padding-bottom: 0;
  }
}


/* ==========================================================================
   src/lib/column-diagram/diagram.css
   盤面図の見た目（docs/specs/column-diagram-spec.md §5・§6）。SVG の中は class だけで、色・線・字の大きさはここ。
   - 色は --diagram-* のトークンだけ（light / dark）。SVG の中に生の hex は 0（描画器が作れない）。
   - 受け口は Column.module.css に写す。CSS Modules ではクラス名が書き換わるので、`.cd-*` は :global で包むこと。
   - 字の大きさは viewBox の単位（SVG の中の font-size は利用者座標）。375 幅で座標ラベルが 11px 以上になる値。
   - コントラストの組は test/unit/column-diagram-render/contrast.test.ts が計算して固定する（DG-9）。
   ========================================================================== */

:root {
  --diagram-page: var(--paper, #faf6ee);
  --diagram-ink: #241d13;
  --diagram-ink2: #5b4d43;
  --diagram-font-piece: 'Hiragino Mincho ProN', 'Yu Mincho', 'YuMincho', 'Noto Serif CJK JP', 'Noto Serif JP', serif;
  --diagram-font-ui: ui-sans-serif, system-ui, 'Hiragino Sans', sans-serif;

  /* リバーシ */
  --diagram-rv-board: #9a8339;
  --diagram-rv-line: #1b1608;
  --diagram-rv-black: #1d1a17;
  --diagram-rv-white: #f7f2e7;
  --diagram-rv-odd: #86d6e9;
  --diagram-rv-hatch: #0e3a47;
  --diagram-rv-even: #efe7d6;
  --diagram-rv-badge-odd: #0e3a47;
  --diagram-rv-badge-even: #4a3c28;
  --diagram-rv-badge-text: #ffffff;
  --diagram-rv-halo: #120e06;
  --diagram-rv-good: #d8f6ff;
  --diagram-rv-danger: #ffc2b3;
  --diagram-rv-num-dark: #1b1608;
  --diagram-rv-num-light: #ffffff;

  /* チェス */
  --diagram-ch-light: #eee2cb;
  --diagram-ch-dark: #b38b67;
  --diagram-ch-frame: #3b2f27;
  --diagram-ch-white: #fbf8f1;
  --diagram-ch-black: #2b2622;
  --diagram-ch-edge: #1d1916;
  --diagram-ch-detail-on-black: #fbf8f1;
  --diagram-ch-last: #e6c74f;
  --diagram-ch-focus: #2f6fd0;
  --diagram-ch-good: #1f7a44;
  --diagram-ch-bad: #b3261e;
  --diagram-ch-main: #1f7a44;
  --diagram-ch-alt: #2f6fd0;
  --diagram-ch-threat: #b3261e;
  --diagram-ch-halo: #1d1916;

  /* 将棋 */
  --diagram-sg-board: #e6c78c;
  --diagram-sg-line: #3b2a14;
  --diagram-sg-stand: #ecd6ab;
  --diagram-sg-hand-ink: #3b2a14;
  --diagram-sg-piece: #f7e7c4;
  --diagram-sg-edge: #6b4a24;
  --diagram-sg-glyph: #1a1410;
  --diagram-sg-promoted: #a31f17;
  --diagram-sg-mark: #8e1a10;
  --diagram-sg-mark-halo: #fff6df;
  --diagram-sg-last: #d9a441;
  --diagram-sg-arrow-halo: #fff6df;

  /* 麻雀 */
  --diagram-mj-face: #fbf7ee;
  --diagram-mj-side: #b98f3e;
  --diagram-mj-outline: #5e5040;
  --diagram-mj-back: #2c6b58;
  --diagram-mj-ink: #1b1813;
  --diagram-mj-red: #c0281c;
  --diagram-mj-green: #17703f;
  --diagram-mj-blue: #1d4f94;
  --diagram-mj-hl: #a86300;
  --diagram-mj-label: #5b5347;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --diagram-page: var(--paper, #16130f);
    --diagram-ink: #e8dcc4;
    --diagram-ink2: #c9bfae;
    --diagram-rv-line: #120e04;
    --diagram-rv-even: #ddd3bd;
    --diagram-ch-light: #d9cbb0;
    --diagram-ch-dark: #8f6c4f;
    --diagram-ch-frame: #0b0907;
    --diagram-sg-board: #c9a86a;
    --diagram-sg-line: #2a1c0b;
    --diagram-sg-stand: #4a3a22;
    --diagram-sg-hand-ink: #f0e4cc;
    --diagram-sg-piece: #eedcb2;
    --diagram-mj-face: #f3ecdc;
    --diagram-mj-side: #9c7a36;
    --diagram-mj-back: #3a846d;
    --diagram-mj-outline: #0d0c0a;
    --diagram-mj-hl: #ffc247;
    --diagram-mj-label: #c9bfae;
  }
}
:root[data-theme='dark'] {
  --diagram-page: var(--paper, #16130f);
  --diagram-ink: #e8dcc4;
  --diagram-ink2: #c9bfae;
  --diagram-rv-line: #120e04;
  --diagram-rv-even: #ddd3bd;
  --diagram-ch-light: #d9cbb0;
  --diagram-ch-dark: #8f6c4f;
  --diagram-ch-frame: #0b0907;
  --diagram-sg-board: #c9a86a;
  --diagram-sg-line: #2a1c0b;
  --diagram-sg-stand: #4a3a22;
  --diagram-sg-hand-ink: #f0e4cc;
  --diagram-sg-piece: #eedcb2;
  --diagram-mj-face: #f3ecdc;
  --diagram-mj-side: #9c7a36;
  --diagram-mj-back: #3a846d;
  --diagram-mj-outline: #0d0c0a;
  --diagram-mj-hl: #ffc247;
  --diagram-mj-label: #c9bfae;
}

/* ── 図の枠（figure / figcaption / details は受け口の HTML） ─────────────── */
.cd-figure { margin: 1.5rem auto; min-width: 0; max-width: 100%; }
.cd-figure[data-game='reversi'], .cd-figure[data-game='shogi'] { max-width: 440px; }
.cd-figure[data-game='chess'] { max-width: 460px; }
.cd-figure[data-game='mahjong'] { max-width: 640px; }
.cd-svg { display: block; width: 100%; height: auto; max-width: 100%; }
.cd-caption { margin-top: 0.5rem; font-size: 0.875rem; line-height: 1.6; color: var(--diagram-ink2); }
.cd-details { margin-top: 0.25rem; font-size: 0.8125rem; line-height: 1.6; color: var(--diagram-ink2); }
.cd-details summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; }
.cd-details p { margin: 0.25rem 0; overflow-wrap: anywhere; }

/* 盤の外の座標（ページの地の上） */
.cd-coord { fill: var(--diagram-ink); font-family: var(--diagram-font-ui); font-weight: 600; }

/* 矢印（チェス・将棋共通）。halo は軸より太い縁取り */
.cd-arrow-shaft, .cd-arrow-halo { fill: none; stroke-linejoin: round; stroke-linecap: butt; }
.cd-arrow-head-halo { stroke-linejoin: round; }

/* ── リバーシ ─────────────────────────────────────────────────────────── */
.cd-rv-coord { font-size: 13px; }
.cd-rv-board { fill: var(--diagram-rv-board); }
.cd-rv-grid { fill: none; stroke: var(--diagram-rv-line); stroke-width: 1.2; }
.cd-rv-frame { fill: none; stroke: var(--diagram-rv-line); stroke-width: 2.4; }
.cd-rv-star { fill: var(--diagram-rv-line); }
.cd-rv-region-odd { fill: var(--diagram-rv-odd); }
.cd-rv-region-even { fill: var(--diagram-rv-even); }
.cd-rv-hatch { fill: none; stroke: var(--diagram-rv-hatch); stroke-width: 1.6; stroke-opacity: 0.55; }
.cd-rv-badge-odd { fill: var(--diagram-rv-badge-odd); }
.cd-rv-badge-even { fill: var(--diagram-rv-badge-even); }
.cd-rv-badge-text { fill: var(--diagram-rv-badge-text); font-family: var(--diagram-font-ui); font-weight: 700; font-size: 11.5px; }
.cd-rv-disc { stroke: var(--diagram-rv-line); stroke-width: 1.4; }
.cd-rv-disc-b { fill: var(--diagram-rv-black); }
.cd-rv-disc-w { fill: var(--diagram-rv-white); }
.cd-rv-rim { fill: none; stroke-width: 1.2; }
.cd-rv-rim-b { stroke: var(--diagram-rv-white); stroke-opacity: 0.2; }
.cd-rv-rim-w { stroke: var(--diagram-rv-black); stroke-opacity: 0.18; }
.cd-rv-last-on-b { fill: var(--diagram-rv-white); }
.cd-rv-last-on-w { fill: var(--diagram-rv-black); }
/* 印の枠：暗い縁取り（halo）＋明るい芯。盤の色がライト／ダークで変わっても 3:1 を保つ */
.cd-rv-ring-halo { fill: none; stroke: var(--diagram-rv-halo); stroke-width: 5.5; }
.cd-rv-ring { fill: none; stroke-width: 2.4; }
.cd-rv-ring-good { stroke: var(--diagram-rv-good); }
.cd-rv-ring-danger { stroke: var(--diagram-rv-danger); stroke-dasharray: 5 3; }
.cd-rv-dot { fill: var(--diagram-rv-good); stroke: var(--diagram-rv-halo); stroke-width: 2; }
.cd-rv-cross-halo { fill: none; stroke: var(--diagram-rv-halo); stroke-width: 6; stroke-linecap: round; }
.cd-rv-cross { fill: none; stroke: var(--diagram-rv-danger); stroke-width: 2.6; stroke-linecap: round; }
.cd-rv-cand-halo { fill: none; stroke: var(--diagram-rv-halo); stroke-width: 5; }
.cd-rv-cand { fill: none; stroke: var(--diagram-rv-good); stroke-width: 2; }
.cd-rv-num { font-family: var(--diagram-font-ui); font-weight: 700; font-size: 17px; }
.cd-rv-num-on-b { fill: var(--diagram-rv-num-light); }
.cd-rv-num-on-w, .cd-rv-num-on-e { fill: var(--diagram-rv-num-dark); }

/* ── チェス ───────────────────────────────────────────────────────────── */
.cd-ch-coord { font-size: 30px; }
.cd-ch-sq-l { fill: var(--diagram-ch-light); }
.cd-ch-sq-d { fill: var(--diagram-ch-dark); }
.cd-ch-frame { fill: none; stroke: var(--diagram-ch-frame); stroke-width: 4; }
.cd-ch-last { fill: var(--diagram-ch-last); fill-opacity: 0.55; }
.cd-ch-hl { fill-opacity: 0.35; }
.cd-ch-hl-focus { fill: var(--diagram-ch-focus); }
.cd-ch-hl-good { fill: var(--diagram-ch-good); }
.cd-ch-hl-bad { fill: var(--diagram-ch-bad); }
.cd-ch-ring-halo { fill: none; stroke: var(--diagram-ch-halo); stroke-width: 10; }
.cd-ch-ring { fill: none; stroke-width: 5; }
.cd-ch-ring-focus { stroke: var(--diagram-ch-focus); }
.cd-ch-ring-good { stroke: var(--diagram-ch-good); }
.cd-ch-ring-bad { stroke: var(--diagram-ch-bad); stroke-dasharray: 12 7; }
.cd-ch-body { stroke: var(--diagram-ch-edge); stroke-width: 3.6; stroke-linejoin: round; }
.cd-ch-pc-w .cd-ch-body { fill: var(--diagram-ch-white); }
.cd-ch-pc-b .cd-ch-body { fill: var(--diagram-ch-black); }
.cd-ch-detail { fill: none; stroke-width: 3.4; stroke-linecap: round; }
.cd-ch-pc-w .cd-ch-detail { stroke: var(--diagram-ch-edge); }
.cd-ch-pc-b .cd-ch-detail { stroke: var(--diagram-ch-detail-on-black); }
.cd-ch-pc-w .cd-ch-eye { fill: var(--diagram-ch-edge); }
.cd-ch-pc-b .cd-ch-eye { fill: var(--diagram-ch-detail-on-black); }
.cd-ch-arrow .cd-arrow-shaft { stroke-width: 13; }
.cd-ch-arrow .cd-arrow-halo { stroke: var(--diagram-ch-halo); stroke-width: 19; }
.cd-ch-arrow .cd-arrow-head-halo { fill: var(--diagram-ch-halo); stroke: var(--diagram-ch-halo); stroke-width: 6; }
.cd-ch-arrow-main .cd-arrow-shaft { stroke: var(--diagram-ch-main); }
.cd-ch-arrow-main .cd-arrow-head { fill: var(--diagram-ch-main); }
.cd-ch-arrow-alt .cd-arrow-shaft { stroke: var(--diagram-ch-alt); }
.cd-ch-arrow-alt .cd-arrow-head { fill: var(--diagram-ch-alt); }
.cd-ch-arrow-threat .cd-arrow-shaft { stroke: var(--diagram-ch-threat); stroke-dasharray: 22 12; }
.cd-ch-arrow-threat .cd-arrow-head { fill: var(--diagram-ch-threat); }

/* ── 将棋 ─────────────────────────────────────────────────────────────── */
.cd-sg-coord { font-size: 14px; font-family: var(--diagram-font-piece); }
.cd-sg-board { fill: var(--diagram-sg-board); }
.cd-sg-grid { fill: none; stroke: var(--diagram-sg-line); stroke-width: 1; }
.cd-sg-frame { fill: none; stroke: var(--diagram-sg-line); stroke-width: 2.2; }
.cd-sg-star { fill: var(--diagram-sg-line); }
.cd-sg-stand { fill: var(--diagram-sg-stand); }
.cd-sg-hand-label, .cd-sg-count { fill: var(--diagram-sg-hand-ink); font-family: var(--diagram-font-piece); font-weight: 600; }
.cd-sg-hand-label { font-size: 14px; }
.cd-sg-count { font-size: 13px; }
.cd-sg-piece-body { fill: var(--diagram-sg-piece); stroke: var(--diagram-sg-edge); stroke-width: 1.1; }
.cd-sg-glyph { fill: var(--diagram-sg-glyph); font-family: var(--diagram-font-piece); font-weight: 600; font-size: 21px; }
.cd-sg-glyph-hand { font-size: 16px; }
.cd-sg-promoted .cd-sg-glyph { fill: var(--diagram-sg-promoted); }
.cd-sg-last-from { fill: var(--diagram-sg-last); fill-opacity: 0.3; }
.cd-sg-last-to { fill: var(--diagram-sg-last); fill-opacity: 0.65; }
/* 直前の一手の枠は駒の上。明るい縁取り＋濃い赤で、盤にも駒にも 3:1 */
.cd-sg-last-ring-halo { fill: none; stroke: var(--diagram-sg-mark-halo); stroke-width: 5; }
.cd-sg-last-ring { fill: none; stroke: var(--diagram-sg-mark); stroke-width: 2.6; }
.cd-sg-hl { fill: var(--diagram-sg-mark); fill-opacity: 0.2; }
.cd-sg-hl-ring { fill: none; stroke: var(--diagram-sg-mark); stroke-width: 1.6; stroke-dasharray: 4 3; }
.cd-sg-arrow .cd-arrow-shaft { stroke: var(--diagram-sg-mark); stroke-width: 4; }
.cd-sg-arrow .cd-arrow-halo { stroke: var(--diagram-sg-arrow-halo); stroke-width: 7; }
.cd-sg-arrow .cd-arrow-head-halo { fill: var(--diagram-sg-arrow-halo); stroke: var(--diagram-sg-arrow-halo); stroke-width: 3; }
.cd-sg-arrow .cd-arrow-head { fill: var(--diagram-sg-mark); }

/* ── 麻雀 ─────────────────────────────────────────────────────────────── */
.cd-mj-label { fill: var(--diagram-mj-label); font-family: var(--diagram-font-ui); font-size: 15.5px; }
.cd-mj-face { fill: var(--diagram-mj-face); stroke: var(--diagram-mj-outline); stroke-width: 1; }
.cd-mj-side { fill: var(--diagram-mj-side); stroke: var(--diagram-mj-outline); stroke-width: 1; }
.cd-mj-back { fill: var(--diagram-mj-back); stroke: var(--diagram-mj-outline); stroke-width: 1; }
.cd-mj-ik { fill: var(--diagram-mj-ink); }
.cd-mj-ir { fill: var(--diagram-mj-red); }
.cd-mj-ig { fill: var(--diagram-mj-green); }
.cd-mj-ib { fill: var(--diagram-mj-blue); }
.cd-mj-iv { fill: var(--diagram-mj-face); }
.cd-mj-node { fill: none; stroke: var(--diagram-mj-face); stroke-width: 1; }
.cd-mj-wing { fill: none; stroke: var(--diagram-mj-face); stroke-width: 1.2; }
.cd-mj-num { fill: none; stroke: var(--diagram-mj-ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.cd-mj-num-r { stroke: var(--diagram-mj-red); }
.cd-mj-man { fill: var(--diagram-mj-red); font-family: var(--diagram-font-piece); font-weight: 700; font-size: 15px; }
.cd-mj-honor { font-family: var(--diagram-font-piece); font-weight: 700; font-size: 23px; }
.cd-mj-haku { fill: none; stroke: var(--diagram-mj-blue); stroke-width: 2; }
.cd-mj-haku2 { fill: none; stroke: var(--diagram-mj-blue); stroke-width: 0.9; }
.cd-mj-red-dot { fill: var(--diagram-mj-red); }
.cd-mj-hl-ring { fill: none; stroke: var(--diagram-mj-hl); stroke-width: 2.4; }
.cd-mj-hl-mark { fill: var(--diagram-mj-hl); }


/*
 * edo のコラムの版面（column-public.css の後ろに css.ts が足す・edo だけ）。受け口 edo の
 * apps/web/src/components/column/Column.module.css（feat/column-serve-db の時点）が othero と違うところの写し。
 * edo は othero と別に版面を組んだので、パンくずに帯（sticky の .bar）が無く、本文の器（.inner）の中にパンくずを置く。
 * 字の大きさ・行の高さ・余白は受け口と同じ値。色はトークン（--cs-*）だけ。受け口を直したら、ここも同じ日に直す
 * （受け口の main の元の CSS の sha256 を config/column/site-css-sources.json に持ち、受け口の見張り receiver-drift が照合する）。
 */

/* 本文の器（受け口の .inner）: 上は safe-area + 12px・下は + 48px。パンくずも同じ器の中 */
.cs-bar {
  position: static;
  background: transparent;
  border-bottom: 0;
  padding: calc(env(safe-area-inset-top, 0px) + 12px) 20px 0;
}

.cs-crumbs {
  max-width: calc(var(--cs-content-width) - 40px);
}

.cs-crumbs ol {
  column-gap: 8px;
  margin: 0 0 16px;
  font-size: calc(13px * var(--cs-type-scale, 1));
  line-height: 1.6;
  color: var(--cs-ink3);
}

.cs-crumbs li {
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}

/* 区切りは「›」の字ではなく、回した罫の山形（受け口の .crumbs li + li::before） */
.cs-crumbs li + li::before {
  content: '';
  flex: none;
  width: 5px;
  height: 5px;
  margin-right: 8px;
  border-right: 1px solid var(--cs-ink3);
  border-top: 1px solid var(--cs-ink3);
  transform: rotate(45deg);
}

.cs-crumbs .cs-crumb-current {
  max-width: 100%;
}

.cs-main {
  padding: 0 20px;
}

.cs-title {
  font-size: clamp(22px, 6vw, 30px);
  margin: 0 0 12px;
}

.cs-lead {
  font-size: calc(15px * var(--cs-type-scale, 1));
  line-height: 1.9;
  color: var(--cs-ink2);
  margin: 0 0 24px;
}

.cs-dates {
  margin: 0 0 16px;
  font-size: calc(13px * var(--cs-type-scale, 1));
  line-height: inherit;
  color: var(--cs-ink3);
}

.cs-figure {
  margin: 0 0 20px;
}

.cs-body {
  font-size: calc(15.5px * var(--cs-type-scale, 1));
  line-height: 1.95;
}

/* 見出しは太さを指定しない（ブラウザの既定の bold）・h2 の字は 20px × 倍率 */
.cs-body h2 {
  font-size: calc(20px * var(--cs-type-scale, 1));
  line-height: 1.5;
  font-weight: bold;
}

.cs-body h3 {
  font-weight: bold;
}

.cs-body p,
.cs-body li {
  font-size: inherit;
  line-height: inherit;
}

.cs-body ul,
.cs-body ol {
  margin: 0 0 16px;
}

.cs-body li {
  margin: 0 0 6px;
}

.cs-body a {
  text-underline-offset: auto;
}

.cs-body blockquote {
  margin: 0 0 16px;
  padding: 4px 0 4px 14px;
  border-left: 2px solid var(--cs-edge, var(--cs-hair));
  background: transparent;
  border-radius: 0;
  color: var(--cs-ink2);
}

.cs-table-wrap {
  margin: 0 0 16px;
}

.cs-table {
  font-size: calc(14px * var(--cs-type-scale, 1));
}

.cs-table caption {
  color: var(--cs-ink3);
  font-size: inherit;
}

.cs-table th,
.cs-table td {
  padding: 6px 8px;
}

.cs-table th {
  font-weight: bold;
}

/* 導線の箱（受け口の .cta）: 枠と地のある箱・中央揃え */
.cs-cta {
  margin: 28px 0;
  padding: 18px 16px;
  border: 1px solid var(--cs-edge, var(--cs-hair));
  border-radius: var(--cs-radius);
  background: var(--cs-panel);
  text-align: center;
}

/* 本文の中の導線は .cs-body p より強く当てる（受け口は .ctaHeading・.ctaLead が本文の p に勝つ） */
.cs-cta .cs-cta-heading {
  font-size: calc(13px * var(--cs-type-scale, 1));
  line-height: inherit;
  font-weight: normal;
  letter-spacing: 0.14em;
  color: var(--cs-ink3);
  margin: 0 0 10px;
}

.cs-cta .cs-cta-lead {
  font-size: calc(14.5px * var(--cs-type-scale, 1));
  line-height: 1.85;
  color: inherit;
  margin: 0 0 14px;
}

/* 記事の本文の中の導線だけ、見出しと導入の下は 16px（受け口では本文の .body p の余白が .ctaHeading・.ctaLead に勝つ。
 * 本番の計算値に合わせる。一覧のページの導線は本文の外なので 10px・14px のまま） */
.cs-body .cs-cta-heading,
.cs-body .cs-cta-lead {
  margin-bottom: 16px;
}

.cs-cta-thumb .cs-cta-lead {
  margin-bottom: 0;
}

.cs-cta-thumb {
  text-align: left;
}

.cs-cta-thumb-image {
  border: 1px solid var(--cs-edge, var(--cs-hair));
  background: transparent;
}

.cs-store-block {
  display: block;
  margin: 0;
}

/* 公式バッジの並び（受け口の Landing.module.css の .storeBadges・.badgeLink） */
.cs-store-row {
  align-items: center;
  margin: 0 0 10px;
}

.cs-badge-link {
  min-height: 56px;
}

.cs-badge {
  height: 56px;
  max-width: 100%;
}

.cs-screen {
  text-align: center;
}

.cs-screen-image {
  border: 1px solid var(--cs-edge, var(--cs-hair));
  background: transparent;
}

.cs-screen-caption {
  font-size: calc(13px * var(--cs-type-scale, 1));
  color: var(--cs-ink3);
  text-align: left;
}

.cs-faq {
  margin: 32px 0 0;
}

.cs-faq-item {
  padding: 0;
  border-bottom: 0;
}

.cs-notes {
  padding-top: 14px;
}

.cs-notes .cs-note {
  font-size: calc(12.5px * var(--cs-type-scale, 1));
  line-height: 1.8;
  color: var(--cs-ink3);
}

/* 親サイトのコラムの一覧への導線（受け口の .parentHub）。本文と同じ器の幅 */
.cs-parent-hub {
  max-width: var(--cs-content-width);
  margin: 32px auto 0;
  padding: 0 20px calc(env(safe-area-inset-bottom, 0px) + 48px);
  font-size: calc(14px * var(--cs-type-scale, 1));
}

.cs-parent-hub a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--cs-accent);
}

.cs-back {
  margin: 24px 0 0;
  font-size: calc(15px * var(--cs-type-scale, 1));
}