/**
 * 解決事例ページ専用スタイル（統合・整理版）
 * - モバイルファースト
 * - 重複/競合の解消
 * - PC/スマホの役割分離を明確化
 */

/* =========================
   ベース
========================= */

#main_col {
    width: 1200px !important;
}

.case-studies-wrapper,
.case-studies-wrapper * {
  font-family: "Noto Sans JP","Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
}

.case-studies-wrapper {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

/* ヘッダー */
.page-header {
  background: #5BABE2;
  margin-bottom: 0px !important;
}

.page-description {
  color: #fff;
  font-size: 14px;
  margin: 0;
}

/* =========================
   統計ダッシュボード
========================= */
.case-studies-wrapper .stats-dashboard {
  /* モバイルは縦積み + 3列グリッド */
  display: flex;
  flex-direction: column;  /* 縦方向に配置 */
  gap: 15px;
  margin-bottom: 20px;
}

.case-studies-wrapper .stat-card {
  background: #fff;
  color: #2377DA;
  padding: 16px 10px 3px 10px;
  border-radius: 15px;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
.case-studies-wrapper .pricing-card {
  background: #fff;
  color: #2377DA;
  padding: 20px;
  border-radius: 15px;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.case-studies-wrapper .stat-number {
  font-size: 42px;
  font-weight: bold;
  margin-bottom: 0px;
  color: #2377DA;
  line-height: 1;
}

.case-studies-wrapper .stat-number .unit {
  font-size: 16px;
  font-weight: 700;
  padding-left: 5px;
}
.case-studies-wrapper .stat-label {
  font-size: 16px;
  background: #2377DA;
  color: #fff;
  padding: 5px 28px;
  border-radius: 16px;
  display: inline-block;
  margin-top: 5px;
  min-width: 85px;
  line-height: 1.1;
}

/* PC版用の注釈（カード内） */
.case-studies-wrapper .stat-note-outside {
  font-size:8px;
  color:#666;
  margin-top:10px;
  text-align:center;
}

/* モバイル版用の注釈　解決成功率 */
.case-studies-wrapper .stat-note-inside { 
  font-size: 8px; 
  color: #666; 
  margin-top: 4px; 
  margin-bottom: 4px; 
  text-align: center; 
  line-height: 1; 
}

/* モバイル版用の注釈 前年度相談実績の期間 */
.case-studies-wrapper .stat-note-inside-term { 
  font-size: 12px; 
  color: #666; 
  margin-top: 2px; 
  margin-bottom: 2px; 
  text-align: center; 
  line-height: 1; 
}

/* 表示/非表示の基本設定 */
.case-studies-wrapper .pc-only {
  display: block;
}

.case-studies-wrapper .mobile-only {
  display: none;
}

.case-studies-wrapper .stat-note { font-size: 10px; color:#666; margin-top:10px; text-align:left; padding-left:10px; }
.case-studies-wrapper .stat-card-wrapper { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; gap: 15px;}
.case-studies-wrapper .stat-note-outside-term { font-size:14px; color:#666; margin-top:10px; text-align:center; }
.case-studies-wrapper .pricing-underline {
  display:inline-block; border-bottom:1px solid #2377DA; padding-bottom:8px; min-width:180px; text-align:center;
}
/* 料金カード（新デザイン：給与○か月分） */
.case-studies-wrapper .pricing-card-wrapper { width: 100%; }
.case-studies-wrapper .pricing-item-single { 
  text-align: center;
}
.case-studies-wrapper .pricing-main-text { 
  font-size: 16px;
  background: #2377DA;
  color: #fff;
  padding: 5px 28px;
  border-radius: 16px;
  display: inline-block;
  margin-top: 10px;
  min-width: 85px;
  line-height: 1.1;
}

.case-studies-wrapper .pricing-salary-months {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 5px;
  margin-bottom: 0px;
}
.case-studies-wrapper .salary-label {
  font-size: 14px;
  color: #333;
  font-weight: normal;
}
.case-studies-wrapper .salary-number {
  font-size: 76px;
  font-weight: bold;
  color: #2377DA;
  line-height: 1;
}
.case-studies-wrapper .salary-unit {
  font-size: 14px;
  color: #333;
  font-weight: normal;
}

.case-studies-wrapper .stat-annotation {
  font-size: 11px;
  color: #fff;
  padding: 0px;
  text-align: center;
  vertical-align: middle;
}

.case-studies-wrapper .pricing-note {
  font-size: 8px;
  color: #666;
  line-height: 1.5;
  padding: 0 10px;
  text-align: center;
  margin-top:10px;
}
/* 平均解決金額: 左上 */
.case-studies-wrapper .stat-card-amount {
  grid-column: 1;
  grid-row: 1;
}

/* 解決成功率: 右上 */
.case-studies-wrapper .stat-card-success {
  grid-column: 2;
  grid-row: 1;
}

/* 平均解決期間: 左下 */
.case-studies-wrapper .stat-card-period {
  grid-column: 1;
  grid-row: 2;
}

/* 前期相談実績: 右下（モバイル） */
.case-studies-wrapper .stat-card-consultation {
  grid-column: 2;
  grid-row: 2;
}

.case-studies-top-message {
    padding: 10px 0px 30px;
    text-align: center;
}

.top-message-text {
    color: #ffffff;
    font-size: 14px;
    font-weight: 100;
    margin: 0;
    line-height: 1.5;
    letter-spacing: 0.05em;
}

/* =========================
   フィルター（Selectはスタイルのみ）
========================= */
.case-studies-wrapper .filters-container {
  background: #fff;
  padding: 20px;
  border-radius: 15px;
  margin-bottom: 30px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

/* grid版に統一 */
.case-studies-wrapper .filters-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 15px;
}
.case-studies-wrapper .filter-select {
  width: 100%;
  padding: 10px 15px;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s;
  min-width: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.case-studies-wrapper .filter-select:hover,
.case-studies-wrapper .filter-select:focus {
  border-color:#185FAD;
  outline:none;
  box-shadow: 0 0 0 3px rgba(102,126,234,0.1);
}

/* ボタン式フィルター（JS側で実行する想定） */
.case-studies-wrapper .filter-buttons {
  display:flex; gap:15px; margin-top:20px; justify-content:center;
}
.case-studies-wrapper .filter-btn {
  padding:12px 30px; border-radius:25px; font-size:15px; font-weight:bold; cursor:pointer; transition:.3s; border:none; min-width:150px;
}
.case-studies-wrapper .filter-btn-primary { background:#2377DA; color:#fff; }
.case-studies-wrapper .filter-btn-primary:hover { background:#185FAD; transform:translateY(-2px); box-shadow:0 5px 15px rgba(35,119,218,.3); }
.case-studies-wrapper .filter-btn-secondary { background:#666; color:#fff; }
.case-studies-wrapper .filter-btn-secondary:hover { background:#555; transform:translateY(-2px); box-shadow:0 5px 15px rgba(0,0,0,.2); }

/* 結果件数のUIは filter-result-count に統一 */
.case-studies-wrapper .filter-result-count {
  color:#fff; background:#2377DA; text-align:center;
  margin-top:20px; font-size:14px; font-weight:bold; padding:12px; border-radius:10px;
}
.case-studies-wrapper .filter-result-count.no-results { background:#DA544D; }

/* 旧 .result-count はデフォルト非表示（jQuery生成対策） */
.result-count:not(.filter-result-count) { display:none !important; }

/* =========================
   リスト（カード/行）
========================= */
.case-studies-wrapper .cases-list {
  background:#fff; border-radius:15px; overflow:visible; box-shadow:0 2px 10px rgba(0,0,0,.05); padding:0px;
}

/* モバイル：カード型 */
.case-studies-wrapper .case-item {
  display:block;
  padding:15px;
  background:#F0F0F0;
  margin-bottom:12px;
  border-radius:8px;
  border:none;
  transition:background .3s;
}
.case-studies-wrapper .case-item:hover { background:#e5e5e5; }
.case-studies-wrapper .case-item:last-child { margin-bottom:0; }
.case-studies-wrapper .case-header-info { display:flex; align-items:center; gap:10px; margin-bottom:15px; }
.case-studies-wrapper .case-icon {
  width:45px; height:45px; background:#f0f4ff; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:22px; flex-shrink:0;
}
.case-studies-wrapper .case-title-group { flex:1; }
.case-studies-wrapper .case-profile { font-size:13px; color:#333; font-weight:bold; margin-bottom:5px; }
.case-studies-wrapper .case-result-type { font-size:12px; padding:4px 10px; border-radius:6px; display:inline-block; font-weight: 600; margin-top:5px;}
.case-studies-wrapper .new-badge { background:#DA544D; color:#fff; padding:3px 10px; border-radius:12px; font-size:11px; font-weight:bold; white-space:nowrap; align-items: center;}
.case-studies-wrapper .case-amount-period { display:flex; align-items:center; gap:10px; margin-bottom:15px; }
.case-studies-wrapper .case-amount-display .amount-value,
.case-studies-wrapper .amount-value { font-size:24px; font-weight:bold; color:#2377DA; line-height:1; display:inline-flex; align-items: center;}
.case-studies-wrapper .period-badge { background:#2377DA; color:#fff; padding:6px 14px; border-radius:0px; font-size:12px; font-weight:600; white-space:nowrap; line-height:1; display:inline-flex; align-items: center;}
.case-studies-wrapper .case-description-full { font-size:13px; line-height:1.6; color:#666; }

/* 争点バッジ */
.case-studies-wrapper .reason-badge { display:inline-block; padding:5px 12px; border-radius:15px; font-size:12px; font-weight:600; }
.case-studies-wrapper .reason-badge.validity { background:#e3f2fd; color:#1976d2; }
.case-studies-wrapper .reason-badge.existence { background:#fce4ec; color:#c2185b; }
.case-studies-wrapper .reason-badge.procedure { background:#fff3e0; color:#f57c00; }
.case-studies-wrapper .reason-badge.encouragement { background:#e8f5e9; color:#388e3c; }
.case-studies-wrapper .reason-badge.default { background:#F0F0F0; color:#666; }

/* ページネーション */
.case-studies-wrapper .pagination { display:flex; justify-content:center; gap:10px; margin-top:30px; }
.case-studies-wrapper .pagination-btn {
  padding:8px 15px; border:1px solid #ddd; background:#fff; border-radius:8px; cursor:pointer; transition:.3s; font-size:14px;
}
.case-studies-wrapper .pagination-btn:hover:not(:disabled),
.case-studies-wrapper .pagination-btn.active { background:#185FAD; color:#fff; border-color:#185FAD; }
.case-studies-wrapper .pagination-btn:disabled { opacity:.5; cursor:not-allowed; }
.case-studies-wrapper .pagination-info { padding:8px; color:#666; }
.case-studies-wrapper .pagination-notice { text-align:center; padding:10px; background:#FFF9E6; border-radius:5px; margin-top:10px; }

/* フィルタで除外された要素 */
.case-studies-wrapper .case-item.filtered-out,
.case-studies-wrapper .case-item.filtered-hidden { display:none !important; }

/* 更新情報 */
.case-studies-wrapper .update-info { text-align:center; margin-top:20px; font-size:12px; color:#fff; }


/* =========================
   解決結果タイプの色分け
========================= */
/* 示談（任意交渉） - 青系 */
.case-studies-wrapper .case-item[data-result*="示談"] .case-result-type,
.case-studies-wrapper .case-item[data-result*="任意交渉"] .case-result-type {
  background: #E3F2FD;
  color: #1565C0;
  border: 1px solid #90CAF9;
}

/* 和解（裁判手続後） - 緑系 */
.case-studies-wrapper .case-item[data-result*="和解"] .case-result-type,
.case-studies-wrapper .case-item[data-result*="裁判手続後"] .case-result-type {
  background: #E8F5E9;
  color: #2E7D32;
  border: 1px solid #A5D6A7;
}

/* 審判 - 紫系 */
.case-studies-wrapper .case-item[data-result="審判"] .case-result-type {
  background: #F3E5F5;
  color: #6A1B9A;
  border: 1px solid #CE93D8;
}

/* 判決 - オレンジ系 */
.case-studies-wrapper .case-item[data-result="判決"] .case-result-type {
  background: #FFF3E0;
  color: #E65100;
  border: 1px solid #FFB74D;
}

/* その他請求撤回、取下げ等 - グレー系 */
.case-studies-wrapper .case-item[data-result*="その他"] .case-result-type,
.case-studies-wrapper .case-item[data-result*="請求撤回"] .case-result-type,
.case-studies-wrapper .case-item[data-result*="取下げ"] .case-result-type {
  background: #ECEFF1;
  color: #455A64;
  border: 1px solid #B0BEC5;
}

/* 辞任・解任（表示されないが念のため） - 赤系 */
.case-studies-wrapper .case-item[data-result*="辞任"] .case-result-type,
.case-studies-wrapper .case-item[data-result*="解任"] .case-result-type {
  background: #FFEBEE;
  color: #C62828;
  border: 1px solid #EF9A9A;
}

/* デフォルト（その他のケース） */
.case-studies-wrapper .case-result-type {
  background: #F5F5F5;
  color: #666;
  border: 1px solid #E0E0E0;
}

/* =========================
   ブレークポイント
========================= */

/* ～480pxの微調整 */
@media (max-width:480px) {
  .case-studies-wrapper .stat-number { font-size:36px; }
  .case-studies-wrapper .salary-number { font-size:60px; }
  .case-studies-wrapper .salary-label,
  .case-studies-wrapper .salary-unit { font-size:14px; }
  .case-studies-wrapper .case-item { padding:12px; }
  .case-studies-wrapper .case-icon { width:40px; height:40px; font-size:20px; }
  .case-studies-wrapper .case-profile { font-size:12px; }
  .case-studies-wrapper .case-amount-display .amount-value { font-size:22px; }
  .case-studies-wrapper .period-badge { font-size:11px; padding:5px 12px; }
}

/* タブレット（～1024px）：フィルタ行を2列へ */
@media (max-width:1024px) {
  .case-studies-wrapper .filters-row { grid-template-columns: 1fr 1fr; }
}

/* PC（769px～） */
@media (min-width:769px) {
  /* PC専用の表示/非表示 */
  .case-studies-wrapper .pc-only { display:block; }
  .case-studies-wrapper .mobile-only { display:none !important; }

  /* 統計ダッシュボード：PCはblock＋カード3列 */
  .case-studies-wrapper .stats-dashboard { display:block; margin-bottom:40px; }
  .case-studies-wrapper .pricing-card { max-width:600px; margin:0px auto 15px auto; padding:10px 20px 15px; }
  /* PCは1行3列のグリッド */
  .case-studies-wrapper .stats-cards-wrapper {
    display: grid; 
    grid-template-columns: 1fr 1fr 1fr 1fr; /* 4列 */
    grid-template-rows: auto; /* 1行 */
    gap: 15px;
  }

  .case-studies-wrapper .stat-card {
    background: #fff;
    color: #2377DA;
    padding: 20px;
    border-radius: 15px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
  }

  .case-studies-wrapper .stat-number {
    font-size: 42px;
    font-weight: bold;
    margin-bottom: 5px;
    color: #2377DA;
  } 
  
  /* PC用のグリッド配置をリセット */
  .case-studies-wrapper .stat-card-amount {
    grid-column: 1;
    grid-row: 1;
  }
  
  .case-studies-wrapper .stat-card-success {
    grid-column: 2; 
    grid-row: 1;
  }
  
  .case-studies-wrapper .stat-card-period {
    grid-column: 3;
    grid-row: 1;
  }

  .case-studies-wrapper .stat-card-consultation {
    grid-column: 4;  /* PCでは右端 */
    grid-row: 1;
  }
  /* リスト：PCは表形式 */
  .case-studies-wrapper .list-header {
    display:grid;
    grid-template-columns: 2.5fr 1fr 1fr 2fr;
    gap:20px;
    background:#f8f9fa;
    padding:15px 20px;
    font-weight:bold;
    font-size:14px;
    color:#666;
    border-bottom:2px solid #666;
    margin-bottom:15px;
    text-align:center;
  }

  .case-studies-wrapper .case-item {
    display:grid;
    grid-template-columns: 2.5fr 1fr 1fr 2fr;
    gap:20px;
    padding:20px;
    border-bottom:1px solid #999;
    background:#fff;         /* PCは白ベース */
    border-radius:0;         /* 表行風に */
    margin-bottom:0;         /* 末尾余白なし */
    cursor:pointer;
    align-items: center;
  }
  .case-studies-wrapper .case-item:hover { background:#f8f9fa; }

  /* 案件情報列 */
  .case-studies-wrapper .case-main { display:flex; flex-direction:column; gap:10px; }
  .case-studies-wrapper .case-header-info { display:flex; align-items:center; gap:15px; margin-bottom:0; }
  .case-studies-wrapper .case-icon { width:40px; height:40px; font-size:20px; }
  .case-studies-wrapper .case-industry { font-weight:bold; color:#333; font-size:15px; margin-bottom:8px; }
  .case-studies-wrapper .case-profile { font-size:12px; color:#666; font-weight:normal; margin:0; }
  .case-studies-wrapper .case-result-type { margin-top:8px; }

  /* 金額・期間列 */
  .case-studies-wrapper .case-amount,
  .case-studies-wrapper .case-period { text-align:center; }
  .case-studies-wrapper .amount-value,
  .case-studies-wrapper .period-value { font-size:20px; font-weight:bold; color:#333; }

  /* 概要列（折り畳み解除） */
  .case-studies-wrapper .case-summary { padding:0 10px; }
  .case-studies-wrapper .case-summary-text {
    font-size:13px; line-height:1.6; color:#666;
    display:block !important; overflow:visible !important; text-overflow:clip !important; white-space:normal !important;
    -webkit-line-clamp:unset !important; -webkit-box-orient:unset !important;
  }

  /* ページ上部紹介文 */
  .case-studies-top-message {
    padding: 10px 0px 30px;
    text-align: center;
  }
  .top-message-text {
    color: #666;
    font-size: 20px;
  }

  /* 更新情報 */
  .case-studies-wrapper .update-info { text-align:center; margin-top:20px; font-size:12px; color:#333; }


  /* フィルタ行：PCは4列 */
  .case-studies-wrapper .filters-row { grid-template-columns: repeat(4, 1fr); }
}

/* スマホ専用表示切替（補足） */
@media (max-width:768px) {
  .clearfix {
    padding: 0 !important;
  }
  .case-studies-wrapper .mobile-only { display:block; }
  .case-studies-wrapper .pc-only { display:none !important; }

  /* スマホ時の背景トーン統一 */
  body, .case-studies-wrapper { background:#30B8ED; }
  .case-studies-wrapper .cases-list { margin:0px; border-radius:10px; padding:20px;}
  .case-studies-wrapper .list-header { display:none; }

  /* スマホ時の注釈を白文字に */
  .case-studies-wrapper .stat-note-outside { font-size:9px; color:#fff; margin-top:3px; padding-left:5px; line-height:1.3; }

  /* スマホ時のボタン縦積み */
  .case-studies-wrapper .filter-buttons { flex-direction:column; align-items:stretch; }
  .case-studies-wrapper .filter-btn { width:100%; min-width:auto; }

 /* 2×2グリッドを維持（既に上で定義済み） */
  .case-studies-wrapper .stats-cards-wrapper {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: auto auto !important;
    gap: 15px !important;
  }

  .case-studies-wrapper .stat-label {
    font-size: 13px;
  }

  .case-studies-wrapper .pricing-main-text { 
    font-size: 13px;
  }

  /* ページ上部紹介文 */
  .case-studies-top-message {
    padding: 10px 0px 30px;
    text-align: center;
  }
  .top-message-text {
    font-size: 14px !important;
  }

}