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

page-flow.css　導入までの流れcss

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

/*============================================================
 common調整
*============================================================*/
/* 
---------------------------------------- */
#page-flow #main-contents {
    padding-bottom: 0;
}

/*============================================================
 セクション共通
*============================================================*/
/* 
---------------------------------------- */
#page-flow .section {

}

/*============================================================
 セクション 導入
*============================================================*/
#page-flow #sec-intro {
    margin-bottom: 160px;
}
#page-flow #sec-intro .inner {
    padding-bottom: 100px;
    border-bottom: solid 1px var(--common-color-border);
}
#page-flow #sec-intro .sec-catch {
    font-size: clamp(20px, calc(42 * var(--unit1240)), 42px);
    line-height: 140%;
    color: var(--common-color-main);
    margin-bottom: 40px;
}
#page-flow #sec-intro .sec-lead {
}


/*============================================================
 セクション 流れ
*============================================================*/
#page-flow #sec-flow {
    margin-bottom: 150px;
}
#page-flow #sec-flow .block-flow {
    display: flex;
    flex-direction: column;
    gap: 80px 0;
    counter-reset: flow-number 0;
}
#page-flow #sec-flow .block-flow .flow {
    position: relative;
    counter-increment: flow-number 1;
    background-color: var(--common-color-white);
}
/* #page-flow #sec-flow .block-flow .flow::before {
    content: counter(flow-number, decimal-leading-zero);
    display: block;
    font-family: var(--common-font-family-mincho);
    font-weight: 500;
    font-size: clamp(100px, 16.13vw, 200px);
    line-height: 100%;
    letter-spacing: 0.03em;
    color: #EAEAEA;
    text-box-trim: trim-start;
    text-box-edge: cap alphabetic;
    position: absolute;
    left: 40px;
    top: 0;
    transform: translateY(-50%);
} */
#page-flow #sec-flow .block-flow .flow .layout {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
#page-flow #sec-flow .block-flow .flow .layout .info {
    flex: 1;
    padding: 40px;
    display: flex;
    flex-direction: column;
    gap: clamp(20px, calc(40 * var(--unit1240)), 40px) 0;
}
#page-flow #sec-flow .block-flow .flow .layout .info .title {
    font-weight: 500;
    font-size: clamp(18px, calc(30 * var(--unit1240)), 30px);
    line-height: 140%;
    color: var(--common-color-main);
    padding-left: 20px;
    border-left: solid 4px var(--common-color-black);
}
#page-flow #sec-flow .block-flow .flow .layout .info .catch {
    font-weight: 500;
    font-size: clamp(20px, calc(36 * var(--unit1240)), 36px);
    line-height: 140%;
    color: var(--common-color-main);
}
#page-flow #sec-flow .block-flow .flow .layout .image {
    width: 21.6666%;
    padding: 20px 20px 20px 0;
}
#page-flow #sec-flow .block-flow .flow .flow-image {
    margin: 40px 20px;
    text-align: center;
}

/*============================================================
 セクション お問い合わせはこちらから
*============================================================*/
#page-flow #sec-contact {
    padding: 150px 0 0 0;
    background-color: var(--common-color-white);
    margin-bottom: 0;
}
#page-flow #sec-contact .block-contact {
    max-width: 826px;
    padding: 60px 50px;
    background-color: var(--common-color-background1);
    color: var(--common-color-white);
    text-align: center;
    margin: 0 auto;
}
#page-flow #sec-contact .block-contact .sec-title {
    font-size: clamp(20px, calc(32 * var(--unit1240)), 32px);
    line-height: normal;
    margin-bottom: 40px;
}
#page-flow #sec-contact .block-contact .sec-lead {
    margin-bottom: 40px;
}
#page-flow #sec-contact .block-contact .parts-btn {
    --width: 100%;
}



/*_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/
 Tablet
_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/*/
@media screen and (max-width: 1239px) {
    /*============================================================
     セクション
    *============================================================*/
    /* 
    ---------------------------------------- */
    #page-flow #sec-セクション名 {
    }

}



/*_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/
 SP
_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/*/
@media screen and (max-width: 767px) {
    /*============================================================
     セクション 導入
    *============================================================*/
    #page-flow #sec-intro {
        margin-bottom: 100px;
    }
    #page-flow #sec-intro .inner {
        padding-bottom: 60px;
    }
        
    /*============================================================
     セクション 流れ
    *============================================================*/
    #page-flow #sec-flow {
        margin-bottom: 60px;
    }
    #page-flow #sec-flow .block-flow {
        gap: 40px 0;
    }
    /* #page-flow #sec-flow .block-flow .flow::before {
        left: 20px;
    } */
    #page-flow #sec-flow .block-flow .flow .layout {
        flex-direction: column;
        align-items: unset;
    }
    #page-flow #sec-flow .block-flow .flow .layout .info {
        flex: unset;
        padding: 20px;
    }
    #page-flow #sec-flow .block-flow .flow .layout .image {
        width: 100%;
        max-width: 240px;
        padding: 20px;
        margin: 0 auto;
    }
    #page-flow #sec-flow .block-flow .flow .layout .image img {
        width: 100%;
    }
    #page-flow #sec-flow .block-flow .flow .flow-image {
        margin: 10px 20px 20px 20px;
    }

    /*============================================================
    セクション お問い合わせはこちらから
    *============================================================*/
    #page-flow #sec-contact {
        padding: 60px 0 0 0;
    }
    #page-flow #sec-contact .block-contact {
        padding: 40px 20px;
    }
    #page-flow #sec-contact .block-contact .parts-btn {
        --min-width: unset;
    }    
}