/* 記事本文の「表にしない」部品（2026-10-10 運営指示: 表は比較表＋1つまで。ほかはCSSの部品で分かりやすく）
* 使い方は /opt/claude-ops/article_table_rules.md の「表にしない部品」。色はサイトの配色（記事の囲み・見出しと同じ）。
*
* .bk-cards カードの並び（種類・型・候補を1枚ずつ。広い所は2列、狭い所は1列）
* .bk-card 1枚。中に .bk-card-title / .bk-card-sub / .bk-card-badges / .bk-card-lead / p / dl.bk-card-dl / .bk-card-foot
* .bk-badge ラベル（-ok 使える・-ng 使えない・無印 補足）。色だけでなく文字で意味を書く
* .bk-answers 「こんな場面 → この選び方・候補」の一覧
* dl.bk-deflist 名前と値の一覧（型番・仕様の早見）。.bk-deflist-note で補足
*/
.bk-mc-wrap .bk-answers, .bk-mc-wrap .bk-deflist { container-type: inline-size; }
/* ---- カード ---- */
.bk-mc-wrap .bk-cards {
display: grid !important; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)) !important; gap: 14px !important;
margin: 20px 0 28px !important; padding: 0 !important; list-style: none !important;
}
.bk-mc-wrap .bk-card {
min-width: 0; margin: 0 !important; padding: 18px 20px !important;
background: #fff !important; border: 1px solid #F2DEE0 !important; border-radius: 14px !important;
box-shadow: 0 1px 2px rgba(60,30,40,.04), 0 4px 12px rgba(60,30,40,.04) !important;
display: flex; flex-direction: column; gap: 10px;
}
.bk-mc-wrap .bk-card > * { margin: 0 !important; }
.bk-mc-wrap .bk-card-title {
font-size: 17px !important; font-weight: 700 !important; line-height: 1.45 !important; color: #1F1418 !important;
padding-left: 12px !important; border-left: 4px solid #C97B84 !important;
}
.bk-mc-wrap .bk-card-sub { font-size: 13px !important; color: #7A6E73 !important; line-height: 1.4 !important; margin-top: -6px !important; padding-left: 16px !important; }
.bk-mc-wrap .bk-card-lead {
font-size: 15px !important; font-weight: 600 !important; line-height: 1.6 !important; color: #A0606A !important;
}
.bk-mc-wrap .bk-card p { font-size: 15px !important; line-height: 1.75 !important; color: #3A2E33; }
.bk-mc-wrap .bk-card-foot {
font-size: 13.5px !important; line-height: 1.7 !important; color: #5C5256 !important;
padding-top: 10px !important; border-top: 1px dashed #F2DEE0 !important;
}
.bk-mc-wrap .bk-card-foot b, .bk-mc-wrap .bk-card-foot strong { color: #1F1418 !important; }
/* カードの中の「項目：値」 */
.bk-mc-wrap .bk-card-dl { display: grid !important; gap: 0 !important; margin: 0 !important; }
.bk-mc-wrap .bk-card-dl > div {
display: grid !important; grid-template-columns: 6.5em 1fr; gap: 10px !important;
padding: 8px 0 !important; border-top: 1px solid #F5E9E8 !important;
}
.bk-mc-wrap .bk-card-dl > div:first-child { border-top: 0 !important; padding-top: 0 !important; }
.bk-mc-wrap .bk-card-dl dt { margin: 0 !important; font-size: 13px !important; font-weight: 600 !important; color: #7A6E73 !important; line-height: 1.7 !important; }
.bk-mc-wrap .bk-card-dl dd { margin: 0 !important; font-size: 15px !important; color: #3A2E33 !important; line-height: 1.7 !important; }
/* ラベル */
.bk-mc-wrap .bk-card-badges { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; }
.bk-mc-wrap .bk-badge {
display: inline-flex !important; align-items: center !important; gap: 4px !important;
padding: 4px 10px !important; border-radius: 999px !important;
font-size: 12.5px !important; font-weight: 600 !important; line-height: 1.3 !important;
background: #FBF6F4 !important; color: #A0606A !important; border: 1px solid #F2DEE0 !important;
white-space: nowrap !important; word-break: keep-all !important;
}
.bk-mc-wrap .bk-badge-ok { background: #EEF6EF !important; color: #2F6B3A !important; border-color: #D3E8D6 !important; }
.bk-mc-wrap .bk-badge-ok::before { content: "○"; }
.bk-mc-wrap .bk-badge-ng { background: #FBEEEF !important; color: #A33A4A !important; border-color: #F2D3D8 !important; }
.bk-mc-wrap .bk-badge-ng::before { content: "×"; }
/* ---- 場面 → 答え ---- */
.bk-mc-wrap .bk-answers {
margin: 20px 0 28px !important; padding: 4px 20px !important;
background: #fff !important; border: 1px solid #F2DEE0 !important; border-radius: 14px !important;
box-shadow: 0 1px 2px rgba(60,30,40,.04), 0 4px 12px rgba(60,30,40,.04) !important;
}
.bk-mc-wrap .bk-answer {
display: grid !important; grid-template-columns: 1fr; gap: 6px !important;
padding: 16px 0 !important; border-top: 1px solid #F5E9E8 !important;
}
.bk-mc-wrap .bk-answer:first-child { border-top: 0 !important; }
.bk-mc-wrap .bk-answer > * { margin: 0 !important; }
@container (min-width: 560px) {
.bk-mc-wrap .bk-answer { grid-template-columns: 11em 1fr; column-gap: 18px !important; }
.bk-mc-wrap .bk-answer-scene { grid-row: span 2; }
}
.bk-mc-wrap .bk-answer-scene {
font-size: 15.5px !important; font-weight: 700 !important; color: #1F1418 !important; line-height: 1.55 !important;
}
.bk-mc-wrap .bk-answer-scene::before { content: "▸ "; color: #C97B84; }
.bk-mc-wrap .bk-answer-type { font-size: 14px !important; font-weight: 600 !important; color: #A0606A !important; line-height: 1.6 !important; }
.bk-mc-wrap .bk-answer-picks { font-size: 15px !important; color: #3A2E33 !important; line-height: 1.75 !important; }
/* ---- 名前と値の一覧 ---- */
.bk-mc-wrap dl.bk-deflist {
margin: 20px 0 28px !important; padding: 4px 20px !important;
background: #FDFBF8 !important; border: 1px solid #F2DEE0 !important; border-radius: 14px !important;
}
.bk-mc-wrap dl.bk-deflist > div {
display: grid !important; grid-template-columns: 1fr; gap: 2px !important;
padding: 12px 0 !important; border-top: 1px solid #F2E6E4 !important;
}
.bk-mc-wrap dl.bk-deflist > div:first-child { border-top: 0 !important; }
@container (min-width: 520px) { .bk-mc-wrap dl.bk-deflist > div { grid-template-columns: 15em 1fr; column-gap: 16px !important; } }
.bk-mc-wrap dl.bk-deflist dt { margin: 0 !important; font-size: 14.5px !important; font-weight: 700 !important; color: #1F1418 !important; line-height: 1.6 !important; }
.bk-mc-wrap dl.bk-deflist dd { margin: 0 !important; font-size: 15px !important; color: #3A2E33 !important; line-height: 1.6 !important; }
.bk-mc-wrap .bk-deflist-note { display: block !important; font-size: 13px !important; color: #7A6E73 !important; margin-top: 2px !important; }
/* 型番は途中で折らない */
.bk-mc-wrap .bk-nw, .bk-mc-wrap dl.bk-deflist dd code { white-space: nowrap !important; }
/* 古い全体指定（.bk-mc-wrap * の overflow-wrap:anywhere）で型番や数値が途中で折れないように */
.bk-mc-wrap .bk-card *, .bk-mc-wrap .bk-answers *, .bk-mc-wrap dl.bk-deflist * { overflow-wrap: normal !important; word-break: normal !important; word-wrap: normal !important; }
.bk-mc-wrap .bk-card .bk-nw, .bk-mc-wrap .bk-answers .bk-nw, .bk-mc-wrap dl.bk-deflist .bk-nw { white-space: nowrap !important; }
/* ---- 商品の写真つきチップ（2026-10-10 運営指摘: 商品名を文字だけで並べない） ----
* 
商品名…
* 押すと記事内のその商品カードへ移る。記事にカードが無い商品は で名前だけ出す。 */
.bk-mc-wrap .bk-picks { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; margin: 0 !important; padding: 0 !important; }
.bk-mc-wrap .bk-pick {
display: inline-flex !important; align-items: center !important; gap: 8px !important;
max-width: 100% !important; padding: 4px 14px 4px 4px !important;
background: #fff !important; border: 1px solid #F2DEE0 !important; border-radius: 999px !important;
color: #3A2E33 !important; text-decoration: none !important; border-bottom: 1px solid #F2DEE0 !important;
font-size: 14px !important; font-weight: 600 !important; line-height: 1.35 !important;
transition: background .15s, border-color .15s;
}
.bk-mc-wrap span.bk-pick { padding-left: 14px !important; color: #5C5256 !important; font-weight: 500 !important; }
.bk-mc-wrap a.bk-pick:hover { background: #FBF6F4 !important; border-color: #E5BFC3 !important; }
.bk-mc-wrap a.bk-pick::after { content: "↓"; color: #C97B84; font-size: 13px; font-weight: 700; }
.bk-mc-wrap .bk-pick img {
display: block !important; flex: none !important; width: 36px !important; height: 36px !important; max-width: none !important;
margin: 0 !important; border-radius: 50% !important; object-fit: contain !important; background: #fff !important;
border: 1px solid #F5E9E8 !important;
}
.bk-mc-wrap .bk-pick-name { min-width: 0; }
.bk-mc-wrap .bk-card .bk-picks + * { margin-top: 0 !important; }
.bk-mc-wrap .bk-card-foot + .bk-picks { margin-top: -4px !important; }
.bk-mc-wrap .bk-card-foot-link { border-top: 0 !important; padding-top: 0 !important; }
.bk-mc-wrap .bk-answer .bk-picks { margin-top: 2px !important; }
/* 飛んだ先の商品カードが上の固定ヘッダーに隠れないように */
.bk-mc-wrap .bk-mc-product-card[id] { scroll-margin-top: 84px; }