:root {
  --text: #37352f;
  --muted: #787774;
  --line: rgba(55, 53, 47, 0.16);
  --callout: #f1f1ef;
  --hl: #fbf3db;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: #fff;
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", Meiryo, sans-serif;
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
.page { max-width: 708px; margin: 0 auto; padding: 64px 24px 120px; }
.icon { font-size: 68px; line-height: 1.1; margin: 0 0 6px; }
h1 { font-size: 30px; line-height: 1.35; font-weight: 700; margin: 0 0 20px; }
h2 { font-size: 21px; line-height: 1.35; font-weight: 600; margin: 34px 0 6px; }
p { margin: 0; padding: 3px 0; }
strong { font-weight: 700; }
mark { background: var(--hl); color: inherit; padding: 0 2px; border-radius: 2px; }
ul { margin: 0; padding-left: 1.6em; }
li { padding: 3px 0; }
hr { border: 0; border-top: 1px solid var(--line); margin: 20px 0; }
.callout {
  display: flex; gap: 12px; align-items: flex-start;
  background: var(--callout); border-radius: 4px;
  padding: 14px 16px 14px 14px; margin: 10px 0;
}
.callout .e { font-size: 20px; line-height: 1.6; flex: none; }
.callout .c { flex: 1; min-width: 0; }
.muted { color: var(--muted); font-size: 14px; }
@media (max-width: 480px) {
  .page { padding: 40px 20px 96px; }
  .icon { font-size: 56px; }
  h1 { font-size: 26px; }
  h2 { font-size: 19px; }
}