:root {
  color: #17201d;
  background: #f7f9f8;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  line-height: 1.75;
}

header {
  border-bottom: 1px solid #dce3e0;
  background: #fff;
}

.header-inner,
main,
footer {
  width: min(100% - 32px, 760px);
  margin: 0 auto;
}

.header-inner { padding: 28px 0 22px; }

h1 {
  margin: 0 0 6px;
  font-size: 28px;
  line-height: 1.3;
  letter-spacing: 0;
}

.meta {
  margin: 0;
  color: #5a6762;
  font-size: 14px;
}

main {
  padding: 30px 0 42px;
  background: #fff;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to right, #f7f9f8 0, #f7f9f8 calc(50% - 380px),
    #fff calc(50% - 380px), #fff calc(50% + 380px), #f7f9f8 calc(50% + 380px));
}

section + section { margin-top: 30px; }
h2 { margin: 0 0 10px; font-size: 19px; line-height: 1.45; letter-spacing: 0; }
h3 { margin: 18px 0 8px; font-size: 16px; letter-spacing: 0; }
p { margin: 8px 0; }
ul { margin: 8px 0; padding-left: 1.35em; }
li + li { margin-top: 6px; }
a { color: #087a61; }

footer {
  padding: 20px 0 32px;
  border-top: 1px solid #dce3e0;
  color: #5a6762;
  font-size: 13px;
}

@media (max-width: 600px) {
  .header-inner,
  main,
  footer { width: min(100% - 28px, 760px); }
  .header-inner { padding-top: 22px; }
  main { padding-top: 24px; }
  h1 { font-size: 24px; }
  h2 { font-size: 18px; }
  body::before { background: #fff; }
}