@charset "utf-8";
/* =========================================================
   お役立ち記事（KB）専用スタイル 2026-09
   トークン（--washi 等）は site-nav.css の :root を利用
   ========================================================= */

.kb{
  --kb-serif: var(--serif, "Shippori Mincho", serif);
  --kb-sans: var(--sans, "Zen Kaku Gothic New", sans-serif);
  --kb-latin: var(--latin, "Cormorant Garamond", serif);
  --kb-ink: var(--ink, #2c2722);
  --kb-kin: var(--kin, #a8844a);
  --kb-muted: var(--muted, #928879);
  --kb-line: var(--line, rgba(28,23,19,.14));
  --kb-washi: var(--washi, #f1ece1);
  --kb-sumi: var(--sumi, #1a1613);
  font-family: var(--kb-sans);
  color: var(--kb-ink);
  background:#fdfcfa;
  /* 共通ヘッダーは position:fixed。他ページはヒーロー画像がその高さを吸収するが、
     記事ページにはヒーローが無いため、ここで固定ヘッダー分の余白を確保する */
  padding: 120px 0 90px;
}
.kb-wrap{ width:92%; max-width:760px; margin:0 auto; }

/* テーマの layout.min.css は裸の header / footer タグに position:fixed・白背景・
   float などを当てている（body に header_fixed が付くと発動）。記事内で
   これらのタグを使うと画面上部に固定されてしまうため、念のため打ち消す。 */
.kb header, .kb footer{
  position:static; top:auto; width:auto; float:none;
  background:none; padding:0; z-index:auto;
}

/* 記事ページは背景が明るいため、共通ヘッダーを常に濃色で表示する
   （既定は透明で、暗いヒーロー画像に白文字を重ねる設計のため） */
body.kb-page .t26hd{
  background:rgba(22,18,15,.96);
  box-shadow:0 4px 20px rgba(0,0,0,.28);
}

/* ---------- 見出し部 ---------- */
.kb-head{ padding:0; }
.kb-cat{
  display:inline-flex; align-items:center; gap:12px;
  font-size:12px; letter-spacing:.2em; color:var(--kb-kin); margin:0;
}
.kb-cat::before{ content:""; width:28px; height:1px; background:var(--kb-kin); }
.kb-title{
  font-family:var(--kb-serif); font-weight:500;
  font-size:clamp(25px,3.6vw,37px); line-height:1.5; letter-spacing:.04em;
  margin:16px 0 0; color:var(--kb-sumi);
}
.kb-meta{
  margin:18px 0 0; padding-bottom:26px; border-bottom:1px solid var(--kb-line);
  font-size:12.5px; color:var(--kb-muted); letter-spacing:.04em;
}

/* ---------- 要点 ---------- */
.kb-lead{
  margin:34px 0 0; padding:24px 26px;
  background:var(--kb-washi); border-left:3px solid var(--kb-kin);
}
.kb-lead-t{
  margin:0 0 10px; font-size:12px; letter-spacing:.16em; color:var(--kb-kin); font-weight:500;
}
.kb-lead p{ margin:0; font-size:15px; line-height:2.0; }

/* ---------- 目次 ---------- */
.kb-toc{ margin:40px 0 0; border:1px solid var(--kb-line); background:#fff; }
.kb-toc-t{
  margin:0; padding:15px 24px; border-bottom:1px solid var(--kb-line);
  font-size:12.5px; letter-spacing:.16em; color:var(--kb-kin); font-weight:500;
}
.kb-toc ol{ list-style:none; margin:0; padding:14px 24px 18px; counter-reset:toc; }
.kb-toc li{ counter-increment:toc; margin:0; }
.kb-toc a{
  display:flex; gap:14px; align-items:baseline;
  padding:8px 0; font-size:14.5px; line-height:1.7;
  color:var(--kb-ink); text-decoration:none; border-bottom:1px dotted rgba(28,23,19,.10);
}
.kb-toc li:last-child a{ border-bottom:none; }
.kb-toc a::before{
  /* 番号は欧文セリフ体だと細く読みにくいため、ゴシック体で太めに出す */
  content:counter(toc,decimal-leading-zero);
  font-family:var(--kb-sans); font-weight:700; font-size:12.5px;
  color:var(--kb-kin); flex:0 0 auto; letter-spacing:.06em; min-width:1.6em;
}
.kb-toc a:hover{ color:var(--kb-kin); }

/* ---------- 本文 ---------- */
.kb-body{ margin-top:12px; counter-reset:sec; }
.kb-body section{ padding-top:44px; }
.kb-body h2{
  counter-increment:sec; position:relative;
  font-family:var(--kb-serif); font-weight:500;
  font-size:clamp(19px,2.3vw,24px); line-height:1.6; letter-spacing:.03em;
  color:var(--kb-sumi); margin:0 0 20px; padding:0 0 14px;
  border-bottom:1px solid var(--kb-line);
}
.kb-body h2::before{
  /* 同上：番号はゴシック体で確実に読めるようにする */
  content:counter(sec,decimal-leading-zero);
  display:block; font-family:var(--kb-sans); font-size:12.5px; font-weight:700;
  letter-spacing:.12em; color:var(--kb-kin); margin-bottom:8px;
}
.kb-body p{ margin:0 0 18px; font-size:15.5px; line-height:2.05; }
.kb-body p:last-child{ margin-bottom:0; }
.kb-body strong{ font-weight:700; color:var(--kb-sumi); }
.kb-body a{ color:var(--kb-kin); text-decoration:underline; text-underline-offset:3px; }
.kb-body a:hover{ opacity:.75; }

/* 定義表（データ側の table を読みやすい定義リスト風に見せる） */
.kb-body table{
  width:100%; border-collapse:collapse; margin:0 0 20px;
  border-top:1px solid var(--kb-line);
}
.kb-body tr{ border-bottom:1px solid var(--kb-line); }
.kb-body td{ padding:14px 4px; font-size:15px; line-height:1.95; vertical-align:top; }
.kb-body td.noWrap{
  width:30%; white-space:normal; padding-right:18px;
  font-weight:700; color:var(--kb-sumi);
}
.kb-body ul{ margin:0 0 18px; padding-left:1.3em; font-size:15.5px; line-height:2.0; }
.kb-body ul li{ margin-bottom:6px; }

/* 手順は番号付きリストで（AIにも読者にも順序が伝わるように） */
.kb-body ol{ counter-reset:step; list-style:none; margin:4px 0 22px; padding:0; }
.kb-body ol li{
  counter-increment:step; position:relative;
  padding:0 0 0 44px; margin-bottom:16px; font-size:15.5px; line-height:2.0;
}
.kb-body ol li::before{
  content:counter(step);
  position:absolute; left:0; top:5px; width:27px; height:27px;
  background:var(--kb-kin); color:#fff; border-radius:50%;
  font-family:var(--kb-sans); font-weight:700; font-size:12.5px;
  display:flex; align-items:center; justify-content:center;
}
.kb-body ol li b{ color:var(--kb-sumi); }

/* 結論を見出し直下に置くための強調段落 */
.kb-body p.kb-ans{
  margin:0 0 18px; padding:0 0 0 14px; border-left:3px solid var(--kb-kin);
  font-size:16px; line-height:1.95; font-weight:700; color:var(--kb-sumi);
}

/* 専門用語のかみ砕き・補足 */
.kb-body .kb-note{
  margin:0 0 18px; padding:15px 18px; background:#f6f4f0;
  font-size:14px; line-height:1.95; color:#5c554d;
}
.kb-body .kb-note b{ color:var(--kb-kin); }

/* 写真（施工前後など） */
.kb-fig{ margin:26px 0 22px; }
.kb-fig-top{ margin:34px 0 0; }
.kb-fig img{ display:block; width:100%; height:auto; box-shadow:0 10px 28px rgba(28,23,19,.12); }
.kb-fig figcaption{ margin-top:12px; font-size:13px; line-height:1.85; color:var(--kb-muted); }
.kb-fig figcaption a{ color:var(--kb-kin); white-space:nowrap; margin-left:4px; }
/* 縦長の写真は大きくなりすぎないよう高さで抑えて中央に */
.kb-fig img.is-tall{ width:auto; max-width:100%; max-height:620px; margin:0 auto; }
/* 施工前・施工後などの2枚並び */
.kb-pair{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.kb-pair img{ aspect-ratio:4/3; object-fit:cover; height:auto; }

/* 本文中の相談の囲み（旧ページのインライン囲みを置き換え） */
.kb-body .kb-callout{
  margin:24px 0 0; padding:22px 24px; background:var(--kb-washi);
  border:1px solid rgba(168,132,74,.35); border-left:3px solid var(--kb-kin);
}
.kb-body .kb-callout p{ font-size:14.5px; line-height:1.95; margin:0 0 10px; }
.kb-body .kb-callout p:last-child{ margin-bottom:0; }
.kb-body .kb-callout .kb-callout-t{ font-weight:700; color:var(--kb-sumi); font-size:15px; }
.kb-body p.kb-src{ font-size:13px; color:var(--kb-muted); line-height:1.9; }

/* 更新日（記事の鮮度を読者にも AI にも示す） */
.kb-date{ display:inline-block; margin-left:14px; }

/* ---------- よくある質問（構造化データ FAQPage と同じ内容を表示） ---------- */
.kb-faq-item{ padding:18px 0 20px; border-bottom:1px solid var(--kb-line); }
.kb-faq-item:first-of-type{ padding-top:4px; }
.kb-faq-item h3{
  position:relative; margin:0 0 10px; padding-left:34px;
  font-family:var(--kb-sans); font-size:16px; line-height:1.8; font-weight:700; color:var(--kb-sumi);
}
.kb-faq-item h3::before{
  content:"Q"; position:absolute; left:0; top:2px; width:24px; height:24px;
  background:var(--kb-kin); color:#fff; border-radius:50%;
  font-family:var(--kb-sans); font-size:12.5px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
}
.kb-body .kb-faq-item p{ margin:0; padding-left:34px; font-size:15px; line-height:2.0; }

/* ---------- CTA ---------- */
.kb-cta{ margin:64px 0 0; background:var(--kb-sumi); color:#efe9df; padding:38px 34px; }
.kb-cta h2{
  font-family:var(--kb-serif); font-weight:400; font-size:20px; line-height:1.6;
  letter-spacing:.04em; color:#fff; margin:0 0 12px;
}
.kb-cta p{ margin:0 0 22px; font-size:14.5px; line-height:2.0; color:#cfc6b8; }
.kb-cta-act{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; }
.kb-btn{
  display:inline-flex; align-items:center; gap:10px;
  background:var(--kb-kin); color:#fff; text-decoration:none;
  padding:15px 30px; font-size:14.5px; letter-spacing:.06em; transition:.25s;
}
.kb-btn:hover{ background:#b9955a; }
.kb-tel{ color:#fff; text-decoration:none; font-size:19px; letter-spacing:.04em; display:inline-flex; align-items:baseline; gap:9px; }
.kb-tel b{ font-family:var(--kb-latin); font-size:11.5px; letter-spacing:.18em; color:var(--kb-kin); font-weight:600; }

/* ---------- 関連記事 ---------- */
.kb-rel{ margin:64px 0 0; }
.kb-rel-t{
  font-family:var(--kb-serif); font-weight:500; font-size:19px; letter-spacing:.05em;
  color:var(--kb-sumi); margin:0 0 20px; padding-bottom:12px; border-bottom:1px solid var(--kb-line);
}
.kb-rel-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
.kb-rel-grid a{
  display:block; background:#fff; border:1px solid var(--kb-line);
  padding:18px 20px; text-decoration:none; transition:.25s;
}
.kb-rel-grid a:hover{ border-color:var(--kb-kin); transform:translateY(-2px); }
.kb-rel-grid b{
  display:block; font-family:var(--kb-serif); font-weight:500;
  font-size:15.5px; line-height:1.6; color:var(--kb-sumi); margin-bottom:6px;
}
.kb-rel-grid span{ display:block; font-size:12.5px; line-height:1.8; color:var(--kb-muted); }
.kb-rel-all{ margin:22px 0 0; text-align:center; }
.kb-rel-all a{ font-size:14px; color:var(--kb-kin); text-decoration:none; letter-spacing:.04em; }
.kb-rel-all a:hover{ text-decoration:underline; }

/* ---------- 一覧（ハブ）ページ ---------- */
.kb-index{ margin-top:16px; }
.kb-index section{ padding-top:44px; }
.kb-index h2{
  font-family:var(--kb-serif); font-weight:500; font-size:20px; letter-spacing:.05em;
  color:var(--kb-sumi); margin:0 0 4px; padding-bottom:12px; border-bottom:1px solid var(--kb-line);
}
.kb-index ul{ list-style:none; margin:0; padding:0; }
.kb-index li{ border-bottom:1px solid var(--kb-line); }
.kb-index li a{
  display:block; padding:17px 4px; text-decoration:none; transition:.2s;
}
.kb-index li a:hover{ background:#faf7f1; padding-left:10px; }
.kb-index li b{
  display:block; font-size:15.5px; font-weight:500; color:var(--kb-sumi); margin-bottom:4px;
}
.kb-index li span{ display:block; font-size:13px; line-height:1.8; color:var(--kb-muted); }

/* ---------- スマホ ---------- */
@media(max-width:680px){
  .kb{ padding-top:92px; }
  .kb-lead{ padding:20px; }
  .kb-lead p{ font-size:14.5px; line-height:1.95; }
  .kb-toc ol{ padding:10px 18px 14px; }
  .kb-toc-t{ padding:13px 18px; }
  .kb-body section{ padding-top:36px; }
  .kb-body p, .kb-body ul{ font-size:15px; line-height:1.95; }
  .kb-body table, .kb-body td{ display:block; width:100%; }
  .kb-body td{ padding:0; }
  .kb-body td.noWrap{ width:100%; padding:14px 0 4px; }
  .kb-body tr{ padding-bottom:12px; }
  .kb-body td:last-child{ padding-bottom:14px; }
  .kb-cta{ padding:30px 22px; }
  .kb-cta-act{ flex-direction:column; align-items:stretch; }
  .kb-btn{ justify-content:center; }
  .kb-tel{ justify-content:center; }
  .kb-rel-grid{ grid-template-columns:1fr; }
  .kb-date{ display:block; margin:4px 0 0; }
  .kb-faq-item h3{ font-size:15.5px; }
  .kb-body .kb-faq-item p{ padding-left:0; font-size:14.5px; }
}