@charset "utf-8";
/*
Theme Name: theme010
Theme URI: http://theme.o2gp.com/
Description: theme010
Version: 1.0
Author: o2 Group
Author URI: http://theme.o2gp.com/
Tags: simple

	o2 Group v1.0
	 http://theme.o2gp.com/

	This theme was designed and built by o2 Group,
	whose blog you will find at http://theme.o2gp.com/

	The CSS, XHTML and design is released under GPL:
	http://www.opensource.org/licenses/gpl-license.php

*/

*{margin:0;padding:0;}

body{
font: 14px/1.4 "メイリオ","Meiryo",arial,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,"ＭＳ Ｐゴシック","MS PGothic",Sans-Serif;
color:#24348f;
background: #ffffff url(images/bg2.jpg) no-repeat center top;}


a{color:#24348f;text-decoration:none;}
a:hover{color:#f06338;}
a:active, a:focus {outline: 0;}
img{border:0;}
.clear{clear:both;}


/*************
全体
*************/
#wrapper{
margin: 0px auto 0 auto;
padding: 0px 0 0px 0;
width: 910px;}

/*************
/* ヘッダー 右上☎番号
*************/
.head{
border-style:ridge;
margin: 0px 1px  200px;
height:150px;
position:relative;
}

#header{
background: url(images/header.png) no-repeat 100% 0;
height: 110px;
}

#header h1 {
padding: 4px 5px 15px;
font-size: 10px;
font-weight: normal;
color: #333333;
}
.title{
margin-top:-10px;}

/*************
/* トップナビゲーション
*************/
ul#topnav{
width: 910px;
}

ul#topnav li{list-style:none; display: inline-block; border-left: 1px solid #999; padding: 0 20px;}
ul#topnav li:last-child { border-right: 1px solid #999; }
ul#topnav.nav{
width:900px;
text-align: center;
}

ul#topnav a{
text-decoration: none;
display: block;
color:#24348f;
background:url(images/topnav.png) no-repeat 0 0;
}

ul#topnav a#home:hover, ul#topnav li.active a#home{background-position:0 -46px;}
ul#topnav a#about:hover, ul#topnav li.active a#about{background-position:-130px -46px;}
ul#topnav a#menu:hover, ul#topnav li.active a#menu{background-position:-260px -46px;}
ul#topnav a#menu2:hover, ul#topnav li.active a#menu2{background-position:-390px -46px;}
ul#topnav a#menu3:hover, ul#topnav li.active a#menu3{background-position:-390px -46px;}
ul#topnav a#faq:hover, ul#topnav li.active a#faq{background-position:-520px -46px;}

/*************
メイン（左側）コンテンツ
*************/
#main {
float: left;
width: 618px;
padding: 20px 0;
display: inline;
font-family: 'メイリオ',Meiryo, Georgia, "Bitstream Charter", serif;
}

#main h2{
padding: 0 10px 0px 20px;
line-height: 40px;
font-size: 14px;
font-weight: bold;
color: #000;
padding-left:50px;
background: url(images/heading.png) no-repeat;
}

#main h3 {
font-size: 14px;
line-height: 30px;
background: url(images/h3.png) no-repeat ;
padding-left: 40px;
padding-bottom: 10px;
padding-top:5px;
margin-top:0px;
letter-spacing: 0.2em;
color: #000;
height:250px;
width:618px;
height:36px;
}

#main h4{
background: url(images/h4.png) no-repeat ;
padding-left: 10px;
margin-left:20px;
color:#fff;
margin-top:10px;
letter-spacing: 0.2em;
padding-top:3px;
padding-bottom:3px;
}

#main p {
padding: 15px 15px 15px 20px;
color:#000;
}

/* 画像を右に回りこみ */
#main p.withImage{
width: 598px;
margin: 20px 0 10px 10px;
padding: 5px 0;
}

#main p.withImage img{
float: right;
margin-left: .5em;
}

#date {
text-align: right;
padding-right: 15px;
padding-top: -10px;
padding-bottom: 5px;
font-weight:bold;
color:#24348f;
}

#next {
text-align: center;
padding-top: 0px;
padding-bottom: 0px;
}

img.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}
img.alignright {
    padding: 4px;
    margin: 0 0 2px 7px;
    display: inline;
}
img.alignleft {
    padding: 4px;
    margin: 0 7px 2px 0;
    display: inline;
}
.alignright {
    float: right;
}
.alignleft {
    float: left;
}

/* フッター共通 */
.box{
float: left;
width: 195px;
margin: 20px 16px 10px 0;
line-height: 1.2;
}

.box_img{
padding: 0px 0px 10px 0px;
}

.last{margin-right:0;}


/* ボタン */
p.button{
text-align: center;
font-weight:bold;
padding: 10px 0;
}

p.button a{
display:block;
line-height: 32px;
background: #ffffff url(images/button.png) no-repeat;
margin: 0 -20px;
}

p.button a{color:#1793d9;}
p.button a:hover{color:#fff;}

p.button a:hover{
cursor:pointer;
background-position: 0 -32px;
}

/* メインとフッターのリスト位置調節 */
#main ul, #footer ul{margin-left: 20px;}
#main li, #footer li{margin-bottom: 3px;}


/*************
サイド（左側）コンテンツ
*************/
#sidebar {
float: left;
width: 265px;
padding: 20px 0px 40px 22px;
margin-bottom:30px;
}

#sidebar p{margin-bottom: 20px;}

#sidebar h3 {
margin-top: 5px;
padding-left: 15px;
line-height: 50px;
font-size: 15px;
font-weight: normal;
color: #ffffff;
background: #0b82be url(images/heading2.png) no-repeat;
}

#sidebar ul{
padding: 10px 0;
}

#sidebar li{
margin: 0 0 10px 0;
list-style: none;
border-bottom: 1px dashed #1793d9;
}

#sidebar li a{
background: url(images/list.png) no-repeat 0 50%;
display: block;
padding-left:15px;
}

#sidebar li a:hover{background-position: 3px 50%;}

/************お問い合わせボタン*************/
.side1{position:relative;
width:250px;
height:200px;
}
.side1 a { display: block; 
}

a.side1{
margin-bottom:20px;
position:absolute;
background:url(images/mailbutn.png);
line-height: 31px;
width:226px;
height:31px;
display: block;
top:174px;
left:20px;
}

a.side1:hover {
cursor:pointer;
top: 174px;
left: 20px;
width:226px;
height:31px;
background-position:0 -31px;
}

/************お客様の声*************/
.side2{position:relative;
width:265px;
height:175px;
margin-top:10px;
}

.side2 a { display: block; 
}

a.side2{
background:url(images/voice.png);
line-height: 175px;
}

a.side2:hover {
cursor:pointer;
background-position:0 -175px;
}
/********他社バナー**********/
.side3{position:relative;
width:265px;
height:67px;
margin-top:5px;
top:20px;}

.side3 a{display:block;}

a.side3{
background:url(images/daiei-logo.png);
line-height:200px;}

a.side3:hover{
cursor:pointer;
background-position:0 -201px;
}

/*************
/* フッター
*************/
#footer{
clear:both;
padding: 10px 0 10px;
border-top: 1px solid #cccccc;
width:910px;
}

#footer .inner{
overflow: hidden;
width:900px;
}

* html #footer .inner{height:1%;}

.underbox{
width:910px;
height:20px;
font-size:10px;
text-align:center;
}

.underbox a:hover{
text-decoration:underline;
color:#1bab25;
}

address{
padding: 20px 0 3px;
text-align: center;
font-style:normal;
font-size: 12px;
clear:both;
display:block;
}

/*　pagetop用　*/
#pagetop {
     display: none;
     position: fixed; /*　スクロールしても固定表示　*/
     right: 50px; /*　画面右からの距離　*/
     bottom: 100px; /*　画面下からの距離　*/
     z-index: 100; /*　重なり順の指定　*/
}
#pagetop a {
     height: 18px;
     width: 118px;
     text-decoration: none; /*　ブランクのテキストリンク対策　*/
     background: url(images/pagetop.png) no-repeat;
     display: block; /*　画像の表示　*/
}

/*****固定ページ****/
.company{
width:618px;
height:250px;
margin-top:20px;
position:relative;
background: url(images/basebox.png) no-repeat;}
.com{
padding-top:30px;
margin-left:30px;
}

/**所在地**/
.map{
width:143px;
height:36px;
margin-left:30px;
}

p.moji{
margin-top:-74px;
margin-left:0px;
}

p.moji a{
color:#000;
}

p.moji a:hover{
color:#fff;}

.map1{
width:143px;
height:36px;
margin-left:30px;
}
p.moji1{
margin-top:-74px;
margin-left:-4px;
}

p.moji1 a{
color:#000;
}

p.moji1 a:hover{
color:#fff;}

/*環境商品一覧*/
#main p.environment{
width:500px;
margin-top:-20px;}

#main .surroundgreen{
border:solid 1px #008e42;
width:600px;
margin-left:20px;
}

#main .surroundgreen img.magic{
margin-left:5px;
width:260px;
height:173px;
margin-bottom:-20px;
}

#main .surroundgreen img.prowater{
margin-top:-200px;
width:260px;
height:173px;
margin-right:5px;
margin-top:-183px;}

#main .surroundgreen .magicbox{
width:260px;
height:173px;
margin-left:5px;
}

#main .surroundgreen img.hydowater{
margin-top:-200px;
width:260px;
height:173px;
margin-right:5px;}

/*固定ページ　水素水サーバー*/
#main p.green{
color:#037237;
font-size:16px;}

#main p.greensmall{
color:#037237;
font-weight:bold;}

#main .squarebox{
border-style: solid 1px #008e42;
background:#d3f9d7;
float:right;
width:310px;
height:200px;
color:#000;
line-height: 150%;
display:block;
}

#main .lastleft{
float:right;
width:350px;
display:block;
left:470px;
top:1100px;
position:absolute;
}

#main p.orange{
color:orange;
font-weight:bold;
font-size:16px;}

#main p.pink{
color:deeppink;
font-weight:bold;
font-size:16px;}

#main p.blue{
color:blue;
font-weight:bold;
font-size:16px;}

#main p.green{
color:darkgreen;
font-weight:bold;
font-size:16px;}

#main p.purple{
color:purple;
font-weight:bold;
font-size:16px;}

#main p.lightblue{
color:blue;
font-size:16px;}

/*固定ページマジックバイオくん*/
#main p.howto{
width:350px;
float:right;
margin-top:-1080px;
margin-left:250px;
position:absolute;}

#main p.howto2{
width:350px;
float:right;
margin-top:-920px;
margin-left:250px;
position:absolute;}

#main p.howto3{
width:350px;
float:right;
margin-top:-770px;
margin-left:250px;
position:absolute;}

#main p.howto4{
width:350px;
float:right;
margin-top:-600px;
margin-left:250px;
position:absolute;}

#main p.howto5{
width:350px;
float:right;
margin-top:-450px;
margin-left:250px;
position:absolute;}

#main p.howto6{
width:350px;
float:right;
margin-top:-300px;
margin-left:250px;
position:absolute;}

#main p.howto7{
width:350px;
float:right;
margin-top:-140px;
margin-left:250px;
position:absolute;}

#main table.lineup{
margin-left:30px;
margin-top:10px;
color:#000;
border-style: dotted ;
border-color:#008e42;
border-right-style:none;
border-left-style:none;}

#main p.ask{
border-style:ridge ;
border-color:#008e42;
margin-left:30px;
width:500px;
background:#d1fcaf;
color:green;}

/*ナノアクア*/
#main p.waterofprotect{
font-weight:bold;
font-size:16px;
color:blue;
}

#main p.nano{
width:400px;}

#main p.nanoaqua{
color:green;
font-size:16px;
font-weight:bold;
margin-top:-15px;
margin-bottom:-15px;}

/*会社概要*/
#main table.lineups{
margin-left:30px;
margin-top:10px;
color:#000;
border-style: dotted ;
border-color:#008e42;
border-right-style:none;
border-left-style:none;
line-height:400%}

/* 20150819 追記 */
#main #firescue h3 {
font-size: 16px;
line-height: 1.5;
background:none;
padding:5px 0;
margin:15px 0 0 0;
letter-spacing: 0;
color: #D2232B;
border-bottom:2px solid #D2232B;
width:590px;
height:auto;
background: url(http://santopic.co.jp/wp-content/uploads/2015/08/fr_icon.png) no-repeat bottom right ;
clear:both;
}
#main #firescue h4 { background:none; color:#D2232B; margin:15px 0 0 0; padding-left:0; font-size:15px; text-align:center; clear:both; }
#main #firescue p  { padding:5px; font-size: 13px; }
#main #firescue ul { margin:10px 0 ; }
#main #firescue ul li { list-style-type:none; }
#firescue > ul > li { width:33%; display:table-cell; }
#firescue > ul > li img { width:100%; }
#main #firescue p.catch { font-size:15px; font-weight:bold; text-align:center; color:#D2232B; }
#firescue > ul > li > ul >li { color:#333; text-align:center; font-size:13px; }
.fl { float:left; margin:10px auto; }
.fr { float:right; width:468px; }
#main #firescue .fr > h4 { color:#333; }
#main #firescue h4.change { color:#333; text-align:left; }
#main #firescue dl dt { font-size:13px; font-weight:bold; padding:2px 0 5px 0; }
#main #firescue dl dd { color:#333; font-size:13px; }
#main #firescue span.red { color:#D2232B; font-weight:bold; }
table.hikaku {
	width: 650px;
	margin: 0 auto;
	border-collapse: separate;
	border-spacing: 0px 5px;
	font-size: small;
}

table.hikaku th, table.hikaku td {
	padding: 5px;
}

table.hikaku th {
	background: #295890;
	vertical-align: middle;
	text-align: left;
	width: 130px;
	overflow: visible;
	position: relative;
	color: #fff;
	font-weight: normal;
	font-size: small;
}

table.hikaku th:after {
	left: 100%;
	top: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: rgba(136, 183, 213, 0);
	border-left-color: #295890;
	border-width: 10px;
	margin-top: -10px;
}

table.hikaku td {
    background: #f8f8f8;
    width: 520px;
    padding-left: 20px;
    font-weight: normal;
    font-size: small;
}

/* 会社概要 */
#main table.lineups{ border:1px solid #008e42; }
#main table.lineups th { border:1px solid #008e42; color:green; width:180px; background:#98FB98; }
#main table.lineups td { padding-left:10px; line-height:1.5; }
#map1 { margin:10px auto; width:550px height:400px; }
#main h3.map-title{
background: green ;
width:608px;
height:auto;
color:#fff;
margin:20px 0 10px 0 ;
line-height:1;
letter-spacing:0;
padding:10px 0 10px 10px; 
}