:root { color-scheme: light dark; }
* { box-sizing: border-box; }
body {
  margin: 0; padding: 3rem 1.25rem 6rem;
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", system-ui, sans-serif;
  line-height: 1.9; color: #23201c; background: #faf7f2;
  -webkit-text-size-adjust: 100%;
}
.wrap { max-width: 42rem; margin: 0 auto; }
a { color: #1b4d7a; }
h1 { font-size: 1.5rem; margin: 0 0 .4rem; line-height: 1.5; }
h2 { font-size: 1.05rem; margin: 2.2rem 0 .6rem; padding-top: .8rem; border-top: 1px solid #e2dbd0; }
h3 { font-size: .98rem; margin: 1.4rem 0 .4rem; }
p, li { font-size: .96rem; }
.sub { color: #6d655a; font-size: .88rem; margin: 0 0 1.6rem; }
.back { display: inline-block; margin-bottom: 1.4rem; font-size: .9rem; }
.note {
  background: #fff8e8; border: 1px solid #e6d9b8; border-radius: 10px;
  padding: .9rem 1.1rem; margin: 1.4rem 0; font-size: .9rem; color: #5a4c30;
}
.card {
  display: block; padding: 1rem 1.1rem; margin: 0 0 .8rem;
  background: #fff; border: 1px solid #e2dbd0; border-radius: 10px;
  text-decoration: none; color: inherit;
}
.card:hover { border-color: #c9bfae; background: #fffdf9; }
.card b { display: block; font-size: 1.02rem; margin-bottom: .2rem; color: #1b4d7a; }
.card span { color: #6d655a; font-size: .88rem; }
table { width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: .94rem; }
th, td { border: 1px solid #e2dbd0; padding: .6rem .7rem; text-align: left; vertical-align: top; }
th { width: 34%; background: #f4efe6; font-weight: 600; }
.fill { background: #ffe9e0; border-radius: 4px; padding: 0 .3em; font-weight: 600; color: #9a3b12; }
.rec { background: #eaf4ea; border: 1px solid #cfe3cf; border-radius: 10px; padding: .9rem 1.1rem; margin: 1.2rem 0; font-size: .94rem; }
ul, ol { padding-left: 1.4rem; }
li { margin: .25rem 0; }
footer { margin-top: 3rem; padding-top: 1rem; border-top: 1px solid #e2dbd0; color: #6d655a; font-size: .85rem; }
@media (prefers-color-scheme: dark) {
  body { color: #e7e2d9; background: #1c1a17; }
  a, .card b { color: #8fc0e8; }
  h2, footer { border-color: #383430; }
  .card { background: #24211d; border-color: #383430; }
  .card:hover { background: #2a2723; border-color: #4a443c; }
  .sub, .card span, footer { color: #a29a8e; }
  .note { background: #2a2418; border-color: #4a4030; color: #ded2b4; }
  .rec { background: #1f2a1f; border-color: #35452f; }
  th, td { border-color: #383430; }
  th { background: #262320; }
  .fill { background: #4a2a1c; color: #ffbf9c; }
}