/* 公開ページ共通のヘッダー・フッター (index / privacy / terms / invite の4ページで読み込む)。
   HTML は4ページにそれぞれ同じものを書いているので、変えるときは4ページとも直す。
   ページ本体のスタイルと混ざらないよう、クラス名は site- で始め、色も専用の変数にしている */

/* ロゴの「Taily」だけアプリと同じ Zen Kaku Gothic New (トップLP の見出し用サブセットに含まれる) */
@font-face {
  font-family: "Zen Kaku Gothic New LP";
  src: url("/fonts/zkgn-700-lp.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

:root {
  --site-text: #3D3029;
  --site-muted: #6E5E52;
  --site-link: #A85A26;   /* 白・クリーム背景でコントラスト比 4.5 以上 */
  --site-border: #E0D5CB;
}

html { scroll-padding-top: 64px; } /* 固定ヘッダーの下にページ内リンクの行き先が隠れないように */

/* ===== ヘッダー ===== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(255, 251, 247, 0.94);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(224, 213, 203, 0.6);
}
.site-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  max-width: 1040px;
  height: 56px;
  margin: 0 auto;
  padding: 0 20px;
}
.site-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--site-text);
  text-decoration: none;
  font-family: "Zen Kaku Gothic New LP", -apple-system, BlinkMacSystemFont, "Hiragino Sans",
    "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
}
.site-brand img { display: block; width: 30px; height: 30px; border-radius: 7px; }
.site-header nav { display: flex; gap: 16px; }
.site-header nav a {
  color: var(--site-muted);
  font-size: 14px;
  line-height: 1.8;
  text-decoration: none;
  white-space: nowrap;
}
.site-header nav a.site-contact { color: var(--site-link); font-weight: 700; }

/* ===== フッター ===== */
.site-footer {
  margin: 0;
  padding: 24px 20px 40px;
  border-top: 1px solid var(--site-border);
  color: var(--site-muted);
  font-size: 14px;
  line-height: 1.8;
  text-align: center;
}
.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 20px;
  max-width: 720px;
  margin: 0 auto;
}
.site-footer nav a { color: var(--site-link); white-space: nowrap; }
.site-footer .legal { max-width: 44em; margin: 14px auto 0; font-size: 11px; line-height: 1.7; }
.site-footer small { display: block; margin-top: 12px; font-size: 12px; }