/* ---------------------------------------------
* terms
--------------------------------------------- */
.page-terms p {
    margin-top: 16px;
    line-height: 1.75;
}

.link {
    text-decoration: underline;
    color: var(--color-blue-1);
}


/* p-heading-terms
-------------------------------------*/
.p-heading-terms--Lv1 {
    margin-bottom: 32px;
    font-size: 32px;
    font-weight: 400;
    columns: #657279;
}

.p-heading-terms--Lv2 {
    margin-bottom: 24px;
    font-size: 24px;
    font-weight: 500;
    columns: #0C1011;
}

.p-heading-terms--Lv3 {
    margin-bottom: 24px;
    font-size: 20px;
    font-weight: 500;
    color: #0C1011;
}

/* p-terms-article
-------------------------------------*/
.p-terms-article {
    margin-top: 60px;
    padding: 0 32px;
}
@media screen and (max-width: 768px) {
    .p-terms-article {
        margin-top: 32px;
        padding: 0 16px;
    }
}

/* p-terms-chapter
-------------------------------------*/
.p-terms-chapter {}
.p-terms-chapter + .p-terms-chapter {
    margin-top: 80px;
}

/* p-terms-clause
-------------------------------------*/
.p-terms-clause {}
.p-terms-clause + .p-terms-clause {
    margin-top: 48px;
}

/* p-terms-indent
-------------------------------------*/
.p-terms-indent {
    margin-top: 16px;
    padding-left: 24px;
}

/* p-terms-footer
-------------------------------------*/
.p-terms-footer {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin-top: 48px;
    gap: 8px;
}
.p-terms-clause > li{
    margin-top: 8px;
    font-size: 16px;
}


/* ---------------------------------------------
* list
--------------------------------------------- */
/* p-terms-list(defalt)
-------------------------------------*/
.p-terms-list {
    display: flex;
    flex-direction: column;
    justify-content: stretch;
    gap: 12px;

    margin: 24px 0;
}
ol .p-terms-list,
ul .p-terms-list {
    margin: 12px 0;
}
.p-terms-list > li {
    padding-left: 24px;
    position: relative;
    line-height: 1.75;
}
.p-terms-list > li::before {
    position: absolute;
    top: 0;
    left: 0;

    content: "・";
}

/* p-terms-list--number
-------------------------------------*/
.p-terms-list--number {
    counter-reset: count;
}
.p-terms-list--number > li::before {
    content: counter(count) ".";
    counter-increment: count;
}

/* p-terms-list--circle
-------------------------------------*/
.p-terms-list--circle {
    counter-reset: count-circle;
}
.p-terms-list--circle > li::before {
    content: counter(count-circle, circled);
    counter-increment: count-circle;
}
@counter-style circled {
    system: fixed;
    symbols: "①" "②" "③" "④" "⑤" "⑥" "⑦" "⑧" "⑨" "⑩" "⑪" "⑫" "⑬""⑭""⑮""⑯""⑰""⑱""⑲""⑳";
    suffix: " ";
}
/* macのSafariのみ丸数字が消えるのでSafariだけ別の別のCSSを書きました。 */
::-webkit-full-page-media,:future,:root .p-terms-wrap__list.p-terms-wrap__list--circle > li::before {
    content: counter(count-circle);
    counter-increment: count-circle;
    border: 1px solid;
    border-radius: 50%;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 17px;
    width: 17px;
    font-size: 11px;
    letter-spacing: -0.5px;
    top: 5px;
}

/* p-terms-list--brackets
-------------------------------------*/
.p-terms-list--brackets {
    counter-reset: count-brackets;
}
.p-terms-list--brackets > li::before {
    content: counter(count-brackets, brackets);
    counter-increment: count-brackets;
}
@counter-style brackets {
    system: fixed;
    symbols: "(1)" "(2)" "(3)" "(4)" "(5)" "(6)" "(7)" "(8)" "(9)" "(10)" "(11)" "(12)" "(13)""(14)""(15)""(16)""(17)""(18)""(19)""(20)";
    suffix: " ";
}

/* p-terms-list--text
-------------------------------------*/
.p-terms-list--text {
    counter-reset: count-text;
}
.p-terms-list--text > li::before {
    content: counter(count-text, text);
    counter-increment: count-text;
}
.p-terms-list--text > li {
    padding-left: 48px
}
@counter-style text {
    system: fixed;
    symbols: "（ア）" "（イ）" "（ウ）" "（エ）" "（オ）" "（カ）" "（キ）";
    suffix: " ";
}
