/* ══════════════════════════════════════════
   blog-template-Achievements.css
   導入事例（Case Study）ページ固有スタイル
   ══════════════════════════════════════════ */

/* ── コンテナ幅（事例ページは本文1000px） ── */
:root { --max: 1000px; }
.container { width: min(var(--max), calc(100% - 64px)); margin: 0 auto; }

/* ヘッダー・フッター内は1180px幅（containerより広い） */
.header-inner { width: min(1180px, calc(100% - 64px)); margin: 0 auto; }
.footer-inner  { width: min(1180px, calc(100% - 64px)); margin: 0 auto; }

/* ── パンくずリスト（ヒーロー内・暗色背景用） ── */
.breadcrumb   { font-size: 12px; color: rgba(255,255,255,.65); font-weight: 600; margin-bottom: 24px; display: flex; gap: 6px; }
.breadcrumb a { color: rgba(255,255,255,.65); }

/* ── ケースヒーロー ── */
.case-hero      { background: linear-gradient(135deg, var(--green) 0%, #0c4a36 100%); color: #fff; padding: 64px 0 56px; }
.case-hero .eyebrow { font-size: 12px; letter-spacing: .28em; color: var(--gold); font-weight: 800; margin-bottom: 16px; }
.case-hero h1   { margin: 0 0 20px; font-size: 36px; line-height: 1.45; font-family: "Zen Kaku Gothic New", sans-serif; }
.case-hero .lead { margin: 0 0 32px; font-size: 16px; color: rgba(255,255,255,.85); line-height: 1.9; max-width: 720px; }
.case-meta      { display: flex; gap: 32px; flex-wrap: wrap; }
.case-meta-item { font-size: 13px; }
.case-meta-item dt { color: rgba(255,255,255,.55); font-weight: 600; margin-bottom: 4px; font-size: 11px; letter-spacing: .06em; }
.case-meta-item dd { margin: 0; font-weight: 700; }

/* ── KPIストリップ ── */
.kpi-strip { background: var(--beige); border-bottom: 1px solid var(--line); }
.kpi-inner { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.kpi-item { padding: 28px 24px; text-align: center; border-right: 1px solid var(--line); }
.kpi-item:last-child { border-right: none; }
.kpi-num       { font-size: 42px; font-weight: 800; color: var(--green); letter-spacing: -.03em; line-height: 1; }
.kpi-num span  { font-size: 22px; }
.kpi-label     { margin-top: 6px; font-size: 12px; color: var(--muted); font-weight: 600; }

/* ── 記事本文 ── */
.article-wrap { padding: 56px 0 80px; }
.article-body { font-size: 16px; line-height: 2; color: #2D3E39; }
.article-body h2 { font-size: 26px; font-family: "Zen Kaku Gothic New", sans-serif; color: var(--green); margin: 52px 0 18px; padding-bottom: 12px; border-bottom: 2px solid var(--line); }
.article-body h2::before { content: ""; display: inline-block; width: 4px; height: 22px; background: var(--gold); border-radius: 2px; margin-right: 12px; vertical-align: middle; }
.article-body h3 { font-size: 19px; color: var(--text); margin: 36px 0 12px; }
.article-body p  { margin: 0 0 20px; }

/* ── 顧客プロフィール ── */
.client-profile { background: var(--beige); border: 1px solid var(--line); border-radius: 12px; padding: 28px 32px; margin: 40px 0; display: grid; grid-template-columns: 120px 1fr; gap: 28px; align-items: center; }
.client-logo    { width: 120px; height: 80px; background: #fff; border-radius: 8px; border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; font-size: 12px; color: var(--muted); font-weight: 700; overflow: hidden; }
.client-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.client-info table { width: 100%; border-collapse: collapse; font-size: 14px; }
.client-info td { padding: 6px 12px 6px 0; vertical-align: top; }
.client-info td:first-child { color: var(--muted); font-weight: 700; white-space: nowrap; width: 90px; }

/* ── Before / After ── */
.before-after { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; border-radius: 12px; overflow: hidden; margin: 36px 0; box-shadow: var(--shadow); }
.ba-col        { padding: 28px; }
.ba-col.before { background: #f7f5ef; }
.ba-col.after  { background: linear-gradient(135deg, var(--green), #0e674d); color: #fff; }
.ba-label      { font-size: 11px; font-weight: 800; letter-spacing: .12em; margin-bottom: 16px; opacity: .7; }
.ba-col.after .ba-label { opacity: .8; }
.ba-list       { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.ba-list li    { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.6; }
.ba-list li::before { content: "✕"; color: #c0392b; font-size: 12px; flex-shrink: 0; margin-top: 2px; }
.ba-col.after .ba-list li::before { content: "✓"; color: var(--gold); }
.ba-col.after .ba-list li { color: rgba(255,255,255,.92); }

/* ── プロセスタイムライン ── */
.timeline       { margin: 36px 0; display: flex; flex-direction: column; gap: 0; }
.tl-item        { display: grid; grid-template-columns: 80px 1fr; gap: 0; }
.tl-month       { padding: 20px 16px 20px 0; text-align: right; font-size: 12px; font-weight: 800; color: var(--gold); border-right: 2px solid var(--line); position: relative; }
.tl-month::after { content: ""; position: absolute; right: -6px; top: 50%; transform: translateY(-50%); width: 10px; height: 10px; background: var(--gold); border-radius: 50%; }
.tl-body        { padding: 16px 0 16px 24px; }
.tl-body h4     { margin: 0 0 6px; font-size: 15px; color: var(--green); font-weight: 800; }
.tl-body p      { margin: 0; font-size: 14px; color: var(--muted); line-height: 1.7; }

/* ── お客様の声 ── */
.voice-box      { background: var(--beige); border-radius: 12px; padding: 30px 32px; margin: 36px 0; position: relative; }
.voice-box::before { content: "\201C"; position: absolute; top: -8px; left: 24px; font-size: 72px; color: var(--gold); opacity: .4; line-height: 1; font-family: Georgia, serif; }
.voice-text     { font-size: 16px; line-height: 1.9; color: #344540; margin: 0 0 20px; position: relative; }
.voice-author   { display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--muted); font-weight: 700; }
.voice-icon     { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, var(--green), #0e674d); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 800; flex-shrink: 0; }

/* ── 画像比較 ── */
.image-compare          { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 32px 0; }
.image-compare figure   { margin: 0; }
.image-compare img      { width: 100%; height: auto; border-radius: 8px; border: 1px solid var(--line); aspect-ratio: 16/9; object-fit: contain; background: var(--beige); }
.image-compare figcaption { margin-top: 8px; font-size: 12px; color: var(--muted); text-align: center; font-weight: 600; }

/* ── 関連事例 ── */
.related       { margin-top: 64px; padding-top: 40px; border-top: 1px solid var(--line); }
.related h3    { font-size: 20px; font-family: "Zen Kaku Gothic New", sans-serif; color: var(--green); margin: 0 0 24px; }
.related-card-body { padding: 16px; }

/* ── 声（プレースホルダー表示用） ── */
.voice-placeholder { font-size: 14px; color: var(--muted); font-style: italic; }

/* ── CTA ── */
.cta-section { margin-top: 80px; }

/* ── レスポンシブ ── */
@media (max-width: 1024px) {
  .kpi-inner { grid-template-columns: repeat(2, 1fr); }
  .kpi-item:nth-child(2) { border-right: none; }
  .related-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  .container { width: min(var(--max), calc(100% - 40px)); }
  .case-hero h1 { font-size: 26px; }
  .before-after    { grid-template-columns: 1fr; }
  .image-compare   { grid-template-columns: 1fr; }
  .client-profile  { grid-template-columns: 1fr; }
  .related-grid    { grid-template-columns: 1fr; }
  .kpi-inner       { grid-template-columns: repeat(2, 1fr); }
}