@charset "UTF-8";


/* top */
@media screen and (min-width: 750px) {
    #pf .top {
        background: url("../images/menu/photofacial/pc/pf_top_bg_pc.jpg") no-repeat center center;
        background-size: cover;
    }

    #pf .top img {
        margin: 0 auto;
    }
}

@media screen and (max-width: 1000px) {
    #pf .top img {
        max-width: 95%;
    }
} 

@media screen and (max-width: 750px) {
    #pf .top img {
        max-width: 100%;
    }
} 

/* sec01 */
@media screen and (min-width: 750px) {
    #pf .sec01 {
        position: relative;
        padding-top: 140px;
    }

    #pf .sec01 h3 {
        background: url(../images/menu/photofacial/pc/sec1_heading_pc.png) no-repeat center center;
        height: 145px;
        margin-top: 0;
        position: absolute;
        top: -8px;
        left: 50%;
        transform: translateX(-50%);
        width: 100%;
    }

    #pf .sec01 .inner {
        padding: 40px 0 40px;
    }
    #pf .sec01 ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;;
    }

    #pf .sec01 ul li {
        width: 46%;
        margin: 0 20px 40px;
    }
}

@media screen and (max-width: 1000px) {
    #pf .sec01 ul li {
        width: 45%;
    }
}

@media screen and (max-width: 800px) {
    #pf .sec01 ul li {
        width: 100%;
    }
}


/* sec02 */
@media screen and (min-width: 750px) {
    #pf .sec02 {
        padding-bottom: 53px;
        background: #dff0f8;
    }

    #pf .sec02 .bg_area_pc {
        background: 
        url("../images/menu/photofacial/pc/sec2_bg_pc_l.jpg") no-repeat left,
        url("../images/menu/photofacial/pc/sec2_bg_pc_r.jpg") no-repeat right;
        background-size: contain;
        background-color: #b5dff3;
    }

    #pf .sec02 .heading_area h3 {
        width: 560px;
        max-width: 55%;
        margin: 0 auto;
    }

    #pf .sec02 .inner {
        padding: 0 5% 60px;
    }

    #pf .sec02 .img_wrap .ttl_area h4 {
        width: 500px;
        line-height: 1.7;
        top: 8%;
        font-size: 3.3rem;
    }

    #pf .sec02 .img_wrap .ttl_area h4 .txt_m{
        font-size: 5.2rem;
    }

    #pf .sec02 .img_wrap .ttl_area h4 .txt_s {
        font-size: 4.3rem;
    }

    #pf .sec02 .img_wrap .checkbox {
        width: 45%;
        margin: -396px 0 0 50px;
    }

    #pf .sec02 .img_wrap .checkbox::before {
        content: '';
        width: 100%;
        height: 95%;
        position: absolute;
        top: 2%;
        left: 1%;
        background: #fff;
    }

    #pf .sec02 .img_wrap .checkbox .border_wrap {
        padding: 30px 10px 20px 30px;
    }

    #pf .sec02 .img_wrap .checkbox .border_wrap ul li .p_txt {
        font-size: 2.1rem;
        font-feature-settings: "palt";
    }

}

@media screen and (max-width: 1000px) {
    #pf .sec02 .img_wrap .ttl_area h4 {
        font-size: 3.3vw;
    }

    #pf .sec02 .img_wrap .ttl_area h4 .txt_m{
        font-size: 5.3vw;
    }

    #pf .sec02 .img_wrap .ttl_area h4 .txt_s {
        font-size: 4.3vw;
    }

    #pf .sec02 .img_wrap .checkbox .border_wrap ul li .p_txt {
        font-size: 2vw;
    }

    #pf .sec02 .img_wrap .checkbox {
        width: 45%;
        margin: -38% 0 0 50px;
    }
}

@media screen and (max-width: 750px) {
    #pf .sec02 .inner {
        padding: 0 5% 8%;
    }

    #pf .sec02 .img_wrap .ttl_area h4 {
        font-size: 5vw;
    }

    #pf .sec02 .img_wrap .ttl_area h4 .txt_m{
        font-size: 9.5vw;
    }

    #pf .sec02 .img_wrap .ttl_area h4 .txt_s {
        font-size: 6.9vw;
    }

    #pf .sec02 .img_wrap .checkbox .border_wrap ul li .p_txt {
        font-size: 4.3vw;
    }

    #pf .sec02 .img_wrap .checkbox .border_wrap ul li .txt_s {
        font-size: 4vw;
        letter-spacing: -.01em;
    }

    #pf .sec02 .img_wrap .checkbox {
        width: 95%;
        margin: -22% auto 0;
    }
}

/* sec03 */
@media screen and (min-width: 750px) {
    #pf .sec03 {
        position: relative;
        padding-top: 220px;
    }

    #pf .sec03 h3 {
        background: url(../images/menu/photofacial/pc/sec3_heading_pc.png) no-repeat center center;
        height: 222px;
        margin-top: 0;
        position: absolute;
        top: -12px;
        left: 50%;
        transform: translateX(-50%);
        width: 100%;
    }

    #pf .sec03 .inner_3 {
        padding: 0 0;
    }

    #pf .sec03 .txt_area {
        padding: 30px 0 40px;
    }

    #pf .sec03 .pc_inner {
        padding: 0 100px;
    }

    #pf .sec03 .img_wrap {
        position: relative;
        margin: 0 0;
        transform: scale(1);
        width: 47%;
    }

    #pf .sec03 .wrap_bottom {
        width: 47%;
    }

    #pf .sec03 .order .pc {
        background: url("../images/menu/photofacial/pc/order_pc.jpg") no-repeat top center;
        width: 100%;
        height: 1133px;
        background-size: cover;
    }
}

@media screen and (max-width: 1000px) {
    #pf .sec03 {
        padding-top: 22%;
    }

    #pf .sec03 h3 {
        top: -1.5%;
    }

    #pf .sec03 .pc_inner {
        padding: 0 50px;
    }

    #pf .sec03 .order .pc {
        background: url("../images/menu/photofacial/pc/order_tab.jpg") no-repeat top center;
        width: 100%;
        height: auto;
        aspect-ratio: 1003 / 1133;
        background-size: cover;
    }
}

@media screen and (max-width: 900px) {
    #pf .sec03 {
        padding-top: 25%;
    }

    #pf .sec03 h3 {
        top: -2%;
    }
}

@media screen and (max-width: 800px) {
    #pf .sec03 h3 {
        top: -2.5%;
    }
}

@media screen and (max-width: 750px) {
    #pf .sec03 {
        padding-top: 0;
    }

    #pf .sec03 .pc_inner {
        padding: 0 0;
    }
}

/* sec04 */
@media screen and (min-width: 750px) {
    #pf .sec04 .inner {
        padding: 40px 50px 80px;
    }

    #pf .sec04 .heading_wrap {
        justify-content: space-between;
        padding: 0 40px 0 0;
        margin-bottom: 30px;
    }

    #pf .sec04 h3 {
        font-size: 4rem;
    }

    #pf .sec04 .heading_wrap figure {
        max-width: 254px;
    }

    #pf .sec04 .p_txt {
        font-size: 2rem;
    }
}

/* sec05 */
@media screen and (min-width: 750px) {
    #pf .sec05 {
        position: relative;
        padding-top: 190px;
    }

    #pf .sec05 h3 {
        background: url(../images/menu/photofacial/pc/sec5_heading_pc.png) no-repeat center center;
        height: 222px;
        margin-top: 0;
        position: absolute;
        top: -12px;
        left: 50%;
        transform: translateX(-50%);
        width: 100%;
    }

    #pf .sec05 .btn_area {
        position: relative;
        margin: 70px 0 0;
    }

    #pf .sec05 .btn_area .border_area .ttl_area {
        top: -35px;
        width: 464px;
    }

    #pf .sec05 .btn_area .border_area .ttl_area h4 {
        font-size: 2.5rem;
        top: 24%;
        width: 100%;
    }

    #pf .sec05 .btn_area .border_area {
        padding: 20px 50px 20px;
    }

    #pf .sec05 .btn_area .border_area .flex {
        align-items: flex-start;
    }

    #pf .sec05 .btn_area .border_area .flex .p_txt {
        padding-top: 30px;
        width: 80%;
    }

    #pf .sec05 .btn_area .border_area .flex figure {
        width: 130px;
    }

    #pf .sec05 .btn_area .btn {
        width: 492px;
    }
}

@media screen and (max-width: 1000px) {
    #pf .sec05 .btn_area .border_area .ttl_area {
        top: -11.5%;
        width: 52%;
    }

    #pf .sec05 .btn_area .border_area .ttl_area h4 {
        font-size: 2.5vw;
        top: 24%;
        width: 100%;
    }

    #pf .sec05 .btn_area .border_area {
        padding: 2% 5% 3%;
    }

    #pf .sec05 .btn_area .border_area .flex figure {
        width: 16%;
    }

    #pf .sec05 .btn_area .btn {
        width: 52%;
    }
}

@media screen and (max-width: 850px) {
    #pf .sec05 .btn_area .border_area {
        padding: 1% 5% 6%;
    }
}

@media screen and (max-width: 750px) {
    #pf .sec05 .btn_area .border_area .ttl_area {
        top: -9%;
        width: 90%;
    }

    #pf .sec05 .btn_area .border_area .ttl_area h4 {
        font-size: 4.4vw;
        top: 24%;
        width: 100%;
    }

    #pf .sec05 .btn_area .border_area {
        padding: 8% 4% 24%;
    }

    #pf .sec05 .btn_area .border_area .flex figure {
        width: 23%;
    }

    #pf .sec05 .btn_area .btn {
        width: 100%;
    }
}

/* sec06 */
@media screen and (min-width: 750px) {
    #pf .sec06 h3 img {
        margin: 0 auto;
    }

    #pf .sec06 .fee_list dd .price_list {
        padding: 20px 0 15px;
        align-items: center;
        justify-content: center;
    }

    #pf .sec06 .fee_list dd .hands {
        padding: 30px 0 25px;   
    }

    #pf .sec06 .fee_list dd .border_top {
        border-top: 3px solid #89cded;
    }

    #pf .sec06 .fee_list dd .p_txt {
        line-height: 1;
        font-size: 1.8rem;
        width: 39%;
        text-align: right;
    }

    #pf .sec06 .fee_list dd .circle {
        margin-right: 6%;
        padding: 3.2% 2.4%;
    }

    #pf .sec06 .fee_list dd .circle2 {
    padding: 3.2% 2% 1.9%;
}

    #pf .sec06 .fee_list dd .add_mr {
        margin-right: 4%;
    }
}