@import url(lower.css);

.document {
  padding: max(5vw, 50px) 5vw;
  width: min(100%, 900px);
  margin-inline: auto;
  h2 {
    text-align: center;
    font-size: max(1.8vw, 1.3em);
    font-weight: normal;
    margin-bottom: 1.4em;
  }
  .lead {
    line-height: 1.6;
  }
  .main {
    margin-top: 2em;
    line-height: 1.6;
    counter-reset: num 0;
    > li {
      counter-increment: num 1;
      & ~ li {
        margin-top: 2em;
      }
    }
  }
  h3 {
    font-size: max(1.4vw, 1.1em);
    font-weight: 500;
    border-bottom: 1px solid;
    padding-bottom: 0.2em;
    margin-bottom: 1em;
    display: flex;
    gap: 0.4em;
    &::before {
      content: counter(num) ".";
    }
  }
  .sub,
  dl {
    margin-top: 1em;
  }
  .sub {
    counter-reset: num-sub 0;
    > li {
      counter-increment: num-sub 1;
    }
    li {
      position: relative;
      padding-left: 1.4em;
      display: flex;
      &::before {
        content: counter(num-sub) "）";
        width: 1.8em;
      }
    }
  }
  .column {
    display: flex;
  }
  dt {
    width: 8em;
    font-weight: normal;
  }
  dd {
    flex: 1;
    padding-left: 0.8em;
    display: flex;
    gap: 0.6em;
    &::before {
      content: ":";
    }
    span {
      display: inline-block;
    }
  }
}

@media (width < 768px) {
  .document {
    .sub li {
      padding-left: 0;
    }
    dt {
      font-weight: 500;
    }
    dd {
      display: block;
      padding: 0;
      word-break: keep-all;
      &::before {
        display: none;
      }
    }
  }
}