/* i10y.com 全体で共通の「上下の帯」（2026-10-20）。
   置き場所の正本は i10y-sites/shared/i10y.css。https://i10y.com/shared/i10y.css で配る（top の Worker が上げるときに写す）。
   各アプリのページは <link rel="stylesheet" href="https://i10y.com/shared/i10y.css"> を読み込み、
   shared/README.md の HTML を <body> の先頭と末尾に置く。
   アプリ側の CSS とぶつからないよう、クラス名と変数名は必ず i10y- で始める。外部のフォントは読み込まない */
:root{
  --i10y-ink:#1d2330;
  --i10y-muted:#5e6573;
  --i10y-line:#e4e6eb;
  --i10y-soft:#f5f6f8;
  --i10y-accent:#3454c4;
  --i10y-font:system-ui,-apple-system,"Segoe UI","Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic UI","Meiryo",sans-serif;
}

/* 上の帯: 細い 1 行。左に i10.y のロゴ（総合ページへ戻る）、右にアプリ一覧と問い合わせ */
.i10y-bar{background:var(--i10y-soft);border-bottom:1px solid var(--i10y-line);font:500 13px/1 var(--i10y-font);color:var(--i10y-muted)}
.i10y-bar-in{max-width:1200px;margin-inline:auto;padding:0 16px;height:36px;display:flex;align-items:center;gap:16px}
.i10y-bar a{color:inherit;text-decoration:none}
.i10y-bar a:hover{color:var(--i10y-ink)}
.i10y-bar-nav{margin-left:auto;display:flex;gap:16px;align-items:center}

/* ロゴ: 「i10.y」の文字だけ。点をアクセントの色にする */
.i10y-logo{font:800 15px/1 var(--i10y-font);letter-spacing:.01em;color:var(--i10y-ink)!important;white-space:nowrap}
.i10y-logo b{color:var(--i10y-accent);font-weight:800}

/* 下の帯: 作り手・プライバシーポリシー・問い合わせ */
.i10y-footer{background:var(--i10y-soft);border-top:1px solid var(--i10y-line);color:var(--i10y-muted);font:400 13px/1.7 var(--i10y-font)}
.i10y-footer-in{max-width:1200px;margin-inline:auto;padding:20px 16px;display:flex;flex-wrap:wrap;gap:8px 24px;align-items:center}
.i10y-footer a{color:inherit;text-decoration:none}
.i10y-footer a:hover{color:var(--i10y-ink);text-decoration:underline}
.i10y-footer-links{display:flex;flex-wrap:wrap;gap:8px 20px;margin-left:auto}

@media (max-width:480px){
  .i10y-bar-nav{gap:12px}
  .i10y-footer-links{margin-left:0}
}