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

html						{ position:relative; min-height:100%; font-size:62.5%; /* font-size 1rem = 10px on default browser settings */}
body						{ font-family:'Yu Gothic UI',YuGothic,'Yu Gothic','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3','メイリオ', Meiryo,sans-serif; 
							  font-size:1.3rem; word-break: break-all; text-align: justify; color:#353535; line-height:1; }
h1, h2, h3, h4,h5, h6,p,dl,dd,figure
							{ margin:0; font-weight:normal; }
h2							{ margin-bottom:40px; font-size:3rem; font-family: 'PT Serif', serif; text-align:center; }

.bgCover					{ background-size: cover; background-position: center center; }
.absolute					{ position:absolute; }
.fixed						{ position:fixed; }
.pb120						{ padding-bottom:80px; }
.fadein						{ opacity : 0; transform : translate(0, 50px); transition : all 0.85s cubic-bezier(0.165, 0.84, 0.44, 1); }
.fadein.scrollin 			{ opacity : 1; transform : translate(0, 0); }

#wrap2						{ position:relative; }

#mainImage					{ display: flex; justify-content: center; align-items: center; position: relative; width: 100%; height: 74.4vh; margin-bottom:56px; overflow: hidden; }
#mainImage>div,#mainImage2>div
							{ width: 100%; height: 100%; }
#topMain					{ margin: 80px auto 0; background-color:#FFF; }

/*************    header     ************/

#header,#header2			{ display:flex; justify-content: space-between; top:0;left:0; width:100%; padding:30px 3%; z-index:55; }

/*開閉ボタン*/
#nav_toggle					{ display: block; width: 24px; height: 14px; position: relative; top: 4px; z-index: 100; cursor: pointer; }
#nav_toggle div				{ position: relative; }
#nav_toggle span
							{ display: block; height: 2px; background: #353535; position:absolute; width: 100%;	left: 0; -webkit-transition: 0.5s ease-in-out; transition: 0.5s ease-in-out; }
#nav_toggle span:nth-child(1)
							{ top:0px; }
#nav_toggle span:nth-child(2)
							{ top:5px; }
#nav_toggle span:nth-child(3)
							{ top:10px; }

/*開閉ボタンopen時*/
.open #nav_toggle span:nth-child(1)
							{ top: 12px; -webkit-transform: rotate(135deg); transform: rotate(135deg); }
.open #nav_toggle span:nth-child(2)
							{ width: 0; left: 50%; }
.open #nav_toggle span:nth-child(3)
							{ top: 12px; -webkit-transform: rotate(-135deg);transform: rotate(-135deg);	}
/*メニュー部分*/
#hamb						{ display:none; position: absolute; top:0;	width: 100%; height: 100vh;	background:rgba(255,255,255,0.8); left: 0; font-size:2.8rem; font-family: 'PT Serif', serif; color:#353535; }
header #hamb ul				{ display: block; position: absolute; top: 50%; left: 50%; -webkit-transform : translate(-50%,-50%); transform : translate(-50%,-50%); }
header #hamb ul li			{ margin: 24px auto; text-align: center; }
header #hamb ul li:last-child
							{ border: none; }
header nav ul li a			{ display: block; }	


/*************    footer     ************/

footer						{ padding-top: 200px; padding-bottom:8px; font-size:1rem; font-family: 'PT Serif', serif; text-align:center; color:#9F9F9F; letter-spacing:0.07em; background-color:#FFF; }


/*************    index     ************/

#slideWrap					{ position:fixed; top:0; width:100%; height: 100vh; z-index:-1; }
#wrap						{ position:relative; z-index:500; /*padding-top:40px;*/ background-color: rgba(255,255,255,0.8); overflow: hidden; }

section						{ width:98%; margin:0 auto; position:relative; z-index:50;background-color:#FFF; }

#top 						{/* display: flex; justify-content: center; align-items: center;*/ position: relative; width: 100%; height: 100vh;/* z-index: 500;*/ overflow: hidden; }
#logoW 						{ top:50%; left:50%; transform : translate(-50%,-50%); width:45%; z-index: 5; }
h1 							{ top:50%; left:50%; transform : translate(-50%,-50%); width:100%; text-align:center; z-index: 5; font-size:4.5rem; color:#FFF; font-family: 'PT Serif', serif; letter-spacing: 0.01em; }

.topSlider,.topSlider li	{ width:100%; height:100%; }
.slick-list,.slick-track	{ height:100%; }

#cncpt						{ position:relative; /*padding:40px 0;*/ }
#bgBlue						{ position:absolute; top:40vh; left:0; transform: skew(0, -23deg); width:100%; height:150%; background-color:#E4EDF1; }

#cncptImg					{ position:relative; width:100%; height:440px; }
#cncptTxt					{ width:90%; margin:0 auto; padding:3%; background-color:#FFF; }
#cncpBdr					{ position:relative; display:flex; align-items: center; height:100%; padding:40px; border:solid 1px #353535; }
#cncpBdr>div				{ width:100%; }
#cncptTxt p					{ padding:0 8%; font-size:1.2rem; line-height:2; letter-spacing:0.12em; }


#salonList					{ padding-top:120px; }
#salonList1,#topInsta,#staffList
							{ display:flex; flex-wrap: wrap; justify-content: space-between;  }				
#salonList1>li				{ width: calc((100% - 20px)/ 2); height:208px; margin-bottom:20px; border:solid 1px #B4B4B4; transition: .3s; }
#salonList1>li:hover		{ opacity:.6; }


#salonList1 a				{ display: flex; justify-content: center; align-items: center; height:100%; }
#salonList1 img				{ width:75%; }

.container					{ width:96%; margin:0 auto; }
#image1						{ height:240px; }
#image2						{ display:flex; }
#image2>li					{ width:50%; height:224px; }

#info>.container			{ width:98%; margin:0 auto; }
#info1>li					{ margin-bottom:20px; }
#info1 a					{ display:flex; justify-content: center; }
.infoImg					{ width:160px; height:160px; margin-right:32px; }
.infoTtle					{ width: calc(100% - 200px); padding-top:54px; }
#info1 h3					{ margin-bottom:8px; font-size:1.7rem; letter-spacing:0.03em; }
#info1 p					{ color:#B4B4B4; letter-spacing:0.01em; }
#more						{ font-size:1.7rem; text-align: center; display: block; font-family: 'PT Serif', serif; }
#more:before				{ content: url(../img/cross.png); display: block; padding-bottom:8px; }
 
#topInsta li,.hairstyle li	{ width: calc((100% - 20px)/ 2);  margin-bottom:20px; }
#topInsta li				{ height:221px; }
#topInsta img				{ width:100%; height:100%; object-fit: cover; }

#company2					{ font-size: 1.5rem; letter-spacing: 0.06em; }
#company2>li:first-child	{ margin-bottom:20px; }
#company2 h3,.infoTtl		{ position:relative; margin-bottom: 24px; padding:0 4px; font-size: 1.9rem; letter-spacing: 0.07em; }
#company2 h3:after,#accessR dt:after,.infoTtl:after
							{ position: absolute; bottom:1px; left:0; width:100%; height:1px;  content: ''; background:#B4B4B4; }
#company2 table				{ line-height:1.3; }							
#company2 table td			{ display:block; padding:0 4px; }
#company2 table td:nth-child(even)
							{ padding-bottom:8px; }
							

/*************  archive info     ************/

#grid						{ width:100% !important; }

.grid-sizer,.grid-items 	{ width: 100%; }

.grid-items					{ margin-bottom:32px; padding:16px; border:solid 1px #353535; }
.gCat						{ margin-bottom:16px; font-size:1.7rem; color:#9F9F9F; font-family: 'PT Serif', serif; font-weight:700; }

.grdImg						{ margin-bottom:24px; overflow:hidden; }
.grdImg	img					{ width:100%; transform: scale(1); transition: .5s; }
.grdImg	img:hover			{ transform: translate3d(4%,0,0) scale(1.08); }

.grid-items h3				{ font-size:1.9rem; margin-bottom:16px; letter-spacing:0.04em; transition: .3s; }
.grid-items h3:hover		{ opacity:.8; }

.grid-items>p				{ margin-bottom:40px; font-size:1.4rem; letter-spacing:0.07em; line-height:1.5; }

.gMore						{ text-align:right; color:#B4B4B4; font-family: 'PT Serif', serif; }
.gMore span					{ display:inline-block; width:88px; height:24px; border:solid 1px #B4B4B4; text-align:center; line-height:24px;
							  background-image: linear-gradient(to right, rgba(0,0,0,0) 50%, rgba(180,180,180,1) 50%); background-position: 0 0; background-size: 200% auto; transition: .3s;  }
.gMore span:hover			{ background-position: -100% 0; color: #fff; }
							
/*************  single info     ************/

#infoMain					{ margin-bottom:56px; }


#infoCont					{ padding: 0 4px; }
#infoCont img				{ max-width:100%; }
#infoCont p					{ font-size: 1.5rem; letter-spacing: 0.06em; line-height:1.7; }
#infoCatDate				{ margin-top:32px; text-align:right; font-family: 'PT Serif', serif; color:#B4B4B4; }

#infoSide ul:nth-of-type(1)	{ margin-bottom:40px; }
#infoSide ul li				{ margin-bottom:16px; padding:0 4px; font-size: 1.5rem; letter-spacing: 0.06em; }
#infoSide ul li:last-child	{ margin-bottom:0; }


							

/*************    salon     ************/

#gMap						{ height:216px; margin-bottom:24px; }
#accessR dl>*				{ padding-left:4px; }
#accessR dt					{ position:relative; margin-bottom:16px; font-size:1.7rem; letter-spacing:0.03em; z-index:55; }
#accessR dd					{ margin-bottom:24px; font-size:1.5rem; letter-spacing:0.12em; line-height:1.3 }
#accessR dd span			{ font-size:1.4rem; }

#accessR>a					{ display:inline-block; width:100%; height:40px; font-size:1.5rem; line-height: 40px; letter-spacing:0.07em; text-align:center; background:#E6E6E6; }					
#accessR>a>span:before		{ display:inline-block; width:24px; height:24px; margin-right:8px; content:""; background: url(../img/hpb.png); background-size: contain; vertical-align: middle; }

#algResv1					{ margin-bottom:8px; }

.hairstyle					{ display:flex; flex-wrap: wrap; justify-content: space-between; }
.hairstyle div				{ height:224px;}
.hairstyle h3				{ padding-left:4px; font-size:1.5rem; letter-spacing:0.12em; }


#price						{ position:relative; }
#price h2					{ position:relative; z-index:50; }
#bgBlue2					{ position:absolute; top:60px; left:0; width:50%; height:82%; background-color:#E4EDF1;  } 
.tab						{ display:flex;flex-wrap: wrap;justify-content: center; position:relative; width: 62%; margin: 0 auto 32px; font-size:1.15rem; z-index:50; }
.tab li 					{ padding:10px 0; min-with:25%;}
.tab li a					{ padding-left:1px; text-align:center;  cursor:pointer; transition: ease 0.3s opacity; }
.tab li:first-of-type>a		{ padding-left:0; }
.tab span					{ padding-left:1px; font-size:1.2rem; color:#B4B4B4; }
.tab a.pager-active			{ position: relative; cursor:default; }

.tab2						{ display:flex;flex-wrap: wrap;justify-content: center; position:relative; width: 42%; margin: 0 auto 32px; font-size:1.15rem; z-index:50; }
.tab2 li 					{ padding:10px 0;}
.tab2 li a					{ padding-left:1px; text-align:center;  cursor:pointer; transition: ease 0.3s opacity; }
.tab2 li:first-of-type>a	{ padding-left:0; }
.tab2 span					{ padding-left:1px; font-size:1.2rem; color:#B4B4B4; }
.tab2 a.pager-active		{ position: relative; cursor:default; }
.tab_li_first				{padding-left:32px!important;}
.tab_li_last				{padding-right:32px!important;}

.bx-wrapper					{height:360px;}
.bx-viewport				{height:360px!important;}
.bx-viewport li				{height:360px;align-items:center;display:flex;}


#priceContentWrap			{ display:flex; align-items: center; justify-content: center; position: relative;  width:90%; height:360px; margin:0 auto; border:solid 1px #353535;  }
#priceContentWrap2			{ display:flex; align-items: center; justify-content: center; position: relative;  width:90%; height:360px; margin:0 auto; border:solid 1px #353535;  }
.priceContent table			{ width:77%; margin:0 auto; font-size:1.5rem; line-height: 44px; }
.priceContent table td:nth-child(2n)
							{ text-align: right; }
.priceContent2 table			{ width:77%; margin:0 auto; font-size:1.5rem; line-height: 44px; }
.priceContent2 table td:nth-child(2n)
							{ text-align: right; }
#bgWhite					{ width:55%; height:200px;  position:absolute; top:50%; left:50%; transform : translate(-50%,-50%); background-color: rgba(255,255,255,0.8); }

#priceNote					{ position:relative; margin-top:32px; text-align:right!important; font-size:1rem; line-height:1.5; }

#priceNote					{ position:absolute;bottom:20px; right:10px;}
#priceNote.priceNote2		{ position:relative;bottom:20px; right:10px;}

.price_subtxt				{ line-height:1.4;font-size:1.2rem;}
.price_subtxt td			{ padding-bottom:10px;}

.bx-wrapper 				{ position:relative; clear:both; z-index:50; }



/*************    archive staff     ************/

#staffList li				{ width: calc((100% - 24px)/ 2); margin-bottom:24px; }
.listImg					{ height:208px; margin-bottom: 8px; }
#staffList h4				{ font-family: 'PT Serif', serif; font-size:1.5rem; text-align:center; }


/*************    single staff     ************/

#mainImage2					{ width: 100%; height: 40vh; margin-bottom:56px; overflow: hidden; }

#staffSingle				{ position:relative; }

#staffContentWrap			{ position:relative; z-index:50; padding:32px 40px 48px; border:solid 1px #353535; }
#staffImg					{ width:75%; height:240px; margin:0 auto 8px; }
#staffContentWrap>h4		{ margin-bottom:32px; font-family: 'PT Serif', serif; font-size:2.5rem; text-align:center; }
#staffContentWrap>h4>span	{ display:block; padding-top:4px; font-size:1.3rem; font-family:'Yu Gothic UI',YuGothic,'Yu Gothic','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3','メイリオ', Meiryo,sans-serif; }
#staffContentWrap>p			{ line-height: 2; letter-spacing: 0.12em; }

#bgBlue3					{ position:absolute; bottom:40px; right:0; width:48%; height:80%; background-color:#E4EDF1; }

/*************    archive recruit     ************/

#rcrtBtn>li					{ position:relative; margin-bottom:8px; background-color:#E4EDF1; z-index:5; }
#rcrtBtn>li:last-child		{ margin-bottom:32px; }
#rcrtBtn>li>a				{ display:flex; justify-content: center; align-items: center; height:40px; font-size:1.5rem; }

#rcrtList>li				{ width:94%; margin: -72px auto 48px; padding-top:72px;  }

#rcrtListWrap				{ padding:24px 0; box-shadow: 0px 3px 6px 1px rgba(0,0,0,0.17); -webkit-box-shadow: 0px 3px 6px 1px rgba(0,0,0,0.17); /*box-shadow: 0 4px 10px rgba(0,0,0,0.08);*/ }

#rcrtList h3				{ font-size:1.4rem; margin-bottom:24px; padding-bottom:4px; text-align:center; border-bottom:solid 1px #B4B4B4; }

.rcrtCont					{ padding:0 5.5%; font-size:1.3rem; line-height:1.5; }	

#rcrtList table				{ width:100%; }
#rcrtList table td			{ display:block; }
#rcrtList table td:nth-child(2n)
							{ padding-bottom:16px; }

#rcrtApply					{ width: 94%; margin:0 auto; padding: 0 5.5% 24px; border-top: solid 5px #353535;  box-shadow: 0px 3px 6px 1px rgba(0,0,0,0.17); -webkit-box-shadow: 0px 3px 6px 1px rgba(0,0,0,0.17); }
#rcrtApply h3				{ margin-bottom: 24px; padding-top:24px; font-size: 1.7rem; text-align: center; }
#rcrtApply p				{ font-size: 1.3rem; line-height: 1.5; }