/*!
 * 比較表セレクター（Hikaku Table Selector）
 * 目印クラス「hikaku」の付いたテーブルブロックにだけ効きます。
 * 記事のHTMLやテーマのCSSは書き換えません。
 */

.hikaku-wrap{
  --hikaku-selw:58px;
  --hikaku-brand:#1f7a8c;
  --hikaku-brand-d:#155e6d;
  --hikaku-line:#d5dae0;
  --hikaku-sub:#5c6773;
  --hikaku-ink:#1c2530;
  border:1px solid var(--hikaku-line);
  border-radius:12px;
  background:#fff;
  overflow:hidden;
  margin:1.6em 0;
  box-shadow:0 1px 2px rgba(20,40,60,.04);
}
.hikaku-wrap *{box-sizing:border-box}
.hikaku-wrap > .wp-block-table,
.hikaku-wrap > figure{margin:0}

/* ---- 上部バー（並び替え） ---- */
.hikaku-topbar{
  display:flex; flex-wrap:wrap; gap:10px 14px; align-items:center;
  padding:12px 16px; background:#f7fafb; border-bottom:1px solid var(--hikaku-line);
}
.hikaku-topbar .hikaku-lb{
  font-size:.85rem; font-weight:600; color:var(--hikaku-sub); white-space:nowrap; line-height:1.4;
}
.hikaku-select{
  font:inherit; font-size:.88rem; line-height:1.4; padding:7px 34px 7px 12px;
  border:1px solid #c3ccd5; border-radius:8px; color:var(--hikaku-ink); margin:0; height:auto;
  background:#fff url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%235c6773' stroke-width='1.6' d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 12px center/11px;
  -webkit-appearance:none; -moz-appearance:none; appearance:none;
  max-width:100%; cursor:pointer; box-shadow:none;
}
.hikaku-select:focus{outline:2px solid var(--hikaku-brand); outline-offset:1px}
.hikaku-hint{font-size:.79rem; color:#8a939d; margin-left:auto; line-height:1.4}
/* 使い方の案内。並び替えの説明と同じ場所に出す。行は増えない。
   常に出したままにするので、目に留まる濃さにしておく。
   案内を出す表では並び替えの説明を出さない（同じ場所を取り合うため）。 */
.hikaku-note{
  font-size:.82rem; color:var(--hikaku-brand-d); font-weight:600;
  margin-left:auto; line-height:1.4;
}
.hikaku-note[hidden],
.hikaku-hint[hidden]{display:none!important}

/* ---- 見出しクリックでの並び替え ---- */
/* 見出しの色はテーマによって濃かったり薄かったりする。
   色を置き換えず、うっすら重ねるだけにして文字を読めるまま残す。 */
.hikaku-wrap .hikaku-sortable{cursor:pointer; user-select:none; -webkit-user-select:none}
.hikaku-wrap .hikaku-sortable:hover{background-image:linear-gradient(rgba(0,0,0,.07),rgba(0,0,0,.07))}
.hikaku-wrap .hikaku-sortable:focus-visible{outline:2px solid var(--hikaku-brand); outline-offset:-2px}
.hikaku-wrap .hikaku-arrow{display:inline-block; margin-left:4px; font-size:.72em; color:inherit; opacity:.5; font-weight:400}
.hikaku-wrap .hikaku-sortable.is-on{background-image:linear-gradient(rgba(31,122,140,.18),rgba(31,122,140,.18))}
.hikaku-wrap .hikaku-sortable.is-on .hikaku-arrow{opacity:1}

/* ---- 選択列 ---- */
/* width に !important が要る。
   SWELLの「1列目の幅」ルールが、選択列を足したことで選択列に当たってしまう。

     .wp-block-table > table tr > :first-child:not(.-no1){ width:var(--swl-cell1-width,auto) }

   詳細度は先方（0,2,2）＞当方（0,2,1）なので、素の width では負けて auto になる。
   table-layout:fixed の表では列幅が等分され、チェック欄だけの列が
   本文の列と同じ幅（先方の9列の表で111px）になっていた。
   スマートフォンで主張が強すぎるとのご指摘（2026-09-08）を受けて押し返す。

   min-width も残す。SWELLの表では先方の !important（値は0）に負けるが、
   **SWELL以外の表では、これが無いと列が中身の幅まで痩せる**（41pxになった）。
   幅を決めるのは、SWELLの表では width、それ以外では min-width。両方要る。 */
/* クラス名を2度書いて詳細度を上げてある（0,3,1）。読みにくいが必要。
   SWELLに下記があり、!important 同士では詳細度（0,2,2）で当方が負けていた。

     .single-post table.has-fixed-layout th,
     .single-post table.has-fixed-layout td{ padding:0.9em .75em!important }

   左右に 9.8px ずつ入るため、46px の選択列で中身の入る幅が 26.4px しか残らない。
   チェック欄（21px＋余白6px×2＝33px）が入りきらず右へはみ出し、
   **中央ではなく右寄りに見えていた**（2026-09-09 ご指摘）。
   縦の余白は本文のセルが決めるので、行の高さは変わらない。 */
.hikaku-wrap th.hikaku-sel.hikaku-sel,
.hikaku-wrap td.hikaku-sel.hikaku-sel{
  width:var(--hikaku-selw)!important;
  min-width:var(--hikaku-selw)!important;
  max-width:var(--hikaku-selw)!important;
  padding:.5em .2em!important;
  background:#f4f8f9; text-align:center; vertical-align:middle;
}
.hikaku-wrap th.hikaku-sel{font-size:.8rem; color:var(--hikaku-sub); white-space:nowrap; font-weight:600}
.hikaku-box{
  display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer; padding:6px; margin:0; position:relative;
}
.hikaku-box input{position:absolute; opacity:0; width:0; height:0; margin:0}
.hikaku-mark{
  width:21px; height:21px; border:2px solid #b3bec8; border-radius:5px; background:#fff;
  display:block; position:relative; transition:.12s; flex:none;
}
.hikaku-box input:checked + .hikaku-mark{background:var(--hikaku-brand); border-color:var(--hikaku-brand)}
.hikaku-box input:checked + .hikaku-mark::after{
  content:""; position:absolute; left:6px; top:2px; width:5px; height:11px;
  border:solid #fff; border-width:0 2.5px 2.5px 0; transform:rotate(42deg);
}
.hikaku-box input:focus-visible + .hikaku-mark{outline:2px solid var(--hikaku-brand); outline-offset:2px}
.hikaku-sr{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}

.hikaku-wrap tbody tr:hover > td,
.hikaku-wrap tbody tr:hover > th{background:#f5f9fa}
.hikaku-wrap tbody tr.is-picked > th,
.hikaku-wrap tbody tr.is-picked > td{background:#eaf6f8}
.hikaku-wrap tbody tr.is-picked > td.hikaku-sel{background:#dcedf1}

/* ---- 比較モード ---- */
.hikaku-wrap tr.hikaku-hide{display:none}
.hikaku-wrap table.hikaku-result th.hikaku-sel,
.hikaku-wrap table.hikaku-result td.hikaku-sel{display:none}
/* 比較モードでは選択中の色付けを外し、ふつうの比較表として見せる */
.hikaku-wrap table.hikaku-result tbody tr.is-picked > th{background:#fafcfd}
.hikaku-wrap table.hikaku-result tbody tr.is-picked > td{background:#fff}

/* ---- SWELLの「1列目を左端に固定する」との併用 ----
   SWELLは figure に data-cell1-fixed を付け、tr>:first-child を固定する。
   選択列を足すと固定されるのが選択列だけになるため、
   本来の1列目（＝選択列の次のセル）もあわせて固定し、横に並べて残す。

   ずらす量は --hikaku-selw-real（JSが実測して入れる）を使う。
   --hikaku-selw は列の見た目の指定であって、描画される幅とは限らない。
   SWELLの表は table-layout:fixed のため、指定より広く描かれることがある。
   固定値のままずらすと、横スクロールで1列目が選択列に重なる。 */
.hikaku-wrap figure[data-cell1-fixed] tr > :nth-child(2),
.hikaku-wrap [data-cell1-fixed] > table tr > :nth-child(2){
  position:sticky!important; left:var(--hikaku-selw-real,var(--hikaku-selw)); top:0; z-index:2;
  background-color:var(--color_content_bg,#fff);
}
/* 見出し行を白で塗ると、濃い色の見出しを使うテーマでは文字が消える。
   となりの見出しと同じ色（JSが --hikaku-headbg に入れる）で塗る。 */
.hikaku-wrap figure[data-cell1-fixed] tr.hikaku-headrow > :nth-child(2),
.hikaku-wrap [data-cell1-fixed] > table tr.hikaku-headrow > :nth-child(2){
  z-index:3; background-color:var(--hikaku-headbg,var(--color_content_bg,#fff));
}
.hikaku-wrap figure[data-cell1-fixed] tbody tr:not(.hikaku-headrow):hover > :nth-child(2),
.hikaku-wrap [data-cell1-fixed] > table tbody tr:not(.hikaku-headrow):hover > :nth-child(2){background-color:#f5f9fa}
.hikaku-wrap figure[data-cell1-fixed] tbody tr.is-picked > :nth-child(2),
.hikaku-wrap [data-cell1-fixed] > table tbody tr.is-picked > :nth-child(2){background-color:#eaf6f8}
/* 比較モードでは選択列が消えるので、本来の1列目を左端に戻す */
.hikaku-wrap figure[data-cell1-fixed] table.hikaku-result tr > :nth-child(2),
.hikaku-wrap [data-cell1-fixed] > table.hikaku-result tr > :nth-child(2){left:0}

/* ---- 下部バー（操作） ---- */
.hikaku-actbar{
  display:flex; flex-wrap:wrap; gap:10px; align-items:center;
  padding:13px 16px; background:#f7fafb; border-top:1px solid var(--hikaku-line);
}
.hikaku-count{font-size:.89rem; color:var(--hikaku-sub); margin-right:auto; line-height:1.4}
.hikaku-count b{color:var(--hikaku-brand-d); font-size:1.12rem}

.hikaku-wrap .hikaku-btn{
  font:inherit; font-size:.88rem; font-weight:600; line-height:1.4;
  padding:9px 20px; border-radius:8px; cursor:pointer; margin:0;
  border:1px solid var(--hikaku-brand); background:var(--hikaku-brand); color:#fff;
  transition:.14s; white-space:nowrap; text-decoration:none; box-shadow:none; width:auto; height:auto;
}
.hikaku-wrap .hikaku-btn:hover:not(:disabled){background:var(--hikaku-brand-d); border-color:var(--hikaku-brand-d); color:#fff}
.hikaku-wrap .hikaku-btn:disabled{opacity:.4; cursor:not-allowed}
.hikaku-wrap .hikaku-btn.is-ghost{background:#fff; color:var(--hikaku-sub); border-color:#c3ccd5}
.hikaku-wrap .hikaku-btn.is-ghost:hover:not(:disabled){background:#eef2f5; color:var(--hikaku-ink)}
.hikaku-resultbar{
  display:flex; flex-wrap:wrap; gap:10px; align-items:center;
  padding:13px 16px; background:#e8f6f8; border-bottom:1px solid #a9d6de;
  color:var(--hikaku-brand-d); font-size:.9rem; font-weight:600; line-height:1.4;
}
.hikaku-resultbar .hikaku-btn{margin-left:auto}

/* hidden 属性を display:flex より優先させる */
.hikaku-actbar[hidden],
.hikaku-resultbar[hidden]{display:none!important}

@media (max-width:600px){
  .hikaku-wrap{--hikaku-selw:46px}
  .hikaku-hint{display:none}
  .hikaku-note{font-size:.8rem; margin-left:0}
  .hikaku-topbar,
  .hikaku-actbar,
  .hikaku-resultbar{padding:11px 12px}
  .hikaku-wrap .hikaku-btn{padding:9px 14px}
}