@charset "UTF-8";

/* スマホ版開閉ドロワーメニュー  */
.DSmenu {
width:220px; 
height:100%;
background-color:rgba(255,255,255,1);
-webkit-transform:translateX(-220px);	
transform:translateX(-220px);	
-webkit-transition:ease .5s;
transition:ease .5s;
position:fixed; 
top:0; 
left:0;
z-index:9999;
}

.DSmenu.action {
width:220px; 
background-color:rgba(255,255,255,1);
-webkit-transform:translateX(0px);	
transform:translateX(0px);	
}

.DSmenu_inner {
width: 100%;
height: 100%;
  overflow-x: hidden;
  overflow-y:scroll;
}

  
  



.DSmenu .DSbtn {
position:absolute; 
top:0;
left:220px;
width:40px; 
height:40px;
padding:10px 10px;
-webkit-transition:ease .5s;
transition:ease .5s;
cursor:pointer;
z-index:10000;
background-color:rgba(255,255,255,1);
text-align:center;
}





.DSmenu ul {
width:237px;
-webkit-margin-before: 0;
-webkit-margin-after: 0;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
-webkit-padding-start: 0px;
padding: 20px 0 17px 0;
list-style-type:none;
overflow-y:scroll;

}

.DSmenu ul li {
padding:10px 0 0 0;
height: 80px;
margin-bottom:10px;
width:220px;
border-bottom: 1px solid rgba(255,255,255,.6);
color:#fff;
line-height: 1.4;
  }




.DSmenu ul li a {
	color: #666464;
	display: block;
	padding: 0 0 20px 0px;
	text-align: center;
	border-bottom: #DEDEDE dotted 1px;
	/**/
  transform: translate3d(-40px, 0, 0);
	-webkit-transform: translate3d(-40px, 0, 0);
	-moz-transform: translate3d(-40px, 0, 0);
	-ms-transform: translate3d(-40px, 0, 0);
	-o-transform: translate3d(-40px, 0, 0);
	transition: all 800ms cubic-bezier(0.19, 1, 0.22, 1) 0ms;
	-webkit-transition: all 800ms cubic-bezier(0.19, 1, 0.22, 1) 0ms;
	-moz-transition: all 800ms cubic-bezier(0.19, 1, 0.22, 1) 0ms;
	-o-transition: all 800ms cubic-bezier(0.19, 1, 0.22, 1) 0ms;
	-ms-transition: all 800ms cubic-bezier(0.19, 1, 0.22, 1) 0ms;  /**/
}


.DSmenu ul li a span{
padding: 0;
font-weight:normal;
margin-top:5px;
letter-spacing:1px;
display:block;}

.DSmenu ul li a:hover {color:#AFADA3;}

/* メニューが開いた時にスライドインする*/
.DSmenu.action ul li a{
  transform: translate3d(0px, 0, 0);
  -webkit-transform: translate3d(0px, 0, 0);
  -moz-transform: translate3d(0px, 0, 0);
  -ms-transform: translate3d(0px, 0, 0);
  -o-transform: translate3d(0px, 0, 0);
  opacity: 1 !important;
}

/* スライドイン 速度設定*/
.DSmenu.action ul li.gnav_01 a{
  transition: all 800ms cubic-bezier(0.165, 0.84, 0.44, 1) 100ms;
  -webkit-transition: all 800ms cubic-bezier(0.165, 0.84, 0.44, 1) 100ms;
  -moz-transition: all 800ms cubic-bezier(0.165, 0.84, 0.44, 1) 100ms;
  -o-transition: all 800ms cubic-bezier(0.165, 0.84, 0.44, 1) 100ms;
  -ms-transition: all 800ms cubic-bezier(0.165, 0.84, 0.44, 1) 100ms;
}
.DSmenu.action ul li.gnav_02 a{
  transition: all 800ms cubic-bezier(0.165, 0.84, 0.44, 1) 200ms;
  -webkit-transition: all 800ms cubic-bezier(0.165, 0.84, 0.44, 1) 200ms;
  -moz-transition: all 800ms cubic-bezier(0.165, 0.84, 0.44, 1) 200ms;
  -o-transition: all 800ms cubic-bezier(0.165, 0.84, 0.44, 1) 200ms;
  -ms-transition: all 800ms cubic-bezier(0.165, 0.84, 0.44, 1) 200ms;
}
.DSmenu.action ul li.gnav_03 a{
  transition: all 800ms cubic-bezier(0.165, 0.84, 0.44, 1) 300ms;
  -webkit-transition: all 800ms cubic-bezier(0.165, 0.84, 0.44, 1) 300ms;
  -moz-transition: all 800ms cubic-bezier(0.165, 0.84, 0.44, 1) 300ms;
  -o-transition: all 800ms cubic-bezier(0.165, 0.84, 0.44, 1) 300ms;
  -ms-transition: all 800ms cubic-bezier(0.165, 0.84, 0.44, 1) 300ms;
}
.DSmenu.action ul li.gnav_04 a{
  transition: all 800ms cubic-bezier(0.165, 0.84, 0.44, 1) 400ms;
  -webkit-transition: all 800ms cubic-bezier(0.165, 0.84, 0.44, 1) 400ms;
  -moz-transition: all 800ms cubic-bezier(0.165, 0.84, 0.44, 1) 400ms;
  -o-transition: all 800ms cubic-bezier(0.165, 0.84, 0.44, 1) 400ms;
  -ms-transition: all 800ms cubic-bezier(0.165, 0.84, 0.44, 1) 400ms;
}
.DSmenu.action ul li.gnav_05 a{
  transition: all 800ms cubic-bezier(0.165, 0.84, 0.44, 1) 500ms;
  -webkit-transition: all 800ms cubic-bezier(0.165, 0.84, 0.44, 1) 500ms;
  -moz-transition: all 800ms cubic-bezier(0.165, 0.84, 0.44, 1) 500ms;
  -o-transition: all 800ms cubic-bezier(0.165, 0.84, 0.44, 1) 500ms;
  -ms-transition: all 800ms cubic-bezier(0.165, 0.84, 0.44, 1) 500ms;
}
.DSmenu.action ul li.gnav_06 a{
  transition: all 800ms cubic-bezier(0.165, 0.84, 0.44, 1) 600ms;
  -webkit-transition: all 800ms cubic-bezier(0.165, 0.84, 0.44, 1) 600ms;
  -moz-transition: all 800ms cubic-bezier(0.165, 0.84, 0.44, 1) 600ms;
  -o-transition: all 800ms cubic-bezier(0.165, 0.84, 0.44, 1) 600ms;
  -ms-transition: all 800ms cubic-bezier(0.165, 0.84, 0.44, 1) 600ms;
}













/*----------------------------------------------------------------------------------------------------------------------menu_btn----------*/

.DSbtn span{
display: block;
width: 30px;
height: 2px;
background:#3C2617;
margin:5px 10px 10px;
transition:all .2s;
}





/*.DSbtn span.first{ margin}*/

.DSbtn span.first,
.DSbtn span.second,
.DSbtn span.third{
-webkit-transform: translate(-5px,0);
transform: translate(-5px,0);
}









/*.DSbtn span.second{
-webkit-transform: translate(5px,0);
transform: translate(5px,0);
}
*/

/*.DSbtn:hover span.first,
.DSbtn:hover span.second,
.DSbtn:hover span.third{
-webkit-transform: translate(0,0);
transform: translate(0,0);
}*/




/*
.DSbtn.action span.first {
width: 45%;
-webkit-transform: translate3d(2px, 10px, 0) rotate(45deg);
transform: translate3d(2px, 10px, 0) rotate(45deg);
}
.DSbtn.action span.second {
-webkit-transform: translate3d(-1px, 0, 0) rotate(-45deg);
transform: translate3d(-1px, 0, 0) rotate(-45deg);
}
.DSbtn.action span.third {
width: 45%;
-webkit-transform: translate3d(23px, -9px, 0) rotate(45deg);
transform: translate3d(23px, -9px, 0) rotate(45deg);
}


*/







.action .DSbtn span{
-webkit-transform: translate(0,0) rotate(0deg);
transform: translate(0,0) rotate(0deg);
height:2px;
width: 35px;
margin:10px 0;
background:#3C2617;
border: none;
box-shadow: none;
opacity: 1;
transition: all .4s;
-webkit-animation:none;
animation:none;
}
.action .DSbtn span:before,
.action .DSbtn span:after{
display: none;
}
.action .DSbtn span.first{
-webkit-transform: translate(0px,8px) rotate(45deg);
transform: translate(0px,8px) rotate(45deg);
}
.action .DSbtn span.second{
opacity: 0;
}
.action .DSbtn span.third{
-webkit-transform: translate(0px,-16px) rotate(-45deg);
transform: translate(0px,-16px) rotate(-45deg);
}


.shade.blur {
opacity:0.8;
webkit-filter: blur(2px);
filter: blur(2px);
} 
 
.back.gray {
  position:absolute;
  top:0px;
  left:0px;

  width:100%;
  height:100%;

  background-color:#CCC;
  opacity:0.9;
  z-index:101;
}