@charset "utf-8";
/* 特集(/tokushu/)の頁と、トップの特集の枠(2026-10-22・server・PM 依頼・design tokushu_air の大きさ)。
   ・特集の頁は文字のページの器(info_layout.php・kn-base.css＋kn-text.css)の上に、この 1 枚を足す。本文の幅は 760px(文字のページと同じ)。
   ・トップ(index.php)とスマホのトップ(smp_index.php)は、特集の枠(.kn-tksec)だけを使う。
   ・design の大きさ: 頭の絵 760×320・3 章の図 PC 760×475／スマホ 360×895・トップのバナー 448×224(どれも 2 倍で書き出し)。 */

/* ── 特集の頁 ── */
/* 読み易さ(2026-10-22・依頼者「もうちょっと読み易く」・PLAN_2026-10-22_tokushu_readability.md): 本文の字 15→16px・段落の間 12→16px */
.kn-txt .kn-main .kn-tk { font-size: 16px; line-height: 1.9; }
.kn-txt .kn-main .kn-tk p { margin-bottom: 16px; }
.kn-txt .kn-main .kn-tk h2 { margin-top: 44px; }
/* 章のポイント: 薄い紺の地・左の太線・札 */
.kn-tk-pt { margin: 4px 0 18px; padding: 10px 14px 10px 16px; background: #EEF3FA; border-left: 4px solid var(--kn-navy); border-radius: 0 8px 8px 0; }
.kn-tk-pt-h { display: inline-block; margin-bottom: 2px; padding: 1px 10px; background: var(--kn-navy); color: #fff; border-radius: 12px; font-size: 12px; font-weight: 700; line-height: 1.7; }
.kn-txt .kn-main .kn-tk .kn-tk-pt p { margin: 2px 0 0; font-size: 15px; font-weight: 700; line-height: 1.75; color: #1B2B44; }
/* 箱: 枠と見出し */
.kn-tk-box { margin: 18px 0 22px; border: 1px solid #C9D6E8; border-radius: 10px; background: #FBFCFE; overflow: hidden; }
.kn-tk-box-h { padding: 8px 16px; background: #E6EEF8; color: #1B2B44; font-weight: 700; font-size: 15px; border-bottom: 1px solid #C9D6E8; }
/* ★.kn-txt .kn-main ul(kn-text.css)の margin が勝つので、同じ強さ以上で書く(箇条の点が箱の枠に付いた・10/22) */
.kn-txt .kn-main .kn-tk-box > :not(.kn-tk-box-h) { margin-left: 16px; margin-right: 16px; }
.kn-txt .kn-main .kn-tk-box > .kn-tk-box-h + * { margin-top: 12px; }
.kn-txt .kn-main .kn-tk-box > :last-child { margin-bottom: 14px; }
/* 会話(design 会話の見本: 顔 72px の丸の下に名・編集部は左で薄い青・読者さんは右で薄い黄) */
.kn-tk-talk { margin: 18px 0 24px; display: flex; flex-direction: column; gap: 14px; }
.kn-tk-say { display: flex; align-items: flex-start; gap: 12px; }
.kn-tk-say-b { flex-direction: row-reverse; }
.kn-tk-face { flex: 0 0 72px; text-align: center; }
.kn-tk-face img { display: block; width: 72px; height: 72px; border-radius: 50%; }
.kn-tk-who { display: block; margin-top: 2px; font-size: 12px; color: var(--kn-sub); line-height: 1.5; }
.kn-tk-bub { min-width: 0; max-width: 560px; padding: 12px 16px; border-radius: 14px; }
.kn-tk-say-a .kn-tk-bub { background: #EDF3FB; }
.kn-tk-say-b .kn-tk-bub { background: #FFF4DE; }
.kn-txt .kn-main .kn-tk .kn-tk-bub p { margin: 0; font-size: 15px; line-height: 1.8; }
/* 5 つのチェック: 番号の丸つきのカード(PC 2 列・スマホ 1 列) */
.kn-txt .kn-main ol.kn-tk-steps { list-style: none; counter-reset: kntk; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 8px 0 18px; }
.kn-txt .kn-main ol.kn-tk-steps li { counter-increment: kntk; position: relative; margin: 0; padding: 12px 14px 12px 50px; border: 1px solid var(--kn-line); border-radius: 10px; background: #fff; font-size: 15px; line-height: 1.75; }
.kn-txt .kn-main ol.kn-tk-steps li::before { content: counter(kntk); position: absolute; left: 12px; top: 12px; width: 26px; height: 26px; border-radius: 50%; background: var(--kn-navy); color: #fff; font-weight: 700; font-size: 14px; line-height: 26px; text-align: center; }
/* 部屋ごとの絵 3 枚(PC は横に 3 つ・スマホは縦) */
.kn-tk-rooms { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 6px 0 18px; }
.kn-tk-rooms .kn-tk-fig { margin: 0; }
.kn-tk-rooms img { border-radius: 8px; }
@media (max-width: 599px) {
	.kn-txt .kn-main ol.kn-tk-steps { grid-template-columns: minmax(0, 1fr); }
	.kn-tk-rooms { grid-template-columns: minmax(0, 1fr); }
	.kn-tk-face { flex-basis: 56px; }
	.kn-tk-face img { width: 56px; height: 56px; }
	.kn-tk-bub { padding: 10px 12px; }
}
.kn-tk-head { margin: 0 0 14px; }
.kn-tk-head img { display: block; width: 100%; max-width: 760px; height: auto; border-radius: 10px; }
.kn-txt .kn-main .kn-tk h1 { margin-bottom: 8px; }
/* 書き手・公開日・更新日: 塊の中では折らず、塊ごとに次の行へ(スマホ 390 で横にはみ出した・10/22) */
.kn-txt .kn-main .kn-tk-meta { display: flex; flex-wrap: wrap; column-gap: 12px; row-gap: 2px; font-size: 13px; color: var(--kn-sub); margin: 0 0 18px; }
.kn-tk-meta span { white-space: nowrap; }
.kn-txt .kn-main .kn-tk h3 { font-size: 16px; font-weight: 700; line-height: 1.5; margin: 22px 0 8px; }
.kn-tk-toc { margin: 18px 0 8px; padding: 12px 16px 6px; background: var(--kn-bg2); border: 1px solid var(--kn-line); border-radius: 10px; }
.kn-tk-toc-h { font-weight: 700; font-size: 14px; margin-bottom: 4px; }
.kn-txt .kn-main .kn-tk-toc ol { margin: 0 0 6px; }
.kn-txt .kn-main .kn-tk-toc li { margin-bottom: 2px; font-size: 14px; }
.kn-txt .kn-main .kn-tk-toc a { text-decoration: none; }
/* 表: 4 列は狭い画面で収まらない＝箱の中で横に動かす(頁ごと横に動かさない) */
.kn-tk-tbl { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 10px 0 14px; }
.kn-tk-tbl .kn-table { margin: 0; min-width: 640px; }
.kn-tk-tbl .kn-table td, .kn-tk-tbl .kn-table th { font-size: 13px; line-height: 1.6; }
.kn-tk-tbl .kn-table th[scope="col"] { white-space: normal; }
/* 左の見出しの列は 8.5em に決め打ち、残りを右の列で等分(左の「公式の消費電力（定格）」が頁の半分を取り、右の 4 列の字が 1〜2 字ずつ折れた・PM 10/22) */
.kn-tk-tbl .kn-table { table-layout: fixed; }
.kn-tk-tbl .kn-table thead tr > :first-child { width: 8.5em; }
.kn-tk-tbl .kn-table th[scope="row"] { white-space: normal; }
.kn-txt .kn-main .kn-tk-swipe { display: none; }
/* 表は最小 640px＝本文の幅が 640 を切る画面(幅 約 690 未満)で横に動く */
@media (max-width: 699px) {
	.kn-txt .kn-main .kn-tk-swipe { display: block; margin: 8px 0 0; font-size: 12px; color: var(--kn-sub); }
}
.kn-tk-fig { margin: 16px 0 20px; }
.kn-tk-fig img { display: block; width: 100%; height: auto; max-width: 760px; margin: 0 auto; }
.kn-tk-fig figcaption { font-size: 12px; color: var(--kn-sub); margin-top: 6px; text-align: center; }
/* 写真(Pixabay)：角を丸め、説明の 1 行は左寄せ */
.kn-tk-photo img { border-radius: 10px; }
.kn-tk-photo figcaption { font-size: 13px; line-height: 1.7; text-align: left; }
/* 横棒のグラフ(:::bars)：名・棒・字。字は右の決まった幅に揃える。スマホは名を棒の上に */
.kn-tk-bars, .kn-tk-months { margin: 14px 0 22px; padding: 14px 16px 10px; border: 1px solid var(--kn-line); border-radius: 10px; background: #fff; }
.kn-tk-bars-h { margin: 0 0 10px; font-size: 14px; font-weight: 700; color: var(--kn-ink); }
.kn-tk-bar-row { display: grid; grid-template-columns: 12em minmax(0, 1fr); column-gap: 12px; align-items: center; padding: 6px 0; border-top: 1px dashed var(--kn-line); }
.kn-tk-bar-row:first-of-type { border-top: 0; }
.kn-tk-bar-n { font-size: 14px; line-height: 1.5; }
.kn-tk-bar-v { display: flex; align-items: center; gap: 8px; min-height: 22px; }
.kn-tk-bar-w { flex: 1; min-width: 0; }
.kn-tk-bar { display: block; height: 14px; border-radius: 0 4px 4px 0; background: var(--kn-navy); }
.kn-tk-bar2 { background: #8FB0DA; }
.kn-tk-bar-t { flex: 0 0 9.5em; font-size: 14px; font-weight: 700; line-height: 1.4; }
.kn-tk-bar-s { display: inline-block; margin-right: 4px; font-size: 12px; font-weight: 400; color: var(--kn-sub); }
.kn-tk-bar-note { grid-column: 2; font-size: 12px; color: var(--kn-sub); line-height: 1.5; }
/* 暦の帯(:::months)：9 月〜4 月の 8 マスに帯。帯の下に字の並び */
.kn-tk-mo { display: grid; grid-template-columns: 4.5em minmax(0, 1fr); column-gap: 10px; row-gap: 6px; align-items: center; }
.kn-tk-mo-head { display: grid; grid-template-columns: repeat(8, 1fr); font-size: 12px; color: var(--kn-sub); text-align: center; }
.kn-tk-mo-n { font-size: 13px; font-weight: 700; }
.kn-tk-mo-track { position: relative; height: 22px; border-radius: 4px; background: var(--kn-bg) repeating-linear-gradient(to right, transparent 0 calc(12.5% - 1px), #fff calc(12.5% - 1px) 12.5%); }
.kn-tk-mo-band { position: absolute; top: 3px; bottom: 3px; border-radius: 4px; }
.kn-tk-mo-b1 { background: #F2C46D; }
.kn-tk-mo-b2 { background: #D9822B; }
.kn-txt .kn-main ul.kn-tk-mo-l { list-style: none; margin: 10px 0 0; padding: 0; font-size: 14px; }
.kn-txt .kn-main ul.kn-tk-mo-l li { margin: 2px 0; }
.kn-tk-mo-k { display: inline-block; width: 12px; height: 12px; margin-right: 6px; border-radius: 3px; vertical-align: -1px; }
@media (max-width: 599px) {
	.kn-tk-bars, .kn-tk-months { padding: 12px 12px 8px; }
	.kn-tk-bar-row { grid-template-columns: minmax(0, 1fr); row-gap: 2px; }
	.kn-tk-bar-note { grid-column: 1; }
	.kn-tk-bar-t { flex-basis: 8.5em; }
	.kn-tk-mo { grid-template-columns: 3.5em minmax(0, 1fr); }
	.kn-tk-mo-head { font-size: 11px; }
}
.kn-tk-cmp { margin: 8px 0 14px; }
.kn-tk-by { margin-top: 18px; font-size: 13px; color: var(--kn-sub); }
/* 一覧(/tokushu/) */
.kn-tk-list { list-style: none !important; padding: 0 !important; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px; }
.kn-tk-list li { margin: 0 !important; }
.kn-tk-list a { display: block; color: var(--kn-ink) !important; text-decoration: none !important; }
.kn-tk-list img { display: block; width: 100%; height: auto; border-radius: 10px; box-shadow: 0 1px 4px rgba(0, 0, 0, .12); }
.kn-tk-list .kn-tk-lt { display: block; margin-top: 6px; font-size: 14px; line-height: 1.6; }
.kn-tk-list .kn-tk-ld { display: block; font-size: 12px; color: var(--kn-sub); }

/* ── トップの特集の枠(index・smp_index) ── */
.kn-tksec { margin: 0 0 22px; }
.kn-tksec .kn-tk-h { display: flex; align-items: baseline; gap: 10px; font-size: 17px; font-weight: 700; margin: 0 0 10px; }
.kn-tksec .kn-tk-h a { margin-left: auto; font-size: 13px; font-weight: 400; }
.kn-tkl { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 448px)); gap: 24px; }
.kn-tkl li { margin: 0; }
.kn-tkl a { display: block; color: var(--kn-ink); text-decoration: none; }
.kn-tkl img { display: block; width: 100%; height: auto; border-radius: 10px; box-shadow: 0 1px 4px rgba(0, 0, 0, .12); }
.kn-tkl .kn-tk-lt { display: block; margin-top: 6px; font-size: 14px; line-height: 1.6; }
.kn-tkl a:hover .kn-tk-lt { text-decoration: underline; }
@media (max-width: 899px) {
	.kn-tkl { grid-template-columns: minmax(0, 1fr); }
}
/* スマホのトップ(smp_index): 左右 15px の枠の中に 1 枚(幅いっぱい) */
.kn-tksec.kn-tk-sp { margin: 16px 15px 18px; font-family: inherit; }
.kn-tksec.kn-tk-sp .kn-tk-h { font-size: 16px; color: #202124; }
.kn-tksec.kn-tk-sp .kn-tk-h a { color: #1A5FB4; }
.kn-tk-sp .kn-tkl a { color: #202124; }