/* 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: #0073aa;
	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-ink:#1a1a1a;
	--bs-muted:#6b7280;
	--bs-line:#e5e7eb;
	--bs-shadow:none;
}

/* 本文の基本リズム */
.bs-block{margin:1.8em 0;padding:0}
.bs-block p{line-height:1.95;color:#333;margin:0 0 1.2em;font-size:1.02rem}
.bs-block a{color:var(--bs-accent)}

/* 見出し（左に細いアクセントバー） */
.bs-block h2{font-size:1.5rem;line-height:1.45;font-weight:700;color:var(--bs-ink);margin:2.4em 0 .9em;padding:.1em 0 .1em .7em;border-left:5px solid var(--bs-accent);border-bottom:1px solid var(--bs-line);padding-bottom:.4em}
.bs-block h3,.bs-block-title{font-size:1.2rem;font-weight:700;color:var(--bs-ink);margin:1.6em 0 .6em}

/* リード（導入）＝罫線でさりげなく */
.bs-block-lead{padding:0 0 0 1em;border-left:3px solid var(--bs-line)}
.bs-block-lead p{color:#555;font-size:1.05rem}

/* テーマがリストに付ける枠/点線を打ち消す（図解フローは除外） */
.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.05rem;letter-spacing:.02em}
.bs-block-quick_answer p{font-size:1.05rem;font-weight:500;margin-bottom:0}

/* 要点ボックス＝上下罫線＋チェックリスト（結論と差別化） */
.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}
.bs-block-summary_box .bs-block-title{font-size:1.05rem}
.bs-block-summary_box ul{list-style:none;margin:.3em 0 0;padding-left:0}
.bs-block-summary_box li{position:relative;margin:.5em 0;padding-left:1.7em;line-height:1.8}
.bs-block-summary_box li::before{content:"✓";position:absolute;left:0;top:.05em;color:var(--bs-accent);font-weight:800}

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

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

/* ボックス系の見出しはプレーン（枠の中に枠を防ぐ） */
.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;padding:0;margin:1em 0;border-top:1px solid var(--bs-line)}
.bs-diagram-flow li{position:relative;border:none;border-bottom:1px solid var(--bs-line);background:none;padding:.85em 0 .85em 2.6em;font-weight:600;color:#333}
.bs-diagram-flow li::before{counter-increment:bsflow;content:counter(bsflow);position:absolute;left:0;top:.8em;width:1.6em;height:1.6em;display:flex;align-items:center;justify-content:center;background:var(--bs-accent);color:#fff;font-size:.85rem;font-weight:700;border-radius:50%}

/* チェックリスト */
.bs-block-checklist ul{list-style:none;padding-left:0;margin:.4em 0}
.bs-block-checklist li{position:relative;padding:.35em 0 .35em 1.8em;line-height:1.8}
.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;margin:1.2em 0;font-size:.97rem}
.bs-comparison-table th,.bs-comparison-table td{border:1px solid var(--bs-line);padding:.7em .8em;text-align:left;vertical-align:top}
.bs-comparison-table thead th{background:var(--bs-accent-soft);color:var(--bs-ink);font-weight:700;white-space:nowrap}
.bs-comparison-table tbody th{background:#fafafa;font-weight:700;white-space:nowrap}

/* 引用 */
.bs-blockquote{margin:1.4em 0;padding:.4em 0 .4em 1.1em;border-left:4px solid var(--bs-accent);color:#555;font-style:italic}
.bs-blockquote p:last-child{margin-bottom:0}

/* 事例 */
.bs-block-case{background:#fafafa;border:none;border-left:4px solid var(--bs-muted);padding:1.1em 1.3em}
/* 事例ボックス内の見出しはプレーンに（枠の中に枠を防ぐ） */
.bs-block-case h2{border:none !important;background:none !important;padding:0 !important;margin-top:0}

/* 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;border:none;padding:0 0 .4em 1.7em;font-size:1.05rem;font-weight:700;color:var(--bs-ink)}
.bs-faq-question::before{content:"Q";position:absolute;left:0;top:0;color:var(--bs-accent);font-weight:800}
.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:inline-block;background:var(--bs-accent);color:#fff;border:none;border-radius:3px;padding:.7em 1.5em;text-decoration:none;font-weight:700}
.bs-block a.bs-cta-button:hover{color:#fff;opacity:.92}
.bs-cta-label{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}

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

/* ================================================================
   デザインパターン（body.bs-pattern-* / プレビューに付与）
   既定 leftbar は基本スタイルのまま。色は --bs-accent に追従。
   ================================================================ */

/* 下線：左バーをやめ、太い下線で区切る */
.bs-pattern-underline .bs-block h2{border-left:none;padding-left:0;border-bottom:3px solid var(--bs-accent)}

/* 帯：アクセント淡色の帯＋左の太いバー */
.bs-pattern-band .bs-block h2{border-bottom:none;background:var(--bs-accent-soft);border-left:6px solid var(--bs-accent);padding:.5em .7em}

/* 明朝：明朝体の落ち着いた見出し */
.bs-pattern-serif .bs-block h2{font-family:Georgia,"Times New Roman","Yu Mincho",YuMincho,serif;font-size:1.7rem}
.bs-pattern-serif .bs-block h3,.bs-pattern-serif .bs-block-title{font-family:Georgia,"Yu Mincho",YuMincho,serif}
.bs-pattern-serif .bs-block p{line-height:2}

/* 画像ブロック */
.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}