/* 公開ページの大枠。ページ専用CSSの後に読み込み、ヘッダーとパンくずを共通化する。 */
:root {
    --container: 1200px;
    --page-gutter: 20px;
    --header-h: 78px;
    --header-logo-width: 144px;
    --breadcrumb-h: 44px;
}

/* 長いページと短いページの行き来で、スクロールバー分だけ中央がずれるのを防ぐ。 */
html { scrollbar-gutter: stable; }

body > :is(.site-header, .site-breadcrumb, .site-footer) > .site-frame {
    width: 100%;
    max-width: var(--container);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--page-gutter);
    padding-right: var(--page-gutter);
}
.site-header > .header-inner { height: var(--header-h); }
.site-header .brand-logo { padding: 3px 0; border-radius: 0; background: transparent; }
.site-header .brand-logo-image { width: var(--header-logo-width); }

/* パンくずは全ページで同じ高さ・文字サイズ。長い施設名も折り返さず横へ読める。 */
.site-breadcrumb { background: #fff; border-bottom: 1px solid var(--c-border); color: var(--c-text-sub); font: 400 13px/20px var(--font); }
.site-breadcrumb ol { display: flex; align-items: center; flex-wrap: nowrap; gap: 4px; height: var(--breadcrumb-h); margin: 0; padding: 0; overflow-x: auto; overflow-y: hidden; white-space: nowrap; scrollbar-width: none; list-style: none; }
.site-breadcrumb ol::-webkit-scrollbar { display: none; }
.site-breadcrumb li { display: inline-flex; align-items: center; flex: none; }
.site-breadcrumb a { display: inline-flex; align-items: center; min-height: var(--breadcrumb-h); color: var(--c-text-sub); }
.site-breadcrumb span { color: var(--c-text-sub); }
.site-breadcrumb li:last-child > span { display: inline; max-width: none; overflow: visible; text-overflow: clip; vertical-align: baseline; }
.site-breadcrumb a:focus-visible { outline-offset: -3px; }

@media (max-width: 900px) {
    :root { --header-h: 68px; --header-logo-width: 128px; }
}
@media (max-width: 640px) {
    :root { --header-h: 64px; --header-logo-width: 120px; }
}
@media (max-width: 480px) {
    :root { --page-gutter: 16px; }
}