@charset "utf-8";

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

common

----------------------------------------------- */
*{
	margin: 0;
	padding: 0;
	font-size: 100%;
}

html {
	height: 100%;
	margin: 0;
	padding: 0;
	color: #000;
	font-size: 100%;
	zoom: 1;
}
	
body {
	margin: 0;
	padding: 0;
	color: #444;
	font:13px/1.231 arial,helvetica,clean,sans-serif;*font-size:small;*font:x-small;
	font-family: 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
	line-height : 1.7;
	text-align: justify ;
	zoom: 1;
}
html>/**/body {font-size/*\**/: small\9;}
hr {
	display: none;
}
img {
	border: none;
	line-height: 0;
	vertical-align: bottom;
	line-height: 0;
}
div, dl, dt, dd, form, input, ul, ol, li, p, span, th, td {
	margin: 0;
	padding: 0;
}

ul, li {
	list-style-type: none ;
	outline: 0;
	border: 0;
	display: block;
}

/* fix float
------------------------------------ */
.l {
	float: left;
}
.r {
	float:right;
}

/* clearfix
------------------------------------ */
.clear {
	clear:both;
	font-size: 0px;
	line-height: 0%;
	height: 0px;
}
.clearfix:after {
  content: ".";  /* 新しい要素を作る */
  display: block;  /* ブロックレベル要素に */
  clear: both;
  height: 0;
  visibility: hidden;
	font-size: 0.1em;
}
.clearfix {
  min-height: 1px;
}
 * html .clearfix {
  height: 1px;
  /*\*//*/
  height: auto;
  overflow: hidden;
  /**/
}

/* link
------------------------------------ */
a { color: #000;text-decoration: none; }
a:hover { text-decoration: underline;}
a:visited { text-decoration: underline; }

/* font
------------------------------------ */
h2 {
	margin: 0 ;
	padding: 0 ;
	font-size: 18px;
	font-weight: normal;
}

h3 {
	margin: 0 ;
	padding: 0 ;
	font-size: 16px;
	font-weight: normal;
}


/* font-position
------------------------------------ */
.align_c { text-align: center;}
.align_r { text-align: right;}
.align_l { text-align: left ;}
.b { font-weight: bold ;} 

/* margin
------------------------------------ */
.mt_5 { margin-top: 5px;}
.mt_10 { margin-top: 10px;}
.mt_15 { margin-top: 15px;}
.mt_20 { margin-top: 20px;}
.mt_25 { margin-top: 25px;}
.mt_30 { margin-top: 30px;}
.mt_35 { margin-top: 35px;}
.mt_40 { margin-top: 40px;}
.mt_45 { margin-top: 45px;}
.mt_50 { margin-top: 50px;}

.ml_5 { margin-left: 5px;}
.ml_10 { margin-left: 10px;}
.ml_15 { margin-left: 15px;}
.ml_20 { margin-left: 20px;}
.ml_25 { margin-left: 25px;}
.ml_30 { margin-left: 30px;}

.mr_5 { margin-right: 5px;}
.mr_10 { margin-right: 10px;}
.mr_15 { margin-right: 15px;}
.mr_20 { margin-right: 20px;}
.mr_25 { margin-right: 25px;}
.mr_30 { margin-right: 30px;}

.mb_5 { margin-bottom: 5px;}
.mb_10 { margin-bottom: 10px;}
.mb_15 { margin-bottom: 15px;}
.mb_20 { margin-bottom: 20px;}
.mb_25 { margin-bottom: 25px;}
.mb_30 { margin-bottom: 30px;}
.mb_35 { margin-bottom: 35px;}
.mb_60 { margin-bottom: 60px;}

/* padding
------------------------------------ */
.plpr_20 {
padding: 0 20px;
}

/* body
------------------------------------ */
body#top {
background: url(../images/mainvisual.jpg) no-repeat center top;
}

body#savestar {
background: url(../images/teaser_savestar.jpg) no-repeat center top;
}

body#justwaterf {
background: url(../images/teaser_justwaterf.jpg) no-repeat center top;
}

body#case {
background: url(../images/teaser_case.jpg) no-repeat center top;
}

body#company {
background: url(../images/teaser_company.jpg) no-repeat center top;
}

div#mainvisual {
height: 500px;
background: url(../images/mainvisual.jpg) no-repeat center top;
}

div#teaser_savestar {
height: 400px;
background: url(../images/teaser_savestar.jpg) no-repeat center top;
}

div#teaser_justwaterf {
height: 400px;
background: url(../images/teaser_justwaterf.jpg) no-repeat center top;
}

div#teaser_case {
height: 300px;
background: url(../images/teaser_case.jpg) no-repeat center top;
}

div#teaser_company {
height: 300px;
background: url(../images/teaser_company.jpg) no-repeat center top;
}


/* header
------------------------------------ */
div#header {
width: 100%;
height: 108px;
background: url(../images/header_bg.png) repeat-x;
position: absolute;
top: 25px;
}

div#header div#inner {
width: 860px;
margin: 0 auto;
height: 108px;
background: url(../images/header_bg.gif) repeat-x;
}

div#header div#inner h1 {
float: left;
position: relative;
top: 20px;
left: 5px;
}

/* globalnavi */
div#globalnavi {
padding-top: 28px;
float: right;
}

div#globalnavi ul {
width: 517px;
background: url(../images/navi_border.gif) no-repeat right center;
position: relative;
}

div#globalnavi ul li {
float: left;
width: 129px;
height: 40px;
background: url(../images/navi_border.gif) no-repeat left center;
text-align: center;
line-height: 3em;
}

div#globalnavi ul li a {
width: 129px;
height: 40px;
font-size: 12px;
text-decoration: none;
display: block;
}

div#globalnavi ul li:hover {
border-bottom: solid 3px #86bfee;
}

div#globalnavi ul li a:hover {
color: #18448e;
}

/* プルダウンメニュー */
div#globalnavi ul li ul {
	display: none;
	position: absolute;
	top: 43px;
	left: 0;
	padding: 0;
	width: 150px;
	background: none;
}
div#globalnavi ul li ul li {
	width: 150px;
	border-bottom: dotted 1px #5171a5;
	background: url(../images/navipulldown_bg.png) repeat;
}
div#globalnavi ul li ul li a {
	display: block;
	text-decoration: none;
	text-align: left;
	padding-left: 10px;
	border: none;
}
div#globalnavi ul li ul li:hover {
	border-bottom: dotted 1px #5171a5;
}

div#globalnavi ul li ul li a:hover {
color: #18448e;
text-decoration: underline;
}


/*main
------------------------------------ */
div#main {
background: #fff;
}

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

contents

----------------------------------------------- */
div#contents, div#contents_top {
width: 860px;
margin: 0 auto;
}

div#contents_top {
position: relative;
top: -75px;
}

div#pankuzu {
font-family: "ＭＳ Ｐゴシック";
margin: 10px 0 20px;
}
div#pankuzu a {
text-decoration: underline;
}

div#pankuzu a:hover {
text-decoration: none;
}

.headline_m {
background: url(../images/headline_m.jpg) no-repeat;
padding: 5px 25px;
}

.headline_s {
background: url(../images/headline_s_ic.jpg) no-repeat left center;
padding: 5px 25px;
border-bottom: solid 2px #5abbe3;
}

table#tokuchou {
border-collapse: collapse;
border-spacing: 0;
margin: 50px 0;
}

table#tokuchou th {
width: 80px;
height: 95px;
vertical-align: top;
}

table#tokuchou td {
height: 35px;
vertical-align: top;
}

table#tokuchou td.tl {
vertical-align: middle;;
}

div#pagetop {
width: 135px;
margin: 90px 0 10px auto;
border-top: dotted 1px #1c79b8;
border-bottom: dotted 1px #1c79b8;
background: url(../images/pagetop_ic.gif) no-repeat 18px center;
}

div#pagetop a {
font-size: 14px;
color: #1c79b8;
margin-left: 40px;
 }

/* TOP
------------------------------------ */
div#top_desc {
width: 840px;
margin: 30px auto 0;
}

div#top_desc p {
margin: 10px 0;
}


/* ジャストウォーターF
------------------------------------ */
div#left {
width: 520px;
float: left;
}

div#right {
width: 298px;
float: right;
margin-right: 15px;
}

div#right {
text-align: center;
}

/* 導入効果事例
------------------------------------ */
div#case01, div#case02, div#case03 {
padding: 34px 0 34px 135px;
font-size: 16px;
margin-top: 30px;
}

div#case01 {
background: url(../images/case01_ic.gif) no-repeat 20px center;
}

div#case02 {
background: url(../images/case02_ic.gif) no-repeat 20px center;
}

div#case03 {
background: url(../images/case03_ic.gif) no-repeat 20px center;
}

table#izakaya {
	width: 840px;
	border-collapse: collapse;
	font-family: "ヒラギノ角ゴ Pro W3"
}
table#izakaya th {
background: #d5eff8;
color: #175985	;
}

table#izakaya td.b {
font-weight: bold;
}

table#izakaya td.cutprice {
background: #f8e9c8;
color: #FF0000;
}

table#izakaya th, table#izakaya td {
border: solid 1px #ccc;
padding: 5px;
}

table#izakaya th, table#izakaya td {
text-align: center;
}

/* 会社概要
------------------------------------ */
table#company {
	width: 840px;
	margin: 30px auto 50px;
	border-collapse: collapse;
	font-family: "ヒラギノ角ゴ Pro W3";
}

table#company th {
background: #eee;
color: #444444;
font-weight: normal;
text-align: center;
}

table#company th, table#company td {
border: solid 1px #ccc;
padding: 5px 15px;
}

table#company td.certificate {
text-align: center;
vertical-align: middle;
}

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

footer

----------------------------------------------- */
div#footer {
background: #1c79b8;
}

div#footer div#inner {
width: 860px;
margin: 0 auto;
height: 24px;
background: #1C79B8;
font-family: "ＭＳ Ｐゴシック", Osaka;
color: #fff;
text-align: right;
}