/* ========================================
   事例詳細ページ専用スタイル
   設計ソース: 旧 waltsu-case/ プロジェクトより統合済み
   - 名前空間: .case-*
   - フォント: Zen Kaku Gothic New + Lato（Google Fonts）
======================================== */
:root {
  --case-bg: #f3f3f3;
  --case-red: var(--color-cta);      /* =#C23219 共通トークン参照 */
  --case-blue: var(--color-primary); /* =#036EB8 共通トークン参照 */
  --case-blue-light: #2ea7e0;
  --case-blue-dark: #085898;
  --case-navy: #1b254d;
  --case-beige: rgba(246, 242, 231, 0.8);
  --case-lightblue: rgba(168, 223, 249, 0.75);
  --case-gray: #b7b7b7;
  --case-line: rgba(0, 0, 0, 0.1);
}

.case-detail {
  background: var(--case-bg);
  font-family: var(--font-jp);
  line-height: 1.6;
  color: #000;
}
.case-detail .lato { font-family: var(--font-en); }
/* 本文レイアウト下に余白を設け、直後の濃グレーCTAセクションと詰まらないようにする（両カラム＝stickyサイドバー含む） */
.case-detail__inner { padding-block: 22px 80px; }

/* dot pattern overlay（記事本体・担当者カード共通。事例の担当者カードの背景に合わせてドットで統一） */
.case-detail .dot { position: relative; }
.case-detail .dot > * { position: relative; z-index: 1; }
.case-detail .dot::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(#0a2540 0.9px, transparent 1px);
  background-position: top left;
  background-size: 9.75px 9.75px;
  opacity: .08;
  pointer-events: none;
  z-index: 0;
}

/* layout: main + sidebar — blog/sample と同じ「下端追従」型。
   aside を記事カラムと同じ高さに伸ばし、内側 __inner（box＋CTA）を
   ひとまとまりで追従させる（位置制御は sidebar.js） */
.case-layout {
  display: flex;
  gap: 30px;
  align-items: stretch;
}
.case-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.case-sidebar {
  width: 326px;
  flex-shrink: 0;
  position: relative;
  align-self: stretch;
}
.case-sidebar__inner {
  display: flex;
  flex-direction: column;
  gap: 30px;
  will-change: top;
}
@media (max-width: 1080px) {
  .case-layout { align-items: flex-start; }
  .case-sidebar__inner { gap: 24px; }
}

/* article card */
.case-article {
  background: rgba(255, 255, 255, .75);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 60px;
  padding: 34px 30px 20px; /* CTA下の余白を詰める（下 96→20） */
}

/* hero */
.case-hero {
  display: flex;
  gap: 30px;
  align-items: center;   /* 情報ボックスをサムネに対して上下中央揃え */
  width: 100%;
  max-width: 840px;
}
.case-hero__thumb {
  width: 360px;
  height: 235px;
  flex-shrink: 0;
  border-radius: 2px;
  overflow: hidden;
}
.case-hero__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.case-hero__info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.case-hero__title {
  font-size: clamp(20px, 5vw, 28px);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .03em;
  margin: 0;
}
.case-tags {
  display: flex;
  flex-direction: column;
  gap: 0;
  color: var(--case-blue-light);
  font-size: 14px;
  letter-spacing: .03em;
  line-height: 1.6;
}
.case-tags__row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.case-tag {
  display: inline-flex;
  gap: 6px;
}
.case-hero__date {
  color: var(--case-gray);
  font-size: 12px;
  letter-spacing: .03em;
  margin: 0;
}

/* section heading (beige) */
.case-head-beige {
  background: var(--case-beige);
  border-radius: 6px;
  padding: clamp(7px, 1.4vw, 8px) clamp(14px, 2.6vw, 20px);
  font-size: clamp(18px, 3.8vw, 24px); /* SP過大を回避（fluid） */
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .03em;
  width: 100%;
  max-width: 841px;
}
.case-sec {
  width: 100%;
  max-width: 841px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: flex-start;
}
/* ヒーロー直下（概要紹介）の上余白を詰める（記事gap 60px → 約36px） */
.case-hero + .case-sec { margin-top: -24px; }
/* 概要紹介・ご支援後の成果 配下のコンテンツも見出しテキスト位置（20px）に揃える */
.case-sec > .case-head-beige ~ * {
  margin-left: 20px;
}
.case-sec > .case-result { max-width: 820px; }

/* summary table（ブログ記事の表組デザイン準拠：行ラベル=ソフトブルー／値=白＋偶数行ゼブラ／全セル枠線） */
.case-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 795px; }
.case-summary-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 16px;
  line-height: 1.7;
}
.case-summary-table th,
.case-summary-table td {
  padding: 13px 16px;
  border: 1px solid var(--color-line);
  text-align: left;
  vertical-align: top;
  letter-spacing: .03em;
  font-weight: 400;
}
.case-summary-table th {
  width: 215px;
  background: var(--color-primary-soft);
  color: var(--color-ink);
  font-weight: 700;
  white-space: nowrap;
}
.case-summary-table tbody tr:nth-child(even) td { background: var(--color-bg-alt); }

/* bullet list (square) */
.case-list-square {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
}
.case-list-square li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  line-height: 1.8;
  letter-spacing: .03em;
}
.case-list-square li::before {
  content: "";
  width: 12px;
  height: 12px;
  background: var(--case-blue-dark);
  flex-shrink: 0;
}

.case-body-text {
  font-size: 16px;        /* 記事可読性ルール：本文16px */
  line-height: 2;         /* 行間2.0（参照: markezine / tnksanwa） */
  letter-spacing: .03em;
  width: 100%;
}
.case-body-text p { margin: 0; }
.case-body-text p + p { margin-top: 1.5em; }  /* 段落間 1.5em */

/* 太字（strong / b）にマーカー（blog/sample 準拠：下38%にオレンジ32%のハイライト） */
.case-detail .case-article strong,
.case-detail .case-article b {
  font-weight: 700;
  color: var(--color-ink);
  background: linear-gradient(transparent 62%, rgba(242, 157, 0, .32) 62%);
}

/* ============================================================
   記事パーツ（現状デザインに合わせて調整：青=case-blue / 赤=case-red / ベージュ=case-beige）
   1) 本文リンク  2) 本文画像＋キャプション  3) 囲みボックス  4) 引用（お客様の声）
============================================================ */

/* 1) 本文リンク（通常=ブルー下線／hover=濃ブルー／外部リンクはアイコン付与） */
.case-detail .case-body-text a,
.case-detail .case-box a,
.case-detail .case-quote a {
  color: var(--case-blue);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  transition: color .15s ease;
}
.case-detail .case-body-text a:hover,
.case-detail .case-box a:hover,
.case-detail .case-quote a:hover { color: var(--case-blue-dark); }
.case-detail .case-body-text a[target="_blank"]::after,
.case-detail .case-box a[target="_blank"]::after,
.case-detail .case-quote a[target="_blank"]::after {
  content: "";
  display: inline-block;
  width: .82em;
  height: .82em;
  margin-left: 3px;
  vertical-align: -.06em;
  background-color: currentColor;
  -webkit-mask: url(../../images/external-link.svg) center / contain no-repeat;
  mask: url(../../images/external-link.svg) center / contain no-repeat;
}

/* 2) 本文画像＋キャプション */
.case-figure {
  margin: 0;
  width: 100%;
  max-width: 840px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.case-figure img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
  border: 1px solid var(--case-line);
}
.case-figure figcaption {
  font-size: 13px;
  line-height: 1.6;
  letter-spacing: .03em;
  color: var(--case-gray);
  text-align: center;
}

/* 3) 囲みボックス（ポイント／注意／まとめ）：左アクセント罫線＋淡色背景＋見出し */
.case-box {
  width: 100%;
  max-width: 840px;
  border-radius: 4px;
  padding: 18px 22px;
  border-left: 4px solid var(--case-blue);
  background: var(--color-primary-soft);
}
.case-box__title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 6px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .03em;
  color: var(--case-blue);
}
.case-box__title::before {
  content: "";
  width: 13px;
  height: 13px;
  background: currentColor;
  flex-shrink: 0;
}
.case-box p {
  font-size: 16px;
  line-height: 1.9;
  letter-spacing: .03em;
  margin: 0;
}
.case-box p + p { margin-top: 1em; }
/* 注意（赤） */
.case-box--note { border-left-color: var(--case-red); background: #fdf1ee; }
.case-box--note .case-box__title { color: var(--case-red); }
/* まとめ（ネイビー×ベージュ） */
.case-box--summary { border-left-color: var(--case-navy); background: var(--case-beige); }
.case-box--summary .case-box__title { color: var(--case-navy); }

/* 4) 引用（お客様の声）：淡グレー背景＋引用符＋出典 */
.case-quote {
  width: 100%;
  max-width: 840px;
  margin: 0;
  position: relative;
  padding: 22px 26px 20px 56px;
  background: var(--color-bg-alt);
  border-radius: 6px;
}
.case-quote::before {
  content: "\201C";
  position: absolute;
  top: 6px;
  left: 16px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 52px;
  line-height: 1;
  color: var(--case-blue-light);
  opacity: .55;
}
.case-quote p {
  font-size: 16px;
  line-height: 1.9;
  letter-spacing: .03em;
  margin: 0;
  color: var(--color-ink);
}
.case-quote__cite {
  display: block;
  margin-top: 12px;
  font-size: 13px;
  letter-spacing: .03em;
  color: var(--case-gray);
  font-style: normal;
}
.case-quote__cite::before { content: "— "; }

.case-result {
  width: 100%;
  max-width: 840px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* table of contents */
.case-toc-wrap { width: 100%; max-width: 840px; }
.case-toc {
  background: #fff;
  border: 3px solid var(--case-gray);
  padding: 40px 60px;
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.case-toc__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.case-toc__head h2 {
  font-size: clamp(20px, 4.4vw, 28px); /* SP過大を回避（fluid） */
  font-weight: 400;
  letter-spacing: .03em;
  margin: 0;
}
.case-toc__close {
  background: #d9d9d9;
  font-size: 12px;
  letter-spacing: .03em;
  padding: 3px;
  min-width: 63px;
  height: 26px;
  border: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-family: inherit;
}
.case-toc__list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.case-toc__item {
  display: flex;
  align-items: center;
  gap: 16px;
}
.case-toc__num {
  color: var(--case-blue);
  font-size: 16px;
}
.case-toc__bar {
  width: 1px;
  height: 17px;
  background: #000;
  flex-shrink: 0;
}
.case-toc__ttl {
  font-weight: 700;
  font-size: 16px;
  letter-spacing: .03em;
  color: #000;
}
.case-toc__sub {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-left: 40px;
  margin-top: 8px;
}
.case-toc__sub .case-toc__ttl { font-size: 15px; }
.case-toc__dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #000;
  flex-shrink: 0;
}

/* H2 content section */
.case-content-sec {
  width: 100%;
  max-width: 840px;
  display: flex;
  flex-direction: column;
  gap: 32px;
  scroll-margin-top: 100px;
}
.case-h2 {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
}
.case-h2 h2 {
  color: var(--case-blue);
  font-size: clamp(20px, 4.8vw, 28px); /* SP過大を回避（fluid） */
  font-weight: 700;
  letter-spacing: .03em;
  line-height: 1.45;
  margin: 0;
}
.case-h2__line {
  height: 2px;
  background: #000;
  width: 100%;
}
.case-h3-box {
  background: var(--case-lightblue);
  border-radius: 4px;
  padding: clamp(11px, 2vw, 12px) clamp(14px, 2.6vw, 20px);
  min-height: clamp(46px, 9vw, 64px);
  display: flex;
  align-items: center;
  font-size: clamp(18px, 4vw, 24px); /* SP過大を回避（fluid） */
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .03em;
}
/* h3 配下の本文要素は、h3 のテキスト位置（padding-left: 20px）に揃えてインデント */
.case-content-sec .case-h3-box ~ .case-h4,
.case-content-sec .case-h3-box ~ .case-body-text,
.case-content-sec .case-h3-box ~ .case-list-square,
.case-content-sec .case-h3-box ~ .case-list-num {
  padding-left: 20px;
}
.case-h4 {
  display: flex;
  flex-direction: column;
  gap: 9px;
  width: 100%;
}
.case-h4 h4 {
  font-size: clamp(17px, 3.2vw, 20px); /* SP過大を回避（fluid） */
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .03em;
  margin: 0;
}
.case-h4__line {
  height: 1px;
  background: var(--case-blue);
  border-radius: 4px;
  width: 100%;
}
.case-list-num {
  display: flex;
  flex-direction: column;
  width: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
}
.case-list-num li {
  display: flex;
  align-items: center;
  gap: 10px;
}
.case-list-num .n {
  color: var(--case-navy);
  font-weight: 900;
  font-size: 20px;
  letter-spacing: .1em;
  min-width: 18px;
  text-align: center;
}
.case-list-num .t {
  font-size: 16px;
  line-height: 1.8;
  letter-spacing: .03em;
}

/* inline main CTA */
/* 記事下部CTA：装飾は common.css の .cta-rich / .case-cta-rich に集約（2026-08-14）。
   ここでは本文からの距離だけを指定する。 */
.case-cta-rich { margin: 100px 0 0; }

/* members */
.case-members {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
}
.case-sec-title {
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: 100%;
}
.case-sec-title h2 {
  color: var(--case-navy);
  font-size: clamp(20px, 3.4vw, 32px); /* SP過大を回避（fluid） */
  font-weight: 800;
  letter-spacing: -0.005em;
  line-height: 1.35;
  margin: 0;
}
.case-sec-title__line {
  position: relative;
  height: 2px;
  background: #d9d9d9;
  width: 100%;
}
.case-sec-title__line::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 2px;
  width: 160px;
  background: var(--case-navy);
}
/* 担当者：最新事例一覧(.case-side-case)に合わせ、枠・背景・パディングを外した
   クリーンな横並びリストに統一（サムネ角丸2px） */
.case-member {
  border: 0;
  border-radius: 0;
  background: none;
  padding: 0;
  display: flex;
  align-items: flex-start;   /* 画像・テキストを上揃えに */
  gap: 19px;
}
/* 各担当者の間に区切り線 */
.case-member + .case-member {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--case-line);
}
/* タイトルと1番上の担当者の間隔を広げる */
.case-sec-title + .case-member { margin-top: 32px; }
.case-member__photo {
  width: 210px;
  aspect-ratio: 1.6 / 1;         /* 素材ネイティブ比（1600×1000）に一致＝トリミングなし */
  flex-shrink: 0;
  border-radius: 2px;
  overflow: hidden;
}
.case-member__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.case-member__info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;                       /* 役職・名前・経歴の縦間隔 */
}
.case-member__role {
  font-size: 13px;
  opacity: .6;
}
.case-member__name {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  line-height: 1.2;
}
.case-member__name-jp {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: .03em;
}
.case-member__name-en {
  font-size: 13px;                /* ヨミ */
  font-weight: 600;
  letter-spacing: .03em;
  opacity: .7;
}
.case-member__desc {
  font-size: 14px;
  line-height: 1.8;
  opacity: .7;
  letter-spacing: .02em;
  margin: 0;
}

/* ===== sidebar ===== */
.case-side-box { background: #fff; padding: 10px; }
.case-side-block { padding: 13px 10px 10px; }
.case-side-head {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 16px;
  position: relative;
}
.case-side-arrows {
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px;
}
.case-side-head h3 {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .03em;
  margin: 0;
}
.case-side-head__line {
  height: 1px;
  background: var(--case-blue);
  border-radius: 4px;
}
.case-circle-arrow {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid var(--case-gray);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--case-gray);
  cursor: pointer;
  background: #fff;
}
.case-circle-arrow svg { width: 8px; height: 8px; }

.case-side-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.case-side-case {
  display: flex;
  gap: 19px;
  align-items: center;
  color: inherit;
  text-decoration: none;
}
.case-side-case__thumb {
  width: 112px;
  height: 73px;
  flex-shrink: 0;
  border-radius: 2px;
  overflow: hidden;
}
.case-side-case__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.case-side-case__info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.case-side-case__t {
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .03em;
}
.case-side-case__d {
  font-size: 12px;
  color: var(--case-gray);
}
.case-side-tags {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  color: var(--case-blue-light);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .03em;
}
.case-side-tags + .case-side-tags { margin-top: 8px; }
.case-side-tags-wrap {
  display: flex;
  flex-direction: column;
}

/* 右下CTA：blog/sample の .blog-side-cta と同デザイン（斜線テクスチャ・赤ボタン） */
.case-side-cta {
  display: block;
  position: relative;
  overflow: hidden;
  padding: clamp(24px, 2.6vw, 30px) clamp(20px, 2.2vw, 26px);
  border-radius: var(--radius-md);
  background: var(--color-bg-alt);
  border: 1px solid var(--color-line);
  text-align: center;
  text-decoration: none;
  color: inherit;
}
.case-side-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(-45deg, rgba(10, 37, 64, .035) 0 1px, transparent 1px 8px);
}
.case-side-cta > * { position: relative; z-index: 1; }
.case-side-cta__title {
  margin: 0 0 16px;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.5;
  color: var(--color-ink);
}
.case-side-cta__title .is-em { color: var(--color-cta); }
.case-side-cta__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 14px 16px;
  background: var(--color-cta);
  color: #fff;
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: .02em;
  box-shadow: 0 4px 0 var(--color-cta-dark);
  transition: transform .15s var(--ease), box-shadow .15s var(--ease), background-color .2s var(--ease);
}
.case-side-cta:hover .case-side-cta__btn {
  background: var(--color-cta-dark);
  transform: translateY(2px);
  box-shadow: 0 2px 0 var(--color-cta-dark);
}
.case-side-cta__arrow {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: #fff;
  color: var(--color-cta);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  flex: 0 0 auto;
}

/* ===== other cases ===== */
.case-other {
  padding: 60px 0;
  background: var(--case-bg);
}
.case-other .case-sec-title { margin-bottom: 50px; }
.case-other__grid {
  display: flex;
  gap: 45px;
}
.case-other__card {
  flex: 1;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}
.case-other__label-row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 27px;
  margin-bottom: -5px;
}
.case-other__label {
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--case-gray);
}
.case-circle-arrow--inline {
  position: absolute;
  top: 3px;
}
.case-other__label-row .case-circle-arrow--inline:first-child { left: 0; }
.case-other__label-row .case-circle-arrow--inline:last-child { right: 0; }

.case-other__img {
  height: 227px;
  border-radius: 2px;
  overflow: hidden;
  margin: 0 15px;
}
.case-other__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.case-other__ttl-box {
  background: #fff;
  padding: 10px 20px;
  margin-top: 0;
}
.case-other__ttl-inner {
  border: 1px solid #e1e1e1;
  padding: 8px 12px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: .02em;
  color: var(--case-navy);
}

/* ===== responsive ===== */
@media (max-width: 1080px) {
  .case-layout { flex-direction: column; }
  .case-main { width: 100%; min-width: 0; }
  .case-sidebar {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    position: static;
  }
}
@media (max-width: 768px) {
  /* サムネ下のテキスト群：上(サムネ→タイトル)を30→18pxに、内部(タグ⇔公開日ほか)を15→10pxに詰める */
  .case-hero { flex-direction: column; align-items: flex-start; gap: 18px; }
  .case-hero__thumb { width: 100%; height: auto; aspect-ratio: 360/235; }
  .case-hero__info { gap: 10px; }
  .case-hero + .case-sec { margin-top: -14px; }  /* テキスト群の下(概要紹介)の余白を36→約22pxに */
  /* SP余白：左右3%。上部はグレー枠（.case-detail地）を少し広めに見せる */
  .case-detail__inner { padding-inline: 3%; padding-block: 24px 80px; }
  .case-article { padding: 3% 3% 16px; gap: clamp(36px, 7vw, 48px); }
  .case-content-sec { gap: 24px; }
  .case-sec { gap: 16px; }
  .case-toc { padding: 20px; gap: 22px; }
  /* 担当者：最新事例一覧と同じ横並び＋横幅をカードに合わせる（左右20pxインセット） */
  .case-member { flex-direction: row; align-items: flex-start; text-align: left; gap: 14px; margin-inline: 20px; }
  .case-member__photo { width: 120px; }
  .case-member__info { gap: 2px; }   /* 役職・名前・経歴の縦間隔を詰める */
  .case-member__name-jp { font-size: 16px; }
  .case-member__role { font-size: 10px; line-height: 1.3; }
  .case-member__name-en { font-size: 10px; }
  .case-member__desc { font-size: 10px; line-height: 1.7; }
  .case-other__grid { flex-direction: column; }
  /* 表組：tablet幅でもラベル列を内容幅にして窮屈さを回避 */
  .case-summary-table th { width: auto; }

  /* SP: ネスト字下げを解除し、本文・表・リストを記事の左右マージンに揃える
     （参考: blog/sample のフラット段組。狭幅では字下げより左右対称の余白が読みやすい） */
  .case-sec > .case-head-beige ~ * { margin-left: 0; }
  .case-content-sec .case-h3-box ~ .case-h4,
  .case-content-sec .case-h3-box ~ .case-body-text,
  .case-content-sec .case-h3-box ~ .case-list-square,
  .case-content-sec .case-h3-box ~ .case-list-num { padding-left: 0; }

  /* 引用：SPでは左の引用符インデントを浅く（blockquote 準拠の落ち着いた余白に） */
  .case-quote { padding: 18px 20px 18px 44px; }
  .case-quote::before { font-size: 42px; left: 12px; }
  .case-box { padding: 16px 18px; }

  /* SP：サイドバー下部のCTA（PC右下で使うもの）は固定フッターCTAと重複するため非表示 */
  .case-side-cta { display: none; }
}

/* 狭幅：枠付き2カラム表のまま（ブログ準拠）。フォント・余白だけ詰める。
   収まらない場合は .case-table-scroll で横スクロール */
@media (max-width: 560px) {
  .case-summary-table { font-size: 14px; line-height: 1.7; }  /* 本文・リストと同じ14pxに統一 */
  .case-summary-table th,
  .case-summary-table td { padding: 11px 12px; }

  /* SP: 本文を縮小（参考: tnksanwa / GOLD THEME。PC16px→SP14px） */
  .case-body-text { font-size: 14px; line-height: 1.9; }
  .case-box p { font-size: 14px; }
  .case-list-square li { font-size: 14px; }
  .case-list-num .t { font-size: 14px; }
  .case-quote p { font-size: 14px; }
  .case-box__title { font-size: 16px; }
  /* SP: ヒーローの#タグを縮小（16px→13px） */
  .case-tags { font-size: 13px; }
}