/* ===================================================================
   common.css — Site header / footer / shared blog wrapper
   =================================================================== */

:root {
	--brand-teal: #2b545e;
	--brand-teal-dark: #1d3c44;
	--text-muted: #575b53;
	--page-max: 980px;
}

/* ---------- Site header ---------- */
.site-header {
	background: #fff;
	border-bottom: 1px solid #eee;
}

.site-header__inner {
	max-width: var(--page-max);
	margin: 0 auto;
	padding: 18px 24px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
}

.site-header__logo {
	margin: 0;
}
.site-header__logo a {
	display: inline-flex;
	flex-direction: column;
	line-height: 1.1;
	color: var(--brand-teal);
}
.site-header__logo-jp {
	font-family: "Noto Serif JP", serif;
	font-weight: 700;
	font-size: 20px;
}
.site-header__logo-en {
	font-family: "Poppins", sans-serif;
	font-weight: 700;
	font-size: 11px;
	letter-spacing: .25em;
	color: var(--brand-teal);
	margin-top: 4px;
}

.site-header__menu {
	display: flex;
	gap: 24px;
	font-size: 15px;
	font-weight: 500;
}
.site-header__menu a {
	color: #333;
	transition: color .2s;
}
.site-header__menu a:hover {
	color: var(--brand-teal);
}

@media (max-width: 600px) {
	.site-header__inner {
		padding: 14px 16px;
	}
	.site-header__menu {
		gap: 16px;
		font-size: 14px;
	}
}

/* ---------- Site footer ---------- */
.site-footer {
	background: var(--brand-teal);
	color: #fff;
	padding: 60px 24px 30px;
	margin-top: 80px;
}

.site-footer__inner {
	max-width: var(--page-max);
	margin: 0 auto;
	text-align: center;
}

.site-footer__contact-label {
	font-family: "Poppins", "Noto Sans JP", sans-serif;
	letter-spacing: .2em;
	font-size: 14px;
	margin: 0 0 12px;
	opacity: .9;
}

.site-footer__contact-name {
	font-family: "Noto Serif JP", serif;
	font-size: 22px;
	margin: 0 0 8px;
}
.site-footer__contact-name span {
	font-size: 13px;
	margin-left: 8px;
	opacity: .8;
}

.site-footer__contact-tel {
	font-family: "DM Sans", "Noto Sans JP", sans-serif;
	font-size: 32px;
	font-weight: 700;
	letter-spacing: .03em;
	margin: 0 0 8px;
}
.site-footer__contact-tel a { color: #fff; }

.site-footer__contact-note {
	font-size: 13px;
	opacity: .85;
	margin: 0 0 32px;
}

.site-footer__menu {
	display: flex;
	justify-content: center;
	gap: 28px;
	margin: 0 0 24px;
	font-size: 14px;
}
.site-footer__menu a {
	color: #fff;
	opacity: .9;
}
.site-footer__menu a:hover { opacity: 1; text-decoration: underline; }

.site-footer__copy {
	font-size: 12px;
	opacity: .7;
	margin: 0;
}