@import url("campaign-common.css");

.campaignWebBanner{
    background-color: #fff4da;
}
.campaignWebBanner .bannerBox {
    position: inherit;
    bottom: inherit;
    padding: 3rem 0 0;
}

.campaignWebBanner .bannerBox .btnBox {
    display: flex;
    justify-content: space-between;
    width: 580px;
    max-width: 580px;
    margin: 0 auto 12px;
}

.campaignWebBanner .bannerBox .btnBox .bannerBtn {
    margin: 0;
    width: 48.2%;
}

.campaignWebBanner .bannerBox .bannerBtn.phone a span::before {
    background-image: url(../img/campaign/icon-phone.svg);
}


#campaign-CleaningMonitor .areaCampaign .campaignBox .campaignOutlineBox{
    padding-top: 4rem;
    margin-top: 4rem;
    border-top: 1px dashed #06AC06;
}
#campaign-CleaningMonitor .areaCampaign .campaignBox .campaignTableHeading{
    font-size: 2rem;
    margin: 0 auto 2rem;
    max-width: 966px;
    color: #06AC06;
}
#campaign-CleaningMonitor .areaCampaign .campaignBox .listStep{
    flex-wrap: wrap;
    gap: 60px 0;
}
#campaign-CleaningMonitor .areaCampaign .campaignBox .listStep li .stepPhoto{
    width: 100%;
    margin-bottom: 0;
}
#campaign-CleaningMonitor  .areaCampaign .campaignBox .listStep li .stepPayment{
    font-size: 0.75em;
    padding: 1em;
    background-color: #e2ddc9;
    color: #333;
}

@media (max-width:1100px) and (min-width :769px) {}

/* TAB */
@media (max-width: 950px) and (min-width: 769px) {
    .campaignWebBanner .bannerBox {
        bottom: 1vw;
    }

    .campaignWebBanner .bannerBox .btnBox {
        margin-bottom: 5px;
    }
}

/* PC FHD */
@media(min-width:1281px) {

    .campaignWebBanner .bannerBox .bannerBtn a {
        font-size: 20px;
        padding: 22px 0 18px;
    }

    .campaignWebBanner .bannerBox .bannerBtn a span {
        padding: 4px 0 4px 19px;
    }

    .campaignWebBanner .bannerBox .bannerBtn a span::before {
        top: -0.1vw;
        left: -23px;
        width: 33px;
        height: 32px;
    }

    .campaignWebBanner .bannerBox .bannerBtn a span::after {
        top: 0.3vw;
        right: -27px;
    }

}

/* PC */
@media(min-width:769px) {
    .areaCampaign .campaignBox .listStep li .stepBox {
        padding-top: 22px;
        padding-bottom: 13px;
    }

    .areaCampaign .campaignBox .listStep li .stepPhoto {
        margin-bottom: 22px;
    }
}

/* SP */
@media(max-width:768px) {

    .campaignWebBanner .bannerPhoto img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: top;
        max-height: 1113px;
    }
    #campaign-CleaningMonitor .campaignWebBanner .bannerBox .bannerTxt{
        font-size: 2.6vw;
    }
    #campaign-CleaningMonitor .areaCampaign .campaignBox .campaignIntroduce{
        text-align: left;
    }
    #campaign-CleaningMonitor .areaCampaign .campaignBox .campaignTable>li .name{
        width: 100px;
    }
    #campaign-CleaningMonitor .areaCampaign .campaignBox .campaignTable>li .campaignCnt{
        width: calc( 100% - 100px);
    }
    #campaign-CleaningMonitor .areaCampaign .campaignBox .listStep{
        gap: 0;
    }
    #campaign-CleaningMonitor .areaCampaign .campaignBox .listStep li .stepBox{
        padding-top: 0;
    }

    .campaignWebBanner .bannerBox .btnBox {
        width: 100%;
        padding: 0 6.6%;
        flex-direction: column;
    }

    .campaignWebBanner .bannerBox .btnBox .bannerBtn {
        width: 100%;
        margin-bottom: 10px;
    }

    .campaignWebBanner .bannerBox .btnBox .bannerBtn:last-child {
        margin-bottom: 0;
    }

    .areaCampaign .campaignBox .campaignIntroduce .introTitle {
        font-size: 20px;
    }

    .campaignWebBanner .bannerBox .bannerBtn.phone a span {
        padding-left: 1.5vw;
        padding-bottom: 1.5vw;
    }

    .campaignWebBanner .bannerBox .bannerBtn.phone a span::before {
        width: 7.9vw;
        height: 7.4vw;
        top: -1vw;
        left: -8.5vw;
    }
}