@charset "utf-8";

/* @group Reset */
*{ margin: 0;padding: 0 }

a { text-decoration : none}
ul, ol { list-style : none}
img { vertical-align : middle
border: none; }
/* group Resetここまで */


/* @group Fluid-img */
img { max-width : 100%}
/* group Fluid-imgここまで */


/* @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 */ }
/* group HTML ここまで */


/* @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 } 
/*group Heading ここまで */

/* オリジナル追加の段落設定 */
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.h5_bkclr-sml-midsi { text-indent: 0.7em; font-size: 1em/*16px*/; line-height: 1.5; font-family: serif, "Bookman Old Style"; background-color: #e6e6e6; margin-top:0.5em; margin-bottom:0.5em; 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; }
/* オリジナル追加の段落設定 ここまで*/


/* css_ver22 group Header*/
a, a:hover {
	text-decoration: none;
}

header {
	float: left;
	width: 100%;
	padding: 0.5em/*10px*/;
	font-family : verdana, sans-serif, "Arial";
	text-align : center;
	/*border-bottom: 1px solid #e6e6e6;*/
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;	
}

header img {
	float: left;
}

header nav {
	float: left;
	width: 100%/*70%*/;
	text-align: center/*left*/;
	/*margin-left: 20px;*/
	margin-bottom : 0.1em/*1.5em*/;/*navの下の白場*/
	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 */
}

header nav ul {
	padding: 0.7em/*2em/30px*/ 0;
	margin: 0;
	list-style-type: none;
}

header nav ul li {
	width : 18%;
	float : left;
	margin-left: 3em/*10px*/;
	display: inline;
}

header nav ul li a {
	font-size : 90%;
	color : #efefef;/* #d8c2a4 */
	padding : -1em 1em;
}

header nav ul li a:hover {
	color : #efefef;
	background-color : #0590fd /* 7d4934 */;
	padding : 0.7em 1em;
}

header nav ul ul {
	display: none;
}

/* @media screen and (max-width: 37.5em) { /* 600px */

	/* h1 {
		font-size: 44px;
	}

}*/
/* css_ver22 group Headerここまで */


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

header h1 { margin-bottom : 0.5em}
header h2,h3 { color : #0068b7}
/* css_ver21 group Headerここまで */


/* @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 */
}
/* @group Nav ここまで */


/* 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 */


p.content { font-size: 0.9em; font-family: sans-serif, "ＭＳ Ｐゴシック", "ヒラギノ角ゴ Pro W3";} 

/* route ・・・トップページ専用のroute upper*/
#route_uppr_home { width : 93.75%; margin: 0em auto 1.5em; border-bottom: 1px solid #0080ff }
/* routeここまで */

/* 1024px以下での@group Contents */
#contents {
width : 90%;
margin : 0 auto;
/* margin : 20160208設定不要？無効のため設定を削除-1em 0.8em 0 0.8em ----初期css22にて変更 css21まででの数値は右記の通り　-1em 0 0 2em　*/
/* text-align : center */}

#contents #sub { margin : 2em 0 }

/* ---1024px以下での@group Contents ここまで*/

#header-logo { 
margin : 2 0 -2em ;　/*1024px以下での左上ロゴの上マージン設定。英文ロゴでの設定に合わせる*/
padding-top : 1em ;
width : 90%;
height: 63px; 
color : #ffffff }

#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 : 0.25em /*1.5em;(20170407：広すぎた行間を少なくする為に0.25emに変更) text-align : left */}

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

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

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

#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;/* ボックス部の背景色をコーポレートカラー#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;/* border-radius>>ボックスの４つのコーナーの角丸設定　 左上・右上・右下・左下、/ で区切っていないので水平・垂直とも同値 */
	}
	
.pageTop a:before,
.pageTop a:after {
	position:absolute;
	left:50%;/*矢印の横位置を決めている*/
	content:"";
	width:0px;
	height:0px;
	margin-left:-10px;/*矢印の横位置を決めている*/
	border:10px solid/*solid=1本線*/ transparent/*transparent=透明*/;  
	}
	
.pageTop a:before {
	top:50%;
	margin-top:-13px;
	border-bottom:10px solid #0068b7;/* 矢印下ボーダーラインの塗色をコーポレートカラーに変更、矢印下ボーダーラインの下側をコーポレートカラーの太い10px線で塗りつぶしている   元の色=#3498db*/ 
	}

.pageTop a:after {
	top:50%;
	margin-top:-15px;
	z-index:-1;
	border-bottom:10px solid #fff } /* 矢印の色:白　#fff=#ffffff */
/* --- ページトップへ戻る--ここまで---------------- */

#colm-stmp { width: 100%; /* float:right */ margin : 1em 0 -1em; text-align: left; }
/* ---左スパーン＝contentsでの四角枠リスト：サイトマップ用 英文サイト専用設定------------------ */
#colm-stmp ul { text-align: left; } 
#colm-stmp li { display: inline-block; margin: 0em -0.1em;}
#colm-stmp a  { display: block; width: 8em; font-size: 0.85em; color: #ffffff; background-color: #3399ff/*efefef*/; text-align: center; padding: 0.75em 1em; margin-bottom: 0; border-color: #e6e6e6 #d6d3d3 #a4a4a4; border-style: solid; border-width: 2px 2px 4px 2px; }
#colm-stmp li a:hover { background-color: #ccff66; }
/* --------------------- */


/* 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}
/* group Nav ここまで */

#header-logo { 
margin : -1.5em 0 ; /*1024px以上での左上ロゴの上マージン設定。英文ロゴでの設定に合わせる*/
padding-top : 1em ;
width : 90%;
height: 63px; 
color : #ffffff
}

/* @group Contents */
#contents {
text-align : left ;
margin : -1em 0 0 2em /*20170724までは0 0 0 2em　JPNは、-2em 0 0 2em*/
/* text-align : center */ }

#contents #main{ 
margin : 0 1.0416667% } 

/* @group copyright */
#copyright{ width : 91.796875%; /*940/1024*/ margin : 0 auto; padding : 1em }
/* group copyrightここまで */

/* --- ページトップへ戻る 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以上用--ここまで---------------- */


/* 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 */

}