.button-container {
    display: flex;
    justify-content: center; /* 中央揃えにする */
    gap: 20px; /* ボタン間の隙間を広げる */
}

.button {
    background-color: #003b68;
    border-radius: 5px;
    box-sizing: border-box;
    color: #fff;
    display: block;
    flex: 1 1 calc(50% - 20px);
    font-size: 16px;
    margin: 10px;
    padding: 15px 40px;
    text-align: center;
    text-decoration: none;
    transition: background-color .3s;
    width: 300px;
}

.button:hover {
    background-color: #00a3e0;
}

@media (max-width: 768px) {
    .button-container {
        flex-direction: column;
        align-items: center; /* 縦に並べるときに中央揃えにする */
    }
    
    .button {
        width: 300px;!important /* スマホ表示時のボタン幅を80%に設定 */
        max-width: none; /* スマホ表示時に最大幅制限を解除 */
        margin: 10px 0; /* 縦並び時の上下のマージンを調整 */
    }
}