@charset "shift_jis";

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

	F CSS

 -----------------------------------------
	INDEX
 -----------------------------------------
 	1.Rank Listup
		1-1.Title
		1-2.Image Unit
			1-2-1.Image
			1-2-2.Cart In
		1-3.Product Info
			1-3-1.Price Info
			1-3-2.Message
		1-4.Point
	
	
	F01
 -----------------------------------------
	1.Kana Query Menu
	
	2.Page Top
	
	3.Kana Query Section
		3-1.Kana Query List
	
	
	F41
 -----------------------------------------
	1.Chara Ani Friends
		1-1.Shuffle Menu

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

/* 1.Rank Listup
========================================== */
#contents h2.rankListBestTitle {
	font-size:180%;
	font-weight:bold;
	background: url(../../i/F/best_tit_bg01.gif) repeat-x;
	line-height:40px;
	width:100%;
	text-indent:15px;
}

#contents ul.rankListup {
	margin: 0 0 12px;
	padding: 0 9px 14px;
	border: 1px solid #DAE4F1;
}

#contents ul.rankListup li {
	margin: 12px 0 0;
	padding: 20px 5px 15px;
	background: url(../../i/common/line_dotted01_blue02.gif) repeat-x;
	vertical-align: bottom; /* for IE */
	zoom: 1;
}

#contents ul.rankListup li:after { /* for Modern Browser */
	content: "."; display: block; clear: both; height: 0px; visibility: hidden;
}

/* Reset */
#contents ul.rankListup li.rank01 {margin: 0; padding-top: 19px; background: none;}

	/* 1-1.Title
	---------------------------------------- */
	#contents ul.rankListup li h3 {
		margin: 0; /* Reset */
		padding: 0 0 10px;
		font-size: 108.34%;
		line-height: 1.384;
	}
	
	#contents ul.rankListup li.rank01 h3 {
		font-size: 133.34%;
		line-height: 1.374;
	}
	
	#contents ul.rankListup li h3 a {
		padding-bottom: 1px; /* for Underline */
		color: #4975A3;
	}
	
	#contents ul.rankListup li h3 span {
		display: table-cell;
		vertical-align: middle;
	}
	/* IE6 Only */
	* html #contents ul.rankListup li h3 span {
		display: inline;
		zoom: 1;
	}
	/* IE7 Only */
	/* IE7 Only */
	*:first-child + html #contents ul.rankListup li h3 span {
		display: inline;
		zoom: 1;
	}
	
	#contents ul.rankListup li h3 span.rankNum {
		width: 35px;
	}

	#contents ul.rankListup li.out_of_lank h3 span.rankNum {
		text-align:center;
		color:#A6C92A;
		font-weight:bold;
		font-size:150%;
	}
		
	#contents ul.rankListup li.rank01 h3 span.rankNum,
	#contents ul.rankListup li.rank10 h3 span.rankNum {width: 45px;}
	
	#contents ul.rankListup li h3 span.title   {
		padding-left: 3px;
		width: 435px;
	}
	/* IE6 Only */
	* html #contents ul.rankListup li h3 span.title {padding-left: 0;}
	/* IE7 Only */
	*:first-child + html #contents ul.rankListup li h3 span.title {padding-left: 0;}
	
	#contents ul.rankListup li.rank01 h3 span.title,
	#contents ul.rankListup li.rank10 h3 span.title {width: 425px;}

	/* 1-2.Image Unit
	---------------------------------------- */
	#contents ul.rankListup li .imageUnit {
		float: left;
		width: 90px;
		text-align: center;
	}
	
	#contents ul.rankListup li.rank01 .imageUnit {width: 140px;}
		
		/* 1-2-1.Image
		---------------------------------------- */
		#contents  ul.rankListup li .imageUnit p.image {
			position: relative;
			zoom: 1;
		}
		
		#contents  ul.rankListup li .imageUnit p.image span.saleStatus {
			position: absolute;
			bottom: -4px;
			left: 5px;
			width: 80px;
			text-align: center;
		}
		
		#contents  ul.rankListup li.rank01 .imageUnit p.image span.saleStatus {left: 30px;}
		
		/* 1-2-2.Cart In
		---------------------------------------- */
		#contents  ul.rankListup li .imageUnit p.cartIn {
			margin: 5px auto 0;
			width: 80px;
		}
		
		#contents  ul.rankListup li .imageUnit p.cartIn a {
			display: block;
			height: 20px;
			background: url(../../i/common/btn_cart_01.png) no-repeat;
			text-indent: -9999px;
			overflow: hidden;
		}
		
		#contents  ul.rankListup li .imageUnit p.cartIn a:hover {background-position: 0 -20px;}

	/* 1-3.Product Info
	---------------------------------------- */
	#contents ul.rankListup li .productInfo {
		float: right;
		width: 380px;
	}
	
	#contents ul.rankListup li.rank01 .productInfo {width: 330px;}
	
	#contents ul.rankListup li .productInfo p.path {
		margin: 0 0 1px;
		color: #626262;
		font-size: 91.67%;
		line-height: 1.275;
	}
	
		/* 1-3-1.Price Info
		---------------------------------------- */
		#contents ul.rankListup li .productInfo .priceInfo {
			padding: 3px;
			background-color: #EDF3FA;
		}
		
		#contents ul.rankListup li .productInfo table {
			margin: 0; /* Reset */
		}
		
		#contents ul.rankListup li .productInfo table tr th,
		#contents ul.rankListup li .productInfo table tr td {
			padding: 0; /* Reset */
			font-size: 83.34%;
			line-height: 1.2;
		}
		
		#contents ul.rankListup li .productInfo table tr td {
			padding-left: 10px;
		}
		
		#contents ul.rankListup li .productInfo table tr td span.price       {margin-right: 5px; color: #F5007E;}
		#contents ul.rankListup li .productInfo table tr td span.memberPrice {margin-right: 5px; color: #F5007E;}
		#contents ul.rankListup li .productInfo table tr td span.salePrice   {margin-right: 5px; color: #F5007E;}
		
		#contents ul.rankListup li .soldOut table tr td span.price,
		#contents ul.rankListup li .soldOut table tr td span.memberPrice,
		#contents ul.rankListup li .soldOut table tr td span.salePrice {text-decoration: line-through;}
		
		/* 1-3-2.Message
		---------------------------------------- */
		#contents ul.rankListup li .productInfo .message {
			position: relative;
			margin: 5px 0 -13px;
		}
		
		#contents ul.rankListup li .productInfo .message p {
			margin: 0 0 13px;
			color: #626262;
			line-height: 1.167;
		}
	
	/* 1-4.Point
	---------------------------------------- */
	#contents ul.rankListup li p.point {
		position: relative;
		margin-top: -2px;
		padding: 0 0 2px;
		color: #819537;
		font-size: 91.67%;
		line-height: 1.275;
	}
	/* Safari2,0 Only \*/
	html:\66irst-child #contents ul.rankListup li p.point {padding-bottom: 4px;}/**/


/* F01
****************************************************************************************/
/* 1.Kana Query Menu
========================================== */
#contents ul.kanaQueryMenu {
	margin: 0 0 20px;
	background: url(../../i/F/kanaquerymenu_bg.gif) no-repeat 39px 0;
	zoom: 1;
}

#contents ul.kanaQueryMenu:after { /* for Modern Browser */
	content: "."; display: block; clear: both; height: 0px; visibility: hidden;
}

#contents ul.kanaQueryMenu li {
	float: left;
	display: inline; /* for IE */
	margin: 0 0 0 34px;
	width: 20px;
	height: 17px;
	background: no-repeat 1px 0;
	text-indent: -9999px;
	overflow: hidden;
}

#contents ul.kanaQueryMenu li.indexA {
	margin-left: 2px;
	background-image: url(../../i/F/kananone_txt_a.gif);
}

#contents ul.kanaQueryMenu li.indexKa {background-image: url(../../i/F/kananone_txt_ka.gif);}
#contents ul.kanaQueryMenu li.indexSa {background-image: url(../../i/F/kananone_txt_sa.gif);}
#contents ul.kanaQueryMenu li.indexTa {background-image: url(../../i/F/kananone_txt_ta.gif);}
#contents ul.kanaQueryMenu li.indexNa {background-image: url(../../i/F/kananone_txt_na.gif);}
#contents ul.kanaQueryMenu li.indexHa {background-image: url(../../i/F/kananone_txt_ha.gif);}
#contents ul.kanaQueryMenu li.indexMa {background-image: url(../../i/F/kananone_txt_ma.gif);}
#contents ul.kanaQueryMenu li.indexYa {background-image: url(../../i/F/kananone_txt_ya.gif);}
#contents ul.kanaQueryMenu li.indexRa {background-image: url(../../i/F/kananone_txt_ra.gif);}
#contents ul.kanaQueryMenu li.indexWa {background-image: url(../../i/F/kananone_txt_wa.gif);}

#contents ul.kanaQueryMenu li strong {
	display: block;
	height: 17px;
	background: no-repeat 1px 0;
	text-indent: -9999px;
	overflow: hidden;
}

#contents ul.kanaQueryMenu li.indexA  strong  {background-image: url(../../i/F/kanaselected_txt_a.gif);}
#contents ul.kanaQueryMenu li.indexKa strong  {background-image: url(../../i/F/kanaselected_txt_ka.gif);}
#contents ul.kanaQueryMenu li.indexSa strong  {background-image: url(../../i/F/kanaselected_txt_sa.gif);}
#contents ul.kanaQueryMenu li.indexTa strong  {background-image: url(../../i/F/kanaselected_txt_ta.gif);}
#contents ul.kanaQueryMenu li.indexNa strong  {background-image: url(../../i/F/kanaselected_txt_na.gif);}
#contents ul.kanaQueryMenu li.indexHa strong  {background-image: url(../../i/F/kanaselected_txt_ha.gif);}
#contents ul.kanaQueryMenu li.indexMa strong  {background-image: url(../../i/F/kanaselected_txt_ma.gif);}
#contents ul.kanaQueryMenu li.indexYa strong  {background-image: url(../../i/F/kanaselected_txt_ya.gif);}
#contents ul.kanaQueryMenu li.indexRa strong  {background-image: url(../../i/F/kanaselected_txt_ra.gif);}
#contents ul.kanaQueryMenu li.indexWa strong  {background-image: url(../../i/F/kanaselected_txt_wa.gif);}

#contents ul.kanaQueryMenu li a {
	display: block;
	height: 17px;
	background: no-repeat 1px 0;
	text-indent: -9999px;
	overflow: hidden;
}

#contents ul.kanaQueryMenu li.indexA  a {background-image: url(../../i/F/kanaindex_btn_a.gif);}
#contents ul.kanaQueryMenu li.indexKa a {background-image: url(../../i/F/kanaindex_btn_ka.gif);}
#contents ul.kanaQueryMenu li.indexSa a {background-image: url(../../i/F/kanaindex_btn_sa.gif);}
#contents ul.kanaQueryMenu li.indexTa a {background-image: url(../../i/F/kanaindex_btn_ta.gif);}
#contents ul.kanaQueryMenu li.indexNa a {background-image: url(../../i/F/kanaindex_btn_na.gif);}
#contents ul.kanaQueryMenu li.indexHa a {background-image: url(../../i/F/kanaindex_btn_ha.gif);}
#contents ul.kanaQueryMenu li.indexMa a {background-image: url(../../i/F/kanaindex_btn_ma.gif);}
#contents ul.kanaQueryMenu li.indexYa a {background-image: url(../../i/F/kanaindex_btn_ya.gif);}
#contents ul.kanaQueryMenu li.indexRa a {background-image: url(../../i/F/kanaindex_btn_ra.gif);}
#contents ul.kanaQueryMenu li.indexWa a {background-image: url(../../i/F/kanaindex_btn_wa.gif);}

#contents ul.kanaQueryMenu li a:hover {background-position: 1px -17px;}


/* 2.Page Top
========================================== */
#contents p.pageTop {
	margin: 0 0 30px;
	padding: 0 0 2px;
	background: url(../../i/common/line_dotted01_black01.gif) repeat-x 0 100%;
	font-size: 84.7%;
	line-height: 1.275;
	text-align: right;
}

#contents p.pageTop a {
	padding: 0 0 0 13px;
	background: url(../../i/common/ico_arrow06_black01.gif) no-repeat;
	color: #C9C9C9;
	text-decoration: none;
}


/* 3.Kana Query Section
========================================== */
#contents .kanaQuerySec {
	margin: 0 0 30px;
}

#contents .kanaQuerySec h2 {
	margin: 0; /* Reset */
}

#contents .kanaQuerySec p.pageTop {
	position: relative;
	margin: -14px 0 0;
}

	/* 3-1.Kana Query List
	---------------------------------------- */
	#contents .kanaQuerySec ul.kanaQueryList {
		position: relative;
		margin: -6px 0 0;
		zoom: 1;
	}
	
	#contents .kanaQuerySec ul.kanaQueryList:after { /* for Modern Browser */
		content: "."; display: block; clear: both; height: 0px; visibility: hidden;
	}
	
	#contents .kanaQuerySec ul.kanaQueryList li {
		float: left;
		display: inline; /* for IE */
		margin: 14px 0 0 10px;
		width: 233px;
	}
	
	#contents .kanaQuerySec ul.kanaQueryList li a {
		display: table-cell;
		padding: 0 0 1px 13px;
		background: url(../../i/common/ico_arrow02_blue02.gif) no-repeat 0 0.084em;
	}
	/* IE6 Only */
	* html #contents .kanaQuerySec ul.kanaQueryList li a {
		display: inline;
		zoom: 1;
	}
	/* IE7 Only */
	*:first-child + html #contents .kanaQuerySec ul.kanaQueryList li a {
		display: inline;
		zoom: 1;
	}


/* F41
****************************************************************************************/
/* 1.Chara Ani Friends
========================================== */
#contents .charaAniFriends {
	margin: 0 0 10px;
}

#contents .charaAniFriends p.lead {
	margin: 0 0 10px;
	padding: 5px 10px;
	background: url(../../i/common/bg_dotted01_blue03.gif);
}

	/* 1-1.Shuffle Menu
	---------------------------------------- */

	#contents .charaAniFriends ul.shuffleMenu {
		position: static;
		margin: 0 0 0 2px;
		zoom: 1;
		overflow:hidden;
	}
	
	#contents .charaAniFriends ul.shuffleMenu:after { /* for Modern Browser */
		content: "."; display: block; clear: both; height: 0px; visibility: hidden;
	}
	
	#contents .charaAniFriends ul.shuffleMenu li {
		float: left;
		margin: 0 3px 0 0;
		width: 90px;
		height:120px;
	}
	
	#contents .charaAniFriends ul.shuffleMenu li.shuffle {
		margin: 35px 0 0;
		width: 18px;
	}
	
	#contents .charaAniFriends ul.shuffleMenu li.next {
		margin-left: -5px;
	}
	
	#contents .charaAniFriends ul.shuffleMenu li p.stuffImage {
		padding: 5px;
		background-color: #FFF;
		zoom: 1;
	}
	
	#contents .charaAniFriends ul.shuffleMenu li.selected p.stuffImage {background-color: #FFCC00;}
	
	#contents .charaAniFriends ul.shuffleMenu li p.name {
		margin: 3px 0 0;
		font-size: 91.67%;
		line-height: 1.275;
		text-align: center;
		zoom: 1;
	}

	/* 1-1.Shuffle Menu-modify
	---------------------------------------- */
	#contents .charaAniFriends .scroll_btn_box{
		position:relative;
	}

	#contents .charaAniFriends #scrollable{
		position: relative;
		height:120px;
		width:470px;
	}


	#contents .charaAniFriends .prev {
		position:absolute;
		top:25px;
		left:0px;
		cursor:pointer;
		z-index:1;
	}
	
	#contents .charaAniFriends .next {
		position:absolute;
		top:25px;
		left:495px;
		cursor:pointer;
	}
	
	#contents .charaAniFriends #slide-box{
		position:relative;
		width:470px;
		height:128px;
		overflow:hidden;
		margin-left:23px;
	}

	#contents .charaAniFriends #slide-area {
	    width:20000em;     
	    position:absolute;
	}
		
	#contents .charaAniFriends div#slide-area div { 
		float: left;
		margin: 0 5px 0 0;
		width: 90px;
		height:128px;
	} 
	
	.slide-disabled{
		visibility:hidden;
	}

	#contents .charaAniFriends div#slide-area div p.stuffImage {
		padding: 5px;
		background-color: #FFF;
		zoom: 1;
	}
	
	#contents .charaAniFriends div#slide-area div.selected p.stuffImage {background-color: #FFCC00;}
	
	#contents .charaAniFriends div#slide-area div p.name {
		margin: 2px 0 0;
		font-size: 91.67%;
		line-height: 1.1;
		text-align: center;
		zoom: 1;
	}