@charset "UTF-8";

/* ユーティリティ属性用CSS */

[data-font-size="xxl"] {
    font-size: var(--font-size--xxl);
}

[data-font-size="xl"] {
    font-size: var(--font-size--xl);
}

[data-font-size="l"] {
    font-size: var(--font-size--l);
}

[data-font-size="m"] {
    font-size: var(--font-size--m);
}

[data-font-size="s"] {
    font-size: var(--font-size--s);
}

[data-font-size="xs"] {
    font-size: var(--font-size--xs);
}

[data-weight="normal"] {
    font-weight: var(--font-weight);
}

[data-weight="bold"] {
    font-weight: var(--font-weight--bold);
}

[data-color="base"] {
    color: var(--color);
}

[data-color="caution"] {
    color: var(--caution-color);
}

:is([data-text-align="left"], [data-text-align--sp="left"]) {
    text-align: left;
}

:is([data-text-align="center"], [data-text-align--sp="center"]) {
    text-align: center;
}

:is([data-text-align="right"], [data-text-align--sp="right"]) {
    text-align: right;
}

[data-white-space="nowrap"] {
    white-space: nowrap;
}

[data-decoration="underline"] {
    text-decoration: underline;
    text-decoration-thickness: 0.05em;
    text-underline-offset: 0.2em;
}

[data-visible="false"] {
    display: none;
}

[data-icn="exclamation"]::before {
    display: inline-grid;
    place-content: center;
    width: 1.5em;
    height: 1.5em;
    margin-right: var(--margin--lv5);
    padding: var(--padding--lv3);
    border-radius: 50%;
    background-color: var(--caution-color);
    content: "!";
    color: #fff;
    font-size: 0.8em;
    letter-spacing: 0;
    vertical-align: 0.1rem;
}

@media screen and (min-width: 768px),
print {
    [data-text-align--pc="left"] {
        text-align: left;
    }

    [data-text-align--pc="center"] {
        text-align: center;
    }

    [data-text-align--pc="right"] {
        text-align: right;
    }

    [data-align-self="end"] {
        align-self: end;
    }
}