/* スマホで横スクロールさせない指定のための組み替え。判定・ARIAは既存main.js。
   公式Core/Techlogは通常の表を担当し、このファイルは列とカード化だけを担当する。
   600px/5em/150pxは従来tables.cssの対応記録に基づく機能値（docs/lism-migration.md）。 */
@layer lism-custom {
  .c--content .has-fixed-layout { table-layout:fixed; }
  .c--content :where(table:not(.has-fixed-layout)) tbody th { white-space:nowrap; }
  .c--content :is(th,td) { word-break:normal; }
  .table-scroll { overflow-x:auto; }
  .table-scroll.is-all-centered :is(th,td) { text-align:center; vertical-align:middle; }
  @media (max-width:600px) {
    .c--content table, .c--content table.has-fixed-layout { min-width:0; table-layout:auto; }
    .c--content :is(th,td) { overflow-wrap:break-word; }
    .c--content tbody th { white-space:normal; }
    .c--content tr > :first-child:not(:only-child) { box-sizing:content-box; width:5em; }
    .c--content .tc-fit td { overflow-wrap:anywhere; }
    .table-scroll.tc-wrap { overflow-x:visible; }
    .c--content :is(.tc-table,.tc-table thead,.tc-table tbody,.tc-table tfoot,.tc-table tr) { display:block; }
    .c--content .tc-table { width:100%; border:0; }
    .c--content .tc-table .tc-row { margin-block-end:var(--flow--s); border:1px solid var(--divider); }
    .c--content .tc-table .tc-row:last-child { margin-block-end:0; }
    .c--content .tc-table tr.tc-row > :is(th,td) { display:block; width:auto; border:0; border-block-start:1px solid var(--divider); text-align:start; white-space:normal; overflow-wrap:anywhere; }
    .c--content .tc-table tr.tc-row > :first-child { border-block-start:0; }
    .c--content .tc-table [data-label]::before { content:attr(data-label) '：'; font-weight:var(--fw--bold); }
    .c--content .tc-table .tc-media[data-label]::before { display:block; }
    .c--content .tc-table .tc-media img { max-width:150px; }
    .c--content .tc-table tr.tc-row > td:empty { display:none; }
    .c--content .tc-table .tc-headrow { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
    .c--content .tc-table .tc-title { margin-block-end:var(--flow--s); }
    .c--content .tc-table .tc-title > * { display:block; }
  }
}