/* CPU 価格比較 [alitoku_cpu]。左に絞り込み (サイドバー)、右に機種ごとの比較表。
   部品は Android 16/17 の Material 3 Expressive に合わせる: 色はアクセント (すべて = 深い青緑、AMD 選択時は赤、Intel 選択時は青) から作る淡い面 (surface container) の重ね、
   大きい角丸 (カード 28px)、丸いボタン、つながったボタン群 (選択で丸くなる)、チェック付き絞り込み、丸い検索バー。DUX のダークモード (html.darking) にも対応 */
.ali-cpu{--accent:#0f766e;
  --primary:var(--accent);--on-primary:#fff;
  --pc:color-mix(in srgb,var(--accent) 16%,#fff);--on-pc:color-mix(in srgb,var(--accent) 62%,#000);           /* primary container */
  --sc:color-mix(in srgb,var(--accent) 11%,#fff);--on-sc:color-mix(in srgb,var(--accent) 48%,#241a17);         /* secondary container (選択状態) */
  --bg:#f3f4f6;                                                            /* surface */
  --c0:#fff;                                                                                                    /* surface container lowest (カード) */
  --c1:#fafafb;--c2:#f1f2f4;--c3:#e9eaee;
  --text:#1c1d21;--muted:#5f636b;
  --outline:#80848c;--line:#e3e5e9;
  --good:#146c2e;--good-c:#d7f5dd;--sub:#667085;--gold:#a87920;--warn:#8c4a00;--warn-c:#ffe2c4;--blue:#2b5bb5;--star:#f2a600;--heart:#e8436a;
  --ease:cubic-bezier(.2,0,0,1);
  color:var(--text);font-size:14px;line-height:1.55;letter-spacing:.01em;
  font-family:"Google Sans Flex","Google Sans",Roboto,"Noto Sans JP",-apple-system,BlinkMacSystemFont,"Hiragino Sans",sans-serif}
.ali-cpu[data-brand="AMD"]{--accent:#d3141c}
.ali-cpu[data-brand="Intel"]{--accent:#0068b5}
html.darking .ali-cpu{--primary:color-mix(in srgb,var(--accent) 62%,#fff);--on-primary:color-mix(in srgb,var(--accent) 45%,#000);
  --pc:color-mix(in srgb,var(--accent) 26%,#14181b);--on-pc:color-mix(in srgb,var(--accent) 25%,#fff);
  --sc:color-mix(in srgb,var(--accent) 24%,#1c1c1e);--on-sc:color-mix(in srgb,var(--accent) 30%,#fff);
  /* DUX のダークテーマの色 (背景 #0c0f14 / 面 #14181b / 線 #1d2025) に合わせる */
  --bg:#0c0f14;--c0:#191d22;--c1:#1e2329;
  --c2:#22272d;--c3:#2a3037;
  --text:#e2e4e8;--muted:#9a9fa7;--outline:#5c626b;--line:#2a2f36;
  --good:#7fdc95;--good-c:#1d3a25;--heart:#ff6b8b;--sub:#9aa1ae;--gold:#d2a64a;--warn:#ffb870;--warn-c:#3d2a14;--blue:#9cc0ff}

/* すべて (深い青緑) のダーク: 明るい青緑のボタン + 暗い文字 */
html.darking .ali-cpu:not([data-brand]){--primary:#3cc9b5;--on-primary:#062420}

/* ===== ページ全体 (このショートコードがあるページだけ): テーマの枠を外して画面幅いっぱいに。中身は 1180px で中央 ===== */
body:has(#ali-cpu-root){overflow-x:hidden}
.ali-cpu .layout{scroll-margin-top:140px}
/* テーマのヘッダー (PC のヘッダー、スマホのメニュー行・検索) はこのページでは出さず、代わりにページ内の上部の帯 (.top) を画面上に固定する */
body:has(#ali-cpu-root) header.header,body:has(#ali-cpu-root) .m-icon-nav,body:has(#ali-cpu-root) .site-search{display:none !important}
body:has(#ali-cpu-root){padding-top:0 !important}
/* 固定 (sticky) が効くよう、テーマの入れ物のはみ出し指定を外す */
body:has(#ali-cpu-root) section.container,body:has(#ali-cpu-root) .pagecontent,body:has(#ali-cpu-root) .content,body:has(#ali-cpu-root) .content-wrap,body:has(#ali-cpu-root) .article-content,body:has(#ali-cpu-root) article{overflow:visible !important}
body:has(#ali-cpu-root) section.container{max-width:none !important;width:100% !important;padding:0 !important;margin-top:0 !important;margin-bottom:0 !important;background:#f3f4f6 !important}
html.darking body:has(#ali-cpu-root) section.container{background:#0c0f14 !important}
body:has(#ali-cpu-root) .pagecontent{padding:0 !important;margin:0 !important;background:transparent !important;box-shadow:none !important;border:0 !important;border-radius:0 !important}
body:has(#ali-cpu-root) .article-header,body:has(#ali-cpu-root) .article-title{display:none !important}
body:has(#ali-cpu-root) .article-content{padding:0 !important;margin:0 !important;max-width:none !important;background:transparent !important}
body:has(#ali-cpu-root) .article-content>p:empty{display:none}
.ali-cpu#ali-cpu-root{width:100vw;max-width:100vw;margin:0 calc(50% - 50vw);background:var(--bg);padding:0 0 48px;transition:background .3s var(--ease)}
.ali-cpu .in{max-width:1180px;margin:0 auto;padding:0 20px}
.ali-cpu *{box-sizing:border-box}
.ali-cpu button{font:inherit;line-height:1.4;margin:0;-webkit-tap-highlight-color:transparent}
.ali-cpu button:focus-visible,.ali-cpu a:focus-visible,.ali-cpu select:focus-visible{outline:3px solid var(--primary);outline-offset:2px}
.ali-cpu .ic{display:inline-block;width:1.15em;height:1.15em;vertical-align:-.2em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* ===== 上部: ロゴ・検索・価格の見方 (白い帯) → ブランドの下線タブ → 説明と件数 + CPU のイラスト ===== */
/* 上部 2 段 (ロゴ・検索の帯 + ブランドのタブ) をまとめて画面上に固定 */
.ali-cpu .stick{position:-webkit-sticky;position:sticky;top:var(--wp-admin--admin-bar--height,0px);z-index:1000;transform:translateZ(0);will-change:transform;box-shadow:0 1px 6px rgba(0,0,0,.05);margin-bottom:20px}
html.darking .ali-cpu .stick{box-shadow:0 1px 8px rgba(0,0,0,.45)}
.ali-cpu .top{background:var(--c0);border-bottom:1px solid var(--line)}
.ali-cpu .top .in{display:flex;align-items:center;gap:28px;height:68px}
.ali-cpu .logo{display:flex;align-items:center;gap:10px;flex:none;text-decoration:none !important;color:inherit !important;border-radius:10px}
.ali-cpu .logo:hover .ltxt b{opacity:.8}
.ali-cpu .lmark{width:34px;height:34px;flex:none;fill:none;stroke:var(--primary);stroke-width:6.6;stroke-linecap:round;stroke-linejoin:round;transition:stroke .3s var(--ease)}
.ali-cpu .ltxt{display:flex;flex-direction:column;line-height:1.1}
.ali-cpu .ltxt b{font-size:21px;font-weight:800;letter-spacing:.02em;color:var(--text)}
.ali-cpu .ltxt .lpre{color:var(--primary);font-weight:800;margin-right:.28em;transition:color .3s var(--ease)}
.ali-cpu .search{flex:1;display:flex;align-items:center;gap:10px;height:44px;max-width:720px;background:var(--c0);box-shadow:inset 0 0 0 1px var(--line);border-radius:12px;padding:0 4px 0 14px;margin:0;cursor:text;transition:box-shadow .2s var(--ease)}
.ali-cpu .search:hover{box-shadow:inset 0 0 0 1px var(--outline)}
.ali-cpu .search:focus-within{box-shadow:inset 0 0 0 2px var(--primary)}
.ali-cpu .search .ic{width:20px;height:20px;color:var(--muted)}
.ali-cpu .search input{flex:1;min-width:0;border:0 !important;background:transparent !important;color:var(--text);font-size:15px;padding:0 !important;margin:0;height:100%;outline:none;box-shadow:none !important}
.ali-cpu .search input::placeholder{color:#a3a8b0;opacity:1}
html.darking .ali-cpu .search input::placeholder{color:#5d636c}
.ali-cpu .search .ic{color:#a3a8b0}
html.darking .ali-cpu .search .ic{color:#5d636c}
.ali-cpu .sbtn{flex:none;height:36px;border:0;border-radius:9px;background:var(--primary);color:var(--on-primary);font-size:14px;font-weight:700;padding:0 22px;cursor:pointer;transition:filter .2s var(--ease)}
.ali-cpu .sbtn:hover{filter:brightness(1.06)}
.ali-cpu .btabs{background:var(--c0);border-bottom:1px solid var(--line)}
.ali-cpu .btabs .in{display:flex;align-items:center;justify-content:space-between;gap:12px}
.ali-cpu .tl{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none}
.ali-cpu .tl::-webkit-scrollbar{display:none}
.ali-cpu .tl button{position:relative;flex:none;height:46px;border:0;background:none;color:var(--text);font-size:14px;font-weight:500;padding:0 16px;cursor:pointer;border-radius:8px 8px 0 0;transition:color .2s var(--ease),background .2s var(--ease)}
.ali-cpu .tl button:hover{background:var(--c1)}
/* テーマのボタン枠・押したあとの枠を消す (タブの行は横スクロールで外側の枠が切れて線だけ残るため、キーボード操作時だけ内側に枠) */
.ali-cpu .tl button{border:0 !important;box-shadow:none !important;outline:none}
.ali-cpu .tl button:focus-visible{outline:2px solid var(--primary);outline-offset:-4px}
/* クーポン一覧へのボタン (価格推移ボタンと同じ色付きの面の丸ボタン) */
.ali-cpu .cplink{display:inline-flex;align-items:center;gap:6px;height:34px;margin-left:auto;margin-right:16px;padding:0 14px;border-radius:999px;background:var(--sc);color:var(--on-sc) !important;text-decoration:none !important;font-size:13px;font-weight:700;white-space:nowrap;flex:none;transition:background .2s var(--ease)}
.ali-cpu .cplink:hover{background:color-mix(in srgb,var(--on-sc) 9%,var(--sc))}
.ali-cpu .cplink .ic{width:16px;height:16px}
.ali-cpu .tl button::after{content:"";position:absolute;left:12px;right:12px;bottom:0;height:3px;border-radius:3px 3px 0 0;background:var(--primary);transform:scaleX(0);transition:transform .25s var(--ease)}
.ali-cpu .tl button.on{font-weight:700}
.ali-cpu .tl button.on::after{transform:scaleX(1)}
.ali-cpu .upd{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);white-space:nowrap;flex:none}
.ali-cpu .btabs{margin-bottom:0}
.ali-cpu .tr{display:flex;align-items:center;gap:16px;flex:none}
.ali-cpu .cnt{display:flex;margin:0;font-size:12px;color:var(--muted);white-space:nowrap}
.ali-cpu .cnt span+span::before{content:"/";margin:0 8px;color:var(--outline)}
.ali-cpu .cnt b{font-weight:700;color:var(--text);margin-right:2px;font-variant-numeric:tabular-nums}

/* ===== つながったボタン群 (外側は丸、内側は小さい角。選ぶと丸くなり、チェックが付く) ===== */
.ali-cpu .seg{display:inline-flex;gap:2px}
.ali-cpu .seg button{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:40px;border:0;background:var(--c3);color:var(--text);padding:0 18px;font-size:14px;font-weight:500;cursor:pointer;border-radius:8px;
  transition:border-radius .25s var(--ease),background .2s var(--ease),color .2s var(--ease)}
.ali-cpu .seg button:first-child{border-radius:999px 8px 8px 999px}
.ali-cpu .seg button:last-child{border-radius:8px 999px 999px 8px}
.ali-cpu .seg button:hover{background:color-mix(in srgb,var(--text) 8%,var(--c3))}
.ali-cpu .seg button.on{background:var(--sc);color:var(--on-sc);font-weight:700;border-radius:999px}
.ali-cpu .seg .ck{display:none;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.ali-cpu .seg button.on .ck{display:inline-block}

/* ===== 2 列 ===== */
/* 一覧・絞り込みは重なり順 0 に閉じ込める (角丸 + overflow:hidden のカードが、ブラウザによって固定した帯より手前に描かれるのを防ぐ) */
.ali-cpu .layout{position:relative;z-index:0;isolation:isolate;display:grid;grid-template-columns:232px minmax(0,1fr);gap:20px;align-items:start}
.ali-cpu .side{position:sticky;top:calc(var(--wp-admin--admin-bar--height,0px) + 128px);max-height:calc(100vh - var(--wp-admin--admin-bar--height,0px) - 140px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;background:var(--c0);border-radius:18px;padding:10px 10px 12px}
.ali-cpu .sidetg{display:none}
.ali-cpu .fg{padding:0 0 6px}
.ali-cpu .fg+.fg{border-top:1px solid var(--line);padding-top:6px}
.ali-cpu .fh{display:flex;align-items:center;justify-content:space-between;width:100%;height:34px;background:none;border:0;border-radius:999px;color:var(--muted);font-size:12.5px;font-weight:600;padding:0 12px;cursor:pointer}
.ali-cpu .fh:hover{background:color-mix(in srgb,var(--text) 6%,transparent)}
.ali-cpu .fh::after{content:"";width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-135deg);margin-top:4px;transition:transform .25s var(--ease)}
.ali-cpu .fg.closed .fh::after{transform:rotate(45deg);margin-top:-4px}
.ali-cpu .fg.closed .fl{display:none}
.ali-cpu .fl{display:flex;flex-direction:column;gap:2px}
/* 一覧の項目 (選ぶと丸い面 + チェック) */
.ali-cpu .opt{display:flex;align-items:center;gap:10px;width:100%;min-height:36px;background:none;border:0;border-radius:999px;color:var(--text);font-size:13.5px;padding:0 14px 0 12px;cursor:pointer;text-align:left;transition:background .2s var(--ease)}
.ali-cpu .opt:hover{background:color-mix(in srgb,var(--text) 7%,transparent)}
.ali-cpu .opt.on{background:var(--sc);color:var(--on-sc);font-weight:700}
.ali-cpu .opt[disabled]{opacity:.38;cursor:default;background:none}
.ali-cpu .opt .t{flex:1;min-width:0}
.ali-cpu .opt .n{font-size:12px;color:inherit;opacity:.7;font-variant-numeric:tabular-nums}
/* チェックボックス (18px、角 3px、選ぶと塗り) */
.ali-cpu .cb{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border:2px solid var(--muted);border-radius:3px;flex:none;transition:background .15s var(--ease),border-color .15s var(--ease)}
.ali-cpu .cb.on{background:var(--primary);border-color:var(--primary)}
.ali-cpu .cb svg{width:14px;height:14px;fill:none;stroke:var(--on-primary);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}

.ali-cpu .main{min-width:0}
.ali-cpu .mainbar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;margin:0 4px 12px}
.ali-cpu .mbr{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ali-cpu .summary{margin:0;font-size:14px;color:var(--text)}
.ali-cpu .summary b{font-size:20px;font-weight:700;margin-right:2px}
.ali-cpu .summary span{font-size:12px;color:var(--muted)}
.ali-cpu .sort{display:inline-flex;align-items:center;gap:8px;height:40px;background:var(--c3);border-radius:999px;padding:0 6px 0 16px;flex:none}
.ali-cpu .sort .sl{font-size:12px;color:var(--muted);white-space:nowrap}
.ali-cpu .sort .ic{display:none}
.ali-cpu .sort select{border:0;background:transparent;color:var(--text);font-size:14px;font-weight:600;padding:0 6px;height:100%;margin:0;outline:none;cursor:pointer}
.ali-cpu .empty{background:var(--c0);border-radius:18px;padding:48px 16px;text-align:center;color:var(--muted)}

/* ===== 機種カード (塗りのカード、角 28px) ===== */
.ali-cpu .model{background:var(--c0);border-radius:18px;margin-bottom:16px;overflow:hidden;box-shadow:0 1px 2px rgba(0,0,0,.05),0 1px 3px 1px rgba(0,0,0,.03)}
html.darking .ali-cpu .model{box-shadow:none}
.ali-cpu .mhead{display:flex;gap:16px;align-items:center;padding:14px 14px 14px 14px}
.ali-cpu .mimg{flex:none;width:84px;height:84px;border-radius:12px;background:#fff;display:flex;align-items:center;justify-content:center;overflow:hidden}
.ali-cpu .mimg img{width:100%;height:100%;object-fit:contain;margin:0}
.ali-cpu .mtt{flex:1;min-width:0}
.ali-cpu .meye{font-size:11px;font-weight:600;letter-spacing:.1em;color:var(--muted)}
.ali-cpu .mname{font-size:23px;font-weight:700;margin:0;padding:0;border:0;background:none;color:var(--text);line-height:1.2;letter-spacing:0}
.ali-cpu .mname::before,.ali-cpu .mname::after{display:none}
.ali-cpu .mname a{color:inherit !important;text-decoration:none !important;display:inline-flex;align-items:center;gap:6px}
.ali-cpu .mname a .ic{width:16px;height:16px;color:var(--muted);opacity:0;transition:opacity .2s var(--ease)}
.ali-cpu .mname a:hover{text-decoration:underline !important;text-underline-offset:4px;text-decoration-thickness:2px !important}
.ali-cpu .mname a:hover .ic,.ali-cpu .mname a:focus-visible .ic{opacity:1}
@media (hover:none){.ali-cpu .mname a .ic{opacity:.6}}
.ali-cpu .msub{display:flex;flex-wrap:wrap;align-items:center;margin-top:4px;font-size:13px;color:var(--muted)}
.ali-cpu .msub span+span::before{content:"";display:inline-block;width:1px;height:12px;background:var(--line);margin:0 10px;vertical-align:-1px}
.ali-cpu .fav{display:inline-flex;align-items:center;justify-content:center;flex:none;border:0;background:none;color:var(--outline);cursor:pointer;border-radius:999px;transition:background .2s var(--ease),color .2s var(--ease)}
.ali-cpu .fav .ic{fill:none;stroke:currentColor}
.ali-cpu .fav:hover{background:var(--c2);color:var(--heart)}
.ali-cpu .fav.on{color:var(--heart)}
.ali-cpu .fav.on .ic{fill:currentColor}
.ali-cpu .mnrow{display:flex;align-items:center;gap:4px;min-width:0}
.ali-cpu .favm{width:34px;height:34px}
.ali-cpu .favm .ic{width:22px;height:22px}
.ali-cpu .favs{width:24px;height:24px;margin-left:-2px}
.ali-cpu .favs .ic{width:15px;height:15px}
.ali-cpu .fhint{margin:4px 12px 2px;font-size:11.5px;color:var(--muted);line-height:1.5}
.ali-cpu .fhint .ic{width:13px;height:13px;color:var(--heart);margin-right:2px}
.ali-cpu .mbest{flex:none;text-align:right;padding:0 6px 0 16px}
.ali-cpu .mbest .lbl{font-size:12px;color:var(--muted)}
.ali-cpu .mbest .bp{display:none}
.ali-cpu .mbest .v{font-size:32px;font-weight:700;color:var(--primary);line-height:1.15;font-variant-numeric:tabular-nums}
.ali-cpu .thead,.ali-cpu .row{display:grid;grid-template-columns:36px minmax(0,1fr) 190px 130px 136px;gap:12px;align-items:center;padding-left:20px;padding-right:20px}
.ali-cpu .thead{font-size:12px;font-weight:500;color:var(--muted);padding-top:6px;padding-bottom:6px;border-top:1px solid var(--line)}
.ali-cpu .row{padding-top:8px;padding-bottom:8px;border-top:1px solid var(--line);transition:background .2s var(--ease)}
.ali-cpu .row:hover{background:var(--c1)}
.ali-cpu .row>div{min-width:0}
.ali-cpu .row.top{background:var(--sc)}   /* サイドバーの選択中の項目と同じ色 */
.ali-cpu .rank{width:32px;height:32px;border-radius:50%;background:var(--c3);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:var(--muted)}
.ali-cpu .row.top .rank{background:var(--primary);color:var(--on-primary);border-radius:12px}
.ali-cpu .sn{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.ali-cpu .store{font-weight:700;font-size:15px}
.ali-cpu .badge{display:inline-flex;align-items:center;gap:3px;height:20px;font-size:11px;font-weight:600;border-radius:6px;padding:0 6px;background:var(--c2);color:var(--muted)}
.ali-cpu .badge.dom{background:var(--warn-c);color:var(--warn)}
.ali-cpu .paynow{display:inline-block;margin-top:2px;padding:1px 7px;border-radius:5px;background:#ffe14d;color:#3a2e00;font-size:11px;font-weight:700;line-height:1.5}
html.darking .ali-cpu .paynow{background:#4a3f0c;color:#ffe680}
.ali-cpu .badge.choice{background:#ffe14d;color:#3a2e00;letter-spacing:.02em}
html.darking .ali-cpu .badge.choice{background:#4a3f0c;color:#ffe680}
.ali-cpu .badge.bulk{background:var(--c2);color:var(--muted)}
.ali-cpu .badge.box{background:color-mix(in srgb,var(--blue) 14%,var(--c0));color:var(--blue)}
.ali-cpu .badge .ic{width:1.1em;height:1.1em}
.ali-cpu .meta{display:flex;flex-wrap:wrap;align-items:center;font-size:12px;color:var(--muted);margin-top:2px}
.ali-cpu .meta i{display:inline-block;width:3px;height:3px;border-radius:50%;background:var(--outline);margin:0 8px}
.ali-cpu .meta .rt .ic{color:var(--star);fill:var(--star);stroke:var(--star);margin-right:3px}
/* 割引の列 (クーポン・ストアクーポン・コイン、価格に反映済み)。クーポンはコードとコピーの小さな札 + 割引額 */
.ali-cpu .cpcell{display:flex;flex-direction:column;align-items:flex-start;gap:3px}
.ali-cpu .dl{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--sub);white-space:nowrap}
.ali-cpu .dl b{font-weight:700;color:var(--text)}
.ali-cpu .dl.cpl b{color:var(--primary);font-size:13px}
.ali-cpu .dl .ic{color:var(--sub)}
.ali-cpu .dl.coin .ic{color:var(--gold)}
.ali-cpu .dl.soon{color:var(--primary);font-weight:600;white-space:normal;align-items:flex-start}
.ali-cpu .dl.soon .nw{white-space:nowrap}
.ali-cpu .dl.soon em{font-style:normal;display:inline-block;margin-right:4px;padding:0 5px;border-radius:4px;border:1px solid currentColor;font-size:10.5px;line-height:15px}
.ali-cpu .dl.soon b{color:var(--primary)}
.ali-cpu .dl.soon .ic{color:var(--primary)}
/* コイン割引の使い方 (カーソルを当てる / タップで表示) */
.ali-cpu .tip{position:relative;cursor:help;outline:none}
.ali-cpu .tip::after{content:attr(data-tip);position:absolute;left:0;top:calc(100% + 8px);z-index:20;width:max-content;max-width:260px;white-space:normal;padding:8px 11px;border-radius:10px;background:#322f2e;color:#f5efed;font-size:12px;font-weight:400;line-height:1.5;box-shadow:0 3px 10px rgba(0,0,0,.25);opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .15s var(--ease),transform .15s var(--ease),visibility .15s}
html.darking .ali-cpu .tip::after{background:#e7e1df;color:#322f2e}
@media (hover:hover){.ali-cpu .tip:hover::after,.ali-cpu .tip:focus-visible::after,.ali-cpu .tip.show::after{opacity:1;visibility:visible;transform:none}}
/* スマホ: タップで行の下に説明とコイン割引ページのリンク */
.ali-cpu .coinpop{margin:6px 0 2px;padding:9px 11px;border-radius:10px;background:var(--c2);color:var(--text);font-size:12px;line-height:1.5;white-space:normal;max-width:260px}
.ali-cpu .coinpop a{display:inline-flex;align-items:center;gap:5px;margin-top:6px;font-weight:700;color:var(--primary) !important;text-decoration:none !important}
.ali-cpu .coinpop a .ic{width:14px;height:14px}
.ali-cpu .coinpop a .ic:first-child{color:var(--gold)}
.ali-cpu .tip:hover,.ali-cpu .tip.show{color:var(--text)}
.ali-cpu .cp{display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 7px 0 9px;border:1px solid var(--line);border-radius:6px;background:var(--c1);color:var(--text);cursor:pointer;white-space:nowrap;transition:background .2s var(--ease),border-color .2s var(--ease)}
.ali-cpu .cp:hover{border-color:var(--outline)}
.ali-cpu .cp .code{font-size:12px;font-weight:700;letter-spacing:.04em}
.ali-cpu .cp .ic{width:13px;height:13px;color:var(--muted)}
.ali-cpu .cp.copied{background:var(--sc);border-color:transparent}
.ali-cpu .price .tx{font-size:11px;color:var(--sub);white-space:normal;line-height:1.35}
.ali-cpu .nocp{color:var(--muted)}
.ali-cpu .price{white-space:nowrap}
.ali-cpu .price .base{display:flex;align-items:baseline;gap:5px;font-size:12px;color:var(--muted)}
.ali-cpu .price .base .bl{font-size:10px;color:var(--sub)}
.ali-cpu .price .base s{text-decoration:line-through}
.ali-cpu .ml{font-size:12px;color:var(--muted);white-space:nowrap}
.ali-cpu .price .fin{font-size:22px;font-weight:700;line-height:1.2;font-variant-numeric:tabular-nums}
.ali-cpu .price .src{font-size:11px;color:var(--muted)}
.ali-cpu .goc{text-align:right}
/* 塗りのボタン (丸、高さ 40px。押すと角が少し四角くなる) */
.ali-cpu .go{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:40px;background:var(--primary);color:var(--on-primary) !important;text-decoration:none !important;border-radius:999px;padding:0 18px;font-size:14px;font-weight:600;white-space:nowrap;transition:border-radius .25s var(--ease),box-shadow .2s var(--ease),filter .2s var(--ease)}
.ali-cpu .go:hover{box-shadow:0 1px 3px rgba(0,0,0,.25);filter:brightness(1.06)}
.ali-cpu .go:active{border-radius:12px}
.ali-cpu .mfoot{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 14px 14px;border-top:1px solid var(--line)}
/* テキストボタンと、色付きの面のボタン */
.ali-cpu .mfr{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
/* Amazon の最安 (外枠の丸ボタン) */
.ali-cpu .amz{display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 14px;border:1px solid var(--line);border-radius:999px;background:var(--c0);color:var(--text) !important;text-decoration:none !important;font-size:13px;white-space:nowrap;transition:border-color .2s var(--ease)}
.ali-cpu .amz:hover{border-color:var(--outline)}
.ali-cpu .amz .al{font-size:11px;font-weight:700;color:#c45500}
html.darking .ali-cpu .amz .al{color:#ff9e3d}
.ali-cpu .amz.rk .al{color:#bf0000}
html.darking .ali-cpu .amz.rk .al{color:#ff6b6b}
.ali-cpu .amz b{font-weight:700}
.ali-cpu .amz .ic{width:14px;height:14px;color:var(--muted)}
.ali-cpu .morebtn,.ali-cpu .histbtn{display:inline-flex;align-items:center;gap:8px;height:40px;border:0;border-radius:999px;font-size:14px;font-weight:600;padding:0 16px;cursor:pointer;transition:background .2s var(--ease)}
.ali-cpu .morebtn{background:none;color:var(--primary)}
.ali-cpu .morebtn:hover{background:color-mix(in srgb,var(--primary) 9%,transparent)}
.ali-cpu .histbtn{background:var(--sc);color:var(--on-sc)}
.ali-cpu .histbtn:hover{background:color-mix(in srgb,var(--on-sc) 9%,var(--sc))}
.ali-cpu .histbtn.on{background:var(--primary);color:var(--on-primary)}
/* 価格推移 */
.ali-cpu .hist{border-top:1px solid var(--line);padding:12px 20px 16px;background:var(--c0)}
.ali-cpu .htabs{display:inline-flex;gap:2px;margin-bottom:8px}
.ali-cpu .htabs button{height:32px;font-size:13px;color:var(--text);background:var(--c3);border:0;border-radius:6px;padding:0 14px;cursor:pointer;transition:border-radius .25s var(--ease),background .2s var(--ease)}
.ali-cpu .htabs button:first-child{border-radius:999px 6px 6px 999px}
.ali-cpu .htabs button:last-child{border-radius:6px 999px 999px 6px}
.ali-cpu .htabs button.on{background:var(--sc);color:var(--on-sc);font-weight:700;border-radius:999px}
.ali-cpu .hchart{position:relative}
.ali-cpu .hsvg{display:block;max-width:100%}
.ali-cpu .hsvg .gl{stroke:var(--line);stroke-width:1}
.ali-cpu .hsvg .yl,.ali-cpu .hsvg .xl{fill:var(--muted);font-size:11px}
.ali-cpu .hsvg .yl{text-anchor:end}
.ali-cpu .hsvg .ln{fill:none;stroke-width:2.5;stroke-linejoin:round}
.ali-cpu .hsvg .cur{stroke:var(--outline);stroke-width:1;stroke-dasharray:3 3}
.ali-cpu .htip{position:absolute;top:4px;min-width:160px;background:#322f2e;color:#f5efed;border-radius:12px;padding:8px 12px;font-size:12px;pointer-events:none;box-shadow:0 2px 6px rgba(0,0,0,.2)}
.ali-cpu .htip i,.ali-cpu .hleg i{display:inline-block;flex-shrink:0;width:10px;height:10px;border-radius:50%;margin-right:5px;vertical-align:-1px}
.ali-cpu .hleg{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--muted);margin-top:8px}
.ali-cpu .hleg span{display:flex;align-items:center;gap:6px;min-width:0}
.ali-cpu .hleg s{text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;color:var(--text)}
.ali-cpu .hleg b,.ali-cpu .hleg em{white-space:nowrap;flex-shrink:0}
.ali-cpu .hleg b{color:var(--text)}
.ali-cpu .hleg em{font-style:normal}
.ali-cpu .hnote{font-size:11px;color:var(--muted);margin-top:6px}
.ali-cpu .hempty{font-size:13px;color:var(--muted);padding:20px 0;text-align:center}
.ali-cpu .note{font-size:12px;color:var(--muted);background:var(--c0);border-radius:16px;padding:14px 20px;margin-top:8px}
.ali-cpu .note h3{margin:0 0 6px;padding:0;border:0;background:none;font-size:14px;font-weight:700;color:var(--text)}
.ali-cpu .note h3::before,.ali-cpu .note h3::after{display:none}
.ali-cpu .note{scroll-margin-top:140px}
.ali-cpu .note ul{margin:0;padding-left:18px}
.ali-cpu .note li{margin:3px 0;list-style:disc}
/* スナックバー */
.ali-cpu .toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,8px);background:#322f2e;color:#f5efed;padding:14px 20px;border-radius:12px;font-size:14px;opacity:0;transition:opacity .2s var(--ease),transform .25s var(--ease);pointer-events:none;z-index:99;box-shadow:0 3px 8px rgba(0,0,0,.25)}
html.darking .ali-cpu .toast{background:#e7e1df;color:#322f2e}
.ali-cpu .toast.show{opacity:1;transform:translate(-50%,0)}

/* ===== 中くらいの幅: 表の列を詰める ===== */
@media (max-width:1080px){
  .ali-cpu .thead,.ali-cpu .row{grid-template-columns:32px minmax(0,1fr) 168px 116px 120px;gap:10px}
  .ali-cpu .go{padding:0 14px;font-size:13px}
  .ali-cpu .mname{font-size:21px}
  .ali-cpu .mbest .v{font-size:26px}
  .ali-cpu .mimg{width:76px;height:76px}
}
/* ===== タブレット・スマホ: サイドバーは「絞り込み」ボタンで開く ===== */
@media (max-width:860px){
  .ali-cpu .top .in{flex-wrap:wrap;height:auto;gap:10px 16px;padding-top:10px;padding-bottom:10px}
  .ali-cpu .search{order:3;flex:1 1 100%;max-width:none}
  .ali-cpu .layout{grid-template-columns:minmax(0,1fr);gap:12px}
  .ali-cpu .side{position:static;padding:0;overflow:hidden;border-radius:16px;max-height:none}
  .ali-cpu .sidetg{display:flex;align-items:center;gap:10px;width:100%;height:52px;background:none;border:0;color:var(--text);font-size:15px;font-weight:600;padding:0 20px;cursor:pointer}
  .ali-cpu .sidetg::after{content:"";margin-left:auto;width:7px;height:7px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);transition:transform .25s var(--ease)}
  .ali-cpu .side.open .sidetg::after{transform:rotate(-135deg)}
  .ali-cpu .sidebody{display:none;padding:4px 12px 14px}
  .ali-cpu .side.open .sidebody{display:block}
  /* 絞り込みはチップ (角 8px、選ぶとチェック付きの塗り) */
  .ali-cpu .fl{flex-direction:row;flex-wrap:wrap;gap:8px;padding:0 4px}
  .ali-cpu .opt{width:auto;min-height:32px;gap:6px;border:1px solid var(--outline);border-radius:8px;padding:0 12px 0 8px;font-size:13px}
  .ali-cpu .opt.on{border-color:transparent}
  .ali-cpu .opt .cb{width:16px;height:16px;border:0;background:none}
  .ali-cpu .opt .cb:not(.on){display:none}
  .ali-cpu .opt .cb svg{stroke:currentColor}
  .ali-cpu .opt:not(.on){padding-left:12px}
}
/* ===== スマホ: 表は 2 段 ===== */
@media (max-width:640px){
  /* スマホ: 固定部分を低く (ロゴは印だけで検索と同じ行、件数の行は省き、クーポン一覧はタブの右端) */
  .ali-cpu .top .in{flex-wrap:nowrap;gap:10px;padding-top:8px;padding-bottom:8px}
  .ali-cpu .ltxt{display:none}
  .ali-cpu .lmark{width:30px;height:30px}
  .ali-cpu .search{order:0;flex:1 1 auto;height:42px}
  .ali-cpu .btabs .in{flex-wrap:nowrap;gap:6px}
  .ali-cpu .tl{flex:1 1 auto;min-width:0}
  .ali-cpu .btabs .tr{display:none}
  .ali-cpu .cplink{order:0 !important;margin:0 0 0 auto !important;height:30px !important;padding:0 10px;font-size:12px !important}
  .ali-cpu .cplink .ic:last-child{display:none}
  .ali-cpu .ltxt b{font-size:18px}
  .ali-cpu .sbtn{padding:0 14px}
  .ali-cpu .tl button{height:42px;padding:0 12px;font-size:13px}
  .ali-cpu .stick{margin-bottom:12px}
  .ali-cpu .cnt{font-size:11px}
  .ali-cpu .mbr{width:100%;flex-direction:column;align-items:stretch}
  .ali-cpu .mbr .seg{width:100%}
  .ali-cpu .mbr .seg button{white-space:nowrap;flex:1 1 auto;padding:0 8px;font-size:12px}
  .ali-cpu .mbr .seg .ck{width:14px;height:14px}
  .ali-cpu .sort{justify-content:space-between}
  .ali-cpu .in{padding:0 12px}
  .ali-cpu .seg{display:flex}
  .ali-cpu .seg button{flex:1;padding:0 8px;min-width:0 !important;font-size:13px}
  .ali-cpu .mainbar{flex-wrap:wrap}
  .ali-cpu .model{border-radius:16px}
  .ali-cpu .mhead{gap:12px;padding:12px;flex-wrap:wrap}
  .ali-cpu .mimg{width:60px;height:60px;border-radius:10px}
  .ali-cpu .mname{font-size:20px}
  .ali-cpu .mbest{width:100%;text-align:left;display:flex;align-items:baseline;justify-content:space-between;padding:8px 2px 0;border-top:1px solid var(--line)}
  .ali-cpu .mbest .v{font-size:24px}
  .ali-cpu .mbest{gap:12px}
  .ali-cpu .mbest .lbl{flex:1;min-width:0;line-height:1.35}
  .ali-cpu .mbest .v{flex:none;white-space:nowrap}
  .ali-cpu .mbest .bp{display:none}
  .ali-cpu .thead{display:none}
  .ali-cpu .row{grid-template-columns:28px minmax(0,1fr) auto;gap:8px 10px;padding:12px 14px;align-items:start}
  .ali-cpu .rank{width:28px;height:28px;font-size:12px;grid-row:1}
  .ali-cpu .row.top .rank{border-radius:10px}
  .ali-cpu .row .info{grid-column:2;grid-row:1}
  .ali-cpu .row .price{grid-column:3;grid-row:1;text-align:right}
  .ali-cpu .row .price .base{justify-content:flex-end}
  .ali-cpu .row .cpcell{grid-column:2;grid-row:2;align-self:center}
  .ali-cpu .row .goc{grid-column:3;grid-row:2;align-self:center}
  .ali-cpu .go{padding:0 14px;font-size:13px}
  .ali-cpu .price .fin{font-size:20px}
  .ali-cpu .mfoot{padding:8px 8px 10px}
  .ali-cpu .morebtn,.ali-cpu .histbtn{font-size:13px;padding:0 12px}
  .ali-cpu .mfoot{flex-direction:column;align-items:stretch;gap:6px}
  .ali-cpu .mfoot>span:empty{display:none}
  .ali-cpu .morebtn{justify-content:center}
  .ali-cpu .mfr{justify-content:flex-start;gap:6px}
  .ali-cpu .amz{height:34px;padding:0 10px;font-size:12px}
  .ali-cpu .histbtn{height:34px;margin-left:auto}
  .ali-cpu .hist{padding:12px 14px 14px}
}

/* beta 表記 (2026-10-24) */
.ali-cpu .ltxt b .beta{display:inline-block;vertical-align:middle;margin-left:8px;padding:2px 6px 3px;border:1.5px solid var(--primary);border-radius:5px;color:var(--primary);font-size:11px;font-weight:800;letter-spacing:.04em;line-height:1;position:relative;top:-2px}

/* いまの条件の札 (保存中の表示) (2026-10-24) */
.ali-cpu .conds{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:-4px 4px 12px}
.ali-cpu .conds[hidden]{display:none}
.ali-cpu .conds .cl{font-size:12px;font-weight:700;color:var(--muted,#6b7280);margin-right:2px}
.ali-cpu .conds .cd{display:inline-flex;align-items:center;gap:6px;font:inherit;font-size:12.5px;font-weight:700;line-height:1;padding:6px 8px 6px 11px;border-radius:999px;border:1px solid color-mix(in srgb,var(--primary) 35%,transparent);background:color-mix(in srgb,var(--primary) 10%,transparent);color:var(--primary);cursor:pointer}
.ali-cpu .conds .cd span{font-size:14px;opacity:.7}
.ali-cpu .conds .cd:hover{background:color-mix(in srgb,var(--primary) 18%,transparent)}
.ali-cpu .conds .cdr{font:inherit;font-size:12px;font-weight:700;padding:6px 8px;border:0;background:none;color:var(--muted,#6b7280);text-decoration:underline;cursor:pointer}

/* サイドバーの一番下: 設定をクリア / 設定を保持しない (2026-10-24) */
.ali-cpu .sset .fh0{height:34px;display:flex;align-items:center;padding:0 12px;color:var(--muted);font-size:12.5px;font-weight:600}
.ali-cpu .sset .sclr{display:block;width:calc(100% - 8px);margin:2px 4px 6px;padding:9px 12px;font:inherit;font-size:13px;font-weight:700;color:var(--primary);background:none;border:1px solid color-mix(in srgb,var(--primary) 40%,transparent);border-radius:999px;cursor:pointer}
.ali-cpu .sset .sclr:hover{background:color-mix(in srgb,var(--primary) 10%,transparent)}
.ali-cpu .sset .fhint{margin:6px 12px 4px}
/* 「設定をクリア」は開閉の外 (スマホでも常に表示) (10/26) */
.ali-cpu .sclrw{padding:4px 8px 10px}
.ali-cpu .sclrw .sclr{display:block;width:100%;margin:0;padding:9px 12px;font:inherit;font-size:13px;font-weight:700;color:var(--primary);background:none;border:1px solid color-mix(in srgb,var(--primary) 40%,transparent);border-radius:999px;cursor:pointer}
.ali-cpu .sclrw .sclr:hover{background:color-mix(in srgb,var(--primary) 10%,transparent)}
@media (max-width:860px){ .ali-cpu .sclrw{padding:0 12px 12px} }