@charset "utf-8";

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

	CSS document for hohoujun.jp
	This CSS for inner contents screen view layout 
	
	filename : contents.css
	author : Zentsu
	release :
	last modified:  2010-02-18 Tanaka 
	
	* page index
	
		1. index
		2. sitemap
		3. browse
		4. trust
		5. privacyPolicy
		6. faq
		7. shopping
		8. telfax
		9. payment
		10. 404
		11. corporate
		12. shopitemlist
		13. ingredient
		14. objective
		15. supplement
		16. media
		99. other
	
	* color scheme
		
		Key : #
		Sub : #
		Accent : #
		Balance : #
		
		font : #
		border : #
		captions_font: #
		strong-font: #
	
--------------------------------------------- */

/* 1= index
--------------------------------------------- */

#Img01 {
	width: 600px;
	z-index: -1;
}

.introductionProduct {
	margin-top: 10px;
}

#mainImg {
	position: relative;
	width: 600px;
}

#topMovie {
	position: absolute;
	top: 5px;
	left: 5px;
	width: 360px;
	z-index: 1;
}

#mainImg dl {
	margin-top: 15px;
}

#mainImg dt {
	display: block;
	/* Hides from IE-mac \*/
	overflow: hidden;
	/* End Hides from IE-mac */
	width: 600px;
	height: 40px;
	margin-bottom: 15px;
	background: url(../../images/re/main/other.jpg) no-repeat;
	text-indent: -9999px;
	font-size: 0;
}

#information {
	margin-top: 20px;
	background: url(../../images/re/main/bg-middle-inquiry.jpg) repeat-y;
}

#information dl {
	background: url(../../images/re/main/bg-bottom-inquiry.jpg) bottom no-repeat;
}	

#information dt {
	display: block;
	/* Hides from IE-mac \*/
	overflow: hidden;
	/* End Hides from IE-mac */
	width: 600px;
	height: 40px;
	background: url(../../images/re/main/news.jpg) no-repeat;
	text-indent: -9999px;
	font-size: 0;
}

#infoFrame {
	width: 550px;
	margin: 0 auto;
	padding: 15px;
	padding-top: 10px;
	line-height: 200%;
	text-align: left;
}

.infoList {
	border-bottom: 1px dotted #cccccc;
}

.infoList dt,
.infoList dd {
	display: inline;
}

.infoList span {
	margin-right: 20px;
}

#ranking {
	margin-top: 20px;
}

#ranking dt {
	display: block;
	/* Hides from IE-mac \*/
	overflow: hidden;
	/* End Hides from IE-mac */
	width: 600px;
	height: 40px;
	background: url(../../images/re/main/ranking.jpg) no-repeat;
	text-indent: -9999px;
	font-size: 0;
}

.rankNo {
	display: block;
	float: left;
	/* Hides from IE-mac \*/
	overflow: hidden;
	/* End Hides from IE-mac */
	width: 40px;
	height: 30px;
	margin-right: 5px;
	text-indent: -9999px;
	font-size: 0;
}

#rankNo1 {
	background: url(../../images/re/main/ranking_01.jpg) no-repeat; 
}

#rankNo2 {
	background: url(../../images/re/main/ranking_02.jpg) no-repeat; 
}

#rankNo3 {
	background: url(../../images/re/main/ranking_03.jpg) no-repeat; 
}

.rankBlock {
	display: block;
	padding-bottom: 10px;
}

.rankList {
	display: block;
	position: relative;
	float: left;
	width: 180px;
	margin: 15px 0;
	padding: 0 10px;
	text-align: left;
}

.rankPay {
	position: absolute;
	bottom: 0;
	right: 10px;
	color: #cc3333;
}

.rankExp {
	display: block;
	width: 60px;
	margin-left: 10px;
}

.rankImage,
.rankExp {
	float: right;
}

#inquiry {
	display: block;
	margin-top: 20px;
	background: url(../../images/re/main/bg-middle-inquiry.jpg) repeat-y;
}

#inquiryField {
	background: url(../../images/re/main/bg-top-inquiry.jpg) top no-repeat;
}

#inquiry dl {
	background: url(../../images/re/main/bg-bottom-inquiry.jpg) bottom no-repeat;
	padding: 10px 0 10px 10px;
}

#inquiry dt {
	display: block;
	/* Hides from IE-mac \*/
	overflow: hidden;
	/* End Hides from IE-mac */
	width: 580px;
	height: 35px;
	background: url(../../images/re/main/inquiry.jpg) no-repeat;
	text-indent: -9999px;
	font-size: 0;
}

.inquiryBoxs {
	position: relative;
	width: 280px;
	float: left;
}

#inquiryBoxs_left {
	margin-right: 20px;
}

.inquiryBoxUpper {
	margin-bottom: 10px;
}

#toFaxOrder {
	position: absolute;
	top: 70px;
	left: 120px;
}

#toFaxOrder a {
	display: block;
	/* Hides from IE-mac \*/
	overflow: hidden;
	/* End Hides from IE-mac */
	width: 155px;
	height: 55px;
	background: url(../../images/re/main/bt-facsimile.jpg) no-repeat;
	text-indent: -9999px;
	font-size: 0;
}

#toFaxOrder a:hover { background-position: 0 -55px; }

#toMailInquiry {
	position: absolute;
	top: 174px;
	left: 10px;
}

#toMailInquiry a {
	display: block;
	/* Hides from IE-mac \*/
	overflow: hidden;
	/* End Hides from IE-mac */
	width: 265px;
	height: 40px;
	background: url(../../images/re/main/bt-mail.jpg) no-repeat;
	text-indent: -9999px;
	font-size: 0;
}

#toMailInquiry a:hover { background-position: 0 -40px; }

/* 2= sitemap
--------------------------------------------- */

#sitemap h1 {
	background: url(../../images/re/content/captions-sitemap.jpg) no-repeat;
}

.sitemapBox {
	float: left;
	width: 193px;
	line-height: 250%;
}

.sitemapBoxCaptions {
	padding-left: 20px;
	background: url(../../images/re/sub/arrow_orange.gif) no-repeat center left;
}

.sitemapBox li ul li {
	margin-left: 15px;
	padding-left: 15px;
	background: url(../../images/re/other/arrow.gif) no-repeat center left;
	vertical-align: bottom;
}

.sitemapBox li ul li.listFix {
	background: url(../../images/re/other/arrow_fix.gif) no-repeat center left;
}

/* 3= browse
--------------------------------------------- */

#browse h1 {
	background: url(../../images/re/content/captions-browse.jpg) no-repeat;
}

/* 4= trust
--------------------------------------------- */

#trust h1 {
	background: url(../../images/re/content/captions-trust.jpg) no-repeat;
}

.defMargin {
	margin-bottom: 20px;
}

.ruledLineBox {
	width: 580px;
	line-height: 220%;
}

.ruledLineBox dl {
	border-bottom: 1px dashed #cccccc;
}

.ruledLineBox dt {
	float: left;
	width: 30%;
	color: #ff9933;
}

.ruledLineBox dd {
	float: left;
	width: 69%;
}
	
dl#ruledFix {
	border: 0;
}

.addCaption {
	margin: 1em 0 1em 0;
	font-weight: bold;
}

/* 5= privacyPolicy
--------------------------------------------- */

#privacyPolicy {
	line-height: 200%;
}

#privacyPolicy h1 {
	background: url(../../images/re/content/captions-privacypolicy.jpg) no-repeat;
}

.inquiry {
	margin: 15px 0;
}

.inquiryBox {
	margin-top: 0.2em;
	border-top: 1px solid #cccccc;
}

.inquiryBox dl {
	padding: 0.3em;
	border: 1px solid #cccccc;
	border-top: none;
	background: url(../../images/re/content/likeatable_bg.gif) repeat-y top left;
	background-position: -87px 0;
}

.inquiryBox dt {
	float: left;
	width: 35%;
}

.inquiryBox dd {
	float: right;
	width: 61%;
}

#signature {
	text-align: right;
}

/* 6= faq
--------------------------------------------- */

#faq h1 {
	background: url(../../images/re/content/captions-faq.jpg) no-repeat;
}

#faq h2 {
	margin-bottom: 20px;
}

#faq dt {
	padding: 7px 20px;
	background-color: #dddddd;
	color: #000000;
}

#faq dd {
	padding: 15px 30px 20px;
}

#faq dd dl dt {
	padding: 0;
	background-color: #ffffff;
	font-weight: bold;
	color: #cc3333;
}

#faq dd dl dd {
	margin-bottom: 10px;
	padding: 0;
}

#faq ul,
#faq ol {
	margin-bottom: 10px;
}

#faq em {
	font-weight: bold;
	color: #cc3333;
}

.txstStrong {
	margin-bottom: 10px;
	border-bottom: dotted 1px #333333;
	line-height: 150%;
	font-size: 114%;
	font-weight: bold;
}

#listSide,
#shopDetails {
	width: 560px;
	padding: 19px;
	padding-bottom: 0px;
	background-color: #f4ffe2;
	border: 1px solid #cccccc;
}

#listSide li,
#shopDetails li {
	float: left;
	padding-bottom: 19px;
}

.buttonLeft {
	margin-right: 20px;
}

.box {
	padding: 10px;
	border: solid 1px #cccccc;
}

.box2 {
	padding: 0 20px;
}

.contents02 {
	margin-bottom: 20px;
	width: 100%;
}

.Arrow {
	font-weight: bold;
	color: #3790cc;
	padding-top:5px;
}

#dateOfPayment {
	margin: 10px 0;
}

#dateOfPayment th,
#dateOfPayment td {
	padding: 10px;
	text-align: center;
	border: 1px solid #cccccc;
}

.itemCaption {
	margin-bottom: 10px;
	padding-bottom: 0.5em;
	color: #ff6633;
	font-size: 140%;
	font-weight: bold;
	border-bottom: 1px dotted #cccccc;
}

* html .itemCaption {
	margin-top: 5px;
}

/* 7= shopping
--------------------------------------------- */

#shopping h1 {
	background: url(../../images/re/content/captions-shopping.jpg) no-repeat;
}

.netBoxinner:after,
.netBoxinnerType02:after {
    content: ".";
    display: block;
    clear: both;
    height: 0;
    visibility: hidden;
}

.netBoxinner,
.netBoxinnerType02 {
    display: inline-block;
    min-height: 1%;  /* for IE 7*/
}

/* Hides from IE-mac \*/
* html .netBoxinner,
* html .netBoxinnerType02 { height: 1%;}
.netBoxinner,
.netBoxinnerType02 { display: block;}
/* End hide from IE-mac */

#shopping h4 {
	font-size: 140%;
	font-weight: bold;
	margin: 15px 0;
	padding: 10px;
	border-bottom: 2px solid #ff9933;
}

#shopping h5 {
	font-size: 120%;
	font-weight: bold;
}

.innerImg {
	float: left;
	margin-right: 10px;
}

.txt {
	margin: 15px 0;
	padding: 10px 0;
	border-top: 1px dotted #cccccc;
	border-bottom: 1px dotted #cccccc;
}

.txt em {
	color: #cc3333;
}

.netBoxinnerType02 {
	margin: 15px 0;
	padding-bottom: 15px;
	border-bottom: 1px dotted #cccccc;
}

#noteBox01 {
	margin: 20px 0;
	padding: 20px;
	padding-top: 0;
	border: 2px solid #ff6600;
	text-align: center;
	font-weight: bold;
}

#noteBox01 h5 {
	color: #ff6600;
	padding: 15px;
}

#noteBox02 {
	position: relative;
	margin-top: 45px;
	margin-bottom: 20px;
	padding: 20px;
	padding-top: 0;
	border: 1px solid #cccccc;
}

#noteBox02 h5 {
	display: block;
	position: absolute;
	top: -5px;
	left: 14px;
	padding: 0 15px;
	background-color: #ffffff;
}

#noteBox02 p {
	margin-top: 35px;
}

#noteBox02 dt,
#noteBox02 dd {
	display: inline;
	font-weight: bold;
}

#shopping #inquiry dt {
	display: none;
}

/* 8= telfax
--------------------------------------------- */

#telfax {
	position: relative;
}

#telfax h1 {
	background: url(../../images/re/content/captions_telfax.gif) no-repeat;
}

#payment h2,
#telfax h2 {
	margin-bottom: 10px;
	padding-bottom: 10px;
	border-bottom: 1px dashed #cc9933;
	font-weight: bold;
	font-size: 158%;
}

.number {
	display: block;
	width: 580px;
	height: 85px;
	margin-bottom: 20px;
	text-indent: -9999px;
	font-size: 0;
}

#telFax01 {
	background: url(../../images/re/content/telfax_01.gif) no-repeat;
}

#telFax02 {
	background: url(../../images/re/content/telfax_02.gif) no-repeat;
}

#toReader {
	width: 100%;
	margin: 15px 0;
	padding: 10px 0;
	border-top: 1px dotted #cccccc;
	border-bottom: 1px dotted #cccccc;
	font-size: 85%;
}

#toReader img {
	float: left;
	margin-right: 20px;
}

#convenience {
	display: block;
	width: 400px;
	height: 160px;
	margin: 10px 0 30px 0;
	background: url(../../images/re/content/convenience_min.gif) no-repeat;
}

#credit {
	display: block;
	width: 400px;
	height: 55px;
	background: url(../../images/re/content/credit.gif) no-repeat;
}

#convenience li,
#convenienceNet li,
#credit li {
	display: inline;
	text-indent: -9999px;
	font-size: 0;
}


#payment em,
#telfax em {
	font-weight: bold;
}

#toPdf {
	position: absolute;
	top: 230px;
	right: 437px;
	width: 300px;
	height: 85px;
}

#telfax dt,
#payment dt,
span.imp {
	font-weight: bold;
	color: #cc3333;
}


/* 9= payment
--------------------------------------------- */

#payBox,
#payment {
	line-height: 160%;
}

#payment h1 {
	background: url(../../images/re/content/captions-payment.jpg) no-repeat;
}

#convenienceNet {
	display: block;
	width: 400px;
	height: 160px;
	margin: 10px 0 30px 0;
	background: url(../../images/re/content/convenience_min02.gif) no-repeat;
}
	
#payBox {
	margin-top: 20px;
	padding: 15px;
	border: 1px solid #cccccc;
}

/* 10= 404
--------------------------------------------- */

#notfound h1 {
	background: url(../../images/re/content/captions-notfound.jpg) no-repeat;
}

#explanation404 {
	margin-bottom: 1em;
	padding-bottom: 1em;
	line-height: 160%;
	border-bottom: 1px dashed #cccccc;
}

/* 11= corporate
--------------------------------------------- */

#corporate h1 {
	background: url(../../images/re/content/captions-corporate.jpg) no-repeat;
}

/* 12= shopitemlist
--------------------------------------------- */

#shopitemlist h1 {
	background: url(../../images/re/content/captions-itemlist.jpg) no-repeat;
}

.itemwidthline {
	margin-bottom: 10px;
}

.itemwidthlineBox {
	width: 580px;
	padding-bottom: 10px;
}

.searchBox_list {
	display: inline-block;
	width: 135px;
	margin-bottom: 15px;
	text-align: center;
	padding: 0 5px;
	vertical-align: top;
	/display: inline;
	/zoom: 1;
}

.price_bf {
	color: #cc3333;
	font-size: 80%;
	font-weight: bold;
}

.price_af {
	color:#cc3333;
	font-weight: bold;
}

.searchBox_list a,
searchBox_list li {
	display: block;
}

.searchBox_list a {
	text-decoration: none;
}

.searchBox_list span {
	text-decoration: underline;
}

/* 13= ingredient
--------------------------------------------- */

#ingredient h1 {
	background: url(../../images/re/content/captions-ingredient.jpg) no-repeat;
}

.ingBox {
	float: left;
	width: 290px;
}

#ing_left {
	margin-right: 20px;
}

.ingBox dd {
	margin-left: 30px;
	padding: 5px 0;
	padding-left: 20px;
	background: url(../../images/re/sub/arrow_orange.gif) left no-repeat;
}

.contentInner600 {
	text-align: left;
}

.ingBox dl {
	margin-bottom: 20px;
}

#ing_subTitle {
	display: block;
	width: 580px;
	margin-left: 10px;
	padding: 5px;
	padding-left: 0;
	font-size: 160%;
	font-weight: bold;
	border-bottom: 2px solid #ff6600;
} 

.searchH_small {
	margin: 20px 0 15px 0;
	padding: 0 0 5px 20px;
	color: #333333;
	font-size: 120%;
	font-weight: bold;
	border-bottom: 1px dotted #cccccc;
	background: url(../../images/re/sub/arrow_orange.gif) left no-repeat;
}


/* 14= objective
--------------------------------------------- */

#objective h1 {
	background: url(../../images/re/content/captions-objective.jpg) no-repeat;
}

#objective .ingBox dt {
	margin-bottom: 10px;
}

#objective .ingBox dl {
	padding-bottom: 10px;
	background: url(../../images/re/content/bg-objective-bottom.jpg) bottom no-repeat;
}

#objective .boxBg {
	background: url(../../images/re/content/bg-objective-middle.jpg) repeat-y;
}


/* 15= supplement
--------------------------------------------- */

#supplement h1 {
	background: url(../../images/re/content/captions-supplement.jpg) no-repeat;
}

#supplement .captions {
	display: block;
	/* Hides from IE-mac \*/
	overflow: hidden;
	/* End Hides from IE-mac */
	width: 600px;
	height: 120px;
	margin: 5px 0 30px 0;
	text-indent: -9999px;
	font-size: 0;
}

#supplement .price_af {
	color:#cc3333;
	font-weight: bold;
	text-decoration: none;
}


/* 16= media
--------------------------------------------- */

#media {
	line-height: 120%;
	text-align: left;
}

#media h1 {
	background: url(../../images/re/media/media_01.jpg) no-repeat;
	float: left;
	width: 250px;
	height: 180px;
	margin: 5px 0 0 0;
}

#mediaTxt {
	float: left;
	width: 330px;
	margin: 15px 0;
	padding: 0 10px;
}

#mediaTxt2 {
	border: 2px solid #CC3333;
	margin-top: 10px;
	padding: 8px;
}

#media h2 {
	font-size: 140%;
	font-weight: bold;
	border-bottom: 2px dashed #669900;
	margin: 15px 0;
	padding-bottom: 5px;
}

#media h2 img {
	padding: 0 5px;
	vertical-align: middle;
}

.mediaItem {
	float: left;
	width: 360px;
	padding: 0 10px 0 20px;;
}

.mediaItemName {
	font-size: 130%;
	font-weight: bold;
	margin-top: 10px;
}

.mediaItemPrice {
	text-align: right;
	font-size: 110%;
	color: #666666;
	font-weight: bold;
	margin-top: 10px;
}

.mediaItemPrice .txtRed {
	font-size: 120%;
}

.mediaItemTxt {
	margin-top: 15px;
}

#mediaTxt2 .txtBlock {
	color: #CC3333;
	font-size: 110%;
	font-weight: bold;
}

.mediaItemImg {
	float: left;
	padding-left: 10px;
}

.mediaItemTel {
	margin-top: 10px;
}

/* 99= other
--------------------------------------------- */
/* ゴールデンウィークに関して */

#impInfo {
	margin-bottom: 10px;
}

#impInfo dt {
	padding: 5px;
	text-align: center;
	-webkit-border-top-left-radius: 8px;
	-moz-border-radius-topleft: 8px;
	-webkit-border-top-right-radius: 8px;
	-moz-border-radius-topright: 8px;
	text-shadow: 1px 1px rgba(255,255,255,0.7);
	background: -webkit-gradient(linear, left top, left bottom, from(#CDE899), to(#99cc33));
	background: -moz-linear-gradient(top, #CDE899, #99cc33);
	/background-color: #99cc33;
}

#impInfo dd.impInfoSta {
	padding: 15px;
	border-left: 1px solid #99cc33;
	border-right: 1px solid #99cc33;
	border-bottom: 1px dotted #99cc33;
}

#impInfo dd.impInfoEnd {
	padding: 15px;
	border-left: 1px solid #99cc33;
	border-right: 1px solid #99cc33;
	border-bottom: 1px solid #99cc33;
	-webkit-border-bottom-left-radius: 8px;
	-webkit-border-bottom-right-radius: 8px;
	-moz-border-radius-bottomleft: 8px;
	-moz-border-radius-bottomright: 8px;
}

#impInfo dd a {
	font-weight: bold;
	-webkit-transition: 0.5s ease-in-out;
}