@charset "utf-8";
/* CSS Document */

body,html{
	background-color:#2c2c2c;
	}

/*---------------------------------

   headerArea
---------------------------------*/

div#headerArea{
	min-width:1224px;
	padding:0 20px 20px;
	color:#FFF;
	background-color:#2c2c2c;
	}

div#leftHeader{
	float:left;
	display:inline;
	}

p#readText{
	margin-left:20px;
	color:#fff;
	line-height:0.5;
	padding-top:20px;
	font-size:12px;
	}

h1#toppage{
	background:url(../images/logo_sitename.gif) no-repeat;
	width:215px;
	height:43px;
	margin-bottom:8px;
	float:left;
	display:inline;
	}

h1{
	background:url(../images/logo_sitename.gif) no-repeat;
	width:215px;
	height:43px;
	margin-bottom:8px;
	}

h1 a{
	width:215px;
	height:43px;
	display:block;
	}

h1 span{display:none;}

/* 商品ラインナップ　ナビゲーション */
ul#lineUpBtn li.lineUp{
	background: url(../images/btn_lineup.png) no-repeat;
	width: 205px;
	height: 44px;
	margin-top: 0px;
	margin-left: 20px;
	text-indent: -9999px;
	float: left;
	display: inline;
	cursor: pointer;
	}

ul#lineUpBtn li.lineUp:hover{
	background: url(../images/btn_lineup_over.png) no-repeat;
	}

/* サブナビゲーション*/

ul.sub{
	text-indent:0;
	margin-top:17px;
	margin-left:14px;
	position:relative;
	z-index:100;
	display:none;
	opacity:0;
	}
ul.sub li{
	width: 213px;
	height: 44px;
	}

ul.sub li.last{
width:213px;
height:63px;
}

ul.sub li a{
	display:block;
	width:213px;
	height:44px;
	text-indent:-9999px;
	}

ul.sub li.last a{
	display:block;
	width:213px;
	height:63px;
	text-indent:-9999px;
	}

li.item1 a{
	background:url(../images/btn_item1_off.jpg) no-repeat;
	}

li.item1 a:hover{
	background:url(../images/btn_item1_over.jpg) no-repeat;
	}
	
li.item2 a{
	background:url(../images/btn_item2_off.jpg) no-repeat;
	}

li.item2 a:hover{
	background:url(../images/btn_item2_over.jpg) no-repeat;
	}
	
li.item3 a{
	background:url(../images/btn_item3_off.jpg) no-repeat;
	}

li.item3 a:hover{
	background:url(../images/btn_item3_over.jpg) no-repeat;
	}
	
li.item4 a{
	background:url(../images/btn_item4_off.jpg) no-repeat;
	}

li.item4 a:hover{
	background:url(../images/btn_item4_over.jpg) no-repeat;
	}
	
li.item5 a{
	background:url(../images/btn_item5_off.jpg) no-repeat;
	}

li.item5 a:hover{
	background:url(../images/btn_item5_over.jpg) no-repeat;
	}
	
li.item6 a{
	background:url(../images/btn_item6_off.jpg) no-repeat;
	}

li.item6 a:hover{
	background:url(../images/btn_item6_over.jpg) no-repeat;
	}
	


/*  ▼　新しいページ　▼  */	
li.item_new01 a{
	background:url(../images/btn_item_new01_off.jpg) no-repeat;
	}

li.item_new01 a:hover{
	background:url(../images/btn_item_new01_on.jpg) no-repeat;
	}
li.item_new02 a{
	background:url(../images/btn_item_new02_off.jpg) no-repeat;
	}

li.item_new02 a:hover{
	background:url(../images/btn_item_new02_on.jpg) no-repeat;
	}
	
li.item_new03 a{
	background:url(../images/btn_item_new03_off.jpg) no-repeat;
	}

li.item_new03 a:hover{
	background:url(../images/btn_item_new03_on.jpg) no-repeat;
	}		
		
	
/*  ▲　新しいページ　▲  */	
	
li.item7 a{
	background:url(../images/btn_item7_off.jpg) no-repeat;
	}

li.item7 a:hover{
	background:url(../images/btn_item7_over.jpg) no-repeat;
	}
li.item8 a{
	background:url(../images/btn_item8_off.jpg) no-repeat;
	}

li.item8 a:hover{
	background:url(../images/btn_item8_over.jpg) no-repeat;
	}
li.item9 a{
	background:url(../images/btn_item9_off.jpg) no-repeat;
	}
li.item9 a:hover{
	background:url(../images/btn_item9_over.jpg) no-repeat;
	}

div#headerArea p{
	font-size:11px;
	}

/* グローバルナビげーション  */

ul#gnaviList{
	width:463px;
	float:right;
	margin-top:20px;
	}

ul#gnaviList li.home a{
	width:66px;
	background:url(../images/navi-home_off.gif) no-repeat;
	}

ul#gnaviList li.home a:hover{
	background:url(../images/navi-home_over.gif) no-repeat;
	}
	
ul#gnaviList li.cart a{
	width:110px;
	background:url(../images/navi-cart_off.gif) no-repeat;
	}
	
ul#gnaviList li.cart a:hover{
	background:url(../images/navi-cart_over.gif) no-repeat;
	}
	
ul#gnaviList li.guide a{
	width:80px;
	background:url(../images/navi-guide_off.gif) no-repeat;
	}
	
ul#gnaviList li.guide a:hover{
	background:url(../images/navi-guide_over.gif) no-repeat;
	}
	
ul#gnaviList li.mypage a{
	width:110px;
	background:url(../images/navi-mypage_off.gif) no-repeat;
	}
	
ul#gnaviList li.mypage a:hover{
	width:110px;
	background:url(../images/navi-mypage_over.gif) no-repeat;
	}


ul#gnaviList li.guide a{
	background:url(../images/navi-guide_off.gif) no-repeat;
	}
	
ul#gnaviList li.guide a:hover{
	background:url(../images/navi-guide_over.gif) no-repeat;
	}
	
ul#gnaviList li.contact a{
	width:97px;
	background:url(../images/navi-contact_off.gif) no-repeat;
	}
	
ul#gnaviList li.contact a:hover{
	width:97px;
	background:url(../images/navi-contact_over.gif) no-repeat;
	}

ul#gnaviList li a{
	height:46px;
	display:block;
	}
	
ul#gnaviList li a span{
	display:none;
	}

ul#gnaviList li{
	height:46px;
	float:left;
	}

ul#gnaviList li.last{
	padding-right:0;
	border-right:none;
	}

ul#gnaviList li a{
	display:block;
	}
		
/*---------------------------------

   トップページのアニメーショの部分
---------------------------------*/

div#innerWrap{
	clear:both;
	/*overflow:hidden;/* ←確認する時はここを消す*/
	min-width:1224px;
	margin-left:20px;
	height:609px;
	position:relative;
	z-index:0;
	}

div#contentWrap{
	position: absolute;
	width: 19600px;/* ←商品が増えたらサイズを足す 1ページ1220px14＋80*/
	height: 584px;
	padding: 10px 0 15px 0;
	background: url(../images/bg_bottomshadow.gif) repeat-x 0 bottom #fff;
	}


div.itemBox{
	width:1170px;
	height:540px;
	padding:20px;
	float:left;
	background-color:#fff;
	display:inline;
	margin-left:10px;
	}
	

div.itemBox2{
	width:1214px;
	height:584px;
	float:left;
	background-color:#000;
	display:inline;
	margin-left:10px;
	}

div.itemBox2 p,
div.itemBox p{
	font-size:75%;
	font-size:62.5%\9;
	}
	
div.first{
	margin-left:0;
	}


/*---------------------------------

   各ページで利用するcss
---------------------------------*/

div.itemBox p.leadTxt{
	margin-bottom:5px;
	}

/*div.itemBox div.style1{
	padding:3px 20px;
	margin-bottom:50px;
	}
	
div.itemBox div.style1 h2{
	font-size:87.5%;
	font-size:75%\9;
	float:left;
	display:inline;
	}

div.itemBox div.style1 p{
	float:right;
	display:inline;
	}*/
	
div.itemBox div.style1{
	padding: 3px 20px;
	margin-bottom: 5px;
	}
	
div.itemBox div.style1 h2{
	font-size:87.5%;
	font-size:75%\9;
	float:left;
	display:inline;
	}

div.itemBox div.style1 p{
	float:right;
	display:inline;
}

.bestPricep {
	display: block;
	color: #333;
	font-size: 10px;
	clear: both;
	margin-bottom: 35px;
	line-height: 10px;
	padding-left: 20px;
}

.bestPricep a {
	color: #ab1a00;
	text-decoration: none;
}

div.wrap{
	padding:0 18px;
	}

div.wrap span{
	width:130px;
	float:left;
	display:block;
	text-align:center;
	}


div.leftBox{
	width:562px;
	height:550px;
	float:left;
	display:inline;
	}


	
div.rightBox{
	width:562px;
	height:550px;
	float:right;
	display:inline;	
	margin-top:15px;
	}

div.rightBox p{
	color:#333;
	line-height:1.4;
	}

div.suppleInfo{/*サプリ用*/
	width:562px;
	height:550px;
	float:right;
	display:inline;	
	margin-top:8px;
	}
div.suppleInfo p{/*サプリ用*/
	color:#333;
	line-height:1.1;
	}


div.detailBox{
	float:right;
	display:inline;
	width:366px;
	font-size:10px;
	color:#3f210e;
	line-height:1.4;
	text-align:left;
	}

div.detailBox dl{
	width:366px;
	clear:both;
	}

div.detailBox .setBorder{
	padding-bottom:28px;
	margin-bottom:28px;
	border-bottom:1px solid #ccc;
	}
	
div.detailBox .setBorderS{/*サプリ用*/
	padding-bottom:12px;
	margin-bottom:12px;
	border-bottom:1px solid #ccc;
	}
	

div.detailBox dt{
	width:170px;
	float:left;
	font-weight:bold;
	}


div.detailBox dd.number{
	width:70px;
	float:left;
	}

div.detailBox dd.number input{
	width:40px;
	}

div.detailBox dd.cartBtn{
	width:122px;
	float:right;
	}


div.detailBox dd.cartBtn input{
	width:122px;
	height:27px;
	background:url(../images/btn_cart.gif) no-repeat;
	display:block;
	border:none;
	}
	
div.detailBox dd.cartBtn input:hover{
	background:url(../images/btn_cart_over.gif) no-repeat;
	}


/* 各商品のインフォメーションのボックス */

div.infoBox{
	margin-top:10px;
	padding:6px 6px;
	background-color:#f2f2f2;
	}

div.infoBox table{
	width:100%;
	font-size:11px;
	}
div.infoBox th{
	white-space:nowrap;
	width:80px;
	vertical-align:top;
	padding:6px 0;
	border-bottom:1px #989898 solid; 
	}

div.infoBox td{
	vertical-align:top;
	padding:6px 0 6px 15px;
	border-bottom:1px #989898 solid;
	line-height:1.4;
	}
.suppleInfo div.infoBox td{
	vertical-align:top;
	padding:6px 0 6px 15px;
	border-bottom:1px #989898 solid;
	line-height:1.2;
	}
.suppleInfo div.infoBox td img{
	padding: 3px 0;
	border-bottom:none;
	}

div.infoBox th span{
	background-color:#989898;
	color:#fff;
	font-weight:normal;
	padding:4px;
	display:block;
	}
	
div.infoBox th.last,
div.infoBox td.last{
	border-bottom:none;
	}

/* 各商品ごとのボーダーカラー  */
.borderWhite{
	border:2px solid #fff;
	}
	
.borderBlue{
	border:2px solid #040149;
	}
	
.borderRed{
	border:2px solid #d00000;
	}
	
.borderGreen{
	border:2px solid #d0f8ca;
	}

.borderPink{
	border:2px solid #ffbde8;
	}

.borderSkyBlue{
	border:2px solid #81bfec;
	}
	
.borderBeige{
	border:2px solid #eee4ca;
	}
	
.borderBrown{
	border:2px solid #cb9a73;
	}	
	
.borderMossGreen{
	border:2px solid #cdeecd;
	}
.borderMossBlue{
	border:2px solid #cddbee;
	}
.borderYellow{
	border:2px solid #f7d441;
	}
.borderGray{
	border: 2px solid #ABABA9;
	}

/* 各商品で使用する場合の背景画像  */

.bgItem1{
	background:url(../images/item1/bg.jpg) no-repeat right bottom;
	}
	
.bgItem8{
	background:url(../images/item8/bg.jpg) no-repeat 484px 10px;
	}



/*---------------------------------

   page7でのクラス
---------------------------------*/

div#page7.itemBox{
	width:1214px;
	height:554px;
	padding:0;
	float:left;
	display:inline;
	margin-left:10px;
	/*background-color:#fffff5;*/
	}


div.readBox{
	padding-left:12px;
	border-left:2px solid #3f210e;
	margin-bottom:40px;
	color:#000;
	}

div.readBox p.left{
	margin-right:186px;
}

div.readBox span.right{
	display:block;
	width:166px;
	float:right;
	}

div.readBox > .title{
	font-size:100%;
	font-weight:bold;
	margin-bottom:8px;
	color:#3f210e;
	}


div#page7 > div.leftBox{
	width:567px;
	height:544px;
	padding:20px;
	float:left;
	display:inline;
	background-color:#fffff5;
	line-height:1.4;
	}
	
div#page7 > div.rightBox{
	width:567px;
	height:534px;
	padding:50px 20px 0 20px;
	margin-top:0;
	background-color:#fffff5;
	float:right;
	display:inline;
	line-height:1.4;
	}

/*---------------------------------

  page8 開発者ページ
---------------------------------*/

div#page8.itemBox{
	width:1214px;
	height:544px;
	padding:0;
	float:left;
	display:inline;
	margin-left:10px;
	}
	
div#page8 > div.leftBox{
	width:427px;
	height:544px;
	padding:20px 160px 20px 20px;
	margin-top:0;
	float:left;
	display:inline;
	line-height:1.4;
	background:url(../images/item9/bg.jpg) no-repeat top right #e5e5e5;
	}
	
div#page8 > div.rightBox{ width: 567px; height: 544px; padding: 20px; margin-top: 0; display: inline; background-color: #e5e5e5; line-height: 1.4; float: right; 	}
	
p#name{
	padding-top:20px;
	text-align:right;
	font-size:85%;
	}
	
div.producer{
	margin-right:232px;
	}


div.photoArea{ width: 212px; display: inline; 	}

div.photoArea img{
	margin-bottom:5px;
	}

div.photoArea p{
	font-size:60%;
	}


div#page8 p{
	margin-bottom:15px;
	}
	
div.itemPhoto{
	margin-top:20px;
	float:right;
	width:188px;
	}
	
div.itemInfo{
	margin-top:30px;
	float:left;
	width:371px;
	}

/*---------------------------------

  page9 クラブ会員
---------------------------------*/

#page21, #page22{
	position: relative;
	background-color: #FFF;
	margin-top: 0px;
	}

div#page21.itemBox{
	width: 1182px;
	height: 528px;
	padding-top: 10px;
	}

#page21 p#btnMember, #page22 p#btnMember2{
	position: absolute;
	width: 264px;
	height: 78px;
	background: url(../images/item9/btn_member_off.png) no-repeat;
	left: 910px;
	top: 20px;
	}
#page21 p#btnMember a, #page22 p#btnMember2 a{
	display:block;
	width:264px;
	height:78px;
	background:url(../images/item9/btn_member_off.png) no-repeat
	}

#page21 p#btnMember span, #page22 p#btnMember2 span{
	display:none;
	}

/*---------------------------------

   特定商取引法に関する表示
---------------------------------*/

div.wrapBox{
	margin-bottom:30px;
	}

div.wrapBox h2{
	font-size:100%;
	margin-bottom:18px;
	padding:0 0 5px 20px;
	border-bottom:1px #CCC dotted;
	border-left:5px #CCC solid;
	}

table.infoTable{
	border-collapse:collapse;
	font-size:75%;
	width:100%;
	line-height:1.4;
	}
	
table.infoTable th{
	width:25%;
	border:1px #ccc solid;
	padding:10px 0;
	text-align:center;
	background-color:#F3F3F3;
	white-space:nowrap!important;
	}
	
table.infoTable td{
	border:1px #ccc solid;
	padding:10px;
	}

table.delivery{
	border-collapse:collapse;
	font-size:85%;
	width:100%;
	line-height:1.4;
	}
	
table.delivery th{
    width: 52px;
    border: 1px #ccc solid;
    padding: 2px 0;
    text-align: center;
    background-color: #F3F3F3;
    white-space: nowrap!important;
    font-weight: normal;
	}
	
table.delivery td{
	border:1px #ccc solid;
	padding:2px;
	}
/*---------------------------------

   個人情報の取り扱いについて
---------------------------------*/

div#contentsArea{
	clear:both;
	background-color:#fff;
	
	}

div#main{
	padding:20px;
	width:800px;
	margin:0 auto;
	}
	
div#main p{
	font-size:75%;
	line-height:1.6;
	}

div#main .post ul{
	margin-top:20px;
	list-style-type:circle;
	list-style-position:inside;
	}
	
div#main li{
	line-height:1.6;
	
	}

ul#topic{
	color:#333;
	font-size:75%;
	margin-bottom:30px;
	}

ul#topic li{
	display:inline;
	}
	

div.firstBox{
	padding-bottom:30px;
	border-bottom:1px #CCC dashed;
	margin-bottom:30px;
	}

div.firstBox h2{
	font-size:140%;
	margin-bottom:18px;
	}

div.post{
	padding-bottom:30px;
	}

div.post h3{
	font-size:81.3%;
	margin-bottom:10px;
	}
	
div.post ul{
	font-size:75%;
	}

p.pagetop{
	text-align:right;
	
	}
p.pagetop a{
	color:#069;
	text-decoration:none;
	}
p.pagetop a:hover{
	text-decoration:underline;
	}


/*---------------------------------

   naviArea
---------------------------------*/

div#naviArea{
	position: relative;
	padding: 20px 0 0 0;
	margin-left: 20px;
	background-color: #2c2c2c;
	min-height: 300px;
	height: auto;
	}

div#naviArea.setBg{
	background:url(../images/logo_17.png) no-repeat 99% 20px;
	}

div#leftNavi{
	width:213px;
	}

div#leftNavi li a{
	display:block;
	height:31px;
	width:213px;
	margin-bottom:3px;
	*margin-bottom:0;
	}

div#leftNavi li a span{
	display:none;
	}

div#leftNavi li.about a{
	background:url(../images/sidenavi-about_off.gif) no-repeat;
	}

div#leftNavi li.about a:hover{
	background:url(../images/sidenavi-about_over.gif) no-repeat;
	}

div#leftNavi li.voice a{
	background:url(../images/sidenavi-voice_off.gif) no-repeat;
	}

div#leftNavi li.voice a:hover{
	background:url(../images/sidenavi-voice_over.gif) no-repeat;
	}
	
div#leftNavi li.club a{
	background:url(../images/sidenavi-club_off.gif) no-repeat;
	}
	
div#leftNavi li.club a:hover{
	background:url(../images/sidenavi-club_over.gif) no-repeat;
	}


div#topic-news{
	position: absolute;
	width: 645px;
	top: 20px;
	}

div.tipicHeader{
	background:url(../images/title_topic.gif) no-repeat;
	height:24px;
	padding:12px 15px 0 0;
	}

div.tipicHeader p#title{ display: none; }

div.tipicHeader p#feed{
	width:53px;
	margin-left:auto;
	}

div#topic-news ul {
	padding-left:10px;
	padding-right:10px;
}
	
div#topic-news li{ line-height: 13px; font-size: 75%; font-size: 68%\9; letter-spacing: -1px\9; padding: 7px 10px 7px 0px; border-bottom: 1px dotted #4d4d4d; }

.bgTopic ul .small {
	line-height: 160% !important;
	font-size: 10px !important;
}

div#topic-news li a{
	color:#88C4FF;
	text-decoration:none;
	}

div#topic-news li a:hover{
	text-decoration:underline;
	}
	
div#topic-news li .space{
	line-height:2;
	margin-left:10px;
	}
	
	
div#topic-news li .title{ color: #d0f8ca; height: 18px; padding-bottom: 1px; }
	

div.bgTopic{ background: url(../images/bg_topic.gif) repeat-y; color: #FFF; padding: 6px 6px 0px 6px; }
	
/*---------------------------------

   footerArea
---------------------------------*/

div#footerArea{
	color:#fff;
	padding:20px;
	background-color:#2c2c2c;
	}
	
div#footerArea p{
	font-size:75%;
	font-size:80%\9;
	}

div#footerArea a{
	color:#fff;
	text-decoration:none;
	}

div#footerArea a:hover{
	text-decoration:underline;
	}
	
div#footerArea p#right{
	float:right;
	
}


div#footerArea p#left{
	float:left;
}


/*---------------------------------

   各ページで流用するクラス
---------------------------------*/


/* 各商品ごとのリード文とh2のカラ―  */
p.blue{
	color:#040149;
	}

div.blue{
	background-color:#040149;
	color:#FFF;
	}

p.red{
	color:#bc1717;
	}

div.red{
	background-color:#bc1717;
	color:#FFF;
	}
	
p.green{
	color:#1d5414;
	}

div.green{
	background-color:#d0f8ca;
	color:#000;
	}

p.pink{
	color:#cc6da8;
	}

div.pink{
	background-color:#ffbde8;
	color:#000;
	}
	
p.skyblue{
	color:#46a8e7;
	}

div.skyblue{
	background-color:#a9dcfd;
	color:#000;
	}
	
p.beige{
	color:#54361d;
	}

div.beige{
	background-color:#eee4ca;
	color:#000;
	}
	
	
p.brown{
	color:#a0704a;
	}

div.brown{
	background-color:#cb9a73;
	color:#000;
	}	
	
p.MossGreen{
	color:#3b903b;
	}

div.MossGreen{
	background-color:#dbeece;
	color:#000;
	}	
p.Yellow{
	color: #D8A001;
	}

div.Yellow{
	background-color: #FDD35C;
	color: #000;
	}
p.MosBlue{
	color:#3b6590;
	}

.mosBlue{
	background-color:#cee2ee;
	color:#000;
	}
.Gray{
	color: #656562;
	}
div.Gray{
	background-color: #C2C2C1;
	color: #000;
	}



/* 調整　*/

.aRight{
	text-align:right;
	}
	

.ajast{
	margin-top:-12px;
	}

.clear{
	clear:both;
	}

.nowrap{
	white-space:nowrap;
	}

.attend{
	font-size:110%;
	margin-top:5px;
	text-align:left;
	font-weight:normal;
	color:#F00;
	clear:both;
	}


.mb20{
	margin-bottom:20px;
	}
.lf40{
	margin-left:40px;
	}
	

/* h3のスタイル  */

h3.style1{
	background-color:#6b6561;
	color:#fff;
	padding:2px 8px;
	margin-bottom:10px;
	font-size:75%;
	font-size:68%\9;
	display:inline-block;
	*display:inline;
	*zoom:1;
	}
.topIMG {
	position: absolute;
	text-decoration: none;
	left: 323px;
	top: 38px;
}
.topIMG2 {
	position: absolute;
	text-decoration: none;
	left: 360px;
	top: 150px;
}

.bestPrice {
	position: absolute;
	text-decoration: none;
	left: 475px;
	top: 480px;
	background: #000;
}

.bestPrice02 {
	position: absolute;
	text-decoration: none;
	left: 500px;
	top: 490px;
	background: #000;
}

.priceTxt {
	color: #fff;
	display: block;
	width: 174px;
	text-align: center;
	font-size: 10px;
	padding-top: 10px;
}