@charset "utf-8";
/* kekka.php（PC の検索結果）だけの見た目（2026-10-21・段 1・design kekka K-1／K-8／K-9・計画 .ptverify/PLAN_2026-10-21_kekka_s1.md）。
   共通の部品（色・上の帯・検索の欄・箱・札・フッター）は kn-base.css。
   ★本文（キャッシュの中）はリストもカタログも同じ HTML＝形は body の class（kn-v-list／kn-v-cat）とこの css だけで替える。
   ★列: リスト＝3 列（絞り込み 220｜結果｜⑨ 300）／カタログ＝2 列（⑨・絞り込み 240｜結果）／幅 1200 未満＝1 列（絞り込みは札の 1 行・⑨ は結果の下）。
   ★⑨ の箱（#kkn-ext-box）は HTML に 1 つだけ＝置き場は grid-area で替える（PM 決め 10/21）。案内（#kkn-guide・K-10）と楽天のウィジェット（.kn-wid）も同じ。 */

/* ── 列 ── */
.kn-k2 #wrapper { display: grid; gap: 24px; padding-top: 20px; padding-bottom: 8px; align-items: start; }
.kn-k2 #column_center { grid-area: main; min-width: 0; float: none; width: auto; margin: 0; }
.kn-k2 #column_center_inner { margin: 0; }
.kn-k2 #column_left { grid-area: left; min-width: 0; float: none; width: auto; margin: 0; }
.kn-k2 #kkn-ext-box { grid-area: ext; min-width: 0; }
.kn-k2 #kkn-guide { grid-area: guide; min-width: 0; }   /* K-10 拡張とアプリの案内(kn_guide.php・箱の中の形は kn-base.css) */
.kn-k2 .kn-wid { grid-area: wid; min-width: 0; }        /* K-10 楽天のウィジェット(結果の列の下・案内の後ろ) */
.kn-k2 #kkn-col { grid-area: col; min-width: 0; }       /* ⑩ 価格なびのコラム(記事 0 本なら無い＝場所が空くだけ) */
/* リスト: 右の欄に ⑨→案内→⑩ コラム。ウィジェットは結果のすぐ下(コラムはウィジェットの横まで伸びる＝ウィジェットを押し下げにくい)。 */
.kn-v-list #wrapper { grid-template-columns: 220px minmax(0, 1fr) 300px; grid-template-rows: auto auto 1fr auto; grid-template-areas: "left main ext" "left main guide" "left main col" "left wid col"; }
/* ⑨ が隠れている人(最近見た物が無い)は、案内を右の欄の一番上から(右の欄は案内でいつも埋まる＝段 1 の「右が空なら 2 列」は外した・PM 10/21)。 */
.kn-v-list #wrapper:has(#kkn-ext-box #recent_item2[style*="none"]) { grid-template-rows: auto 1fr auto; grid-template-areas: "left main guide" "left main col" "left wid col"; }
/* カタログ: 案内は結果の列の一番下(⑧ のすぐ下・ウィジェットの上＝依頼者 10/21・PM 10/21)に横 2 つ。⑩ コラムは左の列のジャンルの下(案内・ウィジェットの横まで伸びる)。 */
.kn-v-cat #wrapper { grid-template-columns: 240px minmax(0, 1fr); grid-template-rows: auto auto 1fr auto auto; grid-template-areas: "ext main" "left main" "col main" "col guide" "col wid"; }
/* ⑨ が隠れている人のカタログ: ⑨ の行を置かない(空の行と間 24px の分だけ、絞り込みが結果の列より下がるため) */
.kn-v-cat #wrapper:has(#kkn-ext-box #recent_item2[style*="none"]) { grid-template-rows: auto 1fr auto auto; grid-template-areas: "left main" "col main" "col guide" "col wid"; }
/* 0 件(#noresponce)のカタログ: 左の列を案内とウィジェットの横まで伸ばし、コラムはその下へ＝案内は結果の箱のすぐ下(PM 10/21)。:has が効かない時は上の形のまま */
.kn-v-cat #wrapper:has(#noresponce) { grid-template-rows: auto auto auto auto 1fr auto; grid-template-areas: "ext main" "left main" "left guide" "left wid" "left ." "col ."; }   /* 左の列の余りは最後の 1fr の行へ(案内の行を伸ばさない) */
/* 0 件で ⑨ も隠れている人: ⑨ の行を置かない(空の行に結果の高さが分けられて、絞り込みの上端が下がるため) */
.kn-v-cat #wrapper:has(#noresponce):has(#kkn-ext-box #recent_item2[style*="none"]) { grid-template-rows: auto auto auto 1fr auto; grid-template-areas: "left main" "left guide" "left wid" "left ." "col ."; }
.kn-v-cat #kkn-guide { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: stretch; }   /* 横 2 つの箱の高さをそろえる(PM 10/21) */

/* ── 結果の上: 見出し・④ お買い得情報・⑤ 並びと表示・関連の言葉 ── */
.kn-k2 .kn-rh { font-size: 22px; font-weight: 700; margin: 0 0 14px; line-height: 1.4; overflow-wrap: anywhere; }
.kn-k2 #featured_area > div.dtimer img, .kn-k2 #featured_area_bottom > div.dtimer img { max-width: 100%; height: auto; }
.kn-k2 #featured_area_bottom > div.dtimer[style*="width:950px"] { width: auto !important; max-width: 100%; }

/* お買い得情報の箱は kn-base.css へ移した(2026-10-21・index・category と共通) */

.kn-k2 .displaystyle { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 12px; }
.kn-k2 .displaystyle .kn-sel { order: 1; display: inline-flex; align-items: center; border: 1px solid #C4C7CC; border-radius: 8px; overflow: hidden; font-size: 13px; }
.kn-k2 .displaystyle .kn-sel > span { padding: 5px 10px; background: var(--kn-bg); color: var(--kn-sub); }
.kn-k2 .displaystyle .kn-sel select { border: 0; border-left: 1px solid var(--kn-line); border-radius: 0; font-size: 13px; padding: 5px 8px; }
.kn-k2 .displaystyle .kn-view { order: 2; }
.kn-k2 .displaystyle .kn-time { order: 3; margin-left: auto; font-size: 12px; color: var(--kn-sub); }
.kn-k2 .displaystyle .kn-time b { color: var(--kn-ink); }
.kn-k2 .displaystyle .kn-mallnote { order: 4; flex-basis: 100%; font-size: 12px; color: #7A4100; background: #FFF4E0; border-radius: 6px; padding: 6px 10px; }
.kn-k2 .kn-seg { display: inline-flex; align-items: stretch; border: 1px solid #C4C7CC; border-radius: 8px; overflow: hidden; font-size: 13px; }
.kn-k2 .kn-seg > .kn-seg-l { padding: 5px 10px; background: var(--kn-bg); color: var(--kn-sub); }
.kn-k2 .kn-seg > a, .kn-k2 .kn-seg > .kn-vi { display: inline-flex; align-items: center; padding: 5px 12px; border-left: 1px solid var(--kn-line); color: var(--kn-ink); }
.kn-k2 .kn-seg > a:hover { text-decoration: none; background: var(--kn-bg2); }
.kn-k2 .kn-seg > .kn-vi { background: var(--kn-navy); color: #fff; font-weight: 700; }   /* 選んでいる方（リンクでない） */
.kn-k2 .kn-vi-list::before { content: "≡ "; }
.kn-k2 .kn-vi-cat::before { content: "▦ "; }

.kn-k2 .kn-relw { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0 0 12px; font-size: 13px; }
.kn-k2 .kn-relw .title { color: var(--kn-sub); }
.kn-k2 .kn-relw ul { display: contents; }
.kn-k2 .kn-relw li { display: inline-block; }
.kn-k2 .kn-relw li a { display: inline-block; border: 1px solid var(--kn-line); border-radius: 14px; padding: 1px 10px; }

/* ── ⑦ 結果の行（リスト K-1）── */
.kn-k2 #item_list_header { display: none; }
.kn-k2 .kn-it {
	position: relative; display: grid; grid-template-columns: 96px minmax(0, 1fr) 230px;
	grid-template-areas: "img name r" "img shop r" "img .    jan";
	grid-template-rows: auto auto 1fr;
	column-gap: 16px; row-gap: 4px; padding: 16px 0; border-top: 1px solid var(--kn-line2); min-height: 0;   /* 高さは中身しだい(最小は絵 96＋上下 32＝128px・design §13-1) */
}
.kn-k2 #itemContent > .kn-it:last-child { border-bottom: 1px solid var(--kn-line2); }
/* 行の全体のリンク（前から・押すとお店へ）は下に敷く。ほかのリンク（題・絵・値段・お店・レビュー・JAN・ショップに行く）は上 */
.kn-k2 .kn-it > .linklayer { position: absolute; inset: 0; z-index: 1; font-size: 0; color: transparent; overflow: hidden; border-radius: 10px; }
.kn-k2 .kn-it a:not(.linklayer) { position: relative; z-index: 2; }
.kn-k2 .kn-it .itemjan, .kn-k2 .kn-it .payment, .kn-k2 .kn-it .kakunin_saishin { display: none; }
.kn-k2 .kn-it .itemimg { grid-area: img; }
.kn-k2 .kn-it .itemimg img { display: block; width: 96px; height: 96px; object-fit: contain; border-radius: 8px; }
.kn-k2 .kn-it .itemname { grid-area: name; min-width: 0; }
.kn-k2 .kn-it .itemname1 > a { font-size: 15px; font-weight: 700; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.kn-k2 .kn-it .description { font-size: 13px; color: var(--kn-sub); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kn-k2 .kn-it .shopname { grid-area: shop; display: flex; align-items: center; gap: 6px; min-width: 0; max-width: calc(100% - 13em); font-size: 13px; align-self: center; }
.kn-k2 .kn-it .shopname img.shopnameimg { display: block; height: 16px; width: auto; max-width: 64px; }
.kn-k2 .kn-it .shopname1 { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kn-k2 .kn-it .shopname1 a { color: #3C4043; }
.kn-k2 .kn-it .kakuninWidthMail1, .kn-k2 .kn-it .kakuninWidthMail2, .kn-k2 .kn-it .kakunin { display: contents; }
.kn-k2 .kn-it .kakunin2 { grid-area: shop; justify-self: end; align-self: center; font-size: 13px; white-space: nowrap; }
.kn-k2 .kn-it .send_mail { grid-area: jan; justify-self: end; font-size: 12px; margin-top: 4px; }
/* 右の塊: 実質（主・赤）→ 価格・送料（小）→ ショップに行く */
.kn-k2 .kn-it-r { grid-area: r; display: grid; grid-template-columns: minmax(0, 1fr) auto; justify-content: stretch; align-content: start; text-align: right; font-size: 13px; line-height: 1.5; }   /* 右の列(230px)いっぱいに広げる＝「ショップに行く」が全部の行で同じ幅(auto auto＋end だと値段の字の幅で行ごとに替わった・依頼者 10/22 9 時台「ショップに行くのボタンの大きさがバラバラ。そろえて。」) */
.kn-k2 .kn-it-r .itempoint { grid-column: 1 / -1; grid-row: 1; }
.kn-k2 .kn-it-r .itemprice { grid-column: 1; grid-row: 2; }
.kn-k2 .kn-it-r .soryo { grid-column: 2; grid-row: 2; white-space: nowrap; }
.kn-k2 .kn-it-r .itempoint::before { content: "実質（送料込）"; display: block; font-size: 12px; color: var(--kn-sub); }
.kn-k2 .kn-it-r .itempoint a, .kn-k2 .kn-it-r .itemprice a { color: inherit; }
.kn-k2 .kn-it-r .nomalprice2 { font-size: 24px; font-weight: 700; color: var(--kn-red); line-height: 1.2; }
.kn-k2 .kn-it-r .pointprice { font-size: 13px; color: var(--kn-pt); margin-left: 6px; }
.kn-k2 .kn-it-r .buynowprice2 { font-size: 13px; }
.kn-k2 .kn-it-r .itemprice { color: #3C4043; }
.kn-k2 .kn-it-r .itemprice::before { content: "価格 "; }
.kn-k2 .kn-it-r .soryo::before { content: "・送料 "; color: #3C4043; }
.kn-k2 .kn-it-r .soryo a { color: inherit; }
.kn-k2 .kn-it-r .soryo img { display: none; }   /* 設定無しの行の 1px の計測の絵 */
.kn-k2 .kn-sr-free { color: var(--kn-green); font-weight: 700; }
.kn-k2 .kn-sr-yen { font-weight: 700; color: #3C4043; }
.kn-k2 .kn-sr-est { font-size: 11px; color: #777; margin-left: 3px; }
.kn-k2 .soryoinfo { position: relative; z-index: 2; }
.kn-k2 .kn-ipop { position: absolute; z-index: 50; max-width: 260px; background: #fff; color: var(--kn-ink); border: 1px solid #C4C7CC; border-radius: 8px; box-shadow: 0 4px 14px rgba(0,0,0,.15); padding: 8px 10px; font-size: 12px; line-height: 1.5; }
.kn-k2 .kn-effnote { font-size: 12px; color: var(--kn-sub); margin: -4px 0 12px; line-height: 1.5; }
.kn-k2 .kn-cta {
	grid-column: 1 / -1; grid-row: 3; display: block; margin-top: 8px; background: var(--kn-navy); color: #fff !important;
	font-weight: 700; text-align: center; border-radius: 8px; padding: 9px 0; font-size: 14px;
	justify-self: end; width: 190px; box-sizing: border-box;   /* 全部の行で同じ幅・右寄せ(230px いっぱいは大きすぎる・依頼者 10/22「もう少し小さくしてほしい。このくらいに」＝前の送料 600円 の行の幅) */
}
.kn-k2 .kn-cta:hover { text-decoration: none; filter: brightness(1.12); }

/* ── ⑦ カタログ（K-8）: 同じ HTML をカードに・ボタンなし・カード全体がリンク（行の全体のリンク）・170px 以上で詰める ── */
.kn-v-cat #itemContent { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; }
.kn-v-cat .kn-it {
	grid-template-columns: minmax(0, 1fr); grid-template-areas: "img" "name" "r" "shop" "rev" "jan";
	grid-template-rows: auto auto auto auto 1fr auto;
	border: 1px solid var(--kn-line); border-radius: 10px; padding: 10px 10px 8px; min-height: 0; row-gap: 2px;
}
.kn-v-cat #itemContent > .kn-it:last-child { border-bottom: 1px solid var(--kn-line); }
.kn-v-cat .kn-it:hover { border-color: var(--kn-navy); box-shadow: 0 4px 14px rgba(27, 79, 138, .22); }
.kn-v-cat .kn-it:hover .itemname1 > a { text-decoration: underline; }
.kn-v-cat .kn-it .itemimg { justify-self: center; margin-bottom: 6px; }
.kn-v-cat .kn-it .itemimg img { width: 132px; height: 132px; }
.kn-v-cat .kn-it .itemname1 > a { font-size: 13px; height: 2.9em; }
.kn-v-cat .kn-it .description { display: none; }
.kn-v-cat .kn-it-r { justify-content: start; text-align: left; font-size: 12px; grid-template-columns: auto; }
.kn-v-cat .kn-it-r .itemprice { grid-column: 1; grid-row: 2; }
.kn-v-cat .kn-it-r .soryo { grid-column: 1; grid-row: 3; }
.kn-v-cat .kn-it-r .soryo::before { content: "送料 "; }
.kn-v-cat .kn-it-r .nomalprice2 { font-size: 20px; }
.kn-v-cat .kn-it-r .pointprice { font-size: 12px; }
.kn-v-cat .kn-cta { display: none; }
.kn-v-cat .kn-it .shopname { max-width: none; font-size: 12px; margin-top: 4px; }
.kn-v-cat .kn-it .kakunin2 { grid-area: rev; justify-self: start; align-self: end; font-size: 12px; }
.kn-v-cat .kn-it .send_mail { justify-self: start; margin-top: 0; }

/* ── 0 件（K-3・K-4）── */
/* 0 件では並び順・送料・表示の行を出さない(押しても何も変わらない・design §13-3)。検索対象を戻した知らせ(.kn-mallnote)は出す。説明の 1 行は 0 件では PHP が出さない */
.kn-k2 #featured_area:has(#noresponce) .displaystyle > :not(.kn-mallnote) { display: none; }
.kn-k2 #noresponce { border: 1px solid var(--kn-line); border-radius: 12px; padding: 22px 26px; }
.kn-k2 #noresponce h2 { font-size: 20px; margin: 0 0 8px; }
.kn-k2 #noresponce p { margin: 0 0 12px; }
.kn-k2 #noresponce input[type="button"] { font: inherit; border: 1.5px solid var(--kn-navy); color: var(--kn-navy); background: #fff; border-radius: 8px; padding: 6px 14px; font-weight: 700; cursor: pointer; }
.kn-k2 #searchdirect h3 { font-size: 14px; margin: 8px 0; }
.kn-k2 #searchdirect ul { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.kn-k2 #searchdirect li a { display: inline-block; border: 1.5px solid var(--kn-navy); color: var(--kn-navy); font-weight: 700; border-radius: 8px; padding: 8px 16px; font-size: 14px; }
.kn-k2 #searchdirect li a img { display: none; }   /* 1px の計測の絵 */

/* ── 一覧の下 ── */
.kn-k2 #featured_area_bottom { margin-top: 20px; }
.kn-k2 #underitemlist { display: none; }   /* 一覧の下の「最近みた商品」＝⑨ の箱と同じ中身（recent.js が描く）＝出さない */
.kn-k2 .kn-underwidget { margin-top: 16px; overflow: hidden; }
.kn-k2 .kn-collink { margin-top: 16px; font-size: 13px; line-height: 1.6; }
.kn-k2 .kn-collink a { font-weight: 700; }

/* ── ③ 左の列: 絞り込み・ジャンル ── */
.kn-k2 .kn-fchips { display: none; }
.kn-k2 .kn-filt .kn-fgrid { padding: 6px 14px 14px; font-size: 13px; }
.kn-k2 .kn-filt .search_filter_box { margin-top: 8px; }
.kn-k2 .kn-filt h3.title { font-size: 13px; font-weight: 700; color: #3C4043; margin-bottom: 3px; }
.kn-k2 .kn-filt input[name="minp1"], .kn-k2 .kn-filt input[name="maxp1"] { width: 74px; padding: 4px 6px; }
.kn-k2 .kn-filt input[name="s2"], .kn-k2 .kn-filt input[name="ex1"] { width: 100%; padding: 4px 6px; }
.kn-k2 .kn-filt li label { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.kn-k2 .kn-filt .btn { margin-top: 12px; }
.kn-k2 .kn-filt .btn input[type="submit"] { width: 100%; height: 38px; border: 0; border-radius: 8px; background: var(--kn-navy); color: #fff; font: inherit; font-weight: 700; cursor: pointer; }
.kn-k2 .kn-fclose { display: none; font: inherit; font-size: 13px; color: var(--kn-sub); background: none; border: 0; cursor: pointer; }
.kn-k2 .kn-genre ul { padding: 6px 0; }
.kn-k2 .kn-genre li a { display: block; padding: 5px 14px; font-size: 13px; }
.kn-k2 .kn-genre li.on a { font-weight: 700; color: var(--kn-ink); }
.kn-k2 .kn-genre li:nth-child(n+11) { display: none; }
.kn-k2 .kn-genre.open li { display: list-item; }
.kn-k2 .kn-gmore { font: inherit; font-size: 12px; color: var(--kn-sub); background: none; border: 0; padding: 4px 14px 12px; cursor: pointer; }
.kn-k2 .kn-gmore::after { content: " ▼"; }
.kn-k2 .kn-genre.open .kn-gmore { display: none; }

/* ── ⑨ の箱（段 1 はサイトの「最近みた商品」・recent.js が中を描く）── */
.kn-k2 #kkn-ext-box .column_left_sub2 { margin: 0; }
.kn-k2 #kkn-ext-box h2.title { font-size: 14px; font-weight: 700; padding: 10px 14px; border-bottom: 1px solid var(--kn-line2); background: var(--kn-bg2); }
.kn-k2 #kkn-ext-box .recentitem2 { display: flex; gap: 10px; align-items: center; padding: 8px 14px; border-bottom: 1px solid #EEF0F2; }
.kn-k2 #kkn-ext-box .recentitem2:last-child { border-bottom: 0; }
.kn-k2 #kkn-ext-box .recentimg2 { flex: 0 0 48px; }
.kn-k2 #kkn-ext-box .recentimg2 img { display: block; width: 48px; height: 48px; object-fit: contain; }
.kn-k2 #kkn-ext-box .recentprice { min-width: 0; font-size: 13px; line-height: 1.4; }
/* 2026-10-22 名前・店のロゴと店名・「価格はお店で確認」(recent.js が localStorage から描く・無い人は絵と値段だけ) */
.kn-k2 #kkn-ext-box .kn-rc-b { flex: 1; min-width: 0; }
.kn-k2 #kkn-ext-box .kn-rc-name { font-size: 12px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.kn-k2 #kkn-ext-box .kn-rc-name a { color: var(--kn-ink); }
.kn-k2 #kkn-ext-box .recentprice a { font-weight: 700; color: var(--kn-red); }
.kn-k2 #kkn-ext-box .kn-rc-na { font-size: 11px; color: var(--kn-sub); }
.kn-k2 #kkn-ext-box .kn-rc-shop { display: flex; align-items: center; gap: 4px; margin-top: 2px; font-size: 11px; color: var(--kn-sub); white-space: nowrap; overflow: hidden; }
.kn-k2 #kkn-ext-box .kn-rc-shop span { overflow: hidden; text-overflow: ellipsis; }
.kn-k2 #kkn-ext-box .kn-rc-logo { flex: 0 0 auto; width: auto; height: 14px; max-width: 48px; object-fit: contain; }
.kn-k2 #kkn-ext-box:has(#recent_item2[style*="none"]) { display: none; }   /* 最近見た商品が無い人（recent.js が隠す）は箱ごと出さない */

/* ── K-10 案内の並び（design kekka §14）。リストの右の欄は縦に 2 枚。カタログと 1 列は横 2 つ（左＝拡張・右＝アプリ）。
   拡張が入っている人（拡張の 1 枚が出ない）は、アプリの 1 枚を幅いっぱいにして iPhone と Android を横 2 つ（依頼者 10/21）。── */
.kn-v-list #kkn-guide { display: flex; flex-direction: column; gap: 16px; }
.kn-k2 .kn-wid .kn-underwidget { margin-top: 0; }
[data-kkn-ext="on"] .kn-v-cat #kkn-guide .kn-g-app { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
[data-kkn-ext="on"] .kn-v-cat #kkn-guide .kn-g-app .kn-g-h { grid-column: 1 / -1; }
[data-kkn-ext="on"] .kn-v-cat #kkn-guide .kn-g-app .kn-g-row { border-top: 0; }
[data-kkn-ext="on"] .kn-v-cat #kkn-guide .kn-g-app .kn-g-row + .kn-g-row { border-left: 1px solid #EEF0F2; }

/* ── 幅 1200 未満: 1 列（K-9）。絞り込みは札の 1 行・押すとすぐ下に広がる（1 つだけ）・⑨ は結果の下 ── */
@media (max-width: 1199px) {
	.kn-v-list #wrapper, .kn-v-cat #wrapper, .kn-v-list #wrapper:has(#kkn-ext-box #recent_item2[style*="none"]),
	.kn-v-cat #wrapper:has(#kkn-ext-box #recent_item2[style*="none"]), .kn-v-cat #wrapper:has(#noresponce),
	.kn-v-cat #wrapper:has(#noresponce):has(#kkn-ext-box #recent_item2[style*="none"]) {   /* 2 列の :has の決めより強く(同じ強さで後ろ) */ grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "left" "main" "ext" "guide" "col" "wid"; gap: 16px; }
	/* ⑩ 1 列: 案内の下に幅いっぱい・記事 3 本を横に(PM 10/21) */
	.kn-k2 #kkn-col .kn-col-l { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
	/* K-10: 案内は ⑨ の下に横 2 つ(PM 10/21 ③)。ウィジェットはその下(カタログの 2 列と同じく、結果と案内の間に挟まない) */
	.kn-v-list #kkn-guide, .kn-v-cat #kkn-guide { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
	[data-kkn-ext="on"] .kn-k2 #kkn-guide .kn-g-app { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
	[data-kkn-ext="on"] .kn-k2 #kkn-guide .kn-g-app .kn-g-h { grid-column: 1 / -1; }
	[data-kkn-ext="on"] .kn-k2 #kkn-guide .kn-g-app .kn-g-row { border-top: 0; }
	[data-kkn-ext="on"] .kn-k2 #kkn-guide .kn-g-app .kn-g-row + .kn-g-row { border-left: 1px solid #EEF0F2; }
	.kn-k2 #header .kn-pr + .kn-pr { display: none; }   /* PR の絵は 1 つ（K-9） */
	.kn-k2 .kn-fchips { display: flex; flex-wrap: wrap; gap: 8px; }
	.kn-k2 .kn-chip-open::after { content: " ▼"; font-size: 11px; }
	.kn-k2 #column_left[data-open="f"] .kn-chip[data-k="f"],
	.kn-k2 #column_left[data-open="p"] .kn-chip[data-k="p"],
	.kn-k2 #column_left[data-open="g"] .kn-chip[data-k="g"] { background: var(--kn-navy); border-color: var(--kn-navy); color: #fff; font-weight: 700; }
	.kn-k2 #column_left[data-open="f"] .kn-chip[data-k="f"]::after,
	.kn-k2 #column_left[data-open="p"] .kn-chip[data-k="p"]::after,
	.kn-k2 #column_left[data-open="g"] .kn-chip[data-k="g"]::after { content: " ▲"; }
	.kn-k2 #column_left .kn-card { display: none; margin: 8px 0 0; }
	.kn-k2 #column_left .kn-card > h2.title { display: none; }
	.kn-k2 .kn-fclose { display: inline-block; }
	/* 絞り込み: 横 3 つ × 2 段＋この条件で探す・閉じる */
	.kn-k2 #column_left[data-open="f"] .kn-filt, .kn-k2 #column_left[data-open="p"] .kn-filt { display: block; }
	.kn-k2 .kn-filt .kn-fgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px 20px; align-items: end; padding: 10px 16px 14px; }
	.kn-k2 .kn-filt .search_filter_box { margin-top: 0; }
	.kn-k2 .kn-filt .sites ul, .kn-k2 .kn-filt .other ul { display: flex; flex-wrap: wrap; gap: 4px 14px; }
	.kn-k2 .kn-filt .btn { margin-top: 0; display: flex; align-items: center; gap: 16px; }
	.kn-k2 .kn-filt .btn input[type="submit"] { width: auto; padding: 0 22px; }
	/* 価格だけ（「価格 ▼」） */
	.kn-k2 #column_left[data-open="p"] .kn-filt .keyword, .kn-k2 #column_left[data-open="p"] .kn-filt .exclude,
	.kn-k2 #column_left[data-open="p"] .kn-filt .sites, .kn-k2 #column_left[data-open="p"] .kn-filt .other { display: none; }
	/* ジャンル: 一覧を横 4 つ */
	.kn-k2 #column_left[data-open="g"] .kn-genre { display: block; padding: 8px 6px 10px; }
	.kn-k2 .kn-genre ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.kn-k2 .kn-genre li, .kn-k2 .kn-genre li:nth-child(n+11) { display: block; }
	.kn-k2 .kn-genre .kn-gmore { display: none; }
	.kn-k2 .kn-genre .kn-fclose { margin-left: 8px; }
	/* ⑨ は結果の下・中は横に並べる */
	.kn-k2 #kkn-ext-box .recentitems2 { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
	.kn-k2 #kkn-ext-box .recentitems2 > div:first-child { grid-column: 1 / -1; }
}