/* タシカベのトップ — ファクログ型の一枚。
 *
 * **なぜこれを書いたか（2026-09-08・担当者の指示）**
 * kit の部品を数個並べただけでは、ファクログの「情報密度」が出ず、
 * **薄い一枚**になっていた。担当者の言葉は「これはひどいわ」。
 *
 * **ファクログの構造をそのまま起こしてある**（吹き出し→大見出し→人気の横並び→
 * 軸ごとの順位→番号つき詳細→右の欄→チップの棚）。
 * **ただし、向こうのCSSファイルは使っていない。**別会社の著作物なので、
 * **同じ見え方になるように、こちらで書いた。**
 *
 * ★2026-09-28: 10幅の全数検査で 1幅あたり37〜50件の P1（字が11〜13px・押す物が44px未満）。
 * **本文として読ませる文は14px・押す物は44px以上**に置き換えた。短いラベル（バッジ・順位・タグ・値）は据え置き（密度はここで出す）
 *
 * **星・評価点・口コミ件数は作らない。**（このサイトの公開文とオーナー指示）
 * 向こうが「評価 4.4（37件）」を置いている場所には、**4軸の順位合計**を置く。
 * **数字はすべて各社が公式に公表しているもので、当サイトが点を付けた軸は1つも無い。**
 */

:root {
  --t-ink: #1a2b34;
  --t-sub: #55707d;
  --t-line: #d7e2e8;
  --t-bg: #eef3f6;
  --t-card: #ffffff;
  --t-blue: #0371a3;
  --t-blue-d: #025b83;
  --t-pale: #e3f0f6;
  --t-cta: #f0820a;
  --t-cta-d: #c96806;
  --t-gold: #b8860b;
  --t-r: 8px;
  --t-w: 1180px;
}

/* ★2026-10-01 全面に書き直した（持ち主「ふぁくろぐみたいに。ヒーローの下はすぐおすすめ、その下にジャンル別ランキング、
 * その下にジャンル別の詳細＋横にオススメ記事」）。旧の tp- の規則は全部消した（dist に tp- が0件なのを確かめた）。
 * 本文は14px 以上・押す物は44px 以上。狭くて入らないものは字を縮めずに並べ方を変える */
.tq { background: #eef6f9; color: var(--t-ink); padding-bottom: 32px; }
.tq *, .kj-top *, .kj-detail * { min-width: 0; }
.tq-w { max-width: var(--t-w); margin: 0 auto; padding: 0 16px; }
/* サイト共通の h2（左の線と背景）・h3（下線）を、トップの見出しでは外す。:where で詳細度を素の h2 と同じにして、下の個別の規則を勝たせる */
:where(.tq, .kj-detail, .kj-grid, .nk-sec, .kc-write) :is(h2, h3) { padding: 0; border: 0; background: none; letter-spacing: .02em; }
.tq .sr-l, .nk-sec .sr-l, .kc-stars .sr-l { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ① ヒーロー: 淡い背景の絵（塗装業者）の上に、左に文字。899px 以下は絵の上に白を敷いて中央に */
.tq-hero { position: relative; overflow: hidden; background: #e6f6fb; }
.tq-hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: right center; }
.tq-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(255,255,255,.92) 0, rgba(255,255,255,.8) 38%, rgba(255,255,255,0) 60%); }
.tq-hero-in { position: relative; z-index: 1; box-sizing: border-box; max-width: var(--t-w); margin: 0 auto; padding: 60px 40px 56px; display: flex; flex-direction: column; align-items: flex-start; }
.tq-hero-in > * { width: min(560px, 100%); box-sizing: border-box; }
.tq-bubble { position: relative; width: auto !important; align-self: auto; margin: 0 0 18px; padding: 8px 20px; background: #fff; border: 2px solid #2aa7c9; border-radius: 6px; font-size: 15px; font-weight: 700; }
.tq-bubble::after { content: ""; position: absolute; left: 50%; bottom: -9px; width: 14px; height: 14px; background: #fff; border-right: 2px solid #2aa7c9; border-bottom: 2px solid #2aa7c9; transform: translateX(-50%) rotate(45deg); }
.tq-h1 { margin: 0; line-height: 1.35; }
.tq-h1-s { display: block; font-size: 26px; font-weight: 800; color: #1f2d36; }
.tq-h1-m { display: block; font-size: 42px; font-weight: 900; color: #10222c; letter-spacing: .03em; }
.tq-logo { margin: 14px 0 22px; display: flex; align-items: center; gap: 10px; }
.tq-logo-img { display: block; height: 76px; width: auto; max-width: 100%; }
.tq-search { display: flex; align-items: center; gap: 8px; background: #fff; border: 2px solid #2aa7c9; border-radius: 8px; padding: 6px; box-shadow: 0 4px 14px rgba(10,80,110,.12); }
.tq-search input { flex: 1 1 auto; min-height: 44px; border: 0; padding: 0 10px; font-size: 16px; font-family: inherit; background: transparent; }
.tq-search button { flex: 0 0 48px; height: 48px; border: 0; border-radius: 6px; background: #b35400; color: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
@media (max-width: 899px) {
  .tq-hero::after { background: rgba(255,255,255,.78); }
  .tq-hero-in { padding: 32px 16px 30px; align-items: center; text-align: center; }
  .tq-logo { justify-content: center; }
}
@media (max-width: 599px) {
  .tq-h1-s { font-size: 19px; }
  .tq-h1-m { font-size: 26px; }
  .tq-logo-img { height: 54px; }
  .tq-bubble { font-size: 14px; padding: 8px 14px; }
}

/* 見出し（★10-01 両側の斜線は外した。持ち主「// うっとうしいから消して」） */
.tq-sec { padding: 36px 0 4px; }
.tq-h2 { display: block; margin: 0 0 6px; font-size: 26px; font-weight: 800; color: #0a83b5; text-align: center; line-height: 1.45; }
/* 見出し・吹き出し・h1・広告の断りは .tq-nb の切れ目でだけ折る（「外壁／塗装」で割れた・10-01 の 390px 実測） */
.tq-nb { display: inline-block; }
.tq-nb wbr { display: none; }   /* 短い句だけに使う。長い句に付けると狭い幅ではみ出す（.nb で 320px の P0 が36件出た） */
@media (max-width: 599px) { .tq-h2 { font-size: 20px; } }
@media (max-width: 359px) { .tq-h2 { font-size: 18px; } }
/* 広告の断りは薄く（持ち主「プロモーションを薄く」） */
.tq-disc { text-align: center; margin: 0 0 14px; font-size: 14px; color: #5b6e78; }  /* 薄く見せるのは字の大きさと色味だけ。読める濃さ（対比4.5）は割らない */
.tq-note { margin: 10px 0 0; font-size: 14px; line-height: 1.8; color: var(--t-sub); }
.tq-note a { color: var(--t-blue); }

/* ロゴの箱（公式のロゴを加工せず枠に収める。ロゴを使わない社は社名の文字） */
.lg { display: flex; align-items: center; justify-content: center; box-sizing: border-box; background: #fff; border: 1px solid var(--t-line); border-radius: 8px; padding: 10px; overflow: hidden; }
.lg img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.lg-t { font-size: 16px; font-weight: 800; color: #10222c; text-align: center; line-height: 1.4; }
.lg.is-l { width: 100%; aspect-ratio: 16 / 10; padding: 16px; }
.lg.is-s { width: 64px; height: 64px; padding: 6px; }
.lg-t.is-s { height: auto; min-height: 64px; font-size: 14px; line-height: 1.3; padding: 4px; }  /* 社名の文字は3行になる（窓口）。高さを固定すると上下が切れた */
.lg.is-m { width: 96px; height: 96px; flex: 0 0 96px; }
.lg-t.is-m { font-size: 14px; }

/* ② おすすめ */
.tq-reco { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); gap: 20px; background: #fff; border-radius: 16px; padding: 20px; }
@media (max-width: 599px) { .tq-reco { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; padding: 14px; } }
@media (max-width: 359px) { .tq-reco { grid-template-columns: minmax(0, 1fr); } }
.tq-reco-c { display: flex; flex-direction: column; gap: 6px; }
.tq-reco-n { margin: 0; font-size: 16px; font-weight: 800; line-height: 1.4; }
.tq-reco-n a { color: var(--t-ink); text-decoration: none; display: inline-flex; min-height: 44px; align-items: center; }
.tq-reco-v { margin: 0 0 auto; font-size: 15px; font-weight: 800; color: #0371a3; }
.tq-reco-v span { display: block; font-size: 14px; font-weight: 500; color: var(--t-sub); }
.tq-btn { display: flex; align-items: center; justify-content: center; min-height: 48px; margin-top: 8px; padding: 6px 12px; box-sizing: border-box; border-radius: 6px; background: #0b7a70; color: #fff; font-size: 15px; font-weight: 800; text-decoration: none; text-align: center; line-height: 1.4; box-shadow: 0 3px 0 #075a52; }
.tq-btn:hover { background: #096a61; }
.tq-btn.is-plain { background: #fff; color: #0371a3; border: 2px solid #2cbfaf; box-shadow: none; }

/* ③ ジャンル別ランキング（1179px 以下は横に送る。4つ並ぶ幅だけ4列） */
.tq-genres { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x proximity; padding: 4px 0 10px; }
.tq-genre { flex: 0 0 min(300px, 84%); scroll-snap-align: start; box-sizing: border-box; background: #fff; border-radius: 12px; padding: 10px 16px 6px; }
@media (min-width: 1180px) { .tq-genres { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: visible; } }
.tq-genre h3 { margin: 0; text-align: center; font-size: 18px; }
.tq-genre h3 a { color: var(--t-ink); text-decoration: none; display: inline-flex; min-height: 44px; align-items: center; }
.tq-genre ol { list-style: none; margin: 0; padding: 0; }
.tq-genre li { display: grid; grid-template-columns: 36px 64px minmax(0, 1fr); grid-template-areas: "cr lg gn" "rk lg gn"; align-items: center; gap: 0 10px; padding: 10px 0; border-top: 1px solid #edf2f5; }
.tq-crown { grid-area: cr; justify-self: center; align-self: end; color: #a9b4bb; }
.tq-crown.is-1 { color: #e0b52b; }
.tq-crown.is-3 { color: #b07a3c; }
.tq-rk { grid-area: rk; justify-self: center; align-self: start; font-size: 14px; font-weight: 800; }
.tq-genre .lg { grid-area: lg; }
.tq-gn { grid-area: gn; }
.tq-gn b { display: block; font-size: 15px; line-height: 1.4; }
.tq-gn b a { color: var(--t-ink); text-decoration: none; display: inline-flex; min-height: 44px; align-items: center; }
.tq-gn small { display: block; font-size: 14px; color: var(--t-sub); line-height: 1.5; }

/* ④ ジャンル別の詳細（タブ）＋右の段（1024px 以上で2段） */
.tq-main { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: start; }
@media (max-width: 1023px) { .tq-main { grid-template-columns: minmax(0, 1fr); } }
.tq-tabs { position: relative; }
.tq-tab-r { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tq-tab-l { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; border-bottom: 3px solid #2cbfaf; }
.tq-tab-l label { flex: 1 0 auto; min-height: 48px; display: flex; align-items: center; justify-content: center; padding: 0 16px; background: #fff; border-radius: 10px 10px 0 0; font-size: 15px; font-weight: 800; cursor: pointer; white-space: nowrap; }
.tq-tab-l label wbr { display: none; }
#tq-osusume:checked ~ .tq-tab-l label[for="tq-osusume"], #tq-kamei:checked ~ .tq-tab-l label[for="tq-kamei"],
#tq-kotowari:checked ~ .tq-tab-l label[for="tq-kotowari"], #tq-shinsa:checked ~ .tq-tab-l label[for="tq-shinsa"] { background: linear-gradient(90deg, #0b7a70, #0371a3); color: #fff; }
.tq-tab-r:focus-visible ~ .tq-tab-l { outline: 2px solid #0aa0e0; outline-offset: 2px; }
.tq-panel { display: none; background: #fff; border-radius: 0 0 12px 12px; padding: 18px; }
#tq-osusume:checked ~ .tq-p-osusume, #tq-kamei:checked ~ .tq-p-kamei, #tq-kotowari:checked ~ .tq-p-kotowari, #tq-shinsa:checked ~ .tq-p-shinsa { display: block; }
/* 599px 以下は4つのタブが入らず4つ目が隠れた（10-01 の 390px 実測）→ 横に送らず 2×2 に組み替える */
@media (max-width: 599px) {
  .tq-tab-l { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding-bottom: 6px; }
  .tq-tab-l label { border-radius: 8px; padding: 0 8px; }
  .tq-panel { padding: 12px; border-radius: 12px; }
}
.tq-card { border: 1px solid #e1e8ec; border-radius: 10px; padding: 18px; margin: 0 0 16px; }
@media (max-width: 599px) { .tq-card { padding: 14px; } }
.tq-card-h { display: flex; gap: 14px; align-items: center; }
.tq-card-h h3 { margin: 0; font-size: 20px; line-height: 1.4; }
.tq-card-h h3 a { color: var(--t-ink); text-decoration: none; }
.tq-card-h p { margin: 0; }
.tq-card-h p a { display: inline-flex; min-height: 44px; align-items: center; font-size: 14px; color: var(--t-blue); }
.tq-no { color: #0371a3; }
@media (max-width: 413px) { .tq-card-h { gap: 10px; } .tq-card-h .lg.is-m { width: 72px; height: 72px; flex-basis: 72px; } .tq-card-h h3 { font-size: 18px; } }
.tq-rings { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 14px 0; }
@media (max-width: 599px) { .tq-rings { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tq-ring { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.tq-ring b { display: flex; align-items: center; justify-content: center; width: 100%; max-width: 104px; aspect-ratio: 1 / 1; box-sizing: border-box; border: 7px solid #2cbfaf; border-radius: 50%; padding: 6px; font-size: 15px; line-height: 1.3; }
.tq-ring small { font-size: 14px; font-weight: 700; color: var(--t-sub); }
.tq-desc { margin: 0 0 8px; font-size: 15px; line-height: 1.85; }
.tq-spec { margin: 8px 0; font-size: 14px; line-height: 1.8; }
.tq-spec span { display: inline-block; margin-right: 14px; }
.tq-spec b { color: #0371a3; }
.tq-card .tq-btn { min-height: 56px; font-size: 17px; }

.tq-side section { background: #fff; border-radius: 12px; padding: 16px; margin: 0 0 16px; }
.tq-side h2 { margin: 0 0 6px; text-align: center; font-size: 20px; color: #0a83b5; }
.tq-side ul { list-style: none; margin: 0; padding: 0; }
.tq-side li + li { border-top: 1px solid #edf2f5; }
.tq-side li a { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 10px; align-items: center; min-height: 44px; padding: 10px 0; font-size: 14px; font-weight: 700; color: var(--t-ink); text-decoration: none; line-height: 1.55; }
.tq-side li img { width: 112px; height: auto; border-radius: 4px; }
.tq-kuchi p { font-size: 14px; line-height: 1.8; margin: 0 0 6px; }


/* 公開日・最終更新（トップは最後に置く） */
.tq-upd { margin-top: 24px; }
.tq-upd .updated { margin: 0; justify-content: center; }

/* ==== 記事の頭（2026-10-02 持ち主「記事はタイトル → グリッドのグラフ → 断りを薄く → カテゴリごとの詳細（右に記事）→ 本文」）==== */
.kj-top { max-width: calc(var(--w) + 304px); margin: 20px auto 0; }
.kj-top h1 { color: #0a6f9c; }
.kj-disc { text-align: center; margin: 10px 0 0; font-size: 14px; color: #5b6e78; }
.kj-detail { max-width: var(--w); margin: 16px auto 0; }

/* グリッド: 左に図・右に軸の切り替え（899px 以下は図の下に切り替え） */
.kj-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; align-items: center; background: #fff; border-radius: 16px; padding: 24px; }
@media (max-width: 899px) { .kj-grid { grid-template-columns: minmax(0, 1fr); padding: 16px 14px; gap: 16px; } }
.kg-plot { position: relative; padding: 0 0 30px 30px; }
.kg-area { position: relative; aspect-ratio: 16 / 10; border-left: 2px solid #0aa0e0; border-bottom: 2px solid #2cbfaf;
  background-image: linear-gradient(#d6edf3 1px, transparent 1px), linear-gradient(90deg, #d6edf3 1px, transparent 1px); background-size: 10% 12.5%; }
@media (max-width: 599px) { .kg-area { aspect-ratio: 1 / 1; } }
.kg-area::before, .kg-area::after { content: ""; position: absolute; border: 7px solid transparent; }
.kg-area::before { left: -8px; top: -12px; border-bottom: 11px solid #0aa0e0; border-top: 0; }   /* 縦軸の矢印 */
.kg-area::after { right: -12px; bottom: -8px; border-left: 11px solid #2cbfaf; border-right: 0; }  /* 横軸の矢印 */
.kg-yl { position: absolute; left: 0; top: 50%; transform: translateY(-50%); margin: 0; writing-mode: vertical-rl; font-size: 14px; font-weight: 800; letter-spacing: .1em; }
.kg-xl { position: absolute; left: 30px; right: 0; bottom: 0; margin: 0; text-align: center; font-size: 14px; font-weight: 800; }
.kg-pt { position: absolute; z-index: 1; transform: translate(-50%, 50%); transition: left .6s ease, bottom .6s ease, transform .2s ease, box-shadow .2s ease; text-decoration: none; border-radius: 8px; }
.kg-pt .lg.is-s { width: 60px; height: 60px; background-color: #fff; box-shadow: 0 1px 3px rgba(10, 60, 80, .12); }
@media (max-width: 599px) { .kg-pt .lg.is-s { width: 44px; height: 44px; padding: 4px; } .kg-pt .lg-t.is-s { font-size: 11px; min-height: 44px; } }
.kg-pt:hover, .kg-pt:focus-visible { z-index: 5; transform: translate(-50%, 50%) scale(1.15); }
.kg-pt:hover .lg, .kg-pt:focus-visible .lg { box-shadow: 0 6px 16px rgba(10, 60, 80, .25); border-color: #0aa0e0; }
.kg-tip { position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%); width: 190px; display: flex; flex-direction: column; gap: 2px;
  padding: 10px 12px; background: #fff; border: 1px solid #b9dfe9; border-radius: 8px; box-shadow: 0 8px 20px rgba(10, 60, 80, .18);
  font-size: 14px; line-height: 1.5; color: var(--t-ink); text-align: left; opacity: 0; visibility: hidden; transition: opacity .2s ease; pointer-events: none; }
.kg-tip b { font-size: 15px; }
.kg-go { margin-top: 4px; font-weight: 800; color: #0b7a70; }
.kg-pt.is-hi .kg-tip { bottom: auto; top: calc(100% + 8px); }        /* 上半分の点は、吹き出しを下に */
.kg-pt.is-r .kg-tip { left: auto; right: 0; transform: none; }          /* 右端の点は、右に揃える */
.kg-pt.is-l .kg-tip { left: 0; transform: none; }
.kg-pt:hover .kg-tip, .kg-pt:focus-visible .kg-tip { opacity: 1; visibility: visible; }
.kg-out { margin: 8px 0 0; font-size: 14px; color: var(--t-sub); }
.kg-ctl { display: flex; flex-direction: column; gap: 10px; background: #c9ecf4; border-radius: 12px; padding: 20px; }
.kg-ctl-t { margin: 0 0 4px; text-align: center; font-size: 18px; font-weight: 800; color: #0a5f82; }
.kg-ctl label { display: flex; flex-direction: column; gap: 4px; font-size: 14px; font-weight: 700; }
.kg-ctl select { min-height: 44px; border: 0; border-radius: 4px; padding: 0 10px; font-size: 16px; font-family: inherit; background: #fff; color: var(--t-ink); }
.kg-ctl .kg-ck { flex-direction: row; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px; background: #fff; border-radius: 4px; }
.kg-ctl .kg-ck input { width: 20px; height: 20px; accent-color: #0b7a70; }
.kg-ctl button { min-height: 48px; border: 0; border-radius: 6px; background: #0371a3; color: #fff; font-size: 16px; font-weight: 800; font-family: inherit; cursor: pointer; }
.kg-note { margin: 4px 0 0; font-size: 14px; line-height: 1.7; color: #3e5a66; }
.kg-note a { color: #0371a3; }

/* 1200px 以上: 頭は全幅、詳細と本文は左の段、右の段（記事）は詳細の横から本文の終わりまで */
@media (min-width: 1200px) {
  main.has-side > .kj-top { grid-column: 1 / -1; width: calc(var(--w) + 304px); max-width: 100%; }
  main.has-side > .kj-detail { grid-column: 1; margin: 16px 0 0; max-width: none; }
  main.has-side > .kj-body { grid-column: 1; }
  main.has-side:has(> .kj-top) > .side { grid-column: 2; grid-row: 3 / span 2; margin-top: 16px; }
}

/* ==== ニュース・記事のページと検索結果（2026-10-02）==== */
.nk-hero .tq-hero-in { padding-bottom: 44px; }
.nk-h1sub { margin: 10px 0 0; font-size: 15px; font-weight: 700; color: #3e5a66; }
.nk-sec { max-width: var(--t-w); margin: 0 auto; padding: 36px 16px 8px; box-sizing: border-box; }
.nk-search { text-align: center; }
.nk-form { display: flex; align-items: center; max-width: 720px; margin: 8px auto 0; background: #fff; border: 1px solid #d7e2e8; border-radius: 999px; padding: 4px 6px 4px 20px; box-shadow: 0 4px 14px rgba(10, 80, 110, .08); }
.nk-form input { flex: 1 1 auto; min-height: 48px; border: 0; background: transparent; font-size: 16px; font-family: inherit; }
.nk-form button { flex: 0 0 48px; height: 48px; border: 0; border-radius: 50%; background: none; color: #10222c; cursor: pointer; }
.nk-strong { max-width: none; background: #e9eef1; padding: 28px 0; margin-top: 28px; }
.nk-rail { position: relative; max-width: var(--t-w); margin: 0 auto; padding: 0 16px; box-sizing: border-box; }
.nk-scroll { display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; list-style: none; margin: 0; padding: 4px 0 8px; }
.nk-scroll::-webkit-scrollbar { display: none; }
.nk-scroll .nk-card { flex: 0 0 min(270px, 78%); scroll-snap-align: start; }
.nk-prev, .nk-next { position: absolute; top: 34%; z-index: 2; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .95); box-shadow: 0 2px 8px rgba(0, 0, 0, .2); font-size: 26px; line-height: 1; color: #10222c; cursor: pointer; }
.nk-prev { left: 4px; } .nk-next { right: 4px; }
.nk-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 24px; list-style: none; margin: 16px 0 0; padding: 0; }
@media (max-width: 899px) { .nk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 14px; } }
@media (max-width: 479px) { .nk-grid { grid-template-columns: minmax(0, 1fr); } }
.nk-card a { display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: var(--t-ink); }
.nk-card img { width: 100%; height: auto; aspect-ratio: 1200 / 630; object-fit: cover; border-radius: 10px; box-shadow: 0 2px 8px rgba(10, 60, 80, .12); transition: transform .2s ease, box-shadow .2s ease; }
.nk-card a:hover img { transform: translateY(-3px); box-shadow: 0 8px 18px rgba(10, 60, 80, .2); }
.nk-t { font-size: 16px; font-weight: 700; line-height: 1.65; }
.nk-cat { align-self: flex-start; font-size: 14px; font-weight: 700; color: #0a5f82; background: #d9eef5; padding: 2px 10px; border-radius: 4px; }
.nk-more { display: none; }
.nk-vm { text-align: center; margin: 28px 0 0; }
.nk-vmb { display: inline-flex; align-items: center; gap: 16px; min-height: 52px; padding: 0 32px; border: 1px solid #10222c; background: #fff; font-size: 16px; font-weight: 700; font-family: inherit; color: #10222c; cursor: pointer; }
.nk-body { margin-top: 32px !important; }
.sr-h { margin-top: 8px; }
.sr-g { margin-top: 24px; }

/* ==== 口コミを書く（2026-10-02 版2）==== */
.kc-sub { margin: 4px 0 14px; font-size: 18px; font-weight: 800; color: #10222c; }
.kc-pts { margin: 0; padding: 14px 18px 14px 34px; background: rgba(255, 255, 255, .92); border-radius: 14px; font-size: 15px; font-weight: 700; line-height: 1.9; text-align: left; }
.kc-top { text-align: center; }
.kc-notice { max-width: 720px; margin: 0 auto 18px; text-align: left; }
.kc-notice > summary { display: flex; align-items: center; justify-content: center; min-height: 48px; width: max-content; max-width: 100%; margin: 0 auto; padding: 0 28px; border: 2px solid #2aa7c9; border-radius: 999px; background: #fff; color: #0a6f9c; font-weight: 800; cursor: pointer; list-style: none; }
.kc-notice > summary::-webkit-details-marker { display: none; }
.kc-guide { margin-top: 14px; padding: 14px 18px; background: #fff; border-radius: 10px; font-size: 14px; line-height: 1.8; }
.kc-guide ul { margin: 6px 0 0; padding-left: 1.2em; }
.kc-h2 { margin: 0 0 18px; padding: 0 0 10px; border-bottom: 2px solid #0a83b5; font-size: 20px; font-weight: 800; text-align: left; background: none; border-left: 0; }
.kc-list { background: #f5fafc; max-width: none; }
.kc-list > * { max-width: var(--t-w); margin-left: auto; margin-right: auto; }
.kc-cards { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; list-style: none; padding: 0; margin-bottom: 28px; }
@media (max-width: 1023px) { .kc-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 599px) { .kc-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }
.kc-card { display: flex; flex-direction: column; align-items: center; gap: 12px; height: 100%; box-sizing: border-box; padding: 18px 14px; background: #fff; border: 1px solid #c9d6dc; border-radius: 16px; text-decoration: none; color: #10222c; transition: transform .15s ease, box-shadow .15s ease; }
.kc-card:hover { transform: translateY(-3px); box-shadow: 0 8px 18px rgba(10, 60, 80, .15); border-color: #0aa0e0; }
.kc-card .lg { border: 0; }
.kc-cn { font-size: 16px; font-weight: 800; text-align: center; line-height: 1.45; }
.kc-write { max-width: 860px; }
.kc-co-box { margin: 0 0 22px; }
.kc-co-pick { margin: 0; padding: 16px; background: #f5fafc; border-radius: 12px; font-weight: 700; }
.kc-co-h { display: flex; align-items: center; gap: 18px; padding: 20px 24px; border: 1px solid #10222c; border-radius: 16px; background: #fff; }
.kc-co-h[hidden] { display: none; }
.kc-co-n { margin: 0; font-size: 20px; font-weight: 800; }
.kc-co-o, .kc-co-a { margin: 2px 0 0; font-size: 14px; color: var(--t-sub); }
.kc-form { display: flex; flex-direction: column; gap: 18px; }
.kc-h { margin: 18px 0 0; font-size: 19px; font-weight: 800; }
.kc-form .req { color: #c62828; font-size: 13px; margin-left: 2px; vertical-align: super; }
.kc-form .opt { margin-left: 8px; font-size: 13px; font-weight: 700; color: var(--t-sub); }
.kc-rate { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 18px; margin: 0; padding: 0; border: 0; }
.kc-rate legend { float: left; min-width: 15em; font-size: 15px; }
.kc-stars { display: inline-flex; flex-direction: row-reverse; }
.kc-stars input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.kc-stars label { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; font-size: 30px; color: #c9d1d5; cursor: pointer; }
.kc-stars label:hover, .kc-stars label:hover ~ label, .kc-stars input:checked ~ label { color: #f5b301; }
.kc-stars input:focus-visible + label { outline: 2px solid #0aa0e0; border-radius: 6px; }
.kc-row { display: flex; flex-direction: column; gap: 8px; }
.kc-lh { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.kc-lh label, .kc-sel label { font-size: 17px; font-weight: 800; }
.kc-tpl { min-height: 44px; padding: 0 16px; border: 0; border-radius: 4px; background: #0371a3; color: #fff; font-size: 14px; font-weight: 700; font-family: inherit; cursor: pointer; }
.kc-len { font-size: 14px; color: var(--t-sub); }
.kc-help { margin: 0; font-size: 14px; line-height: 1.8; color: #3e5a66; }
.kc-form input[type="text"], .kc-form input[type="month"], .kc-form select, .kc-form textarea { width: 100%; box-sizing: border-box; min-height: 48px; padding: 10px 12px; border: 1px solid #10222c; border-radius: 2px; font-size: 16px; font-family: inherit; background: #fff; }
.kc-form textarea { line-height: 1.8; resize: vertical; }
.kc-count { margin: 0; font-size: 14px; color: var(--t-sub); text-align: right; }
.kc-count.ng { color: #c62828; }
@media (min-width: 768px) { .kc-sel { display: grid; grid-template-columns: 17em minmax(0, 1fr); align-items: center; gap: 12px; } }
.kc-agree { display: flex; flex-direction: column; gap: 6px; align-items: center; }
.kc-agree label { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 15px; }
.kc-agree input { width: 20px; height: 20px; accent-color: #0b7a70; }
.kc-submit { align-self: center; min-width: min(320px, 100%); min-height: 56px; border: 0; border-radius: 6px; background: #b35400; color: #fff; font-size: 18px; font-weight: 800; font-family: inherit; cursor: pointer; }
.kc-form .msg { text-align: center; font-weight: 700; margin: 0; }
.kc-form .msg.ng { color: #c62828; }
.kc-form .thanks { padding: 24px; background: #e6f6f1; border-radius: 12px; text-align: center; }
.kc-body { margin-top: 32px !important; }
.kc-agree a { display: inline-flex; align-items: center; min-height: 44px; }   /* 同意の文の中のリンクも押せる高さに（10幅検査で 27.8px・P1 17件） */

/* ==== 記事の作り込み（2026-10-02 持ち主「余白を小さく・目次をしっかり・画像やグラフ・動き・しっかり改行・おすすめ記事にサムネ」）==== */
/* 余白を詰める */
.kj-top { margin-top: 12px; }
.kj-top h1 { margin-bottom: 6px; }
.kj-grid { padding: 18px; gap: 18px; }
@media (min-width: 720px) { main > article.kj-body { padding: 26px 30px 32px; } }
.kj-detail .tq-panel { padding: 14px; }
.kj-detail .tq-card { padding: 14px 16px; margin-bottom: 12px; }
.kj-detail .tq-rings { margin: 10px 0; }
.kj-detail .tq-ring b { max-width: 92px; border-width: 6px; font-size: 14px; }

/* 本文の見出し: h2 は下に青緑→青の線、h3 は左の線（faclog の型） */
.kj-body h2 { margin: 2.2em 0 .9em; padding: 0 0 10px 4px; border: 0; background: none; font-size: clamp(19px, 2.4vw, 23px); line-height: 1.5;
  background-image: linear-gradient(90deg, #2cbfaf, #0aa0e0); background-size: 100% 3px; background-repeat: no-repeat; background-position: left bottom; }
.kj-body h3 { margin: 1.8em 0 .7em; padding: 4px 0 4px 12px; border: 0; border-left: 4px solid #0aa0e0; font-size: clamp(17px, 2vw, 19px); }
.kj-body p { line-height: 2; margin: 0 0 1.15em; }
.kj-body li { line-height: 1.9; }
.kj-body table th { background: #eaf5f9; }

/* 目次: 開いたまま・番号つき・h3 は字下げ。いま読んでいる節に色（app.js） */
.kj-toc { background: #f4fafc; border: 1px solid #cfe6ee; border-radius: 12px; padding: 16px 18px 10px; margin: 0 0 24px; }
.kj-toc .toc-t { font-size: 17px; color: #0a5f82; margin: 0 0 6px; }
.kj-toc .toc-t span { font-size: 14px; font-weight: 500; color: var(--t-sub); }
.kj-toc ol { list-style: none; counter-reset: tc; margin: 0; padding: 0; }
.kj-toc > ol > li { counter-increment: tc; border-top: 1px dashed #cfe6ee; }
.kj-toc > ol > li:first-child { border-top: 0; }
.kj-toc > ol > li > a { padding-left: 34px; font-weight: 700; }
.kj-toc > ol > li > a::before { content: counter(tc); left: 0; top: 50%; width: 24px; height: 24px; margin-top: -12px; border: 0; transform: none; border-radius: 50%; background: #0a83b5; color: #fff; font-size: 13px; font-weight: 700; line-height: 24px; text-align: center; }
.kj-toc ol ol { margin: -6px 0 6px 34px; }
.kj-toc ol ol a { min-height: 44px; padding: 10px 0 10px 14px; font-size: 14px; color: #3e5a66; }
.kj-toc a.is-now { color: #0a83b5; background: #e2f3f9; border-radius: 6px; }

/* 読んだ位置の帯（app.js） */
.kj-progress { position: fixed; left: 0; top: 0; z-index: 50; height: 3px; width: 0; background: linear-gradient(90deg, #2cbfaf, #0aa0e0); transition: width .1s linear; }

/* 見出し・表・図・カードを、画面に入ったときにふわっと出す（app.js が is-in を付ける。動きを減らす設定の人には出さない） */
.kj-reveal { transform: translateY(18px); transition: transform .6s cubic-bezier(.2, .7, .2, 1); }   /* 透明にはしない（動きが無い環境・撮影でも中身が見える） */
.kj-reveal.is-in { transform: none; }
@media (prefers-reduced-motion: reduce) { .kj-reveal { opacity: 1; transform: none; transition: none; } .kg-pt, .nk-card img, .kc-card { transition: none; } }

/* 右の段: サムネ＋題名の一覧（トップの右の段と同じ型） */
.kj-side { padding: 0; background: none; }
.kj-side .ks-box { background: #fff; border-radius: 14px; padding: 14px 16px; margin: 0 0 14px; }
.ks-t { margin: 0 0 6px; text-align: center; font-size: 18px; font-weight: 800; color: #0a83b5; }
.ks-list { list-style: none; margin: 0; padding: 0; }
.ks-list li + li { border-top: 1px solid #edf2f5; }
.ks-list a { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 10px; align-items: center; min-height: 44px; padding: 10px 0; font-size: 14px; font-weight: 700; line-height: 1.55; color: var(--t-ink); text-decoration: none; }
.ks-list img { width: 104px; height: auto; aspect-ratio: 1200 / 630; object-fit: cover; border-radius: 6px; box-shadow: 0 1px 4px rgba(10, 60, 80, .15); transition: transform .2s ease; }
.ks-list a:hover img { transform: scale(1.04); }
.ks-list a:hover span { color: #0a83b5; }
.ks-kuchi p { font-size: 14px; line-height: 1.8; margin: 0 0 8px; }
@media (max-width: 1199px) { .kj-side { max-width: var(--w); } }
/* 本文の頭のアイキャッチ（題名入りのサムネと同じ絵） */
.kj-body .kj-eye { margin: 0 0 18px; }
.kj-body .kj-eye img { display: block; width: 100%; height: auto; border-radius: 12px; box-shadow: 0 4px 14px rgba(10, 60, 80, .12); }
.kg-tip p { margin: 0; line-height: 1.5; }   /* 吹き出しの1行ずつを段落に（文章の癖の関門が1つの長い段落と数えた） */

/* メーカー8社の保証年数のグラフ（棒は画面に入ると伸びる・app.js が is-in を付ける） */
.mk-chart { margin: 0 0 24px; padding: 16px 18px; background: #fff; border: 1px solid #d7e2e8; border-radius: 12px; }
.mk-t { margin: 0 0 10px; font-size: 16px; font-weight: 800; color: #0a5f82; }
.mk-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.mk-bars li { display: grid; grid-template-columns: 8em minmax(0, 1fr); grid-template-areas: "n track" "n v"; align-items: center; gap: 2px 10px; margin: 0; }
.mk-n { grid-area: n; display: flex; align-items: center; min-height: 44px; font-size: 14px; font-weight: 700; color: var(--t-ink); text-decoration: none; }
.mk-track { grid-area: track; position: relative; height: 14px; background: #edf3f6; border-radius: 7px; overflow: visible; }
.mk-bar { position: absolute; left: 0; top: 0; bottom: 0; width: var(--w); background: linear-gradient(90deg, #7fd3c9, #2aa7c9); border-radius: 7px; transform-origin: left; transition: transform .9s cubic-bezier(.2, .7, .2, 1); }
.mk-chart.is-wait .mk-bar { transform: scaleX(0); }
.mk-bar.is-forever::after { content: "→ 永年"; position: absolute; right: -4.6em; top: 50%; transform: translateY(-50%); font-size: 14px; font-weight: 700; color: #0a83b5; white-space: nowrap; }
.mk-v { grid-area: v; font-size: 14px; color: var(--t-sub); }
.mk-bars li.is-me .mk-n { color: #b35400; }
.mk-bars li.is-me .mk-bar { background: linear-gradient(90deg, #f5b56b, #b35400); }
.mk-note { margin: 10px 0 0; font-size: 14px; line-height: 1.7; color: var(--t-sub); }
@media (max-width: 479px) { .mk-bars li { grid-template-columns: 6.5em minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .mk-bar { transition: none; } .mk-chart.is-wait .mk-bar { transform: none; } }
/* 坪数ごとの相場の範囲グラフ（mk-chart の型を使い、棒の左端を公表値の下限に） */
.sb-chart .mk-bar { background: linear-gradient(90deg, #7fd3c9, #0a83b5); }
.kj-body .sb-scale, .sb-scale { display: flex; justify-content: space-between; margin: 4px 0 0 calc(8em + 10px); font-size: 14px; color: var(--t-sub); }
@media (max-width: 599px) {
  /* スマホは社名を棒の上の行に（長い社名が棒に重なった・10-03 の 390px） */
  .sb-chart .mk-bars li { grid-template-columns: minmax(0, 1fr); grid-template-areas: "n" "track" "v"; gap: 2px; }
  .sb-chart .mk-n { min-height: 0; }
  .kj-body .sb-scale, .sb-scale { margin-left: 0; }
}

/* 見積もりは複数社で取る（本文の {{multi-cta}}・提携先の公式ボタンを総合順位の順に） */
.multi-cta .mc-list { list-style: none; margin: 10px 0 6px; padding: 0; display: grid; gap: 8px; }
.multi-cta .mc-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; margin: 0; padding: 8px 10px; background: #fff; border: 1px solid #d7e2e8; border-radius: 8px; }
.multi-cta .mc-n { font-weight: 800; font-size: 15px; line-height: 1.4; }
.multi-cta .mc-n small { display: block; font-size: 14px; font-weight: 500; color: var(--t-sub); }
.multi-cta .mc-list .inline-btn { margin: 0; white-space: nowrap; }
@media (max-width: 359px) { .multi-cta .mc-list li { grid-template-columns: minmax(0, 1fr); } }

/* 詳細のカードの中身（2026-10-03 持ち主「読者目線で必要な情報を」）: 申し込む前に気になることを1行ずつ。狭い幅は問いと答えを上下に */
.tq-qa { margin: 12px 0; display: grid; gap: 0; border-top: 1px solid #e3ecf0; }
.tq-qa > div { display: grid; grid-template-columns: 11em minmax(0, 1fr); gap: 4px 14px; padding: 9px 2px; border-bottom: 1px solid #e3ecf0; }
.tq-qa dt { font-size: 14px; font-weight: 800; color: #0a5f82; }
.tq-qa dd { margin: 0; font-size: 15px; line-height: 1.75; }
@media (max-width: 599px) { .tq-qa > div { grid-template-columns: minmax(0, 1fr); gap: 2px; } }
.tq-fit { margin: 10px 0; padding: 12px 14px; background: #f4fafc; border-radius: 10px; }
.tq-fit-t { margin: 0 0 4px; font-size: 14px; font-weight: 800; color: #0b7a70; }
.tq-fit-t.is-no { margin-top: 8px; color: #b35400; }
.tq-fit ul { margin: 0; padding-left: 1.2em; font-size: 14px; line-height: 1.8; }
.tq-nofit { margin: 0; font-size: 14px; line-height: 1.8; }
.tq-ring b { font-size: 14px; }

/* ★2026-10-05 lany-3 §4: トップのシェアと引用（おすすめの下・詳細より上の1か所だけ） */
.tq-share { margin-top: 16px; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 4px 16px; }
.tq-share .share-top { margin: 0; }
.tq-share .cite-mini { margin: 22px 0 0; }
@media (max-width: 479px) { .tq-share { display: block; } .tq-share .cite-mini { margin-top: 8px; } }