@charset "UTF-8";

@media screen and (max-width : 640px ){
		
#top-head,
    .inner {
        width: 100%;
        padding: 0;
    }
    #top-head {
        top: 0;
        position: fixed;
        margin-top: 0;
    }

#top-head.fixed {
        padding-top: 0;
        background: transparent;
    }
    #mobile-head {
        background: #fff;
        width: 100%;
        height: 80px;
        z-index: 999;
        position: relative;
    }
    #top-head.fixed .logo,
    #top-head .logo {
        position: absolute;
        left: 13px;
        top: 13px;
	}
	
    #global-nav {
		position: absolute;
		top: -500px;
        background: #FCCF00;
        width: 100%;
        text-align: center;
        padding: 10px 0;
        -webkit-transition: .5s ease-in-out;
        -moz-transition: .5s ease-in-out;
        transition: .5s ease-in-out;
	}
    #global-nav ul {
        list-style: none;
        position: static;
        right: 0;
        bottom: 0;
        font-size: 20px;
    }
    #global-nav ul li {
        float: none;
        position: static;
    }
    #top-head #global-nav ul li a,
    #top-head.fixed #global-nav ul li a {
		margin: 0 auto;
        width: 100%;
        display: block;
        color: #fff;
        padding: 18px 0;
    }
    #nav-toggle {
        display: block;
    }
    .open #nav-toggle span:nth-child(1) {
        top: 11px;
        -webkit-transform: rotate(315deg);
        -moz-transform: rotate(315deg);
        transform: rotate(315deg);
    }
    .open #nav-toggle span:nth-child(2) {
        width: 0;
        left: 50%;
    }
    .open #nav-toggle span:nth-child(3) {
        top: 11px;
        -webkit-transform: rotate(-315deg);
        -moz-transform: rotate(-315deg);
        transform: rotate(-315deg);
    } 

     .open #global-nav { -moz-transform: translateY(556px);
        -webkit-transform: translateY(556px);
        transform: translateY(556px);
    }

#text-box{margin: 0 auto;}

.background-white{background: #fff; 
	              margin: 0 calc(50% - 50vw);}


.background-yellow{background: #FCCF00;
                   margin: 0 calc(50% - 50vw);}
	
	
#Top_pc {display:none;}
#Top_sp {display:block;}	
	
	
#Top{
	 display : block;
     margin :  auto;
	 padding-top: 60px;
	 height: 455px;
	 width: 100%;
	 text-align: center;
	 background-color: #FCCF00;}
	
	
.video-sp{
	      height: auto;
	      width:  375px;}
	
	

#about{
	   display: block;
       height: 500px;
	   width: auto;
	   margin: 0 auto;
	   background-color: #fff;
       background-size: cover;}

h2{ width: 30%;
	height: 30%;}

.about_block{
	         display: block; 
             padding-top: 40px;
	         padding-left: 30px;}

.info{
	  display: block;
	  padding-top: 30px;
	  font-weight: normal;
	  text-align: left;
	  font-size: 16px;
	  line-height: 30px;
	  color: #FCCF00;}

.mgr-50{margin-right: 75px;}
	
.mgr-40{margin-right: 27px;}

.mgr-54{margin-right: 80px;}

.mgr-60{margin-right: 87px;}

.mgr-8{margin-right: 58px;}
	
.MAP-icon{padding-left:107px;}


#map{
	 height: 1000px;
	 width: auto;
	 margin: auto;
	 padding-left: 30px;
	 padding-right: 30px;
	 background-color: #FCCF00;
     background-size: contain;}

	
.map_picture{height: auto;width: 90px;}
	

h3{ 
	margin: auto;
	padding-top: 55px;}
	
.map_picture{height: auto;width: 90px;}	
	

	
	
.gmap {
       position: relative;
	   padding-bottom: 10%;
	   height: 500px;
	   width: auto;
       overflow: hidden;
                        }
	
	
.gmap iframe {
              position: absolute;
              padding-top: 10px;
              top: 0;
              left: 0;
              width: 100%;
              height: 100%;
                           }			


.access{
	    position: absolute;
	    desplay: block;
	    font-weight: normal;
	    font-size: 16px;
	    color: #fff;}

.access2{
	     padding-top:40px;
         line-height: 22px;}

.access3{line-height: 50px;}

.access4{line-height:22px;
	     padding-bottom:4px;}

.access5{line-height: 22px;}
	
	
.br-pc {display:none;}
.br-sp {display:inline-block;}



	
h4{ height: 30%;
	width: 30%;}
	

#service{
         height: 680px;
	     width: 856px;
	     margin: 0 auto;
	     background-color: #fff;
         background-size: contain;}


.service_block{
	           display: block;
	           padding-top: 45px;
	           padding-left: 30px;}



.tool1{padding-top: 37px;
	  font-weight: normal;
	  font-size: 16px;
	  color: #FCCF00;}

.tool2{padding-bottom: 10px;
	  font-weight: normal;
	  font-size: 20px;
	  color: #FCCF00;}

.tool3{padding-top: 25px;
	   margin-left: 20px;
	   line-height: 40px;}


#works{
	   height: 650px;
	   background-color: #FCCF00;
       background-size: contain;}

h5{ 
	text-align: center;
	padding-top: 140px;
	padding-bottom: 50px;
}

.key{
	 text-align: center;
     color: #fff;}

.key_icon{
	      padding-bottom: 60px;}

.goran{
	   line-height: 26px;
	   font-size: 16px;}
	
.goran a{
	     font-weight:bold;
	     text-decoration: none;
	     color: #fff;}
	
	
.goran a:hover{
	           color: #0000EE;}



#contact{
	     height: 750px;
	     background-color: #fff;
	     background-size: contain;
	     }

.contact_block{
	           display: inline-block;
	          }

h6{ padding-top: 70px;
	padding-left: 30px;
	text-align: left;}

.container{ padding-top: 40px;
	        padding-left: 30px;
	        text-align: left;}
	
.align-light{float: left;}


.form-group{
	        font-size: 20px;
            margin-bottom: 30px;
            line-height: 1.5;}

.label-danger{
	          padding: 3px;
	          font-size: 12px;
	          color: #fff;
              background-color:#595757}

#name {
	  font-size: 14px;
	  display: block;
	  width: 342px;
	  height: 26px;}

#company {
	       font-size: 14px;
	       display: block;
	       width: 342px;
	       height: 26px;}


#email{
	  font-size: 14px;
	  display: block;
	  width: 342px;
	  height: 26px;}



#message {
	font-size: 14px;
	display: block;
    resize: none;
    width: 342px;
    height: 100px;
}



input required{
               background: #ffcdd2;}

input[type="email"] invalid{background: #ffcdd2;}

input valid{
  background: transparent;}

input focus{
  background: #DCEDC8;}

footer{
	   height: 120px;
	   text-align: center;
	   padding-top: 17px;
	   background-color: #FCCF00;
       background-size: contain;
       color: #fff;}

.footer{
	     font-weight: bold;
	     font-size: 11px;}

.footer2{
	     padding-top: 9px;
	     font-size: 11px;}

.footer3{
	     padding-top: 20px;
	     font-size: 10px;}

}