.TermsLinkBox {
    width: 100%;
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    border-radius: 10px;
    border: 1px solid #ccc;
    padding: 30px 20px;
    margin-bottom: 50px;
}

.TermsLinkBox .Button {
    padding: 10px 20px;
    font-size: 15px;
    color: #fff;
    border: 1px solid;
    background-color: #334bb5;
    border-radius: 5px;
    width: fit-content;
    margin: auto;
    cursor: pointer;
    display: block;
    text-decoration: none;
}

.TermsContainer {
    padding: 30px 0px;
}

.TermsContainer p {
    margin: 0;
    margin-bottom: 10px;
}

.TermsContainer .Title {
    text-align: center;
    font-weight: bold;
    font-size: 20px;
    margin-bottom: 30px;
}

.TermsContainer .SubText {
    text-align: right;
}

/* 番号の幅に関係なくテキストのインデントを揃わせる */
.TermsContainer .Article > li,
.TermsContainer .Paragraph > li {
    display: grid;
    grid-template-columns: max-content 1fr;
}

/* 条 */
.TermsContainer .Article {
    list-style: none;
    counter-reset: ArticleCounter;
    padding: 0;
    line-height: 1.7;
}
.TermsContainer .Article > li {
    font-size: 18px;
    margin-top: 15px;
    margin-bottom: 5px;
}
.TermsContainer .Article > li::before{
    content: "第" counter(ArticleCounter) "条";
    counter-increment: ArticleCounter;
    margin-right: 5px;
}
.TermsContainer .Article p {
    padding-inline-start: 40px;
}

/* 項 */
.TermsContainer .Paragraph {
    list-style: none;
    counter-reset: ParagraphCounter;
}
.TermsContainer .Paragraph > li::before{
    content: counter(ParagraphCounter) ".";
    counter-increment: ParagraphCounter;
    font-weight: normal;
    width: 30px;
}

/* 号 */
.TermsContainer .Paragraph > .SubParagraph {
    list-style: lower-alpha;
    padding-left: 50px;
}
.TermsContainer .Paragraph > .SubParagraph li {
    padding-left: 10px;
}

/* 目 */
.TermsContainer .Paragraph > .SubParagraph > .SubParagraph {
    list-style: lower-roman;
}
.TermsContainer .Paragraph > .SubParagraph > .SubParagraph li {
    padding-left: 10px;
}