.pricing_table {
    display: flex;
    flex-wrap: wrap;
    justify-content: left;
    gap: 5%;
}
.plan {
    width: 30%;
    /* min-width: 280px; */
    background: #fff;
    padding: 20px;
    /* margin: 10px; */
    border-radius: 5px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
    text-align: center;
    transition: transform 0.3s ease;
}
.plan:hover {
    transform: scale(1.05);
}
.price_text {
    font-size: 24px;
    font-weight: bold;
    color: #333;
}
.price_li {
    padding-left: 20px;
    position: relative;
}
.price_li::before {
    content: "✔";
    color: #0073e6;
    position: absolute;
    left: 0;
    font-weight: bold;
}
.cta_button {
    display: inline-block;
    margin-top: 15px;
    padding: 10px 20px;
    background-color: #0073e6;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}
.cta_button:hover {
    background-color: #005bb5;
}

@media screen and (max-width: 600px) {
    .pricing_table {
        flex-direction: column; /* 縦方向に並べる */
        gap: 20px; /* プラン間の隙間を調整 */
        justify-content: center; /* 念のため中央寄せに */
        align-items: center; /* 要素を中央に揃える */
    }

    .plan {
        width: 90%; /* 画面幅の90%を使用し、左右に余白を持たせる */
        max-width: 350px; /* 最大幅を設定し、大きすぎる画面でも見やすく */
        padding: 25px 20px; /* 上下のパディングを少し増やすなど調整 */
        margin: 0 auto; /* 中央寄せ */
    }

    /* タイトルやテキストのフォントサイズ調整 (任意) */
    .plan h3 {
        font-size: 22px; /* 少し小さくする */
    }
    .price_text {
        font-size: 28px; /* 強調したいので少し大きくする */
    }
    .price_li {
        font-size: 15px; /* リストのフォントサイズ調整 */
    }

    .cta_button {
        width: 80%; /* ボタンを少し広げ、タップしやすく */
        max-width: 200px; /* ボタンの最大幅 */
        padding: 12px 0; /* 上下パディングを増やして中央揃え */
        margin-top: 20px; /* 上のマージンを増やす */
    }
}