@charset "shift_jis";

/*indexページのcss*/


/*div構造=======================================================================

#wrapper ┬ #carlogo
　　　　 └ #index_wrapper ┬ #leftColumn ┬ #news_topics_wrapper ─ #news_topics
						   │			  ├ #mail_community_wrapper
						   │			  ├ #ranking_wrapper ┬ #ranking_grade
						   │			  │				  └ #ranking_color
						   │			  └ #special_wrapper
						   │ 
						   └ #rightColumn
						   
=============================================================================*/





/* div#index_wrapper
===================================================================
=================================================================*/
div#index_wrapper{
	margin:12px;
	background:url(../../image/index_wrapper_bg.gif) right bottom no-repeat;
}




/* div#leftColumn
===================================================================
=================================================================*/

div#leftColumn{
	width:648px;
	float:left;
}

div#leftColumn h2{
	margin-bottom:5px;
}


/* ニュース＆トピックス
=========================================*/
div#news_topics_wrapper{
	width:365px;
	margin:0 10px 12px 0;
	float:left;
}

div#news_topics{
	width:343px;
	height:206px;
	padding:10px;
	border:1px solid #a0a0a0;
	overflow:auto;
}

div#news_topics dl dt{
	width:8em;
	padding-bottom:0.6em;
	text-indent:0.8em;
	background:url(../../image/news_topics_bullet.gif) left 7px no-repeat;
	float:left;
}

div#news_topics dl dd{
	margin-left:8em;
	padding-bottom:0.6em;
}

div#news_topics dl dd a{
	color:#000;	
}

div#news_topics dl dd a:visited{
	color:#660066;	
}

div#news_topics dl dd a:hover{
	color:#d73c3c;
}



/* メールサービス、コミュニティ
=========================================*/
div#mail_community_wrapper{
	width:273px;
	float:left;
	margin-bottom:12px;
}

div#mail_community_wrapper ul.community li img{
	vertical-align:bottom;
}


/* 人気ランキング
=========================================*/
div#ranking_wrapper{
	background:url(../../image/ranking_bg.gif) right bottom no-repeat;
	margin-bottom:15px;
	font-size:78%;
	line-height:1.5;
}


/*グレードランキング*/
div#ranking_grade{
	width:321px;
	padding:5px 0;
	margin-right:6px;
	border-top:1px solid #a0a0a0;
	float:left;
}

div#ranking_grade h3{
	border-bottom:1px dotted #a0a0a0;
	padding:0 0 5px 5px;
	margin-bottom:5px;
}

div#ranking_grade p{
	margin:0 0 5px 7px;
}

div#ranking_grade ol{
	width:181px;
	float:left;
	padding-left:10px;
	margin-right:5px;
}

div#ranking_grade ol li{
	padding-left:20px;
	margin-bottom:0.6em;
}

div#ranking_grade ol li.no01{
	background:url(../../image/no1.gif) left 2px no-repeat;
}

div#ranking_grade ol li.no02{
	background:url(../../image/no2.gif) left 2px no-repeat;
}

div#ranking_grade ol li.no03{
	background:url(../../image/no3.gif) left 2px no-repeat;
}

div#ranking_grade p.grade_photo{
	width:110px;
	float:left;
}

/*カラーランキング*/
div#ranking_color{
	width:321px;
	padding:5px 0;
	border-top:1px solid #a0a0a0;
	float:left;
}

div#ranking_color h3{
	border-bottom:1px dotted #a0a0a0;
	padding:0 0 5px 5px;
	margin-bottom:5px;
}

div#ranking_color p{
	margin:0 0 5px 7px;
}

div#ranking_color ol{
	padding-left:10px;
}

div#ranking_color ol li{
	padding-left:20px;
	margin-bottom:0.6em;
}

div#ranking_color ol li.no01{
	background:url(../../image/no1.gif) left 2px no-repeat;
}

div#ranking_color ol li.no02{
	background:url(../../image/no2.gif) left 2px no-repeat;
}

div#ranking_color ol li.no03{
	background:url(../../image/no3.gif) left 2px no-repeat;
}


div#ranking_color ol li dl dt{
	float:left;
	width:161px;
	margin-right:10px;
}


div#ranking_color ol li dl dd img{
	border:1px solid #a0a0a0;
}


/* スペシャルコンテンツ
=========================================*/
div#special_wrapper{
	background:#bacdcb;
	clear:both;
	padding:0 10px;
}

div#special_wrapper h2{
	position:relative;
	left:0;
	top:-5px;
}



div#special_wrapper ul{
	float:left;
	margin-right:-18px;
}

div#special_wrapper ul li{
	float:left;
	width:200px;
	margin-right:14px;
	padding-bottom:10px;
}

div#special_wrapper ul li img{
	vertical-align:bottom;
}

div#special_wrapper ul li a img{
	filter:alpha(opacity=100); 
    -moz-opacity: 1.0; 
    opacity: 1.0;
}

div#special_wrapper ul li a:hover img{
	filter:alpha(opacity=70); 
    -moz-opacity: 0.7; 
    opacity: 0.7;
}




/* div#rightColumn
===================================================================
=================================================================*/
div#rightColumn{
	width:218px;
	padding:10px 0;
	background:url(../../image/leftColumn_topbg.gif) top no-repeat;
	float:right;
}

div#rightColumn h2{
	margin:0 0 7px 8px;
}

/* ■インフォメーション
=========================================*/
ul#infomation{
	margin-bottom:10px;
	border-bottom:1px solid #fff;
	padding:0 8px 10px;
}

ul#infomation li {
	margin-bottom:7px;
	background:url(../../image/infomation_bullet.gif) 7px 5px no-repeat;
	padding-left:18px;
}

ul#infomation li a{
	color:#000;
}

ul#infomation li a:visited{
	color:#660066;
}

ul#infomation li a:hover{
	color:#d73c3c;
}


/* ■関連情報
=========================================*/
ul#kanren{
	padding:0 0 7px 8px;
	margin:0 -6px 10px 0;
	margin-bottom:10px;
	border-bottom:1px solid #fff;
}

ul#kanren li{
	width:98px;
	float:left;
	margin-right:6px;
	margin-bottom:4px;
}

ul#kanren li img{
	vertical-align:bottom;
}

ul#kanren li a img{
	border:1px solid #a19fa2;
	filter:alpha(opacity=100); 
    -moz-opacity: 1.0; 
    opacity: 1.0;
}

ul#kanren li a:visited img{
	border:1px solid #a19fa2;
}

ul#kanren li a:hover img{
	border:1px solid #cc0000;
	filter:alpha(opacity=70); 
    -moz-opacity: 0.7; 
    opacity: 0.7;
}


/* ■携帯サイト
=========================================*/
dl#keitai{
	padding:0 8px;
	font-size:78%;
	line-height:1.5;
}

dl#keitai dt{
	width:66px;
	float:left;
}

dl#keitai dd{
	margin-left:66px;
}

dl#keitai dd p.copy{
	padding-top:3px;
}







/* ツールチップ
=========================================*/

.js_tooltipContent{
	position:absolute;
	z-index:100;
	background:#000;
	color: #fff;
	width:180px;
	padding: 10px;
	display:none;
	text-align:left;
}



/* div#contentsTop
===================================================================
=================================================================*/
#contentsTop {
	margin: 12px 12px 10px;
	width: 876px;
}
	#contentsTop h2 {
		margin-bottom: 5px;
	}
		#contentsTop a {
			color: #000;
			text-decoration: none;
		}
		#contentsTop a:hover {
			color: #d42e2e;
			text-decoration: underline;
		}


/* div#mainTop
===================================================================
=================================================================*/
#mainTop {
	float: left;
	width: 648px;
}
	.secNews {
		float: left;
		width: 365px;
	}
/*		.secNews dl {
			border: 1px solid #a0a0a0;
			padding: 9px;
			width: 345px;
			height: 210px;
			overflow: auto;
		}
*/
#mainTop .secNews dl {
			border: 1px solid #a0a0a0;
			padding: 9px;
			width: 345px!important;
			width: 365px;
			height: 210px!important;/*通常*/
			height: 228px;/*通常*/
			/*height:226px!important;/*プレキャン*/
			/*height:244px;/*プレキャン*/
			overflow: auto;
		}
		
* html #mainTop .secNews dl {
	width: 345px;
}
		
#mainTop .secNews dl dt {
				clear: both;
				float: left;
				background: url(/Fit/image/ico_arrow_news.gif) no-repeat left 0.3em;
				padding-left: 12px;
			}
#mainTop .secNews dl dd {
				margin: 0 0 1em 7em;
				zoom: 1;
			}
			
	.secMailmagWrap {
		float: right;
		width: 273px;
	}
		.secMailmag {
			margin-bottom: 12px;
		}
			.secMailmag p.fltL {
				padding-top: 13px;
			}
			.secMailmag div.clearfix {
				border: 1px solid #e7e7e7;
				padding: 7px;
				position: relative;
			}
				.secMailmag div.clearfix div {
					float: right;
					width: 192px;
				}
	.secRanking {
	}
		.secGrade h3,
		.secColor h3 {
			margin-bottom: 5px;
		}
		.secGrade .caption,
		.secColor .caption {
			margin-left: 8px;
		}
		.secGrade {
			float: left;
			border: 1px solid #a0a0a0;
			width: 319px;
			*width: 321px;
			min-height: 130px;
			height: auto !important;
			height: 130px;
			font-size: 10px;
		}
			.secGrade .imgBoxR {
				padding: 5px 8px 8px;
			}
				.secGrade .imgBoxR .fltImg {
					float: right;
				}
				.secGrade .imgBoxR .ft {
					overflow: hidden;
				}
					.secGrade .imgBoxR .ft dt {
						clear: both;
						float: left;
						width: 16px;
					}
					.secGrade .imgBoxR .ft dd {
						margin: 0 0 2px 23px;
					}
		.secColor {
			float: right;
			border: 1px solid #a0a0a0;
			width: 319px;
			*width: 321px;
			min-height: 130px;
			height: auto !important;
			height: 130px;
			font-size: 10px;
		}
			.secColor ol {
				padding: 5px 8px 8px;
			}
				.secColor ol li {
					margin-bottom: 5px;
				}
					.secColor ol li p {
						float: left;
						width: 190px;
					}
						.secColor .rank {
							margin-right: 5px;
						}
						.secColor ol li img {
							vertical-align: top;
						}
		.secSpecial {
			background: #9ED0FF;
			margin-top: 15px;
			padding: 12px 10px;
		}
		
		
		* html .secSpecial {
			padding-right:0px;
		}
			.secSpecial h3 {
				position: relative;
				top: -17px;
			}
			.secSpecial ul li {
				float: left;
				margin-right: 9px;
				
				padding-bottom:10px;
			}
				/* rollover */
				/*--------------------default*/
				.secSpecial ul li a img { 
					/*--100%--*/  
					 filter: alpha(opacity=100);  
					 -moz-opacity:1.00;  
					 opacity:1.00; 
				}
				/*----------------over*/
				.secSpecial ul li a:hover img { 
					/*--70%--*/  
					 filter: alpha(opacity=70);  
					 -moz-opacity:0.70;  
					 opacity:0.70;
				}


/* div#subTop
===================================================================
=================================================================*/
#subTopWrap {
	background: url(/Fit/image/sub_bg_01.gif) no-repeat left top;
	float: right;
	padding-top: 10px;
	width: 218px;
}
	#subTop {
		background: url(/Fit/image/sub_bg_01.gif) no-repeat left bottom;
		padding-bottom: 10px;
		width: 218px;
	}
		#subTop h4 {
			margin-bottom: 5px;
		}
		.secInfo {
			border-bottom: 1px solid #fff;
			padding: 8px;
			zoom:1;
		}
			.secInfo li {
				background: url(/Fit/image/ico_arrow_sub.gif) no-repeat left 0.5em;
				margin: 0 0 5px 7px;
				padding-left: 10px;
			}
		/*.secRelated {
			border-bottom: 1px solid #fff;
			padding: 8px 0 8px 8px;
		}
			.secRelated ul {
				padding-bottom: 75px;
				width: 208px;
				overflow: hidden;
			}
				.secRelated ul li {
					float: left;
					width: 104px;
					height: 56px;
				}*/
				
				
		.secRelated h4{
		padding:10px 0 2px 8px;
		}
		.secMobile {
			padding: 8px 8px 0;
			zoom:1;
		}
		.secMobile p {
			zoom: 0;
		}
		
		
		
			.colortxt {
			color: #ff0000;
			text-decoration: none;
			margin: 0px 0px 10px 0px;
			zoom:1;
		}
			.colortxt li {
				margin: 0px 0px 0px 10px;
				padding-left: 5px;
			}



/* Rtoaster head link
=========================================*/
#carlogo #rt1{
	float:right;
	margin:-16px 15px 5px 0;
	padding-left:12px;
	text-align:right;
	background: url(../../image/ico_arrow_rt.gif) no-repeat 0px 3px;
	font-size: 103%;
	font-weight:bold;
}

#carlogo #rtoaster a:link,#carlogo #rtoaster a:visited {
	color: #FFFFFF;
	text-decoration: none;
}
#carlogo #rtoaster a:hover {
	color: #FFFFFF;
	text-decoration: underline;
}


/* Rtoaster head link 1
=========================================
#carlogo #rt1{
	float:right;
	margin:-16px 15px 5px 0;
	text-align:right;
	background: no-repeat 0px 3px;
	font-size: 116%;
	font-weight:bold;
}

#carlogo #rt1 a:link,#carlogo #rt1 a:visited {
	color: #FFFFFF;
	text-decoration: none;
}
#carlogo #rt1 a:hover {
	color: #FFFFFF;
	text-decoration: underline;
}*/




/* Rtoaster head link1
=========================================*/
#carlogo #rt-personalize-area-a {
     float:right;
     margin:-16px 15px 5px 0;
     text-align:right;
     background: no-repeat 0px 3px;
     font-size: 116%;
     font-weight:bold;
}

#carlogo #rt-personalize-area-a a:link,#carlogo #rt-personalize-area-a a:visited {
     color: #FFFFFF;
     text-decoration: underline;
}
#carlogo #rt-personalize-area-a a:hover {
     color: #FFFFFF;
     text-decoration: none;
}


/* Rtoaster head link2
=========================================*/
#carlogo #rt-personalize-area-b {
     float:right;
     margin:-20px 15px 5px 0px;
     padding:1px 5px 0px 5px;
     text-align:right;
     background: #FFFFFF no-repeat 5px 7px;
     font-size: 105%;
     font-weight:bold;
}

#carlogo #rt-personalize-area-b a:link,#carlogo #rt-personalize-area-b a:visited {
     color: #323232;
     text-decoration: none;
}
#carlogo #rt-personalize-area-b a:hover {
     color: #0C8CEC;
     text-decoration: none;
}







/* Rtoaster test 10/03
=========================================*/

/* testA link1*/
#carlogo #rec_fit_1 #A-rt-personalize-area-a {
     float:right;
     margin:-16px 15px 5px 0;
     text-align:right;
     background: no-repeat 0px 3px;
     font-size: 116%;
     font-weight:bold;
}

#carlogo #rec_fit_1 #A-rt-personalize-area-a a:link,#carlogo #rec_fit_1 #A-rt-personalize-area-a a:visited {
     color: #FFFFFF;
     text-decoration: underline;
}
#carlogo #A-rt-personalize-area-a a:hover {
     color: #FFFFFF;
     text-decoration: none;
}

/* testA link2*/
#carlogo #rec_fit_1 #A-rt-personalize-area-b {
     float:right;
     margin:-20px 15px 5px 0px;
     padding:1px 5px 0px 5px;
     text-align:right;
     background: #FFFFFF no-repeat 5px 7px;
     font-size: 105%;
     font-weight:bold;
}

#carlogo #rec_fit_1 #A-rt-personalize-area-b a:link,#carlogo #rec_fit_1 #A-rt-personalize-area-b a:visited {
     color: #323232;
     text-decoration: none;
}
#carlogo #rec_fit_1 #A-rt-personalize-area-b a:hover {
     color: #0C8CEC;
     text-decoration: none;
}


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

/* testB link1*/
#B-rt-personalize-area-a {
     float:right;
     margin:-16px 15px 5px 0;
     text-align:right;
     background: no-repeat 0px 3px;
     font-size: 116%;
     font-weight:bold;
}

#B-rt-personalize-area-a a:link,#B-rt-personalize-area-a a:visited {
     color: #FFFFFF;
     text-decoration: underline;
}
#B-rt-personalize-area-a a:hover {
     color: #FFFFFF;
     text-decoration: none;
}

/* testB link2*/
#B-rt-personalize-area-b {
     float:right;
     margin:-20px 15px 5px 0px;
     padding:1px 5px 0px 5px;
     text-align:right;
     background: #FFFFFF no-repeat 5px 7px;
     font-size: 105%;
     font-weight:bold;
}

#B-rt-personalize-area-b a:link,#B-rt-personalize-area-b a:visited {
     color: #323232;
     text-decoration: none;
}
#B-rt-personalize-area-b a:hover {
     color: #0C8CEC;
     text-decoration: none;
}