@charset "utf-8";

/* @group Reset */

*{ margin: 0;padding: 0 }

a { text-decoration : none}
ul, ol { list-style : none}
img { vertical-align : middle
border: none; }

/* @end */


/* @group Fluid-img */

img { max-width : 100%}

/* @end */


/* @group HTML */

html {
font-family : verdana, sans-serif, "Arial";
font-size : 75%; /*レスポンシブタイプセッティングの指定*/
line-height : 1.5;
/* background : url(../_img_pht/960_grid_12_col.png) repeat-y top center */ }

/* @end */


/* @group Heading */

h1 {
font-size : 3em; /* 48px */
line-height : 1; /* 48px */
margin-bottom : 0.5em } 

h2 {
font-size : 2.25em; /* 36px */
line-height : 1.3333; /* 48px */
margin-bottom : 0.6667em } 

h3 {
font-size : 1.5em; /* 24px */
line-height : 1; /* 24px */
margin-bottom : 1em } 

hgroup h4,h5,h6 {
font-size : 1em; /* 16px */
line-height : 1.5; /* 24px */
margin-bottom : 1.5em } 

/* @end */

/* オリジナル追加の段落設定 */
p.h1_ttl { color: #666; font-weight: bold; font-size: 3em/*48px*/; line-height: 1; font-family: sans-serif, "Arial"; text-align: left; line-break: strict; }
p.h2_lrg-midsi { font-size: 2.25em/*36px*/; line-height: 1.3333; font-family: sans-serif, "Arial"; line-break: strict; }
p.h3_midsi { font-size: 1.5em/*24px*/; line-height: 1.5; font-family: serif, "Bookman Old Style"; font-style:italic; text-align: left ; line-break: strict; }
p.h3_midsi_i1em { font-size: 1.5em/*24px*/; line-height: 1.5; padding-left:1em; font-family: serif, "Bookman Old Style"; font-style:italic; text-align: left ; line-break: strict; }
p.h4_bkclr-midsi { text-indent: 0.7em; font-size: 1.5em/*24px*/; line-height: 1.5; font-family: serif, "Bookman Old Style"; font-style:italic; background-color: #ccd5dd; padding-top: 0.75em/*12px*/; padding-bottom: 0.75em/*12px*/; text-align: left ; line-break: strict; }
p.h4_bkclr-midsi_oldprdct { text-indent: 0.7em; font-size: 1.5em/*24px*/; line-height: 1.5; font-family: serif, "Bookman Old Style"; font-style:italic; background-color: #d9e480/*e6ffe6*/; padding-top: 0.75em/*12px*/; padding-bottom: 0.75em/*12px*/; text-align: left ; line-break: strict; }

p.e-prdct-kmdshi { margin-left: 0.7em; /*color: black;*/ font-size: 1.3em/*19px*/; line-height: 1.5; font-family: serif, "Bookman Old Style"; font-style:italic; margin-top:0; margin-bottom:0; text-align: left; }

p.h5_midsi-sml-l1 { font-size: 1em/*16px*/; line-height: 1.5; font-family: serif, "Bookman Old Style"; font-style:italic; margin-top:0.5em; margin-bottom:0.5em; text-align: left  ; line-break: strict; }
p.h5_midsi-sml-l2 { font-size: 1em/*16px*/; line-height: 1.1; font-family: serif, "Bookman Old Style"; font-style:italic; margin-top:0.3em; margin-bottom:0.5em; text-align: left  ; line-break: strict; }
p.h5_midsi-sml-l3 { font-size: 1em/*16px*/; line-height: 1.2; font-family: serif, "Bookman Old Style"; font-style:italic; margin-top:0.3em; margin-bottom:0.3em; text-align: left  ; line-break: strict; }

p.hbn-l1 { margin-left: 0.7em; font-size: 1em/*16px*/; line-height: 1.5; font-family: sans-serif, "Arial"; margin-top:0.5em; margin-bottom:0.5em; text-align: left  ; line-break: strict; }
p.hbn-l1_i1em { margin-left: 0.7em; font-size: 1em/*16px*/; font-family: sans-serif, "Arial"; line-height: 1.5; margin-top:0.5em; margin-bottom:0.5em; padding-left:1em; text-align:left ; line-break: strict; }
p.hbn-l1_i2em { margin-left: 0.7em; font-size: 1em/*16px*/; font-family: sans-serif, "Arial"; line-height: 1.5; margin-top:0.5em; margin-bottom:0.5em; padding-left:2em; text-align:left ; line-break: strict; }
p.hbn-l1_kjy-i1em { margin-left: 0.7em; font-size: 1em/*16px*/; font-family: sans-serif, "Arial"; line-height: 1.5; margin-top:0.5em; margin-bottom:0.5em; padding-left:1.5em; text-indent:-1.2em; text-align: left  ; line-break: strict; }
p.hbn-l1_kjy-i2em { margin-left: 0.7em; font-size: 1em/*16px*/; font-family: sans-serif, "Arial"; line-height: 1.5; margin-top:0.5em; margin-bottom:0.5em; padding-left:2.5em; text-indent:-1.2em; text-align: left  ; line-break: strict; }
p.hbn-l1_kjy-i3em { margin-left: 0.7em; font-size: 1em/*16px*/; font-family: sans-serif, "Arial"; line-height: 1.5; margin-top:0.5em; margin-bottom:0.5em; padding-left:3.5em; text-indent:-1.2em; text-align: left  ; line-break: strict; }

p.hbn-l2 { margin-left: 0.7em; font-size: 1em/*16px*/; line-height: 1.1; font-family: sans-serif, "Arial"; margin-top:0.3em; margin-bottom:0.3em; text-align: left ; line-break: strict; }
p.hbn-l2_i1em { margin-left: 0.7em; font-size: 1em/*16px*/; font-family: sans-serif, "Arial"; line-height: 1.1; margin-top:0.3em; margin-bottom:0.3em; padding-left:1em; text-align: left ; line-break: strict; }
p.hbn-l2_i2em { margin-left: 0.7em; font-size: 1em/*16px*/; font-family: sans-serif, "Arial"; line-height: 1.1; margin-top:0.3em; margin-bottom:0.3em; padding-left:2em; text-align: left ; line-break: strict; }
p.hbn-l2_kjy-i1em { margin-left: 0.7em; font-size: 1em/*16px*/; font-family: sans-serif, "Arial"; line-height: 1.1; margin-top:0.3em; margin-bottom:0.3em; padding-left:1.5em; text-indent:-1.2em; text-align: left ; line-break: strict; }
p.hbn-l2_kjy-i2em { margin-left: 0.7em; font-size: 1em/*16px*/; font-family: sans-serif, "Arial"; line-height: 1.1; margin-top:0.3em; margin-bottom:0.3em; padding-left:2.5em; text-indent:-1.2em; text-align: left ; line-break: strict; }

p.hbn-l3 { margin-left: 0.7em; font-size: 1em/*16px*/; line-height: 1.2; font-family: sans-serif, "Arial"; margin-top:0.3em; margin-bottom:0.3em; text-align: left ; line-break: strict; }
p.hbn-l3_i1em { margin-left: 0.7em; font-size: 1em/*16px*/; font-family: sans-serif, "Arial"; line-height: 1.2; margin-top:0.3em; margin-bottom:0.3em; padding-left:1em; text-align: left ; line-break: strict; }
p.hbn-l3_i2em { margin-left: 0.7em; font-size: 1em/*16px*/; font-family: sans-serif, "Arial"; line-height: 1.2; margin-top:0.3em; margin-bottom:0.3em; padding-left:2em; text-align: left ; line-break: strict; }
p.hbn-l3_kjy-i1em { margin-left: 0.7em; font-size: 1em/*16px*/; font-family: sans-serif, "Arial"; line-height: 1.2; margin-top:0.3em; margin-bottom:0.3em; padding-left:1.5em; text-indent:-1.2em; text-align: left ; line-break: strict; }
p.hbn-l3_kjy-i2em { margin-left: 0.7em; font-size: 1em/*16px*/; font-family: sans-serif, "Arial"; line-height: 1.2; margin-top:0.3em; margin-bottom:0.3em; padding-left:2.5em; text-indent:-1.2em; text-align: left ; line-break: strict; }

p.hbn-r1 { font-size: 1em/*16px*/; line-height: 1.5; font-family: sans-serif, "Arial"; margin-top:0.5em; margin-bottom:0.5em; text-align: right ; line-break: strict; }
p.hbn-r3 { font-size: 1em/*16px*/; line-height: 1.2; font-family: sans-serif, "Arial"; margin-top:0.3em; margin-bottom:0.3em; text-align: right ; line-break: strict; }

p.hbn-cntr { font-size: 1em/*16px*/; line-height: 1.5; font-family: sans-serif, "Arial"; margin-top:0.5em; margin-bottom:0.5em; text-align: center  ; line-break: strict; }
p.hbn-cntr2 { font-size: 1em/*16px*/; line-height: 1.1; font-family: sans-serif, "Arial"; margin-top:0.3em; margin-bottom:0.3em; text-align: center ; line-break: strict; }
p.hbn-cntr3 { font-size: 1em/*16px*/; line-height: 1.2; font-family: sans-serif, "Arial"; margin-top:0.3em; margin-bottom:0.3em; text-align: center ; line-break: strict; }

p.nakamidsi { margin-left: 0.7em; font-size: 1em/*16px*/; line-height: 1.5; font-family: sans-serif, "Arial"; margin-top:0.5em; margin-bottom:0.5em; text-align: left  ; line-break: strict; }
p.route { font-size: 1em/*16px*/; line-height: 1.5; font-family: sans-serif, "Arial"; margin-top:0.5em; margin-bottom:0.5em; text-align: left ; line-break: strict; }

/* @group Header =ブルーバックのページトップナビゲーション 部の名称＝header*/
header { 
text-align : center;
padding-top : 1.5em;
background : #ffffff
}

header h1 { margin-bottom : 0.5em}
header h2,h3 { color : #0068b7}
/* @end */

/* @group Nav ブルーバックのページトップナビゲーション */
nav { 
margin-bottom : 1.5em;
background-color: #0068b7;
background: -moz-linear-gradient(top, rgba(5,144,253,1) 0%, rgba(0,82,147,1) 88%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(5,144,253,1)), color-stop(88%,rgba(0,82,147,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(5,144,253,1) 0%,rgba(0,82,147,1) 88%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(5,144,253,1) 0%,rgba(0,82,147,1) 88%); /* Opera 11.10+ */
background: linear-gradient(to bottom, rgba(5,144,253,1) 0%,rgba(0,82,147,1) 88%); /* W3C */
}

nav ul { overflow : hidden}
nav ul li { width : 33%/* JPN=25% */; float : left}
nav ul li a {
display : block;
color : #ffffff;/* d8c2a4 */
padding : 0.75em 0
}

nav ul li a:hover {
color : white;
background-color : #0590fd /* 7d4934 */
}


/* gnav2追加*/
#gnav2 { margin: 0 0 0.3em/*-0.3em*/ 3%; } 
#gnav2 ul { z-index: 1; overflow:hidden; }
#gnav2 li { z-index: 1; list-style: none; float: left; }
/* @end */


/* --右サイドに移動していない状態の「スパーン"sub"」------------------- */
#contents #sub { width: 90%; /* float:right */ margin : 2em 0 0 2em;}
#contents #sub ul { text-align: left; } 
#contents #sub li { display: inline-block; vertical-align: top; margin: -0.5em -0.1em;}
#contents #sub a  { display: block; width: 18em/* 20150213まで10em */; background-color: #efefef; text-align: center; padding: 0.5em 0em; margin-bottom: 0; border-color: #e6e6e6 #d6d3d3 #a4a4a4; border-style: solid; border-width: 2px 2px 4px 2px; }
#contents #sub li a:hover { background-color: #999999; }

p.content { font-size: 0.9em; font-family: sans-serif, "Arial";} 
/* @end */


#route_uppr { width : 93.75%; margin: 1.5em auto; border-bottom: 2px solid #999999; }
#route_uppr_prdct { width : 93.75%; margin: 1.5em auto; border-bottom: 2px solid #c00; }
#route_uppr_enrng { width : 93.75%; margin: 1.5em auto; border-bottom: 2px solid #009963; }
#route_uppr_sprt { width : 93.75%; margin: 1.5em auto; border-bottom: 2px solid #f90; }
#route_uppr_abutus { width : 93.75%; margin: 1.5em auto; border-bottom: 2px solid #0080ff; }


/* @group Contents */
#contents {
width : 90%;
margin : 0 auto;
/* text-align : center */}


#colm3 { width:90%; /* float:left; */ margin-top: 1em; line-break: strict; }
#colm03-oldprdcts { width:100%; /* float:left; */ margin-top: 1em; line-break: strict; background-color: #d9e480/*e6ffe6*/; }

#contents p { 
margin-bottom : 1.5em;
/* text-align : left */}
#contents img { 
margin-bottom : 0em /*1.5em;*/  /*製品情報のレスポ化終了後、イメージ下の行間少なくする為に1.5emを0に変更*/
/* box-shadow : 0 0 5px #001a43  2f1f1f =画像の影を無しにした */}

/* @end */

#copyright { text-align: center; clear: both;
padding : 1.5em;
color : #4a5767;
text-align : center;
background-color: #dce5ee; }

/* @group Footer 

footer {
padding : 1.5em 0;
color : white;
text-align : center;
background : url(../images/footer_bg.png)}*/

#contents #sub { margin : 2em 0 }


/* --- ページトップへ戻る の記述------------------ */
.pageTop {
	display:none;
	position:relative;
	width:100%;
	max-width:900px;
	height:0;
	margin:0 auto; }
.pageTop a {
	position: fixed;
	bottom: 0px;
	left:-68px;
	display: block;
	width: 66px;
	hegiht:66px;
	margin-left:100%;
	/* ↓カスタマイズ：ボトム位置から少し離す設定___iPhone Safari 最下のツールバーと離すため↓ */
	margin-bottom:2%;
	/* ↓以下はリンク装飾↓ */
	padding:1em 0 1em 2px;
	background:#0068b7;/* #3498db 矢印部分の背景色をコーポレートカラーに変更 */
	/* ↓透明度の設定_ここから */
	filter:alpha(opacity=80);/* IE6,7 向けの指定 */
	-ms-filter: "alpha(opacity=70)";/* IE8 向けの指定 */
	-moz-opacity: 0.8;/* Firefox（Mozzila）向けの指定 */
	opacity: 0.8;/* SafariやOpera向けの指定 */
	/* 透明度の設定_ここまで */
	text-align:center;
	outline:none;
	text-decoration: none;
	z-index:9999;
	border-radius:3px 3px 0 0;/* ボックスの４つのコーナーの角丸設定　 左上・右上・右下・左下、/ で区切っていないので水平・垂直とも同値 */
	}
.pageTop a:before,
.pageTop a:after {
	position:absolute;
	left:50%;
	content:"";
	width:0px;
	height:0px;
	margin-left:-10px;
	border:10px solid transparent; 
	}
.pageTop a:before {
	top:50%;
	margin-top:-13px;
	border-bottom:10px solid #0068b7;/* #3498db  矢印下ボーダーラインの塗色をコーポレートカラーに変更、矢印下ボーダーラインの下側を太い10px線で塗りつぶしている */ 
	}
.pageTop a:after {
	top:50%;
	margin-top:-15px;
	z-index:-1;
	border-bottom:10px solid #fff; /* 矢印の色？？？ */}
/* --- ページトップへ戻る--ここまで---------------- */


/* @end */

/* Youtube動画の埋め込みをレスポンシブ対応するCSS*/
.youtube {
  position: relative;
  width: 100%/*100% */;
  padding-top: 56.25%;
}
.youtube iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%/*100% */ !important;
  height: 100%/*100% */ !important;
}
/* Youtube動画・・・・@end */


/* ------------------------------------------------------------------ */
/*768px*/
@media screen and (min-width : 768px){
/* ここから768〜1023pxまでのcssを記述*/

html{ font-size : 87.5%} /*レスポンシブタイプセッティングの指定*/
#contents { text-align : left}

}

/* ------------------------------------------------------------------ */
/*1024px*/
@media screen and (min-width : 1024px) {
/* ここから1024px以上のcssを記述*/

html{ font-size : 100%} /*レスポンシブタイプセッティングの指定*/

/* @group Nav */
nav ul {
width : 93.75%;/* 960/1024 */
margin : 0 auto}
/* @end */

/* @group Contents */
#contents {
overflow : hidden;
width : 93.75% }

#contents #main,
#contents #sub { 
float : right; /* left */
margin : 0 1.0416667% } 

#contents #main { width : 64.5833333%; /* >>margin追加margin : 2em 0em */ } 
#contents #sub { width : 31.25%; /* >>margin追加 margin : 2em 0em*/ }
/* @end */

/* ---以下は右サイドに移動した状態の「スパーン"sub"」------------------ */
/* #contents #sub { width: 29.296875% ; float:right; margin : 2em 0 0 2em;} */
#contents #sub ul { text-align: left;} 
#contents #sub li { display: inline-block; margin: -0.6em -0.1em;}
#contents #sub a  { display: block; width: 18em/* 20150213まで8em 300px */; background-color: #efefef; text-align: center; padding: 12px 3px 12px 3px; margin-bottom: 5px; border-color: #e6e6e6 #d6d3d3 #a4a4a4; border-style: solid; border-width: 2px 2px 4px 2px; }
#contents #sub li a:hover { background-color: #999999; }

p.content { font-size: 0.9em; font-family: sans-serif, "Arial"; } 

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


/* @group copyright */

#copyright{ width : 91.796875%; /*940/1024*/ margin : 0 auto; padding : 1em }


/* --- ページトップへ戻る 1024px以上用------------------ */
.pageTop {
	width:90%;
	}
.pageTop a {
	left:auto;
	margin-left:920px;
	/* ↓透明度の設定_ここから */
	filter:alpha(opacity=80);/* IE6,7 向けの指定 */
	-ms-filter: "alpha(opacity=70)";/* IE8 向けの指定 */
	-moz-opacity: 0.8;/* Firefox（Mozzila）向けの指定 */
	opacity: 0.8;/* SafariやOpera向けの指定 */
	/* 透明度の設定_ここまで */
}
/* --- ページトップへ戻る 1024px以上用--ここまで---------------- */


/* @end */


/* Youtube動画の埋め込みをレスポンシブ対応するCSS 1024px以上*/
#youtube {
  position: relative;
  width: 64.5833333%/*100% */;
  padding-top: 56.25%;
}
#youtube iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 64.5833333%/*100% */ !important;
  height: 64.5833333%/*100% */ !important;
}
/* Youtube動画・・・・1024px以上 end */