/* 記事・固定ページ内テーブルの SP カード型表示
 * SP(<=640px)で多列テーブルが1文字ずつ縦積みになる崩れを解消。
 * 各行を1枚のカード化し、見出しを data-label(JSで付与)でラベル表示。
 * PC幅では通常テーブルのまま（このCSSは @media 内のみ）。
 * 対象: ブログ記事(.blog-post-body) / 固定ページ(.page-content) / 募集SEO表(.recruits-seo-table-wrapper)
 */
@media (max-width: 640px) {
  .blog-post-body table,
  .page-content table,
  .recruits-seo-table-wrapper table {
    display: block;
    width: 100%;
    border: none;
    border-collapse: collapse;
  }
  .blog-post-body table thead,
  .page-content table thead,
  .recruits-seo-table-wrapper table thead { display: none; }
  .blog-post-body table tbody,
  .page-content table tbody,
  .recruits-seo-table-wrapper table tbody { display: block; width: 100%; }
  .blog-post-body table tr,
  .page-content table tr,
  .recruits-seo-table-wrapper table tr {
    display: block;
    margin: 0 0 14px;
    border: 1px solid #d8e4f0;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 1px 5px rgba(33, 150, 243, 0.10);
  }
  .blog-post-body table td,
  .page-content table td,
  .recruits-seo-table-wrapper table td {
    display: block;
    width: auto !important;
    border: none;
    border-bottom: 1px solid #eef2f7;
    padding: 9px 13px;
    text-align: left !important;
    white-space: normal !important;
    word-break: break-word;
    line-height: 1.6;
  }
  .blog-post-body table td:last-child,
  .page-content table td:last-child,
  .recruits-seo-table-wrapper table td:last-child { border-bottom: none; }
  .blog-post-body table td[data-label]::before,
  .page-content table td[data-label]::before,
  .recruits-seo-table-wrapper table td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-weight: 700;
    font-size: 0.8em;
    color: #1976d2;
    margin-bottom: 4px;
    letter-spacing: 0.01em;
  }
  .blog-post-body table td:first-child,
  .page-content table td:first-child,
  .recruits-seo-table-wrapper table td:first-child { background: #f5f9ff; font-weight: 600; }
}