/* AI Auto Publisher — Article template styles */

/* ----------------------------------------------------------------
   目次 (TOC)
---------------------------------------------------------------- */
.bs-toc {
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	padding: 18px 22px;
	margin-bottom: 32px;
	display: inline-block;
	min-width: 240px;
	max-width: 100%;
}

.bs-toc-title {
	font-weight: 700;
	font-size: 0.95em;
	margin: 0 0 10px;
	color: #1e293b;
}

.bs-toc-title::before {
	content: "≡ ";
}

.bs-toc ol {
	margin: 0;
	padding-left: 20px;
}

.bs-toc li {
	margin: 4px 0;
	font-size: 0.9em;
}

.bs-toc a {
	color: #1a1a1a !important;
	text-decoration: none;
}

.bs-toc a:hover {
	text-decoration: underline;
}

/* ----------------------------------------------------------------
   結論ファースト: ポイントボックス
---------------------------------------------------------------- */
.bs-key-takeaways {
	background: #fffbeb;
	border: 1px solid #fcd34d;
	border-left: 4px solid #f59e0b;
	border-radius: 0 8px 8px 0;
	padding: 16px 20px;
	margin-bottom: 28px;
}

.bs-key-takeaways-title {
	font-weight: 700;
	margin: 0 0 10px;
	color: #92400e;
}

.bs-key-takeaways ul {
	margin: 0;
	padding-left: 20px;
}

.bs-key-takeaways li {
	margin: 4px 0;
	font-size: 0.95em;
}

/* ----------------------------------------------------------------
   共通: 導入ボックス
---------------------------------------------------------------- */
.bs-intro {
	background: #f0f7ff;
	border-left: 4px solid #0073aa;
	border-radius: 0 6px 6px 0;
	padding: 16px 20px;
	margin-bottom: 28px;
}

.bs-intro p {
	margin: 0 0 8px;
}

.bs-intro p:last-child {
	margin-bottom: 0;
}

/* ----------------------------------------------------------------
   FAQ
---------------------------------------------------------------- */
.bs-faq {
	margin: 8px 0 24px;
}

.bs-faq-item {
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	margin-bottom: 12px;
	overflow: hidden;
}

.bs-faq-question {
	background: #f8fafc;
	font-size: 1em;
	margin: 0;
	padding: 12px 16px;
	border-bottom: 1px solid #e2e8f0;
}

.bs-faq-question::before {
	content: "Q. ";
	color: #0073aa;
	font-weight: 700;
}

.bs-faq-answer {
	padding: 12px 16px;
}

.bs-faq-answer p {
	margin: 0;
}

/* ----------------------------------------------------------------
   ハウツー: ステップ
---------------------------------------------------------------- */
.bs-steps {
	margin: 12px 0 24px;
	counter-reset: bs-step;
}

.bs-step {
	display: flex;
	gap: 16px;
	margin-bottom: 24px;
	align-items: flex-start;
}

.bs-step-number {
	background: #0073aa;
	color: #fff;
	border-radius: 50%;
	width: 36px;
	height: 36px;
	min-width: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 1em;
	margin-top: 30px;
}

.bs-step-body {
	flex: 1;
}

.bs-step-body h3 {
	margin: 0 0 8px;
	font-size: 1.05em;
}

.bs-step-body p {
	margin: 0 0 6px;
}

.bs-step-tip {
	background: #fff8e1;
	border-left: 3px solid #f59e0b;
	padding: 8px 12px;
	border-radius: 0 4px 4px 0;
	font-size: 0.9em;
	margin-top: 8px;
}

/* ----------------------------------------------------------------
   比較: グリッド
---------------------------------------------------------------- */
.bs-comparison-grid {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 260px, 1fr ) );
	gap: 16px;
	margin: 12px 0 24px;
}

.bs-comparison-item {
	border: 1px solid #e2e8f0;
	border-radius: 10px;
	padding: 18px;
}

.bs-comparison-name {
	margin: 0 0 10px;
	font-size: 1.1em;
	border-bottom: 2px solid #0073aa;
	padding-bottom: 6px;
}

.bs-pros-cons {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	margin: 10px 0;
}

.bs-pros,
.bs-cons {
	font-size: 0.9em;
}

.bs-pros strong {
	color: #16a34a;
}

.bs-cons strong {
	color: #dc2626;
}

.bs-pros ul,
.bs-cons ul {
	margin: 4px 0 0;
	padding-left: 18px;
}

.bs-pros li::marker {
	color: #16a34a;
}

.bs-cons li::marker {
	color: #dc2626;
}

.bs-verdict {
	font-size: 0.9em;
	background: #f8fafc;
	border-radius: 6px;
	padding: 8px 12px;
	margin: 8px 0 0;
}

.bs-recommendation {
	background: #ecfdf5;
	border: 1px solid #6ee7b7;
	border-radius: 8px;
	padding: 16px 20px;
	margin: 20px 0 24px;
}

.bs-recommendation h2 {
	margin-top: 0;
	color: #065f46;
}

/* ----------------------------------------------------------------
   ランキング
---------------------------------------------------------------- */
.bs-ranking-list {
	margin: 12px 0 24px;
}

.bs-ranking-item {
	display: flex;
	gap: 16px;
	align-items: flex-start;
	border: 1px solid #e2e8f0;
	border-radius: 10px;
	padding: 16px;
	margin-bottom: 16px;
}

.bs-ranking-badge {
	background: #94a3b8;
	color: #fff;
	border-radius: 50%;
	width: 40px;
	height: 40px;
	min-width: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 1.1em;
}

.bs-rank-gold .bs-ranking-badge {
	background: #d97706;
}

.bs-rank-silver .bs-ranking-badge {
	background: #6b7280;
}

.bs-rank-bronze .bs-ranking-badge {
	background: #92400e;
}

.bs-ranking-body {
	flex: 1;
}

.bs-ranking-body h3 {
	margin: 0 0 8px;
}

.bs-ranking-body p {
	margin: 0 0 6px;
}

.bs-ranking-score {
	display: inline-block;
	background: #f1f5f9;
	color: #475569;
	font-size: 0.8em;
	border-radius: 4px;
	padding: 2px 8px;
	margin-left: 8px;
	font-weight: 400;
}


/* ================================================================
   BlogAI — ブログ記事デザイン（フラット / 角丸なし / 読みやすさ重視）
   ================================================================ */
:root{
	--bs-accent:#2563eb;
	/* アクセント色から淡色を自動生成（指定色に追従） */
	--bs-accent-soft:color-mix(in srgb, var(--bs-accent) 8%, #fff);
	--bs-marker:#ffe884;
	--bs-ink:#1a1a1a;
	--bs-muted:#6b7280;
	--bs-line:#e5e7eb;
	--bs-shadow:none;
}
/* 自動強調（マーカー＋太字）：マーカー色は設定に追従 */
.bs-emph.bs-emph{background:linear-gradient(transparent 55%, var(--bs-marker) 55%);font-weight:700;color:#111;padding:0 .06em;box-decoration-break:clone;-webkit-box-decoration-break:clone}

/* 本文の基本リズム（サイズ・行間はテーマに負けないよう固定） */
/* ★文字サイズの基準：テーマの html{font-size:62.5%} などに影響されないよう、
   各パーツに px の絶対基準（--bs-fs）を持たせ、中の文字はすべて em で相対指定する。
   --bs-fs は設定「本文の文字サイズ」から注入。未注入なら 17px。 */
.bs-block,.bs-block *{box-sizing:border-box}
.bs-article{font-size:var(--bs-fs,17px)}
.bs-block{font-size:var(--bs-fs,17px) !important;line-height:1.9;-webkit-text-size-adjust:100%;text-size-adjust:100%}
.bs-block{margin:1.8em 0;padding:0;overflow-wrap:break-word;word-break:break-word}
.bs-block *{max-width:100%}
.bs-block p{line-height:1.95 !important;color:#1a1a1a !important;margin:0 0 1.2em;font-size:1.02em !important}
.bs-block a{color:var(--bs-accent)}
.bs-block ul,.bs-block ol{font-size:1.02em}
.bs-block li{line-height:1.9;color:#1a1a1a !important}

/* 見出し（左に細いアクセントバー）。サイズ・色はテーマに負けないよう !important で固定。
   余白・枠はパーツ別スタイルで上書きするので !important は付けない。 */
.bs-block h2{font-size:1.5em !important;line-height:1.45 !important;font-weight:700 !important;color:var(--bs-ink) !important;margin:2.4em 0 .9em !important;padding:.1em 0 .45em 0 !important;border-left:none !important;border-bottom:2px solid var(--bs-line) !important;border-top:none !important;border-right:none !important;background:none !important;text-decoration:none !important}
.bs-block h3,.bs-block-title{font-size:1.2em;line-height:1.5;font-weight:700;color:var(--bs-ink);margin:1.6em 0 .6em;border:none;background:none;padding:0;text-decoration:none}

/* リード（導入）＝装飾なし（既定）。左罫線は付けない。 */
.bs-block-lead{padding:0;border:none}
.bs-block-lead p{color:#1a1a1a !important;font-size:1.05em}

/* テーマがリストに付ける枠/点線を打ち消す（図解フローは除外） */
.bs-block ul{border:none !important;background:none !important;box-shadow:none !important}
.bs-block ol:not(.bs-diagram-flow){border:none !important;background:none !important;box-shadow:none !important}

/* ── パーツごとにメリハリ ───────────────────────────────── */

/* 結論先出し＝最も強い塗りで強調 */
.bs-block-quick_answer{background:var(--bs-accent-soft);border:none;border-left:6px solid var(--bs-accent);padding:1.3em 1.5em}
.bs-block-quick_answer .bs-block-title{color:var(--bs-accent);font-size:1.05em;letter-spacing:.02em}
.bs-block-quick_answer p{font-size:1.05em;font-weight:500;margin-bottom:0}

/* ボックス内の先頭要素は上余白を消す（上の隙間対策） */
.bs-block-quick_answer > :first-child,
.bs-block-summary_box > :first-child,
.bs-block.bs-style-filled > :first-child,
.bs-block.bs-style-outline > :first-child,
.bs-block.bs-style-soft > :first-child,
.bs-block.bs-style-accent_bar > :first-child,
.bs-block.bs-style-title_bar > :first-child,
.bs-block.bs-style-num_badge > :first-child{margin-top:0 !important}

/* MERIHARIの箱（悩み・解決・事例）内の見出しも上余白を消す */
.bs-block-empathy > :first-child,
.bs-block-solution > :first-child,
.bs-block-case > :first-child{margin-top:0 !important}

/* 要点ボックス＝上下罫線＋チェックリスト（結論と差別化） */
.bs-block-summary_box{background:none;border:none;border-top:2px solid var(--bs-ink);border-bottom:2px solid var(--bs-ink);padding:1.1em 0;max-width:680px;margin-left:auto !important;margin-right:auto !important}
/* 要点ボックスの「POINT」バッジ（先頭に表示） */
.bs-block-summary_box::before{content:"POINT";display:block;width:fit-content;background:var(--bs-accent);color:#fff;font-weight:800;font-size:.72em;line-height:1;letter-spacing:.12em;padding:.45em .85em;border-radius:3px;margin:0 0 .5em}
/* 要点ボックスの見出しは POINT バッジに置き換えるため非表示（既存記事の焼き付き対策） */
.bs-block-summary_box .bs-block-title{display:none !important}
.bs-block-summary_box ul{list-style:none !important;margin:0 !important;padding-left:0 !important}
.bs-block-summary_box li{position:relative;margin:.4em 0 !important;padding:0 0 0 1.6em !important;line-height:1.8;list-style:none !important}
.bs-block-summary_box li:first-child{margin-top:0 !important}
.bs-block-summary_box li::before{content:"✓";position:absolute;left:0;top:.05em;color:var(--bs-accent);font-weight:800}

/* スマホ調整：見出しはタイトルより小さく、本文もやや小さめ、左右の余白を詰める */
@media (max-width:600px){
	/* スマホは基準を1px下げる（本文は下の .92em で最終調整） */
	.bs-block{font-size:calc(var(--bs-fs,17px) - 1px) !important}
	.bs-block h2{font-size:1.2em !important;line-height:1.4 !important;margin:1.8em 0 .7em !important}
	.bs-block h3,.bs-block-title{font-size:1.02em}
	.bs-block p,.bs-block li{font-size:.98em !important}
	/* ボックス系は左右余白を詰める（左空きすぎ対策） */
	.bs-block.bs-style-soft,.bs-block.bs-style-outline,.bs-block.bs-style-filled,.bs-block-case,.bs-block-solution,.bs-block-cta{padding-left:.85em !important;padding-right:.85em !important}
	/* 要点ボックス（POINT）：左余白とチェックの字下げをさらに詰める */
	.bs-block-summary_box,.bs-block-summary_box.bs-style-soft{padding-left:.8em !important;padding-right:.8em !important}
	.bs-block-summary_box ul{padding-left:0 !important;margin-left:0 !important}
	.bs-block-summary_box li{padding-left:1.35em !important}
	.bs-block-summary_box li::before{top:.1em}
	/* 目次：アイコン分くらいの左余白に。箱の余白とリストの字下げを詰める＋テーマのol字下げを打ち消す */
	.bs-toc,.bs-toc.bs-toc-icon{padding:.9em .7em !important}
	.bs-toc ol,.bs-toc.bs-toc-icon ol{padding-left:1.9em !important;margin:0 !important}
	.bs-toc li{margin-left:0 !important;padding-left:0 !important}
	.bs-toc .bs-toc-title{margin-left:0 !important}
	.bs-toc.bs-toc-bar ol{padding-left:1.6em !important}
	/* STEP（図解フロー）：番号バッジを小さく、テキストは折り返し。左右余白を均等に。 */
	.bs-diagram-flow li{gap:.6em;padding:.75em .8em;font-weight:600}
	.bs-diagram-flow li::before{width:1.5em;height:1.5em;font-size:.8em;flex:0 0 auto}
	/* 比較表：スマホは文字とセル余白をさらに詰める */
	.bs-comparison-table{font-size:.82em}
	.bs-comparison-table th,.bs-comparison-table td{padding:.5em .55em !important}
}

/* 悩み＝アンバーで注意喚起 */
.bs-block-empathy{background:#fff8ed;border-left:4px solid #f59e0b;padding:1.1em 1.3em}
.bs-block-empathy h2{color:#b45309 !important}

/* 解決＝グリーンでポジティブ */
.bs-block-solution{background:#f0fdf4;border-left:4px solid #16a34a;padding:1.1em 1.3em}
.bs-block-solution h2{color:#15803d !important}

/* ボックス系の見出しはプレーン（枠の中に枠を防ぐ） */
.bs-block-empathy h2,.bs-block-solution h2,.bs-block-case h2{border:none !important;background:none !important;padding:0 !important;margin-top:0}

/* 図解フロー＝番号付きの手順（フラット） */
.bs-diagram-flow{display:grid;gap:0;counter-reset:bsflow;list-style:none !important;padding:0 !important;margin:1em 0 !important;border-top:1px solid var(--bs-line)}
.bs-diagram-flow li{margin-left:0 !important}
.bs-diagram-flow li{display:flex;align-items:center;gap:.8em;border:none;border-bottom:1px solid var(--bs-line);background:none;padding:.9em 1em;font-weight:600;color:#1a1a1a !important;list-style:none !important}
.bs-diagram-flow li::marker{content:"" !important}
.bs-diagram-flow li::before{counter-increment:bsflow;content:counter(bsflow);flex:0 0 auto;width:1.7em;height:1.7em;display:flex;align-items:center;justify-content:center;background:var(--bs-accent);color:#fff;font-size:.85em;font-weight:700;border-radius:50%;line-height:1}

/* チェックリスト */
.bs-block-checklist ul{list-style:none !important;padding-left:0 !important;margin:.4em 0 !important}
.bs-block-checklist li{position:relative;margin-left:0 !important;padding:.35em 0 .35em 1.7em !important;line-height:1.8;list-style:none !important}
.bs-block-checklist li::before{content:"✓";position:absolute;left:.1em;top:.5em;color:#16a34a;font-weight:800}

/* 比較表（角丸なし・シンプル） */
.bs-comparison-table{width:100%;border-collapse:collapse !important;margin:1.2em 0;font-size:.9em;background:none !important;box-shadow:none !important}
.bs-comparison-table th,.bs-comparison-table td{border:1px solid var(--bs-line) !important;padding:.7em .8em !important;text-align:left !important;vertical-align:top;color:var(--bs-ink) !important}
.bs-comparison-table thead th{background:var(--bs-accent-soft) !important;color:var(--bs-ink) !important;font-weight:700;white-space:nowrap}
.bs-comparison-table tbody th{background:#fafafa !important;color:var(--bs-ink) !important;font-weight:700;white-space:nowrap}
.bs-comparison-table tbody td{background:#fff !important}
/* 表はスマホで横スライド（スクロール）できるようにする */
.bs-table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:1.2em 0}
.bs-table-scroll .bs-comparison-table{margin:0 !important}
@media (max-width:600px){
	.bs-comparison-table{min-width:520px}
	/* ラッパーが無い既存記事向けフォールバック（セクションごとスクロール） */
	.bs-block-comparison_table{overflow-x:auto;-webkit-overflow-scrolling:touch}
}

/* 引用デザイン（テーマ既定の横線・背景を打ち消しつつ、柔らかい背景＋大きな引用符で見せる。
   クラス二重掛けで詳細度を上げてテーマ側に勝つ） */
.bs-blockquote.bs-blockquote{position:relative;margin:1.6em 0 !important;padding:1.6em 3em 1.8em 3em !important;border:0 none !important;border-top:0 none !important;border-right:0 none !important;border-bottom:0 none !important;border-left:0 none !important;border-radius:8px !important;background:#f3f4f6 !important;box-shadow:none !important;color:#444;font-style:italic;quotes:none;overflow:hidden}
.bs-blockquote.bs-blockquote::before{content:"\201C" !important;display:block !important;position:absolute;left:.35em;top:.18em;font-size:2.2em;line-height:1;color:var(--bs-accent);font-style:normal;font-family:Georgia,"Times New Roman",serif;opacity:.5}
.bs-blockquote.bs-blockquote::after{content:"\201D" !important;display:block !important;position:absolute;right:.45em;bottom:.05em;font-size:2.2em;line-height:1;color:var(--bs-accent);font-style:normal;font-family:Georgia,"Times New Roman",serif;opacity:.5}
.bs-blockquote.bs-blockquote p{quotes:none;border:0 none !important;background:none !important;line-height:1.85 !important}
.bs-blockquote.bs-blockquote p::before,.bs-blockquote.bs-blockquote p::after{content:none !important}
.bs-blockquote.bs-blockquote p:last-child{margin-bottom:0}
/* 一言・引用：最大幅680px＋中央寄せ */
.bs-block-quote{max-width:680px;margin-left:auto !important;margin-right:auto !important}
/* 引用: 人物アイコン＋吹き出し（style=bubble） */
.bs-block.bs-block-quote.bs-style-bubble{display:flex !important;align-items:flex-start;gap:14px;background:none !important;border:none !important;border-radius:0 !important;padding:0 !important;overflow:visible !important}
/* アバターは空要素を使わず、名前が入る .bs-quote-avatar 自体に CSS で描く（空spanは
   エディターに削除されるため）。::before=円、::after=人物シルエット。 */
.bs-quote-avatar{flex:0 0 auto;width:78px;text-align:center;position:relative;padding-top:72px;min-height:72px}
.bs-quote-avatar::before{content:"";position:absolute;top:0;left:7px;width:64px;height:64px;border-radius:50%;background:var(--bs-accent-soft)}
.bs-quote-avatar::after{content:"";position:absolute;top:13px;left:20px;width:38px;height:38px;background:var(--bs-accent);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ccircle cx='32' cy='23' r='13'/%3E%3Cpath d='M8 58c0-13.5 10.7-22 24-22s24 8.5 24 22z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ccircle cx='32' cy='23' r='13'/%3E%3Cpath d='M8 58c0-13.5 10.7-22 24-22s24 8.5 24 22z'/%3E%3C/svg%3E") center/contain no-repeat}
.bs-quote-name{display:block;margin-top:.4em;font-size:.68em;line-height:1.35;color:#555;font-style:normal;word-break:keep-all;overflow-wrap:break-word}
.bs-quote-bubble{position:relative;flex:1 1 auto;min-width:0}
.bs-block-quote.bs-style-bubble .bs-blockquote.bs-blockquote{position:relative;margin:0 !important;padding:1em 1.2em !important;background:#f3f4f6 !important;border-radius:10px !important;color:#444;overflow:visible !important}
.bs-block-quote.bs-style-bubble .bs-blockquote.bs-blockquote::after{content:none !important;display:none !important}
/* 吹き出しのしっぽ（左向き三角。既定の開き引用符 ::before を上書き） */
.bs-block-quote.bs-style-bubble .bs-blockquote.bs-blockquote::before{content:"" !important;display:block !important;position:absolute;left:-9px;top:16px;width:0;height:0;font-size:0;color:transparent;border-style:solid;border-width:8px 10px 8px 0;border-color:transparent #f3f4f6 transparent transparent;opacity:1}
@media (max-width:480px){.bs-quote-avatar{width:50px;padding-top:52px;min-height:52px}.bs-quote-avatar::before{width:46px;height:46px;left:2px}.bs-quote-avatar::after{width:28px;height:28px;left:11px;top:10px}}

/* 引用: シンプル（左バーのみ）＝ .bs-block-quote に style を付けたとき用 */
.bs-block.bs-style-plain .bs-blockquote.bs-blockquote{background:none !important;border-radius:0 !important;padding:.2em 0 .2em 1.1em !important;border-left:4px solid var(--bs-accent) !important}
.bs-block.bs-style-plain .bs-blockquote.bs-blockquote::before,.bs-block.bs-style-plain .bs-blockquote.bs-blockquote::after{content:none !important;display:none !important}

/* ── インライン文字装飾（エディターのツールバー「装飾」から適用） ────────
   クラス二重掛けでテーマに勝たせ、フロント・エディター両方で同じ見た目にする。 */
.bs-marker.bs-marker{background:linear-gradient(transparent 55%, var(--bs-marker) 55%);color:#111;font-weight:700;padding:0 .06em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.bs-marker-pink.bs-marker-pink{background:#ffd6e7;color:#111;font-weight:700;padding:.02em .12em;border-radius:2px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.bs-red.bs-red{color:#e5322d}
.bs-red.bs-red.bs-strong,.bs-red-strong.bs-red-strong{color:#e5322d;font-weight:700}
.bs-strong.bs-strong{font-weight:700;color:var(--bs-ink)}
.bs-underline.bs-underline{text-decoration:underline;text-decoration-color:var(--bs-accent);text-decoration-thickness:.12em;text-underline-offset:.15em}
/* 重要語句：淡い背景＋太字（参考PRのメリハリ表現に近い、下線なし） */
.bs-key.bs-key{background:color-mix(in srgb, var(--bs-accent) 12%, #fff);font-weight:700;color:var(--bs-ink);padding:.04em .2em;border-radius:2px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.bs-key-yellow.bs-key-yellow{background:#fff3bf;border-bottom:2px solid #f2b705;font-weight:700;color:#111;padding:.04em .2em;border-radius:3px 3px 0 0;box-decoration-break:clone;-webkit-box-decoration-break:clone}

/* 結論（まとめ）ブロックの見出しは左の縦アクセントバーを外す（下線などの区切りは残す） */
.bs-block.bs-block-conclusion h2,.bs-block.bs-block-conclusion_image h2{border-left:0 none !important;padding-left:0 !important}

/* お悩み（吹き出しカードのグリッド：PC4列・SP2列） */
.bs-worries-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px 14px;margin:1.3em 0}
.bs-worry-item{position:relative;background:var(--bs-accent-soft);border-radius:12px;padding:1em .9em 1.05em;text-align:center;color:#333;font-size:.95em;line-height:1.6}
.bs-worry-item::after{content:"";position:absolute;left:50%;bottom:-9px;transform:translateX(-50%);width:0;height:0;border-style:solid;border-width:10px 9px 0 9px;border-color:var(--bs-accent-soft) transparent transparent transparent}
.bs-worry-item p{margin:0 !important}
@media (max-width:600px){.bs-worries-grid{grid-template-columns:repeat(2,1fr);gap:16px 12px}}

/* 事例＝見出しの先頭に企業アイコン（左の余白を作らずインライン） */
.bs-block-case{background:#f8fafc;border:none;border-radius:10px;padding:1.2em 1.4em}
/* 事例ボックス内の見出しはプレーンに（枠の中に枠を防ぐ）＋先頭に企業アイコン */
.bs-block-case h2{border:none !important;background:none !important;padding:0 !important;margin-top:0}
.bs-block-case h2::before{content:"";display:inline-block;width:1.1em;height:1.1em;margin-right:.45em;vertical-align:-.15em;background:var(--bs-accent);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 21V3h10v18H4zm14 0V8h4v13h-4zM6 7h2V5H6v2zm4 0h2V5h-2v2zM6 11h2V9H6v2zm4 0h2V9h-2v2zM6 15h2v-2H6v2zm4 0h2v-2h-2v2zM6 19h2v-2H6v2zm4 0h2v-2h-2v2z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 21V3h10v18H4zm14 0V8h4v13h-4zM6 7h2V5H6v2zm4 0h2V5h-2v2zM6 11h2V9H6v2zm4 0h2V9h-2v2zM6 15h2v-2H6v2zm4 0h2v-2h-2v2zM6 19h2v-2H6v2zm4 0h2v-2h-2v2z'/%3E%3C/svg%3E") center/contain no-repeat}

/* FAQ（角丸なし・Q/A） */
.bs-faq{margin:1em 0}
.bs-faq-item{border:none;border-bottom:1px solid var(--bs-line);border-radius:0;padding:.9em 0;overflow:visible;margin:0}
.bs-faq-question{position:relative;background:none !important;border:none !important;margin:0 !important;padding:0 0 .4em 1.7em !important;font-size:1.05em !important;line-height:1.6 !important;font-weight:700 !important;color:var(--bs-ink) !important;text-decoration:none !important}
.bs-faq-question::before{content:"Q";position:absolute;left:0;top:0;color:var(--bs-accent);font-weight:800;text-decoration:none !important;border:none !important}
/* テーマが付ける装飾用 ::after を打ち消す */
.bs-faq-question::after{content:none !important;display:none !important;border:none !important;background:none !important}
.bs-faq-answer{padding:0 0 0 1.7em}
.bs-faq-answer p{margin:0;color:#444;line-height:1.85}

/* CTA（控えめな囲み＋ボタン。角丸なし） */
.bs-block-cta{background:var(--bs-accent-soft);border:none;border-top:3px solid var(--bs-accent);padding:1.3em;text-align:center}
/* CTA内の見出しは枠線・帯・装飾線をなくし中央寄せ */
.bs-block-cta h2,.bs-block-cta h3,.bs-block-cta .bs-block-title{border:none !important;background:none;padding:0;text-align:center}
.bs-block-cta h2::after,.bs-block-cta h2::before,.bs-block-cta h3::after,.bs-block-cta h3::before,.bs-block-cta .bs-block-title::after,.bs-block-cta .bs-block-title::before{content:none !important;display:none !important}
.bs-block-cta p{margin:0 0 .8em;color:#333}
/* ボタンは常に独立した行に（テキストと同じ段落に入っても改行して中央に置く） */
.bs-block a.bs-cta-button{display:table !important;margin:.9em auto 0 !important;background:var(--bs-accent);color:#fff;border:none;border-radius:3px;padding:.7em 1.6em;text-decoration:none;font-weight:700;text-align:center}
.bs-block a.bs-cta-button:hover{color:#fff;opacity:.92}
.bs-cta-label{display:table;margin:.9em auto 0;font-weight:700}

/* 目次（角丸なし） */
/* 目次：単一の枠（テーマが付ける内側の枠/点線を打ち消す） */
.bs-toc{border-radius:0;border:none;border-left:3px solid var(--bs-accent);background:var(--bs-accent-soft);box-shadow:none}
.bs-toc ol,.bs-toc ul,.bs-toc li,.bs-toc nav{border:none !important;background:none !important;box-shadow:none !important;outline:none !important}
.bs-toc ol{margin:0;padding-left:1.4em}

/* 目次の見た目バリエーション（bs-toc-* / パーツで選択） */
.bs-toc.bs-toc-outline{background:#fff;border:2px solid var(--bs-accent)}
.bs-toc.bs-toc-simple{background:none;border:none;border-bottom:2px solid var(--bs-line);padding-left:0}
.bs-toc.bs-toc-plain{background:none;border:none;padding-left:0}

/* ヘッダーバー：上部にアクセント帯のタイトル＋淡色本体 */
.bs-toc.bs-toc-bar{display:block;background:var(--bs-accent-soft);border:none;border-left:none;padding:0 0 1em;overflow:hidden}
.bs-toc.bs-toc-bar .bs-toc-title{background:var(--bs-accent);color:#fff;margin:0 0 .8em;padding:.6em 1em;font-size:1em}
.bs-toc.bs-toc-bar .bs-toc-title::before{content:"≡  "}
.bs-toc.bs-toc-bar ol{padding-left:2.6em;padding-right:1em}

/* アイコン＋枠：白枠ボックス＋リストアイコンのタイトル */
.bs-toc.bs-toc-icon{display:block;background:#fff;border:1px solid var(--bs-line);border-left:1px solid var(--bs-line);padding:1.2em 1.5em}
.bs-toc.bs-toc-icon .bs-toc-title{color:var(--bs-accent);font-size:1.05em}

@media(max-width:640px){
	.bs-block h2{font-size:1.3em}
}

/* ================================================================
   パーツ別デザイン（bs-style-* / 構成ビルダーでパーツごとに選択）
   section.bs-block に付与され、見た目を上書きする。
   ================================================================ */

/* 塗りボックス：アクセント淡色の背景＋左の太いバー */
.bs-block.bs-style-filled{background:var(--bs-accent-soft) !important;border:none !important;border-left:6px solid var(--bs-accent) !important;padding:1.3em 1.5em !important;margin:1.6em 0}

/* 枠線ボックス：アクセント色の枠で囲う */
.bs-block.bs-style-outline{background:#fff !important;border:2px solid var(--bs-accent) !important;padding:1.3em 1.5em !important;margin:1.6em 0}

/* 薄い背景：ごく淡いグレー背景でやわらかく区切る */
.bs-block.bs-style-soft{background:#f8fafc !important;border:none !important;padding:1.3em 1.5em !important;margin:1.6em 0}

/* 上アクセントバー：上辺だけ太いアクセント */
.bs-block.bs-style-accent_bar{background:#fff !important;border:none !important;border-top:4px solid var(--bs-accent) !important;padding:1.1em 1.2em 0 !important;margin:1.6em 0}

/* 装飾なし：背景・枠・余白をリセットしてプレーンに */
.bs-block.bs-style-plain{background:none!important;border:none!important;padding:0!important;box-shadow:none!important}

/* 見出し: 下線（左バーをやめ、太い下線で区切る） */
.bs-block.bs-style-heading_underline h2{border-left:none !important;padding-left:0 !important;border-bottom:3px solid var(--bs-accent) !important;background:none !important}
.bs-block.bs-style-heading_underline .bs-block-title{border-bottom:2px solid var(--bs-accent) !important;padding-bottom:.3em !important}

/* 見出し: 帯（アクセント淡色の帯＋左の太いバー） */
.bs-block.bs-style-heading_band h2,.bs-block.bs-style-heading_band .bs-block-title{border-bottom:none !important;background:var(--bs-accent-soft) !important;border-left:6px solid var(--bs-accent) !important;padding:.5em .7em !important}

/* 見出し: 明朝（明朝体の落ち着いた見出し） */
.bs-block.bs-style-heading_serif h2{font-family:Georgia,"Times New Roman","Yu Mincho",YuMincho,serif !important;font-size:1.7em !important}
.bs-block.bs-style-heading_serif h3,.bs-block.bs-style-heading_serif .bs-block-title{font-family:Georgia,"Yu Mincho",YuMincho,serif !important}

/* ボックス: 見出しタブ付き（淡色ボックス＋塗りの見出しタブ） */
.bs-block.bs-style-title_bar{background:var(--bs-accent-soft) !important;border:1px solid color-mix(in srgb, var(--bs-accent) 45%, #fff) !important;padding:1.2em 1.4em !important;margin:1.6em 0}
.bs-block.bs-style-title_bar > h2:first-child,
.bs-block.bs-style-title_bar > .bs-block-title:first-child{display:inline-block;background:var(--bs-accent) !important;color:#fff !important;border:none !important;border-radius:4px;margin:0 0 .9em !important;padding:.45em 1.1em !important;font-size:1.05em !important;font-weight:700}

/* ボックス: 番号バッジリスト（箇条書きを丸い連番バッジに） */
.bs-block.bs-style-num_badge{background:var(--bs-accent-soft) !important;border:none !important;padding:1.2em 1.4em !important;margin:1.6em 0}
.bs-block.bs-style-num_badge > h2:first-child,
.bs-block.bs-style-num_badge > .bs-block-title:first-child{display:inline-block;background:var(--bs-accent) !important;color:#fff !important;border:none !important;border-radius:4px;margin:0 0 .9em !important;padding:.45em 1.1em !important;font-size:1.05em !important;font-weight:700}
.bs-block.bs-style-num_badge ul{list-style:none;counter-reset:bsnb;padding-left:0;margin:.6em 0}
.bs-block.bs-style-num_badge ul li{position:relative;padding-left:2.4em;margin:.55em 0;counter-increment:bsnb;min-height:1.7em}
.bs-block.bs-style-num_badge ul li::before{content:counter(bsnb);position:absolute;left:0;top:0;width:1.7em;height:1.7em;display:flex;align-items:center;justify-content:center;background:var(--bs-accent);color:#fff;border-radius:50%;font-size:.8em;font-weight:700}

/* 見出し: 矢印帯（濃いアクセント帯＋》） */
.bs-block.bs-style-heading_arrow h2,.bs-block.bs-style-heading_arrow .bs-block-title{border-left:none !important;border-bottom:none !important;background:var(--bs-accent) !important;color:#fff !important;padding:.5em .9em !important}
.bs-block.bs-style-heading_arrow h2::before,.bs-block.bs-style-heading_arrow .bs-block-title::before{content:"\00BB";margin-right:.45em;font-weight:700}

/* 見出し: 点線（下に点線＋小さな矢印） */
.bs-block.bs-style-heading_dotted h2,.bs-block.bs-style-heading_dotted .bs-block-title{border-left:none !important;border-bottom:2px dotted var(--bs-line) !important;padding:.1em 0 .4em 1em !important;position:relative;background:none !important}
.bs-block.bs-style-heading_dotted h2::before,.bs-block.bs-style-heading_dotted .bs-block-title::before{content:"\203A";position:absolute;left:0;color:var(--bs-accent);font-weight:700}

/* 本文: マーカー強調（強調テキストに蛍光マーカー） */
.bs-block.bs-style-marker strong{background:linear-gradient(transparent 55%, color-mix(in srgb, var(--bs-accent) 30%, #fff) 0);font-weight:700;padding:0 .1em}

/* 本文: ブロック全体の文字装飾（見た目ドロップダウンから選択） */
.bs-block.bs-style-text_red p,.bs-block.bs-style-text_red li{color:#e5322d}
.bs-block.bs-style-text_strong p,.bs-block.bs-style-text_strong li{font-weight:700;color:var(--bs-ink)}
.bs-block.bs-style-text_red_strong p,.bs-block.bs-style-text_red_strong li{color:#e5322d;font-weight:700}
.bs-block.bs-style-text_marker_full p{background:linear-gradient(transparent 55%, #ffe884 0);display:inline;padding:0 .1em}

/* 画像ブロック */
.bs-image-figure{margin:1.4em 0;text-align:center}
.bs-image-figure img{max-width:100%;height:auto;display:block;margin:0 auto}
.bs-image-figure figcaption{margin-top:.5em;font-size:.9em;color:var(--bs-muted)}
.bs-image-ph{background:#f1f5f9;border:1px dashed #cbd5e1;color:#94a3b8;padding:48px 16px;font-size:.95em}

/* 本文内アイキャッチ（設定：本文へのアイキャッチ挿入） */
.bs-hero-image{margin:0 0 1.8em;padding:0;width:100%}
.bs-hero-image img{display:block;width:100%;height:auto;border-radius:4px}
.bs-hero-image figcaption{margin-top:.5em;font-size:.9em;color:var(--bs-muted)}
@media (max-width:600px){.bs-hero-image{margin-bottom:1.4em}.bs-hero-image img{border-radius:2px}}

/* テーマの継承値で崩れやすいプロパティは、パーツ単位で確定させる */
.bs-block{letter-spacing:normal;text-indent:0}
.bs-block p,.bs-block li,.bs-block td,.bs-block th{letter-spacing:normal;text-indent:0}

/* CTA：カスタムHTML（バナー等）モード。箱の装飾を外し、貼ったHTMLをそのまま見せる */
.bs-block-cta-custom{background:none !important;border:none !important;padding:0 !important;text-align:center}
.bs-block-cta-custom .bs-cta-custom>*:first-child{margin-top:0}
.bs-block-cta-custom .bs-cta-custom>*:last-child{margin-bottom:0}
.bs-block-cta-custom .bs-cta-custom img{max-width:100%;height:auto;display:block;margin:0 auto}
.bs-block-cta-custom .bs-cta-custom a{display:inline-block;max-width:100%}