@charset "UTF-8";
/* CSS Document */

/*---------------------------------------00 css reset*/
/*---------------------------------------01 basic layout*/
/*---------------------------------------02 font style*/
/*---------------------------------------03 link style*/
/*---------------------------------------04 other style*/

/*◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇

	00 css reset

◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇*/
* {
	margin:0;
	padding:0;
}
ul li {
	list-style-type:none;
}
img {
	border:none;
}
hr {
	display:none;
}
/*◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇

	01 basic layout

◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇*/


/*-------------hack for IE 7 */

html {
	height:100%;
}
*+html {
	background-color:#FFF;/*IE7 zoom機能のバグ対策*/
}
body {
	color:#666666;
	font-family:"メイリオ", "Meiryo", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", sans-serif;
	_text-align:center;
	font-size:90%;
	line-height:180%;
	background-color: #D2EFF1;
	background-image: url(../images/bg.gif);
	background-repeat: repeat;
	background-position: center top;
}
#header,
#wrapper,
#footer {
	text-align:left;
}
/*---*/

body,
html {
	height: auto !important;
}
#container {
	width: 100%;
	height: auto !important;
	height: 100%;
	min-height: 100%;
}

/*---------------------------------------
  wrapper
---------------------------------------*/
#wrapper {
	width: 100%;
	padding: 0px 0 0px;
	background-color: transparent;
	background-image: url(../images/header_bg.png);
	background-repeat: no-repeat;
	background-position: center top;
	
	/* headerをずらさない場合
	width:1138px;
	margin: 0 auto; 
	*/
}

/*---------------------------------------
  header
---------------------------------------*/
#header {
	margin: 0 auto;
	width: 900px;
	height: 388px;
	text-align: center;
}
#header #headerWrap {
	text-align: left;
}

#header #headerWrap p#logo {
	padding:20px 0 0 25px;
}
#header #headerWrap p#lead {
	margin:0 0 0 25px;
}

/*---------------------------------------
  footer
---------------------------------------*/
#footer {
	width:100%;
	background: transparent url(common/images/footer_border.png) left top repeat-x;
	padding:25px 0 20px 0;
	margin-top: 20px;
}
*:first-child+html #footer {

}
#footer #footWrap {
	width:965px;
	margin:0 auto;
	text-align: right;
}


/*---------------------------------------
  main
---------------------------------------*/
#main {
	margin: 0 auto; 
	width: 985px;
	text-align: center;
}

/*---------------------------------------
  navi
---------------------------------------*/
#main #navi{
	float: left;
	width: 243px;
	padding-top: 20px;
}

#main #navi .navi_new01{
	text-align:left;
	position:relative;
	top: 5px;
	left: 82px;
	margin-top: -5px;
	width: 30px;
	height: 10px;
}
#main #navi .navi_new02{
	text-align:left;
	position:relative;
	top: 60px;
	left: 210px;
	/*margin-top: -5px;*/
	width: 30px;
	height: 10px;
	margin-top: -10px;
}

#main #navi .navi_new03{
	text-align:left;
	position:relative;
	top: 60px;
	left: 190px;
	/*margin-top: -5px;*/
	width: 30px;
	height: 10px;
	margin-top: -10px;
}

#main #navi .navi_new05{
	text-align:left;
	position:relative;
	top: 10px;
	left: 190px;
	/*margin-top: -5px;*/
	width: 30px;
	height: 10px;
	margin-top: -10px;
}

*:first-child+html #main #navi .navi_new02{/*-- for IE7 --*/
	top: 70px!important;
	left:105px!important;
	margin-top: -30px!important;
}

/*---------------------------------------
  contents
---------------------------------------*/
#main #contents{
	float: left;
	width: 742px;
}

#main #contents #contents-top{
	height: 59px;
	background-color: transparent;
	background-image: url(../images/ctt_bg_top.png);
	background-repeat: no-repeat;
	background-position: left top;
}
#main #contents #contents-mdl{
	text-align: left;
	padding:0 6px;
	background-color: transparent;
	background-image: url(../images/ctt_bg_mdl.png);
	background-repeat: repeat-y;
	background-position: left top;
}
#main #contents #contents-btm{
	height: 60px;
	background-color: transparent;
	background-image: url(../images/ctt_bg_btm.png);
	background-repeat: no-repeat;
	background-position: left top;
}

/*---------------------------------------
  relatedArea
---------------------------------------*/
#main #relatedArea {
	/*text-align:center;*/
}

#main #relatedArea ul#related-links {
	position: relative;
	height: 500px;

}
#main #relatedArea ul#related-links li {
	/*float: left;*/
	width: 234px;
	height: 252px;
	margin: 0 5px;
}
#main #relatedArea ul#related-links li#aquastore {
	position: absolute;
	top: 0;
	left: 0;
}
#main #relatedArea ul#related-links li#mizutaku {
	position: absolute;
	top: 0px;
	left: 330px;
}
#main #relatedArea ul#related-links li#premiumwater {
	position: absolute;
	top: 210px;
	left: 183px;
}
#main #relatedArea ul#related-links li#mizuhiroba {
	position: absolute;
	top: 210px;
	left: 480px;
}

/*◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇

	02 font style

◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇*/
.reg {
	font-size:100%;/*body 83% of 100%*/
	line-height:1.4em;
}
.sml {
	font-size:80%;/*body 83% of 80%*/
	line-height:1.4em;
}
.lrg {
	font-size:120%;/*body 83% of 120%*/
	line-height:1.4em;
}
.x-lrg {
	font-size:140%;/*body 83% of 140%*/
	line-height:1.6em;
}
.xx-lrg {
	font-size:160%;/*body 83% of 160%*/
	line-height:1.8em;
}
/*---------------------------------------
  font color
---------------------------------------*/
.gray {
	color:#999999 !important;
}
.black {
	color:#333333 !important;
}
.blue {
	color:#1C6295 !important;
}
.yellow {
	color:#c9c698 !important;
}
.white {
	color:#ffffff !important;
}
.brown {
	color:#663333 !important;
}
.red {
	color:#cc0000 !important;
}
/*---------------------------------------
  bold
---------------------------------------*/
strong {
	font-weight:bold;
	font-style:normal;
}
.bold {
	font-weight:bold;
}

/*---------------------------------------
  family
---------------------------------------*/
.serif {
	font-family: "ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
}

/*◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇

	03 link style

◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇*/
a {
	color:#0059AC;
}
a:link,
a:visited {
	text-decoration:none;
}
a:hover {
	text-decoration:underline;
}

.link-arrow01 {
	background:transparent url(common/images/arrow01.png) left top no-repeat;
	padding: 0 0 0 20px;
}


/*◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇

	04 other style

◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇*/
/*約物「・」などを等幅で表示する*/
.mono {
	font-family:monospace;
}
/*「※」で始まる箇条書きブロック*/
.note {
	text-indent:-1em;
	padding-left:1em;
}

/*-----------------------アイコン、矢印*/


/*-----------------------真ん中寄せ、右寄せ*/
.alCenter {
	text-align:center;
}
.alRight {
	text-align:right;
}
.alLeft {
	text-align:left;
}
/*---------------------------------------margin付き汎用ボックス*/
.mgtop5px {
	margin-top:5px;
}
.mgtop10px {
	margin-top:10px;
}
.mgtop15px {
	margin-top:15px;
}
.mgtop20px {
	margin-top:20px;
}
.mgtop30px {
	margin-top:30px;
}
.mgtop50px {
	margin-top:50px;
}
.mgbtm5px {
	margin-bottom:5px;
}
.mgbtm10px {
	margin-bottom:10px;
}
.mgbtm15px {
	margin-bottom:15px;
}
.mgbtm20px {
	margin-bottom:20px;
}
.mgbtm30px {
	margin-bottom:30px;
}
.mgrt5px {
	margin-right:5px;
}
.mgrt10px {
	margin-right:10px;
}
.mgrt15px {
	margin-right:15px;
}
.mgrt20px {
	margin-right:20px;
}
.mgrt30px {
	margin-right:30px;
}
.mglt5px {
	margin-left:5px;
}
.mglt10px {
	margin-left:10px;
}
.mglt15px {
	margin-left:15px;
}
.mglt20px {
	margin-left:20px;
}
.mglt30px {
	margin-left:30px;
}
.mglt130px {
	margin-left:130px;
}
.mgrow5px {
	margin-top:5px;
	margin-bottom:5px;
}
.mgrow10px {
	margin-top:10px;
	margin-bottom:10px;
}
.mgrow15px {
	margin-top:15px;
	margin-bottom:15px;
}
.mgrow20px {
	margin-top:20px;
	margin-bottom:20px;
}
.mgrow30px {
	margin-top:30px;
	margin-bottom:30px;
}

/*---------------------------------------padding付き汎用ボックス*/
.pdtop5px {
	padding-top:5px;
}
.pdtop10px {
	padding-top:10px;
}
.pdtop15px {
	padding-top:15px;
}
.pdtop20px {
	padding-top:20px;
}
.pdtop30px {
	padding-top:30px;
}
.pdtop40px {
	padding-top:40px;
}
.pdtop50px {
	padding-top:50px;
}

.pdlt10px {
	padding-left:10px;
}
.pdlt20px {
	padding-left:20px;
}
.pdlt30px {
	padding-left:30px;
}
.pdlt40px {
	padding-left:40px;
}
/*----------------------------------------段組み*/
.flWrap {
	display:inline-block;/*----------------IE7 clearfix*/
	width:100%;
	margin:20px 0;
	clear:both;
}
/*-------------------------2段組*/
.l2Col,
.r2Col {
	float:left;
}
.l2Col {
}
.r2Col {
}
/*-------------------------3段組*/
.l3Col,
.c3Col,
.r3Col {
	float:left;
}
.l3Col {
}
.c3Col {
}
.r3Col {
}

.fl-Right {
	float: right !important;
}

/*---------------------------------------
  clear
---------------------------------------*/
.clear {
	clear:both;
}
/*---------------------------------------
  ボーダーなし
---------------------------------------*/
.noBorder {
	border:none !important;
}

/*---------------------------------------
  pagetop
---------------------------------------*/
.pagetop {
	text-align:right;
}
/*---------------------------------------
  clearfix
---------------------------------------*/
.clearfix:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
}
* html .clearfix {
	zoom: 1;
} /* IE6 */
*:first-child+html .clearfix {
	zoom: 1;
} /* IE7 */


/*---------------------------------------
  lines
---------------------------------------*/
div.ctt-dots {
	background: transparent url(common/images/hr_dots01.png) left top no-repeat;
	width: 633px;
	height: 5px;
	margin: 30px 0 30px 40px;
	border: 0 !important;
}

div.ctt-dots02 {
	background: transparent url(common/images/hr_dots02.png) left top no-repeat;
	width: 296px;
	height: 5px;
	border: 0 !important;
}

/*---------------------------------------
  to Page Top
---------------------------------------*/
.toPageTop {
	text-align: right;
}