@charset "utf-8";
/* 特集の頁と特集の一覧の左のメニュー(2026-10-29・TS-1・design bea7489 design/tokushu_side の sideCss を写した・計画 .ptverify/PLAN_2026-10-29_tokushu_side.md)。
   器は info_layout.php の tkside(.kn-twrap.kn-tkw の中に main → aside.kn-tks の順)。読むのは特集の頁と一覧だけ(kn-text.css・kn-tokushu.css は替えない)。
   ★PC(1200 以上)は aside を左の列(幅 200)へ・本文は右の列(今と同じ位置と幅)。1 列(1199 以下)は本文の後ろに線を引いて置く。
   ★aside は .kn-main の外＝本文の h2・a の css は当たらない。 */

.kn-tkw > .kn-main { grid-column: 2; grid-row: 1; }
.kn-tkw > .kn-tks { grid-column: 1; grid-row: 1; }
.kn-tks { font-size: 14px; line-height: 1.5; color: var(--kn-ink); min-width: 0; }
.kn-tks [hidden] { display: none !important; }
.kn-tks a { text-decoration: none; }
.kn-tks-w { display: inline-block; white-space: nowrap; }   /* ジャンルの名前の「・」で分けた塊＝折り返すのは「・」の後だけ(PM 10/29) */
.kn-tks ul { list-style: none; margin: 0; padding: 0; }
.kn-tks-bx { border: 1px solid #DADCE0; border-radius: 8px; background: #fff; margin: 0 0 16px; overflow: hidden; }
.kn-tks-h { margin: 0; font-size: 14px; font-weight: 700; line-height: 1.5; padding: 11px 14px; background: #F7F8FA; border-bottom: 1px solid var(--kn-line2); color: var(--kn-ink); }

/* ① この特集のジャンル */
.kn-tks-gt { display: flex; align-items: center; gap: 10px; padding: 12px 14px; color: var(--kn-ink); }
.kn-tks-gi { width: 44px; height: 44px; border-radius: 22px; background: #EEF4FC; display: flex; align-items: center; justify-content: center; flex: none; }
.kn-tks-gi svg { width: 24px; height: 24px; }
.kn-tks-gt b { font-size: 16px; flex: 1; }
.kn-tks-gt i, .kn-tks-gl i, .kn-tks-cal i, .kn-tks-all i { font-style: normal; color: var(--kn-navy); font-weight: 700; }
.kn-tks-gk { border-top: 1px solid var(--kn-line2); padding: 6px 0 !important; }
.kn-tks-gk a { display: block; padding: 6px 14px; color: var(--kn-link); font-size: 14px; }

/* 一覧の頁: ジャンルから探す(11 の列) */
.kn-tks-gl { padding: 4px 0 !important; }
.kn-tks-gl a { display: flex; align-items: center; gap: 8px; padding: 6px 12px; color: var(--kn-ink); font-size: 13px; }
.kn-tks-gl .kn-tks-gi { width: 32px; height: 32px; border-radius: 16px; }
.kn-tks-gl .kn-tks-gi svg { width: 20px; height: 20px; }
.kn-tks-gl .kn-tks-gn { flex: 1; }

/* ② ほかの特集(バナー＋下に題の字) */
.kn-tks-fl { padding: 12px 12px 4px !important; }
.kn-tks-fl li { margin: 0 0 14px; }
.kn-tks-fl a { display: block; color: var(--kn-link); }
.kn-tks-fl img { display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; border-radius: 6px; border: 1px solid #E3E6EA; background: #F6F9FD; }
.kn-tks-fl span { display: block; margin-top: 6px; font-size: 13px; line-height: 1.5; font-weight: 700; }

/* ③ 最近みた商品(中は tk_side.js) */
.kn-tks-rl { padding: 8px 12px 0; }
.kn-tks-ri { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 10px; color: var(--kn-link); }
.kn-tks-ri img { flex: none; width: 48px; height: 48px; object-fit: contain; border-radius: 6px; }
.kn-tks-ri span { font-size: 13px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; min-width: 0; }
.kn-tks-rdel { padding: 0 12px 12px; text-align: right; }
.kn-tks-rdel button { font: inherit; font-size: 12px; color: #3C4043; background: #fff; border: 1px solid #C4C7CC; border-radius: 6px; padding: 3px 10px; cursor: pointer; }

/* ④ お買い得カレンダー ⑤ 特集の一覧へ */
.kn-tks-cal { display: flex; align-items: center; gap: 8px; border: 1px solid #DADCE0; border-radius: 8px; background: #fff; padding: 12px; margin: 0 0 12px; color: var(--kn-ink); }
.kn-tks-cal svg { flex: none; }
.kn-tks-cal span { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.kn-tks-cal b { font-size: 13.5px; white-space: nowrap; }
.kn-tks-cal small { font-size: 12px; color: var(--kn-sub); }
.kn-tks-all { display: block; text-align: center; border: 1.5px solid var(--kn-navy); border-radius: 8px; padding: 9px 0; color: var(--kn-navy); font-weight: 700; background: #fff; }

/* 1 列(1199 以下・kn-text.css と同じ境目): 本文の後ろ・本文と同じ幅。ほかの特集と最近みた商品は横に並べる */
@media (max-width: 1199px) {
	.kn-tkw > .kn-main, .kn-tkw > .kn-tks { grid-column: auto; grid-row: auto; }
	.kn-tks { margin: 26px 0 24px; padding-top: 24px; border-top: 1px solid #DADCE0; }
	.kn-tks-gt { padding: 12px 16px; }
	.kn-tks-gk { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 16px !important; }
	.kn-tks-gk a { padding: 5px 14px; border: 1px solid #C4C7CC; border-radius: 18px; background: #fff; }
	.kn-tks-gl { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); padding: 8px 4px !important; }
	.kn-tks-fl { display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 14px; padding: 14px 16px 4px !important; }
	.kn-tks-fl li { margin: 0 0 10px; }
	.kn-tks-rl { display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 10px; padding: 12px 16px 0; }
}
/* 600 未満: ほかの特集は 1 行ずつ(左に小さな絵 128×64・右に題) */
@media (max-width: 599px) {
	.kn-tks-fl { display: block; }
	.kn-tks-fl a { display: flex; gap: 12px; align-items: center; }
	.kn-tks-fl img { width: 128px; flex: none; }
	.kn-tks-fl span { margin-top: 0; }
	.kn-tks-rl { display: block; }
}