/* ========================================
   BLOG / AFFILIATE ARTICLE STYLES
   ======================================== */

/* Layout */
.bl { padding: 80px 20px 60px; background: #fff; }
.bl-inner { max-width: 780px; margin: 0 auto; }

/* Breadcrumb */
.bl-bc { font-size: 13px; color: #888; margin-bottom: 24px; }
.bl-bc a { color: #6366f1; text-decoration: none; }
.bl-bc a:hover { text-decoration: underline; }

/* Meta info */
.bl-meta { display: flex; align-items: center; gap: 16px; font-size: 13px; color: #888; margin-bottom: 32px; flex-wrap: wrap; }
.bl-meta-badge { display: inline-block; font-size: 11px; font-weight: 700; color: #fff; background: linear-gradient(135deg, #6366f1, #8b5cf6); padding: 4px 12px; border-radius: 100px; }
.bl-meta-date { color: #999; }

/* Title */
.bl-h1 { font-family: 'Noto Sans JP', sans-serif !important; font-size: clamp(26px, 5vw, 40px); font-weight: 900; line-height: 1.3; color: #111; margin-bottom: 24px; text-transform: none !important; letter-spacing: -.01em !important; }
.bl-h1 em { font-style: normal; color: #6366f1; }

/* Lead */
.bl-lead { font-size: 16px; line-height: 1.8; color: #555; margin-bottom: 32px; padding: 20px 24px; background: #f8fafc; border-radius: 12px; border-left: 4px solid #6366f1; }

/* TOC */
.bl-toc { background: #f8fafc; border: 1px solid #e5e7eb; border-radius: 16px; padding: 24px 28px; margin-bottom: 40px; }
.bl-toc-title { font-size: 14px; font-weight: 800; color: #111; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.bl-toc ol { padding-left: 20px; margin: 0; }
.bl-toc li { font-size: 14px; line-height: 2; color: #555; }
.bl-toc a { color: #6366f1; text-decoration: none; }
.bl-toc a:hover { text-decoration: underline; }

/* "この記事でわかること" */
.bl-point { background: linear-gradient(135deg, #eef2ff, #faf5ff); border: 1px solid #c7d2fe; border-radius: 16px; padding: 24px 28px; margin-bottom: 40px; }
.bl-point-title { font-size: 15px; font-weight: 800; color: #4f46e5; margin-bottom: 12px; }
.bl-point ul { list-style: none; padding: 0; margin: 0; }
.bl-point li { font-size: 14px; line-height: 1.8; color: #333; padding: 4px 0 4px 24px; position: relative; }
.bl-point li::before { content: '✓'; position: absolute; left: 0; color: #4f46e5; font-weight: 700; }

/* Headings */
.bl-h2 { font-family: 'Noto Sans JP', sans-serif !important; font-size: 22px; font-weight: 800; color: #111; margin: 56px 0 20px; padding: 12px 0 12px 16px; border-left: 4px solid #6366f1; background: linear-gradient(90deg, #eef2ff, transparent); text-transform: none !important; letter-spacing: -.01em !important; line-height: 1.4 !important; }
.bl-h3 { font-family: 'Noto Sans JP', sans-serif !important; font-size: 18px; font-weight: 700; color: #222; margin: 32px 0 12px; text-transform: none !important; }

/* Text */
.bl-p { font-size: 15px; line-height: 1.9; color: #444; margin-bottom: 20px; }
.bl-list { padding-left: 24px; margin-bottom: 24px; }
.bl-list li { font-size: 15px; line-height: 1.9; color: #444; margin-bottom: 6px; }

/* Conclusion box */
.bl-conclusion { background: linear-gradient(135deg, #fef3c7, #fef9c3); border: 2px solid #f59e0b; border-radius: 16px; padding: 28px; margin: 32px 0; }
.bl-conclusion-title { font-size: 16px; font-weight: 800; color: #92400e; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.bl-conclusion p { font-size: 15px; line-height: 1.8; color: #78350f; margin: 0 0 12px; }

/* Quick comparison table */
.bl-qtable { width: 100%; border-collapse: separate; border-spacing: 0; margin: 28px 0; border-radius: 12px; overflow: hidden; border: 1px solid #e5e7eb; font-size: 14px; }
.bl-qtable th { background: #1e1b4b; color: #fff; padding: 14px 16px; font-weight: 700; text-align: left; }
.bl-qtable td { padding: 14px 16px; border-bottom: 1px solid #f3f4f6; color: #333; }
.bl-qtable tr:last-child td { border-bottom: none; }
.bl-qtable tr:nth-child(even) td { background: #fafbff; }
.bl-qtable .win { color: #16a34a; font-weight: 700; }
.bl-qtable .lose { color: #9ca3af; }

/* Star rating */
.bl-stars { color: #f59e0b; letter-spacing: 2px; font-size: 16px; }
.bl-stars-dim { color: #d1d5db; }

/* Review card */
.bl-review { border: 1px solid #e5e7eb; border-radius: 16px; padding: 28px; margin: 28px 0; }
.bl-review-header { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.bl-review-logo { width: 48px; height: 48px; border-radius: 12px; background: #f3f4f6; display: flex; align-items: center; justify-content: center; font-size: 24px; }
.bl-review-name { font-size: 20px; font-weight: 800; color: #111; }
.bl-review-sub { font-size: 13px; color: #888; }

/* Pros/Cons */
.bl-proscons { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 20px 0; }
.bl-pros, .bl-cons { border-radius: 12px; padding: 20px; }
.bl-pros { background: #f0fdf4; border: 1px solid #bbf7d0; }
.bl-cons { background: #fef2f2; border: 1px solid #fecaca; }
.bl-pros-title { font-size: 13px; font-weight: 700; color: #16a34a; margin-bottom: 8px; }
.bl-cons-title { font-size: 13px; font-weight: 700; color: #dc2626; margin-bottom: 8px; }
.bl-pros ul, .bl-cons ul { list-style: none; padding: 0; margin: 0; }
.bl-pros li, .bl-cons li { font-size: 13px; line-height: 1.7; padding: 3px 0 3px 20px; position: relative; }
.bl-pros li::before { content: '◎'; position: absolute; left: 0; color: #16a34a; }
.bl-cons li::before { content: '△'; position: absolute; left: 0; color: #dc2626; }

/* Recommend box */
.bl-rec { background: #f0f9ff; border: 2px solid #38bdf8; border-radius: 16px; padding: 24px; margin: 28px 0; }
.bl-rec-title { font-size: 15px; font-weight: 800; color: #0369a1; margin-bottom: 10px; }
.bl-rec ul { list-style: none; padding: 0; margin: 0; }
.bl-rec li { font-size: 14px; line-height: 1.8; color: #0c4a6e; padding: 2px 0 2px 20px; position: relative; }
.bl-rec li::before { content: '→'; position: absolute; left: 0; color: #0369a1; }

/* CTA box */
.bl-cta { background: linear-gradient(135deg, #1e1b4b, #312e81); border-radius: 20px; padding: 40px; text-align: center; margin: 40px 0; }
.bl-cta h3 { font-size: 22px; font-weight: 800; color: #fff; margin-bottom: 10px; }
.bl-cta p { font-size: 15px; color: rgba(255,255,255,.7); margin-bottom: 20px; }
.bl-cta .btn { display: inline-flex; }

/* FAQ */
.bl-faq { border-bottom: 1px solid #e5e7eb; }
.bl-faq summary { width: 100%; text-align: left; background: none; border: none; padding: 18px 0; font-size: 15px; font-weight: 600; color: #111; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.bl-faq summary::after { content: '+'; font-size: 18px; color: #6366f1; }
.bl-faq[open] summary::after { content: '−'; }
.bl-faq-a { font-size: 14px; line-height: 1.8; color: #555; padding: 0 0 18px; }

/* Updated note */
.bl-updated { font-size: 12px; color: #999; margin-top: 40px; text-align: right; }

/* Responsive */
@media (max-width: 767px) {
  .bl { padding: 72px 16px 40px; }
  .bl-proscons { grid-template-columns: 1fr; }
  .bl-cta { padding: 28px 20px; }
  .bl-qtable { font-size: 12px; }
  .bl-qtable th, .bl-qtable td { padding: 10px 8px; }
}