/*==================================================================*/
/*================== font ======================================*/
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: 'Lora', serif;
    font-size: 33px;
	text-transform:uppercase;
	letter-spacing:0px;
	color: #981336;
}


body.lower #pageTitleArea h1 span{
	font-family: 'Lora', serif;
	letter-spacing:0px;
	text-transform:uppercase;
    color: #981336;
}


/*sub style カテゴリ*/footer #footerInner #footerNav ul li
#sub-style .subBox .titleA.Nav > ul > li area p span.en{
	font-family: 'Lora', serif;
	letter-spacing:0px;
	font-weight: normal;
	text-transform:capitalize;
}
/*sub blog カテゴリ メイン下*/
#sidebar .subBox .titleArea p span.en{
	font-family: 'Lora', serif;
	letter-spacing:0px;
	text-transform:capitalize;
}


/*stylist*/
body.stylist #main .sect02 .titleArea h3 span.en,body.stylist #main .stylistBox .txtInfo .blogArea .titleArea h3 span.en{
	font-family: 'Lora', serif;
	letter-spacing:0px;
	text-transform:capitalize;
	font-size: 32px;

}
/*coupon*/
body.coupon #main section.sect01 .titleArea h3 span.en{
	font-family: 'Lora', serif;
	letter-spacing:1px;
	text-transform:capitalize;

}
/*style　タイトル*/
body.style #main .sect02 .titleArea h3 span.en{
	font-family: 'Lora', serif;
	letter-spacing:0px;
	font-size: 30px;
	text-transform:uppercase;
}
/*access タイトル*/
body.access #main .shopdate h3 span.en,body.top #main .shopdate h3 span.en{
	font-family: 'Lora', serif;
	letter-spacing:0px;
	text-transform:capitalize;
	font-size: 24px;
}


/*nav文字*/
nav.Nav li a{
    font-family: 'Lora', serif;
	letter-spacing:0px;
    color: #333;
}
/*sub*/
#sub .subBox .titleArea p span.en{
	font-weight: lighter;
    font-family: 'Lora', serif;
	letter-spacing:0px;
	font-size: 28px;
	text-transform: uppercase;
    line-height: 44px;
}
/*sub moreボタン*/
#sub .subBox .titleArea a span{
    font-family: 'Lora', serif;
	letter-spacing:0.3px;	
}

/*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: 'Lora', serif;
	letter-spacing:0px;
	text-transform: capitalize;
}
/*top more*/
body.top section.sect .titleArea a span{
    font-family: 'Lora', serif;
	letter-spacing:0px;

	font-size: 18px;
}

/*画像more*/
.colListItem_content{
	font-weight: lighter;
    font-family: 'Lora', serif;
	letter-spacing:0px;
	text-transform: capitalize;
}
/*staff 役職
body.stylist .sect02 h2{
	font-weight: lighter;
    font-family: 'Lora', serif;
	letter-spacing:1px;
	font-size: 20px;
	text-transform: capitalize;
}
*/

/*body.top media */
body.top #main section.sect ul.wrapper li a.txt p.top_media{
	font-weight: lighter;
    font-family: 'Lora', serif;
	letter-spacing:0px;
}
/*body.top blog 日付*/
body.top #main section.top_blog ul.wrapper li p.top_blog_date{
	font-weight: lighter;
    font-family: 'Lora', serif;
	letter-spacing:0px;
}	

/*.blog news 一覧日付*/
body.blog #main p.newsTime01,body.news #main p.newsTime01{
	font-weight: lighter;
    font-family: 'Lora', serif;
	letter-spacing:0px;
}
/*top_blog 続きを読むボタン*/
body.top section.top_blog a.top_blog_more span{
    font-family: 'Lora', serif;
	letter-spacing:0.3px;
}
/*news blog more*/
body.news #main .couponArea .couponContent .txt .more span,
body.blog #main .couponArea .couponContent .txt .more span{
    font-family: 'Lora', serif;
	font-size: 14px;
	letter-spacing:0.3px;

}

@media only screen and (max-width: 1024px){
	body.top #main section.sect .titleArea h2{
		font-weight: lighter;
		font-family: 'Lora', serif;
		letter-spacing:1px;	
	}
}


/*ｈ1の装飾　筆記体*/
.bg_deco{
	font-family:'Lora', serif;
	letter-spacing:1px;
	text-transform:capitalize;
}




/*日本語*/

body.top section.sect .titleArea h2 span.jp{
	font-family:  "Noto Sans Japanese";
}
body.top #main .shopdate p{
	font-family:  "Noto Sans Japanese";	
}

/*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";	
}
/*access 小タイトル*/
body.access #main .shopdate h3 span.jp,body.top #main .shopdate h3 span.jp{
	font-family:  "Noto Sans Japanese";	
	font-size: 1.2rem;
}
body.shoplist #main .sect02 .titleArea h3 span.en{
	font-family:  "Noto Sans Japanese";
}
/*reserveボタン*/
header #headerInner ul.pcBtn li.reserve a{
    font-family:  "Noto Sans Japanese";
	text-transform:uppercase;
}
/*menu*/
body.menu #main .sect .titleArea h3 span.en{
    font-family:  "Noto Sans Japanese";
	text-transform:capitalize;
	font-size: 20px;
}

footer #footerInner #footerNav ul li a{
    font-family:  "Noto Sans Japanese";
}

/*　日本語明朝　*/

/*heder tel*/
header #headerInner .information span.telNumber{
	font-family: Georgia, "游明朝体", "YuMincho", "游明朝", "Yu Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN W3", HiraMinProN-W3, "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
}

body.top h1{
	font-family:  "Noto Sans Japanese";
	font-weight: bold;
	font-family: Georgia, "游明朝体", "YuMincho", "游明朝", "Yu Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN W3", HiraMinProN-W3, "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
}

@media only screen and (max-width: 1024px){
	body.stylist #main .sect02 .titleArea h3 span.jp,body.stylist #main .stylistBox .txtInfo .blogArea .titleArea h3 span.jp{
		font-family:  "Noto Sans Japanese";
		text-transform:capitalize;
	}
	#sub .subBox .titleArea p{
		font-family:  "Noto Sans Japanese";	
	}
}


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

/*=====================　allページ　========================*/

*{
	word-wrap: break-word;	
}
img{
	width: 100%;

}

body.news #main .articleTxt img,
body.blog #main .articleTxt img{
	margin: 0 auto!important;
	width: auto;
}

body.news #main .articleTxt p img,
body.blog #main .articleTxt p img{
	width: auto;
}
body.news #main .articleTxt p a img,
body.blog #main .articleTxt p a img{
	width: auto;
}

#containerInner{
	overflow: hidden;
}
/*================== content mein area ======================================*/

a.img,a.img img{
	opacity: 1;	
	-webkit-transition: all .6s ease;
    -moz-transition: all .6s ease;
    -ms-transition: all .6s ease;
    -o-transition: all .6s ease;
    transition: all .6s ease;
}

a.img{
    display: block;
	opacity: 1;
	overflow: hidden;
	line-height: 0;

}
a.img:hover{
    display: block;
	opacity: 1;
	/*
    transition: background 0.6s linear;
	transform: translate3d(0, 0, 0) perspective(0);
    backface-visibility: hidden;
	*/
}
a.img img{
	transform: scale(1.0);
}
a.img:hover img{
    display: block;
     -webkit-filter: brightness(40%) grayscale(200%);
     -moz-filter: brightness(40%) grayscale(200%);
     -o-filter: brightness(40%) grayscale(200%);
     -ms-filter: brightness(40%) grayscale(200%);
     filter: brightness(40%) grayscale(200%);
	transform: scale(1.1);

}

body.top section.sect ul.wrapper li a.img{
	margin: 0;	
}

/*==================================================================*/
/*==================================================================*/
/*=====================　各ページ　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 -->


*/
.header_bg{
	position: absolute;
	top: 0;
	right: 0;
	transform: rotate(-5deg);
}
.bg_deco{
	font-size: 150px;
	margin: 0;
	opacity: 0.1;
	
}

header{
	border-top:none;
    position: relative;
    background:none;
    width: 100%;
    z-index: 10;
    top: 0;
	text-align: left;
    height: auto;
	margin-bottom: 15px;

}
header #headerInner{
    width: 100%;
	padding: 0;
	display: block;
	margin-top: 10px;
    min-height: auto;
}
header #headerInner .logoArea{
	position: relative;
    left: 10px;
    top: 0px;
	margin: 0;
	width: 340px;
	display: inline-block;
}
header #headerInner .logoArea a.logo{
	width: 100%;
}
/*
header #headerInner .logoArea a.logo::before{
	content: "";
    width: 360px;
    height: 179px;
    position: absolute;
    top: -47px;
    left: -107px;
    background: #f1eedd;
    z-index: -1;
    transform: rotate(-11deg);
}
*/
header #headerInner .information{
	margin-left: 24px;
	display: inline-block;
    width: 200px;
    vertical-align: middle;
}
header #headerInner .information span{
	margin-bottom: 0;
}
header #headerInner .information span.telNumber{
	font-size: 25px;
	margin: 0;
	color: #888;
}
header #headerInner .information span.telNumber img{
	width: 30px;
	margin-right: 8px;
}
header #headerInner .information a{
	margin: 0 0 5px;
    width: 100%;
	padding: 8px 0 0 ;
	background: none;
    border: solid 1px #333;
}
header #headerInner .information a:hover{
	background: #333;
	color: #fff;
	opacity: 1;
}
header #headerInner .information p.headerText{
	width: 100%;
	position: relative;
	right: 0px;
	margin: 0;
    font-weight: inherit;
}
header #headerInner ul.pcBtn{
    position: fixed;
    bottom: 0px;
	width: auto;
	right: 0;
	margin: 0 10px 20px;
    border-radius: 50%;
    height: 133px;
    overflow: hidden;
	background: #981336;
    padding: 10px;
	border: solid 0.5px #fff;
}
header #headerInner ul.pcBtn li:first-child{
	border-bottom: dotted 1px #fff;
    margin-top: 8px;
	padding-bottom: 0px;

}
header #headerInner ul.pcBtn li.reserve a{
    padding: 23px 19px;
    text-decoration: none;
	font-size: 21px;
	background: none;
	color: #fff;
	font-weight: bold;
}
header #headerInner ul.pcBtn li.reserve a:hover{
    opacity: 1;
    color: #f91e58;
}
header #headerInner ul.pcBtn li.group_return a{
	font-size: 16px;
    padding-top: 16px;
}


header #headerInner ul.snsBtn{
	position: absolute;
    top: 0;
    right: 10px;
}

header #headerInner ul.snsBtn li{
    width: 25px;
    margin-right: 15px;
    text-align: center;
	display: inline-block;
}
header #headerInner ul.snsBtn li:last-child{
	margin-right: 0;
}


.Nav{
	top:0px;
    z-index: 100;
	position: relative;
    width: 100%;

}
.Nav > ul{
	position: relative;
	top:0px;
	width: 100%;
	background: none;
    padding: 0px;
}
.Nav > ul > li a{
    padding: 10px 20px 8px;
	background: none;
	font-size: 14px;
	letter-spacing: 0;
	border-bottom: solid 3px rgba(152, 19, 54, 0);
    text-transform: uppercase;
    line-height: 1.6;
	color: #666;
}
.Nav > ul > li a:hover{
    color: #981336;
    opacity: 1;
	border-bottom: solid 3px #981336;
}
.Nav > ul > li a span{
	font-size: 10px;
    letter-spacing: -0.6px;
    font-weight: normal;
	display: none;
}

.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;
}
@media only screen and (min-width: 1025px){
	.Nav > ul > li a{
		padding: 10px 20px 8px;
		font-size: 14px;
    	line-height: 1.6;
	}	
}
/*-------------クローンナビ装飾------------------------------------------------*/
.clone-nav{
    position: fixed;
    top: 0;
    left: 0;
    z-index: 50;
    width: 100%;
    transition: .3s;
    transform: translateY(-440%);
    height: 58px;
	background: rgba(238, 238, 238, 1);
}

.is-show,body.top .is-show {
    transform: translateY(0);
}
.clone-nav .logoArea,body.top .clone-nav .logoArea{
	width: 100px;
    top: 0;
	margin:10px auto 0;
}
body.top .clone-nav .logoArea{
	left: 0;
	position: relative;
}
.clone-nav ul, body.top .clone-nav ul{
	position: absolute;
	padding: 0px 0 8px;
}
.clone-nav ul.submenu, body.top .clone-nav ul.submenu{
	top:30px;
}
.clone-nav > ul > li a{
	color: #981336;
}
.clone-nav > ul > li a:hover{
	color: #981336;
	border-bottom: solid 3px #981336;
}
.clone-nav > ul > li.parent > a::before{
	border-top: solid 1px #981336;
    border-right: solid 1px #981336;
}

.clone-nav > ul > li a span,
body.top .clone-nav > ul > li a span{
	display: block;
}

nav#footerNav.is-show ,body.top nav#footerNav.is-show{
    transform: translateY(-440%)
}
@media only screen and (max-width: 1024px){
	.clone-nav{
		display: none;
	}
	.Nav > ul > li a span{
		display: block;
	}

}

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

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

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

	.Nav .navbtn a, .Nav .navbtn a.close{
		background-color: #333;

	}
	.Nav .navbtn a::before, .Nav .navbtn a.close::before{
		background: #fff;
	}
	.Nav .navbtn a span::after, .Nav .navbtn a.close span::after{
		background: #fff;
	}
	.Nav .navbtn a::after, .Nav .navbtn a.close::after{
		background: #fff;
	}
	.Nav > ul{
	    z-index: 100;
	    padding: 40px 0px 10px;
		text-align: left;
	    width: 30%;
    	float: right;
	    background: rgba(51, 51, 51,0.9);
		max-width: 200px;
		position: relative;
		top: 0;
		margin-right: 0;

	}

	header #headerInner .logoArea{
	    top: 0px;
    	left: 0;
    	position: absolute;
	    width: 240px;
		margin: 10px;
	}

	header{
	    height: 60px;
	    position: fixed;
		background: none;
		z-index: 100;
	    background: rgba(255, 255, 255, 1);

	}
	header #headerInner ul.spReserve{
	    margin: 0 auto;
	    width: 100%;
    	padding: 0;
	    position: fixed;
		bottom: 0;
	    background: #981336;
	    border-top: solid 3px #981336;
	    border-bottom: solid 3px #981336;
	}
	header #headerInner ul.spReserve li{
		width: 100%;
	}
	header #headerInner ul.spReserve li:nth-child(2){
	    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;
    	height: 30px;
		width: 30px;
	}
	header #headerInner ul.spReserve li a span{
		padding: 2px;	
	}
	header #headerInner .logoArea a.logo{
    	margin-left: 0;	
	}

	.Nav > ul > li{
		width: 100%;
	    border-bottom: dotted 1px #fff;
	}
	.Nav > ul > li a{
		padding: 8px 8px;
	    background: none;
    	color: #fff;
		border-bottom: none;
	}
	.Nav > ul > li a:hover{
		border-bottom: none;
		background: #981336;
		color: #fff;
	}
	.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;
    	background: #981336;
	}
	.Nav > ul > li.parent.open > a::after{
		background: none;
	}
	.Nav ul.close{
		width: 30%;
		padding: 40px 0px 20px;
		border: none;
		min-width: 140px;
	}

	.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;
		color: #981336;
		border-bottom: dotted 1px #fff;
	}
	.Nav > ul > li > ul li a::before{
		border-top: solid 1px #fff;
    	border-right: solid 1px #fff;
	}
	header #headerInner .logoArea a.logo::before{
	    height: 145px;
	}
	header #headerInner ul.snsBtn{
		top: 17px;
    	right: 64px;
	}
}
@media only screen and (max-width: 768px){
	header #headerInner .logoArea{
		width: 180px;
	    margin: 14px 10px;
	}
	header #headerInner .logoArea a.logo::before{
		height: 117px;
		transform: rotate(-9deg);
		width: 330px;
	}

}
@media only screen and (max-width: 600px){
	header #headerInner ul.snsBtn li{
		width: 18px;
		margin-right: 3px;
	}
	header #headerInner ul.snsBtn{
    	right: 54px;
		top: 21px;
	}

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


}


/*=============================================================*/
/*=====================　各ページ　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{
	background: #666;
    padding:  0;
}
#footerInner{
	width: 92%;
	padding: 1% 4% 3px;	
}
footer #footerInner #footerNav{
    width: 50%;
	display: inline-block;
    vertical-align: middle;
	margin: 50px auto 30px;
}
footer #footerInner #footerNav ul{
	width: 100%;
	display: block;
	margin: 0;
}
footer #footerInner #footerNav ul li{
    margin-bottom: 6px;
	width: 190px;
    display: inline-block;
}

footer #footerInner #footerNav ul li a{
	
}

footer #footerInner #footerContent{
	width: 100%;
	max-width: 1200px;
	display: block;
}
footer #footerInner #footerPolicy{
	background: none;
	padding: 0;
}
footer #footerInner #footerPolicy ul{
	margin: 0;
}
footer #footerInner #footerPolicy p{

}
footer #footerInner #footerContent #footerInfo{
	width: 49%;
	margin: 0 auto 30px;
    margin-left: 0;
	display: inline-block;
    vertical-align: middle;
}
footer #footerInner #footerContent #footerInfo #footerLogo{
    display: block;
	width: 280px;
	margin: 0 auto 10px;
	position: relative;
}
footer #footerInner #footerContent #footerInfo #footerLogo::before{
	content: "";
	height: 140px;
	width: 1px;
	background: #fff;
	position: absolute;
	top: 20px;
	right: -50px;
}

footer #footerInner #footerContent #footerInfo #footerLogo a{
    width: 100%;
    height: auto;
    margin: 30px 0;
    text-align: center;
	display: block;
}
footer #footerInner #footerContent #footerInfo #footerLogo p{
    width: 100%;
    margin: 0;
}
footer #footerInner #footerContent #footerInfo .txtInfo{
	width: 280px;
	margin: 0 auto;
}
footer #footerInner #footerContent #footerInfo .txtInfo p.address{
	margin-bottom: 10px;
	
}
footer #footerInner #footerContent .businessHourWrapper{
	display: inline-block;
	width: 80%;
	display: block;
	margin: 30px auto;
}
.businessHourWrapper .businessHour,.finalAcceptance,.finalAcceptance{
	width: 30%;
	display: inline-block;
	text-align: center;
	vertical-align: top;
	padding: 1%;
}
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;
}
footer #footerInner #footerContent #footerLink{
	margin: 0 auto;
	width: 60%;
}
footer #footerInner #footerContent #footerLink ul.actionBtn{

}


footer #footerInner #footerContent #footerLink ul.actionBtn li{
	width: 30%;
	border: solid 2px #fff;
	height: auto;
	margin: 0 1%;
	display: inline-block;
	background: none;
}
footer #footerInner #footerContent #footerLink ul.actionBtn li.recruit{
	background: none;	
}
footer #footerInner #footerContent #footerLink ul.actionBtn li a{
	width: 90.5%;
	margin: 0 auto;
	height: auto;
	padding: 5%;
	color: #fff;
}
footer #footerInner #footerContent #footerLink ul.actionBtn li.reserve a{
	background: none;
}

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: #666;
	opacity: 1;
}

footer #footerInner #footerContent #footerLink ul.snsBtn{
	position: relative;
	bottom: 0;
	display: block;
	width: 304px;
	margin: 0 auto;
}
footer #footerInner #footerContent #footerLink ul.snsBtn li{
    display: inline-block;
}
footer #footerInner #footerContent #footerLink ul.snsBtn li a img{
	height: 30px;
	width: 30px;
}
footer #footerInner #footerContent #footerLink ul.snsBtn li.fb a img{
    width: 18px;
}
@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{
	    display: block;
		width: 90%;
		margin: 0 auto 10px;
		background: none;
	}
	
	footer #footerInner #footerContent #footerInfo{
		width: 90%;
		border-bottom: dotted 1px #fff;
		display: block;
		padding-bottom: 20px;
		margin: 0 auto 30px;
	}
	footer #footerInner #footerContent .businessHourWrapper{
		width: 90%;
	}
	footer #footerInner #footerContent #footerLink ul.snsBtn{
	    width: 100%;
		text-align: center;
	}
	footer #footerInner #footerContent #footerInfo #footerLogo a{

	}
	footer #footerInner #footerContent #footerInfo #footerLogo::before{
		display: none;
	}
	footer #footerInner #footerContent #footerInfo .txtInfo p{
		text-align: center;
	}
	footer #footerInner #footerContent #footerInfo #footerLogo p.salonName{
		font-size: 16px;
		margin: 10px auto;
		text-align: center;
	}
	.businessHourWrapper .businessHour, .finalAcceptance, .finalAcceptance{
		width: 100%;
		display: block;
	}
	footer #footerInner #footerPolicy p{
	    left: -87px;
	}
	footer #footerInner #footerNav{
		width: 480px;
	    position: relative;
		left: 50%;
		margin-left: -188px;
		margin-top: 0px;
	}
	footer #footerInner #footerNav ul li{
		font-size: 14px;
		width: 160px;
	}
	footer #footerInner #footerNav ul li a{
		color: #fff;
	}
}
@media only screen and (max-width: 768px){
	footer #footerInner #footerContent #footerLink{
		width: 100%;
	}
	footer #footerInner #footerNav{
		width: 320px;
	    margin-left: -124px;
	}
}

@media only screen and (max-width: 425px){
	footer #footerInner #footerNav{
		width: 160px;
	    margin-left: -80px;
	}
	footer #footerInner #footerContent #footerInfo{
		width: 100%;
	}
}


/*=============================================================*/
/*=====================　各ページ　content　========================*/


body.lower #content{
	width: 94%;
    max-width: 1200px;
	margin:  0px auto 50px;
	box-sizing: border-box;
}
body.top #content{
	width: 100%;
    display: block;
}

body.lower #content #main{
	width: 96%;
	padding: 0%;
	position: relative;
}

body.lower.onecolumn #content #main{
	width: 96%;
}


#main{
	width: 96%;
	padding: 2%;
	position: relative;
}
body.top #main{
	width: 100%;
	padding: 0;
}
@media only screen and (max-width: 1024px){
	body.lower #content{
		width: 96%;
		margin: 0px auto 50px;
    	padding: 0;
	}
	#content{
		padding: 0;
	}

	body.lower #content #main,
	#main{
		margin: 0 auto;
		width: 100%;
	}
}
@media only screen and (max-width: 768px){
	body.lower #content{
    	margin: 0px auto 30px;



	}
}
@media only screen and (max-width: 425px){
	body.lower #content{
		padding: 0px 0 0;
	}
}
    
/*=============================================================*/
/*==================================================================*/
/*================== content mein area ======================================*/
/*
a.img,a.img img{
	opacity: 1;	
	-webkit-transition: all .6s ease;
    -moz-transition: all .6s ease;
    -ms-transition: all .6s ease;
    -o-transition: all .6s ease;
    transition: all .6s ease;
}

a.img{
    display: block;
	opacity: 1;
	overflow: hidden;
}
a.img:hover{
    display: block;
	opacity: 1;
}
a.img img{
     -webkit-filter: brightness(1.0);
     -moz-filter: brightness(1.0);
     -o-filter: brightness(1.0);
     -ms-filter: brightness(1.0);
     filter: brightness(1.0);
	transform: scale(1.0);
}
a.img:hover img{
    display: block;
     -webkit-filter: brightness(0.4) grayscale(200%);
     -moz-filter: brightness(0.4) grayscale(200%);
     -o-filter: brightness(0.4) grayscale(200%);
     -ms-filter: brightness(0.4) grayscale(200%);
     filter: brightness(0.4) grayscale(200%);
	transform: scale(1.1);

}

body.top section.sect ul.wrapper li a.img{
	margin: 0;	
}
*/

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


#sub .subBox{
	padding: 4%;
}

#sub .subBox .titleArea{
	border: none;
    width: 100%;
    margin: 0 auto 6px;
	position: relative;
	text-align: center;
}
#sub .subBox .titleArea a{
	color: #981336;
    text-decoration: none;
    float: none;
    text-align: center;
    padding: 10px;
	position: absolute;
	top:19px;
	right: 0;
	border: solid 1px #981336;
}
#sub .subBox .titleArea a:hover{
	opacity: 1;
	color: #fff;
	background: #981336;
}
#sub .subBox .titleArea a span{
    padding-right: 0;
    background: none;
    font-weight: normal;
}
#sub .subBox .titleArea p{
    font-weight: bold;
	float: none;
	padding: 0 0 5px;
	color: #981336;
}
/*
#sub .subBox .titleArea p::before{
	content: "";
	width: 120px;
	height: 1px;
	background: #333;
	position: absolute;
	top: 28px;
	left: 50%;
	margin-left: -20px;
}
*/
#sub .subBox .titleArea p span.en{
	color: #981336;	
    margin-left: 5px;
}
#sub .subBox .titleArea p span.jp{
	font-weight: normal;
    display: block;
	color: #981336;
}


#sub #subStaff ul li:last-child a, #sub #subCategory ul li:last-child a, #sub #subFaq ul li:last-child a, #sub #subNewscate ul li:last-child a, #sub #subMedicate ul li:last-child a, #sub #subBlogcate ul li:last-child a{
	margin-bottom: 0;	
}

/* #sub category */
#sub #subCategory,#sub #subFaq{
	position: relative;
    padding: 40px 8%;
    border: none;
	background: rgba(238, 238, 238, 0.6);

}

#sub #subCategory .titleArea p,
#sub #subFaq .titleArea p,
#sub #subStaff .titleArea p,
#sub #subBlogcate .titleArea p{
	color: #333;
    padding: 0 0 14px;
	border-bottom: solid 1px #888;
}

#sub #subCategory ul,#sub #subFaq ul,#sub #subStaff ul,#sub #subBlogcate ul{
    padding: 10px 0 0;
	margin:auto;
}
#sub #subStaff ul li a, #sub #subCategory ul li a, #sub #subFaq ul li a, #sub #subNewscate ul li a, #sub #subMedicate ul li a, #sub #subBlogcate ul li a{
	color: #333;	
}

/* #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 #subStyle .titleArea,
#sub #subBlog .titleArea,
#sub #subNews  .titleArea{
	border-bottom: solid 1px #eee;
    margin-bottom: 10px;
    padding-bottom: 5px;
}
#sub #subStyle .titleArea p,
#sub #subBlog .titleArea p,
#sub #subNews  .titleArea p{
	text-align: left;
}



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

#sub .subBox .wrapper article a.linkToArticle p{
	padding: 10px 0 0;
	margin:0 auto;
}
#sub .subBox .wrapper article a.linkToArticle p.title{
	font-size: 1.3rem;
    border-bottom: dotted 1px;
    margin: 20px 0 0;
    padding: 3px 0 10px;
	
}
#sub #subBlog .wrapper article a.linkToArticle p.title,
#sub #subNews .wrapper article a.linkToArticle p.title{
	margin: 0;
}

#sub #subBlog .wrapper article ul,
#sub #subNews .wrapper article ul{
	display: block;
    margin-bottom: 0;

}
#sub .subBox .wrapper article ul li.date{
	padding: 0;
	color: #fff;
	position: relative;
	margin: 5px 0 0;
}

#sub .subBox .wrapper article ul li.author{
	position: static;
}

#sub #subNews .wrapper article span.category a,
#sub .subBox .wrapper article span.category a{
	text-decoration:none;
    position: relative;
    width: 100%;
    top: 0;
    right: 0;
    background: #888;
    padding: 10px;
    color: #fff;
	text-align: center;
    padding: 4px 8px;
	width: 100%;
	box-sizing: border-box;
    margin: 5px auto;
}

/*  #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;
	display: block;
}
#sub #subStyle ul.wrapper li a.txt{
	display: none;
}
@media only screen and (min-width: 1025px){
	#sub #subStyle ul li a.img{
		margin: 0;
	}	
}


/* #sub Search  */

dl.search2 dd button{
	background: rgba(175, 157, 124, 0.8);
	border: solid 1px rgba(175, 157, 124, 0.8);
	
}

@media only screen and (max-width: 1024px){
	#sub{
		width: 100%;
		margin: 30px auto 0;
	}
	#sub .subBox{
		padding: 0%;
	}
	#sub .subBox .wrapper{
		margin: 0px;
	}
	#sub .subBox .wrapper article{
	    width: 49.5%;
		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: 100%;
	}
	#sub .subBox .titleArea a{
		padding: 4px 20px;
		margin: 0 auto;
		height: 33px;
		box-sizing: border-box;
	}
	#sub #subBlog .wrapper article ul, #sub #subNews .wrapper article ul{

	}
	#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%;
	}
	#sub #subBlog, #sub #subNews{
		padding: 0;
	}
	#sub .subBox .wrapper article ul li.author:before{
		display: none;
	}
	#sub .subBox .titleArea p span.en{
		font-size: 30px;
	}
	#sub .subBox .titleArea a span{
		font-size: 18px;
	}
}
@media only screen and (max-width: 768px){
	#sub .subBox .titleArea p span.en{
	    font-size: 30px;
	}
}
@media only screen and (max-width: 425px){
	#sub .subBox .wrapper article{
		width: 100%;
		margin-right: 0;
		padding: 2%;
	}
	#sub .subBox .titleArea p span.en{
	    font-size: 26px;
	}
	#sub .subBox .titleArea a{
		padding: 8px 12px;
		
	}
	#sub .subBox .titleArea a span{
		font-size: 12px;
	}
}

/*==================================================================*/
/*================== top ======================================*/

body.top h1{
    font-size: 22px;
   	max-width: 1200px;
    margin: 42px auto 110px;
	color: #888;
	width: 90%;
    line-height: 1.8;
	text-align: center;
}

#mainVisual{
	margin: 0 auto 0px;

}
body.top section.sect{
	width: 90%;
    max-width: 1200px;
	position: relative;
	margin: 0 auto 100px;
}

@media only screen and (min-width: 769px){
	#mainVisual .swiper-wrapper .swiper-slide {
		border-right: 3px solid #fff;
	}
}
@media only screen and (min-width: 1025px){
	#mainVisual{
		margin: 0 auto 0px;
	}
	#mainVisual .swiper-wrapper{
		margin-bottom: 0;
	    width: 1242px;
	}
	
}
@media only screen and (max-width: 1024px){
	body.top h1{
		position: relative;
		top: 0;
		left: 0;
		width: 96%;
    	margin: 42px auto 73px;
	}	
	#mainVisual{
		margin: 60px auto 0px;
	}
}
@media only screen and (max-width: 768px){
	body.top h1{
	    font-size: 12px;
	    margin: 30px auto 50px;
	}
}
/*---------------------------------------------------------------*/
/*----- top title area ------*/
body.top section.sect .titleArea{
	position: relative;
	width: 100%;
	max-width: 1200px;
	margin: 20px auto;
    border-bottom: dashed 10px #eee;
	border-bottom: solid 1px #eee;
    padding-bottom: 2px;
}
body.top section.sect .titleArea h2{
	padding: 0;
}
body.top section.sect .titleArea h2 span.en{
	margin-left: 5px;
}

body.top section.sect .titleArea h2 span.jp{

	color: #981336;
}

body.top section.sect .titleArea a{
	text-decoration: none;
    border: solid 1px #981336;
    padding: 4px 20px;
	margin: 5px 0 0;
	color: #981336;
}
body.top section.sect .titleArea a:hover{
	background: #981336;
	color: #fff;
	opacity: 1;
}
body.top section.sect .titleArea a span{
	background: none;
	padding: 0;
}

@media only screen and (max-width: 1024px){
	body.top #main section.sect{
    	margin-bottom: 40px;
	}
	body.top #main section.sect .titleArea{
	    border-bottom: solid 1px #eee;
    	padding-bottom: 5px;
	    margin: 0 auto 20px;
		width: 96%;
		
	}
	
	body.top section.sect .titleArea h2{
	    float: left;
	}
	body.top #main section.sect .titleArea h2{
		padding: 0;
	}
	body.top #main section.sect .titleArea h2 span.en{
	    font-size: 32px;
	}
	body.top #main section.sect .titleArea a{
		text-decoration: none;
		float: right;
		text-align: center;
	}
	body.top #main section.sect .titleArea a:hover span{
		color: #fff;
	}

	body.top #main section.sect .titleArea a span{
		padding-right: 0;
		background: none;
		font-size: 18px;
	    color: #981336;
	}

	body.top #main section.sect ul.wrapper li a.txt h3{
		color: #333;
	}
	body.top #main section.sect ul.wrapper li a.txt p{
		margin-bottom: 10px;
	}
}



@media only screen and (max-width: 768px){
	body.top #main section.sect .titleArea h2 span.jp{
		display: block;
		
	}
	body.top #main section.sect .titleArea h2 span.en{
		font-size: 30px;
	}
}


@media only screen and (max-width: 425px){
	body.top #main section.sect .titleArea h2 span.en{
		font-size: 26px;
	}
	body.top #main section.sect .titleArea h2 span.jp{
		font-size: 12px;
	}
	body.top #main section.sect .titleArea a{
		padding: 8px 12px;
		margin: 5px 0 0;
	}


	body.top #main section.sect .titleArea a span{
		font-size: 14px;
	}
	body.top #main section.sect .titleArea{
		margin: 0 auto 10px;
	}
}
/*-------top title area ここまで-------*/
/*---------------------------------------------------------------*/
/*-------top banner Front ここから-------*/

/*
        <section class="sect top_banner">
			<div class="top_banner_F">
				<div class="titleArea clearfix">

					<h2>
						<span class="en">group top</span>
						<span class="jp">グループトップ</span>
					</h2>
					<a href="/"><span>more</span></a>

				</div>
			</div>
        </section>
*/
body.top #main section.top_banner{
	width: 46%;
	display: inline-block;
    vertical-align: top;
	margin: 0 0 0 4%;
}

a.top_banner_F{
	width: 100%;
	box-sizing: border-box;
    border: solid 2px;
    color: #333;
	display: block;
    overflow: hidden;
}
section.top_banner a{
    -webkit-transition: all .6s ease;
    -moz-transition: all .6s ease;
    -ms-transition: all .6s ease;
    -o-transition: all .6s ease;
    transition: all .6s ease;
}
section.top_banner a:hover {
	opacity: 1;

}

body.top section.top_banner a .titleArea{
	padding: 0px;
	-webkit-transition: all .6s ease;
    -moz-transition: all .6s ease;
    -ms-transition: all .6s ease;
    -o-transition: all .6s ease;
    transition: all .6s ease;
	background: none;
}
body.top section.top_banner a.top_banner_F .titleArea{
	padding: 30px;
}
section.top_banner a:hover div.titleArea{

}

body.top section.top_banner .titleArea h2 span.en{
	-webkit-transition: all .6s ease;
    -moz-transition: all .6s ease;
    -ms-transition: all .6s ease;
    -o-transition: all .6s ease;
    transition: all .6s ease;
    font-size: 34px;
}
body.top section.top_banner .titleArea h2 span.jp{
	-webkit-transition: all .6s ease;
    -moz-transition: all .6s ease;
    -ms-transition: all .6s ease;
    -o-transition: all .6s ease;
    transition: all .6s ease;
	margin-left: 0;
}
section.top_banner a.top_banner_F .titleArea h2::before{
	top:53px;
}

.top_banner_more{
	border: solid 1px #981336;
    margin: 5px 0 0;
	position: absolute;
    right: 30px;
	-webkit-transition: all .6s ease;
    -moz-transition: all .6s ease;
    -ms-transition: all .6s ease;
    -o-transition: all .6s ease;
    transition: all .6s ease;
}
a.top_banner_F .top_banner_more{
    padding: 4px 20px;
}

section.top_banner a:hover div.top_banner_more{
	background: #981336;
	color: #fff;
}
.top_banner_more p{
	font-family: 'Lora', serif;
    letter-spacing: 1px;
    font-size: 18px;
	color: #981336;
	margin: 0;
	-webkit-transition: all .6s ease;
    -moz-transition: all .6s ease;
    -ms-transition: all .6s ease;
    -o-transition: all .6s ease;
    transition: all .6s ease;
}
section.top_banner a:hover p,
body.top section.top_banner a:hover span.en,
body.top section.top_banner a:hover span.jp,
body.top section.top_banner a:hover h2{
	color: #fff;	
}


@media only screen and (max-width: 1024px){
	body.top #main section.top_banner{
		width: 100%;
		margin: 0;
	}
	body.top #main section.top_banner .titleArea{
		padding: 0px;
		width: 340px;
		box-sizing: border-box;
		border: none;
		margin-left: -170px;
    	margin-top: -17px;
	}
	body.top #main section.top_banner a.top_banner_F .titleArea{
		width: 400px;
		margin-left: -200px;
	    left: 50%;
	}
	section.top_banner a.top_banner_F .titleArea h2::before{
	    top: 44px;
	}
	.top_banner_more{
		right: 20px;
	}
	.top_banner_more p{
		font-size: 18px;
	}
	
}
@media only screen and (max-width: 768px){
	body.top #main section.top_banner .titleArea{
		width: 300px;
		position: absolute;
		top: 50%;
		left: 50%;
		margin-left: -150px;
		margin-top: -42px;
		padding: 20px;
		box-sizing: border-box;
	}
	body.top #main section.top_banner a.top_banner_F .titleArea{
		padding: 10px;
		margin-top: -38px;
	}
	section.top_banner a.top_banner_F .titleArea h2::before{
	    top: 33px;
	}
	.top_banner_more{

	}
}
@media only screen and (max-width: 470px){
	body.top #main section.top_banner a.top_banner_F .titleArea{
		width: 380px;
		margin-left: -190px;
	}
}

@media only screen and (max-width: 425px){
	a.top_banner_F .top_banner_more{
		right: 10px;
		padding: 4px;			
	}
	body.top #main section.top_banner .titleArea{
		width: 264px;
		margin-left: -132px;
		padding: 10px;
		margin-top: -34px;
	}
	body.top #main section.top_banner a.top_banner_F .titleArea{
		width: 264px;
		margin-left: -132px;
		padding: 10px;
		margin-top: -34px;
	}
	.top_banner_more p{
		font-size: 14px;
	}

}
/*-------top banner Front ここまで-------*/

/*---------------------------------------------------------------*/
/*-------top banner L-R ここから　（top banner Frontとセット）-------*/
/*
 		<section class="sect top_banner">
        <a class="top_banner_L" href="{url(staffs)}">
            <div class="titleArea clearfix">

                <h2>
                    <span class="en">shop staff</span>
                    <span class="jp">ショップスタッフ</span>
                </h2>
                <div class="top_banner_more"><p>more</p></div>

            </div>

        </a>
        <a class="sect top_banner_R" href="{url(coupon)}">
            <div class="titleArea clearfix">

                <h2>
                    <span class="en">coupon</span>
                    <span class="jp">クーポン</span>
                </h2>
                <div class="top_banner_more"><p>more</p></div>

            </div>
		</a>
        </section>
*/


a.top_banner_L,a.top_banner_R{
	display: block;
	width: 100%;
	box-sizing: border-box;
    color: #981336;
	overflow: hidden;
	position: relative;
	height: 150px;
	border: solid 1px #981336;
}
a.top_banner_L{
	margin-bottom: 26px;
}


a.top_banner_L img,a.top_banner_R img,a.top_banner_F img{
	-webkit-transition: all .6s ease;
    -moz-transition: all .6s ease;
    -ms-transition: all .6s ease;
    -o-transition: all .6s ease;
    transition: all .6s ease;
    filter: brightness(1.0);
	transform: scale(1.0);
}

a.top_banner_L:hover img,
a.top_banner_R:hover img,
a.top_banner_F:hover img{
	-webkit-transition: all .6s ease;
    -moz-transition: all .6s ease;
    -ms-transition: all .6s ease;
    -o-transition: all .6s ease;
    transition: all .6s ease;
    filter: brightness(0.4);
	transform: scale(1.1);
}
body.top a.top_banner_L .titleArea,
body.top a.top_banner_R .titleArea{
	width: 300px;
    background: none;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -150px;
    margin-top: -19px;
	border: none;

}
body.top a.top_banner_L .titleArea h2,
body.top a.top_banner_R .titleArea h2{
	line-height: 26.5px;
    text-align: center;
}
body.top a.top_banner_L:hover span.en,
body.top a.top_banner_R:hover span.en{
	color: fff;
}

section.top_banner a.top_banner_L .titleArea h2::before,
section.top_banner a.top_banner_R .titleArea h2::before{
	top:53px;
    width: 160px;
	right: 110px;
}
a.top_banner_L .top_banner_more,
a.top_banner_R .top_banner_more{
    padding: 4px 20px;
}
@media only screen and (max-width: 1024px){
	section.top_banner a.top_banner_L .titleArea h2::before, section.top_banner a.top_banner_R .titleArea h2::before{
		top:44px;
	}
	a.top_banner_L, a.top_banner_R{
		width: 100%;
		display: block;
		margin-bottom: 20px;
	}
}


@media only screen and (max-width: 768px){
	a.top_banner_L, a.top_banner_R{
		display: block;
    	width: 96%;
		margin: 0 auto 10px;
		position: relative;
		height: 120px;
	}

	a.top_banner_F{
		height: 100px;
	}

}
@media only screen and (max-width: 425px){
	section.top_banner a.top_banner_L .titleArea h2::before,
	section.top_banner a.top_banner_R .titleArea h2::before,
	section.top_banner a.top_banner_F .titleArea h2::before{
	    width: 140px;
		top: 26px;
		right: 90px;
	}
	a.top_banner_L .top_banner_more,
	a.top_banner_R .top_banner_more{
		right: 10px;
	    padding: 8px 12px;
	}
	a.top_banner_L, a.top_banner_R,a.top_banner_F{
		height: 100px;
	}
}

/*-------top banner L-R ここまで-------*/
/*---------------------------------------------------------------*/
/*-------top new hairstyle ここから-------*/

body.top section.top_hairstyle ul.wrapper li a.txt{
	border: solid 1px #888;
    display: block;
    margin: 10px 0 0;
    padding: 2px 12px;
	position: relative;
}
body.top section.top_hairstyle ul.wrapper li a.txt::before{
    content: "";
    width: 70px;
    height: 1px;
    position: absolute;
    top: 2px;
    left: -18px;
    background: #981336;
    transform: rotate( -45deg );
}

/*
body.top section.top_hairstyle .titleArea::before{
	content: "";
	width:900px;
	height: 200px;

	position: absolute;
	top: -30px;
	left: 50%;
	margin-left: -450px;
	z-index: -1;
	box-sizing: border-box;
}
*/
@media only screen and (max-width: 1024px){
	body.top section.top_hairstyle{
		margin: 0 auto;
	}
}


/*-------top new hairstyle ここまで-------*/
/*---------------------------------------------------------------*/

/*-------top news&bunner ここから-------*/
.seceion_group{
	width: 90%;
	max-width: 1200px;
	margin: 0 auto 120px;
    padding: 10px 0;
}
@media only screen and (max-width: 1024px){
	.seceion_group{
		width: 96%;
		margin: 0 auto 40px;
	}
}

/*-------top news&bunner ここまで-------*/
/*-------top news ここから-------*/
body.top section.top_news{
	max-width: 100%;
	padding:  0;
	margin: 0;
	width: 49.7%;
	display: inline-block;
	vertical-align: top;
}
body.top section.top_news .section_inner{
	max-width: 100%;
	margin: 0 auto;
}
body.top section.top_news ul.wrapper li{
    border-bottom: solid 1px #ddd;
	margin-bottom: 12px;
	padding-bottom: 12px
}
body.top section.top_news ul.wrapper li:last-child{
	border-bottom:none;
}
body.top section.top_news ul.wrapper li a.txt{
	position: relative;
}

body.top section.top_news ul.wrapper li a.txt p{
	margin: 0;
    width: 18%;
    display: inline-block;
	background: #888;
    color: #fff;
    text-align: center;
	vertical-align: middle;
	padding: 2px 0;
}

body.top section.top_news ul.wrapper li a.txt p.top_news_date{
    font-size: 16px;
	margin-bottom: 0;
}
body.top section.top_news ul.wrapper li a.txt h3{
	margin: 0 0 0 3%;
	padding: 0;
	border-bottom: none;
    color: #333;
    font-size: 14px;
	width: 78%;
	display: inline-block;
	vertical-align: middle;
}
@media only screen and (max-width: 1024px){
	body.top section.top_news ul.wrapper li a::before{
		top: 9px;
    	left: 55px;
	}
	body.top #main section.top_news ul.wrapper li a.txt h3{
    	padding: 8px 0;
		margin-left: 3%;
	}
	body.top #main section.sect.top_news ul.wrapper li a.txt p{
		color: #fff;
	}
}
@media only screen and (max-width: 768px){
	body.top #main section.top_news ul.wrapper li a.txt h3{
		width: 78%;
	}
	body.top section.top_news ul.wrapper li a.txt p{
		width: 18%;
	}
	body.top section.top_news ul.wrapper li{
	    margin-bottom: 6px;
    	padding-bottom: 6px;
	}
}
@media only screen and (max-width: 425px){
	body.top #main section.top_news ul.wrapper li a.txt h3,
	body.top section.top_news ul.wrapper li a.txt p{
		display: block;
		width: 100%;
		margin-right: 0;
	}
}
/*-------top news ここまで-------*/




/*-------top blog ここから-------*/

/*
		<section class="sect top_blog">
           <div class="titleArea clearfix">

                <h2>
                    <span class="en">blog</span>
                    <span class="jp">ブログ</span>
                </h2>
                <a href="{url(blogs)}"><span>more</span></a>

            </div>
            <div class="wrapper">
                <ul class="wrapper">
                    [blog num="8"]
                    <li>
						<a class="top_blog_a">
							<div class="img" href="{url(blog/{blog.id})}"><img src="{blog.img_src}" alt="{blog.subject}"></div>
							<div class="txt" href="{url(blog/{blog.id})}">
								<h3>{blog.subject}</h3>
								<p>{blog.date(%Y.%o.)}</p>
							</div>
                        </a>
                    </li>
                    [/blog]
                 </ul>
             </div>
		</section>
*/

body.top section.top_blog{
	background: none;
    width: 90%;
    max-width: 100%;
    padding: 0;
}
body.top section.top_blog .titleArea{
	margin: 0 auto 20px;

}
/*
body.top section.top_blog::before{
	content: "";
	width:80%;
	height: 200px;
	border: solid 2px #333;
	position: absolute;
	top: -30px;
	right: 0px;
	box-sizing: border-box;
	z-index: -1;
}
*/
body.top .wrapper{
	max-width: 1200px;
    margin: 0 auto;
}
body.top section.top_blog ul.wrapper li{
	position:relative;

    padding: 22px 0 0px;
	box-sizing: border-box;
}

body.top section.top_blog ul.wrapper li a.txt h3,
body.top section.top_hairstyle ul.wrapper li a.txt h3{
	color: #333;
	border-bottom: solid 1px #ddd;
    padding: 10px 0 5px;
	font-weight: bold;
	font-size: 15px;
}


p.top_blog_date{
	position: absolute;
	top: 0px;
    left: 0;
	font-size: 16px;
}

div.top_blog_a a.postUser{
	color: rgba(175, 157, 124, 0.8);
    display: block;
    margin: 10px 0;
}
body.top section.top_blog a.top_blog_more{
	text-decoration: none;
	margin: 5px 0;
	color: #fff;
	display: block;
    text-align: center;
    margin-left: auto;
    background: #981336;
}
body.top section.top_blog a.top_blog_more:hover{
	opacity: 1;
	color: #fff;
	background:#333 ;
}
body.top section.top_blog a.top_blog_more span{
	font-size: 14px;
}
@media only screen and (min-width: 1025px){
	body.top section.sect.sect01 ul.wrapper li{
		width: 22.7%;
		margin: 0 3% 3% 0;
	}	
}
@media only screen and (max-width: 1024px){
	body.top .wrapper{
		width: 96%;
	}

	body.top #main section.sect.sect01 ul.wrapper li{
		width: 31.3%;
		margin: 0 0 3%;
	}
	body.top #main section.sect.sect01 ul.wrapper li:nth-child(3n+2){
		margin: 0 3% 3%;
	}
	body.top #main section.sect.sect01 ul.wrapper li:nth-child(n + 7){
		display: none;
	}
	body.top #main section.top_blog ul.wrapper li a.txt h3,
	body.top #main section.top_hairstyle ul.wrapper li a.txt h3{
		font-weight: bold;
		font-size: 14px;
    	line-height: 1.4;
	}
}
@media only screen and (max-width: 768px){
	body.top #main section.sect.sect01 ul.wrapper li{
		width: 47%;
	    margin: 0 1.5% 3%;
	}
	body.top #main section.sect.sect01 ul.wrapper li:nth-child(3n+2){
	    margin: 0 1.5% 3%;
	}
	body.top #main section.sect.sect01 ul.wrapper li:nth-child(even){
		margin: 0 1.5% 3%;
	}
}


/*-------top blog ここまで-------*/
/* topページtop_shop 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 section.top_shop{

}

body.top .shopdate p.salonName{
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    color: #333;
    padding: 10px 0 5px;
	margin: 0;
    border-bottom: solid 4px #981336;

}
body.top .shopdate,
.shopImg,
body.access #main .shopdate{
	width: 49.7%;
	display: inline-block;
	vertical-align: top;
    margin-bottom: 10px;
}
.shopdate{
	padding: 0 0 0 2%;
	box-sizing: border-box;
}

body.top .shopdate a{
	text-decoration: none;
}
body.top .shopdate table{
	table-layout: fixed;
	width: 100%;
}

body.top .shopdate td,
body.access #main .shopdate td{
    padding: 10px;
    font-size: 1.4rem;
    line-height: 1.6;
    width: 79px;
    vertical-align: top;
    border-bottom: solid 1px #eee;
    padding: 10px;
}

body.top .shopdate td strong{
	
}
body.top .shopdate td:nth-child(2n){
	padding-right: 0;
    width: 100%;
}
body.top .shopImg img{
	margin: 0 auto 0px;
    width: 100%;
    max-width: 800px;
    text-align: center;
    display: block;
    border-radius: 10px;
}
body.top .shopImg .colListItem_lineWrap{
    height: 72%;
}
body.top .shopdate .shopdate_h3{
	border-bottom: dotted 1px #f389d2;
    margin: 0 auto 20px;
}
body.top .ggmap{
	height: 300px;
	padding: 0 ;
	margin-top: 18px;
}
body.top .ggmap iframe,
body.top .ggmap object,
body.top .ggmap embed{
	height: 300px;
}

@media only screen and (max-width: 1024px){
	body.top section.top_shop{
		margin: 30px auto 20px;
	}
	body.top .shopdate,
	.shopImg,
	body.access #main .shopdate{
		width: 100%;
		margin: 0 auto 10px;
		display: block;
		padding: 0;
	}
}
@media only screen and (max-width: 768px){

	
}

/* topページshopdata ここまで*/

/* topページtopFooterContent ここから*/
body.top #topFooterContent .wrapper{
	max-width: none;
}
.bx-wrapper img{

    margin: 0 auto;
}
body.top #topFooterContent .footerInstagram{
	margin-bottom: 120px;
	padding: 80px 0;
}
@media only screen and (max-width: 1024px){

	body.top #topFooterContent .footerInstagram{
		margin-bottom: 60px;
		padding: 40px 0;
	}	
}

@media only screen and (max-width: 768px){
	.bx-wrapper img{
		height: auto;
	}	
}
@media only screen and (max-width: 540px){
	.bx-wrapper img{

	}	
}
@media only screen and (max-width: 425px){
	.bx-wrapper img{

	}	
}
/* topページtopFooterContent ここまで*/



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


/*================== lower 各ページ  ====================================*/
/*------- all h1 titleここから-------*/
body.lower #pageTitleArea{
	background: url(/img/upload/2018/10/lucia_pageTitleArea.jpg);
	
	height: 200px;
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center center;
	padding-top: 20px;
	margin: 0 auto;
	background: none;
}

body.lower #pageTitleArea h1 span,
body.lower #pageTitleArea h1{
	color: #981336;
    margin-bottom: 2px;
}
body.lower #pageTitleArea h1{
	position: relative;
	width: 420px;
    left: 50%;
    margin-left: -210px;
	top: 60px;
}
body.lower #pageTitleArea h1::before{
	content: "";
	height: 140px;
	position: absolute;
	top: -40px;
	left: 50%;
	background: #eee;
    z-index: -1;
    width: 50%;
}
/*
body.lower #pageTitleArea h1::after{
	content: "";
	border-bottom: solid 1px #333;
	width: 200px;
	height: 1px;
	position: absolute;
	top: 28px;
	left: 50%;
}
*/
@media only screen and (max-width: 1024px){
	body.lower #pageTitleArea h1{
	    top: 65px;
	}
	body.lower #pageTitleArea{
		margin: 0px auto 0;
		padding: 50px 0 0;
	}
	body.lower #pageTitleArea h1{
		font-size: 16px;
	}
	

}

@media only screen and (max-width: 768px){
	body.lower #pageTitleArea{
		padding: 30px 0 0;
		height: 160px;
	}
	body.lower #pageTitleArea h1{
		width: 200px;
		left: 50%;
		margin-left: -100px;
	}
	body.lower #pageTitleArea h1::before{
	    width: 200px;
		height: 100px;
		top: -20px;
	}
	body.lower #pageTitleArea h1::after{
		width: 120px;
	}
	body.lower #pageTitleArea h1 span{
	    font-size: 28px;
	}
}
@media only screen and (max-width: 768px){
	body.lower #pageTitleArea{

	}
}


/*------- all titleここまで-------*/
/*==================================================================*/
/*=====================　company　recruit concept ========================*/
body.concept #main,
body.company #main,
body.recruit #main{
	margin: 0 auto;
}
body.concept #main .sect h2,
body.company #main .sect h2,
body.recruit #main .sect h2{
	font-size: 17px;
	line-height: 26px;	
    border-bottom: solid 3px #981336;
    padding-bottom: 4px;
    margin-bottom: 10px;
}
body.concept #main .sect p,
body.company #main .sect p,
body.recruit #main .sect p{
	margin: 0 auto 20px;
}
body.concept .swiper-container,
body.recruit .swiper-container{
    margin: 0 auto;
}
/*=============================================================*/

/*================== menu  ====================================*/
body.menu #main .sect{
	width: 100%;
}
body.menu .shop_menubox {
    display: inline-block;
    vertical-align: top;
    width: 98%;
    margin: 0 0 36px 0;
    padding: 0 1%;
}
body.menu .shop_menubox:nth-child(odd){
	margin: 0 0 36px 0;
}
body.menu #main .sect .titleArea h3 {
    float: left;
    padding: 0px;
    width: auto;
    color: #981336;
    font-weight: normal;
    box-sizing: border-box;
    border-radius: 10px;
    padding: 10px;
	margin: 0;
}


body.menu #main .sect .titleArea {
    border-bottom: none;
	margin: 0px auto 0;
	position: relative;
	border-bottom: solid 3px #981336;
	margin-bottom: 10px;
}
body.menu #main .sect table {
    width: 100%;
    max-width: 100%;
    margin-bottom: 40px;
}
.menu_annotation {
    font-size: 14px;
    line-height: 20px;
    padding: 10px;
	border: solid 1px #ddd;
	
}

@media only screen and (max-width: 1024px){
	body.menu .shop_menubox{
    	width: 96%;
	}
	body.menu #main .sect .table > tbody > tr > td:first-child{
		width: 75%;
		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: 10px 0;
		float: 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;
	}
}
/*=============================================================*/
/*=====================　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;
}

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{
    color:#333;
	background: #eee;
	-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.coupon #main section.sect01 .filterArea .btn button:hover{
	color: #fff;
    opacity: 1;
    background: rgba(175, 157, 124, 0.8);
}



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

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

body.coupon #main .result .couponArea .couponContent{
	padding: 20px 5%;
    width: 90%;
}
body.coupon #main .result .couponArea .couponContent .txt{
    width: 70%;
	margin-left: 2%;
	
}
body.coupon #main .result .couponArea .couponContent .img{
	width: 37%;
	max-width: 200px;
}
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 p.price{
    font-size: 2.5rem;
	margin-bottom: 0;
	
}
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;
}
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 (min-width: 1025px){
	body.coupon #main .result .couponArea .couponContent .txt h5{
		margin: 0 auto 10px;
		font-size: 1.6rem;
	}	
}

@media only screen and (max-width: 1024px){
	body.coupon #main .result .couponArea{
		width: 47.5%;
		display: inline-block;
		margin: 0 1% 2%;
	}
	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{
		font-size: 1.8rem;
    	margin: 20px auto 10px;
	}
}
@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;
	}
}

/*==================================================================*/
/*================== stylist  ====================================*/

body.stylist #main .sect02 ul.wrapper_stylist li a.txt:hover{
	opacity: 1;
}
body.stylist #main .sect02 ul.wrapper_stylist li a.txt h3{
	color: #333;
	border-bottom: dotted 1px;
    padding: 8px 0;
    -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.stylist #main .sect02 ul.wrapper_stylist li a.txt:hover h3{
	color: #981336;
}

body.stylist #main .sect02 ul.wrapper_stylist li a.txt p{
    -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.stylist #main .sect02 ul.wrapper_stylist li a.txt:hover p{
	color: #981336;
}

@media only screen and (min-width: 1025px){
	ul.wrapper_stylist li{
		display: inline-block;
		vertical-align: top;
		float: none;
		font-size: 1.3rem;
		margin: 0px 2% 2% 0;
		width: 23.5%;
		height: auto;
	}
	body.stylist #main .sect02 ul.wrapper_stylist li a.img img{
		display: inline-block;
		margin-bottom: 0;
	}
}
@media only screen and (max-width: 1024px){
	ul.wrapper_stylist li{
		margin: 0px 2% 2% 0;
    	width: 32%;
	}
	body.stylist #main .sect02 ul.wrapper_stylist li a.img{
		display: inline-block;
		margin-bottom: 0;
	}
}
/*==================================================================*/
/*=====================　スタイリスト詳細　========================*/

/*
下記★を
[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 #main .stylistBox .visualInfo{
	width: 50%;
	max-width: 260px;
}
body.stylist #main .stylistBox .visualInfo .photo{
    width: 100%;
	max-width: 500px;
}
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{
	color: #666;
	position: relative;
    width: 98%;
    margin-left: 2%;
}
body.stylist #main .stylistBox .txtInfo h2{
    font-size: 2.8rem;
	color: #333;
	margin: 0 auto 20px;
    line-height: 22px;
}
body.stylist #main .stylistBox .txtInfo h2 span{
	margin-left: 0;
	font-size: 1.4rem;
}
body.stylist #main .stylistBox .txtInfo p.job{
    font-size: 1.8rem;
	color: #333;
}

body.stylist #main .stylistBox .txtInfo p.catch02{
	font-size: 20px;
    width: 100%;
    padding: 3%;
	line-height: 1.3;
    border: dotted 1px #333;
    box-sizing: border-box;
    color: #981336;
}

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;
}
body.stylist #main .stylistBox .txtInfo .career dl dd{
	overflow-y: hidden;
	width: 98%;
	padding: 5px 0;
	display: block;
    margin: 0 1%;
}


body.stylist #main .stylistBox .txtInfo .blogArea .wrapper article ul li.author a{
	text-decoration: none;
}
body.stylist .sect02{
    margin: 0;
}
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 ul.wrapper{
	width: 100%;
}
body.stylist #main .sect02 ul.wrapper li{
	margin: 0;
    width: 32.6%;
    float: none;
    display: inline-block;
	margin-bottom: 5px;
	position: relative;
	vertical-align: top;
}
body.stylist #main .sect03 ul.wrapper li:nth-child(3n+2){
    margin: 0 1% 5px;
}
body.stylist #main .sect03 ul.wrapper li a.img{
    margin: 0;
}
body.stylist #main .sect03 ul.wrapper li a.img:hover{
	opacity: 1;
}
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{
	    margin-bottom: 0;
	}
	body.stylist #main .stylistBox .txtInfo p.job{
		margin-bottom: 10px;
	}
	body.stylist #main .stylistBox .txtInfo .blogArea .titleArea,body.stylist #main .sect02 .titleArea{
		padding-bottom: 0;
	}
	body.stylist #main .stylistBox .txtInfo .blogArea .titleArea h3,body.stylist #main .sect02 .titleArea h3{
		padding: 0;
	}
	body.stylist #main .stylistBox .txtInfo h2{
		margin: 20px auto 10px;
		line-height: 0.8;
	}
	body.stylist #main .stylistBox .txtInfo .career{
		margin-bottom: 0;
	}
	body.stylist #main .stylistBox .visualInfo .calendar{
		max-width: 260px;
		margin: 0 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 span.en,body.stylist #main .sect02 .titleArea h3 span.en{
		display: block;
	}
	body.stylist #main .sect02 .titleArea h3{
		padding-bottom: 5px;
	}
}

/*　stylist　クーポン*/
body.stylist #main .couponArea{
    background: #fff;
	width: 100%;
    display: inline-block;
    margin: 0px auto 2%;
    vertical-align: top;
    border-radius: 10px;
	color: #666;
}

body.stylist #main .couponArea h4{
    width: 98%;
	background: #777;
    text-align: center;
    padding: 5px 0;
    border-radius: 10px 10px 0 0;
	margin-bottom: 0;
}
body.stylist #main .couponArea .couponContent{
	padding: 20px 0;
    width: 94%;
	margin: 0 auto;
}
body.stylist #main .couponArea .couponContent .txt{
    width: 100%;
    display: inline-block;
    margin-left: 1%;
	vertical-align: middle;
}
body.stylist #main .couponArea .couponContent .img{
	width: 36%;
	display: inline-block;

}
body.stylist #main .couponArea .couponContent .img img{
	width: 100%;
	margin: 0 auto 5px;
}
body.stylist #main .couponArea .couponContent .txt p.price{
    font-size: 2.5rem;
	margin-bottom: 10px;
	
}
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;
    margin-right: 3px;
	background-color: #c5b790;
}
.wrapper{
	margin-bottom: 0;
}
body.stylist #main .couponArea .couponContent .txt a{
    color: #333;
	background: #eee;
}
body.stylist #main .couponArea .couponContent .txt a:hover{
	color: #fff;
	background: #bb1668;
}
@media only screen and (max-width: 1024px){
	body.stylist #main .couponArea .couponContent{
		padding: 3%;
	}
	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;
	}
	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;
	}	
}
@media only screen and (min-width: 1240px){
	body.stylist #main .couponArea{

	}
}

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

/*=============================================================*/
/*=====================　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;
}
body.style #main .sect02 ul.wrapper{
    margin: 0;
}
body.style #main .sect02 ul.wrapper li{
    margin: 0px 3% 3% 0;
    width: 22.7%;
    height: auto;
    position: relative;
}


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

body.style #main .sect02 ul.clearfix li a.img{
	width: 100%;
    margin: 0;
}


body.style #main .sect02 ul.clearfix li a.txt{
    width: 100%;
    border: solid 1px #888;
    display: block;
    margin: 10px 0 0;
    padding: 12px 12px 4px;
    position: relative;
	box-sizing: border-box;
	
}
body.style #main .sect02 ul.clearfix li a.txt::before{
	content: "";
    width: 70px;
    height: 1px;
    position: absolute;
    top: 2px;
    left: -18px;
    background: #981336;
    transform: rotate( -45deg );
}
body.style #main .sect02 ul.clearfix li a.txt:hover{
	opacity: 1;
}
body.style #main .sect02 ul.clearfix li a.txt h3{
	margin: 0;
    color: #333;
    letter-spacing: 1px;
    line-height: 1.6;
	font-size: 14px;
	font-weight: bold;
    margin-bottom: 5px;
    padding-bottom: 5px;
    border-bottom: solid 1px #ddd;
    -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.style #main .sect02 ul.wrapper li a.txt p{
	line-height: 1.4;
	font-size: 12px;	
}
body.style #main .sect02 ul.clearfix li a.txt:hover h3{
	color: #981336;
}
body.style #main .sect02 ul.clearfix li a.txt:hover p{
	color: #981336;
}



.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: 47%;
		margin: 0 1.5% 3%;
	}
	body.style #main .sect02 ul.wrapper li:nth-child(odd){
		margin: 0 1.5% 3%;
	}
	body.style #main .sect02 ul.wrapper li:nth-child(3n+2){
		margin: 0 1.5% 3%;
	}
	body.style #main .sect02 ul.wrapper li:nth-child(5){
		margin: 0 1.5% 3%;
	}
	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{

	}
	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{

}
body.style #content #main{

}
body.style_details #content #main{

}

body.style #content #main section.sect.styleBox{

}

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

body.style #main .styleBox .visualInfo .photo{
	width: 100%;
    margin: 0 auto 20px;
}

body.style #main .styleBox .txtInfo{
    margin-left: 2%;
    width: 38%;;
}
body.style #main .styleBox .txtInfo .hair_name{
    background: rgba(238, 238, 238, 0.9);
    position: relative;
    left: -16%;
    top: -50px;
    padding: 8%;
    width: 100%;
    margin-bottom: -30px;
}
body.style #main .styleBox .txtInfo h2{
    font-size: 2.4rem;
    line-height: 1.5;
	margin-bottom: 10px;
	color: #981336;
    border-bottom: solid 5px;
    padding-bottom: 5px;
}

.pinterestBtn span{
	background: url(/img/upload/2018/10/social_icons_pinterest-1.png)!important;
	background-size: 100%!important;
}
body.style #main .couponArea h4{
    padding: 5px 0px;
    text-align: center;
    width: 100%;
    background: #777;
	border-radius: 10px 10px 0 0;
	margin-bottom: 0;
}
body.style #main .styleBox .txtInfo .box{

    padding: 5%;
    color: #333;
}
body.style #main .styleBox .txtInfo .box p.styleTitle{
	padding: 0 0 5px;
    font-weight: bold;
    text-align: center;
    border-bottom: solid 2px #ddd;
	
}
body.style #main .styleBox .txtInfo .box ul.clearfix{
	text-align: center;
}
.style-arrenge-point-title{
	border-bottom: solid 2px #ddd;
    font-weight: bold;
    text-align: center;
	padding: 0 0 5px;
}
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: #eee;
    width: 48%;
	padding: 40px 3% 10px;
    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: 5px 0;
	 background: rgba(175, 157, 124, 0.8);
    position: absolute;
    left: 0;
    top: 0px;
    width: 100%;
	max-width: 1200px;
	text-align: center;
}

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

body.style #main .commentArea .txt{
    width: 100%;
    margin: 0 0 0 3%;
}
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{

}
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.style_details #main{

}
body.style_details #main .sect02 ul.wrapper{
    margin: 0;
    padding: 0px 0 20px;
}
/*
body.style_details #main .sect02 ul.wrapper li{
	margin: 0;
    width: 32%;
	margin-bottom: 5px;
    float: none;
    display: inline-block;
	position: relative;
	vertical-align: top;
}
body.style_details #main .sect02 ul.wrapper li:nth-child(3n+2){
    margin: 0 1% 5px;
}
*/
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;
}
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;
}

body.style #main .styleBox .txtInfo ul.sns{
	margin:0 0 10px auto;
}
body.style #main .commentArea .txt h4{
	border-bottom: dotted 1px;
    padding-bottom: 10px;
	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 .hair_name{
		width: 90%;
		top:0;
		left: 0;
		position: relative;
		margin-bottom: 0px;
    	padding: 10px 5%;
	}
	body.style #main .styleBox .txtInfo ul.sns{
		margin-bottom: 10px;
	}
	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: 0 0 0 2%;
	}
	body.style #main .styleBox .txtInfo .box{
		margin: 0;
   		padding: 20px 0;
	}
	body.style #main .styleBox .txtInfo .box .recommend ul.clearfix{
		margin-bottom: 0;
	}
	body.style #main .sect02 .titleArea{
		padding-bottom: 0;
	}
		body.style #main .sect02 .titleArea h3{
		padding: 0 0 5px 0px;
	}


}
@media only screen and (max-width: 768px){
	body.style #main .styleBox .txtInfo h2{
		font-size: 26px;
	}
	body.style_details #main .sect02 ul.wrapper li{
		
	}
}
@media only screen and (max-width: 425px){
	body.style #main .styleBox .txtInfo h2{
		font-size: 24px;

	}

	body.style #main .sect02 .titleArea h3 span.en{
		display: block;
		font-size: 26px;
	}
	body.style #main .commentArea .txt h4{

	}
}



/*　style　クーポン*/
body.style #main .couponArea{
    background: #fff;
	width: 100%;
    border-radius: 10px;
	color: #666;
	clear: both;
	display: block;
}
body.style #main .couponArea p.coupon_target{
    width: 98.2%;
	background: #333;
    text-align: center;
    padding: 1%;
    border-radius: 10px 10px 0 0;
	color: #fff;
    font-size: 1.6rem;
	margin: 0;
}
body.style #main .couponArea .couponContent{
	padding: 20px 0;
    width: 94%;
    margin: 0 auto;
}
body.style #main .couponArea .couponContent .txt{
    width: 100%;	
	display: inline-block;
	vertical-align:middle;
    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 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;
	margin-right: 3px;
	background-color: #c5b790;
}
body.style #main .couponArea .couponContent .txt a{
    color: #333;
	background: #eee;
}
body.style #main .couponArea .couponContent .txt a:hover{
	color: #fff;
	background: #bb1668;
}

@media only screen and (max-width: 1024px){
	body.style #main .couponArea{

	}
	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 .txt{
		padding: 0;
		width: 61%;
    	vertical-align: top;
	}
	body.style #main .couponArea .couponContent .img p{
		line-height: 12px;
		margin-left: 0;
	}
}
@media only screen and (max-width: 768px){
	body.style #main .couponArea .couponContent .img{
		position: relative;

	}
	body.style #main .couponArea .couponContent .img img{

	}

}
@media only screen and (max-width: 425px){
	body.style #main .couponArea .couponContent .img{
		width: 100%;
	}
	body.style #main .couponArea .couponContent .txt{
		width: 100%;
		padding: 0;
    	margin: 0;
	}
	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　クーポンここまで*/

/*=============================================================*/
/*=====================　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 #content{
	display: block;
}

body.gallery #sub{
	width: 26%;
    float: right;
}


body.gallery #content #main{
	float: left;
    width: 71%;
	margin-bottom: 50px;
}
body.gallery #main h2{
	width: 100%;
	border-bottom: solid 3px #981336;
	margin-bottom: 10px;
    padding-bottom: 10px;
    font-size: 16px;
}
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;
	line-height: 0;
}
body.gallery #main .sect02 ul.wrapper li a.img{
	width: 100%;
	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 0 1%!important;
	width: 49.5%!important;

}
body.gallery #main .sect02 ul.wrapper li:hover{

}

body.gallery #main .sect02 ul.wrapper li:nth-child(odd){
	margin-right: 1%!important;	
}
body.gallery #main .sect02 ul.wrapper a .colListItem_lineWrap{
	height: 74%;
}
body.gallery #main .sect02 .titleArea{
	margin: 0 auto 10px;
}
body.gallery #main p.gallery_p{
	color: #333;
	font-size: 1.8rem;
    border-bottom: solid 1px;
    padding-bottom: 10px;
	padding-left: 10px;
}

body.gallery #main p.lightbox-title{
	display: none;
}
@media only screen and (max-width: 1024px){
	body.gallery #content{
	}
	body.gallery #sub{
		width: 100%;
		float: none;
		clear: both;
	}
	body.gallery #content #main {
		width: 100%;
		margin: 10px auto 50px;
		float: none;
		clear: both;
	}
}
@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;
}
body.voice #main .pickUp{
	border: solid 3px #981336;
}

body.voice #main .voiceBox .voiceInner{
	width: 66%;
	display: inline-block;
    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;
	width: 31%;
}
body.voice #main .voiceBox .reply{
    padding: 30px 0 0 0;
	margin-bottom: 0;
	width: 100%;
}

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%;
	}
	body.voice #main .voiceBox.pickUp .voiceInner{

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

body.faq #content{
}
body.faq #content #main{

    width: 71%;
}
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 .sect .titleArea h3 span.jp{
	color: #333;
}
body.faq #main .styleBox{
	margin: 0 auto;
}

div.accordion > ul > li > a{
	background: rgba(175, 157, 124, 0.8);
}

@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%;
	}
}
/*=============================================================*/
/*==================== blog =========================================*/

body.blog #main .couponArea,
body.news #main .couponArea{
	width: 100%;
}

body.blog #main .couponArea .couponContent,
body.news #main .couponArea .couponContent{
	width: 96%;
	padding: 2%;
    border-bottom: solid 1px #ddd;
}
body.blog #main .couponArea .couponContent .txt,
body.news #main .couponArea .couponContent .txt{
	width: 78%;
	margin-left: 2%;
	font-size: 12px;
}
body.blog #main .couponArea .couponContent .txt h5,
body.news #main .couponArea .couponContent .txt h5{
	font-size: 15px;
}
body.blog #main .couponArea .couponContent .txt a,
body.news #main .couponArea .couponContent .txt a{
	text-decoration: none;
	position: relative;
}
body.blog #main .couponArea .couponContent .txt a.more,
body.news #main .couponArea .couponContent .txt a.more{
	display: block;
    border: solid 1px #981336;
    padding: 5px;
    width: 100px;
    text-align: center;
    margin-right: 0;
    margin-left: auto;
    margin-top: 10px;
}
body.blog #main .couponArea .couponContent .txt a.more:hover,
body.news #main .couponArea .couponContent .txt a.more:hover{
	opacity: 1;
	background: #981336;
}
body.blog #main .couponArea .couponContent .txt a.more span,
body.news #main .couponArea .couponContent .txt a.more span{
	-webkit-transition: all .6s ease;
    -moz-transition: all .6s ease;
    -ms-transition: all .6s ease;
    -o-transition: all .6s ease;
    transition: all .6s ease;
	color: #981336;
	position: relative;
}
body.blog #main .couponArea .couponContent .txt a.more:hover span,
body.news #main .couponArea .couponContent .txt a.more:hover span{
	color: #fff;	
}

body.blog #main .couponArea .couponContent a.bloglist_img,
body.news #main .couponArea .couponContent a.newslist_img{
	width: 20%;
}
body.blog #main .couponArea .couponContent a.img img,
body.news #main .couponArea .couponContent a.img img{
    width: 100%;
    height: auto;
	margin: 0 auto;
}

body.blog #main .sect,
body.news #main .sect{
	width: 100%;
}
body.blog #main .sect .titleArea,
body.news #main .sect .titleArea{
    border-bottom: solid 3px #981336;
}

body.news #main .couponArea .couponContent .txt ul li,
body.news #main .sect .wrapper li,
body.coupon #main .result .couponArea .couponContent .txt ul li,
body.blog #main .couponArea .couponContent .txt ul li,
body.blog #main .sect .wrapper li{
	padding: 4px 8px;
	margin-bottom: 10px;
	background: #888;
}
body.blog #main .couponArea .couponContent .txt ul li,
body.news #main .couponArea .couponContent .txt ul li{
    margin-bottom: 0px;
}

body.blog #main .newsTime,
body.news #main .newsTime{
	font-size: 12px!important;
}
body.blog #main .couponArea .couponContent .txt p.couponDetail{
	font-size: 13px;	
}
body.blog #main .couponArea .couponContent .txt a.postUser{
    color: rgba(175, 157, 124, 0.8);
}


@media only screen and (max-width: 1024px){
	body.blog #main .sect,
	body.news #main .sect{
			padding: 0;
	}
	body.blog #main .couponArea .couponContent,
	body.news #main .couponArea .couponContent{
		display: block;
		width: 100%;
		box-sizing: border-box;
	    padding: 10px 2%;
		margin-bottom: 10px;
	}
	body.blog #main .couponArea .couponContent .bloglist_img,
	body.news #main .couponArea .couponContent .newslist_img{
		display: inline-block;
		width: 19%;
		vertical-align: top;
	}
	body.blog #main .couponArea .couponContent .txt,
	body.news #main .couponArea .couponContent .txt{
		display: inline-block;
		vertical-align: top;
	}
	body.blog #main .couponArea .couponContent .img,
	body.news #main .couponArea .couponContent .img{
		width: 100%;
		margin: 0;
	}
	body.blog #main .couponArea .couponContent .txt a.more,
	body.news #main .couponArea .couponContent .txt a.more{
	    padding: 2px 0;
	}
	body.blog #main .couponArea .couponContent .txt ul li,
	body.news #main .couponArea .couponContent .txt ul li{
		margin: 0;
	}
}
/*=============================================================*/
/*============= access ================================================*/
/*
★を追加
                <div class="titleArea clearfix">
                    <h3>
                        <span class="en">shop date</span><br>
                        <span class="jp">店舗情報</span>
                    </h3>
                </div>
                <p class="shopname">{self.name}</p>★
                <p>{self.address}</p>
                <p>TEL：<a href="tel:{self.tel}">{self.tel}</a></p>
*/
body.access #content #main{
	margin: 0 auto;
	padding: 0;
}

body.access section .shopdate .titleArea{
	border-bottom: none;
	position: relative;
	margin: 0 auto 8px;
}
body.access #main .shopdate h3{
    line-height: 18px;
}
body.access #main .shopdate h3::before{
	content: "";
    border-bottom: solid 1px #333;
    width: 200px;
    height: 1px;
    position: absolute;
    top: 14px;
    left: 36px;
}
body.access #main .shopdate p{
	margin-bottom: 2px;
}
body.access #main .shopdate p.shopname{
	font-size: 16px;
	font-weight: bold;
    border-bottom: solid 3px #981336;
    margin-bottom: 6px;
    padding: 2px;
}

body.access #main .shopdate a{
	color: #981336;
}

body.access #main .shopdate table{
	margin-top: 10px;
}

@media only screen and (max-width: 1024px){
	body.access #main section{
		margin: 0 auto;
	}	
	body.access #main section .shopImg img{
		margin: 0 auto 20px;
	}
	body.access #main .shopdate{
		margin: 0 auto 20px;
	}
}
/*=============================================================*/
/*=============== sitemap ==============================================*/
body.sitemap #main .shopdate ul a{
	text-decoration: none;
}
.main_page_link li{
    border-bottom: 1px solid #981336;
}
/*=============================================================*/
/*================ privacy =============================================*/
body.privacy section .shopdate .titleArea{
	border-bottom: solid 1px #981336;
}
/*=============================================================*/
/*=====================　contact　========================*/


body.contact #main .input .btn input#btnConfirm{
	background: #981336;
}
body.contact #main .confirm .btn{
	margin: 0 auto;
}
body.contact #main .confirm .btn input#btnSend{
	background-color: #981336;	
}
body.contact #main .btn input{
	display: inline-block;
}

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

/*=============================================================*/
/*=============================================================*/
/*=============================================================*/
/*================== title more　デザイン ====================================*/
/*  stylist&style 詳細　title more ここから*/

body.stylist #main .stylistBox .txtInfo .blogArea .titleArea,
body.stylist #main .sect02 .titleArea,
body.style #main .sect02 .titleArea{
	border-bottom: none;
	position: relative;
	border-bottom: solid 1px #eee;
	
}
body.stylist #main .stylistBox .txtInfo .blogArea .titleArea a,
body.stylist #main .sect02 .titleArea a,
body.style #main .sect02 .titleArea a{
	text-decoration: none;
	border: solid 1px #981336;
	padding: 10px 6px;
    font-size: 1.4rem;
	color: #981336;
    margin: -10px 0 5px;
}
body.stylist #main .stylistBox .txtInfo .blogArea .titleArea a:hover,
body.stylist #main .sect02 .titleArea a:hover,
body.style #main .sect02 .titleArea a:hover{
	background: #981336;
	color: #fff;
	opacity: 1;
}
body.stylist #main .stylistBox .txtInfo .blogArea .titleArea a span,
body.stylist #main .sect02 .titleArea a span,
body.style #main .sect02 .titleArea a span{
	background: none;
	padding-right: 0;
}
body.stylist #main .stylistBox .txtInfo .blogArea .titleArea h3,
body.stylist #main .sect02 .titleArea h3,
body.style #main .sect02 .titleArea h3{
    line-height: 20px;
	color: #981336;
}
body.stylist #main .stylistBox .txtInfo .blogArea .titleArea h3::before, body.stylist #main .sect02 .titleArea h3::before,
body.style #main .sect02 .titleArea h3::before{
	content: "";
    width: 30px;
    height: 30px;
    position: absolute;
    top: -15px;
    left: -15px;
    background: #eee;
    z-index: -1;
}

body.stylist #main .sect02 .titleArea h3 span.jp,
body.stylist #main .stylistBox .txtInfo .blogArea .titleArea h3 span.jp,
body.style #main .sect02 .titleArea h3 span.jp{

}
/*スタッフ　タイトル　ブログ＆スタイル　ここまで*/
/*==================================================================*/
/*================== パンくずリスト ====================================*/


.breadcrumb {
  margin-left: 0;
  padding-left: 0;
  width: 94%;
	max-width: 1200px;
	margin: 10px auto ;
}

.breadcrumb li{
  display:inline-block;/*横に並ぶように*/
  list-style: none;
	vertical-align: top;
    margin-bottom: 5px;
}

.breadcrumb li:after{/* ▶を表示*/
  content: '>';
  padding: 0 3px;
  color: #333;
}

.breadcrumb li:last-child:after{
  content: '';
}

.breadcrumb li a {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 15px;
    text-decoration: none;
    color: #888;
    font-size: 12px;
	border: solid 1px #888;
}

.breadcrumb li a:hover {
    color: #f5f3ef;
	background: #981336;
	border: solid 1px #981336;
	opacity: 1;
}
@media only screen and (max-width: 1024px){
	.breadcrumb{
	    margin: 0px auto;
	}	
}


/*==================================================================*/
/*================== 全てのタイトル背景 ====================================*/


body.top section.sect .titleArea h2::before,
#sub #subStyle .titleArea p::before,
#sub #subBlog .titleArea p::before,
#sub #subNews .titleArea p::before{
	content: "";
	width: 30px;
	height: 30px;
	position: absolute;
	top:-5px;
	left: -12px;
	background: #eee;
    z-index: -1;
}
body.menu #main .sect .titleArea h3::before{
    content: "";
    width: 40px;
    height: 40px;
    position: absolute;
    top: -5px;
    left: -15px;
    background: #eee;
    z-index: -1;
}

@media only screen and (max-width: 1024px){
	body.top section.sect .titleArea h2::before,
	#sub #subStyle .titleArea p::before,
	#sub #subBlog .titleArea p::before,
	#sub #subNews .titleArea p::before{
		width: 25px;
		height: 25px;
		top: -3px;
		left: 0px;
	}	
	body.menu #main .sect .titleArea h3::before{
		width: 25px;
		height: 25px;
		top: 0;
    	left: 0;	
	}
}

@media only screen and (max-width: 425px){
	body.top section.sect .titleArea h2::before,
	#sub #subStyle .titleArea p::before,
	#sub #subBlog .titleArea p::before,
	#sub #subNews .titleArea p::before{
		width: 20px;
		height: 20px;

	}	
}
/*==================================================================*/
/*================== top banner ====================================*/
/*-------top blog ここまで-------*/
/*------- ここから-------*/