tetraminion.org は同人小説サイトです。糸冬いずくが二次創作や夢創作をしています。

<style>
    h1,
    h2,
    h3,
    h4,
    p {
        --tetraminion-org-typescale__font: var(--tetraminion-org-typescale-headline-medium__font);
        --tetraminion-org-typescale__font--proportional-width: var(--tetraminion-org-typescale-headline-medium__font--proportional-width);
        --tetraminion-org-typescale__scale: var(--tetraminion-org-typescale-headline-medium__scale);
        --tetraminion-org-typescale__tracking: var(--tetraminion-org-typescale-headline-medium__tracking);
        --tetraminion-org-typescale__weight: var(--tetraminion-org-typescale-headline-medium__weight);
        display: flex;
        font: var(--tetraminion-org-typescale);
        margin-block-end: var(--tetraminion-org-dialog__padding-between-title-and-body);
    }
        @media not print {
            h1,
            h2,
            h3,
            h4,
            p {
                margin-block-start: var(--tetraminion-org-dialog__padding-between-title-and-body);
                margin-inline: max(0px, var(--tetraminion-org-card__inline-padding) - var(--tetraminion-org-page__margin));
            }
        }
        h1, h2 {
            --tetraminion-org-typescale__font: var(--tetraminion-org-typescale-headline-medium__font);
            --tetraminion-org-typescale__font--proportional-width: var(--tetraminion-org-typescale-headline-medium__font--proportional-width);
            --tetraminion-org-typescale__scale: var(--tetraminion-org-typescale-headline-medium__scale);
            --tetraminion-org-typescale__tracking: var(--tetraminion-org-typescale-headline-medium__tracking);
            --tetraminion-org-typescale__weight: var(--tetraminion-org-typescale-headline-medium__weight);
        }
        h3 {
            --tetraminion-org-typescale__font: var(--tetraminion-org-typescale-title-medium__font);
            --tetraminion-org-typescale__font--proportional-width: var(--tetraminion-org-typescale-title-medium__font--proportional-width);
            --tetraminion-org-typescale__scale: var(--tetraminion-org-typescale-title-medium__scale);
            --tetraminion-org-typescale__tracking: var(--tetraminion-org-typescale-title-medium__tracking);
            --tetraminion-org-typescale__weight: var(--tetraminion-org-typescale-title-medium__weight);
        }
        h4 {
            --tetraminion-org-typescale__font: var(--tetraminion-org-typescale-label-medium__font);
            --tetraminion-org-typescale__font--proportional-width: var(--tetraminion-org-typescale-label-medium__font--proportional-width);
            --tetraminion-org-typescale__scale: var(--tetraminion-org-typescale-label-medium__scale);
            --tetraminion-org-typescale__tracking: var(--tetraminion-org-typescale-label-medium__tracking);
            --tetraminion-org-typescale__weight: var(--tetraminion-org-typescale-label-medium__weight);
        }
        p {
            --tetraminion-org-typescale__font: var(--tetraminion-org-typescale-body-medium__font);
            --tetraminion-org-typescale__font--proportional-width: var(--tetraminion-org-typescale-body-medium__font--proportional-width);
            --tetraminion-org-typescale__scale: var(--tetraminion-org-typescale-body-medium__scale);
            --tetraminion-org-typescale__tracking: var(--tetraminion-org-typescale-body-medium__tracking);
            --tetraminion-org-typescale__weight: var(--tetraminion-org-typescale-body-medium__weight);
        }
            .css-card__headline {
                --tetraminion-org-typescale__font: var(--tetraminion-org-list__headline-font);
                --tetraminion-org-typescale__scale: var(--tetraminion-org-list__headline-scale);
                --tetraminion-org-typescale__tracking: var(--tetraminion-org-list__headline-tracking);
                --tetraminion-org-typescale__weight: var(--tetraminion-org-list__headline-weight);
                display: flex;
                font: var(--tetraminion-org-typescale);
                grid-area: css-headline;
                margin: 0;
                margin-inline-start: var(--tetraminion-org-list__label-inline-start-padding);
                padding-block: calc(clamp(0px, var(--tetraminion-org-unit-dp) - (
                    var(--tetraminion-org-list__container-block-size)
                    - var(--tetraminion-org-list__container-block-size--1-line)
                ), var(--tetraminion-org-unit-dp))*4);
            }
    section {
        --tetraminion-org-elevation__level: 1;
        border: var(--tetraminion-org-card__outline);
        border-radius: var(--tetraminion-org-shape-large__size);
        contain: content;
        content-visibility: auto;
        display: flow-root;
        padding-inline: var(--tetraminion-org-page__margin);
        overflow: hidden;
    }
        @media not print {
            section {
                background: var(--tetraminion-org-color-surface-tint);
            }
        }
        section section {
            border-radius: var(--tetraminion-org-shape-medium__size);
        }
        * ~ section {
            margin-block-start: var(--tetraminion-org-page__margin);
        }
    section::before {
        content: "";
        display: block;
        margin-block-end: var(--tetraminion-org-page__margin);
    }
    section::after {
        content: "";
        display: block;
        margin-block-start: var(--tetraminion-org-page__margin);
    }
    .css-card-group {
        --tetraminion-org-line-length: var(--tetraminion-org-line-length-shorter-text--too-narrow);
        --tetraminion-org-list__container-block-size: var(--tetraminion-org-list__container-block-size--2-line);
        --tetraminion-org-typescale__font: var(--tetraminion-org-list__headline-font);
        --tetraminion-org-typescale__scale: var(--tetraminion-org-list__headline-scale);
        --tetraminion-org-typescale__tracking: var(--tetraminion-org-list__headline-tracking);
        --tetraminion-org-typescale__weight: var(--tetraminion-org-list__headline-weight);
        display: grid;
        font: var(--tetraminion-org-typescale);
        gap: var(--tetraminion-org-card__padding-between-cards);
        grid: auto-flow / repeat(auto-fill, minmax(min(
            100%,
            var(--tetraminion-org-card__outline-size)*2
            + var(--tetraminion-org-list__label-inline-start-padding)
            + var(--tetraminion-org-typescale__line-length)
            + var(--tetraminion-org-list__trailing-element-inline-start-padding)
            + var(--tetraminion-org-switch__track-inline-size)
            + var(--tetraminion-org-list__trailing-element-inline-end-padding)
        ), 1fr));
        margin-block: var(--tetraminion-org-dialog__padding-between-body-and-actions);
    }
        @media not print {
            .css-card-group {
                margin-inline: max(0px, var(--tetraminion-org-card__inline-padding) - var(--tetraminion-org-page__margin));
            }
        }
    .css-card {
        --tetraminion-org-color-background__tone: var(--tetraminion-org-color-accent-container__tone);
        --tetraminion-org-color-on-background__tone: var(--tetraminion-org-color-on-accent-container__tone);
        --backdrop-filter: var(--tetraminion-org-glassmorphism__surface-filter);
        background: var(--tetraminion-org-color-surface);
        border: var(--tetraminion-org-card__outline);
        border-radius: var(--tetraminion-org-card__shape-size);
        color: var(--tetraminion-org-color-on-background);
        display: grid;
        grid:
            "css-leading-element css-headline css-trailing-element" max-content
            "css-leading-element css-supporting-text css-trailing-element" max-content
            / max-content minmax(0, auto) max-content;
        overflow: hidden;
        padding-block: var(--tetraminion-org-target__spacing);
        padding-inline-end: var(--tetraminion-org-list__trailing-element-inline-end-padding);
        text-shadow: var(--tetraminion-org-glassmorphism__content-shadow);
    }
    .css-card__leading-icon {
        --tetraminion-org-typescale__line-scale: var(--tetraminion-org-typescale__scale);
        --tetraminion-org-typescale__scale: var(--tetraminion-org-icon__scale);
        font: var(--tetraminion-org-typescale);
        grid-area: css-leading-element;
        margin-block-end: auto;
        margin-inline-start: var(--tetraminion-org-list__leading-element-inline-start-padding);
        padding-block: calc(var(--tetraminion-org-unit-dp)*4);
    }
    .css-card__supporting-text {
        --tetraminion-org-color-on-background__tone: var(--tetraminion-org-list__supporting-text-color-tone);
        --tetraminion-org-typescale__font: var(--tetraminion-org-list__supporting-text-font);
        --tetraminion-org-typescale__scale: var(--tetraminion-org-list__supporting-text-scale);
        --tetraminion-org-typescale__tracking: var(--tetraminion-org-list__supporting-text-tracking);
        --tetraminion-org-typescale__weight: var(--tetraminion-org-list__supporting-text-weight);
        color: var(--tetraminion-org-color-on-background);
        display: flex;
        font: var(--tetraminion-org-typescale);
        grid-area: css-supporting-text;
        margin-inline-start: var(--tetraminion-org-list__label-inline-start-padding);
    }
    .css-text-button-group {
        --tetraminion-org-typescale__font: var(--tetraminion-org-common-button__label-text-font);
        --tetraminion-org-typescale__font--proportional-width: var(--tetraminion-org-common-button__label-text-font--proportional-width);
        --tetraminion-org-typescale__scale: var(--tetraminion-org-common-button__label-text-scale);
        --tetraminion-org-typescale__tracking: var(--tetraminion-org-common-button__label-text-tracking);
        --tetraminion-org-typescale__weight: var(--tetraminion-org-common-button__label-text-weight);
        break-inside: var(--tetraminion-org-common-button-group__break-inside);
        display: var(--tetraminion-org-common-button-group__display);
        flex-flow: var(--tetraminion-org-common-button-group__flex-flow);
        font: var(--tetraminion-org-typescale);
        gap: var(--tetraminion-org-link-group__button-gap);
        margin-block: var(--tetraminion-org-dialog__padding-between-body-and-actions);
        margin-inline: max(0px, var(--tetraminion-org-card__inline-padding) - var(--tetraminion-org-page__margin));
    }
    .css-text-button-group__item {
        display: flex;
    }
    dl {
        --tetraminion-org-typescale__font: var(--tetraminion-org-typescale-body-small__font);
        --tetraminion-org-typescale__font--proportional-width: var(--tetraminion-org-typescale-body-small__font--proportional-width);
        --tetraminion-org-typescale__scale: var(--tetraminion-org-typescale-body-small__scale);
        --tetraminion-org-typescale__tracking: var(--tetraminion-org-typescale-body-small__tracking);
        --tetraminion-org-typescale__weight: var(--tetraminion-org-typescale-body-small__weight);
        display: grid;
        font: var(--tetraminion-org-typescale);
        gap: var(--tetraminion-org-card__padding-between-cards);
        grid: auto-flow / repeat(auto-fill, minmax(min(100%, var(--tetraminion-org-unit-dp)*200), 1fr));
        margin-block: var(--tetraminion-org-dialog__padding-between-title-and-body);
        margin-inline: max(0px, var(--tetraminion-org-card__inline-padding) - var(--tetraminion-org-page__margin));
    }
    dt,
    dd {
        display: flex;
    }
    img {
        aspect-ratio: 200 / 40;
        border-radius: var(--tetraminion-org-shape-extra-small__size);
        inline-size: 100%;
        margin-block-end: calc(var(--tetraminion-org-unit-sp)*(16 - 12)/2);
        object-fit: cover;
        overflow: hidden;
    }
</style>
<div id="container">
    <h1><tetraminion-org-typescale-headline-medium
        component-label-text="tetraminion.org は同人小説サイトです"
    ></tetraminion-org-typescale-headline-medium></h1>
    <ul class="css-card-group">
        <li class="css-card">
            <tetraminion-org-icon class="css-card__leading-icon" aria-hidden="true" component-icon="star"></tetraminion-org-icon>
            <p class="css-card__headline"><tetraminion-org-typescale-body-large
                component-label-text="二次創作をしています"
            ></tetraminion-org-typescale-body-large></p>
            <small class="css-card__supporting-text"><tetraminion-org-typescale-body-medium
                component-label-text="非公式です。"
            ></tetraminion-org-typescale-body-medium></small>
        </li>
        <li class="css-card">
            <tetraminion-org-icon class="css-card__leading-icon" aria-hidden="true" component-icon="sentiment_neutral"></tetraminion-org-icon>
            <p class="css-card__headline"><tetraminion-org-typescale-body-large
                component-label-text="夢創作もしています"
            ></tetraminion-org-typescale-body-large></p>
            <small class="css-card__supporting-text"><tetraminion-org-typescale-body-medium
                component-label-text="夢主がいます。夢主は夢創作の主人公です。夢創作には夢主がいます。"
            ></tetraminion-org-typescale-body-medium></small>
        </li>
    </ul>
    <section>
        <h2><tetraminion-org-typescale-headline-medium component-label-text="できること"></tetraminion-org-typescale-headline-medium></h2>
        <ul class="css-card-group">
            <li class="css-card">
                <tetraminion-org-icon class="css-card__leading-icon" aria-hidden="true" component-icon="bookmark"></tetraminion-org-icon>
                <p class="css-card__headline"><tetraminion-org-typescale-body-large
                    component-label-text="目印をつけられます"
                ></tetraminion-org-typescale-body-large></p>
                <small class="css-card__supporting-text"><tetraminion-org-typescale-body-medium
                    component-label-text="しおり/低評価/高評価の3種類です。ブラウザに保存されます。"
                ></tetraminion-org-typescale-body-medium></small>
            </li>
            <li class="css-card">
                <tetraminion-org-icon class="css-card__leading-icon" aria-hidden="true" component-icon="wifi_off"></tetraminion-org-icon>
                <p class="css-card__headline"><tetraminion-org-typescale-body-large
                    component-label-text="オフラインでも動きます"
                ></tetraminion-org-typescale-body-large></p>
                <small class="css-card__supporting-text"><tetraminion-org-typescale-body-medium
                    component-label-text="閲覧に際してページをキャッシュします。ブラウザに保存されます。"
                ></tetraminion-org-typescale-body-medium></small>
            </li>
            <li class="css-card">
                <tetraminion-org-icon
                    class="css-card__leading-icon"
                    aria-hidden="true"
                    component-icon="install_desktop"
                ></tetraminion-org-icon>
                <p class="css-card__headline"><tetraminion-org-typescale-body-large
                    component-label-text="インストールできます"
                ></tetraminion-org-typescale-body-large></p>
                <small class="css-card__supporting-text"><tetraminion-org-typescale-body-medium
                    component-label-text="ウェブアプリです。ブラウザごとにインストールできます。"
                ></tetraminion-org-typescale-body-medium></small>
            </li>
            <li class="css-card">
                <tetraminion-org-icon
                    class="css-card__leading-icon"
                    aria-hidden="true"
                    component-icon="share"
                ></tetraminion-org-icon>
                <p class="css-card__headline"><tetraminion-org-typescale-body-large
                    component-label-text="共有できます"
                ></tetraminion-org-typescale-body-large></p>
                <small class="css-card__supporting-text"><tetraminion-org-typescale-body-medium
                    component-label-text="共有ボタンがあります。ブラウザによっては未対応ですが、URLの共有は自由です。"
                ></tetraminion-org-typescale-body-medium></small>
            </li>
        </ul>
    </section>
    <section>
        <h2><tetraminion-org-typescale-headline-medium
            component-label-text="前書きのこと"
        ></tetraminion-org-typescale-headline-medium></h2>
        <p><tetraminion-org-typescale-body-medium
            component-label-text="はじめに、注意書き、警告などを含むページがあります。"
        ></tetraminion-org-typescale-body-medium></p>
        <ul class="css-card-group">
            <li class="css-card">
                <tetraminion-org-icon class="css-card__leading-icon" aria-hidden="true" component-icon="arrow_upward"></tetraminion-org-icon>
                <p class="css-card__headline"><tetraminion-org-typescale-body-large
                    component-label-text="ページ上部に表示されます"
                ></tetraminion-org-typescale-body-large></p>
                <small class="css-card__supporting-text"><tetraminion-org-typescale-body-medium
                    component-label-text="前書きがないページもあります。"
                ></tetraminion-org-typescale-body-medium></small>
            </li>
            <li class="css-card">
                <tetraminion-org-icon class="css-card__leading-icon" aria-hidden="true" component-icon="hide"></tetraminion-org-icon>
                <p class="css-card__headline"><tetraminion-org-typescale-body-large
                    component-label-text="省略できます"
                ></tetraminion-org-typescale-body-large></p>
                <small class="css-card__supporting-text"><tetraminion-org-typescale-body-medium
                    component-label-text="適宜ご案内しています。"
                ></tetraminion-org-typescale-body-medium></small>
            </li>
        </ul>
        <section>
            <h3><tetraminion-org-typescale-title-medium
                component-label-text="あるかもしれない前書きの種類"
            ></tetraminion-org-typescale-title-medium></h3>
            <p><tetraminion-org-typescale-body-medium
                component-label-text="予告なく加筆修正されます。"
            ></tetraminion-org-typescale-body-medium></p>
            <ul
                class="css-card-group"
                style="--tetraminion-org-list__container-block-size: var(--tetraminion-org-list__container-block-size--1-line)"
            >
                <li class="css-card">
                    <tetraminion-org-icon class="css-card__leading-icon" aria-hidden="true" component-icon="shuffle"></tetraminion-org-icon>
                    <p class="css-card__headline"><tetraminion-org-typescale-body-large
                        component-label-text="クロスオーバー"
                    ></tetraminion-org-typescale-body-large></p>
                </li>
                <li class="css-card">
                    <tetraminion-org-icon class="css-card__leading-icon" aria-hidden="true" component-icon="egg_alt"></tetraminion-org-icon>
                    <p class="css-card__headline"><tetraminion-org-typescale-body-large
                        component-label-text="人の死"
                    ></tetraminion-org-typescale-body-large></p>
                </li>
                <li class="css-card">
                    <tetraminion-org-icon class="css-card__leading-icon" aria-hidden="true" component-icon="luggage"></tetraminion-org-icon>
                    <p class="css-card__headline"><tetraminion-org-typescale-body-large
                        component-label-text="異世界トリップ"
                    ></tetraminion-org-typescale-body-large></p>
                </li>
                <li class="css-card">
                    <tetraminion-org-icon
                        class="css-card__leading-icon"
                        aria-hidden="true"
                        component-icon="personal_injury"
                    ></tetraminion-org-icon>
                    <p class="css-card__headline"><tetraminion-org-typescale-body-large
                        component-label-text="主人公等の暴力被害"
                    ></tetraminion-org-typescale-body-large></p>
                </li>
                <li class="css-card">
                    <tetraminion-org-icon
                        class="css-card__leading-icon"
                        aria-hidden="true"
                        component-icon="king_bed"
                    ></tetraminion-org-icon>
                    <p class="css-card__headline"><tetraminion-org-typescale-body-large
                        component-label-text="主人公等の性行為"
                    ></tetraminion-org-typescale-body-large></p>
                </li>
                <li class="css-card">
                    <tetraminion-org-icon
                        class="css-card__leading-icon"
                        aria-hidden="true"
                        component-icon="sentiment_extremely_dissatisfied"
                    ></tetraminion-org-icon>
                    <p class="css-card__headline"><tetraminion-org-typescale-body-large
                        component-label-text="主人公等の犯罪行為"
                    ></tetraminion-org-typescale-body-large></p>
                </li>
                <li class="css-card">
                    <tetraminion-org-icon
                        class="css-card__leading-icon"
                        aria-hidden="true"
                        component-icon="swap_horiz"
                    ></tetraminion-org-icon>
                    <p class="css-card__headline"><tetraminion-org-typescale-body-large
                        component-label-text="性転換"
                    ></tetraminion-org-typescale-body-large></p>
                </li>
                <li class="css-card">
                    <tetraminion-org-icon
                        class="css-card__leading-icon"
                        aria-hidden="true"
                        component-icon="18_up_rating"
                    ></tetraminion-org-icon>
                    <p class="css-card__headline"><tetraminion-org-typescale-body-large
                        component-label-text="成人向け"
                    ></tetraminion-org-typescale-body-large></p>
                </li>
                <li class="css-card">
                    <tetraminion-org-icon
                        class="css-card__leading-icon"
                        aria-hidden="true"
                        component-icon="auto_awesome"
                    ></tetraminion-org-icon>
                    <p class="css-card__headline"><tetraminion-org-typescale-body-large
                        component-label-text="全能の存在"
                    ></tetraminion-org-typescale-body-large></p>
                </li>
                <li class="css-card">
                    <tetraminion-org-icon
                        class="css-card__leading-icon"
                        aria-hidden="true"
                        component-icon="egg"
                    ></tetraminion-org-icon>
                    <p class="css-card__headline"><tetraminion-org-typescale-body-large
                        component-label-text="転生"
                    ></tetraminion-org-typescale-body-large></p>
                </li>
                <li class="css-card">
                    <tetraminion-org-icon
                        class="css-card__leading-icon"
                        aria-hidden="true"
                        component-icon="supervisor_account"
                    ></tetraminion-org-icon>
                    <p class="css-card__headline"><tetraminion-org-typescale-body-large
                        component-label-text="憑依"
                    ></tetraminion-org-typescale-body-large></p>
                </li>
            </ul>
        </section>
    </section>
    <section>
        <h2><tetraminion-org-typescale-headline-medium
            component-label-text="糸冬いずくのこと"
        ></tetraminion-org-typescale-headline-medium></h2>
        <ul class="css-card-group">
            <li class="css-card">
                <tetraminion-org-icon class="css-card__leading-icon" aria-hidden="true" component-icon="person"></tetraminion-org-icon>
                <p class="css-card__headline"><tetraminion-org-typescale-body-large
                    component-label-text="個人です"
                ></tetraminion-org-typescale-body-large></p>
                <small class="css-card__supporting-text"><tetraminion-org-typescale-body-medium
                    component-label-text="@tetraminion が一人で運営しています。"
                ></tetraminion-org-typescale-body-medium></small>
            </li>
            <li class="css-card">
                <tetraminion-org-icon class="css-card__leading-icon" aria-hidden="true" component-icon="emoji_people"></tetraminion-org-icon>
                <p class="css-card__headline"><tetraminion-org-typescale-body-large
                    component-label-text="成人です"
                ></tetraminion-org-typescale-body-large></p>
                <small class="css-card__supporting-text"><tetraminion-org-typescale-body-medium
                    component-label-text="20世紀に生まれました。"
                ></tetraminion-org-typescale-body-medium></small>
            </li>
        </ul>
        <section>
            <h3><tetraminion-org-typescale-title-medium component-label-text="制作環境"></tetraminion-org-typescale-title-medium></h3>
            <p><tetraminion-org-typescale-body-medium
                component-label-text="おもにデスクトップで Windows と Firefox を使っています。"
            ></tetraminion-org-typescale-body-medium></p>
            <section>
                <h4><tetraminion-org-typescale-label-large component-label-text="OS"></tetraminion-org-typescale-label-large></h4>
                <p><tetraminion-org-typescale-body-medium
                    component-label-text="最新版の適用を心がけています。"
                ></tetraminion-org-typescale-body-medium></p>
                <ol class="css-text-button-group">
                    <li class="css-text-button-group__item"><tetraminion-org-text-button--link
                        component-icon="brands/windows"
                        component-label-text="Windows 11"
                        component-link="https://www.microsoft.com/windows"
                    ></tetraminion-org-text-button--link></li>
                    <li class="css-text-button-group__item"><tetraminion-org-text-button--link
                        component-icon="brands/android"
                        component-label-text="Android 13"
                        component-link="https://www.android.com"
                    ></tetraminion-org-text-button--link></li>
                </ol>
            </section>
            <section>
                <h4><tetraminion-org-typescale-label-large
                    component-label-text="ウェブブラウザ"
                ></tetraminion-org-typescale-label-large></h4>
                <p><tetraminion-org-typescale-body-medium
                    component-label-text="最新版を適用しています。"
                ></tetraminion-org-typescale-body-medium></p>
                <ol class="css-text-button-group">
                    <li class="css-text-button-group__item"><tetraminion-org-text-button--link
                        component-icon="brands/firefox-browser"
                        component-label-text="Firefox for Desktop"
                        component-link="https://www.mozilla.org/firefox/browsers"
                    ></tetraminion-org-text-button--link></li>
                    <li class="css-text-button-group__item"><tetraminion-org-text-button--link
                        component-icon="brands/firefox-browser"
                        component-label-text="Firefox for Android"
                        component-link="https://play.google.com/store/apps/details?id=org.mozilla.firefox"
                    ></tetraminion-org-text-button--link></li>
                    <li class="css-text-button-group__item"><tetraminion-org-text-button--link
                        component-icon="brands/chrome"
                        component-label-text="Chrome for Android"
                        component-link="https://play.google.com/store/apps/details?id=com.android.chrome"
                    ></tetraminion-org-text-button--link></li>
                    <li class="css-text-button-group__item"><tetraminion-org-text-button--link
                        component-icon="brands/chrome"
                        component-label-text="Chrome for Windows"
                        component-link="https://www.google.com/chrome"
                    ></tetraminion-org-text-button--link></li>
                    <li class="css-text-button-group__item"><tetraminion-org-text-button--link
                        component-icon="brands/edge"
                        component-label-text="Edge for Windows"
                        component-link="https://www.microsoft.com/edge"
                    ></tetraminion-org-text-button--link></li>
                </ol>
            </section>
        </section>
    </section>
    <section>
        <h2><tetraminion-org-typescale-headline-medium
            component-label-text="ブックマーク"
        ></tetraminion-org-typescale-headline-medium></h2>
        <ul class="css-text-button-group">
            <li class="css-text-button-group__item"><tetraminion-org-text-button--link
                component-label-text="Adobe Express"
                component-link="https://express.adobe.com"
            ></tetraminion-org-text-button--link></li>
            <li class="css-text-button-group__item"><tetraminion-org-text-button--link
                component-label-text="afdko"
                component-link="https://adobe-type-tools.github.io/afdko"
            ></tetraminion-org-text-button--link></li>
            <li class="css-text-button-group__item"><tetraminion-org-text-button--link
                component-label-text="Choose a License"
                component-link="https://choosealicense.com"
            ></tetraminion-org-text-button--link></li>
            <li class="css-text-button-group__item"><tetraminion-org-text-button--link
                component-label-text="FileZilla"
                component-link="https://filezilla-project.org"
            ></tetraminion-org-text-button--link></li>
            <li class="css-text-button-group__item"><tetraminion-org-text-button--link
                component-label-text="FontForge"
                component-link="https://fontforge.org"
            ></tetraminion-org-text-button--link></li>
            <li class="css-text-button-group__item"><tetraminion-org-text-button--link
                component-label-text="Google Fonts Tools"
                component-link="https://github.com/googlefonts/gftools"
            ></tetraminion-org-text-button--link></li>
            <li class="css-text-button-group__item"><tetraminion-org-text-button--link
                component-label-text="Google Keep"
                component-link="https://keep.google.com"
            ></tetraminion-org-text-button--link></li>
            <li class="css-text-button-group__item"><tetraminion-org-text-button--link
                component-label-text="Google Photos"
                component-link="https://photos.google.com"
            ></tetraminion-org-text-button--link></li>
            <li class="css-text-button-group__item"><tetraminion-org-text-button--link
                component-label-text="Inkscape"
                component-link="https://inkscape.org"
            ></tetraminion-org-text-button--link></li>
            <li class="css-text-button-group__item"><tetraminion-org-text-button--link
                component-label-text="Keep a Changelog"
                component-link="https://keepachangelog.com"
            ></tetraminion-org-text-button--link></li>
            <li class="css-text-button-group__item"><tetraminion-org-text-button--link
                component-label-text="Node.js v16.x documentation"
                component-link="https://nodejs.org/dist/latest-v16.x/docs/api"
            ></tetraminion-org-text-button--link></li>
            <li class="css-text-button-group__item"><tetraminion-org-text-button--link
                component-label-text="npm Docs"
                component-link="https://docs.npmjs.com"
            ></tetraminion-org-text-button--link></li>
            <li class="css-text-button-group__item"><tetraminion-org-text-button--link
                component-label-text="Python documentation"
                component-link="https://docs.python.org"
            ></tetraminion-org-text-button--link></li>
            <li class="css-text-button-group__item"><tetraminion-org-text-button--link
                component-label-text="Spectrum"
                component-link="https://spectrum.adobe.com"
            ></tetraminion-org-text-button--link></li>
            <li class="css-text-button-group__item"><tetraminion-org-text-button--link
                component-label-text="SQL As Understood By SQLite"
                component-link="https://www.sqlite.org/lang.html"
            ></tetraminion-org-text-button--link></li>
            <li class="css-text-button-group__item"><tetraminion-org-text-button--link
                component-label-text="The Atom Syndication Format"
                component-link="https://datatracker.ietf.org/doc/html/rfc4287"
            ></tetraminion-org-text-button--link></li>
            <li class="css-text-button-group__item"><tetraminion-org-text-button--link
                component-label-text="WAI-ARIA 1.2"
                component-link="https://www.w3.org/TR/wai-aria-1.2"
            ></tetraminion-org-text-button--link></li>
            <li class="css-text-button-group__item"><tetraminion-org-text-button--link
                component-label-text="Wikipedia"
                component-link="https://www.wikipedia.org"
            ></tetraminion-org-text-button--link></li>
            <li class="css-text-button-group__item"><tetraminion-org-text-button--link
                component-label-text="だれかと"
                component-link="https://darekato.herokuapp.com"
            ></tetraminion-org-text-button--link></li>
            <li class="css-text-button-group__item"><tetraminion-org-text-button--link
                component-label-text="ヒューマンインターフェース ガイドライン"
                component-link="https://www.sociomedia.co.jp/category/shig"
            ></tetraminion-org-text-button--link></li>
            <li class="css-text-button-group__item"><tetraminion-org-text-button--link
                component-label-text="日本語組版処理の要件"
                component-link="https://www.w3.org/TR/jlreq"
            ></tetraminion-org-text-button--link></li>
        </ul>
    </section>
    <section>
        <h2><tetraminion-org-typescale-headline-medium component-label-text="リンクバナー"></tetraminion-org-typescale-headline-medium></h2>
        <p><tetraminion-org-typescale-body-medium component-label-text="直リンクできます。"></tetraminion-org-typescale-body-medium></p>
        <dl>
            <div>
                <dt><img decoding="async" loading="lazy" fetchpriority="high" src="/banner.svg" alt="SVG (200x40)"></dt>
                <dd><tetraminion-org-typescale-body-small component-label-text="SVG"></tetraminion-org-typescale-body-small></dd>
                <dd><tetraminion-org-typescale-body-small component-label-text="200x40"></tetraminion-org-typescale-body-small></dd>
            </div>
            <div>
                <dt><img decoding="async" loading="lazy" src="/banner.webp" alt="WEBP (XXXHDPI)"></dt>
                <dd><tetraminion-org-typescale-body-small component-label-text="WEBP"></tetraminion-org-typescale-body-small></dd>
                <dd><tetraminion-org-typescale-body-small component-label-text="800x160 (x4.0)"></tetraminion-org-typescale-body-small></dd>
            </div>
            <div>
                <dt><img decoding="async" loading="lazy" src="/banner--xxhdpi.webp" alt="WEBP (XXHDPI)"></dt>
                <dd><tetraminion-org-typescale-body-small component-label-text="WEBP"></tetraminion-org-typescale-body-small></dd>
                <dd><tetraminion-org-typescale-body-small component-label-text="600x120 (x3.0)"></tetraminion-org-typescale-body-small></dd>
            </div>
            <div>
                <dt><img decoding="async" loading="lazy" src="/banner--xhdpi.webp" alt="WEBP (XHDPI)"></dt>
                <dd><tetraminion-org-typescale-body-small component-label-text="WEBP"></tetraminion-org-typescale-body-small></dd>
                <dd><tetraminion-org-typescale-body-small component-label-text="400x80 (x2.0)"></tetraminion-org-typescale-body-small></dd>
            </div>
            <div>
                <dt><img decoding="async" loading="lazy" src="/banner--hdpi.webp" alt="WEBP (HDPI)"></dt>
                <dd><tetraminion-org-typescale-body-small component-label-text="WEBP"></tetraminion-org-typescale-body-small></dd>
                <dd><tetraminion-org-typescale-body-small component-label-text="300x60 (x1.5)"></tetraminion-org-typescale-body-small></dd>
            </div>
            <div>
                <dt><img decoding="async" loading="lazy" src="/banner--mdpi.webp" alt="WEBP (MDPI)"></dt>
                <dd><tetraminion-org-typescale-body-small component-label-text="WEBP"></tetraminion-org-typescale-body-small></dd>
                <dd><tetraminion-org-typescale-body-small component-label-text="200x40 (x1.0)"></tetraminion-org-typescale-body-small></dd>
            </div>
        </dl>
        <section>
            <h3><tetraminion-org-typescale-title-medium component-label-text="SVG (200x40)"></tetraminion-org-typescale-title-medium></h3>
            <p><tetraminion-org-typescale-body-medium component-label-text="直リンク非推奨です。"></tetraminion-org-typescale-body-medium></p>
            <dl>
                <div>
                    <dt><img
                        decoding="async"
                        loading="lazy"
                        fetchpriority="low"
                        src="/assets/svg/banner-1-79-40-antonio-bold.svg"
                        alt="Antonio Bold on hsl(1deg 79% 40%)"
                    ></dt>
                    <dd><tetraminion-org-text-button--link
                        component-label-text="Antonio Bold"
                        component-link="https://fonts.google.com/specimen/Antonio"
                    ></tetraminion-org-text-button--link></dd>
                    <dd><tetraminion-org-typescale-body-small
                        component-label-text="hsl(1deg 79% 40%)"
                    ></tetraminion-org-typescale-body-small></dd>
                    <dd><tetraminion-org-typescale-body-small component-label-text="7KB"></tetraminion-org-typescale-body-small></dd>
                </div>
                <div>
                    <dt><img
                        decoding="async"
                        loading="lazy"
                        fetchpriority="low"
                        src="/assets/svg/banner-1-92-40-josefin-slab-medium.svg"
                        alt="Josefin Slab Medium on hsl(1deg 92% 40%)"
                    ></dt>
                    <dd><tetraminion-org-text-button--link
                        component-label-text="Josefin Slab Medium"
                        component-link="https://fonts.google.com/specimen/Josefin+Slab"
                    ></tetraminion-org-text-button--link></dd>
                    <dd><tetraminion-org-typescale-body-small
                        component-label-text="hsl(1deg 92% 40%)"
                    ></tetraminion-org-typescale-body-small></dd>
                    <dd><tetraminion-org-typescale-body-small component-label-text="7KB"></tetraminion-org-typescale-body-small></dd>
                </div>
                <div>
                    <dt><img
                        decoding="async"
                        loading="lazy"
                        fetchpriority="low"
                        src="/assets/svg/banner-1-92-40-noto-sans-medium.svg"
                        alt="Noto Sans Medium on hsl(1deg 92% 40%)"
                    ></dt>
                    <dd><tetraminion-org-text-button--link
                        component-label-text="Noto Sans Medium"
                        component-link="https://fonts.google.com/specimen/Noto+Sans"
                    ></tetraminion-org-text-button--link></dd>
                    <dd><tetraminion-org-typescale-body-small
                        component-label-text="hsl(1deg 92% 40%)"
                    ></tetraminion-org-typescale-body-small></dd>
                    <dd><tetraminion-org-typescale-body-small component-label-text="6KB"></tetraminion-org-typescale-body-small></dd>
                </div>
                <div>
                    <dt><img
                        decoding="async"
                        loading="lazy"
                        fetchpriority="low"
                        src="/assets/svg/banner-1-92-40-noto-sans-semibold.svg"
                        alt="Noto Sans SemiBold on hsl(1deg 92% 40%)"
                    ></dt>
                    <dd><tetraminion-org-text-button--link
                        component-label-text="Noto Sans SemiBold"
                        component-link="https://fonts.google.com/specimen/Noto+Sans"
                    ></tetraminion-org-text-button--link></dd>
                    <dd><tetraminion-org-typescale-body-small
                        component-label-text="hsl(1deg 92% 40%)"
                    ></tetraminion-org-typescale-body-small></dd>
                    <dd><tetraminion-org-typescale-body-small component-label-text="6KB"></tetraminion-org-typescale-body-small></dd>
                </div>
                <div>
                    <dt><img
                        decoding="async"
                        loading="lazy"
                        fetchpriority="low"
                        src="/assets/svg/banner-1-92-40-noto-sans-bold.svg"
                        alt="Noto Sans Bold on hsl(1deg 92% 40%)"
                    ></dt>
                    <dd><tetraminion-org-text-button--link
                        component-label-text="Noto Sans Bold"
                        component-link="https://fonts.google.com/specimen/Noto+Sans"
                    ></tetraminion-org-text-button--link></dd>
                    <dd><tetraminion-org-typescale-body-small
                        component-label-text="hsl(1deg 92% 40%)"
                    ></tetraminion-org-typescale-body-small></dd>
                    <dd><tetraminion-org-typescale-body-small component-label-text="6KB"></tetraminion-org-typescale-body-small></dd>
                </div>
                <div>
                    <dt><img
                        decoding="async"
                        loading="lazy"
                        fetchpriority="low"
                        src="/assets/svg/banner-1-92-40-noto-sans-extrabold.svg"
                        alt="Noto Sans ExtraBold on hsl(1deg 92% 40%)"
                    ></dt>
                    <dd><tetraminion-org-text-button--link
                        component-label-text="Noto Sans ExtraBold"
                        component-link="https://fonts.google.com/specimen/Noto+Sans"
                    ></tetraminion-org-text-button--link></dd>
                    <dd><tetraminion-org-typescale-body-small
                        component-label-text="hsl(1deg 92% 40%)"
                    ></tetraminion-org-typescale-body-small></dd>
                    <dd><tetraminion-org-typescale-body-small component-label-text="6KB"></tetraminion-org-typescale-body-small></dd>
                </div>
                <div>
                    <dt><img
                        decoding="async"
                        loading="lazy"
                        fetchpriority="low"
                        src="/assets/svg/banner-1-92-40-noto-sans-black.svg"
                        alt="Noto Sans Black on hsl(1deg 92% 40%)"
                    ></dt>
                    <dd><tetraminion-org-text-button--link
                        component-label-text="Noto Sans Black"
                        component-link="https://fonts.google.com/specimen/Noto+Sans"
                    ></tetraminion-org-text-button--link></dd>
                    <dd><tetraminion-org-typescale-body-small
                        component-label-text="hsl(1deg 92% 40%)"
                    ></tetraminion-org-typescale-body-small></dd>
                    <dd><tetraminion-org-typescale-body-small component-label-text="6KB"></tetraminion-org-typescale-body-small></dd>
                </div>
                <div>
                    <dt><img
                        decoding="async"
                        loading="lazy"
                        fetchpriority="low"
                        src="/assets/svg/banner-14-82-40-zen-oldmincho-nm.svg"
                        alt="ZENオールド明朝NM on hsl(14deg 82% 40%)"
                    ></dt>
                    <dd><tetraminion-org-text-button--link
                        component-label-text="ZENオールド明朝NM"
                        component-link="https://github.com/googlefonts/zen-oldmincho"
                    ></tetraminion-org-text-button--link></dd>
                    <dd><tetraminion-org-typescale-body-small
                        component-label-text="hsl(14deg 82% 40%)"
                    ></tetraminion-org-typescale-body-small></dd>
                    <dd><tetraminion-org-typescale-body-small component-label-text="19KB"></tetraminion-org-typescale-body-small></dd>
                </div>
                <div>
                    <dt><img
                        decoding="async"
                        loading="lazy"
                        fetchpriority="low"
                        src="/assets/svg/banner-21-50-40-zen-oldmincho-nm.svg"
                        alt="ZENオールド明朝NM on hsl(21deg 50% 40%)"
                    ></dt>
                    <dd><tetraminion-org-text-button--link
                        component-label-text="ZENオールド明朝NM"
                        component-link="https://github.com/googlefonts/zen-oldmincho"
                    ></tetraminion-org-text-button--link></dd>
                    <dd><tetraminion-org-typescale-body-small
                        component-label-text="hsl(21deg 50% 40%)"
                    ></tetraminion-org-typescale-body-small></dd>
                    <dd><tetraminion-org-typescale-body-small component-label-text="19KB"></tetraminion-org-typescale-body-small></dd>
                </div>
                <div>
                    <dt><img
                        decoding="async"
                        loading="lazy"
                        fetchpriority="low"
                        src="/assets/svg/banner-208-28-40-kaisei-opti-medium.svg"
                        alt="解星オプティ Medium on hsl(208deg 28% 40%)"
                    ></dt>
                    <dd><tetraminion-org-text-button--link
                        component-label-text="解星オプティ Medium"
                        component-link="https://github.com/FontKai-Kaisei/Kaisei"
                    ></tetraminion-org-text-button--link></dd>
                    <dd><tetraminion-org-typescale-body-small
                        component-label-text="hsl(208deg 28% 40%)"
                    ></tetraminion-org-typescale-body-small></dd>
                    <dd><tetraminion-org-typescale-body-small component-label-text="14KB"></tetraminion-org-typescale-body-small></dd>
                </div>
                <div>
                    <dt><img
                        decoding="async"
                        loading="lazy"
                        fetchpriority="low"
                        src="/assets/svg/banner-211-100-40-kaisei-decol-bold.svg"
                        alt="解星デコール Bold on hsl(211deg 100% 40%)"
                    ></dt>
                    <dd><tetraminion-org-text-button--link
                        component-label-text="解星デコール Bold"
                        component-link="https://github.com/FontKai-Kaisei/Kaisei"
                    ></tetraminion-org-text-button--link></dd>
                    <dd><tetraminion-org-typescale-body-small
                        component-label-text="hsl(211deg 100% 40%)"
                    ></tetraminion-org-typescale-body-small></dd>
                    <dd><tetraminion-org-typescale-body-small component-label-text="14KB"></tetraminion-org-typescale-body-small></dd>
                </div>
                <div>
                    <dt><img
                        decoding="async"
                        loading="lazy"
                        fetchpriority="low"
                        src="/assets/svg/banner-212-100-40-zen-oldmincho-nm.svg"
                        alt="ZENオールド明朝NM on hsl(212deg 100% 40%)"
                    ></dt>
                    <dd><tetraminion-org-text-button--link
                        component-label-text="ZENオールド明朝NM"
                        component-link="https://github.com/googlefonts/zen-oldmincho"
                    ></tetraminion-org-text-button--link></dd>
                    <dd><tetraminion-org-typescale-body-small
                        component-label-text="hsl(212deg 100% 40%)"
                    ></tetraminion-org-typescale-body-small></dd>
                    <dd><tetraminion-org-typescale-body-small component-label-text="19KB"></tetraminion-org-typescale-body-small></dd>
                </div>
                <div>
                    <dt><img
                        decoding="async"
                        loading="lazy"
                        fetchpriority="low"
                        src="/assets/svg/banner-355-79-48-antonio-bold.svg"
                        alt="Antonio Bold on hsl(355deg 79% 48%)"
                    ></dt>
                    <dd><tetraminion-org-text-button--link
                        component-label-text="Antonio Bold"
                        component-link="https://fonts.google.com/specimen/Antonio"
                    ></tetraminion-org-text-button--link></dd>
                    <dd><tetraminion-org-typescale-body-small
                        component-label-text="hsl(355deg 79% 48%)"
                    ></tetraminion-org-typescale-body-small></dd>
                    <dd><tetraminion-org-typescale-body-small component-label-text="7KB"></tetraminion-org-typescale-body-small></dd>
                </div>
                <div>
                    <dt><img
                        decoding="async"
                        loading="lazy"
                        fetchpriority="low"
                        src="/assets/svg/banner-358-92-86-josefin-slab-medium.svg"
                        alt="Josefin Slab Medium on hsl(358deg 92% 86%)"
                    ></dt>
                    <dd><tetraminion-org-text-button--link
                        component-label-text="Josefin Slab Medium"
                        component-link="https://fonts.google.com/specimen/Josefin+Slab"
                    ></tetraminion-org-text-button--link></dd>
                    <dd><tetraminion-org-typescale-body-small
                        component-label-text="hsl(358deg 92% 86%)"
                    ></tetraminion-org-typescale-body-small></dd>
                    <dd><tetraminion-org-typescale-body-small component-label-text="7KB"></tetraminion-org-typescale-body-small></dd>
                </div>
            </dl>
        </section>
    </section>
</div>
個人情報は送信しないでください。