@import url('https://fonts.googleapis.com/css2?family=IM+Fell+English&display=swap');


.bg_color1 {background-color: #fbdcd3;}
.bg_color2 {background-color: #f6eae5;}
.bg_color3 {background-color: #7f660c;}
.txt_color1 {color: #7f660c;}
.txt_color3 {color: #7f660c;}
.border_color1 {border-color: #7f660c;}
.border_color2 {border-color: #f6eae5;}
.border_color3 {border-color: #7f660c;}

.hvr_txt_color3:hover {color: #e3a08c;}
.hvr_border_color3:hover {border-color: #7f660c;}

/* ----------　all　---------- */
body, .txt_color_nomal,a {
    color: #685740;
}
body{
    background-color: #fcfbf7;
}
.con1_title,#contents2,#contents3,.cms_title,.info_title,#top_contents .con_box .con_sub_title{
    font-family: 'IM Fell English', serif;
} 
.txt_white {
    color: #685740;
}
header .trans_header {
    top: -90px;
}
header .menu_stick span{
    background-color: #7f660c;
}
header .trans_logo{
    padding: 20px 25px;
    height: auto;
}
header .trans_logo img{
    max-width: 200px;
}
#header{
        position: relative;
}
#header:before {
    content: '';
    position: absolute;
    background-image: url(Dup/img/dec.png);
    width: 60%;
    height: 50%;
    top: 0;
    left: 0;
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 3;
    pointer-events: none;
}
#header #pc_nav{
    position: relative;
    z-index: 4;
}
#header #pc_nav li{
    font-size: -webkit-calc(1rem + 2px);
    font-size: calc(1rem + 2px);
}
#sp_nav .tel_bt a{
    color: #e3a08c;
}
#footer .footer_nav {
    padding: 20px 0;
    background-color: #fff;
}
#footer .footer_bottom {
    background-color: #f6f2e5;
}
.banner_fix {
    position: fixed;
    bottom: 10px;
    right: 65px;
    z-index: 2;
    width: 80%;
    max-width: 350px;
}
.banner_fix img{
	transition: opacity 0.5s;	
}
.banner_fix img:hover{
    opacity: 0.6;
}


/* ----------　TOP　---------- */
#header #logo img{
    max-width: 300px;
}
#main_img{
        height: auto!important;
}
#contents1{
    background-image: url(dup/img/back.png);
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: right top;
}
#contents1 .point{
    max-width: 800px;
    margin: auto;
    margin-bottom: 80px;
}




.page_title_box{
    color: #ffffff;
    text-shadow: 2px 2px 10px rgba(130, 81, 48 ,0.6);
} 



#top_cms .top_cms_bg {
    background-color: #f6eae5;
}
.contents_wrap .contents_bg {
    background-color: #f6f2e5;
}



#top_contents::before{
	width: calc(100% - 300px);
	height: calc(100% - 200px);
	right: 0;
	bottom: 0;
	background-color: #F2F2F2
}
#top_contents .con_box .contents_no{
	    top: -25px;
    left: -50px;
    z-index: 1;
    font-family: "游明朝", "YuMincho", "ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "Sawarabi Mincho", "serif";
    font-size: -webkit-calc(1rem + 30px);
    font-size: calc(1rem + 30px);
    font-style: italic;
}
#top_contents .con_open .contents_no span{background-color: #fff}
#intro .intro_txt_wrap{z-index: 1}
#intro .intro_img{
	top: 0;
	left: 0
}
#top_contents .con_box{cursor: pointer}
#top_contents .con_box .con_sub_title{
    font-size: -webkit-calc(1rem + 12px);
    font-size: calc(1rem + 12px);
    opacity: 1;
    letter-spacing: 3px;
    margin-top: 20px;
}
#top_contents .con_box:hover .box_img{
	transform: scale(0.98,0.98) rotate(0.01deg);
}
#top_contents .con_box:hover .box_img img{
	transform: translate(-50%, -50%) scale(1.1,1.1) rotate(0.01deg);
	opacity: 0.4;
}
#top_contents .con_box:hover .box_img span{
    opacity: 1;
    color: #ffffff;
    text-shadow: 1px 3px 10px #a2492e;
}
#top_contents .con_open{
	top: 0;
	left: 0;
	z-index: 7
}
#top_contents .open_bg {
    background-color: #fcfbf7;
}
#top_contents .open_scroll{overflow-y: auto}
#top_contents .con_open .close_bt{
	bottom: 0;
    right: 50%;
    cursor: pointer;
    transform: translateX(50%);
}

#top_contact .contact_box{
	background-color: rgba(255,255,255,0.9)
}


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

section.under_page{
	opacity: 0;
	transform: translateY(20px);
	transition: 1s
}
section.under_page.active{
	opacity: 1;
	transform: none
}
.under_page #header #logo img{
    width: 250px;
}
.main_filter {
    background-color: #f6eae5;
}
#cms_2-a .box_title1{
    color: #e3a08c;
    border-bottom: 1px solid #e3a08c;
    padding-bottom: 0px;
    margin-bottom: 15px;
}
/***　pager　***/

.pager li a{
	height: 60px;
	line-height: 60px;
}
.pager li.prev a, .pager li.next a{padding: 0 20px}
.pager li:not(.prev) a,.pager li:not(.next) a{width: 60px;}


/***　施術/メニュー　***/
#cms_3-d .box_item{
    border-bottom: 1px solid #7f660c;
}


/***　初めての方へ　***/
.flow_type3 .cate{counter-reset: box;}
.flow_type3 .cate_box{counter-increment: box;}
.flow_type3 .box_item{padding-top: 60px;}
.flow_type3 .box_title1{z-index: 0}
.flow_type3 .box_title1::before, .flow_type3 .box_title1::after{
	position: absolute;
	content: "";
	display: block;
	pointer-events: none
}
.flow_type3 .box_title1::before {
	content: "0"counter(box);
	font-size: 86px;
	color: #f6f2e5;
	left: 0;
	top: -70px;
	z-index: -1;
}
.flow_type3 .box_title1::after{
	width: 100%;
	height: 1px;
	bottom: 0;
	left: 0;
	background-color: #222
}


/***　よくある質問　***/
.cms_5-c .box_txt1::before ,#cms_5-c .box_txt1::before{
    color: #e3a08c;
}
#cms_5-c .box_title1 {
    border-bottom: 1px solid #7f660c;
}


/***　店舗情報　***/
#page07 p {
    background-color: #f6f2e5;
}
#info_map{height: 300px}
#info_map iframe{
	width: 100%;
	height: 100%
}

/***　お問い合わせ　***/
#page8 #form_box input[type="text"],#page8 #form_box textarea{background-color: #f7f7f7}

#page08 .foot_tel_bt a i{
    font-size: -webkit-calc(1rem + 25px); 
    font-size: calc(1rem + 25px);
    padding-right: 10px;
}
#page08 .con_link_box{
    display: flex;
    justify-content: center;
}
#page08 .tel_box{
    margin: 0px 50px;
}
#page08 .tel_box a{
    color: #e3a08c;
}
#page08 .foot_tel_bt a{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0px 15px 15px 0;
    font-size: -webkit-calc(1rem + 8px);
    font-size: calc(1rem + 8px);
    border: 0;

}

/***　プライバシーポリシー　***/
#page09 .privacy_top {
    background-color: #f6f2e5;
}
#page09 p a{
    color: #ffffff;
}
#page09 p a:hover {
    background-color: #7f660c;
    opacity: 0.6;
}
/***　IE対処　***/

@media all and (-ms-high-contrast:none) {
	#page9 a{padding-top: 4px}
	#page8 #submit input{padding-top: 25px}
}

/* 文字間隔 */
/* default 1px */
.letter_0{letter-spacing: 0;}
.letter_1{letter-spacing: 0.1em;}
.letter_2{letter-spacing: 0.2em;}
.letter_3{letter-spacing: 0.3em;}
.letter_4{letter-spacing: 0.4em;}
.letter_5{letter-spacing: 0.5em;}
.letter_6{letter-spacing: 0.6em;}
.letter_7{letter-spacing: 0.7em;}
.letter_8{letter-spacing: 0.8em;}
.letter_9{letter-spacing: 0.9em;}
.letter_10{letter-spacing: 1em;}

.float_right{
	float: right
}
.float_left{
	float: left
}
.float_clear{
	float: none
}
.clearfix::after{
	clear:both;
	content:".";
	visibility:hidden;
	display:block;
	height:0;
}
/*ここからタブレット用（780px以下）環境の設定
---------------------------------------------------------------------------*/
/*表示を切り替えるウィンドウサイズの指定*/
@media screen and (max-width: 768px){
header .trans_header {
    top: 0px;
}	
header .trans_logo {
    padding: 17px 25px;
}
.banner_fix {
    right: 0px;
    left: 0;
    margin: auto;
}

#pc_nav_fix{display: block!important;opacity: 1!important}

#pager li:not(.prev):not(.next){
	display: none;
}

/* 文字間隔 */
/* default 1px */
.letter_0_tb{letter-spacing: 0;}
.letter_1_tb{letter-spacing: 0.1em;}
.letter_2_tb{letter-spacing: 0.2em;}
.letter_3_tb{letter-spacing: 0.3em;}
.letter_4_tb{letter-spacing: 0.4em;}
.letter_5_tb{letter-spacing: 0.5em;}
.letter_6_tb{letter-spacing: 0.6em;}
.letter_7_tb{letter-spacing: 0.7em;}
.letter_8_tb{letter-spacing: 0.8em;}
.letter_9_tb{letter-spacing: 0.9em;}
.letter_10_tb{letter-spacing: 1em;}

.float_right_tb{
	float: right
}
.float_left_tb{
	float: left
}
.float_clear_tb{
	float: none
}
.clearfix_tb::after{
	clear:both;
	content:".";
	visibility:hidden;
	display:block;
	height:0;
}



/* ----------　TOP　---------- */
#contents1 {
    background-attachment: scroll;
    background-size: 70%;
}
#contents1 .fade_box {
    padding-top: 100px;
}
#top_contents{
    margin-bottom: 0px;
    padding-bottom: 20px;
}
#top_contents .con_box:hover .box_img, .more a:hover, .more a:hover span{transform: none;}
#top_contents .con_box:hover .box_img img{transform: translate(-50%, -50%);}
#top_contents::before{
	width: calc(100% - 50px);
	height: calc(100% - 100px);
	right: auto;
	left: 0;
}
#top_contents .con_box .con_sub_title {
    font-size: -webkit-calc(1rem + 4px);
    font-size: calc(1rem + 4px);
    letter-spacing: 1px;
}
/* ----------　下層ページ　---------- */
/***　お問い合わせ　***/
#page08 .tel_box {
    margin: 0px 20px;
}
}

/*ここからスマホ用（750px以下）環境の設定
---------------------------------------------------------------------------*/
/*表示を切り替えるウィンドウサイズの指定*/
@media screen and (max-width: 667px){
.banner_fix {
    right: auto;
    left: 20px;
    width: 75%;
}
#sp_nav .tel_bt a{
    font-size: -webkit-calc(1rem + 3px);
    font-size: calc(1rem + 3px);
}
/* ----------　TOP　---------- */
#intro{padding-bottom: calc(60vw - 20px)}
#intro .intro_img{
	height: 60vw;
	top: auto;
	bottom: 0;
}
#footer_map{height: 300px;}

/* 文字間隔 */
/* default 1px */
.letter_0_sp{letter-spacing: 0;}
.letter_1_sp{letter-spacing: 0.1em;}
.letter_2_sp{letter-spacing: 0.2em;}
.letter_3_sp{letter-spacing: 0.3em;}
.letter_4_sp{letter-spacing: 0.4em;}
.letter_5_sp{letter-spacing: 0.5em;}
.letter_6_sp{letter-spacing: 0.6em;}
.letter_7_sp{letter-spacing: 0.7em;}
.letter_8_sp{letter-spacing: 0.8em;}
.letter_9_sp{letter-spacing: 0.9em;}
.letter_10_sp{letter-spacing: 1em;}

.float_right_sp{
	float: right
}
.float_left_sp{
	float: left
}
.float_clear_sp{
	float: none
}
.clearfix_sp::after{
	clear:both;
	content:".";
	visibility:hidden;
	display:block;
	height:0;
}


/* ----------　TOP　---------- */
#contents1 .fade_box {
    padding-top: 80px;
    padding-bottom: 80px;
}
#contents1 .con1_title{
    margin-bottom: 30px;
}
#contents1 h2{
    font-size: -webkit-calc(1rem + 8px);
    font-size: calc(1rem + 8px);
}
#contents1 .point {
    margin-bottom: 50px;
}
#top_contents {
    padding-top: 40px;
}
/***　お問い合わせ　***/
#page08 .con_link_box {
    flex-direction: column;
}
#page08 .tel_box {
    margin: 0px;
}
#page08 .tel_box:first-child{
    margin-bottom: 40px;
}
}