/* =========================================
   産業資材事業部 住所一覧（page-offices.css）
   - 見出し表示（全列）
   - 縦中央揃え
   - 横幅/整形の微調整
   - SPはカード化
========================================= */

/* 見出し（「産業資材事業部　住所一覧」） */
.page-heading{
  display:flex;
  align-items:center;
  gap:28px;
  margin:10px 0 16px;
}
.page-heading .main,
.page-heading .sub{
  font-size:1.25rem;
  font-weight:800;
  letter-spacing:.02em;
}

/* テーブル共通 */
.office-table{
  width:100%;
  border-collapse:collapse;
  font-size:0.95rem;
  background:#fff;
}
.office-table th,
.office-table td{
  border:1px solid #e5e7eb;
  padding:12px 14px;
  text-align:left;
  vertical-align:middle; /* 縦中央揃え */
  line-height:1.6;
}

/* thead（全列の見出しを表示） */
.office-table thead th{
  background:#0b5da8;
  color:#fff;
  font-weight:700;
  text-align:center;
}
/* ※ 以前の「color: transparent;」は削除（または必ず上書き） */
.office-table thead .th-dept,
.office-table thead .th-name,
.office-table thead .th-addr,
.office-table thead .th-tel,
.office-table thead .th-fax,
.office-table thead .th-map{
  color:#fff !important;
}

/* 左の部門セル（縦見出しの雰囲気） */
.office-table .dept{
  background:#f7f9fb;
  color:#0b5da8;
  font-weight:800;
  white-space:nowrap;
  width:200px;
  text-align:center; /* 中央寄せ */
  vertical-align:middle;
}

/* 列幅・整形 */
.office-table .name{
  white-space:nowrap;
  font-weight:700;
  width:120px;
  text-align:center; /* 拠点名は中央 */
}
.office-table .addr .zip{
  display:inline-block;
  margin-right:.6em;
  color:#374151;
}
.office-table .addr{
  /* 長い住所の読みやすさ確保 */
  word-break:break-word;
}
.office-table .tel,
.office-table .fax{
  white-space:nowrap;
  width:170px;
  text-align:center;
}
.office-table .th-tel,
.office-table .th-fax{
  text-align:center;
}
.office-table .map{
  width:90px;
  text-align:center;
}

/* MAPリンク（ピン＋文字を縦積み） */
.map-link{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  text-decoration:none;
  font-weight:800;
  color:#0b5da8;
}
.map-link .pin{
  width:18px;
  height:18px;
  fill:#0b5da8;
  display:block;
}

.table-note{
  margin-top:8px;
  color:#6b7280;
  font-size:.85rem;
}

/* 余白調整：空セルでも高さが詰まりすぎないように */
.office-table td:empty{
  min-height:24px;
  padding:12px 14px;
}

/* =========================
   スマホ（カード化）
========================= */
@media (max-width: 768px){
  .page-heading{ gap:12px; }
  .office-table{ font-size:.92rem; }

  /* thead を隠してカード風に */
  .office-table thead{ display:none; }

  .office-table tr{
    display:block;
    border:1px solid #e5e7eb;
    margin-bottom:12px;
    border-radius:8px;
    overflow:hidden;
  }

  /* 部門セルはカードの見出し */
  .office-table th.dept{
    display:block;
    border:none;
    border-bottom:1px solid #e5e7eb;
    background:#0b5da8;
    color:#fff;
    text-align:left;
    padding:10px 12px;
  }

  .office-table td{
    display:flex;
    gap:8px;
    border:none;
    border-bottom:1px dashed #e5e7eb;
    padding:10px 12px;
    align-items:center; /* 縦中央に */
  }
  .office-table td:last-child{ border-bottom:none; }

  /* ラベル（擬似要素） */
  .office-table td::before{
    content: attr(data-label);
    flex:0 0 82px;
    color:#6b7280;
    font-size:.85rem;
  }

  .office-table .name{ font-weight:700; text-align:left; }
  .office-table .map{ justify-content:center; }
}