@charset "UTF-8";
/*
 * Header, footer and back-to-top button for every page (loaded by src/layouts/Base.astro after the theme CSS
 * and sp.css). Same design as the finished top page; page-specific styles stay in home.css / item.css.
 */

/* ---- header ---- */
body header.header { background: #fff; border-bottom: 1px solid #e6e6e6; }
body header.header .nav-main a, body header.header .nav-main em {
	font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif; letter-spacing: .1em;
}

/* ---- footer ---- */
body footer.footer {
	background: #0d0d0d; letter-spacing: .06em;
	font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
}
body footer.footer a, body footer.footer em { color: #d9d9d9; }
body footer.footer a:hover { color: #fff; }
body footer.footer > div { display: none; } /* old Facebook / Tweet widgets no longer render */
body footer.footer .copyright { color: #8a8a8a; font-size: 11px; letter-spacing: .1em; }
body footer.footer .nav-main li a, body footer.footer .nav-main li em { font-size: 12px; }
body footer.footer .nav-main li li a { font-size: 11px; color: #a8a8a8; }
body footer.footer .nav-main li, body footer.footer .nav-main ul { border-color: #262626 !important; }

/* ---- PC / tablet header and footer SNS (the theme's phone layout ends at 640px) ---- */
@media screen and (min-width: 641px) {
	/* header: less space above the logo and a slightly smaller logo (width follows, ratio kept) */
	body header.header { height: auto; } /* theme: fixed 13.5em */
	body header.header .logo { padding-top: 24px; padding-bottom: 12px; }
	body header.header .logo img.pc { width: auto; height: 90px; }
	/* footer: Twitter / Instagram / Facebook / Contact in one centred row, equal size and spacing */
	body footer.footer .nav-sub { float: none; clear: both; width: auto; max-width: none; margin: 0 auto; padding-top: 8px; }
	body footer.footer .nav-sub ul { display: flex; flex-wrap: nowrap; justify-content: center; gap: 16px; margin: 0; padding: 0; }
	body footer.footer .nav-sub li { flex: 0 1 200px; min-width: 0; max-width: none; width: auto; margin: 0 0 24px; display: block; }
	body footer.footer .nav-sub li img.pc { display: block; width: 100%; height: auto; }
}

/* ---- back to top: small and quiet on phones ---- */
@media screen and (max-width: 767px) {
	body .nav-up { right: 12px !important; bottom: 12px !important; }
	body .nav-up img { width: 32px !important; height: auto !important; opacity: .8; }
}