@import "includes_sp.css";
/***************************************************************************************************
*
*	includes.css
*
***************************************************************************************************/
html{width:100%;}
body{
	position:relative;
	width:100%;
	-webkit-font-smoothing: antialiased; /* MAC safari 対策*/
}

.spBlock { display: none; }
.pcBlock { display: block; }

.tHide{
	display:block;
	overflow:hidden;
	text-indent:110%;
	white-space: nowrap;
	background:transparent no-repeat 0 0;
}

.cf:before,
.cf:after {content: " ";display: table;}
.cf:after {clear: both;}

a,
a:link,
a:active,
a:focus{	
	outline: none;
	text-decoration:none;
}

/*
.remove{display:none !important;}
.hide{visibility:hidden !important;}
*/
/*--------------------------------------------------------------------------------------------------
-	main navigation (PC 1024px)
--------------------------------------------------------------------------------------------------*/

#contentHeader{
	position:relative;
	width:100%;
	min-width:1024px;
	height:100px;
	margin:0 0 30px 0;
	background:transparent url(../img/bg_header.png) repeat-x center top;
	text-align:left;
}

#navigation{height:100%;}
#navigation .inner{
	width:980px;
	height:100%;
	margin:0 auto;
}

#navigation #headerLogo{
	float:left;
	width:168px;
	margin:50px 0 0 15px;
}

#navigation .right{
	float:right;
	width:700px;
	height:100%;
}
#navigation .sns_wrapper{
	position: relative;
}
#navigation .sns{
	position: absolute;
	right: 140px;
	top: 15px;
}
#navigation .sns li{
	display: inline-block;
	margin-right: 5px;
}
#toEnglish{
	display:block;
	overflow:hidden;
	float:right;
	width:116px;
	height:20px;
	margin:15px 15px 0 0;
	color:#333333;
	font-size:14px;
	text-align:right;
	line-height:20px;
}
#toEnglish strong{color:#333333 !important;}

#toEnglish:hover{color:#887711; text-decoration:none;}
#toEnglishSP{display:none;}

#mainNavi{
	display:table;
	float:right;
	width:100%;
	height:35px;
	margin:30px 0 0 0;
}

#mainNavi .mainList{
	display:table-cell;
	height:33px;
	/* background:url(../img/bg_header.png) repeat-x center -63px; */
}

#mainNavi .mainList > a span{display:none;}

#spButton{display:none;}
#mainNavi #n0{display:none;width:100%;}
#mainNavi #n1{width:112px;}
#mainNavi #n2{width:112px;}
#mainNavi #n3{width:142px;}
#mainNavi #n4{width:112px;}
#mainNavi #n5{width:112px;}
#mainNavi #n6{width:112px;}

#mainNavi .mainList > a{
	display:block;
	position:relative;
	width:100%;
	height:31px;
	text-align:center;
	font-size:14px;
	font-weight:bold;
	color:#333333;
	border-bottom:2px solid transparent;
}

#mainNavi .mainList > a:hover{
	text-decoration:none;
	color:#887711;
	border-color:#bfb154;
}

#mainNavi .mainList > a:before,
#mainNavi .mainList > a:after{
	content:"";
	display:block;
	position:absolute;
	top:0;
	width:1px;
	height:20px;
	background:no-repeat 0 0;
}

#mainNavi .mainList > a:after{background-image:url(../img/line_header.png);right:0;}
#mainNavi #n1 > a:before{background-image:url(../img/line_header.png);left:0;}

#hdrgnav01 #navigation .inner ul #n1 > a,	/* News */
#hdrgnav02 #navigation .inner ul #n2 > a,	/* Products */
#hdrgnav03 #navigation .inner ul #n3 > a,	/* Salon Support */
#hdrgnav04 #navigation .inner ul #n4 > a,	/* Special */
#hdrgnav05 #navigation .inner ul #n5 > a,	/* About us */
#hdrgnav06 #navigation .inner ul #n6 > a,	/* Contact */
#eco #navigation .inner ul #n5 > a			/* About us > eco */
{border-color:#887711;border-color:#bfb154;color:#887711;}

/*--------------------------------------------------------------------------------------------------
-	sub navigation (PC 1024px)
--------------------------------------------------------------------------------------------------*/

#mainNavi .subNavi{
	overflow:hidden;
	position:absolute;
	top:100px;
	left:0;
	width:100%;
	height:0;
	background:#000000;
	background:rgba(0,0,0,0.8);
}

#mainNavi .subNavi .parent{
	width:920px;
	margin:0 auto;
	padding:0 30px;
}

/* #n1s,#n2s,#n3s,#n4s,#n5s,#n6s{display:none;} */

#mainNavi .subNavi .parent li{
	display:inline-block;
	width:auto;
	height:50px;
	line-height:50px;
	margin:0 1em 0 0;
	background:none;
}

#mainNavi .subNavi .parent li > a{
	color:#ffffff;
	font-size:14px;
	font-weight:bold;
}
#mainNavi .subNavi .parent li > a:before{
	content:"\003e";
	display:inline-block;
	padding:0 0.25em 0 0;
	font-size:16px;
}

#mainNavi .subNavi .parent .child{
	display:inline-block;
	margin:0 0 0 1em;
}
#mainNavi .subNavi .parent .child li{
	display:inline-block;
	width:auto;
	margin:0 1em 0 0;
}
#mainNavi .subNavi .parent .child li > a{font-weight:normal;}
#mainNavi .subNavi .parent .child li > a:before{
	content:"\30fb";
	display:inline-block;
	padding:0 0 0 0;
	font-size:14px;
}

#mainNavi .subNavi .parent li > a:hover,
#mainNavi .subNavi .parent .child li > a:hover{color:#887711;}

/*--------------------------------------------------------------------------------------------------
-	beneathNavi(PC 1024px)
--------------------------------------------------------------------------------------------------*/
.beneathNavi{
	box-sizing: border-box;
	overflow:hidden;
	position:absolute;
	top:50px;
	left:0;
	width:100%;
	background:rgba(221, 221, 221, 0.95);
	border-bottom: 1px solid #ccc;
	transition: all 300ms 0ms ease;
/*
-webkit-transition: all 300ms cubic-bezier(0.230, 1.000, 0.320, 1.000);
   -moz-transition: all 300ms cubic-bezier(0.230, 1.000, 0.320, 1.000);
     -o-transition: all 300ms cubic-bezier(0.230, 1.000, 0.320, 1.000);
        transition: all 300ms cubic-bezier(0.230, 1.000, 0.320, 1.000); /* easeOutQuint */
}
.beneathNavi.off {
	height: 0;
}

.h212{height: 212px;}
.h246{height: 246px;}
.h146{height: 146px;}

#mainNavi .subNavi .parent .beneathNavi a{
	color:#333333;
	font-size: 95%;
}
#mainNavi .subNavi .parent .beneathNavi .menu{
	display:table;
	width:878px;
	min-height:99px;
	margin:0 auto 12px auto;
	padding:20px 20px 5px 20px;
}
#mainNavi .subNavi .parent .beneathNavi .menu li{
	float:left;
	width:33%;
	height: auto;
	line-height: 1.4;
	margin:0 0 15px 0;
}
#mainNavi .subNavi .parent .beneathNavi .menu li:first-child
{
	width: 100%;
	margin: 0 0 20px 0;
}
#mainNavi .subNavi .parent .beneathNavi .menu li:first-child span
{
	font-size: 125%;
	font-weight: bold;
}
.beneathNavi .menu li:before{
	content: ">";
	color: #8c6420;
	padding-right: 5px;
	position: relative;
	top: -2px;
}
/* オーバーライド用 */
#mainNavi .subNavi .parent .child .beneathNavi li > a:before{
	content:"" !important;
	padding:0;
}
/*--------------------------------------------------------------------------------------------------
-	contentBody(PC 1024px)
--------------------------------------------------------------------------------------------------*/
#contentBody{
	margin-bottom:80px;
}

/*--------------------------------------------------------------------------------------------------
-	pagetop(PC 1024px)
--------------------------------------------------------------------------------------------------*/
#pageTop{
	position:fixed;
	bottom:20px;left:auto;right:50px;
	width:50px;height:51px;
	/* background: #FFF; */
	/* z-index: 10000; */
}
#pageTop a{
	display:inline-block;
	overflow:hidden;
	position:relative;
	float:right;
	width:50px;
	height:51px;
}
#pageTop a img{width:350px;}

@media screen and (max-width: 640px) {
	#pageTop{
		right: 10px;
	}
}

/*--------------------------------------------------------------------------------------------------
-	breadCrumb(PC 1024px)
--------------------------------------------------------------------------------------------------*/
#breadCrumb{
	width:100%;
	background:#f0eed5;
	position: relative;
	z-index: 10000;
}

#breadCrumb .inner{
	width:994px;
	padding:0 15px;
	margin:0 auto;
}

#breadCrumb .inner ul{float:left;}
#breadCrumb .inner ul li{
	display:inline-block;
	heihgt:32px;
	line-height:32px;
	font-size:12px;
}
#breadCrumb .inner ul li:after{
	content:">";
	display:inline-block;
	padding:0 0.5em 0 1em;
	color:#7a7a7a;
}
#breadCrumb .inner ul li.last:after{display:none};
#breadCrumb .inner ul li a{font-size:12px;}


/*--------------------------------------------------------------------------------------------------
-	footer(PC 1024px)
--------------------------------------------------------------------------------------------------*/
#contentFooter{
	width:100%;
	position:relative;
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

#contentFooter .inner{
	display:inline-block;
	width:994px;
	padding:0 15px;
	margin:0 auto;
}

#contentFooter img{
	display:block;
	position:absolute;
	height:auto;
}
#footerNavi #instagram,
#footerNavi #fb,
#footerNavi #yt{
	position:relative;
	display:block;
	overflow:hidden;
}

#footerNavi{
	display:table;
	width:100%;
	height:50px;
	background:#eeeeee;
	border-top:1px solid #cccccc;
}
#footerNavi #instagram{
	display:inline-block;
	float:left;
	width:32px;
	height:32px;
	margin:9px 19px 0 0;
}
#footerNavi #instagram img{
	width: 100%;
	height: auto;
}
#footerNavi #fb{
	display:inline-block;
	float:left;
	width:30px;
	height:30px;
	margin:10px 20px 0 0;
}
#footerNavi #fb img{width:290px;left:-45px;}

#footerNavi #yt{
	display:inline-block;
	float:left;
	width:34px;
	height:34px;
	margin:8px 20px 0 0;
}
#footerNavi #yt img{width:280px;left:-76px;}

#footerNavi .footerList{
	display:table;
	float:left;
	height:50px;
}

#footerNavi .footerList li{
	display:table-cell;
	width:100px;
	text-align:left;
	vertical-align:middle;
}

#footerNavi .footerList li:before{
	content:"\003e";
	display:inline-block;
	margin:0 5px 0 0;
	color:#887711;
	vertical-align:top;
	font-weight:bold;
}

#footerNavi .footerList li a{
	display:inline-block;
	color:#333333;
	padding:1px 0 0 0;
}
#footerNavi .footerList li a:hover{color:#887711;}

#contentFooter #copyright{
	width:100%;
	height:20px;
	line-height:20px;
	background:#424242;
	color:#ffffff;
	font-size:10px;
}

#contentFooter #copyright span{text-align:right;}
#contentFooter #copyright span{text-align:right;}
#contentFooter #copyright span a{color:#ffffff;}
#contentFooter #copyright span a:hover{text-decoration:none;}

/*--------------------------------------------------------------------------------------------------
-	z-index
--------------------------------------------------------------------------------------------------*/
#contentBody,
#contentHeader,
#breadCrumb,
#contentFooter,
#contentCopy{position:relative;}

#contentBody	{z-index:1;}
#contentHeader	{z-index:2;}
#breadCrumb		{z-index:1;}
#contentFooter	{z-index:4;}
#contentCopy	{z-index:5;}
#pageTop		{z-index:6;}


#attention_top
{
	margin:0 0 20px 0;
	width:100%;
	padding:15px;
	text-align: center;
	background: #eee;
	color: #f00;
}

#attention
{
	margin:50px 0 0 0;
	width:100%;
	padding:15px;
	text-align: center;
	background: #eee;
}