ntcri/src/components/TermsList.vue

<script setup>
import { useI18n } from "vue-i18n";

const { t } = useI18n();
</script>

<template>
  <ul>
    <li>
      <h4>{{ t("terms.list.title_1") }}</h4>
      <p>{{ t("terms.list.content_1") }}</p>
    </li>
    <li>
      <h4>{{ t("terms.list.title_2") }}</h4>
      <ul>
        <li>{{ t("terms.list.content_2_1") }}</li>
        <li>{{ t("terms.list.content_2_2") }}</li>
        <li>{{ t("terms.list.content_2_3") }}</li>
      </ul>
    </li>
    <li>
      <h4>{{ t("terms.list.title_3") }}</h4>
      <p>{{ t("terms.list.content_3") }}</p>
      <ul>
        <li>{{ t("terms.list.content_3_1") }}</li>
        <li>{{ t("terms.list.content_3_2") }}</li>
        <li>{{ t("terms.list.content_3_3") }}</li>
        <li>{{ t("terms.list.content_3_4") }}</li>
        <li>{{ t("terms.list.content_3_5") }}</li>
        <li>{{ t("terms.list.content_3_6") }}</li>
        <li>{{ t("terms.list.content_3_7") }}</li>
        <li>{{ t("terms.list.content_3_8") }}</li>
        <li>{{ t("terms.list.content_3_9") }}</li>
        <li>{{ t("terms.list.content_3_10") }}</li>
        <li>{{ t("terms.list.content_3_11") }}</li>
        <li>{{ t("terms.list.content_3_12") }}</li>
        <li>{{ t("terms.list.content_3_13") }}</li>
        <li>{{ t("terms.list.content_3_14") }}</li>
      </ul>
    </li>
    <li>
      <h4>{{ t("terms.list.title_4") }}</h4>
      <ul>
        <li>{{ t("terms.list.content_4_1") }}</li>
        <li>{{ t("terms.list.content_4_2") }}</li>
      </ul>
    </li>
    <li>
      <h4>{{ t("terms.list.title_5") }}</h4>
      <ul>
        <li>{{ t("terms.list.content_5_1") }}</li>
        <li>{{ t("terms.list.content_5_2") }}</li>
        <ul>
          <li>{{ t("terms.list.content_5_2_1") }}</li>
          <li>{{ t("terms.list.content_5_2_2") }}</li>
          <li>{{ t("terms.list.content_5_2_3") }}</li>
          <li>
            {{ t("terms.list.content_5_2_4") }}
            <ul>
              <li>{{ t("terms.list.content_5_2_4_1") }}</li>
              <li>{{ t("terms.list.content_5_2_4_2") }}</li>
            </ul>
          </li>
          <li>
            <h4>{{ t("terms.list.title_6") }}</h4>
            <ul>
              <li>{{ t("terms.list.content_6_1") }}</li>
              <li>{{ t("terms.list.content_6_2") }}</li>
              <li>{{ t("terms.list.content_6_3") }}</li>
            </ul>
          </li>
          <li>
            <h4>{{ t("terms.list.title_7") }}</h4>
            <ul>
              <li>{{ t("terms.list.content_7_1") }}</li>
              <li>{{ t("terms.list.content_7_2") }}</li>
              <li>{{ t("terms.list.content_7_3") }}</li>
              <li>{{ t("terms.list.content_7_4") }}</li>
            </ul>
          </li>
          <li>
            <h4>{{ t("terms.list.title_8") }}</h4>
            <ul>
              <li>{{ t("terms.list.content_8_1") }}</li>
              <li>{{ t("terms.list.content_8_2") }}</li>
            </ul>
          </li>
        </ul>
      </ul>
    </li>
  </ul>
</template>

<style lang="scss" scoped>
p,
li {
  text-indent: 2em; // 縮排
}
h4 {
  margin: 20px 0;
  font-size: 18px;
  font-weight: 500;
}
li {
  margin: 10px 0;
  line-height: 30px;
  letter-spacing: 1px;
}
</style>