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


html{
	font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    font-size: 12px;
}
body.top section.sect .titleArea h3 span.en{
	font-family: 'Spectral', serif;
    letter-spacing: 0;
	text-transform: uppercase;
}

nav.Nav li a{
	font-family: 'Spectral', serif;
    letter-spacing: 0;
	text-transform: lowercase;
}
/*予約ボタン*/
header #headerInner ul.pcBtn li.reserve a{
	font-family: 'Spectral', serif;
    letter-spacing: 0;
	text-transform: lowercase;	
}

/*go top*/
a#goTop span{
	font-family: 'Spectral', serif;
    letter-spacing: 0;
    text-transform: uppercase;
    font-size: 18px;
}
/*サブメニュー*/
div.submenu li a{
	font-family: 'Spectral', serif;
    letter-spacing: 0;
	text-transform: lowercase;
}

body.lower #pageTitleArea h1 span{
	font-family: 'Spectral', serif;
    letter-spacing: 0;
	text-transform: uppercase;
}
footer #footerInner #footerNav ul li a{
	font-family: 'Spectral', serif;
    letter-spacing: 0;
	text-transform: lowercase;
}
/*sub*/
#sub .subBox .titleArea p span.en{
	font-family: 'Spectral', serif;
    letter-spacing: 0;
	text-transform: lowercase;
	font-weight: normal;
}
/*sub style カテゴリ*/
#sub-style .subBox .titleArea p span.en{
	font-family: 'Spectral', serif;
    letter-spacing: 0;
	text-transform: lowercase;
	font-weight: normal;
}
/*sub blog カテゴリ メイン下*/
#sidebar .subBox .titleArea p span.en{
	font-family: 'Spectral', serif;
    letter-spacing: 0;
	text-transform: lowercase;
}

/*stylist*/
body.stylist #main .sect02 .titleArea h4 span.en,
body.stylist #main .stylistBox .txtInfo .blogArea .titleArea h4 span.en,
body.stylist .sect02 h3{
	font-family: 'Spectral', serif;
    letter-spacing: 0;
	text-transform: lowercase;
}
/*coupon*/
body.coupon #main section.sect01 .titleArea h4 span.en{
	font-family: 'Spectral', serif;
    letter-spacing: 0;
	text-transform: lowercase;

}
/*style　タイトル*/

body.style #main .sect02 .titleArea h3 span.en{
	font-family: 'Spectral', serif;
    letter-spacing: 0;
	text-transform: lowercase;
	font-size: 28px;
}
/*access タイトル*/
body.access #main .shopdate h4 span.en{
	font-family: 'Spectral', serif;
    letter-spacing: 0;
	text-transform: lowercase;
}

/*length menu*/
.length .titleArea p span.en{
	font-family: 'Spectral', serif;
    letter-spacing: 0;
	text-transform: lowercase;
}
/*top more*/
body.top section.sect .titleArea a span{
	font-family: 'Spectral', serif;
    letter-spacing: 0;
	text-transform: lowercase;	
}
/*menu*/
body.menu #main .sect .titleArea h4 span.en{
	font-family: 'Spectral', serif;
    letter-spacing: 0;
	text-transform: lowercase;
	font-size: 23px;
}

/*予約ボタン*/
header #headerInner ul.pcBtn li.reserve a span{
	font-family: 'Spectral', serif;
    letter-spacing: 0;
	text-transform: uppercase;
}





/*日本語*/
body.top section.sect .titleArea h3 span.jp{
	font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;

}

/*style カテゴリ*/
#sub-style .subBox .titleArea p span.jp{
	font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}
/*style　スタイル名*/
body.style #main .styleBox .txtInfo h3{
	font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}
/*style&stylist 小タイトル*/
body.style #main .sect02 .titleArea h3 span.jp,
body.stylist #main .stylistBox .txtInfo .blogArea .titleArea h4 span.jp,
body.stylist #main .sect02 .titleArea h4 span.jp{
	font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	display: none;
}
/*access 小タイトル*/
body.access #main .shopdate h4 span.jp{
	font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;	

}
/*coupon　ボタン*/
body.coupon #main section.sect01 .filterArea .btn button{
	font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}

/*お問合せページ*/
body.contact #main .btn input{
	font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;	
}
/*length menu*/
.length .titleArea p span.jp{
	font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;	
}


/*日本語　ゴシック*/

/*coupon　提示条件*/
body.coupon #main .result .couponArea .couponContent .img p,
body.coupon #main .result .couponArea .couponContent .txt p.couponDetail,
body.coupon #main .result .couponArea h5,
body.coupon #main section.sect01 .filterArea dl dd{
	font-family: "Noto Sans JP";
	font-size: 11px;
}
/*style&staff　coupon*/
body.style #main .couponArea .couponContent .img p,
body.stylist #main .couponArea .couponContent .img p,
body.style #main .couponArea .couponContent .txt p.couponDetail,
body.stylist #main .couponArea .couponContent .txt p.couponDetail{
	font-family: "Noto Sans JP";
	font-size: 11px;	
}

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


body{

}
#containerInner{

}

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

h4{
	margin: 0;
	font-weight: normal;
	font-size: 28px;
}
@media only screen and (max-width: 768px){
	body{

	}	
}
/*================== content mein area ======================================*/

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

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

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

}

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

/* all アニメーション　*/

#mainVisual,
.anime01 .scroll-animation,
.anime02 .scroll-animation,
.anime03 .scroll-animation,
.anime04 .scroll-animation,
.anime05 .scroll-animation,
.anime06 .scroll-animation{
	opacity: 0;
	animation-duration: 1.0s;
	animation-delay:0s;
	animation-timing-function:ease-in-out;
	animation-fill-mode:forwards;
	transform: translate3d(0,0,0);
    transform: translateZ(0);


}
#mainVisual{
	animation-name:is-animated00;
	-webkit-clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
	clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
	opacity: 1;
}
@keyframes is-animated00{
0%{
	-webkit-clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
	clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
	transform: scale(1.0);
	opacity: 1;
	}
100%{
	-webkit-clip-path: polygon(0 0, 100% 0%, 100% 100%, 0% 100%);
	clip-path: polygon(0 0, 100% 0%, 100% 100%, 0% 100%);
	transform: scale(1.0);
	opacity: 1;
	}
}

.anime01 .is-animated{
	animation-name:is-animated01;
    transform: translate(-60px,0);

}
@keyframes is-animated01{
0%{
    transform: translate(-60px,0);
	opacity: 0;
	}
100%{
    transform: translate(0,0px);
	opacity: 1;
	}


}

.anime02 .is-animated{
	animation-name:is-animated02;
    transform: translate(-60px,0);

}
@keyframes is-animated02{
0%{
    transform: translate(-60px,0);
	opacity: 0;
	}
100%{
    transform: translate(0,0px);
	opacity: 1;
	}

}

.anime03 .is-animated{
	animation-name:is-animated03;
    transform: translate(-60px,0);

}
@keyframes is-animated03{
0%{
    transform: translate(-60px,0);
	opacity: 0;
	}
100%{
    transform: translate(0,0px);
	opacity: 1;
	}
}

.anime04 .is-animated{
	animation-name:is-animated04;
    transform: translate(-60px,0);

}
@keyframes is-animated04{
0%{
    transform: translate(-60px,0);
	opacity: 0;
	}
100%{
    transform: translate(0,0px);
	opacity: 1;
	}
}
.anime05 .is-animated{
	animation-name:is-animated05;
    transform: translate(-60px,0);

}
@keyframes is-animated05{
0%{
    transform: translate(-60px,0);
	opacity: 0;
	}
100%{
    transform: translate(0,0px);
	opacity: 1;
	}

}
.anime06 .is-animated{
	animation-name:is-animated06;
    transform: translate(-60px,0);

}
@keyframes is-animated06{
0%{
    transform: translate(-60px,0);
	opacity: 0;
	}
100%{
    transform: translate(0,0px);
	opacity: 1;
	}

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

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


*/


header{
	border-top:none;
    position: absolute;

    width: 100%;
    height: 100px;
    z-index: 50;
    top: 0;
}
header #headerInner{
    width: 100%;
	padding: 0;
	max-width: 1920px;
    height: 0px;
}

header #headerInner ul.pcBtn li.reserve a{
    position: fixed;
    left: 0px;
    top: 0px;
    width: 50px;
    height: 100%;
    margin: 0 10px 20px 0;
    background: #b5caa3;
    -webkit-transition: all .6s ease;
    -moz-transition: all .6s ease;
    -ms-transition: all .6s ease;
    -o-transition: all .6s ease;
    transition: all .6s ease;
}
header #headerInner ul.pcBtn li.reserve a:hover{
	background: #eee;
	opacity: 1;
}
header #headerInner ul.pcBtn li.reserve a span{
    padding: 0;
    text-decoration: none;
    font-size: 19px;
    background: none;
    color: #fff;
    width: 188px;
    transform: rotate(90deg);
    position: absolute;
    top: 50%;
    left: -70px;

}
header #headerInner ul.pcBtn:hover li.reserve a span{
	color: #333;
	opacity: 1;
}
.Nav,
.top_h1{
    top: 0;
    z-index: 100;
	position: relative;
    width: 100%;
	max-width: 1920px;
}
.top_h1{
    top: -107px;
	height: 0;
}

.Nav > ul{
	text-align: right;
	position: absolute;
	width: 97%;
    max-width: 1369px;
}
.Nav > ul > li a{
    padding: 5px 12px;
	font-size: 18px;
	background: none;
}
.Nav > ul > li a:hover{
    color: #408ab1;
    opacity: 1;
}

.Nav > ul > li a{
	opacity: 0;
	animation-duration: 1s;
	animation-delay:1s;
	animation-timing-function:ease-in-out;
	animation-fill-mode:forwards;

	animation-name:is-animatedNAV;	
}
@keyframes is-animatedNAV{
0%{
	opacity: 0;
	}
100%{
	opacity: 1;
	}
}




.Nav .logoArea,
.top_h1 .logoArea{
    width: 300px;
    position: relative;
    top: 20px;
    left: 20px;
	animation-duration: 1s;
	animation-delay:0.8s;
	animation-timing-function:ease-in-out;
	animation-fill-mode:forwards;
	animation-name:logo_up;
	opacity: 0;
	margin: 0;
}
@keyframes logo_up{
0%{

	filter: blur(5px);
	opacity: 0;
	}
90%{

	filter: blur(0px);
	}
100%{
	filter: blur(0px);
	opacity: 1;
	}
}
body.top .Nav .logoArea,
body.top .top_h1 .logoArea{
    width: 300px;
    position: relative;
    top: 20px;
    left: 20px;
	margin: 0;

}
body.top .Nav .logoArea{
	height: 107px;	
}

body.top .Nav .logoArea .logo img{
	display: none;
}


ul.snsBtn_top{
	position: fixed;
    top: 50%;
    right: 8px;
	z-index: 150;
	margin-top: -120px;
}

ul.snsBtn_top li{
    width: 30px;
    margin-bottom: 9px;
    text-align: center;

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


}
@media only screen and (max-width: 1024px){
	.Nav,.top_h1{
		top: 0;
		width: 100%;
		left: 0;
		position: absolute;
		background: none;
		z-index: 1000;
	}
	.Nav .navbtn{
		right: 0;
		z-index: 1000;
		top: 0;
		position: fixed;
	}
	.Nav .navbtn a, .Nav .navbtn a.close{
		background-color: #000;
	}
	.Nav > ul{
		z-index: 100;
		padding: 40px 0px 10px 0px;
		text-align: left;
		width: 30%;
		float: right;
		background: rgba(51, 51, 51,0.9);
		max-width: 200px;
		position: relative;
		top: 0;
		margin-right: 0;
		position: fixed;
	}
	.Nav .logoArea,
	body.top .Nav .logoArea,
	body.top .top_h1 .logoArea{
		width: 260px;
	    position: fixed;
		top: 6px;
		left: 6px;
		margin: 0;
	}
	body.top .Nav .logoArea{
		height: auto;
	}

	.Nav .is-logoArea,
	body.top .Nav .is-logoArea,
	body.top .top_h1 .is-logoArea{
		animation-duration: 0.6s;
		animation-delay:0s;
		animation-timing-function:ease-in-out;
		animation-fill-mode:forwards;
		animation-name:is-logoArea;
		opacity: 1;
		top: 0px;
		left: 0px;
		height: auto;
	}
}
	@keyframes is-logoArea{
	0%{
		transform: scale(1,1);
		opacity: 1;
		}
	100%{
	    transform: scale(.72,.72);
		opacity: 1;
		}
	}
@media only screen and (max-width: 1024px){
	header{
	    height: auto;
	}
	header #headerInner{
	    height: 0;
	}
	body.top header #headerInner{
		border: none;
	}
	header #headerInner ul.spReserve{
	    margin: 0 auto;
	    width: 100%;
    	padding: 0;
	    position: fixed;
		bottom: 0;
		background: #b5caa3;
		border-top: solid 2px #b5caa3;
		border-bottom: solid 2px #b5caa3;
	}
	header #headerInner ul.spReserve li{
		width: 50%;
	}
	header #headerInner ul.spReserve li:nth-child(2){
	    border-left: dotted 1px #fff;
	}
	header #headerInner ul.spReserve li a{
		border: none;
	    padding: 5px 0;
		color: #fff;
		font-weight: bold;
	}
	header #headerInner ul.spReserve li a span,header #headerInner ul.spReserve li a img{
		display: inline-block;
	}
	header #headerInner ul.spReserve li a img{
		margin: 0 auto;
    	height: 30px;
		width: 30px;
	}
	header #headerInner ul.spReserve li a span{
		padding: 2px;	
	}

	.Nav > ul > li{
		width: 100%;
		border-bottom: none;
		text-align: center;
	}
	.Nav > ul > li a{
		padding: 8px 10px;
		color: #fff;
		animation-delay:0s;
		animation-duration: 0.5s;
	}

	.Nav ul.close{
		width: 100%;
		padding: 50px 0px;
		border: none;
		border-radius: 0 0 20px 20px;
	}
	.Nav ul.spReserve{
		display: none;
		padding: 0;
	}
	ul.snsBtn_top{
		right: 3px;

	}
	
}
@media only screen and (max-width: 768px){
	.Nav .logoArea, body.top .Nav .logoArea,body.top .top_h1 .logoArea{
		width: 140px;
	}
	header #headerInner{
	    height: 0;
	}
}

@media only screen and (max-width: 425px){
	header{
		height: 49px;
	}
	.Nav .logoArea, body.top .Nav .logoArea,body.top .top_h1 .logoArea{
		width: 120px;
	}

	.Nav > ul{
		top: -15px;
	}
	ul.snsBtn_top li{
		width: 25px;
	}
}
/*-------------クローンナビ装飾------------------------------------------------*/
.clone-nav,body.top .clone-nav {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 50;
    width: 100%;
    transition: .3s;
    transform: translateY(-440%);
    height: 60px;
	background: rgba(255, 255, 255, 0.8);
}

.is-show,body.top .is-show {
    transform: translateY(0);
}
.clone-nav .logoArea,body.top .clone-nav .logoArea{
    width: 60px;
    top: 0;
    margin: 18px 0 -24px 0;
    position: relative;
    left: 10px;	
}
body.top .clone-nav .logoArea{
	height: auto;
}
body.top .clone-nav .logoArea .logo img{
	display: block;
}
.clone-nav ul, body.top .clone-nav ul{
	position: relative;
	padding: 0px 0 0px;
	top:-4px;
}
.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: 1070px){
	.Nav > ul > li a{
		padding: 5px 10px;
	}
}

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

}

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

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

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

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

*/

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


footer{
	background: #6c75ab;
	background: url(/img/upload/2019/01/higashiomiya_footer_bg.jpg) center center;

    padding:  0;
}
#footerInner{
	width: 98%;
	padding: 0 1%;	
}
footer #footerInner #footerNav ul{
	width: 100%;
}
footer #footerInner #footerContent{
	width: 100%;
	display: block;
}
footer #footerInner #footerPolicy{
	background: none;
	padding: 0;
}
footer #footerInner #footerPolicy ul{
	margin-bottom: 0;
    margin-left: 43px;
}
footer #footerInner #footerContent #footerInfo{
	width: 60%;
	margin: 0 auto;
}
footer #footerInner #footerContent #footerInfo #footerLogo{
	display: block;
    width: 300px;
    margin: 0px auto;
    padding: 20px;
}
footer #footerInner #footerContent #footerInfo #footerLogo a{
    width: 200px;
    height: auto;
    margin: 30px auto;
    text-align: center;
}
footer #footerInner #footerContent #footerInfo #footerLogo p{
    width: 100%;
    margin: 0;
	text-align: center;
}
footer #footerInner #footerContent #footerInfo .txtInfo{
	display: inline-block;
	width: 100%;
	text-align: center;
}
footer #footerInner #footerContent .businessHourWrapper{
	display: flex;
	width: 80%;
	margin: 30px auto;
	max-width: 1200px;
}
.businessHourWrapper .businessHour,.finalAcceptance,.finalAcceptance{
	width: 32%;
	display: inline-block;
	text-align: center;
	vertical-align: top;
}
footer #footerInner #footerContent .businessHour p,
footer #footerInner #footerContent .finalAcceptance p{
	border-bottom: dotted 1px;

    padding-bottom: 5px;
    margin:0 auto 10px;
	margin-left: 0;
	text-align: left;
    font-size: 14px;
}
footer #footerInner #footerContent .businessHour dl,
footer #footerInner #footerContent .finalAcceptance dl{
	text-align: left;
    font-size: 14px;
	margin-bottom: 0;
}


footer #footerInner #footerContent .finalAcceptance dl{
	width: 100%;
	display: block;

}
footer #footerInner #footerContent #footerLink{
	margin: 0 auto;
	width: 60%;
	max-width: 800px;
}
footer #footerInner #footerContent #footerLink ul.actionBtn{
	width: 100%;
    display: flex;
    justify-content: space-around;
}

footer #footerInner #footerContent #footerLink ul.actionBtn li.recruit{
	background: none;	
}
footer #footerInner #footerContent #footerLink ul.actionBtn li,
footer #footerInner #footerContent #footerLink ul.actionBtn li.recruit,
ooter #footerInner #footerContent #footerLink ul.actionBtn li.reserve,
footer #footerInner #footerContent #footerLink ul.actionBtn li.contact{
	border: none;
	height: auto;
	margin: 0;
	width: 30%;
}

footer #footerInner #footerContent #footerLink ul.actionBtn li a{
	width: 100%;
	margin: 0 auto;
	height: auto;
    padding: 12px;
	box-sizing: border-box;
}
footer #footerInner #footerContent #footerLink ul.actionBtn li.reserve a,
footer #footerInner #footerContent #footerLink ul.actionBtn li.recruit a,
footer #footerInner #footerContent #footerLink ul.actionBtn li.contact a{
	background: #fff;
	color: #333;
}

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

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

footer #footerInner #footerContent #footerLink ul.snsBtn{
    position: relative;
    bottom: 0;
    display: flex;
    justify-content: center;
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
}
footer #footerInner #footerContent #footerLink ul.snsBtn li{
	margin: 0 10px;

}
footer #footerInner #footerContent #footerLink ul.snsBtn li a img{
	height: 40px;
	width: 40px;
}
footer #footerInner #footerContent #footerLink ul.snsBtn li.fb a img{
    width: 18px;
}
.businessHourWrapper .businessHour,
.finalAcceptance,
.finalAcceptance{
    background: none;
    padding: 10px;
    box-sizing: border-box;
    border: solid 1px #fff;
}
@media only screen and (max-width: 1024px){
	footer{
	    padding-bottom: 50px;
	}

	footer #footerInner #footerContent #footerLink ul.actionBtn li.recruit,
	footer #footerInner #footerContent #footerLink ul.actionBtn li.reserve, 
	footer #footerInner #footerContent #footerLink ul.actionBtn li.contact{
	    display: block;
		width: 90%;
		margin: 0 auto 10px;
		background: none;
	}
	footer #footerInner #footerContent #footerInfo{
		width: 90%;
	}
	footer #footerInner #footerContent .businessHourWrapper{
		width: 90%;
	    margin: 10px auto;
	}
	footer #footerInner #footerContent #footerLink ul.snsBtn{
	    width: 100%;
	}

	footer #footerInner #footerContent #footerInfo #footerLogo{
		width: 100%;
	    padding: 10px 0 0;
	}
	footer #footerInner #footerContent #footerInfo #footerLogo a{
		display: block;
		width: 120px;
	}
	footer #footerInner #footerContent #footerInfo .txtInfo{
		width: 100%;
	}
	footer #footerInner #footerContent #footerInfo #footerLogo p.salonName{
		font-size: 20px;
		margin: 10px auto;
	}
	footer #footerInner #footerContent #footerInfo .txtInfo p.address{
		font-size: 12px;
		margin-bottom: 10px;
	}
	footer #footerInner #footerContent #footerLink ul.actionBtn li a{
	    padding: 12px;
		font-size: 15px;
	}
	footer #footerInner #footerContent #footerLink ul.actionBtn{
	    display: block;
		width: 300px;
		margin: 30px auto;

	}
}
@media only screen and (max-width: 768px){
	footer #footerInner #footerContent #footerLink{
		width: 100%;
	}
	footer #footerInner #footerContent .businessHourWrapper{
		width: 100%;
		margin: 10px auto 20px;
		display: block;
	}
	footer #footerInner #footerContent .finalAcceptance,
	.businessHourWrapper .businessHour{
		width: 80%;
		display: block;
		margin: 0 auto 6px;
	}

	footer #footerInner #footerContent .businessHour p,
	footer #footerInner #footerContent .finalAcceptance p,
	footer #footerInner #footerContent .businessHour dl,
	footer #footerInner #footerContent .finalAcceptance dl{
		text-align: center;
	}

}
@media only screen and (max-width: 425px){
	footer #footerInner #footerContent #footerLink ul.actionBtn{
	    display: block;
		width: 200px;
		margin: 20px auto;

	}
	footer #footerInner #footerContent #footerLink ul.snsBtn li{
		margin: 0 5px;

	}
	footer #footerInner #footerContent #footerLink ul.snsBtn li a img{
		height: 35px;
		width: 35px;
	}
}


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

	}
}
@media only screen and (max-width: 425px){
	body.lower #content{
		width: 90%;
		margin: 0px auto 40px;
	}
}
    
/*=============================================================*/
/*=====================　各ページタイトル　========================*/
body.lower #pageTitleArea{
	margin: 0px auto 60px;
	background: none;
	height: auto;
    padding: 120px 0 0;
	position: relative;
    width: 14%;
    max-width: 156px;	
}

body.lower #pageTitleArea::before{
    content: "";
    width: 10px;
    height: 10px;
    position: absolute;
    bottom: 0;
    border-left: solid 1px #333;
    z-index: -1;
    left: 0;
    border-bottom: solid 1px;

    
}
body.lower #pageTitleArea::after{
    content: "";
    width: 10px;
    height: 10px;
    position: absolute;
    bottom: 0;
    border-right: solid 1px #333;
    z-index: -1;
    right: 0;
    border-bottom: solid 1px;
}
body.lower #pageTitleArea h1{
	margin-top: 0px;
	position: relative;
	padding: 40px 0;
    font-size: 14px;
	text-align: center;
}
body.lower #pageTitleArea h1::before{
    content: "";
    width: 10px;
    height: 10px;
    position: absolute;
    top: 0;
    border-left: solid 1px #333;
    z-index: -1;
    left: 0;
    border-top: solid 1px;
}
body.lower #pageTitleArea h1::after{
    content: "";
    width: 10px;
    height: 10px;
    position: absolute;
    top: 0;
    border-right: solid 1px #333;
    z-index: -1;
    right: 0;
    border-top: solid 1px;
}
body.lower #pageTitleArea h1 span{
    font-size: 20px;
	margin-bottom: 4px;
	font-weight: normal;
	display: block;

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

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

@media only screen and (max-width: 1024px){
	body.lower #pageTitleArea{
		margin-top: 140px;
		padding-top: 0;
		width: 134px;
	    margin-bottom: 50px;
	}
	body.lower #pageTitleArea h1{
	    margin: 0px 0 0;
	    padding: 36px 0;
		font-size: 12px;
	}
	body.lower #pageTitleArea h1 span{

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

	}
	body.lower #pageTitleArea h1 span{

	}
	body.lower #pageTitleArea{


	}
}
@media only screen and (max-width: 425px){
	body.lower #pageTitleArea{
		width: 110px;
	}
	body.lower #pageTitleArea h1{
		margin: 50px 0 0;
	    text-align: center;
	    padding: 26px 0;
		font-size: 10px;
	}
	body.lower #pageTitleArea h1 span{
	    font-size: 16px;

	}
	body.lower #pageTitleArea p{
		text-align: center;
		margin: -3% 0 0;
	}
	body.lower #pageTitleArea::before,
	body.lower #pageTitleArea::after,
	body.lower #pageTitleArea h1::before,
	body.lower #pageTitleArea h1::after{
		width: 5px;
    	height: 5px;
	}
}

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


#sub .subBox{
	padding: 0;
}

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

	color: #333;
    text-decoration: none;
    float: none;
    text-align: center;
    padding: 0px;
	position: relative;
	width: 32px;
    margin: 0 auto 20px;
    border-bottom: dotted 1px ;
}
#sub .subBox .titleArea a:hover{
	background: #333;
	opacity: 1;
	color: #fff;
    border: solid 1px #333;
}
#sub .subBox .titleArea a span{
    padding-right: 0;
    background: none;
}
#sub .subBox .titleArea p{
    font-weight: bold;
	float: none;
	text-align: center;
	padding-bottom: 6px;
    padding-top: 24px;
}
#sub .subBox .titleArea p span.jp{
	margin: 3px 0;
    display: none;
}

/* #sub category */
#sub #subCategory,#sub #subFaq{
    position: relative;
    padding: 18px;
    background: #eee;
}
#sub #subCategory .titleArea,#sub #subFaq .titleArea{
	border: none;
    width: 90%;
    margin: 0 auto -18px;
    position: relative;
    border-bottom: solid 2px #fff;
}

#sub #subCategory .titleArea p,#sub #subFaq .titleArea p{
    color: #333;
}
#sub #subCategory ul,#sub #subFaq ul{
    padding: 40px 0 0px;
	margin: 0;
}
#sub #subCategory ul li a,#sub #subFaq ul li a{
	color: #333;
}


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

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


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

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

*/
#sub #subBlog,
#sub #subNews{
	padding: 20px 0 0;
	border: solid 1px #eee;
}
#sub .subBox .wrapper{
	margin-bottom: 0;

}
#sub .subBox .wrapper article{
    padding: 0;
    margin-bottom: 6px;
    position: relative;
    background: none;
}
.sidebar_img{
    width: 100%;
    display: inline-block;
}

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

#sub .subBox .wrapper article a.linkToArticle{
	display: block;
	padding: 0 12px;
}
#sub .subBox .wrapper article a.linkToArticle p{
	padding: 0px 0 0;
    margin: 0 auto;
}
#sub .subBox .wrapper article a.linkToArticle p.title{
font-size: 14px;
    margin: 0px 0 10px;
    padding: 10px 0 0px;
}
#sub #subBlog .wrapper article ul,
#sub #subNews .wrapper article ul{
	display: block;
    margin-bottom: 0;
	width: 100%;
}
#sub .subBox .wrapper article ul li.date{
    color: #fff;
    position: relative;
    margin: 5px 0 0;
    text-align: right;
	padding: 0 12px 12px;
}
#sub .subBox .wrapper article ul li.author{
	position: static;
}

/*  #subStyle  */
#sub #subStyle ul.wrapper li{
	width: 50%;
    margin-bottom: 0;
}
#sub #subStyle ul.wrapper li:nth-child(3n+2){
    margin: 0;
}
#sub #subStyle ul.wrapper li:nth-child(odd){
	margin-right: 0;
}
#sub #subStyle ul.wrapper li a.img{
	margin: 0;
	display: block;
}
#sub #subStyle ul.wrapper li a.txt{
	display: none;
}
#sub #subBlog .wrapper article span.category,
#sub #subNews .wrapper article span.category{
    margin-top: 12px;
    display: block;

}

#sub #subBlog .wrapper article span.category a,
#sub #subNews .wrapper article span.category a{
    text-decoration: none;
    position: relative;
    top: 0;
    right: 0;
    background: none;
    color: #000;
    text-align: center;
    padding: 2px 0;
    width: 92%;
    box-sizing: border-box;
    margin: 0 auto;
    display: block;
    border: solid 1px #ccc;
    border-radius: 20px;
}
#sub #subBlog .wrapper article span.category a:hover,
#sub #subNews .wrapper article span.category a:hover{
	opacity: 1;
}

#sub #subStaff,
#sub #subBlogcate{
	padding: 18px;
	box-sizing: border-box;
    border: solid 1px #eee;
}
#sub #subStaff .titleArea,
#sub #subBlogcate .titleArea{
	width: 90%;
	margin: 0 auto 10px;
    border-bottom: solid 2px #eee;
}
#sub #subStaff ul li a,
#sub #subCategory ul li a,
#sub #subFaq ul li a, #sub #subNewscate ul li a, #sub #subMedicate ul li a, #sub #subBlogcate ul li a{
	font-size: 14px;
}

@media only screen and (max-width: 1024px){
	#sub{
		width: 100%;
		margin: 0 auto;
	}
	#sub .subBox{
    	margin-bottom: 20px;
	}
	#sub #subBlog,
	#sub #subNews{
		padding: 20px 0 10px;
	}
	#sub .subBox .wrapper{

	}
	#sub .subBox .wrapper article{
	    width: 48.5%;
		display: inline-block;
		margin: 0 1%;
	    vertical-align: top;
	}
	#sub .subBox .wrapper article:nth-child(even){
		margin-right: 0;
    	margin-left: 0;
	}
	#sub #subBlog .wrapper article span.category a,
	#sub #subNews .wrapper article span.category a{
		width: 100%;
	    text-align: center;
	}
	#sub .subBox .titleArea{
		padding: 0;
		margin: 0;
	}
	#sub .subBox .titleArea a{
		padding: 6px;
		margin: 5px auto 0;
		
	}

	#sub #subStaff ul li a, #sub #subCategory ul li a, #sub #subMedicate ul li a, #sub #subBlogcate ul li a, #sub #subNewscate ul li a, #sub #subFaq ul li a{
		border-bottom: none;
	}
	#sub #subStyle ul.wrapper li{
		width: 25%;
	}
	#sub .subBox .titleArea p{
		padding: 20px 0 8px;
	}
	#sub .subBox .titleArea p span.en{
		font-size: 28px;
	}
}
@media only screen and (max-width: 425px){
	#sub .subBox .wrapper article,
	#sub .subBox .wrapper article:nth-child(even){
		width: 100%;
		margin:0 ;
		display: block;
	
	}
	#sub .subBox .titleArea p span.en{
		font-size: 22px;
	}
}

/*=============================================================*/
/*=====================　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">
                <h3>{staff.name} {staff.kana}</h3>
                [staff_position]<p class="job">{staff.position}</p>[/staff_position]★
                <ul class="sns">

*/


body.stylist #content{

	
}
body.stylist #content #main{
    margin-top: 0px;
	padding-top: 30px;
}
body.stylist_details #content #main,
body.style_details #content #main{
    width: 100%;
    padding: 0;
    box-sizing: border-box;
	background: rgba(255, 255, 255, 0.7);
	margin-top: 0;
}

body.stylist #main .stylistBox .visualInfo{
	width: 47%;
}
body.stylist #main .stylistBox .visualInfo .photo{
    width: 100%;

}
body.stylist #main .stylistBox .visualInfo .photo img{
	width: 100%;
}

body.stylist #main .stylistBox .visualInfo .calendar .calendarInner{
	border: 1px solid #868582;
}
body.stylist #main .stylistBox .visualInfo .calendar .calendarInner .month{
    background-color: #868582;
}




body.stylist #main .stylistBox .txtInfo{
	width: 50%;
	color: #666;
	position: relative;
}
body.stylist #main .stylistBox .txtInfo h3{
    font-size: 26px;
	color: #333;
	line-height: 0.9;
	margin: 0 0 20px;
}

body.stylist #main .stylistBox .txtInfo h3 span{
	margin-left: 0;
	font-size: 15px;
}
body.stylist #main .stylistBox .txtInfo p.job{
    font-size: 16px;
	color: #333;
    margin-bottom: 8px;
    border: solid 1px #eee;
    border-radius: 20px;
    padding: 6px;
    width: 100%;
    box-sizing: border-box;
	text-align: center;
}

body.stylist #main .stylistBox .txtInfo ul.sns{
	margin: 0 0 8px auto;
}

body.stylist #main .stylistBox .txtInfo p.catch02{
    font-size: 19px;
    width: 100%;
    padding: 3% 0;
    line-height: 1.4;
    box-sizing: border-box;
    color: #408ab1;
   margin-bottom: 10px; 
	font-weight: bold;
}

body.stylist #main .stylistBox .txtInfo .career{
    background: rgba(218, 230, 234, 0.3);
    padding: 20px 20px 0;
    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:last-child,
body.style #main .styleBox .txtInfo .box dl:last-child{
	margin-bottom: 0;
}
body.stylist #main .stylistBox .txtInfo .career dl dt{
	width: 100%;
	border-bottom: solid #fff;
    padding: 0 0 2px; 
    margin: 0 auto 6px;
    font-size: 14px;
}
body.stylist #main .stylistBox .txtInfo .career dl dd{
    overflow-y: hidden;
    width: 100%;
    padding: 0;
    display: block;
    margin: 0;
    font-size: 14px;
    line-height: 24px;
    letter-spacing: -0.5px;
	margin-bottom: 20px;
}


body.stylist #main .stylistBox .txtInfo .blogArea .titleArea a{
	text-decoration: none;
}
body.stylist #main .stylistBox .txtInfo .blogArea .wrapper article ul li.author a{
	text-decoration: none;
}
body.stylist .sect02{
    margin: 0;
    position: relative;
}
body.stylist #main .sect02 .titleArea a{
	text-decoration: none;
}
body.stylist #main .stylistBox .txtInfo .blogArea .titleArea h4,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 h4{
	color: #333;	
}
body.stylist #main .sect02 .titleArea{
	border-bottom: none;
}

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 h5{
	position: absolute;
    bottom: 0;
    left: 0;
    color: #fff;
	margin: 3px;
	font-size: 16px;
}

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


/*stylist style  taitle*/
body.stylist #main .stylistBox .txtInfo .blogArea .titleArea,
body.stylist #main .sect02 .titleArea,
body.style #main .sect02 .titleArea{
    border-bottom: solid 2px #eee;
    clear: both;
	margin: 0 auto 16px;
}
body.stylist #main .sect02 .titleArea h4,
body.stylist #main .stylistBox .txtInfo .blogArea .titleArea h4,
body.style #main .sect02 .titleArea h3{
	margin-bottom: -30px;
	font-size: 28px;
}
/*stylist style  more*/

@media only screen and (max-width: 1024px){
	body.stylist #main .stylistBox .txtInfo p.catch02{
		width: 100%;
		top: 0%;
		left: 0%;
	}
	body.stylist #main .stylistBox .visualInfo .photo{
		width: 54%;
		display: inline-block;
	}
	body.stylist #main .stylistBox .visualInfo .calendar{
		width: 40%;
		margin: 0 auto;
		display: inline-block;
		margin-left: 4%;
		vertical-align: middle;
	}
	body.stylist #main .stylistBox .txtInfo h3{
		margin: 20px 0 10px;	
	}
	body.stylist #main .stylistBox .txtInfo ul.sns li{
	    padding-left: 2px;
	}
	body.stylist #main .stylistBox .txtInfo .blogArea .titleArea,
	body.stylist #main .sect02 .titleArea,
	body.style #main .sect02 .titleArea{
	    padding-bottom: 4px;
	}
	body.stylist #main .stylistBox .txtInfo h3 span{
	    font-size: 14px;
	}
	body.stylist #main .stylistBox .txtInfo p.job{
	    font-size: 14px;
	}
	body.style #main .sect02 .titleArea h3 span.en,
	body.stylist #main .stylistBox .txtInfo .blogArea .titleArea h4 span.en,
	body.stylist #main .sect02 .titleArea h4 span.en{
	    font-size: 25px;
	}
}
@media only screen and (max-width: 768px){
	body.stylist #main .stylistBox .txtInfo p.catch02{
		font-size: 17px;
	}
}
@media only screen and (max-width: 640px){
	body.stylist #main .stylistBox .visualInfo .photo,
	body.stylist #main .stylistBox .visualInfo .calendar{
		width: 100%;
		display: block;
	    margin: 0 auto 10px;
	}
}

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

	}
	body.stylist #content #main{
		margin-top: 20px;
	}
	body.stylist_details #content #main{
		margin-top:0;
	}
	body.stylist #main .stylistBox .txtInfo h3{
	    font-size: 24px;
	}
	body.stylist #main .sect02 ul.wrapper li a.txt h5{
		display: none;
	}



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

.wrapper{
	margin-bottom: 0;
}



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


/*=============================================================*/
/*=====================　staff　一覧　========================*/
.wrapper_stylist{
	margin: 0 auto;
	padding-bottom: 30px;
	overflow: visible;
}
body.stylist .sect02 h3{
	padding-bottom: 0;
    margin-bottom: -7px;
    font-size: 32px;
    font-weight: normal;
    z-index: 100;
    position: absolute;
    top: -28px;
}
ul.wrapper_stylist li{
	margin: 0;
	position: relative;
	width: 22%;
    margin-right: 4%;
    margin-bottom: 20px;
}


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

	
}
body.stylist #main .sect02 ul.wrapper_stylist li a.img img{
	width: 100%;
    margin-bottom: 0px!important;
}
body.stylist #main .sect02 ul.wrapper_stylist li a.img img:hover{

}
body.stylist #main .sect02 ul.wrapper_stylist li a.txt{
	text-align: center;
    background: #fff;
    width: 80%;
    position: relative;
    display: block;
    bottom: 0;
    left: 0;
    padding: 20px 20px 1px 0;
    z-index: 10;
    box-sizing: border-box;
    margin: -33px auto 0;
	margin-left: 0;

}
body.stylist #main .sect02 ul.wrapper_stylist li a.txt h4{
	margin: 0 0;
    font-size: 18px;
    color: #000;
}
body.stylist #main .sect02 ul.wrapper_stylist li a.txt p{
	color: #000;
    margin-bottom: 0;
	font-size: 11px;
}
@media only screen and (max-width: 1024px){
	ul.wrapper_stylist li:nth-child(3n){
		margin: 0 4% 20px 0;
	}	
}

@media only screen and (max-width: 768px){
	ul.wrapper_stylist li:nth-child(4n){
    	margin: 0px 4% 20px 0;
	}
	ul.wrapper_stylist li{
	    width: 30.6%;
    	margin: 0px 4% 20px 0;
	}
	ul.wrapper_stylist li:nth-child(3n){
		margin-right: 0;
	}	
	body.stylist #main .sect02 ul.wrapper_stylist li a.img img{

	}

}
@media only screen and (max-width: 425px){
	ul.wrapper_stylist li{
	    margin-bottom: 10px;
	}
	body.stylist #main .sect02 ul.wrapper_stylist li a.txt h4{
		font-size: 12px;
	}
	body.stylist #main .sect02 ul.wrapper_stylist li a.txt p{
		font-size: 10px;
	}
	body.stylist .sect02 h3{
		font-size: 26px;
		top: -23px;
	}
	body.stylist #main .sect02 ul.wrapper_stylist li a.txt{
	    padding: 6px 0px 1px 0;
		width: 94%;
	    margin: -24px auto 0;
		margin-left: 0;
	}
}


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


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

/* 下記を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: 'Arapey', serif;
    margin: 0;
    color: #666;
    font-weight: normal;
    letter-spacing: 0.1em;
}
#sub-style .subBox .titleArea p span.en{
	font-size: 2.2rem;
    letter-spacing: .11em;
}
#sub-style .subBox .titleArea p span.jp{
    margin-left: .4em;
    font-size: 1.3rem;
	display: none;
}


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

/*=============================================================*/
/*=====================　style　一覧　========================*/


body.style .sect02{
    position: relative;
	top: 0;
	padding: 0;
}
body.style #main .sect02 ul.wrapper{
    margin: 0;
}


body.style #main .sect02 ul.wrapper li{
	margin: 0px 4% 0 0;
	width: 22%;
	height: auto;
	position: relative;
}
body.style #main .sect02 ul.wrapper li:nth-child(4n){
	margin: 0px 0 0 0;
}





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

}
body.style #main .sect02 ul.clearfix li a.txt{
	position: relative;
	left: 0;
    width: 88%;
    z-index: 10;
    display: block;
    background: rgba(255, 255, 255, 1);
    padding: 12px 12px 0 0;
    box-sizing: border-box;
    top: -40px;
}
body.style #main .sect02 ul.clearfix li a.txt:hover{
	opacity: 1;
}
body.style #main .sect02 ul.clearfix li a.txt h4{
    padding-bottom: 10px;
    color: #333;
    font-weight: bold;
    letter-spacing: -0.5px;
    font-size: 14px;
    margin: 0;
    line-height: 21px;
}
body.style #main .sect02 ul.wrapper li a.txt p{
	font-size: 12px;
    margin-bottom: 0;
    line-height: 19px;
}


@media only screen and (max-width: 1024px){
	body.style #main .sect02 ul.wrapper li:nth-child(3n+2){
	    margin: 0px 4% 0 0;
	}
	body.style #main .sect02 ul.clearfix li a.txt{
		top: -30px;
	}
}


@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:nth-child(4n){
	    margin: 0px 4% 0 0;
	}
	body.style #main .sect02 ul.wrapper li{
		width: 30.6%;
	    margin: 0px 4% 0 0;
	}
	body.style #main .sect02 ul.wrapper li:nth-child(3n){
		margin-right: 0;
	}
	body.style_details #main .sect02 ul.wrapper li:nth-child(4n){
		margin: 0;
	}
	body.style #main .sect02 ul.clearfix li a.img{

	}
	body.style #main .sect02 ul.clearfix li a.txt{
		padding: 10px 10px 0 0;
	    top: -20px;
	}
	body.style #main .sect02 ul.clearfix li a.txt h4{
		font-size: 12px;
	}
	body.style #main .sect02 ul.wrapper li a.txt p{
		display: none;
	}

	
}
@media only screen and (max-width: 425px){
	body.style #main .sect02 ul.clearfix li a.txt{
		display: none;
	}
	body.style #main .sect02 ul.wrapper li{
		margin: 0px 4% 10px 0;
	}
}


/* length menu */
.length{
	box-sizing: border-box;
    padding: 30px 0px 16px;

}
.length .titleArea{
	width: 18%;
	display: inline-block;
	vertical-align: middle;
	position: relative;
}
.length .titleArea::before{
	content: "";
	position: absolute;
	top:50%;
	right: 0;
	width: 40px;
	height: 1px;
	background: #333;
	transform: rotate(-45deg);
}
.length .titleArea p{
	margin: 0;
}
.length .titleArea p span.en{
	font-size: 28px;
	display: block;

}
.length .titleArea p span.jp{
	font-size: 16px;
	display: none;
}
.length ul{
	width: 80%;
	display: inline-block;
	margin-left: 1%;
	vertical-align: middle;	
    margin: 0;
}
.length ul li{
	display: inline-block;

}
.length ul a{
	font-size: 14px;
    color: #333;
    border: solid 1px #888;
    padding: 3px 20px;
    display: block;
    border-radius: 30px;
	margin: 2px;

}
@media only screen and (max-width: 1024px){
	.length ul a{
	    padding: 2px 14px;
	}
}
@media only screen and (max-width: 768px){
	.length .titleArea{
	    width: 120px;
	    display: block;
	}
	.length ul{
	    width: 100%;
		display: block;
	    margin-top: 8px;
	}
	.length{
		padding: 20px 0px 8px;
	}
	.length ul a{
		font-size: 12px;
	    padding: 3px 8px 1px;
	}
	.length .titleArea p span.en{
		font-size: 22px;
	}
	.length .titleArea::before{
		width: 30px;
	}
}
@media only screen and (max-width: 425px){
	.length{
	    padding: 10px 0px 4px;
	}
}

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

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

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

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

}

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

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

body.style #main .styleBox .txtInfo{
	width: 100%;
	float: none;
}
body.style #main .styleBox .txtInfo h3{
    font-size: 18px;
    position: relative;
    left: 0;
    top: 0;
    padding: 0px;
    width: 100%;
    margin-bottom: 10px;
    color: #333;
    box-sizing: border-box;
	background: #fff;
	font-weight: bold;
	text-align: center;
}
body.style #main .styleBox .txtInfo ul.sns{
	margin: 0 0 4px auto;
}
body.style #main .styleBox .txtInfo ul.sns li{
	width: 26px;
    display: inline-block;
    vertical-align: top;
}
.pinterestBtn span{
	background: url(/img/upload/2018/11/social_icons_pinterest-1.png)!important;
    background-size: 100%!important;
}
body.style #main .styleBox .txtInfo .box{
	background: rgba(218, 230, 234, 0.3);
    padding: 20px;
    border-radius: 10px;
    box-sizing: border-box;
	margin-bottom: 14px;
}
body.style #main .styleBox .txtInfo .box p.styleTitle{
	padding: 0 0 2px;
    font-weight: bold;
    text-align: left;
    border-bottom: solid 3px #fff;
    margin-bottom: 12px;
	font-size: 14px;
	
}
body.style #main .styleBox .txtInfo .box ul.clearfix{
	text-align: center;
	margin-bottom: 0;
}
.style-arrange-point{
	margin-top: 30px;
}
.style-arrenge-point-title{
	border-bottom: solid 3px #fff;
    font-weight: bold;
    text-align: left;
    margin-bottom: 6px;
    padding: 0 0 2px;
	font-size: 14px;
}
.style-arrenge-point-text{
    margin-bottom: 0;
    font-size: 14px;
    line-height: 24px;
    letter-spacing: -0.5px;
}
body.stylist #main .stylistBox .txtInfo .career dl,
body.style #main .styleBox .txtInfo .box dl{
    width: 100%;
    border-bottom: dotted 1px #d7d7d7;
    margin-bottom: 10px;
    border: none;
}
.typeOn{
    background-color: #c5b790;
}

body.style #main .commentArea{
    background: none;
    position: relative;
    width: 100%;
    box-sizing: border-box;
    display: block;
	padding: 0;

}

body.style #main .commentArea .img{
	width: 100%;
}
body.style #main .commentArea .img a{
	font-size: 16px;
	color: #333;
    font-weight: bold;
    padding: 6px 0;
    position: relative;
    left: 0;
    top: 0px;
    width: 100%;
    max-width: 1200px;
    text-align: center;
	text-decoration: underline;
}

body.style #main .commentArea .img a:hover{
	color: #408ab1;

	font-size: 16px;
}

body.style #main .commentArea .txt{
    width: 100%;
    margin: 0 auto;
	text-align: center;
}
body.style #main .commentArea .txt h5{
    font-size: 16px;
}

body.style #main .styleBox .txtInfo .box dl dt{
	width: 28%;
	font-size: 14px;
}
body.style #main .styleBox .txtInfo .box dl dd{
    width: 72%;
	font-size: 14px;
}




body.style #main .couponArea{
	clear: both;

}
@media only screen and (max-width: 1024px){
	body.style #main .styleBox .txtInfo ul.sns{
		margin-bottom: 0;
	}
	body.style #main .styleBox .txtInfo .box dl dt:first-of-type,
	body.style #main .styleBox .txtInfo .box dl dd{
	    font-size: 14px;
	    margin: 0 0 0 auto;

	}
	body.style #main .styleBox .txtInfo .box dl dt:first-of-type{
		width: 29%;		
	}
}


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

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

*/


body.style_details #main .sect02 ul.wrapper{
    margin: 0;
    padding: 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 h5{
	position: absolute;
    bottom: 0;
    left: 0;
    color: #fff;
	margin: 3px;
	font-size:16px;
    letter-spacing: -0.8px;
}
body.style_details #main .sect02 ul.wrapper li a.txt p{
	display: none;
}
body.style #main .styleBox .txtInfo .box ul li{
	margin-right: 1px;
	margin-bottom: 5px;
	font-size:12px;
	padding: 4px 0;
}
.typeOn{
    background: #408ab1;
}
@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 h3{
		width: 100%;
		top:0;
		left: 0;
		position: relative;
	    margin: 30px 0 10px;
    	padding: 0;
		box-sizing: border-box;
	    font-size: 18px;
	}
	body.style #main .commentArea{
		width: 94%;
	}
	body.style #main .commentArea .img img{
		width: 100%;
		float: none;
	}

	body.style #main .styleBox .txtInfo .box{
	    width: 48%;
		display: inline-block;
		vertical-align: top;
		padding: 20px;
		margin: 10px 1% 0;
	}
	body.style #main .styleBox .txtInfo .box .recommend ul.clearfix{
		margin-bottom: 0;
	}
	body.stylist #main .stylistBox .txtInfo .career{
	    margin-bottom: 40px;
	}
	body.style #main .commentArea .txt h5{
	    margin-bottom: 10px;
	    font-size: 14px;
	}
	
}
@media only screen and (max-width: 768px){
	body.style #main .styleBox .txtInfo .box{
		width: 100%;
		display: block;
		margin: 10px 0 0;
	}
}
@media only screen and (max-width: 640px){
	body.style_details #main .sect02 ul.wrapper li a.txt,
	body.style_details #main .sect02 ul.wrapper li a.txt h4{
		display: none;
	}	
}
@media only screen and (max-width: 425px){
	body.style #main .styleBox .txtInfo h3{
		font-size: 16px;
	}
	body.style #main .commentArea .txt h5{

	}


}



/*　style　クーポン*/
body.style #main .couponArea,
body.stylist #main .couponArea{
    background: #fff;
	width: 100%;
    border-radius: 10px;
	color: #666;
    box-sizing: border-box;
}

body.style #main .couponArea p.coupon_target,
body.stylist #main .couponArea h5{
    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,
body.stylist #main .couponArea .couponContent{
	padding: 20px;
    width: 100%;
    margin-top: 30px;
    box-sizing: border-box;
    align-items: center;
}
body.style #main .couponArea .couponContent .txt,
body.stylist #main .couponArea .couponContent .txt{
    width: 70%;	
	display: inline-block;

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

}
body.style #main .couponArea .couponContent .img img,
body.stylist #main .couponArea .couponContent .img img{
	width: 100%;
}
body.style #main .couponArea .couponContent .txt h6,
body.stylist #main .couponArea .couponContent .txt h6{
    font-size: 20px;
}
body.style #main .couponArea .couponContent .txt p.price,
body.stylist #main .couponArea .couponContent .txt p.price{
    font-size: 22px;
	margin-bottom: 6px;	
}
body.style #main .couponArea .couponContent .txt p.couponDetail,
body.stylist #main .couponArea .couponContent .txt p.couponDetail{
	border-top: dotted 1px;
    padding-top: 10px
}
body.style #main .couponArea .couponContent .txt ul li,
body.stylist #main .couponArea .couponContent .txt ul li{
	margin-bottom: 3px;
	background-color: #c5b790;
}
body.style #main .couponArea .couponContent .txt a,
body.stylist #main .couponArea .couponContent .txt a{
    color: #333;
	background: #eee;
}
body.style #main .couponArea .couponContent .txt a:hover,
body.stylist #main .couponArea .couponContent .txt a:hover{
	color: #fff;
	background: #bb1668;
}
body.style #main .couponArea .couponContent .img p,
body.stylist #main .couponArea .couponContent .img p{
	margin-bottom: 8px;	
}
@media only screen and (max-width: 1024px){
	body.style #main .couponArea .couponContent .img,
	body.stylist #main .couponArea .couponContent .img{
		position: relative;
		
	}
	body.style #main .couponArea .couponContent .img img,
	body.stylist #main .couponArea .couponContent .img img{
		display: block;
		margin: 0 auto 10px;
	}
	body.style #main .couponArea .couponContent .txt,
	body.stylist #main .couponArea .couponContent .txt{
		padding: 0 0 0 2%;
	}
	body.style #main .couponArea .couponContent .img p,
	body.stylist #main .couponArea .couponContent .img p{
		line-height: 12px;
		margin-left: 0;
		margin-bottom: 8px;
	    font-size: 13px;
	}
	body.stylist #main .couponArea,
	body.style #main .couponArea{
		box-shadow: none;
	}
	body.style #main .couponArea .couponContent,
	body.stylist #main .couponArea .couponContent{
		display: flex;
	    align-items: flex-start;
	}
}
@media only screen and (max-width: 768px){

}
@media only screen and (max-width: 640px){
	body.style #main .couponArea .couponContent,
	body.stylist #main .couponArea .couponContent{
		padding: 10px;
		display: block;
	}
	body.style #main .couponArea .couponContent .img,
	body.stylist #main .couponArea .couponContent .img,
	body.style #main .couponArea .couponContent .txt,
	body.stylist #main .couponArea .couponContent .txt{
		width: 100%;
		box-sizing: border-box;
		display: block;
	}
	body.style #main .couponArea .couponContent .txt,
	body.stylist #main .couponArea .couponContent .txt{
	    padding: 0;
	}
	body.style #main .couponArea .couponContent .img,
	body.stylist #main .couponArea .couponContent .img{
		margin-bottom: 10px;
		margin-top: 10px;
	}
	body.style #main .couponArea .couponContent .img img,
	body.stylist #main .couponArea .couponContent .img img{
	    width: 27%;
    	display: inline-block;
		margin: 0;
	    vertical-align: middle;
	}
	body.style #main .couponArea .couponContent .img .img_p,
	body.stylist #main .couponArea .couponContent .img .img_p{
		width: 70%;
		display: inline-block;
		vertical-align: middle;
		margin-left: 1%;
	}
	body.style #main .couponArea .couponContent .img p,
	body.stylist #main .couponArea .couponContent .img p{
		font-size: 10px;
	    margin-bottom: 4px;
	}
	body.style #main .couponArea .couponContent .txt a
	body.stylist #main .couponArea .couponContent .txt a{
		font-size: 16px;
	}
	body.style #main .couponArea .couponContent .txt h6,
	body.stylist #main .couponArea .couponContent .txt h6{
		font-size: 18px;
	}

}

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

}


/*　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(238, 238, 238, 0.7);
    padding: 30px;
    max-width: 1200px;
    margin: 0px auto 20px;
    border-radius: 10px;
    width: 97%;
    box-sizing: border-box;
}

body.coupon #main section.sect01 .titleArea{
	width: 100%;
    margin: 0 auto 20px;
    border-bottom: solid 3px #fff;
}
body.coupon #main section.sect01 .titleArea h4{
	padding: 0;
    font-size: 28px;
	font-weight: normal;
	margin: 0;
}
body.coupon #main section.sect01 .titleArea h4 span.jp{
	display: none;
}

body.coupon #main section.sect01 .filterArea{
	background: none;
	width: 100%;
	padding: 0;
	margin-bottom: 0;
}
body.coupon #main section.sect01 .filterArea dl{
    width: 100%;
	margin: 0 auto 10px;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 10px;
}
body.coupon #main section.sect01 .filterArea dl dd{
	padding: 0;
    margin: 0 5%;
    width: 90%;
	border-radius: 10px;
    font-size: 14px;
	line-height: 28px;
}
body.coupon #main section.sect01 .filterArea dl dd ul li{
    margin-right: 40px;
	color: #666;
}
body.coupon #main section.sect01 .filterArea dl dt{
	width: 100%;
	box-sizing: border-box;
}

body.coupon #main section.sect01 .filterArea .btn{
	margin: 20px auto 0;
}
body.coupon #main section.sect01 .filterArea .btn button{
    background: none;
    border-radius: 30px;
    padding: 6px 0;
    width: 90px;
    -webkit-transition: all .6s ease;
    -moz-transition: all .6s ease;
    -ms-transition: all .6s ease;
    -o-transition: all .6s ease;
    transition: all .6s ease;
	font-size: 16px;
    color: #333;
    border: solid 1px #666;
}
body.coupon #main section.sect01 .filterArea .btn button:hover{
	color: #fff;
	background: #666;
    opacity: 1;
    -webkit-transition: all .6s ease;
    -moz-transition: all .6s ease;
    -ms-transition: all .6s ease;
    -o-transition: all .6s ease;
    transition: all .6s ease;
}



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: #333;
}

body.coupon #main .result .couponArea h5,
body.style #main .couponArea p.coupon_target,
body.stylist #main .couponArea h5{
	width: 100%;
	text-align: center;
	padding: 10px 0;
	color: #666;
	margin-bottom: 0;
	font-size: 14px;
	border-bottom: dotted 1px #ccc;
	font-weight: normal;
	background: none;
}

body.coupon #main .result .couponArea .couponContent{
	padding: 20px 5% 20px;
    width: 90%;
}
body.coupon #main .result .couponArea .couponContent .txt{
    width: 70%;
	
}
body.coupon #main .result .couponArea .couponContent .img{
	width: 27%;
}
body.coupon #main .result .couponArea .couponContent .img img{
	width: 100%;
}

body.coupon #main .result .couponArea .couponContent .img p{
    line-height: 18px;
	margin: 0;
	color: #888;
}
body.coupon #main .result .couponArea .couponContent .txt p.price{
    font-size: 22px;
	margin-bottom: 0;
}
body.coupon #main .result .couponArea .couponContent .txt p.couponDetail,
body.style #main .couponArea .couponContent .txt p.couponDetail,
body.stylist #main .couponArea .couponContent .txt p.couponDetail{
	border-top: solid 1px #f3f3f3;
    padding-top: 8px;
	margin-bottom: 20px;
	color: #888;
    letter-spacing: 0.8px;
}

body.coupon #main .result .couponArea .couponContent .txt a,
body.style #main .couponArea .couponContent .txt a,
body.stylist #main .couponArea .couponContent .txt a{
	color: #333;
    background: none;
    font-size: 16px;
    font-weight: bold;
    border: solid 3px #eee;
	
}
body.coupon #main .result .couponArea .couponContent .txt a:hover,
body.style #main .couponArea .couponContent .txt a:hover,
body.stylist #main .couponArea .couponContent .txt a:hover{
	color: #fff;
	background: #bb1668;
    border: solid 3px #bb1668;
    opacity: 1;
}
body.coupon #main .result .couponArea .couponContent .txt ul{
    margin-bottom: 14px;
}
body.coupon #main .result .couponArea .couponContent .txt ul li,
body.style #main .couponArea .couponContent .txt ul li,
body.stylist #main .couponArea .couponContent .txt ul li{
    margin-bottom: 3px;
    margin-right: 3px;
    padding: 3px 6px;
    font-size: 12px;
}
body.coupon #main .result .couponArea .couponContent .txt h6,
body.style #main .couponArea .couponContent .txt h6,
body.stylist #main .couponArea .couponContent .txt h6{
    font-size: 16px;
    line-height: 23px;
    letter-spacing: 1px;
    margin-bottom: 20px;
}
@media only screen and (max-width: 1024px){
	body.coupon #main section.sect01 .titleArea h4{
		font-size: 24px;
	}
	body.coupon #main .result .couponArea .couponContent .img{
		width: 100%;
	    margin-bottom: 20px;
	}
	body.coupon #main .result .couponArea .couponContent .img img{
		width: 27%;
		display: inline-block;
		vertical-align: top;
		margin: 0;
	}
	body.coupon #main .result .couponArea .couponContent .img .img_p{
		width: 70%;
		display: inline-block;
		vertical-align: top;
		margin-left: 1%;
	}
	body.coupon #main .result .couponArea .couponContent .img p,
	body.style #main .couponArea .couponContent .img p,
	body.stylist #main .couponArea .couponContent .img p{
		font-size: 11px;
	}
	body.coupon #main .result .couponArea .couponContent .txt{
		width: 100%;
	}
	body.coupon #main .result .couponArea .couponContent .txt h6,
	body.style #main .couponArea .couponContent .txt h6,
	body.stylist #main .couponArea .couponContent .txt h6{
		font-size: 15px;
    	margin: 0px auto 15px;
	    line-height: 26px;
    	letter-spacing: 0.2px;
	}
	body.coupon #main .result .couponArea .couponContent .txt a{
	    font-size: 16px;
	}
	body.coupon #main section.sect01 .filterArea dl dd ul li{
		margin-right: 40px;
	    font-size: 14px;
    	line-height: 20px;
	}
	body.coupon #main .result .couponArea h5{
	    background: none;
	}

}


@media only screen and (max-width: 640px){
	body.coupon #main .result .couponArea{
		width: 98%;
    	display: block;
	}
	body.coupon #main .result .couponArea .couponContent{
	    padding: 10px 20px 10px;
		width: 100%;
		box-sizing: border-box;
	}
	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.style #main .couponArea .couponContent .txt h6,
	body.stylist #main .couponArea .couponContent .txt h6{
		margin: 15px auto 15px;
	}
	.coupon form{
	    margin: 0px auto 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{
    margin: 30px auto 0;
}

body.menu #main .sect{
	width: 100%;
	margin-bottom: 0;
}
body.menu .shop_menubox {
    display: inline-block;
    vertical-align: top;
    width: 49%;
    margin: 0 0 33px 0;
    border: solid 1px #eee;
    padding: 2%;
    box-sizing: border-box;
}
body.menu .shop_menubox:nth-child(odd){
	margin: 0 2% 33px 0;
}
body.menu #main .sect .titleArea h4 {
    float: left;
    margin: -43px 0 0 10px;
    padding: 6px 20px;
    width: auto;
    color: #333;
    font-weight: normal;
    background: #fff;
    box-sizing: border-box;
    border-radius: 30px;
    border: solid 1px #333;
}

body.menu #main .sect .titleArea {
    margin: 0 auto;
    border-bottom: none;
}
body.menu #main .sect table {
    width: 100%;
    max-width: 100%;
    margin-bottom: 0;
}
.menu_annotation {
    font-size: 14px;
    line-height: 25px;

    padding: 20px;
    margin-top: -25px;
}
body.menu #main .sect .table td{
    font-size: 14px;
}
body.menu #main .sect .table > tbody > tr > td:first-child{
    font-weight: bold;
}
body.menu #main .sect .table > tbody > tr > td:first-child > .serviceSubTxt{
    font-weight: normal;
	margin-bottom: 0;
	line-height: 1.5;
    font-size: 13px!important;
    margin-top: 10px;
}
body.menu #main .sect .txtRight{
    font-size: 12px;
}
@media only screen and (max-width: 1024px){
	body.menu #content #main{
	    padding: 30px 0 0;
    	margin: 0 auto 20px;	
	}

	body.menu #main .sect .table > tbody > tr > td:first-child{
		width: 80%;
		float: left;
		display: inline-block;
		text-align: left;
		padding: 10px 0;
	}
	body.menu #main .sect .table td{
	    width: 20%;
    	display: inline-block;
		padding: 10px 0;
	}
	body.menu #main .sect .txtRight{
	    float: right;
    	text-align: left;
		width: 20%;
	}
	body.menu #main .sect .table tr{
		margin-bottom: 10px;
	}

}
@media only screen and (max-width: 768px){
	body.menu .shop_menubox{
    	width: 100%;
		display: block;
    	margin: 0 0 30px 0;
	}
	body.menu .shop_menubox:nth-child(odd){
    	margin: 0 0 30px 0;
	}
	body.menu #main .sect .titleArea h4{
	    margin: -34px 0 0 10px;
	}
}

@media only screen and (max-width: 425px){
	body.menu #main .sect .titleArea h4 span.en{
		font-size: 22px;
	}
	body.menu #main .sect .titleArea h4{
		margin: -25px 0 0 10px;
	}

}

/*=====================================================*/
/*=====================　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>
                    <h6><a href="{url(information/{information.id})}">{information.subject}</a></h6>
                    <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 {


}
body.news #content #main,
body.blog #content #main{
    margin: 0px;
    background: rgba(255, 255, 255, 0.7);
}
body.news #main .couponArea,
body.blog #main .couponArea{
	width: 100%;
	padding:  0 0;
	display: flex;
	align-content:stretch;
    display: inline-block;
	
}
body.news #main .couponArea .couponContent,
body.blog #main .couponArea .couponContent{
    margin: 0 4% 50px 0;
    width: 30.6%;
    display: inline-block;
	vertical-align: top;
	padding: 0;
	position: relative;

}
body.news #main .couponArea .couponContent:nth-child(3n),
body.blog #main .couponArea .couponContent:nth-child(3n){
	margin-right: 0;
}
body.news #main .couponArea .couponContent .img,
body.blog #main .couponArea .couponContent .img{
    width: 100%;
}
body.news #main .couponArea .couponContent .img img,
body.blog #main .couponArea .couponContent .img img{
	width: 100%;
    height: auto;
	margin: 0;
}
body.news #main .couponArea .couponContent .txt,
body.blog #main .couponArea .couponContent .txt{
	width: 100%;
	margin-top: 20px;
	margin-bottom: 40px;
}
body.news #main .couponArea .couponContent .txt h6,
body.blog #main .couponArea .couponContent .txt h6{
	color: #000;
    margin: 20px 0 0px;
    margin-bottom: 8px;
	font-size: 15px;
}
body.news #main .couponArea .couponContent .txt ul,
body.blog #main .couponArea .couponContent .txt ul{
	margin: 0px 0 0;
}
body.news #main .couponArea .couponContent .txt ul li,
body.blog #main .couponArea .couponContent .txt ul li{
	margin: 0 auto;
    float: none;
	padding: 0;
	background: none;
}

body.news #main .couponArea .couponContent .txt ul li a,
body.blog #main .couponArea .couponContent .txt ul li a{
    width: 100%;
    display: block;
    padding: 3px 0px;
    background-color: none;
    text-align: center;
	color: #000;
	border: solid 1px #ccc;
	border-radius: 20px;
	box-sizing: border-box;
}
body.news #main .couponArea .couponContent .txt ul li a:hover,
body.blog #main .couponArea .couponContent .txt ul li a:hover{
	opacity: 1;
}

body.news #main .newsTime,
body.blog #main .newsTime{
    position: absolute;
	top: 33px;
    left: -31px;
    font-size: 14px!important;
    color: #fff;
    transform: rotate(90deg);
	width: 75px;
	
}
body.news #main .couponArea .couponContent .txt .more,
body.blog #main .couponArea .couponContent .txt .more{
    text-decoration: none;
    margin: 10px 0 0;
    color: #333!important;
    display: block;
    text-align: right;
    position: absolute;
	bottom: 0;
	padding: 0;
    width: 100%;
}
body.news #main .couponArea .couponContent .txt .more:hover,
body.blog #main .couponArea .couponContent .txt .more:hover{
	color: #333!important;
	opacity: 1;
}
body.news #main .couponArea .couponContent .txt .more::before,
body.blog #main .couponArea .couponContent .txt .more::before{
    content: "";
    width: 50px;
    height: 1px;
    background: #333;
    position: absolute;
    bottom: 7px;
    right: 0;
    transform: translate3d(-86px, 0, 0) perspective(0);
    transition: all 0.6s ease-out;
    backface-visibility: hidden;
}
body.news #main .couponArea .couponContent .txt .more:hover::before,
body.blog #main .couponArea .couponContent .txt .more:hover::before{
	transform: translate(-18px, 0px);
}
body.news #main .couponArea .couponContent .txt p.couponDetail,
body.blog #main .couponArea .couponContent .txt p.couponDetail{
	padding: 0 ;
	font-size: 12px;
	margin-bottom: 25px;
}

@media only screen and (max-width: 1024px){
	body.news #main .couponArea .couponContent .txt .more,
	body.blog #main .couponArea .couponContent .txt .more{
		display: block;
	}
	body.news #content #main,
	body.blog #content #main{
		margin-bottom: 20px;
	}
	body.news #main .couponArea,
	body.blog #main .couponArea{
		margin: 0 auto 0px;
	}
	body.news #main .couponArea .couponContent .txt h6,
	body.blog #main .couponArea .couponContent .txt h6{
		font-size: 14px;
	    margin: 14px 0 ;
	}
	body.news #main .couponArea .couponContent .txt,
	body.blog #main .couponArea .couponContent .txt{
	    margin-top: 10px;
	}
	body.news #main .couponArea .couponContent .txt p.couponDetail,
	body.blog #main .couponArea .couponContent .txt p.couponDetail{
		margin-bottom: 15px;
	}
}
@media only screen and (max-width: 768px){
	body.news #main .couponArea .couponContent:nth-child(3n),
	body.blog #main .couponArea .couponContent:nth-child(3n){
		margin: 0 4% 30px 0;
	}
	body.news #main .couponArea .couponContent,
	body.blog #main .couponArea .couponContent{
	    width: 48%;
		margin: 0 4% 20px 0;
	}
	body.news #main .couponArea .couponContent:nth-child(even),
	body.blog #main .couponArea .couponContent:nth-child(even){
		margin-right: 0;
	}
}
@media only screen and (max-width: 425px){
	body.news #main .couponArea .couponContent .txt h6,
	body.blog #main .couponArea .couponContent .txt h6{
	    margin: 10px 0;
	}
	body.news #main .couponArea .couponContent .txt p.couponDetail,
	body.blog #main .couponArea .couponContent .txt p.couponDetail{
		font-size: 11px;
	}
	body.news #main .couponArea .couponContent .txt ul li,
	body.blog #main .couponArea .couponContent .txt ul li{
	    font-size: 11px;
	}
	body.news #main .couponArea .couponContent .txt .more::before,
	body.blog #main .couponArea .couponContent .txt .more::before{
	    width: 30px;
	}

}


/*=============================================================*/
/*=====================　news　詳細　========================*/


body.news #main .sect,
body.blog #main .sect{
	width: 100%;
    padding: 20px;
    box-sizing: border-box;
	position: relative;
	border: solid 10px rgba(218, 230, 234, 0.3);
}
body.news #main .sect .titleArea,
body.blog #main .sect .titleArea{
    margin:40px 0 0;
    border-bottom: solid 2px #eee;
}
body.news #main .articleTxt,
body.blog #main .articleTxt{
    margin-top: 20px;
}
body.news #main .sect .titleArea h4,
body.blog #main .sect .titleArea h4{
    font-weight: bold;
    padding: 0 0 6px;
    margin: 0;
	font-size: 18px;
}
body.news #main .sect div.blog_postuser a.postUser,
body.blog #main .sect div.blog_postuser a.postUser{
	color: #408ab1;
}
body.blog #main .sect div.blog_postuser{
    letter-spacing: 1px;
    line-height: 20px;
}
body.news #main .sect .wrapper ul.clearfix,
body.blog #main .sect .wrapper ul.clearfix{

}
body.news #main .sect .wrapper li,
body.blog #main .sect .wrapper li{
    padding: 8px 14px;
	background-color: rgba(64, 138, 177, 0.8);
    border-radius: 20px;
}
body.news_details #main .newsTime,
body.blog_details #main .newsTime{
	color: #408ab1;
	left: -42px;
    top: 20px;
}

@media only screen and (max-width: 1024px){
	body.news #main .sect,
	body.blog #main .sect{
		margin-bottom: 0px;
	}

}

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

	}

}

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

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

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

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

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

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

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

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

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

*/

/*

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

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

*/
/*
画像サイズをLに変更
*/
body.gallery #content{
	display: block;
}

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


body.gallery #content #main{
    width: 71%;
	margin-bottom: 120px;
	display: inline-block;
}
body.gallery #content #main section{

    padding: 0;
}
body.gallery #main h3{
	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{
	margin: 0 auto;
}
body.gallery #main .sect02 ul.wrapper a:hover{
	opacity: 1;	
}

body.gallery #main .sect02 ul.wrapper li{
	margin: 0!important;
	width: 49.5%!important;

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

}

body.gallery #main .sect02 ul.wrapper li:nth-child(odd){
	margin-right: 1%;	
}
body.gallery #main .sect02 ul.wrapper li a.img{
    border: none;
	margin: 0;
	line-height: 0;
	width: 100%;
}

body.gallery #main .sect02 ul.wrapper a .colListItem_lineWrap{
	height: 74%;
}
body.gallery #main .sect02 .titleArea{
	margin: 0;
}
body.gallery #main p.gallery_p{
	color: #333;
	font-size: 18px;
    border-bottom: solid 2px #eee;
    padding-bottom: 6px;
    padding-top: 20px;
	margin-bottom: 10px;
}

body.gallery #main p.lightbox-title{
	display: none;
}
@media only screen and (max-width: 1024px){
	body.gallery #content{
	}
	body.gallery #sub{
		width: 100%;
		float: none;
		clear: both;
	}
	body.gallery #content #main {
		width: 100%;
		margin: 0 0 0px;
		float: none;
		clear: both;
	}
	body.gallery #main p.gallery_p{
	    font-size: 16px;
		padding-bottom: 2px;
	}
}
@media only screen and (max-width: 425px){
	body.gallery #content{

	}
	body.gallery #main p.gallery_p{
		font-size: 14px;
	}
}


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

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


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

}

body.voice #content #main{

}

body.voice #main .voiceBox{
	width: 100%;
    border-bottom: solid 1px #eee;
    padding: 4%;
	color: #333;
	background: rgba(255, 255, 255, 0.6);
	margin: 0 auto 8px;
	box-sizing: border-box;
}
body.voice #main .pickUp{
	border: solid 3px #408ab1;
}

body.voice #main .voiceBox .voiceInner{
	width: 100%;
    box-sizing: border-box;
    padding: 5%;
	margin-bottom: 0;
	background: none;
    border-radius: 10px;
}
body.voice #main .voiceBox .voiceInner p{
    margin: 0 0 0px;
    font-size: 15px;
    line-height: 1.6;
}
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: 16px;
}

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 h4, body.voice #main .voiceBox .reply h4{
	border-bottom: none;
    padding: 5px 0;
    width: 100%;
    text-align: center;
    border-bottom: dotted 1px;
    font-size: 20px;
    margin-bottom: 10px;
}
body.voice #main .voiceBox .reply p{
	width: 100%;
    padding: 0 ;
	font-size: 14px;
}
body.voice #main .voiceBox .review .reviewInner{
	display: inline-block;
	width: 100%;
    padding: 0;
}
body.voice #main .voiceBox.pickUp .voiceInner{
	background: none;
}
body.voice #main .voiceBox .review dl{
    font-size: 14px;
}
@media only screen and (min-width: 1025px){

	body.voice #main .voiceBox .review{
	    width: 20%;
	}
}
@media only screen and (max-width: 1024px){
	body.voice #main .voiceBox .review{
		width: 100%;
		padding: 0;
		margin-bottom: 10px;
	}
	body.voice #main .voiceBox .voiceInner{
		margin-bottom: 20px
	}
	body.voice #main .voiceBox .reply{
		padding: 0;
	}
	
}
@media only screen and (max-width: 768px){
	body.voice #main .voiceBox .voiceInner dl{
		
	}

}
@media only screen and (max-width: 425px){
	body.voice #main .voiceBox .review dl,
	body.voice #main .voiceBox .voiceInner dl,
	body.voice #main .voiceBox .voiceInner p{
		font-size: 14px;
	}	
}
/*=============================================================*/
/*=====================　faq　========================*/

body.faq #content{
}
body.faq #content #main{
	padding: 20px;
    width: 72%;
    border: solid 1px #eee;
    box-sizing: border-box;
}
body.faq #sub{
    width: 22%;
}
body.faq #main .sect .titleArea{
    border-bottom: dotted 1px;
    padding: 0;
	margin-bottom: 10px;
}
body.faq #main .sect .titleArea h4{
    margin-bottom: 6px;
}
body.faq #main .sect .titleArea h4 span.jp{
    font-size: 18px;
}
body.faq #main .styleBox{
	margin: 0 auto;
}
div.accordion ul{
	margin-bottom: 0;
}
div.accordion > ul > li > ul > li{
    padding: 20px 10px;
    font-size: 16px;
}
div.accordion > ul > li > a{
    font-size: 16px;
    background: #888;
}

@media only screen and (max-width: 1024px){
	body.faq #content #main{
		width: 100%;
		margin-bottom: 0px;
		
	}
	body.faq #sub{
		width: 100%;
	}
	#sub #subFaq ul li a{
		border-bottom: none;
	}
	body.voice #main .voiceBox .review dl{
		width: 100%;
	}
	body.faq #main .sect .titleArea h4 span.jp{
		font-size: 22px;
	}
}
@media only screen and (max-width: 425px){
	body.faq #content #main{
		padding: 18px;		
	}
	body.faq #main .sect .titleArea h4 span.jp{
		font-size: 20px;
	}
	div.accordion > ul > li > a{
		font-size: 16px;
	}

}
/*=============================================================*/
/*=====================　access　========================*/
body.access #main section{
    margin: 0 auto;
    width: 100%;
	position: relative;
}
body.access .shopImg img{
	margin-bottom: 0;
}
body.access #main .shopdate{
	margin: 0;
}
body.access #main .shopdate p{
    margin-bottom: 2px;
    font-size: 12px;
}
body.access #main .shopdate p.shopname{
	font-size: 16px;
    font-weight: bold;
    border-bottom: solid 2px #eee;
    margin-bottom: 6px;
    padding: 2px;
}
body.access #main .shopdate a{
    color: #333;
}
body.access #main .shopdate table{
    margin-top: 10px;
}

body.access #main .shopdate td.road{
	border-bottom: none;
}
.shopImg{
    width: 100%;

}
.movie_guide_wrapper{
	/*padding: 30px;
    box-sizing: border-box;
	background: #eee;*/
	margin-top: 50px;
    width: 100%;
    margin-bottom: 10px;
}

.movie_guide{
	position: relative;
    width: 100%;
    padding-top: 56.25%;	
	margin-bottom: 10px;
    overflow: hidden;
    margin: 0 auto;
    max-width: 1200px;
}

.movie_guide iframe{
	position: absolute;
    top: 0;
    right: 0;
    width: 100% !important;
    height: 100% !important;
}

@media only screen and (max-width: 1024px){
	.shopImg{
		width: 100%;

	}
	body.access #main .shopdate{
		position: relative;
		box-sizing: border-box;
	    margin-bottom: 10px;
		top:0;
	}
	body.access #main section .shopImg img{
		margin: 0 auto 10px;
	}
}
@media only screen and (max-width: 768px){
	.shopImg{

	}

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

	}

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

body.top #content{
	width: 100%;
}
body.top #main{
	width: 100%;
	padding: 0;
}
body.top #main section.sect02{
	background: #f3f3f3;
	padding: 50px 0;
	margin: 0 auto;

}
body.top section.sect{
	margin: 0 auto 130px;
	max-width: 1500px;
    width: 80%;
    border-bottom: solid 1px #aaa;
    padding: 0 0 130px;
}
body.top section.sect:last-child{
	border-bottom: none;
}
body.top section.sect ul.wrapper li a.img{
	margin: 0;
}
body.top section.sect ul.wrapper li a.img:hover{
	opacity: 1;
}
body.top section.sect ul.wrapper li a.img img{

}
body.top section.sect ul.wrapper li a.img img:hover{


}
body.top section.sect .titleArea{
	width: 19%;
	margin: 0 auto;
	max-width: 1200px;
	position: relative;
	border: none;
	display: inline-block;
	vertical-align: top;
	max-width: 160px;
	position: absolute;
	z-index: 10;
}
body.top section.sect .titleArea::before{
    content: "";
    width: 10px;
    height: 10px;
    position: absolute;
    bottom: 0;
    border-left: solid 1px #333;
    z-index: -1;
    left: 0;
    border-bottom: solid 1px;
}
body.top section.sect .titleArea::after{
    content: "";
    width: 10px;
    height: 10px;
    position: absolute;
    bottom: 0;
    border-right: solid 1px #333;
    z-index: -1;
    right: 0;
    border-bottom: solid 1px;
}
body.top section.sect .titleArea h3{
	float: none;
    padding: 45px 0 5px 0px;
    text-align: center;
}
body.top section.sect .titleArea h3::before{
    content: "";
    width: 10px;
    height: 10px;
    position: absolute;
    top: 0;
    border-left: solid 1px #333;
    z-index: -1;
    left: 0;
    border-top: solid 1px;
}
body.top section.sect .titleArea h3::after{
    content: "";
    width: 10px;
    height: 10px;
    position: absolute;
    top: 0;
    border-right: solid 1px #333;
    z-index: -1;
    right: 0;
    border-top: solid 1px;
}

body.top section.sect .titleArea h3 span.en{
	font-size: 28px;
	font-weight: normal;
}
body.top section.sect .titleArea h3 span.jp{

    margin: 3px 0 0;
	font-size: 13px;
	display: none;
}
body.top section.sect .wrapper{
	width: 92%;
    margin: 100px 0 0 8%;
	max-width: 1500px;
	display: inline-block;
	vertical-align: top;
	position: relative;
	box-sizing: border-box;
}
body.top section.sect.sect02 ul.wrapper li{
    margin: 0 1% 20px;
    width: 31.3%;
	background: #fff;
}




#mainVisual{
    text-align: center;
    margin: 0px auto 0px;
	width: 100%;
	margin-right: 0;
	max-width: auto;
	overflow: hidden;

}
#mainVisual .swiper-wrapper{
	margin-bottom: 0;


	
}
#mainVisual img{
	width: auto;
	max-width: inherit;
	height: 100vh;
	text-align: center;
}
.swiper-slide{

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



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

body.top section.sect.sect01 ul.wrapper li{
	width: 25%;
    margin: 0;

}
body.top #main section.sect ul.wrapper li a.txt{
	margin-bottom: 10px;
}
body.top #main section.sect ul.wrapper li a.txt h4{
    color: #000;
    margin: 16px 0;
    padding-bottom: 1px;
	font-size: 16px;
	font-weight: normal;
    line-height: 24px;
}
body.top #main section.sect ul.wrapper li a.txt p{
	margin: 0;
    text-align: left;
	font-size: 13px;
}
body.top #main section.sect ul.wrapper li a.txt p.date,
body.top #main section.top_media ul.wrapper li p.date{
	position: absolute;
    top: 27px;
    left: -29px;
    font-size: 15px;
    color: #fff;
    z-index: 10;
    transform: rotate(90deg);
	width: 69px;
}

/* new hair style */
body.top section.sect.top_hairstyle ul.wrapper li{
	float: left;
}
body.top section.sect.top_hairstyle ul.wrapper li:first-child{
	width: 50%;
}
/*
body.top section.sect.top_hairstyle ul.wrapper li:nth-child(2){
    margin-top: 20%;
    margin-left: 5%;
    margin-right: -5%;
}
body.top section.sect.top_hairstyle ul.wrapper li:nth-child(3){
	margin-top: 36%;
    width: 20%;
    margin-left: 0%;
    margin-right: 0;
}
body.top section.sect.top_hairstyle ul.wrapper li:nth-child(4){
	margin-left: 20%;
    margin-top: 13%;
}
body.top section.sect.top_hairstyle ul.wrapper li:nth-child(5){
    margin-top: -20%;
    margin-left: -2%;
    margin-right: 2%;
    width: 40%;
}

*/


.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;
}
/* new hair style ここまで*/
@media only screen and (min-width: 1025px){
	#mainVisual img{
	    height: 90vh;
    	margin-top: 3%;
	}
	body.top section.sect.top_hairstyle ul.wrapper li:nth-child(6){
		display: none;
	}
}

@media only screen and (max-width: 1024px){
	
	#mainVisual{
    	margin-top: 0px;
		margin-bottom: 0;
	}
	body.top #content{
		width: 80%;
		margin: 0 auto;
	}
	body.top #main{
		padding: 0;
		width: 100%;
	}
	body.top #main section.sect{
	    margin: 0 auto 80px;
		padding-bottom: 80px;
	}
	body.top #main section.sect02{
		background: #f3f3f3;
	    padding: 30px 0 10px;
	}
	body.top #main section.sect .titleArea{
		border: none;
	    padding: 34px 0 ;
		margin: 0 ;
		vertical-align: top;
	    width: 150px;
		position: relative;
	}
	body.top #main section.sect .titleArea h3{
		padding: 0 0 6px;
	}
	body.top #main section.sect .titleArea h3 span.en{
		font-size: 22px;
		letter-spacing: -0.6px;
	}
	body.top #main section.sect .titleArea h3 span.jp{
		margin-left: 0;
    	font-size: 12px;
	}
	body.top #main section.sect .titleArea a{
		text-decoration: none;
        text-align: center;
		max-width: 50%;
		margin: 0 auto;

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

	body.top #main section.sect.sect02 ul.wrapper li{
		margin: 0 1% 20px;
	    width: 48%;
		background: #fff;
	}
	body.top #main section.sect.sect02 ul.wrapper li:nth-child(3n+2){
		margin: 0;
	}
	body.top #main section.sect.sect02 ul.wrapper li:nth-child(n + 5){
		display: none;
	}
	.catch {
		top: 10%;
		left: 5%;
		width: 100px;
	}
	
	body.top #main section.sect.sect01 ul.wrapper li{
	    width: 33.3%;
		margin: 0;
	}
	
	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(2){
		margin-top: -120px;
		margin-left: 40px;
		margin-right: -40px;		
	}
	body.top #main section.sect.sect01 ul.wrapper li:nth-child(4){
		margin-left: 30px;
		margin-right: -30px;
	    margin-top: 100px;
	}
	body.top #main section.sect.sect01 ul.wrapper li:nth-child(5){
		margin-left: -10px;
		margin-right: -30px;
		margin-top: -100px;
	}
	body.top #main section.sect.sect01 ul.wrapper li:nth-child(6){
		margin-left: -30px;
		margin-right: 30px;
		margin-top: 30px;
	}
	*/
	body.top #main section.sect.sect01 ul.wrapper li:nth-child(n + 7){
		display: none;
	}
	body.top section.sect .titleArea{
	    width: 23%;
	}
	body.top section.sect .wrapper{
	    margin: -30px 0 0 10%;
		width: 90%;
		vertical-align: top;
	}
	body.top #main section.sect ul.wrapper li a.img{
		margin: 0;
	}

	body.top #main section.sect ul.wrapper li a.txt h4{
		margin: 10px 0 20px;
    	padding-bottom: 0;
    	font-size: 16px;
	    line-height: 24px;
	}

	#mainVisual img{

	}

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


	}


	#mainVisual img{

	}
	.swiper-slide{

	}
	body.top #main section.sect .titleArea,
	body.top section.sect .wrapper{
		display: block;
	    padding: 30px 0;
		width: 140px;
	}
	body.top #main section.sect .titleArea h3 span.en{

	}
	body.top section.sect .wrapper{
		margin: 10px auto 0;
		padding: 30px 0 0;
		width: 100%;
	}
	body.top #main section.sect{
	    margin: 0 auto 70px;
		padding-bottom: 70px;
	}
}	

@media only screen and (max-width: 425px){
	body.top #content{
		width: 90%;
	}
	#mainVisual{
		margin-bottom: 0px;
	}
	.catch {
		top: 8%;
		width: 80px;
	}
	body.top #main section.sect{
	    margin: 0 auto 50px;
		padding-bottom: 50px;
	}
	body.top #main section.sect ul.wrapper li a.txt h4{
		font-size: 14px;
		letter-spacing: -1px;
	}
	body.top #main section.sect .titleArea h3{
		padding: 0;
    	margin-bottom: 3px;
	}
	body.top #main section.sect .titleArea h3 span.en{
	    font-size: 20px;
	}
	body.top #main section.sect .titleArea h3 span.jp{
		font-size: 10px;
	}
	body.top #main section.sect .titleArea{
	    width: 120px;

	}
	body.top #main section.sect .titleArea a span{
	    font-size: 11px;
    	letter-spacing: 1px;	
	}
	#mainVisual img{
		position: absolute;
		left: -50%;
	}
	.swiper-slide{

	}
	body.top section.sect .titleArea::before,
	body.top section.sect .titleArea::after,
	body.top section.sect .titleArea h3::before,
	body.top section.sect .titleArea h3::after{
		width: 5px;
    	height: 5px;
	}
	    
}

/* top_blog を追加　ここから*/

body.top section.sect.top_blog ul.wrapper li,
body.top section.sect.top_media ul.wrapper li{
	width: 23.5%;
    margin: 0 2% 0 0;
	position: relative;	
}
/*
body.top section.sect.top_media ul.wrapper li:nth-child(even){
    margin: -100px 2% 100px 0;	
}

body.top section.sect.top_media ul.wrapper li:first-child{
    margin-left: 100px;
}


body.top section.sect.top_media ul.wrapper li:nth-child(3n){
    margin-top: 300px;
    margin-left: -100px;
}


body.top section.sect.top_media ul.wrapper li:nth-child(4n){
    margin-right: 0;
    margin-top: 100px;
}
*/
body.top section.sect.top_blog ul.wrapper li:nth-child(4n),
body.top section.sect.top_media ul.wrapper li:nth-child(4n){
    margin-right: 0;
}


body.top section.top_blog a.postUser,
body.top section.top_media a.postUser{
	position: relative;
}
body.top #main section.top_blog ul.wrapper li a.txt h4,
body.top #main section.top_media ul.wrapper li a.txt h4{
	margin: 10px 0 20px;
    letter-spacing: -0.4px;
}
body.top section.top_blog a.top_blog_more{
	text-decoration: none;
    margin: 5px 0 0;
    color: #333;
    display: block;
    text-align: right;
	position: absolute;
    bottom: 0;
    right: 0;
}
body.top section.top_blog a.top_blog_more::before{
	content: "";
    width: 40px;
    height: 1px;
    background: #333;
    position: absolute;
    bottom: 7px;
    right: 0;
    transform: translate3d(-71px, 0, 0) perspective(0);
    transition: all 0.6s ease-out;
    backface-visibility: hidden;
}
body.top section.top_blog a.top_blog_more:hover::before {
    transform: translate(-10px, 0px);
}
body.top section.top_blog{

}
.top_blog_inner{

}
.flex_wrapper{
    width: 94%;
    margin: 130px 0 0 6%;
    max-width: 1500px;
    display: inline-block;
    vertical-align: top;	
}
body.top section.top_blog .wrapper,
body.top section.top_media .wrapper{
    width: 100%;
    margin: 0;
    max-width: 100%;
}
@media only screen and (max-width: 1024px){

	body.top section.sect.top_blog .wrapper{

	}
	body.top #main section.sect.top_blog ul.wrapper li,
	body.top #main section.sect.top_media ul.wrapper li{
	    margin: 0 4% 0px 0;
		width: 30.6%;
		display: inline-block;
		vertical-align: top;
		padding: 0;
		position: relative;
	}

	body.top #main section.sect.top_blog ul.wrapper li:nth-child(n + 5),
	body.top #main section.sect.top_media ul.wrapper li:nth-child(n + 5){
		display: none;
	}

	body.top #main section.sect.top_blog ul.wrapper li:nth-child(3n+2),
	body.top #main section.sect.top_media ul.wrapper li:nth-child(3n+2){
		margin: 0px 4% 0px 0;
	}
	body.top #main section.sect.top_blog ul.wrapper li:nth-child(3n),
	body.top #main section.sect.top_media ul.wrapper li:nth-child(3n){
		margin: 0px 0 0px 0;
	}
	/*
	body.top #main section.sect.top_blog ul.wrapper li:nth-child(3n+2),
	body.top #main section.sect.top_media ul.wrapper li:nth-child(3n+2){
		margin: -80px 4% 80px 0;
	}
	body.top #main section.sect.top_blog ul.wrapper li:first-child,
	body.top #main section.sect.top_media ul.wrapper li:first-child{
		margin: 40px 4% 40px 0;
	}
	*/
	body.top #main section.sect.top_blog ul.wrapper li:nth-child(4),
	body.top #main section.sect.top_media ul.wrapper li:nth-child(4){
		display: none;
	}
	
	.flex_wrapper{
	    margin: -20px 0 0 10%;
		width: 90%;
		vertical-align: top;
	}
}
@media only screen and (max-width: 768px){

	body.top section.sect.top_blog .wrapper,
	body.top section.sect.top_media .wrapper{

	}
	
	body.top #main section.sect.top_blog ul.wrapper li:nth-child(3n+2),
	body.top #main section.sect.top_media ul.wrapper li:nth-child(3n+2){
		margin: 0 4% 0px 0;
	}
	body.top #main section.sect.top_blog ul.wrapper li:nth-child(3n),
	body.top #main section.sect.top_media ul.wrapper li:nth-child(3n){
		margin: 0 4% 0px 0;
	}
	body.top #main section.sect.top_blog ul.wrapper li:nth-child(4),
	body.top #main section.sect.top_media ul.wrapper li:nth-child(4){
		display: inline-block;
	}
	body.top #main section.sect.top_blog ul.wrapper li,
	body.top #main section.sect.top_media ul.wrapper li{
		width: 48%;
		margin: 0 4% 0px 0;
	}
	
	body.top #main section.sect.top_blog ul.wrapper li:nth-child(2n),
	body.top #main section.sect.top_media ul.wrapper li:nth-child(2n){
		margin: 0;
	}
	.flex_wrapper{
		margin: 10px auto 0;
    	width: 100%;
	}
}

@media only screen and (max-width: 425px){
	body.top #main section.sect.top_blog ul.wrapper li a.txt h4,
	body.top #main section.sect.top_media ul.wrapper li a.txt h4{
	    margin: 3px 0 18px;
		font-size: 14px;
		line-height: 18px;
    	letter-spacing: -0.6px;
	}
	body.top #main section.sect.top_blog ul.wrapper li:nth-child(2n),
	body.top #main section.sect.top_media ul.wrapper li:nth-child(2n){
    	margin: 0px 0 0px 0;
	}
	/*
	body.top #main section.sect.top_blog ul.wrapper li:first-child,
	body.top #main section.sect.top_media ul.wrapper li:first-child{
	    margin: 40px 4% 40px 0;
	}
	body.top #main section.sect.top_blog ul.wrapper li:first-child{
	    margin: 40px 4% 0px 0;
	}
	body.top #main section.sect.top_blog ul.wrapper li:nth-child(4),
	body.top #main section.sect.top_media ul.wrapper li:nth-child(4){
		margin: -100px 0 0px 0;	
	}
	*/
}

/* top_blog を追加　ここまで*/
/* top_media 追加*/

body.top #main section.top_media ul.wrapper li a.txt{
    position: relative;
    left: 0;
    width: 88%;
    z-index: 10;
    display: block;
    background: rgba(255, 255, 255, 1);
    padding: 15px 6px 0 0;
    box-sizing: border-box;
    top: -40px;
    margin-bottom: -40px;
}
body.top #main section.top_media ul.wrapper li a.txt:hover{
	opacity: 1;
}
body.top #main section.top_media ul.wrapper li a.txt h4{
	margin: 0 0 10px;
}
body.top #main section.top_media ul.wrapper li a.txt p.couponDetail{
    font-size: 10px;
    text-align: right;
    padding-right: 10px;
}
body.top section.sect.top_media ul.wrapper li{
	box-shadow: none;
}
@media only screen and (max-width: 768px){
	body.top #main section.top_media ul.wrapper li a.txt p.couponDetail{
	    margin-bottom: 20px;
	}
}

@media only screen and (max-width: 425px){
	body.top #main section.sect.top_media ul.wrapper li a.txt h4{
		margin: 0px 0 4px;
	}
	body.top #main section.top_media ul.wrapper li a.txt{
		padding-top:10px;
	}
}

/* top_media を追加　ここまで*/

/* top_news 追加　ここから*/
body.top #main section.top_news{
	margin: 100px auto 200px;
	position: relative;
    max-width: 1080px;
}
.top_news_inner{
	
}
body.top #main section.top_news .titleArea{
    position: relative;

}
body.top section.top_news .wrapper{
	width: 800px;
	margin: 0 auto;
	display: block;
    padding: 30px;
    box-sizing: border-box;
    margin-top: 20px;
	background: #fff;
}

body.top #main section.top_news .top_news_inner::before{
	content: "";
	width: 70%;
	height: 300px;
	position: absolute;
    right: 0;
    top: 46px;
	z-index: -1;
	overflow: hidden;
	font-size: 30px;
	padding: 20px;
	box-sizing: border-box;
	background: url(/img/upload/2018/12/higashiomiya_top_news.jpg) no-repeat center center;
	background-size: cover;
}
body.top #main section.top_news .top_news_inner::after{
	content: "I will tell you the latest news of Repos";
    width: 40%;
    height: auto;
    position: absolute;
    right: 20px;
    top: 77px;
    overflow: hidden;
    font-size: 24px;
    box-sizing: border-box;
    text-align: right;
    text-shadow: 0px 3px 2px rgba(0,0,0,0.2);
}
body.top #main section.top_news ul.wrapper li a.txt p{
	width: 17%;
	display: inline-block;
	font-size: 14px;
    background: #888;
    text-align: center;
    color: #fff;
	margin-right: 2%;
}
body.top #main section.top_news ul.wrapper li a.txt h4{
	display: inline-block;
	width: 80%;
	border: none;
}
body.top #main section.top_news ul.wrapper li{
    border-bottom: solid 1px #eee;

}
body.top #main section.top_news ul.wrapper li:last-child{
	border-bottom: none;
}
@media only screen and (max-width: 1024px){
	body.top #main section.top_news{
	    margin: 0px auto 100px;
	}
	body.top #main section.top_news ul.wrapper li{
		padding-bottom: 0;
	}
	body.top section.top_news .wrapper{
		width: 600px;
	}
	body.top section.top_news .wrapper::after{
		font-size: 30px;
	}

}

@media only screen and (max-width: 768px){
	body.top #main section.top_news ul.wrapper li a.txt p{
	    padding: 2px 6px;
	    display: inline;
	}
	body.top #main section.top_news ul.wrapper li a.txt h4{
	    margin: 5px 0 0;
		display: block;
		width: 100%;
	}
	body.top #main section.top_news ul.wrapper li{
		padding: 6px 0;
	}
	body.top section.top_news .wrapper{
	    width: 90%;
		position: relative;
		margin-top: 150px;
		
	}
	body.top #main section.top_news .top_news_inner::before{
		height: 200px;
		width: 70%;
		right: 0;
		top:100px;
	
	}
	body.top #main section.top_news .top_news_inner::after{
		font-size: 20px;
		right: -11px;
		top:130px;
	}
}
@media only screen and (max-width: 425px){
	body.top section.top_news .wrapper{
		padding: 16px;
	}
	body.top #main section.top_news .top_news_inner::after{
		width: 60%;

	}
	body.top #main section.top_news{
    	margin: 100px auto 100px;
	}
}

/* top_news を追加　ここまで*/
/* top_concept を追加　ここから*/

body.top #main section.top_concept{
    margin-top: 80px;
}
body.top section.top_concept .wrapper{
	width: 55%;
	margin: -120px auto 0;
	margin-right: 0;
	display: block;
	padding: 60px 0 60px 60px;
	background: #fff;
	box-sizing: border-box;
    top: 0px;
	z-index: 100;
}
.top_concept_photo{
    width: 60%;
    padding: 62px 0 0 50px;
}

body.top #main section.top_concept ul.wrapper li a.txt{
    text-align: center;

}
body.top #main section.top_concept ul.wrapper li a.txt h4{
	font-size: 20px;
    color: #408ab1;
    font-weight: bold;
    margin: 0 auto 20px;
    line-height: 32px;
	text-align: left;
}
body.top #main section.top_concept ul.wrapper li a.txt p{
	font-size: 16px;
	
}
@media only screen and (max-width: 1024px){
	body.top #main section.top_concept{
		margin-top: 50px;
	}
	.top_concept_photo{
		width: 95%;
		padding: 0;
	    margin: -20px auto 0;
		margin-right: 0;
	}
	body.top section.top_concept .wrapper{
		width: 80%;
	    margin: -40px 0 0px auto;
    	padding: 50px 0 50px 50px;
		top:0;
	}
	body.top #main section.top_concept ul.wrapper li a.txt h4{
		font-size: 16px;
	    line-height: 30px;
	}
	body.top #main section.top_concept ul.wrapper li a.txt p{
		font-size: 14px;
	    line-height: 22px;
	}
}
@media only screen and (max-width: 768px){
	body.top #main section.top_concept{
		margin-top: 70px;
	}
	body.top section.top_concept .wrapper{
    	padding: 40px 0 0px 40px;
	}
	.top_concept_photo{
		width: 100%;
		margin: 30px auto 0;
	}
}
@media only screen and (max-width: 425px){
	body.top #main section.top_concept{
		margin-top: 50px;
	}
	body.top section.top_concept .wrapper{
		width: 90%;
		padding: 20px 0 0px 20px;
	}	
	body.top #main section.top_concept ul.wrapper li a.txt h4{
		font-size: 14px;
	    line-height: 22px;
	}
	body.top #main section.top_concept ul.wrapper li a.txt p{
		font-size: 12px;
		line-height: 18px;
	}
}

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

body.top section.top_shop{

}

body.top .shopdate p.salonName{
	text-align: left;
    font-size: 22px;
    font-weight: bold;
    padding: 0px 0px 12px;
    margin: 0;
    margin-bottom: 10px;
    border-bottom: solid 2px #eee;
}


body.top .shopdate,
body.access #main .shopdate{
	padding: 20px 0 20px 40px;
	box-sizing: border-box;
    width: 80%;
    margin: -50px auto 0;
    margin-right: 0;
    background: #fff;
    position: relative;
}
body.top .shopdate{
    width: 60%;
	padding-top: 40px;
}


body.top .shopdate a{
	text-decoration: none;
	
}
body.top .shopdate table{
	table-layout: fixed;
	width: 100%;
}
body.top .shopdate tr,
body.access #main .shopdate tr{	
}
body.top .shopdate td,
body.access #main .shopdate td{
    padding: 10px 0;
    font-size: 16px;
    line-height: 1.6;
    width: 30%;
	display: inline-block;
    box-sizing: border-box;
	vertical-align: top;
}
body.access #main .shopdate td{
    font-size: 14px;
}
body.top .shopdate td strong{
	
}
body.top .shopdate td:nth-child(2n),
body.access #main .shopdate td:nth-child(2n){
	padding-right: 0;
    width: 70%;
}
body.top .shopdate td a{
    color: #333;
}

body.top .shopImg img{
	margin: 0 auto 0px;
	margin-left: 0;
    width: auto;
    text-align: center;
    display: block;
}

body.top .shopImg .colListItem_lineWrap{
    height: 72%;
}
body.top .shopdate .shopdate_h4{
	border-bottom: dotted 1px #f389d2;
    margin: 0 auto 20px;
}
body.top .ggmap{
	height: 300px;
	padding: 0 ;
	margin-top: 18px;
}
body.top .ggmap iframe,
body.top .ggmap object,
body.top .ggmap embed{
	height: 300px;
}

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

	}

	body.top .shopdate{
	    padding: 30px;
	    top: 0px;
	    margin-bottom: 0px;
	}
	body.access #main .shopdate{
	    padding: 20px;
		position: relative;
	    margin-top: 0;
		left: 0;

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

	body.top .shopdate,
	body.access #main .shopdate{
	    padding: 20px;
		position: relative;
	    margin-top: -30px;
    	width: 90%;
	}
	body.access #main .shopdate{
	    top: 0px;
	    margin-bottom: 0px;
	    padding: 30px;
	}
}

@media only screen and (max-width: 425px){
	body.top .shopdate p.salonName{
		font-size: 16px;
	}

	body.top .shopdate,
	body.access #main .shopdate{
	    padding: 20px 10px;
		left: 0;
		width: 100%!important;
		margin-top: 0;
	}
	body.top .shopdate td,
	body.access #main .shopdate td{
	    padding: 4px 0;
    	font-size: 14px;

	}

	
}

/* topページshopdata ここまで*/
/*=============================================================*/
/*=====================　company　recruit concept ========================*/
body.company #main .sect,
body.recruit #main .sect,
body.concept #main .sect{
    width: 100%;
    margin: 0 auto;
    max-width: 1200px;
	padding: 2%;
	box-sizing: border-box;
    background: rgba(255, 255, 255, 0.7);
}
body.company #main .sect h3,
body.recruit #main .sect h3,
body.concept #main .sect h3{
	font-size: 20px;
	line-height: 36px;
	margin-bottom: 26px;
    color: #408ab1;
}
body.company #main .sect p,
body.recruit #main .sect p,
body.concept #main .sect p{
	font-size: 16px;
    margin-bottom: 20px;
    line-height: 1.8;
    letter-spacing: -0.3px;
}
body.recruit .swiper-container{
    margin-top: 10px;
    margin-bottom: 0;
	padding-bottom: 60px;
}
table.recruit,
table.company{
    margin-bottom: 40px;
	font-size: 16px;
}
table.recruit > tbody > tr > td:first-child,
table.company > tbody > tr > td:first-child{
    background: none;
	border-right: double #eee;
    border-bottom: solid 1px #eee;
}

table.recruit > tbody > tr > td:nth-child(2),
table.company > tbody > tr > td:nth-child(2){
	background: none;
	border-bottom: solid 1px#eee;
}
table.recruit > tbody > tr:last-child td,
table.company > tbody > tr:last-child td{
	border-bottom: none;
}

@media only screen and (max-width: 1024px){
	body.company #main .sect h3,
	body.recruit #main .sect h3,
	body.concept #main .sect h3{
	    font-size: 18px;
    	line-height: 30px;
	}
	body.company #main .sect p,
	body.recruit #main .sect p,
	body.concept #main .sect p{
		line-height: 23px;
		font-size: 14px;
	    letter-spacing: -0.4px;
	}
	table.recruit > tbody > tr:not(:last-child) > td,
	table.company > tbody > tr:not(:last-child) > td,
	table.recruit > tbody > tr > td,
	table.company > tbody > tr > td{
		line-height: 18px;
		font-size: 13px;
	}
}
@media only screen and (max-width: 768px){

	table.recruit,
	table.company{
		font-size: 14px;
	}
}
@media only screen and (max-width: 425px){
	body.company #main .sect h3,
	body.recruit #main .sect h3,
	body.concept #main .sect h3{
	    font-size: 15px;
		line-height: 26px;
		margin-bottom: 10px;
	}
	body.company #main .sect p,
	body.recruit #main .sect p,
	body.concept #main .sect p{
		font-size: 13px;
	}

}
/*=============================================================*/
/*=====================　concept　========================*/
/*<h3>と<p>を<div>で囲む

           <div class="concept_box">
            <h3>{concept.subject}</h3>
            <p>
                {concept.body}
            </p>
           </div><!-- /.concept_box -->
*/
body.concept #content #main{
	position: relative;
}
body.concept #main .sect{
	background: none;
	padding: 0;
}
.concept_box{
    background: rgba(255, 255, 255, 1);
    position: relative;
    top: 0;
	padding: 60px  60px 60px 0px;
	z-index: 10;
    width: 60%;
    right: 0;
    margin-bottom: -200px;
	box-sizing: border-box;
}

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

}
body.concept .swiper-container{
	margin: 0 auto 0;
	width: 100%;
	padding-bottom: 60px;

}
body.top .swiper-container{
	margin: 0;
}
@media only screen and (max-width: 1024px){
	.concept_box{
	    margin-bottom: -100px;
	    width: 80%;
	    padding:10px 36px 36px 0;
		box-sizing: border-box;
	}
	body.top .swiper-container{
		margin: 0;

	}


}

@media only screen and (max-width: 600px){
	body.concept .swiper-container{
		position:relative;
		top:0;
	}
	body.top .swiper-container{
		margin-top: 10px;

	}	

}
@media only screen and (max-width: 425px){
	.concept_box{
	    margin-bottom: -30px;
		padding: 0 20px 20px 0;
	}


}

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

/* top more ボタン*/
body.top section.sect .titleArea a{
	text-decoration: none;
	float: none;
    width: 37px;
    margin: 6px auto 45px;
    text-align: center;
	border-bottom: dotted 1px;
    padding: 0;
    width: 37px;
}
body.top section.sect .titleArea a:hover{
	color: #333;
	border-bottom: solid 1px #333;
	opacity: 1;
}
body.top section.sect .titleArea a span{
	background: none;
	padding-right: 0;
}
@media only screen and (max-width: 425px){
	body.top section.sect .titleArea a{

	}

}


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


/* stylist more ボタン*/
body.stylist #main .stylistBox .txtInfo .blogArea .titleArea a,
body.stylist #main .sect02 .titleArea a{
	text-decoration: none;
	padding: 5px 0;
    width: 50px;
    background: none;
    text-align: center;
	border: solid 1px #888;
	margin-bottom: 4px;
}
body.stylist #main .stylistBox .txtInfo .blogArea .titleArea a:hover{
	color: #fff;
	background: #444;
	opacity: 1;
}
body.stylist #main .sect02 .titleArea a:hover{
	color: #fff;
	background: #444;
	opacity: 1;
}
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;
	padding: 5px 0;
    width: 50px;
    background: none;
    text-align: center;
	border: solid 1px #888;
	margin-bottom: 4px;
}
body.style #main .sect02 .titleArea a:hover{
	color: #fff;
	background: #444;
	opacity: 1;
}

body.style #main .sect02 .titleArea a span{
	background: none;
	padding-right: 0;
}
@media only screen and (max-width: 1024px){
	body.stylist #main .stylistBox .txtInfo .blogArea .titleArea a, body.stylist #main .sect02 .titleArea a,
	body.style #main .sect02 .titleArea a{
	    margin-top: 10px;
		padding: 4px 0;
		margin-bottom: 0;
	}

}


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

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

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

body.movie #content #main{

}
.youtube{
	margin-bottom: 7px;
}
.movie-cap{
	font-size: 16px;
    margin-bottom: 20px;
}
@media only screen and (max-width: 768px){
	.movie-cap{
		font-size: 14px;
	    margin-bottom: 10px;
	}
	.youtube{
		margin-bottom: 4px;
	}
}

/*=============================================================*/
/*=====================　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})}">
                        <h4>{media.subject}</h4>
                        <p><span class="media-right">{media.publisher}</span></p>★
                        
                    </a>
                </li>
                [/media]

*/


body.media #main .sect02 ul.wrapper li{
	position: relative;
	margin: 0 4% 0px 0;
    position: relative;
	width: 22%;
}
body.media #main .sect02 ul.wrapper li:nth-child(5n){
	margin: 0 4% 0px 0;
}
body.media #main .sect02 ul.wrapper li:nth-child(4n){
	margin-right: 0px;
}
body.media #main .sect02 ul.wrapper li a.txt h4{
	padding-bottom: 20px;
    color: #333;
    font-weight: bold;
    letter-spacing: 1px;
    font-size: 14px;
    margin: 0;	
}

body.media #main .sect02 ul.wrapper li a.img img{
	width: 100%;
    padding: 0;
    display: block;
    margin-bottom: 0px !important;
}
body.media #main .sect02 ul.wrapper li a.img img:hover{
    opacity: 1;
}
body.media #main .sect02 ul.wrapper li a.txt{
    position: relative;
    left: 0;
    width: 88%;
    z-index: 10;
    display: block;
    background: rgba(255, 255, 255, 1);
    padding: 20px 20px 0 0;
    box-sizing: border-box;
    top: -40px;

}
body.media #main .sect02 ul.wrapper li a.txt:hover{
	opacity: 1;
}
.media-right{
	color: #333;
	text-align: right;
}
body.media #main .sect02 ul.wrapper li a.txt p{
    font-size: 12px;
}
@media only screen and (max-width: 1024px){
	body.media #main .sect02 ul.wrapper li{
		margin: 0 4% 0px 0;
	    width: 30.6%;
		display: inline-block;
		vertical-align: top;
		padding: 0;
		position: relative;
	}
	body.media #main .sect02 ul.wrapper li:nth-child(2n),
	body.media #main .sect02 ul.wrapper li:nth-child(4n){
		margin: 0 4% 0px 0;
	}
	body.media #main .sect02 ul.wrapper li:nth-child(3n){
		margin-right: 0;
	}
}

@media only screen and (max-width: 768px){
	body.media #main .sect02 ul.wrapper li{
		width: 48%;
		margin: 0 4% 0px 0;
	}
	body.media #main .sect02 ul.wrapper li:nth-child(3n){
		margin: 0 4% 0px 0;
	}
	body.media #main .sect02 ul.wrapper li:nth-child(2n){
		margin: 0;
	}
	body.media #main .sect02 ul.wrapper li a.txt{
	    margin-bottom: -20px;
	}
}
@media only screen and (max-width: 425px){
	body.media #main .sect02 ul.wrapper li a.txt p{
		font-size: 11px;
	}
	body.media #main .sect02 ul.wrapper li a.txt{
		padding: 10px 10px 0 0;
	}
	body.media #main .sect02 ul.wrapper li a.txt h4{
		padding-bottom: 16px;
	}
}

/*=============================================================*/
/*=====================　submenu　========================*/
div.submenu{
	position: absolute;
	right: 10px;
	top:0;
	width: 100px;
	z-index: 200;
}
div.submenu li{
	width: 100px;
	display: inline-block;
	text-align: center;
}

div.submenu li a{
	width: 100%;
	color: #333;
	background: #eee;
	display: block;
	padding: 10px 0 20px;
	font-size: 16px;

}
div.submenu li a:hover{
	background: #408ab1;
	opacity: 1;
	color:#fff;
}
.clone-nav ul.submenu, body.top .clone-nav ul.submenu{
	top:30px;
}

@media only screen and (max-width: 1024px){
	div.submenu{
		position: fixed;
		right: 58px;
	    width: 100px;
	}
	div.submenu li{

	}
	div.submenu li a{
    	padding: 8px 0 14px;
	}	
}
@media only screen and (max-width: 425px){
	div.submenu{
	    right:50px;
		width: 60px;
	}
	div.submenu li{
		width: 60px;
	}

	div.submenu li a{
		font-size: 11px;
	    padding: 14px 0 14px;
	}	
}


/*=============================================================*/
/*=====================　sitemap　========================*/
body.sitemap #main section{
	background: rgba(255, 255, 255, 0.7);
	margin: 0 auto;
}
.main_page_link li{
    border-bottom: solid 1px #eee;
    padding: 14px 0;
}

@media only screen and (max-width: 425px){
	.main_page_link li{
		font-size: 14px;
		padding: 8px 0;
	}	
}
/*=============================================================*/
/*=====================　privacy　========================*/
body.privacy #main section{
	margin: 0 auto;
}
body.privacy section .shopdate{
    width: 100%;
    top: 0;
}

body.privacy section .shopdate .titleArea{
    border-bottom: solid 1px #eee;
}
body.privacy #main .shopdate h4{
    margin-bottom: 2px;
	font-size: 20px;
    margin-top: 20px;
}
@media only screen and (max-width: 425px){
	body.privacy #main .shopdate h4{
		font-size: 18px;	
	}
	body.privacy #main .shopdate ol li{
		font-size: 14px;
	}	
}

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


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

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

/*=============================================================*/
/*================== お問合せ ====================================*/
body.contact #main .btn input{
    border-radius: 30px;
	font-size: 20px;
	display: inline-block;
    width: 47%;
    margin:0 1%;
		
}

body.contact #main .contactInner{
	margin: 50px auto;
}

body.contact #main .confirm .btn{
	width: 100%;
    max-width: 600px;
    margin: 0 auto;
}
body.contact #main p.message{
	margin: 20px auto;
	border: double #408ab1;
    padding: 10px;
	font-size: 20px;
}
body.contact #main .complete a.returnTop{
	border-radius: 30px;
	max-width: 300px;
}
body.contact #main .complete a.returnTop:hover{
	opacity: 1;
	background: #333;
	color: #fff;
	
}
body.contact #main .input .contactInner dl dd input,
body.contact #main .input .contactInner dl dd textarea{
	box-shadow: none;
    border-radius: 0;
	-webkit-appearance: none;
}
@media only screen and (max-width: 1024px){
	body.contact #main p.message{
		margin: 20px auto;
	}
}
@media only screen and (max-width: 425px){
	body.contact #main .input .contactInner dl,
	body.contact #main .btn input,
	body.contact #main .confirm .contactInner dl,
	body.contact #main .input .contactInner dl dd input,
	body.contact #main .input .contactInner dl dd textarea{
		font-size: 16px;
	}
	body.contact #main .contactInner{
	    margin: 20px auto;
	}
	body.contact #main p.message{
		font-size: 18px;
	}
}
/*=============================================================*/
/*================== パンくずリスト ====================================*/


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

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

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

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

.breadcrumb li a {
    display: inline-block;
    padding: 4px 10px;
    text-decoration: none;
    color: #333;
    font-size: 16px;

}

.breadcrumb li a:hover {
    color: #408ab1;
	opacity: 1;
}

.breadcrumb li:first-child{
	margin-left: -7px;
}

.breadcrumb li a img{
    width: 16px;
}
@media only screen and (max-width: 1024px){
	.breadcrumb{
	    margin: 30px auto 0;
		width: 80%;
	}	
}
@media only screen and (max-width: 425px){
	.breadcrumb{
		width: 90%;
	}
	.breadcrumb li a{
		font-size: 12px;
	}
}

/*==================================================================*/
/*================  a#goTop =============================================*/
a#goTop{
    margin: 0;
    padding: 15px 1px 0;
    position: fixed;
    bottom: 50px;
    right: -16px;
    z-index: 50;
    transform: rotate(90deg);
    color: #333;
	background: none;
    /*background: url(/img/upload/2019/06/pagetop_img01.png) no-repeat center top;
    background-size: 74px;*/
}

a#goTop::before{
	content: "";
	position: absolute;
	top:0;
	left: 0;
	width: 74px;
	height: 1px;
	/*background: #333;*/
    margin-top: 10px;
    border-top: double 3px;
	
}
a#goTop::after{
	content: "";
	position: absolute;
	top:0;
	left: 0;
	width: 12px;
	height: 1px;
	background: #333;
    transform: rotate(-45deg);
    margin-top: 6px;
    margin-left: -2px;
}
@media only screen and (max-width: 1024px){
	a#goTop{
    	bottom: 74px;
		right: -10px;
		background-size: 60px;
		padding: 14px 1px 0;
	}
	a#goTop span{
		font-size: 15px;
	}
	a#goTop::before{
		width: 60px;
	}
	
}

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


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