#bad_condition_brand_apparel {
    font-size: 1rem;
    margin-top: 6em;

    .wrap {
        background: #f1f1f1;
        border-radius: 20px;
        position: relative;
        padding-top: min(5vw, 60px);
        padding-bottom: 2em;
    }

    .speech_bubble {
        background-image: url("/brand/wp-content/themes/otakaraya/assets/img/state_bad_purchase_brand/img_speech_bubble.webp");
        background-size: contain;
        background-repeat: no-repeat;
        background-size: 100%;
        text-align: center;
        margin: auto;
        width: 80%;
        height: min(7vw, 100px);
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        right: 0;
        left: 0;
        top: -3%;
        margin: auto;
    }

    .speech_bubble p {
        margin-bottom: 1vw;
        font-weight: 500;
        font-size: min(1.8vw, 26px);
    }

    .top_block {
        display: flex;
        padding: 0 min(3.4vw, 48px);
        justify-content: space-between;
    }

    .left_block {
        width: 63%;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .head_block {
        position: relative;
    }

    .head_block img {
        position: absolute;
        width: min(12.6vw, 122px);
        left: 3.4%;
    }

    .head_block p {
        font-size: min(1.6vw, 18px);
        font-weight: 500;
    }

    .head_block p span {
        font-size: 2.2vw;
        font-weight: 600;
    }

    .head_block p span span {
        background-image: radial-gradient(
            circle at center,
            #e60012 20%,
            transparent 20%
        );
        background-position: top right;
        background-repeat: repeat-x;
        background-size: 1em 0.5em;
        padding-top: 0.4em;
    }

    .red_text_block {
        font-weight: 600;
        font-size: 2.2vw;
        color: #e60012;
        background: linear-gradient(
            transparent 0%,
            transparent 64%,
            #ffff00 70%,
            #ffff00 100%
        );
        width: fit-content;
    }

    .lead_text {
        font-size: 1.34vw;
        font-weight: 500;
        margin-top: 0.6em;
    }

    .right_block {
        width: 37%;
    }

    .red_band_block {
        background: #e60012;
        width: 90%;
        margin: auto;
        text-align: center;
        padding: min(0.6vw, 10px) 0;
    }

    .red_band_block p {
        color: #fff;
        font-weight: 600;
        font-size: min(2vw, 26px);
    }

    .red_band_block p span {
        color: #ffff00;
    }

    .main_wrap {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(3, 1fr);
        grid-column-gap: 26px;
        grid-row-gap: 32px;
        padding: min(3.4vw, 48px);
    }

    .card {
        position: relative;
    }

    .card .img_ok {
        position: absolute;
        right: -4%;
        top: -6%;
        width: 30%;
    }

    .card_img {
        width: 100%;
        height: fit-content;
        object-fit: contain;
    }

    .card p {
        font-size: 1.15vw;
        width: fit-content;
        margin: auto;
        margin-top: 0.6em;
        font-weight: 500;
    }

    .main_bottom_text {
        font-size: min(1.2vw, 17px);
        font-weight: 500;
        margin-top: 0.6em;
        width: fit-content;
        margin: auto;
        text-align: center;
        margin-bottom: 0.6em;
    }

    .annotation_text {
        font-size: min(1vw, 14px);
        font-weight: 500;
        margin-top: 0.6em;
        width: fit-content;
        margin: auto;
        margin-bottom: 0.6em;
    }

    @media (min-width: 1185px) {
        .speech_bubble p {
            margin-bottom: min(2vw, 30px);
        }

        .head_block p {
            font-size: min(1.6vw, 18px);
        }

        .head_block p span {
            font-size: min(2vw, 28px);
        }

        .red_text_block {
            font-size: min(1.9vw, 28px);
        }

        .lead_text {
            font-size: min(1.2vw, 17px);
        }

        .card p {
            font-size: min(1vw, 15.4px);
        }
    }

    @media (max-width: 767px) {
        overflow: visible;
        margin-top: 2em;

        .wrap {
            padding: 8vw 2vw;
        }

        .speech_bubble {
            width: 80%;
            height: 10vw;
            top: -1%;
        }

        .speech_bubble p {
            font-size: 3vw;
            margin-bottom: 2vw;
        }

        .head_block p {
            font-size: 4vw;
        }

        .head_block p span {
            font-size: 5vw;
        }

        .head_block p span span {
            background-size: 5.1vw 3.4vw;
        }

        .top_block {
            display: block;
        }

        .left_block {
            width: 100%;
            margin: auto;
            text-align: center;
        }

        .head_block img {
            width: 30%;
            left: 20.6%;
        }

        .red_text_block {
            font-size: 5.2vw;
            width: fit-content;
            margin: auto;
        }

        .lead_text {
            font-size: 2.8vw;
        }

        .right_block {
            width: 94%;
            margin: auto;
        }

        .red_band_block {
            width: 96%;
            padding: 2vw;
        }

        .red_band_block p {
            font-size: 4.1vw;
        }

        .main_wrap {
            grid-template-columns: repeat(2, 1fr);
            grid-template-rows: repeat(6, 1fr);
            grid-column-gap: 8vw;
            grid-row-gap: 6vw;
            padding: 8vw;
        }

        .card p {
            font-size: 4vw;
            margin-top: 2vw;
            text-align: center;
            line-height: 1;
        }

        .main_bottom_text {
            font-size: 3vw;
        }

        .annotation_text {
            font-size: 2.7vw;
            text-align: center;
        }
    }
}