@charset "utf-8";

/* ==================================================================

    treatment-prevent.css

=================================================================== */

/* --------------------------------
■共通
-------------------------------- */

/* --------------------------------
■cleaning
-------------------------------- */
/* SP用
-------------------------------------------- */
@media only screen and (max-width : 767px) {

    #cleaning .itemList li{
        text-align: center;
    }
}

/* --------------------------------
■recommend
-------------------------------- */
#recommend .cseList{
    grid-template-columns: 1.15fr 0.85fr;
}
#recommend .cseList:not(:last-child){
    margin-bottom: 48px;
}
#recommend .cseList h4{
    font-size: 1.9rem;
    margin-bottom: 12px;
    line-height: 1.7;
}
#recommend .cseList .example{
    background: #F7F7F7;
    padding: 16px;
}
#recommend .cseList .example li{
    list-style: disc;
    margin-left: 1.8em;
}
#recommend .cseList .example li:not(:last-child){
    margin-bottom: 8px;
}

/* タブレット用
-------------------------------------------- */
@media (max-width: 1080px) and (min-width: 768px) {

}

/* SP用
-------------------------------------------- */
@media only screen and (max-width : 767px) {

    #recommend .cseList{
        grid-template-columns: 1fr;
        gap: 8px;
    }
}

/* --------------------------------
■cvArea
-------------------------------- */
#mainArea .cvArea .buttonStyle {
    max-width: 440px;
    margin: 60px auto 0;
}

/* --------------------------------
■feature
-------------------------------- */
#feature .wrap{
    grid-template-columns: 1.2fr 0.8fr;
}
#feature .description h4{
    font-size: 1.9rem;
    margin-bottom: 12px;
    line-height: 1.7;
}
#feature .imgArea{
    text-align: right;
}

/* タブレット用
-------------------------------------------- */
@media (max-width: 1080px) and (min-width: 768px) {

}

/* SP用
-------------------------------------------- */
@media only screen and (max-width : 767px) {

    #feature .wrap{
        grid-template-columns: 1fr;
        gap: 20px;
    }
    #feature .imgArea img{
        width: 100%;
    }
    
}

/* --------------------------------
■course
-------------------------------- */
#course .courseList{
    gap: 0;
}
#course .courseList dl{
    background-color: #EAEAEA;
}
#course .courseList dl.first{
    /*background-color: #E5CCDF;*/
}
#course .courseList dl:not(:last-child){
    border-right: 1px solid #fff;
}
#course .courseList dt{
    background-color: #C78BC9;
    padding: 20px 0;
    color: #fff;
    text-align: center;
    font-size: 1.9rem;
    border-bottom: 1px solid #fff;
}
#course .courseList dd{
    padding: 28px;
    box-sizing: border-box;
    text-align: center;
}
#course .courseList dd .price{
    font-size: 2.6rem;
    margin-bottom: 8px;
    text-align: center;
}
#course .courseList dd .price .tax{
    font-size: 1.4rem;
}
#course .courseList dd .time{
    background-color: #815482;
    color: #fff;
    padding: 4px 20px;
    border-radius: 20px;
    display: inline-block;
    font-size: 1.3rem;
    margin-bottom: 20px;
}
#course .courseList dd ul li{
    background-color: #fff;
    padding: 8px;
    position: relative;
    text-align: center;
}
#course .courseList dd ul li.em{
    background-color: #E5CCDF;
}
#course .courseList dd ul li:not(:last-child){
    margin-bottom: 24px;
}
#course .courseList dd ul li:not(:last-child):after{
    content: "";
    position: absolute;
    background: url(../../images/treatment/prevent/iconPlus.svg) 0 0 no-repeat;
    width: 13px;
    height: 13px;
    right: 0;
    left: 0;
    margin: 0 auto;
    bottom: -18px;
}

/* タブレット用
-------------------------------------------- */
@media (max-width: 1080px) and (min-width: 768px) {

}

/* SP用
-------------------------------------------- */
@media only screen and (max-width : 767px) {
    
    #course .courseList{
        gap: 20px;
    }
}


/* --------------------------------
■flow
-------------------------------- */
#flow .premium{
    display: inline-block;
    color: #fff;
    padding: 4px 16px;
    background-color: #815482;
    font-size: 1.3rem;
    border-radius: 20px;
    margin-bottom: 8px;
}

/* タブレット用
-------------------------------------------- */
@media (max-width: 1080px) and (min-width: 768px) {

}

/* SP用
-------------------------------------------- */
@media only screen and (max-width : 767px) {

    #flow .image{
        width: 100%;
    }
}