/* バトサポ — 規約・案内ページ。アプリ本体とは別に、読み物として組みます。 */

:root {
  --bg: #eef1f5;
  --card: #ffffff;
  --ink: #1b2430;
  --ink-mid: #56616f;
  --ink-soft: #8a95a3;
  --line: #e3e8ef;
  --def: #2f6df6;
  --radius: 16px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Meiryo", system-ui, -apple-system, sans-serif;
  font-size: 15px;
  line-height: 1.85;
}

.page { max-width: 780px; margin: 0 auto; padding: 0 20px 60px; }

.pagehead {
  display: flex; align-items: center; gap: 12px;
  max-width: 780px; margin: 0 auto; padding: 18px 20px;
}
.pagehead a { color: var(--ink); text-decoration: none; font-weight: 700; display: flex; align-items: center; gap: 10px; }
.pagehead__mark {
  width: 26px; height: 26px; border-radius: 8px;
  background: linear-gradient(135deg, #2fbfa3 0 calc(50% - 1.2px), #ffffff calc(50% - 1.2px) calc(50% + 1.2px), #2f7d6f calc(50% + 1.2px));
}
.pagehead__rule { width: 1px; align-self: stretch; background: var(--line); }
.pagehead__title { color: var(--ink-mid); font-weight: 600; }

.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 28px 32px;
}
h1 { font-size: 24px; margin: 0 0 4px; }
h2 { font-size: 17px; margin: 32px 0 8px; padding-top: 8px; border-top: 1px solid var(--line); }
h2:first-of-type { border-top: 0; padding-top: 0; }
p, li { color: var(--ink-mid); }
p { margin: 8px 0; }
ul, ol { margin: 8px 0; padding-left: 1.4em; }
li { margin: 4px 0; }
a { color: var(--def); }
code {
  background: #f1f4f8; border-radius: 4px; padding: 1px 5px;
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; font-size: .92em;
}
.updated { color: var(--ink-soft); font-size: 13px; margin: 0 0 20px; }
table { border-collapse: collapse; width: 100%; margin: 12px 0; font-size: 14px; }
th, td { border: 1px solid var(--line); padding: 8px 10px; text-align: left; vertical-align: top; }
th { background: #f4f7fb; font-size: 13px; color: var(--ink-mid); }

.pagefoot {
  max-width: 780px; margin: 0 auto; padding: 24px 20px 0;
  display: flex; gap: 16px; flex-wrap: wrap;
}
.pagefoot a { color: var(--ink-mid); text-decoration: none; font-size: 13px; font-weight: 600; }
.pagefoot a:hover { color: var(--def); text-decoration: underline; }