
/*
枠*/
.DSmenu,
.action .DSmenu,
.DSbtn *,
.DSbtn *:before,
.DSbtn *:after {
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
}

.DSmenu {
    width:245px;
	height:100%;
    position: fixed;
    top: 0;
    right:-245px;
    z-index: 9;
	background-color:rgba(64,104,41,.9);
}
.action .DSmenu {
	right:-17px;
}
#mainNavi {
	height:calc(100vh - 100px);
	position:relative;
    overflow-x: hidden;
    overflow-y: scroll;
	margin-top:100px;
}
#mainNavi ul.menu {
	width: 75%;
	margin: 20px auto 20px;
	position: relative;
	left: -10px;
}

/*
枠 end
btn*/
.DSbtn > p{
    top: 60px;
    right: 5%;
    width: 60px;
    height: 50px;
    cursor: pointer;
	border-radius:0;
    position: fixed;
    z-index: 10;
	overflow:hidden;
}
.action .DSbtn > p{
	right:22px;
	width:185px;
	max-width:inherit;
	height: 43px;
	border: solid 1px #fff;
	border-radius: 5px;
	background-color: rgba(64,104,41,.9);
}
.DSbtn > p > span,
.DSbtn > p > span:before,
.DSbtn > p > span:after{
	content:"";
	position:absolute;
    display: block;
    width: 60px;
    height: 8px;
    background: #f8ff32;
	box-sizing:border-box;
}
.active03 .DSbtn > p > span,
.active03 .DSbtn > p > span:before,
.active03 .DSbtn > p > span:after{
	box-shadow:2px 2px 1px -1px rgba(0,0,0,.75);
}
.DSbtn > p > span{
	top:0;
	bottom:0;
	left:0;
	right:0;
	margin:auto;
}
.DSbtn > p > span:before{
	top:15px;
}
.DSbtn > p > span:after{
	top:-15px;
}
.action .DSbtn > p > span {
	width:0;
	height:0;
	background-color:#fff;
}
.action .DSbtn > p > span:before {
	width:27px;
	background-color:#fff;
	top:-4px;
	left:-15px;
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}
.action .DSbtn > p > span:after {
	width:27px;
	background-color:#fff;
	top:-4px;
	left:-15px;
    -moz-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
.DSbtn > span {
	position:fixed;
	width:100%;
	height:100%;
	display:block;
	pointer-events: none;
	z-index:-1;
}
.action .DSbtn > span {
	pointer-events:inherit;
	z-index:9;
}

#mainNavi ul.menu a{
	display:block;
	line-height:1;
	color:#fff;
	font-size:90%;
	text-align:center;
    padding: 0.75rem 1rem;
    text-decoration: none;
    border-radius: 5px;
    background-color: rgba(255,255,255,0.25);
    margin-top: 11px;
	border:solid 1px #fff;
	min-width:187px;
}
/*
btn end */

@media(max-width:1100px){
	.DSbtn > p{
		top:0;
		margin-top:5.5%;
	}
}
@media(max-width:760px){
	.DSbtn > p{
		margin-top:35px;
		width:10%;
		max-width:60px;
	}
	.DSbtn > p > span, .DSbtn > p > span:before, .DSbtn > p > span:after{
		height:6px;
	}
	.DSbtn > p > span:before{
		top:12px;
	}
	.DSbtn > p > span:after{
		top:-12px;
	}
}
