/* ########### スマホ用レスポンシブ ########### */
@media (max-width: 768px) {
    body {
        padding: 1rem;
        /* 余白を少し減らす */
    }

    header h1 {
        font-size: 1.8rem;
        /* タイトルを小さめに */
    }

    header p {
        font-size: 1rem;
        /* サブタイトルも縮小 */
    }

    .container {
        grid-template-columns: 1fr;
        /* カードを縦積みに */
        gap: 1rem;
        margin: 1rem 0;
    }

    .card {
        padding: 1rem;
    }

    .card h2 {
        font-size: 1.4rem;
    }

    .card p {
        font-size: 1rem;
    }

    .step-number {
        font-size: 2rem;
    }

    footer {
        flex-direction: column;
        /* フッターを縦積みに */
        gap: 1rem;
        width: 100%;
        min-width: auto;
        /* 最小幅制限を解除 */
    }

    .flex-columns {
        flex-direction: column;
        /* カラムを縦方向に */
        gap: 0.75rem;
    }

    .flex-columns .column {
        width: 100%;
        /* 横幅いっぱいに */
    }

    footer span {
        margin-top: 1rem;
        /* ブランド名を下に配置 */
    }
}