/* ============================================================
   BLOG / CASE-STUDY ARTICLE CSS
   バイテクノ小禄 — 記事投稿専用スタイル
   依存: Bootstrap 5 + assets/css/style.css (デザイントークン)
   ============================================================ */

/* ============================================================
   1. ARTICLE WRAPPER
   ============================================================ */
.blog-article {
   font-size: 0.95rem;
   line-height: 2.2;
   color: var(--text-body);
}

/* ============================================================
   2. HEADINGS
   ============================================================ */

/* H2 — 左に太い緑バー */
.blog-article h2 {
   font-family: var(--font-heading);
   font-size: 1.45rem;
   font-weight: 700;
   color: var(--primary-dark);
   margin-top: 3rem;
   margin-bottom: 1.25rem;
   padding-left: 18px;
   border-left: 5px solid var(--accent-coral);
   line-height: 1.6;
   letter-spacing: 0.04em;
}

/* H3 — 絵文字スペースを考慮した中サイズ */
.blog-article h3 {
   font-family: var(--font-heading);
   font-size: 1.1rem;
   font-weight: 700;
   color: var(--primary);
   margin-top: 2rem;
   margin-bottom: 0.75rem;
   padding-bottom: 6px;
   border-bottom: 1px solid rgba(45, 106, 79, 0.15);
   line-height: 1.65;
}

/* H4 — サブセクション */
.blog-article h4 {
   font-size: 0.95rem;
   font-weight: 700;
   color: var(--text-dark);
   margin-top: 1.5rem;
   margin-bottom: 0.5rem;
}

/* ============================================================
   3. BODY TEXT & LISTS
   ============================================================ */
.blog-article p {
   margin-bottom: 1.25em;
}

.blog-article ul,
.blog-article ol {
   padding-left: 1.6em;
   margin-bottom: 1.25em;
}

.blog-article li {
   margin-bottom: 0.4em;
}

.blog-article strong {
   font-weight: 700;
   color: var(--text-dark);
}

/* ============================================================
   4. PROJECT SUMMARY BOX（プロジェクト概要）
   ============================================================ */
.article-summary-box {
   background: var(--bg-light);
   border: 1px solid var(--border-subtle);
   border-radius: 6px;
   padding: 28px 32px;
   margin: 2rem 0;
}

.article-summary-box .summary-title {
   font-family: var(--font-heading);
   font-size: 0.78rem;
   font-weight: 700;
   color: var(--primary);
   letter-spacing: 0.15em;
   text-transform: uppercase;
   margin-bottom: 16px;
   display: flex;
   align-items: center;
   gap: 8px;
}

.article-summary-box .summary-title::before {
   content: '';
   display: inline-block;
   width: 20px;
   height: 3px;
   background: var(--primary);
   border-radius: 2px;
}

.article-summary-box dl {
   display: grid;
   grid-template-columns: 7em 1fr;
   gap: 0;
   margin: 0;
}

.article-summary-box dt {
   font-size: 0.82rem;
   font-weight: 700;
   color: var(--primary-dark);
   padding: 8px 0;
   border-bottom: 1px solid var(--border-subtle);
}

.article-summary-box dd {
   font-size: 0.88rem;
   color: var(--text-body);
   padding: 8px 0;
   margin: 0;
   border-bottom: 1px solid var(--border-subtle);
}

.article-summary-box dt:last-of-type,
.article-summary-box dd:last-of-type {
   border-bottom: none;
}

@media (max-width: 575.98px) {
   .article-summary-box {
      padding: 20px;
   }
   .article-summary-box dl {
      grid-template-columns: 1fr;
   }
   .article-summary-box dt {
      padding-bottom: 2px;
      border-bottom: none;
      margin-top: 10px;
   }
   .article-summary-box dd {
      margin-top: 0;
   }
}

/* ============================================================
   5. DATA TABLE（検査結果・比較表）
   ============================================================ */
.article-table {
   width: 100%;
   border-collapse: collapse;
   margin: 1.5rem 0 2rem;
   font-size: 0.88rem;
   border-radius: 6px;
   overflow: hidden;
   box-shadow: 0 1px 8px rgba(0, 0, 0, 0.06);
}

.article-table thead tr {
   background: var(--primary-dark);
   color: #fff;
}

.article-table thead th {
   padding: 12px 16px;
   text-align: center;
   font-size: 0.82rem;
   font-weight: 700;
   letter-spacing: 0.05em;
   white-space: nowrap;
}

.article-table tbody tr {
   border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.article-table tbody tr:nth-child(even) {
   background: rgba(45, 106, 79, 0.04);
}

.article-table tbody tr:last-child {
   border-bottom: none;
}

.article-table td {
   padding: 11px 16px;
   vertical-align: middle;
   text-align: center;
   color: var(--text-body);
}

.article-table td:first-child {
   text-align: left;
   font-weight: 600;
   color: var(--text-dark);
}

/* 改善率セル — 強調色 */
.article-table .cell-highlight {
   color: var(--accent-coral);
   font-weight: 700;
   font-size: 0.95rem;
}

@media (max-width: 575.98px) {
   .article-table {
      display: block;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
   }
}

/* ============================================================
   6. STAT HIGHLIGHT（ハイライト数値）
   ============================================================ */
.article-stats-row {
   display: flex;
   flex-wrap: wrap;
   gap: 16px;
   margin: 1.5rem 0 2rem;
}

.article-stat-card {
   flex: 1 1 160px;
   background: var(--bg-white);
   border: 1px solid var(--border-subtle);
   border-top: 3px solid var(--accent-coral);
   border-radius: 4px;
   padding: 20px 16px;
   text-align: center;
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}

.article-stat-card .stat-number {
   display: block;
   font-family: var(--font-heading);
   font-size: 2rem;
   font-weight: 900;
   color: var(--accent-coral);
   line-height: 1.2;
}

.article-stat-card .stat-label {
   display: block;
   font-size: 0.78rem;
   color: var(--text-muted);
   margin-top: 6px;
   line-height: 1.5;
}

/* ============================================================
   7. QUOTE BLOCK（引用・現場レポート）
   ============================================================ */
.article-quote {
   position: relative;
   margin: 1.5rem 0 2rem;
   padding: 20px 24px 20px 52px;
   background: rgba(45, 106, 79, 0.05);
   border-left: 3px solid var(--primary);
   border-radius: 0 4px 4px 0;
   font-size: 0.92rem;
   line-height: 2;
   color: var(--text-body);
}

.article-quote::before {
   content: '"';
   position: absolute;
   left: 14px;
   top: 12px;
   font-family: var(--font-heading);
   font-size: 2.8rem;
   color: var(--primary-light);
   line-height: 1;
}

.article-quote cite {
   display: block;
   margin-top: 10px;
   font-size: 0.8rem;
   color: var(--text-muted);
   font-style: normal;
}

/* ============================================================
   8. BENEFIT GRID（導入効果・まとめカード）
   ============================================================ */
.article-benefit-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 12px;
   margin: 1.5rem 0 2rem;
}

.benefit-card {
   background: var(--bg-white);
   border: 1px solid var(--border-subtle);
   border-radius: 6px;
   padding: 18px 20px;
   display: flex;
   align-items: flex-start;
   gap: 12px;
   font-size: 0.88rem;
   line-height: 1.75;
   transition: background 0.2s, transform 0.2s;
}

.benefit-card:hover {
   background: rgba(45, 106, 79, 0.04);
   transform: translateY(-2px);
}

.benefit-card .benefit-icon {
   flex-shrink: 0;
   font-size: 1.3rem;
   line-height: 1;
   margin-top: 2px;
}

.benefit-card .benefit-text {
   font-weight: 600;
   color: var(--text-dark);
}

.benefit-card .benefit-desc {
   font-size: 0.82rem;
   color: var(--text-muted);
   font-weight: 400;
   margin-top: 2px;
}

@media (max-width: 575.98px) {
   .article-benefit-grid {
      grid-template-columns: 1fr;
   }
}

/* ============================================================
   9. IMAGES（本文内画像）
   ============================================================ */
.blog-article img,
.article-img {
   max-width: 100%;
   height: auto;
   border-radius: 4px;
   box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.article-img-wrap {
   margin: 1.5rem 0 2rem;
   text-align: center;
}

.article-img-wrap img {
   max-width: 800px;
   width: 100%;
}

/* 2分割画像（Before/After） */
.article-img-compare {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 12px;
   margin: 1.5rem 0 2rem;
}

.article-img-compare figure {
   margin: 0;
}

@media (max-width: 575.98px) {
   .article-img-compare {
      grid-template-columns: 1fr;
   }
}

/* キャプション */
.article-caption,
.blog-article figcaption {
   display: block;
   font-size: 0.78rem;
   color: var(--text-muted);
   text-align: center;
   margin-top: 6px;
   letter-spacing: 0.03em;
}

/* ============================================================
   10. SECTION DIVIDER
   ============================================================ */
.article-divider {
   border: none;
   border-top: 1px solid var(--border-subtle);
   margin: 3rem 0;
}

/* ============================================================
   11. INFO BOX（補足情報）
   ============================================================ */
.article-info-box {
   background: rgba(74, 144, 217, 0.06);
   border: 1px solid rgba(74, 144, 217, 0.2);
   border-left: 4px solid #4a90d9;
   border-radius: 0 4px 4px 0;
   padding: 16px 20px;
   margin: 1.5rem 0;
   font-size: 0.88rem;
   line-height: 1.9;
   color: var(--text-body);
}

.article-info-box .info-title {
   font-weight: 700;
   color: #4a90d9;
   font-size: 0.82rem;
   letter-spacing: 0.05em;
   margin-bottom: 6px;
}

/* ============================================================
   12. CATEGORY BADGE（カテゴリタグ）
   ============================================================ */
.article-badge {
   display: inline-block;
   font-size: 0.72rem;
   font-weight: 700;
   padding: 4px 14px;
   border-radius: 3px;
   color: #fff;
   letter-spacing: 0.05em;
}

.badge-water    { background: #2a7b9b; }
.badge-environ  { background: var(--primary); }
.badge-odor     { background: #c87533; }
.badge-general  { background: #6c757d; }