.icon {
    background: url('../img/icons2.png') no-repeat top left;
    display: inline-block;
}
.icon.ic-treatment-1 {
    background-position: 0 0;
    width: 103px;
    height: 94px;
}
.icon.ic-treatment-2 {
    background-position: -104px 0;
    width: 110px;
    height: 87px;
}
.icon.ic-treatment-3 {
    background-position: 0 -95px;
    width: 83px;
    height: 96px;
}
.icon.ic-heart-pink {
    background-position: -84px -95px;
    width: 24px;
    height: 20px;
}
.icon.ic-zoom-in-pink {
    background-position: -108px -95px;
    width: 20px;
    height: 20px;
}
.icon.ic-est-simulation {
    background-position: -84px -116px;
    width: 18px;
    height: 22px;
}
.icon.ic-est-simulation-blue {
    background-position: -103px -116px;
    width: 18px;
    height: 22px;
}
.icon.ic-mail {
    background-position: -129px -95px;
    width: 22px;
    height: 18px;
}
.icon.ic-fb {
    background-position: -152px -95px;
    width: 18px;
    height: 18px;
}
.icon.ic-insta {
    background-position: -171px -95px;
    width: 18px;
    height: 18px;
}
.icon.ic-twitter {
    background-position: -190px -95px;
    width: 19px;
    height: 16px;
}
.icon.ic-arrow-right-red {
    background-position: -122px -116px;
    width: 18px;
    height: 14px;
}
.icon.ic-pdf {
    background-position: -141px -115px;
    width: 23px;
    height: 23px;
}
/* スプライトのic-mailは白のみ。アウトラインボタン用に青のメールアイコンを定義 */
.icon.ic-mail-blue {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23184f8b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='M22 6 12 13 2 6'/%3E%3C/svg%3E") no-repeat center center;
    background-size: contain;
    width: 20px;
    height: 20px;
    margin-right: 4px;
}

/* スプライト(icons2.png)にカートアイコンがないためインラインSVGで定義 */
.icon.ic-cart {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'/%3E%3C/svg%3E") no-repeat center center;
    background-size: contain;
    width: 19px;
    height: 19px;
    margin-right: 4px;
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .icon {
        background: url('../img/icons-retina2.png') no-repeat top left;
        background-size: 215px 192px;
    }
}