ボタンのマウスホバー時の動きが、レスポンシブ時におかしくなります。

Question

ボタンのマウスホバー時の動きがレスポンシブ時におかしくなります。
.section19-content-sectionは通常時は横並びにしたく、フレックスボックスにしていて、レスポンシブ時には縦並びにしたいと思い、flex-direction: column;を指定しています。
通常時は上方向に7px動いてくれ、思った通りの挙動なのですが、レスポンシブ時にマウスホバーすると、なぜか右方向に動いてしまいます。（下記画像の通り）
responsive.cssの.section19-contentの指定がおかしいのかと思い、.section19-contentの指定をコメントアウトしたりしましたが、変わりませんでした。

レスポンシブ時にも、通常の様に方向に7px動いてくれる様にしたいです。
何かわかる方、ご教授お願いいたします。

    <div class="omousikomi" id="application">
        <div class="inner">
            <h2 class="section-sentence">お申し込み・資料請求
                <br>助成金申請
            </h2>
            <div class="section19-content-section">
                <h3 class="section19-content-title">お申し込みフォーム</h3>
                <div class="section19-content-container">
                    <a href="http://urx3.nu/Ccov" target="_blank" class="section19-content btn btn--red">個人　様</a>
                    <a href="http://urx3.nu/zvED" target="_blank" class="section19-content btn btn--red">企業　様</a>
                </div>
                <h3 class="section19-content-title">助成金申請</h3>
                <div class="section19-content-container">
                    <a href="https://www.mhlw.go.jp/stf/seisakunitsuite/bunya/kenkou_iryou/iryou/kansenkakudaiboushi_shien.html" target="_blank" class="section19-content btn btn--red">医療機関支援</a>
                    <a href="https://www.tokyo-kosha.or.jp/support/josei/jigyo/guideline.html" target="_blank" class="section19-content btn btn--red">東京都中小企業振興公社</a>
                </div>
            </div>
        </div>
    </div>

main.css

    .omousikomi {
        color: white;
        background: linear-gradient(#87cefa, #FFFDE4);
        padding: 10rem 0;
    }
    
    .section19-content-section {
        text-align: center;
        background-color: white;
        border-radius: 10rem;
        padding: 5rem 0;
    }
    
    .section19-content-title {
        color: #555;
        font-size: 4rem;
        font-weight: normal;
    }
    
    .section19-content-container {
        margin-bottom: 10rem;
    }
    
    .section19-content::after {
        content: ">";
        padding-left: 3rem;
    }
    
    .btn,
    a.btn,
    button.btn {
        font-size: 4rem;
        font-weight: normal;
        line-height: 1.5;
        position: relative;
        display: inline-block;
        padding: 1rem 2rem;
        cursor: pointer;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        -webkit-transition: all 0.3s;
        transition: all 0.3s;
        text-align: center;
        vertical-align: middle;
        text-decoration: none;
        letter-spacing: 0.1em;
        color: #212529;
        border-radius: 5rem;
    }
    
    .btn--red,
    a.btn--red {
        color: #fff;
        background-color: #ee5e67;
        box-shadow: 0 0 8px gray;
    }
    
    .btn--red:hover {
        box-shadow: 0 4px 7px 0 rgba(0, 0, 0, 0.5);
        transform: translateY(-5px);
        cursor: pointer;
    }
    
    .section19-content:nth-child(1) {
        margin-right: 3rem;
    }

responsive.css

.section19-content-container {
            display: flex;
            flex-direction: column;
            margin: auto;
        }
        .section19-content {
            width: 70%;
            position: relative;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
        }
        .section19-content:nth-child(1) {
            margin-right: 0;
            margin-bottom: 3rem;
        }

Answer 1

こんにちは。

responsive.css のメディアクエリ内にこちらを追加してみてください。

    .btn--red:hover {
        transform: translateX(-50%);
    }