﻿@charset "UTF-8";

/* ====================================
* File name: index.css
* Description: インデックス定義
==================================== */

.section { margin-bottom: 25px;}
#mainContent a { text-decoration: none;}
#mainContent h2 { margin: 0; padding: 0; border: none;}
#popular h2,#newarrival h2,#agegroup h2,#goods h2,#brand h2,
#giftrank h2,#giftrank h3.more,#keyword h2 { height: 30px; margin: 0 0 3px 0; background: url(../img/sprite_index1.gif) no-repeat left top; text-indent: -9999px;}
#popular h2 { background-position: 0px 0px;}
#newarrival h2 { background-position: 0px -30px;}
#agegroup h2 { background-position: 0px -60px;}
#brand h2 { background-position: 0px -120px;}
#goods h2 { background-position: 0px -90px;}
#giftrank h2 { background-position: 0px -150px;}
#giftrank h3.more { position: static; background-position: 0px -180px;}
#agegroup h2#agerank { background-position: 0px -210px;}
#brand h2#brand2 { background-position: 0px -240px;}
#keyword h2 { width: 760px; margin: 0 -1px 0 -1px; background-position: 0px -269px;}
#monitor h2,#review h2,#news1 h2,#news2 h2,#news3 h2,#media h2 { height: 33px; background: url(../img/sprite_index2.gif) no-repeat left top; text-indent: -9999px;}
#monitor h2 { background-position: 0px 0px;}
#review h2 { background-position: right 0px;}
#news1 h2 { background-position: 0px -33px;}
#news2 h2 { background-position: 0px -66px;}
#news3 h2 { background-position: 0px -99px;}
#media h2 { width: 760px; margin: 0 -1px 0 -1px; background-position: 0px -132px;}
#mainContent table { width: 100%; margin: 0;}
#mainContent th { text-align: left;}
#mainContent dl { margin-bottom: 0;}
#popular a,
#agegroup a,
#goods a,
#media a,
#giftrank a { font-weight: bold;}



/* 特集・ピックアップ一覧 */
#special td { padding: 4px; border: 1px solid #c8c8c8;}


/* 人気商品ランキング */
#popular table { border-top: 1px solid #c8c8c8;}
#popular thead { display: none;}
#popular td { width: 33%; border: 1px solid #c8c8c8; border-top: none; font-size: 93%; vertical-align: top;}
#popular p { clear: both; margin: 0; padding: 8px;}
#popular a img { float: left; margin-right: 8px;}
#popular .itemTag { height: 30px; padding: 4px 8px; background: #f5efe4;}
#popular .itemTag img { margin-top: 6px;}
#popular .text { clear: both; display: block; padding-top: 8px; font-size: 93%;}
#popular .rank1,#popular .rank2,#popular .rank3,#popular .rank4,#popular .rank5 { float: left;}


/* 年齢別ベビー用品 */
#agegroup table { background: url(../../img/bg_goods.gif) no-repeat left top;}
#agegroup th { height: 50px; padding-top: 12px; border: 1px solid #c8c8c8; border-bottom: none;}
#agegroup td { width: 25%; padding: 0 8px; border: 1px solid #c8c8c8; border-top: none; font-size: 93%; vertical-align: top;}
#agegroup dt { padding: 8px 0; border-top: 1px solid #e1e1e1;}
#agegroup dt.first { border: none;}
#agegroup dt img { float: left; margin-right: 8px;}
#agegroup dd { clear: both; padding-bottom: 8px; font-size: 93%;}
.goods1 { padding-left: 72px;}
.goods2 { padding-left: 78px;}
.goods3 { padding-left: 55px;}
.goods4 { padding-left: 72px;}
#agegroup .rank1,#agegroup .rank2,#agegroup .rank3 { display: inline-block; width: 35px; height: 14px; margin-bottom: 5px;}
#agegroup .rank1 { background-position: 0px -235px;}
#agegroup .rank2 { background-position: 0px -250px;}
#agegroup .rank3 { background-position: 0px -265px;}



/* ベビーグッズの選び方 */
#goods { overflow: hidden; width: 771px; margin: 0 -11px 25px 0; padding: 0;}
#goods dl { float: left; width: 228px; margin: 0 10px 0 0; padding: 8px; background: #fcfce1; border: 1px solid #c8c8c8; font-size: 93%;}
#goods dt { float: left;}
#goods dd { margin-left: 95px;}
#goods dl.bl-hover { background: #fffff0;}
#goods .text { font-size: 93%;}


/* 注目のブランド */
#brand .clearfix { padding: 15px 0 5px 18px; border: 1px solid #c8c8c8;}
#brand .pickup { float: left; width: 245px;}
#brand .other { float: right; width: 450px;}
#brand h3 { color: #3c3c3c; font-size: 108%;}
#brand ul { list-style: none; margin: 0; padding: 0;}
#brand li { float: left; width: 80px; margin: 0; padding: 0 10px 0 0; font-size: 87%; vertical-align: top;}
#brand li img { margin: 5px 0;}


/* モニター・お客様の声 */
.voice { background: url(../../img/bg_voice.gif) repeat-x left bottom;}
#monitor { float: left; width: 375px;}
#review { float: right; width: 375px;}

#review .button {
	display:none;
	visibility:hidden;
}

.voice .button { clear: both; margin: 0; padding: 10px 0 12px 0; text-align: center;}

.voiceList { clear: both; width: 370px; margin: 0 -15px 20px 0; padding-left: 8px; font-size: 87%;}
.voiceList .clearfix { clear: both;}
.voiceList p { float: left; width: 170px; margin: 0 14px 0 0; padding: 7px 0 0 0; border-bottom: 1px solid #e1e1e1;}
.voiceList img { float: left; width: 80px;}
.voiceList .text { float: right; width: 80px;}
.voiceList .text em { color: #eb6464;}


/* 価格帯別ギフト商品ベスト5 */
#giftrank .box { margin-bottom: 15px; border: 1px solid #c8c8c8;}
#giftrank .box h3 { margin: 0 0 5px 0; padding: 8px; background: #f5efe4; color: #333; font-size: 138.5%;}
#giftrank ul { list-style: none; margin: 0; padding: 0;}
#giftrank li { float: left; width: 140px; margin: 0; padding: 0 0 15px 10px;}
#giftrank li img { margin: 4px 0 6px 0;}
#giftmore { margin: 5px 0 35px 0; padding: 8px 10px; background: #e8f4ff; border: 1px solid #c8c8c8; color: #999; text-align: center; font-size: 93%;}


/* 注目のキーワード */
#keyword { margin-bottom: 30px;}
#keyword p { color: #999; font-size: 87%;}



/* お知らせ類
----------------------------- */
.history { font-size: 93%;}

/* メディア掲載 */
#media { margin-bottom: 20px; border: 1px solid #c8c8c8; border-top: none;}
#media .more { margin-bottom: 15px;}
#media .image { float: left; width: 294px; padding-left: 5px;}
#media .image img { padding-left: 4px;}
#media .text { width: 430px; margin-left: 310px; font-size: 93%;}




/* clearfix
----------------------------- */
.section:before,.section:after,
#agegroup dt:before,#agegroup dt:after,
#goods ul:before,#goods ul:after,
#brand ul:before,#brand ul:after,
#giftrank .box:before,#giftrank .box:after { content:""; display:block;}
.section:after,
#agegroup dt:after,
#goods ul:after,
#brand ul:after,
#giftrank .box:after { clear:both;}
/* For IE 6/7 (trigger hasLayout) */
.section,
#agegroup dt,
#goods ul,
#brand ul,
#giftrank .box { zoom:1;}
