.sugArea {
    display: flex;
    background-color: #f2f5f3;
    border: 1px solid #ccc;
    width: 350px;
    padding: 5px;
    float: right;
    border-radius: 5px;
    align-items: flex-start;
    justify-content:space-evenly;
}

#wrap .sugPic {
    margin-right: 10px;
    max-width: 100px;
    border-radius: 5px;
}


.sugTxt {
    font-size: 12px;
    margin: initial;
    width: calc(90% - 80px);
}

.sugSubTxt {
    color: #777;
    text-align: center;
}

.sugHeader {
    text-align: center;
    background-color: #27652e;
    padding: 3px;
    color: #fff;
    margin: 0 0 5px 0;
}

.sugHeader strong {
    font-size: 120%;
}

p.sugItem {
    font-size: 130%;
    text-decoration: underline;
}

@media screen and (max-width: 767px) {
    .sugArea {
        float: none;
        width: 80%;
        margin: 0 auto 20px;
    }

    #wrap .sugPic {
        max-width: 80px;
    }

    .sugHeader strong {
        font-size: 100%;
    }

    p.sugItem {
        font-size: 110%;
    }
}