/*=============================================================*/
/*=====================　allページ　フォント========================*/



html{
	font-family: 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック';
	font-family:  "Noto Sans Japanese";
}
body.top section.sect .titleArea h2 span.en{
	font-family: 'Crimson Text', serif;
	font-size: 34px;
}

nav.Nav li a{
	font-family: 'Crimson Text', serif;

}

body.lower #pageTitleArea h1 span{
	font-family: 'Crimson Text', serif;

}
footer #footerInner #footerNav ul li a{
	font-family: 'Crimson Text', serif;

}
/*sub*/
#sub .subBox .titleArea p span.en{
	font-family: 'Crimson Text', serif;

	font-weight: normal;
}
/*sub style カテゴリ*/
#sub-style .subBox .titleArea p span.en{
	font-family: 'Crimson Text', serif;

	font-weight: normal;
}
/*sub blog カテゴリ メイン下*/
#sidebar .subBox .titleArea p span.en{
	font-family: 'Crimson Text', serif;
    letter-spacing: .11em;

}
/*top more*/
body.top section.sect .titleArea a span{
	font-family: 'Crimson Text', serif;
    letter-spacing: 2px;
}
/*news blog more*/
body.blog #main .couponArea .couponContent .txt .more span, body.news #main .couponArea .couponContent .txt .more span{
	font-family: 'Crimson Text', serif;
    letter-spacing: 2px;
}
/*staff style more*/
body.stylist #main .stylistBox .txtInfo .blogArea .titleArea a span, body.stylist #main .sect02 .titleArea a span,body.style #main .sect02 .titleArea a span{
	font-family: 'Crimson Text', serif;
    letter-spacing: 2px;	
}

/*stylist*/
body.stylist #main .sect02 .titleArea h3 span.en,body.stylist #main .stylistBox .txtInfo .blogArea .titleArea h3 span.en{
	font-family: 'Crimson Text', serif;


}
/*coupon*/
body.coupon #main section.sect01 .titleArea h3 span.en{
	font-family: 'Crimson Text', serif;


}
/*style　タイトル*/
body.style #main .sect02 .titleArea h3 span.en{
	font-family: 'Crimson Text', serif;

}
/*access タイトル*/
body.access #main .shopdate h3 span.en,body.top #main .shopdate h3 span.en{
	font-family: 'Crimson Text', serif;

}

/*.blog 一覧日付*/
body.blog #main p.newsTime01,body.news #main p.newsTime01{
	font-family: 'Crimson Text', serif;

}
/*body.top media */
body.top #main section.sect ul.wrapper li a.txt p.top_media{
	font-family: 'Crimson Text', serif;

}
/*body.top blog 日付*/
body.top #main section.sect ul.wrapper li a.txt p.top_blog{
	font-family: 'Crimson Text', serif;
}	



/*ｈ1の装飾　筆記体*/
.bg_deco{
	font-family:'Parisienne', cursive;
}


/*日本語*/
body.top h1{
	font-family:  "Noto Sans Japanese";
	font-weight: lighter;
}
body.top section.sect .titleArea h2 span.jp{
	font-family:  "Noto Sans Japanese";
	display: none;
}
body.top #main .shopdate p{
	font-family:  "Noto Sans Japanese";	
}
/*menu*/
body.menu #main .sect .titleArea h3 span.en{
	font-family:  "Noto Sans Japanese";
	font-size: 18px;
}
/*style カテゴリ*/
#sub-style .subBox .titleArea p span.jp{
	font-family:  "Noto Sans Japanese";	
}
/*style　スタイル名*/
body.style #main .styleBox .txtInfo h2{
	font-family:  "Noto Sans Japanese";
}
/*style 小タイトル*/
body.style #main .sect02 .titleArea h3 span.jp{
	font-family:  "Noto Sans Japanese";	
}
/*stylist 小タイトル(blogArea)*/
body.stylist #main .stylistBox .txtInfo .blogArea .titleArea h3 span.jp{
	font-family:  "Noto Sans Japanese";		
}
/*stylist 小タイトル（担当スタイル）*/
body.stylist #main .sect02 .titleArea h3 span.jp{
	font-family:  "Noto Sans Japanese";		
}
/*access 小タイトル*/
body.access #main .shopdate h3 span.jp,body.top #main .shopdate h3 span.jp{
	font-family:  "Noto Sans Japanese";		
}
body.shoplist #main .sect02 .titleArea h3 span.en{
	font-family:  "Noto Sans Japanese";
}

/*=============================================================*/
/*=======================　all ページ　======================================*/
img{
	width: 100%;
}
/*=============================================================*/
/*=====================　各ページ　header　========================*/
/*スマホ時に下に予約ボタン
ヘッダーに★部分を変更

		<ul class="spReserve">
			<li><a href="https://beauty.hotpepper.jp/slnH000305245/" target="_blank"><span>WEB予約</span><img src="/img/upload/2018/06/entry_icon.png" alt="WEB予約"></a></li>★
			<li><a href="tel:{self.tel}"><span>TEL予約</span><img src="/img/upload/2018/06/phone01.png" alt="お電話でご予約"></a></li>★
		</ul>
	</div><!-- /#headerInner -->


*/
.decoline{
	position: fixed;
    height: 100%;
    border-left: double 3px rgba(175, 157, 124, 0.8);
    width: 1px;
    left: 18px;
	z-index: 50;
	border-right: double 3px rgba(175, 157, 124, 0.8);
}

header{
	border-top:none;
    position: relative;
    background:none;
    width: 100%;
    height: 60px;
    z-index: 100;
    top: 0;
	text-align: right;
	background:url(/img/upload/2018/07/toppage.jpg) center center;
	

}
body.top header{
	margin-bottom: 50px;	
}

header #headerInner{
    width: 100%;
	padding: 0;
	max-width: 1920px;
	display: block;
}
header #headerInner ul.pcBtn{
    position: fixed;
    bottom: 0px;
	width: 110px;
    margin: 0 10px 40px 0;
	right: 0;
}
header #headerInner ul.pcBtn li.reserve a{
	color: #fff;
	padding: 38px 0 52px;
    text-decoration: none;
	background:rgba(175, 157, 124, 0.8);
	font-size: 15px;
    border-radius: 50%;
	margin-bottom: -15px;
	line-height: 21px;

}
header #headerInner ul.pcBtn li.reserve a:hover{
	background:#000080;
	opacity: 1;
}
#headerInner ul.snsBtn{
	position: fixed;
	top: 45%;
	right: 36px;
	z-index: 50;
}

#headerInner ul.snsBtn li{
    width: 30px;
    margin-bottom: 15px;
    text-align: center;
}

.header_bg{
    position: absolute;
    top: 35px;
	left: 0;
    z-index: -1;
    transform: rotate(-3deg);
	animation-duration: 2s;
	animation-name: polygons02;
	animation-fill-mode: forwards;
}

@keyframes polygons02 {

  0% {
    opacity: 0;
    transform: translateX(-100px);
	filter: blur(50px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
	filter: blur(0px);
  }
}

body.top .header_bg{
	z-index: 10;
}
.header_bg .bg_deco{
	font-size: 250px;
	color: rgba(238, 238, 238, 0.56);
	margin: 40px;
}
.Nav{
	top:0px;
    z-index: 100;
	position: relative;
    width: 100%;
    margin: 0 auto;
}
.Nav > ul{
	position: relative;
	width: 100%;
	background: none;
}
.Nav > ul > li a{
    padding: 5px 8px;
	background: none;
    border-bottom: dotted 3px #fff;
}
.Nav > ul > li a:hover{
    color: rgba(175, 157, 124, 0.8);
    opacity: 1;
	border-bottom: dotted 3px rgba(175, 157, 124, 0.8);
}
.Nav .logoArea{
	position: relative;
    left: 0;
    top: 150px;
	margin: -140px 10px 70px;
	width: 230px;

}

body.top .Nav{

}
body.top .Nav .logoArea{
	position: absolute;
    left: 7%;
    top: 150px;
	margin: 0;
	width: 330px;
	animation-duration: 2s;
	animation-name: polygons02;
	animation-fill-mode: forwards;
	animation-delay:0s;
    opacity: 0;
}

@keyframes polygons02 {
  0% {
    opacity: 0;
    transform: translateX(-100px);
	filter: blur(50px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
	filter: blur(0px);
  }
}

.Nav > ul > li > ul{
	top: auto;
	opacity: 1;
    background: rgba(255, 255, 255, 0.97);
}
.Nav > ul > li > ul li a{
	border-bottom: solid #fff;
}

/*-------------クローンナビ装飾------------------------------------------------*/
.clone-nav,body.top .clone-nav {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 50;
    width: 100%;
    transition: .3s;
    transform: translateY(-440%);
    height: 65px;
	background: #fff;
}

.is-show,body.top .is-show {
    transform: translateY(0);
}
.clone-nav .logoArea,
body.top .clone-nav .logoArea{
	width: 100px;
    top: 0;
    margin: 5px 0 -40px 10px;
	position: relative;
	left: 0;
}
.clone-nav ul, body.top .clone-nav ul{
	margin-top: -5px	
}
.clone-nav ul.submenu, body.top .clone-nav ul.submenu{
	top:30px;
}
nav#footerNav.is-show ,body.top nav#footerNav.is-show{
    transform: translateY(-440%)
}
@media only screen and (max-width: 1024px){
	.clone-nav{
		display: none;
	}	
}

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

@media only screen and (max-width: 1150px){
	header #headerInner .logoArea{

	}
}
@media only screen and (max-width: 1024px){
	.Nav,body.top .Nav{
		top: 0;
		width:100%;
		right: 0;
	    position: absolute;
		position: fixed;
	}
	.Nav .navbtn{
		right: 10px;
	    z-index: 1000;
		top:12px;
		position: fixed;
	}
	body.top .navbtn{

	}
	.Nav .navbtn a, .Nav .navbtn a.close{
		background-color: #fff;
	    border-radius: 50%;

	}
	.Nav .navbtn a::before, .Nav .navbtn a.close::before{
		background: #333;
	}
	.Nav .navbtn a span::after, .Nav .navbtn a.close span::after{
		background: #333;
	}
	.Nav .navbtn a::after, .Nav .navbtn a.close::after{
		background: #333;
	}
	.Nav > ul{
	    z-index: 100;
	    top: 0px;
		position: relative;
	    padding: 40px 20px 20px;
		text-align: left;
	    width: 30%;
    	float: right;
	    background: #666;
	}
	body.top .Nav ul{

	}
	.Nav .logoArea{
	    top: 3px;
    	left: 3px;
    	position: absolute;
	    width: 200px;
		margin: 5px;
	}
	body.top .Nav .logoArea{
	    width: 330px;
    	top: 15px;
		left: 5px;
		margin: 5px;
	}
	header{
	    height: 64px;
		position: fixed;
		background: none;
		z-index: 50;
	    background: url(/img/upload/2018/07/toppage.jpg);	
	}
	header #headerInner ul.spReserve{
	    margin: 0 auto;
	    width: 100%;
    	padding: 0;
	    position: fixed;
		bottom: 0;
	    background: rgb(175, 157, 124);
	    border-top: solid 3px rgb(175, 157, 124);
	    border-bottom: solid 3px rgb(175, 157, 124);
	}
	header #headerInner ul.spReserve li{
		width: 50%;
	}
	header #headerInner ul.spReserve li:nth-child(2){
	    border-left: dotted 1px #fff;
	}
	header #headerInner ul.spReserve li:nth-child(3){
	    border-left: dotted 1px #fff;
	}
	header #headerInner ul.spReserve li a{
		border: none;
	    padding: 5px 0;
	    color: #fff;
	}
	header #headerInner ul.spReserve li a span,header #headerInner ul.spReserve li a img{
		display: inline-block;
	}
	header #headerInner ul.spReserve li a img{
		margin: 0 auto;
    	width: 20px;
	}
	header #headerInner ul.spReserve li a span{
		padding: 2px;
	}
	header #headerInner .logoArea a.logo{
    	margin-left: 0;	
	}
	#headerInner ul.snsBtn{
		right: 0px;
	}
	#headerInner ul.snsBtn li{

	}
	
	.Nav > ul > li{
		width: 100%;
	    border-bottom: dotted 1px #fff;
	}
	.Nav > ul > li a{
		padding: 8px 10px;
	    background: none;
    	color: #fff;
		border-bottom: none;
	}
	.Nav > ul > li a:hover{
		border-bottom: none;
		color: #000080;
	}
	.Nav > ul > li.parent > a::before{
		border-top: solid 1px #fff;
		border-right: solid 1px #fff;
	}
	.Nav > ul > li.parent.open > a{
		border-bottom: dotted 1px #fff;
    	color: #000080;
	}
	.Nav > ul > li.parent.open > a::after{
		background: none;
	}
	.Nav ul.close{
		width: 30%;
		padding: 40px 20px 20px;
		border: none;
		position: fixed;
		margin-right: 0;
	}
	.decoline{
		left: 20px;
	}
	.Nav > ul > li > ul{
		background: rgba(255, 255, 255, 0.24);
	}
	.Nav > ul > li > ul li a{
	    background: none;
		border-bottom: dotted 1px #fff;
	}
	.Nav > ul > li > ul li a:hover{
	    background: none;
		border-bottom: dotted 1px #fff;
	}
	.Nav > ul > li > ul li a::before{
		border-top: solid 1px #fff;
    	border-right: solid 1px #fff;
	}
	.header_bg{
		top:100px;
	}
	.header_bg .bg_deco{
		font-size: 200px;
		margin: 0;
	}
}
@media only screen and (max-width: 768px){
	header{
		height: 49px;
	}
	.Nav .logoArea{
		width: 150px;		
	}
 	body.top .Nav .logoArea{
		width: 300px;

	}
	.header_bg .bg_deco{
		font-size: 150px;
	}
	.header_bg{

	}
	body.top .Nav ul{

	}
	.Nav .navbtn{
		right: 5px;
		top:5px;
	}
}
@media only screen and (max-width: 600px){
	.decoline{
		left: 5px;
	}
	.header_bg .bg_deco{
	    font-size: 125px;
	}
	.header_bg{
		top: 50px;
	}
	body.top .Nav .logoArea{
		top:13px;
		width: 200px;
	}


}
@media only screen and (max-width: 425px){
	header{
		height: 27px;
	}
	header #headerInner .logoArea{
	    margin: 11px 0 0 11px;
	}
	header #headerInner .logoArea a.logo{
	    width: 100px;
	}

	header #headerInner .logoArea a.logo h1{
		margin: 0;
	}
	.Nav .logoArea{
	    width: 100px;
		top:0px;
		margin-top: 2px;
	}
	.header_bg .bg_deco{
		font-size: 80px;
	}
	.header_bg{

	}
	body.top .Nav .logoArea{
		width: 160px;
		top:2px;
	}
	#headerInner ul.snsBtn li{
		width: 20px;
	}
	header #headerInner ul.spReserve li a span{
		padding: 2px;
		letter-spacing: -1px;
		display: block;
	    font-size: 12px;
	}
}


/*=============================================================*/
/*=====================　各ページ　footer　========================*/

/*
下記★部分を追加し基のお問合せ削除

            <div id="footerLink">
                <ul class="actionBtn">
                    <li class="recruit"><a href="{url(recruit)}" target="_self">RECRUIT</a></li>
                    <li class="reserve"><a href="https://beauty.hotpepper.jp/slnH000305245/" target="_blank">WEB予約</a></li>
		    		<li class="contact"><a href="{url(contact)}">お問い合わせ</a></li>★
                </ul>

*/

/*文字の色*/
footer #footerInner #footerNav ul li a{
	
}


footer{
	background:url(/img/upload/2018/07/toppage.jpg)top center;
    padding:  0;
}
#footerInner{
	width: 92%;
	padding: 1% 4%;	
}
footer #footerInner #footerNav ul{
	width: 100%;
}
footer #footerInner #footerContent{
	width: 100%;
	display: block;
}
footer #footerInner #footerPolicy{
	background: none;
	padding: 0;
}
footer #footerInner #footerPolicy ul{
	margin: 0;
}
footer #footerInner #footerContent #footerInfo{
	width: 60%;
	margin: 0 auto;
}
footer #footerInner #footerContent #footerInfo #footerLogo{
    display: inline-block;
	width: 100%;
}
footer #footerInner #footerContent #footerInfo #footerLogo a{
    width: 300px;
    height: auto;
    margin: 30px auto;
    text-align: center;
}
footer #footerInner #footerContent #footerInfo #footerLogo p{
    width: 100%;
    margin: 0;
	text-align: center;
}
footer #footerInner #footerContent #footerInfo .txtInfo{
	display: inline-block;
	width: 100%;
	text-align: center;
}
footer #footerInner #footerContent .businessHourWrapper{
	width: 100%;
	margin: 30px auto;
    max-width: 1200px;
}
.businessHourWrapper .businessHour,
.finalAcceptance,
.finalAcceptance{
	width: 30%;
	text-align: center;
}
footer #footerInner #footerContent .businessHour p, footer #footerInner #footerContent .finalAcceptance p{
	border-bottom: dotted 1px;
    width: 70px;
    padding-bottom: 5px;
    margin:0 auto 10px;
	text-align: center;
}
footer #footerInner #footerContent .businessHour dl, footer #footerInner #footerContent .finalAcceptance dl{
	width: 100%;
	display: block;
	line-height: 21px;
	margin-bottom: 0;
}
footer #footerInner #footerContent #footerLink{
	margin: 0 auto;
	width: 100%;
    max-width: 1200px;
}
footer #footerInner #footerContent #footerLink ul.actionBtn{
	width: 100%;
    display: flex;
    justify-content: space-between;
	margin: 0 auto 20px;
    max-width: 1200px;
}

footer #footerInner #footerContent #footerLink ul.actionBtn li.recruit{
	background: none;	
}
footer #footerInner #footerContent #footerLink ul.actionBtn li{
	width: 30%;
	border: solid 2px #fff;
	height: auto;
	margin: 0;
}
footer #footerInner #footerContent #footerLink ul.actionBtn li.recruit,footer #footerInner #footerContent #footerLink ul.actionBtn li.reserve{
	margin-right: 3.5%;
}
footer #footerInner #footerContent #footerLink ul.actionBtn li a{
	width: 100%;
	margin: 0 auto;
	height: auto;
    padding: 10px 0;
	color: #fff;
	box-sizing: border-box;
}
footer #footerInner #footerContent #footerLink ul.actionBtn li.reserve a{
	background: none;
}
footer #footerInner #footerContent #footerLink ul.actionBtn li.recruit,
footer #footerInner #footerContent #footerLink ul.actionBtn li.reserve,
footer #footerInner #footerContent #footerLink ul.actionBtn li.contact{
    box-sizing: border-box;
	background: none;
	margin: 0;
}
footer #footerInner #footerContent #footerLink ul.actionBtn li.recruit a:hover,
footer #footerInner #footerContent #footerLink ul.actionBtn li.reserve a:hover,
footer #footerInner #footerContent #footerLink ul.actionBtn li.contact a:hover{
	background: #fff;
	color: #000;
	opacity: 1;
}
footer #footerInner #footerContent #footerLink ul.snsBtn{
	position: relative;
	bottom: 0;
	display: block;
	text-align: center;
}
footer #footerInner #footerContent #footerLink ul.snsBtn li{
	margin: 0 5px;
    width: 30px;
    display: inline-block;
}

@media only screen and (max-width: 1024px){
	footer{
	    padding-bottom: 50px;
	}

	footer #footerInner #footerContent #footerLink ul.actionBtn li.recruit,
	footer #footerInner #footerContent #footerLink ul.actionBtn li.reserve, 
	footer #footerInner #footerContent #footerLink ul.actionBtn li.contact{
		width: 30%;
		margin: 0;
	}
	footer #footerInner #footerContent #footerInfo{
		width: 100%;
	}
	footer #footerInner #footerContent .businessHourWrapper{
		display: flex;
	}
	footer #footerInner #footerContent #footerLink ul.snsBtn{
	    width: 100%;
	}

	footer #footerInner #footerContent #footerInfo #footerLogo{
		width: 100%;
	}
	footer #footerInner #footerContent #footerInfo .txtInfo{
		width: 100%;
	}
	footer #footerInner #footerContent #footerInfo #footerLogo p.salonName{
		font-size: 20px;
		margin: 20px auto;
	}
	footer #footerInner #footerContent #footerLink{
		width: 100%;
	}
}
@media only screen and (max-width: 640px){
	footer #footerInner #footerContent #footerLink ul.actionBtn{
	    flex-direction: column;
	}
	footer #footerInner #footerContent #footerLink ul.actionBtn li.recruit,
	footer #footerInner #footerContent #footerLink ul.actionBtn li.reserve,
	footer #footerInner #footerContent #footerLink ul.actionBtn li.contact {
		width: 100%;
		margin: 0 auto 10px;
	}
}
@media only screen and (max-width: 425px){
	footer #footerInner #footerContent .businessHour dl, footer #footerInner #footerContent .finalAcceptance dl{
		font-size: 12px;
	}
	footer #footerInner #footerContent #footerLink ul.snsBtn li{
		width: 20px;
	}
	footer #footerInner #footerContent .businessHourWrapper{
		flex-direction: column;
	}
	.businessHourWrapper .businessHour,
	.finalAcceptance,
	.finalAcceptance{
		width: 100%;
	    margin: 0 auto 20px;
	}
	.finalAcceptance{
		margin: 0 auto;
	}
}


/*=============================================================*/
/*=====================　各ページ　content　========================*/
body.lower #content{
	width: 80%;
    max-width: 1200px;
	margin: 0px auto 50px;
}
body.lower #content #main{
	width: 100%;
	padding: 0;
}
body.lower.onecolumn #content #main{
	width: 100%;
	padding: 0;
}
#main{
	width: 100%;
	padding: 0;
}
@media only screen and (max-width: 1024px){
	body.lower #content{
		width: 96%;
		padding: 0;
		margin: 0px auto;
	}
	#content{
		padding: 0;
	}
}
@media only screen and (max-width: 768px){
	body.lower #content{

	}
}
@media only screen and (max-width: 425px){
	body.lower #content{

	}
}
    
/*=============================================================*/
/*=====================　各ページタイトル　========================*/
body.lower #pageTitleArea{
	margin-top: 100px;
	background: none;
	height: 85px;
	padding: 0;
	z-index: 50;
	max-width: 1920px;
	/*
	background-image: linear-gradient(
	-45deg,
	#fff 25%,
	#ebebeb 25%,
	#ebebeb 50%,
	#fff 50%,
	#fff 75%,
	#ebebeb 75%,
	#ebebeb
);
background-size: 30px 30px;
background-attachment: fixed;
	
	*/
	animation-duration: 1s;
	animation-name: polygons03;
	animation-fill-mode: forwards;
	animation-delay:1s;
    opacity: 0;
}

@keyframes polygons03 {
  0% {
    opacity: 0;

	filter: blur(50px);
  }
  100% {
    opacity: 1;

	filter: blur(0px);
  }	
	
}
body.lower #pageTitleArea h1{
	margin-top: 43px;
	font-size: 16px;
}
body.lower #pageTitleArea h1 span{
    font-size: 4.5rem;

	margin: 0;
}
body.lower #pageTitleArea p{
    margin: -3% 0 1px 10%;
    font-size: 16px;
}

@media only screen and (min-width: 1300px){
	body.lower #pageTitleArea{

	}
	body.lower #pageTitleArea h1 span{

	}
	body.lower #pageTitleArea h1{
		margin-top: 53px;
	}
}

@media only screen and (max-width: 1024px){
	body.lower #pageTitleArea{
		height: 150px;
		margin-top: 80px;

	}

	body.lower #pageTitleArea h1{
	    padding-top: 50px;
		margin-top: 0;
	}
	body.lower #pageTitleArea h1 span{

	}
}
@media only screen and (max-width: 768px){
	body.lower #pageTitleArea{

	}
}

@media only screen and (max-width: 640px){
	body.lower #pageTitleArea h1{
        margin: 0;

	}
	body.lower #pageTitleArea h1 span{
		font-size: 32px;
		letter-spacing: 2px;
		line-height: 35px;

	}
	body.lower #pageTitleArea{

	}
}

@media only screen and (max-width: 600px){
	body.lower #pageTitleArea{
	    height: 120px;
	}
}
@media only screen and (max-width: 425px){
	body.lower #pageTitleArea{
		height: 110px;
		margin-top: 50px;
	}
	body.lower #pageTitleArea h1{
		margin:  0;
	    text-align: center;
	}

	body.lower #pageTitleArea p{
		text-align: center;
		margin: -3% 0 0;
	}
}

/*=============================================================*/
/*=====================　各ページ　サブエリア　========================*/
#sub{
    width: 30%;
    padding: 0%;
    margin: 0 0 0 2%;
    color: #fff;
}


#sub .subBox{
	padding: 4%;
}

#sub .subBox .titleArea{
	border: none;
    width: 100%;
    margin: 0 auto 6px;
}
#sub .subBox .titleArea a{
    background: #f3f3f3;
	color: #333;
    text-decoration: none;
    float: none;
    text-align: center;
    padding: 5px;
	position: relative;
}
#sub .subBox .titleArea a:hover{
	background: #666;
	opacity: 1;
	color: #fff;
}
#sub .subBox .titleArea a span{
    padding-right: 0;
    background: none;
}
#sub .subBox .titleArea p{
    font-weight: bold;
	float: none;
	text-align: center;

}
#sub .subBox .titleArea p span.jp{
	display: none;
}

/* #sub category */
#sub #subCategory,#sub #subFaq{
    background: rgba(175, 157, 124, 0.8);
	position: relative;
    padding: 60px 8% 10px;
    border-radius: 10px;

}
#sub #subCategory .titleArea,#sub #subFaq .titleArea{
	border: none;
	position: absolute;
    top: 10%;
	left: 15%;
	width: 70%;
    border-radius: 10px;
}
#sub #subCategory .titleArea p,#sub #subFaq .titleArea p{
	color: #fff;
    padding: 15px 0;
	border-bottom: dotted 1px;
}
#sub #subCategory ul,#sub #subFaq ul{
    padding: 50px 0 4%;
}
#sub #subCategory ul li a,#sub #subFaq ul li a{
	color: #fff;
}


/* #sub blog */
/* sidebar-blog-new に下記HTMLを追加

            <div class="sidebar_blog">
                <img src="{custom_blog.img_src(l)}" alt="">
            </div>


/* #sub news */
/* sidebar-news-new に下記HTMLを追加

            <div class="sidebar_img">
                <img src="{information.img_src(l)}" alt="">
	    	</div>

*/
#sub #subBlog,#sub #subNews{
	padding: 4% 0;
}

#sub .subBox .wrapper article{
	border: solid 1px #333;
    padding: 2%;
    margin-bottom: 6px;
	position: relative;
	background: rgba(255, 255, 255, 0.5);
}
.sidebar_img{
    width: 100%;
    display: inline-block;
}

#sub .subBox .wrapper article a.linkToArticle p{
	padding: 10px;
	margin-bottom: 5px;
}
#sub .subBox .wrapper article a.linkToArticle p.title{
	font-size: 1.3rem;
    border-top: dotted 1px;
    border-bottom: dotted 1px;
    margin-top: 10px;
}
#sub #subBlog .wrapper article ul,#sub #subNews .wrapper article ul{
	display: block;
    margin-bottom: 0;
    margin-top: -15px;
}
#sub .subBox .wrapper article ul li.date{
	margin-right: 0;
	margin-left: 5px;
	padding: 0;
}
#sub .subBox .wrapper article ul li.author{
	position: static;
}
#sub #subBlog .wrapper article ul li.author a,#sub #subNews .wrapper article span.category a{
	text-decoration:none;
    position: absolute;
    width: 70px;
    top: 0;
    right: 0;
    background: rgba(243, 243, 243, 0.9);
    padding: 20px 10px;
    color: #333;
	text-align: center;
}
#sub #subNews .wrapper article span.category a{
    padding: 20px 10px;
	width: 100px;
}

/*  #subStyle  */
#sub #subStyle ul.wrapper li{
	width: 50%;
    margin-bottom: 0;
}
#sub #subStyle ul.wrapper li:nth-child(3n+2){
    margin: 0;
}
#sub #subStyle ul.wrapper li:nth-child(odd){
	margin-right: 0;
}
#sub #subStyle ul.wrapper li a.img{
	margin: 0;
}
#sub #subStyle ul.wrapper li a.txt{
	display: none;
}


/* #sub Search  */

dl.search2 dd button{
	background:url(/img/upload/2018/07/toppage.jpg);
	border: solid 1px rgba(175, 157, 124, 0.8);
	
}

@media only screen and (max-width: 1024px){
	#sub{
		width: 100%;
		margin: 0 auto;
	}
	#sub .subBox{
		padding: 2%;
	}
	#sub .subBox .wrapper{
		margin-bottom: 50px;
	}
	#sub .subBox .wrapper article{
	    width: 44.9%;
		display: inline-block;
		margin-right: 1%;
	    vertical-align: top;
	}
	#sub .subBox .wrapper article:nth-child(even){
		margin-right: 0;
	}
	#sub #subBlog .wrapper article ul li.author a, #sub #subNews .wrapper article span.category a{
		width: 40%;
	    text-align: center;
	}
	#sub #subNews .wrapper article span.category a{
		width: 50%;
	}
	#sub .subBox .titleArea a{
	    padding: 20px;
	}
	#sub #subBlog .wrapper article ul, #sub #subNews .wrapper article ul{
		margin-top: -14px;
	}
	#sub #subStaff ul li a, #sub #subCategory ul li a, #sub #subMedicate ul li a, #sub #subBlogcate ul li a, #sub #subNewscate ul li a, #sub #subFaq ul li a{
	    border-bottom: none;
	}
	#sub #subStyle ul.wrapper li{
		width: 25%;
	}
}
@media only screen and (max-width: 425px){
	#sub .subBox .wrapper article{
		width: 96%;
		margin-right: 0;
	}
}

/*=============================================================*/
/*=====================　sidebar ブログコンテンツ下　========================*/
#sidebar{
	width: 80%;
    max-width: 1200px;
    margin: 10px auto 100px;
}

#sidebar .subBox{
    width: 100%;
    display: inline-block;
    vertical-align: top;
    margin: 0;
}
#sidebar .subBox .titleArea{
	border: none;
    width: 70%;
}
#sidebar .subBox .titleArea p{
    font-weight: bold;
}
#sidebar .subBox .titleArea p span.jp{
	display: none;
}
#sidebar .subBox .titleArea p span.en{
	font-size: 2.4rem;
}
#sidebar #subBlogcate ul li{
	width: 20%;
	display: inline-block;
}
#sidebar #subBlogcate ul li a{
	display: block;
    margin: 0 auto 10px;
    padding: 5px 0;
	color: #333;
    font-size: 1.4rem;
}

@media only screen and (max-width: 768px){
	#sidebar #subBlogcate ul li{
		width: 33%;		
	}

}
/*=============================================================*/
/*=====================　スタイリスト詳細　========================*/

/*
下記★を
[staff_category]<p class="job">{staff_category.name}</p>[/staff_category]
に置き換える

    <div id="main">
        <section class="sect stylistBox">
            <div class="txtInfo">
                <h2>{staff.name} {staff.kana}</h2>
                [staff_position]<p class="job">{staff.position}</p>[/staff_position]★
                <ul class="sns">

*/


body.stylist #content{

	
}
body.stylist #content #main{

}
.stylist_details #content #main{
	background: rgba(243, 243, 243, 0.5);	
}
body.stylist #main .stylistBox .visualInfo{
	width: 57%;
}
body.stylist #main .stylistBox .visualInfo .photo{
    width: 100%;
}
body.stylist #main .stylistBox .visualInfo .photo img{
	width: 100%;
}
body.stylist #main .stylistBox .visualInfo .calendar .calendarInner{
	border: 1px solid #868582;
}
body.stylist #main .stylistBox .visualInfo .calendar .calendarInner .month{
    background-color: #868582;
}




body.stylist #main .stylistBox .txtInfo{
	width: 40%;
	color: #666;
	position: relative;
}
body.stylist #main .stylistBox .txtInfo h2{
    font-size: 24px;
	color: #333;
	margin: 0 auto 20px;
	line-height: 20px;
}
body.stylist #main .stylistBox .txtInfo h2 span{
	margin-left: 0;
	font-size: 12px;
    font-weight: normal;
    color: #888;
}
body.stylist #main .stylistBox .txtInfo p.job{
    font-size: 16px;
	color: #333;
}

body.stylist #main .stylistBox .txtInfo p.catch02{
	font-size: 18px;
    line-height: 32px;
    color: #fff;
     background:url(/img/upload/2018/07/toppage.jpg);
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
    
}

body.stylist #main .stylistBox .txtInfo .career{
    background: #fff;
    padding: 3%;
    border-radius: 10px;
	color: #333;
}
body.stylist #main .stylistBox .txtInfo .career dl, body.style #main .styleBox .txtInfo .box dl{
	border-bottom: dotted 1px;
	width: 100%;
}
body.stylist #main .stylistBox .txtInfo .career dl dt{
	width: 100%;
	margin-bottom: 5px;
	font-size: 13px;
}
body.stylist #main .stylistBox .txtInfo .career dl dd{
	overflow-y: hidden;
	width: 98%;
	padding: 5px 0;
	display: block;
    margin: 0 1%;
    font-size: 13px;
    line-height: 22px;
}
.style-arrenge-point-text{
	font-size: 13px;
    line-height: 22px;
}
body.stylist #main .stylistBox .txtInfo .blogArea .titleArea{
	border-bottom: solid 1px #333;
}
body.stylist #main .stylistBox .txtInfo .blogArea .titleArea a{
	text-decoration: none;
}
body.stylist #main .stylistBox .txtInfo .blogArea .wrapper article ul li.author a{
	text-decoration: none;
}
body.stylist .sect02{
    margin: 0 auto 30px;
}
body.stylist #main .sect02 .titleArea a{
	text-decoration: none;
}
body.stylist #main .stylistBox .txtInfo .blogArea .titleArea h3,body.stylist #main .stylistBox .txtInfo .blogArea .titleArea a,body.stylist #main .stylistBox .txtInfo .blogArea .wrapper article ul li.date a,body.stylist #main .stylistBox .txtInfo .blogArea .wrapper article ul li.author a,body.stylist #main .stylistBox .txtInfo .blogArea .wrapper article a.linkToArticle p,body.stylist #main .sect02 .titleArea h3{
	color: #333;	
}
body.stylist #main .sect02 .titleArea{
	border-bottom: solid 1px #333;
}
body.stylist #main .sect02 .titleArea h3{
	padding: 10px 0 5px 10px;
}
body.stylist #main .sect02 ul.wrapper{
	width: 100%;
}
body.stylist #main .sect02 ul.wrapper li{
	margin: 0;
    width: 33%;
    float: none;
    display: inline-block;

	position: relative;
	vertical-align: top;
}
body.stylist #main .sect03 ul.wrapper li:nth-child(3n+2){
    margin: 0;
}
body.stylist #main .sect03 ul.wrapper li a.img{
    margin: 0;
}
body.stylist #main .sect02 ul.wrapper li a.txt h3{
	position: absolute;
    bottom: 0;
    left: 0;
    color: #fff;
	margin: 0 10px;
	line-height: 1.2
}

body.stylist #main .sect02 ul.wrapper li a.txt p{
	display: none;
}
@media only screen and (max-width: 1024px){
	body.stylist #main .stylistBox .txtInfo p.catch02{
		font-size: 16px;
	}
	body.stylist #main .stylistBox .txtInfo .blogArea .titleArea,body.stylist #main .sect02 .titleArea{
		padding-bottom: 0;
	}
	body.stylist #main .stylistBox .txtInfo .blogArea .titleArea h3{
		padding: 10px 0 5px;
	}
	body.stylist #main .stylistBox .txtInfo h2{
		margin: 20px auto;
	}
}
@media only screen and (max-width: 768px){
	body.stylist #main .stylistBox .txtInfo p.catch02{

	}
}
@media only screen and (max-width: 425px){
	body.stylist #main .stylistBox .txtInfo p.catch02{

	}

	body.stylist #main .stylistBox .txtInfo .blogArea .titleArea h3,body.stylist #main .sect02 .titleArea h3{
		padding: 0px 0 5px 10px;
	}
	body.stylist #main .stylistBox .txtInfo .blogArea .titleArea h3 span.en,
	body.stylist #main .sect02 .titleArea h3 span.en{
		display: block;
	    letter-spacing: 1px;
    	font-size: 20px;
	}
	body.stylist #main .stylistBox .txtInfo .blogArea .titleArea h3 span.jp,body.stylist #main .sect02 .titleArea h3 span.jp{
		margin: 0;
	}
}
/*　stylist　クーポン*/
body.stylist #main .couponArea{
    background: #fff;
	width: 100%;
    display: inline-block;
    margin: 0px auto 2%;
    vertical-align: top;
    border-radius: 10px;
	color: #666;
	box-sizing: border-box;
}

body.stylist #main .couponArea h4{
    width: 98%;
	background: #333;
    text-align: center;
    padding: 1%;
    border-radius: 10px 10px 0 0;
	margin-bottom: 0;
}
body.stylist #main .couponArea .couponContent{
	padding: 15px;
    width: 100%;
	box-sizing: border-box;
}
body.stylist #main .couponArea .couponContent .txt{
    width: 100%;
    margin-left: 2%;
}
body.stylist #main .couponArea .couponContent .img{
	width: 36%;
	display: inline-block;
}
body.stylist #main .couponArea .couponContent .img img{
	width: 100%;
}
body.stylist #main .couponArea .couponContent .txt h5{
    font-size: 16px;
    line-height: 24px;
}
body.stylist #main .couponArea .couponContent .txt p.price{
    font-size: 2.5rem;
	
}
body.stylist #main .couponArea .couponContent .txt p.couponDetail{
	border-top: dotted 1px;
    padding-top: 10px
}
body.stylist #main .couponArea .couponContent .txt ul li{
	margin-bottom: 3px;
	background-color: #c5b790;
}
.wrapper{
	margin-bottom: 0;
}
body.stylist #main .couponArea .couponContent .txt a{
    color: #333;
	background: #f3f3f3;
	font-size: 14px;
}
body.stylist #main .couponArea .couponContent .txt a:hover{
	color: #fff;
	background: #bb1668;
}
@media only screen and (max-width: 1024px){
	body.stylist #main .couponArea .couponContent .img{
	    position: relative;
		width: 100%;
	}
	body.stylist #main .couponArea .couponContent .img img{
		display: block;
	    margin-bottom: 10px;
	}
	body.stylist #main .couponArea .couponContent .img p{
		margin-left: 0;
	}
	body.stylist #main .couponArea .couponContent .txt{
		width: 100%;
		padding: 0;
		margin: 0 auto;
	}
	body.stylist #main .couponArea{
		width: 47.5%;
		display: inline-block;
		margin: 0 1% 2%;
		
	}
}
@media only screen and (max-width: 425px){
	body.stylist #main .couponArea{
		width: 100%;
		margin: 0 auto 2%;
	}	
}


@media only screen and (min-width: 1025px){
	body.stylist #main .couponArea .couponContent .img {
		max-width: 200px;
	}	
}


/*　stylist　クーポンここまで*/


/*=============================================================*/
/*=====================　staff　一覧　========================*/
.wrapper_stylist{
	margin: 0 auto;
	padding-bottom: 20px;
	overflow: visible;
}
body.stylist .sect02 h2{
	padding-bottom: 5px;
}
ul.wrapper_stylist li{
	margin: 0;
	position: relative;
	width: 25%;
    margin-right: 0%;
    margin-bottom: 50px;
}
ul.wrapper_stylist li:nth-child(odd){
	margin-top: 0px;
}
ul.wrapper_stylist li:nth-child(3n){
	margin-right: 0;
    margin-bottom: 0px;
}
ul.wrapper_stylist li:nth-child(4n){
	margin-right: 0;
}
ul.wrapper_stylist li a{
	opacity: 1;
}
body.stylist #main .sect02 ul.wrapper_stylist li a.img{
	width: 100%;
	overflow: hidden;
	
}
body.stylist #main .sect02 ul.wrapper_stylist li a.img img{
	width: 100%;
	transition: all .6s ease;
}
body.stylist #main .sect02 ul.wrapper_stylist li a.img img:hover{
	z-index: 10;
	-webkit-filter: brightness(50%);
	filter:brightness(50%);  
	opacity: 1;
}
body.stylist #main .sect02 ul.wrapper_stylist li a.txt{
	text-align: center;
	 background:url(/img/upload/2018/07/toppage.jpg);
    width: 70%;
    position: absolute;
    bottom: 0;
    left: 5%;
    padding: 5% 10%;
    margin-bottom: -25px;
	z-index: 10;
}
body.stylist #main .sect02 ul.wrapper_stylist li a.txt h3{
	margin: 0 0 3px;
    font-size: 1.6rem;
    color: #fff;
    border-bottom: solid 1px;
}
body.stylist #main .sect02 ul.wrapper_stylist li a.txt p{
	color: #fff;
    margin-bottom: 0;
	font-size: 1.0rem;
}
@media only screen and (max-width: 768px){
	ul.wrapper_stylist li{
		width: 49.5%;
	}

	ul.wrapper_stylist li:nth-child(2n){
		margin-right: 0;
	}	
}
@media only screen and (max-width: 425px){
	body.stylist #main .sect02 ul.wrapper_stylist li a.txt h3{
		font-size: 14px;
	}
	body.stylist #main .sect02 ul.wrapper_stylist li a.txt p{
		font-size: 10px;
	}
}


/*=============================================================*/


/*=====================　スタイルカテゴリ　========================*/

/* 下記をstyle一覧・詳細ページcontets前に貼り付け
    <div id="sub-style">
        {object.sidebar-style-length}
    </div><!-- /#sub -->
*/


#sub-style{
	margin: 100px auto -30px;
    width: 100%;
	max-width: 1200px;
}

body.style #sub-style .subBox{
	margin-bottom: 0;
}
body.style #sub-style .subBox .titleArea{
	width: 20%;
	display: inline-block;
	margin: 0;
	vertical-align: middle;
	border-bottom:none;
	font-weight: bold;
}
#sub-style .subBox .titleArea p{
    font-family: 'Crimson Text', serif;
    margin: 0;
    color: #666;
    font-weight: normal;
    letter-spacing: 0.1em;
}
#sub-style .subBox .titleArea p span.en{
	font-size: 2.2rem;
    letter-spacing: .11em;
}
#sub-style .subBox .titleArea p span.jp{
    margin-left: .4em;
    font-size: 1.3rem;
	display: none;
}


body.style #sub-style #subCategory{
	position: relative;
	top:0;
	left: 10%;
	width: 80%;
	max-width: 1200px;
    border: dotted 1px;
	border-left: 25px solid rgb(215, 215, 215);
    border-right: 25px solid rgb(215, 215, 215);
    box-sizing: border-box;
	font-weight: bold;
    background: #fff;
    padding: 20px 2%;
	z-index: 5;
}
body.style #sub-style #subCategory ul{
	padding: 0;
    display: inline-block;
    width: 78%;
	vertical-align: middle;
	margin: 0;
	text-align: center;
}
body.style #sub-style #subCategory ul li{
    text-align: left;
    display: inline-block;
    margin-right: 2%;
}
body.style #sub-style #subCategory ul li a{
	margin: 0;
	display: block;
    color: #666;
    font-size: 1.4rem;
}
@media only screen and (max-width: 768px){
	body.style #sub-style .subBox .titleArea{
		width: 100%;
		margin-bottom: 15px;
		text-align: center;
		display: block;
	}
	body.style #sub-style #subCategory{
		width: 98%;
		left: 1%;
		border-left: solid 5px rgb(215, 215, 215);
		border-right: solid 5px rgb(215, 215, 215);
	}
	body.style #sub-style #subCategory ul{
		display: block;
		width: 100%;
	}
	body.style #sub-style #subCategory ul li{
		line-height: 30px;
	}
	#sub-style{
	    margin: 0px auto;
	}
}


/*
*/

/*=============================================================*/
/*=====================　style　一覧　========================*/
/* <ul class="wrapper clearfix">の前に下記追加

            <ul class="wrapper_top clearfix">
                [hair num="1" page="{get.p}" staff="{get.s}" length="{get.l}" pager="style"]
                <li>
                    <a class="img" href="{url(style/{hair.id})}"><img src="{hair.img1_src(l)}" alt="{hair.name}"></a>
                    <a class="txt" href="{url(style/{hair.id})}">
                        <h3>{hair.name}</h3>
                        <p>{hair.comment(200)}</p>
						<p class="staff_name">{hair.staff.name}</p>
                    </a>
                </li>
                [/hair]
            </ul>

*/

body.style .sect02{
    position: relative;
	top: 0;
	padding: 0 0 5%;
}
body.style #main .sect02 ul.wrapper{
    margin: 0;
}
body.style #main .sect02 ul.wrapper li{
    margin: 0px 0 0 0;
    width: 25%;
    height: auto;
    position: relative;
}

body.style #main .sect02 ul.wrapper li:nth-child(4n){
	margin: 0px 0 0 0;
}
body.style #main .sect02 ul.wrapper li:nth-child(3n+2){
	margin: 0px 0 0 0;
}


body.style #main .sect02 ul.clearfix li a.img{
	width: 100%;
    margin: 0;
}
body.style #main .sect02 ul.clearfix li a.img:hover{
    z-index: 10;
    opacity: 1;
	-webkit-filter: brightness(50%);
  	filter:brightness(50%); 
}



body.style #main .sect02 ul.clearfix li a.txt{
    position: absolute;
    top: auto;
	bottom: 0;
    left: 0;
    width: 100%;
	z-index: 10;
}
body.style #main .sect02 ul.clearfix li a.txt h3{
	margin: 0;
    color: #fff;
    font-weight: normal;
    letter-spacing: 1px;
    line-height: 1.8;
	font-size: 12px;
    background:none;
    padding: 5%;
	width: 90%;
}



.wrapper_top{
	max-width: 850px;
    margin: 0 auto;
}
body.style #main .sect02 ul.wrapper_top li{
    margin: 0;
    width: 100%;
    height: auto;
    position: relative;

}
body.style #main .sect02 ul.wrapper_top li a.img img{
	max-width: 400px;
	width: 100%;
}
body.style #main .sect02 ul.wrapper_top li a.txt{
	bottom: auto;
    top: 20%;
	width: 50%;
	
}
body.style #main .sect02 ul.wrapper_top li a.txt h3{
	font-size: 30px;
}
body.style #main .sect02 ul.wrapper_top li a.txt p{
	color: #eee;
	font-size: 18px;
	margin: 20px 0 0;
}
body.style #main .sect02 ul.wrapper_top li a.txt p.staff_name{
	color: #eee;
	background: #666;
	border-radius: 20px;
	padding: 5px 0;
    text-align: center;
    width: 50%;
	float: right;
}
@media only screen and (max-width: 768px){
	body.style .sect02{
		padding: 0;
	}
	body.style #main .sect02 ul.wrapper{
		margin: 10px 0;
	}
	body.style #main .sect02 ul.wrapper li{
		width: 50%;
		margin: 0;
	}
	body.style #main .sect02 ul.wrapper li:nth-child(3n+2){
		margin: 0;
	}
	body.style #main .sect02 ul.wrapper li:nth-child(5){
		margin: 0;
	}
	body.style #main .sect02 ul.wrapper_top li a.txt h3{
		font-size: 14px;
		line-height: 20px;
		letter-spacing: 1px;
		text-align: center;
	}
	body.style #main .sect02 ul.wrapper_top li a.img img{
		width: 45%;
	}
	body.style #main .sect02 ul.wrapper_top li a.txt p{
		display: none;
	}
	body.style #main .sect02 ul.clearfix li a.txt{
		display: none;
	}
	body.style #main .sect02 ul.clearfix li a.img{
		width: 100%;
	}
	body.style #main .sect02 ul.wrapper_top li a.txt{
		display: block;
	}
	
}


/*=============================================================*/
/*=====================　スタイル詳細　========================*/
/*
スタイル詳細ページの一番上を下記に書き換え（style_detailsを追加）

{object.header bodyclass="style lower style_details"}

*/
body.style #content{
	position: relative;
	z-index: 1;
}
body.style #content #main{
	padding: 2%;
}


body.style #main .styleBox .visualInfo{
	width: 57%;
}

body.style #main .styleBox .visualInfo .photo{
	width: 100%;
    padding-top: 50px;
}

body.style #main .styleBox .txtInfo{
	width: 40%;
}
body.style #main .styleBox .txtInfo h2{
    font-size: 20px;
    position: relative;
    left: -20%;
    top: 0;
    background:url(/img/upload/2018/07/toppage.jpg);
    padding: 20px;
    box-sizing: border-box;
    width: 120%;
	color: #ffffff;
}
body.style #main .styleBox .txtInfo .box{
    padding: 0;
    color: #333;
}
body.style #main .styleBox .txtInfo .box p.styleTitle{
	padding: 10px;
    font-weight: bold;
    text-align: center;
    border-bottom: solid 5px #d7d7d7;
	
}
body.style #main .styleBox .txtInfo .box ul.clearfix{
	text-align: center;
}
.style-arrenge-point-title{
	border-bottom: solid 5px #d7d7d7;
    font-weight: bold;
    text-align: center;
}
body.stylist #main .stylistBox .txtInfo .career dl, body.style #main .styleBox .txtInfo .box dl{
	width: 100%;
    border-bottom: dotted 1px #d7d7d7;
}
.typeOn{
    background-color: rgba(175, 157, 124, 0.8);
}

body.style #main .commentArea{
	background-color: #fff;
    width: 48%;
	padding: 3%;
    border-radius: 10px;
	position: relative;
	margin: 5% auto;
}

body.style #main .commentArea .img{
	width: 100%;
}
body.style #main .commentArea .img a{
	font-size: 1.8rem;
	color: #fff;
    font-weight: bold;
    padding: 3%;
	 background:url(/img/upload/2018/07/toppage.jpg);
    position: absolute;
    left: 3%;
    top: -10px;
    width: 150px;
	max-width: 1200px;
}

body.style #main .commentArea .img a:hover{
	color: #fff;
    font-size: 1.8rem;
	background: #000;
}

body.style #main .commentArea .txt{
    width: 100%;
    margin: 15px 0 0 5%;
}
body.style #main .styleBox .txtInfo .box dl dt{
	width: 28%;
}
body.style #main .styleBox .txtInfo .box dl dd{
    width: 72%;
}

body.style #main .sect02 .titleArea{
	border-bottom:solid 1px #333;
	clear: both;
}
body.style #main .sect02 .titleArea h3{
    padding: 10px 0 5px 10px;
}
body.style #main .sect02 .titleArea a{
	text-decoration: none;
}





/* styleページ 担当スタイル*/
/*
下記★部分を<h4>{coupon.target.name}</h4>から<p>に変更

        [coupon id="{hair.coupon.id}" empty="true"]
        <section class="couponArea">
            <p class="coupon_target">{coupon.target.name}</p>★
 

*/

body.stylist_details #content #main,
body.style_details #content #main{
    background: rgba(243, 243, 243, 0.5);
	width: 96%;
    padding: 2%;
}
body.style_details #main .sect02 ul.wrapper{
    margin: 0;
    padding: 0;
}
body.style_details #main .sect02 ul.wrapper li{
	margin: 0;
    width: 33%;
    float: none;
    display: inline-block;
	position: relative;
	vertical-align: top;
}
body.style_details #main .sect02 ul.wrapper li:nth-child(3n+2){
    margin: 0;
}

body.style_details #main .sect02 ul.wrapper li a.img{
    margin: 0;
}
body.style_details #main .sect02 ul.wrapper li a.img:hover{
	opacity: 1;
	-webkit-filter: brightness(50%);
  	filter:brightness(50%);  
}
body.style_details #main .sect02 ul.wrapper li a.txt h3{
	position: absolute;
    bottom: 0;
    left: 0;
    color: #fff;
	margin: 0 10px;
}
body.style_details #main .sect02 ul.wrapper li a.txt p{
	display: none;
}
body.style #main .styleBox .txtInfo .box ul li{
	margin-right: 5px;
	margin-bottom: 5px;
}
@media only screen and (max-width: 1024px){
	body.style #content #main section.sect.styleBox{
		margin-top: 0;
	}
	body.style #main .styleBox{
		table-layout:fixed;
	}
	body.style #main .styleBox .txtInfo h2{
		width: 100%;
		top:0;
		left: 0;
		position: relative;
		margin-bottom: 10px;
    	padding: 20px;
	}
	body.style #main .commentArea{
		width: 94%;
	}
	body.style #main .commentArea .img{
		width: 45%;
		display: inline-block;
	}
	body.style #main .commentArea .img a{
		text-decoration: none;
	}
	body.style #main .commentArea .img img{
		width: 100%;
		float: none;
	}
	body.style #main .commentArea .txt{
		width: 50%;
		display: inline-block;
		vertical-align: middle;
		margin: 15px 0 0 2%;
	}
	body.style #main .styleBox .txtInfo .box .recommend ul.clearfix{
		margin-bottom: 0;
	}
	body.style #main .sect02 .titleArea{
		padding-bottom: 0;
	}
	body.style #main .styleBox .txtInfo ul.sns{
		padding: 0 5%;
	}
	body.style #main .styleBox .visualInfo .photo{
		padding-top: 0;
	}
}


@media only screen and (max-width: 425px){
	body.style #main .styleBox .txtInfo h2{
    	padding: 20px 5%;
	}
	body.style #main .commentArea .txt h4{
		margin-top: 40px;
	}
}
@media only screen and (max-width: 425px){
	body.style #main .sect02 .titleArea h3{
	    padding: 0px 0 5px 10px;
	}
	body.style #main .sect02 .titleArea h3 span.en{
		display: block;
	}
	body.style #main .sect02 .titleArea h3 span.jp{
		margin: 0;
	}	
}


/*　style　クーポン*/
body.style #main .couponArea{
    background: #fff;
	width: 100%;
    border-radius: 10px;
	color: #666;
	display: block;
	clear: both;
}
body.style #main .couponArea p.coupon_target{
    width: 100%;
	background: #333;
    text-align: center;
    padding: 1%;
    border-radius: 10px 10px 0 0;
	box-sizing: border-box;
	color: #fff;
	font-size: 14px;
    margin: 0 auto;
}
body.style #main .couponArea .couponContent{
	padding: 15px;
    width: 100%;
    box-sizing: border-box;
}
body.style #main .couponArea .couponContent .txt{
    width: 100%;
	margin-left: 2%;
}
body.style #main .couponArea .couponContent .img{
	width: 36%;
	display: inline-block;
}
body.style #main .couponArea .couponContent .img img{
	width: 100%;
}
body.style #main .couponArea .couponContent .txt h5{
    font-size: 16px;
    line-height: 24px;
}
body.style #main .couponArea .couponContent .txt p.price{
    font-size: 2.5rem;
	
}
body.style #main .couponArea .couponContent .txt p.couponDetail{
	border-top: dotted 1px;
    padding-top: 10px
}
body.style #main .couponArea .couponContent .txt ul li{
	margin-bottom: 3px;
	background-color: #c5b790;
}
body.style #main .couponArea .couponContent .txt a{
    color: #333;
	background: #f3f3f3;
	font-size: 14px;
}
body.style #main .couponArea .couponContent .txt a:hover{
	color: #fff;
	background: #bb1668;
	opacity: 1;
}

@media only screen and (max-width: 1024px){
	body.style #main .couponArea .couponContent{
	    display: flex;
	}
	body.style #main .couponArea .couponContent .img{
		position: relative;
	}
	body.style #main .couponArea .couponContent .img img{
		display: block;
		margin: 0 auto 10px;
	}

	body.style #main .couponArea .couponContent .img p{
		line-height: 12px;
		margin-left: 0;
	}
	body.style #main .couponArea .couponContent .txt{
		padding: 0;
	}
}

@media only screen and (max-width: 425px){
	body.style #main .couponArea .couponContent{
	    flex-wrap: wrap;
	}
	body.style #main .couponArea .couponContent .img{
		width: 100%;
	}
	body.style #main .couponArea .couponContent .txt{
		width: 100%;
		margin: 0 auto;
	}
	body.style #main .couponArea .couponContent .img p{
		line-height: 5px;
	}
}
@media only screen and (min-width: 769px){
	body.style #main .couponArea .couponContent .img{
		max-width: 200px;
	}
}

/*　style　クーポンここまで*/



/*=============================================================*/
/*=====================　coupon　========================*/

/*★の前後に　<div class="coupon_show"></div>　を記入

<div class="coupon_show">
　<p><span>提示条件:</span>{coupon.show.name}</p>★
・
・
・
　<p><span>利用条件:</span>{coupon.use}</p>★
</div>

*/

.coupon form{
	background: rgba(243, 243, 243, 0.5);
    padding: 2%;
    max-width: 1200px;
	margin: 0px auto 30px;
    border-radius: 10px;
}

body.coupon #main section.sect01 .titleArea{
	width: 100%;
    margin: 0 auto 20px;
    border-bottom: solid 5px #d7d7d7;
}
body.coupon #main section.sect01 .filterArea{
	background: none;
	width: 80%;
	padding: 0;
}
body.coupon #main section.sect01 .filterArea dl{
    width: 100%;
}
body.coupon #main section.sect01 .filterArea dl dd{
	padding: 0;
    margin: 0 5%;
    width: 90%;
	border-radius: 10px;
}
body.coupon #main section.sect01 .filterArea .btn button{
	border: solid 1px;
    color: #fff;
	background:url(/img/upload/2018/07/toppage.jpg);
}
body.coupon #main section.sect01 .filterArea .btn button:hover{
	color: #fff;
	background: #333;
    opacity: 1;
}
body.coupon #main section.sect01 .filterArea dl dd ul li{
	margin-bottom: 5px;
}


body.coupon #main .result .couponArea{
    background: rgba(255, 255, 255, 0.5);
	width: 47.5%;
    display: inline-block;
    margin: 0 1% 2%;
    vertical-align: top;
    border-radius: 10px;
	color: #666;
}

body.coupon #main .result .couponArea h4{
	width: 100%;
	text-align: center;
	padding: 5px 0;
	background: #333;
	border-radius: 10px 10px 0 0;
	margin-bottom: 0;
}

body.coupon #main .result .couponArea .couponContent{
	padding: 5%;
    width: 90%;
}
body.coupon #main .result .couponArea .couponContent .txt{
    width: 60%;
	
}
body.coupon #main .result .couponArea .couponContent .img{
	width: 37%;
}
body.coupon #main .result .couponArea .couponContent .img img{
	width: 100%;
}
body.coupon #main .result .couponArea .couponContent .img p{
    line-height: 18px;
	margin: 0;
}
body.coupon #main .result .couponArea .couponContent .txt h5{
    font-size: 16px;
    line-height: 24px;
}
body.coupon #main .result .couponArea .couponContent .txt p.price{
    font-size: 2.5rem;
	
}
body.coupon #main .result .couponArea .couponContent .txt p.couponDetail{
	border-top: solid 1px #f3f3f3;
    padding-top: 10px
}

body.coupon #main .result .couponArea .couponContent .txt a{
	border: none;
    color: #333;
	background: #f3f3f3;
	font-size: 14px;
}
body.coupon #main .result .couponArea .couponContent .txt a:hover{
	color: #fff;
	background: #bb1668;
    opacity: 1;
}
body.coupon #main .result .couponArea .couponContent .txt ul li{
	margin-bottom: 3px;
	background-color:rgba(175, 157, 124, 0.8);
}
@media only screen and (max-width: 1024px){
	body.coupon #main .result .couponArea .couponContent .img{
		width: 100%;
	}
	body.coupon #main .result .couponArea .couponContent .img img{
	    margin-bottom: 10px;
	}
	body.coupon #main .result .couponArea .couponContent .txt{
		width: 100%;
	}
	body.coupon #main .result .couponArea .couponContent .txt h5{
    	margin: 20px auto 15px;
	}
}
@media only screen and (max-width: 520px){
	body.coupon #main .result .couponArea{
		width: 98%;
    	display: block;
	}
	body.coupon #main .result .couponArea .couponContent{
	    padding: 5%;
	}
	body.coupon #main .result .couponArea .couponContent .img img{
		margin-bottom: 0px;
	    vertical-align: top;
	}
	.coupon_show{
		width: 80%;
	    display: inline-block;
		vertical-align: middle;
	}
	body.coupon #main .result .couponArea .couponContent .txt p.price{
		margin-bottom: 10px;
	}
}

/*=============================================================*/
/*================ menu html============================*/
/*
<section class="sect">の下に
[menu_config type="hair"]{menu_config.note1}[/menu_config]を下記置き換え

            <div class="menu_annotation"> 
                [menu_config type="hair"]{menu_config.note1}[/menu_config]
           </div>


/*メニューを★で囲む*/
/*
[menu_category type="hair"]
<div class="shop_menubox">★
・
・
・
</div><!-- /.shop_menubox -->★
[/menu_category]


*/

/*=====================================================*/
/*================ menu ============================*/

body.menu #main .sect{
	width: 100%;
}
body.menu .shop_menubox {
    display: inline-block;
    vertical-align: top;
    width: 96%;
    margin: 0 0 36px 0;
    background: rgba(243, 243, 243, 0.5);
    padding: 2%;
}
body.menu .shop_menubox:nth-child(odd){
	margin: 0 0 36px 0;
}
body.menu #main .sect .titleArea h3 {
    float: left;
    margin: -2% 0 0 -2%;
    padding: 16px;
    width: auto;
    color: #fff;
    font-weight: normal;
    background:url(/img/upload/2018/07/toppage.jpg);
    box-sizing: border-box;
}

body.menu #main .sect .titleArea {
    margin: 0 auto;
    border-bottom: none;
}
body.menu #main .sect table {
    width: 100%;
    max-width: 100%;
    margin-bottom: 0;
}
.menu_annotation {
    font-size: 14px;
    line-height: 25px;
    background: #F3F2E6;
    padding: 20px;
	margin-bottom: 50px;
}
@media only screen and (max-width: 1024px){
	body.menu .shop_menubox{
    	width: 96%;
	}
	body.menu #main .sect .table > tbody > tr > td:first-child{
		width: 80%;
		float: left;
		display: inline-block;
		text-align: left;
		padding: 25px 0;
	}
	body.menu #main .sect .table tr{
		margin-bottom: 0;
	}
	body.menu #main .sect .table td{
	    width: 20%;
    	display: inline-block;
		padding: 25px 0;
		float: right;
		text-align: right;
	}
	body.menu #main .sect .txtRight{
	    float: right;
    	text-align: left;
		width: 20%;
	}
}
@media only screen and (max-width: 500px){
	body.menu .shop_menubox{
	    display: block;
	}
}
/*=====================================================*/
/*=====================　news list　========================*/

/*=====================　news list　htmlに下記修正========================*/
/*
                <div class="txt">
                    <div class="wrapper">
                        <ul class="clearfix">
                            <li><a href="{url(informations?c={information.category.id})}">{information.category.name}</a></li>
                        </ul>
                    </div>
                    <h5><a href="{url(information/{information.id})}">{information.subject}</a></h5>
                    <a href="{url(information/{information.id})}"><p class="couponDetail">{information.body(85)}</p></a>
                    <span class="newsTime">{information.date(%Y.%o.%q)}</span>
                    <a href="{url(information/{information.id})}" class="more"><span>続きを読む</span></a>
                </div>
*/
/*=====================================================*/

body.news #content {
    position: relative;
}
body.news #content #main{
	padding: 2%;
}
body.news #main .couponArea{
	width: 100%;
}
body.news #main .couponArea .couponContent{
    padding: 1%;
    width: 31%;
    display: inline-block;

	vertical-align: top;
    transition: all .22s cubic-bezier(.25, .46, .45, .94);
	position: relative;
    background: rgba(255, 255, 255, 0.5);
	
}
body.news #main .couponArea .couponContent:hover{
    box-shadow: 12px 21px 36px 0 rgba(0,0,0,.15);
    -webkit-transform: translate3d(0, -15px, 1px);
    transform: translate3d(0, -15px, 1px);
	
}
body.news #main .couponArea .couponContent .img{
    width: 100%;
}
body.news #main .couponArea .couponContent .img:hover{
	
}
body.news #main .couponArea .couponContent .img img{
	width: 100%;
    height: auto;
	margin: 0;
}
body.news #main .couponArea .couponContent .img a:hover{
	opacity: 1;	
}
body.news #main .couponArea .couponContent .txt{
	width: 90%;
    padding: 5%;
}
body.news #main .newsTime{
    text-align: right;
}

body.news #main .couponArea .couponContent .txt .more:hover{
	opacity: 1;	
    animation-duration: 1s;
    animation-name: more_line_news_blog;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    clip-path: polygon(0% 0%, 80% 0%, 80% 100%, 0% 100%);
}
body.news #main .couponArea .couponContent .txt .more span:hover{
	background-color: #000;
    color: #fff;
    transition: all .7s;
	border: solid 1px #000;
}
body.news #main .couponArea .couponContent .txt h5{
	margin-bottom: 10px;
    padding: 0 0 10px;
    border-bottom: dotted 1px;

}

body.news #main .couponArea .couponContent .txt a:hover{
	opacity: 1;
}
@media only screen and (max-width: 1024px){
	body.news #main .couponArea .couponContent .txt .more{

	}
}
@media only screen and (max-width: 640px){
	body.news #main .couponArea .couponContent{
	    width: 48%;
	}
}


/*=============================================================*/
/*=====================　news　詳細　========================*/
body.news #main .sect{
	width: 96%;
    padding: 2%;
}
body.news #main .sect .titleArea{
    border: none;
    margin-top: -60px;
    color: #333;
    border-bottom: solid 1px;
}
body.news #main .sect .titleArea h3{
    color: #333;
    font-weight: bold;
    padding-bottom: 10px;
	padding-left: 10px;
}
body.news #main .sect .wrapper li{
	background:url(/img/upload/2018/07/toppage.jpg);
}

@media only screen and (max-width: 425px){
	body.news #main .sect .titleArea{
		margin-top: -30px;
	}	
}

/*=============================================================*/
/*=====================　blog list　========================*/
/* 下記★部分のクラス名に変更
            [blog num="10" query="{get.q}" category="{get.c}" staff="{get.s}" date="{get.d}" page="{get.p}" pager="blog"]
            <section class="couponArea_inner">★
                <div class="couponContent">
*/
/*======　blog list　txt以下を下記に変更======*/
/*
                <div class="txt">
                    <div class="wrapper">
                        <ul class="clearfix">
                            <li><a href="{url(blog?c={blog.category.id})}">{blog.category.name}</a></li>
                        </ul>
                    </div>
                    <h5><a href="{url(blog/{blog.id})}">{blog.subject}</a></h5>
                    <a href="{url(blog/{blog.id})}"><p class="couponDetail">{blog.body(85)}</p></a>
                    <span class="newsTime">{blog.date(%Y.%o.%q)}</span>
                    <a href="{url(blog/{blog.id})}" class="more"><span>more</span></a>
                </div>
*/

/*　htmlブログコンテンツ下に下記
</div><!-- /#content -->


<div id="sidebar">
        {object.sidebar-blog-staff}
        {object.sidebar-blog-archive}
        {object.sidebar-blog-store}
</div>

*/


body.blog #content {
    position: relative;
}
body.blog #content #main{
	padding: 2%;
}
body.blog #main .couponArea{
	width: 100%;
	position: relative;
}
body.blog #main .couponArea_inner{
    padding: 1%;
    width: 31%;
    display: inline-block;
	vertical-align: top;
    transition: all .22s cubic-bezier(.25, .46, .45, .94);
	position: relative;
	background: rgba(255, 255, 255, 0.5);
}
body.blog #main .couponArea_inner:hover{
    box-shadow: 12px 21px 36px 0 rgba(0,0,0,.15);
    -webkit-transform: translate3d(0, -15px, 1px);
    transform: translate3d(0, -15px, 1px);
}

body.blog #main .couponArea .couponContent{
	width: 100%;
    display: block;
}
body.blog #main .couponArea .couponContent .img{
    width: 100%;
}
body.blog #main .couponArea .couponContent .img:hover{
}
body.blog #main .couponArea .couponContent .img img{

	width: 100%;
    height: auto;
	margin: 0;
}
body.blog #main .couponArea .couponContent .img a{
	opacity: 1;
}
body.blog #main .couponArea .couponContent .txt{
	width: 90%;
    padding: 5%;
}
body.blog #main .couponArea .couponContent .txt ul{
	margin-top: 0;
}
body.blog #main .couponArea .couponContent .txt h5{
	margin-bottom: 10px;
    padding: 0 0 10px;
    border-bottom: dotted 1px;

}
body.blog #main .newsTime{
	text-align: right;
	padding-bottom: 30px;
}
body.blog #main .newsTime .postUser{
    color: rgba(175, 157, 124, 0.8);
}
p.newsTime01{
	position: absolute;
    top: 1%;
    font-size: 25px;
    right: 1%;
	background: rgba(255, 255, 255, 0.5);
    padding: 10px;
    margin: 0;
}
body.blog #main .couponArea .couponContent .txt .more,body.news #main .couponArea .couponContent .txt .more{
    text-align: left;
    text-decoration: none;
    margin: -65px auto 0;
	position: relative;
	top:0px;
    float: none;
    width: 170px;
    padding: 30px 0px 10px;
}
body.news #main .couponArea .couponContent .txt .more{
	margin: -33px auto 0;
}
body.blog #main .couponArea .couponContent .txt .more:hover{
	opacity: 1;
    animation-duration: 1s;
    animation-name: more_line_news_blog;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    clip-path: polygon(0% 0%, 80% 0%, 80% 100%, 0% 100%);
}

body.blog #main .couponArea .couponContent .txt .more span,body.news #main .couponArea .couponContent .txt .more span{
    background: none;
    width: 100px;
    text-align: center;
    border: solid 1px;
	position: relative;
    display: inline-block;
    padding: 10px;
    color: #000;
    text-decoration: none;
    outline: none;
    overflow: hidden;
    transition: all .5s;	
}

body.blog #main .couponArea .couponContent .txt .more span:hover{
	background-color: #000;
    color: #fff;
    transition: all .7s;
	border: solid 1px #000;
}
body.blog .more_line,body.news .more_line{
	left: 90px;
	top:46px;
}


@media only screen and (min-width: 1025px){
	body.blog #main .blogTime{
		text-align: right;
	}	
}
@media only screen and (max-width: 1024px){
	body.blog #main .couponArea .couponContent{
		margin-bottom: 0;
	}
	body.blog #main .couponArea .couponContent .txt .more{

	}
	body.blog .more_line,body.news .more_line{
		top: 25px;
    	left: 90px;	
	}
	body.blog #main .newsTime{
	    padding-bottom: 0px;
	}
	body.blog #main .couponArea .couponContent .txt .more,body.news #main .couponArea .couponContent .txt .more{
		padding-right: 35px;
	}
	body.blog #main .couponArea .couponContent .txt .more:hover{
		animation-duration: 1s;
		animation-name: more_line_news_blog;
		animation-timing-function: linear;
		animation-iteration-count: infinite;
		clip-path: polygon(0% 0%, 80% 0%, 80% 100%, 0% 100%);
	}
}
@keyframes more_line_news_blog{
	0% {
		clip-path: polygon(0% 0%, 80% 0%, 80% 100%, 0% 100%);
	}
	100% {
		clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
	}

}
@media only screen and (max-width: 640px){
	body.blog #main .couponArea_inner{
		width: 48%;
	}

}
@media only screen and (max-width: 425px){
	body.blog #main .couponArea .couponContent{
		margin-bottom: 0;
	}
	body.blog #main .couponArea .couponContent .txt h5{
		margin-bottom: 10px;
	}
	body.blog #main .couponArea .couponContent .txt .more span{
		width: 40px;
	}
	body.blog #main .couponArea .couponContent .txt .more span, body.news #main .couponArea .couponContent .txt .more span{
		width: 70px;
		margin-right: 35px;
	}
	body.blog .more_line, body.news .more_line{
		left: 72px;

		width: 53px;
	}

}

/*=============================================================*/
/*=====================　blog　詳細　========================*/
body.blog #main .sect{
	width: 96%;
    padding: 2%;
}
body.blog #main .sect .titleArea{
    border: none;
    margin-top: -60px;
    color: #333;
    border-bottom: solid 1px;
}
body.blog #main .sect .titleArea h3{
    color: #333;
    font-weight: bold;
    padding-bottom: 10px;
    padding-left: 10px;
}
body.blog #main .sect .wrapper li{
	background-color:rgba(175, 157, 124, 0.8);
}
/*=============================================================*/
/*=====================　gallery　========================*/
/*
 下記部分に置き換え　（class="gallery_menu"　を追加したもの）
<section class="sect sect02">から<div id="content">下に移動

    <div id="sub-style">
        <div id="subCategory" class="subBox">
            <div class="titleArea clearfix">
                <p>
                    <span class="en">MENU</span>
                    <span class="jp">メニュー</span>
                </p>
            </div>
            <ul>
                 [gallery_category]
                  <li><a href="{url(gallery?c={gallery_category.id})}" class="gallery_menu">/  {gallery_category.name}</a></li>
                 [/gallery_category]
            </ul>
       </div><!-- /#subCategory -->
    </div><!-- /#sub-style -->

*/
/*
もしくはサイドバーにカテゴリを作成
sidebar-gallery-category　を下記内容で作成

<div id="subCategory" class="subBox">
    <div class="titleArea clearfix">
        <p>
            <span class="en">Category</span>
            <span class="jp">カテゴリー</span>
        </p>
    </div>
    <ul>
        <li><a href="{url(gallery)}">すべて</a></li>
        [gallery_category]
        <li><a href="{url(gallery?c={gallery_category.id})}">{gallery_category.name}</a></li>
        [/gallery_category]
    </ul>
</div>

サイドバーに下記★部分を加えて完了

    <div id="sub">
        {object.sidebar-gallery-category}★
        {object.sidebar-style-new}
    </div><!-- /#sub -->

*/
/*
サイドバーにカテゴリー設置した場合、ギャラリーページ下記削除

[gallery_category]
<a href="{url(gallery?c={gallery_category.id})}">{gallery_category.name}</a>
[/gallery_category]

*/

/*

<p>{ref.gallery_category.name}</p>★
をsectionの部分の下にを移動

        <section class="sect sect02">
            <p>{ref.gallery_category.name}</p>★
            <ul class="wrapper">

*/
/*
画像サイズをLに変更
*/
body.gallery #main{
}
body.gallery #main h2{
	width: 100%;
	border-bottom: solid 5px #d7d7d7;
}
body.gallery #main a.gallery_menu{
    padding: 1%;
	color: #333;	
}
body.gallery #main a.gallery_menu:hover{
	background: #000;
	color: #fff;
	opacity: 1;
}
body.gallery #main .sect02 ul.wrapper a.lightbox-img{
    border: none;
	margin: 0;
}
body.gallery #main .sect02 ul.wrapper a:hover{
	opacity: 1;	
}
body.gallery #main .sect02 ul.wrapper{
	margin: 0 auto;
}
body.gallery #main .sect02 ul.wrapper li{
	margin: 0;
	width: 50%;
	-webkit-text-decoration-skip: objects;
    -webkit-transition: all .6s ease;
    -moz-transition: all .6s ease;
    -ms-transition: all .6s ease;
    -o-transition: all .6s ease;
    transition: all .6s ease;
}
body.gallery #main .sect02 ul.wrapper li:hover{
	 -webkit-filter: brightness(50%);
    filter: brightness(50%);
}

body.gallery #main .sect02 .titleArea{
	margin: 0 auto;
}
body.gallery #main p{
	margin: -2% auto 0px;
	color: #fff;
	font-size: 1.8rem;
	background:url(/img/upload/2018/07/toppage.jpg);
    padding: 3%;
}

body.gallery #main p.lightbox-title{
	display: none;
}
@media only screen and (max-width: 1024px){
	body.gallery #content{

	}

}
@media only screen and (max-width: 425px){
	body.gallery #content{

	}	
}


/*gallery メニュー*/
body.gallery #sub-style .subBox{
	margin-bottom: 0;
}
body.gallery #sub-style .subBox .titleArea{
	width: 20%;
	display: inline-block;
	margin: 0;
	vertical-align: middle;
	border-bottom:none;
	font-weight: bold;
}

body.gallery #sub-style #subCategory{
	position: relative;
	top:0;
	left: 10%;
	width: 80%;
	max-width: 1200px;
    border: dotted 1px;
	border-left: 25px solid rgb(215, 215, 215);
    border-right: 25px solid rgb(215, 215, 215);
    box-sizing: border-box;
	font-weight: bold;
    background: #fff;
    padding: 20px 2%;
	z-index: 5;
}
body.gallery #sub-style #subCategory ul{
	padding: 0;
    display: inline-block;
    width: 78%;
	vertical-align: middle;
	margin: 0;
	text-align: center;
}
body.gallery #sub-style #subCategory ul li{
    text-align: left;
    display: inline-block;
    margin-right: 2%;
}
body.gallery #sub-style #subCategory ul li a{
	margin: 0;
	display: block;
    color: #666;
    font-size: 1.4rem;
}
@media only screen and (max-width: 768px){
	body.gallery #sub-style .subBox .titleArea{
		width: 100%;
		margin-bottom: 15px;
		text-align: center;
		display: block;
	}
	body.gallery #sub-style #subCategory{
		width: 98%;
		left: 1%;
		border-left: solid 5px rgb(215, 215, 215);
		border-right: solid 5px rgb(215, 215, 215);
	}
	body.gallery #sub-style #subCategory ul{
		display: block;
		width: 100%;
	}
	body.gallery #sub-style #subCategory ul li{
		line-height: 30px;
	}
}
/*gallery メニューここまで*/


/*=============================================================*/
/*=====================　voice　========================*/
body.voice #content{

}

body.voice #content #main{

}

body.voice #main .voiceBox{
	width: 90%;
    border: solid 1px;
    padding: 5%;
	color: #666;
    background: rgba(255, 255, 255, 0.5);
}
body.voice #main .pickUp{
	border: solid 3px #FF5722;
}

body.voice #main .voiceBox .voiceInner{
	width: 100%;
    box-sizing: border-box;
    padding: 5%;
	margin-bottom: 0;
	background: #f3f3f3;
}
body.voice #main .voiceBox .voiceInner p{
    margin: 0 0 20px;
}
body.voice #main .voiceBox .voiceInner p.voicemenu {
    border-bottom: dotted 1px;
    padding-bottom: 10px;
    margin-bottom: 10px;
}
.voiceInner a{
    background: #666;
    padding: 1px 15px;
    color: #fff;
    border-radius: 10px;
    text-decoration: none;
}
body.voice #main .voiceBox .voiceInner dl{
	font-size: 1.5rem;
}

body.voice #main .voiceBox .review, body.voice #main .voiceBox .reply{
	padding: 0 0 0 2%;
    display: inline-block;
    vertical-align: top;
}
body.voice #main .voiceBox .reply{
    padding: 30px 0 0 0;
	margin-bottom: 0;
}

body.voice #main .voiceBox .review h3, body.voice #main .voiceBox .reply h3{
	border-bottom: none;
    padding: 10px 0;
    width: 100%;
    text-align: center;
    border-bottom: dotted 1px;
	margin-bottom: 10px;
}
body.voice #main .voiceBox .reply p{
	width: 98%;
    padding: 0 1%;
}
body.voice #main .voiceBox .review .reviewInner{
	display: inline-block;
	width: 90%;
    padding: 0 5%;
}

@media only screen and (min-width: 1025px){
	body.voice #main .voiceBox .voiceInner{
		width: 75%;
	    display: inline-block;
	}
	body.voice #main .voiceBox .review{
	    width: 20%;
	}
}
@media only screen and (max-width: 1024px){
	body.voice #main .voiceBox .review{
		width: 100%;
		padding: 0;
	}
}
 
/*=============================================================*/
/*=====================　faq　========================*/

body.faq #content{
}
body.faq #content #main{
    background: rgba(243, 243, 243, 0.5);
	padding: 2%;
    width: 67%;
}
body.faq #sub{
    width: 26%;
}
body.faq #main .sect .titleArea{
    border-bottom: solid 1px;
    padding: 0;
}
body.faq #main .sect .titleArea h3{
	padding-bottom: 10px;
	padding-left: 10px;
    margin-bottom: 0;
}
body.faq #main .styleBox{
	margin: 0 auto;
}
div.accordion > ul > li > a{
	background:url(/img/upload/2018/07/toppage.jpg);
}

@media only screen and (max-width: 1024px){
	body.faq #content #main{
		width: 96%;
	}
	body.faq #sub{
		width: 100%;
	}
	#sub #subFaq ul li a{
		border-bottom: none;
	}
	
	body.voice #main .voiceBox .review dl{
		width: 100%;
	}
}
/*=============================================================*/
/*=====================　access　========================*/
body.access #main{
	margin-top: 0;
}
body.access #main section{
    margin: 0 auto;
    width: 100%;
	position: relative;
}

body.access #main .shopdate,body.top #main .shopdate{
	width: 56%;
    margin: 0 0 0 40%;
    display: inline-block;
    background:url(/img/upload/2018/07/toppage.jpg);
    padding: 2%;
    position: relative;
    top: -150px;
    right: 0;
    color: #fff;
}
body.access section .shopdate .titleArea{
	border-bottom: dotted 2px #fff;
}
body.access #main .shopdate a,body.top #main .shopdate a{
	color: #fff; 
}
body.access #main .shopdate h3,body.top #main .shopdate_h3 h3{
    color: #fff;
}
body.access #main .shopdate p,body.top #main .shopdate p{
	font-size: 1.4rem;
}
body.access #main .shopdate td{
	font-size: 1.4rem;
    vertical-align: top;
}
body.access #main .shopdate table,body.top #main .shopdate table{
    margin-bottom: 0px;
}
.shopImg{
    width: 99%;
	text-align: left;
}
@media only screen and (max-width: 1024px){
	.shopImg{
		width: 100%;
		max-width: 800px;
		margin: 0 auto;
	}
	body.access #main .shopdate,body.top #main .shopdate{
		position: relative;
		box-sizing: border-box;
		top:0;
		margin: -10px auto 10px;
		max-width: 800px;
		display: block;
	}
	body.access #main section .shopImg img,body.top #main section .shopImg img{
		margin: 0 auto 10px;
	}
}

/*=============================================================*/
/*=====================　topページ　========================*/

/*
moreボタンの中に★を追加
                <h2>
                    <span class="en">NEW HAIR STYLE</span>
                    <span class="jp">新着ヘアスタイル</span>
                </h2>
                <a href="{url(styles)}"><span>more</span>
                  <div class="more_line"></div>★
                  <div class="arrow"></div>★
                </a>

*/
/*
トップページblogの日付★のpに"top_blog"クラス名を追加
                    [blog num="6"]
                    <li>
                        <a class="img" href="{url(blog/{blog.id})}"><img src="{blog.img_src(l)}" alt="{blog.subject}"></a>
                        <a class="txt" href="{url(blog/{blog.id})}">
                            <h3>{blog.subject}</h3>
                            <p>{blog.body(50)}</p>
                            <p class="top_blog">{blog.date(%Y/%o)}</p>
                        </a>
                    </li>
                    [/blog]
*/

/*
メインビジュアルとコンテンツの間に下記追加
<p class="bg_deco">HAIR&EYE</p>
<h1>ヘア・アイラッシュサロン</h1>
*/
body.top h1{
	font-size: 12px;
	text-align: center;
	position: absolute;
	right: 3px;
	top: 60px;
	z-index: 50;

}

body.top #content{
	width: 100%;
}
body.top #main{
	width: 100%;
	padding: 0;
}
body.top section.sect{
	margin: 0 auto 100px;
}

body.top section.sect ul.wrapper li a.img{
	margin: 0;
}
body.top section.sect .titleArea{
	width: 90%;
	margin: 0 auto 50px;
	max-width: 1200px;
    width: 100%;
}
body.top section.sect .wrapper{
	width: 100%;
    margin: 0 auto;
	max-width: 1200px;
	position: relative;
}
body.top section.sect.sect02 ul.wrapper li{
    margin: 0 0 60px;
    width: 33.3%;
    transition: all .22s cubic-bezier(.25, .46, .45, .94);
	position: relative;
	background: rgba(255, 255, 255, 0.5);
}
body.top section.sect.sect02 ul.wrapper li:nth-child(5n){
	margin: 0 0 20px;
}
body.top section.sect.sect02 ul.wrapper li:hover{
    box-shadow: 12px 21px 36px 0 rgba(0,0,0,.15);
    -webkit-transform: translate3d(0, -15px, 1px);
    transform: translate3d(0, -15px, 1px);
}

#mainVisual{
    text-align: center;
	width: 100%;
	opacity: 0;
	margin: 10px auto 100px;
	z-index: -1;
	max-width: 900px;
	animation-duration: 2s;
	animation-name: polygons;
	animation-fill-mode: forwards;
}

@keyframes polygons {
  0% {
    opacity: 0;
    transform: translateY(100px);
	filter: blur(50px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
	filter: blur(0px);
  }	
}


.catch {
    position: absolute;
    top: 33%;
    left: 10%;
    z-index: 80;
	width: 150px;
}
body.top section.sect .titleArea h2{
	float: none;
	text-align: center;
	padding: 0 0 12px;
    width: 100%;
    margin: 0 auto;
}
body.top section.sect .titleArea{
	border: none;
}

/* more ボタン*/
/*ボタン専用のcssに移動*/
/* more ボタン　ここまで*/

body.top section.sect.sect01 ul.wrapper li{
	width: 25%;
    margin: 0 0 0px 0;
	-webkit-text-decoration-skip: objects;
    -webkit-transition: all .6s ease;
    -moz-transition: all .6s ease;
    -ms-transition: all .6s ease;
    -o-transition: all .6s ease;
    transition: all .6s ease;
}
body.top section.sect.sect01 ul.wrapper li:nth-child(odd){
	margin-top: 0px;
}
body.top section.sect.sect01 ul.wrapper li:nth-child(3n){
	margin-top: 0px;
}
body.top section.sect.sect01 ul.wrapper li:nth-child(5){
	margin-top: px;
}
body.top section.sect.sect01 ul.wrapper li:nth-child(6){
	margin-top: 0px;
}
body.top section.sect.sect01 ul.wrapper li:nth-child(7){
	margin-top: 0px;
}
body.top section.sect.sect01 ul.wrapper li:nth-child(8){
	margin-top: 0px;
}

body.top section.sect.sect01 ul.wrapper li:hover{
    -webkit-filter: brightness(50%);
    filter: brightness(50%);
}
body.top #main section.sect ul.wrapper li a.txt h3{
    color: #000;
	margin: 3%;
}
body.top #main section.sect ul.wrapper li a.txt p{
	margin: 3%;
    text-align: right;
}
body.top #main section.sect ul.wrapper li a.img{
	margin: 0;
}
body.top #main section.sect ul.wrapper li a.img:hover{
	opacity: 1;
}
body.top #topFooterContent{
    background: rgba(247, 242, 224, 0.76);
    padding: 50px 0;
}

/* new hair style */
.colListItem{
	position: relative;
	overflow: hidden;
}
.arrowPar{
	position: relative;
	box-sizing: border-box;
	overflow: hidden;
	height: auto;
	margin: 0 auto;
}
.colListItem_anchor:hover img{
	-webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1);
}
.colListItem img {
    width: 100%;
    height: auto;
}
.trs-tfCb {
    -webkit-transition-timing-function: cubic-bezier(0, .96, .4, .99);
    -moz-transition-timing-function: cubic-bezier(0, .96, .4, .99);
    -ms-transition-timing-function: cubic-bezier(0, .96, .4, .99);
    -o-transition-timing-function: cubic-bezier(0, .96, .4, .99);
    transition-timing-function: cubic-bezier(0, .96, .4, .99);
}
.trs-dr12 {
    -webkit-transition-duration: 1.2s;
    -moz-transition-duration: 1.2s;
    -ms-transition-duration: 1.2s;
    -o-transition-duration: 1.2s;
    transition-duration: 1.2s;
}
.trs {
    -webkit-transition: all .1s ease;
    -moz-transition: all .1s ease;
    -ms-transition: all .1s ease;
    -o-transition: all .1s ease;
    transition: all .1s ease;
}


.colListItem_anchor:hover .colListItem_overlay, .colListItem_anchor:hover .colListItem_content, .colListItem_anchor:hover .colListItem_detail {
    opacity: 100;
    filter: alpha(opacity=100);
}
.colListItem_overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,.5);
}
	
.colListItem_overlay, .colListItem_content, .colListItem_detail {
    opacity: 0;
    filter: alpha(opacity=0);
}
	
.colListItem_lineWrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 80%;
    height: 87%;
    padding: 10%;
}	
.colListItem_lineWrapInner {
    position: relative;
    width: 100%;
    height: 100%;
}
	
.colListItem_anchor:hover .colListItem_line-t, .colListItem_anchor:hover .colListItem_line-b {
    width: 100%;
}
	
.colListItem_line-t {
    top: 0;
    left: 0;
    height: 1px;
}
	
.colListItem_line-t, .colListItem_line-b {
    width: 0;
}
.colListItem_line {
    position: absolute;
    background-color: #fff;
}
.trs-dr03 {
    -webkit-transition-duration: .3s;
    -moz-transition-duration: .3s;
    -ms-transition-duration: .3s;
    -o-transition-duration: .3s;
    transition-duration: .3s;
}	
.colListItem_anchor:hover .colListItem_line-r, .colListItem_anchor:hover .colListItem_line-l {
    height: 100%;
}
	
.colListItem_line-r {
    top: 0;
    right: 0;
    width: 1px;
}
	
.colListItem_line-r, .colListItem_line-l {
    height: 0;
}

.colListItem_line-b {
    right: 0;
    bottom: 0;
    height: 1px;
}
	
.colListItem_line-l {
    bottom: 0;
    left: 0;
    width: 1px;
}
	
.colListItem_content {
    font-size: 14px;
    font-size: 1.4rem;
    position: absolute;
    top: 20px;
    bottom: 0;
    left: 0;
    display: table-cell;
    width: 100%;
    height: 18px;
    margin: auto;
    text-align: center;
    vertical-align: middle;
    color: #fff;
}

.colListItem_anchor:hover .colListItem_content {
    top: -5px;
}
/* topページmedia ここから*/
body.top #main section.sect ul.wrapper li a.txt p.top_media{
	position: absolute;
    top:0px;
    font-size: 16px;
    right: 0px;
	padding: 2%;
    background:url(/img/upload/2018/07/toppage.jpg);
	color: #fff;
    line-height: 23px;
	margin: 0;
}
/* topページmedia ここまで*/

/* topページblog ここから*/
body.top #main section.sect ul.wrapper li a.txt p.top_blog{
	position: absolute;
    top: 0;
    font-size: 25px;
    right: 0px;
	background: rgba(255, 255, 255, 0.5);
	padding: 10px;
    margin: 0;
}
/* topページblog ここまで*/

/* topページshopdata ここから*/
/*
★部分を変更（shopdate_h3追加）
            <div class="shopdate">
                <div class="titleArea clearfix shopdate_h3">★
                    <h3>
                        <span class="en">SHOP DATE</span>
                        <span class="jp">店舗情報</span>
                    </h3>
                </div>
*/

body.top #main .shopdate{

}
body.top #main .shopdate_h3 span.en{
	padding: 0 0 0.5rem;
    font-size: 2.4rem;
    letter-spacing: .11em;
}
body.top #main .shopdate_h3 span.jp {
    margin-left: 1em;
    font-size: 1.4rem;
    letter-spacing: .11em;
}
body.top #main .shopdate_h3 {
    font-size: 2.4rem;
    font-weight: normal;
    margin-bottom: 20px;
	border-bottom:dotted 2px #fff;
}
body.top #main .shopdate_h3 h3{
    margin-bottom: 10px;
	font-weight: normal;
}
body.top #main .shopdate p {
    font-size: 1.4rem;
    line-height: 1.6;
    overflow: auto;
}
body.top #main .shopdate a{
	text-decoration: none;
}
body.top #main .shopdate table{
	table-layout: fixed;
	width: 100%;
}
body.top #main .shopdate td {
    padding: 10px 40px 0 0;
    font-size: 1.4rem;
    line-height: 1.6;
    width: 60px;
	vertical-align: top;
}
body.top #main .shopdate td strong{
	
}
body.top #main .shopdate td:nth-child(2n){
	padding-right: 0;
    width: 100%;
}
body.top .shopImg img{
	margin: 0 auto 60px;
    width: auto;
}
.shopdate_h3{
	border-bottom: dotted 1px #fff;
    margin: 0 auto 20px;
}
/* topページshopdata ここまで*/


@media only screen and (max-width: 1024px){
	body.top h1{
	    top: 213px;
    	right: 67px;
	}
	#mainVisual{
		margin-bottom: 80px;
		margin-top: 205px;
		width: 100%;
   		overflow: hidden;
	}
	#mainVisual img{

	}
	body.top #main{
		padding: 0;
		width: 100%;
	}
	body.top #main section.sect{
		margin: 0 auto 80px;
	}

	body.top #main section.sect .titleArea{
		border: none;
		margin: 0 0 20px;
	    padding: 0;
	}
	body.top #main section.sect .titleArea h2{
		margin: 0 auto;
	}
	body.top #main section.sect .titleArea h2 span.en{
		font-size: 30px;
	}
	body.top #main section.sect .titleArea a{
		text-decoration: none;
		margin: 0 auto;

	}
	body.top #main section.sect .titleArea a span{
		padding-right: 0;
		background:none;
	    padding: 10px;
    	color: #000;
		width: 110px;
	}
	body.top #main section.sect .titleArea a span:hover{
		background:#000;
		color: #fff;
	}
	body.top #main section.sect .titleArea a:hover{
		opacity: 1;
	}
	body.top #main section.sect.sect02 ul.wrapper li{
		margin: 0 0 30px;
	    width: 50%;
		background: #fff;
	}
	body.top #main section.sect.sect02 ul.wrapper li:nth-child(3n+2){
		margin: 0 0 20px;
	}
	body.top #main section.sect.sect02 ul.wrapper li:nth-child(n + 5){
		display: none;
	}
	body.top #main section.sect.sect05 ul.wrapper li:nth-child(n + 3) {
		display: none;
	}
	.catch {
		top: 10%;
		left: 5%;
		width: 100px;
	}
	body.top #main section.sect.sect01 ul.wrapper li{
		margin: 0;
	    width: 33.3333333%;
	}
	body.top #main section.sect.sect01 ul.wrapper li:nth-child(3n+2){
		margin: 0;
	}
	body.top #main section.sect.sect01 ul.wrapper li:nth-child(n + 7){
		display: none;
	}
	body.top #main section.sect ul.wrapper li a.txt p.top_media{
	    font-size: 14px;
    	top: 0;
	}
	body.top #main section.sect ul.wrapper li a.txt p.top_blog{
		font-size: 25px;
		top:0px;
	}
	body.top section.sect .wrapper{
		width: 96%;
	}
	body.top #main .shopdate{
		width: 100%;
		display: block;
		margin: -10px auto 10px;

	}
	body.top .shopImg{
		text-align: center;
	}
	body.top #main section.sect .shopdate_h3{
		border-bottom:dotted 1px #fff;
		padding: 0;
	}

}
@media only screen and (max-width: 768px){
	#mainVisual{
	    margin-top: 125px;
		margin-bottom: 60px;
	}
	body.top #main section.sect{
		margin: 0 auto 60px;
	}
	body.top h1{
		top: 130px;
		right: 5px;
	}
}

@media only screen and (max-width: 425px){
	.catch {
		top: 8%;
		width: 80px;
	}
	body.top #main section.sect .titleArea a{
		width: 160px;
	}
	body.top #main section.sect ul.wrapper li a.txt p.top_blog{

	}
	body.top #main section.sect ul.wrapper li a.txt p.top_media{
		display: none;
	}
	#mainVisual{
		margin-top: 110px;
	}
	body.top h1{

	}
}
/*------top news sectionグループに入れたとき---------*/
body.top #main section.sect03{
	margin: 0 auto;
	background: rgba(247, 242, 224, 0.76);
	background: url(/img/upload/2018/06/news_toppage.jpg)center center;
	width: 100%;
    padding-top: 50px;
    padding-bottom: 50px;
}
.section_inner{
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
}

body.top section.sect03 .titleArea{
	display: inline-block;
	width: 38%;
	margin: 0 auto;
	max-width: 456px;
	vertical-align: middle;
}
body.top section.sect03 .titleArea h2{

}
body.top section.sect03 .titleArea a{
	
}
body.top section.sect03 .wrapper{
	width: 60%;
	margin: 0 auto;
	max-width: 740px;
	display: inline-block;
	vertical-align: middle;
}
body.top section.sect03 .wrapper ul{
	width: 100%;
}
body.top section.sect03 ul.wrapper li{
	width: 100%;
    border-bottom: solid 2px #eee;
}
body.top #main section.sect03 ul.wrapper li a.txt p{
	width: 15%;
    display: inline-block;
    text-align: left;
	margin: 2%;
}
body.top #main section.sect03 ul.wrapper li a.txt h3{
    display: inline-block;
	width: 76%;
	margin: 2%;
    vertical-align: top;
}

@media only screen and (max-width: 768px){
	body.top #main section.sect03 .titleArea{
	    display: block;
		width: 100%;
	}
	body.top section.sect03 .wrapper{
	    display: block;
		width: 90%;
	}
}

/*-------------------------------------*/
/*------top section にFacebook　グループに入れたとき---------*/
body.top section.sect04 .wrapper{
	text-align: center;
}
body.top #main section.sect04{
	background: #f3f3f3;
}
/*-------------------------------------*/
/*-------------------------------------*/
/*------top section に concept入れたとき---------*/
body.top section.sect07 .wrapper{
	background: rgba(255, 255, 255, 0.6);
    max-width: 800px;
	padding: 0;
	width: 84%;
}

body.top #main section.sect.sect07 ul.wrapper li{
	width: 100%;
	margin: 0 auto;
    text-align: center;
	border: solid rgba(175, 157, 124, 0.8);
}
body.top #main section.sect.sect07 ul.wrapper li:hover{
    filter: none;
}
body.top #main section.sect07 ul.wrapper li a.txt{
	display: block;
	padding: 30px;
}
body.top #main section.sect07 ul.wrapper li a.txt h3{
	font-size: 20px;
    margin: 0 0 10px;
}
body.top #main section.sect07 ul.wrapper li a.txt p{
	text-align: center;
	border-top: dotted 1px;
    padding-top: 10px;
    line-height: 24px;
    font-size: 14px;
    margin: 0;
}
body.top section.sect07 .titleArea{
	margin: 0 auto;
}
@media only screen and (max-width: 1024px){

}
@media only screen and (max-width: 425px){
	body.top #main section.sect07 ul.wrapper li a.txt{
		padding: 20px;
	}
	body.top #main section.sect07 ul.wrapper li a.txt h3{
		font-size: 16px;
	}
}
/*
/*-------------------------------------*/
/*=============================================================*/
/*=====================　company　recruit concept ========================*/
.swiper-container{
	max-width: 800px;
}
body.company #main .sect,body.recruit #main .sect,body.concept #main .sect{
	text-align: center;
}
body.concept #main, body.company #main, body.recruit #main{
    margin: 0px auto 50px;
}
body.company #main .sect h2,body.recruit #main .sect h2,body.concept #main .sect h2{
	font-size: 22px;
	line-height: 37px
}
body.company #main .sect p,body.recruit #main .sect p,body.concept #main .sect p{
	font-size: 1.6rem;
    margin-bottom: 80px;
}
table.recruit > tbody > tr > td:nth-child(2), table.company > tbody > tr > td:nth-child(2){
	background: rgba(243, 243, 243, 0.5);
}


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

}
@media only screen and (max-width: 768px){
	body.company #main .sect p,body.recruit #main .sect p,body.concept #main .sect p{
		margin-bottom: 40px;
	}
}
@media only screen and (max-width: 425px){
	body.company #main .sect h2,body.recruit #main .sect h2,body.concept #main .sect h2{
		font-size: 18px;
		line-height: 30px;
	}
}
/*=============================================================*/
/*=====================　concept　========================*/
/*<h2>と<p>を<div>で囲む

           <div class="concept_box">
            <h2>{concept.subject}</h2>
            <p>
                {concept.body}
            </p>
           </div><!-- /.concept_box -->
*/
body.concept #content #main{
	position: relative;
}
.concept_box{
    background:url(/img/upload/2018/07/toppage.jpg);
    position: relative;
    top: 0%;
	padding: 5%;
	z-index: 10;
    width: 70%;
    margin: -100px 0 0 30%;
	box-shadow: 12px 21px 36px 0 rgba(0,0,0,.15);
}
body.concept #main .sect h2{
	color: #fff;
    border-bottom:dotted 2px;
    padding-bottom: 30px;
}
body.concept #main .sect p{
	margin-bottom: 0;
	color: #fff;
}
body.concept .swiper-container{
	margin-top: 0;
	max-width: 800px;
}

@media only screen and (max-width: 1024px){
	.concept_box{
		position:relative;
		top:0;
		width: 100%;
		max-width: 800px;
		padding-top: 50px;
	    padding-bottom: 50px;
		box-sizing: border-box;
		margin: -40px auto 0;

	}
	body.concept .swiper-container{
		margin-top: 0;
	}

}
/*=============================================================*/
/*=====================　more ボタン　========================*/

/* top more ボタン*/
body.top section.sect .titleArea a{
	text-decoration: none;
    float: none;
	position: relative;
	width: 170px;
	padding: 0;
	margin: 0 auto;
	animation-duration: 1s;
    animation-name: more_line;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    clip-path: polygon(0% 0%, 72% 0%, 72% 100%, 0% 100%);
}
body.top section.sect .titleArea a:hover{
	opacity: 1;
	
}
@keyframes more_line{
	0% {
		clip-path: polygon(0% 0%, 72% 0%, 72% 100%, 0% 100%);
	}
	100% {
		clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
	}

}

body.top section.sect .titleArea a span{
	background: none;
	width: 120px;
	text-align: center;
    margin: 0 auto;
    border: solid 1px;
    box-sizing: border-box;
	font-size: 13px;
}
body.top section.sect .titleArea a span:hover{
	background: #000;
	color: #fff;
}
body.top section.sect .titleArea a span {
  position: relative;
  display: inline-block;
  padding: 10px 0;
  color: #000;
  text-decoration: none;
  outline: none;
  overflow: hidden;
  transition: all .5s;
}
body.top section.sect .titleArea a span::before,
body.top section.sect .titleArea a span::after {
  position: absolute;
  display: block;
  content: '';
  transition: all .5s;
}
body.top section.sect .titleArea a span::before {
  top: 0;
  left: -1px;
  border-top: 1px solid #000;
  border-left: 1px solid #000;
}
body.top section.sect .titleArea a span::after {
  right: -1px;
  bottom: 0;
  border-right: 1px solid #000;
  border-bottom: 1px solid #000;
}
body.top section.sect .titleArea a span:hover {
  background-color: #000;
  color: #fff;
  transition: all .7s;
  padding: 10px;
}
body.top section.sect .titleArea a span:hover::before,
body.top section.sect .titleArea a span:hover::after {
  width: 0;
  height: 0;
  opacity: 0;
  transition: all .7s;
}



.more_line {
    width: 70px;
    height: 0px;
    transform: rotate(0deg);
	position: absolute;
	right: 0;
	top: 16px;
    border-bottom: dotted rgba(175, 157, 124, 0.8);
}
@media only screen and (max-width: 1024px){
	body.top section.sect .titleArea a{
		width: 160px;
	}
	body.top #main section.sect .titleArea a span{
	    padding: 6px 0;
	}
	.more_line{
		top: 13px;
	}
}

/* top more ボタン　ここまで*/


/* stylist more ボタン*/
body.stylist #main .stylistBox .txtInfo .blogArea .titleArea a,body.stylist #main .sect02 .titleArea a{
	padding: 0;
}

body.stylist .more_line{
    left: 60px;
    top: 18px;
}

/*moreボタン装飾①*/
body.stylist #main .stylistBox .txtInfo .blogArea .titleArea a {
    text-decoration: none;
    float: none;
    position: relative;
    width: 100px;
    margin: 0 auto;
    animation-duration: 1s;
    animation-name: more_line;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    clip-path: polygon(0% 0%, 72% 0%, 72% 100%, 0% 100%);
	text-align: left;
    margin-right: 0;
}

body.stylist #main .stylistBox .txtInfo .blogArea .titleArea a span:hover {
  background-color: #000;
  color: #fff;
	opacity: 1;
}



/*moreボタン装飾②*/
body.stylist #main .sect02 .titleArea a {
    text-decoration: none;
    float: none;
    position: relative;
    width: 100px;
    margin: 0 auto;
    animation-duration: 1s;
    animation-name: more_line;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    clip-path: polygon(0% 0%, 72% 0%, 72% 100%, 0% 100%);
	text-align: left;
    margin-right: 0;
	padding-top: 0;
}


body.stylist #main .sect02 .titleArea a span:hover {
  background-color: #000;
  color: #fff;
	opacity: 1;
}


/*moreボタン装飾ここまで*/


body.stylist #main .stylistBox .txtInfo .blogArea .titleArea a span,body.stylist #main .sect02 .titleArea a span{
	background: none;	
  position: relative;
  display: inline-block;
  padding: 10px 19px;
  color: #000;
  outline: none;
  transition: all .5s;
	border: solid 1px;
	margin-top: 0px;
    margin-bottom: 5px;
	
}
/* stylist more ボタン　ここまで*/

/* style more ボタン*/

body.style .more_line{
    left: 60px;
    top: 18px;
}

body.style #main .sect02 .titleArea a{	
    text-decoration: none;
    float: none;
    position: relative;
    width: 100px;
    margin: 0 auto;
    animation-duration: 1s;
    animation-name: more_line;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    clip-path: polygon(0% 0%, 72% 0%, 72% 100%, 0% 100%);
	text-align: left;
    margin-right: 0;
	padding-top: 0;
}
body.style #main .sect02 .titleArea a span{
	background: none;
    position: relative;
    display: inline-block;
    padding: 10px 19px;
    color: #000;
    outline: none;
    transition: all .5s;
    border: solid 1px;
	margin-top: 0px;
    margin-bottom: 5px;
}

body.style #main .sect02 .titleArea a span:hover {
  background-color: #000;
  color: #fff;
	opacity: 1;
}


/* style more ボタン　ここまで*/

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

}


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

}

/*=============================================================*/
/*=====================　sitemap　========================*/
body.sitemap #main .shopdate ul a{
	text-decoration: none;
}

/*=============================================================*/
/*=====================　movie　========================*/

body.movie #content #main{
	background: rgba(243, 243, 243, 0.5);	
}
/*=============================================================*/
/*=====================　media　========================*/
/*
★部分もともと<p>を削除し下記★に変更

                [media num="16" page="{get.p}" pager="media"]
                <li>
                    <a class="img" href="{url(media/{media.id})}"><img src="{media.img_src(m)}" alt="{media.subject}"></a>
                    <a class="txt" href="{url(media/{media.id})}">
                        <h3>{media.subject}</h3>
                        <p><span class="media-right">{media.publisher}</span></p>★
                        
                    </a>
                </li>
                [/media]

*/


body.media #main .sect02 ul.wrapper li{
	position: relative;
	margin: 0 0% 50px 0;
    position: relative;
    width: 25%;
}
body.media #main .sect02 ul.wrapper li:nth-child(5n){
	margin: 0 0% 50px 0;
}
body.media #main .sect02 ul.wrapper li:nth-child(4n){
	margin: 0 0 50px;
}
body.media #main .sect02 ul.wrapper li a:hover{
	opacity: 1;
}
body.media #main .sect02 ul.wrapper li a.txt h3{
    color: #fff;
    font-weight: normal;
    letter-spacing: 1px;
	margin: 0 0 3px;
    font-size: 1.6rem;
    border-bottom: solid 1px;	
}

body.media #main .sect02 ul.wrapper li a.img img{
	width: 100%;
    padding-top: 10px;
	transition: all .22s cubic-bezier(.25, .46, .45, .94);

}
body.media #main .sect02 ul.wrapper li a.img img:hover{
    z-index: 10;
    opacity: 1;
    box-shadow: 12px 21px 36px 0 rgba(0,0,0,.15);
    -webkit-transform: translate3d(0, -15px, 1px);
    transform: translate3d(0, -15px, 1px);

}
body.media #main .sect02 ul.wrapper li a.txt{
	text-align: center;
     background:url(/img/upload/2018/07/toppage.jpg);
    width: 70%;
    position: absolute;
    bottom: 0;
    left: 5%;
    padding: 5% 10%;
    margin-bottom: -25px;
	z-index: 10;
}
.media-right{
	color: #fff;
	text-align: center;
}
body.media #main .sect02 ul.wrapper li a.txt p{
	margin: 0;
}

@media only screen and (max-width: 1024px){
	body.media #main .sect02 ul.wrapper li{
		width: 49%;
		margin: 0 1% 50px 0;
	}
	body.media #main .sect02 ul.wrapper li:nth-child(even){
		margin-right: 0;
	}
	body.media #main .sect02 ul.wrapper li:nth-child(2n){
		margin: 0 1% 50px 0;
	}
	body.media #main .sect02 ul.wrapper li:nth-child(n + 5){
		display: none;
	}
}

/*=============================================================*/
/*=====================　contact　========================*/


body.contact #main .input .btn input#btnConfirm{
	background:url(/img/upload/2018/07/toppage.jpg);
}
body.contact #main .confirm .btn{
	margin: 0 auto;
}
body.contact #main .confirm .btn input#btnSend{
	background-color: rgba(175, 157, 124, 0.8);	
}
body.contact #main .btn input{
	display: inline-block;
}

@media only screen and (max-width: 1024px){
	body.contact #main .confirm .btn{
		width: 100%;
	}	
}

/*=============================================================*/
/*=====================　shoplist　========================*/
body.shoplist #main .sect02 .titleArea{
	border-bottom: solid 5px #f3f3f3;
	border: none;
	background:url(/img/upload/2018/07/toppage.jpg);
}
body.shoplist #main .sect02 .titleArea h3{
	color: #fff;
    font-weight: bold;
    padding: 3%;
}
body.shoplist #main .sect02 ul.wrapper li{
    transition: all .22s cubic-bezier(.25, .46, .45, .94);
	padding: 1%;
    width: 31%;
	margin: 0;
}
body.shoplist #main .sect02 ul.wrapper li:nth-child(4n){
	margin: 0;
}
body.shoplist #main .sect02 ul.wrapper li:hover{
	box-shadow: 12px 21px 36px 0 rgba(0,0,0,.15);
    -webkit-transform: translate3d(0, -15px, 1px);
    transform: translate3d(0, -15px, 1px);
}
body.shoplist #main .sect02 ul.wrapper li a:hover{
	opacity: 1;
}
body.shoplist #main .sect02 ul.wrapper li a.txt h3{
	color:  rgba(175, 157, 124, 0.8);
    font-size: 1.8rem;
}
body.shoplist #main .sect ul.wrapper li a.img{
    width: 100%;

}
body.shoplist #main .sect ul.wrapper li a.img:hover{	
}
@media only screen and (max-width: 640px){
body.shoplist #main .sect02 ul.wrapper li{
    width: 48%;
	}	
}
/*=============================================================*/
/*=====================　　========================*/
/*=============================================================*/
/*===================  2018/10/15　visit　=====================*/

.visit-Box2{
	margin: 120px 0 0;
	}

.visit-Box2 .concept_box{
	text-align: left;
	font-size: 14px;
	line-height: 18px;
	color: #FFF;
	}

.visit-Box2 .concept_box h3{
	margin: 24px auto;
	}

.visit-Box2in { margin-top: 60px; }


.visit-Box2 dl { font-size: 0; }
.visit-Box2 dt,
.visit-Box2 dd {
	display: inline-block;
	vertical-align: top;
	font-size: 14px;
	width: 50%;
	margin: 0 0 12px;
	}

.visit-Box2 dt span { display: block; font-size: 12px;}
.visit-Box2 dd { text-align: right; }

.visit-Box2 dl p {
	border: solid 1px #CCC;
	padding: 12px;
	box-sizing: border-box;
    font-size: 12px;
    margin-top: 12px;
	}

/*=============================================================*/
/*===================  2018/12/26「送迎・訪問美容」追加によるnavi修正　=====================*/
@media only screen and (max-width: 1265px) and (min-width: 1025px){
	.Nav > ul{
		max-width: 800px;
		margin-right: 0;
	}

}
/*=============================================================*/