/* ------------- my css ------------- */



/* color */
.txt_color_nomal, .hvr_txt_color_nomal:hover{color: var(--black);}
:root{
    --color1: #60ba6a; 
    --color2: #edf4ed; 
    --color3: #519154; 
    --color4: #d3efee; 
    --black: #151a1e; 
}

.txt_red, .hvr_txt_red:hover{color: #C12326;}
.txt_gray, .hvr_txt_gray:hover{color: #ccc}
.txt_color1, .hvr_txt_color1:hover{color: var(--color1)} /* メインカラー */
.txt_color2, .hvr_txt_color2:hover{color: var(--color2)} /* サブカラー */
.txt_color3, .hvr_txt_color3:hover{color: var(--color3)} /* アクセントカラー1 */
.txt_color4, .hvr_txt_color4:hover{color: var(--color4)} /* アクセントカラー2 */

/* background-color */
.bg_black, .hvr_bg_black:hover{background-color: var(--black)} /* 黒背景 */
.bg_gray, .hvr_bg_gray:hover{background-color: #ccc}
.bg_color1, .hvr_bg_color1:hover{background-color: var(--color1)} /* メインカラー */
.bg_color2, .hvr_bg_color2:hover{background-color: var(--color2)} /* サブカラー */
.bg_color3, .hvr_bg_color3:hover{background-color: var(--color3)} /* アクセントカラー1 */
.bg_color4, .hvr_bg_color4:hover{background-color: var(--color4)} /* アクセントカラー2 */
.bg_color_clear, .hvr_bg_color_clear:hover{background-color: transparent!important}
.bg_color5 {
    background-color: #6f827f;
}


/* border-color ※!important */
.border_black, .hvr_border_black:hover{border-color: var(--black)}
.border_gray, .hvr_border_gray:hover{border-color: #ccc}
.border_color1, .hvr_border_color1:hover{border-color: var(--color1)}
.border_color2, .hvr_border_color2:hover{border-color: var(--color2)}
.border_color3, .hvr_border_color3:hover{border-color: var(--color3)}
.border_color4, .hvr_border_color4:hover{border-color: var(--color4)}


/*自動リンク設定*/
.linkStyle{
    color:var(--color3);
}
.linkStyle:hover{
    color:var(--color3);
	opacity:0.7
}

@media screen and (max-width: 768px) {
    html, body {
        font-size: 16px;
    }
}


/*------------- TOP -------------*/


#main_img{
    margin-right: 10%;
    border-radius: 0 50px 50px 0;
}
.sub_txt1{
    top: 0;
    left: 3%;
    z-index: 2;
    width: 85px;
}

.main_txt1 {
    right: 3%;
    z-index: 2;
    top: 22%;
    width: 40%;
    max-width: 627px;
}

    #top_contents1 .con1_img {
    border-radius: 0 20px 20px 0;

}
@media screen and (max-width: 768px) {
    #main_img{
    margin-right: 5%;
    border-radius: 0 20px 20px 0;
}

    #top_contents1 .con1_img {
        margin: 0 10%;
        border-radius: 20px;
    }
    .sub_txt1{
    width: 9%;
    min-width: 41px;
}
.main_txt1{
    background-color: white;
    border-radius: 20px 0 0 20px;
    padding: 20px 30px;
    top: auto;
    bottom: 12%;
    width: 70%;
}

}

    @media screen and (max-width: 667px) {
        #header.pd_20px_sp {
        padding: 25px 20px 20px 20px;
    }
        
        header.pd_b-30px{
            padding-top: 0;
            padding-bottom: 0;
        }
        .main_txt1{
            right: 4%;
          padding: 10px 0 5px 12px;
           bottom: -7%;
        }
        #con_nav ul{
            margin-top: 50px;
        }
        .menu_stick {
            top: 22px;
            height: 45px;
        }

    }
    

    @media screen and (max-width: 667px) {
     #top_contents1 .con_title{
        margin-top: 20px;
        padding:0 6%;
    }
    
    #top_contents1 .info_title {
        top: calc(-35vw - 132px);
    }
}
 
#top_contents2 .con2_bg{
    mix-blend-mode: darken;
}

@media screen and (max-width: 768px) {
    #main_img {
        height: 110vw;
    }
}

@media screen and (max-width: 768px) {
    #con_nav {
        padding-bottom: 250px;
    }
}



.con3_box .con3_img img{
    border-radius: 20px;
}

@media screen and (max-width: 768px) {

#con_nav .faq .nav_title{
    padding: 0 16%;
}

#con_nav .faq .mg_b-20px{
    margin-bottom: 5px;
}
}

#top_news .cms_2-g .box_wrap{
    border-radius: 12px;
}

/*------------- nav -------------*/    

    #sp_nav li a{
        color: var(--color3);
    }

/*------------- footer -------------*/
#footer_info .footer_bg{
    border-radius: 20px 0 0 0;
}

#footer_info .time{
    display: none;
}

.info_title.opacity02{
    opacity: 1;
}
@media screen and (max-width: 768px) {
    #footer_info .footer_bg{
    border-radius: 0;
}

#logo2{
    width: 150px;
}
}


/*------------- 下層ページ -------------*/

#page_title .title_wrap{
    margin-top: 70px;
}

#page_title .sub{
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    
}

#page_title .sub_title{
    font-size: 70px;
}

.cate_list a{
    border-radius: 50px;
}
#page_title .title_wrap .mg_b-30px{
    margin-bottom: 50px;
}



@media screen and (max-width: 768px) {
#page_title{
    margin-bottom: 20px;
}
.cate_list.mg_b-100px{
    margin-bottom: 20px;
}
#page_title .title_wrap .mg_b-30px{
    margin-bottom: 5px;
}

}

@media screen and (max-width: 667px) {

#page_title .sub_title{
    font-size: 50px;
}
}


.sub_title.txt_color4{
    color: #fff;
}



#page03 .cate.mg_b-40px{
    margin-bottom: 60px;
}


/*------------- 施術内容 -------------*/
#cms_2-g .cate_img1 {
    max-height: 500px;
}

/*------------- ビフォーアフター -------------*/

#cms_4-b .cate_box .box_img1{
    border-radius: 10px;
}

#cms_4-b .page04 .cate_box {
    margin: 0 auto;
}

#cms_4-b .cate_box.width_50per{
    width: 47% !important;
}

.before_txt{
    top: 0;
    padding: 10px 25px;
    border-radius: 10px 0 20px 0;
}
@media screen and (max-width: 667px) {
#cms_4-b .cate_box.width_50per {
    width: 100% !important;
}
.before_txt {
    padding: 5px 15px;
    border-radius: 0 0 15px 0;
}
}

/*------------- よくある質問 -------------*/


#cms_3-c .cate_title{
    font-size: 29px;
}

#cms_3-c .cate{
    background-color: #f9f9f9;
    padding: 25px;
    border-radius: 12px;
}

@media screen and (max-width: 667px) {
    #cms_3-c .cate_title{
    font-size: 25px;
    padding-top: 30px;
    margin-bottom: 10px;
}
#cms_3-c .cate{
    padding: 10px;
}

}

#page05 .cate_box{
    padding-bottom: 10%!important;
}


/*------------- お問い合わせ -------------*/
.contact_line{
    width: 60%;
    max-width: 500px;
    margin: 0 auto;
}

@media screen and (max-width: 667px) {
    .contact_line{
    width: 100%;
    max-width: none;
}
}


/*------------- プライバシーポリシー -------------*/

#google_privacy {
    background-color: var(--color2) !important;
    border-radius: 10px;
}