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

	For SS concept file

	Last update : 2010.2.1
	mio urakami

	---------------------------
	1-0 structure
		1-1 common
		1-3 float clear
	2-0 visual setting
		2-1 リード文（共通）
		2-1 配合成分トップページ
			2-1-1 小見出し
			2-1-2 ページ内リンクナビ
			2-1-3 成分一覧エリア
		2-2 配合成分詳細ページ
			2-2-1　リード文エリア
			2-2-2　詳細エリア
			2-2-3　テーブルの設定
		2-3 会社概要ページ
  --------------------------------------------*/


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

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

.ingredientindex #indexlistarea .block h3{
	float:left;
	width:110px;
}

.ingredientindex #indexlistarea .block ul{
	float:right;
	width:525px;
}

.ingredientmore #block01 p.photo{
	float:left;
}


/* --------------------------------------------
  1-4 float clear
---------------------------------------------*/

.ingredientindex #contents #indexlistarea, .ingredientindex #indexlistarea .block, .ingredientmore #contents h2, .ingredientmore #block02{
	clear:both;
}


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

/* --------------------------------------------
  2-1 リード文（共通）
---------------------------------------------*/

#contents .lead02{
	width:686px;
	padding-left:14px;
}

#contents .lead02 p{
	margin:1.5em 0;
	font-size:117%;
	line-height:1.8;
}

.ingredientindex #contents .lead02 p{
	margin-top:0.5em;
}


/* --------------------------------------------
  2-1 配合成分トップページ
---------------------------------------------*/

/* ----------------------------
  2-1-1 小見出し
------------------------------*/

.ingredientindex #contents h2{
	padding:12px 16px;
	background:url("/img/common/ttl_back_basic694.gif") no-repeat 0 0;
	color:#fff;
	font-size:117%;
}

/* ----------------------------
  2-1-2 ページ内リンクナビ
------------------------------*/

.ingredientindex #contents ul.guidelink{
	margin:24px 0 0 52px;
	list-style:none;
}

.ingredientindex #contents ul.guidelink li{
	float:left;
	width:36px;
	margin-right:10px;
	background:#f8f1e2;
	border:1px solid #dad2d0;
	font-size:117%;
	text-align:center;
}

.ingredientindex #contents ul.guidelink li a{
	display:block;
	width:36px;
	padding:8px 0;
}

.ingredientindex #contents ul.guidelink li.eng, .ingredientindex #contents ul.guidelink li.num,.ingredientindex #contents ul.guidelink li.eng a, .ingredientindex #contents ul.guidelink li.num a{
	width:46px;
}


/* ----------------------------
  2-1-3 成分一覧エリア
------------------------------*/

.ingredientindex #contents #indexlistarea{
	width:673px;
	padding:25px 0 0 11px;
}

.ingredientindex #indexlistarea .block{
	padding-top:13px;
	border-top:1px solid #dad2d0;
}

.ingredientindex #indexlistarea .block h3 img{
	margin:0 0 20px 9px;
}

.ingredientindex #indexlistarea .block ul{
	padding-bottom:20px;
	list-style:none;
}

.ingredientindex #indexlistarea .block li{
	margin:0.2em 2em 0.8em 0;
	padding-left:10px;
	background:url("/img/common/arw01_grey.gif") no-repeat 0 center;
	line-height:1.34;
}

/* --------------------------------------------
  2-2 配合成分詳細ページ 石けんの豆知識ページ
---------------------------------------------*/

/*タイトル周り*/
.ingredientmore #titlearea02{
	padding:38px 0;
	border:3px double #c5a073;
	background:#fff;
	text-align:center;
}

.ingredientmore #topicpath{
	padding:19px 11px 28px 11px;
}


/* ----------------------------
  2-2-1　リード文エリア
------------------------------*/

.ingredientmore #block01{
	width:681px;
	margin:30px 0 0 11px;
}

.ingredientmore #block01 p{
	margin-bottom:1.5em;
	font-size:117%;
	line-height:1.8;
}

.ingredientmore #contents p.photo{
	margin-right:30px;
	font-size:100%;
	line-height:1;
}

/* ----------------------------
  2-2-2　詳細エリア
------------------------------*/

.ingredientmore #contents h2, .trivia #contents h2{
	margin-top:2.5em;
	margin-bottom:20px;
	padding:12px 16px;
	background:url("/img/common/ttl_back_basic694.gif") no-repeat 0 0;
	color:#fff;
	font-size:117%;
}

.ingredientmore #contents h3, .trivia #contents h3{
	margin:2.5em 0 1.5em 11px;
	font-size:117%;
	font-weight:bold;
}

.ingredientmore #block02, .trivia #block02{
	width:694px;
}

.ingredientmore #block02 p, .trivia #block02 p{
	margin:5px 11px 1.5em 11px;
	font-size:117%;
	line-height:1.8;
}

.ingredientmore #block02 p.note{
	margin:10px 11px 1.5em 11px;
	font-size:100%;
	line-height:1.6;
}

/* ----------------------------
  2-2-3　テーブルの設定
------------------------------*/

.ingredientmore #block02 table{
	margin-left:11px;
	width:669px;
	border-top:1px solid #cfbea9;
	border-left:1px solid #cfbea9;
}

.ingredientmore #block02 table th, .ingredientmore #block02 table td{
	padding:5px;
	border-right:1px solid #cfbea9;
	border-bottom:1px solid #cfbea9;
	line-height:1.5;
}

.ingredientmore #block02 table th{
	background:#fff;
	font-weight:bold;
}

.ingredientmore #block02 table th.col{
	background:#ede9e6;
}

.ingredientmore #block02 th.name{
	width:25%;

}

.ingredientmore #block02 th.explain{
	width:55%;
}

.ingredientmore #block02 th.explain02{
	width:35%;
}


.ingredientmore #block02 table td{
	background:#fff;
}

/* --------------------------------------------
  2-3 会社概要ページ
---------------------------------------------*/

.company #contents table{
	width:698px;
	margin-top:27px;
}

.company #contents table{
	border-top:1px solid #dad2d0;
}

.company #contents tr{
	border-bottom:1px solid #dad2d0;
}

.company #contents th, .company #contents td{
	padding:13px 9px;
	font-size:117%;
	line-height:1.6;
}

.company #contents th{
	width:25%;
	font-weight:bold;
	vertical-align:top;
}

.company #contents td p{
	margin-bottom:1em;
	font-size:86%;
	line-height:1.5;
}

.company #contents td h2{
	margin-top:5px;
	padding-bottom:0.6em;
	font-weight:bold;
}

.company #contents td ul{
	list-style:none;
}

.company #contents td li{
	margin-bottom:1em;
	padding-left:12px;
	background:url("/img/common/arw01_grey.gif") no-repeat 0 7px;
	line-height:1.5;
}



/* --------------------------------------------
  2-4 石けんの豆知識ページ
---------------------------------------------*/


/* ----------------------------
  2-4-1　テーブルの設定
------------------------------*/

.trivia #block02 table{
	margin-left:11px;
	width:669px;
	border-top:1px solid #cfbea9;
	border-left:1px solid #cfbea9;
}

.trivia #block02 table th, .trivia #block02 table td{
	padding:5px;
	border-right:1px solid #cfbea9;
	border-bottom:1px solid #cfbea9;
	line-height:1.5;
}

.trivia #block02 table th{
	background:#fff;
	font-weight:bold;
}

.trivia #block02 table th.col{
	background:#ede9e6;
}

.trivia #block02 th.name{
	width:25%;

}

.trivia #block02 th.explain{
	width:55%;
}

.trivia #block02 th.explain02{
	width:35%;
}


.trivia #block02 table td{
	background:#fff;
}


/* ----------------------------
  2-4-2 本文エリア
------------------------------*/


.trivia #block02 div.note{
	color:#1184be;
}

.trivia #block02 div.note h4{
	margin:2.5em 0 0.5em 11px;
	font-size:100%;
	font-weight:bold;
}


.trivia #block02 div.note p{
	margin:10px 11px 1.5em 11px;
	font-size:100%;
	line-height:1.6;
}