@layer components {
    .list {
        padding-left: 1em;
        --list-color: var(--semantic-primary-text);
    }

    .list-item {
        color: var(--list-color);
    }

    /* Dot: .list-item を持つ要素の marker にのみ「・」を表示 */
    .list-dot .list-item::marker {
        content: "・";
    }

    /* Asterisk */
    .list-asterisk .list-item {
        padding-left: 2px;
    }
    /* .list-item を持つ要素の marker にのみ「※」を表示 */
    .list-asterisk .list-item::marker {
        content: "※";
    }

    /* Asterisk Colors */
    .list-caption {
        --list-color: var(--semantic-caption);
    }
    .list-caution {
        --list-color: var(--semantic-error);
    }

    /* Number */
    .list-number {
        counter-reset: num;
    }
    /* カウントアップは .list-item を持っている要素（実際の項目）だけに限定 */
    .list-number .list-item {
        counter-increment: num;
    }
    /* クラス名 .list-item を持つ要素の marker にのみ数値を表示 */
    .list-number .list-item::marker {
        content: counter(num) ".";
    }
}