/* =========================================================
   Base Theme
   ========================================================= */
body .story-case {
  --ink: #1a1a1a;
  --ink-light: #4a4a4a;
  --ink-muted: #888;
  --rule: #d8cfc4;
  --accent: #8b6f47;
  --accent-light: #c9a96e;
  --bg: #faf8f4;
  --bg-warm: #f2ede4;
  --white: #ffffff;
  --hero-bg: var(--ink);
  --hero-text: var(--white);
  --hero-lead: rgba(255, 255, 255, 0.72);
  --hero-meta-border: rgba(255, 255, 255, 0.12);
  --hero-meta-text: rgba(255, 255, 255, 0.55);
  --hero-meta-strong: rgba(255, 255, 255, 0.85);
  --hero-grid-line: rgba(255, 255, 255, 0.03);
  --kpi-bg: var(--accent);
  --kpi-border: rgba(255, 255, 255, 0.2);
  --kpi-text: rgba(255, 255, 255, 0.75);
  --scene-bg: var(--ink);
  --scene-text: rgba(255, 255, 255, 0.82);
  --scene-label: rgba(255, 255, 255, 0.15);
  --footer-bg: var(--ink);
  --footer-text: rgba(255, 255, 255, 0.4);
  --serif: "Noto Serif JP", "DM Serif Display", Georgia, serif;
  --sans: "Noto Sans JP", sans-serif;

  background: var(--bg) !important;
  color: var(--ink) !important;
  font-family: var(--sans) !important;
  font-weight: 300 !important;
  line-height: 1.9 !important;
  -webkit-font-smoothing: antialiased !important;
  scroll-behavior: smooth !important;
}

/* =========================================================
   Theme Variants
   ========================================================= */
body .story-case.theme-green {
  --accent: #4a6741;
  --accent-light: #7a9e6e;
  --hero-bg: #1c2419;
  --hero-text: #ffffff;
  --hero-lead: rgba(255, 255, 255, 0.72);
  --hero-meta-border: rgba(255, 255, 255, 0.12);
  --hero-meta-text: rgba(255, 255, 255, 0.55);
  --hero-meta-strong: rgba(255, 255, 255, 0.85);
  --hero-grid-line: rgba(255, 255, 255, 0.025);
  --kpi-bg: #4a6741;
  --kpi-border: rgba(255, 255, 255, 0.2);
  --kpi-text: rgba(255, 255, 255, 0.75);
  --scene-bg: #1c2419;
  --scene-text: rgba(255, 255, 255, 0.82);
  --scene-label: rgba(255, 255, 255, 0.12);
  --footer-bg: #1c2419;
  --footer-text: rgba(255, 255, 255, 0.35);
}

body .story-case.theme-red {
  --accent: #8b3f3f;
  --accent-light: #c97c7c;
  --hero-bg: #241919;
  --hero-text: #ffffff;
  --hero-lead: rgba(255, 255, 255, 0.72);
  --hero-meta-border: rgba(255, 255, 255, 0.12);
  --hero-meta-text: rgba(255, 255, 255, 0.55);
  --hero-meta-strong: rgba(255, 255, 255, 0.85);
  --hero-grid-line: rgba(255, 255, 255, 0.025);
  --kpi-bg: #8b3f3f;
  --kpi-border: rgba(255, 255, 255, 0.2);
  --kpi-text: rgba(255, 255, 255, 0.75);
  --scene-bg: #241919;
  --scene-text: rgba(255, 255, 255, 0.82);
  --scene-label: rgba(255, 255, 255, 0.12);
  --footer-bg: #241919;
  --footer-text: rgba(255, 255, 255, 0.35);
}

/* =========================================================
   Reset / Common
   ========================================================= */
body .story-case *,
body .story-case *::before,
body .story-case *::after {
  box-sizing: border-box !important;
}

body .story-case a {
  color: inherit !important;
  text-decoration: none !important;
}

body .story-case img {
  max-width: 100% !important;
  height: auto !important;
  display: block !important;
}

body .story-case p,
body .story-case h1,
body .story-case h2,
body .story-case h3,
body .story-case ul,
body .story-case li,
body .story-case figure,
body .story-case blockquote {
  margin: 0 !important;
  padding: 0 !important;
}

/* 不要な自動段落対策 */
body .story-case p:empty,
body .story-case .kpi-inner > p,
body .story-case .kpi-item > p {
  display: none !important;
}

/* =========================================================
   Header
   ========================================================= */
body .story-case .site-header {
  background: var(--white) !important;
  border-bottom: 1px solid var(--rule) !important;
  padding: 20px 40px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

body .story-case .logo-text {
  font-family: var(--serif) !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  letter-spacing: 0.05em !important;
  color: var(--ink) !important;
}

body .story-case .logo-divider {
  color: var(--rule) !important;
  margin: 0 4px !important;
}

body .story-case .logo-sub {
  font-family: var(--sans) !important;
  font-size: 12px !important;
  color: var(--ink-muted) !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
}

/* =========================================================
   Hero
   ========================================================= */
body .story-case .hero {
  background: var(--hero-bg) !important;
  color: var(--hero-text) !important;
  padding: 100px 40px 80px !important;
  position: relative !important;
  overflow: hidden !important;
}

body .story-case .hero::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 39px,
    var(--hero-grid-line) 39px,
    var(--hero-grid-line) 40px
  ) !important;
}

body .story-case .hero-inner {
  max-width: 800px !important;
  margin: 0 auto !important;
  position: relative !important;
}

body .story-case .category-tag {
  display: inline-block !important;
  font-size: 11px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  font-family: var(--sans) !important;
  font-weight: 500 !important;
  color: var(--accent-light) !important;
  border: 1px solid var(--accent-light) !important;
  padding: 5px 14px !important;
  margin-bottom: 32px !important;
}

body .story-case .hero h1,
body .story-case .hero-inner h1,
body .story-case h1.story-case__title {
  font-family: var(--serif) !important;
  font-size: clamp(26px, 4vw, 40px) !important;
  font-weight: 600 !important;
  line-height: 1.55 !important;
  letter-spacing: 0.03em !important;
  margin-bottom: 32px !important;
  color: var(--hero-text) !important;
}

body .story-case .hero-lead {
  font-size: 15px !important;
  line-height: 2 !important;
  color: var(--hero-lead) !important;
  max-width: 640px !important;
  margin-bottom: 40px !important;
}

body .story-case .hero-meta {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 24px !important;
  padding-top: 32px !important;
  border-top: 1px solid var(--hero-meta-border) !important;
}

body .story-case .hero-meta-item {
  font-size: 12px !important;
  letter-spacing: 0.08em !important;
  color: var(--hero-meta-text) !important;
  text-transform: uppercase !important;
}

body .story-case .hero-meta-item strong {
  display: block !important;
  color: var(--hero-meta-strong) !important;
  font-size: 14px !important;
  letter-spacing: 0.04em !important;
  margin-top: 4px !important;
  text-transform: none !important;
  font-weight: 600 !important;
}

/* =========================================================
   KPI
   ========================================================= */
body .story-case .kpi-bar {
  background: var(--kpi-bg) !important;
  padding: 28px 40px !important;
}

body .story-case .kpi-inner {
  max-width: 800px !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) !important;
  gap: 0 !important;
}

body .story-case .kpi-item {
  padding: 0 24px !important;
  border-right: 1px solid var(--kpi-border) !important;
  text-align: center !important;
}

body .story-case .kpi-item:first-child {
  padding-left: 0 !important;
}

body .story-case .kpi-item:last-child {
  border-right: none !important;
}

body .story-case .kpi-num {
  font-family: "DM Serif Display", Georgia, serif !important;
  font-size: 36px !important;
  color: var(--white) !important;
  line-height: 1 !important;
}

body .story-case .kpi-label {
  font-size: 11px !important;
  letter-spacing: 0.1em !important;
  color: var(--kpi-text) !important;
  margin-top: 6px !important;
}

/* =========================================================
   Main Content
   ========================================================= */
body .story-case .content-wrap {
  max-width: 800px !important;
  margin: 0 auto !important;
  padding: 72px 40px 100px !important;
}

/* Executive Summary */
body .story-case .exec-summary {
  background: var(--bg-warm) !important;
  border-left: 3px solid var(--accent) !important;
  padding: 32px 36px !important;
  margin-bottom: 64px !important;
}

body .story-case .exec-summary-label {
  font-size: 11px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--accent) !important;
  font-weight: 500 !important;
  margin-bottom: 14px !important;
  font-family: var(--sans) !important;
}

body .story-case .exec-summary p {
  font-family: var(--serif) !important;
  font-size: 16px !important;
  line-height: 1.9 !important;
  color: var(--ink) !important;
  font-weight: 400 !important;
}

/* Sections */
body .story-case h2 {
  font-family: var(--serif) !important;
  font-size: 22px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  color: var(--ink) !important;
  margin-bottom: 20px !important;
  padding-bottom: 14px !important;
  border-bottom: 1px solid var(--rule) !important;
  display: flex !important;
  align-items: baseline !important;
  gap: 14px !important;
  line-height: 1.6 !important;
}

body .story-case h2::before {
  content: attr(data-num) !important;
  font-family: "DM Serif Display", serif !important;
  font-size: 13px !important;
  color: var(--accent) !important;
  letter-spacing: 0.08em !important;
  flex-shrink: 0 !important;
}

body .story-case section {
  margin-bottom: 60px !important;
}

body .story-case p {
  font-family: var(--sans) !important;
  font-size: 15px !important;
  line-height: 2 !important;
  color: var(--ink-light) !important;
  margin-bottom: 18px !important;
}

body .story-case p:last-child {
  margin-bottom: 0 !important;
}

body .story-case ul {
  margin: 14px 0 18px 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

body .story-case li {
  font-family: var(--sans) !important;
  font-size: 15px !important;
  line-height: 1.85 !important;
  color: var(--ink-light) !important;
  padding: 8px 0 8px 24px !important;
  position: relative !important;
  border-bottom: 1px solid var(--rule) !important;
  list-style: none !important;
}

body .story-case li:last-child {
  border-bottom: none !important;
}

body .story-case li::before {
  content: "—" !important;
  position: absolute !important;
  left: 0 !important;
  color: var(--accent) !important;
  font-weight: 400 !important;
}

/* Pull Quote */
body .story-case .pull-quote {
  margin: 40px 0 !important;
  padding: 36px 40px !important;
  background: var(--white) !important;
  border: 1px solid var(--rule) !important;
  position: relative !important;
}

body .story-case .pull-quote::before {
  content: '"' !important;
  font-family: "DM Serif Display", serif !important;
  font-size: 80px !important;
  color: var(--accent-light) !important;
  opacity: 0.3 !important;
  position: absolute !important;
  top: 10px !important;
  left: 20px !important;
  line-height: 1 !important;
}

body .story-case .pull-quote p {
  font-family: var(--serif) !important;
  font-size: 17px !important;
  line-height: 1.85 !important;
  color: var(--ink) !important;
  font-weight: 500 !important;
  margin: 0 !important;
  padding-left: 20px !important;
}

body .story-case .pull-quote cite {
  display: block !important;
  font-size: 12px !important;
  letter-spacing: 0.1em !important;
  color: var(--ink-muted) !important;
  margin-top: 16px !important;
  padding-left: 20px !important;
  font-style: normal !important;
  text-transform: uppercase !important;
}

/* Process Steps */
body .story-case .process-steps {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  gap: 0 !important;
  margin: 28px 0 !important;
  border: 1px solid var(--rule) !important;
  background: var(--white) !important;
}

body .story-case .step {
  padding: 20px 16px !important;
  text-align: center !important;
  border-right: 1px solid var(--rule) !important;
  position: relative !important;
}

body .story-case .step:last-child {
  border-right: none !important;
}

body .story-case .step-num {
  font-family: "DM Serif Display", serif !important;
  font-size: 28px !important;
  color: var(--accent-light) !important;
  opacity: 0.4 !important;
  line-height: 1 !important;
}

body .story-case .step-label {
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0.05em !important;
  color: var(--ink) !important;
  margin-top: 8px !important;
}

body .story-case .step-arrow {
  position: absolute !important;
  right: -8px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 15px !important;
  height: 15px !important;
  background: var(--accent) !important;
  clip-path: polygon(0 0, 100% 50%, 0 100%) !important;
  z-index: 1 !important;
}

body .story-case .step:last-child .step-arrow {
  display: none !important;
}

/* Scene Box */
body .story-case .scene-box {
  background: var(--scene-bg) !important;
  color: var(--scene-text) !important;
  padding: 36px 40px !important;
  margin: 32px 0 !important;
  position: relative !important;
  overflow: hidden !important;
}

body .story-case .scene-box::before {
  content: "SCENE" !important;
  position: absolute !important;
  top: 16px !important;
  right: 20px !important;
  font-size: 10px !important;
  letter-spacing: 0.25em !important;
  color: var(--scene-label) !important;
  font-weight: 500 !important;
}

body .story-case .scene-box p,
body .story-case .scene-box .scene-box__text {
  font-family: var(--serif) !important;
  font-size: 15px !important;
  line-height: 2 !important;
  color: var(--scene-text) !important;
  margin: 0 !important;
}

/* Result Cards */
body .story-case .result-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 16px !important;
  margin: 28px 0 !important;
}

body .story-case .result-card {
  background: var(--white) !important;
  border: 1px solid var(--rule) !important;
  padding: 24px 24px 20px !important;
}

body .story-case .result-card-label {
  font-size: 11px !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  color: var(--accent) !important;
  font-weight: 500 !important;
  margin-bottom: 10px !important;
}

body .story-case .result-card p {
  font-size: 14px !important;
  line-height: 1.75 !important;
  margin: 0 !important;
}

/* CTA */
body .story-case .cta-block {
  margin-top: 80px !important;
  background: var(--bg-warm) !important;
  border: 1px solid var(--rule) !important;
  padding: 52px 48px !important;
  text-align: center !important;
}

body .story-case .cta-block h3 {
  font-family: var(--serif) !important;
  font-size: 22px !important;
  font-weight: 600 !important;
  color: var(--ink) !important;
  margin-bottom: 18px !important;
  letter-spacing: 0.03em !important;
  line-height: 1.7 !important;
}

body .story-case .cta-block p {
  font-size: 15px !important;
  color: var(--ink-light) !important;
  max-width: 480px !important;
  margin: 0 auto 32px !important;
  text-align: center !important;
}

body .story-case .cta-btn {
  display: inline-block !important;
  background: var(--accent) !important;
  color: var(--white) !important;
  font-size: 13px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  font-weight: 500 !important;
  padding: 16px 40px !important;
  text-decoration: none !important;
  transition: background 0.2s !important;
}

body .story-case .cta-btn:hover {
  background: var(--ink) !important;
}

body .story-case .cta-btn:focus {
  background: var(--ink) !important;
  color: var(--white) !important;
}

/* Footer */
body .story-case footer {
  background: var(--footer-bg) !important;
  color: var(--footer-text) !important;
  text-align: center !important;
  padding: 32px !important;
  font-size: 12px !important;
  letter-spacing: 0.06em !important;
}

body .story-case footer p {
  color: var(--footer-text) !important;
}

/* ── Template Basic Layout ── */
body .story-case .story-case__article {
  width: 100% !important;
}

body .story-case .story-case__header {
  margin-bottom: 40px !important;
}

body .story-case .story-case__thumbnail {
  margin-bottom: 24px !important;
}

body .story-case .story-case__thumbnail img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
}

body .story-case .story-case__title {
  font-family: var(--serif) !important;
  font-size: clamp(28px, 4vw, 42px) !important;
  line-height: 1.5 !important;
  letter-spacing: 0.03em !important;
  color: var(--ink) !important;
  margin: 0 0 12px !important;
}

body .story-case .story-case__meta {
  margin-bottom: 24px !important;
  font-size: 13px !important;
  color: var(--ink-muted) !important;
}

body .story-case .story-case__date {
  display: inline-block !important;
}

body .story-case .story-case__content {
  line-height: 1.9 !important;
}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 680px) {
  body .story-case .hero {
    padding: 60px 24px 48px !important;
  }

  body .story-case .content-wrap {
    padding: 48px 24px 72px !important;
  }

  body .story-case .kpi-inner {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  body .story-case .kpi-item {
    border-right: none !important;
    border-bottom: 1px solid var(--kpi-border) !important;
    padding: 16px 0 !important;
  }

  body .story-case .kpi-item:last-child {
    border-bottom: none !important;
  }

  body .story-case .process-steps {
    grid-template-columns: 1fr 1fr !important;
  }

  body .story-case .result-grid {
    grid-template-columns: 1fr !important;
  }

  body .story-case .cta-block {
    padding: 36px 24px !important;
  }

  body .story-case .pull-quote {
    padding: 28px 24px !important;
  }

  body .story-case .scene-box {
    padding: 28px 24px !important;
  }
}