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

	For all file

	Last update : 2010.7.1
	mio urakami

	---------------------------
	1-0 structure
		1-1 common
		1-2 how to
		1-3 float clear

	2-0 visual setting
		2-1 common
		2-2 dataarea common
		2-3 News
		2-4 Items
		2-5 Q&A
		2-6 dataarea banner
		2-7 How to
			2-7-1 pickup
			2-7-2 block common
			2-7-3 block h3
			2-7-4 block banner
		2-8 Knowledgearea common
		2-9 Beginner
		2-10 Knowledge
--------------------------------------------*/


/*----------------------------------------------------------------
1-0 structure
-----------------------------------------------------------------*/

/* --------------------------------------------
1-1 common
---------------------------------------------*/

#dataarea{
	float:left;
	width:194px;
	margin:21px 9px 0 0;
}

#howtoarea{
	float:left;
	width:491px;
	margin-top:19px;
}

#knowledgearea{
	float:right;
	width:247px;
	margin-top:19px;
}


/* --------------------------------------------
1-2 how to
---------------------------------------------*/

#howtoarea #pickup{
	width:491px;
	margin:10px 0 0 0;
}

#howtoarea #pickup h3{
	float:left;
	width:171px;
	text-align:right;
	padding-bottom:10px;
}

#howtoarea #pickup .textblock{
	padding-left:185px;
}

#howtoarea .block01{
	float:left;
	width:240px;
}

#howtoarea .block02{
	float:right;
	width:240px;
}

#howtoarea .block .banner p.ban{
	float:left;
	width:95px;
}

#howtoarea .block .banner p.bantext{
	float:right;
	width:128px;
}

/* --------------------------------------------
1-3 float clear
---------------------------------------------*/

#howtoarea .block01, #howtoarea .block01, #howtoarea .block, #howtoarea .block .banner{
	clear:both;
}

/*----------------------------------------------------------------
2-0 visual setting
-----------------------------------------------------------------*/

/* --------------------------------------------
2-1 common
---------------------------------------------*/

a:link{
	color:#000;
	text-decoration:none;
}

a:visited{
	color:#666;
	text-decoration:none;
}

a:hover{
	color:#f36;
	text-decoration:underline;
}

ul{
	list-style:none;
}

.more a:link{
	color:#017669;
}

.more a:visited{
	color:#666;
}

.more a:hover{
	color:#f36;
}

#contents li{
	line-height:1.34;
}

/*---------------------------------------------
2-2 dataarea common
----------------------------------------------*/

#dataarea .more{
	margin:8px 3px 0 0;
	padding-left:90px;
	font-size:92%;
}

#dataarea .more a{
	display:block;
	width:90px;
	padding:5px 8px 5px 0;
	text-align:right;
}

/* hack for IE6 - 20091119 */
* html #dataarea .more a{
	width:98px;
}

#dataarea ul{
	margin:1em 5px 0.5em 5px;
}

#dataarea li{
	margin:0.7em 0;
	padding-left:6px;
}


/*---------------------------------------------
2-3 News
----------------------------------------------*/

#news h2{
	padding:7px 9px 12px 0;
	background:url("/imgj/index/ttl_back_news.gif") no-repeat left top;
	color:#555;
	text-align:right;
	font-size:80%;
}

#news li{
	background:url("/imgj/common/arw03_grey.gif") no-repeat 0 6px;
}

#news .more a{
	background:url("/imgj/common/arw02_grey.gif") no-repeat right center;
}


/*---------------------------------------------
2-4 Items
----------------------------------------------*/

#items{
	margin-bottom:17px;
	padding-bottom:5px;
	background:#e4f4e8 url("/imgj/index/foot_item.gif") no-repeat left bottom;
}

#items h2{
	padding:8px 6px 12px 0;
	background:url("/imgj/index/ttl_back_item.gif") no-repeat left top;
	color:#555;
	text-align:right;
	font-size:80%;
}

#items li{
	padding-left:19px;
	background:url("/imgj/index/icon_item.gif") no-repeat 5px 2px;
}

#items .more{
	padding-left:86px;
}

#items .more a{
	background:url("/imgj/index/arw02_item.gif") no-repeat right center;
}

/*---------------------------------------------
2-5 Q&A
----------------------------------------------*/

#faq{
	margin-bottom:17px;
	padding-bottom:5px;
	background:#ede8db url("/imgj/index/foot_faq.gif") no-repeat left bottom;
}

#faq h2{
	padding:8px 6px 12px 0;
	background:url("/imgj/index/ttl_back_faq.gif") no-repeat left top;
	color:#555;
	text-align:right;
	font-size:80%;
}

#faq li{
	padding-left:19px;
	background:url("/imgj/index/icon_faq.gif") no-repeat 5px 2px;
}

#faq .more{
	padding-left:86px;
}

#faq .more a{
	background:url("/imgj/index/arw02_faq.gif") no-repeat right center;
}

/*---------------------------------------------
2-6 dataarea banner
----------------------------------------------*/

#dataarea .banner{
	margin:15px 0;
}

#dataarea .banner h2{
	font-size:92%;
}

#dataarea .banner h2 img{
	margin-bottom:7px;
}

#dataarea .banner h2 img.newwin{
	margin-bottom:0;
}

#dataarea .banner p{
	margin-top:7px;
	font-size:80%;
	line-height:1.5;
}

/* --------------------------------------------
2-7 How to
----------------------------------------------*/

#howtoarea h2{
	padding:7px 9px 12px 0;
	background:url("/imgj/index/ttl_back_topics.gif") no-repeat left top;
	text-align:right;
}

#howtoarea .more{
	margin:0.5em 3px 5px 128px;
}

#howtoarea .more a{
	display:block;
	width:90px;
	padding:4px 16px 4px 0;
	background:url("/imgj/common/arw01_green.gif") no-repeat right center;
	text-align:right;
	font-size:92%;
}

/* ----------------------------
2-7-1 pickup
------------------------------*/

#howtoarea #pickup{
	padding-bottom:10px;
	background:url("/imgj/index/line_howto01.jpg") no-repeat left bottom;
}


/*リード文*/
#howtoarea #pickup .lead{
	padding:4px 0 8px 0;
	background:url("/imgj/index/line_pickup.gif") no-repeat left bottom;
	font-size:117%;
	line-height:1.6;
}


/*更新日付*/
#howtoarea #pickup .date{
	margin-left:16px;
	font-size:75%;
	color:#09f;
}

#howtoarea #pickup ul{
	margin:1.4em 15px 0.5em 2px;
}

#howtoarea #pickup li{
	margin:0.7em 0;
	padding-left:8px;
	background:url("/imgj/common/arw03_grey.gif") no-repeat 0 4px;
}

#howtoarea #pickup .more{
	margin-left:193px;
}


/* ----------------------------
2-7-2 block common
------------------------------*/

#howtoarea .block{
	position:relative;
	background:url("/imgj/index/line_howto02.jpg") no-repeat left bottom;
	padding-top:6px;
	padding-bottom:12px;
}

#howtoarea .block ul{
	margin:1em 15px 0.5em 8px;
}

#howtoarea .block li{
	margin:0.7em 0;
	padding-left:8px;
	background:url("/imgj/common/arw03_brown.gif") no-repeat 0 4px;
}

/* ----------------------------
2-7-3 block h3
------------------------------*/

#howtoarea .block h3{
	font-size:117%;
	line-height:1.17;
}

#howtoarea .block h3 a{
	display:block;
	width:135px;
	padding:1.05em 100px 1.35em 5px;
}

/*hack for IE6 - 20091119 */
* html #howtoarea .block h3 a{
	width:240px;
	padding:0.75em 100px 1.65em 5px;
}

/*タイトルが1行のケース*/
#howtoarea .block h3.line01 a{
	display:block;
	width:135px;
	padding:1.6em 100px 1.9em 5px;
}

/*hack for IE6 - 20091119 */
* html #howtoarea .block h3.line01 a{
	width:240px;
	padding:1.3em 100px 2.2em 5px;
}

/*ピンク矢印位置調整*/
#howtoarea .block .arw01{
	position:relative;
	bottom:4px;
	left:6px;
}

/*hack for IE6 - 20091119 */
* html #howtoarea .block .arw01{
	bottom:-3px;
}

#howtoarea #laundry h3{
	background:url("/imgj/index/ttl_laundry.gif") no-repeat left top;
}

#howtoarea #nunonapu h3{
	background:url("/imgj/index/ttl_nunonapu.gif") no-repeat left top;
}

#howtoarea #idea h3{
	background:url("/imgj/index/ttl_idea.gif") no-repeat left top;
}

#howtoarea #pet h3{
	background:url("/imgj/index/ttl_pet.gif") no-repeat left top;
}

#howtoarea #clean h3{
	background:url("/imgj/index/ttl_clean.gif") no-repeat left top;
}

#howtoarea #kitchen h3{
	background:url("/imgj/index/ttl_kitchen.gif") no-repeat left top;
}

#howtoarea #bath h3{
	background:url("/imgj/index/ttl_bath.gif") no-repeat left top;
}

/* ----------------------------
2-7-4 block banner
------------------------------*/

#howtoarea .block .banner{
	padding:8px 5px;
	background:url("/imgj/index/line_howto03.gif") no-repeat left top;
}

#howtoarea .block .banner p{
	padding:4px 0;
	font-size:86%;
	line-height:1.5;
}

/* --------------------------------------------
2-8 Knowledgearea common
----------------------------------------------*/

/* add - 20091119 */
#knowledgearea{
	padding-bottom:5px;
	background:url("/imgj/index/foot_knowledge.gif") no-repeat center bottom;
}

#knowledgearea .headblock{
	padding:10px 11px 13px 67px;
}

#knowledgearea h2{
	text-align:right;
}

#knowledgearea .lead{
	margin:14px 0 0 0;
	font-size:84%;
	line-height:1.5;
}

#knowledgearea ul{
	margin:1em 15px 0.5em 12px;
}

#knowledgearea li{
	margin:0.7em 0;
	padding-left:12px;
}

/* --------------------------------------------
2-9 Beginner
----------------------------------------------*/

#beginner{
	background:url("/imgj/index/back_beginner.gif") repeat-y left top;
}

#beginner .headblock{
	background:url("/imgj/index/ttl_back_beginner.gif") no-repeat left top;
}

#beginner li{
	background:url("/imgj/index/icon_flower_pink.gif") no-repeat 0 3px;
}

#beginner .more{
	padding:0.5em 3px 5px 131px;
	background:url("/imgj/index/foot_beginner.gif") no-repeat left bottom;
}

#beginner .more a{
	display:block;
	width:90px;
	padding:4px 16px 4px 0;
	background:url("/imgj/index/arw01_beginner.gif") no-repeat right center;
	text-align:right;
	font-size:92%;
}

/*hack for IE6 - 20091119 */
* html #beginner .more a{
	width:106px;
}


/* --------------------------------------------
2-10 Knowledge
----------------------------------------------*/

#knowledge{
	margin-top:10px;
	background:url("/imgj/index/back_knowledge.gif") repeat-y left top;
}

#knowledge .headblock{
	background:url("/imgj/index/ttl_back_knowledge.gif") no-repeat left top;
}

#knowledge h3{
	margin:0 9px 0 9px;
	padding:8px 10px 5px 14px;
	background:url("/imgj/common/icon_dot.jpg") no-repeat 0 8px;
	border-top:1px solid #e3dbcf;
	font-weight:bold;
}

#knowledge ul{
	margin:0 15px 0 13px;
}

#knowledge li{
	padding-left:8px;
	background:url("/imgj/index/arw_knowledge.gif") no-repeat 0 3px;
	font-size:92%;
}

#knowledge .more{
	padding:0 3px 0 135px;
	font-size:92%;
}

#knowledge .more a{
	display:block;
	width:90px;
	padding:5px 8px 5px 0;
	background:url("/imgj/index/arw02_knowledge.gif") no-repeat right center;
	text-align:right;
}

/* hack for IE6 - 20091119 */
* html #knowledge .more a{
	width:98px;
}