@media screen and (max-width: 768px) {

    .sp-br { display: block; }

    .pc-br { display: none; }

    header{
        padding: 10px 20px;
    }
    
    /* メニューのリンクを非表示 */
    header ul li:not(:first-child) {
        display: none;
    }

    /* ロゴを中央に */
    header ul {
        justify-content: center;
    }

    /* 全般のパディング */
    .general {
        padding: 40px 20px;
    }

    /* 見出し */
    .midasi, .midasi2 {
        font-size: 28px;
    }

    /* カード横並び→縦並び */
    .container {
        flex-direction: column;
    }

    .btn {
    width: 100%;
    text-align: center;
    }

    .back-to-top {
        width: 40px;
        height: 40px;
        font-size: 14px;
        bottom: 20px;
        right: 20px;
    }

    /*ヘッダーと第一セクションの余白をなくすため*/
    #overview {
        padding-top: 0;
    }

    #recommendTarget .container {
    flex-direction: column;
    }

    /* Section4: 当社の特徴（画像+テキストの横並び） */
    #ourStrengths {
        display: flex;
        flex-direction: column;
        padding: 0px;
        padding-bottom: 0px !important;
        min-height: unset;
    }

    #ourStrengths > div:first-child {
        width: 100%;
        height: 350px; /* 好みに調整 */
    }

    #ourStrengths > div:first-child img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    #ourStrengths .general {
        padding-top: 20px !important;
    }

    /* Section5: サービスプラン 余白調整、横並び→縦並び */
    #servicePlan {
    padding: 40px 20px;
    }

    #servicePlan .general {
        padding: 20px;
    }

    .plan-row {
        flex-direction: column;
    }

    /* Section6: ペネトレーション（画像+テキストの横並び） */
    #penerationTest > div > div:last-child {
        display: flex;
        flex-direction: column;
    }

    #penerationTest.general {
        padding-left: 20px;
    }

    /* Section8: キャンペーン（画像+テキストの横並び） */
    #campain {
        flex-direction: column;
        padding: 40px 20px;
    }
    #campain > div:first-child {
        flex: none;
        width: 100%;
    }
    #campain .general {
        padding: 20px 0;
    }

    #campain .general .btn {
        width: 100%;
        align-self: stretch;
    }

    /* Section10: 問い合わせ*/
    #qna .btn-group {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
}