.yss_content{
  position:fixed;
  width:100%;
  top:0;
  right:-100%;
  z-index:9999;
  overflow-y:hidden;
	height:100%;}
.yss_content.yss_left{
  right:auto;
  left:-100%;
}

@charset "UTF-8"; 




.yss_open,
.yss_close{
	position: fixed;
	display: none;
  max-width:30px;
  height:130px;
  margin:0 10px 10px;
  padding:10px;
  color:#fff;
  line-height:1;
  background-color:red;
	float:right;
	right: 0px;
	top: 115px;
	z-index:99;
	text-align:center;
    writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    -webkit-writing-mode:vertical-rl;

}


.yss_open a{
	color: white;
}

.yss_content{
  padding:10px;
  background:white;
}

.yss_content[data-yss="number4"]{
  width:30%;
}

.yss_content[data-yss="number8"]{
  width:70%;
}

/*||||||　@media 800px以内　||||||*/
@media screen and (max-width: 800px) { 
	.yss_content[data-yss="number4"]{
	  width:75%;
	}
	.yss_content[data-yss="number8"]{
	  width:100%;
	}
} /*/max-width: 800px*/


/*||||||　@media 801px以上　||||||*/
@media screen and (min-width:801px) and ( max-width:1024px) {
	.yss_content[data-yss="number4"]{
	  width:45%;
	}
} /*/min-width 801px*/