/* =========================================================================
   くわだて事例紹介（info.misawa-tokokoto.com/case・/case/<slug>）
   - トークン・ヘッダー・フッター・.reveal は hub.css / tokens.css、締めのCTAは workation.css を再利用。
   - 世界観は料金シミュレーターと同じ: 白カード + 2px墨枠 + 角丸0 + フラット / 2px点線罫線 /
     イチョウ色（線・文字 #c79a3b・ベタ #f0b71f）。新しい色は足さない。
   - 見出しはシミュレーター・ご案内ページと同じ **りいクッキー（Rii Cookie）**。ただし記事は KV から出てきて
     ビルド時に文字が決まらないので、hub 用のサブセットではなく**全文字入り（8,207字・約1.5MB）**を
     /case 専用に置き、同じ family 名で上書き定義する（tokens.css のサブセットより後に読まれるのでこちらが勝つ）。
     1ウェイトしか無いので見出しに font-weight:700 を当てない（合成ボールドで潰れる）。
     本文は Noto Sans JP。記事は500〜1,000字なので、本文 15px／行間2 で読みやすさを優先。
   - 記事の中身（.cs-art 以下）は misawa-cockpit の管理画面プレビューも同じ CSS を読む。
     クラス名を変えるときは functions/_lib/case-render.js（＝cockpit の case-render.mjs）と合わせる。
   ========================================================================= */

@font-face {
  font-family: "Rii Cookie";
  src: url("./fonts/RiiCookieR.woff2?v=20261011a") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
:root { --font-case: "Rii Cookie", "Zen Maru Gothic", "Noto Sans JP", sans-serif; }
[id] { scroll-margin-top: 116px; }
@media (max-width: 760px) { [id] { scroll-margin-top: 84px; } }

/* ====================== ページの頭 ====================== */
.cs-head { padding: clamp(34px, 5.4vw, 64px) 0 0; text-align: center; }
.cs-head__t { font-family: var(--font-case); font-weight: 400; font-size: clamp(30px, 3.6vw, 42px); letter-spacing: .06em; line-height: 1.3; margin: 0; color: var(--color-ink); display: inline-block; padding-bottom: 12px; background:
  linear-gradient(var(--color-ink), var(--color-ink)) left bottom / calc(100% - 26px) 2px no-repeat,
  linear-gradient(var(--color-ink), var(--color-ink)) right bottom / 16px 2px no-repeat; }
.cs-head__lead { max-width: 40em; margin: 18px auto 0; font-size: 14px; line-height: 2; letter-spacing: .05em; color: var(--color-ink); text-align: left; }
@media (max-width: 620px) { .cs-head__lead { font-size: 13px; } }

/* ====================== タグで絞る ====================== */
.cs-filter { margin-top: clamp(22px, 3vw, 34px); background: var(--color-white); border: var(--border-card); padding: 14px 16px 12px; }
.cs-filter__h { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.cs-filter__k { font-family: var(--font-case); font-weight: 400; font-size: 17px; letter-spacing: .06em; }
.cs-filter__k small { font-family: var(--font-body); font-size: 11px; font-weight: var(--fw-bold); color: var(--color-sub); margin-left: 8px; letter-spacing: .04em; }
/* 絞り込みのタグは、記事に付いているタグ（.cs-tags）と同じ小ささ（2026-10-11 井上さん指示） */
.cs-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.cs-chip { display: inline-flex; align-items: baseline; gap: 4px; border: 1px solid var(--color-accent); background: #fff; color: var(--color-sub); border-radius: 999px; padding: 2px 10px; font-size: 10.5px; font-weight: var(--fw-bold); letter-spacing: .04em; line-height: 1.7; cursor: pointer; font-family: var(--font-body); transition: border-color var(--t-fast), background var(--t-fast), color var(--t-fast); }
.cs-chip small { font-size: 9px; font-weight: 500; color: var(--color-sub); }
.cs-chip:hover { background: var(--color-accent-wash); color: var(--color-ink); }
.cs-chip.is-on { background: var(--color-accent-fill); border-color: var(--color-accent-fill); color: #2a2113; }
.cs-chip.is-on small { color: #2a2113; }

/* ---- タグの色分け（カテゴリ）。色名は case-render の TAG_COLORS と対。値は tokens.css にある色だけ使う ----
   線と文字＝その色、地＝白に少し混ぜた色。選択中＝その色のベタ塗りに白文字（黄だけ墨文字） */
.cs-chip--yellow, .cs-tag--yellow { --tc: var(--color-accent); --tc-ink: #2a2113; }
.cs-chip--green,  .cs-tag--green  { --tc: var(--color-success); --tc-ink: #fff; }
.cs-chip--blue,   .cs-tag--blue   { --tc: var(--color-link); --tc-ink: #fff; }
.cs-chip--red,    .cs-tag--red    { --tc: var(--color-error); --tc-ink: #fff; }
.cs-chip--brown,  .cs-tag--brown  { --tc: var(--color-accent-deep); --tc-ink: #fff; }
.cs-chip--gray,   .cs-tag--gray   { --tc: var(--color-hover); --tc-ink: #fff; }
/* 塗りは付けない（枠線の色だけ。2026-10-11 井上さん指示）。選択中だけベタ塗り */
.cs-chip[class*="cs-chip--"]:not(.cs-chip--all) { border-color: var(--tc); color: var(--color-ink); background: #fff; }
.cs-chip[class*="cs-chip--"]:not(.cs-chip--all):hover { background: color-mix(in srgb, var(--tc) 12%, #fff); }
/* 「すべて」は分類の色と紛れないよう墨の枠。選択中は墨のベタ */
.cs-chip--all { border-color: var(--color-ink); color: var(--color-ink); }
.cs-chip--all:hover { background: var(--color-bg); }
.cs-chip--all.is-on { background: var(--color-ink); border-color: var(--color-ink); color: #fff; }
.cs-chip--all.is-on small { color: #fff; opacity: .8; }
.cs-chip[class*="cs-chip--"]:not(.cs-chip--all).is-on { background: var(--tc); border-color: var(--tc); color: var(--tc-ink); }
.cs-chip[class*="cs-chip--"]:not(.cs-chip--all).is-on small { color: var(--tc-ink); opacity: .85; }
.cs-chip--yellow.is-on { background: var(--color-accent-fill); border-color: var(--color-accent-fill); }
.cs-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 10.5px; font-weight: var(--fw-bold); color: var(--color-sub); letter-spacing: .04em; }
.cs-legend__i { display: inline-flex; align-items: center; gap: 5px; }
.cs-legend__i::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--tc, var(--color-hover)); }
.cs-legend__i--yellow { --tc: var(--color-accent-fill); } .cs-legend__i--green { --tc: var(--color-success); } .cs-legend__i--blue { --tc: var(--color-link); }
.cs-legend__i--red { --tc: var(--color-error); } .cs-legend__i--brown { --tc: var(--color-accent-deep); } .cs-legend__i--gray { --tc: var(--color-hover); }
/* 記事・カードのタグも同じ色（線だけ。地は白のまま） */
.cs-tags li a[class*="cs-tag--"], .cs-tags li span[class*="cs-tag--"], .cs-card__tags span[class*="cs-tag--"] { border-color: var(--tc); background: #fff; }
.cs-tags li a[class*="cs-tag--"]:hover { background: var(--tc); color: var(--tc-ink); }
.cs-filter__more { margin: 10px 0 0; text-align: center; }
.cs-filter__more button { font: inherit; font-size: 11.5px; font-weight: var(--fw-bold); border: 0; background: transparent; color: var(--color-sub); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.cs-filter[data-collapsed="1"] .cs-chip:nth-child(n+25) { display: none; }
.cs-filter:not([data-collapsed="1"]) .cs-filter__more { display: none; }

.cs-result { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 18px 0 10px; font-size: 12.5px; color: var(--color-sub); letter-spacing: .04em; }
.cs-result b { font-family: var(--font-case); font-weight: 400; font-size: 20px; color: var(--color-ink); margin-right: 3px; letter-spacing: .02em; }
.cs-result__clear { font: inherit; font-size: 11.5px; font-weight: var(--fw-bold); border: 0; background: transparent; color: var(--color-sub); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.cs-result__clear[hidden] { display: none; }

/* ====================== 一覧カード ====================== */
.cs-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 980px) { .cs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }
@media (max-width: 620px) { .cs-grid { gap: 9px; } }
.cs-empty { grid-column: 1 / -1; border: var(--border-card); background: var(--color-white); padding: 28px 16px; text-align: center; font-size: 13px; color: var(--color-sub); }
.cs-empty[hidden] { display: none; }

.cs-card { position: relative; display: flex; flex-direction: column; background: var(--color-white); border: var(--border-card); border-radius: var(--radius-card); overflow: hidden; color: var(--color-ink); transition: box-shadow var(--t-fast), transform var(--t-fast); }
.cs-card:hover, .cs-card:focus-visible { box-shadow: 0 0 0 3px var(--color-accent); transform: translateY(-2px); outline: none; }
.cs-card.is-hidden { display: none; }
.cs-card__media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #ddd; border-bottom: var(--border-card); display: block; }
.cs-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; display: block; }
.cs-card:hover .cs-card__media img { transform: scale(1.04); }
.cs-card__noimg { display: block; width: 100%; height: 100%; background: repeating-linear-gradient(135deg, #e6e6e6 0 10px, #efefef 10px 20px); }
.cs-card__bd { padding: 12px 14px 38px; flex: 1; display: flex; flex-direction: column; gap: 6px; }
.cs-card__tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.cs-card__tags span { font-size: 10px; font-weight: var(--fw-bold); letter-spacing: .04em; color: var(--color-sub); border: 1px solid var(--color-accent); border-radius: 999px; padding: 0 7px; line-height: 1.7; }
.cs-card__t { font-family: var(--font-case); font-weight: 400; font-size: 17.5px; letter-spacing: .04em; line-height: 1.5; color: var(--color-ink); }
/* 「誰が」は説明文と見分けがつき、長い文でも崩れない形: 左に小さな「誰が」ラベル、右に折り返す本文、上に点線（2026-10-11 井上さん指示） */
.cs-card__who { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 8px; align-items: baseline; margin-top: 4px; padding-top: 7px; border-top: 2px dotted var(--color-rule); font-size: 11.5px; font-weight: var(--fw-bold); color: var(--color-ink); letter-spacing: .03em; line-height: 1.65; }
.cs-card__who::before { content: "誰が"; font-size: 9.5px; font-weight: var(--fw-bold); letter-spacing: .1em; color: var(--color-sub); white-space: nowrap; }
.cs-card__lead { font-size: 12px; line-height: 1.85; color: var(--color-ink); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cs-card__arw { position: absolute; right: 12px; bottom: 10px; font-size: 16px; color: var(--color-ink); transition: transform var(--t-fast); }
.cs-card:hover .cs-card__arw { transform: translateX(4px); }
@media (max-width: 620px) {
  .cs-card__bd { padding: 9px 10px 30px; gap: 4px; }
  .cs-card__t { font-size: 15px; }
  .cs-card__tags span { font-size: 9px; }
  .cs-card__lead { display: none; }
  .cs-card__who { font-size: 10.5px; }
  .cs-card__arw { right: 9px; bottom: 7px; font-size: 14px; }
}

/* ====================== 締めの CTA（workation.css の .wk-close を使う） ====================== */
.cs-close { margin-top: clamp(40px, 6vw, 72px); }

/* ====================== 記事（モーダルの中身 ＝ /case/<slug> の中身） ====================== */
.cs-dlg { border: var(--border-card); border-radius: 0; padding: 0; width: min(880px, 100vw - 24px); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); background: var(--color-white); color: var(--color-ink); overflow: hidden; }
.cs-dlg::backdrop { background: rgba(51, 51, 51, .62); }
html:has(dialog.cs-dlg[open]) { overflow: hidden; }
.cs-dlg__bar { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; justify-content: flex-end; gap: 6px; padding: 8px 10px; background: var(--color-white); border-bottom: var(--border-card); }
@media (max-width: 620px) { .cs-dlg__bar { padding: 7px 8px; } .cs-dlg__copy { font-size: 10.5px; padding: 0 8px; height: 32px; } .cs-dlg__x { width: 32px; height: 32px; } }
.cs-dlg__acts { display: inline-flex; gap: 6px; align-items: center; }
.cs-dlg__copy { display: inline-flex; align-items: center; gap: 5px; height: 34px; padding: 0 11px; border: 2px solid var(--color-ink); background: #fff; color: var(--color-ink); border-radius: var(--radius-button); font-family: var(--font-body); font-size: 11.5px; font-weight: var(--fw-bold); letter-spacing: .03em; cursor: pointer; white-space: nowrap; }
.cs-dlg__copy:hover { background: var(--color-accent-soft); }
.cs-dlg__copy.is-done { background: var(--color-accent-fill); border-color: var(--color-accent-fill); color: #2a2113; }
.cs-dlg__x { width: 36px; height: 36px; border: 2px solid var(--color-ink); background: #fff; color: var(--color-ink); border-radius: var(--radius-button); font-size: 18px; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.cs-dlg__x:hover { background: var(--color-accent-soft); }
.cs-dlg__scroll { overflow: auto; max-height: calc(100vh - 32px - 56px); max-height: calc(100dvh - 32px - 56px); overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.cs-prog { height: 3px; background: var(--color-rule); overflow: hidden; position: relative; }
.cs-prog[hidden] { display: none; }
.cs-prog::after { content: ""; position: absolute; left: -40%; top: 0; bottom: 0; width: 40%; background: var(--color-accent-fill); animation: cs-prog 1.1s ease-in-out infinite; }
@keyframes cs-prog { 0% { left: -40%; } 100% { left: 100%; } }
.cs-dlg__loading { padding: 60px 20px; text-align: center; font-size: 13px; color: var(--color-sub); letter-spacing: .06em; }
.cs-dlg__loading[hidden] { display: none; }
.cs-dlg__err { padding: 40px 20px; text-align: center; font-size: 13px; color: var(--color-ink); }
.cs-dlg__err a { color: var(--color-link); text-decoration: underline; }

/* 記事本体。モーダル・単独ページ・管理画面プレビューで共通 */
.cs-art { background: var(--color-white); }
/* ★ width を auto のままにすると、aspect-ratio と max-height の組み合わせで「高さの上限が幅に転送」されて
   写真の右に余白ができる（2026-10-11 井上さん指摘）。width:100% を明示し、高さは clamp で決める。 */
.cs-art__hero { margin: 0; width: 100%; height: clamp(200px, 48vw, 440px); overflow: hidden; border-bottom: var(--border-card); background: #ddd; }
.cs-art__hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cs-art__head { padding: clamp(18px, 3vw, 28px) clamp(16px, 3.4vw, 36px) 6px; }
.cs-tags { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 5px; }
.cs-tags li a, .cs-tags li span { display: inline-block; font-size: 10.5px; font-weight: var(--fw-bold); letter-spacing: .04em; color: var(--color-sub); border: 1px solid var(--color-accent); border-radius: 999px; padding: 1px 9px; line-height: 1.7; text-decoration: none; }
.cs-tags li a:hover { background: var(--color-accent); color: #2a2113; }
.cs-art__t { font-family: var(--font-case); font-weight: 400; font-size: clamp(24px, 3.2vw, 34px); letter-spacing: .05em; line-height: 1.45; margin: 0; color: var(--color-ink); }
.cs-meta { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.cs-meta li { display: inline-flex; align-items: baseline; gap: 6px; background: #fff; border: 1px solid var(--color-rule); border-radius: 999px; padding: 3px 11px 3px 9px; font-size: 12px; font-weight: var(--fw-bold); color: var(--color-ink); line-height: 1.5; }
.cs-meta li::before { font-size: 9.5px; font-weight: var(--fw-bold); letter-spacing: .08em; color: var(--color-sub); }
/* 「誰が」は長い文になるので、ピルではなく1行使う（ラベル＋折り返す本文・下に点線） */
.cs-meta li.cs-meta__who { flex-basis: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 10px; align-items: baseline; border: 0; border-radius: 0; padding: 0 0 8px; margin-bottom: 2px; border-bottom: 2px dotted var(--color-rule); font-size: 13px; line-height: 1.7; }
.cs-meta__who::before { content: "誰が"; }
.cs-meta__size::before { content: "人数"; }
.cs-meta__length::before { content: "日数"; }
.cs-meta__when::before { content: "時期"; }
.cs-art__lead { margin: 16px 0 0; font-size: 15px; line-height: 2; letter-spacing: .04em; color: var(--color-ink); }
.cs-art__secs { padding: 10px clamp(16px, 3.4vw, 36px) clamp(26px, 3.6vw, 40px); display: grid; gap: 14px; }

/* セクション＝白いカード・2px墨枠 */
.cs-sec { background: var(--color-white); border: var(--border-card); padding: 0 clamp(14px, 2.6vw, 24px) clamp(14px, 2.4vw, 22px); }
.cs-sec__head { display: flex; align-items: baseline; gap: 12px; padding: 13px 0 10px; border-bottom: 2px dotted var(--color-rule); margin-bottom: 12px; }
.cs-sec__no { font-family: var(--font-case); font-weight: 400; font-size: 24px; color: var(--color-accent); letter-spacing: .02em; line-height: 1; flex: none; }
.cs-sec__t { font-family: var(--font-case); font-weight: 400; font-size: clamp(18px, 2.2vw, 22px); letter-spacing: .05em; line-height: 1.5; margin: 0; color: var(--color-ink); }

/* 本文 */
.cs-body { font-size: 15px; line-height: 2; letter-spacing: .04em; color: var(--color-ink); }
.cs-body > * + * { margin-top: 14px; }
.cs-body p { margin: 0; }
.cs-body strong { font-weight: var(--fw-bold); color: var(--color-ink); }
.cs-body mark.cs-hl, .cs-art__lead mark.cs-hl { background: linear-gradient(transparent 58%, rgba(240, 183, 31, .38) 58%); color: inherit; padding: 0 .08em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.cs-body u.cs-ul, .cs-art__lead u.cs-ul { text-decoration: none; border-bottom: 2px solid var(--color-accent); padding-bottom: 1px; }
.cs-body a, .cs-art__lead a { color: var(--color-link); text-decoration: underline; text-underline-offset: 3px; }
.cs-body a:hover { opacity: .75; }
.cs-body .cs-h { font-family: var(--font-case); font-weight: 400; font-size: 17px; letter-spacing: .05em; line-height: 1.6; margin-top: 20px; padding-left: 12px; border-left: 0; position: relative; }
.cs-body .cs-h::before { content: ""; position: absolute; left: 0; top: .55em; width: 6px; height: 6px; background: var(--color-accent-fill); }
.cs-body .cs-list { margin: 0; padding-left: 1.5em; }
.cs-body ul.cs-list { list-style: disc; }
.cs-body ol.cs-list { list-style: decimal; }
.cs-body .cs-list li + li { margin-top: 2px; }
.cs-body .cs-quote { margin: 0; padding: 12px 16px; background: var(--color-bg); border: var(--border-card); font-size: 14px; }
.cs-body .cs-quote p { margin: 0; }
.cs-body .cs-fig { margin: 0; }
.cs-body .cs-fig img { width: 100%; height: auto; display: block; border-radius: var(--radius-photo); background: #ddd; }
.cs-body .cs-fig figcaption { font-size: 11.5px; color: var(--color-sub); line-height: 1.8; margin-top: 6px; letter-spacing: .03em; }
.cs-body .cs-figrow { display: grid; gap: 10px; }
.cs-body .cs-figrow--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cs-body .cs-figrow--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cs-body .cs-figrow .cs-fig img { aspect-ratio: 4 / 3; object-fit: cover; }
@media (max-width: 620px) {
  .cs-body { font-size: 14.5px; line-height: 1.95; letter-spacing: .03em; }
  .cs-art__lead { font-size: 14px; }
  .cs-body .cs-figrow--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 「誰が使ったのか」のリンクカード（OGP） */
.cs-og-list { display: grid; gap: 10px; margin-bottom: 14px; }
.cs-og { display: grid; grid-template-columns: 200px minmax(0, 1fr); border: var(--border-card); background: var(--color-white); color: var(--color-ink); text-decoration: none; overflow: hidden; transition: box-shadow var(--t-fast); }
.cs-og:hover { box-shadow: 0 0 0 3px var(--color-accent); }
.cs-og--noimg { grid-template-columns: minmax(0, 1fr); }
.cs-og__media { aspect-ratio: 1.91 / 1; overflow: hidden; background: #eee; border-right: var(--border-card); }
.cs-og__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cs-og__bd { padding: 10px 14px 11px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cs-og__t { font-size: 13.5px; font-weight: var(--fw-bold); line-height: 1.55; letter-spacing: .02em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cs-og__d { font-size: 11.5px; line-height: 1.75; color: var(--color-sub); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cs-og__site { font-size: 10.5px; font-weight: var(--fw-bold); color: var(--color-sub); letter-spacing: .04em; margin-top: auto; padding-top: 4px; }
.cs-og__site::before { content: "↗ "; color: var(--color-accent); }
@media (max-width: 620px) {
  .cs-og { grid-template-columns: minmax(0, 1fr); }
  .cs-og__media { border-right: 0; border-bottom: var(--border-card); }
}

/* ====================== ミニ校長の吹き出し（記事を開いて5秒後・左下から） ======================
   読んでいる文字を隠さないよう小さく。イラスト 52px・文字 10.5px。× で閉じる。 */
.cs-voice { position: absolute; left: 10px; bottom: 10px; z-index: 4; display: flex; align-items: flex-end; gap: 6px; max-width: min(300px, calc(100% - 20px)); pointer-events: none;
  opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
.cs-voice.is-on { opacity: 1; transform: none; pointer-events: auto; }
.cs-voice[hidden] { display: none; }
.cs-voice__chara { width: 52px; height: auto; flex: none; filter: drop-shadow(0 1px 0 rgba(0,0,0,.08)); }
.cs-voice__bubble { position: relative; background: var(--color-white); border: var(--border-card); padding: 8px 24px 8px 10px; font-size: 10.5px; line-height: 1.6; letter-spacing: .02em; color: var(--color-ink); }
.cs-voice__bubble::before { content: ""; position: absolute; left: -8px; bottom: 12px; border: 6px solid transparent; border-right-color: var(--color-ink); border-left: 0; }
.cs-voice__bubble::after { content: ""; position: absolute; left: -5px; bottom: 13px; border: 5px solid transparent; border-right-color: #fff; border-left: 0; }
.cs-voice__k { margin: 0 0 3px; font-family: var(--font-case); font-weight: 400; font-size: 11.5px; letter-spacing: .04em; color: var(--color-accent); }
.cs-voice__q { margin: 0; }
.cs-voice__by { display: block; font-size: 9.5px; color: var(--color-sub); margin-top: 1px; }
.cs-voice__c { margin: 5px 0 0; padding-top: 5px; border-top: 2px dotted var(--color-rule); color: var(--color-sub); }
.cs-voice__c b { color: var(--color-ink); font-weight: var(--fw-bold); }
.cs-voice__x { position: absolute; top: 4px; right: 4px; width: 18px; height: 18px; border: 1px solid var(--color-ink); background: #fff; color: var(--color-ink); border-radius: 2px; font-size: 11px; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.cs-voice__x:hover { background: var(--color-accent-soft); }
@media (max-width: 620px) { .cs-voice { left: 8px; bottom: 8px; max-width: calc(100% - 16px); } .cs-voice__chara { width: 44px; } .cs-voice__bubble { font-size: 10px; } }
@media (prefers-reduced-motion: reduce) { .cs-voice { transition: none; } }

/* JS が無い環境・SSRで開いた状態の見え方：モーダルは普通の枠として流れに置く */
.cs-dlg.is-static { position: static; display: block; margin: 20px auto 0; max-height: none; }
.cs-dlg.is-static .cs-dlg__scroll { max-height: none; overflow: visible; }

@media (prefers-reduced-motion: reduce) {
  .cs-card, .cs-card__media img, .cs-og { transition: none; }
  .cs-prog::after { animation-duration: 2.4s; }
}