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

/*--------------------------------------------------------------------------------------------------------------------------------------------------------
	index.html
--------------------------------------------------------------------------------------------------------------------------------------------------------*/
.subheadingTxt { margin-top: 50px; }

@media screen and (max-width: 750px) {
    .subheadingTxt { margin-top: 22px; font-size: 1.06rem; }
}

#workFlowSec { background-color: #edeef2; border-top: solid 3px #094; margin-top: 42px; padding: 60px 20px 55px; text-align: center; }
#workFlowSec h2 { font-size: 1.25rem; font-weight: 400; line-height: 1.5; }
#workFlowSec h2 span { font-size: 2rem; font-weight: 500; display: block; }
#workFlowSec div { margin: 30px auto 0; max-width: 1032px; }

@media screen and (max-width: 750px) {
    #workFlowSec { margin-top: 23px; border-top-width: 2px; padding: 25px 20px 30px; }
    #workFlowSec h2 { font-size: 1rem; }
    #workFlowSec h2 span { font-size: 1.4rem; }
    #workFlowSec div { margin: 18px auto 0; width: 85%; }
}

#workFlowList { margin-top: 40px; }
#workFlowList > li { position: relative; border-bottom: dashed 1px #aca8a7; padding: 45px 25px 48px; display: flex; flex-wrap: wrap; }
#workFlowList > li:first-child { padding-top: 0; }
#workFlowList > li::before { content: ""; display: block; width: 32px; height: 22px; position: absolute; left: 70px; top: -1px; background: url("/cycle_rack_step/images/cycle_rack_step_flow_bg.webp") no-repeat left top; }
#workFlowList > li:first-child::before { display: none; }
#workFlowList li .workFlowListNum { font-family: "Oswald", sans-serif; font-size: 4.37rem; font-weight: 200; line-height: 1; color: #8d8d8d; width: 112px; text-align: center; }
#workFlowList li .workFlowListInfo { margin-left: 67px; width: calc(100% - 179px); align-self: center; }
#workFlowList li .workFlowListInfo .subheadingColorTxt { margin-top: 0; font-weight: 450; }
#workFlowList li .workFlowListInfo .subheadingColorTxt + p { margin-top: 3px; }

#workFlowList li#flowList01 .contactArea { width: calc(100% - 179px); margin: 20px 0 0 179px; }

#workFlowList li #flow02List { width: calc(100% - 179px); margin: 16px 0 0 186px; display: flex; }
#workFlowList li #flow02List li { background-color: #f6f6f6; width: 24%; max-width: 196px; min-height: 146px; display: flex; justify-content: center; align-items: center; text-align: center; border-radius: 50%; }
#workFlowList li #flow02List li:nth-child(n+2) { margin-left: 2.4%; }

@media screen and (max-width: 920px) {
    #workFlowList li #flow02List { flex-wrap: wrap; }
    #workFlowList li #flow02List li { max-width: 240px; min-height: 125px; width: 48%; }
    #workFlowList li #flow02List li:nth-child(3) { margin-left: 0; }
    #workFlowList li #flow02List li:nth-child(n+3) { margin-top: 10px; }
}

#workFlowList li .workFlowListInfo #flow03Area { margin-top: 10px; }
#workFlowList li .workFlowListInfo #flow03Area h4 { font-weight: 450; }
#workFlowList li .workFlowListInfo #flow03Area div { margin-top: 7px; }
#workFlowList li .workFlowListInfo #flow03Area div .iconArrow { width: 290px; }
#workFlowList li .workFlowListInfo #flow03Area div .iconArrow span { width: 95%; }

#workFlowList li #flow05Area { flex: 1; align-self: flex-start; width: auto; }
#workFlowList li #flow05InfoImg { max-width: 421px; margin-left: 20px; margin-right: 10px; }

#workFlowList li#informationSession { background-color: #f6f6f6; padding: 40px 25px 30px; }
#workFlowList li#informationSession::before { background-image: url("/cycle_rack_step/images/cycle_rack_step_flow_bg_white_gray.webp"); }
#workFlowList li#informationSession .workFlowListNum img { border-radius: 50%; }
#workFlowList li#informationSession + li::before { background-image: url("/cycle_rack_step/images/cycle_rack_step_flow_bg_gray_white.webp"); }

#workFlowList li#manufacturingItem { background-color: #094; }
#workFlowList li#manufacturingItem::before { background-image: url("/cycle_rack_step/images/cycle_rack_step_flow_bg_white_green.webp"); }
#workFlowList li#manufacturingItem + li::before { background-image: url("/cycle_rack_step/images/cycle_rack_step_flow_bg_green_white.webp"); }
#workFlowList li#manufacturingItem .workFlowListNum { color: #8dc6a0; }
#workFlowList li#manufacturingItem .workFlowListInfo .subheadingColorTxt { color: #fff; }

#workFlowList li#deliveryItem { background-color: #f2faf5; }
#workFlowList li#deliveryItem::before { background-image: url("/cycle_rack_step/images/cycle_rack_step_flow_bg_white_moss.webp"); }
#workFlowList li#deliveryItem + li::before { background-image: url("/cycle_rack_step/images/cycle_rack_step_flow_bg_moss_white.webp"); }

#workFlowList li#afterFollowItem { padding-left: 0; padding-right: 0; border-bottom: none; padding-bottom: 0; }
#workFlowList li#afterFollowItem .workFlowListInfo { margin: 0; background-color: #005bac; color: #fff; padding: 25px 45px 35px; border-radius: 10px; width: 100%; }
#workFlowList li#afterFollowItem .workFlowListInfo .workFlowListNum { color: #fff; }
#workFlowList li#afterFollowItem .workFlowListInfo .subheadingColorTxt { color: #fff; }

#contactBtmArea { margin: 60px auto 0; padding: 28px 40px; text-align: center; }
#contactBtmArea .contactBtnInner .iconMail { margin-top: 12px; max-width: 380px; }
#contactBtmArea .contactNumInner { border-top: solid 1px #ccc; margin-top: 18px; padding-top: 14px; }
#contactBtmArea .contactNumInner .iconPhone { display: inline-block; padding-right: 25px; }

@media screen and (max-width: 980px) {
    #workFlowList li #flow05Area { width: calc(100% - 179px); flex: auto; }
    #workFlowList li #flow05InfoImg { width: calc(100% - 179px); margin: 20px 0 0 186px; }
}

@media screen and (max-width: 750px) {
    .contactArea .contactBtnInner .iconMail { width: 100%; }
    
    #workFlowList { margin-top: 22px; }
    #workFlowList > li { padding: 24px 10px 30px; }
    #workFlowList > li::before { left: 25px; width: 25px; background-size: contain; }
    #workFlowList li .workFlowListNum { width: 65px; text-align: left; font-size: 3.33rem; }
    #workFlowList li .workFlowListInfo { margin: 0; flex: 1; width: auto; }
    #workFlowList li .workFlowListInfo .subheadingColorTxt { font-size: 1.2rem; }
        
    #workFlowList li#flowList01 .contactArea { width: 100%; margin: 15px 0 0; }
    #workFlowList li #flow02List { width: 100%; margin: 13px 0 0; }
    #workFlowList li #flow02List li { font-size: 0.92rem; min-height: 110px; }
    #workFlowList li .workFlowListInfo #flow03Area div .iconArrow { max-width: 290px; width: 100%; }
    #workFlowList li #flow05InfoImg { width: 96%; margin: 15px auto 0; }
    
    #workFlowList li#informationSession { padding: 33px 25px 22px 10px; }
    #workFlowList li#informationSession .workFlowListNum { max-width: 52px; }
    #workFlowList li#informationSession .workFlowListInfo { margin-left: 12px; }
    
    #workFlowList li#afterFollowItem { padding-top: 28px; }
    #workFlowList li#afterFollowItem .workFlowListInfo { padding: 17px 25px 20px; border-radius: 5px; }
    
    .contactArea { margin-top: 32px; }
}