/* 人事発令(NAK-1333)。台帳の1枚の表。月の区切りは上辺2pxの黒罫(セクション開始の合図)と文字の強弱だけ */
/* 3列だけなのでスマホでも横に流さない。表の中だけのスクロールもしない(ページごと縦に読む) */
.card:has(> .tn-table) { max-height: none; overflow-x: visible; }
.card > .tn-table { min-width: 0; }
.tn-table { table-layout: fixed; }
.tn-table col.tn-c-name { width: 36%; }
.tn-table col.tn-c-from, .tn-table col.tn-c-to { width: 32%; }
.tn-table td { overflow-wrap: anywhere; }
.tn-table .tn-name { font-weight: 700; }
.tn-month th {
  position: static; background: none; color: var(--txt); font-size: 15px; font-weight: 700; letter-spacing: -.02em;
  padding: 22px 15px 9px; border-top: 2px solid var(--txt); border-bottom: 1px solid var(--line);
}
.tn-table tbody .tn-month:first-child th { border-top-width: 0; padding-top: 16px; }
.tn-month .badge { margin-left: 10px; vertical-align: 1px; }
/* 異動元から異動先への向き。就任の行(異動元なし)には付けない */
.tn-store::before { content: '→'; color: var(--text3); margin-right: 8px; }
.tn-appoint .tn-store::before { content: none; }
.tn-to .chip { margin-left: 8px; vertical-align: 1px; }
@media (max-width: 480px) {
  .tn-table th, .tn-table td { padding-left: 8px; padding-right: 8px; }
  .tn-table col.tn-c-name { width: 34%; }
  .tn-table col.tn-c-from, .tn-table col.tn-c-to { width: 33%; }
  .tn-store::before { margin-right: 4px; }
  .tn-to .chip { margin: 4px 0 0; }
}