@charset "UTF-8";
/********************************************************************************

page-flow.ご依頼の流れcss

********************************************************************************/

/*============================================================
 メインビジュアル
*============================================================*/
/* 
---------------------------------------- */
#page-flow [id^="mainvisual"] {
    margin-bottom: 96px;
}

/*============================================================
 セクション共通
*============================================================*/
/* 
---------------------------------------- */
#page-flow .section {
    margin-bottom: 64px;
}

/*============================================================
 セクション 珪藻土
*============================================================*/
#page-flow #sec-diatomaceous {
    margin-bottom: 64px;
}
#page-flow #sec-diatomaceous .parts-btn {
    --margin: 0 auto
}

/*============================================================
 セクション 流れ
*============================================================*/
#page-flow #sec-flow {
    /* margin-bottom: 64px; */
}
#page-flow #sec-flow .block-flow .flow .summary .info .layout {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
#page-flow #sec-flow .block-flow .flow .summary .info .btn-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
#page-flow #sec-flow .block-flow .flow:nth-child(3) .summary .info .btn-list {
    flex-wrap: wrap;
    flex-direction: row;
}
#page-flow #sec-flow .block-flow .flow .summary .info .tips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    text-decoration: underline;
    color: #0460AB;
}
#page-flow #sec-flow .block-flow .flow .summary .info .tips::before {
    display: block;
    content: "";
    width: 16px;
    height: 16px;
    border-radius: 100%;
    background-color: #67758A;
    background-image: url(../images/common/icon-tips.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 16px auto;
}
#page-flow #sec-flow .block-flow .flow .summary .info .layout [class^="deliver-"] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-weight: bold;
    font-size: 20px;
}
#page-flow #sec-flow .block-flow .flow .summary .info .layout [class^="deliver-"]::before {
    display: block;
    content: "";
    width: 24px;
    height: 22px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 24px auto;
}
#page-flow #sec-flow .block-flow .flow .summary .info .layout .deliver-mail::before {
    background-image: url(../images/flow/flow-icon-deliver-mail.svg);
}
#page-flow #sec-flow .block-flow .flow .summary .info .layout .deliver-bring::before {
    background-image: url(../images/flow/flow-icon-deliver-bring.svg);
}
#page-flow #sec-flow .block-flow .flow .summary .info .layout [class^="deliver-"] span {
    flex: 1;
}

/*============================================================
 セクション 導線
*============================================================*/
#page-flow #sec-conductor {
}
#page-flow #sec-conductor .parts-btn {
    --margin: 0 auto
}



/*_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/
 Tablet
_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/*/
@media screen and (max-width: 1127px) {
    /*============================================================
     メインビジュアル
    *============================================================*/
    /* 
    ---------------------------------------- */
    #page-flow #mainvisual  {
    }

    /*============================================================
     セクション
    *============================================================*/
    /* 
    ---------------------------------------- */
    #page-flow #sec-セクション名 {
    }

}



/*_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/
 SP
_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/*/
@media screen and (max-width: 767px) {
    /*============================================================
     メインビジュアル
    *============================================================*/
    /* 
    ---------------------------------------- */
    #page-flow #mainvisual  {
    }

    /*============================================================
     セクション
    *============================================================*/
    /* 
    ---------------------------------------- */
    #page-flowtop #sec-セクション名 {
    }

}