@charset "utf-8";
/* --------------------------------------------------------------------------
   全ページ共通ヘッダーと共通部品（2026-10-20）
   - 読み込み：header-front.php（トップ）／header-1.php（下層ページ）
   - HTML：inc/site-header.php の keeperpro_site_header()
   - 色・角丸はLP（coating-lp-2026）と同じ値。ヘッダー背景はロゴ（keeper-logo.png）の青。
   - 既存 css/style.css の要素指定（p / a / ul など）は .tp 内で打ち消す。
-------------------------------------------------------------------------- */

:root {
	--tp-navy: #102c43;
	--tp-ink: #233544;
	--tp-muted: #526270;
	--tp-blue: #005e8a;
	--tp-blue-hover: #00486b;
	--tp-pale: #f3f6f8;
	--tp-line: #d7e0e7;
	--tp-white: #fff;
	--tp-gold: #e8c376;
	--tp-gold-pale: #fcf1ce;
	--tp-gold-ink: #44320e;
	--tp-header-bg: #0e318f; /* ロゴ画像の青 */
	--tp-header-line: rgba(255, 255, 255, .22);
	--tp-radius: 12px;
	--tp-gutter: 16px;
	/* LPと同じ端末標準フォント。ヘッダーは全ページこのフォントで表示する */
	--tp-font: "Noto Sans JP", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}

@media (min-width: 768px) {
	:root {
		--tp-gutter: 24px;
	}
}

/* ---------- 既存CSSの打ち消し・基本 ---------- */

.tp,
.tp *,
.tp *::before,
.tp *::after {
	box-sizing: border-box;
}

.tp {
	font-size: 16px;
	line-height: 1.8;
	color: var(--tp-ink);
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

/* :where() で詳細度を要素指定と同じにし、style.css の p { font-size } などだけを打ち消す（各部品の class 指定は優先される） */
:where(.tp) p,
:where(.tp) li,
:where(.tp) dt,
:where(.tp) dd,
:where(.tp) figcaption {
	font-size: inherit;
}

:where(.tp) p,
:where(.tp) figure,
:where(.tp) dl,
:where(.tp) dd {
	margin: 0;
}

:where(.tp) ul,
:where(.tp) ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* 見出しは style.css の main h1 { text-align: center } などに負けないよう .tp で指定 */
.tp h1,
.tp h2,
.tp h3 {
	margin: 0;
	color: var(--tp-navy);
	font-weight: 700;
	line-height: 1.5;
	text-align: left;
}

.tp img {
	display: block;
	max-width: 100%;
	height: auto;
}

.tp a {
	color: var(--tp-blue);
	transition: none;
	text-underline-offset: 3px;
}

.tp a:hover,
.tp a img:hover {
	opacity: 1;
}

.tp a:focus-visible,
.tp button:focus-visible,
.tp summary:focus-visible,
.tp-skip:focus-visible {
	outline: 3px solid var(--tp-blue);
	outline-offset: 3px;
}

.tp-sprite {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
}

.tp-icon {
	flex: none;
	width: 1.2em;
	height: 1.2em;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.tp-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.tp-skip {
	position: absolute;
	top: 8px;
	left: 8px;
	z-index: 1000;
	padding: 8px 16px;
	background: var(--tp-navy);
	color: #fff;
	font-family: var(--tp-font);
	font-size: 16px;
	font-weight: 700;
	transform: translateY(-200%);
}

.tp-skip:focus {
	transform: none;
	color: #fff;
}

.tp-container {
	width: 100%;
	max-width: calc(1120px + var(--tp-gutter) * 2);
	margin-inline: auto;
	padding-inline: var(--tp-gutter);
}

/* ---------- ボタン・リンク ---------- */

.tp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 48px;
	padding: 10px 22px;
	border: 2px solid transparent;
	border-radius: 10px;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.4;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
}

.tp a.tp-btn--primary,
.tp-btn--primary {
	background: var(--tp-navy);
	border-color: var(--tp-navy);
	color: #fff;
}

.tp a.tp-btn--primary:hover,
.tp-btn--primary:hover {
	background: var(--tp-blue);
	border-color: var(--tp-blue);
	color: #fff;
}

.tp a.tp-btn--secondary,
.tp-btn--secondary {
	background: #fff;
	border-color: var(--tp-navy);
	color: var(--tp-navy);
}

.tp a.tp-btn--secondary:hover,
.tp-btn--secondary:hover {
	background: var(--tp-pale);
	color: var(--tp-navy);
}

.tp-btn--ghost {
	background: transparent;
	border-color: var(--tp-line);
	color: var(--tp-navy);
	font-family: inherit;
}

.tp-btn--ghost:hover {
	background: #fff;
	border-color: var(--tp-navy);
}

.tp-btn--lg {
	min-height: 56px;
	padding: 12px 22px;
	font-size: 17px;
}

.tp-btn[hidden] {
	display: none;
}

.tp-cta {
	display: grid;
	gap: 6px;
}

.tp-cta__note {
	font-size: 14px;
	line-height: 1.6;
	color: var(--tp-ink);
}

.tp-textlink {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: 700;
	text-decoration: underline;
	text-decoration-thickness: 1px;
}

.tp a.tp-textlink {
	color: var(--tp-blue);
}

.tp a.tp-textlink:hover {
	color: var(--tp-blue-hover);
	text-decoration-thickness: 2px;
}

/* ---------- 共通ヘッダー ---------- */

/* PC・スマホとも画面上部に追従。z-index は旧ヘッダーと同じ 999（開いたメニューがトップの固定ボタンより前に出る） */
.tp-header {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	z-index: 999;
	background: var(--tp-header-bg);
	color: #fff;
	font-family: var(--tp-font);
}

/* ページ内リンクで移動したとき、移動先が追従ヘッダーの下に隠れないようにする（値はヘッダーの高さ＋少し） */
html {
	scroll-padding-top: 72px;
}

@media (min-width: 768px) {
	html {
		scroll-padding-top: 88px;
	}
}

@media (min-width: 960px) {
	html {
		scroll-padding-top: 140px;
	}
}

/* 青い背景の上では、フォーカス枠を白にする */
.tp-header__bar a:focus-visible,
.tp-header__bar summary:focus-visible,
.tp-gnav a:focus-visible {
	outline-color: #fff;
}

.tp-header__bar {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 60px;
}

.tp a.tp-brand {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-right: auto;
	color: #fff;
	text-decoration: none;
}

.tp-brand img {
	width: 116px;
}

.tp-brand__name {
	display: flex;
	flex-direction: column;
	font-size: 11px;
	line-height: 1.35;
	white-space: nowrap;
}

.tp-brand__name strong {
	font-size: 15px;
}

.tp-header__tel,
.tp-header__rsv,
.tp-gnav {
	display: none;
}

.tp a.tp-header__rsv {
	background: #fff;
	border-color: #fff;
	color: var(--tp-header-bg);
}

.tp a.tp-header__rsv:hover {
	background: #e8eeff;
	border-color: #e8eeff;
	color: var(--tp-header-bg);
}

/* キーパーLABOとの違いの注記（下層ページのみ）。PCは電話番号の下、スマホ・タブレットはヘッダーの下の帯（追従しない） */
.tp-header__tel-note {
	margin-top: 2px;
}

.tp-header-note {
	background: var(--tp-header-bg);
	border-top: 1px solid var(--tp-header-line);
}

.tp-header-note p {
	padding-top: 6px;
	padding-bottom: 8px;
	font-family: var(--tp-font);
	font-size: 12px;
	line-height: 1.5;
	color: rgba(255, 255, 255, .9);
}

/* スマートフォン・タブレットのメニュー（開閉） */
.tp-sitemenu {
	flex: none;
}

.tp-sitemenu__toggle {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-width: 48px;
	min-height: 48px;
	padding: 2px 4px;
	border-radius: 8px;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.2;
	list-style: none;
	cursor: pointer;
}

.tp-sitemenu__toggle::-webkit-details-marker {
	display: none;
}

.tp-sitemenu__toggle .tp-icon {
	width: 26px;
	height: 26px;
}

.tp-sitemenu[open] .tp-sitemenu__toggle {
	background: rgba(255, 255, 255, .16);
}

.tp-sitemenu__panel {
	position: absolute;
	top: 100%;
	right: 0;
	left: 0;
	display: grid;
	gap: 20px;
	max-height: calc(100vh - 60px);
	max-height: calc(100dvh - 60px);
	padding: 12px var(--tp-gutter) 28px;
	overflow-y: auto;
	background: #fff;
	color: var(--tp-ink);
	box-shadow: 0 12px 24px rgba(16, 44, 67, .2);
}

.tp-sitemenu__list li {
	border-bottom: 1px solid var(--tp-line);
}

.tp .tp-sitemenu__list a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 48px;
	padding: 10px 4px;
	color: var(--tp-navy);
	font-weight: 700;
	text-decoration: none;
}

.tp .tp-sitemenu__list a::after {
	content: "";
	flex: none;
	width: 8px;
	height: 8px;
	margin-left: 12px;
	border-top: 2px solid var(--tp-blue);
	border-right: 2px solid var(--tp-blue);
	transform: rotate(45deg);
}

.tp .tp-sitemenu__list a:hover {
	color: var(--tp-blue);
	text-decoration: underline;
}

.tp-sitemenu__contact {
	display: grid;
	gap: 6px;
}

.tp-sitemenu__contact .tp-btn + .tp-cta__note {
	margin-bottom: 8px;
}

@media (min-width: 768px) {
	.tp-header__bar {
		min-height: 76px;
		gap: 16px;
	}

	.tp-brand img {
		width: 150px;
	}

	.tp-brand__name {
		font-size: 12px;
	}

	.tp-brand__name strong {
		font-size: 17px;
	}

	.tp-header__rsv {
		display: inline-flex;
		min-height: 44px;
		padding: 8px 16px;
		font-size: 15px;
		white-space: nowrap;
	}

	.tp-sitemenu__panel {
		left: auto;
		right: var(--tp-gutter);
		width: min(420px, calc(100vw - 48px));
		border-radius: var(--tp-radius);
		max-height: calc(100vh - 96px);
	}
}

/* PC：電話番号を表示し、メニューは2段目に横並び（旧メニューと同じ項目・順番） */
@media (min-width: 960px) {
	.tp-header__tel {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		line-height: 1.3;
	}

	.tp .tp-header__tel a {
		display: inline-flex;
		align-items: center;
		gap: 4px;
		color: #fff;
		font-size: 22px;
		font-weight: 700;
		letter-spacing: .02em;
		text-decoration: none;
		white-space: nowrap;
	}

	.tp-header__tel span {
		font-size: 12px;
		color: rgba(255, 255, 255, .88);
		white-space: nowrap;
	}

	.tp-sitemenu,
	.tp-header-note {
		display: none;
	}

	.tp-gnav {
		display: block;
		border-top: 1px solid var(--tp-header-line);
	}

	.tp-gnav__list {
		display: flex;
	}

	.tp-gnav__item {
		position: relative;
		flex: 1 1 auto;
	}

	.tp-gnav__item + .tp-gnav__item {
		border-left: 1px solid var(--tp-header-line);
	}

	.tp .tp-gnav__link {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 6px;
		min-height: 52px;
		padding: 8px 12px;
		color: #fff;
		font-size: 15px;
		font-weight: 700;
		line-height: 1.4;
		text-align: center;
		text-decoration: none;
		white-space: nowrap;
	}

	.tp .tp-gnav__link:hover,
	.tp-gnav__item:hover > .tp-gnav__link,
	.tp-gnav__item:focus-within > .tp-gnav__link {
		background: rgba(255, 255, 255, .12);
	}

	.tp-gnav__item.has-sub > .tp-gnav__link::after {
		content: "";
		width: 7px;
		height: 7px;
		margin-top: -4px;
		border-right: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
		transform: rotate(45deg);
	}

	/* 「料金・割引」のサブメニュー（マウスを重ねる／キーボードで移動すると表示） */
	.tp-gnav__sub {
		position: absolute;
		top: 100%;
		left: 50%;
		z-index: 5;
		min-width: 260px;
		padding: 6px 0;
		background: #fff;
		border-radius: 0 0 10px 10px;
		box-shadow: 0 12px 24px rgba(16, 44, 67, .2);
		transform: translateX(-50%);
		visibility: hidden;
		opacity: 0;
	}

	.tp-gnav__item:hover > .tp-gnav__sub,
	.tp-gnav__item:focus-within > .tp-gnav__sub {
		visibility: visible;
		opacity: 1;
	}

	.tp .tp-gnav__sub a {
		display: block;
		padding: 12px 20px;
		color: var(--tp-navy);
		font-size: 15px;
		font-weight: 700;
		line-height: 1.5;
		text-decoration: none;
	}

	.tp .tp-gnav__sub a:hover {
		background: var(--tp-pale);
		color: var(--tp-blue);
	}

	.tp .tp-gnav__sub a:focus-visible {
		outline-color: var(--tp-blue);
		outline-offset: -3px;
	}
}

/* 下層ページ：旧ヘッダーは画面上部に固定されていたため本文に上余白（15vw）があった。新ヘッダーは固定しないので打ち消す */
@media only screen and (max-width: 768px) {
	.tp-site .container.lower-main {
		margin-top: 0;
	}
}