@charset "UTF-8";
/* ===================================================================
CSS information - 2013.8版

default
 / Eric Meyer's resetを使用
 / その他デフォルトで使用するHTMLタグの指定

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

/* Eric Meyer's reset
	http://meyerweb.com/eric/tools/css/reset/ 
	v2.0b1 | 201101 
	NOTE: WORK IN PROGRESS
	USE WITH CAUTION AND TEST WITH ABANDON */

/* Use this reset as a starting point, and customize to your needs */
/* Slightly modified to prevent anchor elements from losing outline, as in HTML5 Boilerplate */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video{
	margin:0;
	padding:0;
	border:0;
	outline:0;
	font-size:100%;
	font:inherit;
	vertical-align:baseline;
}

a{margin:0; padding:0; font-size:100%; vertical-align:baseline; display: inline-block; *display: inline; *zoom: 1; background:transparent;}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section{display: block;}
body{line-height:1;}
ol, ul{list-style:none;}
blockquote, q{quotes:none;}
blockquote:before, blockquote:after,
q:before, q:after{content:''; content:none;}

/* remember to define visible focus styles! 
:focus{
	outline: ?????;
} */

/* remember to highlight inserts somehow! */
ins{text-decoration:none;}
del{text-decoration:line-through;}
table{border-collapse:collapse; border-spacing:0;}
strong{font-weight:bold;}
/* Meyer's reset ends here */

input[type="checkbox"],input[type="radio"]{vertical-align: -2px;}


/* ===================================================================
CSS information - 2012.11版

 / moduleクラスの定義

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

.left{float: left;}
.right{float: right;}

.text-c{text-align: center;}
.text-l{text-align: left;}
.text-r{text-align: right;}

.f10{font-size: 10px;}
.f11{font-size: 11px;}
.f12{font-size: 12px;}
.f14{font-size: 14px;}
.f16{font-size: 16px;}
.f24{font-size: 24px;}
.fwb{font-weight: bold;}

.mg5{margin: 5px;}
.mg10{margin: 10px;}
.mg20{margin: 20px;}
.mg40{margin: 40px;}
.mg-auto{margin: 0 auto;}
.mg-10-0{margin: 10px 0;}
.mg-20-0{margin: 20px 0;}
.mg-40-0{margin: 40px 0;}
.mg-b10{margin-bottom: 10px;}
.mg-b20{margin-bottom: 20px;}
.mg-b40{margin-bottom: 40px;}
.mg-t10{margin-top: 10px;}
.mg-t20{margin-top: 20px;}
.mg-t40{margin-top: 40px;}

.pd-b20{padding-bottom: 20px;}

.clearfix:after{
	content: "."; 
	display: block; 
	height: 0; 
	font-size:0;	
	clear: both; 
	visibility: hidden;
}
	
.clearfix {display: inline-block;} 

/* Hides from IE Mac */
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End Hack */ 

.fixed{
	width: 100%;
	top: 0 !important;
	position: fixed !important;
	z-index: 10000;
}

/* ===================================================================
CSS information - 2012.11版

style
 / レイアウト、ブロック関連
 / 共通のスタイルを設定

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

/*================================================
*
*	1.全体
*
=================================================*/
body{
	font-size: 18px;
	line-height: 1.6em;
	text-align: left;
	font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	color: #000;
	background: url('../images/water-bg.jpg') center top no-repeat #fff fixed;
	background-position: center -350px;
}

a,
a:link,
a:visited{
	color: #5fa31f;
	text-decoration: none;
}
a:hover{
	color: #166635;
	text-decoration: underline;
}

img{vertical-align: bottom;}

.wrap{
	width: 960px;
	margin: 0 auto;
	position: relative;
	overflow: hidden;
}
.wrap-full{
	width: 1000px;
	margin: 0 auto;
	position: relative;
	overflow: hidden;
}

.block{
	margin: 0 auto;
	padding-bottom: 20px;
}
.sep{
	padding: 10px 0;
}

.big{
	font-size: 24px;
	font-weight: bold;
	color: #014099;
}
.red{color: #c00;}

.vertical-top{vertical-align: top;}

/*================================================
*
*	2.ヘッダー&ヘッダーメニュー
*
=================================================*/
#sns{
	margin: 20px auto;
	text-align: center;
	position: relative;
	overflow: hidden;
}
#sns .fb,
#sns .tw{
	padding: 5px;
	display: inline-block;
}

.top-catch{
	height: 517px;
	background: url('../images/top-catch.png') center top no-repeat;
}
.top-catch2{
	height: 120px;
	background: url('../images/top-catch2.jpg') center top no-repeat;
}

.head-app-btn{
	width: 410px;
	height: 100px;
	white-space: nowrap;
	text-indent: 100%;
	background: url('../images/head-app-btn.png') 0 0 no-repeat;
	overflow: hidden;
	display: block;
}
.head-app-btn:hover{
	background: url('../images/head-app-btn-over.png') 0 0 no-repeat;
}

#float_navi{
	padding: 5px 0;
	background: rgba(255,255,255,.9);
	-webkit-box-shadow: 0px 0px 5px rgba(0,0,0,.6);
	   -moz-box-shadow: 0px 0px 5px rgba(0,0,0,.6);
	    -ms-box-shadow: 0px 0px 5px rgba(0,0,0,.6);
	     -o-box-shadow: 0px 0px 5px rgba(0,0,0,.6);
	        box-shadow: 0px 0px 5px rgba(0,0,0,.6);
}
#float_navi .logo{
	float: left;
}
#float_navi .info{
	width: 420px;
	float: right;
}
#float_navi .info .right a{
	width: 200px;
	height: 39px;
	margin-top: 7px;
	white-space: nowrap;
	text-indent: 100%;
	overflow: hidden;
	background: url("../images/en/contact-top-link.png") 0 0 no-repeat;
	background-size: 200px;
	display: block;
}
#float_navi .info .right a:hover{
	background: url("../images/en/contact-top-hover.png") 0 0 no-repeat;
	background-size: 200px;
}

/*================================================
*
*	3.メインコンテンツ
*
=================================================*/
/*************************************************
/	3.1.全メインコンテンツ共有
/*************************************************/
.main-bg-head{
	background: url('../images/main-bg-head.png') center top no-repeat;
}
.main-bg{
	background: url('../images/main-bg.png') center top repeat-y;
}

.contact-top{
	margin-top: 20px;
	height: 200px;
	background: url("../images/en/head-4.png") center top no-repeat;
	position: relative;
}
.contact-top a{
	width: 360px;
	height: 0;
	top: 108px;
	left: 422px;
	padding-top: 70px;
	display: block;
	position: absolute;
	overflow: hidden;
}
.contact-top a:hover{
	background: url("../images/en/contact-top-hover.png") 0 0 no-repeat;
}

.gotoapp .btn a{
	width: 920px;
	height: 100px;
	margin: 0 auto;
	white-space: nowrap;
	text-indent: 100%;
	overflow: hidden;
	display: block;
}
.gotoapp .btn a:hover{
	background: url('../images/gotoapp-btn-over.png') 0 0 no-repeat;
}

.server .left-pic,
.server .right-pic{
	padding: 0 10px;
	position: relative;
	overflow: hidden;
}
.server .left-pic .pic,
.server .right-pic .pic{width: 330px;}
.server .left-pic .text{width: 610px;}
.server .right-pic .text{width: 578px;}
.server .text{margin-top: 20px;}
.server .text p{padding: 0 15px;}
.server.rare .left-pic .pic{width: 306px; margin-left: 5px;}
.server.rare .left-pic .text{width: 617px; margin-right: 10px;}
.server.rare .right-pic .text{margin-top: 0;}

.gotoapp .btn{
	height: 140px;
	background: url('../images/gotoapp-bg.png') center top no-repeat;
}

.select1,
.select2,
.select3,
.select4,
.select5{
	width: 600px;
	height: 70px;
	white-space: nowrap;
	text-indent: 100%;
	overflow: hidden;
	display: block;
}
.select1,
.select5{height: 73px;}
.select1{background: url('../images/en/mouse/select5-choice1-over.png') 0 0 no-repeat;}
.select2{background: url('../images/en/mouse/select5-choice2-over.png') 0 0 no-repeat;}
.select3{background: url('../images/en/mouse/select5-choice3-over.png') 0 0 no-repeat;}
.select4{background: url('../images/en/mouse/select5-choice4-over.png') 0 0 no-repeat;}
.select5{background: url('../images/en/mouse/select5-choice5-over.png') 0 0 no-repeat;}
.select1:hover{background: url('../images/en/select5-choice1-over.png') 0 0 no-repeat;}
.select2:hover{background: url('../images/en/select5-choice2-over.png') 0 0 no-repeat;}
.select3:hover{background: url('../images/en/select5-choice3-over.png') 0 0 no-repeat;}
.select4:hover{background: url('../images/en/select5-choice4-over.png') 0 0 no-repeat;}
.select5:hover{background: url('../images/en/select5-choice5-over.png') 0 0 no-repeat;}

.water-step1,
.water-step2,
.water-step3{
	padding-top: 120px;
}
.water-step1{background: url('../images/water-step1.png') center top no-repeat;}
.water-step2{background: url('../images/en/water-step2.png') center top no-repeat;}
.water-step3{background: url('../images/en/water-step3.png') center top no-repeat;}
.water-step-bg{
	padding-bottom: 40px;
	background: url('../images/water-step-foot.png') center bottom no-repeat;
}
.water-step-bg .bg{
	padding: 10px 55px 10px 125px;
	background: url('../images/water-step-bg.png') 0 0 repeat-y;
}

.water-step2 .pic,
.water-step3 .pic{
	width: 245px;
	float: left;
}
.water-step2 p,
.water-step3 p{
	width: 500px;
	margin-right: 30px;
	float: right;
}

.water-reason{
	padding: 10px;
	background: url('') center top repeat-y;
}

.common-application{
	height: 210px;
	background: url('../images/common-app-btn-bg.png') center top no-repeat;
}
.common-application a{
	width: 470px;
	height: 100px;
	margin: 52px auto 0;
	white-space: nowrap;
	text-indent: 100%;
	overflow: hidden;
	display: block;
}
.common-application a:hover{
	background: url('../images/common-app-btn-over.png') 0 0 no-repeat;
}

.mineral-list{
	width: 920px;
	margin: 10px auto;
}
.mineral-list table{
	width: 100%;
	margin: 10px auto;
	border-top: 1px solid #5ecbff;
	border-left: 1px solid #5ecbff;
	background: #fff;
}
.mineral-list table thead th{
	background: #bae9ff;
}
.mineral-list table th,
.mineral-list table td{
	padding: 5px;
	vertical-align: middle;
	border-right: 1px solid #5ecbff;
	border-bottom: 1px solid #5ecbff;
}
.mineral-list table th{
	font-size: 15px;
	font-weight: bold;
	text-align: center;
	color: #044a96;
}
.mineral-list table td{
	font-size: 12px;
	line-height: 1.4em;
}
.mineral-list table .odd th,
.mineral-list table .odd td{
	background: #f0faff;
}
.mineral-list table .even th,
.mineral-list table .even td{
	background: #fbfeff;
}

.other-mineral{
	background: url('../images/en/other-mineral.png') center top no-repeat;
}
.other-mineral p{
	padding: 445px 0 0 30px;
}

.ion-mineral{
	width: 920px;
	margin: 15px auto 0;
	position: relative;
	overflow: hidden;
}
.ion-mineral .left{width: 440px;}
.ion-mineral .right{width: 470px;}
.ion-mineral .right p{margin: 5px;}
.ion-mineral .right span{font-size: 12px;}

.bottle-less-text{
	padding-top: 10px;
	font-size: 14px;
	line-height: 1.4em;
	background: url('../images/en/bottle-less-img2.png') center top no-repeat;
	position: relative;
	overflow: hidden;
}
.bottle-less-text .left,
.bottle-less-text .right{
	width: 260px;
}
.bottle-less-text .left{margin-left: 310px;}
.bottle-less-text .right{margin-right: 40px;}

.bottle-select{
	width: 930px;
	margin: 20px auto 0;
	position: relative;
	overflow: hidden;
}
.bottle-select .bg{
	padding: 10px 20px;
	background: url('../images/bottle-select-bg.png') center top repeat-y;
	position: relative;
	overflow: hidden;
}
.bottle-select .left .pic{
	width: 150px;
	float: left;
}
.bottle-select .left .text{
	width: 242px;
	float: right;
}
.bottle-select .right .pic{
	width: 52px;
	float: left;
}
.bottle-select .right .text{
	width: 350px;
	float: right;
}

.spec-tbl{
	width: 100%;
	margin-top: 5px;
	border-top: 1px solid #09d;
	border-left: 1px solid #09d;
}
.spec-tbl th,
.spec-tbl td{
	padding: 5px;
	font-size: 12px;
	line-height: 1.4em;
	vertical-align: middle;
	border-right: 1px solid #09d;
	border-bottom: 1px solid #09d;
}
.spec-tbl th{
	text-align: center;
	background: #bff0ff;
}

.bottle-easy{
	position: relative;
	overflow: hidden;
}
.bottle-easy .left{
	width: 320px;
	margin: 30px 0 0 20px;
}
.bottle-easy .right{
	width: 572px;
	margin-right: 20px;
}

.bottle-appeal{
	margin: 20px 20px 0;
	position: relative;
	overflow: hidden;
}
.bottle-appeal .left{
	width: 620px;
	margin-top: 40px;
}
.bottle-appeal .right{
	width: 280px;
}

.excellent-test{
	height: 396px;
	background: url('../images/en/excellent-test-main.png') center top no-repeat;
}
.excellent-test a{
	width: 302px;
	height: 396px;
	margin-left: 40px;
	white-space: nowrap;
	text-indent: 100%;
	background: url('../images/excellent-test-link.png') 0 0 no-repeat;
	overflow: hidden;
}
.excellent-test a:hover{background: url('../images/excellent-test-link-over.png') 0 0 no-repeat;}

.use-list{
	margin: 0 15px;
	position: relative;
	overflow: hidden;
}
.use-list .left,
.use-list .right{
	width: 460px;
}
.use-list .bg{
	padding: 0 20px;
	font-size: 14px;
	line-height: 1.6em;
	background: url('../images/use-list-bg.png') center top repeat-y;
	position: relative;
	overflow: hidden;
}
.use-list .bg .text{
	width: 200px;
	margin-left: 10px;
	float: left;
}
.use-list .bg .pic{
	width: 190px;
	margin-right: 10px;
	float: right;
}

.safe-clear{
	background: url('../images/safe-clear-text-bg.png') center top repeat-y;
	position: relative;
	overflow: hidden;
}
.safe-clear li{
	width: 260px;
	float: left;
}
.safe-clear li.clear1{margin-left: 40px;}
.safe-clear li.clear2{margin-left: 60px;}
.safe-clear li.clear3{margin-left: 50px;}

.faq-list{
	margin: 20px;
	line-height: 1.4em;
}
.faq-list .head{
	padding: 10px;
	font-size: 24px;
	color: #fff;
	background: #044a96;
}
.faq-list dl{
	margin: 20px;
}
.faq-list dt{
	margin-bottom: 5px;
	padding: 7px 0 2px 30px;
	font-weight: bold;
	color: #044a96;
	border-bottom: 1px dotted #ccc;
	background: url('../images/faq-q.png') left center no-repeat;
}
.faq-list dd{
	margin-bottom: 20px;
	font-size: 14px;
}

.application-tbl{
	width: 920px;
	margin: 20px auto;
	border-top: 1px solid #ccc;
	border-left: 1px solid #ccc;
}
.application-tbl th,
.application-tbl td{
	border-right: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
}
.application-tbl th{
	vertical-align: middle;
	background: #daf3ff;
}
.application-tbl td{
	padding: 10px;
	background: #fff;
}

.server-type{
	position: relative;
	overflow: hidden;
}
.server-type .pic,
.server-type .text{
	display: inline-block;
	vertical-align: middle;
}
.server-type .pic{
	width: 75px;
	text-align: center;	
}
.server-type .text{
	width: 245px;
}

.input-form{
	width: 100%;
	font-size: 14px;
	line-height: 1.8em;
	border: none;
}
.input-form th,
.input-form td{
	font-size: 13px;
	background: none;
	border: none;
	border-bottom: 1px dotted #ddd;
}
.input-form .last th,
.input-form .no-line td{
	padding-bottom: 0;
	border-bottom: none;
}
.input-form input,
.input-form textarea{
	padding: 5px;
	border: 1px solid #ddd;
}
.input-form .short{width: 10%;}
.input-form .middle{width: 30%;}
.input-form .long{width: 70%;}
.input-form textarea{width: 98%; height: 100px;}

.ex{
	font-size: 11px;
	color: #aaa;
}
.error{
	background: #ffe2d8;
}

.require{
	font-size: 10px;
	padding: 1px 5px;
	color: #fff;
	-webkit-border-radius: 3px;
	        border-radius: 3px;
	background: #c00;
	float: right;
}
.caution{
	font-size: 12px;
	font-weight: bold;
	color: #c00;
}

.terms{
	width: 900px;
	height: 150px;
	margin: 0 auto;
	padding: 10px;
	font-size: 12px;
	line-height: 1.4em;
	border: 1px solid #ccc;
	display: block;
	overflow: auto;
}
.terms .head{
	margin-bottom: 10px;
	padding: 5px;
	font-size: 18px;
	font-weight: bold;
	line-height: 1;
	border-bottom: 1px solid #dedede;
}
.terms .head span{
	padding: 5px;
	border-left: 5px solid #044a96;
	display: block;
}
.terms dt{
	margin-bottom: 5px;
	font-weight: bold;
	border-bottom: 1px dotted #dedede;
}
.terms dd dt{
	font-weight: normal;
	border-bottom: none;
}
.terms dd{
	margin-bottom: 20px;
}

.setting{
	background: #f6f6f6;
}
.setting-input{
	background: #f6f6f6;
	display: none;
}

.check{
	width: 900px;
	margin: 20px auto;
	padding: 10px;
	font-size: 14px;
	text-align: center;
	border: 1px solid #044a96;
	background: #daf3ff;
}

.btn-pos{
	width: 900px;
	margin: 20px auto;
	position: relative;
	overflow: hidden;
}
.btn-confirm,
.btn-back,
.btn-send{
	width: 410px;
	height: 100px;
	margin: 0 auto;
	white-space: nowrap;
	text-indent: 120%;
	border: none;
	display: block;
	overflow: hidden;
}
.btn-confirm:hover,
.btn-back:hover,
.btn-send:hover{
	cursor: pointer;
}

.btn-confirm{background: url('../images/btn-confirm.png') 0 0 no-repeat;}
.btn-back{background: url('../images/btn-back.png') 0 0 no-repeat;}
.btn-send{background: url('../images/btn-send.png') 0 0 no-repeat;}
.btn-confirm:hover{background: url('../images/btn-confirm-over.png') 0 0 no-repeat;}
.btn-back:hover{background: url('../images/btn-back-over.png') 0 0 no-repeat;}
.btn-send:hover{background: url('../images/btn-send-over.png') 0 0 no-repeat;}

/*************************************************
/	3.2.トップページ
/*************************************************/


/*================================================
*
*	4.サイドバー
*
=================================================*/


/*================================================
*
*	5.フッター&フッターメニュー
*
=================================================*/
#footer {
	padding-top: 10px;
	font-size: 13px;
	line-height: 1.4em;
	border-top: 1px solid #bbb;
	background: #fff;
}
.tel-tag a{
	width: 50px;
	font-size: 10px;
	color: #fff;
	background: #4dc100;
	float: right;
}
#footer_logo {
	float: left;
	width: 320px;
	margin: 0 20px 0 0;
}
#footer_add {
	float: left;
	width: 300px;
	margin: 16px 0 0 0;
}
#footer_menu {
	float: right;	
	text-align: right;
}
#footer_menu li {
	display: inline;
	margin: 0 0 0 5px;
}
#footer_menu li a {
	color: #555;
	text-decoration: none;
}
#footer_menu li a:hover {
	color: #999;
}
/*footer_copy*/
#footer_copy {
	margin-top: 5px;
	padding: 5px;
	color: #7EB8D3;
	text-align: center;
	background: #e4f1f7;
}