@charset "UTF-8";
/**************************************************************************************************

	00　common
	01　main image
	02　Popularity
	03　campaign
	04　pr
	05　Ranking
	06　media
	07　voice
	08　news

**************************************************************************************************/


/*━━━━━━━━━━━━━━━━━　00　common　━━━━━━━━━━━━━━━━━━━*/
.index_title, .index_title a { height:34px; }

.index_title { margin-bottom:15px; }

.index_title a {
	display:block;
	background-image:url(../image/index/title.gif);
	background-repeat:no-repeat;
	}

#i_title01 a { background-position:0 0; }
#i_title02 a { background-position:0 -50px; }
#i_title03 a { background-position:0 -100px; }
#i_title04 a { background-position:0 -150px; }
#i_title05 a { background-position:0 -200px; }
#i_title06 a { background-position:0 -250px; }

#i_title01 a:hover { background-position:-800px 0; }
#i_title02 a:hover { background-position:-800px -50px; }
#i_title03 a:hover { background-position:-800px -100px; }
#i_title04 a:hover { background-position:-800px -150px; }
#i_title05 a:hover { background-position:-800px -200px; }
#i_title06 a:hover { background-position:-800px -250px; }


.i_contents_box { margin-bottom:50px; }


/*━━━━━━━━━━━━━━━━━　01　main image　━━━━━━━━━━━━━━━━━━━*/
#main_image { margin-bottom:30px; }

/* slider layout */
.lof-slidecontent {
	position: relative;
	width: 696px;
	height: 313px;
	margin-bottom: 30px;
	overflow: hidden;
	border: #DDDDDD solid 2px;
}
.lof-slidecontent .sliders-wrapper{
	position: relative;
	width: 900px;
	height: 100%;
	z-index: 3px;
	overflow: hidden;
}
.lof-slidecontent ul.sliders-wrap-inner{
	position:absolute;	
	margin:0;
	padding:0px;
	overflow:hidden;
	background:transparent url(../image/lof/load-indicator.gif) no-repeat scroll 50% 50%;	
}
.lof-slidecontent ul.sliders-wrap-inner li{
	float:left;
	position:relative;
	overflow:hidden;
}
.lof-slidecontent  .lof-opacity  li{
	position:absolute;
	top:0;
	left:0;
	float:inherit;
}

.lof-slidecontent .main-slider-content {
	width: 690px;
	height: 247px;
	margin: 2px;
	text-align: left;
}

.lof-slidecontent  .navigator-content {
	position: absolute;
	top: 251px;
	left: 2px;
	width: 689px;
}
.lof-slidecontent  .navigator-wrapper {
	position: relative;
	z-index: 10;
	height: 58px;
	width: 660px;
	border-top: 1px solid #999999;
	border-bottom: 1px solid #999999;
	overflow: hidden;
	background: #FFFFFF;
	color: #FFF;
	float: left
}
.lof-slidecontent  ul.navigator-wrap-inner {
	top:0;
	padding:0;
	margin:0;
	position:absolute;
	width:100%;
}
.lof-slidecontent  ul.navigator-wrap-inner li{
	display: block;
	overflow: hidden;
	float: left;
	cursor: hand;
	cursor: pointer;
	text-align:left;
	*zoom: 1;/* IE 6-7 */
	}


/*******************************************************/
 
ul.sliders-wrap-inner li img{	padding:0px;	}

.lof-slidecontent .slider-brandname {
	height: 247px;
	overflow: hidden;
	text-align: left;
	text-indent:-9999px;
}


.lof-slidecontent #slider-nagomi .slider-brandname {
	background:url(../image/lof/index/main01_btn.jpg) no-repeat left top;
}
.lof-slidecontent #slider-iberry .slider-brandname {
	background:url(../image/lof/index/main05_btn.jpg) no-repeat left top;
}
.lof-slidecontent #slider-grkcnd .slider-brandname {
	background:url(../image/lof/index/main02_btn.jpg) no-repeat left top;
}
.lof-slidecontent #slider-syoga .slider-brandname {
	background:url(../image/lof/index/main03_btn.jpg) no-repeat left top;
}
.lof-slidecontent #slider-kefia .slider-brandname {
	background:url(../image/lof/index/main04_btn.jpg) no-repeat left top;
}

.lof-slidecontent #slider-nagomi .slider-brandname a,
.lof-slidecontent #slider-iberry .slider-brandname a,
.lof-slidecontent #slider-grkcnd .slider-brandname a,
.lof-slidecontent #slider-syoga .slider-brandname a,
.lof-slidecontent #slider-kefia .slider-brandname a {
	display:block;
	width:690px;
	height:247px;	
}

.lof-slidecontent #slider-nagomi .slider-brandname a:hover {
	background:url(../image/lof/index/main01_btn.jpg) no-repeat left bottom;	
}
.lof-slidecontent #slider-iberry .slider-brandname a:hover {
	background:url(../image/lof/index/main05_btn.jpg) no-repeat left bottom;	
}
.lof-slidecontent #slider-grkcnd .slider-brandname a:hover {
	background:url(../image/lof/index/main02_btn.jpg) no-repeat left bottom;	
}
.lof-slidecontent #slider-syoga .slider-brandname a:hover {
	background:url(../image/lof/index/main03_btn.jpg) no-repeat left bottom;	
}
.lof-slidecontent #slider-kefia .slider-brandname a:hover {
	background:url(../image/lof/index/main04_btn.jpg) no-repeat left bottom;	
}

.lof-slidecontent .slider-description .btn_slink {
	position: relative;
	width: 84px;
	height: 64px;
	top: 75px;
	left: 595px;
	*zoom: 1;/* IE 6-7 */
}
.lof-slidecontent .slider-description .btn_slink a {
	display: block;
	height: 64px;
	background: url(../image/lof/index/btn_slider.gif) 0 0 no-repeat;
	overflow: hidden;
	text-indent: -9999px;
}
.lof-slidecontent .slider-description .btn_slink a:hover { background-position: -100px 0; }

.lof-slidecontent .slider-description .btn_maxarea {
	position: relative;
	top: -100px;
	left: 0;
}
.lof-slidecontent .slider-description .btn_maxarea a {
	display: block;
	height: 247px;
	overflow: hidden;
	text-indent: -9999px;
}

.lof-slidecontent .slider-description a{ color:#FFF; }
.lof-slidecontent .slider-description{
	z-index:100px;
	position:absolute;
	bottom:0;
	left:0px;
	width:679px;
	height:245px;
}
.lof-slidecontent .slider-description h4 {    font-size: 14px;    margin: 10px 0;    padding: 0; }
.lof-slidecontent .slider-description .slider-meta a{	
	margin:0;
	background:#C01F25;
	font-size:75%;
	padding:2px 3px;
	font-family:"Trebuchet MS",Trebuchet,Arial,Verdana,sans-serif;
	text-transform:uppercase;
	text-decoration:none
}
.lof-slidecontent  .item-meta a:hover{	text-decoration:underline;}
.lof-slidecontent  .item-meta i {	font-size:70%; }

/* item navigator */

.lof-slidecontent ul.navigator-wrap-inner li {
	background: #FFFFFF;
	background: -webkit-gradient(linear, 0 0, 0 bottom, from(#FFFFFF), to(#F2F5F6));
	background: -webkit-linear-gradient(#FFFFFF, #F2F5F6);
	background: -moz-linear-gradient(#FFFFFF, #F2F5F6);
	background: -ms-linear-gradient(#FFFFFF, #F2F5F6);
	background: -o-linear-gradient(#FFFFFF, #F2F5F6);
	background: linear-gradient(#FFFFFF, #F2F5F6);
	filter:  progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#FFFFFF', endColorstr='#F2F5F6'); /* IE6 & IE7 */
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#FFFFFF', endColorstr='#F2F5F6')"; /* IE8 */
}

.lof-slidecontent ul.navigator-wrap-inner li .navigator-thumb {
	height: 58px;
	border-right: 1px solid #999999;
	line-height: 58px;
}


.lof-slidecontent ul.navigator-wrap-inner li img {
	vertical-align: middle;
	*margin-top: 9px;/*IE6-7*/
}
.lof-slidecontent ul.navigator-wrap-inner li.active, 
.lof-slidecontent ul.navigator-wrap-inner li:hover {
	background: #FFFFFF;
	background: -webkit-gradient(linear, 0 0, 0 bottom, from(#C7DC68), to(#A3D141));
	background: -webkit-linear-gradient(#C7DC68, #A3D141);
	background: -moz-linear-gradient(#C7DC68, #A3D141);
	background: -ms-linear-gradient(#C7DC68, #A3D141);
	background: -o-linear-gradient(#C7DC68, #A3D141);
	background: linear-gradient(#C7DC68, #A3D141);
	filter:  progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#C7DC68', endColorstr='#A3D141'); /* IE6 & IE7 */
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#C7DC68', endColorstr='#A3D141')"; /* IE8 */
}

.lof-slidecontent ul.navigator-wrap-inner li.active img, 
.lof-slidecontent ul.navigator-wrap-inner li:hover img {
	-moz-transition:border-color  ease-in-out 0.4s
}
.lof-slidecontent .navigator-content .button-next, 
.lof-slidecontent .navigator-content .button-previous{
	display:block;
	width: 13px;
	height: 60px;
	color: #FFF;
	cursor:pointer;

}
.lof-slidecontent .navigator-content .button-next {
	float: left;	
	text-indent: -999px;
	background: url(../image/lof/index/arrow-l.gif) no-repeat right center;
}
.lof-slidecontent .navigator-content .button-previous {
	float: right;	
	text-indent: -999px;
	background: url(../image/lof/index/arrow-r.gif) no-repeat left center;
}

/*━━━━━━━━━━━━━━━━━　02　Popularity　━━━━━━━━━━━━━━━━━━━*/
#p_list { width:700px; margin-bottom:50px; }
#p_list ol { width:700px; }

#p_list li a, #p_list li image { display:block; }

#p_list li {
	display:inline-block;
	/* width:175px; */
	width:170px;
	overflow:hidden;
	vertical-align:top;
	font-size:0;
}

* html #p_list li { display:inline; zoom:1; }
*:first-child+html #p_list li { display:inline; zoom:1; }

#p_list a img { border:none; }



/*━━━━━━━━━━━━━━━━━　03　campaign　━━━━━━━━━━━━━━━━━━━*/



/*━━━━━━━━━━━━━━━━━　04　pr　━━━━━━━━━━━━━━━━━━━*/


/*━━━━━━━━━━━━━━━━━　05　Ranking　━━━━━━━━━━━━━━━━━━━*/
#rankbox { width:700px; }
#rankbox ul { }
#rankbox li {
	display:inline-block;
	width:175px;
	overflow:hidden;
	vertical-align:top;
	text-align:justify; text-justify:inter-ideograph;
	}
	
* html #rankbox li { display:inline; zoom:1; }
*:first-child+html #rankbox li { display:inline; zoom:1; }

#rankbox li.even { background-color:#F5FFD4;}


/*──── rank&Brand name ────*/
#rankbox strong {
	display:block;
	min-height:2.8em; height:auto !important; height:2.8em; margin:8px 8px 0 8px; padding:0 0 8px 30px;
	background-image:url(../image/common/icon_rank.png); background-repeat:no-repeat;
	font-size:93%; line-height:1.4em;
	}

* html body #rankbox strong { background-image:url(../image/common/icon_rank.gif); }

#rankbox #rank01 strong { background-position:0 0; }
#rankbox #rank02 strong { background-position:-200px 0; }
#rankbox #rank03 strong { background-position:-400px 0; }
#rankbox #rank04 strong { background-position:-600px 0; }

/*──── ranking commodity ────*/
.ranking_commodity { margin:0 8px 10px; min-height:85px; height:auto !important; height:85px; }
.ranking_commodity dt, .ranking_commodity dd { min-height:70px; height:auto !important; height:70px; }

.ranking_commodity dt { width:40px; }
.ranking_commodity dd { margin:-70px 0 0 50px; font-size:93%; line-height:1.4em; }

.ranking_commodity p { margin-bottom:0.5em; height:4.5em; }
.ranking_commodity p.image-replacement { height:27px; margin-bottom:0; }

#rank_nagomi p.image-replacement { background:url(../image/commodity/rank_txt_nagomi.png) 0 0 no-repeat; }
#rank_gluco p.image-replacement { background:url(../image/commodity/rank_txt_gluco.png) 0 0 no-repeat; }
#rank_slim p.image-replacement { background:url(../image/commodity/rank_txt_slim.png) 0 0 no-repeat; }
#rank_kefia p.image-replacement { background:url(../image/commodity/rank_txt_kefia.png) 0 0 no-repeat; }
#rank_iberry p.image-replacement { background:url(../image/commodity/rank_txt_iberry.png) 0 0 no-repeat; }

/*──── Button details ────*/
a.btn_details {
	display:block;
	width:120px; height:20px; margin:0 auto 10px;
	background:url(../image/common/btn_details.png) 0 0 no-repeat;
	}
a:hover.btn_details { background-position:0 -50px; }

* html a.btn_details { background:url(../image/common/btn_details.gif) 0 0 no-repeat; }
* html a:hover.btn_details { background-position:0 -50px; }

/*━━━━━━━━━━━━━━━━━　06　media　━━━━━━━━━━━━━━━━━━━*/
#mediabox { font-size:108%; line-height:1.4em; text-align:justify; text-justify:inter-ideograph; }
#mediabox div { float:left; width:350px; }
#mediabox image { display:block; float:right; width:340px; height:253px; }

.media_title { display:block; margin-bottom:1em; color:#8C0428; }
.media_list {}
.media_list li {
	margin-bottom:0.5em; padding-left:1em;
	background:url(../image/common/icon_lattice.gif) 0 5px no-repeat;
	}



/*━━━━━━━━━━━━━━━━━　07　voice　━━━━━━━━━━━━━━━━━━━*/
#voicebox { width:700px; }
#voicebox ul { }
#voicebox li {
	display:inline-block;
	width:137px;
	overflow:hidden;
	vertical-align:top;
	font-size:108%; line-height:1.4em; text-align:justify; text-justify:inter-ideograph;
	}
	
* html #voicebox li { display:inline; zoom:1; }
*:first-child+html #voicebox li { display:inline; zoom:1; }

#voicebox li img { display:block; margin:0 15px 10px; }

#voicebox strong, #voicebox p { margin:0 15px; }

#voicebox strong { display:block; margin-bottom:0.5em; font-weight:normal; }

#voicebox p { }

#voicebox span.mini_text { font-size:13px; }

/*━━━━━━━━━━━━━━━━━　08　news　━━━━━━━━━━━━━━━━━━━*/
#news { width:700px; overflow:hidden; font-size:108%; line-height:1.4em; text-align:justify; text-justify:inter-ideograph; }

#news dt, #news dd {  }

#news dt { width:6em; height:1.4em; }
#news dd {
	min-height:1.4em; height:auto !important; height:1.4em;
	margin:-1.4em 0 0.7em 8em;
	}

/*━━━━━━　text-red　━━━━━━*/
span.red { color: #F00;}