/* 掲載をご希望の塗装会社さまへ（/keisai/）— 2026-10-19 持ち主「ファクログの掲載ページ（faclog.jp/contact）と同じようなデザインで」
 * 並び（見本どおり）: 専用ヘッダー → ヒーロー → 課題3つ → 料金の一言 → 選ばれる理由 → 記事のある検索語 → 強み → 検索語の図 → いまの数字 → 流れ → よくある質問 → フォーム
 * このページだけで読む（build の keisaiPage が <link> する）。サイト共通の h2 の帯・左線はここで打ち消す
 * 色: 白い文字を載せる面は 4.5:1 以上の濃い青緑（--kz-teal-d）。淡い面は飾りで、上に文字を載せない */
.kz, .kz-head {
  --kz-teal: #20a9ba; --kz-teal-d: #0b7a87; --kz-teal-m: #5bb8c4; --kz-teal-l: #bfe7ed; --kz-teal-p: #e6f5f7;
  --kz-orange: #ffa215; --kz-orange-d: #d97f00; --kz-ink: #252525; --kz-grey: #f6f7f8;
}
.kz { background: #fff; color: var(--kz-ink); padding: 0; overflow-x: clip; }
.kz h1, .kz h2, .kz h3 { border: 0; background: none; padding: 0; margin: 0; color: var(--kz-ink); letter-spacing: .06em; }
.kz p { margin: 0; }
.kz img { display: block; height: auto; }
.kz-in { max-width: 1040px; margin: 0 auto; padding: 0 16px; }
.kz-sec { padding: 64px 0; }
.kz-h { text-align: center; font-size: clamp(22px, 5.4vw, 30px); font-weight: 700; line-height: 1.5; margin-bottom: 40px; }
.kz-h::after { content: ""; display: block; width: 32px; height: 3px; background: var(--kz-teal); margin: 12px auto 0; border-radius: 2px; }
.kz .tq { display: inline-block; }   /* 句ごとに包む（見出しを句の途中で折らない） */
.kz-note { font-size: 14px; line-height: 1.7; color: #555; }   /* 13.5px 未満は小さい（design-audit・10-19） */

/* ---- ボタン（見本の「下に濃い縁」） ---- */
.kz-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; font-weight: 700;
  border-radius: 6px; padding: 10px 18px; min-height: 44px; letter-spacing: .06em; border: 0; cursor: pointer; font-family: inherit; }
.kz-btn svg { width: 20px; height: 20px; flex: none; }
.kz-btn-o { background: var(--kz-orange); color: var(--kz-ink); box-shadow: 0 4px 0 var(--kz-orange-d); }
.kz-btn-t { background: var(--kz-teal-d); color: #fff; box-shadow: 0 4px 0 #075e68; }
.kz-btn:hover { filter: brightness(1.05); }
.kz-btn:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--kz-orange-d); }
.kz-btn-big { font-size: clamp(16px, 4.4vw, 20px); padding: 16px 28px; width: 100%; max-width: 400px; border-radius: 6px; }

/* ---- 専用ヘッダー（ロゴ＋ボタン2つ・上に貼り付く） ---- */
.kz-head { position: sticky; top: 0; z-index: 20; background: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, .08); }
.kz-head .kz-in { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; }
.kz-head .kz-in > a { display: flex; align-items: center; min-height: 44px; }   /* ロゴの画像は28〜34pxなので、押せる高さはリンクで持つ */
.kz-head .sn-logo { height: 34px; width: auto; }
.kz-head nav { display: flex; gap: 10px; }
.kz-head .kz-btn { font-size: 14px; padding: 8px 14px; }
@media (max-width: 599px) {
  .kz-head .kz-in { min-height: 56px; }
  .kz-head .sn-logo { height: 28px; }
  .kz-head .kz-btn-t { display: none; }   /* 狭い幅では問い合わせだけ残す（流れはページの中で読める） */
  .kz-head .kz-btn { padding: 8px 12px; font-size: 13px; }
}

/* ---- ヒーロー ---- */
.kz-hero { position: relative; background: linear-gradient(115deg, #fff 0 46%, var(--kz-teal-p) 46% 72%, #d3eef2 72%); padding: 40px 0 48px; }
.kz-hero .kz-in { display: grid; gap: 28px; align-items: center; }
.kz-hero-lead { font-size: clamp(18px, 4.8vw, 24px); font-weight: 700; line-height: 1.6; letter-spacing: .06em; }
.kz-hero-logo { width: min(400px, 88%); margin: 14px 0 18px; }
.kz-badges { display: flex; gap: 10px; margin-bottom: 26px; }
.kz-badge { flex: 1 1 0; max-width: 136px; text-align: center; }
.kz-badge .t { display: block; font-size: 12px; font-weight: 700; letter-spacing: .02em; color: #6b5512; line-height: 1.4; white-space: nowrap; margin-bottom: 2px; }
.kz-badge .v { position: relative; display: block; font-size: clamp(26px, 7vw, 34px); font-weight: 700; line-height: 1.2; padding: 8px 0 12px; color: #7a5f12; }
.kz-badge .v svg.kz-laurel { position: absolute; inset: 0; width: 100%; height: 100%; }
.kz-badge .v small { font-size: 12px; margin-left: 1px; }
.kz-hero-cta p.kz-note { margin-top: 12px; }
.kz-hero-img img { width: 100%; max-width: 560px; margin: 0 auto; }
@media (min-width: 900px) {
  .kz-hero { padding: 48px 0 56px; }
  .kz-hero .kz-in { grid-template-columns: 1fr 1.05fr; }
}

/* ---- 課題3つ（濃い青緑の面＋下にとがった形） ---- */
.kz-pain { background: #148f9d; color: #fff; padding: 56px 0 120px; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 64px), 50% 100%, 0 calc(100% - 64px)); }
.kz-pain .kz-h { color: #fff; margin-bottom: 32px; }
.kz-pain .kz-h::after { display: none; }
.kz-cards3 { display: grid; gap: 18px; }
.kz-pcard { background: #fff; color: var(--kz-ink); border-radius: 4px; padding: 20px 18px 26px; text-align: center; }
.kz-pcard img { width: 100%; max-width: 280px; margin: 0 auto 10px; aspect-ratio: 4 / 3; object-fit: contain; }
.kz-pcard p { font-weight: 700; font-size: 15px; line-height: 1.7; }
@media (min-width: 768px) { .kz-cards3 { grid-template-columns: repeat(3, 1fr); } }

/* ---- 料金の一言 ---- */
.kz-offer { text-align: center; padding: 8px 0 56px; }
.kz-offer p.s { font-size: clamp(14px, 3.8vw, 18px); font-weight: 700; margin-bottom: 10px; }
.kz-offer p.b { font-size: clamp(24px, 6.6vw, 40px); font-weight: 700; line-height: 1.5; letter-spacing: .04em; }
.kz-offer em, .kz-mark { font-style: normal; background: linear-gradient(transparent 82%, var(--kz-orange) 82%); }
.kz-offer small { font-size: .6em; }

/* ---- 選ばれる理由（上に番号の帯） ---- */
.kz-why { background: var(--kz-grey); }
.kz-rcard { background: #fff; border-radius: 4px; overflow: hidden; box-shadow: 0 2px 8px rgba(0, 0, 0, .06); text-align: center; padding-bottom: 24px; }
.kz-rcard .n { background: var(--kz-teal-d); color: #fff; font-size: 26px; font-weight: 700; line-height: 1; padding: 12px 0; letter-spacing: .04em; }
.kz-rcard img { width: 66%; max-width: 220px; margin: 18px auto 8px; aspect-ratio: 1; object-fit: contain; }
.kz-rcard h3 { color: var(--kz-teal-d); font-size: 18px; line-height: 1.5; margin: 0 14px 10px; }
.kz-rcard p { font-size: 14px; line-height: 1.8; margin: 0 18px; }

/* ---- 記事のある検索語 ---- */
.kz-kw { display: grid; gap: 14px; max-width: 640px; margin: 0 auto; }
.kz-kw ul { list-style: none; margin: 0; padding: 14px 20px; border: 1px solid var(--kz-teal); border-radius: 4px; background: #f7fcfd; }
.kz-kw li { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; line-height: 2; }
.kz-kw li b { font-weight: 500; color: #555; white-space: nowrap; }
.kz-kw-note { text-align: center; margin-top: 18px; }
@media (min-width: 768px) { .kz-kw { grid-template-columns: 1fr 1fr; } }

/* ---- 強み（丸い絵） ---- */
.kz-strong { background: var(--kz-teal-p); }
.kz-scard { text-align: center; }
.kz-scard .c { width: min(230px, 66vw); aspect-ratio: 1; border-radius: 50%; background: #fff; margin: 0 auto 18px; display: grid; place-items: center; overflow: hidden; }
.kz-scard .c img { width: 82%; }
.kz-scard h3 { color: var(--kz-teal-d); font-size: 18px; line-height: 1.5; margin-bottom: 10px; }
.kz-scard p { font-size: 14px; line-height: 1.8; }

/* ---- 検索語の図（ビッグ／ミドル／スモール） ---- */
.kz-tail { display: grid; grid-template-columns: 34px 1fr; gap: 8px 10px; max-width: 800px; margin: 0 auto; }
.kz-tail-y { grid-row: 1 / 3; display: flex; flex-direction: column; align-items: center; justify-content: space-between; background: linear-gradient(#cfe3e7, #dbe8eb);
  clip-path: polygon(50% 0, 100% 18px, 100% calc(100% - 18px), 50% 100%, 0 calc(100% - 18px), 0 18px); padding: 22px 0; font-size: 13px; font-weight: 700; color: #33535a; }
.kz-tail-y span.m { writing-mode: vertical-rl; background: #fff; padding: 6px 2px; font-size: 12px; letter-spacing: .1em; }
.kz-tail-y span.e { writing-mode: vertical-rl; }
.kz-tail-g { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: auto 1fr; min-height: 300px; }
.kz-tail-g .hd { text-align: center; font-weight: 700; font-size: clamp(13px, 3.4vw, 20px); padding: 10px 4px; letter-spacing: .06em; }
.kz-tail-g .hd:nth-child(1) { background: var(--kz-teal-l); }
.kz-tail-g .hd:nth-child(2) { background: var(--kz-teal-m); color: #fff; background: #4fa9b4; }
.kz-tail-g .hd:nth-child(3) { background: var(--kz-teal-d); color: #fff; }
.kz-tail-g .col { position: relative; z-index: 1; padding: 16px 6px 0; font-size: clamp(11.5px, 3vw, 14px); line-height: 1.9; text-align: center; border-right: 1px dashed #b9c9cc; }
.kz-tail-g .col:last-of-type { border-right: 0; }
.kz-tail-g svg { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: calc(100% - 46px); z-index: 0; }
.kz-tail-band { position: absolute; z-index: 2; left: 33.4%; right: 0; bottom: 26%; background: rgba(255, 162, 21, .92); color: var(--kz-ink); text-align: center; font-weight: 700; font-size: clamp(12px, 3.2vw, 15px); padding: 6px 0; letter-spacing: .1em; }
.kz-tail-x { grid-column: 2; display: flex; justify-content: space-between; align-items: center; gap: 8px; background: linear-gradient(90deg, #e2ecee, #c4dde1);
  clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 14px 100%, 0 50%); padding: 10px 24px; font-size: 13px; font-weight: 700; color: #33535a; }
.kz-tail-x span.m { background: #fff; padding: 2px 10px; font-size: 12px; }
.kz-arrow { width: 140px; height: 48px; margin: 36px auto 14px; background: linear-gradient(#bfe7ed, var(--kz-teal)); clip-path: polygon(0 0, 100% 0, 50% 100%); }
.kz-concl { text-align: center; font-size: clamp(18px, 5vw, 28px); font-weight: 700; line-height: 1.6; letter-spacing: .04em; }

/* ---- いまの数字（ノートPCと丸い吹き出し） ---- */
.kz-now { background: var(--kz-grey); }
.kz-now-stage { display: grid; gap: 22px; justify-items: center; }
.kz-pc { width: min(420px, 90%); }
.kz-pc .scr { border: 10px solid #1f2a30; border-radius: 12px 12px 0 0; background: #fff; aspect-ratio: 16 / 10; display: grid; place-items: center; }
.kz-pc .scr img { width: 62%; }
.kz-pc .base { height: 12px; background: linear-gradient(#cfd5d8, #9aa3a7); border-radius: 0 0 14px 14px; margin: 0 -6%; }
.kz-bubbles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 100%; max-width: 640px; }
.kz-bub { aspect-ratio: 1; border-radius: 50%; background: var(--kz-teal-d); color: #fff; display: grid; place-content: center; text-align: center; font-weight: 700; font-size: clamp(12px, 3.2vw, 17px); line-height: 1.45; padding: 8px; }
.kz-bub b { display: block; font-size: clamp(24px, 7vw, 40px); line-height: 1.15; }
.kz-bub b small { font-size: .45em; }
.kz-now-img { width: min(360px, 80%); }
.kz-now-cap { text-align: center; color: var(--kz-teal-d); font-weight: 700; font-size: clamp(17px, 4.6vw, 24px); line-height: 1.6; }
@media (min-width: 900px) {
  .kz-now-stage { grid-template-columns: 1fr 1.2fr 1fr; grid-template-areas: "b1 pc b2" "img cap b3"; align-items: center; }
  .kz-bubbles { display: contents; }
  .kz-bub { width: 200px; }
  .kz-bub:nth-child(1) { grid-area: b1; } .kz-bub:nth-child(2) { grid-area: b2; } .kz-bub:nth-child(3) { grid-area: b3; }
  .kz-pc { grid-area: pc; } .kz-now-img { grid-area: img; } .kz-now-cap { grid-area: cap; }
}

/* ---- 掲載の流れ（右向きの矢羽根） ---- */
.kz-flow { display: grid; gap: 0; }
.kz-step { position: relative; text-align: center; }
.kz-step .bar { padding: 20px 12px 64px; }
.kz-step .bar span { display: block; font-size: 15px; font-weight: 700; letter-spacing: .06em; }
.kz-step .bar strong { display: block; font-size: clamp(17px, 4.6vw, 22px); line-height: 1.45; margin-top: 4px; }
.kz-step:nth-child(1) .bar { background: #dcedf0; } .kz-step:nth-child(1) .bar span { color: var(--kz-teal-d); }
.kz-step:nth-child(2) .bar { background: #b6dfe5; } .kz-step:nth-child(2) .bar span { color: #075e68; }
.kz-step:nth-child(3) .bar { background: #0f8c9a; color: #fff; }
.kz-step:nth-child(4) .bar { background: var(--kz-teal-d); color: #fff; }
.kz-step img { width: 190px; max-width: 70%; margin: -54px auto 0; aspect-ratio: 4 / 3; object-fit: contain; position: relative; }
.kz-step p.d { font-size: 13.5px; line-height: 1.7; margin: 8px 12px 24px; }
@media (min-width: 900px) {
  .kz-flow { grid-template-columns: repeat(4, 1fr); }
  .kz-step .bar { clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 50%, calc(100% - 26px) 100%, 0 100%, 26px 50%); margin-right: -26px; padding: 22px 30px 70px 40px; }
  .kz-step:first-child .bar { clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 50%, calc(100% - 26px) 100%, 0 100%); padding-left: 16px; }
  .kz-step:last-child .bar { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 26px 50%); margin-right: 0; }
  .kz-step:nth-child(1) { z-index: 4; } .kz-step:nth-child(2) { z-index: 3; } .kz-step:nth-child(3) { z-index: 2; }
}
@media (max-width: 899px) {
  .kz-step .bar { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 18px), 50% 100%, 0 calc(100% - 18px)); }
}

/* ---- よくある質問 ---- */
.kz-faq { background: var(--kz-teal-d); }
.kz-faq .kz-h { color: #fff; }
.kz-faq .kz-h::after { background: #fff; }
.kz-qa { max-width: 860px; margin: 0 auto; display: grid; gap: 22px; }
.kz-qa div { background: #fff; padding: 18px 20px; }
.kz-qa p { display: grid; grid-template-columns: 30px 1fr; gap: 8px; font-size: 14.5px; line-height: 1.8; }
.kz-qa p + p { margin-top: 10px; }
.kz-qa p::before { font-size: 26px; font-weight: 700; line-height: 1.1; color: var(--kz-teal-d); }
.kz-qa p.q::before { content: "Q"; } .kz-qa p.a::before { content: "A"; }
.kz-qa p.q { font-weight: 700; }

/* ---- フォーム ---- */
.kz-form { max-width: 780px; margin: 0 auto; display: grid; gap: 16px 40px; }
.kz-form .f label, .kz-form .f .lb { display: block; font-size: 13px; font-weight: 700; margin-bottom: 4px; }
.kz-form .f .req { color: var(--coral, #be463e); margin-left: 2px; }
.kz-form input[type=text], .kz-form input[type=tel], .kz-form input[type=email], .kz-form select, .kz-form textarea {
  width: 100%; box-sizing: border-box; font: inherit; font-size: 16px; padding: 9px 12px; border: 1px solid var(--line-ui, #788b94); border-radius: 4px; background: #f5f8fa; }
.kz-form textarea { min-height: 120px; resize: vertical; }
.kz-form fieldset { border: 0; margin: 0; padding: 0; }
.kz-form fieldset label { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 400; min-height: 32px; }
.kz-form .wide { grid-column: 1 / -1; }
.kz-form .agree label { display: flex; gap: 8px; align-items: flex-start; font-weight: 400; font-size: 14px; }
.kz-form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.kz-form .send { justify-self: start; background: #c95a3f; color: #fff; box-shadow: 0 4px 0 #9c4430; padding: 12px 40px; }
.kz-form .msg { min-height: 1.6em; font-weight: 700; color: var(--kz-teal-d); }
.kz-form .msg.ng { color: #b0322a; }
@media (min-width: 768px) { .kz-form { grid-template-columns: 1fr 1fr; } }