コンポーネントの作成

サイト全体で使い回すパーツを、先にコンポーネントとして用意します。

見出しコンポーネント

特徴セクションや機能紹介など、セクション見出しの見た目は共通です。そのため c-title-level2 / c-title-level3 として切り出します。

中央寄せや文字色の違いは、修飾クラス（--center / --color-light）で切り替えます。

<h2 class="c-title-level2 c-title-level2--center">特徴</h2>

.c-title-level2,
.c-title-level3 {
    font-weight: bold;
}

.c-title-level2 {
    font-size: 24px;
    line-height: 1.55;
}

@media (width >= 768px) {
    .c-title-level2 {
        font-size: 32px;
    }
}

.c-title-level2--center {
    text-align: center;
}

見た目の差分だけを修飾クラスに分けると、ベースの見出しスタイルを崩さずに使い回せます。

ボタンコンポーネント

今回のメインボタンは c-button です。ヘッダーの「登録/ログイン」やKVのCTAで使います。

.c-button {
    color: var(--color-font-light);
    background-color: var(--color-bg-button);
    line-height: 1;
    font-weight: bold;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    padding: 12px 16px;
    font-size: 16px;
    transition: background-color 0.3s;
}

@media (width >= 768px) {
    .c-button {
        font-size: 18px;
    }
}

矢印付きの見た目が必要な箇所は c-button--arrow を加算します。疑似要素で線と三角を作る仕組みです。