@charset "UTF-8";
/* メニュー */


#menu{
  width: 100%;
  margin: 0 ;
  padding: 0;
}
#menu li{
  display: block;
  float: left;
  width: 20%;
  margin: 0;
  padding: 0; }
#menu li a{
  display: block;
  padding: 2% 0 ;
  min-height: 45px;
  height: auto;
  height: 45px;
  background: #0e3950;
  font-size:13px;
  font-weight: normal;
  color: #fff;
  text-align: center;
  	text-decoration: none;
  	transition: color 0.3s, border-color 0.3s; 
}

#menu li a:hover{
  background: #235068;

}
#toggle{ 
 display: none;
}




#toggle{ 
 display: none;
}






/*drawrメニュー部分*/
*, *:before, *:after {
	padding: 0;
	margin: 0;　
	box-sizing: border-box;
}
ol, ul {
	list-style: none;
}
a {
	text-decoration: none;
	color: inherit;
}

.cp_cont {
	height: 10vw;
}
.cp_offcm01 {
	position: absolute;
	top: 0px;
	right: 0px;
	display: inline-block;
}
/* menu */
.cp_offcm01 .cp_menu {
	position: fixed;
	top: 0;
	right: -100vw;
	width: 250px;
	height: 100%;
	cursor: pointer;
	-webkit-transition: 0.53s transform;
	        transition: 0.53s transform;
	-webkit-transition-timing-function: cubic-bezier(.38,.52,.23,.99);
	        transition-timing-function: cubic-bezier(.38,.52,.23,.99);
	background-color: #607D8B;
	opacity: 1;
	z-index:1000;
}
.cp_offcm01 .cp_menu ul {
	margin: 0;
	padding: 0;
}
.cp_offcm01 .cp_menu li {
	list-style: none;
}
.cp_offcm01 .cp_menu li a {
	display: block;
	padding: 20px;
	text-decoration: none;
	color: #ffffff;
	border-bottom: 1px solid #ffffff;
}

.cp_offcm01 #cp_toggle01 {
	position: absolute;
	display: none;
	opacity: 0;
}
.cp_offcm01 #cp_toggle01:checked ~ .cp_menu {
	-webkit-transform: translateX(-100vw);
	        transform: translateX(-100vw);
}
/* menu toggle */
.cp_offcm01 #cp_toggle01 ~ label {
	display: block;
	padding: 0px 10px;
	cursor: pointer;
	-webkit-transition: 0.5s transform;
	        transition: 0.5s transform;
	-webkit-transition-timing-function: cubic-bezier(.61,-0.38,.37,1.27);
	        transition-timing-function: cubic-bezier(.61,-0.38,.37,1.27);
	text-align: center;
	color: #0e3950;
}
.cp_offcm01 #cp_toggle01:checked ~ label {
	-webkit-transform: translateX(-250px);
	        transform: translateX(-250px);
}
.cp_offcm01 #cp_toggle01 ~ label::before {
	font-family: 'helvetica';
	content: '≡';
	font-size: 3em;
}
.cp_offcm01 #cp_toggle01:checked ~ label::before {
	content: '×';
	background: #cccccc;
	padding:0 10px;
	opacity:0.8;
}

　　




　　
@media only screen and (max-width: 750px) {
    #menu li{
    width: 20%;
    border-bottom: 1px solid #444;
  }
}
@media only screen and (max-width: 480px) {
  #menu{
    display: none;
  }
  #menu li{
    width: 0%;
  }
  #menu li a{
    height: 0px;
  } 
  
}