@charset "utf-8";
/* CSS Document */

/*
.ttl{
			font-size:50px;
	font-family: 'Josefin Sans', sans-serif;
	padding:50px 0 0 0;

}

.under{
	border-top:1px solid #000;
	padding-left:20px;
	margin-left:10px;
}

*/



#wrapp{
	position:relative;
	/* */height:auto;
	/*height:800px;*/
	background:#FAFAFA;
	margin-top:0px;

}


#wrapp .title{
	margin-top:0px;
	padding:0 0 0 30px;
}


.products{
	width:/*50%*/100%;
	height:100%;
	position:relative;
	text-align:center;
	margin-top:0px;
	padding-top:20px;
}
.container{
	margin-top:50px;
}

.products #contents{
	width:100%;
	/* */height:auto;
	/*height:1300px;*/
/*	padding:30px 0;*/
	margin-top:-20px;
	padding-bottom:50px !important;
	text-align:center;
}

.products #contents .controls .ttl{
	font-size:14px;
	font-weight:400;
/*	margin-bottom:30px;*/
margin:30px 2% 20px 2%;
	padding:8px 30px 5px 30px !important;
	display:inline-block;
	width:/*auto*/15%;
	text-align:center;
	cursor:pointer;
/**/	border-left:1px solid #cecece;
	border-right:1px solid #cecece;
	border-top:1px solid #cecece;
	border-bottom:1px solid #cecece;
	
	color:#cecece;

}

/* */

.products #contents .controls2_bg{
		width:100%;
		text-align:center !important;
		margin:0 auto;

}


.products #contents .controls2{
/*	width:100%;
	max-width:1320px;*/
	width:auto;
	max-width:1320px;
	margin-left:auto;
	margin-right:auto;
	text-align:left !important;

}


.products #contents .controls2 .ttl{
	width:200px;
	font-size:14px;
	font-weight:400;
margin:0px 1% 20px 1%;
	padding:8px 15px 5px 15px !important;
	display:inline-block !important;
	/*width:7%;*/
	text-align:center;
	cursor:pointer;
	border-left:1px solid #cecece;
	border-right:1px solid #cecece;
	border-top:1px solid #cecece;
	border-bottom:1px solid #cecece;
	color:#cecece;


}


/*
.products #contents .controls .ttl:hover,.products #contents .controls2 .ttl:hover{
	color:#841604;
		border-left:1px solid #841604 !important;
	border-right:1px solid #841604 !important;
	border-top:1px solid #841604 !important;
	border-bottom:1px solid #841604 !important;

}

.mixitup-control-active {
	color:#841604 !important;
	border-left:1px solid #841604 !important;
	border-right:1px solid #841604 !important;
	border-top:1px solid #841604 !important;
	border-bottom:1px solid #841604 !important;
	background-color:#fff !important;
}


*/



.products #contents .controls .ttl:hover,.products #contents .controls2 .ttl:hover{
	color:#fff;
	background-color:#841604;
		border-left:1px solid #841604 !important;
	border-right:1px solid #841604 !important;
	border-top:1px solid #841604 !important;
	border-bottom:1px solid #841604 !important;

}


.mixitup-control-active {
	color:#fff !important;
	background-color:#841604 !important;
	border-left:1px solid #841604 !important;
	border-right:1px solid #841604 !important;
	border-top:1px solid #841604 !important;
	border-bottom:1px solid #841604 !important;
}

.mixitup-control-active[data-filter]:after {
    background: transparent;
}






#box_brand_icon{/*アイコン*/
		font-family: 'Josefin Sans', sans-serif;
		font-size:12px;
		color:#999;
		text-align:right;
		margin-right:7%;
		margin-top:-100px;
		margin-bottom:150px;

}

#box_brand_icon .box{
	display:inline-block;
	margin:0 10px;
}
/*
#box_brand_icon .salon:after{
	content:"  ／";
}*/

#box_brand_icon .salon{
/*	border-left:3px solid #ccc;
	padding-left:10px;	*/
		background-image:url(../img/icon_s2.png);
		background-repeat:no-repeat;
		padding-left:30px;
		background-size:10px;
		background-position:7px;


}
#box_brand_icon .user{
/*	border-left:3px solid #DAB9B3;
	padding-left:10px;*/	
		background-image:url(../img/icon_u2.png);
/**/		background-repeat:no-repeat;
		padding-left:30px;
		background-size:10px;
		background-position:7px;

}


ul#item-list{
	width:100%;
/*	max-width:1600px;*/
	margin:0 auto;
}


/*
#item-list, #item-list li{
	overflow:hidden;

}*/

/*
ul#item-list{
	margin-left:-5% !important;
}
*/
#item-list li{/*アイコンサイズ*/
	position:relative;
	width:/*25*//*18*//*13*//*11*/15%;
	max-width:250px;
	display:inline-block;
	margin:/*2%*/0%;
	vertical-align:top !important;

}


#item-list li dl{
	width:94%;
	font-size:12px;
	font-weight:normal;
	margin-left:2%;
	
	
}


#item-list li dl dt{
	font-weight:bold;
	font-size:14px;
}




#item-list li dl dd{
	text-align:left !important;
	margin-top:10px;
	font-size:11px;


}



/*左側アイコンサイズ*/
/*
#item-list li:nth-child(n+7){
	position:relative;
	width:10% !important;
	display:inline-block;
	margin:0%;

}*/




/*ユーザー・サロンアイコン
#item-list li.both a{
	background-image:url(../img/icon_b2.png);
	background-repeat:no-repeat;
	background-position:bottom;

}

#item-list li.user a{
	background-image:url(../img/icon_u2.png);
	background-repeat:no-repeat;
	background-position:bottom;

}
#item-list li.salon a{
	background-image:url(../img/icon_s2.png);
	background-repeat:no-repeat;
	background-position:bottom;

}
*/






.other li{/*左側アイコンサイズ*/
	position:relative;
	width:/*25*//*18*/15% !important;
	display:inline-block;
	margin:/*2%*/0%;

}



/*
#item-list li:before{
	width:140%;
	height:100%;
	background:#fff;
	content:"";
	position:absolute;
	display:block;
	top:0;
	-moz-transform:translateX(-120%) ;
	-webkit-transform:translateX(-120%);
}
*/
#item-list li.display:before{
	left:/*140*/140%;
}

#item-list a{
	position:relative;
	display:block;
/*	padding:30px 20px 20px;*/
padding:5px;
}





/*
商品説明
----------------------------------------*/
#item-ex{
	/*position:fixed;*/
	position:absolute;
	width:50%;
	height:100%;
	top:0;
	left:50%;
	/*background:#FFF0EE;*/
	text-align:center;
}
#item-ex section{
	width:100%;
	height:900px;
	position:absolute;
	z-index:1;
	opacity:0;
	top:/*20%*/0;
	overflow:hidden;
 background-position: center;
  background-size:cover;
  background-repeat:no-repeat;


}

#item-ex section img{
	width:100%;
}



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

#item-ex section{
	height:750px;

}
/*
.products #contents{
	height:700px;
}*/



.products #contents .controls2{
/*	width:100%;
	max-width:1320px;*/
	width:auto;
	max-width:1040px;
	margin-left:auto;
	margin-right:auto;
	text-align:left !important;

}



#item-ex section{
	height:750px;


}
}

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

/*
.products #contents .controls2_bg{
		width:100%;
		text-align:center !important;
		margin:0 auto;

}
*/



/*
.products #contents .controls2{
	width:auto;
	max-width:1040px;
	margin-left:auto;
	margin-right:auto;
	text-align:left !important;

}
*/

/*
.products #contents .controls2{
	width:auto;
	max-width:780px;
	margin-left:auto;
	margin-right:auto;
	text-align:left !important;

}
*/


#item-list li dl dt {
	text-align:center !important;
	
}


#item-list li dl dd {
	text-align: left !important; margin-top: 5px; margin-bottom: 15px;}

}


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


.products #contents .controls2{
	width:auto;
	max-width:800px;
	margin-left:auto;
	margin-right:auto;
	text-align:left !important;

}

.container{
	margin-top:30px;
	text-align:left !important;
	margin-left:2%;
}


}









#item-ex .display{
	z-index:2;
	opacity:1;
	transform:scale(1);
	-moz-transform:scale(1);
	-webkit-transform:scale(1);
	-ms-transform:scale(1);
	-webkit-transition: opacity 1s ease-out;
	-moz-transition: opacity 1s ease-out;
	-ms-transition: opacity 1s ease-out;
	transition: opacity 1s ease-out;
}
/* */#item-ex section:before{
	/* 透過した黒を重ねる */
/*	background-color: rgba(255,255,255,0.2);白*/
	background-color: rgba(0,0,0,0.35);

	/* どの範囲に重ねるかを指定 */
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	content: ' ';
}


#item-ex dl{
	text-align:center;
	display:inline-block;
	width:/*70*/95%;
	text-align:center;
	vertical-align:middle;
	padding-top:/*40*/40%;
	position:relative;
	z-index:9999;

}

#item-ex dt{
/*	font-size:30px;
	color:#000;
	margin-bottom:15px;*/
	
	
		font-family: 'Josefin Sans', sans-serif;
		font-size:34px;
		color:#fff;

}

#item-ex dt span{
	margin-left:15px;
	font-size:14px;
	letter-spacing:0.15em;
		color:#fff;

}



#item-ex dd{
	max-width:480px;
	font-size:16px;
	margin:20px auto;
		color:#fff;
		text-align:left;
		line-height:2.0;

}

#item-ex dd.for{
	font-size:12px;
	text-align:center;
	font-family: 'Josefin Sans', sans-serif;
	border:1px solid #ccc;

}



#item-ex ul{
	margin-top:10px;
}

#item-ex ul li.btn{
	list-style:none;
	display:inline-block;
	width:46%;
/*	border:1px solid #000;*/
/*	padding:10px 0;
	background-color:rgba(255, 255, 255, 0.25);*/
	margin:/*20px 0*/30% 0;
	z-index:99999;

	
}


#item-ex ul li.btn a{
	width:100%;
	color:#333;
	text-decoration:none;
	display:block;
	background:url(../img/arrow.png) no-repeat;
	background-position:right;
padding:20px 0;
	background-color:rgba(255, 255, 255, 0.2);

}
#item-ex ul li.btn a:hover{
		background-color:rgba(204, 204, 204, 0.5);

}


#item-ex ul li.btn2{
	list-style:none;
	display:inline-block;
	width:46%;
	/*border:1px solid #000;*/
/*	padding:10px 0;
	background-color:rgba(255, 255, 255, 0.25);*/
	margin:30% 0;
	z-index:99999;

	
}


#item-ex ul li.btn2 a{
	width:100%;
	color:#FFF;
	text-decoration:none;
	display:block;
	background:url(../img/arrow2.png) no-repeat;
	background-position:right;
padding:20px 0;
	background-color:rgba(0, 0, 0,0.5);

}
#item-ex ul li.btn2 a:hover{
		background-color:rgba(0, 0, 0, 0.7);

}




/*スマホ*/

@media screen and (max-width:980px){
	
	
#wrapp .title{
	text-align:center;
}


.products{
	width:100%;
	height:auto;
	position:static;
	top:0;
	left:0;
	text-align:center;
}

.products #contents{
	padding:0px 0 30px 0;
	height:auto;
	text-align:center !important;
}


.products #contents .ttl{
	font-size:12px;
	height:38px;
/*	padding:8px 30px 5px 30px !important;*/
padding:0px;
	width:/*auto*/12%;
	text-align:center;
	cursor:pointer;
	vertical-align:middle;
	margin:20px 0 20px 0;
	
}

.products #contents .controls .ttl{
margin:0px;
	padding:8px 30px 5px 30px !important;
	display:inline-block;
	width:/*auto*/30%;
	height:auto;

}

/* */

/*
.products #contents .controls2{
	width:auto;
	max-width:94%;
	margin-left:2%;
	margin-right:2%;
	text-align:left !important;

}*/



/**/

.products #contents .controls2{
	width:94%;
	margin-top:20px;
	text-align:center !important;
}

.products #contents .controls2 .ttl{
margin:10px 0 0 0;
	padding:8px 5px 3px 5px!important;
	width:44%;
	height:auto;
		font-size:/*12*/11px;
		letter-spacing:0.01em;

}



.products #contents .all{
	line-height:38px;
}



.products #contents .ttl a{
	vertical-align:middle;
}


/* */
#item-list li{
	position:relative;
	/* width:48%; */
	width:85%;
	max-width:none;
	display:inline-block;
	margin:0 7% 25px !important;
}
/* #item-list li:nth-child(n+6){
	width:48% !important;
}


#item-list li:nth-child(n+9){
	width:48% !important;

}
 */



ul#item-list{
	width:100%;
	margin-left:0 !important;
}






/*
商品説明
----------------------------------------*/

#item-ex{
	display:none;
}



/*#item-ex{
	position:relative;
	width:100%;
	height:500px;
	top:0;
	left:0;
}

#item-ex dl{
	text-align:center;
	padding-top:20%;
}

#item-ex dt{
	font-size:30px;
	margin-bottom:15px;
}



#item-ex dd{
	font-size:14px;
	margin:5px auto;
}
#item-ex ul{
	margin-top:10px;
}

#item-ex ul li.btn{
	margin:10% 0;

	
}



#item-ex section#cutech{
	width:100%;
	position:absolute;

}







#item-ex .display{
	z-index:2;
	opacity:1;
	transform:scale(1);
	-moz-transform:scale(1);
	-webkit-transform:scale(1);
	-ms-transform:scale(1);
	-webkit-transition: opacity 1s ease-out;
	-moz-transition: opacity 1s ease-out;
	-ms-transition: opacity 1s ease-out;
	transition: opacity 1s ease-out;
}

*/



}


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

#item-ex dl{
	text-align:center;
}



#item-ex ul li.btn{
/*	margin:30% 0;*/

	
}


}


/*ロゴ下ライン*/

#item-list li a {
  position: relative;
  display: inline-block;
  text-decoration: none;
}
#item-list li a::after {
 position: absolute;
  bottom: -4px;
  left: 0;
  content: '';
  width: 100%;
  height: 1px;
  background: #9E8580;
  transform: scale(0, 1);
  transform-origin: left top;
  transition: transform .3s;
  margin-bottom:5px;

}
#item-list li a:hover::after {
  transform-origin: left top;
  transform: scale(1, 1);
}



/*---------
2段階ボタン
-----------*/
.hidden_box {
    margin: 2em 0;/*前後の余白*/
    padding: 0;
}

/*ボタン装飾*/
.hidden_box label {
    padding: 15px;
    font-weight: bold;
    border: solid 2px black;
    cursor :pointer;
}

/*ボタンホバー時*/
.hidden_box label:hover {
    background: #efefef;
}

/*チェックは見えなくする*/
.hidden_box input {
    display: none;
}

/*中身を非表示にしておく*/
.hidden_box .hidden_show {
    height: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    transition: 0.8s;
}

/*クリックで中身表示*/
.hidden_box input:checked ~ .hidden_show {
    padding: 10px 0;
    height: auto;
    opacity: 1;
}
inmut checkbox {
	display:none !important;
}




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

画像部分

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

/*PC*/

/*
#item-list li{
	position:relative;
	width:40%!important;
	display:inline-block;
}



#item-list li:nth-child(n+6){
	width:40% !important;

}


#item-list li:nth-child(n+9){
	width:40% !important;

}*/

ul#item-list img.logo_p{/*ロゴ*/
	width:/*30*/70%;
	vertical-align:top;
	padding:/*20% 20%*/15% 15%;
	opacity:0.8;
	margin-bottom:10px;
	overflow:hidden !important;
/*	
	width:30%;
	padding:0px 65% 65% 0;
	*/
	display:block;
	
}
ul#item-list li{
	margin-bottom:/*15*/35px;
}
ul#item-list li img.product{/*商品画像*/
	width:70%;
	vertical-align:top !important;
	padding:20% 5%;
	opacity:1;
	margin-bottom:/*30*/0px;
	overflow:hidden !important;
	display:block;
	
}


ul#item-list li.p p	{/*アンカーテキスト*/
	font-size:12px;
	vertical-align:top !important;
	height:auto;
	margin-top:-30px;
}



ul#item-list img{
	display:none ;
}


/*サロン*/
ul#item-list #dc{/*デジキュア*/
 background-image:url(../img/product/dc.jpg);
	 background-repeat:no-repeat;
 background-size:100%;
}



ul#item-list #sc{/*ストキュア*/
 background-image:url(../img/product/stcure.jpg);
	 background-repeat:no-repeat;
 background-size:100%;
}


ul#item-list #cross{/*クロス*/
 background-image:url(../img/product/cross.jpg);
	 background-repeat:no-repeat;
 background-size:100%;
}


ul#item-list #str{/*STR*/
 background-image:url(../img/product/teion_st.jpg);
	 background-repeat:no-repeat;
 background-size:100%;
}



ul#item-list #ps{/*パワーソリューション*/
 background-image:url(../img/product/ps.jpg);
	 background-repeat:no-repeat;
 background-size:100%;
}



ul#item-list #shp{/*SHP*/
 background-image:url(../img/product/shp.jpg);
	 background-repeat:no-repeat;
 background-size:100%;
}

ul#item-list #jp{/*ジュエリーパーマ*/
 background-image:url(../img/product/jp.jpg);
	 background-repeat:no-repeat;
 background-size:100%;
}



ul#item-list #ag{/*AG*/
 background-image:url(../img/product/ag.jpg);
	 background-repeat:no-repeat;
 background-size:100%;
}

ul#item-list #oxia{/*oxia*/
 background-image:url(../img/product/oxia.jpg);
	 background-repeat:no-repeat;
 background-size:100%;
}


/*ユーザー*/

ul#item-list #cutech{/*キューテック*/
 background-image:url(../img/product/cutech.jpg);
	 background-repeat:no-repeat;
 background-size:100%;
}
ul#item-list #cutech_m{/*マイクロフォーム*/
 background-image:url(../img/product/cutech_m.jpg);
	 background-repeat:no-repeat;
 background-size:100%;
}



ul#item-list #iromochi{
 background-image:url(../img/product/iromochi.jpg);
 margin-top:0px;
 	 background-repeat:no-repeat;
 background-size:100%;

}


ul#item-list #nadel{
 background-image:url(../img/product/nadel.jpg);
 margin-top:0px;
 	 background-repeat:no-repeat;
 background-size:100%;

}




ul#item-list #curiot{
 background-image:url(../img/product/curiot.jpg);
 margin-top:0px;
 	 background-repeat:no-repeat;
 background-size:100%;

}


ul#item-list #graysia{
 background-image:url(../img/product/graysia.jpg);
 margin-top:0px;
 	 background-repeat:no-repeat;
 background-size:100%;

}


ul#item-list #graysia-color{
 background-image:url(../img/product/graysia-color.jpg);
 margin-top:0px;
 	 background-repeat:no-repeat;
 background-size:100%;

}

ul#item-list #graysia_bg{
 background-image:url(../img/product/graysia2.jpg);
 margin-top:0px;
 	 background-repeat:no-repeat;
 background-size:100%;

}
ul#item-list #carist{
 background-image:url(../img/product/caretect.jpg);
 margin-top:0px;
 	 background-repeat:no-repeat;
 background-size:100%;

}
ul#item-list #bijou{
 background-image:url(../img/product/bijou.jpg);
 margin-top:0px;
 	 background-repeat:no-repeat;
 background-size:100%;

}
ul#item-list #vw{
 background-image:url(../img/product/venus.jpg);
 margin-top:0px;
 	 background-repeat:no-repeat;
 background-size:100%;

}
ul#item-list #bvo{
 background-image:url(../img/product/bvo.jpg);
 margin-top:0px;
 	 background-repeat:no-repeat;
 background-size:100%;

}
ul#item-list #relac{
 background-image:url(../img/product/relax.jpg);
 margin-top:0px;
 	 background-repeat:no-repeat;
 background-size:100%;

}

ul#item-list #senketsu{
 background-image:url(../img/product/sou.jpg);
 margin-top:0px;
 	 background-repeat:no-repeat;
 background-size:100%;

}


ul#item-list #j_cleaner{
 background-image:url(../img/product/jewel_cleaner.jpg);
 margin-top:0px;
 	 background-repeat:no-repeat;
 background-size:100%;

}

ul#item-list #salon12{/*サロンオリジナル12*/
 background-image:url(../img/top/item/salon12.jpg);
	 background-repeat:no-repeat;
 background-size:100%;
}

ul#item-list #otomo{/*OTOMO*/
 background-image:url("../img/product/otomo.jpg");
	 background-repeat:no-repeat;
 background-size:100%;
}

ul#item-list #perms{/*perms*/
 background-image:url("../img/product/permslabo.jpg");
	 background-repeat:no-repeat;
 background-size:100%;
}

ul#item-list #erii{/*erii*/
 background-image:url("../img/product/erii.jpg");
	 background-repeat:no-repeat;
 background-size:100%;
}

ul#item-list #f-color{/*f-color*/
 background-image:url("../img/product/f-color.jpg");
	 background-repeat:no-repeat;
 background-size:100%;
}



ul#item-list #oem-top{/*oem-top*/
 background-image:url("../img/product/oem_top.jpg");
	 background-repeat:no-repeat;
 background-size:100%;
}

ul#item-list #bb-top{/*bb-top*/
 background-image:url("../img/product/bb.jpg");
	 background-repeat:no-repeat;
 background-size:100%;
}



/*スマホ*/

@media screen and (max-width:980px){
/*
#item-list li{
	position:relative;
	width:40%!important;
	display:inline-block;
}



#item-list li:nth-child(n+6){
	width:40% !important;

}


#item-list li:nth-child(n+9){
	width:40% !important;

}*/


ul#item-list li{
	margin:0 auto 10px;
}


#item-list li a {
  /* position: relative; */
  display: block;
}



ul#item-list img.logo_p{
	width:/*30*/60%;
	vertical-align:top;
	padding:/*20% 20%*/20% 20%;
	opacity:0.7;
	margin-bottom:0px;
	overflow:hidden !important;
/*	
	width:30%;
	padding:0px 65% 65% 0;
	*/
	
}


}