@charset "utf-8";

/*
************************************************************************
* こだわりPromise
* @copyright Revolme Inc.
************************************************************************
*/

/* ################################################################################################ */
/* ## PC                         ################################################################## */
/* ################################################################################################ */


.bg-promise {
    text-align: center;
    padding-top: 2em;
    margin-bottom: 2em;
}
.bg-promise .sub {
    display: inline-block;
    font-size: 0.75em;
    font-weight: 300;
    line-height: 1;
}
.bg-promise .main {
    display: block;
    padding: 0.5em 0 0.3em 0;
    font-size: 1.5625em;
    line-height: 1;

    background-image: url(../../img/page/promise/bg-promise-wh.svg);
    background-position: 50% 50%;
    background-repeat: no-repeat;
}
.section-wh .bg-promise .main {
    background-image: url(../../img/page/promise/bg-promise.svg);
}

.block-mascot:before {
    content: "";
    display: block;
    position: absolute;
    background-image: url(../../img/page/promise/mascot.svg);
    background-position: 50% 50%;
    background-repeat: no-repeat;
    width: 5em;
    height: 5em;
    top: -2em;
    left: 0;
    z-index: 1;
}
.block-mascot.block-mascot-right:before {
    background-image: url(../../img/page/promise/mascot-right.svg);
    top: auto;
    bottom: -2em;
    left: auto;
    right: 0;
}

/* ################################################################################################ */
/* ## スマホサイト用スタイル ###################################################################### */
/* ################################################################################################ */
@media screen and (max-width:640px) {
    .bg-promise .sub {
        font-size: 3.125vw;
    }
    .bg-promise .main {
        font-size: 6.25vw;
        padding: 1em 0 0.5em 0;
    }
}