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

/*メニューボタンデザイン*/
.btn_box{
	width: 40px;
	height: 40px;
	position: absolute;
	top: 20px;
	right: 10px;
	cursor: pointer;
}

/*メニュー開いた時*/

nav#menu{
   width:100%;	
}
	
nav#menu ul{
   margin:0px;
   padding:0px;	
   margin-bottom: 60px;
}
	
nav#menu ul li{
   list-style-type:none;	
}
	
nav#menu ul li a{
   width:100%;
   display:block;
   background-color:#fff;
   color:#000;
   border-bottom:1px solid #000;	
   text-align:left;
   padding:15px 0px 15px 20px;
}


/*pc用*/
/*・・・・・横幅が700px以上の場合・・・・・*/
@media only screen and (min-width: 701px) {


.menu01
{ width:40px; height:3px; background-color:#000; right: 00px; top:0px; position:absolute; } 
.menu02
{ width:40px; height:3px; background-color:#000; right: 00px; top:15px; position:absolute; } 
.menu03
{ width:40px; height:3px; background-color:#000; right: 00px; top:30px; position:absolute; } 

}



/*SP用*/
/*・・・・・【 SP 】横幅が700以下の場合・・・・・*/
@media only screen and (max-width: 700px) {
/*.btn_box{ 
width: 40px; 
height:40px; 
top: 0px; 
position:absolut; 
cursor:pointer; 
}*/

.menu01
{ width:40px; height:4px; background-color:#000; right: 0px; top:00px; position:absolute; } 
.menu02
{ width:40px; height:4px; background-color:#000; right: 0px; top:18px; position:absolute; } 
.menu03
{ width:40px; height:4px; background-color:#000; right: 0px; top:36px; position:absolute; } 

#menu {
	margin-top: 60px;
}
#menu ul li a img {
	height: 40px;
	width: auto;
}

}


/* ↓↓↓↓↓共通↓↓↓↓↓ */


/*アニメーション*/

.menu01,.menu02,.menu03
{ transition: all 0.5s ease-out;
  -o-transition: all 0.5s ease-out; /* Opera */
  -moz-transition: all 0.5s ease-out; /* Firefox */
  -webkit-transition: all 0.5s ease-out; /* GoogleChrome, Safari */
  -ms-transition: all 0.5s ease-out; /* IE */ }
  
  
  /*クリック後*/
  .menuclick1
{ top:18px;
  -o-transform: rotate(405deg);
  -moz-transform: rotate(405deg);
  -webkit-transform: rotate(405deg);
  -ms-transform: rotate(405deg);
  transform: rotate(405deg); }
.menuclick2
{ opacity:0;}
.menuclick3
{ top:18px;
  -o-transform: rotate(-405deg);
  -moz-transform: rotate(-405deg);
  -webkit-transform: rotate(-405deg);
  -ms-transform: rotate(-405deg);
  transform: rotate(-405deg); }