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

.wf-notosansjapanese { font-family: "Noto Sans Japanese"; }

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: 'Libre Baskerville', serif;
    letter-spacing: -0.7px;
	font-size: 28px;
}

nav.Nav li a{
	font-family: 'Libre Baskerville', serif;
    letter-spacing: -0.7px;
}

body.lower #pageTitleArea h1 span{
	font-family: 'Libre Baskerville', serif;
    letter-spacing: -0.7px;
}
footer #footerInner #footerNav ul li a{
	font-family: 'Libre Baskerville', serif;
    letter-spacing: -0.7px;
}
/*sub*/
#sub .subBox .titleArea p span.en{
	font-family: 'Libre Baskerville', serif;
    letter-spacing: -0.7px;
	font-weight: normal;
	font-size: 26px;
}
/*sub style カテゴリ*/
#sub-style .subBox .titleArea p span.en{
	font-family: 'Libre Baskerville', serif;
    letter-spacing: -0.7px;
	font-weight: normal;
	font-size: 26px;
}
/*sub blog カテゴリ メイン下*/
#sidebar .subBox .titleArea p span.en{
	font-family: 'Libre Baskerville', serif;
    letter-spacing: .11em;
    letter-spacing: -0.7px;
}

/*stylist*/
body.stylist .sect02 h2,
body.stylist #main .stylistBox .txtInfo .blogArea .titleArea h3 span.en,
body.stylist #main .sect02 .titleArea h3 span.en{
	font-family: 'Libre Baskerville', serif;
    letter-spacing: -0.7px;
	font-size: 26px;

}
/*coupon*/
body.coupon #main section.sect01 .titleArea h3 span.en{
	font-family: 'Libre Baskerville', serif;
    letter-spacing: -0.7px;

}
/*style　タイトル*/
body.style #main .sect02 .titleArea h3 span.en{
	font-family: 'Libre Baskerville', serif;
    letter-spacing: -0.7px;
	font-size: 26px;
}
/*access タイトル*/
body.access #main .shopdate h3 span.en{
	font-family: 'Libre Baskerville', serif;
    letter-spacing: -0.7px;
	font-size: 26px;
}

/*.blog 一覧日付*/
body.blog #main p.newsTime01{
	font-family: 'Libre Baskerville', serif;
    letter-spacing: -0.7px;
}
/*body.top media */
body.top #main section.sect ul.wrapper li a.txt p.top_media{
	font-family: 'Libre Baskerville', serif;
    letter-spacing: -0.7px;
}
/*body.top blog 日付*/
body.top #main section.sect ul.wrapper li a.txt p.top_blog{
	font-family: 'Libre Baskerville', serif;
    letter-spacing: -0.7px;
}	


/*日本語*/
body.top h1{
	font-family:  "Noto Sans Japanese";
	font-weight: lighter;
}
body.top section.sect .titleArea h2 span.jp{
	font-family:  "Noto Sans Japanese";
	display: none;
}
/*menu*/
body.menu #main .sect .titleArea h3 span.en{
	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{
	font-family:  "Noto Sans Japanese";		
}


/*stylist*/
@media only screen and (max-width: 1024px){
	body.stylist #main .stylistBox .txtInfo .blogArea .titleArea h3 span.jp,
	body.stylist #main .sect02 .titleArea h3 span.jp,
	body.style #main .sect02 .titleArea h3 span.jp,
	body.stylist #main .stylistBox .txtInfo .blogArea .titleArea a,
	body.stylist #main .sect02 .titleArea a span,
	body.style #main .sect02 .titleArea a{
		font-family:  "Noto Sans Japanese";		
	}
}
/*=============================================================*/
/*=====================　allページ　========================*/
img{
	width: 100%;
}
/*=============================================================*/
/*=====================　各ページ　header　========================*/
/*スマホ時に下に予約ボタン
ヘッダーに★部分を変更

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


*/
.decoline{
	position: fixed;
    height: 100%;
    border-left: solid 1px #df6e00;
    width: 1px;
    left: 30px;
	z-index: 60;

}

header{
	border-top:none;
    position: relative;
    background:none;
    width: 100%;
    height: 95px;
    z-index: 1;
    top: 0;
	text-align: right;
}
header #headerInner{
    width: 100%;
	padding: 0;
	max-width: 1920px;
	display: block;
}
header #headerInner ul.pcBtn{
    position: fixed;
    bottom: 0px;
	width: 140px;
    margin: 0 10px 40px 0;
}
header #headerInner ul.pcBtn li.reserve a{
	background: none;
	color: #fff;
	padding: 30px 0;
    text-decoration: none;
	background:rgba(51, 51, 51, 0.76);
	font-size: 15px;

}
header #headerInner ul.pcBtn li.reserve a:hover{
	background: rgba(175, 157, 124, 0.9);
	opacity: 1;
}
#headerInner ul.snsBtn{
	position: fixed;
	top: 50%;
	right: 0;
	z-index: 50;
}

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

.Nav{
	top:0px;
    z-index: 100;
	position: absolute;
    width: 100%;
	max-width: 1920px;
}
.Nav > ul{
	text-align: right;
	position: relative;
    border-bottom: solid 1px;
    width: 651.5px;
    margin-right: 0;
}
.Nav > ul > li{
	top:2px;
}
.Nav > ul > li a{
    padding: 5px 12px;
	border-bottom: solid 4px rgba(175, 157, 124, 0);
	background: none;
}
.Nav > ul > li a:hover{
    color: rgba(175, 157, 124, 0.9);
    opacity: 1;
	border-bottom: solid 4px rgba(175, 157, 124, 0.9);
}
.Nav > ul > li > ul{
	top:auto;
}

.Nav .logoArea{
	position: relative;
    left: 0;
    top: 0px;
	margin:20px 0 -50px 20px;
	width: 300px;

}
body.top .Nav{
    top:-50px;
}
body.top .Nav .logoArea{
	position: relative;
    left: 0;
    top: 600px;
	margin: 0px 0 0 0px;
	width: 500px;

}
.Nav .logoArea a.logo{

}
@media only screen and (max-width: 1200px){
	body.top .Nav .logoArea{
		top:500px;
	}
}

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

.is-show,body.top .is-show {
    transform: translateY(0);
}
.clone-nav .logoArea,body.top .clone-nav .logoArea{
	width: 170px;
    top: 0;
    margin: 10px 0 -25px 10px;
}

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

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

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

	}
}
@media only screen and (max-width: 1024px){
	.Nav,body.top .Nav{
		top: 0;
		width:100%;
		right: 0;
	    position: fixed;
	}
	.Nav .navbtn{
		right: 10px;
	    z-index: 1000;
		top: 5px;
	}
	.Nav .navbtn a, .Nav .navbtn a.close{
		background-color: #fff;

	}
	.Nav .navbtn a::before, .Nav .navbtn a.close::before{
		background: #333;
	}
	.Nav .navbtn a span::after, .Nav .navbtn a.close span::after{
		background: #333;
	}
	.Nav .navbtn a::after, .Nav .navbtn a.close::after{
		background: #333;
	}
	.Nav > ul{
	    z-index: 100;
	    top: 0px;
		position: relative;
	    padding: 40px 20px 20px;
		text-align: left;
	    width: 30%;
    	float: right;
	    background: #333;
	}
	body.top .Nav ul{
	    top: 0px;
	}
	.Nav .logoArea,
	body.top .Nav .logoArea{
	    top: 0;
    	position: absolute;
		width: 180px;
		margin: 12px 0 0 10px;
		left: 0px;
	}
	header{
	    height: 52px;
	    position: fixed;
		background: #fff;
		z-index: 50;
	}
	header #headerInner ul.spReserve{
	    margin: 0 auto;
	    width: 100%;
    	padding: 0;
	    position: fixed;
		bottom: 0;
	    background: #333;
	    border-top: solid 8px #333;
	    border-bottom: solid 8px #333;
	}
	header #headerInner ul.spReserve li{
		width: 50%;
	}
	header #headerInner ul.spReserve li:nth-child(2){
	    border-left: dotted 1px #fff;
	}
	header #headerInner ul.spReserve li 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;	
	}
	#headerInner ul.snsBtn{
	    top: 0px;
		right: 60px;
		margin-bottom: 0;
		margin-top: 8px;
	}
	#headerInner ul.snsBtn li{
		display: inline-block;
		margin-bottom: 0;
		vertical-align: middle;
		width: 45px;
	}
	
	.Nav > ul > li{
		width: 100%;
	    border-bottom: dotted 1px #fff;
	}
	.Nav > ul > li > ul{
		background-color:#333;
	}
	.Nav > ul > li a{
		padding: 8px 10px;
	    background: none;
    	color: #fff;
		border-bottom: none;
	}
	.Nav > ul > li a:hover{
		border-bottom: none;
	}
	.Nav > ul > li > ul li a{
		border-bottom: dotted 1px #fff;
		background-color: #444;
	}
	.Nav > ul > li > ul li a:hover{
		background-color: #111;
	}
	.Nav ul.close{
		width: 30%;
		padding: 40px 20px 20px;
		border: none;
	}
	.decoline{
		left: 20px;
		top: auto;
		bottom: 46px;
	    z-index: 60;
	}
	.Nav > ul > li > ul{
		background: #333;
	}
}
@media only screen and (max-width: 600px){
	.decoline{
		left: 12px;
	}
}
@media only screen and (max-width: 425px){
	header{
		height: 49px;
	}
	header #headerInner .logoArea{
	    margin: 11px 0 0 11px;
	}
	header #headerInner .logoArea a.logo{
	    width: 100px;
	}
	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 #footerInner #footerNav ul li a{
	
}


footer{
	background: #222;
    padding:  0;
}
#footerInner{
	width: 98%;
	padding: 1%;	
}
footer #footerInner #footerNav ul{
	width: 100%;
}
footer #footerInner #footerContent{
	width: 100%;
	display: block;
}
footer #footerInner #footerPolicy{
	background: none;
	padding: 0;
}
footer #footerInner #footerPolicy ul{
	margin: 0;
}
footer #footerInner #footerContent #footerInfo{
	width: 60%;
	margin: 0 auto;
}
footer #footerInner #footerContent #footerInfo #footerLogo{
    width: 100%;
    margin: 0 auto 10px;
	display: block;
}
footer #footerInner #footerContent #footerInfo #footerLogo a{
    width: 300px;
    height: auto;
    margin: 30px auto 10px;
    text-align: center;
}
footer #footerInner #footerContent #footerInfo #footerLogo p{
    width: 100%;
    margin: 0;
	text-align: center;
}
footer #footerInner #footerContent #footerInfo .txtInfo{
	display: inline-block;
	width: 100%;
	text-align: center;
}
footer #footerInner #footerContent .businessHourWrapper{
	display: inline-block;
	width: 50%;
	display: block;
	margin: 30px auto;
}
.businessHourWrapper .businessHour,.finalAcceptance,.finalAcceptance{
	width: 32%;
	display: inline-block;
	text-align: center;
	vertical-align: top;
}
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: 100%;
	max-width: 800px;
}
footer #footerInner #footerContent #footerLink ul.actionBtn{
	width: 100%;
	display: flex;
    justify-content: space-between;
}
footer #footerInner #footerContent #footerLink ul.actionBtn li{
	width: 23%;
	border: solid 2px #fff;
	height: auto;
	margin: 0;
	box-sizing: border-box;
}
footer #footerInner #footerContent #footerLink ul.actionBtn li.recruit,
footer #footerInner #footerContent #footerLink ul.actionBtn li.reserve,
footer #footerInner #footerContent #footerLink ul.actionBtn li.contact{
	background: none;
	margin: 0;
}
footer #footerInner #footerContent #footerLink ul.actionBtn li a{
	width: 100%;
	margin: 0 auto;
	height: auto;
    box-sizing: border-box;
    padding: 10px;
	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: #000;
	opacity: 1;
}
footer #footerInner #footerContent #footerLink ul.snsBtn{
	position: relative;
	bottom: 0;
	display: block;
	text-align: center;
}
footer #footerInner #footerContent #footerLink ul.snsBtn li{
	margin: 0;
    width: 10%;
    display: inline-block;
}
footer #footerInner #footerContent #footerLink ul.snsBtn li a img{
	height: 30px;
	width: 30px;
}

@media only screen and (max-width: 1024px){
	footer{
	    padding-bottom: 50px;
	}
	footer #footerInner #footerContent #footerLink{
		max-width: unset;
	}
	footer #footerInner #footerContent #footerInfo{
		width: 90%;
	}
	footer #footerInner #footerContent .businessHourWrapper{
		width: 90%;
	}
	footer #footerInner #footerContent #footerLink ul.snsBtn{
	    width: 100%;
	}
	footer #footerInner #footerContent #footerInfo #footerLogo a{
		display: block;
		width: 200px;
	}
	footer #footerInner #footerContent #footerInfo .txtInfo{
		width: 100%;
	}
	footer #footerInner #footerContent #footerInfo #footerLogo p.salonName{
		font-size: 18px;
		margin: 0px auto;
	}
	
}
@media only screen and (max-width: 768px){
	footer #footerInner #footerContent #footerLink{
		width: 100%;
	}
	footer #footerInner #footerContent #footerLink ul.actionBtn{
		flex-wrap: wrap;
	}
	footer #footerInner #footerContent #footerLink ul.actionBtn li{
	    width: 49%;
	}
	footer #footerInner #footerContent #footerLink ul.actionBtn li.recruit,
	footer #footerInner #footerContent #footerLink ul.actionBtn li.reserve,
	footer #footerInner #footerContent #footerLink ul.actionBtn li.contact{
	    margin: 0 0 1%;
	}
}
@media only screen and (max-width: 425px){
	.businessHourWrapper .businessHour, .finalAcceptance, .finalAcceptance{
		width: 100%;
		display: block;
	}	
}


/*=============================================================*/
/*=====================　各ページ　content　========================*/
body.lower #content{
	width: 94%;
    max-width: 1400px;
	margin: 0px auto 50px;
	z-index: 0;
}
body.lower #content #main{
	width: 100%;
	padding: 0%;
}
body.lower.onecolumn #content #main{
	width: 100%;
	padding: 0%;
}
#main{
	width: 100%;
	padding: 0%;
}
@media only screen and (max-width: 1024px){
	body.lower #content{
		width: 96%;
		padding: 0 16px;
    	box-sizing: border-box;
	}
	#content{
		padding: 0 16px;
    	box-sizing: border-box;
	}
	body.lower #content #main{
		margin-bottom: 20px;
	}
}
@media only screen and (max-width: 768px){
	body.lower #content{
		margin: 0px auto 30px;
	}
}
@media only screen and (max-width: 425px){
	body.lower #content{

	}
}
    
/*=============================================================*/
/*=====================　各ページタイトル　========================*/
body.lower #pageTitleArea{
	margin-top: 30px;
	margin-bottom: 0;
	background: none;
	height: auto;
	padding: 0;
	z-index: 50;
	max-width: 1920px;
	/*
	background-image: linear-gradient(
	-45deg,
	#fff 25%,
	#ebebeb 25%,
	#ebebeb 50%,
	#fff 50%,
	#fff 75%,
	#ebebeb 75%,
	#ebebeb
);
background-size: 30px 30px;
background-attachment: fixed;
	
	*/
	
	
}
body.lower #pageTitleArea h1{
	margin-top: 20px;
}
body.lower #pageTitleArea h1 span{
    font-size: 12.0rem;
	text-align: left;
	margin: 0;
}
body.lower #pageTitleArea p{
    margin: -3% 0 1px 10%;
    font-size: 16px;
}

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


	}
	body.lower #pageTitleArea h1 span{
		font-size: 14rem;
	}
	body.lower #pageTitleArea h1{
		margin-top: 0px;
	}
}

@media only screen and (max-width: 1024px){
	body.lower #pageTitleArea{
		margin-top: 100px;
		margin-bottom: 20px;
	}

	body.lower #pageTitleArea h1{

	}
	body.lower #pageTitleArea h1 span{
		font-size: 8rem;
		letter-spacing: 1px;

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

	}
	body.lower #pageTitleArea h1 span{
		font-size: 6rem;
	}
}
@media only screen and (max-width: 425px){
	body.lower #pageTitleArea h1 span{
	    font-size: 4.0rem;
	    letter-spacing: -0.5px;
	}
	body.lower #pageTitleArea p{
		text-align: center;
		margin: -3% 0 0;
	}
}

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


#sub .subBox{
	padding: 0;
}

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

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

/* #sub category */
#sub #subCategory,#sub #subFaq{
    background: #3f3f3f;
	position: relative;
    padding: 30px 8%;
    border-radius: 10px;
}
#sub #subCategory .titleArea,#sub #subFaq .titleArea{
	border: none;
	position: relative;
	width: 100%;
    border-radius: 10px;
    margin: 10px auto 20px;
    left: 0;
    top: 0;
}
#sub #subCategory .titleArea p,#sub #subFaq .titleArea p{
	color: #fff;
    padding: 0;
}
#sub #subCategory ul,#sub #subFaq ul{
    padding: 0;
	margin: 0;
}
#sub #subCategory ul li a,#sub #subFaq ul li a{
	color: #fff;
	border-bottom: dotted 1px ;
}


/* #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: 0;
}

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

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

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


/* #sub Search  */

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

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

	}
	#sub #subStyle ul.wrapper li{
		width: 25%;
	}
}
@media only screen and (max-width: 425px){
	#sub .subBox .wrapper article{
		width: 96%;
		margin-right: 0;
	}
}

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

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

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

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

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

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

*/


body.stylist #content{

	
}
body.stylist #content #main{
	background: #f3f3f3;
	width: 96%;
    padding: 2%;
}

body.stylist #main .stylistBox .visualInfo{
	width: 47%;
}
body.stylist #main .stylistBox .visualInfo .photo{
    width: 100%;
}
body.stylist #main .stylistBox .visualInfo .photo img{
	width: 100%;
}
body.stylist #main .stylistBox .visualInfo .calendar .calendarInner{
	border: 1px solid #868582;
}
body.stylist #main .stylistBox .visualInfo .calendar .calendarInner .month{
    background-color: #868582;
}




body.stylist #main .stylistBox .txtInfo{
	width: 50%;
	color: #666;
	position: relative;
}
body.stylist #main .stylistBox .txtInfo h2{
    font-size: 26px;
	color: #333;
	line-height: 0.8;
    margin: 16px 0;
}
body.stylist #main .stylistBox .txtInfo h2 span{
	margin-left: 0;
	font-size: 13px;
}
body.stylist #main .stylistBox .txtInfo p.job{
    font-size: 2.4rem;
	color: #333;
	margin-bottom: 16px;
}

body.stylist #main .stylistBox .txtInfo p.catch02{
	font-size: 20px;
    color: #fff;
     background: rgba(175, 157, 124, 0.9);
    width: 100%;
    padding: 3%;
    box-sizing: border-box;
    margin-bottom: 12px; 
}
body.stylist #main .stylistBox .txtInfo ul.sns{
    margin: 0 0 5px auto;
}
body.stylist #main .stylistBox .txtInfo ul.sns li{
    padding-left: 2px;
}
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%;
}
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 .titleArea{
	border-bottom: none;
}
body.stylist #main .stylistBox .txtInfo .blogArea .titleArea a{
	text-decoration: none;
}
body.stylist #main .stylistBox .txtInfo .blogArea .wrapper article ul li.author a{
	text-decoration: none;
}
body.stylist .sect02{
    margin: 0;
	position: relative;
}
body.stylist #main .sect02 .titleArea a{
	text-decoration: none;
}
body.stylist #main .stylistBox .txtInfo .blogArea .titleArea h3,body.stylist #main .stylistBox .txtInfo .blogArea .titleArea a,body.stylist #main .stylistBox .txtInfo .blogArea .wrapper article ul li.date a,body.stylist #main .stylistBox .txtInfo .blogArea .wrapper article ul li.author a,body.stylist #main .stylistBox .txtInfo .blogArea .wrapper article a.linkToArticle p,body.stylist #main .sect02 .titleArea h3{
	color: #333;	
}
body.stylist #main .sect02 .titleArea{
	border-bottom: none;
    margin: 50px auto 20px;
}

body.stylist #main .sect02 ul.wrapper{
	width: 100%;
}
body.stylist #main .sect02 ul.wrapper li{
	margin: 0;
    width: 33%;
    float: none;
    display: inline-block;

	position: relative;
	vertical-align: top;
}
body.stylist #main .sect03 ul.wrapper li:nth-child(3n+2){
    margin: 0;
}
body.stylist #main .sect03 ul.wrapper li a.img{
    margin: 0;
}
body.stylist #main .sect03 ul.wrapper li a.img:hover,
body.style_details #main .sect02 ul.wrapper li a.img:hover{
	opacity: 1;
}
body.stylist #main .sect03 ul.wrapper li a.img img,
body.style_details #main .sect02 ul.wrapper li a.img 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;
    -webkit-filter: grayscale(0%);
    filter: grayscale(0%);
	/*
    box-shadow: 0px 0px 0px 0 rgba(0,0,0,0);
    -webkit-transform: translate3d(0, 0px, 0px);
    transform: translate3d(0, 0px, 0px);
	*/
}
body.stylist #main .sect03 ul.wrapper li a.img:hover img,
body.style_details #main .sect02 ul.wrapper li a.img:hover img{
    -webkit-filter: grayscale(100%) brightness(80%);
    filter: grayscale(100%) brightness(80%);
	/*
    box-shadow: 12px 21px 36px 0 rgba(0,0,0,.15);
    -webkit-transform: translate3d(0, -15px, 1px);
    transform: translate3d(0, -15px, 1px);
	*/
}

body.stylist #main .sect02 ul.wrapper li a.txt h3{
	position: absolute;
    bottom: 0;
    left: 0;
    color: #fff;
	margin: 0 10px;
}
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{

	}
	body.stylist #main .stylistBox .visualInfo .photo{
		margin: 0 auto 10px;
	}
	body.stylist #main .stylistBox .visualInfo .calendar{
		margin-bottom: 20px;
	}
	body.stylist #main .sect02 .titleArea{
		margin: 50px auto 0px;
	}
}
/* バグ回避 */
@media only screen and (max-width: 1024px){
	body.stylist #main .sect03 ul.wrapper li a.img img,
	body.style_details #main .sect02 ul.wrapper li a.img img,
	body.stylist #main .sect03 ul.wrapper li a.img:hover img,
	body.style_details #main .sect02 ul.wrapper li a.img:hover img{
		filter: none;
	}	
}
@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 .sect02{
		margin:  0 ;
	}
	body.stylist #main .sect02 ul.wrapper li a.txt h3,
	body.style_details #main .sect02 ul.wrapper li a.txt h3{
		display: none;
	}
}
/*　stylist　クーポン*/
body.stylist #main .couponArea{
    background: #fff;
	width: 100%;
    display: inline-block;
    margin: 0px auto 2%;
    vertical-align: top;
    border-radius: 10px;
	color: #666;
    max-width: 700px;
}

body.stylist #main .couponArea h4{
    width: 98%;
	background: #333;
    text-align: center;
    padding: 1%;
    border-radius: 10px 10px 0 0;
	margin-bottom: 0;
}
body.stylist #main .couponArea .couponContent{
	padding: 5%;
    width: 90%;
}
body.stylist #main .couponArea .couponContent .txt{
    width: 61.3%;
    display: inline-block;
    vertical-align: top;
}
body.stylist #main .couponArea .couponContent .img{
	width: 36%;
	display: inline-block;
}
body.stylist #main .couponArea .couponContent .img img{
	width: 100%;
}
body.stylist #main .couponArea .couponContent .txt p.price{
    font-size: 2.5rem;
	
}
body.stylist #main .couponArea .couponContent .txt p.couponDetail{
	border-top: dotted 1px;
    padding-top: 10px
}
body.stylist #main .couponArea .couponContent .txt ul li{
	margin-bottom: 3px;
	background-color: #c5b790;
}
.wrapper{
	margin-bottom: 0;
}
body.stylist #main .couponArea .couponContent .txt a{
	border: double;
    color: #333;
	background: none;
}
body.stylist #main .couponArea .couponContent .txt a:hover{
	color: #fff;
	background: #bb1668;
}
@media only screen and (max-width: 1024px){
	body.stylist #main .couponArea .couponContent .img{
	    position: relative;
		width: 100%;
	}
	body.stylist #main .couponArea .couponContent .img img{
		display: block;
	    margin-bottom: 10px;
	}
	body.stylist #main .couponArea .couponContent .img p{
		margin-left: 0;
	}
	body.stylist #main .couponArea .couponContent .txt{
		width: 100%;
		padding: 0;
	}
	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{
		left: 50%;
    	margin-left: -350px;
	}
}

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


/*=============================================================*/
/*=====================　staff　一覧　========================*/
.wrapper_stylist{
	margin: 0 auto;
	padding-bottom: 100px;
	overflow: visible;
}
body.stylist .sect02 h2{
	position: absolute;
    top: 62px;
    font-weight: normal;
    font-size: 26px;
}
ul.wrapper_stylist li{
	margin: 0;
	position: relative;
	width: 25%;
}
ul.wrapper_stylist li:nth-child(3n){
    margin: 0px;
}
ul.wrapper_stylist li:nth-child(4n){
	margin: 0;
}
ul.wrapper_stylist li:nth-child(odd){
	margin-top: 100px;
}
ul.wrapper_stylist li a{
	opacity: 1;
}
body.stylist #main .sect02 ul.wrapper_stylist li a.img{
	width: 100%;

	
}
body.stylist #main .sect02 ul.wrapper_stylist li a.img img{
	width: 100%;
	padding-top: 0;
    margin-bottom: 0px!important;
    transition: all .5s cubic-bezier(.25, .46, .45, .94);
	-webkit-filter: grayscale(0);
  	filter: grayscale(0);
}
body.stylist #main .sect02 ul.wrapper_stylist li a.img img:hover{
	z-index: 10;

    box-shadow: 12px 21px 36px 0 rgba(0,0,0,.15);
    -webkit-transform: translate3d(0, -15px, 1px);
    transform: translate3d(0, -15px, 1px);
	-webkit-filter: grayscale(100%);
  	filter: grayscale(100%);
	opacity: 1;
    transition: all .22s cubic-bezier(.25, .46, .45, .94);
}
body.stylist #main .sect02 ul.wrapper_stylist li a.txt{
	text-align: center;
	 background: rgba(175, 157, 124, 0.9);
    width: 80%;
    position: relative;
	z-index: 10;
    padding: 10px;
	margin: -20px auto;
    box-sizing: border-box;
	display: block;
}
body.stylist #main .sect02 ul.wrapper_stylist li a.txt h3{
	margin: 0 0 5px;
    font-size: 18px;
    color: #fff;
    border-bottom: solid 1px;
	padding-bottom: 8px;
    font-weight: normal;
}
body.stylist #main .sect02 ul.wrapper_stylist li a.txt p{
	color: #fff;
    margin-bottom: 0;
	font-size: 1.0rem;
}
@media only screen and (max-width: 768px){
	ul.wrapper_stylist li{
		width: 49.5%;
	}

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


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


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

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

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

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


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

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

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

*/

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

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


body.style #main .sect02 ul.clearfix li a.img{
	width: 100%;
    margin: 0;
    transition: all .5s cubic-bezier(.25, .46, .45, .94);
	-webkit-filter: grayscale(0);
  	filter: grayscale(0);
}
body.style #main .sect02 ul.clearfix li a.img:hover{
    z-index: 10;
    box-shadow: 12px 21px 36px 0 rgba(0,0,0,.15);
    -webkit-transform: translate3d(0, -15px, 1px);
    transform: translate3d(0, -15px, 1px);
	-webkit-filter: grayscale(100%);
  	filter: grayscale(100%);
    opacity: 1;
    transition: all .22s cubic-bezier(.25, .46, .45, .94);
}

body.style #main .sect02 ul.clearfix li a.txt{
    position: relative;
    top: -55px;
    left: 0;
    width: 80%;
	z-index: 10;
}
body.style #main .sect02 ul.clearfix li a.txt h3{
	margin: 0;
    color: #fff;
    font-weight: normal;
    letter-spacing: 1px;
    line-height: 1.8;
	font-size: 12px;
     background: rgba(175, 157, 124, 0.9);
    padding: 5%;
	width: 60%;
}



.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: 1024px){
	body.style #main .sect02 ul.clearfix li a.img,
	body.style #main .sect02 ul.clearfix li a.img:hover{
		filter: none;
	}
}
@media only screen and (max-width: 768px){
	body.style .sect02{
		padding: 0;
	}
	body.style #main .sect02 ul.wrapper{
		margin: 10px 0;
	}
	body.style #main .sect02 ul.wrapper li{
		width: 50%;
		margin: 0;
	}
	body.style #main .sect02 ul.wrapper li:nth-child(3n+2){
		margin: 0;
	}
	body.style #main .sect02 ul.wrapper li:nth-child(5){
		margin: 0;
	}
	body.style #main .sect02 ul.wrapper_top li a.txt h3{
		font-size: 14px;
		line-height: 20px;
		letter-spacing: 1px;
		text-align: center;
	}
	body.style #main .sect02 ul.wrapper_top li a.img img{
		width: 45%;
	}
	body.style #main .sect02 ul.wrapper_top li a.txt p{
		display: none;
	}
	body.style #main .sect02 ul.clearfix li a.txt{
		display: none;
	}
	body.style #main .sect02 ul.clearfix li a.img{
		width: 100%;
	}
	body.style #main .sect02 ul.wrapper_top li a.txt{
		display: block;
	}
	
}


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

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

*/
body.style #content{
	position: relative;

}
body.style #content #main{
	padding: 0%;
}
body.style #content #main section.sect.styleBox{
	margin-top: 40px;
}

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

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

body.style #main .styleBox .txtInfo{
	width: 40%;
}
body.style #main .styleBox .txtInfo h2{
	font-size: 26px;
    position: relative;
    left: -16%;
    top: -39px;
    background: rgba(175, 157, 124, 0.9);
    padding: 8%;
    width: 100%;
    margin-bottom: -30px;
    color: #ffffff;
}
body.style #main .styleBox .txtInfo .box{
	background: #ffffff;
    border-radius: 10px;
    padding: 5%;
    color: #333;
}
body.style #main .styleBox .txtInfo .box p.styleTitle{
	padding: 10px;
    font-weight: bold;
    text-align: center;
    border-bottom: solid 5px #d7d7d7;
	
}
body.style #main .styleBox .txtInfo .box ul.clearfix{
	text-align: center;
}
.style-arrenge-point-title{
	border-bottom: solid 5px #d7d7d7;
    font-weight: bold;
    text-align: center;
}
body.stylist #main .stylistBox .txtInfo .career dl, body.style #main .styleBox .txtInfo .box dl{
	width: 100%;
    border-bottom: dotted 1px #d7d7d7;
}
.typeOn{
    background-color: rgba(175, 157, 124, 0.9);
}

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

body.style #main .commentArea .img{
	width: 100%;
}
body.style #main .commentArea .img a{
	font-size: 1.8rem;
	color: #fff;
    font-weight: bold;
    padding: 9px 0;
	 background: rgba(175, 157, 124, 0.9);
    position: absolute;
    left: 0;
    top: 0px;
	max-width: 1200px;
	margin: 0 auto;
    width: 100%;
	border-radius: 10px 10px 0 0;
	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: 15px 0 0 5%;
}
body.style #main .styleBox .txtInfo .box dl dt{
	width: 28%;
}
body.style #main .styleBox .txtInfo .box dl dd{
    width: 72%;
}

body.style #main .sect02 .titleArea{
	border-bottom:none;
	clear: both;
}

body.style #main .sect02 .titleArea a{
	text-decoration: none;
}

body.style #main .couponArea{
	clear: both;
	max-width: 700px;
}



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

body.style_details #main .sect02 ul.wrapper li a.img{
    margin: 0;
}
body.style_details #main .sect02 ul.wrapper li a.txt h3{
	position: absolute;
    bottom: 0;
    left: 0;
    color: #fff;
	margin: 0 10px;
}
body.style_details #main .sect02 ul.wrapper li a.txt p{
	display: none;
}
body.style #main .styleBox .txtInfo .box ul li{
	margin-right: 5px;
	margin-bottom: 5px;
}
@media only screen and (max-width: 1024px){
	body.style #content #main section.sect.styleBox{
		margin-top: 0;
	}
	body.style #main .styleBox{
		table-layout:fixed;
	}
	body.style #main .styleBox .txtInfo h2{
		width: 100%;
		box-sizing: border-box;
		top:0;
		left: 0;
		position: relative;
		margin-bottom: 40px;
    	padding: 40px 5%;
	}
	body.style #main .commentArea{
		width: 94%;
	}
	body.style #main .commentArea .img{
		width: 45%;
		display: inline-block;
	}
	body.style #main .commentArea .img a{
		text-decoration: none;
	}
	body.style #main .commentArea .img img{
		width: 100%;
		float: none;
	}
	body.style #main .commentArea .txt{
		width: 50%;
		display: inline-block;
		vertical-align: middle;
		margin: 15px 0 0 2%;
	}
	body.style #main .styleBox .txtInfo .box .recommend ul.clearfix{
		margin-bottom: 0;
	}
	
}
@media only screen and (max-width: 768px){
	body.style #main .styleBox .txtInfo h2{
		font-size: 28px;
	}
}
@media only screen and (max-width: 425px){
	body.style #main .styleBox .txtInfo h2{
		font-size: 26px;
    	padding: 20px 5%;
	}
	body.style #main .commentArea .txt h4{
		margin-top: 40px;
	}
}



/*　style　クーポン*/
body.style #main .couponArea{
    background: #fff;
	width: 100%;
    border-radius: 10px;
	color: #666;
}
body.style #main .couponArea p.coupon_target{
    width: 98.2%;
	background: #333;
    text-align: center;
    padding: 1%;
    border-radius: 10px 10px 0 0;
	position: absolute;
	color: #fff;
}
body.style #main .couponArea .couponContent{
	padding: 5%;
    width: 90%;
    margin-top: 20px;
}
body.style #main .couponArea .couponContent .txt{
    width: 61.3%;	
	display: inline-block;
	vertical-align: top;
}
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;
	background-color: #c5b790;
}
body.style #main .couponArea .couponContent .txt a{
	border: dotted 2px #333;
    color: #333;
	background: none;
}
body.style #main .couponArea .couponContent .txt a:hover{
	color: #fff;
	background: #bb1668;
	border: double 3px rgba(175, 157, 124, 0.9);
}

@media only screen and (max-width: 1024px){
	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 0 0 2%;
	}
	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%;
	}
	body.style #main .couponArea .couponContent .img p{
		line-height: 5px;
	}
}
@media only screen and (min-width: 769px){
	body.style #main .couponArea .couponContent .img{
		max-width: 200px;
	}
}

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



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

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

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

*/

.coupon form{
	background: #f3f3f3;
    padding: 2%;
    max-width: 1200px;
	margin: 0px auto 30px;
    border-radius: 10px;
}

body.coupon #main section.sect01 .titleArea{
	width: 100%;
    margin: 0 auto 20px;
    border-bottom: solid 5px #d7d7d7;
}
body.coupon #main section.sect01 .filterArea{
	background: none;
	width: 80%;
	padding: 0;
}
body.coupon #main section.sect01 .filterArea dl{
    width: 100%;
}
body.coupon #main section.sect01 .filterArea dl dd{
	padding: 0;
    margin: 0 5%;
    width: 90%;
	border-radius: 10px;
}
body.coupon #main section.sect01 .filterArea .btn button{
	border: solid 1px;
    color: #fff;
	background: #333;
}
body.coupon #main section.sect01 .filterArea .btn button:hover{
	color: #fff;
	background: #c5b790;
    opacity: 1;
}



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

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

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

body.coupon #main .result .couponArea .couponContent .txt a{
	border: dotted 2px;
    color: #333;
	background: none;
}
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;
}
@media only screen and (max-width: 1024px){
	body.coupon #main .result .couponArea .couponContent .img{
		width: 100%;
	}
	body.coupon #main .result .couponArea .couponContent .img img{
	    margin-bottom: 10px;
	}
	body.coupon #main .result .couponArea .couponContent .txt{
		width: 100%;
	}
	body.coupon #main .result .couponArea .couponContent .txt h5{
		font-size: 1.8rem;
    	margin: 20px auto 15px;
	}
}
@media only screen and (max-width: 520px){
	body.coupon #main .result .couponArea{
		width: 98%;
    	display: block;
	}
	body.coupon #main .result .couponArea .couponContent{
	    padding: 5%;
	}
	body.coupon #main .result .couponArea .couponContent .img img{
		margin-bottom: 0px;
	    vertical-align: top;
	}
	.coupon_show{
		width: 80%;
	    display: inline-block;
		vertical-align: middle;
	}
	body.coupon #main .result .couponArea .couponContent .txt p.price{
		margin-bottom: 10px;
	}
}

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

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


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


*/

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

body.menu #main .sect{
	width: 100%;
	margin-bottom: 0;
}
body.menu .shop_menubox {
    display: inline-block;
    vertical-align: top;
    width: 96%;
    margin: 0 0 36px 0;
	background: #f3f3f3;
    padding: 2%;
}
body.menu .shop_menubox:nth-child(odd){
	margin: 0 0 36px 0;
}
body.menu #main .sect .titleArea h3 {
    float: left;
    margin: -25px 0 0 10px;
    padding: 10px;
    width: auto;
    color: #fff;
    font-weight: normal;
    background: rgba(175, 157, 124, 0.9);
    box-sizing: border-box;
}

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

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

body.news #content {
    position: relative;
}
body.news #content #main{
	padding: 2%;
}
body.news #main .couponArea{
	width: 100%;
}
body.news #main .couponArea .couponContent{
    padding: 1%;
    width: 31%;
    display: inline-block;
	vertical-align: top;
    transition: all .22s cubic-bezier(.25, .46, .45, .94);
}
body.news #main .couponArea .couponContent:hover{
    box-shadow: 12px 21px 36px 0 rgba(0,0,0,.15);
    -webkit-transform: translate3d(0, -15px, 1px);
    transform: translate3d(0, -15px, 1px);
	
}
body.news #main .couponArea .couponContent .img{
    width: 100%;
}
body.news #main .couponArea .couponContent .img img{
	width: 100%;
    height: auto;
	margin: 0;
}
body.news #main .couponArea .couponContent .txt{
	width: 90%;
    padding: 5%;
    background: #fff;
}
body.news #main .newsTime{
    text-align: right;
}
body.news #main .couponArea .couponContent .txt .more{
	border: double 3px;
    padding: 5% 0;
    text-align: center;
    text-decoration: none;
    width: 80%;
    margin: 0 auto;
}
body.news #main .couponArea .couponContent .txt .more:hover{
	color: #fff;
	background: rgba(175, 157, 124, 0.9);
	border: double 3px rgba(175, 157, 124, 0.9);
}

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


/*=============================================================*/
/*=====================　news　詳細　========================*/
body.news #main .sect{
	width: 100%;
    padding: 0%;
}
body.news #main .sect .titleArea{
     background: rgba(175, 157, 124, 0.9);
    border: none;
    padding: 2%;
}
body.news #main .sect .titleArea h3{
    color: #fff;
    font-weight: bold;
    padding: 0;
}

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

	}	
}

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

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


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

*/


body.blog #content {
    position: relative;
    margin: 10px auto 50px;
}

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

body.blog #main .couponArea .couponContent .img{
    width: 100%;
    transition: all .22s cubic-bezier(.25, .46, .45, .94);
	-webkit-filter: grayscale(0);
  	filter: grayscale(0);
}
body.blog #main .couponArea .couponContent .img:hover{
	-webkit-filter: grayscale(100%);
  	filter: grayscale(100%);	
}
body.blog #main .couponArea .couponContent .img img{
	width: 100%;
    height: auto;
	margin: 0;
}
body.blog #main .couponArea .couponContent .img a:hover{
	opacity: 1;
}
body.blog #main .couponArea .couponContent .txt{
    width: 100%;
    padding: 20px;
    background: #fff;
    box-sizing: border-box;
}
body.blog #main .couponArea .couponContent .txt ul{
	margin-top: 0;
}

body.blog #main .newsTime{
	text-align: right;
    margin-bottom: 0px;
}
body.blog #main .newsTime .postUser{
    color: rgba(175, 157, 124, 0.9);
}
p.newsTime01{
	position: absolute;
	top: -20px;
    font-size: 40px;
    right: 0px;
}
body.blog #main .couponArea .couponContent .txt .more{
	text-align: left;
    text-decoration: none;
    margin: 20px auto 0;
    position: relative;
    top: 0px;
    float: none;
    width: 180px;
    padding: 0;
    display: block;
}
body.blog #main .couponArea .couponContent .txt .more:hover{
	opacity: 1;	
    animation-duration: 1s;
    animation-name: more_line;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    clip-path: polygon(0% 0%, 80% 0%, 80% 100%, 0% 100%);
}
body.blog #main .couponArea .couponContent .txt .more span{
    background: none;
    width: 100px;
    text-align: center;
    margin: 0;
    border: solid 1px;
    letter-spacing: 5px;
	position: relative;
    display: inline-block;
    padding: 10px;
    color: #000;
    text-decoration: none;
    outline: none;
    overflow: hidden;
    transition: all .5s;
	font-size: 12px;
}
body.blog #main .couponArea .couponContent .txt a.more:hover span{
	background-color: #000;
    color: #fff;
}
body.blog .more_line ,body.news .more_line{
    width: 141px;
    left: auto;
    top: 22px;
    right: 2px;
}
body.blog .arrow,body.news .arrow{
	top: 19px;
	right: 0;
}

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

	}
	body.blog .more_line{
	    width: 111px;
	}
	body.blog #main .couponArea .couponContent .txt .more{
	    width: 145px;
	}
	body.blog #main .couponArea .couponContent .txt .more span{
	    width: 90px;
	}
	body.blog .arrow{
	    right: 0;
	}
	p.newsTime01{
	    top: -16px;
	    font-size: 35px;
	}

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

}
@media only screen and (max-width: 425px){
	body.blog #main .couponArea .couponContent{

	}
	body.blog #main .couponArea .couponContent .txt{
		padding: 10px;
	}
	body.blog #main .couponArea .couponContent .txt p.couponDetail{
		display: none;
	}
	body.blog #main .couponArea .couponContent .txt h5{
		margin-bottom: 10px;
	}
	body.blog #main .couponArea .couponContent .txt .more{
		width: 114px;
	}
	body.blog #main .couponArea .couponContent .txt .more span{
		width: 40px;
		letter-spacing: 1px;
	}
	body.blog .more_line{
	    width: 97px;
	}
	p.newsTime01{
	    font-size: 30px;
	}
}

/*=============================================================*/
/*=====================　blog　詳細　========================*/

body.blog_details #content {

}
body.blog #main .sect{
	width: 100%;
    padding: 0;
}
body.blog #main .sect .titleArea{
     background: rgba(175, 157, 124, 0.9);
    border: none;

    padding: 2%;
}
body.blog #main .sect .titleArea h3{
    color: #fff;
    font-weight: bold;
    padding: 0;
}
body.blog #main .sect .wrapper li{
	background-color:rgba(175, 157, 124, 0.9);
}
body.blog #main .articleTxt{
    font-size: 14px;
}
/*=============================================================*/
/*=====================　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 {

}
body.gallery #main{
}
body.gallery #main h2{
	width: 100%;
	border-bottom: solid 5px #d7d7d7;
}
body.gallery #main a.gallery_menu{
    padding: 1%;
	color: #333;	
}
body.gallery #main a.gallery_menu:hover{
	background: #000;
	color: #fff;
	opacity: 1;
}
body.gallery #main .sect02 ul.wrapper a.lightbox-img{
    border: none;
	margin: 0;
}
body.gallery #main .sect02 ul.wrapper a:hover{
	opacity: 1;	
}
body.gallery #main .sect02 ul.wrapper{
	margin: 0 auto;
}
body.gallery #main .sect02 ul.wrapper li{
	margin: 0;
	width: 50%;
	transition: all .5s cubic-bezier(.25, .46, .45, .94);
	-webkit-filter: grayscale(0);
  	filter: grayscale(0);
	
}
body.gallery #main .sect02 ul.wrapper li:hover{
	box-shadow: 12px 21px 36px 0 rgba(0,0,0,.15);
    -webkit-transform: translate3d(0, -15px, 1px);
    transform: translate3d(0, -15px, 1px);
	-webkit-filter: grayscale(100%);
  	filter: grayscale(100%);
	transition: all .22s cubic-bezier(.25, .46, .45, .94);
}
body.gallery #main .sect02 .titleArea{
	margin: 0 auto 10px;
}
body.gallery #main p{
	background: rgba(175, 157, 124, 0.9);
	margin: 0px auto 10px;
	color: #fff;
    padding: 2%;
	font-size: 1.8rem;
}

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

	}
	body.gallery #main{
		margin-bottom: 20px;
	}
}
@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{
    margin: 100px auto;
}

body.voice #content #main{

}

body.voice #main .voiceBox{
	width: 90%;
    border: solid 1px;
    padding: 5%;
	color: #666;
}
body.voice #main .pickUp{
	border: solid 3px #FF5722;
}

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

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

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

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

body.faq #content{
}
body.faq #content #main{
	background: #f3f3f3;
	padding: 2%;
    width: 68%;
}
body.faq #sub{
    width: 26%;
}
body.faq #main .sect .titleArea{
    border-bottom: dotted 1px;
    padding: 0;
}
body.faq #main .styleBox{
	margin: 0 auto;
}


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

body.access #main{
	margin: 0 auto 50px;
}

body.access #main section{
    margin: 0 auto;
    width: 100%;
	position: relative;
}

body.access #main .shopdate{
	width: 40%;
    margin: 0;
    display: inline-block;
     background: rgba(175, 157, 124, 0.9);
    padding: 2%;
    position: absolute;
    top: -10px;
    right: 0;
    color: #fff;
    z-index: 1;
}
body.access section .shopdate .titleArea{
	border-bottom: dotted 1px #fff;
}
body.access #main .shopdate a{
	color: #fff; 
}
body.access #main .shopdate h3{
    color: #fff;
}
body.access #main .shopdate table{
    margin-bottom: 0px;
}
.shopImg{
    width: 99%;
    max-width: 1200px;
	margin-top: 20px;
}
@media only screen and (max-width: 1024px){
	.shopImg{
		width: 100%;
	}
	body.access #main .shopdate{
		position: relative;
		box-sizing: border-box;
	    margin-bottom: 10px;
		top:0;
	}
	body.access #main section .shopImg img{
		margin: 0 auto 10px;
	}
}

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

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

*/
/*
トップページblogの日付★のpに"top_blog"クラス名を追加
                    [blog num="6"]
                    <li>
                        <a class="img" href="{url(blog/{blog.id})}"><img src="{blog.img_src(l)}" alt="{blog.subject}"></a>
                        <a class="txt" href="{url(blog/{blog.id})}">
                            <h3>{blog.subject}</h3>
                            <p>{blog.body(50)}</p>
                            <p class="top_blog">{blog.date(%Y/%o)}</p>
                        </a>
                    </li>
                    [/blog]
*/
body.top h1{
    margin-top: -14px;
	font-size: 12px;
	text-align: center;
	position: absolute;
	right: 0;
}
body.top #content{
	width: 100%;
}
body.top #main{
	width: 100%;
	padding: 0;
}
body.top #main section.sect01,
body.top #main section.sect02{
	padding: 50px 0;
	margin: 0 auto;
}
body.top section.sect ul.wrapper li a.img{
	margin: 0;
}
body.top section.sect .titleArea{
	width: 90%;
	margin: 0 auto 20px;
	max-width: 1200px;
    width: 100%;
}
body.top section.sect .wrapper{
	width: 94%;
    margin: 0 auto;
	max-width: 1200px;
}
body.top section.sect.sect02 ul.wrapper li{
    margin: 0 0 60px;
    width: 25%;
	background: #fff;
    transition: all .5s cubic-bezier(.25, .46, .45, .94);
	position: relative;
}
body.top section.sect.sect02 ul.wrapper li:nth-child(5n){
	margin: 0 0 20px;
}
body.top section.sect.sect02 ul.wrapper li:hover{
    box-shadow: 12px 21px 36px 0 rgba(0,0,0,.15);
    -webkit-transform: translate3d(0, -15px, 1px);
    transform: translate3d(0, -15px, 1px);
    transition: all .22s cubic-bezier(.25, .46, .45, .94);
}
body.top #main section.sect ul.wrapper li a.txt:hover{
	opacity: 1;
}
#mainVisual{
    text-align: center;
	max-width: 1350px;
	animation: anime1 2s ease forwards;
	margin: -95px auto 0px;
	z-index: -1;
	margin-right: 0;
	max-width: 1920px;
}

@keyframes anime1 {
0% {
	filter: blur(10px);
	}
100% {
	filter: blur(0px);
	}
}
#mainVisual .swiper-wrapper{
	margin-bottom: 0;
}
.catch {
    position: absolute;
    top: 33%;
    left: 10%;
    z-index: 80;
	width: 150px;
}

body.top section.sect .titleArea h2{
	float: none;
	text-align: center;
	padding: 40px 0 0px;
    width: 100%;
    margin: 0 auto;
}
body.top section.sect .titleArea{
	border: none;
}

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

body.top section.sect.sect01 ul.wrapper li{
	width: 25%;
    margin: 0 0 0px 0;
    transition: all .5s cubic-bezier(.25, .46, .45, .94);
}
body.top section.sect.sect01 ul.wrapper li:nth-child(odd){
	margin-top: 60px;
}
body.top section.sect.sect01 ul.wrapper li:nth-child(3n){
	margin-top: 150px;
}
body.top section.sect.sect01 ul.wrapper li:nth-child(5){
	margin-top: -90px;
}
body.top section.sect.sect01 ul.wrapper li:nth-child(6){
	margin-top: -150px;
}
body.top section.sect.sect01 ul.wrapper li:nth-child(7){
	margin-top: 0px;
}
body.top section.sect.sect01 ul.wrapper li:nth-child(8){
	margin-top: -150px;
}

body.top section.sect.sect01 ul.wrapper li:hover{
    box-shadow: 12px 21px 36px 0 rgba(0,0,0,.15);
    -webkit-transform: translate3d(0, -15px, 1px);
    transform: translate3d(0, -15px, 1px);
	transition: all .22s cubic-bezier(.25, .46, .45, .94);
}
body.top #main section.sect ul.wrapper li a.txt h3{
    color: #000;
	margin: 3%;
}
body.top #main section.sect ul.wrapper li a.txt p{
	margin: 0;
    text-align: right;
}
body.top #main section.sect ul.wrapper li a.img{
	margin: 0;
	-webkit-filter: grayscale(0);
  	filter: grayscale(0);
  	-webkit-transition: .3s ease-in-out;
  	transition: .3s ease-in-out;
}
body.top #main section.sect ul.wrapper li a.img:hover{
	-webkit-filter: grayscale(100%);
  	filter: grayscale(100%);
	opacity: 1;
}
body.top #topFooterContent{
    background: rgba(247, 242, 224, 0.76);
    padding: 50px 0;
}

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


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

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

.colListItem_anchor:hover .colListItem_content {
    top: -5px;
}
/* topページmedia ここから*/
body.top #main section.sect ul.wrapper li a.txt p.top_media{
	position: absolute;
    top: 0;
    font-size: 16px;
    right: 0px;
	padding: 2%;
    background: rgba(175, 157, 124, 0.9);
	color: #fff;
    line-height: 23px;
	margin: 0 3% 0 0;
}
/* topページmedia ここまで*/

/* topページblog ここから*/
body.top #main section.sect ul.wrapper li a.txt p.top_blog{
	position: absolute;
    top: -30px;
    font-size: 46px;
    right: 0px;
}
/* topページblog ここまで*/

@media only screen and (max-width: 1024px){
	body.top h1{
		margin-top: -65px;
	}
	#mainVisual{
		margin-bottom: 50px;
		margin-top: 52px;
	}
	body.top #main{
		padding: 0;
		width: 100%;
	}
	body.top #main section.sect{
		margin: 0 auto 50px;
	}
	body.top #main section.sect01,
	body.top #main section.sect02{
		padding: 20px 0;
		margin: 0 auto 50px;
	}
	body.top #main section.sect .titleArea{
		border: none;
		padding: 0;
	}
	body.top #main section.sect .titleArea h2{
		margin: 0 auto;
		padding: 0;
	}
	body.top #main section.sect .titleArea a{
		text-decoration: none;
		margin: 0 auto;
	    padding-top: 28px;
	}
	body.top #main section.sect .titleArea a span{
		padding-right: 0;
		background:none;
	    padding: 8px;
    	color: #000;
		letter-spacing: 4px;
	}
	body.top #main section.sect .titleArea a span:hover{
		background:#000;
		color: #fff;
	}
	body.top #main section.sect .titleArea a:hover{
		opacity: 1;
	}
	body.top #main section.sect.sect02 ul.wrapper li{
		margin: 0 0 20px;
	    width: 33.3%;
		background: #fff;
	}
	body.top #main section.sect.sect02 ul.wrapper li:nth-child(3n+2){
		margin: 0 0 20px;
	}
	body.top #main section.sect.sect02 ul.wrapper li:nth-child(n + 4){
		display: none;
	}
	.catch {
		top: 10%;
		left: 5%;
		width: 100px;
	}
	body.top #main section.sect.sect01 ul.wrapper li{
		margin: 0;
	    width: 33.3333333%;
	}
	body.top #main section.sect.sect01 ul.wrapper li:nth-child(3n+2){
		margin: 0;
	}
	body.top #main section.sect.sect01 ul.wrapper li:nth-child(n + 7){
		display: none;
	}
	body.top #main section.sect ul.wrapper li a.txt p.top_media{
	    font-size: 14px;
    	top: 0;
	}
	body.top #main section.sect ul.wrapper li a.txt p.top_blog{
		font-size: 38px;
		top: -20px;
	}
	body.top section.sect .wrapper{
		width: 96%;
	}
	body.top #main section.sect .titleArea h2 span.en{
		font-size: 26px;
	}
}
/* バグ回避 */
@media only screen and (max-width: 1024px){
	body.top #main section.sect ul.wrapper li a.img,
	body.top #main section.sect ul.wrapper li a.img:hover{
		filter: none;
	}
}
@media only screen and (max-width: 640px){
	body.top #main section.sect.sect02 ul.wrapper li{
		margin: 0 0 20px;
	    width: 50%;
		background: #fff;
	}
	body.top #main section.sect.sect02 ul.wrapper li:nth-child(3n+2){
		margin: 0 0 20px;
	}
	body.top #main section.sect.sect02 ul.wrapper li:nth-child(n + 4){
		display: inline-block;
	}
	body.top #main section.sect.sect02 ul.wrapper li:nth-child(n + 5){
		display: none;
	}	
}

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

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

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

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

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

/*-------------------------------------*/
/*------top section にFacebook　グループに入れたとき---------*/
body.top section.sect04 .wrapper{
	text-align: center;
}
body.top #main section.sect04{
	background: #f3f3f3;
}
/*-------------------------------------*/
/*------ sect_top_blog topにブログ---------*/
body.top #main section.sect_top_blog ul.wrapper{
    margin-top: 10px;
}
body.top #main section.sect_top_blog ul.wrapper li a.txt{
	display: block;
	padding: 20px;
}
body.top #main section.sect_top_blog ul.wrapper li a.txt h3,
body.top #main section.sect_top_blog ul.wrapper li a.txt p{
	margin: 0;	
}
body.top #main section.sect_top_blog ul.wrapper li a.txt h3{
	font-weight: bold;
	font-size: 15px;
	margin-bottom: 20px;
}
body.top #main section.sect_top_blog ul.wrapper li a.txt p{
	font-size: 11px;
	text-align: left;
}
@media only screen and (max-width: 425px){
	body.top #main section.sect_top_blog ul.wrapper li a.txt{
		display: block;
		padding: 10px;
	}	
}
/*-------------------------------------*/
/*=============================================================*/
/*=====================　company　recruit concept ========================*/
body.company #main .sect,body.recruit #main .sect,body.concept #main .sect{
	text-align: center;
}
body.concept #main, body.company #main, body.recruit #main{
    margin: 0px auto 50px;
}
body.company #main .sect h2,body.recruit #main .sect h2,body.concept #main .sect h2{
	font-size: 2.8rem;
	line-height: 37px;
    margin: 30px auto;
}
body.company #main .sect p,body.recruit #main .sect p,body.concept #main .sect p{
	font-size: 1.6rem;
    margin-bottom: 80px;
}

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

           <div class="concept_box">
            <h2>{concept.subject}</h2>
            <p>
                {concept.body}
            </p>
           </div><!-- /.concept_box -->
*/
body.concept #content #main{
	position: relative;
}
.concept_box{
     background: rgba(175, 157, 124, 0.9);
    position: absolute;
    top: 0%;
	padding: 5%;
	z-index: 10;
    width: 60%;
    right: 0;
	box-shadow: 12px 21px 36px 0 rgba(0,0,0,.15);
}
body.concept #main .sect h2{
	color: #fff;
    border-bottom: dotted 2px;
    padding-bottom: 30px;
}
body.concept #main .sect p{
	margin-bottom: 0;
	color: #fff;
}
body.concept .swiper-container{
	margin-top: 10%;
}

@media only screen and (max-width: 1024px){
	.concept_box{
		position:relative;
		top:0;
		width: 90%;
		padding-top: 50px;
	    padding-bottom: 50px;
		margin: 10px auto 0;
	}
	body.concept .swiper-container{
		margin: 0 auto;
	}
}
/*=============================================================*/
/*=====================　more ボタン　========================*/

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

}

body.top section.sect .titleArea a span{
	background: none;
	width: 100px;
	text-align: center;
    border: solid 1px;
	letter-spacing: 5px;
  position: relative;
  display: inline-block;
  padding: 8px 10px;
  color: #000;
  text-decoration: none;
  outline: none;
  overflow: hidden;
  transition: all .5s;
	position: relative;
	top:-20px;
	margin: 0 auto -20px;
}
body.top section.sect .titleArea a:hover span{
	background: #000;
	color: #fff;
}
body.top section.sect .titleArea a span::before,
body.top section.sect .titleArea a span::after {
  position: absolute;
  display: block;
  content: '';
  transition: all .5s;
}
body.top section.sect .titleArea a span::before {
  top: 0;
  left:-1px;
  border-top: 1px solid #000;
  border-left: 1px solid #000;
}
body.top section.sect .titleArea a span::after {
  right: -1px;
  bottom: 0;
  border-right: 1px solid #000;
  border-bottom: 1px solid #000;
}

body.top section.sect .titleArea a span:hover::before,
body.top section.sect .titleArea a span:hover::after {
  width: 0;
  height: 0;
  opacity: 0;
  transition: all .7s;
}

.arrow {
    position: absolute;
    top:25px;
    right: 13px;
    width: 10px;
    height: 1px;
    background: #4C4D4D;
    transform: rotate(45deg);

}

.more_line {
    width: 163px;
    height: 1px;
    background: #4C4D4D;
    transform: rotate(0deg);
	position: absolute;
	left: 52px;
	top:28px;

}


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


/* stylist more ボタン*/
body.stylist #main .stylistBox .txtInfo .blogArea .titleArea a,body.stylist #main .sect02 .titleArea a{
	text-decoration: none;
	text-align: center;
	margin-top: 4px;
	width: 100px;
	padding: 5px;
}

/*moreボタン装飾①*/
body.stylist #main .stylistBox .txtInfo .blogArea .titleArea a {
  position: relative;
  display: inline-block;
  padding: 10px;
  color: #000;
  outline: none;
  overflow: hidden;
  transition: all .5s;
}
body.stylist #main .stylistBox .txtInfo .blogArea .titleArea a::before,
body.stylist #main .stylistBox .txtInfo .blogArea .titleArea a::after {
  position: absolute;
  display: block;
  content: '';
  width: 100%;
  height: 100%;
  transition: all .5s;
}
body.stylist #main .stylistBox .txtInfo .blogArea .titleArea a::before {
  top: 0;
  left: 0;
  border-top: 1px solid #000;
  border-left: 1px solid #000;
}
body.stylist #main .stylistBox .txtInfo .blogArea .titleArea a::after {
  right: 0;
  bottom: 0;
  border-right: 1px solid #000;
  border-bottom: 1px solid #000;
}
body.stylist #main .stylistBox .txtInfo .blogArea .titleArea a:hover {
  background-color: #000;
  color: #fff;
  transition: all .7s;
}
body.stylist #main .stylistBox .txtInfo .blogArea .titleArea a:hover::before,
body.stylist #main .stylistBox .txtInfo .blogArea .titleArea a:hover::after {
  width: 0;
  height: 0;
  opacity: 0;
  transition: all .7s;
}

body.stylist #main .stylistBox .txtInfo .blogArea .titleArea a:hover{
	color: #fff;
	opacity: 1;

}
/*moreボタン装飾②*/
body.stylist #main .sect02 .titleArea a {
  position: relative;
  display: inline-block;
  padding: 10px;
  color: #000;
  outline: none;
  overflow: hidden;
  transition: all .5s;
}
body.stylist #main .sect02 .titleArea a::before,
body.stylist #main .sect02 .titleArea a::after {
  position: absolute;
  display: block;
  content: '';
  width: 100%;
  height: 100%;
  transition: all .5s;
}
body.stylist #main .sect02 .titleArea a::before {
  top: 0;
  left: 0;
  border-top: 1px solid #000;
  border-left: 1px solid #000;
}
body.stylist #main .sect02 .titleArea a::after {
  right: 0;
  bottom: 0;
  border-right: 1px solid #000;
  border-bottom: 1px solid #000;
}
body.stylist #main .sect02 .titleArea a:hover {
  background-color: #000;
  color: #fff;
  transition: all .7s;
}
body.stylist #main .sect02 .titleArea a:hover::before,
body.stylist #main .sect02 .titleArea a:hover::after {
  width: 0;
  height: 0;
  opacity: 0;
  transition: all .7s;
}

body.stylist #main .sect02 .titleArea a:hover{
	color: #fff;
	opacity: 1;

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


body.stylist #main .stylistBox .txtInfo .blogArea .titleArea a span,body.stylist #main .sect02 .titleArea a span{
	background: none;
	padding-right: 0;
	letter-spacing: 5px;
}
/* stylist more ボタン　ここまで*/

/* style more ボタン*/
body.style #main .sect02 .titleArea a{
	text-decoration: none;
	padding: 10px;
	text-align: center;
	margin-top: 4px;
	width: 100px;
	padding: 5px;
}
body.style #main .sect02 .titleArea a {
  position: relative;
  display: inline-block;
  padding: 10px;
  color: #000;
  outline: none;
  overflow: hidden;
  transition: all .5s;
}
body.style #main .sect02 .titleArea a::before,
body.style #main .sect02 .titleArea a::after {
  position: absolute;
  display: block;
  content: '';
  width: 100%;
  height: 100%;
  transition: all .5s;
}
body.style #main .sect02 .titleArea a::before {
  top: 0;
  left: 0;
  border-top: 1px solid #000;
  border-left: 1px solid #000;
}
body.style #main .sect02 .titleArea a::after {
  right: 0;
  bottom: 0;
  border-right: 1px solid #000;
  border-bottom: 1px solid #000;
}
body.style #main .sect02 .titleArea a:hover {
  background-color: #000;
  color: #fff;
  transition: all .7s;
}
body.style #main .sect02 .titleArea a:hover::before,
body.style #main .sect02 .titleArea a:hover::after {
  width: 0;
  height: 0;
  opacity: 0;
  transition: all .7s;
}

body.style #main .sect02 .titleArea a:hover{
	color: #fff;
	opacity: 1;

}

body.style #main .sect02 .titleArea a span{
	background: none;
	padding-right: 0;
	letter-spacing: 5px;
}
/* style more ボタン　ここまで*/

body.stylist #main .stylistBox .txtInfo .blogArea .titleArea h3 span.jp,
body.stylist #main .sect02 .titleArea h3 span.jp,
body.style #main .sect02 .titleArea h3 span.jp{
	display: none;
	margin-left: 0;
}

@media only screen and (max-width: 1024px){
	body.stylist #main .stylistBox .txtInfo .blogArea .titleArea a,
	body.stylist #main .sect02 .titleArea a,
	body.style #main .sect02 .titleArea a{
		width: 80px;
		box-sizing: border-box;
	}
}

@media only screen and (max-width: 425px){
	.more_line{
		width: 123px;
	}	
}


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

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

body.movie #content #main{
	background: #f3f3f3;
	padding: 2%;
	width: 96%;
}
/*=============================================================*/
/*=====================　media　========================*/
/*
★部分もともと<p>を削除し下記★に変更

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

*/


body.media #main .sect02 ul.wrapper li{
	position: relative;
	margin: 0 0% 20px 0;
    position: relative;
    width: 25%;
}
body.media #main .sect02 ul.wrapper li:nth-child(5n){
	margin: 0 0% 20px 0;
}
body.media #main .sect02 ul.wrapper li:nth-child(4n){
	margin: 0 0% 20px 0;
}
body.media #main .sect02 ul.wrapper li a:hover{
	opacity: 1;
}
body.media #main .sect02 ul.wrapper li a.txt h3{
    color: #fff;
    font-weight: normal;
    letter-spacing: 1px;
	margin: 0 0 5px;
    font-size: 15px;
    border-bottom: solid 1px;
    padding-bottom: 8px;
    line-height: 1.2;
    letter-spacing: 0.5px;
}

body.media #main .sect02 ul.wrapper li a.img img{
	width: 100%;
    margin: 0 !important;
	transition: all .5s cubic-bezier(.25, .46, .45, .94);
	-webkit-filter: grayscale(0);
  	filter: grayscale(0);
}
body.media #main .sect02 ul.wrapper li a.img img:hover{
    z-index: 10;
    opacity: 1;
    box-shadow: 12px 21px 36px 0 rgba(0,0,0,.15);
    -webkit-transform: translate3d(0, -15px, 1px);
    transform: translate3d(0, -15px, 1px);
	-webkit-filter: grayscale(100%);
  	filter: grayscale(100%);
	transition: all .22s cubic-bezier(.25, .46, .45, .94);
}
body.media #main .sect02 ul.wrapper li a.txt{
	text-align: center;
     background: rgba(175, 157, 124, 0.9);
    width: 80%;
    position: relative;
    display: block;
    padding: 10px;
    margin: -20px auto 0;
	z-index: 10;
	box-sizing: border-box;
}
.media-right{
	color: #fff;
	text-align: center;
}
body.media #main .sect02 ul.wrapper li a.txt p{
	margin: 0;
}

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

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


body.contact #main .input .btn input#btnConfirm{
	background: rgba(175, 157, 124, 0.9);
}
body.contact #main .confirm .btn{
	margin: 0 auto;
}
body.contact #main .confirm .btn input#btnSend{
	background-color: rgba(175, 157, 124, 0.9);	
}
body.contact #main .btn input{
	display: inline-block;
}

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

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



/*=====================　concept　========================*/
/*=============================================================*/
/*=====================　concept　========================*/

/*===================== add style 2021/08/17 sugawara ========================*/
body.gallery #pageTitleArea h1 span { text-transform: unset; }

/*===================== add style 2023/02/08 yanagihara ======================*/
    .Nav > ul {width: 550px;}

@media only screen and (max-width: 1024px){
    .Nav > ul{width: 30%;}
}