/* ============================================================
   Column Theme HomeB3 — Site Header（全ページ共通ヘッダー）
   front-page 以外（記事 / アーカイブ / 固定ページ等）でも HomeB3
   ヘッダーを表示するため、ヘッダー関連スタイルのみを独立させ全ページで読み込む。
   トークンは :root に定義し body クラスに依存しない（自己完結）。
   ============================================================ */
:root {
	--hb3-primary: #1F6FE5;
	--hb3-primary-dark: #1857BB;
	--hb3-ink: #142B4D;
	--hb3-sub: #5A6B86;
	--hb3-muted: #8B9AA8;
	--hb3-bg: #F4F8FC;
	--hb3-border: #DFE7F0;
	--hb3-border-strong: #D5E0EC;
	--hb3-white: #ffffff;
}

.hb3-header,
.hb3-header *,
.hb3-header *::before,
.hb3-header *::after { box-sizing: border-box; }
.hb3-header a { color: inherit; text-decoration: none; }

/* ============================================================
   HEADER
   ============================================================ */
.hb3-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--hb3-white);
	border-bottom: 1px solid var(--hb3-border);
	font-family: "Noto Sans JP", "Hiragino Kaku Gothic Pro", Meiryo, sans-serif;
	color: var(--hb3-ink);
	letter-spacing: 0.03em;
}
.hb3-header__inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 14px 32px;
	display: flex;
	align-items: center;
	gap: 24px;
}
.hb3-logo { display: flex; align-items: center; gap: 11px; flex-shrink: 0; }
.hb3-logo__icon {
	width: 40px; height: 40px;
	border-radius: 13px;
	background: linear-gradient(135deg, #5E9BF5, #1F6FE5);
	color: #fff; font-weight: 800; font-size: 19px;
	display: flex; align-items: center; justify-content: center;
}
.hb3-logo__text { display: block; }
.hb3-logo__name {
	display: block;
	font-size: 22px; font-weight: 900;
	color: var(--hb3-ink); letter-spacing: 0.02em; line-height: 1;
}
.hb3-logo__tagline {
	display: block;
	margin-top: 3px;
	font-size: 10.5px; color: var(--hb3-muted); letter-spacing: 0.05em;
}
.hb3-header__cta {
	flex-shrink: 0;
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	gap: 11px;
	background: var(--hb3-primary);
	color: #fff !important;
	font-size: 15px; font-weight: 600; letter-spacing: 0.05em;
	padding: 11px 12px 11px 26px;
	border-radius: 28px;
	transition: background 0.3s ease-in-out;
}
.hb3-header__cta:hover { background: var(--hb3-primary-dark); color: #fff !important; }
.hb3-header__cta-arrow {
	flex-shrink: 0;
	width: 30px; height: 30px;
	border-radius: 50%;
	background: #fff;
	color: var(--hb3-primary);
	display: inline-flex; align-items: center; justify-content: center;
	transition: transform 0.3s cubic-bezier(0.4, 0.4, 0, 1);
}
.hb3-header__cta-arrow svg { width: 14px; height: 14px; }
.hb3-header__cta:hover .hb3-header__cta-arrow { transform: scale(1.18); }

.hb3-nav {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 24px;
	display: flex;
	gap: 2px;
	overflow-x: auto;
	scrollbar-width: none;
}
.hb3-nav::-webkit-scrollbar { display: none; }
.hb3-nav a {
	padding: 10px 12px;
	font-size: 13px; font-weight: 500;
	color: var(--hb3-ink);
	white-space: nowrap;
	border-bottom: 2px solid transparent;
	transition: color 0.2s, border-color 0.2s;
}
.hb3-nav a:hover { color: var(--hb3-primary); border-bottom-color: var(--hb3-primary); }

/* ハンバーガー（SP のみ表示） */
.hb3-hamburger {
	display: none;
	width: 34px; height: 34px;
	border: 1px solid var(--hb3-border);
	border-radius: 9px;
	background: #fff;
	flex-direction: column; align-items: center; justify-content: center;
	gap: 3px; cursor: pointer;
	margin-left: auto;
}
.hb3-hamburger span {
	width: 16px; height: 2px; background: var(--hb3-ink); border-radius: 1px;
}

/* ============================================================
   FOOTER（全ページ共通）
   ============================================================ */
.hb3-footer { background: var(--hb3-ink); color: #fff; }
.hb3-footer a { color: inherit; text-decoration: none; }
.hb3-footer *, .hb3-footer *::before, .hb3-footer *::after { box-sizing: border-box; }
.hb3-footer__inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 48px 32px;
	display: grid;
	grid-template-columns: 1.2fr 1fr 1fr;
	gap: 40px;
}
.hb3-footer__logo { display: flex; align-items: center; gap: 10px; }
.hb3-footer__logo-icon {
	width: 36px; height: 36px;
	border-radius: 9px;
	background: linear-gradient(135deg, #5E9BF5, #1F6FE5);
	color: #fff; font-weight: 700; font-size: 18px;
	display: flex; align-items: center; justify-content: center;
}
.hb3-footer__logo-name { font-size: 17px; font-weight: 700; color: #fff; letter-spacing: 0.04em; }
.hb3-footer__desc {
	margin: 16px 0 0;
	font-size: 13px; line-height: 1.8; letter-spacing: 0.04em;
	color: rgba(255, 255, 255, 0.75);
}
.hb3-footer__col-title {
	font-size: 13px; font-weight: 600; letter-spacing: 0.08em;
	color: rgba(255, 255, 255, 0.6);
}
.hb3-footer__col > a {
	display: block;
	margin-top: 8px;
	font-size: 13px; color: rgba(255, 255, 255, 0.85); letter-spacing: 0.04em;
	transition: color 0.2s;
}
.hb3-footer__col > a:first-of-type { margin-top: 14px; }
.hb3-footer__col a:hover { color: #fff; }
.hb3-footer__cats {
	display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px;
	margin-top: 14px;
}
.hb3-footer__cats a {
	font-size: 13px; color: rgba(255, 255, 255, 0.85); letter-spacing: 0.04em;
	transition: color 0.2s;
}
.hb3-footer__cats a:hover { color: #fff; }
.hb3-footer__bottom {
	border-top: 1px solid rgba(255, 255, 255, 0.14);
	padding: 18px 32px;
	text-align: center;
	font-size: 12px; letter-spacing: 0.06em;
	color: rgba(255, 255, 255, 0.55);
}

/* ============================================================
   RESPONSIVE — SP（ヘッダー / フッター）
   ============================================================ */
@media (max-width: 768px) {
	.hb3-header__inner { padding: 12px 16px; gap: 10px; }
	.hb3-logo__icon { width: 32px; height: 32px; font-size: 16px; border-radius: 9px; }
	.hb3-logo__name { font-size: 15px; }
	.hb3-logo__tagline { display: none; }
	/* CTA は SP でも表示（コンパクト） */
	.hb3-header__cta {
		font-size: 12px; letter-spacing: 0.02em;
		padding: 7px 8px 7px 13px; gap: 6px;
	}
	.hb3-header__cta-arrow { width: 24px; height: 24px; }
	.hb3-header__cta-arrow svg { width: 12px; height: 12px; }
	.hb3-hamburger { display: flex; margin-left: 0; }
	.hb3-nav {
		display: none;
		padding: 6px 16px 12px;
		flex-wrap: wrap;
		gap: 4px 8px;
	}
	.hb3-nav.is-open { display: flex; }

	/* フッター: サイト名(全幅) → リード文(全幅) → カテゴリ(2列) → サイト案内 */
	.hb3-footer__inner { grid-template-columns: 1fr; gap: 22px; padding: 28px 20px; }
	.hb3-footer__cats { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 375px) {
	.hb3-header__inner { gap: 6px; padding: 10px 12px; }
	.hb3-logo { gap: 6px; }
	.hb3-logo__icon { width: 26px; height: 26px; font-size: 13px; border-radius: 7px; }
	.hb3-logo__name { display: block !important; font-size: 12px; white-space: nowrap; }
	.hb3-header__cta { font-size: 11px; padding: 5px 6px 5px 10px; gap: 4px; }
	.hb3-header__cta-arrow { width: 18px; height: 18px; }
	.hb3-header__cta-arrow svg { width: 10px; height: 10px; }
	.hb3-hamburger { width: 28px; height: 28px; }
}