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

html{
	font-family: 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック';
	font-family:  "Noto Sans Japanese";
	}

body.top section.sect .titleArea h2 span.en { font-family: 'Julius Sans One', sans-serif; }
nav.Nav li a{ font-family: 'Julius Sans One', sans-serif; }
body.lower #pageTitleArea h1 span{ font-family: 'Julius Sans One', sans-serif; }
footer #footerInner #footerNav ul li a{ font-family: 'Julius Sans One', sans-serif; }

/*sub*/
#sub .subBox .titleArea p span.en{
	font-family: 'Julius Sans One', sans-serif;
	font-weight: normal;
	}

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

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

/*top more*/
body.top section.sect .titleArea a span{
	font-family: 'Julius Sans One', sans-serif;
    letter-spacing: 2px;
	}

/*news blog more*/
body.blog #main .couponArea .couponContent .txt .more span,
body.news #main .couponArea .couponContent .txt .more span {
	font-family: 'Julius Sans One', sans-serif;
    letter-spacing: 2px;
	}

/*staff style more*/
body.stylist #main .stylistBox .txtInfo .blogArea .titleArea a span,
body.stylist #main .sect02 .titleArea a span,
body.style #main .sect02 .titleArea a span {
	font-family: 'Julius Sans One', sans-serif;
    letter-spacing: 2px;
	}

/*stylist*/
body.stylist #main .sect02 .titleArea h3 span.en,
body.stylist #main .stylistBox .txtInfo .blogArea .titleArea h3 span.en{
	font-family: 'Julius Sans One', sans-serif;
	}

/*coupon*/
body.coupon #main section.sect01 .titleArea h3 span.en{ font-family: 'Julius Sans One', sans-serif; }

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

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

/*.blog 一覧日付*/
body.blog #main p.newsTime01,body.news #main p.newsTime01{ font-family: 'Julius Sans One', sans-serif; }

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

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

/*top shoplist*/
body.top #main .shopdate a{ font-family:  'Julius Sans One', sans-serif; }

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

/*日本語*/
body.top h1{
	font-family: "Noto Sans Japanese";
	font-weight: lighter;
	}

body.top section.sect .titleArea h2 span.jp{
	font-family: "Noto Sans Japanese";
	display: none;
	}

/*menu*/
body.menu #main .sect .titleArea h3 span.en{
	font-family:  "Noto Sans Japanese";
	font-size: 16px;
	}

/*style カテゴリ*/
#sub-style .subBox .titleArea p span.jp{ font-family:  "Noto Sans Japanese"; }

/*style　スタイル名*/
body.style #main .styleBox .txtInfo h2{ font-family:  "Noto Sans Japanese"; }

/*style 小タイトル*/
body.style #main .sect02 .titleArea h3 span.jp{ font-family:  "Noto Sans Japanese";}

/*access 小タイトル*/
body.access #main .shopdate h3 span.jp,
body.top #main .shopdate h3 span.jp{
	font-family:  "Noto Sans Japanese";
	}

body.shoplist #main .sect02 .titleArea h3 span.en{ font-family:  "Noto Sans Japanese";}

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

*{ word-wrap: break-word;}
img{ width: 100%; }
body.news #main .articleTxt img,
body.blog #main .articleTxt img{
	margin: 0 auto!important;
	width: auto;
	}

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

/*========================
	各ページ　header
========================*/
/*スマホ時に下に予約ボタン
ヘッダーに★部分を変更

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

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

header{
	border-top:none;
    position: relative;
    background:none;
    width: 100%;
    height: 95px;
    z-index: 10;
    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: 100px;
    margin: 0 0px 40px 0;
	right: 0;
	}

header #headerInner ul.pcBtn li.reserve a{
	background: none;
	color: #fff;
	padding: 40px 0;
    text-decoration: none;
	background:#c7000b;
	font-size: 15px;
    height: auto;
	}

header #headerInner ul.pcBtn li.reserve a:hover{
	background: rgba(175, 157, 124, 0.8);
	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; }
.header_bg{
    position: fixed;
    top: 90px;
	right: 0;
    z-index: -1;
	}

.header_bg .bg_deco{
	font-size: 270px;
	color: rgba(238, 238, 238, 0.56);
	}

.Nav{
	top:0px;
    z-index: 100;
	position: absolute;
    width: 100%;
	max-width: 1920px;
	}

.Nav > ul{
	position: relative;
	width: 100%;
	background: none;
	}

.Nav > ul > li a{
    padding: 5px 8px;
	background: none;
	}

.Nav > ul > li a:hover{
    color: rgba(175, 157, 124, 0.8);
    opacity: 1;
	border-bottom: solid 3px rgba(175, 157, 124, 0.8);
	}

.Nav .logoArea{
	position: relative;
    left: 0;
    top: 0px;
	margin: 20px 0 20px 10px;
	width: 250px;
	}

body.top .Nav .logoArea{
	position: relative;
    left: 0%;
    top: 0px;
	margin: 75px 0 70px 30px;
	width: 400px;
	}

.Nav > ul > li > ul{
	top: auto;
	opacity: 1;
    background: rgba(255, 255, 255, 0.97);
	}

.Nav > ul > li > ul li a{ border-bottom: solid #fff; }

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

.is-show,body.top .is-show { transform: translateY(0); }

.clone-nav .logoArea,body.top .clone-nav .logoArea{
	width: 130px;
    top: 0;
    margin: 5px 0 5px 10px;
	}

.clone-nav ul, body.top .clone-nav ul{ margin-top: -5px; }
.clone-nav ul.submenu, body.top .clone-nav ul.submenu{ top:30px; }
nav#footerNav.is-show ,body.top nav#footerNav.is-show{ transform: translateY(-440%); }

@media only screen and (max-width: 1024px){
.clone-nav{ display: none; }
}

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

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

.Nav,body.top .Nav{
	top: 0;
	width:100%;
	right: 0;
    position: fixed;
	}

.Nav .navbtn{
	right: 10px;
    z-index: 1000;
	top:8px;
	}

body.top .navbtn{ top:8px;}
.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: rgba(86, 86, 86, 0.73);
	}

body.top .Nav ul{ top: -77px; }

.Nav .logoArea{
    top: 0px;
	left: 0;
	position: absolute;
    width: 250px;
	margin: 10px;
	}

body.top .Nav .logoArea{
    width: 250px;
	top: 5px;
	left: 3px;
	margin: 0;
	}

header{
    height: 52px;
    position: fixed;
	background: none;
	z-index: 50;
	}

header #headerInner ul.spReserve{
    margin: 0 auto;
    width: 100%;
	padding: 0;
    position: fixed;
	bottom: 0;
    background: #c7000b;
    border-top: solid 3px #c7000b;
    border-bottom: solid 3px #c7000b;
	}

header #headerInner ul.spReserve li{ width: 100%; }
header #headerInner ul.spReserve li:nth-child(2){ border-left: dotted 1px #fff; }
header #headerInner ul.spReserve li a{
	border: none;
    padding: 5px 0;
    color: #fff;
	}

header #headerInner ul.spReserve li a span,
header #headerInner ul.spReserve li a img{ display: inline-block; }
header #headerInner ul.spReserve li a img{
	margin: 0 auto;
	height: 30px;
	width: 30px;
	}

header #headerInner ul.spReserve li:nth-child(2) a img{ width: 15.89px; }
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 a{
	padding: 8px 10px;
    background: none;
	color: #fff;
	border-bottom: none;
	}

.Nav > ul > li a:hover{
	border-bottom: none;
	color: #c7000b;
	}

.Nav > ul > li.parent > a::before{
	border-top: solid 1px #fff;
	border-right: solid 1px #fff;
	}

.Nav > ul > li.parent.open > a{
	border-bottom: dotted 1px #fff;
	color: #c7000b;
	}

.Nav > ul > li.parent.open > a::after{ background: none; }
.Nav ul.close{
	width: 30%;
	padding: 40px 20px 20px;
	border: none;
	}

.decoline{ left: 20px; }
.Nav > ul > li > ul{ background: rgba(255, 255, 255, 0.24); }
.Nav > ul > li > ul li a{
    background: none;
	border-bottom: dotted 1px #fff;
	}

.Nav > ul > li > ul li a:hover{
    background: none;
	border-bottom: dotted 1px #fff;
	}

.Nav > ul > li > ul li a::before{
	border-top: solid 1px #fff;
	border-right: solid 1px #fff;
	}

.header_bg{ top:0px; }
.header_bg .bg_deco{ font-size: 200px; }

}

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

.Nav .logoArea{ width: 200px; }
body.top .Nav .logoArea{ width: 200px; }
.header_bg .bg_deco{ font-size: 155px; }
.header_bg{ top:30px; }
body.top .Nav ul{ top: -62px; }

}

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

.decoline{ left: 5px; }
.header_bg .bg_deco{ font-size: 110px; }
.header_bg{ top: 35px; }

}

@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; }
.Nav .logoArea,
body.top .Nav .logoArea{ width: 150px; }
.header_bg .bg_deco{ font-size: 83px; }
.header_bg{ top:35px; }

}

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

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

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

*/

footer{
	background: #888;
    padding:  0;
	}

#footerInner{
	width: 92%;
	padding: 1% 4%;
	}

footer #footerInner #footerNav ul{ width: 100%; }
footer #footerInner #footerContent{
	width: 100%;
	display: block;
	}

footer #footerInner #footerPolicy{
	background: none;
	padding: 0;
	}

footer #footerInner #footerPolicy ul{ margin: 0; }
footer #footerInner #footerContent #footerInfo{
	width: 60%;
	margin: 0 auto;
	}

footer #footerInner #footerContent #footerInfo #footerLogo{
    display: inline-block;
	width: 100%;
	}

footer #footerInner #footerContent #footerInfo #footerLogo a{
    width: 300px;
	display: block;
    height: auto;
    margin: 30px auto;
    text-align: center;
	max-width: 300px;
	}

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: 49%;
	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;
	max-width: 600px;
	margin: 0 auto;
	}

footer #footerInner #footerContent #footerLink ul.actionBtn li.recruit{ background: none; }
footer #footerInner #footerContent #footerLink ul.actionBtn li{
	width: 48%;
	border: solid 2px #fff;
	height: auto;
	margin: 0;
	}

footer #footerInner #footerContent #footerLink ul.actionBtn li a{
	width: 100%;
	margin: 0 auto;
	height: auto;
	padding: 10px 0;
	color: #fff;
	}

footer #footerInner #footerContent #footerLink ul.actionBtn li.reserve a{ background: none; }
footer #footerInner #footerContent #footerLink ul.actionBtn li.recruit,
footer #footerInner #footerContent #footerLink ul.actionBtn li.reserve,
footer #footerInner #footerContent #footerLink ul.actionBtn li.contact{
	display: block;
	background: none;
	margin: 0;
	}

footer #footerInner #footerContent #footerLink ul.actionBtn li.recruit a:hover{
	background: #fff;
	color: #000;
	opacity: 1;
	}

footer #footerInner #footerContent #footerLink ul.actionBtn li.reserve a:hover{
	background: #fff;
	color: #000;
	opacity: 1;
	}

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;
	width: 100%;
	}

footer #footerInner #footerContent #footerLink ul.snsBtn li{
	margin: 0 5px 0;
    width: auto;
    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 #footerInfo #footerLogo p.salonName{
    font-size: 18px;
	margin: 10px auto;
	width: 100%;
	}

footer #footerInner #footerContent #footerInfo #footerLogo a{ width: 230px; }

}

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

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 auto 10px; }

}

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

.businessHourWrapper .businessHour, .finalAcceptance, .finalAcceptance{
	width: 100%;
	display: block;
	}

footer #footerInner #footerContent #footerLink ul.actionBtn{ flex-direction:column; }
footer #footerInner #footerContent #footerLink ul.actionBtn li.recruit,
footer #footerInner #footerContent #footerLink ul.actionBtn li.reserve,
footer #footerInner #footerContent #footerLink ul.actionBtn li.contact{	width: 100%;}

}

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

body.lower #content{
	width: 80%;
    max-width: 1200px;
	margin: 0px auto 50px;
	}

body.lower #content #main{
	width: 100%;
	padding: 0;
	}

body.lower.onecolumn #content #main{
	width: 100%;
	padding: 0;
	}

#main{
	width: 96%;
	padding: 2%;
	}

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

body.lower #content{
	width: 96%;
	padding: 0;
	margin: 0px auto 80px;
	}

#content{ padding: 0; }

}

/*========================
	各ページタイトル
========================*/

body.lower #pageTitleArea{
	margin-top: 120px;
	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 span{
    font-size: 6.6rem;
	margin: 0;
	}

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

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

body.lower #pageTitleArea{ margin: 140px auto 60px; }
body.lower #pageTitleArea h1{
    padding: 0;
	margin-top: 0;
	}

}

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

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

}

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

body.lower #pageTitleArea{ margin: 100px auto 40px; }
body.lower #pageTitleArea h1{
	margin:  0;
    text-align: center;
	}

body.lower #pageTitleArea h1 span{
    font-size: 36px;
    text-align: center;
	}

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

}

/*========================
	各ページ　サブエリア
========================*/

#sub{
    width: 30%;
    padding: 0%;
    margin: 0 0 0 2%;
    color: #fff;
	}

#sub .subBox{ padding: 4%; }
#sub .subBox .titleArea{
	border: none;
    width: 100%;
    margin: 0 auto 6px;
	}

#sub .subBox .titleArea a{
    background: #f3f3f3;
	color: #333;
    text-decoration: none;
    float: none;
    text-align: center;
    padding: 5px;
	position: relative;
	}

#sub .subBox .titleArea a:hover{
	background: #666;
	opacity: 1;
	color: #fff;
	}

#sub .subBox .titleArea a span{
    padding-right: 0;
    background: none;
	}

#sub .subBox .titleArea p{
    font-weight: bold;
	float: none;
	text-align: center;
	}

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

/* #sub category */
#sub #subCategory,#sub #subFaq{
    background: #9e9e9e;
	position: relative;
    padding: 60px 8% 10px;
    border-radius: 10px;
	}

#sub #subCategory .titleArea,
#sub #subFaq .titleArea{
	border: none;
	position: absolute;
    top: 10%;
	left: 15%;
	width: 70%;
    border-radius: 10px;
	}

#sub #subCategory .titleArea p,
#sub #subFaq .titleArea p{
	color: #fff;
    padding: 15px 0;
	border-bottom: dotted 1px;
	}

#sub #subCategory ul,
#sub #subFaq ul{ padding: 50px 0 4%; }
#sub #subCategory ul li a,
#sub #subFaq ul li a{ color: #fff; }

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

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

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

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

*/

#sub #subBlog,#sub #subNews{ padding: 4% 0; }
#sub .subBox .wrapper article{
	border: solid 1px #333;
    padding: 2%;
    margin-bottom: 6px;
	position: relative;
	background: rgba(255, 255, 255, 0.5);
	}

.sidebar_img{
    width: 100%;
    display: inline-block;
	}

#sub .subBox .wrapper article a.linkToArticle p{
	padding: 10px;
	margin-bottom: 5px;
	}

#sub .subBox .wrapper article a.linkToArticle p.title{
	font-size: 1.3rem;
    border-top: dotted 1px;
    border-bottom: dotted 1px;
    margin-top: 10px;
	}

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

#sub .subBox .wrapper article ul li.date{
	margin-right: 0;
	margin-left: 5px;
	padding: 0;
	}

#sub .subBox .wrapper article ul li.author{ position: static; }
#sub #subBlog .wrapper article ul li.author a,
#sub #subNews .wrapper article span.category a{
	text-decoration:none;
    position: absolute;
    width: 70px;
    top: 0;
    right: 0;
    background: rgba(243, 243, 243, 0.9);
    padding: 20px 10px;
    color: #333;
	text-align: center;
	}

#sub #subNews .wrapper article span.category a{
    padding: 20px 10px;
	width: 100px;
	}

/*  #subStyle  */
#sub #subStyle ul.wrapper li{
	width: 50%;
    margin-bottom: 0;
	}

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

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

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

#sub{
	width: 100%;
	margin: 0 auto;
	}

#sub .subBox{ padding: 2%; }
#sub .subBox .wrapper{ margin-bottom: 50px; }
#sub .subBox .wrapper article{
    width: 44.9%;
	display: inline-block;
	margin-right: 1%;
    vertical-align: top;
	}

#sub .subBox .wrapper article:nth-child(even){ margin-right: 0; }
#sub #subBlog .wrapper article ul li.author a,
#sub #subNews .wrapper article span.category a{
	width: 40%;
    text-align: center;
	}

#sub #subNews .wrapper article span.category a{ width: 50%; }
#sub .subBox .titleArea a{ padding: 20px; }
#sub #subBlog .wrapper article ul,
#sub #subNews .wrapper article ul{ margin-top: -14px; }
#sub #subStaff ul li a,
#sub #subCategory ul li a,
#sub #subMedicate ul li a,
#sub #subBlogcate ul li a,
#sub #subNewscate ul li a,
#sub #subFaq ul li a{ border-bottom: none; }
#sub #subStyle ul.wrapper li{ width: 25%;}

}

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

#sub .subBox .wrapper article{
	width: 96%;
	margin-right: 0;
	}

}

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

#sidebar .subBox{
    width: 100%;
    display: inline-block;
    vertical-align: top;
    margin: 0;
	}

#sidebar .subBox .titleArea{
	border: none;
    width: 70%;
	}

#sidebar .subBox .titleArea p{ font-weight: bold; }
#sidebar .subBox .titleArea p span.jp{ display: none; }
#sidebar .subBox .titleArea p span.en{ font-size: 2.4rem;}
#sidebar #subBlogcate ul li{
	width: 20%;
	display: inline-block;
	}

#sidebar #subBlogcate ul li a{
	display: block;
    margin: 0 auto 10px;
    padding: 5px 0;
	color: #333;
    font-size: 1.4rem;
	}

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

#sidebar #subBlogcate ul li{ width: 33%;}

}

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

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

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

*/

body.stylist_details #content #main{
	background: rgba(243, 243, 243, 0.5);
    width: 96%;
    padding: 2%;
	}

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

body.stylist #main .stylistBox .txtInfo{
	width: 40%;
	color: #666;
	position: relative;
	}

body.stylist #main .stylistBox .txtInfo h2{
	font-size: 28px;
    color: #333;
    margin: 0 auto 6px;
	}

body.stylist #main .stylistBox .txtInfo h2 span{
    margin-left: 0;
    font-size: 10px;
    font-weight: normal;
    color: #666;
	}

body.stylist #main .stylistBox .txtInfo p.job{
    font-size: 15px;
	color: #333;
    margin-bottom: 6px;
	}

body.stylist #main .stylistBox .txtInfo ul.sns{ margin: 0 0 6px auto; }
body.stylist #main .stylistBox .txtInfo p.catch02{
	font-size: 16px;
    color: #fff;
     background: rgba(175, 157, 124, 0.8);
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
	}

body.stylist #main .stylistBox .txtInfo .career{
    background: #fff;
    padding: 3%;
    border-radius: 10px;
	color: #333;
	}

body.stylist #main .stylistBox .txtInfo .career dl,
body.style #main .styleBox .txtInfo .box dl{
	border-bottom: dotted 1px;
	width: 100%;
	}

body.stylist #main .stylistBox .txtInfo .career dl dt{
	width: 100%;
	margin-bottom: 5px;
	font-size: 14px;
	}

body.stylist #main .stylistBox .txtInfo .career dl dd{
	overflow-y: hidden;
	width: 98%;
	padding: 5px 0;
	display: block;
    margin: 0 1%;
	font-size: 14px;
    line-height: 22px;
    letter-spacing: -0.5px;
	}

body.stylist #main .stylistBox .txtInfo .blogArea .titleArea{ border-bottom: solid 1px #333; }
body.stylist #main .stylistBox .txtInfo .blogArea .titleArea a{ text-decoration: none; }
body.stylist #main .stylistBox .txtInfo .blogArea .wrapper article ul li.author a{ text-decoration: none; }
body.stylist .sect02{ margin: 0; }
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 .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.title,
body.stylist #main .stylistBox .txtInfo .blogArea .wrapper article a.linkToArticle p{ font-size: 14px; }
body.stylist #main .sect02 .titleArea{
	border-bottom: solid 1px #333;
	margin-bottom: 10px;
	}

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

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

body.stylist #main .sect02 ul.wrapper li a.txt p{ display: none;}

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

body.stylist #main .stylistBox .txtInfo .blogArea .titleArea,
body.stylist #main .sect02 .titleArea{ padding-bottom: 0; }
body.stylist #main .stylistBox .txtInfo .blogArea .titleArea h3{ padding: 10px 0 5px; }
body.stylist #main .stylistBox .txtInfo h2{ margin: 20px auto 6px; }
body.stylist #main .sect02 .titleArea{ margin-bottom: 10px; }

}

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

body.stylist #main .couponArea .couponContent{
	padding: 20px 30px 30px;
    box-sizing: border-box;
    width: 100%;
	}

body.stylist #main .couponArea .couponContent .txt{
    width: 100%;
    display: inline-block;
    vertical-align: top;
    margin-left: 2%;
	}

body.stylist #main .couponArea .couponContent .img{
	width: 36%;
	display: inline-block;
	}

body.stylist #main .couponArea .couponContent .img img{ width: 100%; }
body.stylist #main .couponArea .couponContent .txt p.price{ font-size: 2.5rem; }
body.stylist #main .couponArea .couponContent .txt ul li{
	margin-bottom: 3px;
	background-color: #c5b790;
	}

.wrapper{ margin-bottom: 0; }

@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: 2% 1%;
	}

body.stylist #main .couponArea .couponContent{
	padding: 5%;
	width: 90%;
	box-sizing: unset;
	}

}

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

body.stylist #main .couponArea{
	width: 100%;
	display: block;
	margin: 2% auto ;
	}

}


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

body.stylist #main .couponArea .couponContent .img { max-width: 200px; }

}

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

/*========================
	staff　一覧
========================*/

.wrapper_stylist{
	margin: 0 auto;
	padding-bottom: 20px;
	overflow: visible;
	}

body.stylist .sect02 h2{ padding-bottom: 5px; }
ul.wrapper_stylist li{
	margin: 0;
	position: relative;
	width: 25%;
    margin-right: 0%;
    margin-bottom: 50px;
	}

ul.wrapper_stylist li:nth-child(odd){ margin-top: 0px;}
ul.wrapper_stylist li:nth-child(3n){
	margin-right: 0;
    margin-bottom: 0px;
	}

ul.wrapper_stylist li:nth-child(4n){ margin-right: 0; }
ul.wrapper_stylist li a{ opacity: 1; }
body.stylist #main .sect02 ul.wrapper_stylist li a.img{
	width: 100%;
	overflow: hidden;
	}

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

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

body.stylist #main .sect02 ul.wrapper_stylist li a.txt{
	text-align: center;
	 background: rgba(175, 157, 124, 0.8);
    width: 70%;
    position: absolute;
    bottom: 0;
    left: 5%;
    padding: 5% 10%;
    margin-bottom: -25px;
	z-index: 10;
	}

body.stylist #main .sect02 ul.wrapper_stylist li a.txt h3{
	margin: 0 0 3px;
    font-size: 1.6rem;
    color: #fff;
    border-bottom: solid 1px;
	}

body.stylist #main .sect02 ul.wrapper_stylist li a.txt p{
	color: #fff;
    margin-bottom: 0;
	font-size: 1.0rem;
	}

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

ul.wrapper_stylist li{ width: 49.5%; }
ul.wrapper_stylist li:nth-child(2n){ margin-right: 0; }

}

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

body.stylist #main .sect02 ul.wrapper_stylist li a.txt h3{ font-size: 14px; }
body.stylist #main .sect02 ul.wrapper_stylist li a.txt p{ font-size: 10px; }

}

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

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

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

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

#sub-style .subBox .titleArea p{
    font-family: 'Julius Sans One', sans-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; }

}
*/

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

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

*/

body.style .sect02{
    position: relative;
	top: 0;
	padding: 0 0 5%;
	}

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

body.style #main .sect02 ul.wrapper li:nth-child(4n){ margin: 0px 0 0 0; }
body.style #main .sect02 ul.wrapper li:nth-child(3n+2){ margin: 0px 0 0 0; }
body.style #main .sect02 ul.clearfix li a.img{
	width: 100%;
    margin: 0;
    transition: all .22s cubic-bezier(.25, .46, .45, .94);
	}

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

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.8);
    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: 768px){

body.style .sect02{ padding: 0; }
body.style #main .sect02 ul.wrapper{ margin: 10px 0; }
body.style #main .sect02 ul.wrapper li{
	width: 50%;
	margin: 0;
	}

body.style #main .sect02 ul.wrapper li:nth-child(3n+2){ margin: 0; }
body.style #main .sect02 ul.wrapper li:nth-child(5){ margin: 0; }
body.style #main .sect02 ul.wrapper_top li a.txt h3{
	font-size: 14px;
	line-height: 20px;
	letter-spacing: 1px;
	text-align: center;
	}

body.style #main .sect02 ul.wrapper_top li a.img img{ width: 45%; }
body.style #main .sect02 ul.wrapper_top li a.txt p{ display: none; }
body.style #main .sect02 ul.clearfix li a.txt{ display: none; }
body.style #main .sect02 ul.clearfix li a.img{ width: 100%; }
body.style #main .sect02 ul.wrapper_top li a.txt{ display: block; }

}

/*========================
	スタイル詳細
========================*/

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

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

*/

body.style #content{
	position: relative;
	z-index: 1;
	}

body.style #content #main{ padding: 2%; }
body.style #content #main section.sect.styleBox{ margin-top: 55px; }
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{
    position: relative;
    left: -20%;
    top: -50px;
     background: rgba(175, 157, 124, 0.8);
    margin-bottom: -30px;
	color: #ffffff;
	font-size: 24px;
    padding: 20px;
    box-sizing: border-box;
    width: 120%;
	}

body.style #main .styleBox .txtInfo .box{
    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;
	}

.style-arrenge-point-text{ font-size: 14px; }
body.stylist #main .stylistBox .txtInfo .career dl, body.style #main .styleBox .txtInfo .box dl{
	width: 100%;
    border-bottom: dotted 1px #d7d7d7;
	}

.typeOn{ background-color: rgba(175, 157, 124, 0.8); }
body.style #main .commentArea{
	background-color: #fff;
    width: 48%;
	padding: 3%;
    border-radius: 10px;
	position: relative;
	margin: 5% auto;
	box-sizing: border-box;
	}

body.style #main .commentArea .img{ width: 100%; }
body.style #main .commentArea .img a{
	font-size: 1.8rem;
	color: #fff;
    font-weight: bold;
    padding: 3%;
	 background: rgba(175, 157, 124, 0.8);
    position: absolute;
    left: 3%;
    top: -10px;
    width: 150px;
	max-width: 1200px;
	}

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

body.style #main .commentArea .txt{
    width: 100%;
    margin: 0 0 0 5%;
	}

body.style #main .styleBox .txtInfo .box dl dt{ width: 28%; }
body.style #main .styleBox .txtInfo .box dl dd{ width: 72%; }
body.style #main .sect02 .titleArea{
	border-bottom:solid 1px #333;
	clear: both;
	margin-bottom: 10px;
	}

body.style #main .sect02 .titleArea h3{ padding: 0 0 5px 10px; }
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: rgba(243, 243, 243, 0.5);
	width: 96%;
    padding: 2%;
	}

body.style_details #main .sect02 ul.wrapper{
    margin: 0;
    padding: 0px 0 0px;
	}

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%;
	top:0;
	left: 0;
	position: relative;
	margin-bottom: 10px;
    padding: 3%;
	font-size: 20px;
	}

body.style #main .commentArea{ width: 94%; }
body.style #main .commentArea .img{
	width: 45%;
	display: inline-block;
	vertical-align: top;
	}

body.style #main .commentArea .img a{ text-decoration: none; }
body.style #main .commentArea .img img{
	width: 100%;
	float: none;
	}

body.style #main .commentArea .txt{
	width: 50%;
	display: inline-block;
	vertical-align: middle;
	margin: 0 0 0 2%;
	}

body.style #main .styleBox .txtInfo .box .recommend ul.clearfix{ margin-bottom: 0; }
body.style #main .sect02 .titleArea{ padding-bottom: 0; }

}

/*　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;
	font-size: 16px;
	}

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 .txt h5{
	line-height: 24px;
    font-size: 16px;
    margin: 0 auto 16px;
	}

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: solid 1px #f3f3f3;
    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: none;
    color: #333;
    background: #f3f3f3;
	}

body.style #main .couponArea .couponContent .txt a:hover{
	color: #fff;
    background: #bb1668;
    opacity: 1;
	}

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

body.style #main .couponArea .couponContent .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; }

}

@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; }
body.style #main .couponArea .couponContent .txt h5{ margin: 16px auto 20px; }

}

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

body.style #main .couponArea .couponContent .img{ max-width: 200px; }

}

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

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

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

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

*/

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

body.coupon #main section.sect01 .titleArea{
	width: 100%;
    margin: 0 auto 20px;
    border-bottom: solid 5px #d7d7d7;
	}

body.coupon #main section.sect01 .filterArea{
	background: none;
	width: 80%;
	padding: 0;
	}

body.coupon #main section.sect01 .filterArea dl{ width: 100%; }
body.coupon #main section.sect01 .filterArea dl dd{
	padding: 0;
    margin: 0 5%;
    width: 90%;
	border-radius: 10px;
	}

body.coupon #main section.sect01 .filterArea dl dd ul li{ margin: 0 6px 6px 0; }
body.coupon #main section.sect01 .filterArea .btn button{
	border: solid 1px;
    color: #fff;
	background: rgba(175, 157, 124, 0.8);
	}

body.coupon #main section.sect01 .filterArea .btn button:hover{
	color: #fff;
	background: #333;
    opacity: 1;
	}

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

body.coupon #main .result .couponArea h4,
body.stylist #main .couponArea h4{
	width: 100%;
	text-align: center;
	padding: 5px 0;
	background: #333;
	border-radius: 10px 10px 0 0;
	margin-bottom: 0;
	font-size: 16px;
    font-weight: normal;
	color: #fff;
	}

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,
body.stylist #main .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,
body.stylist #main .couponArea .couponContent .txt p.couponDetail{
	border-top: solid 1px #f3f3f3;
    padding-top: 10px
	}

body.coupon #main .result .couponArea .couponContent .txt a,
body.stylist #main .couponArea .couponContent .txt a{
	border: none;
    color: #333;
	background: #f3f3f3;
	}

body.coupon #main .result .couponArea .couponContent .txt a:hover,
body.stylist #main .couponArea .couponContent .txt a:hover{
	color: #fff;
	background: #bb1668;
    opacity: 1;
	}

body.coupon #main .result .couponArea .couponContent .txt ul li{
	margin-bottom: 3px;
	background-color:rgba(175, 157, 124, 0.8);
	}

body.coupon #main .result .couponArea .couponContent .txt h5,
body.stylist #main .couponArea .couponContent .txt h5{
	font-size: 18px;
	margin: 0 auto 20px;
	line-height: 30px;
	}

@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,
body.stylist #main .couponArea .couponContent .txt h5{
	font-size: 18px;
	margin: 20px auto;
	line-height: 30px;
	}

}

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

body.coupon #main .result .couponArea{
	width: 98%;
	display: block;
	}

body.coupon #main .result .couponArea .couponContent{ padding: 5%; }
body.coupon #main .result .couponArea .couponContent .img img{
	margin-bottom: 0px;
    vertical-align: top;
	}

.coupon_show{
	width: 80%;
    display: inline-block;
	vertical-align: middle;
	}

body.coupon #main .result .couponArea .couponContent .txt p.price{ margin-bottom: 10px; }

}

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

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


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

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

body.menu #main .sect{ width: 100%; }
body.menu .shop_menubox {
    display: inline-block;
    vertical-align: top;
    width: 96%;
    margin: 0 0 36px 0;
    background: rgba(243, 243, 243, 0.5);
    padding: 2%;
	}

body.menu .shop_menubox:nth-child(odd){ margin: 0 0 36px 0; }
body.menu #main .sect .titleArea h3 {
    float: left;
    margin: -2% 0 0 -2%;
    padding: 18px;
    width: auto;
    color: #fff;
    font-weight: normal;
    background: rgba(175, 157, 124, 0.8);
    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: 12px;
    line-height: 25px;
    background: #F3F2E6;
    padding: 20px;
    margin-bottom: 10px;
	}

body.menu #main .sect p { margin: 10px 0 0; }
body.menu #main .sect .table td,
body.menu #main .sect .table > tbody > tr > td:first-child{
	padding: 20px 0;
	font-size: 16px;
	}

@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: 20px 0;
	}

body.menu #main .sect .table tr{ margin-bottom: 0;}
body.menu #main .sect .table td{
    width: 20%;
	display: inline-block;
	padding: 20px 0;
	float: right;
	}

body.menu #main .sect .txtRight{
    float: right;
	text-align: left;
	width: 20%;
	}

}

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

body.menu #main .sect .table td,
body.menu #main .sect .table > tbody > tr > td:first-child{
	padding: 16px 0;
	font-size: 14px;
	}

body.menu #main .sect .titleArea h3{ padding: 12px; }
body.menu #main .sect .titleArea h3 span.en{ font-size: 14px; }

}

/*========================
	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: 0;
    margin: 0 auto;
	}

body.news #main .couponArea{ width: 100%; }
body.news #main .couponArea .couponContent{
    padding: 1%;
    width: 31%;
    display: inline-block;
	vertical-align: top;
    transition: all .22s cubic-bezier(.25, .46, .45, .94);
	position: relative;
    background: rgba(255, 255, 255, 0.5);
	}

body.news #main .couponArea .couponContent:hover{
    box-shadow: 12px 21px 36px 0 rgba(0,0,0,.15);
    -webkit-transform: translate3d(0, -15px, 1px);
    transform: translate3d(0, -15px, 1px);
	}

body.news #main .couponArea .couponContent .img{ width: 100%; }
body.news #main .couponArea .couponContent .img img{
	width: 100%;
    height: auto;
	margin: 0;
	}

body.news #main .couponArea .couponContent .img a:hover{ opacity: 1; }
body.news #main .couponArea .couponContent .txt{
	width: 90%;
    padding: 5%;
	}

body.news #main .newsTime{ text-align: right; }
body.news #main .newsTime a{ color: #666; }
body.news #main .couponArea .couponContent .txt .more:hover{
	opacity: 1;
    animation-duration: 1s;
    animation-name: more_line_news_blog;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    clip-path: polygon(0% 0%, 80% 0%, 80% 100%, 0% 100%);
	}

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

body.news #main .couponArea .couponContent .txt h5{
	margin-bottom: 10px;
    padding: 0 0 10px;
    border-bottom: dotted 1px;
	}

body.news #main .couponArea .couponContent .txt a:hover{ opacity: 1; }

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

body.news #main .couponArea .couponContent{ width: 48%; }

}

/*========================
	news　詳細
========================*/
body.news #main .sect{
	width: 100%;
    padding: 0;
	}

body.news #main .sect .titleArea{
    border: none;
    color: #333;
    border-bottom: solid 1px;
	}

body.news #main .sect .titleArea h3{
    color: #333;
    font-weight: bold;
    padding-bottom: 10px;
	padding-left: 10px;
	}

body.news #main .sect .wrapper li{ background: rgba(175, 157, 124, 0.8); }

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

body.news #main .sect .titleArea{ margin-top: -30px; }

}

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

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


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

*/

body.blog #content { position: relative; }
body.blog #content #main{ padding: 2%; }
body.blog #main .couponArea{
	width: 100%;
	position: relative;
	}

body.blog #main .couponArea_inner{
    padding: 1%;
    width: 31%;
    display: inline-block;
	vertical-align: top;
    transition: all .22s cubic-bezier(.25, .46, .45, .94);
	position: relative;
	background: rgba(255, 255, 255, 0.5);
	}

body.blog #main .couponArea_inner:hover{
    box-shadow: 12px 21px 36px 0 rgba(0,0,0,.15);
    -webkit-transform: translate3d(0, -15px, 1px);
    transform: translate3d(0, -15px, 1px);
	}

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

body.blog #main .couponArea .couponContent .img{ width: 100%; }
body.blog #main .couponArea .couponContent .img img{
	width: 100%;
    height: auto;
	margin: 0;
	}

body.blog #main .couponArea .couponContent .img a{ opacity: 1; }
body.blog #main .couponArea .couponContent .txt{
	width: 90%;
    padding: 5%;
	}

body.blog #main .couponArea .couponContent .txt ul{ margin-top: 0; }
body.blog #main .couponArea .couponContent .txt h5{
	margin-bottom: 10px;
    padding: 0 0 10px;
    border-bottom: dotted 1px;
	}

body.blog #main .newsTime{
	text-align: right;
	padding-bottom: 30px;
	}

body.blog #main .newsTime .postUser{ color: rgba(175, 157, 124, 0.8); }
p.newsTime01{
	position: absolute;
    top: 1%;
    font-size: 25px;
    right: 1%;
	background: rgba(255, 255, 255, 0.5);
    padding: 10px;
    margin: 0;
	}

body.blog #main .couponArea .couponContent .txt .more,
body.news #main .couponArea .couponContent .txt .more{
    text-align: left;
    text-decoration: none;
    margin: 0 auto;
	position: relative;
	top:0px;
    float: none;
    width: 170px;
    padding: 0px;
	display: block;
	}

body.blog #main .couponArea .couponContent .txt .more:hover{
	opacity: 1;
    animation-duration: 1s;
    animation-name: more_line_news_blog;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    clip-path: polygon(0% 0%, 80% 0%, 80% 100%, 0% 100%);
	}

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

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

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

body.blog #main .blogTime{ text-align: right; }

}

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

body.blog #main .couponArea .couponContent{ margin-bottom: 0; }
body.blog #main .newsTime{ padding-bottom: 0px; }
body.blog #main .couponArea .couponContent .txt .more:hover{
	animation-duration: 1s;
	animation-name: more_line_news_blog;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	clip-path: polygon(0% 0%, 80% 0%, 80% 100%, 0% 100%);
	}

}

@keyframes more_line_news_blog{
	0% {
		clip-path: polygon(0% 0%, 80% 0%, 80% 100%, 0% 100%);
	}
	100% {
		clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
	}
}

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

body.blog #main .couponArea_inner{ width: 48%; }

}

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

body.blog #main .couponArea .couponContent{ margin-bottom: 0; }
body.blog #main .couponArea .couponContent .txt h5{ margin-bottom: 10px; }
body.blog #main .couponArea .couponContent .txt .more,
body.news #main .couponArea .couponContent .txt .more{
	padding: 0;
	width: 100%;
	}

body.blog #main .couponArea .couponContent .txt .more span,
body.news #main .couponArea .couponContent .txt .more span{
	box-sizing: border-box;
	width: 80%;
	}

body.blog .more_line, body.news .more_line{
	left: 60%;
	width: 40%;
	}

}

/*========================
	blog　詳細
========================*/
body.blog #main .sect{
	width: 96%;
    padding: 2%;
	}

body.blog #main .sect .titleArea{
    border: none;
    margin-top: -60px;
    color: #333;
    border-bottom: solid 1px;
	}

body.blog #main .sect .titleArea h3{
    color: #333;
    font-weight: bold;
    padding-bottom: 10px;
    padding-left: 10px;
	}

body.blog #main .sect .wrapper li{ background-color:rgba(175, 157, 124, 0.8); }

/*========================
	gallery
========================*/
/*
 下記部分に置き換え　（class="gallery_menu"　を追加したもの）
<section class="sect sect02">から<div id="content">下に移動

    <div id="sub-style">
        <div id="subCategory" class="subBox">
            <div class="titleArea clearfix">
                <p>
                    <span class="en">MENU</span>
                    <span class="jp">メニュー</span>
                </p>
            </div>
            <ul>
                 [gallery_category]
                  <li><a href="{url(gallery?c={gallery_category.id})}" class="gallery_menu">/  {gallery_category.name}</a></li>
                 [/gallery_category]
            </ul>
       </div><!-- /#subCategory -->
    </div><!-- /#sub-style -->
*/
/*
もしくはサイドバーにカテゴリを作成
sidebar-gallery-category　を下記内容で作成

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

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

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

/*
サイドバーにカテゴリー設置した場合、ギャラリーページ下記削除
[gallery_category]
<a href="{url(gallery?c={gallery_category.id})}">{gallery_category.name}</a>
[/gallery_category]
*/

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

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

*/
/*
画像サイズをLに変更
*/
body.gallery #main 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!important;
    width: 50%!important;
	transition: all .22s cubic-bezier(.25, .46, .45, .94);
	}

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);
	}

body.gallery #main .sect02 .titleArea{ margin: 0 auto 10px; }
body.gallery #main p{
	margin: -60px auto 20px;
	color: #333;
	font-size: 1.8rem;
    border-bottom: solid 1px;
    padding-bottom: 10px;
	padding-left: 10px;
	}

body.gallery #main p.lightbox-title{ display: none;}

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

body.gallery #content{ margin: 100px auto 80px; }
body.gallery #main{ margin-bottom: 30px; }

}

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

body.gallery #content{ margin: 80px auto; }

}

/*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 #main .voiceBox{
	width: 90%;
    border: solid 1px;
    padding: 5%;
	color: #666;
    background: rgba(255, 255, 255, 0.5);
	}

body.voice #main .pickUp{ border: solid 3px #FF5722; }
body.voice #main .voiceBox .voiceInner{
	width: 100%;
    box-sizing: border-box;
    padding: 5%;
	margin-bottom: 0;
	background: #f3f3f3;
	}

body.voice #main .voiceBox .voiceInner p{ margin: 0 0 20px; }
body.voice #main .voiceBox .voiceInner p.voicemenu {
    border-bottom: dotted 1px;
    padding-bottom: 10px;
    margin-bottom: 10px;
	}

.voiceInner a{
    background: #666;
    padding: 1px 15px;
    color: #fff;
    border-radius: 10px;
    text-decoration: none;
	}

body.voice #main .voiceBox .voiceInner dl{ font-size: 1.5rem; }
body.voice #main .voiceBox .review,
body.voice #main .voiceBox .reply{
	padding: 0 0 0 2%;
    display: inline-block;
    vertical-align: top;
	}

body.voice #main .voiceBox .reply{
    padding: 30px 0 0 0;
	margin-bottom: 0;
	}

body.voice #main .voiceBox .review h3,
body.voice #main .voiceBox .reply h3{
	border-bottom: none;
    padding: 10px 0;
    width: 100%;
    text-align: center;
    border-bottom: dotted 1px;
	margin-bottom: 10px;
	}

body.voice #main .voiceBox .reply p{
	width: 98%;
    padding: 0 1%;
	}

body.voice #main .voiceBox .review .reviewInner{
	display: inline-block;
	width: 90%;
    padding: 0 5%;
	}

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

body.voice #main .voiceBox .voiceInner{
	width: 75%;
    display: inline-block;
	}

body.voice #main .voiceBox .review{ width: 20%; }

}

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

body.voice #main .voiceBox .review{
	width: 100%;
	padding: 0;
	}

}

/*========================
	faq
========================*/
body.faq #content #main{
    background: rgba(243, 243, 243, 0.5);
	padding: 2%;
    width: 67%;
	}

body.faq #sub{ width: 26%; }
body.faq #main .sect .titleArea{
    border-bottom: solid 1px;
    padding: 0;
	}

body.faq #main .sect .titleArea h3{
	padding-bottom: 10px;
	padding-left: 10px;
    margin-bottom: 0;
	}

body.faq #main .styleBox{ margin: 0 auto; }
div.accordion > ul > li > a{ background: rgba(175, 157, 124, 0.8); }

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

body.faq #content #main{ width: 96%; }
body.faq #sub{ width: 100%; }
#sub #subFaq ul li a{ border-bottom: none; }
body.voice #main .voiceBox .review dl{ width: 100%; }

}

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

body.access #main .shopdate,body.top #main .shopdate{
	width: 40%;
    margin: 0;
    display: inline-block;
     background: rgba(175, 157, 124, 0.8);
    padding: 2%;
    position: absolute;
    top: -20px;
    right: 0;
    color: #fff;
	}

body.access section .shopdate .titleArea{ border-bottom: dotted 1px #fff; }
body.access #main .shopdate a,body.top #main .shopdate a{ color: #fff; }
body.top #main .shopdate a img{ width: 15px; }
body.access #main .shopdate h3,body.top #main .shopdate_h3 h3{ color: #fff; }
body.access #main .shopdate p,body.top #main .shopdate p{ font-size: 1.4rem; }
body.access #main .shopdate td{ font-size: 1.4rem; }
body.access #main .shopdate table,body.top #main .shopdate table{ margin-bottom: 0px;}
.shopImg{ width: 99%; }

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

.shopImg{ width: 100%; }
body.access #main .shopdate,body.top #main .shopdate{
	position: relative;
	box-sizing: border-box;
    margin-bottom: 10px;
	top:0;
	margin-top: -10px;
	}

body.access #main section .shopImg img,
body.top #main section .shopImg img{ margin: 0 auto 10px;}

}

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

/*
moreボタンの中に★を追加
<h2>
    <span class="en">NEW HAIR STYLE</span>
    <span class="jp">新着ヘアスタイル</span>
</h2>
<a href="{url(styles)}"><span>more</span>
  <div class="more_line"></div>★
  <div class="arrow"></div>★
</a>
*/
/*
トップページblogの日付★のpに"top_blog"クラス名を追加
[blog num="6"]
<li>
    <a class="img" href="{url(blog/{blog.id})}"><img src="{blog.img_src(l)}" alt="{blog.subject}"></a>
    <a class="txt" href="{url(blog/{blog.id})}">
        <h3>{blog.subject}</h3>
        <p>{blog.body(50)}</p>
        <p class="top_blog">{blog.date(%Y/%o)}</p>
    </a>
</li>
[/blog]
*/

/*
メインビジュアルとコンテンツの間に下記追加
<p class="bg_deco">HAIR&EYE</p>
<h1>ヘア・アイラッシュサロン</h1>
*/

body.top h1{
	font-size: 12px;
	text-align: center;
	position: absolute;
	right: 3px;
	top: 3px;
	}

body.top #content{ width: 100%; }
body.top #main{
	width: 100%;
	padding: 0;
	}

body.top section.sect{ margin: 0 auto 80px; }
body.top section.sect ul.wrapper li a.img{ margin: 0; }
body.top section.sect .titleArea{
	margin: 0 auto 20px;
	max-width: 1200px;
    width: 100%;
	}

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

body.top section.sect.sect02 ul.wrapper li{
    margin: 0 0 60px;
    width: 33.3%;
    transition: all .22s cubic-bezier(.25, .46, .45, .94);
	position: relative;
	background: rgba(255, 255, 255, 0.5);
	}

body.top section.sect.sect02 ul.wrapper li:nth-child(5n){ margin: 0 0 20px; }
body.top section.sect.sect02 ul.wrapper li:hover{
    box-shadow: 12px 21px 36px 0 rgba(0,0,0,.15);
    -webkit-transform: translate3d(0, -15px, 1px);
    transform: translate3d(0, -15px, 1px);
	}

#mainVisual{
    text-align: center;
	width: 90%;
	animation: anime1 2s ease forwards;
	margin: 185px auto 80px;
	z-index: 1;
	max-width: 1920px;
	}

@keyframes anime1 {
0% {
	filter: blur(10px);
	}
100% {
	filter: blur(0px);
	}
}

.catch {
    position: absolute;
    top: 33%;
    left: 10%;
    z-index: 80;
	width: 150px;
	}

body.top section.sect .titleArea h2{
	float: none;
	text-align: center;
	padding: 40px 0 20px;
    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 .22s cubic-bezier(.25, .46, .45, .94);
	}

body.top section.sect.sect01 ul.wrapper li:nth-child(odd){ margin-top: 0px; }
body.top section.sect.sect01 ul.wrapper li:nth-child(3n){ margin-top: 0px; }
body.top section.sect.sect01 ul.wrapper li:nth-child(6){ margin-top: 0px; }
body.top section.sect.sect01 ul.wrapper li:nth-child(7){ margin-top: 0px; }
body.top section.sect.sect01 ul.wrapper li:nth-child(8){ margin-top: 0px; }

body.top section.sect.sect01 ul.wrapper li:hover{
    box-shadow: 12px 21px 36px 0 rgba(0,0,0,.15);
    -webkit-transform: translate3d(0, -15px, 1px);
    transform: translate3d(0, -15px, 1px);
	}

body.top #main section.sect ul.wrapper li a.txt h3{
    color: #000;
	margin: 3%;
	}

body.top #main section.sect ul.wrapper li a.txt p{
	margin: 3%;
    text-align: left;
	}

body.top #main section.sect ul.wrapper li a.img{ margin: 0; }
body.top #main section.sect ul.wrapper li a.img:hover{ opacity: 1; }
body.top #topFooterContent{
    background: rgba(247, 242, 224, 0.76);
    padding: 50px 0;
	}

/* new hair style */
.colListItem{
	position: relative;
	overflow: hidden;
	}

.arrowPar{
	position: relative;
	box-sizing: border-box;
	overflow: hidden;
	height: auto;
	margin: 0 auto;
	}

.colListItem_anchor:hover img{
	-webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1);
	}

.colListItem img {
    width: 100%;
    height: auto;
	}

.trs-tfCb {
    -webkit-transition-timing-function: cubic-bezier(0, .96, .4, .99);
    -moz-transition-timing-function: cubic-bezier(0, .96, .4, .99);
    -ms-transition-timing-function: cubic-bezier(0, .96, .4, .99);
    -o-transition-timing-function: cubic-bezier(0, .96, .4, .99);
    transition-timing-function: cubic-bezier(0, .96, .4, .99);
	}

.trs-dr12 {
    -webkit-transition-duration: 1.2s;
    -moz-transition-duration: 1.2s;
    -ms-transition-duration: 1.2s;
    -o-transition-duration: 1.2s;
    transition-duration: 1.2s;
	}

.trs {
    -webkit-transition: all .1s ease;
    -moz-transition: all .1s ease;
    -ms-transition: all .1s ease;
    -o-transition: all .1s ease;
    transition: all .1s ease;
	}


.colListItem_anchor:hover .colListItem_overlay,
.colListItem_anchor:hover .colListItem_content,
.colListItem_anchor:hover .colListItem_detail {
    opacity: 100;
    filter: alpha(opacity=100);
	}

.colListItem_overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,.5);
	}

.colListItem_overlay,
.colListItem_content,
.colListItem_detail {
    opacity: 0;
    filter: alpha(opacity=0);
	}

.colListItem_lineWrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 80%;
    height: 87%;
    padding: 10%;
	}

.colListItem_lineWrapInner {
    position: relative;
    width: 100%;
    height: 100%;
	}

.colListItem_anchor:hover .colListItem_line-t,
.colListItem_anchor:hover .colListItem_line-b { width: 100%; }
.colListItem_line-t {
    top: 0;
    left: 0;
    height: 1px;
	}

.colListItem_line-t,
.colListItem_line-b { width: 0; }

.colListItem_line {
    position: absolute;
    background-color: #fff;
	}

.trs-dr03 {
    -webkit-transition-duration: .3s;
    -moz-transition-duration: .3s;
    -ms-transition-duration: .3s;
    -o-transition-duration: .3s;
    transition-duration: .3s;
	}

.colListItem_anchor:hover .colListItem_line-r,
.colListItem_anchor:hover .colListItem_line-l { height: 100%; }
.colListItem_line-r {
    top: 0;
    right: 0;
    width: 1px;
	}

.colListItem_line-r,
.colListItem_line-l { height: 0; }
.colListItem_line-b {
    right: 0;
    bottom: 0;
    height: 1px;
	}

.colListItem_line-l {
    bottom: 0;
    left: 0;
    width: 1px;
	}

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

.colListItem_anchor:hover .colListItem_content { top: -5px; }

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

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

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

body.top #main .shopdate{
	width: 110px;
	font-size: 16px;
	text-align: right;
    line-height: 23px;
	}

body.top #main .shopdate_h3 span.en{
	padding: 0 0 0.5rem;
    font-size: 2.4rem;
    letter-spacing: .11em;
	}

body.top #main .shopdate_h3 span.jp {
    margin-left: 1em;
    font-size: 1.4rem;
    letter-spacing: .11em;
	}

body.top #main .shopdate_h3 {
    font-size: 2.4rem;
    font-weight: normal;
    margin-bottom: 20px;
	border-bottom:dotted 1px #fff;
	}

body.top #main .shopdate_h3 h3{
    margin-bottom: 10px;
	font-weight: normal;
	}

body.top #main .shopdate p {
    font-size: 1.4rem;
    line-height: 1.6;
    overflow: auto;
	}

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

body.top #main .shopdate td {
    padding: 10px 40px 0 0;
    font-size: 1.4rem;
    line-height: 1.6;
    width: 60px;
	}

body.top #main .shopdate td:nth-child(2n){
	padding-right: 0;
    width: 100%;
	}

body.top .shopImg img{
	margin: 0 auto 60px;
    width: auto;
	}

.shopdate_h3{
	border-bottom: dotted 1px #fff;
    margin: 0 auto 20px;
	}

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

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

#mainVisual{ margin: 205px auto 50px; }

}

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

body.top h1{ margin-top: 175px; }
#mainVisual{
	margin-bottom: 60px;
	margin-top: 190px;
	width: 100%;
	overflow: hidden;
	}

#mainVisual img{
	width: 180%;
	max-width: 200%;
	margin-left: -40%;
	}

body.top #main{
	padding: 0;
	width: 100%;
	}

body.top #main section.sect{ margin: 0 auto 60px; }
body.top #main section.sect .titleArea{
	border: none;
	margin: 0 auto 10px;
	padding: 0;
	}

body.top #main section.sect .titleArea h2{ margin: 0 auto; }
body.top #main section.sect .titleArea a{
	text-decoration: none;
	margin: 0 auto;
	}

body.top #main section.sect .titleArea a span{
	padding-right: 0;
	background:none;
    padding: 10px;
	color: #000;
	}

body.top #main section.sect .titleArea a span:hover{
	background:#000;
	color: #fff;
	}

body.top #main section.sect .titleArea a:hover{ opacity: 1; }
body.top #main section.sect.sect02 ul.wrapper li{
	margin: 0 0 30px;
    width: 50%;
	background: #fff;
	}

body.top #main section.sect.sect02 ul.wrapper li:nth-child(3n+2){ margin: 0 0 20px; }
body.top #main section.sect.sect02 ul.wrapper li:nth-child(n + 5){ display: none; }
body.top #main section.sect.sect06 ul.wrapper li:nth-child(n + 5){ display: inline-block; }
.catch {
	top: 10%;
	left: 5%;
	width: 100px;
	}

body.top #main section.sect.sect01 ul.wrapper li{
	margin: 0;
    width: 33.3333333%;
	}

body.top #main section.sect.sect01 ul.wrapper li:nth-child(3n+2){ margin: 0; }
body.top #main section.sect.sect01 ul.wrapper li:nth-child(n + 7){ display: none; }
body.top #main section.sect ul.wrapper li a.txt p.top_media{
    font-size: 14px;
	top: 0;
	}

body.top #main section.sect ul.wrapper li a.txt p.top_blog{
	font-size: 25px;
	top:0px;
	}

body.top section.sect .wrapper{ width: 96%; }
body.top #main .shopdate{
	position: absolute;
	font-size: 14px;
	}

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

}

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

#mainVisual{ margin-top: 145px; }
body.top h1{ margin-top: 132px; }

}

@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_media{ display: none; }
#mainVisual{ margin-top: 125px; }
body.top h1{ margin-top: 112px; }
body.top #main section.sect.sect06 ul.wrapper li{ width: 100%; }

}

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

.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 .wrapper{
	width: 60%;
	margin: 0 auto;
	max-width: 740px;
	display: inline-block;
	vertical-align: middle;
	}

body.top section.sect03 .wrapper ul{ width: 100%; }
body.top section.sect03 ul.wrapper li{
	width: 100%;
    border-bottom: solid 2px #eee;
	}

body.top #main section.sect03 ul.wrapper li a.txt p{
	width: 15%;
    display: inline-block;
    text-align: left;
	margin: 2%;
	}

body.top #main section.sect03 ul.wrapper li a.txt h3{
    display: inline-block;
	width: 76%;
	margin: 2%;
    vertical-align: top;
	}

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

body.top #main section.sect03 .titleArea{
    display: block;
	width: 100%;
	}

body.top section.sect03 .wrapper{
    display: block;
	width: 90%;
	}

}

/*------top section にFacebook　グループに入れたとき---------*/
body.top section.sect04 .wrapper{ text-align: center; }
body.top #main section.sect04{ background: #f3f3f3; }
/*-----------top_shoplist--------------------------*/
body.top #main section.sect06 ul.wrapper li a.txt h3{ font-size: 18px; }
body.top #main section.sect06 ul.wrapper li a.txt p{
    line-height: 1.4;
    margin: 0 3%;
	color: #888;
	}

body.top #main section.sect06 ul.wrapper li a.txt{
    padding-bottom: 3%;
    display: block;
	}

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

body.top #main section.sect06 ul.wrapper li a.txt h3{ font-size: 16px; }

}

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

body.top #main section.sect.sect05 ul.wrapper li:nth-child(n + 3) { display: none; }

}

/*========================
 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: 24px;
	line-height: 37px
	}

body.company #main .sect p,
body.recruit #main .sect p,
body.concept #main .sect p{
	font-size: 14px;
    margin-bottom: 80px;
	}

table.recruit > tbody > tr > td:nth-child(2),
table.company > tbody > tr > td:nth-child(2){ background: rgba(243, 243, 243, 0.5);}

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

body.company #main .sect h2,
body.recruit #main .sect h2,
body.concept #main .sect h2{ font-size: 20px; }

}

@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.8);
    position: absolute;
    top: 0%;
	padding: 5%;
	z-index: 10;
    width: 35%;
    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: 16px;
    margin-bottom: 16px;
	}

body.concept #main .sect p{
	margin-bottom: 0;
	color: #fff;
	}

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

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

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

}

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

.concept_box{
	position:relative;
	top:0;
	width: 90%;
	padding-top: 50px;
	padding-bottom: 50px;
	}

}


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

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

body.top section.sect .titleArea a:hover{ opacity: 1; }

@keyframes more_line{
	0% {
		clip-path: polygon(0% 0%, 72% 0%, 72% 100%, 0% 100%);
	}
	100% {
		clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
	}
}

body.top section.sect .titleArea a span{
	background: none;
	width: 100px;
	text-align: center;
    margin: 0;
    border: solid 1px;
	}

body.top section.sect .titleArea a span:hover{
	background: #000;
	color: #fff;
	}

body.top section.sect .titleArea a span {
	position: relative;
	display: inline-block;
	padding: 10px;
	color: #000;
	text-decoration: none;
	outline: none;
	overflow: hidden;
	transition: all .5s;
	}

body.top section.sect .titleArea a span::before,
body.top section.sect .titleArea a span::after {
	position: absolute;
	display: block;
	content: '';
	transition: all .5s;
	}

body.top section.sect .titleArea a span::before {
	top: 0;
	left: -1px;
	border-top: 1px solid #000;
	border-left: 1px solid #000;
	}

body.top section.sect .titleArea a span::after {
	right: -1px;
	bottom: 0;
	border-right: 1px solid #000;
	border-bottom: 1px solid #000;
	}

body.top section.sect .titleArea a span:hover {
	background-color: #000;
	color: #fff;
	transition: all .7s;
	padding: 10px;
	}

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

.more_line {
    width: 70px;
    height: 1px;
    background: #4C4D4D;
    transform: rotate(0deg);
	position: absolute;
	left: 88px;
	top:16px;
	}

/* 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: -2px;
	width: 70px;
	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;
	margin-bottom: 2px;
	}

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;
	margin-bottom: 2px;
	}

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;
	}
/* stylist more ボタン　ここまで*/

/* style more ボタン*/
body.style #main .sect02 .titleArea a{
	text-decoration: none;
	text-align: center;
	margin-top: -2px;
	width: 70px;
	}

body.style #main .sect02 .titleArea a {
	position: relative;
	display: inline-block;
	padding: 10px;
	color: #000;
	outline: none;
	overflow: hidden;
	transition: all .5s;
	margin-bottom: 2px;
	}

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

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

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

body.stylist #main .stylistBox .txtInfo .blogArea .titleArea a,
body.stylist #main .sect02 .titleArea a{ margin-top: 7px; }

}

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

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

body.movie #content #main{
	background: rgba(243, 243, 243, 0.5);
    width: 96%;
    padding: 2%;
	}

/*========================
	media
========================*/
/*
★部分もともと<p>を削除し下記★に変更

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

body.media #main .sect02 ul.wrapper li{
	position: relative;
	margin: 0 0% 50px 0;
    position: relative;
    width: 25%;
	}

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

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

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

body.media #main .sect02 ul.wrapper li a.txt{
	text-align: center;
    background: rgba(175, 157, 124, 0.8);
    width: 70%;
    position: absolute;
    bottom: 0;
    left: 5%;
    padding: 5% 10%;
    margin-bottom: -25px;
	z-index: 10;
	}

.media-right{
	color: #fff;
	text-align: center;
	}

body.media #main .sect02 ul.wrapper li a.txt p{	margin: 0; }

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

body.media #main .sect02 ul.wrapper li{
	width: 49%;
	margin: 0 1% 50px 0;
	}

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

}

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

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

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

body.contact #main .confirm .btn{ width: 100%; }

}

/*========================
	shoplist
========================*/
body.shoplist #main .sect02 .titleArea{ border-bottom: solid 1px #333; }
body.shoplist #main .sect02 .titleArea h3{
	color: #333;
    font-weight: normal;
    padding-bottom: 10px;
    padding-left: 10px;
	}

body.shoplist #main .sect02 ul.wrapper li{
    transition: all .22s cubic-bezier(.25, .46, .45, .94);
	padding: 1%;
    width: 31%;
	margin: 0;
	}

body.shoplist #main .sect02 ul.wrapper li:nth-child(4n){ margin: 0; }
body.shoplist #main .sect02 ul.wrapper li:hover{
	box-shadow: 12px 21px 36px 0 rgba(0,0,0,.15);
    -webkit-transform: translate3d(0, -15px, 1px);
    transform: translate3d(0, -15px, 1px);
	}

body.shoplist #main .sect02 ul.wrapper li a:hover{ opacity: 1; }
body.shoplist #main .sect02 ul.wrapper li a.txt h3{
	color: #333;
    font-size: 16px;
	border-bottom: dotted 1px #000;
    padding-bottom: 10px;
	}

body.shoplist #main .sect02 ul.wrapper li a.txt p{ color:  rgba(175, 157, 124, 1); }
body.shoplist #main .sect ul.wrapper li a.img{ width: 100%; }

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

body.shoplist #main .sect02 .titleArea h3{ padding: 0 3%; }
body.shoplist #main .sect02 .titleArea h3 span.en{ font-size: 18px; }

}

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

body.shoplist #main .sect02 ul.wrapper li{ width: 48%; }

}

/*========================
	add style 2026/06/04
	New SiteDesign
========================*/

/* root */

:root {
	--color-main:#cc0000;
	--color-sub:#26272c;
	--color-bg:#f6f6f6;
	}

/* add fonts */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=Noto+Serif:ital,wght@0,100..900;1,100..900&display=swap');
/*
font-family: "Noto Sans", sans-serif;
font-family: "Noto Serif", serif;
*/

/* header */

header {
    border-top: none;
    position: relative;
    background: none;
    width: 100%;
    height: auto;
    top: 0;
    text-align: inherit;
    z-index: 100;
	background: #FFF;
	}

.header2026 {
	position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 1080px;
    height: 120px;
    margin: 0 auto;
	}

h1.headerLogo {
    font-size: 12px !important;
    text-align: center !important;
    position: relative !important;
    right: 0 !important;
    top: 0 !important;
	margin: 0;
	width: 200px;
	}

.headerLogo > a.logo { display: block; }
nav.nav2026 ul {
	display: flex;
	gap: 42px;
	margin: 0 auto;
	}

nav.nav2026 ul li a {
	display: block;
    font-family: "Noto Serif", serif;
    color: var(--color-sub);
    font-size: 16px;
    letter-spacing: 1px;
	transition: .3s;
	}

nav.nav2026 ul li a:hover { color: var(--color-main); }
.clone-nav, body.top .clone-nav {position: relative;}
body.menu-open { overflow: hidden; }

/* ===== ハンバーガー ===== */

.nav-toggle {
    display: none;
    position: relative;
    width: 48px;
    height: 48px;
    border: none;
    background: transparent;
    cursor: pointer;
    z-index: 1001;
	}

.nav-toggle span {
    position: absolute;
    left: 12px;
    width: 24px;
    height: 2px;
    background: #222;
    transition: var(--transition);
	}

.nav-toggle span:nth-child(1) { top: 16px; }
.nav-toggle span:nth-child(2) { top: 23px; }
.nav-toggle span:nth-child(3) { top: 30px; }

/* × */

.nav-toggle.active span:nth-child(1) {
    top: 23px;
    transform: rotate(45deg);
	}

.nav-toggle.active span:nth-child(2) { opacity: 0; }
.nav-toggle.active span:nth-child(3) {
    top: 23px;
    transform: rotate(-45deg);
	}

/* ===== SP ===== */

@media (max-width: 768px) {

	.header2026 {
		width: 100%;
		height: 80px;
		justify-content: right;
		}

	h1.headerLogo {
		position: absolute !important;
		left: 50%;
		transform: translate(-50%, -50%);
		top: 50% !important;
		margin: 0;
		width: 150px;
		}

	.nav-toggle { display: block; }
    .nav2026 {
		position: fixed;
		inset: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		opacity: 0;
		visibility: hidden;
		background: rgba(255, 255, 255, .7);
		backdrop-filter: blur(20px);
		-webkit-backdrop-filter: blur(20px);
		transition: var(--transition);
		z-index: 1000;
		}

    .nav2026.active {
		opacity: 1;
		visibility: visible;
		}

    .nav2026 ul {
		flex-direction: column;
		gap: 40px;
		}

    .nav2026 li {
		opacity: 0;
		transform: translateY(20px);
		transition:
			opacity .4s ease,
			transform .4s ease;
		}

    .nav2026.active li {
		opacity: 1;
		transform: translateY(0);
    	}

    .nav2026.active li:nth-child(1) { transition-delay: .1s; }
    .nav2026.active li:nth-child(2) { transition-delay: .18s; }
    .nav2026.active li:nth-child(3) { transition-delay: .26s; }
    .nav2026 a {
        font-size: 2rem;
        font-weight: 500;
    	}
}

@media only screen and (max-width: 600px) {
    body.top h1 { margin-top: auto; }
}

/* footer */
.footer2026 {
	padding: 60px 0;
	background: var(--color-sub);
	}

.footer2026 a {
	display: block;
	margin: 0 auto;
	width: 240px;
	}

.footer2026 .copy {
    margin: 60px auto 0;
    text-align: center;
    font-size: 16px;
    letter-spacing: 1px;
    color: #FFF;
	}

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

/* top page */
#mainVisual {
    text-align: center;
    width: 100%;
    z-index: 1;
    max-width: 100%;
    animation: 2s ease 0s 1 normal forwards running anime1;
    margin: 0 auto;
	}

@media only screen and (min-width: 1025px) {
    #mainVisual .swiper-wrapper {
        width: 100%;
        margin-bottom: 0;
    	}
}

.swiper-pagination { display: none; }
.swiper-container {
	height: 800px;
    overflow: hidden;
	}

.swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
	}

.topBanner {
	position: relative;
	width: 1080px;
	margin: 200px auto;
	border-radius: 15px;
	overflow: hidden;
	}

.topBanner h2 {
	position: absolute;
	margin: 0;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	font-family: "Noto Serif", serif;
	font-size: 30px;
	letter-spacing: 1px;
	color: #FFF;
	text-shadow: 0 0 10px #000;
	}

.topBanner h2 span {
	font-family: "Noto Sans", sans-serif;
	display: block;
	font-size: 16px;
	}

.topNews {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	width: 1080px;
	margin: 200px auto;
	}

.topNews h2 {
	text-align: center;
	width: 20%;
	}

.topNews h2 span.en {
	display: block;
	font-family: "Noto Serif", serif;
	font-size: 30px;
	letter-spacing: 1px;
	margin: 0 0 12px;
	}

.topNews h2 span.jp {
	display: block;
	font-family: "Noto Sans", sans-serif;
	font-size: 16px;
	letter-spacing: 1px;
	}

ul.topNews-list {
	display: flex;
	align-items: center;
	justify-content: left;
	width: 80%;
	margin: 0;
	}

ul.topNews-list li {
	width: 25%;
	border-right: solid 1px #CCC;
	}

ul.topNews-list li:last-child { border: none; }
ul.topNews-list li a {
    display: block;
    color: #000;
    font-size: 16px;
    line-height: 30px;
    letter-spacing: 1px;
    padding: 0 18px;
    box-sizing: border-box;
	}

ul.topNews-list li p { margin: 0 ;}
ul.topNews-list li a h3 {
	font-family: "Noto Serif", serif;
	margin: 12px 0;
	font-size: 21px;
	line-height: 36px;
	}

@media (max-width: 768px) {

	.swiper-container {
		height: 420px;
		overflow: hidden;
		}

	.topBanner {
		width: 90%;
		margin: 100px auto;
		}


	.topNews {
		flex-wrap: wrap;
		width: 90%;
		margin: 100px auto;
		}

	.topNews h2 {
		width: 100%;
		margin-bottom: 30px;
		}

	ul.topNews-list {
		flex-wrap: wrap;
		width: 100%;
		}

	ul.topNews-list li {
		width: 100%;
		border-right: none;
		border-bottom: solid 1px #CCC;
		margin-bottom: 30px;
		padding-bottom: 30px;
		}

	ul.topNews-list li a { padding: 0 ; }
	ul.topNews-list li a h3 { margin: 6px 0; }
	ul.topNews-list li:last-child {
		margin-bottom: 0;
    	padding-bottom: 0;
		}

}

/* salon */

body.salon { background: var(--color-bg); }
body.lower #pageTitleArea {
	max-width: 100%;
	margin: 120px 0;
	}

body.salon #pageTitleArea h1 {
    margin: 0;
    padding: 0;
    text-align: center;
	font-family: "Noto Sans", sans-serif;
    font-size: 16px;
    font-weight: normal;
    color: #000;
	letter-spacing: 3px;
	}

body.salon #pageTitleArea h1 span {
	font-family: "Noto Serif", serif;
    font-size: 32px;
	font-weight: bold;
	text-transform:none;
	letter-spacing: 3px;
	margin: 0 0 18px;
	}

.salon_category {
	display: block;
	margin-bottom: 60px;
	padding: 60px 60px 0;
	background: #FFF;
	border-radius: 15px;
	box-sizing: border-box;
	}

.salon_category h2 {
	font-family: "Noto Serif", serif;
    font-size: 24px;
	font-weight: bold;
	margin-bottom: 60px;
	}

ul.salon_list {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin: 0;
	}

ul.salon_list li {
	width: 48%;
	margin-bottom: 60px;
	font-size: 16px;
	line-height: 24px;
	letter-spacing: 1px;
	}

ul.salon_list li a { color: #000; }
ul.salon_list li h3 {
	font-family: "Noto Serif", serif;
    margin-bottom: 12px;
	}

p.salon_list_img {
	overflow: hidden;
	border-radius: 12px;
    margin: 0 0 30px;
	}

p.salon_list_tel {
	position: relative;
    font-size: 18px;
	margin: 0 0 12px;
	padding: 0 0 0 30px;
	}

p.salon_list_tel::before {
	position: absolute;
	display: block;
	content: "";
	background: url(/img/upload/2026/06/passage_new_salon_icon_tel.png) no-repeat;
	background-size: cover;
	width: 24px;
	height: 24px;
	left: 0;
	}

p.salon_list_add {
	position: relative;
	margin: 0 0 30px;
	padding: 0 0 0 30px;
	}

p.salon_list_add::before {
	position: absolute;
	display: block;
	content: "";
	background: url(/img/upload/2026/06/passage_new_salon_icon_add.png) no-repeat;
	background-size: cover;
	width: 24px;
	height: 24px;
	left: 0;
	}

a.salon_list_map {
	position: relative;
	padding-right: 24px;
	}

a.salon_list_map::after {
	position: absolute;
	display: block;
	content: "";
	background: url(/img/upload/2026/06/passage_new_salon_icon_new.png) no-repeat;
	background-size: cover;
	width: 18px;
	height: 18px;
    top: 3px;
    right: 2px;
	}

a.salon_list_more {
	display: block;
	padding: 12px 0;
	text-align: center;
	color: #FFF !important;
	background: var(--color-sub);
	border-radius: 12px;
	}

@media (max-width: 768px) {

	body.lower #pageTitleArea { margin: 60px 0; }
    body.salon #content {
        width: 100%;
        padding: 0;
        margin: 0px auto 80px;
	    }

	.salon_category {
		width: 90%;
		margin: 0 auto 60px;
		padding: 30px 30px 0;
		}

	.salon_category h2 { margin-bottom: 30px; }
	ul.salon_list li { width: 100%; }
	ul.salon_list li h3 { font-size: 18px; }
	p.salon_list_add { font-size: 14px; }

}

/* news */
body.news {	background: var(--color-bg); }
#containerInner {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	}
body.news #content { flex: 1; }
body.news #pageTitleArea h1 {
    margin: 0;
    padding: 0;
    text-align: center;
	font-family: "Noto Sans", sans-serif;
    font-size: 16px;
    font-weight: normal;
    color: #000;
	letter-spacing: 3px;
	}

body.news #pageTitleArea h1 span {
	font-family: "Noto Serif", serif;
    font-size: 32px;
	font-weight: bold;
	text-transform:none;
	letter-spacing: 3px;
	margin: 0 0 18px;
	}

.news_content { width: 100%; }
ul.news_block {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	width: 100%;
	margin: 0 0 60px;
	}

ul.news_block li {
	width: 49%;
	background: #FFF;
	padding: 0;
	margin: 0 0 30px;
	border-radius: 15px;
	overflow: hidden;
	}

ul.news_block li a {
	display: block;
	padding: 30px;
    color: #000;
    font-size: 16px;
    line-height: 30px;
    letter-spacing: 1px;
    box-sizing: border-box;
	}

ul.news_block li a p { margin: 0px; }
ul.news_block li a h3 {
    font-family: "Noto Serif", serif;
    font-size: 21px;
    line-height: 36px;
    margin: 12px 0px;
	}

/* pager */
.pager ul {
    list-style: none;
    position: relative;
    left: auto;
    float: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
	gap: 9px;
	margin: 0;
	}

.pager ul li {
    margin: 0;
    position: relative;
    left: 0;
    float: none;
	}

.pager ul li span,
.pager ul li a {
    display: block;
    font-family: "Noto Serif", serif;
    font-size: 16px;
	font-weight: bold;
    padding: 16px 20px;
    border-radius: 9px;
	}

.pager ul li a:hover {
    background: var(--color-sub);
    color: #FFF;
	opacity: 1;
	}

@media (max-width: 768px) {

    body.news #content {
        width: 100%;
        padding: 0;
        margin: 0px auto 60px;
	    }

	.news_content {
		width: 90%;
		margin: 0 auto;
		}

	ul.news_block { margin: 0 0 30px; }
	ul.news_block li { width: 100%; }
	ul.news_block li a h3 { margin: 6px 0px; }
	.pager { margin: 30px 0; }

}

/* news_article */
body.news_article {	background: var(--color-bg); }
#containerInner {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	}

body.news_article #content { flex: 1; }
body.news_article #pageTitleArea h1 {
    margin: 0;
    padding: 0;
    text-align: center;
	font-family: "Noto Sans", sans-serif;
    font-size: 16px;
    font-weight: normal;
    color: #000;
	letter-spacing: 3px;
	}

body.news_article #pageTitleArea h1 span {
	font-family: "Noto Serif", serif;
    font-size: 32px;
	font-weight: bold;
	text-transform:none;
	letter-spacing: 3px;
	margin: 0 0 18px;
	}

.news_article_block {
    width: 100%;
    background: #FFF;
    padding: 30px;
    margin: 0 auto;
    border-radius: 15px;
    box-sizing: border-box;
    font-size: 16px;
    line-height: 21px;
    letter-spacing: 1px;
	}

.news_article_block h2 {
    font-family: "Noto Serif", serif;
    font-size: 21px;
	font-weight: bold;
    line-height: 36px;
	margin: 12px auto;
	}

.news_article_block p { margin: 0px; line-height: 30px; }
.news_article_txt { line-height: 24px; }

@media (max-width: 768px) {

    body.news_article #content {
        width: 100%;
        padding: 0;
        margin: 0px auto 60px;
	    }

	.news_article_block { width: 90%; }

}

/* 404 */
body.notfound {	background: var(--color-bg); }
#containerInner {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	}

body.notfound #content { flex: 1; }
body.notfound #pageTitleArea h1 {
    margin: 0;
    padding: 0;
    text-align: center;
	font-family: "Noto Sans", sans-serif;
    font-size: 16px;
    font-weight: normal;
    color: #000;
	letter-spacing: 3px;
	}

body.notfound #pageTitleArea h1 span {
	font-family: "Noto Serif", serif;
    font-size: 32px;
	font-weight: bold;
	text-transform:none;
	letter-spacing: 3px;
	margin: 0 0 18px;
	}