@charset "utf-8";
/* 価格なび（PC）の共通の見た目（2026-10-21・段 1・design kekka K-1／K-8／K-9）。
   kekka.php と index.php（作り直しの後）が読む。ページだけの形は kn-kekka.css／kn-index.css に書く。
   ★赤は「お得」の数（実質）だけ＝--kn-red。帯や見出しの面に赤を使わない（楽天の赤 #BF0000 から離れる）。
   ★id は各ページの JS（common.js・recent.js）と GTM が見ている場合がある＝id は変えず、ここでは id か class で見た目だけを決める。 */

:root {
	--kn-ink: #202124;      /* 字 */
	--kn-sub: #5F6368;      /* 小さい字・説明 */
	--kn-line: #E3E5E8;     /* 枠の線 */
	--kn-line2: #ECEEF1;    /* 行の区切り */
	--kn-bg: #F1F3F4;       /* 帯の地 */
	--kn-bg2: #F8F9FA;      /* 箱の見出しの地 */
	--kn-link: #1A5FB4;     /* 押せる字 */
	--kn-navy: #1B4F8A;     /* 主のボタン（白の字 8.29:1） */
	--kn-red: #D7263D;      /* 実質の数だけ */
	--kn-green: #0A7D00;    /* 送料無料 */
	--kn-pt: #0A7D32;       /* ポイント */
}

.kn-k2, .kn-k2 * { box-sizing: border-box; }
body.kn-k2 {
	margin: 0; color: var(--kn-ink); background: #fff;
	font: 14px/1.6 -apple-system, "Segoe UI", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
}
.kn-k2 a { color: var(--kn-link); text-decoration: none; }
.kn-k2 a:hover { text-decoration: underline; }
.kn-k2 img { max-width: 100%; }
.kn-k2 ul { list-style: none; margin: 0; padding: 0; }
.kn-k2 h1, .kn-k2 h2, .kn-k2 h3, .kn-k2 p { margin: 0; }
.kn-k2 input[type="text"], .kn-k2 select {
	font: inherit; font-size: 14px; color: var(--kn-ink);
	border: 1px solid #C4C7CC; border-radius: 6px; padding: 5px 8px; background: #fff;
}

/* 中身の幅: 1,440px まで・真ん中寄せ・左右 24px */
.kn-k2 #main_container { max-width: none; min-width: 0; padding: 0; }
.kn-k2 #header, .kn-k2 #searchbox_inner, .kn-k2 #wrapper, .kn-k2 #footer, .kn-k2 .kn-collink {
	max-width: 1440px; margin-left: auto; margin-right: auto; padding-left: 24px; padding-right: 24px;
}

/* ① 上の帯: ロゴ（今のまま）・PR の絵 2 つ（今のまま）・よくある質問・ログイン */
.kn-k2 #header { display: flex; align-items: center; gap: 12px; min-height: 76px; padding-top: 8px; padding-bottom: 8px; }
.kn-k2 #header h1, .kn-k2 #header .kn-logo {
	order: 0; margin: 0 auto 0 0; width: 187px; height: 60px; flex: 0 0 187px;
	background: url(../imgs/kakakunavi_logo_color_h60@2x.png) no-repeat top left; background-size: 187px 60px;   /* ロゴは style.css と同じ絵 */
	text-indent: -9999em; overflow: hidden;
}
.kn-k2 #header .kn-logo { margin: 0 auto 0 0; }
.kn-k2 #header h1 a, .kn-k2 #header .kn-logo a { display: block; width: 100%; height: 60px; }
.kn-k2 #header .kn-pr { order: 1; flex: 0 0 234px; width: 234px; height: 60px; overflow: hidden; }
.kn-k2 #header .kn-pr img { display: block; }
/* K-11 上の帯の真ん中のバナー(1 つ目の枠だけ 320px・2 つ目の LYP は 234 のまま)。出だしは A(PC の拡張)・拡張ありか Chrome／Edge／Firefox 以外は B(iPhone) */
.kn-k2 #header .kn-pr-hb { flex: 0 0 320px; width: 320px; }
.kn-k2 .kn-hb-b { display: none; }
[data-kkn-ext="on"] .kn-k2 .kn-hb-a, [data-kkn-ua="other"] .kn-k2 .kn-hb-a { display: none; }
[data-kkn-ext="on"] .kn-k2 .kn-hb-b, [data-kkn-ua="other"] .kn-k2 .kn-hb-b { display: block; }
.kn-k2 .kn-hlinks { order: 2; font-size: 12px; line-height: 1.8; white-space: nowrap; }

/* ② 検索: 灰の帯に大きな検索の欄（紺の枠と「探す」）。「検索条件 ▼」の板は出さない（同じ欄は左の列にある・欄は送られる） */
.kn-k2 #searchbox { background: var(--kn-bg); border-top: 1px solid var(--kn-line); border-bottom: 1px solid var(--kn-line); padding: 14px 0 10px; }
.kn-k2 #searchbox.fixed { position: static; }   /* common.js が付ける印（上に固定）＝新しい形では固定しない */
.kn-k2 #searchbox_inner { display: flex; justify-content: center; }
.kn-k2 #searchbox_inner_center, .kn-k2 #searchbox_inner_center_sub { display: contents; }
.kn-k2 #searchbox_inner_left { display: none; }
.kn-k2 #search_box { flex: 1 1 auto; max-width: 560px; }
.kn-k2 #search_box input {
	width: 100%; height: 48px; font-size: 18px; padding: 0 14px;
	border: 2px solid var(--kn-navy); border-right: 0; border-radius: 10px 0 0 10px;
}
.kn-k2 .kn-sb-ct select {
	height: 48px; font-size: 14px; border-radius: 0; border: 2px solid var(--kn-navy); border-left: 1px solid #DADCE0; border-right: 0; max-width: 170px;
}
.kn-k2 #search_filter_box { display: none; }
.kn-k2 #submit_btn input {
	height: 48px; border: 0; border-radius: 0 10px 10px 0; background: var(--kn-navy); color: #fff;
	font: inherit; font-size: 16px; font-weight: 700; padding: 0 24px; cursor: pointer;
}
.kn-k2 .kn-shint { text-align: center; font-size: 12px; color: var(--kn-sub); margin-top: 6px; padding: 0 24px; }

/* ④ お買い得情報の箱(kekka・index・category・2026-10-21 に kn-kekka.css から移した) */
.kn-k2 .kn-prbox { border: 1px solid var(--kn-line); border-radius: 10px; margin-bottom: 14px; overflow: hidden; font-size: 14px; }
.kn-k2 .kn-prh { font-size: 13px; font-weight: 700; padding: 8px 14px; background: var(--kn-bg2); display: flex; align-items: center; gap: 8px; }
.kn-k2 .kn-prt { font-size: 11px; font-weight: 400; color: var(--kn-sub); border: 1px solid #9AA0A6; border-radius: 3px; padding: 0 5px; line-height: 1.5; }
.kn-k2 .kn-prl { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 20px; padding: 8px 14px 10px; }
.kn-k2 .kn-prl > a { color: var(--kn-link); min-width: 0; }
.kn-k2 .kn-prl > a img { max-width: 100%; height: auto; vertical-align: middle; }
/* 行の中の計測の 1px の絵(VC の gifbanner)は読ませたまま見えなくする(字の行の前に「欠けた絵」や 1px の段が出ない) */
.kn-k2 .kn-prl > a img[height="1"], .kn-k2 .kn-prl > a img[height="1px"] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.kn-k2 .kn-prl > a { position: relative; }
@media (max-width: 1199px) { .kn-k2 .kn-prl { grid-template-columns: 1fr; } }

/* 箱 */
.kn-k2 .kn-card { background: #fff; border: 1px solid var(--kn-line); border-radius: 10px; margin-bottom: 16px; overflow: hidden; }
.kn-k2 .kn-card > h2.title { font-size: 14px; font-weight: 700; padding: 10px 14px; border-bottom: 1px solid var(--kn-line2); background: var(--kn-bg2); }

/* 拡張とアプリの案内（K-10・kn_guide.php・design kekka §14／index と共用）。置き場と並び（縦・横 2 つ）はページの css で決める。
   拡張が入っている人（<html data-kkn-ext="on">・拡張が付ける）には拡張の 1 枚を出さない。 */
[data-kkn-ext="on"] .kn-k2 .kn-g-ext { display: none; }
.kn-k2 .kn-g { margin-bottom: 0; }
.kn-k2 .kn-g-h { font-size: 14px; font-weight: 700; padding: 10px 14px; border-bottom: 1px solid var(--kn-line2); background: var(--kn-bg2); }
.kn-k2 .kn-g-exb { padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; font-size: 12px; color: #3C4043; line-height: 1.5; }
.kn-k2 .kn-g-pic { display: block; align-self: center; width: 100%; max-width: 262px; height: auto; }   /* 絵 v2(320×203＝120:76)。262＝(アプリの箱 350 − 絵の外 185)×120/76(design §15) */
.kn-k2 .kn-g-btn { display: block; background: var(--kn-navy); color: #fff; text-align: center; font-weight: 700; font-size: 14px; border-radius: 8px; padding: 9px 0; }
.kn-k2 .kn-g-btn:hover { text-decoration: none; filter: brightness(1.1); }
.kn-k2 .kn-g-s { font-size: 11px; color: var(--kn-sub); text-align: center; }
.kn-k2 .kn-g-row { padding: 10px 14px; border-top: 1px solid #EEF0F2; }
.kn-k2 .kn-g-h + .kn-g-row { border-top: 0; }
.kn-k2 .kn-g-aph { display: flex; gap: 10px; align-items: flex-start; }
.kn-k2 .kn-g-aph > img { flex: none; display: block; }
.kn-k2 .kn-g-aph b { display: block; font-size: 13px; }
.kn-k2 .kn-g-aph span { display: block; font-size: 12px; color: #3C4043; line-height: 1.5; }
.kn-k2 .kn-g-apq { display: flex; gap: 10px; align-items: center; margin-top: 6px; }
.kn-k2 .kn-g-qr { flex: none; display: block; border: 1px solid var(--kn-line); }
.kn-k2 .kn-g-apq span { display: block; font-size: 11px; color: var(--kn-sub); line-height: 1.45; }
.kn-k2 .kn-g-apq a { display: block; white-space: nowrap; font-size: 13px; font-weight: 700; margin-top: 4px; }
.kn-k2 .kn-g .kn-nb, .kn-k2 .kn-g-apq span.kn-nb { display: inline-block; }   /* 字の塊ごとに折る(「ます」「（無料）」だけが次の行に残らない・PM 10/21) */

/* ⑩ 価格なびのコラムの箱（column_reads.php の kkn_reads_kekka_html・design kekka §14）。記事 3 本＝小さな絵・題 2 行まで＋もっと見る。 */
.kn-k2 .kn-col { margin-bottom: 0; }
.kn-k2 .kn-col-h { font-size: 14px; font-weight: 700; padding: 10px 14px; border-bottom: 1px solid var(--kn-line2); background: var(--kn-bg2); }
.kn-k2 .kn-col-l { padding: 4px 0; }
.kn-k2 .kn-col-a { display: flex; gap: 10px; align-items: center; padding: 8px 14px; }
.kn-k2 .kn-col-th { flex: none; display: block; width: 56px; height: 56px; object-fit: cover; border-radius: 6px; background: #F1F3F5; }
.kn-k2 .kn-col-t { min-width: 0; font-size: 13px; font-weight: 700; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.kn-k2 .kn-col-more { display: block; padding: 2px 14px 12px; font-size: 13px; }

/* 札（押せる丸いボタン） */
.kn-k2 .kn-chip {
	font: inherit; font-size: 13px; color: var(--kn-ink); background: #fff; cursor: pointer;
	border: 1px solid #C4C7CC; border-radius: 16px; padding: 4px 12px;
}
.kn-k2 .kn-chip.on { background: var(--kn-navy); border-color: var(--kn-navy); color: #fff; font-weight: 700; }

/* ⑫ フッター */
.kn-k2 #footer_container { background: var(--kn-bg); border-top: 1px solid var(--kn-line); margin-top: 32px; }
.kn-k2 #footer { padding-top: 18px; padding-bottom: 18px; font-size: 13px; color: var(--kn-sub); }
.kn-k2 #footer_nav ul { display: flex; flex-wrap: wrap; gap: 6px 24px; margin-bottom: 10px; }
.kn-k2 #footer_nav a { color: #3C4043; }
.kn-k2 #footer small { font-size: 11px; line-height: 1.8; }
.kn-k2 #footer small a { color: var(--kn-sub); }