/* ========================================
   DataScience Lab
   cases.css
   /cases 一覧ページ専用
======================================== */

/* ========================================
   section: root
   一覧ページ共通変数
======================================== */

.cases-page {
  --cases-bg: #f7f9fc;
  --cases-surface: #ffffff;
  --cases-surface-soft: #fbfbfc;
  --cases-text: #1b1b1b;
  --cases-text-soft: #5d6877;
  --cases-border: #e3e8ef;
  --cases-border-strong: #d5dce5;

  --cases-main: #7A6858;
  --cases-main-dark: #5A4E43;
  --cases-main-light: #F4F2EF;

  --cases-link: #0f6cbd;
  --cases-link-dark: #0f3863;
  --cases-cta: #de982f;

  --cases-ai: #1a357d;
  --cases-ds: #0f6cbd;
  --cases-seido: #9c3d3d;
  --cases-career: #eb5a0c;
  --cases-corporate: #00a692;

  --cases-radius-sm: 14px;
  --cases-radius-md: 20px;
  --cases-radius-lg: 24px;

  --cases-shadow-sm: 0 6px 18px rgba(20, 31, 56, 0.04);
  --cases-shadow-md: 0 12px 34px rgba(20, 31, 56, 0.08);

  --cases-section-space: 64px;
  --cases-section-space-mobile: 40px;

  background: var(--cases-bg);
  color: var(--cases-text);
}

/* ========================================
   section: layout
======================================== */

.cases-container {
  width: min(1120px, calc(100% - 32px));
  margin: 0 auto;
}

/* ========================================
   section: common heading
======================================== */

.cases-section-heading {
  margin-bottom: 24px;
}

.cases-section-heading h2 {
  margin: 0 0 10px;
  padding-left: 14px;
  border-left: 4px solid var(--cases-main);
  color: var(--cases-main-dark);
  font-size: 28px;
  line-height: 1.4;
}

.cases-section-heading p {
  max-width: 860px;
  margin: 0;
  color: var(--cases-text-soft);
  font-size: 15px;
  line-height: 1.85;
}

/* ========================================
   section: hero
======================================== */

.cases-hero {
  padding: 72px 0 40px;
  background:
    linear-gradient(180deg, rgba(122, 104, 88, 0.10) 0%, rgba(122, 104, 88, 0.00) 100%),
    #ffffff;
}

.cases-hero__eyebrow {
  margin: 0 0 12px;
  color: var(--cases-main);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cases-hero__title {
  margin: 0 0 16px;
  color: var(--cases-main-dark);
  font-size: clamp(30px, 4vw, 46px);
  line-height: 1.25;
}

.cases-hero__lead {
  max-width: 820px;
  margin: 0;
  color: #4a5565;
  font-size: 16px;
  line-height: 1.9;
}

.cases-hero__quick-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.cases-hero__quick-links a {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 0 16px;
  border: 1px solid #ddd8d2;
  border-radius: 999px;
  background: #fff;
  color: var(--cases-main-dark);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  transition:
    transform 0.2s ease,
    background 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease,
    box-shadow 0.2s ease;
}

.cases-hero__quick-links a:hover {
  transform: translateY(-1px);
  background: var(--cases-main-light);
  border-color: transparent;
  color: var(--cases-main-dark);
  box-shadow: var(--cases-shadow-sm);
}

/* ========================================
   section: spacing
======================================== */

.cases-series,
.cases-featured,
.cases-tags,
.cases-new,
.cases-popular,
.cases-service-links-section {
  padding: var(--cases-section-space) 0;
}

/* ========================================
   section: post grid
======================================== */

.cases-post-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.cases-post-grid--featured .cases-post-card__link {
  border-color: rgba(122, 104, 88, 0.16);
  box-shadow: var(--cases-shadow-sm);
}

/* ========================================
   section: post card
======================================== */

.cases-post-card {
  height: 100%;
}

.cases-post-card__link {
  display: block;
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--cases-border);
  border-radius: var(--cases-radius-md);
  background: var(--cases-surface);
  color: inherit;
  text-decoration: none;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease;
}

.cases-post-card__link:hover {
  transform: translateY(-2px);
  border-color: rgba(122, 104, 88, 0.18);
  box-shadow: var(--cases-shadow-md);
}

.cases-post-card__thumb-wrap {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #dde5f0;
}

.cases-post-card__thumb {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cases-post-card__badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(90, 78, 67, 0.92);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}

.cases-post-card__body {
  padding: 18px;
}

.cases-post-card__meta {
  margin-bottom: 8px;
  color: #7b8697;
  font-size: 12px;
  line-height: 1.6;
}

.cases-post-card__title {
  margin: 0 0 10px;
  color: #202733;
  font-size: 20px;
  line-height: 1.55;
}

.cases-post-card__excerpt {
  margin: 0;
  color: var(--cases-text-soft);
  font-size: 14px;
  line-height: 1.8;
}

/* ========================================
   section: series grid
======================================== */

.cases-series__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.cases-series-card {
  display: block;
  overflow: hidden;
  border: 1px solid var(--cases-border);
  border-radius: var(--cases-radius-md);
  background: #fff;
  color: inherit;
  text-decoration: none;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease;
}

.cases-series-card:hover {
  transform: translateY(-2px);
  border-color: rgba(122, 104, 88, 0.18);
  box-shadow: var(--cases-shadow-md);
}

.cases-series-card__image-wrap {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #eef3f8;
}

.cases-series-card__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cases-series-card__image-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 20px;
  background: linear-gradient(135deg, rgba(122, 104, 88, 0.12), rgba(122, 104, 88, 0.06));
  color: var(--cases-main-dark);
  text-align: center;
}

.cases-series-card__image-placeholder span {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.6;
}

.cases-series-card__body {
  padding: 22px 24px 24px;
}

.cases-series-card__body h3 {
  margin: 0 0 10px;
  color: var(--cases-main-dark);
  font-size: 20px;
  line-height: 1.5;
}

.cases-series-card__body p {
  margin: 0;
  color: var(--cases-text-soft);
  font-size: 14px;
  line-height: 1.9;
}

/* ========================================
   section: tags
======================================== */

.cases-tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.cases-tag {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(122, 104, 88, 0.10);
  color: var(--cases-main-dark);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  transition:
    transform 0.2s ease,
    background 0.2s ease,
    color 0.2s ease,
    box-shadow 0.2s ease;
}

.cases-tag:hover {
  transform: translateY(-1px);
  background: var(--cases-main);
  color: #fff;
  box-shadow: var(--cases-shadow-sm);
}

/* optional tone helpers */
.cases-tag--ai {
  background: rgba(26, 53, 125, 0.10);
  color: #1a357d;
}

.cases-tag--ds {
  background: rgba(15, 108, 189, 0.10);
  color: #0f6cbd;
}

.cases-tag--seido {
  background: rgba(156, 61, 61, 0.10);
  color: #9c3d3d;
}

.cases-tag--career {
  background: rgba(235, 90, 12, 0.10);
  color: #eb5a0c;
}

.cases-tag--corporate {
  background: rgba(0, 166, 146, 0.10);
  color: #00a692;
}

.cases-tag--hakohige {
  background: rgba(244, 180, 0, 0.14);
  color: #8a6800;
}

/* ========================================
   section: service links
======================================== */

.cases-service-links {
  padding: 32px;
  border: 1px solid var(--cases-border);
  border-radius: var(--cases-radius-lg);
  background: #fff;
}

.cases-service-links__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.cases-service-card {
  display: block;
  padding: 24px;
  border: 1px solid #dce6f0;
  border-radius: 18px;
  background: #f7f9fc;
  color: inherit;
  text-decoration: none;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease,
    background 0.2s ease;
}

.cases-service-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--cases-shadow-sm);
  background: #ffffff;
}

.cases-service-card h3 {
  margin: 0 0 10px;
  font-size: 20px;
  line-height: 1.5;
}

.cases-service-card p {
  margin: 0 0 14px;
  color: var(--cases-text-soft);
  font-size: 14px;
  line-height: 1.8;
}

.cases-service-card span {
  color: var(--cases-link);
  font-size: 14px;
  font-weight: 700;
}

/* service card color accents */
.cases-service-card[href*="/excelai/"] h3 {
  color: #37915e;
}

.cases-service-card[href*="/corporate/"] h3 {
  color: #00a692;
}

.cases-service-card[href*="/personal/"] h3 {
  color: #4C6280;
}

.cases-service-card[href*="/seido/"] h3 {
  color: #9c3d3d;
}

.cases-service-card[href*="/courses/"] h3 {
  color: #5F6E7A;
}

/* ========================================
   section: shared article cta style
======================================== */

.cases-article-cta {
  margin-top: 48px;
  padding: 32px;
  border: 1px solid rgba(122, 104, 88, 0.14);
  border-radius: var(--cases-radius-lg);
  background: linear-gradient(135deg, rgba(122, 104, 88, 0.10), rgba(122, 104, 88, 0.04));
}

.cases-article-cta__eyebrow {
  margin: 0 0 8px;
  color: var(--cases-main);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.cases-article-cta__title {
  margin: 0 0 12px;
  color: var(--cases-main-dark);
  font-size: 28px;
  line-height: 1.4;
}

.cases-article-cta__text {
  margin: 0 0 20px;
  color: #4a5565;
  font-size: 15px;
  line-height: 1.8;
}

.cases-article-cta__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 22px;
  border-radius: 999px;
  background: var(--cases-cta);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.cases-article-cta__button:hover {
  opacity: 0.92;
  transform: translateY(-1px);
}

/* ========================================
   section: responsive
======================================== */

@media (max-width: 960px) {
  .cases-series__grid,
  .cases-post-grid,
  .cases-service-links__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .cases-hero {
    padding: 56px 0 28px;
  }

  .cases-series,
  .cases-featured,
  .cases-tags,
  .cases-new,
  .cases-popular,
  .cases-service-links-section {
    padding: var(--cases-section-space-mobile) 0;
  }

  .cases-series__grid,
  .cases-post-grid,
  .cases-service-links__grid {
    grid-template-columns: 1fr;
  }

  .cases-section-heading h2 {
    font-size: 24px;
  }

  .cases-hero__title {
    font-size: clamp(28px, 8vw, 38px);
  }

  .cases-hero__lead,
  .cases-section-heading p,
  .cases-series-card__body p,
  .cases-post-card__excerpt,
  .cases-service-card p {
    font-size: 14px;
  }

  .cases-post-card__title,
  .cases-series-card__body h3,
  .cases-service-card h3 {
    font-size: 18px;
  }

  .cases-service-links {
    padding: 22px;
  }
}

/* ========================================
   DataScience Lab
   cases.css add-on
   シリーズ別・カテゴリ別カラー強化
======================================== */

/* ========================================
   section: series accent mapping
   /cases のシリーズカードに色差を出す
   ※ HTML側で .is-series-xxx を付けられると理想
   ※ まだ付けていない場合は、後述の色補助クラスで対応可能
======================================== */

.cases-series-card {
  position: relative;
}

.cases-series-card::before {
  content: "";
  display: block;
  height: 8px;
  background: var(--series-accent, var(--cases-main));
}

.cases-series-card__image-wrap {
  background:
    linear-gradient(180deg, var(--series-bg, rgba(122, 104, 88, 0.08)) 0%, rgba(255, 255, 255, 0.0) 100%),
    #eef3f8;
}

.cases-series-card__body {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), var(--series-bg, rgba(122, 104, 88, 0.03)));
}

.cases-series-card__body h3 {
  color: var(--series-accent-dark, var(--cases-main-dark));
}

/* シリーズ個別色 */
.cases-series-card.is-series-data-world {
  --series-accent: #0f6cbd;
  --series-accent-dark: #0f3863;
  --series-bg: rgba(15, 108, 189, 0.08);
}

.cases-series-card.is-series-social-tour {
  --series-accent: #7A6858;
  --series-accent-dark: #5A4E43;
  --series-bg: rgba(122, 104, 88, 0.08);
}

.cases-series-card.is-series-hakohige-sensei {
  --series-accent: #f4b400;
  --series-accent-dark: #8a6800;
  --series-bg: rgba(244, 180, 0, 0.10);
}

.cases-series-card.is-series-generative-ai-dx {
  --series-accent: #1a357d;
  --series-accent-dark: #24408f;
  --series-bg: rgba(26, 53, 125, 0.08);
}

.cases-series-card.is-series-reskilling {
  --series-accent: #9c3d3d;
  --series-accent-dark: #7f2f2f;
  --series-bg: rgba(156, 61, 61, 0.08);
}

.cases-series-card.is-series-people {
  --series-accent: #eb5a0c;
  --series-accent-dark: #b9470b;
  --series-bg: rgba(235, 90, 12, 0.08);
}

.cases-series-card.is-series-news {
  --series-accent: #5F6E7A;
  --series-accent-dark: #424F59;
  --series-bg: rgba(95, 110, 122, 0.08);
}

/* ========================================
   section: fallback series tones
   HTML変更前でも少し差を出すための共通調整
======================================== */

.cases-series__grid .cases-series-card:nth-child(1) {
  --series-accent: #0f6cbd;
  --series-accent-dark: #0f3863;
  --series-bg: rgba(15, 108, 189, 0.08);
}

.cases-series__grid .cases-series-card:nth-child(2) {
  --series-accent: #7A6858;
  --series-accent-dark: #5A4E43;
  --series-bg: rgba(122, 104, 88, 0.08);
}

.cases-series__grid .cases-series-card:nth-child(3) {
  --series-accent: #f4b400;
  --series-accent-dark: #8a6800;
  --series-bg: rgba(244, 180, 0, 0.10);
}

.cases-series__grid .cases-series-card:nth-child(4) {
  --series-accent: #1a357d;
  --series-accent-dark: #24408f;
  --series-bg: rgba(26, 53, 125, 0.08);
}

.cases-series__grid .cases-series-card:nth-child(5) {
  --series-accent: #9c3d3d;
  --series-accent-dark: #7f2f2f;
  --series-bg: rgba(156, 61, 61, 0.08);
}

.cases-series__grid .cases-series-card:nth-child(6) {
  --series-accent: #eb5a0c;
  --series-accent-dark: #b9470b;
  --series-bg: rgba(235, 90, 12, 0.08);
}

.cases-series__grid .cases-series-card:nth-child(7) {
  --series-accent: #5F6E7A;
  --series-accent-dark: #424F59;
  --series-bg: rgba(95, 110, 122, 0.08);
}

/* ========================================
   section: section heading polish
======================================== */

.cases-series .cases-section-heading h2,
.cases-featured .cases-section-heading h2,
.cases-tags .cases-section-heading h2,
.cases-new .cases-section-heading h2,
.cases-popular .cases-section-heading h2,
.cases-service-links-section .cases-section-heading h2 {
  border-left-color: var(--cases-main);
  color: #2c2926;
}

.cases-series,
.cases-featured,
.cases-tags,
.cases-new,
.cases-popular {
  position: relative;
}

.cases-series .cases-container,
.cases-featured .cases-container,
.cases-tags .cases-container,
.cases-new .cases-container,
.cases-popular .cases-container {
  padding: 28px;
  border: 1px solid rgba(122, 104, 88, 0.10);
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.55);
}

/* ========================================
   section: category colored tags
   タグ一覧のカテゴリ色
   ※ HTML側で補助クラスを付けると理想
======================================== */

.cases-tag {
  border: 1px solid rgba(122, 104, 88, 0.14);
  box-shadow: none;
}

/* データ分析系 */
.cases-tag.is-tag-ds,
.cases-tag[data-tag-group="ds"],
.cases-tag[href*="/tag/data-analysis/"],
.cases-tag[href*="/tag/statistics/"],
.cases-tag[href*="/tag/machine-learning/"],
.cases-tag[href*="/tag/python/"],
.cases-tag[href*="/tag/sql/"],
.cases-tag[href*="/tag/bi/"],
.cases-tag[href*="/tag/tableau/"],
.cases-tag[href*="/tag/power-bi/"] {
  background: rgba(15, 108, 189, 0.10);
  border-color: rgba(15, 108, 189, 0.22);
  color: #0f3863;
}

/* AI / DX 系 */
.cases-tag.is-tag-ai,
.cases-tag[data-tag-group="ai"],
.cases-tag[href*="/tag/generative-ai/"],
.cases-tag[href*="/tag/ai-agent/"],
.cases-tag[href*="/tag/prompt/"],
.cases-tag[href*="/tag/automation/"],
.cases-tag[href*="/tag/llm/"],
.cases-tag[href*="/tag/rag/"],
.cases-tag[href*="/tag/chatgpt/"],
.cases-tag[href*="/tag/claude/"],
.cases-tag[href*="/tag/gemini/"],
.cases-tag[href*="/tag/copilot/"],
.cases-tag[href*="/tag/dx/"] {
  background: rgba(26, 53, 125, 0.10);
  border-color: rgba(26, 53, 125, 0.22);
  color: #1a357d;
}

/* 制度系 */
.cases-tag.is-tag-seido,
.cases-tag[data-tag-group="seido"],
.cases-tag[href*="/tag/seido/"],
.cases-tag[href*="/tag/kyufu/"],
.cases-tag[href*="/tag/education-benefit/"],
.cases-tag[href*="/tag/specialized-training-benefit/"],
.cases-tag[href*="/tag/general-training-benefit/"],
.cases-tag[href*="/tag/human-resource-grant/"],
.cases-tag[href*="/tag/hello-training/"] {
  background: rgba(156, 61, 61, 0.10);
  border-color: rgba(156, 61, 61, 0.22);
  color: #9c3d3d;
}

/* キャリア・個人学習 */
.cases-tag.is-tag-career,
.cases-tag[data-tag-group="career"],
.cases-tag[href*="/tag/career/"],
.cases-tag[href*="/tag/people/"],
.cases-tag[href*="/tag/reskilling/"],
.cases-tag[href*="/tag/education/"] {
  background: rgba(235, 90, 12, 0.10);
  border-color: rgba(235, 90, 12, 0.22);
  color: #b9470b;
}

/* 法人・実務活用 */
.cases-tag.is-tag-corporate,
.cases-tag[data-tag-group="corporate"],
.cases-tag[href*="/tag/hr/"],
.cases-tag[href*="/tag/marketing/"],
.cases-tag[href*="/tag/finance/"],
.cases-tag[href*="/tag/retail/"],
.cases-tag[href*="/tag/manufacturing/"],
.cases-tag[href*="/tag/usecase/"],
.cases-tag[href*="/tag/corporate/"] {
  background: rgba(0, 166, 146, 0.10);
  border-color: rgba(0, 166, 146, 0.22);
  color: #007c6d;
}

/* 箱ひげ先生 */
.cases-tag.is-tag-hakohige,
.cases-tag[data-tag-group="hakohige"],
.cases-tag[href*="/tag/hakohige-sensei/"] {
  background: rgba(244, 180, 0, 0.14);
  border-color: rgba(244, 180, 0, 0.24);
  color: #8a6800;
}

.cases-tag:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(20, 31, 56, 0.06);
}

/* ========================================
   section: new/popular card polish
======================================== */

.cases-new .cases-post-card__link,
.cases-popular .cases-post-card__link,
.cases-featured .cases-post-card__link {
  background: linear-gradient(180deg, #ffffff 0%, rgba(244, 242, 239, 0.35) 100%);
}

.cases-post-card__badge {
  background: linear-gradient(135deg, rgba(90, 78, 67, 0.96), rgba(122, 104, 88, 0.96));
  box-shadow: 0 3px 10px rgba(20, 31, 56, 0.10);
}

/* ========================================
   section: related service cards
======================================== */

.cases-service-card {
  position: relative;
  overflow: hidden;
}

.cases-service-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 5px;
  background: var(--service-accent, var(--cases-main));
}

.cases-service-card[href*="/excelai/"] {
  --service-accent: #37915e;
}

.cases-service-card[href*="/corporate/"] {
  --service-accent: #00a692;
}

.cases-service-card[href*="/personal/"] {
  --service-accent: #4C6280;
}

.cases-service-card[href*="/seido/"] {
  --service-accent: #9c3d3d;
}

.cases-service-card[href*="/courses/"] {
  --service-accent: #5F6E7A;
}

/* ========================================
   section: mobile tuning
======================================== */

@media (max-width: 640px) {
  .cases-series .cases-container,
  .cases-featured .cases-container,
  .cases-tags .cases-container,
  .cases-new .cases-container,
  .cases-popular .cases-container {
    padding: 20px;
    border-radius: 22px;
  }

  .cases-series-card::before {
    height: 6px;
  }
}
/* ========================================
   DataScience Lab
   cases.css finish
   白ベース / ヒーロー強化 / フラット化
======================================== */

/* ========================================
   section: root overwrite
======================================== */

.cases-page {
  --cases-bg: #f5f6f8;
  --cases-surface: #ffffff;
  --cases-surface-soft: #fcfcfd;
  --cases-text: #1c2430;
  --cases-text-soft: #5e6978;
  --cases-border: #e5e9ef;
  --cases-border-strong: #d6dde6;

  --cases-main: #7A6858;
  --cases-main-dark: #5A4E43;
  --cases-main-light: #F4F2EF;

  --cases-link: #0f6cbd;
  --cases-link-dark: #0f3863;

  --cases-shadow-sm: 0 4px 14px rgba(15, 24, 38, 0.04);
  --cases-shadow-md: 0 10px 26px rgba(15, 24, 38, 0.06);

  background: var(--cases-bg);
}

/* ========================================
   section: hero finish
   右側に画像を置ける前提
   ※ HTML側で .cases-hero__inner / __content / __visual を置けると最適
======================================== */

.cases-hero {
  padding: 56px 0 32px;
  background: #ffffff;
  border-bottom: 1px solid rgba(122, 104, 88, 0.10);
}

.cases-hero .cases-container {
  position: relative;
}

.cases-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
  gap: 32px;
  align-items: center;
}

.cases-hero__content {
  min-width: 0;
}

.cases-hero__visual {
  min-width: 0;
}

.cases-hero__visual-frame {
  overflow: hidden;
  border: 1px solid var(--cases-border);
  border-radius: 28px;
  background: #fff;
  box-shadow: var(--cases-shadow-sm);
}

.cases-hero__visual-frame img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.cases-hero__eyebrow {
  color: var(--cases-main-dark);
}

.cases-hero__title {
  margin-bottom: 14px;
  color: #3c332d;
  letter-spacing: -0.02em;
}

.cases-hero__lead {
  max-width: 760px;
  color: #465363;
}

.cases-hero__quick-links {
  margin-top: 24px;
}

.cases-hero__quick-links a {
  background: #fff;
  border: 1px solid #dad3cc;
  color: #4f453d;
  box-shadow: none;
}

.cases-hero__quick-links a:hover {
  background: #fff;
  border-color: #cfc4b8;
  transform: translateY(-1px);
}

/* HTML変更前の保険 */
.cases-hero .cases-container > .cases-hero__visual-frame {
  margin-top: 24px;
}

/* ========================================
   section: flat section panels
======================================== */

.cases-series .cases-container,
.cases-featured .cases-container,
.cases-tags .cases-container,
.cases-new .cases-container,
.cases-popular .cases-container {
  padding: 28px;
  border: 1px solid var(--cases-border);
  border-radius: 28px;
  background: #ffffff;
  box-shadow: none;
}

/* ========================================
   section: headings
======================================== */

.cases-section-heading h2 {
  border-left-width: 3px;
  color: #312b27;
}

.cases-section-heading p {
  color: var(--cases-text-soft);
}

/* ========================================
   section: series cards finish
======================================== */

.cases-series-card {
  border-color: var(--cases-border);
  background: #fff;
  box-shadow: none;
}

.cases-series-card:hover {
  box-shadow: var(--cases-shadow-sm);
}

.cases-series-card::before {
  height: 6px;
}

.cases-series-card__image-wrap {
  background: #f2f4f7;
}

.cases-series-card__body {
  background: #fff;
}

.cases-series-card__body h3 {
  margin-bottom: 8px;
}

.cases-series-card__body p {
  color: #556171;
}

/* ========================================
   section: tags finish
======================================== */

.cases-tag-list {
  gap: 10px;
}

.cases-tag {
  min-height: 36px;
  padding: 0 12px;
  border-width: 1px;
  border-style: solid;
  box-shadow: none;
  font-size: 13px;
}

.cases-tag:hover {
  transform: translateY(-1px);
  box-shadow: none;
}

/* neutral */
.cases-tag.is-tag-neutral {
  background: rgba(122, 104, 88, 0.08);
  border-color: rgba(122, 104, 88, 0.16);
  color: #5A4E43;
}

/* ========================================
   section: cards finish
======================================== */

.cases-post-card__link {
  border-color: var(--cases-border);
  box-shadow: none;
  background: #fff;
}

.cases-post-card__link:hover {
  border-color: #d2dae4;
  box-shadow: var(--cases-shadow-sm);
}

.cases-post-card__badge {
  background: #ffffff;
  color: #3b4a5e;
  border: 1px solid rgba(59, 74, 94, 0.12);
  box-shadow: none;
}

.cases-post-card.is-series-data-world .cases-post-card__badge {
  color: #0f3863;
  border-color: rgba(15, 108, 189, 0.18);
}

.cases-post-card.is-series-generative-ai-dx .cases-post-card__badge {
  color: #1a357d;
  border-color: rgba(26, 53, 125, 0.18);
}

.cases-post-card.is-series-reskilling .cases-post-card__badge {
  color: #9c3d3d;
  border-color: rgba(156, 61, 61, 0.18);
}

.cases-post-card.is-series-people .cases-post-card__badge {
  color: #b9470b;
  border-color: rgba(235, 90, 12, 0.18);
}

.cases-post-card.is-series-hakohige-sensei .cases-post-card__badge {
  color: #8a6800;
  border-color: rgba(244, 180, 0, 0.22);
}

/* ========================================
   section: related service cards finish
======================================== */

.cases-service-links {
  border-color: var(--cases-border);
  background: #fff;
  box-shadow: none;
}

.cases-service-card {
  border-color: var(--cases-border);
  background: #fff;
  box-shadow: none;
}

.cases-service-card:hover {
  box-shadow: var(--cases-shadow-sm);
}

.cases-service-card::before {
  height: 4px;
}

/* ========================================
   section: responsive
======================================== */

@media (max-width: 960px) {
  .cases-hero__inner {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .cases-series .cases-container,
  .cases-featured .cases-container,
  .cases-tags .cases-container,
  .cases-new .cases-container,
  .cases-popular .cases-container {
    padding: 20px;
    border-radius: 22px;
  }

  .cases-hero {
    padding: 44px 0 24px;
  }

  .cases-hero__visual-frame {
    border-radius: 22px;
  }
}
/* ========================================
   sidebar force color fix
   必ず article.css の一番最後に置く
======================================== */

/* データワールド / データ分析系 */
.cases-article-page.theme-ds .cases-sidebar-box__title::before {
  background: #0f6cbd !important;
}

.cases-article-page.theme-ds .cases-sidebar-service-card {
  background: #0f6cbd !important;
  color: #ffffff !important;
  border-color: #0f6cbd !important;
}

.cases-article-page.theme-ds .cases-sidebar-post-item:hover,
.cases-article-page.theme-ds .cases-sidebar-series-item:hover {
  background: rgba(15, 108, 189, 0.08) !important;
  border-color: rgba(15, 108, 189, 0.18) !important;
}

/* 生成AI / DX */
.cases-article-page.theme-ai .cases-sidebar-box__title::before {
  background: #1a357d !important;
}

.cases-article-page.theme-ai .cases-sidebar-service-card {
  background: #1a357d !important;
  color: #ffffff !important;
  border-color: #1a357d !important;
}

/* 制度 */
.cases-article-page.theme-seido .cases-sidebar-box__title::before {
  background: #9c3d3d !important;
}

.cases-article-page.theme-seido .cases-sidebar-service-card {
  background: #9c3d3d !important;
  color: #ffffff !important;
  border-color: #9c3d3d !important;
}

/* キャリア / People */
.cases-article-page.theme-career .cases-sidebar-box__title::before {
  background: #eb5a0c !important;
}

.cases-article-page.theme-career .cases-sidebar-service-card {
  background: #eb5a0c !important;
  color: #ffffff !important;
  border-color: #eb5a0c !important;
}

/* 箱ひげ先生 */
.cases-article-page.theme-hakohige .cases-sidebar-box__title::before {
  background: #8a6800 !important;
}

.cases-article-page.theme-hakohige .cases-sidebar-service-card {
  background: #8a6800 !important;
  color: #ffffff !important;
  border-color: #8a6800 !important;
}

/* 読み物 / social-tour */
.cases-article-page.theme-cases .cases-sidebar-box__title::before {
  background: #7A6858 !important;
}

.cases-article-page.theme-cases .cases-sidebar-service-card {
  background: #7A6858 !important;
  color: #ffffff !important;
  border-color: #7A6858 !important;
}