@import url(common.css);

.document {
  background-color: var(--bg-c);
  line-height: 1.6;
  padding: max(5vw, 50px) 5vw max(8vw, 80px);
}
.document .inner {
  background-color: #fff;
  border-radius: 3em;
  padding: 5vw;
}
.document h2 {
  font-size: 1.5em;
  font-weight: bold;
  margin-bottom: max(3vw, 20px);
  text-align: center;
}
.lv1 {
  padding-block: 1em;
  counter-reset: count 0;
}
.lv1 > li {
  padding-block: 0.8em;
  counter-increment: count 1;
}
.lv1 h3 {
  font-weight: 500;
  font-size: 1.1em;
  margin-bottom: 0.4em;
  display: flex;
  gap: 0.6em;
}
.lv1 h3::before {
  content: counter(count) ".";
}
.lv2 {
  counter-reset: count 0;
  margin: 1em 0 0 1em;
}
.lv2 li {
  counter-increment: count 1;
  margin-top: 0.2em;
  position: relative;
  padding-left: 2em;
}
.lv2 li::before {
  position: absolute;
  content: counter(count) " )";
  inset: 0 auto auto 0;
}
.row {
  display: flex;
}
dl {
  padding: 1em;
}
dt {
  font-weight: normal;
  width: 4em;
}
dd::before {
  content: "：";
}
footer {
  margin-top: min(-3vw, -30px);
}

@media (max-width: 767px) {
  section.kv {
    background-size: 70%;
  }
  .document {
    font-size: 0.9em;
  }
  .document .inner {
    border-radius: 2em;
  }
  section.document h2 {
    font-size: 1.2em;
    letter-spacing: normal;
    margin-top: 1em;
  }
  .row {
    flex-direction: column;
  }
  .row ~ .row {
    margin-top: 0.4em;
  }
  dl {
    padding: 0;
    margin-top: 1em;
  }
  dd::before {
    display: none;
  }
}