@charset "utf-8";


/*
--------------------------------------------
茶のしずく石鹸とは共通設定
--------------------------------------------
*/

sup {
	font-size: 0.8em;
}

#visual {/* 茶のしずく石鹸とは同一階層ページのビジュアル */
	height: 220px;
	background: url(../images/visual_about.jpg) no-repeat;
}
#sidenavi ul {/* 茶のしずく石鹸とは同一階層ページのサイドナビ */
	height: 120px;
	background: url(../images/about_sidenavi.gif) no-repeat;
	text-indent: -9999px;
}
.sidenavi_about {/* サイドナビ茶のしずく石鹸とは */
	display: block;
	width: 200px;
	height: 30px;
}
.sidenavi_about:hover {/* サイドナビ茶のしずく石鹸とはロールオーバー */
	background: url(../images/about_sidenavi.gif) no-repeat -200px 0px;
}
.sidenavi_bubble {/* サイドナビ泡について */
	display: block;
	width: 200px;
	height: 30px;
}
.sidenavi_bubble:hover {/* サイドナビ泡についてロールオーバー */
	background: url(../images/about_sidenavi.gif) no-repeat -200px -30px;
}
.sidenavi_ingredient {/* サイドナビ天然成分 */
	display: block;
	width: 200px;
	height: 30px;
}
.sidenavi_ingredient:hover {/* サイドナビ天然成分ロールオーバー */
	background: url(../images/about_sidenavi.gif) no-repeat -200px -60px;
}
.sidenavi_sales_results {/* サイドナビ販売実績について */
	display: block;
	width: 200px;
	height: 30px;
}
.sidenavi_sales_results:hover {/* サイドナビ販売実績についてロールオーバー */
	background: url(../images/about_sidenavi.gif) no-repeat -200px -90px;
}



/*
--------------------------------------------
茶のしずく石鹸とはトップページ
--------------------------------------------
*/
#about {/* 茶のしずく石鹸とは｜大見出し */
	background: url(../images/about_h.gif) no-repeat;
}
#about_entry01 {/* 大切な肌だから～のボックス */
	width: 540px;
	float: left;
	margin-bottom: 30px;
}
#about_midashi01 {/* 大切な肌だから～の小見出し */
	width: 540px;
	height: 44px;
	float: left;
	background: url(../images/about_midashi01.gif) no-repeat;
	text-indent: -9999px;
	margin-bottom: 10px;
}
#about_entry01 .image {/* 大切な肌だから～の画像 */
	float: left;
	width: 200px;
	height: 220px;
}
#about_entry01 p {/* 大切な肌だから～のテキスト */
	display: inline;
	width: 320px;
	float: left;
	margin-left: 20px;
}


#about_entry02 {/* カテキンたっぷりの二番茶～のボックス */
	width: 540px;
	float: left;
	margin-bottom: 30px;
}
#about_midashi02 {/* カテキンたっぷりの二番茶～の小見出し */
	width: 540px;
	height: 26px;
	float: left;
	background: url(../images/about_midashi02.gif) no-repeat;
	text-indent: -9999px;
	margin-bottom: 10px;
}
#about_entry02 .image {/*カテキンたっぷりの二番茶～の画像 */
	float: left;
	width: 180px;
	height: 140px;
}
#about_entry02 p {/* カテキンたっぷりの二番茶～のテキスト */
	display: inline;
	width: 340px;
	float: left;
	margin-left: 20px;
}


#about_entry03 {/* 生クリームのような～のボックス */
	width: 540px;
	float: left;
	margin-bottom: 30px;
}
#about_midashi03 {/* 生クリームのような～の小見出し */
	width: 540px;
	height: 44px;
	float: left;
	background: url(../images/about_midashi03.gif) no-repeat;
	text-indent: -9999px;
	margin-bottom: 10px;
}
#about_entry03 p {/* 生クリームのような～のテキスト */
	display: inline;
	width: 340px;
	float: left;
}
#about_entry03 .image {/* 生クリームのような～の画像 */
	float: left;
	width: 180px;
	height: 140px;
	margin-left: 20px;
}
.about_btn01 {/* 泡についてへのリンクボタン */
	display: block;
	width: 163px;
	height: 33px;
	background: url(../images/about_btn01.gif) no-repeat;
}
.about_btn01:hover {/* 泡についてへのリンクボタンロールオーバー */
	background: url(../images/about_btn01.gif) no-repeat 0px -33px;
}


/*
--------------------------------------------
泡について
--------------------------------------------
*/
#bubble {/* 泡について｜大見出し */
	background: url(../images/bubble_h.gif) no-repeat;
}
#bubble_entry01 {/* 泡に弾力が必要な理由～ボックス */
	width: 540px;
	float: left;
	margin-bottom: 30px;
}
#bubble_midashi01 {/* 泡に弾力が必要な理由～小見出し */
	width: 540px;
	height: 26px;
	float: left;
	background: url(../images/bubble_midashi01.gif) no-repeat;
	text-indent: -9999px;
	margin-bottom: 10px;
}
#bubble_entry01 .image {/* 泡に弾力が必要な理由～画像 */
	float: left;
	width: 240px;
	height: 190px;
}
#bubble_entry01 p {/* 泡に弾力が必要な理由～テキスト */
	display: inline;
	width: 280px;
	float: left;
	margin-left: 20px;
}


#bubble_entry02 {/* 泡にきめ細かさと～ボックス */
	width: 540px;
	float: left;
	margin-bottom: 30px;
}
#bubble_midashi02 {/* 泡にきめ細かさと～小見出し */
	width: 540px;
	height: 44px;
	float: left;
	background: url(../images/bubble_midashi02.gif) no-repeat;
	text-indent: -9999px;
	margin-bottom: 10px;
}
#bubble_entry02 p {/* 泡にきめ細かさと～テキスト */
	display: inline;
	width: 340px;
	float: left;
}
#bubble_entry02 .image {/* 泡にきめ細かさと～画像 */
	float: left;
	width: 180px;
	height: 140px;
	margin-left: 20px;
}
#bubble_entry03 {/* 動画でチェック～ボックス */
	width: 540px;
	float: left;
	margin-bottom: 30px;
}
#bubble_midashi03 {/* 動画でチェック～小見出し */
	width: 540px;
	height: 26px;
	float: left;
	background: url(../images/bubble_midashi03.gif) no-repeat;
	text-indent: -9999px;
	margin-bottom: 10px;
}
#bubble_entry03 p {/* 動画でチェック～テキスト */
	display: inline;
	width: 540px;
	float: left;
}


.bubble_btn01 {/* 天然成分へのリンクボタン */
	display: block;
	width: 163px;
	height: 33px;
	background: url(../images/bubble_btn01.gif) no-repeat;
}
.bubble_btn01:hover {/* 天然成分へのリンクボタンロールオーバー */
	background: url(../images/bubble_btn01.gif) no-repeat 0px -33px;
}

#movie {
	width: 540px;
	float: left;
}
#movie a.movie_btn {
	display: block;
	width: 540px;
	height: 73px;
	background: url(../images/movie_btn.gif) no-repeat;
	text-indent: -9999px;
}
#movie a.movie_btn:hover {
	display: block;
	width: 540px;
	height: 73px;
	background: url(../images/movie_btn.gif) no-repeat 0px -73px;
	text-indent: -9999px;
}


/*
--------------------------------------------
自然の恵みたっぷり天然成分
--------------------------------------------
*/
#ingredient {/* 天然成分｜大見出し */
	background: url(../images/ingredient_h.gif) no-repeat;
}

.bihada,.hadaare,.hoshitsu,.seiki,.hikishime {/* 成分アイコン共通 */
	height: 22px;
	float: left;
	margin-left: 10px;
	text-indent: -9999px;
}
.bihada {/* 美肌成分アイコン */
	width: 140px;
	background: url(../images/ingredient_bihada.gif) no-repeat;
}
.hadaare {/* 肌荒れ防止アイコン */
	width: 120px;
	background: url(../images/ingredient_hadaare.gif) no-repeat;
}
.hoshitsu {/* 保湿アイコン */
	width: 120px;
	background: url(../images/ingredient_hoshitsu.gif) no-repeat;
}
.seiki {/* 整肌アイコン */
	width: 120px;
	background: url(../images/ingredient_seiki.gif) no-repeat;
}
.hikishime {/* 引きしめ成分アイコン */
	width: 120px;
	background: url(../images/ingredient_hikishime.gif) no-repeat;
}






#ingredient_cha {/* 茶エキスボックス */
	width: 540px;
	float: left;
	margin-bottom: 20px;
}
#ingredient_cha .image {/* 茶エキス画像 */
	float: left;
	width: 200px;
	height: 160px;
}
#ingredient_cha .text {/* 茶エキスのテキストボックス */
	width: 320px;
	float: left;
	margin-left: 20px;
}
#ingredient_cha h3 {/* 茶エキスの小見出し */
	float: left;
	font-size: 1em;
	font-weight: bold;
	color: #060;
	padding-left: 5px;
	border-left: 4px solid #060;
}

#ingredient_cha p {/* 茶エキスのテキスト */
	display: inline;
	width: 320px;
	float: left;
	margin-top: 10px;
}

#ingredient_glycyr,
#ingredient_kuro,
#ingredient_hohoba,
#ingredient_kamomira,
#ingredient_yukinoshita,
#ingredient_aloe,
#ingredient_ougon,
#ingredient_shea {/* グリチルリチン酸～シア脂までの基本ボックス */
	width: 540px;
	float: left;
	margin-bottom: 20px;
}
#ingredient_glycyr .image,
#ingredient_kuro .image,
#ingredient_hohoba .image,
#ingredient_kamomira .image,
#ingredient_yukinoshita .image,
#ingredient_aloe .image,
#ingredient_ougon .image,
#ingredient_shea .image {/* グリチルリチン酸～シア脂までの画像設定 */
	float: left;
	width: 160px;
	height: 120px;
}
#ingredient_glycyr .text,
#ingredient_kuro .text,
#ingredient_hohoba .text,
#ingredient_kamomira .text,
#ingredient_yukinoshita .text,
#ingredient_aloe .text,
#ingredient_ougon .text,
#ingredient_shea .text {/* グリチルリチン酸～シア脂までのテキストボックス */
	width: 360px;
	float: left;
	margin-left: 20px;
}
#ingredient_glycyr h3,
#ingredient_kuro h3,
#ingredient_hohoba h3,
#ingredient_kamomira h3,
#ingredient_yukinoshita h3,
#ingredient_aloe h3,
#ingredient_ougon h3,
#ingredient_shea h3 {/* 茶エキスの小見出し */
	float: left;
	font-size: 1em;
	font-weight: bold;
	color: #060;
	padding-left: 5px;
	border-left: 4px solid #060;
}

#ingredient_glycyr p,
#ingredient_kuro p,
#ingredient_hohoba p,
#ingredient_kamomira p,
#ingredient_yukinoshita p,
#ingredient_aloe p,
#ingredient_ougon p,
#ingredient_shea p {/* 茶エキスのテキスト */
	display: inline;
	width: 360px;
	float: left;
	margin-top: 10px;
}

#ingredient_h4 {/* 全成分表示見出し */
	width: 530px;
	float: left;
	font-size: 1em;
	padding-left: 5px;
	border-left: 4px solid #060;
	font-weight: bold;
	color: #060;
	line-height: 1.3em;
}
#ingredient_all {/* 全成分一覧 */
	width: 518px;
	padding: 10px;
	float: left;
	border: 1px dotted #060;
	margin: 10px 0px 20px 0px;
	color: #060;
}


.ingredient_btn01 {/* 販売実績についてへのリンクボタン */
	display: block;
	width: 203px;
	height: 33px;
	background: url(../images/ingredient_btn01.gif) no-repeat;
}
.ingredient_btn01:hover {/* 販売実績についてへのリンクボタンロールオーバー */
	background: url(../images/ingredient_btn01.gif) no-repeat 0px -33px;
}



/*
--------------------------------------------
販売実績についてページ
--------------------------------------------
*/
#sales_results {/* 販売実績について｜大見出し */
	background: url(../images/sales_results_h.gif) no-repeat;
}
#sales_results_entry01 {/* こだわりの品質が認められ～のボックス */
	width: 540px;
	float: left;
	margin-bottom: 30px;
}
#sales_results_midashi01 {/* こだわりの品質が認められ～の小見出し */
	width: 540px;
	height: 44px;
	float: left;
	background: url(../images/sales_results_midashi01.gif) no-repeat;
	text-indent: -9999px;
	margin-bottom: 10px;
}
#sales_results_entry01 p {/* こだわりの品質が認められ～のテキスト */
	display: inline;
	width: 330px;
	float: left;
}
#sales_results_entry01 .image {/* こだわりの品質が認められ～の画像 */
	float: left;
	width: 190px;
	height: 228px;
	margin-left: 20px;
}

.sales_results_btn01 {/* 幻の茶についてへのリンクボタン */
	display: block;
	width: 163px;
	height: 33px;
	background: url(../images/sales_results_btn01.gif) no-repeat;
}
.sales_results_btn01:hover {/* 幻の茶についてへのリンクボタンロールオーバー */
	background: url(../images/sales_results_btn01.gif) no-repeat 0px -33px;
}



.kome {
	font-size: 0.8em;
}