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

/****** Page SALON PARENT  ********/
#salon_parent					{ margin-bottom:40px!important; }
#salon3>li						{ float:left; width:300px; margin-right:50px; margin-bottom:30px; }
#salon3>li:nth-child(3n)		{ margin-right:0; }

.salon_img						{ height:250px; background-size: cover; background-position: center center; }
.shop_name2						{ width:155px; text-align: center; font-size:1.2em; font-style:italic; letter-spacing: 0.1em;  }
.shop_name2:after				{ content: url(../img/mark_shop_m.png); margin-top:-30px; }
.shop_name2>p					{ margin-top:6px; margin-bottom:-10px; }
.address						{ margin-bottom:4px; font-size:0.78em; }
.tel							{ font-size:0.91em; }


/****** Page SALON ********/
section#slider					{ position:relative; margin-bottom:90px; }

.bx-wrapper						{ margin-bottom: 20px; }
.bxslider2						{ height:450px; overflow:hidden;  }
.bxslider2 li					{ float:left; padding-left:250px; }
.bx-viewport					{ max-height: 450px; }


.custom-thumb					{ height:80px; text-align:right; }				 /* 参考 http://560days.com/lab/2013/02/001244.php */
.custom-thumb>a					{ display:inline-block; width:118px; height:80px; margin-left:8px; background: #000;}
.custom-thumb>a:first-child		{ margin-left:0; }
.custom-thumb>a>div				{ width:100%; height:100%; opacity: 0.5; transition: .5s; }
.custom-thumb>a>div:hover		{ width:100%; opacity: 1; }
.custom-thumb a.active div 		{ opacity: 1; }  

.shop_name						{ top:0; left:118px; width:185px; font-size: 1.43em; }
.shop_name:after				{ content: url(../img/mark_shop_l.png); margin-top:-36px; }


#saloninfo>div					{ float:left; width:475px; }
#left							{ margin-right:50px; }
#right							{ height:220px; }

#table th						{ width:88px; text-align:left; font-size:1.1em; }
#table td						{ vertical-align:middle; padding-top:3px; padding-left:9px; font-size:0.94em; }
#table th,td					{ padding-bottom:8px; }

#sns_icon						{ margin-top:27px; }
#sns_icon *						{ display:inline-block; }
#sns_icon>a						{ width:46%; height:25px; margin-right:15px; padding-top:2px; background-color:#000; color:#FFF; text-align:center; font-size: 0.87em; }
#sns_icon>a>*					{ vertical-align:middle; }
#sns_icon>a>img					{ margin-right:10px; width:14px;}
#sns_icon>a>p	  				{ margin:0; letter-spacing:0.05em; }

#sns_icon>#btn_reservation{    width: calc(92% + 20px);height: 25px;padding-top: 2px;margin-bottom:30px;background-color: #555;color: #FFF;text-align: center;font-size: 0.87em;}

#staff							{ margin-bottom: 45px!important; }
#staff1>li						{ float:left; width:180px; height:240px; margin-right:25px; margin-bottom:25px; }
#staff1>li:nth-child(5n)		{ margin-right:0; }

#staff1>li>a					{ display:block; -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); filter: grayscale(100%); transition: 0.5s linear; }
#staff1>li>a:hover				{ display:block; -webkit-filter: grayscale(0%); -moz-filter: grayscale(0%); -ms-filter: grayscale(0%); filter: grayscale(0%); }
.staff_img						{ height:180px; background-size: cover; background-position: center center; }
.staff_occp						{ padding-top:12px; padding-bottom:3px; font-size:0.76em; }
.staff_name						{ font-size:0.94em; }

#reservation_cs ul { padding:0 12px;}
#reservation_cs li { padding-bottom:12px;padding-left:12px;font-size:0.94em;}

#price							{ padding-top:30px; margin-top:-30px; }			
#price>ul>li					{ margin-bottom:35px; }
#price>ul>li:last-child			{ margin-bottom:0; }
#price table td					{ font-size:0.81em; }
#price table td:nth-child(2n)	{ width:75px; text-align:right; }

#blog1>li						{ float:left; width:226px; height:250px; margin-right:32px; padding:15px; border:1px solid #CCCCCC; }
#blog1>li:last-child			{ margin-right: 0; }
.blog_img						{ width:196px; height: 135px; background-size: cover; background-position: center center; }
.date							{ margin:13px 0 5px; font-size:0.9em; }
.blog_text						{ line-height: 1.7; font-size:0.77em; }



/****** Single STAFF ********/

#staff2							{ margin-bottom:100px; }
#staff2>li						{ float:left; height: 250px; overflow:hidden; }
#staff_img 						{ width:250px; background-size: cover; background-position: center center; margin-right:50px; -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); filter: grayscale(100%);  }
#staff_profile					{ width:700px; }
#staff_profile>h3				{ padding-bottom:3px; border-bottom: 1px dotted #CCCCCC; font-size:1.13em; }
#staff_occp						{ margin-right:35px; font-size:0.9em; }
#staff_profile>p				{ margin-top:20px; margin-bottom:0; font-size:0.88em; line-height:1.45; }

#hairstyle_all>li					{ float:left; width:232px; height:300px; margin-right:24px; margin-bottom:24px; }
#hairstyle_all>li:nth-child(4n)		{ margin-right:0; }

#hairstyle_all>li>a					{ display:block; height:100%; background-size: cover; background-position: center center; }


@media screen and (max-width:375px) {

/****** Page SALON PARENT  ********/

#salon3>li						{ width:49%; margin-right:2%; }
#salon3>li:nth-child(3n)		{ margin-right:2%; }
#salon3>li:nth-child(2n)		{ margin-right:0; }

.salon_img						{ height:180px;}


/****** Page SALON ********/

section#slider					{ margin-bottom:50px; padding-top:20px; }

.bx-wrapper						{ margin-bottom: 20px; }
.bxslider2						{ height:220px; }
.bxslider2 li					{ padding-left:0; }
.bx-viewport					{ max-height: 450px; }

.custom-thumb					{ height:50px; }
.custom-thumb>a					{ width:12%; height:45px; margin-left:0.5%;} 
.shop_name						{ top:-30px; left:0; }

#saloninfo>div					{ float:none; width:100%; }
#left							{ margin-right:0; margin-bottom:30px; }

#table th						{ width:20%; font-size:0.8em; }
#table td						{ padding-top:3px; padding-left:9px; font-size:0.88em; }
#table th,td					{ padding-bottom:8px; }

#sns_icon						{ margin-top:10px; }
#sns_icon>a						{ width:100%; margin-right:0.5%; font-size: 0.8em; }
#sns_icon>a:last-child			{ margin-right:0; }
#sns_icon>a>img					{ margin-right:5px; }
#sns_icon>#btn_reservation{    width: 100%;}

#staff1>li						{ width:49%; height:240px; margin-right:2%; }
#staff1>li:nth-child(5n)		{ margin-right:2%;}
#staff1>li:nth-child(2n)		{ margin-right:0;}

#blog1>li						{ width:49%; height:245px;  padding:15px 3%; margin-right:2%; margin-bottom:25px; }
#blog1>li:nth-child(2n)			{ margin-right: 0; }
#blog1>li:last-child			{ margin-bottom: 0; }

.blog_img						{ width:100%; height: 120px; }




	
	
}