﻿/*-------------------------------------------------
個別
---------------------------------------------------*/
 @import url("https://use.typekit.net/mbx6kpf.css");
 @import url('https://fonts.googleapis.com/css2?family=Allura&display=swap');
#main_img{overflow: hidden;}
#main_img:before{background-color: rgba(70,70,70,0.3);}
/*.catch{
    width: 400px;
    height: 500px;
    bottom: 2%;
    right: 0%;
    background: url(Dup/img/catch.png)no-repeat;
    transform: translate(-50%,-50%);
    z-index: 2;
    background-size: 100%;
}*/
.catch::before{
    content: "private salon";
    position: absolute;
    display: block;
    width: 100%;
    height: 100px;
    top: 6%;
    font-size: 70px;
    opacity: 0.2;
    color: #fff;
    font-family: hummingbird, sans-serif;
}
#intro_wrap::before,#contents3 .con_box::before{
position: absolute;
    content: "";
    background-size: contain;
background-repeat: no-repeat;
    pointer-events: none;

}
#intro_wrap::before,#contents3 .con_box::before{
    width: 200px;
    height: 200px;
    right: 20px;
    bottom: -100px;
    background-image: url(./Dup/img/dec1.png);
    z-index: 2;
}
#contents3 .con_box::before{
right: inherit;
left: 20px;
top: -100px;
background-image: url(./Dup/img/dec2.png);
}
#main_img .menu p{background-color: transparent;}
#pc_nav li, #top_pc_nav li, #footer_nav li{max-width: 180px;}
.num,.font1{
font-family: 'Allura', cursive;
font-weight: 400;
font-style: normal;
}
#intro_wrap, #contents3 .con_box, main.back1 .con_box{box-shadow: 0 0 30px rgba(0,0,0,0.05);}
.back1:before,.back2:before{
background-image: url(Dup/img/bg4.png);
background-color: transparent!important;
    opacity: 0.4;
}
#top_cms.back1:before{
width: 100%;
z-index: -1;}
#logo2 a{max-width: 250px;}
#contents1 .con_img_wrap:before,#contents1 .con_img_wrap  .con_img::before,
#contents2 .con_img_wrap:before,#contents2 .con_img_wrap  .con_img::before,
#intro_wrap:after,
#contents3 .con_box::after{
    content: "";
    border: 2px solid #bea150;
    position: absolute;
    top: 6px;
    left: 6px;
    width: 100%;
    height: 100%;
    z-index: 1;
    transform: rotate(-5deg);
}
#intro_wrap:after{z-index: 0;}
#intro_wrap:after,#contents3 .con_box::after{transform: inherit;}
#contents2 .con_img_wrap:before,#contents2 .con_img_wrap  .con_img::before{transform: rotate(5deg);}
#contents2 .con_img{margin-bottom: 0;}
.parts_cartain_r{
    width: 180px;
    position: absolute;
    top: -5px;
    right: -10px;
    z-index: 210;
}
#intro .num,#contents3 .num{top: -60px;}
.num{
    color: #bea150;
    font-size: 60px!important;
}
#contents1 .num,#contents2 .num{
top: -100px;
    left: 40px;
}
#top_cms .top_cms_box{
position: relative;
background-color: #fff;
padding-top: 100px;
    border-radius: 5px;
}
#top_cms .top_cms_box:nth-of-type(n+1){margin-bottom: 100px;}
#top_cms .top_cms_box:nth-of-type(5)::before{
    content: "";
    display: block;
    position: absolute;
    background: url(Dup/img/dec3.png) no-repeat 0 0;
    width: 200px;
    height: 200px;
    background-size: contain;
    z-index: 100;
    bottom: -20%;
    right: 50px;
}
.bnr_wrap{
position: relative;
z-index: 4;
margin-top: 50px;
}
#top_cms{padding: 5%;}
.linkStyle{color: #bea150;}
#contents1 .con_box {
    margin-top: 15%;
}
#contents2 .con_box {
    margin-top: 10%;
}
/*-------------------------------------------------
下層
---------------------------------------------------*/
.page .back1::before{width: 100%;}
.contact_wrap > div a{width: 330px;}
.page_title_box h2{letter-spacing: 2px;}
.pager li a:hover{opacity: 0.8;}

/*-------------------------------------------------
1280以下
-----------------------------------------------------*/
@media screen and (max-width: 1280px){
#main_img .menu{display: none;}
.nav_menu_more:first-of-type a .icon:before{display: none;}
#overlay .left li {
    max-width: 190px;
}
.overlay {
    background: linear-gradient(135deg, rgba(190,161,80,0.9) , rgba(137,139,138,0.9) )!important;}
.catch{bottom: inherit;
top: 100%;
}


}


/*-------------------------------------------------
tab
-----------------------------------------------------*/
@media screen and (max-width: 768px){
#main_img,#video{
    height: 60vw!important;
}
#intro_wrap::before, #contents3 .con_box::before {
    opacity: 0.5;
}
#intro_wrap {
    padding: 10% 5% 6%;
}
#contents3 .con_box{padding-top: 10%;}
#contents1 .num, #contents2 .num{top: -80px;}
#top_cms .top_cms_box{padding-top: 50px;}
#top_cms .top_cms_box:nth-of-type(n+1) {
    margin-bottom: 50px;
}
#logo2 a {
    max-width: 200px;
}
.catch{
width: 400px;
    height: 400px;
top: 113%;
right: 13%;
}
#top_cms .top_cms_box:nth-of-type(5)::before{
    bottom: -8%;
    right: -35px;
    opacity: 0.5;
}
.catch::before{display: none;}
#cms_1-c ul li {margin-right: 0;}



}



/*-------------------------------------------------
sp
-----------------------------------------------------*/
@media screen and (max-width: 667px){
.bnr_wrap{margin-top: 20px;}
.num{font-size: 40px!important;}
#intro .num, #contents3 .num {
    top: -40px;
}
#intro_wrap::before, #contents3 .con_box::before{
    width: 100px;
    height: 100px;
}
#contents1 .num, #contents2 .num {
    top: -60px;
}
#contents1 .num, #contents2 .num{left: 50px;}
#contents1 .con_img {
    margin-bottom: 0px;
}
#intro_wrap {
    padding: 20% 5% 6%;
}
#contents2_wrap{flex-direction: column-reverse;}
.con_img_wrap{margin-bottom: 70px;}
#contents3 .con_box {
    padding-top: 20%;
}
.page_title_box h2 {
    letter-spacing: 3px;
}
.catch{
width: 200px;
    height: 200px;

}
#top_cms .top_cms_box:nth-of-type(5)::before{
    width: 100px;
    height: 100px;
bottom: -5%;
}

}


/*-------------------------------------------------
IE
-----------------------------------------------------*/
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none){



}


/*-------------------------------------------------
Firefox
-----------------------------------------------------*
@-moz-document url-prefix(){

}