/*
************************************************************************
* アイコン
* @copyright Revolme Inc.
************************************************************************
*/

.icon:before,
.icon:after {
    content: "";
    display: inline-block;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    vertical-align: text-bottom;
}
.icon-out-link:after {
    margin-left: 0.5em;
    vertical-align: baseline;
    width: 1em;
    height: 1em;
    background-image: url(../../img/common/icon/ic-out-link.svg);
}
.icon-out-link.icon-out-link-s:after {
    width: 0.75em;
    height: 0.75em;
}

.icon-out-link-wh:after {
    margin-left: 0.5em;
    vertical-align: baseline;
    width: 1em;
    height: 1em;
    background-image: url(../../img/common/icon/ic-out-link-wh.svg);
}
.icon-faq:after {
    margin-left: 0.5em;
    vertical-align: top;
    width: 1em;
    height: 1em;
    background-image: url(../../img/icon/page/faq.svg);
}
.icon-flow:after {
    margin-left: 0.5em;
    vertical-align: top;
    width: 1em;
    height: 1em;
    background-image: url(../../img/icon/page/flow.svg);
}

.icon.mail:before {
    width: 1.5em;
    height: 1.5em;
    margin-right: 0.3em;
    background-image: url(../../img/icon/mail.svg);
}
.icon.tel:before {
    width: 1em;
    height: 1em;
    margin-right: 0.3em;
    background-image: url(../../img/icon/tel.svg);
    vertical-align: middle;
}
.studio-detail .icon.tel:before {
    width: 1.5em;
    height: 1.5em;
}
.icon-ios:after {
    background-image: url(../../img/icon/ios.svg);
    width: 2.8125vw;
    height: 3.125vw;
    margin-left: 0.3em;
    vertical-align: middle;
}
.icon-android:after {
    background-image: url(../../img/icon/android.svg);
    width: 3.125vw;
    height: 3.6vw;
    margin-left: 0.3em;
    vertical-align: middle;
}
.icon-line:before {
    background-image: url(../../img/common/icon/line-button.svg);
    width: 40px;
    height: 40px;
    margin-right: 1em;
    vertical-align: middle;
}
.icon-point::before {
    background-image: url(../../img/icon/point.svg);
    width: 2em;
    height: 2em;
    margin-right: 0.4em;
    vertical-align: middle;
}




#footer .footer-service-item .icon:before {
    width: auto;
    height: 2em;
    margin-bottom: 1em;
    display: block;
    background-position: 50% 0;
}
#footer .footer-service-item .icon.icon-studio:before {
    background-image: url(../../img/icon/page/studio.svg);
}
#footer .footer-service-item .icon.icon-price:before {
    background-image: url(../../img/icon/page/price.svg);
}
#footer .footer-service-item .icon.icon-costume-gallery:before {
    background-image: url(../../img/icon/page/costume-gallery.svg);
}
#footer .footer-service-item .icon.icon-photo-gallery:before {
    background-image: url(../../img/icon/page/photo-gallery.svg);
}
#footer .footer-service-item .icon.icon-item:before {
    background-image: url(../../img/icon/page/item.svg);
}
#footer .footer-service-item .icon.icon-faq:before {
    background-image: url(../../img/icon/page/faq.svg);
}
#footer .footer-service-item .icon.icon-faq:after {
    margin-left: 0em;
    background: none;
    display: none;
}

/* ################################################################################################ */
/* ## TAB                        ################################################################## */
/* ################################################################################################ */
@media screen and (max-width:1320px) {

}

/* ################################################################################################ */
/* ## スマホサイト用スタイル ###################################################################### */
/* ################################################################################################ */

@media screen and (max-width:640px) {
    .icon-out-link:after {
        margin-left: 0.5em;
        vertical-align: baseline;
        width: 2.5vw;
        height: 2.5vw;
    }
    .icon-out-link-wh:after {
        margin-left: 0.5em;
        vertical-align: baseline;
        width: 2.5vw;
        height: 2.5vw;
        background-image: url(../../img/common/icon/ic-out-link-wh.svg);
    }
    .icon-line:before {
        background-image: url(../../img/common/icon/line-button.svg);
        width: 8vw;
        height: 6.25vw;
        margin-right: 1em;
        vertical-align: middle;
    }
    #footer .footer-service-item .icon:before {
        width: 1.8em;
        height: 1.8em;
        margin-bottom: 0em;
        margin-right: 1em;
        background-position: 0 50%;
        display: inline-block;
    }
    .icon-point::before {
        width: 2.5em;
        height: 2.5em;
    }
}