@charset "utf-8";

/*=========================================================

	Application all

==========================================================*/

html,body{
  text-align:center;
  line-height:1.5;
  font-family:"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ","Meiryo",Verdana,Arial,"ＭＳ Ｐゴシック",sans-serif;
  font-size:small;
  color:#333;
  margin:0;
  padding:0;
  background:#fff;
}

body{
  background:url(../img/back_html.jpg) 0 0 repeat-x;
}

table{
  text-align:left;
  font-size:small;
}


a{text-decoration:underline;}
a:link{color:#05c;}
a:visited{color:#70a;}
a:hover{color:#3ac;}

img{
  vertical-align:text-bottom;
  border:0;
}

h1,h2,h3,h4,h5,h6{
  font-size:small;
  margin:0;
}

form,p{
  padding:0;
  margin:0;
}

input,select,textarea{
  font-family:"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ","Meiryo",Verdana,Arial,"ＭＳ Ｐゴシック",sans-serif;
  font-size:small;
}

hr{
  height:1px;
  padding:0;
  margin:0;
  border:0;
}

address,em{
  font-style:normal;
}




/*=========================================================

	Flame layout

==========================================================*/

#container{
  width:100%;
  background:url(../img/back_container.jpg) 50% 0 no-repeat;
}

.layout{
  text-align:left;
  width:780px;
  margin:0 auto;
}

#side{
  clear:right;
  float:right;
  position:relative;
  z-index:100;
  width:210px;
  padding:15px;
  margin-top:-70px;
  background:url(../img/back_side.jpg) 0 0 no-repeat;
}

#base{
  float:left;
  width:530px;
}

#footer{
  clear:both;
  color:#eee;
  width:100%;
  background:url(../img/back_footer.gif) 0 0 repeat-x #000;
}



/*=========================================================

	Clear Default CSS

==========================================================*/

ul#header-navi,#footer ul,#side ul{
  list-style:none;
  padding:0;
  margin:0;
}



/*=========================================================

	Decoration

==========================================================*/

/*== Header ==============================================*/

#container h1{
  position:relative;
  z-index:1;
  float:left;
  width:255px;
  height:221px;
  margin-left:-15px;
  background:url(../img/back_logo.jpg) 0 0 no-repeat;
}

#container h1 a{
  display:block;
  text-decoration:none;
  width:112px;
  height:90px;
  margin:42px 0 0 78px;
}


#description{
  position:relative;
  float:right;
  width:500px;
  height:280px;
}

#description p{
  font-size:1.25em;
  padding:10px;
  margin-top:115px;
  background:url(../img/back_description.png);
}

#description ul#header-navi{
  position:absolute;
  top:0;
  right:0;
  width:206px;
}

#description ul#header-navi li{
  float:left;
  text-align:center;
  width:103px;
  height:38px;
}

#description ul#header-navi li a{
  display:block;
  color:#05a;
  text-decoration:none;
  line-height:38px;
  width:100px;
  margin-left:3px;
  background:url(../img/back_header-navi.jpg) 50% 100% no-repeat #fff;
}

#description ul#header-navi li a:hover{
  line-height:43px;
}



/*== Side ================================================*/

#side h2{
  font-size:1.25em;
  font-weight:normal;
  color:#c00;
  padding:0 0 5px;
  margin-bottom:5px;
  background:url(../img/back_01.gif) 0 100% repeat-x;
}

#side ul#navigation{
  width:210px;
  margin-bottom:50px;
}

#side ul#navigation li{
  border-bottom:1px solid #ccc;
}

#side ul#navigation li a{
  display:block;
  text-decoration:none;
  line-height:38px;
  color:#333;
  padding:0 0 0 10px;
  background:#fff;
}

#side ul#navigation li a.web{background:url(../img/navi_web.gif) 100% 0 no-repeat;}
#side ul#navigation li a.web:hover{background:url(../img/navi_web.gif) 100% 100% no-repeat;}

#side ul#navigation li a.works{background:url(../img/navi_works.gif) 100% 0 no-repeat;}
#side ul#navigation li a.works:hover{background:url(../img/navi_works.gif) 100% 100% no-repeat;}

#side ul#navigation li a.poster{background:url(../img/navi_poster.gif) 100% 0 no-repeat;}
#side ul#navigation li a.poster:hover{background:url(../img/navi_poster.gif) 100% 100% no-repeat;}

#side ul#navigation li a.service{background:url(../img/navi_service.gif) 100% 0 no-repeat;}
#side ul#navigation li a.service:hover{background:url(../img/navi_service.gif) 100% 100% no-repeat;}


#side ul#navigation li a.customer{background:url(../img/navi_customer.gif) 100% 0 no-repeat;}
#side ul#navigation li a.customer:hover{background:url(../img/navi_customer.gif) 100% 100% no-repeat;}

#side ul#navigation li a.estimation{background:url(../img/navi_estimation.gif) 100% 0 no-repeat;}
#side ul#navigation li a.estimation:hover{background:url(../img/navi_estimation.gif) 100% 100% no-repeat;}


p.banner img{
  margin-bottom:10px;
}


div#plan{
  margin-bottom:25px;
}

div#plan h2{
  padding:0;
  margin:0;
  background:none;
}



div#network{
  position:relative;
  width:210px;
  margin-top:25px;
}

div#network h2 span{
  position:absolute;
  display:block;
  top:-10px;
  right:0;
  width:41px;
  height:41px;
}



/*== Footer ==============================================*/

#footer hr{
  display:none;
}

#footer a,
#footer a:visited{
  color:#fff;
}

#footer a:hover{
  color:#3ac;
}

#footer p.pagetop{
  text-align:right;
  width:780px;
  margin:0 auto 25px;
}


#footer h3{
  font-size:1.25em;
  font-weight:normal;
  color:#eee;
  padding:10px 5px 5px;
  border-bottom:2px solid #333;
  background:url(../img/back_01.gif) 0 0 repeat-x #111;
}


#footer div.footer-navi{
  float:left;
  width:253px;
  margin-right:10px;
}

#footer ul{
  line-height:32px;
  margin-bottom:25px;
}

#footer ul li{
  border-bottom:1px dotted #333;
}

#footer ul li a{
  display:block;
  line-height:32px;
  padding-left:28px;
  background:url(../img/icon_05.gif) 0 50% no-repeat;
}

#footer ul li a:hover{
  background-color:#333;
}


#footer div.address{
  float:right;
  width:254px;
  padding-bottom:25px;
  background:url(../img/back_footer-address.gif) 100% 100% no-repeat;
}

#footer div.address address{
  line-height:1.5;
  padding:5px;
  margin-top:10px;
}

#footer div.address address img{
  vertical-align:middle;
  margin-right:5px;
}


#footer p.copyright{
  clear:both;
  color:#eee;
  padding:25px 0;
  background:url(../img/back_copyright.gif) 0 0 repeat-x #505050;
}