@charset "UTF-8";

/* 
juvelook
------------------------ 
*/

/* common */



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

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

    #jl .sec01 .inner {
        padding: 40px 20px 40px 50px;
    }

    #jl .sec01 .heading_area {
        margin-bottom: 20px;
    }

    #jl .sec01 .heading_area .p_txt {
        font-size: 3.4rem;
        line-height: 1.6;
    }

    #jl .sec01 .heading_area h3 {
        font-size: 7.7rem;
    }

    #jl .sec01 .heading_area h3 span {
        font-size: 5.7rem;
    }

    #jl .sec01 .p_txt {
        padding: 0 0;
        margin-bottom: 10px;
    }

    #jl .sec01 .flex_pc {
        align-items: center;
        justify-content: space-between;
    }

    #jl .sec01 .flex_pc .p_txt {
        padding: 0 20px;
        margin-bottom: 0;
        width: 51%;
        font-feature-settings: "palt";
    }

    #jl .sec01 .flex_pc figure {
        width: 47%;
    }
}

@media screen and (max-width: 1000px) {
    #jl .sec01 .inner {
        padding: 30px 20px 40px 20px;
    }
}

@media screen and (max-width: 750px) {
    #jl .sec01 .inner {
        padding: 6% 3% 6%;
    }
}

/* section02 */
@media screen and (min-width: 750px) {
    #jl .sec02 .heading_area {
        padding: 60px 50px;
        background-position: bottom 20px left 50px;
    }

    #jl .sec02 .heading_area .txt_wrap {
        width: 75%;
    }

    #jl .sec02 .heading_area .txt_wrap .bg_txt {
        font-size: 3.1rem;
    }

    #jl .sec02 .heading_area .txt_wrap h3 {
        font-size: 3.6rem;
    }

    #jl .sec02 .heading_area .txt_wrap h3 .txt_s {
        font-size: 2.7rem;
    }

    #jl .sec02 .heading_area .txt_wrap h3 .blue_txt {
        font-size: 6.8rem;
        display: block;
        text-align: center;
        border-bottom: 1px solid;
        width: 500px;
        margin: 0 auto;
    }

    #jl .sec02 .heading_area .txt_wrap h3 .blue_txt .txt_s {
        font-size: 5.4rem;
    }

    #jl .sec02 .inner {
        padding: 0 50px 50px;
        margin-top: -20px;
    }

    #jl .sec02 .w_bg {
        padding: 40px 50px;
    }

    #jl .sec02 .inner .p_txt {
        font-size: 1.8rem;
    }
} 

@media screen and (max-width: 1000px) {
    #jl .sec02 .heading_area .txt_wrap .bg_txt {
        font-size: 3.1vw;
    }

    #jl .sec02 .heading_area .txt_wrap h3 {
        font-size: 3.6vw;
    }

    #jl .sec02 .heading_area .txt_wrap h3 .txt_s {
        font-size: 2.7vw;
    }

    #jl .sec02 .heading_area .txt_wrap h3 .blue_txt {
        font-size: 6.8vw;
    }

    #jl .sec02 .heading_area .txt_wrap h3 .blue_txt .txt_s {
        font-size: 5.4vw;
    }

    #jl .sec02 .heading_area .txt_wrap h3 .blue_txt {
        border-bottom: 1px solid;
        width: 75%;
    }
}

@media screen and (max-width: 750px) {
    #jl .sec02 .heading_area .txt_wrap .bg_txt {
        font-size: 4.3vw;
    }

    #jl .sec02 .heading_area .txt_wrap h3 {
        font-size: 4.5rem;
    }

    #jl .sec02 .heading_area .txt_wrap h3 .txt_s {
        font-size: 3.6rem;
    }

    #jl .sec02 .heading_area .txt_wrap h3 .blue_txt {
        font-size: 5.3rem;
    }

    #jl .sec02 .heading_area .txt_wrap h3 .blue_txt .txt_s {
        font-size: 4.2rem;
    }
}

/* section03 */
@media screen and (min-width: 750px) {
    #jl .sec03 {
        background: url(../images/menu/juvelook/pc/sec3_bg_pc.jpg) no-repeat top center;
        background-size: cover;
    }

    #jl .sec03 .inner {
        padding: 40px 50px;
    }

    #jl .sec03 .heading_area p {
        margin: 0 auto;
        width: 250px;
    }

    #jl .sec03 .heading_area h3 {
        font-size: 6.3rem;
    }

    #jl .sec03 .heading_area h3 .txt_s {
        font-size: 5.4rem;
    }

    #jl .sec03 .heading_area .circle {
        width: 95px;
        font-size: 2.5rem;
    }

    #jl .sec03 .w_bg {
        padding: 40px 40px 30px;
        margin-top: 10px;
    }

    #jl .sec03 .w_bg figure {
        width: 28%;
    }

    #jl .sec03 .w_bg .rec_list {
        width: 61%;
    }

    #jl .sec03 .w_bg .rec_list ul li {
        margin-bottom: 10px;
    }

    #jl .sec03 .w_bg .rec_list ul li .p_txt {
        font-size: 2.4rem;
    }

    #jl .sec03 .w_bg .rec_list ul li:before {
        content: '';
        width: 30px;
        left: -45px;
        top: 15px;
    }
}

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

    #jl .sec04 .heading_area {
        margin-bottom: 30px;
    }

    #jl .sec04 .heading_area .p_txt {
        font-size: 3rem;
        width: 260px;
        margin: 0 auto 20px;
        line-height: 1.6;
    }

    #jl .sec04 .heading_area h3 {
        font-size: 5.8rem;
    }

    #jl .sec04 .heading_area h3 .txt_s {
        font-size: 5rem;
    }

    #jl .sec04 .txt_wrap {
        width: 68%;
    }

    #jl .sec04 .txt_wrap .p_txt {
        font-size: 1.8rem;
        font-feature-settings: "palt";
    }

    #jl .sec04 .txt_wrap .flex .p_txt {
        width: 100%;
        font-size: 1.6rem;
        font-feature-settings: "palt";
    }

    #jl .sec04 .txt_wrap .flex {
        margin-top: 0;
    }

    #jl .sec04 .txt_wrap figure {
        width: 32%;
    }
}

/* section05 */
@media screen and (min-width: 750px) {
    #jl .sec05 {
        background: url(../images/menu/juvelook/pc/sec5_bg_pc.jpg) no-repeat;
        background-size: cover;
        padding-top: 40px;
    }

    #jl .sec05 .heading_area {
        padding: 0 100px 40px 100px;
        background-position: bottom 40px left 100px;
    }

    #jl .sec05 .heading_area .txt_wrap {
        margin-left: auto;
        width: 482px;
        padding: 20px 0 0 30px;
    }

    #jl .sec05 .heading_area .txt_wrap .h3_1 {
        font-size: 3.9rem;
    }

    #jl .sec05 .heading_area .txt_wrap .h3_2 {
        font-size: 4.5rem;
        background: url(../images/menu/juvelook/sec5_shaape.png) no-repeat bottom left;
        background-size: contain;
        padding: 0 0 2% 2%;
        text-shadow: 5px 5px 5px #fff, -5px 5px 5px #fff, 5px -5px 5px #fff, -5px -5px 5px #fff;
    }

    #jl .sec05 .heading_area .txt_wrap .h3_2 .blue_txt {
        font-size: 5.7rem;
    }

    #jl .sec05 .heading_area .txt_wrap .h3_3 {
        font-size: 4.5rem;
    }

    #jl .sec05 .heading_area .txt_wrap .h3_3 .txt_s {
        font-size: 3.6rem;
    }

    #jl .sec05 .inner {
        padding: 0px 50px 50px;
    }

    #jl .sec05 .inner .p_txt {
        font-size: 2rem;
        text-align: center;
        font-feature-settings: "palt";
    }

    #jl .sec05 .inner .txt_area .w_bg {
        margin: 20px 0;
        background: rgba(255, 255, 255, 0.6);
        position: relative;
        padding: 30px 30px;
    }

    #jl .sec05 .inner .txt_area .w_bg .p_txt {
        font-size: 2rem;
        letter-spacing: .14em;
    }
}

@media screen and (max-width: 1000px) {
    #jl .sec05 .heading_area {
        padding: 0 10% 40px 12%;
        background-position: bottom 40px left 18%;
    }

    #jl .sec05 .heading_area .txt_wrap {
        margin-left: auto;
        width: 62%;
        padding: 20px 0 0 30px;
    }
    
    #jl .sec05 .heading_area .txt_wrap .h3_1 {
        font-size: 3.9vw;
    }

    #jl .sec05 .heading_area .txt_wrap .h3_2 {
        font-size: 4.2vw;
    }

    #jl .sec05 .heading_area .txt_wrap .h3_2 .blue_txt {
        font-size: 5.7vw;
    }

    #jl .sec05 .heading_area .txt_wrap .h3_3 {
        font-size: 4.5vw;
    }

    #jl .sec05 .heading_area .txt_wrap .h3_3 .txt_s {
        font-size: 3.6vw;
    }
}

@media screen and (max-width: 750px) {
    #jl .sec05 .heading_area {
        padding: 0 0 2% 0;
        background-position: bottom 0 left 0;
    }

    #jl .sec05 .heading_area .txt_wrap {
        margin-left: auto;
        width: 57%;
        padding: 3% 4% 0 0;
    }

    #jl .sec05 .heading_area .txt_wrap .h3_1 {
        font-size: 5.9vw;
    }

    #jl .sec05 .heading_area .txt_wrap .h3_2 {
        font-size: 4.8vw;
    }

    #jl .sec05 .heading_area .txt_wrap .h3_2 .blue_txt {
        font-size: 6;
    }

    #jl .sec05 .heading_area .txt_wrap .h3_3 {
        font-size: 5.5vw;
    }

    #jl .sec05 .heading_area .txt_wrap .h3_3 .txt_s {
        font-size: 4.4vw;
    }
}

/* section06 */
@media screen and (min-width: 750px) {
    #jl .sec06 .inner {
        padding: 40px 50px 40px;
    }

    #jl .sec06 .heading_area {
        margin-bottom: 30px;
    }

    #jl .sec06 .heading_area p {
        width: 300px;
        margin: 0 auto;
    }

    #jl .sec06 .heading_area h3 {
        font-size: 4.8rem;
        text-align: center;
    }

    #jl .sec06 .heading_area h3 .txt_s {
        font-size: 3.6rem;
    }

    #jl .sec06 .price_list ul li {
        padding: 30px 100px;
    }

    #jl .sec06 .price_list ul li .menu_ttl_txt {
        font-size: 3.1rem;
    }

    #jl .sec06 .price_list ul li .price_wrap {
        justify-content: end;
    }

    #jl .sec06 .price_list ul li .price_wrap .price {
        font-size: 5.3rem;
    }

    #jl .sec06 .price_list ul li .price_wrap .txt_s {
        font-size: 2.4rem;
    }

    #jl .sec06 .border_box .p_txt {
        font-size: 2.4rem;
    }
}

@media screen and (max-width: 850px) {
    #jl .sec06 .price_list ul li {
        padding: 30px 50px;
    }
}

@media screen and (max-width: 750px) {
    #jl .sec06 .price_list ul li {
        padding: 5% 5%;
    }
}