/* common */
.sp-block{display:none;}
.sp-inline{display:none;}
.pc-block{display:block;}
.pc-inline{display:inline;}

.spmenu {display:none;position:absolute;width:34px;text-align:left;top:30px;left:2%;z-index:999999;cursor:pointer;
  transition: .5s;
}
.spmenu .bar1, .spmenu .bar2, .spmenu .bar3 {display:block;width:34px;height:2px;background:#444;cursor:pointer;transition: all 0.3s ease-in-out;}
.bar1 {margin:0 0 10px 0;}
.bar2 {margin:0 0 10px 0;}
.bar3 {margin:0;}

.sp-nav {display:block;position:fixed;top:0;left:-300px;width:300px;height:100%;overflow-y:auto;padding:0;border-right:solid 1px #ccc;background:#fff;z-index:999999;
transform: translate(0,0);
transition: .5s;
}
.sp-wrap {transition:.5s transform;}
.menu-on {transform:translate(300px,0);}
.menu-on .bar1 {transform-origin:0% 50%;transform:rotate(45deg);}
.menu-on .bar2 {background-color:transparent;}
.menu-on .bar3 {transform-origin:0% 50%;transform:rotate(-45deg);}

.menu-on-default {transform: translate(300px,0);}

.sp-nav ul li {position:relative;line-height:50px;text-indent:20px;border-bottom:1px solid #ddd;cursor:pointer}
.sp-nav ul li a {font-size: 17px;}
.sp-nav ul li strong {display:block;color:#222;font-weight:700;background:#f6f6f6}
.sp-nav ul li ul {max-height:0;overflow:hidden;padding:0 20px;
transition: 0.2s;
}
.sp-nav ul li.on > ul {max-height: 1000px;background:#f6f6f6;
transition: 1s;
}
.sp-nav ul li ul li {line-height:40px;border-bottom:none}
.sp-nav ul li ul li a {color:#888;font-size:14px;}
.sp-nav ul li .sub_on {display:block;position:absolute;width:13px;height:9px;right:20px;top:20px;overflow:hidden;line-height:99px;background:url(../../../img/arrow_down.gif) no-repeat 50% 50%}
.sp-nav a.logo-side {display:block;margin:0;text-align:center;}
.sp-nav a.logo-side img {}




@media screen and (max-width: 1024px){
.sp-block{display:block;}
.sp-inline{display:inline;}
.pc-block{display:none;}
.pc-inline{display:none;}
}