/* ===========================================================
   片岡FP事務所 — コラム（オウンドメディア）共通スタイル
   2026-08-22 デザインブラッシュアップで inline <style> から外出し。
   /column/ 一覧ページと /column/<slug>/ 記事ページの両方がこの1枚を読む。
   ここを直せば全記事に反映される（記事HTMLにCSSを書き戻さないこと）。
   =========================================================== */

:root{
  /* ブランド色（トップページと共通・変更しない） */
  --primary:#3D5AA5; --primary-deep:#2F4A8C; --accent:#F2A65C; --accent-hover:#EC9A4A;
  --bg:#E9F1F8; --bg-sub:#C9DFF2; --chip:#A8C4E5; --muted:#8CA5C8; --line:#D6E4F0;
  /* 読み物用のインク色（2026-08-22 追加）: 長文をブランド青で組むと読み疲れるため本文だけ濃紺に */
  --ink:#20304E; --ink-soft:#5A6B87;
  --shadow:0 4px 16px rgba(61,90,165,.06); --shadow-btn:0 2px 8px rgba(61,90,165,.08);
  --maru:"Zen Maru Gothic","Hiragino Maru Gothic ProN",sans-serif;
  --en:"Poppins",system-ui,sans-serif;
  /* 本文はシステムの標準ゴシック。丸ゴシックは見出し・UIに限定し、追加のフォント読み込みはしない */
  --sans:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic","Noto Sans JP","Segoe UI",sans-serif;
  --wrap:820px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--primary);
  font-family:var(--maru);font-size:16px;line-height:2;letter-spacing:.06em;overflow-x:hidden;
}
img{max-width:100%}
a{color:var(--primary);text-decoration:none;transition:color .18s ease,background .18s ease,transform .18s ease}
a:hover{color:var(--primary-deep)}
h1,h2,h3{margin:0;font-weight:900}

/* ---------- ヘッダー / フッター（トップページと同じ見た目） ---------- */
.header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:36px 56px;max-width:1280px;margin:0 auto;flex-wrap:wrap}
.brand{display:flex;flex-direction:column;gap:4px}
.brand .jp{font-size:20px;font-weight:700;letter-spacing:.18em;color:var(--primary)}
.brand .en{font-family:var(--en);font-size:10px;letter-spacing:.3em;color:var(--muted)}
.btn-cta{display:inline-flex;align-items:center;gap:10px;background:var(--accent);border-radius:9999px;padding:13px 28px;font-size:13.5px;font-weight:700;letter-spacing:.08em;color:var(--primary);box-shadow:var(--shadow-btn)}
.btn-cta:hover{background:var(--accent-hover);transform:translateY(-2px);color:var(--primary)}
.btn-cta .arrow{font-family:var(--en)}
.en-label{font-family:var(--en);font-size:11px;letter-spacing:.34em;color:var(--muted)}

.footer{background:#fff;border-radius:48px 48px 0 0;padding:56px 24px 36px;text-align:center}
.footer .jp{font-size:18px;font-weight:700;letter-spacing:.18em}
.footer .en{font-family:var(--en);font-size:10px;letter-spacing:.3em;color:var(--muted);margin-top:6px}
.footer-info{margin-top:20px;font-size:12px;line-height:2.1;letter-spacing:.06em;color:var(--muted)}
.copyright{margin-top:32px;font-size:11px;letter-spacing:.2em;color:var(--muted)}

/* ---------- カテゴリチップ（カテゴリごとに色を変えて一覧の見分けをつける） ---------- */
.cat-badge{
  background:#E3ECFA;color:#33528F;border-radius:9999px;padding:6px 16px;
  font-size:11.5px;font-weight:700;letter-spacing:.08em;line-height:1.6;white-space:nowrap;
}
.cat-badge.cat-taishokukin{background:#E3ECFA;color:#33528F}
.cat-badge.cat-nenkin{background:#DEEFF0;color:#2C6F79}
.cat-badge.cat-hoken{background:#FAEADB;color:#96591A}
.cat-badge.cat-unyo{background:#E8E7F7;color:#514A9B}
.cat-badge.cat-kakei{background:#E5F0E4;color:#3C673F}
.cat-badge.cat-office{background:#EDEEF2;color:#525B6E}
.article-date{font-family:var(--en);font-size:11px;letter-spacing:.16em;color:var(--muted)}

/* ---------- 読了プログレスバー（記事ページのみJSが挿入） ---------- */
.read-progress{position:fixed;top:0;left:0;height:3px;width:0;background:var(--accent);z-index:60;transition:width .12s linear}

/* ===========================================================
   一覧ページ  /column/
   =========================================================== */
.page-title{position:relative;padding:70px 24px 56px;text-align:center;overflow:hidden}
.page-title .circle{position:absolute;left:50%;top:-260px;transform:translateX(-50%);width:900px;height:560px;border-radius:50%;background:var(--bg-sub);opacity:.5}
.page-title-inner{position:relative;display:flex;flex-direction:column;align-items:center;gap:20px}
.page-title h1{font-size:32px;font-weight:900;letter-spacing:.16em}
.page-lead{font-size:14.5px;line-height:2.1;letter-spacing:.06em;margin:0;color:var(--ink-soft);font-family:var(--sans)}

.list-area{max-width:1104px;margin:0 auto;padding:0 24px 120px;display:flex;flex-direction:column;align-items:center;gap:40px}

/* カテゴリ絞り込み（JSが有効なときだけ表示される） */
.cat-filter{display:none;flex-wrap:wrap;justify-content:center;gap:10px;width:100%}
.cat-filter.is-ready{display:flex}
.cat-filter button{
  font-family:var(--maru);font-size:12.5px;font-weight:700;letter-spacing:.08em;
  border:1px solid var(--line);background:#fff;color:var(--primary);
  border-radius:9999px;padding:9px 20px;cursor:pointer;transition:all .18s ease;
}
.cat-filter button:hover{border-color:var(--chip);transform:translateY(-1px)}
.cat-filter button[aria-pressed="true"]{background:var(--primary);border-color:var(--primary);color:#fff}

.column-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px;width:100%}
a.column-card{
  background:#fff;border-radius:22px;box-shadow:var(--shadow);
  padding:30px 28px 26px;display:flex;flex-direction:column;gap:14px;
  border:1px solid transparent;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
a.column-card:hover{transform:translateY(-4px);box-shadow:0 12px 28px rgba(61,90,165,.13);border-color:var(--line)}
.column-meta{display:flex;align-items:center;gap:12px}
.column-card h2{font-size:16px;font-weight:700;letter-spacing:.03em;line-height:1.75;margin:0;color:var(--primary)}
/* 記事の要約（一覧で中身が想像できるように 2026-08-22 追加） */
.card-excerpt{
  margin:0;font-family:var(--sans);font-size:13px;line-height:1.85;letter-spacing:.01em;color:var(--ink-soft);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.read-more{margin-top:auto;padding-top:6px;font-family:var(--en);font-size:12px;letter-spacing:.2em;display:flex;align-items:center;gap:8px}
.read-more .circle-arrow{width:26px;height:26px;font-size:12px}
.column-card.is-hidden{display:none}

.note-card{
  background:#fff;border-radius:22px;box-shadow:var(--shadow);
  padding:26px 32px;font-family:var(--sans);font-size:13.5px;line-height:2;letter-spacing:.02em;
  text-align:center;max-width:640px;color:var(--ink-soft);
}
.note-card a{font-weight:700}

/* ===========================================================
   記事ページ  /column/<slug>/
   =========================================================== */
.breadcrumb{max-width:var(--wrap);margin:0 auto;padding:8px 24px 0;font-size:12px;letter-spacing:.04em;color:var(--muted);line-height:1.9;font-family:var(--sans)}
.breadcrumb a{color:var(--muted)}
.breadcrumb a:hover{color:var(--primary)}

.article-head{max-width:var(--wrap);margin:0 auto;padding:30px 24px 28px;display:flex;flex-direction:column;gap:18px}
.article-meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.article-head h1{font-size:29px;font-weight:900;letter-spacing:.04em;line-height:1.65}

.article-wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px 40px}
.article-card{background:#fff;border-radius:24px;box-shadow:var(--shadow);padding:52px 52px 56px}

/* --- 本文 --- */
.prose{font-family:var(--sans);color:var(--ink)}
.prose>p{margin:0 0 28px;font-size:16.5px;line-height:1.95;letter-spacing:.02em}
/* リード（結論の先出し）を目立たせる */
.prose>p:first-child{
  font-size:17px;line-height:2;background:var(--bg);border-radius:16px;
  padding:26px 28px;margin-bottom:36px;color:var(--ink);
}
.prose h2{
  font-family:var(--maru);color:var(--primary);
  font-size:21px;font-weight:900;letter-spacing:.04em;line-height:1.7;
  margin:60px 0 20px;padding:0 0 0 16px;border-left:4px solid var(--accent);
  scroll-margin-top:24px;
}
.prose h2:first-child{margin-top:0}
.prose h3{
  font-family:var(--maru);color:var(--primary);
  font-size:17.5px;font-weight:900;letter-spacing:.04em;line-height:1.8;margin:40px 0 14px;
}
.prose ul,.prose ol{margin:0 0 28px;padding-left:2px;list-style:none;display:flex;flex-direction:column;gap:12px}
.prose ul li{position:relative;padding-left:24px;font-size:16px;line-height:1.95;letter-spacing:.02em}
.prose ul li::before{content:"";position:absolute;left:3px;top:11px;width:8px;height:8px;border-radius:50%;background:var(--accent)}
.prose ol{counter-reset:pl}
.prose ol li{position:relative;padding-left:34px;font-size:16px;line-height:1.95;letter-spacing:.02em;counter-increment:pl}
.prose ol li::before{
  content:counter(pl);position:absolute;left:0;top:4px;width:23px;height:23px;border-radius:50%;
  background:var(--bg);color:var(--primary);font-family:var(--en);font-size:12px;
  display:flex;align-items:center;justify-content:center;
}
.prose strong,.lead-strong{font-weight:700;color:var(--primary-deep)}
/* 本文中のリンクは下線で見分けられるように */
.prose a{color:var(--primary);text-decoration:underline;text-decoration-color:rgba(61,90,165,.4);text-underline-offset:.22em;text-decoration-thickness:1px}
.prose a:hover{text-decoration-color:var(--primary)}

/* 表（横スクロールする場合はフェードで気づけるように） */
.table-wrap{position:relative;overflow-x:auto;margin:0 0 28px;-webkit-overflow-scrolling:touch;border-radius:14px;border:1px solid var(--line)}
.table-wrap table{border-collapse:collapse;width:100%;min-width:600px;font-family:var(--sans);font-size:14px;line-height:1.8;letter-spacing:.01em;color:var(--ink)}
.table-wrap th,.table-wrap td{border-bottom:1px solid var(--line);border-right:1px solid var(--line);padding:14px 16px;text-align:left;vertical-align:top}
.table-wrap tr:last-child th,.table-wrap tr:last-child td{border-bottom:none}
.table-wrap th:last-child,.table-wrap td:last-child{border-right:none}
.table-wrap th{background:var(--bg);font-weight:700;color:var(--primary);white-space:nowrap}
.note-text{font-family:var(--sans);font-size:13px;color:var(--ink-soft);line-height:1.95;letter-spacing:.01em}

/* 今後の記事で使える要点ボックス（column-add で任意に使用） */
.point-box{
  background:var(--bg);border-radius:18px;padding:26px 28px;margin:0 0 30px;
  font-family:var(--sans);font-size:16px;line-height:1.95;letter-spacing:.02em;color:var(--ink);
}
.point-box .point-title{
  display:flex;align-items:center;gap:10px;font-family:var(--maru);font-weight:900;
  font-size:14px;letter-spacing:.12em;color:var(--primary);margin-bottom:12px;
}
.point-box .point-title::before{content:"";width:18px;height:3px;border-radius:2px;background:var(--accent)}
/* --- 引用（お客様の声など） --- */
.prose blockquote{
  margin:0 0 22px;padding:18px 22px 18px 26px;border-left:4px solid var(--accent);
  background:var(--bg);border-radius:0 14px 14px 0;
  font-family:var(--sans);font-size:15.5px;line-height:1.95;letter-spacing:.02em;color:var(--ink);
}
.prose blockquote p{margin:0}
.caution-box{
  background:#FDF4EA;border-radius:18px;padding:24px 26px;margin:0 0 30px;
  font-family:var(--sans);font-size:15.5px;line-height:1.95;letter-spacing:.02em;color:var(--ink);
}

/* --- もくじ（JSが本文のh2から自動生成） --- */
.toc{background:var(--bg);border-radius:18px;padding:26px 30px 28px;margin:0 0 40px}
.toc-title{display:flex;align-items:center;gap:10px;font-family:var(--maru);font-weight:900;font-size:13.5px;letter-spacing:.16em;color:var(--primary);margin-bottom:14px}
.toc-title::before{content:"";width:18px;height:3px;border-radius:2px;background:var(--accent)}
.toc ol{margin:0;padding:0;list-style:none;counter-reset:toc;display:flex;flex-direction:column;gap:9px}
.toc li{counter-increment:toc}
.toc a{
  display:flex;gap:12px;align-items:baseline;font-family:var(--sans);
  font-size:14.5px;line-height:1.8;letter-spacing:.01em;color:var(--ink);text-decoration:none;
}
.toc a::before{content:counter(toc,decimal-leading-zero);font-family:var(--en);font-size:11.5px;color:var(--accent);flex:none}
.toc a:hover{color:var(--primary)}

/* --- 記事末CTA --- */
.cta-block{margin:48px 0 0;background:var(--bg);border-radius:24px;padding:38px 28px;display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
.cta-block .cta-title{font-size:17px;font-weight:900;letter-spacing:.1em;color:var(--primary)}
.cta-block .btn-cta{padding:16px 38px;font-size:15px}
.cta-block .cta-note{font-family:var(--sans);font-size:12.5px;color:var(--ink-soft);letter-spacing:.02em;line-height:1.9;margin:0}

/* --- 記事下のセクション（FAQ・著者・関連） --- */
.sub-sec{max-width:var(--wrap);margin:0 auto;padding:26px 24px 0;display:flex;flex-direction:column;gap:18px}
.sub-sec .sub-title{font-size:19px;font-weight:900;letter-spacing:.12em;text-align:center;color:var(--primary)}

.faq-list{display:flex;flex-direction:column;gap:14px}
.faq{background:#fff;border-radius:20px;box-shadow:var(--shadow);overflow:hidden}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:16px;padding:24px 30px;font-size:15px;font-weight:700;letter-spacing:.03em;line-height:1.8;color:var(--primary)}
.faq summary::-webkit-details-marker{display:none}
.faq-q{width:30px;height:30px;border-radius:50%;background:var(--primary);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-family:var(--en);font-size:13px;flex:none}
.faq-a{display:flex;gap:16px;padding:0 30px 26px;font-family:var(--sans);font-size:15px;line-height:1.95;letter-spacing:.02em;color:var(--ink)}
.faq-a .faq-q{background:var(--accent)}
.faq-a p{margin:3px 0 0}
.faq-mark{margin-left:auto;flex:none;width:12px;height:12px;position:relative}
.faq-mark::before,.faq-mark::after{content:"";position:absolute;inset:0;margin:auto;background:var(--muted);border-radius:2px}
.faq-mark::before{width:12px;height:2px}
.faq-mark::after{width:2px;height:12px;transition:transform .2s ease}
details[open] .faq-mark::after{transform:rotate(90deg)}

.author-box{background:#fff;border-radius:20px;box-shadow:var(--shadow);padding:30px 32px;display:flex;gap:22px;align-items:center}
.author-box img{width:88px;height:88px;border-radius:50%;object-fit:cover;flex:none}
.author-body{display:flex;flex-direction:column;gap:6px;font-family:var(--sans);font-size:14px;line-height:1.9;letter-spacing:.01em;color:var(--ink)}
.author-name{font-family:var(--maru);font-size:16px;font-weight:900;letter-spacing:.08em;color:var(--primary)}
.author-role{font-size:12.5px;color:var(--ink-soft);letter-spacing:.02em}
.author-link{font-family:var(--maru);font-size:12.5px;letter-spacing:.08em;font-weight:700}

.related-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
a.related-card{background:#fff;border-radius:20px;box-shadow:var(--shadow);padding:26px 26px 22px;display:flex;flex-direction:column;gap:12px;border:1px solid transparent;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
a.related-card:hover{transform:translateY(-4px);box-shadow:0 12px 28px rgba(61,90,165,.13);border-color:var(--line)}
.related-card h3{font-size:14.5px;font-weight:700;letter-spacing:.03em;line-height:1.8;color:var(--primary)}
.related-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap}

.circle-arrow{width:26px;height:26px;border-radius:50%;background:var(--primary);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-family:var(--en);font-size:12px;flex:none}
.back-area{max-width:var(--wrap);margin:0 auto;padding:40px 24px 110px;text-align:center}
.back-pill{display:inline-flex;align-items:center;gap:14px;background:#fff;border-radius:9999px;padding:12px 40px 12px 12px;font-size:13.5px;letter-spacing:.1em;box-shadow:var(--shadow-btn)}
.back-pill:hover{transform:translateY(-2px)}
.back-pill .circle-arrow{width:36px;height:36px}

/* --- スマホの追従CTA（記事を読み進めたら出る。JSが挿入） --- */
.sticky-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:50;display:none;
  align-items:center;justify-content:space-between;gap:14px;
  padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));
  background:rgba(255,255,255,.95);border-top:1px solid var(--line);
  box-shadow:0 -4px 18px rgba(61,90,165,.1);
  transform:translateY(110%);transition:transform .28s ease;
}
.sticky-cta.is-on{transform:translateY(0)}
.sticky-cta .sticky-text{font-family:var(--maru);font-size:12.5px;font-weight:700;letter-spacing:.04em;line-height:1.6;color:var(--primary)}
.sticky-cta .sticky-text small{display:block;font-weight:500;font-size:11px;color:var(--muted);letter-spacing:.02em}
.sticky-cta .btn-cta{padding:12px 22px;font-size:13px;flex:none}

/* ===========================================================
   レスポンシブ
   =========================================================== */
@media(max-width:900px){
  .column-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:760px){
  .sticky-cta{display:flex}
  body.has-sticky-cta{padding-bottom:74px}
}
@media(max-width:640px){
  .header{padding:22px 20px}
  .page-title{padding:44px 20px 40px}
  .page-title h1{font-size:23px;letter-spacing:.1em}
  .list-area{padding:0 20px 90px;gap:30px}
  .column-grid{grid-template-columns:1fr;gap:18px}
  .article-head{padding:24px 20px 22px}
  .article-head h1{font-size:22px;line-height:1.7}
  .article-wrap{padding:0 20px 32px}
  .article-card{padding:32px 22px 38px;border-radius:20px}
  .prose>p{font-size:16px;margin-bottom:26px}
  .prose>p:first-child{font-size:16px;padding:22px 20px}
  .prose h2{font-size:18.5px;margin:46px 0 18px;padding-left:13px}
  .prose h3{font-size:16.5px}
  .prose ul li,.prose ol li{font-size:15.5px}
  .toc{padding:22px 22px 24px}
  .sub-sec{padding:22px 20px 0}
  .faq summary{padding:20px 22px;font-size:14.5px;gap:13px}
  .faq-a{padding:0 22px 22px;gap:13px;font-size:14.5px}
  .related-grid{grid-template-columns:1fr}
  .author-box{flex-direction:column;text-align:center;padding:28px 24px}
  .back-area{padding:32px 20px 90px}
  .cta-block{padding:30px 20px}
}

/* ===========================================================
   2026-08-22 追記 — 参考サイト（SBI日本少短／JMC採用サイト）から取り入れた見せ方
     ・英語ラベル＋日本語見出し＋短いアクセント下線の2段組み
     ・大きな曲線で面を切り替える
     ・丸い矢印がホバーで動く
   =========================================================== */

/* 見出しの下に短いアクセント線（英語ラベル→日本語→線の2段組みを完成させる） */
.page-title h1::after,
.sub-sec .sub-title::after{
  content:"";display:block;width:34px;height:3px;border-radius:2px;
  background:var(--accent);margin:16px auto 0;
}
.sub-sec .sub-title::after{margin-top:12px}

/* 記事タイトルは左揃えなので線も左に */
.article-head h1::after{
  content:"";display:block;width:34px;height:3px;border-radius:2px;background:var(--accent);margin:20px 0 0;
}

/* 一覧の上部：カーブで面を切り替える（参考サイトの大きな曲線モチーフ） */
.page-title .circle{border-radius:0 0 50% 50%;top:-300px;height:620px;width:1500px;opacity:.45}

/* フッター手前のカーブ */
.footer{position:relative}
.footer::before{
  content:"";position:absolute;left:50%;top:-1px;transform:translateX(-50%);
  width:140%;height:120px;background:#fff;border-radius:50% 50% 0 0;pointer-events:none;
}

/* 丸い矢印はホバーで少し進む */
a.column-card:hover .circle-arrow,
a.related-card:hover .circle-arrow,
.back-pill:hover .circle-arrow{transform:translateX(4px);background:var(--primary-deep)}
.circle-arrow{transition:transform .2s ease,background .2s ease}

/* もくじの番号を大きく（参考サイトの「01」モチーフ） */
.toc a::before{font-size:14px;font-weight:600;opacity:.9;min-width:22px}

/* 本文の見出しにも通し番号を薄く敷く */
.prose{counter-reset:sec}
.prose>h2{counter-increment:sec;position:relative}
.prose>h2::after{
  content:counter(sec,decimal-leading-zero);
  position:absolute;right:0;top:50%;transform:translateY(-50%);
  font-family:var(--en);font-size:26px;font-weight:600;color:var(--bg-sub);
  letter-spacing:.04em;pointer-events:none;
}
@media(max-width:640px){.prose>h2::after{font-size:20px}}

/* --- 修正: もくじは .prose ol の装飾（連番マーカー）を打ち消す --- */
.toc ol.toc-list{counter-reset:toc;gap:9px;padding-left:0}
.toc ol.toc-list li{counter-increment:toc;padding-left:0;font-size:inherit;line-height:inherit}
.toc ol.toc-list li::before{content:none}

/* --- 修正: 見出し右の連番と見出し文字が重ならないよう余白を確保 --- */
.prose>h2{padding-right:46px}

/* --- 修正: フッターのカーブが屋号を隠さないように重ね順を整理 --- */
.footer::before{z-index:0}
.footer>*{position:relative;z-index:1}

/* --- 修正: フッターのカーブ（140%幅）が横スクロールを生まないよう内側で切る --- */
.footer{overflow:hidden}

/* --- 横に長い表は「スクロールできる」ことがわかるように --- */
.table-hint{
  margin:-18px 0 26px;font-family:var(--sans);font-size:11.5px;letter-spacing:.04em;
  color:var(--muted);text-align:center;
}
.table-wrap.is-scrollable{box-shadow:inset -18px 0 18px -18px rgba(61,90,165,.35)}

/* --- スマホでは曲線が画面内に収まるサイズにする（帯が直線に見えないように） --- */
@media(max-width:640px){
  .page-title .circle{width:200%;height:420px;top:-230px}
}

/* --- スマホ: 横に長い表はスクロールではなく「カード積み」で全文を見せる（2026-08-23） --- */
@media(max-width:640px){
  .table-wrap:has(table.has-labels){overflow:visible;border:none;border-radius:0;box-shadow:none}
  .table-wrap table.has-labels{min-width:0;width:100%;display:block;font-size:14px}
  .table-wrap table.has-labels tbody,.table-wrap table.has-labels tr{display:block}
  .table-wrap table.has-labels tr:first-child{display:none}
  .table-wrap table.has-labels tr{border:1px solid var(--line);border-radius:12px;margin:0 0 12px;overflow:hidden;background:#fff}
  .table-wrap table.has-labels td{display:block;border-right:none;border-bottom:1px solid var(--line);padding:10px 14px}
  .table-wrap table.has-labels td:last-child{border-bottom:none}
  .table-wrap table.has-labels td::before{content:attr(data-label);display:block;font-size:11.5px;font-weight:700;color:var(--primary);letter-spacing:.04em;margin-bottom:2px}
  .table-wrap table.has-labels td:first-child{background:var(--bg);font-weight:700;color:var(--primary);padding:10px 14px}
  .table-wrap table.has-labels td:first-child::before{display:none}
  .table-wrap:has(table.has-labels)+.table-hint{display:none}
}