@charset "utf-8";

/*
************************************************************************
* お試し清掃
* @copyright Revolme Inc.
************************************************************************
*/

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

.confidence {
    padding: 1em 0;
    font-size: 1.2em;
    font-weight: bold;
    color: #009FE8;
}

/*
************************************************************************
 手順・流れ
************************************************************************
*/



.flow-wrapper
{

}

.flow-wrapper .flow-item
{
    border-left:4px solid #FCCC00;
    margin-left:calc((2.0rem*2.0/2) - 2px);
    padding-bottom: 2em;
}

.flow-wrapper .flow-item:last-child {
    border-left: 4px solid transparent;
}
.flow-title
{
    font-size:2.0rem;
    font-weight:bold;
    margin-left:calc((2.0rem*2.0/2)*-1);
    color: #009FE8;
}

.flow-title .accent
{
    display:block;
    float:left;

    border-radius:100%;
    width:calc(2.0rem*1.8);
    height:calc(2.0rem*1.8);

    border:2px solid #FCCC00;
    background-color:#FCCC00;

    color:#009FE8;
    text-align:center;
    letter-spacing: 0;
}

.flow-title .title
{
    display:block;
    margin-left:calc((2.0rem*1.8) + 10px);
    overflow:hidden;
}

.flow-contents
{
    padding-left:1em;
    margin-left:calc((2.0rem*1.8/2) - 2px);
}

.flow-wrapper .flow-item:last-child .flow-contents
{
    /*border-left:0px solid transparent;*/
}

.flow-item .telno {
    font-size: 2em;
    color: #009FE8;
    font-weight: bold;
}
.flow-item .time {
    font-weight: bold;
    padding-left: 0em;
    vertical-align: super;
}
.flow-item .phone-number:before {
    content: "";
    display: inline-block;
    background-image: url(../../img/common/ic-tel.svg);
    background-position: 0 100%;
    background-repeat: no-repeat;
    width: 1em;
    height: 1em;
}



.announce {
    padding: 1em 2em;
    background-color: #fff;
    border-radius: 1em;
}
.announce li {
    margin-bottom: 1em;
}
.announce .title {
    font-weight: bold;
    font-size: 1.6em;
    text-align: center;
    margin-bottom: 0.5em;
}


/* ################################################################################################ */
/* ## スマホサイト用スタイル ###################################################################### */
/* ################################################################################################ */
@media screen and (max-width:640px) {
    /*
    ************************************************************************
     手順・流れ
    ************************************************************************
    */

    .flow-wrapper
    {

    }

    .flow-wrapper .flow-item
    {
        border-left:4px solid #FCCC00;
        margin-left:calc((3.0rem*1.8/2) - 2px);
    }

    .flow-title
    {
        font-size:3.0rem;
        font-weight:bold;
        margin-left:calc((3.0rem*1.8/2) * (-1) - 2px);
    }

    .flow-title .accent
    {
        display:block;
        float:left;

        border-radius:100%;
        width:calc(3.0rem*1.8);
        height:calc(3.0rem*1.8);

        border:2px solid #FCCC00;
        background-color:#FCCC00;

        color: #009FE8;
        text-align:center;
    }

    .flow-title .title
    {
        display:block;
        margin-left:calc((3.0rem*1.8) + 10px);
        overflow:hidden;

    }

    .flow-contents
    {
        padding-left:1em;
        margin-left:calc((3.0rem*1.8/2) - 2px);
    }

    .flow-wrapper .flow-item:last-child .flow-contents
    {
        /*border-left:0px solid transparent;*/
    }

}