:root{
  --bg:#fff9fb;--panel:#fff;--text:#2f292c;--muted:#756c70;--pink:#dc6683;--pink-dark:#bd4967;
  --pink-soft:#f9e7ed;--line:#eadde2;--shadow:0 10px 30px rgba(97,55,68,.08);--radius:16px;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
}
*{box-sizing:border-box}html{background:var(--bg);color:var(--text)}body{margin:0;background:linear-gradient(180deg,#fff 0,#fff9fb 440px)}a{color:inherit}.shell{width:min(1180px,calc(100% - 24px));margin:0 auto}
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}.header-inner{min-height:58px;display:flex;align-items:center;justify-content:space-between;gap:12px}.brand{font-weight:900;text-decoration:none}.back-blog{font-size:13px;font-weight:800;color:var(--pink-dark);text-decoration:none}
.home-main,.ranking-main{padding:34px 0 64px}.hero,.page-heading{margin-bottom:24px}.hero h1,.page-heading h1{margin:.2em 0;font-size:clamp(28px,5vw,48px);line-height:1.15}.page-heading h1{font-size:clamp(28px,4vw,40px)}.hero p,.page-heading p{color:var(--muted);line-height:1.8}.eyebrow{font-size:12px!important;font-weight:900;letter-spacing:.14em;color:var(--pink-dark)!important}
.tool-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.tool-card{display:block;padding:20px;border:1px solid var(--line);border-radius:var(--radius);background:#fff;box-shadow:var(--shadow);text-decoration:none}.tool-card span{font-size:11px;font-weight:900;color:var(--pink-dark)}.tool-card h2{margin:8px 0}.tool-card p{margin:0;color:var(--muted);line-height:1.6}.tool-card.is-live{border:2px solid #efbccb}
.filter-card{margin:0 0 14px;padding:12px 14px;border:2px solid #efd0da;border-radius:18px;background:#fff;box-shadow:var(--shadow)}.mcr-filter-title{margin:0 0 6px;font-size:18px}.filter-section{padding:8px 0;border-top:1px solid #f0e7ea}.filter-section:first-of-type{border-top:0}.filter-section h3,.search-section label{display:block;margin:0 0 6px;font-size:13px;font-weight:900}.sub-label{margin:7px 0 5px;font-size:11px;font-weight:800;color:var(--muted)}.chips{display:flex;flex-wrap:wrap;gap:5px}.chips button,.page-tabs button,.ranking-table th button{appearance:none;border:1px solid #e4d9dd;background:#fff;color:#554d51;border-radius:9px;padding:5px 8px;font-size:11px;font-weight:800;line-height:1.15;cursor:pointer}.chips button.active,.page-tabs button.active{border-color:var(--pink);background:var(--pink-soft);color:#9e3855}.search-section input{width:100%;min-height:38px;padding:7px 10px;border:1px solid #ddd2d6;border-radius:10px;font:inherit}.reset-button{width:100%;margin-top:7px;min-height:38px;border:0;border-radius:10px;background:#595156;color:#fff;font-weight:900;cursor:pointer}
.ranking-controls{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:12px 0 8px}.page-tabs{display:flex;align-items:center;gap:5px;flex-wrap:wrap}.price-only{display:inline-flex;align-items:center;gap:6px;padding:6px 9px;border:1px solid #e4dde0;border-radius:10px;background:#fff;color:#6f696c;font-size:11px;font-weight:800;white-space:nowrap}.price-only input{width:17px;height:17px;margin:0;accent-color:var(--pink)}.summary{font-size:12px;color:var(--muted);font-weight:800}
.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:14px;background:#fff;box-shadow:var(--shadow)}.ranking-table{width:100%;min-width:1050px;border-collapse:collapse}.ranking-table th,.ranking-table td{padding:10px 8px;border-bottom:1px solid #f0e8eb;text-align:center;font-size:12px;white-space:nowrap}.ranking-table th{position:sticky;top:0;z-index:5;background:#fff7fa;font-size:11px}.ranking-table td.cpu-name{text-align:left;font-weight:900}.ranking-table tbody tr:hover{background:#fff9fb}.ranking-table th button{padding:4px 7px;background:#fff}.price-link{color:#a63a59;font-weight:900;text-decoration:none}.empty-state{padding:42px 12px;text-align:center;color:var(--muted)}.data-note{font-size:11px;color:var(--muted);line-height:1.7}.site-footer{padding:24px 0;border-top:1px solid var(--line);background:#fff;color:var(--muted);font-size:12px}
@media(max-width:700px){.shell{width:min(100% - 16px,1180px)}.site-header .header-inner{min-height:52px}.brand{font-size:14px}.back-blog{font-size:11px}.ranking-main{padding-top:18px}.filter-card{margin-bottom:8px;padding:8px 10px;border-radius:15px}.mcr-filter-title{margin-bottom:6px;font-size:16px;line-height:1.2}.filter-section{padding:5px 0}.filter-section h3,.search-section label{margin-bottom:4px;font-size:12px;line-height:1.2}.chips{gap:4px}.chips button,.page-tabs button{padding:4px 7px;border-radius:8px;font-size:10.5px;line-height:1.15}.sub-label{margin:4px 0 3px;font-size:10.5px}.search-section input{min-height:34px;padding:6px 9px;font-size:12px}.reset-button{min-height:36px;margin-top:6px;padding:6px 10px;font-size:11px}.ranking-controls{align-items:flex-start;flex-direction:column}.summary{align-self:flex-end}.ranking-table th{top:0}.tool-grid{grid-template-columns:1fr}}

.compare-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:8px 0;padding:10px 12px;border:1px solid #efd4dc;border-radius:14px;background:#fff;box-shadow:var(--shadow);font-size:12px}.compare-bar>div:first-child{display:flex;align-items:center;gap:8px;min-width:0}.compare-selected{display:flex;gap:4px;flex-wrap:wrap}.compare-selected span{padding:3px 6px;border-radius:999px;background:var(--pink-soft);color:#8f3650;font-size:10px;font-weight:800}.compare-actions{display:flex;gap:6px}.compare-actions button{border:1px solid #e1d5d9;border-radius:9px;padding:6px 9px;background:#fff;font-weight:900;cursor:pointer}.compare-actions .compare-open{border-color:var(--pink);background:var(--pink);color:#fff}.compare-actions button:disabled{opacity:.45;cursor:not-allowed}.compare-cell input{width:17px;height:17px;accent-color:var(--pink)}.compare-modal[hidden]{display:none}.compare-modal{position:fixed;inset:0;z-index:200;background:rgba(30,23,26,.55);display:flex;align-items:center;justify-content:center;padding:16px}.compare-dialog{width:min(1100px,100%);max-height:90vh;overflow:hidden;border-radius:16px;background:#fff;box-shadow:0 24px 70px rgba(0,0,0,.28)}.compare-dialog-head{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid var(--line)}.compare-dialog-head h2{margin:0;font-size:18px}.compare-dialog-head button{width:36px;height:36px;border:0;border-radius:50%;background:#f4edef;font-size:22px;cursor:pointer}.compare-content{overflow:auto;max-height:calc(90vh - 62px)}.compare-table{width:100%;min-width:760px;border-collapse:collapse}.compare-table th,.compare-table td{padding:10px 9px;border-right:1px solid #eee3e7;border-bottom:1px solid #eee3e7;text-align:center;font-size:12px;white-space:nowrap}.compare-table thead th{position:sticky;top:0;background:#fff3f7;z-index:2}.compare-table tbody th{position:sticky;left:0;background:#fffafb;text-align:left;z-index:1}.compare-modal-open{overflow:hidden}
@media(max-width:700px){.compare-bar{align-items:stretch;flex-direction:column}.compare-bar>div:first-child{align-items:flex-start;flex-direction:column}.compare-actions{width:100%}.compare-actions button{flex:1}.compare-selected{width:100%}}

.compare-list-wrap{margin:8px 0 12px}
.compare-list-wrap[hidden]{display:none}

/* 2026-10-08: comparison table uses the exact same sizing as the main table.
   No compare-specific cell/font sizing here on purpose. */


/* 2026-10-08: revert CPU table scale to the earlier compact layout */
.ranking-table{
  width:100%;
  min-width:1050px;
  border-collapse:collapse;
  table-layout:auto;
}
.ranking-table th,
.ranking-table td{
  padding:10px 8px;
  border-bottom:1px solid #f0e8eb;
  text-align:center;
  font-size:12px;
  white-space:nowrap;
  vertical-align:middle;
}
.ranking-table th{
  position:sticky;
  top:0;
  z-index:5;
  background:#fff7fa;
  font-size:11px;
}
.ranking-table .compare-cell{
  width:auto;
  min-width:0;
}
.ranking-table .cpu-name{
  min-width:0;
  text-align:left;
  font-weight:900;
}
.ranking-table .cpu-name strong{
  display:block;
  font-size:inherit;
  line-height:1.2;
  font-weight:900;
}
.ranking-table .cpu-sub{
  display:block;
  margin-top:1px;
  color:#6c6468;
  font-size:10.5px;
  font-weight:500;
  line-height:1.15;
}
.ranking-table .rank-cell{
  width:auto;
  min-width:0;
  font-weight:400;
}
.ranking-table .score-cell{min-width:0}
.ranking-table tbody tr{height:auto}
.score-pill{
  display:inline-block;
  padding:2px 8px;
  border-radius:999px;
  background:#fff5a8;
  font-weight:900;
  line-height:1.2;
}
.price-pill{
  display:inline-block;
  padding:3px 8px;
  border-radius:999px;
  background:#fff0f4;
  color:#bd4f6b;
  font-weight:900;
  text-decoration:none;
}
@media(max-width:700px){
  .ranking-table{
    min-width:1050px;
  }
  .ranking-table th,
  .ranking-table td{
    padding:8px 7px;
    font-size:11px;
  }
  .ranking-table th{font-size:10.5px}
  .ranking-table .cpu-name strong{font-size:12px}
  .ranking-table .cpu-sub{font-size:9.5px}
}

/* 2026-10-08: refine comparison clear button */
.compare-list-actions{
  margin:8px 0 6px;
}
.compare-list-actions .compare-clear{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:32px;
  padding:5px 11px;
  border:1px solid #dfa5b6;
  border-radius:999px;
  background:#fff7fa;
  color:#a33f5c;
  font-size:10.5px;
  font-weight:900;
  line-height:1;
  box-shadow:none;
  cursor:pointer;
}
.compare-list-actions .compare-clear:hover{
  background:#fdebf1;
  border-color:#d97897;
}
.compare-list-actions .compare-clear:active{
  transform:translateY(1px);
}
@media(max-width:700px){
  .compare-list-actions .compare-clear{
    min-height:30px;
    padding:4px 10px;
    font-size:10px;
  }
}


/* 2026-10-08 mobile grid restore: compact, predictable widths and complete cell frames. */
.ranking-table{
  width:100%;
  min-width:1100px;
  table-layout:fixed;
  border-collapse:collapse;
}
.ranking-table th,.ranking-table td{
  border-right:1px solid #e6dbe0;
  border-bottom:1px solid #e6dbe0;
  padding:7px 5px;
  overflow:hidden;
  text-overflow:clip;
}
.ranking-table th:last-child,.ranking-table td:last-child{border-right:0}
.ranking-table th{background:#fff0f5;border-bottom:2px solid #ddccd3}
.ranking-table th button{max-width:100%;white-space:normal;overflow-wrap:anywhere}
.ranking-table th:nth-child(1),.ranking-table td:nth-child(1){width:50px}
.ranking-table th:nth-child(2),.ranking-table td:nth-child(2){width:190px}
.ranking-table th:nth-child(3),.ranking-table td:nth-child(3){width:52px}
.ranking-table th:nth-child(4),.ranking-table td:nth-child(4){width:100px}
.ranking-table th:nth-child(5),.ranking-table td:nth-child(5){width:48px}
.ranking-table th:nth-child(6),.ranking-table td:nth-child(6){width:58px}
.ranking-table th:nth-child(7),.ranking-table td:nth-child(7){width:58px}
.ranking-table th:nth-child(8),.ranking-table td:nth-child(8){width:70px}
.ranking-table th:nth-child(9),.ranking-table td:nth-child(9){width:60px}
.ranking-table th:nth-child(10),.ranking-table td:nth-child(10){width:80px}
.ranking-table th:nth-child(11),.ranking-table td:nth-child(11){width:72px}
.ranking-table th:nth-child(12),.ranking-table td:nth-child(12){width:85px}
.ranking-table th:nth-child(13),.ranking-table td:nth-child(13){width:110px}
.ranking-table th:nth-child(14),.ranking-table td:nth-child(14){width:90px}
.ranking-table .cpu-name{
  width:190px;
  min-width:0;
  max-width:190px;
  white-space:normal;
  overflow-wrap:anywhere;
  word-break:normal;
  text-align:left;
}
.ranking-table .cpu-name strong{
  white-space:normal;
  overflow-wrap:anywhere;
  line-height:1.22;
}
.ranking-table .cpu-sub{
  white-space:normal;
  overflow-wrap:anywhere;
  line-height:1.18;
}
.ranking-table .compare-cell input{width:16px;height:16px;margin:0;vertical-align:middle}
@media(max-width:700px){
  .ranking-table{min-width:1100px}
  .ranking-table th,.ranking-table td{padding:6px 4px;font-size:10.5px}
  .ranking-table .cpu-name strong{font-size:11.5px}
  .ranking-table .cpu-sub{font-size:9px}
  .ranking-table .score-pill{padding:2px 5px}
  .ranking-table th button{padding:3px 3px;font-size:10px}
}

/* SOCKET_FILTER_FOLD_20261008: show common sockets; tuck away legacy/BGA sockets. */
.socket-more{flex:0 0 100%;min-width:0;margin-top:3px}
.socket-more>summary{display:inline-flex;align-items:center;gap:6px;cursor:pointer;list-style:none;border:1px solid #e4d9dd;background:#fff7fa;border-radius:9px;padding:6px 10px;font-size:11px;font-weight:800;line-height:1.3;color:#a33f5c}
.socket-more>summary::-webkit-details-marker{display:none}
.socket-more>summary::before{content:"▸";font-size:13px;line-height:1;display:inline-block;transition:transform .15s ease}
.socket-more[open]>summary::before{transform:rotate(90deg)}
.socket-more .socket-hide{display:none}
.socket-more[open] .socket-hide{display:inline}
.socket-more[open] .socket-show{display:none}
.socket-more-chips{padding-top:7px}
@media(max-width:700px){.socket-more>summary{font-size:10.5px;padding:5px 8px}}

/* 2026-10-08: sortable CPU table headers are whole tappable cells, not inset buttons. */
.ranking-table thead th.sort-header{
  cursor:pointer;
  user-select:none;
  -webkit-tap-highlight-color:rgba(220,102,131,.15);
  background:#fff0f5;
  transition:background-color .12s ease;
  white-space:normal;
  overflow-wrap:anywhere;
  line-height:1.35;
}
.ranking-table thead th.sort-header::after{
  content:" ↕";
  color:#9e7885;
  font-size:10px;
  white-space:nowrap;
}
.ranking-table thead th.sort-header.is-sort-active{background:#fbe0e9;color:#973451}
.ranking-table thead th.sort-header.sort-asc::after{content:" ↑";color:#973451}
.ranking-table thead th.sort-header.sort-desc::after{content:" ↓";color:#973451}
.ranking-table thead th.sort-header:hover{background:#fce4ed}
.ranking-table thead th.sort-header:focus-visible{
  outline:2px solid #b94770;
  outline-offset:-3px;
  background:#fce4ed;
}
@media(max-width:700px){
  .ranking-table thead th.sort-header{padding:7px 4px;line-height:1.28}
  .ranking-table thead th.sort-header::after{font-size:9px}
}

/* Ranking switch shared between PC and smartphone */
.ranking-switch{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin:0 0 12px;padding:9px 11px;border:1px solid #efd9df;border-radius:14px;background:#fff}
.ranking-switch strong{font-size:12px;margin-right:5px;color:#6d3544}
.ranking-switch a,.ranking-switch span{display:inline-flex;align-items:center;justify-content:center;min-height:36px;padding:7px 13px;border:1px solid #eadce1;border-radius:10px;background:#f7f6f7;color:#786d71;font-size:12px;font-weight:900;text-decoration:none}
.ranking-switch .active{border-color:var(--pink);background:var(--pink-soft);color:#a33f5c}
.ranking-switch small{font-size:10.5px;color:#7e7076}
@media(max-width:700px){.ranking-switch{padding:7px;gap:5px}.ranking-switch strong{width:100%;font-size:11px}.ranking-switch a,.ranking-switch span{flex:1;min-height:31px;padding:5px 10px;font-size:11px}.ranking-switch small{width:100%;font-size:9px}}


/* Mobile CPU name column: two-thirds width, full wrapping (2026-10-08). */
@media (max-width:700px) {
  /* All 14 columns: 190px -> 126px for CPU, total table width shrinks with it. */
  .ranking-main .ranking-table{
    width:1060px;
    min-width:1060px;
    max-width:none;
    table-layout:fixed;
  }
  .ranking-main .ranking-table th:nth-child(2),
  .ranking-main .ranking-table td:nth-child(2),
  .ranking-main .ranking-table .cpu-name{
    width:126px;
    min-width:126px;
    max-width:126px;
  }
  .ranking-main .ranking-table .cpu-name,
  .ranking-main .ranking-table .cpu-name strong,
  .ranking-main .ranking-table .cpu-sub{
    white-space:normal;
    overflow-wrap:anywhere;
    word-break:normal;
  }
  .ranking-main .ranking-table .cpu-name strong{
    display:block;
    line-height:1.22;
  }
}


/* Shared tools-site footer: blog policy/about links and copyright. */
.site-footer-inner{display:flex;flex-direction:column;align-items:center;gap:13px;text-align:center}
.site-footer-links{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:9px}
.site-footer-link{display:inline-flex;align-items:center;justify-content:center;min-height:38px;padding:8px 13px;border:1px solid #ead1d9;border-radius:11px;background:#fff7fa;color:#a33f5c;font-size:12px;font-weight:800;line-height:1.4;text-decoration:none;transition:background .15s,border-color .15s}
.site-footer-link:hover,.site-footer-link:focus-visible{background:#fbe8ef;border-color:#d87997}
.site-footer-copyright{display:block;color:#756c70;font-size:11px;line-height:1.6}
@media(max-width:700px){.site-footer{padding:18px 0}.site-footer-inner{gap:11px}.site-footer-links{width:100%;gap:7px}.site-footer-link{min-height:36px;padding:7px 9px;font-size:10.5px}}


/* 2026-10-08: About button at top right on every screen size. */
.header-inner .brand{min-width:0}
.header-links{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex:0 0 auto}
.header-links .back-blog{white-space:nowrap}
.header-about{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:34px;padding:6px 11px;
  border:1px solid #e5b8c7;border-radius:10px;
  background:#fff0f5;color:#9d3f5b;
  font-size:12px;font-weight:900;text-decoration:none;white-space:nowrap;
}
.header-about:hover,.header-about:focus-visible{background:#fbe0ea;border-color:#d97897}
@media(max-width:700px){
  .header-inner{gap:6px}
  .header-inner .brand{font-size:12px;line-height:1.25}
  .header-links{gap:6px}
  .header-links .back-blog{font-size:10px}
  .header-about{font-size:10px;min-height:30px;padding:5px 7px;border-radius:8px}
}

/* CPUランキング: 価格なしのCPUも比較欄のチェック枠を残し、選択不可を明示 */
.ranking-table .compare-cell .compare-check:disabled{opacity:.43;cursor:not-allowed}