@import url('https://fonts.googleapis.com/css2?family=Alex+Brush&display=swap');
/*下層ページ　ページタイトル　フォント候補*/
@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Zen+Old+Mincho&display=swap');
@import url('https://fonts.googleapis.com/css2?family=BIZ+UDPMincho&display=swap');



.font1{
    font-family: 'Alex Brush', cursive;
    letter-spacing: 1px;
    line-height: 1.2;
}

/*はんなり以外のフォント候補*/
.hannari{
    font-family:'Zen Old Mincho','Shippori Mincho', "游明朝", "YuMincho", "ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "Sawarabi Mincho", "serif";
}

/*下層ページ　ページタイトル　フォント候補*/
/*
#page_title h2{
    font-family: 'BIZ UDPMincho','Zen Old Mincho','Shippori Mincho', "游明朝", "YuMincho", "ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "Sawarabi Mincho", "serif";
}
*/

.linkStyle{
    color:#564738;
}
.linkStyle:hover{
    transition:all 0.3s;
    opacity:0.7;
    text-decoration:underline;
}

.bg_white_opa{
    background-color:rgba(255,255,255,0.7);
}

/*
#return_top,    position:absolute;
}
*/

/*--all page---------------------------
-------------------------------------*/
#wrap{
    background-image:url(./Dup/img/bg.jpg);
    background-attachment:fixed;
    background-size:cover;
}
.font_14{
    font-size:17px;
}
#pc_nav li, #top_pc_nav li, #footer_nav li,#overlay .left li{
    max-width: 100%;
}
#pc_nav li a{
    color:#231815;
}
header.scr_header{
    background-color: rgba(229,229,229,0.8)!important;
}
#header #pc_nav{
    opacity:0;
}
.scr_header #header #pc_nav{
    opacity:1;
}


.back1:before,
.back2:before{
    display:none;
}
footer{
    background-color: rgba(229,229,229,0.8)!important;
}
/*
#footer {
    background-color: rgba(255,255,255,0.6);
}
*/
#footer h2{
    display:none;
}
#footer .tel_bt a{
    color: #564738;
}
.nav_menu_more:first-of-type a .icon:before{
    display:none;
}
.overlay {
    background: linear-gradient(135deg, rgba(102,102,102,0.9) , rgba(189,156,136,0.9) )!important;
}
.fix_bnr{
    right:70px;
    z-index:3;
}
#return_top a{
    color:#333;
}
#h1txt{
    padding-bottom: 60px;
}


/*--top page---------------------------
-------------------------------------*/
#main_img:before{
    background-color: rgba(70,70,70,0.2);
}
#main_img:after{
    content:'';
    position:absolute;
    display:block;
    width:98%;
    height:96%;
    border:1px solid white;
    top:0;
    bottom:0;
    left:0;
    right:0;
    margin:auto;
    pointer-events:none;
    z-index:1;
}

.catch .logo_white{
    width: 40vw;
    margin: 0 auto 50px;
    position:relative;
}
.catch .logo_white:before{
    content:'';
    position:absolute;
    display:block;
    width:50px;
    height:2px;
    background-color:white;
    bottom:-25px;
    left:0;
    right:0;
    margin:auto;
}
.catch_copy{
    font-size:1.7rem;
}
.catch_copy span{
    position:relative;
}
.catch_copy span:after {
  content: '';
  position: absolute;
  left: -25px;
  bottom: -3px;
  width: 0%;
  height: 40px;
  background: #564738;
  opacity:0.8;
  z-index: -1;
  transition: all 0.8s;
}
.catch_copy span.isActive:after {
  width: 110%;
}
.catch_copy2{
    font-size:2rem;
}
.hasami{
    width: 100px;
    margin: 10px auto 50px;
}
#top_pc_nav li a{
    font-size:1.2rem;
}
.num{
    color: #666;
    opacity:1;
    display:none;
}
#intro_wrap,
#contents3 .con_box{
    box-shadow: 0 0 20px #ddd;
}

#contents3_wrap:before{
    background-image:url(./Dup/img/wall.jpg)!important;
    background-repeat:repeat;
    background-size:300px 300px;
}
/*▼▼▼contents3 background-image cms▼▼▼*/
/*
#contents3_wrap:before{
    background-image:url(./Up_Img/252/con3_bg.jpg)!important;
    background-repeat:repeat;
    background-size:300px 300px;
}
*/
/*▲▲▲contents3 background-image cms▲▲▲*/

/*▼▼▼コルク背景の候補▼▼▼*/
/*コルク1*/
/*
#contents3_wrap:before{
    background-image:url(./Dup/img/colc1.jpg)!important;
    background-repeat:repeat;
    background-size:300px 300px;
}
#contents3_wrap:after {
    background-color: rgba(192,161,116,0.1)!important;
}
*/
/*コルク2*/
/*
#contents3_wrap:before{
    background-image:url(./Dup/img/colc2.jpg)!important;
    background-repeat:repeat;
    background-size:300px 300px;
}
*/
/*▲▲▲コルク背景の候補▲▲▲*/


#intro_wrap:before,
#contents3 .con_box:before{
    content:'';
    position:absolute;
    display:block;
    width:calc(100% - 30px);
    height:calc(100% - 30px);
    border:1px solid #e5e5e5;
    top:0;
    bottom:0;
    left:0;
    right:0;
    margin:auto;
    pointer-events:none;
}
.welcom{
    font-size:1.5rem;
}

#contents2_wrap{
    margin-top:100px;
}

.content_no{
    font-size: 1.5rem;
}
.content_no span{
    font-size: 2.2rem;
    margin-left: 10px;
}
.cms_3-c .box_txt1{
    border-top: 1px solid #eee;
}

#contents4 .line.scrollin:before{
    left:0;
    right:0;
    margin:auto;
}

#header #logo,
#header .button_container{
    opacity:0;
}
.scr_header #header #logo,
.scr_header #header .button_container{
    opacity:1;
}
.button_container span{
    background: rgb(41,41,41);
}
.button_container span:nth-of-type(1){
    color:rgb(41,41,41);
}

/*top page animation*/
/* ローディング後にじわっと出現 */
.load-blurTrigger{
    opacity: 0;
}
.load-blur{
  animation-name:load-blurAnime;
  animation-duration:2.5s;
  animation-fill-mode:forwards;
}

@keyframes load-blurAnime{
  from {
  filter: blur(10px);
  transform: scale(1.05);
  opacity: 0;
  }

  to {
  filter: blur(0);
  transform: scale(1);
  opacity: 1;
  }
}

/*ローディング後にフェードイン*/
.load-fade{
    opacity : 0; transition : all 2s/*処理にかかる時間*/;
}
.load-fade.done{
    opacity : 1; transform : translate(0, 0);
}

/*----modal----*/
.modal_bt{cursor: pointer}
.modal_bg{top: 0;left: 0;background-color: rgba(0,0,0,0.5);z-index: 9998;}
.modal_box{max-height: 90%;overflow-y: auto;z-index: 9999;}
.close_bt{cursor: pointer}


/*--under page---------------------------
-------------------------------------*/
.page_title_box{
    background-color: rgba(86,71,56, 0.6)!important;
}
/*under page animation*/
/* ローディング後にじわっと出現 */
.load-blurTrigger_u{
    opacity: 0;
}
.load-blur_u{
  animation-name:load-blurAnime_u;
  animation-duration:2.5s;
  animation-fill-mode:forwards;
}

@keyframes load-blurAnime_u{
  from {
  filter: blur(10px);
  transform: scale(1) translate(-50%,-50%);
  opacity: 0;
  }

  to {
  filter: blur(0);
    transform: scale(1) translate(-50%,-50%);
    opacity: 1;
  }
}
#page_title:after{
    content:'';
    position:absolute;
    display:block;
    width:calc(100% - 30px);
    height:calc(100% - 30px);
    border:1px solid white;
    top:0;
    bottom:0;
    left:0;
    right:0;
    margin:auto;
    pointer-events:none;
    z-index:1;
    
}
.page .back1 .con_box{
    box-shadow: 0 0 20px #ddd;
}
.cate_list li.active a,
.cate_list li.active a:hover{
    background-color: rgba(86,71,56,0.5);
    color:#fff;
}

#cms_3-c .box_txt1{
    border-top:1px solid #faf8f5;
}
#cms_6-c .box_title{
    letter-spacing: 0px;
}
#cms_6-c .sub_cate_title:before{
    content:'';
    position:absolute;
    display:block;
    width:50px;
    height:3px;
    background-color:#c0a174;
    bottom:-10px;
    left:0;
    right:0;
    margin:auto;
}
#cms_6-c .box_img1{
    display:block!important;
}




/*blog page*/
#cms_1-a .date{
    padding-left:30px;
    position:relative;
}
#cms_1-a .cate_box:nth-of-type(1n) .date:before{
    bottom: -20px;
    left: -20px;    
}
#cms_1-a .cate_box:nth-of-type(2n) .date:before{
    bottom: -20px;
    left: -20px;    
}
#cms_1-a .cate_box:nth-of-type(3n) .date:before{
    bottom: -20px;
    left: -20px;    
}


/*treatment headspa page*/
#cms_2-c.kobetu_page #cate2 .cate_img1,
#cms_2-c.kobetu_page #cate2 .cate_img2{
    width:calc(50% - 10px)!important;
}




/* ---------- responshive ---------- */
@media screen and (max-width: 1024px){
#page11 #cms_2-c .box_txt1{
    font-size:18px;
    letter-spacing: 3px;
}

}



/* ---------- タブレット ---------- */
@media screen and (max-width: 768px){

#main_img #left,#main_img #right{
    height:350px!important;
}


.mg_b-150px_tb{
    margin-bottom: 150px;
}
.font_14 {
    font-size: 15px;
}
header.scr_header #logo {
    max-width: 200px;
}
#main_img .menu{
    top:55%;
}

.catch .logo_white {
    width: 50vw;
    margin: 0 auto 30px;
}
.catch_copy {
    font-size: 1.4rem;
}
.catch_copy span:after{
    height:35px;
}
.catch_copy2 {
    font-size: 1.2rem;
}
.hasami {
    width: 70px;
}
.more_box .posi_rel{
    letter-spacing: 1px;
}
#intro_wrap:before, 
#contents3 .con_box:before,
#page_title:after{
    width: calc(100% - 20px);
    height: calc(100% - 20px);
}

#page_title .page_title_box{
    width: 50%;
}

.page .back1 .con_box:before{
    height:99%;
}
#cms_6-c .cate_title{
    letter-spacing: 1px;
}
#page10 .con_box a .jp{
    font-size:calc(1rem - 4px);
}

.page11 .page_title_box h2{
    font-size: 28px;
    letter-spacing: 1px;
}
.fix_bnr {
    right: 50px;
}


}

/* ---------- スマートフォン ---------- */

@media screen and (max-width: 667px){
#main_img:after{
    width: 95%;
    height: 97%;
}
.catch .logo_white {
    width: 85vw;
}
.catch_copy{
    letter-spacing: 2px;
}
.catch_copy span{
    padding-left: 10px;
}
.catch_copy span:after{
    left: -8px;
}
.catch_copy span.isActive:after {
    width: 105%;
}
.catch_copy2{
    margin-top:10px;
}
.hasami {
    width: 55px;
}
#intro_wrap:before, 
#contents3 .con_box:before,
#page_title:after{
    width: calc(100% - 10px);
    height: calc(100% - 10px);
}
#page_title .page_title_box {
    width: fit-content;
}
#page_title p{
    letter-spacing: 3px;
}
.cream{
    bottom: 300px;
    left: 17%;
}
.bottle{
    top: 165px;
    left: 10%;
}
.dryer {
    width: 70px;
    top: -9%;
    right: 15%;
}
.content_no span {
    font-size: 1.8rem;
}
#contents2{
    padding-top:20px;
}
#contents2_wrap{
    margin-top:20px;
}

#contents3 h3{
    letter-spacing: 1px;
}
#top_cms .line-l:before{
    top: 22px;
}
#top_cms .cms_title p{
    font-size:16px;
}


header.scr_header #logo {
    max-width: 150px;
}
#fakeloader .fl{
    width:60%!important;
}
#page_title:after{
    width:97%;
}
.fix_bnr {
    right: 30px;
}
footer{
    background-size:400px 300px;
}
#footer_txt{
    font-size:10px;
    letter-spacing: 2px;
}
#footer .tel_bt{
    font-size:16px;
}
.font_14{
    font-size: 9px;
    line-height: 20px;
    letter-spacing: -1px;
}
.fix_bnr a{
    font-size:calc(1rem - 2px);
}
.page9 .page_title_box h2{
    letter-spacing: 3px;
}
#footer_con .con_box{
    line-height: 15px;
}
.sns_links{
    margin-top:20px;
}
#page_title .page_title_box{
    padding:10px;
    text-shadow: 0 0 5px #564738;
}
#cms_2-c .box_txt2{
    line-height:20px;
}




/*cate_list 2列に*/
#cms_3-c .cate_list li,
#cms_6-c .cate_list li{
    width: 47.5%;
    margin-right: 5%;
}
#cms_3-c .cate_list li:nth-child(even),
#cms_6-c .cate_list li:nth-child(even){
    margin-right:0;
}
#cms_3-c .cate_title {
    padding-left: 10px;
    padding-right:10px;
}

/*treatment headspa page*/
#cms_2-c.kobetu_page #cate2 .cate_img1,
#cms_2-c.kobetu_page #cate2 .cate_img2{
    width:100%!important;
    margin:auto;
}

}

/*--owner iphone13--*/
@media screen and (max-width: 844px){
.page9 .page_title_box h2 {
    letter-spacing: -5px;
}
#footer .tel_bt{
    letter-spacing:0;
}
#footer .tel_bt a{
    letter-spacing:-1px;
}
.modal_title1{
    margin-bottom:10px;
}
#info_contact_wrap .con_title .pop400{
    letter-spacing: 2px;
}
.page11 .page_title_box h2 {
    font-size: 24px;
    letter-spacing: -4px;
}

/*treatment headspa page*/
#cms_2-c.kobetu_page #cate2 .cate_img1,
#cms_2-c.kobetu_page #cate2 .cate_img2{
    width:80%!important;
    margin:10px auto;
}

}