@charset "utf-8";
/* CSS Document */

*{
   margin:0;
   padding:0;
   list-style:none;
   line-height:180%;
   font-size:14px;
   font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
   color:#333;
   box-sizing:border-box;
   }
   
a:hover{
   text-decoration:none;
   color:#3CC;
   }
   
.clearfix:after {
    content:" ";
    display:block;
    clear:both;
}


/*#wrap{
   margin:0 auto;
   width:100vw;
   }*/

#header-fixed{
	position: fixed;   
	 top: 0px;                   /* 位置(上0px) */
    left: 0px;                  /* 位置(右0px) */
    width: 100%;
	  height:88px;         
	background-color:#fff; 
	z-index:9999; 要素の重なり順*/
}


#topmenu{
	float:right;
   margin:36px 40px 0px 0px;
   }

#header li{
	float:left;
	 padding-left:60px;
}
   
#header_img{
	float:left;
	margin-top:14px;
}

h1{
	font-weight:normal;
	font-size:12px;
	margin:8px 0 8px 20px;
	
}


.topimg img{
	display: block;
	margin-top:88px;
	width:100vw;
}

.clear{
	clear:both;
}

#sevice{
	background-image:url(../img/service_bg_s1.jpg);
	background-repeat: no-repeat;
}

#sevice h2{
	font:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	color:#FC0;
	font-size:50px;
	padding-top:20px;	
}

.parent {
	overflow: hidden;
    width:880px;      /* 追加 */
    margin: 0 auto;    /* 追加 */
	margin-bottom: 60px;
}

.sevice{
	float:left;
	width:238px;
	margin:60px 0px 10px 44px;
}

.service_h3{
	font-size:17px;
	font-weight:bold;
	text-align:center;
	padding:24px 0px 20px 0px;
}

.btn_img{
	margin-bottom:30px;
}
	

.h2{
	font-size:20px;
	letter-spacing:4px;
}

#works{
	clear:both;
	background-image:url(../img/works_bg_s1.jpg);
	background-repeat: no-repeat;
}

#works h2{
	font:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; 
	color:#FF0;
	font-size:50px;
	padding-top:20px;	
}

#actual{
	
    width:780px;      /* 追加 */
    margin: 0 auto;    /* 追加 */
	margin-top:50px;
	margin-bottom:44px;
	text-align:left;
	
}

#actual ul li{
	font-size:14PX;
	letter-spacing:2px;
	border-bottom:solid 1px #666;
	padding:17px 0 14px 0;
}

.mrk{
	font-size:16px;
	font-weight:bold;
	padding:24px 0px 0px 0px;
}

.mrk_b{
	text-align:right;
	padding-top:50px;
}

#company{
	background-image:url(../img/company_bg_s1.jpg);
	background-repeat: no-repeat;
}

#com_info{
	
    width:780px;      /* 追加 */
    margin: 0 auto;    /* 追加 */
	margin-top:50px;
	margin-bottom:44px;
	text-align:left;
}


table, td, th {
    border-bottom: 1px solid black;
	border-bottom-color:#999;
	padding:20px 0 20px 0;
	width:770px;
	
}
table {
    border-collapse: collapse;
	
}

table th{
	width:188px;
}

#company h2{
	font:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; 
	color:#FF0;
	font-size:50px;
	padding-top:20px;	
}

.a{
	border-bottom-color:#FFF;
}

#map{
	margin:0 0 30px 350px;
}

#footer{
	clear:both;
   background-image:url(../img/footer_bg.jpg);
   height:74px;
   margin: 0 auto; 
}

.foot_c{
	color:#FFF;
	float:left;
	padding:20px 0 0 20px;
}

#footer li{
   float:left;
   padding-left:30px;
     padding-top:22px;
   }
   
#footer a{
	color:#FFF;
}

#footer_menu{
	float:right;
	position:relative;
	right: 5%;
}


@media screen and (max-width: 1000px){
	#wrap{
		overflow:hidden;
	}


	
	
#header_img img{
	width: 70%;
	height: auto;
   }
   
h1{
	letter-spacing: 0.05em;
	margin:8px 0 4px 10px;
	
	
}  

 
   
.resizeimage img{
	display: block;
	position: relative;
	margin-top:34px;

}


#sevice{
	background-image:url(../img/service_bg2.jpg);
	background-repeat: no-repeat;
}

#works{
	background-image:url(../img/works_bg2.jpg);
	background-repeat: no-repeat;
}

#company{
	background-image:url(../img/company_bg2.jpg);
	background-repeat: no-repeat;
}
    
.parent{
	 width:84%;
	   margin: 0 auto;
	    position:relative;
		margin-bottom:20px;
	
   }
     
   
   
.h2 {
	font-size:12px;
}
   
   #sevice h2{
	font-size:30px;
	padding-top:12px;	
}

#actual ul li{
	font-size:13px;
}

   
.sevice{
	   clear:both;
	   width:100%; 
	   text-align:center;
	  margin:44px 0px 10px 0px;	   
   }

.sevice img{
	width: 204px;
    height: auto; 
}
   

.btn_img{
	margin-bottom:2px;
}


#works h2{
	font-size:30px;
	padding-top:14px;	
}

.mrk_b{
	padding-top:30px;
	margin-bottom:30px;
}

#company h2{
	font-size:30px;
	padding-top:14px;	
}
   

 #actual{
	   width:84%;
	   margin: 0 auto;
	    position:relative;
	margin-top:20px;  
	  
   }
   

   
   #com_info{
	   width:84%;
	    margin: 0 auto;
		 position:relative;
	margin-top:34px;  
   }
   
   table{
	width:100%;
	 margin: 0 auto;
}


#map{
	overflow:hidden;
	margin:0 14px 30px 0px;
}




#footer_menu{
	display:none;
}



#header-bk { 
	height:60px;              
	width:100%;                /* 横の幅を100% */
}

/* bager menu */
 
#header #navi {
  transition: all .6s;
  overflow-y: auto;
  padding-top: 40px;
  width: 300px;
  height: 100vh;
  z-index: 200;
  top: 0;
  right: -320px;
  background-color: #fff;
  position: fixed;
}
 
#header .nav_btn {
  width: 44px;
  height: 44px;
  z-index: 300;
  top: 7px;
  right: 7px;
  cursor: pointer;
  position: absolute;
}
 
.hamburger_line {
  transition: all .6s;
  width: 34px;
  height: 2px;
  left: 5px;
  background-color: #000;
  position: absolute;
}
 
.hamburger_line1 { top: 10px; }
.hamburger_line2 { top: 21px; }
.hamburger_line3 { top: 32px; }
 
.nav_bg {
  opacity: 0;
  transition: all .6s;
  width: 100vw;
  height: 100vh;
  z-index: 100;
  top: 0;
  left: 0;
  visibility: hidden;
  background-color: #000;
  cursor: pointer;
  position: fixed;
}
 
/* 表示された時用のCSS */
.nav_open #header #navi { right: 0; }
 
.nav_open .nav_bg {
  opacity: .8;
  visibility: visible;
}
 
.nav_open .hamburger_line1 {
  transform: rotate(45deg);
  top: 20px;
}
 
.nav_open .hamburger_line2 {
  width: 0;
  left: 50%;
}
 
.nav_open .hamburger_line3 {
  transform: rotate(-45deg);
  top: 20px;
}   
   
#topmenu li {
	float:none;
	line-height:330%;
	
}
	
	


}

@media screen and (max-width: 670px){
	
#header-fixed{
	height:70px;
}
	
#header_img img{
	width: 58%;
	 height: auto;
	 margin-top:5px;
   } 
   
h1{
	letter-spacing: -0.03em;
	font-size:10px;
	margin:3px 0 4px 4px;
	
	
}   

h2{
	font-size:11px;
}
   
#top_img img{
	margin-top:70px;
}

.sevice img{
	width: 170px;
    height: auto; 
}

 table tr th{
	 width:38%;
}