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

@media screen and (min-width:320px){

.priceContent table		{ font-size: 1.3rem;width:80%;}
.priceContent2 table	{ font-size: 1.3rem;width:80%;}
.tab					{width:70%;}
.price_subtxt				{ line-height:1.2;font-size:1rem;}

}



@media screen and (min-width:480px){

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

#salonList1>li				{ height:240px; }


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

#priceContentWrap			{ width:85%; height:400px; }
#priceContentWrap2			{ width:85%; height:400px; }
#priceContentWrap .bx-wrapper{height:400px;}
#priceContentWrap .bx-viewport{height:400px!important;}
#priceContentWrap .bx-viewport li{height:400px;}
#priceContentWrap2 .bx-wrapper{height:400px;}
#priceContentWrap2 .bx-viewport{height:400px!important;}
#priceContentWrap2 .bx-viewport li{height:400px;}

.priceContent table			{ width:70%; }
.priceContent2 table		{ width:70%; }


#bgWhite					{ width:50%; height:240px; }

.tab						{ width: 44%;}

.price_subtxt				{ line-height:1.2;font-size:1rem;}

}

@media screen and (min-width:600px){

.pb120						{ padding-bottom:120px; }
.fadein 					{ transition : all 1.2s cubic-bezier(0.165, 0.84, 0.44, 1); }
h1 							{ font-size:7rem;  }
h2							{ margin-bottom:72px; font-size:5.8rem; }

#wrap						{ padding-top:80px; }
#topMain					{ margin:0; background: transparent; }
section						{ width:100%; }

#mainImage					{ margin-bottom:80px; }

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

#header,#header2			{ padding:30px 32px; }
#hamb						{ letter-spacing:0.06em; }


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

#logoW 						{ width:auto; }


#cncpt						{ padding-bottom:80px; background: transparent;}
#bgBlue						{ top:34vh; }
#cncpt>.container			{ display:flex; align-items:stretch; }
#cncptImg					{ height:512px; }
#cncptTxt					{ width:100%; padding:2.2%; margin:0; }
##cncpBdr 					{ padding:0; }
			
#salonList1>li				{ width: calc((100% - 20px * 3)/ 4); height: 200px; margin-bottom:0; }

#image1						{ height:272px; }
#image2>li					{ height:256px; }

.infoTtle					{ width: calc(100% - 320px); }

#topInsta li				{ width: calc((100% - 40px)/ 3); }

#company2					{ display:flex; justify-content: space-between; }
#company2>li				{ width: calc((100% - 20px)/ 2); }
#company2 h3				{ margin-bottom: 40px; }
#company2 table				{ line-height:1.5; }
#comPro	td					{ padding-bottom:4px; }
#comHis	td:nth-child(even)	{ padding-bottom:24px!important;  }


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

.grid-sizer,.grid-items 	{ width:calc((100% - 32px * 2)/ 3); }

.grid-items>p				{ font-size:1.5rem; }


/*************    single info     ************/

#infoWrp					{ display:flex; justify-content: space-between; }

#infoMain					{ width: calc((100% - 20px)*0.75); margin-bottom:0; }

.infoTtl					{ margin-bottom: 32px; }

#infoCont p					{ line-height:2; }
#infoCatDate				{ margin-top:56px; }

#infoSide					{ width: calc((100% - 20px)*0.25); }

#infoSide ul:nth-of-type(1)	{ margin-bottom:56px; }


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

#access1					{ display:flex; justify-content: space-between; align-items: stretch; }
#access1>li					{ width:49%; }
#gMap						{ height:auto; margin:0; }
#accessR>a					{ width:208px; }					

#algResv1,#algResv2			{ width:48%!important; }
#algResv1					{ margin:0 2% 0 0; }

.hairstyle					{ display:flex; flex-wrap: wrap; }
/*.hairstyle li				{ margin-bottom:24px; }*/

#hair1 div					{ height:256px; }
#hair2 li					{ width:32% }
#hair2 div					{ height:232px; }
.hairstyle h3				{ font-size:1.9rem; letter-spacing:0.14em; }


#bgBlue2					{ top: 90px; width:68%; height:75%; }

.tab						{ width: 70%;font-size:0.8em;}
.tab						{ margin-bottom:56px; font-size:1.6rem; }
.tab li a					{ padding-left:24px; letter-spacing:0.08em; }
.tab span					{ padding-left:24px; }
.tab2						{ margin-bottom:56px; font-size:1.7rem; }
.tab2 li a					{ padding-left:24px; letter-spacing:0.08em; }
.tab2 span					{ padding-left:24px; }

.priceContent table			{ font-size:2rem; }
.priceContent2 table			{ font-size:2rem; }

#priceNote					{ margin-top:56px; text-align:right; }


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

#staffList li				{ width:32%; margin-bottom:32px; }
.listImg					{ height:240px; margin-bottom:16px; }
#staffList h4				{ font-size:1.8rem; }


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

#staffContentWrap			{ width:75%; margin:0 auto; padding:32px 40px 56px; }
#staffImg					{ width:320px; height:320px; margin:0 auto 16px; }
#staffContentWrap>h4		{ font-size: 4rem; }

#bgBlue3					{ bottom:60px; height:75%; }
#staffContentWrap>h4>span	{ font-size:1.4rem; }
#staffContentWrap>p			{ font-size:1.5rem; }


/*************    recruit     ************/

#rcrtBtn					{ display:none; }

#rcrtListWrap				{ height:100%; }

#rcrtList					{ display:flex; justify-content: space-between; flex-wrap: wrap;  }
#rcrtList>li				{ width: calc((100% - 20px)/ 2); margin: 0 0 20px; padding-top:0;  }
.rcrtCont,#rcrtApply p		{ font-size:1.5rem; }	


#rcrtApply					{ width: 70%; margin-top:20px; padding: 0 2.8% 24px; }


}


@media screen and (min-width:960px){

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



#cncpt						{ padding-top:80px; }
#cncpt>.container 			{ justify-content: center; align-items: center;  }
#cncptImg					{ width:464px; height:720px; }
#cncptTxt					{ position:relative; width:464px; height:416px; }
#cncpBdr					{ position:absolute; width:464px; height:352px; top:50%; left:-32px; transform : translateY(-50%); padding:72px; }
#cncpBdr h2					{ text-align:left; }
#cncptTxt p 				{ padding:0; font-size:1.5rem; }

#salonList1>li				{ width: calc((100% - 24px * 3)/ 4); height:228px; }

#image1						{ height:416px; }
#image2>li					{ height:392px; }

#info1						{ display:flex; flex-wrap: wrap; justify-content: center; }
#info1>li					{ width:42%; margin-bottom:48px; }
#info1>li:nth-child(odd)	{ margin-right:2%; }	
#info1 a 					{ justfy-content:flex-start; }
.infoTtle					{ width: calc(100% - 192px); }

#topInsta li				{ width:18%; height:187px;}


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

.grid-sizer,.grid-items 	{ width:calc((100% - 32px * 3)/ 4); }

.grid-items h3				{ font-size:2rem; }


/*************   single info     ************/


#infoMain					{ width: calc((100% - 64px)* 0.8); }

#infoSide					{ width: calc((100% - 64px)* 0.2); }



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

#gMap						{ width: calc((100% - 20px)* .62) !important; }
#accessR					{ width: calc((100% - 20px)* .38)!important; }
#accessR dd					{ margin-bottom:32px!important; }
#algAcc dd					{ margin-bottom:28px!important; }
#algResv1,#algResv2			{ width:calc((100% - 8px)* .42) !important; }					


#hair1 div					{ height:400px; }
#hair2 div					{ height:256px; }


#bgBlue2					{ width:64%; height:77%; } 
#bgBlue2.bgBluetwin					{ height:87%;} 

#priceContentWrap			{ width:800px; height:480px; }
#priceContentWrap2			{ width:800px; height:480px; }
.priceContent table			{ width:496px; }
.priceContent2 table			{ width:496px; }
#priceContentWrap .bx-wrapper{height:480px;}
#priceContentWrap .bx-viewport{height:480px!important;}
#priceContentWrap .bx-viewport li{height:480px;}
#priceContentWrap2 .bx-wrapper{height:480px;}
#priceContentWrap2 .bx-viewport{height:480px!important;}
#priceContentWrap2 .bx-viewport li{height:480px;}

#bgWhite					{ width:376px; height:376px; }

.tab						{ width: 47%;}


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

#staffList					{ justify-content: flex-start;  }	
#staffList li				{ width: calc((100% - 24px * 5)/ 6); margin-right:24px; }
#staffList li:nth-child(6n)	{ margin-right:0; }
.listImg					{ height:160px; }
#staffList h4				{ font-size:1.5rem; }


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

#staffContentWrap			{ width:77%; height:400px; padding:64px 64px 64px 24%; }
#staffImg					{ position:absolute; top:50%; left:-15%; width:312px; height:312px; transform : translateY(-50%); }
#staffContentWrap>h4		{ font-size: 5rem; text-align:left; }

#bgBlue3					{ bottom:80px; width: 80%; height:55%; }


/*************    recruit     ************/

#rcrtListWrap				{ padding:48px 0;}

#rcrtList h3				{ font-size:1.9rem; margin-bottom:32px; }

.rcrtCont					{ padding: 0 48px; }

#rcrtList table td			{ display:inline-block; }
#rcrtList table td:nth-child(odd)
							{ width:25%; }
#rcrtList table td:nth-child(2n)
							{ width:75%; }

#rcrtApply 					{ width:50%; }

}

@media screen and (min-width:1280px){



#top_main					{ width:100%; }
.container					{ max-width: 1440px; margin:0 auto; }


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

#cncptImg					{ width:536px; height:808px; }
#cncptTxt					{ width:656px; height:472px; }
#cncpBdr					{ width:656px; height:408px; }

#salonList1>li				{ width: calc((100% - 48px * 3)/ 4); height:324px; }
#salonList1 img 			{ width:auto; }

#info1>li					{ width:480px; }
#info1>li:nth-child(odd)	{ margin-right:48px; }

#topInsta li				{ width:256px; height:256px; margin-bottom:40px; }

#company2>li 				{ width: calc((100% - 64px)/ 2); }
#company2 table td 			{ display:inline-block; }
#comPro	td:nth-child(odd)	{ width:204px!important; }
#comHis	td:nth-child(odd)	{ width:140px; }
#comHis	td:nth-child(even)	{ max-width: 548px; }


/*************    info     ************/


#infoMain					{ width: calc((100% - 72px)*0.83); }

#infoSide					{ width: calc((100% - 72px)*0.17); }


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

#access1>li					{ height:495px; overflow:hidden; }
#gMap						{ width: calc((100% - 40px)* .62) !important; }
#accessR					{ width: calc((100% - 40px)* .38)!important; }
/*#gMap						{ width:880px !important; }
#accessR					{ width:520px !important; }*/

#algResv1					{ margin-right:8px; }
#algResv1,#algResv2			{ width:208px!important; }	


.hairstyle					{ justify-content: space-between; }
.hairstyle li				{ margin-bottom:48px; }
/*#hair1 li					{ width: calc((100% - 56px)/ 2); }
#hair1 div					{ height:448px; }*/
#hair2 li					{ width: calc((100% - 48px * 2)/ 3); }
#hair2 div					{ height:288px; }

#bgBlue2					{ width:57.9%; }
.tab						{ width: 38%;}


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

#staffList li				{ width: calc((100% - 32px * 5)/ 6); margin-right:32px;  }
.listImg					{ height:213px; }
#staffList h4				{ font-size:1.8rem; }

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

#staffContentWrap			{ width:60%; height:456px; padding:64px 64px 64px 252px; }
#staffImg					{ left:-180px; width:360px; height:360px; }
#staffContentWrap>h4		{ margin-bottom:56px; }
#staffContentWrap>h4>span	{ margin-top:8px; }
#staffContentWrap>p			{ letter-spacing:0.14em; line-height:2.3; }

#bgBlue3					{ width: 75%; height:336px; }



/*************    recruit     ************/


#rcrtList>li				{ width: calc((100% - 48px)/ 2); margin: 0 0 48px; }	

.rcrtCont					{ padding: 0 72px; }

#rcrtList table td:nth-child(odd)
							{ width:22%; }
#rcrtList table td:nth-child(2n)
							{ width:78%; }			



}

@media screen and (min-width: 850px) and (max-width: 970px) {
.tab				{width: 50%;}
}