/* =========================================================
   Kabepika theme — main.css
   ========================================================= */
:root {
	--y: #45C4F2;
	--y2: #8ADBF7;
	--y3: #E4F6FD;
	--k: #111111;
	--w: #ffffff;
	--r: #E8382F;
	--g: #F3F1EA;
	--gray: #666;
	--ff: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
	--fr: "M PLUS Rounded 1c", var(--ff);
	--w-max: 1120px;
	--head-h: 84px;
	--ease: cubic-bezier(.22, 1, .36, 1);
	--bounce: cubic-bezier(.34, 1.56, .64, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--ff); color: var(--k); background: var(--w); line-height: 1.8; font-size: 16px; overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p, dl, dd, figure { margin: 0; }
svg { display: block; }
.kpk-container { width: min(100% - 40px, var(--w-max)); margin-inline: auto; }
.kpk-center { text-align: center; }
.kpk-note { font-size: 13px; color: var(--gray); text-align: center; margin-top: 16px; }
.kpk-sec { padding: clamp(60px, 9vw, 110px) 0; position: relative; }
.kpk-sec--white { background: var(--w); }
.kpk-sec--yellow { background: var(--y); }
.kpk-sec--gray { background: var(--g); }
.kpk-sec--yellow::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(0,0,0,.06) 1.5px, transparent 1.6px); background-size: 18px 18px; pointer-events: none; }
.kpk-sec > * { position: relative; }

/* ---------- 見出し ---------- */
.kpk-heading { text-align: center; margin-bottom: clamp(32px, 5vw, 56px); }
.kpk-heading__en { display: inline-block; font-family: var(--fr); font-weight: 900; font-size: 13px; letter-spacing: .25em; background: var(--k); color: var(--y); padding: 2px 14px; border-radius: 999px; margin-bottom: 10px; }
.kpk-heading__ja { font-size: clamp(26px, 4.2vw, 40px); font-weight: 900; line-height: 1.3; letter-spacing: .04em; display: inline-block; position: relative; padding: 0 .3em; }
.kpk-heading__ja::after { content: ""; display: block; height: 10px; margin: 8px auto 0; width: 70%; background: repeating-linear-gradient(90deg, var(--k) 0 10px, transparent 10px 16px); border-radius: 4px; }
.kpk-sec--white .kpk-heading__en { background: var(--y); color: var(--k); }

/* ---------- ボタン ---------- */
.kpk-btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; background: var(--k); color: var(--w); font-weight: 800; font-size: 17px; padding: 16px 34px 16px 40px; border-radius: 999px; border: 3px solid var(--k); box-shadow: 0 6px 0 rgba(0,0,0,.25); transition: transform .2s var(--ease), box-shadow .2s, background .2s, color .2s; white-space: nowrap; }
.kpk-btn:hover { transform: translateY(-3px); box-shadow: 0 10px 0 rgba(0,0,0,.25); }
.kpk-btn:active { transform: translateY(2px); box-shadow: 0 2px 0 rgba(0,0,0,.25); }
.kpk-btn__arrow { width: 26px; height: 26px; border-radius: 50%; background: var(--y); position: relative; flex: none; }
.kpk-btn__arrow::after { content: ""; position: absolute; width: 8px; height: 8px; border-right: 3px solid var(--k); border-bottom: 3px solid var(--k); top: 8px; left: 7px; transform: rotate(-45deg); }
.kpk-btn--white { background: var(--w); color: var(--k); }
.kpk-btn--white .kpk-btn__arrow { background: var(--k); }
.kpk-btn--white .kpk-btn__arrow::after { border-color: var(--y); }
.kpk-btn--red { background: var(--r); border-color: var(--r); }
.kpk-btn--black { background: var(--k); }
.kpk-btn--sm { font-size: 14px; padding: 10px 20px; box-shadow: 0 3px 0 rgba(0,0,0,.25); }
.kpk-btn--lg { font-size: 20px; padding: 20px 44px; }
.kpk-btn-row { display: flex; flex-wrap: wrap; gap: 14px 24px; justify-content: center; }
.kpk-tag { display: inline-block; background: var(--k); color: var(--y); font-weight: 900; padding: 2px 14px; border-radius: 6px; margin: 0 .2em; transform: rotate(-2deg); }

/* ---------- スクロール表示 ---------- */
[data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
[data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1; transform: none; transition: none; } }

/* ---------- プレースホルダー ---------- */
.kpk-ph { aspect-ratio: 4/3; width: 100%; background: linear-gradient(135deg, #d9d9d9, #bdbdbd); display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 900; font-family: var(--fr); letter-spacing: .1em; font-size: 20px; }
.kpk-ph--dirty { background: linear-gradient(135deg, #6b6b60, #4a4a44); }
.kpk-ph--clean { background: linear-gradient(135deg, #fff, #e9f3ff); color: #9ab; }
.kpk-ph--building { background: linear-gradient(180deg, #8fb3e8 0%, #c9dcf5 55%, #555 55%, #333 100%); aspect-ratio: 3/2; }

/* =========================================================
   Header
   ========================================================= */
.kpk-header { position: sticky; top: 0; z-index: 100; background: var(--w); border-bottom: 3px solid var(--k); transition: box-shadow .3s; }
.kpk-header.is-scrolled { box-shadow: 0 4px 20px rgba(0,0,0,.1); }
.kpk-header__inner { width: min(100% - 32px, 1280px); margin-inline: auto; height: var(--head-h); display: flex; align-items: center; gap: 24px; }
.kpk-logo { display: flex; align-items: center; gap: 10px; flex: none; }
.kpk-logo img { max-height: 56px; width: auto; }
.kpk-logo__mark { width: 44px; height: 44px; }
.kpk-logo__text { display: flex; flex-direction: column; line-height: 1.1; }
.kpk-logo__text small { font-size: 11px; font-weight: 700; letter-spacing: .1em; }
.kpk-logo__text b { font-family: var(--fr); font-size: 26px; font-weight: 900; letter-spacing: .04em; background: var(--y); padding: 0 8px; margin-top: 2px; }
.kpk-logo--white .kpk-logo__text small { color: var(--w); }
.kpk-gnav { margin-left: auto; }
.kpk-gnav__list { display: flex; gap: 4px; }
.kpk-gnav__list a { display: block; padding: 8px 12px; font-size: 14px; font-weight: 700; border-radius: 6px; transition: background .2s; }
.kpk-gnav__list a:hover { background: var(--y); }
.kpk-gnav__sp { display: none; }
.kpk-header__cta { display: flex; align-items: center; gap: 10px; flex: none; }
.kpk-tel { display: flex; flex-direction: column; line-height: 1.2; text-align: center; }
.kpk-tel small { font-size: 10px; font-weight: 700; }
.kpk-tel b { font-family: var(--fr); font-size: 24px; font-weight: 900; letter-spacing: .02em; }
.kpk-tel b::before { content: "☎"; font-size: 18px; margin-right: 4px; }
.kpk-burger { display: none; width: 48px; height: 48px; border: 3px solid var(--k); background: var(--y); border-radius: 10px; margin-left: auto; cursor: pointer; padding: 0; position: relative; z-index: 110; }
.kpk-burger span { display: block; width: 24px; height: 3px; background: var(--k); margin: 4px auto; border-radius: 2px; transition: transform .3s, opacity .3s; }
.kpk-nav-open .kpk-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.kpk-nav-open .kpk-burger span:nth-child(2) { opacity: 0; }
.kpk-nav-open .kpk-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1100px) {
	.kpk-header__cta { display: none; }
	.kpk-burger { display: block; }
	.kpk-gnav { position: fixed; inset: 0; background: var(--y); z-index: 105; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 28px; margin: 0; opacity: 0; visibility: hidden; transform: translateY(-12px); transition: opacity .3s, transform .3s, visibility .3s; }
	.kpk-nav-open .kpk-gnav { opacity: 1; visibility: visible; transform: none; }
	.kpk-nav-open { overflow: hidden; }
	.kpk-gnav__list { flex-direction: column; text-align: center; gap: 2px; }
	.kpk-gnav__list a { font-size: 18px; padding: 10px 24px; }
	.kpk-gnav__sp { display: flex; flex-direction: column; align-items: center; gap: 14px; }
}
@media (max-width: 767px) { :root { --head-h: 64px; } .kpk-logo__text b { font-size: 20px; } .kpk-logo__mark { width: 36px; height: 36px; } }

/* =========================================================
   FV（ファーストビュー）
   ========================================================= */
.kpk-fv { position: relative; min-height: min(calc(100svh - var(--head-h)), 860px); display: flex; flex-direction: column; justify-content: center; overflow: hidden; background: var(--y); isolation: isolate; }
.kpk-fv__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }

/* 壁：汚れ → ピカピカ */
.kpk-fv__wall { position: absolute; inset: 0; }
.kpk-fv__wall-dirty, .kpk-fv__wall-clean { position: absolute; inset: 0; }
.kpk-fv__wall-dirty {
	background:
		radial-gradient(ellipse 30% 40% at 15% 70%, rgba(40,35,25,.55), transparent 70%),
		radial-gradient(ellipse 25% 35% at 60% 85%, rgba(30,40,20,.5), transparent 70%),
		radial-gradient(ellipse 40% 30% at 85% 20%, rgba(50,45,35,.45), transparent 70%),
		radial-gradient(ellipse 20% 50% at 40% 30%, rgba(60,55,40,.4), transparent 70%),
		repeating-linear-gradient(90deg, rgba(0,0,0,.08) 0 2px, transparent 2px 60px),
		linear-gradient(180deg, #a8a08a, #7d775f);
}
.kpk-fv__wall-clean {
	background:
		repeating-linear-gradient(90deg, rgba(0,0,0,.05) 0 2px, transparent 2px 60px),
		repeating-linear-gradient(0deg, rgba(0,0,0,.04) 0 2px, transparent 2px 90px),
		linear-gradient(180deg, #9FE4FB 0%, var(--y) 100%);
	clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
}
/* スポンジ */
.kpk-fv__sponge { position: absolute; top: 0; left: 0; width: 200px; height: 140px; margin-left: -100px; margin-top: -70px; opacity: 0; transform: rotate(-8deg); }
.kpk-fv__sponge span { position: absolute; inset: 0; border-radius: 22px; background: linear-gradient(180deg, #2bb673 0 32%, #FFD400 32%); border: 6px solid var(--k); box-shadow: 0 16px 30px rgba(0,0,0,.25); }
.kpk-fv__sponge span::after { content: ""; position: absolute; inset: 8px; border-radius: 16px; background-image: radial-gradient(rgba(0,0,0,.12) 2px, transparent 3px); background-size: 14px 14px; }
/* 光のスイープ */
.kpk-fv__shine { position: absolute; inset: -20% -40%; background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.75) 50%, transparent 60%); transform: translateX(-100%); opacity: 0; }
/* 泡 */
.kpk-fv__bubbles { position: absolute; inset: 0; }
.kpk-fv__bubbles i { position: absolute; bottom: -60px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.95), rgba(255,255,255,.35) 55%, rgba(255,255,255,.05) 70%); border: 2px solid rgba(255,255,255,.7); animation: kpk-rise linear infinite; opacity: 0; }
@keyframes kpk-rise {
	0% { transform: translate(0, 0) scale(.8); opacity: 0; }
	10% { opacity: .9; }
	50% { transform: translate(var(--sway), -55vh) scale(1); }
	100% { transform: translate(calc(var(--sway) * -1), -115vh) scale(1.1); opacity: 0; }
}
/* キラキラ */
.kpk-fv__sparkles i { position: absolute; width: 28px; height: 28px; opacity: 0; background: var(--w); clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); filter: drop-shadow(0 0 6px rgba(255,255,255,.9)); }
.kpk-fv__sparkles i:nth-child(1) { left: 12%; top: 18%; --d: 2.6s; }
.kpk-fv__sparkles i:nth-child(2) { left: 30%; top: 70%; --d: 2.9s; width: 18px; height: 18px; }
.kpk-fv__sparkles i:nth-child(3) { left: 55%; top: 12%; --d: 3.1s; width: 36px; height: 36px; }
.kpk-fv__sparkles i:nth-child(4) { left: 72%; top: 60%; --d: 3.3s; }
.kpk-fv__sparkles i:nth-child(5) { left: 88%; top: 30%; --d: 3.5s; width: 22px; height: 22px; }
.kpk-fv__sparkles i:nth-child(6) { left: 45%; top: 85%; --d: 3.7s; width: 16px; height: 16px; }
.kpk-fv__sparkles i:nth-child(7) { left: 64%; top: 40%; --d: 3.9s; width: 40px; height: 40px; }
.kpk-fv__sparkles i:nth-child(8) { left: 20%; top: 45%; --d: 4.1s; width: 20px; height: 20px; }
@keyframes kpk-twinkle { 0%, 100% { opacity: 0; transform: scale(.3) rotate(0); } 50% { opacity: 1; transform: scale(1.1) rotate(45deg); } }
/* 英字マーキー */
.kpk-fv__en { position: absolute; top: 50%; left: 0; width: 100%; transform: translateY(-50%); white-space: nowrap; font-family: var(--fr); font-weight: 900; font-size: clamp(90px, 16vw, 230px); line-height: 1; color: rgba(255,255,255,.35); letter-spacing: .02em; display: flex; opacity: 0; }
.kpk-fv__en span { padding-right: .5em; animation: kpk-marquee 28s linear infinite; }
@keyframes kpk-marquee { to { transform: translateX(-100%); } }

/* 内容 */
.kpk-fv__inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1.35fr; align-items: center; gap: 24px; padding: 60px 0 90px; }
.kpk-fv__chara { position: relative; display: flex; justify-content: center; }
.kpk-fv__chara .kpk-mascot { width: min(100%, 380px); opacity: 0; transform: translateY(40px) scale(.8); }
.kpk-fv__balloon { position: absolute; top: -10px; left: 50%; transform: translateX(-50%) scale(0); transform-origin: 50% 100%; background: var(--w); border: 4px solid var(--k); border-radius: 999px; padding: 10px 24px; font-weight: 900; font-size: clamp(14px, 1.6vw, 20px); white-space: nowrap; z-index: 2; opacity: 0; }
.kpk-fv__balloon::after { content: ""; position: absolute; left: 50%; bottom: -14px; width: 18px; height: 18px; background: var(--w); border-right: 4px solid var(--k); border-bottom: 4px solid var(--k); transform: translateX(-50%) rotate(45deg); }
.kpk-fv__text { text-align: left; }
.kpk-fv__lead { display: inline-block; background: var(--k); color: var(--y); font-weight: 800; font-size: clamp(15px, 1.8vw, 22px); padding: 6px 18px; border-radius: 8px; margin-bottom: 14px; clip-path: inset(0 100% 0 0); }
.kpk-fv__title { font-weight: 900; line-height: 1.05; letter-spacing: .02em; }
.kpk-fv__title-s { display: block; font-size: clamp(34px, 5.2vw, 68px); }
.kpk-fv__title-b { display: block; font-size: clamp(72px, 12vw, 160px); color: var(--w); -webkit-text-stroke: 3px var(--k); text-shadow: 6px 6px 0 var(--k); margin-top: -.05em; }
.kpk-ch { display: inline-block; opacity: 0; transform: translateY(.6em) rotate(8deg) scale(.6); }
.kpk-fv__brand { font-family: var(--fr); font-weight: 900; font-size: clamp(20px, 2.6vw, 32px); margin-top: 10px; opacity: 0; transform: translateX(-20px); }
.kpk-fv__brand::before { content: "外壁洗浄専門店 "; font-size: .6em; font-family: var(--ff); font-weight: 700; margin-right: 6px; }
.kpk-fv__badges { display: flex; gap: 14px; margin-top: 28px; flex-wrap: wrap; }
.kpk-fv__badges li { width: 112px; height: 112px; border-radius: 50%; background: var(--w); border: 4px solid var(--k); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; line-height: 1.2; font-weight: 900; box-shadow: 4px 4px 0 var(--k); opacity: 0; transform: scale(0) rotate(-30deg); }
.kpk-fv__badges li b { font-size: 17px; }
.kpk-fv__badges li small { font-size: 11px; font-weight: 700; margin-top: 2px; color: var(--r); }
.kpk-fv__badges li:nth-child(2) { background: var(--k); color: var(--w); }
.kpk-fv__badges li:nth-child(2) small { color: var(--y); }
.kpk-fv__scroll { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); z-index: 2; font-family: var(--fr); font-weight: 900; font-size: 11px; letter-spacing: .3em; display: flex; flex-direction: column; align-items: center; gap: 6px; opacity: 0; }
.kpk-fv__scroll span { width: 2px; height: 36px; background: var(--k); position: relative; overflow: hidden; }
.kpk-fv__scroll span::after { content: ""; position: absolute; inset: 0; background: var(--y); animation: kpk-scrollline 1.6s var(--ease) infinite; }
@keyframes kpk-scrollline { 0% { transform: translateY(-100%); } 60%, 100% { transform: translateY(100%); } }

/* ---- FV アニメーション（.is-ready で開始）---- */
.kpk-fv.is-ready .kpk-fv__sponge { animation: kpk-sponge 2.6s .2s var(--ease) forwards; }
@keyframes kpk-sponge {
	0%   { opacity: 0; left: -5%; top: 12%; transform: rotate(-8deg) scale(.6); }
	8%   { opacity: 1; transform: rotate(-8deg) scale(1); }
	30%  { left: 105%; top: 18%; transform: rotate(6deg); }
	32%  { left: 105%; top: 44%; }
	58%  { left: -5%; top: 50%; transform: rotate(-10deg); }
	60%  { left: -5%; top: 76%; }
	88%  { left: 105%; top: 84%; transform: rotate(6deg); opacity: 1; }
	100% { left: 105%; top: 84%; opacity: 0; transform: rotate(6deg) scale(.6); }
}
.kpk-fv.is-ready .kpk-fv__wall-clean { animation: kpk-wipe 2.6s .2s var(--ease) forwards; }
@keyframes kpk-wipe {
	0%   { clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); }
	30%  { clip-path: polygon(0 0, 100% 0, 100% 36%, 0 36%); }
	58%  { clip-path: polygon(0 0, 100% 0, 100% 70%, 0 70%); }
	88%, 100% { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
}
.kpk-fv.is-ready .kpk-fv__shine { animation: kpk-shine 1.4s 2.5s ease-in-out forwards; }
@keyframes kpk-shine { 0% { opacity: 0; transform: translateX(-100%); } 20% { opacity: 1; } 100% { opacity: 0; transform: translateX(100%); } }
.kpk-fv.is-ready .kpk-fv__sparkles i { animation: kpk-twinkle var(--d) 2.7s ease-in-out infinite; }
.kpk-fv.is-ready .kpk-fv__en { animation: kpk-fadein 1.2s 2.4s forwards; }
.kpk-fv.is-ready .kpk-fv__lead { animation: kpk-wipe-in .7s .6s var(--ease) forwards; }
@keyframes kpk-wipe-in { to { clip-path: inset(0 0 0 0); } }
.kpk-fv.is-ready .kpk-ch { animation: kpk-pop .7s calc(.9s + var(--i) * .07s) var(--bounce) forwards; }
.kpk-fv.is-ready .kpk-fv__title-b .kpk-ch { animation-delay: calc(1.3s + var(--i) * .12s); }
@keyframes kpk-pop { to { opacity: 1; transform: none; } }
.kpk-fv.is-ready .kpk-fv__brand { animation: kpk-slide .7s 2s var(--ease) forwards; }
@keyframes kpk-slide { to { opacity: 1; transform: none; } }
.kpk-fv.is-ready .kpk-fv__badges li { animation: kpk-badge .7s var(--bounce) forwards; }
.kpk-fv.is-ready .kpk-fv__badges li:nth-child(1) { animation-delay: 2.3s; }
.kpk-fv.is-ready .kpk-fv__badges li:nth-child(2) { animation-delay: 2.45s; }
.kpk-fv.is-ready .kpk-fv__badges li:nth-child(3) { animation-delay: 2.6s; }
@keyframes kpk-badge { to { opacity: 1; transform: scale(1) rotate(0); } }
.kpk-fv.is-ready .kpk-fv__chara .kpk-mascot { animation: kpk-pop .9s 1.8s var(--bounce) forwards, kpk-bob 3s 2.7s ease-in-out infinite; }
@keyframes kpk-bob { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-14px) rotate(2deg); } }
.kpk-fv.is-ready .kpk-fv__balloon { animation: kpk-balloon .6s 2.5s var(--bounce) forwards; }
@keyframes kpk-balloon { to { opacity: 1; transform: translateX(-50%) scale(1); } }
.kpk-fv.is-ready .kpk-fv__scroll { animation: kpk-fadein 1s 3s forwards; }
@keyframes kpk-fadein { to { opacity: 1; } }
/* マスコットの腕（スポンジ）が常に動く */
.kpk-mascot__arm { transform-origin: 205px 170px; animation: kpk-scrub 1.1s ease-in-out infinite; }
@keyframes kpk-scrub { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(14deg); } }
.kpk-mascot__body { transform-origin: 130px 150px; animation: kpk-breath 2.4s ease-in-out infinite; }
@keyframes kpk-breath { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.02, .98); } }
.kpk-mascot--sm { width: 120px; }
.kpk-mascot--sm .kpk-mascot__arm { animation-duration: 1.4s; }

@media (prefers-reduced-motion: reduce) {
	.kpk-fv .kpk-fv__wall-clean { clip-path: none !important; animation: none; }
	.kpk-fv .kpk-fv__sponge, .kpk-fv .kpk-fv__shine, .kpk-fv__bubbles i, .kpk-fv__sparkles i, .kpk-fv__en span { animation: none !important; }
	.kpk-fv .kpk-ch, .kpk-fv .kpk-fv__brand, .kpk-fv .kpk-fv__badges li, .kpk-fv .kpk-mascot, .kpk-fv .kpk-fv__balloon, .kpk-fv__scroll { opacity: 1 !important; transform: none !important; animation: none !important; }
	.kpk-fv .kpk-fv__balloon { transform: translateX(-50%) !important; }
	.kpk-fv .kpk-fv__lead { clip-path: none !important; }
	.kpk-fv__en { opacity: 1; }
	.kpk-mascot__arm, .kpk-mascot__body { animation: none; }
}
@media (max-width: 900px) {
	.kpk-fv__inner { grid-template-columns: 1fr; gap: 8px; padding: 40px 0 80px; text-align: center; }
	.kpk-fv__chara { order: 2; }
	.kpk-fv__chara .kpk-mascot { width: min(60%, 240px); }
	.kpk-fv__text { order: 1; text-align: center; }
	.kpk-fv__badges { justify-content: center; }
	.kpk-fv__badges li { width: 96px; height: 96px; }
	.kpk-fv__badges li b { font-size: 14px; }
	.kpk-fv__badges li small { font-size: 10px; }
	.kpk-fv__title-b { text-shadow: 4px 4px 0 var(--k); -webkit-text-stroke: 2px var(--k); }
	.kpk-fv__sponge { width: 120px; height: 84px; margin-left: -60px; margin-top: -42px; }
	.kpk-fv__balloon { top: -24px; }
}

/* =========================================================
   悩み
   ========================================================= */
.kpk-trouble__title { text-align: center; font-size: clamp(24px, 4vw, 38px); font-weight: 900; line-height: 1.3; }
.kpk-trouble__title em { font-style: normal; background: linear-gradient(transparent 55%, var(--y) 55%); padding: 0 .1em; }
.kpk-trouble__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 40px 0; }
.kpk-trouble__list li { position: relative; background: var(--g); border-radius: 18px; padding: 28px 18px; text-align: center; font-weight: 700; font-size: 15px; line-height: 1.6; }
.kpk-trouble__list li::after { content: ""; position: absolute; left: 50%; bottom: -14px; width: 24px; height: 24px; background: var(--g); clip-path: polygon(0 0, 100% 0, 50% 100%); transform: translateX(-50%); }
.kpk-trouble__answer { text-align: center; margin: 48px 0 32px; }
.kpk-trouble__answer p:first-child { font-size: clamp(18px, 2.6vw, 26px); font-weight: 900; line-height: 1.8; }
.kpk-trouble__sub { max-width: 760px; margin: 16px auto 0; font-size: 15px; }

/* =========================================================
   ポイント
   ========================================================= */
.kpk-points__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.kpk-points__item { background: var(--w); border: 3px solid var(--k); border-radius: 18px; padding: 44px 20px 26px; text-align: center; position: relative; box-shadow: 6px 6px 0 var(--k); transition: transform .3s var(--ease); }
.kpk-points__item:hover { transform: translateY(-6px); }
.kpk-points__num { position: absolute; top: -18px; left: 50%; transform: translateX(-50%); width: 44px; height: 44px; border-radius: 50%; background: var(--k); color: var(--y); font-family: var(--fr); font-weight: 900; font-size: 20px; display: grid; place-items: center; }
.kpk-points__icon { display: block; width: 90px; height: 90px; margin: 0 auto 14px; background: var(--y3); border-radius: 50%; background-repeat: no-repeat; background-position: center; background-size: 54px; }
.kpk-icon--house { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M8 30L32 10l24 20' fill='none' stroke='%23111' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M14 28v26h36V28' fill='%23fff' stroke='%23111' stroke-width='5'/%3E%3Crect x='27' y='38' width='10' height='16' fill='%23111'/%3E%3C/svg%3E"); }
.kpk-icon--ladder { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M20 8v48M44 8v48M20 18h24M20 30h24M20 42h24' stroke='%23111' stroke-width='5' stroke-linecap='round'/%3E%3Cpath d='M8 12l48 40' stroke='%23E8382F' stroke-width='6' stroke-linecap='round'/%3E%3C/svg%3E"); }
.kpk-icon--quiet { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M12 24h10l12-10v36L22 40H12z' fill='%23fff' stroke='%23111' stroke-width='5' stroke-linejoin='round'/%3E%3Cpath d='M42 24l10 16M52 24L42 40' stroke='%23E8382F' stroke-width='6' stroke-linecap='round'/%3E%3C/svg%3E"); }
.kpk-icon--trophy { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M18 8h28v18c0 8-6 14-14 14s-14-6-14-14z' fill='%23FFD400' stroke='%23111' stroke-width='5'/%3E%3Cpath d='M18 14H8v6c0 6 4 10 10 10M46 14h10v6c0 6-4 10-10 10' fill='none' stroke='%23111' stroke-width='5'/%3E%3Cpath d='M32 40v8M20 56h24M26 48h12v8H26z' stroke='%23111' stroke-width='5' fill='%23111'/%3E%3C/svg%3E"); }
.kpk-points__item h3 { font-size: 18px; font-weight: 900; margin-bottom: 8px; }
.kpk-points__item p { font-size: 14px; text-align: left; }
.kpk-video { max-width: 820px; margin: 56px auto 40px; }
.kpk-video__label { text-align: center; font-weight: 900; font-size: 20px; margin-bottom: 14px; }
.kpk-video__frame { position: relative; aspect-ratio: 16/9; background: var(--k); border: 4px solid var(--k); border-radius: 18px; overflow: hidden; box-shadow: 8px 8px 0 rgba(0,0,0,.3); }
.kpk-video__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.kpk-video__ph { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #aaa; gap: 10px; text-align: center; padding: 20px; }
.kpk-video__ph span { width: 80px; height: 80px; border-radius: 50%; background: var(--y); color: var(--k); font-size: 32px; display: grid; place-items: center; padding-left: 6px; }
@media (max-width: 900px) { .kpk-points__grid { grid-template-columns: repeat(2, 1fr); gap: 28px 16px; } }
@media (max-width: 480px) { .kpk-points__grid { grid-template-columns: 1fr; } }

/* =========================================================
   塗装 vs 洗浄
   ========================================================= */
.kpk-diff__table { display: grid; grid-template-columns: 1fr 80px 1fr; align-items: stretch; gap: 0; max-width: 960px; margin: 0 auto; }
.kpk-diff__col { border: 4px solid var(--k); border-radius: 20px; overflow: hidden; background: var(--w); }
.kpk-diff__col h3 { text-align: center; font-size: 24px; font-weight: 900; padding: 14px; background: #888; color: var(--w); }
.kpk-diff__col--wash h3 { background: var(--y); color: var(--k); }
.kpk-diff__col--wash { box-shadow: 8px 8px 0 var(--y); }
.kpk-diff__chara { height: 150px; display: flex; align-items: center; justify-content: center; background: var(--g); }
.kpk-diff__col--wash .kpk-diff__chara { background: var(--y3); }
.kpk-diff__roller { width: 100px; height: 100px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect x='14' y='16' width='56' height='30' rx='8' fill='%235b8def' stroke='%23111' stroke-width='5'/%3E%3Cpath d='M70 31h12v18H58v12' fill='none' stroke='%23111' stroke-width='5'/%3E%3Crect x='52' y='60' width='12' height='28' rx='4' fill='%23111'/%3E%3C/svg%3E") center / contain no-repeat; }
.kpk-diff__col dl > div { display: grid; grid-template-columns: 80px 1fr; border-top: 2px solid #ddd; }
.kpk-diff__col dt { background: var(--g); font-weight: 900; padding: 14px; display: flex; align-items: center; justify-content: center; }
.kpk-diff__col dd { padding: 14px 16px; display: flex; align-items: center; font-size: 15px; }
.kpk-diff__col dd b { font-size: 22px; font-weight: 900; margin-right: 4px; }
.kpk-diff__col--wash dd b { color: var(--r); }
.kpk-diff__vs { display: grid; place-items: center; font-family: var(--fr); font-weight: 900; font-size: 28px; }
@media (max-width: 760px) { .kpk-diff__table { grid-template-columns: 1fr; gap: 10px; } .kpk-diff__vs { padding: 4px 0; } }

/* =========================================================
   メリット
   ========================================================= */
.kpk-merit__lead { text-align: center; font-weight: 700; max-width: 720px; margin: -16px auto 40px; }
.kpk-merit__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.kpk-merit__grid li { background: var(--w); border: 3px solid var(--k); border-radius: 20px; padding: 24px 22px 26px; text-align: center; box-shadow: 6px 6px 0 var(--k); }
.kpk-merit__no { display: inline-block; font-family: var(--fr); font-weight: 900; font-size: 12px; letter-spacing: .2em; background: var(--k); color: var(--y); padding: 2px 12px; border-radius: 999px; }
.kpk-merit__grid h3 { font-size: 34px; font-weight: 900; margin: 6px 0; }
.kpk-merit__num { display: flex; align-items: baseline; justify-content: center; gap: 4px; line-height: 1; margin: 6px 0 12px; }
.kpk-merit__num small { font-size: 14px; font-weight: 700; margin-right: 6px; background: var(--y); padding: 4px 8px; border-radius: 6px; align-self: center; }
.kpk-merit__num b { font-family: var(--fr); font-size: 64px; font-weight: 900; color: var(--r); }
.kpk-merit__num span { font-weight: 900; font-size: 18px; }
.kpk-merit__desc { font-size: 14px; }
@media (max-width: 800px) { .kpk-merit__grid { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; } }

/* =========================================================
   洗浄できるところ
   ========================================================= */
.kpk-place__lead { text-align: center; font-weight: 700; margin: -16px 0 32px; }
.kpk-place__house { position: relative; max-width: 900px; margin: 0 auto; }
.kpk-place__label { position: absolute; transform: translate(-50%, -50%); background: var(--k); color: var(--y); font-weight: 900; font-size: 13px; padding: 4px 12px; border-radius: 999px; white-space: nowrap; border: 2px solid var(--w); box-shadow: 0 3px 8px rgba(0,0,0,.25); opacity: 0; transition: opacity .5s var(--d), transform .5s var(--bounce) var(--d); }
.kpk-place__house.is-in .kpk-place__label { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.kpk-place__house:not(.is-in) .kpk-place__label { transform: translate(-50%, -50%) scale(.4); }
@media (max-width: 600px) { .kpk-place__label { font-size: 10px; padding: 2px 8px; } }

/* =========================================================
   カード（施工実績・投稿）
   ========================================================= */
.kpk-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.kpk-cards--3 { grid-template-columns: repeat(3, 1fr); }
.kpk-card { display: block; background: var(--w); border: 3px solid var(--k); border-radius: 16px; overflow: hidden; box-shadow: 5px 5px 0 var(--k); transition: transform .3s var(--ease); }
.kpk-card:hover { transform: translateY(-5px); }
.kpk-card__ba { display: grid; grid-template-columns: 1fr 1fr; }
.kpk-card__before, .kpk-card__after { position: relative; aspect-ratio: 4/3; overflow: hidden; }
.kpk-card__before img, .kpk-card__after img, .kpk-card__thumb img { width: 100%; height: 100%; object-fit: cover; }
.kpk-card__before span, .kpk-card__after span { position: absolute; left: 0; top: 0; font-family: var(--fr); font-weight: 900; font-size: 11px; letter-spacing: .1em; padding: 2px 10px; background: #555; color: var(--w); }
.kpk-card__after span { background: var(--r); }
.kpk-card__thumb { aspect-ratio: 4/3; overflow: hidden; }
.kpk-card__body { padding: 14px 16px 16px; }
.kpk-card__title { font-size: 16px; font-weight: 800; line-height: 1.5; }
.kpk-card__meta { font-size: 13px; color: var(--gray); margin-top: 4px; }
.kpk-card__date { font-family: var(--fr); font-size: 13px; font-weight: 700; color: var(--gray); }
@media (max-width: 860px) { .kpk-cards, .kpk-cards--3 { grid-template-columns: repeat(2, 1fr); gap: 16px; } }
@media (max-width: 520px) { .kpk-cards, .kpk-cards--3 { grid-template-columns: 1fr; } }

/* =========================================================
   流れ
   ========================================================= */
.kpk-flow__lead { text-align: center; font-weight: 900; font-size: 20px; margin: -8px 0 32px; }
.kpk-flow__lead b { color: var(--r); font-size: 1.5em; }
.kpk-flow__list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 36px 18px; counter-reset: flow; }
.kpk-flow__list li { position: relative; background: var(--g); border-radius: 18px; padding: 48px 18px 22px; text-align: center; }
.kpk-flow__list li:not(:last-child)::after { content: ""; position: absolute; right: -22px; top: 50%; width: 0; height: 0; border-left: 16px solid var(--y); border-top: 14px solid transparent; border-bottom: 14px solid transparent; transform: translateY(-50%); }
.kpk-flow__step { position: absolute; top: -18px; left: 50%; transform: translateX(-50%); background: var(--k); color: var(--y); font-family: var(--fr); font-weight: 900; font-size: 12px; letter-spacing: .15em; padding: 4px 16px; border-radius: 999px; display: flex; align-items: baseline; gap: 4px; }
.kpk-flow__step b { font-size: 20px; }
.kpk-flow__list h3 { font-size: 18px; font-weight: 900; margin-bottom: 8px; }
.kpk-flow__list p { font-size: 14px; text-align: left; }
@media (max-width: 860px) { .kpk-flow__list { grid-template-columns: repeat(2, 1fr); } .kpk-flow__list li:nth-child(2)::after { display: none; } }
@media (max-width: 480px) { .kpk-flow__list { grid-template-columns: 1fr; } .kpk-flow__list li::after { display: none !important; } }

/* =========================================================
   サービスポイント
   ========================================================= */
.kpk-service__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 960px; margin: 0 auto 40px; }
.kpk-service__item { background: var(--w); border: 3px solid var(--k); border-radius: 20px; padding: 28px 26px; display: grid; grid-template-columns: 120px 1fr; grid-template-rows: auto 1fr; gap: 6px 20px; box-shadow: 6px 6px 0 var(--k); }
.kpk-service__badge { grid-row: span 2; width: 120px; height: 120px; border-radius: 50%; background: var(--y); border: 4px solid var(--k); display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: var(--fr); font-weight: 900; font-size: 40px; line-height: 1; }
.kpk-service__badge small { font-size: 13px; font-family: var(--ff); font-weight: 800; margin-top: 4px; }
.kpk-service__badge--shield { border-radius: 50% 50% 50% 50% / 40% 40% 60% 60%; background: var(--r); color: var(--w); }
.kpk-service__item h3 { font-size: 24px; font-weight: 900; align-self: end; }
.kpk-service__item p { font-size: 14px; }
@media (max-width: 760px) { .kpk-service__grid { grid-template-columns: 1fr; } .kpk-service__item { grid-template-columns: 90px 1fr; } .kpk-service__badge { width: 90px; height: 90px; font-size: 30px; } }

/* =========================================================
   お客様の声
   ========================================================= */
.kpk-voice__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-bottom: 40px; }
.kpk-voice__card { background: var(--y3); border-radius: 20px; padding: 24px 22px; position: relative; }
.kpk-voice__card::before { content: "“"; position: absolute; top: -6px; right: 18px; font-family: Georgia, serif; font-size: 80px; line-height: 1; color: var(--y); font-weight: 900; }
.kpk-voice__head { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; }
.kpk-voice__icon { width: 56px; height: 56px; border-radius: 50%; overflow: hidden; flex: none; background: var(--w); }
.kpk-voice__icon img { width: 100%; height: 100%; object-fit: cover; }
.kpk-stars { color: #F5A100; font-size: 16px; letter-spacing: .05em; }
.kpk-voice__who { font-size: 13px; font-weight: 800; }
.kpk-voice__work { font-size: 12px; color: var(--gray); }
.kpk-voice__title { font-size: 17px; font-weight: 900; margin-bottom: 8px; line-height: 1.5; }
.kpk-voice__text { font-size: 14px; }
@media (max-width: 860px) { .kpk-voice__grid { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; } }

/* =========================================================
   戸建て以外
   ========================================================= */
.kpk-other__head { display: flex; align-items: center; gap: 24px; margin-bottom: 32px; }
.kpk-other__head h2 { font-size: clamp(24px, 3.6vw, 36px); font-weight: 900; }
.kpk-other__head p { font-weight: 700; font-size: 15px; }
.kpk-other__mascot { flex: none; }
.kpk-other__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.kpk-other__grid figure { border: 3px solid var(--k); border-radius: 14px; overflow: hidden; background: var(--w); }
.kpk-other__grid figcaption { padding: 10px; text-align: center; font-weight: 900; }
@media (max-width: 760px) { .kpk-other__grid { grid-template-columns: 1fr; } .kpk-other__head { flex-direction: column; text-align: center; } }

/* =========================================================
   エリア
   ========================================================= */
.kpk-area__top { display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: center; margin-bottom: 40px; }
.kpk-area__text h3 { font-size: clamp(26px, 3.6vw, 40px); font-weight: 900; line-height: 1.3; margin-bottom: 14px; }
.kpk-area__text p { font-size: 15px; }
.kpk-area__nums { display: flex; gap: 20px; margin-top: 24px; }
.kpk-area__nums div { background: var(--y); border: 3px solid var(--k); border-radius: 16px; padding: 12px 22px; display: flex; align-items: baseline; gap: 6px; line-height: 1; box-shadow: 4px 4px 0 var(--k); }
.kpk-area__nums small { font-size: 13px; font-weight: 800; margin-right: 6px; }
.kpk-area__nums b { font-family: var(--fr); font-size: 48px; font-weight: 900; }
.kpk-area__nums span { font-size: 13px; font-weight: 800; }
.kpk-area__map svg { width: 100%; max-width: 400px; margin: 0 auto; }
.kpk-area__pins circle { fill: var(--r); stroke: var(--w); stroke-width: 3; transform-box: fill-box; transform-origin: center; animation: kpk-pin 2s ease-in-out infinite; }
.kpk-area__pins circle:nth-child(2n) { animation-delay: .4s; }
.kpk-area__pins circle:nth-child(3n) { animation-delay: .8s; }
@keyframes kpk-pin { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.5); } }
.kpk-area__offices { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
.kpk-area__office { border: 3px solid var(--k); border-radius: 16px; padding: 20px 24px; background: var(--w); }
.kpk-area__office h4 { font-size: 18px; font-weight: 900; background: var(--y); display: inline-block; padding: 0 10px; margin-bottom: 8px; }
.kpk-area__office p { font-size: 14px; }
.kpk-area__others { background: var(--g); border-radius: 16px; padding: 20px 24px; margin-bottom: 36px; }
.kpk-area__others h4 { font-size: 15px; font-weight: 900; margin-bottom: 10px; }
.kpk-area__others ul { display: flex; flex-wrap: wrap; gap: 8px; }
.kpk-area__others li { background: var(--w); border: 2px solid var(--k); border-radius: 999px; padding: 2px 14px; font-size: 13px; font-weight: 700; }
@media (max-width: 760px) { .kpk-area__top, .kpk-area__offices { grid-template-columns: 1fr; } .kpk-area__nums { flex-wrap: wrap; } }

/* =========================================================
   街
   ========================================================= */
.kpk-town { background: var(--y); padding: 60px 0 0; position: relative; overflow: hidden; }
.kpk-town__catch { text-align: center; font-size: clamp(20px, 3.4vw, 34px); font-weight: 900; padding: 0 20px 20px; }
.kpk-town__catch b { background: var(--k); color: var(--y); padding: 0 .4em; border-radius: 6px; margin: 0 .1em; }
.kpk-town__skyline { position: relative; }
.kpk-town__skyline svg { width: 100%; height: clamp(120px, 20vw, 220px); }
.kpk-town__mascot { position: absolute; bottom: 10px; left: -140px; animation: kpk-walk 18s linear infinite; }
.kpk-town__mascot .kpk-mascot { width: 110px; }
@keyframes kpk-walk { to { left: calc(100% + 140px); } }
@media (prefers-reduced-motion: reduce) { .kpk-town__mascot { animation: none; left: 50%; transform: translateX(-50%); } }

/* =========================================================
   FAQ
   ========================================================= */
.kpk-faq__list { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 24px; margin-bottom: 40px; align-items: start; }
.kpk-faq__list--single { grid-template-columns: 1fr; max-width: 820px; margin-inline: auto; }
.kpk-faq__item { background: var(--w); border: 3px solid var(--k); border-radius: 14px; overflow: hidden; }
.kpk-faq__item summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; padding: 14px 44px 14px 14px; font-weight: 800; font-size: 15px; position: relative; }
.kpk-faq__item summary::-webkit-details-marker { display: none; }
.kpk-faq__item summary::after { content: ""; position: absolute; right: 16px; top: 50%; width: 10px; height: 10px; border-right: 3px solid var(--k); border-bottom: 3px solid var(--k); transform: translateY(-70%) rotate(45deg); transition: transform .3s; }
.kpk-faq__item[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.kpk-faq__q { flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--y); font-family: var(--fr); font-weight: 900; display: grid; place-items: center; }
.kpk-faq__a { padding: 0 18px 18px 58px; font-size: 14px; position: relative; }
.kpk-faq__a::before { content: "A"; position: absolute; left: 14px; top: 0; width: 32px; height: 32px; border-radius: 50%; background: var(--r); color: var(--w); font-family: var(--fr); font-weight: 900; display: grid; place-items: center; }
@media (max-width: 760px) { .kpk-faq__list { grid-template-columns: 1fr; } }

/* =========================================================
   お知らせ
   ========================================================= */
.kpk-news__inner { display: grid; grid-template-columns: 240px 1fr; gap: 40px; align-items: start; }
.kpk-news__head h2 { font-size: 30px; font-weight: 900; line-height: 1.2; }
.kpk-news__head span { display: block; font-family: var(--fr); font-weight: 900; letter-spacing: .2em; font-size: 13px; color: var(--gray); margin: 2px 0 18px; }
.kpk-news__list li { display: grid; grid-template-columns: 110px 1fr; gap: 12px; padding: 14px 0; border-bottom: 2px dashed #ccc; font-size: 15px; }
.kpk-news__list time { font-family: var(--fr); font-weight: 700; color: var(--gray); }
.kpk-news__list a:hover { text-decoration: underline; }
@media (max-width: 760px) { .kpk-news__inner { grid-template-columns: 1fr; gap: 16px; } .kpk-news__list li { grid-template-columns: 1fr; gap: 2px; } }

/* =========================================================
   SEO文章 / Instagram
   ========================================================= */
.kpk-seo__inner { display: grid; gap: 40px; max-width: 900px; }
.kpk-seo h2 { font-size: clamp(18px, 2.4vw, 24px); font-weight: 900; line-height: 1.5; margin-bottom: 14px; border-left: 8px solid var(--y); padding-left: 14px; }
.kpk-seo p { font-size: 14px; margin-bottom: 10px; }
.kpk-insta__head { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 24px; flex-wrap: wrap; }
.kpk-insta__head p { font-weight: 900; font-size: 22px; }
.kpk-insta__grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.kpk-insta__grid a, .kpk-insta__grid .kpk-ph { aspect-ratio: 1; overflow: hidden; border-radius: 10px; border: 3px solid var(--k); display: block; }
.kpk-insta__grid img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 760px) { .kpk-insta__grid { grid-template-columns: repeat(3, 1fr); } }

/* =========================================================
   フッターCTA / フッター
   ========================================================= */
.kpk-footcta { background: var(--y); padding: 50px 0; border-top: 4px solid var(--k); text-align: center; }
.kpk-footcta__lead { font-size: clamp(20px, 3vw, 28px); font-weight: 900; margin-bottom: 20px; }
.kpk-footcta__row { display: flex; justify-content: center; align-items: center; gap: 30px; flex-wrap: wrap; }
.kpk-footcta__tel { display: flex; flex-direction: column; line-height: 1.2; }
.kpk-footcta__tel small { font-size: 12px; font-weight: 800; }
.kpk-footcta__tel b { font-family: var(--fr); font-size: clamp(32px, 4.5vw, 44px); font-weight: 900; }
.kpk-footcta__tel b::before { content: "☎"; font-size: .7em; margin-right: 6px; }
.kpk-footer { background: var(--k); color: var(--w); position: relative; padding-bottom: 20px; }
.kpk-footer__wave { height: 26px; background: var(--y); clip-path: polygon(0 0, 100% 0, 100% 40%, 95% 100%, 90% 40%, 85% 100%, 80% 40%, 75% 100%, 70% 40%, 65% 100%, 60% 40%, 55% 100%, 50% 40%, 45% 100%, 40% 40%, 35% 100%, 30% 40%, 25% 100%, 20% 40%, 15% 100%, 10% 40%, 5% 100%, 0 40%); }
.kpk-footer__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; padding: 50px 0 30px; }
.kpk-footer__company { font-size: 13px; margin-top: 14px; color: #ccc; }
.kpk-sns { display: flex; gap: 10px; margin-top: 14px; }
.kpk-sns a { border: 2px solid var(--y); color: var(--y); border-radius: 999px; padding: 2px 14px; font-size: 12px; font-weight: 800; }
.kpk-sns a:hover { background: var(--y); color: var(--k); }
.kpk-footer__list { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 20px; }
.kpk-footer__list a { font-size: 14px; font-weight: 700; display: block; padding: 4px 0 4px 16px; position: relative; }
.kpk-footer__list a::before { content: ""; position: absolute; left: 0; top: 50%; width: 8px; height: 8px; background: var(--y); transform: translateY(-50%) rotate(45deg); }
.kpk-footer__list a:hover { color: var(--y); }
.kpk-widget { margin-top: 20px; font-size: 13px; color: #ccc; }
.kpk-widget__title { color: var(--y); font-size: 14px; margin-bottom: 6px; }
.kpk-copyright { text-align: center; font-size: 12px; color: #999; border-top: 1px solid #333; padding-top: 16px; width: min(100% - 40px, var(--w-max)); margin-inline: auto; }
@media (max-width: 760px) { .kpk-footer__inner { grid-template-columns: 1fr; gap: 28px; } }

.kpk-totop { position: fixed; right: 20px; bottom: 90px; z-index: 90; width: 64px; height: 64px; border-radius: 50%; background: var(--y); border: 3px solid var(--k); display: grid; place-items: center; font-family: var(--fr); font-size: 9px; font-weight: 900; text-align: center; line-height: 1.2; opacity: 0; visibility: hidden; transform: translateY(20px); transition: .3s; box-shadow: 3px 3px 0 var(--k); }
.kpk-totop.is-show { opacity: 1; visibility: visible; transform: none; }
.kpk-fixcta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 95; display: none; grid-template-columns: 1fr 1fr; transform: translateY(100%); transition: transform .3s; }
.kpk-fixcta a { display: block; text-align: center; padding: 14px 8px; font-weight: 900; font-size: 15px; border-top: 3px solid var(--k); }
.kpk-fixcta__tel { background: var(--y); color: var(--k); }
.kpk-fixcta__form { background: var(--r); color: var(--w); }
@media (max-width: 767px) { .kpk-fixcta { display: grid; } .kpk-fixcta-show .kpk-fixcta { transform: none; } .kpk-totop { bottom: 70px; right: 12px; width: 52px; height: 52px; } body { padding-bottom: 0; } }

/* =========================================================
   下層ページ
   ========================================================= */
.kpk-page__head { background: var(--y); padding: clamp(40px, 6vw, 70px) 0; border-bottom: 4px solid var(--k); position: relative; }
.kpk-page__head::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(0,0,0,.06) 1.5px, transparent 1.6px); background-size: 18px 18px; }
.kpk-page__head .kpk-container { position: relative; }
.kpk-page__title { font-size: clamp(24px, 4vw, 38px); font-weight: 900; line-height: 1.3; }
.kpk-page__date { font-family: var(--fr); font-weight: 700; display: block; margin-bottom: 6px; }
.kpk-page__body { padding: clamp(40px, 6vw, 70px) 0; }
.kpk-page__body--narrow { max-width: 820px; }
.kpk-page__thumb { margin-bottom: 30px; border-radius: 16px; overflow: hidden; border: 3px solid var(--k); }
.kpk-content { font-size: 16px; }
.kpk-content > * + * { margin-top: 1.2em; }
.kpk-content h2 { font-size: 24px; font-weight: 900; border-left: 8px solid var(--y); padding-left: 14px; margin-top: 2em; }
.kpk-content h3 { font-size: 20px; font-weight: 900; background: linear-gradient(transparent 60%, var(--y3) 60%); display: inline-block; margin-top: 1.6em; }
.kpk-content ul, .kpk-content ol { padding-left: 1.5em; }
.kpk-content ul { list-style: disc; } .kpk-content ol { list-style: decimal; }
.kpk-content img { border-radius: 12px; }
.kpk-content a { color: var(--r); text-decoration: underline; }
.kpk-content blockquote { background: var(--g); border-left: 6px solid var(--y); padding: 16px 20px; border-radius: 0 12px 12px 0; margin: 1.2em 0; }
.kpk-content table { border-collapse: collapse; width: 100%; }
.kpk-content th, .kpk-content td { border: 2px solid #ddd; padding: 10px 14px; }
.kpk-content th { background: var(--y3); }
.kpk-page__nav { display: flex; justify-content: space-between; gap: 14px; margin-top: 50px; padding-top: 20px; border-top: 2px dashed #ccc; font-weight: 700; flex-wrap: wrap; }
.kpk-pagination { margin-top: 40px; text-align: center; }
.kpk-pagination .nav-links { display: inline-flex; gap: 6px; }
.kpk-pagination .page-numbers { display: grid; place-items: center; min-width: 40px; height: 40px; border: 2px solid var(--k); border-radius: 8px; font-weight: 800; padding: 0 8px; }
.kpk-pagination .page-numbers.current { background: var(--y); }
.kpk-works__spec { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0 30px; }
.kpk-works__spec > div { display: flex; border: 2px solid var(--k); border-radius: 8px; overflow: hidden; font-size: 14px; }
.kpk-works__spec dt { background: var(--k); color: var(--y); padding: 4px 12px; font-weight: 800; }
.kpk-works__spec dd { padding: 4px 14px; font-weight: 700; }

/* ビフォーアフター スライダー */
.kpk-ba { position: relative; --pos: 50%; border: 4px solid var(--k); border-radius: 16px; overflow: hidden; aspect-ratio: 3/2; user-select: none; }
.kpk-ba img, .kpk-ba .kpk-ph { width: 100%; height: 100%; object-fit: cover; aspect-ratio: auto; }
.kpk-ba__after, .kpk-ba__before { position: absolute; inset: 0; }
.kpk-ba__before { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.kpk-ba__label { position: absolute; top: 12px; right: 12px; background: #555; color: var(--w); font-family: var(--fr); font-weight: 900; font-size: 12px; letter-spacing: .1em; padding: 4px 12px; border-radius: 999px; }
.kpk-ba__before .kpk-ba__label { left: 12px; right: auto; }
.kpk-ba__label--after { background: var(--r); }
.kpk-ba__handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 4px; background: var(--w); transform: translateX(-50%); pointer-events: none; }
.kpk-ba__handle span { position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; border-radius: 50%; background: var(--y); border: 3px solid var(--k); transform: translate(-50%, -50%); }
.kpk-ba__handle span::before, .kpk-ba__handle span::after { content: ""; position: absolute; top: 50%; width: 8px; height: 8px; border-top: 3px solid var(--k); border-left: 3px solid var(--k); }
.kpk-ba__handle span::before { left: 10px; transform: translateY(-50%) rotate(-45deg); }
.kpk-ba__handle span::after { right: 10px; transform: translateY(-50%) rotate(135deg); }
.kpk-ba__range { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; -webkit-appearance: none; appearance: none; }
.kpk-area__names text { paint-order: stroke; stroke: var(--w); stroke-width: 4px; }

/* =========================================================
   FV v2：ダーク背景＋キャラクター画像
   ========================================================= */
.kpk-fv--dark { color: var(--w); }
.kpk-fv--dark .kpk-fv__glow { position: absolute; inset: 0; background: radial-gradient(circle at 70% 55%, rgba(69,196,242,.35), transparent 45%); opacity: 0; }
.kpk-fv--dark .kpk-fv__rays { position: absolute; inset: 0; overflow: hidden; }
.kpk-fv--dark .kpk-fv__rays i { position: absolute; top: -20%; height: 140%; width: 120px; left: var(--x); background: linear-gradient(180deg, transparent, rgba(69,196,242,.18) 40%, rgba(255,255,255,.22) 50%, rgba(69,196,242,.18) 60%, transparent); transform: skewX(-18deg); opacity: 0; filter: blur(2px); }
.kpk-fv--dark .kpk-fv__rays i:nth-child(1) { --x: 10%; --d: 0s; }
.kpk-fv--dark .kpk-fv__rays i:nth-child(2) { --x: 28%; --d: .5s; width: 60px; }
.kpk-fv--dark .kpk-fv__rays i:nth-child(3) { --x: 50%; --d: 1s; }
.kpk-fv--dark .kpk-fv__rays i:nth-child(4) { --x: 72%; --d: 1.5s; width: 80px; }
.kpk-fv--dark .kpk-fv__rays i:nth-child(5) { --x: 88%; --d: 2s; }
@keyframes kpk-ray { 0%, 100% { opacity: 0; transform: skewX(-18deg) translateX(-40px); } 50% { opacity: 1; transform: skewX(-18deg) translateX(40px); } }
.kpk-fv--dark .kpk-fv__en { color: rgba(255,255,255,.07); }
.kpk-fv--dark .kpk-fv__sparkles i { background: #fff; filter: drop-shadow(0 0 8px rgba(69,196,242,1)); }
.kpk-fv--dark .kpk-fv__bubbles i { border-color: rgba(69,196,242,.6); background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.9), rgba(69,196,242,.35) 55%, rgba(69,196,242,.05) 70%); }

.kpk-fv--dark .kpk-fv__inner { grid-template-columns: 1fr 1.15fr; padding: 40px 0 80px; }
.kpk-fv--dark .kpk-fv__lead { background: var(--y); color: var(--k); }
.kpk-fv--dark .kpk-fv__title-s { color: var(--w); text-shadow: 0 0 20px rgba(69,196,242,.6); }
.kpk-fv--dark .kpk-fv__title-b { color: #FFD400; -webkit-text-stroke: 3px #0b2a4d; text-shadow: 6px 6px 0 #0b2a4d, 0 0 30px rgba(69,196,242,.5); }
.kpk-fv--dark .kpk-fv__brand { color: var(--y); }
.kpk-fv--dark .kpk-fv__badges li { background: var(--w); color: var(--k); border-color: var(--y); box-shadow: 0 0 0 4px rgba(69,196,242,.25), 0 10px 30px rgba(0,0,0,.4); }
.kpk-fv--dark .kpk-fv__badges li:nth-child(2) { background: var(--y); color: var(--k); border-color: var(--w); }
.kpk-fv--dark .kpk-fv__badges li:nth-child(2) small { color: #0b2a4d; }
.kpk-fv--dark .kpk-fv__scroll { color: var(--w); }
.kpk-fv--dark .kpk-fv__scroll span { background: rgba(255,255,255,.3); }

.kpk-fv__visual { position: relative; opacity: 0; transform: translateX(60px) scale(.9); }
.kpk-fv__visual img { width: 100%; height: auto; -webkit-mask-image: radial-gradient(ellipse 58% 58% at 50% 50%, #000 60%, transparent 100%); mask-image: radial-gradient(ellipse 58% 58% at 50% 50%, #000 60%, transparent 100%); }
.kpk-fv__spray { position: absolute; left: 57%; top: 38%; width: 30%; height: 14%; pointer-events: none; z-index: 2; }
.kpk-fv__spray i { position: absolute; left: 0; top: 50%; width: 10px; height: 10px; border-radius: 50%; background: radial-gradient(circle, #fff, rgba(69,196,242,.6) 60%, transparent 70%); opacity: 0; animation: kpk-spray 1.1s linear infinite; animation-delay: calc(var(--n) * .18s); }
.kpk-fv__spray i:nth-child(1) { --n: 0; --y: -30%; }
.kpk-fv__spray i:nth-child(2) { --n: 1; --y: 10%; }
.kpk-fv__spray i:nth-child(3) { --n: 2; --y: -60%; }
.kpk-fv__spray i:nth-child(4) { --n: 3; --y: 40%; }
.kpk-fv__spray i:nth-child(5) { --n: 4; --y: -10%; }
.kpk-fv__spray i:nth-child(6) { --n: 5; --y: 70%; }
@keyframes kpk-spray { 0% { opacity: 0; transform: translate(0, 0) scale(.4); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(260%, var(--y)) scale(1.6); } }

.kpk-fv--dark.is-ready .kpk-fv__visual { animation: kpk-pop .9s .3s var(--bounce) forwards, kpk-float 4s 1.3s ease-in-out infinite; }
@keyframes kpk-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
.kpk-fv--dark.is-ready .kpk-fv__glow { animation: kpk-fadein 1.2s .4s forwards; }
.kpk-fv--dark.is-ready .kpk-fv__rays i { animation: kpk-ray 5s var(--d) ease-in-out infinite; }
.kpk-fv--dark.is-ready .kpk-fv__sparkles i { animation-delay: 1s; }
.kpk-fv--dark.is-ready .kpk-fv__en { animation-delay: .8s; }
.kpk-fv--dark.is-ready .kpk-fv__lead { animation-delay: .5s; }
.kpk-fv--dark.is-ready .kpk-ch { animation-delay: calc(.8s + var(--i) * .07s); }
.kpk-fv--dark.is-ready .kpk-fv__title-b .kpk-ch { animation-delay: calc(1.1s + var(--i) * .12s); }
.kpk-fv--dark.is-ready .kpk-fv__brand { animation-delay: 1.7s; }
.kpk-fv--dark.is-ready .kpk-fv__badges li:nth-child(1) { animation-delay: 1.9s; }
.kpk-fv--dark.is-ready .kpk-fv__badges li:nth-child(2) { animation-delay: 2.05s; }
.kpk-fv--dark.is-ready .kpk-fv__badges li:nth-child(3) { animation-delay: 2.2s; }
.kpk-fv--dark.is-ready .kpk-fv__scroll { animation-delay: 2.6s; }
@media (prefers-reduced-motion: reduce) { .kpk-fv__visual { opacity: 1; transform: none; } .kpk-fv__spray i, .kpk-fv--dark .kpk-fv__rays i { animation: none !important; } .kpk-fv--dark .kpk-fv__glow { opacity: 1; } }
@media (max-width: 900px) {
	.kpk-fv--dark .kpk-fv__inner { grid-template-columns: 1fr; padding: 30px 0 70px; }
	.kpk-fv__visual { order: 2; max-width: 520px; margin: 0 auto; }
	.kpk-fv--dark .kpk-fv__text { order: 1; }
}

/* ---------- 修正：キャラ画像・ヘッダー・FV明るさ ---------- */
.kpk-chara-img { width: 110px; height: 110px; border-radius: 50%; border: 3px solid var(--k); background: var(--w); object-fit: cover; }
.kpk-logo__mark img { width: 100%; height: 100%; border-radius: 50%; border: 2px solid var(--k); }
.kpk-logo img.custom-logo { border: 0; border-radius: 0; }
.kpk-town__mascot img { width: 120px; height: auto; }
.kpk-town__mascot { bottom: 6px; }
.kpk-gnav__list a { white-space: nowrap; padding: 8px 9px; font-size: 13px; }
.kpk-header__inner { gap: 16px; }
.kpk-tel b { font-size: 21px; }
@media (max-width: 1280px) {
	.kpk-header__cta { display: none; }
	.kpk-burger { display: block; }
	.kpk-gnav { position: fixed; inset: 0; background: var(--y); z-index: 105; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 28px; margin: 0; opacity: 0; visibility: hidden; transform: translateY(-12px); transition: opacity .3s, transform .3s, visibility .3s; }
	.kpk-nav-open .kpk-gnav { opacity: 1; visibility: visible; transform: none; }
	.kpk-nav-open { overflow: hidden; }
	.kpk-gnav__list { flex-direction: column; text-align: center; gap: 2px; }
	.kpk-gnav__list a { font-size: 18px; padding: 10px 24px; }
	.kpk-gnav__sp { display: flex; flex-direction: column; align-items: center; gap: 14px; }
}
.kpk-fv--dark { background: linear-gradient(135deg, #4db1ec 0%, #2a8ad6 55%, #1d6fb8 100%); }
.kpk-fv--dark .kpk-fv__glow { background: radial-gradient(circle at 70% 55%, rgba(120,220,255,.35), transparent 42%); }
.kpk-fv--dark .kpk-fv__en { color: rgba(255,255,255,.12); }
.kpk-fv--dark .kpk-fv__rays i { background: linear-gradient(180deg, transparent, rgba(255,255,255,.14) 40%, rgba(255,255,255,.3) 50%, rgba(255,255,255,.14) 60%, transparent); }
.kpk-fv--dark .kpk-fv__title-b { -webkit-text-stroke: 3px #0b2a4d; text-shadow: 6px 6px 0 #0b2a4d; }
.kpk-fv--dark .kpk-fv__lead { background: var(--w); color: #0b2a4d; }
.kpk-fv--dark .kpk-fv__brand { color: var(--w); }
.kpk-fv--dark .kpk-fv__badges li { border-color: #0b2a4d; box-shadow: 4px 4px 0 #0b2a4d; }
.kpk-fv--dark .kpk-fv__badges li:nth-child(2) { background: var(--y); border-color: #0b2a4d; }
.kpk-fv__visual img { -webkit-mask-image: none; mask-image: none; filter: drop-shadow(0 18px 30px rgba(0,30,70,.35)); }
.kpk-footer__info { margin-top: 14px; font-size: 13px; color: #ccc; }
.kpk-footer__info dt { color: var(--y); font-weight: 800; margin-top: 10px; }
.kpk-footer__info dd a { font-family: var(--fr); font-size: 20px; font-weight: 900; color: var(--w); }
.kpk-footcta__note { font-weight: 700; }
.kpk-tel small:last-child { font-size: 9px; }

/* ナビ：折り返し完全禁止 */
.kpk-gnav__list { flex-wrap: nowrap; }
.kpk-gnav__list li { flex: none; }
.kpk-gnav__list a { white-space: nowrap; word-break: keep-all; }
.kpk-header__cta { white-space: nowrap; }
@media (min-width: 1281px) and (max-width: 1440px) { .kpk-gnav__list a { font-size: 12px; padding: 8px 6px; } .kpk-tel b { font-size: 19px; } }

/* ---------- キャラポーズ配置 ---------- */
.kpk-pose { display: block; filter: drop-shadow(0 6px 12px rgba(0,0,0,.18)); }
.kpk-with-pose { position: relative; display: flex; align-items: center; justify-content: center; gap: 24px; flex-wrap: wrap; }
.kpk-trouble__answer-text { flex: 0 1 680px; text-align: left; }
.kpk-trouble__catch { font-size: clamp(18px, 2.6vw, 26px); font-weight: 900; line-height: 1.8; }
.kpk-with-pose .kpk-trouble__sub { margin: 12px 0 0; max-width: none; }
@media (max-width: 700px) { .kpk-trouble__answer-text { text-align: center; } }
.kpk-pose--thumbs { animation: kpk-float 3s ease-in-out infinite; }
.kpk-pose--clip, .kpk-pose--arms { margin: -10px auto 18px; }
.kpk-other__mascot { flex: none; }
.kpk-town__mascot img { width: 130px !important; }
.kpk-town__mascot { animation-duration: 10s; }
@media (max-width: 600px) { .kpk-pose--thumbs { width: 120px !important; } }

.kpk-fv--dark .kpk-fv__glow { background: radial-gradient(circle at 70% 52%, rgba(69,196,242,.18), transparent 40%); }

/* ボタン行の余白（カードと重ならないように） */
.kpk-sec .kpk-center, .kpk-sec .kpk-btn-row { margin-top: 40px; }
.kpk-trouble .kpk-center { margin-top: 24px; }
.kpk-news .kpk-center { margin-top: 0; }
.kpk-seo .kpk-center { margin-top: 20px; }
.kpk-area__top { margin-bottom: 40px; }

.kpk-fv__spray { left: 60%; top: 36%; }
.kpk-fv--dark .kpk-fv__glow { background: radial-gradient(circle at 70% 52%, rgba(255,255,255,.22), transparent 42%); }