@charset "utf-8";

/*= 情報 ==================================================================
 *
 *  作成者         : むとう
 *  初版           : 2007-01-31
 *  最終更新       : 2007-03-19
 
 *	記述順序
 ----------------------------------
 	1.position:
	2.display:
	3.visilibity:
	4.float:
	5.background:
	6.text-indent:
	7.overflow:
	8.vertical-align
	9.width:
	10.height:
	11.border:
	12.top:
	13.left
	14.margin:
	15.padding:
------------------------------------	

 *	目次

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




/*
---------------------------------------------------------------------
	ヘアカタインデックス
---------------------------------------------------------------------
*/
.contentsWrapper#catalog #indexArea {
	width:900px;
	padding:0 0 13px 0;
}
.contentsWrapper#catalog #indexArea .category {
	float:left;
	width:225px;
}
.contentsWrapper#catalog .title {
	padding:0 0 0 0;
	border-bottom:1px solid #E1E1E1;
	overflow:auto;
	height:43px;
}	
.contentsWrapper#catalog .title h1{
	width:210px;
	border:none;
	float:left;	
}
.contentsWrapper#catalog .title ul,
.contentsWrapper#catalog .title ul li{
	float:left;
}		
.contentsWrapper#catalog .title ul,
.contentsWrapper#catalog .title p{
	padding:16px 0 0;
}.contentsWrapper#catalog .title ul{
	margin:0 10px;
}	
.contentsWrapper#catalog .title ul li{
	margin:0 3px;
}	
	
/*　カテゴリーイメージ
----------------------------------------------------------*/

/*　クレジット
----------------------------------------------------------*/
.contentsWrapper#catalog #indexArea .category p{
	border-right:1px solid #e1e1e1;
}
.contentsWrapper#catalog #indexArea .category p.day {
	padding:0 6px 3px 6px;
}
.contentsWrapper#catalog #indexArea .category#class p{	
	border:none;
}
.contentsWrapper#catalog #indexArea .category#juicy p.no1,
.contentsWrapper#catalog #indexArea .category#fresh p.no1,
.contentsWrapper#catalog #indexArea .category#victoria p.no1,
.contentsWrapper#catalog #indexArea .category#class p.no1{
	padding:2px 5px 2px;
	border: none;
}	

.contentsWrapper#catalog #indexArea .category p.credit {
	vertical-align:text-top;
	border-right:1px solid #e1e1e1;
	padding:0 6px 3px 8px;
}
.contentsWrapper#catalog #indexArea .category p.cooperation {
	border-right:1px solid #e1e1e1;
	vertical-align:text-top;
	padding:0 6px 3px 8px;
}
.contentsWrapper#catalog #indexArea .category#class p.cooperation {
	border:none;
}

/*　更新履歴
----------------------------------------------------------*/
.contentsWrapper .indexImage p{
	text-align:right;
	font-weight:bold;
	padding:0 3px 0 0;
}	
.contentsWrapper p#update{
	margin:0 0 0 17px;
	display:block;
}	
.contentsWrapper ul#update{
	margin:2px 0 0 30px;
}	



/*
---------------------------------------------------------------------
	ヘアカタカテゴリーインデックス
---------------------------------------------------------------------
*/

/*　h2タイトル(カテゴリー、詳細ページ共通）
----------------------------------------------------------*/

.contentsWrapper#catalog h2{
	margin:16px 0 0 0;
}
.contentsWrapper#catalog h2.backnumber{
	margin:16px 0;
}
.contentsWrapper#catalog p.update{
	width:300px;
	text-align:right;
	margin-top:-32px;
	margin-left:585px;
}	
.contentsWrapper#catalog h3.season{
	margin-left:15px;
	display:inline;
}	
.contentsWrapper #imageArea{
	width:870px;
	margin:16px 15px 20px 15px;
	float:left;
	display:inline;
}
/*　フラッシュエリア
----------------------------------------------------------*/
.contentsWrapper #imageArea #flashArea{
	float:left;
	width:600px;
	margin:0;
}	
.contentsWrapper #imageArea #flashArea h4{
	width:auto;
	border-top:2px solid #FFF;
	padding:6px 0 8px 6px;
}	
.contentsWrapper #imageArea #flashArea p{
	padding:0 6px 6px 6px;
}

.flashMovieArea{
	background:#fff;
	width:600px;
	height:349px;
}
	

.noFlashCategory {
	width:490px;
	margin-left:auto;
	margin-right:auto;
	padding-top:110px;
	text-align:left;
}

.noFlashCategory p{
	padding-top:8px;
}





/*　NO1エリア
----------------------------------------------------------*/
.contentsWrapper #imageArea #no1Area{
	float:right;
	width:256px;
	margin:0;
}	
.contentsWrapper #imageArea #no1Area table{
	width:100%;
}
.contentsWrapper #imageArea #no1Area caption{
	border-top:2px solid #FFF;
}
.contentsWrapper #imageArea #no1Area th{
	text-align:left;
	width:49%;
}	
.contentsWrapper #imageArea #no1Area td{
	vertical-align:top;
	padding:3px 0 4px 7px;
	text-align:left;
	word-break:normal;
}	
.contentsWrapper #imageArea #no1Area .border{
	border-right:1px dashed #FFF;
}	

/*　サムネイルエリア
----------------------------------------------------------*/
.contentsWrapper #thumArea{
	width:870px;
	margin:0 auto;
	overflow:auto;
}
.contentsWrapper #thumArea .thumbnail{
	float:left;
	width:138px;
	margin:0 0 20px 0;
	padding:0 0 0 30px;
}	
.contentsWrapper #thumArea .thumbnail span{
	width:50%;
	float:left;
	margin:7px 0 0 0;
}	
.contentsWrapper #thumArea .thumbnail strong{
	display:block;
	padding:0 0 5px 0;
}	
.contentsWrapper #thumArea .thumbnail span.season{
	text-align:right;
}	




/*
---------------------------------------------------------------------
	ヘアカタ詳細ページ
---------------------------------------------------------------------
*/
.contentsWrapper #flashArea{
	width:900px;
	margin:7px auto 0 auto;
}

.noFlashCatalog {
	width:650px;
	height:500px;
	margin-left:auto;
	margin-right:auto;
	text-align:left;
}

.noFlashCatalog p.txt1{
	padding-top:180px;
}
.noFlashCatalog p.txt2{
	padding-top:8px;
}

/*　FLASHから下のエリア
----------------------------------------------------------*/
.contentsWrapper #detailArea{
	width:100%;
	margin:16px auto 0 auto;
}

/*　詳細左側（キャッチ、クレジット、QR）
----------------------------------------------------------*/
.contentsWrapper #detailArea #letterArea{
	float:left;
	width:380px;
	margin:0 5px 0 0;
}
.contentsWrapper #detailArea #letterArea div{
	margin:0 0 0 14px;
	padding:2px 0 0 10px;
}
.contentsWrapper #detailArea h3{
	width:100%;
}
.contentsWrapper #detailArea #letterArea strong{
	display:block;
	margin:11px 0 0 0;
}	
.contentsWrapper #detailArea #letterArea p{
	margin:13px 30px 0 0;
}	
.contentsWrapper #detailArea #letterArea #credit,
.contentsWrapper #detailArea #letterArea #qr{
	border-left:5px solid #ebebeb;
	margin-top:22px;
}
.contentsWrapper #detailArea #letterArea #credit ul{
	margin:13px 30px 0 0;
}	
.contentsWrapper #detailArea #letterArea #credit p{
	margin-top:13px;
}
.contentsWrapper #detailArea #letterArea #qr{
	overflow:auto;
}	
.contentsWrapper #detailArea #letterArea #qr dl dt{
	float:left;
	width:105px;
}
.contentsWrapper #detailArea #letterArea #qr dl dd{
	padding-top:10px;
}			


/*　スタイリストエリアの部分はcommon.cssに記述
----------------------------------------------------------*/

/*	各カテゴリー戻るボタン
----------------------------------------------------------*/
.contentsWrapper#catalog #toIndex ul li.Juicy a{
	background:url(../../forwoman/haircatalog/Juicy/img/btn_tocategory.gif) no-repeat;
}
.contentsWrapper#catalog #toIndex ul li.Victoria a{
	background:url(../../forwoman/haircatalog/Victoria/img/btn_tocategory.gif) no-repeat;
}	
.contentsWrapper#catalog #toIndex ul li.Fresh a{
	background:url(../../forwoman/haircatalog/Fresh/img/btn_tocategory.gif) no-repeat;
}	
.contentsWrapper#catalog #toIndex ul li.Class a{
	background:url(../../forwoman/haircatalog/Class/img/btn_tocategory.gif) no-repeat;
}	

/*	各カテゴリー戻るボタン（hover）
----------------------------------------------------------*/
.contentsWrapper#catalog #toIndex ul li.Juicy a:hover{
	background:url(../../forwoman/haircatalog/Juicy/img/btn_tocategory_on.gif) no-repeat;
}
.contentsWrapper#catalog #toIndex ul li.Victoria a:hover{
	background:url(../../forwoman/haircatalog/Victoria/img/btn_tocategory_on.gif) no-repeat;
}	
.contentsWrapper#catalog #toIndex ul li.Fresh a:hover{
	background:url(../../forwoman/haircatalog/Fresh/img/btn_tocategory_on.gif) no-repeat;
}	
.contentsWrapper#catalog #toIndex ul li.Class a:hover{
	background:url(../../forwoman/haircatalog/Class/img/btn_tocategory_on.gif) no-repeat;
}
/*	その他戻るボタン
----------------------------------------------------------*/
.contentsWrapper#catalog #toIndex ul li.check a{
	background:url(../../forwoman/haircatalog/img/btn_tocheck.gif) no-repeat;
}

/*	その他戻るボタン（hover）
----------------------------------------------------------*/
.contentsWrapper#catalog #toIndex ul li.check a:hover{
	background:url(../../forwoman/haircatalog/img/btn_tocheck_on.gif) no-repeat;
}


/*
---------------------------------------------------------------------
	ヘアカタ最下部スライダー
---------------------------------------------------------------------
*/

.contentsWrapper#catalog #slider{
	width:870px;
	margin:0 auto;
	padding:20px 0 0 ;
}	



/*
---------------------------------------------------------------------
	ヘアカタZoomページ
---------------------------------------------------------------------
*/

/*	フラッシュエラー表示
----------------------------------------------------------*/
.noFlashZoom {
	width:650px;
	margin-left:auto;
	margin-right:auto;
	padding-top:180px;
	text-align:left;
}

.noFlashZoom p{
	padding-top:8px;
}






/*
---------------------------------------------------------------------
	ヘアカタ診断
---------------------------------------------------------------------
*/
.contentsWrapper#catalog .diagnosisBox{
	width:860px;
	margin:0 auto;
}
.contentsWrapper#catalog .diagnosisBox .submit{
	text-align:center;
	clear:both;
	line-height:3em;
	padding:20px 0;
}
.contentsWrapper#catalog .diagnosisBox#result .submit{
	padding:10px 0;
}
.contentsWrapper#catalog .diagnosisBox h2,
.contentsWrapper#catalog .diagnosisBox p.discription{
	width:863px;
	margin:10px auto 0;
}
.contentsWrapper#catalog .diagnosisBox .box#form{
	margin:0 auto;
	width:650px;
	border:none;
}	
.contentsWrapper#catalog .diagnosisBox h4,
.contentsWrapper#catalog .diagnosisBox p{
	clear:both;
	padding:30px 0 10px;
}
.contentsWrapper#catalog .diagnosisBox .box#form dl#name{
	width:397px;
	background:url(../../forwoman/haircatalog/img/diagnosis/bg_pre.gif) no-repeat;
	margin:20px auto 0;
	padding:10px 0 0;
	text-align:center;
}	
.contentsWrapper#catalog .diagnosisBox .box#form dl#name dt{
	padding-bottom:5px;
}	
.contentsWrapper#catalog .diagnosisBox .box#form p#start{
	text-align:center;
	padding-top:0;
}	
.contentsWrapper#catalog .diagnosisBox .box#form p.error{
	padding:10px 10px 10px 30px;
	border:1px solid #fecece;
	width:580px;
	background:#fcf2f3;
	color:#FF0000; 
	margin:0 0 20px;
}	
.contentsWrapper#catalog .diagnosisBox h4#category{
	padding-top:0;
}	
.contentsWrapper#catalog .diagnosisBox ul li{
	float:left;
}
.contentsWrapper#catalog .diagnosisBox ul#category li{
	float:none;
	padding:3px 0;
	clear:both;
	margin-left:10px;
}
.contentsWrapper#catalog .diagnosisBox .box#form ul#category li dl {
	width:auto;
	height:20px;
}	
.contentsWrapper#catalog .diagnosisBox ul#category li dl dt{
	float:left;
	width:15px;
}
.contentsWrapper#catalog .diagnosisBox ul#category li dl dt{
	padding-top:5px;
}	
.contentsWrapper#catalog .diagnosisBox ul#category li dl dd{
	text-align:left;
}	
.contentsWrapper#catalog .diagnosisBox ul#category li dl dd strong{
	margin-right:5px;
}		

.contentsWrapper#catalog .diagnosisBox .box#form ul li dl{
	width:130px;
	text-align:center;
}	
	
.contentsWrapper#catalog .diagnosisBox h3{
	clear:both;
	padding-top:30px;
}

.contentsWrapper#catalog .diagnosisBox ul{
	margin:5px 0 0 0;
}	
.contentsWrapper#catalog .diagnosisBox#result h2{
	font-size:120%;
}
.contentsWrapper#catalog .diagnosisBox#result ul li{
	margin-right:2px;
}
.contentsWrapper#catalog .diagnosisBox#result .box#chart,
.contentsWrapper#catalog .diagnosisBox#result .section#thumArea{
	margin:20px 0 0 0;
}
.contentsWrapper#catalog .diagnosisBox#result .box#chart{
	overflow:auto;
	padding:5px 0;
}	
.contentsWrapper#catalog .diagnosisBox#result .box#chart p#name{
	padding:0 0 1px;
	text-align:center;
}	
.contentsWrapper#catalog .diagnosisBox#result .box#chart p#name strong{
	font-size:120%;
}	
.contentsWrapper#catalog .diagnosisBox#result .box#chart h3{
	padding-top:0;
}	
.contentsWrapper#catalog .diagnosisBox#result .box#chart h4,
.contentsWrapper#catalog .diagnosisBox#result .box#chart ul{
	width:200px;
	margin:0 auto;
}	
.contentsWrapper#catalog .diagnosisBox#result .box#chart h4{
	padding:7px 0 0 0;
}	
.contentsWrapper#catalog .diagnosisBox#result .box#chart h4#category{
	padding:10px 0 5px;
	width:auto;
	text-align:center;
}
.contentsWrapper#catalog .diagnosisBox#result .box#chart ul{
	line-height:1;
}	
.contentsWrapper#catalog .diagnosisBox#result .box#chart ul li img{
	padding-top:4px;
}	
.contentsWrapper#catalog .diagnosisBox#result .box#chart ul#face li{
	margin-right:10px;
}	
.contentsWrapper#catalog .diagnosisBox#result .box#chart p#diagnosisResult{
	padding:10px;
	margin:10px auto 0;
	width:238px;
	background:#fff;
}
.contentsWrapper#catalog .diagnosisBox#result .box#changeCaetgory{
	clear:both;
	padding-top:20px;
}		
.contentsWrapper#catalog .diagnosisBox#result .box#changeCaetgory ul li{
	border:none;
	padding:10px 0;
	margin:0;
}	
.contentsWrapper#catalog .diagnosisBox#result .box#changeCaetgory ul li dl{
	width:70px;
	text-align:center;
}	
.contentsWrapper#catalog .diagnosisBox#result .box#changeCaetgory p.submit#category{
	text-align:center;
}
.contentsWrapper#catalog .diagnosisBox#result p.submit#parameter{
	text-align:right;
}	
.contentsWrapper#catalog .diagnosisBox#result #parameterBox{
	float:left;
	width:280px;
}		
.contentsWrapper#catalog .diagnosisBox #parameterBox .box#form {
	width:auto;
}	
.contentsWrapper#catalog .diagnosisBox #parameterBox .box#form ul{
	margin-top:10px;
}		
.contentsWrapper#catalog .diagnosisBox#result .section#thumArea{
	float:right;
	width:560px;
	clear:none;
	background:none;
}
.contentsWrapper#catalog .diagnosisBox p.total{
	text-align:right;
	padding-bottom:10px;
	padding-top:0;
	font-size:120%;
}
.contentsWrapper#catalog .diagnosisBox p.total#all{
	padding-top:10px;
}	
	
.contentsWrapper#catalog .diagnosisBox .section#thumArea .thumbnail{
	width:275px;
	margin:0 0 20px 2px;
	padding:0;
	float:left;
	display:inline;
}	
.contentsWrapper#catalog .diagnosisBox .section#thumArea .right{
	margin-left:5px;
}	
.contentsWrapper#catalog .diagnosisBox .section#thumArea .thumbnail.all{
	margin-left:12px;
}	
.contentsWrapper#catalog .diagnosisBox .section#thumArea .thumbnail img{
	float:left;
	display:block;
}	
.contentsWrapper#catalog .diagnosisBox .section#thumArea .thumbnail .parameterBox {
	float:left;
	margin-left:5px;
}
.contentsWrapper#catalog .diagnosisBox .section#thumArea .thumbnail .parameterBox h4{
	font-size:10px;
	padding:0;
}		
.contentsWrapper#catalog .diagnosisBox .section#thumArea .thumbnail .parameterBox ul{
	clear:both;
	margin:0 ;
}	
.contentsWrapper#catalog .diagnosisBox .section#thumArea .thumbnail .parameterBox ul li{
	float:left;
	margin-right:1px;
	padding-bottom:5px;
	font-size:10px;
}	
.contentsWrapper#catalog .diagnosisBox .section#thumArea .thumbnail .parameterBox ul#face li{
	margin-right:4px;
}	
.contentsWrapper#catalog .diagnosisBox .section#thumArea .thumbnail .parameterBox ul li img{
	padding-top:3px;
}	
.contentsWrapper#catalog .diagnosisBox .section#thumArea .thumbnail p{
	clear:both;
	padding:0;
	width:270px;
}
.contentsWrapper#catalog .diagnosisBox .section#thumArea .thumbnail p span{
	margin:0;
}	
.contentsWrapper#catalog .diagnosisBox .section#thumArea .thumbnail p span.new{
	float:left;
}
.contentsWrapper#catalog .diagnosisBox .section#thumArea .thumbnail p span.season{
	float:right;
	width:auto;
}
.contentsWrapper#catalog .diagnosisBox .section#thumArea p.all{
	padding:10px 0;
	text-align:center;
}	

.contentsWrapper#catalog .diagnosisBox#result .box#chart h3 img{
	behavior:url(/library/iepngfix.htc);
}
.contentsWrapper#catalog .diagnosisBox#result .box#chart ul#face li img{
	behavior:url(/library/iepngfix.htc);
	padding:0;
}