/* ページのヘッダー（Jishu のロゴ）と、Syrentre へのボタン・フッター。
   フッターは syrentre.fyi の css/style.css から必要な分だけ移したもの。デモ（style.css）とぶつからないよう、
   クラス名は sy- / jishu- / by- で始め、色はデモの変数（--ink / --sub / --rule / --desk / --bg / --brand）を使ってダークモードにも合わせる */
.site-header,.site-footer{--sy-accent:#2e7d32;font-family:"Inter","Noto Sans JP",var(--font);line-height:1.75}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .site-header,:root:not([data-theme="light"]) .site-footer{--sy-accent:#7BC47F}}
:root[data-theme="dark"] .site-header,:root[data-theme="dark"] .site-footer{--sy-accent:#7BC47F}
.site-header a,.site-footer a{color:inherit;text-decoration:none;transition:color .15s}
.site-header a:hover,.site-footer a:hover{color:var(--sy-accent)}
.sy-wrap{max-width:1100px;margin:0 auto}

/* ヘッダー：画面の端までの帯にして、中身はデモと同じ幅にそろえる */
.site-header{position:sticky;top:0;z-index:100;
  margin-left:calc(-1 * max(16px,env(safe-area-inset-left,0px)));margin-right:calc(-1 * max(16px,env(safe-area-inset-right,0px)));
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));
  background:color-mix(in srgb,var(--desk) 85%,transparent);-webkit-backdrop-filter:saturate(180%) blur(12px);backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid transparent;transition:border-color .2s}
.site-header.is-scrolled{border-bottom-color:var(--rule)}
.site-header .sy-wrap{display:flex;align-items:center;gap:24px;height:72px}
#demo{scroll-margin-top:80px}

/* Jishu のロゴ（ピン＋ピクセル文字）。青はデモの --brand、本は白、ji は文字の色 */
.jishu-logo{display:block;color:var(--ink)}
.jishu-mark{display:block;width:auto;height:40px}
.jm-b{fill:var(--brand)}
.jm-w{fill:#fff}
.jm-i{fill:currentColor}

/* 一番下：Syrentre のホームページへ */
.by-syrentre{margin-top:72px;text-align:center}
.by-syrentre p{margin:0 auto 16px;max-width:34em;font-size:14px;color:var(--sub)}
.by-btn{display:inline-flex;align-items:center;gap:6px;padding:12px 20px;border:1px solid var(--ink);border-radius:12px;color:var(--ink);font-weight:600;text-decoration:none}
.by-btn:hover{background:var(--ink);color:var(--bg)}
.by-btn svg{width:18px;height:18px}

/* フッター */
.site-footer{margin-top:48px;border-top:1px solid var(--rule);font-size:14px}
.sy-foot-top{display:flex;flex-direction:column;gap:36px;padding:48px 0 40px}
.sy-logo{display:block;color:var(--ink)}
.sy-foot-top .sy-logo svg{display:block;width:auto;height:32px}
.sy-cols{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:48px}
.sy-cols h4{margin:0 0 12px;font-family:"JetBrains Mono",ui-monospace,monospace;font-weight:400;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--sub)}
.sy-cols a{display:block;color:var(--ink);line-height:2}
.sy-bottom{display:flex;justify-content:space-between;gap:16px;padding:20px 0 40px;border-top:1px solid var(--rule);font-size:13px;color:var(--sub)}

@media (max-width:840px){
  /* スマホではデモが画面いっぱいなので、ヘッダーは上に固定しない */
  .site-header{position:relative}
  .site-header .sy-wrap{height:64px}
  .jishu-mark{height:34px}
  #demo{scroll-margin-top:0}
  .sy-foot-top{gap:32px;padding-top:40px}
  .sy-cols{grid-template-columns:1fr 1fr;gap:28px}
  .sy-cols>div:last-child{grid-column:1 / -1}
  .sy-bottom{flex-direction:column;gap:4px}
}