@charset "utf-8";
/*===================================================

	基本設定

====================================================*/

/*----------------------------------------------------
	ブラウザ初期設定のリセット
----------------------------------------------------*/
html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
	margin: 0;
	padding: 0;
}
body,td,th {
	font-size: 100%;
}
html,body {
}
html {
	overflow-y: scroll;
}
h1,h2,h3,h4,h5,h6 {
	font-size: 100%;
	font-weight: normal;
}
p {
	margin: 0 0 1em;
}
ol,ul {
	list-style: none;
}
fieldset,img {
	border: 0;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
caption,th {
	text-align: left;
}
address,caption,cite,code,dfn,em,th,var {
	font-style: normal;
}
img{
	vertical-align: bottom;
}

/*----------------------------------------------------
	#flash　トップページ用Flash
----------------------------------------------------*/
body#top_page {
	background-position: center 331px;
}
#flash {
	background: #00A1D5 url(../img/flash_bg.jpg) repeat-y center;
	text-align: center;
}

/*----------------------------------------------------
	基礎設定
----------------------------------------------------*/
html {
	background: #00A0E8;
}
body {
	background: #FFF url(../img/bg.jpg) repeat-x top;
	float: left;
	width: 100%;
	font-size: 12px;
	line-height: 1.5em;
}
.left {
	float: left;
	margin: 0 10px 10px 0;
}
.imgR {
	float: right;
	margin: 0 0 10px 10px;
}
.imgL {
	float: left;
	margin: 0 10px 10px 0;
}

/*----------------------------------------------------
	#header　ヘッダー
----------------------------------------------------*/
#header {
	background: url(../img/hed.jpg) no-repeat;
	margin: 0 auto;
	width: 960px;
	height: 90px;
	padding-top: 10px;
}

#header div#logo {
	width: 280px;
	float: left;
}
#header div#logo a {
	text-indent: -9999px;
	display: block;
	width: 280px;
	height: 75px;
}

#header #main_nav { /* メインナビゲーション */
	width: 680px;
	height: 75px;
	float: left;
}
#header #main_nav li {
	width: 75px;
	height: 75px;
	float: left;
	padding-left: 25px;
}
#header #main_nav li.water { width: 120px; }
#header #main_nav li.server { width: 180px; padding-right: 25px; }

#header #main_nav li a {
	background-image: url(../img/main_nav.gif);
	text-indent: -9999px;
	display: block;
	width: 75px;
	height: 75px;
}

#header #main_nav li.water a { width: 120px; background-position: 0 top;}
#header #main_nav li.server a { width: 180px; background-position: -120px top;}
#header #main_nav li.voice a { background-position: -300px top;}
#header #main_nav li.partner a { background-position: -375px top;}
#header #main_nav li.corporate a { background-position: -450px top;}

#header #main_nav li.water a:hover { background-position: 0 bottom;}
#header #main_nav li.server a:hover { background-position: -120px bottom;}
#header #main_nav li.voice a:hover { background-position: -300px bottom;}
#header #main_nav li.partner a:hover { background-position: -375px bottom;}
#header #main_nav li.corporate a:hover { background-position: -450px bottom;}


/*----------------------------------------------------
	#dwc_main_content　メインコンテンツ
----------------------------------------------------*/
#dwc_main_content {
	margin: 0 auto;
	width: 960px;
}

	/*----------------------------------------------------
		#container　メイン要素
	----------------------------------------------------*/
	#container {
		float: right;
		width: 750px;
		background: #FFF url(../img/container_hed.jpg) no-repeat center top;
	}
	#container h1 {
		text-indent: -9999px;
		display: block;
		height: 80px;
		width: 748px;
		margin: 10px 1px;
	}
	#container h1#h1_water { background: url(../img/h1_water.gif); }
	#container h1#h1_yume1 { background: url(../img/h1_yume1.gif); }
	#container h1#h1_yume2 { background: url(../img/h1_yume2.gif); }
	#container h1#h1_vana { background: url(../img/h1_vana.gif); }
	#container h1#h1_hita { background: url(../img/h1_hita.gif); }
	#container h1#h1_campaign { background: url(../img/h1_campaign.gif); }
	#container h1#h1_cooking { background: url(../img/h1_cooking.gif); }
	#container h1#h1_pet { background: url(../img/h1_pet.gif); }
	#container h1#h1_server { background: url(../img/h1_server.gif); }
	#container h1#h1_safety { background: url(../img/h1_safety.gif); }
	#container h1#h1_holder { background: url(../img/h1_holder.gif); }
	#container h1#h1_framework { background: url(../img/h1_framework.gif); }
	#container h1#h1_entry { background: url(../img/h1_entry.gif); }
	#container h1#h1_partner { background: url(../img/h1_partner.gif); }
	#container h1#h1_corporate { background: url(../img/h1_corporate.gif); }
	#container h1#h1_voice { background: url(../img/h1_voice.gif); }
	#container h1#h1_policy { background: url(../img/h1_policy.gif); }
	#container h1#h1_sitemap { background: url(../img/h1_sitemap.gif); }
	#container h1#h1_faq { background: url(../img/h1_faq.gif); }
	#container h1#h1_point { background: url(../img/h1_point.gif); }
	#container h1#h1_termsofuse { background: url(../img/h1_termsofuse.gif); }
	#container h1#h1_reorder { background: url(../img/h1_reorder.gif); }
	#container h1#h1_trivia1 { background: url(../img/h1_trivia1.gif); }
	#container h1#h1_trivia2 { background: url(../img/h1_trivia2.gif); }

	#container div.data {
		padding: 0 14px 10px;
		border-right: 1px solid #EEE;
		border-bottom: 1px solid #EEE;
		border-left: 1px solid #EEE;
		margin-bottom: 10px;
		float: left;
		width: 720px;
	}
	
	#container div.data h2 {
		background: #FFF url(../img/h2_bg.jpg) no-repeat center top;
		line-height: 40px;
		padding-left: 20px;
		font-size: 18px;
		font-weight: bold;
		color: #FFF;
		margin-top: 10px;
		margin-bottom: 10px;
		clear: both;
	}
	#container div.data h2.server_logo {
		background: #FFF url(../img/h2_bg_server.jpg) no-repeat center top;
	}
	
	#container div.data h3 {
		color: #06F;
		font-size: 16px;
		font-weight: bold;
		line-height: 2em;
	}
	
	#container div.data table.line {
		width: 100%;
	}
	
	#container div.data table.line th,
	#container div.data table.line td {
		padding: 2px 10px;
		border: 1px solid #CCC;
		vertical-align: top;
	}
	
	#container div.data #page_top {
		clear: both;
		margin-top: 10px;
		padding: 10px 0 10px 550px;
		border-top: 1px dotted  #00A0E8;
	}
	#container div.data #page_top a {
		background: #00A0E8;
		color: #FFF;
		width: 170px;
		padding: .5em 1em;
	}
	
	/* 選べる３種類の100%天然水 */
	
	#container div.data ul#water {
		height: 740px;
	}
	#container div.data ul#water li {
		width: 340px;
		height: 350px;
		padding: 10px 10px 20px;
		float: left;
	}
	#container div.data ul#water li a {
		background-image: url(../img/water1.jpg);
		text-indent: -9999px;
		width: 340px;
		height: 340px;
		display: block;
	}
		#container div.data ul#water li#water-yume1 a { background-position: 0 0; }
		#container div.data ul#water li#water-yume2 a { background-position: 0 -340px; }
		#container div.data ul#water li#water-vana a { background-position: 0 -680px; height: 360px; }
		#container div.data ul#water li#water-hita a { background-position: 0 -1040px; height: 360px; }
		#container div.data ul#water li#water-yume1 a:hover { background-position: right 0; }
		#container div.data ul#water li#water-yume2 a:hover { background-position: right -340px; }
		#container div.data ul#water li#water-vana a:hover { background-position: right -680px; }
		#container div.data ul#water li#water-hita a:hover { background-position: right -1040px; }
	
	/* オンラインショップと他の天然水へのリンク */
	
	#container div.data #water-link {
		border-top: 1px solid #CCC;
		margin-bottom: 10px;
	}
	#container div.data #water-link tr {
		border-bottom: 1px solid #CCC;
	}
	#container div.data #water-link td#water-list a {
		background-image: url(../img/water-link-3.gif);
		text-indent: -9999px;
		display: block;
		height: 30px;
		width: 177px;
		float: left;
		margin: 4px 4px 4px 0;
	}
		#container div.data #water-link td#water-list a#yume1 { background-position: 0 0; }
		#container div.data #water-link td#water-list a#yume2 { background-position: -177px 0; }
		#container div.data #water-link td#water-list a#vana { background-position: -354px 0; }
		#container div.data #water-link td#water-list a#hita { background-position: -531px 0; margin-right:0; }
		
		#container div.data #water-link td#water-list a:hover#yume1 { background-position: 0 bottom; }
		#container div.data #water-link td#water-list a:hover#yume2 { background-position: -177px bottom; }
		#container div.data #water-link td#water-list a:hover#vana { background-position: -354px bottom; }
		#container div.data #water-link td#water-list a:hover#hita { background-position: -531px bottom; } 
	
	#container div.data a#shop_link {
		background-image: url(../img/water-link-2.jpg);
		text-indent: -9999px;
		display: block;
		height: 58px;
		width: 276px;
	}
	#container div.data a:hover#shop_link {
		background-position: bottom;
	}
	
	/* 注意書き */
	
	#container div.data #note {
		background: #EFEFEF;
		padding: 1em;
		margin-bottom: 10px;
	}
	#container div.data #note li {
		padding-bottom: .5em;
		margin-left: 1em;
		list-style-type: disc;
	}
	
	/* ２カラムテーブル */
	
	#container div.data table#two_column td {
		padding: 0 10px 10px 0;
		vertical-align: top;
	}
	#container div.data table#two_column td.right {
		padding: 0 0 10px 10px;
	}
	#container div.data table#two_column td h2 {
		background: #FFF url(../img/h2_bg_mini.jpg) no-repeat center top;
	}
	
	/* ドリームウォーターは、経済的です */
	
	#container div.data #bottom_link {
		background: url(../img/bottom_link_bg.gif);
		float: left;
		padding: 0 15px 15px 0;
		margin: 10px 0;
	}
	#container div.data #bottom_link li {
		width: 220px;
		height: 250px;
		padding: 15px 0 0 15px;
		float: left;
	}
	#container div.data #bottom_link li a {
		background: url(../img/bottom_link.jpg);
		width: 220px;
		height: 250px;
		text-indent: -9999px;
		display: block;
	}
		#container div.data #bottom_link li#water a { background-position: 0 0; }
		#container div.data #bottom_link li#server a { background-position: -220px 0; }
		#container div.data #bottom_link li#holder a { background-position: -440px 0; }
		#container div.data #bottom_link li#water a:hover { background-position: 0 bottom; }
		#container div.data #bottom_link li#server a:hover { background-position: -220px bottom; }
		#container div.data #bottom_link li#holder a:hover { background-position: -440px bottom; }

	#container div.data a#shop_bottom_link {
		background-image: url(../img/water-link-1.jpg);
		text-indent: -9999px;
		display: block;
		height: 77px;
		width: 720px;
		float: left;
		margin-bottom: 10px;
	}
	#container div.data a:hover#shop_bottom_link {
		background-position: bottom;
	}
	
	/* お料理にも使えます */
	
	#container div.data h2.cooking {
		background: #AC4E40;
		line-height: 1.2em;
		border-left: 20px solid #D27B61;
		padding: .5em 0 .5em 20px;
	}
	#container div.data h2.cooking strong {
		font-size: 26px;
	}
	
	/* お客様の声 */
	
	#container div.data #voice {
		padding: 10px 0;
	}
	#container div.data #voice div {
		background: url(../img/user.jpg) no-repeat left top;
		min-height: 60px;
		font-size: 18px;
		line-height: 1.5em;
		padding: 0 0 5px 50px;
		border-bottom: 1px dotted #00A0E8;
		margin-top: 5px;
	}
	#container div.data #voice div span {
		font-size: 14px;
		color: #999;
		line-height: 1.2em;
	}
	#container div.data #voice div strong {
		color: #06F;
	}
	
	/* サーバー設置方法 */
		
	#container div.data tabel#framework {
		width: 100%;
	}
	
	#container div.data table#framework th {
		background-color: #D7EDFB;
		text-align: center;
		vertical-align: bottom;
		border: 1px solid #D7EDFB;
	}
	#container div.data table#framework td {
		vertical-align: top;
		border: 1px solid #D7EDFB;
		padding: .5em;
	}
	
	/* お申し込み方法 選択 */
	
	#container div.data #entry {
		background: url(../img/entry-1.gif);
		height: 277px;
		padding: 53px 0 0 107px;
	}
	#container div.data #entry a {
		text-indent: -9999px;
		display: block;
		float: left;
	}
	#container div.data #entry a:hover {
		background-image: url(../img/entry-1_over.gif);
	}
		#container div.data #entry a#yume1 { width: 46px; height: 60px; margin-right: 20px; }
		#container div.data #entry a#yume2 { width: 46px; height: 60px; margin-right: 20px; }
		#container div.data #entry a#vana { width: 46px; height: 60px; margin-right: 20px; }
		#container div.data #entry a#hita { width: 46px; height: 60px; margin-right: 20px; }
		#container div.data #entry a:hover#yume1 { background-position: 0 0;}
		#container div.data #entry a:hover#yume2 { background-position: -46px 0;}
		#container div.data #entry a:hover#vana { background-position: -92px 0;}
		#container div.data #entry a:hover#hita { background-position: -138px 0;}
	
	/* 個人情報保護方針 */
	
	#container div.data ol.number {
		list-style-position: outside;
		list-style-type: decimal;
		padding-left: 2em;
		margin-top: 20px;
	}
	#container div.data ol.number li {
		padding-bottom: 1em;
	}
	#container div.data ol.number li ol {
		list-style-position: outside;
		list-style-type: upper-roman;		
		padding-top: 1em;
		padding-left: 3em;
	}
	#container div.data ol.number li ol ol {
		list-style-type: lower-roman;
	}
		
	/* サイトマップ */
	
	#container div.data #sitemap {
		padding-left: 20px;
	}
	#container div.data #sitemap li {
		font-size: 16px;
		line-height: 1.5em;
		font-weight: bold;		
	}
		
	/* よくある質問 */
	
	#faq dt {
		font-weight: bold;
		background: url(../img/faq_q.gif) no-repeat left top;
		padding-left: 25px;
	}
	#faq dd {
		background: url(../img/faq_a.gif) no-repeat left top;
		padding: .5em 2em 2em 25px;
	}
	#faq dd ol li {
		margin-left: 2em;
		list-style-position: outside;
		list-style-type: decimal;
	}
	#faq dd ul li {
		margin-left: 2em;
		list-style-position: outside;
		list-style-image: url(../img/faq_ul.gif);
		*list-style-image: url(../img/faq_ul_ie67.gif); /* IE6-7 */
	}
		
	/* ポイント交換 */
	
	#point div.point_in {
		font-size: 14px;
		font-weight: bold;
		line-height: 2em;
		padding-left: 1em;
	}
	#point div.point_in strong {
		color: #F33;
		font-size: 18px;
		padding-left: .5em;
	}
	#point td {
		color: #333;
		text-align: center;
		width: 180px;
		padding-top: 2px;
		padding-bottom: 1em;
		border: 1px solid #DDD;
	}
		
	/* 利用規約 */
	
	#termsofuse ul,
	#termsofuse ol {
		padding-left: 3em;
	}
	#termsofuse ol ul li {
		list-style-position: outside;
		list-style-type: circle;
	}
	#termsofuse ol li {
		list-style-position: outside;
		list-style-type: decimal;
	}
		
	/* 追加注文フォーム */
	
	#reorder table {
		border-left: 1px solid #CCC;
		border-top: 1px solid #CCC;
		width: 100%;
		margin: 2em 0;
	}
	#reorder th {
		background-color: #F0F0F0;
		border-bottom: 1px solid #CCC;
		border-right: 1px solid #CCC;
		font-weight: normal;
		padding: 10px 20px;
		text-align: right;
		width: 15em;
	}
	#reorder td {
		border-bottom: 1px solid #CCC;
		border-right: 1px solid #CCC;
		padding: 10px 20px;
		vertical-align: top;
	}
	
	/*----------------------------------------------------
		#dwc_side　サイド要素
	----------------------------------------------------*/
	#dwc_side {
		width: 200px;
	}
	body#top_page  #dwc_side {
		padding-top: 20px;
	}
	
		/*----------------------------------------------------
			#side_nav　サイドナビゲーション
		----------------------------------------------------*/
		#side_nav {
			background: url(../img/side_nav_bg.png) no-repeat;
			_background: url(../img/side_nav_bg.gif) no-repeat;
			padding-top: 10px;
			margin-bottom: 10px;
		}
		#side_nav div {
			background: url(../img/side_nav_bg.png) no-repeat bottom;
			_background: url(../img/side_nav_bg.gif) no-repeat bottom;
			padding-bottom: 10px;
			border-top: 1px solid #CCC;
		}
		#side_nav a {
			background: #E4F4FD url(../img/side_nav_li.gif) no-repeat left top;
			_background: #E4F4FD url(../img/side_nav_li.gif) no-repeat 5px 2px;
			border-color: #FFF;
			border-style: solid;
			border-width: 2px 5px 0;
			padding: 5px 5px 5px 15px;
			font-size: 14px;
			text-decoration: none;
			font-weight: bold;
			color: #09F;
			display: block;
		}
		*:first-child+html #side_nav a {
			background: #E4F4FD url(../img/side_nav_li.gif) no-repeat 5px 2px;
		}
		#side_nav a:hover {
			color: #EA5810;
		}
		
		/*----------------------------------------------------
			#common_banner　共通バナー類
		----------------------------------------------------*/
		#common_banner a {
			display: block;
			margin-bottom: 10px;
		}

	/*----------------------------------------------------
		#index_content　トップページ要素
	----------------------------------------------------*/
	#index_content1 {
		background-image: url(../img/index_content1_bg.png);
		width: 950px;
		padding: 5px;
	}
		#index_content1 #index_links {
			width: 330px;
			_width: 325px;
			float: left;
		}
		#index_content1 #index_links a {
			padding-bottom: 5px;
			display: block;
		}
	
	#index_content2 {
		width: 720px;
		float: right;
		padding: 20px 0;
	}
		#index_content2 .trivia {
			margin: 15px 0 5px;
		}
		
		#index_content2 #trivia_1 a,
		#index_content2 #trivia_2 a {
			width: 162px;
			height: 35px;
			display: block;
			color: #FFF;
			font-size: 14px;
			font-weight: bold;
			text-decoration: none;
			text-align: center;
			float: left;
			margin: 5px;
			padding-top: 15px;
		}
		#index_content2 #trivia_1 a.long,
		#index_content2 #trivia_2 a.long {
			height: 40px;
			padding-top: 10px;
		}
		#index_content2 #trivia_1 a:hover,
		#index_content2 #trivia_2 a:hover {
			background-position: bottom;
		}
		#index_content2 #trivia_1 a {
			background-image: url(../img/index_trivia_1_link.jpg);
		}
		#index_content2 #trivia_2 a {
			background-image: url(../img/index_trivia_2_link.jpg);
		}
		
/*----------------------------------------------------
	#bottom　下部要素
----------------------------------------------------*/
#bottom {
	background: url(../img/bg_bottom.jpg) repeat-x bottom;
	height: 280px;
	clear: right;
}
#bottom #bottom_nav { /* ナビゲーション */
	background: url(../img/bottom_nav.jpg) repeat-x bottom;
	margin: 0 auto;
	width: 960px;
	height: 100px;
}
#bottom #bottom_nav li {
	background: url(../img/li_icon.gif) no-repeat left center;
	float: right;
	padding: 25px 10px 25px 20px;
}

#bottom #bottom_info { /* 企業情報 */
	background: url(../img/bottom_logo.gif) no-repeat left center;
	color: #FFF;
	line-height: 20px;
	margin: 20px auto;
	width: 700px;
	padding-left: 260px;
}
#bottom #bottom_info strong {
	font-weight: bold;
}

#bottom #copy { /* コピーライト */
	margin: 0 auto;
	width: 960px;
	color: #FFF;
}