/* tsunagito-article-tech.css (連結ビルド) v1.1.0 (2026-07-10) = 基盤 + theme-tech(--tsg-theme識別子入り) / JS v8.2対応 */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700;800&display=swap');
@import url("https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@400;500;700;900&family=Shippori+Mincho+B1:wght@700;800;900&family=Noto+Serif+JP:wght@700;900&family=Klee+One:wght@400;600&family=Yomogi&family=Kaisei+Decol:wght@400;700&display=swap");
/* ↑ 黒板AI引用ボックス用に Yomogi / Kaisei Decol を追加(2026-06-29)。本番は setup-guide のとおり の 化推奨(@importは描画直列化のため)。運用にする場合この@import行は削除可。 */
/* ===================================================================
ツナギト記事 装飾CSS（クライアント環境設置用） tsunagito-article.css
v8.0 2026-06-04 ― ライブ世代同期版（旧 phase1-css-bundle-v7-scoped を更新）
===================================================================
■ これは何か
ツナギトが出力する記事HTML（class付き）に「見た目」を当てるCSSです。
ツナギト本文には大量のstyleを焼き込まず、このファイルをサイト側に1回設置します。
■ 設置方法（制作会社向け）
1. 記事本文の最も外側のコンテナに class="tsunagito-article" を付与
2. このCSSをサイトに読み込む（WordPressなら functions.php で enqueue 等）
3. アンサーカードの観音開き／AI引用ボックス／AIボタン等の“動き”は
別ファイル tsunagito-bundle.(css|js) と tsunagito-ui.js が必要（CSSだけでは動きません）
※ 全セレクタを :is(#tsunagito-article, .tsunagito-article) 配下に限定。サイト全体には影響しません。
既存テーマが ID指定 / !important を多用している場合は競合し得ます（詳細は設置手順書）。
■ クライアントごとに変えるのは「変数」だけ（記事ごとにCSSは書きません）
:is(#tsunagito-article, .tsunagito-article) { --tc-base: #2E75B6; } ← この1行を変えるだけで色が切替
必要なら --tc-sub / --tc-font / --tc-content-width も上書き可
■ ブラウザ要件: color-mix() を使用（Chrome/Edge/Safari/Firefox の現行版で対応）
=================================================================== */
/* === テーマ変数（クライアントはここだけ触ればよい / スコープ内のみ有効） ===
TA-77 役割別カラー（4役割）。最新WF2Bの --tc-* 体系に統一。2026-06-30 確定: main=見出し/骨格。
main : ブランド主色＝見出し/骨格（H2下線・H3帯・目次・図解見出し・stat数字・進捗バー）
sub : 行動色＝CTA/ボタン/リンクhover（mainと別の差し色。単色運用はmainと同値でよい）
text : 本文の文字色（可読性優先）
line : 罫線・枠線の色（既定=mainの淡色）
※ 文字に乗るリンク（出典/参考文献/内部リンク文字/監修者リンク）は薄mainだと読みにくいため --tc-main-dark（濃いmain）を使う。
※ 構造アクセント(--tc-base)=main 基準。live(WF2B)は淡main時に見出し線=main/極淡main(例ベージュ)はsubへ自動fallbackして注入する。 */
/* ★変数デフォルトの定義ルールだけ :where()（詳細度0）にする。
理由: live(WF2B)が各記事に注入する --tc-* 変数（旧記事=.tsunagito-article 詳細度10 / 新記事=:is 詳細度100）が
必ず勝つようにするため。:is(100)で定義すると旧公開記事の注入(10)が負けて色がデフォルト(#336699)に戻る。
装飾セレクタ本体は :is(...)（詳細度100）でテーマに勝たせる（このルールは"既定値の置き場"なので0でよい）。 */
:where(#tsunagito-article, .tsunagito-article) {
/* ▼ クライアント設定（この4役割だけ上書きすればよい） */
--tc-main: #336699; /* ブランド主色＝見出し/骨格（H2下線・H3帯・目次・図解見出し・stat数字・進捗バー） */
--tc-sub: #336699; /* 行動色＝CTA/ボタン/リンクhover（mainと別の差し色。単色運用はmainと同値でよい） */
--tc-text: #1a1a1a; /* 本文の文字色 */
--tc-line: color-mix(in srgb, var(--tc-main) 30%, white); /* 罫線/枠（既定=mainの淡色。直接HEX上書きも可） */
--tc-font: "Zen Maru Gothic", "Hiragino Kaku Gothic Pro", "Yu Gothic", sans-serif;
--tc-content-width: 780px; /* 本文画像などの最大幅 */
/* ▼ 自動派生（触らない）。構造アクセント=main 基準（見出し/骨格＝ブランド主色）。
※ live(WF2B)が同名変数を本文に注入する場合はそちらが優先（淡main時は見出し線=main/文字リンク=main-dark/極淡mainはsubへ自動fallback）。 */
--tc-base: var(--tc-main); /* 構造アクセント＝main（見出し/骨格） */
--tc-dark: color-mix(in srgb, var(--tc-base) 72%, black);
--tc-light: color-mix(in srgb, var(--tc-base) 12%, white);
--tc-vlight: color-mix(in srgb, var(--tc-base) 6%, white);
--tc-glow: color-mix(in srgb, var(--tc-base) 22%, transparent);
--tc-main-dark: color-mix(in srgb, var(--tc-main) 72%, black); /* 濃いmain（見出し補助。文字リンクは sub-dark を使う） */
--tc-sub-dark: color-mix(in srgb, var(--tc-sub) 72%, black); /* CTAグラデ濃端＝sub基準 */
--tc-sub-glow: color-mix(in srgb, var(--tc-sub) 28%, transparent);
--tc-sub-light: color-mix(in srgb, var(--tc-sub) 12%, white); /* subの淡地（関連記事チップ地・比較表パネル枠 / 2026-07-04 見本一致同期） */
/* ▼ 淡装飾用（main=ブランド主色 由来）。ハイライト/マーカー/薄地に使い、構造=sub と2トーンに分ける。
main が淡いベージュ等でも"地・マーカー"には最適。単色運用(main=sub)なら自動でsub淡色に縮退。 */
--tc-soft: var(--tc-main);
--tc-soft-light: color-mix(in srgb, var(--tc-main) 35%, white);
--tc-soft-vlight: color-mix(in srgb, var(--tc-main) 12%, white);
--tc-shadow-sm: 0 2px 8px rgba(0,0,0,0.06);
--tc-shadow-md: 0 4px 16px rgba(0,0,0,0.08);
--tc-shadow-lg: 0 8px 32px rgba(0,0,0,0.10);
color: var(--tc-text, #333);
line-height: 1.9;
}
/* === 基本タイポグラフィ（記事内のみ） === */
:is(#tsunagito-article, .tsunagito-article) .blog-h2,
:is(#tsunagito-article, .tsunagito-article) h2.blog-h2 {
font-size: 1.4em;
font-weight: 700;
/* ★テーマ既定の見出し配色(帯背景・角丸・上下左右の罫線)を打ち消す＝どのWPテーマでも崩れない */
background: none !important;
border: none !important;
border-radius: 0 !important;
border-bottom: 3px solid var(--tc-base) !important;
padding: 0 0 8px;
margin: 40px 0 20px;
color: #1a1a1a;
}
:is(#tsunagito-article, .tsunagito-article) .blog-h2-summary { border-bottom-color: #666; }
:is(#tsunagito-article, .tsunagito-article) .blog-h3,
:is(#tsunagito-article, .tsunagito-article) h3.blog-h3 {
font-size: 1.15em;
font-weight: 700;
/* ★テーマ既定の見出し配色(背景・下線・角丸)を打ち消し、ツナギトの左帯のみ残す */
background: none !important;
border: none !important;
border-radius: 0 !important;
border-left: 4px solid var(--tc-base) !important;
padding: 0 0 0 12px;
margin: 28px 0 16px;
color: #1a1a1a;
}
:is(#tsunagito-article, .tsunagito-article) .blog-paragraph { line-height: 1.9; margin-bottom: 1.2em; color: #333; }
/* H2/H3 が素のタグで来た場合のフォールバック
★テーマ既定の見出し配色(Diverの帯背景#607d8b等)を打ち消す。background/border/border-radius を
明示リセットしないと、テーマの背景色だけが残って「青灰色の帯」になる(エネプラDiverで実際に発生)。 */
:is(#tsunagito-article, .tsunagito-article) h2:not(.blog-h2) {
font-size: 1.4em; color: #1a1a1a;
background: none !important;
border: none !important;
border-radius: 0 !important;
border-bottom: 3px solid var(--tc-base) !important;
padding: 0 0 8px; margin: 40px 0 20px;
}
:is(#tsunagito-article, .tsunagito-article) h3:not(.blog-h3) {
font-size: 1.15em; color: #1a1a1a;
background: none !important;
border: none !important;
border-radius: 0 !important;
border-left: 4px solid var(--tc-base) !important;
padding: 0 0 0 12px; margin: 28px 0 16px;
}
/* === リード文 === */
:is(#tsunagito-article, .tsunagito-article) .blog-lead {
font-size: 1.05em; line-height: 1.9; color: #333; margin-bottom: 24px;
padding: 20px 24px; border-left: 4px solid var(--tc-base);
border-radius: 0 8px 8px 0; background: var(--tc-vlight);
box-sizing: border-box; max-width: 100%; overflow-wrap: break-word;
}
/* === パンくず / 公開・更新日・読了時間 === */
:is(#tsunagito-article, .tsunagito-article) .breadcrumb {
font-size: .75rem; color: #9ca3af; margin-bottom: 16px;
display: flex; align-items: center; flex-wrap: wrap; gap: 4px;
}
:is(#tsunagito-article, .tsunagito-article) .breadcrumb a { color: #6b7280; text-decoration: none; }
:is(#tsunagito-article, .tsunagito-article) .breadcrumb a:hover { color: var(--tc-sub); text-decoration: underline; }
:is(#tsunagito-article, .tsunagito-article) .breadcrumb-sep { color: #d1d5db; }
:is(#tsunagito-article, .tsunagito-article) .breadcrumb-current { color: #374151; }
:is(#tsunagito-article, .tsunagito-article) .article-meta {
font-size: .85rem; color: #6b7280; margin-bottom: 16px;
display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
:is(#tsunagito-article, .tsunagito-article) .modified-date { color: #9ca3af; }
:is(#tsunagito-article, .tsunagito-article) .reading-time { color: #6b7280; }
:is(#tsunagito-article, .tsunagito-article) .promotion-notice { font-size: .85em; color: #888; margin-bottom: 16px; }
/* === 目次 blog-toc === */
:is(#tsunagito-article, .tsunagito-article) .blog-toc {
background: linear-gradient(135deg, var(--tc-vlight), #fff);
border: 2px solid var(--tc-line); border-radius: 12px;
padding: 20px 28px; margin: 24px auto; max-width: 680px; box-shadow: var(--tc-shadow-sm);
}
:is(#tsunagito-article, .tsunagito-article) .blog-toc-title { font-weight: 700; color: var(--tc-base); margin: 0 0 12px; font-size: .95em; text-align: left; }
:is(#tsunagito-article, .tsunagito-article) .blog-toc-list { margin: 0; padding: 0; list-style: none; text-align: left; }
:is(#tsunagito-article, .tsunagito-article) .blog-toc-item { margin-bottom: 6px; line-height: 1.6; padding-left: 1.4em; position: relative; }
:is(#tsunagito-article, .tsunagito-article) .blog-toc-item::before { content: "・"; position: absolute; left: .2em; color: var(--tc-base); font-weight: 700; }
:is(#tsunagito-article, .tsunagito-article) .blog-toc-link {
color: #333; text-decoration: none; font-size: .9em;
border-bottom: 1px dashed var(--tc-line);
}
:is(#tsunagito-article, .tsunagito-article) .blog-toc-link:hover { color: var(--tc-sub); border-bottom-color: var(--tc-sub); }
/* 分割目次（構成グループ）: WF2Bが意味ラベルでH2をグループ化したとき。出力が無ければ通常のフラット目次。 */
:is(#tsunagito-article, .tsunagito-article) .blog-toc-group + .blog-toc-group { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--tc-line); }
:is(#tsunagito-article, .tsunagito-article) .blog-toc-group-label { font-weight: 700; color: var(--tc-base); margin: 0 0 6px; font-size: .95em; }
/* === 冒頭サマリー（この記事でわかること）固定色・ブランド非依存 === */
:is(#tsunagito-article, .tsunagito-article) .summary-overview { background: linear-gradient(135deg,#fdfcf6 0%,#f9f5e8 100%); border: 1px solid #d9cfb3; border-radius: 12px; padding: 20px 24px; margin: 0 0 24px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
:is(#tsunagito-article, .tsunagito-article) .summary-overview-title { font-weight: 700; color: #5a3a1b; margin: 0 0 14px; font-size: 1.05em; }
:is(#tsunagito-article, .tsunagito-article) .summary-overview-list { list-style: none; margin: 0; padding: 0; }
:is(#tsunagito-article, .tsunagito-article) .summary-overview-item { display: flex; gap: 12px; align-items: flex-start; padding: 11px 0; border-top: 1px solid #e7dcc0; }
:is(#tsunagito-article, .tsunagito-article) .summary-overview-item:first-child { border-top: none; padding-top: 0; }
:is(#tsunagito-article, .tsunagito-article) .summary-overview-num { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; background: linear-gradient(180deg,#d8a145 0%,#9b6b2f 100%); color: #fff; font-weight: 700; font-size: .85em; display: inline-flex; align-items: center; justify-content: center; margin-top: 2px; box-shadow: 0 1px 2px rgba(74,44,23,.3); }
:is(#tsunagito-article, .tsunagito-article) .summary-overview-body { flex: 1 1 auto; min-width: 0; }
:is(#tsunagito-article, .tsunagito-article) .summary-overview-point { margin: 0 0 4px; line-height: 1.6; color: #2a1f14; }
:is(#tsunagito-article, .tsunagito-article) .summary-overview-point strong { color: #8b5a2b; font-weight: 700; background: none; padding: 0; }
:is(#tsunagito-article, .tsunagito-article) .summary-overview-jump { font-size: .85em; color: #8b5a2b; text-decoration: none; border-bottom: 1px dashed #d9c299; }
:is(#tsunagito-article, .tsunagito-article) .summary-overview-jump:hover { border-bottom-color: #8b5a2b; }
/* === section-summary（AI引用用の要約ブロック・素の見た目 / 強化版はbundleが置換） === */
:is(#tsunagito-article, .tsunagito-article) .section-summary {
font-size: 1.05em; color: #1a1a1a; background: var(--tc-vlight);
padding: 12px 16px; border-radius: 6px; border-left: 4px solid var(--tc-base);
margin-bottom: 20px; line-height: 1.7;
}
:is(#tsunagito-article, .tsunagito-article) .section-summary strong { font-weight: 700; }
/* === 監修者プロフィール === */
:is(#tsunagito-article, .tsunagito-article) .supervisor-profile {
background: linear-gradient(135deg, #fff 0%, #f8fafc 100%); border: none;
border-radius: 16px; padding: 0; margin: 32px 0; box-shadow: var(--tc-shadow-lg);
overflow: hidden; position: relative;
}
:is(#tsunagito-article, .tsunagito-article) .supervisor-profile::before {
content: ""; display: block; height: 6px;
background: linear-gradient(90deg, var(--tc-base), var(--tc-dark));
}
:is(#tsunagito-article, .tsunagito-article) .supervisor-label { font-size: .85em; font-weight: 700; color: var(--tc-base); padding: 20px 24px 0; margin: 0; }
:is(#tsunagito-article, .tsunagito-article) .supervisor-content { display: flex; align-items: flex-start; gap: 20px; padding: 16px 24px 24px; }
:is(#tsunagito-article, .tsunagito-article) .supervisor-photo {
width: 80px; height: 80px; border-radius: 50%; object-fit: cover;
border: 3px solid var(--tc-light); box-shadow: var(--tc-shadow-sm); flex-shrink: 0;
}
:is(#tsunagito-article, .tsunagito-article) .supervisor-info { flex: 1; min-width: 0; }
:is(#tsunagito-article, .tsunagito-article) .supervisor-name { font-size: 1.1em; font-weight: 700; margin: 0 0 4px; color: #1a1a1a; }
:is(#tsunagito-article, .tsunagito-article) .supervisor-title { font-size: .85em; color: #666; margin: 0 0 8px; }
:is(#tsunagito-article, .tsunagito-article) .supervisor-bio { font-size: .9em; line-height: 1.7; color: #444; margin: 0 0 8px; }
:is(#tsunagito-article, .tsunagito-article) .supervisor-link { font-size: .85em; margin: 0; }
:is(#tsunagito-article, .tsunagito-article) .supervisor-link a { color: var(--tc-sub-dark); text-decoration: none; font-weight: 500; }
:is(#tsunagito-article, .tsunagito-article) .supervisor-link a:hover { text-decoration: underline; }
/* === CTA（バナー / ボタン / mid / textlink） === */
:is(#tsunagito-article, .tsunagito-article) .cta-banner-link { display: block; margin: 24px 0; transition: opacity .2s; }
:is(#tsunagito-article, .tsunagito-article) .cta-banner-link:hover { opacity: .9; }
:is(#tsunagito-article, .tsunagito-article) .cta-banner {
background: linear-gradient(135deg, var(--tc-vlight) 0%, #fff 50%, var(--tc-vlight) 100%);
border: 2px solid var(--tc-line); border-radius: 16px; padding: 32px 24px;
text-align: center; margin: 24px 0; box-shadow: var(--tc-shadow-md);
}
:is(#tsunagito-article, .tsunagito-article) .cta-banner-body { max-width: 480px; margin: 0 auto; }
:is(#tsunagito-article, .tsunagito-article) .cta-banner-text { font-size: 1.15em; font-weight: 700; color: #1a1a1a; margin: 0 0 8px; line-height: 1.5; }
:is(#tsunagito-article, .tsunagito-article) .cta-banner-sub { font-size: .9em; color: #666; margin: 0 0 16px; }
:is(#tsunagito-article, .tsunagito-article) .cta-banner-btn,
:is(#tsunagito-article, .tsunagito-article) .cta-button {
display: inline-block; background: linear-gradient(135deg, var(--tc-sub), var(--tc-sub-dark));
color: #fff !important; padding: 14px 40px; border-radius: 50px; text-decoration: none !important;
font-weight: 700; font-size: 1em; box-shadow: 0 4px 16px var(--tc-sub-glow); transition: all .3s;
}
:is(#tsunagito-article, .tsunagito-article) .cta-banner-btn:hover,
:is(#tsunagito-article, .tsunagito-article) .cta-button:hover { transform: translateY(-2px); box-shadow: 0 6px 24px var(--tc-sub-glow); }
:is(#tsunagito-article, .tsunagito-article) .cta-block {
background: linear-gradient(135deg, var(--tc-vlight), #fff);
border: 2px solid var(--tc-line); border-radius: 16px; padding: 28px 24px;
margin: 32px 0; text-align: center; box-shadow: var(--tc-shadow-md);
}
:is(#tsunagito-article, .tsunagito-article) .cta-block p { margin: 0 0 16px; color: #1a1a1a; }
/* CTA mid（黄色スウィープボタン） */
:is(#tsunagito-article, .tsunagito-article) .cta-mid { text-align: center; margin: 2.5rem 0; padding: 0; }
:is(#tsunagito-article, .tsunagito-article) .cta-mid-text { font-size: .95rem; color: #555; margin-bottom: .8rem; }
:is(#tsunagito-article, .tsunagito-article) .cta-mid-btn {
position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
width: 100%; max-width: 560px; padding: 18px 32px; background: #222; color: #fff; border: none;
border-radius: 3px; font-size: 1rem; font-weight: 500; text-decoration: none; overflow: hidden;
box-sizing: border-box; letter-spacing: .02em; transition: color .3s;
}
:is(#tsunagito-article, .tsunagito-article) .cta-mid-btn::after {
content: ""; position: absolute; top: 0; left: 0; width: 0; height: 100%;
background: #f5c400; z-index: 0; transition: width .3s ease;
}
:is(#tsunagito-article, .tsunagito-article) .cta-mid-btn:hover::after { width: 100%; }
:is(#tsunagito-article, .tsunagito-article) .cta-mid-btn:hover .cta-mid-arrow,
:is(#tsunagito-article, .tsunagito-article) .cta-mid-btn:hover .cta-mid-label { color: #1a1a1a; }
:is(#tsunagito-article, .tsunagito-article) .cta-mid-arrow,
:is(#tsunagito-article, .tsunagito-article) .cta-mid-label { position: relative; z-index: 1; transition: color .3s ease; }
/* CTA textlink */
:is(#tsunagito-article, .tsunagito-article) .cta-textlink { text-align: center; margin: 28px 0; }
:is(#tsunagito-article, .tsunagito-article) .cta-textlink a {
color: var(--tc-sub-dark); text-decoration: none; border-bottom: 2px solid var(--tc-base);
font-weight: 700; font-size: 1.05em; transition: all .2s ease; padding-bottom: 2px;
}
:is(#tsunagito-article, .tsunagito-article) .cta-textlink a:hover { color: var(--tc-dark); border-bottom-color: var(--tc-dark); }
/* === 出典 / 参考文献 / 引用バッジ === */
:is(#tsunagito-article, .tsunagito-article) .source-link { font-size: .85em; color: #888; margin: 4px 0 16px; line-height: 1.6; }
:is(#tsunagito-article, .tsunagito-article) .source-link a { color: var(--tc-sub-dark); text-decoration: none; }
:is(#tsunagito-article, .tsunagito-article) .source-link a:hover { text-decoration: underline; }
:is(#tsunagito-article, .tsunagito-article) .source-link a[target="_blank"]::after { content: " \2197"; font-size: .7em; opacity: .6; }
:is(#tsunagito-article, .tsunagito-article) .references-list { font-size: .85em; line-height: 1.8; color: #555; padding-left: 1.5em; margin: 16px 0 32px; }
/* 参考文献リストの出現フェード（JS初期化時のみ有効・JS無しでは常時表示で安全） */
html[data-tsg-ui-init="true"] :is(#tsunagito-article, .tsunagito-article) .references-list { opacity: 0; transform: translateY(16px); transition: opacity .7s ease, transform .7s ease; }
html[data-tsg-ui-init="true"] :is(#tsunagito-article, .tsunagito-article) .references-list.is-visible { opacity: 1; transform: none; }
:is(#tsunagito-article, .tsunagito-article) .references-list li { margin-bottom: 8px; padding-left: 4px; }
:is(#tsunagito-article, .tsunagito-article) .references-list a { color: var(--tc-sub-dark); text-decoration: none; border-bottom: 1px dashed var(--tc-line); }
:is(#tsunagito-article, .tsunagito-article) .references-list a:hover { text-decoration: underline; border-bottom-style: solid; }
:is(#tsunagito-article, .tsunagito-article) #references { margin-top: 48px; padding-top: 24px; border-top: 2px solid var(--tc-line); }
:is(#tsunagito-article, .tsunagito-article) .citation-badge {
display: inline-flex; align-items: center; gap: .5rem; padding: .4rem 1rem;
background: #f8f9fa; border: 1px solid #e2e8f0; border-radius: 6px;
font-size: .85rem; color: #4a5568; margin: .5rem 0 1rem;
}
:is(#tsunagito-article, .tsunagito-article) .citation-badge-icon { font-size: 1rem; }
:is(#tsunagito-article, .tsunagito-article) .citation-badge-text { line-height: 1.4; }
/* === 吹き出し balloon === */
:is(#tsunagito-article, .tsunagito-article) .balloon-box { display: flex; gap: 0; margin: 28px 0; align-items: flex-start; }
:is(#tsunagito-article, .tsunagito-article) .balloon-icon { min-width: 72px; text-align: center; flex-shrink: 0; }
:is(#tsunagito-article, .tsunagito-article) .balloon-icon img {
width: 56px; height: 56px; border-radius: 50%; object-fit: cover;
border: 3px solid var(--tc-light); box-shadow: var(--tc-shadow-sm);
}
:is(#tsunagito-article, .tsunagito-article) .balloon-icon span,
:is(#tsunagito-article, .tsunagito-article) .balloon-name { display: block; font-size: .7em; color: #666; margin-top: 4px; white-space: nowrap; }
:is(#tsunagito-article, .tsunagito-article) .balloon-content,
:is(#tsunagito-article, .tsunagito-article) .balloon-text {
position: relative; background: linear-gradient(135deg, #fff 0%, #f8fafc 100%);
border: 2px solid var(--tc-line); border-radius: 0 16px 16px 16px;
padding: 16px 20px; font-size: .95em; line-height: 1.8; color: #333;
box-shadow: var(--tc-shadow-sm); max-width: calc(100% - 80px); margin-left: 12px;
}
:is(#tsunagito-article, .tsunagito-article) .balloon-content::before,
:is(#tsunagito-article, .tsunagito-article) .balloon-text::before {
content: ""; position: absolute; left: -12px; top: 18px;
border-width: 6px 12px 6px 0; border-style: solid;
border-color: transparent var(--tc-line) transparent transparent;
}
:is(#tsunagito-article, .tsunagito-article) .balloon-content::after,
:is(#tsunagito-article, .tsunagito-article) .balloon-text::after {
content: ""; position: absolute; left: -9px; top: 19px;
border-width: 5px 10px 5px 0; border-style: solid;
border-color: transparent #fff transparent transparent;
}
/* 吹き出し本文フォント色（aOn公式の柔らかい赤ピンク・固定。変えたい場合はここを上書き） */
:is(#tsunagito-article, .tsunagito-article) .balloon-content p { font-family: var(--tc-font); color: #E06070; margin: 0; }
/* 出現モーション（吹き出し=下から上へフェードアップ / 波線=下から上へスライド・JS初期化時のみ有効／JS無しでは常時表示で安全） */
html[data-tsg-ui-init="true"] :is(#tsunagito-article, .tsunagito-article) .balloon-box { opacity: 0; transform: translateY(20px); transition: opacity .6s ease, transform .6s ease; }
html[data-tsg-ui-init="true"] :is(#tsunagito-article, .tsunagito-article) .balloon-box.is-visible { opacity: 1; transform: translateY(0); }
html[data-tsg-ui-init="true"] :is(#tsunagito-article, .tsunagito-article) .wave-mark { background-position: 0 200%; }
html[data-tsg-ui-init="true"] :is(#tsunagito-article, .tsunagito-article) .wave-mark.is-visible { background-position: 0 100%; }
@media (prefers-reduced-motion: reduce) {
html[data-tsg-ui-init="true"] :is(#tsunagito-article, .tsunagito-article) .balloon-box,
html[data-tsg-ui-init="true"] :is(#tsunagito-article, .tsunagito-article) .references-list { opacity: 1 !important; transform: none !important; transition: none !important; }
html[data-tsg-ui-init="true"] :is(#tsunagito-article, .tsunagito-article) .wave-mark { background-position: 0 100% !important; }
}
/* === FAQ === */
:is(#tsunagito-article, .tsunagito-article) .blog-faq-section { margin: 40px 0; }
:is(#tsunagito-article, .tsunagito-article) .blog-faq-item {
background: linear-gradient(135deg, #fff 0%, #f8fafc 100%); border: none; border-radius: 12px;
margin-bottom: 16px; box-shadow: var(--tc-shadow-sm); overflow: hidden; transition: box-shadow .3s;
}
:is(#tsunagito-article, .tsunagito-article) .blog-faq-item:hover { box-shadow: var(--tc-shadow-md); }
:is(#tsunagito-article, .tsunagito-article) .blog-faq-question {
padding: 16px 20px; font-weight: 700; color: #1a1a1a; border-bottom: 1px solid #f0f0f0;
display: flex; align-items: flex-start; gap: 8px;
}
:is(#tsunagito-article, .tsunagito-article) .blog-faq-answer { padding: 16px 20px; color: #444; line-height: 1.8; }
:is(#tsunagito-article, .tsunagito-article) .blog-faq-label { color: var(--tc-base); font-weight: 700; flex-shrink: 0; }
/* 素のFAQ（faq-item/faq-question/faq-answer）フォールバック */
:is(#tsunagito-article, .tsunagito-article) .faq-item { background: linear-gradient(135deg, #fff 0%, #f8fafc 100%); border-radius: 12px; margin-bottom: 16px; box-shadow: var(--tc-shadow-sm); padding: 24px 28px; }
:is(#tsunagito-article, .tsunagito-article) .faq-question { font-size: 1.05em; font-weight: 700; color: #1a1a1a; margin: 0 0 12px; line-height: 1.6; }
:is(#tsunagito-article, .tsunagito-article) .faq-question::before { content: "Q. "; color: var(--tc-base); font-weight: 700; }
:is(#tsunagito-article, .tsunagito-article) .faq-answer { font-size: .95em; color: #555; margin: 0; padding-left: 28px; line-height: 1.8; position: relative; }
:is(#tsunagito-article, .tsunagito-article) .faq-answer::before { content: "A. "; color: #e53e3e; font-weight: 700; position: absolute; left: 0; }
:is(#tsunagito-article, .tsunagito-article) .faq-future-heading { font-size: 1.1em; color: var(--tc-base); margin: 36px 0 16px; padding-left: 14px; border-left: 4px solid var(--tc-base); font-weight: 700; }
:is(#tsunagito-article, .tsunagito-article) .faq-item.faq-future { border-left: 3px solid var(--tc-light); }
/* FAQアコーディオン（tsunagito-ui.js が data-faq-accordion を付与時のみ） */
:is(#tsunagito-article, .tsunagito-article) .blog-faq-section[data-faq-accordion="true"] .blog-faq-item { cursor: pointer; }
:is(#tsunagito-article, .tsunagito-article) .blog-faq-section[data-faq-accordion="true"] .blog-faq-answer { max-height: 1500px; overflow: hidden; transition: max-height .4s ease; }
:is(#tsunagito-article, .tsunagito-article) .blog-faq-section[data-faq-accordion="true"] .blog-faq-item.is-collapsed .blog-faq-answer { max-height: 0; }
:is(#tsunagito-article, .tsunagito-article) .blog-faq-section[data-faq-accordion="true"] .blog-faq-question::after { content: " ▼"; font-size: .7em; color: var(--tc-base); margin-left: 8px; transition: transform .3s ease; display: inline-block; }
:is(#tsunagito-article, .tsunagito-article) .blog-faq-section[data-faq-accordion="true"] .blog-faq-item.is-collapsed .blog-faq-question::after { transform: rotate(-90deg); }
/* === インフォグラフィック ig-* === */
:is(#tsunagito-article, .tsunagito-article) .ig-compare, :is(#tsunagito-article, .tsunagito-article) .ig-stats, :is(#tsunagito-article, .tsunagito-article) .ig-steps,
:is(#tsunagito-article, .tsunagito-article) .ig-checklist, :is(#tsunagito-article, .tsunagito-article) .ig-timeline {
margin: 28px 0; border-radius: 12px; box-shadow: var(--tc-shadow-sm); overflow: hidden;
}
:is(#tsunagito-article, .tsunagito-article) .ig-compare { border: 1px solid var(--tc-line); }
:is(#tsunagito-article, .tsunagito-article) .ig-compare table, :is(#tsunagito-article, .tsunagito-article) .ig-compare-table { width: 100%; border-collapse: collapse; }
:is(#tsunagito-article, .tsunagito-article) .ig-compare th, :is(#tsunagito-article, .tsunagito-article) .ig-compare-table th {
background: linear-gradient(135deg, var(--tc-base), var(--tc-dark));
color: #fff; padding: 12px 16px; font-weight: 700; text-align: left; font-size: .95em;
}
:is(#tsunagito-article, .tsunagito-article) .ig-compare td, :is(#tsunagito-article, .tsunagito-article) .ig-compare-table td { padding: 12px 16px; border-bottom: 1px solid #f0f0f0; font-size: .95em; vertical-align: top; }
:is(#tsunagito-article, .tsunagito-article) .ig-compare tr:nth-child(even), :is(#tsunagito-article, .tsunagito-article) .ig-compare-table tr:nth-child(even) { background: #f8fafc; }
:is(#tsunagito-article, .tsunagito-article) td.compare-good { background: #f0fff4; color: #276749; font-weight: 600; }
:is(#tsunagito-article, .tsunagito-article) td.compare-bad { background: #fff5f5; color: #c53030; font-weight: 600; }
/* steps */
:is(#tsunagito-article, .tsunagito-article) .ig-steps { background: linear-gradient(135deg, var(--tc-vlight), #fff); padding: 24px; }
:is(#tsunagito-article, .tsunagito-article) .ig-step { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 8px; }
:is(#tsunagito-article, .tsunagito-article) .ig-step-num, :is(#tsunagito-article, .tsunagito-article) .ig-steps .step-number {
min-width: 36px; height: 36px; border-radius: 50%; color: #fff; font-weight: 700; font-size: .9em;
background: linear-gradient(135deg, var(--tc-base), var(--tc-dark));
display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 2px 8px var(--tc-glow);
}
:is(#tsunagito-article, .tsunagito-article) .ig-step-title { font-weight: 700; color: #1a1a1a; margin: 0 0 4px; font-size: 1em; }
:is(#tsunagito-article, .tsunagito-article) .ig-step-desc { color: #555; font-size: .9em; line-height: 1.6; margin: 0; }
/* stats */
:is(#tsunagito-article, .tsunagito-article) .ig-stats { background: linear-gradient(135deg, var(--tc-vlight), #fff); padding: 24px; display: flex; flex-wrap: wrap; gap: 18px; }
:is(#tsunagito-article, .tsunagito-article) .ig-stats > h3, :is(#tsunagito-article, .tsunagito-article) .ig-stats > h4 { flex: 1 1 100%; }
:is(#tsunagito-article, .tsunagito-article) .ig-stats > .stats-grid { flex: 1 1 100%; }
:is(#tsunagito-article, .tsunagito-article) .ig-stats .stats-grid { display: flex; flex-wrap: wrap; gap: 18px; width: 100%; }
:is(#tsunagito-article, .tsunagito-article) .ig-stat-item, :is(#tsunagito-article, .tsunagito-article) .ig-stats .stat-item {
flex: 1 1 calc(25% - 18px); min-width: 0;
text-align: center; padding: 28px 20px; background: linear-gradient(135deg, #fff 0%, #f8fafc 100%);
border-radius: 16px; box-shadow: var(--tc-shadow-md); position: relative; overflow: hidden; transition: transform .25s ease, box-shadow .25s ease;
}
:is(#tsunagito-article, .tsunagito-article) .ig-stat-item::before, :is(#tsunagito-article, .tsunagito-article) .ig-stats .stat-item::before {
content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
background: linear-gradient(90deg, var(--tc-base), var(--tc-light));
}
:is(#tsunagito-article, .tsunagito-article) .ig-stat-item:hover, :is(#tsunagito-article, .tsunagito-article) .ig-stats .stat-item:hover { transform: translateY(-6px); box-shadow: var(--tc-shadow-lg); }
:is(#tsunagito-article, .tsunagito-article) .ig-stat-number, :is(#tsunagito-article, .tsunagito-article) .ig-stats .stat-number { display: block; font-size: 2.2em; font-weight: 800; color: var(--tc-main); line-height: 1.2; }
:is(#tsunagito-article, .tsunagito-article) .ig-stat-label, :is(#tsunagito-article, .tsunagito-article) .ig-stats .stat-label { display: block; font-size: .85em; color: #666; margin-top: 4px; }
/* checklist */
:is(#tsunagito-article, .tsunagito-article) .ig-checklist { background: linear-gradient(135deg, var(--tc-vlight), #fff); padding: 24px; }
:is(#tsunagito-article, .tsunagito-article) .ig-checklist ul { list-style: none; padding: 0; margin: 0; }
:is(#tsunagito-article, .tsunagito-article) .ig-checklist li { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; border-bottom: 1px solid rgba(0,0,0,.05); }
:is(#tsunagito-article, .tsunagito-article) .ig-checklist li:last-child { border-bottom: none; }
:is(#tsunagito-article, .tsunagito-article) .ig-checklist li::before { content: "\2713"; color: #2d6a2d; font-weight: 700; min-width: 22px; font-size: 1.1em; }
/* timeline */
:is(#tsunagito-article, .tsunagito-article) .ig-timeline { background: linear-gradient(135deg, var(--tc-vlight), #fff); padding: 24px; }
:is(#tsunagito-article, .tsunagito-article) .ig-timeline-item, :is(#tsunagito-article, .tsunagito-article) .ig-timeline .timeline-item { display: flex; gap: 16px; padding-bottom: 20px; position: relative; }
:is(#tsunagito-article, .tsunagito-article) .ig-timeline-marker, :is(#tsunagito-article, .tsunagito-article) .ig-timeline .timeline-marker {
min-width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; box-shadow: 0 2px 8px var(--tc-glow);
background: linear-gradient(135deg, var(--tc-base), var(--tc-dark));
}
:is(#tsunagito-article, .tsunagito-article) .ig-timeline-date { font-size: .8em; color: var(--tc-base); font-weight: 700; margin: 0 0 2px; }
:is(#tsunagito-article, .tsunagito-article) .ig-timeline-title { font-weight: 700; color: #1a1a1a; margin: 0 0 4px; font-size: 1em; }
:is(#tsunagito-article, .tsunagito-article) .ig-timeline-desc { color: #555; font-size: .9em; line-height: 1.6; margin: 0; }
/* cards */
:is(#tsunagito-article, .tsunagito-article) .ig-cards { margin: 36px 0; }
:is(#tsunagito-article, .tsunagito-article) .ig-cards .card-grid, :is(#tsunagito-article, .tsunagito-article) .ig-cards > div:not(:first-child) { display: flex; flex-wrap: wrap; gap: 24px; }
:is(#tsunagito-article, .tsunagito-article) .ig-cards .feature-card, :is(#tsunagito-article, .tsunagito-article) .ig-cards .ig-card, :is(#tsunagito-article, .tsunagito-article) .ig-cards .card {
flex: 1 1 calc(25% - 24px); min-width: 0;
background: linear-gradient(135deg, #fff 0%, #f8fafc 100%); border: none; border-radius: 16px;
padding: 30px 26px 26px; text-align: center; box-shadow: var(--tc-shadow-md);
position: relative; overflow: hidden; transition: transform .25s ease, box-shadow .25s ease;
}
:is(#tsunagito-article, .tsunagito-article) .ig-cards .feature-card::before, :is(#tsunagito-article, .tsunagito-article) .ig-cards .ig-card::before, :is(#tsunagito-article, .tsunagito-article) .ig-cards .card::before {
content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 4px;
background: linear-gradient(90deg, var(--tc-base), var(--tc-light));
}
:is(#tsunagito-article, .tsunagito-article) .ig-cards .feature-card:hover, :is(#tsunagito-article, .tsunagito-article) .ig-cards .ig-card:hover, :is(#tsunagito-article, .tsunagito-article) .ig-cards .card:hover { transform: translateY(-6px); box-shadow: var(--tc-shadow-lg); }
:is(#tsunagito-article, .tsunagito-article) .ig-cards .feature-card h4, :is(#tsunagito-article, .tsunagito-article) .ig-cards .ig-card h4, :is(#tsunagito-article, .tsunagito-article) .ig-cards .card h4 {
color: var(--tc-sub); font-weight: 700; margin: 0 0 14px; font-size: 1.02em;
padding: 0 0 10px; border-bottom: 2px solid var(--tc-light); text-align: center;
}
:is(#tsunagito-article, .tsunagito-article) .ig-cards .feature-card p, :is(#tsunagito-article, .tsunagito-article) .ig-cards .ig-card p, :is(#tsunagito-article, .tsunagito-article) .ig-cards .card p { color: #555; font-size: .92em; line-height: 1.7; margin: 0; text-align: left; }
/* ig-* 見出し */
:is(#tsunagito-article, .tsunagito-article) .ig-stats h3, :is(#tsunagito-article, .tsunagito-article) .ig-cards h3, :is(#tsunagito-article, .tsunagito-article) .ig-compare h3,
:is(#tsunagito-article, .tsunagito-article) .ig-steps h3, :is(#tsunagito-article, .tsunagito-article) .ig-checklist h3, :is(#tsunagito-article, .tsunagito-article) .ig-timeline h3 {
text-align: center; font-size: 1.15em; font-weight: 700; margin: 0 0 20px; padding: 0 16px;
color: #1a1a1a; border-left: none; background: none; display: block;
}
/* === box系 === */
:is(#tsunagito-article, .tsunagito-article) .blog-box, :is(#tsunagito-article, .tsunagito-article) .box-point, :is(#tsunagito-article, .tsunagito-article) .box-warning,
:is(#tsunagito-article, .tsunagito-article) .box-important, :is(#tsunagito-article, .tsunagito-article) .box-note, :is(#tsunagito-article, .tsunagito-article) .box-memo {
border-radius: 12px; box-shadow: var(--tc-shadow-sm); padding: 20px 24px; margin: 24px 0; border: none;
}
:is(#tsunagito-article, .tsunagito-article) .box-point, :is(#tsunagito-article, .tsunagito-article) .blog-box-point { background: linear-gradient(135deg, #fffbeb, #fff); border-left: 4px solid #d69e2e; }
:is(#tsunagito-article, .tsunagito-article) .box-warning, :is(#tsunagito-article, .tsunagito-article) .blog-box-warning { background: linear-gradient(135deg, #fffaf0, #fff); border-left: 4px solid #ed8936; }
:is(#tsunagito-article, .tsunagito-article) .box-important, :is(#tsunagito-article, .tsunagito-article) .blog-box-important { background: linear-gradient(135deg, #fff5f5, #fff); border-left: 4px solid #e53e3e; }
:is(#tsunagito-article, .tsunagito-article) .box-note, :is(#tsunagito-article, .tsunagito-article) .box-memo { background: linear-gradient(135deg, #f0fff4, #fff); border-left: 4px solid #38a169; }
:is(#tsunagito-article, .tsunagito-article) .box-title, :is(#tsunagito-article, .tsunagito-article) .blog-box-title { font-weight: 700; margin: 0 0 8px; font-size: .95em; }
:is(#tsunagito-article, .tsunagito-article) .blog-box-content { margin: 0; line-height: 1.8; }
/* === テーブル === */
:is(#tsunagito-article, .tsunagito-article) .blog-table { width: 100%; border-collapse: collapse; font-size: .95em; border-radius: 12px; overflow: hidden; box-shadow: var(--tc-shadow-md); margin: 24px 0; }
:is(#tsunagito-article, .tsunagito-article) .blog-table thead th { background: linear-gradient(135deg, var(--tc-base), var(--tc-dark)); color: #fff; padding: 14px 18px; font-weight: 700; text-align: center; }
:is(#tsunagito-article, .tsunagito-article) .blog-table tbody td { padding: 12px 18px; border-bottom: 1px solid #eee; }
:is(#tsunagito-article, .tsunagito-article) .blog-table tbody tr:nth-child(even) { background: #f8fafc; }
:is(#tsunagito-article, .tsunagito-article) .blog-table tbody tr:hover { background: var(--tc-light); }
/* === アンサーカード（素の見た目＝フォールバック。観音開きは bundle が置換） === */
:is(#tsunagito-article, .tsunagito-article) .answer-card {
background: linear-gradient(135deg, var(--tc-vlight) 0%, #f0f7ff 100%);
padding: 28px; border-radius: 16px; border-left: 5px solid var(--tc-base);
margin: 36px 0; box-shadow: var(--tc-shadow-lg);
}
/* === 関連記事カード / インラインリンク === */
:is(#tsunagito-article, .tsunagito-article) .related-articles { margin: 32px 0; }
:is(#tsunagito-article, .tsunagito-article) .related-card {
background: linear-gradient(135deg, #fff 0%, #f8fafc 100%); border: 1px solid #e0e0e0; border-radius: 12px;
padding: 0; margin: 0 0 12px; overflow: hidden; box-shadow: var(--tc-shadow-sm); transition: all .2s ease;
}
:is(#tsunagito-article, .tsunagito-article) .related-card:hover { box-shadow: var(--tc-shadow-md); transform: translateY(-2px); }
:is(#tsunagito-article, .tsunagito-article) .related-card a { display: block; padding: 20px 24px; text-decoration: none; color: inherit; }
:is(#tsunagito-article, .tsunagito-article) .related-card-inner { display: flex; flex-direction: column; gap: 6px; }
:is(#tsunagito-article, .tsunagito-article) .related-card-label { font-size: .75em; color: var(--tc-sub); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
:is(#tsunagito-article, .tsunagito-article) .related-card-title { font-size: 1em; font-weight: 700; color: #1a1a1a; margin: 0; line-height: 1.6; }
:is(#tsunagito-article, .tsunagito-article) .inline-link {
margin: 16px 0; padding: 12px 20px; background: linear-gradient(135deg, #f8fafc 0%, #f0f4f8 100%);
border-radius: 8px; border-left: 3px solid var(--tc-sub);
}
:is(#tsunagito-article, .tsunagito-article) .inline-link a { color: var(--tc-sub-dark); text-decoration: none; font-weight: 600; font-size: .95em; transition: color .2s ease; }
:is(#tsunagito-article, .tsunagito-article) .inline-link a:hover { color: var(--tc-dark); }
/* === 画像 === */
:is(#tsunagito-article, .tsunagito-article) .blog-content-image, :is(#tsunagito-article, .tsunagito-article) figure.blog-image img, :is(#tsunagito-article, .tsunagito-article) img.blog-content-image {
max-width: var(--tc-content-width); width: min(100%, var(--tc-content-width)); height: auto;
display: block; margin: 28px auto; border-radius: 12px; object-fit: contain;
}
:is(#tsunagito-article, .tsunagito-article) .cta-banner-link img { width: 100%; max-height: 280px; object-fit: cover; border-radius: 12px; display: block; }
:is(#tsunagito-article, .tsunagito-article) dfn { font-style: normal; font-weight: 600; color: var(--tc-dark); border-bottom: 2px dotted var(--tc-line); }
/* === 波線マーカー（重要語句。tsunagito-ui.js が .is-visible を付与でスライドアップ） === */
:is(#tsunagito-article, .tsunagito-article) .wave-mark {
position: relative; display: inline; padding-bottom: 8px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='6' viewBox='0 0 20 6'%3E%3Cpath d='M0 3 Q5 0 10 3 Q15 6 20 3' stroke='%23df212c' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
background-repeat: repeat-x; background-position: 0 100%; background-size: 20px 6px;
transition: background-position 2.5s cubic-bezier(.22,1,.36,1);
-webkit-box-decoration-break: clone; box-decoration-break: clone;
}
:is(#tsunagito-article, .tsunagito-article) .wave-mark.is-visible { background-position: 0 100%; }
/* === 蛍光ペン風マーカー（本文strong）=== 2026-06-28: 淡装飾=main由来 --tc-soft-light（構造=subと2トーン） */
:is(#tsunagito-article, .tsunagito-article) p strong, :is(#tsunagito-article, .tsunagito-article) li strong, :is(#tsunagito-article, .tsunagito-article) blockquote strong {
/* ★2026-06-30 ハイライトは黄色固定（蛍光ペン＝重要箇所マーカー。ブランド色に連動させない） */
background: linear-gradient(transparent 50%, #fff3a0 50%); padding: 0 2px;
}
/* ★2026-06-30: プレビューノード(正本)と配色を一致させるため、緑(main)系の淡装飾3規則を追加。
・H3 見出しの下線グラデ（淡装飾=main）／・リード文マーカー／・blog-highlight。
構造(見出し線/ボックス/表/CTA)はそのまま sub、これらの淡装飾だけ main(緑)で2トーンにする。 */
:is(#tsunagito-article, .tsunagito-article) h3:not(.blog-h3), :is(#tsunagito-article, .tsunagito-article) h3.blog-h3, :is(#tsunagito-article, .tsunagito-article) .blog-h3 {
/* ★2026-06-30 H3下線ハイライトは黄色グラデ固定（蛍光ペン扱い・ブランド非連動）。!important＋ソース順で h3{background:none} を上書き */
background: linear-gradient(transparent 88%, #ffd86b 88%, #ff9c40 100%) !important;
padding-bottom: 4px;
}
:is(#tsunagito-article, .tsunagito-article) .blog-lead mark[data-hl] {
background: linear-gradient(transparent 55%, #ffe98a 55%, #ffe06b 100%) !important;
padding: 0 2px; border-radius: 2px; font-weight: 600;
}
:is(#tsunagito-article, .tsunagito-article) .blog-highlight {
background: linear-gradient(transparent 60%, #fff3a0 60%); padding: 0 2px; font-weight: 500;
}
/* 装飾ブロック内の strong は素に戻す（蛍光が乗らないように） */
:is(#tsunagito-article, .tsunagito-article) .supervisor-profile strong, :is(#tsunagito-article, .tsunagito-article) .balloon-content strong,
:is(#tsunagito-article, .tsunagito-article) .cta-banner strong, :is(#tsunagito-article, .tsunagito-article) .cta-block strong, :is(#tsunagito-article, .tsunagito-article) .cta-mid strong,
:is(#tsunagito-article, .tsunagito-article) .answer-card strong, :is(#tsunagito-article, .tsunagito-article) .blog-faq-section strong, :is(#tsunagito-article, .tsunagito-article) .blog-toc strong,
:is(#tsunagito-article, .tsunagito-article) .citation-badge strong, :is(#tsunagito-article, .tsunagito-article) .breadcrumb strong, :is(#tsunagito-article, .tsunagito-article) .article-meta strong,
:is(#tsunagito-article, .tsunagito-article) .source-link strong, :is(#tsunagito-article, .tsunagito-article) .references-list strong, :is(#tsunagito-article, .tsunagito-article) .related-card strong,
:is(#tsunagito-article, .tsunagito-article) .inline-link strong, :is(#tsunagito-article, .tsunagito-article) .ig-compare strong, :is(#tsunagito-article, .tsunagito-article) .ig-stats strong,
:is(#tsunagito-article, .tsunagito-article) .ig-steps strong, :is(#tsunagito-article, .tsunagito-article) .ig-checklist strong, :is(#tsunagito-article, .tsunagito-article) .ig-timeline strong,
:is(#tsunagito-article, .tsunagito-article) .ig-cards strong, :is(#tsunagito-article, .tsunagito-article) .section-summary strong, :is(#tsunagito-article, .tsunagito-article) .box-point strong,
:is(#tsunagito-article, .tsunagito-article) .box-warning strong, :is(#tsunagito-article, .tsunagito-article) .box-important strong, :is(#tsunagito-article, .tsunagito-article) .box-note strong {
background: none; padding: 0;
}
/* === 読書プログレスバー / トップへ戻る（tsunagito-ui.js が制御） ===
★記事ラッパーの外に出力される固定要素のため、ツナギトが出力するID(#readingProgress等)で
限定する（2026-07-04: 素の .scroll-to-top 等は汎用名でテーマ側と衝突しうるためID化） */
:is(#tsunagito-article, .tsunagito-article) .reading-progress, #readingProgress { position: fixed; top: 0; left: 0; width: 100%; height: 3px; background: transparent; z-index: 9999; pointer-events: none; }
#readingProgressBar, :is(#tsunagito-article, .tsunagito-article) .reading-progress__bar { height: 100%; width: 0; background: var(--tc-sub, #ffa238); transition: width .1s ease-out; }
#scrollToTop {
position: fixed; bottom: 24px; right: 24px; z-index: 998; width: 44px; height: 44px; border-radius: 50%;
display: flex; align-items: center; justify-content: center; font-size: 1.1rem; font-weight: 700;
text-decoration: none; box-shadow: 0 2px 12px rgba(0,0,0,.15); opacity: 0; visibility: hidden;
transition: all .3s ease; background: var(--tc-sub, #ffa238); color: #fff;
}
#scrollToTop.visible { opacity: 1; visibility: visible; }
#scrollToTop:visited { color: #fff; }
#scrollToTop:hover { transform: translateY(-3px); box-shadow: 0 4px 16px rgba(0,0,0,.2); }
/* アンカーリンク（見出しコピー） */
:is(#tsunagito-article, .tsunagito-article) .anchor-heading { position: relative; }
:is(#tsunagito-article, .tsunagito-article) .anchor-link { font-size: .6em; opacity: 0; cursor: pointer; transition: opacity .2s; margin-left: 8px; vertical-align: middle; text-decoration: none; }
:is(#tsunagito-article, .tsunagito-article) .anchor-heading:hover .anchor-link { opacity: .5; }
:is(#tsunagito-article, .tsunagito-article) .anchor-link:hover { opacity: 1 !important; }
/* === レスポンシブ === */
@media (max-width: 640px) {
:is(#tsunagito-article, .tsunagito-article) .blog-lead { padding: 16px; font-size: 1em; }
:is(#tsunagito-article, .tsunagito-article) .supervisor-content { flex-direction: column; align-items: center; text-align: center; padding: 16px; }
:is(#tsunagito-article, .tsunagito-article) .supervisor-photo { width: 64px; height: 64px; }
:is(#tsunagito-article, .tsunagito-article) .balloon-box { flex-direction: column; align-items: center; }
:is(#tsunagito-article, .tsunagito-article) .balloon-icon { min-width: auto; margin-bottom: 4px; }
:is(#tsunagito-article, .tsunagito-article) .balloon-content, :is(#tsunagito-article, .tsunagito-article) .balloon-text { max-width: 100%; margin-left: 0; border-radius: 16px; }
:is(#tsunagito-article, .tsunagito-article) .balloon-content::before, :is(#tsunagito-article, .tsunagito-article) .balloon-text::before,
:is(#tsunagito-article, .tsunagito-article) .balloon-content::after, :is(#tsunagito-article, .tsunagito-article) .balloon-text::after { display: none; }
:is(#tsunagito-article, .tsunagito-article) .ig-stats .stats-grid { flex-direction: column; }
:is(#tsunagito-article, .tsunagito-article) .ig-cards .card-grid, :is(#tsunagito-article, .tsunagito-article) .ig-cards > div:not(:first-child) { flex-direction: column; }
:is(#tsunagito-article, .tsunagito-article) .ig-compare { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
:is(#tsunagito-article, .tsunagito-article) .ig-compare table, :is(#tsunagito-article, .tsunagito-article) .ig-compare-table { min-width: 400px; }
:is(#tsunagito-article, .tsunagito-article) .cta-banner { padding: 24px 16px; }
:is(#tsunagito-article, .tsunagito-article) .cta-banner-btn, :is(#tsunagito-article, .tsunagito-article) .cta-button { padding: 12px 28px; font-size: .95em; }
}
/* ===================================================================
⚠️ このCSSだけでは「動き」は出ません（静的な見た目のみ）。
・アンサーカードの観音開き / AI引用ボックス / ChatGPT・Perplexityボタン
→ tsunagito-bundle.css + tsunagito-bundle.js（別途設置）が必須
・波線スライドアップ / 吹き出し出現 / FAQ開閉 / トップへ戻る / 内部リンクURL補正
→ tsunagito-ui.js（別途設置）が必須
詳細は「設置手順書.md」を参照。
=================================================================== */
/* ===================================================================
ac-book（アンサーカード観音開き）/ tn-insight-box（AI引用ボックス）バンドルCSS
※ JS（tsunagito-article.js）と対で動作。AI引用ボックスは既定で緑。
※ クラス名がツナギト固有のため未スコープ（衝突なし）。
=================================================================== */
/* ===== ac-book (アンサーカード) ===== */
.ac-book-wrap{perspective:2500px;margin:40px auto;display:flex;justify-content:center;max-width:680px}
.ac-book{position:relative;width:340px;min-height:470px;transition:width 1s cubic-bezier(.5,.1,.25,1) .2s;border-radius:10px;font-family:'Klee One','Zen Maru Gothic',-apple-system,"Hiragino Sans",sans-serif}
.ac-book *,.ac-book__cover *{font-family:'Klee One','Zen Maru Gothic',-apple-system,"Hiragino Sans",sans-serif}
.ac-book.ac-visible{width:680px}
.ac-book::after{content:'';position:absolute;top:14px;bottom:14px;left:50%;transform:translateX(-50%);width:1px;background:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.05) 15%,rgba(0,0,0,.14) 50%,rgba(0,0,0,.05) 85%,transparent 100%);z-index:2;opacity:0;transition:opacity .4s ease 1s;pointer-events:none}
.ac-book.ac-visible::after{opacity:1}
.ac-book__page{position:absolute;top:0;bottom:0;width:340px;padding:26px 24px 24px;background:linear-gradient(135deg,#fdfcf6 0%,#f9f5e8 100%);border:1px solid #d9cfb3;z-index:1;overflow:hidden;box-sizing:border-box}
.ac-book__page--left{left:0;border-right:none;border-radius:10px 0 0 10px;padding-right:32px;box-shadow:inset -14px 0 24px rgba(121,87,48,.08),inset 2px 2px 0 rgba(255,253,245,.6)}
.ac-book__page--right{right:0;border-left:none;border-radius:0 10px 10px 0;padding-left:34px;box-shadow:inset 14px 0 24px rgba(121,87,48,.08),inset -2px 2px 0 rgba(255,253,245,.6)}
.ac-book__page--left h3{margin:0 0 16px!important;font-size:17px!important;font-weight:700!important;color:#5a3a1b!important;display:flex;align-items:center;gap:8px;padding-bottom:12px;border-bottom:1.5px solid #d9c299;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:.02em}
.ac-book__page--left h3::before{content:'\1F4CC ';font-size:18px;flex-shrink:0}
.ac-book__theme{display:inline-block;margin:6px 0 14px;padding:0;font-size:36px;font-weight:900;line-height:1.15;letter-spacing:.04em;font-family:'Shippori Mincho B1','Noto Serif JP','Yu Mincho','YuMincho','Hiragino Mincho ProN',serif;background:linear-gradient(180deg,#d8a145 0%,#c2873c 30%,#9b6b2f 65%,#7a5225 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;filter:drop-shadow(1px 1px 0 rgba(255,255,255,.95)) drop-shadow(-1px -1px 0 rgba(255,255,255,.5)) drop-shadow(0 3px 5px rgba(74,44,23,.45)) drop-shadow(0 1px 2px rgba(0,0,0,.25));transform:rotate(-.5deg);white-space:nowrap}
.ac-book__page--left p{margin:12px 0 0!important;font-size:16px!important;line-height:1.9!important;color:#2a1f14!important;font-weight:500;word-break:break-word;letter-spacing:.01em;font-feature-settings:"palt" 1}
.ac-book mark[data-hl="summary"]{background:linear-gradient(transparent 55%,#ead28a 55%,#e6c66f 100%)!important;padding:2px 4px;font-weight:700;color:#1a1208!important;text-shadow:0 0 1px rgba(255,245,220,.5);border-radius:2px}
.ac-book__page--right .ac-book__points-label{margin:0 0 10px!important;padding-bottom:10px;border-bottom:1px dashed #d9c299}
.ac-book__page--right .ac-book__points-label strong{font-size:12px;font-weight:700;color:#8b5a2b;letter-spacing:.15em}
.ac-book__points{list-style:none!important;margin:6px 0 0!important;padding:0!important}
.ac-book__points li{margin:12px 0!important;padding-left:24px!important;position:relative;font-size:13.5px;line-height:1.78;color:#1f1812;font-weight:600;letter-spacing:.015em;min-height:1.5em;word-break:break-word;font-feature-settings:"palt" 1}
.ac-book__points li::before{content:'✓';color:#8b5a2b;font-weight:900;position:absolute;left:0;top:0;font-size:16px;text-shadow:0 0 1px rgba(139,90,43,.3)}
.ac-book__points li.ac-typing::after{content:'|';animation:ac-cursor-blink .8s infinite;color:#8b5a2b;font-weight:400;margin-left:2px}
.ac-book__points li.ac-typed::after{content:''}
@keyframes ac-cursor-blink{0%,50%{opacity:1}51%,100%{opacity:0}}
.ac-book__check{position:absolute;right:18px;bottom:16px;width:115px;height:115px;transform:scale(0) rotate(-25deg);transform-origin:center;opacity:0;z-index:6;pointer-events:none;filter:drop-shadow(0 8px 18px rgba(76,175,80,.45));transition:opacity .3s ease,transform .7s cubic-bezier(.34,1.56,.64,1)}
.ac-book.ac-done .ac-book__check{opacity:1;transform:scale(1) rotate(-3deg)}
.ac-book__check .ac-check-circle{fill:#e8f6ea;stroke:#6bbd6f;stroke-width:5;transform-origin:center;transform:scale(0);transition:transform .5s cubic-bezier(.34,1.56,.64,1) .05s}
.ac-book.ac-done .ac-book__check .ac-check-circle{transform:scale(1)}
.ac-book__check .ac-check-mark{fill:none;stroke:#4caf50;stroke-width:11;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:120;stroke-dashoffset:120;transition:stroke-dashoffset .55s cubic-bezier(.65,0,.35,1) .3s}
.ac-book.ac-done .ac-book__check .ac-check-mark{stroke-dashoffset:0}
.ac-book__cover{position:absolute;top:0;right:0;bottom:0;width:340px;min-height:100%;background:repeating-radial-gradient(circle at 15% 20%,rgba(0,0,0,.05) 0,rgba(0,0,0,.05) 1px,transparent 1px,transparent 3px),repeating-radial-gradient(circle at 80% 75%,rgba(255,220,180,.05) 0,rgba(255,220,180,.05) 1px,transparent 1px,transparent 5px),radial-gradient(ellipse at 25% 15%,rgba(255,220,180,.18) 0%,transparent 55%),radial-gradient(ellipse at 50% 100%,rgba(0,0,0,.32) 0%,transparent 70%),linear-gradient(135deg,#a87349 0%,#8b5a2b 25%,#6b4226 55%,#4a2c17 80%,#2e1a0c 100%);border-radius:10px;transform-origin:left center;transform-style:preserve-3d;backface-visibility:hidden;z-index:10;transition:transform 1s cubic-bezier(.5,.1,.25,1) .2s;box-shadow:0 15px 40px rgba(74,44,23,.45),inset 0 0 70px rgba(0,0,0,.28),inset 10px 0 0 rgba(255,220,180,.15),inset 14px 0 24px rgba(0,0,0,.32),inset -4px -4px 20px rgba(255,220,180,.08);display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff8ec;padding:28px}
.ac-book__cover::before{content:'';position:absolute;inset:14px;border:1.5px dashed rgba(255,215,140,.35);border-radius:5px;pointer-events:none}
.ac-book.ac-visible .ac-book__cover{transform:rotateY(-180deg)}
.ac-book__cover-icon{display:block;font-size:54px;margin-bottom:18px;filter:drop-shadow(0 4px 14px rgba(0,0,0,.45)) drop-shadow(0 0 3px rgba(255,255,255,.15));color:#ffd78a;line-height:1}
.ac-book__cover-label{display:block;font-size:24px;font-weight:700;letter-spacing:.35em;color:#fff4dc;text-align:center;text-shadow:0 2px 8px rgba(0,0,0,.55),0 0 1px rgba(255,220,150,.4);font-family:'Georgia','Times New Roman',serif;padding-right:.35em}
.ac-book__cover-mobile{display:none}
.ac-book__mobile-summary{display:none}
.answer-card[data-ac-transformed],.blog-answer-card[data-ac-transformed]{display:none!important}
@media (min-width:601px) and (max-width:900px){
.ac-book{width:300px;min-height:460px}
.ac-book.ac-visible{width:600px}
.ac-book__page,.ac-book__cover{width:300px}
}
@media (max-width:600px){
.ac-book-wrap{perspective:1400px;margin:24px auto;padding:0 8px;max-width:100%}
.ac-book{
width:100%!important;max-width:320px;height:420px;min-height:420px;
transform-style:flat!important;transform:none!important;
cursor:pointer;user-select:none;position:relative;
}
.ac-book.ac-flipped{transform:none!important}
.ac-book.ac-visible{width:100%!important}
.ac-book::after{display:none}
.ac-book__page--left{display:none!important}
.ac-book__page--right{
position:absolute!important;inset:0!important;width:100%!important;height:100%!important;
padding:22px 20px 22px!important;border-radius:12px;box-sizing:border-box;
transform:rotateY(180deg)!important;transform-origin:center center!important;
backface-visibility:hidden;
transition:transform .9s cubic-bezier(.4,0,.2,1)!important;
box-shadow:inset 0 2px 0 rgba(255,253,245,.7),0 8px 20px rgba(0,0,0,.1);
overflow-y:auto!important;overflow-x:hidden;
-webkit-overflow-scrolling:touch;
touch-action:pan-y;
overscroll-behavior:contain;
}
.ac-book.ac-flipped .ac-book__page--right{
transform:rotateY(0deg)!important;
}
.ac-book__page--right .ac-book__scroll{
display:contents;
}
.ac-book__page--right::-webkit-scrollbar{width:4px}
.ac-book__page--right::-webkit-scrollbar-thumb{background:#d9c299;border-radius:2px}
.ac-book__page--right::-webkit-scrollbar-track{background:transparent}
.ac-book__page--right .ac-book__points-label{margin:0 0 8px!important;padding-bottom:8px;border-bottom:1px dashed #d9c299}
.ac-book__page--right .ac-book__points-label strong{font-size:11px;letter-spacing:.12em}
.ac-book__mobile-summary{display:block!important;margin:10px 0 14px!important;font-size:12px;line-height:1.65;color:#3a2a1a}
.ac-book__mobile-summary mark{font-size:12px!important;padding:1px 3px!important}
.ac-book__points li{font-size:12.5px;padding-left:22px!important;line-height:1.65;margin:10px 0!important;font-weight:600}
.ac-book__points li::before{font-size:14px}
.ac-book__cover{
width:100%!important;inset:0;padding:26px 20px;
transform:rotateY(0)!important;transform-origin:center center!important;
transition:transform .9s cubic-bezier(.4,0,.2,1)!important;
border-radius:12px;
backface-visibility:hidden;
}
.ac-book.ac-flipped .ac-book__cover{
transform:rotateY(-180deg)!important;
}
.ac-book__cover-icon,.ac-book__cover-label{display:none!important}
.ac-book__cover-mobile{
display:flex!important;flex-direction:column;align-items:center;gap:14px;
width:100%;color:#fff8ec;text-align:center;
}
.ac-book__cover-mobile-h3{
font-size:16px;font-weight:700;letter-spacing:.05em;
padding:0 0 10px;border-bottom:1px dashed rgba(255,220,150,.4);
width:80%;
}
.ac-book__cover-mobile-theme{
display:block;font-size:30px;font-weight:900;line-height:1.18;letter-spacing:.03em;
font-family:'Shippori Mincho B1','Noto Serif JP','Yu Mincho','YuMincho','Hiragino Mincho ProN',serif;
background:linear-gradient(180deg,#d8a145 0%,#c2873c 30%,#9b6b2f 65%,#7a5225 100%);
-webkit-background-clip:text;background-clip:text;
-webkit-text-fill-color:transparent;color:transparent;
filter:drop-shadow(1px 1px 0 rgba(255,255,255,.95)) drop-shadow(0 3px 5px rgba(74,44,23,.45)) drop-shadow(0 1px 2px rgba(0,0,0,.25));
transform:rotate(-.5deg);
word-break:keep-all;white-space:normal;max-width:90%;
}
.ac-book__cover-mobile-hint{
font-size:11px;letter-spacing:.15em;
color:rgba(255,248,236,.7);
padding:6px 14px;border:1px dashed rgba(255,220,150,.4);border-radius:20px;
margin-top:6px;
}
.ac-book.ac-flipped .ac-book__cover-mobile-hint{opacity:0}
.ac-book__check{display:none!important}
}
@media (prefers-reduced-motion:reduce){
.ac-book,.ac-book__cover,.ac-book__check,.ac-book__check .ac-check-circle,.ac-book__check .ac-check-mark,.section-summary{transition:none!important;animation:none!important}
}
.section-summary[data-ai-summary="faq"],
.section-summary[data-ai-summary="references"]{
font-family:'Zen Maru Gothic',-apple-system,"Hiragino Sans",sans-serif!important;
background:linear-gradient(135deg,#fefcf4 0%,#f8f2e0 100%)!important;
padding:18px 22px 18px 52px!important;
border-radius:4px!important;
border:1px solid #e5d9b8!important;
border-left:1px solid #e5d9b8!important;
box-shadow:0 3px 10px rgba(0,0,0,.08),inset 0 1px 0 rgba(255,255,255,.8)!important;
position:relative!important;
margin:28px 0!important;
max-width:none;
line-height:1.8!important;
color:#2a2420!important;
opacity:1;transform:translateX(0);
}
.section-summary[data-ai-summary="faq"]::before,
.section-summary[data-ai-summary="references"]::before{
content:'';position:absolute;
left:16px;top:-4px;
width:22px;height:42px;
/* ★2026-06-30 リボン（ふせん）= sub（行動色オレンジ）。見本準拠。緑固定から変更 */
background:linear-gradient(180deg,var(--tc-sub,#ffa238) 0%,var(--tc-sub,#ffa238) 55%,var(--tc-sub-dark,#b37127) 100%);
clip-path:polygon(0 0,100% 0,100% 100%,50% 72%,0 100%);
box-shadow:2px 2px 4px rgba(0,0,0,.12);
z-index:2;
}
.section-summary[data-ai-summary="faq"] strong,
.section-summary[data-ai-summary="references"] strong{
background:linear-gradient(transparent 58%,#fff5a0 58%,#ffe878 100%);
padding:1px 4px;font-weight:700;color:#1a1208!important;border-radius:1px;
}
.section-summary[data-ai-summary="faq"] p,
.section-summary[data-ai-summary="references"] p{
margin:4px 0!important;font-size:15px;color:#2a2420!important;font-weight:500;
}
.section-summary[data-ai-summary="faq"].ss-animate,
.section-summary[data-ai-summary="references"].ss-animate{
animation:ss-wobble .9s cubic-bezier(.36,0,.25,1);
}
@keyframes ss-wobble{
0% {transform:translateX(-20px) rotate(-1deg)}
30% {transform:translateX(8px) rotate(.8deg)}
60% {transform:translateX(-3px) rotate(-.3deg)}
100% {transform:translateX(0) rotate(0)}
}
@media (max-width:600px){
.section-summary[data-ai-summary="faq"],
.section-summary[data-ai-summary="references"]{
padding:14px 16px 14px 42px!important;font-size:13.5px!important;margin:20px auto!important;
}
.section-summary[data-ai-summary="faq"]::before,
.section-summary[data-ai-summary="references"]::before{left:12px;width:18px;height:34px;top:-3px}
.section-summary[data-ai-summary="faq"] p,
.section-summary[data-ai-summary="references"] p{font-size:13.5px}
}
.section-summary[data-ss-replaced]{display:none!important}
/* ===== AI引用ボックス（黒板チョーク・固定色／2026-06-29 v9同期）=====
★ライブ(preview-body)正本と一致。緑壁デザインは廃止。固定色(ブランド非依存)。
★フォント Yomogi / Kaisei Decol は Google Fonts の読み込みが必要(setup-guide参照)。 */
.tn-insight-box,.tn-insight-box *,.tn-summary-card,.tn-summary-card *{
font-family:'Kaisei Decol','Hiragino Kaku Gothic Pro','Hiragino Sans',Meiryo,sans-serif;
}
.tn-insight-box{
position:relative;max-width:780px;margin:40px auto;border-radius:14px;
padding:30px 32px 30px;
border:14px solid #9c733f;border-bottom:24px solid #86612f;
background:
radial-gradient(120% 80% at 18% 12%, rgba(255,255,255,.05), transparent 50%),
radial-gradient(90% 70% at 85% 90%, rgba(0,0,0,.18), transparent 55%),
linear-gradient(160deg,#33574a,#2b4a3f 55%,#26433a);
box-shadow:0 18px 40px rgba(0,0,0,.28),0 0 0 2px rgba(0,0,0,.22) inset,0 8px 24px rgba(0,0,0,.32) inset;
overflow:visible;opacity:1;scroll-margin-top:80px;
}
.tn-insight-box::before{content:'';position:absolute;inset:0;border-radius:4px;background-image:radial-gradient(rgba(255,255,255,.035) 1px,transparent 1px),radial-gradient(rgba(255,255,255,.025) 1px,transparent 1px);background-size:7px 7px,11px 11px;background-position:0 0,3px 4px;opacity:.6;pointer-events:none;mix-blend-mode:screen;z-index:0}
.tn-insight-box > *{position:relative;z-index:1}
.tn-insight-box::after{content:'';position:absolute;left:22px;bottom:-19px;z-index:2;width:150px;height:16px;background:linear-gradient(180deg,#6b4a8f 0 55%,#d9c27a 55% 100%) 0 2px/56px 13px no-repeat,linear-gradient(180deg,#fdfdf6,#e7e7da) 70px 5px/40px 9px no-repeat,linear-gradient(180deg,#f6e9a8,#e3cf78) 104px 6px/40px 8px no-repeat;filter:drop-shadow(0 3px 5px rgba(0,0,0,.4));border-radius:3px}
.tn-insight-label{
display:inline-flex;align-items:center;gap:8px;font-family:'Yomogi',cursive;font-size:14px;letter-spacing:.04em;color:#f3e4a0;
margin-bottom:16px;padding:4px 14px 5px;border:2px dashed rgba(243,228,160,.7);border-radius:22px;
text-shadow:0 0 1px rgba(243,228,160,.6),0 0 6px rgba(243,228,160,.25);
}
.tn-insight-label::before{content:'';width:8px;height:8px;border-radius:50%;background:#f3e4a0;box-shadow:0 0 7px rgba(243,228,160,.8)}
.tn-insight-answer{font-family:'Yomogi',cursive;font-weight:400;font-size:20px;line-height:1.55;margin:0 0 14px;color:#eef0e6;text-shadow:0 0 1px rgba(238,240,230,.9),0 0 4px rgba(238,240,230,.3),1px 1px 0 rgba(0,0,0,.12)}
.tn-insight-answer b,.tn-insight-answer strong{color:#fff}
.tn-insight-points{margin:16px 0 6px;padding:14px 18px;list-style:none;background:rgba(0,0,0,.16);border:1px dashed rgba(238,240,230,.22);border-radius:8px}
.tn-insight-points li{margin:0;padding:9px 4px 9px 38px;position:relative;font-size:15.5px;color:#eef0e6;line-height:1.7;font-weight:400;text-shadow:0 0 3px rgba(238,240,230,.18)}
.tn-insight-points li + li{border-top:1.5px dotted rgba(238,240,230,.2)}
.tn-insight-points li::before{content:'';position:absolute;left:8px;top:12px;width:16px;height:10px;border-left:3px solid #f3e4a0;border-bottom:3px solid #f3e4a0;transform:rotate(-48deg);border-radius:2px;box-shadow:0 0 5px rgba(243,228,160,.4)}
.tn-insight-points li b,.tn-insight-points li strong{color:#fff;font-weight:700}
/* 根拠と引用 トグル行＋AI訴求ヒント＋パネル */
.tn-cta-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:16px}
.tn-ai-hint{display:inline-flex;align-items:center;gap:7px;font-family:'Yomogi',cursive;font-size:13.5px;color:#f3e4a0;text-shadow:0 0 1px rgba(243,228,160,.6),0 0 6px rgba(243,228,160,.22)}
.tn-ai-hint svg{display:block;overflow:visible;animation:tn-arrow-bob 1.4s ease-in-out infinite}
.tn-ai-hint svg path{stroke:#f3e4a0;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 3px rgba(243,228,160,.35))}
@keyframes tn-arrow-bob{0%,100%{transform:translateX(0)}50%{transform:translateX(-5px)}}
.tn-insight-expand-toggle{
display:inline-flex;align-items:center;gap:8px;padding:7px 16px;
border-radius:18px;border:1.5px dashed #d9ddcf;background:rgba(255,255,255,.06);color:#eef0e6;
font-size:13px;font-weight:400;cursor:pointer;transition:all .2s ease;
font-family:'Yomogi',cursive;
}
.tn-insight-expand-toggle:hover{background:rgba(255,255,255,.14);color:#fff;border-color:#eef0e6}
.tn-insight-expand-toggle::after{content:'\25BC';font-size:9px;transition:transform .25s ease}
.tn-insight-box.tn-expanded .tn-insight-expand-toggle::after{transform:rotate(180deg)}
.tn-insight-panel{max-height:0;overflow:hidden;opacity:0;transition:max-height .4s ease,opacity .3s ease}
.tn-insight-box.tn-expanded .tn-insight-panel{max-height:800px;opacity:1;margin-top:14px;padding-top:14px;border-top:1px dashed rgba(238,240,230,.25)}
.tn-evidence h3,.tn-evidence h4{margin:0 0 8px;font-size:12px;color:#b9c0ad;font-weight:700;letter-spacing:.08em;display:flex;align-items:center;gap:6px}
.tn-evidence-list{list-style:none;margin:0 0 12px;padding:0}
.tn-evidence-item{font-size:13px;color:#d9ddcf;margin:6px 0;display:flex;align-items:flex-start;gap:8px;line-height:1.6}
.tn-evidence-badge{display:inline-block;padding:2px 8px;border-radius:10px;background:rgba(255,255,255,.1);color:#eef0e6;font-size:10px;font-weight:700;flex-shrink:0;margin-top:1px;white-space:nowrap}
.tn-evidence-badge--statistic{background:rgba(188,214,232,.2);color:#bcd6e8}
.tn-evidence-badge--paper{background:rgba(240,188,196,.2);color:#f0bcc4}
.tn-evidence-badge--gov{background:rgba(243,228,160,.2);color:#f3e4a0}
.tn-evidence-badge--news{background:rgba(255,255,255,.12);color:#d9ddcf}
.tn-evidence-link{color:#bcd6e8;text-decoration:underline;font-weight:600;word-break:break-all}
.tn-evidence-note{font-size:11.5px;color:#b9c0ad;margin:6px 0 12px;padding:6px 10px;background:rgba(0,0,0,.18);border-left:2px solid rgba(238,240,230,.25);border-radius:2px}
.tn-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
.tn-action-btn{
padding:7px 12px;border-radius:6px;border:1px dashed rgba(238,240,230,.4);background:rgba(255,255,255,.05);cursor:pointer;
font-size:12px;font-weight:400;color:#d9ddcf;display:inline-flex;align-items:center;gap:5px;
transition:all .2s ease;font-family:'Yomogi',cursive;
}
.tn-action-btn:hover{border-color:#eef0e6;color:#fff;background:rgba(255,255,255,.13);transform:translateY(-1px)}
.tn-action-btn--ai{color:#f0bcc4;border-color:rgba(240,188,196,.5)}
.tn-action-btn--ai:hover{background:rgba(240,188,196,.12);border-color:#f0bcc4;color:#fff}
.tn-toast{
position:fixed;left:50%;bottom:40px;transform:translateX(-50%) translateY(20px);
background:#1f2937;color:#fff;padding:12px 22px;border-radius:8px;
font-size:13px;font-weight:600;opacity:0;pointer-events:none;
transition:opacity .25s ease,transform .25s ease;z-index:10000;
box-shadow:0 8px 24px rgba(0,0,0,.25);font-family:'Zen Maru Gothic',sans-serif;
}
.tn-toast--visible{opacity:1;transform:translateX(-50%) translateY(0)}
@media (max-width:600px){
.tn-insight-expand-toggle{font-size:11.5px;padding:6px 12px}
.tn-action-btn{font-size:10.5px;padding:6px 9px}
}
/* モーション：上から落ちて軽くバウンド(緑壁スウィープ廃止) */
.tn-insight-box.tn-visible{animation:tn-chalk-drop .62s cubic-bezier(.2,.8,.25,1) both}
@keyframes tn-chalk-drop{
0%{transform:translateY(-28px);opacity:0}
55%{transform:translateY(6px);opacity:1}
78%{transform:translateY(-3px)}
100%{transform:translateY(0)}
}
@media (prefers-reduced-motion:reduce){.tn-insight-box.tn-visible{animation:none}}
@media (max-width:600px){
.tn-insight-box{padding:22px 18px;max-width:100%;margin:24px auto;border-width:10px;border-bottom-width:20px}
.tn-insight-answer{font-size:17px}
.tn-insight-box::after{width:120px}
}
/* ==================================================================
EC商品カード（pc-section--mvp / tsg-product-card / pc-collection / カルーセル）
※EC(Shopify/RtR等)クライアントのみ使用。通常ブログ記事には出現しない。
素クラス(pc-/tsg-前置)で衝突回避済み。色は --tc-* 連動。
================================================================== */
/* ============================================
EC 商品カード MVP CSS v1.0
ツナギト EC パッケージ向け
(pc-section--mvp / tsg-product-card)
============================================
設計:
- :is(#tsunagito-article, .tsunagito-article) 配下にスコープ限定
- クライアントサイトの既存デザインと競合しない
- WF2A 出力の pc-section--mvp ラッパー HTML に対応
- 3列グリッド(タブレット 2列 / モバイル 1列)
- レンタルボタンは tsg-product-card__button
将来の v1.0 装飾(非対称グリッド/バッジ/ホバー/AIキャプション)は
EC-32(Phase C-8)で別途実装
============================================ */
/* ============================================
pc-section--mvp ラッパー
============================================ */
:is(#tsunagito-article, .tsunagito-article) .pc-section--mvp {
margin: 40px 0;
padding: 0;
}
/* ★v2(2026-06-27): H2カードは PC=横スライド(カルーセル)。base を flex+overflow に統一(プレビューと同モデル)。
carousel.js 読込時=矢印+自動スライド / 未読込時=横スクロール(graceful)。1ビュー約3枚(clampで等幅)。 */
:is(#tsunagito-article, .tsunagito-article) .pc-section--mvp__grid {
display: flex;
overflow-x: auto;
gap: 20px;
margin: 0;
scroll-snap-type: x proximity;
-webkit-overflow-scrolling: touch;
}
:is(#tsunagito-article, .tsunagito-article) .pc-section--mvp__grid > .tsg-product-card {
flex: 0 0 clamp(260px, calc((100% - 40px) / 3), 380px);
scroll-snap-align: start;
}
/* ============================================
tsg-product-card 個別カード
============================================ */
:is(#tsunagito-article, .tsunagito-article) .tsg-product-card {
display: flex;
flex-direction: column;
background: #fff;
border-radius: 12px;
overflow: hidden;
box-shadow: var(--tc-shadow-md);
transition: all 0.3s ease;
text-decoration: none;
color: inherit;
}
:is(#tsunagito-article, .tsunagito-article) .tsg-product-card:hover {
transform: translateY(-4px);
box-shadow: var(--tc-shadow-lg);
}
:is(#tsunagito-article, .tsunagito-article) .tsg-product-card__image {
width: 100%;
aspect-ratio: 3 / 4;
object-fit: cover;
display: block;
background: #f5f5f5;
}
:is(#tsunagito-article, .tsunagito-article) .tsg-product-card__body {
padding: 16px 18px 20px;
display: flex;
flex-direction: column;
gap: 8px;
flex: 1;
}
:is(#tsunagito-article, .tsunagito-article) .tsg-product-card__label {
font-size: 0.75em;
color: var(--tc-base);
font-weight: 600;
letter-spacing: 0.05em;
margin: 0;
text-transform: uppercase;
}
:is(#tsunagito-article, .tsunagito-article) .tsg-product-card__title {
font-size: 1em;
font-weight: bold;
color: #1a1a1a;
margin: 0;
line-height: 1.5;
padding: 0;
border: none;
}
:is(#tsunagito-article, .tsunagito-article) .tsg-product-card__meta {
font-size: 0.85em;
color: #666;
margin: 0;
line-height: 1.5;
}
/* 説明文・選定理由（renderProductCard が出力。素のだと長文でカードが縦長になるため明示スタイル） */
:is(#tsunagito-article, .tsunagito-article) .tsg-product-card__description {
font-size: 0.85em;
color: #555;
margin: 0;
line-height: 1.6;
}
:is(#tsunagito-article, .tsunagito-article) .tsg-product-card__reason {
font-size: 0.8em;
color: #888;
margin: 0;
line-height: 1.5;
}
:is(#tsunagito-article, .tsunagito-article) .tsg-product-card__button {
display: inline-block;
margin-top: auto;
padding: 12px 20px;
background: linear-gradient(135deg, var(--tc-base), var(--tc-dark));
color: #fff !important;
text-align: center;
text-decoration: none;
border-radius: 8px;
font-weight: bold;
font-size: 0.95em;
letter-spacing: 0.02em;
transition: all 0.2s ease;
box-shadow: var(--tc-shadow-sm);
}
:is(#tsunagito-article, .tsunagito-article) .tsg-product-card__button:hover {
transform: translateY(-1px);
box-shadow: var(--tc-shadow-md);
background: linear-gradient(135deg, var(--tc-dark), var(--tc-base));
}
/* ============================================
レスポンシブ対応
============================================ */
@media (max-width: 600px) {
/* ★v2: スマホは2列グリッド(全身ドレスの視認性優先・スワイプ廃止)。flex を grid で上書き。 */
:is(#tsunagito-article, .tsunagito-article) .pc-section--mvp__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
overflow: visible;
}
:is(#tsunagito-article, .tsunagito-article) .pc-section--mvp__grid > .tsg-product-card {
flex: none;
width: auto;
min-width: 0;
}
:is(#tsunagito-article, .tsunagito-article) .tsg-product-card__image {
aspect-ratio: 3 / 4;
}
/* ★v9(2026-06-28): スマホ2列維持のままカード縦長を抑制＝タイトル/説明文/選定理由を行数省略
（画像比率・価格/ブランド・CTAは省略しない。長文の商品だけ自然に…で切れる） */
:is(#tsunagito-article, .tsunagito-article) .tsg-product-card__body { padding: 12px 12px 14px; gap: 6px; }
:is(#tsunagito-article, .tsunagito-article) .tsg-product-card__title {
display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
:is(#tsunagito-article, .tsunagito-article) .tsg-product-card__description {
display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
}
:is(#tsunagito-article, .tsunagito-article) .tsg-product-card__reason {
display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
}
/* ============================================
下部「関連商品まとめ」(v2 / EC-PRODUCT-COLLECTION-1 / 2026-06-27)
H2カード(横スライド)とは別の静的グリッド: PC3列・スマホ2列。カードは .tsg-product-card 流用。
============================================ */
:is(#tsunagito-article, .tsunagito-article) .pc-collection {
margin: 48px 0;
}
:is(#tsunagito-article, .tsunagito-article) .pc-collection__title {
margin: 0 0 20px;
}
:is(#tsunagito-article, .tsunagito-article) .pc-collection__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
@media (max-width: 600px) {
:is(#tsunagito-article, .tsunagito-article) .pc-collection__grid {
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
}
/* ============================================
関連カード / インラインリンク(EC専用ではないが
pc-section と同じ系統なのでここにまとめる)
============================================ */
:is(#tsunagito-article, .tsunagito-article) .related-card {
margin: 32px 0;
}
:is(#tsunagito-article, .tsunagito-article) .related-card a {
display: block;
text-decoration: none;
color: inherit;
}
:is(#tsunagito-article, .tsunagito-article) .related-card-inner {
display: flex;
align-items: center;
gap: 16px;
padding: 20px 24px;
background: linear-gradient(135deg, #ffffff 0%, var(--tc-light) 100%);
border: 1px solid var(--tc-line);
border-radius: 12px;
box-shadow: var(--tc-shadow-sm);
transition: all 0.2s ease;
}
:is(#tsunagito-article, .tsunagito-article) .related-card-inner:hover {
box-shadow: var(--tc-shadow-md);
transform: translateX(4px);
}
:is(#tsunagito-article, .tsunagito-article) .related-card-label {
display: inline-block;
padding: 4px 10px;
background: var(--tc-sub);
color: #fff;
font-size: 0.75em;
font-weight: 600;
border-radius: 4px;
flex-shrink: 0;
}
:is(#tsunagito-article, .tsunagito-article) .related-card-title {
margin: 0;
font-size: 0.95em;
font-weight: bold;
color: #1a1a1a;
line-height: 1.5;
}
:is(#tsunagito-article, .tsunagito-article) .inline-link {
margin: 20px 0;
padding: 12px 20px;
background: var(--tc-light);
border-left: 3px solid var(--tc-sub);
border-radius: 4px;
}
:is(#tsunagito-article, .tsunagito-article) .inline-link a {
color: var(--tc-sub-dark);
font-weight: 600;
text-decoration: none;
}
:is(#tsunagito-article, .tsunagito-article) .inline-link a:hover {
text-decoration: underline;
}
/* ============================================
IMG プレースホルダー(ゼロ環境プレビュー専用)
実環境では Cloudinary 画像 URL に置換済み
============================================ */
:is(#tsunagito-article, .tsunagito-article) .img-placeholder {
display: flex;
align-items: center;
justify-content: center;
margin: 32px 0;
padding: 60px 20px;
background: linear-gradient(135deg, #f8fafc 0%, #e8eef5 100%);
border: 2px dashed var(--tc-line);
border-radius: 12px;
color: var(--tc-base);
font-weight: 600;
font-size: 0.95em;
text-align: center;
min-height: 200px;
}
/* ============================================
citation-badge / source-link 系
============================================ */
:is(#tsunagito-article, .tsunagito-article) .citation-badge {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 16px;
margin: 16px 0;
background: var(--tc-light);
border-radius: 20px;
font-size: 0.85em;
color: var(--tc-base);
font-weight: 600;
}
:is(#tsunagito-article, .tsunagito-article) .references-list {
font-size: 0.85em;
color: #555;
padding-left: 24px;
margin: 16px 0;
}
:is(#tsunagito-article, .tsunagito-article) .references-list li {
margin-bottom: 8px;
line-height: 1.6;
}
:is(#tsunagito-article, .tsunagito-article) .references-list a {
color: var(--tc-sub-dark);
text-decoration: none;
}
:is(#tsunagito-article, .tsunagito-article) .references-list a:hover {
text-decoration: underline;
}
/* ============================================
blog-faq-section(FAQ ブロック)
============================================ */
:is(#tsunagito-article, .tsunagito-article) .blog-faq-section {
margin: 40px 0;
}
:is(#tsunagito-article, .tsunagito-article) .blog-faq-section h2 {
margin-top: 0;
}
:is(#tsunagito-article, .tsunagito-article) .faq-item {
margin: 16px 0;
padding: 18px 22px;
background: #fff;
border: 1px solid #e8e8e8;
border-radius: 8px;
box-shadow: var(--tc-shadow-sm);
}
:is(#tsunagito-article, .tsunagito-article) .faq-question {
font-size: 1em;
font-weight: bold;
color: #1a1a1a;
margin: 0 0 10px 0;
padding: 0;
border: none;
}
:is(#tsunagito-article, .tsunagito-article) .faq-answer {
margin: 0;
font-size: 0.95em;
line-height: 1.8;
color: #444;
}
/* ============================================
insight-box(知見ボックス)
============================================ */
:is(#tsunagito-article, .tsunagito-article) .insight-box {
margin: 32px 0;
padding: 24px 28px;
background: linear-gradient(135deg, #fef9f0 0%, #fff3d6 100%);
border-left: 4px solid #d69e2e;
border-radius: 12px;
box-shadow: var(--tc-shadow-md);
}
:is(#tsunagito-article, .tsunagito-article) .insight-box-body {
font-size: 1em;
font-weight: 600;
color: #1a1a1a;
margin-bottom: 12px;
line-height: 1.7;
}
:is(#tsunagito-article, .tsunagito-article) .insight-box-detail {
font-size: 0.9em;
color: #555;
line-height: 1.8;
}
:is(#tsunagito-article, .tsunagito-article) .insight-box-link {
display: inline-block;
margin-top: 10px;
color: var(--tc-base);
font-weight: 600;
text-decoration: none;
}
:is(#tsunagito-article, .tsunagito-article) .insight-box-link:hover {
text-decoration: underline;
}
/* ============================================
feature-card / card-grid(ig-cards 内部)
============================================ */
:is(#tsunagito-article, .tsunagito-article) .card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 16px;
margin: 20px 0;
}
:is(#tsunagito-article, .tsunagito-article) .feature-card {
padding: 20px;
background: linear-gradient(135deg, #fff 0%, #f8fafc 100%);
border-radius: 10px;
box-shadow: var(--tc-shadow-sm);
border: 1px solid rgba(0,0,0,0.04);
}
:is(#tsunagito-article, .tsunagito-article) .feature-card h4 {
margin: 0 0 8px 0;
font-size: 0.95em;
font-weight: bold;
color: var(--tc-sub);
padding: 0;
border: none;
}
:is(#tsunagito-article, .tsunagito-article) .feature-card p {
margin: 0;
font-size: 0.85em;
color: #555;
line-height: 1.7;
}
/* ============================================
stats-grid / stat-item(ig-stats 内部)
============================================ */
:is(#tsunagito-article, .tsunagito-article) .stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 16px;
margin: 20px 0;
}
:is(#tsunagito-article, .tsunagito-article) .stat-item {
padding: 20px 16px;
text-align: center;
background: linear-gradient(135deg, #fff 0%, #f8fafc 100%);
border-radius: 10px;
border-top: 4px solid var(--tc-base);
box-shadow: var(--tc-shadow-sm);
}
:is(#tsunagito-article, .tsunagito-article) .stat-number {
display: block;
font-size: 1.8em;
font-weight: bold;
color: var(--tc-base);
line-height: 1.2;
margin-bottom: 4px;
}
:is(#tsunagito-article, .tsunagito-article) .stat-label {
display: block;
font-size: 0.8em;
color: #666;
}
/* ============================================
section-summary(各H2直下のサマリーボックス)
============================================ */
:is(#tsunagito-article, .tsunagito-article) .section-summary {
margin: 20px 0 32px;
padding: 20px 24px;
background: linear-gradient(135deg, #f0f7ff 0%, #e6f0ff 100%);
border-left: 4px solid var(--tc-base);
border-radius: 8px;
box-shadow: var(--tc-shadow-sm);
}
:is(#tsunagito-article, .tsunagito-article) .section-summary p {
margin: 0 0 10px 0;
font-size: 0.95em;
line-height: 1.8;
}
:is(#tsunagito-article, .tsunagito-article) .section-summary p:last-child {
margin-bottom: 0;
}
:is(#tsunagito-article, .tsunagito-article) .section-summary ul {
margin: 10px 0 0 0;
padding-left: 20px;
}
:is(#tsunagito-article, .tsunagito-article) .section-summary li {
font-size: 0.9em;
line-height: 1.7;
color: #444;
margin-bottom: 6px;
}
/* ============================================
mark(ハイライト)
============================================ */
:is(#tsunagito-article, .tsunagito-article) mark[data-hl] {
/* ★2026-06-30 ハイライトは黄色固定（蛍光ペン＝重要箇所マーカー・ブランド非連動）。summary金(下)はTA-77固定で維持 */
background: linear-gradient(transparent 60%, #fff3a0 60%);
font-weight: bold;
padding: 0 2px;
}
:is(#tsunagito-article, .tsunagito-article) mark[data-hl="summary"] {
background: linear-gradient(transparent 60%, #ffe082 60%);
}
/* ============================================
dfn(用語定義)
============================================ */
:is(#tsunagito-article, .tsunagito-article) dfn {
font-style: normal;
font-weight: 600;
border-bottom: 2px dotted var(--tc-base);
padding-bottom: 1px;
}
/* === カルーセル(EC商品カード スライダー) === */
/* =====================================================================
* TG Carousel core styles — ツナギト EC 商品カルーセル (CMS非依存・tg-プレフィックス)
* 矢印(円形・白背景・塗り三角) + ドット + 再生/停止トグル の見た目だけを定義。
* 構造(viewport overflow / track flex / transform) は carousel.js が inline で設定するため、
* 本CSSは「装飾」だけで完結する(=どのCMSでもこのCSSを読むだけで矢印/ドットが整う)。
* 色は --tc-base / --tc-dark のCSS変数を尊重(フォールバック付き)。
* 2026-06-01 / 仕様: docs/ec-carousel/README.md・指示書「商品カルーセル実装指示書」
* ===================================================================== */
.tg-carousel { position: relative; }
/* ビューポート(クリップ)とトラック(横一列)。JS未読込時も崩れないよう最低限の保険 */
.tg-viewport { overflow: hidden; border-radius: 12px; }
.tg-track { display: flex; gap: 16px; }
/* ---- 左右の矢印(円形・白背景・塗り三角SVG) ---- */
.tg-arrow {
position: absolute; top: 50%; transform: translateY(-50%);
width: 44px; height: 44px; border-radius: 50%;
background: #fff; border: 0.5px solid rgba(0,0,0,0.18);
box-shadow: 0 2px 10px rgba(0,0,0,0.15);
display: flex; align-items: center; justify-content: center;
cursor: pointer; z-index: 3; padding: 0;
transition: filter .2s ease, transform .2s ease;
}
.tg-arrow:hover { filter: brightness(0.97); }
.tg-arrow:active { transform: translateY(-50%) scale(0.94); }
.tg-arrow svg { width: 14px; height: 16px; display: block; fill: #333; }
.tg-arrow--prev { left: 8px; }
.tg-arrow--next { right: 8px; }
.tg-arrow:focus-visible { outline: 2px solid var(--tc-base, #2E75B6); outline-offset: 2px; }
.tg-arrow[disabled] { opacity: .35; cursor: default; box-shadow: none; }
/* ---- ドットインジケーター ---- */
.tg-dots { display: flex; justify-content: center; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.tg-dots li { margin: 0; padding: 0; }
.tg-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(0,0,0,0.2); border: none; padding: 0; cursor: pointer; transition: width .25s ease, background .25s ease; }
.tg-dot[aria-current="true"] { background: var(--tc-base, #2E75B6); width: 22px; border-radius: 4px; }
.tg-dot:focus-visible { outline: 2px solid var(--tc-base, #2E75B6); outline-offset: 2px; }
/* ---- 再生/停止トグル ---- */
.tg-toggle {
position: absolute; top: 8px; right: 8px; z-index: 3;
background: rgba(255,255,255,0.92); border: 0.5px solid rgba(0,0,0,0.15);
border-radius: 20px; font-size: 11px; line-height: 1; padding: 5px 11px;
cursor: pointer; color: #555;
}
.tg-toggle:focus-visible { outline: 2px solid var(--tc-base, #2E75B6); outline-offset: 2px; }
/* スクリーンリーダー用 */
.tg-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@media (max-width: 600px) {
.tg-arrow { width: 38px; height: 38px; }
.tg-arrow--prev { left: 4px; }
.tg-arrow--next { right: 4px; }
}
/* prefers-reduced-motion: トランジションを無効化(動きを減らす) */
@media (prefers-reduced-motion: reduce) {
.tg-track { transition: none !important; }
.tg-dot { transition: none !important; }
}
/* ===================================================================
★ 見本一致同期ブロック（2026-07-04 / WPノード v4.3.30〜33 同期）
-------------------------------------------------------------------
最善堂SWELL実機×承認済み見本（ゼロ環境プレビュー）の突合で
include_css=ON（自己完結）側に入れた確定値を、外部CSS運用
（include_css=OFF・本ファイル設置）にも同期する。
受け入れ条件＝「ONとOFFで同じ表示」。末尾追記＝後勝ち。
=================================================================== */
/* --- 1) テーマ疑似要素の打ち消し（SWELL実証: h2上下線/h3点線下線が
疑似要素で乗る。element側のbackground/borderリセットだけでは
消えないため content:none で殺す。ac-book📌は !important で復活） --- */
:is(#tsunagito-article, .tsunagito-article) h2::before,
:is(#tsunagito-article, .tsunagito-article) h2::after { content: none !important; }
:is(#tsunagito-article, .tsunagito-article) h3:where(:not(.faq-question):not(.faq-future-heading))::before { content: none !important; }
/* 📌復活時はSWELLの疑似要素幾何(width:100%/height:2px/グラデ線)も無効化しないと
「ティール+グレーの2px線」が📌側に残り、タン下線と合わせて3色下線になる(最善堂実測) */
:is(#tsunagito-article, .tsunagito-article) .ac-book__page--left h3::before { content: "\1F4CC " !important; font-size: 18px; flex-shrink: 0; width: auto !important; height: auto !important; background: none !important; position: static !important; display: inline !important; }
:is(#tsunagito-article, .tsunagito-article) h4 { background: none; border: none; padding: 0; }
:is(#tsunagito-article, .tsunagito-article) blockquote::before,
:is(#tsunagito-article, .tsunagito-article) blockquote::after { content: none !important; }
/* faq-question(h3): テーマの h3::before 下線バー幾何を無効化しつつ「Q. 」を保持 */
:is(#tsunagito-article, .tsunagito-article) .faq-question::before { content: "Q. " !important; width: auto !important; height: auto !important; background: none !important; position: static !important; display: inline !important; }
:is(#tsunagito-article, .tsunagito-article) .faq-question { border: none !important; padding: 0 !important; margin: 0 0 12px !important; background: none !important; }
:is(#tsunagito-article, .tsunagito-article) .faq-future-heading::before { content: none !important; }
/* 装飾コンテナ内の h3 はテーマ装飾/黄下線を持ち込まない */
:is(#tsunagito-article, .tsunagito-article) :is(.supervisor-profile, .cta-banner, .cta-block, .cta-mid, .answer-card, .ac-book, .blog-faq-section, .faq-item, .ig-compare, .ig-stats, .ig-steps, .ig-checklist, .ig-timeline, .ig-cards, .tn-insight-box, .blog-toc, .summary-overview, .related-articles) h3 { background: none !important; padding-bottom: 0 !important; }
/* --- 2) 吹き出し: 色枠なしソフトグレー泡＋グレー三角（見本確定。
文字#E06070/アイコン丸枠は既存ルール維持） --- */
:is(#tsunagito-article, .tsunagito-article) .balloon-content { flex: 1; position: relative; background: linear-gradient(135deg, #f8fafc 0%, #f0f4f8 100%) !important; border: 1px solid rgba(0,0,0,0.04); border-radius: 12px; padding: 18px 22px; margin-left: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.10), 0 2px 4px rgba(0,0,0,0.06); }
:is(#tsunagito-article, .tsunagito-article) .balloon-content::before { left: -10px; top: 18px; width: 0; height: 0; border: 10px solid transparent; border-right-color: #f8fafc; border-left: 0; filter: drop-shadow(-2px 1px 1px rgba(0,0,0,0.06)); }
:is(#tsunagito-article, .tsunagito-article) .balloon-content::after { display: none; }
/* --- 3) 図解: ig系h3の左罫線は compare のみ / cards横並びコンパクト /
stats1行 / steps白カード / compareパネル --- */
:is(#tsunagito-article, .tsunagito-article) :is(.ig-steps, .ig-stats, .ig-checklist, .ig-timeline, .ig-cards) > h3 { border-left: none !important; padding-left: 0 !important; }
:is(#tsunagito-article, .tsunagito-article) .ig-cards { display: block !important; padding: 16px; }
:is(#tsunagito-article, .tsunagito-article) .ig-cards > h3 { display: block !important; float: none !important; width: 100% !important; text-align: left !important; margin: 0 0 14px !important; }
:is(#tsunagito-article, .tsunagito-article) .ig-cards .card-grid { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; gap: 14px !important; width: 100% !important; }
:is(#tsunagito-article, .tsunagito-article) .ig-cards .card-grid > * { flex: 1 1 0 !important; min-width: 0 !important; }
:is(#tsunagito-article, .tsunagito-article) :is(.ig-cards .feature-card, .ig-cards .ig-card, .ig-cards .card) { background: linear-gradient(135deg, #fff 0%, #f8fafc 100%); border: none !important; border-radius: 12px; padding: 13px 15px !important; text-align: center; box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
:is(#tsunagito-article, .tsunagito-article) :is(.ig-cards .feature-card, .ig-cards .ig-card, .ig-cards .card) h4 { margin: 0 0 4px; font-size: .95em; font-weight: bold; color: var(--tc-sub); text-align: center; }
:is(#tsunagito-article, .tsunagito-article) :is(.ig-cards .feature-card, .ig-cards .ig-card, .ig-cards .card) p { margin: 0; font-size: .84em; color: #555; line-height: 1.5; text-align: left; }
/* stats 1行コンパクト（数字1.4em） */
:is(#tsunagito-article, .tsunagito-article) .ig-stats .stats-grid { flex-wrap: nowrap !important; gap: 12px !important; justify-content: center !important; margin: 8px 0 0 !important; }
:is(#tsunagito-article, .tsunagito-article) :is(.ig-stats .stats-grid .stat-item, .ig-stats .stat-item, .ig-stat-item) { flex: 1 1 0 !important; min-width: 0 !important; padding: 12px 14px !important; border-radius: 10px !important; border: none !important; box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important; }
:is(#tsunagito-article, .tsunagito-article) :is(.ig-stats .stat-number, .ig-stat-number) { font-size: 1.4em !important; margin-bottom: 4px !important; }
:is(#tsunagito-article, .tsunagito-article) :is(.ig-stats .stat-label, .ig-stat-label) { font-size: .78em !important; margin-top: 4px !important; line-height: 1.4 !important; }
/* steps: 1ステップ1白カード */
:is(#tsunagito-article, .tsunagito-article) .ig-steps ol { list-style: none !important; padding: 0 !important; margin: 0 !important; }
:is(#tsunagito-article, .tsunagito-article) .ig-steps ol li { padding: 18px 20px !important; background: #fff !important; border: 1px solid rgba(0,0,0,0.06) !important; border-radius: 12px !important; margin-bottom: 10px !important; box-shadow: 0 1px 3px rgba(0,0,0,0.08); line-height: 1.7; }
:is(#tsunagito-article, .tsunagito-article) .ig-steps ol li strong { color: var(--tc-sub); font-weight: bold; }
/* compare: 淡グラデパネル＋内側テーブル影＋h3左罫線=sub */
:is(#tsunagito-article, .tsunagito-article) .ig-compare { background: linear-gradient(135deg, #fbfcfe, #eef3f9) !important; border: 1px solid var(--tc-sub-light) !important; border-radius: 14px !important; box-shadow: 0 8px 24px rgba(20,40,80,0.10) !important; padding: 24px 24px 12px !important; margin: 32px 0 !important; overflow: hidden; }
:is(#tsunagito-article, .tsunagito-article) .ig-compare > h3 { margin: 0 0 16px !important; padding: 8px 0 8px 16px !important; font-size: 1.12em !important; font-weight: bold !important; border-left: 5px solid var(--tc-sub) !important; line-height: 1.5 !important; }
:is(#tsunagito-article, .tsunagito-article) :is(.ig-compare table, .ig-compare-table) { box-shadow: 0 3px 12px rgba(0,0,0,0.08); border-radius: 10px; overflow: hidden; background: #fff; }
/* --- 4) FAQ/参考文献リボン = sub（v9の --tc-base は main のため明示的に sub を使う） --- */
:is(#tsunagito-article, .tsunagito-article) .section-summary[data-ai-summary="faq"]::before,
:is(#tsunagito-article, .tsunagito-article) .section-summary[data-ai-summary="references"]::before { background: linear-gradient(180deg, var(--tc-sub) 0%, var(--tc-sub) 50%, var(--tc-sub-dark) 100%) !important; }
/* --- 5) box系 = 見本のパステル地（グラデ終端を淡色に） --- */
:is(#tsunagito-article, .tsunagito-article) .box-important { background: linear-gradient(135deg, #fff5f5 0%, #fee); border-left: 4px solid #e53e3e; }
:is(#tsunagito-article, .tsunagito-article) .box-point { background: linear-gradient(135deg, #fffff0 0%, #fefcbf); border-left: 4px solid #d69e2e; }
:is(#tsunagito-article, .tsunagito-article) .box-warning { background: linear-gradient(135deg, #fffaf0 0%, #feebc8); border-left: 4px solid #ed8936; }
:is(#tsunagito-article, .tsunagito-article) :is(.box-note, .box-memo) { background: linear-gradient(135deg, #f0fff4 0%, #c6f6d5); border-left: 4px solid #38a169; }
/* --- 6) 内部リンク: 「関連記事」チップ付き全幅 --- */
:is(#tsunagito-article, .tsunagito-article) .inline-link { width: 100% !important; max-width: 100% !important; display: block !important; box-sizing: border-box !important; }
:is(#tsunagito-article, .tsunagito-article) .inline-link a::before { content: "関連記事"; display: block; font-size: 12px; font-weight: 600; color: var(--tc-sub); background: var(--tc-sub-light); padding: 2px 8px; border-radius: 4px; margin-bottom: 8px; width: fit-content; }
:is(#tsunagito-article, .tsunagito-article) .related-card { display: block !important; width: 100% !important; min-height: 0; }
/* --- 7) 目次 = 見本値（幅580中央 / 行間1.7 / item 5px） --- */
:is(#tsunagito-article, .tsunagito-article) .blog-toc { max-width: 580px !important; margin-left: auto !important; margin-right: auto !important; }
:is(#tsunagito-article, .tsunagito-article) .blog-toc-item { margin-bottom: 5px; line-height: 1.7; }
/* --- 8) CTAボタン: アンカー内包マークアップでも見本のグラデ丸ボタンになる保険 --- */
:is(#tsunagito-article, .tsunagito-article) .cta-button a { background: linear-gradient(135deg, var(--tc-sub), var(--tc-sub-dark)) !important; border-radius: 50px !important; }
/* --- 9) モバイル: cards/stats は2列折返し・compare横スクロール（見本同値） --- */
@media (max-width: 600px) {
:is(#tsunagito-article, .tsunagito-article) .ig-cards .card-grid { flex-wrap: wrap !important; }
:is(#tsunagito-article, .tsunagito-article) .ig-cards .card-grid > * { flex: 1 1 45% !important; }
:is(#tsunagito-article, .tsunagito-article) .ig-stats .stats-grid { flex-wrap: wrap !important; }
:is(#tsunagito-article, .tsunagito-article) .ig-stats .stats-grid .stat-item { flex: 1 1 45% !important; }
:is(#tsunagito-article, .tsunagito-article) .ig-compare { overflow-x: auto !important; }
}
/* --- 10) 吹き出しイニシャル丸アイコン（写真なし監修者。v7世代に存在→ライブ世代同期v8.0で
欠落していた基本定義の復元 / 2026-07-04 最善堂external実機で発覚） --- */
:is(#tsunagito-article, .tsunagito-article) .balloon-icon.no-photo .balloon-initial,
:is(#tsunagito-article, .tsunagito-article) .supervisor-balloon-icon.no-photo .balloon-initial {
width: 56px; height: 56px; border-radius: 50%;
background: linear-gradient(135deg, var(--tc-base), var(--tc-dark));
color: #fff; display: flex; align-items: center; justify-content: center;
font-weight: bold; font-size: 1.3em; box-shadow: var(--tc-shadow-md); margin: 0 auto;
}
/* --- 12) アンサーカード(ac-book): 見出し下線をタン1本に固定＋チェックマークをブランド色に
（最善堂実測: v9未移植だったTA-77配色ルールの移植。緑チェック→main色） --- */
:is(#tsunagito-article, .tsunagito-article) .ac-book__page--left h3 { padding-bottom: 12px !important; border-bottom: 1.5px solid #d9c299 !important; background: none !important; }
:is(#tsunagito-article, .tsunagito-article) .ac-book__check .ac-check-circle { stroke: var(--tc-base) !important; fill: var(--tc-light) !important; }
:is(#tsunagito-article, .tsunagito-article) .ac-book__check .ac-check-mark { stroke: var(--tc-base) !important; }
:is(#tsunagito-article, .tsunagito-article) .ac-book__check { filter: drop-shadow(0 8px 18px color-mix(in srgb, var(--tc-base) 45%, transparent)) !important; }
/* --- 11) 記事内補足枠 article-aside（旧insight-boxの静的変換先。v9に未収録だった） --- */
:is(#tsunagito-article, .tsunagito-article) .article-aside {
background: linear-gradient(135deg, #f8fafc 0%, #f0f4f8 100%);
border-left: 4px solid var(--tc-sub); border-radius: 0 8px 8px 0;
padding: 18px 22px; margin: 24px 0; box-shadow: var(--tc-shadow-sm);
}
:is(#tsunagito-article, .tsunagito-article) .article-aside .article-aside-body { margin: 0 0 8px; font-size: 1em; line-height: 1.7; color: #1a1a1a; }
:is(#tsunagito-article, .tsunagito-article) .article-aside .article-aside-detail { margin: 0; font-size: .92em; line-height: 1.7; color: #555; }
/* --- 13) Shopify(Reformation)事前監査で判明したテーマ耐性ガード（2026-07-04 RtR実テーマCSS静的監査）
①テーマの p{line-height:1.6} が本文行間を詰める → 見本値1.9を「class無しの素の段落」だけに保証
（:not([class])でコンポーネント内のclass付きp（黒板1.55等）を巻き込まない）
②テーマの blockquote 大装飾(センター寄せ/巨大padding/引用符)を中和（疑似要素は1)で打ち消し済み） --- */
:is(#tsunagito-article, .tsunagito-article) p:not([class]) { line-height: 1.9; }
:is(#tsunagito-article, .tsunagito-article) blockquote { text-align: left; padding: 16px 20px; margin: 20px 0; font-size: 1em; color: inherit; }
/* --- 14) 出力クラス×CSSカバレッジ監査で判明した穴の補完（2026-07-04 Shopifyルート事前監査B） --- */
/* blog-cta-block = プレビュー/Shopify経路が cta-block を改名して出力するエイリアス（.cta-blockと同装飾） */
:is(#tsunagito-article, .tsunagito-article) .blog-cta-block {
background: linear-gradient(135deg, var(--tc-vlight), #fff);
border: 2px solid var(--tc-line); border-radius: 16px; padding: 28px 24px;
margin: 32px 0; text-align: center; box-shadow: var(--tc-shadow-md);
}
:is(#tsunagito-article, .tsunagito-article) .blog-cta-block p { margin: 0 0 16px; color: #1a1a1a; }
/* blog-quote（プレビュー正本から移植） */
:is(#tsunagito-article, .tsunagito-article) .blog-quote {
border-left: 4px solid var(--tc-line); padding: 16px 20px; margin: 20px 0;
background: var(--tc-vlight); border-radius: 0 8px 8px 0; font-style: italic; color: #555;
}
/* WF2A v8.7 タイムラインの timeline-content 系（ON=WPノード/プレビューと同値のパリティ補完） */
:is(#tsunagito-article, .tsunagito-article) .ig-timeline-content { flex: 1; padding-top: 4px; }
:is(#tsunagito-article, .tsunagito-article) .ig-timeline .timeline-content h4 { font-weight: 700; color: #1a1a1a; margin: 0 0 4px; font-size: 1em; }
:is(#tsunagito-article, .tsunagito-article) .ig-timeline .timeline-content p { color: #555; font-size: .9em; line-height: 1.6; margin: 0; }
/* ============================================================
ツナギト装飾テーマ: tech(テック/モダン) 上書きCSS
Version: v1.0.0 (2026-07-10)
変更履歴: v1.0.0 初版(TA-78 Phase 1拡張・ゆたか指示で5テーマ分作成)
設置: tsunagito-article.css の【直後】。配布=連結ビルド tsunagito-article-tech.css。
方式: override(基盤不可触・同詳細度+後置)。
設計: SaaSドキュメントの明快さ。角丸8px統一・ダークネイビーパネル・等幅アクセント。
Codex反映: TL;DR等の「文言」はJS改修(T3)の領域=既定ラベルは「要点」系にする予定。
制約(Phase 1): 絵文字ラベル=T4まで/JS文言・開閉機構=T3まで現行。
============================================================ */
/* ---------- 1) トークン ---------- */
:is(#tsunagito-article, .tsunagito-article) {
--tsg-theme: "tech"; /* JS(v8.2+)のテーマ自動判定用・変更禁止 */
--tk-r: 8px; --tk-r-btn: 6px;
--tk-f-body: 'Noto Sans JP', 'Segoe UI', 'Yu Gothic', sans-serif;
--tk-f-mono: Consolas, 'SF Mono', Menlo, monospace;
--tk-dark: #101725;
--tk-surface: #f6f7fa; --tk-surface-bd: #e3e6ec;
--tk-sem-point: #2b578a; --tk-sem-point-bd: #336699;
--tk-sem-warn: #a86c14; --tk-sem-warn-bd: #d08c2e; --tk-sem-warn-bg: #fdfaf4;
--tk-sem-imp: #a63535; --tk-sem-imp-bd: #cc4b4b; --tk-sem-imp-bg: #fdf5f5;
--tk-sem-note: #2c7a4c; --tk-sem-note-bd: #3f9d68; --tk-sem-note-bg: #f4faf6;
--tk-dur: .18s; --tk-ease: cubic-bezier(.2,.8,.2,1);
}
/* ---------- 2) タイポ(手書き系全廃) ---------- */
:is(#tsunagito-article, .tsunagito-article),
:is(#tsunagito-article, .tsunagito-article) .blog-paragraph,
:is(#tsunagito-article, .tsunagito-article) .tn-insight-box,
:is(#tsunagito-article, .tsunagito-article) .tn-insight-box *,
:is(#tsunagito-article, .tsunagito-article) .tn-summary-card,
:is(#tsunagito-article, .tsunagito-article) .tn-summary-card *,
:is(#tsunagito-article, .tsunagito-article) .ac-book,
:is(#tsunagito-article, .tsunagito-article) .ac-book *,
:is(#tsunagito-article, .tsunagito-article) .ac-book__cover * {
font-family: var(--tk-f-body) !important;
}
/* ---------- 3) 見出し・リード ---------- */
:is(#tsunagito-article, .tsunagito-article) .blog-h2 {
border-bottom: 2px solid #e6e8ee !important;
padding: 0 0 10px;
position: relative;
}
:is(#tsunagito-article, .tsunagito-article) .blog-h2::after {
content: ""; position: absolute; left: 0; bottom: -2px; width: 64px; height: 2px;
background: var(--tc-sub, var(--tc-base));
}
:is(#tsunagito-article, .tsunagito-article) .blog-h3 {
border-left: 3px solid var(--tc-sub, var(--tc-base)) !important;
background: none !important;
}
:is(#tsunagito-article, .tsunagito-article) .blog-lead {
background: var(--tk-surface) !important;
border-left: 0 !important;
border: 1px solid var(--tk-surface-bd) !important;
border-radius: var(--tk-r) !important;
}
/* ---------- 4) サマリー・目次・メタ ---------- */
:is(#tsunagito-article, .tsunagito-article) .summary-overview {
background: #fff !important;
border: 1px solid var(--tk-surface-bd) !important;
border-radius: var(--tk-r) !important;
box-shadow: 0 1px 3px rgba(16,23,37,.08) !important;
}
:is(#tsunagito-article, .tsunagito-article) .summary-overview-num { border-radius: 6px !important; }
:is(#tsunagito-article, .tsunagito-article) .blog-toc {
background: #fff !important;
border: 1px solid var(--tk-surface-bd) !important;
border-radius: var(--tk-r) !important;
}
:is(#tsunagito-article, .tsunagito-article) .blog-toc-title { font-family: var(--tk-f-mono) !important; }
:is(#tsunagito-article, .tsunagito-article) .citation-badge {
background: #f0f3f8 !important; border-radius: var(--tk-r-btn) !important;
font-family: var(--tk-f-mono) !important;
}
:is(#tsunagito-article, .tsunagito-article) .supervisor-profile {
border-radius: var(--tk-r) !important;
box-shadow: 0 1px 3px rgba(16,23,37,.08) !important;
}
:is(#tsunagito-article, .tsunagito-article) .supervisor-photo { border-radius: 10px !important; }
/* ---------- 5) 要約=AI引用ボックス(黒板→ダークネイビーパネル) ---------- */
:is(#tsunagito-article, .tsunagito-article) .tn-insight-box {
background: var(--tk-dark) !important;
border: 0 !important;
border-radius: var(--tk-r) !important;
box-shadow: none !important;
color: #dfe6f3;
padding: 20px 24px !important;
}
:is(#tsunagito-article, .tsunagito-article) .tn-insight-box::before,
:is(#tsunagito-article, .tsunagito-article) .tn-insight-box::after { display: none !important; }
:is(#tsunagito-article, .tsunagito-article) .tn-insight-label {
color: #7fd1a8 !important; font-family: var(--tk-f-mono) !important;
}
:is(#tsunagito-article, .tsunagito-article) .tn-insight-label::after {
content: "▊"; margin-left: 6px; animation: ac-cursor-blink 1.1s steps(1) infinite;
}
:is(#tsunagito-article, .tsunagito-article) .tn-insight-answer { color: #eef2fa !important; }
:is(#tsunagito-article, .tsunagito-article) .tn-insight-points,
:is(#tsunagito-article, .tsunagito-article) .tn-insight-points li { color: #aebad0 !important; }
:is(#tsunagito-article, .tsunagito-article) .tn-evidence,
:is(#tsunagito-article, .tsunagito-article) .tn-evidence-item,
:is(#tsunagito-article, .tsunagito-article) .tn-evidence-note { color: #94a1ba !important; }
:is(#tsunagito-article, .tsunagito-article) .tn-evidence-link { color: #bcd0ee !important; }
:is(#tsunagito-article, .tsunagito-article) .tn-action-btn {
background: transparent !important;
border: 1px solid #3a4660 !important;
border-radius: var(--tk-r-btn) !important;
color: #9fb4d8 !important;
font-family: var(--tk-f-mono) !important;
box-shadow: none !important;
}
:is(#tsunagito-article, .tsunagito-article) .tn-ai-hint { color: #7686a3 !important; }
:is(#tsunagito-article, .tsunagito-article) .tn-insight-box.tn-visible { animation: none !important; }
html[data-tsg-ui-init="true"] :is(#tsunagito-article, .tsunagito-article) .tn-insight-box {
opacity: 0; transform: translateY(10px);
transition: opacity var(--tk-dur) ease, transform var(--tk-dur) var(--tk-ease);
}
html[data-tsg-ui-init="true"] :is(#tsunagito-article, .tsunagito-article) .tn-insight-box.tn-visible {
opacity: 1; transform: none;
}
:is(#tsunagito-article, .tsunagito-article) .section-summary {
background: #fff !important; border: 1px solid var(--tk-surface-bd) !important; border-radius: var(--tk-r) !important;
}
:is(#tsunagito-article, .tsunagito-article) .section-summary[data-ai-summary]::before {
background: var(--tk-dark) !important; border-radius: var(--tk-r-btn) !important;
font-family: var(--tk-f-mono) !important;
}
:is(#tsunagito-article, .tsunagito-article) .section-summary[data-ai-summary].ss-animate { animation: none !important; }
/* ---------- 6) アンサーカード(本→ヘッダー付きカード) ---------- */
:is(#tsunagito-article, .tsunagito-article) .answer-card,
:is(#tsunagito-article, .tsunagito-article) .ac-book {
background: #fff !important;
border: 1px solid var(--tk-surface-bd) !important;
border-radius: var(--tk-r) !important;
box-shadow: 0 1px 3px rgba(16,23,37,.08) !important;
color: #1a1a1a;
}
:is(#tsunagito-article, .tsunagito-article) .ac-book__cover,
:is(#tsunagito-article, .tsunagito-article) .ac-book__cover-mobile {
background: var(--tk-surface) !important;
border: 1px solid var(--tk-surface-bd) !important;
border-radius: var(--tk-r) !important;
color: #1a1a1a !important;
}
:is(#tsunagito-article, .tsunagito-article) .ac-book__cover-label { color: var(--tk-sem-point) !important; font-family: var(--tk-f-mono) !important; }
:is(#tsunagito-article, .tsunagito-article) .ac-book__theme { color: var(--tk-sem-point) !important; font-family: var(--tk-f-mono) !important; }
:is(#tsunagito-article, .tsunagito-article) .ac-book__page--left,
:is(#tsunagito-article, .tsunagito-article) .ac-book__page--right { background: #fff !important; border-color: var(--tk-surface-bd) !important; }
:is(#tsunagito-article, .tsunagito-article) .ac-book__points-label { color: var(--tk-sem-point) !important; font-family: var(--tk-f-mono) !important; }
:is(#tsunagito-article, .tsunagito-article) .ac-book__check { color: #333 !important; }
:is(#tsunagito-article, .tsunagito-article) .ac-check-circle,
:is(#tsunagito-article, .tsunagito-article) .ac-check-mark {
background: #fff !important; border-color: var(--tk-sem-point-bd) !important; color: var(--tk-sem-point) !important;
}
/* ---------- 7) 波線→ハイライト走り / 蛍光ペン→角丸ハイライト ---------- */
:is(#tsunagito-article, .tsunagito-article) .wave-mark {
background-image: linear-gradient(rgba(51,102,153,.28), rgba(51,102,153,.28)) !important;
background-repeat: no-repeat !important;
background-size: 0% 45% !important;
background-position: 0 88% !important;
padding-bottom: 0 !important;
border-radius: 2px;
font-weight: 600;
transition: background-size .35s var(--tk-ease) !important;
}
html[data-tsg-ui-init="true"] :is(#tsunagito-article, .tsunagito-article) .wave-mark {
background-position: 0 88% !important; background-size: 0% 45% !important;
}
html[data-tsg-ui-init="true"] :is(#tsunagito-article, .tsunagito-article) .wave-mark.is-visible,
:is(#tsunagito-article, .tsunagito-article) .wave-mark.is-visible {
background-size: 100% 45% !important; background-position: 0 88% !important;
}
:is(#tsunagito-article, .tsunagito-article) .blog-paragraph strong,
:is(#tsunagito-article, .tsunagito-article) p strong {
background: rgba(51,102,153,.12) !important;
border-radius: 3px; padding: 0 3px !important;
}
/* ---------- 8) 強調ボックス ---------- */
:is(#tsunagito-article, .tsunagito-article) .box-point,
:is(#tsunagito-article, .tsunagito-article) .box-warning,
:is(#tsunagito-article, .tsunagito-article) .box-important,
:is(#tsunagito-article, .tsunagito-article) .box-note {
border: 1px solid var(--tk-surface-bd) !important;
border-radius: var(--tk-r) !important;
box-shadow: none !important;
}
:is(#tsunagito-article, .tsunagito-article) .box-point { background: #fff !important; border-left: 3px solid var(--tk-sem-point-bd) !important; }
:is(#tsunagito-article, .tsunagito-article) .box-warning { background: var(--tk-sem-warn-bg) !important; border-left: 3px solid var(--tk-sem-warn-bd) !important; }
:is(#tsunagito-article, .tsunagito-article) .box-important { background: var(--tk-sem-imp-bg) !important; border-left: 3px solid var(--tk-sem-imp-bd) !important; }
:is(#tsunagito-article, .tsunagito-article) .box-note { background: var(--tk-sem-note-bg) !important; border-left: 3px solid var(--tk-sem-note-bd) !important; }
:is(#tsunagito-article, .tsunagito-article) .box-point .box-title { color: var(--tk-sem-point) !important; }
:is(#tsunagito-article, .tsunagito-article) .box-warning .box-title { color: var(--tk-sem-warn) !important; }
:is(#tsunagito-article, .tsunagito-article) .box-important .box-title { color: var(--tk-sem-imp) !important; }
:is(#tsunagito-article, .tsunagito-article) .box-note .box-title { color: var(--tk-sem-note) !important; }
/* ---------- 9) 図解・表 ---------- */
:is(#tsunagito-article, .tsunagito-article) .stat-item {
background: #fff !important; border: 1px solid var(--tk-surface-bd) !important; border-radius: var(--tk-r) !important;
}
:is(#tsunagito-article, .tsunagito-article) .stat-number { font-family: var(--tk-f-mono) !important; }
:is(#tsunagito-article, .tsunagito-article) .feature-card { border-radius: var(--tk-r) !important; box-shadow: 0 1px 3px rgba(16,23,37,.08) !important; }
:is(#tsunagito-article, .tsunagito-article) .ig-step-num { border-radius: var(--tk-r) !important; font-family: var(--tk-f-mono) !important; }
:is(#tsunagito-article, .tsunagito-article) .ig-checklist li::before { content: "▸" !important; color: var(--tc-sub, var(--tc-base)) !important; }
:is(#tsunagito-article, .tsunagito-article) .ig-timeline .tl-mark { border-radius: 4px !important; }
:is(#tsunagito-article, .tsunagito-article) .blog-table th { background: var(--tk-dark) !important; }
/* ---------- 10) 吹き出し(チャットUI風) ---------- */
:is(#tsunagito-article, .tsunagito-article) .balloon-content,
:is(#tsunagito-article, .tsunagito-article) .balloon-text {
background: #f0f3f8 !important;
border: 0 !important;
border-radius: 12px 12px 12px 2px !important;
color: #1a1a1a !important;
}
:is(#tsunagito-article, .tsunagito-article) .balloon-content::before,
:is(#tsunagito-article, .tsunagito-article) .balloon-content::after { display: none !important; }
:is(#tsunagito-article, .tsunagito-article) .balloon-content p { color: #1a1a1a !important; }
:is(#tsunagito-article, .tsunagito-article) .balloon-icon img { border-radius: 10px !important; }
/* ---------- 11) FAQ・関連・内部リンク ---------- */
:is(#tsunagito-article, .tsunagito-article) .blog-faq-question,
:is(#tsunagito-article, .tsunagito-article) .faq-question {
background: var(--tk-surface) !important;
border-radius: var(--tk-r) var(--tk-r) 0 0 !important;
}
:is(#tsunagito-article, .tsunagito-article) .blog-faq-answer,
:is(#tsunagito-article, .tsunagito-article) .faq-answer {
border: 1px solid var(--tk-surface-bd) !important; border-top: 0 !important;
border-radius: 0 0 var(--tk-r) var(--tk-r) !important;
}
:is(#tsunagito-article, .tsunagito-article) .related-card { border-radius: var(--tk-r) !important; box-shadow: 0 1px 3px rgba(16,23,37,.08) !important; }
:is(#tsunagito-article, .tsunagito-article) .related-card-label { border-radius: var(--tk-r-btn) !important; font-family: var(--tk-f-mono) !important; }
:is(#tsunagito-article, .tsunagito-article) .inline-link { border-radius: var(--tk-r) !important; }
/* ---------- 12) CTA(ダーク面+シャープ) ---------- */
:is(#tsunagito-article, .tsunagito-article) .cta-banner,
:is(#tsunagito-article, .tsunagito-article) .cta-block {
background: var(--tk-dark) !important;
border-radius: 10px !important;
box-shadow: none !important;
}
:is(#tsunagito-article, .tsunagito-article) .cta-banner .cta-banner-text,
:is(#tsunagito-article, .tsunagito-article) .cta-banner .cta-banner-sub { color: #dfe6f3 !important; }
:is(#tsunagito-article, .tsunagito-article) .cta-banner-btn,
:is(#tsunagito-article, .tsunagito-article) .cta-button {
border-radius: var(--tk-r-btn) !important; box-shadow: none !important; transition: filter var(--tk-dur) !important;
}
:is(#tsunagito-article, .tsunagito-article) .cta-banner-btn:hover,
:is(#tsunagito-article, .tsunagito-article) .cta-button:hover { filter: brightness(1.15); }
:is(#tsunagito-article, .tsunagito-article) .cta-mid-btn {
background: var(--tc-sub, var(--tc-base)) !important;
border-radius: var(--tk-r-btn) !important;
transition: filter var(--tk-dur) !important;
}
:is(#tsunagito-article, .tsunagito-article) .cta-mid-btn::after { display: none !important; }
:is(#tsunagito-article, .tsunagito-article) .cta-mid-btn:hover { filter: brightness(1.1); }
:is(#tsunagito-article, .tsunagito-article) .cta-mid-btn .cta-mid-arrow { transition: transform var(--tk-dur) var(--tk-ease); }
:is(#tsunagito-article, .tsunagito-article) .cta-mid-btn:hover .cta-mid-arrow { transform: translateX(4px); color: #fff !important; }
:is(#tsunagito-article, .tsunagito-article) .cta-mid-btn:hover .cta-mid-label { color: #fff !important; }
/* ---------- 13) ページ機能UI ---------- */
#scrollToTop, .scroll-to-top { border-radius: 10px !important; }
/* ---------- 14) モーション総則(短くシャープ) ---------- */
html[data-tsg-ui-init="true"] :is(#tsunagito-article, .tsunagito-article) .references-list,
html[data-tsg-ui-init="true"] :is(#tsunagito-article, .tsunagito-article) .balloon-box {
transition: opacity var(--tk-dur) ease, transform var(--tk-dur) var(--tk-ease) !important;
}
:is(#tsunagito-article, .tsunagito-article) .section-summary[data-ai-summary].ss-animate { animation: none !important; }
/* ---------- 15) reduced-motion ---------- */
@media (prefers-reduced-motion: reduce) {
:is(#tsunagito-article, .tsunagito-article) .wave-mark,
html[data-tsg-ui-init="true"] :is(#tsunagito-article, .tsunagito-article) .wave-mark {
background-size: 100% 45% !important; transition: none !important;
}
html[data-tsg-ui-init="true"] :is(#tsunagito-article, .tsunagito-article) .tn-insight-box {
opacity: 1 !important; transform: none !important; transition: none !important;
}
:is(#tsunagito-article, .tsunagito-article) .tn-insight-label::after { animation: none !important; }
}
/* ---------- アンサーカード表紙(SP)可読色補正(2026-07-15・aOn実測で発覚) ----------
ベース(pop)=暗い表紙×明るい文字前提。本テーマは表紙を明色化するが
hint(ほぼ白)/theme(金グラデ)/icon(淡金)の上書きが無く色飛びしていた。 */
:is(#tsunagito-article, .tsunagito-article) .ac-book__cover-mobile-hint {
color: var(--tk-sem-point) !important;
border-color: var(--tk-surface-bd) !important;
opacity: 1 !important;
}
:is(#tsunagito-article, .tsunagito-article) .ac-book__cover-mobile-theme {
background: none !important;
-webkit-background-clip: initial !important;
background-clip: initial !important;
color: var(--tk-sem-point) !important;
-webkit-text-fill-color: var(--tk-sem-point) !important;
text-shadow: none !important;
}
:is(#tsunagito-article, .tsunagito-article) .ac-book__cover-icon {
color: var(--tk-sem-point) !important;
filter: none !important;
}
:is(#tsunagito-article, .tsunagito-article) .ac-book__cover-mobile-h3 {
border-bottom-color: var(--tk-surface-bd) !important;
text-align: center !important;
}
/* ---------- FAQアコーディオン: クラス組み合わせ互換修正(2026-07-15・全テーマ恒久) ----------
実記事のFAQは .blog-faq-section 内に .faq-item/.faq-question/.faq-answer で出力されるが、
従来ルールは .blog-faq-item 系のみ対応=折りたたみCSSが一切当たらず常時全開だった(E17実測)。
:is()で新旧クラスの全組み合わせを網羅。開閉JSは tsunagito-article.js v8.4(または旧記事の埋め込みJS)。 */
:is(#tsunagito-article, .tsunagito-article) :is(.blog-faq-section, .faq-section)[data-faq-accordion="true"] :is(.faq-item, .blog-faq-item) {
cursor: pointer;
}
:is(#tsunagito-article, .tsunagito-article) :is(.blog-faq-section, .faq-section)[data-faq-accordion="true"] :is(.faq-item, .blog-faq-item) :is(.faq-answer, .blog-faq-answer) {
max-height: 1500px; /* CodexレビューP1: 長文回答の見切れ防止(600→1500) */
overflow: hidden;
transition: max-height 0.4s ease;
}
:is(#tsunagito-article, .tsunagito-article) :is(.blog-faq-section, .faq-section)[data-faq-accordion="true"] :is(.faq-item, .blog-faq-item).is-collapsed :is(.faq-answer, .blog-faq-answer) {
max-height: 0;
margin: 0;
padding-top: 0;
padding-bottom: 0;
}
:is(#tsunagito-article, .tsunagito-article) :is(.blog-faq-section, .faq-section)[data-faq-accordion="true"] :is(.faq-question, .blog-faq-question)::after {
content: " ▼";
font-size: 0.7em;
margin-left: 8px;
display: inline-block;
transition: transform 0.3s ease;
}
:is(#tsunagito-article, .tsunagito-article) :is(.blog-faq-section, .faq-section)[data-faq-accordion="true"] :is(.faq-item, .blog-faq-item).is-collapsed :is(.faq-question, .blog-faq-question)::after {
transform: rotate(-90deg);
}
/* ---------- FAQ質問の縦線撤去+監修者ラベル濃色化(2026-07-15 ゆたか指示・全テーマ) ---------- */
/* Q.前の縦線は不要(テーマ全体)。監修者ラベルは生成データのインライン淡色(例 style="color:#F7F9FC")が
白背景で不可視になるため、!importantで濃色を強制(インラインstyleより優先)。 */
/* 真因=汎用H3装飾「h3:not(.blog-h3)」(詳細度1,1,1)が縦線を全H3に付与し、従来の除外(1,1,0)が負けていた。
h3要素型+クラスで(1,1,1)以上に引き上げて確実に除外。 */
:is(#tsunagito-article, .tsunagito-article) h3:is(.faq-question, .blog-faq-question),
:is(#tsunagito-article, .tsunagito-article) :is(.blog-faq-section, .faq-section) :is(.faq-question, .blog-faq-question) {
border-left: none !important;
border: none !important;
padding-left: 0 !important;
}
/* ブランドカラー追従(2026-07-15 ゆたか指示): 固定色でなくクライアントのブランド変数チェーンに従う。
優先= tc-main(TA-77パレット) > theme-color(サイト定義=aOnは#336699) > tc-base(WF2B注入) > 既定 */
:is(#tsunagito-article, .tsunagito-article) .supervisor-label {
color: var(--tc-main, var(--theme-color, var(--tc-base, #2E75B6))) !important;
}