@charset "UTF-8";

.cont_beauty section{position: relative;}
.cont_beauty h2{text-align: center;font-weight: bold;}

/**/
.first h2{color: #333;position: relative;}
.first h2::before{content: "";display: block;width: 62px;height: 53px;background: url(../../images/bg_h3_title_left.png) no-repeat;
background-size: contain;position: absolute;bottom: 0;left: -13px;
}
.first h2::after{content: "";display: block;width: 62px;height: 53px;background: url(../../images/bg_h3_title_right.png) no-repeat;
    background-size: contain;position: absolute;bottom: 0;right: -10px;
}
.first .text{line-height: 1.8;font-family: "YuGothic", "Hiragino Kaku Gothic ProN","Hiragino Sans",sans-serif;}
.first .images{display: flex;justify-content: center;margin: 20px -20px 0;}
.first .images figure{width: 50%;padding: 20px 20px 0;}


/**/
.flow{background: #f7fae9;background: -webkit-linear-gradient(left,  #f7fae9 0%,#fbf7e5 100%);
background: linear-gradient(to right,  #f7fae9 0%,#fbf7e5 100%);
}
.flow .cont{background: #fff;}
.flow ol li{padding-bottom: 50px;}
.flow ol li .box strong{display: flex;justify-content: center;align-items: center;
    font-style: italic;position: absolute;top: 0;left: 0;
color: #fff;text-shadow: 1px 1px rgb(0 0 0 / 10%);
background: -webkit-linear-gradient(-45deg,  #c2a400 0%,#edd976 99%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg,  #c2a400 0%,#edd976 99%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.flow ol li .box figure{display: flex;align-items: center;}
.flow ol li .box figure span{border: 1px solid #eee;width: 100%;max-width: 350px;max-height: 250px;}
.flow ol li .box .area_text p.note{font-size: 90%;}
.flow ol li .box .area_text ul.reservation li a{display: inline-block;text-decoration: none;background: #2ca453;
    text-align: center;width: 100%;line-height: 30px;color: #fff;
}
.flow ol li .box .area_text h3{font-weight: bold;}
.flow ol li .box .area_text >div,.flow ol li .box .area_text p{font-family: "YuGothic", "Hiragino Kaku Gothic ProN","Hiragino Sans",sans-serif;}

/**/
.menu h3{color: #2ca453;font-weight: bold;position: relative;}
.menu h3::after{
    content: "";display: block;width: 100%;height: 2px;background: -webkit-linear-gradient(left,  #2ca453 0%,#2ca453 59%,#86c255 100%);
    background: linear-gradient(to right,  #2ca453 0%,#2ca453 59%,#86c255 100%);
    position: absolute;left: 0;bottom: -1px;
}

.menu .body div.cont > p.text{font-weight: bold;}
    .menu ul li .box figure{display: flex;align-items: center;justify-content: center}
        .menu ul li .box figure span{display: block;border: 1px solid #ddd;}
    .menu ul li .box h4{margin-bottom: 10px;font-weight: bold;font-family: "YuGothic", "Hiragino Kaku Gothic ProN","Hiragino Sans",sans-serif;}
    .menu ul li .box > h4{display: none;}
    .menu ul li .box .area_text{font-family: "YuGothic", "Hiragino Kaku Gothic ProN","Hiragino Sans",sans-serif;}
        .menu ul li .box .area_text .text{margin-bottom: 20px;width: 100%;}
    .menu ul li .box .area_text table{width: 100%;border-top: 2px dotted #e4e4e4;}
        .menu ul li .box .area_text table th,.menu ul li .box .area_text table td{border-bottom: 2px dotted #e4e4e4;}
        .menu ul li .box .area_text table th{font-weight: bold;text-align: center;}
    .menu .option ul li{font-family: "YuGothic", "Hiragino Kaku Gothic ProN","Hiragino Sans",sans-serif;
        border-bottom: 2px dotted #e4e4e4;}
        .menu .option ul li .box > h4{display: block;}
/**/
.link ul div.box a {text-align: center;text-decoration: none;display: block;line-height: initial;
    font-weight: bold;position: relative;border-bottom: 3px solid #2ca453;
    border-image: linear-gradient(to right, #2ca453 0%, #59b354 50%, #86c255 100%);
    border-image-slice: 1;
}
.link ul div.box a::after{content: "";display: block;width: 5px;height: 5px;position: absolute;right: 10px;top: 50%;
    border-top: 2px solid #333;border-right: 2px solid #333;transform: translateY(-50%)  rotate(45deg);
}
.link ul div.box a:hover{color: #c2a400;}
.link ul div.box a:hover::after{border-top: 2px solid #c2a400;border-right: 2px solid #c2a400;}

.qr_wrapper{display: flex;align-items: center;padding: 10px 0;}
.qr_wrapper .text{width: 70%;}
.qr_wrapper .text span{display: block;font-weight: bold;margin-bottom: 10px;}

@media screen and (max-width:480px) {
    .cont_beauty .first h2{line-height: normal;font-size: 4.2vw !important;}
}

@media screen and (max-width: 600px) {
    .first .images{display: block;}
    .first .images figure{width: 100%;}
}

@media screen and (max-width:767px) {
.cont_beauty .l_main_cont{padding-bottom: 20px;}
.l_main_cont .wrapper{padding-right: 15px;padding-left: 15px;}
/**/
.first{padding-top: 40px;padding-bottom: 50px;}
.cont_beauty .first h2{line-height: normal;font-size: 20px;margin-bottom: 10px;}
.first h2::before{width: 31px;height: 26.5px;bottom: 6px;left: -10px;}
.first h2::after{width: 31px;height: 26.5px;bottom: 6px;right: -10px;}
.first .images{margin-right: -10px;margin-left: -10px;}
.first .images figure{padding: 0 10px;}
/**/
.flow{padding-top: 60px;padding-bottom: 60px;}
.flow .come_title_h2 h2 span{top: -28px;line-height: 1.2;width: 100px;}
.flow .cont{padding: 30px 15px;}
.flow ol li .box strong{width: 36px;height: 36px;font-size: 24px;}
.flow ol > li{padding-bottom: 20px;position: relative;}
.flow ol > li ul.reservation li{padding-top: 10px;padding-bottom: 0;}
.flow ol li .box .area_text h3{font-size: 18px;margin: 10px 0 5px;}
.flow ol li .box figure{justify-content: center;}
.flow ol li .box .area_text p.note{padding-top: 10px;}

.qr_wrapper{display: block;}
.qr_wrapper .img{text-align: center;}
.qr_wrapper .text{width: 100%;font-size: 90%;}
.qr_wrapper .text span{font-size: 100%;}
/**/
.menu .wrapper{padding-top: 60px;padding-bottom: 20px;}
.menu .come_title_h2 h2 span{top: -37px;width: 144px;}
.menu h3{font-size: 18px;padding: 4px 0 3px;}
.menu ul li{padding: 10px 0 20px;}
.menu ul li .box h4{font-size: 16px;}
.menu ul li .box figure{margin-bottom: 10px;}
.menu ul li .box .area_text table th{width: 40%;text-align: left;}
.menu ul li .box .area_text table th,.menu ul li .box .area_text table td{padding: 10px 5px;}
.menu .body div.cont > p.text{font-size: 17px;padding: 20px 0;}
.menu .facial div.cont > p.text{padding: 20px 0 10px;font-size: 15px;}
.menu .option .cont{padding: 0;}
.menu .option ul li{padding: 10px 0;}
.menu .option ul li .box h4{font-size: 15px;margin-bottom: 5px;}
.menu .option ul li .box p{font-size: 15px;text-align: right;}

/**/
.link ul li{padding-bottom: 10px;}
.link ul div.box a{text-align: left;padding: 12px 20px 11px 10px;font-size: 16px;}

}

@media screen and (min-width:600px) {

.flow ol li .box{display: flex;flex-direction: row-reverse;position: relative;justify-content: space-between;}
.flow ol li .box strong{width: 50px;height: 50px;font-size: 30px;}
.flow ol li .box figure{width: 30%;justify-content: flex-end;}
.flow ol li .box .area_text{padding: 0 50px 0 80px;font-size: 16px;width: 70%;}
.flow ol li .box .area_text h3{font-size: 24px;line-height: 50px;margin-bottom: 10px;}
.flow ol li .box .area_text ul.reservation{display: flex;}
.flow ol li .box .area_text ul.reservation li{width: 33.33333%;width: -webkit-(100% / 3);width: -moz-(100% / 3);width: (100% / 3);padding: 0 10px;}

/**/
.link ul{display: flex;justify-content: space-between;flex-wrap: wrap;margin: 0 -10px;}
    .link ul li{width: 50%;padding: 0 10px 15px;}
        .link ul div{display: flex;justify-content: space-between;}
            .link ul div.box a{text-decoration: none;display: block;font-weight: bold;width: 100%;}
}


@media screen and (min-width:600px) and (max-width:768px){
    .flow ol li .box .area_text ul.reservation{margin: 10px -10px 0;}
    .flow ol li .box strong {width: 40px;height: 40px;font-size: 20px;}
    .flow ol li .box .area_text h3 {font-size: 20px;line-height: 20px;margin-bottom: 10px;}
}


@media screen and (min-width:768px) {
.cont_beauty .l_main_cont{padding-bottom: 80px;}
.cont_beauty h2{font-size: 30px;padding-top: 30px;margin: 0 auto 30px;max-width: 860px;}

/**/
.first{padding-top: 80px;padding-bottom: 60px;}


/**/
.flow{padding: 100px 0 80px;}
.flow .come_title_h2 h2 span{top: -42px;width: 136px;}
.flow .cont{padding: 60px 60px 10px;}
.flow ol li .box .area_text ul.reservation{margin: 15px -10px 0;}
.flow ol li .box .area_text p.note{padding-top: 15px;}


/**/
.menu{padding: 87px 0 60px;}
.menu .come_title_h2 h2 span{top: -44px;width: 184px;}
.menu h3{font-size: 26px;padding: 4px 20px 3px;}
.menu ul li{padding: 10px 20px 40px;}
.menu ul li .box{display: flex;flex-direction: row-reverse;justify-content: space-between;position: relative;}
.menu ul li .box figure{width: 40%;}
.menu ul li .box h4{font-size: 20px;}
.menu ul li .box .area_text{width: 100%;}
.menu ul li .box.on_img .area_text{width: 60%;padding-right: 60px;display: flex;align-items: center;flex-wrap: wrap;}
.menu ul li .box .area_text table th,.menu ul li .box .area_text table td{padding: 10px;}
.menu .body div.cont > p.text{font-size: 20px;padding: 20px;}
.menu .facial div.cont > p.text{padding: 20px;font-size: 17px;}
.menu .option .cont{padding: 10px 0 0;}
.menu .option ul li{padding: 16px 20px;font-size: 18px;}
.menu .option ul li .box{flex-direction: row;}
.menu .option ul li .box h4{font-size: 16px;margin-bottom: 0;}
.menu .option ul li .box p{font-size: 16px;}

.link ul div.box a{font-size: 18px;line-height: 57px;}
.link ul div.box a::after{width: 7px;height: 7px;}

}


@media screen and (min-width:600px) and (max-width:950px){
    .flow ol li .box .area_text ul.reservation li a.tel span{display: none;}
}

@media screen and (min-width:600px) and (max-width:1080px) {
    .flow .cont{padding-right: 20px;padding-left: 20px;}
    .flow ol li .box .area_text{padding-left: 0;padding-right: 20px;}
    .flow ol li .box .area_text h3{padding-left: 60px;padding-bottom: 10px;}
}

@media screen and (min-width:768px) and (max-width:1200px) {
    .menu h3,.menu .body div.cont > p.text,.menu .facial div.cont > p.text,.menu ul li {padding-right: 0;padding-left: 0;}
    .menu ul li .box.on_img{flex-wrap: wrap;}
    .menu ul li .box.on_img .area_text{width: 65%;padding-right: 40px;}
    .menu ul li .box.on_img > h4{display: block;width: 100%;}
    .menu .body ul li .box.on_img .area_text h4,.menu .facial ul li .box.on_img .area_text h4{display: none;}
    .menu ul li .box figure{width: 35%;}
}

@media screen and (min-width:1080px) and (max-width:1200px){
    .flow ol li .box .area_text ul.reservation li a.tel span{display: none;}
}



@media screen and (min-width:1081px) {

}