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



/*増税ボタン用*/

@import "tax.css";





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


トップページスライド

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



body {
/*  margin: 0;
  padding: 0;*/
/*  IE8以下の代替の背景画像  */
/* background: url(../img/top/bg_aboutus.jpg) #333;*/
/*  background-attachment: fixed;*/
  background-size: cover;
  background-position:center;

}


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


コンテンツ部分

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

#top-container{
	width:100%;
	background-color:#fff !important;
}


#top-container .w1000,#top-container .w1200{
	margin:0 auto;
	clear:both;
}
#top-container .w600{
	width:600px;
}

#top-container .w400{
	width:400px;
	padding-top:100px;
}

#top-container .w380{
	width:320px;
	padding-top:100px;
	padding:60px 30px 30px 30px;
	text-align:center;
}
#top-container .w220{
	width:220px;
	padding-top:100px;
}

.item_list{
	text-align:center;
}




.item_list .w250{
  width : 25% ; /* 未対応ブラウザ用フォールバック */
  width : -webkit-calc(100% / 4) ;
width : calc(100% / 4) ;
	 vertical-align:top;
	 margin:60px 0px 0px -5px !important;
	 padding:0px !important;
	display:inline-block;
	/*float:left;*/

}

.item_list .w250 .ndot{
	width:100%;
	text-align:center;
}

.item_list .w250 .ndot img{
	width:100px !important;
}





.item_list .w166{/*6個ならび*/
  width : 25% ; /* 未対応ブラウザ用フォールバック */
  width : -webkit-calc(100% / 4) ;
width : calc(100% / 4) ;
	 vertical-align:top;
	 margin:60px 0px 0px -5px !important;
	 padding:0px !important;
	display:inline-block;
	/*float:left;*/

}

.item_list .w166 img{/*6個ならび*/
width:100%;
}


#reco .item_list .w250{/*レコメンド部分4個並び*/
  width : 25% ; /* 未対応ブラウザ用フォールバック */
  width : -webkit-calc(100% / 4) ;
width : calc(100% / 4) ;
	 vertical-align:top;
	 margin:60px 0px 0px -5px !important;
	 padding:0px !important;
	display:inline-block;

}

#reco .item_list .w250 img{
	width:100%;
}


#reco #lumi .w250{/*レコメンド部分3個並び

  width : 33.33333% ; 
  width : -webkit-calc(100% / 3) ;
width : calc(100% / 3) ;
	 vertical-align:top;
	 margin:60px 0px 0px -5px !important;
	 padding:0px !important;
	display:inline-block;*/

}



#reco #lumi .w250 img{/*レコメンド部分3個並び*/
width:240px;
}



.item_word{
	width:95%;
}


.item_word .border{
	padding:10px 0;
	border:1px solid #ccc;
	width:90%;
	margin-left:auto;
	margin-right:auto;
	margin-top:10px;
}

.item_word .border p{
	text-align:center !important;
}


.item_list p.explain{
	text-align:left;
}


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

商品用動画一覧部分

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

.movie{
	float:left;
	clear:both;
	color:#fff;
	text-align:center;
	padding-bottom:70px;
}

.movie a{
	color:#fff;
}
.movie a:hover{
	color:#fff;
	
}

.movie .w1000{
	text-align:center;
}


.movie .box{
	width:25%;
	margin:0px !important;
	padding:0px !important;
	display:inline-block;
	vertical-align:top;
}

.movie .box img{
	margin-bottom:25px;
}
.movie .box p{
	width:95%;
	margin-bottom:50px;
}


.movie_link{
	clear:both;
}
.movie_link a{
	border:1px solid #ccc;
	padding:10px 50px;
	
}



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

ヘアケア

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



#hair .image{
	float:left;
	clear:both;
	width:100%;
	height:300px;
	display:block;
	background:url(../img/top/image_haircare.jpg) no-repeat;
	background-position:center;

}



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

アフロートドッグ

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



#dog .image{
	float:left;
	clear:both;
	width:100%;
	height:300px;
	display:block;
	background:url(../img/top/image_dog.jpg) no-repeat;
	background-position:center;

}

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

ケラスターゼ

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

#reco #kera .w250{
    width: 23%;
    margin: 60px 0px 0px -5px !important;
    margin-left: 1% !important;
}




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

リュミエリーナ認証番号

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

#ninshou{
	padding:20px;
	background-color:#F5F5F5;
	height:120px;
	text-align:left;
	
}

#ninshou img{
	width:120px;
	float:left;
	
}

#ninshou .box{
	width:800px;
	float:right;
}


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

お店アフロートについて

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


#afloat{
	clear:both;
	background-color:#ECECEC;
	padding-bottom:100px;

}

#afloat .btn_link{/*外部リンク用ボタン*/
margin-top:-40px;
}

#afloat .btn_link a{
	border:1px solid #999;
	padding:10px 30px

}

#afloat .btn_link a:before{
	content:url(../img/top/icon_link.jpg);
}


#afloat .btn_link2{/*外部リンク用ボタン*/
float:none;
margin-top:20px;
}

#afloat .btn_link2 a{
	border:1px solid #999;
	padding:10px 30px

}

#afloat .btn_link2 a:before{
	content:url(../img/top/icon_link.jpg);
}



#afloat #aboutus{
	width:100%;
	height:600px;
	background:url(../img/top/bg_aboutus.jpg) no-repeat center;
	filter: 				alpha(opacity=90);
    -moz-opacity:			0.9;
    opacity:				0.9;
	background-size:cover;
	display:block;
	text-align:center;
	padding-top:100px;
	
}

#afloat #aboutus .box{
	width:800px;
	height:auto;
 background: rgba(255,255,255,0.55);
 padding:100px 100px;
 margin-left: auto;
 margin-right:auto;
}
#afloat #aboutus .box p{
	margin-top:50px;
}


#afloat #salon{
	padding-top:100px;
	text-align:center;
	clear:both;
}
#afloat #salon .box{
	display:inline-block;
	vertical-align:top;
	  width : 33.33333% ; /* 未対応ブラウザ用フォールバック */
  width : -webkit-calc(100% / 3) ;
width : calc(100% / 3) ;
	 vertical-align:top;
	 margin:40px 0px 0px -6.5px !important;
	 padding:0px !important;
	display:inline-block;
}
#afloat #salon .box img{
	width:100%;
	margin-bottom:20px;
}


#afloat .staff{
	padding-top:100px;
	text-align:center;
	clear:both;
}

#afloat .staff img{
	margin-top:30px;
}
#afloat #catalog {
	text-align:center;
	margin-top:100px;
}

#afloat #catalog .box{
	display:inline-block;
	vertical-align:top;
	  width : 45% ; /* 未対応ブラウザ用フォールバック */
  width : -webkit-calc(100% / 2) ;
width : calc(100% / 2) ;
	 vertical-align:top;
	 margin:0px 0px 0px -6.5px !important;
	 padding:0px !important;
	display:inline-block;
}
#afloat #catalog .box img{
	width:100%;
	margin-bottom:20px;
	margin-top:50px;
}

#afloat #salon_bnr{
	max-width:1400px;
	margin:120px auto 30px;
	text-align:center;
}

#afloat #salon_bnr img{
	max-width:100%;
}


#afloat #salon_bnr li{
	width:45%;
	margin:0 1.5% 30px;
	display:inline-block;
}

#afloat #salon_bnr li a:hover{
	filter:alpha(opacity=96);
	opacity:0.96;
}
	
@media only screen and (max-width: 789px) { 
#afloat #salon_bnr{
	margin-top:40px;
}

#afloat #salon_bnr li{
	width:/*90%*/45%;
}


 p.explain{
	display:none !important;
}

p.mt20{
	text-align:left;
	width:90%;
	margin-left:5%;
}



p.txt18{
	border:none !important;
}



p.txt14{
	font-size:12px;
}



}


















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


新着商品

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

#new{
	background:url(../img/top/afloat_bg.jpg) no-repeat right;
	height:524px;
}

#new img{
	margin-top:70px;
	margin-left:-100px;
}


#new2 img{
	width:800px;
}




/*スマホ*/
@media only screen and (max-width: 789px) {  



/*-------

商品詳細部分

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

.item_list .w250{
	width:/*100%*/30% !important;
	height:auto;
	/*border-bottom:1px solid #ccc;*/
	margin-top:20px !important;
	margin-right:2px;
}


.item_list .w250 br{
	display:none;
}



.item_list .w250 .item_pict{
	width:/*40%*/100%;
	padding-bottom:20px;

}
.item_list .w250 .item_pict img{
	width:95%;
}


 .w250 .item_word{
	width:/*60%*/100%;
	padding-bottom:20px;
}

 .w250 .item_word p{
	text-align:left;
}


 .w250 .item_word .border{
	margin-top:10px;
	display:none;
}



.item_word .txt18{
	font-size:14px;
	padding:0px;
	margin:0px;
	text-align:center !important;
}
.item_word .txt14{
	text-align:center !important;
}




.item_list .w166{/*4個ならび*/
  width :25% ; /* 未対応ブラウザ用フォールバック */
  width : -webkit-calc(100% / 4) ;
width : calc(100% / 4) ;
	 vertical-align:top;
	 margin:20px 0px 0px -5px !important;

}

.item_list .w166 .item_pict img{
	width:100%;
}


.item_list .w166  .txt14{
	margin-top:5px !important;
}


#reco #lumi .w250 img{/*レコメンド部分3個並び*/
width:100%;
}



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

動画一覧部分

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



.movie .box{
	width:50%;
}

.movie .box img{
	width:90%;
}

.movie_link br{
	display:none;
}


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

リュミエリーナ認証番号SP

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

#ninshou{
	height:auto;
	clear:both;
	text-align:center;
	
}

#ninshou img{
	width:100px;
	margin-left: auto;
	margin-right:auto;
	float:none;
	margin-bottom:10px;
	
}

#ninshou .box{
	float:none;
	width:100%;
	font-size:12px !important;
	text-align:left;
	
}


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

お店アフロートについて

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

#afloat{
	padding-bottom:50px;
	
}



#afloat #aboutus{
	height:auto;
	background:none;
	padding-top:0px;
	
}



#afloat #aboutus img.image02{
	width:100%
}
#afloat #aboutus .box{
	width:90%;
 background:none;
 padding:10px;
 margin-left: auto;
 margin-right:auto;
 margin-top:10px;
}
#afloat #aboutus .box p{
	margin-top:10px;
}

#afloat #aboutus .box p.txt27{
	font-size:20px;
}


#afloat #aboutus .box p br{
	display:none;
}


#afloat .staff{
	padding-top:30px;
}


#afloat .staff img{
	margin-top:0px;
	width:100%;
}


#afloat .btn_link{/*外部リンク用ボタン*/
clear:both;
margin-top:30px;
float:none;
}


#afloat #salon{
	padding-top:30px;
}


#afloat #salon .box{
	  width : 50% ; /* 未対応ブラウザ用フォールバック */
  width : -webkit-calc(100% / 2) ;
width : calc(100% / 2) ;
	 margin:20px 0px 0px -6.5px !important;
}
#afloat #salon .box img{
	width:100%;
	margin-bottom:20px;
}


#afloat #catalog {
	margin-top:30px;
}

#afloat #catalog .box img{
	margin-bottom:0px;
	margin-top:20px;
}


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


新着商品

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

#new{
	background:none;
	height:auto;
}

#new img{
	width:100%;
	margin-top:0px;
	margin-left:0px;
}



#new2 img{
	width:94%;
}




}



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


トップバナー

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

#bana_p{
	text-align:center;
	
}

#bana_s {
	display:none;
}



/*スマホ*/
@media only screen and (max-width: 789px) {  

#bana_p{
	display:none;
}

#bana_s{
	display: block;
	text-align:center;
}

#bana_s img{
	width:70%;
}

.word{
	max-width:90%;
	margin-left:5%;
	text-align:left !important;
}
.word br{
	display:none;
}


#afloat #aboutus .box p.txt27{
	font-size:16px;
	text-align:left;
}



#afloat #aboutus p.text_about{
	text-align:left;
}


.item_word .txt18{
	margin-top:0px !important;
}


.item_word .mt20{
	margin-top:0px !important;
}


}









/*
スライダー・バナー
------------------------------------------------------------------------------------*/
.bnr_comm{
	width:100%;
	max-width:600px;
	margin:20px auto;
	text-align:center;
}

.bnr_comm iframe{
	width:100%;
	height:180px;
}




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

フッターインスタ

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

#insta_footer{
	width:100%;
	height:auto;
max-width:1000px !important;
margin:0px auto 0 auto;
text-align:center !important;
}
.eapps-instagram-feed-title{
	display:none !important;
}



#insta_footer iframe{
	max-width:1000px !important;
}



#insta_fotter .media-grid{
	max-width:1000px !important;
	margin:0 auto;
}

#insta_footer iframe.pc{
	display:block;
}


#insta_footer iframe.sp{
	display:none;
}



/*スマホ*/
@media only screen and (max-width: 789px) {  

#insta_footer iframe.pc{
	display:none;
}


#insta_footer iframe.sp{
	display:block ;
}


}

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

アフロートプレミアムヘアケア診断

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



#shindan iframe{
	width:100%;
	height:500px;
	margin-top:50px;
}



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

髪カリスマ

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


#kami{
	width: 100%;
	max-width: 800px;
	text-align: center;
	margin: 80px auto 0 auto;
}
#kami p{
	margin: 30px 0;
}


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

	#kami{
	width: 90%;
		text-align: left;
	margin: 30px auto 0 auto;
}
	#kami p{
	margin: 15px 0;
}
	#kami p br{
		display: none;
	}
}



#main .txt14 a{
	background-color: #ececec;
	padding: 10px 0;
	display: block;
	margin-top: 10px;
}