@charset "utf-8";





html {
 overflow-y: scroll;
}





a{
	color:#b4b4b4;
	text-decoration:none;
}


a:hover{
	color:#333333;
}



#wrapper{
	width:100%;
	margin:0 auto;
	max-width:1000px;
}




.btn {
  display: none;
}




#left{
	width:20%;
	float:left;	
	position: sticky;
    top: 0;
}



#left h1 img{
	width:65%;
	margin-top:2.5rem;
	margin-left:2%;
}



#left nav{
	margin-left:10%;
	margin-top:2rem;
}



#left nav ul li{
	letter-spacing:0.1em;
	font-weight:bold;
	font-size:0.9rem;
	line-height:2.5rem;
	font-family: "Arial";
}




h2{
	font-family:"Arial";
	font-size:95%;
	background-color:#000;
	color:#fff;
	padding-left:5%;
	padding-top:0.2rem;
	padding-bottom:0.3rem;
	letter-spacing:0.3rem;
	margin-bottom:4rem;
}




.stitle{
	display:block;
	margin:0 auto;
	font-size:130%;
	clear:both;
	text-align:center;
	margin-bottom:4rem;
	margin-top:5rem;
	border:1px solid #000;
	padding:1rem 1rem;
	width:30%;
	letter-spacing:1px;
}



.works{
	padding-left:1rem;
}



#right{
	width:80%;
	float:right;	
}


#right header{
	padding-top:5rem;
	padding-bottom:1.5rem;
}



#right header p{
	font-size:75%;
	letter-spacing:0.1em;
	text-align:right;
	margin-right:0.5%;
	font-family:'メイリオ';
}





footer{
	clear:both;	
	font-size:0.75rem;
	text-align:center;
	letter-spacing:0.1em;
	background-color:#000000;
	padding-top:1rem;
	padding-bottom:1rem;
	margin:0 auto;
	line-height:1rem;
	font-family: "Arial";
}



footer .yoko{
	display: inline-flex;
	flex-wrap: wrap;
	justify-content: center;
	padding-left:5%;
	padding-right:5%;
	margin-bottom:0.5rem;
}


footer ul li+li:before{
	content:" | ";
	color:#b4b4b4;
}


footer ul{
	margin-bottom:5px;
}

footer ul li{
	padding-right:0.2rem;
}



footer ul a{
	margin-bottom:5px;
	color:#b4b4b4;
}


footer ul a:hover{
	color:#ffffff;
}



footer p{
	color:#b4b4b4;
}






#home nav .home a,
#service nav .nav1 a,
#workflow nav .nav2 a,
#works nav .nav3 a,
#act nav .nav4 a,
#graphic nav .nav5 a,
#about nav .nav6 a,
#contact nav .nav7 a{
	color:#000000;
}



#home footer .home a,
#service footer .nav1 a,
#workflow footer .nav2 a,
#works footer .nav3 a,
#act footer .nav4 a,
#graphic footer .nav5 a,
#about footer .nav6 a,
#contact footer .nav7 a,
#privacypolicy footer .nav8 a{
	color:#ffffff;
}





@media screen and (max-width:767px){



#left{
	position:static; 
}



  button {
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: inherit;
    vertical-align: middle;
    text-align: inherit;
    font: inherit;
    -webkit-appearance: none;
    appearance: none;
  }
  








#left{
	width:100%;
	float: none;
}


#right{
	width:100%;
	float:none;	
}




#left h1 img{
	width:30%;
	display:block;
	margin:0 auto;
	margin-top:2.5rem;
}



#right header{
	padding-top:0rem;
	padding-bottom:2rem;
}




#right header p{
	font-size:90%;
	letter-spacing:0.1em;
	text-align:center;
	font-weight:bold;
	color:#333333;
	padding-left:13%;
	padding-right:13%;
	line-height:1.5rem;
	font-family:"ヒラギノ丸ゴシック ProN","游ゴシック","メイリオ", "Meiryo", sans-serif;
}





 /*-------ハンバーガーー-----*/

  .menu a{
    color: #fff;
  }
  
  .menu a:hover{
  	color: #cccccc;
  }




#left nav ul li a:hover{
	color:#cccccc;
}




  .menu {
    border: none;
    position: fixed;
    width: 50%;
    margin-left: 50%;
    padding-bottom: 35vh;
    padding-top: 15vh;
    right: -50%;
    height: 70vh;
    top: 0;
    display: flex;
    flex-direction: column;
    background-color:rgba(33, 140, 113, 0.6);
    transition: .3s;
    z-index:995;
  }


  .menu li {
    font-size: 110%;
    width:100%;
    height: 100%;
    display: flex;
    justify-content: left;
    align-items: center;
    padding-left: 23%;
    border-bottom:solid 1px #fff;
    width:50%;
    margin-left:10%;
  }
  
  .menu li:hover {
   color:#ccc;
    cursor: pointer;
    transition: .3s;
  }

  .btn {
    display: block;
    position: fixed;
    top: 1.5rem;
    right: 1.5rem;
    width:40px;
    height:40px;
    z-index: 999;
  }
  
  /***** 真ん中バーガー線 *****/
  .btn-line {
    display: block;
    position: relative;
    width: 100%;
    height: 4px;
    background-color: #2a2a2a;
    transition: .1s;
  }
 
  /****** 上下バーガー線 *****/
  .btn-line::before,
  .btn-line::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #2a2a2a;
    transition: .5s;
  }
  
  .btn-line::before {
    transform: translateY(-13px);
  }
  .btn-line::after {
    transform: translateY(13px);
  }
  
  
  .menu.open {
    right: 0;
    z-index: 990;
  }
  
  
  
  
  /***** メニューオープン時 *****/
  .btn-line.open {
    background-color: transparent;
  }
  .btn-line.open::before ,
  .btn-line.open::after {
    content: "";
    background-color: #ffffff;
    transition: .2s;
  }
  .btn-line.open::before {
    transform: rotate(45deg);
  }
  .btn-line.open::after {
    transform: rotate(-45deg);
  }










h2{
	font-family:"Arial";
	font-size:95%;
	background-color:#000;
	color:#fff;
	padding-left:8%;
	padding-top:0.2rem;
	padding-bottom:0.3rem;
	letter-spacing:0.3rem;
	margin-bottom:2rem;
}



.stitle{
	margin-top:3rem;
	border:1px solid #000;
	padding:1rem 1rem;
	width:30%;
}



footer{
	padding-top:1.7rem;
	padding-bottom:1.7rem;
	padding-left:0.5rem;
	padding-right:0.5rem;
	margin:0 auto;
	line-height:1.5;
}


footer .yoko{
	padding-bottom:0.3rem;
}





}