@charset "utf-8";

/* CSS Document */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong,  tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, span,
article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin:0; padding:0; border:0; font-style:normal; font-weight:normal; font-size:100%; vertical-align:baseline;}
 
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display:block;}
html{ overflow-y:scroll;}
blockquote, q { quotes:none;}
blockquote:before, blockquote:after, q:before, q:after { content: ''; content:none;}
input, textarea{ margin:0; padding:0;}
ul{ list-style:none;}
ol{margin-left:20px;}
table{ border-collapse:collapse; border-spacing:0;}
caption, th{ text-align:left;}
a:focus { outline:none;}

.clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden;}  
.clearfix { display:inline-table; }  
/* Hides from IE-mac \*/  
* html .clearfix { height:1%; }  
.clearfix { display:block; }  
/* End hide from IE-mac */  
 
* { box-sizing:border-box;}

a { color:#009987; text-decoration:none;}
a:hover { text-decoration:underline;}
a:hover img { opacity:0.75; filter:alpha(opacity=75); -ms-filter:"alpha(opacity=75)";}
a, a:hover { -webkit-transition:0.1s; -moz-transition:0.1s; -o-transition:0.1s; transition:0.1s;}

img { max-width:100%; height:auto; vertical-align: bottom;}
.mincho { font-weight:bold; font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;}
.center{text-align:center;}
.small{font-size:80%;}
.midi{font-size:110%;}
.big{font-size:140%;}
.bold{font-weight:bold;}
.red{color:red;}
.white{color:#fff;}
.black{color:#333;}
.migi{float:right;}
.hidari{float:left;}
.right{text-align: right;}
.line{border:1px solid #ccc;}
.tbLine{border-top:1px dotted #666; border-bottom:1px dotted #666; padding:10px; margin-bottom:3px;}
.bLine{border-bottom:1px dotted #666; padding:10px;}
.ml100{margin-left:100px;}


/*---- body, wrap, inner ----*/

body {text-align:center; font-size:16px;  font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif !important; z-index:2000; color:#333;}
.Cinner { width:1180px; margin:0 auto; text-align:left;}

#sideArea{width:224px; float:left; background:#ccc; border:1px solid #ccc;}
#mSubNavi { display: none;}

#mainArea{ width:940px; float:right;}
#mainArea:after{ clear:both;}

.pc{ display:block;}
.mb{ display: none;}



@media screen and (max-width: 768px){
	body {max-width:100%; font-size:14px;}
	.Cinner { width: 100%; padding: 0 10px 40px 10px; text-align:left; float:left;}
	#sideArea { display: none;}
	#mSubNavi { display: block; width:100%;margin-top: 5px;}
	#mSubNavi select { width: 100%; padding: 3px 6px; border: 1px #666 solid; border-radius:3px; -webkit-border-radius:3px; -moz-border-radius:3px; }
	#mainArea{ width:98%; margin:10px 1%; float:left;}
	.pc{ display:none;}
	.mb{ display: block;}
}

/*---- header ----*/

#headerWrap {width:100%; z-index:9999; text-align:left; position:fixed; background:url(../image/common/header_base.gif) repeat-x;}
#headerInner { position:relative; height: 72px; width:1180px; margin:0 auto; text-align: left;}

#headerInner .lngBox { position: absolute; top:0px; right: 0px;}
#headerInner .lngBox a { display: inline-block; height: 24px; line-height: 24px; padding: 0 16px; border: 1px #ccc solid; border-top: none; font-size: 13px; border-radius:0 0 6px 6px; -webkit-border-radius:0 0 6px 6px; -moz-border-radius:0 0 6px 6px; }
#headerInner .lngBox a.login { background: #009987; color: #fff; }

#headerLogo { position:absolute; top:0px; left:0px;}

#gNavi { position:absolute; top:30px; left:374px; font-size:18px;}
#gNavi > .menuBtn:hover { opacity:0.75; filter:alpha(opacity=75); -ms-filter:"alpha(opacity=75)";}
#gNavi > ul { }
#gNavi > ul li { float:left;}
#gNavi > ul li.mb{ display: none;}
#gNavi > ul li.mb a{ display: none;}
#gNavi > ul li a { padding-top:6px; display:block; color:#333; text-align:center; width:134px; height:38px; border:1px solid #006633; -moz-border-radius:9px; -webkit-border-radius:9px; border-radius:9px;}
#gNavi > ul li a.active {background:#006633; color:#fff; -moz-border-radius:9px; -webkit-border-radius:9px; border-radius:9px;}
#gNavi > ul li a:hover {background:#006633; color:#fff; -moz-border-radius:9px; -webkit-border-radius:9px; border-radius:9px;}
#gNavi > ul li.close{display:none;}
#gNavi > ul li.close a:before{ content:'';}
#gNavi > ul li a.wBorder{border-right:1px solid #739900;}

@media screen and (max-width: 768px){
	#headerWrap { width:100%; height:54px; background:#fff; z-index:9999;border-bottom:4px solid #006633;  width:100%;}
	#headerInner { position:relative; width:100%; margin:0 auto; text-align: left;}
	#headerLogo { position:absolute; top:0; left:0;  }
	#headerLogo img{width:260px; height:auto;}
	
	#gNavi { position:relative; top:0; left:0px; width:70%; height:40px; margin-left:30%; border-bottom:1px solid #fff; font-size:14px; }
	#gNavi >.menuBtn { display:block; width:100%; height:50px; text-align:right;}
	#gNavi >.menuBtn > span:before{ margin-right:0; content:url(../image/mb/menu.png);}
	#gNavi >.menuBtn:hover { opacity:0.75; filter:alpha(opacity=75); -ms-filter:"alpha(opacity=75)";}
	
	#gNavi > ul { position: absolute; width: 100%; top:50px; right:-100%; border: 1px #fff solid;}
	#gNavi > ul li {  float:none; text-align:left;}
	#gNavi > ul li a { display:block; width:100%; height:40px; text-align:left; padding-top:0px; padding-left:20px; line-height:40px; color:#fff; background:#006633; border-bottom:1px solid #fff; -moz-border-radius:0px; -webkit-border-radius:0px; border-radius:0px;}
	#gNavi > ul li a.active {-moz-border-radius:0px; -webkit-border-radius:0px; border-radius:0px;}
	#gNavi > ul li a:before { margin-right:5px; content:'>'; color:#fff;}
	#gNavi > ul li a:hover { text-decoration:none; background:#283204; -moz-border-radius:0; -webkit-border-radius:0; border-radius:0;}
	#gNavi > ul li.mb{ display: block;}
	#gNavi > ul li.mb a{display:block; height:40px; line-height:40px; padding-top:0px; padding-left:40px; color:#fff; background:#666; border-bottom:1px solid #fff; -moz-border-radius:0px; -webkit-border-radius:0px; border-radius:0px;}
	#gNavi > ul li.mb a:hover { text-decoration:none; background:#283204; -moz-border-radius:0; -webkit-border-radius:0; border-radius:0;}
	#gNavi > ul li.close a{ height:24px; line-height:24px; text-align:center;}
	#gNavi > ul li.close a:before{ content:'▲';}

}


/*----title ----*/
#title { position:relative; height:218px; width:1180px; margin:0 auto; text-align: left;}
#title #h1area{ position:absolute; top:72px; left:0px; width:100%; height:100px;}
#title h1 { position:absolute; top:0; left:30px; font-size:32px; padding-top:20px;}
#title p.h1catch{position:absolute; top :30px; left:240px; font-size:24px; line-height:1.0; }
 .productTop{background:url(../image/common/h1_product_base.jpg) no-repeat;}
 .productDetail{background:url(../image/common/h1_product_detail_base.jpg) no-repeat;}
 .companyh1{background:url(../image/common/h1_company_base.jpg) no-repeat;}
 .h1tech{background:url(../image/common/h1_tech_base.jpg) no-repeat;}

#title #bread {position:absolute; top:172px; left:0; font-size: 20px; font-weight:bold; background:url(../image/common/bread_base.png) repeat-x; width:100%; padding:6px 20px;}
#title #bread span{ color:#fff; padding:10px; margin-right:70px;}
#breadTop {font-size: 20px; font-weight:bold; background:url(../image/common/bread_base.png) repeat-x; width:100%; padding:6px 20px;}
#breadTop span{ color:#fff; padding:10px; margin-right:70px;}

#title #bread2 {position:absolute; top:172px; left:0; font-size: 20px; font-weight:bold; background:url(../image/common/bread2_base.png) repeat-x; width:100%; padding:6px 20px;}
#title #bread2 span{ padding:10px; margin-right:70px;}

#title #bread3 {position:absolute; top:172px; left:0; font-size: 20px; background:url(../image/common/bread3_base.png) repeat-x; width:100%; padding:6px 20px;}
#title #bread3 span{ padding:10px; margin-right:70px;}

#title #breadList { position:absolute; top:172px; left:0; height: 40px; line-height: 40px; font-size: 20px; background:url(../image/common/bread.png) repeat; width:100%; overflow: hidden;}

#title #breadList .p1 { position: relative; display: inline-block; width: auto; min-width: 220px; height: 40px; background: #666; padding: 0 20px;}

#title #breadList .p2 { position: relative; display: inline-block; width: auto; min-width: 50px; height: 40px; margin-right: 50px; background: #ababab; padding: 0 17px 0 50px;}
#title #breadList .p2:before { position: absolute; top: 0px; left: 0px; content: ''; width: 0; height: 0; border-style: solid; border-width: 20px 0 20px 33px; border-color: transparent transparent transparent #666;}
#title #breadList .p2:after { position: absolute; top: 0px; right: -33px; content: ''; width: 0; height: 0; border-style: solid; border-width: 20px 0 20px 33px; border-color: transparent transparent transparent #ababab;}

#title #breadList .p3 { position: relative; display: inline-block; width: auto; min-width: 50px; height: 40px; padding: 0 0 0 50px;}
#title #breadList .p3:before { position: absolute; top: 0px; left: 0px; content: ''; width: 0; height: 0; border-style: solid; border-width: 20px 0 20px 33px; border-color: transparent transparent transparent #666;}

@media screen and (max-width: 768px){
	#title { position:static; height:120px; width:100%; margin:0 auto; text-align: left;}
	#title #h1area{ position:absolute; top:54px; left:0px; width:100%; height:40px; background:#006633;}
	#title h1 { position:absolute; top:-20px; left:10px; font-size:20px; color:#fff;}
	#title p.h1catch{display:none;}	
	#title #bread{position:absolute; top:90px; left:0; font-size: 14px; background:#666; width:100%; padding:5px; color:#fff;}
	#title #bread span{padding:0; margin-right:10px;}
	#title #bread3{position:absolute; top:90px; left:0; font-size: 14px; background:#666; width:100%; padding:5px; color:#fff;}
	#title #bread3 span{ padding:0; margin-right:10px;}

	#title #breadList { top:94px; height: 30px; line-height: 30px; font-size: 14px;}
	#title #breadList .p1 { width: auto; min-width: 1px; padding: 0 10px;}
	#title #breadList .p2, #title #breadList .p3 { margin-right: 33px; padding: 0 17px 0 50px;}
	#title #breadList .p2:before, #title #breadList .p3:before { border-width:15px 0 15px 24px; background: none;}
	#title #breadList .p2:after { right: -24px; border-width: 15px 0 15px 24px;}
}
@media screen and (max-width: 480px){
	#title #breadList { top:94px; height: 24px; line-height: 24px; font-size: 12px;}
	#title #breadList .p2, #title #breadList .p3 { margin-right: 33px; padding: 0 2px 0 30px;}
	#title #breadList .p2:before, #title #breadList .p3:before { border-width:12px 0 15px 22px;}
	#title #breadList .p2:after { right: -24px; border-width: 12px 0 12px 24px;}
}
@media print{	
	#headerWrap { position:static; height:106px;}
	.pc{display:block;}
	.mb{display: none; height:0;} 
}

/*---- pagetop ----*/
#pagetopA{position:fixed; width:1180px; bottom: 80px;}
.gotop a{display:block; float:right; width:60px; text-align: center; background:#fff; color:#666; line-height: 120%; padding:10px; border:1px solid #666; -moz-border-radius:40px; -webkit-border-radius:40px; border-radius:40px;}
.gotop a:hover{ opacity:0.75; filter:alpha(opacity=75); -ms-filter:"alpha(opacity=75)";}



@media screen and (max-width: 768px){
	#pagetopA{width:100%; bottom: 60px;}	
}

/*---- contactBox ----*/
.contactBox{width:100%; background:#ddd; -moz-border-radius:20px; -webkit-border-radius:20px; border-radius:20px; border:4px solid #999; height:72px; margin-top:50px; margin-bottom:10px; text-align:center; line-height: 72px;}
.contactBox a{color:#333; font-size:140%;}
@media screen and (max-width: 768px){
	.contactBox{ width:98%; background:#ddd; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; border:2px solid #999; height:60px; margin:10px auto; text-align:center; line-height: 60px;}
	.contactBox a{color:#333; font-size:100%;}
}

/*---- footer ----*/
footer{width:1180px; margin:0 auto;}
#footerWrap{width:100%; height:418px; text-align: center; padding:10px 50px; font-size:90%; margin:10px auto;
background-image:-moz-linear-gradient(50% 0% -90deg,rgb(35,95,24) 0%,rgb(0,64,0) 100%); 
background-image:-webkit-gradient(linear,50% 0%,50% 100%,color-stop(0, rgb(35,95,24)),color-stop(1, rgb(0,64,0)));
background-image:-webkit-linear-gradient(-90deg,rgb(35,95,24) 0%,rgb(0,64,0) 100%);
background-image:linear-gradient(180deg,rgb(35,95,24) 0%,rgb(0,64,0) 100%);
}
#footerWrap nav{float:left; margin:5px; margin-left:40px;}
#footerWrap nav .FnavBox{float:left; margin:5px; width:200px;}
#footerWrap nav h2{text-align:center; border-bottom:1px solid #ddd; color:#fff; font-size:120%; margin-bottom:10px;}
#footerWrap nav h3{text-align:center; border:1px solid #ddd; color:#fff; font-size:100%; padding:4px;}
#footerWrap nav ul{text-align:left; color:#fff; font-size:13px; line-height:1.8;}
.ml20{ margin-left:10px;}
#footerWrap nav ul li a{ color:#fff;}
#footerWrap nav ul li a::before{content:"▸";}
#footerWrap nav ul li a:hover{text-decoration:underline;}

#addressWrap{width:1180px;}

address{width:100%; height:125px; font-size:14px; text-align:left; background:url(../image/common/footer_iso.gif) no-repeat top right; border-bottom:1px solid #034302;}
address dl{width:100%; line-height:1.0;}
address dt{width:25%; padding:5px; float:left;}
address dd{width:40%; padding:5px; margin-left:25%;}

copy{width:100%; font-size:12px;}


@media screen and (max-width: 768px){
	footer{width:100%; position:fixed; bottom:0;}
	#footerWrap{ display:none; height:1px;}
	#addressWrap{width:100%;background:#006633; height:30px;}
	copy{color:#fff; padding:10px; }
}