/*
 * 入口ページの見た目。値は下の階段だけを使う（ui-foundation）。
 *   中立色: ink 見出し / body 本文 / sub 補足 / surface 面 / ground 地
 *   主色: accent（押せる・実行する）  リンク: link（別画面へ移動する）
 *   文字: 32 / 20 / 16 / 14    余白: 8 の倍数    角丸: 8（操作要素）/ 16（面）
 */
:root {
  --ink: #1a1d21;
  --body: #3a4048;
  --sub: #5b6470;
  --surface: #f4f5f7;
  --ground: #ffffff;
  --accent: #0f766e;
  --accent-hover: #115e59;
  --link: #2563eb;
  --link-hover: #1d4ed8;
  --radius-control: 8px;
  --radius-surface: 16px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--body);
  font-family: "Hiragino Sans", "Yu Gothic UI", "Meiryo", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.8;
}

main, header, footer { max-width: 720px; margin: 0 auto; padding-left: 16px; padding-right: 16px; }
header { padding-top: 48px; }
main { padding-top: 32px; padding-bottom: 48px; }
footer { padding-top: 32px; padding-bottom: 48px; color: var(--sub); font-size: 14px; }

h1 { margin: 0 0 16px; color: var(--ink); font-size: 32px; font-weight: 700; line-height: 1.4; }
h2 { margin: 48px 0 16px; color: var(--ink); font-size: 20px; font-weight: 700; line-height: 1.5; }
p { margin: 0 0 16px; }
.sub { color: var(--sub); font-size: 14px; }

a { color: var(--link); }
a:hover { color: var(--link-hover); }
a:focus-visible, .button:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.app { padding: 24px; background: var(--surface); border-radius: var(--radius-surface); }
.app h3 { margin: 0 0 8px; color: var(--ink); font-size: 20px; font-weight: 700; line-height: 1.5; }
.app ul { margin: 0 0 24px; padding-left: 24px; }

.button {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 24px;
  background: var(--accent);
  color: #ffffff;
  border-radius: var(--radius-control);
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
}
.button:hover { background: var(--accent-hover); color: #ffffff; }

footer nav { display: flex; gap: 24px; flex-wrap: wrap; }