@charset "UTF-8";

.cont_nail section{position: relative;}
.cont_nail 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 table{width: 100%;}
.menu table th,.menu table td{border-bottom: 2px dotted #e4e4e4;}  
.menu table td{font-family: "YuGothic", "Hiragino Kaku Gothic ProN","Hiragino Sans",sans-serif;}
.menu tr:first-of-type th{font-weight: bold;border-bottom: none;position: relative;color: #2ca453;}
.menu table td.name{font-weight: bold;}
.menu table td.price{text-align: right;}
.contents_form.conf h2,.contents_form.comp h2{color: #2ca453;font-weight: bold;}
.menu tr:first-of-type th::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: 2px;
}

.menu .body div.cont > p.text{font-weight: bold;}
    .menu ul li .box figure{display: flex;align-items: center;}
        .menu ul li .box figure span{display: block;border: 1px solid #ddd;}
    .menu ul li .box h4{margin-bottom: 10px;color: #2ca453;}
    .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{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;}
    .gel p.note{font-family: "YuGothic", "Hiragino Kaku Gothic ProN","Hiragino Sans",sans-serif;}
    
/**/
.gallery{background: #f7fae9;background: -webkit-linear-gradient(left,  #f7fae9 0%,#fbf7e5 100%);
    background: linear-gradient(to right,  #f7fae9 0%,#fbf7e5 100%);}
.gallery .area_list ul{display: flex;flex-wrap: wrap;padding: 5px;background: #fff;justify-content: center;}
.gallery .area_list ul li figure{background-repeat: no-repeat;padding-top: 100%;height: 0;background-position: center;background-size: cover;}
.gallery .area_list ul li{padding: 5px;}
.gallery .area_list ul li figure figcaption{display: none;}
.gallery .text{font-family: "YuGothic", "Hiragino Kaku Gothic ProN","Hiragino Sans",sans-serif;}
.gallery .btn{text-align: center;}
.gallery .btn a{text-decoration: none;}


.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_nail .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_nail .l_main_cont{padding-bottom: 20px;}
.l_main_cont .wrapper{padding-right: 15px;padding-left: 15px;}
/**/
.first{padding-top: 40px;padding-bottom: 50px;}
.cont_nail .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: 50px;}
.menu .come_title_h2 h2 span{top: -37px;width: 144px;}
.menu h3{font-size: 18px;padding: 4px 10px 3px;}
.menu tr:first-of-type th{font-size: 20px;padding-top: 0;padding-bottom: 15px;}
.menu tr:first-of-type th .note{font-size: 13px;margin-bottom: 5px;}
.menu tr:first-of-type th::after{bottom: 10px;}
.menu table th, .menu table td {padding: 10px 0;}
.menu .cont ul li{padding: 10px 0;}
.gel p.note{font-size: 13px;margin-bottom: 10px;}

/**/
.link ul li{padding-bottom: 20px;}
.link ul div.box a{line-height: 48px;}

.gallery{padding-top: 60px;padding-bottom: 50px;}
.gallery .come_title_h2 h2 span{top: -35px;width: 160px;}
.gallery .area_list ul li{width: 50%;}
.gallery .area_list{margin-bottom: 20px;}
.gallery .btn{height: 50px;margin-top: 20px;}
.gallery .btn a{display: inline-block;background: #2ca453;color: #fff;text-align: center;font-size: 19px;width: 300px;line-height: 50px;}

}

@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;}

}

@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_nail 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 tr:first-of-type th{font-size: 22px;padding: 4px 15px 10px;}
.menu .cont ul{display: flex;justify-content: space-between;flex-wrap: wrap;margin: 0 -20px;}
.menu .cont ul li{width: 50%;padding: 20px;}
.menu table th,.menu table td{padding: 14px 20px;}
.gel p.note{text-align: right;font-size: 14px;}

.menu .care .cont ul li:first-of-type{width: 100%;}
.menu table th p.note{font-size: 14px;display: inline;margin-left: 10px;}

/**/
.gallery{padding-top: 100px;padding-bottom: 100px;}
.gallery .come_title_h2 h2 span{top: -45px;width: 195px;}
.gallery .text{text-align: center;}
.gallery .area_list ul li{width: 25%;}
.gallery .area_list{margin-bottom: 20px;}
.gallery .btn{height: 50px;margin-top: 20px;}
.gallery .btn a{display: inline-block;background: #2ca453;color: #fff;text-align: center;font-size: 19px;
     width: 300px;line-height: 50px;}

}

@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:1081px) {

}