/* ============================================
   事例ページ 新デザイン（v2_new）専用CSS
   - .case-v2 名前空間で既存CSSと衝突させない
   - モック mock_v2/css/style.css + responsive.css を移植
   ============================================ */

.case-v2 {
  --cv2-navy: #1E3566;
  --cv2-navy-dark: #14264A;
  --cv2-blue: #245AA6;
  --cv2-blue-light: #E8F0F9;
  --cv2-gold: #C4A464;
  --cv2-cream: #F7F3E9;
  --cv2-bg-light: #F5F7FA;
  --cv2-bg-gray: #F0F2F5;
  --cv2-white: #FFFFFF;
  --cv2-text: #333333;
  --cv2-text-muted: #666666;
  --cv2-text-light: #999999;
  --cv2-border: #E5E9EF;
  --cv2-border-light: #EEEEEE;
  --cv2-dark: #1A1A1A;
  --cv2-font-jp: 'Noto Sans JP', -apple-system, 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'メイリオ', Meiryo, sans-serif;
  --cv2-container: 1200px;
  --cv2-shadow-sm: 0 2px 4px rgba(0,0,0,0.05);
  --cv2-shadow-md: 0 4px 12px rgba(0,0,0,0.08);
  --cv2-radius-sm: 4px;
  --cv2-radius-md: 8px;

  font-family: var(--cv2-font-jp);
  color: var(--cv2-text);
  background: var(--cv2-white);
  font-size: 14px;
  /* hiddenだと祖先がスクロールコンテナ化してサイドバーのstickyが死ぬ。clipはstickyと共存できる */
  overflow-x: clip;
}

/* スコープ付きリセット（:where で詳細度0） */
.case-v2 :where(h1, h2, h3, h4, p, ul, ol, li, dl, dt, dd, figure, table, th, td) {
  margin: 0;
  padding: 0;
}
.case-v2 :where(ul, ol) { list-style: none; }
.case-v2 :where(img) { max-width: 100%; height: auto; }
.case-v2 :where(a) { text-decoration: none; }
.case-v2 :where(button) {
  border: none;
  background: none;
  cursor: pointer;
  font-family: inherit;
  padding: 0;
}

.case-v2 .inner {
  max-width: var(--cv2-container);
  margin: 0 auto;
  padding: 0 20px;
}

/* ============ Breadcrumb ============ */
.case-v2 .cv2-breadcrumb {
  padding: 12px 0;
  background: var(--cv2-white);
  border-bottom: 1px solid var(--cv2-border-light);
}
.case-v2 .cv2-breadcrumb ol {
  display: flex;
  gap: 6px;
  font-size: 11px;
  color: var(--cv2-text-muted);
  flex-wrap: wrap;
}
.case-v2 .cv2-breadcrumb li:not(:last-child)::after {
  content: " > ";
  margin-left: 6px;
}
.case-v2 .cv2-breadcrumb a { color: var(--cv2-blue); }

/* ============ Page Title ============ */
.case-v2 .page-title-block { padding: 30px 0 20px; }
.case-v2 .case-tag {
  display: inline-block;
  background: var(--cv2-blue);
  color: #fff;
  padding: 4px 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  margin-bottom: 16px;
}
.case-v2 .page-title-block h1 {
  font-size: 26px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--cv2-text);
  margin-bottom: 12px;
}
.case-v2 .case-meta {
  font-size: 12px;
  color: var(--cv2-text-muted);
  letter-spacing: 0.05em;
}

/* ============ Content Wrapper (Grid) ============ */
.case-v2 .content-wrapper .inner {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 40px;
  padding-top: 20px;
  padding-bottom: 60px;
}
.case-v2 .main-column { min-width: 0; }

/* ============ FV Gallery ============ */
.case-v2 .fv-gallery { margin-bottom: 40px; }
.case-v2 .fv-main {
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
  border-radius: var(--cv2-radius-md);
  background: var(--cv2-bg-gray);
}
.case-v2 .fv-slides {
  position: relative;
  width: 100%;
  height: 100%;
}
.case-v2 .fv-slide {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}
.case-v2 .fv-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.case-v2 .fv-slide.active { opacity: 1; }
.case-v2 .fv-counter {
  position: absolute;
  bottom: 12px;
  right: 12px;
  background: rgba(0,0,0,0.6);
  color: #fff;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 500;
}
.case-v2 .fv-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,0.9);
  font-size: 24px;
  color: var(--cv2-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}
.case-v2 .fv-arrow:hover { background: #fff; }
.case-v2 .fv-arrow.prev { left: 12px; }
.case-v2 .fv-arrow.next { right: 12px; }
.case-v2 .fv-thumbs {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  padding-bottom: 4px;
}
.case-v2 .fv-thumb {
  flex-shrink: 0;
  width: 130px;
  aspect-ratio: 4/3;
  border-radius: var(--cv2-radius-sm);
  cursor: pointer;
  transition: opacity 0.2s, transform 0.2s;
  opacity: 0.6;
  scroll-snap-align: start;
  border: 3px solid transparent;
  background-size: cover;
  background-position: center;
}
.case-v2 .fv-thumb:hover { opacity: 0.85; }
.case-v2 .fv-thumb.active {
  opacity: 1;
  border-color: var(--cv2-blue);
}

/* ============ Customer Quote ============
   2026-09-24 タスク2（Figma node 5204:981 / 5129:2882 実測）
   セクション背景は白／写真は丸型（PC 122x123・SP 79x79）／
   テキスト側の左に 1.134px の青い縦線 */
.case-v2 .customer-quote {
  display: flex;
  gap: 20px;
  align-items: center;
  background: #fff;
  border: none;
  border-radius: 0;
  padding: 0;
  margin-bottom: 40px;
}
.case-v2 .quote-avatar {
  width: 122px;
  height: 123px;
  border-radius: 50%;
  overflow: hidden;
  background: #F5F5F5;
  flex-shrink: 0;
}
.case-v2 .quote-avatar img,
.case-v2 .quote-avatar .quote-silhouette {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 50%;
}
.case-v2 .quote-body {
  flex: 1;
  min-width: 0;
  border-left: 1.134px solid #0063CE;
  padding-left: 20px;
}
.case-v2 .quote-text {
  font-size: 18px; /* 2026-10-09: 文字サイズ拡大 */
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.28px;
  color: #181818;
  margin-bottom: 8px;
}
.case-v2 .quote-mark {
  width: 20px;
  height: 17.7px;
  display: inline-block;
  vertical-align: middle;
  margin-right: 4px;
}
.case-v2 .quote-meta {
  font-size: 13px; /* 2026-10-09: 文字サイズ拡大 */
  line-height: 1.5;
  color: #6B6B6B;
}

/* ============ Section Heading ============ */
.case-v2 .section-heading {
  text-align: center;
  margin-bottom: 32px;
}
.case-v2 .section-heading .eyebrow {
  display: block;
  font-size: 12px;
  color: var(--cv2-blue);
  letter-spacing: 0.15em;
  font-weight: 500;
  margin-bottom: 8px;
}
.case-v2 .section-heading h2 {
  font-size: 24px;
  font-weight: 700;
  color: var(--cv2-text);
  line-height: 1.4;
}
.case-v2 .section-heading .section-desc {
  font-size: 14px; /* 2026-10-09: 文字サイズ拡大 */
  color: var(--cv2-text-muted);
  margin-top: 8px;
}

/* ============ Case Overview ============ */
/* 2026-09-24 タスク3: セクション全体の背景を #F4F9FF に（Figmaレンダーの画素サンプリング）。
   ※上下左右の内側余白はFigmaから取れなかったため、既存セクションと同じ 24px 20px を踏襲 */
.case-v2 .case-overview {
  margin-bottom: 50px;
  background: #F4F9FF;
  padding: 24px 20px;
}

/* A-3: 概要メイン写真（大きく1枚） */
.case-v2 .overview-main-image {
  margin: 0 0 24px;
  border-radius: var(--cv2-radius-md);
  overflow: hidden;
  background: var(--cv2-bg-gray);
}
.case-v2 .overview-main-image img {
  display: block;
  width: 100%;
  height: auto;
}
/* A-3: 概要リード本文（複数段落） */
.case-v2 .overview-lead {
  margin-bottom: 24px;
  font-size: 16px; /* 2026-10-09: 既存ページの本文サイズ(16px)に統一 */
  line-height: 1.9;
  color: var(--cv2-text);
}
.case-v2 .overview-lead > *:last-child { margin-bottom: 0; }
.case-v2 .overview-lead p { margin-bottom: 1.2em; }
.case-v2 .overview-lead strong { font-weight: 700; }
.case-v2 .overview-lead a { color: var(--cv2-blue); text-decoration: underline; }
.case-v2 .overview-lead ul,
.case-v2 .overview-lead ol { margin: 0 0 1.2em 1.4em; }
.case-v2 .overview-lead li { margin-bottom: 0.4em; list-style: inherit; }
.case-v2 .overview-lead ul { list-style: disc; }
.case-v2 .overview-lead ol { list-style: decimal; }

/* 2026-09-24 タスク1: スペック6項目パネル（Figma node 5129:2920 実測）
   パネル padding:20px 40px / 項目間 gap:40px / 各項目 width:80px・gap:10px */
.case-v2 .overview-grid {
  display: grid;
  /* 項目数が6未満でも中央に詰めて並べる（1項目=80px固定） */
  /* 2026-10-09 E-11: PCは項目数に関わらず1行固定（折り返し禁止） */
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  justify-content: stretch;
  gap: 16px;
  background: #fff;
  border: 1px solid #E9E9E9;
  padding: 20px 40px;
  border-radius: 4px;
}
.case-v2 .overview-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  width: auto;
  min-width: 0;
}
/* 2026-10-09 E-1: スペック帯のアイコンは削除（出力停止）。.ov-icon系のスタイルも撤去 */
.case-v2 .ov-label {
  font-size: 13px; /* 2026-10-09: 文字サイズ拡大 */
  line-height: 1.6;
  color: #0078F9;
}
.case-v2 .ov-value {
  font-size: 16px; /* 2026-10-09: 文字サイズ拡大 */
  line-height: 1.7;
  font-weight: 700;
  color: #181818;
}
/* 総費用のみ: 数字18px ＋ 単位12px・#0063CE・太字 */
.case-v2 .ov-value.highlight {
  color: #0063CE;
  font-weight: 700;
  line-height: 30.6px;
}
.case-v2 .ov-value-num { font-size: 20px; } /* 2026-10-09: 拡大 */
.case-v2 .ov-value-unit { font-size: 13px; }

/* ============ Customer Voice ============
   2026-09-24 タスク4（Figma node 5184:1142 実測）
   セクション背景 #F4F9FF ／ カードは白・左ボーダー4px #0063CE・角丸10px
   （指示書は「青の枠線付き」だがFigmaは左ボーダーのみ → Figmaを採用） */
.case-v2 .customer-voice {
  margin-bottom: 50px;
  background: #F4F9FF;
  padding: 24px 20px;
}
.case-v2 .qa-list { display: flex; flex-direction: column; gap: 12px; }
.case-v2 .qa-item {
  background: #fff;
  border-left: 4px solid #0063CE;
  border-radius: 10px;
  padding: 20px 36px 20px 28px;
}
/* A-7: お客様の声をアコーディオン化（<details open>・JS不要）。開閉アイコンは − / ＋ */
.case-v2 .qa-acc > summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  list-style: none;
}
.case-v2 .qa-acc > summary::-webkit-details-marker { display: none; }
.case-v2 .qa-acc > summary::after {
  content: "\FF0B"; /* ＋（閉じている時） */
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  line-height: 24px;
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  color: #0063CE;
  border-radius: 50%;
  background: #F4F9FF;
  transition: background 0.2s;
}
.case-v2 .qa-acc[open] > summary::after { content: "\2212"; /* −（開いている時） */ }
.case-v2 .qa-acc > summary:hover::after { background: var(--cv2-blue-light); }
.case-v2 .qa-question {
  font-size: 16px;
  font-weight: 700;
  color: #0063CE;
  line-height: 22.1px;
  letter-spacing: 0.65px;
  margin: 0;
}
.case-v2 .qa-acc[open] .qa-question { margin-bottom: 10px; }
/* 3〜4文の長文でも崩れないよう wpautop の段落に行間・余白を持たせる */
.case-v2 .qa-answer {
  font-size: 16px; /* 2026-10-09: 本文16px統一 */
  line-height: 1.8;
  color: #181818;
  overflow-wrap: break-word;
}
.case-v2 .qa-answer p { margin-bottom: 1em; }
.case-v2 .qa-answer > *:last-child { margin-bottom: 0; }

/* ============ Staff Message ============
   2026-09-24 タスク4: 背景 #F4F9FF ／ 白カード
   2026-10-09 E-2: デザインPDF（事例ページ_修正版.pdf）準拠へ変更。
   全周の青枠1px・角丸／左=丸写真＋名前・役職（横並び）／右=「」青見出し＋罫線＋本文 */
.case-v2 .staff-message {
  margin-bottom: 50px;
  background: #F4F9FF;
  padding: 24px 20px;
}
.case-v2 .staff-msg-card {
  background: #fff;
  border: 1px solid #0063CE;
  border-radius: 10px;
  padding: 32px 36px;
  display: flex;
  align-items: flex-start;
  gap: 40px;
}
.case-v2 .staff-msg-left {
  flex: 0 0 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.case-v2 .staff-avatar {
  width: 150px;
  height: 150px;
  background: linear-gradient(135deg, #E5E9EF, #C5CCD8);
  background-size: cover;
  background-position: center;
  color: var(--cv2-navy);
  font-weight: 700;
  font-size: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  flex-shrink: 0;
}
.case-v2 .staff-info {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}
.case-v2 .staff-info .staff-name { font-size: 16px; font-weight: 700; color: #181818; }
.case-v2 .staff-info .staff-role { font-size: 12px; color: var(--cv2-text-muted); }
.case-v2 .staff-msg-main { flex: 1; min-width: 0; }
/* 見出しは「」付きの青文字（「」はテンプレート側で付与）＋下に細罫線 */
.case-v2 .staff-msg-headline {
  background: none;
  padding: 0 0 14px;
  border-radius: 0;
  border-bottom: 1px solid var(--cv2-border);
  font-weight: 700;
  color: #0063CE;
  font-size: 18px;
  line-height: 1.5;
  letter-spacing: 0.65px;
  margin-bottom: 16px;
}
.case-v2 .staff-msg-body {
  font-size: 16px; /* 2026-10-09: 本文16px統一 */
  line-height: 1.8;
  color: #181818;
}

/* ============ Article Banner ============ */
.case-v2 .article-banner {
  display: block;
  margin: 32px 0;
  border-radius: var(--cv2-radius-md);
  overflow: hidden;
  transition: transform 0.2s;
}
.case-v2 .article-banner:hover { transform: translateY(-2px); }
.case-v2 .article-banner img {
  width: 100%;
  height: auto;
  display: block;
}
.case-v2 .banner-sp { display: none; }

/* ============ Cost Breakdown ============ */
.case-v2 .cost-breakdown { margin-bottom: 40px; }
.case-v2 .cost-table-wrap {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  border-radius: var(--cv2-radius-md);
}
.case-v2 .cost-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--cv2-border);
  border-radius: var(--cv2-radius-md);
  overflow: hidden;
  table-layout: auto;
}
.case-v2 .cost-table thead th {
  background: var(--cv2-blue-light);
  color: var(--cv2-blue);
  font-size: 12px;
  font-weight: 700;
  padding: 12px 16px;
  text-align: center;
  letter-spacing: 0.05em;
}
.case-v2 .cost-table tbody td {
  padding: 14px 16px;
  border-top: 1px solid var(--cv2-border-light);
  font-size: 13px;
  text-align: center;
}
.case-v2 .cost-table tbody td:first-child {
  text-align: left;
  color: var(--cv2-text);
}
.case-v2 .cost-table tbody td:last-child {
  color: var(--cv2-text);
  font-weight: 500;
}
.case-v2 .cost-table .detail-col {
  color: var(--cv2-text-muted);
  font-size: 12px;
}
.case-v2 .total-row td {
  background: var(--cv2-navy);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  padding: 16px !important;
  vertical-align: middle;
}
.case-v2 .total-row .total-label { text-align: left !important; }
.case-v2 .total-amount {
  font-size: 20px !important;
  text-align: right !important;
  color: #fff !important;
  white-space: nowrap;
}
.case-v2 .cost-note {
  font-size: 10px;
  color: var(--cv2-text-muted);
  text-align: right;
  margin-top: 8px;
}

/* ============ Case Detail (Before/After) ============ */
.case-v2 .case-detail { margin-top: 60px; }
.case-v2 .case-detail .section-heading { margin-bottom: 40px; }
.case-v2 .detail-block { margin-bottom: 50px; }
.case-v2 .detail-block h3 {
  font-size: 18px;
  font-weight: 700;
  color: var(--cv2-text);
  padding-bottom: 8px;
  border-bottom: 2px solid var(--cv2-blue);
  display: inline-block;
  margin-bottom: 12px;
}
/* 2026-10-09 E-6: アコーディオン（A-6）を廃止し「2行＋続きを読む」方式へ。
   本文は全文DOM内在・JSが2行を超える場合のみ .is-clamped とボタンを付与する */
.case-v2 .detail-body.is-clamped {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 8px;
}
.case-v2 .detail-readmore {
  display: inline-block;
  margin: 0 0 20px;
  padding: 0;
  background: none;
  border: none;
  color: #0078F9;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.case-v2 .detail-readmore:hover { text-decoration: underline; }
/* E-10: 本文が省略されている間は写真類も隠す */
.case-v2 .detail-extra.is-hidden { display: none; }
.case-v2 .detail-caption {
  font-size: 16px; /* 2026-10-09: 本文16px統一 */
  line-height: 1.7;
  color: var(--cv2-text);
  margin-bottom: 20px;
}
/* A-4: 事例詳細の本文（複数段落） */
.case-v2 .detail-body {
  font-size: 16px; /* 2026-10-09: 本文16px統一 */
  line-height: 1.9;
  color: var(--cv2-text);
  margin-bottom: 20px;
}
.case-v2 .detail-body p { margin-bottom: 1.2em; }
.case-v2 .detail-body > *:last-child { margin-bottom: 0; }
.case-v2 .detail-body strong { font-weight: 700; }
.case-v2 .detail-body a { color: var(--cv2-blue); text-decoration: underline; }
.case-v2 .detail-body ul,
.case-v2 .detail-body ol { margin: 0 0 1.2em 1.4em; }
.case-v2 .detail-body ul { list-style: disc; }
.case-v2 .detail-body ol { list-style: decimal; }
.case-v2 .detail-body li { margin-bottom: 0.4em; }
.case-v2 .ba-pair {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 20px;
  align-items: center;
  margin-bottom: 16px;
  min-width: 0;
}
.case-v2 .ba-pair > * { min-width: 0; }
.case-v2 .ba-photo {
  aspect-ratio: 4/3;
  border-radius: var(--cv2-radius-sm);
  position: relative;
  background-color: var(--cv2-bg-gray);
  background-size: cover;
  background-position: center;
}
.case-v2 .ba-label {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--cv2-navy);
  color: #fff;
  padding: 4px 12px;
  font-size: 11px;
  font-weight: 700;
  border-radius: var(--cv2-radius-sm);
}
.case-v2 .ba-label.after { background: var(--cv2-blue); }
.case-v2 .ba-arrow {
  font-size: 24px;
  color: var(--cv2-navy);
  font-weight: bold;
}
.case-v2 .detail-photos-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.case-v2 .detail-photo {
  aspect-ratio: 4/3;
  border-radius: var(--cv2-radius-sm);
  background-color: var(--cv2-bg-gray);
  background-size: cover;
  background-position: center;
}

/* ============ Sidebar（PC専用・sticky） ============ */
.case-v2 .cv2-sidebar {
  position: relative;
  width: 300px;
}
.case-v2 .cv2-sidebar-inner {
  /* FVと同じ位置から表示され、スクロール中は固定、
     content-wrapper の終了（related-cases 直前）で固定解除される */
  position: sticky;
  top: 100px;
  display: block;
  width: 300px;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--cv2-border) transparent;
}
.case-v2 .cv2-sidebar-inner > * { margin-bottom: 20px; }
.case-v2 .cv2-sidebar-inner > *:last-child { margin-bottom: 0; }
.case-v2 .cv2-sidebar-inner::-webkit-scrollbar { width: 6px; }
.case-v2 .cv2-sidebar-inner::-webkit-scrollbar-track { background: transparent; }
.case-v2 .cv2-sidebar-inner::-webkit-scrollbar-thumb { background: var(--cv2-border); border-radius: 3px; }
.case-v2 .cv2-sidebar-inner::-webkit-scrollbar-thumb:hover { background: var(--cv2-text-light); }
.case-v2 .sidebar-cta {
  display: block;
  width: 100%;
  border-radius: var(--cv2-radius-md);
  overflow: hidden;
  transition: transform 0.2s;
}
.case-v2 .sidebar-cta:hover { transform: translateY(-2px); }
.case-v2 .sidebar-cta img {
  width: 100%;
  height: auto;
  display: block;
}

/* ============ Filter（サイドバー／SP共通） ============ */
.case-v2 .side-filter {
  border: 1px solid var(--cv2-border);
  border-radius: var(--cv2-radius-md);
  padding: 16px;
  background: var(--cv2-white);
}
.case-v2 .side-filter h3 {
  font-size: 13px;
  font-weight: 700;
  color: var(--cv2-navy);
  padding-bottom: 10px;
  border-bottom: 2px solid var(--cv2-blue);
  margin-bottom: 12px;
}
.case-v2 .side-filter ul li a {
  display: block;
  font-size: 12px;
  color: var(--cv2-text);
  padding: 8px 0;
  border-bottom: 1px solid var(--cv2-border-light);
  transition: color 0.2s;
}
.case-v2 .side-filter ul li:last-child a { border-bottom: none; }
.case-v2 .side-filter ul li a:hover { color: var(--cv2-blue); }

/* SP/タブレット用フィルター（PCでは非表示） */
.case-v2 .sp-filters { display: none; }

/* ============ Related Cases ============ */
.case-v2 .related-cases {
  background: var(--cv2-bg-light);
  padding: 60px 0;
}
/* Figmaの正: PCは3件（4件目は非表示）／SPは2列×2行の4件。取得は4件で共通 */
.case-v2 .related-grid > *:nth-child(4) { display: none; }

.case-v2 .related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
/* 2026-09-24 タスク6（Figma node 5129:3042 実測） */
.case-v2 .related-card {
  background: #fff;
  border: 1px solid #D9D9D9;
  border-radius: 10px;
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s;
  display: flex;
  flex-direction: column;
}
.case-v2 .related-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--cv2-shadow-md);
}
.case-v2 .related-photo {
  aspect-ratio: 246/164;
  background-color: #F4F9FF;
  background-size: cover;
  background-position: center;
}
.case-v2 .related-tags {
  display: flex;
  gap: 6px;
  padding: 12px 16px 0;
  flex-wrap: wrap;
}
.case-v2 .related-tags .tag {
  background: #0063CE;
  color: #fff;
  height: 21px;
  padding: 0 8px;
  border-radius: 9999px;
  font-size: 10px;
  font-weight: 700;
  line-height: 17px;
  display: inline-flex;
  align-items: center;
}
.case-v2 .related-title {
  padding: 8px 16px;
  font-size: 13px;
  line-height: 19.5px;
  font-weight: 700;
  color: #181818;
  flex: 1;
}
/* B-2: 区切り線＋左下に面積・右下に金額。値が無いカードでも高さと位置を揃える */
.case-v2 .related-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  min-height: 24px;
  padding: 8px 16px 16px;
  border-top: 1px solid #D9D9D9;
  font-size: 12px;
}
.case-v2 .related-area { color: #6B6B6B; font-size: 12px; line-height: 20.4px; }
.case-v2 .related-cost { color: #0063CE; font-weight: 700; font-size: 12px; line-height: 20.4px; }
/* 2026-10-09 E-3: 値の前に項目ラベル（グレー小さめ・値の色/太さは現行維持） */
.case-v2 .related-meta .rm-label {
  font-size: 10px;
  font-weight: 400;
  color: #9AA3AF;
  margin-right: 4px;
}

/* ============ STAFF PROFILE ============
   2026-10-09 E-4: タスク5の枠線カード化・写真正方形化を撤回（指示書E-4・Figma不採用）。
   見た目は現行本番の .staff-contents（style.css）に委ねるが、
   2026-10-09追加指示: テキスト列の幅を広げ写真との余白を詰める＋本文16px */
.case-v2 .v2-staff-profile { padding: 60px 0; }
.case-v2 .v2-staff-profile .staff-contents__text-wrap {
  max-width: none;
  flex: 1;
  min-width: 0;
  margin-left: 40px;
}
.case-v2 .v2-staff-profile .staff-contents__text {
  font-size: 16px;
  line-height: 1.9;
}

/* ============================================
   Responsive (Tablet: 768-1023 / SP: -767)
   ============================================ */

@media (max-width: 1023px) {
  .case-v2 .content-wrapper .inner {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .case-v2 .cv2-sidebar { display: none; }
  /* C-3: SP/タブレットでは「建物種類から探す」を出さない（PCサイドバーのみ）。
     .sp-filters の出力自体を case-v2.php から外したため、表示ルールも置かない。 */
  .case-v2 .related-grid { grid-template-columns: repeat(2, 1fr); }
  /* タブレット: 3列×2行。項目幅は固定80pxをやめて等分にする（パネル仕様はそのまま） */
  .case-v2 .overview-grid { grid-template-columns: repeat(3, 1fr); gap: 20px 12px; padding: 20px; }
  .case-v2 .overview-item { width: auto; min-width: 0; }
}

@media (max-width: 767px) {
  .case-v2 { font-size: 13px; }
  .case-v2 .inner { padding: 0 16px; }

  .case-v2 .cv2-breadcrumb ol { font-size: 10px; flex-wrap: nowrap; overflow-x: auto; white-space: nowrap; }
  .case-v2 .cv2-breadcrumb li { flex-shrink: 0; }

  .case-v2 .page-title-block { padding: 20px 0 12px; }
  .case-v2 .page-title-block h1 { font-size: 18px; }
  .case-v2 .case-tag { font-size: 10px; padding: 3px 10px; }

  .case-v2 .content-wrapper .inner { padding-top: 12px; padding-bottom: 40px; }

  .case-v2 .fv-main { border-radius: var(--cv2-radius-sm); }
  .case-v2 .fv-arrow { display: none; }
  /* 2026-09-24 タスク7: 第1回C-4を撤回し、SPでもPCと同じサムネイル帯を表示する
     （横スクロール可・選択中は .fv-thumb.active の枠表示・カウンター表示は維持） */
  .case-v2 .fv-thumbs { display: flex; }
  .case-v2 .fv-thumb { width: 96px; }
  .case-v2 .fv-counter {
    display: block;
    font-size: 11px;
    padding: 4px 12px;
    bottom: 10px;
    right: 10px;
  }

  /* タスク2: SPも横並びのまま（テキスト側の青い縦線が成立する形を維持）。写真は79x79 */
  .case-v2 .customer-quote { gap: 12px; padding: 0; }
  .case-v2 .quote-avatar { width: 79px; height: 79px; }
  .case-v2 .quote-body { padding-left: 12px; }
  .case-v2 .quote-mark { width: 11.3px; height: 10px; }
  .case-v2 .quote-text { font-size: 16px; }
  .case-v2 .quote-meta { font-size: 12px; }

  .case-v2 .section-heading h2 { font-size: 20px; }

  /* C-1: SPのスペック表は3列×2行（建物タイプ／築年数／面積 ＋ エリア／工期／総費用） */
  .case-v2 .overview-grid {
    grid-auto-flow: row;
    grid-template-columns: repeat(3, 1fr);
    padding: 20px 12px;
    gap: 20px 8px;
    max-width: 100%;
  }
  .case-v2 .ov-label { font-size: 11px; line-height: 1.5; }
  .case-v2 .ov-value { font-size: 14px; text-align: center; line-height: 1.3; word-break: break-all; }
  .case-v2 .ov-value.highlight { line-height: 1.3; }
  .case-v2 .ov-value-num { font-size: 16px; }
  .case-v2 .ov-value-unit { font-size: 11px; }
  /* タスク1: SPは既存の3列×2行を維持（項目幅は等分） */
  .case-v2 .overview-item { min-width: 0; width: auto; gap: 6px; }
  .case-v2 .case-overview { padding: 20px 12px; }
  .case-v2 .customer-voice,
  .case-v2 .staff-message { padding: 20px 12px; }

  .case-v2 .overview-main-image { margin-bottom: 16px; }
  .case-v2 .overview-lead { font-size: 14px; line-height: 1.8; margin-bottom: 20px; }
  .case-v2 .qa-answer,
  .case-v2 .staff-msg-body,
  .case-v2 .detail-caption { font-size: 14px; }

  /* タスク4: 文字サイズ・色はFigma実測値（16px/15px）をSPでも据え置き、余白のみ詰める */
  .case-v2 .qa-item { padding: 16px 24px 16px 16px; }
  .case-v2 .qa-acc > summary::after { width: 22px; height: 22px; line-height: 22px; font-size: 14px; }

  .case-v2 .staff-avatar { width: 44px; height: 44px; font-size: 16px; }

  .case-v2 .article-banner { margin: 20px 0; }
  .case-v2 .banner-pc { display: none; }
  .case-v2 .banner-sp { display: block; }

  /* 費用の内訳: SPは詳細列を非表示 */
  .case-v2 .cost-table .detail-col { display: none; }
  .case-v2 .cost-table thead th,
  .case-v2 .cost-table tbody td { padding: 12px 8px; font-size: 12px; }
  .case-v2 .total-row td { font-size: 14px !important; padding: 14px 12px !important; }
  .case-v2 .total-amount { font-size: 18px !important; }

  .case-v2 .detail-block h3 { font-size: 15px; }
  .case-v2 .detail-body { font-size: 14px; line-height: 1.85; }
  /* C-2: SPでもBefore/Afterは横並び（矢印は「→」のまま回転させない） */
  .case-v2 .ba-pair {
    grid-template-columns: 1fr auto 1fr;
    gap: 8px;
    align-items: center;
    justify-items: stretch;
  }
  .case-v2 .ba-pair .ba-arrow {
    transform: none;
    font-size: 18px;
    justify-self: center;
  }
  .case-v2 .ba-photo { width: 100%; }
  .case-v2 .ba-label { top: 6px; left: 6px; padding: 2px 6px; font-size: 9px; }
  .case-v2 .detail-photos-3 {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  .case-v2 .detail-photo { width: 100%; }

  .case-v2 .related-cases { padding: 40px 0; }
  /* C-5: SPは横2×縦2（計4件）のグリッド */
  .case-v2 .related-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  /* SPは4件表示（2列×2行）＝Figma「SP事例ページ_修正版」準拠 */
  .case-v2 .related-grid > *:nth-child(4) { display: block; }
  /* タスク6: 画像比率・タグ・面積／金額はFigma実測値をSPでも使う（左右16pxの内側余白も維持） */
  .case-v2 .related-photo { aspect-ratio: 246/164; }
  .case-v2 .related-tags { padding: 8px 16px 0; gap: 4px; }
  .case-v2 .related-title { padding: 6px 16px; }
  .case-v2 .related-meta { padding: 6px 16px 12px; }

  .case-v2 .v2-staff-profile { padding: 40px 0; }
  .case-v2 .v2-staff-profile .staff-contents__text-wrap { margin-left: 0; }
  /* 2026-10-09 E-2: SPはメッセージカードを縦積みに */
  .case-v2 .staff-msg-card { flex-direction: column; gap: 16px; padding: 20px 16px; }
  .case-v2 .staff-msg-left { flex: none; width: 100%; gap: 10px; }
  .case-v2 .staff-avatar { width: 96px; height: 96px; font-size: 24px; }
  .case-v2 .staff-msg-headline { font-size: 16px; }
  /* タスク5: SPは縦積み（既存挙動）。カード枠・写真1:1・写真エリア背景はPCと同じ */
}

/* ============ SP: fixedヘッダー分のオフセット（2026-08-31 高田様FB①） ============
   既存テーマは max-width:768px でヘッダーが position:fixed(80px) になる。
   v1は .breadcrumb--mt の margin-top:100px で回避しているため同値を適用する */
@media screen and (max-width: 768px) {
  .case-v2 { margin-top: 100px; }
}