@charset "UTF-8";
.mdAcRecommendItem {
    display: flex;
    flex-direction: column;
    align-content: center;
    flex-wrap: wrap;
    background-color:#fff;
    margin: auto;
}

.mdAcRecommendItem .elErrorText {
    color: #434343;
    text-align: center
}

.mdAcRecommendItem .elAcRecommendItemList {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap
}

.mdAcRecommendItem .elAcRecommendItem {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px
}

.mdAcRecommendItem .elAcRecommendItem.hide {
    display: none
}

.mdAcRecommendItem .elAdItemLink,
.mdAcRecommendItem .elAdItemImage {
    display: flex;
    justify-content: center;
    align-items: center
}

.mdAcRecommendItem .elAdItemPoint {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    align-self: stretch
}

.mdAcRecommendItem .elAdItemPrice {
    display: flex;
    align-items: center;
    color: #c13832
}

.mdAcRecommendItem .elAdItemPriceValue {
    font-size: 20px;
    font-weight: 700;
    line-height: normal
}

.mdAcRecommendItem .elAdItemPriceUnit {
    font-size: 14px;
    font-weight: 700;
    line-height: normal
}

.mdAcRecommendItem .elStoreLink {
    display: flex;
    height: 17px;
    gap: 2px;
    align-self: stretch;
    color: #434343
}

.mdAcRecommendItem .elStoreIcon {
    min-width: 16px;
    min-height: 16px;
    fill: #868686
}

.mdAcRecommendItem .elStoreName {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px
}

.mdAcRecommendItem .elStoreReason {
    display: flex;
    padding: 2px 8px;
    justify-content: center;
    align-items: center;
    background: #ebebeb;
    font-size: 12px
}

.mdAcRecommendItem .elButtonArea {
    margin-top: 20px;
    margin-bottom: 20px;
    display: flex;
    padding: 0 24px;
    align-items: center;
    justify-content: center
}

.mdAcRecommendItem .elButton {
    display: flex;
    height: 42px;
    justify-content: center;
    align-items: center;
    align-self: stretch;
    border-radius: 6px;
    background: rgba(0, 0, 0, .04);
    padding: 0;
    border: none;
    font-size: 14px;
    font-weight: 700;
    color: #0260ea
}

.mdAcRecommendItem .elButton:hover {
    color: #4c88ff
}

@media screen and (max-width: 949px) {
    .mdAcRecommendItem {
        padding: 20px;
        width: -webkit-fill-available;
    }

    .mdAcRecommendItem .elAcRecommendItemList {
        width: 350px;
        -webkit-column-gap: 8px;
        column-gap: 8px;
        row-gap: 16px
    }

    .mdAcRecommendItem .elAcRecommendItem {
        width: 171px
    }

    .mdAcRecommendItem .elAdItemImage {
        width: 171px;
        height: 171px
    }

    .mdAcRecommendItem .elButton {
        flex: 1 1
    }
}

@media screen and (min-width: 950px) {
    .mdAcRecommendItem {
        padding: 40px 40px;
        width: 990px;
    }

    .mdAcRecommendItem .elAcRecommendItemList {
        -webkit-column-gap: 16px;
        column-gap: 16px;
        row-gap: 20px
    }

    .mdAcRecommendItem .elAcRecommendItem {
        width: 138px
    }

    .mdAcRecommendItem .elAdItemImage {
        width: 138px;
        height: 138px
    }

    .mdAcRecommendItem .elButton {
        width: 490px
    }
}