@charset "utf-8";
/* CSS Document */
/* ------------------------------------------------------------------------ */

/*  Reset

/* ------------------------------------------------------------------------ */

html {
	overflow-y	: scroll;
	height		: 100%;
	font-size	: 62.5%;
	-webkit-text-size-adjust: 100%;
}

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,
pre,form,fieldset,p,blockquote {
	margin 	: 0;
	padding : 0;
}

fieldset {
	display	: inline;
}

address,caption,cite,code,dfn,em,strong,th,var {
	font-style : normal;
}

body/**/table {
	line-height	: 1.5;
}

q:before,
q:after {
	content : '';
}

object,embed {
	vertical-align : top;
}

hr,legend	{
	display : none;
}

h1,h2,h3,h4,h5,h6 {
	font-size : 100%;
}

img,abbr,acronym,fieldset {
	border : 0;
}

li {
	list-style-type : none;
}

img[usemap] {
	border		: none;
	height		: auto;
	max-width	: 100%;
	width		: auto;
}

img {
	border		: 0;
	max-width	: 100%;
}

i {
	padding	: 5px 5px 2px 0;
}

/* Flexible Images */
img{
    max-width	: 100%;
    height		: auto;
    width /***/	: auto;
	backface-visibility: hidden;
}

submit	{ -webkit-appearance : none;}

/* ------------------------------------------------------------------------ */

/*  Basic Style

/* ------------------------------------------------------------------------ */

body {
	margin		: 0;
	padding		: 0;
	height		: 100%;
	font-family	: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic" , MS PGothic, Meiryo, Arial, sans-serif;
	font-size	: 1.5rem;
	font-size	: 15px;
	line-height	: 1.5;
	text-align	: center;
	color		: #010101;
	-webkit-text-size-adjust	: 100%;
	font-smoothing	: auto;
	letter-spacing: 1px;
	word-break: break-word;
}

body *, body *:before, body *:after {
	box-sizing: border-box;
}

#wrap{
	margin		: 0 auto;
	text-align	: center;
}

body > #wrap { 
	height : auto;
	position: relative;
}

.cinzel {
	font-family: 'Cinzel Decorative', cursive;
}
.lato {
	font-family: 'Lato', sans-serif;
}
.mincho{
	font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
}
.yugo{
	font-family	: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic" , MS PGothic, Meiryo, Arial, sans-serif;
}
.cormorant{
	font-family: 'Cormorant', serif;
}

.flex{
	display: flex;
	align-items: center;
}

.reverse{
	flex-direction: row-reverse;
}

.coming_txt{
	font-size: 2.3rem;
	letter-spacing: 4px;
	display: block;
	margin-top: 15px;
}

@media screen and (max-width:767px){
	body {
		font-size	: 1.4rem;
		font-size	: 14px;
	}
}

/* Link
--------------------------------------------------------------------------- */

.opacity a:hover img{
	opacity: 0.85;
}

a:link	{
	text-decoration	: none;
	color			: #010101;
}

a:visited	{
	text-decoration	: none;
	color			: #010101;
}

/*パンくずリスト*/
.crumb {
	width: 100%;
	margin: 0px auto;
	padding: 10px 0;
	text-align	: left;
}

@media all and (-ms-high-contrast:none){
	.crumb{
		padding: 12px 10px 15px;
	}
}

	.crumb ul {
		letter-spacing: -.4em;
		max-width: 1100px;
		width: 100%;
		margin: 0 auto;
	}

	.crumb li {
		display			: inline-block;
		list-style-type	: none;
		letter-spacing: normal;
		margin	: 0 10px 0 3px;
		color: #333333;
		font-size: 13px;
	}

	.crumb li:before{
		content: "\f105";
		font-family: 'FontAwesome';
		padding-right: 10px;
		color: #333333;
	}
	
	.crumb li:first-child:before{
		content: " ";
		padding: 0;
	}

		.crumb li a{
			color	: #333333;
			display: inline-block;
			text-decoration: none;
			position: relative;
			font-family: 'Lato', sans-serif;
		}
		
		.crumb li a:hover{
			 text-decoration: underline;
		}


/* ------------------------------------------------------------------------ */

/* Hedaer

/* ------------------------------------------------------------------------ */

header {
	position: relative;
}

#mainVisual{
	overflow-x: hidden;
}


/* ------------------------------------------------------------------------ */

/* Navigation

/* ------------------------------------------------------------------------ */
#nav_wrap{
	position: fixed;
	top: 30px;
	right: 30px;
	z-index: 999;
}
div.hg_menu_btn {
	cursor: pointer;
	border: solid 1px #a7a7a7;
	position: relative;
	z-index: 1000;
	padding: 13px 14px;
}
	div.hg_menu_btn span {
		position: relative;
		display: inline-block;
		width: 20px;
		height: 3px;
		background: #040308;
		margin-top: 0;
		vertical-align: middle;
	}
		div.hg_menu_btn span::before, div.hg_menu_btn span::after {
			content: "";
			position: absolute;
			background: #040308;
			display: block;
			height: 3px;
			width: 100%;
			transition: .3s;
		}
		div.hg_menu_btn span::before {
			bottom: 7px;
		}
		div.hg_menu_btn span::after {
			top: 7px;
		}

		div.hg_menu_btn.active span {
			background: initial;
			height: 0;
		}
		div.hg_menu_btn.active span::before {
			transform: translateY(7px) rotate(-45deg);
		}
		div.hg_menu_btn.active span::after {
			transform: translateY(-10px) rotate(45deg);
		}

nav.g_nav {
	align-items: center;
	position: absolute;
	width: 0;
	top: -30px;
	right: -30px;
	z-index: 1;
	padding-top: 110px;
	background: rgba(255,255,255,0.9);
	height: 100vh;
	overflow-x: hidden;
	transition: .5s;
}
	nav.g_nav.navIn {
		width: 546px;
	}

nav.g_nav ul.nav_list {
	align-items: center;
	display: block;
	margin: 0 0 0 auto;
	width: 60%;
}
	nav.g_nav ul.nav_list > li{
		font-size: 2rem;
		border-top: solid 1px #bfbfbf;
		text-align: left;
	}

nav.g_nav ul.nav_list > li > a{
	display: block;
	color: #000;
	padding: 12.5px 10px;
	white-space: nowrap;
	transition: .3s ease-out;
	letter-spacing: 3.3px;
}
	nav.g_nav ul.nav_list > li a:hover{
		text-decoration: none;
		color: #ccc;
		background-color: rgba(0,0,0,0.6);
	}

.list_open_btn > a,
.list_open_btn02 > a,
.list_open_btn03 > a{
	position: relative;
}
	.list_open_btn > a::after,
	.list_open_btn02 > a::after,
	.list_open_btn03 > a::after{
		content: "";
		border-top: solid 1px #5a5a5a;
		border-right: solid 1px #5a5a5a;
		display: inline-block;
		width: 10px;
		height: 10px;
		transform: translateY(-4px) rotate(135deg);
		margin-left: 12px;
	}

nav.g_nav ul.nav_list > .list_open_btn a:hover::after,
nav.g_nav ul.nav_list > .list_open_btn02 a:hover::after,
nav.g_nav ul.nav_list > .list_open_btn03 a:hover::after{
	border-top: solid 1px #ccc;
	border-right: solid 1px #ccc;
}

	.list_open_btn.open > a::after,
	.list_open_btn02.open > a::after,
	.list_open_btn03.open > a::after{
		transform: rotate(315deg);
	}

.nav_salon_list,
.nav_staff_list,
.nav_totalbeauty_list{
	font-size: 1.5rem;
	display: none;
	padding-bottom: 12px;
}
	.nav_salon_list li,
	.nav_staff_list li,
	.nav_totalbeauty_list li{
		padding-left: 20px;
	}

.nav_salon_list li a,
.nav_staff_list li a,
.nav_totalbeauty_list li a{
	display: inline-block;
	width: 100%;
	transition: .3s ease-out;
	padding: 5px;
	white-space: nowrap;
}

.font-space{
	padding: 0.1px;
	display: inline-block;
}

@media screen and (max-width:1080px){
	.crumb {
		padding: 10px 20px;
	}
}

@media screen and (max-width:768px){
	div.hg_menu_btn{
		border: none;
		background: rgba(255,255,255,.5);
	}
	nav.g_nav.navIn {
		width: 100vw;
	}
	nav.g_nav ul.nav_list{
		width: 100%;
	}
	nav.g_nav ul.nav_list > li{
		text-align: center;
		border-top: solid 1px #666;
	}
}
@media screen and (max-width:767px){
	#nav_wrap{
		top: 10px;
		right: 10px;
	}
	
	div.hg_menu_btn span,
	div.hg_menu_btn span::before,
	div.hg_menu_btn span::after{
		height: 2px;
	}
	
	div.hg_menu_btn.active span::after {
		transform: translateY(-9px) rotate(45deg);
	}
	
	nav.g_nav{
		top: -10px;
		padding-top: 80px;
	}
	
	nav.g_nav.navIn{
		top: -10px;
		right: -10px;
		padding-top: 80px;
		padding-bottom: 100px;
	}
	
	.nav_salon_list li, .nav_staff_list li{
		padding-left: 0;
	}
	

}

/* ------------------------------------------------------------------------ */

/* Contents

/* ------------------------------------------------------------------------ */

#mainBlock {
	clear : both;
}

.contents{
	max-width: 1080px;
	width: 100%;
	margin: 0 auto;
}

/* ------------------------------------------------------------------------ */

/* Footer

/* ------------------------------------------------------------------------ */
#pageTop.btn01{
	right: 20px;
	z-index: 99;
	background: rgba(0,0,0, 0.9);
}
	#pageTop.btn01::before{
		top: 60%;
		left: 50%;
		transform: translate(-50%,-50%) rotate(-45deg);
	}

#pageTop.btn01:hover::before{
	top: 55%;
}

footer {
	clear : both;
	background: #fafafa;
}

footer ul{
	max-width: 1000px;
	width: 100%;
	margin: 0 auto;
	justify-content: space-between;
	padding: 120px 0 96px;
}
	footer ul li img{
		width: 100%;
	}

footer ul li a:hover{
	opacity: .8;
}

footer ul.flex {
	flex-wrap: wrap;
}

footer ul .logo01 img{
	max-width: 88px;
}
footer ul .logo02 img{
	max-width: 126px;
}
footer ul .logo03 img,
footer ul .logo04 img{
	max-width: 114px;
}
footer ul .logo05 img{
	max-width: 90px;
}

footer ul .logo06 img{
	max-width: 90px;
}
footer ul .logo07 img{
	max-width: 40px;
}
footer ul .logo08 img{
	max-width: 119px;
}

footer p{
	padding: 0 0 37px;
}
@media screen and (max-width:1024px){
	footer{
		padding: 0 10px;
	}
}
@media screen and (max-width: 767px){
	#pageTop.btn01{
		right: 10px;
		bottom: 10px;
	}
	footer ul{
		flex-wrap: wrap;
		max-width: 362px;
		padding: 50px 0 20px;
		width: 50%;
	}
	footer ul li{
		width: 40%;
		margin-bottom: 12%;
	}
	
	footer ul .logo01,
	footer ul .logo08 {
		width: 100%;
	}
	
	footer ul .logo08 {
		text-align: left;
	}
	
	footer ul .logo01 img {
		width: 30%;
	}
		footer ul .logo08 img{
			width: 45%;
		}
	
	footer p{
		font-size: 1.2rem;
	}
}
@media screen and (max-width: 520px){
	
}

.comBig {
	font-size: 2.4rem;
	font-weight: 200;
}

.comBig02 {
	font-size: 3.4rem;
	font-weight: 200;
	line-height: 1.0 !important;
}

@media screen and (max-width: 767px){
	.comBig02 {
		font-size: 2.0rem;
	}
	
}