.step_box {
    display: flex;
    align-items: center;
    padding: 20px;
    border-radius: 5px;
    background: #fff;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}
/* .step_box:hover {
    transform: scale(1.03);
} */
.form_anchor {
    color: #0073e6;
    text-decoration: underline;
}
.form_anchor:hover {
    opacity: 0.8;
}
.step_number {
    width: 60px;
    height: 60px;
    background: #0073e6;
    font-size: 24px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin-right: 40px;
    flex-shrink: 0;
}
.step_content {
    flex-grow: 1;
}
.step_title {
    font-size: 20px;
    font-weight: bold;
    color: #0073e6;
}
.step_description {
    font-size: 16px;
    color: #555;
    display: flex;
    justify-content: left;
}
.free_estimate {
    color: red;
    font-weight: bold;
    display: block;
    margin-top: 10px;
}
.step_image {
    width: 30%;
    margin-right: 4%;
}
.step_text {
    width: 66%;
    line-height: 1.8;
}

承知いたしました。「制作の流れ」ページのスマホサイズ対応CSSを作成します。

現在のPC向けCSSでは、step_box 内で番号と内容が横並び、さらに内容内で画像とテキストが横並びになっています。スマホではこれらの要素を縦並びにすることで、見やすく、コンテンツが適切なサイズで表示されるように調整します。

CSS修正案
既存のCSSに、画面幅600px以下に適用されるメディアクエリを追加します。

CSS

/* 既存の step_box 関連スタイル */
.step_box {
    display: flex;
    align-items: center;
    padding: 20px;
    border-radius: 5px;
    background: #fff;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}
/* .step_box:hover {
    transform: scale(1.03);
} */
.form_anchor {
    color: #0073e6;
    text-decoration: underline;
}
.form_anchor:hover {
    opacity: 0.8;
}
.step_number {
    width: 60px;
    height: 60px;
    background: #0073e6;
    font-size: 24px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin-right: 40px;
    flex-shrink: 0;
}
.step_content {
    flex-grow: 1;
}
.step_title {
    font-size: 20px;
    font-weight: bold;
    color: #0073e6;
}
.step_description {
    font-size: 16px;
    color: #555;
    display: flex;
    justify-content: left;
}
.free_estimate {
    color: red;
    font-weight: bold;
    display: block;
    margin-top: 10px;
    text-align: center; /* 中央寄せにする */
    font-size: 18px; /* 目立つように少し大きくする */
    padding: 10px 0; /* 上下パディングを追加 */
}
.step_image {
    width: 30%;
    margin-right: 4%;
}
.step_text {
    width: 66%;
    line-height: 1.8;
}

/* --- モバイル対応 (画面幅600px以下) --- */
@media screen and (max-width: 600px) {
    .inner.content_wrapper {
        padding-left: 20px; /* 左右の余白を調整 */
        padding-right: 20px;
    }

    .step_box {
        flex-direction: column; /* 番号と内容を縦並びにする */
        align-items: flex-start; /* 左寄せにする */
        padding: 20px 15px; /* パディングを調整 */
        margin-top: 30px; /* 各ステップ間の余白を調整 */
    }

    .step_number {
        width: 50px; /* 番号のサイズを小さく */
        height: 50px;
        font-size: 20px;
        margin-right: 0; /* 右マージンをリセット */
        margin-bottom: 20px; /* 下に余白を追加 */
    }

    .step_content {
        width: 100%; /* 内容部分の幅を100%に */
    }

    .step_title {
        font-size: 18px; /* タイトルフォントサイズを調整 */
        text-align: center; /* タイトルを中央寄せに */
        width: 100%; /* 中央寄せのために幅を100%に */
        margin-bottom: 15px; /* 下に余白を追加 */
    }

    .step_description {
        flex-direction: column; /* 画像とテキストを縦並びにする */
        align-items: center; /* 中央寄せ */
        font-size: 14px; /* テキストのフォントサイズを調整 */
        margin-top: 15px; /* 上のマージンを調整 */
    }

    .step_image {
        width: 80%; /* 画像を幅広く表示 */
        max-width: 300px; /* 画像の最大幅を設定 */
        height: auto;
        margin-right: 0; /* 右マージンをリセット */
        margin-bottom: 20px; /* 画像の下に余白を追加 */
    }

    .step_text {
        width: 100%; /* テキストブロックの幅を100%に */
        text-align: left; /* テキストは左寄せ */
        line-height: 1.6; /* 行間を調整 */
    }
}