/* ==========================================================================
   ir_governance.css
   ガバナンスページ専用のテーブルスタイル
   （スキルマトリクス / 選定理由 / ガバナンス機能 の3表）

   ・接頭辞 irg_ は「ir_governance ページ専用クラス」であることを示す
   ・3表は「border-collapse: separate + 1列目 sticky 固定」という同じ仕組みなので
     共通の土台 .irg_table にまとめ、各表は差分だけをモディファイアで指定する
   ========================================================================== */


/* --- 横スクロール用ラッパー ------------------------------------------------ */
.irg_scroll {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}


/* ==========================================================================
   irg_table : 3表共通の土台
   - sticky と罫線を両立させるため border-collapse: separate を採用
   - 各セルは「右線・下線」だけ持ち、外枠の左辺・上辺だけ補う（罫線は常に1本）
   - 1列目は sticky で固定。含みブロックがテーブル全体なので全スクロール域で有効
   ========================================================================== */
.irg_table {
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  width: 100%;
  font-size: 14px;
  line-height: 1.5;
}

/* セル共通：右線・下線。padding は既定 10px 15px（必要な表だけ上書き） */
.irg_table__th,
.irg_table__td {
  border-right: 1px solid #999;
  border-bottom: 1px solid #999;
  padding: 10px 15px;
  vertical-align: middle;
  box-sizing: border-box;
}

/* 外枠の左辺・上辺を補う */
.irg_table__row > :first-child {
  border-left: 1px solid #999;
}
.irg_table__head .irg_table__row:first-child > * {
  border-top: 1px solid #999;
}

/* 見出しセル：中央・太字・薄グレー背景（背景は sticky 時の透け防止も兼ねる） */
.irg_table__th {
  font-weight: bold;
  text-align: center;
  background-color: #f5f5f5;
}

/* 左寄せモディファイア */
.irg_table__th--left,
.irg_table__td--left {
  text-align: left;
}

/* 1列目を左に固定（3表共通） */
.irg_table__row > :first-child {
  position: sticky;
  left: 0;
  z-index: 2;
}


/* ==========================================================================
   irg_table--skill : スキルマトリクス（役員 × 専門性）
   ========================================================================== */
.irg_table--skill {
  min-width: 1380px;
}

/* 列幅（colgroup 経由） */
.irg_table--skill .irg_col--category { width: 150px; }
.irg_table--skill .irg_col--detail   { width: 240px; }
.irg_table--skill .irg_col--member   { width: 90px;  }

/* この表だけ padding を詰め、中央寄せ・改行許可にする */
.irg_table--skill .irg_table__th,
.irg_table--skill .irg_table__td {
  padding: 10px 6px;
  text-align: center;
  word-break: break-all;
}

/* 見出しは白背景・折り返さない */
.irg_table--skill .irg_table__th {
  background-color: #fff;
  white-space: nowrap;
}

/* 小さめ見出し（役職セル） */
.irg_table--skill .irg_table__th--sm {
  font-size: 11px;
  white-space: nowrap;
}

/* thead 最下行の下を太線で締める */
.irg_table--skill .irg_table__head .irg_table__row:last-child .irg_table__th {
  border-bottom: 2px solid #333;
}

/* 2列目（詳細列）も固定。1列目幅 150px の右隣に置く */
.irg_table--skill tbody .irg_table__row > :nth-child(2) {
  position: sticky;
  left: 150px;
  z-index: 2;
  background-color: #fff;   /* td なので背景を明示して透けを防ぐ */
}

/* ストライプ（偶数行）。固定列にも色を載せて透けを防ぐ */
.irg_table--skill.irg_table--striped tbody .irg_table__row:nth-child(even) > * {
  background-color: #fdf2f2;
}

/* スマホ：詳細列の固定だけ解除（1列目のみ固定） */
@media screen and (max-width: 768px) {
  .irg_table--skill tbody .irg_table__row > :nth-child(2) {
    position: static;
    left: auto;
    z-index: auto;
  }
}

/* さらに狭い画面：thead の氏名・役職も固定解除し、役員列と一緒にスクロール */
@media screen and (max-width: 599px) {
  .irg_table--skill .irg_table__head .irg_table__row > :first-child {
    position: static;
    left: auto;
    z-index: auto;
  }
}


/* ==========================================================================
   irg_table--reason : 専門性の選定理由・評価基準（3列）
   padding・背景・1列目固定はすべて共通土台のまま。差分は幅と min-width だけ
   ========================================================================== */
.irg_table--reason {
  min-width: 860px;
}
.irg_table--reason .irg_table__row > :first-child  { width: 170px; }
.irg_table--reason .irg_table__row > :nth-child(2) { width: 340px; }
/* 3列目は残り幅 */


/* ==========================================================================
   irg_table--function : ガバナンス体制の機能（4列）
   ========================================================================== */
.irg_table--function {
  min-width: 960px;
}
.irg_table--function .irg_table__row > :first-child  { width: 200px; }
.irg_table--function .irg_table__row > :nth-child(2) { width: 180px; }
.irg_table--function .irg_table__row > :nth-child(4) { width: 220px; }
/* 3列目（概要）は残り幅 */

/* この表だけ padding をやや広めに */
.irg_table--function .irg_table__th,
.irg_table--function .irg_table__td {
  padding: 12px 12px;
}


/* ==========================================================================
   ユーティリティ（このページで使用）
   ========================================================================== */
.u_mb0  { margin-bottom: 0    !important; }
.u_mb10 { margin-bottom: 10px !important; }
.u_mb40 { margin-bottom: 40px !important; }
.u_mt40 { margin-top: 40px !important; }
.u_mt_10 { margin-top: 10px !important; }
.u_ml20 { margin-left: 20px !important; }
.u_w20 { width: 20% !important; }
.u_w40 { width: 40% !important; }
.u_fz_sm { font-size: 0.85em !important; }
.u_fz_11 { font-size: 11px !important; }
.u_color_gray { color: #666 !important; }
.u_ws_nowrap { white-space: nowrap !important; }
.u_d_flex { display: flex; }
.u_align_items_end { align-items: flex-end; }
.u_flex_wrap { flex-wrap: wrap; }