@charset "utf-8";

/* element
---------------------------------------------------- */
body {
	color: #333333;
	background: #FFFFFF url("/images/common/background.gif") repeat-x;
	font-family:'qMmpS Pro W3','Hiragino Kaku Gothic Pro','CI',Meiryo,'lr oSVbN',sans-serif;
}
* html body {
	text-align: center; /* IE6 */
}
img {
	vertical-align: bottom;
	border: none;
}
a {
	color: #666666;
	outline: none;
}
a img {
	border: none;
}
em {
	font-style: normal;
	font-weight: bold;
}
strong {
	font-style: normal;
	font-weight: bold;
}


/* wrapperContainer
---------------------------------------------------- */
div#wrapperContainer {
	width: 810px;
	margin: 0 auto;
	padding: 0 15px;
	background: url("/images/common/containerback.gif") no-repeat top left;
}
* html div#wrapperContainer {
	text-align: left; /* IE6 */
}
/* wrapper
---------------------------------------------------- */
div#wrapper {
	width: 810px;
	margin: 0;
	background: #FFFFFF;
}
/* header
---------------------------------------------------- */
div#header {
	width: 810px;
	height: 45px;
}
#header div#logo {
	float: left;
	width: 200px;
	height: 45;
	line-height: 45px;
	margin-right: 250px;
}


#header div#logo h1{
	width: 200px;
	height: 45px;

}

* html #header div#logo { /*for IE6 */
	/* 247だとカラム落ちが発生(何故?) */
	margin-right: 245px;
}
#header div#fontSizeBox {
	float: left;
	width: 155px;
	margin-top: 22px;
}
#fontSizeBox img {
	cursor: pointer;
}
#fontSizeBox span {
	margin-right: 3px;
}
#header div#searchBox {
	float: left;
	width: 205px;
	margin-top: 22px;
}
#searchBox span {
	display: inline-block; /* for IE8 */
	margin-left: 3px;
	vertical-align: bottom;
}

/* navi
---------------------------------------------------- */
div#navi {
	clear: both;
	width: 810px;
	height:65px;
}
#navi ul {
	width: 810px;
	height: 65px;
	list-style: none;
}
#navi ul li{
	display: block;
	float: left;
	width: 142px;
	height: 65px;
}
#navi ul li.mostLeft {
	width: 93px 
}
#navi ul li.mostRight {
	width: 149px
}
#navi ul li a{
	display:block;
}
/* topicPath
---------------------------------------------------- */
div#topicPath {
	clear: both;
	width: 810px;
}
#topicPath p {
	margin: 5px 8px;
	font-size: 93%;
}

/* content
---------------------------------------------------- */
div#content {
	clear: both;
	width: 800px;
	margin: 0 5px;
}
/* -------------------
  main
--------------------*/
#content div#main {
	width: 575px;
	float: left;
}
#main h2 {
	margin-left: 12px;
}
#main p {
	margin: 1em;
}
#main ul {
	margin: 1em 0 1em 1em;
}
#main ol {
	margin: 1em 0 1em 1em;
}
#main table {
	margin: 1em 0 1em 1em;
}
/* -------------------
  sidebar
--------------------*/
#content div#sidebar {
	float: left;
	width: 201px;
	margin-right: 24px;
}
* html #content div#sidebar { /*for IE6 */
	margin-right: 20px;
}
#sidebar h3 {
	width: 187px;
	margin: 0 auto 0.5em;
}
#sidebar ul#subnavi {
	width: 187px;
	margin: 0 auto;
}
#subnavi li {

	border-bottom: 1px solid #dfded8;

}
#subnavi li.mostTop {
	border-top: 1px solid #F6F5F0;
}
#subnavi li.mostBottom {
	border-bottom: 1px solid #F6F5F0;
}
#subnavi li.active {
	background: #FFEFAF url("/images/common/listmark/listmark2.gif") no-repeat 5px center;
}
#subnavi li a {
	display: block;
	width: 162px;
	padding: 1em 0;
	padding-left: 25px;
	background: url("/images/common/listmark/listmark2.gif") no-repeat 5px center;
}
#sidebar div#bannerBox {
	width: 201px;
	margin-top: 7px;
}
#bannerBox p {
	width: 201px;
	margin-bottom: 7px;
}


/* footer
---------------------------------------------------- */
div#footer {
	clear: both;
	width: 810px;
	margin-top: 50px;
}
#footer p span {
	display: inline-block; /* for IE8 */
	vertical-align: bottom;
}
#footer p.navi {
	margin-top: 20px;
	font-size: 93%;
	text-align: center;
}
#footer p.copy {
	margin-top: 15px;
	font-size: 77%;
	text-align: center;
}

/* general class
---------------------------------------------------- */
.textLarge {
	font-size: 123.1%; /* 16px */
}
.textXSmall {
	font-size: 77%; /* 10px */
}
.textSmall {
	font-size: 85%; /* 11px */
}
.textNormal {
	font-weight: normal;
}
.textCenter {
	text-align: center;
}
.textRight {
	text-align: right;
}
.layoutLeft {
	float: left;
}
.layoutLeftImg {
	float: left;
	margin: 0 9px 5px 0;
}
.layoutRight {
	float: right;
}
.layoutClear {
	clear: both;
}

/* Clearfix
---------------------------------------------------- */
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
display: inline-table;
min-height: 1%;
}
/* Hides from -mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from -mac */


/* GARDEN菜園 メイン領域
---------------------------------------------------- */

#gardenArea h2#ttl {
	clear: both;
	width: 554px;
	padding: 0.5em;
	color: white;
	background: #977e51;
	line-height: 24px;
	border-left: 3px solid #508D01;
	font-weight: bold;
	font-size: 100%;
	height: auto;
	margin-top: 0.5em;
	margin-right: auto;
	margin-bottom: 0.5em;
	margin-left: auto;
}
#gardenArea h3 {
	clear: both;
	width: 514px;
	height: 42px;
	line-height: 42px;
	margin: 0.5em auto;
	padding-left: 40px;
	background: url("/images/garden/heading2.gif") no-repeat;
	font-weight: bold;
}
#gardenArea div#leftBox {
	float: left;
	width: 290px;
	padding-bottom: 25px;
}
#gardenArea #leftBox p {
	margin: 1em 0 0 1em;
}
#gardenArea div#rightBox {
	float: right;
	width:260px;
	padding-bottom: 25px;
}

.floatContainer{
	display: inline-block;
	width: 100%;
}

.floatLeft{
	display: inline;
	float: left;	
}

.floatRight{
	display: inline;
	float: right;	
}
#gardenList li{
	margin-bottom: 1pc;
	padding-right: 1em;
	padding-bottom: 1em;
	padding-left: 1em;
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #CCCCCC;
	margin-right: 1em;
}

.listLeft{
	width: 100px;
	margin-right: 10px;
}

.listRight{
	width: 400px;
}



#foodArea a {
	color: #6bb80f;
}
#foodArea p#top0 {
	margin-top: 0px;
	padding-top: 0px;
}
#foodArea h2#ttl , #walkArea h2#ttl {
	clear: both;
	width: 554px;
	padding: 0.5em;
	color: white;
	background: #977e51;
	line-height: 24px;
	border-left: 3px solid #508D01;
	font-weight: bold;
	font-size: 100%;
	height: auto;
	margin-top: 0.5em;
	margin-right: auto;
	margin-bottom: 0.5em;
	margin-left: auto;
}
#foodArea h3 {
	clear: both;
	width: 514px;
	height: 42px;
	line-height: 42px;
	margin: 0.5em auto;
	padding-left: 40px;
	background: url("/images/food/heading2.gif") no-repeat;
	font-weight: bold;
}
#foodArea div#leftBox {
	float: left;
	width: 290px;
	padding-bottom: 25px;
}
#foodArea #leftBox p {
	margin: 1em 0 0 1em;
}
#foodArea div#rightBox {
	float: right;
	width:260px;
	padding-bottom: 25px;
}

#foodArea #recipe{
	background-color: #FFECFF;
	padding: 15px;
	margin-right: 10px;
	margin-left: 10px;
}

#foodArea #recipeLeft{
	display: inline;
	float: left;
	width: 180px;
}

#foodArea #recipeRight{
	display: inline;
	float: right;
	width: 308px;
	padding: 10px;
	border: 1px solid #FFCCFF;
	background-color: #FFFFFF;
}

#foodArea #recipeRight strong{
	color: #FF66CC;
}



#main a {
	color: #6bb80f;
}
#topicArea p#top0 {
	margin-top: 0px;
	padding-top: 0px;
}
#topicArea h2#ttl {
	clear: both;
	width: 554px;
	padding: 0.5em;
	color: white;
	background: #977e51;
	line-height: 1em;
	border-left: 3px solid #508D01;
	font-weight: bold;
	font-size: 100%;
	height: auto;
	margin-top: 0.5em;
	margin-right: auto;
	margin-bottom: 0.5em;
	margin-left: auto;
}
#topicArea h3 {
	clear: both;
	width: 514px;
	height: 42px;
	line-height: 42px;
	margin: 0.5em auto;
	padding-left: 40px;
	background: url("/images/food/heading2.gif") no-repeat;
	font-weight: bold;
}
#topicArea div#leftBox {
	float: left;
	width: 290px;
	padding-bottom: 25px;
}
#topicArea #leftBox p {
	margin: 1em 0 0 1em;
}
#topicArea div#rightBox {
	float: right;
	width:260px;
	padding-bottom: 25px;
}

#topicArea #recipe{
	background-color: #FFECFF;
	padding: 15px;
	margin-right: 10px;
	margin-left: 10px;
}

#topicArea #recipeLeft{
	display: inline;
	float: left;
	width: 180px;
}

#topicArea #recipeRight{
	display: inline;
	float: right;
	width: 308px;
	padding: 10px;
	border: 1px solid #FFCCFF;
	background-color: #FFFFFF;
}

#topicArea #recipeRight strong{
	color: #FF66CC;
}

#topicList li{
	margin-bottom: 1pc;
	padding-right: 1em;
	padding-bottom: 1em;
	padding-left: 1em;
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #CCCCCC;
	margin-right: 1em;
}


#topicList .listLeft{
	width: 71px;
	margin-right: 10px;
}

#topicList .listRight{
	width: 400px;
}


#infoList li{
	margin-bottom: 1pc;
	padding-right: 1em;
	padding-bottom: 1em;
	padding-left: 1em;
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #CCCCCC;
	margin-right: 1em;
}

#infoList .listLeft{
	width: 120px;
	margin-right: 10px;
}

#infoList .listRight{
	width: 320px;
}