/* 全ページ共通のヘッダーとフッター（ひな形は chrome/、差し込みは scripts/sync-chrome.mjs）。
   ページごとに色の変数名が違うため、ここでは sc- の変数とクラスだけを使い、ページ側の CSS に頼らない。 */
:root{--sc-bg:#FFFFFF;--sc-ink:#0F1A26;--sc-ink-2:#45556A;--sc-ink-3:#56677A;--sc-rule:#D8E1E9;--sc-accent:#17569E}
@media (prefers-color-scheme:dark){
  :root{--sc-bg:#0A1219;--sc-ink:#E6EDF3;--sc-ink-2:#B0C0CE;--sc-ink-3:#8B9EB0;--sc-rule:#20323F;--sc-accent:#5C9BE0}
}

.sc-header,.sc-footer{font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN",system-ui,sans-serif;line-height:1.6;-webkit-font-smoothing:antialiased}
.sc-header *,.sc-footer *{box-sizing:border-box}
.sc-bar,.sc-wrap{max-width:1140px;margin:0 auto;padding:0 32px}
@media(max-width:640px){.sc-bar,.sc-wrap{padding:0 20px}}

/* ヘッダー。一般のページは上に固定する（トップの見出しへの移動位置 scroll-margin-top はこの高さに合わせてある） */
.sc-header{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--sc-bg) 92%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid var(--sc-rule)}
.sc-header.sc-flow{position:static;background:var(--sc-bg)}
.sc-bar{display:grid;grid-template-columns:auto 1fr auto;align-items:center;min-height:66px;gap:22px}
.sc-flow .sc-bar{grid-template-columns:1fr auto;min-height:64px}
.sc-brand{display:flex;align-items:center;gap:8px;color:var(--sc-ink);text-decoration:none;font-weight:700;font-size:15px;letter-spacing:.04em;white-space:nowrap}
.sc-brand img{display:block;width:30px;height:31px}
.sc-nav{justify-self:end;display:flex;align-items:center;gap:20px;font-size:13px;white-space:nowrap}
.sc-nav a{padding:10px 0;color:var(--sc-ink-2);text-decoration:none}
.sc-nav a:hover{color:var(--sc-ink)}
.sc-apply{display:inline-flex;align-items:center;padding:9px 16px;border:1px solid var(--sc-accent);border-radius:2px;background:var(--sc-accent);color:var(--sc-bg);font-size:13px;font-weight:700;text-decoration:none;white-space:nowrap}
.sc-apply:hover{filter:brightness(1.08)}
.sc-back{font-size:13px;color:var(--sc-ink-2);text-decoration:none;white-space:nowrap}
.sc-back:hover{color:var(--sc-ink)}
@media(max-width:1000px){
  .sc-header:not(.sc-flow) .sc-bar{grid-template-columns:1fr auto;gap:0 12px;padding-top:12px;padding-bottom:8px}
  .sc-brand{font-size:14px}
  .sc-apply{grid-column:2;grid-row:1}
  .sc-nav{grid-column:1/-1;grid-row:2;justify-self:stretch;overflow-x:auto;gap:22px;padding-top:6px;scrollbar-width:none}
  .sc-nav::-webkit-scrollbar{display:none}
  .sc-nav a{flex-shrink:0}
}

/* フッター */
.sc-footer{margin-top:40px;padding:36px 0 64px;border-top:1px solid var(--sc-rule);font-size:13px;color:var(--sc-ink-3)}
.sc-links{display:flex;flex-wrap:wrap;gap:6px 20px;margin:0 0 12px}
.sc-links a{color:var(--sc-ink-2);text-decoration:none}
.sc-links a:hover{color:var(--sc-ink);text-decoration:underline}
.sc-note{margin:6px 0 0;font-size:12.5px}

.sc-header a:focus-visible,.sc-footer a:focus-visible{outline:2px solid var(--sc-accent);outline-offset:3px}