/* ===============================
   CS 一覧テーブル
=============================== */

.cs-table-wrap {
  max-width: 1200px;
  margin: 60px auto;
  padding: 0 20px;
}

.cs-table-title {
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 30px;
  color: #40aca7;
  text-align: center;
}

/* ===============================
   テーブルコンテナ
=============================== */

.cs-table-container {
  background-color: #fff;
  border-radius: 10px;
  overflow-x: auto; /* 768px以上で横スクロールを許容しつつ、中身を極力詰める */
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  border: 1px solid #e5e7eb;
}

/* ===============================
   テーブル本体
=============================== */

.cs-table {
  width: 100%;
  border-collapse: collapse;
  /* 最小幅を下げて945px以下でも耐えられるように調整 */
  min-width: 700px; 
  table-layout: fixed; /* カラム幅を固定制御しやすくする */
}

.cs-table th, .cs-table td {
  word-break: break-all; /* はみ出し防止 */
}

/* カラム幅の比率設定（PC用） */
.cs-table th:nth-child(1) { width: 15%; }
.cs-table th:nth-child(2) { width: 18%; }
.cs-table th:nth-child(3) { width: auto; }
.cs-table th:nth-child(4) { width: 100px; }

.cs-table thead {
  background-color: #f5f7fa;
}

.cs-table th {
  padding: 10px 20px;
  text-align: left;
  font-size: 0.92rem;
  font-weight: 700;
  color: #555;
  border-bottom: 1px solid #e5e7eb;
}

.cs-table td {
  padding: 20px;
  /* ウィンドウ幅に合わせてフォントサイズを微調整 */
  font-size: clamp(0.75rem, 1vw, 0.82rem);
  color: #333;
  border-bottom: 1px solid #e5e7eb;
  vertical-align: middle;
  font-weight: 600;
}

.cs-table tbody tr:hover {
  background-color: #dcdcdc; /* ホバー色を薄く調整 */
}

/* タイトルリンク */
.cs-table td a {
  color: #40aca7;
  /* text-decoration: none; */
  font-weight: 600;
  display: block;
  line-height: 1.4;
  /* ウィンドウ幅に合わせて文字サイズを可変に */
  font-size: clamp(0.8rem, 1.1vw, 0.9rem);
  text-decoration: underline;
}

.cs-table a:hover {
  text-decoration: underline;
}

/* 権限バッジ */
.badge {
  display: inline-block;
  padding: 2px 11px;
  font-size: 0.75rem;
  font-weight: 700;
  border-radius: 999px;
  white-space: nowrap;
}

.badge-user { background-color: #e0f2fe; color: #0369a1; }
.badge-admin { background-color: #fee2e2; color: #991b1b; }

/* ===============================
   PCではカテゴリ・機能を非表示
=============================== */
/* PCでは「中身だけ」非表示にする */
.pc-hide {
  opacity: 0;
  pointer-events: none;
}

/* ===============================
   モバイル用（カード形式）修正版
=============================== */
@media (max-width: 768px) {
  /* 1. 外側のコンテナ設定：横スクロールを抑制し、余白をリセット */
  .cs-table-wrap {
    padding: 0 15px; /* 画面端との余白 */
    margin: 30px auto;
  }

  .cs-table-container {
    border: none;
    box-shadow: none;
    background: transparent;
    overflow: visible; /* 見切れ防止のためvisibleに */
  }

  .pc-hide {
    opacity: 1;
    visibility: visible;
    display: inline-block;
    pointer-events: auto;
  }

  /* 2. テーブル構造の解除：幅を100%に固定し、min-widthを上書き */
  .cs-table {
    display: block;
    width: 100% !important;
    min-width: 0 !important; /* PC用の900pxなどの設定を強制解除 */
    border-collapse: separate;
  }

  .cs-table tbody,
  .cs-table tr,
  .cs-table td {
    display: block;
    width: 100% !important;
    box-sizing: border-box; /* パディングを含めた幅計算にする */
  }

  .cs-table thead {
    display: none;
  }

  /* 3. カードのデザイン設定 */
  .cs-table tbody tr {
    background: #fff;
    margin-bottom: 25px;
    padding: 15px;
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
    border: 2px solid #e5e7eb;
    position: relative;
    overflow: hidden;
    /* 見切れ対策：幅を自動計算 */
    float: none;
    clear: both;
  }

  /* 各セルの基本調整 */
  .cs-table td {
    border: none !important;
    padding: 0 !important;
    margin-bottom: 8px;
    text-align: left;
  }

  /* 4. 重複テキストの表示設定（pc-hiddenクラスを使用する場合） */
  .pc-hidden {
    visibility: visible !important;
    display: inline-block !important;
  }

  /* 5. カテゴリ・機能ラベルのスタイル */
  .cs-table td:nth-child(1),
  .cs-table td:nth-child(2) {
    display: inline-block;
    width: auto !important;
    padding: 3px 10px !important;
    margin-right: 5px;
    background-color: #40aca7;
    color: #fff;
    border-radius: 4px;
    font-size: 0.7rem;
    line-height: 1.4;
  }

  /* タイトル：右側にバッジ用の余白を確保 */
  .cs-table td:nth-child(3) {
    margin: 15px 0 5px;
    padding-top: 15px !important;
    padding-right: 65px !important; /* バッジとの重なり防止 */
    border-top: 1px solid #f0f0f0 !important;
  }

  .cs-table td:nth-child(3) a {
    color: #333;
    /* font-size: clamp(0.95rem, 4vw, 1.05rem);  */
    font-weight: 700;
    line-height: 1.5;
    text-decoration: underline;
    display: block;
  }

  /* 6. 権限バッジの配置（見切れ防止） */
  .cs-table td:last-child {
    position: absolute;
    top: 15px;
    right: 12px; /* カード右端から少し内側に配置 */
    width: auto !important;
    margin: 0;
    padding: 0 !important;
  }

  .badge {
    padding: 2px 8px;
    font-size: 0.7rem;
    font-weight: 800;
    white-space: nowrap;
    border-radius: 999px;
    display: inline-block;
  }
}