/* =========================================================
   クラベル base：色・文字・ヘッダー・フッター・ボタン・状態表示
   ========================================================= */

:root {
	/* 黒（トップ） */
	--kb-black: #000;
	--kb-black-raised: #17150f;
	--kb-black-line: #3b3426;
	--kb-on-black: #f2ede1;
	--kb-on-black-muted: #b3ab98;

	/* シャンパンゴールド */
	--kb-gold: #cdb57e;
	--kb-gold-light: #e8dbb6;
	--kb-gold-ink: #6e5420; /* アイボリー上の文字用（コントラスト確保） */

	/* 紙（比較・記事ページ） */
	--kb-paper: #faf7f0;
	--kb-white: #fff;
	--kb-ink: #1c1a16;
	--kb-ink-muted: #5a5448;
	--kb-line: #e0d8c7;
	--kb-line-strong: #c9bfa9;

	/* 状態 */
	--kb-yes: #1f5a3a;
	--kb-no: #4a4a4a;
	--kb-unknown: #6a5a36;

	--kb-serif: "Hiragino Mincho ProN", "Hiragino Mincho Pro", "Yu Mincho", "YuMincho", "Noto Serif JP", "Noto Serif CJK JP", "BIZ UDPMincho", serif;
	--kb-sans: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Noto Sans CJK JP", "BIZ UDPGothic", "Yu Gothic UI", "Yu Gothic", "Meiryo", sans-serif;

	--kb-radius: 4px;
	--kb-gutter: clamp(16px, 4vw, 40px);
	--kb-max: 1180px;
	--kb-measure: 42em;
}

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

html { -webkit-text-size-adjust: 100%; scroll-padding-top: 16px; }

body {
	margin: 0;
	font-family: var(--kb-sans);
	font-size: 1rem;
	line-height: 1.85;
	letter-spacing: 0.02em;
	color: var(--kb-ink);
	background: var(--kb-paper);
	font-feature-settings: "palt" 0;
	overflow-wrap: anywhere;
}

img, svg, video { max-width: 100%; height: auto; }
a { color: var(--kb-gold-ink); text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 2px; }

h1, h2, h3, h4 { line-height: 1.4; margin: 0 0 0.6em; font-weight: 700; }

:focus-visible { outline: 3px solid #1a4fd6; outline-offset: 2px; }
.kb-front :focus-visible { outline-color: var(--kb-gold-light); }

.screen-reader-text {
	border: 0; clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden;
	padding: 0; position: absolute; width: 1px; white-space: nowrap;
}
.kb-skip:focus {
	clip-path: none; height: auto; width: auto; margin: 0; z-index: 1000;
	left: 12px; top: 12px; padding: 10px 16px; background: var(--kb-white); color: var(--kb-ink);
	border-radius: var(--kb-radius);
}
.kb-main:focus { outline: none; }

/* ---------- ヘッダー ---------- */
.kb-header { background: var(--kb-white); border-bottom: 1px solid var(--kb-line); }
.kb-header__inner {
	max-width: var(--kb-max); margin: 0 auto; padding: 6px var(--kb-gutter);
	display: flex; align-items: center; gap: 4px 16px; flex-wrap: wrap; min-height: 56px;
}
/* ロゴ：ブランドが分かる最小限の大きさに留め、本文より目立たせない */
.kb-logo { margin: 0; margin-right: auto; line-height: 1; }
.kb-logo a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--kb-ink); text-decoration: none; }
.kb-logo__mark { flex: none; width: 27px; height: 18px; color: var(--kb-gold-ink); }
.kb-logo__name { font-family: var(--kb-serif); font-size: 1.2rem; line-height: 1; font-weight: 600; letter-spacing: 0.12em; }
/* 画像ロゴ：元画像の大きさに関わらず高さを制限し、縦横比は維持する */
.kb-logo__image { display: block; width: auto; height: auto; max-height: 32px; max-width: 200px; }

.kb-nav__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 22px; }
.kb-nav__list a { display: flex; align-items: center; min-height: 44px; color: inherit; text-decoration: none; font-size: 0.94rem; }
.kb-nav__list a:hover { text-decoration: underline; }
/* 現在地：色だけに頼らず下線の太さで示す */
.kb-nav__list a.is-current,
.kb-nav__list .current-menu-item > a,
.kb-nav__list .current-menu-ancestor > a { font-weight: 700; text-decoration: underline; text-decoration-thickness: 3px; text-decoration-color: var(--kb-gold); text-underline-offset: 0.45em; }

.kb-nav-toggle { display: none; }

@media (max-width: 760px) {
	.js .kb-nav-toggle {
		display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px;
		background: transparent; color: inherit; border: 1px solid currentColor; border-radius: var(--kb-radius);
		font: inherit; font-size: 0.88rem; cursor: pointer;
	}
	.kb-nav-toggle__bars, .kb-nav-toggle__bars::before, .kb-nav-toggle__bars::after {
		display: block; width: 16px; height: 2px; background: currentColor; position: relative;
	}
	.kb-nav-toggle__bars::before, .kb-nav-toggle__bars::after { content: ""; position: absolute; left: 0; }
	.kb-nav-toggle__bars::before { top: -5px; }
	.kb-nav-toggle__bars::after { top: 5px; }
	.kb-nav { flex-basis: 100%; }
	.js .kb-nav { display: none; }
	.js .kb-nav.is-open { display: block; }
	.kb-nav__list { flex-direction: column; gap: 0; border-top: 1px solid var(--kb-line); }
	.kb-nav__list a { padding: 12px 0; border-bottom: 1px solid var(--kb-line); }
}

/* トップページのヘッダー（黒） */
.kb-front .kb-header { background: var(--kb-black); border-bottom-color: var(--kb-black-line); color: var(--kb-on-black); }
.kb-front .kb-logo a { color: var(--kb-on-black); }
.kb-front .kb-logo__mark { color: var(--kb-gold); }
.kb-front .kb-nav__list a { color: var(--kb-on-black); }
@media (max-width: 760px) {
	.kb-front .kb-nav__list, .kb-front .kb-nav__list a { border-color: var(--kb-black-line); }
}

/* ---------- フッター ---------- */
.kb-footer { background: var(--kb-ink); color: #e9e3d5; margin-top: 72px; }
.kb-front .kb-footer { background: var(--kb-black); border-top: 1px solid var(--kb-black-line); margin-top: 0; }
.kb-footer__inner { max-width: var(--kb-max); margin: 0 auto; padding: 40px var(--kb-gutter) 32px; display: grid; gap: 20px; }
.kb-footer .kb-logo a { color: #f2ede1; }
.kb-footer .kb-logo__mark { color: var(--kb-gold); }
.kb-footer__tagline { margin: 4px 0 0; color: #bdb4a1; font-size: 0.9rem; }
.kb-footer__links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 24px; }
.kb-footer a { color: #f2ede1; }
.kb-footer__disclosure { margin: 0; font-size: 0.86rem; color: #cfc7b5; max-width: 60em; }
.kb-footer__copy { margin: 0; font-size: 0.8rem; color: #a59c88; }

/* ---------- ボタン ---------- */
.kb-button {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	min-height: 48px; padding: 12px 28px; border-radius: var(--kb-radius);
	font-weight: 700; text-decoration: none; letter-spacing: 0.06em;
	border: 1px solid transparent;
}
.kb-button--gold { background: var(--kb-gold); color: var(--kb-black); }
.kb-button--gold:hover { background: var(--kb-gold-light); }

/* 「公式サイトへ」 */
.kb-cta-wrap { display: inline-flex; flex-direction: column; align-items: stretch; gap: 2px; }
.kb-cta {
	display: inline-flex; align-items: center; justify-content: center; gap: 6px;
	min-height: 44px; padding: 8px 18px; border-radius: var(--kb-radius);
	background: var(--kb-ink); color: var(--kb-gold-light); font-weight: 700; text-decoration: none;
	white-space: nowrap; border: 1px solid var(--kb-ink);
}
.kb-cta:hover { background: var(--kb-black); color: var(--kb-white); }
.kb-cta--lg { min-height: 52px; padding: 12px 28px; font-size: 1.05rem; width: 100%; max-width: 360px; }
.kb-cta--sm { font-size: 0.9rem; padding: 6px 14px; }
.kb-ext { width: 14px; height: 14px; flex: none; }
.kb-cta-note { font-size: 0.72rem; color: var(--kb-ink-muted); text-align: center; }
.kb-cta-none { font-size: 0.85rem; color: var(--kb-ink-muted); }

/* ---------- 状態表示（あり／なし／対象外／公式情報で確認できず） ---------- */
.kb-state {
	display: inline-block; padding: 1px 8px; border-radius: 3px; font-size: 0.86rem; font-weight: 700;
	line-height: 1.6; border: 1px solid currentColor; white-space: nowrap;
}
.kb-state--yes { color: var(--kb-yes); background: #eef5ef; }
.kb-state--no { color: var(--kb-no); background: #f1f0ed; }
.kb-state--na { color: var(--kb-no); background: transparent; border-style: dotted; }
/* 未確認：枠で目立たせず、文言で伝える */
.kb-state--unknown { color: var(--kb-ink-muted); background: transparent; border: 0; padding: 0; font-size: 0.84rem; font-weight: 400; white-space: normal; }

.kb-muted { color: var(--kb-ink-muted); }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}