﻿@charset "utf-8";

/*

========================= sp_product css =========================

	無料サンプルと定期お届け制度のCSS
		1.要素設定
		2.枠組み
			2-1.メインコンテンツ
			2-2.グローバルナビ
				2-2-1.基本
				2-2-2.企業ページ
			2-3.フッター

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



/* 1.要素設定
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

#main h1 {
	width: 740px;
	height: 30px;
	margin: 0px 0px 0px 0px;
	padding: 8px 0px 0px 35px;
	background:  url(../image/h1_740_bg.gif) no-repeat left top;
	font-size: 18px;
}


/* 2.枠組み
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

	/* 2-1.topbanner
	------------------------------  */

.top_banner {
	width: 740px;
	height: auto;
	margin: 5px 0px 10px 0px;
	padding: 0px 0px 0px 0px;
	background-color: #FFF;
}

	/* 2-1.caption
	------------------------------  */

.caption {
	width: 740px;
	height: auto;
	margin: 10px 0px 10px 0px;
	padding: 0px 0px 0px 0px;
	border: 1px solid #0B9BCE;
	background-color: #FFF;
}

.caption h2 {
	margin: 10px 5px 0px 10px;
	padding: 2px 0px 10px 15px;
	background: url(../image/h2_icon.gif) no-repeat left top;
	font-size: 16px;
	font-weight: bold;
}

.caption p {
	line-height: 150%;
	margin: 0px 0px 0px 0px;
	padding: 0px 10px 10px 10px;
	color: #000;
	font-size: 14px;
}

.mizuiro {
	color: #009FE8;
	font-weight: bold;
}

.zaikogire  {
	line-height:150%;
	font-size: 16px;
	color: #ff0000;
	font-weight:bold;
}



/* 3.個別ページ用
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

	/* 3-1.無料サンプル
	------------------------------  */

#main .bigbox {
	width: 740px;
	height: 905px;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	background: url(../image/sample_bigbox.gif) no-repeat;
}


#main .middlebox1 {
	float: left;
	width: 345px;
	height: 875px;
	margin: 15px 0px 0px 20px;
	padding: 0px 0px 0px 0px;
	background: url(../image/sample_middlebox.gif) no-repeat;
}

/* *hack for IE6 */
* html #main .middlebox1 {
	margin: 15px 0px 0px 10px;
}

#main .middlebox2 {
	float: right;
	width: 345px;
	height: 875px;
	margin: 15px 20px 0px 0px;
	padding: 0px 0px 0px 0px;
	background: url(../image/sample_middlebox.gif) no-repeat;
}

/* *hack for IE6 */
* html #main .middlebox2 {
	margin: 15px 10px 0px 0px;
}

#main .smallbox {
	width: 300px;
	height: 300px;
	margin: 15px auto 10px auto;
	padding: 0px 0px 0px 0px;
	border: 1px solid #809FAA;
}

#main .bigbox h2 {
	margin: 10px 5px 0px 10px;
	padding: 2px 0px 10px 15px;
	background: url(../image/h2_icon_orange.gif) no-repeat left top;
	font-size: 16px;
	font-weight: bold;
}

#main .bigbox p {
	line-height: 150%;
	margin: 0px 0px 0px 0px;
	padding: 0px 10px 10px 10px;
	color: #000;
	font-size: 14px;
}

#main .yajirusi {
	width: 250px;
	height: 30px;
	margin: 0px auto 0px auto;
}

.productname {
	font-weight: bold;
	text-align: center;
	
}

#main .cartin {
	width: 180px;
	height: 30px;
	margin: 0px auto 0px auto;
}

	/* 3-2.定期お届け制度
	------------------------------  */


#main .bigboxteiki {
	width: 740px;
	height: 350px;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	background: url(../image/teiki_bigbox.gif) no-repeat;
}

#main .middleboxteiki1 {
	float: left;
	clear: both;
	width: 345px;
	height: 150px;
	margin: 20px 0px 0px 20px;
	padding: 0px 0px 0px 0px;
	background: url(../image/teiki_middlebox345_150.gif) no-repeat;
}

#main .middleboxteiki2 {
	float: right;
	clear: right;
	width: 345px;
	height: 150px;
	margin: 20px 20px 0px 0px;
	padding: 0px 0px 0px 0px;
	background: url(../image/teiki_middlebox345_150.gif) no-repeat;

}

#main .middleboxteiki3 {
	float: left;
	clear: both;
	width: 345px;
	height: 150px;
	margin: 10px 0px 0px 20px;
	padding: 0px 0px 0px 0px;
	background: url(../image/teiki_middlebox345_150.gif) no-repeat;
}

#main .middleboxteiki4 {
	float: right;
	clear: right;
	width: 345px;
	height: 150px;
	margin: 10px 20px 0px 0px;
	padding: 0px 0px 0px 0px;
	background: url(../image/teiki_middlebox345_150.gif) no-repeat;
}

#main .bigboxteiki h3 {

	margin: 10px 5px 0px 10px;
	padding: 2px 0px 10px 15px;
	background: url(../image/h2_icon_orange.gif) no-repeat left top;
	font-size: 16px;
	font-weight: bold;
}

#main .bigboxteiki p {
	line-height: 150%;
	margin: 0px 0px 0px 0px;
	padding: 0px 10px 10px 10px;
	color: #000;
	font-size: 14px;
}

#main .teikiitem {
	clear: both;
	width: 740px;
	height: 660px;
	margin: 10px 0px 10px 0px;
	padding: 0px 0px 0px 0px;
	border: 1px solid #0B9BCE;
	background-color: #FFF;
}

#main .teikiitem h2 {
	margin: 10px 5px 0px 10px;
	padding: 2px 0px 0px 15px;
	background:  url(../image/h2_icon.gif) no-repeat left top;
	font-size: 16px;
	font-weight: bold;
}

#main .itembox  {
	float: left;
	width: 180px;
	height: 200px;
	margin: 5px 0px 0px 5px;
	padding: 0px 0px 0px 0px;
}

#main .itemphoto a img {
	margin: 0px 0px 0px 0px;
	padding: 5px 5px 5px 5px;
	border-width: 0px;
}

#main .itembox p {
	margin: 0px;
	padding: 0px;
	font-size: 12px;
	font-weight: bold;
	text-align: center;
}

#main .itembox .itemphoto {
	width: 160px;
	height: 160px;
	margin: 10px auto 5px auto;
	padding: 0px 0px 0px 0px;
	background: url(../image/pickup_bg.gif) no-repeat center top;
}

#main .itembox a {
	text-decoration: none;
	color: #000000;
}
#main .itembox  a:hover {
	text-decoration: underline;
	color: #000000;
}


.caption ul {
	margin: 0px 5px 0px 10px;
	padding: 2px 0px 10px 15px;
}

.caption ul li {
	list-style-type: disc;
	line-height: 150%;
	margin: 0px;
	padding: 0px;
	font-size: 14px;
}
