@charset "UTF-8";

/*-------------------------------------------------------
KOP SOLUTIONL'S
Mod : 2016.03.09 MT 
---------------------------------------------------------*/

* {
margin: 0;
padding:0;
line-height:1.6;
}

html {font-size: 62.5%;}

body{
color:#343434;
font-size: 1.4rem;
font-family:'メイリオ', Meiryo, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'ＭＳ Ｐゴシック', sans-serif;
text-align:center;
min-width:1200px;
}



header{
width:100%;
height:170px;
z-index:100;
position: fixed !important;  
top:0;  
left:0;
background: url(../img/header_bg.gif) repeat 0 0;
}


* html header    {
position: absolute;     
top: expression(eval(document.documentElement.scrollTop+0));  
}  

header .inner{
position:relative;
width:1200px;height:170px;
margin:0 auto;
}

header #logo{
position:absolute;
top:30px;left:0;
width:293px;
height:64px;
}


/* header > navigation
---------------------------------------------------------- */

header ul#navigation {
position: absolute;
top: 110px;left:0;
width: 1200px;
min-width:1200px;
height: 60px;
margin: 0 auto;
list-style:none;
}

header ul#navigation li {
float: left;
}

header ul#navigation li a {
display: block;
width: 300px;
height: 60px;
text-indent:-9999px;
background: url(../img/menu.jpg) no-repeat 0 0;
}

header ul#navigation li.menu01 a {background-position: 0 0;}
header ul#navigation li.menu01 a:hover {background-position: 0 -60px;}

header ul#navigation li.menu02 a {background-position: -300px 0;}
header ul#navigation li.menu02 a:hover {background-position: -300px -60px;}

header ul#navigation li.menu03 a {background-position: -600px 0;}
header ul#navigation li.menu03 a:hover {background-position: -600px -60px;}

header ul#navigation li.menu04 a {background-position: -900px 0;}
header ul#navigation li.menu04 a:hover {background-position: -900px -60px;}



/* mainvisual
---------------------------------------------------------- */

#mainvisual{
width:100%;
height:490px;
margin:170px 0 0 0;	
background-size:cover;
background-image:url(../img/mainvisual_bg.jpg?201603231320);
}

#mainvisual .inner{
width:1200px;
margin:0 auto;
text-align:left;
position:relative;
}

#mainvisual .inner h1{
font-size:3.6rem;
position:absolute;
top:200px;
width:100%;

color:#fff;
text-shadow:2px 2px 2px #000;
}




/* product
---------------------------------------------------------- */

section#product{
background:#fff;
padding:60px 0;
}

section#product .inner{
width:1080px;
margin:0 auto;
text-align:left;
position:relative;
}

section#product .inner h2{
font-size:6.0rem;
width:100%;
text-align:center;
margin:0 0 50px 0;
color:#2b5594;
font-style:italic;
text-shadow:1px 1px 1px #d3d3d3;
}

section#product .inner h3{
font-size:2.4rem;
width:100%;
padding:5px 10px;
margin:0 0 50px 0;
color:#2b5594;
background:#c9ddfa;
}

section#product .exp{
float:left;
width:400px;
margin:0 0 0 20px;
font-size:1.5rem;
line-height:1.9;
}

section#product ul.p-image{
list-style:none;
}
section#product ul.p-image li{
float:left;
margin:0 15px 0 0;
}


/* Company
---------------------------------------------------------- */

section#company{
padding:80px 0;
background-size:cover;
background-image: url(../img/company_bg.jpg?201603231320);
color:#fff;
}

section#company .inner{
width:1000px;
margin:0 auto;
text-align:left;
position:relative;
}

section#company .inner h2{
font-size:6.0rem;
width:100%;
text-align:center;
margin:0 0 50px 0;
color:#fff;
font-style:italic;
text-shadow:1px 1px 1px #d3d3d3;
}

section#company .inner h3{
font-size:2.6rem;
text-align:center;
margin:0 0 0 0;
color:#fff;
text-shadow:1px 1px 1px #d3d3d3;
}

section#company .inner h4{
font-size:2.2rem;
text-align:center;
margin:0 0 10px 0;
color:#fff;
text-shadow:1px 1px 1px #d3d3d3;
}

section#company .inner .tel{
font-size:2.0rem;
color:#fff;
text-align:center;
margin:0 0 50px 0;
}

section#company .inner .message{
width:800px;
margin:0 auto;
font-size:1.6rem;
text-align:center;
}



/* Contact
---------------------------------------------------------- */

section#contact{
background: url(../img/contact_bg.jpg) repeat 0 0;
padding:50px 0 80px 0;
}

section#contact .inner{
width:1200px;
margin:0 auto;
text-align:left;
position:relative;
}

section#contact .inner h2{
font-size:6.0rem;
width:100%;
text-align:center;
margin:0 0 50px 0;
color:#333;
font-style:italic;
text-shadow:1px 1px 1px #d3d3d3;
}

section#contact .inner #mailArea{
width:800px;
margin:20px auto;
padding:20px;
background:rgba(256,256,256,0.6);
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}

section#contact .inner #mailArea dl{
margin:0 0 0 230px;
}
section#contact .inner #mailArea dt{
clear:both;
float:left;
width:9em;
margin:0 0 5px 0;
}
section#contact .inner #mailArea dd{
float:left;
margin:0 0 5px 0;
}


/* footer
---------------------------------------------------------------------------- */

footer{background:#fff;padding:50px 0 70px 0;color:#666;}

footer .inner{
width:1200px;
margin:0 auto;
text-align:center;
position:relative;
}

footer a{color:#666;}
footer a:visited{color:#666;}
footer a:hover{color:#00a3af;}

footer ul.footlink {list-style:none;margin:20px 0;}
footer ul.footlink li{display:inline;}

footer copyright{font-size:1.2rem;letter-spacing:2px;}


/* Color Stock 
---------------------------------------------------------------------------- */

.red{color:#F00;}
.blue{color:#00C;}
.orange{color:#F60;}
.brown{color:#960;}
.pink{color:#e47fcd;}
.green{color:#1fad70;}
.violet{color:#8e779f;}
.white{color:#ffffff;}

/* etc
---------------------------------------------------------------------------- */

a:hover img{
opacity:0.7;
filter:alpha(opacity=70);
-ms-filter: "alpha( opacity=70 )";
background:none!important;
}

img{vertical-align:bottom;}
a img{border:none;}

a{color: #666;text-decoration:underline;overflow:hidden;outline:none;}
a:visited{color:#666;text-decoration:underline;}
a:hover{color: #f1f1f1; text-decoration:underline;}

div {  
zoom: 1;/*for IE 5.5-7*/  
}  
div:after {/*for modern browser*/  
content: ".";  
clear: both;  
display: block;  
line-height: 0;  
height: 0;  
visibility: hidden;  
}  

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

* html>body .clearfix {
display: inline-block; 
width: 100%;
}

* html .clearfix {
/* Hides from IE-mac \*/
height: 1%;
/* End hide from IE-mac */
}	

*:first-child+html .clearfix{/*for IE7*/
height:1%;
}

br{letter-spacing: 0px;}
.clr{clear:both;}
.fs16{font-size:16px}
.fs15{font-size:15px}
.fs14{font-size:14px}
.fs13{font-size:13px}
.fs12{font-size:12px}
.fs11{font-size:11px}
.fs10{font-size:10px}

.mt5  {margin: 5px 0 0 0;}
.mt10 {margin: 10px 0 0 0;}
.mt20 {margin: 20px 0 0 0;}	
.ml5  {margin: 0 0 0 5px;}
.ml10 {margin: 0 0 0 10px;}	
.ml20 {margin: 0 0 0 20px;}		
.ml30 {margin: 0 0 0 30px;}		
.mb5  {margin-bottom: 5px;}	
.mb10 {margin-bottom: 10px;}
.mb20 {margin-bottom: 20px;}
.mb30 {margin-bottom: 30px;}
.mtb5 {margin:5px 0;}	
.mtb10 {margin:10px 0;}
.mtb20 {margin:20px 0;}
.hidden {display:none;}