/* SoundBounty Spec：記事の部品（製品カード・ランク・五角形・点数バー・一覧表）。
   見本は design/spec-pages/。クラス名はすべて sb- で始め、SWELL の部品とぶつからないようにする。 */
:root{
  --sb-paper:#FFFFFF;
  --sb-ink:#111214;
  --sb-ink-2:#55585D;
  --sb-ink-3:#8A8D92;
  --sb-rule:#E4E5E7;
  --sb-fill:#F4F4F5;
  --sb-red:#C8281E;
  --sb-avg:#A3A7AD;
  --sb-sans:'IBM Plex Sans JP','Hiragino Kaku Gothic ProN','Hiragino Sans','Yu Gothic','YuGothic','Meiryo','Noto Sans JP','Noto Sans CJK JP',sans-serif;
  --sb-mono:'IBM Plex Mono','IBM Plex Sans JP','Hiragino Kaku Gothic ProN','Hiragino Sans','Yu Gothic','YuGothic','Meiryo','Noto Sans JP','Noto Sans CJK JP',ui-monospace,Menlo,monospace;
}
.sb-card,.sb-score,.sb-list,.sb-rule,.sb-sheet{font-family:var(--sb-sans);color:var(--sb-ink)}
.sb-card a:focus-visible,.sb-sheet button:focus-visible,.sb-rule summary:focus-visible{outline:2px solid var(--sb-red);outline-offset:2px}
.sb-error{font-size:13px;color:var(--sb-red);border:1px dashed var(--sb-red);padding:8px 12px}

/* ランク */
.sb-rank{display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:26px;padding:0 8px;font-weight:700;font-size:14px;line-height:1;letter-spacing:.02em;border-radius:2px;font-family:var(--sb-mono);vertical-align:middle}
.sb-rank-S{background:#111214;color:#fff}
.sb-rank-A{background:#C8281E;color:#fff}
.sb-rank-B{background:#55585D;color:#fff}
.sb-rank-C{background:#E4E5E7;color:#111214}
.sb-legendrank{display:flex;gap:18px;flex-wrap:wrap;align-items:center;font-size:13px;color:var(--sb-ink-2);margin:14px 0}
.sb-legendrank>span{display:inline-flex;align-items:center;gap:8px}

/* 製品カード */
.sb-card{display:grid;grid-template-columns:220px minmax(0,1fr);gap:28px;margin:24px 0;padding:24px;border:1px solid var(--sb-rule);background:var(--sb-paper)}
.sb-card-img{aspect-ratio:1/1;background:var(--sb-fill);display:flex;align-items:center;justify-content:center;overflow:hidden}
.sb-card-img img{width:100%;height:100%;object-fit:contain;margin:0}
.sb-card-img span{font-size:11px;color:var(--sb-ink-3)}
.sb-pmaker{font-size:12.5px;color:var(--sb-ink-2)}
.sb-pname{font-size:24px;font-weight:700;line-height:1.3}
.sb-rankline{display:flex;align-items:center;gap:10px;margin-top:10px;font-size:13px;color:var(--sb-ink-2);flex-wrap:wrap}
.sb-rankline a{color:var(--sb-ink)}
.sb-rankline-t{line-height:1.6}
.sb-rankline-t b{color:var(--sb-ink)}
.sb-dl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:18px 0 0;border-top:1px solid var(--sb-rule)}
.sb-dl div{padding:10px 12px 10px 0;border-bottom:1px solid var(--sb-rule)}
.sb-dl dt{font-size:11.5px;color:var(--sb-ink-3);font-weight:400;margin:0}
.sb-dl dd{margin:0;font-size:15px;font-weight:700;font-variant-numeric:tabular-nums}
.sb-dl .sb-dl-wide{grid-column:1 / -1}
.sb-dl .sb-dl-wide dd{font-size:14px}
.sb-dl dd small{font-weight:400;font-size:12px;color:var(--sb-ink-2);margin-left:2px}
.sb-btns{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}
.post_content .sb-btn,.sb-btn{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;font-size:14px;font-weight:700;text-decoration:none;border:1px solid var(--sb-ink);color:var(--sb-ink);background:var(--sb-paper)}
.post_content .sb-btn-primary,.sb-btn-primary{background:var(--sb-ink);color:var(--sb-paper)}
.sb-btn:hover{background:var(--sb-fill)}
.sb-btn-primary:hover{background:#2A2C30}
.post_content .sb-btn-official,.sb-btn-official{font-weight:500;color:var(--sb-ink);background:transparent;border-color:#B8BBC0}
.sb-btn-official::after{content:"↗";margin-left:6px;font-size:12px}

/* 五角形と点数バー */
.sb-score{display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:40px;align-items:start;margin:24px 0}
.sb-radar svg{display:block;width:100%;height:auto;font-family:var(--sb-sans)}
.sb-radar .sb-mono{font-family:var(--sb-mono)}
.sb-legend{display:flex;gap:18px;font-size:12.5px;color:var(--sb-ink-2);margin-top:6px;justify-content:center;flex-wrap:wrap}
.sb-legend i{display:inline-block;width:18px;height:0;border-top:2px solid var(--sb-red);vertical-align:middle;margin-right:6px}
.sb-legend i.sb-avg{border-top:1.5px dashed var(--sb-avg)}
.sb-rows{border-top:1px solid var(--sb-ink)}
.sb-row{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:16px;row-gap:4px;align-items:baseline;padding:16px 0 18px;border-bottom:1px solid var(--sb-rule)}
.sb-row-name{font-weight:700;font-size:15px;line-height:1.4}
.sb-row .sb-basis{grid-column:1 / -1;font-weight:400;font-size:13px;line-height:1.6;color:var(--sb-ink-2)}
.sb-row .sb-val{grid-column:1 / -1;justify-self:start;font-size:13px;line-height:1.6;color:var(--sb-ink);background:var(--sb-fill);padding:3px 10px;margin:2px 0 0}
.sb-row .sb-k{display:inline-block;font-size:11px;font-weight:700;color:var(--sb-ink-3);margin-right:8px;letter-spacing:.03em}
.sb-row .sb-bar{grid-column:1 / -1;margin-top:10px}
.sb-bar{position:relative;height:6px;background:var(--sb-fill)}
.sb-bar b{position:absolute;inset:0 auto 0 0;background:var(--sb-ink)}
.sb-bar u{position:absolute;top:-4px;bottom:-4px;width:2px;background:var(--sb-avg);text-decoration:none}
.sb-pts{font-family:var(--sb-mono);font-size:20px;line-height:1;text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.sb-pts small{font-size:11px;color:var(--sb-ink-3)}
.sb-pts.sb-np{font-size:12px}

/* 点数の付け方 */
.sb-rule{margin:28px 0;border-top:1px solid var(--sb-rule)}
.sb-rule summary{cursor:pointer;padding:14px 0;font-size:14px;font-weight:700;list-style:none;display:flex;justify-content:space-between}
.sb-rule summary::-webkit-details-marker{display:none}
.sb-rule summary::after{content:"＋";font-weight:400;color:var(--sb-ink-2)}
.sb-rule[open] summary::after{content:"－"}
.sb-rtable{overflow-x:auto}
.sb-rtable table{border-collapse:collapse;width:100%;min-width:640px;font-size:13px;margin:0}
.sb-rtable th,.sb-rtable td{padding:8px 10px;border:0;border-bottom:1px solid var(--sb-rule);text-align:left;white-space:nowrap;background:none}
.sb-rtable th{font-weight:700;color:var(--sb-ink-2);font-size:12px}
.sb-rtable td.sb-c{font-family:var(--sb-mono);text-align:center}
/* 段階で決める項目は条件が文章なので折り返す */
.sb-rtable td{white-space:normal;min-width:6em;vertical-align:top}
.sb-rtable td:first-child,.sb-rtable td:nth-child(2){min-width:8em}

/* 一覧表（ショートコードの表／編集者が作った表 共通） */
.sb-filters{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:20px 0 14px}
.sb-search{font:inherit;font-size:14px;padding:8px 12px;border:1px solid var(--sb-ink);min-width:220px;max-width:100%;background:var(--sb-paper)}
.sb-count{font-size:13px;color:var(--sb-ink-2);margin-left:auto}
.sb-sheet{overflow-x:auto;border-top:2px solid var(--sb-ink);margin:0 0 8px}
.sb-sheet table{border-collapse:collapse;width:100%;min-width:760px;font-size:14px;margin:0;border:0}
.sb-sheet th,.sb-sheet td{padding:12px;text-align:right;border:0;border-bottom:1px solid var(--sb-rule);white-space:nowrap;font-variant-numeric:tabular-nums;background:var(--sb-paper);vertical-align:middle}
.sb-sheet th:first-child,.sb-sheet td:first-child{text-align:left;position:sticky;left:0;z-index:1}
.sb-sheet thead th{font-weight:700;font-size:12.5px;color:var(--sb-ink-2);vertical-align:bottom;border-bottom:1px solid var(--sb-ink)}
.sb-sheet th button{all:unset;cursor:pointer;display:inline-flex;gap:4px;align-items:baseline}
.sb-sheet th .sb-u{display:block;font-family:var(--sb-mono);font-weight:400;font-size:10.5px;color:var(--sb-ink-3)}
.sb-sheet th[aria-sort] button{color:var(--sb-ink)}
.sb-sheet td.sb-num,.sb-sheet td.sb-sc{font-family:var(--sb-mono);font-size:13.5px}
.sb-sheet td.sb-sc{font-weight:500}
.sb-sheet td .sb-rank{height:24px;min-width:30px;font-size:13px}
.sb-sheet .sb-mk{text-align:center}
.sb-sheet td.sb-tx{text-align:left;white-space:normal;font-size:13px;min-width:11em}
.sb-dash,.sb-np{color:var(--sb-ink-3)}
.sb-np{font-family:var(--sb-sans);font-size:12px}
.sb-pn{font-weight:700}
.sb-pm{display:block;font-size:11.5px;color:var(--sb-ink-3);font-weight:400}
.sb-sheet tr.sb-me td{background:#FBF1EF}
.sb-sheet tr.sb-me td:first-child{box-shadow:inset 3px 0 0 var(--sb-red)}
.sb-fine{font-size:12px;color:var(--sb-ink-3);margin:12px 0 0;max-width:60em}
/* 見出しとセルの揃え（SWELLの表の設定より優先。文字＝左、数値＝右、●＝中央）（0.5.6） */
.post_content .sb-sheet th.sb-tx,.post_content .sb-sheet td.sb-tx,.post_content .sb-sheet th.sb-sc,.post_content .sb-sheet td.sb-sc,.sb-sheet th.sb-tx,.sb-sheet th.sb-sc{text-align:left}
.post_content .sb-sheet th.sb-num,.post_content .sb-sheet td.sb-num{text-align:right}
.post_content .sb-sheet th.sb-mk,.post_content .sb-sheet td.sb-mk{text-align:center}
.post_content .sb-sheet thead th{vertical-align:bottom}
.sb-sheet th.sb-num .sb-u{text-align:right}
.sb-sheet th.sb-mk .sb-u{text-align:center}
/* 横にスクロールしたとき、左端に固定した製品名の列の下にほかの列が透けて重ならないよう、背景を塗って境目に線を引く（0.5.6。追加CSSの background:none より優先） */
.post_content .sb-sheet tbody td:first-child{background:var(--sb-paper);z-index:2;box-shadow:1px 0 0 var(--sb-rule)}
.post_content .sb-sheet tbody tr.sb-me td{background:#FBF1EF}
.post_content .sb-sheet tbody tr.sb-me td:first-child{box-shadow:inset 3px 0 0 var(--sb-red),1px 0 0 var(--sb-rule)}
.post_content .sb-sheet thead th:first-child{z-index:3;box-shadow:1px 0 0 #C9CCD1}
/* 並べ替えの矢印は見出しの右の余白に出す（文字の位置を列の中身とそろえるため） */
/* 0.5.8：矢印は常に表示する（↕＝並べ替えできる、↑↓＝並べ替え中）。
   幅を1文字ぶん固定して見出しの中に置くので、押しても列の幅や文字の位置は動かない。見出しは折り返さない */
.sb-sheet th button,figure.wp-block-table.sb-sortable th button,table.sb-sortable th button{all:unset;cursor:pointer;display:inline-flex;align-items:baseline;gap:3px;white-space:nowrap}
.sb-ar{display:inline-block;width:1em;flex:0 0 1em;text-align:center;font-family:var(--sb-mono);font-weight:400;color:var(--sb-red);line-height:1}
.sb-ar.sb-idle{color:#7C828A}
th button:hover .sb-ar.sb-idle,th button:focus-visible .sb-ar.sb-idle{color:var(--sb-ink)}
th button:focus-visible{outline:2px solid var(--sb-red);outline-offset:2px}
/* 右寄せの数値の列は、矢印を文字の左に置き、見出しの文字の右端を数字の右端にそろえる */
.sb-sheet th.sb-num button{flex-direction:row-reverse}
/* ブロックエディタの表ブロックに sb-sortable を付けたとき */
figure.wp-block-table.sb-sortable{overflow-x:auto;-webkit-overflow-scrolling:touch;border-top:2px solid var(--sb-ink)}
figure.wp-block-table.sb-sortable table{border-collapse:collapse;width:100%;font-size:14px;border:0}
figure.wp-block-table.sb-sortable th,figure.wp-block-table.sb-sortable td{padding:10px 12px;border:0;border-bottom:1px solid var(--sb-rule);background:none}
figure.wp-block-table.sb-sortable thead th{border-bottom:1px solid var(--sb-ink);font-size:12.5px;color:var(--sb-ink-2)}
figure.wp-block-table.sb-sortable th button{all:unset;cursor:pointer;display:inline-flex;gap:4px}
/* 記事の中の比較表（table.sb-sortable）：製品名とランクの列は折り返さない。
   ほかの列も5文字ぶん以上の幅を取り、1〜2文字ずつの細切れの折り返しを防ぐ。入りきらないときは表だけ横にスクロール（0.5.6） */
.post_content .sb-sortable{--swl-minwidth-cell:8em}
.post_content .sb-sortable table th,.post_content .sb-sortable table td{text-align:left;vertical-align:top}
.post_content .sb-sortable table thead th{vertical-align:bottom}
.post_content .sb-sortable table th:first-child,.post_content .sb-sortable table td:first-child,.post_content .sb-sortable table th:nth-child(2),.post_content .sb-sortable table td:nth-child(2){white-space:nowrap}

@media (max-width:860px){
  .sb-card{grid-template-columns:1fr;padding:18px}
  .sb-card-img{aspect-ratio:auto;height:160px}
  .sb-score{grid-template-columns:1fr;gap:20px}
  .sb-radar{max-width:420px;margin:0 auto;width:100%}
}
@media (max-width:520px){
  .sb-dl{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sb-pname{font-size:21px}
  .sb-search{min-width:0;width:100%}
  /* スマホでは固定する製品名の列を細くして、長い製品名は折り返す（右の列を見やすくする） */
  .post_content .sb-sheet th:first-child,.post_content .sb-sheet td:first-child{white-space:normal;word-break:normal;overflow-wrap:break-word;width:10.5em;min-width:10.5em;max-width:10.5em}
  .sb-count{margin-left:0}
}

/* ---- 0.5：購入リンクの予定（編集者だけに見える）・タブ・記事一覧・セール中の製品 ---- */
.sb-slot{font-size:12px;color:var(--sb-ink-3);margin-left:6px}
.sb-slot-box{border:1px dashed var(--sb-avg);padding:10px 14px;margin:16px 0;font-size:13px;color:var(--sb-ink-2)}
.sb-slot-box p{margin:0 0 6px;font-weight:700}
.sb-slot-box ul{margin:0;padding-left:1.2em}
.sb-tabs{margin:24px 0;font-family:var(--sb-sans)}
.sb-tab-in{position:absolute;opacity:0;pointer-events:none}
.sb-tab-labels{display:flex;flex-wrap:wrap;border-bottom:1px solid var(--sb-ink)}
.sb-tab-labels label{cursor:pointer;padding:10px 16px;font-size:14px;color:var(--sb-ink-2);border:1px solid transparent;border-bottom:none;margin-bottom:-1px;background:transparent}
.sb-tab-labels label:hover{color:var(--sb-ink)}
.sb-tab-panel{display:none;padding:18px 0}
.sb-tabs>.sb-tab-in:nth-of-type(1):checked~.sb-tab-panels>.sb-tab-panel:nth-child(1),
.sb-tabs>.sb-tab-in:nth-of-type(2):checked~.sb-tab-panels>.sb-tab-panel:nth-child(2),
.sb-tabs>.sb-tab-in:nth-of-type(3):checked~.sb-tab-panels>.sb-tab-panel:nth-child(3),
.sb-tabs>.sb-tab-in:nth-of-type(4):checked~.sb-tab-panels>.sb-tab-panel:nth-child(4),
.sb-tabs>.sb-tab-in:nth-of-type(5):checked~.sb-tab-panels>.sb-tab-panel:nth-child(5),
.sb-tabs>.sb-tab-in:nth-of-type(6):checked~.sb-tab-panels>.sb-tab-panel:nth-child(6),
.sb-tabs>.sb-tab-in:nth-of-type(7):checked~.sb-tab-panels>.sb-tab-panel:nth-child(7),
.sb-tabs>.sb-tab-in:nth-of-type(8):checked~.sb-tab-panels>.sb-tab-panel:nth-child(8){display:block}
.sb-tabs>.sb-tab-in:nth-of-type(1):checked~.sb-tab-labels>label:nth-child(1),
.sb-tabs>.sb-tab-in:nth-of-type(2):checked~.sb-tab-labels>label:nth-child(2),
.sb-tabs>.sb-tab-in:nth-of-type(3):checked~.sb-tab-labels>label:nth-child(3),
.sb-tabs>.sb-tab-in:nth-of-type(4):checked~.sb-tab-labels>label:nth-child(4),
.sb-tabs>.sb-tab-in:nth-of-type(5):checked~.sb-tab-labels>label:nth-child(5),
.sb-tabs>.sb-tab-in:nth-of-type(6):checked~.sb-tab-labels>label:nth-child(6),
.sb-tabs>.sb-tab-in:nth-of-type(7):checked~.sb-tab-labels>label:nth-child(7),
.sb-tabs>.sb-tab-in:nth-of-type(8):checked~.sb-tab-labels>label:nth-child(8){color:var(--sb-ink);font-weight:700;border-color:var(--sb-ink);background:var(--sb-paper)}
.sb-tabs>.sb-tab-in:focus-visible~.sb-tab-labels{outline:2px solid var(--sb-red);outline-offset:2px}
.sb-posts{list-style:none;margin:0;padding:0}
.sb-posts li{display:flex;align-items:flex-start;gap:14px;padding:12px 0;border-bottom:1px solid var(--sb-rule)}
.sb-posts-thumb{position:relative;flex:0 0 132px;display:block;aspect-ratio:1200/630;overflow:hidden;border:1px solid var(--sb-rule);background:#fff;border-radius:2px}
.sb-posts-thumb img{display:block;width:100%;height:100%;object-fit:cover;margin:0;max-width:none}
.sb-posts-body{flex:1 1 auto;min-width:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 10px}
.sb-posts li a.sb-posts-title{flex:1 1 60%;color:var(--sb-ink);text-decoration:none;font-weight:700}
.sb-posts li a.sb-posts-title:hover{text-decoration:underline}
@media (max-width:600px){.sb-posts-thumb{flex-basis:96px}.sb-posts li{gap:10px}}
.sb-posts-end{font-family:var(--sb-mono);font-size:12px;color:#fff;background:var(--sb-red);padding:2px 6px;border-radius:2px}
.sb-posts-end.sb-open{background:var(--sb-ink-3)}
.sb-posts-date{font-family:var(--sb-mono);font-size:12px;color:var(--sb-ink-3)}
.sb-posts-more{text-align:right;font-size:14px}
.sb-posts-empty{color:var(--sb-ink-2);font-size:14px}
.sb-deals{width:100%;border-collapse:collapse;font-size:14px}
.sb-deals th,.sb-deals td{border-bottom:1px solid var(--sb-rule);padding:8px 10px;text-align:left;white-space:nowrap}
.sb-deals th{font-weight:700;font-size:12.5px;color:var(--sb-ink-2);border-bottom-color:var(--sb-ink)}
.sb-deals s{color:var(--sb-ink-3)}
.sb-deals b{color:var(--sb-red)}
.sb-note{font-size:12.5px;color:var(--sb-ink-2)}
@media (max-width:600px){.sb-tab-labels label{padding:8px 10px;font-size:13px}}
.sb-table-wrap{overflow-x:auto}.sb-deals td.sb-num{font-family:var(--sb-mono)}
.sb-deals small{font-size:12px;color:var(--sb-red);margin-left:4px}.sb-deals td{white-space:normal}
.sb-figure{margin:16px 0;text-align:center}.sb-figure img{max-width:100%;height:auto;border:1px solid var(--sb-rule)}.sb-figure small,.sb-img-credit small{display:block;font-size:12px;color:var(--sb-ink-3);margin-top:4px}.sb-img-credit{margin-top:-12px;text-align:right}

/* 本文の表の見出し：テーマ（SWELL）の濃い色の帯をやめて、薄いグレーに黒い文字にする（0.5.3） */
.post_content table thead th,.post_content table thead td,.post_content .wp-block-table thead th{background:#F2F3F5!important;color:#1A1B1E!important;border-bottom:1px solid #C9CCD1!important;font-weight:700}
.post_content table thead th a,.post_content table thead th button{color:#1A1B1E!important}
.sb-sheet thead th{background:#F2F3F5!important;color:#1A1B1E!important}
.sb-rtable th{background:#F2F3F5!important;color:#1A1B1E!important}

/* 画像のない製品カードは1列にする（0.5.3） */
.sb-card.sb-card-noimg{grid-template-columns:1fr!important}

/* お店の商品画像（0.5.4）：カードの画像と、予算別のおすすめの小さな画像。画像は商品ページへのリンク */
.sb-card-img>a{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%;text-decoration:none}
.sb-card-img>a img{width:100%;height:auto;max-height:calc(100% - 18px);object-fit:contain;margin:0}
.sb-imgcredit{display:block;font-size:10.5px;color:var(--sb-ink-3);margin-top:4px}
.sb-thumb{float:left;width:72px;margin:0 12px 6px 0;text-decoration:none;text-align:center}
.sb-thumb img{width:72px;height:72px;object-fit:contain;margin:0;background:#fff}
.sb-thumb .sb-imgcredit{font-size:9px;margin-top:0;white-space:nowrap;letter-spacing:-.02em}
li:has(>.sb-thumb){display:flow-root;margin-bottom:8px}

/* 五角形を出さない製品（採点できた項目が3つ未満）は棒グラフを全幅に（0.5.5） */
.sb-score:not(:has(.sb-radar)){grid-template-columns:minmax(0,1fr)}

/* 0.5.6：項目ごとの評価の「この項目で見ていること」（初心者向けの説明） */
.post_content p.sb-axis-what{font-size:14px;line-height:1.7;color:var(--sb-ink-2);background:var(--sb-fill);padding:10px 14px;margin:8px 0 12px;border-left:2px solid #C9CCD1}
.post_content p.sb-axis-what::before{content:"この項目で見ていること";display:block;font-size:11.5px;font-weight:700;letter-spacing:.04em;color:var(--sb-ink-3);margin-bottom:2px}

/* セール一覧の購入ボタン（0.5.8） */
.sb-posts-buys{display:inline-flex;flex-wrap:wrap;gap:6px;flex-basis:100%}
.sb-posts li a.sb-posts-buy,.sb-deals a.sb-deals-buy{flex:0 0 auto;display:inline-block;font-size:12px;font-weight:700;line-height:1.4;padding:4px 10px;border:1px solid var(--sb-ink);border-radius:2px;color:var(--sb-ink);background:var(--sb-paper);text-decoration:none;white-space:nowrap}
.sb-posts li a.sb-posts-buy:hover,.sb-deals a.sb-deals-buy:hover{background:var(--sb-ink);color:#fff;text-decoration:none}
.sb-deals td.sb-deals-buys{white-space:nowrap}
.sb-deals td.sb-deals-buys a+a{margin-left:6px}

/* 0.5.9：終わったセール・無料配布のお知らせ */
.sb-ended{border:1px solid var(--sb-ink,#111);border-left:4px solid #C8281E;padding:12px 16px;margin:0 0 24px;background:#fafafa;font-size:15px;line-height:1.7}
.sb-ended p{margin:0}
.sb-ended p+p{margin-top:6px}

/* 0.5.11 記事内の画像：縦長の画面画像が大きくなりすぎないように */
.sb-figure img,figure.sb-figure img{max-height:560px;width:auto;max-width:100%;height:auto;margin-left:auto;margin-right:auto;display:block}
figure.sb-figure figcaption,.sb-figure small{font-size:12px;color:var(--sb-ink-3);text-align:center}

/* 一覧の画像に重ねるバッジ（0.5.13） */
.sb-badge{position:absolute;top:0;left:0;padding:2px 7px;font-size:11px;font-weight:700;line-height:1.5;letter-spacing:.04em;color:#fff;background:#1a1a1a;border-bottom-right-radius:2px}
.sb-badge-new{background:#C8281E}
.sb-badge-ending{background:#B45309}
.sb-badge-ended{background:#6b7280}
@media (max-width:600px){.sb-badge{font-size:10px;padding:1px 5px}}

/* 0.5.16：大きなカードの並び（layout="grid"）・トップの案内帯・スマホの本文16px・サイドバーの空の部品を隠す */
.sb-posts-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.sb-posts-grid li{display:block;padding:0;border:1px solid var(--sb-rule);border-radius:2px;position:relative}
.sb-posts-grid .sb-posts-thumb{display:block;flex:none;width:100%;border:0;border-bottom:1px solid var(--sb-rule);border-radius:0}
.sb-posts-grid .sb-posts-body{padding:10px 12px 12px}
.sb-posts-grid li a.sb-posts-title{flex-basis:100%;font-size:15px;line-height:1.5}
@media (max-width:781px){.sb-posts-grid{grid-template-columns:1fr 1fr;gap:10px}.sb-posts-grid li a.sb-posts-title{font-size:13.5px}}
.sb-hero{margin:0 0 28px}
.sb-hero-lead{font-size:clamp(20px,3.4vw,28px);font-weight:700;line-height:1.5;margin:0 0 14px}
.sb-hero-lead small{display:block;font-size:13px;font-weight:400;color:var(--sb-ink-2);margin-top:6px}
.sb-hero-band{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--sb-red);color:#fff!important;font-weight:700;font-size:17px;padding:14px 18px;text-decoration:none!important;border-radius:2px;margin:0 0 16px}
.sb-hero-band::after{content:"→";font-size:20px}
.sb-hero-band:hover{opacity:.9}
@media (max-width:959px){:root{--swl-fz--content:16px}body .post_content,body .entry-content{font-size:16px!important;line-height:1.85}}
.c-widget:has(.wp-block-latest-comments),.c-widget:has(.wp-block-archives),.c-widget:has(.wp-block-calendar),.c-widget:has(.wp-block-tag-cloud){display:none}

/* 0.5.18：比較ページの上位3製品・段落の余白を少し詰める */
.sb-top3{list-style:none;margin:0 0 8px;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.sb-top3 li{margin:0;padding:0;border:1px solid var(--sb-rule);border-radius:2px;overflow:hidden;background:#fff}
.sb-top3 a{display:block;text-decoration:none;color:var(--sb-ink)}
.sb-top3 img{display:block;width:100%;aspect-ratio:16/10;object-fit:contain;background:#F4F4F5;margin:0;max-width:none}
.sb-top3 b{display:block;padding:10px 12px 0;font-size:15px;line-height:1.4}
.sb-top3 small{display:block;padding:2px 12px 12px;font-size:12.5px;color:var(--sb-ink-2)}
.sb-top3-note{font-size:12.5px;color:var(--sb-ink-2)}
@media (max-width:600px){.sb-top3{grid-template-columns:1fr 1fr 1fr;gap:8px}.sb-top3 b{padding:8px 8px 0;font-size:12.5px}.sb-top3 small{padding:2px 8px 8px;font-size:11px}}
.post_content{--swl-block-margin:1.5em}
.sb-side-ending{margin-bottom:28px}.sb-side-ending .sb-posts li{flex-wrap:wrap}.sb-side-ending .sb-posts-thumb{flex:0 0 100%}
/* 0.5.22：ティアリスト */
.sb-tier{border:1px solid var(--sb-rule);border-radius:2px;margin:0 0 8px;background:#fff}
.sb-tier-row{display:flex;border-bottom:1px solid var(--sb-rule)}
.sb-tier-row:last-child{border-bottom:0}
.sb-tier-label{flex:0 0 56px;display:flex;align-items:center;justify-content:center;font:700 26px/1 var(--sb-mono)}
.sb-tier-S .sb-tier-label{background:#111214;color:#fff}.sb-tier-A .sb-tier-label{background:#C8281E;color:#fff}.sb-tier-B .sb-tier-label{background:#55585D;color:#fff}.sb-tier-C .sb-tier-label{background:#E4E5E7;color:#111214}
.sb-tier-items{flex:1;display:flex;flex-wrap:wrap;gap:8px;padding:10px;min-width:0}
.sb-tier-cell{display:block;width:120px;border:1px solid var(--sb-rule);border-radius:2px;overflow:hidden;background:#fff}
.sb-tier-cell:hover{border-color:var(--sb-ink)}
.sb-tier-item{display:block;text-decoration:none;color:var(--sb-ink)}
.sb-tier-img{display:block;aspect-ratio:16/10;background:#F4F4F5}
.sb-tier-img img{display:block;width:100%;height:100%;object-fit:contain;margin:0;max-width:none}
.sb-tier-noimg{background:repeating-linear-gradient(135deg,#F4F4F5 0 8px,#ECEDEF 8px 16px)}
.sb-tier-name{display:block;padding:6px 8px 8px;font-size:12.5px;font-weight:700;line-height:1.35;overflow-wrap:anywhere}
.sb-tier-name small{display:block;font-size:10.5px;font-weight:400;color:var(--sb-ink-3)}
@media (max-width:600px){.sb-tier-label{flex-basis:40px;font-size:20px}.sb-tier-items{gap:6px;padding:6px}.sb-tier-cell{width:calc(33.33% - 4px)}.sb-tier-name{font-size:11.5px;padding:5px 6px 6px}}
.sb-tt-in{position:absolute;opacity:0;pointer-events:none}
.sb-tt-labels{margin:0 0 14px}
.sb-tt-group{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:0 0 8px}
.sb-tt-gname{flex:0 0 100%;font-size:12px;font-weight:700;color:var(--sb-ink-3);letter-spacing:.04em}
.sb-tt-labels label{cursor:pointer;border:1px solid var(--sb-rule);border-radius:2px;padding:6px 10px;font-size:13px;line-height:1.3;background:#fff}
.sb-tt-labels label:hover{border-color:var(--sb-ink)}
.sb-tt-in:focus-visible~.sb-tt-labels{outline:2px solid var(--sb-red);outline-offset:2px}
.sb-tt-panel{display:none}
.sb-tt-title{margin:0 0 8px}
.sb-tt-more{margin:8px 0 0;font-size:14px}
.sb-tier-N .sb-tier-label{background:#F4F4F5;color:#8A8D92}
.sb-tier-name em{display:block;font-style:normal;font-weight:400;font-size:11px;color:var(--sb-ink-2);margin-top:2px}
.sb-tier-axis-h{margin:22px 0 8px!important}
.sb-tier-axis-h small{display:block;font-size:12px;font-weight:400;color:var(--sb-ink-3);margin-top:2px}
.sb-tt-axes-title{margin:18px 0 0}
/* 0.5.25：項目別のティア表 */
.sb-matrix table{min-width:0}
.sb-matrix th.sb-mx,.sb-matrix td.sb-mx{text-align:center;white-space:normal;min-width:84px}
.sb-matrix td.sb-mx .sb-rank{min-width:34px;height:28px;font-size:15px}
.sb-matrix .sb-mx-v{display:block;font-size:11px;color:var(--sb-ink-2);margin-top:3px;line-height:1.3;font-family:var(--sb-sans)}
.sb-matrix .sb-mx-none{color:var(--sb-ink-3)}
.sb-mx-prod{display:flex;align-items:center;gap:10px;white-space:normal;min-width:150px}
.sb-mx-img{flex:0 0 64px;width:64px;height:40px;object-fit:contain;background:#F4F4F5;border:1px solid var(--sb-rule);margin:0;max-width:none;display:block}
.sb-mx-noimg{background:repeating-linear-gradient(135deg,#F4F4F5 0 6px,#ECEDEF 6px 12px)}
.sb-matrix .sb-pm{display:block;font-size:11px;color:var(--sb-ink-3)}
.sb-matrix .sb-pn{display:block;font-weight:700;font-size:14px}
.sb-matrix .sb-pn a{color:var(--sb-ink)}
@media (max-width:600px){.sb-mx-img{display:none}.sb-mx-prod{min-width:96px}.sb-matrix th.sb-mx,.sb-matrix td.sb-mx{min-width:72px}}
.sb-end-deals{margin:40px 0 0}.sb-end-deals-h{margin:0 0 14px!important}

/* 0.5.29：スマホで一覧のカードが右に見切れる問題の修正。テーマの左余白を消し、2列が中身で広がらないようにし、ボタン・題名は折り返す */
.post_content ul.sb-posts,ul.sb-posts{padding-left:0!important;margin-left:0!important}
.sb-posts-grid li{min-width:0}
.sb-posts-grid li a.sb-posts-title{overflow-wrap:anywhere}
@media (max-width:781px){.sb-posts-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.sb-posts-grid li a.sb-posts-buy{white-space:normal;max-width:100%}.sb-posts-grid .sb-posts-buys{max-width:100%}}
@media (max-width:340px){.sb-posts-grid{grid-template-columns:minmax(0,1fr)}}
.sb-posts-grid img{max-width:100%}
/* 0.5.29：スマホで、パンくずリストの長い題名が右端で切れるのを「…」で省略する */
@media (max-width:781px){.p-breadcrumb__list{display:flex;flex-wrap:nowrap}.p-breadcrumb__item{flex:0 0 auto}.p-breadcrumb__item:last-child{flex:0 1 auto;min-width:0;overflow:hidden}.p-breadcrumb__item:last-child .p-breadcrumb__text{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}

/* 0.5.30：記事の中のリンクを、青い文字＋下線にする（本文・リスト・注記・出典の普通のリンクだけ。見出し・目次・表の製品名・カード・ボタンは今までの見た目のまま） */
.post_content a:not([class]){color:#1a56c4;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.18em}
.post_content a:not([class]):hover{color:#0f3d94}
.post_content :is(h1,h2,h3,h4,h5,h6) a:not([class]),.post_content .sb-matrix a,.post_content .sb-sortable .sb-pn a,.post_content .sb-card a,.post_content .sb-tier-items a,.post_content .sb-top3 a{color:inherit;text-decoration:none}

/* 0.5.50 本文の改行・文字組み：文節の途中で折り返さない／見出しは行の長さをそろえる／数字は本文と同じ字体 */
.post_content,.sb-hero,.sb-card,.sb-sheet{word-break:auto-phrase;line-break:strict;overflow-wrap:break-word}
.post_content p,.post_content li{text-wrap:pretty}
.post_content h1,.post_content h2,.post_content h3,.post_content h4,.post_content figcaption,.post_content .sb-pr-note{text-wrap:balance}
.post_content .sb-sheet td,.post_content .sb-sheet th,.post_content table td,.post_content table th{font-variant-numeric:tabular-nums;font-feature-settings:"palt" 0}
.post_content code,.post_content .sb-num{font-variant-numeric:normal}

/* 0.5.51 表：金額は途中で折り返さない。列が5つ以上の表は、スマホでは横にスクロールさせる（1文字ずつに細切れになるのを防ぐ） */
.sb-nw{white-space:nowrap}
.post_content figure.wp-block-table{overflow-x:auto;-webkit-overflow-scrolling:touch}
.post_content figure.wp-block-table table:has(th:nth-child(5)),.post_content figure.wp-block-table table:has(td:nth-child(5)){min-width:620px}

/* 0.5.53 製品ページの「セールの状況」 */
.sb-salebox{margin:2em 0;padding:1em 1.2em;border:1px solid var(--sb-rule,#E4E5E7);border-top:2px solid var(--sb-ink,#111214);background:#fff}
.sb-salebox .sb-salebox-h{margin:0 0 .6em;padding:0;font-size:1.05em;border:0;background:none}
.sb-salebox .sb-salebox-h:before,.sb-salebox .sb-salebox-h:after{display:none}
.sb-salebox dl{margin:0;display:grid;grid-template-columns:9.5em 1fr;gap:.55em 1em}
.sb-salebox dt{font-weight:700;font-size:.9em;color:var(--sb-ink-2,#55585D)}
.sb-salebox dd{margin:0;font-size:.95em;line-height:1.7}
.sb-salebox-note{margin:.8em 0 0;font-size:.8em;color:var(--sb-ink-2,#55585D)}
@media (max-width:600px){.sb-salebox dl{grid-template-columns:1fr;gap:.15em}.sb-salebox dd{margin-bottom:.7em}}